Dont construct logger before rageshake initialization (#3435)

Signed-off-by: Timo K <toger5@hotmail.de>

.eslintrc.cjs

@@ -28,6 +28,8 @@ module.exports = {
   rules: {
     "matrix-org/require-copyright-header": ["error", COPYRIGHT_HEADER],
     "jsx-a11y/media-has-caption": "off",
+    // We should use the js-sdk logger, never console directly.
+    "no-console": ["error"],
     "react/display-name": "error",
     // Encourage proper usage of Promises:
     "@typescript-eslint/no-floating-promises": "error",
@@ -44,15 +46,6 @@ module.exports = {
     "rxjs/no-exposed-subjects": "error",
     "rxjs/finnish": ["error", { names: { "^this$": false } }],
   },
-  overrides: [
-    {
-      files: ["src/*/**"],
-      rules: {
-        // In application code we should use the js-sdk logger, never console directly.
-        "no-console": ["error"],
-      },
-    },
-  ],
   settings: {
     react: {
       version: "detect",

.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"

README.md

@@ -143,8 +143,7 @@ via the `org.matrix.msc4143.rtc_foci` key, e.g.:
 where the format for MatrixRTC using LiveKit backend is defined in
 [MSC4195](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md).
 In the example above Matrix clients do discover a focus of type `livekit` which
-points them to a [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
-via `livekit_service_url`.
+points them to a Matrix LiveKit JWT Auth Service via `livekit_service_url`.
 
 ### Backend Selection
 
@@ -155,9 +154,9 @@ via `livekit_service_url`.
   the **first participant who joined the call** defines via the `foci_preferred`
   key in their `org.matrix.msc3401.call.member` which actual MatrixRTC backend
   will be used for this call.
-- During the actual call join flow, the **[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)**
-  provides the client with the **LiveKit SFU WebSocket URL** and an
-  **access JWT token** in order to exchange media via WebRTC.
+- During the actual call join flow, the **LiveKit JWT Auth Service** provides
+  the client with the **LiveKit SFU WebSocket URL** and an **access JWT token**
+  in order to exchange media via WebRTC.
 
 The example below illustrates how backend selection works across **Matrix
 federation**, using the setup from sites A, B, and C. It demonstrates backend
@@ -209,7 +208,7 @@ A docker compose file `dev-backend-docker-compose.yml` is provided to start the
 whole stack of components which is required for a local development environment:
 
 - Minimum Synapse Setup (servername: `synapse.m.localhost`)
-- MatrixRTC Authorization Service (Note requires Federation API and hence a TLS reverse proxy)
+- LiveKit Authorization Service (Note requires Federation API and hence a TLS reverse proxy)
 - Minimum LiveKit SFU Setup using dev defaults for config
 - Redis db for completeness
 - Minimum `localhost` Certificate Authority (CA) for Transport Layer Security (TLS)

backend/dev_nginx.conf

@@ -59,8 +59,6 @@ server {
     ssl_certificate         /root/ssl/cert.pem;
     ssl_certificate_key     /root/ssl/key.pem;
 
-    http2 on;
-
 
     location ^~ /livekit/jwt/ {
 

backend/playwright_homeserver.yaml

@@ -44,10 +44,6 @@ rc_message:
   per_second: 10000
   burst_count: 10000
 
-rc_delayed_event_mgmt:
-  per_second: 10000
-  burst_count: 10000
-
 rc_login:
   address:
     per_second: 10000

dev-backend-docker-compose.yml

@@ -26,7 +26,6 @@ services:
 
   livekit:
     image: livekit/livekit-server:latest
-    pull_policy: always
     hostname: livekit-sfu
     command: --dev --config /etc/livekit.yaml
     restart: unless-stopped
@@ -46,7 +45,6 @@ services:
 
   redis:
     image: redis:6-alpine
-    pull_policy: always
     command: redis-server /etc/redis.conf
     ports:
       # HOST_PORT:CONTAINER_PORT
@@ -59,7 +57,6 @@ services:
   synapse:
     hostname: homeserver
     image: docker.io/matrixdotorg/synapse:latest
-    pull_policy: always
     environment:
       - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
       # Needed for rootless podman-compose such that the uid/gid mapping does
@@ -90,7 +87,6 @@ services:
     #  see backend/dev_tls_setup for how to generate the tls certs
     hostname: synapse.m.localhost
     image: nginx:latest
-    pull_policy: always
     volumes:
       - ./backend/dev_nginx.conf:/etc/nginx/conf.d/default.conf:Z
       - ./backend/dev_tls_m.localhost.key:/root/ssl/key.pem:Z

docs/self-hosting.md

@@ -64,7 +64,7 @@ rc_delayed_event_mgmt:
 ```
 
 As a prerequisite for the
-[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
+[Matrix LiveKit JWT auth service](https://github.com/element-hq/lk-jwt-service)
 make sure that your Synapse server has either a `federation` or `openid`
 [listener configured](https://element-hq.github.io/synapse/latest/usage/configuration/config_documentation.html#listeners).
 
@@ -77,7 +77,7 @@ required for each site deployment.
 
 As depicted above in the `example.com` site deployment, Element Call requires a
 [Livekit SFU](https://github.com/livekit/livekit) alongside a
-[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
+[Matrix Livekit JWT auth service](https://github.com/element-hq/lk-jwt-service)
 to implement
 [MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md).
 
@@ -89,7 +89,7 @@ the example above, this results in:
 | Service | Endpoint | Example |
 | -------- | ------- | ------- |
 | [Livekit SFU](https://github.com/livekit/livekit) WebSocket signalling connection | `/livekit/sfu` | `matrix-rtc.example.com/livekit/sfu` |
-| [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service) | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |
+| [Matrix Livekit JWT auth service](https://github.com/element-hq/lk-jwt-service) | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |
 
 Using Nginx, you can achieve this by:
 
@@ -102,7 +102,7 @@ server {
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
 
-      # MatrixRTC Authorization Service running at port 8080
+      # JWT Service running at port 8080
       proxy_pass http://localhost:8080/;
     }
 
@@ -126,32 +126,6 @@ server {
 }
 ```
 
-Or Using Caddy, you can achieve this by:
-
-```caddy configuration file
-# Route for lk-jwt-service with livekit/jwt prefix
-@jwt_service path /livekit/jwt/sfu/get /livekit/jwt/healthz
-handle @jwt_service {
-  uri strip_prefix /livekit/jwt
-  reverse_proxy http://[::1]:8080 {
-    header_up Host {host}
-    header_up X-Forwarded-Server {host}
-    header_up X-Real-IP {remote_addr}
-    header_up X-Forwarded-For {remote_addr}
-  }
-}
-
-# Default route for livekit
-handle {
-  reverse_proxy http://localhost:7880 {
-    header_up Host {host}
-    header_up X-Forwarded-Server {host}
-    header_up X-Real-IP {remote_addr}
-    header_up X-Forwarded-For {remote_addr}
-  }
-}
-```
-
 #### MatrixRTC backend announcement
 
 > [!IMPORTANT]
@@ -171,6 +145,10 @@ handle {
     {
         "type": "livekit",
         "livekit_service_url": "https://matrix-rtc-2.example.com/livekit/jwt"
+    },
+    {
+        "type": "nextgen_new_foci_type",
+        "props_for_nextgen_foci": "val"
     }
 ]
 ```
@@ -240,7 +218,7 @@ server {
 There are currently two different config files. `.env` holds variables that are
 used at build time, while `public/config.json` holds variables that are used at
 runtime. Documentation and default values for `public/config.json` can be found
-in [ConfigOptions.ts](../src/config/ConfigOptions.ts).
+in [ConfigOptions.ts](src/config/ConfigOptions.ts).
 
 > [!CAUTION]
 > Please note configuring MatrixRTC backend via `config.json` of

docs/url-params.md

@@ -48,7 +48,6 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 
 | Name                                                    | Values                                                                                               | Required for widget                                                                               | Required for SPA             | Description                                                                                                                                                                                                                                                                                                                                                                                         |
 | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `intent`                                                | `start_call`, `join_existing`, `start_call_dm`, `join_existing_dm.                                   | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent is a special url parameter that defines the defaults for all the other parameters. In most cases it should be enough to only set the intent to setup element-call.                                                                                                                                                                                                                       |
 | `allowIceFallback`                                      | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any.                                                                                                                                                                                                                                                                                                           |
 | `analyticsID` (deprecated: use `posthogUserId` instead) | Posthog analytics ID                                                                                 | No                                                                                                | No                           | Available only with user's consent for sharing telemetry in Element Web.                                                                                                                                                                                                                                                                                                                            |
 | `appPrompt`                                             | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config.                                                                                                                                                                                                                                                           |
@@ -60,6 +59,7 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `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`.                                                                                                                             |
 | `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`.                                                                                                                                                                                                                   |
 | `lang`                                                  | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                 | No                                                                                                | No                           | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
 | `password`                                              |                                                                                                      | No                                                                                                | No                           | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
 | `perParticipantE2EE`                                    | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
@@ -70,8 +70,6 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `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.                                                                                                                                                                                                                                                                                           |
-| `autoLeaveWhenOthersLeft`                               | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the app should automatically leave the call when there is no one left in the call.                                                                                                                                                                                                                                                                                                          |
-| `waitForCallPickup`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | When sending a notification, show UI that the app is awaiting an answer, play a dial tone, and (in widget mode) auto-close the widget once the notification expires.                                                                                                                                                                                                                                |
 
 ### 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.11.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.33.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.2-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.CENTRAL_PORTAL, automaticRelease = true)
 
     signAllPublications()
 

i18next-parser.config.ts

@@ -1,6 +1,4 @@
-import type { UserConfig } from "i18next-parser";
-
-const config: UserConfig = {
+export default {
   keySeparator: ".",
   namespaceSeparator: false,
   contextSeparator: "|",
@@ -28,5 +26,3 @@ const config: UserConfig = {
   input: ["src/**/*.{ts,tsx}"],
   sort: true,
 };
-
-export default config;

knip.ts

@@ -1,15 +1,8 @@
-/*
-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 KnipConfig } from "knip";
+import { KnipConfig } from "knip";
 
 export default {
   vite: {
-    config: ["vite.config.ts", "vite-embedded.config.ts"],
+    config: ["vite.config.js", "vite-embedded.config.js"],
   },
   entry: ["src/main.tsx", "i18next-parser.config.ts"],
   ignoreBinaries: [

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}}",
@@ -82,7 +81,7 @@
   "error": {
     "call_is_not_supported": "Volání není podporováno",
     "call_not_found": "Volání nebylo nalezeno",
-    "call_not_found_description": "<0>Zdá se, že tento odkaz nepatří k žádnému existujícímu hovoru. Zkontrolujte, zda máte správný odkaz, nebo<2> vytvořte nový</2>.</0>",
+    "call_not_found_description": "<0>Zdá se, že tento odkaz nepatří k žádnému existujícímu volání. Zkontrolujte, zda máte správný odkaz, nebo <1>vytvořte nový</1>.</0>",
     "connection_lost": "Spojení ztraceno",
     "connection_lost_description": "Hovor byl přerušen.",
     "e2ee_unsupported": "Nekompatibilní prohlížeč",
@@ -105,11 +104,6 @@
     "knock_reject_heading": "Přístup odepřen",
     "reason": "Důvod"
   },
-  "handset": {
-    "overlay_back_button": "Zpět do režimu reproduktoru",
-    "overlay_description": "Funguje pouze při používání aplikace",
-    "overlay_title": "Režim sluchátka"
-  },
   "hangup_button_label": "Ukončit hovor",
   "header_label": "Domov Element Call",
   "header_participants_label": "Účastníci",
@@ -179,11 +173,8 @@
     "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>",
-      "handset": "Sluchátko",
-      "loudspeaker": "Reproduktor",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Reproduktor",

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",
@@ -94,8 +92,6 @@
     "matrix_rtc_focus_missing": "Serveren er ikke konfigureret til at arbejde med {{brand}}{{domain}}. Kontakt venligst din serveradministrator (domæne:{{domain}}, fejlkode: {{ errorCode }}).",
     "open_elsewhere": "Åbnet i en anden fane",
     "open_elsewhere_description": "{{brand}} er blevet åbnet i en anden fane. Hvis det ikke lyder rigtigt, kan du prøve at genindlæse siden.",
-    "room_creation_restricted": "Kunne ikke oprette opkald",
-    "room_creation_restricted_description": "Oprettelse af opkald er muligvis begrænset til autoriserede brugere. Prøv igen senere, eller kontakt din serveradministrator, hvis problemet fortsætter.",
     "unexpected_ec_error": "Der opstod en uventet fejl (<0>Fejlkode:</0> <1> {{ errorCode }}</1>). Kontakt venligst din serveradministrator."
   },
   "group_call_loader": {
@@ -107,11 +103,6 @@
     "knock_reject_heading": "Adgang nægtet",
     "reason": "Årsag: {{reason}}"
   },
-  "handset": {
-    "overlay_back_button": "Tilbage til højttalertilstand",
-    "overlay_description": "Virker kun, når du bruger appen",
-    "overlay_title": "Telefon-højtaler"
-  },
   "hangup_button_label": "Afslut opkald",
   "header_label": "Element Ring hjem",
   "header_participants_label": "Deltagere",
@@ -173,18 +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>",
-      "handset": "Telefon",
-      "loudspeaker": "Højttaler",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Højttaler",

locales/de/app.json

@@ -55,7 +55,6 @@
     "profile": "Profil",
     "reaction": "Reaktion",
     "reactions": "Reaktionen",
-    "reconnecting": "Verbindung wird wiederhergestellt...",
     "settings": "Einstellungen",
     "unencrypted": "Nicht verschlüsselt",
     "username": "Benutzername",
@@ -83,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",
@@ -95,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": {
@@ -108,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",
@@ -181,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",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon{{n}}",
       "speaker": "Lautsprecher",

locales/en/app.json

@@ -55,7 +55,6 @@
     "profile": "Profile",
     "reaction": "Reaction",
     "reactions": "Reactions",
-    "reconnecting": "Reconnecting…",
     "settings": "Settings",
     "unencrypted": "Not encrypted",
     "username": "Username",
@@ -95,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": {

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",
@@ -82,7 +80,7 @@
   "error": {
     "call_is_not_supported": "Call stöds inte",
     "call_not_found": "Samtal hittades inte",
-    "call_not_found_description": "<0>Den länken verkar inte tillhöra något befintligt samtal. Kontrollera att du har rätt länk, eller <2>skapa en ny</2>.</0>",
+    "call_not_found_description": "<0>Den länken verkar inte tillhöra något befintligt samtal. Kontrollera att du har rätt länk, eller <1>skapa en ny</1>.</0>",
     "connection_lost": "Anslutning förlorad",
     "connection_lost_description": "Du kopplades bort från samtalet.",
     "e2ee_unsupported": "Inkompatibel webbläsare",
@@ -94,8 +92,6 @@
     "matrix_rtc_focus_missing": "Servern är inte konfigurerad för att fungera med {{brand}}. Vänligen kontakta serveradministratören (Domän: {{domain}}, Felkod: {{ errorCode }}).",
     "open_elsewhere": "Öppnades i en annan flik",
     "open_elsewhere_description": "{{brand}} har öppnats i en annan flik. Om det inte låter rätt, pröva att ladda om sidan.",
-    "room_creation_restricted": "Misslyckades att skapa samtal",
-    "room_creation_restricted_description": "Samtalsskapande kan vara begränsat till endast behöriga användare. Försök igen senare eller kontakta serveradministratören om problemet kvarstår.",
     "unexpected_ec_error": "Ett oväntat fel inträffade (<0>Felkod:</0> <1>{{ errorCode }}</1>). Kontakta din serveradministratör."
   },
   "group_call_loader": {
@@ -107,11 +103,6 @@
     "knock_reject_heading": "Inte tillåten att gå med",
     "reason": "Anledning"
   },
-  "handset": {
-    "overlay_back_button": "Tillbaka till högtalarläge",
-    "overlay_description": "Fungerar bara när appen används",
-    "overlay_title": "Telefonläge"
-  },
   "hangup_button_label": "Avsluta samtal",
   "header_label": "Element Call Hem",
   "header_participants_label": "Deltagare",
@@ -173,18 +164,12 @@
       "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>",
-      "handset": "Telefonlur",
-      "loudspeaker": "Högtalare",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon {{n}}",
       "speaker": "Högtalare",

package.json

@@ -49,7 +49,7 @@
     "@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/exporter-trace-otlp-http": "^0.202.0",
     "@opentelemetry/resources": "^2.0.0",
     "@opentelemetry/sdk-trace-base": "^2.0.0",
     "@opentelemetry/sdk-trace-web": "^2.0.0",
@@ -81,7 +81,7 @@
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^6.0.0",
+    "@vector-im/compound-design-tokens": "^5.0.0",
     "@vector-im/compound-web": "^8.0.0",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^3.0.0",
@@ -129,7 +129,7 @@
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
-    "vite": "^7.0.0",
+    "vite": "^6.0.0",
     "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-svgr": "^4.0.0",

playwright/create-call.spec.ts

@@ -40,11 +40,6 @@ test("Start a new call then leave and show the feedback screen", async ({
   // The tooltip with the name should be visible
   await expect(page.getByTestId("name_tag")).toContainText("John Doe");
 
-  // Resize the window to resemble a small mobile phone
-  await page.setViewportSize({ width: 350, height: 660 });
-  // We should still be able to send reactions at this screen size
-  await expect(page.getByRole("button", { name: "Reactions" })).toBeVisible();
-
   // leave the call
   await page.getByTestId("incall_leave").click();
   await expect(page.getByRole("heading")).toContainText(

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

@@ -159,8 +159,8 @@ export const widgetTest = test.extend<MyFixtures>({
     } = await registerUser(browser, userB);
 
     // Invite the second user
-    await ewPage1.getByRole("button", { name: "Add", exact: true }).click();
-    await ewPage1.getByRole("menuitem", { name: "New Room" }).click();
+    await ewPage1.getByRole("button", { name: "Add room" }).click();
+    await ewPage1.getByText("New room").click();
     await ewPage1.getByRole("textbox", { name: "Name" }).fill("Welcome Room");
     await ewPage1.getByRole("button", { name: "Create room" }).click();
     await expect(ewPage1.getByText("You created this room.")).toBeVisible();
@@ -184,9 +184,9 @@ export const widgetTest = test.extend<MyFixtures>({
 
     // Accept the invite
     await expect(
-      ewPage2.getByRole("option", { name: "Welcome Room" }),
+      ewPage2.getByRole("treeitem", { name: "Welcome Room" }),
     ).toBeVisible();
-    await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
+    await ewPage2.getByRole("treeitem", { name: "Welcome Room" }).click();
     await ewPage2.getByRole("button", { name: "Accept" }).click();
     await expect(
       ewPage2.getByRole("main").getByRole("heading", { name: "Welcome Room" }),

playwright/reconnect.spec.ts

@@ -1,60 +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";
-
-// Skip test for Firefox, due to page.keyboard.press("Tab") not reliable on headless mode
-test.skip(
-  ({ browserName }) => browserName === "firefox",
-  'This test is not working on firefox, page.keyboard.press("Tab") not reliable in headless mode',
-);
-
-test("can only interact with header and footer while reconnecting", async ({
-  page,
-}) => {
-  await page.goto("/");
-  await page.getByTestId("home_callName").click();
-  await page.getByTestId("home_callName").fill("Test call");
-  await page.getByTestId("home_displayName").click();
-  await page.getByTestId("home_displayName").fill("Test user");
-  // If we do not call fastForward here, we end up with Date.now() returning an actual timestamp
-  // but once we call `await page.clock.fastForward(20000);` later this will reset Date.now() to 0
-  // and we will never get into probablyDisconnected state?
-  await page.clock.fastForward(10);
-  await page.getByTestId("home_go").click();
-
-  await expect(page.locator("video")).toBeVisible();
-  await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
-
-  // Join the call
-  await page.getByTestId("lobby_joinCall").click();
-
-  // The media tile for the local user should become visible
-  await new Promise((resolve) => setTimeout(resolve, 1500));
-  await expect(page.getByTestId("name_tag")).toContainText("Test user");
-
-  // Now disconnect from the internet
-  await page.route("https://synapse.m.localhost/**/*", async (route) => {
-    await new Promise((resolve) => setTimeout(resolve, 10000));
-    await route.continue();
-  });
-  await page.clock.fastForward(20000);
-
-  await expect(
-    page.getByRole("dialog", { name: "Reconnecting…" }),
-  ).toBeVisible();
-
-  // Tab order should jump directly from header to footer, skipping media tiles
-  await page.getByRole("button", { name: "Mute microphone" }).focus();
-  await expect(
-    page.getByRole("button", { name: "Mute microphone" }),
-  ).toBeFocused();
-  await page.keyboard.press("Tab");
-  await expect(page.getByRole("button", { name: "Stop video" })).toBeFocused();
-  // Most critically, we should be able to press the hangup button
-  await page.getByRole("button", { name: "End call" }).click();
-});

playwright/restricted-sfu.spec.ts

@@ -1,75 +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";
-import { sleep } from "matrix-js-sdk/lib/utils.js";
-
-test("Should request JWT token before starting the call", async ({ page }) => {
-  await page.goto("/");
-
-  let sfGetTimestamp = 0;
-  let sendStateEventTimestamp = 0;
-  await page.route(
-    "**/matrix-rtc.m.localhost/livekit/jwt/sfu/get",
-    async (route) => {
-      await sleep(2000); // Simulate very slow request
-      await route.continue();
-      sfGetTimestamp = Date.now();
-    },
-  );
-
-  await page.route(
-    "**/state/org.matrix.msc3401.call.member/**",
-    async (route) => {
-      await route.continue();
-      sendStateEventTimestamp = Date.now();
-    },
-  );
-
-  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.waitForTimeout(4000);
-  // Ensure that the call is connected
-  await page
-    .locator("div")
-    .filter({ hasText: /^HelloCall$/ })
-    .click();
-
-  expect(sfGetTimestamp).toBeGreaterThan(0);
-  expect(sendStateEventTimestamp).toBeGreaterThan(0);
-  expect(sfGetTimestamp).toBeLessThan(sendStateEventTimestamp);
-});
-
-test("Error when pre-warming the focus are caught by the ErrorBoundary", async ({
-  page,
-}) => {
-  await page.goto("/");
-
-  await page.route("**/openid/request_token", async (route) => {
-    await route.fulfill({
-      status: 418, // Simulate an error not retryable
-    });
-  });
-
-  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();
-
-  // Should fail
-  await expect(page.getByText("Something went wrong")).toBeVisible();
-});

playwright/sfu-reconnect-bug.spec.ts

@@ -100,5 +100,5 @@ test("When creator left, avoid reconnect to the same SFU", async ({
   // 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(2 /* the first one is for the warmup */);
+  expect(sfuGetCallCount).toBe(1);
 });

playwright/widget/simple-create.spec.ts

@@ -49,10 +49,7 @@ widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => {
 
   // Check the join indicator on the room list
   await expect(
-    brooks.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame()
-      .getByRole("button", { name: "End call" }),
+    brooks.page.locator("div").filter({ hasText: /^Joined • 1$/ }),
   ).toBeVisible();
 
   // Join from the other side
@@ -62,28 +59,26 @@ widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => {
   ).toBeVisible();
   await whistler.page.getByRole("button", { name: "Join" }).click();
 
-  // Currently disabled due to recent Element Web is bypassing Lobby
-  // await expect(
-  //   whistler.page
-  //     .locator('iframe[title="Element Call"]')
-  //     .contentFrame()
-  //     .getByTestId("lobby_joinCall"),
-  // ).toBeVisible();
-  //
-  // await whistler.page
-  //   .locator('iframe[title="Element Call"]')
-  //   .contentFrame()
-  //   .getByTestId("lobby_joinCall")
-  //   .click();
+  await expect(
+    whistler.page
+      .locator('iframe[title="Element Call"]')
+      .contentFrame()
+      .getByTestId("lobby_joinCall"),
+  ).toBeVisible();
 
-  // Currrenty disabled due to recent Element Web not indicating the number of participants
-  // await expect(
-  //   whistler.page.locator("div").filter({ hasText: /^Joined • 2$/ }),
-  // ).toBeVisible();
+  await whistler.page
+    .locator('iframe[title="Element Call"]')
+    .contentFrame()
+    .getByTestId("lobby_joinCall")
+    .click();
 
-  // await expect(
-  //   brooks.page.locator("div").filter({ hasText: /^Joined • 2$/ }),
-  // ).toBeVisible();
+  await expect(
+    whistler.page.locator("div").filter({ hasText: /^Joined • 2$/ }),
+  ).toBeVisible();
+
+  await expect(
+    brooks.page.locator("div").filter({ hasText: /^Joined • 2$/ }),
+  ).toBeVisible();
 
   // Whistler leaves
   await whistler.page.waitForTimeout(1000);

src/App.tsx

@@ -24,6 +24,7 @@ import { RegisterPage } from "./auth/RegisterPage";
 import { RoomPage } from "./room/RoomPage";
 import { ClientProvider } from "./ClientContext";
 import { ErrorPage, LoadingPage } from "./FullScreenView";
+import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
 import { widget } from "./widget";
 import { useTheme } from "./useTheme";
@@ -85,6 +86,7 @@ export const App: FC<Props> = ({ vm }) => {
           <Sentry.ErrorBoundary
             fallback={(error) => <ErrorPage error={error} widget={widget} />}
           >
+            <DisconnectedBanner />
             <Routes>
               <SentryRoute path="/" element={<HomePage />} />
               <SentryRoute path="/login" element={<LoginPage />} />

src/AppBar.tsx

@@ -61,11 +61,7 @@ export const AppBar: FC<Props> = ({ children }) => {
         style={{ display: hidden ? "none" : "block" }}
         className={styles.bar}
       >
-        <Header
-          // App bar is mainly seen in the call view, which has its own
-          // 'reconnecting' toast
-          disconnectedBanner={false}
-        >
+        <Header>
           <LeftNav>
             <Tooltip label={t("common.back")}>
               <IconButton onClick={onBackClick}>

src/Header.tsx

@@ -17,38 +17,27 @@ import Logo from "./icons/Logo.svg?react";
 import { Avatar, Size } from "./Avatar";
 import { EncryptionLock } from "./room/EncryptionLock";
 import { useMediaQuery } from "./useMediaQuery";
-import { DisconnectedBanner } from "./DisconnectedBanner";
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
   ref?: Ref<HTMLElement>;
   children: ReactNode;
   className?: string;
-  /**
-   * Whether the header should display an informational banner whenever the
-   * client is disconnected from the homeserver.
-   * @default true
-   */
-  disconnectedBanner?: boolean;
 }
 
 export const Header: FC<HeaderProps> = ({
   ref,
   children,
   className,
-  disconnectedBanner = true,
   ...rest
 }) => {
   return (
-    <>
-      <header
-        ref={ref}
-        className={classNames(styles.header, className)}
-        {...rest}
-      >
-        {children}
-      </header>
-      {disconnectedBanner && <DisconnectedBanner />}
-    </>
+    <header
+      ref={ref}
+      className={classNames(styles.header, className)}
+      {...rest}
+    >
+      {children}
+    </header>
   );
 };
 

src/Overlay.module.css

@@ -35,8 +35,6 @@ Please see LICENSE in the repository root for full details.
 
 .bg.animate[data-state="closed"] {
   animation: fade-out 130ms;
-  opacity: 0;
-  pointer-events: none;
 }
 
 .overlay {

src/Toast.tsx

@@ -45,12 +45,6 @@ interface Props {
    * A supporting icon to display within the toast.
    */
   Icon?: ComponentType<SVGAttributes<SVGElement>>;
-  /**
-   * Whether the toast should be modal, making it fill the screen (by portalling
-   * it into the root of the document) and trap focus until dismissed.
-   * @default true
-   */
-  modal?: boolean;
 }
 
 /**
@@ -62,7 +56,6 @@ export const Toast: FC<Props> = ({
   autoDismiss,
   children,
   Icon,
-  modal = true,
 }) => {
   const onOpenChange = useCallback(
     (open: boolean) => {
@@ -78,33 +71,29 @@ export const Toast: FC<Props> = ({
     }
   }, [open, autoDismiss, onDismiss]);
 
-  const content = (
-    <>
-      <DialogOverlay
-        className={classNames(overlayStyles.bg, overlayStyles.animate)}
-      />
-      <DialogContent aria-describedby={undefined} asChild>
-        <DialogClose
-          className={classNames(
-            overlayStyles.overlay,
-            overlayStyles.animate,
-            styles.toast,
-          )}
-        >
-          <DialogTitle asChild>
-            <Text as="h3" size="sm" weight="semibold">
-              {children}
-            </Text>
-          </DialogTitle>
-          {Icon && <Icon width={20} height={20} aria-hidden />}
-        </DialogClose>
-      </DialogContent>
-    </>
-  );
-
   return (
-    <DialogRoot open={open} onOpenChange={onOpenChange} modal={modal}>
-      {modal ? <DialogPortal>{content}</DialogPortal> : content}
+    <DialogRoot open={open} onOpenChange={onOpenChange}>
+      <DialogPortal>
+        <DialogOverlay
+          className={classNames(overlayStyles.bg, overlayStyles.animate)}
+        />
+        <DialogContent aria-describedby={undefined} asChild>
+          <DialogClose
+            className={classNames(
+              overlayStyles.overlay,
+              overlayStyles.animate,
+              styles.toast,
+            )}
+          >
+            <DialogTitle asChild>
+              <Text as="h3" size="sm" weight="semibold">
+                {children}
+              </Text>
+            </DialogTitle>
+            {Icon && <Icon width={20} height={20} aria-hidden />}
+          </DialogClose>
+        </DialogContent>
+      </DialogPortal>
     </DialogRoot>
   );
 };

src/UrlParams.test.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 { describe, expect, it, onTestFinished, vi } from "vitest";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { describe, expect, it } from "vitest";
 
-import * as PlatformMod from "../src/Platform";
 import {
   getRoomIdentifierFromUrl,
-  computeUrlParams,
-  HeaderStyle,
   getUrlParams,
+  UserIntent,
 } from "../src/UrlParams";
 
 const ROOM_NAME = "roomNameHere";
@@ -85,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", () => {
@@ -106,16 +93,16 @@ describe("UrlParams", () => {
 
   describe("preload", () => {
     it("defaults to false", () => {
-      expect(computeUrlParams().preload).toBe(false);
+      expect(getUrlParams().preload).toBe(false);
     });
 
     it("ignored in SPA mode", () => {
-      expect(computeUrlParams("?preload=true").preload).toBe(false);
+      expect(getUrlParams("?preload=true").preload).toBe(false);
     });
 
     it("respected in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?preload=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).preload,
       ).toBe(true);
@@ -124,20 +111,19 @@ describe("UrlParams", () => {
 
   describe("returnToLobby", () => {
     it("is false in SPA mode", () => {
-      expect(computeUrlParams("?returnToLobby=true").returnToLobby).toBe(false);
+      expect(getUrlParams("?returnToLobby=true").returnToLobby).toBe(false);
     });
 
     it("defaults to false in widget mode", () => {
       expect(
-        computeUrlParams(
-          "?widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
-        ).returnToLobby,
+        getUrlParams("?widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo")
+          .returnToLobby,
       ).toBe(false);
     });
 
     it("respected in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?returnToLobby=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).returnToLobby,
       ).toBe(true);
@@ -146,12 +132,12 @@ describe("UrlParams", () => {
 
   describe("userId", () => {
     it("is ignored in SPA mode", () => {
-      expect(computeUrlParams("?userId=asd").userId).toBe(null);
+      expect(getUrlParams("?userId=asd").userId).toBe(null);
     });
 
     it("is parsed in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?userId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).userId,
       ).toBe("asd");
@@ -160,12 +146,12 @@ describe("UrlParams", () => {
 
   describe("deviceId", () => {
     it("is ignored in SPA mode", () => {
-      expect(computeUrlParams("?deviceId=asd").deviceId).toBe(null);
+      expect(getUrlParams("?deviceId=asd").deviceId).toBe(null);
     });
 
     it("is parsed in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?deviceId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).deviceId,
       ).toBe("asd");
@@ -174,12 +160,12 @@ describe("UrlParams", () => {
 
   describe("baseUrl", () => {
     it("is ignored in SPA mode", () => {
-      expect(computeUrlParams("?baseUrl=asd").baseUrl).toBe(null);
+      expect(getUrlParams("?baseUrl=asd").baseUrl).toBe(null);
     });
 
     it("is parsed in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?baseUrl=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).baseUrl,
       ).toBe("asd");
@@ -189,179 +175,84 @@ describe("UrlParams", () => {
   describe("viaServers", () => {
     it("is ignored in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?viaServers=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).viaServers,
       ).toBe(null);
     });
 
     it("is parsed in SPA mode", () => {
-      expect(computeUrlParams("?viaServers=asd").viaServers).toBe("asd");
+      expect(getUrlParams("?viaServers=asd").viaServers).toBe("asd");
     });
   });
 
   describe("homeserver", () => {
     it("is ignored in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?homeserver=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).homeserver,
       ).toBe(null);
     });
 
     it("is parsed in SPA mode", () => {
-      expect(computeUrlParams("?homeserver=asd").homeserver).toBe("asd");
+      expect(getUrlParams("?homeserver=asd").homeserver).toBe("asd");
     });
   });
 
   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: false,
-      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: platform === "desktop" ? "notification" : "ring",
-    });
-    const joinExistingCallDefaults = (platform: string): object => ({
-      confineToRoom: true,
-      appPrompt: false,
-      preload: false,
-      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",
-      defaultAudioEnabled: true,
-      defaultVideoEnabled: true,
-    });
-    it("use no-intent-defaults with unknown intent", () => {
-      expect(computeUrlParams()).toMatchObject(noIntentDefaults);
+    it("defaults to unknown", () => {
+      expect(getUrlParams().intent).toBe(UserIntent.Unknown);
     });
 
     it("ignores intent if it is not a valid value", () => {
-      expect(computeUrlParams("?intent=foo")).toMatchObject(noIntentDefaults);
+      expect(getUrlParams("?intent=foo").intent).toBe(UserIntent.Unknown);
     });
 
     it("accepts start_call", () => {
-      expect(
-        computeUrlParams(
-          "?intent=start_call&widgetId=1234&parentUrl=parent.org",
-        ),
-      ).toMatchObject(startNewCallDefaults("desktop"));
-    });
-
-    it("accepts start_call_dm mobile", () => {
-      vi.spyOn(PlatformMod, "platform", "get").mockReturnValue("android");
-      onTestFinished(() => {
-        vi.spyOn(PlatformMod, "platform", "get").mockReturnValue("desktop");
-      });
-      expect(
-        computeUrlParams(
-          "?intent=start_call_dm&widgetId=1234&parentUrl=parent.org",
-        ),
-      ).toMatchObject(startNewCallDefaults("android"));
-    });
-
-    it("accepts start_call_dm mobile and prioritizes overwritten params", () => {
-      vi.spyOn(PlatformMod, "platform", "get").mockReturnValue("android");
-      onTestFinished(() => {
-        vi.spyOn(PlatformMod, "platform", "get").mockReturnValue("desktop");
-      });
-      expect(
-        computeUrlParams(
-          "?intent=start_call_dm&widgetId=1234&parentUrl=parent.org&sendNotificationType=notification",
-        ),
-      ).toMatchObject({
-        ...startNewCallDefaults("android"),
-        sendNotificationType: "notification",
-      });
+      expect(getUrlParams("?intent=start_call").intent).toBe(
+        UserIntent.StartNewCall,
+      );
     });
 
     it("accepts join_existing", () => {
-      expect(
-        computeUrlParams(
-          "?intent=join_existing&widgetId=1234&parentUrl=parent.org",
-        ),
-      ).toMatchObject(joinExistingCallDefaults("desktop"));
+      expect(getUrlParams("?intent=join_existing").intent).toBe(
+        UserIntent.JoinExistingCall,
+      );
     });
   });
 
   describe("skipLobby", () => {
     it("defaults to false", () => {
-      expect(computeUrlParams().skipLobby).toBe(false);
+      expect(getUrlParams().skipLobby).toBe(false);
     });
 
     it("defaults to false if intent is start_call in SPA mode", () => {
-      expect(computeUrlParams("?intent=start_call").skipLobby).toBe(false);
+      expect(getUrlParams("?intent=start_call").skipLobby).toBe(false);
     });
 
     it("defaults to true if intent is start_call in widget mode", () => {
       expect(
-        computeUrlParams(
+        getUrlParams(
           "?intent=start_call&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
         ).skipLobby,
       ).toBe(true);
     });
 
     it("default to false if intent is join_existing", () => {
-      expect(computeUrlParams("?intent=join_existing").skipLobby).toBe(false);
+      expect(getUrlParams("?intent=join_existing").skipLobby).toBe(false);
     });
   });
   describe("header", () => {
     it("uses header if provided", () => {
-      expect(computeUrlParams("?header=app_bar&hideHeader=true").header).toBe(
+      expect(getUrlParams("?header=app_bar&hideHeader=true").header).toBe(
         "app_bar",
       );
-      expect(computeUrlParams("?header=none&hideHeader=false").header).toBe(
-        "none",
-      );
+      expect(getUrlParams("?header=none&hideHeader=false").header).toBe("none");
     });
-  });
-  describe("getUrlParams", () => {
-    it("uses cached values", () => {
-      const spy = vi.spyOn(logger, "info");
-      // call get once
-      const params = getUrlParams("?header=app_bar&hideHeader=true", "");
-      // call get twice
-      expect(getUrlParams("?header=app_bar&hideHeader=true", "")).toBe(params);
-      // expect compute to only be called once
-      // it will only log when it is computing the values
-      expect(spy).toHaveBeenCalledExactlyOnceWith(
-        "UrlParams: final set of url params\n",
-        "intent:",
-        "unknown",
-        "\nproperties:",
-        expect.any(Object),
-        "configuration:",
-        expect.any(Object),
-        "intentAndPlatformDerivedConfiguration:",
-        {},
-      );
+    it("converts hideHeader to the correct header value", () => {
+      expect(getUrlParams("?hideHeader=true").header).toBe("none");
+      expect(getUrlParams("?hideHeader=false").header).toBe("standard");
     });
   });
 });

src/UrlParams.ts

@@ -9,12 +9,10 @@ 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;
@@ -25,8 +23,6 @@ interface RoomIdentifier {
 export enum UserIntent {
   StartNewCall = "start_call",
   JoinExistingCall = "join_existing",
-  StartNewCallDM = "start_call_dm",
-  JoinExistingCallDM = "join_existing_dm",
   Unknown = "unknown",
 }
 
@@ -36,12 +32,12 @@ export enum HeaderStyle {
   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;
@@ -53,11 +49,45 @@ 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;
+  /**
+   * 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 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.
    */
@@ -94,97 +124,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,42 +154,51 @@ export interface UrlConfiguration {
    * This is useful for video rooms.
    */
   returnToLobby: boolean;
+  /**
+   * The theme to use for element call.
+   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
+   */
+  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;
+
+  /**
+   * 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;
   /**
    * Whether and what type of notification EC should send, when the user joins the call.
    */
   sendNotificationType?: RTCNotificationType;
-  /**
-   * Whether the app should automatically leave the call when there
-   * is no one left in the call.
-   * This is one part to make the call matrixRTC session behave like a telephone call.
-   */
-  autoLeaveWhenOthersLeft: boolean;
-
-  /**
-   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
-   * This is a no-op if not combined with sendNotificationType.
-   *
-   * This entails:
-   *  - show ui that it is awaiting an answer
-   *  - play a sound that indicates that it is awaiting an answer
-   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
-   */
-  waitForCallPickup: boolean;
 }
-interface IntentAndPlatformDerivedConfiguration {
-  defaultAudioEnabled?: boolean;
-  defaultVideoEnabled?: boolean;
-}
-
-// 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,
-    IntentAndPlatformDerivedConfiguration {}
 
 // 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
@@ -283,17 +240,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),
@@ -301,30 +247,14 @@ class ParamParser {
     ];
   }
 
-  /**
-   * Returns true if the flag exists and is not "false".
-   */
   public getFlagParam(name: string, defaultValue = false): boolean {
     const param = this.getParam(name);
     return param === null ? defaultValue : param !== "false";
   }
-  /**
-   * Returns the value of the flag if it exists, or undefined if it does not.
-   */
-  public getFlag(name: string): boolean | undefined {
-    const param = this.getParam(name);
-    return param !== null ? param !== "false" : undefined;
-  }
 }
 
-let urlParamCache: {
-  search?: string;
-  hash?: string;
-  params?: UrlParams;
-} = {};
-
 /**
- * Gets the url params and loads them from a cache if already computed.
+ * Gets the app parameters for the current URL.
  * @param search The URL search string
  * @param hash The URL hash
  * @returns The app parameters encoded in the URL
@@ -333,131 +263,50 @@ export const getUrlParams = (
   search = window.location.search,
   hash = window.location.hash,
 ): UrlParams => {
-  if (
-    urlParamCache.search === search &&
-    urlParamCache.hash === hash &&
-    urlParamCache.params
-  ) {
-    return urlParamCache.params;
-  }
-  const params = computeUrlParams(search, hash);
-  urlParamCache = { search, hash, params };
-
-  return params;
-};
-
-/**
- * Gets the app parameters for the current URL.
- * @param search The URL search string
- * @param hash The URL hash
- * @returns The app parameters encoded in the URL
- */
-export const computeUrlParams = (search = "", hash = ""): UrlParams => {
   const parser = new ParamParser(search, hash);
 
   const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
 
+  let intent = parser.getParam("intent");
+  if (!intent || !Object.values(UserIntent).includes(intent as UserIntent)) {
+    intent = UserIntent.Unknown;
+  }
+
+  // Check hideHeader for backwards compatibility. If header is set, hideHeader
+  // is ignored.
+  const header =
+    parser.getParam("header") ??
+    (parser.getFlagParam("hideHeader")
+      ? HeaderStyle.None
+      : HeaderStyle.Standard);
+
+  const sendNotificationType = ["ring", "notification"].includes(
+    parser.getParam("sendNotificationType") ?? "",
+  )
+    ? (parser.getParam("sendNotificationType") as RTCNotificationType)
+    : undefined;
   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 = {
-    confineToRoom: true,
-    appPrompt: false,
-    preload: false,
-    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",
-    autoLeaveWhenOthersLeft: false,
-    waitForCallPickup: false,
-  };
-  switch (intent) {
-    case UserIntent.StartNewCall:
-      intentPreset.skipLobby = true;
-      break;
-    case UserIntent.JoinExistingCall:
-      // On desktop this will be overridden based on which button was used to join the call
-      intentPreset.skipLobby = false;
-      break;
-    case UserIntent.StartNewCallDM:
-      intentPreset.skipLobby = true;
-      intentPreset.sendNotificationType = "ring";
-      intentPreset.autoLeaveWhenOthersLeft = true;
-      intentPreset.waitForCallPickup = true;
-
-      break;
-    case UserIntent.JoinExistingCallDM:
-      // On desktop this will be overridden based on which button was used to join the call
-      intentPreset.skipLobby = true;
-      intentPreset.autoLeaveWhenOthersLeft = true;
-      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,
-        autoLeaveWhenOthersLeft: false,
-        waitForCallPickup: false,
-      };
-  }
-
-  const intentAndPlatformDerivedConfiguration: IntentAndPlatformDerivedConfiguration =
-    {};
-  // Desktop also includes web. Its anything that is not mobile.
-  const desktopMobile = platform === "desktop" ? "desktop" : "mobile";
-  switch (desktopMobile) {
-    case "desktop":
-    case "mobile":
-      switch (intent) {
-        case UserIntent.StartNewCall:
-        case UserIntent.JoinExistingCall:
-        case UserIntent.StartNewCallDM:
-        case UserIntent.JoinExistingCallDM:
-          intentAndPlatformDerivedConfiguration.defaultAudioEnabled = true;
-          intentAndPlatformDerivedConfiguration.defaultVideoEnabled = true;
-          break;
-      }
-  }
-
-  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,
+    header: header as HeaderStyle,
+    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,
@@ -465,9 +314,24 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     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:
@@ -475,52 +339,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     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",
-    ]),
-    waitForCallPickup: parser.getFlag("waitForCallPickup"),
-    autoLeaveWhenOthersLeft: parser.getFlag("autoLeave"),
-  };
-
-  // Log the final configuration for debugging purposes.
-  // This will only log when the cache is not yet set.
-  logger.info(
-    "UrlParams: final set of url params\n",
-    "intent:",
-    intent,
-    "\nproperties:",
-    properties,
-    "configuration:",
-    configuration,
-    "intentAndPlatformDerivedConfiguration:",
-    intentAndPlatformDerivedConfiguration,
-  );
-
-  return {
-    ...properties,
-    ...intentPreset,
-    ...pickBy(configuration, (v?: unknown) => v !== undefined),
-    ...intentAndPlatformDerivedConfiguration,
+    sendNotificationType,
   };
 };
 
@@ -579,16 +398,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/button/Button.tsx

@@ -16,6 +16,7 @@ import {
   EndCallIcon,
   ShareScreenSolidIcon,
   SettingsSolidIcon,
+  SwitchCameraSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
@@ -66,6 +67,23 @@ export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
   );
 };
 
+export const SwitchCameraButton: FC<ComponentPropsWithoutRef<"button">> = (
+  props,
+) => {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip label={t("switch_camera")}>
+      <CpdButton
+        iconOnly
+        Icon={SwitchCameraSolidIcon}
+        kind="secondary"
+        {...props}
+      />
+    </Tooltip>
+  );
+};
+
 interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
 }

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

@@ -9,7 +9,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby="«rbb»"
+    aria-labelledby="«rb5»"
     class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
     data-kind="primary"
     data-size="lg"

src/config/ConfigOptions.ts

@@ -114,29 +114,24 @@ export interface ConfigOptions {
      * when someone leaves a call.
      */
     wait_for_key_rotation_ms?: number;
+    /** @deprecated use wait_for_key_rotation_ms instead */
+    key_rotation_on_leave_delay?: number;
 
     /**
      * The duration (in milliseconds) after the most recent keep-alive (delayed leave event restart)
      * that the server waits before sending the leave MatrixRTC membership event.
      */
     delayed_leave_event_delay_ms?: 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"}`.)
-     */
-    delayed_leave_event_restart_local_timeout_ms?: number;
+    /** @deprecated use delayed_leave_event_delay_ms instead */
+    membership_server_side_expiry_timeout?: number;
 
     /**
      * The time interval (in milliseconds) at which the client sends membership keep-alive
      * messages to the server by restarting the timer for the delayed leave event.
      */
     delayed_leave_event_restart_ms?: number;
+    /** @deprecated use delayed_leave_event_restart_ms instead */
+    membership_keep_alive_period?: number;
 
     /**
      * How long we wait before retrying after a network error on any of the requests.

src/grid/TileWrapper.tsx

@@ -61,12 +61,7 @@ const TileWrapper_ = memo(
     useDrag((state) => onDrag?.current!(id, state), {
       target: ref,
       filterTaps: true,
-      // Previous designs, which allowed tiles to be dragged and dropped around
-      // the scrolling grid, required us to set preventScroll to true here. But
-      // our designs no longer call for this, and meanwhile there's a bug in
-      // use-gesture that causes filterTaps + preventScroll to break buttons
-      // within tiles (like the 'switch camera' button) on mobile.
-      // https://github.com/pmndrs/use-gesture/issues/593
+      preventScroll: true,
     });
 
     return (

src/icons/FullScreenMaximise.svg

@@ -1,6 +0,0 @@
-<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 14C4.55228 14 5 14.4477 5 15V19H9C9.55228 19 10 19.4477 10 20C10 20.5523 9.55228 21 9 21H3V15C3 14.4477 3.44772 14 4 14Z"/>
-<path d="M20 14C20.5523 14 21 14.4477 21 15V21H15C14.4477 21 14 20.5523 14 20C14 19.4477 14.4477 19 15 19H19V15C19 14.4477 19.4477 14 20 14Z" />
-<path d="M9 3C9.55228 3 10 3.44772 10 4C10 4.55228 9.55228 5 9 5H5V9C5 9.55228 4.55228 10 4 10C3.44772 10 3 9.55228 3 9V3H9Z" />
-<path d="M21 9C21 9.55228 20.5523 10 20 10C19.4477 10 19 9.55228 19 9V5H15C14.4477 5 14 4.55228 14 4C14 3.44772 14.4477 3 15 3H21V9Z" />
-</svg>

src/icons/FullScreenMinimise.svg

@@ -1,6 +0,0 @@
-<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 20C10 20.5523 9.55228 21 9 21C8.44772 21 8 20.5523 8 20V16H4C3.44772 16 3 15.5523 3 15C3 14.4477 3.44772 14 4 14H10V20Z" />
-<path d="M20 14C20.5523 14 21 14.4477 21 15C21 15.5523 20.5523 16 20 16H16V20C16 20.5523 15.5523 21 15 21C14.4477 21 14 20.5523 14 20V14H20Z" />
-<path d="M9 3C9.55228 3 10 3.44772 10 4V10H4C3.44772 10 3 9.55228 3 9C3 8.44772 3.44772 8 4 8H8V4C8 3.44772 8.44772 3 9 3Z" />
-<path d="M15 3C15.5523 3 16 3.44772 16 4V8H20C20.5523 8 21 8.44772 21 9C21 9.55228 20.5523 10 20 10H14V4C14 3.44772 14.4477 3 15 3Z" />
-</svg>

src/livekit/BlurBackgroundTransformer.ts

@@ -1,7 +1,7 @@
 /*
 Copyright 2024-2025 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 

src/livekit/TrackProcessorContext.tsx

@@ -1,7 +1,7 @@
 /*
-Copyright 2024-2025 New Vector Ltd.
+Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 

src/livekit/useECConnectionState.test.tsx

@@ -15,7 +15,7 @@ import {
 import userEvent from "@testing-library/user-event";
 import { render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
-import { sleep } from "matrix-js-sdk/lib/utils";
+import { defer, sleep } from "matrix-js-sdk/lib/utils";
 
 import { useECConnectionState } from "./useECConnectionState";
 import { type SFUConfig } from "./openIDSFU";
@@ -93,8 +93,8 @@ describe("Leaking connection prevention", () => {
 
   test("Should cancel pending connections when the component is unmounted", async () => {
     const connectCall = vi.fn();
-    const pendingConnection = Promise.withResolvers<void>();
-    // let pendingDisconnection = Promise.withResolvers<void>()
+    const pendingConnection = defer<void>();
+    // let pendingDisconnection = defer<void>()
     const disconnectMock = vi.fn();
 
     const mockRoom = {
@@ -141,8 +141,8 @@ describe("Leaking connection prevention", () => {
 
   test("Should cancel about to open but not yet opened connection", async () => {
     const createTracksCall = vi.fn();
-    const pendingCreateTrack = Promise.withResolvers<void>();
-    // let pendingDisconnection = Promise.withResolvers<void>()
+    const pendingCreateTrack = defer<void>();
+    // let pendingDisconnection = defer<void>()
     const disconnectMock = vi.fn();
     const connectMock = vi.fn();
 

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

@@ -9,7 +9,6 @@ import {
   ConnectionState,
   type E2EEManagerOptions,
   ExternalE2EEKeyProvider,
-  type LocalTrackPublication,
   LocalVideoTrack,
   Room,
   type RoomOptions,
@@ -182,33 +181,6 @@ export function useLivekit(
     sfuConfig,
   );
 
-  // Log errors when local participant has issues publishing a track.
-  useEffect(() => {
-    const localTrackUnpublishedFn = (
-      publication: LocalTrackPublication,
-    ): void => {
-      logger.info(
-        "Local track unpublished",
-        publication.trackName,
-        publication.trackInfo,
-      );
-    };
-    const mediaDevicesErrorFn = (error: Error): void => {
-      logger.warn("Media devices error when publishing a track", error);
-    };
-
-    room.localParticipant.on("localTrackUnpublished", localTrackUnpublishedFn);
-    room.localParticipant.on("mediaDevicesError", mediaDevicesErrorFn);
-
-    return (): void => {
-      room.localParticipant.off(
-        "localTrackUnpublished",
-        localTrackUnpublishedFn,
-      );
-      room.localParticipant.off("mediaDevicesError", mediaDevicesErrorFn);
-    };
-  }, [room.localParticipant]);
-
   useEffect(() => {
     // Sync the requested mute states with LiveKit's mute states. We do it this
     // way around rather than using LiveKit as the source of truth, so that the

src/reactions/RaisedHandIndicator.tsx

@@ -22,13 +22,11 @@ export function RaisedHandIndicator({
   miniature,
   showTimer,
   onClick,
-  tabIndex,
 }: {
   raisedHandTime?: Date;
   miniature?: boolean;
   showTimer?: boolean;
   onClick?: () => void;
-  tabIndex?: number;
 }): ReactNode {
   const { t } = useTranslation();
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
@@ -96,7 +94,6 @@ export function RaisedHandIndicator({
           background: "none",
         }}
         onClick={clickCallback}
-        tabIndex={tabIndex}
       >
         {content}
       </button>

src/reactions/index.ts

@@ -27,8 +27,6 @@ import rockSoundOgg from "../sound/reactions/rock.ogg?url";
 import rockSoundMp3 from "../sound/reactions/rock.mp3?url";
 import waveSoundOgg from "../sound/reactions/wave.ogg?url";
 import waveSoundMp3 from "../sound/reactions/wave.mp3?url";
-import baduntssSoundOgg from "../sound/reactions/baduntss.ogg?url";
-import baduntssSoundMp3 from "../sound/reactions/baduntss.mp3?url";
 
 export const ElementCallReactionEventType = "io.element.call.reaction";
 
@@ -193,15 +191,6 @@ export const ReactionSet: ReactionOption[] = [
       mp3: waveSoundMp3,
     },
   },
-  {
-    emoji: "🥁",
-    name: "drum",
-    alias: ["joke"],
-    sound: {
-      ogg: baduntssSoundOgg,
-      mp3: baduntssSoundMp3,
-    },
-  },
 ];
 
 export interface RaisedHandInfo {

src/room/CallEventAudioRenderer.test.tsx

@@ -19,7 +19,10 @@ import { act } from "react";
 import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 
 import { mockRtcMembership } from "../utils/test";
-import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
+import {
+  CallEventAudioRenderer,
+  MAX_PARTICIPANT_COUNT_FOR_SOUND,
+} from "./CallEventAudioRenderer";
 import { useAudioContext } from "../useAudioContext";
 import { prefetchSounds } from "../soundUtils";
 import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
@@ -28,9 +31,7 @@ import {
   aliceRtcMember,
   bobRtcMember,
   local,
-  localRtcMember,
 } from "../utils/test-fixtures";
-import { MAX_PARTICIPANT_COUNT_FOR_SOUND } from "../state/CallViewModel";
 
 vitest.mock("../useAudioContext");
 vitest.mock("../soundUtils");
@@ -54,8 +55,6 @@ beforeEach(() => {
   playSound = vitest.fn();
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vitest.fn(),
-    soundDuration: {},
   });
 });
 
@@ -67,7 +66,7 @@ beforeEach(() => {
  * a noise every time.
  */
 test("plays one sound when entering a call", () => {
-  const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment([
+  const { vm, remoteRtcMemberships$ } = getBasicCallViewModelEnvironment([
     local,
     alice,
   ]);
@@ -75,72 +74,56 @@ test("plays one sound when entering a call", () => {
 
   // Joining a call usually means remote participants are added later.
   act(() => {
-    rtcMemberships$.next([localRtcMember, aliceRtcMember, bobRtcMember]);
+    remoteRtcMemberships$.next([aliceRtcMember, bobRtcMember]);
   });
   expect(playSound).toHaveBeenCalledOnce();
 });
 
 test("plays a sound when a user joins", () => {
-  const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment([
+  const { vm, remoteRtcMemberships$ } = getBasicCallViewModelEnvironment([
     local,
     alice,
   ]);
   render(<CallEventAudioRenderer vm={vm} />);
 
   act(() => {
-    rtcMemberships$.next([localRtcMember, aliceRtcMember, bobRtcMember]);
+    remoteRtcMemberships$.next([aliceRtcMember, bobRtcMember]);
   });
   // Play a sound when joining a call.
   expect(playSound).toBeCalledWith("join");
 });
 
 test("plays a sound when a user leaves", () => {
-  const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment([
+  const { vm, remoteRtcMemberships$ } = getBasicCallViewModelEnvironment([
     local,
     alice,
   ]);
   render(<CallEventAudioRenderer vm={vm} />);
 
   act(() => {
-    rtcMemberships$.next([localRtcMember]);
+    remoteRtcMemberships$.next([]);
   });
   expect(playSound).toBeCalledWith("left");
 });
 
-test("does not play a sound before the call is successful", () => {
-  const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment(
-    [local, alice],
-    [localRtcMember],
-    { waitForCallPickup: true },
-  );
-  render(<CallEventAudioRenderer vm={vm} />);
-
-  act(() => {
-    rtcMemberships$.next([localRtcMember]);
-  });
-  expect(playSound).not.toBeCalledWith("left");
-});
-
 test("plays no sound when the participant list is more than the maximum size", () => {
-  const mockRtcMemberships: CallMembership[] = [localRtcMember];
+  const mockRtcMemberships: CallMembership[] = [];
   for (let i = 0; i < MAX_PARTICIPANT_COUNT_FOR_SOUND; i++) {
     mockRtcMemberships.push(
       mockRtcMembership(`@user${i}:example.org`, `DEVICE${i}`),
     );
   }
 
-  const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment(
+  const { vm, remoteRtcMemberships$ } = getBasicCallViewModelEnvironment(
     [local, alice],
     mockRtcMemberships,
   );
 
   render(<CallEventAudioRenderer vm={vm} />);
   expect(playSound).not.toBeCalled();
-  // Remove the last membership in the array to test the leaving sound
-  // (The array has length MAX_PARTICIPANT_COUNT_FOR_SOUND + 1)
   act(() => {
-    rtcMemberships$.next(
-      mockRtcMemberships.slice(0, MAX_PARTICIPANT_COUNT_FOR_SOUND),
+    remoteRtcMemberships$.next(
+      mockRtcMemberships.slice(0, MAX_PARTICIPANT_COUNT_FOR_SOUND - 1),
     );
   });
   expect(playSound).toBeCalledWith("left");
@@ -172,7 +155,6 @@ test("should not play a sound when a hand raise is retracted", () => {
   ]);
   render(<CallEventAudioRenderer vm={vm} />);
 
-  playSound.mockClear();
   act(() => {
     handRaisedSubject$.next({
       ["foo"]: {
@@ -187,7 +169,7 @@ test("should not play a sound when a hand raise is retracted", () => {
       },
     });
   });
-  expect(playSound).toHaveBeenCalledExactlyOnceWith("raiseHand");
+  expect(playSound).toHaveBeenCalledTimes(2);
   act(() => {
     handRaisedSubject$.next({
       ["foo"]: {
@@ -197,5 +179,5 @@ test("should not play a sound when a hand raise is retracted", () => {
       },
     });
   });
-  expect(playSound).toHaveBeenCalledExactlyOnceWith("raiseHand");
+  expect(playSound).toHaveBeenCalledTimes(2);
 });

src/room/CallEventAudioRenderer.tsx

@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode, useEffect } from "react";
+import { filter, interval, throttle } from "rxjs";
 
 import { type CallViewModel } from "../state/CallViewModel";
 import joinCallSoundMp3 from "../sound/join_call.mp3";
@@ -16,14 +17,15 @@ import handSoundOgg from "../sound/raise_hand.ogg";
 import handSoundMp3 from "../sound/raise_hand.mp3";
 import screenShareStartedOgg from "../sound/screen_share_started.ogg";
 import screenShareStartedMp3 from "../sound/screen_share_started.mp3";
-import declineMp3 from "../sound/call_declined.mp3?url";
-import declineOgg from "../sound/call_declined.ogg?url";
-import timeoutMp3 from "../sound/call_timeout.mp3?url";
-import timeoutOgg from "../sound/call_timeout.ogg?url";
 import { useAudioContext } from "../useAudioContext";
 import { prefetchSounds } from "../soundUtils";
 import { useLatest } from "../useLatest";
 
+// Do not play any sounds if the participant count has exceeded this
+// number.
+export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;
+export const THROTTLE_SOUND_EFFECT_MS = 500;
+
 export const callEventAudioSounds = prefetchSounds({
   join: {
     mp3: joinCallSoundMp3,
@@ -41,18 +43,8 @@ export const callEventAudioSounds = prefetchSounds({
     mp3: screenShareStartedMp3,
     ogg: screenShareStartedOgg,
   },
-  decline: {
-    mp3: declineMp3,
-    ogg: declineOgg,
-  },
-  timeout: {
-    mp3: timeoutMp3,
-    ogg: timeoutOgg,
-  },
 });
 
-export type CallEventSounds = keyof Awaited<typeof callEventAudioSounds>;
-
 export function CallEventAudioRenderer({
   vm,
   muted,
@@ -68,18 +60,37 @@ export function CallEventAudioRenderer({
   const audioEngineRef = useLatest(audioEngineCtx);
 
   useEffect(() => {
-    const joinSub = vm.joinSoundEffect$.subscribe(
-      () => void audioEngineRef.current?.playSound("join"),
-    );
-    const leftSub = vm.leaveSoundEffect$.subscribe(
-      () => void audioEngineRef.current?.playSound("left"),
-    );
-    const handRaisedSub = vm.newHandRaised$.subscribe(
-      () => void audioEngineRef.current?.playSound("raiseHand"),
-    );
-    const screenshareSub = vm.newScreenShare$.subscribe(
-      () => void audioEngineRef.current?.playSound("screenshareStarted"),
-    );
+    const joinSub = vm.memberChanges$
+      .pipe(
+        filter(
+          ({ joined, ids }) =>
+            ids.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND && joined.length > 0,
+        ),
+        throttle(() => interval(THROTTLE_SOUND_EFFECT_MS)),
+      )
+      .subscribe(() => {
+        void audioEngineRef.current?.playSound("join");
+      });
+
+    const leftSub = vm.memberChanges$
+      .pipe(
+        filter(
+          ({ ids, left }) =>
+            ids.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND && left.length > 0,
+        ),
+        throttle(() => interval(THROTTLE_SOUND_EFFECT_MS)),
+      )
+      .subscribe(() => {
+        void audioEngineRef.current?.playSound("left");
+      });
+
+    const handRaisedSub = vm.newHandRaised$.subscribe(() => {
+      void audioEngineRef.current?.playSound("raiseHand");
+    });
+
+    const screenshareSub = vm.newScreenShare$.subscribe(() => {
+      void audioEngineRef.current?.playSound("screenshareStarted");
+    });
 
     return (): void => {
       joinSub.unsubscribe();

src/room/EarpieceOverlay.module.css

@@ -34,6 +34,7 @@
 
 .overlay[data-show="false"] {
   animation: fade-out 130ms forwards;
+  content-visibility: hidden;
   pointer-events: none;
 }
 

src/room/EarpieceOverlay.tsx

@@ -20,7 +20,7 @@ interface Props {
 export const EarpieceOverlay: FC<Props> = ({ show, onBackToVideoPressed }) => {
   const { t } = useTranslation();
   return (
-    <div className={styles.overlay} data-show={show} aria-hidden={!show}>
+    <div className={styles.overlay} data-show={show}>
       <BigIcon className={styles.icon}>
         <VoiceCallIcon aria-hidden />
       </BigIcon>

src/room/GroupCallErrorBoundary.test.tsx

@@ -132,10 +132,9 @@ test("ConnectionLostError: Action handling should reset error state", async () =
   const WrapComponent = (): ReactNode => {
     const [failState, setFailState] = useState(true);
     const reconnectCallback = useCallback(
-      async (action: CallErrorRecoveryAction) => {
+      (action: CallErrorRecoveryAction) => {
         reconnectCallbackSpy(action);
         setFailState(false);
-        return Promise.resolve();
       },
       [setFailState],
     );

src/room/GroupCallErrorBoundary.tsx

@@ -21,7 +21,6 @@ import {
   OfflineIcon,
   WebBrowserIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { Button } from "@vector-im/compound-web";
 
 import {
   ConnectionLostError,
@@ -36,9 +35,7 @@ import { type WidgetHelpers } from "../widget.ts";
 
 export type CallErrorRecoveryAction = "reconnect"; // | "retry" ;
 
-export type RecoveryActionHandler = (
-  action: CallErrorRecoveryAction,
-) => Promise<void>;
+export type RecoveryActionHandler = (action: CallErrorRecoveryAction) => void;
 
 interface ErrorPageProps {
   error: ElementCallError;
@@ -73,7 +70,7 @@ const ErrorPage: FC<ErrorPageProps> = ({
   if (error instanceof ConnectionLostError) {
     actions.push({
       label: t("call_ended_view.reconnect_button"),
-      onClick: () => void recoveryActionHandler("reconnect"),
+      onClick: () => recoveryActionHandler("reconnect"),
     });
   }
 
@@ -96,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>
@@ -133,9 +126,9 @@ export const GroupCallErrorBoundary = ({
           widget={widget ?? null}
           error={callError}
           resetError={resetError}
-          recoveryActionHandler={async (action: CallErrorRecoveryAction) => {
-            await recoveryActionHandler(action);
+          recoveryActionHandler={(action: CallErrorRecoveryAction) => {
             resetError();
+            recoveryActionHandler(action);
           }}
         />
       );

src/room/GroupCallView.test.tsx

@@ -12,14 +12,10 @@ import {
   onTestFinished,
   test,
   vi,
-  vitest,
 } from "vitest";
-import { render, waitFor, screen, act } from "@testing-library/react";
+import { render, waitFor, screen } from "@testing-library/react";
 import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
-import {
-  MatrixRTCSessionEvent,
-  type MatrixRTCSession,
-} from "matrix-js-sdk/lib/matrixrtc";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
@@ -98,15 +94,13 @@ beforeEach(() => {
   playSound = vi.fn();
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vi.fn(),
-    soundDuration: {},
   });
   // A trivial implementation of Active call to ensure we are testing GroupCallView exclusively here.
   (ActiveCall as MockedFunction<typeof ActiveCall>).mockImplementation(
     ({ onLeave }) => {
       return (
         <div>
-          <button onClick={() => onLeave("user")}>Leave</button>
+          <button onClick={() => onLeave()}>Leave</button>
         </div>
       );
     },
@@ -143,9 +137,11 @@ function createGroupCallView(
       getJoinRule: () => JoinRule.Invite,
     } as Partial<RoomState> as RoomState,
   });
-  const rtcSession = new MockRTCSession(room, []).withMemberships(
-    constant([localRtcMember]),
-  );
+  const rtcSession = new MockRTCSession(
+    room,
+    localRtcMember,
+    [],
+  ).withMemberships(constant([]));
   rtcSession.joined = joined;
   const muteState = {
     audio: { enabled: false },
@@ -212,8 +208,6 @@ test("GroupCallView plays a leave sound synchronously in widget mode", async ()
     );
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vitest.fn(),
-    soundDuration: {},
   });
 
   const { getByText, rtcSession } = createGroupCallView(
@@ -266,19 +260,3 @@ test("GroupCallView shows errors that occur during joining", async () => {
   await user.click(screen.getByRole("button", { name: "Join call" }));
   screen.getByText("Call is not supported");
 });
-
-test("user can reconnect after a membership manager error", async () => {
-  const user = userEvent.setup();
-  const { rtcSession } = createGroupCallView(null, true);
-  await act(() =>
-    rtcSession.emit(MatrixRTCSessionEvent.MembershipManagerError, undefined),
-  );
-  // XXX: Wrapping the following click in act() shouldn't be necessary (the
-  // async state update should be processed automatically by the waitFor call),
-  // and yet here we are.
-  await act(async () =>
-    user.click(screen.getByRole("button", { name: "Reconnect" })),
-  );
-  // In-call controls should be visible again
-  await waitFor(() => screen.getByRole("button", { name: "Leave" }));
-});

src/room/GroupCallView.tsx

@@ -50,13 +50,10 @@ import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import { HeaderStyle, type UrlParams, useUrlParams } from "../UrlParams";
+import { HeaderStyle, useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useAudioContext } from "../useAudioContext";
-import {
-  callEventAudioSounds,
-  type CallEventSounds,
-} from "./CallEventAudioRenderer";
+import { callEventAudioSounds } from "./CallEventAudioRenderer";
 import { useLatest } from "../useLatest";
 import { usePageTitle } from "../usePageTitle";
 import {
@@ -86,8 +83,8 @@ interface Props {
   client: MatrixClient;
   isPasswordlessUser: boolean;
   confineToRoom: boolean;
-  preload: UrlParams["preload"];
-  skipLobby: UrlParams["skipLobby"];
+  preload: boolean;
+  skipLobby: boolean;
   header: HeaderStyle;
   rtcSession: MatrixRTCSession;
   isJoined: boolean;
@@ -169,11 +166,7 @@ export const GroupCallView: FC<Props> = ({
   const { displayName, avatarUrl } = useProfile(client);
   const roomName = useRoomName(room);
   const roomAvatar = useRoomAvatar(room);
-  const {
-    perParticipantE2EE,
-    returnToLobby,
-    password: passwordFromUrl,
-  } = useUrlParams();
+  const { perParticipantE2EE, returnToLobby } = useUrlParams();
   const e2eeSystem = useRoomEncryptionSystem(room.roomId);
   const [useNewMembershipManager] = useSetting(useNewMembershipManagerSetting);
   const [useExperimentalToDeviceTransport] = useSetting(
@@ -181,6 +174,7 @@ export const GroupCallView: FC<Props> = ({
   );
 
   // Save the password once we start the groupCallView
+  const { password: passwordFromUrl } = useUrlParams();
   useEffect(() => {
     if (passwordFromUrl) saveKeyForRoom(room.roomId, passwordFromUrl);
   }, [passwordFromUrl, room.roomId]);
@@ -279,28 +273,34 @@ export const GroupCallView: FC<Props> = ({
     };
 
     if (skipLobby) {
-      if (widget && preload) {
-        // In preload mode without lobby we wait for a join action before entering
-        const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
+      if (widget) {
+        if (preload) {
+          // In preload mode without lobby we wait for a join action before entering
+          const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
+            (async (): Promise<void> => {
+              await defaultDeviceSetup(
+                ev.detail.data as unknown as JoinCallData,
+              );
+              await enterRTCSessionOrError(rtcSession);
+              widget.api.transport.reply(ev.detail, {});
+            })().catch((e) => {
+              logger.error("Error joining RTC session", e);
+            });
+          };
+          widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
+          return (): void => {
+            widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
+          };
+        } else {
+          // No lobby and no preload: we enter the rtc session right away
           (async (): Promise<void> => {
-            await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
             await enterRTCSessionOrError(rtcSession);
-            widget.api.transport.reply(ev.detail, {});
           })().catch((e) => {
-            logger.error("Error joining RTC session on preload", e);
+            logger.error("Error joining RTC session", e);
           });
-        };
-        widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
-        return (): void => {
-          widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
-        };
+        }
       } else {
-        // No lobby and no preload: we enter the rtc session right away
-        (async (): Promise<void> => {
-          await enterRTCSessionOrError(rtcSession);
-        })().catch((e) => {
-          logger.error("Error joining RTC session immediately", e);
-        });
+        void enterRTCSessionOrError(rtcSession);
       }
     }
   }, [
@@ -320,11 +320,8 @@ export const GroupCallView: FC<Props> = ({
   const navigate = useNavigate();
 
   const onLeave = useCallback(
-    (
-      cause: "user" | "error" = "user",
-      playSound: CallEventSounds = "left",
-    ): void => {
-      const audioPromise = leaveSoundContext.current?.playSound(playSound);
+    (cause: "user" | "error" = "user"): void => {
+      const audioPromise = leaveSoundContext.current?.playSound("left");
       // In embedded/widget mode the iFrame will be killed right after the call ended prohibiting the posthog event from getting sent,
       // therefore we want the event to be sent instantly without getting queued/batched.
       const sendInstantly = !!widget;
@@ -452,7 +449,7 @@ export const GroupCallView: FC<Props> = ({
           client={client}
           matrixInfo={matrixInfo}
           rtcSession={rtcSession as MatrixRTCSession}
-          matrixRoom={room}
+          participantCount={participantCount}
           onLeave={onLeave}
           header={header}
           muteStates={muteStates}
@@ -494,7 +491,6 @@ export const GroupCallView: FC<Props> = ({
     // Left in widget mode:
     body = returnToLobby ? lobbyView : null;
   } else if (preload || skipLobby) {
-    // The RTC session is not joined to yet (`isJoined`), but enterRTCSessionOrError should have been called.
     body = null;
   } else {
     body = lobbyView;
@@ -503,11 +499,10 @@ export const GroupCallView: FC<Props> = ({
   return (
     <GroupCallErrorBoundary
       widget={widget}
-      recoveryActionHandler={async (action) => {
-        setExternalError(null);
+      recoveryActionHandler={(action) => {
         if (action == "reconnect") {
           setLeft(false);
-          await enterRTCSessionOrError(rtcSession).catch((e) => {
+          enterRTCSessionOrError(rtcSession).catch((e) => {
             logger.error("Error re-entering RTC session", e);
           });
         }

src/room/InCallView.module.css

@@ -108,6 +108,14 @@ Please see LICENSE in the repository root for full details.
 }
 
 @media (max-width: 370px) {
+  .raiseHand {
+    display: none;
+  }
+}
+
+@media (max-width: 340px) {
+  .invite,
+  .switchCamera,
   .shareScreen {
     display: none;
   }
@@ -119,13 +127,6 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
-@media (max-width: 320px) {
-  .invite,
-  .raiseHand {
-    display: none;
-  }
-}
-
 @media (max-height: 400px) {
   .footer {
     padding-block: var(--cpd-space-4x);

src/room/InCallView.test.tsx

@@ -17,7 +17,7 @@ import { act, render, type RenderResult } from "@testing-library/react";
 import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
-import { type LocalParticipant } from "livekit-client";
+import { ConnectionState, type LocalParticipant } from "livekit-client";
 import { of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -175,11 +175,12 @@ function createInCallView(): RenderResult & {
                     kind: E2eeType.NONE,
                   },
                 }}
-                matrixRoom={room}
                 livekitRoom={livekitRoom}
+                participantCount={0}
                 onLeave={function (): void {
                   throw new Error("Function not implemented.");
                 }}
+                connState={ConnectionState.Connected}
                 onShareClick={null}
               />
             </RoomContext>

src/room/InCallView.tsx

@@ -7,8 +7,8 @@ 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 { ConnectionState, type Room as LivekitRoom } from "livekit-client";
-import { type MatrixClient, type Room as MatrixRoom } from "matrix-js-sdk";
+import { ConnectionState, type Room } from "livekit-client";
+import { type MatrixClient } from "matrix-js-sdk";
 import {
   type FC,
   type PointerEvent,
@@ -25,11 +25,7 @@ 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,
-  useObservableEagerState,
-  useSubscription,
-} from "observable-hooks";
+import { useObservable } from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
 import {
@@ -48,6 +44,7 @@ import {
   ShareScreenButton,
   SettingsButton,
   ReactionToggleButton,
+  SwitchCameraButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { type HeaderStyle, useUrlParams } from "../UrlParams";
@@ -66,6 +63,7 @@ import { type MuteStates } from "./MuteStates";
 import { type MatrixInfo } from "./VideoPreview";
 import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
+import { type ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
 import {
   CallViewModel,
@@ -96,11 +94,9 @@ import {
   useReactionsSender,
 } from "../reactions/useReactionsSender";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
+import { useSwitchCamera } from "./useSwitchCamera";
 import { ReactionsOverlay } from "./ReactionsOverlay";
-import {
-  CallEventAudioRenderer,
-  type CallEventSounds,
-} from "./CallEventAudioRenderer";
+import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
 import {
   debugTileLayout as debugTileLayoutSetting,
   useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
@@ -117,14 +113,6 @@ import { useMediaDevices } from "../MediaDevicesContext.ts";
 import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
 import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
-import { Toast } from "../Toast.tsx";
-import overlayStyles from "../Overlay.module.css";
-import { Avatar, Size as AvatarSize } from "../Avatar";
-import waitingStyles from "./WaitingForJoin.module.css";
-import { prefetchSounds } from "../soundUtils";
-import { useAudioContext } from "../useAudioContext";
-import ringtoneMp3 from "../sound/ringtone.mp3?url";
-import ringtoneOgg from "../sound/ringtone.ogg?url";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -152,11 +140,11 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
 
   useEffect(() => {
     logger.info(
-      `[Lifecycle] InCallView Component mounted, livekit room state ${livekitRoom?.state}`,
+      `[Lifecycle] InCallView Component mounted, livekitroom state ${livekitRoom?.state}`,
     );
     return (): void => {
       logger.info(
-        `[Lifecycle] InCallView Component unmounted, livekit room state ${livekitRoom?.state}`,
+        `[Lifecycle] InCallView Component unmounted, livekitroom state ${livekitRoom?.state}`,
       );
       livekitRoom
         ?.disconnect()
@@ -171,23 +159,14 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     };
   }, [livekitRoom]);
 
-  const { autoLeaveWhenOthersLeft, sendNotificationType, waitForCallPickup } =
-    useUrlParams();
-
   useEffect(() => {
     if (livekitRoom !== undefined) {
       const reactionsReader = new ReactionsReader(props.rtcSession);
       const vm = new CallViewModel(
         props.rtcSession,
-        props.matrixRoom,
         livekitRoom,
         mediaDevices,
-        {
-          encryptionSystem: props.e2eeSystem,
-          autoLeaveWhenOthersLeft,
-          waitForCallPickup:
-            waitForCallPickup && sendNotificationType === "ring",
-        },
+        props.e2eeSystem,
         connStateObservable$,
         reactionsReader.raisedHands$,
         reactionsReader.reactions$,
@@ -200,14 +179,10 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     }
   }, [
     props.rtcSession,
-    props.matrixRoom,
     livekitRoom,
     mediaDevices,
     props.e2eeSystem,
     connStateObservable$,
-    autoLeaveWhenOthersLeft,
-    sendNotificationType,
-    waitForCallPickup,
   ]);
 
   if (livekitRoom === undefined || vm === null) return null;
@@ -215,7 +190,12 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   return (
     <RoomContext value={livekitRoom}>
       <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
-        <InCallView {...props} vm={vm} livekitRoom={livekitRoom} />
+        <InCallView
+          {...props}
+          vm={vm}
+          livekitRoom={livekitRoom}
+          connState={connState}
+        />
       </ReactionsSenderProvider>
     </RoomContext>
   );
@@ -226,13 +206,14 @@ export interface InCallViewProps {
   vm: CallViewModel;
   matrixInfo: MatrixInfo;
   rtcSession: MatrixRTCSession;
-  matrixRoom: MatrixRoom;
-  livekitRoom: LivekitRoom;
+  livekitRoom: Room;
   muteStates: MuteStates;
+  participantCount: number;
   /** Function to call when the user explicitly ends the call */
-  onLeave: (cause: "user", soundFile?: CallEventSounds) => void;
+  onLeave: () => void;
   header: HeaderStyle;
   otelGroupCallMembership?: OTelGroupCallMembership;
+  connState: ECConnectionState;
   onShareClick: (() => void) | null;
 }
 
@@ -241,11 +222,12 @@ export const InCallView: FC<InCallViewProps> = ({
   vm,
   matrixInfo,
   rtcSession,
-  matrixRoom,
   livekitRoom,
   muteStates,
+  participantCount,
   onLeave,
   header: headerStyle,
+  connState,
   onShareClick,
 }) => {
   const { t } = useTranslation();
@@ -253,11 +235,10 @@ export const InCallView: FC<InCallViewProps> = ({
     useReactionsSender();
 
   useWakeLock();
-  const connectionState = useObservableEagerState(vm.livekitConnectionState$);
 
   // annoyingly we don't get the disconnection reason this way,
   // only by listening for the emitted event
-  if (connectionState === ConnectionState.Disconnected)
+  if (connState === ConnectionState.Disconnected)
     throw new ConnectionLostError();
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
@@ -272,21 +253,6 @@ export const InCallView: FC<InCallViewProps> = ({
   });
 
   const muteAllAudio = useBehavior(muteAllAudio$);
-  // Call pickup state and display names are needed for waiting overlay/sounds
-  const callPickupState = useBehavior(vm.callPickupState$);
-
-  // Preload a waiting and decline sounds
-  const pickupPhaseSoundCache = useInitial(async () => {
-    return prefetchSounds({
-      waiting: { mp3: ringtoneMp3, ogg: ringtoneOgg },
-    });
-  });
-
-  const pickupPhaseAudio = useAudioContext({
-    sounds: pickupPhaseSoundCache,
-    latencyHint: "interactive",
-    muted: muteAllAudio,
-  });
 
   // This seems like it might be enough logic to use move it into the call view model?
   const [didFallbackToRoomKey, setDidFallbackToRoomKey] = useState(false);
@@ -300,7 +266,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const [useExperimentalToDeviceTransport] = useSetting(
     useExperimentalToDeviceTransportSetting,
   );
-  const encryptionSystem = useRoomEncryptionSystem(matrixRoom.roomId);
+  const encryptionSystem = useRoomEncryptionSystem(rtcSession.room.roomId);
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
 
   const showToDeviceEncryption = useMemo(
@@ -337,8 +303,6 @@ export const InCallView: FC<InCallViewProps> = ({
     () => void toggleRaisedHand(),
   );
 
-  const participantCount = useBehavior(vm.participantCount$);
-  const reconnecting = useBehavior(vm.reconnecting$);
   const windowMode = useBehavior(vm.windowMode$);
   const layout = useBehavior(vm.layout$);
   const tileStoreGeneration = useBehavior(vm.tileStoreGeneration$);
@@ -348,90 +312,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const showFooter = useBehavior(vm.showFooter$);
   const earpieceMode = useBehavior(vm.earpieceMode$);
   const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
-  useSubscription(vm.autoLeave$, () => onLeave("user"));
-
-  // We need to set the proper timings on the animation based upon the sound length.
-  const ringDuration = pickupPhaseAudio?.soundDuration["waiting"] ?? 1;
-  useEffect((): (() => void) => {
-    // The CSS animation includes the delay, so we must double the length of the sound.
-    window.document.body.style.setProperty(
-      "--call-ring-duration-s",
-      `${ringDuration * 2}s`,
-    );
-    window.document.body.style.setProperty(
-      "--call-ring-delay-s",
-      `${ringDuration}s`,
-    );
-    // Remove properties when we unload.
-    return () => {
-      window.document.body.style.removeProperty("--call-ring-duration-s");
-      window.document.body.style.removeProperty("--call-ring-delay-s");
-    };
-  }, [pickupPhaseAudio?.soundDuration, ringDuration]);
-
-  // When we enter timeout or decline we will leave the call.
-  useEffect((): void | (() => void) => {
-    if (callPickupState === "timeout") {
-      onLeave("user", "timeout");
-    }
-    if (callPickupState === "decline") {
-      onLeave("user", "decline");
-    }
-  }, [callPickupState, onLeave, pickupPhaseAudio]);
-
-  // When waiting for pickup, loop a waiting sound
-  useEffect((): void | (() => void) => {
-    if (callPickupState !== "ringing" || !pickupPhaseAudio) return;
-    const endSound = pickupPhaseAudio.playSoundLooping("waiting", ringDuration);
-    return () => {
-      void endSound().catch((e) => {
-        logger.error("Failed to stop ringing sound", e);
-      });
-    };
-  }, [callPickupState, pickupPhaseAudio, ringDuration]);
-
-  // Waiting UI overlay
-  const waitingOverlay: JSX.Element | null = useMemo(() => {
-    // No overlay if not in ringing state
-    if (callPickupState !== "ringing") return null;
-
-    // Use room state for other participants data (the one that we likely want to reach)
-    const roomOthers = [
-      ...matrixRoom.getMembersWithMembership("join"),
-      ...matrixRoom.getMembersWithMembership("invite"),
-    ].filter((m) => m.userId !== client.getUserId());
-    // Yield if there are not other members in the room.
-    if (roomOthers.length === 0) return null;
-
-    const otherMember = roomOthers.length > 0 ? roomOthers[0] : undefined;
-    const isOneOnOne = roomOthers.length === 1 && otherMember;
-    const text = isOneOnOne
-      ? `Waiting for ${otherMember.name ?? otherMember.userId} to join…`
-      : "Waiting for other participants…";
-    const avatarMxc = isOneOnOne
-      ? (otherMember.getMxcAvatarUrl?.() ?? undefined)
-      : (matrixRoom.getMxcAvatarUrl() ?? undefined);
-
-    return (
-      <div className={classNames(overlayStyles.bg, waitingStyles.overlay)}>
-        <div
-          className={classNames(overlayStyles.content, waitingStyles.content)}
-        >
-          <div className={waitingStyles.pulse}>
-            <Avatar
-              id={isOneOnOne ? otherMember.userId : matrixRoom.roomId}
-              name={isOneOnOne ? otherMember.name : matrixRoom.name}
-              src={avatarMxc}
-              size={AvatarSize.XL}
-            />
-          </div>
-          <Text size="md" className={waitingStyles.text}>
-            {text}
-          </Text>
-        </div>
-      </div>
-    );
-  }, [callPickupState, client, matrixRoom]);
+  const switchCamera = useSwitchCamera(vm.localVideo$);
 
   // Ideally we could detect taps by listening for click events and checking
   // that the pointerType of the event is "touch", but this isn't yet supported
@@ -614,11 +495,7 @@ export const InCallView: FC<InCallViewProps> = ({
         break;
       case "standard":
         header = (
-          <Header
-            className={styles.header}
-            ref={headerRef}
-            disconnectedBanner={false} // This screen has its own 'reconnecting' toast
-          >
+          <Header className={styles.header} ref={headerRef}>
             <LeftNav>
               <RoomHeaderInfo
                 id={matrixInfo.roomId}
@@ -641,38 +518,6 @@ export const InCallView: FC<InCallViewProps> = ({
     }
   }
 
-  // The reconnecting toast cannot be dismissed
-  const onDismissReconnectingToast = useCallback(() => {}, []);
-  // We need to use a non-modal toast to avoid trapping focus within the toast.
-  // However, a non-modal toast will not render any background overlay on its
-  // own, so we must render one manually.
-  const reconnectingToast = (
-    <>
-      <div
-        className={classNames(overlayStyles.bg, overlayStyles.animate)}
-        data-state={reconnecting ? "open" : "closed"}
-      />
-      <Toast
-        onDismiss={onDismissReconnectingToast}
-        open={reconnecting}
-        modal={false}
-      >
-        {t("common.reconnecting")}
-      </Toast>
-    </>
-  );
-
-  const earpieceOverlay = (
-    <EarpieceOverlay
-      show={earpieceMode && !reconnecting}
-      onBackToVideoPressed={audioOutputSwitcher?.switch}
-    />
-  );
-
-  // If the reconnecting toast or earpiece overlay obscures the media tiles, we
-  // need to remove them from the accessibility tree and block focus.
-  const contentObscured = reconnecting || earpieceMode;
-
   const Tile = useMemo(
     () =>
       function Tile({
@@ -702,7 +547,6 @@ export const InCallView: FC<InCallViewProps> = ({
             className={classNames(className, styles.tile)}
             style={style}
             showSpeakingIndicators={showSpeakingIndicatorsValue}
-            focusable={!contentObscured}
           />
         ) : (
           <SpotlightTile
@@ -713,13 +557,12 @@ export const InCallView: FC<InCallViewProps> = ({
             targetWidth={targetWidth}
             targetHeight={targetHeight}
             showIndicators={showSpotlightIndicatorsValue}
-            focusable={!contentObscured}
             className={classNames(className, styles.tile)}
             style={style}
           />
         );
       },
-    [vm, openProfile, contentObscured],
+    [vm, openProfile],
   );
 
   const layouts = useMemo(() => {
@@ -748,8 +591,6 @@ export const InCallView: FC<InCallViewProps> = ({
           targetWidth={gridBounds.height}
           targetHeight={gridBounds.width}
           showIndicators={false}
-          focusable={!contentObscured}
-          aria-hidden={contentObscured}
         />
       );
     }
@@ -767,7 +608,6 @@ export const InCallView: FC<InCallViewProps> = ({
         model={layout}
         Layout={layers.fixed}
         Tile={Tile}
-        aria-hidden={contentObscured}
       />
     );
     const scrollingGrid = (
@@ -777,7 +617,6 @@ export const InCallView: FC<InCallViewProps> = ({
         model={layout}
         Layout={layers.scrolling}
         Tile={Tile}
-        aria-hidden={contentObscured}
       />
     );
     // The grid tiles go *under* the spotlight in the portrait layout, but
@@ -796,7 +635,7 @@ export const InCallView: FC<InCallViewProps> = ({
   };
 
   const rageshakeRequestModalProps = useRageshakeRequestModal(
-    matrixRoom.roomId,
+    rtcSession.room.roomId,
   );
 
   const toggleScreensharing = useCallback(() => {
@@ -830,6 +669,15 @@ export const InCallView: FC<InCallViewProps> = ({
       data-testid="incall_videomute"
     />,
   );
+  if (switchCamera !== null)
+    buttons.push(
+      <SwitchCameraButton
+        key="switch_camera"
+        className={styles.switchCamera}
+        onClick={switchCamera}
+        onTouchEnd={onControlsTouchEnd}
+      />,
+    );
   if (canScreenshare && !hideScreensharing) {
     buttons.push(
       <ShareScreenButton
@@ -866,7 +714,7 @@ export const InCallView: FC<InCallViewProps> = ({
     <EndCallButton
       key="end_call"
       onClick={function (): void {
-        onLeave("user");
+        onLeave();
       }}
       onTouchEnd={onControlsTouchEnd}
       data-testid="incall_leave"
@@ -934,17 +782,18 @@ export const InCallView: FC<InCallViewProps> = ({
       {renderContent()}
       <CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
-      {reconnectingToast}
-      {earpieceOverlay}
+      <EarpieceOverlay
+        show={earpieceMode}
+        onBackToVideoPressed={audioOutputSwitcher?.switch}
+      />
       <ReactionsOverlay vm={vm} />
-      {waitingOverlay}
       {footer}
       {layout.type !== "pip" && (
         <>
           <RageshakeRequestModal {...rageshakeRequestModalProps} />
           <SettingsModal
             client={client}
-            roomId={matrixRoom.roomId}
+            roomId={rtcSession.room.roomId}
             open={settingsModalOpen}
             onDismiss={closeSettings}
             tab={settingsTab}

src/room/LobbyView.tsx

@@ -24,7 +24,8 @@ import {
   type LocalVideoTrack,
   Track,
 } from "livekit-client";
-import { useObservableEagerState } from "observable-hooks";
+import { useObservable, useObservableEagerState } from "observable-hooks";
+import { map } from "rxjs";
 import { useNavigate } from "react-router-dom";
 
 import inCallStyles from "./InCallView.module.css";
@@ -37,6 +38,7 @@ import {
   EndCallButton,
   MicButton,
   SettingsButton,
+  SwitchCameraButton,
   VideoButton,
 } from "../button/Button";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -45,6 +47,7 @@ import { E2eeType } from "../e2ee/e2eeType";
 import { Link } from "../button/Link";
 import { useMediaDevices } from "../MediaDevicesContext";
 import { useInitial } from "../useInitial";
+import { useSwitchCamera as useShowSwitchCamera } from "./useSwitchCamera";
 import {
   useTrackProcessor,
   useTrackProcessorSync,
@@ -192,6 +195,12 @@ export const LobbyView: FC<Props> = ({
   }, [devices, videoInputId, videoTrack]);
 
   useTrackProcessorSync(videoTrack);
+  const showSwitchCamera = useShowSwitchCamera(
+    useObservable(
+      (inputs$) => inputs$.pipe(map(([video]) => video)),
+      [videoTrack],
+    ),
+  );
 
   // TODO: Unify this component with InCallView, so we can get slick joining
   // animations and don't have to feel bad about reusing its CSS
@@ -248,6 +257,9 @@ export const LobbyView: FC<Props> = ({
               onClick={onVideoPress}
               disabled={muteStates.video.setEnabled === null}
             />
+            {showSwitchCamera && (
+              <SwitchCameraButton onClick={showSwitchCamera} />
+            )}
             <SettingsButton onClick={openSettings} />
             {!confineToRoom && <EndCallButton onClick={onLeaveClick} />}
           </div>

src/room/MuteStates.test.tsx

@@ -8,7 +8,6 @@ Please see LICENSE in the repository root for full details.
 import {
   afterAll,
   afterEach,
-  beforeEach,
   describe,
   expect,
   it,
@@ -27,6 +26,7 @@ import { MediaDevicesContext } from "../MediaDevicesContext";
 import { mockConfig } from "../utils/test";
 import { MediaDevices } from "../state/MediaDevices";
 import { ObservableScope } from "../state/ObservableScope";
+
 vi.mock("@livekit/components-core");
 
 interface TestComponentProps {
@@ -110,10 +110,9 @@ function mockMediaDevices(
   return new MediaDevices(scope);
 }
 
-describe("useMuteStates VITE_PACKAGE='full' (SPA) mode", () => {
+describe("useMuteStates", () => {
   afterEach(() => {
     vi.clearAllMocks();
-    vi.stubEnv("VITE_PACKAGE", "full");
   });
 
   afterAll(() => {
@@ -192,11 +191,7 @@ describe("useMuteStates VITE_PACKAGE='full' (SPA) mode", () => {
     mockConfig();
 
     render(
-      <MemoryRouter
-        initialEntries={[
-          "/room/?skipLobby=true&widgetId=1234&parentUrl=www.parent.org",
-        ]}
-      >
+      <MemoryRouter initialEntries={["/room/?skipLobby=true"]}>
         <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent />
         </MediaDevicesContext>
@@ -257,67 +252,3 @@ describe("useMuteStates VITE_PACKAGE='full' (SPA) mode", () => {
     expect(screen.getByTestId("video-enabled").textContent).toBe("true");
   });
 });
-
-describe("useMuteStates in VITE_PACKAGE='embedded' (widget) mode", () => {
-  beforeEach(() => {
-    vi.stubEnv("VITE_PACKAGE", "embedded");
-  });
-
-  it("uses defaults from config", () => {
-    mockConfig({
-      media_devices: {
-        enable_audio: false,
-        enable_video: false,
-      },
-    });
-
-    render(
-      <MemoryRouter>
-        <MediaDevicesContext value={mockMediaDevices()}>
-          <TestComponent />
-        </MediaDevicesContext>
-      </MemoryRouter>,
-    );
-    expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
-    expect(screen.getByTestId("video-enabled").textContent).toBe("false");
-  });
-
-  it("skipLobby does not mute inputs", () => {
-    mockConfig();
-
-    render(
-      <MemoryRouter
-        initialEntries={[
-          "/room/?skipLobby=true&widgetId=1234&parentUrl=www.parent.org",
-        ]}
-      >
-        <MediaDevicesContext value={mockMediaDevices()}>
-          <TestComponent />
-        </MediaDevicesContext>
-      </MemoryRouter>,
-    );
-    expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
-    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
-  });
-
-  it("url params win over config", () => {
-    // The config sets audio and video to disabled
-    mockConfig({ media_devices: { enable_audio: false, enable_video: false } });
-
-    render(
-      <MemoryRouter
-        initialEntries={[
-          // The Intent sets both audio and video enabled to true via the url param configuration
-          "/room/?intent=start_call_dm&widgetId=1234&parentUrl=www.parent.org",
-        ]}
-      >
-        <MediaDevicesContext value={mockMediaDevices()}>
-          <TestComponent />
-        </MediaDevicesContext>
-      </MemoryRouter>,
-    );
-    // At the end we expect the url param to take precedence, resulting in true
-    expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
-    expect(screen.getByTestId("video-enabled").textContent).toBe("true");
-  });
-});

src/room/MuteStates.ts

@@ -81,15 +81,11 @@ function useMuteState(
 export function useMuteStates(isJoined: boolean): MuteStates {
   const devices = useMediaDevices();
 
-  const { skipLobby, defaultAudioEnabled, defaultVideoEnabled } =
-    useUrlParams();
+  const { skipLobby } = useUrlParams();
 
-  const audio = useMuteState(
-    devices.audioInput,
-    () =>
-      (defaultAudioEnabled ?? Config.get().media_devices.enable_audio) &&
-      allowJoinUnmuted(skipLobby, isJoined),
-  );
+  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.
@@ -101,9 +97,7 @@ export function useMuteStates(isJoined: boolean): MuteStates {
   const isEarpiece = useIsEarpiece();
   const video = useMuteState(
     devices.videoInput,
-    () =>
-      (defaultVideoEnabled ?? Config.get().media_devices.enable_video) &&
-      allowJoinUnmuted(skipLobby, isJoined),
+    () => Config.get().media_devices.enable_video && !skipLobby && !isJoined,
     isEarpiece, // Force video to be unavailable if using earpiece
   );
 
@@ -170,9 +164,3 @@ export function useMuteStates(isJoined: boolean): MuteStates {
 
   return useMemo(() => ({ audio, video }), [audio, video]);
 }
-
-function allowJoinUnmuted(skipLobby: boolean, isJoined: boolean): boolean {
-  return (
-    (!skipLobby && !isJoined) || import.meta.env.VITE_PACKAGE === "embedded"
-  );
-}

src/room/ReactionAudioRenderer.test.tsx

@@ -69,8 +69,6 @@ beforeEach(() => {
   playSound = vitest.fn();
   (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
     playSound,
-    playSoundLooping: vitest.fn(),
-    soundDuration: {},
   });
 });
 

src/room/WaitingForJoin.module.css

@@ -1,61 +0,0 @@
-.overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-}
-
-.pulse {
-  position: relative;
-  height: 90px;
-}
-
-.pulse::before {
-  content: "";
-  position: absolute;
-  inset: -12px;
-  border-radius: 9999px;
-  border: 12px solid rgba(255, 255, 255, 0.6);
-  animation: pulse var(--call-ring-duration-s) ease-out infinite;
-  animation-delay: 1s;
-  opacity: 0;
-}
-
-.text {
-  color: var(--cpd-color-text-on-solid-primary);
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(0.95);
-    opacity: 0.7;
-    transform: scale(0);
-    opacity: 1;
-  }
-  35% {
-    transform: scale(1.15);
-    opacity: 0.15;
-  }
-  50% {
-    transform: scale(1.2);
-    opacity: 0;
-  }
-  50.01% {
-    transform: scale(0);
-  }
-  85% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(0);
-  }
-}

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

@@ -132,13 +132,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
           <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
@@ -748,13 +742,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
           <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

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

@@ -49,34 +49,6 @@ exports[`InCallView > rendering > renders 1`] = `
               </svg>
             </span>
           </div>
-          <div
-            class="participantsLine"
-          >
-            <svg
-              aria-label="Participants"
-              fill="currentColor"
-              height="20"
-              viewBox="0 0 24 24"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
-              />
-              <path
-                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
-              />
-              <path
-                d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
-              />
-            </svg>
-            <span
-              class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
-              data-testid="roomHeader_participants_count"
-            >
-              2
-            </span>
-          </div>
         </div>
       </div>
       <div
@@ -111,11 +83,6 @@ exports[`InCallView > rendering > renders 1`] = `
       <div />
     </div>
     <div
-      class="bg animate"
-      data-state="closed"
-    />
-    <div
-      aria-hidden="true"
       class="overlay"
       data-show="false"
     >
@@ -289,7 +256,7 @@ exports[`InCallView > rendering > renders 1`] = `
       >
         <button
           aria-disabled="false"
-          aria-labelledby="«r8»"
+          aria-labelledby="«r5»"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
@@ -312,7 +279,7 @@ exports[`InCallView > rendering > renders 1`] = `
         </button>
         <button
           aria-disabled="false"
-          aria-labelledby="«rd»"
+          aria-labelledby="«ra»"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
@@ -334,7 +301,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby="«ri»"
+          aria-labelledby="«rf»"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="secondary"
           data-size="lg"
@@ -355,7 +322,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby="«rn»"
+          aria-labelledby="«rk»"
           class="_button_vczzf_8 endCall _has-icon_vczzf_57 _icon-only_vczzf_50 _destructive_vczzf_107"
           data-kind="primary"
           data-size="lg"
@@ -381,7 +348,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="toggle layout"
       >
         <input
-          aria-labelledby="«rs»"
+          aria-labelledby="«rp»"
           name="layout"
           type="radio"
           value="spotlight"
@@ -399,7 +366,7 @@ exports[`InCallView > rendering > renders 1`] = `
           />
         </svg>
         <input
-          aria-labelledby="«r11»"
+          aria-labelledby="«ru»"
           checked=""
           name="layout"
           type="radio"

src/room/useSwitchCamera.ts

@@ -0,0 +1,93 @@
+/*
+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 {
+  fromEvent,
+  map,
+  merge,
+  type Observable,
+  of,
+  startWith,
+  switchMap,
+} from "rxjs";
+import {
+  facingModeFromLocalTrack,
+  type LocalVideoTrack,
+  TrackEvent,
+} from "livekit-client";
+import { useObservable, useObservableEagerState } from "observable-hooks";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import { useMediaDevices } from "../MediaDevicesContext";
+import { platform } from "../Platform";
+import { useLatest } from "../useLatest";
+
+/**
+ * Determines whether the user should be shown a button to switch their camera,
+ * producing a callback if so.
+ */
+export function useSwitchCamera(
+  video$: Observable<LocalVideoTrack | null>,
+): (() => void) | null {
+  const mediaDevices = useMediaDevices();
+  const setVideoInput = useLatest(mediaDevices.videoInput.select);
+
+  // Produce an observable like the input 'video' observable, except make it
+  // emit whenever the track is muted or the device changes
+  const videoTrack$: Observable<LocalVideoTrack | null> = useObservable(
+    (inputs$) =>
+      inputs$.pipe(
+        switchMap(([video$]) => video$),
+        switchMap((video) => {
+          if (video === null) return of(null);
+          return merge(
+            fromEvent(video, TrackEvent.Restarted).pipe(
+              startWith(null),
+              map(() => video),
+            ),
+            fromEvent(video, TrackEvent.Muted).pipe(map(() => null)),
+          );
+        }),
+      ),
+    [video$],
+  );
+
+  const switchCamera$: Observable<(() => void) | null> = useObservable(
+    (inputs$) =>
+      platform === "desktop"
+        ? of(null)
+        : inputs$.pipe(
+            switchMap(([track$]) => track$),
+            map((track) => {
+              if (track === null) return null;
+              const facingMode = facingModeFromLocalTrack(track).facingMode;
+              // If the camera isn't front or back-facing, don't provide a switch
+              // camera shortcut at all
+              if (facingMode !== "user" && facingMode !== "environment")
+                return null;
+              // Restart the track with a camera facing the opposite direction
+              return (): void =>
+                void track
+                  .restartTrack({
+                    facingMode: facingMode === "user" ? "environment" : "user",
+                  })
+                  .then(() => {
+                    // Inform the MediaDeviceContext which camera was chosen
+                    const deviceId =
+                      track.mediaStreamTrack.getSettings().deviceId;
+                    if (deviceId !== undefined) setVideoInput.current(deviceId);
+                  })
+                  .catch((e) =>
+                    logger.error("Failed to switch camera", facingMode, e),
+                  );
+            }),
+          ),
+    [videoTrack$],
+  );
+
+  return useObservableEagerState(switchCamera$);
+}

src/rtcSessionHelpers.test.ts

@@ -70,12 +70,6 @@ test("It joins the correct Session", async () => {
       roomId: "roomId",
       client: {
         getDomain: vi.fn().mockReturnValue("example.org"),
-        getOpenIdToken: vi.fn().mockResolvedValue({
-          access_token: "ACCCESS_TOKEN",
-          token_type: "Bearer",
-          matrix_server_name: "localhost",
-          expires_in: 10000,
-        }),
       },
     },
     memberships: [],
@@ -201,12 +195,6 @@ test("It should not fail with configuration error if homeserver config has livek
       roomId: "roomId",
       client: {
         getDomain: vi.fn().mockReturnValue("example.org"),
-        getOpenIdToken: vi.fn().mockResolvedValue({
-          access_token: "ACCCESS_TOKEN",
-          token_type: "Bearer",
-          matrix_server_name: "localhost",
-          expires_in: 10000,
-        }),
       },
     },
     memberships: [],

src/rtcSessionHelpers.ts

@@ -5,14 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
+import { logger } from "matrix-js-sdk/lib/logger";
 import {
   isLivekitFocus,
   isLivekitFocusConfig,
   type LivekitFocus,
   type LivekitFocusActive,
-  type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { logger } from "matrix-js-sdk/lib/logger";
 import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
 
 import { PosthogAnalytics } from "./analytics/PosthogAnalytics";
@@ -20,7 +20,6 @@ import { Config } from "./config/Config";
 import { ElementWidgetActions, widget, type WidgetHelpers } from "./widget";
 import { MatrixRTCFocusMissingError } from "./utils/errors";
 import { getUrlParams } from "./UrlParams";
-import { getSFUConfigWithOpenID } from "./livekit/openIDSFU.ts";
 
 const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
 
@@ -47,9 +46,6 @@ async function makePreferredLivekitFoci(
     preferredFoci.push(focusInUse);
   }
 
-  // Warm up the first focus we owned, to ensure livekit room is created before any state event sent.
-  let toWarmUp: LivekitFocus | undefined;
-
   // Prioritize the .well-known/matrix/client, if available, over the configured SFU
   const domain = rtcSession.room.client.getDomain();
   if (domain) {
@@ -59,17 +55,18 @@ async function makePreferredLivekitFoci(
       FOCI_WK_KEY
     ];
     if (Array.isArray(wellKnownFoci)) {
-      const validWellKnownFoci = wellKnownFoci
-        .filter((f) => !!f)
-        .filter(isLivekitFocusConfig)
-        .map((wellKnownFocus) => {
-          logger.log("Adding livekit focus from well known: ", wellKnownFocus);
-          return { ...wellKnownFocus, livekit_alias: livekitAlias };
-        });
-      if (validWellKnownFoci.length > 0) {
-        toWarmUp = validWellKnownFoci[0];
-      }
-      preferredFoci.push(...validWellKnownFoci);
+      preferredFoci.push(
+        ...wellKnownFoci
+          .filter((f) => !!f)
+          .filter(isLivekitFocusConfig)
+          .map((wellKnownFocus) => {
+            logger.log(
+              "Adding livekit focus from well known: ",
+              wellKnownFocus,
+            );
+            return { ...wellKnownFocus, livekit_alias: livekitAlias };
+          }),
+      );
     }
   }
 
@@ -80,15 +77,10 @@ async function makePreferredLivekitFoci(
       livekit_service_url: urlFromConf,
       livekit_alias: livekitAlias,
     };
-    toWarmUp = toWarmUp ?? focusFormConf;
     logger.log("Adding livekit focus from config: ", focusFormConf);
     preferredFoci.push(focusFormConf);
   }
 
-  if (toWarmUp) {
-    // this will call the jwt/sfu/get endpoint to pre create the livekit room.
-    await getSFUConfigWithOpenID(rtcSession.room.client, toWarmUp);
-  }
   if (preferredFoci.length === 0)
     throw new MatrixRTCFocusMissingError(domain ?? "");
   return Promise.resolve(preferredFoci);
@@ -131,13 +123,15 @@ export async function enterRTCSession(
         useLegacyMemberEvents: !useDeviceSessionMemberEvents,
       }),
       delayedLeaveEventRestartMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_ms,
+        matrixRtcSessionConfig?.delayed_leave_event_restart_ms ??
+        matrixRtcSessionConfig?.membership_keep_alive_period,
       delayedLeaveEventDelayMs:
-        matrixRtcSessionConfig?.delayed_leave_event_delay_ms,
-      delayedLeaveEventRestartLocalTimeoutMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_local_timeout_ms,
+        matrixRtcSessionConfig?.delayed_leave_event_delay_ms ??
+        matrixRtcSessionConfig?.membership_server_side_expiry_timeout,
       networkErrorRetryMs: matrixRtcSessionConfig?.network_error_retry_ms,
-      makeKeyDelay: matrixRtcSessionConfig?.wait_for_key_rotation_ms,
+      makeKeyDelay:
+        matrixRtcSessionConfig?.wait_for_key_rotation_ms ??
+        matrixRtcSessionConfig?.key_rotation_on_leave_delay,
       membershipEventExpiryMs:
         matrixRtcSessionConfig?.membership_event_expiry_ms,
       useExperimentalToDeviceTransport,

src/sound/LICENCE.md

@@ -23,4 +23,3 @@ The following sound effects have been originally created by Element.
 - `end_call`
 - `reactions/rock`
 - `reactions/wave`
-- `reactions/baduntss`

src/state/CallViewModel.ts

@@ -11,52 +11,37 @@ import {
   observeParticipantMedia,
 } from "@livekit/components-core";
 import {
-  ConnectionState,
   type Room as LivekitRoom,
   type LocalParticipant,
+  LocalVideoTrack,
   ParticipantEvent,
   type RemoteParticipant,
+  Track,
 } from "livekit-client";
-import {
-  ClientEvent,
-  type EventTimelineSetHandlerMap,
-  EventType,
-  RoomEvent,
-  RoomStateEvent,
-  SyncState,
-  type Room as MatrixRoom,
-  type RoomMember,
-} from "matrix-js-sdk";
+import { RoomStateEvent, type Room, type RoomMember } from "matrix-js-sdk";
 import {
   BehaviorSubject,
   EMPTY,
-  NEVER,
   type Observable,
   Subject,
   combineLatest,
   concat,
   distinctUntilChanged,
-  endWith,
   filter,
   forkJoin,
   fromEvent,
-  ignoreElements,
   map,
   merge,
   mergeMap,
   of,
-  pairwise,
   race,
   scan,
   skip,
-  skipWhile,
   startWith,
   switchAll,
   switchMap,
   switchScan,
   take,
-  takeUntil,
-  throttleTime,
   timer,
   withLatestFrom,
 } from "rxjs";
@@ -65,9 +50,6 @@ import {
   type CallMembership,
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
-  type MatrixRTCSessionEventHandlerMap,
-  MembershipManagerEvent,
-  Status,
 } from "matrix-js-sdk/lib/matrixrtc";
 
 import { ViewModel } from "./ViewModel";
@@ -78,16 +60,12 @@ import {
 import {
   LocalUserMediaViewModel,
   type MediaViewModel,
+  observeTrackReference$,
   RemoteUserMediaViewModel,
   ScreenShareViewModel,
   type UserMediaViewModel,
 } from "./MediaViewModel";
-import {
-  accumulate,
-  and$,
-  finalizeValue,
-  pauseWhen,
-} from "../utils/observable";
+import { accumulate, finalizeValue } from "../utils/observable";
 import { ObservableScope } from "./ObservableScope";
 import {
   duplicateTiles,
@@ -116,27 +94,12 @@ import { observeSpeaker$ } from "./observeSpeaker";
 import { shallowEquals } from "../utils/array";
 import { calculateDisplayName, shouldDisambiguate } from "../utils/displayname";
 import { type MediaDevices } from "./MediaDevices";
-import { constant, type Behavior } from "./Behavior";
-
-export interface CallViewModelOptions {
-  encryptionSystem: EncryptionSystem;
-  autoLeaveWhenOthersLeft?: boolean;
-  /**
-   * If the call is started in a way where we want it to behave like a telephone usecase
-   * If we sent a notification event, we want the ui to show a ringing state
-   */
-  waitForCallPickup?: boolean;
-}
+import { type Behavior } from "./Behavior";
 
 // How long we wait after a focus switch before showing the real participant
 // list again
 const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
 
-// Do not play any sounds if the participant count has exceeded this
-// number.
-export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;
-export const THROTTLE_SOUND_EFFECT_MS = 500;
-
 // This is the number of participants that we think constitutes a "small" call
 // on mobile. No spotlight tile should be shown below this threshold.
 const smallMobileCallThreshold = 3;
@@ -296,8 +259,6 @@ class UserMedia {
     participant: LocalParticipant | RemoteParticipant | undefined,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    mediaDevices: MediaDevices,
-    pretendToBeDisconnected$: Behavior<boolean>,
     displayname$: Observable<string>,
     handRaised$: Observable<Date | null>,
     reaction$: Observable<ReactionOption | null>,
@@ -311,7 +272,6 @@ class UserMedia {
         this.participant$ as Behavior<LocalParticipant>,
         encryptionSystem,
         livekitRoom,
-        mediaDevices,
         this.scope.behavior(displayname$),
         this.scope.behavior(handRaised$),
         this.scope.behavior(reaction$),
@@ -325,7 +285,6 @@ class UserMedia {
         >,
         encryptionSystem,
         livekitRoom,
-        pretendToBeDisconnected$,
         this.scope.behavior(displayname$),
         this.scope.behavior(handRaised$),
         this.scope.behavior(reaction$),
@@ -379,8 +338,7 @@ class ScreenShare {
     member: RoomMember | undefined,
     participant: LocalParticipant | RemoteParticipant,
     encryptionSystem: EncryptionSystem,
-    livekitRoom: LivekitRoom,
-    pretendToBeDisconnected$: Behavior<boolean>,
+    liveKitRoom: LivekitRoom,
     displayName$: Observable<string>,
   ) {
     this.participant$ = new BehaviorSubject(participant);
@@ -390,8 +348,7 @@ class ScreenShare {
       member,
       this.participant$.asObservable(),
       encryptionSystem,
-      livekitRoom,
-      pretendToBeDisconnected$,
+      liveKitRoom,
       this.scope.behavior(displayName$),
       participant.isLocal,
     );
@@ -407,7 +364,7 @@ type MediaItem = UserMedia | ScreenShare;
 
 function getRoomMemberFromRtcMember(
   rtcMember: CallMembership,
-  room: MatrixRoom,
+  room: Room,
 ): { id: string; member: RoomMember | undefined } {
   // WARN! This is not exactly the sender but the user defined in the state key.
   // This will be available once we change to the new "member as object" format in the MatrixRTC object.
@@ -429,79 +386,18 @@ function getRoomMemberFromRtcMember(
 
 // TODO: Move wayyyy more business logic from the call and lobby views into here
 export class CallViewModel extends ViewModel {
-  private readonly userId = this.matrixRoom.client.getUserId();
-
-  private readonly matrixConnected$ = this.scope.behavior(
-    // To consider ourselves connected to MatrixRTC, we check the following:
-    and$(
-      // The client is connected to the sync loop
-      (
-        fromEvent(this.matrixRoom.client, ClientEvent.Sync) as Observable<
-          [SyncState]
-        >
-      ).pipe(
-        startWith([this.matrixRoom.client.getSyncState()]),
-        map(([state]) => state === SyncState.Syncing),
-      ),
-      // Room state observed by session says we're connected
-      fromEvent(
-        this.matrixRTCSession,
-        MembershipManagerEvent.StatusChanged,
-      ).pipe(
-        startWith(null),
-        map(() => this.matrixRTCSession.membershipStatus === Status.Connected),
-      ),
-      // Also watch out for warnings that we've likely hit a timeout and our
-      // delayed leave event is being sent (this condition is here because it
-      // provides an earlier warning than the sync loop timeout, and we wouldn't
-      // see the actual leave event until we reconnect to the sync loop)
-      fromEvent(
-        this.matrixRTCSession,
-        MembershipManagerEvent.ProbablyLeft,
-      ).pipe(
-        startWith(null),
-        map(() => this.matrixRTCSession.probablyLeft !== true),
-      ),
+  public readonly localVideo$ = this.scope.behavior<LocalVideoTrack | null>(
+    observeTrackReference$(
+      this.livekitRoom.localParticipant,
+      Track.Source.Camera,
+    ).pipe(
+      map((trackRef) => {
+        const track = trackRef?.publication?.track;
+        return track instanceof LocalVideoTrack ? track : null;
+      }),
     ),
   );
 
-  private readonly connected$ = this.scope.behavior(
-    and$(
-      this.matrixConnected$,
-      this.livekitConnectionState$.pipe(
-        map((state) => state === ConnectionState.Connected),
-      ),
-    ),
-  );
-
-  /**
-   * Whether we should tell the user that we're reconnecting to the call.
-   */
-  public readonly reconnecting$ = this.scope.behavior(
-    this.connected$.pipe(
-      // We are reconnecting if we previously had some successful initial
-      // connection but are now disconnected
-      scan(
-        ({ connectedPreviously, reconnecting }, connectedNow) => ({
-          connectedPreviously: connectedPreviously || connectedNow,
-          reconnecting: connectedPreviously && !connectedNow,
-        }),
-        { connectedPreviously: false, reconnecting: false },
-      ),
-      map(({ reconnecting }) => reconnecting),
-    ),
-  );
-
-  /**
-   * Whether various media/event sources should pretend to be disconnected from
-   * all network input, even if their connection still technically works.
-   */
-  // We do this when the app is in the 'reconnecting' state, because it might be
-  // that the LiveKit connection is still functional while the homeserver is
-  // down, for example, and we want to avoid making people worry that the app is
-  // in a split-brained state.
-  private readonly pretendToBeDisconnected$ = this.reconnecting$;
-
   /**
    * The raw list of RemoteParticipants as reported by LiveKit
    */
@@ -516,7 +412,7 @@ export class CallViewModel extends ViewModel {
   private readonly remoteParticipantHolds$ = this.scope.behavior<
     RemoteParticipant[][]
   >(
-    this.livekitConnectionState$.pipe(
+    this.connectionState$.pipe(
       withLatestFrom(this.rawRemoteParticipants$),
       mergeMap(([s, ps]) => {
         // Whenever we switch focuses, we should retain all the previous
@@ -529,7 +425,7 @@ export class CallViewModel extends ViewModel {
             // Wait for time to pass and the connection state to have changed
             forkJoin([
               timer(POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS),
-              this.livekitConnectionState$.pipe(
+              this.connectionState$.pipe(
                 filter((s) => s !== ECAddonConnectionState.ECSwitchingFocus),
                 take(1),
               ),
@@ -553,38 +449,27 @@ export class CallViewModel extends ViewModel {
   /**
    * The RemoteParticipants including those that are being "held" on the screen
    */
-  private readonly remoteParticipants$ = this.scope
-    .behavior<RemoteParticipant[]>(
-      combineLatest(
-        [this.rawRemoteParticipants$, this.remoteParticipantHolds$],
-        (raw, holds) => {
-          const result = [...raw];
-          const resultIds = new Set(result.map((p) => p.identity));
+  private readonly remoteParticipants$ = this.scope.behavior<
+    RemoteParticipant[]
+  >(
+    combineLatest(
+      [this.rawRemoteParticipants$, this.remoteParticipantHolds$],
+      (raw, holds) => {
+        const result = [...raw];
+        const resultIds = new Set(result.map((p) => p.identity));
 
-          // Incorporate the held participants into the list
-          for (const hold of holds) {
-            for (const p of hold) {
-              if (!resultIds.has(p.identity)) {
-                result.push(p);
-                resultIds.add(p.identity);
-              }
+        // Incorporate the held participants into the list
+        for (const hold of holds) {
+          for (const p of hold) {
+            if (!resultIds.has(p.identity)) {
+              result.push(p);
+              resultIds.add(p.identity);
             }
           }
+        }
 
-          return result;
-        },
-      ),
-    )
-    .pipe(pauseWhen(this.pretendToBeDisconnected$));
-
-  private readonly memberships$ = this.scope.behavior(
-    fromEvent(
-      this.matrixRTCSession,
-      MatrixRTCSessionEvent.MembershipsChanged,
-    ).pipe(
-      startWith(null),
-      pauseWhen(this.pretendToBeDisconnected$),
-      map(() => this.matrixRTCSession.memberships),
+        return result;
+      },
     ),
   );
 
@@ -593,23 +478,20 @@ export class CallViewModel extends ViewModel {
    * any displaynames that clashes with another member. Only members
    * joined to the call are considered here.
    */
-  // It turns out that doing the disambiguation above is rather expensive on Safari (10x slower
-  // than on Chrome/Firefox). This means it is important that we multicast the result so that we
-  // don't do this work more times than we need to. This is achieved by converting to a behavior:
   public readonly memberDisplaynames$ = this.scope.behavior(
-    // React to call memberships and also display name updates
-    // (calculateDisplayName implicitly depends on the room member data)
-    combineLatest(
-      [
-        this.memberships$,
-        fromEvent(this.matrixRoom, RoomStateEvent.Members).pipe(
-          startWith(null),
-          pauseWhen(this.pretendToBeDisconnected$),
-        ),
-      ],
-      (memberships, _members) => {
+    merge(
+      // Handle call membership changes.
+      fromEvent(
+        this.matrixRTCSession,
+        MatrixRTCSessionEvent.MembershipsChanged,
+      ),
+      // Handle room membership changes (and displayname updates)
+      fromEvent(this.matrixRTCSession.room, RoomStateEvent.Members),
+    ).pipe(
+      startWith(null),
+      map(() => {
         const displaynameMap = new Map<string, string>();
-        const room = this.matrixRoom;
+        const { room, memberships } = this.matrixRTCSession;
 
         // We only consider RTC members for disambiguation as they are the only visible members.
         for (const rtcMember of memberships) {
@@ -629,13 +511,14 @@ export class CallViewModel extends ViewModel {
           );
         }
         return displaynameMap;
-      },
+      }),
+      // It turns out that doing the disambiguation above is rather expensive on Safari (10x slower
+      // than on Chrome/Firefox). This means it is important that we multicast the result so that we
+      // don't do this work more times than we need to. This is achieved by converting to a behavior:
     ),
   );
 
-  public readonly handsRaised$ = this.scope.behavior(
-    this.handsRaisedSubject$.pipe(pauseWhen(this.pretendToBeDisconnected$)),
-  );
+  public readonly handsRaised$ = this.scope.behavior(this.handsRaisedSubject$);
 
   public readonly reactions$ = this.scope.behavior(
     this.reactionsSubject$.pipe(
@@ -647,7 +530,6 @@ export class CallViewModel extends ViewModel {
           ]),
         ),
       ),
-      pauseWhen(this.pretendToBeDisconnected$),
     ),
   );
 
@@ -659,7 +541,13 @@ export class CallViewModel extends ViewModel {
       this.remoteParticipants$,
       observeParticipantMedia(this.livekitRoom.localParticipant),
       duplicateTiles.value$,
-      this.memberships$,
+      // Also react to changes in the MatrixRTC session list.
+      // The session list will also be update if a room membership changes.
+      // No additional RoomState event listener needs to be set up.
+      fromEvent(
+        this.matrixRTCSession,
+        MatrixRTCSessionEvent.MembershipsChanged,
+      ).pipe(startWith(null)),
       showNonMemberTiles.value$,
     ]).pipe(
       scan(
@@ -669,15 +557,15 @@ export class CallViewModel extends ViewModel {
             remoteParticipants,
             { participant: localParticipant },
             duplicateTiles,
-            memberships,
+            _membershipsChanged,
             showNonMemberTiles,
           ],
         ) => {
           const newItems = new Map(
             function* (this: CallViewModel): Iterable<[string, MediaItem]> {
-              const room = this.matrixRoom;
+              const room = this.matrixRTCSession.room;
               // m.rtc.members are the basis for calculating what is visible in the call
-              for (const rtcMember of memberships) {
+              for (const rtcMember of this.matrixRTCSession.memberships) {
                 const { member, id: livekitParticipantId } =
                   getRoomMemberFromRtcMember(rtcMember, room);
                 const matrixIdentifier = `${rtcMember.sender}:${rtcMember.deviceId}`;
@@ -724,10 +612,8 @@ export class CallViewModel extends ViewModel {
                         indexedMediaId,
                         member,
                         participant,
-                        this.options.encryptionSystem,
+                        this.encryptionSystem,
                         this.livekitRoom,
-                        this.mediaDevices,
-                        this.pretendToBeDisconnected$,
                         this.memberDisplaynames$.pipe(
                           map((m) => m.get(matrixIdentifier) ?? "[👻]"),
                         ),
@@ -749,9 +635,8 @@ export class CallViewModel extends ViewModel {
                           screenShareId,
                           member,
                           participant,
-                          this.options.encryptionSystem,
+                          this.encryptionSystem,
                           this.livekitRoom,
-                          this.pretendToBeDisconnected$,
                           this.memberDisplaynames$.pipe(
                             map((m) => m.get(matrixIdentifier) ?? "[👻]"),
                           ),
@@ -791,10 +676,8 @@ export class CallViewModel extends ViewModel {
                               nonMemberId,
                               undefined,
                               participant,
-                              this.options.encryptionSystem,
+                              this.encryptionSystem,
                               this.livekitRoom,
-                              this.mediaDevices,
-                              this.pretendToBeDisconnected$,
                               this.memberDisplaynames$.pipe(
                                 map(
                                   (m) => m.get(participant.identity) ?? "[👻]",
@@ -843,173 +726,18 @@ export class CallViewModel extends ViewModel {
     ),
   );
 
-  public readonly joinSoundEffect$ = this.userMedia$.pipe(
-    pairwise(),
-    filter(
-      ([prev, current]) =>
-        current.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND &&
-        current.length > prev.length,
-    ),
-    map(() => {}),
-    throttleTime(THROTTLE_SOUND_EFFECT_MS),
-  );
-
-  /**
-   * The number of participants currently in the call.
-   *
-   *  - Each participant has a corresponding MatrixRTC membership state event
-   *  - There can be multiple participants for one Matrix user if they join from
-   *    multiple devices.
-   */
-  public readonly participantCount$ = this.scope.behavior(
-    this.memberships$.pipe(map((ms) => ms.length)),
-  );
-
-  private readonly allOthersLeft$ = this.memberships$.pipe(
-    pairwise(),
-    filter(
-      ([prev, current]) =>
-        current.every((m) => m.sender === this.userId) &&
-        prev.some((m) => m.sender !== this.userId),
-    ),
-    map(() => {}),
-    take(1),
-  );
-
-  public readonly autoLeave$ = this.options.autoLeaveWhenOthersLeft
-    ? this.allOthersLeft$
-    : NEVER;
-
-  private readonly didSendCallNotification$ = fromEvent(
-    this.matrixRTCSession,
-    MatrixRTCSessionEvent.DidSendCallNotification,
-  ) as Observable<
-    Parameters<
-      MatrixRTCSessionEventHandlerMap[MatrixRTCSessionEvent.DidSendCallNotification]
-    >
-  >;
-  /**
-   * Whenever the RTC session tells us that it intends to ring the remote
-   * participant's devices, this emits an Observable tracking the current state of
-   * that ringing process.
-   */
-  // This is a behavior since we need to store the latest state for when we subscribe to this after `didSendCallNotification$`
-  // has already emitted but we still need the latest observable with a timeout timer that only gets created on after receiving `notificationEvent`.
-  // A behavior will emit the latest observable with the running timer to new subscribers.
-  // see also: callPickupState$ and in particular the line: `return this.ring$.pipe(mergeAll());` here we otherwise might get an EMPTY observable if
-  // `ring$` would not be a behavior.
-  private readonly ring$: Behavior<
-    Observable<"ringing" | "timeout" | "decline"> | Observable<never>
-  > = this.scope.behavior(
-    this.didSendCallNotification$.pipe(
-      filter(
-        ([notificationEvent]) => notificationEvent.notification_type === "ring",
+  public readonly memberChanges$ = this.userMedia$
+    .pipe(map((mediaItems) => mediaItems.map((m) => m.id)))
+    .pipe(
+      scan<string[], { ids: string[]; joined: string[]; left: string[] }>(
+        (prev, ids) => {
+          const left = prev.ids.filter((id) => !ids.includes(id));
+          const joined = ids.filter((id) => !prev.ids.includes(id));
+          return { ids, joined, left };
+        },
+        { ids: [], joined: [], left: [] },
       ),
-      map(([notificationEvent]) => {
-        const lifetimeMs = notificationEvent?.lifetime ?? 0;
-        return concat(
-          lifetimeMs === 0
-            ? // If no lifetime, skip the ring state
-              EMPTY
-            : // Ring until lifetime ms have passed
-              timer(lifetimeMs).pipe(
-                ignoreElements(),
-                startWith("ringing" as const),
-              ),
-          // The notification lifetime has timed out, meaning ringing has likely
-          // stopped on all receiving clients.
-          of("timeout" as const),
-          NEVER,
-        ).pipe(
-          takeUntil(
-            (
-              fromEvent(this.matrixRoom, RoomEvent.Timeline) as Observable<
-                Parameters<EventTimelineSetHandlerMap[RoomEvent.Timeline]>
-              >
-            ).pipe(
-              filter(
-                ([event]) =>
-                  event.getType() === EventType.RTCDecline &&
-                  event.getRelation()?.rel_type === "m.reference" &&
-                  event.getRelation()?.event_id ===
-                    notificationEvent.event_id &&
-                  event.getSender() !== this.userId,
-              ),
-            ),
-          ),
-          endWith("decline" as const),
-        );
-      }),
-    ),
-    EMPTY,
-  );
-
-  /**
-   * Whether some Matrix user other than ourself is joined to the call.
-   */
-  private readonly someoneElseJoined$ = this.memberships$.pipe(
-    map((ms) => ms.some((m) => m.sender !== this.userId)),
-  );
-
-  /**
-   * The current call pickup state of the call.
-   *  - "unknown": The client has not yet sent the notification event. We don't know if it will because it first needs to send its own membership.
-   *     Then we can conclude if we were the first one to join or not.
-   *     This may also be set if we are disconnected.
-   *  - "ringing": The call is ringing on other devices in this room (This client should give audiovisual feedback that this is happening).
-   *  - "timeout": No-one picked up in the defined time this call should be ringing on others devices.
-   *     The call failed. If desired this can be used as a trigger to exit the call.
-   *  - "success": Someone else joined. The call is in a normal state. No audiovisual feedback.
-   *  - null: EC is configured to never show any waiting for answer state.
-   */
-  public readonly callPickupState$: Behavior<
-    "unknown" | "ringing" | "timeout" | "decline" | "success" | null
-  > = this.options.waitForCallPickup
-    ? this.scope.behavior<
-        "unknown" | "ringing" | "timeout" | "decline" | "success"
-      >(
-        combineLatest([
-          this.livekitConnectionState$,
-          this.someoneElseJoined$,
-        ]).pipe(
-          switchMap(([livekitConnectionState, someoneElseJoined]) => {
-            if (livekitConnectionState === ConnectionState.Disconnected) {
-              // Do not ring until we're connected.
-              return of("unknown" as const);
-            } else if (someoneElseJoined) {
-              return of("success" as const);
-            }
-            // Show the ringing state of the most recent ringing attempt.
-            // ring$ is a behavior so it will emit the latest observable which very well might already have a running timer.
-            // this is important in case livekitConnectionState$ after didSendCallNotification$ has already emitted.
-            return this.ring$.pipe(switchAll());
-          }),
-          // The state starts as 'unknown' because we don't know if the RTC
-          // session will actually send a notify event yet. It will only be
-          // known once we send our own membership and see that we were the
-          // first one to join.
-          startWith("unknown" as const),
-        ),
-      )
-    : constant(null);
-
-  public readonly leaveSoundEffect$ = combineLatest([
-    this.callPickupState$,
-    this.userMedia$,
-  ]).pipe(
-    // Until the call is successful, do not play a leave sound.
-    // If callPickupState$ is null, then we always play the sound as it will not conflict with a decline sound.
-    skipWhile(([c]) => c !== null && c !== "success"),
-    map(([, userMedia]) => userMedia),
-    pairwise(),
-    filter(
-      ([prev, current]) =>
-        current.length <= MAX_PARTICIPANT_COUNT_FOR_SOUND &&
-        current.length < prev.length,
-    ),
-    map(() => {}),
-    throttleTime(THROTTLE_SOUND_EFFECT_MS),
-  );
+    );
 
   /**
    * List of MediaItems that we want to display, that are of type ScreenShare
@@ -1111,7 +839,7 @@ export class CallViewModel extends ViewModel {
           map((speaker) => (speaker ? [speaker] : [])),
         );
       }),
-      distinctUntilChanged<MediaViewModel[]>(shallowEquals),
+      distinctUntilChanged(shallowEquals),
     ),
   );
 
@@ -1696,11 +1424,10 @@ export class CallViewModel extends ViewModel {
   public constructor(
     // A call is permanently tied to a single Matrix room and LiveKit room
     private readonly matrixRTCSession: MatrixRTCSession,
-    private readonly matrixRoom: MatrixRoom,
     private readonly livekitRoom: LivekitRoom,
     private readonly mediaDevices: MediaDevices,
-    private readonly options: CallViewModelOptions,
-    public readonly livekitConnectionState$: Observable<ECConnectionState>,
+    private readonly encryptionSystem: EncryptionSystem,
+    private readonly connectionState$: Observable<ECConnectionState>,
     private readonly handsRaisedSubject$: Observable<
       Record<string, RaisedHandInfo>
     >,
@@ -1709,51 +1436,5 @@ export class CallViewModel extends ViewModel {
     >,
   ) {
     super();
-
-    // Pause upstream of all local media tracks when we're disconnected from
-    // MatrixRTC, because it can be an unpleasant surprise for the app to say
-    // 'reconnecting' and yet still be transmitting your media to others.
-    // We use matrixConnected$ rather than reconnecting$ because we want to
-    // pause tracks during the initial joining sequence too until we're sure
-    // that our own media is displayed on screen.
-    this.matrixConnected$.pipe(this.scope.bind()).subscribe((connected) => {
-      const publications =
-        this.livekitRoom.localParticipant.trackPublications.values();
-      if (connected) {
-        for (const p of publications) {
-          if (p.track?.isUpstreamPaused === true) {
-            const kind = p.track.kind;
-            logger.log(
-              `Resumming ${kind} track (MatrixRTC connection present)`,
-            );
-            p.track
-              .resumeUpstream()
-              .catch((e) =>
-                logger.error(
-                  `Failed to resume ${kind} track after MatrixRTC reconnection`,
-                  e,
-                ),
-              );
-          }
-        }
-      } else {
-        for (const p of publications) {
-          if (p.track?.isUpstreamPaused === false) {
-            const kind = p.track.kind;
-            logger.log(
-              `Pausing ${kind} track (uncertain MatrixRTC connection)`,
-            );
-            p.track
-              .pauseUpstream()
-              .catch((e) =>
-                logger.error(
-                  `Failed to pause ${kind} track after entering uncertain MatrixRTC connection`,
-                  e,
-                ),
-              );
-          }
-        }
-      }
-    });
   }
 }

src/state/MediaViewModel.test.ts

@@ -5,40 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { expect, onTestFinished, test, vi } from "vitest";
-import {
-  type LocalTrackPublication,
-  LocalVideoTrack,
-  TrackEvent,
-} from "livekit-client";
-import { waitFor } from "@testing-library/dom";
+import { expect, test, vi } from "vitest";
 
 import {
-  mockLocalParticipant,
-  mockMediaDevices,
   mockRtcMembership,
   withLocalMedia,
   withRemoteMedia,
   withTestScheduler,
 } from "../utils/test";
-import { getValue } from "../utils/observable";
-import { constant } from "./Behavior";
-
-global.MediaStreamTrack = class {} as unknown as {
-  new (): MediaStreamTrack;
-  prototype: MediaStreamTrack;
-};
-global.MediaStream = class {} as unknown as {
-  new (): MediaStream;
-  prototype: MediaStream;
-};
-
-const platformMock = vi.hoisted(() => vi.fn(() => "desktop"));
-vi.mock("../Platform", () => ({
-  get platform(): string {
-    return platformMock();
-  },
-}));
 
 const rtcMembership = mockRtcMembership("@alice:example.org", "AAAA");
 
@@ -105,23 +79,17 @@ test("toggle fit/contain for a participant's video", async () => {
 });
 
 test("local media remembers whether it should always be shown", async () => {
-  await withLocalMedia(
-    rtcMembership,
-    {},
-    mockLocalParticipant({}),
-    mockMediaDevices({}),
-    (vm) =>
-      withTestScheduler(({ expectObservable, schedule }) => {
-        schedule("-a|", { a: () => vm.setAlwaysShow(false) });
-        expectObservable(vm.alwaysShow$).toBe("ab", { a: true, b: false });
-      }),
+  await withLocalMedia(rtcMembership, {}, (vm) =>
+    withTestScheduler(({ expectObservable, schedule }) => {
+      schedule("-a|", { a: () => vm.setAlwaysShow(false) });
+      expectObservable(vm.alwaysShow$).toBe("ab", { a: true, b: false });
+    }),
   );
   // Next local media should start out *not* always shown
   await withLocalMedia(
     rtcMembership,
+
     {},
-    mockLocalParticipant({}),
-    mockMediaDevices({}),
     (vm) =>
       withTestScheduler(({ expectObservable, schedule }) => {
         schedule("-a|", { a: () => vm.setAlwaysShow(true) });
@@ -129,77 +97,3 @@ test("local media remembers whether it should always be shown", async () => {
       }),
   );
 });
-
-test("switch cameras", async () => {
-  // Camera switching is only available on mobile
-  platformMock.mockReturnValue("android");
-  onTestFinished(() => void platformMock.mockReset());
-
-  // Construct a mock video track which knows how to be restarted
-  const track = new LocalVideoTrack({
-    getConstraints() {},
-    addEventListener() {},
-    removeEventListener() {},
-  } as unknown as MediaStreamTrack);
-
-  let deviceId = "front camera";
-  const restartTrack = vi.fn(async ({ facingMode }) => {
-    deviceId = facingMode === "user" ? "front camera" : "back camera";
-    track.emit(TrackEvent.Restarted);
-    return Promise.resolve();
-  });
-  track.restartTrack = restartTrack;
-
-  Object.defineProperty(track, "mediaStreamTrack", {
-    get() {
-      return {
-        label: "Video",
-        getSettings: (): object => ({
-          deviceId,
-          facingMode: deviceId === "front camera" ? "user" : "environment",
-        }),
-      };
-    },
-  });
-
-  const selectVideoInput = vi.fn();
-
-  await withLocalMedia(
-    rtcMembership,
-    {},
-    mockLocalParticipant({
-      getTrackPublication() {
-        return { track } as unknown as LocalTrackPublication;
-      },
-    }),
-    mockMediaDevices({
-      videoInput: {
-        available$: constant(new Map()),
-        selected$: constant(undefined),
-        select: selectVideoInput,
-      },
-    }),
-    async (vm) => {
-      // Switch to back camera
-      getValue(vm.switchCamera$)!();
-      expect(restartTrack).toHaveBeenCalledExactlyOnceWith({
-        facingMode: "environment",
-      });
-      await waitFor(() => {
-        expect(selectVideoInput).toHaveBeenCalledTimes(1);
-        expect(selectVideoInput).toHaveBeenCalledWith("back camera");
-      });
-      expect(deviceId).toBe("back camera");
-
-      // Switch to front camera
-      getValue(vm.switchCamera$)!();
-      expect(restartTrack).toHaveBeenCalledTimes(2);
-      expect(restartTrack).toHaveBeenLastCalledWith({ facingMode: "user" });
-      await waitFor(() => {
-        expect(selectVideoInput).toHaveBeenCalledTimes(2);
-        expect(selectVideoInput).toHaveBeenLastCalledWith("front camera");
-      });
-      expect(deviceId).toBe("front camera");
-    },
-  );
-});

src/state/MediaViewModel.ts

@@ -16,7 +16,6 @@ import {
 import {
   type LocalParticipant,
   LocalTrack,
-  LocalVideoTrack,
   type Participant,
   ParticipantEvent,
   type RemoteParticipant,
@@ -28,7 +27,6 @@ import {
   RemoteTrack,
 } from "livekit-client";
 import { type RoomMember } from "matrix-js-sdk";
-import { logger } from "matrix-js-sdk/lib/logger";
 import {
   BehaviorSubject,
   type Observable,
@@ -53,8 +51,6 @@ import { accumulate } from "../utils/observable";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { E2eeType } from "../e2ee/e2eeType";
 import { type ReactionOption } from "../reactions";
-import { platform } from "../Platform";
-import { type MediaDevices } from "./MediaDevices";
 import { type Behavior } from "./Behavior";
 
 export function observeTrackReference$(
@@ -361,7 +357,10 @@ export type UserMediaViewModel =
  * Some participant's user media.
  */
 abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
-  private readonly _speaking$ = this.scope.behavior(
+  /**
+   * Whether the participant is speaking.
+   */
+  public readonly speaking$ = this.scope.behavior(
     this.participant$.pipe(
       switchMap((p) =>
         p
@@ -373,27 +372,15 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
       ),
     ),
   );
-  /**
-   * Whether the participant is speaking.
-   */
-  // Getter backed by a private field so that subclasses can override it
-  public get speaking$(): Behavior<boolean> {
-    return this._speaking$;
-  }
 
   /**
    * Whether this participant is sending audio (i.e. is unmuted on their side).
    */
   public readonly audioEnabled$: Behavior<boolean>;
-
-  private readonly _videoEnabled$: Behavior<boolean>;
   /**
    * Whether this participant is sending video.
    */
-  // Getter backed by a private field so that subclasses can override it
-  public get videoEnabled$(): Behavior<boolean> {
-    return this._videoEnabled$;
-  }
+  public readonly videoEnabled$: Behavior<boolean>;
 
   private readonly _cropVideo$ = new BehaviorSubject(true);
   /**
@@ -430,7 +417,7 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
     this.audioEnabled$ = this.scope.behavior(
       media$.pipe(map((m) => m?.microphoneTrack?.isMuted === false)),
     );
-    this._videoEnabled$ = this.scope.behavior(
+    this.videoEnabled$ = this.scope.behavior(
       media$.pipe(map((m) => m?.cameraTrack?.isMuted === false)),
     );
   }
@@ -455,39 +442,21 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
  * The local participant's user media.
  */
 export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
-  /**
-   * The local video track as an observable that emits whenever the track
-   * changes, the camera is switched, or the track is muted.
-   */
-  private readonly videoTrack$: Observable<LocalVideoTrack | null> =
-    this.video$.pipe(
-      switchMap((v) => {
-        const track = v?.publication?.track;
-        if (!(track instanceof LocalVideoTrack)) return of(null);
-        return merge(
-          // Watch for track restarts because they indicate a camera switch.
-          // This event is also emitted when unmuting the track object.
-          fromEvent(track, TrackEvent.Restarted).pipe(
-            startWith(null),
-            map(() => track),
-          ),
-          // When the track object is muted, reset it to null.
-          fromEvent(track, TrackEvent.Muted).pipe(map(() => null)),
-        );
-      }),
-    );
-
   /**
    * Whether the video should be mirrored.
    */
   public readonly mirror$ = this.scope.behavior(
-    this.videoTrack$.pipe(
-      // Mirror only front-facing cameras (those that face the user)
-      map(
-        (track) =>
-          track !== null &&
-          facingModeFromLocalTrack(track).facingMode === "user",
-      ),
+    this.video$.pipe(
+      switchMap((v) => {
+        const track = v?.publication?.track;
+        if (!(track instanceof LocalTrack)) return of(false);
+        // Watch for track restarts, because they indicate a camera switch
+        return fromEvent(track, TrackEvent.Restarted).pipe(
+          startWith(null),
+          // Mirror only front-facing cameras (those that face the user)
+          map(() => facingModeFromLocalTrack(track).facingMode === "user"),
+        );
+      }),
     ),
   );
 
@@ -498,48 +467,12 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
   public readonly alwaysShow$ = alwaysShowSelf.value$;
   public readonly setAlwaysShow = alwaysShowSelf.setValue;
 
-  /**
-   * Callback for switching between the front and back cameras.
-   */
-  public readonly switchCamera$: Behavior<(() => void) | null> =
-    this.scope.behavior(
-      platform === "desktop"
-        ? of(null)
-        : this.videoTrack$.pipe(
-            map((track) => {
-              if (track === null) return null;
-              const facingMode = facingModeFromLocalTrack(track).facingMode;
-              // If the camera isn't front or back-facing, don't provide a switch
-              // camera shortcut at all
-              if (facingMode !== "user" && facingMode !== "environment")
-                return null;
-              // Restart the track with a camera facing the opposite direction
-              return (): void =>
-                void track
-                  .restartTrack({
-                    facingMode: facingMode === "user" ? "environment" : "user",
-                  })
-                  .then(() => {
-                    // Inform the MediaDevices which camera was chosen
-                    const deviceId =
-                      track.mediaStreamTrack.getSettings().deviceId;
-                    if (deviceId !== undefined)
-                      this.mediaDevices.videoInput.select(deviceId);
-                  })
-                  .catch((e) =>
-                    logger.error("Failed to switch camera", facingMode, e),
-                  );
-            }),
-          ),
-    );
-
   public constructor(
     id: string,
     member: RoomMember | undefined,
     participant$: Behavior<LocalParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    private readonly mediaDevices: MediaDevices,
     displayName$: Behavior<string>,
     handRaised$: Behavior<Date | null>,
     reaction$: Behavior<ReactionOption | null>,
@@ -581,12 +514,6 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
  * A remote participant's user media.
  */
 export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
-  // This private field is used to override the value from the superclass
-  private __speaking$: Behavior<boolean>;
-  public get speaking$(): Behavior<boolean> {
-    return this.__speaking$;
-  }
-
   private readonly locallyMutedToggle$ = new Subject<void>();
   private readonly localVolumeAdjustment$ = new Subject<number>();
   private readonly localVolumeCommit$ = new Subject<void>();
@@ -626,12 +553,6 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
     ),
   );
 
-  // This private field is used to override the value from the superclass
-  private __videoEnabled$: Behavior<boolean>;
-  public get videoEnabled$(): Behavior<boolean> {
-    return this.__videoEnabled$;
-  }
-
   /**
    * Whether this participant's audio is disabled.
    */
@@ -645,7 +566,6 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
     participant$: Observable<RemoteParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    private readonly pretendToBeDisconnected$: Behavior<boolean>,
     displayname$: Behavior<string>,
     handRaised$: Behavior<Date | null>,
     reaction$: Behavior<ReactionOption | null>,
@@ -661,33 +581,11 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
       reaction$,
     );
 
-    this.__speaking$ = this.scope.behavior(
-      pretendToBeDisconnected$.pipe(
-        switchMap((disconnected) =>
-          disconnected ? of(false) : super.speaking$,
-        ),
-      ),
-    );
-
-    this.__videoEnabled$ = this.scope.behavior(
-      pretendToBeDisconnected$.pipe(
-        switchMap((disconnected) =>
-          disconnected ? of(false) : super.videoEnabled$,
-        ),
-      ),
-    );
-
     // Sync the local volume with LiveKit
     combineLatest([
       participant$,
-      // The local volume, taking into account whether we're supposed to pretend
-      // that the audio stream is disconnected (since we don't necessarily want
-      // that to modify the UI state).
-      this.pretendToBeDisconnected$.pipe(
-        switchMap((disconnected) => (disconnected ? of(0) : this.localVolume$)),
-        this.scope.bind(),
-      ),
-    ]).subscribe(([p, volume]) => p?.setVolume(volume));
+      this.localVolume$.pipe(this.scope.bind()),
+    ]).subscribe(([p, volume]) => p && p.setVolume(volume));
   }
 
   public toggleLocallyMuted(): void {
@@ -727,20 +625,12 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
  * Some participant's screen share media.
  */
 export class ScreenShareViewModel extends BaseMediaViewModel {
-  /**
-   * Whether this screen share's video should be displayed.
-   */
-  public readonly videoEnabled$ = this.scope.behavior(
-    this.pretendToBeDisconnected$.pipe(map((disconnected) => !disconnected)),
-  );
-
   public constructor(
     id: string,
     member: RoomMember | undefined,
     participant$: Observable<LocalParticipant | RemoteParticipant>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    private readonly pretendToBeDisconnected$: Behavior<boolean>,
     displayname$: Behavior<string>,
     public readonly local: boolean,
   ) {

src/tile/GridTile.module.css

@@ -83,25 +83,3 @@ borders don't support gradients */
 .volumeSlider {
   width: 100%;
 }
-
-.tile .switchCamera {
-  opacity: 1;
-  background: var(--cpd-color-bg-action-secondary-rest);
-  border: 1px solid var(--cpd-color-border-interactive-secondary);
-}
-
-.tile .switchCamera > svg {
-  color: var(--cpd-color-icon-primary);
-}
-
-@media (hover) {
-  .tile .switchCamera:hover {
-    background: var(--cpd-color-bg-subtle-secondary);
-    border-color: var(--cpd-color-border-interactive-hovered);
-  }
-}
-
-.tile .switchCamera:active {
-  background: var(--cpd-color-bg-subtle-primary);
-  border-color: var(--cpd-color-border-interactive-hovered);
-}

src/tile/GridTile.test.tsx

@@ -64,7 +64,6 @@ test("GridTile is accessible", async () => {
             targetWidth={300}
             targetHeight={200}
             showSpeakingIndicators
-            focusable={true}
           />
         </ReactionsSenderProvider>,
       );

src/tile/GridTile.tsx

@@ -28,7 +28,6 @@ import {
   UserProfileIcon,
   ExpandIcon,
   VolumeOffSolidIcon,
-  SwitchCameraSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
   ContextMenu,
@@ -60,14 +59,12 @@ interface TileProps {
   targetHeight: number;
   displayName: string;
   showSpeakingIndicators: boolean;
-  focusable: boolean;
 }
 
 interface UserMediaTileProps extends TileProps {
   vm: UserMediaViewModel;
   mirror: boolean;
   locallyMuted: boolean;
-  primaryButton?: ReactNode;
   menuStart?: ReactNode;
   menuEnd?: ReactNode;
 }
@@ -77,12 +74,10 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
   vm,
   showSpeakingIndicators,
   locallyMuted,
-  primaryButton,
   menuStart,
   menuEnd,
   className,
   displayName,
-  focusable,
   ...props
 }) => {
   const { toggleRaisedHand } = useReactionsSender();
@@ -164,27 +159,21 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
         />
       }
       displayName={displayName}
-      focusable={focusable}
       primaryButton={
-        primaryButton ?? (
-          <Menu
-            open={menuOpen}
-            onOpenChange={setMenuOpen}
-            title={displayName}
-            trigger={
-              <button
-                aria-label={t("common.options")}
-                tabIndex={focusable ? undefined : -1}
-              >
-                <OverflowHorizontalIcon aria-hidden width={20} height={20} />
-              </button>
-            }
-            side="left"
-            align="start"
-          >
-            {menu}
-          </Menu>
-        )
+        <Menu
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+          title={displayName}
+          trigger={
+            <button aria-label={t("common.options")}>
+              <OverflowHorizontalIcon aria-hidden width={20} height={20} />
+            </button>
+          }
+          side="left"
+          align="start"
+        >
+          {menu}
+        </Menu>
       }
       raisedHandTime={handRaised ?? undefined}
       currentReaction={reaction ?? undefined}
@@ -214,14 +203,11 @@ const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
   ref,
   vm,
   onOpenProfile,
-  focusable,
   ...props
 }) => {
   const { t } = useTranslation();
   const mirror = useBehavior(vm.mirror$);
   const alwaysShow = useBehavior(vm.alwaysShow$);
-  const switchCamera = useBehavior(vm.switchCamera$);
-
   const latestAlwaysShow = useLatest(alwaysShow);
   const onSelectAlwaysShow = useCallback(
     (e: Event) => {
@@ -237,18 +223,6 @@ const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
       vm={vm}
       locallyMuted={false}
       mirror={mirror}
-      primaryButton={
-        switchCamera === null ? undefined : (
-          <button
-            className={styles.switchCamera}
-            aria-label={t("switch_camera")}
-            onClick={switchCamera}
-            tabIndex={focusable ? undefined : -1}
-          >
-            <SwitchCameraSolidIcon aria-hidden width={20} height={20} />
-          </button>
-        )
-      }
       menuStart={
         <ToggleMenuItem
           Icon={VisibilityOnIcon}
@@ -266,7 +240,6 @@ const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
           />
         )
       }
-      focusable={focusable}
       {...props}
     />
   );
@@ -346,7 +319,6 @@ interface GridTileProps {
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
   showSpeakingIndicators: boolean;
-  focusable: boolean;
 }
 
 export const GridTile: FC<GridTileProps> = ({

src/tile/MediaView.module.css

@@ -85,7 +85,6 @@ unconditionally select the container so we can use cqmin units */
 
 .nameTag {
   grid-area: nameTag;
-  place-self: end start;
   padding: var(--cpd-space-1x);
   padding-block: var(--cpd-space-1x);
   color: var(--cpd-color-text-primary);
@@ -174,7 +173,7 @@ unconditionally select the container so we can use cqmin units */
 }
 
 .fg > button:active {
-  background: var(--cpd-color-bg-action-primary-pressed);
+  background: var(--cpd-color-bg-action-primary-pressed) !important;
 }
 
 .fg > button[data-state="open"] {

src/tile/MediaView.test.tsx

@@ -47,7 +47,6 @@ describe("MediaView", () => {
     video: trackReference,
     member: undefined,
     localParticipant: false,
-    focusable: true,
   };
 
   test("is accessible", async () => {

src/tile/MediaView.tsx

@@ -38,7 +38,6 @@ interface Props extends ComponentProps<typeof animated.div> {
   encryptionStatus: EncryptionStatus;
   nameTagLeadingIcon?: ReactNode;
   displayName: string;
-  focusable: boolean;
   primaryButton?: ReactNode;
   raisedHandTime?: Date;
   currentReaction?: ReactionOption;
@@ -62,7 +61,6 @@ export const MediaView: FC<Props> = ({
   unencryptedWarning,
   nameTagLeadingIcon,
   displayName,
-  focusable,
   primaryButton,
   encryptionStatus,
   raisedHandTime,
@@ -116,7 +114,6 @@ export const MediaView: FC<Props> = ({
             miniature={avatarSize < 96}
             showTimer={handRaiseTimerVisible}
             onClick={raisedHandOnClick}
-            tabIndex={focusable ? undefined : -1}
           />
           {currentReaction && (
             <ReactionIndicator
@@ -167,7 +164,6 @@ export const MediaView: FC<Props> = ({
               label={t("common.unencrypted")}
               placement="bottom"
               isTriggerInteractive={false}
-              nonInteractiveTriggerTabIndex={focusable ? undefined : -1}
             >
               <ErrorSolidIcon
                 width={20}

src/tile/SpotlightTile.module.css

@@ -88,48 +88,40 @@ Please see LICENSE in the repository root for full details.
   padding: var(--cpd-space-2x);
   border: none;
   border-radius: var(--cpd-radius-pill-effect);
-  background: rgba(from var(--cpd-color-gray-100) r g b / 0.6);
+  background: var(--cpd-color-alpha-gray-1400);
   box-shadow: var(--small-drop-shadow);
   transition:
     opacity 0.15s,
     background-color 0.1s;
+  position: absolute;
   z-index: 1;
   --inset: 6px;
   inset-block-end: var(--inset);
   inset-inline-end: var(--inset);
 }
 
-.bottomRightButtons {
-  display: flex;
-  gap: var(--cpd-space-2x);
-  position: absolute;
-  inset-block-end: var(--cpd-space-1x);
-  inset-inline-end: var(--cpd-space-1x);
-  z-index: 1;
-}
-
 .expand > svg {
   display: block;
-  color: var(--cpd-color-icon-primary);
+  color: var(--cpd-color-icon-on-solid-primary);
 }
 
 @media (hover) {
   .expand:hover {
-    background: var(--cpd-color-gray-400);
+    background: var(--cpd-color-bg-action-primary-hovered);
   }
 }
 
 .expand:active {
-  background: var(--cpd-color-gray-100);
+  background: var(--cpd-color-bg-action-primary-pressed);
 }
 
 @media (hover) {
-  .tile:hover > div > button {
+  .tile:hover > button {
     opacity: 1;
   }
 }
 
-.tile:has(:focus-visible) > div > button {
+.tile:has(:focus-visible) > button {
   opacity: 1;
 }
 

src/tile/SpotlightTile.test.tsx

@@ -12,8 +12,6 @@ import userEvent from "@testing-library/user-event";
 
 import { SpotlightTile } from "./SpotlightTile";
 import {
-  mockLocalParticipant,
-  mockMediaDevices,
   mockRtcMembership,
   withLocalMedia,
   withRemoteMedia,
@@ -41,8 +39,6 @@ test("SpotlightTile is accessible", async () => {
           rawDisplayName: "Bob",
           getMxcAvatarUrl: () => "mxc://dlskf",
         },
-        mockLocalParticipant({}),
-        mockMediaDevices({}),
         async (vm2) => {
           const user = userEvent.setup();
           const toggleExpanded = vi.fn();
@@ -59,7 +55,6 @@ test("SpotlightTile is accessible", async () => {
               expanded={false}
               onToggleExpanded={toggleExpanded}
               showIndicators
-              focusable={true}
             />,
           );
 

src/tile/SpotlightTile.tsx

@@ -29,8 +29,6 @@ import classNames from "classnames";
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
 import { type RoomMember } from "matrix-js-sdk";
 
-import FullScreenMaximiseIcon from "../icons/FullScreenMaximise.svg?react";
-import FullScreenMinimiseIcon from "../icons/FullScreenMinimise.svg?react";
 import { MediaView } from "./MediaView";
 import styles from "./SpotlightTile.module.css";
 import {
@@ -54,17 +52,16 @@ interface SpotlightItemBaseProps {
   targetWidth: number;
   targetHeight: number;
   video: TrackReferenceOrPlaceholder | undefined;
-  videoEnabled: boolean;
   member: RoomMember | undefined;
   unencryptedWarning: boolean;
   encryptionStatus: EncryptionStatus;
   displayName: string;
-  focusable: boolean;
   "aria-hidden"?: boolean;
   localParticipant: boolean;
 }
 
 interface SpotlightUserMediaItemBaseProps extends SpotlightItemBaseProps {
+  videoEnabled: boolean;
   videoFit: "contain" | "cover";
 }
 
@@ -91,10 +88,12 @@ const SpotlightUserMediaItem: FC<SpotlightUserMediaItemProps> = ({
   vm,
   ...props
 }) => {
+  const videoEnabled = useBehavior(vm.videoEnabled$);
   const cropVideo = useBehavior(vm.cropVideo$);
 
   const baseProps: SpotlightUserMediaItemBaseProps &
     RefAttributes<HTMLDivElement> = {
+    videoEnabled,
     videoFit: cropVideo ? "cover" : "contain",
     ...props,
   };
@@ -113,7 +112,6 @@ interface SpotlightItemProps {
   vm: MediaViewModel;
   targetWidth: number;
   targetHeight: number;
-  focusable: boolean;
   intersectionObserver$: Observable<IntersectionObserver>;
   /**
    * Whether this item should act as a scroll snapping point.
@@ -127,7 +125,6 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
   vm,
   targetWidth,
   targetHeight,
-  focusable,
   intersectionObserver$,
   snap,
   "aria-hidden": ariaHidden,
@@ -136,7 +133,6 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
   const ref = useMergedRefs(ourRef, theirRef);
   const displayName = useBehavior(vm.displayName$);
   const video = useBehavior(vm.video$);
-  const videoEnabled = useBehavior(vm.videoEnabled$);
   const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
   const encryptionStatus = useBehavior(vm.encryptionStatus$);
 
@@ -162,18 +158,16 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
     targetWidth,
     targetHeight,
     video,
-    videoEnabled,
     member: vm.member,
     unencryptedWarning,
     displayName,
-    focusable,
     encryptionStatus,
     "aria-hidden": ariaHidden,
     localParticipant: vm.local,
   };
 
   return vm instanceof ScreenShareViewModel ? (
-    <MediaView videoFit="contain" mirror={false} {...baseProps} />
+    <MediaView videoEnabled videoFit="contain" mirror={false} {...baseProps} />
   ) : (
     <SpotlightUserMediaItem vm={vm} {...baseProps} />
   );
@@ -189,7 +183,6 @@ interface Props {
   targetWidth: number;
   targetHeight: number;
   showIndicators: boolean;
-  focusable: boolean;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
 }
@@ -202,7 +195,6 @@ export const SpotlightTile: FC<Props> = ({
   targetWidth,
   targetHeight,
   showIndicators,
-  focusable = true,
   className,
   style,
 }) => {
@@ -218,26 +210,6 @@ export const SpotlightTile: FC<Props> = ({
   const canGoBack = visibleIndex > 0;
   const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;
 
-  const isFullscreen = useCallback((): boolean => {
-    const rootElement = document.body;
-    if (rootElement && document.fullscreenElement) return true;
-    return false;
-  }, []);
-
-  const FullScreenIcon = isFullscreen()
-    ? FullScreenMinimiseIcon
-    : FullScreenMaximiseIcon;
-
-  const onToggleFullscreen = useCallback(() => {
-    const rootElement = document.body;
-    if (!rootElement) return;
-    if (isFullscreen()) {
-      void document?.exitFullscreen();
-    } else {
-      void rootElement.requestFullscreen();
-    }
-  }, [isFullscreen]);
-
   // To keep track of which item is visible, we need an intersection observer
   // hooked up to the root element and the items. Because the items will run
   // their effects before their parent does, we need to do this dance with an
@@ -299,7 +271,6 @@ export const SpotlightTile: FC<Props> = ({
           className={classNames(styles.advance, styles.back)}
           aria-label={t("common.back")}
           onClick={onBackClick}
-          tabIndex={focusable ? undefined : -1}
         >
           <ChevronLeftIcon aria-hidden width={24} height={24} />
         </button>
@@ -311,7 +282,6 @@ export const SpotlightTile: FC<Props> = ({
             vm={vm}
             targetWidth={targetWidth}
             targetHeight={targetHeight}
-            focusable={focusable}
             intersectionObserver$={intersectionObserver$}
             // This is how we get the container to scroll to the right media
             // when the previous/next buttons are clicked: we temporarily
@@ -322,36 +292,22 @@ export const SpotlightTile: FC<Props> = ({
           />
         ))}
       </div>
-      <div className={styles.bottomRightButtons}>
+      {onToggleExpanded && (
         <button
           className={classNames(styles.expand)}
-          aria-label={"maximise"}
-          onClick={onToggleFullscreen}
-          tabIndex={focusable ? undefined : -1}
+          aria-label={
+            expanded ? t("video_tile.collapse") : t("video_tile.expand")
+          }
+          onClick={onToggleExpanded}
         >
-          <FullScreenIcon aria-hidden width={20} height={20} />
+          <ToggleExpandIcon aria-hidden width={20} height={20} />
         </button>
-
-        {onToggleExpanded && (
-          <button
-            className={classNames(styles.expand)}
-            aria-label={
-              expanded ? t("video_tile.collapse") : t("video_tile.expand")
-            }
-            onClick={onToggleExpanded}
-            tabIndex={focusable ? undefined : -1}
-          >
-            <ToggleExpandIcon aria-hidden width={20} height={20} />
-          </button>
-        )}
-      </div>
-
+      )}
       {canGoToNext && (
         <button
           className={classNames(styles.advance, styles.next)}
           aria-label={t("common.next")}
           onClick={onNextClick}
-          tabIndex={focusable ? undefined : -1}
         >
           <ChevronRightIcon aria-hidden width={24} height={24} />
         </button>

src/useAudioContext.tsx

@@ -32,8 +32,6 @@ async function playSound(
   buffer: AudioBuffer,
   volume: number,
   stereoPan: number,
-  delayS = 0,
-  abort?: AbortController,
 ): Promise<void> {
   const gain = ctx.createGain();
   gain.gain.setValueAtTime(volume, 0);
@@ -41,62 +39,13 @@ async function playSound(
   pan.pan.setValueAtTime(stereoPan, 0);
   const src = ctx.createBufferSource();
   src.buffer = buffer;
-  abort?.signal.addEventListener("abort", () => {
-    src.disconnect();
-  });
-  const p = new Promise<void>((r) => src.addEventListener("ended", () => r()));
   src.connect(gain).connect(pan).connect(ctx.destination);
+  const p = new Promise<void>((r) => src.addEventListener("ended", () => r()));
   controls.setPlaybackStarted();
-  src.start(ctx.currentTime + delayS);
+  src.start();
   return p;
 }
 
-/**
- * Play a sound though a given AudioContext, looping until stopped. Will take
- * care of connecting the correct buffer and gating
- * through gain.
- * @param volume The volume to play at.
- * @param ctx The context to play through.
- * @param buffer The buffer to play.
- * @returns A function used to end the sound. This function will return a promise when the sound has stopped.
- */
-function playSoundLooping(
-  ctx: AudioContext,
-  buffer: AudioBuffer,
-  volume: number,
-  stereoPan: number,
-  delayS?: number,
-): () => Promise<void> {
-  if (delayS === 0) {
-    throw Error("Looping sounds must have a delay");
-  }
-
-  // Our audio loop
-  let lastSoundPromise: Promise<void>;
-  let nextSoundPromise: Promise<void>;
-  let ac: AbortController | undefined;
-  void (async (): Promise<void> => {
-    ac = new AbortController();
-    // Play a sound immediately
-    lastSoundPromise = Promise.resolve();
-    do {
-      // Queue up the next sound.
-      nextSoundPromise = playSound(ctx, buffer, volume, stereoPan, delayS, ac);
-      // Await the previous sound.
-      await lastSoundPromise;
-      // Swap the promises over, and loop round to play the next sound.
-      lastSoundPromise = nextSoundPromise;
-    } while (!ac.signal.aborted);
-  })();
-
-  return async () => {
-    ac?.abort();
-    // Wait for sounds to finish.
-    await lastSoundPromise;
-    await nextSoundPromise;
-  };
-}
-
 interface Props<S extends string> {
   /**
    * The sounds to play. If no sounds should be played then
@@ -108,13 +57,8 @@ interface Props<S extends string> {
   muted?: boolean;
 }
 
-interface UseAudioContext<S extends string> {
+interface UseAudioContext<S> {
   playSound(soundName: S): Promise<void>;
-  playSoundLooping(soundName: S, delayS?: number): () => Promise<void>;
-  /**
-   * Map of sound name to duration in seconds.
-   */
-  soundDuration: Record<string, number>;
 }
 
 /**
@@ -202,23 +146,5 @@ export function useAudioContext<S extends string>(
         earpiecePan,
       );
     },
-    playSoundLooping: (name, delayS: number): (() => Promise<void>) => {
-      if (!audioBuffers[name]) {
-        throw Error(`Tried to play a sound that wasn't buffered (${name})`);
-      }
-      return playSoundLooping(
-        audioContext,
-        audioBuffers[name],
-        soundEffectVolume * earpieceVolume,
-        earpiecePan,
-        delayS,
-      );
-    },
-    soundDuration: Object.fromEntries(
-      Object.entries(audioBuffers).map(([k, v]) => [
-        k,
-        (v as AudioBuffer).duration,
-      ]),
-    ),
   };
 }

src/utils/errors.ts

@@ -17,7 +17,6 @@ export enum ErrorCode {
   INSUFFICIENT_CAPACITY_ERROR = "INSUFFICIENT_CAPACITY_ERROR",
   E2EE_NOT_SUPPORTED = "E2EE_NOT_SUPPORTED",
   OPEN_ID_ERROR = "OPEN_ID_ERROR",
-  SFU_ERROR = "SFU_ERROR",
   UNKNOWN_ERROR = "UNKNOWN_ERROR",
 }
 
@@ -130,14 +129,3 @@ export class InsufficientCapacityError extends ElementCallError {
     );
   }
 }
-
-export class SFURoomCreationRestrictedError extends ElementCallError {
-  public constructor() {
-    super(
-      t("error.room_creation_restricted"),
-      ErrorCode.SFU_ERROR,
-      ErrorCategory.CONFIGURATION_ISSUE,
-      t("error.room_creation_restricted_description"),
-    );
-  }
-}