Hide error screen icon from accessibility technologies

It does not have any meaningful accessible label to contribute beyond what is already stated in the heading.

locales/en/app.json

@@ -82,7 +82,7 @@
   "error": {
     "call_is_not_supported": "Call is not supported",
     "call_not_found": "Call not found",
-    "call_not_found_description": "<0>That link doesn't appear to belong to any existing call. Check that you have the right link, or <1>create a new one</1>.</0>",
+    "call_not_found_description": "<0>That link doesn't appear to belong to any existing call. Check that you have the right link, or <2>create a new one</2>.</0>",
     "connection_lost": "Connection lost",
     "connection_lost_description": "You were disconnected from the call.",
     "e2ee_unsupported": "Incompatible browser",

package.json

@@ -82,7 +82,7 @@
     "@typescript-eslint/parser": "^8.31.0",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^4.0.0",
-    "@vector-im/compound-web": "^8.0.0",
+    "@vector-im/compound-web": "^7.12.0",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^3.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",

src/App.tsx

@@ -19,11 +19,10 @@ import { ClientProvider } from "./ClientContext";
 import { ErrorPage, LoadingPage } from "./FullScreenView";
 import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
+import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
 import { widget } from "./widget";
 import { useTheme } from "./useTheme";
 import { ProcessorProvider } from "./livekit/TrackProcessorContext";
-import { type AppViewModel } from "./state/AppViewModel";
-import { MediaDevicesContext } from "./MediaDevicesContext";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
@@ -51,11 +50,7 @@ const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
   return children;
 };
 
