From d1a17d2aa989b5911e8ff6532715d04a9f3499f3 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Thu, 17 Apr 2025 16:03:27 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20add=20error=20handling?= =?UTF-8?q?=20for=20unsaved=20recording=20states?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implement proper error message display when recordings are unavailable due to being active, pending webhook notification, or other transitional states. Improves user experience by clearly communicating why content cannot be accessed and setting appropriate expectations. --- .../src/features/recording/api/fetchRecording.ts | 3 ++- src/frontend/src/features/recording/index.ts | 2 +- .../features/recording/routes/RecordingDownload.tsx | 8 ++++++++ src/frontend/src/features/recording/types.ts | 11 +++++++++++ src/frontend/src/locales/de/recording.json | 4 ++++ src/frontend/src/locales/en/recording.json | 4 ++++ src/frontend/src/locales/fr/recording.json | 4 ++++ src/frontend/src/locales/nl/recording.json | 4 ++++ 8 files changed, 38 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/features/recording/api/fetchRecording.ts b/src/frontend/src/features/recording/api/fetchRecording.ts index e9221d73..e8c9dfe4 100644 --- a/src/frontend/src/features/recording/api/fetchRecording.ts +++ b/src/frontend/src/features/recording/api/fetchRecording.ts @@ -1,6 +1,6 @@ import { fetchApi } from '@/api/fetchApi' import { ApiRoom } from '@/features/rooms/api/ApiRoom' -import { RecordingMode } from '@/features/recording' +import { RecordingMode, RecordingStatus } from '@/features/recording' export type RecordingApi = { id: string @@ -8,6 +8,7 @@ export type RecordingApi = { created_at: string key: string mode: RecordingMode + status: RecordingStatus } export const fetchRecording = ({ recordingId }: { recordingId?: string }) => { diff --git a/src/frontend/src/features/recording/index.ts b/src/frontend/src/features/recording/index.ts index 386819cd..82784c78 100644 --- a/src/frontend/src/features/recording/index.ts +++ b/src/frontend/src/features/recording/index.ts @@ -7,7 +7,7 @@ export { useIsRecordingActive } from './hooks/useIsRecordingActive' // api export { useStartRecording } from './api/startRecording' export { useStopRecording } from './api/stopRecording' -export { RecordingMode } from './types' +export { RecordingMode, RecordingStatus } from './types' // components export { RecordingStateToast } from './components/RecordingStateToast' diff --git a/src/frontend/src/features/recording/routes/RecordingDownload.tsx b/src/frontend/src/features/recording/routes/RecordingDownload.tsx index f79d2eec..543dd9ac 100644 --- a/src/frontend/src/features/recording/routes/RecordingDownload.tsx +++ b/src/frontend/src/features/recording/routes/RecordingDownload.tsx @@ -12,6 +12,7 @@ import { formatDate } from '@/utils/formatDate' import { ErrorScreen } from '@/components/ErrorScreen' import { LoadingScreen } from '@/components/LoadingScreen' import { fetchRecording } from '../api/fetchRecording' +import { RecordingStatus } from '@/features/recording' export const RecordingDownload = () => { const { t } = useTranslation('recording') @@ -42,6 +43,13 @@ export const RecordingDownload = () => { return } + if ( + data.status !== RecordingStatus.Saved && + data.status !== RecordingStatus.NotificationSucceed + ) { + return + } + return ( diff --git a/src/frontend/src/features/recording/types.ts b/src/frontend/src/features/recording/types.ts index 78cc5e97..d41b6090 100644 --- a/src/frontend/src/features/recording/types.ts +++ b/src/frontend/src/features/recording/types.ts @@ -2,3 +2,14 @@ export enum RecordingMode { Transcript = 'transcript', ScreenRecording = 'screen_recording', } + +export enum RecordingStatus { + Initiated = 'initiated', + Active = 'active', + Stopped = 'stopped', + Saved = 'saved', + Aborted = 'aborted', + FailedToStart = 'failedToStart', + FailedToStop = 'failedToStop', + NotificationSucceed = 'notification_succeeded', +} diff --git a/src/frontend/src/locales/de/recording.json b/src/frontend/src/locales/de/recording.json index ef8502a1..7ce6aa8d 100644 --- a/src/frontend/src/locales/de/recording.json +++ b/src/frontend/src/locales/de/recording.json @@ -7,6 +7,10 @@ "title": "", "body": "" }, + "unsaved": { + "title": "", + "body": "" + }, "success": { "title": "", "body": "", diff --git a/src/frontend/src/locales/en/recording.json b/src/frontend/src/locales/en/recording.json index fff09fb0..8965465a 100644 --- a/src/frontend/src/locales/en/recording.json +++ b/src/frontend/src/locales/en/recording.json @@ -7,6 +7,10 @@ "title": "Authentication required", "body": "Please log in to access this recording." }, + "unsaved": { + "title": "Download Unavailable", + "body": "This recording is not ready for download yet. Please try again later." + }, "success": { "title": "Your recording is ready!", "body": "Recording of the meeting {{room}} from {{created_at}}.", diff --git a/src/frontend/src/locales/fr/recording.json b/src/frontend/src/locales/fr/recording.json index 5818e570..4228afba 100644 --- a/src/frontend/src/locales/fr/recording.json +++ b/src/frontend/src/locales/fr/recording.json @@ -7,6 +7,10 @@ "title": "Authentification requise", "body": "Veuillez vous connecter pour accéder à cet enregistrement." }, + "unsaved": { + "title": "Téléchargement indisponible", + "body": "Cet enregistrement n'est pas encore prêt à être téléchargé. Veuillez réessayer plus tard." + }, "success": { "title": "Votre enregistrement est prêt !", "body": "Enregistrement de la réunion {{room}} du {{created_at}}.", diff --git a/src/frontend/src/locales/nl/recording.json b/src/frontend/src/locales/nl/recording.json index de3a9965..bda67456 100644 --- a/src/frontend/src/locales/nl/recording.json +++ b/src/frontend/src/locales/nl/recording.json @@ -7,6 +7,10 @@ "title": "Authenticatie vereist", "body": "Log in om toegang te krijgen tot deze opname." }, + "unsaved": { + "title": "Download niet beschikbaar", + "body": "Deze opname is nog niet klaar om te worden gedownload. Probeer het later opnieuw." + }, "success": { "title": "Je opname is klaar!", "body": "Opname van de vergadering {{room}} op {{created_at}}.",