From 21626b4c4c672a8bbd8a5c5dc6fd65f0c962b68a Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 11 Sep 2024 20:28:42 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7(frontend)=20show=20recording=20sta?=
 =?UTF-8?q?tus=20indicator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Room recording status triggers only when the egress worker is active.
Querying the Egress API starts the worker, which joins the room as an invisible participant.
The room is marked as "recording" only once the worker has fully joined.
Not mergeable yet.

Sadly the room event gives no information about the Egress worker’s ID.
---
 .../livekit/components/RecordingIndicator.tsx | 32 +++++++++++++++++++
 .../rooms/livekit/prefabs/VideoConference.tsx |  2 ++
 2 files changed, 34 insertions(+)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/RecordingIndicator.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/RecordingIndicator.tsx b/src/frontend/src/features/rooms/livekit/components/RecordingIndicator.tsx
new file mode 100644
index 00000000..f2e8f78b
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/RecordingIndicator.tsx
@@ -0,0 +1,32 @@
+import { useRoomContext } from '@livekit/components-react'
+import { useEffect, useState } from 'react'
+import { RoomEvent } from 'livekit-client'
+
+export const RecordingIndicator = () => {
+  const room = useRoomContext()
+  const [isRecording, setIsRecording] = useState(room.isRecording)
+
+  useEffect(() => {
+    const handleRecordingStatusChanges = (isRecording: boolean) => {
+      setIsRecording(isRecording)
+    }
+    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
+    return () => {
+      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
+    }
+  }, [room])
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        width: '100%',
+      }}
+    >
+      Room is recording: {isRecording ? 'yes' : 'no'}
+    </div>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
index 5504a370..99b6ffa0 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
@@ -36,6 +36,7 @@ import { participantsStore } from '@/stores/participants'
 import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
 import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
+import { RecordingIndicator } from '@/features/rooms/livekit/components/RecordingIndicator.tsx'
 
 const LayoutWrapper = styled(
   'div',
@@ -184,6 +185,7 @@ export function VideoConference({
           onWidgetChange={widgetUpdate}
         >
           <div className="lk-video-conference-inner">
+            <RecordingIndicator />
             <LayoutWrapper>
               <div
                 style={{ display: 'flex', position: 'relative', width: '100%' }}