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

---
 .../livekit/components/MediaStateObserver.tsx | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/MediaStateObserver.tsx b/src/frontend/src/features/rooms/livekit/components/MediaStateObserver.tsx
index 90687c43..63ffc518 100644
--- a/src/frontend/src/features/rooms/livekit/components/MediaStateObserver.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/MediaStateObserver.tsx
@@ -1,4 +1,13 @@
 import { useLocalParticipant } from '@livekit/components-react'
+import { useEffect } from 'react'
+
+export const MEDIA_STATE_ELEMENT_ID = 'media-state'
+export const MEDIA_STATE_CHANGED_EVENT = 'media-state-changed'
+
+export type MediaStateChangedDetail = {
+  microphoneEnabled: boolean
+  cameraEnabled: boolean
+}
 
 /**
  * Exposes the local participant's media state in the DOM so external tools
@@ -11,9 +20,20 @@ import { useLocalParticipant } from '@livekit/components-react'
 export const MediaStateObserver = () => {
   const { isMicrophoneEnabled, isCameraEnabled } = useLocalParticipant()
 
+  useEffect(() => {
+    window.dispatchEvent(
+      new CustomEvent<MediaStateChangedDetail>(MEDIA_STATE_CHANGED_EVENT, {
+        detail: {
+          microphoneEnabled: isMicrophoneEnabled,
+          cameraEnabled: isCameraEnabled,
+        },
+      })
+    )
+  }, [isMicrophoneEnabled, isCameraEnabled])
+
   return (
     <div
-      id="media-state"
+      id={MEDIA_STATE_ELEMENT_ID}
       style={{ display: 'none' }}
       data-microphone-enabled={isMicrophoneEnabled ? 'true' : 'false'}
       data-camera-enabled={isCameraEnabled ? 'true' : 'false'}