-interface Props {
-  vm: AppViewModel;
-}
-
-export const App: FC<Props> = ({ vm }) => {
+export const App: FC = () => {
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     Initializer.init()
@@ -77,7 +72,7 @@ export const App: FC<Props> = ({ vm }) => {
             {loaded ? (
               <Suspense fallback={null}>
                 <ClientProvider>
-                  <MediaDevicesContext value={vm.mediaDevices}>
+                  <MediaDevicesProvider>
                     <ProcessorProvider>
                       <Sentry.ErrorBoundary
                         fallback={(error) => (
@@ -96,7 +91,7 @@ export const App: FC<Props> = ({ vm }) => {
                         </Routes>
                       </Sentry.ErrorBoundary>
                     </ProcessorProvider>
-                  </MediaDevicesContext>
+                  </MediaDevicesProvider>
                 </ClientProvider>
               </Suspense>
             ) : (

src/ClientContext.tsx

@@ -11,7 +11,7 @@ import {
   useEffect,
   useState,
   createContext,
-  use,
+  useContext,
   useRef,
   useMemo,
   type JSX,
@@ -69,7 +69,8 @@ const ClientContext = createContext<ClientState | undefined>(undefined);
 
 export const ClientContextProvider = ClientContext.Provider;
 
-export const useClientState = (): ClientState | undefined => use(ClientContext);
+export const useClientState = (): ClientState | undefined =>
+  useContext(ClientContext);
 
 export function useClient(): {
   client?: MatrixClient;
@@ -349,7 +350,9 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     return <ErrorPage widget={widget} error={alreadyOpenedErr} />;
   }
 
-  return <ClientContext value={state}>{children}</ClientContext>;
+  return (
+    <ClientContext.Provider value={state}>{children}</ClientContext.Provider>
+  );
 };
 
 export type InitResult = {

src/ErrorView.module.css

@@ -12,6 +12,7 @@
 
 .error > h1 {
   margin: 0;
+  text-align: center;
 }
 
 .error > p {

src/ErrorView.tsx

@@ -99,7 +99,7 @@ export const ErrorView: FC<Props> = ({
   return (
     <div className={styles.error}>
       <BigIcon className={styles.icon}>
-        <Icon />
+        <Icon aria-hidden />
       </BigIcon>
       <Heading as="h1" weight="semibold" size="md">
         {title}

src/MediaDevicesContext.ts

@@ -1,52 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { createContext, use, useMemo } from "react";
-import { useObservableEagerState } from "observable-hooks";
-
-import { type MediaDevices } from "./state/MediaDevices";
-
-export const MediaDevicesContext = createContext<MediaDevices | undefined>(
-  undefined,
-);
-
-export function useMediaDevices(): MediaDevices {
-  const mediaDevices = use(MediaDevicesContext);
-  if (mediaDevices === undefined)
-    throw new Error(
-      "useMediaDevices must be used within a MediaDevices context provider",
-    );
-  return mediaDevices;
-}
-
-/**
- * A convenience hook to get the audio node configuration for the earpiece.
- * It will check the `useAsEarpiece` of the `audioOutput` device and return
- * the appropriate pan and volume values.
- *
- * @returns pan and volume values for the earpiece audio node configuration.
- */
-export const useEarpieceAudioConfig = (): {
-  pan: number;
-  volume: number;
-} => {
-  const devices = useMediaDevices();
-  const audioOutput = useObservableEagerState(devices.audioOutput.selected$);
-  // We use only the right speaker (pan = 1) for the earpiece.
-  // This mimics the behavior of the native earpiece speaker (only the top speaker on an iPhone)
-  const pan = useMemo(
-    () => (audioOutput?.virtualEarpiece ? 1 : 0),
-    [audioOutput?.virtualEarpiece],
-  );
-  // We also do lower the volume by a factor of 10 to optimize for the usecase where
-  // a user is holding the phone to their ear.
-  const volume = useMemo(
-    () => (audioOutput?.virtualEarpiece ? 0.1 : 1),
-    [audioOutput?.virtualEarpiece],
-  );
-  return { pan, volume };
-};

src/controls.ts

@@ -5,10 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { Subject } from "rxjs";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
-
-const logger = rootLogger.getChild("[controlled-output]");
+import { BehaviorSubject, Subject } from "rxjs";
 
 export interface Controls {
   canEnterPip(): boolean;
@@ -45,11 +42,12 @@ export interface OutputDevice {
  * If pipMode is enabled, EC will render a adapted call view layout.
  */
 export const setPipEnabled$ = new Subject<boolean>();
-
-export const availableOutputDevices$ = new Subject<OutputDevice[]>();
-
-export const outputDevice$ = new Subject<string | undefined>();
-
+// BehaviorSubject since the client might set this before we have subscribed (GroupCallView still in "loading" state)
+// We want the devices that have been set during loading to be available immediately once loaded.
+export const availableOutputDevices$ = new BehaviorSubject<OutputDevice[]>([]);
+// BehaviorSubject since the client might set this before we have subscribed (GroupCallView still in "loading" state)
+// We want the device that has been set during loading to be available immediately once loaded.
+export const outputDevice$ = new BehaviorSubject<string | undefined>(undefined);
 /**
  * This allows the os to mute the call if the user
  * presses the volume down button when it is at the minimum volume.
@@ -77,15 +75,12 @@ window.controls = {
     setPipEnabled$.next(false);
   },
   setAvailableAudioDevices(devices: OutputDevice[]): void {
-    logger.info("setAvailableAudioDevices called from native:", devices);
     availableOutputDevices$.next(devices);
   },
   setAudioDevice(id: string): void {
-    logger.info("setAudioDevice called from native", id);
     outputDevice$.next(id);
   },
   setAudioEnabled(enabled: boolean): void {
-    logger.info("setAudioEnabled called from native:", enabled);
     if (!setAudioEnabled$.observed)
       throw new Error(
         "Output controls are disabled. No setAudioEnabled$ observer",

src/grid/Grid.tsx

@@ -24,7 +24,7 @@ import {
   createContext,
   forwardRef,
   memo,
-  use,
+  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -124,7 +124,7 @@ interface LayoutContext {
 const LayoutContext = createContext<LayoutContext | null>(null);
 
 function useLayoutContext(): LayoutContext {
-  const context = use(LayoutContext);
+  const context = useContext(LayoutContext);
   if (context === null)
     throw new Error("useUpdateLayout called outside a Grid layout context");
   return context;
@@ -532,14 +532,14 @@ export function Grid<
       className={classNames(className, styles.grid)}
       style={style}
     >
-      <LayoutContext value={context}>
+      <LayoutContext.Provider value={context}>
         <LayoutMemo
           ref={setLayoutRoot}
           Layout={Layout}
           model={model}
           Slot={Slot}
         />
-      </LayoutContext>
+      </LayoutContext.Provider>
       {tileTransitions((spring, { id, model, onDrag, width, height }) => (
         <TileWrapper
           key={id}

src/livekit/MatrixAudioRenderer.test.tsx

@@ -17,14 +17,12 @@ import { type ReactNode } from "react";
 import { useTracks } from "@livekit/components-react";
 
 import { testAudioContext } from "../useAudioContext.test";
-import * as MediaDevicesContext from "../MediaDevicesContext";
+import * as MediaDevicesContext from "./MediaDevicesContext";
 import { MatrixAudioRenderer } from "./MatrixAudioRenderer";
-import { mockMediaDevices, mockTrack } from "../utils/test";
+import { mockTrack } from "../utils/test";
 
 export const TestAudioContextConstructor = vi.fn(() => testAudioContext);
 
-const MediaDevicesProvider = MediaDevicesContext.MediaDevicesContext.Provider;
-
 beforeEach(() => {
   vi.stubGlobal("AudioContext", TestAudioContextConstructor);
 });
@@ -53,11 +51,9 @@ vi.mocked(useTracks).mockReturnValue(tracks);
 
 it("should render for member", () => {
   const { container, queryAllByTestId } = render(
-    <MediaDevicesProvider value={mockMediaDevices({})}>
-      <MatrixAudioRenderer
-        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
-      />
-    </MediaDevicesProvider>,
+    <MatrixAudioRenderer
+      members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+    />,
   );
   expect(container).toBeTruthy();
   expect(queryAllByTestId("audio")).toHaveLength(1);
@@ -68,9 +64,7 @@ it("should not render without member", () => {
     { sender: "othermember", deviceId: "123" },
   ] as CallMembership[];
   const { container, queryAllByTestId } = render(
-    <MediaDevicesProvider value={mockMediaDevices({})}>
-      <MatrixAudioRenderer members={memberships} />
-    </MediaDevicesProvider>,
+    <MatrixAudioRenderer members={memberships} />,
   );
   expect(container).toBeTruthy();
   expect(queryAllByTestId("audio")).toHaveLength(0);
@@ -78,11 +72,9 @@ it("should not render without member", () => {
 
 it("should not setup audioContext gain and pan if there is no need to.", () => {
   render(
-    <MediaDevicesProvider value={mockMediaDevices({})}>
-      <MatrixAudioRenderer
-        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
-      />
-    </MediaDevicesProvider>,
+    <MatrixAudioRenderer
+      members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+    />,
   );
   const audioTrack = tracks[0].publication.track! as RemoteAudioTrack;
 
@@ -101,11 +93,9 @@ it("should setup audioContext gain and pan", () => {
     volume: 0.1,
   });
   render(
-    <MediaDevicesProvider value={mockMediaDevices({})}>
-      <MatrixAudioRenderer
-        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
-      />
-    </MediaDevicesProvider>,
+    <MatrixAudioRenderer
+      members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+    />,
   );
 
   const audioTrack = tracks[0].publication.track! as RemoteAudioTrack;

src/livekit/MatrixAudioRenderer.tsx

@@ -16,7 +16,7 @@ import {
 import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 
-import { useEarpieceAudioConfig } from "../MediaDevicesContext";
+import { useEarpieceAudioConfig } from "./MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import * as controls from "../controls";
 

src/livekit/MediaDevicesContext.tsx

@@ -0,0 +1,445 @@
+/*
+Copyright 2023-2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  type FC,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type JSX,
+} from "react";
+import { createMediaDeviceObserver } from "@livekit/components-core";
+import { combineLatest, distinctUntilChanged, map, startWith } from "rxjs";
+import { useObservable, useObservableEagerState } from "observable-hooks";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { deepCompare } from "matrix-js-sdk/lib/utils";
+
+import {
+  useSetting,
+  audioInput as audioInputSetting,
+  audioOutput as audioOutputSetting,
+  videoInput as videoInputSetting,
+  alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
+  type Setting,
+} from "../settings/settings";
+import { outputDevice$, availableOutputDevices$ } from "../controls";
+import { useUrlParams } from "../UrlParams";
+
+// This hardcoded id is used in EX ios! It can only be changed in coordination with
+// the ios swift team.
+export const EARPIECE_CONFIG_ID = "earpiece-id";
+
+export type DeviceLabel =
+  | { type: "name"; name: string }
+  | { type: "number"; number: number }
+  | { type: "earpiece" }
+  | { type: "default"; name: string | null };
+
+export interface MediaDeviceHandle {
+  /**
+   * A map from available device IDs to labels.
+   */
+  available: Map<string, DeviceLabel>;
+  selectedId: string | undefined;
+  /**
+   * An additional device configuration that makes us use only one channel of the
+   * output device and a reduced volume.
+   */
+  useAsEarpiece: boolean | undefined;
+  /**
+   * The group ID of the selected device.
+   */
+  // This is exposed sort of ad-hoc because it's only needed for knowing when to
+  // restart the tracks of default input devices, and ideally this behavior
+  // would be encapsulated somehow…
+  selectedGroupId: string | undefined;
+  select: (deviceId: string) => void;
+}
+
+interface InputDevices {
+  audioInput: MediaDeviceHandle;
+  videoInput: MediaDeviceHandle;
+  startUsingDeviceNames: () => void;
+  stopUsingDeviceNames: () => void;
+  usingNames: boolean;
+}
+
+export interface MediaDevices extends Omit<InputDevices, "usingNames"> {
+  audioOutput: MediaDeviceHandle;
+}
+
+/**
+ * An observable that represents if we should display the devices menu for iOS.
+ * This implies the following
+ *  - hide any input devices (they do not work anyhow on ios)
+ *  - Show a button to show the native output picker instead.
+ *  - Only show the earpiece toggle option if the earpiece is available:
+ *   `availableOutputDevices$.includes((d)=>d.forEarpiece)`
+ */
+export const iosDeviceMenu$ = alwaysShowIphoneEarpieceSetting.value$.pipe(
+  map((v) => v || navigator.userAgent.includes("iPhone")),
+);
+
+function useSelectedId(
+  available: Map<string, DeviceLabel>,
+  preferredId: string | undefined,
+): string | undefined {
+  return useMemo(() => {
+    if (available.size) {
+      // If the preferred device is available, use it. Or if every available
+      // device ID is falsy, the browser is probably just being paranoid about
+      // fingerprinting and we should still try using the preferred device.
+      // Worst case it is not available and the browser will gracefully fall
+      // back to some other device for us when requesting the media stream.
+      // Otherwise, select the first available device.
+      return (preferredId !== undefined && available.has(preferredId)) ||
+        (available.size === 1 && available.has(""))
+        ? preferredId
+        : available.keys().next().value;
+    }
+    return undefined;
+  }, [available, preferredId]);
+}
+
+/**
+ * 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 handle's selection should be synced with.
+ * @param usingNames If the hook should query device names for the associated
+ *  list.
+ * @returns A handle for the chosen kind.
+ */
+function useMediaDeviceHandle(
+  kind: MediaDeviceKind,
+  setting: Setting<string | undefined>,
+  usingNames: boolean,
+): MediaDeviceHandle {
+  const hasRequestedPermissions = useRef(false);
+  const requestPermissions = usingNames || hasRequestedPermissions.current;
+  // Make sure we don't needlessly reset to a device observer without names,
+  // once permissions are already given
+  hasRequestedPermissions.current ||= usingNames;
+
+  // We use a bare device observer here rather than one of the fancy device
+  // selection hooks from @livekit/components-react, because
+  // useMediaDeviceSelect expects a room or track, which we don't have here, and
+  // useMediaDevices provides no way to request device names.
+  // Tragically, the only way to get device names out of LiveKit is to specify a
+  // kind, which then results in multiple permissions requests.
+  const deviceObserver$ = useMemo(
+    () =>
+      createMediaDeviceObserver(
+        kind,
+        () => logger.error("Error creating MediaDeviceObserver"),
+        requestPermissions,
+      ).pipe(
+        startWith([]),
+        // This Observable emits new values whenever the browser fires a
+        // MediaDevices 'devicechange' event. One would think, innocently, that
+        // a 'devicechange' event means the devices have changed. But as of the
+        // time of writing, we are seeing mobile Safari firing spurious
+        // 'devicechange' events (where no change has actually occurred) when
+        // we call MediaDevices.getUserMedia. So, filter by deep equality.
+        distinctUntilChanged<MediaDeviceInfo[]>(deepCompare),
+      ),
+    [kind, requestPermissions],
+  );
+  const available = useObservableEagerState(
+    useMemo(
+      () =>
+        deviceObserver$.pipe(
+          map((availableRaw) => {
+            // Sometimes browsers (particularly Firefox) can return multiple device
+            // entries for the exact same device ID; using a map deduplicates them
+            let available = new Map<string, DeviceLabel>(
+              availableRaw.map((d, i) => [
+                d.deviceId,
+                d.label
+                  ? { type: "name", name: d.label }
+                  : { type: "number", number: i + 1 },
+              ]),
+            );
+            // Create a virtual default audio output for browsers that don't have one.
+            // Its device ID must be the empty string because that's what setSinkId
+            // recognizes.
+            // We also create this if we do not have any available devices, so that
+            // we can use the default or the earpiece.
+            if (
+              kind === "audiooutput" &&
+              !available.has("") &&
+              !available.has("default") &&
+              available.size
+            )
+              available = new Map([
+                ["", { type: "default", name: availableRaw[0]?.label || null }],
+                ...available,
+              ]);
+            // 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],
+    ),
+  );
+
+  const [preferredId, select] = useSetting(setting);
+  const selectedId = useSelectedId(available, preferredId);
+
+  const selectedGroupId = useObservableEagerState(
+    useMemo(
+      () =>
+        deviceObserver$.pipe(
+          map(
+            (availableRaw) =>
+              availableRaw.find((d) => d.deviceId === selectedId)?.groupId,
+          ),
+        ),
+      [deviceObserver$, selectedId],
+    ),
+  );
+
+  return useMemo(
+    () => ({
+      available,
+      selectedId,
+      useAsEarpiece: false,
+      selectedGroupId,
+      select,
+    }),
+    [available, selectedId, selectedGroupId, select],
+  );
+}
+
+export const deviceStub: MediaDeviceHandle = {
+  available: new Map(),
+  selectedId: undefined,
+  selectedGroupId: undefined,
+  select: () => {},
+  useAsEarpiece: false,
+};
+
+export const devicesStub: MediaDevices = {
+  audioInput: deviceStub,
+  audioOutput: deviceStub,
+  videoInput: deviceStub,
+  startUsingDeviceNames: () => {},
+  stopUsingDeviceNames: () => {},
+};
+
+export const MediaDevicesContext = createContext<MediaDevices>(devicesStub);
+
+function useInputDevices(): InputDevices {
+  // Counts the number of callers currently using device names.
+  const [numCallersUsingNames, setNumCallersUsingNames] = useState(0);
+  const usingNames = numCallersUsingNames > 0;
+
+  const audioInput = useMediaDeviceHandle(
+    "audioinput",
+    audioInputSetting,
+    usingNames,
+  );
+  const videoInput = useMediaDeviceHandle(
+    "videoinput",
+    videoInputSetting,
+    usingNames,
+  );
+
+  const startUsingDeviceNames = useCallback(
+    () => setNumCallersUsingNames((n) => n + 1),
+    [setNumCallersUsingNames],
+  );
+  const stopUsingDeviceNames = useCallback(
+    () => setNumCallersUsingNames((n) => n - 1),
+    [setNumCallersUsingNames],
+  );
+
+  return {
+    audioInput,
+    videoInput,
+    startUsingDeviceNames,
+    stopUsingDeviceNames,
+    usingNames,
+  };
+}
+
+interface Props {
+  children: JSX.Element;
+}
+
+export const MediaDevicesProvider: FC<Props> = ({ children }) => {
+  const {
+    audioInput,
+    videoInput,
+    startUsingDeviceNames,
+    stopUsingDeviceNames,
+    usingNames,
+  } = useInputDevices();
+
+  const { controlledAudioDevices } = useUrlParams();
+
+  const webViewAudioOutput = useMediaDeviceHandle(
+    "audiooutput",
+    audioOutputSetting,
+    usingNames,
+  );
+  const controlledAudioOutput = useControlledOutput();
+
+  const context: MediaDevices = useMemo(
+    () => ({
+      audioInput,
+      audioOutput: controlledAudioDevices
+        ? controlledAudioOutput
+        : webViewAudioOutput,
+      videoInput,
+      startUsingDeviceNames,
+      stopUsingDeviceNames,
+    }),
+    [
+      audioInput,
+      controlledAudioDevices,
+      controlledAudioOutput,
+      webViewAudioOutput,
+      videoInput,
+      startUsingDeviceNames,
+      stopUsingDeviceNames,
+    ],
+  );
+
+  return (
+    <MediaDevicesContext.Provider value={context}>
+      {children}
+    </MediaDevicesContext.Provider>
+  );
+};
+
+function useControlledOutput(): MediaDeviceHandle {
+  const { available } = useObservableEagerState(
+    useObservable(() => {
+      const outputDeviceData$ = availableOutputDevices$.pipe(
+        map((devices) => {
+          const deviceForEarpiece = devices.find((d) => d.forEarpiece);
+          const deviceMapTuple: [string, DeviceLabel][] = devices.map(
+            ({ id, name, isEarpiece, isSpeaker /*,isExternalHeadset*/ }) => {
+              let deviceLabel: DeviceLabel = { type: "name", name };
+              // if (isExternalHeadset) // Do we want this?
+              if (isEarpiece) deviceLabel = { type: "earpiece" };
+              if (isSpeaker) deviceLabel = { type: "default", name };
+              return [id, deviceLabel];
+            },
+          );
+          return {
+            devicesMap: new Map<string, DeviceLabel>(deviceMapTuple),
+            deviceForEarpiece,
+          };
+        }),
+      );
+
+      return combineLatest(
+        [outputDeviceData$, iosDeviceMenu$],
+        ({ devicesMap, deviceForEarpiece }, iosShowEarpiece) => {
+          let available = devicesMap;
+          if (iosShowEarpiece && !!deviceForEarpiece) {
+            available = new Map([
+              ...devicesMap.entries(),
+              [EARPIECE_CONFIG_ID, { type: "earpiece" }],
+            ]);
+          }
+          return { available, deviceForEarpiece };
+        },
+      );
+    }),
+  );
+  const [preferredId, setPreferredId] = useSetting(audioOutputSetting);
+  useEffect(() => {
+    const subscription = outputDevice$.subscribe((id) => {
+      if (id) setPreferredId(id);
+    });
+    return (): void => subscription.unsubscribe();
+  }, [setPreferredId]);
+
+  const selectedId = useSelectedId(available, preferredId);
+
+  const [asEarpiece, setAsEarpiece] = useState(false);
+
+  useEffect(() => {
+    // Let the hosting application know which output device has been selected.
+    // This information is probably only of interest if the earpiece mode has been
+    // selected - for example, Element X iOS listens to this to determine whether it
+    // should enable the proximity sensor.
+    if (selectedId) {
+      window.controls.onAudioDeviceSelect?.(selectedId);
+      // Call deprecated method for backwards compatibility.
+      window.controls.onOutputDeviceSelect?.(selectedId);
+    }
+    setAsEarpiece(selectedId === EARPIECE_CONFIG_ID);
+  }, [selectedId]);
+
+  return useMemo(
+    () => ({
+      available: available,
+      selectedId,
+      selectedGroupId: undefined,
+      select: setPreferredId,
+      useAsEarpiece: asEarpiece,
+    }),
+    [available, selectedId, setPreferredId, asEarpiece],
+  );
+}
+
+export const useMediaDevices = (): MediaDevices =>
+  useContext(MediaDevicesContext);
+
+/**
+ * React hook that requests for the media devices context to be populated with
+ * real device names while this component is mounted. This is not done by
+ * default because it may involve requesting additional permissions from the
+ * user.
+ */
+export const useMediaDeviceNames = (
+  context: MediaDevices,
+  enabled = true,
+): void =>
+  useEffect(() => {
+    if (enabled) {
+      context.startUsingDeviceNames();
+      return context.stopUsingDeviceNames;
+    }
+  }, [context, enabled]);
+
+/**
+ * A convenience hook to get the audio node configuration for the earpiece.
+ * It will check the `useAsEarpiece` of the `audioOutput` device and return
+ * the appropriate pan and volume values.
+ *
+ * @returns pan and volume values for the earpiece audio node configuration.
+ */
+export const useEarpieceAudioConfig = (): {
+  pan: number;
+  volume: number;
+} => {
+  const { audioOutput } = useMediaDevices();
+  // We use only the right speaker (pan = 1) for the earpiece.
+  // This mimics the behavior of the native earpiece speaker (only the top speaker on an iPhone)
+  const pan = useMemo(
+    () => (audioOutput.useAsEarpiece ? 1 : 0),
+    [audioOutput.useAsEarpiece],
+  );
+  // We also do lower the volume by a factor of 10 to optimize for the usecase where
+  // a user is holding the phone to their ear.
+  const volume = useMemo(
+    () => (audioOutput.useAsEarpiece ? 0.1 : 1),
+    [audioOutput.useAsEarpiece],
+  );
+  return { pan, volume };
+};

src/livekit/TrackProcessorContext.tsx

@@ -14,7 +14,7 @@ import {
   createContext,
   type FC,
   type JSX,
-  use,
+  useContext,
   useEffect,
   useMemo,
 } from "react";
@@ -34,7 +34,7 @@ type ProcessorState = {
 const ProcessorContext = createContext<ProcessorState | undefined>(undefined);
 
 export function useTrackProcessor(): ProcessorState {
-  const state = use(ProcessorContext);
+  const state = useContext(ProcessorContext);
   if (state === undefined)
     throw new Error(
       "useTrackProcessor must be used within a ProcessorProvider",
@@ -83,5 +83,9 @@ export const ProcessorProvider: FC<Props> = ({ children }) => {
     [supported, blurActivated, blur],
   );
 
-  return <ProcessorContext value={processorState}>{children}</ProcessorContext>;
+  return (
+    <ProcessorContext.Provider value={processorState}>
+      {children}
+    </ProcessorContext.Provider>
+  );
 };

src/livekit/useLivekit.ts

@@ -19,18 +19,12 @@ import E2EEWorker from "livekit-client/e2ee-worker?worker";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { useObservable, useObservableEagerState } from "observable-hooks";
-import {
-  map,
-  NEVER,
-  type Observable,
-  type Subscription,
-  switchMap,
-} from "rxjs";
+import { map } from "rxjs";
 
 import { defaultLiveKitOptions } from "./options";
 import { type SFUConfig } from "./openIDSFU";
 import { type MuteStates } from "../room/MuteStates";
-import { useMediaDevices } from "../MediaDevicesContext";
+import { type MediaDeviceHandle, useMediaDevices } from "./MediaDevicesContext";
 import {
   type ECConnectionState,
   useECConnectionState,
@@ -45,8 +39,6 @@ import {
 import { observeTrackReference$ } from "../state/MediaViewModel";
 import { useUrlParams } from "../UrlParams";
 import { useInitial } from "../useInitial";
-import { getValue } from "../utils/observable";
-import { type SelectedDevice } from "../state/MediaDevices";
 
 interface UseLivekitResult {
   livekitRoom?: Room;
@@ -64,9 +56,7 @@ export function useLivekit(
   const initialMuteStates = useInitial(() => muteStates);
 
   const devices = useMediaDevices();
-  const initialAudioInputId = useInitial(
-    () => getValue(devices.audioInput.selected$)?.id,
-  );
+  const initialDevices = useInitial(() => devices);
 
   // Store if audio/video are currently updating. If to prohibit unnecessary calls
   // to setMicrophoneEnabled/setCameraEnabled
@@ -104,20 +94,15 @@ export function useLivekit(
       ...defaultLiveKitOptions,
       videoCaptureDefaults: {
         ...defaultLiveKitOptions.videoCaptureDefaults,
-        deviceId: getValue(devices.videoInput.selected$)?.id,
+        deviceId: initialDevices.videoInput.selectedId,
         processor,
       },
       audioCaptureDefaults: {
         ...defaultLiveKitOptions.audioCaptureDefaults,
-        deviceId: initialAudioInputId,
+        deviceId: initialDevices.audioInput.selectedId,
       },
       audioOutput: {
-        // When using controlled audio devices, we don't want to set the
-        // deviceId here, because it will be set by the native app.
-        // (also the id does not need to match a browser device id)
-        deviceId: controlledAudioDevices
-          ? undefined
-          : getValue(devices.audioOutput.selected$)?.id,
+        deviceId: initialDevices.audioOutput.selectedId,
       },
       e2ee,
     };
@@ -172,7 +157,7 @@ export function useLivekit(
   );
 
   const connectionState = useECConnectionState(
-    initialAudioInputId,
+    initialDevices.audioInput.selectedId,
     initialMuteStates.audio.enabled,
     room,
     sfuConfig,
@@ -327,65 +312,62 @@ export function useLivekit(
     ) {
       const syncDevice = (
         kind: MediaDeviceKind,
-        selected$: Observable<SelectedDevice | undefined>,
-      ): Subscription =>
-        selected$.subscribe((device) => {
-          if (
-            device !== undefined &&
-            room.getActiveDevice(kind) !== device.id
-          ) {
-            room
-              .switchActiveDevice(kind, device.id)
-              .catch((e) =>
-                logger.error(`Failed to sync ${kind} device with LiveKit`, e),
-              );
-          }
-        });
+        device: MediaDeviceHandle,
+      ): void => {
+        const id = device.selectedId;
 
-      const subscriptions = [
-        syncDevice("audioinput", devices.audioInput.selected$),
-        syncDevice("audiooutput", devices.audioOutput.selected$),
-        syncDevice("videoinput", devices.videoInput.selected$),
-        // Restart the audio input track whenever we detect that the active media
-        // device has changed to refer to a different hardware device. We do this
-        // for the sake of Chrome, which provides a "default" device that is meant
-        // to match the system's default audio input, whatever that may be.
+        // Detect if we're trying to use chrome's default device, in which case
+        // we need to to see if the default device has changed to a different device
+        // by comparing the group ID of the device we're using against the group ID
+        // of what the default device is *now*.
         // This is special-cased for only audio inputs because we need to dig around
         // in the LocalParticipant object for the track object and there's not a nice
         // way to do that generically. There is usually no OS-level default video capture
         // device anyway, and audio outputs work differently.
-        devices.audioInput.selected$
-          .pipe(switchMap((device) => device?.hardwareDeviceChange$ ?? NEVER))
-          .subscribe(() => {
-            const activeMicTrack = Array.from(
-              room.localParticipant.audioTrackPublications.values(),
-            ).find((d) => d.source === Track.Source.Microphone)?.track;
+        if (
+          id === "default" &&
+          kind === "audioinput" &&
+          room.options.audioCaptureDefaults?.deviceId === "default"
+        ) {
+          const activeMicTrack = Array.from(
+            room.localParticipant.audioTrackPublications.values(),
+          ).find((d) => d.source === Track.Source.Microphone)?.track;
 
-            if (
-              activeMicTrack &&
-              // only restart if the stream is still running: LiveKit will detect
-              // when a track stops & restart appropriately, so this is not our job.
-              // Plus, we need to avoid restarting again if the track is already in
-              // the process of being restarted.
-              activeMicTrack.mediaStreamTrack.readyState !== "ended"
-            ) {
-              // Restart the track, which will cause Livekit to do another
-              // getUserMedia() call with deviceId: default to get the *new* default device.
-              // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
-              // the deviceId hasn't changed (was & still is default).
-              room.localParticipant
-                .getTrackPublication(Track.Source.Microphone)
-                ?.audioTrack?.restartTrack()
-                .catch((e) => {
-                  logger.error(`Failed to restart audio device track`, e);
-                });
-            }
-          }),
-      ];
-
-      return (): void => {
-        for (const s of subscriptions) s.unsubscribe();
+          if (
+            activeMicTrack &&
+            // only restart if the stream is still running: LiveKit will detect
+            // when a track stops & restart appropriately, so this is not our job.
+            // Plus, we need to avoid restarting again if the track is already in
+            // the process of being restarted.
+            activeMicTrack.mediaStreamTrack.readyState !== "ended" &&
+            device.selectedGroupId !==
+              activeMicTrack.mediaStreamTrack.getSettings().groupId
+          ) {
+            // It's different, so restart the track, ie. cause Livekit to do another
+            // getUserMedia() call with deviceId: default to get the *new* default device.
+            // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
+            // the deviceId hasn't changed (was & still is default).
+            room.localParticipant
+              .getTrackPublication(Track.Source.Microphone)
+              ?.audioTrack?.restartTrack()
+              .catch((e) => {
+                logger.error(`Failed to restart audio device track`, e);
+              });
+          }
+        } else {
+          if (id !== undefined && room.getActiveDevice(kind) !== id) {
+            room
+              .switchActiveDevice(kind, id)
+              .catch((e) =>
+                logger.error(`Failed to sync ${kind} device with LiveKit`, e),
+              );
+          }
+        }
       };
+
+      syncDevice("audioinput", devices.audioInput);
+      syncDevice("audiooutput", devices.audioOutput);
+      syncDevice("videoinput", devices.videoInput);
     }
   }, [room, devices, connectionState, controlledAudioDevices]);
 

src/main.tsx

@@ -23,7 +23,6 @@ import {
 import { App } from "./App";
 import { init as initRageshake } from "./settings/rageshake";
 import { Initializer } from "./initializer";
-import { AppViewModel } from "./state/AppViewModel";
 
 window.setLKLogLevel = setLKLogLevel;
 
@@ -61,7 +60,7 @@ Initializer.initBeforeReact()
   .then(() => {
     root.render(
       <StrictMode>
-        <App vm={new AppViewModel()} />
+        <App />
       </StrictMode>,
     );
   })

src/reactions/useReactionsSender.tsx

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { EventType, RelationType } from "matrix-js-sdk";
 import {
   createContext,
-  use,
+  useContext,
   type ReactNode,
   useCallback,
   useMemo,
@@ -34,7 +34,7 @@ const ReactionsSenderContext = createContext<
 >(undefined);
 
 export const useReactionsSender = (): ReactionsSenderContextType => {
-  const context = use(ReactionsSenderContext);
+  const context = useContext(ReactionsSenderContext);
   if (!context) {
     throw new Error("useReactions must be used within a ReactionsProvider");
   }
@@ -157,7 +157,7 @@ export const ReactionsSenderProvider = ({
   );
 
   return (
-    <ReactionsSenderContext
+    <ReactionsSenderContext.Provider
       value={{
         supportsReactions,
         toggleRaisedHand,
@@ -165,6 +165,6 @@ export const ReactionsSenderProvider = ({
       }}
     >
       {children}
-    </ReactionsSenderContext>
+    </ReactionsSenderContext.Provider>
   );
 };

src/room/GroupCallView.test.tsx

@@ -32,7 +32,6 @@ import {
   mockEmitter,
   mockMatrixRoom,
   mockMatrixRoomMember,
-  mockMediaDevices,
   mockRtcMembership,
   MockRTCSession,
 } from "../utils/test";
@@ -41,7 +40,6 @@ import { type WidgetHelpers } from "../widget";
 import { LazyEventEmitter } from "../LazyEventEmitter";
 import { MatrixRTCFocusMissingError } from "../utils/errors";
 import { ProcessorProvider } from "../livekit/TrackProcessorContext";
-import { MediaDevicesContext } from "../MediaDevicesContext";
 
 vi.mock("../soundUtils");
 vi.mock("../useAudioContext");
@@ -149,22 +147,20 @@ function createGroupCallView(
   const { getByText } = render(
     <BrowserRouter>
       <TooltipProvider>
-        <MediaDevicesContext value={mockMediaDevices({})}>
-          <ProcessorProvider>
-            <GroupCallView
-              client={client}
-              isPasswordlessUser={false}
-              confineToRoom={false}
-              preload={false}
-              skipLobby={false}
-              hideHeader={true}
-              rtcSession={rtcSession as unknown as MatrixRTCSession}
-              isJoined={joined}
-              muteStates={muteState}
-              widget={widget}
-            />
-          </ProcessorProvider>
-        </MediaDevicesContext>
+        <ProcessorProvider>
+          <GroupCallView
+            client={client}
+            isPasswordlessUser={false}
+            confineToRoom={false}
+            preload={false}
+            skipLobby={false}
+            hideHeader={true}
+            rtcSession={rtcSession as unknown as MatrixRTCSession}
+            isJoined={joined}
+            muteStates={muteState}
+            widget={widget}
+          />
+        </ProcessorProvider>
       </TooltipProvider>
     </BrowserRouter>,
   );

src/room/GroupCallView.tsx

@@ -40,7 +40,7 @@ import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
 import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates";
-import { useMediaDevices } from "../MediaDevicesContext";
+import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import {
@@ -58,10 +58,9 @@ import { callEventAudioSounds } from "./CallEventAudioRenderer";
 import { useLatest } from "../useLatest";
 import { usePageTitle } from "../usePageTitle";
 import {
+  ConnectionLostError,
   E2EENotSupportedError,
   ElementCallError,
-  ErrorCode,
-  RTCSessionError,
   UnknownCallError,
 } from "../utils/errors.ts";
 import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary.tsx";
@@ -142,14 +141,7 @@ export const GroupCallView: FC<Props> = ({
   useTypedEventEmitter(
     rtcSession,
     MatrixRTCSessionEvent.MembershipManagerError,
-    (error) => {
-      setExternalError(
-        new RTCSessionError(
-          ErrorCode.MEMBERSHIP_MANAGER_UNRECOVERABLE,
-          error.message ?? error,
-        ),
-      );
-    },
+    (error) => setExternalError(new ConnectionLostError()),
   );
   useEffect(() => {
     // Sanity check the room object
@@ -197,7 +189,8 @@ export const GroupCallView: FC<Props> = ({
     [memberships],
   );
 
-  const mediaDevices = useMediaDevices();
+  const deviceContext = useMediaDevices();
+  const latestDevices = useLatest(deviceContext);
   const latestMuteStates = useLatest(muteStates);
 
   const enterRTCSessionOrError = useCallback(
@@ -249,7 +242,7 @@ export const GroupCallView: FC<Props> = ({
           logger.debug(
             `Found audio input ID ${deviceId} for name ${audioInput}`,
           );
-          mediaDevices.audioInput.select(deviceId);
+          latestDevices.current!.audioInput.select(deviceId);
         }
       }
 
@@ -263,7 +256,7 @@ export const GroupCallView: FC<Props> = ({
           logger.debug(
             `Found video input ID ${deviceId} for name ${videoInput}`,
           );
-          mediaDevices.videoInput.select(deviceId);
+          latestDevices.current!.videoInput.select(deviceId);
         }
       }
     };
@@ -305,7 +298,7 @@ export const GroupCallView: FC<Props> = ({
     preload,
     skipLobby,
     perParticipantE2EE,
-    mediaDevices,
+    latestDevices,
     latestMuteStates,
     enterRTCSessionOrError,
     useNewMembershipManager,

src/room/InCallView.test.tsx

@@ -31,7 +31,6 @@ import {
   mockLocalParticipant,
   mockMatrixRoom,
   mockMatrixRoomMember,
-  mockMediaDevices,
   mockRemoteParticipant,
   mockRtcMembership,
   type MockRTCSession,
@@ -46,7 +45,6 @@ import {
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer";
-import { MediaDevicesContext } from "../MediaDevicesContext";
 
 // vi.hoisted(() => {
 //   localStorage = {} as unknown as Storage;
@@ -149,43 +147,41 @@ function createInCallView(): RenderResult & {
   rtcSession.joined = true;
   const renderResult = render(
     <BrowserRouter>
-      <MediaDevicesContext value={mockMediaDevices({})}>
-        <ReactionsSenderProvider
-          vm={vm}
-          rtcSession={rtcSession as unknown as MatrixRTCSession}
-        >
-          <TooltipProvider>
-            <RoomContext value={livekitRoom}>
-              <InCallView
-                client={client}
-                hideHeader={true}
-                rtcSession={rtcSession as unknown as MatrixRTCSession}
-                muteStates={muteState}
-                vm={vm}
-                matrixInfo={{
-                  userId: "",
-                  displayName: "",
-                  avatarUrl: "",
-                  roomId: "",
-                  roomName: "",
-                  roomAlias: null,
-                  roomAvatar: null,
-                  e2eeSystem: {
-                    kind: E2eeType.NONE,
-                  },
-                }}
-                livekitRoom={livekitRoom}
-                participantCount={0}
-                onLeave={function (): void {
-                  throw new Error("Function not implemented.");
-                }}
-                connState={ConnectionState.Connected}
-                onShareClick={null}
-              />
-            </RoomContext>
-          </TooltipProvider>
-        </ReactionsSenderProvider>
-      </MediaDevicesContext>
+      <ReactionsSenderProvider
+        vm={vm}
+        rtcSession={rtcSession as unknown as MatrixRTCSession}
+      >
+        <TooltipProvider>
+          <RoomContext.Provider value={livekitRoom}>
+            <InCallView
+              client={client}
+              hideHeader={true}
+              rtcSession={rtcSession as unknown as MatrixRTCSession}
+              muteStates={muteState}
+              vm={vm}
+              matrixInfo={{
+                userId: "",
+                displayName: "",
+                avatarUrl: "",
+                roomId: "",
+                roomName: "",
+                roomAlias: null,
+                roomAvatar: null,
+                e2eeSystem: {
+                  kind: E2eeType.NONE,
+                },
+              }}
+              livekitRoom={livekitRoom}
+              participantCount={0}
+              onLeave={function (): void {
+                throw new Error("Function not implemented.");
+              }}
+              connState={ConnectionState.Connected}
+              onShareClick={null}
+            />
+          </RoomContext.Provider>
+        </TooltipProvider>
+      </ReactionsSenderProvider>
     </BrowserRouter>,
   );
   return {

src/room/InCallView.tsx

@@ -172,7 +172,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   if (livekitRoom === undefined || vm === null) return null;
 
   return (
-    <RoomContext value={livekitRoom}>
+    <RoomContext.Provider value={livekitRoom}>
       <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
         <InCallView
           {...props}
@@ -181,7 +181,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
           connState={connState}
         />
       </ReactionsSenderProvider>
-    </RoomContext>
+    </RoomContext.Provider>
   );
 };
 

src/room/LobbyView.tsx

@@ -24,7 +24,7 @@ import {
   type LocalVideoTrack,
   Track,
 } from "livekit-client";
-import { useObservable, useObservableEagerState } from "observable-hooks";
+import { useObservable } from "observable-hooks";
 import { map } from "rxjs";
 import { useNavigate } from "react-router-dom";
 
@@ -45,7 +45,7 @@ import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useMediaQuery } from "../useMediaQuery";
 import { E2eeType } from "../e2ee/e2eeType";
 import { Link } from "../button/Link";
-import { useMediaDevices } from "../MediaDevicesContext";
+import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { useInitial } from "../useInitial";
 import { useSwitchCamera as useShowSwitchCamera } from "./useSwitchCamera";
 import {
@@ -54,7 +54,6 @@ import {
 } from "../livekit/TrackProcessorContext";
 import { usePageTitle } from "../usePageTitle";
 import { useLatest } from "../useLatest";
-import { getValue } from "../utils/observable";
 
 interface Props {
   client: MatrixClient;
@@ -127,18 +126,13 @@ export const LobbyView: FC<Props> = ({
   );
 
   const devices = useMediaDevices();
-  const videoInputId = useObservableEagerState(
-    devices.videoInput.selected$,
-  )?.id;
 
   // Capture the audio options as they were when we first mounted, because
   // we're not doing anything with the audio anyway so we don't need to
   // re-open the devices when they change (see below).
   const initialAudioOptions = useInitial(
     () =>
-      muteStates.audio.enabled && {
-        deviceId: getValue(devices.audioInput.selected$)?.id,
-      },
+      muteStates.audio.enabled && { deviceId: devices.audioInput.selectedId },
   );
 
   const { processor } = useTrackProcessor();
@@ -154,14 +148,14 @@ export const LobbyView: FC<Props> = ({
       // which would cause the devices to be re-opened on the next render.
       audio: Object.assign({}, initialAudioOptions),
       video: muteStates.video.enabled && {
-        deviceId: videoInputId,
+        deviceId: devices.videoInput.selectedId,
         processor: initialProcessor,
       },
     }),
     [
       initialAudioOptions,
       muteStates.video.enabled,
-      videoInputId,
+      devices.videoInput.selectedId,
       initialProcessor,
     ],
   );

src/room/MuteStates.test.tsx

@@ -5,29 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  afterAll,
-  afterEach,
-  describe,
-  expect,
-  it,
-  onTestFinished,
-  vi,
-} from "vitest";
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
 import { type FC, useCallback, useState } from "react";
 import { render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";
-import { createMediaDeviceObserver } from "@livekit/components-core";
-import { of } from "rxjs";
 
 import { useMuteStates } from "./MuteStates";
-import { MediaDevicesContext } from "../MediaDevicesContext";
+import {
+  type DeviceLabel,
+  type MediaDeviceHandle,
+  type MediaDevices,
+  MediaDevicesContext,
+} from "../livekit/MediaDevicesContext";
 import { mockConfig } from "../utils/test";
-import { MediaDevices } from "../state/MediaDevices";
-import { ObservableScope } from "../state/ObservableScope";
-
-vi.mock("@livekit/components-core");
 
 interface TestComponentProps {
   isJoined?: boolean;
@@ -82,6 +73,16 @@ const mockCamera: MediaDeviceInfo = {
   },
 };
 
+function mockDevices(available: Map<string, DeviceLabel>): MediaDeviceHandle {
+  return {
+    available,
+    selectedId: "",
+    selectedGroupId: "",
+    select: (): void => {},
+    useAsEarpiece: false,
+  };
+}
+
 function mockMediaDevices(
   {
     microphone,
@@ -93,21 +94,21 @@ function mockMediaDevices(
     camera?: boolean;
   } = { microphone: true, speaker: true, camera: true },
 ): MediaDevices {
-  vi.mocked(createMediaDeviceObserver).mockImplementation((kind) => {
-    switch (kind) {
-      case "audioinput":
-        return of(microphone ? [mockMicrophone] : []);
-      case "audiooutput":
-        return of(speaker ? [mockSpeaker] : []);
-      case "videoinput":
-        return of(camera ? [mockCamera] : []);
-      case undefined:
-        throw new Error("Unimplemented");
-    }
-  });
-  const scope = new ObservableScope();
-  onTestFinished(() => scope.end());
-  return new MediaDevices(scope);
+  return {
+    audioInput: mockDevices(
+      microphone
+        ? new Map([[mockMicrophone.deviceId, mockMicrophone]])
+        : new Map(),
+    ),
+    audioOutput: mockDevices(
+      speaker ? new Map([[mockSpeaker.deviceId, mockSpeaker]]) : new Map(),
+    ),
+    videoInput: mockDevices(
+      camera ? new Map([[mockCamera.deviceId, mockCamera]]) : new Map(),
+    ),
+    startUsingDeviceNames: (): void => {},
+    stopUsingDeviceNames: (): void => {},
+  };
 }
 
 describe("useMuteStates", () => {
@@ -124,14 +125,14 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext
+        <MediaDevicesContext.Provider
           value={mockMediaDevices({
             microphone: false,
             camera: false,
           })}
         >
           <TestComponent />
-        </MediaDevicesContext>
+        </MediaDevicesContext.Provider>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -143,9 +144,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext value={mockMediaDevices()}>
+        <MediaDevicesContext.Provider value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext>
+        </MediaDevicesContext.Provider>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
@@ -159,9 +160,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext value={mockMediaDevices()}>
+        <MediaDevicesContext.Provider value={mockMediaDevices()}>
           <TestComponent isJoined />
-        </MediaDevicesContext>
+        </MediaDevicesContext.Provider>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -178,9 +179,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext value={mockMediaDevices()}>
+        <MediaDevicesContext.Provider value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext>
+        </MediaDevicesContext.Provider>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -192,9 +193,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter initialEntries={["/room/?skipLobby=true"]}>
-        <MediaDevicesContext value={mockMediaDevices()}>
+        <MediaDevicesContext.Provider value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext>
+        </MediaDevicesContext.Provider>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -205,12 +206,7 @@ describe("useMuteStates", () => {
     const user = userEvent.setup();
     mockConfig();
     const noDevices = mockMediaDevices({ microphone: false, camera: false });
-    // Warm up these Observables before making further changes to the
-    // createMediaDevicesObserver mock
-    noDevices.audioInput.available$.subscribe(() => {}).unsubscribe();
-    noDevices.videoInput.available$.subscribe(() => {}).unsubscribe();
     const someDevices = mockMediaDevices();
-
     const ReappearanceTest: FC = () => {
       const [devices, setDevices] = useState(someDevices);
       const onConnectDevicesClick = useCallback(
@@ -224,13 +220,13 @@ describe("useMuteStates", () => {
 
       return (
         <MemoryRouter>
-          <MediaDevicesContext value={devices}>
+          <MediaDevicesContext.Provider value={devices}>
             <TestComponent />
             <button onClick={onConnectDevicesClick}>Connect devices</button>
             <button onClick={onDisconnectDevicesClick}>
               Disconnect devices
             </button>
-          </MediaDevicesContext>
+          </MediaDevicesContext.Provider>
         </MemoryRouter>
       );
     };

src/room/MuteStates.ts

@@ -14,14 +14,11 @@ import {
 } from "react";
 import { type IWidgetApiRequest } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { useObservableEagerState } from "observable-hooks";
 
 import {
-  type DeviceLabel,
-  type SelectedDevice,
-  type MediaDevice,
-} from "../state/MediaDevices";
-import { useMediaDevices } from "../MediaDevicesContext";
+  type MediaDeviceHandle,
+  useMediaDevices,
+} from "../livekit/MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import { ElementWidgetActions, widget } from "../widget";
 import { Config } from "../config/Config";
@@ -56,24 +53,24 @@ export interface MuteStates {
 }
 
 function useMuteState(
-  device: MediaDevice<DeviceLabel, SelectedDevice>,
+  device: MediaDeviceHandle,
   enabledByDefault: () => boolean,
 ): MuteState {
-  const available = useObservableEagerState(device.available$);
   const [enabled, setEnabled] = useReactiveState<boolean | undefined>(
     // Determine the default value once devices are actually connected
-    (prev) => prev ?? (available.size > 0 ? enabledByDefault() : undefined),
-    [available.size],
+    (prev) =>
+      prev ?? (device.available.size > 0 ? enabledByDefault() : undefined),
+    [device.available.size],
   );
   return useMemo(
     () =>
-      available.size === 0
+      device.available.size === 0
         ? deviceUnavailable
         : {
             enabled: enabled ?? false,
             setEnabled: setEnabled as Dispatch<SetStateAction<boolean>>,
           },
-    [available.size, enabled, setEnabled],
+    [device.available.size, enabled, setEnabled],
   );
 }
 

src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap

@@ -112,6 +112,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -262,6 +263,7 @@ exports[`should have a close button in widget mode 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -414,6 +416,7 @@ exports[`should render the error page with link back to home 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -566,6 +569,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -718,6 +722,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -868,6 +873,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -1015,6 +1021,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"

src/room/useSwitchCamera.ts

@@ -22,7 +22,7 @@ import {
 import { useObservable, useObservableEagerState } from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 
-import { useMediaDevices } from "../MediaDevicesContext";
+import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { platform } from "../Platform";
 import { useLatest } from "../useLatest";
 

src/settings/DeviceSelection.tsx

@@ -21,18 +21,15 @@ import {
   Separator,
 } from "@vector-im/compound-web";
 import { Trans, useTranslation } from "react-i18next";
-import { useObservableEagerState } from "observable-hooks";
 
 import {
-  type AudioOutputDeviceLabel,
-  type DeviceLabel,
-  type SelectedDevice,
-  type MediaDevice,
-} from "../state/MediaDevices";
+  EARPIECE_CONFIG_ID,
+  type MediaDeviceHandle,
+} from "../livekit/MediaDevicesContext";
 import styles from "./DeviceSelection.module.css";
 
 interface Props {
-  device: MediaDevice<DeviceLabel | AudioOutputDeviceLabel, SelectedDevice>;
+  device: MediaDeviceHandle;
   title: string;
   numberedLabel: (number: number) => string;
 }
@@ -44,8 +41,6 @@ export const DeviceSelection: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const groupId = useId();
-  const available = useObservableEagerState(device.available$);
-  const selectedId = useObservableEagerState(device.selected$)?.id;
   const onChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       device.select(e.target.value);
@@ -54,7 +49,7 @@ export const DeviceSelection: FC<Props> = ({
   );
 
   // There is no need to show the menu if there is no choice that can be made.
-  if (available.size <= 1) return null;
+  if (device.available.size <= 1) return null;
 
   return (
     <div className={styles.selection}>
@@ -69,7 +64,7 @@ export const DeviceSelection: FC<Props> = ({
       </Heading>
       <Separator className={styles.separator} />
       <div className={styles.options}>
-        {[...available].map(([id, label]) => {
+        {[...device.available].map(([id, label]) => {
           let labelText: ReactNode;
           switch (label.type) {
             case "name":
@@ -99,13 +94,20 @@ export const DeviceSelection: FC<Props> = ({
               break;
           }
 
+          let isSelected = false;
+          if (device.useAsEarpiece) {
+            isSelected = id === EARPIECE_CONFIG_ID;
+          } else {
+            isSelected = id === device.selectedId;
+          }
+
           return (
             <InlineField
               key={id}
               name={groupId}
               control={
                 <RadioControl
-                  checked={id === selectedId}
+                  checked={isSelected}
                   onChange={onChange}
                   value={id}
                 />

src/settings/SettingsModal.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, type ReactNode, useEffect, useState } from "react";
+import { type FC, type ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { type MatrixClient } from "matrix-js-sdk";
 import { Button, Root as Form, Separator } from "@vector-im/compound-web";
@@ -17,8 +17,11 @@ import styles from "./SettingsModal.module.css";
 import { type Tab, TabContainer } from "../tabs/Tabs";
 import { ProfileSettingsTab } from "./ProfileSettingsTab";
 import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
-import { iosDeviceMenu$ } from "../state/MediaDevices";
-import { useMediaDevices } from "../MediaDevicesContext";
+import {
+  useMediaDevices,
+  useMediaDeviceNames,
+  iosDeviceMenu$,
+} from "../livekit/MediaDevicesContext";
 import { widget } from "../widget";
 import {
   useSetting,
@@ -95,10 +98,7 @@ export const SettingsModal: FC<Props> = ({
   };
 
   const devices = useMediaDevices();
-  useEffect(() => {
-    if (open) devices.requestDeviceNames();
-  }, [open, devices]);
-
+  useMediaDeviceNames(devices, open);
   const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);
   const [soundVolumeRaw, setSoundVolumeRaw] = useState(soundVolume);
   const [showDeveloperSettingsTab] = useSetting(developerMode);

src/state/AppViewModel.ts

@@ -1,19 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { MediaDevices } from "./MediaDevices";
-import { ViewModel } from "./ViewModel";
-
-/**
- * The top-level state holder for the application.
- */
-export class AppViewModel extends ViewModel {
-  public readonly mediaDevices = new MediaDevices(this.scope);
-
-  // TODO: Move more application logic here. The CallViewModel, at the very
-  // least, ought to be accessible from this object.
-}

src/state/MediaDevices.ts

@@ -1,366 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  combineLatest,
-  filter,
-  map,
-  merge,
-  of,
-  pairwise,
-  startWith,
-  Subject,
-  switchMap,
-  type Observable,
-} from "rxjs";
-import { createMediaDeviceObserver } from "@livekit/components-core";
-import { logger } from "matrix-js-sdk/lib/logger";
-
-import {
-  audioInput as audioInputSetting,
-  audioOutput as audioOutputSetting,
-  videoInput as videoInputSetting,
-  alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
-} from "../settings/settings";
-import { type ObservableScope } from "./ObservableScope";
-import {
-  outputDevice$ as controlledOutputSelection$,
-  availableOutputDevices$ as controlledAvailableOutputDevices$,
-} from "../controls";
-import { getUrlParams } from "../UrlParams";
-
-// This hardcoded id is used in EX ios! It can only be changed in coordination with
-// the ios swift team.
-const EARPIECE_CONFIG_ID = "earpiece-id";
-
-export type DeviceLabel =
-  | { type: "name"; name: string }
-  | { type: "number"; number: number }
-  | { type: "default"; name: string | null };
-
-export type AudioOutputDeviceLabel = DeviceLabel | { type: "earpiece" };
-
-export interface SelectedDevice {
-  id: string;
-}
-
-export interface SelectedAudioInputDevice extends SelectedDevice {
-  /**
-   * Emits whenever we think that this audio input device has logically changed
-   * to refer to a different hardware device.
-   */
-  hardwareDeviceChange$: Observable<void>;
-}
-
-export interface SelectedAudioOutputDevice extends SelectedDevice {
-  /**
-   * Whether this device is a "virtual earpiece" device. If so, we should output
-   * on a single channel of the device at a reduced volume.
-   */
-  virtualEarpiece: boolean;
-}
-
-export interface MediaDevice<Label, Selected> {
-  /**
-   * A map from available device IDs to labels.
-   */
-  available$: Observable<Map<string, Label>>;
-  /**
-   * The selected device.
-   */
-  selected$: Observable<Selected | undefined>;
-  /**
-   * Selects a new device.
-   */
-  select(id: string): void;
-}
-
-/**
- * An observable that represents if we should display the devices menu for iOS.
- * This implies the following
- *  - hide any input devices (they do not work anyhow on ios)
- *  - Show a button to show the native output picker instead.
- *  - Only show the earpiece toggle option if the earpiece is available:
- *   `availableOutputDevices$.includes((d)=>d.forEarpiece)`
- */
-export const iosDeviceMenu$ = navigator.userAgent.includes("iPhone")
-  ? of(true)
-  : alwaysShowIphoneEarpieceSetting.value$;
-
-function availableRawDevices$(
-  kind: MediaDeviceKind,
-  usingNames$: Observable<boolean>,
-  scope: ObservableScope,
-): Observable<MediaDeviceInfo[]> {
-  return usingNames$.pipe(
-    switchMap((usingNames) =>
-      createMediaDeviceObserver(
-        kind,
-        (e) => logger.error("Error creating MediaDeviceObserver", e),
-        usingNames,
-      ),
-    ),
-    startWith([]),
-    scope.state(),
-  );
-}
-
-function buildDeviceMap(
-  availableRaw: MediaDeviceInfo[],
-): Map<string, DeviceLabel> {
-  return new Map<string, DeviceLabel>(
-    availableRaw.map((d, i) => [
-      d.deviceId,
-      d.label
-        ? { type: "name", name: d.label }
-        : { type: "number", number: i + 1 },
-    ]),
-  );
-}
-
-function selectDevice$<Label>(
-  available$: Observable<Map<string, Label>>,
-  preferredId$: Observable<string | undefined>,
-): Observable<string | undefined> {
-  return combineLatest([available$, preferredId$], (available, preferredId) => {
-    if (available.size) {
-      // If the preferred device is available, use it. Or if every available
-      // device ID is falsy, the browser is probably just being paranoid about
-      // fingerprinting and we should still try using the preferred device.
-      // Worst case it is not available and the browser will gracefully fall
-      // back to some other device for us when requesting the media stream.
-      // Otherwise, select the first available device.
-      return (preferredId !== undefined && available.has(preferredId)) ||
-        (available.size === 1 && available.has(""))
-        ? preferredId
-        : available.keys().next().value;
-    }
-    return undefined;
-  });
-}
-
-class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
-  private readonly availableRaw$: Observable<MediaDeviceInfo[]> =
-    availableRawDevices$("audioinput", this.usingNames$, this.scope);
-
-  public readonly available$ = this.availableRaw$.pipe(
-    map(buildDeviceMap),
-    this.scope.state(),
-  );
-
-  public readonly selected$ = selectDevice$(
-    this.available$,
-    audioInputSetting.value$,
-  ).pipe(
-    map((id) =>
-      id === undefined
-        ? undefined
-        : {
-            id,
-            // We can identify when the hardware device has changed by watching for
-            // changes in the group ID
-            hardwareDeviceChange$: this.availableRaw$.pipe(
-              map((devices) => devices.find((d) => d.deviceId === id)?.groupId),
-              pairwise(),
-              filter(([before, after]) => before !== after),
-              map(() => undefined),
-            ),
-          },
-    ),
-    this.scope.state(),
-  );
-
-  public select(id: string): void {
-    audioInputSetting.setValue(id);
-  }
-
-  public constructor(
-    private readonly usingNames$: Observable<boolean>,
-    private readonly scope: ObservableScope,
-  ) {}
-}
-
-class AudioOutput
-  implements MediaDevice<AudioOutputDeviceLabel, SelectedAudioOutputDevice>
-{
-  public readonly available$ = availableRawDevices$(
-    "audiooutput",
-    this.usingNames$,
-    this.scope,
-  ).pipe(
-    map((availableRaw) => {
-      const available = buildDeviceMap(availableRaw);
-      // Create a virtual default audio output for browsers that don't have one.
-      // Its device ID must be the empty string because that's what setSinkId
-      // recognizes.
-      if (available.size && !available.has("") && !available.has("default"))
-        available.set("", {
-          type: "default",
-          name: availableRaw[0]?.label || null,
-        });
-      // 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;
-    }),
-    this.scope.state(),
-  );
-
-  public readonly selected$ = selectDevice$(
-    this.available$,
-    audioOutputSetting.value$,
-  ).pipe(
-    map((id) =>
-      id === undefined
-        ? undefined
-        : {
-            id,
-            virtualEarpiece: false,
-          },
-    ),
-    this.scope.state(),
-  );
-
-  public select(id: string): void {
-    audioOutputSetting.setValue(id);
-  }
-
-  public constructor(
-    private readonly usingNames$: Observable<boolean>,
-    private readonly scope: ObservableScope,
-  ) {}
-}
-
-class ControlledAudioOutput
-  implements MediaDevice<AudioOutputDeviceLabel, SelectedAudioOutputDevice>
-{
-  public readonly available$ = combineLatest(
-    [controlledAvailableOutputDevices$.pipe(startWith([])), iosDeviceMenu$],
-    (availableRaw, iosDeviceMenu) => {
-      const available = new Map<string, AudioOutputDeviceLabel>(
-        availableRaw.map(
-          ({ id, name, isEarpiece, isSpeaker /*,isExternalHeadset*/ }) => {
-            let deviceLabel: AudioOutputDeviceLabel;
-            // if (isExternalHeadset) // Do we want this?
-            if (isEarpiece) deviceLabel = { type: "earpiece" };
-            else if (isSpeaker) deviceLabel = { type: "default", name };
-            else deviceLabel = { type: "name", name };
-            return [id, deviceLabel];
-          },
-        ),
-      );
-
-      // Create a virtual earpiece device in case a non-earpiece device is
-      // designated for this purpose
-      if (iosDeviceMenu && availableRaw.some((d) => d.forEarpiece))
-        available.set(EARPIECE_CONFIG_ID, { type: "earpiece" });
-
-      return available;
-    },
-  ).pipe(this.scope.state());
-
-  private readonly deviceSelection$ = new Subject<string>();
-
-  public select(id: string): void {
-    this.deviceSelection$.next(id);
-  }
-
-  public readonly selected$ = merge(
-    this.deviceSelection$,
-    controlledOutputSelection$,
-  ).pipe(
-    startWith<string | undefined>(undefined),
-    map((id) =>
-      id === undefined
-        ? undefined
-        : { id, virtualEarpiece: id === EARPIECE_CONFIG_ID },
-    ),
-    this.scope.state(),
-  );
-
-  public constructor(private readonly scope: ObservableScope) {
-    this.selected$.subscribe((device) => {
-      // Let the hosting application know which output device has been selected.
-      // This information is probably only of interest if the earpiece mode has
-      // been selected - for example, Element X iOS listens to this to determine
-      // whether it should enable the proximity sensor.
-      if (device !== undefined) {
-        logger.info("[controlled-output] setAudioDeviceSelect called:", device);
-        window.controls.onAudioDeviceSelect?.(device.id);
-        // Also invoke the deprecated callback for backward compatibility
-        window.controls.onOutputDeviceSelect?.(device.id);
-      }
-    });
-  }
-}
-
-class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
-  public readonly available$ = availableRawDevices$(
-    "videoinput",
-    this.usingNames$,
-    this.scope,
-  ).pipe(map(buildDeviceMap));
-
-  public readonly selected$ = selectDevice$(
-    this.available$,
-    videoInputSetting.value$,
-  ).pipe(
-    map((id) => (id === undefined ? undefined : { id })),
-    this.scope.state(),
-  );
-
-  public select(id: string): void {
-    videoInputSetting.setValue(id);
-  }
-
-  public constructor(
-    private readonly usingNames$: Observable<boolean>,
-    private readonly scope: ObservableScope,
-  ) {}
-}
-
-export class MediaDevices {
-  private readonly deviceNamesRequest$ = new Subject<void>();
-  /**
-   * Requests that the media devices be populated with the names of each
-   * available device, rather than numbered identifiers. This may invoke a
-   * permissions pop-up, so it should only be called when there is a clear user
-   * intent to view the device list.
-   */
-  public requestDeviceNames(): void {
-    this.deviceNamesRequest$.next();
-  }
-
-  // Start using device names as soon as requested. This will cause LiveKit to
-  // briefly request device permissions and acquire media streams for each
-  // device type while calling `enumerateDevices`, which is what browsers want
-  // you to do to receive device names in lieu of a more explicit permissions
-  // API. This flag never resets to false, because once permissions are granted
-  // the first time, the user won't be prompted again until reload of the page.
-  private readonly usingNames$ = this.deviceNamesRequest$.pipe(
-    map(() => true),
-    startWith(false),
-    this.scope.state(),
-  );
-
-  public readonly audioInput: MediaDevice<
-    DeviceLabel,
-    SelectedAudioInputDevice
-  > = new AudioInput(this.usingNames$, this.scope);
-
-  public readonly audioOutput: MediaDevice<
-    AudioOutputDeviceLabel,
-    SelectedAudioOutputDevice
-  > = getUrlParams().controlledAudioDevices
-    ? new ControlledAudioOutput(this.scope)
-    : new AudioOutput(this.usingNames$, this.scope);
-
-  public readonly videoInput: MediaDevice<DeviceLabel, SelectedDevice> =
-    new VideoInput(this.usingNames$, this.scope);
-
-  public constructor(private readonly scope: ObservableScope) {}
-}

src/state/MediaViewModel.ts

@@ -430,6 +430,8 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
 }
 
 /**
+        },
+        },
  * The local participant's user media.
  */
 export class LocalUserMediaViewModel extends BaseUserMediaViewModel {

src/useAudioContext.test.tsx

@@ -10,12 +10,10 @@ import { type FC } from "react";
 import { render } from "@testing-library/react";
 import userEvent, { type UserEvent } from "@testing-library/user-event";
 import { BrowserRouter } from "react-router-dom";
-import { of } from "rxjs";
 
-import { MediaDevicesContext } from "./MediaDevicesContext";
+import { deviceStub, MediaDevicesContext } from "./livekit/MediaDevicesContext";
 import { useAudioContext } from "./useAudioContext";
 import { soundEffectVolume as soundEffectVolumeSetting } from "./settings/settings";
-import { mockMediaDevices } from "./utils/test";
 
 const staticSounds = Promise.resolve({
   aSound: new ArrayBuffer(0),
@@ -104,38 +102,36 @@ afterEach(() => {
 });
 
 test("can play a single sound", async () => {
-  const { findByText } = render(
-    <MediaDevicesContext value={mockMediaDevices({})}>
-      <TestComponentWrapper />
-    </MediaDevicesContext>,
-  );
+  const { findByText } = render(<TestComponentWrapper />);
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.createBufferSource).toHaveBeenCalledOnce();
 });
 
 test("will ignore sounds that are not registered", async () => {
-  const { findByText } = render(
-    <MediaDevicesContext value={mockMediaDevices({})}>
-      <TestComponentWrapper />
-    </MediaDevicesContext>,
-  );
+  const { findByText } = render(<TestComponentWrapper />);
   await user.click(await findByText("Invalid sound"));
   expect(testAudioContext.createBufferSource).not.toHaveBeenCalled();
 });
 
 test("will use the correct device", () => {
   render(
-    <MediaDevicesContext
-      value={mockMediaDevices({
+    <MediaDevicesContext.Provider
+      value={{
+        audioInput: deviceStub,
         audioOutput: {
-          available$: of(new Map<never, never>()),
-          selected$: of({ id: "chosen-device", virtualEarpiece: false }),
+          selectedId: "chosen-device",
+          selectedGroupId: "",
+          available: new Map(),
           select: () => {},
+          useAsEarpiece: false,
         },
-      })}
+        videoInput: deviceStub,
+        startUsingDeviceNames: () => {},
+        stopUsingDeviceNames: () => {},
+      }}
     >
       <TestComponentWrapper />
-    </MediaDevicesContext>,
+    </MediaDevicesContext.Provider>,
   );
   expect(testAudioContext.createBufferSource).not.toHaveBeenCalled();
   expect(testAudioContext.setSinkId).toHaveBeenCalledWith("chosen-device");
@@ -143,11 +139,7 @@ test("will use the correct device", () => {
 
 test("will use the correct volume level", async () => {
   soundEffectVolumeSetting.setValue(0.33);
-  const { findByText } = render(
-    <MediaDevicesContext value={mockMediaDevices({})}>
-      <TestComponentWrapper />
-    </MediaDevicesContext>,
-  );
+  const { findByText } = render(<TestComponentWrapper />);
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.gain.gain.setValueAtTime).toHaveBeenCalledWith(
     0.33,
@@ -158,17 +150,23 @@ test("will use the correct volume level", async () => {
 
 test("will use the pan if earpiece is selected", async () => {
   const { findByText } = render(
-    <MediaDevicesContext
-      value={mockMediaDevices({
+    <MediaDevicesContext.Provider
+      value={{
+        audioInput: deviceStub,
         audioOutput: {
-          available$: of(new Map<never, never>()),
-          selected$: of({ id: "chosen-device", virtualEarpiece: true }),
+          selectedId: "chosen-device",
+          selectedGroupId: "",
+          available: new Map(),
           select: () => {},
+          useAsEarpiece: true,
         },
-      })}
+        videoInput: deviceStub,
+        startUsingDeviceNames: () => {},
+        stopUsingDeviceNames: () => {},
+      }}
     >
       <TestComponentWrapper />
-    </MediaDevicesContext>,
+    </MediaDevicesContext.Provider>,
   );
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.pan.pan.setValueAtTime).toHaveBeenCalledWith(1, 0);

src/useAudioContext.tsx

@@ -7,13 +7,15 @@ Please see LICENSE in the repository root for full details.
 
 import { logger } from "matrix-js-sdk/lib/logger";
 import { useState, useEffect } from "react";
-import { useObservableEagerState } from "observable-hooks";
 
 import {
   soundEffectVolume as soundEffectVolumeSetting,
   useSetting,
 } from "./settings/settings";
-import { useEarpieceAudioConfig, useMediaDevices } from "./MediaDevicesContext";
+import {
+  useEarpieceAudioConfig,
+  useMediaDevices,
+} from "./livekit/MediaDevicesContext";
 import { type PrefetchedSounds } from "./soundUtils";
 import { useUrlParams } from "./UrlParams";
 import * as controls from "./controls";
@@ -71,6 +73,8 @@ export function useAudioContext<S extends string>(
   props: Props<S>,
 ): UseAudioContext<S> | null {
   const [soundEffectVolume] = useSetting(soundEffectVolumeSetting);
+  const { audioOutput } = useMediaDevices();
+  const { controlledAudioDevices } = useUrlParams();
   const [audioContext, setAudioContext] = useState<AudioContext>();
   const [audioBuffers, setAudioBuffers] = useState<Record<S, AudioBuffer>>();
 
@@ -107,11 +111,6 @@ export function useAudioContext<S extends string>(
     };
   }, [props.sounds, props.latencyHint]);
 
-  const audioOutputId = useObservableEagerState(
-    useMediaDevices().audioOutput.selected$,
-  )?.id;
-  const { controlledAudioDevices } = useUrlParams();
-
   // Update the sink ID whenever we change devices.
   useEffect(() => {
     if (
@@ -121,11 +120,11 @@ export function useAudioContext<S extends string>(
     ) {
       // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/setSinkId
       // @ts-expect-error - setSinkId doesn't exist yet in types, maybe because it's not supported everywhere.
-      audioContext.setSinkId(audioOutputId).catch((ex) => {
+      audioContext.setSinkId(audioOutput.selectedId).catch((ex) => {
         logger.warn("Unable to change sink for audio context", ex);
       });
     }
-  }, [audioContext, audioOutputId, controlledAudioDevices]);
+  }, [audioContext, audioOutput.selectedId, controlledAudioDevices]);
   const { pan: earpiecePan, volume: earpieceVolume } = useEarpieceAudioConfig();
 
   // Don't return a function until we're ready.

src/utils/errors.ts

@@ -13,7 +13,6 @@ export enum ErrorCode {
    */
   MISSING_MATRIX_RTC_FOCUS = "MISSING_MATRIX_RTC_FOCUS",
   CONNECTION_LOST_ERROR = "CONNECTION_LOST_ERROR",
-  MEMBERSHIP_MANAGER_UNRECOVERABLE = "MEMBERSHIP_MANAGER_UNRECOVERABLE",
   /** LiveKit indicates that the server has hit its track limits */
   INSUFFICIENT_CAPACITY_ERROR = "INSUFFICIENT_CAPACITY_ERROR",
   E2EE_NOT_SUPPORTED = "E2EE_NOT_SUPPORTED",
@@ -25,7 +24,6 @@ export enum ErrorCategory {
   /** Calling is not supported, server misconfigured (JWT service missing, no MSC support ...)*/
   CONFIGURATION_ISSUE = "CONFIGURATION_ISSUE",
   NETWORK_CONNECTIVITY = "NETWORK_CONNECTIVITY",
-  RTC_SESSION_FAILURE = "RTC_SESSION_FAILURE",
   CLIENT_CONFIGURATION = "CLIENT_CONFIGURATION",
   UNKNOWN = "UNKNOWN",
   // SYSTEM_FAILURE / FEDERATION_FAILURE ..
@@ -84,11 +82,6 @@ export class ConnectionLostError extends ElementCallError {
   }
 }
 
-export class RTCSessionError extends ElementCallError {
-  public constructor(code: ErrorCode, message: string) {
-    super("RTCSession Error", code, ErrorCategory.RTC_SESSION_FAILURE, message);
-  }
-}
 export class E2EENotSupportedError extends ElementCallError {
   public constructor() {
     super(
@@ -106,7 +99,7 @@ export class UnknownCallError extends ElementCallError {
       t("error.generic"),
       ErrorCode.UNKNOWN_ERROR,
       ErrorCategory.UNKNOWN,
-      error.message,
+      undefined,
       // Properly set it as a cause for a better reporting on sentry
       error,
     );

src/utils/observable.ts

@@ -38,18 +38,3 @@ export function accumulate<State, Event>(
   return (events$: Observable<Event>): Observable<State> =>
     events$.pipe(scan(update, initial), startWith(initial));
 }
-
-/**
- * Reads the current value of a state Observable without reacting to future
- * changes.
- *
- * This function exists to help with certain cases of bridging Observables into
- * React, where an initial value is needed. You should never use it to create an
- * Observable derived from another Observable; use reactive operators instead.
- */
-export function getValue<T>(state$: Observable<T>): T {
-  let value: T | typeof nothing = nothing;
-  state$.subscribe((x) => (value = x)).unsubscribe();
-  if (value === nothing) throw new Error("Not a state Observable");
-  return value;
-}

src/utils/test.ts

@@ -46,7 +46,6 @@ import {
   type ResolvedConfigOptions,
 } from "../config/ConfigOptions";
 import { Config } from "../config/Config";
-import { type MediaDevices } from "../state/MediaDevices";
 
 export function withFakeTimers(continuation: () => void): void {
   vi.useFakeTimers();
@@ -333,18 +332,3 @@ export const mockTrack = (identity: string): TrackReference =>
     track: {},
     source: {},
   }) as unknown as TrackReference;
-
-export const deviceStub = {
-  available$: of(new Map<never, never>()),
-  selected$: of(undefined),
-  select(): void {},
-};
-
-export function mockMediaDevices(data: Partial<MediaDevices>): MediaDevices {
-  return {
-    audioInput: deviceStub,
-    audioOutput: deviceStub,
-    videoInput: deviceStub,
-    ...data,
-  } as MediaDevices;
-}

yarn.lock

@@ -2717,8 +2717,8 @@ __metadata:
   linkType: hard
 
 "@livekit/components-react@npm:^2.0.0":
-  version: 2.9.10
-  resolution: "@livekit/components-react@npm:2.9.10"
+  version: 2.9.9
+  resolution: "@livekit/components-react@npm:2.9.9"
   dependencies:
     "@livekit/components-core": "npm:0.12.7"
     clsx: "npm:2.1.1"
@@ -2732,7 +2732,7 @@ __metadata:
   peerDependenciesMeta:
     "@livekit/krisp-noise-filter":
       optional: true
-  checksum: 10c0/86fc78d7b2d97540c43592435a65ac38b43fca9923af000aa90d884bd35794e18d202b7d915f44b63087abea5c94c37d6980772ed722226904262b2cddbec107
+  checksum: 10c0/7b3dad637b0bfd91c5636b1bb2c72ecde6136a4222d552690a3b3088c6fe4a28fbc30d2e8fec643c7e90316d8419393e7636001d5d192f5f1c9254df1307df0d
   languageName: node
   linkType: hard
 
@@ -2743,12 +2743,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@livekit/protocol@npm:1.39.2":
-  version: 1.39.2
-  resolution: "@livekit/protocol@npm:1.39.2"
+"@livekit/protocol@npm:1.38.0":
+  version: 1.38.0
+  resolution: "@livekit/protocol@npm:1.38.0"
   dependencies:
     "@bufbuild/protobuf": "npm:^1.10.0"
-  checksum: 10c0/ce5f3ee3ab10ea1578fb40c1d16224879e48143a1bbbfb5e36a080fa5468892eaccfe21aad1166b5443f67e2aa54236facafd4b3235e41b331e91ca405379368
+  checksum: 10c0/ca64d4f984853054ff60574730b08a761afcd3bdc084e5218663e54b0e7f395aa2022d9d15d982fa094bbc0179cb19ef6a96ec74b1aa3265d118a85d1a4fde33
   languageName: node
   linkType: hard
 
@@ -5596,8 +5596,8 @@ __metadata:
   linkType: hard
 
 "@vector-im/compound-design-tokens@npm:^4.0.0":
-  version: 4.0.4
-  resolution: "@vector-im/compound-design-tokens@npm:4.0.4"
+  version: 4.0.3
+  resolution: "@vector-im/compound-design-tokens@npm:4.0.3"
   peerDependencies:
     "@types/react": "*"
     react: ^17 || ^18 || ^19.0.0
@@ -5606,13 +5606,13 @@ __metadata:
       optional: true
     react:
       optional: true
-  checksum: 10c0/e6ff6a956082f4a288237e7c7e60044319d7195cad0d5175dad7115270119f80c43252520db8f1a514b762f92dd5b7059c1217d7ccbe81daf71c426cbfeaf3dd
+  checksum: 10c0/4e32e46b4f0afef463ab7827c7bd1e0369bf83bab2cf86f182a5052b409c8b64e6fea84f818eee4d3f10e51be996e550d2b2dc664d7444f6685502f517d9a754
   languageName: node
   linkType: hard
 
-"@vector-im/compound-web@npm:^8.0.0":
-  version: 8.1.2
-  resolution: "@vector-im/compound-web@npm:8.1.2"
+"@vector-im/compound-web@npm:^7.12.0":
+  version: 7.12.0
+  resolution: "@vector-im/compound-web@npm:7.12.0"
   dependencies:
     "@floating-ui/react": "npm:^0.27.0"
     "@radix-ui/react-context-menu": "npm:^2.2.1"
@@ -5632,7 +5632,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/4d16794f20b5577bb32442a8261ccad87d83ef91d9212e4ff12af90c4423790859b9a712764211c751079d384bf4dc88522961e008a9bd9f46653fdd75cdc195
+  checksum: 10c0/e5546a5b8ca1a5e718f31acf9a515af4b76877d5526f2b7f5d8fb1fa9382a9a375fc0dd7fc6d3f6e9fc2e2bb0109ca99fc2a63552fc5c33bfa86e33f96204931
   languageName: node
   linkType: hard
 
@@ -7466,7 +7466,7 @@ __metadata:
     "@typescript-eslint/parser": "npm:^8.31.0"
     "@use-gesture/react": "npm:^10.2.11"
     "@vector-im/compound-design-tokens": "npm:^4.0.0"
-    "@vector-im/compound-web": "npm:^8.0.0"
+    "@vector-im/compound-web": "npm:^7.12.0"
     "@vitejs/plugin-react": "npm:^4.0.1"
     "@vitest/coverage-v8": "npm:^3.0.0"
     babel-plugin-transform-vite-meta-env: "npm:^1.0.3"
@@ -9907,11 +9907,11 @@ __metadata:
   linkType: hard
 
 "livekit-client@npm:^2.13.0":
-  version: 2.13.8
-  resolution: "livekit-client@npm:2.13.8"
+  version: 2.13.4
+  resolution: "livekit-client@npm:2.13.4"
   dependencies:
     "@livekit/mutex": "npm:1.1.1"
-    "@livekit/protocol": "npm:1.39.2"
+    "@livekit/protocol": "npm:1.38.0"
     events: "npm:^3.3.0"
     loglevel: "npm:^1.9.2"
     sdp-transform: "npm:^2.15.0"
@@ -9921,7 +9921,7 @@ __metadata:
     webrtc-adapter: "npm:^9.0.1"
   peerDependencies:
     "@types/dom-mediacapture-record": ^1
-  checksum: 10c0/bf1ba10891ab5beb44a30016c3923a635d0bb637d604280686b98ea366794985eec0a4a294fb1478a8a68ac90ba8ab0ea5c1e64986603d8ce53019399994385b
+  checksum: 10c0/0d265e03f3ec50ab847a6127e2a3af4701d4d86feb614bac08a7b0e847f122ddd571ed5a90240a7ac0fbc10d025804e94a0919c1705fc93b3091ff3991f58a0f
   languageName: node
   linkType: hard