Merge pull request #3291 from element-hq:toger5/backport-disable-device-switching-and-update-state

Backport: Disable device switching when in controlled audio devices mode

.github/workflows/blocked.yaml

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

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

@@ -9,11 +9,6 @@ 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
@@ -42,8 +37,20 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         run: "yarn install --immutable"
-      - name: Build Element Call
-        run: ${{ format('yarn run build:{0}:{1}', inputs.package, inputs.build_mode) }}
+      - 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"
         env:
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}

.github/workflows/build.yaml

@@ -14,7 +14,6 @@ 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 }}
@@ -62,7 +61,6 @@ 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: 30
+    timeout-minutes: 10
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
@@ -46,12 +46,11 @@ jobs:
         run: yarn playwright install --with-deps
       - name: Run backend components
         run: |
-          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 compose -f playwright-backend-docker-compose.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-slim
+FROM nginxinc/nginx-unprivileged:alpine
 
 COPY --from=builder ./dist /app
 

backend/dev_nginx.conf

@@ -43,11 +43,6 @@ 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;
@@ -67,9 +62,8 @@ server {
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
 
-      # JWT Service running at port 6080
-      proxy_pass http://jwt-auth-services/;
-    
+      # JWT Service running at port 8080
+      proxy_pass http://auth-server:8080/;
     }
 
     location ^~ /livekit/sfu/ {

config/config.devenv.json

@@ -8,12 +8,5 @@
   "features": {
     "feature_use_device_session_member_events": true
   },
-  "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
-  }
+  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf"
 }

config/config.sample.json

@@ -11,12 +11,5 @@
   "features": {
     "feature_use_device_session_member_events": true
   },
-  "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
-  }
+  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf"
 }

config/config_netlify_preview.json

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

docs/controls.md

@@ -17,15 +17,5 @@ On mobile platforms (iOS, Android), web views do not reliably support selecting
 - `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.
-- `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.
-
-## Element Call button delegation
-
-Callbacks for buttons in EC that are handled by the native application
-
 - `showNativeAudioDevicePicker: (() => void) | undefined`. Callback called whenever the user presses the output button in the settings menu.
-  This button is only shown on iOS. (`/iPad|iPhone|iPod|Mac/.test(navigator.userAgent)`)
-- `onBackButtonPressed: (() => void) | undefined`. Callback when the webview detects a tab on the header's back button.
+  This button is only shown on iOS. (`userAgent.includes("iPhone")`)

docs/self-hosting.md

@@ -255,17 +255,13 @@ 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

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.1"
+android_gradle_plugin = "8.10.0"
 
 [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.32.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.31.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.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

embedded/android/lib/build.gradle.kts

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

package.json

@@ -8,11 +8,7 @@
     "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 .",
@@ -26,7 +22,6 @@
     "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",
@@ -48,17 +43,17 @@
     "@livekit/track-processors": "^0.5.5",
     "@mediapipe/tasks-vision": "^0.10.18",
     "@opentelemetry/api": "^1.4.0",
-    "@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/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/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": "^10.0.0",
+    "@react-spring/web": "^9.4.4",
     "@sentry/react": "^8.0.0",
     "@sentry/vite-plugin": "^3.0.0",
     "@stylistic/eslint-plugin": "^3.0.0",
@@ -74,27 +69,26 @@
     "@types/node": "^22.0.0",
     "@types/pako": "^2.0.3",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.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": "^4.0.0",
-    "@vector-im/compound-web": "^8.0.0",
+    "@vector-im/compound-design-tokens": "^3.0.0",
+    "@vector-im/compound-web": "^7.2.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.1.0",
+    "eslint-plugin-matrix-org": "^2.0.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-rxjs": "^5.0.3",
@@ -118,10 +112,11 @@
     "posthog-js": "1.160.3",
     "prettier": "^3.0.0",
     "qrcode": "^1.5.4",
-    "react": "19",
-    "react-dom": "19",
+    "react": "18",
+    "react-dom": "18",
     "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",
@@ -130,7 +125,7 @@
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
     "vite": "^6.0.0",
-    "vite-plugin-generate-file": "^0.3.0",
+    "vite-plugin-generate-file": "^0.2.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-svgr": "^4.0.0",
     "vitest": "^3.0.0",

playwright.config.ts

@@ -7,10 +7,6 @@ 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.
  */
@@ -29,7 +25,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,
+    baseURL: "https://localhost:3000",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -77,13 +73,9 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: "./scripts/playwright-webserver-command.sh",
-    url: baseURL,
+    command: "yarn dev",
+    url: "https://localhost:3000",
     reuseExistingServer: !process.env.CI,
     ignoreHTTPSErrors: true,
-    gracefulShutdown: {
-      signal: "SIGTERM",
-      timeout: 500,
-    },
   },
 });

playwright/fixtures/widget-user.ts

@@ -5,13 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  type Browser,
-  type Page,
-  test,
-  expect,
-  type JSHandle,
-} from "@playwright/test";
+import { type Page, test, expect, type JSHandle } from "@playwright/test";
 
 import type { MatrixClient } from "matrix-js-sdk";
 
@@ -36,8 +30,8 @@ const PASSWORD = "foobarbaz1!";
 const CONFIG_JSON = {
   default_server_config: {
     "m.homeserver": {
-      base_url: "https://synapse.m.localhost",
-      server_name: "synapse.m.localhost",
+      base_url: "http://synapse.localhost:8008",
+      server_name: "synapse.localhost",
     },
   },
 
@@ -69,72 +63,15 @@ const CONFIG_JSON = {
  * Set the Element Call URL in the dev tool settings using `window.mxSettingsStore` via `page.evaluate`.
  * @param page
  */
-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",
+async function setDevToolElementCallDevUrl(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    window.mxSettingsStore.setValue(
+      "Developer.elementCallUrl",
+      null,
+      "device",
+      "https://localhost:3000/room",
+    );
   });
-  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>({
@@ -146,17 +83,61 @@ export const widgetTest = test.extend<MyFixtures>({
     const userA = `brooks_${Date.now()}`;
     const userB = `whistler_${Date.now()}`;
 
-    // Register users
-    const {
-      page: ewPage1,
-      clientHandle: brooksClientHandle,
-      mxId: brooksMxId,
-    } = await registerUser(browser, userA);
-    const {
-      page: ewPage2,
-      clientHandle: whistlerClientHandle,
-      mxId: whistlerMxId,
-    } = await registerUser(browser, userB);
+    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))!;
 
     // Invite the second user
     await ewPage1.getByRole("button", { name: "Add room" }).click();

playwright/widget/simple-create.spec.ts

@@ -9,14 +9,11 @@ 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.slow(); // Triples the timeout
+  test.skip(
+    browserName === "firefox",
+    "This test is not working on firefox, after hangup brooks is locked in a strange state with a blank widget",
+  );
 
   const { brooks, whistler } = asWidget;
 

renovate.json

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

scripts/playwright-webserver-command.sh

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

src/ClientContext.tsx

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

src/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 { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ErrorIcon } 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={ErrorSolidIcon}
+          Icon={ErrorIcon}
           title={t("error.generic")}
           rageshake
           fatal

src/Header.tsx

@@ -6,7 +6,12 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { type Ref, type FC, type HTMLAttributes, type ReactNode } from "react";
+import {
+  type FC,
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
@@ -19,27 +24,23 @@ import { EncryptionLock } from "./room/EncryptionLock";
 import { useMediaQuery } from "./useMediaQuery";
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
-  ref?: Ref<HTMLElement>;
   children: ReactNode;
   className?: string;
 }
 
-export const Header: FC<HeaderProps> = ({
-  ref,
-  children,
-  className,
-  ...rest
-}) => {
-  return (
-    <header
-      ref={ref}
-      className={classNames(styles.header, className)}
-      {...rest}
-    >
-      {children}
-    </header>
-  );
-};
+export const Header = forwardRef<HTMLElement, HeaderProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <header
+        ref={ref}
+        className={classNames(styles.header, className)}
+        {...rest}
+      >
+        {children}
+      </header>
+    );
+  },
+);
 
 Header.displayName = "Header";
 

src/MediaDevicesContext.ts

@@ -1,56 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { createContext, use, useMemo } from "react";
-import { useObservableEagerState } from "observable-hooks";
-
-import { type MediaDevices } from "./state/MediaDevices";
-
-export const MediaDevicesContext = createContext<MediaDevices | undefined>(
-  undefined,
-);
-
-export function useMediaDevices(): MediaDevices {
-  const mediaDevices = use(MediaDevicesContext);
-  if (mediaDevices === undefined)
-    throw new Error(
-      "useMediaDevices must be used within a MediaDevices context provider",
-    );
-  return mediaDevices;
-}
-
-export const useIsEarpiece = (): boolean => {
-  const devices = useMediaDevices();
-  const audioOutput = useObservableEagerState(devices.audioOutput.selected$);
-  const available = useObservableEagerState(devices.audioOutput.available$);
-  if (!audioOutput?.id) return false;
-  return available.get(audioOutput.id)?.type === "earpiece";
-};
-
-/**
- * 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$);
-  const isVirtualEarpiece = audioOutput?.virtualEarpiece ?? false;
-  return {
-    // 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)
-    pan: useMemo(() => (isVirtualEarpiece ? 1 : 0), [isVirtualEarpiece]),
-    // 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.
-    volume: useMemo(() => (isVirtualEarpiece ? 0.1 : 1), [isVirtualEarpiece]),
-  };
-};

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_sepwu_8"
+  aria-labelledby="radix-:r4:"
+  class="overlay animate modal dialog _glass_1x9g9_17"
   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_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
-        id="radix-«r4»"
+        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+        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_6v6n8_153 _font-body-sm-semibold_6v6n8_36"
-    id="radix-«r4»"
+    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
+    id="radix-:r4:"
   >
     Hello world!
   </h3>

src/analytics/RageshakeSpanProcessor.ts

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

src/button/Link.tsx

@@ -5,7 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ComponentProps, type FC, type MouseEvent } from "react";
+import {
+  type ComponentPropsWithoutRef,
+  forwardRef,
+  type MouseEvent,
+} from "react";
 import { Link as CpdLink } from "@vector-im/compound-web";
 import { type LinkProps, useHref, useLinkClickHandler } from "react-router-dom";
 import classNames from "classnames";
@@ -22,30 +26,31 @@ export function useLink(
   return [href, onClick];
 }
 
-type Props = Omit<ComponentProps<typeof CpdLink>, "href" | "onClick"> & {
-  to: LinkProps["to"];
-  state?: unknown;
-};
+type Props = Omit<
+  ComponentPropsWithoutRef<typeof CpdLink>,
+  "href" | "onClick"
+> & { to: LinkProps["to"]; state?: unknown };
 
 /**
  * A version of Compound's link component that integrates with our router setup.
  * This is only for app-internal links.
  */
-export const Link: FC<Props> = ({ ref, to, state, ...props }) => {
+export const Link = forwardRef<HTMLAnchorElement, Props>(function Link(
+  { to, state, ...props },
+  ref,
+) {
   const [path, onClick] = useLink(to, state);
   return <CpdLink ref={ref} {...props} href={path} onClick={onClick} />;
-};
+});
 
 /**
  * A link to an external web page, made to fit into blocks of text more subtly
  * than the normal Compound link component.
  */
