Delegate delayed leaves in LocalMember rather than LocalTransport

IMO this is where the delegation calls should have lived all along, since the leave event is part of the membership lifecycle, and we otherwise end up with an awkward hack to ignore transport updates.

Doing this now ensures that the client won't send any delegation requests if delegation is unsupported, and prepares the code for a future change in which we use the dedicated delegation endpoint from the CS API.

.github/workflows/publish-embedded-packages.yaml

@@ -9,7 +9,7 @@ on:
       - opened
       - labeled
   push:
-    branches: [livekit]
+    branches: [main]
 
 jobs:
   versioning:

.github/workflows/sync-labels.yml

@@ -4,12 +4,12 @@ on:
 
   push:
     branches:
-      - livekit
+      - main
     paths:
       - .github/labels.yml
       - .github/workflows/sync-labels.yml
 
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
+permissions: {} # We use LABEL_SYNC_GITHUB_TOKEN instead
 
 jobs:
   sync-labels:
@@ -20,4 +20,4 @@ jobs:
       DELETE: true
       WET: true
     secrets:
-      ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+      ELEMENT_BOT_TOKEN: ${{ secrets.LABEL_SYNC_GITHUB_TOKEN }}

.github/workflows/test.yaml

@@ -2,7 +2,7 @@ name: Test
 on:
   pull_request: {}
   push:
-    branches: [livekit]
+    branches: [main]
 jobs:
   vitest:
     name: Run unit tests

.github/workflows/translations-upload.yaml

@@ -2,7 +2,7 @@ name: Upload translation files to Localazy
 on:
   push:
     branches:
-      - livekit
+      - main
     paths-ignore:
       - ".github/**"
 

.github/workflows/zizmor.yml

@@ -2,7 +2,7 @@ name: GitHub Actions Security Analysis with zizmor 🌈
 
 on:
   push:
-    branches: ["livekit", "full-mesh"]
+    branches: ["main", "full-mesh"]
   pull_request: {}
 
 permissions: {}

README.md

@@ -115,30 +115,33 @@ For more details on the packages, see the
 For operating and deploying Element Call on your own server, refer to the
 [**Self-Hosting Guide**](./docs/self_hosting.md).
 
-## 🧭 MatrixRTC Backend Discovery and Selection
+## MatrixRTC Transports
 
-For proper Element Call operation each site deployment needs a MatrixRTC backend
-setup as outlined in the [Self-Hosting Guide](./docs/self_hosting.md). A typical
-federated site deployment for three different sites A, B and C is depicted below.
+For proper operation of Element Call, each deployment needs to set up a
+MatrixRTC transport in the form of a LiveKit server as outlined in the
+[Self-Hosting Guide](./docs/self_hosting.md). A typical federated site
+deployment for three different sites A, B and C is depicted below.
 
 <p align="center">
   <img src="./docs/Federated_Setup.drawio.png" alt="Element Call federated setup">
 </p>
 
-### Backend Discovery
+### Transport Discovery
 
