From 8a0dfd1478c9a9a65cd2ef654b105e8aec61dac8 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sun, 4 Jan 2026 19:47:01 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20make=20recording=20sta?=
 =?UTF-8?q?tuses=20more=20accurate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../recording/components/RecordingStateToast.tsx     | 12 ++++++++++--
 .../features/recording/hooks/useRecordingStatuses.ts | 12 +++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/features/recording/components/RecordingStateToast.tsx b/src/frontend/src/features/recording/components/RecordingStateToast.tsx
index f2c9766e..7bded694 100644
--- a/src/frontend/src/features/recording/components/RecordingStateToast.tsx
+++ b/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
 
diff --git a/src/frontend/src/features/recording/hooks/useRecordingStatuses.ts b/src/frontend/src/features/recording/hooks/useRecordingStatuses.ts
index 38ab40fa..aca027d7 100644
--- a/src/frontend/src/features/recording/hooks/useRecordingStatuses.ts
+++ b/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])
 }