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 ( +
+ Room is recording: {isRecording ? 'yes' : 'no'} +
+ ) +} 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} >
+