🩹(frontend) make recording statuses more accurate

Link recording statuses to the `isRecording` attribute from the room on the
client side.

After the refactor, the frontend relied only on recording statuses computed by
the backend. However, when egress is started and the backend is notified, the
recording is not actually active yet. It takes some time for the egress to join
the room and begin recording.

Enrich the frontend by combining backend statuses with the room recording state
to more accurately reflect when recording is truly active. This avoids missing
the first few seconds of audio at the beginning of a recording.

Author: lebaudantoine

src/frontend/src/features/recording/components/RecordingStateToast.tsx

@@ -12,6 +12,7 @@ import { Button as RACButton } from 'react-aria-components'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useRoomMetadata } from '../hooks/useRoomMetadata'
 import { RecordingStatusIcon } from './RecordingStatusIcon'
+import { useIsRecording } from '@livekit/components-react'
 
 export const RecordingStateToast = () => {
   const { t } = useTranslation('rooms', {
@@ -46,6 +47,7 @@ export const RecordingStateToast = () => {
   const isStarting = isTranscriptStarting || isScreenRecordingStarting
 
   const metadata = useRoomMetadata()
+  const isRecording = useIsRecording()
 
   const key = useMemo(() => {
     if (!metadata?.recording_status || !metadata?.recording_mode) {
@@ -56,8 +58,14 @@ export const RecordingStateToast = () => {
       return undefined
     }
 
-    return `${metadata.recording_mode}.${metadata.recording_status}`
-  }, [metadata, isStarted, isStarting])
+    let status = metadata.recording_status
+
+    if (isStarted && !isRecording) {
+      status = 'starting'
+    }
+
+    return `${metadata.recording_mode}.${status}`
+  }, [metadata, isStarted, isStarting, isRecording])
 
   if (!key) return null
 

src/frontend/src/features/recording/hooks/useRecordingStatuses.ts

@@ -1,6 +1,7 @@
 import { RecordingMode } from '@/features/recording'
 import { useRoomMetadata } from './useRoomMetadata'
 import { useMemo } from 'react'
+import { useIsRecording } from '@livekit/components-react'
 
 export enum RecordingStatus {
   Starting = 'starting',
@@ -26,13 +27,18 @@ export const useRecordingStatuses = (
   mode: RecordingMode
 ): RecordingStatuses => {
   const metadata = useRoomMetadata()
+  const isRecording = useIsRecording()
 
   return useMemo(() => {
     if (metadata && metadata?.recording_mode === mode) {
       return {
         isAnotherModeStarted: false,
-        isStarting: metadata.recording_status === RecordingStatus.Starting,
-        isStarted: metadata.recording_status === RecordingStatus.Started,
+        isStarting:
+          metadata.recording_status === RecordingStatus.Starting ||
+          (metadata.recording_status === RecordingStatus.Started &&
+            !isRecording),
+        isStarted:
+          metadata.recording_status === RecordingStatus.Started && isRecording,
         isSaving: metadata.recording_status === RecordingStatus.Saving,
         isActive: ACTIVE_STATUSES.includes(
           metadata.recording_status as RecordingStatus
@@ -52,5 +58,5 @@ export const useRecordingStatuses = (
       isSaving: false,
       isActive: false,
     }
-  }, [mode, metadata])
+  }, [mode, metadata, isRecording])
 }