-The MatrixRTC backend (according to
-[MSC4143](https://github.com/matrix-org/matrix-spec-proposals/pull/4143)) is
-announced by the Matrix site's `.well-known/matrix/client` file and discovered
-via the `org.matrix.msc4143.rtc_foci` key, e.g.:
+Element Call discovers the available MatrixRTC transports (as defined by
+[MSC4519](https://github.com/matrix-org/matrix-spec-proposals/pull/4519)) by
+hitting the `GET /_matrix/client/unstable/org.matrix.msc4143/rtc/transports`
+endpoint of the Client-Server API. An example response:
 
 ```json
-"org.matrix.msc4143.rtc_foci": [
+{
+  "rtc_transports": [
     {
-        "type": "livekit",
-        "livekit_service_url": "https://matrix-rtc.example.com/livekit/jwt"
-    },
-]
+      "type": "livekit",
+      "livekit_service_url": "https://matrix-rtc.example.com/livekit/jwt"
+    }
+  ]
+}
 ```
 
 where the format for MatrixRTC using LiveKit backend is defined in
@@ -149,7 +152,7 @@ via `livekit_service_url`.
 
 ### Backend Selection
 
-- Each call participant proposes their discovered MatrixRTC backend from
+- Each call participant proposes their discovered MatrixRTC transport from
   `org.matrix.msc4143.rtc_foci` in their `org.matrix.msc3401.call.member` state event.
 - For the **LiveKit** MatrixRTC backend
   ([MSC4195](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)),
@@ -244,10 +247,9 @@ pnpm backend
 
 > [!NOTE]
 > To ensure your local development frontend functions properly, you’ll need to
-> add certificate exceptions in your browser for `https://localhost:3000`,
-> `https://matrix-rtc.m.localhost/livekit/jwt/healthz` and
-> `https://synapse.m.localhost/.well-known/matrix/client`. This can be either
-> done by adding the minimum localhost CA
+> add certificate exceptions in your browser for `https://localhost:3000` and
+> `https://matrix-rtc.m.localhost/livekit/jwt/healthz`. This can be done either
+> by adding the minimum localhost CA
 > ([./backend/dev_tls_local-ca.crt](./backend/dev_tls_local-ca.crt)) to your web
 > browser's trusted certificates or by simply copying and pasting each URL into
 > your browser’s address bar and follow the prompts to add the exception.

backend/dev_homeserver-othersite.yaml

@@ -40,6 +40,8 @@ experimental_features:
   msc4222_enabled: true
   # sticky events for MatrixRTC user state
   msc4354_enabled: true
+  # MatrixRTC
+  msc4143_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no
@@ -54,7 +56,6 @@ enable_registration_without_verification: true
 registration_shared_secret: "test_shared_secret_for_local_dev_only"
 
 report_stats: false
-serve_server_wellknown: true
 
 # Ratelimiting settings for client actions (registration, login, messaging).
 #
@@ -67,3 +68,8 @@ rc_message:
   # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s
   per_second: 0.5
   burst_count: 30
+
+matrix_rtc:
+  transports:
+    - type: livekit
+      livekit_service_url: https://matrix-rtc.othersite.m.localhost/livekit/jwt

backend/dev_homeserver.yaml

@@ -40,6 +40,8 @@ experimental_features:
   msc4222_enabled: true
   # sticky events for MatrixRTC user state
   msc4354_enabled: true
+  # MatrixRTC
+  msc4143_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no
@@ -54,7 +56,6 @@ enable_registration_without_verification: true
 registration_shared_secret: "test_shared_secret_for_local_dev_only"
 
 report_stats: false
-serve_server_wellknown: true
 
 # Ratelimiting settings for client actions (registration, login, messaging).
 #
@@ -67,3 +68,8 @@ rc_message:
   # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s
   per_second: 0.5
   burst_count: 30
+
+matrix_rtc:
+  transports:
+    - type: livekit
+      livekit_service_url: https://matrix-rtc.m.localhost/livekit/jwt

backend/dev_nginx.conf

@@ -1,4 +1,4 @@
-# Synapse reverse proxy including .well-known/matrix/client
+# Synapse reverse proxy
 # domain synapse.m.localhost
 server {
     listen                  80;
@@ -11,18 +11,6 @@ server {
     ssl_certificate         /root/ssl/cert.pem;
     ssl_certificate_key     /root/ssl/key.pem;
 
-    # well-known config adding rtc_foci backend
-    # Note well-known is currently not effective due to:
-    # https://spec.matrix.org/v1.12/client-server-api/#well-known-uri the spec
-    # says it must be at https://$server_name/... (implied port 443) Hence, we
-    # currently rely for local development environment on deprecated config.json
-    # setting for livekit_service_url
-    location /.well-known/matrix/client {
-        add_header Access-Control-Allow-Origin *;
-        return 200 '{"m.homeserver": {"base_url": "https://synapse.m.localhost"}, "org.matrix.msc4143.rtc_foci": [{"type": "livekit", "livekit_service_url": "https://matrix-rtc.m.localhost/livekit/jwt"}]}';
-        default_type application/json;
-    }
-
     # Reverse proxy for Matrix Synapse Homeserver
     # This is also required for development environment.
     # Reason: the lk-jwt-service uses the federation API for the openid token
@@ -44,7 +32,7 @@ server {
 
 }
 
-# Synapse reverse proxy including .well-known/matrix/client
+# Synapse reverse proxy
 # domain synapse.othersite.m.localhost
 server {
     listen                  80;
@@ -57,18 +45,6 @@ server {
     ssl_certificate         /root/ssl/cert.pem;
     ssl_certificate_key     /root/ssl/key.pem;
 
-    # well-known config adding rtc_foci backend
-    # Note well-known is currently not effective due to:
-    # https://spec.matrix.org/v1.12/client-server-api/#well-known-uri the spec
-    # says it must be at https://$server_name/... (implied port 443) Hence, we
-    # currently rely for local development environment on deprecated config.json
-    # setting for livekit_service_url
-    location /.well-known/matrix/client {
-        add_header Access-Control-Allow-Origin *;
-        return 200 '{"m.homeserver": {"base_url": "https://synapse.othersite.m.localhost"}, "org.matrix.msc4143.rtc_foci": [{"type": "livekit", "livekit_service_url": "https://matrix-rtc.othersite.m.localhost/livekit/jwt"}]}';
-        default_type application/json;
-    }
-
     # Reverse proxy for Matrix Synapse Homeserver
     # This is also required for development environment.
     # Reason: the lk-jwt-service uses the federation API for the openid token

backend/playwright_homeserver-othersite.yaml

@@ -40,6 +40,8 @@ experimental_features:
   msc4222_enabled: true
   # sticky events for MatrixRTC user state
   msc4354_enabled: true
+  # MatrixRTC
+  msc4143_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no
@@ -54,7 +56,6 @@ enable_registration_without_verification: true
 registration_shared_secret: "test_shared_secret_for_local_dev_only"
 
 report_stats: false
-serve_server_wellknown: true
 
 # Ratelimiting settings for client actions (registration, login, messaging).
 #
@@ -84,3 +85,8 @@ rc_login:
 rc_registration:
   per_second: 10000
   burst_count: 10000
+
+matrix_rtc:
+  transports:
+    - type: livekit
+      livekit_service_url: https://matrix-rtc.othersite.m.localhost/livekit/jwt

backend/playwright_homeserver.yaml

@@ -40,6 +40,8 @@ experimental_features:
   msc4222_enabled: true
   # sticky events for MatrixRTC user state
   msc4354_enabled: true
+  # MatrixRTC
+  msc4143_enabled: true
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no
@@ -54,7 +56,6 @@ enable_registration_without_verification: true
 registration_shared_secret: "test_shared_secret_for_local_dev_only"
 
 report_stats: false
-serve_server_wellknown: true
 
 # Ratelimiting settings for client actions (registration, login, messaging).
 #
@@ -84,3 +85,8 @@ rc_login:
 rc_registration:
   per_second: 10000
   burst_count: 10000
+
+matrix_rtc:
+  transports:
+    - type: livekit
+      livekit_service_url: https://matrix-rtc.m.localhost/livekit/jwt

config/config.devenv.json

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

config/config.sample.json

@@ -8,16 +8,11 @@
   "livekit": {
     "livekit_service_url": "https://livekit-jwt.mydomain.com"
   },
-  "features": {
-    "feature_use_device_session_member_events": true
-  },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_mode": "compatibility",
   "matrix_rtc_session": {
     "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
     "network_error_retry_ms": 100
   }
 }

config/config_netlify_preview.json

@@ -9,8 +9,6 @@
   "matrix_rtc_session": {
     "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
     "network_error_retry_ms": 100
   },
   "posthog": {

config/config_netlify_preview_sdk.json

@@ -9,8 +9,6 @@
   "matrix_rtc_session": {
     "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
     "network_error_retry_ms": 100
   }
 }

docker-compose-playwright.yml

@@ -13,7 +13,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:a23cced80588306c66bc7cfa859c591be03ece31f25d0a6a2e1e935943a35c92
+    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:a23cced80588306c66bc7cfa859c591be03ece31f25d0a6a2e1e935943a35c92
+    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6

docs/README.md

@@ -5,5 +5,6 @@ This folder contains documentation for setup, usage, and development of Element
 - [Embedded vs standalone mode](./embedded_standalone.md)
 - [Url format and parameters](./url_params.md)
 - [Global JS controls](./controls.md)
+- [MatrixRTC modes](./matrix_rtc_modes.md)
 - [Self-Hosting](./self_hosting.md)
 - [Developing with linked packages](./linking.md)

docs/matrix_rtc_modes.md

@@ -0,0 +1,48 @@
+# MatrixRTC modes
+
+Element Call is in the middle of a transition of how a call session is
+represented: from room _state_ events (`org.matrix.msc3401.call.member`) to
+_sticky_ events
+([MSC4354](https://github.com/matrix-org/matrix-spec-proposals/pull/4354)),
+which are a much better fit for the short lived, per-device nature of call
+memberships.
+
+Not every homeserver supports sticky events yet. The two MatrixRTC modes
+controls whether Element Call uses them.
+
+## The modes
+
+| Mode            | Membership events | SFU selection | JWT endpoint                 |
+| --------------- | ----------------- | ------------- | ---------------------------- |
+| `compatibility` | state events      | multi SFU     | legacy                       |
+| `matrix_2_0`    | sticky events     | multi SFU     | Matrix 2.0 (hashed identity) |
+
+**`compatibility`** — multi SFU, but still state events. Use it when the
+homeserver does not support sticky events. This is the default.
+
+**`matrix_2_0`** — the target state. Requires a homeserver that advertises
+MSC4354 and all clients on v0.17.0 or later. The local membership requests its
+token from the Matrix 2.0 JWT endpoint of the
+[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
+and identifies the room by a hashed identity instead of a `livekit_alias`.
+(Remote memberships always try the new endpoint first and fall back to the
+legacy one, so remote participants can be on either.)
+
+## Selecting a mode
+
+Users can choose a mode under **Settings → Developer → MatrixRTC mode**. The
+Matrix 2.0 option is disabled if the homeserver does not support sticky events.
+
+A deployment can pin the mode for all its clients in `config.json`, which
+disables the Developer Settings choice:
+
+```json
+{
+  "matrix_rtc_mode": "compatibility"
+}
+```
+
+Valid values are `compatibility` and `matrix_2_0`; an invalid value is
+ignored (with a warning) and the user's choice applies. Pinning `matrix_2_0` on a
+homeserver without sticky event support makes joining fail with a "sticky events
+required" error.

docs/self_hosting.md

@@ -16,7 +16,7 @@
 The following [MSCs](https://github.com/matrix-org/matrix-spec-proposals) are
 required for Element Call to work properly:
 
-- **[MSC3266](https://github.com/deepbluev7/matrix-doc/blob/room-summaries/proposals/3266-room-summary.md):
+- **[MSC3266](https://github.com/deepbluev7/matrix-doc/blob/room-summaries/proposals/3266-room-summary.md)
   Room Summary API**: In Standalone mode Element Call is able to join rooms
   over federation using knocking. In this context MSC3266 is required as it
   allows to request a room summary of rooms you are not joined. The summary
@@ -29,19 +29,26 @@ required for Element Call to work properly:
   signalling. If disabled it is very likely that you end up with stuck calls in
   Matrix rooms.
 
+- **[MSC4519](https://github.com/matrix-org/matrix-spec-proposals/blob/travis/msc/voip-transports-registry/proposals/4519-rtc-transports-registry.md)
+  MatrixRTC Transports Registry**: Defines an endpoint that clients can use to
+  query the available MatrixRTC transports (i.e. find your LiveKit SFU).
+
 - **[MSC4222](https://github.com/matrix-org/matrix-spec-proposals/blob/erikj/sync_v2_state_after/proposals/4222-sync-v2-state-after.md)
   Adding `state_after` to sync v2**: Allow clients to opt-in to a change of the
   sync v2 API that allows them to correctly track the state of the room. This is
   required by Element Call to track room state reliably.
 
 If you're using [Synapse](https://github.com/element-hq/synapse/) as your
-homeserver, you'll need to additionally add the following config items to
-`homeserver.yaml` to comply with Element Call:
+homeserver, you can configure these features by adding the following entries to
+`homeserver.yaml`:
 
 ```yaml
 experimental_features:
   # MSC3266: Room summary API. Used for knocking over federation
   msc3266_enabled: true
+  # MSC4143: MatrixRTC. For historical reasons this flag enables the transports
+  # endpoint defined in MSC4519.
+  msc4143_enabled: true
   # MSC4222 needed for syncv2 state_after. This allow clients to
   # correctly track the state of the room.
   msc4222_enabled: true
@@ -61,6 +68,15 @@ rc_delayed_event_mgmt:
   # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2Hz
   per_second: 1
   burst_count: 20
+
+matrix_rtc:
+  transports:
+    # The transport you specify will be made available to clients over the
+    # /_matrix/client/unstable/org.matrix.msc4143/rtc/transports endpoint as
+    # defined in MSC4519.
+    - type: livekit
+      # Replace this with the actual URL of your MatrixRTC Authorization Service
+      livekit_service_url: https://matrix-rtc.example.com/livekit/jwt
 ```
 
 As a prerequisite for the
@@ -68,10 +84,10 @@ As a prerequisite for the
 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).
 
-### MatrixRTC Backend
+### LiveKit backend
 
-In order to **guarantee smooth operation** of Element Call, a MatrixRTC backend is
-required for each site deployment.
+In order to **guarantee smooth operation** of Element Call, a dedicated LiveKit
+backend is required for each site deployment.
 
 ![MSC4195 compatible setup](MSC4195_setup.drawio.png)
 
@@ -165,7 +181,7 @@ Using Haproxy, you can achieve this by:
     use_backend mxrtc_auth_backend if is_mxrtc_auth matrixrtc_domain
 
 # Backend
-## MatrixRTC backend
+## LiveKit backend
 backend sfu_backend
     server livekit 127.0.0.1:7880
     http-request set-path %[path,regsub(^/livekit/sfu/,/)]
@@ -187,44 +203,6 @@ backend mxrtc_auth_backend
 
 ```
 
-#### MatrixRTC backend announcement
-
-> [!IMPORTANT]
-> As defined in
-> [MSC4143](https://github.com/matrix-org/matrix-spec-proposals/pull/4143),
-> the MatrixRTC backend(s) must be announced to the client via your **Matrix site's
-> `.well-known/matrix/client`** file (e.g.
-> `example.com/.well-known/matrix/client` matching the site deployment example
-> from above). The configuration is a list of Foci configs:
-
-```json
-"org.matrix.msc4143.rtc_foci": [
-    {
-        "type": "livekit",
-        "livekit_service_url": "https://matrix-rtc.example.com/livekit/jwt"
-    },
-    {
-        "type": "livekit",
-        "livekit_service_url": "https://matrix-rtc-2.example.com/livekit/jwt"
-    }
-]
-```
-
-Make sure this file is served with the correct MIME type (`application/json`).
-Additionally, ensure the appropriate CORS headers are set to allow web clients
-to access it across origins. For more details, refer to the
-[Matrix Client-Server API: 2. Web Browser Clients](https://spec.matrix.org/latest/client-server-api/#web-browser-clients).
-
-```
-Access-Control-Allow-Origin: *
-Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
-Access-Control-Allow-Headers: X-Requested-With, Content-Type, Authorization
-```
-
-> [!NOTE]  
-> Most `org.matrix.msc4143.rtc_foci` configurations will only have one entry in
-> the array.
-
 ## Building Element Call
 
 > [!NOTE]  
@@ -278,7 +256,7 @@ runtime. Documentation and default values for `public/config.json` can be found
 in [ConfigOptions.ts](../src/config/ConfigOptions.ts).
 
 > [!CAUTION]
-> Please note configuring MatrixRTC backend via `config.json` of
+> Please note configuring LiveKit backend via `config.json` of
 > Element Call is only available for developing and debug purposes. Relying on
 > it might break Element Call going forward!
 

locales/en/app.json

@@ -61,7 +61,7 @@
     "crypto_version": "Crypto version: {{version}}",
     "custom_livekit_url": {
       "current_url": "Currently set to: ",
-      "from_config": "Currently, no overwrite is set. Url from well-known or config is used.",
+      "from_config": "Currently, no overwrite is set. Url from config is used.",
       "label": "Custom Livekit-url",
       "reset": "Reset overwrite",
       "save": "Save",
@@ -80,10 +80,6 @@
         "description": "Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)",
         "label": "Compatibility: state events & multi SFU"
       },
-      "Legacy": {
-        "description": "Compatible with old versions of EC that do not support multi SFU",
-        "label": "Legacy: state events & oldest membership SFU"
-      },
       "Matrix_2_0": {
         "description": "Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later",
         "label": "Matrix 2.0: sticky events & multi SFU"
@@ -120,6 +116,7 @@
     "peer_connection_timeout_description": "Connection to the media server timed out. Try switching to a different network or disabling your VPN. If the problem persists, see our <0>troubleshooting guide</0> or contact your server administrator.",
     "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.",
+    "screen_share_failed": "Could not start screen sharing",
     "sticky_events_required": "Homeserver does not support Matrix 2.0 calls",
     "sticky_events_required_description": "This deployment is configured to use Matrix 2.0 call mode, but the homeserver does not advertise support for sticky events (MSC4354). Ask your server admin to upgrade, or switch the deployment to a compatible mode.",
     "unexpected_ec_error": "An unexpected error occurred (<0>Error Code:</0> <1>{{ errorCode }}</1>). Please contact your server admin."
@@ -196,13 +193,23 @@
   "room_auth_view_ssla_caption": "By clicking \"Join call now\", you agree to our <2>Software and Services License Agreement (SSLA)</2>",
   "screenshare_button_label": "Share screen",
   "settings": {
+    "advanced_camera_description": "Configure resolution, framerate, bitrate, and codec for camera video. Changes apply on next call join.",
+    "advanced_camera_label": "Advanced camera settings",
+    "advanced_screen_share_description": "Configure resolution, framerate, bitrate, and codec for screen sharing",
+    "advanced_screen_share_label": "Advanced screen share settings",
+    "audio_processing_description": "Changes apply on next call join.",
+    "audio_processing_header": "Audio processing",
     "audio_tab": {
       "effect_volume_description": "Adjust the volume at which reactions and hand raised effects play.",
       "effect_volume_label": "Sound effect volume"
     },
+    "auto_gain_control_label": "Automatic gain control",
     "background_blur_header": "Background",
     "background_blur_label": "Blur the background of the video",
+    "bitrate_label": "Bitrate",
     "blur_not_supported_by_browser": "(Background blur is not supported by this device.)",
+    "camera_header": "Camera quality",
+    "codec_label": "Codec",
     "developer_tab_title": "Developer",
     "devices": {
       "activating": "Activating…",
@@ -218,12 +225,15 @@
       "speaker": "Speaker",
       "speaker_numbered": "Speaker {{n}}"
     },
+    "echo_cancellation_label": "Echo cancellation",
     "feedback_tab_body": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.",
     "feedback_tab_description_label": "Your feedback",
     "feedback_tab_h4": "Submit feedback",
     "feedback_tab_send_logs_label": "Include debug logs",
     "feedback_tab_thank_you": "Thanks, we received your feedback!",
     "feedback_tab_title": "Feedback",
+    "framerate_label": "Framerate",
+    "noise_suppression_label": "Noise suppression",
     "opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
     "preferences_tab": {
       "developer_mode_label": "Developer mode",
@@ -235,7 +245,9 @@
       "reactions_show_label": "Show reactions",
       "show_hand_raised_timer_description": "Show a timer when a participant raises their hand",
       "show_hand_raised_timer_label": "Show hand raise duration"
-    }
+    },
+    "resolution_label": "Resolution",
+    "screen_share_header": "Screen sharing"
   },
   "star_rating_input_label_one": "{{count}} star",
   "star_rating_input_label_other": "{{count}} stars",

package.json

@@ -77,7 +77,7 @@
     "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^10.0.0",
-    "@vector-im/compound-web": "^9.3.0",
+    "@vector-im/compound-web": "^10.0.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.0.18",
@@ -97,7 +97,7 @@
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-    "matrix-widget-api": "^1.16.1",
+    "matrix-widget-api": "^1.18.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
@@ -131,5 +131,5 @@
     "vitest": "^4.1.5",
     "vitest-axe": "^1.0.0-pre.3"
   },
-  "packageManager": "pnpm@11.6.0+sha512.9a36518224080c6fe5165afdcfe79bfa118c29be703f3f462b1e32efe1e98e47e8750b148e08286250aad4113cc7993ca413c4e2cd447752708c2ee5751bc95f"
+  "packageManager": "pnpm@11.21.0+sha512.521705bce689924eac72f5a3587122f362689ef6571e55ba80076fd637c11132ecffada26fad4ea79c485bfddbfd3d5a2a5b05805a77e893de71ec8a6cca3bb1"
 }

playwright/fixtures/widget-user.ts

@@ -153,7 +153,7 @@ export const widgetTest = test.extend<MyFixtures>({
 
       // Accept the DM invite from brooks
       // This how playwright record selects the DM invite in the room list
-      await ewPage2.getByRole("option", { name: "Open room" }).click();
+      await ewPage2.getByRole("button", { name: "Open room" }).click();
       await ewPage2.getByRole("button", { name: "Start chatting" }).click();
     }
 

playwright/spa-helpers.ts

@@ -101,9 +101,7 @@ async function setRtcModeFromSettings(
 
   // Move to Developer tab now
   await page.getByRole("tab", { name: "Developer" }).click();
-  if (mode == "legacy") {
-    await page.getByText("Legacy: state events").click();
-  } else if (mode == "2_0") {
+  if (mode == "2_0") {
     await page.getByText("Matrix 2.0").click();
   } else {
     // compat

playwright/widget/federated-call.test.ts

@@ -12,9 +12,7 @@ import { HOST1, HOST2, type RtcMode, TestHelpers } from "./test-helpers";
 
 const modePairs: [RtcMode, RtcMode][] = [
   ["compat", "compat"],
-  ["legacy", "legacy"],
-  ["legacy", "compat"],
-  ["compat", "legacy"],
+  // TODO: Compatibility + Matrix 2.0?
 ];
 
 modePairs.forEach(([rtcMode1, rtcMode2]) => {

playwright/widget/federation-oldest-membership-bug.spec.ts

@@ -1,85 +0,0 @@
-/*
-Copyright 2026 Element Creations 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 { widgetTest } from "../fixtures/widget-user";
-import { HOST1, HOST2, TestHelpers } from "./test-helpers";
-
-widgetTest(
-  "Bug new joiner was not publishing on correct SFU",
-  async ({ addUser, browserName }) => {
-    test.skip(
-      browserName === "firefox",
-      "This is a bug in the old widget, not a browser problem.",
-    );
-
-    test.slow();
-
-    // 2 users in federation
-    const florian = await addUser("floriant", HOST1);
-    const timo = await addUser("timo", HOST2);
-
-    // Florian creates a room and invites Timo to it
-    const roomName = "Call Room";
-    await TestHelpers.createRoom(roomName, florian.page, [timo.mxId]);
-
-    // Timo joins the room
-    await TestHelpers.acceptRoomInvite(roomName, timo.page);
-
-    // Ensure we are in legacy mode (should be the default)
-    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-      florian.page,
-      "legacy",
-    );
-    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-      timo.page,
-      "legacy",
-    );
-
-    // Let timo create a call
-    await TestHelpers.startCallInCurrentRoom(timo.page, false);
-    await TestHelpers.joinCallFromLobby(timo.page);
-
-    // We want to simulate that the oldest membership authentication is way slower than
-    // the preffered auth.
-    // In this setup, timo advertised$ transport will be it's own, and the active will be the one from florian
-    await florian.page.route(
-      "**/matrix-rtc.othersite.m.localhost/livekit/jwt/**",
-      async (route) => {
-        await new Promise((resolve) => setTimeout(resolve, 2000)); // 5 second delay
-        await route.continue();
-      },
-    );
-
-    // Florian joins the call
-    await expect(florian.page.getByTestId("join-call-button")).toBeVisible();
-    await florian.page.getByTestId("join-call-button").click();
-    await TestHelpers.joinCallFromLobby(florian.page);
-
-    await florian.page.waitForTimeout(3000);
-    await timo.page.waitForTimeout(3000);
-
-    // We should see 2 video tiles everywhere now
-    for (const user of [timo, florian]) {
-      const frame = user.page
-        .locator('iframe[title="Element Call"]')
-        .contentFrame();
-      await expect(frame.getByTestId("videoTile")).toHaveCount(2);
-
-      // No one should be waiting for media
-      await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
-
-      // There should be 2 video elements, visible and autoplaying
-      await expect(frame.locator("video")).toHaveCount(2, {
-        timeout: 10000,
-      });
-
-      await TestHelpers.expectVisibleVideoCount(frame, 2);
-    }
-  },
-);

playwright/widget/hotswap-legacy-compat.test.ts

@@ -1,91 +0,0 @@
-/*
-Copyright 2026 Element Creations 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 { widgetTest } from "../fixtures/widget-user";
-import { HOST1, HOST2, TestHelpers } from "./test-helpers";
-
-// ## Issue
-// This test reproduces an issue with the publisher.
-// When switching local focus, we need to recreate the publisher.
-// This failed because of a dead lock in the old publishers destruction.
-//
-// There are numerus ways to enforece this situation:
-//  - oldest member swap (manually set the oldest member focus and leave with the prev oldest member)
-//    This almost never happens in the real worls since clients will set their preferredFoci list to what the oldest member is.
-//  - switch from oldest member to multi sfu as the NOT the first joiner + the first joiner is on a different sfu than your preferred sfu.
-//
-// This test uses the "switch from oldest member to multi sfu" approach.
-//
-// It is a copy of federated-call.test.ts in the `["legacy", "legacy"]` setup,
-// which once connected will make the second user switch to multi sfu.
-widgetTest(
-  `Test swapping publisher from ${HOST1} to ${HOST2}`,
-  async ({ addUser, browserName }) => {
-    test.slow();
-    test.skip(
-      browserName === "firefox",
-      "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-    );
-
-    const florian = await addUser("floriant", HOST1);
-    const timo = await addUser("timo", HOST2);
-
-    const roomName = "Call Room";
-
-    await TestHelpers.createRoom(roomName, florian.page, [timo.mxId]);
-
-    await TestHelpers.acceptRoomInvite(roomName, timo.page);
-
-    await florian.page.pause();
-
-    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-      florian.page,
-      "legacy",
-    );
-    await TestHelpers.openWidgetSetEmbeddedElementCallRtcModeCloseWidget(
-      timo.page,
-      "legacy",
-    );
-
-    await TestHelpers.startCallInCurrentRoom(florian.page, false);
-    await TestHelpers.joinCallFromLobby(florian.page);
-
-    // timo joins
-    await TestHelpers.joinCallInCurrentRoom(timo.page);
-
-    // We should see 2 video tiles everywhere now
-    for (const user of [timo, florian]) {
-      const frame = user.page
-        .locator('iframe[title="Element Call"]')
-        .contentFrame();
-      await expect(frame.getByTestId("videoTile")).toHaveCount(2);
-
-      // Wait for "Waiting for media..." to disappear (with timeout)
-      await expect(frame.getByText("Waiting for media...")).not.toBeVisible({
-        timeout: 10000, // Maximum time to wait
-      });
-
-      // There should be 2 video elements, visible and autoplaying
-      await expect(frame.locator("video")).toHaveCount(2, {
-        timeout: 10000,
-      });
-
-      await TestHelpers.expectVisibleVideoCount(frame, 2);
-    }
-
-    // now we switch the mode for timo (second joiner on multi-sfu HOST2 but currently HOST1)
-    await TestHelpers.setEmbeddedElementCallRtcMode(timo.page, "compat");
-    await timo.page.waitForTimeout(3000);
-
-    await TestHelpers.expectVisibleVideoCount(
-      timo.page.locator('iframe[title="Element Call"]').contentFrame(),
-      2,
-    );
-  },
-);

playwright/widget/test-helpers.ts

@@ -21,7 +21,7 @@ const PASSWORD = "foobarbaz1!";
 export const HOST1 = "https://app.m.localhost/#/welcome";
 export const HOST2 = "https://app.othersite.m.localhost/#/welcome";
 
-export type RtcMode = "legacy" | "compat" | "2_0";
+export type RtcMode = "compat" | "2_0";
 
 export class TestHelpers {
   public static async startCallInCurrentRoom(
@@ -309,9 +309,7 @@ export class TestHelpers {
 
     // Move to Developer tab now
     await iframe.getByRole("tab", { name: "Developer" }).click();
-    if (mode == "legacy") {
-      await iframe.getByText("Legacy: state events").click();
-    } else if (mode == "2_0") {
+    if (mode == "2_0") {
       await iframe.getByText("Matrix 2.0").click();
     } else {
       // compat

pnpm-workspace.yaml

@@ -9,7 +9,7 @@ allowBuilds:
   "@swc/core": true
   "core-js": true
   "esbuild": true
-  "matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/8c95727b6278fe7942c20d0b9485f984dd0694b7": true
+  "matrix-js-sdk@git+https://github.com/matrix-org/matrix-js-sdk.git": true
   "protobufjs": true
 overrides:
   # We need compatible versions of RxJS in our dependencies and LiveKit's dependencies, but

src/Slider.tsx

@@ -31,6 +31,11 @@ interface Props {
   max: number;
   step: number;
   disabled?: boolean;
+  /**
+   * Custom formatter for the tooltip label. If not provided, the value is
+   * displayed as a percentage.
+   */
+  tooltipFormatter?: (value: number) => string;
 }
 
 /**
@@ -46,6 +51,7 @@ export const Slider: FC<Props> = ({
   max,
   step,
   disabled,
+  tooltipFormatter,
 }) => {
   const onValueChange = useCallback(
     ([v]: number[]) => onValueChangeProp(v),
@@ -71,7 +77,14 @@ export const Slider: FC<Props> = ({
         <Range className={styles.highlight} />
       </Track>
       {/* Note: This is expected not to be visible on mobile.*/}
-      <Tooltip placement="top" label={Math.round(value * 100).toString() + "%"}>
+      <Tooltip
+        placement="top"
+        label={
+          tooltipFormatter
+            ? tooltipFormatter(value)
+            : Math.round(value * 100).toString() + "%"
+        }
+      >
         <Thumb className={styles.handle} aria-label={label} />
       </Tooltip>
     </Root>

src/components/CallFooter.stories.tsx

@@ -127,6 +127,7 @@ export const Default: Story = {
     showFooter: true,
     hideControls: false,
     asOverlay: false,
+    showModals: true,
     sharingScreen: false,
     audioOutputSwitcher: undefined,
     reactionIdentifier: undefined,

src/components/CallFooter.tsx

@@ -26,6 +26,7 @@ import {
   MediaMuteAndSwitchButton,
   type MenuOptions,
 } from "./MediaMuteAndSwitchButton";
+import { type Behavior } from "../state/Behavior";
 import { type ViewModel } from "../state/ViewModel";
 import { useBehavior } from "../useBehavior";
 import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
@@ -76,6 +77,7 @@ export interface FooterState {
   /** The footer should be used as an overlay.
    * (Over the Call Grid) This saves spaces on small screens. */
   asOverlay: boolean;
+  showModals: boolean;
 
   buttonSize: "md" | "lg";
   showLogo: boolean;
@@ -120,6 +122,7 @@ export const CallFooter: FC<FooterProps> = ({
   const asOverlay = useBehavior(vm.asOverlay$);
   const showFooter = useBehavior(vm.showFooter$);
   const hideControls = useBehavior(vm.hideControls$);
+  const showModals = useBehavior(vm.showModals$);
   const layoutSwitchVm = useBehavior(vm.layoutSwitchVm$);
   const openSettings = useBehavior(vm.openSettings$);
   const audioEnabled = useBehavior(vm.audioEnabled$);
@@ -135,7 +138,6 @@ export const CallFooter: FC<FooterProps> = ({
   const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
   const hangup = useBehavior(vm.hangup$);
   const debugTileLayout = useBehavior(vm.debugTileLayout$);
-  const tileStoreGeneration = useBehavior(vm.tileStoreGeneration$);
   const videoOptions = useBehavior(vm.videoOptions$);
   const selectedVideo = useBehavior(vm.selectedVideo$);
   const audioOptions = useBehavior(vm.audioOptions$);
@@ -235,7 +237,8 @@ export const CallFooter: FC<FooterProps> = ({
     );
   }
 
-  if (reactionIdentifier && reactionData) {
+  // Reaction button contains a pretty large menu, so treat it like a modal
+  if (reactionIdentifier && reactionData && showModals) {
     buttons.push(
       <ReactionToggleButton
         size={buttonSize}
@@ -283,7 +286,9 @@ export const CallFooter: FC<FooterProps> = ({
           />
         </>
       )}
-      {debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
+      {debugTileLayout ? (
+        <TilesDebugInfo generation$={vm.tileStoreGeneration$} />
+      ) : undefined}
     </div>
   );
 
@@ -316,3 +321,14 @@ export const CallFooter: FC<FooterProps> = ({
     </div>
   );
 };
+
+interface TilesDebugInfoProps {
+  generation$: Behavior<number | undefined>;
+}
+
+// Isolated in its own component since the layout generation updates frequently
+// and we can avoid re-rendering the footer this way
+const TilesDebugInfo: FC<TilesDebugInfoProps> = ({ generation$ }) => {
+  const generation = useBehavior(generation$);
+  return `Tiles generation: ${generation}`;
+};

src/components/CallFooterViewModel.test.ts

@@ -49,6 +49,7 @@ function buildMinimalCallViewModel(layout: Layout): CallViewModel {
     reactions$: constant({}),
     tileStoreGeneration$: constant(0),
     showFooter$: constant(true),
+    showModals$: constant(true),
     settingsOpen$: constant(false),
     setSettingsOpen$: constant(() => {}),
   } as unknown as CallViewModel;

src/components/CallFooterViewModel.tsx

@@ -161,6 +161,7 @@ export function createCallFooterViewModel(
     // candidat to move into the FooterViewModel
     showFooter$: callModel.showFooter$,
     hideControls$: constant(!showControls),
+    showModals$: callModel.showModals$,
     asOverlay$: callModel.edgeToEdge$,
     buttonSize$: scope.behavior(
       isPip$.pipe(map<boolean, "md" | "lg">((pip) => (pip ? "md" : "lg"))),
@@ -168,12 +169,12 @@ export function createCallFooterViewModel(
 
     openSettings$: scope.behavior(
       combineLatest([
-        isPip$,
+        callModel.showModals$,
         callModel.showHeader$,
         callModel.setSettingsOpen$,
       ]).pipe(
-        map(([isPip, showHeader, setSettingsOpen]) =>
-          !isPip && headerStyle !== HeaderStyle.AppBar && showControls
+        map(([showModals, showHeader, setSettingsOpen]) =>
+          showModals && headerStyle !== HeaderStyle.AppBar && showControls
             ? (): void => setSettingsOpen(true)
             : undefined,
         ),
@@ -239,6 +240,7 @@ export function createLobbyFooterViewModel(
       showLogo,
       hideControls: false,
       asOverlay: false,
+      showModals: true,
       buttonSize: "lg",
       openSettings,
       hangup,

src/config/ConfigOptions.ts

@@ -12,9 +12,7 @@ Please see LICENSE in the repository root for full details.
  * Settings, or pinned for a deployment via `matrix_rtc_mode` in config.json.
  */
 export enum MatrixRTCMode {
-  /** Legacy single-SFU + user-keyed memberships + legacy JWT endpoint. */
-  Legacy = "legacy",
-  /** Multi-SFU transport, legacy JWT endpoint, no sticky events. */
+  /** Multi-SFU transport, legacy JWT endpoint, state events. */
   Compatibility = "compatibility",
   /**
    * Multi-SFU transport with:
@@ -26,6 +24,35 @@ export enum MatrixRTCMode {
   Matrix_2_0 = "matrix_2_0",
 }
 
+export interface DelayedLeaveTimings {
+  /**
+   * The delay (in milliseconds) with which delayed leave events are sent.
+   *
+   * If the server receives no keep-alives from the client for any longer than
+   * this duration, it will send the leave event, automatically removing the
+   * user from the call.
+   */
+  delay_ms?: number;
+
+  /**
+   * How frequently (in milliseconds) the client sends keep-alives to the server
+   * to restart the timer for a delayed leave event. Should be less than
+   * {@link DelayedLeaveTimings.delay_ms}.
+   */
+  restart_ms?: number;
+
+  /**
+   * The time (in milliseconds) after which we consider a delayed event restart HTTP request to have failed.
+   * Setting this to a lower value will result in more frequent retries, but then we will also give up earlier.
+   *
+   * 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"}`.)
+   */
+  restart_timeout_ms?: number;
+}
+
 export interface ConfigOptions {
   /**
    * The Posthog endpoint to which analytics data will be sent.
@@ -74,10 +101,7 @@ export interface ConfigOptions {
   livekit?: {
     // The link to the service that returns a livekit url and token to use it.
     // This is a fallback link in case the homeserver in use does not advertise
-    // a livekit service url in the client well-known.
-    // The well known needs to be formatted like so:
-    // {"type":"livekit", "livekit_service_url":"https://livekit.example.com"}
-    // and stored under the key: "org.matrix.msc4143.rtc_foci"
+    // a livekit service url over the transports endpoint.
     livekit_service_url: string;
   };
 
@@ -89,15 +113,6 @@ export interface ConfigOptions {
      * Allow to join group calls without audio and video.
      */
     feature_group_calls_without_video_and_audio?: boolean;
-
-    /**
-     * Send device-specific call session membership state events instead of
-     * legacy user-specific call membership state events.
-     * This setting has no effect when the user joins an active call with
-     * legacy state events. For compatibility, Element Call will always join
-     * active legacy calls with legacy state events.
-     */
-    feature_use_device_session_member_events?: boolean;
   };
 
   /**
@@ -105,6 +120,61 @@ export interface ConfigOptions {
    */
   ssla?: string;
 
+  /**
+   * Media quality settings for video and screen sharing.
+   * These override the hardcoded LiveKit defaults.
+   */
+  media_quality?: {
+    /**
+     * Video codec preference. The server must also have the codec enabled.
+     * @default "vp8"
+     */
+    video_codec?: "vp8" | "vp9" | "h264" | "av1";
+
+    /**
+     * Camera video settings.
+     */
+    video?: {
+      /** Max resolution height in pixels (e.g. 720, 1080, 1440). @default 720 */
+      max_resolution?: number;
+      /** Max bitrate in bits per second. @default 1700000 */
+      max_bitrate?: number;
+      /** Max framerate. @default 30 */
+      max_framerate?: number;
+      /**
+       * Simulcast layers as an array of {height, bitrate} objects,
+       * ordered from lowest to highest quality.
+       * @default [{height: 180, bitrate: 160000}, {height: 360, bitrate: 450000}]
+       */
+      simulcast_layers?: Array<{
+        height: number;
+        bitrate: number;
+      }>;
+    };
+
+    /**
+     * Screen share settings.
+     */
+    screen_share?: {
+      /** Max resolution height in pixels. @default 1080 */
+      max_resolution?: number;
+      /** Max bitrate in bits per second. @default 5000000 */
+      max_bitrate?: number;
+      /** Max framerate. @default 30 */
+      max_framerate?: number;
+      /**
+       * Simulcast layers for screen sharing as an array of {height, bitrate, framerate} objects,
+       * ordered from lowest to highest quality. If omitted, LiveKit SDK defaults apply (1 extra
+       * layer at half resolution).
+       */
+      simulcast_layers?: Array<{
+        height: number;
+        bitrate: number;
+        framerate?: number;
+      }>;
+    };
+  };
+
   media_devices?: {
     /**
      * Defines whether participants should start with audio enabled by default.
@@ -127,7 +197,8 @@ export interface ConfigOptions {
   /**
    * Pins the {@link MatrixRTCMode} for all clients on this deployment,
    * overriding any per-user choice from the Developer Settings. If unset,
-   * the user's Developer Settings choice (or its default of `Legacy`) wins.
+   * the user's Developer Settings choice (or its default of `Compatibility`)
+   * wins.
    */
   matrix_rtc_mode?: MatrixRTCMode;
 
@@ -142,29 +213,6 @@ export interface ConfigOptions {
      */
     wait_for_key_rotation_ms?: number;
 
-    /**
-     * The duration (in milliseconds) after the most recent keep-alive (delayed leave event restart)
-     * that the server waits before sending the leave MatrixRTC membership event.
-     */
-    delayed_leave_event_delay_ms?: number;
-
-    /**
-     * The time (in milliseconds) after which 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;
-
     /**
      * How long we wait before retrying after a network error on any of the requests.
      */
@@ -177,32 +225,89 @@ export interface ConfigOptions {
      * This is what goes into the m.rtc.member event expiry field and is typically set to a number of hours.
      */
     membership_event_expiry_ms?: number;
+
+    /**
+     * The number of participants in the session at which the media encryption key will no longer
+     * be rotated.
+     *
+     * Rotating a key requires sending it to every participant device, so in large sessions the
+     * cost of rotating on every join/leave becomes prohibitive. At this limit the current key is
+     * kept and distributed to new joiners; no new keys are generated for joiners/leavers.
+     *
+     * Defaults to the js-sdk default (undefined). Which means that rotation will always happen.
+     */
+    key_rotation_participant_limit?: number;
+
+    /**
+     * Timing options for delayed leave events, which are used to remove a user
+     * from a call when they lose connection.
+     */
+    delayed_leave?: DelayedLeaveTimings;
+
+    /**
+     * Timing options for delayed leave events, in cases where the ability to
+     * send the event can be delegated to the SFU.
+     *
+     * We recommend setting {@link DelayedLeaveTimings.delay_ms} >>
+     * {@link sync_disconnect_grace_period_ms} here.
+     */
+    delegated_delayed_leave?: DelayedLeaveTimings;
   };
 }
 
+export interface ResolvedDelayedLeaveTimings extends DelayedLeaveTimings {
+  delay_ms: number; // Required
+}
+
 // Overrides members from ConfigOptions that are always provided by the
 // default config and are therefore non-optional.
 export interface ResolvedConfigOptions extends ConfigOptions {
   sync_disconnect_grace_period_ms: number;
   ssla: string;
-  matrix_rtc_session: {
-    wait_for_key_rotation_ms?: number;
-    delayed_leave_event_delay_ms: number;
-    delayed_leave_event_restart_local_timeout_ms?: number;
-    delayed_leave_event_restart_ms?: number;
+  media_quality: Required<
+    Pick<NonNullable<ConfigOptions["media_quality"]>, "video_codec">
+  > & {
+    video: Required<
+      Pick<
+        NonNullable<NonNullable<ConfigOptions["media_quality"]>["video"]>,
+        "max_resolution" | "max_bitrate" | "max_framerate"
+      >
+    >;
+    screen_share: Required<
+      Pick<
+        NonNullable<
+          NonNullable<ConfigOptions["media_quality"]>["screen_share"]
+        >,
+        "max_resolution" | "max_bitrate" | "max_framerate"
+      >
+    >;
+  };
+  matrix_rtc_session: ConfigOptions["matrix_rtc_session"] & {
     network_error_retry_ms: number;
-    membership_event_expiry_ms?: number;
+    delayed_leave: ResolvedDelayedLeaveTimings;
+    delegated_delayed_leave: ResolvedDelayedLeaveTimings;
   };
 }
 
 export const DEFAULT_CONFIG: ResolvedConfigOptions = {
-  features: {
-    feature_use_device_session_member_events: true,
-  },
-  sync_disconnect_grace_period_ms: 10000,
+  sync_disconnect_grace_period_ms: 10_000,
   ssla: "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
+  media_quality: {
+    video_codec: "vp8",
+    video: {
+      max_resolution: 720,
+      max_bitrate: 1_700_000,
+      max_framerate: 30,
+    },
+    screen_share: {
+      max_resolution: 1080,
+      max_bitrate: 5_000_000,
+      max_framerate: 30,
+    },
+  },
   matrix_rtc_session: {
-    delayed_leave_event_delay_ms: 10000,
-    network_error_retry_ms: 1000,
+    network_error_retry_ms: 1_000,
+    delayed_leave: { delay_ms: 18_000, restart_ms: 4_000 },
+    delegated_delayed_leave: { delay_ms: 3_600_000, restart_ms: 300_000 },
   },
 };

src/graphics/desktop-gradient.svg

@@ -1,16 +0,0 @@
-<svg width="1440" height="800" viewBox="0 0 1440 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_f_4162_80259)">
-<path d="M-37.0486 666.028C267.76 138.867 944.304 -46.1945 1477.05 260.929" stroke="url(#paint0_linear_4162_80259)" stroke-width="192" stroke-linecap="round"/>
-</g>
-<defs>
-<filter id="filter0_f_4162_80259" x="-333.118" y="-183.694" width="2106.24" height="1145.68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_4162_80259"/>
-</filter>
-<linearGradient id="paint0_linear_4162_80259" x1="1255.31" y1="320.254" x2="184.899" y2="607.497" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00C59E"/>
-<stop offset="0.75" stop-color="#0044A5"/>
-</linearGradient>
-</defs>
-</svg>

src/graphics/mobile-gradient.svg

@@ -1,86 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="1200"
-   height="285"
-   viewBox="0 0 1200 285"
-   fill="none"
-   version="1.1"
-   id="svg5"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <g
-     filter="url(#filter0_f_3970_9366)"
-     id="g2"
-     transform="translate(422.00201)">
-    <path
-       d="m -164.342,495.134 c 188.2881,-188.288 494.684,-190 684.684,0"
-       stroke="url(#paint0_linear_3970_9366)"
-       stroke-width="235.517"
-       stroke-linecap="round"
-       id="path1"
-       style="stroke:url(#paint0_linear_3970_9366)" />
-    <path
-       d="m -164.342,495.134 c 188.2881,-188.288 494.684,-190 684.684,0"
-       stroke="url(#paint1_linear_3970_9366)"
-       style="mix-blend-mode:overlay;stroke:url(#paint1_linear_3970_9366)"
-       stroke-width="235.517"
-       stroke-linecap="round"
-       id="path2" />
-  </g>
-  <defs
-     id="defs5">
-    <filter
-       id="filter0_f_3970_9366"
-       x="-517.617"
-       y="-0.00012207"
-       width="1391.23"
-       height="848.409"
-       filterUnits="userSpaceOnUse"
-       color-interpolation-filters="sRGB">
-      <feFlood
-         flood-opacity="0"
-         result="BackgroundImageFix"
-         id="feFlood2" />
-      <feBlend
-         mode="normal"
-         in="SourceGraphic"
-         in2="BackgroundImageFix"
-         result="shape"
-         id="feBlend2" />
-      <feGaussianBlur
-         stdDeviation="117.758"
-         result="effect1_foregroundBlur_3970_9366"
-         id="feGaussianBlur2" />
-    </filter>
-    <linearGradient
-       id="paint0_linear_3970_9366"
-       x1="349.17099"
-       y1="323.96301"
-       x2="6.82898"
-       y2="666.30499"
-       gradientUnits="userSpaceOnUse">
-      <stop
-         stop-color="#0D5CBD"
-         id="stop2" />
-      <stop
-         offset="0.730863"
-         stop-color="#0DBDA8"
-         id="stop3" />
-    </linearGradient>
-    <linearGradient
-       id="paint1_linear_3970_9366"
-       x1="349.17099"
-       y1="323.96301"
-       x2="6.82898"
-       y2="666.30499"
-       gradientUnits="userSpaceOnUse">
-      <stop
-         stop-color="#0D5CBD"
-         id="stop4" />
-      <stop
-         offset="0.730863"
-         stop-color="#0DBDA8"
-         id="stop5" />
-    </linearGradient>
-  </defs>
-</svg>

src/grid/Grid.tsx

@@ -41,6 +41,8 @@ import { TileWrapper } from "./TileWrapper";
 import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
 import { useInitial } from "../useInitial";
 
+const MAX_ANIMATED_TILES = 50; // Capped for performance reasons
+
 interface Rect {
   x: number;
   y: number;
@@ -285,7 +287,6 @@ export function Grid<
   const [visibleTilesCallback, setVisibleTilesCallback] =
     useState<VisibleTilesCallback | null>(null);
   const tiles = useInitial(() => new Map<string, Tile<TileModel>>());
-  const prefersReducedMotion = usePrefersReducedMotion();
 
   const Slot: FC<SlotProps<TileModel>> = useMemo(
     () =>
@@ -372,6 +373,10 @@ export function Grid<
   // react-spring's imperative API during gestures to improve responsiveness
   const dragState = useRef<DragState | null>(null);
 
+  // If true, disables animations
+  const immediate =
+    usePrefersReducedMotion() || placedTiles.length > MAX_ANIMATED_TILES;
+
   const [tileTransitions, springRef] = useTransition(
     placedTiles,
     () => ({
@@ -389,9 +394,9 @@ export function Grid<
         y,
         width,
         height,
-        immediate: prefersReducedMotion,
+        immediate,
       }),
-      enter: { opacity: 1, scale: 1, immediate: prefersReducedMotion },
+      enter: { opacity: 1, scale: 1, immediate },
       update: ({
         id,
         x,
@@ -406,9 +411,9 @@ export function Grid<
               y,
               width,
               height,
-              immediate: prefersReducedMotion,
+              immediate,
             },
-      leave: { opacity: 0, scale: 0, immediate: prefersReducedMotion },
+      leave: { opacity: 0, scale: 0, immediate },
       config: { mass: 0.7, tension: 252, friction: 25 },
     }),
     // react-spring's types are bugged and can't infer the spring type
@@ -441,8 +446,7 @@ export function Grid<
               y: tile.y,
               width: tile.width,
               height: tile.height,
-              immediate:
-                prefersReducedMotion || ((key): boolean => key === "zIndex"),
+              immediate: immediate || ((key): boolean => key === "zIndex"),
               // Allow the tile's position to settle before pushing its
               // z-index back down
               delay: (key): number => (key === "zIndex" ? 500 : 0),
@@ -453,7 +457,7 @@ export function Grid<
               x: tileX,
               y: tileY,
               immediate:
-                prefersReducedMotion ||
+                immediate ||
                 ((key): boolean =>
                   key === "zIndex" || key === "x" || key === "y"),
             },

src/index.css

@@ -78,16 +78,19 @@ body {
   body[data-background="gradient"]::before {
     content: "";
     position: fixed;
-    inset: 0;
-    background-image: url("graphics/mobile-gradient.svg");
-    background-size: auto;
+    /* Chromium abruptly fades our images to fully transparent at the edge of
+    the element. If we just make the element a little bigger than the viewport,
+    this is no longer visible. */
+    inset: -20px;
+    background-image: url("graphics/mobile-gradient.png");
+    background-size: 1400px 305px;
     background-position: bottom;
     background-repeat: no-repeat;
   }
 
   body[data-background="gradient"][data-platform="desktop"]::before {
-    background-image: url("graphics/desktop-gradient.svg");
-    background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
+    background-image: url("graphics/desktop-gradient.png");
+    background-size: max(1440px, 100vw) max(1440px, 100vh);
     background-position: center;
   }
 }

src/initializer.tsx

@@ -30,6 +30,7 @@ import {
 
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
+import { seedSettingsFromConfig } from "./settings/settings";
 import { platform } from "./Platform";
 import { isFailure } from "./utils/fetch";
 import { initializeWidget } from "./widget";
@@ -237,6 +238,7 @@ export class Initializer {
       this.loadStates.config = LoadState.Loading;
       Config.init().then(
         () => {
+          seedSettingsFromConfig(Config.get().media_quality);
           this.loadStates.config = LoadState.Loaded;
           this.initStep(resolve);
         },

src/livekit/openIDSFU.test.ts

@@ -148,7 +148,7 @@ describe("getSFUConfigWithOpenID", () => {
         // Verify, that the request contains the expected delay parameters
         if (
           body.delay_id === "mock_delay_id" &&
-          body.delay_timeout === 10000 &&
+          body.delay_timeout === 3600000 &&
           body.delay_cs_api_url === "https://homeserverserver.org/cs_api"
         ) {
           return {
@@ -229,7 +229,7 @@ describe("getSFUConfigWithOpenID", () => {
     expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
     expect(calls[0][1]).toStrictEqual({
       // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -239,7 +239,7 @@ describe("getSFUConfigWithOpenID", () => {
     expect(calls[1][0]).toStrictEqual("https://sfu.example.org/sfu/get");
 
     expect(calls[1][1]).toStrictEqual({
-      body: '{"room":"!example_room_id","device_id":"DEVICE","delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room":"!example_room_id","device_id":"DEVICE","delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
       headers: {
         "Content-Type": "application/json",
       },
@@ -284,7 +284,7 @@ describe("getSFUConfigWithOpenID", () => {
     expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
     expect(calls[0][1]).toStrictEqual({
       // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
       method: "POST",
       headers: {
         "Content-Type": "application/json",

src/livekit/openIDSFU.ts

@@ -19,7 +19,7 @@ import {
 } from "../utils/errors";
 import { doNetworkOperationWithRetry } from "../utils/matrix";
 import { Config } from "../config/Config";
-import { JwtEndpointVersion } from "../state/CallViewModel/localMember/LocalTransport";
+import { MatrixRTCMode } from "../config/ConfigOptions";
 
 /**
  * Configuration and access tokens provided by the SFU on successful authentication.
@@ -80,11 +80,10 @@ export type OpenIDClientParts = Pick<
  * @param serviceUrl The URL of the livekit SFU service
  * @param roomId The room id used in the jwt request. This is NOT the livekit_alias. The jwt service will provide the alias. It maps matrix room ids <-> Livekit aliases.
  * @param opts Additional options to modify which endpoint with which data will be used to acquire the jwt token.
- * @param opts.forceJwtEndpoint This will use the old jwt endpoint which will create the rtc backend identity based on string concatenation
- * instead of a hash.
+ * @param opts.matrixRTCMode Determines which version of the JWT endpoint to use, which affects whether the
+ * RTC backend identity is based on string concatenation (legacy) or a hash (Matrix 2.0).
  * This function by default uses whatever is possible with the current jwt service installed next to the SFU.
  * For remote connections this does not matter, since we will not publish there we can rely on the newest option.
- * For our own connection we can only use the hashed version if we also send the new matrix2.0 sticky events.
  * @param opts.delayEndpointBaseUrl The URL of the matrix homeserver.
  * @param opts.delayId The delay id used for the jwt service to manage.
  * @param logger optional logger.
@@ -97,7 +96,7 @@ export async function getSFUConfigWithOpenID(
   serviceUrl: string,
   roomId: string,
   opts?: {
-    forceJwtEndpoint?: JwtEndpointVersion;
+    matrixRTCMode?: MatrixRTCMode;
     delayEndpointBaseUrl?: string;
     delayId?: string;
   },
@@ -116,19 +115,18 @@ export async function getSFUConfigWithOpenID(
   logger?.debug("Got openID token", openIdToken);
   let sfuConfig: { url: string; jwt: string } | undefined;
 
-  const tryBothJwtEndpoints = opts?.forceJwtEndpoint === undefined; // This is for SFUs where we do not publish.
+  const tryBothJwtEndpoints = opts?.matrixRTCMode === undefined; // This is for SFUs where we do not publish.
 
-  const forceMatrix2Jwt =
-    opts?.forceJwtEndpoint === JwtEndpointVersion.Matrix_2_0;
+  const forceMatrix2Jwt = opts?.matrixRTCMode === MatrixRTCMode.Matrix_2_0;
 
   // We want to start using the new endpoint (with optional delay delegation)
   // if we can use both or if we are forced to use the new one.
   if (tryBothJwtEndpoints || forceMatrix2Jwt) {
     try {
       logger?.info(
-        `Trying to get JWT with delegation for focus ${serviceUrl}...`,
+        `Trying to get JWT via default endpoint for focus ${serviceUrl}...`,
       );
-      const sfuConfig = await getLiveKitJWTWithDelayDelegation(
+      const sfuConfig = await getLiveKitJWT(
         membership,
         serviceUrl,
         roomId,
@@ -154,7 +152,7 @@ export async function getSFUConfigWithOpenID(
     logger?.info(
       `Trying to get JWT with legacy endpoint for focus ${serviceUrl}...`,
     );
-    sfuConfig = await getLiveKitJWT(
+    sfuConfig = await getLiveKitJWTLegacy(
       membership.deviceId,
       serviceUrl,
       roomId,
@@ -188,7 +186,7 @@ function extractFullConfigFromToken(sfuConfig: {
   };
 }
 
-async function getLiveKitJWT(
+async function getLiveKitJWTLegacy(
   deviceId: string,
   livekitServiceURL: string,
   matrixRoomId: string,
@@ -204,11 +202,10 @@ async function getLiveKitJWT(
   let bodyDalayParts: IDelayParams = {};
   // Also check for empty string
   if (delayId && delayEndpointBaseUrl) {
-    const delayTimeoutMs =
-      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms;
     bodyDalayParts = {
       delay_id: delayId,
-      delay_timeout: delayTimeoutMs,
+      delay_timeout:
+        Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms,
       delay_cs_api_url: delayEndpointBaseUrl,
     };
   }
@@ -264,7 +261,7 @@ class NotSupportedError extends Error {
   }
 }
 
-export async function getLiveKitJWTWithDelayDelegation(
+export async function getLiveKitJWT(
   membership: CallMembershipIdentityParts,
   livekitServiceURL: string,
   matrixRoomId: string,
@@ -288,11 +285,10 @@ export async function getLiveKitJWTWithDelayDelegation(
   let bodyDalayParts = {};
   // Also check for empty string
   if (delayId && delayEndpointBaseUrl) {
-    const delayTimeoutMs =
-      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms;
     bodyDalayParts = {
       delay_id: delayId,
-      delay_timeout: delayTimeoutMs,
+      delay_timeout:
+        Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms,
       delay_cs_api_url: delayEndpointBaseUrl,
     };
   }

src/livekit/options.test.ts

@@ -0,0 +1,213 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it, vi } from "vitest";
+import { VideoPresets, type VideoPreset } from "livekit-client";
+
+import { buildLiveKitOptions, getLiveKitOptions } from "./options";
+import { Config } from "../config/Config";
+
+vi.mock("../config/Config", () => ({
+  Config: {
+    get: vi.fn(),
+  },
+}));
+
+describe("buildLiveKitOptions", () => {
+  it("returns sensible defaults with no config", () => {
+    const opts = buildLiveKitOptions();
+    expect(opts.adaptiveStream).toBe(true);
+    expect(opts.dynacast).toBe(true);
+    expect(opts.videoCaptureDefaults?.resolution).toEqual(
+      VideoPresets.h720.resolution,
+    );
+    expect(opts.publishDefaults?.videoCodec).toBe("vp8");
+    expect(opts.publishDefaults?.videoEncoding).toEqual({
+      maxBitrate: 1_700_000,
+      maxFramerate: 30,
+    });
+    expect(opts.publishDefaults?.screenShareEncoding).toEqual({
+      maxBitrate: 5_000_000,
+      maxFramerate: 30,
+    });
+    expect(opts.publishDefaults?.videoSimulcastLayers).toEqual([
+      VideoPresets.h180,
+      VideoPresets.h360,
+    ]);
+  });
+
+  it("applies video codec from config", () => {
+    const opts = buildLiveKitOptions({ video_codec: "vp9" });
+    expect(opts.publishDefaults?.videoCodec).toBe("vp9");
+  });
+
+  it("applies video resolution and encoding from config", () => {
+    const baseVideoConfig = {
+      max_resolution: 1080,
+      max_bitrate: 3_000_000,
+      max_framerate: 60,
+    };
+    const opts1080 = buildLiveKitOptions({
+      video: baseVideoConfig,
+    });
+    const opts1440 = buildLiveKitOptions({
+      video: { ...baseVideoConfig, max_resolution: 1440 },
+    });
+    const opts2160 = buildLiveKitOptions({
+      video: { ...baseVideoConfig, max_resolution: 2160 },
+    });
+    expect(opts1080.videoCaptureDefaults?.resolution).toEqual(
+      VideoPresets.h1080.resolution,
+    );
+    expect(opts1440.videoCaptureDefaults?.resolution).toEqual(
+      VideoPresets.h1440.resolution,
+    );
+    expect(opts2160.videoCaptureDefaults?.resolution).toEqual(
+      VideoPresets.h2160.resolution,
+    );
+    expect(opts1080.publishDefaults?.videoEncoding).toEqual({
+      maxBitrate: 3_000_000,
+      maxFramerate: 60,
+    });
+  });
+
+  it("applies screen share encoding from config", () => {
+    const opts = buildLiveKitOptions({
+      screen_share: {
+        max_bitrate: 8_000_000,
+        max_framerate: 15,
+      },
+    });
+    expect(opts.publishDefaults?.screenShareEncoding).toEqual({
+      maxBitrate: 8_000_000,
+      maxFramerate: 15,
+    });
+  });
+
+  it("uses DEFAULT_CONFIG defaults when only resolution is set", () => {
+    const opts = buildLiveKitOptions({
+      screen_share: {
+        max_resolution: 720,
+      },
+    });
+    // Bitrate and framerate fall back to DEFAULT_CONFIG, not the preset
+    expect(opts.publishDefaults?.screenShareEncoding).toEqual({
+      maxBitrate: 5_000_000,
+      maxFramerate: 30,
+    });
+  });
+
+  it("maps low resolutions to the closest preset, rounding up", () => {
+    const expectations: [number, VideoPreset][] = [
+      [180, VideoPresets.h180],
+      [360, VideoPresets.h360],
+      [480, VideoPresets.h540],
+      [540, VideoPresets.h540],
+      [720, VideoPresets.h720],
+    ];
+    for (const [height, preset] of expectations) {
+      const opts = buildLiveKitOptions({ video: { max_resolution: height } });
+      expect(opts.videoCaptureDefaults?.resolution).toEqual(preset.resolution);
+    }
+  });
+
+  it("screen share layers fall back to max_framerate, then 30", () => {
+    const fromMax = buildLiveKitOptions({
+      screen_share: {
+        max_framerate: 15,
+        simulcast_layers: [{ height: 540, bitrate: 1_000_000 }],
+      },
+    });
+    expect(
+      fromMax.publishDefaults?.screenShareSimulcastLayers?.[0],
+    ).toMatchObject({ encoding: { maxFramerate: 15 } });
+
+    const fromDefault = buildLiveKitOptions({
+      screen_share: {
+        simulcast_layers: [{ height: 540, bitrate: 1_000_000 }],
+      },
+    });
+    expect(
+      fromDefault.publishDefaults?.screenShareSimulcastLayers?.[0],
+    ).toMatchObject({ encoding: { maxFramerate: 30 } });
+  });
+
+  it("applies custom video simulcast layers", () => {
+    const opts = buildLiveKitOptions({
+      video: {
+        simulcast_layers: [
+          { height: 180, bitrate: 100_000 },
+          { height: 360, bitrate: 300_000 },
+          { height: 540, bitrate: 600_000 },
+        ],
+        max_framerate: 24,
+      },
+    });
+    const layers = opts.publishDefaults?.videoSimulcastLayers;
+    expect(layers).toHaveLength(3);
+    expect(layers?.[0]).toMatchObject({
+      width: 320,
+      height: 180,
+      encoding: { maxBitrate: 100_000, maxFramerate: 24 },
+    });
+    expect(layers?.[2]).toMatchObject({
+      width: 960,
+      height: 540,
+      encoding: { maxBitrate: 600_000, maxFramerate: 24 },
+    });
+  });
+
+  it("applies custom screen share simulcast layers", () => {
+    const opts = buildLiveKitOptions({
+      screen_share: {
+        simulcast_layers: [{ height: 540, bitrate: 1_000_000, framerate: 5 }],
+      },
+    });
+    const layers = opts.publishDefaults?.screenShareSimulcastLayers;
+    expect(layers).toHaveLength(1);
+    expect(layers?.[0]).toMatchObject({
+      width: 960,
+      height: 540,
+      encoding: { maxBitrate: 1_000_000, maxFramerate: 5 },
+    });
+  });
+
+  it("does not include screenShareSimulcastLayers when not configured", () => {
+    const opts = buildLiveKitOptions();
+    expect(opts.publishDefaults?.screenShareSimulcastLayers).toBeUndefined();
+  });
+
+  it("backupCodec always uses stock VP8 720p encoding", () => {
+    const opts = buildLiveKitOptions({
+      video_codec: "av1",
+      video: { max_bitrate: 10_000_000, max_framerate: 60 },
+    });
+    const backup = opts.publishDefaults?.backupCodec as {
+      codec: string;
+      encoding: { maxBitrate: number; maxFramerate: number };
+    };
+    expect(backup.codec).toBe("vp8");
+    expect(backup.encoding).toEqual(VideoPresets.h720.encoding);
+  });
+});
+
+describe("getLiveKitOptions", () => {
+  it("reads from Config singleton", () => {
+    vi.mocked(Config.get).mockReturnValue({
+      media_quality: { video_codec: "h264" },
+    } as ReturnType<typeof Config.get>);
+    const opts = getLiveKitOptions();
+    expect(opts.publishDefaults?.videoCodec).toBe("h264");
+  });
+
+  it("throws when Config is not initialized", () => {
+    vi.mocked(Config.get).mockImplementation(() => {
+      throw new Error("Config not initialized");
+    });
+    expect(() => getLiveKitOptions()).toThrow("Config not initialized");
+  });
+});

src/livekit/options.ts

@@ -9,46 +9,144 @@ import {
   AudioPresets,
   DefaultReconnectPolicy,
   type RoomOptions,
-  ScreenSharePresets,
   type TrackPublishDefaults,
   type VideoPreset,
   VideoPresets,
+  VideoPreset as VideoPresetClass,
 } from "livekit-client";
 
-const defaultLiveKitPublishOptions: TrackPublishDefaults = {
-  audioPreset: AudioPresets.music,
-  dtx: true,
-  // disable red because the livekit server strips out red packets for clients
-  // that don't support it (firefox) but of course that doesn't work with e2ee.
-  red: false,
-  forceStereo: false,
-  simulcast: true,
-  videoSimulcastLayers: [VideoPresets.h180, VideoPresets.h360] as VideoPreset[],
-  screenShareEncoding: ScreenSharePresets.h1080fps30.encoding,
-  stopMicTrackOnMute: false,
-  videoCodec: "vp8",
-  videoEncoding: VideoPresets.h720.encoding,
-  backupCodec: { codec: "vp8", encoding: VideoPresets.h720.encoding },
-} as const;
+import { Config } from "../config/Config";
+import { DEFAULT_CONFIG, type ConfigOptions } from "../config/ConfigOptions";
 
-export const defaultLiveKitOptions: RoomOptions = {
-  // automatically manage subscribed video quality
-  adaptiveStream: true,
+/**
+ * Find the closest matching VideoPreset for a given height.
+ */
+function videoPresetForHeight(height: number): VideoPreset {
+  if (height <= 180) return VideoPresets.h180;
+  if (height <= 360) return VideoPresets.h360;
+  if (height <= 540) return VideoPresets.h540;
+  if (height <= 720) return VideoPresets.h720;
+  if (height <= 1080) return VideoPresets.h1080;
+  if (height <= 1440) return VideoPresets.h1440;
+  return VideoPresets.h2160;
+}
 
-  // optimize publishing bandwidth and CPU for published tracks
-  dynacast: true,
+/**
+ * Build LiveKit publish options from config, falling back to sensible defaults.
+ */
+function buildPublishOptions(
+  mediaQuality: ConfigOptions["media_quality"],
+): TrackPublishDefaults {
+  const defaults = DEFAULT_CONFIG.media_quality;
+  const videoConf = mediaQuality?.video;
+  const screenConf = mediaQuality?.screen_share;
+  const codec = mediaQuality?.video_codec ?? defaults.video_codec;
 
-  // capture settings
-  videoCaptureDefaults: {
-    resolution: VideoPresets.h720.resolution,
-  },
+  // Camera video encoding
+  const videoEncoding = {
+    maxBitrate: videoConf?.max_bitrate ?? defaults.video.max_bitrate,
+    maxFramerate: videoConf?.max_framerate ?? defaults.video.max_framerate,
+  };
 
-  // publish settings
-  publishDefaults: defaultLiveKitPublishOptions,
+  // Camera simulcast layers
+  let videoSimulcastLayers: VideoPreset[];
+  if (videoConf?.simulcast_layers) {
+    videoSimulcastLayers = videoConf.simulcast_layers.map(
+      (layer) =>
+        new VideoPresetClass(
+          Math.round((layer.height * 16) / 9),
+          layer.height,
+          layer.bitrate,
+          videoConf?.max_framerate ?? defaults.video.max_framerate,
+        ),
+    );
+  } else {
+    videoSimulcastLayers = [VideoPresets.h180, VideoPresets.h360];
+  }
 
-  // default LiveKit options that seem to be sane
-  stopLocalTrackOnUnpublish: true,
-  reconnectPolicy: new DefaultReconnectPolicy(),
-  disconnectOnPageLeave: true,
-  webAudioMix: false,
-};
+  // Screen share encoding
+  const screenShareEncoding = {
+    maxBitrate: screenConf?.max_bitrate ?? defaults.screen_share.max_bitrate,
+    maxFramerate:
+      screenConf?.max_framerate ?? defaults.screen_share.max_framerate,
+  };
+
+  // Screen share simulcast layers
+  let screenShareSimulcastLayers: VideoPreset[] | undefined;
+  if (screenConf?.simulcast_layers) {
+    screenShareSimulcastLayers = screenConf.simulcast_layers.map(
+      (layer) =>
+        new VideoPresetClass(
+          Math.round((layer.height * 16) / 9),
+          layer.height,
+          layer.bitrate,
+          layer.framerate ?? screenConf?.max_framerate ?? 30,
+        ),
+    );
+  }
+
+  return {
+    audioPreset: AudioPresets.music,
+    dtx: true,
+    // disable red because the livekit server strips out red packets for clients
+    // that don't support it (firefox) but of course that doesn't work with e2ee.
+    red: false,
+    forceStereo: false,
+    simulcast: true,
+    videoSimulcastLayers: videoSimulcastLayers as VideoPreset[],
+    screenShareEncoding,
+    ...(screenShareSimulcastLayers && {
+      screenShareSimulcastLayers: screenShareSimulcastLayers as VideoPreset[],
+    }),
+    stopMicTrackOnMute: false,
+    videoCodec: codec,
+    videoEncoding,
+    backupCodec: {
+      codec: "vp8",
+      encoding: VideoPresets.h720.encoding,
+    },
+  } as TrackPublishDefaults;
+}
+
+/**
+ * Build LiveKit RoomOptions from config.
+ * Call this after Config.init() has resolved.
+ */
+export function buildLiveKitOptions(
+  mediaQuality?: ConfigOptions["media_quality"],
+): RoomOptions {
+  const videoHeight =
+    mediaQuality?.video?.max_resolution ??
+    DEFAULT_CONFIG.media_quality.video.max_resolution;
+  const basePreset = videoPresetForHeight(videoHeight);
+
+  return {
+    // automatically manage subscribed video quality
+    adaptiveStream: true,
+
+    // optimize publishing bandwidth and CPU for published tracks
+    dynacast: true,
+
+    // capture settings
+    videoCaptureDefaults: {
+      resolution: basePreset.resolution,
+    },
+
+    // publish settings
+    publishDefaults: buildPublishOptions(mediaQuality),
+
+    // default LiveKit options that seem to be sane
+    stopLocalTrackOnUnpublish: true,
+    reconnectPolicy: new DefaultReconnectPolicy(),
+    disconnectOnPageLeave: true,
+    webAudioMix: false,
+  };
+}
+
+/**
+ * Get LiveKit options, reading from the loaded Config singleton.
+ * Requires Config.init() to have resolved first.
+ */
+export function getLiveKitOptions(): RoomOptions {
+  return buildLiveKitOptions(Config.get().media_quality);
+}

src/room/GroupCallView.tsx

@@ -555,6 +555,9 @@ export const GroupCallView: FC<Props> = ({
       }}
       onError={(_error) => {
         if (rtcSession.isJoined()) onLeft("error");
+        // If there is an error we need to be able to close the widget. This is done in `onLeft` as well
+        // We need it here explicitly in case rtcSession.isJoined is false.
+        void widget?.api.setAlwaysOnScreen(false);
       }}
     >
       {body}

src/room/InCallView.test.tsx

@@ -22,7 +22,7 @@ import { TooltipProvider } from "@vector-im/compound-web";
 import { RoomContext, useLocalParticipant } from "@livekit/components-react";
 import userEvent from "@testing-library/user-event";
 
-import { InCallView } from "./InCallView";
+import { ActiveCall, InCallView } from "./InCallView";
 import {
   mockLivekitRoom,
   mockLocalParticipant,
@@ -33,7 +33,10 @@ import {
   type MockRTCSession,
 } from "../utils/test";
 import { E2eeType } from "../e2ee/e2eeType";
-import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
+import {
+  getBasicCallViewModelEnvironment,
+  getBasicRTCSession,
+} from "../utils/test-viewmodel";
 import {
   type CallViewModel,
   type CallViewModelOptions,
@@ -45,6 +48,8 @@ import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
 import { AppBar } from "../AppBar";
+import { type MatrixInfo } from "./VideoPreview";
+import { ProcessorProvider } from "../livekit/TrackProcessorContext";
 import { initializeWidget } from "../widget";
 
 initializeWidget();
@@ -78,6 +83,17 @@ const remoteParticipant = mockRemoteParticipant({
   identity: "@alice:example.org:AAAAAA",
 });
 
+const matrixInfo = {
+  userId: "",
+  displayName: "",
+  avatarUrl: "",
+  roomId: "",
+  roomName: "",
+  roomAlias: null,
+  roomAvatar: null,
+  e2eeSystem: { kind: E2eeType.NONE },
+} satisfies MatrixInfo;
+
 let useRoomEncryptionSystemMock: MockedFunction<typeof useRoomEncryptionSystem>;
 
 beforeEach(() => {
@@ -122,12 +138,13 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
       remoteParticipants$: of([remoteParticipant]),
     },
   );
-  const { vm, footerVm, rtcSession } = getBasicCallViewModelEnvironment(
-    [local, alice],
-    undefined,
-    mediaDevices,
-    args.callViewModelOptions,
-  );
+  const { vm, footerVm, developerSettingsVm, rtcSession } =
+    getBasicCallViewModelEnvironment(
+      [local, alice],
+      undefined,
+      mediaDevices,
+      args.callViewModelOptions,
+    );
 
   rtcSession.joined = true;
   const room = rtcSession.room;
@@ -140,18 +157,8 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
       muteStates={muteState}
       vm={vm}
       footerVm={footerVm}
-      matrixInfo={{
-        userId: "",
-        displayName: "",
-        avatarUrl: "",
-        roomId: "",
-        roomName: "",
-        roomAlias: null,
-        roomAvatar: null,
-        e2eeSystem: {
-          kind: E2eeType.NONE,
-        },
-      }}
+      developerSettingsVm={developerSettingsVm}
+      matrixInfo={matrixInfo}
       matrixRoom={room}
       onShareClick={null}
     />
@@ -226,3 +233,34 @@ describe("InCallView", () => {
     });
   });
 });
+
+describe("ActiveCall", () => {
+  it("creates the view models and renders the call", async () => {
+    const mediaDevices = mockMediaDevices({});
+    const { rtcSession, matrixRoom } = getBasicRTCSession([local, alice]);
+    const { findByTestId } = render(
+      <BrowserRouter>
+        <MediaDevicesContext value={mediaDevices}>
+          <ProcessorProvider>
+            <TooltipProvider>
+              <RoomContext value={mockLivekitRoom({ localParticipant })}>
+                <ActiveCall
+                  client={matrixRoom.client}
+                  rtcSession={rtcSession.asMockedSession()}
+                  matrixRoom={matrixRoom}
+                  muteStates={mockMuteStates()}
+                  matrixInfo={matrixInfo}
+                  onShareClick={null}
+                  e2eeSystem={{ kind: E2eeType.NONE }}
+                  onLeft={(): void => {}}
+                />
+              </RoomContext>
+            </TooltipProvider>
+          </ProcessorProvider>
+        </MediaDevicesContext>
+      </BrowserRouter>,
+    );
+    // Rendering at all proves ActiveCall created all of its view models
+    expect(await findByTestId("incall_leave")).toBeVisible();
+  });
+});

src/room/InCallView.tsx

@@ -83,6 +83,8 @@ import { ObservableScope } from "../state/ObservableScope.ts";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
 import { SettingsIconButton } from "../button/Button.tsx";
 import { createCallFooterViewModel } from "../components/CallFooterViewModel.tsx";
+import { createDeveloperSettingsTabViewModel } from "../settings/DeveloperSettingsTabViewModel.ts";
+import { type DeveloperSettingsSnapshot } from "../settings/DeveloperSettingsTab.tsx";
 import { type ViewModel } from "../state/ViewModel.ts";
 import { RingingStatus } from "../tile/RingingStatus.tsx";
 import { RingingAudioRenderer } from "./RingingAudioRenderer.tsx";
@@ -96,7 +98,7 @@ declare module "react" {
 
 export interface ActiveCallProps extends Omit<
   InCallViewProps,
-  "vm" | "livekitRoom" | "connState" | "footerVm"
+  "vm" | "livekitRoom" | "connState" | "footerVm" | "developerSettingsVm"
 > {
   e2eeSystem: EncryptionSystem;
   // TODO refactor those reasons into an enum
@@ -110,6 +112,9 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const [footerVm, setFooterVm] = useState<ViewModel<FooterSnapshot> | null>(
     null,
   );
+  const [developerSettingsVm, setDeveloperSettingsVm] =
+    useState<ViewModel<DeveloperSettingsSnapshot> | null>(null);
+
   const urlParams = useUrlParams();
   const mediaDevices = useMediaDevices();
   const trackProcessorState$ = useTrackProcessorObservable$();
@@ -130,7 +135,9 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         encryptionSystem: props.e2eeSystem,
         autoLeaveWhenOthersLeft,
         waitForCallPickup: waitForCallPickup && sendNotificationType === "ring",
-        matrixRTCMode$: matrixRTCModeSetting.value$,
+        // We merely sample the current mode here, so the user would need to
+        // manually rejoin to switch to a different one.
+        matrixRTCMode: matrixRTCModeSetting.value$.value,
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
@@ -169,6 +176,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       `${props.client.getUserId()}:${props.client.getDeviceId()}`,
     );
     setFooterVm(footerVm);
+    setDeveloperSettingsVm(createDeveloperSettingsTabViewModel(scope, vm));
 
     return (): void => {
       scope.end();
@@ -188,10 +196,16 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
 
   if (vm === null) return null;
   if (footerVm === null) return null;
+  if (developerSettingsVm === null) return null;
 
   return (
     <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
-      <InCallView {...props} vm={vm} footerVm={footerVm} />
+      <InCallView
+        {...props}
+        vm={vm}
+        footerVm={footerVm}
+        developerSettingsVm={developerSettingsVm}
+      />
     </ReactionsSenderProvider>
   );
 };
@@ -200,6 +214,7 @@ export interface InCallViewProps {
   client: MatrixClient;
   vm: CallViewModel;
   footerVm: ViewModel<FooterSnapshot>;
+  developerSettingsVm: ViewModel<DeveloperSettingsSnapshot>;
   matrixInfo: MatrixInfo;
   rtcSession: MatrixRTCSession;
   matrixRoom: MatrixRoom;
@@ -211,6 +226,7 @@ export const InCallView: FC<InCallViewProps> = ({
   client,
   vm,
   footerVm,
+  developerSettingsVm,
   matrixInfo,
   matrixRoom,
   muteStates,
@@ -256,11 +272,13 @@ export const InCallView: FC<InCallViewProps> = ({
   const audioParticipants = useBehavior(vm.livekitRoomItems$);
   const participantCount = useBehavior(vm.participantCount$);
   const reconnecting = useBehavior(vm.reconnecting$);
+  const screenShareError = useBehavior(vm.screenShareError$);
   const layout = useBehavior(vm.layout$);
   const edgeToEdge = useBehavior(vm.edgeToEdge$);
   const overflowing = useBehavior(vm.overflowing$);
   const showNameTags = useBehavior(vm.showNameTags$);
   const showHeader = useBehavior(vm.showHeader$);
+  const showModals = useBehavior(vm.showModals$);
   const settingsOpen = useBehavior(vm.settingsOpen$);
   const setSettingsOpen = useBehavior(vm.setSettingsOpen$);
   const earpieceMode = useBehavior(vm.earpieceMode$);
@@ -384,6 +402,21 @@ export const InCallView: FC<InCallViewProps> = ({
       );
   }
 
+  const onDismissScreenShareToast = useCallback(
+    () => vm.dismissScreenShareError(),
+    [vm],
+  );
+  const screenShareToast = (
+    <Toast
+      onDismiss={onDismissScreenShareToast}
+      open={screenShareError !== null}
+      autoDismiss={5000}
+      modal={false}
+    >
+      {t("error.screen_share_failed")}
+    </Toast>
+  );
+
   // The reconnecting toast cannot be dismissed
   const onDismissReconnectingToast = useCallback(() => {}, []);
   // We need to use a non-modal toast to avoid trapping focus within the toast.
@@ -619,10 +652,11 @@ export const InCallView: FC<InCallViewProps> = ({
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
       <RingingAudioRenderer vm={ringingVm} muted={muteAllAudio} />
       {reconnectingToast}
+      {screenShareToast}
       {earpieceOverlay}
       <ReactionsOverlay vm={vm} />
       {footer}
-      {layout.type !== "pip" && (
+      {showModals && (
         <>
           <RageshakeRequestModal {...rageshakeRequestModalProps} />
           <SettingsModal
@@ -632,6 +666,7 @@ export const InCallView: FC<InCallViewProps> = ({
             onDismiss={(): void => setSettingsOpen(false)}
             tab={settingsTab}
             onTabChange={setSettingsTab}
+            developerSettingsVm={developerSettingsVm}
             livekitRooms={allConnections
               .getConnections()
               .map((connectionItem) => ({

src/room/VideoPreview.module.css

@@ -22,6 +22,9 @@ Please see LICENSE in the repository root for full details.
   height: 100%;
   object-fit: cover;
   background-color: var(--video-tile-background);
+  /* In FF if you add a transform: scale/translate/matrix filter on an element,
+  it'll ignore the parents' border-radius, so force back the radius to avoid UI glitch*/
+  border-radius: inherit;
 }
 
 video.mirror {

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

@@ -171,7 +171,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="_settingsLogoContainer_20b7b4"
       >
         <button
-          aria-labelledby="_r_8_"
+          aria-labelledby="_r_b_"
           class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
           data-kind="secondary"
           data-testid="settings-bottom-left"
@@ -306,7 +306,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="_buttons_20b7b4"
       >
         <button
-          aria-labelledby="_r_d_"
+          aria-labelledby="_r_g_"
           class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
@@ -331,7 +331,7 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-busy="false"
           aria-checked="false"
           aria-disabled="true"
-          aria-labelledby="_r_i_"
+          aria-labelledby="_r_l_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="primary"
           data-size="lg"
@@ -356,7 +356,7 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-busy="false"
           aria-checked="false"
           aria-disabled="true"
-          aria-labelledby="_r_n_"
+          aria-labelledby="_r_q_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="primary"
           data-size="lg"
@@ -381,7 +381,7 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="true"
-          aria-labelledby="_r_s_"
+          aria-labelledby="_r_v_"
           class="_button_1nw83_8 _raiseHand_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
@@ -404,7 +404,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby="_r_14_"
+          aria-labelledby="_r_17_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
@@ -432,8 +432,8 @@ exports[`InCallView > rendering > renders 1`] = `
         data-size="lg"
       >
         <input
-          aria-labelledby="_r_1a_"
-          name="_r_19_"
+          aria-labelledby="_r_1d_"
+          name="_r_1c_"
           type="radio"
           value="spotlight"
         />
@@ -452,9 +452,9 @@ exports[`InCallView > rendering > renders 1`] = `
           />
         </svg>
         <input
-          aria-labelledby="_r_1f_"
+          aria-labelledby="_r_1i_"
           checked=""
-          name="_r_19_"
+          name="_r_1c_"
           type="radio"
           value="grid"
         />

src/room/useLoadGroupCall.ts

@@ -280,7 +280,7 @@ export const useLoadGroupCall = (
             );
           }
           if (
-            roomSummary === undefined ||
+            roomSummary?.join_rule === undefined ||
             roomSummary.join_rule === JoinRule.Public
           ) {
             room = await client.joinRoom(roomId, {

src/settings/DeveloperSettingsTab.test.tsx

@@ -12,7 +12,12 @@ import { TooltipProvider } from "@vector-im/compound-web";
 
 import type { MatrixClient } from "matrix-js-sdk";
 import type { Room as LivekitRoom } from "livekit-client";
-import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
+import {
+  DeveloperSettingsTab,
+  type DeveloperSettingsSnapshot,
+} from "./DeveloperSettingsTab";
+import { outOfCallDeveloperSettingsTabViewModel } from "./DeveloperSettingsTabViewModel";
+import { createStaticViewModel } from "../state/ViewModel";
 import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
 import {
   customLivekitUrl as customLivekitUrlSetting,
@@ -107,6 +112,7 @@ describe("DeveloperSettingsTab", () => {
         roomId={"#room:example.org"}
         livekitRooms={livekitRooms}
         env={{ MY_MOCK_ENV: 10, ENV: "test" } as unknown as ImportMetaEnv}
+        vm={outOfCallDeveloperSettingsTabViewModel}
       />,
     );
 
@@ -136,6 +142,7 @@ describe("DeveloperSettingsTab", () => {
           <DeveloperSettingsTab
             client={client}
             env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
           />
         </TooltipProvider>,
       );
@@ -159,6 +166,7 @@ describe("DeveloperSettingsTab", () => {
             client={client}
             roomId="#testRoom"
             env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
           />
         </TooltipProvider>,
       );
@@ -181,6 +189,7 @@ describe("DeveloperSettingsTab", () => {
             client={client}
             roomId="#testRoom"
             env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
           />
         </TooltipProvider>,
       );
@@ -206,6 +215,7 @@ describe("DeveloperSettingsTab", () => {
             client={client}
             roomId="#testRoom"
             env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
           />
         </TooltipProvider>,
       );
@@ -236,6 +246,7 @@ describe("DeveloperSettingsTab", () => {
             client={client}
             roomId="#testRoom"
             env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
           />
         </TooltipProvider>,
       );
@@ -273,6 +284,7 @@ describe("DeveloperSettingsTab", () => {
           <DeveloperSettingsTab
             client={client}
             env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
           />
         </TooltipProvider>,
       );
@@ -305,6 +317,7 @@ describe("DeveloperSettingsTab", () => {
           <DeveloperSettingsTab
             client={client}
             env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
           />
         </TooltipProvider>,
       );
@@ -317,19 +330,15 @@ describe("DeveloperSettingsTab", () => {
 
   describe("matrix rtc mode", () => {
     afterEach(() => {
-      matrixRTCModeSetting.setValue(MatrixRTCMode.Legacy);
+      matrixRTCModeSetting.setValue(MatrixRTCMode.Compatibility);
       vi.restoreAllMocks();
     });
 
     function getModeRadios(): {
-      legacy: HTMLInputElement;
       compatibility: HTMLInputElement;
       matrix20: HTMLInputElement;
     } {
       return {
-        legacy: screen.getByDisplayValue(
-          MatrixRTCMode.Legacy,
-        ) as HTMLInputElement,
         compatibility: screen.getByDisplayValue(
           MatrixRTCMode.Compatibility,
         ) as HTMLInputElement,
@@ -349,6 +358,7 @@ describe("DeveloperSettingsTab", () => {
           <DeveloperSettingsTab
             client={client}
             env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
           />
         </TooltipProvider>,
       );
@@ -359,27 +369,21 @@ describe("DeveloperSettingsTab", () => {
 
       const radios = getModeRadios();
       expect(radios.compatibility).toBeChecked();
-      expect(radios.legacy).not.toBeChecked();
       expect(radios.matrix20).not.toBeChecked();
       // None are disabled by config; only Matrix_2_0 may be disabled by sticky-events support.
-      expect(radios.legacy).not.toBeDisabled();
       expect(radios.compatibility).not.toBeDisabled();
     });
 
-    it.each([
-      MatrixRTCMode.Legacy,
-      MatrixRTCMode.Compatibility,
-      MatrixRTCMode.Matrix_2_0,
-    ])(
+    it.each([MatrixRTCMode.Compatibility, MatrixRTCMode.Matrix_2_0])(
       "disables all radios and shows the config value (%s) as checked when matrix_rtc_mode is set",
       async (configMode) => {
         mockConfig({ matrix_rtc_mode: configMode });
         // Local setting is intentionally different from the config value to
         // prove config wins.
         matrixRTCModeSetting.setValue(
-          configMode === MatrixRTCMode.Legacy
-            ? MatrixRTCMode.Compatibility
-            : MatrixRTCMode.Legacy,
+          configMode === MatrixRTCMode.Compatibility
+            ? MatrixRTCMode.Matrix_2_0
+            : MatrixRTCMode.Compatibility,
         );
         const client = createMockMatrixClient();
 
@@ -388,6 +392,7 @@ describe("DeveloperSettingsTab", () => {
             <DeveloperSettingsTab
               client={client}
               env={{} as unknown as ImportMetaEnv}
+              vm={outOfCallDeveloperSettingsTabViewModel}
             />
           </TooltipProvider>,
         );
@@ -397,13 +402,11 @@ describe("DeveloperSettingsTab", () => {
         );
 
         const radios = getModeRadios();
-        expect(radios.legacy).toBeDisabled();
         expect(radios.compatibility).toBeDisabled();
         expect(radios.matrix20).toBeDisabled();
 
         const checkedValue = (
           {
-            [MatrixRTCMode.Legacy]: radios.legacy,
             [MatrixRTCMode.Compatibility]: radios.compatibility,
             [MatrixRTCMode.Matrix_2_0]: radios.matrix20,
           } as const
@@ -412,4 +415,74 @@ describe("DeveloperSettingsTab", () => {
       },
     );
   });
+
+  describe("KeyRotationStatus", () => {
+    it("displays active status when key rotation is not suppressed", async () => {
+      const client = createMockMatrixClient();
+      const vm = createStaticViewModel<DeveloperSettingsSnapshot>({
+        keyRotation: { suppressed: false, participantCount: 5 },
+      });
+
+      render(
+        <TooltipProvider>
+          <DeveloperSettingsTab
+            client={client}
+            env={{} as unknown as ImportMetaEnv}
+            vm={vm}
+          />
+        </TooltipProvider>,
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.getByText(/Media key rotation: active \(5 participants\)/),
+        ).toBeInTheDocument(),
+      );
+    });
+
+    it("displays suppressed status when key rotation is suppressed", async () => {
+      const client = createMockMatrixClient();
+      const vm = createStaticViewModel<DeveloperSettingsSnapshot>({
+        keyRotation: { suppressed: true, participantCount: 50 },
+      });
+
+      render(
+        <TooltipProvider>
+          <DeveloperSettingsTab
+            client={client}
+            env={{} as unknown as ImportMetaEnv}
+            vm={vm}
+          />
+        </TooltipProvider>,
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.getByText(
+            /Media key rotation: suppressed, participant limit reached \(50 participants\)/,
+          ),
+        ).toBeInTheDocument(),
+      );
+    });
+
+    it("does not render KeyRotationStatus when not in a call", async () => {
+      const client = createMockMatrixClient();
+
+      render(
+        <TooltipProvider>
+          <DeveloperSettingsTab
+            client={client}
+            env={{} as unknown as ImportMetaEnv}
+            vm={outOfCallDeveloperSettingsTabViewModel}
+          />
+        </TooltipProvider>,
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.queryByText(/Media key rotation:/),
+        ).not.toBeInTheDocument(),
+      );
+    });
+  });
 });

src/settings/DeveloperSettingsTab.tsx

@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
 import {
   type ChangeEvent,
   type FC,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -29,12 +30,14 @@ import {
   InlineField,
   Label,
   RadioControl,
+  Separator,
 } from "@vector-im/compound-web";
 import { type Room as LivekitRoom } from "livekit-client";
 
 import { FieldRow, InputField } from "../input/Input";
 import { Config } from "../config/Config";
 import {
+  type Setting,
   useSetting,
   duplicateTiles as duplicateTilesSetting,
   debugTileLayout as debugTileLayoutSetting,
@@ -43,12 +46,61 @@ import {
   alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
   matrixRTCMode as matrixRTCModeSetting,
   customLivekitUrl as customLivekitUrlSetting,
+  advancedScreenShare as advancedScreenShareSetting,
+  screenShareResolution as screenShareResolutionSetting,
+  screenShareFramerate as screenShareFramerateSetting,
+  screenShareBitrate as screenShareBitrateSetting,
+  screenShareCodec as screenShareCodecSetting,
+  advancedCamera as advancedCameraSetting,
+  cameraResolution as cameraResolutionSetting,
+  cameraFramerate as cameraFramerateSetting,
+  cameraBitrate as cameraBitrateSetting,
+  cameraCodec as cameraCodecSetting,
+  echoCancellationSetting,
+  noiseSuppressionSetting,
+  autoGainControlSetting,
+  type VideoCodec,
   enableExtendedLivekitLogs as enableExtendedLivekitLogsSetting,
 } from "./settings";
 import { MatrixRTCMode } from "../config/ConfigOptions";
 import styles from "./DeveloperSettingsTab.module.css";
+import settingsStyles from "./SettingsModal.module.css";
+import { Slider } from "../Slider";
 import { useUrlParams } from "../UrlParams";
 import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
+import { useBehavior } from "../useBehavior";
+import { type ViewModel } from "../state/ViewModel.ts";
+
+/**
+ * The state of MatrixRTC's media key rotation.
+ */
+export interface KeyRotationInfo {
+  /** Whether the call is large enough that MatrixRTC has stopped rotating the media key. */
+  suppressed: boolean;
+  participantCount: number;
+}
+
+/**
+ * The Snapshot combines all fields the developer settings tab needs from the
+ * surrounding call. Everything else in this tab is read from the settings store
+ * or the environment directly.
+ */
+export interface DeveloperSettingsSnapshot {
+  /** The media key rotation state, or `null` when we are not in a call. */
+  keyRotation: KeyRotationInfo | null;
+}
+
+/**
+ * Shows whether the call is large enough that MatrixRTC has stopped rotating the media key.
+ */
+const KeyRotationStatus: FC<{ info: KeyRotationInfo }> = ({ info }) => (
+  <p>
+    Media key rotation:{" "}
+    {info.suppressed
+      ? `suppressed, participant limit reached (${info.participantCount} participants)`
+      : `active (${info.participantCount} participants)`}
+  </p>
+);
 
 interface Props {
   client: MatrixClient;
@@ -60,6 +112,7 @@ interface Props {
     livekitAlias?: string;
   }[];
   env: ImportMetaEnv;
+  vm: ViewModel<DeveloperSettingsSnapshot>;
 }
 
 export const DeveloperSettingsTab: FC<Props> = ({
@@ -67,8 +120,10 @@ export const DeveloperSettingsTab: FC<Props> = ({
   livekitRooms,
   roomId,
   env,
+  vm,
 }) => {
   const { t } = useTranslation();
+  const keyRotation = useBehavior(vm.keyRotation$);
   const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
   const [debugTileLayout, setDebugTileLayout] = useSetting(
     debugTileLayoutSetting,
@@ -138,6 +193,185 @@ export const DeveloperSettingsTab: FC<Props> = ({
     return null;
   }, [livekitRooms]);
 
+  const MediaQualitySettings: React.FC<{
+    id: string;
+    header: string;
+    toggleLabel: string;
+    description: string;
+    toggleSetting: Setting<boolean>;
+    resolutionSetting: Setting<string>;
+    framerateSetting: Setting<number>;
+    bitrateSetting: Setting<number>;
+    codecSetting: Setting<VideoCodec>;
+    resolutionOptions: { value: string; label: string }[];
+    bitrateRange: { min: number; max: number; step: number };
+  }> = ({
+    id,
+    header,
+    toggleLabel,
+    description,
+    toggleSetting,
+    resolutionSetting,
+    framerateSetting,
+    bitrateSetting,
+    codecSetting,
+    resolutionOptions,
+    bitrateRange,
+  }): ReactNode => {
+    const [advancedEnabled, setAdvancedEnabled] = useSetting(toggleSetting);
+    const [resolution, setResolution] = useSetting(resolutionSetting);
+    const [framerate, setFramerate] = useSetting(framerateSetting);
+    const [framerateRaw, setFramerateRaw] = useState(framerate);
+    const [bitrate, setBitrate] = useSetting(bitrateSetting);
+    const [bitrateRaw, setBitrateRaw] = useState(bitrate);
+    const [codec, setCodec] = useSetting(codecSetting);
+
+    return (
+      <>
+        <h4>{header}</h4>
+        <FieldRow>
+          <InputField
+            id={`${id}Toggle`}
+            label={toggleLabel}
+            description={description}
+            type="checkbox"
+            checked={advancedEnabled}
+            onChange={(e): void => setAdvancedEnabled(e.target.checked)}
+          />
+        </FieldRow>
+        {advancedEnabled && (
+          <>
+            <div className={settingsStyles.volumeSlider}>
+              <label htmlFor={`${id}Resolution`}>
+                {t("settings.resolution_label", "Resolution")}
+              </label>
+              <select
+                id={`${id}Resolution`}
+                value={resolution}
+                onChange={(e): void => setResolution(e.target.value)}
+              >
+                {resolutionOptions.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className={settingsStyles.volumeSlider}>
+              <label>
+                {t("settings.framerate_label", "Framerate")}
+                {": "}
+                <span className={settingsStyles.settingValue}>
+                  {framerateRaw} fps
+                </span>
+              </label>
+              <Slider
+                label={t("settings.framerate_label", "Framerate")}
+                value={framerateRaw}
+                onValueChange={setFramerateRaw}
+                onValueCommit={setFramerate}
+                min={5}
+                max={60}
+                step={5}
+                tooltipFormatter={(v): string => `${v} fps`}
+              />
+            </div>
+            <div className={settingsStyles.volumeSlider}>
+              <label>
+                {t("settings.bitrate_label", "Bitrate")}
+                {": "}
+                <span className={settingsStyles.settingValue}>
+                  {(bitrateRaw / 1_000_000).toFixed(1)} Mbps
+                </span>
+              </label>
+              <Slider
+                label={t("settings.bitrate_label", "Bitrate")}
+                value={bitrateRaw}
+                onValueChange={setBitrateRaw}
+                onValueCommit={setBitrate}
+                min={bitrateRange.min}
+                max={bitrateRange.max}
+                step={bitrateRange.step}
+                tooltipFormatter={(v): string =>
+                  `${(v / 1_000_000).toFixed(1)} Mbps`
+                }
+              />
+            </div>
+            <div className={settingsStyles.volumeSlider}>
+              <label htmlFor={`${id}Codec`}>
+                {t("settings.codec_label", "Codec")}
+              </label>
+              <select
+                id={`${id}Codec`}
+                value={codec}
+                onChange={(e): void => setCodec(e.target.value as VideoCodec)}
+              >
+                <option value="vp8">VP8</option>
+                <option value="vp9">VP9</option>
+                <option value="h264">H.264</option>
+                <option value="av1">AV1</option>
+              </select>
+            </div>
+          </>
+        )}
+      </>
+    );
+  };
+
+  const AudioProcessingSettings: React.FC = (): ReactNode => {
+    const [echoCancellation, setEchoCancellation] = useSetting(
+      echoCancellationSetting,
+    );
+    const [noiseSuppression, setNoiseSuppression] = useSetting(
+      noiseSuppressionSetting,
+    );
+    const [autoGainControl, setAutoGainControl] = useSetting(
+      autoGainControlSetting,
+    );
+
+    return (
+      <>
+        <h4>{t("settings.audio_processing_header", "Audio processing")}</h4>
+        <p>
+          {t(
+            "settings.audio_processing_description",
+            "Changes apply on next call join.",
+          )}
+        </p>
+        <FieldRow>
+          <InputField
+            id="echoCancellation"
+            label={t("settings.echo_cancellation_label", "Echo cancellation")}
+            type="checkbox"
+            checked={echoCancellation}
+            onChange={(e): void => setEchoCancellation(e.target.checked)}
+          />
+        </FieldRow>
+        <FieldRow>
+          <InputField
+            id="noiseSuppression"
+            label={t("settings.noise_suppression_label", "Noise suppression")}
+            type="checkbox"
+            checked={noiseSuppression}
+            onChange={(e): void => setNoiseSuppression(e.target.checked)}
+          />
+        </FieldRow>
+        <FieldRow>
+          <InputField
+            id="autoGainControl"
+            label={t(
+              "settings.auto_gain_control_label",
+              "Automatic gain control",
+            )}
+            type="checkbox"
+            checked={autoGainControl}
+            onChange={(e): void => setAutoGainControl(e.target.checked)}
+          />
+        </FieldRow>
+      </>
+    );
+  };
+
   return (
     <>
       <p>
@@ -166,6 +400,8 @@ export const DeveloperSettingsTab: FC<Props> = ({
           id: client.getDeviceId() || "unknown",
         })}
       </p>
+      {keyRotation !== null && <KeyRotationStatus info={keyRotation} />}
+      <Separator />
       <FieldRow>
         <InputField
           id="duplicateTiles"
@@ -315,27 +551,12 @@ export const DeveloperSettingsTab: FC<Props> = ({
           <ErrorMessage>{customLivekitUrlUpdateError}</ErrorMessage>
         )}
       </EditInPlace>
+      <Separator />
       <Heading as="h3" type="body" weight="semibold" size="lg">
         {t("developer_mode.matrixRTCMode.title")}
       </Heading>
       {matrixRTCModeForced && <p>Your deployment overrides the mode.</p>}
       <Form>
-        <InlineField
-          name={matrixRTCModeRadioGroup}
-          control={
-            <RadioControl
-              checked={effectiveMatrixRTCMode === MatrixRTCMode.Legacy}
-              value={MatrixRTCMode.Legacy}
-              disabled={matrixRTCModeForced}
-              onChange={onMatrixRTCModeChange}
-            />
-          }
-        >
-          <Label>{t("developer_mode.matrixRTCMode.Legacy.label")}</Label>
-          <HelpMessage>
-            {t("developer_mode.matrixRTCMode.Legacy.description")}
-          </HelpMessage>
-        </InlineField>
         <InlineField
           name={matrixRTCModeRadioGroup}
           control={
@@ -403,6 +624,61 @@ export const DeveloperSettingsTab: FC<Props> = ({
           </ul>
         </div>
       ))}
+      <Separator />
+      <MediaQualitySettings
+        id="camera"
+        header={t("settings.camera_header", "Camera quality")}
+        toggleLabel={t(
+          "settings.advanced_camera_label",
+          "Advanced camera settings",
+        )}
+        description={t(
+          "settings.advanced_camera_description",
+          "Configure resolution, framerate, bitrate, and codec for camera video. Changes apply on next call join.",
+        )}
+        toggleSetting={advancedCameraSetting}
+        resolutionSetting={cameraResolutionSetting}
+        framerateSetting={cameraFramerateSetting}
+        bitrateSetting={cameraBitrateSetting}
+        codecSetting={cameraCodecSetting}
+        resolutionOptions={[
+          { value: "640x360", label: "360p" },
+          { value: "960x540", label: "540p" },
+          { value: "1280x720", label: "720p" },
+          { value: "1920x1080", label: "1080p" },
+          { value: "2560x1440", label: "1440p" },
+        ]}
+        bitrateRange={{ min: 200_000, max: 8_000_000, step: 100_000 }}
+      />
+      <Separator />
+      <MediaQualitySettings
+        id="screenShare"
+        header={t("settings.screen_share_header", "Screen sharing")}
+        toggleLabel={t(
+          "settings.advanced_screen_share_label",
+          "Advanced screen share settings",
+        )}
+        description={t(
+          "settings.advanced_screen_share_description",
+          "Configure resolution, framerate, bitrate, and codec for screen sharing",
+        )}
+        toggleSetting={advancedScreenShareSetting}
+        resolutionSetting={screenShareResolutionSetting}
+        framerateSetting={screenShareFramerateSetting}
+        bitrateSetting={screenShareBitrateSetting}
+        codecSetting={screenShareCodecSetting}
+        resolutionOptions={[
+          { value: "1024x576", label: "576p" },
+          { value: "1280x720", label: "720p" },
+          { value: "1920x1080", label: "1080p" },
+          { value: "2560x1440", label: "1440p" },
+          { value: "3840x2160", label: "4K" },
+        ]}
+        bitrateRange={{ min: 500_000, max: 15_000_000, step: 500_000 }}
+      />
+      <Separator />
+      <AudioProcessingSettings />
+      <Separator />
       <p>{t("developer_mode.environment_variables")}</p>
       <pre>{JSON.stringify(env, null, 2)}</pre>
       <p>{t("developer_mode.url_params")}</p>

src/settings/DeveloperSettingsTabViewModel.test.ts

@@ -0,0 +1,48 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it } from "vitest";
+import { BehaviorSubject } from "rxjs";
+
+import { testScope } from "../utils/test";
+import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
+import {
+  createDeveloperSettingsTabViewModel,
+  outOfCallDeveloperSettingsTabViewModel,
+} from "./DeveloperSettingsTabViewModel";
+
+describe("createDeveloperSettingsTabViewModel", () => {
+  it("projects the key rotation state of the call", () => {
+    const keyRotationSuppressed$ = new BehaviorSubject(false);
+    const participantCount$ = new BehaviorSubject(5);
+    const vm = createDeveloperSettingsTabViewModel(testScope(), {
+      keyRotationSuppressed$,
+      participantCount$,
+    } as unknown as CallViewModel);
+
+    expect(vm.keyRotation$.value).toEqual({
+      suppressed: false,
+      participantCount: 5,
+    });
+
+    participantCount$.next(50);
+    keyRotationSuppressed$.next(true);
+
+    expect(vm.keyRotation$.value).toEqual({
+      suppressed: true,
+      participantCount: 50,
+    });
+  });
+});
+
+describe("outOfCallDeveloperSettingsTabViewModel", () => {
+  it("has no key rotation state", () => {
+    expect(outOfCallDeveloperSettingsTabViewModel.keyRotation$.value).toBe(
+      null,
+    );
+  });
+});

src/settings/DeveloperSettingsTabViewModel.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { combineLatest } from "rxjs";
+
+import { type CallViewModel } from "../state/CallViewModel/CallViewModel.ts";
+import { type ObservableScope } from "../state/ObservableScope.ts";
+import { createStaticViewModel, type ViewModel } from "../state/ViewModel.ts";
+import { type DeveloperSettingsSnapshot } from "./DeveloperSettingsTab.tsx";
+
+/**
+ * Creates the ViewModel for the developer settings tab while in a call.
+ *
+ * Only the call state the tab actually renders is projected here, so that the
+ * tab does not need to know about the CallViewModel.
+ *
+ * @param scope - ObservableScope that bounds the lifetime of derived behaviors.
+ * @param callModel - The root CallViewModel; provides the key rotation state.
+ */
+export function createDeveloperSettingsTabViewModel(
+  scope: ObservableScope,
+  callModel: CallViewModel,
+): ViewModel<DeveloperSettingsSnapshot> {
+  return {
+    keyRotation$: scope.behavior(
+      combineLatest(
+        [callModel.keyRotationSuppressed$, callModel.participantCount$],
+        (suppressed, participantCount) => ({ suppressed, participantCount }),
+      ),
+    ),
+  };
+}
+
+/**
+ * The ViewModel for the developer settings tab outside of a call (lobby, user
+ * menu), where no call state exists. All call specific fields are `null`.
+ */
+export const outOfCallDeveloperSettingsTabViewModel: ViewModel<DeveloperSettingsSnapshot> =
+  createStaticViewModel<DeveloperSettingsSnapshot>({ keyRotation: null });

src/settings/SettingsModal.module.css

@@ -33,3 +33,27 @@ Please see LICENSE in the repository root for full details.
 .volumeSlider > p {
   color: var(--cpd-color-text-secondary);
 }
+
+.volumeSlider > select {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  margin-top: var(--cpd-space-1x);
+  border: 1px solid var(--cpd-color-border-interactive-primary);
+  border-radius: 4px;
+  background-color: var(--cpd-color-bg-canvas-default);
+  color: var(--cpd-color-text-primary);
+  font-size: var(--font-size-body);
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.volumeSlider > select:focus {
+  outline: none;
+  border-color: var(--cpd-color-text-link-external);
+}
+
+.settingValue {
+  font-weight: normal;
+  color: var(--cpd-color-text-secondary);
+}

src/settings/SettingsModal.tsx

@@ -29,11 +29,16 @@ import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
 import { DeviceSelection } from "./DeviceSelection";
 import { useTrackProcessor } from "../livekit/TrackProcessorContext";
-import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
+import {
+  DeveloperSettingsTab,
+  type DeveloperSettingsSnapshot,
+} from "./DeveloperSettingsTab";
 import { FieldRow, InputField } from "../input/Input";
 import { useSubmitRageshake } from "./submit-rageshake";
 import { useUrlParams } from "../UrlParams";
 import { useBehavior } from "../useBehavior";
+import { type ViewModel } from "../state/ViewModel.ts";
+import { outOfCallDeveloperSettingsTabViewModel } from "./DeveloperSettingsTabViewModel";
 
 type SettingsTab =
   | "audio"
@@ -56,6 +61,8 @@ interface Props {
     url: string;
     isLocal?: boolean;
   }[];
+  /** Only available while in a call. Used by the developer tab. */
+  developerSettingsVm?: ViewModel<DeveloperSettingsSnapshot>;
 }
 
 export const defaultSettingsTab: SettingsTab = "audio";
@@ -68,6 +75,7 @@ export const SettingsModal: FC<Props> = ({
   client,
   roomId,
   livekitRooms,
+  developerSettingsVm,
 }) => {
   const { t } = useTranslation();
 
@@ -152,7 +160,13 @@ export const SettingsModal: FC<Props> = ({
           />
 
           <div className={styles.volumeSlider}>
-            <label>{t("settings.audio_tab.effect_volume_label")}</label>
+            <label>
+              {t("settings.audio_tab.effect_volume_label")}
+              {": "}
+              <span className={styles.settingValue}>
+                {Math.round(soundVolumeRaw * 100)}%
+              </span>
+            </label>
             <p>{t("settings.audio_tab.effect_volume_description")}</p>
             <Slider
               label={t("video_tile.volume")}
@@ -214,6 +228,7 @@ export const SettingsModal: FC<Props> = ({
         client={client}
         livekitRooms={livekitRooms}
         roomId={roomId}
+        vm={developerSettingsVm ?? outOfCallDeveloperSettingsTabViewModel}
       />
     ),
   };

src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap

@@ -17,6 +17,12 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
   <p>
     Device ID: DEVICE123
   </p>
+  <div
+    class="_separator_13qwf_8"
+    data-kind="primary"
+    data-orientation="horizontal"
+    role="separator"
+  />
   <div
     class="_fieldRow_1bd8c0"
   >
@@ -251,10 +257,16 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         class="_message_1o4d9_86 _help-message_1o4d9_92"
         id="radix-_r_8_"
       >
-        Currently, no overwrite is set. Url from well-known or config is used.
+        Currently, no overwrite is set. Url from config is used.
       </span>
     </div>
   </form>
+  <div
+    class="_separator_13qwf_8"
+    data-kind="primary"
+    data-orientation="horizontal"
+    role="separator"
+  />
   <h3
     class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
   >
@@ -273,50 +285,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
           class="_container_1ug7n_10"
         >
           <input
-            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
-            class="_input_1ug7n_18"
-            id="radix-_r_9_"
-            name="_r_0_"
-            title=""
-            type="radio"
-            value="legacy"
-          />
-          <div
-            class="_ui_1ug7n_19"
-          />
-        </div>
-      </div>
-      <div
-        class="_inline-field-body_1o4d9_39"
-      >
-        <label
-          class="_label_1o4d9_60"
-          for="radix-_r_9_"
-        >
-          Legacy: state events & oldest membership SFU
-        </label>
-        <span
-          class="_message_1o4d9_86 _help-message_1o4d9_92"
-          id="radix-_r_a_"
-        >
-          Compatible with old versions of EC that do not support multi SFU
-        </span>
-      </div>
-    </div>
-    <div
-      class="_inline-field_1o4d9_33"
-    >
-      <div
-        class="_inline-field-control_1o4d9_45"
-      >
-        <div
-          class="_container_1ug7n_10"
-        >
-          <input
-            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
+            aria-describedby="radix-_r_a_ radix-_r_c_"
             checked=""
             class="_input_1ug7n_18"
-            id="radix-_r_b_"
+            id="radix-_r_9_"
             name="_r_0_"
             title=""
             type="radio"
@@ -332,13 +304,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       >
         <label
           class="_label_1o4d9_60"
-          for="radix-_r_b_"
+          for="radix-_r_9_"
         >
           Compatibility: state events & multi SFU
         </label>
         <span
           class="_message_1o4d9_86 _help-message_1o4d9_92"
-          id="radix-_r_c_"
+          id="radix-_r_a_"
         >
           Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)
         </span>
@@ -354,9 +326,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
           class="_container_1ug7n_10"
         >
           <input
-            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
+            aria-describedby="radix-_r_a_ radix-_r_c_"
             class="_input_1ug7n_18"
-            id="radix-_r_d_"
+            id="radix-_r_b_"
             name="_r_0_"
             title=""
             type="radio"
@@ -372,13 +344,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       >
         <label
           class="_label_1o4d9_60"
-          for="radix-_r_d_"
+          for="radix-_r_b_"
         >
           Matrix 2.0: sticky events & multi SFU
         </label>
         <span
           class="_message_1o4d9_86 _help-message_1o4d9_92"
-          id="radix-_r_e_"
+          id="radix-_r_c_"
         >
           Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later
         </span>
@@ -463,6 +435,242 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </p>
     <ul />
   </div>
+  <div
+    class="_separator_13qwf_8"
+    data-kind="primary"
+    data-orientation="horizontal"
+    role="separator"
+  />
+  <h4>
+    Camera quality
+  </h4>
+  <div
+    class="_fieldRow_1bd8c0"
+  >
+    <div
+      class="_field_1bd8c0 _checkboxField_1bd8c0"
+    >
+      <input
+        aria-describedby="_r_i_"
+        id="cameraToggle"
+        type="checkbox"
+      />
+      <label
+        for="cameraToggle"
+      >
+        <div
+          class="_checkbox_1bd8c0"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20 6-11 11-5-5"
+            />
+          </svg>
+        </div>
+        Advanced camera settings
+      </label>
+      <p
+        class="_description_1bd8c0"
+        id="_r_i_"
+      >
+        Configure resolution, framerate, bitrate, and codec for camera video. Changes apply on next call join.
+      </p>
+    </div>
+  </div>
+  <div
+    class="_separator_13qwf_8"
+    data-kind="primary"
+    data-orientation="horizontal"
+    role="separator"
+  />
+  <h4>
+    Screen sharing
+  </h4>
+  <div
+    class="_fieldRow_1bd8c0"
+  >
+    <div
+      class="_field_1bd8c0 _checkboxField_1bd8c0"
+    >
+      <input
+        aria-describedby="_r_j_"
+        id="screenShareToggle"
+        type="checkbox"
+      />
+      <label
+        for="screenShareToggle"
+      >
+        <div
+          class="_checkbox_1bd8c0"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20 6-11 11-5-5"
+            />
+          </svg>
+        </div>
+        Advanced screen share settings
+      </label>
+      <p
+        class="_description_1bd8c0"
+        id="_r_j_"
+      >
+        Configure resolution, framerate, bitrate, and codec for screen sharing
+      </p>
+    </div>
+  </div>
+  <div
+    class="_separator_13qwf_8"
+    data-kind="primary"
+    data-orientation="horizontal"
+    role="separator"
+  />
+  <h4>
+    Audio processing
+  </h4>
+  <p>
+    Changes apply on next call join.
+  </p>
+  <div
+    class="_fieldRow_1bd8c0"
+  >
+    <div
+      class="_field_1bd8c0 _checkboxField_1bd8c0"
+    >
+      <input
+        aria-describedby="_r_k_"
+        checked=""
+        id="echoCancellation"
+        type="checkbox"
+      />
+      <label
+        for="echoCancellation"
+      >
+        <div
+          class="_checkbox_1bd8c0"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20 6-11 11-5-5"
+            />
+          </svg>
+        </div>
+        Echo cancellation
+      </label>
+    </div>
+  </div>
+  <div
+    class="_fieldRow_1bd8c0"
+  >
+    <div
+      class="_field_1bd8c0 _checkboxField_1bd8c0"
+    >
+      <input
+        aria-describedby="_r_l_"
+        checked=""
+        id="noiseSuppression"
+        type="checkbox"
+      />
+      <label
+        for="noiseSuppression"
+      >
+        <div
+          class="_checkbox_1bd8c0"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20 6-11 11-5-5"
+            />
+          </svg>
+        </div>
+        Noise suppression
+      </label>
+    </div>
+  </div>
+  <div
+    class="_fieldRow_1bd8c0"
+  >
+    <div
+      class="_field_1bd8c0 _checkboxField_1bd8c0"
+    >
+      <input
+        aria-describedby="_r_m_"
+        checked=""
+        id="autoGainControl"
+        type="checkbox"
+      />
+      <label
+        for="autoGainControl"
+      >
+        <div
+          class="_checkbox_1bd8c0"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20 6-11 11-5-5"
+            />
+          </svg>
+        </div>
+        Automatic gain control
+      </label>
+    </div>
+  </div>
+  <div
+    class="_separator_13qwf_8"
+    data-kind="primary"
+    data-orientation="horizontal"
+    role="separator"
+  />
   <p>
     Environment variables
   </p>

src/settings/rageshake.flush.test.ts

@@ -0,0 +1,52 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, expect, it, vi } from "vitest";
+
+import { init as initRageshake } from "./rageshake";
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+it("flushes logs to IndexedDB periodically without an explicit flush", async () => {
+  vi.useFakeTimers();
+  const add = vi.fn();
+  const txn = {
+    oncomplete: undefined as (() => void) | undefined,
+    onerror: undefined,
+    objectStore: (name: string) =>
+      name === "logs"
+        ? {
+            add: (entry: unknown): void => {
+              add(entry);
+              queueMicrotask(() => txn.oncomplete?.());
+            },
+          }
+        : { put: vi.fn() },
+  };
+  const open = (): unknown => {
+    const req = {
+      result: { transaction: () => txn },
+      onsuccess: undefined as (() => void) | undefined,
+    };
+    queueMicrotask(() => req.onsuccess?.());
+    return req;
+  };
+  vi.stubGlobal("indexedDB", { open });
+
+  await initRageshake();
+  global.mx_rage_logger.log(1, "test", "hello from the buffer");
+  expect(add).not.toHaveBeenCalled();
+
+  await vi.advanceTimersByTimeAsync(2000);
+  expect(add).toHaveBeenCalledOnce();
+  expect(add.mock.calls[0][0]).toMatchObject({
+    lines: expect.stringContaining("hello from the buffer"),
+  });
+});

src/settings/rageshake.ts

@@ -204,10 +204,13 @@ class IndexedDBLogStore {
   // Throttled function to flush logs. We use throttle rather
   // than debounce as we want logs to be written regularly, otherwise
   // if there's a constant stream of logging, we'd never write anything.
-  private throttledFlush = throttle(() => this.flush, MAX_FLUSH_INTERVAL_MS, {
-    leading: false,
-    trailing: true,
-  });
+  private throttledFlush = throttle(
+    () => {
+      this.flush().catch((e) => logger.error("Failed to flush logs", e));
+    },
+    MAX_FLUSH_INTERVAL_MS,
+    { leading: false, trailing: true },
+  );
 
   /**
    * Flush logs to disk.

src/settings/settings.test.ts

@@ -0,0 +1,111 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it, beforeEach } from "vitest";
+
+import {
+  Setting,
+  parseResolution,
+  seedSettingsFromConfig,
+  screenShareCodec,
+  screenShareResolution,
+  screenShareFramerate,
+  screenShareBitrate,
+  cameraCodec,
+  cameraResolution,
+  cameraFramerate,
+  cameraBitrate,
+} from "./settings";
+
+beforeEach(() => {
+  localStorage.clear();
+});
+
+describe("parseResolution", () => {
+  it("parses a WIDTHxHEIGHT string", () => {
+    expect(parseResolution("1920x1080")).toEqual({
+      width: 1920,
+      height: 1080,
+    });
+  });
+
+  it("parses non-standard resolutions", () => {
+    expect(parseResolution("640x360")).toEqual({ width: 640, height: 360 });
+  });
+});
+
+describe("Setting", () => {
+  describe("seedFromConfig", () => {
+    it("updates value when no localStorage value exists", () => {
+      const setting = new Setting<string>("test-seed", "default");
+      setting.seedFromConfig("from-config");
+      expect(setting.getValue()).toBe("from-config");
+    });
+
+    it("does not override an existing localStorage value", () => {
+      localStorage.setItem(
+        "matrix-setting-test-seed-existing",
+        JSON.stringify("user-set"),
+      );
+      const setting = new Setting<string>("test-seed-existing", "default");
+      expect(setting.getValue()).toBe("user-set");
+      setting.seedFromConfig("from-config");
+      expect(setting.getValue()).toBe("user-set");
+    });
+  });
+});
+
+describe("seedSettingsFromConfig", () => {
+  it("does nothing when config is undefined", () => {
+    const codecBefore = screenShareCodec.getValue();
+    seedSettingsFromConfig(undefined);
+    expect(screenShareCodec.getValue()).toBe(codecBefore);
+  });
+
+  it("seeds video codec to both camera and screen share", () => {
+    seedSettingsFromConfig({ video_codec: "av1" });
+    expect(screenShareCodec.getValue()).toBe("av1");
+    expect(cameraCodec.getValue()).toBe("av1");
+  });
+
+  it("seeds screen share settings from config", () => {
+    seedSettingsFromConfig({
+      screen_share: {
+        max_resolution: 720,
+        max_framerate: 15,
+        max_bitrate: 2_000_000,
+      },
+    });
+    expect(screenShareResolution.getValue()).toBe("1280x720");
+    expect(screenShareFramerate.getValue()).toBe(15);
+    expect(screenShareBitrate.getValue()).toBe(2_000_000);
+  });
+
+  it("seeds camera/video settings from config", () => {
+    seedSettingsFromConfig({
+      video: {
+        max_resolution: 1080,
+        max_framerate: 60,
+        max_bitrate: 4_000_000,
+      },
+    });
+    expect(cameraResolution.getValue()).toBe("1920x1080");
+    expect(cameraFramerate.getValue()).toBe(60);
+    expect(cameraBitrate.getValue()).toBe(4_000_000);
+  });
+
+  it("only seeds provided fields, leaves others at defaults", () => {
+    const defaultFramerate = screenShareFramerate.getValue();
+    seedSettingsFromConfig({
+      screen_share: {
+        max_bitrate: 3_000_000,
+      },
+    });
+    expect(screenShareBitrate.getValue()).toBe(3_000_000);
+    expect(screenShareFramerate.getValue()).toBe(defaultFramerate);
+  });
+});

src/settings/settings.ts

@@ -21,6 +21,7 @@ export class Setting<T> {
     this.key = `matrix-setting-${key}`;
 
     const storedValue = localStorage.getItem(this.key);
+    this.hasStoredValue = storedValue !== null;
     let initialValue = defaultValue;
     if (storedValue !== null) {
       try {
@@ -40,6 +41,7 @@ export class Setting<T> {
   }
 
   private readonly key: string;
+  private readonly hasStoredValue: boolean;
 
   private readonly _value$: BehaviorSubject<T>;
   private readonly _lastUpdateReason$: BehaviorSubject<string | null>;
@@ -54,6 +56,17 @@ export class Setting<T> {
   public readonly getValue = (): T => {
     return this._value$.getValue();
   };
+
+  /**
+   * Update the setting's value from a config source, but only if the user
+   * hasn't explicitly set a value in localStorage. This lets admins set
+   * org-wide defaults in config.json that users can override.
+   */
+  public seedFromConfig(value: T): void {
+    if (!this.hasStoredValue) {
+      this._value$.next(value);
+    }
+  }
 }
 
 /**
@@ -144,3 +157,130 @@ export const customLivekitUrl = new Setting<string | null>(
   "custom-livekit-url",
   null,
 );
+
+export type VideoCodec = "vp8" | "vp9" | "h264" | "av1";
+
+/**
+ * Parse a "WIDTHxHEIGHT" resolution string into numeric width and height.
+ */
+export function parseResolution(res: string): {
+  width: number;
+  height: number;
+} {
+  const [w, h] = res.split("x").map(Number);
+  return { width: w, height: h };
+}
+
+export const advancedScreenShare = new Setting<boolean>(
+  "advanced-screen-share",
+  false,
+);
+
+export const screenShareResolution = new Setting<string>(
+  "screen-share-resolution",
+  "1920x1080",
+);
+
+export const screenShareFramerate = new Setting<number>(
+  "screen-share-framerate",
+  30,
+);
+
+export const screenShareBitrate = new Setting<number>(
+  "screen-share-bitrate",
+  5_000_000,
+);
+
+export const screenShareCodec = new Setting<VideoCodec>(
+  "screen-share-codec",
+  "vp9",
+);
+
+// Camera video quality settings
+export const advancedCamera = new Setting<boolean>("advanced-camera", false);
+
+export const cameraResolution = new Setting<string>(
+  "camera-resolution",
+  "1280x720",
+);
+
+export const cameraFramerate = new Setting<number>("camera-framerate", 30);
+
+export const cameraBitrate = new Setting<number>("camera-bitrate", 1_700_000);
+
+export const cameraCodec = new Setting<VideoCodec>("camera-codec", "vp8");
+
+// Audio processing settings
+export const echoCancellationSetting = new Setting<boolean>(
+  "echo-cancellation",
+  true,
+);
+
+export const noiseSuppressionSetting = new Setting<boolean>(
+  "noise-suppression",
+  true,
+);
+
+export const autoGainControlSetting = new Setting<boolean>(
+  "auto-gain-control",
+  true,
+);
+
+/**
+ * Seed setting defaults from config.json's media_quality section.
+ * Call this after Config.init() has resolved.
+ * Only updates settings that the user hasn't explicitly set in localStorage.
+ */
+export function seedSettingsFromConfig(
+  mediaQuality:
+    | {
+        video_codec?: VideoCodec;
+        video?: {
+          max_resolution?: number;
+          max_bitrate?: number;
+          max_framerate?: number;
+        };
+        screen_share?: {
+          max_resolution?: number;
+          max_bitrate?: number;
+          max_framerate?: number;
+        };
+      }
+    | undefined,
+): void {
+  if (!mediaQuality) return;
+
+  const codec = mediaQuality.video_codec;
+  if (codec) {
+    screenShareCodec.seedFromConfig(codec);
+    cameraCodec.seedFromConfig(codec);
+  }
+
+  const screen = mediaQuality.screen_share;
+  if (screen) {
+    if (screen.max_resolution) {
+      const width = Math.round((screen.max_resolution * 16) / 9);
+      screenShareResolution.seedFromConfig(`${width}x${screen.max_resolution}`);
+    }
+    if (screen.max_framerate) {
+      screenShareFramerate.seedFromConfig(screen.max_framerate);
+    }
+    if (screen.max_bitrate) {
+      screenShareBitrate.seedFromConfig(screen.max_bitrate);
+    }
+  }
+
+  const video = mediaQuality.video;
+  if (video) {
+    if (video.max_resolution) {
+      const width = Math.round((video.max_resolution * 16) / 9);
+      cameraResolution.seedFromConfig(`${width}x${video.max_resolution}`);
+    }
+    if (video.max_framerate) {
+      cameraFramerate.seedFromConfig(video.max_framerate);
+    }
+    if (video.max_bitrate) {
+      cameraBitrate.seedFromConfig(video.max_bitrate);
+    }
+  }
+}

src/settings/submit-rageshake.ts

@@ -19,7 +19,10 @@ import { useClient } from "../ClientContext";
 import { Config } from "../config/Config";
 import { type RageshakeRequestModal } from "../room/RageshakeRequestModal";
 import { getUrlParams } from "../UrlParams";
-
+import { deepCompare } from "matrix-js-sdk/lib/utils";
+import { advancedCamera as advancedCameraSetting } from "./settings";
+import { advancedScreenShare as advancedScreenShareSetting } from "./settings";
+import { DEFAULT_CONFIG } from "../config/ConfigOptions";
 const gzip = async (text: string): Promise<Blob> => {
   // pako is relatively large (200KB), so we only import it when needed
   const { gzip: pakoGzip } = await import("pako");
@@ -245,6 +248,20 @@ export function useSubmitRageshake(
           }
         }
 
+        // Add custom media related information to the rageshake issue description.
+        // Used to quickly identify issues due to untested configurations.
+        if (
+          !deepCompare(Config.get().media_quality, DEFAULT_CONFIG.media_quality)
+        ) {
+          body.append("custom_media_quality_in_config", "true");
+        }
+        if (advancedCameraSetting.getValue()) {
+          body.append("devTools_advancedCameraSettings", "true");
+        }
+        if (advancedScreenShareSetting.getValue()) {
+          body.append("devTools_advancedScreenShareSetting", "true");
+        }
+
         if (navigator.storage && navigator.storage.estimate) {
           try {
             const estimate: {

src/settings/useSubmitRageshake.test.tsx

@@ -22,6 +22,8 @@ import { useSubmitRageshake, getRageshakeSubmitUrl } from "./submit-rageshake";
 import { ClientContextProvider } from "../ClientContext";
 import { getUrlParams } from "../UrlParams";
 import { mockConfig } from "../utils/test";
+import { DEFAULT_CONFIG } from "../config/ConfigOptions";
+import { advancedCamera, advancedScreenShare } from "./settings";
 
 vi.mock("../UrlParams", () => ({ getUrlParams: vi.fn() }));
 
@@ -201,6 +203,60 @@ describe("useSubmitRageshake", () => {
     });
   });
 
+  describe("media quality metadata", () => {
+    const submitAndGetBody = async (): Promise<FormData> => {
+      const fetchFn = vi.fn().mockResolvedValue({
+        status: 200,
+      });
+      vi.stubGlobal("fetch", fetchFn);
+
+      renderWithMockClient(() => "https://rageshake.localhost/foo", false);
+      screen.getByTestId("submit").click();
+      await waitFor(() => {
+        expect(screen.getByTestId("sent").textContent).toBe("true");
+      });
+      return fetchFn.mock.calls[0][1].body as FormData;
+    };
+
+    beforeEach(() => {
+      vi.unstubAllGlobals();
+    });
+
+    afterEach(() => {
+      advancedCamera.setValue(advancedCamera.defaultValue);
+      advancedScreenShare.setValue(advancedScreenShare.defaultValue);
+      vi.clearAllMocks();
+    });
+
+    it("omits media quality fields when config and settings are default", async () => {
+      mockConfig({});
+      const body = await submitAndGetBody();
+      expect(body.get("custom_media_quality_in_config")).toBeNull();
+      expect(body.get("devTools_advancedCameraSettings")).toBeNull();
+      expect(body.get("devTools_advancedScreenShareSetting")).toBeNull();
+    });
+
+    it("includes custom_media_quality_in_config when media_quality differs from default", async () => {
+      mockConfig({
+        media_quality: {
+          ...DEFAULT_CONFIG.media_quality,
+          video_codec: "h264",
+        },
+      });
+      const body = await submitAndGetBody();
+      expect(body.get("custom_media_quality_in_config")).toBe("true");
+    });
+
+    it("includes devTools flags when advanced media settings are enabled", async () => {
+      mockConfig({});
+      advancedCamera.setValue(true);
+      advancedScreenShare.setValue(true);
+      const body = await submitAndGetBody();
+      expect(body.get("devTools_advancedCameraSettings")).toBe("true");
+      expect(body.get("devTools_advancedScreenShareSetting")).toBe("true");
+    });
+  });
+
   describe("when rageshake is not available", () => {
     it("starts unsent", () => {
       renderWithMockClient(() => undefined, false);

src/state/CallViewModel/CallViewModel.test.ts

@@ -258,11 +258,9 @@ function mockRingEvent(
   } as unknown as { event_id: string } & IRTCNotificationContent;
 }
 
-describe.each([
-  [MatrixRTCMode.Legacy],
-  [MatrixRTCMode.Compatibility],
-  [MatrixRTCMode.Matrix_2_0],
-])("CallViewModel (%s mode)", (mode) => {
+const modes = [[MatrixRTCMode.Compatibility], [MatrixRTCMode.Matrix_2_0]];
+
+describe.each(modes)("CallViewModel (%s mode)", (mode) => {
   const withCallViewModel = withCallViewModelInMode(mode);
 
   test("participants are retained during a focus switch", () => {

src/state/CallViewModel/CallViewModel.ts

@@ -54,7 +54,6 @@ import { type IMembershipManager } from "matrix-js-sdk/lib/matrixrtc/IMembership
 import {
   createToggle$,
   filterBehavior,
-  generateItem,
   generateItems,
   pauseWhen,
 } from "../../utils/observable";
@@ -64,7 +63,10 @@ import {
   showReactions,
 } from "../../settings/settings";
 import { Config } from "../../config/Config";
-import { MatrixRTCMode } from "../../config/ConfigOptions";
+import {
+  MatrixRTCMode,
+  type ResolvedDelayedLeaveTimings,
+} from "../../config/ConfigOptions";
 import { isFirefox, platform } from "../../Platform";
 import { setPipEnabled$ } from "../../controls";
 import { TileStore } from "../TileStore";
@@ -79,7 +81,7 @@ import {
   type ReactionInfo,
   type ReactionOption,
 } from "../../reactions";
-import { shallowEquals } from "../../utils/array";
+import { shallowEquals as shallowArrayEquals } from "../../utils/array";
 import { type MediaDevices } from "../MediaDevices";
 import { constant, type Behavior } from "../Behavior";
 import { E2eeType } from "../../e2ee/e2eeType";
@@ -89,6 +91,7 @@ import { getUrlParams, HeaderStyle } from "../../UrlParams";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { ElementWidgetActions, widget } from "../../widget";
 import {
+  layoutShallowEquals,
   type Alignment,
   type GridLayoutMedia,
   type Layout,
@@ -109,10 +112,10 @@ import {
 } from "./localMember/LocalMember.ts";
 import {
   createLocalTransport$,
-  JwtEndpointVersion,
   type LocalTransport,
 } from "./localMember/LocalTransport.ts";
 import {
+  createKeyRotationSuppressed$,
   createMemberships$,
   membershipsAndTransports$,
 } from "../SessionBehaviors.ts";
@@ -186,7 +189,7 @@ export interface CallViewModelOptions {
   /** Optional value overriding the connection factory, for testing purposes. */
   connectionFactory?: ConnectionFactory;
   /** The version & compatibility mode of MatrixRTC that we should use. */
-  matrixRTCMode$?: Behavior<MatrixRTCMode>;
+  matrixRTCMode?: MatrixRTCMode;
   /** Optional behavior overriding for the screensharing, for testing */
   toggleScreensharing?: () => void;
 }
@@ -265,6 +268,11 @@ export interface CallViewModel {
    * Whether we are sharing our screen.
    */
   sharingScreen$: Behavior<boolean>;
+  /**
+   * The last error from toggling screen sharing, until dismissed.
+   */
+  screenShareError$: Behavior<Error | null>;
+  dismissScreenShareError: () => void;
 
   // UI interactions
   /**
@@ -301,6 +309,12 @@ export interface CallViewModel {
    *    multiple devices.
    */
   participantCount$: Behavior<number>;
+  /**
+   * Whether the call has grown large enough that MatrixRTC has stopped rotating the media
+   * encryption key. While this is true the key in use is still shared with new joiners, but no new
+   * key is generated when someone joins or leaves.
+   */
+  keyRotationSuppressed$: Behavior<boolean>;
   allConnections$: Behavior<ConnectionManagerData>;
   /** Participants sorted by livekit room so they can be used in the audio rendering */
   livekitRoomItems$: Behavior<LivekitRoomItem[]>;
@@ -365,6 +379,11 @@ export interface CallViewModel {
    */
   overflowing$: Behavior<boolean>;
 
+  /**
+   * Whether modals such as settings and reactions should be accessible at all.
+   */
+  showModals$: Behavior<boolean>;
+
   settingsOpen$: Behavior<boolean>;
   setSettingsOpen$: Behavior<(open: boolean) => void>;
 
@@ -432,10 +451,8 @@ export function createCallViewModel$(
   const configMatrixRTCMode = Config.get().matrix_rtc_mode as
     | MatrixRTCMode
     | undefined;
-  const matrixRTCMode$ =
-    configMatrixRTCMode !== undefined
-      ? constant(configMatrixRTCMode)
-      : (options.matrixRTCMode$ ?? constant(MatrixRTCMode.Legacy));
+  const matrixRTCMode =
+    configMatrixRTCMode ?? options.matrixRTCMode ?? MatrixRTCMode.Compatibility;
 
   // Each hbar seperates a block of input variables required for the CallViewModel to function.
   // The outputs of this block is written under the hbar.
@@ -469,39 +486,16 @@ export function createCallViewModel$(
     memberId: uuidv4(),
   };
 
-  const localTransport$ = scope.behavior(
-    matrixRTCMode$.pipe(
-      generateItem(
-        "CallViewModel localTransport$",
-        // Re-create LocalTransport whenever the mode changes
-        (mode) => ({ keys: [mode], data: undefined }),
-        (scope, _data$, mode) =>
-          options.localTransport ??
-          createLocalTransport$({
-            scope: scope,
-            memberships$: memberships$,
-            ownMembershipIdentity,
-            client,
-            delayId$: scope.behavior(
-              (
-                fromEvent(
-                  matrixRTCSession,
-                  MembershipManagerEvent.DelayIdChanged,
-                  // The type of reemitted event includes the original emitted as the second arg.
-                ) as Observable<[string | undefined, IMembershipManager]>
-              ).pipe(map(([delayId]) => delayId ?? null)),
-              matrixRTCSession.delayId ?? null,
-            ),
-            roomId: matrixRoom.roomId,
-            forceJwtEndpoint:
-              mode === MatrixRTCMode.Matrix_2_0
-                ? JwtEndpointVersion.Matrix_2_0
-                : JwtEndpointVersion.Legacy,
-            useOldestMember: mode === MatrixRTCMode.Legacy,
-          }),
-      ),
-    ),
-  );
+  const localTransport =
+    options.localTransport ??
+    createLocalTransport$({
+      scope: scope,
+      memberships$: memberships$,
+      ownMembershipIdentity,
+      client,
+      roomId: matrixRoom.roomId,
+      matrixRTCMode,
+    });
 
   const connectionFactory =
     options.connectionFactory ??
@@ -513,16 +507,13 @@ export function createCallViewModel$(
       livekitKeyProvider,
       getUrlParams().controlledAudioDevices,
       options.livekitRoomFactory,
-      getUrlParams().echoCancellation,
-      getUrlParams().noiseSuppression,
     );
 
   const connectionManager = createConnectionManager$({
     scope: scope,
     connectionFactory: connectionFactory,
     localTransport$: scope.behavior(
-      localTransport$.pipe(
-        switchMap((t) => t.active$),
+      localTransport.active$.pipe(
         catchError((e: unknown) => {
           logger.info(
             "could not pass local transport to createConnectionManager$. localTransport$ threw an error",
@@ -547,16 +538,6 @@ export function createCallViewModel$(
     localUser: { userId, deviceId },
   });
 
-  const connectOptions$ = scope.behavior(
-    matrixRTCMode$.pipe(
-      map((mode) => ({
-        encryptMedia: livekitKeyProvider !== undefined,
-        // TODO. This might need to get called again on each change of matrixRTCMode...
-        matrixRTCMode: mode,
-      })),
-    ),
-  );
-
   const localMembership = createLocalMembership$({
     scope,
     homeserverConnected: createHomeserverConnected$(
@@ -565,12 +546,19 @@ export function createCallViewModel$(
       matrixRTCSession,
     ),
     muteStates,
-    joinMatrixRTC: (transport: LivekitTransportConfig) => {
+    joinMatrixRTC: (
+      transport: LivekitTransportConfig,
+      delayedLeaveTimings: ResolvedDelayedLeaveTimings,
+    ) => {
       return enterRTCSession(
         matrixRTCSession,
         ownMembershipIdentity,
         transport,
-        connectOptions$.value,
+        {
+          encryptMedia: livekitKeyProvider !== undefined,
+          matrixRTCMode,
+          delayedLeaveTimings,
+        },
       );
     },
     createPublisherFactory: (connection: Connection) => {
@@ -585,9 +573,23 @@ export function createCallViewModel$(
       );
     },
     connectionManager,
+    client,
     matrixRTCSession,
-    localTransport$,
+    localTransport,
     roomId: matrixRoom.roomId,
+    baseUrl: client.baseUrl,
+    ownMembershipIdentity,
+    delayId$: scope.behavior(
+      (
+        fromEvent(
+          matrixRTCSession,
+          MembershipManagerEvent.DelayIdChanged,
+          // The type of reemitted event includes the original emitted as the second arg.
+        ) as Observable<[string | undefined, IMembershipManager]>
+      ).pipe(map(([delayId]) => delayId ?? null)),
+      matrixRTCSession.delayId ?? null,
+    ),
+    matrixRTCMode,
     logger: logger.getChild(`[${Date.now()}]`),
   });
 
@@ -858,6 +860,11 @@ export function createCallViewModel$(
     matrixLivekitMembers$.pipe(map((ms) => ms.length)),
   );
 
+  const keyRotationSuppressed$ = createKeyRotationSuppressed$(
+    scope,
+    matrixRTCSession,
+  );
+
   const leaveSoundEffect$ = userMedia$.pipe(
     pairwise(),
     filter(
@@ -943,7 +950,7 @@ export function createCallViewModel$(
               bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m),
             );
       }),
-      distinctUntilChanged(shallowEquals),
+      distinctUntilChanged(shallowArrayEquals),
     ),
   );
 
@@ -1002,7 +1009,7 @@ export function createCallViewModel$(
   const spotlight$ = scope.behavior<MediaViewModel[]>(
     spotlightAndPip$.pipe(
       map(({ spotlight }) => spotlight),
-      distinctUntilChanged<MediaViewModel[]>(shallowEquals),
+      distinctUntilChanged<MediaViewModel[]>(shallowArrayEquals),
     ),
   );
 
@@ -1211,6 +1218,7 @@ export function createCallViewModel$(
         }
         return layout;
       }),
+      distinctUntilChanged(),
       scope.bind(),
     )
     .subscribe((orientation) => {
@@ -1450,6 +1458,11 @@ export function createCallViewModel$(
       map((naturallyShowFooter) => naturallyShowFooter && showFooterUrlParams),
     ),
   );
+
+  const showModals$ = scope.behavior(
+    windowMode$.pipe(map((mode) => mode !== "pip")),
+  );
+
   const settingsOpen$ = new BehaviorSubject(false);
   const setSettingsOpen$ = constant((open: boolean) => {
     settingsOpen$.next(open);
@@ -1576,7 +1589,11 @@ export function createCallViewModel$(
    * The layout of tiles in the call interface.
    */
   const layout$ = scope.behavior<Layout>(
-    layoutInternals$.pipe(map(({ layout }) => layout)),
+    layoutInternals$.pipe(
+      map(({ layout }) => layout),
+      // Drop redundant layout updates before they would hit React.
+      distinctUntilChanged<Layout>(layoutShallowEquals),
+    ),
   );
 
   const overflowing$ = scope.behavior<boolean>(
@@ -1784,6 +1801,7 @@ export function createCallViewModel$(
     ),
     allConnections$,
     participantCount$: participantCount$,
+    keyRotationSuppressed$: keyRotationSuppressed$,
     handsRaised$: handsRaised$,
     reactions$: reactions$,
     joinSoundEffect$: joinSoundEffect$,
@@ -1822,6 +1840,7 @@ export function createCallViewModel$(
     showNameTags$,
     showHeader$: showHeader$,
     showFooter$: showFooter$,
+    showModals$,
     settingsOpen$: settingsOpen$,
     setSettingsOpen$: setSettingsOpen$,
     edgeToEdge$,
@@ -1831,6 +1850,8 @@ export function createCallViewModel$(
     reconnecting$: localMembership.reconnecting$,
     livekitRoomItems$,
     connected$: localMembership.connected$,
+    screenShareError$: localMembership.screenShareError$,
+    dismissScreenShareError: localMembership.dismissScreenShareError,
   };
 }
 

src/state/CallViewModel/CallViewModelTestUtils.ts

@@ -138,9 +138,6 @@ export function withCallViewModel(mode: MatrixRTCMode) {
         public getSyncState(): SyncState {
           return syncState;
         }
-        public getAccessToken(): string | null {
-          return "a-token";
-        }
       })() as Partial<MatrixClient> as MatrixClient,
       getMembers: () => roomMembers,
       getMembersWithMembership: () => roomMembers,
@@ -241,7 +238,7 @@ export function withCallViewModel(mode: MatrixRTCMode) {
             );
           },
         },
-        matrixRTCMode$: constant(mode),
+        matrixRTCMode: mode,
         ...options,
       },
       raisedHands$,

src/state/CallViewModel/localMember/LocalMember.test.ts

@@ -19,22 +19,28 @@ import {
   beforeAll,
   afterAll,
   beforeEach,
+  afterEach,
 } from "vitest";
-import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
 import { BehaviorSubject, map, of } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type LocalParticipant, type LocalTrack } from "livekit-client";
+import fetchMock from "fetch-mock";
 
 import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics";
-import { MatrixRTCMode } from "../../../config/ConfigOptions";
+import {
+  MatrixRTCMode,
+  type ResolvedDelayedLeaveTimings,
+} from "../../../config/ConfigOptions";
 import { type HomeserverDisconnectReason } from "./HomeserverConnected";
 import {
   flushPromises,
   mockConfig,
   mockLivekitRoom,
+  mockLocalParticipant,
   mockMuteStates,
   withTestScheduler,
   ownMemberMock,
+  testScope,
 } from "../../../utils/test";
 import {
   TransportState,
@@ -42,6 +48,7 @@ import {
   enterRTCSession,
   PublishState,
   TrackState,
+  watchScreenShareToggle,
 } from "./LocalMember";
 import {
   FailToGetOpenIdToken,
@@ -57,10 +64,11 @@ import {
   type LocalTransport,
   type LocalTransportWithSFUConfig,
 } from "./LocalTransport";
+import * as openIDSFU from "../../../livekit/openIDSFU";
 
 initializeWidget();
 
-const MATRIX_RTC_MODE = MatrixRTCMode.Legacy;
+const MATRIX_RTC_MODE = MatrixRTCMode.Compatibility;
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
 vi.mock("../../../UrlParams", () => ({ getUrlParams }));
 vi.mock("@livekit/components-core", () => ({
@@ -69,144 +77,137 @@ vi.mock("@livekit/components-core", () => ({
     .mockReturnValue(of({ isScreenShareEnabled: false })),
 }));
 
-describe("LocalMembership", () => {
-  describe("enterRTCSession", () => {
-    it("It joins the correct Session", () => {
-      const focusFromOlderMembership = {
-        type: "livekit",
-        livekit_service_url: "http://my-oldest-member-service-url.com",
-        livekit_alias: "my-oldest-member-service-alias",
-      };
-
-      const focusConfigFromWellKnown = {
-        type: "livekit",
-        livekit_service_url: "http://my-well-known-service-url.com",
-      };
-      const focusConfigFromWellKnown2 = {
-        type: "livekit",
-        livekit_service_url: "http://my-well-known-service-url2.com",
-      };
-      const clientWellKnown = {
-        "org.matrix.msc4143.rtc_foci": [
-          focusConfigFromWellKnown,
-          focusConfigFromWellKnown2,
-        ],
-      };
-
-      mockConfig({
-        livekit: { livekit_service_url: "http://my-default-service-url.com" },
-      });
-
-      vi.spyOn(AutoDiscovery, "getRawClientConfig").mockImplementation(
-        async (domain) => {
-          if (domain === "example.org") {
-            return Promise.resolve(clientWellKnown);
-          }
-          return Promise.resolve({});
-        },
-      );
-
-      const mockedSession = vi.mocked({
-        room: {
-          roomId: "roomId",
-          client: {
-            getDomain: vi.fn().mockReturnValue("example.org"),
-            getOpenIdToken: vi.fn().mockResolvedValue({
-              access_token: "ACCCESS_TOKEN",
-              token_type: "Bearer",
-              matrix_server_name: "localhost",
-              expires_in: 10000,
-            }),
-          },
-        },
-        memberships: [],
-        getFocusInUse: vi.fn().mockReturnValue(focusFromOlderMembership),
-        getOldestMembership: vi.fn().mockReturnValue({
-          getPreferredFoci: vi.fn().mockReturnValue([focusFromOlderMembership]),
-        }),
-        joinRTCSession: vi.fn(),
-      }) as unknown as MatrixRTCSession;
-
-      enterRTCSession(
-        mockedSession,
-        ownMemberMock,
-        {
-          livekit_alias: "roomId",
-          livekit_service_url: "http://my-well-known-service-url.com",
-          type: "livekit",
-        },
-        {
-          encryptMedia: true,
-          matrixRTCMode: MATRIX_RTC_MODE,
-        },
-      );
-
-      expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
-        {
-          deviceId: "DEVICE",
-          memberId: "@alice:example.org:DEVICE",
-          userId: "@alice:example.org",
-        },
-        [
-          {
-            livekit_alias: "roomId",
-            livekit_service_url: "http://my-well-known-service-url.com",
-            type: "livekit",
-          },
-        ],
-        undefined,
-        expect.objectContaining({
-          manageMediaKeys: true,
-          useLegacyMemberEvents: false,
-        }),
-      );
-    });
-
-    it("It should not fail with configuration error if homeserver config has livekit url but not fallback", () => {
-      mockConfig({});
-      vi.spyOn(AutoDiscovery, "getRawClientConfig").mockResolvedValue({
-        "org.matrix.msc4143.rtc_foci": [
-          {
-            type: "livekit",
-            livekit_service_url: "http://my-well-known-service-url.com",
-          },
-        ],
-      });
-
-      const mockedSession = vi.mocked({
-        room: {
-          roomId: "roomId",
-          client: {
-            getDomain: vi.fn().mockReturnValue("example.org"),
-            getOpenIdToken: vi.fn().mockResolvedValue({
-              access_token: "ACCCESS_TOKEN",
-              token_type: "Bearer",
-              matrix_server_name: "localhost",
-              expires_in: 10000,
-            }),
-          },
-        },
-        memberships: [],
-        getFocusInUse: vi.fn(),
-        joinRTCSession: vi.fn(),
-      }) as unknown as MatrixRTCSession;
-
-      enterRTCSession(
-        mockedSession,
-        ownMemberMock,
-        {
-          livekit_alias: "roomId",
-          livekit_service_url: "http://my-well-known-service-url.com",
-          type: "livekit",
-        },
-        {
-          encryptMedia: true,
-          matrixRTCMode: MATRIX_RTC_MODE,
-        },
-      );
-    });
+describe("watchScreenShareToggle", () => {
+  it("reports nothing when the toggle completes", async () => {
+    const onError = vi.fn();
+    watchScreenShareToggle(Promise.resolve(), true, logger, onError);
+    await flushPromises();
+    expect(onError).not.toHaveBeenCalled();
   });
 
+  it("reports failures other than the user cancelling", async () => {
+    const onError = vi.fn();
+    const e = new Error("NotReadableError");
+    watchScreenShareToggle(Promise.reject(e), true, logger, onError);
+    await flushPromises();
+    expect(onError).toHaveBeenCalledWith(e);
+  });
+
+  it("does not report the user cancelling the picker", async () => {
+    const onError = vi.fn();
+    const cancelled = new DOMException("Permission denied", "NotAllowedError");
+    watchScreenShareToggle(Promise.reject(cancelled), true, logger, onError);
+    await flushPromises();
+    expect(onError).not.toHaveBeenCalled();
+  });
+});
+
+const timings: ResolvedDelayedLeaveTimings = {
+  delay_ms: 10000,
+  restart_ms: 4000,
+  restart_timeout_ms: 1000,
+};
+
+const delegatedTimings: ResolvedDelayedLeaveTimings = {
+  delay_ms: timings.delay_ms * 10,
+  restart_ms: timings.restart_ms! * 10,
+  restart_timeout_ms: timings.restart_timeout_ms! * 10,
+};
+
+const mockedClient = {
+  getDomain: vi.fn().mockReturnValue("example.org"),
+  getDeviceId: vi.fn().mockReturnValue("AAAA"),
+  getOpenIdToken: vi.fn().mockResolvedValue({
+    access_token: "ACCCESS_TOKEN",
+    token_type: "Bearer",
+    matrix_server_name: "localhost",
+    expires_in: 10000,
+  }),
+};
+
+describe("enterRTCSession", () => {
+  const transport: LivekitTransportConfig = {
+    livekit_alias: "roomId",
+    livekit_service_url: "http://my-livekit-service-url.com",
+    type: "livekit",
+  };
+
+  const options = {
+    encryptMedia: true,
+    matrixRTCMode: MATRIX_RTC_MODE,
+    delayedLeaveTimings: timings,
+  };
+
+  const mockedSession = vi.mocked({
+    room: {
+      roomId: "roomId",
+      client: mockedClient,
+    },
+    memberships: [],
+    joinRTCSession: vi.fn(),
+  }) as unknown as MatrixRTCSession;
+
+  beforeEach(() =>
+    mockConfig({
+      livekit: { livekit_service_url: "http://my-default-service-url.com" },
+    }),
+  );
+
+  it("It joins the correct Session", () => {
+    enterRTCSession(mockedSession, ownMemberMock, transport, options);
+
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      {
+        deviceId: "DEVICE",
+        memberId: "@alice:example.org:DEVICE",
+        userId: "@alice:example.org",
+      },
+      [],
+      transport,
+      expect.objectContaining({ manageMediaKeys: true }),
+    );
+  });
+
+  it("passes keyRotationParticipantLimit from config to joinRTCSession", () => {
+    mockConfig({
+      livekit: { livekit_service_url: "http://my-default-service-url.com" },
+      matrix_rtc_session: {
+        network_error_retry_ms: 0,
+        key_rotation_participant_limit: 50,
+        delayed_leave: timings,
+        delegated_delayed_leave: timings,
+      },
+    });
+
+    enterRTCSession(mockedSession, ownMemberMock, transport, options);
+
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      expect.any(Object),
+      [],
+      expect.any(Object),
+      expect.objectContaining({
+        keyRotationParticipantLimit: 50,
+      }),
+    );
+  });
+
+  it("uses the specified delayed leave timings", () => {
+    enterRTCSession(mockedSession, ownMemberMock, transport, options);
+
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+      expect.objectContaining({
+        delayedLeaveEventRestartMs: timings.restart_ms,
+        delayedLeaveEventDelayMs: timings.delay_ms,
+        delayedLeaveEventRestartLocalTimeoutMs: timings.restart_timeout_ms,
+      }),
+    );
+  });
+});
+
+describe("LocalMembership", () => {
   const defaultCreateLocalMemberValues = {
     options: constant({
       encryptMedia: false,
@@ -232,8 +233,30 @@ describe("LocalMembership", () => {
       rtsSession$: constant(RTCMemberStatus.Connected),
     },
     roomId: "!test-room-id:example.org",
+    baseUrl: "https://matrix.example.org",
+    ownMembershipIdentity: ownMemberMock,
+    client: mockedClient,
+    delayId$: constant(null),
+    matrixRTCMode: MATRIX_RTC_MODE,
   };
 
+  beforeEach(() => {
+    mockConfig({
+      livekit: { livekit_service_url: "http://my-default-service-url.com" },
+      matrix_rtc_session: {
+        network_error_retry_ms: 1000,
+        delayed_leave: timings,
+        delegated_delayed_leave: delegatedTimings,
+      },
+    });
+    fetchMock.catch(404);
+  });
+
+  afterEach(async () => {
+    void (await fetchMock.flush());
+    fetchMock.reset();
+  });
+
   it("throws error on missing RTC config error", () => {
     withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
       const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
@@ -260,9 +283,8 @@ describe("LocalMembership", () => {
         scope,
         ...defaultCreateLocalMemberValues,
         connectionManager: mockConnectionManager,
-        localTransport$: behavior("a", { a: aLocalTransport }),
+        localTransport: aLocalTransport,
       });
-      localMembership.requestJoinAndPublish();
 
       expectObservable(localMembership.localMemberState$).toBe("ne", {
         n: TransportState.Waiting,
@@ -305,9 +327,8 @@ describe("LocalMembership", () => {
         scope,
         ...defaultCreateLocalMemberValues,
         connectionManager: mockConnectionManager,
-        localTransport$: behavior("a", { a: aLocalTransport }),
+        localTransport: aLocalTransport,
       });
-      localMembership.requestJoinAndPublish();
 
       expectObservable(localMembership.localMemberState$).toBe("n-e", {
         n: TransportState.Waiting,
@@ -323,8 +344,8 @@ describe("LocalMembership", () => {
     const scope = new ObservableScope();
 
     const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
-      active$: new BehaviorSubject(aTransportWithSFUConfig),
+      advertised$: constant(aTransport),
+      active$: constant(aTransportWithSFUConfig),
     };
 
     const mockConnectionManager = {
@@ -342,7 +363,7 @@ describe("LocalMembership", () => {
         leaveRoomSession: vi.fn(),
       },
       connectionManager: mockConnectionManager,
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
     });
     const expextedLog =
       "'not connected yet' while updating the call intent (this is expected on startup)";
@@ -403,12 +424,90 @@ describe("LocalMembership", () => {
     livekitRoom: mockLivekitRoom({}),
   } as unknown as Connection;
 
+  const authCallSpy = vi
+    .spyOn(openIDSFU, "getSFUConfigWithOpenID")
+    .mockImplementation(() => mockedClient.getOpenIdToken());
+  afterEach(() => authCallSpy.mockClear());
+
+  it.each([
+    ["no", null, timings],
+    [
+      "homeserver",
+      "https://matrix.example.org/_matrix/client/unstable/io.element.msc4195/rtc/livekit/delegate_delayed_leave",
+      delegatedTimings,
+    ],
+    ["transport", "/a/delegate_delayed_leave", delegatedTimings],
+  ])(
+    "joins session with %s delegation support",
+    async (_serviceName, delegationUrl, delayedLeaveTimings) => {
+      const scope = testScope();
+      const joinMatrixRTC = vi.fn();
+      const delayId$ = new BehaviorSubject<string | null>(null);
+
+      if (delegationUrl !== null)
+        fetchMock.post(delegationUrl, () => ({ status: 401, body: {} }));
+
+      const localMembership = createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        connectionManager: {
+          connectionManagerData$: constant(
+            new Epoch(new ConnectionManagerData()),
+          ),
+        },
+        joinMatrixRTC,
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
+        delayId$,
+      });
+
+      localMembership.requestJoinAndPublish();
+      void (await fetchMock.flush());
+      await flushPromises();
+      // Joins with timings appropriate for the level of delegation support
+      expect(joinMatrixRTC).toHaveBeenCalledWith(
+        aTransport,
+        delayedLeaveTimings,
+      );
+
+      expect(authCallSpy).not.toHaveBeenCalled();
+      delayId$.next("leave1");
+      await flushPromises();
+      if (delegationUrl === null) {
+        expect(authCallSpy).not.toHaveBeenCalled();
+      } else {
+        // Delegation is supported in this test case, so go on to check that
+        // LocalMember actually performs delegation
+        const expectDelegation = (delayId: string) =>
+          expect(authCallSpy).toHaveBeenLastCalledWith(
+            mockedClient,
+            ownMemberMock,
+            "a",
+            "!test-room-id:example.org",
+            {
+              matrixRTCMode: MATRIX_RTC_MODE,
+              delayEndpointBaseUrl: "https://matrix.example.org",
+              delayId,
+            },
+            expect.anything(),
+          );
+
+        expectDelegation("leave1");
+        delayId$.next("leave2"); // Can change delegated leaves
+        await flushPromises();
+        expectDelegation("leave2");
+      }
+    },
+  );
+
   it("recreates publisher if new connection is used, always unpublish and end tracks", async () => {
     const scope = new ObservableScope();
 
     const activeTransport$ = new BehaviorSubject(aTransportWithSFUConfig);
     const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
+      advertised$: constant(aTransport),
       active$: activeTransport$,
     };
 
@@ -446,7 +545,7 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$: constant(new Epoch(connectionManagerData)),
       },
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
     });
     await flushPromises();
     activeTransport$.next({
@@ -477,7 +576,7 @@ describe("LocalMembership", () => {
     const publishers: Publisher[] = [];
 
     const tracks$ = new BehaviorSubject<LocalTrack[]>([]);
-    const publishing$ = new BehaviorSubject<boolean>(false);
+    const publishing$ = constant<boolean>(false);
     defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
       () => {
         const p = {
@@ -501,8 +600,8 @@ describe("LocalMembership", () => {
       >;
 
     const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
-      active$: new BehaviorSubject(aTransportWithSFUConfig),
+      advertised$: constant(aTransport),
+      active$: constant(aTransportWithSFUConfig),
     };
 
     const connectionManagerData = new ConnectionManagerData();
@@ -514,7 +613,7 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$: constant(new Epoch(connectionManagerData)),
       },
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
     });
     await flushPromises();
     expect(publisherFactory).toHaveBeenCalledOnce();
@@ -542,7 +641,7 @@ describe("LocalMembership", () => {
       new BehaviorSubject<null | LocalTransportWithSFUConfig>(null);
 
     const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
+      advertised$: constant(aTransport),
       active$: activeTransport$,
     };
 
@@ -585,7 +684,7 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$,
       },
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
     });
 
     await flushPromises();
@@ -720,10 +819,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -760,10 +859,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -802,18 +901,19 @@ describe("LocalMembership", () => {
         scope,
         ...defaultCreateLocalMemberValues,
         homeserverConnected: {
-          combined$: new BehaviorSubject<
-            [boolean, HomeserverDisconnectReason | null]
-          >([true, null]),
+          combined$: constant<[boolean, HomeserverDisconnectReason | null]>([
+            true,
+            null,
+          ]),
           rtsSession$: constant(RTCMemberStatus.Connected),
         },
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -854,10 +954,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -887,4 +987,98 @@ describe("LocalMembership", () => {
       scope.end();
     });
   });
+
+  describe("toggleScreenSharing", () => {
+    let originalMediaDevices: MediaDevices | undefined;
+
+    beforeAll(() => {
+      mockConfig();
+      // Screen sharing is only offered when getDisplayMedia is available.
+      originalMediaDevices = navigator.mediaDevices;
+      Object.defineProperty(navigator, "mediaDevices", {
+        configurable: true,
+        value: { getDisplayMedia: vi.fn() },
+      });
+    });
+
+    afterAll(() => {
+      Object.defineProperty(navigator, "mediaDevices", {
+        configurable: true,
+        value: originalMediaDevices,
+      });
+    });
+
+    const createMembershipWithConnection = (
+      connection: Connection | null,
+    ): {
+      scope: ObservableScope;
+      localMembership: ReturnType<typeof createLocalMembership$>;
+    } => {
+      const scope = new ObservableScope();
+      const connectionManagerData = new ConnectionManagerData();
+      if (connection) connectionManagerData.add(connection, []);
+      const localMembership = createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        connectionManager: {
+          connectionManagerData$: constant(new Epoch(connectionManagerData)),
+        },
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
+      });
+      return { scope, localMembership };
+    };
+
+    it("surfaces a failure and clears it on dismiss", async () => {
+      const error = new Error("NotReadableError");
+      const setScreenShareEnabled = vi.fn().mockRejectedValue(error);
+      const connection = {
+        state$: constant(ConnectionState.LivekitConnected),
+        transport: aTransport,
+        livekitRoom: mockLivekitRoom({
+          localParticipant: mockLocalParticipant({
+            isScreenShareEnabled: false,
+            setScreenShareEnabled,
+          }),
+        }),
+      } as unknown as Connection;
+      const { scope, localMembership } =
+        createMembershipWithConnection(connection);
+      await flushPromises();
+
+      expect(localMembership.toggleScreenSharing).not.toBeNull();
+      expect(localMembership.screenShareError$.value).toBeNull();
+
+      localMembership.toggleScreenSharing!();
+      await flushPromises();
+
+      expect(setScreenShareEnabled).toHaveBeenCalledWith(
+        true,
+        expect.any(Object),
+        undefined,
+      );
+      expect(localMembership.screenShareError$.value).toBe(error);
+
+      localMembership.dismissScreenShareError();
+      expect(localMembership.screenShareError$.value).toBeNull();
+
+      scope.end();
+    });
+
+    it("does nothing when there is no local participant", async () => {
+      // No connection means participant$ never resolves to a participant.
+      const { scope, localMembership } = createMembershipWithConnection(null);
+      await flushPromises();
+
+      expect(localMembership.toggleScreenSharing).not.toBeNull();
+      localMembership.toggleScreenSharing!();
+      await flushPromises();
+
+      expect(localMembership.screenShareError$.value).toBeNull();
+
+      scope.end();
+    });
+  });
 });

src/state/CallViewModel/localMember/LocalMember.ts

@@ -10,10 +10,12 @@ import {
   ParticipantEvent,
   type LocalParticipant,
   type ScreenShareCaptureOptions,
+  type TrackPublishOptions,
   RoomEvent,
   MediaDeviceFailure,
 } from "livekit-client";
 import { observeParticipantEvents } from "@livekit/components-core";
+import { type MatrixClient } from "matrix-js-sdk";
 import {
   Status as RTCSessionStatus,
   type LivekitTransport,
@@ -53,7 +55,18 @@ import {
 import { ElementWidgetActions, widget } from "../../../widget.ts";
 import { getUrlParams } from "../../../UrlParams.ts";
 import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics.ts";
-import { MatrixRTCMode } from "../../../config/ConfigOptions.ts";
+import {
+  advancedScreenShare,
+  screenShareResolution,
+  screenShareFramerate,
+  screenShareBitrate,
+  screenShareCodec,
+  parseResolution,
+} from "../../../settings/settings.ts";
+import {
+  MatrixRTCMode,
+  type ResolvedDelayedLeaveTimings,
+} from "../../../config/ConfigOptions.ts";
 import { Config } from "../../../config/Config.ts";
 import {
   ConnectionState,
@@ -63,6 +76,8 @@ import {
 import { type HomeserverConnected } from "./HomeserverConnected.ts";
 import { type LocalTransport } from "./LocalTransport.ts";
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
+import { or$ } from "../../../utils/observable.ts";
+import { getSFUConfigWithOpenID } from "../../../livekit/openIDSFU.ts";
 
 export enum TransportState {
   /** Not even a transport is available to the LocalMembership */
@@ -108,8 +123,6 @@ export type LocalMemberState =
     };
 
 /*
- * - get well known
- * - get oldest membership
  * - get transport to use
  * - get openId + jwt token
  * - wait for createTrack() call
@@ -126,14 +139,22 @@ interface Props {
   muteStates: MuteStates;
   connectionManager: IConnectionManager;
   createPublisherFactory: (connection: Connection) => Publisher;
-  joinMatrixRTC: (transport: LivekitTransportConfig) => void;
+  joinMatrixRTC: (
+    transport: LivekitTransportConfig,
+    delayedLeaveTimings: ResolvedDelayedLeaveTimings,
+  ) => void;
   homeserverConnected: HomeserverConnected;
   roomId: string;
-  localTransport$: Behavior<LocalTransport>;
+  ownMembershipIdentity: CallMembershipIdentityParts;
+  localTransport: LocalTransport;
+  client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
   matrixRTCSession: Pick<
     MatrixRTCSession,
     "updateCallIntent" | "leaveRoomSession"
   >;
+  baseUrl: string;
+  delayId$: Behavior<string | null>;
+  matrixRTCMode: MatrixRTCMode;
   logger: Logger;
 }
 
@@ -148,10 +169,12 @@ interface Props {
  * @param props.createPublisherFactory Factory to create a publisher once we have a connection.
  * @param props.joinMatrixRTC Callback to join the matrix RTC session once we have a transport.
  * @param props.homeserverConnected The homeserver connected state.
- * @param props.localTransport$ The transport to advertise in our membership.
+ * @param props.localTransport The transport to advertise in our membership.
  * @param props.logger The logger to use.
  * @param props.muteStates The mute states for video and audio.
  * @param props.matrixRTCSession The matrix RTC session to join.
+ * @param props.baseUrl Base URL of the homeserver.
+ * @param props.delayId$ ID of the delayed leave event to delegate to the SFU.
  * @param props.roomId The room ID used as the call identifier in analytics events.
  * @returns
  *  - publisher: The handle to create tracks and publish them to the room.
@@ -163,14 +186,19 @@ interface Props {
 export const createLocalMembership$ = ({
   scope,
   connectionManager,
-  localTransport$,
+  localTransport,
   homeserverConnected,
   createPublisherFactory,
   joinMatrixRTC,
   logger: parentLogger,
   muteStates,
+  client,
   matrixRTCSession,
+  baseUrl,
   roomId,
+  ownMembershipIdentity,
+  delayId$,
+  matrixRTCMode,
 }: Props): {
   /**
    * This request to start audio and video tracks.
@@ -189,6 +217,11 @@ export const createLocalMembership$ = ({
    * Callback to toggle screen sharing. If null, screen sharing is not possible.
    */
   toggleScreenSharing: (() => void) | null;
+  /**
+   * The last error from toggling screen sharing, until dismissed.
+   */
+  screenShareError$: Behavior<Error | null>;
+  dismissScreenShareError: () => void;
   // tracks$: Behavior<LocalTrack[]>;
   participant$: Behavior<LocalParticipant | null>;
   connection$: Behavior<Connection | null>;
@@ -224,25 +257,69 @@ export const createLocalMembership$ = ({
     return of(null);
   };
 
-  // This is the transport that we will advertise in our membership.
-  const advertisedTransport$ = localTransport$.pipe(
-    switchMap((lt) => lt.advertised$),
+  async function checkDelegationSupport(
+    endpointUrl: string,
+    serviceName: string,
+  ): Promise<boolean> {
+    logger.info(`Checking whether ${serviceName} supports delegation…`);
+    try {
+      // Bluntly hit the endpoint without auth to check for a 404. Unfortunately
+      // we can't wrap this in a retry loop, as many servers don't just disable
+      // delegation support, but in fact are from a time before the endpoint
+      // existed at all, therefore we can hit CORS errors which would just gum
+      // up the retry loop. (May be revisited after Matrix 2.0.)
+      const res = await fetch(endpointUrl, { method: "POST" });
+      if (res.status === 404) {
+        logger.warn(`${serviceName} does not support delegation`);
+        return false;
+      } else {
+        logger.info(`${serviceName} supports delegation`);
+        return true;
+      }
+    } catch (e) {
+      logger.warn(
+        `Failed to determine whether ${serviceName} supports delegation, assuming no support`,
+        e,
+      );
+      return false;
+    }
+  }
+
+  const homeserverSupportsDelegation = checkDelegationSupport(
+    baseUrl +
+      "/_matrix/client/unstable/io.element.msc4195/rtc/livekit/delegate_delayed_leave",
+    "homeserver",
+  );
+
+  // The transport that we will advertise in our membership, paired with info as
+  // to whether delayed event delegation is supported
+  const joinParams$ = localTransport.advertised$.pipe(
     catchError(handleTransportError),
     distinctUntilChanged(areLivekitTransportsEqual),
+    switchMap((transport) => {
+      if (transport === null) return of(null);
+      const transportSupportsDelegation = checkDelegationSupport(
+        transport.livekit_service_url + "/delegate_delayed_leave",
+        `transport ${transport.livekit_service_url}`,
+      );
+      return or$(
+        from(homeserverSupportsDelegation),
+        from(transportSupportsDelegation),
+      ).pipe(
+        map((delegationSupported) => ({ transport, delegationSupported })),
+        startWith(null),
+      );
+    }),
   );
 
   // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
   const activeTransport$ = scope.behavior(
-    localTransport$.pipe(
-      switchMap((lt) => {
-        return combineLatest([lt.active$, lt.advertised$]).pipe(
-          map(([active, advertised]) => {
-            // Our policy is to not publish to another transport if our prefered transport is miss-configured
-            if (advertised == null) return null;
+    combineLatest([localTransport.active$, localTransport.advertised$]).pipe(
+      map(([active, advertised]) => {
+        // Our policy is to not publish to another transport if our prefered transport is miss-configured
+        if (advertised == null) return null;
 
-            return active?.transport ?? null;
-          }),
-        );
+        return active?.transport ?? null;
       }),
       catchError(handleTransportError),
       distinctUntilChanged(areLivekitTransportsEqual),
@@ -605,16 +682,20 @@ export const createLocalMembership$ = ({
 
   // Keep matrix rtc session in sync with advertisedTransport$, connectRequested$
   scope.reconcile(
-    scope.behavior(
-      combineLatest([advertisedTransport$, joinAndPublishRequested$]),
-    ),
-    async ([transport, shouldConnect]) => {
-      if (!transport) return;
+    scope.behavior(combineLatest([joinParams$, joinAndPublishRequested$])),
+    async ([joinParams, shouldConnect]) => {
+      if (!joinParams) return;
       // if shouldConnect=false we will do the disconnect as the cleanup from the previous reconcile iteration.
       if (!shouldConnect) return;
+      const sessionConfig = Config.get().matrix_rtc_session;
 
       try {
-        joinMatrixRTC(transport);
+        joinMatrixRTC(
+          joinParams.transport,
+          joinParams.delegationSupported
+            ? sessionConfig.delegated_delayed_leave
+            : sessionConfig.delayed_leave,
+        );
       } catch (error) {
         logger.error("Error entering RTC session", error);
         if (error instanceof Error)
@@ -641,6 +722,34 @@ export const createLocalMembership$ = ({
     ),
   );
 
+  // Delegate delayed leaves to the SFU
+  scope.reconcile(
+    scope.behavior(combineLatest([joinParams$, delayId$])),
+    async ([joinParams, delayId]) => {
+      if (joinParams?.delegationSupported && delayId !== null) {
+        try {
+          // This will technically cause the service to issue a new JWT token,
+          // but it's safe to discard. We're only interested in triggering
+          // delegation.
+          await getSFUConfigWithOpenID(
+            client,
+            ownMembershipIdentity,
+            joinParams.transport.livekit_service_url,
+            roomId,
+            { matrixRTCMode, delayEndpointBaseUrl: baseUrl, delayId },
+            logger,
+          );
+        } catch (e) {
+          // TODO: Surface this to the user as a service interruption?
+          logger.error(
+            `Failed to delegate leave to ${joinParams.transport.livekit_service_url}`,
+            e,
+          );
+        }
+      }
+    },
+  );
+
   // Pause upstream of all local media tracks when we're disconnected from
   // MatrixRTC, because it can be an unpleasant surprise for the app to say
   // 'reconnecting' and yet still be transmitting your media to others.
@@ -699,6 +808,7 @@ export const createLocalMembership$ = ({
     ),
   );
 
+  const screenShareError$ = new BehaviorSubject<Error | null>(null);
   let toggleScreenSharing: (() => void) | null = null;
   if (
     "getDisplayMedia" in (navigator.mediaDevices ?? {}) &&
@@ -719,6 +829,43 @@ export const createLocalMembership$ = ({
         surfaceSwitching: "include",
         systemAudio: "include",
       };
+
+      let publishOptions: TrackPublishOptions | undefined;
+
+      if (advancedScreenShare.getValue()) {
+        // User has advanced screen share settings enabled
+        const { width, height } = parseResolution(
+          screenShareResolution.getValue(),
+        );
+        const fps = screenShareFramerate.getValue();
+        const bps = screenShareBitrate.getValue();
+        const codec = screenShareCodec.getValue();
+
+        screenshareSettings.resolution = {
+          width,
+          height,
+          frameRate: fps,
+        };
+
+        publishOptions = {
+          screenShareEncoding: {
+            maxBitrate: bps,
+            maxFramerate: fps,
+          },
+          videoCodec: codec,
+        };
+      } else {
+        // Fall back to config.json settings if available
+        const screenConf = Config.get().media_quality?.screen_share;
+        if (screenConf?.max_resolution) {
+          screenshareSettings.resolution = {
+            width: Math.round((screenConf.max_resolution * 16) / 9),
+            height: screenConf.max_resolution,
+            frameRate: screenConf.max_framerate ?? 30,
+          };
+        }
+      }
+
       const targetScreenshareState = !sharingScreen$.value;
       logger.info(
         `toggleScreenSharing called. Switching ${
@@ -733,9 +880,18 @@ export const createLocalMembership$ = ({
       // We also allow screen sharing to be toggled even if the connection
       // is still initializing or publishing tracks, because there's no
       // technical reason to disallow this. LiveKit will publish if it can.
-      participant$.value
-        ?.setScreenShareEnabled(targetScreenshareState, screenshareSettings)
-        .catch(logger.error);
+      const participant = participant$.value;
+      if (!participant) return;
+      watchScreenShareToggle(
+        participant.setScreenShareEnabled(
+          targetScreenshareState,
+          screenshareSettings,
+          publishOptions,
+        ),
+        targetScreenshareState,
+        logger,
+        (e) => screenShareError$.next(e),
+      );
     };
   }
 
@@ -754,11 +910,44 @@ export const createLocalMembership$ = ({
     ),
     sharingScreen$,
     toggleScreenSharing,
+    screenShareError$,
+    dismissScreenShareError: () => screenShareError$.next(null),
     connection$: localConnection$,
     internalLoggerRef: logger,
   };
 };
 
+/**
+ * Logs the outcome of a screen share toggle and reports failures.
+ *
+ * getDisplayMedia may legitimately take a long time (the user is choosing
+ * what to share) or never settle at all, so nothing is inferred from silence:
+ * the request and its completion are logged with the elapsed time so that a
+ * hang is visible in the logs, and only an explicit rejection is reported.
+ *
+ * The user cancelling the picker rejects with a NotAllowedError; that is
+ * logged but not reported.
+ */
+export function watchScreenShareToggle(
+  toggle: Promise<unknown>,
+  enable: boolean,
+  logger: Logger,
+  onError: (e: Error) => void,
+): void {
+  const what = `Screen share ${enable ? "start" : "stop"}`;
+  const started = Date.now();
+  const elapsed = (): string => `${Date.now() - started} ms`;
+  logger.info(`${what} requested`);
+  toggle.then(
+    () => logger.info(`${what} completed in ${elapsed()}`),
+    (e: unknown) => {
+      logger.error(`${what} failed after ${elapsed()}:`, e);
+      if (e instanceof DOMException && e.name === "NotAllowedError") return;
+      onError(e instanceof Error ? e : new Error(String(e)));
+    },
+  );
+}
+
 export function observeSharingScreen$(p: Participant): Observable<boolean> {
   return observeParticipantEvents(
     p,
@@ -772,6 +961,7 @@ export function observeSharingScreen$(p: Participant): Observable<boolean> {
 interface EnterRTCSessionOptions {
   encryptMedia: boolean;
   matrixRTCMode: MatrixRTCMode;
+  delayedLeaveTimings: ResolvedDelayedLeaveTimings;
 }
 
 /**
@@ -784,6 +974,7 @@ interface EnterRTCSessionOptions {
  * @param rtcSession - The MatrixRTCSession to join.
  * @param ownMembershipIdentity - Options for entering the RTC session.
  * @param transport - The LivekitTransport to use for this session.
+ * @param delayedLeaveTimings - The preferred timings for delayed leave events.
  * @param options - `encryptMedia`: Whether to encrypt media `matrixRTCMode`: The Matrix RTC mode to use.
  * @throws If the widget could not send ElementWidgetActions.JoinCall action.
  */
@@ -792,9 +983,8 @@ export function enterRTCSession(
   rtcSession: MatrixRTCSession,
   ownMembershipIdentity: CallMembershipIdentityParts,
   transport: LivekitTransportConfig,
-  options: EnterRTCSessionOptions,
+  { encryptMedia, matrixRTCMode, delayedLeaveTimings }: EnterRTCSessionOptions,
 ): void {
-  const { encryptMedia, matrixRTCMode } = options;
   PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
   PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
 
@@ -802,9 +992,11 @@ export function enterRTCSession(
   // have started tracking by the time calls start getting created.
   // groupCallOTelMembership?.onJoinCall();
 
-  const { features, matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
-  const useDeviceSessionMemberEvents =
-    features?.feature_use_device_session_member_events;
+  const {
+    sync_disconnect_grace_period_ms: gracePeriod,
+    matrix_rtc_session: sessionConfig,
+  } = Config.get();
+  const retryInterval = sessionConfig.network_error_retry_ms;
   const { sendNotificationType: notificationType, callIntent } = getUrlParams();
   const multiSFU =
     matrixRTCMode === MatrixRTCMode.Compatibility ||
@@ -822,16 +1014,11 @@ export function enterRTCSession(
     };
   }
 
-  // Calculates `maximumNetworkErrorRetryCount`. The connection is failed if EITHER:
-  // - The /sync loop is unresponsive for > `gracePeriod` ms, or
-  // - A delayed leave event is emitted (after `leaveDelay` ms period).
-  // Note: Use leaveDelay >> gracePeriod for delegated leave events.
-  const gracePeriod = Config.get().sync_disconnect_grace_period_ms;
-  const leaveDelay = matrixRtcSessionConfig?.delayed_leave_event_delay_ms;
-  const retryInterval = matrixRtcSessionConfig?.network_error_retry_ms;
-
+  // Set maximumNetworkErrorRetryCount such that we will consider the client
+  // disconnected as soon as either it fails to sync for longer than the grace
+  // period, or it is likely that a delayed leave event has been sent.
   // Math.min is used to account for the respective worst case: /sync not available or leave event emitted.
-  const maxWaitTime = Math.min(gracePeriod, leaveDelay);
+  const maxWaitTime = Math.min(gracePeriod, delayedLeaveTimings.delay_ms);
   const maximumNetworkErrorRetryCount =
     Math.ceil(maxWaitTime / retryInterval) + 1;
 
@@ -846,19 +1033,14 @@ export function enterRTCSession(
       notificationType,
       callIntent,
       manageMediaKeys: encryptMedia,
-      ...(useDeviceSessionMemberEvents !== undefined && {
-        useLegacyMemberEvents: !useDeviceSessionMemberEvents,
-      }),
-      delayedLeaveEventRestartMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_ms,
-      delayedLeaveEventDelayMs:
-        matrixRtcSessionConfig?.delayed_leave_event_delay_ms,
+      delayedLeaveEventRestartMs: delayedLeaveTimings.restart_ms,
+      delayedLeaveEventDelayMs: delayedLeaveTimings.delay_ms,
       delayedLeaveEventRestartLocalTimeoutMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_local_timeout_ms,
-      networkErrorRetryMs: matrixRtcSessionConfig?.network_error_retry_ms,
-      makeKeyDelay: matrixRtcSessionConfig?.wait_for_key_rotation_ms,
-      membershipEventExpiryMs:
-        matrixRtcSessionConfig?.membership_event_expiry_ms,
+        delayedLeaveTimings.restart_timeout_ms,
+      networkErrorRetryMs: sessionConfig.network_error_retry_ms,
+      makeKeyDelay: sessionConfig.wait_for_key_rotation_ms,
+      membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
+      keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
       unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
       maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
     },

src/state/CallViewModel/localMember/LocalTransport.test.ts

@@ -13,29 +13,20 @@ import {
   it,
   type MockedObject,
   vi,
-  type MockInstance,
 } from "vitest";
-import {
-  type CallMembership,
-  type LivekitTransportConfig,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, filter, lastValueFrom } from "rxjs";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
+import { lastValueFrom } from "rxjs";
 import fetchMock from "fetch-mock";
 
 import {
   mockConfig,
   flushPromises,
   ownMemberMock,
-  mockRtcMembership,
   testScope,
 } from "../../../utils/test";
-import {
-  createLocalTransport$,
-  JwtEndpointVersion,
-  type LocalTransportWithSFUConfig,
-} from "./LocalTransport";
+import { createLocalTransport$ } from "./LocalTransport";
 import { constant } from "../../Behavior";
-import { Epoch, ObservableScope, trackEpoch } from "../../ObservableScope";
+import { Epoch, ObservableScope } from "../../ObservableScope";
 import {
   MatrixRTCTransportMissingError,
   FailToGetOpenIdToken,
@@ -43,6 +34,7 @@ import {
 import * as openIDSFU from "../../../livekit/openIDSFU";
 import { customLivekitUrl } from "../../../settings/settings";
 import { testJWTToken } from "../../../utils/test-fixtures";
+import { MatrixRTCMode } from "../../../config/ConfigOptions";
 
 describe("LocalTransport", () => {
   const openIdResponse: openIDSFU.SFUConfig = {
@@ -58,28 +50,26 @@ describe("LocalTransport", () => {
     const { advertised$, active$ } = createLocalTransport$({
       scope: testScope(),
       roomId: "!room:example.org",
-      useOldestMember: false,
       memberships$: constant(new Epoch<CallMembership[]>([])),
       client: {
         // eslint-disable-next-line @typescript-eslint/naming-convention
         _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getAccessToken: vi.fn().mockReturnValue("access_token"),
-        getDomain: () => "",
-        baseUrl: "example.org",
+        getDomain: () => "example.org",
         // These won't be called in this error path but satisfy the type
         getOpenIdToken: vi.fn(),
         getDeviceId: vi.fn(),
       },
       ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: constant("delay_id_mock"),
+      matrixRTCMode: MatrixRTCMode.Compatibility,
     });
     await flushPromises();
 
     expect(() => advertised$.value).toThrow(
-      new MatrixRTCTransportMissingError(""),
+      new MatrixRTCTransportMissingError("example.org"),
+    );
+    expect(() => active$.value).toThrow(
+      new MatrixRTCTransportMissingError("example.org"),
     );
-    expect(() => active$.value).toThrow(new MatrixRTCTransportMissingError(""));
   });
 
   it("throws FailToGetOpenIdToken when OpenID fetch fails", async () => {
@@ -100,21 +90,16 @@ describe("LocalTransport", () => {
     const { advertised$, active$ } = createLocalTransport$({
       scope,
       roomId: "!example_room_id",
-      useOldestMember: false,
       memberships$: constant(new Epoch<CallMembership[]>([])),
       client: {
-        baseUrl: "https://lk.example.org",
-        // Use empty domain to skip .well-known and use config directly
-        getDomain: () => "",
-        getAccessToken: vi.fn().mockReturnValue("access_token"),
+        getDomain: () => "example.org",
         // eslint-disable-next-line @typescript-eslint/naming-convention
         _unstable_getRTCTransports: async () => Promise.resolve([]),
         getOpenIdToken: vi.fn(),
         getDeviceId: vi.fn(),
       },
       ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: constant("delay_id_mock"),
+      matrixRTCMode: MatrixRTCMode.Compatibility,
     });
     active$.subscribe(
       (o) => observations.push(o),
@@ -145,20 +130,16 @@ describe("LocalTransport", () => {
     const { advertised$, active$ } = createLocalTransport$({
       scope: testScope(),
       roomId: "!room:example.org",
-      useOldestMember: false,
       memberships$: constant(new Epoch<CallMembership[]>([])),
       client: {
         // eslint-disable-next-line @typescript-eslint/naming-convention
         _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getDomain: () => "",
+        getDomain: () => "example.org",
         getOpenIdToken: vi.fn(),
         getDeviceId: vi.fn(),
-        baseUrl: "https://lk.example.org",
-        getAccessToken: vi.fn().mockReturnValue("access_token"),
       },
       ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: constant("delay_id_mock"),
+      matrixRTCMode: MatrixRTCMode.Compatibility,
     });
 
     openIdResolver.resolve?.({
@@ -187,129 +168,6 @@ describe("LocalTransport", () => {
     });
   });
 
-  describe("oldest member mode", () => {
-    const aliceTransport: LivekitTransportConfig = {
-      type: "livekit",
-      livekit_service_url: "https://alice.example.org",
-    };
-    const bobTransport: LivekitTransportConfig = {
-      type: "livekit",
-      livekit_service_url: "https://bob.example.org",
-    };
-    const aliceMembership = mockRtcMembership("@alice:example.org", "AAA", {
-      fociPreferred: [aliceTransport],
-    });
-    const bobMembership = mockRtcMembership("@bob:example.org", "BBB", {
-      fociPreferred: [bobTransport],
-    });
-
-    let openIdSpy: MockInstance<(typeof openIDSFU)["getSFUConfigWithOpenID"]>;
-    beforeEach(() => {
-      openIdSpy = vi
-        .spyOn(openIDSFU, "getSFUConfigWithOpenID")
-        .mockResolvedValue(openIdResponse);
-    });
-
-    it("updates active transport when oldest member changes", async () => {
-      // Initially, Alice is the only member
-      const memberships$ = new BehaviorSubject([aliceMembership]);
-
-      const scope = testScope();
-      const { advertised$, active$ } = createLocalTransport$({
-        scope,
-        roomId: "!example_room_id",
-        useOldestMember: true,
-        memberships$: scope.behavior(memberships$.pipe(trackEpoch())),
-        client: {
-          getDomain: () => "",
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () => Promise.resolve([]),
-          getAccessToken: vi.fn().mockReturnValue("access_token"),
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-          baseUrl: "https://lk.example.org",
-        },
-        ownMembershipIdentity: ownMemberMock,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant("delay_id_mock"),
-      });
-
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      // SFU config should've been fetched
-      expect(openIdSpy).toHaveBeenCalled();
-      // Alice's transport should be active and advertised
-      expect(active$.value?.transport).toStrictEqual(aliceTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-
-      // Now Bob joins the call, but Alice is still the oldest member
-      openIdSpy.mockClear();
-      memberships$.next([aliceMembership, bobMembership]);
-      await flushPromises();
-      // No new SFU config should've been fetched
-      expect(openIdSpy).not.toHaveBeenCalled();
-      // Alice's transport should still be active and advertised
-      expect(active$.value?.transport).toStrictEqual(aliceTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-
-      // Now Bob takes Alice's place as the oldest member
-      openIdSpy.mockClear();
-      memberships$.next([bobMembership, aliceMembership]);
-      // Active transport should reset to null until we have Bob's SFU config
-      expect(active$.value).toStrictEqual(null);
-      await flushPromises();
-      // Bob's SFU config should've been fetched
-      expect(openIdSpy).toHaveBeenCalled();
-      // Bob's transport should be active, but Alice's should remain advertised
-      // (since we don't want the change in oldest member to cause a wave of new
-      // state events)
-      expect(active$.value?.transport).toStrictEqual(bobTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-    });
-
-    it("advertises preferred transport when no other member exists", async () => {
-      // Initially, there are no members
-      const memberships$ = new BehaviorSubject<CallMembership[]>([]);
-
-      const scope = testScope();
-      const { advertised$, active$ } = createLocalTransport$({
-        scope,
-        roomId: "!example_room_id",
-        useOldestMember: true,
-        memberships$: scope.behavior(memberships$.pipe(trackEpoch())),
-        client: {
-          getDomain: () => "",
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () =>
-            Promise.resolve([aliceTransport]),
-          getAccessToken: vi.fn().mockReturnValue("access_token"),
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-          baseUrl: "https://lk.example.org",
-        },
-        ownMembershipIdentity: ownMemberMock,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant("delay_id_mock"),
-      });
-
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      // Our own preferred transport should be advertised
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-      // No transport should be active however (there is still no oldest member)
-      expect(active$.value).toBe(null);
-
-      // Now Bob joins the call and becomes the oldest member
-      memberships$.next([bobMembership]);
-      await flushPromises();
-      // We should still advertise our own preferred transport (to avoid
-      // unnecessary state changes)
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-      // Bob's transport should become active
-      expect(active$.value?.transport).toBe(bobTransport);
-    });
-  });
-
   type LocalTransportProps = Parameters<typeof createLocalTransport$>[0];
 
   describe("transport configuration mechanisms", () => {
@@ -324,16 +182,12 @@ describe("LocalTransport", () => {
         ownMembershipIdentity: ownMemberMock,
         scope: testScope(),
         roomId: "!example_room_id",
-        useOldestMember: false,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant(null),
+        matrixRTCMode: MatrixRTCMode.Compatibility,
         memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
-          baseUrl: "https://example.org",
-          getDomain: vi.fn().mockReturnValue(""),
+          getDomain: vi.fn().mockReturnValue("example.org"),
           // eslint-disable-next-line @typescript-eslint/naming-convention
           _unstable_getRTCTransports: vi.fn().mockResolvedValue([]),
-          getAccessToken: vi.fn().mockReturnValue("access_token"),
           getOpenIdToken: vi.fn(),
           getDeviceId: vi.fn(),
         },
@@ -421,42 +275,6 @@ describe("LocalTransport", () => {
       });
     });
 
-    it("Should not call _unstable_getRTCTransports in widget mode but use well-known", async () => {
-      mockConfig({
-        livekit: { livekit_service_url: "https://do-not-use.lk.example.org" },
-      });
-
-      localTransportOpts.client.getDomain.mockReturnValue("example.org");
-
-      fetchMock.getOnce("https://example.org/.well-known/matrix/client", {
-        "org.matrix.msc4143.rtc_foci": [
-          {
-            type: "livekit",
-            livekit_service_url: "https://use-me.jwt.call.example.org",
-          },
-        ],
-      });
-
-      localTransportOpts.client.getAccessToken.mockReturnValue(null);
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
-      openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
-      expect(active$.value).toBe(null);
-      await flushPromises();
-
-      expect(
-        localTransportOpts.client._unstable_getRTCTransports,
-      ).not.toHaveBeenCalled();
-
-      const expectedTransport = {
-        type: "livekit",
-        livekit_service_url: "https://use-me.jwt.call.example.org",
-      };
-
-      expect(advertised$.value).toStrictEqual(expectedTransport);
-    });
-
     it("fails fast if the openID request fails for backend config", async () => {
       localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
         { type: "livekit", livekit_service_url: "https://lk.example.org" },
@@ -469,66 +287,17 @@ describe("LocalTransport", () => {
       ).rejects.toThrow(expect.any(FailToGetOpenIdToken));
     });
 
-    it("supports getting transport via well-known", async () => {
-      localTransportOpts.client.getDomain.mockReturnValue("example.org");
-      fetchMock.getOnce("https://example.org/.well-known/matrix/client", {
-        "org.matrix.msc4143.rtc_foci": [
-          { type: "livekit", livekit_service_url: "https://lk.example.org" },
-        ],
-      });
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
-      openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      const expectedTransport = {
-        livekit_service_url: "https://lk.example.org",
-        type: "livekit",
-      };
-      expect(advertised$.value).toStrictEqual(expectedTransport);
-      expect(active$.value).toStrictEqual({
-        transport: expectedTransport,
-        sfuConfig: {
-          jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
-          livekitAlias: "Akph4alDMhen",
-          livekitIdentity: "@lk_user:ABCDEF",
-          url: "https://lk.example.org",
-        },
-      });
-      expect(fetchMock.done()).toEqual(true);
-    });
-
-    it("fails fast if the openId request fails for the well-known config", async () => {
-      localTransportOpts.client.getDomain.mockReturnValue("example.org");
-      fetchMock.getOnce("https://example.org/.well-known/matrix/client", {
-        "org.matrix.msc4143.rtc_foci": [
-          { type: "livekit", livekit_service_url: "https://lk.example.org" },
-        ],
-      });
-      openIdResolver.reject(
-        new FailToGetOpenIdToken(new Error("Test driven error")),
-      );
-      await expect(async () =>
-        lastValueFrom(createLocalTransport$(localTransportOpts).active$),
-      ).rejects.toThrow(expect.any(FailToGetOpenIdToken));
-    });
-
     it("throws if no options are available", async () => {
       const { advertised$, active$ } = createLocalTransport$({
         scope: testScope(),
         ownMembershipIdentity: ownMemberMock,
         roomId: "!example_room_id",
-        useOldestMember: false,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant(null),
+        matrixRTCMode: MatrixRTCMode.Compatibility,
         memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
-          getDomain: () => "",
-          baseUrl: "https://example.org",
+          getDomain: () => "example.org",
           // eslint-disable-next-line @typescript-eslint/naming-convention
           _unstable_getRTCTransports: async () => Promise.resolve([]),
-          getAccessToken: vi.fn().mockReturnValue("access_token"),
           // These won't be called in this error path but satisfy the type
           getOpenIdToken: vi.fn(),
           getDeviceId: vi.fn(),
@@ -537,93 +306,11 @@ describe("LocalTransport", () => {
       await flushPromises();
 
       expect(() => advertised$.value).toThrow(
-        new MatrixRTCTransportMissingError(""),
+        new MatrixRTCTransportMissingError("example.org"),
       );
       expect(() => active$.value).toThrow(
-        new MatrixRTCTransportMissingError(""),
+        new MatrixRTCTransportMissingError("example.org"),
       );
     });
   });
-
-  it("should not update advertised/active transport on delayID changes, but delay Id delegation should be called", async () => {
-    // For simplicity, we'll just use the config livekit
-    customLivekitUrl.setValue("https://lk.example.org");
-
-    const authCallSpy = vi
-      .spyOn(openIDSFU, "getSFUConfigWithOpenID")
-      .mockResolvedValue(openIdResponse);
-
-    const delayId$ = new BehaviorSubject<string | null>(null);
-
-    const { advertised$, active$ } = createLocalTransport$({
-      scope: testScope(),
-      ownMembershipIdentity: ownMemberMock,
-      roomId: "!example_room_id",
-      // We want multi-sdu
-      useOldestMember: false,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: delayId$,
-      memberships$: constant(new Epoch<CallMembership[]>([])),
-      client: {
-        getDomain: () => "",
-        baseUrl: "https://example.org",
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getAccessToken: vi.fn().mockReturnValue("access_token"),
-        // These won't be called in this error path but satisfy the type
-        getOpenIdToken: vi.fn(),
-        getDeviceId: vi.fn(),
-      },
-    });
-
-    const advertisedValues: LivekitTransportConfig[] = [];
-    const activeValues: LocalTransportWithSFUConfig[] = [];
-    advertised$
-      .pipe(filter((v) => v !== null))
-      .subscribe((t) => advertisedValues.push(t));
-    active$
-      .pipe(filter((v) => v !== null))
-      .subscribe((t) => activeValues.push(t));
-
-    await flushPromises();
-
-    // we have now an active and an advertised
-    expect(advertisedValues.length).toEqual(1);
-    expect(activeValues.length).toEqual(1);
-    expect(advertisedValues[0]!.livekit_service_url).toEqual(
-      "https://lk.example.org",
-    );
-    expect(activeValues[0]!.transport.livekit_service_url).toEqual(
-      "https://lk.example.org",
-    );
-
-    expect(authCallSpy).toHaveBeenCalledTimes(2);
-    // Now emits 3 new delays id
-    delayId$.next("delay_id_1");
-    await flushPromises();
-    delayId$.next("delay_id_2");
-    await flushPromises();
-    delayId$.next("delay_id_3");
-    await flushPromises();
-
-    // No new emissions should've happened, it is the same transport.
-    expect(advertisedValues.length).toEqual(1);
-    expect(activeValues.length).toEqual(1);
-
-    // Still we should have updated the delayID to auth
-    expect(authCallSpy).toHaveBeenCalledTimes(
-      4 * 2 /* 2 calls for each delayId ?? why */,
-    );
-
-    expect(authCallSpy).toHaveBeenLastCalledWith(
-      expect.anything(),
-      expect.anything(),
-      expect.anything(),
-      expect.anything(),
-      expect.objectContaining({
-        delayId: "delay_id_3",
-      }),
-      expect.anything(),
-    );
-  });
 });

src/state/CallViewModel/localMember/LocalTransport.ts

@@ -7,26 +7,11 @@ Please see LICENSE in the repository root for full details.
 
 import {
   type CallMembership,
-  isLivekitTransportConfig,
   type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
-import {
-  catchError,
-  combineLatest,
-  distinctUntilChanged,
-  first,
-  from,
-  map,
-  merge,
-  type Observable,
-  of,
-  startWith,
-  switchMap,
-  tap,
-} from "rxjs";
+import { distinctUntilChanged, from, map, of, switchMap } from "rxjs";
 import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
-import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import { type Behavior } from "../../Behavior.ts";
@@ -45,31 +30,21 @@ import {
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
 import { customLivekitUrl } from "../../../settings/settings.ts";
 import { RtcTransportAutoDiscovery } from "./RtcTransportAutoDiscovery.ts";
+import { type MatrixRTCMode } from "../../../config/ConfigOptions.ts";
 
 /*
  * It figures out “which LiveKit focus URL/alias the local user should use,”
- * optionally aligning with the oldest member, and ensures the SFU path is primed
- * before advertising that choice.
+ * and ensures the SFU path is primed before advertising that choice.
  */
 interface Props {
   scope: ObservableScope;
   ownMembershipIdentity: CallMembershipIdentityParts;
   memberships$: Behavior<Epoch<CallMembership[]>>;
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports" | "getAccessToken"
-  > &
+  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
     OpenIDClientParts;
   // Used by the jwt service to create the livekit room and compute the livekit alias.
   roomId: string;
-  useOldestMember: boolean;
-  forceJwtEndpoint: JwtEndpointVersion;
-  delayId$: Behavior<string | null>;
-}
-
-export enum JwtEndpointVersion {
-  Legacy = "legacy",
-  Matrix_2_0 = "matrix_2_0",
+  matrixRTCMode: MatrixRTCMode;
 }
 
 // TODO livekit_alias-cleanup
@@ -120,8 +95,6 @@ export interface LocalTransport {
 /**
  * Connects to the JWT service and determines the transports that the local member should use.
  *
- * @prop useOldestMember Whether to use the same transport as the oldest member.
- * This will only update once the first oldest member appears. Will not recompute if the oldest member leaves.
  * @prop useOldJwtEndpoint Whether to set forceOldJwtEndpoint on the returned transport and to use the old JWT endpoint.
  * This is used when the connection manager needs to know if it has to use the legacy endpoint which implies a string concatenated rtcBackendIdentity.
  * (which is expected for non sticky event based rtc member events)
@@ -134,23 +107,13 @@ export const createLocalTransport$ = ({
   ownMembershipIdentity,
   client,
   roomId,
-  useOldestMember,
-  forceJwtEndpoint,
-  delayId$,
+  matrixRTCMode,
 }: Props): LocalTransport => {
   const logger = rootLogger.getChild("[LocalTransport]");
-  // The LiveKit transport in use by the oldest RTC membership. `null` when the
-  // oldest member has no such transport.
-  const oldestMemberTransport$ = observerOldestMembership$(
-    scope,
-    memberships$,
-    logger,
-  );
 
   const transportDiscovery = new RtcTransportAutoDiscovery({
     client: client,
     resolvedConfig: Config.get(),
-    wellKnownFetcher: AutoDiscovery.getRawClientConfig.bind(AutoDiscovery),
     logger: logger,
   });
 
@@ -159,40 +122,36 @@ export const createLocalTransport$ = ({
     transportDiscovery.discoverPreferredTransport(),
   );
 
-  const preferredConfig$ = customLivekitUrl.value$
-    .pipe(
-      switchMap((customUrl) => {
-        if (customUrl) {
-          return of({
-            type: "livekit",
-            livekit_service_url: customUrl,
-          } as LivekitTransportConfig);
-        } else {
-          return discoveredTransport$;
-        }
-      }),
-    )
-    .pipe(
-      map((config) => {
-        if (!config) {
-          // Bubbled up from the preferredConfig$ observable.
-          throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
-        }
-        return config;
-      }),
-      distinctUntilChanged(areLivekitTransportsEqual),
-    );
+  const preferredConfig$ = customLivekitUrl.value$.pipe(
+    switchMap((customUrl) => {
+      if (customUrl) {
+        return of({
+          type: "livekit",
+          livekit_service_url: customUrl,
+        } as LivekitTransportConfig);
+      } else {
+        return discoveredTransport$;
+      }
+    }),
+    map((config) => {
+      if (!config) {
+        // Bubbled up from the preferredConfig$ observable.
+        throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
+      }
+      return config;
+    }),
+    distinctUntilChanged(areLivekitTransportsEqual),
+  );
 
-  const preferredTransport$ = combineLatest([preferredConfig$, delayId$]).pipe(
-    switchMap(async ([transport, delayId]) => {
+  const preferredTransport$ = preferredConfig$.pipe(
+    switchMap(async (transport) => {
       try {
         return await doOpenIdAndJWTFromUrl(
           transport,
-          forceJwtEndpoint,
+          matrixRTCMode,
           ownMembershipIdentity,
           roomId,
           client,
-          delayId ?? undefined,
           logger,
         );
       } catch (e) {
@@ -205,19 +164,6 @@ export const createLocalTransport$ = ({
     }),
   );
 
-  if (useOldestMember) {
-    return observeLocalTransportForOldestMembership(
-      scope,
-      oldestMemberTransport$,
-      preferredTransport$,
-      client,
-      ownMembershipIdentity,
-      roomId,
-      logger,
-    );
-  }
-
-  // --- Multi-SFU mode ---
   // Always publish on and advertise the preferred transport.
   return {
     advertised$: scope.behavior(
@@ -227,65 +173,10 @@ export const createLocalTransport$ = ({
       ),
       null,
     ),
-    active$: scope.behavior(
-      preferredTransport$.pipe(
-        // XXX: WORK AROUND due to a reconnection glitch.
-        // To remove when we have a proper way to refresh the delegation event ID without refreshing
-        // the whole credentials.
-        // We deliberately hide any changes to the SFU config because we
-        // do not want the app to reconnect whenever the JWT
-        // token changes due to us delegating a new delayed event. The
-        // initial SFU config for the transport is all the app needs.
-        distinctUntilChanged((prev, next) =>
-          areLivekitTransportsEqual(prev.transport, next.transport),
-        ),
-      ),
-      null,
-    ),
+    active$: scope.behavior(preferredTransport$, null),
   };
 };
 
-/**
- * Observes the oldest member in the room and returns the transport that it uses if it is a livekit transport.
- * @param scope - The observable scope.
- * @param memberships$ - The observable of the call's memberships.'
- */
-function observerOldestMembership$(
-  scope: ObservableScope,
-  memberships$: Behavior<Epoch<CallMembership[]>>,
-  logger: Logger,
-): Behavior<LivekitTransportConfig | null> {
-  return scope.behavior<LivekitTransportConfig | null>(
-    memberships$.pipe(
-      map((memberships) => {
-        const oldestMember = memberships.value[0];
-        if (oldestMember === undefined) {
-          logger.info("Oldest member: not found");
-          return null;
-        }
-        const transport = oldestMember.getTransport(oldestMember);
-        if (transport === undefined) {
-          logger.warn(
-            `Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has no transport`,
-          );
-          return null;
-        }
-        if (!isLivekitTransportConfig(transport)) {
-          logger.warn(
-            `Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has invalid transport`,
-          );
-          return null;
-        }
-        logger.info(
-          "Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has valid transport",
-        );
-        return transport;
-      }),
-      distinctUntilChanged(areLivekitTransportsEqual),
-    ),
-  );
-}
-
 /**
  *  Utility to ensure the user can authenticate with the SFU.
  *  We will call `getSFUConfigWithOpenID` once per transport here as it's our
@@ -294,25 +185,19 @@ function observerOldestMembership$(
  *  use we don't want to risk any issues by re-using a token.
  *
  *  @param transport The transport to authenticate with.
- *  @param forceJwtEndpoint Whether to force the JWT endpoint to be used.
+ *  @param matrixRTCMode Whether to force the JWT endpoint to be used.
  *  @param membership The identity of the local member.
  *  @param roomId The room ID to use for the JWT.
  *  @param client The client to use for the OpenID token.
- *  @param delayId The delayId to use for the JWT.
  *
  *  @throws FailToGetOpenIdToken, NoMatrix2AuthorizationService
  */
 async function doOpenIdAndJWTFromUrl(
   transport: LivekitTransportConfig,
-  forceJwtEndpoint: JwtEndpointVersion,
+  matrixRTCMode: MatrixRTCMode,
   membership: CallMembershipIdentityParts,
   roomId: string,
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports" | "getAccessToken"
-  > &
-    OpenIDClientParts,
-  delayId?: string,
+  client: Pick<MatrixClient, "_unstable_getRTCTransports"> & OpenIDClientParts,
   logger?: Logger,
 ): Promise<LocalTransportWithSFUConfig> {
   const sfuConfig = await getSFUConfigWithOpenID(
@@ -320,11 +205,7 @@ async function doOpenIdAndJWTFromUrl(
     membership,
     transport.livekit_service_url,
     roomId,
-    {
-      forceJwtEndpoint: forceJwtEndpoint,
-      delayEndpointBaseUrl: client.baseUrl,
-      delayId,
-    },
+    { matrixRTCMode },
     logger,
   );
   return {
@@ -333,85 +214,6 @@ async function doOpenIdAndJWTFromUrl(
   };
 }
 
-function observeLocalTransportForOldestMembership(
-  scope: ObservableScope,
-  oldestMemberTransport$: Behavior<LivekitTransportConfig | null>,
-  preferredTransport$: Observable<LocalTransportWithSFUConfig>,
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports" | "getAccessToken"
-  > &
-    OpenIDClientParts,
-  ownMembershipIdentity: CallMembershipIdentityParts,
-  roomId: string,
-  logger: Logger,
-): LocalTransport {
-  // Ensure we can authenticate with the SFU.
-  const authenticatedOldestMemberTransport$ = oldestMemberTransport$.pipe(
-    switchMap((transport) => {
-      // Oldest member not available -we are first- (or invalid SFU config).
-      if (transport === null) return of(null);
-
-      // Whenever there is transport change we want to revert
-      // to no transport while we do the authentication.
-      // So do a from(promise) here to be able to startWith(null)
-      return from(
-        doOpenIdAndJWTFromUrl(
-          transport,
-          JwtEndpointVersion.Legacy,
-          ownMembershipIdentity,
-          roomId,
-          client,
-          undefined,
-          logger,
-        ),
-      ).pipe(
-        catchError((e: unknown) => {
-          logger.error(
-            `Failed to authenticate to transport ${transport.livekit_service_url}`,
-            e,
-          );
-          throw mapAuthErrorToUserFriendlyError(e);
-        }),
-        startWith(null),
-      );
-    }),
-  );
-
-  // --- Oldest member mode ---
-  return {
-    // Never update the transport that we advertise in our membership. Just
-    // take the first valid oldest member or preferred transport that we learn
-    // about, and stick with that. This avoids unnecessary SFU hops and room
-    // state changes.
-    advertised$: scope.behavior(
-      merge(
-        authenticatedOldestMemberTransport$.pipe(
-          map((t) => t?.transport ?? null),
-        ),
-        preferredTransport$.pipe(map((t) => t.transport)),
-      ).pipe(
-        first((t) => t !== null),
-        tap((t) =>
-          logger.info(`Advertise transport: ${t.livekit_service_url}`),
-        ),
-      ),
-      null,
-    ),
-    // Publish on the transport used by the oldest member.
-    active$: scope.behavior(
-      authenticatedOldestMemberTransport$.pipe(
-        tap((t) =>
-          logger.info(
-            `Publish on transport: ${t?.transport.livekit_service_url}`,
-          ),
-        ),
-      ),
-      null,
-    ),
-  };
-}
-
 function mapAuthErrorToUserFriendlyError(e: unknown): Error {
   if (
     e instanceof FailToGetOpenIdToken ||

src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.test.ts

@@ -13,7 +13,7 @@ import {
   type MockedObject,
   vi,
 } from "vitest";
-import { type IClientWellKnown, MatrixError } from "matrix-js-sdk";
+import { MatrixError } from "matrix-js-sdk";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
   type LivekitTransportConfig,
@@ -33,9 +33,9 @@ const backendTransport: LivekitTransportConfig = {
   livekit_service_url: "https://backend.example.org",
 };
 
-const wellKnownTransport: LivekitTransportConfig = {
+const configTransport: LivekitTransportConfig = {
   type: "livekit",
-  livekit_service_url: "https://well-known.example.org",
+  livekit_service_url: "https://config.example.org",
 };
 
 function makeClient(): MockedObject<DiscoveryClient> {
@@ -43,7 +43,6 @@ function makeClient(): MockedObject<DiscoveryClient> {
     getDomain: vi.fn().mockReturnValue("example.org"),
     baseUrl: "https://matrix.example.org",
     _unstable_getRTCTransports: vi.fn().mockResolvedValue([]),
-    getAccessToken: vi.fn().mockReturnValue("access_token"),
     getOpenIdToken: vi.fn(),
     getDeviceId: vi.fn(),
   } as unknown as MockedObject<DiscoveryClient>;
@@ -59,12 +58,6 @@ function makeResolvedConfig(livekitServiceUrl?: string): ResolvedConfigOptions {
   } as ResolvedConfigOptions;
 }
 
-function makeWellKnown(rtcFoci?: Transport[]): IClientWellKnown {
-  return {
-    "org.matrix.msc4143.rtc_foci": rtcFoci,
-  } as unknown as IClientWellKnown;
-}
-
 describe("RtcTransportAutoDiscovery", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -75,33 +68,27 @@ describe("RtcTransportAutoDiscovery", () => {
     { transports: [{ type: "not_livekit" }, backendTransport] },
   ];
   it.each(VALID_TEST_CASES)(
-    "prefers backend transport over well-known and app config $transports",
+    "prefers backend transport other app config $transports",
     async ({ transports }) => {
-      // it("prefers backend transport over well-known and app config", async () => {
       const client = makeClient();
       client._unstable_getRTCTransports.mockResolvedValue(transports);
 
-      const wellKnownFetcher = vi
-        .fn<(domain: string) => Promise<IClientWellKnown>>()
-        .mockResolvedValue(makeWellKnown([wellKnownTransport]));
-
       const discovery = new RtcTransportAutoDiscovery({
         client,
-        resolvedConfig: makeResolvedConfig("https://config.example.org"),
-        wellKnownFetcher,
+        resolvedConfig: makeResolvedConfig(configTransport.livekit_service_url),
         logger: rootLogger,
       });
 
-      await expect(
-        discovery.discoverPreferredTransport(),
-      ).resolves.toStrictEqual(backendTransport);
+      const discoveredTransport = await discovery.discoverPreferredTransport();
+
+      expect(discoveredTransport).toStrictEqual(backendTransport);
+      expect(discoveredTransport).not.toStrictEqual(configTransport);
 
       expect(client._unstable_getRTCTransports).toHaveBeenCalledTimes(1);
-      expect(wellKnownFetcher).not.toHaveBeenCalled();
     },
   );
 
-  it("Retries limit_exceeded backend transport over well-known", async () => {
+  it("Retries limit_exceeded backend transport", async () => {
     const client = makeClient();
     client._unstable_getRTCTransports
       .mockRejectedValueOnce(
@@ -116,14 +103,9 @@ describe("RtcTransportAutoDiscovery", () => {
       )
       .mockResolvedValue([backendTransport]);
 
-    const wellKnownFetcher = vi
-      .fn<(domain: string) => Promise<IClientWellKnown>>()
-      .mockResolvedValue(makeWellKnown([wellKnownTransport]));
-
     const discovery = new RtcTransportAutoDiscovery({
       client,
       resolvedConfig: makeResolvedConfig("https://config.example.org"),
-      wellKnownFetcher,
       logger: rootLogger,
     });
 
@@ -132,7 +114,6 @@ describe("RtcTransportAutoDiscovery", () => {
     );
 
     expect(client._unstable_getRTCTransports).toHaveBeenCalledTimes(2);
-    expect(wellKnownFetcher).not.toHaveBeenCalled();
   });
 
   const INVALID_TEST_CASES: Array<{ transports: Transport[] }> = [
@@ -140,91 +121,30 @@ describe("RtcTransportAutoDiscovery", () => {
     { transports: [{ type: "not_livekit" }] },
   ];
   it.each(INVALID_TEST_CASES)(
-    "falls back to well-known when backend has no (valid) livekit transports $transports",
+    "falls back to config when backend has no (valid) livekit transports $transports",
     async ({ transports }) => {
       const client = makeClient();
       client._unstable_getRTCTransports.mockResolvedValue(transports);
 
-      const wellKnownFetcher = vi
-        .fn<(domain: string) => Promise<IClientWellKnown>>()
-        .mockResolvedValue(makeWellKnown([wellKnownTransport]));
-
       const discovery = new RtcTransportAutoDiscovery({
         client,
-        resolvedConfig: makeResolvedConfig("https://config.example.org"),
-        wellKnownFetcher,
+        resolvedConfig: makeResolvedConfig(configTransport.livekit_service_url),
         logger: rootLogger,
       });
 
-      await expect(
-        discovery.discoverPreferredTransport(),
-      ).resolves.toStrictEqual(wellKnownTransport);
-
-      expect(wellKnownFetcher).toHaveBeenCalledWith("example.org");
+      const discoveredTransport = await discovery.discoverPreferredTransport();
+      expect(discoveredTransport).not.toStrictEqual(backendTransport);
+      expect(discoveredTransport).toStrictEqual(configTransport);
     },
   );
 
-  it("skips backend discovery in widget mode and uses well-known", async () => {
-    const client = makeClient();
-    // widget mode is detected by the absence of an access token
-    client.getAccessToken.mockReturnValue(null);
-
-    const wellKnownFetcher = vi
-      .fn<(domain: string) => Promise<IClientWellKnown>>()
-      .mockResolvedValue(makeWellKnown([wellKnownTransport]));
-
-    const discovery = new RtcTransportAutoDiscovery({
-      client,
-      resolvedConfig: makeResolvedConfig("https://config.example.org"),
-      wellKnownFetcher,
-      logger: rootLogger,
-    });
-
-    await expect(discovery.discoverPreferredTransport()).resolves.toStrictEqual(
-      wellKnownTransport,
-    );
-
-    expect(client._unstable_getRTCTransports).not.toHaveBeenCalled();
-    expect(wellKnownFetcher).toHaveBeenCalledWith("example.org");
-  });
-
-  it("falls back to app config when backend fails and well-known has no rtc_foci", async () => {
-    const client = makeClient();
-    client._unstable_getRTCTransports.mockRejectedValue(
-      new MatrixError({ errcode: "M_UNKNOWN" }, 404),
-    );
-
-    const wellKnownFetcher = vi
-      .fn<(domain: string) => Promise<IClientWellKnown>>()
-      .mockResolvedValue({} as IClientWellKnown);
-
-    const discovery = new RtcTransportAutoDiscovery({
-      client,
-      resolvedConfig: makeResolvedConfig("https://config.example.org"),
-      wellKnownFetcher,
-      logger: rootLogger,
-    });
-
-    await expect(discovery.discoverPreferredTransport()).resolves.toStrictEqual(
-      {
-        type: "livekit",
-        livekit_service_url: "https://config.example.org",
-      },
-    );
-  });
-
-  it("returns null when backend, well-known and config are all unavailable", async () => {
+  it("returns null when backend and config are all unavailable", async () => {
     const client = makeClient();
     client._unstable_getRTCTransports.mockResolvedValue([]);
 
-    const wellKnownFetcher = vi
-      .fn<(domain: string) => Promise<IClientWellKnown>>()
-      .mockResolvedValue({} as IClientWellKnown);
-
     const discovery = new RtcTransportAutoDiscovery({
       client,
       resolvedConfig: makeResolvedConfig(undefined),
-      wellKnownFetcher,
       logger: rootLogger,
     });
 

src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.ts

@@ -8,7 +8,7 @@ import {
   isLivekitTransportConfig,
   type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { type IClientWellKnown, type MatrixClient } from "matrix-js-sdk";
+import { type MatrixClient } from "matrix-js-sdk";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 
 import type { ResolvedConfigOptions } from "../../../config/ConfigOptions.ts";
@@ -16,33 +16,27 @@ import { doNetworkOperationWithRetry } from "../../../utils/matrix.ts";
 
 type TransportDiscoveryClient = Pick<
   MatrixClient,
-  "getDomain" | "_unstable_getRTCTransports" | "getAccessToken"
+  "getDomain" | "_unstable_getRTCTransports"
 >;
 
 export interface RtcTransportAutoDiscoveryProps {
   client: TransportDiscoveryClient;
   resolvedConfig: ResolvedConfigOptions;
-  wellKnownFetcher: (domain: string) => Promise<IClientWellKnown>;
   logger: Logger;
 }
 
 export class RtcTransportAutoDiscovery {
   private readonly client: TransportDiscoveryClient;
   private readonly resolvedConfig: ResolvedConfigOptions;
-  private readonly wellKnownFetcher: (
-    domain: string,
-  ) => Promise<IClientWellKnown>;
   private readonly logger: Logger;
 
   public constructor({
     client,
     resolvedConfig,
-    wellKnownFetcher,
     logger,
   }: RtcTransportAutoDiscoveryProps) {
     this.client = client;
     this.resolvedConfig = resolvedConfig;
-    this.wellKnownFetcher = wellKnownFetcher;
     this.logger = logger.getChild("[RtcTransportAutoDiscovery]");
   }
 
@@ -56,21 +50,7 @@ export class RtcTransportAutoDiscovery {
       return backendTransport;
     }
 
-    this.logger.info("No backend transport found, falling back to well-known");
-    // 2) .well-known transports
-    const wellKnownTransport = await this.tryWellKnownTransports();
-    if (wellKnownTransport) {
-      this.logger.info(
-        `Found .well-known transport: ${wellKnownTransport.livekit_service_url}`,
-      );
-      return wellKnownTransport;
-    }
-
-    this.logger.info(
-      "No .well-known transport found, falling back to app config",
-    );
-
-    // 3) app config URL
+    // 2) app config URL
     const configTransport = this.tryConfigTransport();
     if (configTransport) {
       this.logger.info(
@@ -90,72 +70,23 @@ export class RtcTransportAutoDiscovery {
   private async tryBackendTransports(): Promise<LivekitTransportConfig | null> {
     const client = this.client;
     // MSC4143: Attempt to fetch transports from backend.
-    // TODO: Workaround for an issue in the js-sdk RoomWidgetClient that
-    // is not yet implementing _unstable_getRTCTransports properly (via widget API new action).
-    // For now we just skip this call if we are in a widget.
-    // In widget mode the client is a `RoomWidgetClient` which has no access token (it is using the widget API).
-    // Could be removed once the js-sdk is fixed (https://github.com/matrix-org/matrix-js-sdk/issues/5245)
-    const isSPA = !!client.getAccessToken();
-    if (isSPA && "_unstable_getRTCTransports" in client) {
-      this.logger.info("First try to use getRTCTransports end point ...");
-      try {
-        const transportList = await doNetworkOperationWithRetry(async () =>
-          client._unstable_getRTCTransports(),
-        );
-        const first = transportList.find(isLivekitTransportConfig);
-        if (first) {
-          return first;
-        } else {
-          this.logger.info(
-            `No livekit transport found in getRTCTransports end point`,
-            transportList,
-          );
-        }
-      } catch (ex) {
-        this.logger.info(`Failed to use getRTCTransports end point: ${ex}`);
-      }
-    } else {
-      this.logger.debug(`getRTCTransports end point not available`);
-    }
-
-    return null;
-  }
-
-  /**
-   * Fetches the first rtc_foci from the .well-known/matrix/client.
-   * This will not throw errors, but instead just log them and return null if the expected config is not found or malformed.
-   * @private
-   */
-  private async tryWellKnownTransports(): Promise<LivekitTransportConfig | null> {
-    // Legacy MSC4143 (to be removed) WELL_KNOWN: Prioritize the .well-known/matrix/client, if available.
-    const client = this.client;
-    const domain = client.getDomain();
-    if (domain) {
-      // we use AutoDiscovery instead of relying on the MatrixClient having already
-      // been fully configured and started
-
-      const wellKnownFoci = await this.wellKnownFetcher(domain);
-
-      const fociConfig = wellKnownFoci["org.matrix.msc4143.rtc_foci"];
-      if (fociConfig) {
-        if (!Array.isArray(fociConfig)) {
-          this.logger.warn(
-            `org.matrix.msc4143.rtc_foci is not an array in .well-known`,
-          );
-        } else {
-          return fociConfig[0];
-        }
+    this.logger.info("First try to use getRTCTransports end point ...");
+    try {
+      const transportList = await doNetworkOperationWithRetry(async () =>
+        client._unstable_getRTCTransports(),
+      );
+      const first = transportList.find(isLivekitTransportConfig);
+      if (first) {
+        return first;
       } else {
         this.logger.info(
-          `No .well-known "org.matrix.msc4143.rtc_foci" found for ${domain}`,
-          wellKnownFoci,
+          `No livekit transport found in getRTCTransports end point`,
+          transportList,
         );
       }
-    } else {
-      // Should never happen, but just in case
-      this.logger.warn(`No domain configured for client`);
+    } catch (ex) {
+      this.logger.info(`Failed to use getRTCTransports end point: ${ex}`);
     }
-
     return null;
   }
 

src/state/CallViewModel/remoteMembers/Connection.test.ts

@@ -19,14 +19,17 @@ import {
 import {
   type LocalParticipant,
   type RemoteParticipant,
+  type RemoteTrack,
+  type RemoteTrackPublication,
   type Room as LivekitRoom,
   RoomEvent,
+  Track,
   ConnectionState as LivekitConnectionState,
 } from "livekit-client";
 import fetchMock from "fetch-mock";
 import EventEmitter from "events";
 import { type IOpenIDToken } from "matrix-js-sdk";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { logger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 
 import {
@@ -509,6 +512,79 @@ describe("remote participants", () => {
   });
 });
 
+describe("remote track logging", () => {
+  it("logs remote participant and track events on the connection logger", () => {
+    setupTest();
+    const info = vi.fn();
+    const testLogger = {
+      getChild: (): unknown => testLogger,
+      info,
+      debug: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    } as unknown as Logger;
+    new Connection(
+      {
+        client,
+        roomId: ROOM_ID,
+        transport: livekitFocus,
+        scope: testScope,
+        ownMembershipIdentity: ownMemberMock,
+        livekitRoomFactory: () => fakeLivekitRoom,
+      },
+      testLogger,
+    );
+    info.mockClear(); // drop the constructor log line
+
+    const bob = mockRemoteParticipant({
+      identity: "@bob:example.org:DEV111",
+      sid: "PA_bob",
+    });
+    const pub = {
+      kind: "audio",
+      source: "microphone",
+      trackSid: "TR_mic",
+      isMuted: false,
+    } as unknown as RemoteTrackPublication;
+    const messages = (): string[] => info.mock.calls.map((c) => c[0] as string);
+
+    fakeLivekitRoom.emit(RoomEvent.ParticipantConnected, bob);
+    fakeLivekitRoom.emit(
+      RoomEvent.TrackSubscribed,
+      {} as RemoteTrack,
+      pub,
+      bob,
+    );
+    fakeLivekitRoom.emit(RoomEvent.TrackMuted, pub, bob);
+    fakeLivekitRoom.emit(
+      RoomEvent.TrackStreamStateChanged,
+      pub,
+      Track.StreamState.Paused,
+      bob,
+    );
+    expect(messages()).toEqual([
+      "Participant connected: @bob:example.org:DEV111 (PA_bob)",
+      "Subscribed: audio microphone TR_mic of @bob:example.org:DEV111 muted=false",
+      "Muted: audio microphone TR_mic of @bob:example.org:DEV111",
+      "Stream paused: audio microphone TR_mic of @bob:example.org:DEV111",
+    ]);
+
+    // Local mute events are already logged by the Publisher
+    fakeLivekitRoom.emit(RoomEvent.TrackMuted, pub, {
+      ...fakeLocalParticipant,
+      isLocal: true,
+    } as unknown as LocalParticipant);
+    expect(messages().filter((m) => m.startsWith("Muted"))).toHaveLength(1);
+
+    // Listeners are removed when the scope ends
+    testScope.end();
+    fakeLivekitRoom.emit(RoomEvent.ParticipantDisconnected, bob);
+    expect(
+      messages().filter((m) => m.startsWith("Participant disconnected")),
+    ).toHaveLength(0);
+  });
+});
+
 //
 // NOT USED ANYMORE ?
 //

src/state/CallViewModel/remoteMembers/Connection.ts

@@ -13,8 +13,14 @@ import {
 import {
   ConnectionError,
   ConnectionErrorReason,
+  type Participant,
   type RemoteParticipant,
+  type RemoteTrackPublication,
   type Room as LivekitRoom,
+  RoomEvent,
+  type SubscriptionError,
+  type Track,
+  type TrackPublication,
 } from "livekit-client";
 import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, map } from "rxjs";
@@ -36,7 +42,6 @@ import {
   SFURoomCreationRestrictedError,
   UnknownCallError,
 } from "../../../utils/errors.ts";
-import { type JwtEndpointVersion } from "../localMember/LocalTransport.ts";
 
 export interface ConnectionOpts {
   /**
@@ -44,11 +49,6 @@ export interface ConnectionOpts {
    * On top the local transport will send additional data to the jwt server to use delayed event delegation.
    */
   existingSFUConfig?: SFUConfig;
-  /**
-   * For local connections that use the oldest member pattern. here we have not prefetched the sfuConfig
-   * and hence we need to let the connection do the jwt token fetching.
-   */
-  forceJwtEndpoint?: JwtEndpointVersion;
   /** The identity parts to use on this connection */
   ownMembershipIdentity: CallMembershipIdentityParts;
   /** The media transport to connect to. */
@@ -170,6 +170,7 @@ export class Connection {
       // Only tracks remote participants
       connectedParticipantsObserver(this.livekitRoom),
     );
+    this.logRemoteTrackEvents();
 
     scope.onEnd(() => {
       this.logger.info(`Connection scope ended, stopping connection`);
@@ -177,6 +178,87 @@ export class Connection {
     });
   }
 
+  /**
+   * Logs the lifecycle of remote participants and their tracks as seen by
+   * livekit-client, so that rageshakes show what a tile should have been
+   * rendering (published, subscribed, muted, paused) for each remote member.
+   */
+  private logRemoteTrackEvents(): void {
+    const room = this.livekitRoom;
+    const log = this.logger.getChild("[RemoteTracks]");
+    const track = (pub: TrackPublication, p: Participant): string =>
+      `${pub.kind} ${pub.source} ${pub.trackSid} of ${p.identity}`;
+
+    const onParticipantConnected = (p: RemoteParticipant): void =>
+      log.info(`Participant connected: ${p.identity} (${p.sid})`);
+    const onParticipantDisconnected = (p: RemoteParticipant): void =>
+      log.info(`Participant disconnected: ${p.identity} (${p.sid})`);
+    const onTrackPublished = (
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Published: ${track(pub, p)} muted=${pub.isMuted}`);
+    const onTrackUnpublished = (
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Unpublished: ${track(pub, p)}`);
+    const onTrackSubscribed = (
+      _t: Track,
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Subscribed: ${track(pub, p)} muted=${pub.isMuted}`);
+    const onTrackUnsubscribed = (
+      _t: Track,
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Unsubscribed: ${track(pub, p)}`);
+    const onTrackSubscriptionFailed = (
+      trackSid: string,
+      p: RemoteParticipant,
+      reason?: SubscriptionError,
+    ): void =>
+      log.warn(
+        `Subscription failed: ${trackSid} of ${p.identity} reason=${reason}`,
+      );
+    // Mute events also fire for the local participant, which the Publisher
+    // already logs.
+    const onTrackMuted = (pub: TrackPublication, p: Participant): void => {
+      if (!p.isLocal) log.info(`Muted: ${track(pub, p)}`);
+    };
+    const onTrackUnmuted = (pub: TrackPublication, p: Participant): void => {
+      if (!p.isLocal) log.info(`Unmuted: ${track(pub, p)}`);
+    };
+    const onTrackStreamStateChanged = (
+      pub: RemoteTrackPublication,
+      state: Track.StreamState,
+      p: RemoteParticipant,
+    ): void => log.info(`Stream ${state}: ${track(pub, p)}`);
+
+    room
+      .on(RoomEvent.ParticipantConnected, onParticipantConnected)
+      .on(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
+      .on(RoomEvent.TrackPublished, onTrackPublished)
+      .on(RoomEvent.TrackUnpublished, onTrackUnpublished)
+      .on(RoomEvent.TrackSubscribed, onTrackSubscribed)
+      .on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
+      .on(RoomEvent.TrackSubscriptionFailed, onTrackSubscriptionFailed)
+      .on(RoomEvent.TrackMuted, onTrackMuted)
+      .on(RoomEvent.TrackUnmuted, onTrackUnmuted)
+      .on(RoomEvent.TrackStreamStateChanged, onTrackStreamStateChanged);
+    this.scope.onEnd(() => {
+      room
+        .off(RoomEvent.ParticipantConnected, onParticipantConnected)
+        .off(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
+        .off(RoomEvent.TrackPublished, onTrackPublished)
+        .off(RoomEvent.TrackUnpublished, onTrackUnpublished)
+        .off(RoomEvent.TrackSubscribed, onTrackSubscribed)
+        .off(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
+        .off(RoomEvent.TrackSubscriptionFailed, onTrackSubscriptionFailed)
+        .off(RoomEvent.TrackMuted, onTrackMuted)
+        .off(RoomEvent.TrackUnmuted, onTrackUnmuted)
+        .off(RoomEvent.TrackStreamStateChanged, onTrackStreamStateChanged);
+    });
+  }
+
   /**
    * Starts the connection.
    *

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

@@ -12,7 +12,7 @@ import {
   type E2EEManagerOptions,
   type BaseE2EEManager,
 } from "livekit-client";
-import { type Logger } from "matrix-js-sdk/lib/logger";
+import { logger, type Logger } from "matrix-js-sdk/lib/logger";
 // imported as inline to support worker when loaded from a cdn (cross domain)
 import E2EEWorker from "livekit-client/e2ee-worker?worker&inline";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
@@ -27,7 +27,18 @@ import type {
 import type { MediaDevices } from "../../MediaDevices.ts";
 import type { Behavior } from "../../Behavior.ts";
 import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
-import { defaultLiveKitOptions } from "../../../livekit/options.ts";
+import { getLiveKitOptions } from "../../../livekit/options.ts";
+import {
+  advancedCamera,
+  cameraResolution,
+  cameraFramerate,
+  cameraBitrate,
+  cameraCodec,
+  parseResolution,
+  echoCancellationSetting,
+  noiseSuppressionSetting,
+  autoGainControlSetting,
+} from "../../../settings/settings.ts";
 
 // TODO evaluate if this should be done like the Publisher Factory
 export interface ConnectionFactory {
@@ -53,8 +64,6 @@ export class ECConnectionFactory implements ConnectionFactory {
    * @param livekitKeyProvider - Optional key provider for end-to-end encryption.
    * @param controlledAudioDevices - Option to indicate whether audio output device is controlled externally (native mobile app).
    * @param livekitRoomFactory - Optional factory function (for testing) to create LivekitRoom instances. If not provided, a default factory is used.
-   * @param echoCancellation - Whether to enable echo cancellation for audio capture.
-   * @param noiseSuppression - Whether to enable noise suppression for audio capture.
    */
   public constructor(
     private client: OpenIDClientParts,
@@ -64,25 +73,22 @@ export class ECConnectionFactory implements ConnectionFactory {
     livekitKeyProvider: BaseKeyProvider | undefined,
     private controlledAudioDevices: boolean,
     livekitRoomFactory?: () => LivekitRoom,
-    echoCancellation: boolean = true,
-    noiseSuppression: boolean = true,
   ) {
-    const defaultFactory = (): LivekitRoom =>
-      new LivekitRoom(
-        generateRoomOption({
-          devices: this.devices,
-          processorState: this.processorState$.value,
-          e2eeLivekitOptions: livekitKeyProvider && {
-            keyProvider: livekitKeyProvider,
-            // It's important that every room use a separate E2EE worker.
-            // They get confused if given streams from multiple rooms.
-            worker: new E2EEWorker(),
-          },
-          controlledAudioDevices: this.controlledAudioDevices,
-          echoCancellation,
-          noiseSuppression,
-        }),
-      );
+    const defaultFactory = (): LivekitRoom => {
+      const roomOptions = generateRoomOption({
+        devices: this.devices,
+        processorState: this.processorState$.value,
+        e2eeLivekitOptions: livekitKeyProvider && {
+          keyProvider: livekitKeyProvider,
+          // It's important that every room use a separate E2EE worker.
+          // They get confused if given streams from multiple rooms.
+          worker: new E2EEWorker(),
+        },
+        controlledAudioDevices: this.controlledAudioDevices,
+      });
+      logger.info("[ECConnectionFactory] livekit room options: ", roomOptions);
+      return new LivekitRoom(roomOptions);
+    };
     this.livekitRoomFactory = livekitRoomFactory ?? defaultFactory;
   }
 
@@ -119,14 +125,13 @@ export class ECConnectionFactory implements ConnectionFactory {
 
 /**
  *  Generate the initial LiveKit RoomOptions based on the current media devices and processor state.
+ *  Reads audio processing and camera quality settings directly from Settings.
  */
 function generateRoomOption({
   devices,
   processorState,
   e2eeLivekitOptions,
   controlledAudioDevices,
-  echoCancellation,
-  noiseSuppression,
 }: {
   devices: MediaDevices;
   processorState: ProcessorState;
@@ -135,21 +140,44 @@ function generateRoomOption({
     | { e2eeManager: BaseE2EEManager }
     | undefined;
   controlledAudioDevices: boolean;
-  echoCancellation: boolean;
-  noiseSuppression: boolean;
 }): RoomOptions {
+  const liveKitOptions = getLiveKitOptions();
+
+  // Apply advanced camera settings if enabled
+  let videoCaptureDefaults = {
+    ...liveKitOptions.videoCaptureDefaults,
+    deviceId: devices.videoInput.selected$.value?.id,
+    processor: processorState.processor,
+  };
+  let publishDefaults = liveKitOptions.publishDefaults;
+
+  if (advancedCamera.getValue()) {
+    const { width, height } = parseResolution(cameraResolution.getValue());
+    const fps = cameraFramerate.getValue();
+    const bps = cameraBitrate.getValue();
+    const codec = cameraCodec.getValue();
+
+    videoCaptureDefaults = {
+      ...videoCaptureDefaults,
+      resolution: { width, height, frameRate: fps },
+    };
+    publishDefaults = {
+      ...publishDefaults,
+      videoEncoding: { maxBitrate: bps, maxFramerate: fps },
+      videoCodec: codec,
+    };
+  }
+
   return {
-    ...defaultLiveKitOptions,
-    videoCaptureDefaults: {
-      ...defaultLiveKitOptions.videoCaptureDefaults,
-      deviceId: devices.videoInput.selected$.value?.id,
-      processor: processorState.processor,
-    },
+    ...liveKitOptions,
+    videoCaptureDefaults,
+    publishDefaults,
     audioCaptureDefaults: {
-      ...defaultLiveKitOptions.audioCaptureDefaults,
+      ...liveKitOptions.audioCaptureDefaults,
       deviceId: devices.audioInput.selected$.value?.id,
-      echoCancellation,
-      noiseSuppression,
+      echoCancellation: echoCancellationSetting.getValue(),
+      noiseSuppression: noiseSuppressionSetting.getValue(),
+      autoGainControl: autoGainControlSetting.getValue(),
     },
     audioOutput: {
       // When using controlled audio devices, we don't want to set the

src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts

@@ -14,7 +14,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { Epoch, mapEpoch, ObservableScope } from "../../ObservableScope.ts";
 import {
   createConnectionManager$,
-  type ConnectionManagerData,
+  ConnectionManagerData,
 } from "./ConnectionManager.ts";
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import { type Connection } from "./Connection.ts";
@@ -203,6 +203,24 @@ describe("connections$ stream", () => {
   });
 });
 
+describe("ConnectionManagerData", () => {
+  test("warns when a second connection to the same URL is merged", () => {
+    const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
+    const data = new ConnectionManagerData(logger);
+    const connection = { transport: TRANSPORT_1 } as unknown as Connection;
+    const p = (identity: string): RemoteParticipant =>
+      ({ identity }) as unknown as RemoteParticipant;
+    data.add(connection, [p("a")]);
+    data.add({ ...connection } as Connection, [p("b")]);
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining(
+        "second connection to https://lk.example.org: existing [a], adding [b]",
+      ),
+    );
+    expect(data.getParticipantsForTransport(TRANSPORT_1)).toHaveLength(2);
+  });
+});
+
 describe("connectionManagerData$ stream", () => {
   // Used in test to control fake connections' remoteParticipants$ streams
   let fakeRemoteParticipantsStreams: Map<string, Behavior<RemoteParticipant[]>>;

src/state/CallViewModel/remoteMembers/ConnectionManager.ts

@@ -30,7 +30,7 @@ export class ConnectionManagerData {
     { connection: Connection; participants: RemoteParticipant[] }
   > = new Map();
 
-  public constructor() {}
+  public constructor(private readonly logger?: Logger) {}
 
   public add(connection: Connection, participants: RemoteParticipant[]): void {
     const key = this.getKey(connection.transport);
@@ -38,6 +38,11 @@ export class ConnectionManagerData {
     if (!existing) {
       this.store.set(key, { connection, participants });
     } else {
+      // Transports are deduplicated by URL upstream, so this should never
+      // happen; if it does, members may be matched against the wrong room.
+      this.logger?.warn(
+        `Merging participants from a second connection to ${key}: existing [${existing.participants.map((p) => p.identity).join(", ")}], adding [${participants.map((p) => p.identity).join(", ")}]`,
+      );
       existing.participants.push(...participants);
     }
   }
@@ -239,7 +244,7 @@ export function createConnectionManager$({
                 lists.reduce((data, { connection, participants }) => {
                   data.add(connection, participants);
                   return data;
-                }, new ConnectionManagerData()),
+                }, new ConnectionManagerData(logger)),
                 epoch,
               ),
           ),

src/state/CallViewModel/remoteMembers/ECConnectionFactory.test.ts

@@ -22,6 +22,16 @@ import {
 } from "../../../utils/test.ts";
 import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
 import { constant } from "../../Behavior";
+import {
+  echoCancellationSetting,
+  noiseSuppressionSetting,
+  autoGainControlSetting,
+  advancedCamera,
+  cameraResolution,
+  cameraFramerate,
+  cameraBitrate,
+  cameraCodec,
+} from "../../../settings/settings.ts";
 
 // At the top of your test file, after imports
 vi.mock("livekit-client", async (importOriginal) => {
@@ -58,11 +68,14 @@ describe("ECConnectionFactory - Audio inputs options", () => {
     { echo: false, noise: true },
     { echo: false, noise: false },
   ])(
-    "it sets echoCancellation=$echo and noiseSuppression=$noise based on constructor parameters",
+    "it sets echoCancellation=$echo and noiseSuppression=$noise based on settings",
     ({ echo, noise }) => {
-      // test("it sets echoCancellation and noiseSuppression based on constructor parameters", () => {
       const RoomConstructor = vi.mocked(LivekitRoom);
 
+      // Set audio processing settings
+      echoCancellationSetting.setValue(echo);
+      noiseSuppressionSetting.setValue(noise);
+
       const ecConnectionFactory = new ECConnectionFactory(
         mockClient,
         "!roomid:example.org",
@@ -73,9 +86,6 @@ describe("ECConnectionFactory - Audio inputs options", () => {
         }),
         undefined,
         false,
-        undefined,
-        echo,
-        noise,
       );
       ecConnectionFactory.createConnection(
         testScope,
@@ -101,9 +111,13 @@ describe("ECConnectionFactory - ControlledAudioDevice", () => {
   test.each([{ controlled: true }, { controlled: false }])(
     "it sets controlledAudioDevice=$controlled then uses deviceId accordingly",
     ({ controlled }) => {
-      // test("it sets echoCancellation and noiseSuppression based on constructor parameters", () => {
       const RoomConstructor = vi.mocked(LivekitRoom);
 
+      // Explicitly set audio settings so the test doesn't depend on defaults
+      echoCancellationSetting.setValue(true);
+      noiseSuppressionSetting.setValue(true);
+      autoGainControlSetting.setValue(true);
+
       const ecConnectionFactory = new ECConnectionFactory(
         mockClient,
         "!roomid:example.org",
@@ -120,9 +134,6 @@ describe("ECConnectionFactory - ControlledAudioDevice", () => {
         }),
         undefined,
         controlled,
-        undefined,
-        false,
-        false,
       );
       ecConnectionFactory.createConnection(
         testScope,
@@ -143,6 +154,114 @@ describe("ECConnectionFactory - ControlledAudioDevice", () => {
   );
 });
 
+describe("ECConnectionFactory - Camera quality settings", () => {
+  test("it uses default video options when advancedCamera is disabled", () => {
+    const RoomConstructor = vi.mocked(LivekitRoom);
+    advancedCamera.setValue(false);
+
+    const ecConnectionFactory = new ECConnectionFactory(
+      mockClient,
+      "!roomid:example.org",
+      mockMediaDevices({}),
+      new BehaviorSubject<ProcessorState>({
+        supported: true,
+        processor: undefined,
+      }),
+      undefined,
+      false,
+    );
+    ecConnectionFactory.createConnection(
+      testScope,
+      exampleTransport,
+      ownMemberMock,
+      logger,
+    );
+
+    // publishDefaults should use config defaults (vp8), not custom settings
+    expect(RoomConstructor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        publishDefaults: expect.objectContaining({
+          videoCodec: "vp8",
+        }),
+      }),
+    );
+  });
+
+  test("it applies custom camera resolution, encoding, and codec when advancedCamera is enabled", () => {
+    const RoomConstructor = vi.mocked(LivekitRoom);
+
+    advancedCamera.setValue(true);
+    cameraResolution.setValue("1920x1080");
+    cameraFramerate.setValue(60);
+    cameraBitrate.setValue(4_000_000);
+    cameraCodec.setValue("vp9");
+
+    const ecConnectionFactory = new ECConnectionFactory(
+      mockClient,
+      "!roomid:example.org",
+      mockMediaDevices({}),
+      new BehaviorSubject<ProcessorState>({
+        supported: true,
+        processor: undefined,
+      }),
+      undefined,
+      false,
+    );
+    ecConnectionFactory.createConnection(
+      testScope,
+      exampleTransport,
+      ownMemberMock,
+      logger,
+    );
+
+    expect(RoomConstructor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        videoCaptureDefaults: expect.objectContaining({
+          resolution: { width: 1920, height: 1080, frameRate: 60 },
+        }),
+        publishDefaults: expect.objectContaining({
+          videoEncoding: { maxBitrate: 4_000_000, maxFramerate: 60 },
+          videoCodec: "vp9",
+        }),
+      }),
+    );
+  });
+
+  test("it applies autoGainControl from settings", () => {
+    const RoomConstructor = vi.mocked(LivekitRoom);
+
+    autoGainControlSetting.setValue(false);
+    echoCancellationSetting.setValue(true);
+    noiseSuppressionSetting.setValue(true);
+
+    const ecConnectionFactory = new ECConnectionFactory(
+      mockClient,
+      "!roomid:example.org",
+      mockMediaDevices({}),
+      new BehaviorSubject<ProcessorState>({
+        supported: true,
+        processor: undefined,
+      }),
+      undefined,
+      false,
+    );
+    ecConnectionFactory.createConnection(
+      testScope,
+      exampleTransport,
+      ownMemberMock,
+      logger,
+    );
+
+    expect(RoomConstructor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        audioCaptureDefaults: expect.objectContaining({
+          autoGainControl: false,
+        }),
+      }),
+    );
+  });
+});
+
 afterEach(() => {
   testScope.end();
   fetchMock.reset();

src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts

@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, test, expect, beforeEach, afterEach } from "vitest";
+import { describe, test, expect, beforeEach, afterEach, vi } from "vitest";
+import { logger } from "matrix-js-sdk/lib/logger";
 import {
   type CallMembership,
   type LivekitTransport,
@@ -77,6 +78,7 @@ function epochMeWith$<T, U>(
 }
 
 test("should signal participant not yet connected to livekit", async () => {
+  const info = vi.spyOn(logger, "info");
   const mockedMemberships$ = new BehaviorSubject([bobMembership]);
   const mockConnectionManagerData$ = new BehaviorSubject(
     new ConnectionManagerData(),
@@ -108,6 +110,9 @@ test("should signal participant not yet connected to livekit", async () => {
       return true;
     },
   );
+  expect(info).toHaveBeenCalledWith(
+    "[RemoteMatrixLivekitMembers] @bob:example.org:DEV000: LiveKit participant missing on no connection",
+  );
 });
 
 // Helper to create epoch'ed memberships$ and membershipsWithTransport$ from memberships observable.

src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts

@@ -11,6 +11,7 @@ import {
   type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { combineLatest, filter, map } from "rxjs";
+import { logger } from "matrix-js-sdk/lib/logger";
 
 import { type Behavior } from "../../Behavior";
 import { type IConnectionManager } from "./ConnectionManager";
@@ -110,13 +111,17 @@ export function createRemoteMatrixLivekitMembers$({
             const participants = transport
               ? managerData.getParticipantsForTransport(transport)
               : [];
-            const participant =
-              participants.find(
-                (p) => p.identity == membership.rtcBackendIdentity,
-              ) ?? null;
+            const matches = participants.filter(
+              (p) => p.identity == membership.rtcBackendIdentity,
+            );
+            const participant = matches[0] ?? null;
             const connection = transport
               ? managerData.getConnectionForTransport(transport)
               : null;
+            if (matches.length > 1)
+              logger.warn(
+                `[RemoteMatrixLivekitMembers] ${membership.rtcBackendIdentity}: ${matches.length} LiveKit participants match (sids ${matches.map((p) => p.sid).join(", ")}), using ${participant?.sid}`,
+              );
 
             yield {
               // This could just be the backend identity without the other keys.
@@ -133,8 +138,16 @@ export function createRemoteMatrixLivekitMembers$({
           }
         },
         // Each update where the key of the generator array do not change will result in updates to the `data$` behavior.
-        (scope, data$, userId, _deviceId, _memberId, _rtcBackendIdentity) => {
+        (scope, data$, userId, _deviceId, _memberId, rtcBackendIdentity) => {
           const { participant$, ...rest } = scope.splitBehavior(data$);
+          // Log whether the member could be matched to a LiveKit participant,
+          // since a tile shows "waiting for media" for as long as it cannot.
+          participant$.pipe(scope.bind()).subscribe((p) => {
+            const url = data$.value.connection?.transport.livekit_service_url;
+            logger.info(
+              `[RemoteMatrixLivekitMembers] ${rtcBackendIdentity}: LiveKit participant ${p ? `matched (${p.sid})` : "missing"} on ${url ?? "no connection"}`,
+            );
+          });
           // will only get called once per backend identity.
           // updates to data$ and as a result to displayName$ and mxcAvatarUrl$ are more frequent.
           return {

src/state/CallViewModelWidget.test.ts

@@ -35,11 +35,7 @@ vi.mock("../widget", () => ({
   },
 }));
 
-it.each([
-  [MatrixRTCMode.Legacy],
-  [MatrixRTCMode.Compatibility],
-  [MatrixRTCMode.Matrix_2_0],
-])(
+it.each([[MatrixRTCMode.Compatibility], [MatrixRTCMode.Matrix_2_0]])(
   "expect leave when ElementWidgetActions.HangupCall is called (%s mode)",
   async (mode) => {
     const pr = Promise.withResolvers<string>();

src/state/ObservableScope.test.ts

@@ -16,7 +16,7 @@ import {
   ObservableScope,
   trackEpoch,
 } from "./ObservableScope";
-import { withTestScheduler } from "../utils/test";
+import { testScope, withTestScheduler } from "../utils/test";
 
 describe("Epoch", () => {
   it("should map the value correctly", () => {
@@ -87,7 +87,7 @@ describe("Epoch", () => {
   });
 
   it("behavior test", () => {
-    const scope = new ObservableScope();
+    const scope = testScope();
     const s$ = new Subject();
     const behavior$ = scope.behavior(s$, 0);
     behavior$.subscribe((value) => {
@@ -115,7 +115,7 @@ describe("Reconcile", () => {
 
   it("should wait clean up before processing next", async () => {
     vi.useFakeTimers();
-    const scope = new ObservableScope();
+    const scope = testScope();
     const behavior$ = new BehaviorSubject<number>(0);
 
     const setup = vi.fn().mockImplementation(async () => await sleep(100));
@@ -149,7 +149,7 @@ describe("Reconcile", () => {
 
   it("should skip intermediates values that are not setup", async () => {
     vi.useFakeTimers();
-    const scope = new ObservableScope();
+    const scope = testScope();
     const behavior$ = new BehaviorSubject<number>(0);
 
     const setup = vi
@@ -194,7 +194,7 @@ describe("Reconcile", () => {
 
   it("should wait for setup to complete before starting cleanup", async () => {
     vi.useFakeTimers();
-    const scope = new ObservableScope();
+    const scope = testScope();
     const behavior$ = new BehaviorSubject<number>(0);
 
     const setup = vi
@@ -237,3 +237,57 @@ describe("Reconcile", () => {
     expect(setup).toHaveBeenCalledWith(1);
   });
 });
+
+describe("behavior", () => {
+  it("warns with the tag and nesting depth, logging each new depth once", () => {
+    const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
+    const scope = testScope();
+    const source$ = new Subject<number>();
+    const behavior$ = scope.behavior(source$, 0, "tagged");
+    // Re-enter once on value 1 (depth 2), then a nested re-entry on value 2
+    // (depth 3), which is the shape needed to strand a middle subscriber.
+    behavior$.subscribe((v) => {
+      if (v === 1) source$.next(2);
+    });
+    behavior$.subscribe((v) => {
+      if (v === 2) source$.next(3);
+    });
+    const seen: number[] = [];
+    behavior$.subscribe((v) => seen.push(v));
+
+    source$.next(1);
+
+    const messages = warn.mock.calls.map((c) => c[0] as string);
+    expect(messages).toEqual([
+      expect.stringContaining("Behavior (tagged) re-entered at depth 2"),
+      expect.stringContaining("Behavior (tagged) re-entered at depth 3"),
+    ]);
+    warn.mock.calls.forEach((c) => expect(c[1]).toEqual(expect.any(String)));
+    // The behavior settles on the newest value while the last subscriber is
+    // left stranded on the oldest.
+    expect(behavior$.value).toBe(3);
+    expect(seen.at(-1)).toBe(1);
+  });
+
+  it("warns when the scope is ended while a behavior is mid-delivery", () => {
+    const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
+    const scope = new ObservableScope();
+    const source$ = new Subject<number>();
+    const behavior$ = scope.behavior(source$, 0);
+    behavior$.subscribe((v) => {
+      if (v === 1) scope.end();
+    });
+    // A derived behavior is bound to the scope, so ending the scope
+    // mid-delivery unsubscribes it before the value reaches it.
+    const derived$ = scope.behavior(behavior$);
+
+    source$.next(1);
+
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining("Scope ended while 1 of its behaviors"),
+      expect.any(String),
+    );
+    expect(behavior$.value).toBe(1);
+    expect(derived$.value).toBe(0);
+  });
+});

src/state/ObservableScope.ts

@@ -20,6 +20,8 @@ import {
   takeUntil,
 } from "rxjs";
 
+import { logger } from "matrix-js-sdk/lib/logger";
+
 import { type Behavior } from "./Behavior";
 
 type MonoTypeOperator = <T>(o: Observable<T>) => Observable<T>;
@@ -34,6 +36,12 @@ const nothing = Symbol("nothing");
  * A scope which limits the execution lifetime of its bound Observables.
  */
 export class ObservableScope {
+  /**
+   * Number of this scope's behaviors currently mid-delivery. Used to detect a
+   * scope being torn down synchronously from within one of its own emissions.
+   */
+  private delivering = 0;
+
   private readonly ended$ = new BehaviorSubject(false);
 
   private readonly bindImpl: MonoTypeOperator = takeUntil(
@@ -66,6 +74,9 @@ export class ObservableScope {
   public behavior<T>(
     setValue$: Observable<T>,
     initialValue: T | typeof nothing = nothing,
+    // An optional label used only in the re-entrancy warning below, so that a
+    // torn behavior can be identified from a rageshake.
+    tag?: string,
   ): Behavior<T> {
     const subject$ = new BehaviorSubject(initialValue);
     // Push values from the Observable into the BehaviorSubject.
@@ -73,11 +84,37 @@ export class ObservableScope {
     // they will no longer re-emit their current value upon subscription. We want
     // to support Observables that complete (for example `of({})`), so we have to
     // take care to not propagate the completion event.
+    // If a subscriber synchronously causes this same behavior to emit again,
+    // rxjs delivers the nested value to every subscriber first and then
+    // resumes delivering the outer (older) value to the remaining subscribers,
+    // leaving them permanently out of sync with the others. A single such
+    // re-entry can only strand a contiguous run of subscribers; stranding a
+    // subscriber in the middle of the list needs a nested (deeper) re-entry, so
+    // we report the depth and log each new depth (with a stack trace) rather
+    // than only the first occurrence, to make a nested re-entry visible.
+    let depth = 0;
+    let maxReportedDepth = 1;
     setValue$.pipe(this.bind(), distinctUntilChanged()).subscribe({
-      next(value) {
-        subject$.next(value);
+      next: (value) => {
+        if (depth > 0 && depth + 1 > maxReportedDepth) {
+          maxReportedDepth = depth + 1;
+          logger.warn(
+            `Behavior${tag ? ` (${tag})` : ""} re-entered at depth ${
+              depth + 1
+            } while delivering a value; later subscribers will be left with a stale value`,
+            new Error().stack,
+          );
+        }
+        depth++;
+        this.delivering++;
+        try {
+          subject$.next(value);
+        } finally {
+          depth--;
+          this.delivering--;
+        }
       },
-      error(err: unknown) {
+      error: (err: unknown) => {
         subject$.error(err);
       },
     });
@@ -90,6 +127,11 @@ export class ObservableScope {
    * Ends the scope, causing any bound Observables to complete.
    */
   public end(): void {
+    if (this.delivering > 0)
+      logger.warn(
+        `Scope ended while ${this.delivering} of its behaviors were still delivering a value; later subscribers will be left with a stale value`,
+        new Error().stack,
+      );
     this.ended$.next(true);
   }
 
@@ -171,7 +213,11 @@ export class ObservableScope {
     return Object.fromEntries(
       Object.keys(input$.value).map((key) => [
         `${key}$`,
-        this.behavior(input$.pipe(map((input) => input[key as keyof T]))),
+        this.behavior(
+          input$.pipe(map((input) => input[key as keyof T])),
+          nothing,
+          key,
+        ),
       ]),
     ) as SplitBehavior<T>;
   }

src/state/SessionBehaviors.test.ts

@@ -0,0 +1,41 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it, vi } from "vitest";
+import { MatrixRTCSessionEvent } from "matrix-js-sdk/lib/matrixrtc";
+import { EventEmitter } from "events";
+
+import { createKeyRotationSuppressed$ } from "./SessionBehaviors";
+import { testScope } from "../utils/test";
+
+describe("SessionBehaviors", () => {
+  describe("createKeyRotationSuppressed$", () => {
+    it("emits initial value from isKeyRotationSuppressed and updates when KeyRotationSuppressedChanged event is emitted", () => {
+      const scope = testScope();
+      const emitter = new EventEmitter();
+      const mockSession = Object.assign(emitter, {
+        on: vi.fn(),
+        off: vi.fn(),
+        isKeyRotationSuppressed: false,
+      });
+
+      const keyRotationSuppressed$ = createKeyRotationSuppressed$(
+        scope,
+        mockSession as any,
+      );
+
+      expect(keyRotationSuppressed$.value).toBe(false);
+      emitter.emit(MatrixRTCSessionEvent.KeyRotationSuppressedChanged, true);
+
+      expect(keyRotationSuppressed$.value).toBe(true);
+
+      emitter.emit(MatrixRTCSessionEvent.KeyRotationSuppressedChanged, false);
+
+      expect(keyRotationSuppressed$.value).toBe(false);
+    });
+  });
+});

src/state/SessionBehaviors.ts

@@ -88,3 +88,22 @@ export const createMemberships$ = (
     new Epoch(matrixRTCSession.memberships),
   );
 };
+
+/**
+ * Whether the session has grown large enough that MatrixRTC has stopped rotating the media
+ * encryption key. While this is true the key in use is still shared with new joiners, but no new
+ * key is generated when someone joins or leaves.
+ */
+export const createKeyRotationSuppressed$ = (
+  scope: ObservableScope,
+  matrixRTCSession: MatrixRTCSession,
+): Behavior<boolean> => {
+  return scope.behavior(
+    fromEvent(
+      matrixRTCSession,
+      MatrixRTCSessionEvent.KeyRotationSuppressedChanged,
+      (suppressed: boolean) => suppressed,
+    ),
+    matrixRTCSession.isKeyRotationSuppressed,
+  );
+};

src/state/layout-types.test.ts

@@ -0,0 +1,74 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { test, expect } from "vitest";
+import {
+  type Alignment,
+  layoutShallowEquals,
+  type Layout,
+} from "./layout-types";
+import {
+  type SpotlightTileViewModel,
+  type GridTileViewModel,
+} from "./TileViewModel";
+import { BehaviorSubject } from "rxjs";
+
+const spotlightTile = {} as unknown as SpotlightTileViewModel;
+const gridTile = {} as unknown as GridTileViewModel;
+const pipAlignment$ = new BehaviorSubject<Alignment>({
+  inline: "end",
+  block: "end",
+});
+
+const spotlightExpanded: Layout = {
+  type: "spotlight-expanded",
+  spotlight: spotlightTile,
+  pipAlignment$,
+};
+
+const spotlightPortrait: Layout = {
+  type: "spotlight-portrait",
+  spotlight: spotlightTile,
+  grid: [gridTile],
+  setVisibleTiles: () => {},
+};
+
+test("layoutShallowEquals considers a layout to be equal to its shallow clone", () =>
+  expect(layoutShallowEquals(spotlightExpanded, { ...spotlightExpanded })).toBe(
+    true,
+  ));
+
+test("layoutShallowEquals detects a missing key", () => {
+  expect(
+    layoutShallowEquals(spotlightExpanded, {
+      ...spotlightExpanded,
+      pip: gridTile,
+    }),
+  ).toBe(false);
+  expect(
+    layoutShallowEquals(
+      { ...spotlightExpanded, pip: gridTile },
+      spotlightExpanded,
+    ),
+  ).toBe(false);
+});
+
+test("layoutShallowEquals considers grid arrays with equal contents to be equal", () =>
+  expect(
+    layoutShallowEquals(spotlightPortrait, {
+      ...spotlightPortrait,
+      grid: [...spotlightPortrait.grid],
+    }),
+  ).toBe(true));
+
+test("layoutShallowEquals detects grid arrays with different contents", () =>
+  expect(
+    layoutShallowEquals(spotlightPortrait, {
+      ...spotlightPortrait,
+      grid: [...spotlightPortrait.grid, gridTile],
+    }),
+  ).toBe(false));

src/state/layout-types.ts

@@ -16,6 +16,7 @@ import {
   type SpotlightTileViewModel,
 } from "./TileViewModel.ts";
 import { type Behavior } from "./Behavior.ts";
+import { shallowEquals as arrayShallowEquals } from "../utils/array.ts";
 
 export interface GridLayoutMedia {
   type: "grid";
@@ -140,3 +141,30 @@ export type Layout =
   | OneOnOneDesktopLayout
   | OneOnOneMobileLayout
   | PipLayout;
+
+/**
+ * Tests whether the top-level properties and array elements of layout `a` are
+ * equal to those of layout `b`. Useful for deduping redundant layout updates.
+ */
+export function layoutShallowEquals(a: Layout, b: Layout): boolean {
+  // If a and b have the same number of keys and every key in a is also in b,
+  // then they have the same keys.
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+
+  for (const key of aKeys) {
+    if (!(key in b)) return false;
+
+    // Now check that they have the same values.
+    const aValue = (a as any)[key];
+    const bValue = (b as any)[key];
+    if (Array.isArray(aValue) && Array.isArray(bValue)) {
+      // Special case for arrays so we can detect when the grid tiles arrays are
+      // essentially the same.
+      if (!arrayShallowEquals(aValue, bValue)) return false;
+    } else if (aValue !== bValue) return false;
+  }
+
+  return true;
+}

src/state/media/RemoteUserMediaViewModel.ts

@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type RemoteParticipant } from "livekit-client";
 import { combineLatest, map, of, switchMap } from "rxjs";
+import { logger } from "matrix-js-sdk/lib/logger";
 
 import { type Behavior } from "../Behavior";
 import { createVolumeControls, type VolumeControls } from "../VolumeControls";
@@ -45,6 +46,20 @@ export function createRemoteUserMedia(
     statsType: "inbound-rtp",
   });
 
+  const waitingForMedia$ = scope.behavior(
+    combineLatest(
+      [inputs.livekitRoom$, inputs.participant$],
+      (livekitRoom, participant) =>
+        // If livekitRoom is undefined, the user is not attempting to publish on
+        // any transport and so we shouldn't expect a participant. (They might
+        // be a subscribe-only bot for example.)
+        livekitRoom !== undefined && participant === null,
+    ),
+  );
+  waitingForMedia$.pipe(scope.bind()).subscribe((waiting) => {
+    logger.info(`[RemoteUserMedia ${inputs.id}] waitingForMedia=${waiting}`);
+  });
+
   return {
     ...baseUserMedia,
     ...createVolumeControls(scope, {
@@ -68,15 +83,6 @@ export function createRemoteUserMedia(
         ),
       ),
     ),
-    waitingForMedia$: scope.behavior(
-      combineLatest(
-        [inputs.livekitRoom$, inputs.participant$],
-        (livekitRoom, participant) =>
-          // If livekitRoom is undefined, the user is not attempting to publish on
-          // any transport and so we shouldn't expect a participant. (They might
-          // be a subscribe-only bot for example.)
-          livekitRoom !== undefined && participant === null,
-      ),
-    ),
+    waitingForMedia$,
   };
 }

src/state/media/UserMediaViewModel.ts

@@ -33,7 +33,6 @@ import { type RemoteUserMediaViewModel } from "./RemoteUserMediaViewModel";
 import { type ObservableScope } from "../ObservableScope";
 import { showConnectionStats } from "../../settings/settings";
 import { observeRtpStreamStats$ } from "./observeRtpStreamStats";
-import { videoFit$, videoSizeFromParticipant$ } from "../../utils/videoFit.ts";
 
 /**
  * A participant's user media (i.e. their microphone and camera feed).
@@ -47,7 +46,6 @@ export interface BaseUserMediaViewModel extends BaseMemberMediaViewModel {
   speaking$: Behavior<boolean>;
   audioEnabled$: Behavior<boolean>;
   videoEnabled$: Behavior<boolean>;
-  videoFit$: Behavior<"cover" | "contain">;
   videoOrientation$: Behavior<"landscape" | "portrait">;
   toggleCropVideo: () => void;
   /**
@@ -63,12 +61,9 @@ export interface BaseUserMediaViewModel extends BaseMemberMediaViewModel {
     RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
   >;
   /**
-   * Set the target dimensions of the HTML element (final dimension after anim).
-   * This can be used to determine the best video fit (fit to frame / keep ratio).
-   * @param targetWidth - The target width of the HTML element displaying the video.
-   * @param targetHeight - The target height of the HTML element displaying the video.
+   * Set the aspect ratio of the video track to determine the orientation.
    */
-  setTargetDimensions: (targetWidth: number, targetHeight: number) => void;
+  setVideoAspectRatio: (ratio: number) => void;
 }
 
 export interface BaseUserMediaInputs extends Omit<
@@ -98,14 +93,8 @@ export function createBaseUserMedia(
     ),
   );
   const toggleCropVideo$ = new Subject<void>();
+  const videoAspectRatio$ = new BehaviorSubject(NaN);
 
-  // The target size of the video element, used to determine the best video fit.
-  // The target size is the final size of the HTML element after any animations have completed.
-  const targetSize$ = new BehaviorSubject<
-    { width: number; height: number } | undefined
-  >(undefined);
-
-  const videoSize$ = videoSizeFromParticipant$(participant$);
   return {
     ...createMemberMedia(scope, {
       ...inputs,
@@ -132,13 +121,11 @@ export function createBaseUserMedia(
       media$.pipe(map((m) => m?.cameraTrack?.isMuted === false)),
     ),
     videoOrientation$: scope.behavior(
-      videoSize$.pipe(
-        map((s) => (s ? s.width / s.height : 1)),
+      videoAspectRatio$.pipe(
         map((aspect) => (aspect > 1 ? "landscape" : "portrait")),
       ),
       "portrait",
     ),
-    videoFit$: videoFit$(scope, videoSize$, targetSize$),
     toggleCropVideo: () => toggleCropVideo$.next(),
     rtcBackendIdentity,
     handRaised$,
@@ -162,8 +149,6 @@ export function createBaseUserMedia(
         return observeRtpStreamStats$(p, Track.Source.Camera, statsType);
       }),
     ),
-    setTargetDimensions: (targetWidth: number, targetHeight: number): void => {
-      targetSize$.next({ width: targetWidth, height: targetHeight });
-    },
+    setVideoAspectRatio: (ratio) => videoAspectRatio$.next(ratio),
   };
 }

src/state/media/observeRtpStreamStats.ts

@@ -19,10 +19,15 @@ import {
   startWith,
   switchMap,
   map,
+  share,
 } from "rxjs";
 
 import { observeTrackReference$ } from "../observeTrackReference";
 
+// Use a shared timer for all the stats observers so that we don't clog up the
+// event loop with hundreds of timers in large calls
+const refreshStats$ = interval(1000).pipe(share());
+
 export function observeRtpStreamStats$(
   participant: Participant,
   source: Track.Source,
@@ -32,9 +37,7 @@ export function observeRtpStreamStats$(
 > {
   return combineLatest([
     observeTrackReference$(participant, source),
-    // The update frequency is high because we use this value to update the PiP orientation and the fit/fill video tile props based on that
-    // We want it to be responsive. For just the debug tools 1s would be sufficient.
-    interval(350).pipe(startWith(0)),
+    refreshStats$.pipe(startWith(0)),
   ]).pipe(
     switchMap(async ([trackReference]) => {
       const track = trackReference?.publication?.track;
@@ -69,12 +72,3 @@ export function observeInboundRtpStreamStats$(
     map((x) => x as RTCInboundRtpStreamStats | undefined),
   );
 }
-
-export function observeOutboundRtpStreamStats$(
-  participant: Participant,
-  source: Track.Source,
-): Observable<RTCOutboundRtpStreamStats | undefined> {
-  return observeRtpStreamStats$(participant, source, "outbound-rtp").pipe(
-    map((x) => x as RTCOutboundRtpStreamStats | undefined),
-  );
-}

src/tile/GridTile.test.tsx

@@ -5,7 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type RemoteTrackPublication } from "livekit-client";
+import {
+  type LocalTrackPublication,
+  type RemoteTrackPublication,
+} from "livekit-client";
 import { test, expect } from "vitest";
 import { act, render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
@@ -17,6 +20,9 @@ import {
   mockRtcMembership,
   mockRemoteMedia,
   mockRemoteParticipant,
+  mockLocalMedia,
+  mockLocalParticipant,
+  mockMediaDevices,
 } from "../utils/test";
 import { GridTileViewModel } from "../state/TileViewModel";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
@@ -54,7 +60,7 @@ const callVm = {
   handsRaised$: constant({}),
 } as Partial<CallViewModel> as CallViewModel;
 
-test("GridTile is accessible", async () => {
+test("GridTile displays remote media", async () => {
   const vm = mockRemoteMedia(
     mockRtcMembership("@alice:example.org", "AAAA"),
     {
@@ -88,6 +94,40 @@ test("GridTile is accessible", async () => {
   screen.getByText("Alice");
 });
 
+test("GridTile displays local media", async () => {
+  const vm = mockLocalMedia(
+    mockRtcMembership("@alice:example.org", "AAAA"),
+    {
+      rawDisplayName: "Alice",
+      getMxcAvatarUrl: () => "mxc://adfsg",
+    },
+    mockLocalParticipant({
+      getTrackPublication: () =>
+        ({}) as Partial<LocalTrackPublication> as LocalTrackPublication,
+    }),
+    mockMediaDevices({}),
+  );
+
+  const { container } = render(
+    <ReactionsSenderProvider vm={callVm} rtcSession={fakeRtcSession}>
+      <GridTile
+        vm={new GridTileViewModel(constant(vm))}
+        onOpenProfile={() => {}}
+        targetWidth={300}
+        targetHeight={200}
+        showSpeakingIndicators
+        showNameTags
+        showRingingStatus
+        showOutline
+        focusable
+      />
+    </ReactionsSenderProvider>,
+  );
+  expect(await axe(container)).toHaveNoViolations();
+  // Name should be visible
+  screen.getByText("Alice");
+});
+
 test("GridTile displays ringing media", async () => {
   const pickupState$ = new BehaviorSubject<
     RingingMediaViewModel["pickupState$"]["value"]

src/tile/GridTile.tsx

@@ -11,9 +11,9 @@ import {
   type ReactNode,
   type Ref,
   useCallback,
-  useEffect,
   useRef,
   useState,
+  useMemo,
 } from "react";
 import { type animated } from "@react-spring/web";
 import classNames from "classnames";
@@ -91,7 +91,6 @@ const RingingMediaTile: FC<RingingMediaTileProps> = ({
       }
       avatarStyle="translucent"
       videoEnabled={false}
-      videoFit="cover"
       mirror={false}
       {...props}
     />
@@ -105,20 +104,22 @@ interface UserMediaTileProps extends TileProps {
   playbackMuted: boolean;
   waitingForMedia?: boolean;
   primaryButton?: ReactNode;
-  menuStart?: ReactNode;
-  menuEnd?: ReactNode;
   focusUrl: string | undefined;
 }
 
-const UserMediaTile: FC<UserMediaTileProps> = ({
+/**
+ * A user media tile without a context menu.
+ */
+// The context menu is kept separate from this component for performance
+// reasons (c.f. UserMediaTile)
+const UserMediaTileInner: FC<UserMediaTileProps & { menu: ReactNode }> = ({
   ref,
   vm,
   showSpeakingIndicators,
   playbackMuted,
   waitingForMedia,
   primaryButton,
-  menuStart,
-  menuEnd,
+  menu,
   className,
   focusUrl,
   displayName,
@@ -141,19 +142,11 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
   const audioEnabled = useBehavior(vm.audioEnabled$);
   const videoEnabled = useBehavior(vm.videoEnabled$);
   const speaking = useBehavior(vm.speaking$);
-  const videoFit = useBehavior(vm.videoFit$);
 
   const rtcBackendIdentity = vm.rtcBackendIdentity;
   const handRaised = useBehavior(vm.handRaised$);
   const reaction = useBehavior(vm.reaction$);
 
-  // Whenever bounds change, inform the viewModel
-  useEffect(() => {
-    if (targetWidth > 0 && targetHeight > 0) {
-      vm.setTargetDimensions(targetWidth, targetHeight);
-    }
-  }, [targetWidth, targetHeight, vm]);
-
   const AudioIcon = playbackMuted
     ? VolumeOffSolidIcon
     : audioEnabled
@@ -166,31 +159,32 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
       : t("microphone_off");
 
   const [menuOpen, setMenuOpen] = useState(false);
-  const menu = (
-    <>
-      {menuStart}
-      {/*
-       No additional menu item (used to be the manual fit to frame.
-       Placeholder for future menu items that should be placed here.
-       */}
-      {menuEnd}
-    </>
+  const menuTrigger = useMemo(
+    () => (
+      <button
+        aria-label={t("common.options")}
+        tabIndex={focusable ? undefined : -1}
+      >
+        <OverflowHorizontalIcon aria-hidden width={20} height={20} />
+      </button>
+    ),
+    [t, focusable],
   );
 
-  const raisedHandOnClick = vm.local
-    ? (): void => void toggleRaisedHand()
-    : undefined;
+  const raisedHandOnClick = useMemo(
+    () => (vm.local ? (): void => void toggleRaisedHand() : undefined),
+    [vm.local, toggleRaisedHand],
+  );
 
   const showSpeaking = showSpeakingIndicators && speaking;
 
-  const tile = (
+  return (
     <MediaView
       ref={ref}
       video={video}
       userId={vm.userId}
       unencryptedWarning={unencryptedWarning}
       videoEnabled={videoEnabled}
-      videoFit={videoFit}
       className={classNames(className, styles.tile, {
         [styles.speaking]: showSpeaking,
         [styles.handRaised]: !showSpeaking && handRaised,
@@ -213,14 +207,7 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
             open={menuOpen}
             onOpenChange={setMenuOpen}
             title={displayName}
-            trigger={
-              <button
-                aria-label={t("common.options")}
-                tabIndex={focusable ? undefined : -1}
-              >
-                <OverflowHorizontalIcon aria-hidden width={20} height={20} />
-              </button>
-            }
+            trigger={menuTrigger}
             side="left"
             align="start"
           >
@@ -233,6 +220,7 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
       raisedHandOnClick={raisedHandOnClick}
       waitingForMedia={waitingForMedia}
       focusUrl={focusUrl}
+      setVideoAspectRatio={vm.setVideoAspectRatio}
       audioStreamStats={audioStreamStats}
       videoStreamStats={videoStreamStats}
       rtcBackendIdentity={rtcBackendIdentity}
@@ -241,9 +229,37 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
       {...props}
     />
   );
+};
 
+/**
+ * A user media tile enhanced with a context menu.
+ */
+const UserMediaTile: FC<
+  UserMediaTileProps & { menuStart?: ReactNode; menuEnd?: ReactNode }
+> = ({ menuStart, menuEnd, ...props }) => {
+  const menu = useMemo(
+    () => (
+      <>
+        {menuStart}
+        {/*
+       No additional menu item (used to be the manual fit to frame.
+       Placeholder for future menu items that should be placed here.
+       */}
+        {menuEnd}
+      </>
+    ),
+    [menuStart, menuEnd],
+  );
+
+  // ContextMenu is expensive to render, so we avoid subscribing to any
+  // frequently-changing behaviors here and instead keep them isolated in the
+  // UserMediaTileInner component
   return (
-    <ContextMenu title={displayName} trigger={tile} hasAccessibleAlternative>
+    <ContextMenu
+      title={props.displayName}
+      trigger={<UserMediaTileInner {...props} menu={menu} />}
+      hasAccessibleAlternative
+    >
       {menu}
     </ContextMenu>
   );
@@ -279,6 +295,29 @@ const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
     [vm, latestAlwaysShow],
   );
 
+  const menuStart = useMemo(
+    () => (
+      <ToggleMenuItem
+        Icon={VisibilityOnIcon}
+        label={t("video_tile.always_show")}
+        checked={alwaysShow}
+        onSelect={onSelectAlwaysShow}
+      />
+    ),
+    [t, alwaysShow, onSelectAlwaysShow],
+  );
+  const menuEnd = useMemo(
+    () =>
+      onOpenProfile && (
+        <MenuItem
+          Icon={UserProfileIcon}
+          label={t("common.profile")}
+          onSelect={onOpenProfile}
+        />
+      ),
+    [t, onOpenProfile],
+  );
+
   return (
     <UserMediaTile
       ref={ref}
@@ -297,23 +336,8 @@ const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
           </button>
         )
       }
-      menuStart={
-        <ToggleMenuItem
-          Icon={VisibilityOnIcon}
-          label={t("video_tile.always_show")}
-          checked={alwaysShow}
-          onSelect={onSelectAlwaysShow}
-        />
-      }
-      menuEnd={
-        onOpenProfile && (
-          <MenuItem
-            Icon={UserProfileIcon}
-            label={t("common.profile")}
-            onSelect={onOpenProfile}
-          />
-        )
-      }
+      menuStart={menuStart}
+      menuEnd={menuEnd}
       focusable={focusable}
       focusUrl={focusUrl}
       {...props}

src/tile/MediaView.test.tsx

@@ -33,7 +33,6 @@ describe("MediaView", () => {
   const baseProps: ComponentProps<typeof MediaView> = {
     displayName: "some name",
     videoEnabled: true,
-    videoFit: "contain",
     targetWidth: 300,
     targetHeight: 200,
     mirror: false,

src/tile/MediaView.tsx

@@ -7,7 +7,13 @@ Please see LICENSE in the repository root for full details.
 
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
 import { animated } from "@react-spring/web";
-import { type FC, type ComponentProps, type ReactNode } from "react";
+import {
+  type FC,
+  type ComponentProps,
+  type ReactNode,
+  type SyntheticEvent,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { VideoTrack } from "@livekit/components-react";
@@ -26,6 +32,7 @@ import { type ReactionOption } from "../reactions";
 import { ReactionIndicator } from "../reactions/ReactionIndicator";
 import { RTCConnectionStats } from "../RTCConnectionStats";
 import videoPlaceholder from "../graphics/video-placeholder.gif";
+import { autoVideoFit } from "../utils/videoFit";
 
 interface Props extends ComponentProps<typeof animated.div> {
   className?: string;
@@ -33,7 +40,11 @@ interface Props extends ComponentProps<typeof animated.div> {
   targetWidth: number;
   targetHeight: number;
   video: TrackReferenceOrPlaceholder | undefined;
-  videoFit: "cover" | "contain";
+  /**
+   * How to fit the video content inside the tile. When undefined, MediaView
+   * chooses a smart default based on the aspect ratios of the tile and video.
+   */
+  videoFit?: "cover" | "contain";
   mirror: boolean;
   soundWaves?: boolean;
   userId: string;
@@ -55,8 +66,15 @@ interface Props extends ComponentProps<typeof animated.div> {
   audioStreamStats?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   videoStreamStats?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
   rtcBackendIdentity?: string;
-  // The focus url, mainly for debugging purposes
+  /**
+   * The focus url, mainly for debugging purposes.
+   */
   focusUrl?: string;
+  /**
+   * Called whenever the aspect ratio of the video content becomes known or
+   * otherwise changes.
+   */
+  setVideoAspectRatio?: (ratio: number) => void;
 }
 
 export const MediaView: FC<Props> = ({
@@ -89,6 +107,7 @@ export const MediaView: FC<Props> = ({
   videoStreamStats,
   rtcBackendIdentity,
   focusUrl,
+  setVideoAspectRatio: setTheirVideoAspectRatio,
   ...props
 }) => {
   const { t } = useTranslation();
@@ -100,6 +119,22 @@ export const MediaView: FC<Props> = ({
       (soundWaves === undefined ? 0.5 : 0.38),
   );
 
+  const [videoAspectRatio, setOurVideoAspectRatio] = useState<number>(NaN);
+  const tileAspectRatio = targetWidth / targetHeight;
+
+  // Propagate video dimensions
+  const setVideoAspectRatio = (ratio: number) => {
+    setOurVideoAspectRatio(ratio);
+    setTheirVideoAspectRatio?.(ratio);
+  };
+  const videoRef = (el: HTMLVideoElement | null) => {
+    if (el !== null) setVideoAspectRatio(el.videoWidth / el.videoHeight);
+  };
+  const onResize = (ev: SyntheticEvent<HTMLVideoElement>) =>
+    setVideoAspectRatio(
+      ev.currentTarget.videoWidth / ev.currentTarget.videoHeight,
+    );
+
   const warnings = unencryptedWarning && (
     <Tooltip
       label={t("common.unencrypted")}
@@ -126,7 +161,9 @@ export const MediaView: FC<Props> = ({
       ref={ref}
       data-testid="videoTile"
       data-video-enabled={video && videoEnabled}
-      data-video-fit={videoFit}
+      data-video-fit={
+        videoFit ?? autoVideoFit(videoAspectRatio, tileAspectRatio)
+      }
       data-background={background}
       {...props}
     >
@@ -158,6 +195,8 @@ export const MediaView: FC<Props> = ({
             // Set the placeholder to a small transparent image. (On Android web
             // views the default poster image is particularly ugly.)
             poster={videoPlaceholder}
+            ref={videoRef}
+            onResize={onResize}
           />
         )}
       </div>

src/tile/SpotlightTile.tsx

@@ -68,6 +68,7 @@ interface SpotlightItemBaseProps {
   background: "solid" | "transparent";
   focusable: boolean;
   "aria-hidden"?: boolean;
+  setVideoAspectRatio?: (ratio: number) => void;
 }
 
 interface SpotlightMemberMediaItemBaseProps extends SpotlightItemBaseProps {
@@ -77,7 +78,6 @@ interface SpotlightMemberMediaItemBaseProps extends SpotlightItemBaseProps {
 }
 
 interface SpotlightUserMediaItemBaseProps extends SpotlightMemberMediaItemBaseProps {
-  videoFit: "contain" | "cover";
   videoEnabled: boolean;
   soundWaves: boolean | undefined;
 }
@@ -120,20 +120,12 @@ const SpotlightUserMediaItem: FC<SpotlightUserMediaItemProps> = ({
   targetHeight,
   ...props
 }) => {
-  const videoFit = useBehavior(vm.videoFit$);
   const videoEnabled = useBehavior(vm.videoEnabled$);
   const speaking = useBehavior(vm.speaking$);
 
-  // Whenever target bounds change, inform the viewModel
-  useEffect(() => {
-    if (targetWidth > 0 && targetHeight > 0) {
-      vm.setTargetDimensions(targetWidth, targetHeight);
-    }
-  }, [targetWidth, targetHeight, vm]);
-
   const baseProps: SpotlightUserMediaItemBaseProps &
     RefAttributes<HTMLDivElement> = {
-    videoFit,
+    setVideoAspectRatio: vm.setVideoAspectRatio,
     videoEnabled,
     soundWaves: props.background === "transparent" ? speaking : undefined,
     targetWidth,
@@ -227,7 +219,6 @@ const SpotlightRingingMediaItem: FC<SpotlightRingingMediaItemProps> = ({
       }
       avatarStyle="translucent"
       videoEnabled={false}
-      videoFit="cover"
       mirror={false}
       {...props}
     />

src/utils/errors.ts

@@ -12,7 +12,7 @@ import { i18nKey } from "./i18n";
 
 export enum ErrorCode {
   /**
-   * Configuration problem due to no MatrixRTC backend/SFU is exposed via .well-known and no fallback configured.
+   * Configuration problem due to no MatrixRTC transport provided by homeserver and no fallback configured.
    */
   MISSING_MATRIX_RTC_TRANSPORT = "MISSING_MATRIX_RTC_TRANSPORT",
   CONNECTION_LOST_ERROR = "CONNECTION_LOST_ERROR",
@@ -67,7 +67,7 @@ export class ElementCallError extends Error {
 }
 
 /**
- * Configuration problem due to no MatrixRTC backend/SFU is exposed via .well-known and no fallback configured.
+ * Configuration problem due to no MatrixRTC transport provided by homeserver and no fallback configured.
  */
 export class MatrixRTCTransportMissingError extends ElementCallError {
   public domain: string;

src/utils/observable.test.ts

@@ -9,9 +9,30 @@ import { expect, test } from "vitest";
 import { type Observable, of, Subject, switchMap } from "rxjs";
 
 import { withTestScheduler } from "./test";
-import { filterBehavior, generateItems, pauseWhen } from "./observable";
+import { or$, filterBehavior, generateItems, pauseWhen } from "./observable";
 import { type Behavior } from "../state/Behavior";
 
+const yesNo = {
+  y: true,
+  n: false,
+};
+
+test("or$", () => {
+  withTestScheduler(({ behavior, expectObservable }) => {
+    const input1Marbles = "ny--n--";
+    const input2Marbles = "n-y--n-";
+    const input3Marbles = "n--y--n";
+    const outputMarbles = "nyyyyyn";
+    expectObservable(
+      or$(
+        behavior(input1Marbles, yesNo),
+        behavior(input2Marbles, yesNo),
+        behavior(input3Marbles, yesNo),
+      ),
+    ).toBe(outputMarbles, yesNo);
+  });
+});
+
 test("pauseWhen", () => {
   withTestScheduler(({ behavior, expectObservable }) => {
     const inputMarbles = " abcdefgh-i-jk-";

src/utils/observable.ts

@@ -114,13 +114,11 @@ export function getValue<T>(state$: Observable<T>): T {
 }
 
 /**
- * Creates an Observable that has a value of true whenever all its inputs are
- * true.
- *
- * @public
+ * Creates an Observable that has a value of true whenever some of its inputs
+ * are true.
  */
-export function and$(...inputs: Observable<boolean>[]): Observable<boolean> {
-  return combineLatest(inputs, (...flags) => flags.every((flag) => flag));
+export function or$(...inputs: Observable<boolean>[]): Observable<boolean> {
+  return combineLatest(inputs, (...flags) => flags.some((flag) => flag));
 }
 
 /**
@@ -229,38 +227,6 @@ export function filterBehavior<T, S extends T>(
     );
 }
 
-/**
- * Maps a changing input value to an item whose lifetime is tied to a certain
- * computed key. The item may capture some dynamic data from the input.
- */
-export function generateItem<
-  Input,
-  Keys extends [unknown, ...unknown[]],
-  Data,
-  Item,
->(
-  name: string,
-  generator: (input: Input) => { keys: readonly [...Keys]; data: Data },
-  factory: (
-    scope: ObservableScope,
-    data$: Behavior<Data>,
-    ...keys: Keys
-  ) => Item,
-): OperatorFunction<Input, Item> {
-  return (input$) =>
-    input$.pipe(
-      generateItemsInternal(
-        name,
-        function* (input) {
-          yield generator(input);
-        },
-        factory,
-        (items) => items,
-      ),
-      map(([item]) => item),
-    );
-}
-
 function generateItemsInternal<
   Input,
   Keys extends [unknown, ...unknown[]],