Update CallViewModel.ts

creating race.

.github/PULL_REQUEST_TEMPLATE.md

@@ -5,7 +5,7 @@
 > Every PR must have a linked issue
 > that a maintainer has reviewed and approved **before you started writing code**.
 > PRs that don't meet this requirement will not be reviewed.
-> See [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/main/CONTRIBUTING.md) for ElementCall decided for this approach.
+> See [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/livekit/CONTRIBUTING.md) for ElementCall decided for this approach.
 
 ## Content
 
@@ -39,7 +39,7 @@ Uncomment the markdown table below and fill in the last line:
 ## Checklist
 
 - [ ] A linked, pre-approved issue exists for this feature or UI change.
-- [ ] I have read [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/main/CONTRIBUTING.md) in full.
+- [ ] I have read [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/livekit/CONTRIBUTING.md) in full.
 - [ ] Pull request includes screenshots or videos for any UI changes.
 - [ ] Tests written for new code (and existing touched code where feasible).
 - [ ] Linter and other CI checks pass.

.github/workflows/build.yaml

@@ -6,7 +6,7 @@ on:
       - opened
       - labeled
   push:
-    branches: [main]
+    branches: [livekit, full-mesh]
 jobs:
   build_full_element_call:
     # Use the full package vite build
@@ -22,8 +22,8 @@ jobs:
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
   deploy_develop:
-    # Deploy main branch to call.element.dev after build completes
-    if: github.ref == 'refs/heads/main'
+    # Deploy livekit branch to call.element.dev after build completes
+    if: github.ref == 'refs/heads/livekit'
     needs: build_full_element_call
     runs-on: ubuntu-latest
     steps:
@@ -43,8 +43,8 @@ jobs:
                 }
             })
   docker_for_develop:
-    # Build docker and publish docker for main branch after build completes
-    if: github.ref == 'refs/heads/main'
+    # Build docker and publish docker for livekit branch after build completes
+    if: github.ref == 'refs/heads/livekit'
     needs: build_full_element_call
     permissions:
       contents: write

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

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

.github/workflows/sync-labels.yml

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

.github/workflows/test.yaml

@@ -2,11 +2,15 @@ name: Test
 on:
   pull_request: {}
   push:
-    branches: [main]
+    branches: [livekit]
 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
@@ -22,18 +26,6 @@ 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
@@ -60,22 +52,12 @@ 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: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
       - name: Run backend components
         run: |
-          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 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 ps
       - name: Run Playwright tests
         env:

.github/workflows/translations-download.yaml

@@ -40,11 +40,6 @@ 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
 
@@ -58,7 +53,7 @@ jobs:
           title: Localazy Download
           commit-message: Translations updates
           labels: |
-            PR-Task
+            T-Task
 
       - name: Enable automerge
         run: gh pr merge --merge --auto "$PR_NUMBER"

.github/workflows/translations-upload.yaml

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

.github/workflows/zizmor.yml

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

README.md

@@ -115,33 +115,30 @@ 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 Transports
+## 🧭 MatrixRTC Backend Discovery and Selection
 
-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.
+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.
 
 <p align="center">
   <img src="./docs/Federated_Setup.drawio.png" alt="Element Call federated setup">
 </p>
 
-### Transport Discovery
+### Backend Discovery
 
-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:
+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.:
 
 ```json
-{
-  "rtc_transports": [
+"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.example.com/livekit/jwt"
+    },
+]
 ```
 
 where the format for MatrixRTC using LiveKit backend is defined in
@@ -152,7 +149,7 @@ via `livekit_service_url`.
 
 ### Backend Selection
 
-- Each call participant proposes their discovered MatrixRTC transport from
+- Each call participant proposes their discovered MatrixRTC backend 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)),
@@ -215,7 +212,7 @@ See also:
 
 ### Backend
 
-A docker compose file `docker-compose-dev.yml` is provided to start the
+A docker compose file `dev-backend-docker-compose.yml` is provided to start the
 whole stack of components which is required for a local development environment
 including federation:
 
@@ -242,14 +239,15 @@ the backend components:
 ```sh
 pnpm backend
 # or for podman-compose:
-# podman-compose -f docker-compose-dev.yml up
+# podman-compose -f dev-backend-docker-compose.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` and
-> `https://matrix-rtc.m.localhost/livekit/jwt/healthz`. This can be done either
-> by adding the minimum localhost CA
+> 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
 > ([./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,8 +40,6 @@ 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
@@ -56,6 +54,7 @@ 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).
 #
@@ -68,8 +67,3 @@ 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,8 +40,6 @@ 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
@@ -56,6 +54,7 @@ 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).
 #
@@ -68,8 +67,3 @@ 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
+# Synapse reverse proxy including .well-known/matrix/client
 # domain synapse.m.localhost
 server {
     listen                  80;
@@ -11,6 +11,18 @@ 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
@@ -32,7 +44,7 @@ server {
 
 }
 
-# Synapse reverse proxy
+# Synapse reverse proxy including .well-known/matrix/client
 # domain synapse.othersite.m.localhost
 server {
     listen                  80;
@@ -45,6 +57,18 @@ 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,8 +40,6 @@ 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
@@ -56,6 +54,7 @@ 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).
 #
@@ -85,8 +84,3 @@ 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,8 +40,6 @@ 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
@@ -56,6 +54,7 @@ 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).
 #
@@ -85,8 +84,3 @@ rc_login:
 rc_registration:
   per_second: 10000
   burst_count: 10000
-
-matrix_rtc:
-  transports:
-    - type: livekit
-      livekit_service_url: https://matrix-rtc.m.localhost/livekit/jwt

config/config.devenv.json

@@ -5,6 +5,9 @@
       "server_name": "synapse.m.localhost"
     }
   },
+  "features": {
+    "feature_use_device_session_member_events": true
+  },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_session": {
     "wait_for_key_rotation_ms": 3000,

config/config.sample.json

@@ -8,6 +8,9 @@
   "livekit": {
     "livekit_service_url": "https://livekit-jwt.mydomain.com"
   },
