From 847729647103232f62a0dd6a75c25d91ee20f63f Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 15 Oct 2024 21:54:18 +0200
Subject: [PATCH] wip add recording indicator

---
 .../rooms/components/RecordingIndicator.tsx   | 53 +++++++++++++++++++
 .../rooms/livekit/prefabs/VideoConference.tsx |  2 +
 2 files changed, 55 insertions(+)
 create mode 100644 src/frontend/src/features/rooms/components/RecordingIndicator.tsx

diff --git a/src/frontend/src/features/rooms/components/RecordingIndicator.tsx b/src/frontend/src/features/rooms/components/RecordingIndicator.tsx
new file mode 100644
index 00000000..675ef7bc
--- /dev/null
+++ b/src/frontend/src/features/rooms/components/RecordingIndicator.tsx
@@ -0,0 +1,53 @@
+import { useRoomContext } from '@livekit/components-react'
+import { useEffect, useState } from 'react'
+import { RoomEvent } from 'livekit-client'
+import { egressStore } from '@/stores/egress.ts'
+import { useSnapshot } from 'valtio'
+
+export const RecordingIndicator = () => {
+  const room = useRoomContext()
+  const [isRecording, setIsRecording] = useState(room.isRecording)
+
+  const egressSnap = useSnapshot(egressStore)
+  const egressIsStopping = egressSnap.egressIsStopping
+
+  useEffect(() => {
+    const handleRecordingStatusChanges = (isRecording: boolean) => {
+      if (!isRecording) {
+        egressStore.egressIsStopping = false
+      }
+
+      setIsRecording(isRecording)
+    }
+    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
+    return () => {
+      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
+    }
+  }, [room])
+
+  const getStatus = () => {
+    if (egressIsStopping) {
+      return 'saving recording'
+    }
+    if (isRecording) {
+      return 'recording'
+    }
+    if (!isRecording) {
+      return 'available'
+    }
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        width: '100%',
+      }}
+    >
+      Room status: {getStatus()}
+    </div>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
index ff81b297..c7b203dc 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
@@ -28,6 +28,7 @@ import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
 import { useSidePanel } from '../hooks/useSidePanel'
+import { RecordingIndicator } from '@/features/rooms/components/RecordingIndicator.tsx'
 
 const LayoutWrapper = styled(
   'div',
@@ -165,6 +166,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
               transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
             }}
           >
+            <RecordingIndicator />
             <LayoutWrapper>
               <div
                 style={{ display: 'flex', position: 'relative', width: '100%' }}