refactor

- `MediaDevice`->`MediaDeviceHandle`
 - use just one provider and switch inside the
 MediaDevicesProvider between: controlledAudioOutput, webViewAudioOutput
 - fix muteAllAudio

src/room/GroupCallView.tsx

@@ -25,6 +25,7 @@ import {
 } from "matrix-js-sdk/lib/matrixrtc";
 import { useNavigate } from "react-router-dom";
 import { useObservableEagerState } from "observable-hooks";
+import { startWith } from "rxjs";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
@@ -106,7 +107,9 @@ export const GroupCallView: FC<Props> = ({
   const [externalError, setExternalError] = useState<ElementCallError | null>(
     null,
   );
-  const muteAllAudioControlled = useObservableEagerState(setOutputEnabled$);
+  const muteAllAudioControlled = useObservableEagerState(
+    setOutputEnabled$.pipe(startWith(false)),
+  );
   const [muteAllAudioFromSetting] = useSetting(muteAllAudioSetting);
   const muteAllAudio = muteAllAudioControlled || muteAllAudioFromSetting;
   const memberships = useMatrixRTCSessionMemberships(rtcSession);

src/room/InCallView.tsx

@@ -25,7 +25,7 @@ import {
 import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
-import { BehaviorSubject, map } from "rxjs";
+import { BehaviorSubject, map, startWith } from "rxjs";
 import { useObservable, useObservableEagerState } from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
@@ -223,7 +223,9 @@ export const InCallView: FC<InCallViewProps> = ({
     room: livekitRoom,
   });
 
-  const muteAllAudioControlled = useObservableEagerState(setOutputEnabled$);
+  const muteAllAudioControlled = useObservableEagerState(
+    setOutputEnabled$.pipe(startWith(false)),
+  );
   const [muteAllAudioFromSetting] = useSetting(muteAllAudioSetting);
   const muteAllAudio = muteAllAudioControlled || muteAllAudioFromSetting;
 

src/room/MuteStates.test.tsx

@@ -14,7 +14,7 @@ import userEvent from "@testing-library/user-event";
 import { useMuteStates } from "./MuteStates";
 import {
   type DeviceLabel,
-  type MediaDevice,
+  type MediaDeviceHandle,
   type MediaDevices,
   MediaDevicesContext,
 } from "../livekit/MediaDevicesContext";
@@ -73,7 +73,7 @@ const mockCamera: MediaDeviceInfo = {
   },
 };
 
-function mockDevices(available: Map<string, DeviceLabel>): MediaDevice {
+function mockDevices(available: Map<string, DeviceLabel>): MediaDeviceHandle {
   return {
     available,
     selectedId: "",

src/room/MuteStates.ts

@@ -16,7 +16,7 @@ import { type IWidgetApiRequest } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import {
-  type MediaDevice,
+  type MediaDeviceHandle,
   useMediaDevices,
 } from "../livekit/MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
@@ -53,7 +53,7 @@ export interface MuteStates {
 }
 
 function useMuteState(
-  device: MediaDevice,
+  device: MediaDeviceHandle,
   enabledByDefault: () => boolean,
 ): MuteState {
   const [enabled, setEnabled] = useReactiveState<boolean | undefined>(