+  "features": {
+    "feature_use_device_session_member_events": true
+  },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_mode": "compatibility",
   "matrix_rtc_session": {

dev-backend-docker-compose.yml

@@ -47,7 +47,7 @@ services:
       - ecbackend
 
   livekit:
-    image: livekit/livekit-server:v1.13.4
+    image: livekit/livekit-server:v1.10.1
     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.13.4
+    image: livekit/livekit-server:v1.10.1
     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@sha256:4ae259ae64fbedb67918c07d167fdcb0e05855a1615480ca445bea485e7d65ff
+    image: nginx:latest
     pull_policy: always
     volumes:
       - ./backend/dev_nginx.conf:/etc/nginx/conf.d/default.conf:Z

docker-compose-playwright.yml

@@ -1,19 +0,0 @@
-# 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:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
-  element-web-1:
-    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6

docs/README.md

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

docs/matrix_rtc_modes.md

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

docs/self_hosting.md

@@ -16,7 +16,7 @@
 The following [MSCs](https://github.com/matrix-org/matrix-spec-proposals) are
 required for Element Call to work properly:
 
-- **[MSC3266](https://github.com/deepbluev7/matrix-doc/blob/room-summaries/proposals/3266-room-summary.md)
+- **[MSC3266](https://github.com/deepbluev7/matrix-doc/blob/room-summaries/proposals/3266-room-summary.md):
   Room Summary API**: In Standalone mode Element Call is able to join rooms
   over federation using knocking. In this context MSC3266 is required as it
   allows to request a room summary of rooms you are not joined. The summary
@@ -29,26 +29,19 @@ 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 can configure these features by adding the following entries to
-`homeserver.yaml`:
+homeserver, you'll need to additionally add the following config items to
+`homeserver.yaml` to comply with Element Call:
 
 ```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
@@ -68,15 +61,6 @@ 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
@@ -84,10 +68,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).
 
-### LiveKit backend
+### MatrixRTC Backend
 
-In order to **guarantee smooth operation** of Element Call, a dedicated LiveKit
-backend is required for each site deployment.
+In order to **guarantee smooth operation** of Element Call, a MatrixRTC backend is
+required for each site deployment.
 
 ![MSC4195 compatible setup](MSC4195_setup.drawio.png)
 
@@ -102,11 +86,10 @@ 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:
 
@@ -181,7 +164,7 @@ Using Haproxy, you can achieve this by:
     use_backend mxrtc_auth_backend if is_mxrtc_auth matrixrtc_domain
 
 # Backend
-## LiveKit backend
+## MatrixRTC backend
 backend sfu_backend
     server livekit 127.0.0.1:7880
     http-request set-path %[path,regsub(^/livekit/sfu/,/)]
@@ -203,6 +186,44 @@ 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]  
@@ -256,7 +277,7 @@ runtime. Documentation and default values for `public/config.json` can be found
 in [ConfigOptions.ts](../src/config/ConfigOptions.ts).
 
 > [!CAUTION]
-> Please note configuring LiveKit backend via `config.json` of
+> Please note configuring MatrixRTC 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,7 +67,6 @@ 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.                                                                                                                                                                                                                                                                                                          |

knip.ts

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

locales/cs/app.json

@@ -102,15 +102,11 @@
     "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",
@@ -145,7 +141,6 @@
   },
   "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",
@@ -246,14 +241,11 @@
   "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 config is used.",
+      "from_config": "Currently, no overwrite is set. Url from well-known or config is used.",
       "label": "Custom Livekit-url",
       "reset": "Reset overwrite",
       "save": "Save",
@@ -80,6 +80,10 @@
         "description": "Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)",
         "label": "Compatibility: state events & multi SFU"
       },
+      "Legacy": {
+        "description": "Compatible with old versions of EC that do not support multi SFU",
+        "label": "Legacy: state events & oldest membership SFU"
+      },
       "Matrix_2_0": {
         "description": "Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later",
         "label": "Matrix 2.0: sticky events & multi SFU"
@@ -116,7 +120,6 @@
     "peer_connection_timeout_description": "Connection to the media server timed out. Try switching to a different network or disabling your VPN. If the problem persists, see our <0>troubleshooting guide</0> or contact your server administrator.",
     "room_creation_restricted": "Failed to create call",
     "room_creation_restricted_description": "Call creation might be restricted to authorized users only. Try again later, or contact your server admin if the problem persists.",
-    "screen_share_failed": "Could not start screen sharing",
     "sticky_events_required": "Homeserver does not support Matrix 2.0 calls",
     "sticky_events_required_description": "This deployment is configured to use Matrix 2.0 call mode, but the homeserver does not advertise support for sticky events (MSC4354). Ask your server admin to upgrade, or switch the deployment to a compatible mode.",
     "unexpected_ec_error": "An unexpected error occurred (<0>Error Code:</0> <1>{{ errorCode }}</1>). Please contact your server admin."
@@ -193,26 +196,15 @@
   "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…",
       "camera": "Camera",
       "camera_numbered": "Camera {{n}}",
       "change_device_button": "Change audio device",
@@ -225,15 +217,12 @@
       "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",
@@ -245,9 +234,7 @@
       "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,7 +3,6 @@
     "user_menu": "Kasutajamenüü"
   },
   "action": {
-    "blur_background": "Hägusta tausta",
     "close": "Sulge",
     "copy_link": "Kopeeri link",
     "edit": "Muuda",
@@ -73,20 +72,8 @@
     "environment_variables": "Keskkonnamuutujad",
     "hostname": "Hosti nimi: {{hostname}}",
     "livekit_server_info": "LiveKiti serveri teave",
-    "livekit_sfu": "LiveKiti meediaedastusserver (SFU): {{url}}",
+    "livekit_sfu": "LiveKit 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}}",
@@ -108,20 +95,13 @@
     "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": {
@@ -152,7 +132,6 @@
   },
   "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",
@@ -205,7 +184,6 @@
     "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",
@@ -245,7 +223,6 @@
   "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>",
@@ -253,14 +230,11 @@
   "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,7 +3,6 @@
     "user_menu": "Käyttäjävalikko"
   },
   "action": {
-    "blur_background": "Sumenna tausta",
     "close": "Sulje",
     "copy_link": "Kopioi linkki",
     "edit": "Muokkaa",
@@ -108,20 +107,14 @@
     "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": {
@@ -152,7 +145,6 @@
   },
   "layout_grid_label": "Ruudukko",
   "layout_spotlight_label": "Valokeila",
-  "layout_switch_label": "Asettelu",
   "lobby": {
     "ask_to_join": "Pyydä liittymistä puheluun",
     "join_as_guest": "Liity vieraana",
@@ -205,7 +197,6 @@
     "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",
@@ -245,7 +236,6 @@
   "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,7 +3,6 @@
     "user_menu": "Menu użytkownika"
   },
   "action": {
-    "blur_background": "Rozmycie tła",
     "close": "Zamknij",
     "copy_link": "Kopiuj link",
     "edit": "Edytuj",
@@ -22,7 +21,7 @@
     "submit": "Wyślij",
     "upload_file": "Prześlij plik"
   },
-  "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>.",
+  "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>.",
   "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>",
@@ -42,7 +41,7 @@
     "display_name": "Nazwa wyświetlana",
     "encrypted": "Szyfrowane",
     "home": "Strona domowa",
-    "loading": "Wczytywanie…",
+    "loading": "Ładowanie…",
     "next": "Dalej",
     "options": "Opcje",
     "password": "Hasło",
@@ -59,14 +58,6 @@
   "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",
@@ -74,21 +65,6 @@
     "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",
@@ -98,36 +74,25 @@
   "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 masz prawidłowy link lub <2> utwórz nowy</2>.</0>",
+    "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>",
     "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 połączenia.",
+    "call_ended_body": "Zostałeś usunięty z rozmowy.",
     "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ć",
@@ -147,18 +112,17 @@
   },
   "join_existing_call_modal": {
     "join_button": "Tak, dołącz do połączenia",
-    "text": "Połączenie już istnieje, czy chcesz do niej dołączyć?",
+    "text": "Te połączenie już istnieje, czy chcesz do niego 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 połączenia",
+    "ask_to_join": "Poproś o dołączenie do rozmowy",
     "join_as_guest": "Dołącz jako gość",
     "join_button": "Dołącz do połączenia",
     "leave_button": "Wróć do ostatnie",
-    "waiting_for_invite": "Prośba wysłana! Oczekiwanie na zatwierdzenie…"
+    "waiting_for_invite": "Żądanie wysłane"
   },
   "log_in": "Zaloguj",
   "logging_in": "Logowanie…",
@@ -198,15 +162,14 @@
   "screenshare_button_label": "Udostępnij ekran",
   "settings": {
     "audio_tab": {
-      "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"
+      "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"
     },
     "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",
@@ -229,7 +192,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 lepszego komfortu użytkowania.",
+      "introduction": "Tutaj możesz skonfigurować dodatkowe opcje dla lepszych doświadczeń.",
       "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ę.",
@@ -238,31 +201,26 @@
       "show_hand_raised_timer_label": "Pokaż czas po podniesieniu ręki"
     }
   },
-  "star_rating_input_label_one": "{{count}} gwiazdka",
-  "star_rating_input_label_few": "{{count}} gwiazdki",
-  "star_rating_input_label_many": "{{count}} gwiazdek",
+  "star_rating_input_label_one": "{{count}} gwiazdki",
+  "star_rating_input_label_other": "{{count}} gwiazdki",
   "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ę na swoje konto",
+  "unauthenticated_view_login_button": "Zaloguj się do swojego konta",
   "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": "Wyłącz wyciszenie mikrofonu",
-  "version": "{{productName}} wersja: {{version}}",
+  "unmute_microphone_button_label": "Odcisz mikrofon",
+  "version": "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 docker-compose-dev.yml up",
-    "backend-playwright": "docker-compose -f docker-compose-dev.yml -f docker-compose-playwright.yml up",
+    "backend": "docker-compose -f dev-backend-docker-compose.yml up",
+    "backend-playwright": "docker-compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up",
     "test:playwright": "playwright test",
     "test:playwright:open": "pnpm test:playwright --ui",
     "links:on": "cp scripts/.pnpmfile.cjs .pnpmfile.cjs & pnpm install",
@@ -54,7 +54,6 @@
     "@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",
@@ -77,18 +76,17 @@
     "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^10.0.0",
-    "@vector-im/compound-web": "^10.0.0",
+    "@vector-im/compound-web": "^9.3.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.0.18",
-    "@vitest/ui": "4.1.10",
-    "babel-plugin-react-compiler": "^1.0.0",
+    "@vitest/ui": "4.1.9",
     "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": "^26.0.0",
+    "i18next": "^25.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-cli": "^1.61.0",
     "jsdom": "^26.0.0",
@@ -97,17 +95,17 @@
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-    "matrix-widget-api": "^1.18.0",
+    "matrix-widget-api": "^1.16.1",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
-    "oxfmt": "^0.61.0",
+    "oxfmt": "^0.56.0",
     "oxlint": "^1.70.0",
-    "oxlint-tsgolint": "^0.25.0",
+    "oxlint-tsgolint": "^0.23.0",
     "pako": "^2.0.4",
     "postcss": "^8.4.41",
     "postcss-preset-env": "^10.0.0",
-    "posthog-js": "1.408.2",
+    "posthog-js": "1.374.0",
     "qrcode": "^1.5.4",
     "react": "19",
     "react-dom": "19",
@@ -131,5 +129,5 @@
     "vitest": "^4.1.5",
     "vitest-axe": "^1.0.0-pre.3"
   },
-  "packageManager": "pnpm@11.21.0+sha512.521705bce689924eac72f5a3587122f362689ef6571e55ba80076fd637c11132ecffada26fad4ea79c485bfddbfd3d5a2a5b05805a77e893de71ec8a6cca3bb1"
+  "packageManager": "pnpm@11.6.0+sha512.9a36518224080c6fe5165afdcfe79bfa118c29be703f3f462b1e32efe1e98e47e8750b148e08286250aad4113cc7993ca413c4e2cd447752708c2ee5751bc95f"
 }

playwright-backend-docker-compose.override.yml

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

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

playwright/fixtures/widget-user.ts

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

playwright/spa-helpers.ts

@@ -101,7 +101,9 @@ async function setRtcModeFromSettings(
 
   // Move to Developer tab now
   await page.getByRole("tab", { name: "Developer" }).click();
-  if (mode == "2_0") {
+  if (mode == "legacy") {
+    await page.getByText("Legacy: state events").click();
+  } else if (mode == "2_0") {
     await page.getByText("Matrix 2.0").click();
   } else {
     // compat
@@ -123,10 +125,21 @@ async function expectVideoTilesCount(page: Page, count: number): Promise<void> {
   });
 
   // There should be `count` video elements, visible and autoplaying
-  await expect(page.locator("video").filter({ visible: true })).toHaveCount(
-    count,
-    { timeout: 10000 },
-  );
+  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,
+  });
 }
 
 export const SpaHelpers = {

playwright/widget/federated-call.test.ts

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

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

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

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

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

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

@@ -36,7 +36,6 @@ 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,7 +53,6 @@ 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

@@ -21,7 +21,7 @@ const PASSWORD = "foobarbaz1!";
 export const HOST1 = "https://app.m.localhost/#/welcome";
 export const HOST2 = "https://app.othersite.m.localhost/#/welcome";
 
-export type RtcMode = "compat" | "2_0";
+export type RtcMode = "legacy" | "compat" | "2_0";
 
 export class TestHelpers {
   public static async startCallInCurrentRoom(
@@ -73,6 +73,9 @@ 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
@@ -82,9 +85,7 @@ export class TestHelpers {
     await expect(page.getByText(label)).toBeVisible({
       timeout: 10000,
     });
-    // 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({
+    await page.getByRole("button", { name: "Join" }).click({
       timeout: 5000,
     });
   }
@@ -309,7 +310,9 @@ export class TestHelpers {
 
     // Move to Developer tab now
     await iframe.getByRole("tab", { name: "Developer" }).click();
-    if (mode == "2_0") {
+    if (mode == "legacy") {
+      await iframe.getByText("Legacy: state events").click();
+    } else if (mode == "2_0") {
       await iframe.getByText("Matrix 2.0").click();
     } else {
       // compat
@@ -344,12 +347,6 @@ 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
@@ -388,9 +385,25 @@ export class TestHelpers {
     frame: FrameLocator,
     count: number,
   ): Promise<void> {
-    await expect(frame.locator("video").filter({ visible: true })).toHaveCount(
-      count,
-      { timeout: 10000 },
-    );
+    // 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);
   }
 }

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

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

pnpm-workspace.yaml

@@ -1,15 +1,10 @@
-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@git+https://github.com/matrix-org/matrix-js-sdk.git": true
+  "matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/8c95727b6278fe7942c20d0b9485f984dd0694b7": true
   "protobufjs": true
 overrides:
   # We need compatible versions of RxJS in our dependencies and LiveKit's dependencies, but
@@ -29,30 +24,12 @@ overrides:
   # Security fixes:
   # - https://github.com/element-hq/element-call/security/dependabot/110
   # - https://github.com/element-hq/element-call/security/dependabot/122
-  # - 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"
+  "qs": "^6.14.1"
+  # Security fix: https://github.com/element-hq/element-call/security/dependabot/106
+  "js-yaml": "^4.1.1"
   # Storybook declares support for 0.27.0 only but empirically works fine with 0.28.0.
   "esbuild": "^0.28.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"
+  # Multiple security fixes: https://github.com/nodejs/undici/releases/tag/v6.24.0
+  "undici": "^6.24.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,15 +61,6 @@
     {
       "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",

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

src/Slider.tsx

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

src/UrlParams.test.ts

@@ -16,15 +16,12 @@ 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,11 +45,6 @@ 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
@@ -150,10 +145,6 @@ 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;
 }
 
 /**
@@ -461,9 +452,6 @@ 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/__snapshots__/AppBar.test.tsx.snap

@@ -3,12 +3,12 @@
 exports[`AppBar > renders 1`] = `
 <div>
   <div
-    class="_bar_221541"
+    class="bar"
   >
     <header>
       <button
         aria-labelledby="_r_0_"
-        class="_icon-button_1215g_8 _primaryButton_221541"
+        class="_icon-button_1215g_8 primaryButton"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 24px;"
@@ -33,7 +33,7 @@ exports[`AppBar > renders 1`] = `
         </div>
       </button>
       <div
-        class="_secondaryButton_221541"
+        class="secondaryButton"
       />
     </header>
   </div>
@@ -46,12 +46,12 @@ exports[`AppBar > renders 1`] = `
 exports[`AppBar > renders with title and subtitle 1`] = `
 <div>
   <div
-    class="_bar_221541"
+    class="bar"
   >
     <header>
       <button
         aria-labelledby="_r_6_"
-        class="_icon-button_1215g_8 _primaryButton_221541"
+        class="_icon-button_1215g_8 primaryButton"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 24px;"
@@ -76,17 +76,17 @@ exports[`AppBar > renders with title and subtitle 1`] = `
         </div>
       </button>
       <h1
-        class="_typography_6v6n8_153 _font-body-lg-medium_6v6n8_79 _title_221541"
+        class="_typography_6v6n8_153 _font-body-lg-medium_6v6n8_79 title"
       >
         Title
       </h1>
       <span
-        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69 _subtitle_221541"
+        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69 subtitle"
       >
         Subtitle
       </span>
       <div
-        class="_secondaryButton_221541"
+        class="secondaryButton"
       />
     </header>
   </div>

src/__snapshots__/Modal.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`the content is rendered when the modal is open 1`] = `
 <div
   aria-labelledby="radix-_r_4_"
-  class="_overlay_2f5303 _animate_2f5303 _modal_dbeffe _dialog_dbeffe _glass_sepwu_8"
+  class="overlay animate modal dialog _glass_sepwu_8"
   data-state="open"
   id="radix-_r_3_"
   role="dialog"
@@ -11,10 +11,10 @@ exports[`the content is rendered when the modal is open 1`] = `
   tabindex="-1"
 >
   <div
-    class="_content_dbeffe"
+    class="content"
   >
     <div
-      class="_header_dbeffe"
+      class="header"
     >
       <h2
         class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
@@ -24,7 +24,7 @@ exports[`the content is rendered when the modal is open 1`] = `
       </h2>
     </div>
     <div
-      class="_body_dbeffe"
+      class="body"
     >
       <p>
         This is the content.
@@ -37,7 +37,7 @@ exports[`the content is rendered when the modal is open 1`] = `
 exports[`the modal renders as a drawer in mobile viewports 1`] = `
 <div
   aria-labelledby="radix-_r_a_"
-  class="_overlay_2f5303 _modal_dbeffe _drawer_dbeffe"
+  class="overlay modal drawer"
   data-state="open"
   data-vaul-animate="true"
   data-vaul-custom-container="false"
@@ -51,13 +51,13 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
   tabindex="-1"
 >
   <div
-    class="_content_dbeffe"
+    class="content"
   >
     <div
-      class="_header_dbeffe"
+      class="header"
     >
       <div
-        class="_handle_dbeffe"
+        class="handle"
       />
       <h2
         id="radix-_r_a_"
@@ -67,7 +67,7 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
       </h2>
     </div>
     <div
-      class="_body_dbeffe"
+      class="body"
     >
       <p>
         This is the content.

src/__snapshots__/QrCode.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`QrCode > renders 1`] = `
 <div
-  class="_qrCode_458264 bar"
+  class="qrCode bar"
 >
   <img
     alt="QR Code"

src/__snapshots__/Toast.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Toast > renders 1`] = `
 <button
   aria-labelledby="radix-_r_4_"
-  class="_overlay_2f5303 _animate_2f5303 _toast_15a045"
+  class="overlay animate toast"
   data-state="open"
   id="radix-_r_3_"
   role="dialog"

src/button/Button.module.css

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

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

@@ -140,7 +140,7 @@ exports[`Can raise hand 1`] = `
     aria-expanded="false"
     aria-haspopup="true"
     aria-labelledby="_r_1j_"
-    class="_button_1nw83_8 _raisedButton_fb25ab _has-icon_1nw83_60 _icon-only_1nw83_53"
+    class="_button_1nw83_8 raisedButton _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="primary"
     data-size="lg"
     role="button"

src/components/CallFooter.module.css

@@ -19,6 +19,11 @@ 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,12 +16,10 @@ 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 = {
@@ -34,7 +32,6 @@ 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.
@@ -43,18 +40,11 @@ const mediaDevices = new MediaDevices(globalScope);
  */
 function CallFooterStoryWrapper({
   children,
-  layout,
-  setLayout,
   ...vmSnapshot
-}: Omit<FooterSnapshot, "layoutSwitchVm"> & {
+}: FooterSnapshot & {
   children?: false | JSX.Element | JSX.Element[] | undefined;
-  layout: LayoutMode | null;
-  setLayout: (value: LayoutMode) => void;
 }): ReactNode {
-  const vm = useStaticViewModel({
-    ...vmSnapshot,
-    layoutSwitchVm: layout && { layout$: constant(layout), setLayout },
-  });
+  const vm = useStaticViewModel(vmSnapshot);
   return (
     <MediaDevicesContext value={mediaDevices}>
       <div className={inCallViewStyles.inRoom}>
@@ -72,50 +62,28 @@ 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,
-    layout: "grid",
-    setLayout: fn(),
+    layoutMode: "grid",
     audioEnabled: true,
     audioBusy: false,
     videoEnabled: true,
     videoBusy: false,
+    setLayoutMode: fn(),
     openSettings: fn(),
     toggleAudio: fn(),
     toggleVideo: fn(),
@@ -127,7 +95,6 @@ export const Default: Story = {
     showFooter: true,
     hideControls: false,
     asOverlay: false,
-    showModals: true,
     sharingScreen: false,
     audioOutputSwitcher: undefined,
     reactionIdentifier: undefined,
@@ -144,6 +111,29 @@ 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 = {
@@ -204,7 +194,7 @@ export const AudioVideoEnabled: Story = {
 
     const spotlightRadio = canvas.getByRole("radio", { name: "Spotlight" });
     await userEvent.click(spotlightRadio);
-    await expect(args.setLayout).toHaveBeenCalledWith("spotlight");
+    await expect(args.setLayoutMode).toHaveBeenCalledWith("spotlight");
 
     const micButtonMute = canvas.getByRole("switch", {
       name: "Mute microphone",
@@ -235,14 +225,14 @@ export const SpotlightMode: Story = {
   ...Default,
   args: {
     ...Default.args,
-    layout: "spotlight",
+    layoutMode: "spotlight",
   },
   play: async ({ args, canvasElement }) => {
     const canvas = within(canvasElement);
 
     const spotlightRadio = canvas.getByRole("radio", { name: "Grid" });
     await userEvent.click(spotlightRadio);
-    await expect(args.setLayout).toHaveBeenCalledWith("grid");
+    await expect(args.setLayoutMode).toHaveBeenCalledWith("grid");
   },
 };
 
@@ -274,7 +264,7 @@ export const Pip: Story = {
   args: {
     ...Default.args,
     buttonSize: "md",
-    layout: null,
+    layoutMode: undefined,
   },
   play: async ({ args, canvasElement }) => {
     const canvas = within(canvasElement);
@@ -358,7 +348,7 @@ export const Lobby: Story = {
     ...Default.args,
     showLogo: false,
     openSettings: undefined,
-    layout: null,
+    setLayoutMode: undefined,
     toggleScreenSharing: undefined,
   },
   parameters: {
@@ -372,7 +362,7 @@ export const LobbyMobile: Story = {
     ...Default.args,
     showLogo: false,
 
-    layout: null,
+    setLayoutMode: undefined,
     toggleScreenSharing: undefined,
   },
   globals: {
@@ -389,7 +379,7 @@ export const LobbyRecentButton: Story = {
     ...Default.args,
     children: <Link>Back To Recents</Link>,
     showLogo: false,
-    layout: null,
+    setLayoutMode: undefined,
     toggleScreenSharing: undefined,
   },
   parameters: {
@@ -403,7 +393,7 @@ export const LobbyRecentButtonMobile: Story = {
     ...Default.args,
     children: <Link>Back To Recents</Link>,
     showLogo: false,
-    layout: null,
+    setLayoutMode: undefined,
     toggleScreenSharing: undefined,
   },
   globals: {

src/components/CallFooter.tsx

@@ -7,6 +7,12 @@ 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";
@@ -22,15 +28,13 @@ 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;
@@ -57,6 +61,8 @@ 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;
@@ -77,13 +83,11 @@ export interface FooterState {
   /** The footer should be used as an overlay.
    * (Over the Call Grid) This saves spaces on small screens. */
   asOverlay: boolean;
-  showModals: boolean;
 
   buttonSize: "md" | "lg";
   showLogo: boolean;
 
-  /** Also controls if the layout switch is visible */
-  layoutSwitchVm: LayoutSwitchViewModel | null;
+  layoutMode: GridMode | undefined;
 
   sharingScreen: boolean;
 
@@ -108,22 +112,16 @@ 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> = ({
-  className,
-  ref,
-  children,
-  vm,
-}) => {
+export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
   const asOverlay = useBehavior(vm.asOverlay$);
   const showFooter = useBehavior(vm.showFooter$);
   const hideControls = useBehavior(vm.hideControls$);
-  const showModals = useBehavior(vm.showModals$);
-  const layoutSwitchVm = useBehavior(vm.layoutSwitchVm$);
+  const layoutMode = useBehavior(vm.layoutMode$);
+  const setLayoutMode = useBehavior(vm.setLayoutMode$);
   const openSettings = useBehavior(vm.openSettings$);
   const audioEnabled = useBehavior(vm.audioEnabled$);
   const audioBusy = useBehavior(vm.audioBusy$);
@@ -138,6 +136,7 @@ export const CallFooter: FC<FooterProps> = ({
   const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
   const hangup = useBehavior(vm.hangup$);
   const debugTileLayout = useBehavior(vm.debugTileLayout$);
+  const tileStoreGeneration = useBehavior(vm.tileStoreGeneration$);
   const videoOptions = useBehavior(vm.videoOptions$);
   const selectedVideo = useBehavior(vm.selectedVideo$);
   const audioOptions = useBehavior(vm.audioOptions$);
@@ -237,8 +236,7 @@ export const CallFooter: FC<FooterProps> = ({
     );
   }
 
-  // Reaction button contains a pretty large menu, so treat it like a modal
-  if (reactionIdentifier && reactionData && showModals) {
+  if (reactionIdentifier && reactionData) {
     buttons.push(
       <ReactionToggleButton
         size={buttonSize}
@@ -286,9 +284,7 @@ export const CallFooter: FC<FooterProps> = ({
           />
         </>
       )}
-      {debugTileLayout ? (
-        <TilesDebugInfo generation$={vm.tileStoreGeneration$} />
-      ) : undefined}
+      {debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
     </div>
   );
 
@@ -296,7 +292,7 @@ export const CallFooter: FC<FooterProps> = ({
     <div
       ref={ref}
       data-testid="footer-container"
-      className={classNames(className, styles.footer, {
+      className={classNames(styles.footer, {
         [styles.overlay]: asOverlay,
         [styles.hidden]: !showFooter,
       })}
@@ -315,20 +311,21 @@ export const CallFooter: FC<FooterProps> = ({
         {(showLogo || debugTileLayout) && logoDebugContainer}
       </div>
       {!hideControls && <div className={styles.buttons}>{buttons}</div>}
-      {!hideControls && layoutSwitchVm && (
-        <LayoutSwitch vm={layoutSwitchVm} className={styles.layout} />
+      {!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}
+        />
       )}
     </div>
   );
 };
-
-interface TilesDebugInfoProps {
-  generation$: Behavior<number | undefined>;
-}
-
-// Isolated in its own component since the layout generation updates frequently
-// and we can avoid re-rendering the footer this way
-const TilesDebugInfo: FC<TilesDebugInfoProps> = ({ generation$ }) => {
-  const generation = useBehavior(generation$);
-  return `Tiles generation: ${generation}`;
-};

src/components/CallFooterViewModel.test.ts

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

src/components/CallFooterViewModel.tsx

@@ -161,7 +161,6 @@ export function createCallFooterViewModel(
     // candidat to move into the FooterViewModel
     showFooter$: callModel.showFooter$,
     hideControls$: constant(!showControls),
-    showModals$: callModel.showModals$,
     asOverlay$: callModel.edgeToEdge$,
     buttonSize$: scope.behavior(
       isPip$.pipe(map<boolean, "md" | "lg">((pip) => (pip ? "md" : "lg"))),
@@ -169,12 +168,12 @@ export function createCallFooterViewModel(
 
     openSettings$: scope.behavior(
       combineLatest([
-        callModel.showModals$,
+        isPip$,
         callModel.showHeader$,
         callModel.setSettingsOpen$,
       ]).pipe(
-        map(([showModals, showHeader, setSettingsOpen]) =>
-          showModals && headerStyle !== HeaderStyle.AppBar && showControls
+        map(([isPip, showHeader, setSettingsOpen]) =>
+          !isPip && headerStyle !== HeaderStyle.AppBar && showControls
             ? (): void => setSettingsOpen(true)
             : undefined,
         ),
@@ -183,7 +182,14 @@ export function createCallFooterViewModel(
 
     showLogo$: scope.behavior(isPip$.pipe(map((isPip) => showLogo && !isPip))),
 
-    layoutSwitchVm$: callModel.layoutSwitchVm$,
+    layoutMode$: callModel.gridMode$,
+    setLayoutMode$: scope.behavior(
+      isPip$.pipe(
+        map((isPip) =>
+          !isPip && showControls ? callModel.setGridMode : undefined,
+        ),
+      ),
+    ),
 
     sharingScreen$: callModel.sharingScreen$,
     toggleScreenSharing$: constant(callModel.toggleScreenSharing ?? undefined),
@@ -240,20 +246,21 @@ export function createLobbyFooterViewModel(
       showLogo,
       hideControls: false,
       asOverlay: false,
-      showModals: true,
       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,
-      layoutSwitchVm: null,
+      layoutMode: undefined,
       sharingScreen: false,
       audioOutputSwitcher: undefined,
       reactionIdentifier: undefined,

src/components/MediaMuteAndSwitchButton.test.tsx

@@ -180,12 +180,12 @@ describe("MediaMuteAndSwitchButton", () => {
     );
 
     await user.click(screen.getByRole("button", { name: "Microphone" }));
-    screen.getByRole("menuitemradio", { name: "Microphone 1" });
-    screen.getByRole("menuitemradio", { name: "Microphone 2" });
+    screen.getByRole("menuitem", { name: "Microphone 1" });
+    screen.getByRole("menuitem", { name: "Microphone 2" });
     await user.keyboard("[Escape]");
     await user.click(screen.getByRole("button", { name: "Camera" }));
-    screen.getByRole("menuitemradio", { name: "Camera 1" });
-    screen.getByRole("menuitemradio", { name: "Camera 2" });
+    screen.getByRole("menuitem", { name: "Camera 1" });
+    screen.getByRole("menuitem", { name: "Camera 2" });
   });
 
   test("calls select callback on menu click", async () => {
@@ -206,9 +206,7 @@ describe("MediaMuteAndSwitchButton", () => {
     );
 
     await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(
-      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
-    );
+    await user.click(screen.getByRole("menuitem", { name: "Microphone 2" }));
 
     expect(onSelect).toHaveBeenCalledWith("mic2");
   });
@@ -230,9 +228,7 @@ describe("MediaMuteAndSwitchButton", () => {
     );
 
     await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(
-      screen.getByRole("menuitemradio", { name: "Microphone 1" }),
-    );
+    await user.click(screen.getByRole("menuitem", { name: "Microphone 1" }));
 
     expect(onSelect).not.toHaveBeenCalled();
   });
@@ -268,24 +264,18 @@ describe("MediaMuteAndSwitchButton", () => {
     const { getByRole } = renderComponent(<Wrapper />);
 
     await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(
-      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
-    );
+    await user.click(screen.getByRole("menuitem", { name: "Microphone 2" }));
 
     expect(onSelectPressed).toHaveBeenCalled();
     expect(onOptionUpdated).not.toHaveBeenCalled();
     // After clicking, plannedSelection="mic2" but selectedOption is still "mic1",
-    // so mic2 should be in an activating state
-    screen.getByRole("menuitemradio", {
-      name: "Microphone 2 Activating…",
-      checked: false,
-    });
+    // so a spinner should appear on the mic2 item
+    const mic2Item = screen.getByRole("menuitem", { name: "Microphone 2" });
+    expect(mic2Item.querySelector(".rotate")).toBeTruthy();
 
-    // The currently-selected mic1 item should not be activating
-    screen.getByRole("menuitemradio", {
-      name: "Microphone 1",
-      checked: true,
-    });
+    // The currently-selected mic1 item should not have a spinner
+    const mic1Item = screen.getByRole("menuitem", { name: "Microphone 1" });
+    expect(mic1Item.querySelector(".rotate")).toBeNull();
     await act(async () => {
       // resolve the promise that acutally updates the select option.
       resolve();
@@ -294,7 +284,7 @@ describe("MediaMuteAndSwitchButton", () => {
 
     expect(onOptionUpdated).toHaveBeenCalled();
     // Spinner should now be gone since the selection has caught up
-    const mic2ItemAfter = screen.getByRole("menuitemradio", {
+    const mic2ItemAfter = screen.getByRole("menuitem", {
       name: "Microphone 2",
     });
     expect(mic2ItemAfter.querySelector(".rotate")).toBeNull();
@@ -346,15 +336,11 @@ describe("MediaMuteAndSwitchButton", () => {
     await user.click(getByRole("button", { name: "Microphone" }));
 
     // The selected item (mic2) renders both an IconOptions SVG and a CheckIcon SVG
-    const mic1Item = screen.getByRole("menuitemradio", {
-      name: "Microphone 2",
-    });
+    const mic1Item = screen.getByRole("menuitem", { name: "Microphone 2" });
     expect(mic1Item.querySelectorAll("svg").length).toBe(2);
 
     // The unselected item (mic1) only renders its IconOptions SVG
-    const mic2Item = screen.getByRole("menuitemradio", {
-      name: "Microphone 1",
-    });
+    const mic2Item = screen.getByRole("menuitem", { name: "Microphone 1" });
     expect(mic2Item.querySelectorAll("svg").length).toBe(1);
   });
 });

src/components/MediaMuteAndSwitchButton.tsx

@@ -191,7 +191,6 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
                     width={24}
                     height={24}
                     className={styles.itemIcon}
-                    aria-hidden
                   />
                 )
               }
@@ -202,23 +201,10 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
                 onSelect?.(id);
               }}
               key={id}
-              role="menuitemradio"
-              aria-checked={selectedOption === id}
             >
-              {selectedOption === id && (
-                <CheckIcon
-                  width={24}
-                  height={24}
-                  aria-hidden // A label would be redundant to aria-checked above
-                />
-              )}
+              {selectedOption === id && <CheckIcon width={24} height={24} />}
               {selectedOption !== id && plannedSelection === id && (
-                <SpinnerIcon
-                  width={24}
-                  height={24}
-                  className={styles.rotate}
-                  aria-label={t("settings.devices.activating")}
-                />
+                <SpinnerIcon width={24} height={24} className={styles.rotate} />
               )}
             </MenuItem>
           );

src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`MediaMuteAndSwitchButton > renders 1`] = `
 <div>
   <div
-    class="_container_e649de"
+    class="container"
   >
     <button
       aria-busy="false"
@@ -35,7 +35,7 @@ exports[`MediaMuteAndSwitchButton > renders 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Microphone"
-      class="_button_1nw83_8 _menuButton_e649de _has-icon_1nw83_60 _icon-only_1nw83_53"
+      class="_button_1nw83_8 menuButton _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-size="lg"
       data-state="closed"

src/config/ConfigOptions.ts

@@ -12,7 +12,9 @@ Please see LICENSE in the repository root for full details.
  * Settings, or pinned for a deployment via `matrix_rtc_mode` in config.json.
  */
 export enum MatrixRTCMode {
-  /** Multi-SFU transport, legacy JWT endpoint, state events. */
+  /** Legacy single-SFU + user-keyed memberships + legacy JWT endpoint. */
+  Legacy = "legacy",
+  /** Multi-SFU transport, legacy JWT endpoint, no sticky events. */
   Compatibility = "compatibility",
   /**
    * Multi-SFU transport with:
@@ -72,7 +74,10 @@ 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 over the transports endpoint.
+    // 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"
     livekit_service_url: string;
   };
 
@@ -84,6 +89,15 @@ export interface ConfigOptions {
      * Allow to join group calls without audio and video.
      */
     feature_group_calls_without_video_and_audio?: boolean;
+
+    /**
+     * Send device-specific call session membership state events instead of
+     * legacy user-specific call membership state events.
+     * This setting has no effect when the user joins an active call with
+     * legacy state events. For compatibility, Element Call will always join
+     * active legacy calls with legacy state events.
+     */
+    feature_use_device_session_member_events?: boolean;
   };
 
   /**
@@ -91,61 +105,6 @@ 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.
@@ -168,8 +127,7 @@ export interface ConfigOptions {
   /**
    * Pins the {@link MatrixRTCMode} for all clients on this deployment,
    * overriding any per-user choice from the Developer Settings. If unset,
-   * the user's Developer Settings choice (or its default of `Compatibility`)
-   * wins.
+   * the user's Developer Settings choice (or its default of `Legacy`) wins.
    */
   matrix_rtc_mode?: MatrixRTCMode;
 
@@ -219,44 +177,20 @@ export interface ConfigOptions {
      * This is what goes into the m.rtc.member event expiry field and is typically set to a number of hours.
      */
     membership_event_expiry_ms?: number;
-
-    /**
-     * The number of participants in the session at which the media encryption key will no longer
-     * be rotated.
-     *
-     * Rotating a key requires sending it to every participant device, so in large sessions the
-     * cost of rotating on every join/leave becomes prohibitive. At this limit the current key is
-     * kept and distributed to new joiners; no new keys are generated for joiners/leavers.
-     *
-     * Defaults to the js-sdk default (undefined). Which means that rotation will always happen.
-     */
-    key_rotation_participant_limit?: number;
   };
 }
 
 // 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;
@@ -264,26 +198,21 @@ export interface ResolvedConfigOptions extends ConfigOptions {
     delayed_leave_event_restart_ms?: number;
     network_error_retry_ms: number;
     membership_event_expiry_ms?: number;
-    key_rotation_participant_limit?: number;
   };
 }
 
 export const DEFAULT_CONFIG: ResolvedConfigOptions = {
-  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,
+  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",
   matrix_rtc_session: {
     delayed_leave_event_delay_ms: 10000,
     network_error_retry_ms: 1000,

src/graphics/backgroundGradient.svg

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

@@ -0,0 +1,48 @@
+<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,8 +41,6 @@ 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;
@@ -287,6 +285,7 @@ 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(
     () =>
@@ -373,10 +372,6 @@ 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,
     () => ({
@@ -394,9 +389,9 @@ export function Grid<
         y,
         width,
         height,
-        immediate,
+        immediate: prefersReducedMotion,
       }),
-      enter: { opacity: 1, scale: 1, immediate },
+      enter: { opacity: 1, scale: 1, immediate: prefersReducedMotion },
       update: ({
         id,
         x,
@@ -411,9 +406,9 @@ export function Grid<
               y,
               width,
               height,
-              immediate,
+              immediate: prefersReducedMotion,
             },
-      leave: { opacity: 0, scale: 0, immediate },
+      leave: { opacity: 0, scale: 0, immediate: prefersReducedMotion },
       config: { mass: 0.7, tension: 252, friction: 25 },
     }),
     // react-spring's types are bugged and can't infer the spring type
@@ -446,7 +441,8 @@ export function Grid<
               y: tile.y,
               width: tile.width,
               height: tile.height,
-              immediate: immediate || ((key): boolean => key === "zIndex"),
+              immediate:
+                prefersReducedMotion || ((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),
@@ -457,7 +453,7 @@ export function Grid<
               x: tileX,
               y: tileY,
               immediate:
-                immediate ||
+                prefersReducedMotion ||
                 ((key): boolean =>
                   key === "zIndex" || key === "x" || key === "y"),
             },

src/grid/OneOnOneLandscapeLayout.tsx

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

src/grid/OneOnOnePortraitLayout.module.css

@@ -19,28 +19,14 @@ 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: 132px;
-  block-size: 88px;
+  inline-size: 88px;
+  block-size: 132px;
 }
 
 .pip[data-size="lg"] {
-  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;
-  }
+  inline-size: 140px;
+  block-size: 210px;
 }
 
 .pip[data-block-alignment="start"] {

src/grid/OneOnOnePortraitLayout.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 OneOnOneMobileLayout as OneOnOneMobileLayoutModel } from "../state/layout-types.ts";
+import { type OneOnOnePortraitLayout as OneOnOnePortraitLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
-import styles from "./OneOnOneMobileLayout.module.css";
+import styles from "./OneOnOnePortraitLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
 
 /**
- * An implementation of the "one-on-one" layout for mobile platforms, in which
+ * An implementation of the "one-on-one" layout for portrait screens, in which
  * the remote participant is shown at maximum size, overlaid by a small view of
  * the local participant.
  */
-export const makeOneOnOneMobileLayout: CallLayout<
-  OneOnOneMobileLayoutModel
+export const makeOneOnOnePortraitLayout: CallLayout<
+  OneOnOnePortraitLayoutModel
 > = () => ({
   foreground: "scrolling",
 
-  fixed: function OneOnOneMobileLayoutFixed({ ref, model, Slot }): ReactNode {
+  fixed: function OneOnOnePortraitLayoutFixed({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     return (
       <div ref={ref} className={styles.layer}>
@@ -38,7 +38,7 @@ export const makeOneOnOneMobileLayout: CallLayout<
     );
   },
 
-  scrolling: function OneOnOneMobileLayoutScrolling({
+  scrolling: function OneOnOnePortraitLayoutScrolling({
     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 FC, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -13,9 +13,6 @@ 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
@@ -57,10 +54,16 @@ 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}>
-        <SpotlightSlot media$={model.spotlight.media$} />
+        <div
+          className={classNames(styles.spotlight, {
+            [styles.withIndicators]: withIndicators,
+          })}
+        />
         <div className={styles.grid}>
           {model.grid.map((m) => (
             <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
@@ -70,20 +73,3 @@ 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,7 +15,8 @@ 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 {
@@ -27,6 +28,12 @@ Please see LICENSE in the repository root for full details.
   --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
@@ -48,6 +55,7 @@ Please see LICENSE in the repository root for full details.
   --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;
@@ -66,6 +74,9 @@ Please see LICENSE in the repository root for full details.
 
 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;
@@ -74,27 +85,6 @@ 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,7 +30,6 @@ 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";
@@ -238,7 +237,6 @@ 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,6 +173,14 @@ 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/options.test.ts

@@ -1,213 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { 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,144 +9,46 @@ import {
   AudioPresets,
   DefaultReconnectPolicy,
   type RoomOptions,
+  ScreenSharePresets,
   type TrackPublishDefaults,
   type VideoPreset,
   VideoPresets,
-  VideoPreset as VideoPresetClass,
 } from "livekit-client";
 
-import { Config } from "../config/Config";
-import { DEFAULT_CONFIG, type ConfigOptions } from "../config/ConfigOptions";
+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;
 
-/**
- * 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;
-}
+export const defaultLiveKitOptions: RoomOptions = {
+  // automatically manage subscribed video quality
+  adaptiveStream: 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;
+  // optimize publishing bandwidth and CPU for published tracks
+  dynacast: true,
 
-  // Camera video encoding
-  const videoEncoding = {
-    maxBitrate: videoConf?.max_bitrate ?? defaults.video.max_bitrate,
-    maxFramerate: videoConf?.max_framerate ?? defaults.video.max_framerate,
-  };
+  // capture settings
+  videoCaptureDefaults: {
+    resolution: VideoPresets.h720.resolution,
+  },
 
-  // 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];
-  }
+  // publish settings
+  publishDefaults: defaultLiveKitPublishOptions,
 
-  // 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);
-}
+  // default LiveKit options that seem to be sane
+  stopLocalTrackOnUnpublish: true,
+  reconnectPolicy: new DefaultReconnectPolicy(),
+  disconnectOnPageLeave: true,
+  webAudioMix: false,
+};

src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`RaisedHandIndicator > renders a smaller indicator when miniature is specified 1`] = `
 <div
-  class="_reactionIndicatorWidget_abd277"
+  class="reactionIndicatorWidget"
 >
   <div
-    class="_reaction_abd277"
+    class="reaction"
   >
     <span
       aria-label="Reaction"
@@ -22,10 +22,10 @@ exports[`RaisedHandIndicator > renders a smaller indicator when miniature is spe
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised 1`] = `
 <div
-  class="_reactionIndicatorWidget_abd277 _reactionIndicatorWidgetLarge_abd277"
+  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
 >
   <div
-    class="_reaction_abd277 _reactionLarge_abd277"
+    class="reaction reactionLarge"
   >
     <span
       aria-label="Reaction"
@@ -42,10 +42,10 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised with the expected time 1`] = `
 <div
-  class="_reactionIndicatorWidget_abd277 _reactionIndicatorWidgetLarge_abd277"
+  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
 >
   <div
-    class="_reaction_abd277 _reactionLarge_abd277"
+    class="reaction reactionLarge"
   >
     <span
       aria-label="Reaction"

src/room/GroupCallView.tsx

@@ -555,9 +555,6 @@ 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,23 +14,6 @@ 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;
@@ -99,18 +82,19 @@ spotlight tile is maximised and displaying video, apply a gradient background. *
   /* Disable pointer events so the overlay doesn't block interaction with
   elements behind it */
   pointer-events: none;
+}
 
-  > :not(:first-child) {
-    pointer-events: initial;
-  }
-
-  .tile {
-    position: absolute;
-    inset-block-start: 0;
-  }
+.fixedGrid > :not(:first-child),
+.scrollingGrid > :not(:first-child) {
+  pointer-events: initial;
 }
 
 .tile {
+  position: absolute;
+  inset-block-start: 0;
+}
+
+.tile.maximised {
   position: relative;
   flex-grow: 1;
 }

src/room/InCallView.test.tsx

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

src/room/InCallView.tsx

@@ -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 { makeOneOnOneDesktopLayout } from "../grid/OneOnOneDesktopLayout";
-import { makeOneOnOneMobileLayout } from "../grid/OneOnOneMobileLayout";
+import { makeOneOnOneLandscapeLayout } from "../grid/OneOnOneLandscapeLayout";
+import { makeOneOnOnePortraitLayout } from "../grid/OneOnOnePortraitLayout";
 import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
 import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
@@ -83,8 +83,6 @@ import { ObservableScope } from "../state/ObservableScope.ts";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
 import { SettingsIconButton } from "../button/Button.tsx";
 import { createCallFooterViewModel } from "../components/CallFooterViewModel.tsx";
-import { createDeveloperSettingsTabViewModel } from "../settings/DeveloperSettingsTabViewModel.ts";
-import { type DeveloperSettingsSnapshot } from "../settings/DeveloperSettingsTab.tsx";
 import { type ViewModel } from "../state/ViewModel.ts";
 import { RingingStatus } from "../tile/RingingStatus.tsx";
 import { RingingAudioRenderer } from "./RingingAudioRenderer.tsx";
@@ -98,7 +96,7 @@ declare module "react" {
 
 export interface ActiveCallProps extends Omit<
   InCallViewProps,
-  "vm" | "livekitRoom" | "connState" | "footerVm" | "developerSettingsVm"
+  "vm" | "livekitRoom" | "connState" | "footerVm"
 > {
   e2eeSystem: EncryptionSystem;
   // TODO refactor those reasons into an enum
@@ -112,9 +110,6 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const [footerVm, setFooterVm] = useState<ViewModel<FooterSnapshot> | null>(
     null,
   );
-  const [developerSettingsVm, setDeveloperSettingsVm] =
-    useState<ViewModel<DeveloperSettingsSnapshot> | null>(null);
-
   const urlParams = useUrlParams();
   const mediaDevices = useMediaDevices();
   const trackProcessorState$ = useTrackProcessorObservable$();
@@ -174,7 +169,6 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       `${props.client.getUserId()}:${props.client.getDeviceId()}`,
     );
     setFooterVm(footerVm);
-    setDeveloperSettingsVm(createDeveloperSettingsTabViewModel(scope, vm));
 
     return (): void => {
       scope.end();
@@ -194,16 +188,10 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
 
   if (vm === null) return null;
   if (footerVm === null) return null;
-  if (developerSettingsVm === null) return null;
 
   return (
     <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
-      <InCallView
-        {...props}
-        vm={vm}
-        footerVm={footerVm}
-        developerSettingsVm={developerSettingsVm}
-      />
+      <InCallView {...props} vm={vm} footerVm={footerVm} />
     </ReactionsSenderProvider>
   );
 };
@@ -212,7 +200,6 @@ export interface InCallViewProps {
   client: MatrixClient;
   vm: CallViewModel;
   footerVm: ViewModel<FooterSnapshot>;
-  developerSettingsVm: ViewModel<DeveloperSettingsSnapshot>;
   matrixInfo: MatrixInfo;
   rtcSession: MatrixRTCSession;
   matrixRoom: MatrixRoom;
@@ -224,7 +211,6 @@ export const InCallView: FC<InCallViewProps> = ({
   client,
   vm,
   footerVm,
-  developerSettingsVm,
   matrixInfo,
   matrixRoom,
   muteStates,
@@ -270,13 +256,10 @@ export const InCallView: FC<InCallViewProps> = ({
   const audioParticipants = useBehavior(vm.livekitRoomItems$);
   const participantCount = useBehavior(vm.participantCount$);
   const reconnecting = useBehavior(vm.reconnecting$);
-  const screenShareError = useBehavior(vm.screenShareError$);
   const layout = useBehavior(vm.layout$);
   const edgeToEdge = useBehavior(vm.edgeToEdge$);
-  const overflowing = useBehavior(vm.overflowing$);
   const showNameTags = useBehavior(vm.showNameTags$);
   const showHeader = useBehavior(vm.showHeader$);
-  const showModals = useBehavior(vm.showModals$);
   const settingsOpen = useBehavior(vm.settingsOpen$);
   const setSettingsOpen = useBehavior(vm.setSettingsOpen$);
   const earpieceMode = useBehavior(vm.earpieceMode$);
@@ -400,21 +383,6 @@ export const InCallView: FC<InCallViewProps> = ({
       );
   }
 
-  const onDismissScreenShareToast = useCallback(
-    () => vm.dismissScreenShareError(),
-    [vm],
-  );
-  const screenShareToast = (
-    <Toast
-      onDismiss={onDismissScreenShareToast}
-      open={screenShareError !== null}
-      autoDismiss={5000}
-      modal={false}
-    >
-      {t("error.screen_share_failed")}
-    </Toast>
-  );
-
   // The reconnecting toast cannot be dismissed
   const onDismissReconnectingToast = useCallback(() => {}, []);
   // We need to use a non-modal toast to avoid trapping focus within the toast.
@@ -499,7 +467,6 @@ export const InCallView: FC<InCallViewProps> = ({
             showRingingStatus={showRingingStatus}
             focusable={!contentObscured}
             className={classNames(className, styles.tile)}
-            itemClassName={styles.spotlightItem}
             style={style}
           />
         );
@@ -514,8 +481,8 @@ export const InCallView: FC<InCallViewProps> = ({
       "spotlight-landscape": makeSpotlightLandscapeLayout(inputs),
       "spotlight-portrait": makeSpotlightPortraitLayout(inputs),
       "spotlight-expanded": makeSpotlightExpandedLayout(inputs),
-      "one-on-one-desktop": makeOneOnOneDesktopLayout(inputs),
-      "one-on-one-mobile": makeOneOnOneMobileLayout(inputs),
+      "one-on-one-landscape": makeOneOnOneLandscapeLayout(inputs),
+      "one-on-one-portrait": makeOneOnOnePortraitLayout(inputs),
     };
   }, [gridBoundsObservable$]);
 
@@ -524,9 +491,7 @@ export const InCallView: FC<InCallViewProps> = ({
     if (layout.type === "pip") {
       return (
         <SpotlightTile
-          className={styles.tile}
-          itemClassName={styles.spotlightItem}
-          data-maximised
+          className={classNames(styles.tile, styles.maximised)}
           vm={layout.spotlight}
           expanded
           onToggleExpanded={null}
@@ -618,7 +583,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 className={styles.footer} ref={footerRef} vm={footerVm} />
+    <CallFooter ref={footerRef} vm={footerVm} />
   );
   const allConnections = useBehavior(vm.allConnections$);
 
@@ -627,9 +592,7 @@ 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={classNames(styles.inRoom, {
-        [styles.overflowing]: overflowing,
-      })}
+      className={styles.inRoom}
       ref={containerRef}
       onPointerUp={onViewPointerUp}
       onPointerMove={onPointerMove}
@@ -650,11 +613,10 @@ export const InCallView: FC<InCallViewProps> = ({
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
       <RingingAudioRenderer vm={ringingVm} muted={muteAllAudio} />
       {reconnectingToast}
-      {screenShareToast}
       {earpieceOverlay}
       <ReactionsOverlay vm={vm} />
       {footer}
-      {showModals && (
+      {layout.type !== "pip" && (
         <>
           <RageshakeRequestModal {...rageshakeRequestModalProps} />
           <SettingsModal
@@ -664,7 +626,6 @@ export const InCallView: FC<InCallViewProps> = ({
             onDismiss={(): void => setSettingsOpen(false)}
             tab={settingsTab}
             onTabChange={setSettingsTab}
-            developerSettingsVm={developerSettingsVm}
             livekitRooms={allConnections
               .getConnections()
               .map((connectionItem) => ({

src/room/LayoutSwitch.tsx

@@ -1,44 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { 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/LobbyView.test.tsx

@@ -145,7 +145,8 @@ describe("LobbyView", () => {
       .querySelector("path")!
       .getAttribute("d");
     const primaryButtonSvgPath = container
-      .querySelector("path")
+      .querySelector(".primaryButton")
+      ?.querySelector("path")
       ?.getAttribute("d");
     expect(primaryButtonSvgPath).toBe(expectedSvgPath);
     expect(container).toMatchSnapshot();
@@ -168,7 +169,8 @@ describe("LobbyView", () => {
       .querySelector("path")!
       .getAttribute("d");
     const primaryButtonSvgPath = container
-      .querySelector("path")
+      .querySelector(".primaryButton")
+      ?.querySelector("path")
       ?.getAttribute("d");
     expect(primaryButtonSvgPath).toBe(expectedSvgPath);
     expect(container).toMatchSnapshot();

src/room/VideoPreview.module.css

@@ -10,8 +10,6 @@ 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;
@@ -22,9 +20,6 @@ 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 {
@@ -71,6 +66,12 @@ 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,7 +14,6 @@ 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;
@@ -75,9 +74,6 @@ 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__/GroupCallErrorBoundary.test.tsx.snap

@@ -3,17 +3,17 @@
 exports[`ConnectionLostError: Action handling should reset error state 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -95,20 +95,20 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -161,17 +161,17 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
 exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' error correctly 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -253,20 +253,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -318,17 +318,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
 exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed' error correctly 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -410,20 +410,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -475,17 +475,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
 exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreachable' error correctly 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -567,20 +567,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -632,17 +632,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
 exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFound' error correctly 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -724,20 +724,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -789,17 +789,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
 exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' error correctly 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -881,20 +881,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -946,17 +946,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
 exports[`LiveKit ConnectionError variants > should link to troubleshoot guide when timeout error 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -1038,20 +1038,20 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -1103,17 +1103,17 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
 exports[`should have a close button in widget mode 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -1195,20 +1195,20 @@ exports[`should have a close button in widget mode 1`] = `
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -1257,17 +1257,17 @@ exports[`should have a close button in widget mode 1`] = `
 exports[`should render the error page with link back to home 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -1349,20 +1349,20 @@ exports[`should render the error page with link back to home 1`] = `
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -1411,17 +1411,17 @@ exports[`should render the error page with link back to home 1`] = `
 exports[`should report correct error for 'Call is not supported' 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -1503,20 +1503,20 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -1565,17 +1565,17 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
 exports[`should report correct error for 'Connection lost' 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -1657,20 +1657,20 @@ exports[`should report correct error for 'Connection lost' 1`] = `
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -1723,17 +1723,17 @@ exports[`should report correct error for 'Connection lost' 1`] = `
 exports[`should report correct error for 'Homeserver does not support Matrix 2.…' 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -1815,20 +1815,20 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -1877,17 +1877,17 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
 exports[`should report correct error for 'Incompatible browser' 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -1969,20 +1969,20 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >
@@ -2026,17 +2026,17 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
 exports[`should report correct error for 'Insufficient capacity' 1`] = `
 <DocumentFragment>
   <div
-    class="_page_4be5c0"
+    class="page"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <a
           aria-label="Element Call Home"
-          class="_headerLogo_e4b327"
+          class="headerLogo"
           data-discover="true"
           href="/"
         >
@@ -2118,20 +2118,20 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
         </a>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_container_4be5c0"
+      class="container"
     >
       <div
-        class="_content_4be5c0"
+        class="content"
       >
         <div
-          class="_error_a69dc5"
+          class="error"
         >
           <div
-            class="_big-icon_1ssbv_8 _icon_a69dc5"
+            class="_big-icon_1ssbv_8 icon"
             data-kind="primary"
             data-size="lg"
           >

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

@@ -3,28 +3,28 @@
 exports[`InCallView > rendering > renders 1`] = `
 <div>
   <div
-    class="_inRoom_4e7ff8"
+    class="inRoom"
   >
     <header
-      class="_header_e4b327 _header_4e7ff8"
+      class="header header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <div
-          class="_roomHeaderInfo_e4b327"
+          class="roomHeaderInfo"
           data-size="lg"
         >
           <span
             aria-label=""
-            class="_avatar_va14e_8 _roomAvatar_e4b327 _avatar-imageless_va14e_55"
+            class="_avatar_va14e_8 roomAvatar _avatar-imageless_va14e_55"
             data-color="1"
             data-type="round"
             role="img"
             style="--cpd-avatar-size: 56px;"
           />
           <div
-            class="_nameLine_e4b327"
+            class="nameLine"
           >
             <h1
               class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
@@ -35,7 +35,7 @@ exports[`InCallView > rendering > renders 1`] = `
             >
               <svg
                 aria-labelledby="_r_0_"
-                class="_lock_edc97d"
+                class="lock"
                 data-encrypted="false"
                 fill="currentColor"
                 height="16"
@@ -50,7 +50,7 @@ exports[`InCallView > rendering > renders 1`] = `
             </span>
           </div>
           <div
-            class="_participantsLine_e4b327"
+            class="participantsLine"
           >
             <svg
               aria-label="Participants"
@@ -80,21 +80,21 @@ exports[`InCallView > rendering > renders 1`] = `
         </div>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_scrollingGrid_4e7ff8 _grid_b0d1cd"
+      class="scrollingGrid grid"
     >
       <div
-        class="_layer_185815"
+        class="layer"
       >
         <div
-          class="_container_185815 _slot_b0d1cd"
+          class="container slot"
           data-id="1"
         >
           <div
-            class="_slot_185815 _local_185815 _slot_b0d1cd"
+            class="slot local slot"
             data-block-alignment="start"
             data-id="0"
             data-inline-alignment="end"
@@ -103,22 +103,22 @@ exports[`InCallView > rendering > renders 1`] = `
       </div>
     </div>
     <div
-      class="_fixedGrid_4e7ff8 _grid_b0d1cd"
+      class="fixedGrid grid"
       style="inset-block-start: NaNpx;"
     >
       <div />
     </div>
     <div
-      class="_bg_2f5303 _animate_2f5303"
+      class="bg animate"
       data-state="closed"
     />
     <div
       aria-hidden="true"
-      class="_overlay_eb6724"
+      class="overlay"
       data-show="false"
     >
       <div
-        class="_big-icon_1ssbv_8 _icon_eb6724"
+        class="_big-icon_1ssbv_8 icon"
         data-kind="primary"
         data-size="lg"
       >
@@ -157,22 +157,22 @@ exports[`InCallView > rendering > renders 1`] = `
         Back to Speaker Mode
       </button>
       <div
-        class="_spacer_eb6724"
+        class="spacer"
       />
     </div>
     <div
-      class="_container_8084b5"
+      class="container"
     />
     <div
-      class="_footer_4e7ff8 _footer_20b7b4"
+      class="footer"
       data-testid="footer-container"
     >
       <div
-        class="_settingsLogoContainer_20b7b4"
+        class="settingsLogoContainer"
       >
         <button
-          aria-labelledby="_r_b_"
-          class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
+          aria-labelledby="_r_8_"
+          class="_icon-button_1215g_8 settingsOnlyShowWide"
           data-kind="secondary"
           data-testid="settings-bottom-left"
           role="button"
@@ -198,7 +198,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </div>
         </button>
         <div
-          class="_logo_20b7b4"
+          class="logo"
         >
           <svg
             aria-hidden="true"
@@ -303,11 +303,11 @@ exports[`InCallView > rendering > renders 1`] = `
         </div>
       </div>
       <div
-        class="_buttons_20b7b4"
+        class="buttons"
       >
         <button
-          aria-labelledby="_r_g_"
-          class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
+          aria-labelledby="_r_d_"
+          class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
           data-testid="settings-bottom-center"
@@ -331,7 +331,7 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-busy="false"
           aria-checked="false"
           aria-disabled="true"
-          aria-labelledby="_r_l_"
+          aria-labelledby="_r_i_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="primary"
           data-size="lg"
@@ -356,7 +356,7 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-busy="false"
           aria-checked="false"
           aria-disabled="true"
-          aria-labelledby="_r_q_"
+          aria-labelledby="_r_n_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="primary"
           data-size="lg"
@@ -381,8 +381,8 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="true"
-          aria-labelledby="_r_v_"
-          class="_button_1nw83_8 _raiseHand_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
+          aria-labelledby="_r_s_"
+          class="_button_1nw83_8 raiseHand _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
           role="button"
@@ -404,8 +404,8 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby="_r_17_"
-          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          aria-labelledby="_r_14_"
+          class="_button_1nw83_8 endCall _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_1t5ha_9 _layout_20b7b4"
+        class="_toggle_13rnk_9 layout"
         data-size="lg"
       >
         <input
-          aria-labelledby="_r_1d_"
-          name="_r_1c_"
+          aria-labelledby="_r_19_"
+          name="layoutMode"
           type="radio"
           value="spotlight"
         />
@@ -446,15 +446,13 @@ exports[`InCallView > rendering > renders 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            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"
+            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"
           />
         </svg>
         <input
-          aria-labelledby="_r_1i_"
+          aria-labelledby="_r_1e_"
           checked=""
-          name="_r_1c_"
+          name="layoutMode"
           type="radio"
           value="grid"
         />

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

@@ -3,12 +3,12 @@
 exports[`LobbyView > renders with AppBar android 1`] = `
 <div>
   <div
-    class="_bar_221541"
+    class="bar"
   >
     <header>
       <button
         aria-labelledby="_r_36_"
-        class="_icon-button_1215g_8 _primaryButton_221541"
+        class="_icon-button_1215g_8 primaryButton"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -33,27 +33,26 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         </div>
       </button>
       <div
-        class="_secondaryButton_221541"
+        class="secondaryButton"
       />
     </header>
   </div>
   <div
-    class="_inRoom_4e7ff8"
+    class="inRoom"
   >
     <div
-      class="_content_f9ee84"
+      class="content"
     >
       <div
-        class="_preview_dd2178"
+        class="preview"
       >
         <video
           disablepictureinpicture=""
           playsinline=""
-          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div
-          class="_avatarContainer_dd2178"
+          class="avatarContainer"
         >
           <div>
             <span
@@ -69,11 +68,11 @@ exports[`LobbyView > renders with AppBar android 1`] = `
           </div>
         </div>
         <div
-          class="_buttonBar_dd2178"
+          class="buttonBar"
         >
           <button
             aria-disabled="true"
-            class="_button_1nw83_8 _join_f9ee84 _wait_f9ee84"
+            class="_button_1nw83_8 join wait"
             data-kind="primary"
             data-size="md"
             data-testid="lobby_joinCall"
@@ -85,7 +84,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         </div>
       </div>
       <a
-        class="_link_13esb_8"
+        class="_link_k9ljz_8"
         data-kind="primary"
         data-size="md"
         href="/"
@@ -95,15 +94,15 @@ exports[`LobbyView > renders with AppBar android 1`] = `
       </a>
     </div>
     <div
-      class="_footer_20b7b4"
+      class="footer"
       data-testid="footer-container"
     >
       <div
-        class="_settingsLogoContainer_20b7b4"
+        class="settingsLogoContainer"
       >
         <button
           aria-labelledby="_r_3c_"
-          class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
+          class="_icon-button_1215g_8 settingsOnlyShowWide"
           data-kind="secondary"
           data-testid="settings-bottom-left"
           role="button"
@@ -130,11 +129,11 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         </button>
       </div>
       <div
-        class="_buttons_20b7b4"
+        class="buttons"
       >
         <button
           aria-labelledby="_r_3h_"
-          class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
+          class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
           data-testid="settings-bottom-center"
@@ -206,7 +205,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         </button>
         <button
           aria-labelledby="_r_40_"
-          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 endCall _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"
@@ -235,12 +234,12 @@ exports[`LobbyView > renders with AppBar android 1`] = `
 exports[`LobbyView > renders with AppBar ios 1`] = `
 <div>
   <div
-    class="_bar_221541"
+    class="bar"
   >
     <header>
       <button
         aria-labelledby="_r_4a_"
-        class="_icon-button_1215g_8 _primaryButton_221541"
+        class="_icon-button_1215g_8 primaryButton"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -265,27 +264,26 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         </div>
       </button>
       <div
-        class="_secondaryButton_221541"
+        class="secondaryButton"
       />
     </header>
   </div>
   <div
-    class="_inRoom_4e7ff8"
+    class="inRoom"
   >
     <div
-      class="_content_f9ee84"
+      class="content"
     >
       <div
-        class="_preview_dd2178"
+        class="preview"
       >
         <video
           disablepictureinpicture=""
           playsinline=""
-          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div
-          class="_avatarContainer_dd2178"
+          class="avatarContainer"
         >
           <div>
             <span
@@ -301,11 +299,11 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
           </div>
         </div>
         <div
-          class="_buttonBar_dd2178"
+          class="buttonBar"
         >
           <button
             aria-disabled="true"
-            class="_button_1nw83_8 _join_f9ee84 _wait_f9ee84"
+            class="_button_1nw83_8 join wait"
             data-kind="primary"
             data-size="md"
             data-testid="lobby_joinCall"
@@ -317,7 +315,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         </div>
       </div>
       <a
-        class="_link_13esb_8"
+        class="_link_k9ljz_8"
         data-kind="primary"
         data-size="md"
         href="/"
@@ -327,15 +325,15 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
       </a>
     </div>
     <div
-      class="_footer_20b7b4"
+      class="footer"
       data-testid="footer-container"
     >
       <div
-        class="_settingsLogoContainer_20b7b4"
+        class="settingsLogoContainer"
       >
         <button
           aria-labelledby="_r_4g_"
-          class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
+          class="_icon-button_1215g_8 settingsOnlyShowWide"
           data-kind="secondary"
           data-testid="settings-bottom-left"
           role="button"
@@ -362,11 +360,11 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         </button>
       </div>
       <div
-        class="_buttons_20b7b4"
+        class="buttons"
       >
         <button
           aria-labelledby="_r_4l_"
-          class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
+          class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
           data-testid="settings-bottom-center"
@@ -438,7 +436,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         </button>
         <button
           aria-labelledby="_r_54_"
-          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 endCall _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"
@@ -467,21 +465,21 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
 exports[`LobbyView > renders with header and participant count 1`] = `
 <div>
   <div
-    class="_inRoom_4e7ff8"
+    class="inRoom"
   >
     <header
-      class="_header_e4b327"
+      class="header"
     >
       <div
-        class="_nav_e4b327 _leftNav_e4b327"
+        class="nav leftNav"
       >
         <div
-          class="_roomHeaderInfo_e4b327"
+          class="roomHeaderInfo"
           data-size="lg"
         >
           <span
             aria-label="!room:example.org"
-            class="_avatar_va14e_8 _roomAvatar_e4b327 _avatar-imageless_va14e_55"
+            class="_avatar_va14e_8 roomAvatar _avatar-imageless_va14e_55"
             data-color="3"
             data-type="round"
             role="img"
@@ -490,7 +488,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
             T
           </span>
           <div
-            class="_nameLine_e4b327"
+            class="nameLine"
           >
             <h1
               class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
@@ -503,7 +501,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
             >
               <svg
                 aria-labelledby="_r_0_"
-                class="_lock_edc97d"
+                class="lock"
                 data-encrypted="false"
                 fill="currentColor"
                 height="16"
@@ -518,7 +516,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
             </span>
           </div>
           <div
-            class="_participantsLine_e4b327"
+            class="participantsLine"
           >
             <svg
               aria-label="Participants"
@@ -548,23 +546,22 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         </div>
       </div>
       <div
-        class="_nav_e4b327 _rightNav_e4b327"
+        class="nav rightNav"
       />
     </header>
     <div
-      class="_content_f9ee84"
+      class="content"
     >
       <div
-        class="_preview_dd2178"
+        class="preview"
       >
         <video
           disablepictureinpicture=""
           playsinline=""
-          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div
-          class="_avatarContainer_dd2178"
+          class="avatarContainer"
         >
           <div>
             <span
@@ -580,10 +577,10 @@ exports[`LobbyView > renders with header and participant count 1`] = `
           </div>
         </div>
         <div
-          class="_buttonBar_dd2178"
+          class="buttonBar"
         >
           <button
-            class="_button_1nw83_8 _join_f9ee84"
+            class="_button_1nw83_8 join"
             data-kind="primary"
             data-size="lg"
             data-testid="lobby_joinCall"
@@ -595,7 +592,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         </div>
       </div>
       <a
-        class="_link_13esb_8"
+        class="_link_k9ljz_8"
         data-kind="primary"
         data-size="md"
         href="/"
@@ -605,15 +602,15 @@ exports[`LobbyView > renders with header and participant count 1`] = `
       </a>
     </div>
     <div
-      class="_footer_20b7b4"
+      class="footer"
       data-testid="footer-container"
     >
       <div
-        class="_settingsLogoContainer_20b7b4"
+        class="settingsLogoContainer"
       >
         <button
           aria-labelledby="_r_6_"
-          class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
+          class="_icon-button_1215g_8 settingsOnlyShowWide"
           data-kind="secondary"
           data-testid="settings-bottom-left"
           role="button"
@@ -639,7 +636,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
           </div>
         </button>
         <div
-          class="_logo_20b7b4"
+          class="logo"
         >
           <svg
             aria-hidden="true"
@@ -744,11 +741,11 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         </div>
       </div>
       <div
-        class="_buttons_20b7b4"
+        class="buttons"
       >
         <button
           aria-labelledby="_r_b_"
-          class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
+          class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
           data-testid="settings-bottom-center"
@@ -820,7 +817,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         </button>
         <button
           aria-labelledby="_r_q_"
-          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 endCall _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?.join_rule === undefined ||
+            roomSummary === undefined ||
             roomSummary.join_rule === JoinRule.Public
           ) {
             room = await client.joinRoom(roomId, {

src/settings/DeveloperSettingsTab.test.tsx

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

src/settings/DeveloperSettingsTab.tsx

@@ -8,7 +8,6 @@ Please see LICENSE in the repository root for full details.
 import {
   type ChangeEvent,
   type FC,
-  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -30,14 +29,12 @@ 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,
@@ -46,61 +43,12 @@ import {
   alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
   matrixRTCMode as matrixRTCModeSetting,
   customLivekitUrl as customLivekitUrlSetting,
-  advancedScreenShare as advancedScreenShareSetting,
-  screenShareResolution as screenShareResolutionSetting,
-  screenShareFramerate as screenShareFramerateSetting,
-  screenShareBitrate as screenShareBitrateSetting,
-  screenShareCodec as screenShareCodecSetting,
-  advancedCamera as advancedCameraSetting,
-  cameraResolution as cameraResolutionSetting,
-  cameraFramerate as cameraFramerateSetting,
-  cameraBitrate as cameraBitrateSetting,
-  cameraCodec as cameraCodecSetting,
-  echoCancellationSetting,
-  noiseSuppressionSetting,
-  autoGainControlSetting,
-  type VideoCodec,
   enableExtendedLivekitLogs as enableExtendedLivekitLogsSetting,
 } from "./settings";
 import { MatrixRTCMode } from "../config/ConfigOptions";
 import styles from "./DeveloperSettingsTab.module.css";
-import settingsStyles from "./SettingsModal.module.css";
-import { Slider } from "../Slider";
 import { useUrlParams } from "../UrlParams";
 import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
-import { useBehavior } from "../useBehavior";
-import { type ViewModel } from "../state/ViewModel.ts";
-
-/**
- * The state of MatrixRTC's media key rotation.
- */
-export interface KeyRotationInfo {
-  /** Whether the call is large enough that MatrixRTC has stopped rotating the media key. */
-  suppressed: boolean;
-  participantCount: number;
-}
-
-/**
- * The Snapshot combines all fields the developer settings tab needs from the
- * surrounding call. Everything else in this tab is read from the settings store
- * or the environment directly.
- */
-export interface DeveloperSettingsSnapshot {
-  /** The media key rotation state, or `null` when we are not in a call. */
-  keyRotation: KeyRotationInfo | null;
-}
-
-/**
- * Shows whether the call is large enough that MatrixRTC has stopped rotating the media key.
- */
-const KeyRotationStatus: FC<{ info: KeyRotationInfo }> = ({ info }) => (
-  <p>
-    Media key rotation:{" "}
-    {info.suppressed
-      ? `suppressed, participant limit reached (${info.participantCount} participants)`
-      : `active (${info.participantCount} participants)`}
-  </p>
-);
 
 interface Props {
   client: MatrixClient;
@@ -112,7 +60,6 @@ interface Props {
     livekitAlias?: string;
   }[];
   env: ImportMetaEnv;
-  vm: ViewModel<DeveloperSettingsSnapshot>;
 }
 
 export const DeveloperSettingsTab: FC<Props> = ({
@@ -120,10 +67,8 @@ export const DeveloperSettingsTab: FC<Props> = ({
   livekitRooms,
   roomId,
   env,
-  vm,
 }) => {
   const { t } = useTranslation();
-  const keyRotation = useBehavior(vm.keyRotation$);
   const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
   const [debugTileLayout, setDebugTileLayout] = useSetting(
     debugTileLayoutSetting,
@@ -193,185 +138,6 @@ 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>
@@ -400,8 +166,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
           id: client.getDeviceId() || "unknown",
         })}
       </p>
-      {keyRotation !== null && <KeyRotationStatus info={keyRotation} />}
-      <Separator />
       <FieldRow>
         <InputField
           id="duplicateTiles"
@@ -551,12 +315,27 @@ export const DeveloperSettingsTab: FC<Props> = ({
           <ErrorMessage>{customLivekitUrlUpdateError}</ErrorMessage>
         )}
       </EditInPlace>
-      <Separator />
       <Heading as="h3" type="body" weight="semibold" size="lg">
         {t("developer_mode.matrixRTCMode.title")}
       </Heading>
       {matrixRTCModeForced && <p>Your deployment overrides the mode.</p>}
       <Form>
+        <InlineField
+          name={matrixRTCModeRadioGroup}
+          control={
+            <RadioControl
+              checked={effectiveMatrixRTCMode === MatrixRTCMode.Legacy}
+              value={MatrixRTCMode.Legacy}
+              disabled={matrixRTCModeForced}
+              onChange={onMatrixRTCModeChange}
+            />
+          }
+        >
+          <Label>{t("developer_mode.matrixRTCMode.Legacy.label")}</Label>
+          <HelpMessage>
+            {t("developer_mode.matrixRTCMode.Legacy.description")}
+          </HelpMessage>
+        </InlineField>
         <InlineField
           name={matrixRTCModeRadioGroup}
           control={
@@ -624,61 +403,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
           </ul>
         </div>
       ))}
-      <Separator />
-      <MediaQualitySettings
-        id="camera"
-        header={t("settings.camera_header", "Camera quality")}
-        toggleLabel={t(
-          "settings.advanced_camera_label",
-          "Advanced camera settings",
-        )}
-        description={t(
-          "settings.advanced_camera_description",
-          "Configure resolution, framerate, bitrate, and codec for camera video. Changes apply on next call join.",
-        )}
-        toggleSetting={advancedCameraSetting}
-        resolutionSetting={cameraResolutionSetting}
-        framerateSetting={cameraFramerateSetting}
-        bitrateSetting={cameraBitrateSetting}
-        codecSetting={cameraCodecSetting}
-        resolutionOptions={[
-          { value: "640x360", label: "360p" },
-          { value: "960x540", label: "540p" },
-          { value: "1280x720", label: "720p" },
-          { value: "1920x1080", label: "1080p" },
-          { value: "2560x1440", label: "1440p" },
-        ]}
-        bitrateRange={{ min: 200_000, max: 8_000_000, step: 100_000 }}
-      />
-      <Separator />
-      <MediaQualitySettings
-        id="screenShare"
-        header={t("settings.screen_share_header", "Screen sharing")}
-        toggleLabel={t(
-          "settings.advanced_screen_share_label",
-          "Advanced screen share settings",
-        )}
-        description={t(
-          "settings.advanced_screen_share_description",
-          "Configure resolution, framerate, bitrate, and codec for screen sharing",
-        )}
-        toggleSetting={advancedScreenShareSetting}
-        resolutionSetting={screenShareResolutionSetting}
-        framerateSetting={screenShareFramerateSetting}
-        bitrateSetting={screenShareBitrateSetting}
-        codecSetting={screenShareCodecSetting}
-        resolutionOptions={[
-          { value: "1024x576", label: "576p" },
-          { value: "1280x720", label: "720p" },
-          { value: "1920x1080", label: "1080p" },
-          { value: "2560x1440", label: "1440p" },
-          { value: "3840x2160", label: "4K" },
-        ]}
-        bitrateRange={{ min: 500_000, max: 15_000_000, step: 500_000 }}
-      />
-      <Separator />
-      <AudioProcessingSettings />
-      <Separator />
       <p>{t("developer_mode.environment_variables")}</p>
       <pre>{JSON.stringify(env, null, 2)}</pre>
       <p>{t("developer_mode.url_params")}</p>

src/settings/DeveloperSettingsTabViewModel.test.ts

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

src/settings/DeveloperSettingsTabViewModel.ts

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

src/settings/SettingsModal.module.css

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

src/settings/SettingsModal.tsx

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

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

@@ -18,16 +18,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     Device ID: DEVICE123
   </p>
   <div
-    class="_separator_13qwf_8"
-    data-kind="primary"
-    data-orientation="horizontal"
-    role="separator"
-  />
-  <div
-    class="_fieldRow_1bd8c0"
+    class="fieldRow"
   >
     <div
-      class="_field_1bd8c0 _inputField_1bd8c0"
+      class="field inputField"
     >
       <input
         aria-describedby="_r_1_"
@@ -44,10 +38,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </div>
   </div>
   <div
-    class="_fieldRow_1bd8c0"
+    class="fieldRow"
   >
     <div
-      class="_field_1bd8c0 _checkboxField_1bd8c0"
+      class="field checkboxField"
     >
       <input
         aria-describedby="_r_2_"
@@ -58,7 +52,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         for="debugTileLayout"
       >
         <div
-          class="_checkbox_1bd8c0"
+          class="checkbox"
         >
           <svg
             fill="none"
@@ -81,10 +75,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </div>
   </div>
   <div
-    class="_fieldRow_1bd8c0"
+    class="fieldRow"
   >
     <div
-      class="_field_1bd8c0 _checkboxField_1bd8c0"
+      class="field checkboxField"
     >
       <input
         aria-describedby="_r_3_"
@@ -95,7 +89,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         for="showConnectionStats"
       >
         <div
-          class="_checkbox_1bd8c0"
+          class="checkbox"
         >
           <svg
             fill="none"
@@ -118,10 +112,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </div>
   </div>
   <div
-    class="_fieldRow_1bd8c0"
+    class="fieldRow"
   >
     <div
-      class="_field_1bd8c0 _checkboxField_1bd8c0"
+      class="field checkboxField"
     >
       <input
         aria-describedby="_r_4_"
@@ -132,7 +126,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         for="muteAllAudio"
       >
         <div
-          class="_checkbox_1bd8c0"
+          class="checkbox"
         >
           <svg
             fill="none"
@@ -156,10 +150,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
   </div>
    
   <div
-    class="_fieldRow_1bd8c0"
+    class="fieldRow"
   >
     <div
-      class="_field_1bd8c0 _checkboxField_1bd8c0"
+      class="field checkboxField"
     >
       <input
         aria-describedby="_r_5_"
@@ -170,7 +164,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         for="alwaysShowIphoneEarpiece"
       >
         <div
-          class="_checkbox_1bd8c0"
+          class="checkbox"
         >
           <svg
             fill="none"
@@ -193,10 +187,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </div>
   </div>
   <div
-    class="_fieldRow_1bd8c0"
+    class="fieldRow"
   >
     <div
-      class="_field_1bd8c0 _checkboxField_1bd8c0"
+      class="field checkboxField"
     >
       <input
         aria-describedby="_r_6_"
@@ -207,7 +201,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         for="enableLivekitExtendedLogs"
       >
         <div
-          class="_checkbox_1bd8c0"
+          class="checkbox"
         >
           <svg
             fill="none"
@@ -257,16 +251,10 @@ 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 config is used.
+        Currently, no overwrite is set. Url from well-known or 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"
   >
@@ -285,13 +273,53 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
           class="_container_1ug7n_10"
         >
           <input
-            aria-describedby="radix-_r_a_ radix-_r_c_"
-            checked=""
+            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
             class="_input_1ug7n_18"
             id="radix-_r_9_"
             name="_r_0_"
             title=""
             type="radio"
+            value="legacy"
+          />
+          <div
+            class="_ui_1ug7n_19"
+          />
+        </div>
+      </div>
+      <div
+        class="_inline-field-body_1o4d9_39"
+      >
+        <label
+          class="_label_1o4d9_60"
+          for="radix-_r_9_"
+        >
+          Legacy: state events & oldest membership SFU
+        </label>
+        <span
+          class="_message_1o4d9_86 _help-message_1o4d9_92"
+          id="radix-_r_a_"
+        >
+          Compatible with old versions of EC that do not support multi SFU
+        </span>
+      </div>
+    </div>
+    <div
+      class="_inline-field_1o4d9_33"
+    >
+      <div
+        class="_inline-field-control_1o4d9_45"
+      >
+        <div
+          class="_container_1ug7n_10"
+        >
+          <input
+            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
+            checked=""
+            class="_input_1ug7n_18"
+            id="radix-_r_b_"
+            name="_r_0_"
+            title=""
+            type="radio"
             value="compatibility"
           />
           <div
@@ -304,13 +332,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       >
         <label
           class="_label_1o4d9_60"
-          for="radix-_r_9_"
+          for="radix-_r_b_"
         >
           Compatibility: state events & multi SFU
         </label>
         <span
           class="_message_1o4d9_86 _help-message_1o4d9_92"
-          id="radix-_r_a_"
+          id="radix-_r_c_"
         >
           Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)
         </span>
@@ -326,9 +354,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
           class="_container_1ug7n_10"
         >
           <input
-            aria-describedby="radix-_r_a_ radix-_r_c_"
+            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
             class="_input_1ug7n_18"
-            id="radix-_r_b_"
+            id="radix-_r_d_"
             name="_r_0_"
             title=""
             type="radio"
@@ -344,13 +372,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       >
         <label
           class="_label_1o4d9_60"
-          for="radix-_r_b_"
+          for="radix-_r_d_"
         >
           Matrix 2.0: sticky events & multi SFU
         </label>
         <span
           class="_message_1o4d9_86 _help-message_1o4d9_92"
-          id="radix-_r_c_"
+          id="radix-_r_e_"
         >
           Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later
         </span>
@@ -358,7 +386,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </div>
   </form>
   <div
-    class="_livekit_room_box_2ddec4"
+    class="livekit_room_box"
   >
     <h4>
       LiveKit SFU: wss://local-sfu.example.org
@@ -399,7 +427,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     <ul />
   </div>
   <div
-    class="_livekit_room_box_2ddec4"
+    class="livekit_room_box"
   >
     <h4>
       LiveKit SFU: wss://remote-sfu.example.org
@@ -435,242 +463,6 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </p>
     <ul />
   </div>
-  <div
-    class="_separator_13qwf_8"
-    data-kind="primary"
-    data-orientation="horizontal"
-    role="separator"
-  />
-  <h4>
-    Camera quality
-  </h4>
-  <div
-    class="_fieldRow_1bd8c0"
-  >
-    <div
-      class="_field_1bd8c0 _checkboxField_1bd8c0"
-    >
-      <input
-        aria-describedby="_r_i_"
-        id="cameraToggle"
-        type="checkbox"
-      />
-      <label
-        for="cameraToggle"
-      >
-        <div
-          class="_checkbox_1bd8c0"
-        >
-          <svg
-            fill="none"
-            height="24"
-            stroke="#000"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m20 6-11 11-5-5"
-            />
-          </svg>
-        </div>
-        Advanced camera settings
-      </label>
-      <p
-        class="_description_1bd8c0"
-        id="_r_i_"
-      >
-        Configure resolution, framerate, bitrate, and codec for camera video. Changes apply on next call join.
-      </p>
-    </div>
-  </div>
-  <div
-    class="_separator_13qwf_8"
-    data-kind="primary"
-    data-orientation="horizontal"
-    role="separator"
-  />
-  <h4>
-    Screen sharing
-  </h4>
-  <div
-    class="_fieldRow_1bd8c0"
-  >
-    <div
-      class="_field_1bd8c0 _checkboxField_1bd8c0"
-    >
-      <input
-        aria-describedby="_r_j_"
-        id="screenShareToggle"
-        type="checkbox"
-      />
-      <label
-        for="screenShareToggle"
-      >
-        <div
-          class="_checkbox_1bd8c0"
-        >
-          <svg
-            fill="none"
-            height="24"
-            stroke="#000"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m20 6-11 11-5-5"
-            />
-          </svg>
-        </div>
-        Advanced screen share settings
-      </label>
-      <p
-        class="_description_1bd8c0"
-        id="_r_j_"
-      >
-        Configure resolution, framerate, bitrate, and codec for screen sharing
-      </p>
-    </div>
-  </div>
-  <div
-    class="_separator_13qwf_8"
-    data-kind="primary"
-    data-orientation="horizontal"
-    role="separator"
-  />
-  <h4>
-    Audio processing
-  </h4>
-  <p>
-    Changes apply on next call join.
-  </p>
-  <div
-    class="_fieldRow_1bd8c0"
-  >
-    <div
-      class="_field_1bd8c0 _checkboxField_1bd8c0"
-    >
-      <input
-        aria-describedby="_r_k_"
-        checked=""
-        id="echoCancellation"
-        type="checkbox"
-      />
-      <label
-        for="echoCancellation"
-      >
-        <div
-          class="_checkbox_1bd8c0"
-        >
-          <svg
-            fill="none"
-            height="24"
-            stroke="#000"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m20 6-11 11-5-5"
-            />
-          </svg>
-        </div>
-        Echo cancellation
-      </label>
-    </div>
-  </div>
-  <div
-    class="_fieldRow_1bd8c0"
-  >
-    <div
-      class="_field_1bd8c0 _checkboxField_1bd8c0"
-    >
-      <input
-        aria-describedby="_r_l_"
-        checked=""
-        id="noiseSuppression"
-        type="checkbox"
-      />
-      <label
-        for="noiseSuppression"
-      >
-        <div
-          class="_checkbox_1bd8c0"
-        >
-          <svg
-            fill="none"
-            height="24"
-            stroke="#000"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m20 6-11 11-5-5"
-            />
-          </svg>
-        </div>
-        Noise suppression
-      </label>
-    </div>
-  </div>
-  <div
-    class="_fieldRow_1bd8c0"
-  >
-    <div
-      class="_field_1bd8c0 _checkboxField_1bd8c0"
-    >
-      <input
-        aria-describedby="_r_m_"
-        checked=""
-        id="autoGainControl"
-        type="checkbox"
-      />
-      <label
-        for="autoGainControl"
-      >
-        <div
-          class="_checkbox_1bd8c0"
-        >
-          <svg
-            fill="none"
-            height="24"
-            stroke="#000"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m20 6-11 11-5-5"
-            />
-          </svg>
-        </div>
-        Automatic gain control
-      </label>
-    </div>
-  </div>
-  <div
-    class="_separator_13qwf_8"
-    data-kind="primary"
-    data-orientation="horizontal"
-    role="separator"
-  />
   <p>
     Environment variables
   </p>