♻️(frontend) encapsulate recording maximum duration handling

Centralize the logic to compute, internationalize, and present the maximum
recording duration in a human-readable way, reducing duplication across the
codebase.

src/frontend/src/features/recording/components/LimitReachedAlertDialog.tsx

@@ -1,8 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { Button, Dialog, P } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
-import { useConfig } from '@/api/useConfig'
+import { useHumanizeRecordingMaxDuration } from '@/features/recording'
-import humanizeDuration from 'humanize-duration'
 
 export const LimitReachedAlertDialog = ({
   isOpen,
@@ -11,19 +10,19 @@ export const LimitReachedAlertDialog = ({
   isOpen: boolean
   onClose: () => void
 }) => {
-  const { t, i18n } = useTranslation('rooms', {
+  const { t } = useTranslation('rooms', {
     keyPrefix: 'recordingStateToast.limitReachedAlert',
   })
-  const { data } = useConfig()
+
+  const maxDuration = useHumanizeRecordingMaxDuration()
+
   return (
     <Dialog isOpen={isOpen} role="alertdialog" title={t('title')}>
       <P>
         {t('description', {
-          duration_message: data?.recording?.max_duration
+          duration_message: maxDuration
             ? t('durationMessage', {
-                duration: humanizeDuration(data?.recording?.max_duration, {
+                duration: maxDuration,
-                  language: i18n.language,
-                }),
               })
             : '',
         })}

src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx

@@ -8,6 +8,7 @@ import {
   useHasFeatureWithoutAdminRights,
   useStartRecording,
   useStopRecording,
+  useHumanizeRecordingMaxDuration,
 } from '@/features/recording'
 import { useEffect, useMemo, useState } from 'react'
 import { ConnectionState, RoomEvent } from 'livekit-client'
@@ -27,8 +28,6 @@ import posthog from 'posthog-js'
 import { useSnapshot } from 'valtio/index'
 import { Spinner } from '@/primitives/Spinner'
 import { useConfig } from '@/api/useConfig'
-import humanizeDuration from 'humanize-duration'
-import i18n from 'i18next'
 import { FeatureFlags } from '@/features/analytics/enums'
 import { NoAccessView } from './NoAccessView'
 import { HStack, VStack } from '@/styled-system/jsx'
@@ -36,6 +35,8 @@ import { Checkbox } from '@/primitives/Checkbox'
 
 export const ScreenRecordingSidePanel = () => {
   const { data } = useConfig()
+  const recordingMaxDuration = useHumanizeRecordingMaxDuration()
+
   const [isLoading, setIsLoading] = useState(false)
   const recordingSnap = useSnapshot(recordingStore)
   const { t } = useTranslation('rooms', { keyPrefix: 'screenRecording' })
@@ -175,11 +176,9 @@ export const ScreenRecordingSidePanel = () => {
           {t('heading')}
         </H>
         <Text variant="body" fullWidth>
-          {data?.recording?.max_duration
+          {recordingMaxDuration
             ? t('body', {
-                max_duration: humanizeDuration(data?.recording?.max_duration, {
+                max_duration: recordingMaxDuration,
-                  language: i18n.language,
-                }),
               })
             : t('bodyWithoutMaxDuration')}{' '}
           {data?.support?.help_article_recording && (

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -9,6 +9,7 @@ import {
   useStartRecording,
   useStopRecording,
   useHasFeatureWithoutAdminRights,
+  useHumanizeRecordingMaxDuration,
 } from '../index'
 import { useEffect, useMemo, useState } from 'react'
 import { ConnectionState, RoomEvent } from 'livekit-client'
@@ -28,8 +29,6 @@ import posthog from 'posthog-js'
 import { useSnapshot } from 'valtio/index'
 import { Spinner } from '@/primitives/Spinner'
 import { useConfig } from '@/api/useConfig'
-import humanizeDuration from 'humanize-duration'
-import i18n from 'i18next'
 import { HStack, VStack } from '@/styled-system/jsx'
 import { Checkbox } from '@/primitives/Checkbox.tsx'
 
@@ -42,6 +41,7 @@ import { NoAccessView } from './NoAccessView'
 
 export const TranscriptSidePanel = () => {
   const { data } = useConfig()
+  const recordingMaxDuration = useHumanizeRecordingMaxDuration()
 
   const [isLoading, setIsLoading] = useState(false)
   const { t } = useTranslation('rooms', { keyPrefix: 'transcript' })
@@ -203,11 +203,9 @@ export const TranscriptSidePanel = () => {
           {t('heading')}
         </H>
         <Text variant="body" fullWidth>
-          {data?.recording?.max_duration
+          {recordingMaxDuration
             ? t('body', {
-                max_duration: humanizeDuration(data?.recording?.max_duration, {
+                max_duration: recordingMaxDuration,
-                  language: i18n.language,
-                }),
               })
             : t('bodyWithoutMaxDuration')}{' '}
           {data?.support?.help_article_transcript && (

src/frontend/src/features/recording/hooks/useHumanizeRecordingMaxDuration.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react'
+import humanizeDuration from 'humanize-duration'
+import i18n from 'i18next'
+import { useConfig } from '@/api/useConfig'
+
+export const useHumanizeRecordingMaxDuration = () => {
+  const { data } = useConfig()
+
+  return useMemo(() => {
+    if (!data?.recording?.max_duration) return
+
+    return humanizeDuration(data?.recording?.max_duration, {
+      language: i18n.language,
+    })
+  }, [data])
+}

src/frontend/src/features/recording/index.ts

@@ -3,6 +3,7 @@ export { useIsRecordingModeEnabled } from './hooks/useIsRecordingModeEnabled'
 export { useHasRecordingAccess } from './hooks/useHasRecordingAccess'
 export { useIsRecordingActive } from './hooks/useIsRecordingActive'
 export { useHasFeatureWithoutAdminRights } from './hooks/useHasFeatureWithoutAdminRights'
+export { useHumanizeRecordingMaxDuration } from './hooks/useHumanizeRecordingMaxDuration'
 
 // api
 export { useStartRecording } from './api/startRecording'