refactor

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

src/App.tsx

@@ -19,10 +19,7 @@ import { ClientProvider } from "./ClientContext";
 import { ErrorPage, LoadingPage } from "./FullScreenView";
 import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
-import {
+import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
-  ControlledOutputMediaDevicesProvider,
-  MediaDevicesProvider,
-} from "./livekit/MediaDevicesContext";
 import { widget } from "./widget";
 import { useTheme } from "./useTheme";
 import { ProcessorProvider } from "./livekit/TrackProcessorContext";
@@ -55,7 +52,6 @@ const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
 };
 
 export const App: FC = () => {
-  // const { controlledOutput } = useUrlParams();
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     Initializer.init()
@@ -67,20 +63,6 @@ export const App: FC = () => {
       .catch(logger.error);
   });
 
-  const inner = (
-    <Sentry.ErrorBoundary
-      fallback={(error) => <ErrorPage error={error} widget={widget} />}
-    >
-      <DisconnectedBanner />
-      <Routes>
-        <SentryRoute path="/" element={<HomePage />} />
-        <SentryRoute path="/login" element={<LoginPage />} />
-        <SentryRoute path="/register" element={<RegisterPage />} />
-        <SentryRoute path="*" element={<RoomPage />} />
-      </Routes>
-    </Sentry.ErrorBoundary>
-  );
-
   return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -92,13 +74,24 @@ export const App: FC = () => {
               <Suspense fallback={null}>
                 <ClientProvider>
                   <ProcessorProvider>
-                    {true ? (
+                    <MediaDevicesProvider>
-                      <ControlledOutputMediaDevicesProvider>
+                      <Sentry.ErrorBoundary
-                        {inner}
+                        fallback={(error) => (
-                      </ControlledOutputMediaDevicesProvider>
+                          <ErrorPage error={error} widget={widget} />
-                    ) : (
+                        )}
-                      <MediaDevicesProvider>{inner}</MediaDevicesProvider>
+                      >
-                    )}
+                        <DisconnectedBanner />
+                        <Routes>
+                          <SentryRoute path="/" element={<HomePage />} />
+                          <SentryRoute path="/login" element={<LoginPage />} />
+                          <SentryRoute
+                            path="/register"
+                            element={<RegisterPage />}
+                          />
+                          <SentryRoute path="*" element={<RoomPage />} />
+                        </Routes>
+                      </Sentry.ErrorBoundary>
+                    </MediaDevicesProvider>
                   </ProcessorProvider>
                 </ClientProvider>
               </Suspense>

src/livekit/MediaDevicesContext.tsx

@@ -17,7 +17,7 @@ import {
   type JSX,
 } from "react";
 import { createMediaDeviceObserver } from "@livekit/components-core";
-import { map, startWith } from "rxjs";
+import { combineLatest, map, startWith } from "rxjs";
 import { useObservable, useObservableEagerState } from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 
@@ -30,6 +30,7 @@ import {
   type Setting,
 } from "../settings/settings";
 import { type OutputDevice, setOutputDevices$ } from "../controls";
+import { useUrlParams } from "../UrlParams";
 
 export const EARPIECE_CONFIG_ID = "earpiece-id";
 
@@ -39,7 +40,7 @@ export type DeviceLabel =
   | { type: "earpiece" }
   | { type: "default"; name: string | null };
 
-export interface MediaDevice {
+export interface MediaDeviceHandle {
   /**
    * A map from available device IDs to labels.
    */
@@ -61,35 +62,33 @@ export interface MediaDevice {
 }
 
 interface InputDevices {
-  audioInput: MediaDevice;
+  audioInput: MediaDeviceHandle;
-  videoInput: MediaDevice;
+  videoInput: MediaDeviceHandle;
   startUsingDeviceNames: () => void;
   stopUsingDeviceNames: () => void;
   usingNames: boolean;
 }
 
 export interface MediaDevices extends Omit<InputDevices, "usingNames"> {
-  audioOutput: MediaDevice;
+  audioOutput: MediaDeviceHandle;
-}
-function useShowEarpiece(): boolean {
-  const [alwaysShowIphoneEarpice] = useSetting(alwaysShowIphoneEarpieceSetting);
-  const m = useMemo(
-    () =>
-      (navigator.userAgent.match("iPhone")?.length ?? 0) > 0 ||
-      alwaysShowIphoneEarpice,
-    [alwaysShowIphoneEarpice],
-  );
-  return m;
 }
 
-function useMediaDevice(
+/**
+ * Hook to get access to a mediaDevice handle for a kind. This allows to list
+ * the available devices, read and set the selected device.
+ * @param kind audio input, output or video output.
+ * @param setting The setting this handles selection should be synced with.
+ * @param usingNames If the hook should query device names for the associated
+ *  list.
+ * @returns A handle for the choosen kind.
+ */
+function useMediaDeviceHandle(
   kind: MediaDeviceKind,
   setting: Setting<string | undefined>,
   usingNames: boolean,
-): MediaDevice {
+): MediaDeviceHandle {
   // Make sure we don't needlessly reset to a device observer without names,
   // once permissions are already given
-  const showEarpiece = useShowEarpiece();
   const hasRequestedPermissions = useRef(false);
   const requestPermissions = usingNames || hasRequestedPermissions.current;
   hasRequestedPermissions.current ||= usingNames;
@@ -133,31 +132,23 @@ function useMediaDevice(
               kind === "audiooutput" &&
               !available.has("") &&
               !available.has("default") &&
-              (available.size || showEarpiece)
+              available.size
             )
               available = new Map([
                 ["", { type: "default", name: availableRaw[0]?.label || null }],
                 ...available,
               ]);
-            if (kind === "audiooutput" && showEarpiece)
-              // On IPhones we have to create a virtual earpiece device, because
-              // the earpiece is not available as a device ID.
-              available = new Map([
-                ...available,
-                [EARPIECE_CONFIG_ID, { type: "earpiece" }],
-              ]);
             // Note: creating virtual default input devices would be another problem
             // entirely, because requesting a media stream from deviceId "" won't
             // automatically track the default device.
             return available;
           }),
         ),
-      [deviceObserver$, kind, showEarpiece],
+      [deviceObserver$, kind],
     ),
   );
 
