🚸(frontend) add error handling for unsaved recording states

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/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 }) => {

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'

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 <ErrorScreen title={t('error.title')} body={t('error.body')} />
   }
 
+  if (
+    data.status !== RecordingStatus.Saved &&
+    data.status !== RecordingStatus.NotificationSucceed
+  ) {
+    return <ErrorScreen title={t('unsaved.title')} body={t('unsaved.body')} />
+  }
+
   return (
     <UserAware>
       <Screen layout="centered" footer={false}>

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',
+}

src/frontend/src/locales/de/recording.json

@@ -7,6 +7,10 @@
     "title": "",
     "body": ""
   },
+  "unsaved": {
+    "title": "",
+    "body": ""
+  },
   "success": {
     "title": "",
     "body": "",

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 <b>{{room}}</b> from {{created_at}}.",

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 <b>{{room}}</b> du {{created_at}}.",

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 <b>{{room}}</b> op {{created_at}}.",