From b6ee63a29f2bba77cd93c47c85ac37151eb3d497 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 31 Jul 2026 14:32:31 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20expose=20media=20state=20?=
 =?UTF-8?q?in=20the=20DOM=20for=20the=20Renater=20gateway?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a hidden div in the DOM that reflects the current state of the
microphone and camera, so that the Renater SIP media gateway can
observe it and keep an accurate view of the media state.
---
 .../livekit/components/MediaStateObserver.tsx | 22 +++++++++++++++++++
 .../rooms/livekit/prefabs/VideoConference.tsx |  2 ++
 2 files changed, 24 insertions(+)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/MediaStateObserver.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/MediaStateObserver.tsx b/src/frontend/src/features/rooms/livekit/components/MediaStateObserver.tsx
new file mode 100644
index 00000000..90687c43
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/MediaStateObserver.tsx
@@ -0,0 +1,22 @@
+import { useLocalParticipant } from '@livekit/components-react'
+
+/**
+ * Exposes the local participant's media state in the DOM so external tools
+ * (e.g. bots automating the frontend) can reliably read the microphone and
+ * camera state, and watch for changes with a MutationObserver:
+ *
+ * const el = document.getElementById('media-state')
+ * new MutationObserver(...).observe(el, { attributes: true })
+ */
+export const MediaStateObserver = () => {
+  const { isMicrophoneEnabled, isCameraEnabled } = useLocalParticipant()
+
+  return (
+    <div
+      id="media-state"
+      style={{ display: 'none' }}
+      data-microphone-enabled={isMicrophoneEnabled ? 'true' : 'false'}
+      data-camera-enabled={isCameraEnabled ? 'true' : 'false'}
+    />
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
index c28981dc..a92e0289 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx
@@ -11,6 +11,7 @@ import { SidePanel } from '../components/SidePanel'
 import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { ConnectionObserver } from '../components/ConnectionObserver'
+import { MediaStateObserver } from '../components/MediaStateObserver'
 import { RoomMetadataSynchronizer } from '../components/RoomMetadataSynchronizer'
 import { useRoomPageTitle } from '../hooks/useRoomPageTitle'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
@@ -63,6 +64,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
     <>
       <RoomMetadataSynchronizer />
       <ConnectionObserver />
+      <MediaStateObserver />
       <ChatProvider />
       <VideoResolutionSubscription />
       <div