From c7c0df5b6dca45cfc7d991820c69790716430f25 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Fri, 25 Apr 2025 17:33:36 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20add=20alert=20dialog?= =?UTF-8?q?=20for=20recording=20start=20failures?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implement modal alert dialog when recording initialization fails. Provides clear error feedback to users when API cannot start recording process, improving error state communication. --- .../features/recording/api/startRecording.ts | 1 + .../features/recording/api/stopRecording.ts | 1 + .../components/ScreenRecordingSidePanel.tsx | 26 ++++++++++++++++--- .../components/TranscriptSidePanel.tsx | 26 ++++++++++++++++--- src/frontend/src/locales/de/rooms.json | 16 ++++++++++++ src/frontend/src/locales/en/rooms.json | 16 ++++++++++++ src/frontend/src/locales/fr/rooms.json | 16 ++++++++++++ src/frontend/src/locales/nl/rooms.json | 16 ++++++++++++ 8 files changed, 112 insertions(+), 6 deletions(-) diff --git a/src/frontend/src/features/recording/api/startRecording.ts b/src/frontend/src/features/recording/api/startRecording.ts index f0ad5464..9924f9b0 100644 --- a/src/frontend/src/features/recording/api/startRecording.ts +++ b/src/frontend/src/features/recording/api/startRecording.ts @@ -27,5 +27,6 @@ export function useStartRecording( return useMutation({ mutationFn: startRecording, onSuccess: options?.onSuccess, + onError: options?.onError, }) } diff --git a/src/frontend/src/features/recording/api/stopRecording.ts b/src/frontend/src/features/recording/api/stopRecording.ts index 8a8727a8..bda99eef 100644 --- a/src/frontend/src/features/recording/api/stopRecording.ts +++ b/src/frontend/src/features/recording/api/stopRecording.ts @@ -19,5 +19,6 @@ export function useStopRecording( return useMutation({ mutationFn: stopRecording, onSuccess: options?.onSuccess, + onError: options?.onError, }) } diff --git a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx index cd4f962a..463ef547 100644 --- a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx +++ b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx @@ -1,4 +1,4 @@ -import { A, Button, Div, H, Text } from '@/primitives' +import { A, Button, Dialog, Div, H, P, Text } from '@/primitives' import fourthSlide from '@/assets/intro-slider/4_record.png' import { css } from '@/styled-system/css' @@ -29,14 +29,20 @@ export const ScreenRecordingSidePanel = () => { const recordingSnap = useSnapshot(recordingStore) const { t } = useTranslation('rooms', { keyPrefix: 'screenRecording' }) + const [isErrorDialogOpen, setIsErrorDialogOpen] = useState('') + const { notifyParticipants } = useNotifyParticipants() const roomId = useRoomId() const { mutateAsync: startRecordingRoom, isPending: isPendingToStart } = - useStartRecording() + useStartRecording({ + onError: () => setIsErrorDialogOpen('start'), + }) const { mutateAsync: stopRecordingRoom, isPending: isPendingToStop } = - useStopRecording() + useStopRecording({ + onError: () => setIsErrorDialogOpen('stop'), + }) const statuses = useMemo(() => { return { @@ -208,6 +214,20 @@ export const ScreenRecordingSidePanel = () => { )} )} + +

{t(`alert.body.${isErrorDialogOpen}`)}

+ + ) } diff --git a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx index 6f187648..beb4db9e 100644 --- a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx +++ b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx @@ -1,4 +1,4 @@ -import { A, Button, Div, H, LinkButton, Text } from '@/primitives' +import { A, Button, Dialog, Div, H, LinkButton, P, Text } from '@/primitives' import thirdSlide from '@/assets/intro-slider/3_resume.png' import { css } from '@/styled-system/css' @@ -32,6 +32,8 @@ export const TranscriptSidePanel = () => { const [isLoading, setIsLoading] = useState(false) const { t } = useTranslation('rooms', { keyPrefix: 'transcript' }) + const [isErrorDialogOpen, setIsErrorDialogOpen] = useState('') + const recordingSnap = useSnapshot(recordingStore) const { notifyParticipants } = useNotifyParticipants() @@ -43,10 +45,14 @@ export const TranscriptSidePanel = () => { const roomId = useRoomId() const { mutateAsync: startRecordingRoom, isPending: isPendingToStart } = - useStartRecording() + useStartRecording({ + onError: () => setIsErrorDialogOpen('start'), + }) const { mutateAsync: stopRecordingRoom, isPending: isPendingToStop } = - useStopRecording() + useStopRecording({ + onError: () => setIsErrorDialogOpen('stop'), + }) const statuses = useMemo(() => { return { @@ -243,6 +249,20 @@ export const TranscriptSidePanel = () => { )} )} + +

{t(`alert.body.${isErrorDialogOpen}`)}

+ + ) } diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 5c635806..df59d136 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -237,6 +237,14 @@ "heading": "", "body": "", "button": "" + }, + "alert": { + "title": "", + "body": { + "stop": "", + "start": "" + }, + "button": "" } }, "screenRecording": { @@ -254,6 +262,14 @@ "heading": "", "body": "", "button": "" + }, + "alert": { + "title": "", + "body": { + "stop": "", + "start": "" + }, + "button": "" } }, "admin": { diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index d9fe4942..b9bc09a3 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -237,6 +237,14 @@ "heading": "Become a beta tester", "body": "Record your meeting for later. You will receive a summary by email once the meeting is finished.", "button": "Sign up" + }, + "alert": { + "title": "Transcription Failed", + "body": { + "stop": "We were unable to stop the transcription. Please try again in a moment.", + "start": "We were unable to start the transcription. Please try again in a moment." + }, + "button": "OK" } }, "screenRecording": { @@ -255,6 +263,14 @@ "heading": "Recording in progress…", "body": "You will receive the result by email once the recording is complete.", "button": "Stop recording" + }, + "alert": { + "title": "Recording Failed", + "body": { + "stop": "We were unable to stop the recording. Please try again in a moment.", + "start": "We were unable to start the recording. Please try again in a moment." + }, + "button": "OK" } }, "admin": { diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index fa7b6693..ec82fda4 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -237,6 +237,14 @@ "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.", "button": "Inscrivez-vous" + }, + "alert": { + "title": "Échec de transcription", + "body": { + "stop": "Nous n'avons pas pu stopper la transcription. Veuillez réessayer dans quelques instants.", + "start": "Nous n'avons pas pu démarrer la transcription. Veuillez réessayer dans quelques instants." + }, + "button": "OK" } }, "screenRecording": { @@ -255,6 +263,14 @@ "heading": "Enregistrement en cours …", "body": "Vous recevrez le resultat par email une fois l'enregistrement terminé.", "button": "Arrêter l'enregistrement" + }, + "alert": { + "title": "Échec de l'enregistrement", + "body": { + "stop": "Nous n'avons pas pu stopper l'enregistrement. Veuillez réessayer dans quelques instants.", + "start": "Nous n'avons pas pu démarrer l'enregistrement. Veuillez réessayer dans quelques instants." + }, + "button": "OK" } }, "admin": { diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index dc44cdae..2849e35d 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -237,6 +237,14 @@ "heading": "Word betatester", "body": "Neem uw vergadering op voor later. U ontvangt een samenvatting per e-mail zodra de vergadering is afgelopen.", "button": "Aanmelden" + }, + "alert": { + "title": "Transcriptie mislukt", + "body": { + "stop": "We konden de transcriptie niet stoppen. Probeer het over enkele ogenblikken opnieuw.", + "start": "We konden de transcriptie niet starten. Probeer het over enkele ogenblikken opnieuw." + }, + "button": "Opnieuw proberen" } }, "screenRecording": { @@ -255,6 +263,14 @@ "heading": "Opname bezig …", "body": "Je ontvangt het resultaat per e-mail zodra de opname is voltooid.", "button": "Opname stoppen" + }, + "alert": { + "title": "Opname mislukt", + "body": { + "stop": "We konden de opname niet stoppen. Probeer het over enkele ogenblikken opnieuw.", + "start": "We konden de opname niet starten. Probeer het over enkele ogenblikken opnieuw." + }, + "button": "Opnieuw proberen" } }, "admin": {