add comments

src/room/MuteStates.ts

@@ -84,14 +84,19 @@ export function useMuteStates(): MuteStates {
   }, [audio, video]);
 
   useEffect(() => {
+    // We setup a event listener for the widget action ElementWidgetActions.DeviceMute.
     if (widget) {
+      // only setup the listener in widget mode
       const onMuteStateChangeRequest = (
         ev: CustomEvent<IWidgetApiRequest>,
       ): void => {
+        // First copy the current state into our new state.
         const newState = {
           audio_enabled: audio.enabled,
           video_enabled: video.enabled,
         };
+        // Update new state if there are any requested changes from the widget action
+        // in `ev.detail.data`.
         if (
           ev.detail.data.audio_enabled != null &&
           typeof ev.detail.data.audio_enabled === "boolean"
@@ -106,16 +111,21 @@ export function useMuteStates(): MuteStates {
           video.setEnabled?.(ev.detail.data.video_enabled);
           newState.video_enabled = ev.detail.data.video_enabled;
         }
+        // Always reply with the new (now "current") state.
+        // This allows to also use this action to just get the unaltered current state
+        // by using a fromWidget request with: `ev.detail.data = {}`
         widget!.api.transport.reply(ev.detail, newState);
       };
 
+      // Connect our mute listener.
       widget.lazyActions.on(
         ElementWidgetActions.DeviceMute,
         onMuteStateChangeRequest,
       );
 
       return (): void => {
-        widget!.lazyActions.off(
+        // return a call to `off` so that we always clean up our listener.
+        widget?.lazyActions.off(
           ElementWidgetActions.DeviceMute,
           onMuteStateChangeRequest,
         );