-export const ExternalLink: FC<ComponentProps<"a">> = ({
-  ref,
-  className,
-  children,
-  ...props
-}) => {
+export const ExternalLink = forwardRef<
+  HTMLAnchorElement,
+  ComponentPropsWithoutRef<"a">
+>(function ExternalLink({ className, children, ...props }, ref) {
   return (
     <a
       ref={ref}
@@ -57,4 +62,4 @@ export const ExternalLink: FC<ComponentProps<"a">> = ({
       {children}
     </a>
   );
-};
+});

src/button/LinkButton.tsx

@@ -5,22 +5,24 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ComponentProps, type FC } from "react";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
 import { Button } from "@vector-im/compound-web";
 
 import type { LinkProps } from "react-router-dom";
 import { useLink } from "./Link";
 
-type Props = Omit<ComponentProps<typeof Button<"a">>, "as" | "href"> & {
-  to: LinkProps["to"];
-  state?: unknown;
-};
+type Props = Omit<
+  ComponentPropsWithoutRef<typeof Button<"a">>,
+  "as" | "href"
+> & { to: LinkProps["to"]; state?: unknown };
 
 /**
  * A version of Compound's button component that acts as a link and integrates
  * with our router setup.
  */
-export const LinkButton: FC<Props> = ({ ref, to, state, ...props }) => {
-  const [path, onClick] = useLink(to, state);
-  return <Button as="a" ref={ref} {...props} href={path} onClick={onClick} />;
-};
+export const LinkButton = forwardRef<HTMLAnchorElement, Props>(
+  function LinkButton({ to, state, ...props }, ref) {
+    const [path, onClick] = useLink(to, state);
+    return <Button as="a" ref={ref} {...props} href={path} onClick={onClick} />;
+  },
+);

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_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+    aria-labelledby=":rb5:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     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 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"
+        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"
         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_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+    aria-labelledby=":r7m:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     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 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"
+        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"
         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_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+    aria-labelledby=":r36:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     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 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"
+        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"
         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_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+    aria-labelledby=":r0:"
+    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
     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 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"
+        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"
         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_vczzf_8 raisedButton _has-icon_vczzf_57 _icon-only_vczzf_50"
+    aria-labelledby=":r1j:"
+    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
     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.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"
+        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"
       />
     </svg>
   </button>

src/config/ConfigOptions.ts

@@ -14,7 +14,6 @@ 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.
@@ -23,7 +22,6 @@ 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.
@@ -68,7 +66,6 @@ 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.
@@ -89,7 +86,6 @@ 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.
      */
@@ -113,38 +109,19 @@ 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;
 
     /**
-     * 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.
+     * How often (in milliseconds) keep-alive messages should be sent to the server for
+     * the 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 we wait before retrying after a network error on any of the requests.
+     * How long (in milliseconds) after the last keep-alive the server should expire the
+     * MatrixRTC membership event.
      */
-    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;
+    membership_server_side_expiry_timeout?: number;
   };
 }
 

src/controls.ts

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

src/e2ee/sharedKeyManagement.ts

@@ -6,70 +6,58 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useEffect, useMemo } from "react";
-import { logger } from "matrix-js-sdk/lib/logger";
 
-import {
-  setLocalStorageItemReactive,
-  useLocalStorage,
-} from "../useLocalStorage";
-import { getUrlParams } from "../UrlParams";
+import { setLocalStorageItem, useLocalStorage } from "../useLocalStorage";
+import { type UrlParams, getUrlParams, useUrlParams } 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 {
-  if (
-    localStorage.getItem(getRoomSharedKeyLocalStorageKey(roomId)) !== password
-  )
-    setLocalStorageItemReactive(
-      getRoomSharedKeyLocalStorageKey(roomId),
-      password,
-    );
+  setLocalStorageItem(getRoomSharedKeyLocalStorageKey(roomId), password);
 }
 
 const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
   `room-shared-key-${roomId}`;
 
