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

.eslintrc.cjs

@@ -44,18 +44,7 @@ module.exports = {
     ],
     // To encourage good usage of RxJS:
     "rxjs/no-exposed-subjects": "error",
-    "rxjs/finnish": ["error", { names: { "^this$": false } }],
-    "import/no-restricted-imports": [
-      "error",
-      {
-        patterns: [
-          {
-            regex: "matrix-js-sdk/src/matrixrtc/.*",
-            message: "Use the matrix-js-sdk/src/matrixrtc entrypoint instead.",
-          },
-        ],
-      },
-    ],
+    "rxjs/finnish": "error",
   },
   settings: {
     react: {

.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/changelog-label.yml

@@ -9,6 +9,6 @@ jobs:
     steps:
       - uses: yogevbd/enforce-label-action@a3c219da6b8fa73f6ba62b68ff09c469b3a1c024 # 2.2.2
         with:
-          REQUIRED_LABELS_ANY: "PR-Bug-Fix,PR-Documentation,PR-Task,PR-Feature,PR-Improvement,PR-Developer-Experience,dependencies,PR-Breaking-Change"
+          REQUIRED_LABELS_ANY: "PR-Bug-Fix,PR-Documentation,PR-Task,PR-Feature,PR-Improvement,PR-Developer-Experience,dependencies"
           REQUIRED_LABELS_ANY_DESCRIPTION: "Select at least one 'PR-' label"
           BANNED_LABELS: "banned"

.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() }}

.gitignore

@@ -9,7 +9,6 @@ dist-ssr
 public/config.json
 backend/synapse_tmp/*
 /coverage
-config.json
 
 # Yarn
 yarn-error.log

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_livekit.yaml

@@ -21,5 +21,3 @@ turn:
   external_tls: true
 keys:
   devkey: secret
-room:
-  auto_create: false

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": 100
-  }
+  "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": 100
-  }
+  "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": 100
-  },
   "posthog": {
     "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",
     "api_host": "https://posthog-element-call.element.io"

dev-backend-docker-compose.yml

@@ -4,23 +4,21 @@ 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
       # If the configured homeserver runs on localhost, it'll probably be using
       # a self-signed certificate
       - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
-      - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
     deploy:
       restart_policy:
         condition: on-failure
     ports:
       # HOST_PORT:CONTAINER_PORT
-      - 6080:6080
+      - 8080:8080
     networks:
       - ecbackend
 
@@ -102,6 +100,4 @@ services:
     depends_on:
       - synapse
     networks:
-      ecbackend:
-        aliases:
-          - matrix-rtc.m.localhost
+      - 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

@@ -145,6 +145,10 @@ server {
     {
         "type": "livekit",
         "livekit_service_url": "https://matrix-rtc-2.example.com/livekit/jwt"
+    },
+    {
+        "type": "nextgen_new_foci_type",
+        "props_for_nextgen_foci": "val"
     }
 ]
 ```
@@ -251,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

docs/url-params.md

@@ -56,7 +56,7 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `enableE2EE` (deprecated)                               | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch.                                                                                                                                                                                                                                                                                                                      |
 | `fontScale`                                             | A decimal number such as `0.9`                                                                       | No, defaults to `1.0`                                                                             | No, defaults to `1.0`        | Factor by which to scale the interface's font size.                                                                                                                                                                                                                                                                                                                                                 |
 | `fonts`                                                 |                                                                                                      | No                                                                                                | No                           | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`.                                                                                                                                                                                                                                                                            |
-| `header`                                                | `none`, `standard` or `app_bar`                                                                      | No, defaults to `standard`                                                                        | No, defaults to `standard`   | The style of headers to show. `standard` is the default arrangement, `none` hides the header entirely, and `app_bar` produces a header with a back button like you might see in mobile apps. The callback for the back button is `window.controls.onBackButtonPressed`.                                                                                                                             |
+| `hideHeader`                                            | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the room header when in a call.                                                                                                                                                                                                                                                                                                                                                               |
 | `hideScreensharing`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the screen-sharing button.                                                                                                                                                                                                                                                                                                                                                                    |
 | `homeserver`                                            |                                                                                                      | Not applicable                                                                                    | No                           | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
 | `intent`                                                | `start_call` or `join_existing`                                                                      | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent of the user with respect to the call. e.g. if they clicked a Start Call button, this would be `start_call`. If it was a Join Call button, it would be `join_existing`.                                                                                                                                                                                                                   |
@@ -69,7 +69,6 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `skipLobby` (deprecated: use `intent` instead)          | `true` or `false`                                                                                    | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false`      | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |
 | `theme`                                                 | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                 | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
 | `viaServers`                                            | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
-| `sendNotificationType`                                  | `ring` or `notification`                                                                             | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
 
 ### Widget-only parameters
 

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.11.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.34.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.3-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

@@ -5,6 +5,8 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+import com.vanniktech.maven.publish.SonatypeHost
+
 plugins {
     alias(libs.plugins.android.library)
     alias(libs.plugins.maven.publish)
@@ -25,7 +27,7 @@ android {
 }
 
 mavenPublishing {
-    publishToMavenCentral(automaticRelease = true)
+    publishToMavenCentral(SonatypeHost.S01, automaticRelease = true)
 
     signAllPublications()
 

locales/cs/app.json

@@ -61,7 +61,6 @@
     "video": "Video"
   },
   "developer_mode": {
-    "always_show_iphone_earpiece": "Zobrazit možnost sluchátek pro iPhone na všech platformách",
     "crypto_version": "Kryptografická verze: {{version}}",
     "debug_tile_layout_label": "Ladění rozložení dlaždic",
     "device_id": "ID zařízení: {{id}}",
@@ -174,7 +173,6 @@
     "devices": {
       "camera": "Fotoaparát",
       "camera_numbered": "Fotoaparát {{n}}",
-      "change_device_button": "Změnit zvukové zařízení",
       "default": "Výchozí",
       "default_named": "Výchozí <2> ({{name}}) </2>",
       "microphone": "Mikrofon",

locales/da/app.json

@@ -61,7 +61,6 @@
     "video": "Video"
   },
   "developer_mode": {
-    "always_show_iphone_earpiece": "Vis mulighed for iPhone-høretelefon på alle platforme",
     "crypto_version": "Krypto-version: {{version}}",
     "debug_tile_layout_label": "Fejlfinding af fliselayout",
     "device_id": "Enheds-id: {{id}}",
@@ -71,7 +70,6 @@
     "livekit_server_info": "LiveKit Serverinfo",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
-    "mute_all_audio": "Slå al lyd fra (deltagere, reaktioner, deltagelseslyde)",
     "show_connection_stats": "Vis forbindelsesstatistik",
     "show_non_member_tiles": "Vis fliser for medier fra ikke-medlemmer",
     "url_params": "URL-parametre",
@@ -82,7 +80,7 @@
   "error": {
     "call_is_not_supported": "Opkald er ikke understøttet",
     "call_not_found": "Opkald ikke fundet",
-    "call_not_found_description": "<0>Det link ser ikke ud til at høre til et eksisterende opkald. Tjek at du har det rigtige link, eller <2> opret et nyt</2>.</0>",
+    "call_not_found_description": "<0>Det link ser ikke ud til at høre til et eksisterende opkald. Tjek at du har det rigtige link, eller<1> opret et nyt</1>.</0>",
     "connection_lost": "Forbindelsen gik tabt",
     "connection_lost_description": "Du blev afbrudt fra opkaldet.",
     "e2ee_unsupported": "Inkompatibel browser",
@@ -166,17 +164,12 @@
       "effect_volume_description": "Juster den lydstyrke som reaktioner og håndsoprækninger afspilles med.",
       "effect_volume_label": "Lydstyrke for lydeffekter"
     },
-    "background_blur_header": "Baggrund",
-    "background_blur_label": "Gør videoens baggrund sløret",
-    "blur_not_supported_by_browser": "(Baggrundssløring understøttes ikke af denne enhed.)",
     "developer_tab_title": "Udvikler",
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
-      "change_device_button": "Skift lydenhed",
       "default": "Standard",
       "default_named": "Standard <2>({{name}})</2>",
-      "loudspeaker": "Højttaler",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Højttaler",

locales/de/app.json

@@ -82,7 +82,7 @@
   "error": {
     "call_is_not_supported": "Anrufe werden nicht unterstützt",
     "call_not_found": "Anruf nicht gefunden",
-    "call_not_found_description": "<0>Dieser Link scheint zu keinem bestehenden Anruf zu gehören. Es sollte geprüft werden, ob der Link korrekt ist, oder <2>ein neuer erstellt werden</2>.</0>",
+    "call_not_found_description": "<0>Dieser Link scheint zu keinem bestehenden Anruf zu gehören. Vergewissern Sie sich, dass Sie den richtigen Link haben, oder <1> erstellen Sie einen neuen</1>. </0>",
     "connection_lost": "Verbindung verloren",
     "connection_lost_description": "Ihre Verbindung zum Anruf wurde unterbrochen.",
     "e2ee_unsupported": "Inkompatibler Browser",
@@ -94,8 +94,6 @@
     "matrix_rtc_focus_missing": "Der Server ist nicht für die Verwendung mit {{brand}} konfiguriert. Bitte den Serveradministrator kontaktieren (Domain: {{domain}}, Fehlercode: {{ errorCode }}).",
     "open_elsewhere": "In einem anderen Tab geöffnet",
     "open_elsewhere_description": "{{brand}} wurde in einem anderen Tab geöffnet. Wenn das nicht richtig klingt, versuchen Sie, die Seite neu zu laden.",
-    "room_creation_restricted": "Anruf konnte nicht erstellt werden",
-    "room_creation_restricted_description": "Das Erstellen von Anrufen ist nur für autorisierte Nutzer möglich. Versuche es später erneut oder kontaktiere deinen Serveradministrator, falls das Problem weiterhin besteht.",
     "unexpected_ec_error": "Ein unerwarteter Fehler ist aufgetreten (<0>Fehlercode: </0> <1>{{ errorCode }}</1>). Bitte den Serveradministrator kontaktieren."
   },
   "group_call_loader": {
@@ -107,11 +105,6 @@
     "knock_reject_heading": "Zugriff verweigert",
     "reason": "Grund: {{reason}}"
   },
-  "handset": {
-    "overlay_back_button": "Zurück zum Lautsprechermodus",
-    "overlay_description": "Nur wenn App im Vordergrund nutzbar",
-    "overlay_title": "Ohrhörer Modus"
-  },
   "hangup_button_label": "Anruf beenden",
   "header_label": "Element Call-Startseite",
   "header_participants_label": "Teilnehmende",
@@ -180,11 +173,9 @@
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
-      "change_device_button": "Audiogerät wechseln",
       "default": "Standard",
       "default_named": "Standard<2> ({{name}} )</2>",
-      "handset": "Ohrhörer",
-      "loudspeaker": "Lautsprecher",
+      "earpiece": "Ohrhörer",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon{{n}}",
       "speaker": "Lautsprecher",

locales/en/app.json

@@ -82,7 +82,7 @@
   "error": {
     "call_is_not_supported": "Call is not supported",
     "call_not_found": "Call not found",
-    "call_not_found_description": "<0>That link doesn't appear to belong to any existing call. Check that you have the right link, or <2>create a new one</2>.</0>",
+    "call_not_found_description": "<0>That link doesn't appear to belong to any existing call. Check that you have the right link, or <1>create a new one</1>.</0>",
     "connection_lost": "Connection lost",
     "connection_lost_description": "You were disconnected from the call.",
     "e2ee_unsupported": "Incompatible browser",
@@ -94,8 +94,6 @@
     "matrix_rtc_focus_missing": "The server is not configured to work with {{brand}}. Please contact your server admin (Domain: {{domain}}, Error Code: {{ errorCode }}).",
     "open_elsewhere": "Opened in another tab",
     "open_elsewhere_description": "{{brand}} has been opened in another tab. If that doesn't sound right, try reloading the page.",
-    "room_creation_restricted": "Failed to create call",
-    "room_creation_restricted_description": "Call creation might be restricted to authorized users only. Try again later, or contact your server admin if the problem persists.",
     "unexpected_ec_error": "An unexpected error occurred (<0>Error Code:</0> <1>{{ errorCode }}</1>). Please contact your server admin."
   },
   "group_call_loader": {
@@ -107,11 +105,6 @@
     "knock_reject_heading": "Access denied",
     "reason": "Reason: {{reason}}"
   },
-  "handset": {
-    "overlay_back_button": "Back to Speaker Mode",
-    "overlay_description": "Only works while using app",
-    "overlay_title": "Handset Mode"
-  },
   "hangup_button_label": "End call",
   "header_label": "Element Call Home",
   "header_participants_label": "Participants",
@@ -183,8 +176,7 @@
       "change_device_button": "Change audio device",
       "default": "Default",
       "default_named": "Default <2>({{name}})</2>",
-      "handset": "Handset",
-      "loudspeaker": "Loudspeaker",
+      "earpiece": "Earpiece",
       "microphone": "Microphone",
       "microphone_numbered": "Microphone {{n}}",
       "speaker": "Speaker",

locales/et/app.json

@@ -61,7 +61,6 @@
     "video": "Video"
   },
   "developer_mode": {
-    "always_show_iphone_earpiece": "Näita iPhone'i kuulari valikut kõikidel platvormidel",
     "crypto_version": "Krüptoteekide versioon: {{version}}",
     "debug_tile_layout_label": "Meediapaanide paigutus",
     "device_id": "Seadme tunnus: {{id}}",
@@ -82,7 +81,7 @@
   "error": {
     "call_is_not_supported": "Kõne pole toetatud",
     "call_not_found": "Kõnet ei leidu",
-    "call_not_found_description": "<0>See link ei tundu olema seotud ühegi olemasoleva kõnega. Kontrolli, et sul on õige link või <2>loo uus</2>.</0>",
+    "call_not_found_description": "<0>See link ei tundu olema seotud ühegi olemasoleva kõnega. Kontrolli, et sul on õige link või <1>loo uus</1>.</0>",
     "connection_lost": "Ühendus on katkenud",
     "connection_lost_description": "Sinu ühendus selle kõnega on katkenud.",
     "e2ee_unsupported": "Mitteühilduv brauser",
@@ -94,8 +93,6 @@
     "matrix_rtc_focus_missing": "See server pole seadistatud töötama rakendusega {{brand}}. Palun võta ühendust serveri halduriga (domeen: {{domain}}, veakood: {{ errorCode }}).",
     "open_elsewhere": "Avatud teisel vahekaardil",
     "open_elsewhere_description": "{{brand}} on avatud teisel vahekaardil. Kui see ei tundu olema õige, proovi selle lehe uuesti laadimist.",
-    "room_creation_restricted": "Kõne loomine ei õnnestunud",
-    "room_creation_restricted_description": "Kõne loomine võib olla lubatud ainult volitatud kasutajatele. Proovi hiljem uuesti või probleemi püsimisel võta ühendust oma serveri haldajaga.",
     "unexpected_ec_error": "Tekkis ootamatu viga (<0>Veakood:</0> <1>{{ errorCode }}</1>). Palun võta ühendust serveri haldajaga."
   },
   "group_call_loader": {
@@ -107,10 +104,6 @@
     "knock_reject_heading": "Liitumine pole lubatud",
     "reason": "Põhjus"
   },
-  "handset": {
-    "overlay_back_button": "Tagasi esineja vaatesse",
-    "overlay_description": "See toimib vaid rakenduse kasutamise ajal"
-  },
   "hangup_button_label": "Lõpeta kõne",
   "header_label": "Avaleht: Element Call",
   "header_participants_label": "Osalejad",
@@ -179,10 +172,8 @@
     "devices": {
       "camera": "Kaamera",
       "camera_numbered": "Kaamera {{n}}",
-      "change_device_button": "Muuda heliseadet",
       "default": "Vaikimisi",
       "default_named": "Vaikimisi <2>({{name}})</2>",
-      "loudspeaker": "Valjuhääldi",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Kõlar",

locales/ru/app.json

@@ -61,7 +61,6 @@
     "video": "Видео"
   },
   "developer_mode": {
-    "always_show_iphone_earpiece": "Показать опцию наушников для iPhone на всех платформах",
     "crypto_version": "Версия криптографии: {{version}}",
     "debug_tile_layout_label": "Отладка расположения плиток",
     "device_id": "Идентификатор устройства: {{id}}",
@@ -71,7 +70,6 @@
     "livekit_server_info": "Информация о сервере LiveKit",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
-    "mute_all_audio": "Отключить все звуки (участников, реакции, звуки присоединения)",
     "show_connection_stats": "Показать статистику подключений",
     "show_non_member_tiles": "Показать плитки для медиафайлов, не являющихся участниками",
     "url_params": "Параметры URL-адреса",
@@ -174,7 +172,6 @@
     "devices": {
       "camera": "Камера",
       "camera_numbered": "Камера {{n}}",
-      "change_device_button": "Изменить аудиоустройство",
       "default": "По умолчанию",
       "default_named": "По умолчанию <2>({{name}})</2>",
       "microphone": "Микрофон",

locales/sk/app.json

@@ -61,7 +61,6 @@
     "video": "Video"
   },
   "developer_mode": {
-    "always_show_iphone_earpiece": "Zobraziť možnosť slúchadla iPhone na všetkých platformách",
     "crypto_version": "Krypto verzia: {{version}}",
     "debug_tile_layout_label": "Ladenie rozloženia dlaždíc",
     "device_id": "ID zariadenia: {{id}}",
@@ -82,7 +81,7 @@
   "error": {
     "call_is_not_supported": "Hovor nie je podporovaný",
     "call_not_found": "Hovor nebol nájdený",
-    "call_not_found_description": "<0>Zdá sa, že tento odkaz nepatrí k žiadnemu existujúcemu hovoru. Skontrolujte, či máte správny odkaz, alebo <2>vytvorte nový</2>.</0>",
+    "call_not_found_description": "<0>Zdá sa, že tento odkaz nepatrí k žiadnemu existujúcemu hovoru. Skontrolujte, či máte správny odkaz, alebo <1> vytvorte nový</1>. </0>",
     "connection_lost": "Strata spojenia",
     "connection_lost_description": "Boli ste odpojení od hovoru.",
     "e2ee_unsupported": "Nekompatibilný prehliadač",
@@ -174,10 +173,8 @@
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
-      "change_device_button": "Zmeniť zvukové zariadenie",
       "default": "Predvolené",
       "default_named": "Predvolené <2>({{name}})</2>",
-      "loudspeaker": "Reproduktor",
       "microphone": "Mikrofón",
       "microphone_numbered": "Mikrofón {{n}}",
       "speaker": "Reproduktor",

locales/sv/app.json

@@ -61,7 +61,6 @@
     "video": "Video"
   },
   "developer_mode": {
-    "always_show_iphone_earpiece": "Visa iPhone-hörsnäckealternativ på alla plattformar",
     "crypto_version": "Kryptoversion: {{version}}",
     "debug_tile_layout_label": "Felsök panelarrangemang",
     "device_id": "Enhets-ID: {{id}}",
@@ -71,7 +70,6 @@
     "livekit_server_info": "LiveKit-serverinfo",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix-ID: {{id}}",
-    "mute_all_audio": "Tysta allt ljud (deltagare, reaktioner, anslutningsljud)",
     "show_connection_stats": "Visa anslutningsstatistik",
     "show_non_member_tiles": "Visa paneler för media som inte är medlemmar",
     "url_params": "URL-parametrar",
@@ -166,14 +164,10 @@
       "effect_volume_description": "Justera volymen vid vilken reaktioner och handuppräckningseffekter spelas",
       "effect_volume_label": "Ljudeffektsvolym"
     },
-    "background_blur_header": "Bakgrund",
-    "background_blur_label": "Gör bakgrunden i videon suddig",
-    "blur_not_supported_by_browser": "(Bakgrundssuddighet stöds inte av den här enheten.)",
     "developer_tab_title": "Utvecklare",
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
-      "change_device_button": "Byt ljudenhet",
       "default": "Förval",
       "default_named": "Förval <2>({{name}})</2>",
       "microphone": "Mikrofon",

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.203.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": "^5.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/errors.spec.ts

@@ -72,56 +72,3 @@ test("Should automatically retry non fatal JWT errors", async ({
   await hasRetriedPromise;
   await expect(page.getByTestId("video").first()).toBeVisible();
 });
-
-test("Should show error screen if call creation is restricted", async ({
-  page,
-}) => {
-  await page.goto("/");
-
-  // We need the socket connection to fail, but this cannot be done by using the websocket route.
-  // Instead, we will trick the app by returning a bad URL for the SFU that will not be reachable an error out.
-  await page.route(
-    "**/matrix-rtc.m.localhost/livekit/jwt/sfu/get",
-    async (route) =>
-      await route.fulfill({
-        status: 200,
-        contentType: "application/json",
-        body: JSON.stringify({
-          url: "wss://badurltotricktest/livekit/sfu",
-          jwt: "FAKE",
-        }),
-      }),
-  );
-
-  // Then if the socket connection fails, livekit will try to validate the token!
-  // Livekit will not auto_create anymore and will return a 404 error.
-  await page.route(
-    "**/badurltotricktest/livekit/sfu/rtc/validate?**",
-    async (route) =>
-      await route.fulfill({
-        status: 404,
-        contentType: "text/plain",
-        body: "requested room does not exist",
-      }),
-  );
-
-  await page.pause();
-
-  await page.getByTestId("home_callName").click();
-  await page.getByTestId("home_callName").fill("HelloCall");
-  await page.getByTestId("home_displayName").click();
-  await page.getByTestId("home_displayName").fill("John Doe");
-  await page.getByTestId("home_go").click();
-
-  // Join the call
-  await page.getByTestId("lobby_joinCall").click();
-
-  await page.pause();
-  // Should fail
-  await expect(page.getByText("Failed to create call")).toBeVisible();
-  await expect(
-    page.getByText(
-      /Call creation might be restricted to authorized users only/,
-    ),
-  ).toBeVisible();
-});

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/sfu-reconnect-bug.spec.ts