-  const [preferredId, setPreferredId] = useSetting(setting);
+  const [preferredId, select] = useSetting(setting);
-  const [asEarpice, setAsEarpiece] = useState(false);
   const selectedId = useMemo(() => {
     if (available.size) {
       // If the preferred device is available, use it. Or if every available
@@ -187,37 +178,26 @@ function useMediaDevice(
     ),
   );
 
-  const select = useCallback(
-    (id: string) => {
-      if (id === EARPIECE_CONFIG_ID) {
-        setAsEarpiece(true);
-      } else {
-        setAsEarpiece(false);
-        setPreferredId(id);
-      }
-    },
-    [setPreferredId],
-  );
-
   return useMemo(
     () => ({
       available,
       selectedId,
-      useAsEarpiece: asEarpice,
+      useAsEarpiece: false,
       selectedGroupId,
       select,
     }),
-    [available, selectedId, asEarpice, selectedGroupId, select],
+    [available, selectedId, selectedGroupId, select],
   );
 }
 
-export const deviceStub: MediaDevice = {
+export const deviceStub: MediaDeviceHandle = {
   available: new Map(),
   selectedId: undefined,
   selectedGroupId: undefined,
   select: () => {},
   useAsEarpiece: false,
 };
+
 export const devicesStub: MediaDevices = {
   audioInput: deviceStub,
   audioOutput: deviceStub,
@@ -233,12 +213,12 @@ function useInputDevices(): InputDevices {
   const [numCallersUsingNames, setNumCallersUsingNames] = useState(0);
   const usingNames = numCallersUsingNames > 0;
 
-  const audioInput = useMediaDevice(
+  const audioInput = useMediaDeviceHandle(
     "audioinput",
     audioInputSetting,
     usingNames,
   );
-  const videoInput = useMediaDevice(
+  const videoInput = useMediaDeviceHandle(
     "videoinput",
     videoInputSetting,
     usingNames,
@@ -275,23 +255,30 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
     usingNames,
   } = useInputDevices();
 
-  const audioOutput = useMediaDevice(
+  const { controlledOutput } = useUrlParams();
+
+  const webViewAudioOutput = useMediaDeviceHandle(
     "audiooutput",
     audioOutputSetting,
     usingNames,
   );
+  const controlledAudioOutput = useControlledOutput();
 
   const context: MediaDevices = useMemo(
     () => ({
       audioInput,
-      audioOutput,
+      audioOutput: controlledOutput
+        ? controlledAudioOutput
+        : webViewAudioOutput,
       videoInput,
       startUsingDeviceNames,
       stopUsingDeviceNames,
     }),
     [
       audioInput,
-      audioOutput,
+      controlledOutput,
+      controlledAudioOutput,
+      webViewAudioOutput,
       videoInput,
       startUsingDeviceNames,
       stopUsingDeviceNames,
@@ -305,29 +292,36 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
   );
 };
 
-function useControlledOutput(): MediaDevice {
+function useControlledOutput(): MediaDeviceHandle {
-  const showEarpiece = useShowEarpiece();
+  const { available, physicalDeviceForEarpiceMode } = useObservableEagerState(
-
+    useObservable(() => {
-  const available = useObservableEagerState(
+      const showEarpice$ = alwaysShowIphoneEarpieceSetting.value$.pipe(
-    useObservable(() =>
+        startWith(alwaysShowIphoneEarpieceSetting.getValue()),
-      setOutputDevices$.pipe(
+        map((v) => v || navigator.userAgent.includes("iPhone")),
+      );
+      const outputDeviceData$ = setOutputDevices$.pipe(
         startWith<OutputDevice[]>([]),
         map((devices) => {
-          const devicesMap = new Map<string, DeviceLabel>(
+          const physicalDeviceForEarpiceMode = devices.find(
-            devices.map(({ id, name }) => [id, { type: "name", name }]),
+            (d) => d.forEarpiece,
           );
-          if (showEarpiece)
+          return {
-            devicesMap.set(EARPIECE_CONFIG_ID, { type: "earpiece" });
+            devicesMap: new Map<string, DeviceLabel>(
-          return devicesMap;
+              devices.map(({ id, name }) => [id, { type: "name", name }]),
+            ),
+            physicalDeviceForEarpiceMode,
+          };
         }),
-      ),
+      );
-    ),
+
-  );
+      return combineLatest([outputDeviceData$, showEarpice$]).pipe(
-  const earpiceDevice = useObservableEagerState(
+        map(([{ devicesMap, physicalDeviceForEarpiceMode }, showEarpiece]) => {
-    setOutputDevices$.pipe(
+          if (showEarpiece && !!physicalDeviceForEarpiceMode)
-      startWith<OutputDevice[]>([]),
+            devicesMap.set(EARPIECE_CONFIG_ID, { type: "earpiece" });
-      map((devices) => devices.find((d) => d.forEarpiece)),
+          return { available: devicesMap, physicalDeviceForEarpiceMode };
-    ),
+        }),
+      );
+    }),
   );
 
   const [preferredId, setPreferredId] = useSetting(audioOutputSetting);
@@ -348,74 +342,32 @@ function useControlledOutput(): MediaDevice {
     return undefined;
   }, [available, preferredId]);
 
-  useEffect(() => {
-    if (selectedId === EARPIECE_CONFIG_ID)
-      if (selectedId !== undefined)
-        window.controls.onOutputDeviceSelect?.(selectedId);
-  }, [selectedId]);
-
   const [asEarpice, setAsEarpiece] = useState(false);
 
-  const select = useCallback(
+  useEffect(() => {
-    (id: string) => {
+    let selectForController = selectedId;
-      if (id === EARPIECE_CONFIG_ID) {
+    const earpiece = selectedId === EARPIECE_CONFIG_ID;
-        setAsEarpiece(true);
+
-        if (earpiceDevice) setPreferredId(earpiceDevice.id);
+    setAsEarpiece(earpiece);
-      } else {
+    if (earpiece && physicalDeviceForEarpiceMode !== undefined)
-        setAsEarpiece(false);
+      selectForController = physicalDeviceForEarpiceMode.id;
-        setPreferredId(id);
+
-      }
+    if (selectForController)
-    },
+      window.controls.onOutputDeviceSelect?.(selectForController);
-    [earpiceDevice, setPreferredId],
+  }, [physicalDeviceForEarpiceMode, selectedId]);
-  );
 
   return useMemo(
     () => ({
       available: available,
       selectedId,
       selectedGroupId: undefined,
-      select,
+      select: setPreferredId,
       useAsEarpiece: asEarpice,
     }),
-    [available, selectedId, select, asEarpice],
+    [available, selectedId, setPreferredId, asEarpice],
   );
 }
 
-export const ControlledOutputMediaDevicesProvider: FC<Props> = ({
-  children,
-}) => {
-  const {
-    audioInput,
-    videoInput,
-    startUsingDeviceNames,
-    stopUsingDeviceNames,
-  } = useInputDevices();
-  const audioOutput = useControlledOutput();
-
-  const context: MediaDevices = useMemo(
-    () => ({
-      audioInput,
-      audioOutput,
-      videoInput,
-      startUsingDeviceNames,
-      stopUsingDeviceNames,
-    }),
-    [
-      audioInput,
-      audioOutput,
-      videoInput,
-      startUsingDeviceNames,
-      stopUsingDeviceNames,
-    ],
-  );
-
-  return (
-    <MediaDevicesContext.Provider value={context}>
-      {children}
-    </MediaDevicesContext.Provider>
-  );
-};
-
 export const useMediaDevices = (): MediaDevices =>
   useContext(MediaDevicesContext);
 

src/livekit/useLivekit.ts

@@ -25,7 +25,7 @@ import { defaultLiveKitOptions } from "./options";
 import { type SFUConfig } from "./openIDSFU";
 import { type MuteStates } from "../room/MuteStates";
 import {
-  type MediaDevice,
+  type MediaDeviceHandle,
   type MediaDevices,
   useMediaDevices,
 } from "./MediaDevicesContext";
@@ -306,7 +306,10 @@ export function useLivekit(
   useEffect(() => {
     // Sync the requested devices with LiveKit's devices
     if (room !== undefined && connectionState === ConnectionState.Connected) {
-      const syncDevice = (kind: MediaDeviceKind, device: MediaDevice): void => {
+      const syncDevice = (
+        kind: MediaDeviceKind,
+        device: MediaDeviceHandle,
+      ): void => {
         const id = device.selectedId;
 
         // Detect if we're trying to use chrome's default device, in which case

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>(

src/settings/DeviceSelection.tsx

@@ -24,12 +24,12 @@ import { Trans, useTranslation } from "react-i18next";
 
 import {
   EARPIECE_CONFIG_ID,
-  type MediaDevice,
+  type MediaDeviceHandle,
 } from "../livekit/MediaDevicesContext";
 import styles from "./DeviceSelection.module.css";
 
 interface Props {
-  device: MediaDevice;
+  device: MediaDeviceHandle;
   title: string;
   numberedLabel: (number: number) => string;
 }