diff --git a/src/frontend/src/features/recording/components/LimitReachedAlertDialog.tsx b/src/frontend/src/features/recording/components/LimitReachedAlertDialog.tsx index 431d5a63..65b57394 100644 --- a/src/frontend/src/features/recording/components/LimitReachedAlertDialog.tsx +++ b/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 humanizeDuration from 'humanize-duration' +import { useHumanizeRecordingMaxDuration } from '@/features/recording' 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 (

{t('description', { - duration_message: data?.recording?.max_duration + duration_message: maxDuration ? t('durationMessage', { - duration: humanizeDuration(data?.recording?.max_duration, { - language: i18n.language, - }), + duration: maxDuration, }) : '', })} diff --git a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx index 524bc5c7..8d8ce8c1 100644 --- a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx +++ b/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')} - {data?.recording?.max_duration + {recordingMaxDuration ? t('body', { - max_duration: humanizeDuration(data?.recording?.max_duration, { - language: i18n.language, - }), + max_duration: recordingMaxDuration, }) : t('bodyWithoutMaxDuration')}{' '} {data?.support?.help_article_recording && ( diff --git a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx index 55ff241b..5c6c5a8c 100644 --- a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx +++ b/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')} - {data?.recording?.max_duration + {recordingMaxDuration ? t('body', { - max_duration: humanizeDuration(data?.recording?.max_duration, { - language: i18n.language, - }), + max_duration: recordingMaxDuration, }) : t('bodyWithoutMaxDuration')}{' '} {data?.support?.help_article_transcript && ( diff --git a/src/frontend/src/features/recording/hooks/useHumanizeRecordingMaxDuration.ts b/src/frontend/src/features/recording/hooks/useHumanizeRecordingMaxDuration.ts new file mode 100644 index 00000000..4e1905cb --- /dev/null +++ b/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]) +} diff --git a/src/frontend/src/features/recording/index.ts b/src/frontend/src/features/recording/index.ts index af1cfa09..1ae32422 100644 --- a/src/frontend/src/features/recording/index.ts +++ b/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'