@@ -1,104 +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 { expect, test } from "@playwright/test";
-
-test("When creator left, avoid reconnect to the same SFU", async ({
-  browser,
-}) => {
-  // Use reduce motion to disable animations that are making the tests a bit flaky
-  const creatorContext = await browser.newContext({ reducedMotion: "reduce" });
-  const creatorPage = await creatorContext.newPage();
-
-  await creatorPage.goto("/");
-
-  // ========
-  // ARRANGE: The first user creates a call as guest, join it, then click the invite button to copy the invite link
-  // ========
-  await creatorPage.getByTestId("home_callName").click();
-  await creatorPage.getByTestId("home_callName").fill("Welcome");
-  await creatorPage.getByTestId("home_displayName").click();
-  await creatorPage.getByTestId("home_displayName").fill("Inviter");
-  await creatorPage.getByTestId("home_go").click();
-  await expect(creatorPage.locator("video")).toBeVisible();
-
-  // join
-  await creatorPage.getByTestId("lobby_joinCall").click();
-  // Spotlight mode to make checking the test visually clearer
-  await creatorPage.getByRole("radio", { name: "Spotlight" }).check();
-
-  // Get the invite link
-  await creatorPage.getByRole("button", { name: "Invite" }).click();
-  await expect(
-    creatorPage.getByRole("heading", { name: "Invite to this call" }),
-  ).toBeVisible();
-  await expect(creatorPage.getByRole("img", { name: "QR Code" })).toBeVisible();
-  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
-  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
-  await creatorPage.getByTestId("modal_inviteLink").click();
-
-  const inviteLink = (await creatorPage.evaluate(
-    "navigator.clipboard.readText()",
-  )) as string;
-  expect(inviteLink).toContain("room/#/");
-
-  // ========
-  // ACT: The other user use the invite link to join the call as a guest
-  // ========
-  const guestB = await browser.newContext({
-    reducedMotion: "reduce",
-  });
-  const guestBPage = await guestB.newPage();
-
-  await guestBPage.goto(inviteLink);
-  await guestBPage.getByTestId("joincall_displayName").fill("Invitee");
-  await expect(guestBPage.getByTestId("joincall_joincall")).toBeVisible();
-  await guestBPage.getByTestId("joincall_joincall").click();
-  await guestBPage.getByTestId("lobby_joinCall").click();
-  await guestBPage.getByRole("radio", { name: "Spotlight" }).check();
-
-  // ========
-  // ACT: add a third user to the call to reproduce the bug
-  // ========
-  const guestC = await browser.newContext({
-    reducedMotion: "reduce",
-  });
-  const guestCPage = await guestC.newPage();
-  let sfuGetCallCount = 0;
-  await guestCPage.route("**/livekit/jwt/sfu/get", async (route) => {
-    sfuGetCallCount++;
-    await route.continue();
-  });
-  // Track WebSocket connections
-  let wsConnectionCount = 0;
-  await guestCPage.routeWebSocket("**", (ws) => {
-    // For some reason the interception is not working with the **
-    if (ws.url().includes("livekit/sfu/rtc")) {
-      wsConnectionCount++;
-    }
-    ws.connectToServer();
-  });
-
-  await guestCPage.goto(inviteLink);
-  await guestCPage.getByTestId("joincall_displayName").fill("Invitee");
-  await expect(guestCPage.getByTestId("joincall_joincall")).toBeVisible();
-  await guestCPage.getByTestId("joincall_joincall").click();
-  await guestCPage.getByTestId("lobby_joinCall").click();
-  await guestCPage.getByRole("radio", { name: "Spotlight" }).check();
-
-  await guestCPage.waitForTimeout(1000);
-
-  // ========
-  // the creator leaves the call
-  await creatorPage.getByTestId("incall_leave").click();
-
-  await guestCPage.waitForTimeout(2000);
-  // https://github.com/element-hq/element-call/issues/3344
-  // The app used to request a new jwt token then to reconnect to the SFU
-  expect(wsConnectionCount).toBe(1);
-  expect(sfuGetCallCount).toBe(1);
-});

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

@@ -5,14 +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 JSX,
-  Suspense,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { type FC, type JSX, Suspense, useEffect, useState } from "react";
 import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -26,13 +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";
-import { getUrlParams, HeaderStyle } from "./UrlParams";
-import { AppBar } from "./AppBar";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
@@ -60,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()
@@ -76,43 +62,41 @@ export const App: FC<Props> = ({ vm }) => {
       .catch(logger.error);
   });
 
-  // Since we are outside the router component, we cannot use useUrlParams here
-  const { header } = useMemo(getUrlParams, []);
-
-  const content = loaded ? (
-    <ClientProvider>
-      <MediaDevicesContext value={vm.mediaDevices}>
-        <ProcessorProvider>
-          <Sentry.ErrorBoundary
-            fallback={(error) => <ErrorPage error={error} widget={widget} />}
-          >
-            <DisconnectedBanner />
-            <Routes>
-              <SentryRoute path="/" element={<HomePage />} />
-              <SentryRoute path="/login" element={<LoginPage />} />
-              <SentryRoute path="/register" element={<RegisterPage />} />
-              <SentryRoute path="*" element={<RoomPage />} />
-            </Routes>
-          </Sentry.ErrorBoundary>
-        </ProcessorProvider>
-      </MediaDevicesContext>
-    </ClientProvider>
-  ) : (
-    <LoadingPage />
-  );
-
   return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     <BrowserRouter>
       <BackgroundProvider>
         <ThemeProvider>
           <TooltipProvider>
-            <Suspense fallback={null}>
-              {header === HeaderStyle.AppBar ? (
-                <AppBar>{content}</AppBar>
-              ) : (
-                content
-              )}
-            </Suspense>
+            {loaded ? (
+              <Suspense fallback={null}>
+                <ClientProvider>
+                  <MediaDevicesProvider>
+                    <ProcessorProvider>
+                      <Sentry.ErrorBoundary
+                        fallback={(error) => (
+                          <ErrorPage error={error} widget={widget} />
+                        )}
+                      >
+                        <DisconnectedBanner />
+                        <Routes>
+                          <SentryRoute path="/" element={<HomePage />} />
+                          <SentryRoute path="/login" element={<LoginPage />} />
+                          <SentryRoute
+                            path="/register"
+                            element={<RegisterPage />}
+                          />
+                          <SentryRoute path="*" element={<RoomPage />} />
+                        </Routes>
+                      </Sentry.ErrorBoundary>
+                    </ProcessorProvider>
+                  </MediaDevicesProvider>
+                </ClientProvider>
+              </Suspense>
+            ) : (
+              <LoadingPage />
+            )}
           </TooltipProvider>
         </ThemeProvider>
       </BackgroundProvider>

src/AppBar.module.css

