diff --git a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx index 659cc438..4b07006a 100644 --- a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx +++ b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx @@ -14,20 +14,18 @@ import { RoomEvent } from 'livekit-client' import { useTranslation } from 'react-i18next' import { RecordingStatus, recordingStore } from '@/stores/recording' import { CRISP_HELP_ARTICLE_RECORDING } from '@/utils/constants' -import { - useIsRecordingTransitioning, - useIsScreenRecordingStarted, - useIsTranscriptStarted, -} from '@/features/recording' +import { useIsRecordingTransitioning } from '@/features/recording' import { useNotifyParticipants, NotificationType, } from '@/features/notifications' import posthog from 'posthog-js' +import { useSnapshot } from 'valtio/index' export const ScreenRecordingSidePanel = () => { const [isLoading, setIsLoading] = useState(false) + const recordingSnap = useSnapshot(recordingStore) const { t } = useTranslation('rooms', { keyPrefix: 'screenRecording' }) const { notifyParticipants } = useNotifyParticipants() @@ -37,8 +35,16 @@ export const ScreenRecordingSidePanel = () => { const { mutateAsync: startRecordingRoom } = useStartRecording() const { mutateAsync: stopRecordingRoom } = useStopRecording() - const isScreenRecordingStarted = useIsScreenRecordingStarted() - const isTranscriptStarted = useIsTranscriptStarted() + const statuses = useMemo(() => { + return { + isAnotherModeStarted: + recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTED, + isStarted: + recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTED, + isStopping: + recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STOPPING, + } + }, [recordingSnap]) const room = useRoomContext() const isRecordingTransitioning = useIsRecordingTransitioning() @@ -84,8 +90,9 @@ export const ScreenRecordingSidePanel = () => { } const isDisabled = useMemo( - () => isLoading || isRecordingTransitioning || isTranscriptStarted, - [isLoading, isRecordingTransitioning, isTranscriptStarted] + () => + isLoading || isRecordingTransitioning || statuses.isAnotherModeStarted, + [isLoading, isRecordingTransitioning, statuses] ) return ( @@ -106,7 +113,7 @@ export const ScreenRecordingSidePanel = () => { })} /> - {isScreenRecordingStarted ? ( + {statuses.isStarted ? ( <> {t('stop.heading')} @@ -135,34 +142,57 @@ export const ScreenRecordingSidePanel = () => { ) : ( <> - - {t('start.heading')} - - - {t('start.body')}
{' '} - - {t('start.linkMore')} - -
- + {statuses.isStopping ? ( + <> + + {t('stopping.heading')} + + + {t('stopping.body')} + + + ) : ( + <> + + {t('start.heading')} + + + {t('start.body')}
{' '} + + {t('start.linkMore')} + +
+ + + )} )} diff --git a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx index 5d630779..8ac7e4d7 100644 --- a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx +++ b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx @@ -6,12 +6,10 @@ import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId' import { useRoomContext } from '@livekit/components-react' import { RecordingMode, + useHasRecordingAccess, + useIsRecordingTransitioning, useStartRecording, useStopRecording, - useIsScreenRecordingStarted, - useIsTranscriptStarted, - useIsRecordingTransitioning, - useHasRecordingAccess, } from '../index' import { useEffect, useMemo, useState } from 'react' import { RoomEvent } from 'livekit-client' @@ -23,15 +21,18 @@ import { } from '@/utils/constants' import { FeatureFlags } from '@/features/analytics/enums' import { - useNotifyParticipants, NotificationType, + useNotifyParticipants, } from '@/features/notifications' import posthog from 'posthog-js' +import { useSnapshot } from 'valtio/index' export const TranscriptSidePanel = () => { const [isLoading, setIsLoading] = useState(false) const { t } = useTranslation('rooms', { keyPrefix: 'transcript' }) + const recordingSnap = useSnapshot(recordingStore) + const { notifyParticipants } = useNotifyParticipants() const hasTranscriptAccess = useHasRecordingAccess( @@ -43,8 +44,15 @@ export const TranscriptSidePanel = () => { const { mutateAsync: startRecordingRoom } = useStartRecording() const { mutateAsync: stopRecordingRoom } = useStopRecording() - const isScreenRecordingStarted = useIsScreenRecordingStarted() - const isTranscriptStarted = useIsTranscriptStarted() + const statuses = useMemo(() => { + return { + isAnotherModeStarted: + recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTED, + isStarted: recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTED, + isStopping: recordingSnap.status == RecordingStatus.TRANSCRIPT_STOPPING, + } + }, [recordingSnap]) + const isRecordingTransitioning = useIsRecordingTransitioning() const room = useRoomContext() @@ -87,8 +95,9 @@ export const TranscriptSidePanel = () => { } const isDisabled = useMemo( - () => isLoading || isRecordingTransitioning || isScreenRecordingStarted, - [isLoading, isRecordingTransitioning, isScreenRecordingStarted] + () => + isLoading || isRecordingTransitioning || statuses.isAnotherModeStarted, + [isLoading, isRecordingTransitioning, statuses] ) return ( @@ -137,7 +146,7 @@ export const TranscriptSidePanel = () => { ) : ( <> - {isTranscriptStarted ? ( + {statuses.isStarted ? ( <> {t('stop.heading')} @@ -166,34 +175,57 @@ export const TranscriptSidePanel = () => { ) : ( <> - - {t('start.heading')} - - - {t('start.body')}
{' '} - - {t('start.linkMore')} - -
- + {statuses.isStopping ? ( + <> + + {t('stopping.heading')} + + + {t('stopping.body')} + + + ) : ( + <> + + {t('start.heading')} + + + {t('start.body')}
{' '} + + {t('start.linkMore')} + +
+ + + )} )} diff --git a/src/frontend/src/features/recording/hooks/useIsRecordingStarted.ts b/src/frontend/src/features/recording/hooks/useIsRecordingStarted.ts deleted file mode 100644 index d965e944..00000000 --- a/src/frontend/src/features/recording/hooks/useIsRecordingStarted.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useSnapshot } from 'valtio' -import { RecordingStatus, recordingStore } from '@/stores/recording' - -export const useIsScreenRecordingStarted = () => { - const recordingSnap = useSnapshot(recordingStore) - return recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTED -} - -export const useIsTranscriptStarted = () => { - const recordingSnap = useSnapshot(recordingStore) - return recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTED -} diff --git a/src/frontend/src/features/recording/index.ts b/src/frontend/src/features/recording/index.ts index 2ad47e9f..d83f9ab2 100644 --- a/src/frontend/src/features/recording/index.ts +++ b/src/frontend/src/features/recording/index.ts @@ -1,9 +1,5 @@ // hooks export { useIsRecordingModeEnabled } from './hooks/useIsRecordingModeEnabled' -export { - useIsScreenRecordingStarted, - useIsTranscriptStarted, -} from './hooks/useIsRecordingStarted' export { useIsRecordingTransitioning } from './hooks/useIsRecordingTransitioning' export { useHasRecordingAccess } from './hooks/useHasRecordingAccess' diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 2401c271..120a2ab6 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -207,6 +207,10 @@ "body": "", "button": "" }, + "stopping": { + "heading": "", + "body": "" + }, "beta": { "heading": "", "body": "", diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 4611f2c0..bbde0453 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -212,6 +212,10 @@ "body": "The transcription of your meeting is in progress. You will receive the result by email once the meeting is finished.", "button": "Stop transcription" }, + "stopping": { + "heading": "Saving your data…", + "body": "This process may take a few minutes. Thank you for your patience." + }, "beta": { "heading": "Become a beta tester", "body": "Record your meeting for later. You will receive a summary by email once the meeting is finished.", @@ -225,6 +229,10 @@ "button": "Start recording", "linkMore": "Learn more" }, + "stopping": { + "heading": "Saving your data…", + "body": "This process may take a few minutes. Thank you for your patience." + }, "stop": { "heading": "Recording in progress…", "body": "You will receive the result by email once the recording is complete.", diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index b6197da1..8d19c5dd 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -212,6 +212,10 @@ "body": "La transcription de votre réunion est en cours. Vous recevrez le resultat par email une fois la réunion terminée.", "button": "Arrêter la transcription" }, + "stopping": { + "heading": "Sauvegarde de vos données…", + "body": "Cette opération peut durer quelques minutes. Merci de votre patience." + }, "beta": { "heading": "Devenez beta testeur", "body": "Enregistrer votre réunion pour plus tard. Vous recevrez un compte-rendu par email une fois la réunion terminée.", @@ -225,6 +229,10 @@ "button": "Démarrer l'enregistrement", "linkMore": "En savoir plus" }, + "stopping": { + "heading": "Sauvegarde de vos données…", + "body": "Cette opération peut durer quelques minutes. Merci de votre patience." + }, "stop": { "heading": "Enregistrement en cours …", "body": "Vous recevrez le resultat par email une fois l'enregistrement terminé.", diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index 8cdf2c2e..a077c19f 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -212,6 +212,10 @@ "body": "De transcriptie van uw vergadering is bezig. U ontvangt het resultaat per e-mail zodra de vergadering is afgelopen.", "button": "Transcriptie stoppen" }, + "stopping": { + "heading": "Uw gegevens worden opgeslagen…", + "body": "Dit proces kan enkele minuten duren. Bedankt voor uw geduld." + }, "beta": { "heading": "Word betatester", "body": "Neem uw vergadering op voor later. U ontvangt een samenvatting per e-mail zodra de vergadering is afgelopen.", @@ -225,6 +229,10 @@ "button": "Opname starten", "linkMore": "Meer informatie" }, + "stopping": { + "heading": "Uw gegevens worden opgeslagen…", + "body": "Dit proces kan enkele minuten duren. Bedankt voor uw geduld." + }, "stop": { "heading": "Opname bezig …", "body": "Je ontvangt het resultaat per e-mail zodra de opname is voltooid.",