Update docs to reflect transports endpoint moving to MSC4519

This is linked from the 0.24.0 release notes, so even more important for it to be up to date.

.github/workflows/test.yaml

@@ -7,10 +7,6 @@ jobs:
   vitest:
     name: Run unit tests
     runs-on: ubuntu-latest
-    container:
-      # Make sure to grab the latest version of the Playwright image
-      # https://playwright.dev/docs/docker#pull-the-image
-      image: mcr.microsoft.com/playwright:v1.61.1-noble
     steps:
       - name: Checkout code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
@@ -26,6 +22,18 @@ jobs:
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
         run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+      - name: Get Playwright version
+        run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
+      - name: Cache Playwright binaries
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+      - name: Install Playwright binaries
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm playwright install --with-deps
       - name: Vitest
         run: "pnpm run test:coverage"
       - name: Upload to codecov
@@ -52,12 +60,22 @@ jobs:
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
         run: pnpm install --frozen-lockfile --ignore-pnpmfile
-      - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
+      - name: Get Playwright version
+        run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
+      - name: Cache Playwright binaries
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+      - name: Install Playwright binaries
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm playwright install --with-deps
       - name: Run backend components
         run: |
-          docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml pull
-          docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up -d
+          docker compose -f docker-compose-dev.yml -f docker-compose-playwright.yml pull
+          docker compose -f docker-compose-dev.yml -f docker-compose-playwright.yml up -d
           docker ps
       - name: Run Playwright tests
         env:

.github/workflows/translations-download.yaml

@@ -40,6 +40,11 @@ jobs:
       - name: Fix the owner of the downloaded files
         run: "sudo chown runner:docker -R locales"
 
+      # Localazy doesn't write file contents in the same order that i18next-cli's
+      # extractor uses. We re-run the extractor after downloading to fix the order.
+      - name: i18n
+        run: pnpm i18n
+
       - name: Formatting
         run: pnpm format
 
@@ -53,7 +58,7 @@ jobs:
           title: Localazy Download
           commit-message: Translations updates
           labels: |
-            T-Task
+            PR-Task
 
       - name: Enable automerge
         run: gh pr merge --merge --auto "$PR_NUMBER"

.oxlintrc.json

@@ -34,6 +34,7 @@
       "/*\nCopyright %%CURRENT_YEAR%% Element Creations Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE in the repository root for full details.\n*/\n\n"
     ],
     "element-call/no-observablescope-leak": "error",
+    "element-call/no-top-level-logger-get-child": "error",
     "jsdoc/empty-tags": "error",
     "jsdoc/check-property-names": "error",
     "jsdoc/require-param-description": "warn",

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)),
@@ -212,7 +215,7 @@ See also:
 
 ### Backend
 
-A docker compose file `dev-backend-docker-compose.yml` is provided to start the
+A docker compose file `docker-compose-dev.yml` is provided to start the
 whole stack of components which is required for a local development environment
 including federation:
 
@@ -239,15 +242,14 @@ the backend components:
 ```sh
 pnpm backend
 # or for podman-compose:
-# podman-compose -f dev-backend-docker-compose.yml up
+# podman-compose -f docker-compose-dev.yml up
 ```
 
 > [!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

docker-compose-dev.yml

@@ -47,7 +47,7 @@ services:
       - ecbackend
 
   livekit:
-    image: livekit/livekit-server:v1.10.1
+    image: livekit/livekit-server:v1.13.4
     pull_policy: always
     hostname: livekit-sfu
     command: --dev --config /etc/livekit.yaml
@@ -70,7 +70,7 @@ services:
       - ecbackend
 
   livekit-1:
-    image: livekit/livekit-server:v1.10.1
+    image: livekit/livekit-server:v1.13.4
     pull_policy: always
     hostname: livekit-sfu-1
     command: --dev --config /etc/livekit.yaml
@@ -156,7 +156,7 @@ services:
   nginx:
     #  see backend/dev_tls_setup for how to generate the tls certs
     hostname: synapse.m.localhost
-    image: nginx:latest
+    image: nginx:latest@sha256:4ae259ae64fbedb67918c07d167fdcb0e05855a1615480ca445bea485e7d65ff
     pull_policy: always
     volumes:
       - ./backend/dev_nginx.conf:/etc/nginx/conf.d/default.conf:Z

docker-compose-playwright.yml

@@ -0,0 +1,19 @@
+# This file contains overrides to docker-compose-dev.yml and should
+# only be used in combination with that file.
+services:
+  synapse:
+    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
+    image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a
+    volumes:
+      - ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z
+  synapse-1:
+    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
+    image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a
+    volumes:
+      - ./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:9ac7cde6e2f53684f0c28215130d3aca5c41025bb93c57acd0a6fb2246b685f4
+  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:9ac7cde6e2f53684f0c28215130d3aca5c41025bb93c57acd0a6fb2246b685f4

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)
 
@@ -86,10 +102,11 @@ to implement
 In the context of MatrixRTC, we suggest using a single hostname for backend
 communication by implementing endpoint routing within a reverse proxy setup. For
 the example above, this results in:
-| Service | Endpoint | Example |
-| -------- | ------- | ------- |
+
+| Service                                                                           | Endpoint       | Example                              |
+| --------------------------------------------------------------------------------- | -------------- | ------------------------------------ |
 | [Livekit SFU](https://github.com/livekit/livekit) WebSocket signalling connection | `/livekit/sfu` | `matrix-rtc.example.com/livekit/sfu` |
-| [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service) | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |
+| [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)   | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |
 
 Using Nginx, you can achieve this by:
 
@@ -164,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/,/)]
@@ -186,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]  
@@ -277,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!
 

docs/url_params.md