@@ -1,23 +0,0 @@
-.bar {
-  block-size: 64px;
-  flex-shrink: 0;
-}
-
-.bar > header {
-  position: absolute;
-  inset-inline: 0;
-  inset-block-start: 0;
-  block-size: 64px;
-  z-index: var(--call-view-header-footer-layer);
-}
-
-.bar svg path {
-  fill: var(--cpd-color-icon-primary);
-}
-
-.bar > header > h1 {
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

src/AppBar.test.tsx

@@ -1,25 +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 { render } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { TooltipProvider } from "@vector-im/compound-web";
-
-import { AppBar } from "./AppBar";
-
-describe("AppBar", () => {
-  it("renders", () => {
-    const { container } = render(
-      <TooltipProvider>
-        <AppBar>
-          <p>This is the content.</p>
-        </AppBar>
-      </TooltipProvider>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

src/AppBar.tsx

@@ -1,130 +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,
-  type FC,
-  type MouseEvent,
-  type ReactNode,
-  use,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
-import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { useTranslation } from "react-i18next";
-
-import { Header, LeftNav, RightNav } from "./Header";
-import { platform } from "./Platform";
-import styles from "./AppBar.module.css";
-
-interface AppBarContext {
-  setTitle: (value: string) => void;
-  setSecondaryButton: (value: ReactNode) => void;
-  setHidden: (value: boolean) => void;
-}
-
-const AppBarContext = createContext<AppBarContext | null>(null);
-
-interface Props {
-  children: ReactNode;
-}
-
-/**
- * A "top app bar" featuring a back button, title and possibly a secondary
- * button, similar to what you might see in mobile apps.
- */
-export const AppBar: FC<Props> = ({ children }) => {
-  const { t } = useTranslation();
-  const onBackClick = useCallback((e: MouseEvent) => {
-    e.preventDefault();
-    window.controls.onBackButtonPressed?.();
-  }, []);
-
-  const [title, setTitle] = useState<string>("");
-  const [hidden, setHidden] = useState<boolean>(false);
-  const [secondaryButton, setSecondaryButton] = useState<ReactNode>(null);
-  const context = useMemo(
-    () => ({ setTitle, setSecondaryButton, setHidden }),
-    [setTitle, setHidden, setSecondaryButton],
-  );
-
-  return (
-    <>
-      <div
-        style={{ display: hidden ? "none" : "block" }}
-        className={styles.bar}
-      >
-        <Header>
-          <LeftNav>
-            <Tooltip label={t("common.back")}>
-              <IconButton onClick={onBackClick}>
-                <CollapseIcon />
-              </IconButton>
-            </Tooltip>
-          </LeftNav>
-          {title && (
-            <Heading
-              type="body"
-              size="lg"
-              weight={platform === "android" ? "medium" : "semibold"}
-            >
-              {title}
-            </Heading>
-          )}
-          <RightNav>{secondaryButton}</RightNav>
-        </Header>
-      </div>
-      <AppBarContext value={context}>{children}</AppBarContext>
-    </>
-  );
-};
-
-/**
- * React hook which sets the title to be shown in the app bar, if present. It is
- * an error to call this hook from multiple sites in the same component tree.
- */
-export function useAppBarTitle(title: string): void {
-  const setTitle = use(AppBarContext)?.setTitle;
-  useEffect(() => {
-    if (setTitle !== undefined) {
-      setTitle(title);
-      return (): void => setTitle("");
-    }
-  }, [title, setTitle]);
-}
-
-/**
- * React hook which sets the title to be shown in the app bar, if present. It is
- * an error to call this hook from multiple sites in the same component tree.
- */
-export function useAppBarHidden(hidden: boolean): void {
-  const setHidden = use(AppBarContext)?.setHidden;
-  useEffect(() => {
-    if (setHidden !== undefined) {
-      setHidden(hidden);
-      return (): void => setHidden(false);
-    }
-  }, [setHidden, hidden]);
-}
-
-/**
- * React hook which sets the secondary button to be shown in the app bar, if
- * present. It is an error to call this hook from multiple sites in the same
- * component tree.
- */
-export function useAppBarSecondaryButton(button: ReactNode): void {
-  const setSecondaryButton = use(AppBarContext)?.setSecondaryButton;
-  useEffect(() => {
-    if (setSecondaryButton !== undefined) {
-      setSecondaryButton(button);
-      return (): void => setSecondaryButton("");
-    }
-  }, [button, setSecondaryButton]);
-}

src/ClientContext.tsx

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

src/ErrorView.module.css

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

src/ErrorView.tsx

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

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";
@@ -28,10 +28,10 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
   className,
   children,
 }) => {
-  const { header } = useUrlParams();
+  const { hideHeader } = useUrlParams();
   return (
     <div className={classNames(styles.page, className)}>
-      {header === "standard" && (
+      {!hideHeader && (
         <Header>
           <LeftNav>
             <HeaderLogo />
@@ -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/UrlParams.test.ts

@@ -10,7 +10,7 @@ import { describe, expect, it } from "vitest";
 import {
   getRoomIdentifierFromUrl,
   getUrlParams,
-  HeaderStyle,
+  UserIntent,
 } from "../src/UrlParams";
 
 const ROOM_NAME = "roomNameHere";
@@ -82,16 +82,6 @@ describe("UrlParams", () => {
         getRoomIdentifierFromUrl("", `?roomId=${ROOM_ID}`, "").roomId,
       ).toBe(ROOM_ID);
     });
-    it("(roomId with unprintable characters)", () => {
-      const invisibleChar = "\u2066";
-      expect(
-        getRoomIdentifierFromUrl(
-          "",
-          `?roomId=${invisibleChar}${ROOM_ID}${invisibleChar}`,
-          "",
-        ).roomId,
-      ).toBe(ROOM_ID);
-    });
   });
 
   it("ignores room alias", () => {
@@ -211,68 +201,24 @@ describe("UrlParams", () => {
   });
 
   describe("intent", () => {
-    const noIntentDefaults = {
-      confineToRoom: false,
-      appPrompt: true,
-      preload: false,
-      header: HeaderStyle.Standard,
-      showControls: true,
-      hideScreensharing: false,
-      allowIceFallback: false,
-      perParticipantE2EE: false,
-      controlledAudioDevices: false,
-      skipLobby: false,
-      returnToLobby: false,
-      sendNotificationType: undefined,
-    };
-    const startNewCallDefaults = (platform: string): object => ({
-      confineToRoom: true,
-      appPrompt: false,
-      preload: true,
-      header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
-      showControls: true,
-      hideScreensharing: false,
-      allowIceFallback: true,
-      perParticipantE2EE: true,
-      controlledAudioDevices: platform === "desktop" ? false : true,
-      skipLobby: true,
-      returnToLobby: false,
-      sendNotificationType: "notification",
-    });
-    const joinExistingCallDefaults = (platform: string): object => ({
-      confineToRoom: true,
-      appPrompt: false,
-      preload: true,
-      header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
-      showControls: true,
-      hideScreensharing: false,
-      allowIceFallback: true,
-      perParticipantE2EE: true,
-      controlledAudioDevices: platform === "desktop" ? false : true,
-      skipLobby: false,
-      returnToLobby: false,
-      sendNotificationType: "notification",
-    });
-    it("use no-intent-defaults with unknown intent", () => {
-      expect(getUrlParams()).toMatchObject(noIntentDefaults);
+    it("defaults to unknown", () => {
+      expect(getUrlParams().intent).toBe(UserIntent.Unknown);
     });
 
     it("ignores intent if it is not a valid value", () => {
-      expect(getUrlParams("?intent=foo")).toMatchObject(noIntentDefaults);
+      expect(getUrlParams("?intent=foo").intent).toBe(UserIntent.Unknown);
     });
 
     it("accepts start_call", () => {
-      expect(
-        getUrlParams("?intent=start_call&widgetId=1234&parentUrl=parent.org"),
-      ).toMatchObject(startNewCallDefaults("desktop"));
+      expect(getUrlParams("?intent=start_call").intent).toBe(
+        UserIntent.StartNewCall,
+      );
     });
 
     it("accepts join_existing", () => {
-      expect(
-        getUrlParams(
-          "?intent=join_existing&widgetId=1234&parentUrl=parent.org",
-        ),
-      ).toMatchObject(joinExistingCallDefaults("desktop"));
+      expect(getUrlParams("?intent=join_existing").intent).toBe(
+        UserIntent.JoinExistingCall,
+      );
     });
   });
 
@@ -297,12 +243,4 @@ describe("UrlParams", () => {
       expect(getUrlParams("?intent=join_existing").skipLobby).toBe(false);
     });
   });
-  describe("header", () => {
-    it("uses header if provided", () => {
-      expect(getUrlParams("?header=app_bar&hideHeader=true").header).toBe(
-        "app_bar",
-      );
-      expect(getUrlParams("?header=none&hideHeader=false").header).toBe("none");
-    });
-  });
 });

src/UrlParams.ts

@@ -8,13 +8,10 @@ Please see LICENSE in the repository root for full details.
 import { useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { type RTCNotificationType } from "matrix-js-sdk/lib/matrixrtc";
-import { pickBy } from "lodash-es";
 
 import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
-import { platform } from "./Platform";
 
 interface RoomIdentifier {
   roomAlias: string | null;
@@ -23,24 +20,17 @@ interface RoomIdentifier {
 }
 
 export enum UserIntent {
-  // TODO: add DM vs room call
   StartNewCall = "start_call",
   JoinExistingCall = "join_existing",
   Unknown = "unknown",
 }
 
-export enum HeaderStyle {
-  None = "none",
-  Standard = "standard",
-  AppBar = "app_bar",
-}
-
-/**
- * The UrlProperties are used to pass required data to the widget.
- * Those are different in different rooms, users, devices. They do not configure the behavior of the
- * widget but provide the required data to the widget.
- */
-export interface UrlProperties {
+// If you need to add a new flag to this interface, prefer a name that describes
+// a specific behavior (such as 'confineToRoom'), rather than one that describes
+// the situations that call for this behavior ('isEmbedded'). This makes it
+// clearer what each flag means, and helps us avoid coupling Element Call's
+// behavior to the needs of specific consumers.
+export interface UrlParams {
   // Widget api related params
   widgetId: string | null;
   parentUrl: string | null;
@@ -52,11 +42,42 @@ export interface UrlProperties {
    * is also not validated, where it is in useRoomIdentifier().
    */
   roomId: string | null;
+  /**
+   * Whether the app should keep the user confined to the current call/room.
+   */
+  confineToRoom: boolean;
+  /**
+   * Whether upon entering a room, the user should be prompted to launch the
+   * native mobile app. (Affects only Android and iOS.)
+   *
+   * The app prompt must also be enabled in the config for this to take effect.
+   */
+  appPrompt: boolean;
+  /**
+   * Whether the app should pause before joining the call until it sees an
+   * io.element.join widget action, allowing it to be preloaded.
+   */
+  preload: boolean;
+  /**
+   * Whether to hide the room header when in a call.
+   */
+  hideHeader: boolean;
+  /**
+   * Whether the controls should be shown. For screen recording no controls can be desired.
+   */
+  showControls: boolean;
+  /**
+   * Whether to hide the screen-sharing button.
+   */
+  hideScreensharing: boolean;
+  /**
+   * Whether to use end-to-end encryption.
+   */
+  e2eEnabled: boolean;
   /**
    * The user's ID (only used in matryoshka mode).
    */
   userId: string | null;
-
   /**
    * The display name to use for auto-registration.
    */
@@ -93,97 +114,15 @@ export interface UrlProperties {
    * The Posthog API key. This is only used in the embedded package of Element Call.
    */
   posthogApiKey: string | null;
-  /**
-   * Whether to use end-to-end encryption.
-   */
-  e2eEnabled: boolean;
-  /**
-   * E2EE password
-   */
-  password: string | null;
-  /** This defines the homeserver that is going to be used when joining a room.
-   * It has to be set to a non default value for links to rooms
-   * that are not on the default homeserver,
-   * that is in use for the current user.
-   */
-  viaServers: string | null;
-
-  /**
-   * This defines the homeserver that is going to be used when registering
-   * a new (guest) user.
-   * This can be user to configure a non default guest user server when
-   * creating a spa link.
-   */
-  homeserver: string | null;
-
-  /**
-   * The rageshake submit URL. This is only used in the embedded package of Element Call.
-   */
-  rageshakeSubmitUrl: string | null;
-
-  /**
-   * The Sentry DSN. This is only used in the embedded package of Element Call.
-   */
-  sentryDsn: string | null;
-
-  /**
-   * The Sentry environment. This is only used in the embedded package of Element Call.
-   */
-  sentryEnvironment: string | null;
-  /**
-   * The theme to use for element call.
-   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
-   */
-  theme: string | null;
-}
-
-/**
- * The configuration for the app, which can be set via URL parameters.
- * Those property are different to the UrlProperties, since they are all optional
- * and configure the behavior of the app. Their value is the same if EC is used in
- * the same context but with different accounts/users.
- *
- * Their defaults can be controlled by the `intent` property.
- */
-export interface UrlConfiguration {
-  /**
-   * Whether the app should keep the user confined to the current call/room.
-   */
-  confineToRoom: boolean;
-  /**
-   * Whether upon entering a room, the user should be prompted to launch the
-   * native mobile app. (Affects only Android and iOS.)
-   *
-   * The app prompt must also be enabled in the config for this to take effect.
-   */
-  appPrompt: boolean;
-  /**
-   * Whether the app should pause before joining the call until it sees an
-   * io.element.join widget action, allowing it to be preloaded.
-   */
-  preload: boolean;
-  /**
-   * The style of headers to show. "standard" is the default arrangement, "none"
-   * hides the header entirely, and "app_bar" produces a header with a back
-   * button like you might see in mobile apps. The callback for the back button
-   * is window.controls.onBackButtonPressed.
-   */
-  header: HeaderStyle;
-  /**
-   * Whether the controls should be shown. For screen recording no controls can be desired.
-   */
-  showControls: boolean;
-  /**
-   * Whether to hide the screen-sharing button.
-   */
-  hideScreensharing: boolean;
-
   /**
    * Whether the app is allowed to use fallback STUN servers for ICE in case the
    * user's homeserver doesn't provide any.
    */
   allowIceFallback: boolean;
-
+  /**
+   * E2EE password
+   */
+  password: string | null;
   /**
    * Whether the app should use per participant keys for E2EE.
    */
@@ -206,17 +145,46 @@ export interface UrlConfiguration {
    */
   returnToLobby: boolean;
   /**
-   * Whether and what type of notification EC should send, when the user joins the call.
+   * The theme to use for element call.
+   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
    */
-  sendNotificationType?: RTCNotificationType;
-}
+  theme: string | null;
+  /** This defines the homeserver that is going to be used when joining a room.
+   * It has to be set to a non default value for links to rooms
+   * that are not on the default homeserver,
+   * that is in use for the current user.
+   */
+  viaServers: string | null;
+  /**
+   * This defines the homeserver that is going to be used when registering
+   * a new (guest) user.
+   * This can be user to configure a non default guest user server when
+   * creating a spa link.
+   */
+  homeserver: string | null;
 
-// If you need to add a new flag to this interface, prefer a name that describes
-// a specific behavior (such as 'confineToRoom'), rather than one that describes
-// the situations that call for this behavior ('isEmbedded'). This makes it
-// clearer what each flag means, and helps us avoid coupling Element Call's
-// behavior to the needs of specific consumers.
-export interface UrlParams extends UrlProperties, UrlConfiguration {}
+  /**
+   * The user's intent with respect to the call.
+   * e.g. if they clicked a Start Call button, this would be `start_call`.
+   * If it was a Join Call button, it would be `join_existing`.
+   */
+  intent: string | null;
+
+  /**
+   * The rageshake submit URL. This is only used in the embedded package of Element Call.
+   */
+  rageshakeSubmitUrl: string | null;
+
+  /**
+   * The Sentry DSN. This is only used in the embedded package of Element Call.
+   */
+  sentryDsn: string | null;
+
+  /**
+   * The Sentry environment. This is only used in the embedded package of Element Call.
+   */
+  sentryEnvironment: string | null;
+}
 
 // This is here as a stopgap, but what would be far nicer is a function that
 // takes a UrlParams and returns a query string. That would enable us to
@@ -258,17 +226,6 @@ class ParamParser {
     return this.fragmentParams.get(name) ?? this.queryParams.get(name);
   }
 
-  public getEnumParam<T extends string>(
-    name: string,
-    type: { [s: string]: T } | ArrayLike<T>,
-  ): T | undefined {
-    const value = this.getParam(name);
-    if (value !== null && Object.values(type).includes(value as T)) {
-      return value as T;
-    }
-    return undefined;
-  }
-
   public getAllParams(name: string): string[] {
     return [
       ...this.fragmentParams.getAll(name),
@@ -280,10 +237,6 @@ class ParamParser {
     const param = this.getParam(name);
     return param === null ? defaultValue : param !== "false";
   }
-  public getFlag(name: string): boolean | undefined {
-    const param = this.getParam(name);
-    return param !== null ? param !== "false" : undefined;
-  }
 }
 
 /**
@@ -300,79 +253,32 @@ export const getUrlParams = (
 
   const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
 
+  let intent = parser.getParam("intent");
+  if (!intent || !Object.values(UserIntent).includes(intent as UserIntent)) {
+    intent = UserIntent.Unknown;
+  }
   const widgetId = parser.getParam("widgetId");
   const parentUrl = parser.getParam("parentUrl");
   const isWidget = !!widgetId && !!parentUrl;
 
-  /**
-   * The user's intent with respect to the call.
-   * e.g. if they clicked a Start Call button, this would be `start_call`.
-   * If it was a Join Call button, it would be `join_existing`.
-   * This is a platform specific default set of parameters, that allows to minize the configuration
-   * needed to start a call. And empowers the EC codebase to control the platform/intent behavior in
-   * a central place.
-   *
-   * In short: either provide url query parameters of UrlConfiguration or set the intent
-   * (or the global defaults will be used).
-   */
-  const intent = !isWidget
-    ? UserIntent.Unknown
-    : (parser.getEnumParam("intent", UserIntent) ?? UserIntent.Unknown);
-  // Here we only use constants and `platform` to determine the intent preset.
-  let intentPreset: UrlConfiguration;
-  const inAppDefault = {
-    confineToRoom: true,
-    appPrompt: false,
-    preload: true,
-    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
-    showControls: true,
-    hideScreensharing: false,
-    allowIceFallback: true,
-    perParticipantE2EE: true,
-    controlledAudioDevices: platform === "desktop" ? false : true,
-    skipLobby: true,
-    returnToLobby: false,
-    sendNotificationType: "notification" as RTCNotificationType,
-  };
-  switch (intent) {
-    case UserIntent.StartNewCall:
-      intentPreset = {
-        ...inAppDefault,
-        skipLobby: true,
-      };
-      break;
-    case UserIntent.JoinExistingCall:
-      intentPreset = {
-        ...inAppDefault,
-        skipLobby: false,
-      };
-      break;
-    // Non widget usecase defaults
-    default:
-      intentPreset = {
-        confineToRoom: false,
-        appPrompt: true,
-        preload: false,
-        header: HeaderStyle.Standard,
-        showControls: true,
-        hideScreensharing: false,
-        allowIceFallback: false,
-        perParticipantE2EE: false,
-        controlledAudioDevices: false,
-        skipLobby: false,
-        returnToLobby: false,
-        sendNotificationType: undefined,
-      };
-  }
-
-  const properties: UrlProperties = {
+  return {
     widgetId,
     parentUrl,
+
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
     // what would we do if it were invalid? If the widget API says that's what
     // the room ID is, then that's what it is.
     roomId: parser.getParam("roomId"),
     password: parser.getParam("password"),
+    // This flag has 'embed' as an alias for historical reasons
+    confineToRoom:
+      parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
+    appPrompt: parser.getFlagParam("appPrompt", true),
+    preload: isWidget ? parser.getFlagParam("preload") : false,
+    hideHeader: parser.getFlagParam("hideHeader"),
+    showControls: parser.getFlagParam("showControls", true),
+    hideScreensharing: parser.getFlagParam("hideScreensharing"),
+    e2eEnabled: parser.getFlagParam("enableE2EE", true),
     userId: isWidget ? parser.getParam("userId") : null,
     displayName: parser.getParam("displayName"),
     deviceId: isWidget ? parser.getParam("deviceId") : null,
@@ -380,9 +286,24 @@ export const getUrlParams = (
     lang: parser.getParam("lang"),
     fonts: parser.getAllParams("font"),
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
+    allowIceFallback: parser.getFlagParam("allowIceFallback"),
+    perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
+    controlledAudioDevices: parser.getFlagParam(
+      "controlledAudioDevices",
+      // the deprecated property name
+      parser.getFlagParam("controlledMediaDevices"),
+    ),
+    skipLobby: parser.getFlagParam(
+      "skipLobby",
+      isWidget && intent === UserIntent.StartNewCall,
+    ),
+    // In SPA mode the user should always exit to the home screen when hanging
+    // up, rather than being sent back to the lobby
+    returnToLobby: isWidget ? parser.getFlagParam("returnToLobby") : false,
     theme: parser.getParam("theme"),
     viaServers: !isWidget ? parser.getParam("viaServers") : null,
     homeserver: !isWidget ? parser.getParam("homeserver") : null,
+    intent,
     posthogApiHost: parser.getParam("posthogApiHost"),
     posthogApiKey: parser.getParam("posthogApiKey"),
     posthogUserId:
@@ -390,35 +311,6 @@ export const getUrlParams = (
     rageshakeSubmitUrl: parser.getParam("rageshakeSubmitUrl"),
     sentryDsn: parser.getParam("sentryDsn"),
     sentryEnvironment: parser.getParam("sentryEnvironment"),
-    e2eEnabled: parser.getFlagParam("enableE2EE", true),
-  };
-
-  const configuration: Partial<UrlConfiguration> = {
-    confineToRoom: parser.getFlag("confineToRoom"),
-    appPrompt: parser.getFlag("appPrompt"),
-    preload: isWidget ? parser.getFlag("preload") : undefined,
-    // Check hideHeader for backwards compatibility. If header is set, hideHeader
-    // is ignored.
-    header: parser.getEnumParam("header", HeaderStyle),
-    showControls: parser.getFlag("showControls"),
-    hideScreensharing: parser.getFlag("hideScreensharing"),
-    allowIceFallback: parser.getFlag("allowIceFallback"),
-    perParticipantE2EE: parser.getFlag("perParticipantE2EE"),
-    controlledAudioDevices: parser.getFlag("controlledAudioDevices"),
-    skipLobby: isWidget ? parser.getFlag("skipLobby") : false,
-    // In SPA mode the user should always exit to the home screen when hanging
-    // up, rather than being sent back to the lobby
-    returnToLobby: isWidget ? parser.getFlag("returnToLobby") : false,
-    sendNotificationType: parser.getEnumParam("sendNotificationType", [
-      "ring",
-      "notification",
-    ]),
-  };
-
-  return {
-    ...properties,
-    ...intentPreset,
-    ...pickBy(configuration, (v) => v !== undefined),
   };
 };
 
@@ -477,16 +369,10 @@ export function getRoomIdentifierFromUrl(
 
   // Make sure roomId is valid
   let roomId: string | null = parser.getParam("roomId");
-  if (roomId !== null) {
-    // Replace any non-printable characters that another client may have inserted.
-    // For instance on iOS, some copied links end up with zero width characters on the end which get encoded into the URL.
-    // This isn't valid for a roomId, so we can freely strip the content.
-    roomId = roomId.replaceAll(/^[^ -~]+|[^ -~]+$/g, "");
-    if (!roomId.startsWith("!")) {
-      roomId = null;
-    } else if (!roomId.includes("")) {
-      roomId = null;
-    }
+  if (!roomId?.startsWith("!")) {
+    roomId = null;
+  } else if (!roomId.includes("")) {
+    roomId = null;
   }
 
   return {

src/__snapshots__/AppBar.test.tsx.snap

@@ -1,50 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`AppBar > renders 1`] = `
-<div>
-  <div
-    class="bar"
-    style="display: block;"
-  >
-    <header
-      class="header"
-    >
-      <div
-        class="nav leftNav"
-      >
-        <button
-          aria-labelledby="«r0»"
-          class="_icon-button_1pz9o_8"
-          data-kind="primary"
-          role="button"
-          style="--cpd-icon-button-size: 32px;"
-          tabindex="0"
-        >
-          <div
-            class="_indicator-icon_zr2a0_17"
-            style="--cpd-icon-button-size: 100%;"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
-              />
-            </svg>
-          </div>
-        </button>
-      </div>
-      <div
-        class="nav rightNav"
-      />
-    </header>
-  </div>
-  <p>
-    This is the content.
-  </p>
-</div>
-`;

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/ReactionToggleButton.tsx

@@ -24,6 +24,8 @@ import {
 import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/lib/logger";
 import classNames from "classnames";
+import { useObservableState } from "observable-hooks";
+import { map } from "rxjs";
 
 import { useReactionsSender } from "../reactions/useReactionsSender";
 import styles from "./ReactionToggleButton.module.css";
@@ -34,7 +36,6 @@ import {
 } from "../reactions";
 import { Modal } from "../Modal";
 import { type CallViewModel } from "../state/CallViewModel";
-import { useBehavior } from "../useBehavior";
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
   raised: boolean;
@@ -179,8 +180,12 @@ export function ReactionToggleButton({
   const [showReactionsMenu, setShowReactionsMenu] = useState(false);
   const [errorText, setErrorText] = useState<string>();
 
-  const isHandRaised = !!useBehavior(vm.handsRaised$)[identifier];
-  const canReact = !useBehavior(vm.reactions$)[identifier];
+  const isHandRaised = useObservableState(
+    vm.handsRaised$.pipe(map((v) => !!v[identifier])),
+  );
+  const canReact = useObservableState(
+    vm.reactions$.pipe(map((v) => !v[identifier])),
+  );
 
   useEffect(() => {
     // Clear whenever the reactions menu state changes.

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,43 +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;
+    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;
+    membership_keep_alive_period?: number;
 
     /**
-     * The time (in milliseconds) after which a we consider a delayed event restart http request to have failed.
-     * Setting this to a lower value will result in more frequent retries but also a higher chance of failiour.
-     *
-     * In the presence of network packet loss (hurting TCP connections), the custom delayedEventRestartLocalTimeoutMs
-     * helps by keeping more delayed event reset candidates in flight,
-     * improving the chances of a successful reset. (its is equivalent to the js-sdk `localTimeout` configuration,
-     * but only applies to calls to the `_unstable_updateDelayedEvent` endpoint with a body of `{action:"restart"}`.)
+     * How long (in milliseconds) after the last keep-alive the server should expire the
+     * MatrixRTC membership event.
      */
-    delayed_leave_event_restart_local_timeout_ms?: 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;
-
-    /**
-     * How long we wait before retrying after a network error on any of the requests.
-     */
-    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

@@ -1,36 +1,31 @@
 /*
-Copyright 2024-2025 New Vector Ltd.
+Copyright 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 { Subject } from "rxjs";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { BehaviorSubject, Subject } from "rxjs";
 
 export interface Controls {
   canEnterPip(): boolean;
   enablePip(): void;
   disablePip(): void;
-
-  setAvailableAudioDevices(devices: OutputDevice[]): void;
-  setAudioDevice(id: string): void;
-  onAudioDeviceSelect?: (id: string) => void;
-  onAudioPlaybackStarted?: () => void;
-  setAudioEnabled(enabled: boolean): void;
-  showNativeAudioDevicePicker?: () => void;
-  onBackButtonPressed?: () => void;
-
   /** @deprecated use  setAvailableAudioDevices instead*/
   setAvailableOutputDevices(devices: OutputDevice[]): void;
+  setAvailableAudioDevices(devices: OutputDevice[]): void;
   /** @deprecated use  setAudioDevice instead*/
   setOutputDevice(id: string): void;
+  setAudioDevice(id: string): void;
   /** @deprecated use  onAudioDeviceSelect instead*/
   onOutputDeviceSelect?: (id: string) => void;
+  onAudioDeviceSelect?: (id: string) => void;
   /** @deprecated use  setAudioEnabled instead*/
   setOutputEnabled(enabled: boolean): void;
+  setAudioEnabled(enabled: boolean): void;
   /** @deprecated use  showNativeAudioDevicePicker instead*/
   showNativeOutputDevicePicker?: () => void;
+  showNativeAudioDevicePicker?: () => void;
 }
 
 export interface OutputDevice {
@@ -46,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>();
-
+// 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,14 +55,6 @@ export const outputDevice$ = new Subject<string>();
  */
 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,17 +67,13 @@ window.controls = {
     if (!setPipEnabled$.observed) throw new Error("No call is running");
     setPipEnabled$.next(false);
   },
-
   setAvailableAudioDevices(devices: OutputDevice[]): void {
-    logger.info("setAvailableAudioDevices called from native:", devices);
     availableOutputDevices$.next(devices);
   },
   setAudioDevice(id: string): void {
-    logger.info("setAudioDevice called from native", id);
     outputDevice$.next(id);
   },
   setAudioEnabled(enabled: boolean): void {
-    logger.info("setAudioEnabled called from native:", enabled);
     if (!setAudioEnabled$.observed)
       throw new Error(
         "Output controls are disabled. No setAudioEnabled$ observer",

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,22 +18,23 @@ import {
   type ComponentType,
   type Dispatch,
   type FC,
+  type LegacyRef,
   type ReactNode,
-  type Ref,
   type SetStateAction,
   createContext,
+  forwardRef,
   memo,
-  use,
-  useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef,
   useState,
-  useSyncExternalStore,
 } from "react";
 import useMeasure from "react-use-measure";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { useObservableEagerState } from "observable-hooks";
+import { fromEvent, map, startWith } from "rxjs";
 
 import styles from "./Grid.module.css";
 import { useMergedRefs } from "../useMergedRefs";
@@ -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;
@@ -155,8 +156,13 @@ export function useVisibleTiles(callback: VisibleTilesCallback): void {
   );
 }
 
+const windowHeightObservable$ = fromEvent(window, "resize").pipe(
+  startWith(null),
+  map(() => window.innerHeight),
+);
+
 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.
@@ -165,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"];
   /**
@@ -256,13 +262,7 @@ export function Grid<
   const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
   const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);
 
-  const windowHeight = useSyncExternalStore(
-    useCallback((onChange) => {
-      window.addEventListener("resize", onChange);
-      return (): void => window.removeEventListener("resize", onChange);
-    }, []),
-    useCallback(() => window.innerHeight, []),
-  );
+  const windowHeight = useObservableEagerState(windowHeightObservable$);
   const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
   const [generation, setGeneration] = useState<number | null>(null);
   const [visibleTilesCallback, setVisibleTilesCallback] =
@@ -297,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} />;
+        }),
+      ),
     [],
   );
 
@@ -531,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";
 
@@ -13,7 +13,6 @@ import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewMod
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";
-import { useBehavior } from "../useBehavior";
 
 /**
  * An implementation of the "one-on-one" layout, in which the remote participant
@@ -25,15 +24,15 @@ 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 = useBehavior(pipAlignment$);
+    const pipAlignmentValue = useObservableEagerState(pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),
       [width, height],
@@ -67,5 +66,5 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
         </Slot>
       </div>
     );
-  },
+  }),
 });

src/grid/SpotlightExpandedLayout.tsx

@@ -5,13 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, useCallback } from "react";
+import { forwardRef, useCallback } from "react";
+import { useObservableEagerState } from "observable-hooks";
 
 import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
 import { type CallLayout } from "./CallLayout";
 import { type DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
-import { useBehavior } from "../useBehavior";
 
 /**
  * An implementation of the "expanded spotlight" layout, in which the spotlight
@@ -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,15 +37,14 @@ export const makeSpotlightExpandedLayout: CallLayout<
         />
       </div>
     );
-  },
+  }),
 
-  scrolling: function SpotlightExpandedLayoutScrolling({
+  scrolling: forwardRef(function SpotlightExpandedLayoutScrolling(
+    { model, Slot },
     ref,
-    model,
-    Slot,
-  }): ReactNode {
+  ) {
     useUpdateLayout();
-    const pipAlignmentValue = useBehavior(pipAlignment$);
+    const pipAlignmentValue = useObservableEagerState(pipAlignment$);
 
     const onDragPip: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
@@ -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";
 
@@ -13,7 +13,6 @@ import { type CallLayout, arrangeTiles } from "./CallLayout";
 import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightPortraitLayout.module.css";
 import { useUpdateLayout, useVisibleTiles } from "./Grid";
-import { useBehavior } from "../useBehavior";
 
 interface GridCSSProperties extends CSSProperties {
   "--grid-gap": string;
@@ -31,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 (
@@ -49,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$);
@@ -66,7 +63,8 @@ export const makeSpotlightPortraitLayout: CallLayout<
       width,
       model.grid.length,
     );
-    const withIndicators = useBehavior(model.spotlight.media$).length > 1;
+    const withIndicators =
+      useObservableEagerState(model.spotlight.media$).length > 1;
 
     return (
       <div
@@ -92,5 +90,5 @@ export const makeSpotlightPortraitLayout: CallLayout<
         </div>
       </div>
     );
-  },
+  }),
 });

src/home/RegisteredView.tsx

@@ -37,14 +37,12 @@ import { Form } from "../form/Form";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useOptInAnalytics } from "../settings/settings";
-import { useUrlParams } from "../UrlParams";
 
 interface Props {
   client: MatrixClient;
 }
 
 export const RegisteredView: FC<Props> = ({ client }) => {
-  const { header } = useUrlParams();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
   const [optInAnalytics] = useOptInAnalytics();
@@ -116,16 +114,14 @@ export const RegisteredView: FC<Props> = ({ client }) => {
   return (
     <>
       <div className={commonStyles.container}>
-        {header === "standard" && (
-          <Header>
-            <LeftNav>
-              <HeaderLogo />
-            </LeftNav>
-            <RightNav>
-              <UserMenuContainer />
-            </RightNav>
-          </Header>
-        )}
+        <Header>
+          <LeftNav>
+            <HeaderLogo />
+          </LeftNav>
+          <RightNav>
+            <UserMenuContainer />
+          </RightNav>
+        </Header>
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
           <Heading size="lg" weight="semibold">

src/home/UnauthenticatedView.tsx

@@ -34,11 +34,9 @@ import { Config } from "../config/Config";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useOptInAnalytics } from "../settings/settings";
 import { ExternalLink, Link } from "../button/Link";
-import { useUrlParams } from "../UrlParams";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
-  const { header } = useUrlParams();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
   const [optInAnalytics] = useOptInAnalytics();
@@ -143,16 +141,14 @@ export const UnauthenticatedView: FC = () => {
   return (
     <>
       <div className={commonStyles.container}>
-        {header === "standard" && (
-          <Header>
-            <LeftNav>
-              <HeaderLogo />
-            </LeftNav>
-            <RightNav hideMobile>
-              <UserMenuContainer />
-            </RightNav>
-          </Header>
-        )}
+        <Header>
+          <LeftNav>
+            <HeaderLogo />
+          </LeftNav>
+          <RightNav hideMobile>
+            <UserMenuContainer />
+          </RightNav>
+        </Header>
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
           <Heading size="lg" weight="semibold">

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

@@ -45,9 +45,6 @@ layer(compound);
   --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
   --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   --background-gradient: url("graphics/backgroundGradient.svg");
-
-  --call-view-overlay-layer: 1;
-  --call-view-header-footer-layer: 2;
 }
 
 :root,
@@ -74,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

@@ -16,9 +16,8 @@ import {
 import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 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";
 
 export interface MatrixAudioRendererProps {
   /**
@@ -60,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.
@@ -71,7 +69,7 @@ export function MatrixAudioRenderer({
   const logInvalid = (identity: string, validIdentities: Set<string>): void => {
     if (loggedInvalidIdentities.current.has(identity)) return;
     logger.warn(
-      `[MatrixAudioRenderer] Audio track ${identity} has no matching matrix call member`,
+      `Audio track ${identity} has no matching matrix call member`,
       `current members: ${Array.from(validIdentities.values())}`,
       `track will not get rendered`,
     );
@@ -98,14 +96,6 @@ export function MatrixAudioRenderer({
       isValid
     );
   });
-  useEffect(() => {
-    if (!tracks.some((t) => !validIdentities.has(t.participant.identity))) {
-      logger.debug(
-        `[MatrixAudioRenderer] 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.
@@ -181,7 +171,7 @@ interface StereoPanAudioTrackProps {
 /**
  * This wraps `livekit.AudioTrack` to allow adding audio nodes to a track.
  * It main purpose is to remount the AudioTrack component when switching from
- * audioContext to normal audio playback.
+ * audiooContext to normal audio playback.
  * As of now the AudioTrack component does not support adding audio nodes while being mounted.
  * @param param0
  * @returns
@@ -201,7 +191,7 @@ function AudioTrackWithAudioNodes({
   const [trackReady, setTrackReady] = useReactiveState(
     () => false,
     // We only want the track to reset once both (audioNodes and audioContext) are set.
-    // for unsetting the audioContext its enough if one of the two is undefined.
+    // for unsetting the audioContext its enough if one of the the is undefined.
     [audioContext && audioNodes],
   );
 
@@ -214,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/useECConnectionState.ts

@@ -22,11 +22,17 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import {
   ElementCallError,
   InsufficientCapacityError,
-  SFURoomCreationRestrictedError,
   UnknownCallError,
 } from "../utils/errors.ts";
 import { AbortHandle } from "../utils/abortHandle.ts";
 
+declare global {
+  interface Window {
+    peerConnectionTimeout?: number;
+    websocketTimeout?: number;
+  }
+}
+
 /*
  * Additional values for states that a call can be in, beyond what livekit
  * provides in ConnectionState. Also reconnects the call if the SFU Config
@@ -163,7 +169,12 @@ async function connectAndPublish(
 
   try {
     logger.info(`[Lifecycle] Connecting to livekit room ${sfuConfig!.url} ...`);
-    await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt);
+    await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt, {
+      // Due to stability issues on Firefox we are testing the effect of different
+      // timeouts, and allow these values to be set through the console
+      peerConnectionTimeout: window.peerConnectionTimeout ?? 45000,
+      websocketTimeout: window.websocketTimeout ?? 45000,
+    });
     logger.info(`[Lifecycle] ... connected to livekit room`);
   } catch (e) {
     logger.error("[Lifecycle] Failed to connect", e);
@@ -173,19 +184,11 @@ async function connectAndPublish(
     // participant limits.
     // LiveKit Cloud uses 429 for connection limits.
     // Either way, all these errors can be explained as "insufficient capacity".
-    if (e instanceof ConnectionError) {
-      if (e.status === 503 || e.status === 200 || e.status === 429) {
-        throw new InsufficientCapacityError();
-      }
-      if (e.status === 404) {
-        // error msg is "Could not establish signal connection: requested room does not exist"
-        // The room does not exist. There are two different modes of operation for the SFU:
-        // - the room is created on the fly when connecting (livekit `auto_create` option)
-        // - Only authorized users can create rooms, so the room must exist before connecting (done by the auth jwt service)
-        // In the first case there will not be a 404, so we are in the second case.
-        throw new SFURoomCreationRestrictedError();
-      }
-    }
+    if (
+      e instanceof ConnectionError &&
+      (e.status === 503 || e.status === 200 || e.status === 429)
+    )
+      throw new InsufficientCapacityError();
     throw e;
   }
 

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,20 +88,65 @@ 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(
     useObservableEagerState(
       useObservable(
         (room$) =>
-          room$.pipe(
-            switchMap(([room]) =>
-              observeTrackReference$(
-                room.localParticipant,
-                Track.Source.Camera,
-              ),
-            ),
+          observeTrackReference$(
+            room$.pipe(map(([room]) => room.localParticipant)),
+            Track.Source.Camera,
+          ).pipe(
             map((trackRef) => {
               const track = trackRef?.publication?.track;
               return track instanceof LocalVideoTrack ? track : null;
@@ -175,8 +158,8 @@ export function useLivekit(
   );
 
   const connectionState = useECConnectionState(
-    initialAudioInputId,
-    initialMuteStates.audio.enabled,
+    initialDevices.current.audioInput.selectedId,
+    initialMuteStates.current.audio.enabled,
     room,
     sfuConfig,
   );
@@ -323,76 +306,69 @@ export function useLivekit(
 
   useEffect(() => {
     // Sync the requested devices with LiveKit's devices
-    if (room !== undefined && connectionState === ConnectionState.Connected) {
+    if (
+      room !== undefined &&
+      connectionState === ConnectionState.Connected &&
+      !controlledAudioDevices
+    ) {
       const syncDevice = (
         kind: MediaDeviceKind,
-        selected$: Observable<SelectedDevice | undefined>,
-      ): Subscription =>
-        selected$.subscribe((device) => {
-          logger.info(
-            "[LivekitRoom] syncDevice room.getActiveDevice(kind) !== d.id :",
-            room.getActiveDevice(kind),
-            " !== ",
-            device?.id,
-          );
-          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$),
-        !controlledAudioDevices
-          ? syncDevice("audiooutput", devices.audioOutput.selected$)
-          : undefined,
-        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,
@@ -16,12 +16,12 @@ import {
 } from "react";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { useObservableEagerState } from "observable-hooks";
 
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { useClientState } from "../ClientContext";
 import { ElementCallReactionEventType, type ReactionOption } from ".";
 import { type CallViewModel } from "../state/CallViewModel";
-import { useBehavior } from "../useBehavior";
 
 interface ReactionsSenderContextType {
   supportsReactions: boolean;
@@ -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");
   }
@@ -70,7 +70,7 @@ export const ReactionsSenderProvider = ({
     [memberships, myUserId, myDeviceId],
   );
 
-  const reactions = useBehavior(vm.reactions$);
+  const reactions = useObservableEagerState(vm.reactions$);
   const myReaction = useMemo(
     () =>
       myMembershipIdentifier !== undefined
@@ -79,7 +79,7 @@ export const ReactionsSenderProvider = ({
     [myMembershipIdentifier, reactions],
   );
 
-  const handsRaised = useBehavior(vm.handsRaised$);
+  const handsRaised = useObservableEagerState(vm.handsRaised$);
   const myRaisedHand = useMemo(
     () =>
       myMembershipIdentifier !== undefined
@@ -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/CallEndedView.tsx

@@ -25,7 +25,6 @@ import { LinkButton } from "../button";
 interface Props {
   client: MatrixClient;
   isPasswordlessUser: boolean;
-  hideHeader: boolean;
   confineToRoom: boolean;
   endedCallId: string;
 }
@@ -33,7 +32,6 @@ interface Props {
 export const CallEndedView: FC<Props> = ({
   client,
   isPasswordlessUser,
-  hideHeader,
   confineToRoom,
   endedCallId,
 }) => {
@@ -135,12 +133,10 @@ export const CallEndedView: FC<Props> = ({
 
   return (
     <>
-      {!hideHeader && (
-        <Header>
-          <LeftNav>{!confineToRoom && <HeaderLogo />}</LeftNav>
-          <RightNav />
-        </Header>
-      )}
+      <Header>
+        <LeftNav>{!confineToRoom && <HeaderLogo />}</LeftNav>
+        <RightNav />
+      </Header>
       <div className={styles.container}>
         <main className={styles.main}>
           <Heading size="xl" weight="semibold" className={styles.headline}>

src/room/EarpieceOverlay.module.css

@@ -1,67 +0,0 @@
-.overlay {
-  position: fixed;
-  z-index: var(--call-view-overlay-layer);
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--cpd-space-2x);
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.overlay[data-show="true"] {
-  animation: fade-in 200ms;
-}
-
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    display: none;
-  }
-}
-
-.overlay[data-show="false"] {
-  animation: fade-out 130ms forwards;
-  content-visibility: hidden;
-  pointer-events: none;
-}
-
-.overlay::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  inset: 0;
-  background: var(--cpd-color-bg-canvas-default);
-  opacity: 0.94;
-}
-
-.icon {
-  margin-block-end: var(--cpd-space-4x);
-  background: var(--cpd-color-alpha-gray-600);
-  color: var(--cpd-color-icon-primary);
-}
-
-.overlay > h2 {
-  text-align: center;
-  margin: 0;
-}
-
-.overlay > p {
-  text-align: center;
-}
-
-.spacer {
-  min-height: var(--cpd-space-32x);
-}

src/room/EarpieceOverlay.tsx

@@ -1,44 +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 { type FC } from "react";
-import { BigIcon, Button, Heading, Text } from "@vector-im/compound-web";
-import { VoiceCallIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { useTranslation } from "react-i18next";
-
-import styles from "./EarpieceOverlay.module.css";
-
-interface Props {
-  show: boolean;
-  onBackToVideoPressed?: (() => void) | null;
-}
-
-export const EarpieceOverlay: FC<Props> = ({ show, onBackToVideoPressed }) => {
-  const { t } = useTranslation();
-  return (
-    <div className={styles.overlay} data-show={show}>
-      <BigIcon className={styles.icon}>
-        <VoiceCallIcon aria-hidden />
-      </BigIcon>
-      <Heading as="h2" weight="semibold" size="md">
-        {t("handset.overlay_title")}
-      </Heading>
-      <Text>{t("handset.overlay_description")}</Text>
-      <Button
-        kind="primary"
-        size="sm"
-        onClick={() => {
-          onBackToVideoPressed?.();
-        }}
-      >
-        {t("handset.overlay_back_button")}
-      </Button>
-      {/* This spacer is used to give the overlay an offset to the top. */}
-      <div className={styles.spacer} />
-    </div>
-  );
-};

src/room/GroupCallErrorBoundary.tsx

@@ -16,12 +16,11 @@ import {
 } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import {
-  ErrorSolidIcon,
+  ErrorIcon,
   HostIcon,
   OfflineIcon,
   WebBrowserIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { Button } from "@vector-im/compound-web";
 
 import {
   ConnectionLostError,
@@ -64,7 +63,7 @@ const ErrorPage: FC<ErrorPageProps> = ({
       icon = WebBrowserIcon;
       break;
     default:
-      icon = ErrorSolidIcon;
+      icon = ErrorIcon;
   }
 
   const actions: { label: string; onClick: () => void }[] = [];
@@ -94,13 +93,9 @@ const ErrorPage: FC<ErrorPageProps> = ({
         </p>
         {actions &&
           actions.map((action, index) => (
-            <Button
-              kind="secondary"
-              onClick={action.onClick}
-              key={`action${index}`}
-            >
+            <button onClick={action.onClick} key={`action${index}`}>
               {action.label}
-            </Button>
+            </button>
           ))}
       </ErrorView>
     </FullScreenView>

src/room/GroupCallView.test.tsx

@@ -16,6 +16,7 @@ import {
 import { render, waitFor, screen } from "@testing-library/react";
 import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
+import { of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
@@ -28,10 +29,8 @@ import { useAudioContext } from "../useAudioContext";
 import { ActiveCall } from "./InCallView";
 import {
   flushPromises,
-  mockEmitter,
   mockMatrixRoom,
   mockMatrixRoomMember,
-  mockMediaDevices,
   mockRtcMembership,
   MockRTCSession,
 } from "../utils/test";
@@ -40,9 +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";
-import { HeaderStyle } from "../UrlParams";
-import { constant } from "../state/Behavior";
 
 vi.mock("../soundUtils");
 vi.mock("../useAudioContext");
@@ -133,7 +129,6 @@ function createGroupCallView(
     getMxcAvatarUrl: () => null,
     getCanonicalAlias: () => null,
     currentState: {
-      ...mockEmitter(),
       getJoinRule: () => JoinRule.Invite,
     } as Partial<RoomState> as RoomState,
   });
@@ -141,7 +136,7 @@ function createGroupCallView(
     room,
     localRtcMember,
     [],
-  ).withMemberships(constant([]));
+  ).withMemberships(of([]));
   rtcSession.joined = joined;
   const muteState = {
     audio: { enabled: false },
@@ -150,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}
-              header={HeaderStyle.Standard}
-              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

@@ -24,6 +24,7 @@ import {
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { useNavigate } from "react-router-dom";
+import { useObservableEagerState } from "observable-hooks";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
@@ -39,27 +40,25 @@ 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";
 import { InviteModal } from "./InviteModal";
-import { HeaderStyle, useUrlParams } from "../UrlParams";
+import { useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useAudioContext } from "../useAudioContext";
 import { callEventAudioSounds } from "./CallEventAudioRenderer";
 import { useLatest } from "../useLatest";
 import { usePageTitle } from "../usePageTitle";
 import {
-  ConnectionLostError,
   E2EENotSupportedError,
   ElementCallError,
+  ErrorCode,
+  RTCSessionError,
   UnknownCallError,
 } from "../utils/errors.ts";
 import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary.tsx";
@@ -70,8 +69,6 @@ import {
 } from "../settings/settings";
 import { useTypedEventEmitter } from "../useEvents";
 import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
-import { useAppBarTitle } from "../AppBar.tsx";
-import { useBehavior } from "../useBehavior.ts";
 
 declare global {
   interface Window {
@@ -85,7 +82,7 @@ interface Props {
   confineToRoom: boolean;
   preload: boolean;
   skipLobby: boolean;
-  header: HeaderStyle;
+  hideHeader: boolean;
   rtcSession: MatrixRTCSession;
   isJoined: boolean;
   muteStates: MuteStates;
@@ -98,7 +95,7 @@ export const GroupCallView: FC<Props> = ({
   confineToRoom,
   preload,
   skipLobby,
-  header,
+  hideHeader,
   rtcSession,
   isJoined,
   muteStates,
@@ -110,7 +107,7 @@ export const GroupCallView: FC<Props> = ({
   );
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
 
-  const muteAllAudio = useBehavior(muteAllAudio$);
+  const muteAllAudio = useObservableEagerState(muteAllAudio$);
   const leaveSoundContext = useLatest(
     useAudioContext({
       sounds: callEventAudioSounds,
@@ -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 => {
@@ -152,7 +139,14 @@ export const GroupCallView: FC<Props> = ({
   useTypedEventEmitter(
     rtcSession,
     MatrixRTCSessionEvent.MembershipManagerError,
-    (error) => setExternalError(new ConnectionLostError()),
+    (error) => {
+      setExternalError(
+        new RTCSessionError(
+          ErrorCode.MEMBERSHIP_MANAGER_UNRECOVERABLE,
+          error.message ?? error,
+        ),
+      );
+    },
   );
   useEffect(() => {
     // Sanity check the room object
@@ -173,14 +167,7 @@ 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);
-  useAppBarTitle(roomName);
 
   const matrixInfo = useMemo((): MatrixInfo => {
     return {
@@ -201,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(
@@ -253,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);
         }
       }
 
@@ -267,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);
         }
       }
     };
@@ -309,7 +297,7 @@ export const GroupCallView: FC<Props> = ({
     preload,
     skipLobby,
     perParticipantE2EE,
-    mediaDevices,
+    latestDevices,
     latestMuteStates,
     enterRTCSessionOrError,
     useNewMembershipManager,
@@ -425,7 +413,7 @@ export const GroupCallView: FC<Props> = ({
         muteStates={muteStates}
         onEnter={() => void enterRTCSessionOrError(rtcSession)}
         confineToRoom={confineToRoom}
-        hideHeader={header === HeaderStyle.None}
+        hideHeader={hideHeader}
         participantCount={participantCount}
         onShareClick={onShareClick}
       />
@@ -451,7 +439,7 @@ export const GroupCallView: FC<Props> = ({
           rtcSession={rtcSession as MatrixRTCSession}
           participantCount={participantCount}
           onLeave={onLeave}
-          header={header}
+          hideHeader={hideHeader}
           muteStates={muteStates}
           e2eeSystem={e2eeSystem}
           //otelGroupCallMembership={otelGroupCallMembership}
@@ -477,7 +465,6 @@ export const GroupCallView: FC<Props> = ({
           endedCallId={rtcSession.room.roomId}
           client={client}
           isPasswordlessUser={isPasswordlessUser}
-          hideHeader={header === HeaderStyle.None}
           confineToRoom={confineToRoom}
         />
       );

src/room/InCallView.module.css

@@ -18,7 +18,7 @@ Please see LICENSE in the repository root for full details.
   position: sticky;
   flex-shrink: 0;
   inset-block-start: 0;
-  z-index: var(--call-view-header-footer-layer);
+  z-index: 1;
   background: linear-gradient(
     0deg,
     rgba(0, 0, 0, 0) 0%,
@@ -34,7 +34,7 @@ Please see LICENSE in the repository root for full details.
 .footer {
   position: sticky;
   inset-block-end: 0;
-  z-index: var(--call-view-header-footer-layer);
+  z-index: 1;
   display: grid;
   grid-template-columns:
     minmax(0, var(--inline-content-inset))

src/room/InCallView.test.tsx

@@ -31,7 +31,6 @@ import {
   mockLocalParticipant,
   mockMatrixRoom,
   mockMatrixRoomMember,
-  mockMediaDevices,
   mockRemoteParticipant,
   mockRtcMembership,
   type MockRTCSession,
@@ -46,8 +45,6 @@ import {
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer";
-import { MediaDevicesContext } from "../MediaDevicesContext";
-import { HeaderStyle } from "../UrlParams";
 
 // vi.hoisted(() => {
 //   localStorage = {} as unknown as Storage;
@@ -150,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}
-                header={HeaderStyle.Standard}
-                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 {
@@ -244,7 +239,6 @@ describe("InCallView", () => {
         queryByText("using to Device key transport"),
       ).not.toBeInTheDocument();
     });
-
     it("is not shown if setting is disabled", () => {
       useExperimentalToDeviceTransportSetting.setValue(false);
       developerModeSetting.setValue(true);
@@ -256,7 +250,6 @@ describe("InCallView", () => {
         queryByText("using to Device key transport"),
       ).not.toBeInTheDocument();
     });
-
     it("is not shown if developer mode is disabled", () => {
       useExperimentalToDeviceTransportSetting.setValue(true);
       developerModeSetting.setValue(false);

src/room/InCallView.tsx

@@ -6,33 +6,29 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { RoomContext, useLocalParticipant } from "@livekit/components-react";
-import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
+import { Text } from "@vector-im/compound-web";
 import { ConnectionState, type Room } from "livekit-client";
 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";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
-import { useObservable } from "observable-hooks";
+import { useObservable, useObservableEagerState } from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
-import {
-  VoiceCallSolidIcon,
-  VolumeOnSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
-import { useTranslation } from "react-i18next";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -47,7 +43,7 @@ import {
   SwitchCameraButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import { type HeaderStyle, useUrlParams } from "../UrlParams";
+import { useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
@@ -108,11 +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";
-import { useMediaDevices } from "../MediaDevicesContext.ts";
-import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
-import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
-import { useBehavior } from "../useBehavior.ts";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -124,7 +115,6 @@ export interface ActiveCallProps
 }
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
-  const mediaDevices = useMediaDevices();
   const sfuConfig = useOpenIDSFU(props.client, props.rtcSession);
   const { livekitRoom, connState } = useLivekit(
     props.rtcSession,
@@ -150,14 +140,15 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         ?.disconnect()
         .then(() => {
           logger.info(
-            `[Lifecycle] Disconnected from livekit room, state:${livekitRoom?.state}`,
+            `[Lifecycle] Disconnected from livekite room, state:${livekitRoom?.state}`,
           );
         })
         .catch((e) => {
           logger.error("[Lifecycle] Failed to disconnect from livekit room", e);
         });
     };
-  }, [livekitRoom]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     if (livekitRoom !== undefined) {
@@ -165,7 +156,6 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       const vm = new CallViewModel(
         props.rtcSession,
         livekitRoom,
-        mediaDevices,
         props.e2eeSystem,
         connStateObservable$,
         reactionsReader.raisedHands$,
@@ -177,18 +167,12 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         reactionsReader.destroy();
       };
     }
-  }, [
-    props.rtcSession,
-    livekitRoom,
-    mediaDevices,
-    props.e2eeSystem,
-    connStateObservable$,
-  ]);
+  }, [props.rtcSession, livekitRoom, props.e2eeSystem, connStateObservable$]);
 
   if (livekitRoom === undefined || vm === null) return null;
 
   return (
-    <RoomContext value={livekitRoom}>
+    <RoomContext.Provider value={livekitRoom}>
       <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
         <InCallView
           {...props}
@@ -197,7 +181,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
           connState={connState}
         />
       </ReactionsSenderProvider>
-    </RoomContext>
+    </RoomContext.Provider>
   );
 };
 
@@ -211,7 +195,7 @@ export interface InCallViewProps {
   participantCount: number;
   /** Function to call when the user explicitly ends the call */
   onLeave: () => void;
-  header: HeaderStyle;
+  hideHeader: boolean;
   otelGroupCallMembership?: OTelGroupCallMembership;
   connState: ECConnectionState;
   onShareClick: (() => void) | null;
@@ -226,11 +210,10 @@ export const InCallView: FC<InCallViewProps> = ({
   muteStates,
   participantCount,
   onLeave,
-  header: headerStyle,
+  hideHeader,
   connState,
   onShareClick,
 }) => {
-  const { t } = useTranslation();
   const { supportsReactions, sendReaction, toggleRaisedHand } =
     useReactionsSender();
 
@@ -252,7 +235,7 @@ export const InCallView: FC<InCallViewProps> = ({
     room: livekitRoom,
   });
 
-  const muteAllAudio = useBehavior(muteAllAudio$);
+  const muteAllAudio = useObservableEagerState(muteAllAudio$);
 
   // This seems like it might be enough logic to use move it into the call view model?
   const [didFallbackToRoomKey, setDidFallbackToRoomKey] = useState(false);
@@ -267,7 +250,6 @@ export const InCallView: FC<InCallViewProps> = ({
     useExperimentalToDeviceTransportSetting,
   );
   const encryptionSystem = useRoomEncryptionSystem(rtcSession.room.roomId);
-  const memberships = useMatrixRTCSessionMemberships(rtcSession);
 
   const showToDeviceEncryption = useMemo(
     () =>
@@ -303,15 +285,13 @@ export const InCallView: FC<InCallViewProps> = ({
     () => void toggleRaisedHand(),
   );
 
-  const windowMode = useBehavior(vm.windowMode$);
-  const layout = useBehavior(vm.layout$);
-  const tileStoreGeneration = useBehavior(vm.tileStoreGeneration$);
+  const windowMode = useObservableEagerState(vm.windowMode$);
+  const layout = useObservableEagerState(vm.layout$);
+  const tileStoreGeneration = useObservableEagerState(vm.tileStoreGeneration$);
   const [debugTileLayout] = useSetting(debugTileLayoutSetting);
-  const gridMode = useBehavior(vm.gridMode$);
-  const showHeader = useBehavior(vm.showHeader$);
-  const showFooter = useBehavior(vm.showFooter$);
-  const earpieceMode = useBehavior(vm.earpieceMode$);
-  const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
+  const gridMode = useObservableEagerState(vm.gridMode$);
+  const showHeader = useObservableEagerState(vm.showHeader$);
+  const showFooter = useObservableEagerState(vm.showFooter$);
   const switchCamera = useSwitchCamera(vm.localVideo$);
 
   // Ideally we could detect taps by listening for click events and checking
@@ -454,86 +434,25 @@ export const InCallView: FC<InCallViewProps> = ({
     }
   }, [setGridMode]);
 
-  useAppBarSecondaryButton(
-    useMemo(() => {
-      if (audioOutputSwitcher === null) return null;
-      const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
-      const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
-      const label = isEarpieceTarget
-        ? t("settings.devices.handset")
-        : t("settings.devices.loudspeaker");
-
-      return (
-        <Tooltip label={label}>
-          <IconButton
-            onClick={(e) => {
-              e.preventDefault();
-              audioOutputSwitcher.switch();
-            }}
-          >
-            <Icon />
-          </IconButton>
-        </Tooltip>
-      );
-    }, [t, audioOutputSwitcher]),
-  );
-
-  useAppBarHidden(!showHeader);
-
-  let header: ReactNode = null;
-  if (showHeader) {
-    switch (headerStyle) {
-      case "none":
-        // Cosmetic header to fill out space while still affecting the bounds of
-        // the grid
-        header = (
-          <div
-            className={classNames(styles.header, styles.filler)}
-            ref={headerRef}
-          />
-        );
-        break;
-      case "standard":
-        header = (
-          <Header className={styles.header} ref={headerRef}>
-            <LeftNav>
-              <RoomHeaderInfo
-                id={matrixInfo.roomId}
-                name={matrixInfo.roomName}
-                avatarUrl={matrixInfo.roomAvatar}
-                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
-                participantCount={participantCount}
-              />
-            </LeftNav>
-            <RightNav>
-              {showControls && onShareClick !== null && (
-                <InviteButton
-                  className={styles.invite}
-                  onClick={onShareClick}
-                />
-              )}
-            </RightNav>
-          </Header>
-        );
-    }
-  }
-
   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 = useBehavior(vm.spotlightExpanded$);
-        const onToggleExpanded = useBehavior(vm.toggleSpotlightExpanded$);
-        const showSpeakingIndicatorsValue = useBehavior(
+      ) {
+        const spotlightExpanded = useObservableEagerState(
+          vm.spotlightExpanded$,
+        );
+        const onToggleExpanded = useObservableEagerState(
+          vm.toggleSpotlightExpanded$,
+        );
+        const showSpeakingIndicatorsValue = useObservableEagerState(
           vm.showSpeakingIndicators$,
         );
-        const showSpotlightIndicatorsValue = useBehavior(
+        const showSpotlightIndicatorsValue = useObservableEagerState(
           vm.showSpotlightIndicators$,
         );
 
@@ -561,7 +480,7 @@ export const InCallView: FC<InCallViewProps> = ({
             style={style}
           />
         );
-      },
+      }),
     [vm, openProfile],
   );
 
@@ -601,8 +520,7 @@ export const InCallView: FC<InCallViewProps> = ({
         key="fixed"
         className={styles.fixedGrid}
         style={{
-          insetBlockStart:
-            headerBounds.height > 0 ? headerBounds.bottom : bounds.top,
+          insetBlockStart: headerBounds.bottom,
           height: gridBounds.height,
         }}
         model={layout}
@@ -725,11 +643,10 @@ export const InCallView: FC<InCallViewProps> = ({
       ref={footerRef}
       className={classNames(styles.footer, {
         [styles.overlay]: windowMode === "flat",
-        [styles.hidden]:
-          !showFooter || (!showControls && headerStyle === "none"),
+        [styles.hidden]: !showFooter || (!showControls && hideHeader),
       })}
     >
-      {headerStyle !== "none" && (
+      {!hideHeader && (
         <div className={styles.logo}>
           <LogoMark width={24} height={24} aria-hidden />
           <LogoType
@@ -765,7 +682,35 @@ export const InCallView: FC<InCallViewProps> = ({
       onPointerMove={onPointerMove}
       onPointerOut={onPointerOut}
     >
-      {header}
+      {showHeader &&
+        (hideHeader ? (
+          // Cosmetic header to fill out space while still affecting the bounds
+          // of the grid
+          <div
+            className={classNames(styles.header, styles.filler)}
+            ref={headerRef}
+          />
+        ) : (
+          <Header className={styles.header} ref={headerRef}>
+            <LeftNav>
+              <RoomHeaderInfo
+                id={matrixInfo.roomId}
+                name={matrixInfo.roomName}
+                avatarUrl={matrixInfo.roomAvatar}
+                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
+                participantCount={participantCount}
+              />
+            </LeftNav>
+            <RightNav>
+              {showControls && onShareClick !== null && (
+                <InviteButton
+                  className={styles.invite}
+                  onClick={onShareClick}
+                />
+              )}
+            </RightNav>
+          </Header>
+        ))}
       {
         // TODO: remove this once we remove the developer flag gets removed and we have shipped to
         // device transport as the default.
@@ -778,14 +723,13 @@ 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} />
-      <EarpieceOverlay
-        show={earpieceMode}
-        onBackToVideoPressed={audioOutputSwitcher?.switch}
-      />
       <ReactionsOverlay vm={vm} />
       {footer}
       {layout.type !== "pip" && (

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);
@@ -184,16 +176,6 @@ export const LobbyView: FC<Props> = ({
         null) as LocalVideoTrack | null,
     [tracks],
   );
-
-  useEffect(() => {
-    if (videoTrack && videoInputId === undefined) {
-      // If we have a video track but no videoInputId,
-      // we have to update the available devices. So that we select the first
-      // available video input device as the default instead of the `""` id.
-      devices.requestDeviceNames();
-    }
-  }, [devices, videoInputId, videoTrack]);
-
   useTrackProcessorSync(videoTrack);
   const showSwitchCamera = useShowSwitchCamera(
     useObservable(

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");
@@ -191,14 +192,10 @@ describe("useMuteStates", () => {
     mockConfig();
 
     render(
-      <MemoryRouter
-        initialEntries={[
-          "/room/?skipLobby=true&widgetId=1234&parentUrl=www.parent.org",
-        ]}
-      >
-        <MediaDevicesContext value={mockMediaDevices()}>
+      <MemoryRouter initialEntries={["/room/?skipLobby=true"]}>
+        <MediaDevicesContext.Provider value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext>
+        </MediaDevicesContext.Provider>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -209,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(
@@ -228,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,19 +82,9 @@ export function useMuteStates(isJoined: boolean): MuteStates {
   const audio = useMuteState(devices.audioInput, () => {
     return Config.get().media_devices.enable_audio && !skipLobby && !isJoined;
   });
-  useEffect(() => {
-    // If audio is enabled, we need to request the device names again,
-    // because iOS will not be able to switch to the correct device after un-muting.
-    // This is one of the main changes that makes iOS work with bluetooth audio devices.
-    if (audio.enabled) {
-      devices.requestDeviceNames();
-    }
-  }, [audio.enabled, devices]);
-  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/ReactionsOverlay.tsx

@@ -6,16 +6,16 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode } from "react";
+import { useObservableState } from "observable-hooks";
 
 import styles from "./ReactionsOverlay.module.css";
 import { type CallViewModel } from "../state/CallViewModel";
-import { useBehavior } from "../useBehavior";
 
 export function ReactionsOverlay({ vm }: { vm: CallViewModel }): ReactNode {
-  const reactionsIcons = useBehavior(vm.visibleReactions$);
+  const reactionsIcons = useObservableState(vm.visibleReactions$);
   return (
     <div className={styles.container}>
-      {reactionsIcons.map(({ sender, emoji, startX }) => (
+      {reactionsIcons?.map(({ sender, emoji, startX }) => (
         <span
           // Reactions effects are considered presentation elements. The reaction
           // is also present on the sender's tile, which assistive technology can

src/room/RoomAuthView.tsx

@@ -19,10 +19,8 @@ import { UserMenuContainer } from "../UserMenuContainer";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 import { Config } from "../config/Config";
 import { ExternalLink, Link } from "../button/Link";
-import { useUrlParams } from "../UrlParams";
 
 export const RoomAuthView: FC = () => {
-  const { header } = useUrlParams();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
 
@@ -55,16 +53,14 @@ export const RoomAuthView: FC = () => {
 
   return (
     <>
-      {header === "standard" && (
-        <Header>
-          <LeftNav>
-            <HeaderLogo />
-          </LeftNav>
-          <RightNav>
-            <UserMenuContainer preventNavigation />
-          </RightNav>
-        </Header>
-      )}
+      <Header>
+        <LeftNav>
+          <HeaderLogo />
+        </LeftNav>
+        <RightNav>
+          <UserMenuContainer preventNavigation />
+        </RightNav>
+      </Header>
       <div className={styles.container}>
         <main className={styles.main}>
           <Heading size="xl" weight="semibold" className={styles.headline}>

src/room/RoomPage.tsx

@@ -43,8 +43,14 @@ import { ErrorView } from "../ErrorView";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
 
 export const RoomPage: FC = () => {
-  const { confineToRoom, appPrompt, preload, header, displayName, skipLobby } =
-    useUrlParams();
+  const {
+    confineToRoom,
+    appPrompt,
+    preload,
+    hideHeader,
+    displayName,
+    skipLobby,
+  } = useUrlParams();
   const { t } = useTranslation();
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
 
@@ -114,7 +120,7 @@ export const RoomPage: FC = () => {
             confineToRoom={confineToRoom}
             preload={preload}
             skipLobby={skipLobby || wasInWaitForInviteState.current}
-            header={header}
+            hideHeader={hideHeader}
             muteStates={muteStates}
           />
         );
@@ -155,7 +161,7 @@ export const RoomPage: FC = () => {
             enterLabel={label}
             waitingForInvite={groupCallState.kind === "waitForInvite"}
             confineToRoom={confineToRoom}
-            hideHeader={header !== "standard"}
+            hideHeader={hideHeader}
             participantCount={null}
             muteStates={muteStates}
             onShareClick={null}

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

@@ -108,11 +108,10 @@ 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
-              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -120,29 +119,23 @@ 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>
           <p>
             You were disconnected from the call.
           </p>
-          <button
-            class="_button_vczzf_8"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
+          <button>
             Reconnect
           </button>
           <button
-            class="_button_vczzf_8 homeLink"
+            class="_button_i91xf_17 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -265,11 +258,10 @@ 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
-              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -277,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>
@@ -295,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"
@@ -418,11 +410,10 @@ 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
-              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -430,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>
@@ -448,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"
@@ -571,11 +562,10 @@ 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
-              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -583,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>
@@ -601,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"
@@ -724,11 +714,10 @@ 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
-              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -736,29 +725,23 @@ 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>
           <p>
             You were disconnected from the call.
           </p>
-          <button
-            class="_button_vczzf_8"
-            data-kind="secondary"
-            data-size="lg"
-            role="button"
-            tabindex="0"
-          >
+          <button>
             Reconnect
           </button>
           <button
-            class="_button_vczzf_8 homeLink"
+            class="_button_i91xf_17 homeLink"
             data-kind="tertiary"
             data-size="lg"
             role="button"
@@ -881,11 +864,10 @@ 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
-              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -893,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>
@@ -906,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"
@@ -1029,11 +1011,10 @@ 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
-              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -1041,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>
@@ -1054,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

@@ -5,56 +5,9 @@ exports[`InCallView > rendering > renders 1`] = `
   <div
     class="inRoom"
   >
-    <header
-      class="header header"
-    >
-      <div
-        class="nav leftNav"
-      >
-        <div
-          class="roomHeaderInfo"
-          data-size="lg"
-        >
-          <span
-            aria-label=""
-            class="_avatar_1qbcf_8 roomAvatar _avatar-imageless_1qbcf_52"
-            data-color="1"
-            data-type="round"
-            role="img"
-            style="--cpd-avatar-size: 56px;"
-          />
-          <div
-            class="nameLine"
-          >
-            <h1
-              class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
-              data-testid="roomHeader_roomName"
-            />
-            <span
-              tabindex="0"
-            >
-              <svg
-                aria-labelledby="«r0»"
-                class="lock"
-                data-encrypted="false"
-                fill="currentColor"
-                height="16"
-                viewBox="0 0 24 24"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-      <div
-        class="nav rightNav"
-      />
-    </header>
+    <div
+      class="header filler"
+    />
     <div>
       mocked: MatrixAudioRenderer
     </div>
@@ -82,182 +35,19 @@ exports[`InCallView > rendering > renders 1`] = `
     >
       <div />
     </div>
-    <div
-      class="overlay"
-      data-show="false"
-    >
-      <div
-        class="_content_o77nw_8 icon"
-        data-size="large"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            clip-path="url(#a)"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M8.929 15.1a13.6 13.6 0 0 0 4.654 3.066q2.62 1.036 5.492.923h.008l.003-.004.003-.002-.034-3.124-3.52-.483-1.791 1.792-.645-.322a13.5 13.5 0 0 1-3.496-2.52 13.4 13.4 0 0 1-2.52-3.496l-.322-.644 1.792-1.792-.483-3.519-3.123-.034-.003.002-.003.004v.002a13.65 13.65 0 0 0 .932 5.492A13.4 13.4 0 0 0 8.93 15.1m3.92 4.926a15.6 15.6 0 0 1-5.334-3.511 15.4 15.4 0 0 1-3.505-5.346 15.6 15.6 0 0 1-1.069-6.274 1.93 1.93 0 0 1 .589-1.366c.366-.366.84-.589 1.386-.589h.01l3.163.035a1.96 1.96 0 0 1 1.958 1.694v.005l.487 3.545v.003c.043.297.025.605-.076.907a2 2 0 0 1-.485.773l-.762.762a11.4 11.4 0 0 0 3.206 3.54q.457.33.948.614l.762-.761a2 2 0 0 1 .774-.486c.302-.1.61-.118.907-.076l3.553.487a1.96 1.96 0 0 1 1.694 1.958l.034 3.174c0 .546-.223 1.02-.588 1.386-.361.36-.827.582-1.363.588a15.3 15.3 0 0 1-6.29-1.062"
-              fill-rule="evenodd"
-            />
-          </g>
-          <defs>
-            <clippath
-              id="a"
-            >
-              <path
-                d="M0 0h24v24H0z"
-              />
-            </clippath>
-          </defs>
-        </svg>
-      </div>
-      <h2
-        class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
-      >
-        Handset Mode
-      </h2>
-      <p
-        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
-      >
-        Only works while using app
-      </p>
-      <button
-        class="_button_vczzf_8"
-        data-kind="primary"
-        data-size="sm"
-        role="button"
-        tabindex="0"
-      >
-        Back to Speaker Mode
-      </button>
-      <div
-        class="spacer"
-      />
-    </div>
     <div
       class="container"
     />
     <div
       class="footer"
     >
-      <div
-        class="logo"
-      >
-        <svg
-          aria-hidden="true"
-          fill="none"
-          height="24"
-          viewBox="0 0 48 48"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            id="Logo Mark"
-          >
-            <rect
-              fill="#0DBD8B"
-              height="48"
-              rx="23.93"
-              width="47.86"
-            />
-            <g
-              id="Union"
-            >
-              <path
-                d="M21.3075 9.42871C20.3396 9.42871 19.5549 10.214 19.5549 11.1828C19.5549 12.1516 20.3396 12.9369 21.3075 12.9369C25.9321 12.9369 29.6811 16.689 29.6811 21.3175C29.6811 22.2863 30.4657 23.0716 31.4337 23.0716C32.4016 23.0716 33.1863 22.2863 33.1863 21.3175C33.1863 14.7515 27.868 9.42871 21.3075 9.42871Z"
-                fill="white"
-              />
-              <path
-                d="M38.4591 21.3174C38.4591 20.3486 37.6745 19.5633 36.7065 19.5633C35.7386 19.5633 34.9539 20.3486 34.9539 21.3174C34.9539 25.9459 31.2049 29.698 26.5804 29.698C25.6124 29.698 24.8277 30.4833 24.8277 31.4521C24.8277 32.4209 25.6124 33.2062 26.5804 33.2062C33.1408 33.2062 38.4591 27.8834 38.4591 21.3174Z"
-                fill="white"
-              />
-              <path
-                d="M28.3329 36.8173C28.3329 37.786 27.5482 38.5714 26.5803 38.5714C20.0198 38.5714 14.7015 33.2486 14.7015 26.6826C14.7015 25.7138 15.4862 24.9285 16.4541 24.9285C17.4221 24.9285 18.2067 25.7138 18.2067 26.6826C18.2067 31.3111 21.9557 35.0632 26.5803 35.0632C27.5482 35.0632 28.3329 35.8485 28.3329 36.8173Z"
-                fill="white"
-              />
-              <path
-                d="M9.40112 26.6827C9.40112 27.6514 10.1858 28.4368 11.1537 28.4368C12.1217 28.4368 12.9064 27.6514 12.9064 26.6827C12.9064 22.0542 16.6553 18.3021 21.2799 18.3021C22.2478 18.3021 23.0325 17.5167 23.0325 16.548C23.0325 15.5792 22.2478 14.7939 21.2799 14.7939C14.7194 14.7939 9.40112 20.1167 9.40112 26.6827Z"
-                fill="white"
-              />
-            </g>
-          </g>
-        </svg>
-        <svg
-          aria-label="Element Call"
-          fill="none"
-          height="11"
-          viewBox="0 0 160 22"
-          width="80"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            id="Logo Type"
-          >
-            <g
-              id="Vector"
-            >
-              <path
-                d="M14.8673 15.1575H3.39742C3.53293 16.3508 3.96849 17.3036 4.70411 18.0157C5.43974 18.7087 6.40766 19.0551 7.60789 19.0551C8.40159 19.0551 9.11785 18.8626 9.75668 18.4777C10.3955 18.0927 10.8504 17.5731 11.1215 16.9186H14.606C14.1414 18.4392 13.2702 19.671 11.9926 20.6142C10.7343 21.5381 9.24368 22 7.52078 22C5.27519 22 3.45549 21.259 2.06168 19.7769C0.687227 18.2948 0 16.4182 0 14.147C0 11.9335 0.696906 10.0761 2.09072 8.5748C3.48453 7.07349 5.28487 6.32283 7.49174 6.32283C9.69861 6.32283 11.4796 7.06387 12.8347 8.54593C14.2091 10.0087 14.8964 11.8565 14.8964 14.0892L14.8673 15.1575ZM7.49174 9.12336C6.40766 9.12336 5.50749 9.44095 4.79123 10.0761C4.07496 10.7113 3.62972 11.5582 3.45549 12.6168H11.4699C11.315 11.5582 10.8892 10.7113 10.1922 10.0761C9.49534 9.44095 8.59517 9.12336 7.49174 9.12336Z"
-                fill="currentColor"
-              />
-              <path
-                d="M17.2743 17.1785V0H20.7298V17.2362C20.7298 18.0061 21.1557 18.3911 22.0074 18.3911L22.6172 18.3622V21.6247C22.2881 21.6824 21.9397 21.7113 21.5719 21.7113C20.0813 21.7113 18.9875 21.336 18.2906 20.5853C17.6131 19.8346 17.2743 18.699 17.2743 17.1785Z"
-                fill="currentColor"
-              />
-              <path
-                d="M38.71 15.1575H27.2401C27.3756 16.3508 27.8112 17.3036 28.5468 18.0157C29.2824 18.7087 30.2504 19.0551 31.4506 19.0551C32.2443 19.0551 32.9606 18.8626 33.5994 18.4777C34.2382 18.0927 34.6931 17.5731 34.9642 16.9186H38.4487C37.9841 18.4392 37.113 19.671 35.8353 20.6142C34.577 21.5381 33.0864 22 31.3635 22C29.1179 22 27.2982 21.259 25.9044 19.7769C24.5299 18.2948 23.8427 16.4182 23.8427 14.147C23.8427 11.9335 24.5396 10.0761 25.9334 8.5748C27.3272 7.07349 29.1276 6.32283 31.3344 6.32283C33.5413 6.32283 35.3223 7.06387 36.6774 8.54593C38.0518 10.0087 38.7391 11.8565 38.7391 14.0892L38.71 15.1575ZM31.3344 9.12336C30.2504 9.12336 29.3502 9.44095 28.6339 10.0761C27.9177 10.7113 27.4724 11.5582 27.2982 12.6168H35.3126C35.1577 11.5582 34.7319 10.7113 34.035 10.0761C33.3381 9.44095 32.4379 9.12336 31.3344 9.12336Z"
-                fill="currentColor"
-              />
-              <path
-                d="M54.3001 13.0499V21.6535H50.8446V12.6745C50.8446 10.4033 49.8961 9.26772 47.9989 9.26772C46.9729 9.26772 46.1502 9.59493 45.5307 10.2493C44.9306 10.9038 44.6306 11.7988 44.6306 12.9344V21.6535H41.1751V6.66929H44.3692V8.66142C44.737 7.98775 45.2984 7.42957 46.0534 6.98688C46.8084 6.54418 47.7473 6.32283 48.8701 6.32283C50.9608 6.32283 52.4707 7.11199 53.4 8.69029C54.6776 7.11199 56.3812 6.32283 58.5106 6.32283C60.2722 6.32283 61.6273 6.87139 62.5759 7.9685C63.5244 9.04637 63.9987 10.4707 63.9987 12.2415V21.6535H60.5432V12.6745C60.5432 10.4033 59.5947 9.26772 57.6975 9.26772C56.6522 9.26772 55.8198 9.60455 55.2003 10.2782C54.6002 10.9326 54.3001 11.8565 54.3001 13.0499Z"
-                fill="currentColor"
-              />
-              <path
-                d="M81.1834 15.1575H69.7135C69.849 16.3508 70.2846 17.3036 71.0202 18.0157C71.7558 18.7087 72.7237 19.0551 73.924 19.0551C74.7177 19.0551 75.4339 18.8626 76.0728 18.4777C76.7116 18.0927 77.1665 17.5731 77.4375 16.9186H80.9221C80.4575 18.4392 79.5863 19.671 78.3087 20.6142C77.0504 21.5381 75.5598 22 73.8369 22C71.5913 22 69.7716 21.259 68.3778 19.7769C67.0033 18.2948 66.3161 16.4182 66.3161 14.147C66.3161 11.9335 67.013 10.0761 68.4068 8.5748C69.8006 7.07349 71.601 6.32283 73.8078 6.32283C76.0147 6.32283 77.7957 7.06387 79.1508 8.54593C80.5252 10.0087 81.2124 11.8565 81.2124 14.0892L81.1834 15.1575ZM73.8078 9.12336C72.7237 9.12336 71.8236 9.44095 71.1073 10.0761C70.391 10.7113 69.9458 11.5582 69.7716 12.6168H77.786C77.6311 11.5582 77.2052 10.7113 76.5083 10.0761C75.8114 9.44095 74.9113 9.12336 73.8078 9.12336Z"
-                fill="currentColor"
-              />
-              <path
-                d="M86.8426 6.66929V8.66142C87.191 8.007 87.7621 7.45844 88.5558 7.01575C89.3689 6.55381 90.3465 6.32283 91.4886 6.32283C93.2696 6.32283 94.6441 6.86177 95.612 7.93963C96.5993 9.0175 97.0929 10.4514 97.0929 12.2415V21.6535H93.6374V12.6745C93.6374 11.6159 93.3858 10.7883 92.8824 10.1916C92.3985 9.57568 91.6532 9.26772 90.6465 9.26772C89.5431 9.26772 88.672 9.59493 88.0331 10.2493C87.4137 10.9038 87.1039 11.8084 87.1039 12.9633V21.6535H83.6484V6.66929H86.8426Z"
-                fill="currentColor"
-              />
-              <path
-                d="M107.185 18.5932V21.5669C106.759 21.6824 106.159 21.7402 105.384 21.7402C102.442 21.7402 100.971 20.2677 100.971 17.3228V9.41208H98.6766V6.66929H100.971V2.77165H104.426V6.66929H107.243V9.41208H104.426V16.9764C104.426 18.1505 104.987 18.7375 106.11 18.7375L107.185 18.5932Z"
-                fill="currentColor"
-              />
-              <path
-                d="M116.115 18.9881C114.474 17.2035 113.653 14.9429 113.653 12.2064C113.653 9.4699 114.474 7.21782 116.115 5.45015C117.773 3.66548 119.953 2.77314 122.654 2.77314C124.876 2.77314 126.756 3.38503 128.295 4.6088C129.833 5.83258 130.816 7.47277 131.244 9.52939H129.269C128.91 7.99967 128.132 6.7844 126.936 5.88357C125.739 4.98273 124.312 4.53232 122.654 4.53232C120.534 4.53232 118.824 5.23769 117.525 6.64842C116.243 8.05916 115.602 9.91182 115.602 12.2064C115.602 14.501 116.243 16.3536 117.525 17.7644C118.824 19.1751 120.534 19.8805 122.654 19.8805C124.312 19.8805 125.739 19.4301 126.936 18.5292C128.132 17.6284 128.91 16.4131 129.269 14.8834H131.244C130.816 16.94 129.833 18.5802 128.295 19.804C126.756 21.0278 124.876 21.6397 122.654 21.6397C119.953 21.6397 117.773 20.7558 116.115 18.9881Z"
-                fill="currentColor"
-              />
-              <path
-                d="M143.174 15.0874C140.832 15.0874 139.233 15.1384 138.379 15.2403C137.541 15.3253 136.926 15.4698 136.532 15.6738C135.831 16.0647 135.481 16.6936 135.481 17.5604C135.481 19.2261 136.473 20.0589 138.456 20.0589C139.977 20.0589 141.139 19.719 141.943 19.0391C142.763 18.3593 143.174 17.4499 143.174 16.3111V15.0874ZM138.25 21.5632C136.763 21.5632 135.626 21.2062 134.84 20.4924C134.071 19.7615 133.686 18.8012 133.686 17.6114C133.686 16.8295 133.891 16.1327 134.301 15.5208C134.729 14.9089 135.31 14.4585 136.045 14.1695C136.661 13.9316 137.455 13.7786 138.43 13.7106C139.404 13.6256 140.986 13.5831 143.174 13.5831V12.7418C143.174 10.6002 141.943 9.52939 139.481 9.52939C137.361 9.52939 136.131 10.3877 135.789 12.1044H134.019C134.207 10.8466 134.746 9.84383 135.635 9.09597C136.541 8.34811 137.849 7.97418 139.558 7.97418C141.387 7.97418 142.746 8.3991 143.635 9.24894C144.541 10.0988 144.994 11.2716 144.994 12.7673V21.2572H143.251V19.3706C142.345 20.8323 140.678 21.5632 138.25 21.5632Z"
-                fill="currentColor"
-              />
-              <path
-                d="M149.358 18.4018V2.13576H151.178V18.1978C151.178 18.7247 151.264 19.0901 151.435 19.2941C151.623 19.498 151.956 19.6 152.435 19.6L152.948 19.549V21.2062C152.657 21.2572 152.341 21.2827 151.999 21.2827C150.238 21.2827 149.358 20.3224 149.358 18.4018Z"
-                fill="currentColor"
-              />
-              <path
-                d="M155.944 18.4018V2.13576H157.764V18.1978C157.764 18.7247 157.85 19.0901 158.021 19.2941C158.209 19.498 158.542 19.6 159.021 19.6L159.534 19.549V21.2062C159.243 21.2572 158.927 21.2827 158.585 21.2827C156.824 21.2827 155.944 20.3224 155.944 18.4018Z"
-                fill="currentColor"
-              />
-            </g>
-          </g>
-        </svg>
-      </div>
       <div
         class="buttons"
       >
         <button
           aria-disabled="false"
-          aria-labelledby="«r5»"
-          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"
@@ -273,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="«ra»"
-          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"
@@ -296,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="«rf»"
-          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"
@@ -317,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="«rk»"
-          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"
@@ -339,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>
@@ -348,7 +138,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="toggle layout"
       >
         <input
-          aria-labelledby="«rp»"
+          aria-labelledby=":rk:"
           name="layout"
           type="radio"
           value="spotlight"
@@ -362,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="«ru»"
+          aria-labelledby=":rp:"
           checked=""
           name="layout"
           type="radio"
@@ -381,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, 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,22 +22,38 @@ import { useTypedEventEmitterState } from "../useEvents";
 export function useActiveLivekitFocus(
   rtcSession: MatrixRTCSession,
 ): LivekitFocus | undefined {
-  const prevActiveFocus = useRef<LivekitFocus | undefined>(undefined);
-  return useTypedEventEmitterState(
-    rtcSession,
-    MatrixRTCSessionEvent.MembershipsChanged,
-    useCallback(() => {
-      const f = rtcSession.getActiveFocus();
-      // Only handle foci with type="livekit" for now.
-      if (f && isLivekitFocus(f) && !deepCompare(f, prevActiveFocus.current)) {
-        const oldestMembership = rtcSession.getOldestMembership();
-        logger.info(
-          `Got new active focus from membership: ${oldestMembership?.sender}/${oldestMembership?.deviceId}.
-          Updated focus (focus switch) from ${JSON.stringify(prevActiveFocus.current)} to ${JSON.stringify(f)}`,
-        );
-        prevActiveFocus.current = f;
-      }
-      return prevActiveFocus.current;
-    }, [rtcSession]),
-  );
+  const [activeFocus, setActiveFocus] = useState(() => {
+    const f = rtcSession.getActiveFocus();
+    // Only handle foci with type="livekit" for now.
+    return !!f && isLivekitFocus(f) ? f : undefined;
+  });
+
+  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}.
+        Updating focus (focus switch) from ${JSON.stringify(activeFocus)} to ${JSON.stringify(newActiveFocus)}`,
+      );
+      setActiveFocus(newActiveFocus);
+    }
+  }, [activeFocus, rtcSession]);
+
+  useEffect(() => {
+    rtcSession.on(
+      MatrixRTCSessionEvent.MembershipsChanged,
+      onMembershipsChanged,
+    );
+
+    return (): void => {
+      rtcSession.off(
+        MatrixRTCSessionEvent.MembershipsChanged,
+        onMembershipsChanged,
+      );
+    };
+  });
+
+  return activeFocus;
 }