wip add recording indicator

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>
+  )
+}

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%' }}