apply mute from mobile controls

Author: toger5

src/room/GroupCallView.tsx

@@ -24,6 +24,7 @@ import {
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { useNavigate } from "react-router-dom";
+import { useObservableEagerState } from "observable-hooks";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
@@ -68,6 +69,7 @@ import {
   useSetting,
 } from "../settings/settings";
 import { useTypedEventEmitter } from "../useEvents";
+import { setOutputEnabled$ } from "../controls.ts";
 
 declare global {
   interface Window {
@@ -104,8 +106,9 @@ export const GroupCallView: FC<Props> = ({
   const [externalError, setExternalError] = useState<ElementCallError | null>(
     null,
   );
-
-  const [muteAllAudio] = useSetting(muteAllAudioSetting);
+  const muteAllAudioControlled = useObservableEagerState(setOutputEnabled$);
+  const [muteAllAudioFromSetting] = useSetting(muteAllAudioSetting);
+  const muteAllAudio = muteAllAudioControlled || muteAllAudioFromSetting;
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const leaveSoundContext = useLatest(
     useAudioContext({

src/room/InCallView.tsx

@@ -104,6 +104,7 @@ import { ReactionsReader } from "../reactions/ReactionsReader";
 import { ConnectionLostError } from "../utils/errors.ts";
 import { useTypedEventEmitter } from "../useEvents.ts";
 import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
+import { setOutputEnabled$ } from "../controls.ts";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -222,7 +223,9 @@ export const InCallView: FC<InCallViewProps> = ({
     room: livekitRoom,
   });
 
-  const [muteAllAudio] = useSetting(muteAllAudioSetting);
+  const muteAllAudioControlled = useObservableEagerState(setOutputEnabled$);
+  const [muteAllAudioFromSetting] = useSetting(muteAllAudioSetting);
+  const muteAllAudio = muteAllAudioControlled || muteAllAudioFromSetting;
 
   // This seems like it might be enough logic to use move it into the call view model?
   const [didFallbackToRoomKey, setDidFallbackToRoomKey] = useState(false);