fix whoopsie

* add wait for pickup overlay

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

* refactor and leave logic

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

* recursive play sound logic

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

* review

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

* text color

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

* overlay styling and interval fixes

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

* fix permissions and styling

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

* fix always getting pickup sound

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

* Add sound effects for declined,timeout and ringtone

* better ringtone

* Integrate sounds

* Ensure leave sound does not play

* Remove unused blocked sound

* fix test

* Improve tests

* Loop ring sound inside Audio context for better perf.

* lint

* better ringtone

* Update to delay ringtone logic.

* lint + fix test

* Tidy up ring sync and add comments.

* lint

* Refactor onLeave to take a sound so we don't need to repeat the sound

* fix import

---------

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

.eslintrc.cjs

@@ -28,8 +28,6 @@ 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,8 +42,17 @@ module.exports = {
     ],
     // To encourage good usage of RxJS:
     "rxjs/no-exposed-subjects": "error",
-    "rxjs/finnish": "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"
+          REQUIRED_LABELS_ANY: "PR-Bug-Fix,PR-Documentation,PR-Task,PR-Feature,PR-Improvement,PR-Developer-Experience,dependencies,PR-Breaking-Change"
           REQUIRED_LABELS_ANY_DESCRIPTION: "Select at least one 'PR-' label"
           BANNED_LABELS: "banned"

.gitignore

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

README.md