@@ -67,6 +67,7 @@ These parameters are relevant to both [widget](./embedded_standalone.md) and [st
 | `showControls`                                 | `true` or `false`                                                                                                                                                  | No, defaults to `true`                                                                            | No, defaults to `true`       | Displays controls like mute, screen-share, invite, and hangup buttons during a call.                                                                                                                                                                                                                                                                                                                |
 | `skipLobby` (deprecated: use `intent` instead) | `true` or `false`                                                                                                                                                  | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false`      | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |
 | `theme`                                        | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                                                                               | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
+| `background`                                   | One of: `solid`, `gradient`                                                                                                                                        | No, defaults to `gradient`                                                                        | No, defaults to `gradient`   | Visual style of the page background.                                                                                                                                                                                                                                                                                                                                                                |
 | `viaServers`                                   | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name)                                                               | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
 | `sendNotificationType`                         | `ring` or `notification`                                                                                                                                           | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
 | `autoLeave`                                    | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the app should automatically leave the call when there is no one left in the call.                                                                                                                                                                                                                                                                                                          |

eslint/NoTopLevelLoggerGetChild.js

@@ -0,0 +1,92 @@
+/*
+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 { ESLintUtils } from "@typescript-eslint/utils";
+
+/**
+ * Node types that introduce a new non-module scope. A getChild() call nested
+ * inside any of these is considered "not at the top level".
+ */
+const FUNCTION_OR_CLASS_TYPES = new Set([
+  "FunctionDeclaration",
+  "FunctionExpression",
+  "ArrowFunctionExpression",
+  "ClassBody",
+]);
+
+const rule = ESLintUtils.RuleCreator(
+  () => "https://github.com/element-hq/element-call",
+)({
+  name: "no-top-level-logger-get-child",
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow calling logger.getChild() at the top level of a module." +
+        "`getChild` has to be called after the rageshake logger `init()`." +
+        "If it is called at the top level the child logger will never be setup for rageshakes.",
+    },
+    messages: {
+      noTopLevelGetChild:
+        "Do not call logger.getChild() at the top level of a module; move it inside a function or class instead that gets called after rageshake logger `init()` is called.",
+    },
+    schema: [],
+  },
+  create(context) {
+    // Tracks the local binding names that refer to the logger imported from
+    // 'matrix-js-sdk/lib/logger', e.g. both `logger` and `rootLogger` in:
+    //   import { logger } from "matrix-js-sdk/lib/logger";
+    //   import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+    const loggerNames = new Set();
+
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== "matrix-js-sdk/lib/logger") return;
+        for (const specifier of node.specifiers) {
+          if (
+            specifier.type === "ImportSpecifier" &&
+            specifier.imported.name === "logger"
+          ) {
+            loggerNames.add(specifier.local.name);
+          }
+        }
+      },
+
+      CallExpression(node) {
+        // Must be a non-computed member expression call: something.getChild(...)
+        if (
+          node.callee.type !== "MemberExpression" ||
+          node.callee.computed ||
+          node.callee.property.type !== "Identifier" ||
+          node.callee.property.name !== "getChild"
+        )
+          return;
+
+        // The receiver must be one of the tracked logger names.
+        const object = node.callee.object;
+        if (object.type !== "Identifier" || !loggerNames.has(object.name))
+          return;
+
+        // Flag the call only when it is at module top level — i.e. there is no
+        // enclosing function or class body anywhere in the ancestor chain.
+        const ancestors = context.sourceCode.getAncestors(node);
+        const isTopLevel = !ancestors.some((a) =>
+          FUNCTION_OR_CLASS_TYPES.has(a.type),
+        );
+
+        if (isTopLevel) {
+          context.report({
+            messageId: "noTopLevelGetChild",
+            node,
+          });
+        }
+      },
+    };
+  },
+});
+
+export default rule;

eslint/index.js

@@ -2,5 +2,7 @@ module.exports = {
   rules: {
     "copyright-header": require("./CopyrightHeader").default,
     "no-observablescope-leak": require("./NoObservableScopeLeak").default,
+    "no-top-level-logger-get-child": require("./NoTopLevelLoggerGetChild")
+      .default,
   },
 };

knip.ts

@@ -20,7 +20,12 @@ export default {
     // This is a shell built-in.
     "printf",
   ],
-  ignoreFiles: ["scripts/.pnpmfile.cjs"],
+  ignoreFiles: [
+    "scripts/.pnpmfile.cjs",
+    // Deliberately added prior to any component or business logic
+    // implementation
+    "src/state/ServiceInterruptionsViewModel.ts",
+  ],
   ignoreDependencies: [
     // Used in CSS
     "normalize.css",

locales/cs/app.json

@@ -102,11 +102,15 @@
     "connection_lost_description": "Hovor byl přerušen.",
     "e2ee_unsupported": "Nekompatibilní prohlížeč",
     "e2ee_unsupported_description": "Váš webový prohlížeč nepodporuje šifrované hovory. Mezi podporované prohlížeče patří Chrome, Safari a Firefox 117+.",
+    "failed_to_start_livekit": "Nepodařilo se navázat připojení k Livekitu",
     "generic": "Něco se pokazilo.",
     "generic_description": "Odeslání protokolů ladění nám pomůže vystopovat problém.",
     "insufficient_capacity": "Nedostatečná kapacita",
     "insufficient_capacity_description": "Server dosáhl své maximální kapacity a v tuto chvíli se nemůžete připojit k hovoru. Zkuste to později nebo se obraťte na správce serveru, pokud problém přetrvává.",
     "matrix_rtc_transport_missing": "Server není nakonfigurován pro práci s {{brand}}. Obraťte se na správce serveru (Doména: {{domain}}, Kód chyby: {{ errorCode }}).",
+    "membership_manager": "Chyba Správce členství",
+    "membership_manager_description": "Správce členství musel být ukončen. To je způsobeno mnoha po sobě jdoucími neúspěšnými síťovými požadavky.",
+    "no_matrix_2_authorization_service": "Autorizační služba vašeho mediálního serveru (SFU) je zastaralá.",
     "open_elsewhere": "Otevřeno na jiné kartě",
     "open_elsewhere_description": "{{brand}} byl otevřen v jiné záložce. Pokud to nezní správně, zkuste stránku znovu načíst.",
     "room_creation_restricted": "Nepodařilo se vytvořit hovor",
@@ -141,6 +145,7 @@
   },
   "layout_grid_label": "Mřížka",
   "layout_spotlight_label": "Soustředěný mód",
+  "layout_switch_label": "Rozvržení",
   "lobby": {
     "ask_to_join": "Žádost o připojení k hovoru",
     "join_as_guest": "Připojte se jako host",
@@ -241,11 +246,14 @@
   "version": "{{productName}}verze: {{version}}",
   "video_tile": {
     "always_show": "Vždy zobrazit",
+    "call_ended": "Hovor ukončen",
+    "calling": "Volání…",
     "camera_starting": "Načítání videa...",
     "collapse": "Sbalit",
     "expand": "Rozbalit",
     "mute_for_me": "Pro mě ztlumit",
     "muted_for_me": "Pro mě ztlumené",
+    "screen_share_volume": "Hlasitost sdílení obrazovky",
     "volume": "Hlasitost",
     "waiting_for_media": "Čekání na média..."
   }

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",
@@ -196,13 +196,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 +228,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 +248,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",

locales/et/app.json

@@ -3,6 +3,7 @@
     "user_menu": "Kasutajamenüü"
   },
   "action": {
+    "blur_background": "Hägusta tausta",
     "close": "Sulge",
     "copy_link": "Kopeeri link",
     "edit": "Muuda",
@@ -72,8 +73,20 @@
     "environment_variables": "Keskkonnamuutujad",
     "hostname": "Hosti nimi: {{hostname}}",
     "livekit_server_info": "LiveKiti serveri teave",
-    "livekit_sfu": "LiveKit SFU: {{url}}",
+    "livekit_sfu": "LiveKiti meediaedastusserver (SFU): {{url}}",
     "matrixRTCMode": {
+      "Comptibility": {
+        "description": "Ühildub koduserveritega, mis ei toeta määratud kestusega sündmuseid (kuid kõik teised EC kliendid on v0.17.0 või hilisemad)",
+        "label": "Ühilduvus: olekusündmused ja mitu meediaedastusserverit (SFU)"
+      },
+      "Legacy": {
+        "description": "Ühildub EC vanemate versioonidega, millel puudub mitme meediaedastusserveri (SFU) tugi",
+        "label": "Vana lahendus: oleku üritused ja vanim meediaedastusserver (SFU)"
+      },
+      "Matrix_2_0": {
+        "description": "Ühildub ainult määratud kestusega sündmuseid toetavate koduserveritega ja kõigi EC-klientidega alates versioonist 0.17.0",
+        "label": "Matrix 2.0: määratud kestusega sündmused ja mitu meediaedastusserverit (SFU)"
+      },
       "title": "MatrixRTC režiim"
     },
     "matrix_id": "Matrixi kasutajatunnus: {{id}}",
@@ -95,13 +108,20 @@
     "generic_description": "Silumis- ja vealogide saatmine võib aidata meid vea põhjuseni jõuda.",
     "insufficient_capacity": "Mittepiisav jõudlus",
     "insufficient_capacity_description": "Serveri jõudluse ülempiir on hetkel ületatud ja sa ei saa hetkel selle kõnega liituda. Proovi hiljem uuesti või kui probleem kestab kauem, siis võta ühendust serveri haldajaga.",
+    "livekit_connection_error": "Livekiti serveriga ühendamine ei õnnestunud",
+    "livekit_connection_error_description": "Livekiti serveriga ühendamisel tekkis viga (<1>Põhjus: </1> <2>{{ reason }}</2>).",
     "matrix_rtc_transport_missing": "See server pole seadistatud töötama rakendusega {{brand}}. Palun võta ühendust serveri halduriga (domeen: {{domain}}, veakood: {{ errorCode }}).",
     "membership_manager": "Viga liikmelisuse haldamisel",
     "membership_manager_description": "Liikmelisuse haldur pidi oma töö lõpetama. Selle põhjuseks olid paljud järjestikused ebaõnnestunud võrgupäringud.",
+    "no_matrix_2_authorization_service": "Sinu meediaedastusserveri (SFU) autoriseerimisteenus on aegunud.",
     "open_elsewhere": "Avatud teisel vahekaardil",
     "open_elsewhere_description": "{{brand}} on avatud teisel vahekaardil. Kui see ei tundu olema õige, proovi selle lehe uuesti laadimist.",
+    "peer_connection_timeout": "Ühendus aegus",
+    "peer_connection_timeout_description": "Meediaserveriga ühenduspäring aegus. Proovi kasutada muud võrku või keelata VPN-i kasutamine. Kui probleem püsib, vaata meie <0> veaotsingu juhendit</0> või võta ühendust oma serveri peakasutajaga.",
     "room_creation_restricted": "Kõne loomine ei õnnestunud",
     "room_creation_restricted_description": "Kõne loomine võib olla lubatud ainult volitatud kasutajatele. Proovi hiljem uuesti või probleemi püsimisel võta ühendust oma serveri haldajaga.",
+    "sticky_events_required": "Koduserver ei toeta Matrix 2.0 kõnesid",
+    "sticky_events_required_description": "See server on seadistatud kasutama Matrix 2.0 kõnerežiimi, kuid koduserver ei teata, et tal selleks vajalike sündmuste (MSC4354) tugi. Palu serveri peakasutajal see uuendada või kasuta koduserveris ühilduvat režiimi.",
     "unexpected_ec_error": "Tekkis ootamatu viga (<0>Veakood:</0> <1>{{ errorCode }}</1>). Palun võta ühendust serveri haldajaga."
   },
   "group_call_loader": {
@@ -132,6 +152,7 @@
   },
   "layout_grid_label": "Ruudustik",
   "layout_spotlight_label": "Rambivalgus",
+  "layout_switch_label": "Paigutus",
   "lobby": {
     "ask_to_join": "Küsi võimalust liituda kõnega",
     "join_as_guest": "Liitu külalisena",
@@ -184,6 +205,7 @@
     "blur_not_supported_by_browser": "(Tausta hägustamine pole selles seadmes toetatud.)",
     "developer_tab_title": "Arendaja",
     "devices": {
+      "activating": "Aktiveerin…",
       "camera": "Kaamera",
       "camera_numbered": "Kaamera {{n}}",
       "change_device_button": "Muuda heliseadet",
@@ -223,6 +245,7 @@
   "stop_video_button_label": "Peata videovoog",
   "submitting": "Saadan…",
   "switch_camera": "Vaheta kaamerat",
+  "technical_details": "Tehnilised üksikasjad",
   "unauthenticated_view_body": "Sa pole veel registreerunud? <2>Loo kasutajakonto</2>",
   "unauthenticated_view_login_button": "Logi oma kontosse sisse",
   "unauthenticated_view_ssla_caption": "Klõpsides „Jätka“ nõustud sa meie <2>Tarkvara ja teenuste litsentseerimise lepinguga (Software and Services License Agreement - SSLA)</2>",
@@ -230,11 +253,14 @@
   "version": "{{productName}}, versioon: {{version}}",
   "video_tile": {
     "always_show": "Näita alati",
+    "call_ended": "Kõne lõppes",
+    "calling": "Helistan…",
     "camera_starting": "Video on laadimisel...",
     "collapse": "Näita vähem",
     "expand": "Näita rohkem",
     "mute_for_me": "Summuta minu jaoks",
     "muted_for_me": "Minule summutatud",
+    "screen_share_volume": "Helivaljus ekraanijagaamisel",
     "volume": "Helivaljus",
     "waiting_for_media": "Ootame kuni meedia on olemas..."
   }

locales/fi/app.json

@@ -3,6 +3,7 @@
     "user_menu": "Käyttäjävalikko"
   },
   "action": {
+    "blur_background": "Sumenna tausta",
     "close": "Sulje",
     "copy_link": "Kopioi linkki",
     "edit": "Muokkaa",
@@ -107,14 +108,20 @@
     "generic_description": "Vianmäärityslokien lähettäminen auttaa meitä jäljittämään ongelman.",
     "insufficient_capacity": "Riittämätön kapasiteetti",
     "insufficient_capacity_description": "Palvelin on saavuttanut maksimikapasiteettinsa, etkä voi liittyä puheluun tällä hetkellä. Yritä myöhemmin uudelleen tai ota yhteyttä palvelimen ylläpitäjään, jos ongelma jatkuu.",
+    "livekit_connection_error": "Yhteyden muodostaminen Livekit-palvelimeen epäonnistui",
+    "livekit_connection_error_description": "Livekit-palvelimeen yhteyden muodostamisessa tapahtui virhe (<1>Syy: </1> <2>{{ reason }}</2>).",
     "matrix_rtc_transport_missing": "Palvelinta ei ole määritetty toimimaan {{brand}} -sovelluksen kanssa. Ota yhteyttä palvelimen ylläpitäjään (Verkkotunnus: {{domain}}, Virhekoodi: {{ errorCode }}).",
     "membership_manager": "Jäsenyydenhallinnan virhe",
     "membership_manager_description": "Jäsenyyshallinta jouduttiin sulkemaan. Tämä johtui useista peräkkäisistä epäonnistuneista verkkopyynnöistä.",
     "no_matrix_2_authorization_service": "Mediapalvelimesi (SFU) valtuutuspalvelu on vanhentunut.",
     "open_elsewhere": "Avattu toisessa välilehdessä",
     "open_elsewhere_description": "{{brand}} on avattu toisessa välilehdessä. Jos tämä ei kuulosta oikealta, yritä ladata sivu uudelleen.",
+    "peer_connection_timeout": "Yhteyden aikakatkaisu",
+    "peer_connection_timeout_description": "Yhteys mediapalvelimeen aikakatkaistiin. Kokeile vaihtaa verkkoa tai poistaa VPN käytöstä. Jos ongelma jatkuu, katso <0>vianetsintäoppaamme</0> tai ota yhteyttä palvelimesi ylläpitäjään.",
     "room_creation_restricted": "Puhelun luominen epäonnistui",
     "room_creation_restricted_description": "Puheluiden luominen saattaa olla rajoitettu vain valtuutetuille käyttäjille. Yritä myöhemmin uudelleen tai ota yhteyttä palvelimen ylläpitäjään, jos ongelma jatkuu.",
+    "sticky_events_required": "Kotipalvelin ei tue Matrix 2.0 -puheluita",
+    "sticky_events_required_description": "Tämä asennus on määritetty käyttämään Matrix 2.0 -puhelutilaa, mutta kotipalvelin ei mainosta tukea tarttuville tapahtumille (MSC4354). Pyydä palvelimen järjestelmänvalvojaa päivittämään tai vaihtamaan asennus yhteensopivaan tilaan.",
     "unexpected_ec_error": "Tapahtui odottamaton virhe (<0>Virhekoodi:</0> <1>{{ errorCode }}</1>). Ota yhteyttä palvelimen ylläpitäjään."
   },
   "group_call_loader": {
@@ -145,6 +152,7 @@
   },
   "layout_grid_label": "Ruudukko",
   "layout_spotlight_label": "Valokeila",
+  "layout_switch_label": "Asettelu",
   "lobby": {
     "ask_to_join": "Pyydä liittymistä puheluun",
     "join_as_guest": "Liity vieraana",
@@ -197,6 +205,7 @@
     "blur_not_supported_by_browser": "(Tämä laite ei tue taustan sumennusta.)",
     "developer_tab_title": "Kehittäjä",
     "devices": {
+      "activating": "Aktivoidaan…",
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
       "change_device_button": "Vaihda äänilaite",
@@ -236,6 +245,7 @@
   "stop_video_button_label": "Lopeta video",
   "submitting": "Lähetetään…",
   "switch_camera": "Vaihda kameraa",
+  "technical_details": "Tekniset tiedot",
   "unauthenticated_view_body": "Etkö ole vielä rekisteröitynyt? <2>Luo tili</2>",
   "unauthenticated_view_login_button": "Kirjaudu tilillesi",
   "unauthenticated_view_ssla_caption": "Klikkaamalla \"Siirry\" hyväksyt <2>ohjelmisto- ja palvelulisenssisopimuksen (SSLA)</2>",

locales/pl/app.json

@@ -3,6 +3,7 @@
     "user_menu": "Menu użytkownika"
   },
   "action": {
+    "blur_background": "Rozmycie tła",
     "close": "Zamknij",
     "copy_link": "Kopiuj link",
     "edit": "Edytuj",
@@ -21,7 +22,7 @@
     "submit": "Wyślij",
     "upload_file": "Prześlij plik"
   },
-  "analytics_notice": "Uczestnicząc w tej becie, upoważniasz nas do zbierania anonimowych danych, które wykorzystamy do ulepszenia produktu. Dowiedz się więcej na temat danych, które zbieramy w naszej <2>Polityce prywatności</2> i <5>Polityce ciasteczek</5>.",
+  "analytics_notice": "Biorąc udział w wersji beta, wyrażasz zgodę na gromadzenie anonimowych danych, które wykorzystujemy w celu ulepszenia naszego produktu. Więcej informacji na temat danych, które śledzimy, znajdziesz w naszej <2>Polityce prywatności</2> dla i <6>Polityce ciasteczek</6>.",
   "call_ended_view": {
     "create_account_button": "Utwórz konto",
     "create_account_prompt": "<0>Może zechcesz ustawić hasło, aby zachować swoje konto?</0><1>Będziesz w stanie utrzymać swoją nazwę i ustawić awatar do wyświetlania podczas połączeń w przyszłości</1>",
@@ -41,7 +42,7 @@
     "display_name": "Nazwa wyświetlana",
     "encrypted": "Szyfrowane",
     "home": "Strona domowa",
-    "loading": "Ładowanie…",
+    "loading": "Wczytywanie…",
     "next": "Dalej",
     "options": "Opcje",
     "password": "Hasło",
@@ -58,6 +59,14 @@
   "developer_mode": {
     "always_show_iphone_earpiece": "Pokaż opcję słuchawki iPhone na wszystkich platformach",
     "crypto_version": "Wersja krypto: {{version}}",
+    "custom_livekit_url": {
+      "current_url": "Aktualnie ustawione na: ",
+      "from_config": "Aktualnie nie nadpisano ustawienia. Używany jest adres URL z dobrego źródła lub konfiguracji.",
+      "label": "Własny Livekit-url",
+      "reset": "Zresetuj nadpisanie",
+      "save": "Zapisz",
+      "saving": "Zapisuję..."
+    },
     "debug_tile_layout_label": "Układ kafelków Debug",
     "device_id": "ID urządzenia: {{id}}",
     "duplicate_tiles_label": "Liczba dodatkowych kopii kafelków na uczestnika",
@@ -65,6 +74,21 @@
     "hostname": "Nazwa hosta: {{hostname}}",
     "livekit_server_info": "Informacje serwera LiveKit",
     "livekit_sfu": "LiveKit SFU: {{url}}",
+    "matrixRTCMode": {
+      "Comptibility": {
+        "description": "Kompatybilny z serwerami domowymi, które nie obsługują sticky events (ale wszyscy inni klienci EC mają wersję v0.17.0 lub nowszą)",
+        "label": "Kompatybilność: state events & multi SFU"
+      },
+      "Legacy": {
+        "description": "Kompatybilny ze starszymi wersjami EC, które nie wspierają multi SFU",
+        "label": "Przestarzałe: state events & oldest membership SFU"
+      },
+      "Matrix_2_0": {
+        "description": "Kompatybilny tylko z serwerami domowymi obsługującymi sticky events i wszystkimi klientami EC w wersji v0.17.0 lub nowszej",
+        "label": "Matrix 2.0: sticky events & multi SFU"
+      },
+      "title": "Tryb MatrixRTC"
+    },
     "matrix_id": "ID Matrix: {{id}}",
     "mute_all_audio": "Wycisz cały dźwięk (uczestnicy, reakcje, dźwięki dołączenia)",
     "show_connection_stats": "Pokaż statystyki połączenia",
@@ -74,25 +98,36 @@
   "error": {
     "call_is_not_supported": "Połączenie nie jest obsługiwane",
     "call_not_found": "Nie znaleziono połączenia",
-    "call_not_found_description": "<0>Wygląda na to, że ten link nie należy do żadnego istniejącego połączenia. Sprawdź, czy posiadasz prawidłowy link lub <1>utwórz nowy</1>.</0>",
+    "call_not_found_description": "<0>Wygląda na to, że ten link nie należy do żadnego istniejącego połączenia. Sprawdź, czy masz prawidłowy link lub <2> utwórz nowy</2>.</0>",
     "connection_lost": "Utracono połączenie",
     "connection_lost_description": "Zostałeś rozłączony z rozmowy.",
     "e2ee_unsupported": "Niekompatybilna przeglądarka",
     "e2ee_unsupported_description": "Twoja przeglądarka nie wspiera szyfrowanych połączeń. Obsługiwane przeglądarki obejmują Chrome, Safari i Firefox 117+.",
+    "failed_to_start_livekit": "Nie udało się uruchomić połączenia Livekit",
     "generic": "Coś poszło nie tak",
     "generic_description": "Wysłanie dziennika debug, pozwoli nam namierzyć problem.",
     "insufficient_capacity": "Za mało miejsca",
     "insufficient_capacity_description": "Serwer osiągnął maksymalną pojemność, przez co nie możesz dołączyć do połączenia. Spróbuj ponownie później lub skontaktuj się z administratorem serwera, jeśli problem nie zniknie.",
+    "livekit_connection_error": "Nie udało się połączyć z serwerem Livekit",
+    "livekit_connection_error_description": "Wystąpił błąd podczas łączenia się z serwerem Livekit (<1>Przyczyna:</1> <2>{{ reason }}</2>).",
+    "matrix_rtc_transport_missing": "Serwer nie jest skonfigurowany do pracy z {{brand}}. Prosimy o kontakt z administratorem serwera (Domena: {{domain}}, Kod błędu: {{ errorCode }}).",
+    "membership_manager": "Błąd menedżera członkostwa",
+    "membership_manager_description": "Menedżer członkostwa został zamknięty przez zbyt wiele powtarzających się błędów połączenia.",
+    "no_matrix_2_authorization_service": "Usługa autoryzacji dla serwera multimediów (SFU) jest nieaktualna.",
     "open_elsewhere": "Otwarto w innej karcie",
     "open_elsewhere_description": "{{brand}} został otwarty w innej karcie. Jeśli tak nie jest, spróbuj odświeżyć stronę.",
+    "peer_connection_timeout": "Upłynął limit czasu połączenia",
+    "peer_connection_timeout_description": "Upłynął czas oczekiwania na połączenie z serwerem multimediów. Spróbuj połączyć się z inną siecią lub wyłączyć VPN. Jeśli problem nadal występuje, zapoznaj się z naszym <0>poradnikiem rozwiązywania problemów</0> lub skontaktuj się z administratorem serwera.",
     "room_creation_restricted": "Nie udało się utworzyć połączenia",
     "room_creation_restricted_description": "Tworzenie połączeń mogło zostać ograniczone tylko do autoryzowanych użytkowników. Spróbuj ponownie później lub skontaktuj się z administratorem serwera, jeśli problem nie minie.",
+    "sticky_events_required": "Serwer domowy nie wspiera połączeń Matrix 2.0",
+    "sticky_events_required_description": "Wybrana konfiguracja została ustawiona na korzystanie z połączeń Matrix 2.0, lecz serwer domowy nie wspiera ogłaszania sticky events (MSC4354). Poproś administratora serwera o aktualizację lub zmień konfigurację.",
     "unexpected_ec_error": "Wystąpił nieoczekiwany błąd (<0>Kod błędu:</0> <1>{{ errorCode }}</1>). Skontaktuj się z administratorem serwera."
   },
   "group_call_loader": {
     "banned_body": "Zostałeś zbanowany z pokoju.",
     "banned_heading": "Zbanowany",
-    "call_ended_body": "Zostałeś usunięty z rozmowy.",
+    "call_ended_body": "Zostałeś usunięty z połączenia.",
     "call_ended_heading": "Połączenie zakończone",
     "knock_reject_body": "Członkowie pokoju odrzucili Twoją prośbę o dołączenie.",
     "knock_reject_heading": "Nie możesz dołączyć",
@@ -112,17 +147,18 @@
   },
   "join_existing_call_modal": {
     "join_button": "Tak, dołącz do połączenia",
-    "text": "Te połączenie już istnieje, czy chcesz do niego dołączyć?",
+    "text": "Połączenie już istnieje, czy chcesz do niej dołączyć?",
     "title": "Dołączyć do istniejącego połączenia?"
   },
   "layout_grid_label": "Siatka",
   "layout_spotlight_label": "Centrum uwagi",
+  "layout_switch_label": "Układ",
   "lobby": {
-    "ask_to_join": "Poproś o dołączenie do rozmowy",
+    "ask_to_join": "Poproś o dołączenie do połączenia",
     "join_as_guest": "Dołącz jako gość",
     "join_button": "Dołącz do połączenia",
     "leave_button": "Wróć do ostatnie",
-    "waiting_for_invite": "Żądanie wysłane"
+    "waiting_for_invite": "Prośba wysłana! Oczekiwanie na zatwierdzenie…"
   },
   "log_in": "Zaloguj",
   "logging_in": "Logowanie…",
@@ -162,14 +198,15 @@
   "screenshare_button_label": "Udostępnij ekran",
   "settings": {
     "audio_tab": {
-      "effect_volume_description": "Dostosuj głośność, z jaką odtwarzane są efekty reakcji i podniesionej ręki",
-      "effect_volume_label": "Głośność efektu dźwiękowego"
+      "effect_volume_description": "Dostosuj głośność efektów reakcji i podniesienia ręki.",
+      "effect_volume_label": "Głośność efektów dźwiękowych"
     },
     "background_blur_header": "Tło",
     "background_blur_label": "Rozmycie tła wideo",
     "blur_not_supported_by_browser": "(Rozmycie tła nie jest wspierane przez to urządzenie.)",
     "developer_tab_title": "Programista",
     "devices": {
+      "activating": "Aktywuję…",
       "camera": "Kamera",
       "camera_numbered": "Kamera {{n}}",
       "change_device_button": "Zmień urządzenie audio",
@@ -192,7 +229,7 @@
     "preferences_tab": {
       "developer_mode_label": "Tryb programisty",
       "developer_mode_label_description": "Włącz tryb programisty i wyświetl kartę ustawień programisty.",
-      "introduction": "Tutaj możesz skonfigurować dodatkowe opcje dla lepszych doświadczeń.",
+      "introduction": "Tutaj możesz skonfigurować dodatkowe opcje dla lepszego komfortu użytkowania.",
       "reactions_play_sound_description": "Odtwórz efekt dźwiękowy, gdy ktoś wyślę reakcję w trakcie połączenia.",
       "reactions_play_sound_label": "Odtwórz dźwięki reakcji",
       "reactions_show_description": "Odtwórz animację, gdy ktoś wyślę reakcję.",
@@ -201,26 +238,31 @@
       "show_hand_raised_timer_label": "Pokaż czas po podniesieniu ręki"
     }
   },
-  "star_rating_input_label_one": "{{count}} gwiazdki",
-  "star_rating_input_label_other": "{{count}} gwiazdki",
+  "star_rating_input_label_one": "{{count}} gwiazdka",
+  "star_rating_input_label_few": "{{count}} gwiazdki",
+  "star_rating_input_label_many": "{{count}} gwiazdek",
   "start_new_call": "Rozpocznij nowe połączenie",
   "start_video_button_label": "Rozpocznij wideo",
   "stop_screenshare_button_label": "Udostępnianie ekranu",
   "stop_video_button_label": "Zakończ wideo",
   "submitting": "Wysyłanie…",
   "switch_camera": "Przełącz kamerę",
+  "technical_details": "Szczegóły techniczne",
   "unauthenticated_view_body": "Nie masz konta? <2>Utwórz je</2>",
-  "unauthenticated_view_login_button": "Zaloguj się do swojego konta",
+  "unauthenticated_view_login_button": "Zaloguj się na swoje konto",
   "unauthenticated_view_ssla_caption": "Klikając \"Przejdź\", wyrażasz zgodę na naszą <2>Umowę licencyjną oprogramowania i usług (SSLA)</2>",
-  "unmute_microphone_button_label": "Odcisz mikrofon",
-  "version": "Wersja: {{version}}",
+  "unmute_microphone_button_label": "Wyłącz wyciszenie mikrofonu",
+  "version": "{{productName}} wersja: {{version}}",
   "video_tile": {
     "always_show": "Zawsze pokazuj",
+    "call_ended": "Połączenie zakończone",
+    "calling": "Łączenie...",
     "camera_starting": "Wczytywanie wideo...",
     "collapse": "Zwiń",
     "expand": "Rozwiń",
     "mute_for_me": "Wycisz dla mnie",
     "muted_for_me": "Wyciszone dla mnie",
+    "screen_share_volume": "Głośność udostępniania ekranu",
     "volume": "Głośność",
     "waiting_for_media": "Oczekiwanie na media..."
   }

package.json

@@ -30,8 +30,8 @@
     "test:storybook": "vitest --project=storybook",
     "test:unit": "vitest --project=unit",
     "test:coverage": "vitest --coverage",
-    "backend": "docker-compose -f dev-backend-docker-compose.yml up",
-    "backend-playwright": "docker-compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up",
+    "backend": "docker-compose -f docker-compose-dev.yml up",
+    "backend-playwright": "docker-compose -f docker-compose-dev.yml -f docker-compose-playwright.yml up",
     "test:playwright": "playwright test",
     "test:playwright:open": "pnpm test:playwright --ui",
     "links:on": "cp scripts/.pnpmfile.cjs .pnpmfile.cjs & pnpm install",
@@ -54,6 +54,7 @@
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@react-spring/web": "^10.0.0",
+    "@rolldown/plugin-babel": "^0.2.3",
     "@sentry/react": "^8.0.0",
     "@sentry/vite-plugin": "^3.0.0",
     "@storybook/addon-docs": "^10.3.6",
@@ -76,17 +77,18 @@
     "@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",
-    "@vitest/ui": "4.1.9",
+    "@vitest/ui": "4.1.10",
+    "babel-plugin-react-compiler": "^1.0.0",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.3",
     "eslint-plugin-element-call": "link:eslint",
     "eslint-plugin-storybook": "^10.3.6",
     "fetch-mock": "11.1.5",
-    "i18next": "^25.0.0",
+    "i18next": "^26.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-cli": "^1.61.0",
     "jsdom": "^26.0.0",
@@ -95,17 +97,17 @@
     "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",
-    "oxfmt": "^0.56.0",
+    "oxfmt": "^0.61.0",
     "oxlint": "^1.70.0",
-    "oxlint-tsgolint": "^0.23.0",
+    "oxlint-tsgolint": "^0.25.0",
     "pako": "^2.0.4",
     "postcss": "^8.4.41",
     "postcss-preset-env": "^10.0.0",
-    "posthog-js": "1.374.0",
+    "posthog-js": "1.408.2",
     "qrcode": "^1.5.4",
     "react": "19",
     "react-dom": "19",
@@ -129,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-backend-docker-compose.override.yml

@@ -1,7 +0,0 @@
-services:
-  synapse:
-    volumes:
-      - ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z
-  synapse-1:
-    volumes:
-      - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z

playwright-backend-docker-compose.yml

@@ -1,2 +0,0 @@
-include:
-  - dev-backend-docker-compose.yml

playwright/spa-helpers.ts

@@ -125,21 +125,10 @@ async function expectVideoTilesCount(page: Page, count: number): Promise<void> {
   });
 
   // There should be `count` video elements, visible and autoplaying
-  await expect(page.locator("video")).toHaveCount(count);
-
-  await expect(async () => {
-    const videoBlockCount = await page
-      .locator("video")
-      .evaluateAll(
-        (videos: Element[]) =>
-          videos.filter(
-            (v: Element) => window.getComputedStyle(v).display === "block",
-          ).length,
-      );
-    expect(videoBlockCount).toBe(count);
-  }).toPass({
-    timeout: 10000,
-  });
+  await expect(page.locator("video").filter({ visible: true })).toHaveCount(
+    count,
+    { timeout: 10000 },
+  );
 }
 
 export const SpaHelpers = {

playwright/widget/pip-call-button-interaction.test.ts

@@ -36,6 +36,7 @@ widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => {
   await valere.page.waitForTimeout(600);
 
   // Switch to the other room, the call should go to PIP
+  await TestHelpers.expandRoomList(valere.page);
   await TestHelpers.switchToRoomNamed(valere.page, "OtherRoom");
 
   // We should see the PIP overlay

playwright/widget/pip-call.test.ts

@@ -53,6 +53,7 @@ widgetTest("Put call in PIP", async ({ addUser, browserName }) => {
   });
 
   // Switch to the other room, the call should go to PIP
+  await TestHelpers.expandRoomList(valere.page);
   await TestHelpers.switchToRoomNamed(valere.page, "DoubleTask");
 
   // We should see the PIP overlay

playwright/widget/test-helpers.ts

@@ -73,9 +73,6 @@ export class TestHelpers {
     audioOnly: boolean = false,
     isDM: boolean = false,
   ): Promise<void> {
-    // XXX This using the notification toast to join the room.
-    // Not the button in the header
-
     await page.waitForTimeout(3000);
     const label = isDM
       ? audioOnly
@@ -85,7 +82,9 @@ export class TestHelpers {
     await expect(page.getByText(label)).toBeVisible({
       timeout: 10000,
     });
-    await page.getByRole("button", { name: "Join" }).click({
+    // XXX This using the notification toast to join the room.
+    // Not the buttons in the header or timeline
+    await page.getByRole("alert").getByRole("button", { name: "Join" }).click({
       timeout: 5000,
     });
   }
@@ -347,6 +346,12 @@ export class TestHelpers {
     }
   }
 
+  public static async expandRoomList(page: Page): Promise<void> {
+    await page
+      .getByRole("separator", { name: "Click or drag to expand" })
+      .click();
+  }
+
   /**
    * Switches to a room in the room list by its name.
    * @param page - The EW page
@@ -385,25 +390,9 @@ export class TestHelpers {
     frame: FrameLocator,
     count: number,
   ): Promise<void> {
-    // XXX we need to be better at our HTML markup and accessibility, it would make
-    // this kind of stuff way easier to test if we could look out for aria attributes.
-    await expect
-      .poll(
-        async () => {
-          return await frame
-            .locator("video")
-            .evaluateAll(
-              (videos: Element[]) =>
-                videos.filter(
-                  (v: Element) =>
-                    window.getComputedStyle(v).display === "block",
-                ).length,
-            );
-        },
-        {
-          timeout: 10000,
-        },
-      )
-      .toBe(count);
+    await expect(frame.locator("video").filter({ visible: true })).toHaveCount(
+      count,
+      { timeout: 10000 },
+    );
   }
 }

playwright/widget/voice-call-dm.spec.ts

@@ -39,7 +39,10 @@ widgetTest(
     ).toBeVisible();
 
     await expect(whistler.page.getByText("Incoming voice call")).toBeVisible();
-    await whistler.page.getByRole("button", { name: "Join" }).click();
+    await whistler.page
+      .getByRole("alert")
+      .getByRole("button", { name: "Join" })
+      .click();
 
     await expect(
       whistler.page.locator('iframe[title="Element Call"]'),
@@ -129,7 +132,10 @@ widgetTest(
     ).toBeVisible();
 
     await expect(whistler.page.getByText("Incoming video call")).toBeVisible();
-    await whistler.page.getByRole("button", { name: "Join" }).click();
+    await whistler.page
+      .getByRole("alert")
+      .getByRole("button", { name: "Join" })
+      .click();
 
     await expect(
       whistler.page.locator('iframe[title="Element Call"]'),

pnpm-workspace.yaml

@@ -1,10 +1,15 @@
+minimumReleaseAgeExclude:
+  - "@vector-im/compound-design-tokens"
+  - "@vector-im/compound-web"
+  - matrix-js-sdk
+  - matrix-widget-api
 allowBuilds:
   "@parcel/watcher": true
   "@sentry/cli": true
   "@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
@@ -24,12 +29,30 @@ overrides:
   # Security fixes:
   # - https://github.com/element-hq/element-call/security/dependabot/110
   # - https://github.com/element-hq/element-call/security/dependabot/122
-  "qs": "^6.14.1"
-  # Security fix: https://github.com/element-hq/element-call/security/dependabot/106
-  "js-yaml": "^4.1.1"
+  # - https://github.com/element-hq/element-call/security/dependabot/179
+  "qs": "^6.15.2"
+  # Security fixes:
+  # - https://github.com/element-hq/element-call/security/dependabot/106
+  # - https://github.com/element-hq/element-call/security/dependabot/203
+  "js-yaml": "^4.2.0"
   # Storybook declares support for 0.27.0 only but empirically works fine with 0.28.0.
   "esbuild": "^0.28.0"
-  # Multiple security fixes: https://github.com/nodejs/undici/releases/tag/v6.24.0
-  "undici": "^6.24.0"
+  # Security fixes:
+  # - https://github.com/nodejs/undici/releases/tag/v6.24.0
+  # - https://github.com/element-hq/element-call/security/dependabot/201
+  # - https://github.com/element-hq/element-call/security/dependabot/199
+  "undici": "^6.27.0"
   # Security fix: https://github.com/advisories/GHSA-rf6f-7fwh-wjgh
   "flatted": "^3.4.2"
+  # Security fix: https://github.com/element-hq/element-call/security/dependabot/184
+  "ws": "^8.21.0"
+  # Security fixes:
+  # - https://github.com/element-hq/element-call/security/dependabot/191
+  # - https://github.com/element-hq/element-call/security/dependabot/190
+  # - https://github.com/element-hq/element-call/security/dependabot/192
+  # - https://github.com/element-hq/element-call/security/dependabot/194
+  # - https://github.com/element-hq/element-call/security/dependabot/198
+  # - https://github.com/element-hq/element-call/security/dependabot/196
+  # - https://github.com/element-hq/element-call/security/dependabot/195
+  # - https://github.com/element-hq/element-call/security/dependabot/193
+  "dompurify": "^3.4.11"

renovate.json

@@ -61,6 +61,15 @@
     {
       "groupName": "Pnpm",
       "matchDepNames": ["pnpm"]
+    },
+    {
+      "description": "Update the element-web image digest daily, in its own PR",
+      "groupName": "Element Web",
+      "matchPackageNames": ["ghcr.io/element-hq/element-web"],
+      "matchUpdateTypes": ["digest"],
+      "schedule": ["* 0-3 * * *"],
+      "minimumReleaseAge": null,
+      "automerge": true
     }
   ],
   "semanticCommits": "disabled",

sdk/helper.ts

@@ -15,9 +15,8 @@ import { scan } from "rxjs";
 import { type WidgetHelpers } from "../src/widget";
 import { type LivekitRoomItem } from "../src/state/CallViewModel/CallViewModel";
 
-export const logger = rootLogger.getChild("[MatrixRTCSdk]");
-
 export const tryMakeSticky = (widget: WidgetHelpers): void => {
+  const logger = rootLogger.getChild("[MatrixRTCSdk]");
   logger.info("try making sticky MatrixRTCSdk");
   void widget.api
     .setAlwaysOnScreen(true)

sdk/main.ts

@@ -52,7 +52,8 @@ import { getUrlParams } from "../src/UrlParams";
 import { MuteStates } from "../src/state/MuteStates";
 import { MediaDevices } from "../src/state/MediaDevices";
 import { E2eeType } from "../src/e2ee/e2eeType";
-import { currentAndPrev, logger, TEXT_LK_TOPIC, tryMakeSticky } from "./helper";
+import { currentAndPrev, TEXT_LK_TOPIC, tryMakeSticky } from "./helper";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
   ElementWidgetActions,
   widget as _widget,
@@ -104,6 +105,7 @@ export async function createMatrixRTCSdk(
   id: string = "",
   sticky: boolean = false,
 ): Promise<MatrixRTCSdk> {
+  const logger = rootLogger.getChild("[MatrixRTCSdk]");
   const scope = new ObservableScope();
 
   // widget client

src/App.tsx

@@ -30,7 +30,7 @@ import { useTheme } from "./useTheme";
 import { ProcessorProvider } from "./livekit/TrackProcessorContext";
 import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
-import { getUrlParams, HeaderStyle } from "./UrlParams";
+import { getUrlParams, HeaderStyle, useUrlParams } from "./UrlParams";
 import { AppBar } from "./AppBar";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
@@ -41,19 +41,17 @@ interface SimpleProviderProps {
 
 const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
+  const { background } = useUrlParams();
 
   useEffect(() => {
-    let backgroundImage = "";
-    if (!["/login", "/register"].includes(pathname) && !widget) {
-      backgroundImage = "var(--background-gradient)";
-    }
+    document
+      .getElementsByTagName("body")[0]
+      .setAttribute("data-background", background);
+  }, [pathname, background]);
 
-    document.getElementsByTagName("body")[0].style.backgroundImage =
-      backgroundImage;
-  }, [pathname]);
-
-  return <>{children}</>;
+  return children;
 };
+
 const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
   useTheme();
   return children;

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/UrlParams.test.ts

@@ -16,12 +16,15 @@ import {
   HeaderStyle,
   getUrlParams,
 } from "../src/UrlParams";
+import { mockConfig } from "./utils/test";
 
 const ROOM_NAME = "roomNameHere";
 const ROOM_ID = "!d45f138fsd";
 const ORIGIN = "https://call.element.io";
 const HOMESERVER = "localhost";
 
+mockConfig();
+
 describe("UrlParams", () => {
   describe("handles URL with /room/", () => {
     it("and nothing else", () => {

src/UrlParams.ts

@@ -45,6 +45,11 @@ export enum HeaderStyle {
   AppBar = "app_bar",
 }
 
+export enum BackgroundStyle {
+  Solid = "solid",
+  Gradient = "gradient",
+}
+
 /**
  * The UrlProperties are used to pass required data to the widget.
  * Those are different in different rooms, users, devices. They do not configure the behavior of the
@@ -145,6 +150,10 @@ export interface UrlProperties {
    * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
    */
   theme: string | null;
+  /**
+   * The visual style of the page background.
+   */
+  background: BackgroundStyle;
 }
 
 /**
@@ -452,6 +461,9 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     fonts: parser.getAllParams("font"),
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
     theme: parser.getParam("theme"),
+    background:
+      parser.getEnumParam("background", BackgroundStyle) ??
+      BackgroundStyle.Gradient,
     viaServers: !isWidget ? parser.getParam("viaServers") : null,
     homeserver: !isWidget ? parser.getParam("homeserver") : null,
     posthogApiHost: parser.getParam("posthogApiHost"),

src/button/Button.module.css

@@ -5,10 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-.endCall > svg {
-  color: var(--stopgap-color-on-solid-accent);
-}
-
 .rotate > svg {
   animation: spin 1s linear infinite;
 }

src/button/Button.tsx

@@ -135,21 +135,12 @@ interface EndCallButtonProps extends ComponentPropsWithoutRef<"button"> {
   size?: "md" | "lg";
 }
 
-export const EndCallButton: FC<EndCallButtonProps> = ({
-  className,
-  ...props
-}) => {
+export const EndCallButton: FC<EndCallButtonProps> = (props) => {
   const { t } = useTranslation();
 
   return (
     <Tooltip label={t("hangup_button_label")}>
-      <CpdButton
-        className={classNames(className, styles.endCall)}
-        iconOnly
-        Icon={EndCallIcon}
-        destructive
-        {...props}
-      />
+      <CpdButton iconOnly Icon={EndCallIcon} destructive {...props} />
     </Tooltip>
   );
 };

src/components/CallFooter.module.css

@@ -19,11 +19,6 @@ Please see LICENSE in the repository root for full details.
   padding-right: calc(env(safe-area-inset-right) + var(--cpd-space-6x));
   padding-block: var(--cpd-space-10x)
     calc(env(safe-area-inset-bottom) + var(--cpd-space-10x));
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    var(--cpd-color-bg-canvas-default) 100%
-  );
 }
 
 .footer.hidden {

src/components/CallFooter.stories.tsx

@@ -16,10 +16,12 @@ import inCallViewStyles from "../room/InCallView.module.css";
 import { useStaticViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
-import { type GridMode } from "../state/CallViewModel/CallViewModel";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { MediaDevices } from "../state/MediaDevices";
 import { globalScope } from "../state/ObservableScope";
+import { constant } from "../state/Behavior";
+import { type LayoutMode } from "../state/LayoutSwitchViewModel";
+
 // consts for tests
 const reactionIdentifier = "@user:example.com:DEVICE";
 const reactionData = {
@@ -32,6 +34,7 @@ const mediaDevices = new MediaDevices(globalScope);
 /**
  * A wrapper component that is used for:
  *  - exposing the snapshot via props so the storybook documents the snapshot properties (basically unpack them form the vm)
+ *  - constructing the layout switch view model
  *  - Add additional react context
  * The paraeters are all params from the FooterSnapshot,
  * the Snapshot of the vm, the wrapper will create a mocked vm from it and pass it to the CallFooter.
@@ -40,11 +43,18 @@ const mediaDevices = new MediaDevices(globalScope);
  */
 function CallFooterStoryWrapper({
   children,
+  layout,
+  setLayout,
   ...vmSnapshot
-}: FooterSnapshot & {
+}: Omit<FooterSnapshot, "layoutSwitchVm"> & {
   children?: false | JSX.Element | JSX.Element[] | undefined;
+  layout: LayoutMode | null;
+  setLayout: (value: LayoutMode) => void;
 }): ReactNode {
-  const vm = useStaticViewModel(vmSnapshot);
+  const vm = useStaticViewModel({
+    ...vmSnapshot,
+    layoutSwitchVm: layout && { layout$: constant(layout), setLayout },
+  });
   return (
     <MediaDevicesContext value={mediaDevices}>
       <div className={inCallViewStyles.inRoom}>
@@ -62,28 +72,50 @@ function CallFooterStoryWrapper({
   );
 }
 
-const meta = {
-  component: CallFooterStoryWrapper,
-} satisfies Meta<typeof CallFooterStoryWrapper>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
 const fnArgType = {
   control: { type: "select" as const },
   options: ["MockedCallback", "undefined"],
   mapping: { MockedCallback: fn(), undefined: undefined },
 };
 
+const meta = {
+  component: CallFooterStoryWrapper,
+  argTypes: {
+    layout: {
+      control: "radio",
+      options: ["grid", "spotlight"] satisfies LayoutMode[],
+    },
+    audioOutputSwitcher: {
+      control: "select",
+      options: ["NoOutputCallback", "speaker", "earpiece"],
+      table: { defaultValue: { summary: "NoOutputCallback" } },
+      mapping: {
+        NoOutputCallback: undefined,
+        // This is inverersed (speaker<->earpice) because the switcher object stores the target output, not the current one.
+        speaker: { targetOutput: "earpiece", switch: fn() },
+        earpiece: { targetOutput: "speaker", switch: fn() },
+      },
+    },
+    toggleScreenSharing: fnArgType,
+    openSettings: fnArgType,
+    toggleAudio: fnArgType,
+    toggleVideo: fnArgType,
+    hangup: fnArgType,
+  },
+} satisfies Meta<typeof CallFooterStoryWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
 export const Default: Story = {
   args: {
     showLogo: false,
-    layoutMode: "grid",
+    layout: "grid",
+    setLayout: fn(),
     audioEnabled: true,
     audioBusy: false,
     videoEnabled: true,
     videoBusy: false,
-    setLayoutMode: fn(),
     openSettings: fn(),
     toggleAudio: fn(),
     toggleVideo: fn(),
@@ -111,29 +143,6 @@ export const Default: Story = {
   parameters: {
     layout: "fullscreen",
   },
-  argTypes: {
-    layoutMode: {
-      control: "radio",
-      options: ["grid", "spotlight"] satisfies GridMode[],
-    },
-    audioOutputSwitcher: {
-      control: "select",
-      options: ["NoOutputCallback", "speaker", "earpiece"],
-      table: { defaultValue: { summary: "NoOutputCallback" } },
-      mapping: {
-        NoOutputCallback: undefined,
-        // This is inverersed (speaker<->earpice) because the switcher object stores the target output, not the current one.
-        speaker: { targetOutput: "earpiece", switch: fn() },
-        earpiece: { targetOutput: "speaker", switch: fn() },
-      },
-    },
-    toggleScreenSharing: fnArgType,
-    setLayoutMode: fnArgType,
-    openSettings: fnArgType,
-    toggleAudio: fnArgType,
-    toggleVideo: fnArgType,
-    hangup: fnArgType,
-  },
 };
 
 export const WithAudioAndVideoOptions: Story = {
@@ -194,7 +203,7 @@ export const AudioVideoEnabled: Story = {
 
     const spotlightRadio = canvas.getByRole("radio", { name: "Spotlight" });
     await userEvent.click(spotlightRadio);
-    await expect(args.setLayoutMode).toHaveBeenCalledWith("spotlight");
+    await expect(args.setLayout).toHaveBeenCalledWith("spotlight");
 
     const micButtonMute = canvas.getByRole("switch", {
       name: "Mute microphone",
@@ -225,14 +234,14 @@ export const SpotlightMode: Story = {
   ...Default,
   args: {
     ...Default.args,
-    layoutMode: "spotlight",
+    layout: "spotlight",
   },
   play: async ({ args, canvasElement }) => {
     const canvas = within(canvasElement);
 
     const spotlightRadio = canvas.getByRole("radio", { name: "Grid" });
     await userEvent.click(spotlightRadio);
-    await expect(args.setLayoutMode).toHaveBeenCalledWith("grid");
+    await expect(args.setLayout).toHaveBeenCalledWith("grid");
   },
 };
 
@@ -264,7 +273,7 @@ export const Pip: Story = {
   args: {
     ...Default.args,
     buttonSize: "md",
-    layoutMode: undefined,
+    layout: null,
   },
   play: async ({ args, canvasElement }) => {
     const canvas = within(canvasElement);
@@ -348,7 +357,7 @@ export const Lobby: Story = {
     ...Default.args,
     showLogo: false,
     openSettings: undefined,
-    setLayoutMode: undefined,
+    layout: null,
     toggleScreenSharing: undefined,
   },
   parameters: {
@@ -362,7 +371,7 @@ export const LobbyMobile: Story = {
     ...Default.args,
     showLogo: false,
 
-    setLayoutMode: undefined,
+    layout: null,
     toggleScreenSharing: undefined,
   },
   globals: {
@@ -379,7 +388,7 @@ export const LobbyRecentButton: Story = {
     ...Default.args,
     children: <Link>Back To Recents</Link>,
     showLogo: false,
-    setLayoutMode: undefined,
+    layout: null,
     toggleScreenSharing: undefined,
   },
   parameters: {
@@ -393,7 +402,7 @@ export const LobbyRecentButtonMobile: Story = {
     ...Default.args,
     children: <Link>Back To Recents</Link>,
     showLogo: false,
-    setLayoutMode: undefined,
+    layout: null,
     toggleScreenSharing: undefined,
   },
   globals: {

src/components/CallFooter.tsx

@@ -7,12 +7,6 @@ Please see LICENSE in the repository root for full details.
 
 import { type FC, type JSX, type Ref, useMemo } from "react";
 import classNames from "classnames";
-import {
-  SpotlightIcon,
-  GridIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
-import { Switch } from "@vector-im/compound-web";
-import { t } from "i18next";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -28,13 +22,15 @@ import {
   type ReactionData,
 } from "../button";
 import styles from "./CallFooter.module.css";
-import { type GridMode } from "../state/CallViewModel/CallViewModel";
 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";
+import { LayoutSwitch } from "../room/LayoutSwitch";
 
 export interface AudioOutputSwitcher {
   targetOutput: string;
@@ -61,8 +57,6 @@ export interface FooterActions {
   /** Also controls if the videoMute button is disabled */
   toggleVideo: (() => void) | undefined;
   toggleBlur: (() => void) | undefined;
-  /** Also controls if the layout button is visible */
-  setLayoutMode: ((mode: GridMode) => void) | undefined;
   toggleScreenSharing: (() => void) | undefined;
   /** Also controls if the settings button is visible */
   openSettings: (() => void) | undefined;
@@ -87,7 +81,8 @@ export interface FooterState {
   buttonSize: "md" | "lg";
   showLogo: boolean;
 
-  layoutMode: GridMode | undefined;
+  /** Also controls if the layout switch is visible */
+  layoutSwitchVm: LayoutSwitchViewModel | null;
 
   sharingScreen: boolean;
 
@@ -112,16 +107,21 @@ export interface FooterState {
 }
 
 export interface FooterProps {
+  className?: string;
   ref?: Ref<HTMLDivElement>;
   children?: JSX.Element | JSX.Element[] | false;
   vm: ViewModel<FooterSnapshot>;
 }
-export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
+export const CallFooter: FC<FooterProps> = ({
+  className,
+  ref,
+  children,
+  vm,
+}) => {
   const asOverlay = useBehavior(vm.asOverlay$);
   const showFooter = useBehavior(vm.showFooter$);
   const hideControls = useBehavior(vm.hideControls$);
-  const layoutMode = useBehavior(vm.layoutMode$);
-  const setLayoutMode = useBehavior(vm.setLayoutMode$);
+  const layoutSwitchVm = useBehavior(vm.layoutSwitchVm$);
   const openSettings = useBehavior(vm.openSettings$);
   const audioEnabled = useBehavior(vm.audioEnabled$);
   const audioBusy = useBehavior(vm.audioBusy$);
@@ -136,7 +136,6 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
   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$);
@@ -284,7 +283,9 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
           />
         </>
       )}
-      {debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
+      {debugTileLayout ? (
+        <TilesDebugInfo generation$={vm.tileStoreGeneration$} />
+      ) : undefined}
     </div>
   );
 
@@ -292,7 +293,7 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
     <div
       ref={ref}
       data-testid="footer-container"
-      className={classNames(styles.footer, {
+      className={classNames(className, styles.footer, {
         [styles.overlay]: asOverlay,
         [styles.hidden]: !showFooter,
       })}
@@ -311,21 +312,20 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
         {(showLogo || debugTileLayout) && logoDebugContainer}
       </div>
       {!hideControls && <div className={styles.buttons}>{buttons}</div>}
-      {!hideControls && setLayoutMode && layoutMode && (
-        <Switch<"spotlight", "grid">
-          name="layoutMode"
-          aria-label={t("layout_switch_label")}
-          leftLabel={t("layout_spotlight_label")}
-          leftValue="spotlight"
-          leftIcon={SpotlightIcon}
-          rightLabel={t("layout_grid_label")}
-          rightValue="grid"
-          rightIcon={GridIcon}
-          className={styles.layout}
-          value={layoutMode}
-          onChange={setLayoutMode}
-        />
+      {!hideControls && layoutSwitchVm && (
+        <LayoutSwitch vm={layoutSwitchVm} className={styles.layout} />
       )}
     </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.tsx

@@ -182,14 +182,7 @@ export function createCallFooterViewModel(
 
     showLogo$: scope.behavior(isPip$.pipe(map((isPip) => showLogo && !isPip))),
 
-    layoutMode$: callModel.gridMode$,
-    setLayoutMode$: scope.behavior(
-      isPip$.pipe(
-        map((isPip) =>
-          !isPip && showControls ? callModel.setGridMode : undefined,
-        ),
-      ),
-    ),
+    layoutSwitchVm$: callModel.layoutSwitchVm$,
 
     sharingScreen$: callModel.sharingScreen$,
     toggleScreenSharing$: constant(callModel.toggleScreenSharing ?? undefined),
@@ -247,20 +240,18 @@ export function createLobbyFooterViewModel(
       hideControls: false,
       asOverlay: false,
       buttonSize: "lg",
-      showLayoutSwitcher: false,
       openSettings,
       hangup,
       debugTileLayout: false,
       showFooter: true,
       toggleAudio: undefined,
       toggleVideo: undefined,
-      setLayoutMode: undefined,
       toggleScreenSharing: undefined,
       audioEnabled: undefined,
       audioBusy: false,
       videoEnabled: undefined,
       videoBusy: false,
-      layoutMode: undefined,
+      layoutSwitchVm: null,
       sharingScreen: false,
       audioOutputSwitcher: undefined,
       reactionIdentifier: undefined,

src/config/ConfigOptions.ts

@@ -74,10 +74,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;
   };
 
@@ -105,6 +102,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.
@@ -183,14 +235,26 @@ export interface ConfigOptions {
 // Overrides members from ConfigOptions that are always provided by the
 // default config and are therefore non-optional.
 export interface ResolvedConfigOptions extends ConfigOptions {
-  default_server_config: {
-    ["m.homeserver"]: {
-      base_url: string;
-      server_name: string;
-    };
-  };
   sync_disconnect_grace_period_ms: number;
   ssla: string;
+  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: {
     wait_for_key_rotation_ms?: number;
     delayed_leave_event_delay_ms: number;
@@ -202,17 +266,24 @@ export interface ResolvedConfigOptions extends ConfigOptions {
 }
 
 export const DEFAULT_CONFIG: ResolvedConfigOptions = {
-  default_server_config: {
-    ["m.homeserver"]: {
-      base_url: "http://localhost:8008",
-      server_name: "localhost",
-    },
-  },
   features: {
     feature_use_device_session_member_events: true,
   },
   sync_disconnect_grace_period_ms: 10000,
   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,

src/e2ee/matrixKeyProvider.ts

@@ -10,15 +10,15 @@ import {
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
-const logger = rootLogger.getChild("[MatrixKeyProvider]");
 
 export class MatrixKeyProvider extends BaseKeyProvider {
   private rtcSession?: MatrixRTCSession;
-
+  private logger: Logger;
   public constructor() {
     super({ ratchetWindowSize: 10, keyringSize: 256 });
+    this.logger = rootLogger.getChild("[MatrixKeyProvider]");
   }
 
   public setRTCSession(rtcSession: MatrixRTCSession): void {
@@ -60,12 +60,12 @@ export class MatrixKeyProvider extends BaseKeyProvider {
             encryptionKeyIndex,
           );
 
-          logger.debug(
+          this.logger.debug(
             `Sent new key to livekit room=${this.rtcSession?.room.roomId} participantId=${rtcBackendIdentity} (before hash: ${membershipParts.userId}:${membershipParts.deviceId}) encryptionKeyIndex=${encryptionKeyIndex}`,
           );
         },
         (e) => {
-          logger.error(
+          this.logger.error(
             `Failed to create key material from buffer for livekit room=${this.rtcSession?.room.roomId} participantId before hash=${membershipParts.userId}:${membershipParts.deviceId} encryptionKeyIndex=${encryptionKeyIndex}`,
             e,
           );

src/graphics/backgroundGradient.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/loggedOutGradient.svg

@@ -1,48 +0,0 @@
-<svg width="1440" height="500" viewBox="0 0 1440 500" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_f_4162_80135)">
-<circle cx="720" cy="1620" r="1500" fill="url(#paint0_linear_4162_80135)"/>
-<circle cx="720" cy="1620" r="1498.92" stroke="white" stroke-opacity="0.5" stroke-width="2.16028" style="mix-blend-mode:overlay"/>
-</g>
-<g filter="url(#filter1_f_4162_80135)">
-<circle cx="720" cy="1550.86" r="1272.86" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_f_4162_80135" x="-900" y="0" width="3240" height="3240" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_4162_80135"/>
-</filter>
-<filter id="filter1_f_4162_80135" x="-672.863" y="158" width="2785.73" height="2785.73" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_4162_80135"/>
-</filter>
-<linearGradient id="paint0_linear_4162_80135" x1="549.5" y1="120" x2="549.5" y2="505.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#062993"/>
-<stop offset="0.040404" stop-color="#02389D"/>
-<stop offset="0.0808081" stop-color="#0045A6"/>
-<stop offset="0.121212" stop-color="#0051AD"/>
-<stop offset="0.161616" stop-color="#005DB4"/>
-<stop offset="0.20202" stop-color="#0069BA"/>
-<stop offset="0.242424" stop-color="#0075BB"/>
-<stop offset="0.282828" stop-color="#0081BB"/>
-<stop offset="0.323232" stop-color="#008CB9"/>
-<stop offset="0.363636" stop-color="#0098B7"/>
-<stop offset="0.40404" stop-color="#00A3B3"/>
-<stop offset="0.444444" stop-color="#00AEAD"/>
-<stop offset="0.484848" stop-color="#00B8A4"/>
-<stop offset="0.525253" stop-color="#00C2A0"/>
-<stop offset="0.565657" stop-color="#00CC99"/>
-<stop offset="0.606061" stop-color="#3AD396"/>
-<stop offset="0.646465" stop-color="#5DD898"/>
-<stop offset="0.686869" stop-color="#79DD99"/>
-<stop offset="0.727273" stop-color="#92E29B"/>
-<stop offset="0.767677" stop-color="#A8E69F"/>
-<stop offset="0.808081" stop-color="#BBEAA5"/>
-<stop offset="0.848485" stop-color="#CDEEAE"/>
-<stop offset="0.888889" stop-color="#DCF2B9"/>
-<stop offset="0.929293" stop-color="#EAF6C7"/>
-<stop offset="0.969697" stop-color="#F5FBD5"/>
-</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/grid/OneOnOneDesktopLayout.tsx

@@ -10,28 +10,28 @@ import { type ReactNode, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { type OneOnOneLandscapeLayout as OneOnOneLandscapeLayoutModel } from "../state/layout-types.ts";
+import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
-import styles from "./OneOnOneLandscapeLayout.module.css";
+import styles from "./OneOnOneDesktopLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
 
 /**
- * An implementation of the "one-on-one" layout for landscape screens, in which
+ * An implementation of the "one-on-one" layout for desktop platforms, in which
  * the remote participant is shown at maximum size, overlaid by a small view of
  * the local participant.
  */
-export const makeOneOnOneLandscapeLayout: CallLayout<
-  OneOnOneLandscapeLayoutModel
+export const makeOneOnOneDesktopLayout: CallLayout<
+  OneOnOneDesktopLayoutModel
 > = ({ minBounds$ }) => ({
   foreground: "fixed",
 
-  fixed: function OneOnOneLandscapeLayoutFixed({ ref }): ReactNode {
+  fixed: function OneOnOneDesktopLayoutFixed({ ref }): ReactNode {
     useUpdateLayout();
     return <div ref={ref} />;
   },
 
-  scrolling: function OneOnOneLandscapeLayoutScrolling({
+  scrolling: function OneOnOneDesktopLayoutScrolling({
     ref,
     model,
     Slot,

src/grid/OneOnOneMobileLayout.module.css

@@ -19,14 +19,28 @@ Please see LICENSE in the repository root for full details.
   inset: var(--cpd-space-4x);
 }
 
+/* Give the PiP a landscape aspect ratio */
 .pip[data-size="sm"] {
-  inline-size: 88px;
-  block-size: 132px;
+  inline-size: 132px;
+  block-size: 88px;
 }
 
 .pip[data-size="lg"] {
-  inline-size: 140px;
-  block-size: 210px;
+  inline-size: 210px;
+  block-size: 140px;
+}
+
+@media (max-width: 600px) {
+  /* Give the PiP a portrait aspect ratio */
+  .pip[data-size="sm"] {
+    inline-size: 88px;
+    block-size: 132px;
+  }
+
+  .pip[data-size="lg"] {
+    inline-size: 140px;
+    block-size: 210px;
+  }
 }
 
 .pip[data-block-alignment="start"] {

src/grid/OneOnOneMobileLayout.tsx

@@ -9,23 +9,23 @@ Please see LICENSE in the repository root for full details.
 import { type ReactNode, useCallback } from "react";
 import classNames from "classnames";
 
-import { type OneOnOnePortraitLayout as OneOnOnePortraitLayoutModel } from "../state/layout-types.ts";
+import { type OneOnOneMobileLayout as OneOnOneMobileLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
-import styles from "./OneOnOnePortraitLayout.module.css";
+import styles from "./OneOnOneMobileLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
 
 /**
- * An implementation of the "one-on-one" layout for portrait screens, in which
+ * An implementation of the "one-on-one" layout for mobile platforms, in which
  * the remote participant is shown at maximum size, overlaid by a small view of
  * the local participant.
  */
-export const makeOneOnOnePortraitLayout: CallLayout<
-  OneOnOnePortraitLayoutModel
+export const makeOneOnOneMobileLayout: CallLayout<
+  OneOnOneMobileLayoutModel
 > = () => ({
   foreground: "scrolling",
 
-  fixed: function OneOnOnePortraitLayoutFixed({ ref, model, Slot }): ReactNode {
+  fixed: function OneOnOneMobileLayoutFixed({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     return (
       <div ref={ref} className={styles.layer}>
@@ -38,7 +38,7 @@ export const makeOneOnOnePortraitLayout: CallLayout<
     );
   },
 
-  scrolling: function OneOnOnePortraitLayoutScrolling({
+  scrolling: function OneOnOneMobileLayoutScrolling({
     ref,
     model,
     Slot,

src/grid/SpotlightLandscapeLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode } from "react";
+import { type FC, type ReactNode } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -13,6 +13,9 @@ import { type CallLayout } from "./CallLayout";
 import { type SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/layout-types.ts";
 import styles from "./SpotlightLandscapeLayout.module.css";
 import { useUpdateLayout, useVisibleTiles } from "./Grid";
+import { type MediaViewModel } from "../state/media/MediaViewModel.ts";
+import { type Behavior } from "../state/Behavior.ts";
+import { useBehavior } from "../useBehavior.ts";
 
 /**
  * An implementation of the "spotlight landscape" layout, in which the spotlight
@@ -54,16 +57,10 @@ export const makeSpotlightLandscapeLayout: CallLayout<
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
     useObservableEagerState(minBounds$);
-    const withIndicators =
-      useObservableEagerState(model.spotlight.media$).length > 1;
 
     return (
       <div ref={ref} className={styles.layer}>
-        <div
-          className={classNames(styles.spotlight, {
-            [styles.withIndicators]: withIndicators,
-          })}
-        />
+        <SpotlightSlot media$={model.spotlight.media$} />
         <div className={styles.grid}>
           {model.grid.map((m) => (
             <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
@@ -73,3 +70,20 @@ export const makeSpotlightLandscapeLayout: CallLayout<
     );
   },
 });
+
+interface SpotlightSlotProps {
+  media$: Behavior<MediaViewModel[]>;
+}
+
+// This component isolates the subscription to the spotlight media so that it
+// can change without causing the whole layout to re-render
+const SpotlightSlot: FC<SpotlightSlotProps> = ({ media$ }) => {
+  const withIndicators = useBehavior(media$).length > 1;
+  return (
+    <div
+      className={classNames(styles.spotlight, {
+        [styles.withIndicators]: withIndicators,
+      })}
+    />
+  );
+};

src/index.css

@@ -15,8 +15,7 @@ Please see LICENSE in the repository root for full details.
 @import url("@fontsource/inconsolata/700.css");
 
 @import url("normalize.css/normalize.css") layer(normalize);
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css")
-layer(compound);
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
 @import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
 
 :root {
@@ -28,12 +27,6 @@ layer(compound);
   --font-size-title: calc(24px * var(--font-scale));
   --font-size-headline: calc(32px * var(--font-scale));
 
-  /* These colors are needed during the transitionary period between the old and
-  new Compound design systems, but should be removed ASAP */
-  --stopgap-color-on-solid-accent: var(--cpd-color-bg-canvas-default);
-  --stopgap-background-85: rgba(255, 255, 255, 0.85);
-  --stopgap-bgColor3: #444;
-
   --cpd-color-border-accent: var(--cpd-color-green-800);
   /* The distance to inset non-full-width content from the edge of the window
   along the inline axis. This ramps up from 16px for typical mobile windows, to
@@ -55,7 +48,6 @@ layer(compound);
   --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
   --big-drop-shadow: 0px 0px 24px 0px #1b1d221a;
   --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  --background-gradient: url("graphics/backgroundGradient.svg");
 
   --call-view-overlay-layer: 1;
   --call-view-header-footer-layer: 2;
@@ -74,9 +66,6 @@ layer(compound);
 
 body {
   background-color: var(--cpd-color-bg-canvas-default);
-  background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
-  background-repeat: no-repeat;
-  background-position: center;
   color: var(--cpd-color-text-primary);
   color-scheme: dark;
   margin: 0;
@@ -85,6 +74,27 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
+@media (min-height: 330px) {
+  body[data-background="gradient"]::before {
+    content: "";
+    position: fixed;
+    /* 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.png");
+    background-size: max(1440px, 100vw) max(1440px, 100vh);
+    background-position: center;
+  }
+}
+
 /* This prohibits the view to scroll for pages smaller than 122px in width
 we use this for mobile pip webviews */
 .no-scroll-body {

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/input/Input.module.css

@@ -173,14 +173,6 @@ Please see LICENSE in the repository root for full details.
   border-color: var(--cpd-color-border-disabled);
 }
 
-.checkbox svg {
-  display: none;
-}
-
-.checkbox svg * {
-  stroke: var(--stopgap-color-on-solid-accent);
-}
-
 .checkboxField input[type="checkbox"]:checked + label > .checkbox {
   background: var(--cpd-color-text-action-accent);
   border-color: var(--cpd-color-text-action-accent);

src/livekit/MatrixAudioRenderer.test.tsx

@@ -99,7 +99,7 @@ function renderTestComponent(
     ),
   } as unknown as Room;
 
-  if (explicitTracks?.length ?? 0 > 0) {
+  if ((explicitTracks?.length ?? 0) > 0) {
     tracks = explicitTracks!.map(({ participantId, source, kind }) => {
       const participant =
         liveKitParticipants.find((p) => p.identity === participantId) ??

src/livekit/MatrixAudioRenderer.tsx

@@ -14,7 +14,7 @@ import {
   AudioTrack,
   type AudioTrackProps,
 } from "@livekit/components-react";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 
 import { useEarpieceAudioConfig } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
@@ -40,7 +40,6 @@ export interface MatrixAudioRendererProps {
   muted?: boolean;
 }
 
-const prefixedLogger = logger.getChild("[MatrixAudioRenderer]");
 /**
  * Takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
  *
@@ -60,6 +59,7 @@ export function LivekitRoomAudioRenderer({
   validIdentities,
   muted,
 }: MatrixAudioRendererProps): ReactNode {
+  const logger = rootLogger.getChild("[MatrixAudioRenderer]");
   const tracks = useTracks(
     [
       Track.Source.Microphone,
@@ -80,7 +80,7 @@ export function LivekitRoomAudioRenderer({
       if (!isValid) {
         // TODO make sure to also skip the warn logging for the local identity
         // Log that there is an invalid identity, that means that someone is publishing audio that is not expected to be in the call.
-        prefixedLogger.warn(
+        logger.warn(
           `Audio track ${ref.participant.identity} from ${url} has no matching matrix call member`,
           `current members: ${validIdentities.join()}`,
           `track will not get rendered`,

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.module.css

@@ -14,6 +14,23 @@ Please see LICENSE in the repository root for full details.
   overflow-y: auto;
 }
 
+/* Normally the footer uses a transparent background to allow our expressive
+page gradients to shine through. However, we sometimes need to visually separate
+it from the content underneath. If the call layout is overflowing, or if the
+spotlight tile is maximised and displaying video, apply a gradient background. */
+.overflowing > .footer,
+.fixedGrid:has(
+    > .tile[data-maximised="true"]
+      .spotlightItem[data-background="transparent"][data-video-enabled="true"][aria-hidden="false"]
+  )
+  ~ .footer {
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    var(--cpd-color-bg-canvas-default) 100%
+  );
+}
+
 .header {
   position: sticky;
   flex-shrink: 0;
@@ -82,19 +99,18 @@ Please see LICENSE in the repository root for full details.
   /* Disable pointer events so the overlay doesn't block interaction with
   elements behind it */
   pointer-events: none;
-}
 
-.fixedGrid > :not(:first-child),
-.scrollingGrid > :not(:first-child) {
-  pointer-events: initial;
+  > :not(:first-child) {
+    pointer-events: initial;
+  }
+
+  .tile {
+    position: absolute;
+    inset-block-start: 0;
+  }
 }
 
 .tile {
-  position: absolute;
-  inset-block-start: 0;
-}
-
-.tile.maximised {
   position: relative;
   flex-grow: 1;
 }

src/room/InCallView.tsx

@@ -49,8 +49,8 @@ import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { E2eeType } from "../e2ee/e2eeType";
 import { makeGridLayout } from "../grid/GridLayout";
 import { type CallLayoutOutputs } from "../grid/CallLayout";
-import { makeOneOnOneLandscapeLayout } from "../grid/OneOnOneLandscapeLayout";
-import { makeOneOnOnePortraitLayout } from "../grid/OneOnOnePortraitLayout";
+import { makeOneOnOneDesktopLayout } from "../grid/OneOnOneDesktopLayout";
+import { makeOneOnOneMobileLayout } from "../grid/OneOnOneMobileLayout";
 import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
 import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
@@ -94,8 +94,6 @@ declare module "react" {
   }
 }
 
-const logger = rootLogger.getChild("[InCallView]");
-
 export interface ActiveCallProps extends Omit<
   InCallViewProps,
   "vm" | "livekitRoom" | "connState" | "footerVm"
@@ -116,7 +114,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const mediaDevices = useMediaDevices();
   const trackProcessorState$ = useTrackProcessorObservable$();
   useEffect(() => {
-    logger.info("START CALL VIEW SCOPE");
+    rootLogger.info("START CALL VIEW SCOPE");
     const scope = new ObservableScope();
     const reactionsReader = new ReactionsReader(scope, props.rtcSession);
     const { autoLeaveWhenOthersLeft, waitForCallPickup, sendNotificationType } =
@@ -218,6 +216,7 @@ export const InCallView: FC<InCallViewProps> = ({
   muteStates,
   onShareClick,
 }) => {
+  const logger = rootLogger.getChild("[InCallView]");
   const { t } = useTranslation();
   const { sendReaction, toggleRaisedHand } = useReactionsSender();
 
@@ -259,6 +258,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const reconnecting = useBehavior(vm.reconnecting$);
   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 settingsOpen = useBehavior(vm.settingsOpen$);
@@ -468,6 +468,7 @@ export const InCallView: FC<InCallViewProps> = ({
             showRingingStatus={showRingingStatus}
             focusable={!contentObscured}
             className={classNames(className, styles.tile)}
+            itemClassName={styles.spotlightItem}
             style={style}
           />
         );
@@ -482,8 +483,8 @@ export const InCallView: FC<InCallViewProps> = ({
       "spotlight-landscape": makeSpotlightLandscapeLayout(inputs),
       "spotlight-portrait": makeSpotlightPortraitLayout(inputs),
       "spotlight-expanded": makeSpotlightExpandedLayout(inputs),
-      "one-on-one-landscape": makeOneOnOneLandscapeLayout(inputs),
-      "one-on-one-portrait": makeOneOnOnePortraitLayout(inputs),
+      "one-on-one-desktop": makeOneOnOneDesktopLayout(inputs),
+      "one-on-one-mobile": makeOneOnOneMobileLayout(inputs),
     };
   }, [gridBoundsObservable$]);
 
@@ -492,7 +493,9 @@ export const InCallView: FC<InCallViewProps> = ({
     if (layout.type === "pip") {
       return (
         <SpotlightTile
-          className={classNames(styles.tile, styles.maximised)}
+          className={styles.tile}
+          itemClassName={styles.spotlightItem}
+          data-maximised
           vm={layout.spotlight}
           expanded
           onToggleExpanded={null}
@@ -584,7 +587,7 @@ export const InCallView: FC<InCallViewProps> = ({
 
   // Only hide the settings button if we have an AppBar header and we are showing the header
   const footer = footerVm !== null && (
-    <CallFooter ref={footerRef} vm={footerVm} />
+    <CallFooter className={styles.footer} ref={footerRef} vm={footerVm} />
   );
   const allConnections = useBehavior(vm.allConnections$);
 
@@ -593,7 +596,9 @@ export const InCallView: FC<InCallViewProps> = ({
     // and the footer is also viewable by moving focus into it, so this is fine.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
-      className={styles.inRoom}
+      className={classNames(styles.inRoom, {
+        [styles.overflowing]: overflowing,
+      })}
       ref={containerRef}
       onPointerUp={onViewPointerUp}
       onPointerMove={onPointerMove}

src/room/LayoutSwitch.tsx

@@ -0,0 +1,44 @@
+/*
+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 { useId, type FC } from "react";
+import {
+  SpotlightViewIcon,
+  GridIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
+import { useBehavior } from "../useBehavior";
+import { useTranslation } from "react-i18next";
+import { Switch } from "@vector-im/compound-web";
+
+interface Props {
+  vm: LayoutSwitchViewModel;
+  className?: string;
+}
+
+export const LayoutSwitch: FC<Props> = ({ vm, className }) => {
+  const { t } = useTranslation();
+  const layout = useBehavior(vm.layout$);
+  const name = useId();
+
+  return (
+    <Switch<"spotlight", "grid">
+      name={name}
+      aria-label={t("layout_switch_label")}
+      leftLabel={t("layout_spotlight_label")}
+      leftValue="spotlight"
+      leftIcon={SpotlightViewIcon}
+      rightLabel={t("layout_grid_label")}
+      rightValue="grid"
+      rightIcon={GridIcon}
+      className={className}
+      value={layout}
+      onChange={vm.setLayout}
+    />
+  );
+};

src/room/VideoPreview.module.css

@@ -10,6 +10,8 @@ Please see LICENSE in the repository root for full details.
   margin-right: var(--content-inset-right);
   min-block-size: 0;
   block-size: 50vh;
+  aspect-ratio: 16 / 9;
+  max-width: 100%;
   border-radius: var(--cpd-space-4x);
   position: relative;
   overflow: hidden;
@@ -20,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 {
@@ -66,12 +71,6 @@ video.mirror {
   );
 }
 
-@media (min-aspect-ratio: 1 / 1) {
-  .preview > video {
-    aspect-ratio: 16 / 9;
-  }
-}
-
 @media (max-width: 550px) {
   .preview {
     margin-inline: 0;

src/room/VideoPreview.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next";
 import { TileAvatar } from "../tile/TileAvatar";
 import styles from "./VideoPreview.module.css";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import videoPlaceholder from "../graphics/video-placeholder.gif";
 
 export type MatrixInfo = {
   userId: string;
@@ -74,6 +75,9 @@ export const VideoPreview: FC<Props> = ({
         // There's no reason for this to be focusable
         tabIndex={-1}
         disablePictureInPicture
+        // Set the placeholder to a small transparent image. (On Android web
+        // views the default poster image is particularly ugly.)
+        poster={videoPlaceholder}
       />
       {(!videoEnabled || cameraIsStarting) && (
         <>

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

@@ -87,14 +87,14 @@ exports[`InCallView > rendering > renders 1`] = `
       class="_scrollingGrid_4e7ff8 _grid_b0d1cd"
     >
       <div
-        class="_layer_b00c5f"
+        class="_layer_185815"
       >
         <div
-          class="_container_b00c5f _slot_b0d1cd"
+          class="_container_185815 _slot_b0d1cd"
           data-id="1"
         >
           <div
-            class="_slot_b00c5f _local_b00c5f _slot_b0d1cd"
+            class="_slot_185815 _local_185815 _slot_b0d1cd"
             data-block-alignment="start"
             data-id="0"
             data-inline-alignment="end"
@@ -164,7 +164,7 @@ exports[`InCallView > rendering > renders 1`] = `
       class="_container_8084b5"
     />
     <div
-      class="_footer_20b7b4"
+      class="_footer_4e7ff8 _footer_20b7b4"
       data-testid="footer-container"
     >
       <div
@@ -405,7 +405,7 @@ exports[`InCallView > rendering > renders 1`] = `
         </button>
         <button
           aria-labelledby="_r_14_"
-          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"
@@ -428,12 +428,12 @@ exports[`InCallView > rendering > renders 1`] = `
       </div>
       <fieldset
         aria-label="Layout"
-        class="_toggle_13rnk_9 _layout_20b7b4"
+        class="_toggle_1t5ha_9 _layout_20b7b4"
         data-size="lg"
       >
         <input
-          aria-labelledby="_r_19_"
-          name="layoutMode"
+          aria-labelledby="_r_1a_"
+          name="_r_19_"
           type="radio"
           value="spotlight"
         />
@@ -446,13 +446,15 @@ exports[`InCallView > rendering > renders 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M5 5h14v8h-5a1 1 0 0 0-1 1v5H5zm10 14v-4h4v4zM5 21h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2"
+            clip-rule="evenodd"
+            d="M20 6H4v12h16zM4 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"
+            fill-rule="evenodd"
           />
         </svg>
         <input
-          aria-labelledby="_r_1e_"
+          aria-labelledby="_r_1f_"
           checked=""
-          name="layoutMode"
+          name="_r_19_"
           type="radio"
           value="grid"
         />

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

@@ -49,6 +49,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         <video
           disablepictureinpicture=""
           playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div
@@ -84,7 +85,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         </div>
       </div>
       <a
-        class="_link_k9ljz_8"
+        class="_link_13esb_8"
         data-kind="primary"
         data-size="md"
         href="/"
@@ -205,7 +206,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         </button>
         <button
           aria-labelledby="_r_40_"
-          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"
@@ -280,6 +281,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         <video
           disablepictureinpicture=""
           playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div
@@ -315,7 +317,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         </div>
       </div>
       <a
-        class="_link_k9ljz_8"
+        class="_link_13esb_8"
         data-kind="primary"
         data-size="md"
         href="/"
@@ -436,7 +438,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         </button>
         <button
           aria-labelledby="_r_54_"
-          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"
@@ -558,6 +560,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         <video
           disablepictureinpicture=""
           playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div
@@ -592,7 +595,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         </div>
       </div>
       <a
-        class="_link_k9ljz_8"
+        class="_link_13esb_8"
         data-kind="primary"
         data-size="md"
         href="/"
@@ -817,7 +820,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         </button>
         <button
           aria-labelledby="_r_q_"
-          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"

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.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,10 +46,26 @@ 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";
 
@@ -138,6 +157,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 +364,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
           id: client.getDeviceId() || "unknown",
         })}
       </p>
