✨(frontend) expose publish permissions in MediaStateObserver

The component exposes the local microphone and camera state so external
tools automating the frontend can read it. It does not expose whether
publication is allowed, so such a tool cannot tell a muted microphone from
one it is not permitted to unmute, and ends up offering a control that
silently does nothing.

Expose canPublishMicrophone and canPublishCamera in the event detail and as
data attributes, reusing the useCanPublishTrack hook that already gates the
web client controls. The permissions are part of the effect dependencies so
a mid-meeting permission change emits the event.

src/frontend/src/features/rooms/livekit/components/MediaStateObserver.tsx

@@ -1,5 +1,7 @@
 import { useLocalParticipant } from '@livekit/components-react'
+import { TrackSource } from '@livekit/protocol'
 import { useEffect } from 'react'
+import { useCanPublishTrack } from '@/features/rooms/livekit/hooks/useCanPublishTrack'
 
 export const MEDIA_STATE_ELEMENT_ID = 'media-state'
 export const MEDIA_STATE_CHANGED_EVENT = 'media-state-changed'
@@ -7,6 +9,8 @@ export const MEDIA_STATE_CHANGED_EVENT = 'media-state-changed'
 export type MediaStateChangedDetail = {
   microphoneEnabled: boolean
   cameraEnabled: boolean
+  canPublishMicrophone: boolean
+  canPublishCamera: boolean
 }
 
 /**
@@ -16,9 +20,15 @@ export type MediaStateChangedDetail = {
  *
  * const el = document.getElementById('media-state')
  * new MutationObserver(...).observe(el, { attributes: true })
+ *
+ * The publish permissions are exposed alongside the state: an external tool
+ * cannot tell a muted microphone from one it is not allowed to unmute, and
+ * would otherwise offer a control that silently does nothing.
  */
 export const MediaStateObserver = () => {
   const { isMicrophoneEnabled, isCameraEnabled } = useLocalParticipant()
+  const canPublishMicrophone = useCanPublishTrack(TrackSource.MICROPHONE)
+  const canPublishCamera = useCanPublishTrack(TrackSource.CAMERA)
 
   useEffect(() => {
     window.dispatchEvent(
@@ -26,10 +36,17 @@ export const MediaStateObserver = () => {
         detail: {
           microphoneEnabled: isMicrophoneEnabled,
           cameraEnabled: isCameraEnabled,
+          canPublishMicrophone,
+          canPublishCamera,
         },
       })
     )
-  }, [isMicrophoneEnabled, isCameraEnabled])
+  }, [
+    isMicrophoneEnabled,
+    isCameraEnabled,
+    canPublishMicrophone,
+    canPublishCamera,
+  ])
 
   return (
     <div
@@ -37,6 +54,8 @@ export const MediaStateObserver = () => {
       style={{ display: 'none' }}
       data-microphone-enabled={isMicrophoneEnabled ? 'true' : 'false'}
       data-camera-enabled={isCameraEnabled ? 'true' : 'false'}
+      data-can-publish-microphone={canPublishMicrophone ? 'true' : 'false'}
+      data-can-publish-camera={canPublishCamera ? 'true' : 'false'}
     />
   )
 }