@@ -143,7 +143,8 @@ 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 Matrix LiveKit JWT Auth Service via `livekit_service_url`.
+points them to a [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
+via `livekit_service_url`.
 
 ### Backend Selection
 
@@ -154,9 +155,9 @@ points them to a Matrix LiveKit JWT Auth Service 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 **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.
+- 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.
 
 The example below illustrates how backend selection works across **Matrix
 federation**, using the setup from sites A, B, and C. It demonstrates backend
@@ -208,7 +209,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`)
-- LiveKit Authorization Service (Note requires Federation API and hence a TLS reverse proxy)
+- MatrixRTC 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_livekit.yaml

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

config/config.devenv.json

@@ -14,6 +14,6 @@
     "membership_event_expiry_ms": 180000000,
     "delayed_leave_event_delay_ms": 18000,
     "delayed_leave_event_restart_ms": 4000,
-    "network_error_retry_ms": 4000
+    "network_error_retry_ms": 100
   }
 }

config/config.sample.json

@@ -17,6 +17,6 @@
     "membership_event_expiry_ms": 180000000,
     "delayed_leave_event_delay_ms": 18000,
     "delayed_leave_event_restart_ms": 4000,
-    "network_error_retry_ms": 4000
+    "network_error_retry_ms": 100
   }
 }

config/config_netlify_preview.json

@@ -11,7 +11,7 @@
     "membership_event_expiry_ms": 180000000,
     "delayed_leave_event_delay_ms": 18000,
     "delayed_leave_event_restart_ms": 4000,
-    "network_error_retry_ms": 4000
+    "network_error_retry_ms": 100
   },
   "posthog": {
     "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",

dev-backend-docker-compose.yml

@@ -14,6 +14,7 @@ services:
       # If the configured homeserver runs on localhost, it'll probably be using
       # a self-signed certificate
       - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
+      - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
     deploy:
       restart_policy:
         condition: on-failure
@@ -25,6 +26,7 @@ services:
 
   livekit:
     image: livekit/livekit-server:latest
+    pull_policy: always
     hostname: livekit-sfu
     command: --dev --config /etc/livekit.yaml
     restart: unless-stopped
@@ -44,6 +46,7 @@ services:
 
   redis:
     image: redis:6-alpine
+    pull_policy: always
     command: redis-server /etc/redis.conf
     ports:
       # HOST_PORT:CONTAINER_PORT
@@ -56,6 +59,7 @@ 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
@@ -86,6 +90,7 @@ 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
@@ -101,4 +106,6 @@ services:
     depends_on:
       - synapse
     networks:
-      - ecbackend
+      ecbackend:
+        aliases:
+          - matrix-rtc.m.localhost

docs/controls.md

@@ -17,9 +17,15 @@ On mobile platforms (iOS, Android), web views do not reliably support selecting
 - `controls.onAudioDeviceSelect: ((id: string) => void) | undefined` Callback called whenever the user or application selects a new audio output.
 - `controls.setAudioDevice(id: string): void` Sets the selected audio device in Element Call's menu. This should be used if the OS decides to automatically switch to Bluetooth, for example.
 - `controls.setAudioEnabled(enabled: boolean)` Enables/disables all audio output from the application. Output is enabled by default.
-- `showNativeAudioDevicePicker: (() => void) | undefined`. Callback called whenever the user presses the output button in the settings menu.
-  This button is only shown on iOS. (`userAgent.includes("iPhone")`)
 - `controls.onAudioPlaybackStarted: ((id: string) => void) | undefined`: This will be called the first time we start
   playing audio in the webview. It can be helpful to do device setup on the native app when the webviews audio is ready.
   In particular android is using it to setup the output channel so that the call volume can
   be controlled by the hardware volume rocker.
+
+## Element Call button delegation
+
+Callbacks for buttons in EC that are handled by the native application
+
+- `showNativeAudioDevicePicker: (() => void) | undefined`. Callback called whenever the user presses the output button in the settings menu.
+  This button is only shown on iOS. (`/iPad|iPhone|iPod|Mac/.test(navigator.userAgent)`)
+- `onBackButtonPressed: (() => void) | undefined`. Callback when the webview detects a tab on the header's back button.

docs/self-hosting.md

@@ -64,7 +64,7 @@ rc_delayed_event_mgmt:
 ```
 
 As a prerequisite for the
-[Matrix LiveKit JWT auth service](https://github.com/element-hq/lk-jwt-service)
+[MatrixRTC Authorization 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
-[Matrix Livekit JWT auth service](https://github.com/element-hq/lk-jwt-service)
+[MatrixRTC Authorization 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` |
-| [Matrix Livekit JWT auth service](https://github.com/element-hq/lk-jwt-service) | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |
+| [MatrixRTC Authorization 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;
 
-      # JWT Service running at port 8080
+      # MatrixRTC Authorization Service running at port 8080
       proxy_pass http://localhost:8080/;
     }
 
@@ -126,6 +126,32 @@ 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]
@@ -145,10 +171,6 @@ server {
     {
         "type": "livekit",
         "livekit_service_url": "https://matrix-rtc-2.example.com/livekit/jwt"
-    },
-    {
-        "type": "nextgen_new_foci_type",
-        "props_for_nextgen_foci": "val"
     }
 ]
 ```
@@ -218,7 +240,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,6 +48,7 @@ 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.                                                                                                                                                                                                                                                           |
@@ -56,10 +57,9 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `enableE2EE` (deprecated)                               | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch.                                                                                                                                                                                                                                                                                                                      |
 | `fontScale`                                             | A decimal number such as `0.9`                                                                       | No, defaults to `1.0`                                                                             | No, defaults to `1.0`        | Factor by which to scale the interface's font size.                                                                                                                                                                                                                                                                                                                                                 |
 | `fonts`                                                 |                                                                                                      | No                                                                                                | No                           | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`.                                                                                                                                                                                                                                                                            |
-| `hideHeader`                                            | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the room header when in a call.                                                                                                                                                                                                                                                                                                                                                               |
+| `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.                                                                                                                                                                                                                                                                                                         |
@@ -69,6 +69,9 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `skipLobby` (deprecated: use `intent` instead)          | `true` or `false`                                                                                    | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false`      | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |
 | `theme`                                                 | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                 | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
 | `viaServers`                                            | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
+| `sendNotificationType`                                  | `ring` or `notification`                                                                             | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
+| `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.10.1"
+android_gradle_plugin = "8.11.1"
 
 [libraries]
 android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref = "android_gradle_plugin" }
 
 [plugins]
 android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
-maven_publish = { id = "com.vanniktech.maven.publish", version = "0.32.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.34.0" }

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

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

embedded/android/lib/build.gradle.kts

@@ -5,8 +5,6 @@
  * 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)
@@ -27,7 +25,7 @@ android {
 }
 
 mavenPublishing {
-    publishToMavenCentral(SonatypeHost.CENTRAL_PORTAL, automaticRelease = true)
+    publishToMavenCentral(automaticRelease = true)
 
     signAllPublications()
 

i18next-parser.config.ts

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

knip.ts

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

locales/cs/app.json

@@ -61,6 +61,7 @@
     "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}}",
@@ -81,7 +82,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 volání. Zkontrolujte, zda máte správný odkaz, nebo <1>vytvořte nový</1>.</0>",
+    "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>",
     "connection_lost": "Spojení ztraceno",
     "connection_lost_description": "Hovor byl přerušen.",
     "e2ee_unsupported": "Nekompatibilní prohlížeč",
@@ -104,6 +105,11 @@
     "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",
@@ -173,8 +179,11 @@
     "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,6 +61,7 @@
     "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}}",
@@ -70,6 +71,7 @@
     "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",
@@ -80,7 +82,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<1> opret et nyt</1>.</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 <2> opret et nyt</2>.</0>",
     "connection_lost": "Forbindelsen gik tabt",
     "connection_lost_description": "Du blev afbrudt fra opkaldet.",
     "e2ee_unsupported": "Inkompatibel browser",
@@ -92,6 +94,8 @@
     "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": {
@@ -103,6 +107,11 @@
     "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",
@@ -164,12 +173,18 @@
       "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,6 +55,7 @@
     "profile": "Profil",
     "reaction": "Reaktion",
     "reactions": "Reaktionen",
+    "reconnecting": "Verbindung wird wiederhergestellt...",
     "settings": "Einstellungen",
     "unencrypted": "Nicht verschlüsselt",
     "username": "Benutzername",
@@ -82,7 +83,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. Vergewissern Sie sich, dass Sie den richtigen Link haben, oder <1> erstellen Sie einen neuen</1>. </0>",
+    "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>",
     "connection_lost": "Verbindung verloren",
     "connection_lost_description": "Ihre Verbindung zum Anruf wurde unterbrochen.",
     "e2ee_unsupported": "Inkompatibler Browser",
@@ -94,6 +95,8 @@
     "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": {
@@ -105,6 +108,11 @@
     "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",
@@ -173,9 +181,11 @@
     "devices": {
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
+      "change_device_button": "Audiogerät wechseln",
       "default": "Standard",
       "default_named": "Standard<2> ({{name}} )</2>",
-      "earpiece": "Ohrhörer",
+      "handset": "Ohrhörer",
+      "loudspeaker": "Lautsprecher",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon{{n}}",
       "speaker": "Lautsprecher",

locales/en/app.json

@@ -55,6 +55,7 @@
     "profile": "Profile",
     "reaction": "Reaction",
     "reactions": "Reactions",
+    "reconnecting": "Reconnecting…",
     "settings": "Settings",
     "unencrypted": "Not encrypted",
     "username": "Username",
@@ -94,6 +95,8 @@
     "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": {
@@ -105,6 +108,11 @@
     "knock_reject_heading": "Access denied",
     "reason": "Reason: {{reason}}"
   },
+  "handset": {
+    "overlay_back_button": "Back to Speaker Mode",
+    "overlay_description": "Only works while using app",
+    "overlay_title": "Handset Mode"
+  },
   "hangup_button_label": "End call",
   "header_label": "Element Call Home",
   "header_participants_label": "Participants",
@@ -176,7 +184,8 @@
       "change_device_button": "Change audio device",
       "default": "Default",
       "default_named": "Default <2>({{name}})</2>",
-      "earpiece": "Earpiece",
+      "handset": "Handset",
+      "loudspeaker": "Loudspeaker",
       "microphone": "Microphone",
       "microphone_numbered": "Microphone {{n}}",
       "speaker": "Speaker",

locales/et/app.json

@@ -61,6 +61,7 @@
     "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}}",
@@ -81,7 +82,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 <1>loo uus</1>.</0>",
+    "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>",
     "connection_lost": "Ühendus on katkenud",
     "connection_lost_description": "Sinu ühendus selle kõnega on katkenud.",
     "e2ee_unsupported": "Mitteühilduv brauser",
@@ -93,6 +94,8 @@
     "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": {
@@ -104,6 +107,10 @@
     "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",
@@ -172,8 +179,10 @@
     "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,6 +61,7 @@
     "video": "Видео"
   },
   "developer_mode": {
+    "always_show_iphone_earpiece": "Показать опцию наушников для iPhone на всех платформах",
     "crypto_version": "Версия криптографии: {{version}}",
     "debug_tile_layout_label": "Отладка расположения плиток",
     "device_id": "Идентификатор устройства: {{id}}",
@@ -70,6 +71,7 @@
     "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-адреса",
@@ -172,6 +174,7 @@
     "devices": {
       "camera": "Камера",
       "camera_numbered": "Камера {{n}}",
+      "change_device_button": "Изменить аудиоустройство",
       "default": "По умолчанию",
       "default_named": "По умолчанию <2>({{name}})</2>",
       "microphone": "Микрофон",

locales/sk/app.json

@@ -61,6 +61,7 @@
     "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}}",
@@ -81,7 +82,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 <1> vytvorte nový</1>. </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 <2>vytvorte nový</2>.</0>",
     "connection_lost": "Strata spojenia",
     "connection_lost_description": "Boli ste odpojení od hovoru.",
     "e2ee_unsupported": "Nekompatibilný prehliadač",
@@ -173,8 +174,10 @@
     "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,6 +61,7 @@
     "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}}",
@@ -70,6 +71,7 @@
     "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",
@@ -80,7 +82,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 <1>skapa en ny</1>.</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 <2>skapa en ny</2>.</0>",
     "connection_lost": "Anslutning förlorad",
     "connection_lost_description": "Du kopplades bort från samtalet.",
     "e2ee_unsupported": "Inkompatibel webbläsare",
@@ -92,6 +94,8 @@
     "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": {
@@ -103,6 +107,11 @@
     "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",
@@ -164,12 +173,18 @@
       "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.201.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.203.0",
     "@opentelemetry/resources": "^2.0.0",
     "@opentelemetry/sdk-trace-base": "^2.0.0",
     "@opentelemetry/sdk-trace-web": "^2.0.0",
@@ -81,8 +81,8 @@
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^4.0.0",
-    "@vector-im/compound-web": "^7.12.0",
+    "@vector-im/compound-design-tokens": "^6.0.0",
+    "@vector-im/compound-web": "^8.0.0",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^3.0.0",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
@@ -129,7 +129,7 @@
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
-    "vite": "^6.0.0",
+    "vite": "^7.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,6 +40,11 @@ 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,3 +72,56 @@ 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/restricted-sfu.spec.ts

@@ -0,0 +1,75 @@
+/*
+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

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

src/App.tsx

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

src/AppBar.module.css

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

src/AppBar.test.tsx

@@ -0,0 +1,25 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TooltipProvider } from "@vector-im/compound-web";
+
+import { AppBar } from "./AppBar";
+
+describe("AppBar", () => {
+  it("renders", () => {
+    const { container } = render(
+      <TooltipProvider>
+        <AppBar>
+          <p>This is the content.</p>
+        </AppBar>
+      </TooltipProvider>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

src/AppBar.tsx

@@ -0,0 +1,134 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  createContext,
+  type FC,
+  type MouseEvent,
+  type ReactNode,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
+import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useTranslation } from "react-i18next";
+
+import { Header, LeftNav, RightNav } from "./Header";
+import { platform } from "./Platform";
+import styles from "./AppBar.module.css";
+
+interface AppBarContext {
+  setTitle: (value: string) => void;
+  setSecondaryButton: (value: ReactNode) => void;
+  setHidden: (value: boolean) => void;
+}
+
+const AppBarContext = createContext<AppBarContext | null>(null);
+
+interface Props {
+  children: ReactNode;
+}
+
+/**
+ * A "top app bar" featuring a back button, title and possibly a secondary
+ * button, similar to what you might see in mobile apps.
+ */
+export const AppBar: FC<Props> = ({ children }) => {
+  const { t } = useTranslation();
+  const onBackClick = useCallback((e: MouseEvent) => {
+    e.preventDefault();
+    window.controls.onBackButtonPressed?.();
+  }, []);
+
+  const [title, setTitle] = useState<string>("");
+  const [hidden, setHidden] = useState<boolean>(false);
+  const [secondaryButton, setSecondaryButton] = useState<ReactNode>(null);
+  const context = useMemo(
+    () => ({ setTitle, setSecondaryButton, setHidden }),
+    [setTitle, setHidden, setSecondaryButton],
+  );
+
+  return (
+    <>
+      <div
+        style={{ display: hidden ? "none" : "block" }}
+        className={styles.bar}
+      >
+        <Header
+          // App bar is mainly seen in the call view, which has its own
+          // 'reconnecting' toast
+          disconnectedBanner={false}
+        >
+          <LeftNav>
+            <Tooltip label={t("common.back")}>
+              <IconButton onClick={onBackClick}>
+                <CollapseIcon />
+              </IconButton>
+            </Tooltip>
+          </LeftNav>
+          {title && (
+            <Heading
+              type="body"
+              size="lg"
+              weight={platform === "android" ? "medium" : "semibold"}
+            >
+              {title}
+            </Heading>
+          )}
+          <RightNav>{secondaryButton}</RightNav>
+        </Header>
+      </div>
+      <AppBarContext value={context}>{children}</AppBarContext>
+    </>
+  );
+};
+
+/**
+ * React hook which sets the title to be shown in the app bar, if present. It is
+ * an error to call this hook from multiple sites in the same component tree.
+ */
+export function useAppBarTitle(title: string): void {
+  const setTitle = use(AppBarContext)?.setTitle;
+  useEffect(() => {
+    if (setTitle !== undefined) {
+      setTitle(title);
+      return (): void => setTitle("");
+    }
+  }, [title, setTitle]);
+}
+
+/**
+ * React hook which sets the title to be shown in the app bar, if present. It is
+ * an error to call this hook from multiple sites in the same component tree.
+ */
+export function useAppBarHidden(hidden: boolean): void {
+  const setHidden = use(AppBarContext)?.setHidden;
+  useEffect(() => {
+    if (setHidden !== undefined) {
+      setHidden(hidden);
+      return (): void => setHidden(false);
+    }
+  }, [setHidden, hidden]);
+}
+
+/**
+ * React hook which sets the secondary button to be shown in the app bar, if
+ * present. It is an error to call this hook from multiple sites in the same
+ * component tree.
+ */
+export function useAppBarSecondaryButton(button: ReactNode): void {
+  const setSecondaryButton = use(AppBarContext)?.setSecondaryButton;
+  useEffect(() => {
+    if (setSecondaryButton !== undefined) {
+      setSecondaryButton(button);
+      return (): void => setSecondaryButton("");
+    }
+  }, [button, setSecondaryButton]);
+}

src/ClientContext.tsx

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

src/FullScreenView.tsx

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

src/Header.tsx

@@ -6,12 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import {
-  type FC,
-  type HTMLAttributes,
-  type ReactNode,
-  forwardRef,
-} from "react";
+import { type Ref, type FC, type HTMLAttributes, type ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
@@ -22,15 +17,29 @@ 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 = forwardRef<HTMLElement, HeaderProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
+export const Header: FC<HeaderProps> = ({
+  ref,
+  children,
+  className,
+  disconnectedBanner = true,
+  ...rest
+}) => {
+  return (
+    <>
       <header
         ref={ref}
         className={classNames(styles.header, className)}
@@ -38,9 +47,10 @@ export const Header = forwardRef<HTMLElement, HeaderProps>(
       >
         {children}
       </header>
-    );
-  },
-);
+      {disconnectedBanner && <DisconnectedBanner />}
+    </>
+  );
+};
 
 Header.displayName = "Header";
 

src/MediaDevicesContext.ts

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

src/Toast.tsx

@@ -45,6 +45,12 @@ interface Props {
    * A supporting icon to display within the toast.
    */
   Icon?: ComponentType<SVGAttributes<SVGElement>>;
+  /**
+   * Whether the toast should be portaled into the root of the document (rather
+   * than rendered in-place within the component tree).
+   * @default true
+   */
+  portal?: boolean;
 }
 
 /**
@@ -56,6 +62,7 @@ export const Toast: FC<Props> = ({
   autoDismiss,
   children,
   Icon,
+  portal = true,
 }) => {
   const onOpenChange = useCallback(
     (open: boolean) => {
@@ -71,29 +78,33 @@ 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}>
-      <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>
+      {portal ? <DialogPortal>{content}</DialogPortal> : content}
     </DialogRoot>
   );
 };

src/UrlParams.test.ts

@@ -10,7 +10,7 @@ import { describe, expect, it } from "vitest";
 import {
   getRoomIdentifierFromUrl,
   getUrlParams,
-  UserIntent,
+  HeaderStyle,
 } from "../src/UrlParams";
 
 const ROOM_NAME = "roomNameHere";
@@ -82,6 +82,16 @@ 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", () => {
@@ -201,24 +211,68 @@ describe("UrlParams", () => {
   });
 
   describe("intent", () => {
-    it("defaults to unknown", () => {
-      expect(getUrlParams().intent).toBe(UserIntent.Unknown);
+    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: "notification",
+    });
+    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",
+    });
+    it("use no-intent-defaults with unknown intent", () => {
+      expect(getUrlParams()).toMatchObject(noIntentDefaults);
     });
 
     it("ignores intent if it is not a valid value", () => {
-      expect(getUrlParams("?intent=foo").intent).toBe(UserIntent.Unknown);
+      expect(getUrlParams("?intent=foo")).toMatchObject(noIntentDefaults);
     });
 
     it("accepts start_call", () => {
-      expect(getUrlParams("?intent=start_call").intent).toBe(
-        UserIntent.StartNewCall,
-      );
+      expect(
+        getUrlParams("?intent=start_call&widgetId=1234&parentUrl=parent.org"),
+      ).toMatchObject(startNewCallDefaults("desktop"));
     });
 
     it("accepts join_existing", () => {
-      expect(getUrlParams("?intent=join_existing").intent).toBe(
-        UserIntent.JoinExistingCall,
-      );
+      expect(
+        getUrlParams(
+          "?intent=join_existing&widgetId=1234&parentUrl=parent.org",
+        ),
+      ).toMatchObject(joinExistingCallDefaults("desktop"));
     });
   });
 
@@ -243,4 +297,12 @@ describe("UrlParams", () => {
       expect(getUrlParams("?intent=join_existing").skipLobby).toBe(false);
     });
   });
+  describe("header", () => {
+    it("uses header if provided", () => {
+      expect(getUrlParams("?header=app_bar&hideHeader=true").header).toBe(
+        "app_bar",
+      );
+      expect(getUrlParams("?header=none&hideHeader=false").header).toBe("none");
+    });
+  });
 });

src/UrlParams.ts

@@ -8,10 +8,13 @@ Please see LICENSE in the repository root for full details.
 import { useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { type RTCNotificationType } from "matrix-js-sdk/lib/matrixrtc";
+import { pickBy } from "lodash-es";
 
 import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
+import { platform } from "./Platform";
 
 interface RoomIdentifier {
   roomAlias: string | null;
@@ -22,15 +25,23 @@ interface RoomIdentifier {
 export enum UserIntent {
   StartNewCall = "start_call",
   JoinExistingCall = "join_existing",
+  StartNewCallDM = "start_call_dm",
+  JoinExistingCallDM = "join_existing_dm",
   Unknown = "unknown",
 }
 
-// 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 {
+export enum HeaderStyle {
+  None = "none",
+  Standard = "standard",
+  AppBar = "app_bar",
+}
+
+/**
+ * The UrlProperties are used to pass required data to the widget.
+ * Those are different in different rooms, users, devices. They do not configure the behavior of the
+ * widget but provide the required data to the widget.
+ */
+export interface UrlProperties {
   // Widget api related params
   widgetId: string | null;
   parentUrl: string | null;
@@ -42,42 +53,11 @@ export interface UrlParams {
    * is also not validated, where it is in useRoomIdentifier().
    */
   roomId: string | null;
-  /**
-   * Whether the app should keep the user confined to the current call/room.
-   */
-  confineToRoom: boolean;
-  /**
-   * Whether upon entering a room, the user should be prompted to launch the
-   * native mobile app. (Affects only Android and iOS.)
-   *
-   * The app prompt must also be enabled in the config for this to take effect.
-   */
-  appPrompt: boolean;
-  /**
-   * Whether the app should pause before joining the call until it sees an
-   * io.element.join widget action, allowing it to be preloaded.
-   */
-  preload: boolean;
-  /**
-   * Whether to hide the room header when in a call.
-   */
-  hideHeader: boolean;
-  /**
-   * Whether the controls should be shown. For screen recording no controls can be desired.
-   */
-  showControls: boolean;
-  /**
-   * Whether to hide the screen-sharing button.
-   */
-  hideScreensharing: boolean;
-  /**
-   * Whether to use end-to-end encryption.
-   */
-  e2eEnabled: boolean;
   /**
    * The user's ID (only used in matryoshka mode).
    */
   userId: string | null;
+
   /**
    * The display name to use for auto-registration.
    */
@@ -115,14 +95,96 @@ export interface UrlParams {
    */
   posthogApiKey: string | null;
   /**
-   * Whether the app is allowed to use fallback STUN servers for ICE in case the
-   * user's homeserver doesn't provide any.
+   * Whether to use end-to-end encryption.
    */
-  allowIceFallback: boolean;
+  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;
+
   /**
    * Whether the app should use per participant keys for E2EE.
    */
@@ -145,47 +207,35 @@ export interface UrlParams {
    */
   returnToLobby: boolean;
   /**
-   * The theme to use for element call.
-   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
+   * Whether and what type of notification EC should send, when the user joins the call.
    */
-  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;
+  sendNotificationType?: RTCNotificationType;
   /**
-   * 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.
+   * 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.
    */
-  homeserver: string | null;
+  autoLeaveWhenOthersLeft: boolean;
 
   /**
-   * 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`.
+   * 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.
    */
-  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;
+  waitForCallPickup: 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 {}
+
 // 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
 // consolidate all the data about URL parameters and their meanings to this one
@@ -226,6 +276,17 @@ 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),
@@ -233,10 +294,20 @@ 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;
+  }
 }
 
 /**
@@ -253,32 +324,98 @@ export const getUrlParams = (
 
   const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
 
-  let intent = parser.getParam("intent");
-  if (!intent || !Object.values(UserIntent).includes(intent as UserIntent)) {
-    intent = UserIntent.Unknown;
-  }
   const widgetId = parser.getParam("widgetId");
   const parentUrl = parser.getParam("parentUrl");
   const isWidget = !!widgetId && !!parentUrl;
 
-  return {
+  /**
+   * The user's intent with respect to the call.
+   * e.g. if they clicked a Start Call button, this would be `start_call`.
+   * If it was a Join Call button, it would be `join_existing`.
+   * This is a platform specific default set of parameters, that allows to minize the configuration
+   * needed to start a call. And empowers the EC codebase to control the platform/intent behavior in
+   * a central place.
+   *
+   * In short: either provide url query parameters of UrlConfiguration or set the intent
+   * (or the global defaults will be used).
+   */
+  const intent = !isWidget
+    ? UserIntent.Unknown
+    : (parser.getEnumParam("intent", UserIntent) ?? UserIntent.Unknown);
+  // Here we only use constants and `platform` to determine the intent preset.
+  let intentPreset: UrlConfiguration;
+  const inAppDefault = {
+    confineToRoom: true,
+    appPrompt: false,
+    preload: 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" as RTCNotificationType,
+    autoLeaveWhenOthersLeft: false,
+    waitForCallPickup: false,
+  };
+  switch (intent) {
+    case UserIntent.StartNewCall:
+      intentPreset = {
+        ...inAppDefault,
+        skipLobby: true,
+      };
+      break;
+    case UserIntent.JoinExistingCall:
+      intentPreset = {
+        ...inAppDefault,
+        skipLobby: false,
+      };
+      break;
+    case UserIntent.StartNewCallDM:
+      intentPreset = {
+        ...inAppDefault,
+        skipLobby: true,
+        autoLeaveWhenOthersLeft: true,
+        waitForCallPickup: true,
+      };
+      break;
+    case UserIntent.JoinExistingCallDM:
+      intentPreset = {
+        ...inAppDefault,
+        skipLobby: true,
+        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 properties: UrlProperties = {
     widgetId,
     parentUrl,
-
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
     // what would we do if it were invalid? If the widget API says that's what
     // the room ID is, then that's what it is.
     roomId: parser.getParam("roomId"),
     password: parser.getParam("password"),
-    // This flag has 'embed' as an alias for historical reasons
-    confineToRoom:
-      parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
-    appPrompt: parser.getFlagParam("appPrompt", true),
-    preload: isWidget ? parser.getFlagParam("preload") : false,
-    hideHeader: parser.getFlagParam("hideHeader"),
-    showControls: parser.getFlagParam("showControls", true),
-    hideScreensharing: parser.getFlagParam("hideScreensharing"),
-    e2eEnabled: parser.getFlagParam("enableE2EE", true),
     userId: isWidget ? parser.getParam("userId") : null,
     displayName: parser.getParam("displayName"),
     deviceId: isWidget ? parser.getParam("deviceId") : null,
@@ -286,24 +423,9 @@ export const getUrlParams = (
     lang: parser.getParam("lang"),
     fonts: parser.getAllParams("font"),
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
-    allowIceFallback: parser.getFlagParam("allowIceFallback"),
-    perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
-    controlledAudioDevices: parser.getFlagParam(
-      "controlledAudioDevices",
-      // the deprecated property name
-      parser.getFlagParam("controlledMediaDevices"),
-    ),
-    skipLobby: parser.getFlagParam(
-      "skipLobby",
-      isWidget && intent === UserIntent.StartNewCall,
-    ),
-    // In SPA mode the user should always exit to the home screen when hanging
-    // up, rather than being sent back to the lobby
-    returnToLobby: isWidget ? parser.getFlagParam("returnToLobby") : false,
     theme: parser.getParam("theme"),
     viaServers: !isWidget ? parser.getParam("viaServers") : null,
     homeserver: !isWidget ? parser.getParam("homeserver") : null,
-    intent,
     posthogApiHost: parser.getParam("posthogApiHost"),
     posthogApiKey: parser.getParam("posthogApiKey"),
     posthogUserId:
@@ -311,6 +433,37 @@ export const getUrlParams = (
     rageshakeSubmitUrl: parser.getParam("rageshakeSubmitUrl"),
     sentryDsn: parser.getParam("sentryDsn"),
     sentryEnvironment: parser.getParam("sentryEnvironment"),
+    e2eEnabled: parser.getFlagParam("enableE2EE", true),
+  };
+
+  const configuration: Partial<UrlConfiguration> = {
+    confineToRoom: parser.getFlag("confineToRoom"),
+    appPrompt: parser.getFlag("appPrompt"),
+    preload: isWidget ? parser.getFlag("preload") : undefined,
+    // Check hideHeader for backwards compatibility. If header is set, hideHeader
+    // is ignored.
+    header: parser.getEnumParam("header", HeaderStyle),
+    showControls: parser.getFlag("showControls"),
+    hideScreensharing: parser.getFlag("hideScreensharing"),
+    allowIceFallback: parser.getFlag("allowIceFallback"),
+    perParticipantE2EE: parser.getFlag("perParticipantE2EE"),
+    controlledAudioDevices: parser.getFlag("controlledAudioDevices"),
+    skipLobby: isWidget ? parser.getFlag("skipLobby") : false,
+    // In SPA mode the user should always exit to the home screen when hanging
+    // up, rather than being sent back to the lobby
+    returnToLobby: isWidget ? parser.getFlag("returnToLobby") : false,
+    sendNotificationType: parser.getEnumParam("sendNotificationType", [
+      "ring",
+      "notification",
+    ]),
+    waitForCallPickup: parser.getFlag("waitForCallPickup"),
+    autoLeaveWhenOthersLeft: parser.getFlag("autoLeave"),
+  };
+
+  return {
+    ...properties,
+    ...intentPreset,
+    ...pickBy(configuration, (v?: unknown) => v !== undefined),
   };
 };
 
@@ -369,10 +522,16 @@ export function getRoomIdentifierFromUrl(
 
   // Make sure roomId is valid
   let roomId: string | null = parser.getParam("roomId");
-  if (!roomId?.startsWith("!")) {
-    roomId = null;
-  } else if (!roomId.includes("")) {
-    roomId = null;
+  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;
+    }
   }
 
   return {

src/__snapshots__/AppBar.test.tsx.snap

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

src/button/Button.tsx

@@ -16,7 +16,6 @@ import {
   EndCallIcon,
   ShareScreenSolidIcon,
   SettingsSolidIcon,
-  SwitchCameraSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
@@ -67,23 +66,6 @@ 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/Link.tsx

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

src/button/LinkButton.tsx

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

src/button/ReactionToggleButton.tsx

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

src/config/ConfigOptions.ts

@@ -114,24 +114,29 @@ 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;
-    /** @deprecated use delayed_leave_event_delay_ms instead */
-    membership_server_side_expiry_timeout?: 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;
 
     /**
      * 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/controls.ts

@@ -1,32 +1,36 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024-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 { BehaviorSubject, Subject } from "rxjs";
+import { Subject } from "rxjs";
+import { logger } from "matrix-js-sdk/lib/logger";
 
 export interface Controls {
   canEnterPip(): boolean;
   enablePip(): void;
   disablePip(): void;
-  /** @deprecated use  setAvailableAudioDevices instead*/
-  setAvailableOutputDevices(devices: OutputDevice[]): void;
+
   setAvailableAudioDevices(devices: OutputDevice[]): void;
-  /** @deprecated use  setAudioDevice instead*/
-  setOutputDevice(id: string): void;
   setAudioDevice(id: string): void;
-  /** @deprecated use  onAudioDeviceSelect instead*/
-  onOutputDeviceSelect?: (id: string) => void;
   onAudioDeviceSelect?: (id: string) => void;
   onAudioPlaybackStarted?: () => void;
+  setAudioEnabled(enabled: boolean): void;
+  showNativeAudioDevicePicker?: () => void;
+  onBackButtonPressed?: () => void;
+
+  /** @deprecated use  setAvailableAudioDevices instead*/
+  setAvailableOutputDevices(devices: OutputDevice[]): void;
+  /** @deprecated use  setAudioDevice instead*/
+  setOutputDevice(id: string): void;
+  /** @deprecated use  onAudioDeviceSelect instead*/
+  onOutputDeviceSelect?: (id: string) => void;
   /** @deprecated use  setAudioEnabled instead*/
   setOutputEnabled(enabled: boolean): void;
-  setAudioEnabled(enabled: boolean): void;
   /** @deprecated use  showNativeAudioDevicePicker instead*/
   showNativeOutputDevicePicker?: () => void;
-  showNativeAudioDevicePicker?: () => void;
 }
 
 export interface OutputDevice {
@@ -42,12 +46,11 @@ export interface OutputDevice {
  * If pipMode is enabled, EC will render a adapted call view layout.
  */
 export const setPipEnabled$ = new Subject<boolean>();
-// BehaviorSubject since the client might set this before we have subscribed (GroupCallView still in "loading" state)
-// We want the devices that have been set during loading to be available immediately once loaded.
-export const availableOutputDevices$ = new BehaviorSubject<OutputDevice[]>([]);
-// BehaviorSubject since the client might set this before we have subscribed (GroupCallView still in "loading" state)
-// We want the device that has been set during loading to be available immediately once loaded.
-export const outputDevice$ = new BehaviorSubject<string | undefined>(undefined);
+
+export const availableOutputDevices$ = new Subject<OutputDevice[]>();
+
+export const outputDevice$ = new Subject<string>();
+
 /**
  * This allows the os to mute the call if the user
  * presses the volume down button when it is at the minimum volume.
@@ -55,6 +58,7 @@ export const outputDevice$ = new BehaviorSubject<string | undefined>(undefined);
  * This should also be used to display a darkened overlay screen letting the user know that audio is muted.
  */
 export const setAudioEnabled$ = new Subject<boolean>();
+
 let playbackStartedEmitted = false;
 export const setPlaybackStarted = (): void => {
   if (!playbackStartedEmitted) {
@@ -62,6 +66,7 @@ export const setPlaybackStarted = (): void => {
     window.controls.onAudioPlaybackStarted?.();
   }
 };
+
 window.controls = {
   canEnterPip(): boolean {
     return setPipEnabled$.observed;
@@ -74,13 +79,17 @@ window.controls = {
     if (!setPipEnabled$.observed) throw new Error("No call is running");
     setPipEnabled$.next(false);
   },
+
   setAvailableAudioDevices(devices: OutputDevice[]): void {
+    logger.info("setAvailableAudioDevices called from native:", devices);
     availableOutputDevices$.next(devices);
   },
   setAudioDevice(id: string): void {
+    logger.info("setAudioDevice called from native", id);
     outputDevice$.next(id);
   },
   setAudioEnabled(enabled: boolean): void {
+    logger.info("setAudioEnabled called from native:", enabled);
     if (!setAudioEnabled$.observed)
       throw new Error(
         "Output controls are disabled. No setAudioEnabled$ observer",

src/form/Form.tsx

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

src/grid/Grid.tsx

@@ -18,23 +18,22 @@ import {
   type ComponentType,
   type Dispatch,
   type FC,
-  type LegacyRef,
   type ReactNode,
+  type Ref,
   type SetStateAction,
   createContext,
-  forwardRef,
   memo,
-  useContext,
+  use,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  useSyncExternalStore,
 } from "react";
 import useMeasure from "react-use-measure";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { useObservableEagerState } from "observable-hooks";
-import { fromEvent, map, startWith } from "rxjs";
 
 import styles from "./Grid.module.css";
 import { useMergedRefs } from "../useMergedRefs";
@@ -124,7 +123,7 @@ interface LayoutContext {
 const LayoutContext = createContext<LayoutContext | null>(null);
 
 function useLayoutContext(): LayoutContext {
-  const context = useContext(LayoutContext);
+  const context = use(LayoutContext);
   if (context === null)
     throw new Error("useUpdateLayout called outside a Grid layout context");
   return context;
@@ -156,13 +155,8 @@ export function useVisibleTiles(callback: VisibleTilesCallback): void {
   );
 }
 
-const windowHeightObservable$ = fromEvent(window, "resize").pipe(
-  startWith(null),
-  map(() => window.innerHeight),
-);
-
 export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
-  ref: LegacyRef<R>;
+  ref?: Ref<R>;
   model: LayoutModel;
   /**
    * Component creating an invisible "slot" for a tile to go in.
@@ -171,7 +165,7 @@ export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
 }
 
 export interface TileProps<Model, R extends HTMLElement> {
-  ref: LegacyRef<R>;
+  ref?: Ref<R>;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
   /**
@@ -262,7 +256,13 @@ export function Grid<
   const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
   const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);
 
-  const windowHeight = useObservableEagerState(windowHeightObservable$);
+  const windowHeight = useSyncExternalStore(
+    useCallback((onChange) => {
+      window.addEventListener("resize", onChange);
+      return (): void => window.removeEventListener("resize", onChange);
+    }, []),
+    useCallback(() => window.innerHeight, []),
+  );
   const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
   const [generation, setGeneration] = useState<number | null>(null);
   const [visibleTilesCallback, setVisibleTilesCallback] =
@@ -297,14 +297,13 @@ export function Grid<
   // render of Grid causes a re-render of Layout, which in turn re-renders Grid
   const LayoutMemo = useMemo(
     () =>
-      memo(
-        forwardRef<
-          LayoutRef,
-          LayoutMemoProps<LayoutModel, TileModel, LayoutRef>
-        >(function LayoutMemo({ Layout, ...props }, ref): ReactNode {
-          return <Layout {...props} ref={ref} />;
-        }),
-      ),
+      memo(function LayoutMemo({
+        ref,
+        Layout,
+        ...props
+      }: LayoutMemoProps<LayoutModel, TileModel, LayoutRef>): ReactNode {
+        return <Layout {...props} ref={ref} />;
+      }),
     [],
   );
 
@@ -532,14 +531,14 @@ export function Grid<
       className={classNames(className, styles.grid)}
       style={style}
     >
-      <LayoutContext.Provider value={context}>
+      <LayoutContext value={context}>
         <LayoutMemo
           ref={setLayoutRoot}
           Layout={Layout}
           model={model}
           Slot={Slot}
         />
-      </LayoutContext.Provider>
+      </LayoutContext>
       {tileTransitions((spring, { id, model, onDrag, width, height }) => (
         <TileWrapper
           key={id}

src/grid/GridLayout.tsx

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

src/grid/OneOnOneLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { forwardRef, useCallback, useMemo } from "react";
+import { type ReactNode, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -13,6 +13,7 @@ import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewMod
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";
+import { useBehavior } from "../useBehavior";
 
 /**
  * An implementation of the "one-on-one" layout, in which the remote participant
@@ -24,15 +25,15 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
 }) => ({
   scrollingOnTop: false,
 
-  fixed: forwardRef(function OneOnOneLayoutFixed(_props, ref) {
+  fixed: function OneOnOneLayoutFixed({ ref }): ReactNode {
     useUpdateLayout();
     return <div ref={ref} />;
-  }),
+  },
 
-  scrolling: forwardRef(function OneOnOneLayoutScrolling({ model, Slot }, ref) {
+  scrolling: function OneOnOneLayoutScrolling({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     const { width, height } = useObservableEagerState(minBounds$);
-    const pipAlignmentValue = useObservableEagerState(pipAlignment$);
+    const pipAlignmentValue = useBehavior(pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),
       [width, height],
@@ -66,5 +67,5 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
         </Slot>
       </div>
     );
-  }),
+  },
 });

src/grid/SpotlightExpandedLayout.tsx

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

src/grid/SpotlightLandscapeLayout.tsx

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

src/grid/SpotlightPortraitLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type CSSProperties, forwardRef } from "react";
+import { type ReactNode, type CSSProperties } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -13,6 +13,7 @@ import { type CallLayout, arrangeTiles } from "./CallLayout";
 import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightPortraitLayout.module.css";
 import { useUpdateLayout, useVisibleTiles } from "./Grid";
+import { useBehavior } from "../useBehavior";
 
 interface GridCSSProperties extends CSSProperties {
   "--grid-gap": string;
@@ -30,10 +31,11 @@ export const makeSpotlightPortraitLayout: CallLayout<
 > = ({ minBounds$ }) => ({
   scrollingOnTop: false,
 
-  fixed: forwardRef(function SpotlightPortraitLayoutFixed(
-    { model, Slot },
+  fixed: function SpotlightPortraitLayoutFixed({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
 
     return (
@@ -47,12 +49,13 @@ export const makeSpotlightPortraitLayout: CallLayout<
         </div>
       </div>
     );
-  }),
+  },
 
-  scrolling: forwardRef(function SpotlightPortraitLayoutScrolling(
-    { model, Slot },
+  scrolling: function SpotlightPortraitLayoutScrolling({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
     const { width } = useObservableEagerState(minBounds$);
@@ -63,8 +66,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
       width,
       model.grid.length,
     );
-    const withIndicators =
-      useObservableEagerState(model.spotlight.media$).length > 1;
+    const withIndicators = useBehavior(model.spotlight.media$).length > 1;
 
     return (
       <div
@@ -90,5 +92,5 @@ export const makeSpotlightPortraitLayout: CallLayout<
         </div>
       </div>
     );
-  }),
+  },
 });

src/grid/TileWrapper.tsx

@@ -61,7 +61,12 @@ const TileWrapper_ = memo(
     useDrag((state) => onDrag?.current!(id, state), {
       target: ref,
       filterTaps: true,
-      preventScroll: 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
     });
 
     return (

src/home/RegisteredView.tsx

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

src/home/UnauthenticatedView.tsx

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

src/icons/FullScreenMaximise.svg

@@ -0,0 +1,6 @@
+<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

@@ -0,0 +1,6 @@
+<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/index.css

@@ -45,6 +45,9 @@ layer(compound);
   --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
   --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   --background-gradient: url("graphics/backgroundGradient.svg");
+
+  --call-view-overlay-layer: 1;
+  --call-view-header-footer-layer: 2;
 }
 
 :root,
@@ -71,6 +74,13 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
+/* This prohibits the view to scroll for pages smaller than 122px in width
+we use this for mobile pip webviews */
+.no-scroll-body {
+  position: fixed;
+  width: 100%;
+}
+
 /* We use this to not render the page at all until we know the theme.*/
 .no-theme {
   opacity: 0;

src/input/Input.tsx

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

src/livekit/BlurBackgroundTransformer.ts

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

src/livekit/MatrixAudioRenderer.test.tsx

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

src/livekit/MatrixAudioRenderer.tsx

@@ -14,13 +14,12 @@ import {
   type AudioTrackProps,
 } from "@livekit/components-react";
 import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+import { logger } from "matrix-js-sdk/lib/logger";
 
-import { useEarpieceAudioConfig } from "./MediaDevicesContext";
+import { useEarpieceAudioConfig } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import * as controls from "../controls";
 
-const logger = rootLogger.getChild("[MatrixAudioRenderer]");
 export interface MatrixAudioRendererProps {
   /**
    * The list of participants to render audio for.
@@ -72,7 +71,7 @@ export function MatrixAudioRenderer({
   const logInvalid = (identity: string, validIdentities: Set<string>): void => {
     if (loggedInvalidIdentities.current.has(identity)) return;
     logger.warn(
-      `Audio track ${identity} has no matching matrix call member`,
+      `[MatrixAudioRenderer] Audio track ${identity} has no matching matrix call member`,
       `current members: ${Array.from(validIdentities.values())}`,
       `track will not get rendered`,
     );
@@ -102,7 +101,7 @@ export function MatrixAudioRenderer({
   useEffect(() => {
     if (!tracks.some((t) => !validIdentities.has(t.participant.identity))) {
       logger.debug(
-        `All audio tracks have a matching matrix call member identity.`,
+        `[MatrixAudioRenderer] All audio tracks have a matching matrix call member identity.`,
       );
       loggedInvalidIdentities.current.clear();
     }
@@ -182,7 +181,7 @@ interface StereoPanAudioTrackProps {
 /**
  * This wraps `livekit.AudioTrack` to allow adding audio nodes to a track.
  * It main purpose is to remount the AudioTrack component when switching from
- * audiooContext to normal audio playback.
+ * audioContext to normal audio playback.
  * As of now the AudioTrack component does not support adding audio nodes while being mounted.
  * @param param0
  * @returns
@@ -202,7 +201,7 @@ function AudioTrackWithAudioNodes({
   const [trackReady, setTrackReady] = useReactiveState(
     () => false,
     // We only want the track to reset once both (audioNodes and audioContext) are set.
-    // for unsetting the audioContext its enough if one of the the is undefined.
+    // for unsetting the audioContext its enough if one of the two is undefined.
     [audioContext && audioNodes],
   );
 

src/livekit/MediaDevicesContext.tsx

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

src/livekit/TrackProcessorContext.tsx

@@ -1,7 +1,7 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024-2025 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
@@ -14,7 +14,7 @@ import {
   createContext,
   type FC,
   type JSX,
-  useContext,
+  use,
   useEffect,
   useMemo,
 } from "react";
@@ -34,7 +34,7 @@ type ProcessorState = {
 const ProcessorContext = createContext<ProcessorState | undefined>(undefined);
 
 export function useTrackProcessor(): ProcessorState {
-  const state = useContext(ProcessorContext);
+  const state = use(ProcessorContext);
   if (state === undefined)
     throw new Error(
       "useTrackProcessor must be used within a ProcessorProvider",
@@ -83,9 +83,5 @@ export const ProcessorProvider: FC<Props> = ({ children }) => {
     [supported, blurActivated, blur],
   );
 
-  return (
-    <ProcessorContext.Provider value={processorState}>
-      {children}
-    </ProcessorContext.Provider>
-  );
+  return <ProcessorContext value={processorState}>{children}</ProcessorContext>;
 };

src/livekit/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 { defer, sleep } from "matrix-js-sdk/lib/utils";
+import { 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 = defer<void>();
-    // let pendingDisconnection = defer<void>()
+    const pendingConnection = Promise.withResolvers<void>();
+    // let pendingDisconnection = Promise.withResolvers<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 = defer<void>();
-    // let pendingDisconnection = defer<void>()
+    const pendingCreateTrack = Promise.withResolvers<void>();
+    // let pendingDisconnection = Promise.withResolvers<void>()
     const disconnectMock = vi.fn();
     const connectMock = vi.fn();
 

src/livekit/useECConnectionState.ts

@@ -22,17 +22,11 @@ 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
@@ -169,12 +163,7 @@ async function connectAndPublish(
 
   try {
     logger.info(`[Lifecycle] Connecting to livekit room ${sfuConfig!.url} ...`);
-    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,
-    });
+    await livekitRoom!.connect(sfuConfig!.url, sfuConfig!.jwt);
     logger.info(`[Lifecycle] ... connected to livekit room`);
   } catch (e) {
     logger.error("[Lifecycle] Failed to connect", e);
@@ -184,11 +173,19 @@ 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 &&
-      (e.status === 503 || e.status === 200 || e.status === 429)
-    )
-      throw new InsufficientCapacityError();
+    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();
+      }
+    }
     throw e;
   }
 

src/livekit/useLivekit.ts

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

src/main.tsx

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

src/reactions/useReactionsSender.tsx

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { EventType, RelationType } from "matrix-js-sdk";
 import {
   createContext,
-  useContext,
+  use,
   type ReactNode,
   useCallback,
   useMemo,
@@ -16,12 +16,12 @@ import {
 } from "react";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { useObservableEagerState } from "observable-hooks";
 
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { useClientState } from "../ClientContext";
 import { ElementCallReactionEventType, type ReactionOption } from ".";
 import { type CallViewModel } from "../state/CallViewModel";
+import { useBehavior } from "../useBehavior";
 
 interface ReactionsSenderContextType {
   supportsReactions: boolean;
@@ -34,7 +34,7 @@ const ReactionsSenderContext = createContext<
 >(undefined);
 
 export const useReactionsSender = (): ReactionsSenderContextType => {
-  const context = useContext(ReactionsSenderContext);
+  const context = use(ReactionsSenderContext);
   if (!context) {
     throw new Error("useReactions must be used within a ReactionsProvider");
   }
@@ -70,7 +70,7 @@ export const ReactionsSenderProvider = ({
     [memberships, myUserId, myDeviceId],
   );
 
-  const reactions = useObservableEagerState(vm.reactions$);
+  const reactions = useBehavior(vm.reactions$);
   const myReaction = useMemo(
     () =>
       myMembershipIdentifier !== undefined
@@ -79,7 +79,7 @@ export const ReactionsSenderProvider = ({
     [myMembershipIdentifier, reactions],
   );
 
-  const handsRaised = useObservableEagerState(vm.handsRaised$);
+  const handsRaised = useBehavior(vm.handsRaised$);
   const myRaisedHand = useMemo(
     () =>
       myMembershipIdentifier !== undefined
@@ -157,7 +157,7 @@ export const ReactionsSenderProvider = ({
   );
 
   return (
-    <ReactionsSenderContext.Provider
+    <ReactionsSenderContext
       value={{
         supportsReactions,
         toggleRaisedHand,
@@ -165,6 +165,6 @@ export const ReactionsSenderProvider = ({
       }}
     >
       {children}
-    </ReactionsSenderContext.Provider>
+    </ReactionsSenderContext>
   );
 };

src/room/CallEndedView.tsx

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

src/room/CallEventAudioRenderer.test.tsx

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

src/room/CallEventAudioRenderer.tsx

@@ -6,7 +6,6 @@ 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";
@@ -17,15 +16,14 @@ 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,
@@ -43,8 +41,18 @@ 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,
@@ -60,37 +68,18 @@ export function CallEventAudioRenderer({
   const audioEngineRef = useLatest(audioEngineCtx);
 
   useEffect(() => {
-    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");
-    });
+    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"),
+    );
 
     return (): void => {
       joinSub.unsubscribe();

src/room/EarpieceOverlay.module.css

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

src/room/EarpieceOverlay.tsx

@@ -0,0 +1,44 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC } from "react";
+import { BigIcon, Button, Heading, Text } from "@vector-im/compound-web";
+import { VoiceCallIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useTranslation } from "react-i18next";
+
+import styles from "./EarpieceOverlay.module.css";
+
+interface Props {
+  show: boolean;
+  onBackToVideoPressed?: (() => void) | null;
+}
+
+export const EarpieceOverlay: FC<Props> = ({ show, onBackToVideoPressed }) => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.overlay} data-show={show}>
+      <BigIcon className={styles.icon}>
+        <VoiceCallIcon aria-hidden />
+      </BigIcon>
+      <Heading as="h2" weight="semibold" size="md">
+        {t("handset.overlay_title")}
+      </Heading>
+      <Text>{t("handset.overlay_description")}</Text>
+      <Button
+        kind="primary"
+        size="sm"
+        onClick={() => {
+          onBackToVideoPressed?.();
+        }}
+      >
+        {t("handset.overlay_back_button")}
+      </Button>
+      {/* This spacer is used to give the overlay an offset to the top. */}
+      <div className={styles.spacer} />
+    </div>
+  );
+};

src/room/GroupCallErrorBoundary.test.tsx

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

src/room/GroupCallErrorBoundary.tsx

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

src/room/GroupCallView.test.tsx

@@ -12,11 +12,14 @@ import {
   onTestFinished,
   test,
   vi,
+  vitest,
 } from "vitest";
-import { render, waitFor, screen } from "@testing-library/react";
+import { render, waitFor, screen, act } from "@testing-library/react";
 import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
-import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
-import { of } from "rxjs";
+import {
+  MatrixRTCSessionEvent,
+  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";
@@ -32,6 +35,7 @@ import {
   mockEmitter,
   mockMatrixRoom,
   mockMatrixRoomMember,
+  mockMediaDevices,
   mockRtcMembership,
   MockRTCSession,
 } from "../utils/test";
@@ -40,6 +44,9 @@ import { type WidgetHelpers } from "../widget";
 import { LazyEventEmitter } from "../LazyEventEmitter";
 import { MatrixRTCFocusMissingError } from "../utils/errors";
 import { ProcessorProvider } from "../livekit/TrackProcessorContext";
+import { MediaDevicesContext } from "../MediaDevicesContext";
+import { HeaderStyle } from "../UrlParams";
+import { constant } from "../state/Behavior";
 
 vi.mock("../soundUtils");
 vi.mock("../useAudioContext");
@@ -91,13 +98,15 @@ 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()}>Leave</button>
+          <button onClick={() => onLeave("user")}>Leave</button>
         </div>
       );
     },
@@ -134,11 +143,9 @@ function createGroupCallView(
       getJoinRule: () => JoinRule.Invite,
     } as Partial<RoomState> as RoomState,
   });
-  const rtcSession = new MockRTCSession(
-    room,
-    localRtcMember,
-    [],
-  ).withMemberships(of([]));
+  const rtcSession = new MockRTCSession(room, []).withMemberships(
+    constant([localRtcMember]),
+  );
   rtcSession.joined = joined;
   const muteState = {
     audio: { enabled: false },
@@ -147,20 +154,22 @@ function createGroupCallView(
   const { getByText } = render(
     <BrowserRouter>
       <TooltipProvider>
-        <ProcessorProvider>
-          <GroupCallView
-            client={client}
-            isPasswordlessUser={false}
-            confineToRoom={false}
-            preload={false}
-            skipLobby={false}
-            hideHeader={true}
-            rtcSession={rtcSession as unknown as MatrixRTCSession}
-            isJoined={joined}
-            muteStates={muteState}
-            widget={widget}
-          />
-        </ProcessorProvider>
+        <MediaDevicesContext value={mockMediaDevices({})}>
+          <ProcessorProvider>
+            <GroupCallView
+              client={client}
+              isPasswordlessUser={false}
+              confineToRoom={false}
+              preload={false}
+              skipLobby={false}
+              header={HeaderStyle.Standard}
+              rtcSession={rtcSession as unknown as MatrixRTCSession}
+              isJoined={joined}
+              muteStates={muteState}
+              widget={widget}
+            />
+          </ProcessorProvider>
+        </MediaDevicesContext>
       </TooltipProvider>
     </BrowserRouter>,
   );
@@ -203,6 +212,8 @@ 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(
@@ -255,3 +266,19 @@ 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

@@ -24,7 +24,6 @@ import {
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { useNavigate } from "react-router-dom";
-import { useObservableEagerState } from "observable-hooks";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
@@ -40,7 +39,7 @@ import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
 import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates";
-import { useMediaDevices } from "../livekit/MediaDevicesContext";
+import { useMediaDevices } from "../MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import {
@@ -51,10 +50,13 @@ import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import { useUrlParams } from "../UrlParams";
+import { HeaderStyle, type UrlParams, useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useAudioContext } from "../useAudioContext";
-import { callEventAudioSounds } from "./CallEventAudioRenderer";
+import {
+  callEventAudioSounds,
+  type CallEventSounds,
+} from "./CallEventAudioRenderer";
 import { useLatest } from "../useLatest";
 import { usePageTitle } from "../usePageTitle";
 import {
@@ -71,6 +73,8 @@ import {
 } from "../settings/settings";
 import { useTypedEventEmitter } from "../useEvents";
 import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
+import { useAppBarTitle } from "../AppBar.tsx";
+import { useBehavior } from "../useBehavior.ts";
 
 declare global {
   interface Window {
@@ -82,9 +86,9 @@ interface Props {
   client: MatrixClient;
   isPasswordlessUser: boolean;
   confineToRoom: boolean;
-  preload: boolean;
-  skipLobby: boolean;
-  hideHeader: boolean;
+  preload: UrlParams["preload"];
+  skipLobby: UrlParams["skipLobby"];
+  header: HeaderStyle;
   rtcSession: MatrixRTCSession;
   isJoined: boolean;
   muteStates: MuteStates;
@@ -97,7 +101,7 @@ export const GroupCallView: FC<Props> = ({
   confineToRoom,
   preload,
   skipLobby,
-  hideHeader,
+  header,
   rtcSession,
   isJoined,
   muteStates,
@@ -109,7 +113,7 @@ export const GroupCallView: FC<Props> = ({
   );
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
 
-  const muteAllAudio = useObservableEagerState(muteAllAudio$);
+  const muteAllAudio = useBehavior(muteAllAudio$);
   const leaveSoundContext = useLatest(
     useAudioContext({
       sounds: callEventAudioSounds,
@@ -131,6 +135,16 @@ export const GroupCallView: FC<Props> = ({
     };
   }, []);
 
+  // This CSS is the only way we could find to not make element call scroll for
+  // viewport sizes smaller than 122px width. (It is actually this exact number: 122px
+  // tested on different devices...)
+  useEffect(() => {
+    document.body.classList.add("no-scroll-body");
+    return (): void => {
+      document.body.classList.remove("no-scroll-body");
+    };
+  }, []);
+
   useEffect(() => {
     window.rtcSession = rtcSession;
     return (): void => {
@@ -155,7 +169,11 @@ export const GroupCallView: FC<Props> = ({
   const { displayName, avatarUrl } = useProfile(client);
   const roomName = useRoomName(room);
   const roomAvatar = useRoomAvatar(room);
-  const { perParticipantE2EE, returnToLobby } = useUrlParams();
+  const {
+    perParticipantE2EE,
+    returnToLobby,
+    password: passwordFromUrl,
+  } = useUrlParams();
   const e2eeSystem = useRoomEncryptionSystem(room.roomId);
   const [useNewMembershipManager] = useSetting(useNewMembershipManagerSetting);
   const [useExperimentalToDeviceTransport] = useSetting(
@@ -163,12 +181,12 @@ 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]);
 
   usePageTitle(roomName);
+  useAppBarTitle(roomName);
 
   const matrixInfo = useMemo((): MatrixInfo => {
     return {
@@ -189,8 +207,7 @@ export const GroupCallView: FC<Props> = ({
     [memberships],
   );
 
-  const deviceContext = useMediaDevices();
-  const latestDevices = useLatest(deviceContext);
+  const mediaDevices = useMediaDevices();
   const latestMuteStates = useLatest(muteStates);
 
   const enterRTCSessionOrError = useCallback(
@@ -242,7 +259,7 @@ export const GroupCallView: FC<Props> = ({
           logger.debug(
             `Found audio input ID ${deviceId} for name ${audioInput}`,
           );
-          latestDevices.current!.audioInput.select(deviceId);
+          mediaDevices.audioInput.select(deviceId);
         }
       }
 
@@ -256,40 +273,34 @@ export const GroupCallView: FC<Props> = ({
           logger.debug(
             `Found video input ID ${deviceId} for name ${videoInput}`,
           );
-          latestDevices.current!.videoInput.select(deviceId);
+          mediaDevices.videoInput.select(deviceId);
         }
       }
     };
 
     if (skipLobby) {
-      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
+      if (widget && 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);
+            logger.error("Error joining RTC session on preload", e);
           });
-        }
+        };
+        widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
+        return (): void => {
+          widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
+        };
       } else {
-        void enterRTCSessionOrError(rtcSession);
+        // 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);
+        });
       }
     }
   }, [
@@ -298,7 +309,7 @@ export const GroupCallView: FC<Props> = ({
     preload,
     skipLobby,
     perParticipantE2EE,
-    latestDevices,
+    mediaDevices,
     latestMuteStates,
     enterRTCSessionOrError,
     useNewMembershipManager,
@@ -309,8 +320,11 @@ export const GroupCallView: FC<Props> = ({
   const navigate = useNavigate();
 
   const onLeave = useCallback(
-    (cause: "user" | "error" = "user"): void => {
-      const audioPromise = leaveSoundContext.current?.playSound("left");
+    (
+      cause: "user" | "error" = "user",
+      playSound: CallEventSounds = "left",
+    ): void => {
+      const audioPromise = leaveSoundContext.current?.playSound(playSound);
       // 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;
@@ -414,7 +428,7 @@ export const GroupCallView: FC<Props> = ({
         muteStates={muteStates}
         onEnter={() => void enterRTCSessionOrError(rtcSession)}
         confineToRoom={confineToRoom}
-        hideHeader={hideHeader}
+        hideHeader={header === HeaderStyle.None}
         participantCount={participantCount}
         onShareClick={onShareClick}
       />
@@ -438,9 +452,9 @@ export const GroupCallView: FC<Props> = ({
           client={client}
           matrixInfo={matrixInfo}
           rtcSession={rtcSession as MatrixRTCSession}
-          participantCount={participantCount}
+          matrixRoom={room}
           onLeave={onLeave}
-          hideHeader={hideHeader}
+          header={header}
           muteStates={muteStates}
           e2eeSystem={e2eeSystem}
           //otelGroupCallMembership={otelGroupCallMembership}
@@ -466,6 +480,7 @@ export const GroupCallView: FC<Props> = ({
           endedCallId={rtcSession.room.roomId}
           client={client}
           isPasswordlessUser={isPasswordlessUser}
+          hideHeader={header === HeaderStyle.None}
           confineToRoom={confineToRoom}
         />
       );
@@ -479,6 +494,7 @@ 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;
@@ -487,10 +503,11 @@ export const GroupCallView: FC<Props> = ({
   return (
     <GroupCallErrorBoundary
       widget={widget}
-      recoveryActionHandler={(action) => {
+      recoveryActionHandler={async (action) => {
+        setExternalError(null);
         if (action == "reconnect") {
           setLeft(false);
-          enterRTCSessionOrError(rtcSession).catch((e) => {
+          await enterRTCSessionOrError(rtcSession).catch((e) => {
             logger.error("Error re-entering RTC session", e);
           });
         }

src/room/InCallView.module.css

@@ -18,7 +18,7 @@ Please see LICENSE in the repository root for full details.
   position: sticky;
   flex-shrink: 0;
   inset-block-start: 0;
-  z-index: 1;
+  z-index: var(--call-view-header-footer-layer);
   background: linear-gradient(
     0deg,
     rgba(0, 0, 0, 0) 0%,
@@ -34,7 +34,7 @@ Please see LICENSE in the repository root for full details.
 .footer {
   position: sticky;
   inset-block-end: 0;
-  z-index: 1;
+  z-index: var(--call-view-header-footer-layer);
   display: grid;
   grid-template-columns:
     minmax(0, var(--inline-content-inset))
@@ -108,14 +108,6 @@ 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;
   }
@@ -127,6 +119,13 @@ 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 { ConnectionState, type LocalParticipant } from "livekit-client";
+import { type LocalParticipant } from "livekit-client";
 import { of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -31,6 +31,7 @@ import {
   mockLocalParticipant,
   mockMatrixRoom,
   mockMatrixRoomMember,
+  mockMediaDevices,
   mockRemoteParticipant,
   mockRtcMembership,
   type MockRTCSession,
@@ -45,6 +46,8 @@ import {
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer";
+import { MediaDevicesContext } from "../MediaDevicesContext";
+import { HeaderStyle } from "../UrlParams";
 
 // vi.hoisted(() => {
 //   localStorage = {} as unknown as Storage;
@@ -147,41 +150,42 @@ function createInCallView(): RenderResult & {
   rtcSession.joined = true;
   const renderResult = render(
     <BrowserRouter>
-      <ReactionsSenderProvider
-        vm={vm}
-        rtcSession={rtcSession as unknown as MatrixRTCSession}
-      >
-        <TooltipProvider>
-          <RoomContext.Provider value={livekitRoom}>
-            <InCallView
-              client={client}
-              hideHeader={true}
-              rtcSession={rtcSession as unknown as MatrixRTCSession}
-              muteStates={muteState}
-              vm={vm}
-              matrixInfo={{
-                userId: "",
-                displayName: "",
-                avatarUrl: "",
-                roomId: "",
-                roomName: "",
-                roomAlias: null,
-                roomAvatar: null,
-                e2eeSystem: {
-                  kind: E2eeType.NONE,
-                },
-              }}
-              livekitRoom={livekitRoom}
-              participantCount={0}
-              onLeave={function (): void {
-                throw new Error("Function not implemented.");
-              }}
-              connState={ConnectionState.Connected}
-              onShareClick={null}
-            />
-          </RoomContext.Provider>
-        </TooltipProvider>
-      </ReactionsSenderProvider>
+      <MediaDevicesContext value={mockMediaDevices({})}>
+        <ReactionsSenderProvider
+          vm={vm}
+          rtcSession={rtcSession as unknown as MatrixRTCSession}
+        >
+          <TooltipProvider>
+            <RoomContext value={livekitRoom}>
+              <InCallView
+                client={client}
+                header={HeaderStyle.Standard}
+                rtcSession={rtcSession as unknown as MatrixRTCSession}
+                muteStates={muteState}
+                vm={vm}
+                matrixInfo={{
+                  userId: "",
+                  displayName: "",
+                  avatarUrl: "",
+                  roomId: "",
+                  roomName: "",
+                  roomAlias: null,
+                  roomAvatar: null,
+                  e2eeSystem: {
+                    kind: E2eeType.NONE,
+                  },
+                }}
+                matrixRoom={room}
+                livekitRoom={livekitRoom}
+                onLeave={function (): void {
+                  throw new Error("Function not implemented.");
+                }}
+                onShareClick={null}
+              />
+            </RoomContext>
+          </TooltipProvider>
+        </ReactionsSenderProvider>
+      </MediaDevicesContext>
     </BrowserRouter>,
   );
   return {
@@ -239,6 +243,7 @@ describe("InCallView", () => {
         queryByText("using to Device key transport"),
       ).not.toBeInTheDocument();
     });
+
     it("is not shown if setting is disabled", () => {
       useExperimentalToDeviceTransportSetting.setValue(false);
       developerModeSetting.setValue(true);
@@ -250,6 +255,7 @@ describe("InCallView", () => {
         queryByText("using to Device key transport"),
       ).not.toBeInTheDocument();
     });
+
     it("is not shown if developer mode is disabled", () => {
       useExperimentalToDeviceTransportSetting.setValue(true);
       developerModeSetting.setValue(false);

src/room/InCallView.tsx

@@ -6,29 +6,37 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { RoomContext, useLocalParticipant } from "@livekit/components-react";
-import { Text } from "@vector-im/compound-web";
-import { ConnectionState, type Room } from "livekit-client";
-import { type MatrixClient } from "matrix-js-sdk";
+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 {
   type FC,
   type PointerEvent,
-  type PropsWithoutRef,
   type TouchEvent,
-  forwardRef,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
   type JSX,
+  type ReactNode,
 } from "react";
 import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
-import { useObservable, useObservableEagerState } from "observable-hooks";
+import {
+  useObservable,
+  useObservableEagerState,
+  useSubscription,
+} from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
+import {
+  VoiceCallSolidIcon,
+  VolumeOnSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useTranslation } from "react-i18next";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -40,13 +48,13 @@ import {
   ShareScreenButton,
   SettingsButton,
   ReactionToggleButton,
-  SwitchCameraButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import { useUrlParams } from "../UrlParams";
+import { type HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
+import overlayStyles from "../Overlay.module.css";
 import { GridTile } from "../tile/GridTile";
 import { type OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -59,7 +67,6 @@ 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,
@@ -90,9 +97,11 @@ import {
   useReactionsSender,
 } from "../reactions/useReactionsSender";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
-import { useSwitchCamera } from "./useSwitchCamera";
 import { ReactionsOverlay } from "./ReactionsOverlay";
-import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
+import {
+  CallEventAudioRenderer,
+  type CallEventSounds,
+} from "./CallEventAudioRenderer";
 import {
   debugTileLayout as debugTileLayoutSetting,
   useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
@@ -105,6 +114,17 @@ import { useTypedEventEmitter } from "../useEvents.ts";
 import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
 import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships.ts";
+import { useMediaDevices } from "../MediaDevicesContext.ts";
+import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
+import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
+import { useBehavior } from "../useBehavior.ts";
+import { Toast } from "../Toast.tsx";
+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 ?? {});
 
@@ -116,6 +136,7 @@ export interface ActiveCallProps
 }
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
+  const mediaDevices = useMediaDevices();
   const sfuConfig = useOpenIDSFU(props.client, props.rtcSession);
   const { livekitRoom, connState } = useLivekit(
     props.rtcSession,
@@ -131,17 +152,17 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
 
   useEffect(() => {
     logger.info(
-      `[Lifecycle] InCallView Component mounted, livekitroom state ${livekitRoom?.state}`,
+      `[Lifecycle] InCallView Component mounted, livekit room state ${livekitRoom?.state}`,
     );
     return (): void => {
       logger.info(
-        `[Lifecycle] InCallView Component unmounted, livekitroom state ${livekitRoom?.state}`,
+        `[Lifecycle] InCallView Component unmounted, livekit room state ${livekitRoom?.state}`,
       );
       livekitRoom
         ?.disconnect()
         .then(() => {
           logger.info(
-            `[Lifecycle] Disconnected from livekite room, state:${livekitRoom?.state}`,
+            `[Lifecycle] Disconnected from livekit room, state:${livekitRoom?.state}`,
           );
         })
         .catch((e) => {
@@ -150,13 +171,23 @@ 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,
-        props.e2eeSystem,
+        mediaDevices,
+        {
+          encryptionSystem: props.e2eeSystem,
+          autoLeaveWhenOthersLeft,
+          waitForCallPickup:
+            waitForCallPickup && sendNotificationType === "ring",
+        },
         connStateObservable$,
         reactionsReader.raisedHands$,
         reactionsReader.reactions$,
@@ -167,21 +198,26 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         reactionsReader.destroy();
       };
     }
-  }, [props.rtcSession, livekitRoom, props.e2eeSystem, connStateObservable$]);
+  }, [
+    props.rtcSession,
+    props.matrixRoom,
+    livekitRoom,
+    mediaDevices,
+    props.e2eeSystem,
+    connStateObservable$,
+    autoLeaveWhenOthersLeft,
+    sendNotificationType,
+    waitForCallPickup,
+  ]);
 
   if (livekitRoom === undefined || vm === null) return null;
 
   return (
-    <RoomContext.Provider value={livekitRoom}>
+    <RoomContext value={livekitRoom}>
       <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
-        <InCallView
-          {...props}
-          vm={vm}
-          livekitRoom={livekitRoom}
-          connState={connState}
-        />
+        <InCallView {...props} vm={vm} livekitRoom={livekitRoom} />
       </ReactionsSenderProvider>
-    </RoomContext.Provider>
+    </RoomContext>
   );
 };
 
@@ -190,14 +226,13 @@ export interface InCallViewProps {
   vm: CallViewModel;
   matrixInfo: MatrixInfo;
   rtcSession: MatrixRTCSession;
-  livekitRoom: Room;
+  matrixRoom: MatrixRoom;
+  livekitRoom: LivekitRoom;
   muteStates: MuteStates;
-  participantCount: number;
   /** Function to call when the user explicitly ends the call */
-  onLeave: () => void;
-  hideHeader: boolean;
+  onLeave: (cause: "user", soundFile?: CallEventSounds) => void;
+  header: HeaderStyle;
   otelGroupCallMembership?: OTelGroupCallMembership;
-  connState: ECConnectionState;
   onShareClick: (() => void) | null;
 }
 
@@ -206,22 +241,23 @@ export const InCallView: FC<InCallViewProps> = ({
   vm,
   matrixInfo,
   rtcSession,
+  matrixRoom,
   livekitRoom,
   muteStates,
-  participantCount,
   onLeave,
-  hideHeader,
-  connState,
+  header: headerStyle,
   onShareClick,
 }) => {
+  const { t } = useTranslation();
   const { supportsReactions, sendReaction, toggleRaisedHand } =
     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 (connState === ConnectionState.Disconnected)
+  if (connectionState === ConnectionState.Disconnected)
     throw new ConnectionLostError();
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
@@ -235,7 +271,22 @@ export const InCallView: FC<InCallViewProps> = ({
     room: livekitRoom,
   });
 
-  const muteAllAudio = useObservableEagerState(muteAllAudio$);
+  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);
@@ -249,7 +300,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const [useExperimentalToDeviceTransport] = useSetting(
     useExperimentalToDeviceTransportSetting,
   );
-  const encryptionSystem = useRoomEncryptionSystem(rtcSession.room.roomId);
+  const encryptionSystem = useRoomEncryptionSystem(matrixRoom.roomId);
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
 
   const showToDeviceEncryption = useMemo(
@@ -286,14 +337,101 @@ export const InCallView: FC<InCallViewProps> = ({
     () => void toggleRaisedHand(),
   );
 
-  const windowMode = useObservableEagerState(vm.windowMode$);
-  const layout = useObservableEagerState(vm.layout$);
-  const tileStoreGeneration = useObservableEagerState(vm.tileStoreGeneration$);
+  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$);
   const [debugTileLayout] = useSetting(debugTileLayoutSetting);
-  const gridMode = useObservableEagerState(vm.gridMode$);
-  const showHeader = useObservableEagerState(vm.showHeader$);
-  const showFooter = useObservableEagerState(vm.showFooter$);
-  const switchCamera = useSwitchCamera(vm.localVideo$);
+  const gridMode = useBehavior(vm.gridMode$);
+  const showHeader = useBehavior(vm.showHeader$);
+  const showFooter = useBehavior(vm.showFooter$);
+  const earpieceMode = useBehavior(vm.earpieceMode$);
+  const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
+  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]);
 
   // 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
@@ -435,25 +573,90 @@ export const InCallView: FC<InCallViewProps> = ({
     }
   }, [setGridMode]);
 
+  useAppBarSecondaryButton(
+    useMemo(() => {
+      if (audioOutputSwitcher === null) return null;
+      const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
+      const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
+      const label = isEarpieceTarget
+        ? t("settings.devices.handset")
+        : t("settings.devices.loudspeaker");
+
+      return (
+        <Tooltip label={label}>
+          <IconButton
+            onClick={(e) => {
+              e.preventDefault();
+              audioOutputSwitcher.switch();
+            }}
+          >
+            <Icon />
+          </IconButton>
+        </Tooltip>
+      );
+    }, [t, audioOutputSwitcher]),
+  );
+
+  useAppBarHidden(!showHeader);
+
+  let header: ReactNode = null;
+  if (showHeader) {
+    switch (headerStyle) {
+      case "none":
+        // Cosmetic header to fill out space while still affecting the bounds of
+        // the grid
+        header = (
+          <div
+            className={classNames(styles.header, styles.filler)}
+            ref={headerRef}
+          />
+        );
+        break;
+      case "standard":
+        header = (
+          <Header
+            className={styles.header}
+            ref={headerRef}
+            disconnectedBanner={false} // This screen has its own 'reconnecting' toast
+          >
+            <LeftNav>
+              <RoomHeaderInfo
+                id={matrixInfo.roomId}
+                name={matrixInfo.roomName}
+                avatarUrl={matrixInfo.roomAvatar}
+                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
+                participantCount={participantCount}
+              />
+            </LeftNav>
+            <RightNav>
+              {showControls && onShareClick !== null && (
+                <InviteButton
+                  className={styles.invite}
+                  onClick={onShareClick}
+                />
+              )}
+            </RightNav>
+          </Header>
+        );
+    }
+  }
+
   const Tile = useMemo(
     () =>
-      forwardRef<
-        HTMLDivElement,
-        PropsWithoutRef<TileProps<TileViewModel, HTMLDivElement>>
-      >(function Tile(
-        { className, style, targetWidth, targetHeight, model },
+      function Tile({
         ref,
-      ) {
-        const spotlightExpanded = useObservableEagerState(
-          vm.spotlightExpanded$,
-        );
-        const onToggleExpanded = useObservableEagerState(
-          vm.toggleSpotlightExpanded$,
-        );
-        const showSpeakingIndicatorsValue = useObservableEagerState(
+        className,
+        style,
+        targetWidth,
+        targetHeight,
+        model,
+      }: TileProps<TileViewModel, HTMLDivElement>): ReactNode {
+        const spotlightExpanded = useBehavior(vm.spotlightExpanded$);
+        const onToggleExpanded = useBehavior(vm.toggleSpotlightExpanded$);
+        const showSpeakingIndicatorsValue = useBehavior(
           vm.showSpeakingIndicators$,
         );
-        const showSpotlightIndicatorsValue = useObservableEagerState(
+        const showSpotlightIndicatorsValue = useBehavior(
           vm.showSpotlightIndicators$,
         );
 
@@ -481,7 +684,7 @@ export const InCallView: FC<InCallViewProps> = ({
             style={style}
           />
         );
-      }),
+      },
     [vm, openProfile],
   );
 
@@ -521,7 +724,8 @@ export const InCallView: FC<InCallViewProps> = ({
         key="fixed"
         className={styles.fixedGrid}
         style={{
-          insetBlockStart: headerBounds.bottom,
+          insetBlockStart:
+            headerBounds.height > 0 ? headerBounds.bottom : bounds.top,
           height: gridBounds.height,
         }}
         model={layout}
@@ -554,7 +758,7 @@ export const InCallView: FC<InCallViewProps> = ({
   };
 
   const rageshakeRequestModalProps = useRageshakeRequestModal(
-    rtcSession.room.roomId,
+    matrixRoom.roomId,
   );
 
   const toggleScreensharing = useCallback(() => {
@@ -588,15 +792,6 @@ 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
@@ -633,7 +828,7 @@ export const InCallView: FC<InCallViewProps> = ({
     <EndCallButton
       key="end_call"
       onClick={function (): void {
-        onLeave();
+        onLeave("user");
       }}
       onTouchEnd={onControlsTouchEnd}
       data-testid="incall_leave"
@@ -644,10 +839,11 @@ export const InCallView: FC<InCallViewProps> = ({
       ref={footerRef}
       className={classNames(styles.footer, {
         [styles.overlay]: windowMode === "flat",
-        [styles.hidden]: !showFooter || (!showControls && hideHeader),
+        [styles.hidden]:
+          !showFooter || (!showControls && headerStyle === "none"),
       })}
     >
-      {!hideHeader && (
+      {headerStyle !== "none" && (
         <div className={styles.logo}>
           <LogoMark width={24} height={24} aria-hidden />
           <LogoType
@@ -673,6 +869,9 @@ export const InCallView: FC<InCallViewProps> = ({
     </div>
   );
 
+  // The reconnecting toast cannot be dismissed
+  const onDismissReconnectingToast = useCallback(() => {}, []);
+
   return (
     <div
       className={styles.inRoom}
@@ -683,35 +882,7 @@ export const InCallView: FC<InCallViewProps> = ({
       onPointerMove={onPointerMove}
       onPointerOut={onPointerOut}
     >
-      {showHeader &&
-        (hideHeader ? (
-          // Cosmetic header to fill out space while still affecting the bounds
-          // of the grid
-          <div
-            className={classNames(styles.header, styles.filler)}
-            ref={headerRef}
-          />
-        ) : (
-          <Header className={styles.header} ref={headerRef}>
-            <LeftNav>
-              <RoomHeaderInfo
-                id={matrixInfo.roomId}
-                name={matrixInfo.roomName}
-                avatarUrl={matrixInfo.roomAvatar}
-                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
-                participantCount={participantCount}
-              />
-            </LeftNav>
-            <RightNav>
-              {showControls && onShareClick !== null && (
-                <InviteButton
-                  className={styles.invite}
-                  onClick={onShareClick}
-                />
-              )}
-            </RightNav>
-          </Header>
-        ))}
+      {header}
       {
         // TODO: remove this once we remove the developer flag gets removed and we have shipped to
         // device transport as the default.
@@ -728,14 +899,26 @@ export const InCallView: FC<InCallViewProps> = ({
       {renderContent()}
       <CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
+      <Toast
+        onDismiss={onDismissReconnectingToast}
+        open={reconnecting}
+        portal={false}
+      >
+        {t("common.reconnecting")}
+      </Toast>
+      <EarpieceOverlay
+        show={earpieceMode && !reconnecting}
+        onBackToVideoPressed={audioOutputSwitcher?.switch}
+      />
       <ReactionsOverlay vm={vm} />
+      {waitingOverlay}
       {footer}
       {layout.type !== "pip" && (
         <>
           <RageshakeRequestModal {...rageshakeRequestModalProps} />
           <SettingsModal
             client={client}
-            roomId={rtcSession.room.roomId}
+            roomId={matrixRoom.roomId}
             open={settingsModalOpen}
             onDismiss={closeSettings}
             tab={settingsTab}

src/room/LobbyView.tsx

@@ -24,8 +24,7 @@ import {
   type LocalVideoTrack,
   Track,
 } from "livekit-client";
-import { useObservable } from "observable-hooks";
-import { map } from "rxjs";
+import { useObservableEagerState } from "observable-hooks";
 import { useNavigate } from "react-router-dom";
 
 import inCallStyles from "./InCallView.module.css";
@@ -38,22 +37,21 @@ import {
   EndCallButton,
   MicButton,
   SettingsButton,
-  SwitchCameraButton,
   VideoButton,
 } from "../button/Button";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useMediaQuery } from "../useMediaQuery";
 import { E2eeType } from "../e2ee/e2eeType";
 import { Link } from "../button/Link";
-import { useMediaDevices } from "../livekit/MediaDevicesContext";
+import { useMediaDevices } from "../MediaDevicesContext";
 import { useInitial } from "../useInitial";
-import { useSwitchCamera as useShowSwitchCamera } from "./useSwitchCamera";
 import {
   useTrackProcessor,
   useTrackProcessorSync,
 } from "../livekit/TrackProcessorContext";
 import { usePageTitle } from "../usePageTitle";
 import { useLatest } from "../useLatest";
+import { getValue } from "../utils/observable";
 
 interface Props {
   client: MatrixClient;
@@ -126,13 +124,18 @@ export const LobbyView: FC<Props> = ({
   );
 
   const devices = useMediaDevices();
+  const videoInputId = useObservableEagerState(
+    devices.videoInput.selected$,
+  )?.id;
 
   // Capture the audio options as they were when we first mounted, because
   // we're not doing anything with the audio anyway so we don't need to
   // re-open the devices when they change (see below).
   const initialAudioOptions = useInitial(
     () =>
-      muteStates.audio.enabled && { deviceId: devices.audioInput.selectedId },
+      muteStates.audio.enabled && {
+        deviceId: getValue(devices.audioInput.selected$)?.id,
+      },
   );
 
   const { processor } = useTrackProcessor();
@@ -148,14 +151,14 @@ export const LobbyView: FC<Props> = ({
       // which would cause the devices to be re-opened on the next render.
       audio: Object.assign({}, initialAudioOptions),
       video: muteStates.video.enabled && {
-        deviceId: devices.videoInput.selectedId,
+        deviceId: videoInputId,
         processor: initialProcessor,
       },
     }),
     [
       initialAudioOptions,
       muteStates.video.enabled,
-      devices.videoInput.selectedId,
+      videoInputId,
       initialProcessor,
     ],
   );
@@ -178,13 +181,17 @@ export const LobbyView: FC<Props> = ({
         null) as LocalVideoTrack | null,
     [tracks],
   );
+
+  useEffect(() => {
+    if (videoTrack && videoInputId === undefined) {
+      // If we have a video track but no videoInputId,
+      // we have to update the available devices. So that we select the first
+      // available video input device as the default instead of the `""` id.
+      devices.requestDeviceNames();
+    }
+  }, [devices, videoInputId, videoTrack]);
+
   useTrackProcessorSync(videoTrack);
-  const showSwitchCamera = useShowSwitchCamera(
-    useObservable(
-      (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
@@ -241,9 +248,6 @@ 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

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

src/room/MuteStates.ts

@@ -14,11 +14,14 @@ import {
 } from "react";
 import { type IWidgetApiRequest } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { useObservableEagerState } from "observable-hooks";
 
 import {
-  type MediaDeviceHandle,
-  useMediaDevices,
-} from "../livekit/MediaDevicesContext";
+  type DeviceLabel,
+  type SelectedDevice,
+  type MediaDevice,
+} from "../state/MediaDevices";
+import { useIsEarpiece, useMediaDevices } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import { ElementWidgetActions, widget } from "../widget";
 import { Config } from "../config/Config";
@@ -53,24 +56,25 @@ export interface MuteStates {
 }
 
 function useMuteState(
-  device: MediaDeviceHandle,
+  device: MediaDevice<DeviceLabel, SelectedDevice>,
   enabledByDefault: () => boolean,
+  forceUnavailable: boolean = false,
 ): MuteState {
+  const available = useObservableEagerState(device.available$);
   const [enabled, setEnabled] = useReactiveState<boolean | undefined>(
     // Determine the default value once devices are actually connected
-    (prev) =>
-      prev ?? (device.available.size > 0 ? enabledByDefault() : undefined),
-    [device.available.size],
+    (prev) => prev ?? (available.size > 0 ? enabledByDefault() : undefined),
+    [available.size],
   );
   return useMemo(
     () =>
-      device.available.size === 0
+      available.size === 0 || forceUnavailable
         ? deviceUnavailable
         : {
             enabled: enabled ?? false,
             setEnabled: setEnabled as Dispatch<SetStateAction<boolean>>,
           },
-    [device.available.size, enabled, setEnabled],
+    [available.size, enabled, forceUnavailable, setEnabled],
   );
 }
 
@@ -82,9 +86,19 @@ export function useMuteStates(isJoined: boolean): MuteStates {
   const audio = useMuteState(devices.audioInput, () => {
     return Config.get().media_devices.enable_audio && !skipLobby && !isJoined;
   });
+  useEffect(() => {
+    // If audio is enabled, we need to request the device names again,
+    // because iOS will not be able to switch to the correct device after un-muting.
+    // This is one of the main changes that makes iOS work with bluetooth audio devices.
+    if (audio.enabled) {
+      devices.requestDeviceNames();
+    }
+  }, [audio.enabled, devices]);
+  const isEarpiece = useIsEarpiece();
   const video = useMuteState(
     devices.videoInput,
     () => Config.get().media_devices.enable_video && !skipLobby && !isJoined,
+    isEarpiece, // Force video to be unavailable if using earpiece
   );
 
   useEffect(() => {

src/room/ReactionAudioRenderer.test.tsx

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

src/room/ReactionsOverlay.tsx

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

src/room/RoomAuthView.tsx

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

src/room/RoomPage.tsx

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

src/room/WaitingForJoin.module.css

@@ -0,0 +1,61 @@
+.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,7 +132,13 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
           <p>
             You were disconnected from the call.
           </p>
-          <button>
+          <button
+            class="_button_vczzf_8"
+            data-kind="secondary"
+            data-size="lg"
+            role="button"
+            tabindex="0"
+          >
             Reconnect
           </button>
           <button
@@ -742,7 +748,13 @@ exports[`should report correct error for 'Connection lost' 1`] = `
           <p>
             You were disconnected from the call.
           </p>
-          <button>
+          <button
+            class="_button_vczzf_8"
+            data-kind="secondary"
+            data-size="lg"
+            role="button"
+            tabindex="0"
+          >
             Reconnect
           </button>
           <button

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

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

src/room/useActiveFocus.ts

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

src/room/useSwitchCamera.ts

@@ -1,93 +0,0 @@
-/*
-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 "../livekit/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$);
-}