-/**
- * 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]);
+const useInternalRoomSharedKey = (roomId: string): string | null => {
+  const key = getRoomSharedKeyLocalStorageKey(roomId);
+  const roomSharedKey = useLocalStorage(key)[0];
 
-  // make sure we never return the initial null value from `useLocalStorage`
-  return [setInitialValue ?? roomSharedKey, setRoomSharedKey];
+  return roomSharedKey;
 };
 
 export function getKeyForRoom(roomId: string): string | null {
-  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))
-  );
+  saveKeyFromUrlParams(getUrlParams());
+  const key = getRoomSharedKeyLocalStorageKey(roomId);
+  return localStorage.getItem(key);
 }
 
+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 };
@@ -78,11 +66,12 @@ export type EncryptionSystem = Unencrypted | SharedSecret | PerParticipantE2EE;
 export function useRoomEncryptionSystem(roomId: string): EncryptionSystem {
   const { client } = useClient();
 
-  const [storedPassword] = useRoomSharedKey(
-    getRoomSharedKeyLocalStorageKey(roomId),
-    getKeyForRoom(roomId) ?? undefined,
-  );
-
+  // 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 room = client?.getRoom(roomId);
   const e2eeSystem = <EncryptionSystem>useMemo(() => {
     if (!room) return { kind: E2eeType.NONE };
@@ -91,10 +80,15 @@ 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 };
-  }, [room, storedPassword]);
+  }, [passwordFromUrl, room, roomId, storedPassword, urlRoomId]);
   return e2eeSystem;
 }

src/form/Form.tsx

@@ -6,32 +6,28 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import {
-  type FC,
-  type Ref,
-  type FormEventHandler,
-  type ReactNode,
-} from "react";
+import { type FormEventHandler, forwardRef, type ReactNode } from "react";
 
 import styles from "./Form.module.css";
 
 interface FormProps {
-  ref?: Ref<HTMLFormElement>;
   className: string;
   onSubmit: FormEventHandler<HTMLFormElement>;
   children: ReactNode[];
 }
 
-export const Form: FC<FormProps> = ({ ref, children, className, onSubmit }) => {
-  return (
-    <form
-      onSubmit={onSubmit}
-      className={classNames(styles.form, className)}
-      ref={ref}
-    >
-      {children}
-    </form>
-  );
-};
+export const Form = forwardRef<HTMLFormElement, FormProps>(
+  ({ children, className, onSubmit }, ref) => {
+    return (
+      <form
+        onSubmit={onSubmit}
+        className={classNames(styles.form, className)}
+        ref={ref}
+      >
+        {children}
+      </form>
+    );
+  },
+);
 
 Form.displayName = "Form";

src/grid/Grid.tsx

@@ -18,12 +18,13 @@ import {
   type ComponentType,
   type Dispatch,
   type FC,
+  type LegacyRef,
   type ReactNode,
-  type Ref,
   type SetStateAction,
   createContext,
+  forwardRef,
   memo,
-  use,
+  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -123,7 +124,7 @@ interface LayoutContext {
 const LayoutContext = createContext<LayoutContext | null>(null);
 
 function useLayoutContext(): LayoutContext {
-  const context = use(LayoutContext);
+  const context = useContext(LayoutContext);
   if (context === null)
     throw new Error("useUpdateLayout called outside a Grid layout context");
   return context;
@@ -161,7 +162,7 @@ const windowHeightObservable$ = fromEvent(window, "resize").pipe(
 );
 
 export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
-  ref?: Ref<R>;
+  ref: LegacyRef<R>;
   model: LayoutModel;
   /**
    * Component creating an invisible "slot" for a tile to go in.
@@ -170,7 +171,7 @@ export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
 }
 
 export interface TileProps<Model, R extends HTMLElement> {
-  ref?: Ref<R>;
+  ref: LegacyRef<R>;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
   /**
@@ -296,13 +297,14 @@ export function Grid<
   // render of Grid causes a re-render of Layout, which in turn re-renders Grid
   const LayoutMemo = useMemo(
     () =>
-      memo(function LayoutMemo({
-        ref,
-        Layout,
-        ...props
-      }: LayoutMemoProps<LayoutModel, TileModel, LayoutRef>): ReactNode {
-        return <Layout {...props} ref={ref} />;
-      }),
+      memo(
+        forwardRef<
+          LayoutRef,
+          LayoutMemoProps<LayoutModel, TileModel, LayoutRef>
+        >(function LayoutMemo({ Layout, ...props }, ref): ReactNode {
+          return <Layout {...props} ref={ref} />;
+        }),
+      ),
     [],
   );
 
@@ -530,14 +532,14 @@ export function Grid<
       className={classNames(className, styles.grid)}
       style={style}
     >
-      <LayoutContext value={context}>
+      <LayoutContext.Provider value={context}>
         <LayoutMemo
           ref={setLayoutRoot}
           Layout={Layout}
           model={model}
           Slot={Slot}
         />
-      </LayoutContext>
+      </LayoutContext.Provider>
       {tileTransitions((spring, { id, model, onDrag, width, height }) => (
         <TileWrapper
           key={id}

src/grid/GridLayout.tsx

@@ -5,12 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  type CSSProperties,
-  type ReactNode,
-  useCallback,
-  useMemo,
-} from "react";
+import { type CSSProperties, forwardRef, useCallback, useMemo } from "react";
 import { distinctUntilChanged } from "rxjs";
 import { useObservableEagerState } from "observable-hooks";
 
@@ -38,7 +33,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
 
   // The "fixed" (non-scrolling) part of the layout is where the spotlight tile
   // lives
-  fixed: function GridLayoutFixed({ ref, model, Slot }): ReactNode {
+  fixed: forwardRef(function GridLayoutFixed({ model, Slot }, ref) {
     useUpdateLayout();
     const alignment = useObservableEagerState(
       useInitial(() =>
@@ -73,10 +68,10 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
         )}
       </div>
     );
-  },
+  }),
 
   // The scrolling part of the layout is where all the grid tiles live
-  scrolling: function GridLayout({ ref, model, Slot }): ReactNode {
+  scrolling: forwardRef(function GridLayout({ model, Slot }, ref) {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
     const { width, height: minHeight } = useObservableEagerState(minBounds$);
@@ -103,5 +98,5 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
         ))}
       </div>
     );
-  },
+  }),
 });

src/grid/OneOnOneLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, useCallback, useMemo } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -24,12 +24,12 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
 }) => ({
   scrollingOnTop: false,
 
-  fixed: function OneOnOneLayoutFixed({ ref }): ReactNode {
+  fixed: forwardRef(function OneOnOneLayoutFixed(_props, ref) {
     useUpdateLayout();
     return <div ref={ref} />;
-  },
+  }),
 
-  scrolling: function OneOnOneLayoutScrolling({ ref, model, Slot }): ReactNode {
+  scrolling: forwardRef(function OneOnOneLayoutScrolling({ model, Slot }, ref) {
     useUpdateLayout();
     const { width, height } = useObservableEagerState(minBounds$);
     const pipAlignmentValue = useObservableEagerState(pipAlignment$);
@@ -66,5 +66,5 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
         </Slot>
       </div>
     );
-  },
+  }),
 });

src/grid/SpotlightExpandedLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, useCallback } from "react";
+import { forwardRef, useCallback } from "react";
 import { useObservableEagerState } from "observable-hooks";
 
 import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
@@ -22,11 +22,10 @@ export const makeSpotlightExpandedLayout: CallLayout<
 > = ({ pipAlignment$ }) => ({
   scrollingOnTop: true,
 
-  fixed: function SpotlightExpandedLayoutFixed({
+  fixed: forwardRef(function SpotlightExpandedLayoutFixed(
+    { model, Slot },
     ref,
-    model,
-    Slot,
-  }): ReactNode {
+  ) {
     useUpdateLayout();
 
     return (
@@ -38,13 +37,12 @@ export const makeSpotlightExpandedLayout: CallLayout<
         />
       </div>
     );
-  },
+  }),
 
-  scrolling: function SpotlightExpandedLayoutScrolling({
+  scrolling: forwardRef(function SpotlightExpandedLayoutScrolling(
+    { model, Slot },
     ref,
-    model,
-    Slot,
-  }): ReactNode {
+  ) {
     useUpdateLayout();
     const pipAlignmentValue = useObservableEagerState(pipAlignment$);
 
@@ -71,5 +69,5 @@ export const makeSpotlightExpandedLayout: CallLayout<
         )}
       </div>
     );
-  },
+  }),
 });

src/grid/SpotlightLandscapeLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode } from "react";
+import { forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -24,11 +24,10 @@ export const makeSpotlightLandscapeLayout: CallLayout<
 > = ({ minBounds$ }) => ({
   scrollingOnTop: false,
 
-  fixed: function SpotlightLandscapeLayoutFixed({
+  fixed: forwardRef(function SpotlightLandscapeLayoutFixed(
+    { model, Slot },
     ref,
-    model,
-    Slot,
-  }): ReactNode {
+  ) {
     useUpdateLayout();
     useObservableEagerState(minBounds$);
 
@@ -44,13 +43,12 @@ export const makeSpotlightLandscapeLayout: CallLayout<
         <div className={styles.grid} />
       </div>
     );
-  },
+  }),
 
-  scrolling: function SpotlightLandscapeLayoutScrolling({
+  scrolling: forwardRef(function SpotlightLandscapeLayoutScrolling(
+    { model, Slot },
     ref,
-    model,
-    Slot,
-  }): ReactNode {
+  ) {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
     useObservableEagerState(minBounds$);
@@ -71,5 +69,5 @@ export const makeSpotlightLandscapeLayout: CallLayout<
         </div>
       </div>
     );
-  },
+  }),
 });

src/grid/SpotlightPortraitLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, type CSSProperties } from "react";
+import { type CSSProperties, forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -30,11 +30,10 @@ export const makeSpotlightPortraitLayout: CallLayout<
 > = ({ minBounds$ }) => ({
   scrollingOnTop: false,
 
-  fixed: function SpotlightPortraitLayoutFixed({
+  fixed: forwardRef(function SpotlightPortraitLayoutFixed(
+    { model, Slot },
     ref,
-    model,
-    Slot,
-  }): ReactNode {
+  ) {
     useUpdateLayout();
 
     return (
@@ -48,13 +47,12 @@ export const makeSpotlightPortraitLayout: CallLayout<
         </div>
       </div>
     );
-  },
+  }),
 
-  scrolling: function SpotlightPortraitLayoutScrolling({
+  scrolling: forwardRef(function SpotlightPortraitLayoutScrolling(
+    { model, Slot },
     ref,
-    model,
-    Slot,
-  }): ReactNode {
+  ) {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
     const { width } = useObservableEagerState(minBounds$);
@@ -92,5 +90,5 @@ export const makeSpotlightPortraitLayout: CallLayout<
         </div>
       </div>
     );
-  },
+  }),
 });

src/home/useGroupCallRooms.ts

@@ -81,9 +81,8 @@ function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
 }
 
 const roomIsJoinable = (room: Room): boolean => {
-  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.
+  if (!room.hasEncryptionStateEvent() && !getKeyForRoom(room.roomId)) {
+    // if we have an 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/index.css

@@ -71,13 +71,6 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
-/* This prohibits the view to scroll for pages smaller than 122px in width
-we use this for mobile pip webviews */
-.no-scroll-body {
-  position: fixed;
-  width: 100%;
-}
-
 /* We use this to not render the page at all until we know the theme.*/
 .no-theme {
   opacity: 0;

src/input/Input.tsx

@@ -9,10 +9,10 @@ import {
   type ChangeEvent,
   type FC,
   type ForwardedRef,
+  forwardRef,
   type ReactNode,
   useId,
   type JSX,
-  type Ref,
 } from "react";
 import classNames from "classnames";
 
@@ -54,7 +54,6 @@ function Field({ children, className }: FieldProps): JSX.Element {
 }
 
 interface InputFieldProps {
-  ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;
   label?: string;
   type: string;
   prefix?: string;
@@ -79,81 +78,88 @@ interface InputFieldProps {
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const InputField: FC<InputFieldProps> = ({
-  ref,
-  id,
-  label,
-  className,
-  type,
-  checked,
-  prefix,
-  suffix,
-  description,
-  disabled,
-  min,
-  ...rest
-}) => {
-  const descriptionId = useId();
+export const InputField = forwardRef<
+  HTMLInputElement | HTMLTextAreaElement,
+  InputFieldProps
+>(
+  (
+    {
+      id,
+      label,
+      className,
+      type,
+      checked,
+      prefix,
+      suffix,
+      description,
+      disabled,
+      min,
+      ...rest
+    },
+    ref,
+  ) => {
+    const descriptionId = useId();
 
-  return (
-    <Field
-      className={classNames(
-        type === "checkbox" ? styles.checkboxField : styles.inputField,
-        {
-          [styles.prefix]: !!prefix,
-          [styles.disabled]: disabled,
-        },
-        className,
-      )}
-    >
-      {prefix && <span>{prefix}</span>}
-      {type === "textarea" ? (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        <textarea
-          id={id}
-          ref={ref as ForwardedRef<HTMLTextAreaElement>}
-          disabled={disabled}
-          aria-describedby={descriptionId}
-          {...rest}
-        />
-      ) : (
-        <input
-          id={id}
-          ref={ref as ForwardedRef<HTMLInputElement>}
-          type={type}
-          checked={checked}
-          disabled={disabled}
-          aria-describedby={descriptionId}
-          min={min}
-          {...rest}
-        />
-      )}
-
-      <label htmlFor={id}>
-        {type === "checkbox" && (
-          <div className={styles.checkbox}>
-            <CheckIcon />
-          </div>
+    return (
+      <Field
+        className={classNames(
+          type === "checkbox" ? styles.checkboxField : styles.inputField,
+          {
+            [styles.prefix]: !!prefix,
+            [styles.disabled]: disabled,
+          },
+          className,
         )}
-        {label}
-      </label>
-      {suffix && <span>{suffix}</span>}
-      {description && (
-        <p
-          id={descriptionId}
-          className={
-            label
-              ? styles.description
-              : classNames(styles.description, styles.noLabel)
-          }
-        >
-          {description}
-        </p>
-      )}
-    </Field>
-  );
-};
+      >
+        {prefix && <span>{prefix}</span>}
+        {type === "textarea" ? (
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          <textarea
+            id={id}
+            ref={ref as ForwardedRef<HTMLTextAreaElement>}
+            disabled={disabled}
+            aria-describedby={descriptionId}
+            {...rest}
+          />
+        ) : (
+          <input
+            id={id}
+            ref={ref as ForwardedRef<HTMLInputElement>}
+            type={type}
+            checked={checked}
+            disabled={disabled}
+            aria-describedby={descriptionId}
+            min={min}
+            {...rest}
+          />
+        )}
+
+        <label htmlFor={id}>
+          {type === "checkbox" && (
+            <div className={styles.checkbox}>
+              <CheckIcon />
+            </div>
+          )}
+          {label}
+        </label>
+        {suffix && <span>{suffix}</span>}
+        {description && (
+          <p
+            id={descriptionId}
+            className={
+              label
+                ? styles.description
+                : classNames(styles.description, styles.noLabel)
+            }
+          >
+            {description}
+          </p>
+        )}
+      </Field>
+    );
+  },
+);
 
 InputField.displayName = "InputField";
 

src/livekit/MatrixAudioRenderer.test.tsx

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

src/livekit/MatrixAudioRenderer.tsx

@@ -14,13 +14,11 @@ import {
   type AudioTrackProps,
 } from "@livekit/components-react";
 import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+import { logger } 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.
@@ -61,7 +59,6 @@ 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.
@@ -99,14 +96,6 @@ 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.
@@ -215,7 +204,6 @@ function AudioTrackWithAudioNodes({
       useContext ? [audioNodes.gain!, audioNodes.pan!] : [],
     );
     setTrackReady(true);
-    controls.setPlaybackStarted();
   }, [audioContext, audioNodes, setTrackReady, trackReady, trackRef]);
 
   return (

src/livekit/MediaDevicesContext.tsx

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

src/livekit/TrackProcessorContext.tsx

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

src/livekit/useLivekit.ts

@@ -14,23 +14,21 @@ import {
   type RoomOptions,
   Track,
 } from "livekit-client";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, 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,
-  NEVER,
-  type Observable,
-  type Subscription,
-  switchMap,
-} from "rxjs";
+import { map } from "rxjs";
 
 import { defaultLiveKitOptions } from "./options";
 import { type SFUConfig } from "./openIDSFU";
 import { type MuteStates } from "../room/MuteStates";
-import { useMediaDevices } from "../MediaDevicesContext";
+import {
+  type MediaDeviceHandle,
+  type MediaDevices,
+  useMediaDevices,
+} from "./MediaDevicesContext";
 import {
   type ECConnectionState,
   useECConnectionState,
@@ -42,11 +40,9 @@ 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;
@@ -61,85 +57,27 @@ export function useLivekit(
 ): UseLivekitResult {
   const { controlledAudioDevices } = useUrlParams();
 
-  const initialMuteStates = useInitial(() => muteStates);
+  const e2eeOptions = useMemo((): E2EEManagerOptions | undefined => {
+    if (e2eeSystem.kind === E2eeType.NONE) return undefined;
 
-  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)");
-      e2ee = {
+      return {
         keyProvider: new MatrixKeyProvider(),
         worker: new E2EEWorker(),
       };
     } else if (e2eeSystem.kind === E2eeType.SHARED_KEY && e2eeSystem.secret) {
       logger.info("Created ExternalE2EEKeyProvider (shared key)");
-      e2ee = {
+
+      return {
         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(() => {
-    const e2eeOptions = room.options.e2ee;
-    if (
-      e2eeSystem.kind === E2eeType.NONE ||
-      !(e2eeOptions && "keyProvider" in e2eeOptions)
-    )
-      return;
+    if (e2eeSystem.kind === E2eeType.NONE || !e2eeOptions) return;
 
     if (e2eeSystem.kind === E2eeType.PER_PARTICIPANT) {
       (e2eeOptions.keyProvider as MatrixKeyProvider).setRTCSession(rtcSession);
@@ -150,7 +88,55 @@ export function useLivekit(
           logger.error("Failed to set shared key for E2EE", e);
         });
     }
-  }, [room.options.e2ee, e2eeSystem, rtcSession]);
+  }, [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]);
 
   // Sync the requested track processors with LiveKit
   useTrackProcessorSync(
@@ -172,8 +158,8 @@ export function useLivekit(
   );
 
   const connectionState = useECConnectionState(
-    initialAudioInputId,
-    initialMuteStates.audio.enabled,
+    initialDevices.current.audioInput.selectedId,
+    initialMuteStates.current.audio.enabled,
     room,
     sfuConfig,
   );
@@ -327,65 +313,62 @@ export function useLivekit(
     ) {
       const syncDevice = (
         kind: MediaDeviceKind,
-        selected$: Observable<SelectedDevice | undefined>,
-      ): Subscription =>
-        selected$.subscribe((device) => {
-          if (
-            device !== undefined &&
-            room.getActiveDevice(kind) !== device.id
-          ) {
-            room
-              .switchActiveDevice(kind, device.id)
-              .catch((e) =>
-                logger.error(`Failed to sync ${kind} device with LiveKit`, e),
-              );
-          }
-        });
+        device: MediaDeviceHandle,
+      ): void => {
+        const id = device.selectedId;
 
-      const subscriptions = [
-        syncDevice("audioinput", devices.audioInput.selected$),
-        syncDevice("audiooutput", devices.audioOutput.selected$),
-        syncDevice("videoinput", devices.videoInput.selected$),
-        // Restart the audio input track whenever we detect that the active media
-        // device has changed to refer to a different hardware device. We do this
-        // for the sake of Chrome, which provides a "default" device that is meant
-        // to match the system's default audio input, whatever that may be.
+        // Detect if we're trying to use chrome's default device, in which case
+        // we need to to see if the default device has changed to a different device
+        // by comparing the group ID of the device we're using against the group ID
+        // of what the default device is *now*.
         // This is special-cased for only audio inputs because we need to dig around
         // in the LocalParticipant object for the track object and there's not a nice
         // way to do that generically. There is usually no OS-level default video capture
         // device anyway, and audio outputs work differently.
-        devices.audioInput.selected$
-          .pipe(switchMap((device) => device?.hardwareDeviceChange$ ?? NEVER))
-          .subscribe(() => {
-            const activeMicTrack = Array.from(
-              room.localParticipant.audioTrackPublications.values(),
-            ).find((d) => d.source === Track.Source.Microphone)?.track;
+        if (
+          id === "default" &&
+          kind === "audioinput" &&
+          room.options.audioCaptureDefaults?.deviceId === "default"
+        ) {
+          const activeMicTrack = Array.from(
+            room.localParticipant.audioTrackPublications.values(),
+          ).find((d) => d.source === Track.Source.Microphone)?.track;
 
-            if (
-              activeMicTrack &&
-              // only restart if the stream is still running: LiveKit will detect
-              // when a track stops & restart appropriately, so this is not our job.
-              // Plus, we need to avoid restarting again if the track is already in
-              // the process of being restarted.
-              activeMicTrack.mediaStreamTrack.readyState !== "ended"
-            ) {
-              // Restart the track, which will cause Livekit to do another
-              // getUserMedia() call with deviceId: default to get the *new* default device.
-              // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
-              // the deviceId hasn't changed (was & still is default).
-              room.localParticipant
-                .getTrackPublication(Track.Source.Microphone)
-                ?.audioTrack?.restartTrack()
-                .catch((e) => {
-                  logger.error(`Failed to restart audio device track`, e);
-                });
-            }
-          }),
-      ];
-
-      return (): void => {
-        for (const s of subscriptions) s.unsubscribe();
+          if (
+            activeMicTrack &&
+            // only restart if the stream is still running: LiveKit will detect
+            // when a track stops & restart appropriately, so this is not our job.
+            // Plus, we need to avoid restarting again if the track is already in
+            // the process of being restarted.
+            activeMicTrack.mediaStreamTrack.readyState !== "ended" &&
+            device.selectedGroupId !==
+              activeMicTrack.mediaStreamTrack.getSettings().groupId
+          ) {
+            // It's different, so restart the track, ie. cause Livekit to do another
+            // getUserMedia() call with deviceId: default to get the *new* default device.
+            // Note that room.switchActiveDevice() won't work: Livekit will ignore it because
+            // the deviceId hasn't changed (was & still is default).
+            room.localParticipant
+              .getTrackPublication(Track.Source.Microphone)
+              ?.audioTrack?.restartTrack()
+              .catch((e) => {
+                logger.error(`Failed to restart audio device track`, e);
+              });
+          }
+        } else {
+          if (id !== undefined && room.getActiveDevice(kind) !== id) {
+            room
+              .switchActiveDevice(kind, id)
+              .catch((e) =>
+                logger.error(`Failed to sync ${kind} device with LiveKit`, e),
+              );
+          }
+        }
       };
+
+      syncDevice("audioinput", devices.audioInput);
+      syncDevice("audiooutput", devices.audioOutput);
+      syncDevice("videoinput", devices.videoInput);
     }
   }, [room, devices, connectionState, controlledAudioDevices]);
 

src/main.tsx

@@ -23,14 +23,13 @@ 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("info");
+setLKLogLevel("warn");
 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);
@@ -61,7 +60,7 @@ Initializer.initBeforeReact()
   .then(() => {
     root.render(
       <StrictMode>
-        <App vm={new AppViewModel()} />
+        <App />
       </StrictMode>,
     );
   })

src/otel/otel.ts

@@ -5,15 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  SimpleSpanProcessor,
-  type SpanProcessor,
-} from "@opentelemetry/sdk-trace-base";
+import { SimpleSpanProcessor } 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 { resourceFromAttributes } from "@opentelemetry/resources";
-import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
+import { Resource } from "@opentelemetry/resources";
+import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import { PosthogSpanProcessor } from "../analytics/PosthogSpanProcessor";
@@ -62,34 +59,34 @@ export class ElementCallOpenTelemetry {
     collectorUrl: string | undefined,
     rageshakeUrl: string | undefined,
   ) {
-    const spanProcessors: SpanProcessor[] = [];
+    // 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);
 
     if (collectorUrl) {
       logger.info("Enabling OTLP collector with URL " + collectorUrl);
       this.otlpExporter = new OTLPTraceExporter({
         url: collectorUrl,
       });
-      spanProcessors.push(new SimpleSpanProcessor(this.otlpExporter));
+      this._provider.addSpanProcessor(
+        new SimpleSpanProcessor(this.otlpExporter),
+      );
     } else {
       logger.info("OTLP collector disabled");
     }
 
     if (rageshakeUrl) {
       this.rageshakeProcessor = new RageshakeSpanProcessor();
-      spanProcessors.push(this.rageshakeProcessor);
+      this._provider.addSpanProcessor(this.rageshakeProcessor);
     }
 
-    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,
-    });
-
+    this._provider.addSpanProcessor(new PosthogSpanProcessor());
     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,
-  use,
+  useContext,
   type ReactNode,
   useCallback,
   useMemo,
@@ -34,7 +34,7 @@ const ReactionsSenderContext = createContext<
 >(undefined);
 
 export const useReactionsSender = (): ReactionsSenderContextType => {
-  const context = use(ReactionsSenderContext);
+  const context = useContext(ReactionsSenderContext);
   if (!context) {
     throw new Error("useReactions must be used within a ReactionsProvider");
   }
@@ -157,7 +157,7 @@ export const ReactionsSenderProvider = ({
   );
 
   return (
-    <ReactionsSenderContext
+    <ReactionsSenderContext.Provider
       value={{
         supportsReactions,
         toggleRaisedHand,
@@ -165,6 +165,6 @@ export const ReactionsSenderProvider = ({
       }}
     >
       {children}
-    </ReactionsSenderContext>
+    </ReactionsSenderContext.Provider>
   );
 };

src/room/GroupCallErrorBoundary.tsx

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

src/room/GroupCallView.test.tsx

@@ -29,10 +29,8 @@ import { useAudioContext } from "../useAudioContext";
 import { ActiveCall } from "./InCallView";
 import {
   flushPromises,
-  mockEmitter,
   mockMatrixRoom,
   mockMatrixRoomMember,
-  mockMediaDevices,
   mockRtcMembership,
   MockRTCSession,
 } from "../utils/test";
@@ -41,7 +39,6 @@ import { type WidgetHelpers } from "../widget";
 import { LazyEventEmitter } from "../LazyEventEmitter";
 import { MatrixRTCFocusMissingError } from "../utils/errors";
 import { ProcessorProvider } from "../livekit/TrackProcessorContext";
-import { MediaDevicesContext } from "../MediaDevicesContext";
 
 vi.mock("../soundUtils");
 vi.mock("../useAudioContext");
@@ -132,7 +129,6 @@ function createGroupCallView(
     getMxcAvatarUrl: () => null,
     getCanonicalAlias: () => null,
     currentState: {
-      ...mockEmitter(),
       getJoinRule: () => JoinRule.Invite,
     } as Partial<RoomState> as RoomState,
   });
@@ -149,22 +145,20 @@ function createGroupCallView(
   const { getByText } = render(
     <BrowserRouter>
       <TooltipProvider>
-        <MediaDevicesContext value={mockMediaDevices({})}>
-          <ProcessorProvider>
-            <GroupCallView
-              client={client}
-              isPasswordlessUser={false}
-              confineToRoom={false}
-              preload={false}
-              skipLobby={false}
-              hideHeader={true}
-              rtcSession={rtcSession as unknown as MatrixRTCSession}
-              isJoined={joined}
-              muteStates={muteState}
-              widget={widget}
-            />
-          </ProcessorProvider>
-        </MediaDevicesContext>
+        <ProcessorProvider>
+          <GroupCallView
+            client={client}
+            isPasswordlessUser={false}
+            confineToRoom={false}
+            preload={false}
+            skipLobby={false}
+            hideHeader={true}
+            rtcSession={rtcSession as unknown as MatrixRTCSession}
+            isJoined={joined}
+            muteStates={muteState}
+            widget={widget}
+          />
+        </ProcessorProvider>
       </TooltipProvider>
     </BrowserRouter>,
   );

src/room/GroupCallView.tsx

@@ -40,13 +40,10 @@ import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
 import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates";
-import { useMediaDevices } from "../MediaDevicesContext";
+import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
-import {
-  saveKeyForRoom,
-  useRoomEncryptionSystem,
-} from "../e2ee/sharedKeyManagement";
+import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
@@ -132,16 +129,6 @@ export const GroupCallView: FC<Props> = ({
     };
   }, []);
 
-  // This CSS is the only way we could find to not make element call scroll for
-  // viewport sizes smaller than 122px width. (It is actually this exact number: 122px
-  // tested on different devices...)
-  useEffect(() => {
-    document.body.classList.add("no-scroll-body");
-    return (): void => {
-      document.body.classList.remove("no-scroll-body");
-    };
-  }, []);
-
   useEffect(() => {
     window.rtcSession = rtcSession;
     return (): void => {
@@ -180,12 +167,6 @@ 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 => {
@@ -207,7 +188,8 @@ export const GroupCallView: FC<Props> = ({
     [memberships],
   );
 
-  const mediaDevices = useMediaDevices();
+  const deviceContext = useMediaDevices();
+  const latestDevices = useLatest(deviceContext);
   const latestMuteStates = useLatest(muteStates);
 
   const enterRTCSessionOrError = useCallback(
@@ -259,7 +241,7 @@ export const GroupCallView: FC<Props> = ({
           logger.debug(
             `Found audio input ID ${deviceId} for name ${audioInput}`,
           );
-          mediaDevices.audioInput.select(deviceId);
+          latestDevices.current!.audioInput.select(deviceId);
         }
       }
 
@@ -273,7 +255,7 @@ export const GroupCallView: FC<Props> = ({
           logger.debug(
             `Found video input ID ${deviceId} for name ${videoInput}`,
           );
-          mediaDevices.videoInput.select(deviceId);
+          latestDevices.current!.videoInput.select(deviceId);
         }
       }
     };
@@ -315,7 +297,7 @@ export const GroupCallView: FC<Props> = ({
     preload,
     skipLobby,
     perParticipantE2EE,
-    mediaDevices,
+    latestDevices,
     latestMuteStates,
     enterRTCSessionOrError,
     useNewMembershipManager,

src/room/InCallView.test.tsx

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

src/room/InCallView.tsx

@@ -12,14 +12,15 @@ import { type MatrixClient } from "matrix-js-sdk";
 import {
   type FC,
   type PointerEvent,
+  type PropsWithoutRef,
   type TouchEvent,
+  forwardRef,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
   type JSX,
-  type ReactNode,
 } from "react";
 import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
@@ -103,7 +104,6 @@ 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,7 +147,8 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
           logger.error("[Lifecycle] Failed to disconnect from livekit room", e);
         });
     };
-  }, [livekitRoom]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     if (livekitRoom !== undefined) {
@@ -171,7 +172,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   if (livekitRoom === undefined || vm === null) return null;
 
   return (
-    <RoomContext value={livekitRoom}>
+    <RoomContext.Provider value={livekitRoom}>
       <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
         <InCallView
           {...props}
@@ -180,7 +181,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
           connState={connState}
         />
       </ReactionsSenderProvider>
-    </RoomContext>
+    </RoomContext.Provider>
   );
 };
 
@@ -249,7 +250,6 @@ export const InCallView: FC<InCallViewProps> = ({
     useExperimentalToDeviceTransportSetting,
   );
   const encryptionSystem = useRoomEncryptionSystem(rtcSession.room.roomId);
-  const memberships = useMatrixRTCSessionMemberships(rtcSession);
 
   const showToDeviceEncryption = useMemo(
     () =>
@@ -436,14 +436,13 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const Tile = useMemo(
     () =>
-      function Tile({
+      forwardRef<
+        HTMLDivElement,
+        PropsWithoutRef<TileProps<TileViewModel, HTMLDivElement>>
+      >(function Tile(
+        { className, style, targetWidth, targetHeight, model },
         ref,
-        className,
-        style,
-        targetWidth,
-        targetHeight,
-        model,
-      }: TileProps<TileViewModel, HTMLDivElement>): ReactNode {
+      ) {
         const spotlightExpanded = useObservableEagerState(
           vm.spotlightExpanded$,
         );
@@ -481,7 +480,7 @@ export const InCallView: FC<InCallViewProps> = ({
             style={style}
           />
         );
-      },
+      }),
     [vm, openProfile],
   );
 
@@ -724,7 +723,10 @@ export const InCallView: FC<InCallViewProps> = ({
           </Text>
         )
       }
-      <MatrixAudioRenderer members={memberships} muted={muteAllAudio} />
+      <MatrixAudioRenderer
+        members={rtcSession.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 copy from "copy-to-clipboard";
+import useClipboard from "react-use-clipboard";
 
 import { Modal } from "../Modal";
 import { getAbsoluteRoomUrl } from "../utils/matrix";
@@ -42,17 +42,18 @@ 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();
-      copy(url);
+      setCopied();
       onDismiss();
       setToastOpen(true);
     },
-    [url, onDismiss],
+    [setCopied, onDismiss],
   );
 
   return (

src/room/LobbyView.tsx

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

src/room/MuteStates.test.tsx

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

src/room/MuteStates.ts

@@ -14,14 +14,11 @@ import {
 } from "react";
 import { type IWidgetApiRequest } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { useObservableEagerState } from "observable-hooks";
 
 import {
-  type DeviceLabel,
-  type SelectedDevice,
-  type MediaDevice,
-} from "../state/MediaDevices";
-import { useIsEarpiece, useMediaDevices } from "../MediaDevicesContext";
+  type MediaDeviceHandle,
+  useMediaDevices,
+} from "../livekit/MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import { ElementWidgetActions, widget } from "../widget";
 import { Config } from "../config/Config";
@@ -56,25 +53,24 @@ export interface MuteStates {
 }
 
 function useMuteState(
-  device: MediaDevice<DeviceLabel, SelectedDevice>,
+  device: MediaDeviceHandle,
   enabledByDefault: () => boolean,
-  forceUnavailable: boolean = false,
 ): MuteState {
-  const available = useObservableEagerState(device.available$);
   const [enabled, setEnabled] = useReactiveState<boolean | undefined>(
     // Determine the default value once devices are actually connected
-    (prev) => prev ?? (available.size > 0 ? enabledByDefault() : undefined),
-    [available.size],
+    (prev) =>
+      prev ?? (device.available.size > 0 ? enabledByDefault() : undefined),
+    [device],
   );
   return useMemo(
     () =>
-      available.size === 0 || forceUnavailable
+      device.available.size === 0
         ? deviceUnavailable
         : {
             enabled: enabled ?? false,
             setEnabled: setEnabled as Dispatch<SetStateAction<boolean>>,
           },
-    [available.size, enabled, forceUnavailable, setEnabled],
+    [device, enabled, setEnabled],
   );
 }
 
@@ -86,11 +82,9 @@ export function useMuteStates(isJoined: boolean): MuteStates {
   const audio = useMuteState(devices.audioInput, () => {
     return Config.get().media_devices.enable_audio && !skipLobby && !isJoined;
   });
-  const isEarpiece = useIsEarpiece();
   const video = useMuteState(
     devices.videoInput,
     () => Config.get().media_devices.enable_video && !skipLobby && !isJoined,
-    isEarpiece, // Force video to be unavailable if using earpiece
   );
 
   useEffect(() => {

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_o77nw_8 icon"
+            class="_content_md016_17 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.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"
+                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"
               />
             </svg>
           </div>
           <h1
-            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
+            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
           >
             Connection lost
           </h1>
@@ -135,7 +135,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
             Reconnect
           </button>
           <button
-            class="_button_vczzf_8 homeLink"
+            class="_button_i91xf_17 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_o77nw_8 icon"
+            class="_content_md016_17 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.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"
+                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"
               />
               <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-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
+                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"
                 fill-rule="evenodd"
               />
             </svg>
           </div>
           <h1
-            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
+            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
           >
             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_vczzf_8"
+            class="_button_i91xf_17"
             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_o77nw_8 icon"
+            class="_content_md016_17 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.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"
+                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"
               />
               <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-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
+                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"
                 fill-rule="evenodd"
               />
             </svg>
           </div>
           <h1
-            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
+            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
           >
             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_vczzf_8 homeLink"
+            class="_button_i91xf_17 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_o77nw_8 icon"
+            class="_content_md016_17 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.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"
+                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"
               />
               <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-2zm12 2H6v4h12zM6 12v-2h12v2zm0 2v2h12v-2zm0 6v-2h12v2z"
+                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"
                 fill-rule="evenodd"
               />
             </svg>
           </div>
           <h1
-            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
+            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
           >
             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_vczzf_8 homeLink"
+            class="_button_i91xf_17 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_o77nw_8 icon"
+            class="_content_md016_17 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.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"
+                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"
               />
             </svg>
           </div>
           <h1
-            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
+            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
           >
             Connection lost
           </h1>
@@ -741,7 +741,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
             Reconnect
           </button>
           <button
-            class="_button_vczzf_8 homeLink"
+            class="_button_i91xf_17 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_o77nw_8 icon"
+            class="_content_md016_17 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 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"
+                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"
               />
             </svg>
           </div>
           <h1
-            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
+            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
           >
             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_vczzf_8 homeLink"
+            class="_button_i91xf_17 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_o77nw_8 icon"
+            class="_content_md016_17 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 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"
+                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"
               />
             </svg>
           </div>
           <h1
-            class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
+            class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
           >
             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_vczzf_8 homeLink"
+            class="_button_i91xf_17 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_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+          aria-labelledby=":r0:"
+          class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
           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.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"
+              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"
             />
           </svg>
         </button>
         <button
           aria-disabled="false"
-          aria-labelledby="«r5»"
-          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+          aria-labelledby=":r5:"
+          class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
           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.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"
+              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"
             />
           </svg>
         </button>
         <button
-          aria-labelledby="«ra»"
-          class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+          aria-labelledby=":ra:"
+          class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
           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.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"
+              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"
             />
           </svg>
         </button>
         <button
-          aria-labelledby="«rf»"
-          class="_button_vczzf_8 endCall _has-icon_vczzf_57 _icon-only_vczzf_50 _destructive_vczzf_107"
+          aria-labelledby=":rf:"
+          class="_button_i91xf_17 endCall _has-icon_i91xf_66 _icon-only_i91xf_59 _destructive_i91xf_116"
           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.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"
+              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"
             />
           </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 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"
+            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"
           />
         </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.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"
+            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"
           />
         </svg>
       </div>

src/room/useActiveFocus.ts

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

src/room/useRoomName.ts

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

src/room/useRoomState.ts

@@ -5,15 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { useCallback } from "react";
-import {
-  type RoomState,
-  RoomStateEvent,
-  type Room,
-  RoomEvent,
-} from "matrix-js-sdk";
+import { useCallback, useMemo, useState } from "react";
+import { type RoomState, RoomStateEvent, type Room } from "matrix-js-sdk";
 
-import { useTypedEventEmitterState } from "../useEvents";
+import { useTypedEventEmitter } from "../useEvents";
 
 /**
  * A React hook for values computed from room state.
@@ -21,17 +16,14 @@ import { useTypedEventEmitterState } from "../useEvents";
  * @param f A mapping from the current room state to the computed value.
  * @returns The computed value.
  */
-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(
+export const useRoomState = <T>(room: Room, f: (state: RoomState) => T): T => {
+  const [numUpdates, setNumUpdates] = useState(0);
+  useTypedEventEmitter(
     room,
-    RoomEvent.CurrentStateUpdated,
-    useCallback(() => room.currentState, [room]),
-  );
-  return useTypedEventEmitterState(
-    currentState,
     RoomStateEvent.Update,
-    useCallback(() => f(currentState), [f, currentState]),
+    useCallback(() => setNumUpdates((n) => n + 1), [setNumUpdates]),
   );
-}
+  // 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]);
+};

src/room/useSwitchCamera.ts

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

src/rtcSessionHelpers.ts

@@ -121,18 +121,10 @@ 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?.network_error_retry_ms,
-      makeKeyDelay:
-        matrixRtcSessionConfig?.wait_for_key_rotation_ms ??
-        matrixRtcSessionConfig?.key_rotation_on_leave_delay,
-      membershipEventExpiryMs:
-        matrixRtcSessionConfig?.membership_event_expiry_ms,
+      networkErrorRetryMs: matrixRtcSessionConfig?.membership_keep_alive_period,
+      makeKeyDelay: matrixRtcSessionConfig?.key_rotation_on_leave_delay,
       useExperimentalToDeviceTransport,
     },
   );

src/settings/DeviceSelection.tsx

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

src/settings/FeedbackSettingsTab.tsx

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

src/settings/SettingsModal.tsx

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

src/state/AppViewModel.ts

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

src/state/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(deepCompare),
+    distinctUntilChanged(isEqual),
   );
 }
 

src/state/MediaDevices.ts

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

src/state/MediaViewModel.ts

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

src/tabs/Tabs.tsx

@@ -36,7 +36,6 @@ 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}
@@ -47,7 +46,6 @@ 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/GridTile.tsx

@@ -7,9 +7,8 @@ Please see LICENSE in the repository root for full details.
 
 import {
   type ComponentProps,
-  type FC,
   type ReactNode,
-  type Ref,
+  forwardRef,
   useCallback,
   useRef,
   useState,
@@ -51,7 +50,6 @@ import { useMergedRefs } from "../useMergedRefs";
 import { useReactionsSender } from "../reactions/useReactionsSender";
 
 interface TileProps {
-  ref?: Ref<HTMLDivElement>;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
   targetWidth: number;
@@ -68,128 +66,132 @@ interface UserMediaTileProps extends TileProps {
   menuEnd?: ReactNode;
 }
 
-const UserMediaTile: FC<UserMediaTileProps> = ({
-  ref,
-  vm,
-  showSpeakingIndicators,
-  locallyMuted,
-  menuStart,
-  menuEnd,
-  className,
-  displayName,
-  ...props
-}) => {
-  const { toggleRaisedHand } = useReactionsSender();
-  const { t } = useTranslation();
-  const video = useObservableEagerState(vm.video$);
-  const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning$);
-  const encryptionStatus = useObservableEagerState(vm.encryptionStatus$);
-  const audioStreamStats = useObservableEagerState<
-    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-  >(vm.audioStreamStats$);
-  const videoStreamStats = useObservableEagerState<
-    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-  >(vm.videoStreamStats$);
-  const audioEnabled = useObservableEagerState(vm.audioEnabled$);
-  const videoEnabled = useObservableEagerState(vm.videoEnabled$);
-  const speaking = useObservableEagerState(vm.speaking$);
-  const cropVideo = useObservableEagerState(vm.cropVideo$);
-  const onSelectFitContain = useCallback(
-    (e: Event) => {
-      e.preventDefault();
-      vm.toggleFitContain();
+const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
+  (
+    {
+      vm,
+      showSpeakingIndicators,
+      locallyMuted,
+      menuStart,
+      menuEnd,
+      className,
+      displayName,
+      ...props
     },
-    [vm],
-  );
-  const handRaised = useObservableState(vm.handRaised$);
-  const reaction = useObservableState(vm.reaction$);
+    ref,
+  ) => {
+    const { toggleRaisedHand } = useReactionsSender();
+    const { t } = useTranslation();
+    const video = useObservableEagerState(vm.video$);
+    const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning$);
+    const encryptionStatus = useObservableEagerState(vm.encryptionStatus$);
+    const audioStreamStats = useObservableEagerState<
+      RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
+    >(vm.audioStreamStats$);
+    const videoStreamStats = useObservableEagerState<
+      RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
+    >(vm.videoStreamStats$);
+    const audioEnabled = useObservableEagerState(vm.audioEnabled$);
+    const videoEnabled = useObservableEagerState(vm.videoEnabled$);
+    const speaking = useObservableEagerState(vm.speaking$);
+    const cropVideo = useObservableEagerState(vm.cropVideo$);
+    const onSelectFitContain = useCallback(
+      (e: Event) => {
+        e.preventDefault();
+        vm.toggleFitContain();
+      },
+      [vm],
+    );
+    const handRaised = useObservableState(vm.handRaised$);
+    const reaction = useObservableState(vm.reaction$);
 
-  const AudioIcon = locallyMuted
-    ? VolumeOffSolidIcon
-    : audioEnabled
-      ? MicOnSolidIcon
-      : MicOffSolidIcon;
-  const audioIconLabel = locallyMuted
-    ? t("video_tile.muted_for_me")
-    : audioEnabled
-      ? t("microphone_on")
-      : t("microphone_off");
+    const AudioIcon = locallyMuted
+      ? VolumeOffSolidIcon
+      : audioEnabled
+        ? MicOnSolidIcon
+        : MicOffSolidIcon;
+    const audioIconLabel = locallyMuted
+      ? t("video_tile.muted_for_me")
+      : audioEnabled
+        ? t("microphone_on")
+        : t("microphone_off");
 
-  const [menuOpen, setMenuOpen] = useState(false);
-  const menu = (
-    <>
-      {menuStart}
-      <ToggleMenuItem
-        Icon={ExpandIcon}
-        label={t("video_tile.change_fit_contain")}
-        checked={cropVideo}
-        onSelect={onSelectFitContain}
-      />
-      {menuEnd}
-    </>
-  );
-
-  const raisedHandOnClick = vm.local
-    ? (): void => void toggleRaisedHand()
-    : undefined;
-
-  const showSpeaking = showSpeakingIndicators && speaking;
-
-  const tile = (
-    <MediaView
-      ref={ref}
-      video={video}
-      member={vm.member}
-      unencryptedWarning={unencryptedWarning}
-      encryptionStatus={encryptionStatus}
-      videoEnabled={videoEnabled}
-      videoFit={cropVideo ? "cover" : "contain"}
-      className={classNames(className, styles.tile, {
-        [styles.speaking]: showSpeaking,
-        [styles.handRaised]: !showSpeaking && handRaised,
-      })}
-      nameTagLeadingIcon={
-        <AudioIcon
-          width={20}
-          height={20}
-          aria-label={audioIconLabel}
-          data-muted={locallyMuted || !audioEnabled}
-          className={styles.muteIcon}
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menu = (
+      <>
+        {menuStart}
+        <ToggleMenuItem
+          Icon={ExpandIcon}
+          label={t("video_tile.change_fit_contain")}
+          checked={cropVideo}
+          onSelect={onSelectFitContain}
         />
-      }
-      displayName={displayName}
-      primaryButton={
-        <Menu
-          open={menuOpen}
-          onOpenChange={setMenuOpen}
-          title={displayName}
-          trigger={
-            <button aria-label={t("common.options")}>
-              <OverflowHorizontalIcon aria-hidden width={20} height={20} />
-            </button>
-          }
-          side="left"
-          align="start"
-        >
-          {menu}
-        </Menu>
-      }
-      raisedHandTime={handRaised ?? undefined}
-      currentReaction={reaction ?? undefined}
-      raisedHandOnClick={raisedHandOnClick}
-      localParticipant={vm.local}
-      audioStreamStats={audioStreamStats}
-      videoStreamStats={videoStreamStats}
-      {...props}
-    />
-  );
+        {menuEnd}
+      </>
+    );
 
-  return (
-    <ContextMenu title={displayName} trigger={tile} hasAccessibleAlternative>
-      {menu}
-    </ContextMenu>
-  );
-};
+    const raisedHandOnClick = vm.local
+      ? (): void => void toggleRaisedHand()
+      : undefined;
+
+    const showSpeaking = showSpeakingIndicators && speaking;
+
+    const tile = (
+      <MediaView
+        ref={ref}
+        video={video}
+        member={vm.member}
+        unencryptedWarning={unencryptedWarning}
+        encryptionStatus={encryptionStatus}
+        videoEnabled={videoEnabled}
+        videoFit={cropVideo ? "cover" : "contain"}
+        className={classNames(className, styles.tile, {
+          [styles.speaking]: showSpeaking,
+          [styles.handRaised]: !showSpeaking && handRaised,
+        })}
+        nameTagLeadingIcon={
+          <AudioIcon
+            width={20}
+            height={20}
+            aria-label={audioIconLabel}
+            data-muted={locallyMuted || !audioEnabled}
+            className={styles.muteIcon}
+          />
+        }
+        displayName={displayName}
+        primaryButton={
+          <Menu
+            open={menuOpen}
+            onOpenChange={setMenuOpen}
+            title={displayName}
+            trigger={
+              <button aria-label={t("common.options")}>
+                <OverflowHorizontalIcon aria-hidden width={20} height={20} />
+              </button>
+            }
+            side="left"
+            align="start"
+          >
+            {menu}
+          </Menu>
+        }
+        raisedHandTime={handRaised ?? undefined}
+        currentReaction={reaction ?? undefined}
+        raisedHandOnClick={raisedHandOnClick}
+        localParticipant={vm.local}
+        audioStreamStats={audioStreamStats}
+        videoStreamStats={videoStreamStats}
+        {...props}
+      />
+    );
+
+    return (
+      <ContextMenu title={displayName} trigger={tile} hasAccessibleAlternative>
+        {menu}
+      </ContextMenu>
+    );
+  },
+);
 
 UserMediaTile.displayName = "UserMediaTile";
 
@@ -198,51 +200,48 @@ interface LocalUserMediaTileProps extends TileProps {
   onOpenProfile: (() => void) | null;
 }
 
-const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
-  ref,
-  vm,
-  onOpenProfile,
-  ...props
-}) => {
-  const { t } = useTranslation();
-  const mirror = useObservableEagerState(vm.mirror$);
-  const alwaysShow = useObservableEagerState(vm.alwaysShow$);
-  const latestAlwaysShow = useLatest(alwaysShow);
-  const onSelectAlwaysShow = useCallback(
-    (e: Event) => {
-      e.preventDefault();
-      vm.setAlwaysShow(!latestAlwaysShow.current);
-    },
-    [vm, latestAlwaysShow],
-  );
+const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
+  ({ vm, onOpenProfile, ...props }, ref) => {
+    const { t } = useTranslation();
+    const mirror = useObservableEagerState(vm.mirror$);
+    const alwaysShow = useObservableEagerState(vm.alwaysShow$);
+    const latestAlwaysShow = useLatest(alwaysShow);
+    const onSelectAlwaysShow = useCallback(
+      (e: Event) => {
+        e.preventDefault();
+        vm.setAlwaysShow(!latestAlwaysShow.current);
+      },
+      [vm, latestAlwaysShow],
+    );
 
-  return (
-    <UserMediaTile
-      ref={ref}
-      vm={vm}
-      locallyMuted={false}
-      mirror={mirror}
-      menuStart={
-        <ToggleMenuItem
-          Icon={VisibilityOnIcon}
-          label={t("video_tile.always_show")}
-          checked={alwaysShow}
-          onSelect={onSelectAlwaysShow}
-        />
-      }
-      menuEnd={
-        onOpenProfile && (
-          <MenuItem
-            Icon={UserProfileIcon}
-            label={t("common.profile")}
-            onSelect={onOpenProfile}
+    return (
+      <UserMediaTile
+        ref={ref}
+        vm={vm}
+        locallyMuted={false}
+        mirror={mirror}
+        menuStart={
+          <ToggleMenuItem
+            Icon={VisibilityOnIcon}
+            label={t("video_tile.always_show")}
+            checked={alwaysShow}
+            onSelect={onSelectAlwaysShow}
           />
-        )
-      }
-      {...props}
-    />
-  );
-};
+        }
+        menuEnd={
+          onOpenProfile && (
+            <MenuItem
+              Icon={UserProfileIcon}
+              label={t("common.profile")}
+              onSelect={onOpenProfile}
+            />
+          )
+        }
+        {...props}
+      />
+    );
+  },
+);
 
 LocalUserMediaTile.displayName = "LocalUserMediaTile";
 
@@ -250,11 +249,10 @@ interface RemoteUserMediaTileProps extends TileProps {
   vm: RemoteUserMediaViewModel;
 }
 
-const RemoteUserMediaTile: FC<RemoteUserMediaTileProps> = ({
-  ref,
-  vm,
-  ...props
-}) => {
+const RemoteUserMediaTile = forwardRef<
+  HTMLDivElement,
+  RemoteUserMediaTileProps
+>(({ vm, ...props }, ref) => {
   const { t } = useTranslation();
   const locallyMuted = useObservableEagerState(vm.locallyMuted$);
   const localVolume = useObservableEagerState(vm.localVolume$);
@@ -305,12 +303,11 @@ const RemoteUserMediaTile: FC<RemoteUserMediaTileProps> = ({
       {...props}
     />
   );
-};
+});
 
 RemoteUserMediaTile.displayName = "RemoteUserMediaTile";
 
 interface GridTileProps {
-  ref?: Ref<HTMLDivElement>;
   vm: GridTileViewModel;
   onOpenProfile: (() => void) | null;
   targetWidth: number;
@@ -320,37 +317,34 @@ interface GridTileProps {
   showSpeakingIndicators: boolean;
 }
 
-export const GridTile: FC<GridTileProps> = ({
-  ref: theirRef,
-  vm,
-  onOpenProfile,
-  ...props
-}) => {
-  const ourRef = useRef<HTMLDivElement | null>(null);
-  const ref = useMergedRefs(ourRef, theirRef);
-  const media = useObservableEagerState(vm.media$);
-  const displayName = useObservableEagerState(media.displayname$);
+export const GridTile = forwardRef<HTMLDivElement, GridTileProps>(
+  ({ vm, onOpenProfile, ...props }, theirRef) => {
+    const ourRef = useRef<HTMLDivElement | null>(null);
+    const ref = useMergedRefs(ourRef, theirRef);
+    const media = useObservableEagerState(vm.media$);
+    const displayName = useObservableEagerState(media.displayname$);
 
-  if (media instanceof LocalUserMediaViewModel) {
-    return (
-      <LocalUserMediaTile
-        ref={ref}
-        vm={media}
-        onOpenProfile={onOpenProfile}
-        displayName={displayName}
-        {...props}
-      />
-    );
-  } else {
-    return (
-      <RemoteUserMediaTile
-        ref={ref}
-        vm={media}
-        displayName={displayName}
-        {...props}
-      />
-    );
-  }
-};
+    if (media instanceof LocalUserMediaViewModel) {
+      return (
+        <LocalUserMediaTile
+          ref={ref}
+          vm={media}
+          onOpenProfile={onOpenProfile}
+          displayName={displayName}
+          {...props}
+        />
+      );
+    } else {
+      return (
+        <RemoteUserMediaTile
+          ref={ref}
+          vm={media}
+          displayName={displayName}
+          {...props}
+        />
+      );
+    }
+  },
+);
 
 GridTile.displayName = "GridTile";

src/tile/MediaView.tsx

@@ -8,12 +8,12 @@ Please see LICENSE in the repository root for full details.
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
 import { animated } from "@react-spring/web";
 import { type RoomMember } from "matrix-js-sdk";
-import { type FC, type ComponentProps, type ReactNode } from "react";
+import { type ComponentProps, type ReactNode, forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { VideoTrack } from "@livekit/components-react";
 import { Text, Tooltip } from "@vector-im/compound-web";
-import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
@@ -47,94 +47,97 @@ interface Props extends ComponentProps<typeof animated.div> {
   videoStreamStats?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
 }
 
-export const MediaView: FC<Props> = ({
-  ref,
-  className,
-  style,
-  targetWidth,
-  targetHeight,
-  video,
-  videoFit,
-  mirror,
-  member,
-  videoEnabled,
-  unencryptedWarning,
-  nameTagLeadingIcon,
-  displayName,
-  primaryButton,
-  encryptionStatus,
-  raisedHandTime,
-  currentReaction,
-  raisedHandOnClick,
-  localParticipant,
-  audioStreamStats,
-  videoStreamStats,
-  ...props
-}) => {
-  const { t } = useTranslation();
-  const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
+export const MediaView = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      className,
+      style,
+      targetWidth,
+      targetHeight,
+      video,
+      videoFit,
+      mirror,
+      member,
+      videoEnabled,
+      unencryptedWarning,
+      nameTagLeadingIcon,
+      displayName,
+      primaryButton,
+      encryptionStatus,
+      raisedHandTime,
+      currentReaction,
+      raisedHandOnClick,
+      localParticipant,
+      audioStreamStats,
+      videoStreamStats,
+      ...props
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
 
-  const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
+    const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
 
-  return (
-    <animated.div
-      className={classNames(styles.media, className, {
-        [styles.mirror]: mirror,
-      })}
-      style={style}
-      ref={ref}
-      data-testid="videoTile"
-      data-video-fit={videoFit}
-      {...props}
-    >
-      <div className={styles.bg}>
-        <Avatar
-          id={member?.userId ?? displayName}
-          name={displayName}
-          size={avatarSize}
-          src={member?.getMxcAvatarUrl()}
-          className={styles.avatar}
-          style={{ display: video && videoEnabled ? "none" : "initial" }}
-        />
-        {video?.publication !== undefined && (
-          <VideoTrack
-            trackRef={video}
-            // There's no reason for this to be focusable
-            tabIndex={-1}
-            disablePictureInPicture
-            style={{ display: video && videoEnabled ? "block" : "none" }}
-            data-testid="video"
+    return (
+      <animated.div
+        className={classNames(styles.media, className, {
+          [styles.mirror]: mirror,
+        })}
+        style={style}
+        ref={ref}
+        data-testid="videoTile"
+        data-video-fit={videoFit}
+        {...props}
+      >
+        <div className={styles.bg}>
+          <Avatar
+            id={member?.userId ?? displayName}
+            name={displayName}
+            size={avatarSize}
+            src={member?.getMxcAvatarUrl()}
+            className={styles.avatar}
+            style={{ display: video && videoEnabled ? "none" : "initial" }}
           />
-        )}
-      </div>
-      <div className={styles.fg}>
-        <div className={styles.reactions}>
-          <RaisedHandIndicator
-            raisedHandTime={raisedHandTime}
-            miniature={avatarSize < 96}
-            showTimer={handRaiseTimerVisible}
-            onClick={raisedHandOnClick}
-          />
-          {currentReaction && (
-            <ReactionIndicator
-              miniature={avatarSize < 96}
-              emoji={currentReaction.emoji}
+          {video?.publication !== undefined && (
+            <VideoTrack
+              trackRef={video}
+              // There's no reason for this to be focusable
+              tabIndex={-1}
+              disablePictureInPicture
+              style={{ display: video && videoEnabled ? "block" : "none" }}
+              data-testid="video"
             />
           )}
         </div>
-        {!video && !localParticipant && (
-          <div className={styles.status}>
-            {t("video_tile.waiting_for_media")}
+        <div className={styles.fg}>
+          <div className={styles.reactions}>
+            <RaisedHandIndicator
+              raisedHandTime={raisedHandTime}
+              miniature={avatarSize < 96}
+              showTimer={handRaiseTimerVisible}
+              onClick={raisedHandOnClick}
+            />
+            {currentReaction && (
+              <ReactionIndicator
+                miniature={avatarSize < 96}
+                emoji={currentReaction.emoji}
+              />
+            )}
           </div>
-        )}
-        {(audioStreamStats || videoStreamStats) && (
-          <RTCConnectionStats
-            audio={audioStreamStats}
-            video={videoStreamStats}
-          />
-        )}
-        {/* TODO: Bring this back once encryption status is less broken */}
-        {/*encryptionStatus !== EncryptionStatus.Okay && (
+          {!video && !localParticipant && (
+            <div className={styles.status}>
+              {t("video_tile.waiting_for_media")}
+            </div>
+          )}
+          {(audioStreamStats || videoStreamStats) && (
+            <RTCConnectionStats
+              audio={audioStreamStats}
+              video={videoStreamStats}
+            />
+          )}
+          {/* TODO: Bring this back once encryption status is less broken */}
+          {/*encryptionStatus !== EncryptionStatus.Okay && (
             <div className={styles.status}>
               <Text as="span" size="sm" weight="medium" className={styles.name}>
                 {encryptionStatus === EncryptionStatus.Connecting &&
@@ -148,37 +151,38 @@ export const MediaView: FC<Props> = ({
               </Text>
             </div>
           )*/}
-        <div className={styles.nameTag}>
-          {nameTagLeadingIcon}
-          <Text
-            as="span"
-            size="sm"
-            weight="medium"
-            className={styles.name}
-            data-testid="name_tag"
-          >
-            {displayName}
-          </Text>
-          {unencryptedWarning && (
-            <Tooltip
-              label={t("common.unencrypted")}
-              placement="bottom"
-              isTriggerInteractive={false}
+          <div className={styles.nameTag}>
+            {nameTagLeadingIcon}
+            <Text
+              as="span"
+              size="sm"
+              weight="medium"
+              className={styles.name}
+              data-testid="name_tag"
             >
-              <ErrorSolidIcon
-                width={20}
-                height={20}
-                className={styles.errorIcon}
-                role="img"
-                aria-label={t("common.unencrypted")}
-              />
-            </Tooltip>
-          )}
+              {displayName}
+            </Text>
+            {unencryptedWarning && (
+              <Tooltip
+                label={t("common.unencrypted")}
+                placement="bottom"
+                isTriggerInteractive={false}
+              >
+                <ErrorIcon
+                  width={20}
+                  height={20}
+                  className={styles.errorIcon}
+                  role="img"
+                  aria-label={t("common.unencrypted")}
+                />
+              </Tooltip>
+            )}
+          </div>
+          {primaryButton}
         </div>
-        {primaryButton}
-      </div>
-    </animated.div>
-  );
-};
+      </animated.div>
+    );
+  },
+);
 
 MediaView.displayName = "MediaView";

src/tile/SpotlightTile.tsx

@@ -7,9 +7,8 @@ Please see LICENSE in the repository root for full details.
 
 import {
   type ComponentProps,
-  type FC,
-  type Ref,
   type RefAttributes,
+  forwardRef,
   useCallback,
   useEffect,
   useRef,
@@ -45,7 +44,6 @@ import { useLatest } from "../useLatest";
 import { type SpotlightTileViewModel } from "../state/TileViewModel";
 
 interface SpotlightItemBaseProps {
-  ref?: Ref<HTMLDivElement>;
   className?: string;
   "data-id": string;
   targetWidth: number;
@@ -69,13 +67,13 @@ interface SpotlightLocalUserMediaItemProps
   vm: LocalUserMediaViewModel;
 }
 
-const SpotlightLocalUserMediaItem: FC<SpotlightLocalUserMediaItemProps> = ({
-  vm,
-  ...props
-}) => {
+const SpotlightLocalUserMediaItem = forwardRef<
+  HTMLDivElement,
+  SpotlightLocalUserMediaItemProps
+>(({ vm, ...props }, ref) => {
   const mirror = useObservableEagerState(vm.mirror$);
-  return <MediaView mirror={mirror} {...props} />;
-};
+  return <MediaView ref={ref} mirror={mirror} {...props} />;
+});
 
 SpotlightLocalUserMediaItem.displayName = "SpotlightLocalUserMediaItem";
 
@@ -83,15 +81,16 @@ interface SpotlightUserMediaItemProps extends SpotlightItemBaseProps {
   vm: UserMediaViewModel;
 }
 
-const SpotlightUserMediaItem: FC<SpotlightUserMediaItemProps> = ({
-  vm,
-  ...props
-}) => {
+const SpotlightUserMediaItem = forwardRef<
+  HTMLDivElement,
+  SpotlightUserMediaItemProps
+>(({ vm, ...props }, ref) => {
   const videoEnabled = useObservableEagerState(vm.videoEnabled$);
   const cropVideo = useObservableEagerState(vm.cropVideo$);
 
   const baseProps: SpotlightUserMediaItemBaseProps &
     RefAttributes<HTMLDivElement> = {
+    ref,
     videoEnabled,
     videoFit: cropVideo ? "cover" : "contain",
     ...props,
@@ -102,12 +101,11 @@ const SpotlightUserMediaItem: FC<SpotlightUserMediaItemProps> = ({
   ) : (
     <MediaView mirror={false} {...baseProps} />
   );
-};
+});
 
 SpotlightUserMediaItem.displayName = "SpotlightUserMediaItem";
 
 interface SpotlightItemProps {
-  ref?: Ref<HTMLDivElement>;
   vm: MediaViewModel;
   targetWidth: number;
   targetHeight: number;
@@ -119,63 +117,71 @@ interface SpotlightItemProps {
   "aria-hidden"?: boolean;
 }
 
-const SpotlightItem: FC<SpotlightItemProps> = ({
-  ref: theirRef,
-  vm,
-  targetWidth,
-  targetHeight,
-  intersectionObserver$,
-  snap,
-  "aria-hidden": ariaHidden,
-}) => {
-  const ourRef = useRef<HTMLDivElement | null>(null);
-  const ref = useMergedRefs(ourRef, theirRef);
-  const displayName = useObservableEagerState(vm.displayname$);
-  const video = useObservableEagerState(vm.video$);
-  const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning$);
-  const encryptionStatus = useObservableEagerState(vm.encryptionStatus$);
+const SpotlightItem = forwardRef<HTMLDivElement, SpotlightItemProps>(
+  (
+    {
+      vm,
+      targetWidth,
+      targetHeight,
+      intersectionObserver$,
+      snap,
+      "aria-hidden": ariaHidden,
+    },
+    theirRef,
+  ) => {
+    const ourRef = useRef<HTMLDivElement | null>(null);
+    const ref = useMergedRefs(ourRef, theirRef);
+    const displayName = useObservableEagerState(vm.displayname$);
+    const video = useObservableEagerState(vm.video$);
+    const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning$);
+    const encryptionStatus = useObservableEagerState(vm.encryptionStatus$);
 
-  // Hook this item up to the intersection observer
-  useEffect(() => {
-    const element = ourRef.current!;
-    let prevIo: IntersectionObserver | null = null;
-    const subscription = intersectionObserver$.subscribe((io) => {
-      prevIo?.unobserve(element);
-      io.observe(element);
-      prevIo = io;
-    });
-    return (): void => {
-      subscription.unsubscribe();
-      prevIo?.unobserve(element);
+    // Hook this item up to the intersection observer
+    useEffect(() => {
+      const element = ourRef.current!;
+      let prevIo: IntersectionObserver | null = null;
+      const subscription = intersectionObserver$.subscribe((io) => {
+        prevIo?.unobserve(element);
+        io.observe(element);
+        prevIo = io;
+      });
+      return (): void => {
+        subscription.unsubscribe();
+        prevIo?.unobserve(element);
+      };
+    }, [intersectionObserver$]);
+
+    const baseProps: SpotlightItemBaseProps & RefAttributes<HTMLDivElement> = {
+      ref,
+      "data-id": vm.id,
+      className: classNames(styles.item, { [styles.snap]: snap }),
+      targetWidth,
+      targetHeight,
+      video,
+      member: vm.member,
+      unencryptedWarning,
+      displayName,
+      encryptionStatus,
+      "aria-hidden": ariaHidden,
+      localParticipant: vm.local,
     };
-  }, [intersectionObserver$]);
 
-  const baseProps: SpotlightItemBaseProps & RefAttributes<HTMLDivElement> = {
-    ref,
-    "data-id": vm.id,
-    className: classNames(styles.item, { [styles.snap]: snap }),
-    targetWidth,
-    targetHeight,
-    video,
-    member: vm.member,
-    unencryptedWarning,
-    displayName,
-    encryptionStatus,
-    "aria-hidden": ariaHidden,
-    localParticipant: vm.local,
-  };
-
-  return vm instanceof ScreenShareViewModel ? (
-    <MediaView videoEnabled videoFit="contain" mirror={false} {...baseProps} />
-  ) : (
-    <SpotlightUserMediaItem vm={vm} {...baseProps} />
-  );
-};
+    return vm instanceof ScreenShareViewModel ? (
+      <MediaView
+        videoEnabled
+        videoFit="contain"
+        mirror={false}
+        {...baseProps}
+      />
+    ) : (
+      <SpotlightUserMediaItem vm={vm} {...baseProps} />
+    );
+  },
+);
 
 SpotlightItem.displayName = "SpotlightItem";
 
 interface Props {
-  ref?: Ref<HTMLDivElement>;
   vm: SpotlightTileViewModel;
   expanded: boolean;
   onToggleExpanded: (() => void) | null;
@@ -186,148 +192,156 @@ interface Props {
   style?: ComponentProps<typeof animated.div>["style"];
 }
 
-export const SpotlightTile: FC<Props> = ({
-  ref: theirRef,
-  vm,
-  expanded,
-  onToggleExpanded,
-  targetWidth,
-  targetHeight,
-  showIndicators,
-  className,
-  style,
-}) => {
-  const { t } = useTranslation();
-  const [ourRef, root$] = useObservableRef<HTMLDivElement | null>(null);
-  const ref = useMergedRefs(ourRef, theirRef);
-  const maximised = useObservableEagerState(vm.maximised$);
-  const media = useObservableEagerState(vm.media$);
-  const [visibleId, setVisibleId] = useState<string | undefined>(media[0]?.id);
-  const latestMedia = useLatest(media);
-  const latestVisibleId = useLatest(visibleId);
-  const visibleIndex = media.findIndex((vm) => vm.id === visibleId);
-  const canGoBack = visibleIndex > 0;
-  const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;
+export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      vm,
+      expanded,
+      onToggleExpanded,
+      targetWidth,
+      targetHeight,
+      showIndicators,
+      className,
+      style,
+    },
+    theirRef,
+  ) => {
+    const { t } = useTranslation();
+    const [ourRef, root$] = useObservableRef<HTMLDivElement | null>(null);
+    const ref = useMergedRefs(ourRef, theirRef);
+    const maximised = useObservableEagerState(vm.maximised$);
+    const media = useObservableEagerState(vm.media$);
+    const [visibleId, setVisibleId] = useState<string | undefined>(
+      media[0]?.id,
+    );
+    const latestMedia = useLatest(media);
+    const latestVisibleId = useLatest(visibleId);
+    const visibleIndex = media.findIndex((vm) => vm.id === visibleId);
+    const canGoBack = visibleIndex > 0;
+    const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;
 
-  // To keep track of which item is visible, we need an intersection observer
-  // hooked up to the root element and the items. Because the items will run
-  // their effects before their parent does, we need to do this dance with an
-  // Observable to actually give them the intersection observer.
-  const intersectionObserver$ = useInitial<Observable<IntersectionObserver>>(
-    () =>
-      root$.pipe(
-        map(
-          (r) =>
-            new IntersectionObserver(
-              (entries) => {
-                const visible = entries.find((e) => e.isIntersecting);
-                if (visible !== undefined)
-                  setVisibleId(visible.target.getAttribute("data-id")!);
-              },
-              { root: r, threshold: 0.5 },
-            ),
+    // To keep track of which item is visible, we need an intersection observer
+    // hooked up to the root element and the items. Because the items will run
+    // their effects before their parent does, we need to do this dance with an
+    // Observable to actually give them the intersection observer.
+    const intersectionObserver$ = useInitial<Observable<IntersectionObserver>>(
+      () =>
+        root$.pipe(
+          map(
+            (r) =>
+              new IntersectionObserver(
+                (entries) => {
+                  const visible = entries.find((e) => e.isIntersecting);
+                  if (visible !== undefined)
+                    setVisibleId(visible.target.getAttribute("data-id")!);
+                },
+                { root: r, threshold: 0.5 },
+              ),
+          ),
         ),
-      ),
-  );
-
-  const [scrollToId, setScrollToId] = useReactiveState<string | null>(
-    (prev) =>
-      prev == null || prev === visibleId || media.every((vm) => vm.id !== prev)
-        ? null
-        : prev,
-    [visibleId],
-  );
-
-  const onBackClick = useCallback(() => {
-    const media = latestMedia.current;
-    const visibleIndex = media.findIndex(
-      (vm) => vm.id === latestVisibleId.current,
     );
-    if (visibleIndex > 0) setScrollToId(media[visibleIndex - 1].id);
-  }, [latestVisibleId, latestMedia, setScrollToId]);
 
-  const onNextClick = useCallback(() => {
-    const media = latestMedia.current;
-    const visibleIndex = media.findIndex(
-      (vm) => vm.id === latestVisibleId.current,
+    const [scrollToId, setScrollToId] = useReactiveState<string | null>(
+      (prev) =>
+        prev == null ||
+        prev === visibleId ||
+        media.every((vm) => vm.id !== prev)
+          ? null
+          : prev,
+      [visibleId],
     );
-    if (visibleIndex !== -1 && visibleIndex !== media.length - 1)
-      setScrollToId(media[visibleIndex + 1].id);
-  }, [latestVisibleId, latestMedia, setScrollToId]);
 
-  const ToggleExpandIcon = expanded ? CollapseIcon : ExpandIcon;
+    const onBackClick = useCallback(() => {
+      const media = latestMedia.current;
+      const visibleIndex = media.findIndex(
+        (vm) => vm.id === latestVisibleId.current,
+      );
+      if (visibleIndex > 0) setScrollToId(media[visibleIndex - 1].id);
+    }, [latestVisibleId, latestMedia, setScrollToId]);
 
-  return (
-    <animated.div
-      ref={ref}
-      className={classNames(className, styles.tile, {
-        [styles.maximised]: maximised,
-      })}
-      style={style}
-    >
-      {canGoBack && (
-        <button
-          className={classNames(styles.advance, styles.back)}
-          aria-label={t("common.back")}
-          onClick={onBackClick}
-        >
-          <ChevronLeftIcon aria-hidden width={24} height={24} />
-        </button>
-      )}
-      <div className={styles.contents}>
-        {media.map((vm) => (
-          <SpotlightItem
-            key={vm.id}
-            vm={vm}
-            targetWidth={targetWidth}
-            targetHeight={targetHeight}
-            intersectionObserver$={intersectionObserver$}
-            // This is how we get the container to scroll to the right media
-            // when the previous/next buttons are clicked: we temporarily
-            // remove all scroll snap points except for just the one media
-            // that we want to bring into view
-            snap={scrollToId === null || scrollToId === vm.id}
-            aria-hidden={(scrollToId ?? visibleId) !== vm.id}
-          />
-        ))}
-      </div>
-      {onToggleExpanded && (
-        <button
-          className={classNames(styles.expand)}
-          aria-label={
-            expanded ? t("video_tile.collapse") : t("video_tile.expand")
-          }
-          onClick={onToggleExpanded}
-        >
-          <ToggleExpandIcon aria-hidden width={20} height={20} />
-        </button>
-      )}
-      {canGoToNext && (
-        <button
-          className={classNames(styles.advance, styles.next)}
-          aria-label={t("common.next")}
-          onClick={onNextClick}
-        >
-          <ChevronRightIcon aria-hidden width={24} height={24} />
-        </button>
-      )}
-      {!expanded && (
-        <div
-          className={classNames(styles.indicators, {
-            [styles.show]: showIndicators && media.length > 1,
-          })}
-        >
+    const onNextClick = useCallback(() => {
+      const media = latestMedia.current;
+      const visibleIndex = media.findIndex(
+        (vm) => vm.id === latestVisibleId.current,
+      );
+      if (visibleIndex !== -1 && visibleIndex !== media.length - 1)
+        setScrollToId(media[visibleIndex + 1].id);
+    }, [latestVisibleId, latestMedia, setScrollToId]);
+
+    const ToggleExpandIcon = expanded ? CollapseIcon : ExpandIcon;
+
+    return (
+      <animated.div
+        ref={ref}
+        className={classNames(className, styles.tile, {
+          [styles.maximised]: maximised,
+        })}
+        style={style}
+      >
+        {canGoBack && (
+          <button
+            className={classNames(styles.advance, styles.back)}
+            aria-label={t("common.back")}
+            onClick={onBackClick}
+          >
+            <ChevronLeftIcon aria-hidden width={24} height={24} />
+          </button>
+        )}
+        <div className={styles.contents}>
           {media.map((vm) => (
-            <div
+            <SpotlightItem
               key={vm.id}
-              className={styles.item}
-              data-visible={vm.id === visibleId}
+              vm={vm}
+              targetWidth={targetWidth}
+              targetHeight={targetHeight}
+              intersectionObserver$={intersectionObserver$}
+              // This is how we get the container to scroll to the right media
+              // when the previous/next buttons are clicked: we temporarily
+              // remove all scroll snap points except for just the one media
+              // that we want to bring into view
+              snap={scrollToId === null || scrollToId === vm.id}
+              aria-hidden={(scrollToId ?? visibleId) !== vm.id}
             />
           ))}
         </div>
-      )}
-    </animated.div>
-  );
-};
+        {onToggleExpanded && (
+          <button
+            className={classNames(styles.expand)}
+            aria-label={
+              expanded ? t("video_tile.collapse") : t("video_tile.expand")
+            }
+            onClick={onToggleExpanded}
+          >
+            <ToggleExpandIcon aria-hidden width={20} height={20} />
+          </button>
+        )}
+        {canGoToNext && (
+          <button
+            className={classNames(styles.advance, styles.next)}
+            aria-label={t("common.next")}
+            onClick={onNextClick}
+          >
+            <ChevronRightIcon aria-hidden width={24} height={24} />
+          </button>
+        )}
+        {!expanded && (
+          <div
+            className={classNames(styles.indicators, {
+              [styles.show]: showIndicators && media.length > 1,
+            })}
+          >
+            {media.map((vm) => (
+              <div
+                key={vm.id}
+                className={styles.item}
+                data-visible={vm.id === visibleId}
+              />
+            ))}
+          </div>
+        )}
+      </animated.div>
+    );
+  },
+);
 
 SpotlightTile.displayName = "SpotlightTile";

src/useAudioContext.test.tsx

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

src/useAudioContext.tsx

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

src/useEvents.test.tsx

@@ -1,88 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { 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 { useCallback, useEffect, useSyncExternalStore } from "react";
+import { useEffect } from "react";
 
 import type {
   Listener,
@@ -13,9 +13,7 @@ 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,
@@ -35,9 +33,7 @@ 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>,
@@ -54,33 +50,3 @@ 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

@@ -1,51 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { 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,44 +5,43 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { useCallback } from "react";
-import { TypedEventEmitter } from "matrix-js-sdk";
-
-import { useTypedEventEmitterState } from "./useEvents";
+import EventEmitter from "events";
+import { useCallback, useEffect, useState } from "react";
 
 type LocalStorageItem = ReturnType<typeof localStorage.getItem>;
 
 // Bus to notify other useLocalStorage consumers when an item is changed
-export const localStorageBus = new TypedEventEmitter<
-  string,
-  { [key: string]: () => void }
->();
+export const localStorageBus = new EventEmitter();
 
-/**
- * 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(
+// Like useState, but reads from and persists the value to localStorage
+export const useLocalStorage = (
   key: string,
-): [LocalStorageItem, (value: string) => void] {
-  const value = useTypedEventEmitterState(
-    localStorageBus,
-    key,
-    useCallback(() => localStorage.getItem(key), [key]),
-  );
-  const setValue = useCallback(
-    (newValue: string) => setLocalStorageItemReactive(key, newValue),
-    [key],
+): [LocalStorageItem, (value: string) => void] => {
+  const [value, setValue] = useState<LocalStorageItem>(() =>
+    localStorage.getItem(key),
   );
 
-  return [value, setValue];
-}
+  useEffect(() => {
+    localStorageBus.on(key, setValue);
+    return (): void => {
+      localStorageBus.off(key, setValue);
+    };
+  }, [key, setValue]);
 
-export const setLocalStorageItemReactive = (
-  key: string,
-  value: string,
-): void => {
-  localStorage.setItem(key, value);
-  localStorageBus.emit(key);
+  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 => {
+  localStorage.setItem(key, value);
+  localStorageBus.emit(key, value);
 };

src/useMatrixRTCSessionJoinState.ts

@@ -10,31 +10,33 @@ import {
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { TypedEventEmitter } from "matrix-js-sdk";
-import { useCallback, useEffect } from "react";
-
-import { useTypedEventEmitterState } from "./useEvents";
-
-const dummySession = new TypedEventEmitter();
+import { useEffect, useState } from "react";
 
 export function useMatrixRTCSessionJoinState(
   rtcSession: MatrixRTCSession | undefined,
 ): boolean {
-  // 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]),
-  );
+  const [, setNumUpdates] = useState(0);
 
   useEffect(() => {
-    logger.info(
-      `Session in room ${rtcSession?.room.roomId} changed to ${
-        isJoined ? "joined" : "left"
-      }`,
-    );
-  }, [rtcSession, isJoined]);
+    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);
 
-  return isJoined;
+      return (): void => {
+        rtcSession.off(
+          MatrixRTCSessionEvent.JoinStateChanged,
+          onJoinStateChanged,
+        );
+      };
+    }
+  }, [rtcSession]);
+
+  return rtcSession?.isJoined() ?? false;
 }

src/useMatrixRTCSessionMemberships.ts

@@ -5,21 +5,39 @@ 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 } from "react";
-
-import { useTypedEventEmitterState } from "./useEvents";
+import { useCallback, useEffect, useState } from "react";
 
 export function useMatrixRTCSessionMemberships(
   rtcSession: MatrixRTCSession,
 ): CallMembership[] {
-  return useTypedEventEmitterState(
-    rtcSession,
-    MatrixRTCSessionEvent.MembershipsChanged,
-    useCallback(() => rtcSession.memberships, [rtcSession]),
-  );
+  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;
 }

src/useMediaQuery.ts

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

src/useMergedRefs.ts

@@ -5,21 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type RefCallback, type RefObject, useCallback } from "react";
+import { type MutableRefObject, type RefCallback, useCallback } from "react";
 
 /**
  * Combines multiple refs into one, useful for attaching multiple refs to the
  * same DOM node.
  */
 export const useMergedRefs = <T>(
-  ...refs: (RefObject<T | null> | RefCallback<T | null> | null | undefined)[]
+  ...refs: (MutableRefObject<T | null> | RefCallback<T | null> | null)[]
 ): RefCallback<T | null> =>
   useCallback(
     (value) =>
       refs.forEach((ref) => {
         if (typeof ref === "function") {
           ref(value);
-        } else if (ref) {
+        } else if (ref !== null) {
           ref.current = value;
         }
       }),

src/utils/observable.ts

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

src/utils/test.ts

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

tsconfig.json

@@ -22,9 +22,6 @@
       // 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: {
-                wait_for_key_rotation_ms: 5000,
-                delayed_leave_event_restart_ms: 4000,
-                delayed_leave_event_delay_ms: 18000,
+                key_rotation_on_leave_delay: 15000,
+                membership_keep_alive_period: 5000,
+                membership_server_side_expiry_timeout: 15000,
               },
             },
           },

vite.config.js

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