Simplify our context providers

React 19 lets you omit the '.Provider' bit.

.github/workflows/blocked.yaml

@@ -1,7 +1,7 @@
 name: Prevent blocked
 on:
   pull_request_target:
-    types: [opened, labeled, unlabeled]
+    types: [opened, labeled, unlabeled, synchronize]
 jobs:
   prevent-blocked:
     name: Prevent blocked

.github/workflows/build-element-call.yaml

@@ -9,6 +9,11 @@ on:
         type: string # This would ideally be a `choice` type, but that isn't supported yet
         description: The package type to be built. Must be one of 'full' or 'embedded'
         required: true
+      build_mode:
+        type: string # This would ideally be a `choice` type, but that isn't supported yet
+        description: The build mode for vite. Must be either 'development' or 'production'
+        required: false
+        default: production
     secrets:
       SENTRY_ORG:
         required: true
@@ -37,20 +42,8 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         run: "yarn install --immutable"
-      - name: Build full version
-        if: ${{ inputs.package == 'full' }}
-        run: "yarn run build:full"
-        env:
-          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-          SENTRY_URL: ${{ secrets.SENTRY_URL }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-          VITE_APP_VERSION: ${{ inputs.vite_app_version }}
-          NODE_OPTIONS: "--max-old-space-size=4096"
-      - name: Build embedded
-        if: ${{ inputs.package == 'embedded' }}
-        run: "yarn run build:embedded"
+      - name: Build Element Call
+        run: ${{ format('yarn run build:{0}:{1}', inputs.package, inputs.build_mode) }}
         env:
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}

.github/workflows/build.yaml

@@ -14,6 +14,7 @@ jobs:
     with:
       package: full
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
+      build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
@@ -61,6 +62,7 @@ jobs:
     with:
       package: embedded
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
+      build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}

.github/workflows/test.yaml

@@ -30,7 +30,7 @@ jobs:
           fail_ci_if_error: true
   playwright:
     name: Run end-to-end tests
-    timeout-minutes: 10
+    timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
@@ -46,11 +46,12 @@ jobs:
         run: yarn playwright install --with-deps
       - name: Run backend components
         run: |
-          docker compose -f playwright-backend-docker-compose.yml up -d
+          docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml pull
+          docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up -d
           docker ps
-      - name: Copy config file
-        run: cp config/config.devenv.json public/config.json
       - name: Run Playwright tests
+        env:
+          USE_DOCKER: 1
         run: yarn playwright test
       - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         if: ${{ !cancelled() }}

Dockerfile

@@ -6,7 +6,7 @@ COPY ./dist /dist
 WORKDIR /dist/assets
 RUN gzip -k ../index.html *.js *.map *.css *.wasm *-app-*.json 
 
-FROM nginxinc/nginx-unprivileged:alpine
+FROM nginxinc/nginx-unprivileged:alpine-slim
 
 COPY --from=builder ./dist /app
 

backend/dev_nginx.conf

@@ -43,6 +43,11 @@ server {
 # MatrixRTC reverse proxy
 # - MatrixRTC Authorization Service
 # - LiveKit SFU websocket signaling connection
+upstream jwt-auth-services {
+    server auth-server:6080;
+    server host.docker.internal:6080;
+}
+
 server {
     listen                  80;
     listen                  [::]:80;
@@ -62,8 +67,9 @@ server {
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
 
-      # JWT Service running at port 8080
-      proxy_pass http://auth-server:8080/;
+      # JWT Service running at port 6080
+      proxy_pass http://jwt-auth-services/;
+    
     }
 
     location ^~ /livekit/sfu/ {

config/config.devenv.json

@@ -8,5 +8,12 @@
   "features": {
     "feature_use_device_session_member_events": true
   },
-  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf"
+  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
+  "matrix_rtc_session": {
+    "wait_for_key_rotation_ms": 3000,
+    "membership_event_expiry_ms": 180000000,
+    "delayed_leave_event_delay_ms": 18000,
+    "delayed_leave_event_restart_ms": 4000,
+    "network_error_retry_ms": 4000
+  }
 }

config/config.sample.json

@@ -11,5 +11,12 @@
   "features": {
     "feature_use_device_session_member_events": true
   },
-  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf"
+  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
+  "matrix_rtc_session": {
+    "wait_for_key_rotation_ms": 3000,
+    "membership_event_expiry_ms": 180000000,
+    "delayed_leave_event_delay_ms": 18000,
+    "delayed_leave_event_restart_ms": 4000,
+    "network_error_retry_ms": 4000
+  }
 }

config/config_netlify_preview.json

@@ -5,6 +5,14 @@
       "server_name": "call-unstable.ems.host"
     }
   },
+  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
+  "matrix_rtc_session": {
+    "wait_for_key_rotation_ms": 3000,
+    "membership_event_expiry_ms": 180000000,
+    "delayed_leave_event_delay_ms": 18000,
+    "delayed_leave_event_restart_ms": 4000,
+    "network_error_retry_ms": 4000
+  },
   "posthog": {
     "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",
     "api_host": "https://posthog-element-call.element.io"

dev-backend-docker-compose.yml

@@ -4,9 +4,10 @@ networks:
 services:
   auth-service:
     image: ghcr.io/element-hq/lk-jwt-service:latest-ci
+    pull_policy: always
     hostname: auth-server
     environment:
-      - LK_JWT_PORT=8080
+      - LIVEKIT_JWT_PORT=6080
       - LIVEKIT_URL=wss://matrix-rtc.m.localhost/livekit/sfu
       - LIVEKIT_KEY=devkey
       - LIVEKIT_SECRET=secret
@@ -18,7 +19,7 @@ services:
         condition: on-failure
     ports:
       # HOST_PORT:CONTAINER_PORT
-      - 8080:8080
+      - 6080:6080
     networks:
       - ecbackend
 

docs/controls.md

@@ -1,7 +1,25 @@
 # Global JS controls
 
-A few aspects of Element Call's interface can be controlled through a global API on the `window`:
+A few aspects of Element Call's interface can be controlled through a global API on the `window`.
+
+## Picture-in-picture
 
 - `controls.canEnterPip(): boolean` Determines whether it's possible to enter picture-in-picture mode.
 - `controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call.
 - `controls.disablePip(): void` Takes the call interface out of picture-in-picture mode, restoring it to its natural display mode. Throws if not in a call.
+
+## Audio devices
+
+On mobile platforms (iOS, Android), web views do not reliably support selecting audio output devices such as the main speaker, earpiece, or headset. To address this limitation, the following functions allow the hosting application (e.g., Element Web, Element X) to manage audio devices via exposed JavaScript interfaces. These functions must be enabled using the URL parameter `controlledAudioDevices` to take effect.
+
+- `controls.setAvailableAudioDevices(devices: { id: string, name: string, forEarpiece?: boolean, isEarpiece?: boolean isSpeaker?: boolean, isExternalHeadset?, boolean; }[]): void` Sets the list of available audio outputs. `forEarpiece` is used on iOS only.
+  It flags the device that should be used if the user selects earpiece mode. This should be the main stereo loudspeaker of the device.
+- `controls.onAudioDeviceSelect: ((id: string) => void) | undefined` Callback called whenever the user or application selects a new audio output.
+- `controls.setAudioDevice(id: string): void` Sets the selected audio device in Element Call's menu. This should be used if the OS decides to automatically switch to Bluetooth, for example.
+- `controls.setAudioEnabled(enabled: boolean)` Enables/disables all audio output from the application. Output is enabled by default.
+- `showNativeAudioDevicePicker: (() => void) | undefined`. Callback called whenever the user presses the output button in the settings menu.
+  This button is only shown on iOS. (`userAgent.includes("iPhone")`)
+- `controls.onAudioPlaybackStarted: ((id: string) => void) | undefined`: This will be called the first time we start
+  playing audio in the webview. It can be helpful to do device setup on the native app when the webviews audio is ready.
+  In particular android is using it to setup the output channel so that the call volume can
+  be controlled by the hardware volume rocker.

docs/self-hosting.md

@@ -255,13 +255,17 @@ self-hosters and developers working with Element Call.
 
 - [How to resolve stuck MatrixRTC calls](https://sspaeth.de/2025/02/how-to-resolve-stuck-matrixrtc-calls/)
 
-## 🛠️ How-Tos & Tutorials
+## 📝 How-Tos & Tutorials
 
 - [MatrixRTC aka Element-call setup (Geek warning)](https://sspaeth.de/2024/11/sfu/)
 - [MatrixRTC with Synology Container Manager (Docker)](https://ztfr.de/matrixrtc-with-synology-container-manager-docker/)
 - [Encrypted & Scalable Video Calls: How to deploy an Element Call backend with Synapse Using Docker-Compose](https://willlewis.co.uk/blog/posts/deploy-element-call-backend-with-synapse-and-docker-compose/)
 - [Element Call einrichten: Verschlüsselte Videoanrufe mit Element X und Matrix Synapse](https://www.cleveradmin.de/blog/2025/04/matrixrtc-element-call-backend-einrichten/)
 
+## 🛠️ Tools
+
+- [A Matrix server sanity tester including tests for proper MatrixRTC setup](https://codeberg.org/spaetz/testmatrix)
+
 ## 🤝 Want to Contribute?
 
 Have a guide or blog post you'd like to share? Open a

docs/url-params.md

@@ -63,6 +63,7 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `lang`                                                  | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                 | No                                                                                                | No                           | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
 | `password`                                              |                                                                                                      | No                                                                                                | No                           | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
 | `perParticipantE2EE`                                    | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
+| `controlledAudioDevices`                                | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the [global JS controls for audio devices](./controls.md#audio-devices) should be enabled, allowing the list of audio devices to be controlled by the app hosting Element Call.                                                                                                                                                                                                             |
 | `roomId`                                                | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids)                                 | Yes                                                                                               | No                           | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. |
 | `showControls`                                          | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Displays controls like mute, screen-share, invite, and hangup buttons during a call.                                                                                                                                                                                                                                                                                                                |
 | `skipLobby` (deprecated: use `intent` instead)          | `true` or `false`                                                                                    | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false`      | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |

embedded/android/gradle/libs.versions.toml

@@ -2,11 +2,11 @@
 # https://docs.gradle.org/current/userguide/platforms.html#sub::toml-dependencies-format
 
 [versions]
-android_gradle_plugin = "8.10.0"
+android_gradle_plugin = "8.10.1"
 
 [libraries]
 android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref = "android_gradle_plugin" }
 
 [plugins]
 android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
-maven_publish = { id = "com.vanniktech.maven.publish", version = "0.31.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.32.0" }

embedded/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.1-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

embedded/android/lib/build.gradle.kts

@@ -27,7 +27,7 @@ android {
 }
 
 mavenPublishing {
-    publishToMavenCentral(SonatypeHost.S01, automaticRelease = true)
+    publishToMavenCentral(SonatypeHost.CENTRAL_PORTAL, automaticRelease = true)
 
     signAllPublications()
 

locales/en/app.json

@@ -173,6 +173,7 @@
     "devices": {
       "camera": "Camera",
       "camera_numbered": "Camera {{n}}",
+      "change_device_button": "Change audio device",
       "default": "Default",
       "default_named": "Default <2>({{name}})</2>",
       "earpiece": "Earpiece",

package.json

@@ -8,7 +8,11 @@
     "dev:embedded": "vite --config vite-embedded.config.js",
     "build": "yarn build:full",
     "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "build:full:production": "yarn build:full",
+    "build:full:development": "yarn build:full --mode development",
     "build:embedded": "yarn build:full --config vite-embedded.config.js",
+    "build:embedded:production": "yarn build:embedded",
+    "build:embedded:development": "yarn build:embedded --mode development",
     "serve": "vite preview",
     "prettier:check": "prettier -c .",
     "prettier:format": "prettier -w .",
@@ -22,6 +26,7 @@
     "test": "vitest",
     "test:coverage": "vitest --coverage",
     "backend": "docker-compose -f dev-backend-docker-compose.yml up",
+    "backend-playwright": "docker-compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up",
     "test:playwright": "playwright test",
     "test:playwright:open": "yarn test:playwright --ui",
     "links:enable": "mv .links.disabled.yaml .links.yaml & touch .links.yaml",
@@ -43,17 +48,17 @@
     "@livekit/track-processors": "^0.5.5",
     "@mediapipe/tasks-vision": "^0.10.18",
     "@opentelemetry/api": "^1.4.0",
-    "@opentelemetry/core": "^1.25.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.57.0",
-    "@opentelemetry/resources": "^1.25.1",
-    "@opentelemetry/sdk-trace-base": "^1.25.1",
-    "@opentelemetry/sdk-trace-web": "^1.9.1",
+    "@opentelemetry/core": "^2.0.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.201.0",
+    "@opentelemetry/resources": "^2.0.0",
+    "@opentelemetry/sdk-trace-base": "^2.0.0",
+    "@opentelemetry/sdk-trace-web": "^2.0.0",
     "@opentelemetry/semantic-conventions": "^1.25.1",
     "@playwright/test": "^1.52.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
-    "@react-spring/web": "^9.4.4",
+    "@react-spring/web": "^10.0.0",
     "@sentry/react": "^8.0.0",
     "@sentry/vite-plugin": "^3.0.0",
     "@stylistic/eslint-plugin": "^3.0.0",
@@ -69,26 +74,27 @@
     "@types/node": "^22.0.0",
     "@types/pako": "^2.0.3",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/sdp-transform": "^2.4.5",
     "@types/uuid": "10",
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^3.0.0",
-    "@vector-im/compound-web": "^7.2.0",
+    "@vector-im/compound-design-tokens": "^4.0.0",
+    "@vector-im/compound-web": "^8.0.0",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^3.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "classnames": "^2.3.1",
+    "copy-to-clipboard": "^3.3.3",
     "eslint": "^8.14.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-deprecate": "^0.8.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-matrix-org": "^2.0.0",
+    "eslint-plugin-matrix-org": "2.1.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-rxjs": "^5.0.3",
@@ -99,7 +105,7 @@
     "i18next-parser": "^9.1.0",
     "jsdom": "^26.0.0",
     "knip": "^5.27.2",
-    "livekit-client": "^2.11.3",
+    "livekit-client": "^2.13.0",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#head=develop",
@@ -112,11 +118,10 @@
     "posthog-js": "1.160.3",
     "prettier": "^3.0.0",
     "qrcode": "^1.5.4",
-    "react": "18",
-    "react-dom": "18",
+    "react": "19",
+    "react-dom": "19",
     "react-i18next": "^15.0.0",
     "react-router-dom": "^7.0.0",
-    "react-use-clipboard": "^1.0.7",
     "react-use-measure": "^2.1.1",
     "rxjs": "^7.8.1",
     "sass": "^1.42.1",
@@ -125,7 +130,7 @@
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
     "vite": "^6.0.0",
-    "vite-plugin-generate-file": "^0.2.0",
+    "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-svgr": "^4.0.0",
     "vitest": "^3.0.0",

playwright.config.ts

@@ -7,6 +7,10 @@ Please see LICENSE in the repository root for full details.
 
 import { defineConfig, devices } from "@playwright/test";
 
+const baseURL = process.env.USE_DOCKER
+  ? "http://localhost:8080"
+  : "https://localhost:3000";
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -25,7 +29,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "https://localhost:3000",
+    baseURL,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -73,9 +77,13 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: "yarn dev",
-    url: "https://localhost:3000",
+    command: "./scripts/playwright-webserver-command.sh",
+    url: baseURL,
     reuseExistingServer: !process.env.CI,
     ignoreHTTPSErrors: true,
+    gracefulShutdown: {
+      signal: "SIGTERM",
+      timeout: 500,
+    },
   },
 });