+      <Separator />
       <FieldRow>
         <InputField
           id="duplicateTiles"
@@ -315,6 +514,7 @@ 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>
@@ -403,6 +603,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/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

@@ -152,7 +152,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")}

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"
   >
@@ -463,6 +475,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_k_"
+        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_k_"
+      >
+        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_l_"
+        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_l_"
+      >
+        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_m_"
+        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_n_"
+        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_o_"
+        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.ts

@@ -467,7 +467,7 @@ declare global {
   // eslint-disable-next-line no-var, camelcase
   var mx_rage_initStoragePromise: Promise<void> | undefined;
 }
-
+export let rageshakeLogger: Logger;
 /**
  * Configure rage shaking support for sending bug reports.
  * Modifies globals.
@@ -477,7 +477,8 @@ export async function init(): Promise<void> {
   global.mx_rage_logger = new ConsoleLogger();
 
   // configure loglevel based loggers:
-  setLogExtension(logger, global.mx_rage_logger.log);
+  rageshakeLogger = logger;
+  setLogExtension(rageshakeLogger, global.mx_rage_logger.log);
 
   // intercept console logging so that we can get matrix_sdk logs:
   // this is nasty, but no logging hooks are provided

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/CallNotificationLifecycle.ts

@@ -39,8 +39,6 @@ import { type Behavior } from "../Behavior";
 import { type Epoch, type ObservableScope } from "../ObservableScope";
 import { type RoomMemberMap } from "./remoteMembers/MatrixMemberMetadata";
 
-const logger = rootLogger.getChild("[CallNotificationLifecycle]");
-
 export type AutoLeaveReason = "allOthersLeft" | "timeout" | "decline";
 
 export interface RingAttempt {
@@ -114,6 +112,7 @@ export function createCallNotificationLifecycle$({
    */
   autoLeave$: Observable<AutoLeaveReason>;
 } {
+  const logger = rootLogger.getChild("[CallNotificationLifecycle]");
   let ringAttempts$: Observable<RingAttempt> = NEVER;
   if (options.waitForCallPickup)
     ringAttempts$ = sentCallNotification$.pipe(

src/state/CallViewModel/CallViewModel.test.ts

@@ -144,13 +144,13 @@ export interface SpotlightExpandedLayoutSummary {
 }
 
 export interface OneOnOneLandscapeLayoutSummary {
-  type: "one-on-one-landscape";
+  type: "one-on-one-desktop";
   spotlight: string;
   pip: string;
 }
 
 export interface OneOnOnePortraitLayoutSummary {
-  type: "one-on-one-portrait";
+  type: "one-on-one-mobile";
   spotlight: string[];
   pip?: string;
   pipSize: "sm" | "lg";
@@ -205,7 +205,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
               pip: pip?.id,
             }),
           );