playwright/fixtures/widget-user.ts

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Page, test, expect, type JSHandle } from "@playwright/test";
+import {
+  type Browser,
+  type Page,
+  test,
+  expect,
+  type JSHandle,
+} from "@playwright/test";
 
 import type { MatrixClient } from "matrix-js-sdk";
 
@@ -30,8 +36,8 @@ const PASSWORD = "foobarbaz1!";
 const CONFIG_JSON = {
   default_server_config: {
     "m.homeserver": {
-      base_url: "http://synapse.localhost:8008",
-      server_name: "synapse.localhost",
+      base_url: "https://synapse.m.localhost",
+      server_name: "synapse.m.localhost",
     },
   },
 
@@ -63,15 +69,72 @@ const CONFIG_JSON = {
  * Set the Element Call URL in the dev tool settings using `window.mxSettingsStore` via `page.evaluate`.
  * @param page
  */
-async function setDevToolElementCallDevUrl(page: Page): Promise<void> {
-  await page.evaluate(() => {
-    window.mxSettingsStore.setValue(
-      "Developer.elementCallUrl",
-      null,
-      "device",
-      "https://localhost:3000/room",
-    );
+const setDevToolElementCallDevUrl = process.env.USE_DOCKER
+  ? async (page: Page): Promise<void> => {
+      await page.evaluate(() => {
+        window.mxSettingsStore.setValue(
+          "Developer.elementCallUrl",
+          null,
+          "device",
+          "http://localhost:8080/room",
+        );
+      });
+    }
+  : async (page: Page): Promise<void> => {
+      await page.evaluate(() => {
+        window.mxSettingsStore.setValue(
+          "Developer.elementCallUrl",
+          null,
+          "device",
+          "https://localhost:3000/room",
+        );
+      });
+    };
+
+/**
+ * Registers a new user and returns page, clientHandle and mxId.
+ */
+async function registerUser(
+  browser: Browser,
+  username: string,
+): Promise<{ page: Page; clientHandle: JSHandle<MatrixClient>; mxId: string }> {
+  const userContext = await browser.newContext({
+    reducedMotion: "reduce",
   });
+  const page = await userContext.newPage();
+  await page.goto("http://localhost:8081/#/welcome");
+  await page.getByRole("link", { name: "Create Account" }).click();
+  await page.getByRole("textbox", { name: "Username" }).fill(username);
+  await page
+    .getByRole("textbox", { name: "Password", exact: true })
+    .fill(PASSWORD);
+  await page.getByRole("textbox", { name: "Confirm password" }).click();
+  await page.getByRole("textbox", { name: "Confirm password" }).fill(PASSWORD);
+  await page.getByRole("button", { name: "Register" }).click();
+  const continueButton = page.getByRole("button", { name: "Continue" });
+  try {
+    await expect(continueButton).toBeVisible({ timeout: 5000 });
+    await page
+      .getByRole("textbox", { name: "Password", exact: true })
+      .fill(PASSWORD);
+    await continueButton.click();
+  } catch {
+    // continueButton not visible, continue as normal
+  }
+  await expect(
+    page.getByRole("heading", { name: `Welcome ${username}` }),
+  ).toBeVisible();
+  await setDevToolElementCallDevUrl(page);
+
+  const clientHandle = await page.evaluateHandle(() =>
+    window.mxMatrixClientPeg.get(),
+  );
+  const mxId = (await clientHandle.evaluate(
+    (cli: MatrixClient) => cli.getUserId(),
+    clientHandle,
+  ))!;
+
+  return { page, clientHandle, mxId };
 }
 
 export const widgetTest = test.extend<MyFixtures>({
@@ -83,61 +146,17 @@ export const widgetTest = test.extend<MyFixtures>({
     const userA = `brooks_${Date.now()}`;
     const userB = `whistler_${Date.now()}`;
 
-    const user1Context = await browser.newContext({
-      reducedMotion: "reduce",
-    });
-    const ewPage1 = await user1Context.newPage();
-    // Register the first user
-    await ewPage1.goto("http://localhost:8081/#/welcome");
-    await ewPage1.getByRole("link", { name: "Create Account" }).click();
-    await ewPage1.getByRole("textbox", { name: "Username" }).fill(userA);
-    await ewPage1
-      .getByRole("textbox", { name: "Password", exact: true })
-      .fill(PASSWORD);
-    await ewPage1.getByRole("textbox", { name: "Confirm password" }).click();
-    await ewPage1
-      .getByRole("textbox", { name: "Confirm password" })
-      .fill(PASSWORD);
-    await ewPage1.getByRole("button", { name: "Register" }).click();
-    await expect(
-      ewPage1.getByRole("heading", { name: `Welcome ${userA}` }),
-    ).toBeVisible();
-    await setDevToolElementCallDevUrl(ewPage1);
-
-    const brooksClientHandle = await ewPage1.evaluateHandle(() =>
-      window.mxMatrixClientPeg.get(),
-    );
-    const brooksMxId = (await brooksClientHandle.evaluate((cli) => {
-      return cli.getUserId();
-    }, brooksClientHandle))!;
-
-    const user2Context = await browser.newContext({
-      reducedMotion: "reduce",
-    });
-    const ewPage2 = await user2Context.newPage();
-    // Register the second user
-    await ewPage2.goto("http://localhost:8081/#/welcome");
-    await ewPage2.getByRole("link", { name: "Create Account" }).click();
-    await ewPage2.getByRole("textbox", { name: "Username" }).fill(userB);
-    await ewPage2
-      .getByRole("textbox", { name: "Password", exact: true })
-      .fill(PASSWORD);
-    await ewPage2.getByRole("textbox", { name: "Confirm password" }).click();
-    await ewPage2
-      .getByRole("textbox", { name: "Confirm password" })
-      .fill(PASSWORD);
-    await ewPage2.getByRole("button", { name: "Register" }).click();
-    await expect(
-      ewPage2.getByRole("heading", { name: `Welcome ${userB}` }),
-    ).toBeVisible();
-    await setDevToolElementCallDevUrl(ewPage2);
-
-    const whistlerClientHandle = await ewPage2.evaluateHandle(() =>
-      window.mxMatrixClientPeg.get(),
-    );
-    const whistlerMxId = (await whistlerClientHandle.evaluate((cli) => {
-      return cli.getUserId();
-    }, whistlerClientHandle))!;
+    // Register users
+    const {
+      page: ewPage1,
+      clientHandle: brooksClientHandle,
+      mxId: brooksMxId,
+    } = await registerUser(browser, userA);
+    const {
+      page: ewPage2,
+      clientHandle: whistlerClientHandle,
+      mxId: whistlerMxId,
+    } = await registerUser(browser, userB);
 
     // Invite the second user
     await ewPage1.getByRole("button", { name: "Add room" }).click();

playwright/widget/simple-create.spec.ts

@@ -9,11 +9,14 @@ import { expect, test } from "@playwright/test";
 
 import { widgetTest } from "../fixtures/widget-user.ts";
 
+// Skip test, including Fixtures
+widgetTest.skip(
+  ({ browserName }) => browserName === "firefox",
+  "This test is not working on firefox, after hangup brooks is locked in a strange state with a blank widget",
+);
+
 widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => {
-  test.skip(
-    browserName === "firefox",
-    "This test is not working on firefox, after hangup brooks is locked in a strange state with a blank widget",
-  );
+  test.slow(); // Triples the timeout
 
   const { brooks, whistler } = asWidget;
 

renovate.json

@@ -59,7 +59,7 @@
     }
   ],
   "semanticCommits": "disabled",
-  "ignoreDeps": ["posthog-js"],
+  "ignoreDeps": ["posthog-js", "eslint-plugin-matrix-org"],
   "vulnerabilityAlerts": {
     "schedule": ["at any time"],
     "prHourlyLimit": 0,

scripts/playwright-webserver-command.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+if [ -n "$USE_DOCKER" ]; then
+    set -ex
+    yarn build
+    docker build -t element-call:testing .
+    exec docker run --rm --name element-call-testing -p 8080:8080 -v ./config/config.devenv.json:/app/config.json:ro,Z element-call:testing
+else
+    cp config/config.devenv.json public/config.json
+    exec yarn dev
+fi

src/App.tsx

@@ -19,10 +19,11 @@ 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);
 
@@ -50,7 +51,11 @@ const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
   return children;
 };
 
-export const App: FC = () => {
+interface Props {
+  vm: AppViewModel;
+}
+
+export const App: FC<Props> = ({ vm }) => {
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     Initializer.init()
@@ -72,7 +77,7 @@ export const App: FC = () => {
             {loaded ? (
               <Suspense fallback={null}>
                 <ClientProvider>
-                  <MediaDevicesProvider>
+                  <MediaDevicesContext value={vm.mediaDevices}>
                     <ProcessorProvider>
                       <Sentry.ErrorBoundary
                         fallback={(error) => (
@@ -91,7 +96,7 @@ export const App: FC = () => {
                         </Routes>
                       </Sentry.ErrorBoundary>
                     </ProcessorProvider>
-                  </MediaDevicesProvider>
+                  </MediaDevicesContext>
                 </ClientProvider>
               </Suspense>
             ) : (

src/ClientContext.tsx

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

src/FullScreenView.tsx

@@ -10,7 +10,7 @@ import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import styles from "./FullScreenView.module.css";
@@ -67,7 +67,7 @@ export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => {
       ) : (
         <ErrorView
           widget={widget}
-          Icon={ErrorIcon}
+          Icon={ErrorSolidIcon}
           title={t("error.generic")}
           rageshake
           fatal

src/MediaDevicesContext.ts

@@ -0,0 +1,52 @@
+/*
+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/UrlParams.ts

@@ -124,9 +124,15 @@ export interface UrlParams {
    */
   password: string | null;
   /**
-   * Whether we the app should use per participant keys for E2EE.
+   * Whether the app should use per participant keys for E2EE.
    */
   perParticipantE2EE: boolean;
+  /**
+   * Whether the global JS controls for audio output devices should be enabled,
+   * allowing the list of output devices to be controlled by the app hosting
+   * Element Call.
+   */
+  controlledAudioDevices: boolean;
   /**
    * Setting this flag skips the lobby and brings you in the call directly.
    * In the widget this can be combined with preload to pass the device settings
@@ -173,6 +179,7 @@ export interface UrlParams {
    * The Sentry DSN. This is only used in the embedded package of Element Call.
    */
   sentryDsn: string | null;
+
   /**
    * The Sentry environment. This is only used in the embedded package of Element Call.
    */
@@ -281,6 +288,11 @@ export const getUrlParams = (
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
     allowIceFallback: parser.getFlagParam("allowIceFallback"),
     perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
+    controlledAudioDevices: parser.getFlagParam(
+      "controlledAudioDevices",
+      // the deprecated property name
+      parser.getFlagParam("controlledMediaDevices"),
+    ),
     skipLobby: parser.getFlagParam(
       "skipLobby",
       isWidget && intent === UserIntent.StartNewCall,

src/__snapshots__/Modal.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`the content is rendered when the modal is open 1`] = `
 <div
-  aria-labelledby="radix-:r4:"
-  class="overlay animate modal dialog _glass_1x9g9_17"
+  aria-labelledby="radix-«r4»"
+  class="overlay animate modal dialog _glass_sepwu_8"
   data-state="open"
-  id="radix-:r3:"
+  id="radix-«r3»"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"
@@ -17,8 +17,8 @@ exports[`the content is rendered when the modal is open 1`] = `
       class="header"
     >
       <h2
-        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
-        id="radix-:r4:"
+        class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
+        id="radix-«r4»"
       >
         My modal
       </h2>
@@ -36,7 +36,7 @@ exports[`the content is rendered when the modal is open 1`] = `
 
 exports[`the modal renders as a drawer in mobile viewports 1`] = `
 <div
-  aria-labelledby="radix-:ra:"
+  aria-labelledby="radix-«ra»"
   class="overlay modal drawer"
   data-state="open"
   data-vaul-animate="true"
@@ -45,7 +45,7 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
   data-vaul-drawer=""
   data-vaul-drawer-direction="bottom"
   data-vaul-snap-points="false"
-  id="radix-:r9:"
+  id="radix-«r9»"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"
@@ -60,7 +60,7 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
         class="handle"
       />
       <h2
-        id="radix-:ra:"
+        id="radix-«ra»"
         style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
       >
         My modal

src/__snapshots__/Toast.test.tsx.snap

@@ -2,18 +2,18 @@
 
 exports[`Toast > renders 1`] = `
 <button
-  aria-labelledby="radix-:r4:"
+  aria-labelledby="radix-«r4»"
   class="overlay animate toast"
   data-state="open"
-  id="radix-:r3:"
+  id="radix-«r3»"
   role="dialog"
   style="pointer-events: auto;"
   tabindex="-1"
   type="button"
 >
   <h3
-    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
-    id="radix-:r4:"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36"
+    id="radix-«r4»"
   >
     Hello world!
   </h3>

src/analytics/RageshakeSpanProcessor.ts

@@ -107,13 +107,13 @@ export class RageshakeSpanProcessor implements SpanProcessor {
             startTime,
             duration,
             references:
-              span.parentSpanId === undefined
+              span.parentSpanContext?.spanId === undefined
                 ? []
                 : [
                     {
                       refType: "CHILD_OF",
                       traceID: traceId,
-                      spanID: span.parentSpanId,
+                      spanID: span.parentSpanContext?.spanId,
                     },
                   ],
             tags: dumpAttributes(span.attributes),

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -9,8 +9,8 @@ exports[`Can close reaction dialog 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby=":rb5:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    aria-labelledby="«rb5»"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -26,7 +26,7 @@ exports[`Can close reaction dialog 1`] = `
     >
       <path
         clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
         fill-rule="evenodd"
       />
     </svg>
@@ -43,8 +43,8 @@ exports[`Can fully expand emoji picker 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby=":r7m:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    aria-labelledby="«r7m»"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -60,7 +60,7 @@ exports[`Can fully expand emoji picker 1`] = `
     >
       <path
         clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
         fill-rule="evenodd"
       />
     </svg>
@@ -74,8 +74,8 @@ exports[`Can lower hand 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="true"
-    aria-labelledby=":r36:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    aria-labelledby="«r36»"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="secondary"
     data-size="lg"
     role="button"
@@ -91,7 +91,7 @@ exports[`Can lower hand 1`] = `
     >
       <path
         clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
         fill-rule="evenodd"
       />
     </svg>
@@ -108,8 +108,8 @@ exports[`Can open menu 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby=":r0:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+    aria-labelledby="«r0»"
+    class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -125,7 +125,7 @@ exports[`Can open menu 1`] = `
     >
       <path
         clip-rule="evenodd"
-        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m3.536-6.464a1 1 0 0 0-1.415-1.415A3 3 0 0 1 12 15a3 3 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
         fill-rule="evenodd"
       />
     </svg>
@@ -139,8 +139,8 @@ exports[`Can raise hand 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="true"
-    aria-labelledby=":r1j:"
-    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
+    aria-labelledby="«r1j»"
+    class="_button_vczzf_8 raisedButton _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -155,7 +155,7 @@ exports[`Can raise hand 1`] = `
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.944 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 2 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0V3Z"
+        d="M11 3a1 1 0 1 1 2 0v8.5a.5.5 0 0 0 1 0V4a1 1 0 1 1 2 0v10.2l3.284-2.597a1.081 1.081 0 0 1 1.47 1.577c-.613.673-1.214 1.367-1.818 2.064-1.267 1.463-2.541 2.934-3.943 4.235A6 6 0 0 1 5 15V7a1 1 0 0 1 1.999 0v5.5a.5.5 0 0 0 1 0V4a1 1 0 0 1 2 0v7.5a.5.5 0 0 0 1 0z"
       />
     </svg>
   </button>

src/config/ConfigOptions.ts

@@ -14,6 +14,7 @@ export interface ConfigOptions {
     api_key: string;
     api_host: string;
   };
+
   /**
    * The Sentry endpoint to which crash data will be sent.
    * This is only used in the full package of Element Call.
@@ -22,6 +23,7 @@ export interface ConfigOptions {
     DSN: string;
     environment: string;
   };
+
   /**
    * The rageshake server to which feedback and debug logs will be sent.
    * This is only used in the full package of Element Call.
@@ -66,6 +68,7 @@ export interface ConfigOptions {
      * Allow to join group calls without audio and video.
      */
     feature_group_calls_without_video_and_audio?: boolean;
+
     /**
      * Send device-specific call session membership state events instead of
      * legacy user-specific call membership state events.
@@ -86,6 +89,7 @@ export interface ConfigOptions {
      * Defines whether participants should start with audio enabled by default.
      */
     enable_audio?: boolean;
+
     /**
      * Defines whether participants should start with video enabled by default.
      */
@@ -109,19 +113,38 @@ export interface ConfigOptions {
      * How long (in milliseconds) to wait before rotating end-to-end media encryption keys
      * when someone leaves a call.
      */
+    wait_for_key_rotation_ms?: number;
+    /** @deprecated use wait_for_key_rotation_ms instead */
     key_rotation_on_leave_delay?: number;
 
     /**
-     * How often (in milliseconds) keep-alive messages should be sent to the server for
-     * the MatrixRTC membership event.
+     * The duration (in milliseconds) after the most recent keep-alive (delayed leave event restart)
+     * that the server waits before sending the leave MatrixRTC membership event.
      */
+    delayed_leave_event_delay_ms?: number;
+    /** @deprecated use delayed_leave_event_delay_ms instead */
+    membership_server_side_expiry_timeout?: number;
+
+    /**
+     * The time interval (in milliseconds) at which the client sends membership keep-alive
+     * messages to the server by restarting the timer for the delayed leave event.
+     */
+    delayed_leave_event_restart_ms?: number;
+    /** @deprecated use delayed_leave_event_restart_ms instead */
     membership_keep_alive_period?: number;
 
     /**
-     * How long (in milliseconds) after the last keep-alive the server should expire the
-     * MatrixRTC membership event.
+     * How long we wait before retrying after a network error on any of the requests.
      */
-    membership_server_side_expiry_timeout?: number;
+    network_error_retry_ms?: number;
+
+    /**
+     * The timeout (in milliseconds) after we joined the call, that our membership should expire
+     * unless we have explicitly updated it.
+     *
+     * This is what goes into the m.rtc.member event expiry field and is typically set to a number of hours.
+     */
+    membership_event_expiry_ms?: number;
   };
 }
 

src/controls.ts

@@ -6,15 +6,64 @@ 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]");
 
 export interface Controls {
-  canEnterPip: () => boolean;
-  enablePip: () => void;
-  disablePip: () => void;
+  canEnterPip(): boolean;
+  enablePip(): void;
+  disablePip(): void;
+  /** @deprecated use  setAvailableAudioDevices instead*/
+  setAvailableOutputDevices(devices: OutputDevice[]): void;
+  setAvailableAudioDevices(devices: OutputDevice[]): void;
+  /** @deprecated use  setAudioDevice instead*/
+  setOutputDevice(id: string): void;
+  setAudioDevice(id: string): void;
+  /** @deprecated use  onAudioDeviceSelect instead*/
+  onOutputDeviceSelect?: (id: string) => void;
+  onAudioDeviceSelect?: (id: string) => void;
+  onAudioPlaybackStarted?: () => void;
+  /** @deprecated use  setAudioEnabled instead*/
+  setOutputEnabled(enabled: boolean): void;
+  setAudioEnabled(enabled: boolean): void;
+  /** @deprecated use  showNativeAudioDevicePicker instead*/
+  showNativeOutputDevicePicker?: () => void;
+  showNativeAudioDevicePicker?: () => void;
 }
 
+export interface OutputDevice {
+  id: string;
+  name: string;
+  forEarpiece?: boolean;
+  isEarpiece?: boolean;
+  isSpeaker?: boolean;
+  isExternalHeadset?: boolean;
+}
+
+/**
+ * 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>();
+
+/**
+ * This allows the os to mute the call if the user
+ * presses the volume down button when it is at the minimum volume.
+ *
+ * This should also be used to display a darkened overlay screen letting the user know that audio is muted.
+ */
+export const setAudioEnabled$ = new Subject<boolean>();
+let playbackStartedEmitted = false;
+export const setPlaybackStarted = (): void => {
+  if (!playbackStartedEmitted) {
+    playbackStartedEmitted = true;
+    window.controls.onAudioPlaybackStarted?.();
+  }
+};
 window.controls = {
   canEnterPip(): boolean {
     return setPipEnabled$.observed;
@@ -27,4 +76,31 @@ window.controls = {
     if (!setPipEnabled$.observed) throw new Error("No call is running");
     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",
+      );
+    setAudioEnabled$.next(enabled);
+  },
+
+  // wrappers for the deprecated controls fields
+  setOutputEnabled(enabled: boolean): void {
+    this.setAudioEnabled(enabled);
+  },
+  setAvailableOutputDevices(devices: OutputDevice[]): void {
+    this.setAvailableAudioDevices(devices);
+  },
+  setOutputDevice(id: string): void {
+    this.setAudioDevice(id);
+  },
 };

src/e2ee/sharedKeyManagement.ts

@@ -6,58 +6,70 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useEffect, useMemo } from "react";
+import { logger } from "matrix-js-sdk/lib/logger";
 
-import { setLocalStorageItem, useLocalStorage } from "../useLocalStorage";
-import { type UrlParams, getUrlParams, useUrlParams } from "../UrlParams";
+import {
+  setLocalStorageItemReactive,
+  useLocalStorage,
+} from "../useLocalStorage";
+import { getUrlParams } from "../UrlParams";
 import { E2eeType } from "./e2eeType";
 import { useClient } from "../ClientContext";
 
+/**
+ * This setter will update the state for all `useRoomSharedKey` hooks
+ * if the password is different from the one in local storage or if its not yet in the local storage.
+ */
 export function saveKeyForRoom(roomId: string, password: string): void {
-  setLocalStorageItem(getRoomSharedKeyLocalStorageKey(roomId), password);
+  if (
+    localStorage.getItem(getRoomSharedKeyLocalStorageKey(roomId)) !== password
+  )
+    setLocalStorageItemReactive(
+      getRoomSharedKeyLocalStorageKey(roomId),
+      password,
+    );
 }
 
 const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
   `room-shared-key-${roomId}`;
 
-const useInternalRoomSharedKey = (roomId: string): string | null => {
-  const key = getRoomSharedKeyLocalStorageKey(roomId);
-  const roomSharedKey = useLocalStorage(key)[0];
+/**
+ * An upto-date shared key for the room. Either from local storage or the value from `setInitialValue`.
+ * @param roomId
+ * @param setInitialValue The value we get from the URL. The hook will overwrite the local storage value with this.
+ * @returns [roomSharedKey, setRoomSharedKey] like a react useState hook.
+ */
+const useRoomSharedKey = (
+  roomId: string,
+  setInitialValue?: string,
+): [string | null, setKey: (key: string) => void] => {
+  const [roomSharedKey, setRoomSharedKey] = useLocalStorage(
+    getRoomSharedKeyLocalStorageKey(roomId),
+  );
+  useEffect(() => {
+    // If setInitialValue is available, update the local storage (usually the password from the url).
+    // This will update roomSharedKey but wont update the returned value since
+    // that already defaults to setInitialValue.
+    if (setInitialValue) setRoomSharedKey(setInitialValue);
+  }, [setInitialValue, setRoomSharedKey]);
 
-  return roomSharedKey;
+  // make sure we never return the initial null value from `useLocalStorage`
+  return [setInitialValue ?? roomSharedKey, setRoomSharedKey];
 };
 
 export function getKeyForRoom(roomId: string): string | null {
-  saveKeyFromUrlParams(getUrlParams());
-  const key = getRoomSharedKeyLocalStorageKey(roomId);
-  return localStorage.getItem(key);
+  const { roomId: urlRoomId, password } = getUrlParams();
+  if (roomId !== urlRoomId)
+    logger.warn(
+      "requested key for a roomId which is not the current call room id (from the URL)",
+      roomId,
+      urlRoomId,
+    );
+  return (
+    password ?? localStorage.getItem(getRoomSharedKeyLocalStorageKey(roomId))
+  );
 }
 
-function saveKeyFromUrlParams(urlParams: UrlParams): void {
-  if (!urlParams.password || !urlParams.roomId) return;
-
-  // Take the key from the URL and save it.
-  // It's important to always use the room ID specified in the URL
-  // when saving keys rather than whatever the current room ID might be,
-  // in case we've moved to a different room but the URL hasn't changed.
-  saveKeyForRoom(urlParams.roomId, urlParams.password);
-}
-
-/**
- * Extracts the room password from the URL if one is present, saving it in localstorage
- * and returning it in a tuple with the corresponding room ID from the URL.
- * @returns A tuple of the roomId and password from the URL if the URL has both,
- *          otherwise [undefined, undefined]
- */
-const useKeyFromUrl = (): [string, string] | [undefined, undefined] => {
-  const urlParams = useUrlParams();
-
-  useEffect(() => saveKeyFromUrlParams(urlParams), [urlParams]);
-
-  return urlParams.roomId && urlParams.password
-    ? [urlParams.roomId, urlParams.password]
-    : [undefined, undefined];
-};
-
 export type Unencrypted = { kind: E2eeType.NONE };
 export type SharedSecret = { kind: E2eeType.SHARED_KEY; secret: string };
 export type PerParticipantE2EE = { kind: E2eeType.PER_PARTICIPANT };
@@ -66,12 +78,11 @@ export type EncryptionSystem = Unencrypted | SharedSecret | PerParticipantE2EE;
 export function useRoomEncryptionSystem(roomId: string): EncryptionSystem {
   const { client } = useClient();
 
-  // make sure we've extracted the key from the URL first
-  // (and we still need to take the value it returns because
-  // the effect won't run in time for it to save to localstorage in
-  // time for us to read it out again).
-  const [urlRoomId, passwordFromUrl] = useKeyFromUrl();
-  const storedPassword = useInternalRoomSharedKey(roomId);
+  const [storedPassword] = useRoomSharedKey(
+    getRoomSharedKeyLocalStorageKey(roomId),
+    getKeyForRoom(roomId) ?? undefined,
+  );
+
   const room = client?.getRoom(roomId);
   const e2eeSystem = <EncryptionSystem>useMemo(() => {
     if (!room) return { kind: E2eeType.NONE };
@@ -80,15 +91,10 @@ export function useRoomEncryptionSystem(roomId: string): EncryptionSystem {
         kind: E2eeType.SHARED_KEY,
         secret: storedPassword,
       };
-    if (urlRoomId === roomId)
-      return {
-        kind: E2eeType.SHARED_KEY,
-        secret: passwordFromUrl,
-      };
     if (room.hasEncryptionStateEvent()) {
       return { kind: E2eeType.PER_PARTICIPANT };
     }
     return { kind: E2eeType.NONE };
-  }, [passwordFromUrl, room, roomId, storedPassword, urlRoomId]);
+  }, [room, storedPassword]);
   return e2eeSystem;
 }

src/grid/Grid.tsx

@@ -24,7 +24,7 @@ import {
   createContext,
   forwardRef,
   memo,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -124,7 +124,7 @@ interface LayoutContext {
 const LayoutContext = createContext<LayoutContext | null>(null);
 
 function useLayoutContext(): LayoutContext {
-  const context = useContext(LayoutContext);
+  const context = use(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.Provider value={context}>
+      <LayoutContext value={context}>
         <LayoutMemo
           ref={setLayoutRoot}
           Layout={Layout}
           model={model}
           Slot={Slot}
         />
-      </LayoutContext.Provider>
+      </LayoutContext>
       {tileTransitions((spring, { id, model, onDrag, width, height }) => (
         <TileWrapper
           key={id}

src/home/useGroupCallRooms.ts

@@ -81,8 +81,9 @@ function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
 }
 
 const roomIsJoinable = (room: Room): boolean => {
-  if (!room.hasEncryptionStateEvent() && !getKeyForRoom(room.roomId)) {
-    // if we have an non encrypted room (no encryption state event) we need a locally stored shared key.
+  const password = getKeyForRoom(room.roomId);
+  if (!room.hasEncryptionStateEvent() && !password) {
+    // if we have a non encrypted room (no encryption state event) we need a locally stored shared key.
     // in case this key also does not exists we cannot join the room.
     return false;
   }

src/livekit/MatrixAudioRenderer.test.tsx

@@ -17,12 +17,14 @@ 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 { mockTrack } from "../utils/test";
+import { mockMediaDevices, mockTrack } from "../utils/test";
 
 export const TestAudioContextConstructor = vi.fn(() => testAudioContext);
 
+const MediaDevicesProvider = MediaDevicesContext.MediaDevicesContext.Provider;
+
 beforeEach(() => {
   vi.stubGlobal("AudioContext", TestAudioContextConstructor);
 });
@@ -51,18 +53,24 @@ vi.mocked(useTracks).mockReturnValue(tracks);
 
 it("should render for member", () => {
   const { container, queryAllByTestId } = render(
-    <MatrixAudioRenderer
-      members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
-    />,
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer
+        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+      />
+    </MediaDevicesProvider>,
   );
   expect(container).toBeTruthy();
   expect(queryAllByTestId("audio")).toHaveLength(1);
 });
+
 it("should not render without member", () => {
+  const memberships = [
+    { sender: "othermember", deviceId: "123" },
+  ] as CallMembership[];
   const { container, queryAllByTestId } = render(
-    <MatrixAudioRenderer
-      members={[{ sender: "othermember", deviceId: "123" }] as CallMembership[]}
-    />,
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer members={memberships} />
+    </MediaDevicesProvider>,
   );
   expect(container).toBeTruthy();
   expect(queryAllByTestId("audio")).toHaveLength(0);
@@ -70,9 +78,11 @@ it("should not render without member", () => {
 
 it("should not setup audioContext gain and pan if there is no need to.", () => {
   render(
-    <MatrixAudioRenderer
-      members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
-    />,
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer
+        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+      />
+    </MediaDevicesProvider>,
   );
   const audioTrack = tracks[0].publication.track! as RemoteAudioTrack;
 
@@ -84,15 +94,18 @@ it("should not setup audioContext gain and pan if there is no need to.", () => {
   expect(testAudioContext.gain.gain.value).toEqual(1);
   expect(testAudioContext.pan.pan.value).toEqual(0);
 });
+
 it("should setup audioContext gain and pan", () => {
   vi.spyOn(MediaDevicesContext, "useEarpieceAudioConfig").mockReturnValue({
     pan: 1,
     volume: 0.1,
   });
   render(
-    <MatrixAudioRenderer
-      members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
-    />,
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <MatrixAudioRenderer
+        members={[{ sender: "test", deviceId: "123" }] as CallMembership[]}
+      />
+    </MediaDevicesProvider>,
   );
 
   const audioTrack = tracks[0].publication.track! as RemoteAudioTrack;

src/livekit/MatrixAudioRenderer.tsx

@@ -14,11 +14,13 @@ import {
   type AudioTrackProps,
 } from "@livekit/components-react";
 import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
-import { logger } from "matrix-js-sdk/lib/logger";
+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";
 
+const logger = rootLogger.getChild("[MatrixAudioRenderer]");
 export interface MatrixAudioRendererProps {
   /**
    * The list of participants to render audio for.
@@ -59,6 +61,7 @@ export function MatrixAudioRenderer({
   );
 
   const loggedInvalidIdentities = useRef(new Set<string>());
+
   /**
    * Log an invalid livekit track identity.
    * A invalid identity is one that does not match any of the matrix rtc members.
@@ -96,6 +99,14 @@ export function MatrixAudioRenderer({
       isValid
     );
   });
+  useEffect(() => {
+    if (!tracks.some((t) => !validIdentities.has(t.participant.identity))) {
+      logger.debug(
+        `All audio tracks have a matching matrix call member identity.`,
+      );
+      loggedInvalidIdentities.current.clear();
+    }
+  }, [tracks, validIdentities]);
 
   // This component is also (in addition to the "only play audio for connected members" logic above)
   // responsible for mimicking earpiece audio on iPhones.
@@ -204,6 +215,7 @@ function AudioTrackWithAudioNodes({
       useContext ? [audioNodes.gain!, audioNodes.pan!] : [],
     );
     setTrackReady(true);
+    controls.setPlaybackStarted();
   }, [audioContext, audioNodes, setTrackReady, trackReady, trackRef]);
 
   return (

src/livekit/MediaDevicesContext.tsx

@@ -1,321 +0,0 @@
-/*
-Copyright 2023, 2024 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 { map, startWith } from "rxjs";
-import { useObservableEagerState } from "observable-hooks";
-import { logger } from "matrix-js-sdk/lib/logger";
-
-import {
-  useSetting,
-  audioInput as audioInputSetting,
-  audioOutput as audioOutputSetting,
-  videoInput as videoInputSetting,
-  alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
-  type Setting,
-} from "../settings/settings";
-
-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 MediaDevice {
-  /**
-   * 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;
-}
-
-export interface MediaDevices {
-  audioInput: MediaDevice;
-  audioOutput: MediaDevice;
-  videoInput: MediaDevice;
-  startUsingDeviceNames: () => void;
-  stopUsingDeviceNames: () => void;
-}
-
-function useMediaDevice(
-  kind: MediaDeviceKind,
-  setting: Setting<string | undefined>,
-  usingNames: boolean,
-): MediaDevice {
-  // Make sure we don't needlessly reset to a device observer without names,
-  // once permissions are already given
-  const [alwaysShowIphoneEarpice] = useSetting(alwaysShowIphoneEarpieceSetting);
-  const hasRequestedPermissions = useRef(false);
-  const requestPermissions = usingNames || hasRequestedPermissions.current;
-  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([])),
-    [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.
-            const showEarpiece =
-              navigator.userAgent.match("iPhone") || alwaysShowIphoneEarpice;
-            if (
-              kind === "audiooutput" &&
-              !available.has("") &&
-              !available.has("default") &&
-              (available.size || showEarpiece)
-            )
-              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;
-          }),
-        ),
-      [alwaysShowIphoneEarpice, deviceObserver$, kind],
-    ),
-  );
-
-  const [preferredId, setPreferredId] = 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
-      // 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]);
-
-  const selectedGroupId = useObservableEagerState(
-    useMemo(
-      () =>
-        deviceObserver$.pipe(
-          map(
-            (availableRaw) =>
-              availableRaw.find((d) => d.deviceId === selectedId)?.groupId,
-          ),
-        ),
-      [deviceObserver$, selectedId],
-    ),
-  );
-
-  const select = useCallback(
-    (id: string) => {
-      if (id === EARPIECE_CONFIG_ID) {
-        setAsEarpiece(true);
-      } else {
-        setAsEarpiece(false);
-        setPreferredId(id);
-      }
-    },
-    [setPreferredId],
-  );
-
-  return useMemo(
-    () => ({
-      available,
-      selectedId,
-      useAsEarpiece: asEarpice,
-      selectedGroupId,
-      select,
-    }),
-    [available, selectedId, asEarpice, selectedGroupId, select],
-  );
-}
-
-export const deviceStub: MediaDevice = {
-  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);
-
-interface Props {
-  children: JSX.Element;
-}
-
-export const MediaDevicesProvider: FC<Props> = ({ children }) => {
-  // Counts the number of callers currently using device names.
-  const [numCallersUsingNames, setNumCallersUsingNames] = useState(0);
-  const usingNames = numCallersUsingNames > 0;
-
-  const audioInput = useMediaDevice(
-    "audioinput",
-    audioInputSetting,
-    usingNames,
-  );
-  const audioOutput = useMediaDevice(
-    "audiooutput",
-    audioOutputSetting,
-    usingNames,
-  );
-  const videoInput = useMediaDevice(
-    "videoinput",
-    videoInputSetting,
-    usingNames,
-  );
-
-  const startUsingDeviceNames = useCallback(
-    () => setNumCallersUsingNames((n) => n + 1),
-    [setNumCallersUsingNames],
-  );
-  const stopUsingDeviceNames = useCallback(
-    () => setNumCallersUsingNames((n) => n - 1),
-    [setNumCallersUsingNames],
-  );
-
-  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);
-
-/**
- * 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

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

src/livekit/useLivekit.ts

@@ -14,21 +14,23 @@ import {
   type RoomOptions,
   Track,
 } from "livekit-client";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
 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 } from "rxjs";
+import {
+  map,
+  NEVER,
+  type Observable,
+  type Subscription,
+  switchMap,
+} from "rxjs";
 
 import { defaultLiveKitOptions } from "./options";
 import { type SFUConfig } from "./openIDSFU";
 import { type MuteStates } from "../room/MuteStates";
-import {
-  type MediaDevice,
-  type MediaDevices,
-  useMediaDevices,
-} from "./MediaDevicesContext";
+import { useMediaDevices } from "../MediaDevicesContext";
 import {
   type ECConnectionState,
   useECConnectionState,
@@ -40,8 +42,11 @@ import {
   useTrackProcessor,
   useTrackProcessorSync,
 } from "./TrackProcessorContext";
-import { useInitial } from "../useInitial";
 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;
@@ -54,27 +59,87 @@ export function useLivekit(
   sfuConfig: SFUConfig | undefined,
   e2eeSystem: EncryptionSystem,
 ): UseLivekitResult {
-  const e2eeOptions = useMemo((): E2EEManagerOptions | undefined => {
-    if (e2eeSystem.kind === E2eeType.NONE) return undefined;
+  const { controlledAudioDevices } = useUrlParams();
 
+  const initialMuteStates = useInitial(() => muteStates);
+
+  const devices = useMediaDevices();
+  const initialAudioInputId = useInitial(
+    () => getValue(devices.audioInput.selected$)?.id,
+  );
+
+  // Store if audio/video are currently updating. If to prohibit unnecessary calls
+  // to setMicrophoneEnabled/setCameraEnabled
+  const audioMuteUpdating = useRef(false);
+  const videoMuteUpdating = useRef(false);
+  // Store the current button mute state that gets passed to this hook via props.
+  // We need to store it for awaited code that relies on the current value.
+  const buttonEnabled = useRef({
+    audio: initialMuteStates.audio.enabled,
+    video: initialMuteStates.video.enabled,
+  });
+
+  const { processor } = useTrackProcessor();
+
+  // Only ever create the room once via useInitial.
+  const room = useInitial(() => {
+    logger.info("[LivekitRoom] Create LiveKit room");
+
+    let e2ee: E2EEManagerOptions | undefined;
     if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
       logger.info("Created MatrixKeyProvider (per participant)");
-      return {
+      e2ee = {
         keyProvider: new MatrixKeyProvider(),
         worker: new E2EEWorker(),
       };
     } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
       logger.info("Created ExternalE2EEKeyProvider (shared key)");
-
-      return {
+      e2ee = {
         keyProvider: new ExternalE2EEKeyProvider(),
         worker: new E2EEWorker(),
       };
     }
-  }, [e2eeSystem]);
 
+    const roomOptions: RoomOptions = {
+      ...defaultLiveKitOptions,
+      videoCaptureDefaults: {
+        ...defaultLiveKitOptions.videoCaptureDefaults,
+        deviceId: getValue(devices.videoInput.selected$)?.id,
+        processor,
+      },
+      audioCaptureDefaults: {
+        ...defaultLiveKitOptions.audioCaptureDefaults,
+        deviceId: initialAudioInputId,
+      },
+      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,
+      },
+      e2ee,
+    };
+    // We have to create the room manually here due to a bug inside
+    // @livekit/components-react. JSON.stringify() is used in deps of a
+    // useEffect() with an argument that references itself, if E2EE is enabled
+    const room = new Room(roomOptions);
+    room.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE).catch((e) => {
+      logger.error("Failed to set E2EE enabled on room", e);
+    });
+
+    return room;
+  });
+
+  // Setup and update the keyProvider which was create by `createRoom`
   useEffect(() => {
-    if (e2eeSystem.kind === E2eeType.NONE || !e2eeOptions) return;
+    const e2eeOptions = room.options.e2ee;
+    if (
+      e2eeSystem.kind === E2eeType.NONE ||
+      !(e2eeOptions && "keyProvider" in e2eeOptions)
+    )
+      return;
 
     if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
       (e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession);
@@ -85,55 +150,7 @@ export function useLivekit(
           logger.error("Failed to set shared key for E2EE", e);
         });
     }
-  }, [e2eeOptions, e2eeSystem, rtcSession]);
-
-  const initialMuteStates = useRef<MuteStates>(muteStates);
-  const devices = useMediaDevices();
-  const initialDevices = useRef<MediaDevices>(devices);
-
-  const { processor } = useTrackProcessor();
-  const initialProcessor = useInitial(() => processor);
-  const roomOptions = useMemo(
-    (): RoomOptions => ({
-      ...defaultLiveKitOptions,
-      videoCaptureDefaults: {
-        ...defaultLiveKitOptions.videoCaptureDefaults,
-        deviceId: initialDevices.current.videoInput.selectedId,
-        processor: initialProcessor,
-      },
-      audioCaptureDefaults: {
-        ...defaultLiveKitOptions.audioCaptureDefaults,
-        deviceId: initialDevices.current.audioInput.selectedId,
-      },
-      audioOutput: {
-        deviceId: initialDevices.current.audioOutput.selectedId,
-      },
-      e2ee: e2eeOptions,
-    }),
-    [e2eeOptions, initialProcessor],
-  );
-
-  // Store if audio/video are currently updating. If to prohibit unnecessary calls
-  // to setMicrophoneEnabled/setCameraEnabled
-  const audioMuteUpdating = useRef(false);
-  const videoMuteUpdating = useRef(false);
-  // Store the current button mute state that gets passed to this hook via props.
-  // We need to store it for awaited code that relies on the current value.
-  const buttonEnabled = useRef({
-    audio: initialMuteStates.current.audio.enabled,
-    video: initialMuteStates.current.video.enabled,
-  });
-
-  // We have to create the room manually here due to a bug inside
-  // @livekit/components-react. JSON.stringify() is used in deps of a
-  // useEffect() with an argument that references itself, if E2EE is enabled
-  const room = useMemo(() => {
-    const r = new Room(roomOptions);
-    r.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE).catch((e) => {
-      logger.error("Failed to set E2EE enabled on room", e);
-    });
-    return r;
-  }, [roomOptions, e2eeSystem]);
+  }, [room.options.e2ee, e2eeSystem, rtcSession]);
 
   // Sync the requested track processors with LiveKit
   useTrackProcessorSync(
@@ -155,8 +172,8 @@ export function useLivekit(
   );
 
   const connectionState = useECConnectionState(
-    initialDevices.current.audioInput.selectedId,
-    initialMuteStates.current.audio.enabled,
+    initialAudioInputId,
+    initialMuteStates.audio.enabled,
     room,
     sfuConfig,
   );
@@ -303,64 +320,74 @@ 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 id = device.selectedId;
-
-        // 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.
-        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 (
+      room !== undefined &&
+      connectionState === ConnectionState.Connected &&
+      !controlledAudioDevices
+    ) {
+      const syncDevice = (
+        kind: MediaDeviceKind,
+        selected$: Observable<SelectedDevice | undefined>,
+      ): Subscription =>
+        selected$.subscribe((device) => {
           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
+            device !== undefined &&
+            room.getActiveDevice(kind) !== device.id
           ) {
-            // 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)
+              .switchActiveDevice(kind, device.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);
+      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.
+        // 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 (
+              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();
+      };
     }
-  }, [room, devices, connectionState]);
+  }, [room, devices, connectionState, controlledAudioDevices]);
 
   return {
     connState: connectionState,

src/main.tsx

@@ -23,13 +23,14 @@ import {
 import { App } from "./App";
 import { init as initRageshake } from "./settings/rageshake";
 import { Initializer } from "./initializer";
+import { AppViewModel } from "./state/AppViewModel";
 
 window.setLKLogLevel = setLKLogLevel;
 
 initRageshake().catch((e) => {
   logger.error("Failed to initialize rageshake", e);
 });
-setLKLogLevel("warn");
+setLKLogLevel("info");
 setLKLogExtension((level, msg, context) => {
   // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read
   global.mx_rage_logger.log(level, "livekit", msg, context);
@@ -60,7 +61,7 @@ Initializer.initBeforeReact()
   .then(() => {
     root.render(
       <StrictMode>
-        <App />
+        <App vm={new AppViewModel()} />
       </StrictMode>,
     );
   })

src/otel/otel.ts

@@ -5,12 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
+import {
+  SimpleSpanProcessor,
+  type SpanProcessor,
+} from "@opentelemetry/sdk-trace-base";
 import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
 import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
 import opentelemetry, { type Tracer } from "@opentelemetry/api";
-import { Resource } from "@opentelemetry/resources";
-import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
+import { resourceFromAttributes } from "@opentelemetry/resources";
+import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import { PosthogSpanProcessor } from "../analytics/PosthogSpanProcessor";
@@ -59,34 +62,34 @@ export class ElementCallOpenTelemetry {
     collectorUrl: string | undefined,
     rageshakeUrl: string | undefined,
   ) {
-    // This is how we can make Jaeger show a reasonable service in the dropdown on the left.
-    const providerConfig = {
-      resource: new Resource({
-        [SemanticResourceAttributes.SERVICE_NAME]: SERVICE_NAME,
-      }),
-    };
-    this._provider = new WebTracerProvider(providerConfig);
+    const spanProcessors: SpanProcessor[] = [];
 
     if (collectorUrl) {
       logger.info("Enabling OTLP collector with URL " + collectorUrl);
       this.otlpExporter = new OTLPTraceExporter({
         url: collectorUrl,
       });
-      this._provider.addSpanProcessor(
-        new SimpleSpanProcessor(this.otlpExporter),
-      );
+      spanProcessors.push(new SimpleSpanProcessor(this.otlpExporter));
     } else {
       logger.info("OTLP collector disabled");
     }
 
     if (rageshakeUrl) {
       this.rageshakeProcessor = new RageshakeSpanProcessor();
-      this._provider.addSpanProcessor(this.rageshakeProcessor);
+      spanProcessors.push(this.rageshakeProcessor);
     }
 
-    this._provider.addSpanProcessor(new PosthogSpanProcessor());
-    opentelemetry.trace.setGlobalTracerProvider(this._provider);
+    spanProcessors.push(new PosthogSpanProcessor());
 
+    this._provider = new WebTracerProvider({
+      resource: resourceFromAttributes({
+        // This is how we can make Jaeger show a reasonable service in the dropdown on the left.
+        [ATTR_SERVICE_NAME]: SERVICE_NAME,
+      }),
+      spanProcessors,
+    });
+
+    opentelemetry.trace.setGlobalTracerProvider(this._provider);
     this._tracer = opentelemetry.trace.getTracer(
       // This is not the serviceName shown in jaeger
       "my-element-call-otl-tracer",

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,
-  useContext,
+  use,
   type ReactNode,
   useCallback,
   useMemo,
@@ -34,7 +34,7 @@ const ReactionsSenderContext = createContext<
 >(undefined);
 
 export const useReactionsSender = (): ReactionsSenderContextType => {
-  const context = useContext(ReactionsSenderContext);
+  const context = use(ReactionsSenderContext);
   if (!context) {
     throw new Error("useReactions must be used within a ReactionsProvider");
   }
@@ -157,7 +157,7 @@ export const ReactionsSenderProvider = ({
   );
 
   return (
-    <ReactionsSenderContext.Provider
+    <ReactionsSenderContext
       value={{
         supportsReactions,
         toggleRaisedHand,
@@ -165,6 +165,6 @@ export const ReactionsSenderProvider = ({
       }}
     >
       {children}
-    </ReactionsSenderContext.Provider>
+    </ReactionsSenderContext>
   );
 };

src/room/GroupCallErrorBoundary.tsx

@@ -16,7 +16,7 @@ import {
 } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import {
-  ErrorIcon,
+  ErrorSolidIcon,
   HostIcon,
   OfflineIcon,
   WebBrowserIcon,
@@ -63,7 +63,7 @@ const ErrorPage: FC<ErrorPageProps> = ({
       icon = WebBrowserIcon;
       break;
     default:
-      icon = ErrorIcon;
+      icon = ErrorSolidIcon;
   }
 
   const actions: { label: string; onClick: () => void }[] = [];

src/room/GroupCallView.test.tsx

@@ -29,8 +29,10 @@ import { useAudioContext } from "../useAudioContext";
 import { ActiveCall } from "./InCallView";
 import {
   flushPromises,
+  mockEmitter,
   mockMatrixRoom,
   mockMatrixRoomMember,
+  mockMediaDevices,
   mockRtcMembership,
   MockRTCSession,
 } from "../utils/test";
@@ -39,6 +41,7 @@ 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");
@@ -129,6 +132,7 @@ function createGroupCallView(
     getMxcAvatarUrl: () => null,
     getCanonicalAlias: () => null,
     currentState: {
+      ...mockEmitter(),
       getJoinRule: () => JoinRule.Invite,
     } as Partial<RoomState> as RoomState,
   });
@@ -145,20 +149,22 @@ function createGroupCallView(
   const { getByText } = render(
     <BrowserRouter>
       <TooltipProvider>
-        <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 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>
       </TooltipProvider>
     </BrowserRouter>,
   );

src/room/GroupCallView.tsx

@@ -24,6 +24,7 @@ import {
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { useNavigate } from "react-router-dom";
+import { useObservableEagerState } from "observable-hooks";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
@@ -39,10 +40,13 @@ 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 "../livekit/MediaDevicesContext";
+import { useMediaDevices } from "../MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
-import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
+import {
+  saveKeyForRoom,
+  useRoomEncryptionSystem,
+} from "../e2ee/sharedKeyManagement";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
@@ -64,10 +68,10 @@ import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary.tsx";
 import {
   useNewMembershipManager as useNewMembershipManagerSetting,
   useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
-  muteAllAudio as muteAllAudioSetting,
   useSetting,
 } from "../settings/settings";
 import { useTypedEventEmitter } from "../useEvents";
+import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
 
 declare global {
   interface Window {
@@ -104,9 +108,9 @@ export const GroupCallView: FC<Props> = ({
   const [externalError, setExternalError] = useState<ElementCallError | null>(
     null,
   );
-
-  const [muteAllAudio] = useSetting(muteAllAudioSetting);
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
+
+  const muteAllAudio = useObservableEagerState(muteAllAudio$);
   const leaveSoundContext = useLatest(
     useAudioContext({
       sounds: callEventAudioSounds,
@@ -166,6 +170,12 @@ export const GroupCallView: FC<Props> = ({
     useExperimentalToDeviceTransportSetting,
   );
 
+  // Save the password once we start the groupCallView
+  const { password: passwordFromUrl } = useUrlParams();
+  useEffect(() => {
+    if (passwordFromUrl) saveKeyForRoom(room.roomId, passwordFromUrl);
+  }, [passwordFromUrl, room.roomId]);
+
   usePageTitle(roomName);
 
   const matrixInfo = useMemo((): MatrixInfo => {
@@ -187,8 +197,7 @@ export const GroupCallView: FC<Props> = ({
     [memberships],
   );
 
-  const deviceContext = useMediaDevices();
-  const latestDevices = useLatest(deviceContext);
+  const mediaDevices = useMediaDevices();
   const latestMuteStates = useLatest(muteStates);
 
   const enterRTCSessionOrError = useCallback(
@@ -240,7 +249,7 @@ export const GroupCallView: FC<Props> = ({
           logger.debug(
             `Found audio input ID ${deviceId} for name ${audioInput}`,
           );
-          latestDevices.current!.audioInput.select(deviceId);
+          mediaDevices.audioInput.select(deviceId);
         }
       }
 
@@ -254,7 +263,7 @@ export const GroupCallView: FC<Props> = ({
           logger.debug(
             `Found video input ID ${deviceId} for name ${videoInput}`,
           );
-          latestDevices.current!.videoInput.select(deviceId);
+          mediaDevices.videoInput.select(deviceId);
         }
       }
     };
@@ -296,7 +305,7 @@ export const GroupCallView: FC<Props> = ({
     preload,
     skipLobby,
     perParticipantE2EE,
-    latestDevices,
+    mediaDevices,
     latestMuteStates,
     enterRTCSessionOrError,
     useNewMembershipManager,

src/room/InCallView.test.tsx

@@ -31,6 +31,7 @@ import {
   mockLocalParticipant,
   mockMatrixRoom,
   mockMatrixRoomMember,
+  mockMediaDevices,
   mockRemoteParticipant,
   mockRtcMembership,
   type MockRTCSession,
@@ -45,6 +46,7 @@ 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;
@@ -147,41 +149,43 @@ function createInCallView(): RenderResult & {
   rtcSession.joined = true;
   const renderResult = render(
     <BrowserRouter>
-      <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>
+      <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>
     </BrowserRouter>,
   );
   return {

src/room/InCallView.tsx

@@ -96,7 +96,6 @@ import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
 import {
   debugTileLayout as debugTileLayoutSetting,
   useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
-  muteAllAudio as muteAllAudioSetting,
   developerMode as developerModeSetting,
   useSetting,
 } from "../settings/settings";
@@ -104,6 +103,8 @@ import { ReactionsReader } from "../reactions/ReactionsReader";
 import { ConnectionLostError } from "../utils/errors.ts";
 import { useTypedEventEmitter } from "../useEvents.ts";
 import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
+import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
+import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships.ts";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -147,8 +148,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
           logger.error("[Lifecycle] Failed to disconnect from livekit room", e);
         });
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [livekitRoom]);
 
   useEffect(() => {
     if (livekitRoom !== undefined) {
@@ -172,7 +172,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   if (livekitRoom === undefined || vm === null) return null;
 
   return (
-    <RoomContext.Provider value={livekitRoom}>
+    <RoomContext value={livekitRoom}>
       <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
         <InCallView
           {...props}
@@ -181,7 +181,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
           connState={connState}
         />
       </ReactionsSenderProvider>
-    </RoomContext.Provider>
+    </RoomContext>
   );
 };
 
@@ -235,7 +235,7 @@ export const InCallView: FC<InCallViewProps> = ({
     room: livekitRoom,
   });
 
-  const [muteAllAudio] = useSetting(muteAllAudioSetting);
+  const muteAllAudio = useObservableEagerState(muteAllAudio$);
 
   // This seems like it might be enough logic to use move it into the call view model?
   const [didFallbackToRoomKey, setDidFallbackToRoomKey] = useState(false);
@@ -250,6 +250,7 @@ export const InCallView: FC<InCallViewProps> = ({
     useExperimentalToDeviceTransportSetting,
   );
   const encryptionSystem = useRoomEncryptionSystem(rtcSession.room.roomId);
+  const memberships = useMatrixRTCSessionMemberships(rtcSession);
 
   const showToDeviceEncryption = useMemo(
     () =>
@@ -723,10 +724,7 @@ export const InCallView: FC<InCallViewProps> = ({
           </Text>
         )
       }
-      <MatrixAudioRenderer
-        members={rtcSession.memberships}
-        muted={muteAllAudio}
-      />
+      <MatrixAudioRenderer members={memberships} muted={muteAllAudio} />
       {renderContent()}
       <CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />

src/room/InviteModal.tsx

@@ -19,7 +19,7 @@ import {
   LinkIcon,
   CheckIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
-import useClipboard from "react-use-clipboard";
+import copy from "copy-to-clipboard";
 
 import { Modal } from "../Modal";
 import { getAbsoluteRoomUrl } from "../utils/matrix";
@@ -42,18 +42,17 @@ export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
     () => getAbsoluteRoomUrl(room.roomId, e2eeSystem, room.name),
     [e2eeSystem, room.name, room.roomId],
   );
-  const [, setCopied] = useClipboard(url);
   const [toastOpen, setToastOpen] = useState(false);
   const onToastDismiss = useCallback(() => setToastOpen(false), [setToastOpen]);
 
   const onButtonClick = useCallback(
     (e: MouseEvent) => {
       e.stopPropagation();
-      setCopied();
+      copy(url);
       onDismiss();
       setToastOpen(true);
     },
-    [setCopied, onDismiss],
+    [url, onDismiss],
   );
 
   return (

src/room/LobbyView.tsx

@@ -24,7 +24,7 @@ import {
   type LocalVideoTrack,
   Track,
 } from "livekit-client";
-import { useObservable } from "observable-hooks";
+import { useObservable, useObservableEagerState } 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 "../livekit/MediaDevicesContext";
+import { useMediaDevices } from "../MediaDevicesContext";
 import { useInitial } from "../useInitial";
 import { useSwitchCamera as useShowSwitchCamera } from "./useSwitchCamera";
 import {
@@ -53,6 +53,8 @@ import {
   useTrackProcessorSync,
 } from "../livekit/TrackProcessorContext";
 import { usePageTitle } from "../usePageTitle";
+import { useLatest } from "../useLatest";
+import { getValue } from "../utils/observable";
 
 interface Props {
   client: MatrixClient;
@@ -125,13 +127,18 @@ 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: devices.audioInput.selectedId },
+      muteStates.audio.enabled && {
+        deviceId: getValue(devices.audioInput.selected$)?.id,
+      },
   );
 
   const { processor } = useTrackProcessor();
@@ -147,25 +154,26 @@ 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: devices.videoInput.selectedId,
+        deviceId: videoInputId,
         processor: initialProcessor,
       },
     }),
     [
       initialAudioOptions,
       muteStates.video.enabled,
-      devices.videoInput.selectedId,
+      videoInputId,
       initialProcessor,
     ],
   );
 
+  const latestMuteStates = useLatest(muteStates);
   const onError = useCallback(
     (error: Error) => {
       logger.error("Error while creating preview Tracks:", error);
-      muteStates.audio.setEnabled?.(false);
-      muteStates.video.setEnabled?.(false);
+      latestMuteStates.current.audio.setEnabled?.(false);
+      latestMuteStates.current.video.setEnabled?.(false);
     },
-    [muteStates.audio, muteStates.video],
+    [latestMuteStates],
   );
 
   const tracks = usePreviewTracks(localTrackOptions, onError);

src/room/MuteStates.test.tsx

@@ -5,20 +5,29 @@ 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, vi } from "vitest";
+import {
+  afterAll,
+  afterEach,
+  describe,
+  expect,
+  it,
+  onTestFinished,
+  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 {
-  type DeviceLabel,
-  type MediaDevice,
-  type MediaDevices,
-  MediaDevicesContext,
-} from "../livekit/MediaDevicesContext";
+import { MediaDevicesContext } from "../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;
@@ -73,16 +82,6 @@ const mockCamera: MediaDeviceInfo = {
   },
 };
 
-function mockDevices(available: Map<string, DeviceLabel>): MediaDevice {
-  return {
-    available,
-    selectedId: "",
-    selectedGroupId: "",
-    select: (): void => {},
-    useAsEarpiece: false,
-  };
-}
-
 function mockMediaDevices(
   {
     microphone,
@@ -94,21 +93,21 @@ function mockMediaDevices(
     camera?: boolean;
   } = { microphone: true, speaker: true, camera: true },
 ): MediaDevices {
-  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 => {},
-  };
+  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);
 }
 
 describe("useMuteStates", () => {
@@ -125,14 +124,14 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider
+        <MediaDevicesContext
           value={mockMediaDevices({
             microphone: false,
             camera: false,
           })}
         >
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -144,9 +143,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
@@ -160,9 +159,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent isJoined />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -179,9 +178,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -193,9 +192,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter initialEntries={["/room/?skipLobby=true"]}>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -206,7 +205,12 @@ 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(
@@ -220,13 +224,13 @@ describe("useMuteStates", () => {
 
       return (
         <MemoryRouter>
-          <MediaDevicesContext.Provider value={devices}>
+          <MediaDevicesContext value={devices}>
             <TestComponent />
             <button onClick={onConnectDevicesClick}>Connect devices</button>
             <button onClick={onDisconnectDevicesClick}>
               Disconnect devices
             </button>
-          </MediaDevicesContext.Provider>
+          </MediaDevicesContext>
         </MemoryRouter>
       );
     };

src/room/MuteStates.ts

@@ -14,11 +14,14 @@ 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,
-  useMediaDevices,
-} from "../livekit/MediaDevicesContext";
+} from "../state/MediaDevices";
+import { useMediaDevices } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import { ElementWidgetActions, widget } from "../widget";
 import { Config } from "../config/Config";
@@ -53,24 +56,24 @@ export interface MuteStates {
 }
 
 function useMuteState(
-  device: MediaDevice,
+  device: MediaDevice<DeviceLabel, SelectedDevice>,
   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 ?? (device.available.size > 0 ? enabledByDefault() : undefined),
-    [device],
+    (prev) => prev ?? (available.size > 0 ? enabledByDefault() : undefined),
+    [available.size],
   );
   return useMemo(
     () =>
-      device.available.size === 0
+      available.size === 0
         ? deviceUnavailable
         : {
             enabled: enabled ?? false,
             setEnabled: setEnabled as Dispatch<SetStateAction<boolean>>,
           },
-    [device, enabled, setEnabled],
+    [available.size, enabled, setEnabled],
   );
 }
 

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

@@ -108,7 +108,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -119,12 +119,12 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.484 5.484 0 0 0-.184 1.069A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 0 0 20.5 20.5l-.979-.979.004-.002L7.145 7.14l-.002.004L3.5 3.5Zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.474 5.474 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.497 4.497 0 0 1 22 15.5Z"
+                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Connection lost
           </h1>
@@ -135,7 +135,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
             Reconnect
           </button>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -258,7 +258,7 @@ exports[`should have a close button in widget mode 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -269,17 +269,17 @@ exports[`should have a close button in widget mode 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M16.712 6.713A.968.968 0 0 1 16 7a.968.968 0 0 1-.713-.287A.967.967 0 0 1 15 6c0-.283.096-.52.287-.713A.968.968 0 0 1 16 5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713Z"
+                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
               />
               <path
                 clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6Zm12 2H6v4h12V4ZM6 12v-2h12v2H6Zm0 2v2h12v-2H6Zm0 6v-2h12v2H6Z"
+                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
                 fill-rule="evenodd"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Call is not supported
           </h1>
@@ -287,7 +287,7 @@ exports[`should have a close button in widget mode 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
-            class="_button_i91xf_17"
+            class="_button_vczzf_8"
             data-kind="primary"
             data-size="lg"
             role="button"
@@ -410,7 +410,7 @@ exports[`should render the error page with link back to home 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -421,17 +421,17 @@ exports[`should render the error page with link back to home 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M16.712 6.713A.968.968 0 0 1 16 7a.968.968 0 0 1-.713-.287A.967.967 0 0 1 15 6c0-.283.096-.52.287-.713A.968.968 0 0 1 16 5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713Z"
+                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
               />
               <path
                 clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6Zm12 2H6v4h12V4ZM6 12v-2h12v2H6Zm0 2v2h12v-2H6Zm0 6v-2h12v2H6Z"
+                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
                 fill-rule="evenodd"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Call is not supported
           </h1>
@@ -439,7 +439,7 @@ exports[`should render the error page with link back to home 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -562,7 +562,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -573,17 +573,17 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M16.712 6.713A.968.968 0 0 1 16 7a.968.968 0 0 1-.713-.287A.967.967 0 0 1 15 6c0-.283.096-.52.287-.713A.968.968 0 0 1 16 5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713Z"
+                d="M16.713 6.713A.97.97 0 0 1 16 7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 15 6q0-.424.287-.713A.97.97 0 0 1 16 5q.424 0 .712.287Q17 5.576 17 6t-.288.713"
               />
               <path
                 clip-rule="evenodd"
-                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6Zm12 2H6v4h12V4ZM6 12v-2h12v2H6Zm0 2v2h12v-2H6Zm0 6v-2h12v2H6Z"
+                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
                 fill-rule="evenodd"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Call is not supported
           </h1>
@@ -591,7 +591,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
             The server is not configured to work with Element Call. Please contact your server admin (Domain: example.com, Error Code: MISSING_MATRIX_RTC_FOCUS).
           </p>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -714,7 +714,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -725,12 +725,12 @@ exports[`should report correct error for 'Connection lost' 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.484 5.484 0 0 0-.184 1.069A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 0 0 20.5 20.5l-.979-.979.004-.002L7.145 7.14l-.002.004L3.5 3.5Zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.474 5.474 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.497 4.497 0 0 1 22 15.5Z"
+                d="M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.5 5.5 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.47 5.47 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 22 15.5"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Connection lost
           </h1>
@@ -741,7 +741,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
             Reconnect
           </button>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -864,7 +864,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -875,12 +875,12 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"
+                d="M4 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 2 18V6q0-.824.587-1.412A1.93 1.93 0 0 1 4 4h16q.824 0 1.413.588Q22 5.175 22 6v12q0 .824-.587 1.413A1.93 1.93 0 0 1 20 20zm0-2h16V8H4z"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Incompatible browser
           </h1>
@@ -888,7 +888,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
             Your web browser does not support encrypted calls. Supported browsers include Chrome, Safari, and Firefox 117+.
           </p>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -1011,7 +1011,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
           class="error"
         >
           <div
-            class="_content_md016_17 icon"
+            class="_content_o77nw_8 icon"
             data-size="large"
           >
             <svg
@@ -1022,12 +1022,12 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+                d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
               />
             </svg>
           </div>
           <h1
-            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
           >
             Insufficient capacity
           </h1>
@@ -1035,7 +1035,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
             The server has reached its maximum capacity and you cannot join the call at this time. Try again later, or contact your server admin if the problem persists.
           </p>
           <button
-            class="_button_i91xf_17 homeLink"
+            class="_button_vczzf_8 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"

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

@@ -46,8 +46,8 @@ exports[`InCallView > rendering > renders 1`] = `
       >
         <button
           aria-disabled="false"
-          aria-labelledby=":r0:"
-          class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+          aria-labelledby="«r0»"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_mute"
@@ -63,14 +63,14 @@ exports[`InCallView > rendering > renders 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.949 7.949 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5L8 8Zm9.417 6.583 1.478 1.477A7.963 7.963 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583ZM8.073 5.238l7.793 7.793c.087-.329.134-.674.134-1.031V6a4 4 0 0 0-7.927-.762Z"
+              d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
             />
           </svg>
         </button>
         <button
           aria-disabled="false"
-          aria-labelledby=":r5:"
-          class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+          aria-labelledby="«r5»"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_videomute"
@@ -86,13 +86,13 @@ exports[`InCallView > rendering > renders 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A1.992 1.992 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414ZM18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715v1.45Z"
+              d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A2 2 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414M18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715z"
             />
           </svg>
         </button>
         <button
-          aria-labelledby=":ra:"
-          class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
+          aria-labelledby="«ra»"
+          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="secondary"
           data-size="lg"
           role="button"
@@ -107,13 +107,13 @@ exports[`InCallView > rendering > renders 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286.085.034.17.07.253.106.531.23 1.162.16 1.572-.25a1.269 1.269 0 0 1 1.794 0l1.034 1.035a1.269 1.269 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572.036.084.07.168.105.253.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935-.033.085-.068.17-.104.253-.232.531-.161 1.162.248 1.572a1.269 1.269 0 0 1 0 1.794l-1.034 1.034a1.269 1.269 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a7.935 7.935 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a7.975 7.975 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.269 1.269 0 0 1-1.794 0l-1.034-1.034a1.269 1.269 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a7.89 7.89 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935.034-.085.07-.17.106-.253.23-.531.16-1.162-.25-1.572a1.269 1.269 0 0 1 0-1.794l1.035-1.034a1.269 1.269 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a7.93 7.93 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2h1.462ZM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
+              d="M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286q.128.052.253.106c.531.23 1.162.16 1.572-.25a1.27 1.27 0 0 1 1.794 0l1.034 1.035a1.27 1.27 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572l.105.253c.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935q-.05.128-.104.253c-.232.531-.161 1.162.248 1.572a1.27 1.27 0 0 1 0 1.794l-1.034 1.034a1.27 1.27 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a8 8 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a8 8 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.27 1.27 0 0 1-1.794 0l-1.034-1.034a1.27 1.27 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a8 8 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935q.052-.128.106-.253c.23-.531.16-1.162-.25-1.572a1.27 1.27 0 0 1 0-1.794l1.035-1.034a1.27 1.27 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a8 8 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2zM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
             />
           </svg>
         </button>
         <button
-          aria-labelledby=":rf:"
-          class="_button_i91xf_17 endCall _has-icon_i91xf_66 _icon-only_i91xf_59 _destructive_i91xf_116"
+          aria-labelledby="«rf»"
+          class="_button_vczzf_8 endCall _has-icon_vczzf_57 _icon-only_vczzf_50 _destructive_vczzf_107"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"
@@ -129,7 +129,7 @@ exports[`InCallView > rendering > renders 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="m2.765 16.02-2.47-2.416A1.018 1.018 0 0 1 0 12.852c0-.304.098-.555.295-.751a15.64 15.64 0 0 1 5.316-3.786A15.89 15.89 0 0 1 12 7c2.237 0 4.367.443 6.39 1.329a15.977 15.977 0 0 1 5.315 3.772c.197.196.295.447.295.751 0 .305-.098.555-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.067 1.067 0 0 1-.322-.376 1.066 1.066 0 0 1-.108-.483v-2.27a13.593 13.593 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.175.175c-.715.116-1.422.29-2.12.523v2.271c0 .179-.036.34-.108.483a1.066 1.066 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107Z"
+              d="m2.765 16.02-2.47-2.416A1.02 1.02 0 0 1 0 12.852q0-.456.295-.751a15.6 15.6 0 0 1 5.316-3.786A15.9 15.9 0 0 1 12 7q3.355 0 6.39 1.329a16 16 0 0 1 5.315 3.772q.295.294.295.751t-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.1 1.1 0 0 1-.322-.376 1.1 1.1 0 0 1-.108-.483v-2.27a13.6 13.6 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.174.175q-1.074.174-2.121.523v2.271q0 .268-.108.483a1.1 1.1 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107"
             />
           </svg>
         </button>
@@ -138,7 +138,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="toggle layout"
       >
         <input
-          aria-labelledby=":rk:"
+          aria-labelledby="«rk»"
           name="layout"
           type="radio"
           value="spotlight"
@@ -152,11 +152,11 @@ exports[`InCallView > rendering > renders 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M5 5h14v8h-5a1 1 0 0 0-1 1v5H5V5Zm10 14v-4h4v4h-4ZM5 21h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2Z"
+            d="M5 5h14v8h-5a1 1 0 0 0-1 1v5H5zm10 14v-4h4v4zM5 21h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2"
           />
         </svg>
         <input
-          aria-labelledby=":rp:"
+          aria-labelledby="«rp»"
           checked=""
           name="layout"
           type="radio"
@@ -171,7 +171,7 @@ exports[`InCallView > rendering > renders 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Zm5-8a.968.968 0 0 1-.713-.287A.968.968 0 0 1 13 10V4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 14 3h6c.283 0 .52.096.712.288A.965.965 0 0 1 21 4v6a.97.97 0 0 1-.288.713A.968.968 0 0 1 20 11h-6Zm5-2V5h-4v4h4Z"
+            d="M4 11a.97.97 0 0 1-.712-.287A.97.97 0 0 1 3 10V4q0-.424.288-.712A.97.97 0 0 1 4 3h6q.424 0 .713.288Q11 3.575 11 4v6q0 .424-.287.713A.97.97 0 0 1 10 11zm5-2V5H5v4zm5 12a.97.97 0 0 1-.713-.288A.97.97 0 0 1 13 20v-6q0-.424.287-.713A.97.97 0 0 1 14 13h6q.424 0 .712.287.288.288.288.713v6q0 .424-.288.712A.97.97 0 0 1 20 21zm5-2v-4h-4v4zM4 21a.97.97 0 0 1-.712-.288A.97.97 0 0 1 3 20v-6q0-.424.288-.713A.97.97 0 0 1 4 13h6q.424 0 .713.287.287.288.287.713v6q0 .424-.287.712A.97.97 0 0 1 10 21zm5-2v-4H5v4zm5-8a.97.97 0 0 1-.713-.287A.97.97 0 0 1 13 10V4q0-.424.287-.712A.97.97 0 0 1 14 3h6q.424 0 .712.288Q21 3.575 21 4v6q0 .424-.288.713A.97.97 0 0 1 20 11zm5-2V5h-4v4z"
           />
         </svg>
       </div>

src/room/useActiveFocus.ts

@@ -9,11 +9,13 @@ import {
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type LivekitFocus, isLivekitFocus } from "matrix-js-sdk/lib/matrixrtc";
 
+import { useTypedEventEmitterState } from "../useEvents";
+
 /**
  * Gets the currently active (livekit) focus for a MatrixRTC session
  * This logic is specific to livekit foci where the whole call must use one
@@ -22,38 +24,27 @@ import { type LivekitFocus, isLivekitFocus } from "matrix-js-sdk/lib/matrixrtc";
 export function useActiveLivekitFocus(
   rtcSession: MatrixRTCSession,
 ): LivekitFocus | undefined {
-  const [activeFocus, setActiveFocus] = useState(() => {
-    const f = rtcSession.getActiveFocus();
-    // Only handle foci with type="livekit" for now.
-    return !!f && isLivekitFocus(f) ? f : undefined;
-  });
+  const activeFocus = useTypedEventEmitterState(
+    rtcSession,
+    MatrixRTCSessionEvent.MembershipsChanged,
+    useCallback(() => {
+      const f = rtcSession.getActiveFocus();
+      // Only handle foci with type="livekit" for now.
+      return !!f && isLivekitFocus(f) ? f : undefined;
+    }, [rtcSession]),
+  );
 
-  const onMembershipsChanged = useCallback(() => {
-    const newActiveFocus = rtcSession.getActiveFocus();
-    if (!!newActiveFocus && !isLivekitFocus(newActiveFocus)) return;
-    if (!deepCompare(activeFocus, newActiveFocus)) {
+  const prevActiveFocus = useRef(activeFocus);
+  useEffect(() => {
+    if (!deepCompare(activeFocus, prevActiveFocus.current)) {
       const oldestMembership = rtcSession.getOldestMembership();
       logger.warn(
         `Got new active focus from membership: ${oldestMembership?.sender}/${oldestMembership?.deviceId}.
-        Updating focus (focus switch) from ${JSON.stringify(activeFocus)} to ${JSON.stringify(newActiveFocus)}`,
+        Updated focus (focus switch) from ${JSON.stringify(prevActiveFocus.current)} to ${JSON.stringify(activeFocus)}`,
       );
-      setActiveFocus(newActiveFocus);
+      prevActiveFocus.current = activeFocus;
     }
   }, [activeFocus, rtcSession]);
 
-  useEffect(() => {
-    rtcSession.on(
-      MatrixRTCSessionEvent.MembershipsChanged,
-      onMembershipsChanged,
-    );
-
-    return (): void => {
-      rtcSession.off(
-        MatrixRTCSessionEvent.MembershipsChanged,
-        onMembershipsChanged,
-      );
-    };
-  });
-
   return activeFocus;
 }

src/room/useRoomName.ts

@@ -1,18 +1,19 @@
 /*
-Copyright 2023, 2024 New Vector Ltd.
+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 { type Room, RoomEvent } from "matrix-js-sdk";
-import { useState } from "react";
+import { useCallback } from "react";
 
-import { useTypedEventEmitter } from "../useEvents";
+import { useTypedEventEmitterState } from "../useEvents";
 
 export function useRoomName(room: Room): string {
-  const [, setNumUpdates] = useState(0);
-  // Whenever the name changes, force an update
-  useTypedEventEmitter(room, RoomEvent.Name, () => setNumUpdates((n) => n + 1));
-  return room.name;
+  return useTypedEventEmitterState(
+    room,
+    RoomEvent.Name,
+    useCallback(() => room.name, [room]),
+  );
 }

src/room/useRoomState.ts

@@ -5,10 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { useCallback, useMemo, useState } from "react";
-import { type RoomState, RoomStateEvent, type Room } from "matrix-js-sdk";
+import { useCallback } from "react";
+import {
+  type RoomState,
+  RoomStateEvent,
+  type Room,
+  RoomEvent,
+} from "matrix-js-sdk";
 
-import { useTypedEventEmitter } from "../useEvents";
+import { useTypedEventEmitterState } from "../useEvents";
 
 /**
  * A React hook for values computed from room state.
@@ -16,14 +21,17 @@ import { useTypedEventEmitter } from "../useEvents";
  * @param f A mapping from the current room state to the computed value.
  * @returns The computed value.
  */
-export const useRoomState = <T>(room: Room, f: (state: RoomState) => T): T => {
-  const [numUpdates, setNumUpdates] = useState(0);
-  useTypedEventEmitter(
+export function useRoomState<T>(room: Room, f: (state: RoomState) => T): T {
+  // TODO: matrix-js-sdk says that Room.currentState is deprecated, but it's not
+  // clear how to reactively track the current state of the room without it
+  const currentState = useTypedEventEmitterState(
     room,
-    RoomStateEvent.Update,
-    useCallback(() => setNumUpdates((n) => n + 1), [setNumUpdates]),
+    RoomEvent.CurrentStateUpdated,
+    useCallback(() => room.currentState, [room]),
   );
-  // We want any change to the update counter to trigger an update here
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(() => f(room.currentState), [room, f, numUpdates]);
-};
+  return useTypedEventEmitterState(
+    currentState,
+    RoomStateEvent.Update,
+    useCallback(() => f(currentState), [f, currentState]),
+  );
+}

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 "../livekit/MediaDevicesContext";
+import { useMediaDevices } from "../MediaDevicesContext";
 import { platform } from "../Platform";
 import { useLatest } from "../useLatest";
 

src/rtcSessionHelpers.ts

@@ -121,10 +121,18 @@ export async function enterRTCSession(
       ...(useDeviceSessionMemberEvents !== undefined && {
         useLegacyMemberEvents: !useDeviceSessionMemberEvents,
       }),
+      delayedLeaveEventRestartMs:
+        matrixRtcSessionConfig?.delayed_leave_event_restart_ms ??
+        matrixRtcSessionConfig?.membership_keep_alive_period,
       delayedLeaveEventDelayMs:
+        matrixRtcSessionConfig?.delayed_leave_event_delay_ms ??
         matrixRtcSessionConfig?.membership_server_side_expiry_timeout,
-      networkErrorRetryMs: matrixRtcSessionConfig?.membership_keep_alive_period,
-      makeKeyDelay: matrixRtcSessionConfig?.key_rotation_on_leave_delay,
+      networkErrorRetryMs: matrixRtcSessionConfig?.network_error_retry_ms,
+      makeKeyDelay:
+        matrixRtcSessionConfig?.wait_for_key_rotation_ms ??
+        matrixRtcSessionConfig?.key_rotation_on_leave_delay,
+      membershipEventExpiryMs:
+        matrixRtcSessionConfig?.membership_event_expiry_ms,
       useExperimentalToDeviceTransport,
     },
   );

src/settings/DeviceSelection.tsx

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

src/settings/FeedbackSettingsTab.tsx

@@ -57,7 +57,7 @@ export const FeedbackSettingsTab: FC<Props> = ({ roomId }) => {
 
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const optInDescription = (
-    <Text size="sm">
+    <Text size="sm" as="span">
       <Trans i18nKey="settings.opt_in_description">
         <AnalyticsNotice />
         <br />

src/settings/SettingsModal.tsx

@@ -5,21 +5,20 @@ 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, useState } from "react";
+import { type FC, type ReactNode, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { type MatrixClient } from "matrix-js-sdk";
-import { Root as Form, Separator } from "@vector-im/compound-web";
+import { Button, Root as Form, Separator } from "@vector-im/compound-web";
 import { type Room as LivekitRoom } from "livekit-client";
+import { useObservableEagerState } from "observable-hooks";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
 import { type Tab, TabContainer } from "../tabs/Tabs";
 import { ProfileSettingsTab } from "./ProfileSettingsTab";
 import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
-import {
-  useMediaDevices,
-  useMediaDeviceNames,
-} from "../livekit/MediaDevicesContext";
+import { iosDeviceMenu$ } from "../state/MediaDevices";
+import { useMediaDevices } from "../MediaDevicesContext";
 import { widget } from "../widget";
 import {
   useSetting,
@@ -34,6 +33,7 @@ import { useTrackProcessor } from "../livekit/TrackProcessorContext";
 import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
 import { FieldRow, InputField } from "../input/Input";
 import { useSubmitRageshake } from "./submit-rageshake";
+import { useUrlParams } from "../UrlParams";
 
 type SettingsTab =
   | "audio"
@@ -95,26 +95,52 @@ export const SettingsModal: FC<Props> = ({
   };
 
   const devices = useMediaDevices();
-  useMediaDeviceNames(devices, open);
+  useEffect(() => {
+    if (open) devices.requestDeviceNames();
+  }, [open, devices]);
+
   const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);
   const [soundVolumeRaw, setSoundVolumeRaw] = useState(soundVolume);
   const [showDeveloperSettingsTab] = useSetting(developerMode);
 
   const { available: isRageshakeAvailable } = useSubmitRageshake();
 
+  // For controlled devices, we will not show the input section:
+  // Controlled media devices are used on mobile platforms, where input and output are grouped into
+  // a single device. These are called "headset" or "speaker" (or similar) but contain both input and output.
+  // On EC, we decided that it is less confusing for the user if they see those options in the output section
+  // rather than the input section.
+  const { controlledAudioDevices } = useUrlParams();
+  // If we are on iOS we will show a button to open the native audio device picker.
+  const iosDeviceMenu = useObservableEagerState(iosDeviceMenu$);
+
   const audioTab: Tab<SettingsTab> = {
     key: "audio",
     name: t("common.audio"),
     content: (
       <>
         <Form>
-          <DeviceSelection
-            device={devices.audioInput}
-            title={t("settings.devices.microphone")}
-            numberedLabel={(n) =>
-              t("settings.devices.microphone_numbered", { n })
-            }
-          />
+          {!controlledAudioDevices && (
+            <DeviceSelection
+              device={devices.audioInput}
+              title={t("settings.devices.microphone")}
+              numberedLabel={(n) =>
+                t("settings.devices.microphone_numbered", { n })
+              }
+            />
+          )}
+          {iosDeviceMenu && controlledAudioDevices && (
+            <Button
+              onClick={(e): void => {
+                e.preventDefault();
+                window.controls.showNativeAudioDevicePicker?.();
+                // call deprecated method for backwards compatibility.
+                window.controls.showNativeOutputDevicePicker?.();
+              }}
+            >
+              {t("settings.devices.change_device_button")}
+            </Button>
+          )}
           <DeviceSelection
             device={devices.audioOutput}
             title={t("settings.devices.speaker")}

src/settings/settings.ts

@@ -133,6 +133,6 @@ export const muteAllAudio = new Setting<boolean>("mute-all-audio", false);
 export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);
 
 export const alwaysShowIphoneEarpiece = new Setting<boolean>(
-  "always-show-iphone-earpice",
+  "always-show-iphone-earpiece",
   false,
 );

src/state/AppViewModel.ts

@@ -0,0 +1,19 @@
+/*
+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/CallViewModel.test.ts

@@ -26,11 +26,11 @@ import {
   type RemoteParticipant,
 } from "livekit-client";
 import * as ComponentsCore from "@livekit/components-core";
-import { isEqual } from "lodash-es";
 import {
   type CallMembership,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
+import { deepCompare } from "matrix-js-sdk/lib/utils";
 
 import { CallViewModel, type Layout } from "./CallViewModel";
 import {
@@ -200,7 +200,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
     // care about the most recent value for each time step, so discard these
     // extra values.
     debounceTime(0),
-    distinctUntilChanged(isEqual),
+    distinctUntilChanged(deepCompare),
   );
 }
 

src/state/MediaDevices.ts

@@ -0,0 +1,366 @@
+/*
+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,8 +430,6 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
 }
 
 /**
-        },
-        },
  * The local participant's user media.
  */
 export class LocalUserMediaViewModel extends BaseUserMediaViewModel {

src/state/MuteAllAudioModel.test.ts

@@ -0,0 +1,36 @@
+/*
+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 { test, vi } from "vitest";
+import { expect } from "vitest";
+
+import { setAudioEnabled$ } from "../controls";
+import { muteAllAudio as muteAllAudioSetting } from "../settings/settings";
+import { muteAllAudio$ } from "./MuteAllAudioModel";
+
+test("muteAllAudio$", () => {
+  const valueMock = vi.fn();
+  const muteAllAudio = muteAllAudio$.subscribe((value) => {
+    valueMock(value);
+  });
+
+  setAudioEnabled$.next(false);
+  setAudioEnabled$.next(true);
+  muteAllAudioSetting.setValue(false);
+  muteAllAudioSetting.setValue(true);
+  setAudioEnabled$.next(false);
+
+  muteAllAudio.unsubscribe();
+
+  expect(valueMock).toHaveBeenCalledTimes(6);
+  expect(valueMock).toHaveBeenNthCalledWith(1, false); // startWith([false, muteAllAudioSetting.getValue()]);
+  expect(valueMock).toHaveBeenNthCalledWith(2, true); // setAudioEnabled$.next(false);
+  expect(valueMock).toHaveBeenNthCalledWith(3, false); // setAudioEnabled$.next(true);
+  expect(valueMock).toHaveBeenNthCalledWith(4, false); // muteAllAudioSetting.setValue(false);
+  expect(valueMock).toHaveBeenNthCalledWith(5, true); // muteAllAudioSetting.setValue(true);
+  expect(valueMock).toHaveBeenNthCalledWith(6, true); // setAudioEnabled$.next(false);
+});

src/state/MuteAllAudioModel.ts

@@ -0,0 +1,19 @@
+/*
+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, startWith } from "rxjs";
+
+import { setAudioEnabled$ } from "../controls";
+import { muteAllAudio as muteAllAudioSetting } from "../settings/settings";
+
+/**
+ * This can transition into sth more complete: `GroupCallViewModel.ts`
+ */
+export const muteAllAudio$ = combineLatest(
+  [setAudioEnabled$.pipe(startWith(true)), muteAllAudioSetting.value$],
+  (outputEnabled, settingsMute) => !outputEnabled || settingsMute,
+);

src/tabs/Tabs.tsx

@@ -36,6 +36,7 @@ export function TabContainer<K extends Key>({
       <NavBar role="tablist" aria-label={label} className={styles.tabList}>
         {tabs.map(({ key, name }) => (
           <NavItem
+            key={key}
             aria-controls={`${idPrefix}[${key}]`}
             onClick={() => onTabChange(key)}
             active={key === tab}
@@ -46,6 +47,7 @@ export function TabContainer<K extends Key>({
       </NavBar>
       {tabs.map(({ key, content }) => (
         <div
+          key={key}
           id={`${idPrefix}[${key}]`}
           style={{ display: key === tab ? undefined : "none" }}
         >

src/tile/MediaView.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { VideoTrack } from "@livekit/components-react";
 import { Text, Tooltip } from "@vector-im/compound-web";
-import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
@@ -168,7 +168,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
                 placement="bottom"
                 isTriggerInteractive={false}
               >
-                <ErrorIcon
+                <ErrorSolidIcon
                   width={20}
                   height={20}
                   className={styles.errorIcon}

src/useAudioContext.test.tsx

@@ -9,10 +9,13 @@ import { expect, vi, afterEach, beforeEach, test } from "vitest";
 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 { deviceStub, MediaDevicesContext } from "./livekit/MediaDevicesContext";
+import { MediaDevicesContext } from "./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),
@@ -38,6 +41,13 @@ const TestComponent: FC = () => {
     </>
   );
 };
+const TestComponentWrapper: FC = () => {
+  return (
+    <BrowserRouter>
+      <TestComponent />
+    </BrowserRouter>
+  );
+};
 
 const gainNode = vi.mocked(
   {
@@ -94,36 +104,38 @@ afterEach(() => {
 });
 
 test("can play a single sound", async () => {
-  const { findByText } = render(<TestComponent />);
+  const { findByText } = render(
+    <MediaDevicesContext value={mockMediaDevices({})}>
+      <TestComponentWrapper />
+    </MediaDevicesContext>,
+  );
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.createBufferSource).toHaveBeenCalledOnce();
 });
 
 test("will ignore sounds that are not registered", async () => {
-  const { findByText } = render(<TestComponent />);
+  const { findByText } = render(
+    <MediaDevicesContext value={mockMediaDevices({})}>
+      <TestComponentWrapper />
+    </MediaDevicesContext>,
+  );
   await user.click(await findByText("Invalid sound"));
   expect(testAudioContext.createBufferSource).not.toHaveBeenCalled();
 });
 
 test("will use the correct device", () => {
   render(
-    <MediaDevicesContext.Provider
-      value={{
-        audioInput: deviceStub,
+    <MediaDevicesContext
+      value={mockMediaDevices({
         audioOutput: {
-          selectedId: "chosen-device",
-          selectedGroupId: "",
-          available: new Map(),
+          available$: of(new Map<never, never>()),
+          selected$: of({ id: "chosen-device", virtualEarpiece: false }),
           select: () => {},
-          useAsEarpiece: false,
         },
-        videoInput: deviceStub,
-        startUsingDeviceNames: () => {},
-        stopUsingDeviceNames: () => {},
-      }}
+      })}
     >
-      <TestComponent />
-    </MediaDevicesContext.Provider>,
+      <TestComponentWrapper />
+    </MediaDevicesContext>,
   );
   expect(testAudioContext.createBufferSource).not.toHaveBeenCalled();
   expect(testAudioContext.setSinkId).toHaveBeenCalledWith("chosen-device");
@@ -131,7 +143,11 @@ test("will use the correct device", () => {
 
 test("will use the correct volume level", async () => {
   soundEffectVolumeSetting.setValue(0.33);
-  const { findByText } = render(<TestComponent />);
+  const { findByText } = render(
+    <MediaDevicesContext value={mockMediaDevices({})}>
+      <TestComponentWrapper />
+    </MediaDevicesContext>,
+  );
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.gain.gain.setValueAtTime).toHaveBeenCalledWith(
     0.33,
@@ -140,25 +156,19 @@ test("will use the correct volume level", async () => {
   expect(testAudioContext.pan.pan.setValueAtTime).toHaveBeenCalledWith(0, 0);
 });
 
-test("will use the pan if earpice is selected", async () => {
+test("will use the pan if earpiece is selected", async () => {
   const { findByText } = render(
-    <MediaDevicesContext.Provider
-      value={{
-        audioInput: deviceStub,
+    <MediaDevicesContext
+      value={mockMediaDevices({
         audioOutput: {
-          selectedId: "chosen-device",
-          selectedGroupId: "",
-          available: new Map(),
+          available$: of(new Map<never, never>()),
+          selected$: of({ id: "chosen-device", virtualEarpiece: true }),
           select: () => {},
-          useAsEarpiece: true,
         },
-        videoInput: deviceStub,
-        startUsingDeviceNames: () => {},
-        stopUsingDeviceNames: () => {},
-      }}
+      })}
     >
-      <TestComponent />
-    </MediaDevicesContext.Provider>,
+      <TestComponentWrapper />
+    </MediaDevicesContext>,
   );
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.pan.pan.setValueAtTime).toHaveBeenCalledWith(1, 0);

src/useAudioContext.tsx

@@ -7,16 +7,16 @@ 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 "./livekit/MediaDevicesContext";
+import { useEarpieceAudioConfig, useMediaDevices } from "./MediaDevicesContext";
 import { type PrefetchedSounds } from "./soundUtils";
+import { useUrlParams } from "./UrlParams";
+import * as controls from "./controls";
 
 /**
  * Play a sound though a given AudioContext. Will take
@@ -41,6 +41,7 @@ async function playSound(
   src.buffer = buffer;
   src.connect(gain).connect(pan).connect(ctx.destination);
   const p = new Promise<void>((r) => src.addEventListener("ended", () => r()));
+  controls.setPlaybackStarted();
   src.start();
   return p;
 }
@@ -70,8 +71,6 @@ export function useAudioContext<S extends string>(
   props: Props<S>,
 ): UseAudioContext<S> | null {
   const [soundEffectVolume] = useSetting(soundEffectVolumeSetting);
-  const { audioOutput } = useMediaDevices();
-
   const [audioContext, setAudioContext] = useState<AudioContext>();
   const [audioBuffers, setAudioBuffers] = useState<Record<S, AudioBuffer>>();
 
@@ -108,16 +107,25 @@ 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 (audioContext && "setSinkId" in audioContext) {
+    if (
+      audioContext &&
+      "setSinkId" in audioContext &&
+      !controlledAudioDevices
+    ) {
       // 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(audioOutput.selectedId).catch((ex) => {
+      audioContext.setSinkId(audioOutputId).catch((ex) => {
         logger.warn("Unable to change sink for audio context", ex);
       });
     }
-  }, [audioContext, audioOutput.selectedId]);
+  }, [audioContext, audioOutputId, controlledAudioDevices]);
   const { pan: earpiecePan, volume: earpieceVolume } = useEarpieceAudioConfig();
 
   // Don't return a function until we're ready.

src/useEvents.test.tsx

@@ -0,0 +1,88 @@
+/*
+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 { test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { type FC, useEffect, useState } from "react";
+import userEvent from "@testing-library/user-event";
+import { TypedEventEmitter } from "matrix-js-sdk";
+
+import { useTypedEventEmitterState } from "./useEvents";
+
+class TestEmitter extends TypedEventEmitter<"change", { change: () => void }> {
+  private state = 1;
+  public readonly getState = (): number => this.state;
+  public readonly getNegativeState = (): number => -this.state;
+  public readonly setState = (value: number): void => {
+    this.state = value;
+    this.emit("change");
+  };
+}
+
+test("useTypedEventEmitterState reacts to events", async () => {
+  const user = userEvent.setup();
+  const emitter = new TestEmitter();
+
+  const Test: FC = () => {
+    const value = useTypedEventEmitterState(
+      emitter,
+      "change",
+      emitter.getState,
+    );
+    return (
+      <>
+        <button onClick={() => emitter.setState(2)}>Change value</button>
+        <div>Value is {value}</div>
+      </>
+    );
+  };
+
+  render(<Test />);
+  screen.getByText("Value is 1");
+  await user.click(screen.getByText("Change value"));
+  screen.getByText("Value is 2");
+});
+
+test("useTypedEventEmitterState reacts to changes made by an effect mounted on the same render", () => {
+  const emitter = new TestEmitter();
+
+  const Test: FC = () => {
+    useEffect(() => emitter.setState(2), []);
+    const value = useTypedEventEmitterState(
+      emitter,
+      "change",
+      emitter.getState,
+    );
+    return `Value is ${value}`;
+  };
+
+  render(<Test />);
+  screen.getByText("Value is 2");
+});
+
+test("useTypedEventEmitterState reacts to changes in getState", async () => {
+  const user = userEvent.setup();
+  const emitter = new TestEmitter();
+
+  const Test: FC = () => {
+    const [fn, setFn] = useState(() => emitter.getState);
+    const value = useTypedEventEmitterState(emitter, "change", fn);
+    return (
+      <>
+        <button onClick={() => setFn(() => emitter.getNegativeState)}>
+          Change getState
+        </button>
+        <div>Value is {value}</div>
+      </>
+    );
+  };
+
+  render(<Test />);
+  screen.getByText("Value is 1");
+  await user.click(screen.getByText("Change getState"));
+  screen.getByText("Value is -1");
+});

src/useEvents.ts

@@ -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 { useEffect } from "react";
+import { useCallback, useEffect, useSyncExternalStore } from "react";
 
 import type {
   Listener,
@@ -13,7 +13,9 @@ import type {
   TypedEventEmitter,
 } from "matrix-js-sdk/lib/models/typed-event-emitter";
 
-// Shortcut for registering a listener on an EventTarget
+/**
+ * Shortcut for registering a listener on an EventTarget.
+ */
 export function useEventTarget<T extends Event>(
   target: EventTarget | null | undefined,
   eventType: string,
@@ -33,7 +35,9 @@ export function useEventTarget<T extends Event>(
   }, [target, eventType, listener, options]);
 }
 
-// Shortcut for registering a listener on a TypedEventEmitter
+/**
+ * Shortcut for registering a listener on a TypedEventEmitter.
+ */
 export function useTypedEventEmitter<
   Events extends string,
   Arguments extends ListenerMap<Events>,
@@ -50,3 +54,33 @@ export function useTypedEventEmitter<
     };
   }, [emitter, eventType, listener]);
 }
+
+/**
+ * Reactively tracks a value which is recalculated whenever the provided event
+ * emitter emits an event. This is useful for bridging state from matrix-js-sdk
+ * into React.
+ */
+export function useTypedEventEmitterState<
+  Events extends string,
+  Arguments extends ListenerMap<Events>,
+  T extends Events,
+  State,
+>(
+  emitter: TypedEventEmitter<Events, Arguments>,
+  eventType: T,
+  getState: () => State,
+): State {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      emitter.on(eventType, onChange as Listener<Events, Arguments, T>);
+      return (): void => {
+        emitter.off(eventType, onChange as Listener<Events, Arguments, T>);
+      };
+    },
+    [emitter, eventType],
+  );
+  // See the React docs for useSyncExternalStore; given that we're trying to
+  // bridge state from an external source into React, using this hook is exactly
+  // what React recommends.
+  return useSyncExternalStore(subscribe, getState);
+}

src/useLocalStorage.test.tsx

@@ -0,0 +1,51 @@
+/*
+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 { test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { type FC, useEffect, useState } from "react";
+import userEvent from "@testing-library/user-event";
+
+import {
+  setLocalStorageItemReactive,
+  useLocalStorage,
+} from "./useLocalStorage";
+
+test("useLocalStorage reacts to changes made by an effect mounted on the same render", () => {
+  localStorage.clear();
+  const Test: FC = () => {
+    useEffect(() => setLocalStorageItemReactive("my-value", "Hello!"), []);
+    const [myValue] = useLocalStorage("my-value");
+    return myValue;
+  };
+  render(<Test />);
+  screen.getByText("Hello!");
+});
+
+test("useLocalStorage reacts to key changes", async () => {
+  localStorage.clear();
+  localStorage.setItem("value-1", "1");
+  localStorage.setItem("value-2", "2");
+
+  const Test: FC = () => {
+    const [key, setKey] = useState("value-1");
+    const [value] = useLocalStorage(key);
+    if (key !== `value-${value}`) throw new Error("Value is out of sync");
+    return (
+      <>
+        <button onClick={() => setKey("value-2")}>Switch keys</button>
+        <div>Value is: {value}</div>
+      </>
+    );
+  };
+  const user = userEvent.setup();
+  render(<Test />);
+
+  screen.getByText("Value is: 1");
+  await user.click(screen.getByRole("button", { name: "Switch keys" }));
+  screen.getByText("Value is: 2");
+});

src/useLocalStorage.ts

@@ -5,43 +5,44 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import EventEmitter from "events";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
+import { TypedEventEmitter } from "matrix-js-sdk";
+
+import { useTypedEventEmitterState } from "./useEvents";
 
 type LocalStorageItem = ReturnType<typeof localStorage.getItem>;
 
 // Bus to notify other useLocalStorage consumers when an item is changed
-export const localStorageBus = new EventEmitter();
+export const localStorageBus = new TypedEventEmitter<
+  string,
+  { [key: string]: () => void }
+>();
 
-// Like useState, but reads from and persists the value to localStorage
-export const useLocalStorage = (
+/**
+ * Like useState, but reads from and persists the value to localStorage
+ * This hook will not update when we write to localStorage.setItem(key, value) directly.
+ * For the hook to react either use the returned setter or `setLocalStorageItemReactive`.
+ */
+export function useLocalStorage(
   key: string,
-): [LocalStorageItem, (value: string) => void] => {
-  const [value, setValue] = useState<LocalStorageItem>(() =>
-    localStorage.getItem(key),
+): [LocalStorageItem, (value: string) => void] {
+  const value = useTypedEventEmitterState(
+    localStorageBus,
+    key,
+    useCallback(() => localStorage.getItem(key), [key]),
+  );
+  const setValue = useCallback(
+    (newValue: string) => setLocalStorageItemReactive(key, newValue),
+    [key],
   );
 
-  useEffect(() => {
-    localStorageBus.on(key, setValue);
-    return (): void => {
-      localStorageBus.off(key, setValue);
-    };
-  }, [key, setValue]);
+  return [value, setValue];
+}
 
-  return [
-    value,
-    useCallback(
-      (newValue: string) => {
-        setValue(newValue);
-        localStorage.setItem(key, newValue);
-        localStorageBus.emit(key, newValue);
-      },
-      [key, setValue],
-    ),
-  ];
-};
-
-export const setLocalStorageItem = (key: string, value: string): void => {
+export const setLocalStorageItemReactive = (
+  key: string,
+  value: string,
+): void => {
   localStorage.setItem(key, value);
-  localStorageBus.emit(key, value);
+  localStorageBus.emit(key);
 };

src/useMatrixRTCSessionJoinState.ts

@@ -10,33 +10,31 @@ import {
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { useEffect, useState } from "react";
+import { TypedEventEmitter } from "matrix-js-sdk";
+import { useCallback, useEffect } from "react";
+
+import { useTypedEventEmitterState } from "./useEvents";
+
+const dummySession = new TypedEventEmitter();
 
 export function useMatrixRTCSessionJoinState(
   rtcSession: MatrixRTCSession | undefined,
 ): boolean {
-  const [, setNumUpdates] = useState(0);
+  // React doesn't allow you to run a hook conditionally, so we have to plug in
+  // a dummy event emitter in case there is no rtcSession yet
+  const isJoined = useTypedEventEmitterState(
+    rtcSession ?? dummySession,
+    MatrixRTCSessionEvent.JoinStateChanged,
+    useCallback(() => rtcSession?.isJoined() ?? false, [rtcSession]),
+  );
 
   useEffect(() => {
-    if (rtcSession !== undefined) {
-      const onJoinStateChanged = (isJoined: boolean): void => {
-        logger.info(
-          `Session in room ${rtcSession.room.roomId} changed to ${
-            isJoined ? "joined" : "left"
-          }`,
-        );
-        setNumUpdates((n) => n + 1); // Force an update
-      };
-      rtcSession.on(MatrixRTCSessionEvent.JoinStateChanged, onJoinStateChanged);
+    logger.info(
+      `Session in room ${rtcSession?.room.roomId} changed to ${
+        isJoined ? "joined" : "left"
+      }`,
+    );
+  }, [rtcSession, isJoined]);
 
-      return (): void => {
-        rtcSession.off(
-          MatrixRTCSessionEvent.JoinStateChanged,
-          onJoinStateChanged,
-        );
-      };
-    }
-  }, [rtcSession]);
-
-  return rtcSession?.isJoined() ?? false;
+  return isJoined;
 }

src/useMatrixRTCSessionMemberships.ts

@@ -5,39 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { logger } from "matrix-js-sdk/lib/logger";
 import {
   type CallMembership,
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
+
+import { useTypedEventEmitterState } from "./useEvents";
 
 export function useMatrixRTCSessionMemberships(
   rtcSession: MatrixRTCSession,
 ): CallMembership[] {
-  const [memberships, setMemberships] = useState(rtcSession.memberships);
-
-  const onMembershipsChanged = useCallback(() => {
-    logger.info(
-      `Memberships changed for call in room ${rtcSession.room.roomId} (${rtcSession.memberships.length} members)`,
-    );
-    setMemberships(rtcSession.memberships);
-  }, [rtcSession]);
-
-  useEffect(() => {
-    rtcSession.on(
-      MatrixRTCSessionEvent.MembershipsChanged,
-      onMembershipsChanged,
-    );
-
-    return (): void => {
-      rtcSession.off(
-        MatrixRTCSessionEvent.MembershipsChanged,
-        onMembershipsChanged,
-      );
-    };
-  }, [rtcSession, onMembershipsChanged]);
-
-  return memberships;
+  return useTypedEventEmitterState(
+    rtcSession,
+    MatrixRTCSessionEvent.MembershipsChanged,
+    useCallback(() => rtcSession.memberships, [rtcSession]),
+  );
 }

src/useMediaQuery.ts

@@ -1,13 +1,11 @@
 /*
-Copyright 2023, 2024 New Vector Ltd.
+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 { useCallback, useMemo, useState } from "react";
-
-import { useEventTarget } from "./useEvents";
+import { useCallback, useMemo, useSyncExternalStore } from "react";
 
 /**
  * React hook that tracks whether the given media query matches.
@@ -15,14 +13,13 @@ import { useEventTarget } from "./useEvents";
 export function useMediaQuery(query: string): boolean {
   const mediaQuery = useMemo(() => window.matchMedia(query), [query]);
 
-  const [numChanges, setNumChanges] = useState(0);
-  useEventTarget(
-    mediaQuery,
-    "change",
-    useCallback(() => setNumChanges((n) => n + 1), [setNumChanges]),
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      mediaQuery.addEventListener("change", onChange);
+      return (): void => mediaQuery.removeEventListener("change", onChange);
+    },
+    [mediaQuery],
   );
-
-  // We want any change to the update counter to trigger an update here
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(() => mediaQuery.matches, [mediaQuery, numChanges]);
+  const getState = useCallback(() => mediaQuery.matches, [mediaQuery]);
+  return useSyncExternalStore(subscribe, getState);
 }

src/utils/observable.ts

@@ -38,3 +38,18 @@ 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,6 +46,7 @@ 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();
@@ -108,7 +109,7 @@ interface EmitterMock<T> {
   removeListener: () => T;
 }
 
-function mockEmitter<T>(): EmitterMock<T> {
+export function mockEmitter<T>(): EmitterMock<T> {
   return {
     on(): T {
       return this as T;
@@ -332,3 +333,18 @@ 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;
+}

tsconfig.json

@@ -22,6 +22,9 @@
       // These imports within @livekit/components-core and
       // @livekit/components-react are broken under the "bundler" module
       // resolution mode, so we need to resolve them manually
+      "livekit-client/dist/src/room/types": [
+        "./node_modules/livekit-client/dist/src/room/types.d.ts"
+      ],
       "livekit-client/dist/src/room/Room": [
         "./node_modules/livekit-client/dist/src/room/Room.d.ts"
       ],

vite-embedded.config.js

@@ -18,9 +18,9 @@ export default defineConfig((env) =>
             output: "./config.json",
             data: {
               matrix_rtc_session: {
-                key_rotation_on_leave_delay: 15000,
-                membership_keep_alive_period: 5000,
-                membership_server_side_expiry_timeout: 15000,
+                wait_for_key_rotation_ms: 5000,
+                delayed_leave_event_restart_ms: 4000,
+                delayed_leave_event_delay_ms: 18000,
               },
             },
           },

vite.config.js

@@ -89,6 +89,7 @@ export default defineConfig(({ mode, packageType }) => {
       },
     },
     build: {
+      minify: mode === "production" ? true : false,
       sourcemap: true,
       rollupOptions: {
         output: {