-        case "one-on-one-landscape":
+        case "one-on-one-desktop":
           return combineLatest(
             [l.spotlight.media$, l.pip.media$],
             (spotlight, pip) => ({
@@ -214,7 +214,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
               pip: pip.id,
             }),
           );
-        case "one-on-one-portrait":
+        case "one-on-one-mobile":
           return combineLatest(
             [
               l.spotlight.media$,
@@ -327,8 +327,8 @@ describe.each([
         },
         (vm) => {
           schedule(modeInputMarbles, {
-            s: () => vm.setGridMode("spotlight"),
-            g: () => vm.setGridMode("grid"),
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
+            g: () => vm.layoutSwitchVm$.value!.setLayout("grid"),
           });
 
           expectObservable(summarizeLayout$(vm.layout$)).toBe(
@@ -437,7 +437,7 @@ describe.each([
             expectedLayoutMarbles,
             {
               a: {
-                type: "one-on-one-landscape",
+                type: "one-on-one-desktop",
                 pip: `${localId}:0`,
                 spotlight: `${aliceId}:0`,
               },
@@ -453,7 +453,7 @@ describe.each([
     });
   });
 
-  test("one-on-one portrait layout shows local tile when video is enabled", () => {
+  test("one-on-one mobile layout shows local tile when video is enabled", () => {
     withTestScheduler(({ behavior, schedule, expectObservable }) => {
       // Local participant enables their video, then disables it
       const videoInputMarbles = "    ny--n";
@@ -480,19 +480,19 @@ describe.each([
             expectedLayoutMarbles,
             {
               a: {
-                type: "one-on-one-portrait",
+                type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
                 pipSize: "lg",
               },
               b: {
-                type: "one-on-one-portrait",
+                type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: `${localId}:0`,
                 pipSize: "lg",
               },
               c: {
-                type: "one-on-one-portrait",
+                type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: `${localId}:0`,
                 pipSize: "sm",
@@ -504,21 +504,21 @@ describe.each([
     });
   });
 
-  test("one-on-one portrait layout shows name tags in room with 3 members", () => {
-    withTestScheduler(({ behavior, schedule, expectObservable }) => {
+  test("one-on-one mobile layout shows name tags in room with 3 members", () => {
+    withTestScheduler(({ expectObservable }) => {
       withCallViewModel(
         {
           remoteParticipants$: constant([aliceParticipant]),
           // Both Alice and Bob are with us in the room
           roomMembers: [local, alice, bob],
           rtcMembers$: constant([localRtcMember, aliceRtcMember]),
-          windowSize$: constant({ width: 380, height: 700 }), // Mobile phone in portrait
+          windowSize$: constant({ width: 380, height: 700 }), // Mobile phone
         },
         (vm) => {
-          // Uses one-on-one portrait layout
+          // Uses one-on-one mobile layout
           expectObservable(summarizeLayout$(vm.layout$)).toBe("a", {
             a: {
-              type: "one-on-one-portrait",
+              type: "one-on-one-mobile",
               spotlight: [`${aliceId}:0`],
               pip: undefined,
               pipSize: "lg",
@@ -532,6 +532,65 @@ describe.each([
     });
   });
 
+  test("landscape mobile layouts show screen shares and group call participants", () => {
+    withTestScheduler(({ behavior, expectObservable }) => {
+      // Starts as a one-on-one call, then Alice shares her screen, then Bob
+      // joins, and finally Alice stops sharing her screen
+      const participantInputMarbles = "    a--b";
+      const aliceSharingInputMarbles = "   ny-n";
+      // Starts in one-on-one mobile layout, then goes to spotlight layout for
+      // the screen sharing and group call cases
+      const expectedLayoutMarbles = "      ab-c";
+      // Whether the layout switch is visible. It should be hidden while in
+      // one-on-one layout.
+      const expectedLayoutSwitchMarbles = "ny--";
+
+      withCallViewModel(
+        {
+          remoteParticipants$: behavior(participantInputMarbles, {
+            a: [aliceParticipant],
+            b: [aliceParticipant, bobParticipant],
+          }),
+          roomMembers: [local, alice, bob],
+          rtcMembers$: behavior(participantInputMarbles, {
+            a: [localRtcMember, aliceRtcMember],
+            b: [localRtcMember, aliceRtcMember, bobRtcMember],
+          }),
+          sharingScreen: new Map([
+            [aliceParticipant, behavior(aliceSharingInputMarbles, yesNo)],
+          ]),
+          windowSize$: constant({ width: 700, height: 380 }), // Mobile phone in landscape
+        },
+        (vm) => {
+          expectObservable(summarizeLayout$(vm.layout$)).toBe(
+            expectedLayoutMarbles,
+            {
+              a: {
+                type: "one-on-one-mobile",
+                spotlight: [`${aliceId}:0`],
+                pip: undefined,
+                pipSize: "sm",
+              },
+              b: {
+                type: "spotlight-landscape",
+                spotlight: [`${aliceId}:0:screen-share`],
+                grid: [`${localId}:0`, `${aliceId}:0`],
+              },
+              c: {
+                type: "spotlight-landscape",
+                spotlight: [`${aliceId}:0`],
+                grid: [`${localId}:0`, `${bobId}:0`],
+              },
+            },
+          );
+          expectObservable(
+            vm.layoutSwitchVm$.pipe(map((vm) => vm !== null)),
+          ).toBe(expectedLayoutSwitchMarbles, yesNo);
+        },
+      );
+    });
+  });
+
   test("participants stay in the same order unless to appear/disappear", () => {
     withTestScheduler(({ behavior, schedule, expectObservable }) => {
       const visibilityInputMarbles = "a";
@@ -706,14 +765,14 @@ describe.each([
             {
               a: {
                 // This is the expected one-on-one layout for a narrow window
-                type: "one-on-one-portrait",
+                type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
                 pipSize: "lg",
               },
               b: {
-                // In a larger window, expect the normal one-on-one layout
-                type: "one-on-one-landscape",
+                // In a larger window, expect the one-on-one desktop layout
+                type: "one-on-one-desktop",
                 pip: `${localId}:0`,
                 spotlight: `${aliceId}:0`,
               },
@@ -763,7 +822,9 @@ describe.each([
           ]),
         },
         (vm) => {
-          schedule(modeInputMarbles, { s: () => vm.setGridMode("spotlight") });
+          schedule(modeInputMarbles, {
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
+          });
 
           expectObservable(summarizeLayout$(vm.layout$)).toBe(
             expectedLayoutMarbles,
@@ -969,7 +1030,7 @@ describe.each([
         },
         (vm) => {
           schedule(modeInputMarbles, {
-            s: () => vm.setGridMode("spotlight"),
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
           });
           schedule(expandInputMarbles, {
             a: () => vm.toggleSpotlightExpanded$.value!(),
@@ -1039,7 +1100,7 @@ describe.each([
         },
         (vm) => {
           schedule(modeInputMarbles, {
-            s: () => vm.setGridMode("spotlight"),
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
           });
           schedule(expandInputMarbles, {
             a: () => vm.toggleSpotlightExpanded$.value!(),
@@ -1066,7 +1127,7 @@ describe.each([
   });
 
   test("expanded spotlight layout hides PiP tile in one-on-one voice call", () => {
-    withTestScheduler(({ behavior, schedule, expectObservable }) => {
+    withTestScheduler(({ schedule, expectObservable }) => {
       withCallViewModel(
         {
           remoteParticipants$: constant([aliceParticipant]),
@@ -1076,9 +1137,15 @@ describe.each([
             [localParticipant, constant(false)],
             [aliceParticipant, constant(false)],
           ]),
-          windowSize$: constant({ width: 700, height: 380 }), // Mobile phone in landscape
         },
         (vm) => {
+          schedule("s", {
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
+          });
+          schedule("a", {
+            a: () => vm.toggleSpotlightExpanded$.value!(),
+          });
+
           // Layout should show remote tile only
           expectObservable(summarizeLayout$(vm.layout$)).toBe("a", {
             a: {
@@ -1110,8 +1177,8 @@ describe.each([
         },
         (vm) => {
           schedule(modeInputMarbles, {
-            s: () => vm.setGridMode("spotlight"),
-            g: () => vm.setGridMode("grid"),
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
+            g: () => vm.layoutSwitchVm$.value!.setLayout("grid"),
           });
           schedule(expandInputMarbles, {
             a: () => vm.toggleSpotlightExpanded$.value!(),
@@ -1177,7 +1244,7 @@ describe.each([
           ]),
         },
         (vm) => {
-          vm.setGridMode("grid");
+          vm.layoutSwitchVm$.value!.setLayout("grid");
           expectObservable(summarizeLayout$(vm.layout$)).toBe(
             expectedLayoutMarbles,
             {
@@ -1187,7 +1254,7 @@ describe.each([
                 grid: [`${localId}:0`],
               },
               b: {
-                type: "one-on-one-landscape",
+                type: "one-on-one-desktop",
                 pip: `${localId}:0`,
                 spotlight: `${aliceId}:0`,
               },
@@ -1220,7 +1287,7 @@ describe.each([
           }),
         },
         (vm) => {
-          vm.setGridMode("grid");
+          vm.layoutSwitchVm$.value!.setLayout("grid");
           expectObservable(summarizeLayout$(vm.layout$)).toBe(
             expectedLayoutMarbles,
             {
@@ -1230,7 +1297,7 @@ describe.each([
                 grid: [`${localId}:0`],
               },
               b: {
-                type: "one-on-one-landscape",
+                type: "one-on-one-desktop",
                 pip: `${localId}:0`,
                 spotlight: `${aliceId}:0`,
               },
@@ -1240,7 +1307,7 @@ describe.each([
                 grid: [`${localId}:0`, `${aliceId}:0`, `${daveId}:0`],
               },
               d: {
-                type: "one-on-one-landscape",
+                type: "one-on-one-desktop",
                 pip: `${localId}:0`,
                 spotlight: `${daveId}:0`,
               },
@@ -1464,7 +1531,7 @@ describe.each([
           // ringing the entire time (even once timed out)
           expectObservable(summarizeLayout$(vm.layout$)).toBe("a", {
             a: {
-              type: "one-on-one-landscape",
+              type: "one-on-one-desktop",
               spotlight: `${localId}:0`,
               pip: `ringing:${aliceUserId}`,
             },
@@ -1510,12 +1577,12 @@ describe.each([
           // ringing the entire time
           expectObservable(summarizeLayout$(vm.layout$)).toBe("a 20ms b", {
             a: {
-              type: "one-on-one-landscape",
+              type: "one-on-one-desktop",
               spotlight: `${localId}:0`,
               pip: `ringing:${aliceUserId}`,
             },
             b: {
-              type: "one-on-one-landscape",
+              type: "one-on-one-desktop",
               spotlight: `${aliceId}:0`,
               pip: `${localId}:0`,
             },

src/state/CallViewModel/CallViewModel.ts

@@ -40,7 +40,7 @@ import {
   timer,
   takeUntil,
 } from "rxjs";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
   MembershipManagerEvent,
   type LivekitTransportConfig,
@@ -70,8 +70,8 @@ import { setPipEnabled$ } from "../../controls";
 import { TileStore } from "../TileStore";
 import { gridLikeLayout } from "../GridLikeLayout";
 import { spotlightExpandedLayout } from "../SpotlightExpandedLayout";
-import { oneOnOneLandscapeLayout } from "../OneOnOneLandscapeLayout";
-import { oneOnOnePortraitLayout } from "../OneOnOnePortraitLayout";
+import { oneOnOneDesktopLayout } from "../OneOnOneDesktopLayout";
+import { oneOnOneMobileLayout } from "../OneOnOneMobileLayout";
 import { pipLayout } from "../PipLayout";
 import { type EncryptionSystem } from "../../e2ee/sharedKeyManagement";
 import {
@@ -79,7 +79,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,12 +89,13 @@ import { getUrlParams, HeaderStyle } from "../../UrlParams";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { ElementWidgetActions, widget } from "../../widget";
 import {
+  layoutShallowEquals,
   type Alignment,
   type GridLayoutMedia,
   type Layout,
   type LayoutMedia,
-  type OneOnOneLandscapeLayoutMedia,
-  type OneOnOnePortraitLayoutMedia,
+  type OneOnOneDesktopLayoutMedia,
+  type OneOnOneMobileLayoutMedia,
   type SpotlightExpandedLayoutMedia,
   type SpotlightLandscapeLayoutMedia,
   type SpotlightPortraitLayoutMedia,
@@ -141,7 +142,10 @@ import {
 } from "./remoteMembers/MatrixMemberMetadata.ts";
 import { Publisher } from "./localMember/Publisher.ts";
 import { type Connection } from "./remoteMembers/Connection.ts";
-import { createLayoutModeSwitch } from "./LayoutSwitch.ts";
+import {
+  type LayoutSwitchViewModel,
+  createLayoutSwitchViewModel,
+} from "../LayoutSwitchViewModel.ts";
 import {
   createWrappedUserMedia,
   type WrappedUserMediaViewModel,
@@ -157,7 +161,6 @@ import {
 } from "../media/RingingMediaViewModel.ts";
 import { type GridTileViewModel } from "../TileViewModel.ts";
 
-const logger = rootLogger.getChild("[CallViewModel]");
 //TODO
 // Larger rename
 // member,membership -> rtcMember
@@ -202,12 +205,11 @@ const smallMobileCallThreshold = 3;
 // with the interface
 const showFooterMs = 4000;
 
-export type GridMode = "grid" | "spotlight";
-
 export type WindowMode = "normal" | "narrow" | "flat" | "pip";
 
 interface LayoutScanState {
   layout: Layout | null;
+  overflowing: boolean;
   tiles: TileStore;
 }
 
@@ -349,8 +351,7 @@ export interface CallViewModel {
   showNameTags$: Behavior<boolean>;
   spotlightExpanded$: Behavior<boolean>;
   toggleSpotlightExpanded$: Behavior<(() => void) | null>;
-  gridMode$: Behavior<GridMode>;
-  setGridMode: (value: GridMode) => void;
+  layoutSwitchVm$: Behavior<LayoutSwitchViewModel | null>;
 
   // header/footer visibility
   showHeader$: Behavior<boolean>;
@@ -360,6 +361,10 @@ export interface CallViewModel {
    * and header as overlays.
    */
   edgeToEdge$: Behavior<boolean>;
+  /**
+   * Whether the call layout is overflowing the interface (causing it to scroll).
+   */
+  overflowing$: Behavior<boolean>;
 
   settingsOpen$: Behavior<boolean>;
   setSettingsOpen$: Behavior<(open: boolean) => void>;
@@ -411,6 +416,7 @@ export function createCallViewModel$(
   reactionsSubject$: Observable<Record<string, ReactionInfo>>,
   trackProcessorState$: Behavior<ProcessorState>,
 ): CallViewModel {
+  const logger = rootLogger.getChild("[CallViewModel]");
   const client = matrixRoom.client;
   const userId = client.getUserId();
   const deviceId = client.getDeviceId();
@@ -420,6 +426,7 @@ export function createCallViewModel$(
   const livekitKeyProvider = getE2eeKeyProvider(
     options.encryptionSystem,
     matrixRTCSession,
+    logger,
   );
   // matrix_rtc_mode in config.json overrides the user's Developer Settings choice.
   // It is validated at config load (src/config/Config.ts) so the cast is safe.
@@ -507,8 +514,6 @@ export function createCallViewModel$(
       livekitKeyProvider,
       getUrlParams().controlledAudioDevices,
       options.livekitRoomFactory,
-      getUrlParams().echoCancellation,
-      getUrlParams().noiseSuppression,
     );
 
   const connectionManager = createConnectionManager$({
@@ -937,7 +942,7 @@ export function createCallViewModel$(
               bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m),
             );
       }),
-      distinctUntilChanged(shallowEquals),
+      distinctUntilChanged(shallowArrayEquals),
     ),
   );
 
@@ -996,7 +1001,7 @@ export function createCallViewModel$(
   const spotlight$ = scope.behavior<MediaViewModel[]>(
     spotlightAndPip$.pipe(
       map(({ spotlight }) => spotlight),
-      distinctUntilChanged<MediaViewModel[]>(shallowEquals),
+      distinctUntilChanged<MediaViewModel[]>(shallowArrayEquals),
     ),
   );
 
@@ -1050,7 +1055,7 @@ export function createCallViewModel$(
     spotlightExpandedToggle$,
   );
 
-  const { setGridMode, gridMode$ } = createLayoutModeSwitch(
+  const layoutSwitchVm = createLayoutSwitchViewModel(
     scope,
     windowMode$,
     hasRemoteScreenShares$,
@@ -1102,56 +1107,60 @@ export function createCallViewModel$(
       ),
     );
 
-  const oneOnOneLayoutMedia$: Observable<{
+  const oneOnOneLayoutMedia$: Behavior<{
     local: LocalUserMediaViewModel;
     remote: UserMediaViewModel | RingingMediaViewModel;
-  } | null> = combineLatest([userMedia$, screenShares$]).pipe(
-    switchMap(([userMedia, screenShares]) => {
-      // One-on-one layout only supports 2 user media, no screen shares
-      if (userMedia.length <= 2 && screenShares.length === 0) {
-        const local = userMedia.find(
-          (vm): vm is WrappedUserMediaViewModel & LocalUserMediaViewModel =>
-            vm.type === "user" && vm.local,
-        );
-
-        if (local !== undefined) {
-          const remote = userMedia.find(
-            (vm): vm is WrappedUserMediaViewModel & RemoteUserMediaViewModel =>
-              vm.type === "user" && !vm.local,
+  } | null> = scope.behavior(
+    combineLatest([userMedia$, screenShares$]).pipe(
+      switchMap(([userMedia, screenShares]) => {
+        // One-on-one layout only supports 2 user media, no screen shares
+        if (userMedia.length <= 2 && screenShares.length === 0) {
+          const local = userMedia.find(
+            (vm): vm is WrappedUserMediaViewModel & LocalUserMediaViewModel =>
+              vm.type === "user" && vm.local,
           );
 
-          if (remote !== undefined) return of({ local, remote });
-
-          // If there's no other user media in the call (could still happen in
-          // this branch due to the duplicate tiles option), we could possibly
-          // show ringing media instead
-          if (userMedia.length === 1)
-            return ringingMedia$.pipe(
-              map(
-                (ringingMedia) =>
-                  ringingMedia && { local, remote: ringingMedia },
-              ),
+          if (local !== undefined) {
+            const remote = userMedia.find(
+              (
+                vm,
+              ): vm is WrappedUserMediaViewModel & RemoteUserMediaViewModel =>
+                vm.type === "user" && !vm.local,
             );
-        }
-      }
 
-      return of(null);
-    }),
+            if (remote !== undefined) return of({ local, remote });
+
+            // If there's no other user media in the call (could still happen in
+            // this branch due to the duplicate tiles option), we could possibly
+            // show ringing media instead
+            if (userMedia.length === 1)
+              return ringingMedia$.pipe(
+                map(
+                  (ringingMedia) =>
+                    ringingMedia && { local, remote: ringingMedia },
+                ),
+              );
+          }
+        }
+
+        return of(null);
+      }),
+    ),
   );
 
-  const oneOnOneLandscapeLayoutMedia$: Observable<OneOnOneLandscapeLayoutMedia | null> =
+  const oneOnOneDesktopLayoutMedia$: Observable<OneOnOneDesktopLayoutMedia | null> =
     oneOnOneLayoutMedia$.pipe(
       map((media) => {
         if (media === null) return null;
         return media.remote.type === "ringing"
           ? {
-              type: "one-on-one-landscape" as const,
+              type: "one-on-one-desktop" as const,
               edgeToEdge: false,
               spotlight: media.local,
               pip: media.remote,
             }
           : {
-              type: "one-on-one-landscape" as const,
+              type: "one-on-one-desktop" as const,
               edgeToEdge: false,
               spotlight: media.remote,
               pip: media.local,
@@ -1159,13 +1168,13 @@ export function createCallViewModel$(
       }),
     );
 
-  const oneOnOnePortraitLayoutMedia$: Observable<OneOnOnePortraitLayoutMedia | null> =
+  const oneOnOneMobileLayoutMedia$: Observable<OneOnOneMobileLayoutMedia | null> =
     oneOnOneLayoutMedia$.pipe(
       switchMap((media) => {
         if (media === null) return of(null);
         return media.local.videoEnabled$.pipe(
           map((videoEnabled) => ({
-            type: "one-on-one-portrait" as const,
+            type: "one-on-one-mobile" as const,
             edgeToEdge: true as const,
             spotlight: media.remote,
             pip: videoEnabled ? media.local : undefined,
@@ -1201,6 +1210,7 @@ export function createCallViewModel$(
         }
         return layout;
       }),
+      distinctUntilChanged(),
       scope.bind(),
     )
     .subscribe((orientation) => {
@@ -1217,11 +1227,11 @@ export function createCallViewModel$(
       switchMap((windowMode) => {
         switch (windowMode) {
           case "normal":
-            return gridMode$.pipe(
-              switchMap((gridMode) => {
-                switch (gridMode) {
+            return layoutSwitchVm.layout$.pipe(
+              switchMap((layout) => {
+                switch (layout) {
                   case "grid":
-                    return oneOnOneLandscapeLayoutMedia$.pipe(
+                    return oneOnOneDesktopLayoutMedia$.pipe(
                       switchMap((oneOnOne) =>
                         oneOnOne === null ? gridLayoutMedia$ : of(oneOnOne),
                       ),
@@ -1238,7 +1248,7 @@ export function createCallViewModel$(
               }),
             );
           case "narrow":
-            return oneOnOnePortraitLayoutMedia$.pipe(
+            return oneOnOneMobileLayoutMedia$.pipe(
               switchMap((oneOnOne) =>
                 oneOnOne === null
                   ? combineLatest([grid$, spotlight$], (grid, spotlight) =>
@@ -1251,17 +1261,23 @@ export function createCallViewModel$(
               ),
             );
           case "flat":
-            return gridMode$.pipe(
-              switchMap((gridMode) => {
-                switch (gridMode) {
-                  case "grid":
-                    // Yes, grid mode actually gets you a "spotlight" layout in
-                    // this window mode.
-                    return spotlightLandscapeLayoutMedia$(true);
-                  case "spotlight":
-                    return spotlightExpandedLayoutMedia$(true);
-                }
-              }),
+            return oneOnOneMobileLayoutMedia$.pipe(
+              switchMap((oneOnOne) =>
+                oneOnOne === null
+                  ? layoutSwitchVm.layout$.pipe(
+                      switchMap((layout) => {
+                        switch (layout) {
+                          case "grid":
+                            // Yes, grid mode actually gets you a "spotlight" layout in
+                            // this window mode.
+                            return spotlightLandscapeLayoutMedia$(true);
+                          case "spotlight":
+                            return spotlightExpandedLayoutMedia$(true);
+                        }
+                      }),
+                    )
+                  : of(oneOnOne),
+              ),
             );
           case "pip":
             return pipLayoutMedia$;
@@ -1289,8 +1305,8 @@ export function createCallViewModel$(
           // indicators. And in one-on-one layout there's no question as to who is
           // speaking.
           case "spotlight-expanded":
-          case "one-on-one-landscape":
-          case "one-on-one-portrait":
+          case "one-on-one-desktop":
+          case "one-on-one-mobile":
             return false;
           default:
             return true;
@@ -1302,7 +1318,7 @@ export function createCallViewModel$(
   const showNameTags$ = scope.behavior<boolean>(
     layoutMedia$.pipe(
       switchMap((l) =>
-        l.type === "pip" || l.type === "one-on-one-portrait"
+        l.type === "pip" || l.type === "one-on-one-mobile"
           ? matrixRoomMembers$.pipe(
               map(
                 (members) =>
@@ -1346,6 +1362,22 @@ export function createCallViewModel$(
     layoutMedia$.pipe(map(({ edgeToEdge }) => edgeToEdge)),
   );
 
+  // Only show the layout switch in cases where it has an effect on the layout
+  const showLayoutSwitch$ = windowMode$.pipe(
+    switchMap((windowMode) => {
+      switch (windowMode) {
+        case "normal":
+          return of(true);
+        case "flat":
+          return oneOnOneLayoutMedia$.pipe(
+            map((oneOnOne) => oneOnOne === null),
+          );
+        default:
+          return of(false);
+      }
+    }),
+  );
+
   const screenTap$ = new Subject<void>();
   const controlsTap$ = new Subject<void>();
   const screenHover$ = new Subject<void>();
@@ -1467,7 +1499,7 @@ export function createCallViewModel$(
 
   // There is a cyclical dependency here: the layout algorithms want to know
   // which tiles are on screen, but to know which tiles are on screen we have to
-  // first render a layout. To deal with this we assume initially that no tiles
+  // first render a layout. To deal with this we assume initially that all tiles
   // are visible, and loop the data back into the layouts with a Subject.
   const visibleTiles$ = new Subject<number>();
   const setVisibleTiles = (value: number): void => visibleTiles$.next(value);
@@ -1475,7 +1507,7 @@ export function createCallViewModel$(
   const layoutInternals$ = scope.behavior<LayoutScanState & { layout: Layout }>(
     combineLatest([
       layoutMedia$,
-      visibleTiles$.pipe(startWith(0), distinctUntilChanged()),
+      visibleTiles$.pipe(startWith(Infinity), distinctUntilChanged()),
     ]).pipe(
       scan<
         [LayoutMedia, number],
@@ -1486,6 +1518,7 @@ export function createCallViewModel$(
           let layout: Layout;
           let newTiles: TileStore;
           let pip: GridTileViewModel | undefined;
+          let overflowing = false;
           switch (media.type) {
             case "grid":
             case "spotlight-landscape":
@@ -1497,6 +1530,7 @@ export function createCallViewModel$(
                 setVisibleTiles,
                 prevTiles,
               );
+              overflowing = newTiles.gridTiles.length > visibleTiles;
               break;
             case "spotlight-expanded":
               [layout, newTiles] = spotlightExpandedLayout(
@@ -1505,16 +1539,16 @@ export function createCallViewModel$(
                 prevTiles,
               );
               break;
-            case "one-on-one-landscape":
-              [layout, newTiles] = oneOnOneLandscapeLayout(
+            case "one-on-one-desktop":
+              [layout, newTiles] = oneOnOneDesktopLayout(
                 media,
                 landscapePipAlignment$,
                 prevTiles,
               );
               pip = layout.pip;
               break;
-            case "one-on-one-portrait":
-              [layout, newTiles] = oneOnOnePortraitLayout(
+            case "one-on-one-mobile":
+              [layout, newTiles] = oneOnOneMobileLayout(
                 media,
                 portraitPipSize$,
                 portraitPipAlignment$,
@@ -1531,9 +1565,9 @@ export function createCallViewModel$(
             tile.setShowOutline(tile === pip);
           }
 
-          return { layout, tiles: newTiles };
+          return { layout, overflowing, tiles: newTiles };
         },
-        { layout: null, tiles: TileStore.empty() },
+        { layout: null, overflowing: false, tiles: TileStore.empty() },
       ),
     ),
   );
@@ -1542,7 +1576,15 @@ 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>(
+    layoutInternals$.pipe(map(({ overflowing }) => overflowing)),
   );
 
   /**
@@ -1757,8 +1799,9 @@ export function createCallViewModel$(
 
     spotlightExpanded$: spotlightExpanded$,
     toggleSpotlightExpanded$: toggleSpotlightExpanded$,
-    gridMode$: gridMode$,
-    setGridMode: setGridMode,
+    layoutSwitchVm$: scope.behavior(
+      showLayoutSwitch$.pipe(map((show) => (show ? layoutSwitchVm : null))),
+    ),
     layout$: layout$,
     localMatrixLivekitMember$,
     remoteMatrixLivekitMembers$: scope.behavior(
@@ -1786,6 +1829,7 @@ export function createCallViewModel$(
     settingsOpen$: settingsOpen$,
     setSettingsOpen$: setSettingsOpen$,
     edgeToEdge$,
+    overflowing$,
     earpieceMode$: earpieceMode$,
     audioOutputSwitcher$: audioOutputSwitcher$,
     reconnecting$: localMembership.reconnecting$,
@@ -1797,6 +1841,7 @@ export function createCallViewModel$(
 function getE2eeKeyProvider(
   e2eeSystem: EncryptionSystem,
   rtcSession: MatrixRTCSession,
+  logger: Logger,
 ): BaseKeyProvider | undefined {
   if (e2eeSystem.kind === E2eeType.NONE) return undefined;
 

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,

src/state/CallViewModel/LayoutSwitch.ts

@@ -1,93 +0,0 @@
-/*
-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 {
-  combineLatest,
-  map,
-  Subject,
-  startWith,
-  skipWhile,
-  switchMap,
-} from "rxjs";
-
-import { type GridMode, type WindowMode } from "./CallViewModel.ts";
-import { constant, type Behavior } from "../Behavior.ts";
-import { type ObservableScope } from "../ObservableScope.ts";
-
-/**
- * Creates a layout mode switch that allows switching between grid and spotlight modes.
- * The actual layout mode might switch automatically to spotlight if there is a
- * remote screen share active or if the window mode is flat.
- *
- * @param scope - The observable scope to manage subscriptions.
- * @param windowMode$ - The current window mode.
- * @param hasRemoteScreenShares$ - A behavior indicating if there are remote screen shares active.
- */
-export function createLayoutModeSwitch(
-  scope: ObservableScope,
-  windowMode$: Behavior<WindowMode>,
-  hasRemoteScreenShares$: Behavior<boolean>,
-): {
-  gridMode$: Behavior<GridMode>;
-  setGridMode: (value: GridMode) => void;
-} {
-  const userSelection$ = new Subject<GridMode>();
-  // Callback to set the grid mode desired by the user.
-  // Notice that this is only a preference, the actual grid mode can be overridden
-  // if there is a remote screen share active.
-  const setGridMode = (value: GridMode): void => userSelection$.next(value);
-
-  /**
-   * The natural grid mode - the mode that the grid would prefer to be in,
-   * not accounting for the user's manual selections.
-   */
-  const naturalGridMode$ = scope.behavior<GridMode>(
-    combineLatest(
-      [hasRemoteScreenShares$, windowMode$],
-      (hasRemoteScreenShares, windowMode) =>
-        // When there are screen shares or the window is flat (as with a phone
-        // in landscape orientation), spotlight is a better experience.
-        // We want screen shares to be big and readable, and we want flipping
-        // your phone into landscape to be a quick way of maximising the
-        // spotlight tile.
-        hasRemoteScreenShares || windowMode === "flat" ? "spotlight" : "grid",
-    ),
-  );
-
-  /**
-   * The layout mode of the media tile grid.
-   */
-  const gridMode$ = scope.behavior<GridMode>(
-    // Whenever the user makes a selection, we enter a new mode of behavior:
-    userSelection$.pipe(
-      map((selection) => {
-        if (selection === "grid")
-          // The user has selected grid mode. Start by respecting their choice,
-          // but then follow the natural mode again as soon as it matches.
-          return naturalGridMode$.pipe(
-            skipWhile((naturalMode) => naturalMode !== selection),
-            startWith(selection),
-          );
-
-        // The user has selected spotlight mode. If this matches the natural
-        // mode, then follow the natural mode going forward.
-        return selection === naturalGridMode$.value
-          ? naturalGridMode$
-          : constant(selection);
-      }),
-      // Initially the mode of behavior is to just follow the natural grid mode.
-      startWith(naturalGridMode$),
-      // Switch between each mode of behavior.
-      switchMap((mode$) => mode$),
-    ),
-  );
-
-  return {
-    gridMode$,
-    setGridMode,
-  };
-}

src/state/CallViewModel/localMember/HomeserverConnected.ts

@@ -31,11 +31,6 @@ import { type ObservableScope } from "../../ObservableScope";
 import { type Behavior } from "../../Behavior";
 import { type NodeStyleEventEmitter } from "../../../utils/test";
 
-/**
- * Logger instance (scoped child) for homeserver connection updates.
- */
-const logger = rootLogger.getChild("[HomeserverConnected]");
-
 export type HomeserverDisconnectReason = "sync" | "membership" | "probablyLeft";
 
 export interface HomeserverConnected {
@@ -70,6 +65,7 @@ export function createHomeserverConnected$(
     Pick<MatrixRTCSession, "membershipStatus" | "probablyLeft">,
   gracePeriodMs?: number,
 ): HomeserverConnected {
+  const logger = rootLogger.getChild("[HomeserverConnected]");
   // Get grace period from parameter or config (default 10000ms)
   const graceMs = gracePeriodMs ?? Config.get().sync_disconnect_grace_period_ms;
 

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

@@ -20,7 +20,6 @@ import {
   afterAll,
   beforeEach,
 } 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";
@@ -78,34 +77,10 @@ describe("LocalMembership", () => {
         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",
@@ -132,7 +107,7 @@ describe("LocalMembership", () => {
         ownMemberMock,
         {
           livekit_alias: "roomId",
-          livekit_service_url: "http://my-well-known-service-url.com",
+          livekit_service_url: "http://my-livekit-service-url.com",
           type: "livekit",
         },
         {
@@ -150,7 +125,7 @@ describe("LocalMembership", () => {
         [
           {
             livekit_alias: "roomId",
-            livekit_service_url: "http://my-well-known-service-url.com",
+            livekit_service_url: "http://my-livekit-service-url.com",
             type: "livekit",
           },
         ],
@@ -161,50 +136,6 @@ describe("LocalMembership", () => {
         }),
       );
     });
-
-    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,
-        },
-      );
-    });
   });
 
   const defaultCreateLocalMemberValues = {

src/state/CallViewModel/localMember/LocalMember.ts

@@ -10,6 +10,7 @@ import {
   ParticipantEvent,
   type LocalParticipant,
   type ScreenShareCaptureOptions,
+  type TrackPublishOptions,
   RoomEvent,
   MediaDeviceFailure,
 } from "livekit-client";
@@ -53,6 +54,14 @@ import {
 import { ElementWidgetActions, widget } from "../../../widget.ts";
 import { getUrlParams } from "../../../UrlParams.ts";
 import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics.ts";
+import {
+  advancedScreenShare,
+  screenShareResolution,
+  screenShareFramerate,
+  screenShareBitrate,
+  screenShareCodec,
+  parseResolution,
+} from "../../../settings/settings.ts";
 import { MatrixRTCMode } from "../../../config/ConfigOptions.ts";
 import { Config } from "../../../config/Config.ts";
 import {
@@ -108,7 +117,6 @@ export type LocalMemberState =
     };
 
 /*
- * - get well known
  * - get oldest membership
  * - get transport to use
  * - get openId + jwt token
@@ -719,6 +727,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 ${
@@ -734,7 +779,11 @@ export const createLocalMembership$ = ({
       // 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)
+        ?.setScreenShareEnabled(
+          targetScreenshareState,
+          screenshareSettings,
+          publishOptions,
+        )
         .catch(logger.error);
     };
   }

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

@@ -63,8 +63,7 @@ describe("LocalTransport", () => {
       client: {
         // eslint-disable-next-line @typescript-eslint/naming-convention
         _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getAccessToken: vi.fn().mockReturnValue("access_token"),
-        getDomain: () => "",
+        getDomain: () => "example.org",
         baseUrl: "example.org",
         // These won't be called in this error path but satisfy the type
         getOpenIdToken: vi.fn(),
@@ -77,9 +76,11 @@ describe("LocalTransport", () => {
     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 () => {
@@ -103,10 +104,8 @@ describe("LocalTransport", () => {
       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"),
+        baseUrl: "https://example.org",
+        getDomain: () => "example.org",
         // eslint-disable-next-line @typescript-eslint/naming-convention
         _unstable_getRTCTransports: async () => Promise.resolve([]),
         getOpenIdToken: vi.fn(),
@@ -150,11 +149,10 @@ describe("LocalTransport", () => {
       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"),
+        baseUrl: "https://example.org",
       },
       ownMembershipIdentity: ownMemberMock,
       forceJwtEndpoint: JwtEndpointVersion.Legacy,
@@ -221,13 +219,12 @@ describe("LocalTransport", () => {
         useOldestMember: true,
         memberships$: scope.behavior(memberships$.pipe(trackEpoch())),
         client: {
-          getDomain: () => "",
+          getDomain: () => "example.org",
           // 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",
+          baseUrl: "https://example.org",
         },
         ownMembershipIdentity: ownMemberMock,
         forceJwtEndpoint: JwtEndpointVersion.Legacy,
@@ -278,14 +275,13 @@ describe("LocalTransport", () => {
         useOldestMember: true,
         memberships$: scope.behavior(memberships$.pipe(trackEpoch())),
         client: {
-          getDomain: () => "",
+          getDomain: () => "example.org",
           // 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",
+          baseUrl: "https://example.org",
         },
         ownMembershipIdentity: ownMemberMock,
         forceJwtEndpoint: JwtEndpointVersion.Legacy,
@@ -330,10 +326,9 @@ describe("LocalTransport", () => {
         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 +416,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,51 +428,6 @@ 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(),
@@ -524,11 +438,10 @@ describe("LocalTransport", () => {
         delayId$: constant(null),
         memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
-          getDomain: () => "",
+          getDomain: () => "example.org",
           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(),
@@ -537,10 +450,10 @@ describe("LocalTransport", () => {
       await flushPromises();
 
       expect(() => advertised$.value).toThrow(
-        new MatrixRTCTransportMissingError(""),
+        new MatrixRTCTransportMissingError("example.org"),
       );
       expect(() => active$.value).toThrow(
-        new MatrixRTCTransportMissingError(""),
+        new MatrixRTCTransportMissingError("example.org"),
       );
     });
   });
@@ -565,11 +478,10 @@ describe("LocalTransport", () => {
       delayId$: delayId$,
       memberships$: constant(new Epoch<CallMembership[]>([])),
       client: {
-        getDomain: () => "",
+        getDomain: () => "example.org",
         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(),

src/state/CallViewModel/localMember/LocalTransport.ts

@@ -25,8 +25,7 @@ import {
   switchMap,
   tap,
 } from "rxjs";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
-import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
+import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import { type Behavior } from "../../Behavior.ts";
@@ -46,8 +45,6 @@ import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers
 import { customLivekitUrl } from "../../../settings/settings.ts";
 import { RtcTransportAutoDiscovery } from "./RtcTransportAutoDiscovery.ts";
 
-const logger = rootLogger.getChild("[LocalTransport]");
-
 /*
  * 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
@@ -59,7 +56,7 @@ interface Props {
   memberships$: Behavior<Epoch<CallMembership[]>>;
   client: Pick<
     MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports" | "getAccessToken"
+    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
   > &
     OpenIDClientParts;
   // Used by the jwt service to create the livekit room and compute the livekit alias.
@@ -140,14 +137,18 @@ export const createLocalTransport$ = ({
   forceJwtEndpoint,
   delayId$,
 }: 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$);
+  const oldestMemberTransport$ = observerOldestMembership$(
+    scope,
+    memberships$,
+    logger,
+  );
 
   const transportDiscovery = new RtcTransportAutoDiscovery({
     client: client,
     resolvedConfig: Config.get(),
-    wellKnownFetcher: AutoDiscovery.getRawClientConfig.bind(AutoDiscovery),
     logger: logger,
   });
 
@@ -190,6 +191,7 @@ export const createLocalTransport$ = ({
           roomId,
           client,
           delayId ?? undefined,
+          logger,
         );
       } catch (e) {
         logger.error(
@@ -209,6 +211,7 @@ export const createLocalTransport$ = ({
       client,
       ownMembershipIdentity,
       roomId,
+      logger,
     );
   }
 
@@ -248,6 +251,7 @@ export const createLocalTransport$ = ({
 function observerOldestMembership$(
   scope: ObservableScope,
   memberships$: Behavior<Epoch<CallMembership[]>>,
+  logger: Logger,
 ): Behavior<LivekitTransportConfig | null> {
   return scope.behavior<LivekitTransportConfig | null>(
     memberships$.pipe(
@@ -303,10 +307,11 @@ async function doOpenIdAndJWTFromUrl(
   roomId: string,
   client: Pick<
     MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports" | "getAccessToken"
+    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
   > &
     OpenIDClientParts,
   delayId?: string,
+  logger?: Logger,
 ): Promise<LocalTransportWithSFUConfig> {
   const sfuConfig = await getSFUConfigWithOpenID(
     client,
@@ -332,11 +337,12 @@ function observeLocalTransportForOldestMembership(
   preferredTransport$: Observable<LocalTransportWithSFUConfig>,
   client: Pick<
     MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports" | "getAccessToken"
+    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
   > &
     OpenIDClientParts,
   ownMembershipIdentity: CallMembershipIdentityParts,
   roomId: string,
+  logger: Logger,
 ): LocalTransport {
   // Ensure we can authenticate with the SFU.
   const authenticatedOldestMemberTransport$ = oldestMemberTransport$.pipe(
@@ -355,6 +361,7 @@ function observeLocalTransportForOldestMembership(
           roomId,
           client,
           undefined,
+          logger,
         ),
       ).pipe(
         catchError((e: unknown) => {

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/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/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/MatrixMemberMetadata.ts

@@ -22,8 +22,6 @@ import {
 } from "../../../utils/displayname";
 import { type Behavior } from "../../Behavior";
 
-const logger = rootLogger.getChild("[MatrixMemberMetadata]");
-
 export type RoomMemberMap = Map<
   string,
   Pick<RoomMember, "userId" | "getMxcAvatarUrl" | "rawDisplayName">
@@ -67,6 +65,7 @@ export const memberDisplaynames$ = (
   memberships$: Behavior<Pick<CallMembership, "userId">[]>,
   roomMembers$: Behavior<RoomMemberMap>,
 ): Behavior<Map<string, string>> => {
+  const logger = rootLogger.getChild("[MatrixMemberMetadata]");
   // This map tracks userIds that at some point needed disambiguation.
   // This is a memory leak bound to the number of participants.
   // A call application will always increase the memory if there have been more members in a call.

src/state/LayoutSwitchViewModel.test.ts

@@ -7,31 +7,31 @@ Please see LICENSE in the repository root for full details.
 
 import { describe, test } from "vitest";
 
-import { createLayoutModeSwitch } from "./LayoutSwitch";
-import { testScope, withTestScheduler } from "../../utils/test";
+import { createLayoutSwitchViewModel } from "./LayoutSwitchViewModel";
+import { testScope, withTestScheduler } from "../utils/test";
 
 function testLayoutSwitch({
   windowMode = "n",
   hasScreenShares = "n",
   userSelection = "",
-  expectedGridMode,
+  expectedLayout,
 }: {
   windowMode?: string;
   hasScreenShares?: string;
   userSelection?: string;
-  expectedGridMode: string;
+  expectedLayout: string;
 }): void {
   withTestScheduler(({ behavior, schedule, expectObservable }) => {
-    const { gridMode$, setGridMode } = createLayoutModeSwitch(
+    const { layout$, setLayout } = createLayoutSwitchViewModel(
       testScope(),
       behavior(windowMode, { n: "normal", N: "narrow", f: "flat" }),
       behavior(hasScreenShares, { y: true, n: false }),
     );
     schedule(userSelection, {
-      g: () => setGridMode("grid"),
-      s: () => setGridMode("spotlight"),
+      g: () => setLayout("grid"),
+      s: () => setLayout("spotlight"),
     });
-    expectObservable(gridMode$).toBe(expectedGridMode, {
+    expectObservable(layout$).toBe(expectedLayout, {
       g: "grid",
       s: "spotlight",
     });
@@ -39,94 +39,88 @@ function testLayoutSwitch({
 }
 
 describe("default mode", () => {
-  test("uses grid layout by default", () =>
+  test("uses grid layout in normal window", () =>
     testLayoutSwitch({
-      expectedGridMode: "g",
+      windowMode: "    n",
+      expectedLayout: "g",
     }));
 
-  test("uses spotlight mode when window mode is flat", () =>
+  test("uses grid layout in flat window", () =>
     testLayoutSwitch({
-      windowMode: "      f",
-      expectedGridMode: "s",
+      windowMode: "    f",
+      expectedLayout: "g",
     }));
 });
 
 test("allows switching modes manually", () =>
   testLayoutSwitch({
-    userSelection: "   --sgs",
-    expectedGridMode: "g-sgs",
+    userSelection: " --sgs",
+    expectedLayout: "g-sgs",
   }));
 
 test("switches to spotlight mode when there is a remote screen share", () =>
   testLayoutSwitch({
-    hasScreenShares: " n--y",
-    expectedGridMode: "g--s",
+    hasScreenShares: "n--y",
+    expectedLayout: " g--s",
   }));
 
 test("can manually switch to grid when there is a screenshare", () =>
   testLayoutSwitch({
-    hasScreenShares: " n-y",
-    userSelection: "   ---g",
-    expectedGridMode: "g-sg",
+    hasScreenShares: "n-y",
+    userSelection: "  ---g",
+    expectedLayout: " g-sg",
   }));
 
 test("auto-switches after manually selecting grid", () =>
   testLayoutSwitch({
     // Two screenshares will happen in sequence. There is a screen share that
     // forces spotlight, then the user manually switches back to grid.
-    hasScreenShares: " n-y-ny",
-    userSelection: "   ---g",
-    expectedGridMode: "g-sg-s",
+    hasScreenShares: "n-y-ny",
+    userSelection: "  ---g",
+    expectedLayout: " g-sg-s",
     // If we did want to respect manual selection, the expectation would be: g-sg
   }));
 
 test("switches back to grid mode when the remote screen share ends", () =>
   testLayoutSwitch({
-    hasScreenShares: " n--y--n",
-    expectedGridMode: "g--s--g",
+    hasScreenShares: "n--y--n",
+    expectedLayout: " g--s--g",
   }));
 
 test("auto-switches to spotlight again after first screen share ends", () =>
   testLayoutSwitch({
-    hasScreenShares: " nyny",
-    expectedGridMode: "gsgs",
+    hasScreenShares: "nyny",
+    expectedLayout: " gsgs",
   }));
 
 test("switches manually to grid after screen share while manually in spotlight", () =>
   testLayoutSwitch({
     // Initially, no one is sharing. Then the user manually switches to spotlight.
     // After a screen share starts, the user manually switches to grid.
-    hasScreenShares: " n-y",
-    userSelection: "   -s-g",
-    expectedGridMode: "gs-g",
-  }));
-
-test("auto-switches to spotlight when in flat window mode", () =>
-  testLayoutSwitch({
-    // First normal, then narrow, then flat.
-    windowMode: "      nNf",
-    expectedGridMode: "g-s",
+    hasScreenShares: "n-y",
+    userSelection: "  -s-g",
+    expectedLayout: " gs-g",
   }));
 
 test("allows switching modes manually when in flat window mode", () =>
   testLayoutSwitch({
-    // Window becomes flat, then user switches to grid and back.
+    // Window becomes flat, then user switches to spotlight and back.
     // Finally the window returns to a normal shape.
-    windowMode: "      nf--n",
-    userSelection: "   --gs",
-    expectedGridMode: "gsgsg",
+    windowMode: "    nf--n",
+    userSelection: " --sg",
+    expectedLayout: "g-sg",
   }));
 
-test("stays in spotlight while there are screen shares even when window mode changes", () =>
+test("switches to grid when in flat window mode even when there are screen shares", () =>
   testLayoutSwitch({
-    windowMode: "      nfn",
-    hasScreenShares: " y",
-    expectedGridMode: "s",
+    windowMode: "     nf",
+    hasScreenShares: "y",
+    expectedLayout: " sg",
   }));
 
-test("ignores end of screen share until window mode returns to normal", () =>
+test("ignores screen share until window mode returns to normal", () =>
   testLayoutSwitch({
-    windowMode: "      nf-n",
-    hasScreenShares: " y-n",
-    expectedGridMode: "s--g",
+    windowMode: "     f-n",
+    hasScreenShares: "ny-n",
+    expectedLayout: " g-sg",
   }));

src/state/LayoutSwitchViewModel.ts

@@ -0,0 +1,99 @@
+/*
+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 {
+  combineLatest,
+  map,
+  Subject,
+  startWith,
+  skipWhile,
+  switchAll,
+} from "rxjs";
+
+import { type WindowMode } from "./CallViewModel/CallViewModel.ts";
+import { constant, type Behavior } from "./Behavior.ts";
+import { type ObservableScope } from "./ObservableScope.ts";
+
+export type LayoutMode = "spotlight" | "grid";
+
+export interface LayoutSwitchViewModel {
+  /**
+   * The layout mode of the call's media tiles.
+   */
+  layout$: Behavior<LayoutMode>;
+  setLayout: (value: LayoutMode) => void;
+}
+
+/**
+ * Creates a layout mode switch that allows switching between grid and spotlight layouts.
+ * The actual layout mode might switch automatically to spotlight if there is a
+ * remote screen share active or if the window mode is flat.
+ *
+ * @param scope - The observable scope to manage subscriptions.
+ * @param windowMode$ - The current window mode.
+ * @param hasRemoteScreenShares$ - A behavior indicating if there are remote screen shares active.
+ */
+export function createLayoutSwitchViewModel(
+  scope: ObservableScope,
+  windowMode$: Behavior<WindowMode>,
+  hasRemoteScreenShares$: Behavior<boolean>,
+): LayoutSwitchViewModel {
+  const userSelection$ = new Subject<LayoutMode>();
+  // Callback to set the layout desired by the user.
+  // Notice that this is only a preference, the actual layout can be overridden
+  // if there is a remote screen share active.
+  const setLayout = (value: LayoutMode): void => userSelection$.next(value);
+
+  /**
+   * The natural layout - the layout that the interface would prefer to be in,
+   * not accounting for the user's manual selections.
+   */
+  const naturalLayout$ = scope.behavior<LayoutMode>(
+    combineLatest(
+      [hasRemoteScreenShares$, windowMode$],
+      (hasRemoteScreenShares, windowMode) => {
+        // When the window is flat (as with a phone in landscape orientation),
+        // grid is preferable as there's usually more than enough horizontal
+        // space to fit in some grid tiles on the side.
+        if (windowMode === "flat") return "grid";
+        // When there are screen shares, spotlight is a better experience. We
+        // want them to be big and readable.
+        return hasRemoteScreenShares ? "spotlight" : "grid";
+      },
+    ),
+  );
+
+  /**
+   * The layout mode of the call's media tiles.
+   */
+  const layout$ = scope.behavior<LayoutMode>(
+    // Whenever the user makes a selection, we enter a new mode of behavior:
+    userSelection$.pipe(
+      map((selection) => {
+        if (selection === "grid")
+          // The user has selected grid. Start by respecting their choice, but
+          // then follow the natural mode again as soon as it matches.
+          return naturalLayout$.pipe(
+            skipWhile((naturalMode) => naturalMode !== selection),
+            startWith(selection),
+          );
+
+        // The user has selected spotlight. If this matches the natural layout,
+        // then follow the natural layout going forward.
+        return selection === naturalLayout$.value
+          ? naturalLayout$
+          : constant(selection);
+      }),
+      // Initially the mode of behavior is to just follow the natural layout.
+      startWith(naturalLayout$),
+      // Switch between each mode of behavior.
+      switchAll(),
+    ),
+  );
+
+  return { layout$, setLayout };
+}

src/state/OneOnOneDesktopLayout.ts

@@ -10,19 +10,19 @@ import { type BehaviorSubject } from "rxjs";
 
 import {
   type Alignment,
-  type OneOnOneLandscapeLayout,
-  type OneOnOneLandscapeLayoutMedia,
+  type OneOnOneDesktopLayout,
+  type OneOnOneDesktopLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";
 
 /**
- * Produces a one-on-one landscape layout with the given media.
+ * Produces a one-on-one desktop layout with the given media.
  */
-export function oneOnOneLandscapeLayout(
-  media: OneOnOneLandscapeLayoutMedia,
+export function oneOnOneDesktopLayout(
+  media: OneOnOneDesktopLayoutMedia,
   pipAlignment$: BehaviorSubject<Alignment>,
   prevTiles: TileStore,
-): [OneOnOneLandscapeLayout, TileStore] {
+): [OneOnOneDesktopLayout, TileStore] {
   const update = prevTiles.from(2);
   update.registerGridTile(media.pip);
   update.registerGridTile(media.spotlight);