Update src/state/media/observeRtpStreamStats.ts

Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>

.github/workflows/build.yaml

@@ -85,3 +85,31 @@ jobs:
       SENTRY_URL: ${{ secrets.SENTRY_URL }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+  build_storybook:
+    name: Build Storybook
+    if: contains(github.event.pull_request.labels.*.name, 'storybook build')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false
+      - name: Enable Corepack
+        run: corepack enable
+      - name: pnpm cache
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          cache: "pnpm"
+          node-version-file: ".node-version"
+      - name: Install dependencies
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+      - name: Build Storybook
+        run: pnpm run build-storybook
+      - name: Upload Artifact
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        with:
+          name: build-output-storybook
+          path: storybook-static
+          # We'll only use this in a triggered job, then we're done with it
+          retention-days: 1

.github/workflows/deploy-to-netlify.yaml

@@ -17,7 +17,7 @@ on:
       package:
         required: true
         type: string
-        description: Which package to deploy - 'full', 'embedded', or 'sdk'
+        description: Which package to deploy - 'full', 'embedded', 'sdk', or 'storybook'
       artifact_run_id:
         required: false
         type: string
@@ -43,7 +43,7 @@ jobs:
         with:
           step: start
           token: ${{ secrets.GITHUB_TOKEN }}
-          env: Netlify
+          env: ${{ inputs.package}}
           ref: ${{ inputs.deployment_ref }}
           desc: |
             Do you trust the author of this PR? Maybe this build will steal your keys or give you malware.
@@ -59,9 +59,13 @@ jobs:
 
       - name: Add redirects file
         # We fetch from github directly as we don't bother checking out the repo
+        # Not needed for storybook deployments
+        if: inputs.package != 'storybook'
         run: curl -s https://raw.githubusercontent.com/element-hq/element-call/main/config/netlify_redirects > webapp/_redirects
 
       - name: Add config file
+        # Not needed for storybook deployments
+        if: inputs.package != 'storybook'
         run: |
           if [ "${INPUTS_PACKAGE}" = "full" ]; then
             curl -s "https://raw.githubusercontent.com/${INPUTS_PR_HEAD_FULL_NAME}/${INPUTS_PR_HEAD_REF}/config/config_netlify_preview.json" > webapp/config.json
@@ -78,7 +82,7 @@ jobs:
         with:
           publish-dir: webapp
           deploy-message: "Deploy from GitHub Actions"
-          alias: ${{ inputs.package == 'sdk' && format('pr{0}-sdk', inputs.pr_number) || format('pr{0}', inputs.pr_number) }}
+          alias: ${{ inputs.package == 'sdk' && format('pr{0}-sdk', inputs.pr_number) || inputs.package == 'storybook' && format('pr{0}-storybook', inputs.pr_number) || format('pr{0}', inputs.pr_number) }}
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

.github/workflows/pr-deploy.yaml

@@ -14,7 +14,7 @@ jobs:
     # 2. Event must be a pull_request
     # 3. Head repository must be the SAME as the base repository (No Forks!)
     if: >
-      github.event.workflow_run.conclusion == 'success' && 
+      github.event.workflow_run.conclusion == 'success' &&
       github.event.workflow_run.event == 'pull_request' &&
       github.event.workflow_run.head_repository.full_name == github.repository
     runs-on: ubuntu-latest
@@ -63,6 +63,24 @@ jobs:
       NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
       NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
 
+  netlify-storybook:
+    needs: prdetails
+    if: ${{ needs.prdetails.outputs.pr_data_json && contains(fromJSON(needs.prdetails.outputs.pr_data_json).labels.*.name, 'storybook build') }}
+    permissions:
+      deployments: write
+    uses: ./.github/workflows/deploy-to-netlify.yaml
+    with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
+      pr_number: ${{ needs.prdetails.outputs.pr_number }}
+      pr_head_full_name: ${{ github.event.workflow_run.head_repository.full_name }}
+      pr_head_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.ref }}
+      deployment_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.sha || github.ref || github.head_ref }}
+      package: storybook
+    secrets:
+      ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+
   docker:
     if: ${{ needs.prdetails.outputs.pr_data_json && contains(fromJSON(needs.prdetails.outputs.pr_data_json).labels.*.name, 'docker build') }}
     needs: prdetails

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

@@ -97,7 +97,7 @@ jobs:
         run: find ${FILENAME_PREFIX} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${FILENAME_PREFIX}.sha256
       - name: Upload
         if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
-        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2
+        uses: softprops/action-gh-release@3bb12739c298aeb8a4eeaf626c5b8d85266b0e65 # v2
         with:
           files: |
             ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -297,7 +297,7 @@ jobs:
           NEEDS_PUBLISH_IOS_OUTPUTS_ARTIFACT_VERSION: ${{ needs.publish_ios.outputs.ARTIFACT_VERSION }}
       - name: Add release notes
         if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
-        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2
+        uses: softprops/action-gh-release@3bb12739c298aeb8a4eeaf626c5b8d85266b0e65 # v2
         with:
           append_body: true
           body: |

.github/workflows/publish.yaml

@@ -42,7 +42,7 @@ jobs:
       - name: Create Checksum
         run: find ${FILENAME_PREFIX} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${FILENAME_PREFIX}.sha256
       - name: Upload
-        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2
+        uses: softprops/action-gh-release@3bb12739c298aeb8a4eeaf626c5b8d85266b0e65 # v2
         with:
           files: |
             ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -71,7 +71,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Add release note
-        uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe # v2
+        uses: softprops/action-gh-release@3bb12739c298aeb8a4eeaf626c5b8d85266b0e65 # v2
         with:
           append_body: true
           body: |

.github/workflows/test.yaml

@@ -2,11 +2,15 @@ name: Test
 on:
   pull_request: {}
   push:
-    branches: [livekit, full-mesh]
+    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.60.0-noble
     steps:
       - name: Checkout code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4

.github/workflows/zizmor.yml

@@ -20,4 +20,4 @@ jobs:
           persist-credentials: false
 
       - name: Run zizmor 🌈
-        uses: zizmorcore/zizmor-action@71321a20a9ded102f6e9ce5718a2fcec2c4f70d8 # v0.5.2
+        uses: zizmorcore/zizmor-action@b1d7e1fb5de872772f31590499237e7cce841e8e # v0.5.3

.storybook/main.ts

@@ -9,7 +9,28 @@ import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: ["@storybook/addon-docs"],
+  addons: ["@storybook/addon-docs", "@storybook/addon-vitest"],
   framework: "@storybook/react-vite",
+  // THIS IS IMPORTANT
+  // vitest runs without Vite's normal dependency optimization, so we need to manually include the polyfills for the stories to work.
+  // otherwise we will get: new dependencies optimized: ...
+  // and
+  // ```
+  // [vitest] Vite unexpectedly reloaded a test. This may cause tests to fail, lead to flaky behaviour or duplicated test runs.
+  // For a stable experience, please add mentioned dependencies to your config's `optimizeDeps.include` field manually.
+  // ```
+  // which breaks the storybook ci on the first and only run.
+  viteFinal(config) {
+    config.optimizeDeps = {
+      ...config.optimizeDeps,
+      include: [
+        ...(config.optimizeDeps?.include ?? []),
+        "vite-plugin-node-polyfills/shims/buffer",
+        "vite-plugin-node-polyfills/shims/global",
+        "vite-plugin-node-polyfills/shims/process",
+      ],
+    };
+    return config;
+  },
 };
 export default config;

README.md

@@ -66,7 +66,7 @@ requiring a separate Matrix client.
 
 ### 📲 In-App Calling (Widget Mode in Messenger Apps)
 
-When used as a widget 🧩, Element Call is solely responsible on the core calling
+When used as a widget 🧩, Element Call is solely responsible for the core calling
 functionality (MatrixRTC). Authentication, event handling, and room state
 updates (via the Client-Server API) are handled by the hosting client.
 Communication between Element Call and the client is managed through the widget
@@ -118,8 +118,8 @@ For operating and deploying Element Call on your own server, refer to the
 ## 🧭 MatrixRTC Backend Discovery and Selection
 
 For proper Element Call operation each site deployment needs a MatrixRTC backend
-setup as outlined in the [Self-Hosting](#self_hosting). A typical federated site
-deployment for three different sites A, B and C is depicted below.
+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">
@@ -127,7 +127,7 @@ deployment for three different sites A, B and C is depicted below.
 
 ### Backend Discovery
 
-MatrixRTC backend (according to
+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.:
@@ -151,11 +151,10 @@ via `livekit_service_url`.
 
 - Each call participant proposes their discovered MatrixRTC backend from
   `org.matrix.msc4143.rtc_foci` in their `org.matrix.msc3401.call.member` state event.
-- For **LiveKit** MatrixRTC backend
+- For the **LiveKit** MatrixRTC backend
   ([MSC4195](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)),
-  the **first participant who joined the call** defines via the `foci_preferred`
-  key in their `org.matrix.msc3401.call.member` which actual MatrixRTC backend
-  will be used for this call.
+  the **first participant who joined the call** defines which backend will be used for this call via
+  the `foci_preferred` key in their `org.matrix.msc3401.call.member` state event.
 - During the actual call join flow, the **[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)**
   provides the client with the **LiveKit SFU WebSocket URL** and an
   **access JWT token** in order to exchange media via WebRTC.
@@ -178,6 +177,13 @@ discuss and coordinate translation efforts.
 
 ## 🛠️ Development
 
+### Dependencies
+
+- Node.js (e.g. via [nvm](https://github.com/nvm-sh/nvm))
+- [Corepack](https://github.com/nodejs/corepack) (not bundled with Node.js anymore starting from 25.0.0)
+- Docker client and runtime + Docker Compose (for the backend)
+  - On macOS you can install everything with `brew install colima docker docker-compose`
+
 ### Frontend
 
 To get started clone and set up this project:
@@ -202,7 +208,7 @@ pnpm dev
 
 See also:
 
-- [Developing with linked packages](./linking.md)
+- [Developing with linked packages](./docs/linking.md)
 
 ### Backend
 
@@ -210,28 +216,29 @@ 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:
 
-- Minimum Synapse Setup (servernameis: `synapse.m.localhost`, `synapse.othersite.m.localhost`)
-- MatrixRTC Authorization Service (Note requires Federation API and hence a TLS reverse proxy)
+- Minimum Synapse Setup (servernames: `synapse.m.localhost`, `synapse.othersite.m.localhost`)
+- MatrixRTC Authorization Service (Note: requires Federation API and hence a TLS reverse proxy)
 - Minimum LiveKit SFU setup using dev defaults for config
 - Minimum `localhost` Certificate Authority (CA) for Transport Layer Security (TLS)
   - Hostnames: `m.localhost`, `*.m.localhost`, `*.othersite.m.localhost`
-  - Add [./backend/dev_tls_local-ca.crt](./backend/dev_tls_local-ca.crt) to your web browsers trusted
+  - Add [./backend/dev_tls_local-ca.crt](./backend/dev_tls_local-ca.crt) to your web browser's trusted
     certificates
 - Minimum TLS reverse proxy for
   - Synapse homeserver: `synapse.m.localhost` and `synapse.othersite.m.localhost`
   - MatrixRTC backend: `matrix-rtc.m.localhost` and `matrix-rtc.othersite.m.localhost`
-  - Local Element Call development `call.m.localhost` via `yarn dev --host `
+  - Local Element Call development `call.m.localhost` via `pnpm dev --host `
   - Element Web `app.m.localhost` and `app.othersite.m.localhost`
   - Note certificates will expire on Thr, 20 September 2035 14:27:35 CEST
 
 These use a test 'secret' published in this repository, so this must be used
 only for local development and **_never be exposed to the public Internet._**
 
-Run backend components:
+Make sure your Docker runtime is running (e.g. via `colima start`) and then start
+the backend components:
 
 ```sh
 pnpm backend
-# or  for podman-compose
+# or for podman-compose:
 # podman-compose -f dev-backend-docker-compose.yml up
 ```
 
@@ -242,7 +249,7 @@ pnpm backend
 > `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
-> browsers trusted certificates or by simply copying and pasting each URL into
+> 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.
 
 ### Playwright tests

backend/dev_homeserver-othersite.yaml

@@ -50,6 +50,9 @@ max_event_delay_duration: 24h
 enable_registration: true
 enable_registration_without_verification: true
 
+# Shared secret for admin user registration via API (for testing only!)
+registration_shared_secret: "test_shared_secret_for_local_dev_only"
+
 report_stats: false
 serve_server_wellknown: true
 

backend/dev_homeserver.yaml

@@ -50,6 +50,9 @@ max_event_delay_duration: 24h
 enable_registration: true
 enable_registration_without_verification: true
 
+# Shared secret for admin user registration via API (for testing only!)
+registration_shared_secret: "test_shared_secret_for_local_dev_only"
+
 report_stats: false
 serve_server_wellknown: true
 

backend/dev_nginx.conf

@@ -34,8 +34,13 @@ server {
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header Host $host;
     }
-
-    error_page   500 502 503 504  /50x.html;
+    location ~ ^(/_matrix|/_synapse/admin)  {
+        proxy_pass "http://homeserver:8008";
+        proxy_http_version 1.1;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header Host $host;
+    }
 
 }
 
@@ -76,7 +81,13 @@ server {
         proxy_set_header Host $host;
     }
 
-    error_page   500 502 503 504  /50x.html;
+    location ~ ^(/_matrix|/_synapse/admin)  {
+        proxy_pass "http://homeserver-1:18008";
+        proxy_http_version 1.1;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header Host $host;
+    }
 
 }
 
@@ -129,8 +140,6 @@ server {
       proxy_pass http://livekit-sfu:7880/;
     }
 
-    error_page   500 502 503 504  /50x.html;
-
 }
 
 # MatrixRTC reverse proxy
@@ -177,8 +186,6 @@ server {
       proxy_pass http://livekit-sfu-1:17880/;
     }
 
-    error_page   500 502 503 504  /50x.html;
-
 }
 
 # Convenience reverse proxy for the call.m.localhost domain to element call
@@ -228,7 +235,6 @@ server {
       proxy_pass http://host.docker.internal:8080;
 
     }
-    error_page   500 502 503 504  /50x.html;
 
 }
 
@@ -261,8 +267,6 @@ server {
 
     }
 
-    error_page   500 502 503 504  /50x.html;
-
 }
 
 # Convenience reverse proxy app.othersite.m.localhost for element web
@@ -294,6 +298,4 @@ server {
 
     }
 
-    error_page   500 502 503 504  /50x.html;
-
 }

backend/dev_tls_local-ca.crt

@@ -1,19 +1,19 @@
 -----BEGIN CERTIFICATE-----
-MIIDGjCCAgKgAwIBAgIUbSbx+1UGptOTGefqEn7Zh3yoChIwDQYJKoZIhvcNAQEL
-BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA5MjIxMjI3
-MzVaFw0zNTA5MjAxMjI3MzVaMB4xHDAaBgNVBAMME0VsZW1lbnQgQ2FsbCBEZXYg
-Q0EwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDHODfkrFsOkqCnXnTb
-QWz3LkUtNCoVvM7wFouirRnITJYG+lFwF+zNl89Eaq+uUN4bwd8ml1ZuR9p+1azC
-SlklD5adhCR/ErknfUWamQEf6amSs3p0NnqnhXbnDEEbQOwNaPU/aGc6aw0+I9O6
-NQ/H830GlVuKd24Bfv0mx6Imo0Hi9jxKYhqFh80nmltk2uyXefaJxuo1jXBhwLyC
-DW8RVj55QvkZyBUzid8yslxrlo0LHKCCjZflwJJv5f+jaubkH5c0qxVaoR4+Liyt
-X/4viIwt3Mhj04ppudTvt973mTbjRG5haCz9y7OkT1mMWhc0xrdMFX+gjPERYS2H
-Ru/RAgMBAAGjUDBOMB0GA1UdDgQWBBTXNfLAKVayGQda/JZLPszrpz6LVzAfBgNV
-HSMEGDAWgBTXNfLAKVayGQda/JZLPszrpz6LVzAMBgNVHRMEBTADAQH/MA0GCSqG
-SIb3DQEBCwUAA4IBAQCvGfyopHHgZB+horGH6i/Xg41V+r4d0o092F1Lfr4vh86e
-XMakRw92vsyk/iWOnLPNPcpVWzPcvINaCs/bahgnGSOAnrA4jjcXqymyGIy/6xc5
-1EeZAxehiL9E5q4LQ841HDX0gps4ZzUO1BRYQcjG9Rdts83JO2ekkfHkZdNj2eQr
-KOrr92Na1/w+EQdo/T9Rs2ES623xKEOxPqb8d/rx5Z4DdeuGx1u+3AfS76Lpo4ni
-EJ0g1ImqdSUtiOLzeCQh6pqqb+vuFbxAyeyYSAJ49847EtFBvZCmWmPL2JICg9uq
-7rKW/qDfEK9GUs0GWCs3+mJkNvOOxBwtMuQrL7ZF
+MIIDGjCCAgKgAwIBAgIUOlA2wgQUGZkKqNDvvifFWEsJfvYwDQYJKoZIhvcNAQEL
+BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNjA1MTgwOTM0
+MzFaFw0yODA3MjYwOTM0MzFaMB4xHDAaBgNVBAMME0VsZW1lbnQgQ2FsbCBEZXYg
+Q0EwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCcImv3pStfIUo7PbOO
+XRVUXuDlApBOrg2dCnvZQ1Jfaf4MftGHj/pURkF4eoBuyH4k4+NLzWD0VcU1cM74
+RnxowJt4AceCGe5RK/rqal5fapXc2vYMM8P6xaQR86gkxohpufsLgTnSweh74yqN
+B5WHUnCX00/X0bh1ho2BMUvGM9+dI4MdgKdaQDgWK4zg9hwp2Z6Yq7SkJ/D8+sGW
+WGpn3osDakL8HTBqop+YVJgF40db50yFurfcfQ0gjVtT4JW8ejO9j8PS/S2oQ/s5
+mA1B470XhLtT5qTjGm2bp3WpYkTi5widps8PDzBp5eNr0HrvJqcw7BGpbvBlLa+3
+7dhLAgMBAAGjUDBOMB0GA1UdDgQWBBRDfyRM4yKUqW6vu/2KUSXGb8vswDAfBgNV
+HSMEGDAWgBRDfyRM4yKUqW6vu/2KUSXGb8vswDAMBgNVHRMEBTADAQH/MA0GCSqG
+SIb3DQEBCwUAA4IBAQBoAhD4W4Yi/VJ2pTKrzhstn1UF1rgQnRddnn97v5BaEV/X
+uuBXbSO+/ewjQUupRjePZFp9FFe9co1OiduKcDExlvPU1eIqkWAwDWjMDpI+Lw5q
+KI5yHzplmMrT/7jn9Tepl9atrIcfDeFkP1dGtdRPyU6ARJEEWJSKeH9ftmImAsbM
+ykXAqSyRl8+bPx1ISG4cNihOxFd38VPDHIW53umaRBgRcN4GcvloKBGrVtRFNM//
+H+md8HmNQMP+e7FamETxs28DxjsdpygxjiFNY/T2eD67dH50ZxC3qCxEG6TJsoAg
+TYJafnqEcGDfiWQyNZRBypuaRsRmmTR27hCPVgi8
 -----END CERTIFICATE-----

backend/dev_tls_local-ca.key

@@ -1,28 +1,28 @@
 -----BEGIN PRIVATE KEY-----
-MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDHODfkrFsOkqCn
-XnTbQWz3LkUtNCoVvM7wFouirRnITJYG+lFwF+zNl89Eaq+uUN4bwd8ml1ZuR9p+
-1azCSlklD5adhCR/ErknfUWamQEf6amSs3p0NnqnhXbnDEEbQOwNaPU/aGc6aw0+
-I9O6NQ/H830GlVuKd24Bfv0mx6Imo0Hi9jxKYhqFh80nmltk2uyXefaJxuo1jXBh
-wLyCDW8RVj55QvkZyBUzid8yslxrlo0LHKCCjZflwJJv5f+jaubkH5c0qxVaoR4+
-LiytX/4viIwt3Mhj04ppudTvt973mTbjRG5haCz9y7OkT1mMWhc0xrdMFX+gjPER
-YS2HRu/RAgMBAAECggEABhB9CxYAE5p9D3s9nWsJcSDUdELRQSYlOoPFLmeMkF9c
-dcvq7LmduMh1Q8TnoivOBxRIwbj7pZHEYfYJM0TmH82wrQzXu5KLVltm4gTkVt9b
-DR8vjBgYdb8HVpM17Cl2xhW62XpJIiseFRUsHc/9sf2Egc3MIpPuIleGR0budbSW
-ybBkqEokTYTSiAztcu3G+VN0U9MsJgLMa8HApya7M48ojdrhzngVHZRUOXul9o7u
-zYJWSxPHIIYp5C4pYQBAx8OttThwKK1A9lwbQ2EJx0KnTbBC6O5Gna/jENpGd1h2
-rzK/9MONtsjln7IejP+4mDlNupS6SF3zzHPBHjqKAQKBgQDtXUIKPiVTFS45yWtK
-XD62s3j8jfIi+22b/C30fCPtppn0cm/0zY+vovgWVUBnQXkExafRthZCuxnE8ry7
-E29S40+4z9yivAC9dz7vHZUbyIFP6VG9WyhUYo+/WqOIePyh+iBISQ9TA1DneIYz
-+VZ8iU5GvdybUPl2C5WN8seaoQKBgQDW3EwVN2EEkChLRJbQYN2qpjn+0vYESMJ8
-K0sgMRtgh4+/T2Xb9b8O/dd87Fi/4oaUqWZ2E2sdsXq8P/IEo0cv6SRfHMy7GyxL
-RM7ztwUfMC4LVWi0ZIXMrm4gRDGN2XjGvhkX6fU2lSf6azWL1K3wI3amNV2b7P7d
-ItpvdkH3MQKBgQCXf29YJEQkXB9t6J3fDzND3xb4cwy5wSo7ZeBa7CTuWOhoeeX1
-JIJyAp0/e9goT0SThChRlFtu6gZPivJkoMnr6IOInLrg7we15fc4HPR/kCDgxTVT
-m2wJOAMxigNYZogwRfn2yRLL1BD+PBHD+H936xcX1bSJOUyPSGOC/xLhIQKBgQCb
-kCDd85ygyycBaAWxlZCor3WqFF/fNjbp5Aaepi9mMoBXSUs8eK7+UbelURHozEAY
-fpYaw3B4rTlp9vppdTZjb+/PlXB9v+zQCl+0gTyKGj4cIpiOk4F0co51eipOw7f4
-XUaZ0+CgxlmNq/W26iONjH+pU1YVQQA+Z6+zp/GW4QKBgQCrzYgeugxxqgJzyIRu
-0njJkIg+T5gHvsQrtpzq7LVob+HBiBiT7eDOeGDXTK8F//sk969QVrDMQsTMvGW9
-sG1oTqxciALTMqkJTf8+hT9Uogir0/iTbJUzTt5vPYpQOEQwQHIXMUTjZ9C6NDKT
-QlmeMCxeWyPYqoMfwKmdtDP/Iw==
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCcImv3pStfIUo7
+PbOOXRVUXuDlApBOrg2dCnvZQ1Jfaf4MftGHj/pURkF4eoBuyH4k4+NLzWD0VcU1
+cM74RnxowJt4AceCGe5RK/rqal5fapXc2vYMM8P6xaQR86gkxohpufsLgTnSweh7
+4yqNB5WHUnCX00/X0bh1ho2BMUvGM9+dI4MdgKdaQDgWK4zg9hwp2Z6Yq7SkJ/D8
++sGWWGpn3osDakL8HTBqop+YVJgF40db50yFurfcfQ0gjVtT4JW8ejO9j8PS/S2o
+Q/s5mA1B470XhLtT5qTjGm2bp3WpYkTi5widps8PDzBp5eNr0HrvJqcw7BGpbvBl
+La+37dhLAgMBAAECggEAEsS4gc5jBk50I+bo3KYn2DqHgj/qpOqbTFNkS9uh3UJa
+fZoJCeiuyM6hNCBVq/uB3mFeg1Au5XAiAqiK2KFwdw8gIS7lkqgXU76brO4YZhPj
+6+aOSS03079KV7YYckNDRqJKoTlpgAI7Nhk6ljVhLiEk07tdD65wJACGpg8M8sg9
+dyAz+ANs9gs65iF5LYjH61O/AFlLqCRQh5/z0mjGX6G9uN27nxeUY4+n4QMAcd9D
+Gcygxjt+4nlQayNAlKMwVfps9bWNtI3Ye9knY4WGkrv5cJbW3bgjV6qrvQsbukbq
+xEYzcIlUiWGO9Tv7MN6rk5uQOyoKT/KUnfRmdVd3YQKBgQDMhWm6Q+WuI7Pyn57R
+tmY4rs+fSqTmv6xAOcozKJxffGaEwSUuNA15NvR/7iedcNqmH3XT9j90ZNVHe090
+ocm1HDUvzC9G5GRrdO6JTTksRaIMZEhosWxqH3DIuBJPLGbF/4obGE7//PJtmDEp
+QVL9Aa0WrcwAWhRzUdvCE+taMwKBgQDDbyZIvtlEr1w2V0bjXO536rRksBapc2ZJ
+XRKtrXivuVtiZYNDB0I7CCJ52cka61n3kyZz2mhQmLq4cAZXyKYWE2i643O+kc3S
+lpZEFSfDZ+3YlhxMxG9oEcgUSwVdbPlAhd/UR8V6n8o2Fm+gug9h6E2zY4fgHLJF
+8hOWoD4hiQKBgA7YXD1F8mT6eHRS+78zIyZYIf/o9iE9pm4fA7tE5lzT9ckLD/zT
+kGrM/2BN1BhMecJ3JCFXjXGQZB7FJ5ZKrA52VrH6ezAFIfjeyvWyYkUBZOrLWKoo
+vrrRP2mCWuneSjNzAf5HfGx+WsZztpXNBQ4SUhMEWHtqDnP0bCQhOAMbAoGAPfLv
+qcOFT3ZevoLv34ZHuQ9W20vOAyynUb4E+7SvOtSAmTIgZ5DXd6recs2MJ9JOlGG6
+oKKsyk9/cJNiD1V1AC5q1kLfH5tMKOK/AxnJnvFEvZDnq5Xg0pZAW95j9vdiEwfc
+qYeOm44nJPn7rHEOCzT93E1CdtHh2LYha2+kAjECgYEAh4qODleBi+2fnf2eq494
+/tAot3szu2+gjyCN00vGjtzoAuDKTYgo0cbU1ILk0Pgpp1NcIvdHz/wQnG9RLX7e
+Dfy1Q+UkyBK67SJUPvcYqBEaZ6ddyijJDunqh+U3nIBGP+IntKIKMIKiLF6wzTKz
+NRpK1HNmllp+O692ZtxoNDU=
 -----END PRIVATE KEY-----

backend/dev_tls_m.localhost.crt

@@ -1,21 +1,21 @@
 -----BEGIN CERTIFICATE-----
-MIIDgDCCAmigAwIBAgIUT9NYpZbrAKokSPSTE3zzsAMowvEwDQYJKoZIhvcNAQEL
-BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA5MjIxMjI3
-MzVaFw0zNTA5MjAxMjI3MzVaMBgxFjAUBgNVBAMMDSoubS5sb2NhbGhvc3QwggEi
-MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDK1DNwTQWmyK71Ar56NvmSMQ8s
-qUY3jGqqPVORjfDUtDCrPPdCxT+ZlnsAgdonElWoWqczMrSyBRgfJlZMd4lEvt6V
-EEiZGUvA/lG1XIVgrx1kMSHKBoJj7lCBN6r3IWmYe6CxgfZurgp+7Z22i6cGMOnQ
-0XduX5Asup6zk5V7AE6i9eKrJsUjYmRBXtk099IitkER4TMqh6WxJmFF+eV9P/ax
-fxkon+bQWITwP1PLC1UOTK7lR0EcVan5aY6WMs/6RfO4Gw/dvuiVG1jCrVcaKNGT
-PYqmQqs+MOvyIqJ9kYELRZu+6bhPWSXk2ESpSIUIPH9twfnmWrncneIJR24/AgMB
-AAGjgbswgbgwHwYDVR0jBBgwFoAU1zXywClWshkHWvyWSz7M66c+i1cwCQYDVR0T
-BAIwADALBgNVHQ8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwSQYDVR0RBEIw
-QIIJbG9jYWxob3N0ggttLmxvY2FsaG9zdIINKi5tLmxvY2FsaG9zdIIXKi5vdGhl
-cnNpdGUubS5sb2NhbGhvc3QwHQYDVR0OBBYEFIkGX+cEJ1ISKIwuT1zzp7uHJ90e
-MA0GCSqGSIb3DQEBCwUAA4IBAQBnnnfB7KmyYo16ZYUCmoqGhbM4p8npeYTh5ySb
-K01YwGCnMU1qGfJnKHaRwQ2+KtVGZnpBdjmsHcOUetA3V2BirPaYowMCMtaI36LD
-LnxvboSZLX0mgEYuN7HmxW4a7fSelDecTYa7xti1sNhE/w8xW7Lky046/DousyUy
-d9x3wJ183GGj1W2p6bR1E4sqTr/VbmoULQxnqA3GUNOxW3lRL5e8lQ6jJVRmMF4k
-92BtMPrI/m7jwHj0f/WBLI8mdJ/O/W/NxQOG475FZePDfrg+MkeXPChPggf42/ou
-AMm56FNB7e1l0b1Fots730RfpCPuXpiAxL4pisS0X1dMVeeM
+MIIDijCCAnKgAwIBAgIUWkx2ad/F7QIj1JDaYfbLhiRV+EswDQYJKoZIhvcNAQEL
+BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNjA1MTgwOTM0
+MzFaFw0yODA3MjYwOTM0MzFaMBgxFjAUBgNVBAMMDSoubS5sb2NhbGhvc3QwggEi
+MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQC0hora/UCYMtrLJc6BOjonPUPi
+bYpbNiZYnvnqI4doKbV0LBT2TfokT7tpgdPCtHKV0RknsVSL8vhlXpkRqIiWPml8
+sZaa0+5NDGCQxexS2WVBlsoNCmAaqi/HNSFop6xaxGpQ3bu0iV3oIkUihveXAl6H
+C0VYyGifQ8D5onzepW2ayhemu47YRNSo8wETY5vIi0i/iajTTaw6JvwS+8Kv5/QV
+5prdvcFlG/oBs12p0+KoRyxskyzcdBdyIarvfY+9nDZwym5GfN32xO/iqtDuDQzw
+Q09h2OsfHJCw70IpHcgXLlEQF2DsFbmbVpWSU6HcMm6B7Yw1YeE64W4PRJp3AgMB
+AAGjgcUwgcIwHwYDVR0jBBgwFoAUQ38kTOMilKlur7v9ilElxm/L7MAwCQYDVR0T
+BAIwADALBgNVHQ8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwUwYDVR0RBEww
+SoIJbG9jYWxob3N0ggttLmxvY2FsaG9zdIINKi5tLmxvY2FsaG9zdIIXKi5vdGhl
+cnNpdGUubS5sb2NhbGhvc3SCCCoubmlwLmlvMB0GA1UdDgQWBBSd0sKIKmZzTnxT
+gNHHjsJNnFcYaTANBgkqhkiG9w0BAQsFAAOCAQEAeffRTrD9o9PVRIoul5r2chwP
+WF7JtvPdC5xWy9rlCfmIKRNzNRnpVw/mDF/jdhlWcENt3psN8Vb1NM3SECKve9KL
+8bDD2rJEoLBHIFQPS+XpEPqVGLHQcfBtGgs2XdILKvgXJyBHY/pgNZkQmXxYDVoc
+bH9PjJJ4V3t6+tiVWZ792739EU/pHaSz7tab+ycTiggs7mo18E5jpYILhWsDqIVs
+Kz3uczK2OR8537Ix64Z9kmKiklVAqE53odV7Qx2B+7DoOD/7KBN7SMy1KvR1ae6I
+p1ivtDKpBZWbb1ccFxp2cQ30qRHLJrt2YRwz268gx/A6rGXuW6UQPYf4ISNR4Q==
 -----END CERTIFICATE-----

backend/dev_tls_m.localhost.key

@@ -1,28 +1,28 @@
 -----BEGIN PRIVATE KEY-----
-MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDK1DNwTQWmyK71
-Ar56NvmSMQ8sqUY3jGqqPVORjfDUtDCrPPdCxT+ZlnsAgdonElWoWqczMrSyBRgf
-JlZMd4lEvt6VEEiZGUvA/lG1XIVgrx1kMSHKBoJj7lCBN6r3IWmYe6CxgfZurgp+
-7Z22i6cGMOnQ0XduX5Asup6zk5V7AE6i9eKrJsUjYmRBXtk099IitkER4TMqh6Wx
-JmFF+eV9P/axfxkon+bQWITwP1PLC1UOTK7lR0EcVan5aY6WMs/6RfO4Gw/dvuiV
-G1jCrVcaKNGTPYqmQqs+MOvyIqJ9kYELRZu+6bhPWSXk2ESpSIUIPH9twfnmWrnc
-neIJR24/AgMBAAECggEANRp6vzfDN4gKWoaV5TyYegCTNv+4rRl74cd9pjmx6Jam
-uWaUXCx1etpNqPPWcG1Z9OKLLRnk+kjgKGOqq4mObGvGreNeBot7bHOJZADtwMMI
-YG+Gp7StlclS1YoEHoDmezA/AcqDgTXa9KF0rdMBb1sGFJCLAuBNSJCxtVV6CQIz
-X26uT0m+Wx8MQyQWA7Sqy6DQNJo++IZkvr7a3cidqBOUPs+QvnIV5JsUb2gp5tGn
-zk+ObeRjoFFWYAN/NK7bneRenkP40m3MSL8ZfaEuuonui7CrxM1SiQyq2N1u/Aoy
-OE1JtNaVPbLBo6kG5al7Sj4Z0zhRt+iv93S2lZMkBQKBgQD2+FpLTqyLO1NDOFkE
-kxU+LdLOx0OV9wASC0ApPOu1dHMG6ksByr7TWeiu6GJDgajusPB7NVPOt2cm4iWU
-xPxXPO5l87uiSvu80h5uG4Qdj8KEijHkdap2wbVkU/mm8lBKC36jyBQIlJKySyXY
-zSEMfLK9jQPKz5cKKT3dVj/fAwKBgQDSPq9oks6K96MAB66o6cm214otQlnTQkPM
-xgjtjddX+Lp9tgihGvtSfPbyy89oUDHCfKvW/AHG52e5dec5YUi6mVdHEWbk33Kt
-BoQuxeK3XseIDlD/JD9Dd7KfUyO5w2jtYLfNdqez41O4qj2N52m1KwJYTwMsc8Kq
-izVgkC5hFQKBgBFAc/5CtqbbNAvECePZ6mf3h3xOSxhUsrqP8qFu0gBQ7CAVibvM
-T9wvsaNWNFcG3age0A2rQfl0sk3zCjEEOaRWa0jP59GEb2VXQCzs2yO9gRcFGEsf
-NRMqoOMrQos47gbeGrCSL2QSDNVLjo9AdQiMRWgcS6GFMsXQ77NgbQHFAoGBAI4a
-YGTGFWRITJvQlXUFz5kNxg8hMaVgvILDt3UY0dxb+XDOgLajjgsK+77Pkrhmu7tA
-mMUOQAU4kxr/XfGil43H5v3Z/Tnk7ZWVOfKDPeHC5gpH4ucQkNIBLXISt6rvMRSA
-srrk4CTuGcBPEJvBNemF0Gfvv61j8MdkoAdMbIyhAoGAfGR6yZLBmRMsW5PKmcpT
-nq2oSeUpmtGZra6pWz/3XU7AgrCLcx1DmqEjm4w7y5NQJmxyMZqqdTJILCjr3Srt
-+2F0NqQL6Li+xQGibAvDj0Jxyol38RvFC0J/w2vQmuF0hTuH95yknSd7FPXK+DPG
-qYgXLjun9dht6kx9vGJ69wI=
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC0hora/UCYMtrL
+Jc6BOjonPUPibYpbNiZYnvnqI4doKbV0LBT2TfokT7tpgdPCtHKV0RknsVSL8vhl
+XpkRqIiWPml8sZaa0+5NDGCQxexS2WVBlsoNCmAaqi/HNSFop6xaxGpQ3bu0iV3o
+IkUihveXAl6HC0VYyGifQ8D5onzepW2ayhemu47YRNSo8wETY5vIi0i/iajTTaw6
+JvwS+8Kv5/QV5prdvcFlG/oBs12p0+KoRyxskyzcdBdyIarvfY+9nDZwym5GfN32
+xO/iqtDuDQzwQ09h2OsfHJCw70IpHcgXLlEQF2DsFbmbVpWSU6HcMm6B7Yw1YeE6
+4W4PRJp3AgMBAAECggEAIgdIbk4VmnrfjjKCsg5JPvNH9AsE7PuQj9zrq+xljkdq
+aksS6ni5YZXb9F/iDE4aWU4waTB+iODUXLtPrCnyESwTk0sgYe/39/MQ0slUKivL
+b+keDgY6JlyVI/5KXWFZ1kQ27CZXxwiruGGZWZBKZF8wdVE1Ea65Neg+HHA6DHee
+Jck002gtgO/J1MMbB1MzdtGcsejYLrA+mO6YddQhA65xdQMljTEfyUwgTVv0pWde
+biyKegGK77vlsOyoCkMpVYORG5NMV1Kxs+htA79yuIW71tWHqVbcRMyoM+BaHzPh
+7uprs+8vYDFrO39LseczA8gURWwUsCgQ0yQ6Ix5W7QKBgQDnSK4AzjPpDEArdHuV
+VGKyzrfPtzH0VV/yTH9hvByNG6i/x8sE/r2KPi5nRMi4PAjjqmxyO1G5qwDOfzvK
+sBvwFrTRpmbnqGITVKPPivdoI9+RveN+FxhOXVA8NylAOv/dtSoakYwg3e507UsC
+RuFW3Re0Oc+0XFq4C8rQyLkIOwKBgQDH0T9gww+XbwIGCtiNpnEziU9FXBKSVwXf
+dCxYcTLPATq3BqHmP4OUA0v+sa3wPcnBkXF7q6eoB9+S6ZYQA/b2BXGU5/j9xYd4
+29cF4DlPkhTwF9S8b+h1zhlGIn96Lw/vZuj7Bc3wuwxvB17d8dpyo8bZynIe7BvF
+KSPJz+2O9QKBgFFyd8xS0VcFeGeVKpwozmUXhQWCBvZ7RkGGjOk3HHrYvbFjw2vr
+5YWUZjT5tRGkGqFJ98y2dQ5EWRFfHwg+wmfnJyAZUG3OD1OtX86Lqpqi321siHtz
+2JxoIgRCjKVQ4aAK11vp24YLgZjto5eWrG4xh9Jw9WMXjt73UCH8PaTXAoGBAIff
+TY1qlmuO3H1nWqHXkBpPQEwVs7s22ZN817q8HqSMXXSfWe/LOJmpND/YakJ2gX7S
+e6xwqOylje3EUHpLd98LDJUIuFM3wkr4klo4gkANQZeRXONV5WhV4PHD+5MF9XwB
+KmOnKsaLKoVFKckZ8EUMAOePtdI5ExkaRG+yqAMRAoGAJyUFK+V9ST1N/6wYgqor
+vywMSRE2cF2WvVIxdMvWffmpoj40bG6lAlaSWm29E2T8SVvAKsRid0wDgCQ4QTEn
+ft7yUDjqVALCJVCrOFHDY0BPStkm6njMWagr/0lGr9zUWqbBOKJhNfDJlykv8gaF
+8kWTgabrMCKmpTi7fBWbzZA=
 -----END PRIVATE KEY-----

backend/dev_tls_setup

@@ -3,7 +3,7 @@
 # Step 1: Create a Root CA key and cert
 openssl genrsa -out dev_tls_local-ca.key 2048
 openssl req -x509 -new -nodes \
-  -days 3650 \
+  -days 800 \
   -subj "/CN=Element Call Dev CA" \
   -key dev_tls_local-ca.key \
   -out dev_tls_local-ca.crt \
@@ -21,7 +21,7 @@ openssl x509 \
   -CA dev_tls_local-ca.crt -CAkey dev_tls_local-ca.key \
   -CAcreateserial \
   -out dev_tls_m.localhost.crt \
-  -days 3650 \
+  -days 800 \
   -sha256 \
   -extfile <( cat <<EOF
 authorityKeyIdentifier=keyid,issuer
@@ -35,5 +35,6 @@ DNS.1 = localhost
 DNS.2 = m.localhost
 DNS.3 = *.m.localhost
 DNS.4 = *.othersite.m.localhost
+DNS.5 = *.nip.io
 EOF
 )

backend/playwright_homeserver-othersite.yaml

@@ -50,6 +50,9 @@ max_event_delay_duration: 24h
 enable_registration: true
 enable_registration_without_verification: true
 
+# Shared secret for admin user registration via API (for testing only!)
+registration_shared_secret: "test_shared_secret_for_local_dev_only"
+
 report_stats: false
 serve_server_wellknown: true
 

backend/playwright_homeserver.yaml

@@ -50,6 +50,9 @@ max_event_delay_duration: 24h
 enable_registration: true
 enable_registration_without_verification: true
 
+# Shared secret for admin user registration via API (for testing only!)
+registration_shared_secret: "test_shared_secret_for_local_dev_only"
+
 report_stats: false
 serve_server_wellknown: true
 

docs/_developer.md

@@ -0,0 +1,112 @@
+# Developer help
+
+## Testing on Mobile Devices
+
+When developing Element Call locally, you may want to test on physical mobile devices (iOS/Android)
+on the same WiFi network.
+
+**Known Limitations:** For now this setup allows to use your local EC server but not yet the SFUs and Synapses.
+
+### Prerequisites
+
+1. **Start the dev server**
+
+   ```bash
+   pnpm dev
+   ```
+
+Check the output for the `➜  Network` (this will contain the local IP address of your laptop)
+
+```
+  ➜  Local:   https://m.localhost:3000/                                                                                                                                                                 12:06:48
+  ➜  Local:   https://vite.m.localhost:3000/                                                                                                                                                            12:06:48
+  ➜  Local:   https://vite.othersite.m.localhost:3000/                                                                                                                                                  12:06:48
+  ➜  Local:   https://vite.nip.io:3000/                                                                                                                                                                 12:06:48
+  ➜  Network: https://192.168.0.122:3000/
+```
+
+2. **Transfer the CA certificate to your phone**
+
+   The file is located at `backend/dev_tls_local-ca.crt`. Transfer it via:
+   - Matrix room
+   - AirDrop for iphone
+
+### IOS Setup
+
+**Install the certificate profile on iPhone**
+
+- Open the `dev_tls_local-ca.crt` file on your iPhone
+- You'll see "Profile Downloaded"
+- Go to **Settings → General → VPN & Device Management** (or **Settings → General → Profiles**)
+- Tap the "Element Call Dev CA" profile
+- Tap **Install** and enter your passcode
+- Confirm by tapping **Install** again
+
+**Enable full trust (Critical!)**
+
+- Go to **Settings → General → About → Certificate Trust Settings**
+- Under "Enable Full Trust for Root Certificates"
+- Toggle **ON** for "Element Call Dev CA"
+- Confirm the security warning
+
+**Access Element Call**
+
+Find your laptop's IP address (e.g., `192.168.0.122`) and use one of these URLs in Safari to validate:
+
+```
+https://192-168-0-122.nip.io:3000/
+```
+
+**For Element X iOS Developer Tools**
+
+In Element X's developer settings, set the Element Call URL to the nip.io url (replace . with - in the IP address):
+
+```
+https://192-168-0-122.nip.io:3000/room
+```
+
+### Android Setup
+
+**Transfer the CA certificate to your Android device**
+
+The file is located at `backend/dev_tls_local-ca.crt`.
+
+**Install the certificate**
+
+This might vary by Android version and manufacturer, but generally:
+
+- Open **Settings** search for "CA Certificate"/"Certificate"
+- Tap **Install a certificate** or **Install from storage**
+- Select **CA certificate**
+- Confirm the security warning
+- Navigate to and select the `dev_tls_local-ca.crt` file
+- Give it a name like "Element Call Dev CA"
+
+**Access Element Call**
+
+Find your laptop's IP address (e.g., `192.168.0.122`) and use one of these URLs in Chrome to validate:
+
+```
+https://192-168-0-122.nip.io:3000/
+```
+
+**For Element X Android Developer Tools**
+
+In Element X's developer settings, set the Element Call URL to the nip.io url (replace . with - in the IP address):
+
+```
+https://192-168-0-122.nip.io:3000/room
+```
+
+### Why nip.io?
+
+[nip.io](https://nip.io) is a free wildcard DNS service that automatically resolves domain names containing IP addresses. For example, `192-168-0-122.nip.io` automatically resolves to `192.168.0.122`. This means:
+
+- No need to regenerate certificates when your laptop's IP changes
+- Works from any device without DNS configuration
+- iOS/Android treat it as a proper domain name, not an IP address
+- One-time certificate setup works for all future IP addresses
+
+> [!IMPORTANT]
+> Make sure your network router doesn't enforce DNS rebinding protection (which will
+> break nip.io). If it does, try allow-listing nip.io in your router's administration interface.

docs/controls.md

@@ -7,12 +7,15 @@ A few aspects of Element Call's interface can be controlled through a global API
 - `controls.canEnterPip(): boolean` Determines whether it's possible to enter picture-in-picture mode.
 - `controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call.
 - `controls.disablePip(): void` Takes the call interface out of picture-in-picture mode, restoring it to its natural display mode. Throws if not in a call.
+- `controls.onPipMediaOrientationUpdate: ((orientation: "landscape"|"portrait") => void) | undefined` Callback called whenever the PiP media orientation changes.
+  The client should track this value to already initiate the pip in the right orientation.
+  It should update the orientation of the current Pip window when called.
 
 ## Audio devices
 
 On mobile platforms (iOS, Android), web views do not reliably support selecting audio output devices such as the main speaker, earpiece, or headset. To address this limitation, the following functions allow the hosting application (e.g., Element Web, Element X) to manage audio devices via exposed JavaScript interfaces. These functions must be enabled using the URL parameter `controlledAudioDevices` to take effect.
 
-- `controls.setAvailableAudioDevices(devices: { id: string, name: string, forEarpiece?: boolean, isEarpiece?: boolean isSpeaker?: boolean, isExternalHeadset?, boolean; }[]): void` Sets the list of available audio outputs. `forEarpiece` is used on iOS only.
+- `controls.setAvailableAudioDevices(devices: { id: string, name: string, forEarpiece?: boolean, isEarpiece?: boolean isSpeaker?: boolean, isExternalHeadset?: boolean }[]): void` Sets the list of available audio outputs. `forEarpiece` is used on iOS only.
   It flags the device that should be used if the user selects earpiece mode. This should be the main stereo loudspeaker of the device.
 - `controls.onAudioDeviceSelect: ((id: string) => void) | undefined` Callback called whenever the user or application selects a new audio output.
 - `controls.setAudioDevice(id: string): void` Sets the selected audio device in Element Call's menu. This should be used if the OS decides to automatically switch to Bluetooth, for example.

docs/embedded_standalone.md

@@ -25,7 +25,7 @@ The basics are:
 
 1. Add the appropriate platform dependency as given for a [release](https://github.com/element-hq/element-call/releases), or use the embedded tarball. e.g. `npm install @element-hq/element-call-embedded@0.9.0`
 2. Include the assets from the platform dependency in the build process. e.g. copy the assets during a [Webpack](https://github.com/element-hq/element-web/blob/247cd8d56d832d006d7dfb919d1042529d712b59/webpack.config.js#L677-L682) build.
-3. Use the `index.html` entrypointof the imported assets when you are constructing the WebView or iframe. e.g. using a [relative path in a webapp](https://github.com/element-hq/element-web/blob/247cd8d56d832d006d7dfb919d1042529d712b59/src/models/Call.ts#L680), or on the the Android [WebViewAssetLoader](https://github.com/element-hq/element-x-android/blob/fe5aab6588ecdcf9354a3bfbd9e97c1b31175a8f/features/call/impl/src/main/kotlin/io/element/android/features/call/impl/utils/DefaultCallWidgetProvider.kt#L20)
+3. Use the `index.html` entrypoint of the imported assets when you are constructing the WebView or iframe. e.g. using a [relative path in a webapp](https://github.com/element-hq/element-web/blob/247cd8d56d832d006d7dfb919d1042529d712b59/src/models/Call.ts#L680), or on the the Android [WebViewAssetLoader](https://github.com/element-hq/element-x-android/blob/fe5aab6588ecdcf9354a3bfbd9e97c1b31175a8f/features/call/impl/src/main/kotlin/io/element/android/features/call/impl/utils/DefaultCallWidgetProvider.kt#L20)
 4. Set any of the [embedded-only URL parameters](./url_params.md#embedded-only-parameters) that you need.
 
 ## Widget vs standalone mode
@@ -35,5 +35,5 @@ Element Call is developed using the [js-sdk](https://github.com/matrix-org/matri
 As a widget, the app only uses the core calling (MatrixRTC) parts. The rest (authentication, sending events, getting room state updates about calls) is done by the hosting client.
 Element Call and the hosting client are connected via the widget API.
 
-Element Call detects that it is run as a widget if a widgetId is defined in the url parameters. If `widgetId` is present then Element Call will try to connect to the client via the widget postMessage API using the parameters provided in [Url Format and parameters
+Element Call detects that it is run as a widget if `widgetId` is defined in the url parameters. If `widgetId` is present then Element Call will try to connect to the client via the widget postMessage API using the parameters provided in [Url Format and parameters
 ](./url_params.md).

docs/linking.md

@@ -1,6 +1,6 @@
 ## Quickstart guide
 
-run
+Run:
 
 ```bash
 ./scripts/setup-linking.sh
@@ -50,7 +50,7 @@ before committing a change.
 To make this less of a foot gun we added a git hook.
 A `pre-commit` hook will check if linking is currently used. If it detects
 a `.pnpmfile.cjs` file it will abort the commit with an explanatory message.
-You will than need to run `pnpm links:off` and commit again.
+You will then need to run `pnpm links:off` and commit again.
 
 To activate the hooks configure git with (when using the setup script (`./scripts/setup-linking.sh`) this is already done):
 

docs/linking_concept_reasoning.md

@@ -11,7 +11,7 @@ When the renovate bot creates a PR it runs `pnpm install --ignore-pnpmfile`. Thi
 This breaks builds that **don't** ignore the `.pnpmfile.cjs`-file. (CI that runs on the renovate PR)
 From here we have two possible paths:
 
-- ignore `.pnpmfile.cjs` in all CI builds CI will also fail if we accidently add it locally.
+- ignore `.pnpmfile.cjs` in all CI builds (CI will also fail if we accidently add it locally).
 - fixup the `pnpm-lock.yaml` in the renovate PR to contain the correct `pnpmfileChecksum`.
 
 Ignoring in all CI builds means that CI will always fail if we enable the linking system.
@@ -22,9 +22,9 @@ Only if we remember setting it back/disbale linking (or let ourselves remember b
 #### Summary
 
 - We will always run into conflicts with the `pnpmfileChecksum` because in renovate prs it will be empty (`--ignore-pnpmfile`)
-- To keep it simple we set `--ignore-pnpmfile` in all of ours CI to see issues immediately.
+- To keep it simple we set `--ignore-pnpmfile` in all of our CI builds to see issues immediately.
 - The only solution is to never have a `.pnpmfile.cjs` in the repository when pushing.
   - This way there will never be a commit with `pnpmfileChecksum` in the lockfile.
-  - renovate (which uses `--ignore-pnpmfile` which we cannot disable) and other CI will work
+  - renovate (which uses `--ignore-pnpmfile` which we cannot disable) and other CI will work.
 - We are able to use the linking system locally if we `cp` this file from the scripts folder into `./` on demand.
 - `pnpm links:on` and `pnpm links:off` + `./scripts/setup-linking.sh` will help us with this.

docs/self_hosting.md

@@ -58,7 +58,7 @@ rc_message:
 
 rc_delayed_event_mgmt:
   # This needs to match at least the heart-beat frequency plus a bit of headroom
-  # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s
+  # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2Hz
   per_second: 1
   burst_count: 20
 ```
@@ -70,7 +70,7 @@ make sure that your Synapse server has either a `federation` or `openid`
 
 ### MatrixRTC Backend
 
-In order to **guarantee smooth operation** of Element Call MatrixRTC backend is
+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)
@@ -190,8 +190,8 @@ backend mxrtc_auth_backend
 
 > [!IMPORTANT]
 > As defined in
-> [MSC4143](https://github.com/matrix-org/matrix-spec-proposals/pull/4143)
-> MatrixRTC backend must be announced to the client via your **Matrix site's
+> [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:
@@ -222,7 +222,7 @@ 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
+> the array.
 
 ## Building Element Call
 
@@ -291,7 +291,7 @@ be able to handle those yet and it may behave unreliably.
 
 Therefore, to use a self-hosted homeserver, this is recommended to be a new
 server where any user account created has not joined any normal rooms anywhere
-in the Matrix federated network. The homeserver used can be setup to disable
+in the Matrix federated network. The homeserver used can be set up to disable
 federation, so as to prevent spam registrations (if you keep registrations open)
 and to ensure Element Call continues to work in case any user decides to log in
 to their Element Call account using the standard Element app and joins normal

docs/url_params.md

@@ -12,7 +12,7 @@ https://element_call.domain/room/#
 ```
 
 The URL is split into two sections. The `https://element_call.domain/room/#`
-contains the app and the intend that the link brings you into a specific room
+contains the app and the intent that the link brings you into a specific room
 (`https://call.element.io/#` would be the homepage). The fragment is used for
 query parameters to make sure they never get sent to the element_call.domain
 server. Here we have the actual Matrix room ID and the password which are used
@@ -76,16 +76,16 @@ These parameters are relevant to both [widget](./embedded_standalone.md) and [st
 
 These parameters are only supported in [widget](./embedded_standalone.md) mode.
 
-| Name            | Values                                                                                    | Required                | Description                                                                                                                                                                                                                                                                                                                                        |
-| --------------- | ----------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `baseUrl`       |                                                                                           | Yes                     | The base URL of the homeserver to use for media lookups.                                                                                                                                                                                                                                                                                           |
-| `deviceId`      | Matrix device ID                                                                          | Yes                     | The Matrix device ID for the widget host.                                                                                                                                                                                                                                                                                                          |
-| `parentUrl`     |                                                                                           | Yes                     | The url used to send widget action postMessages. This should be the domain of the client or the webview the widget is hosted in. (in case the widget is not in an Iframe but in a dedicated webview we send the postMessages same WebView the widget lives in. Filtering is done in the widget so it ignores the messages it receives from itself) |
-| `posthogUserId` | Posthog user identifier                                                                   | No                      | This replaces the `analyticsID` parameter                                                                                                                                                                                                                                                                                                          |
-| `preload`       | `true` or `false`                                                                         | No, defaults to `false` | Pauses app before joining a call until an `io.element.join` widget action is seen, allowing preloading.                                                                                                                                                                                                                                            |
-| `returnToLobby` | `true` or `false`                                                                         | No, defaults to `false` | Displays the lobby in widget mode after leaving a call; shows a blank page if set to `false`. Useful for video rooms.                                                                                                                                                                                                                              |
-| `userId`        | [Matrix User Identifier](https://spec.matrix.org/v1.12/appendices/#user-identifiers)      | Yes                     | The Matrix user ID.                                                                                                                                                                                                                                                                                                                                |
-| `widgetId`      | [MSC2774](https://github.com/matrix-org/matrix-spec-proposals/pull/2774) format widget ID | Yes                     | The id used by the widget. The presence of this parameter implies that element call will not connect to a homeserver directly and instead tries to establish postMessage communication via the `parentUrl`.                                                                                                                                        |
+| Name            | Values                                                                                    | Required                | Description                                                                                                                                                                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `baseUrl`       |                                                                                           | Yes                     | The base URL of the homeserver to use for media lookups.                                                                                                                                                                                                                                                                                                    |
+| `deviceId`      | Matrix device ID                                                                          | Yes                     | The Matrix device ID for the widget host.                                                                                                                                                                                                                                                                                                                   |
+| `parentUrl`     |                                                                                           | Yes                     | The url used to send widget action postMessages. This should be the domain of the client or the webview the widget is hosted in. (In case the widget is not in an Iframe but in a dedicated webview, we send the postMessages in the same WebView the widget lives in. Filtering is done in the widget so it ignores the messages it receives from itself.) |
+| `posthogUserId` | Posthog user identifier                                                                   | No                      | This replaces the `analyticsID` parameter                                                                                                                                                                                                                                                                                                                   |
+| `preload`       | `true` or `false`                                                                         | No, defaults to `false` | Pauses app before joining a call until an `io.element.join` widget action is seen, allowing preloading.                                                                                                                                                                                                                                                     |
+| `returnToLobby` | `true` or `false`                                                                         | No, defaults to `false` | Displays the lobby in widget mode after leaving a call; shows a blank page if set to `false`. Useful for video rooms.                                                                                                                                                                                                                                       |
+| `userId`        | [Matrix User Identifier](https://spec.matrix.org/v1.12/appendices/#user-identifiers)      | Yes                     | The Matrix user ID.                                                                                                                                                                                                                                                                                                                                         |
+| `widgetId`      | [MSC2774](https://github.com/matrix-org/matrix-spec-proposals/pull/2774) format widget ID | Yes                     | The id used by the widget. The presence of this parameter implies that element call will not connect to a homeserver directly and instead tries to establish postMessage communication via the `parentUrl`.                                                                                                                                                 |
 
 ### Embedded-only parameters
 

index.html

@@ -10,7 +10,7 @@
 
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0"
     />
     <title><%- brand %></title>
     <script>

locales/en/app.json

@@ -3,6 +3,7 @@
     "user_menu": "User menu"
   },
   "action": {
+    "blur_background": "Blur background",
     "close": "Close",
     "copy_link": "Copy link",
     "edit": "Edit",
@@ -145,6 +146,7 @@
   },
   "layout_grid_label": "Grid",
   "layout_spotlight_label": "Spotlight",
+  "layout_switch_label": "Layout",
   "lobby": {
     "ask_to_join": "Request to join call",
     "join_as_guest": "Join as guest",

package.json

@@ -27,6 +27,8 @@
     "i18n": "i18next",
     "i18n:check": "i18next --fail-on-warnings --fail-on-update",
     "test": "vitest",
+    "test:storybook": "vitest --project=storybook",
+    "test:unit": "vitest --project=unit",
     "test:coverage": "vitest --coverage",
     "backend": "docker-compose -f dev-backend-docker-compose.yml up",
     "backend-playwright": "docker-compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up",
@@ -39,7 +41,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-env": "^7.29.5",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
     "@codecov/vite-plugin": "^1.3.0",
@@ -52,15 +54,16 @@
     "@livekit/protocol": "^1.42.2",
     "@livekit/track-processors": "^0.7.1",
     "@mediapipe/tasks-vision": "^0.10.18",
-    "@playwright/test": "^1.57.0",
+    "@playwright/test": "^1.60.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@react-spring/web": "^10.0.0",
     "@sentry/react": "^8.0.0",
     "@sentry/vite-plugin": "^3.0.0",
-    "@storybook/addon-docs": "^10.3.3",
-    "@storybook/react-vite": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
     "@stylistic/eslint-plugin": "^3.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -81,9 +84,11 @@
     "@typescript-eslint/parser": "^8.31.0",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^10.0.0",
-    "@vector-im/compound-web": "^9.0.0",
+    "@vector-im/compound-web": "^9.3.0",
     "@vitejs/plugin-react": "^4.0.1",
+    "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "4.1.5",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.3",
@@ -98,7 +103,7 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-rxjs": "^5.0.3",
-    "eslint-plugin-storybook": "^10.3.3",
+    "eslint-plugin-storybook": "^10.3.6",
     "eslint-plugin-unicorn": "^56.0.0",
     "fetch-mock": "11.1.5",
     "global-jsdom": "^26.0.0",
@@ -118,7 +123,7 @@
     "pako": "^2.0.4",
     "postcss": "^8.4.41",
     "postcss-preset-env": "^10.0.0",
-    "posthog-js": "1.160.3",
+    "posthog-js": "1.374.0",
     "prettier": "^3.0.0",
     "qrcode": "^1.5.4",
     "react": "19",
@@ -128,11 +133,11 @@
     "react-use-measure": "^2.1.1",
     "rxjs": "^7.8.1",
     "sass": "^1.42.1",
-    "storybook": "^10.3.3",
+    "storybook": "^10.3.6",
     "typescript": "^5.8.3",
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
-    "uuid": "^13.0.0",
+    "uuid": "^14.0.0",
     "vaul": "^1.0.0",
     "vite": "^8.0.0",
     "vite-plugin-generate-file": "^0.3.0",
@@ -141,7 +146,7 @@
     "vite-plugin-node-stdlib-browser": "^0.2.1",
     "vite-plugin-svgr": "^4.0.0",
     "vite-plugin-wasm": "^3.6.0",
-    "vitest": "^4.0.18",
+    "vitest": "^4.1.5",
     "vitest-axe": "^1.0.0-pre.3"
   },
   "pnpm": {
@@ -153,7 +158,7 @@
       "glob": "^10.5.0",
       "qs": "^6.14.1",
       "js-yaml": "^4.1.1",
-      "esbuild": "^0.27.7"
+      "esbuild": "^0.28.0"
     }
   },
   "packageManager": "pnpm@10.33.0"

playwright.config.ts

@@ -7,11 +7,22 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { defineConfig, devices } from "@playwright/test";
+import { join } from "path";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 
 const baseURL = process.env.USE_DOCKER
   ? "http://localhost:8080"
   : "https://localhost:3000";
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Needed by the synapse admin API called in fixtures
+process.env.NODE_EXTRA_CA_CERTS = join(
+  __dirname,
+  "backend/dev_tls_local-ca.crt",
+);
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -68,6 +79,11 @@ export default defineConfig({
           firefoxUserPrefs: {
             "permissions.default.microphone": 1,
             "permissions.default.camera": 1,
+            // Equivalent to Chromium's --use-fake-device-for-media-stream:
+            // feeds a synthetic media stream so getUserMedia and
+            // enumerateDevices work on CI runners without real hardware.
+            "media.navigator.streams.fake": true,
+            "media.navigator.permission.disabled": true,
           },
         },
       },

playwright/create-call.spec.ts

@@ -58,3 +58,41 @@ test("Start a new call then leave and show the feedback screen", async ({
     page.getByRole("link", { name: "Not now, return to home screen" }),
   ).toBeVisible();
 });
+
+test("BugFix: When unmuting in lobby, you had to click twice to unmute in call", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  await page.getByTestId("home_callName").click();
+  await page.getByTestId("home_callName").fill("DoubleUnMute");
+  await page.getByTestId("home_displayName").click();
+  await page.getByTestId("home_displayName").fill("me");
+  await page.getByTestId("home_go").click();
+
+  const microphoneButton = page.getByTestId("incall_mute");
+  const cameraButton = page.getByTestId("incall_videomute");
+
+  // Wait for devices to enumerate before the button enables.
+  await expect(microphoneButton).toBeEnabled({ timeout: 10_000 });
+
+  await microphoneButton.click();
+  await cameraButton.click();
+
+  // Should be muted now
+  await expect(microphoneButton).toHaveAccessibleName("Unmute microphone");
+  await expect(cameraButton).toHaveAccessibleName("Start video");
+
+  // Create the call and join
+  await page.getByTestId("lobby_joinCall").click();
+
+  // Give sometime for the all to be connected
+  // Check the number of participants
+  await expect(page.locator("div").filter({ hasText: /^1$/ })).toBeVisible();
+
+  // Click again on the mute button. it should unmute
+  await microphoneButton.click();
+  await expect(microphoneButton).toHaveAccessibleName("Mute microphone");
+  await cameraButton.click();
+  await expect(cameraButton).toHaveAccessibleName("Stop video");
+});

playwright/errors.spec.ts

@@ -75,9 +75,7 @@ test("Should automatically retry non fatal JWT errors", async ({
   await expect(page.getByTestId("video").first()).toBeVisible();
 });
 
-// We skip this test for now as it appears the livekit does not let us
-// detect and handle NotAllowed errors anymore. https://github.com/livekit/client-sdk-js/issues/1883
-test.skip("Should show error screen if call creation is restricted", async ({
+test("Should show error screen if call creation is restricted", async ({
   page,
   browserName,
 }) => {

playwright/fixtures/widget-user.ts

@@ -91,7 +91,9 @@ export const widgetTest = test.extend<MyFixtures>({
 
       await ewPage1
         .getByRole("button", { name: "Invite to this room", exact: true })
-        .click();
+        .click({
+          timeout: 10000,
+        });
       await expect(
         ewPage1.getByRole("heading", { name: "Invite to Welcome Room" }),
       ).toBeVisible();
@@ -104,6 +106,7 @@ export const widgetTest = test.extend<MyFixtures>({
       await ewPage1.getByRole("dialog").getByRole("textbox").fill(whistlerMxId);
       await ewPage1.getByRole("dialog").getByRole("textbox").click();
       await ewPage1.getByRole("button", { name: "Invite" }).click();
+      await TestHelpers.dismissInviteUnknownUserModal(ewPage1);
 
       // Accept the invite
       await expect(
@@ -126,6 +129,7 @@ export const widgetTest = test.extend<MyFixtures>({
       await ewPage1.getByRole("textbox", { name: "Search" }).click();
       await ewPage1.getByRole("textbox", { name: "Search" }).fill(whistlerMxId);
       await ewPage1.getByRole("button", { name: "Go" }).click();
+      await TestHelpers.dismissInviteUnknownUserModalDM(ewPage1);
 
       // Wait and send the first message to create the DM
       await expect(

playwright/mobile/create-call-mobile.spec.ts

@@ -53,7 +53,6 @@ test("@mobile Start a new call then leave and show the feedback screen", async (
 mobileTest(
   "Test earpiece overlay in controlledAudioDevices mode",
   async ({ asMobile, browser }) => {
-    test.slow(); // Triples the timeout
     const { creatorPage, inviteLink } = asMobile;
 
     // ========
@@ -78,13 +77,13 @@ mobileTest(
     await expect(
       guestPage.getByTestId("roomHeader_participants_count"),
     ).toContainText("2");
-    expect(await guestPage.getByTestId("videoTile").count()).toBe(2);
+    await expect(guestPage.getByTestId("videoTile")).toHaveCount(2);
 
     // Same in creator page
     await expect(
       creatorPage.getByTestId("roomHeader_participants_count"),
     ).toContainText("2");
-    expect(await creatorPage.getByTestId("videoTile").count()).toBe(2);
+    await expect(creatorPage.getByTestId("videoTile")).toHaveCount(2);
 
     // TEST: control audio devices from the invitee page
 

playwright/reconnect.spec.ts

@@ -54,6 +54,8 @@ test("can only interact with header and footer while reconnecting", async ({
     page.getByRole("switch", { name: "Mute microphone" }),
   ).toBeFocused();
   await page.keyboard.press("Tab");
+  await expect(page.getByRole("button", { name: "Microphone" })).toBeFocused();
+  await page.keyboard.press("Tab");
   await expect(page.getByRole("switch", { name: "Stop video" })).toBeFocused();
   // Most critically, we should be able to press the hangup button
   await page.getByRole("button", { name: "End call" }).click();

playwright/sfu-reconnect-bug.spec.ts

@@ -9,7 +9,9 @@ import { expect, test } from "@playwright/test";
 
 test("When creator left, avoid reconnect to the same SFU", async ({
   browser,
+  browserName,
 }) => {
+  test.skip(browserName === "firefox", "Browser independent");
   // Use reduce motion to disable animations that are making the tests a bit flaky
   const creatorContext = await browser.newContext({ reducedMotion: "reduce" });
   const creatorPage = await creatorContext.newPage();
@@ -91,8 +93,10 @@ test("When creator left, avoid reconnect to the same SFU", async ({
   // the creator leaves the call
   await creatorPage.getByTestId("incall_leave").click();
 
-  await guestCPage.waitForTimeout(2000);
   // https://github.com/element-hq/element-call/issues/3344
   // The app used to request a new jwt token then to reconnect to the SFU
   expect(wsConnectionCount).toBe(1);
+  // Wait a bit to be sure that if there was a reconnect, it would have happened by now
+  await guestCPage.waitForTimeout(6000);
+  expect(wsConnectionCount).toBe(1);
 });

playwright/spa-call-sticky.spec.ts

@@ -115,8 +115,12 @@ test("One to One rejoin after improper leave does not crash EC", async ({
   await guestPage.getByTestId("lobby_joinCall").click();
 
   // We cannot use the `expectVideoTilesCount` helper here since one of them is expected to show waiting for media
-  await expect(page.getByTestId("videoTile")).toHaveCount(3);
-  await expect(guestPage.getByTestId("videoTile")).toHaveCount(2);
+  await expect(page.getByTestId("videoTile")).toHaveCount(3, {
+    timeout: 10000,
+  });
+  await expect(guestPage.getByTestId("videoTile")).toHaveCount(2, {
+    timeout: 10000,
+  });
 });
 
 function isStickySend(url: string): boolean {

playwright/spa-helpers.ts

@@ -119,25 +119,27 @@ async function setRtcModeFromSettings(
 async function expectVideoTilesCount(page: Page, count: number): Promise<void> {
   await expect(page.getByTestId("videoTile")).toHaveCount(2);
 
-  // There are no other options than to wait for all media to be ready?
-  // Or it is too flaky :/
-  await page.waitForTimeout(3000);
   // No one should be waiting for media
-  await expect(page.getByText("Waiting for media...")).not.toBeVisible();
+  await expect(page.getByText("Waiting for media...")).not.toBeVisible({
+    timeout: 10000,
+  });
 
-  // There should be 5 video elements, visible and autoplaying
-  const videoElements = await page.locator("video").all();
-  expect(videoElements.length).toBe(count);
+  // There should be `count` video elements, visible and autoplaying
+  await expect(page.locator("video")).toHaveCount(count);
 
-  const blockDisplayCount = await page
-    .locator("video")
-    .evaluateAll(
-      (videos: Element[]) =>
-        videos.filter(
-          (v: Element) => window.getComputedStyle(v).display === "block",
-        ).length,
-    );
-  expect(blockDisplayCount).toBe(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/utils/synapse-admin.ts

@@ -0,0 +1,142 @@
+/*
+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 { createHmac } from "crypto";
+
+/**
+ * Response from Synapse registration API
+ */
+export interface SynapseRegistrationResponse {
+  access_token: string;
+  user_id: string;
+  home_server: string;
+  device_id: string;
+}
+
+/**
+ * Utility class for interacting with Synapse Admin API
+ * This provides fast user registration without going through the UI
+ *
+ * @see https://matrix-org.github.io/synapse/latest/admin_api/register_api.html
+ */
+export class SynapseAdmin {
+  public constructor(
+    private baseUrl: string = "https://synapse.m.localhost",
+    private sharedSecret: string = "test_shared_secret_for_local_dev_only",
+  ) {}
+
+  /**
+   * Register a user using the Synapse Admin API
+   * This is much faster than going through the UI registration flow
+   *
+   * @param username - The username (localpart) for the new user
+   * @param password - The password for the new user
+   * @param displayName - Optional display name (defaults to username)
+   * @param admin - Whether the user should be an admin (defaults to false)
+   * @returns Registration response containing access token and user ID
+   */
+  public async registerUser(
+    username: string,
+    password: string,
+    displayName?: string,
+    admin: boolean = false,
+  ): Promise<SynapseRegistrationResponse> {
+    // Get a nonce first
+    const nonce = await this.getNonce();
+
+    // Generate the HMAC
+    const mac = this.generateMac(username, password, admin, nonce);
+
+    // Make the registration request
+    const response = await fetch(`${this.baseUrl}/_synapse/admin/v1/register`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        nonce,
+        username,
+        password,
+        displayname: displayName || username,
+        admin,
+        mac,
+      }),
+    });
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(
+        `Failed to register user ${username}: ${response.status} ${error}`,
+      );
+    }
+
+    return response.json();
+  }
+
+  /**
+   * Get a nonce for registration
+   * The nonce is required for the HMAC calculation
+   *
+   * @returns A nonce string
+   */
+  private async getNonce(): Promise<string> {
+    const response = await fetch(`${this.baseUrl}/_synapse/admin/v1/register`, {
+      method: "GET",
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `Failed to get nonce: ${response.status} ${await response.text()}`,
+      );
+    }
+
+    const data = await response.json();
+    return data.nonce;
+  }
+
+  /**
+   * Generate HMAC for shared secret registration
+   * This is the authentication mechanism for the admin API
+   *
+   * @param username - The username
+   * @param password - The password
+   * @param admin - Whether the user is an admin
+   * @param nonce - The nonce from the server
+   * @returns The HMAC hex string
+   */
+  private generateMac(
+    username: string,
+    password: string,
+    admin: boolean,
+    nonce: string,
+  ): string {
+    const mac = createHmac("sha1", this.sharedSecret);
+    mac.update(nonce);
+    mac.update("\x00");
+    mac.update(username);
+    mac.update("\x00");
+    mac.update(password);
+    mac.update("\x00");
+    mac.update(admin ? "admin" : "notadmin");
+
+    return mac.digest("hex");
+  }
+
+  /**
+   * Create a new SynapseAdmin instance for a different homeserver
+   *
+   * @param baseUrl - The base URL of the homeserver
+   * @param sharedSecret - The shared secret (defaults to test secret)
+   * @returns A new SynapseAdmin instance
+   */
+  public static forHomeserver(
+    baseUrl: string,
+    sharedSecret: string = "test_shared_secret_for_local_dev_only",
+  ): SynapseAdmin {
+    return new SynapseAdmin(baseUrl, sharedSecret);
+  }
+}

playwright/widget/federated-call.test.ts

@@ -26,8 +26,12 @@ modePairs.forEach(([rtcMode1, rtcMode2]) => {
         "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);
+      test.slow();
+
+      const [florian, timo] = await Promise.all([
+        addUser("florian", HOST1),
+        addUser("timo", HOST2),
+      ]);
 
       const roomName = "Call Room";
 
@@ -57,27 +61,20 @@ modePairs.forEach(([rtcMode1, rtcMode2]) => {
         const frame = user.page
           .locator('iframe[title="Element Call"]')
           .contentFrame();
-        await expect(frame.getByTestId("videoTile")).toHaveCount(2);
+        await expect(frame.getByTestId("videoTile")).toHaveCount(2, {
+          timeout: 10000,
+        });
 
-        // There are no other options than to wait for all media to be ready?
-        // Or it is too flaky :/
-        await user.page.waitForTimeout(3000);
         // No one should be waiting for media
-        await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
+        await expect(frame.getByText("Waiting for media...")).not.toBeVisible({
+          timeout: 10000,
+        });
 
         // There should be 2 video elements, visible and autoplaying
         const videoElements = await frame.locator("video").all();
         expect(videoElements.length).toBe(2);
 
-        const blockDisplayCount = await frame
-          .locator("video")
-          .evaluateAll(
-            (videos: Element[]) =>
-              videos.filter(
-                (v: Element) => window.getComputedStyle(v).display === "block",
-              ).length,
-          );
-        expect(blockDisplayCount).toBe(2);
+        await TestHelpers.expectVisibleVideoCount(frame, 2);
       }
 
       // await florian.page.pause();

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

@@ -75,18 +75,11 @@ widgetTest(
       await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
 
       // There should be 2 video elements, visible and autoplaying
-      const videoElements = await frame.locator("video").all();
-      expect(videoElements.length).toBe(2);
+      await expect(frame.locator("video")).toHaveCount(2, {
+        timeout: 10000,
+      });
 
-      const blockDisplayCount = await frame
-        .locator("video")
-        .evaluateAll(
-          (videos: Element[]) =>
-            videos.filter(
-              (v: Element) => window.getComputedStyle(v).display === "block",
-            ).length,
-        );
-      expect(blockDisplayCount).toBe(2);
+      await TestHelpers.expectVisibleVideoCount(frame, 2);
     }
   },
 );

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

@@ -27,6 +27,7 @@ import { HOST1, HOST2, TestHelpers } from "./test-helpers";
 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",
@@ -65,40 +66,26 @@ widgetTest(
         .contentFrame();
       await expect(frame.getByTestId("videoTile")).toHaveCount(2);
 
-      // There are no other options than to wait for all media to be ready?
-      // Or it is too flaky :/
-      await user.page.waitForTimeout(3000);
-      // No one should be waiting for media
-      await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
+      // 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
-      const videoElements = await frame.locator("video").all();
-      expect(videoElements.length).toBe(2);
+      await expect(frame.locator("video")).toHaveCount(2, {
+        timeout: 10000,
+      });
 
-      const blockDisplayCount = await frame
-        .locator("video")
-        .evaluateAll(
-          (videos: Element[]) =>
-            videos.filter(
-              (v: Element) => window.getComputedStyle(v).display === "block",
-            ).length,
-        );
-      expect(blockDisplayCount).toBe(2);
+      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);
-    const blockDisplayCount = await timo.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame()
-      .locator("video")
-      .evaluateAll(
-        (videos: Element[]) =>
-          videos.filter(
-            (v: Element) => window.getComputedStyle(v).display === "block",
-          ).length,
-      );
-    expect(blockDisplayCount).toBe(2);
+
+    await TestHelpers.expectVisibleVideoCount(
+      timo.page.locator('iframe[title="Element Call"]').contentFrame(),
+      2,
+    );
   },
 );

playwright/widget/huddle-call.test.ts

@@ -11,18 +11,21 @@ import { widgetTest } from "../fixtures/widget-user.ts";
 import { HOST1, TestHelpers } from "./test-helpers.ts";
 
 widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
+  // increase the timeouts, it is a long test and it is annoying to retry from the beginning for a single timeout.
+  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",
   );
 
-  test.slow(); // We are registering multiple users here, give it more time
-
-  const valere = await addUser("Valere", HOST1);
-  const timo = await addUser("Timo", HOST1);
-  const robin = await addUser("Robin", HOST1);
-  const halfshot = await addUser("Halfshot", HOST1);
-  const florian = await addUser("florian", HOST1);
+  const [valere, timo, robin, halfshot, florian] = await Promise.all([
+    addUser("Valere", HOST1),
+    addUser("Timo", HOST1),
+    addUser("Robin", HOST1),
+    addUser("Halfshot", HOST1),
+    addUser("florian", HOST1),
+  ]);
 
   const roomName = "Group Call Room";
   await TestHelpers.createRoom(roomName, valere.page, [
@@ -47,52 +50,55 @@ widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
 
   await TestHelpers.joinCallFromLobby(valere.page);
 
-  for (const user of [timo, robin, halfshot, florian]) {
-    await TestHelpers.joinCallInCurrentRoom(user.page);
-  }
+  await Promise.all(
+    [timo, robin, halfshot, florian].map(async (user) => {
+      await TestHelpers.joinCallInCurrentRoom(user.page);
+    }),
+  );
 
-  for (const user of [timo, robin, halfshot, florian]) {
-    const frame = user.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-    // No lobby, should start with video on
-    await expect(
-      frame.getByRole("switch", { name: "Stop video", checked: true }),
-    ).toBeVisible();
-  }
+  await Promise.all(
+    [timo, robin, halfshot, florian].map(async (user) => {
+      const frame = user.page
+        .locator('iframe[title="Element Call"]')
+        .contentFrame();
+      await expect(
+        frame.getByRole("switch", { name: "Stop video", checked: true }),
+      ).toBeVisible({
+        timeout: 10000,
+      });
+    }),
+  );
 
   // We should see 5 video tiles everywhere now
-  for (const user of [valere, timo, robin, halfshot, florian]) {
-    const frame = user.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-    await expect(frame.getByTestId("videoTile")).toHaveCount(5);
-    for (const participant of [valere, timo, robin, halfshot, florian]) {
-      // Check the names are correct
-      await expect(frame.getByText(participant.displayName)).toBeVisible();
-    }
+  await Promise.all(
+    [valere, timo, robin, halfshot, florian].map(async (user) => {
+      const frame = user.page
+        .locator('iframe[title="Element Call"]')
+        .contentFrame();
+      await expect(frame.getByTestId("videoTile")).toHaveCount(5, {
+        timeout: 15000,
+      });
 
-    // There is no other options than to wait for all media to be ready?
-    // Or it is too flaky :/
-    await user.page.waitForTimeout(5000);
-    // No one should be waiting for media
-    await expect(frame.getByText("Waiting for media...")).not.toBeVisible();
-
-    // There should be 5 video elements, visible and autoplaying
-    const videoElements = await frame.locator("video").all();
-    expect(videoElements.length).toBe(5);
-    await expect(frame.locator("video[autoplay]")).toHaveCount(5);
-
-    const blockDisplayCount = await frame
-      .locator("video")
-      .evaluateAll(
-        (videos: Element[]) =>
-          videos.filter(
-            (v: Element) => window.getComputedStyle(v).display === "block",
-          ).length,
+      await Promise.all(
+        [valere, timo, robin, halfshot, florian].map(async (user) => {
+          // Check the names are correct
+          await expect(frame.getByText(user.displayName)).toBeVisible();
+        }),
       );
-    expect(blockDisplayCount).toBe(5);
-  }
+
+      // No one should be waiting for media
+      await expect(frame.getByText("Waiting for media...")).not.toBeVisible({
+        // Use a bigger timeout here
+        timeout: 10000,
+      });
+
+      // There should be 5 video elements, visible and autoplaying
+      await expect(frame.locator("video")).toHaveCount(5);
+      await expect(frame.locator("video[autoplay]")).toHaveCount(5);
+
+      await TestHelpers.expectVisibleVideoCount(frame, 5);
+    }),
+  );
 
   // Quickly test muting one participant to see it reflects and that our asserts works
   const florianFrame = florian.page
@@ -108,28 +114,16 @@ widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
   await expect(florianVideoButton).toHaveAccessibleName("Start video");
   await expect(florianVideoButton).not.toBeChecked();
 
-  // wait a bit for the state to propagate
-  await valere.page.waitForTimeout(3000);
   {
     const frame = valere.page
       .locator('iframe[title="Element Call"]')
       .contentFrame();
 
-    const videoElements = await frame.locator("video").all();
-    expect(videoElements.length).toBe(5);
-
-    const blockDisplayCount = await frame
-      .locator("video")
-      .evaluateAll(
-        (videos: Element[]) =>
-          videos.filter(
-            (v: Element) => window.getComputedStyle(v).display === "block",
-          ).length,
-      );
+    await expect(frame.locator("video")).toHaveCount(5, {
+      timeout: 10000,
+    });
 
     // out of 5 ONLY 4 are visible (display:block) !!
-    // 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.
-    expect(blockDisplayCount).toBe(4);
+    await TestHelpers.expectVisibleVideoCount(frame, 4);
   }
 });

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

@@ -16,8 +16,6 @@ widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => {
     "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
   );
 
-  test.slow();
-
   const valere = await addUser("Valere", HOST1);
 
   const callRoom = "CallRoom";

playwright/widget/pip-call.test.ts

@@ -47,7 +47,10 @@ widgetTest("Put call in PIP", async ({ addUser, browserName }) => {
   // check that the video is on
   await expect(
     frame.getByRole("switch", { name: "Stop video", checked: true }),
-  ).toBeVisible();
+  ).toBeVisible({
+    // Increase timeout, as this expect was flaky
+    timeout: 15000,
+  });
 
   // Switch to the other room, the call should go to PIP
   await TestHelpers.switchToRoomNamed(valere.page, "DoubleTask");
@@ -63,8 +66,10 @@ widgetTest("Put call in PIP", async ({ addUser, browserName }) => {
     const frame = valere.page
       .locator('iframe[title="Element Call"]')
       .contentFrame();
+
+    await expect(frame.locator("video")).toHaveCount(1, { timeout: 10000 });
+
     const videoElements = await frame.locator("video").all();
-    expect(videoElements.length).toBe(1);
 
     const pipVideo = videoElements[0];
     await expect(pipVideo).toHaveCSS("object-fit", "cover");

playwright/widget/screen-share.test.ts

@@ -18,9 +18,11 @@ widgetTest("Sharing screen in group call", async ({ addUser, browserName }) => {
 
   test.slow(); // We are registering multiple users here, give it more time
 
-  const alice = await addUser("Alice", HOST1);
-  const bob = await addUser("Bob", HOST1);
-  const carol = await addUser("Carol", HOST1);
+  const [alice, bob, carol] = await Promise.all([
+    addUser("Alice", HOST1),
+    addUser("Bob", HOST1),
+    addUser("Carol", HOST1),
+  ]);
 
   const roomName = "Meeting Room";
   await TestHelpers.createRoom(roomName, alice.page, [bob.mxId, carol.mxId]);
@@ -50,7 +52,7 @@ widgetTest("Sharing screen in group call", async ({ addUser, browserName }) => {
 
     // Expect 3 video tiles
     await expect(frame.locator("video")).toHaveCount(3, {
-      timeout: 5000,
+      timeout: 10000,
     });
   }
 

playwright/widget/simple-create.spec.ts

@@ -17,7 +17,7 @@ widgetTest.skip(
 );
 
 widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => {
-  test.slow(); // Triples the timeout
+  test.slow();
 
   const { brooks, whistler } = asWidget;
 
@@ -83,8 +83,12 @@ widgetTest("Start a new call as widget", async ({ asWidget, browserName }) => {
     .locator('iframe[title="Element Call"]')
     .contentFrame()
     .getByTestId("incall_leave")
-    .click();
+    .click({ timeout: 15000 });
 
-  await expect(whistler.page.locator(".mx_BasicMessageComposer")).toBeVisible();
-  await expect(brooks.page.locator(".mx_BasicMessageComposer")).toBeVisible();
+  await expect(whistler.page.locator(".mx_BasicMessageComposer")).toBeVisible({
+    timeout: 10000,
+  });
+  await expect(brooks.page.locator(".mx_BasicMessageComposer")).toBeVisible({
+    timeout: 10000,
+  });
 });

playwright/widget/test-helpers.ts

@@ -10,9 +10,12 @@ import {
   expect,
   type JSHandle,
   type Page,
+  type FrameLocator,
 } from "@playwright/test";
 import { type MatrixClient } from "matrix-js-sdk";
 
+import { SynapseAdmin } from "../utils/synapse-admin.ts";
+
 const PASSWORD = "foobarbaz1!";
 
 export const HOST1 = "https://app.m.localhost/#/welcome";
@@ -26,14 +29,14 @@ export class TestHelpers {
     voice: boolean = false,
   ): Promise<void> {
     const buttonName = voice ? "Voice call" : "Video call";
-    await expect(page.getByRole("button", { name: buttonName })).toBeVisible();
-    await page.getByRole("button", { name: buttonName }).click();
 
-    await expect(
-      page.getByRole("menuitem", { name: "Element Call" }),
-    ).toBeVisible();
+    await page.getByRole("button", { name: buttonName }).click({
+      timeout: 5000,
+    });
 
-    await page.getByRole("menuitem", { name: "Element Call" }).click();
+    await page.getByRole("menuitem", { name: "Element Call" }).click({
+      timeout: 10000,
+    });
   }
 
   public static async joinCallFromLobby(page: Page): Promise<void> {
@@ -51,15 +54,40 @@ export class TestHelpers {
       .click();
   }
 
+  public static async joinCallInCurrentDM(
+    page: Page,
+    audioOnly: boolean = false,
+  ): Promise<void> {
+    await this.joinCallInRoom(page, audioOnly, true);
+  }
+
   public static async joinCallInCurrentRoom(
     page: Page,
     audioOnly: boolean = false,
   ): Promise<void> {
-    // This is the header button that notifies about an ongoing call
-    const label = audioOnly ? "Voice call started" : "Video call started";
-    await expect(page.getByText(label)).toBeVisible();
-    await expect(page.getByRole("button", { name: "Join" })).toBeVisible();
-    await page.getByRole("button", { name: "Join" }).click();
+    await this.joinCallInRoom(page, audioOnly, false);
+  }
+
+  public static async joinCallInRoom(
+    page: Page,
+    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
+        ? "Incoming voice call"
+        : "Incoming video call"
+      : "Group call started";
+    await expect(page.getByText(label)).toBeVisible({
+      timeout: 10000,
+    });
+    await page.getByRole("button", { name: "Join" }).click({
+      timeout: 5000,
+    });
   }
 
   /**
@@ -74,97 +102,90 @@ export class TestHelpers {
     clientHandle: JSHandle<MatrixClient>;
     mxId: string;
   }> {
+    // Determine which homeserver to use based on the host
+    const synapseBaseUrl =
+      host === HOST2
+        ? "https://synapse.othersite.m.localhost"
+        : "https://synapse.m.localhost";
+
+    // Register user via Synapse Admin API to speed things up
+    const synapseAdmin = SynapseAdmin.forHomeserver(synapseBaseUrl);
+    const credentials = await synapseAdmin.registerUser(
+      username,
+      PASSWORD,
+      username,
+    );
+
+    // STEP 2: Open browser and login
     const userContext = await browser.newContext({
       reducedMotion: "reduce",
     });
     const page = await userContext.newPage();
     await page.goto(host);
-    await page.getByRole("link", { name: "Create Account" }).click();
-    await page.getByRole("textbox", { name: "Username" }).fill(username);
-    await page.getByRole("textbox", { name: "Password", exact: true }).click();
-    await page
-      .getByRole("textbox", { name: "Password", exact: true })
-      .fill(PASSWORD);
-    await page.getByRole("textbox", { name: "Confirm password" }).click();
-    await page
-      .getByRole("textbox", { name: "Confirm password" })
-      .fill(PASSWORD);
-    await page.getByRole("button", { name: "Register" }).click();
+
+    await page.getByRole("link", { name: "Sign in" }).click({
+      timeout: 10000,
+    });
+
+    await page.getByRole("textbox", { name: "Username" }).fill(username, {
+      timeout: 10000,
+    });
+    await page.getByRole("textbox", { name: "Password" }).fill(PASSWORD, {
+      timeout: 10000,
+    });
+    await page.getByRole("button", { name: "Sign in" }).click();
 
     await expect(
       page.getByRole("heading", { name: `Welcome ${username}` }),
     ).toBeVisible({
-      // Increase timeout as registration can be slow :/
-      timeout: 15_000,
+      // Increase timeout here :/ flaky
+      timeout: 15000,
     });
 
-    await this.maybeDismissBrowserNotSupportedToast(page);
-    await this.maybeDismissServiceWorkerWarningToast(page);
+    await this.dismissStartupToasts(page);
 
     await TestHelpers.setDevToolElementCallDevUrl(page);
 
     const clientHandle = await page.evaluateHandle(() =>
       window.mxMatrixClientPeg.get(),
     );
-    const mxId = (await clientHandle.evaluate(
-      (cli: MatrixClient) => cli.getUserId(),
-      clientHandle,
-    ))!;
-
+    const mxId = credentials.user_id;
     return { page, clientHandle, mxId };
   }
 
-  private static async maybeDismissBrowserNotSupportedToast(
-    page: Page,
-  ): Promise<void> {
-    const browserUnsupportedToast = page
-      .getByText("Element does not support this browser")
-      .locator("..")
-      .locator("..");
+  // Dismisses any toasts that appear on startup, such as "Failed to load service worker" or "Back up your chats".
+  // Toast can be stacked, and only the top one can be dismiss, so just look at what is on top and
+  // dismiss (if part of expected toats)
+  public static async dismissStartupToasts(page: Page): Promise<void> {
+    const expectedToasts = [
+      { title: "Failed to load service worker", button: "OK" },
+      { title: "Back up your chats", button: "Dismiss" },
+      { title: "Element does not support this browser", button: "Dismiss" },
+    ];
 
-    // Dismiss incompatible browser toast
-    const dismissButton = browserUnsupportedToast.getByRole("button", {
-      name: "Dismiss",
-    });
-    try {
-      await expect(dismissButton).toBeVisible({ timeout: 700 });
-      await dismissButton.click();
-    } catch {
-      // dismissButton not visible, continue as normal
-    }
-  }
+    const toast = page.locator(".mx_Toast_toast");
 
-  private static async maybeDismissServiceWorkerWarningToast(
-    page: Page,
-  ): Promise<void> {
-    const toast = page
-      .locator(".mx_Toast_toast")
-      .getByText("Failed to load service worker");
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      try {
+        await toast.waitFor({ state: "visible", timeout: 700 });
+        const title = await toast.locator(".mx_Toast_title h2").textContent();
 
-    try {
-      await expect(toast).toBeVisible({ timeout: 700 });
-      await page
-        .locator(".mx_Toast_toast")
-        .getByRole("button", { name: "OK" })
-        .click();
-    } catch {
-      // toast not visible, continue as normal
-    }
-  }
+        // Find the matching toast config
+        const toastConfig = expectedToasts.find((t) =>
+          title?.includes(t.title),
+        );
 
-  public static async maybeDismissKeyBackupToast(page: Page): Promise<void> {
-    const toast = page
-      .locator(".mx_Toast_toast")
-      .getByText("Back up your chats");
-
-    try {
-      await expect(toast).toBeVisible({ timeout: 700 });
-      await page
-        .locator(".mx_Toast_toast")
-        .getByRole("button", { name: "Dismiss" })
-        .click();
-    } catch {
-      // toast not visible, continue as normal
+        if (toastConfig) {
+          await toast.getByRole("button", { name: toastConfig.button }).click();
+        } else {
+          // Unknown toast. We don't want to act on unknown toasts
+          break;
+        }
+      } catch {
+        // No toast visible, exit loop
+        break;
+      }
     }
   }
 
@@ -178,12 +199,16 @@ export class TestHelpers {
       .getByRole("button", { name: "New conversation" })
       .click();
 
-    await page.getByRole("menuitem", { name: "New Room" }).click();
+    await page.getByRole("menuitem", { name: "New Room" }).click({
+      timeout: 5000,
+    });
     await page.getByRole("textbox", { name: "Name" }).fill(name);
     await page.getByRole("button", { name: "Create room" }).click();
-    await expect(page.getByText("You created this room.")).toBeVisible();
+    await expect(page.getByText("You created this room.")).toBeVisible({
+      timeout: 10000,
+    });
     await expect(page.getByText("Encryption enabled")).toBeVisible();
-    await TestHelpers.maybeDismissKeyBackupToast(page);
+    await TestHelpers.dismissStartupToasts(page);
 
     // Invite users if any
     if (andInvite.length > 0) {
@@ -199,6 +224,7 @@ export class TestHelpers {
       }
 
       await page.getByRole("button", { name: "Invite" }).click();
+      await TestHelpers.dismissInviteUnknownUserModal(page);
     }
   }
 
@@ -211,14 +237,17 @@ export class TestHelpers {
     roomName: string,
     page: Page,
   ): Promise<void> {
-    await expect(page.getByRole("option", { name: roomName })).toBeVisible();
-    await page.getByRole("option", { name: roomName }).click();
-    await page.getByRole("button", { name: "Accept" }).click();
+    await page.getByRole("option", { name: roomName }).click({
+      timeout: 10000,
+    });
+    await page.getByRole("button", { name: "Accept" }).click({
+      timeout: 5000,
+    });
 
     await expect(
       page.getByRole("main").getByRole("heading", { name: roomName }),
     ).toBeVisible();
-    await TestHelpers.maybeDismissKeyBackupToast(page);
+    await TestHelpers.dismissStartupToasts(page);
   }
 
   /**
@@ -233,8 +262,12 @@ export class TestHelpers {
     page: Page,
     mode: RtcMode,
   ): Promise<void> {
-    await page.getByRole("button", { name: "Video call" }).click();
-    await page.getByRole("menuitem", { name: "Element Call" }).click();
+    await page.getByRole("button", { name: "Video call" }).click({
+      timeout: 5000,
+    });
+    await page.getByRole("menuitem", { name: "Element Call" }).click({
+      timeout: 10000,
+    });
 
     await TestHelpers.setEmbeddedElementCallRtcMode(page, mode);
     await page.getByRole("button", { name: "Close lobby" }).click();
@@ -308,4 +341,52 @@ export class TestHelpers {
   ): Promise<void> {
     await page.getByRole("option", { name: `Open room ${roomName}` }).click();
   }
+
+  public static async dismissInviteUnknownUserModal(page: Page): Promise<void> {
+    await expect(
+      page.getByRole("heading", { name: "Invite new contacts to this" }),
+    ).toBeVisible();
+    await page.getByRole("button", { name: "Invite" }).click({
+      timeout: 5000,
+    });
+  }
+
+  public static async dismissInviteUnknownUserModalDM(
+    page: Page,
+  ): Promise<void> {
+    await expect(
+      page.getByRole("heading", {
+        name: "Start a chat with this new contact?",
+      }),
+    ).toBeVisible();
+    await page.getByRole("button", { name: "Continue" }).click({
+      timeout: 5000,
+    });
+  }
+
+  public static async expectVisibleVideoCount(
+    frame: FrameLocator,
+    count: number,
+  ): Promise<void> {
+    // XXX we need to be better at our HTML markup and accessibility, it would make
+    // this kind of stuff way easier to test if we could look out for aria attributes.
+    await expect
+      .poll(
+        async () => {
+          return await frame
+            .locator("video")
+            .evaluateAll(
+              (videos: Element[]) =>
+                videos.filter(
+                  (v: Element) =>
+                    window.getComputedStyle(v).display === "block",
+                ).length,
+            );
+        },
+        {
+          timeout: 10000,
+        },
+      )
+      .toBe(count);
+  }
 }

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

@@ -20,8 +20,6 @@ widgetTest(
       "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
     );
 
-    test.slow(); // Triples the timeout
-
     const { brooks, whistler } = asWidget;
 
     await TestHelpers.startCallInCurrentRoom(brooks.page, true);
@@ -43,7 +41,7 @@ widgetTest(
     ).toBeVisible();
 
     await expect(whistler.page.getByText("Incoming voice call")).toBeVisible();
-    await whistler.page.getByRole("button", { name: "Accept" }).click();
+    await whistler.page.getByRole("button", { name: "Join" }).click();
 
     await expect(
       whistler.page.locator('iframe[title="Element Call"]'),
@@ -113,8 +111,6 @@ widgetTest(
       "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
     );
 
-    test.slow(); // Triples the timeout
-
     const { brooks, whistler } = asWidget;
 
     await TestHelpers.startCallInCurrentRoom(brooks.page, false);
@@ -136,7 +132,7 @@ widgetTest(
     ).toBeVisible();
 
     await expect(whistler.page.getByText("Incoming video call")).toBeVisible();
-    await whistler.page.getByRole("button", { name: "Accept" }).click();
+    await whistler.page.getByRole("button", { name: "Join" }).click();
 
     await expect(
       whistler.page.locator('iframe[title="Element Call"]'),
@@ -200,8 +196,6 @@ widgetTest(
       "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
     );
 
-    test.slow(); // Triples the timeout
-
     const { brooks, whistler } = asWidget;
 
     await TestHelpers.startCallInCurrentRoom(brooks.page, false);

renovate.json

@@ -49,6 +49,11 @@
       "matchDepNames": ["vaul"],
       "prHeader": "Please review modals on mobile for visual regressions."
     },
+    {
+      "groupName": "PostHog",
+      "matchDepNames": ["posthog-js"],
+      "prHeader": "Please ensure that all analytics data is still appropriately sanitized."
+    },
     {
       "groupName": "embedded package dependencies",
       "matchFileNames": ["embedded/**/*"]
@@ -59,7 +64,7 @@
     }
   ],
   "semanticCommits": "disabled",
-  "ignoreDeps": ["posthog-js", "eslint-plugin-matrix-org"],
+  "ignoreDeps": ["eslint-plugin-matrix-org"],
   "vulnerabilityAlerts": {
     "schedule": ["at any time"],
     "prHourlyLimit": 0,

src/AppBar.module.css

@@ -1,10 +1,25 @@
 .bar {
-  block-size: 64px;
   flex-shrink: 0;
+  position: relative;
+}
+
+/* Pseudo-element for the gradient background */
+.bar::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  /* Extend the gradient beyond the bottom of the header for readability */
+  inset-block: -24px;
+  z-index: var(--call-view-header-footer-layer);
+  background: linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0) 0%,
+    var(--cpd-color-bg-canvas-default) 100%
+  );
 }
 
 .bar > header {
-  position: absolute;
+  position: sticky;
   inset-inline: 0;
   inset-block-start: 0;
   block-size: 64px;

src/Header.module.css

@@ -12,7 +12,9 @@ Please see LICENSE in the repository root for full details.
   align-items: center;
   user-select: none;
   flex-shrink: 0;
-  padding-inline: var(--inline-content-inset);
+  padding-left: var(--content-inset-left);
+  padding-right: var(--content-inset-right);
+  padding-top: env(safe-area-inset-top);
 }
 
 .nav {

src/Modal.tsx

@@ -92,6 +92,11 @@ export const Modal: FC<Props> = ({
     return (
       <Drawer.Root
         open={open}
+        // This autofocus is a custom vault property and not the
+        // standard HTML autofocus attribute.
+        // It makes the Drawer.Root behave like the `DialogRoot`
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus
         onOpenChange={onOpenChange}
         dismissible={onDismiss !== undefined}
       >

src/RTCConnectionStats.tsx

@@ -87,7 +87,7 @@ export const RTCConnectionStats: FC<Props> = ({
         <div>
           <Button
             onClick={() => showFullModal("audio")}
-            size="sm"
+            size="md"
             kind="tertiary"
             Icon={MicOnSolidIcon}
           >
@@ -103,7 +103,7 @@ export const RTCConnectionStats: FC<Props> = ({
         <div>
           <Button
             onClick={() => showFullModal("video")}
-            size="sm"
+            size="md"
             kind="tertiary"
             Icon={VideoCallSolidIcon}
           >

src/analytics/PosthogAnalytics.test.ts

@@ -14,8 +14,13 @@ import {
   beforeAll,
   afterAll,
 } from "vitest";
+import posthog, { type CaptureResult } from "posthog-js";
 
-import { PosthogAnalytics } from "./PosthogAnalytics";
+import {
+  Anonymity,
+  santizeSensitiveData,
+  PosthogAnalytics,
+} from "./PosthogAnalytics";
 import { mockConfig } from "../utils/test";
 
 describe("PosthogAnalytics", () => {
@@ -88,4 +93,154 @@ describe("PosthogAnalytics", () => {
       expect(PosthogAnalytics.instance.isEnabled()).toBe(true);
     });
   });
+
+  describe("applyPrivacyFilters", () => {
+    const makeEvent = (properties: Record<string, unknown>): CaptureResult =>
+      ({ event: "anyEvent", properties }) as unknown as CaptureResult;
+
+    it("drops $initial_person_info regardless of anonymity", () => {
+      const out = santizeSensitiveData(
+        makeEvent({
+          $current_url: "https://call.example.com/some/private/path",
+          $initial_person_info: {
+            r: "https://example.com/referrer",
+            u: "https://call.example.com/some/private/path",
+          },
+        }),
+        Anonymity.Pseudonymous,
+      );
+      expect(out?.properties).not.toHaveProperty("$initial_person_info");
+    });
+
+    it("strips hash from $current_url", () => {
+      const out = santizeSensitiveData(
+        makeEvent({ $current_url: "https://call.example.com/#/x/y/z" }),
+        Anonymity.Pseudonymous,
+      );
+      expect(out?.properties["$current_url"]).not.toContain("/x/y/z");
+    });
+
+    it("nulls referrer and device fields when anonymous", () => {
+      const out = santizeSensitiveData(
+        makeEvent({
+          $current_url: "https://x/y",
+          $referrer: "https://leaky",
+          $initial_referrer: "https://leaky-too",
+          $device_id: "uuid",
+        }),
+        Anonymity.Anonymous,
+      );
+      expect(out?.properties["$referrer"]).toBeUndefined();
+      expect(out?.properties["$initial_referrer"]).toBeUndefined();
+      expect(out?.properties["$device_id"]).toBeUndefined();
+    });
+
+    it("passes null events through unchanged", () => {
+      expect(santizeSensitiveData(null, Anonymity.Pseudonymous)).toBeNull();
+    });
+
+    it("strips URL fields nested inside $set_once", () => {
+      const secretUrl =
+        "https://call.example.com/room/#/?password=hunter2&roomId=abc";
+      const out = santizeSensitiveData(
+        makeEvent({
+          $current_url: "https://call.example.com/x",
+          $set_once: {
+            $current_url: secretUrl,
+            $initial_current_url: secretUrl,
+            $session_entry_url: secretUrl,
+            $initial_person_info: { r: "x", u: secretUrl },
+          },
+        }),
+        Anonymity.Pseudonymous,
+      );
+
+      const setOnce = out?.properties["$set_once"] as Record<string, unknown>;
+      expect(setOnce["$current_url"]).not.toContain("password");
+      expect(setOnce["$initial_current_url"]).not.toContain("password");
+      expect(setOnce).not.toHaveProperty("$session_entry_url");
+      expect(setOnce).not.toHaveProperty("$initial_person_info");
+    });
+
+    it("strips URL fields nested inside $set", () => {
+      const secretUrl =
+        "https://call.example.com/room/#/?password=hunter2&roomId=abc";
+      const out = santizeSensitiveData(
+        makeEvent({
+          $current_url: "https://call.example.com/x",
+          $set: {
+            $current_url: secretUrl,
+            $session_entry_url: secretUrl,
+          },
+        }),
+        Anonymity.Pseudonymous,
+      );
+
+      const set = out?.properties["$set"] as Record<string, unknown>;
+      expect(set["$current_url"]).not.toContain("password");
+      expect(set).not.toHaveProperty("$session_entry_url");
+    });
+
+    it("nulls referrer fields inside $set_once when anonymous", () => {
+      const out = santizeSensitiveData(
+        makeEvent({
+          $current_url: "https://x/y",
+          $set_once: {
+            $initial_referrer: "https://leaky",
+            $initial_referring_domain: "leaky",
+          },
+        }),
+        Anonymity.Anonymous,
+      );
+
+      const setOnce = out?.properties["$set_once"] as Record<string, unknown>;
+      expect(setOnce["$initial_referrer"]).toBeUndefined();
+      expect(setOnce["$initial_referring_domain"]).toBeUndefined();
+    });
+  });
+
+  // Verifies that applyPrivacyFilters is actually wired into posthog.init via
+  // the before_send hook — guards against typos in the option name or future
+  // posthog-js bumps renaming/removing the hook. The filter logic itself is
+  // covered by the applyPrivacyFilters block above.
+  describe("posthog.init wiring", () => {
+    beforeAll(() => {
+      vi.stubEnv("VITE_PACKAGE", "full");
+    });
+
+    beforeEach(() => {
+      mockConfig({
+        posthog: {
+          api_host: "https://api.example.com.localhost",
+          api_key: "api_key",
+        },
+      });
+      PosthogAnalytics.resetInstance();
+    });
+
+    afterAll(() => {
+      vi.unstubAllEnvs();
+    });
+
+    it("passes events through the privacy filter via before_send", () => {
+      const initSpy = vi.spyOn(posthog, "init");
+      expect(PosthogAnalytics.instance.isEnabled()).toBe(true);
+
+      const beforeSend = initSpy.mock.calls[0][1]?.before_send;
+      expect(beforeSend).toBeInstanceOf(Function);
+
+      const event = {
+        event: "anyEvent",
+        properties: {
+          $current_url: "https://call.example.com/x/y",
+          $initial_person_info: { r: "x" },
+        },
+      } as unknown as CaptureResult;
+
+      const out = (beforeSend as (e: CaptureResult) => CaptureResult | null)(
+        event,
+      );
+      expect(out?.properties).not.toHaveProperty("$initial_person_info");
+    });
+  });
 });

src/analytics/PosthogAnalytics.ts

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import posthog, {
   type CaptureOptions,
+  type CaptureResult,
   type PostHog,
   type Properties,
 } from "posthog-js";
@@ -26,6 +27,7 @@ import {
   QualitySurveyEventTracker,
   CallDisconnectedEventTracker,
   CallConnectDurationTracker,
+  CallReconnectingTracker,
 } from "./PosthogEvents";
 import { Config } from "../config/Config";
 import { getUrlParams } from "../UrlParams";
@@ -64,6 +66,73 @@ export enum RegistrationType {
   Registered,
 }
 
+// Sanitize URL / referrer / device fields on a single posthog properties bag.
+// Applied to event.properties and to the person-profile bags ($set / $set_once),
+// since posthog mirrors the same URL fields into those.
+function stripSensitiveFields(
+  obj: Properties | undefined,
+  anonymity: Anonymity,
+): void {
+  if (!obj) return;
+
+  if (anonymity === Anonymity.Anonymous) {
+    // drop referrer information for anonymous users
+    delete obj["$referrer"];
+    delete obj["$referring_domain"];
+    delete obj["$initial_referrer"];
+    delete obj["$initial_referring_domain"];
+
+    // drop device ID, which is a UUID persisted in local storage
+    delete obj["$device_id"];
+  }
+
+  // the url leaks a lot of private data like the call name or the user
+  // (room password / room ID can land in the hash/query). Strip down to
+  // scheme + host so we still get host-level insights (develop / main / sfu).
+  for (const key of ["$current_url", "$initial_current_url"]) {
+    if (typeof obj[key] === "string") {
+      try {
+        const url = new URL(obj[key]);
+        obj[key] = url.protocol + "//" + url.hostname + url.pathname;
+      } catch {
+        obj[key] = null;
+      }
+    }
+  }
+
+  // $session_entry_url carries the full untrimmed URL; $initial_person_info
+  // bundles initial referrer + URL into a nested object that bypasses the
+  // per-key strips above. Drop both.
+  delete obj["$session_entry_url"];
+  delete obj["$initial_person_info"];
+}
+
+/**
+ * Strip PII from posthog's built-in properties (URL, referrer fields,
+ * device ID, $initial_person_info, $session_entry_url) before events leave
+ * the client. Also applied to the person-profile bags ($set / $set_once),
+ * which mirror the same URL fields.
+ * See src/utils/event-utils.ts in posthog-js (getEventProperties, getPersonInfo)
+ * for the list of properties posthog sets automatically.
+ */
+export function santizeSensitiveData(
+  event: CaptureResult | null,
+  anonymity: Anonymity,
+): CaptureResult | null {
+  if (event === null) return null;
+
+  stripSensitiveFields(event.properties, anonymity);
+  // posthog can stash person-profile updates either at the top level
+  // of CaptureResult or nested inside properties depending on the pipeline
+  // stage; clean both spots so nothing slips through.
+  stripSensitiveFields(event.$set, anonymity);
+  stripSensitiveFields(event.$set_once, anonymity);
+  stripSensitiveFields(event.properties["$set"], anonymity);
+  stripSensitiveFields(event.properties["$set_once"], anonymity);
+
+  return event;
+}
+
 interface PlatformProperties {
   appVersion: string;
   matrixBackend: "embedded" | "jssdk";
@@ -128,13 +197,16 @@ export class PosthogAnalytics {
     }
 
     if (apiKey && apiHost) {
+      const beforeSend = (event: CaptureResult | null): CaptureResult | null =>
+        santizeSensitiveData(event, this.anonymity);
       this.posthog.init(apiKey, {
         api_host: apiHost,
         autocapture: false,
         mask_all_text: true,
         mask_all_element_attributes: true,
+        mask_personal_data_properties: true,
         capture_pageview: false,
-        sanitize_properties: this.sanitizeProperties,
+        before_send: beforeSend,
         respect_dnt: true,
         advanced_disable_decide: true,
       });
@@ -147,34 +219,6 @@ export class PosthogAnalytics {
     }
   }
 
-  private sanitizeProperties = (
-    properties: Properties,
-    _eventName: string,
-  ): Properties => {
-    // Callback from posthog to sanitize properties before sending them to the server.
-    // Here we sanitize posthog's built in properties which leak PII e.g. url reporting.
-    // See utils.js _.info.properties in posthog-js.
-
-    if (this.anonymity == Anonymity.Anonymous) {
-      // drop referrer information for anonymous users
-      properties["$referrer"] = null;
-      properties["$referring_domain"] = null;
-      properties["$initial_referrer"] = null;
-      properties["$initial_referring_domain"] = null;
-
-      // drop device ID, which is a UUID persisted in local storage
-      properties["$device_id"] = null;
-    }
-    // the url leaks a lot of private data like the call name or the user.
-    // Its stripped down to the bare minimum to only give insights about the host (develop, main or sfu)
-    properties["$current_url"] = (properties["$current_url"] as string)
-      .split("/")
-      .slice(0, 3)
-      .join("");
-
-    return properties;
-  };
-
   private registerSuperProperties(properties: Properties): void {
     if (this.enabled) {
       this.posthog.register(properties);
@@ -421,4 +465,5 @@ export class PosthogAnalytics {
   public eventQualitySurvey = new QualitySurveyEventTracker();
   public eventCallDisconnected = new CallDisconnectedEventTracker();
   public eventCallConnectDuration = new CallConnectDurationTracker();
+  public eventCallReconnecting = new CallReconnectingTracker();
 }

src/analytics/PosthogEvents.test.ts

@@ -18,7 +18,11 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 
 import { PosthogAnalytics } from "./PosthogAnalytics";
-import { CallEndedTracker } from "./PosthogEvents";
+import {
+  CallEndedTracker,
+  CallReconnectingTracker,
+  type CallReconnectingReason,
+} from "./PosthogEvents";
 import { mockConfig } from "../utils/test";
 
 const defaultCounters = {
@@ -89,6 +93,11 @@ describe("CallEnded", () => {
         roomEventEncryptionKeysSent: 10,
         roomEventEncryptionKeysReceived: 5,
         roomEventEncryptionKeysReceivedAverageAge: 100,
+        callReconnectingCount: 0,
+        callReconnectingCountSync: 0,
+        callReconnectingCountMembership: 0,
+        callReconnectingCountProbablyLeft: 0,
+        callReconnectingCountLivekit: 0,
       },
       { send_instantly: true },
     );
@@ -159,4 +168,70 @@ describe("CallEnded", () => {
       { send_instantly: false },
     );
   });
+
+  it("includes per-reason reconnecting counts in CallEnded", () => {
+    const tracker = new CallEndedTracker();
+    const mockSession = createMockRtcSession();
+
+    tracker.cacheStartCall(new Date());
+    tracker.cacheReconnecting("sync");
+    tracker.cacheReconnecting("sync");
+    tracker.cacheReconnecting("livekit");
+    tracker.cacheReconnecting("membership");
+    tracker.track("test-call-id", 1, false, mockSession);
+
+    expect(PosthogAnalytics.instance.trackEvent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        callReconnectingCount: 4,
+        callReconnectingCountSync: 2,
+        callReconnectingCountMembership: 1,
+        callReconnectingCountProbablyLeft: 0,
+        callReconnectingCountLivekit: 1,
+      }),
+      expect.anything(),
+    );
+  });
+});
+
+describe("CallReconnecting", () => {
+  beforeAll(() => {
+    mockConfig();
+  });
+
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.spyOn(PosthogAnalytics.instance, "trackEvent").mockImplementation(
+      () => {},
+    );
+  });
+
+  afterAll(() => {
+    PosthogAnalytics.resetInstance();
+  });
+
+  it("tracks event with correct shape", () => {
+    const tracker = new CallReconnectingTracker();
+    tracker.track("!room:example.org", "sync", 3.5);
+
+    expect(PosthogAnalytics.instance.trackEvent).toHaveBeenCalledWith({
+      eventName: "CallReconnecting",
+      callId: "!room:example.org",
+      reason: "sync",
+      reconnectDuration: 3.5,
+    });
+  });
+
+  it.each([
+    "sync",
+    "membership",
+    "probablyLeft",
+    "livekit",
+  ] as CallReconnectingReason[])("tracks reason %s correctly", (reason) => {
+    const tracker = new CallReconnectingTracker();
+    tracker.track("!room:example.org", reason, 1.0);
+
+    expect(PosthogAnalytics.instance.trackEvent).toHaveBeenCalledWith(
+      expect.objectContaining({ reason, reconnectDuration: 1.0 }),
+    );
+  });
 });

src/analytics/PosthogEvents.ts

@@ -17,6 +17,7 @@ import {
 
 interface CallEnded extends IPosthogEvent {
   eventName: "CallEnded";
+  // the callId posthog key is essentially a Matrix roomId
   callId: string;
   callParticipantsOnLeave: number;
   callParticipantsMax: number;
@@ -24,16 +25,43 @@ interface CallEnded extends IPosthogEvent {
   roomEventEncryptionKeysSent: number;
   roomEventEncryptionKeysReceived: number;
   roomEventEncryptionKeysReceivedAverageAge: number;
+  callReconnectingCount: number;
+  callReconnectingCountSync: number;
+  callReconnectingCountMembership: number;
+  callReconnectingCountProbablyLeft: number;
+  callReconnectingCountLivekit: number;
 }
 
 export class CallEndedTracker {
-  private cache: { startTime?: Date; maxParticipantsCount: number } = {
+  private cache: {
+    startTime?: Date;
+    maxParticipantsCount: number;
+    reconnectingCount: number;
+    reconnectingCountByReason: Record<CallReconnectingReason, number>;
+  } = {
     startTime: undefined,
     maxParticipantsCount: 0,
+    reconnectingCount: 0,
+    reconnectingCountByReason: {
+      sync: 0,
+      membership: 0,
+      probablyLeft: 0,
+      livekit: 0,
+    },
   };
 
   public cacheStartCall(time: Date): void {
-    this.cache.startTime = time;
+    this.cache = {
+      startTime: time,
+      maxParticipantsCount: 0,
+      reconnectingCount: 0,
+      reconnectingCountByReason: {
+        sync: 0,
+        membership: 0,
+        probablyLeft: 0,
+        livekit: 0,
+      },
+    };
   }
 
   public cacheParticipantCountChanged(count: number): void {
@@ -43,6 +71,11 @@ export class CallEndedTracker {
     );
   }
 
+  public cacheReconnecting(reason: CallReconnectingReason): void {
+    this.cache.reconnectingCount++;
+    this.cache.reconnectingCountByReason[reason]++;
+  }
+
   public track(
     callId: string,
     callParticipantsNow: number,
@@ -67,6 +100,14 @@ export class CallEndedTracker {
                   .roomEventEncryptionKeysReceivedTotalAge /
                 rtcSession.statistics.counters.roomEventEncryptionKeysReceived
               : 0,
+          callReconnectingCount: this.cache.reconnectingCount,
+          callReconnectingCountSync: this.cache.reconnectingCountByReason.sync,
+          callReconnectingCountMembership:
+            this.cache.reconnectingCountByReason.membership,
+          callReconnectingCountProbablyLeft:
+            this.cache.reconnectingCountByReason.probablyLeft,
+          callReconnectingCountLivekit:
+            this.cache.reconnectingCountByReason.livekit,
         },
         { send_instantly: sendInstantly },
       );
@@ -80,6 +121,7 @@ export class CallEndedTracker {
 
 interface CallStarted extends IPosthogEvent {
   eventName: "CallStarted";
+  // the callId posthog key is essentially a Matrix roomId
   callId: string;
 }
 
@@ -140,6 +182,7 @@ export class LoginTracker {
 interface MuteMicrophone {
   eventName: "MuteMicrophone";
   targetMuteState: "mute" | "unmute";
+  // the callId posthog key is essentially a Matrix roomId
   callId: string;
 }
 
@@ -156,6 +199,7 @@ export class MuteMicrophoneTracker {
 interface MuteCamera {
   eventName: "MuteCamera";
   targetMuteState: "mute" | "unmute";
+  // the callId posthog key is essentially a Matrix roomId
   callId: string;
 }
 
@@ -171,6 +215,7 @@ export class MuteCameraTracker {
 
 interface UndecryptableToDeviceEvent {
   eventName: "UndecryptableToDeviceEvent";
+  // the callId posthog key is essentially a Matrix roomId
   callId: string;
 }
 
@@ -185,6 +230,7 @@ export class UndecryptableToDeviceEventTracker {
 
 interface QualitySurveyEvent {
   eventName: "QualitySurvey";
+  // the callId posthog key is essentially a Matrix roomId
   callId: string;
   feedbackText: string;
   stars: number;
@@ -249,3 +295,32 @@ export class CallConnectDurationTracker {
       );
   }
 }
+
+export type CallReconnectingReason =
+  | "sync"
+  | "membership"
+  | "probablyLeft"
+  | "livekit";
+
+interface CallReconnecting extends IPosthogEvent {
+  eventName: "CallReconnecting";
+  // the callId posthog key is essentially a Matrix roomId
+  callId: string;
+  reason: CallReconnectingReason;
+  reconnectDuration: number;
+}
+
+export class CallReconnectingTracker {
+  public track(
+    callId: string,
+    reason: CallReconnectingReason,
+    reconnectDuration: number,
+  ): void {
+    PosthogAnalytics.instance.trackEvent<CallReconnecting>({
+      eventName: "CallReconnecting",
+      callId,
+      reason,
+      reconnectDuration,
+    });
+  }
+}

src/button/Button.tsx

@@ -32,7 +32,7 @@ import { platform } from "../Platform";
 
 interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
-  size?: "sm" | "lg";
+  size?: "md" | "lg";
 }
 
 export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
@@ -58,7 +58,7 @@ export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
 
 interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
-  size?: "sm" | "lg";
+  size?: "md" | "lg";
 }
 
 export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
@@ -84,7 +84,7 @@ export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
 
 interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
-  size: "sm" | "lg";
+  size: "md" | "lg";
 }
 
 export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
@@ -111,7 +111,7 @@ export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
 };
 
 interface EndCallButtonProps extends ComponentPropsWithoutRef<"button"> {
-  size?: "sm" | "lg";
+  size?: "md" | "lg";
 }
 
 export const EndCallButton: FC<EndCallButtonProps> = ({
@@ -134,7 +134,7 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
 };
 
 interface LoudspeakerButtonProps extends ComponentPropsWithoutRef<"button"> {
-  size?: "sm" | "lg";
+  size?: "md" | "lg";
   loudspeakerModeEnabled: boolean;
 }
 export const LoudspeakerButton: FC<LoudspeakerButtonProps> = ({
@@ -195,7 +195,7 @@ export const SettingsIconButton: FC<SettingsIconButtonProps> = ({
 };
 
 interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
-  size?: "sm" | "lg";
+  size?: "md" | "lg";
   /** If this buttons should be setup to be used in the app bar */
   showForScreenWidth?: "wide" | "narrow";
 }

src/button/InviteButton.tsx

@@ -15,7 +15,7 @@ export const InviteButton: FC<
 > = (props) => {
   const { t } = useTranslation();
   return (
-    <Button kind="secondary" size="sm" Icon={UserAddIcon} {...props}>
+    <Button kind="secondary" size="md" Icon={UserAddIcon} {...props}>
       {t("action.invite")}
     </Button>
   );

src/button/ReactionToggleButton.tsx

@@ -173,7 +173,7 @@ export interface ReactionData {
 interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
   reactionData: ReactionData;
   identifier: string;
-  size?: "sm" | "lg";
+  size?: "md" | "lg";
   /** List of participants raising their hand */
 }
 

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

@@ -10,7 +10,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby="_r_bb_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -44,7 +44,7 @@ exports[`Can fully expand emoji picker 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby="_r_7m_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -75,7 +75,7 @@ exports[`Can lower hand 1`] = `
     aria-expanded="false"
     aria-haspopup="true"
     aria-labelledby="_r_36_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="secondary"
     data-size="lg"
     role="button"
@@ -109,7 +109,7 @@ exports[`Can open menu 1`] = `
     aria-expanded="true"
     aria-haspopup="true"
     aria-labelledby="_r_0_"
-    class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+    class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -140,7 +140,7 @@ exports[`Can raise hand 1`] = `
     aria-expanded="false"
     aria-haspopup="true"
     aria-labelledby="_r_1j_"
-    class="_button_13vu4_8 raisedButton _has-icon_13vu4_60 _icon-only_13vu4_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

@@ -14,7 +14,11 @@ Please see LICENSE in the repository root for full details.
   grid-template-areas: ". buttons layout";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding: var(--cpd-space-10x) var(--cpd-space-6x);
+  /* Ensure that footer lies within the safe area */
+  padding-left: calc(env(safe-area-inset-left) + var(--cpd-space-6x));
+  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%,
@@ -118,13 +122,15 @@ Once we exceed 500 we hide everything except the buttons.
 
 @media (max-height: 800px) {
   .footer {
-    padding-block: var(--cpd-space-8x);
+    padding-block: var(--cpd-space-8x)
+      calc(env(safe-area-inset-bottom) + var(--cpd-space-8x));
   }
 }
 
 @media (max-height: 400px) {
   .footer {
-    padding-block: var(--cpd-space-4x);
+    padding-block: var(--cpd-space-4x)
+      calc(env(safe-area-inset-bottom) + var(--cpd-space-4x));
   }
 }
 
@@ -140,7 +146,9 @@ Once we exceed 500 we hide everything except the buttons.
     }
     .footer {
       padding-block-start: var(--cpd-space-3x);
-      padding-block-end: var(--cpd-space-2x);
+      padding-block-end: calc(
+        env(safe-area-inset-bottom) + var(--cpd-space-2x)
+      );
     }
   }
 }

src/components/CallFooter.stories.tsx

@@ -5,18 +5,41 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { fn } from "storybook/test";
+import { expect, fn, userEvent, within } from "storybook/test";
 import { BehaviorSubject } from "rxjs";
-import { type ReactNode } from "react";
+import { type JSX, type ReactNode } from "react";
 import { Link } from "@vector-im/compound-web";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CallFooter, type FooterProps } from "./CallFooter";
+import { CallFooter, type FooterSnapshot } from "./CallFooter";
 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";
+// consts for tests
+const reactionIdentifier = "@user:example.com:DEVICE";
+const reactionData = {
+  handsRaised$: new BehaviorSubject({}),
+  reactions$: new BehaviorSubject({}),
+};
 
-function CallFooterWrapper(props: FooterProps): ReactNode {
+/**
+ * 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)
+ *  - 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.
+ * `children` is used for the "Back to Recents" button in the lobby stories, but can be used for anything really.
+ * @returns A component that renders the CallFooter based on primitive snapshot params (not a view model). Which is what we want for storybook.
+ */
+function CallFooterStoryWrapper({
+  children,
+  ...vmSnapshot
+}: FooterSnapshot & {
+  children?: false | JSX.Element | JSX.Element[] | undefined;
+}): ReactNode {
+  const vm = useStaticViewModel(vmSnapshot);
   return (
     <div className={inCallViewStyles.inRoom}>
       <ReactionsSenderContext
@@ -26,33 +49,28 @@ function CallFooterWrapper(props: FooterProps): ReactNode {
           sendReaction: async (reaction: ReactionOption) => Promise.resolve(),
         }}
       >
-        <CallFooter {...props} />
+        <CallFooter vm={vm} />
       </ReactionsSenderContext>
     </div>
   );
 }
 
 const meta = {
-  component: CallFooterWrapper,
-} satisfies Meta<typeof CallFooterWrapper>;
+  component: CallFooterStoryWrapper,
+} satisfies Meta<typeof CallFooterStoryWrapper>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const reactionIdentifier = "@user:example.com:DEVICE";
-const reactionData = {
-  handsRaised$: new BehaviorSubject({}),
-  reactions$: new BehaviorSubject({}),
-};
-
 const fnArgType = {
   control: { type: "select" as const },
   options: ["MockedCallback", "undefined"],
   mapping: { MockedCallback: fn(), undefined: undefined },
 };
+
 export const Default: Story = {
   args: {
-    hideLogo: true,
+    showLogo: false,
     layoutMode: "grid",
     audioEnabled: true,
     videoEnabled: true,
@@ -61,13 +79,34 @@ export const Default: Story = {
     toggleAudio: fn(),
     toggleVideo: fn(),
     toggleScreenSharing: fn(),
+    toggleBlur: fn(),
+    videoBlurEnabled: true,
     hangup: fn(),
+    buttonSize: "lg",
+    showFooter: true,
+    hideControls: false,
+    asOverlay: false,
+    sharingScreen: false,
+    audioOutputSwitcher: undefined,
+    reactionIdentifier: undefined,
+    reactionData: undefined,
+    debugTileLayout: false,
+    tileStoreGeneration: undefined,
+    audioOptions: [],
+    videoOptions: [],
+    selectedAudio: undefined,
+    selectedVideo: undefined,
+    selectAudioButtonOption: undefined,
+    selectVideoButtonOption: undefined,
   },
   parameters: {
     layout: "fullscreen",
   },
   argTypes: {
-    layoutMode: { control: "radio", options: ["grid", "spotlight"] },
+    layoutMode: {
+      control: "radio",
+      options: ["grid", "spotlight"] satisfies GridMode[],
+    },
     audioOutputSwitcher: {
       control: "select",
       options: ["NoOutputCallback", "speaker", "earpiece"],
@@ -88,11 +127,29 @@ export const Default: Story = {
   },
 };
 
+export const WithAudioAndVideoOptions: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    audioEnabled: false,
+    videoEnabled: true,
+    audioOptions: [
+      { label: { type: "name", name: "Microphone 1" }, id: "1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "2" },
+    ],
+    videoOptions: [
+      { label: { type: "name", name: "Camera 1" }, id: "1" },
+      { label: { type: "name", name: "Camera 2" }, id: "2" },
+    ],
+    selectedAudio: "2",
+    selectedVideo: "1",
+  },
+};
 export const WithLogo: Story = {
   ...Default,
   args: {
     ...Default.args,
-    hideLogo: false,
+    showLogo: true,
   },
 };
 
@@ -103,6 +160,51 @@ export const AudioVideoEnabled: Story = {
     audioEnabled: true,
     videoEnabled: true,
   },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const spotlightRadio = canvas.getByRole("radio", { name: "Spotlight" });
+    await userEvent.click(spotlightRadio);
+    await expect(args.setLayoutMode).toHaveBeenCalledWith("spotlight");
+
+    const micButtonMute = canvas.getByRole("switch", {
+      name: "Mute microphone",
+    });
+    await userEvent.click(micButtonMute);
+    await expect(args.toggleAudio).toHaveBeenCalled();
+
+    const videoMuteButton = canvas.getByRole("switch", {
+      name: "Stop video",
+    });
+    await userEvent.click(videoMuteButton);
+    await expect(args.toggleVideo).toHaveBeenCalled();
+    const screenShare = canvas.getByRole("switch", {
+      name: "Share screen",
+    });
+    await userEvent.click(screenShare);
+    await expect(args.toggleScreenSharing).toHaveBeenCalled();
+    const endCall = canvas.getByRole("button", {
+      name: "End call",
+    });
+    await userEvent.click(endCall);
+    await expect(args.hangup).toHaveBeenCalled();
+  },
+};
+
+/** used to test switching to grid mode */
+export const SpotlightMode: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    layoutMode: "spotlight",
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const spotlightRadio = canvas.getByRole("radio", { name: "Grid" });
+    await userEvent.click(spotlightRadio);
+    await expect(args.setLayoutMode).toHaveBeenCalledWith("grid");
+  },
 };
 
 export const WithAudioOutputSpeaker: Story = {
@@ -132,7 +234,37 @@ export const Pip: Story = {
   ...Default,
   args: {
     ...Default.args,
-    asPip: true,
+    buttonSize: "md",
+    layoutMode: undefined,
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(
+      canvas.queryByRole("radio", { name: "Spotlight" }),
+    ).not.toBeInTheDocument();
+
+    const micButtonMute = canvas.getByRole("switch", {
+      name: "Mute microphone",
+    });
+    await userEvent.click(micButtonMute);
+    await expect(args.toggleAudio).toHaveBeenCalled();
+
+    const videoMuteButton = canvas.getByRole("switch", {
+      name: "Stop video",
+    });
+    await userEvent.click(videoMuteButton);
+    await expect(args.toggleVideo).toHaveBeenCalled();
+    const screenShare = canvas.getByRole("switch", {
+      name: "Share screen",
+    });
+    await userEvent.click(screenShare);
+    await expect(args.toggleScreenSharing).toHaveBeenCalled();
+    const endCall = canvas.getByRole("button", {
+      name: "End call",
+    });
+    await userEvent.click(endCall);
+    await expect(args.hangup).toHaveBeenCalled();
   },
 };
 export const NoControlsWithLogo: Story = {
@@ -140,7 +272,7 @@ export const NoControlsWithLogo: Story = {
   args: {
     ...Default.args,
     hideControls: true,
-    hideLogo: false,
+    showLogo: true,
   },
 };
 
@@ -157,6 +289,8 @@ export const UnavailableMediaDevices: Story = {
   ...Default,
   args: {
     ...Default.args,
+    audioEnabled: false,
+    videoEnabled: false,
     toggleAudio: undefined,
     toggleVideo: undefined,
     audioOutputSwitcher: undefined,
@@ -167,7 +301,7 @@ export const MobileLayout: Story = {
   ...Default,
   args: {
     ...Default.args,
-    hideLogo: true,
+    showLogo: false,
 
     audioOutputSwitcher: { targetOutput: "speaker", switch: fn() },
   },
@@ -183,7 +317,7 @@ export const Lobby: Story = {
   ...Default,
   args: {
     ...Default.args,
-    hideLogo: true,
+    showLogo: false,
     openSettings: undefined,
     setLayoutMode: undefined,
     toggleScreenSharing: undefined,
@@ -197,7 +331,7 @@ export const LobbyMobile: Story = {
   ...Default,
   args: {
     ...Default.args,
-    hideLogo: true,
+    showLogo: false,
 
     setLayoutMode: undefined,
     toggleScreenSharing: undefined,
@@ -215,7 +349,7 @@ export const LobbyRecentButton: Story = {
   args: {
     ...Default.args,
     children: <Link>Back To Recents</Link>,
-    hideLogo: true,
+    showLogo: false,
     setLayoutMode: undefined,
     toggleScreenSharing: undefined,
   },
@@ -229,7 +363,7 @@ export const LobbyRecentButtonMobile: Story = {
   args: {
     ...Default.args,
     children: <Link>Back To Recents</Link>,
-    hideLogo: true,
+    showLogo: false,
     setLayoutMode: undefined,
     toggleScreenSharing: undefined,
   },

src/components/CallFooter.tsx

@@ -7,7 +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 { BehaviorSubject } from "rxjs";
+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";
@@ -23,93 +28,128 @@ import {
   type ReactionData,
 } from "../button";
 import styles from "./CallFooter.module.css";
-import { LayoutToggle } from "../room/LayoutToggle";
 import { type GridMode } from "../state/CallViewModel/CallViewModel";
+import {
+  MediaMuteAndSwitchButton,
+  type MenuOptions,
+} from "./MediaMuteAndSwitchButton";
+import { type ViewModel } from "../state/ViewModel";
+import { useBehavior } from "../useBehavior";
 
 export interface AudioOutputSwitcher {
   targetOutput: string;
   switch: () => void;
 }
 
-export interface FooterProps {
-  ref?: Ref<HTMLDivElement>;
-  /** Children will only be visible if the component is wider than 5*/
-  children?: JSX.Element | JSX.Element[] | false;
-
-  audioEnabled: boolean;
+/**
+ * The Snapshot combines all fields required to populate the view.
+ *
+ * It is a combination of Actions and State.
+ * All Actions and State will be wrappen in behaviors.
+ * This has the advantage, that actions can mutate.
+ * (example: a device gets disconnected, the swicht action is not possible anymore, the actions becomes undefined)
+ * With it being reactive we can use the existance of the action to update the rendering without
+ * requiring additional state.
+ *
+ * Comment: It might not make sense to seperate the two interfaces. Hence the seperation
+ * just happens on the syntax level with the `type = ... & ...` notation.
+ */
+export type FooterSnapshot = FooterActions & FooterState;
+export interface FooterActions {
   /** Also controls if the audioMute button is disabled */
   toggleAudio: (() => void) | undefined;
-  videoEnabled: boolean;
   /** 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;
+  /** Also controls if the hangup button is visible */
+  hangup: (() => void) | undefined;
+}
+// we do not use any ? optional properties so that the vm type is including all fields.
+export interface FooterState {
+  audioEnabled: boolean;
+  videoEnabled: boolean;
+  videoBlurEnabled: boolean;
+  showFooter: boolean;
 
   /* This is needed for WindowMode = "flat" */
-  hideControls?: boolean;
-  /** hide the entire footer*/
-  hidden?: boolean;
-  /** Pip controls buttonSize and hides: settings button, layout switcher and logo */
-  asPip?: boolean;
+  hideControls: boolean;
   /** The footer should be used as an overlay.
-   * (Over the Call Grid) This saves spaces on small screens.*/
-  asOverlay?: boolean;
+   * (Over the Call Grid) This saves spaces on small screens. */
+  asOverlay: boolean;
 
-  layoutMode?: GridMode;
-  /** Also controls if the layout button is visible */
-  setLayoutMode?: (mode: GridMode) => void;
+  buttonSize: "md" | "lg";
+  showLogo: boolean;
 
-  sharingScreen?: boolean;
-  toggleScreenSharing?: () => void;
+  layoutMode: GridMode | undefined;
 
-  /** Also controls if the audio button is visible */
-  audioOutputSwitcher?: AudioOutputSwitcher;
-  /** Also controls if the settings button is visible */
-  openSettings?: () => void;
-  /** Also controls if the hangup button is visible */
-  hangup?: () => void;
+  sharingScreen: boolean;
 
-  reactionIdentifier?: string;
-  reactionData?: ReactionData;
+  /** Also controls if the audio output button is visible */
+  audioOutputSwitcher: AudioOutputSwitcher | undefined;
+
+  reactionIdentifier: string | undefined;
+  reactionData: ReactionData | undefined;
 
-  hideLogo?: boolean;
   // debug stuff
-  debugTileLayout?: boolean;
-  tileStoreGeneration?: number;
+  debugTileLayout: boolean;
+  tileStoreGeneration: number | undefined;
+
+  /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
+  audioOptions: MenuOptions[];
+  /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
+  videoOptions: MenuOptions[];
+  selectedAudio: string | undefined;
+  selectedVideo: string | undefined;
+  selectAudioButtonOption: ((deviceId: string) => void) | undefined;
+  selectVideoButtonOption: ((option: string) => void) | undefined;
 }
 
-export const CallFooter: FC<FooterProps> = ({
-  ref,
-  children,
-  asOverlay,
-  hidden,
-  hideControls,
-  hideLogo,
-  asPip,
-  layoutMode,
-  setLayoutMode,
-  openSettings,
-  audioEnabled,
-  videoEnabled,
-  toggleAudio,
-  toggleVideo,
-  sharingScreen,
-  toggleScreenSharing,
-  reactionIdentifier,
-  reactionData,
-  audioOutputSwitcher,
-  hangup,
-  debugTileLayout,
-  tileStoreGeneration,
-}) => {
+export interface FooterProps {
+  ref?: Ref<HTMLDivElement>;
+  children?: JSX.Element | JSX.Element[] | false;
+  vm: ViewModel<FooterSnapshot>;
+}
+export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
+  const asOverlay = useBehavior(vm.asOverlay$);
+  const showFooter = useBehavior(vm.showFooter$);
+  const hideControls = useBehavior(vm.hideControls$);
+  const layoutMode = useBehavior(vm.layoutMode$);
+  const setLayoutMode = useBehavior(vm.setLayoutMode$);
+  const openSettings = useBehavior(vm.openSettings$);
+  const audioEnabled = useBehavior(vm.audioEnabled$);
+  const videoEnabled = useBehavior(vm.videoEnabled$);
+  const toggleAudio = useBehavior(vm.toggleAudio$);
+  const toggleVideo = useBehavior(vm.toggleVideo$);
+  const sharingScreen = useBehavior(vm.sharingScreen$);
+  const toggleScreenSharing = useBehavior(vm.toggleScreenSharing$);
+  const reactionIdentifier = useBehavior(vm.reactionIdentifier$);
+  const reactionData = useBehavior(vm.reactionData$);
+  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$);
+  const selectedAudio = useBehavior(vm.selectedAudio$);
+  const selectAudioButtonOption = useBehavior(vm.selectAudioButtonOption$);
+  const selectVideoButtonOption = useBehavior(vm.selectVideoButtonOption$);
+  const toggleBlur = useBehavior(vm.toggleBlur$);
+  const videoBlurEnabled = useBehavior(vm.videoBlurEnabled$);
+  const buttonSize = useBehavior(vm.buttonSize$);
+  const showLogo = useBehavior(vm.showLogo$);
+
   const buttons: JSX.Element[] = [];
-  const buttonSize = asPip ? "sm" : "lg";
-  const showSettingsButton =
-    openSettings !== undefined && !asPip && !hideControls;
-  const showLayoutSwitcher = !asPip && !hideControls;
-  const showLogoDebugContainer = !asPip || (!hideLogo && !debugTileLayout);
-  const showLogo = !hideLogo && !asPip;
-  if (showSettingsButton) {
-    // add the settings button to the center group of buttons, so it will be visible on small screens.
-    // On larger screens, it will be hidden SettingsIconButton the one with `showForScreenWidth = "wide"` in the `settingsLogoContainer` will be visible.
+
+  if (openSettings !== undefined) {
+    // Add the settings button to the center group so it's visible on small
+    // screens. On larger screens the SettingsIconButton with
+    // showForScreenWidth="wide" in the settingsLogoContainer is used instead.
     buttons.push(
       <SettingsButton
         key="settings"
@@ -120,24 +160,60 @@ export const CallFooter: FC<FooterProps> = ({
     );
   }
 
-  buttons.push(
-    <MicButton
-      size={buttonSize}
-      key="audio"
-      enabled={audioEnabled ?? false}
-      onClick={toggleAudio}
-      disabled={toggleAudio === undefined}
-      data-testid="incall_mute"
-    />,
-    <VideoButton
-      size={buttonSize}
-      key="video"
-      enabled={videoEnabled ?? false}
-      onClick={toggleVideo}
-      disabled={toggleVideo === undefined}
-      data-testid="incall_videomute"
-    />,
-  );
+  if ((audioOptions?.length ?? 0) > 0) {
+    buttons.push(
+      <MediaMuteAndSwitchButton
+        title={"Mic Source"}
+        key="audio"
+        iconsAndLabels="audio"
+        enabled={audioEnabled ?? false}
+        onMuteClick={toggleAudio}
+        data-testid="incall_mute"
+        options={audioOptions}
+        selectedOption={selectedAudio}
+        onSelect={selectAudioButtonOption}
+      />,
+    );
+  } else {
+    buttons.push(
+      <MicButton
+        size={buttonSize}
+        key="audio"
+        enabled={audioEnabled ?? false}
+        onClick={toggleAudio}
+        disabled={toggleAudio === undefined}
+        data-testid="incall_mute"
+      />,
+    );
+  }
+
+  if ((videoOptions?.length ?? 0) > 0) {
+    buttons.push(
+      <MediaMuteAndSwitchButton
+        title={"Camera Source"}
+        key="video"
+        iconsAndLabels="video"
+        enabled={videoEnabled ?? false}
+        onMuteClick={toggleVideo}
+        options={videoOptions}
+        selectedOption={selectedVideo}
+        onSelect={selectVideoButtonOption}
+        videoBlurToggleClick={toggleBlur}
+        videoBlurEnabled={videoBlurEnabled}
+      />,
+    );
+  } else {
+    buttons.push(
+      <VideoButton
+        size={buttonSize}
+        key="video"
+        enabled={videoEnabled ?? false}
+        onClick={toggleVideo}
+        disabled={toggleVideo === undefined}
+        data-testid="incall_videomute"
+      />,
+    );
+  }
 
   if (toggleScreenSharing !== undefined) {
     buttons.push(
@@ -156,12 +232,7 @@ export const CallFooter: FC<FooterProps> = ({
     buttons.push(
       <ReactionToggleButton
         size={buttonSize}
-        reactionData={
-          reactionData ?? {
-            handsRaised$: new BehaviorSubject({}),
-            reactions$: new BehaviorSubject({}),
-          }
-        }
+        reactionData={reactionData}
         key="raise_hand"
         className={styles.raiseHand}
         identifier={reactionIdentifier}
@@ -212,13 +283,14 @@ export const CallFooter: FC<FooterProps> = ({
   return (
     <div
       ref={ref}
+      data-testid="footer-container"
       className={classNames(styles.footer, {
         [styles.overlay]: asOverlay,
-        [styles.hidden]: hidden,
+        [styles.hidden]: !showFooter,
       })}
     >
       <div className={styles.settingsLogoContainer}>
-        {showSettingsButton && (
+        {openSettings !== undefined && (
           <SettingsIconButton
             key="settings"
             kind="secondary"
@@ -228,14 +300,22 @@ export const CallFooter: FC<FooterProps> = ({
           />
         )}
         {children}
-        {showLogoDebugContainer && logoDebugContainer}
+        {(showLogo || debugTileLayout) && logoDebugContainer}
       </div>
       {!hideControls && <div className={styles.buttons}>{buttons}</div>}
-      {setLayoutMode && layoutMode && showLayoutSwitcher && (
-        <LayoutToggle
+      {!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}
-          layout={layoutMode}
-          setLayout={setLayoutMode}
+          value={layoutMode}
+          onChange={setLayoutMode}
         />
       )}
     </div>

src/components/CallFooterViewModel.test.ts

@@ -0,0 +1,157 @@
+/*
+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 { BehaviorSubject } from "rxjs";
+
+import { testScope, mockMuteStates, mockMediaDevices } from "../utils/test";
+import { constant } from "../state/Behavior";
+import type { CallViewModel } from "../state/CallViewModel/CallViewModel";
+import type { Alignment, Layout } from "../state/layout-types";
+import type { SpotlightTileViewModel } from "../state/TileViewModel";
+import type { DeviceLabel } from "../state/MediaDevices";
+import { createCallFooterViewModel } from "./CallFooterViewModel";
+
+const platformMock = vi.hoisted(() => vi.fn(() => "desktop"));
+vi.mock("../Platform", () => ({
+  get platform(): string {
+    return platformMock();
+  },
+}));
+
+// Prevent supportsBackgroundProcessors from throwing in jsdom – it is not
+// exercised by these tests (only used in `videoToggles`, not `videoOptions`).
+vi.mock("@livekit/track-processors", () => ({
+  supportsBackgroundProcessors: (): boolean => false,
+}));
+
+/**
+ * Returns the minimum set of CallViewModel fields required by
+ * createCallFooterViewModel, with all other properties stubbed to
+ * simple constant values.
+ */
+function buildMinimalCallViewModel(layout: Layout): CallViewModel {
+  return {
+    layout$: constant(layout),
+    edgeToEdge$: constant(false),
+    showHeader$: constant(false),
+    hangup: (): void => {},
+    gridMode$: constant("grid"),
+    setGridMode: (): void => {},
+    sharingScreen$: constant(false),
+    toggleScreenSharing: null,
+    audioOutputSwitcher$: constant(null),
+    handsRaised$: constant({}),
+    reactions$: constant({}),
+    tileStoreGeneration$: constant(0),
+    showFooter$: constant(true),
+    settingsOpen$: constant(false),
+    setSettingsOpen$: constant(() => {}),
+  } as unknown as CallViewModel;
+}
+
+/** A regular grid layout (not PiP). */
+const gridLayout: Layout = {
+  type: "grid",
+  grid: [],
+  spotlightAlignment$: new BehaviorSubject<Alignment>({
+    inline: "end",
+    block: "end",
+  }),
+  setVisibleTiles: (_: number) => {},
+};
+
+/** A PiP layout – only the `type` matters for the tests. */
+const pipLayout: Layout = {
+  type: "pip",
+  spotlight: {} as SpotlightTileViewModel,
+};
+
+const twoMicsAndOneCamMediaDevices = mockMediaDevices({
+  audioInput: {
+    available$: constant(
+      new Map<string, DeviceLabel>([
+        ["mic1", { type: "number", number: 1 }],
+        ["mic2", { type: "name", name: "Microphone 2" }],
+      ]),
+    ),
+    selected$: constant(undefined),
+    select: vi.fn(),
+  },
+  videoInput: {
+    available$: constant(
+      new Map<string, DeviceLabel>([
+        ["cam1", { type: "name", name: "Camera 1" }],
+      ]),
+    ),
+    selected$: constant(undefined),
+    select: vi.fn(),
+  },
+});
+
+describe("createCallFooterViewModel", () => {
+  describe("audioOptions and videoOptions", () => {
+    function checkEmptyFor(platform: string, layout: Layout): void {
+      platformMock.mockReturnValue(platform);
+
+      const vm = createCallFooterViewModel(
+        testScope(),
+        buildMinimalCallViewModel(layout),
+        mockMuteStates(),
+        twoMicsAndOneCamMediaDevices,
+        /* reactionIdentifier */ undefined,
+      );
+
+      expect(vm.audioOptions$.value).toEqual([]);
+      expect(vm.videoOptions$.value).toEqual([]);
+    }
+    it("are both empty when the platform is iOS", () => {
+      checkEmptyFor("ios", gridLayout);
+    });
+    it("are both empty when the layout is pip", () => {
+      checkEmptyFor("desktop", pipLayout);
+    });
+
+    it("are populated when the platform is desktop and the layout is not PiP", () => {
+      platformMock.mockReturnValue("desktop");
+
+      const vm = createCallFooterViewModel(
+        testScope(),
+        buildMinimalCallViewModel(gridLayout),
+        mockMuteStates(),
+        twoMicsAndOneCamMediaDevices,
+        /* reactionIdentifier */ undefined,
+      );
+
+      expect(vm.audioOptions$?.value).toEqual([
+        {
+          id: "mic1",
+          label: {
+            number: 1,
+            type: "number",
+          },
+        },
+        {
+          id: "mic2",
+          label: {
+            name: "Microphone 2",
+            type: "name",
+          },
+        },
+      ]);
+      expect(vm.videoOptions$?.value).toEqual([
+        {
+          id: "cam1",
+          label: {
+            name: "Camera 1",
+            type: "name",
+          },
+        },
+      ]);
+    });
+  });
+});

src/components/CallFooterViewModel.tsx

@@ -0,0 +1,272 @@
+/*
+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, map, switchMap } from "rxjs";
+import { supportsBackgroundProcessors } from "@livekit/track-processors";
+
+import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
+import { type MenuOptions } from "./MediaMuteAndSwitchButton";
+import { type MediaDevices } from "../state/MediaDevices";
+import {
+  backgroundBlur as backgroundBlurSettings,
+  debugTileLayout as debugTileLayoutSetting,
+} from "../settings/settings";
+import { type Behavior, constant } from "../state/Behavior";
+import type { ObservableScope } from "../state/ObservableScope";
+import { type MuteStates } from "../state/MuteStates";
+import { createStaticViewModel, type ViewModel } from "../state/ViewModel";
+import { getUrlParams, HeaderStyle } from "../UrlParams";
+import { platform } from "../Platform";
+import { type FooterSnapshot } from "./CallFooter";
+
+/**
+ * Shared helper: maps MuteStates into the audio/video enabled + toggle behaviors
+ * needed by FooterSnapshot.
+ */
+function buildMuteBehaviors(
+  scope: ObservableScope,
+  muteStates: MuteStates,
+): Pick<
+  ViewModel<FooterSnapshot>,
+  "audioEnabled$" | "toggleAudio$" | "videoEnabled$" | "toggleVideo$"
+> {
+  return {
+    audioEnabled$: muteStates.audio.enabled$,
+    toggleAudio$: scope.behavior(
+      muteStates.audio.toggle$.pipe(map((t) => t ?? undefined)),
+    ),
+    videoEnabled$: muteStates.video.enabled$,
+    toggleVideo$: scope.behavior(
+      muteStates.video.toggle$.pipe(map((t) => t ?? undefined)),
+    ),
+  };
+}
+
+/**
+ * Shared helper: maps MediaDevices into the audio/video device-list behaviors
+ * needed by FooterSnapshot (options, selection, callbacks, blur toggle).
+ */
+function buildDeviceBehaviors(
+  scope: ObservableScope,
+  mediaDevices: MediaDevices,
+  /** return empty arrays for  audioOptions and videoOptions*/
+  disableSwitcher$: Behavior<boolean>,
+): Pick<
+  ViewModel<FooterSnapshot>,
+  | "audioOptions$"
+  | "selectedAudio$"
+  | "selectAudioButtonOption$"
+  | "videoOptions$"
+  | "selectedVideo$"
+  | "selectVideoButtonOption$"
+  | "toggleBlur$"
+  | "videoBlurEnabled$"
+> {
+  return {
+    audioOptions$: scope.behavior(
+      disableSwitcher$.pipe(
+        switchMap((disable) =>
+          disable
+            ? constant([] as MenuOptions[])
+            : mediaDevices.audioInput.available$.pipe(
+                map((available) =>
+                  [...available.entries()].map(([id, label]) => ({
+                    id,
+                    label,
+                  })),
+                ),
+              ),
+        ),
+      ),
+    ),
+    selectedAudio$: scope.behavior(
+      mediaDevices.audioInput.selected$.pipe(map((s) => s?.id)),
+    ),
+    selectAudioButtonOption$: constant(mediaDevices.audioInput.select),
+    videoOptions$: scope.behavior(
+      disableSwitcher$.pipe(
+        switchMap((disable) =>
+          disable
+            ? constant([] as MenuOptions[])
+            : mediaDevices.videoInput.available$.pipe(
+                map((available) =>
+                  [...available.entries()].map(([id, label]) => ({
+                    id,
+                    label,
+                  })),
+                ),
+              ),
+        ),
+      ),
+    ),
+    selectedVideo$: scope.behavior(
+      mediaDevices.videoInput.selected$.pipe(map((s) => s?.id)),
+    ),
+    selectVideoButtonOption$: constant(mediaDevices.videoInput.select),
+    toggleBlur$: scope.behavior(
+      combineLatest([backgroundBlurSettings.value$, disableSwitcher$]).pipe(
+        map(([current, switcherDisabled]) => {
+          return !switcherDisabled && supportsBackgroundProcessors()
+            ? (): void => {
+                backgroundBlurSettings.setValue(!current);
+              }
+            : undefined;
+        }),
+      ),
+    ),
+    videoBlurEnabled$: backgroundBlurSettings.value$,
+  };
+}
+
+/**
+ * Creates the ViewModel for the CallFooter.
+ *
+ * @param scope - ObservableScope that bounds the lifetime of derived behaviors.
+ * @param callModel - The root CallViewModel; provides layout, grid mode, reactions, etc.
+ * @param muteStates - Audio and video mute state + toggles.
+ * @param mediaDevices - Available and selected input devices.
+ * @param reactionIdentifier - The local user's reaction identifier string, or
+ *   undefined when reactions are not supported (hides the reaction button).
+ */
+export function createCallFooterViewModel(
+  scope: ObservableScope,
+  callModel: CallViewModel,
+  muteStates: MuteStates,
+  mediaDevices: MediaDevices,
+  reactionIdentifier: string | undefined,
+): ViewModel<FooterSnapshot> {
+  const { showControls, header: headerStyle } = getUrlParams();
+  const showLogo = headerStyle === HeaderStyle.Standard;
+
+  const isPip$ = scope.behavior(
+    callModel.layout$.pipe(map((l) => l.type === "pip")),
+  );
+  const disableDeviceSwitcher$ = scope.behavior(
+    isPip$.pipe(map((isPip) => isPip || platform !== "desktop")),
+  );
+  return {
+    ...buildMuteBehaviors(scope, muteStates),
+    ...buildDeviceBehaviors(scope, mediaDevices, disableDeviceSwitcher$),
+    // candidat to move into the FooterViewModel
+    showFooter$: callModel.showFooter$,
+    hideControls$: constant(!showControls),
+    asOverlay$: callModel.edgeToEdge$,
+    buttonSize$: scope.behavior(
+      isPip$.pipe(map<boolean, "md" | "lg">((pip) => (pip ? "md" : "lg"))),
+    ),
+
+    openSettings$: scope.behavior(
+      combineLatest([
+        isPip$,
+        callModel.showHeader$,
+        callModel.setSettingsOpen$,
+      ]).pipe(
+        map(([isPip, showHeader, setSettingsOpen]) =>
+          !isPip &&
+          !(headerStyle === HeaderStyle.AppBar && showHeader) &&
+          showControls
+            ? (): void => setSettingsOpen(true)
+            : undefined,
+        ),
+      ),
+    ),
+
+    showLogo$: scope.behavior(isPip$.pipe(map((isPip) => showLogo && !isPip))),
+
+    layoutMode$: callModel.gridMode$,
+    setLayoutMode$: scope.behavior(
+      isPip$.pipe(
+        map((isPip) =>
+          !isPip && showControls ? callModel.setGridMode : undefined,
+        ),
+      ),
+    ),
+
+    sharingScreen$: callModel.sharingScreen$,
+    toggleScreenSharing$: constant(callModel.toggleScreenSharing ?? undefined),
+
+    audioOutputSwitcher$: scope.behavior(
+      callModel.audioOutputSwitcher$.pipe(
+        map((switcher) => switcher ?? undefined),
+      ),
+    ),
+
+    hangup$: constant(callModel.hangup),
+
+    reactionIdentifier$: constant(reactionIdentifier),
+    reactionData$: constant(
+      reactionIdentifier !== undefined
+        ? {
+            handsRaised$: callModel.handsRaised$,
+            reactions$: callModel.reactions$,
+          }
+        : undefined,
+    ),
+
+    debugTileLayout$: debugTileLayoutSetting.value$,
+    tileStoreGeneration$: callModel.tileStoreGeneration$,
+  };
+}
+
+/**
+ * Creates a simplified ViewModel for the CallFooter used in the lobby
+ * (pre-call) screen. Unlike createCallFooterViewModel, this does not require
+ * a CallViewModel — it only needs mute states, device lists, and callbacks.
+ *
+ * @param scope - ObservableScope that bounds the lifetime of derived behaviors.
+ * @param muteStates - Audio and video mute state + toggles.
+ * @param mediaDevices - Available and selected input devices.
+ * @param openSettings - Callback to open the settings modal, or undefined.
+ * @param hangup - Callback to leave/cancel, or undefined (hides the button).
+ * @param showLogo - Whether to show the Element Call logo.
+ */
+export function createLobbyFooterViewModel(
+  scope: ObservableScope,
+  muteStates: MuteStates,
+  mediaDevices: MediaDevices,
+  openSettings: (() => void) | undefined,
+  hangup: (() => void) | undefined,
+  showLogo: boolean,
+): ViewModel<FooterSnapshot> {
+  return {
+    ...createStaticViewModel({
+      // we can safly skip any props that we do not need.
+      // The view model will then have less keys.
+      // But as soon as we call `useViewModel` and convert back to a snapshot the missing props will
+      // be correcty matching the snapshot type.
+      showLogo,
+      hideControls: false,
+      asOverlay: false,
+      buttonSize: "lg",
+      showLayoutSwitcher: false,
+      openSettings,
+      hangup,
+      debugTileLayout: false,
+      showFooter: true,
+      toggleAudio: undefined,
+      toggleVideo: undefined,
+      setLayoutMode: undefined,
+      toggleScreenSharing: undefined,
+      audioEnabled: undefined,
+      videoEnabled: undefined,
+      layoutMode: undefined,
+      sharingScreen: false,
+      audioOutputSwitcher: undefined,
+      reactionIdentifier: undefined,
+      reactionData: undefined,
+      tileStoreGeneration: undefined,
+      audioOptions: undefined,
+      videoOptions: undefined,
+      selectedAudio: undefined,
+      selectedVideo: undefined,
+      selectAudioButtonOption: undefined,
+      selectVideoButtonOption: undefined,
+    }),
+    ...buildMuteBehaviors(scope, muteStates),
+    ...buildDeviceBehaviors(scope, mediaDevices, constant(false)),
+  };
+}

src/components/MediaMuteAndSwitchButton.module.css

@@ -0,0 +1,37 @@
+/*
+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.
+*/
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: var(--cpd-color-bg-subtle-secondary);
+  border-radius: 32px;
+  transition: background-color 0.2s ease-in-out;
+}
+.containerOpen {
+  background-color: var(--cpd-color-bg-action-primary-pressed);
+}
+.chevronIconOpen > svg {
+  color: var(--cpd-color-icon-on-solid-primary);
+}
+.menuButton {
+  width: 40px;
+  background-color: transparent !important;
+}
+.itemIcon {
+  color: var(--cpd-color-text-secondary);
+}
+
+.rotate {
+  animation: spinner 1.5s linear infinite;
+}
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/MediaMuteAndSwitchButton.stories.tsx

@@ -0,0 +1,100 @@
+/*
+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 { fn, userEvent, within, expect } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
+
+const meta = {
+  component: MediaMuteAndSwitchButton,
+} satisfies Meta<typeof MediaMuteAndSwitchButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "SomeMenu",
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Option 1" }, id: "1" },
+      { label: { type: "name", name: "Option 2" }, id: "2" },
+    ],
+    selectedOption: "1",
+    onMuteClick: fn(),
+    onSelect: fn(),
+  },
+};
+
+export const AudioMute: Story = {
+  args: {
+    ...Default.args,
+    title: "Microphone",
+    iconsAndLabels: "audio",
+    enabled: false,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "2" },
+    ],
+    videoBlurEnabled: true,
+    videoBlurToggleClick: fn(),
+    selectedOption: "2",
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    // Both the mute button and the chevron trigger currently share the aria-label "Edit"
+    // (both are TODO placeholders in the component). The mute button is first in the DOM.
+    const muteButton = canvas.getByTestId("incall_mute");
+    await userEvent.click(muteButton);
+    await expect(args.onMuteClick).toHaveBeenCalled();
+  },
+};
+
+export const AudioUnmute: Story = {
+  args: {
+    title: "Microphone",
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "2" },
+    ],
+
+    selectedOption: "2",
+  },
+};
+
+export const VideoMute: Story = {
+  args: {
+    title: "Camera",
+    iconsAndLabels: "video",
+    enabled: false,
+    options: [
+      { label: { type: "name", name: "Camera 1" }, id: "1" },
+      { label: { type: "name", name: "Camera 2" }, id: "2" },
+    ],
+
+    selectedOption: "1",
+  },
+};
+
+export const VideoUnmute: Story = {
+  args: {
+    title: "Camera",
+    iconsAndLabels: "video",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Camera 1" }, id: "1" },
+      { label: { type: "name", name: "Camera 2" }, id: "2" },
+    ],
+    videoBlurEnabled: true,
+    videoBlurToggleClick: fn(),
+    selectedOption: "2",
+  },
+};

src/components/MediaMuteAndSwitchButton.test.tsx

@@ -0,0 +1,244 @@
+/*
+Copyright 2023, 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test, vi } from "vitest";
+import { act, render, screen, type RenderResult } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { type JSX, useState } from "react";
+import { TooltipProvider } from "@vector-im/compound-web";
+
+import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
+
+describe("MediaMuteAndSwitchButton", () => {
+  test("renders", () => {
+    const { container } = render(
+      <TooltipProvider>
+        <MediaMuteAndSwitchButton title={"Switcher"} iconsAndLabels={"audio"} />
+      </TooltipProvider>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("renders correct audio and video labels", () => {
+    const renderLabels = (
+      type: "video" | "audio",
+      enabled: boolean,
+    ): RenderResult => {
+      return render(
+        <TooltipProvider>
+          <MediaMuteAndSwitchButton
+            title={"Switcher"}
+            iconsAndLabels={type}
+            enabled={enabled}
+          />
+        </TooltipProvider>,
+      );
+    };
+    const renderAudioEndabled = renderLabels("audio", true);
+    const renderAudioDisabled = renderLabels("audio", false);
+    const renderVideoEnabled = renderLabels("video", true);
+    const renderVideoDisabled = renderLabels("video", false);
+
+    expect(
+      renderAudioEndabled.getByRole("switch", { name: "Mute microphone" }),
+    ).toBeInTheDocument();
+    expect(
+      renderAudioDisabled.getByRole("switch", { name: "Unmute microphone" }),
+    ).toBeInTheDocument();
+    expect(
+      renderVideoEnabled.getByRole("switch", { name: "Start video" }),
+    ).toBeInTheDocument();
+    expect(
+      renderVideoDisabled.getByRole("switch", { name: "Stop video" }),
+    ).toBeInTheDocument();
+  });
+
+  test("calls mute on mute press", async () => {
+    const user = userEvent.setup();
+    const onMute = vi.fn();
+    const { getByRole } = render(
+      <TooltipProvider>
+        <MediaMuteAndSwitchButton
+          title={"Switcher"}
+          onMuteClick={onMute}
+          iconsAndLabels="audio"
+          enabled={true}
+        />
+      </TooltipProvider>,
+    );
+
+    await user.click(getByRole("switch", { name: "Mute microphone" }));
+
+    expect(onMute).toHaveBeenCalled();
+  });
+
+  test("calls select callback on menu click", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    const { getByRole } = render(
+      <TooltipProvider>
+        <MediaMuteAndSwitchButton
+          title="Switcher"
+          iconsAndLabels="audio"
+          enabled={true}
+          options={[
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+          ]}
+          selectedOption="mic1"
+          onSelect={onSelect}
+        />
+      </TooltipProvider>,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(screen.getByRole("menuitem", { name: "Microphone 2" }));
+
+    expect(onSelect).toHaveBeenCalledWith("mic2");
+  });
+  test("does not call select callback on already selected menu click", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    const { getByRole } = render(
+      <TooltipProvider>
+        <MediaMuteAndSwitchButton
+          title="Switcher"
+          iconsAndLabels="audio"
+          enabled={true}
+          options={[
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+          ]}
+          selectedOption="mic1"
+          onSelect={onSelect}
+        />
+      </TooltipProvider>,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(screen.getByRole("menuitem", { name: "Microphone 1" }));
+
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  test("renders menu spinner until selection updates for the component", async () => {
+    const user = userEvent.setup();
+    const { promise, resolve } = Promise.withResolvers<void>();
+    const onSelectPressed = vi.fn();
+    const onOptionUpdated = vi.fn();
+    function Wrapper(): JSX.Element {
+      const [selectedOption, setSelectedOption] = useState("mic1");
+      return (
+        <TooltipProvider>
+          <MediaMuteAndSwitchButton
+            title="Switcher"
+            iconsAndLabels="audio"
+            enabled={true}
+            options={[
+              { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+              { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+            ]}
+            selectedOption={selectedOption}
+            onSelect={(id) => {
+              onSelectPressed();
+              void promise.then(() => {
+                setSelectedOption(id);
+                onOptionUpdated();
+              });
+            }}
+          />
+        </TooltipProvider>
+      );
+    }
+
+    const { getByRole } = render(<Wrapper />);
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    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 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 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();
+      await promise;
+    });
+
+    expect(onOptionUpdated).toHaveBeenCalled();
+    // Spinner should now be gone since the selection has caught up
+    const mic2ItemAfter = screen.getByRole("menuitem", {
+      name: "Microphone 2",
+    });
+    expect(mic2ItemAfter.querySelector(".rotate")).toBeNull();
+  });
+
+  test("renders menu with toggle control and calls toggle callback", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    const onVideoBlurToggle = vi.fn();
+    const { getByRole } = render(
+      <TooltipProvider>
+        <MediaMuteAndSwitchButton
+          title="Switcher"
+          iconsAndLabels="video"
+          enabled={true}
+          videoBlurToggleClick={onVideoBlurToggle}
+          onSelect={onSelect}
+        />
+      </TooltipProvider>,
+    );
+
+    await user.click(getByRole("button", { name: "Camera" }));
+
+    const toggle = screen.getByRole("menuitemcheckbox", {
+      name: "Blur background",
+    });
+    expect(toggle).toBeInTheDocument();
+    expect(toggle).toHaveAttribute("aria-checked", "false");
+
+    await user.click(toggle);
+
+    expect(onVideoBlurToggle).toHaveBeenCalled();
+  });
+
+  test("renders check icon to mark the selected menu item", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = render(
+      <TooltipProvider>
+        <MediaMuteAndSwitchButton
+          title="Switcher"
+          iconsAndLabels="audio"
+          enabled={true}
+          options={[
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+          ]}
+          selectedOption="mic2"
+        />
+      </TooltipProvider>,
+    );
+
+    // open menu
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    // The selected item (mic2) renders both an IconOptions SVG and a CheckIcon SVG
+    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("menuitem", { name: "Microphone 1" });
+    expect(mic2Item.querySelectorAll("svg").length).toBe(1);
+  });
+});

src/components/MediaMuteAndSwitchButton.tsx

@@ -0,0 +1,213 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type ComponentType, useState, type FC } from "react";
+import {
+  Button,
+  Menu,
+  MenuItem,
+  ToggleMenuItem,
+} from "@vector-im/compound-web";
+import {
+  CheckIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  MicOnIcon,
+  SpinnerIcon,
+  VideoCallIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+
+import styles from "./MediaMuteAndSwitchButton.module.css";
+import { MicButton, VideoButton } from "../button";
+import { type DeviceLabel } from "../state/MediaDevices";
+
+export interface MenuOptions {
+  label: DeviceLabel;
+  id: string;
+}
+
+export interface MediaMuteAndSwitchButtonProps {
+  /** The title used in the Switcher modal. */
+  title: string;
+  /** If the Mute button is enabled */
+  enabled?: boolean;
+  /** Callback if the mute button is clicked */
+  onMuteClick?: () => void;
+  iconsAndLabels: "video" | "audio";
+  /** The options available for the media device selector modal */
+  options?: MenuOptions[];
+  /** The option that will currently be rendered as the selected option */
+  selectedOption?: string;
+  videoBlurToggleClick?: () => void;
+  videoBlurEnabled?: boolean;
+  /**
+   * For any toggle and option this method will be called.
+   * So toggles need to be implemented by listening here and setting the right toggle item to `enabled`
+   */
+  onSelect?: (id: string) => void;
+}
+
+const BLUR_ID = "blur";
+
+export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
+  title,
+  enabled,
+  onMuteClick,
+  iconsAndLabels,
+  options,
+  selectedOption,
+  videoBlurEnabled,
+  videoBlurToggleClick,
+  onSelect,
+}) => {
+  const [plannedSelection, setPlannedSelection] = useState<string | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const { t } = useTranslation();
+  let button;
+  let toggles: { label: string; enabled: boolean; id: string }[] = [];
+  switch (iconsAndLabels) {
+    case "video":
+      button = (
+        <VideoButton
+          enabled={enabled ?? false}
+          onClick={(e) => {
+            onMuteClick?.();
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          disabled={onMuteClick === undefined}
+          data-testid="incall_videomute"
+        />
+      );
+      if (videoBlurToggleClick !== undefined) {
+        toggles = [
+          {
+            label: t("action.blur_background"),
+            enabled: videoBlurEnabled ?? false,
+            id: BLUR_ID,
+          },
+        ];
+      }
+      break;
+    case "audio":
+      button = (
+        <MicButton
+          enabled={enabled ?? false}
+          onClick={(e) => {
+            onMuteClick?.();
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          disabled={onMuteClick === undefined}
+          data-testid="incall_mute"
+        />
+      );
+      break;
+  }
+
+  let IconOptions: ComponentType<React.SVGAttributes<SVGElement>> | undefined;
+  let optionsButtonLabel: string;
+  let numberedLabel: (number: number) => string;
+  switch (iconsAndLabels) {
+    case "video":
+      IconOptions = VideoCallIcon;
+      optionsButtonLabel = t("settings.devices.camera");
+      numberedLabel = (n): string =>
+        t("settings.devices.microphone_numbered", { n });
+      break;
+    case "audio":
+      IconOptions = MicOnIcon;
+      optionsButtonLabel = t("settings.devices.microphone");
+      numberedLabel = (n): string =>
+        t("settings.devices.camera_numbered", { n });
+      break;
+  }
+  return (
+    <div
+      className={classNames({
+        [styles.container]: true,
+        [styles.containerOpen]: menuOpen,
+      })}
+    >
+      {/* The mute button lives inside */}
+      {button}
+      <Menu
+        title={title}
+        showTitle={true}
+        open={menuOpen}
+        onOpenChange={setMenuOpen}
+        side="top"
+        trigger={
+          <Button
+            iconOnly
+            className={classNames({
+              [styles.menuButton]: true,
+              [styles.chevronIconOpen]: menuOpen,
+            })}
+            Icon={menuOpen ? ChevronUpIcon : ChevronDownIcon}
+            kind={"tertiary"}
+            size="lg"
+            aria-label={optionsButtonLabel}
+          />
+        }
+      >
+        {options?.map(({ label, id }) => {
+          let labelText: string;
+          switch (label.type) {
+            case "name":
+              labelText = label.name;
+              break;
+            case "number":
+              labelText = numberedLabel(label.number);
+              break;
+          }
+          return (
+            <MenuItem
+              hideChevron
+              label={labelText}
+              Icon={
+                IconOptions && (
+                  <IconOptions
+                    width={24}
+                    height={24}
+                    className={styles.itemIcon}
+                  />
+                )
+              }
+              onSelect={(e) => {
+                e.preventDefault();
+                if (id === selectedOption) return;
+                setPlannedSelection(id);
+                onSelect?.(id);
+              }}
+              key={id}
+            >
+              {selectedOption === id && <CheckIcon width={24} height={24} />}
+              {selectedOption !== id && plannedSelection === id && (
+                <SpinnerIcon width={24} height={24} className={styles.rotate} />
+              )}
+            </MenuItem>
+          );
+        })}
+        {(toggles?.length ?? 0) > 0 && <hr />}
+        {toggles?.map((toggle) => (
+          <ToggleMenuItem
+            label={toggle.label}
+            onSelect={(e) => {
+              videoBlurToggleClick?.();
+              e.preventDefault();
+            }}
+            checked={toggle.enabled ?? false}
+            key={toggle.id}
+          />
+        ))}
+      </Menu>
+    </div>
+  );
+};

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

@@ -0,0 +1,61 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MediaMuteAndSwitchButton > renders 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <button
+      aria-checked="false"
+      aria-disabled="true"
+      aria-labelledby="_r_0_"
+      class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
+      data-kind="primary"
+      data-size="lg"
+      data-testid="incall_mute"
+      role="switch"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
+        />
+      </svg>
+    </button>
+    <button
+      aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="Microphone"
+      class="_button_1nw83_8 menuButton _has-icon_1nw83_60 _icon-only_1nw83_53"
+      data-kind="tertiary"
+      data-size="lg"
+      data-state="closed"
+      id="radix-_r_5_"
+      role="button"
+      tabindex="0"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;

src/config/ConfigOptions.ts

@@ -97,6 +97,13 @@ export interface ConfigOptions {
     enable_video?: boolean;
   };
 
+  /**
+   * Grace period in milliseconds to wait before reporting the sync loop as disconnected.
+   * This allows brief sync interruptions without triggering a reconnection message.
+   * Default is 10000ms (10 seconds). Set to 0 to disable the grace period.
+   */
+  sync_disconnect_grace_period_ms?: number;
+
   /**
    * These are low level options that are used to configure the MatrixRTC session.
    * Take care when changing these options.
@@ -155,7 +162,16 @@ export interface ResolvedConfigOptions extends ConfigOptions {
       server_name: string;
     };
   };
+  sync_disconnect_grace_period_ms: number;
   ssla: string;
+  matrix_rtc_session: {
+    wait_for_key_rotation_ms?: number;
+    delayed_leave_event_delay_ms: number;
+    delayed_leave_event_restart_local_timeout_ms?: number;
+    delayed_leave_event_restart_ms?: number;
+    network_error_retry_ms: number;
+    membership_event_expiry_ms?: number;
+  };
 }
 
 export const DEFAULT_CONFIG: ResolvedConfigOptions = {
@@ -168,5 +184,10 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = {
   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/controls.ts

@@ -12,6 +12,7 @@ export interface Controls {
   canEnterPip(): boolean;
   enablePip(): void;
   disablePip(): void;
+  onPipMediaOrientationUpdate?: (orientation: "landscape" | "portrait") => void;
 
   setAvailableAudioDevices(devices: OutputDevice[]): void;
   setAudioDevice(id: string): void;

src/grid/CallLayout.ts

@@ -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 BehaviorSubject, type Observable } from "rxjs";
+import { type Observable } from "rxjs";
 import { type ComponentType } from "react";
 
 import { type LayoutProps } from "./Grid";
@@ -16,37 +16,18 @@ export interface Bounds {
   height: number;
 }
 
-export interface Alignment {
-  inline: "start" | "end";
-  block: "start" | "end";
-}
-
-export const defaultSpotlightAlignment: Alignment = {
-  inline: "end",
-  block: "end",
-};
-export const defaultPipAlignment: Alignment = { inline: "end", block: "start" };
-
 export interface CallLayoutInputs {
   /**
    * The minimum bounds of the layout area.
    */
   minBounds$: Observable<Bounds>;
-  /**
-   * The alignment of the floating spotlight tile, if present.
-   */
-  spotlightAlignment$: BehaviorSubject<Alignment>;
-  /**
-   * The alignment of the small picture-in-picture tile, if present.
-   */
-  pipAlignment$: BehaviorSubject<Alignment>;
 }
 
 export interface CallLayoutOutputs<Model> {
   /**
-   * Whether the scrolling layer of the layout should appear on top.
+   * Which layer should appear in the foreground.
    */
-  scrollingOnTop: boolean;
+  foreground: "fixed" | "scrolling";
   /**
    * The visually fixed (non-scrolling) layer of the layout.
    */

src/grid/Grid.tsx

@@ -266,6 +266,20 @@ export function Grid<
     }, []),
     useCallback(() => window.innerHeight, []),
   );
+  const orientation = useSyncExternalStore(
+    useCallback((onChange) => {
+      // Support for the change event is experimental
+      // https://developer.mozilla.org/en-US/docs/Web/API/Screen/change_event#browser_compatibility
+      (screen as unknown as EventTarget).addEventListener?.("change", onChange);
+      return (): void =>
+        (screen as unknown as EventTarget).removeEventListener?.(
+          "change",
+          onChange,
+        );
+    }, []),
+    useCallback(() => window.innerHeight, []),
+  );
+
   const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
   const [generation, setGeneration] = useState<number | null>(null);
   const [visibleTilesCallback, setVisibleTilesCallback] =
@@ -336,10 +350,10 @@ export function Grid<
     }
 
     return result;
-    // The rects may change due to the grid resizing or updating to a new
-    // generation, but eslint can't statically verify this
+    // The rects may change due to the grid resizing, changing orientation, or
+    // updating to a new generation, but eslint can't statically verify this
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [gridRoot, layoutRoot, tiles, gridBounds, generation]);
+  }, [gridRoot, layoutRoot, tiles, gridBounds, orientation, generation]);
 
   // The height of the portion of the grid visible at any given time
   const visibleHeight = useMemo(

src/grid/GridLayout.module.css

@@ -31,8 +31,9 @@ Please see LICENSE in the repository root for full details.
   position: absolute;
   inline-size: 404px;
   block-size: 233px;
-  inset-block: 0;
-  inset-inline: var(--cpd-space-3x);
+  /* Ensure that spotlight tile lies within the safe area */
+  inset: 0 calc(env(safe-area-inset-right) + var(--cpd-space-3x)) 0
+    calc(env(safe-area-inset-left) + var(--cpd-space-3x));
 }
 
 .fixed > .slot[data-block-alignment="start"] {

src/grid/GridLayout.tsx

@@ -32,9 +32,8 @@ interface GridCSSProperties extends CSSProperties {
  */
 export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   minBounds$,
-  spotlightAlignment$,
 }) => ({
-  scrollingOnTop: false,
+  foreground: "fixed",
 
   // The "fixed" (non-scrolling) part of the layout is where the spotlight tile
   // lives
@@ -42,7 +41,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
     useUpdateLayout();
     const alignment = useObservableEagerState(
       useInitial(() =>
-        spotlightAlignment$.pipe(
+        model.spotlightAlignment$.pipe(
           distinctUntilChanged(
             (a1, a2) => a1.block === a2.block && a1.inline === a2.inline,
           ),
@@ -52,11 +51,11 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
 
     const onDragSpotlight: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
-        spotlightAlignment$.next({
+        model.spotlightAlignment$.next({
           block: yRatio < 0.5 ? "start" : "end",
           inline: xRatio < 0.5 ? "start" : "end",
         }),
-      [],
+      [model.spotlightAlignment$],
     );
 
     return (

src/grid/OneOnOneLandscapeLayout.module.css

@@ -22,12 +22,6 @@ Please see LICENSE in the repository root for full details.
   inset: 0;
 }
 
-.spotlight {
-  position: absolute;
-  inline-size: 404px;
-  block-size: 233px;
-}
-
 .slot[data-block-alignment="start"] {
   inset-block-end: unset;
 }

src/grid/OneOnOneLandscapeLayout.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2024 New Vector Ltd.
+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.
@@ -9,31 +10,35 @@ import { type ReactNode, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/layout-types.ts";
+import { type OneOnOneLandscapeLayout as OneOnOneLandscapeLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
-import styles from "./OneOnOneLayout.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, in which the remote participant
- * is shown at maximum size, overlaid by a small view of the local participant.
+ * 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 makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
-  minBounds$,
-  pipAlignment$,
-}) => ({
-  scrollingOnTop: false,
+export const makeOneOnOneLandscapeLayout: CallLayout<
+  OneOnOneLandscapeLayoutModel
+> = ({ minBounds$ }) => ({
+  foreground: "fixed",
 
-  fixed: function OneOnOneLayoutFixed({ ref }): ReactNode {
+  fixed: function OneOnOneLandscapeLayoutFixed({ ref }): ReactNode {
     useUpdateLayout();
     return <div ref={ref} />;
   },
 
-  scrolling: function OneOnOneLayoutScrolling({ ref, model, Slot }): ReactNode {
+  scrolling: function OneOnOneLandscapeLayoutScrolling({
+    ref,
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
     const { width, height } = useObservableEagerState(minBounds$);
-    const pipAlignmentValue = useBehavior(pipAlignment$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),
       [width, height],
@@ -41,11 +46,11 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
 
     const onDragLocalTile: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
-        pipAlignment$.next({
+        model.pipAlignment$.next({
           block: yRatio < 0.5 ? "start" : "end",
           inline: xRatio < 0.5 ? "start" : "end",
         }),
-      [],
+      [model.pipAlignment$],
     );
 
     return (
@@ -61,8 +66,8 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
             id={model.pip.id}
             model={model.pip}
             onDrag={onDragLocalTile}
-            data-block-alignment={pipAlignmentValue.block}
-            data-inline-alignment={pipAlignmentValue.inline}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
           />
         </Slot>
       </div>

src/grid/OneOnOnePortraitLayout.module.css

@@ -0,0 +1,46 @@
+/*
+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.
+*/
+
+.layer {
+  block-size: 100%;
+}
+
+.spotlight {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+.pip {
+  position: absolute;
+  inset: var(--cpd-space-4x);
+}
+
+.pip[data-size="sm"] {
+  inline-size: 88px;
+  block-size: 132px;
+}
+
+.pip[data-size="lg"] {
+  inline-size: 140px;
+  block-size: 210px;
+}
+
+.pip[data-block-alignment="start"] {
+  inset-block-end: unset;
+}
+
+.pip[data-block-alignment="end"] {
+  inset-block-start: unset;
+}
+
+.pip[data-inline-alignment="start"] {
+  inset-inline-end: unset;
+}
+
+.pip[data-inline-alignment="end"] {
+  inset-inline-start: unset;
+}

src/grid/OneOnOnePortraitLayout.tsx

@@ -0,0 +1,74 @@
+/*
+Copyright 2024 New Vector Ltd.
+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 { type ReactNode, useCallback } from "react";
+import classNames from "classnames";
+
+import { type OneOnOnePortraitLayout as OneOnOnePortraitLayoutModel } from "../state/layout-types.ts";
+import { type CallLayout } from "./CallLayout";
+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 portrait screens, in which
+ * the remote participant is shown at maximum size, overlaid by a small view of
+ * the local participant.
+ */
+export const makeOneOnOnePortraitLayout: CallLayout<
+  OneOnOnePortraitLayoutModel
+> = () => ({
+  foreground: "scrolling",
+
+  fixed: function OneOnOnePortraitLayoutFixed({ ref, model, Slot }): ReactNode {
+    useUpdateLayout();
+    return (
+      <div ref={ref} className={styles.layer}>
+        <Slot
+          className={styles.spotlight}
+          id="spotlight"
+          model={model.spotlight}
+        />
+      </div>
+    );
+  },
+
+  scrolling: function OneOnOnePortraitLayoutScrolling({
+    ref,
+    model,
+    Slot,
+  }): ReactNode {
+    useUpdateLayout();
+    const pipSize = useBehavior(model.pipSize$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
+    const onDragLocalTile: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        model.pipAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [model.pipAlignment$],
+    );
+
+    return (
+      <div ref={ref} className={styles.layer}>
+        {model.pip && (
+          <Slot
+            className={classNames(styles.pip)}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragLocalTile}
+            data-size={pipSize}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
+          />
+        )}
+      </div>
+    );
+  },
+});

src/grid/SpotlightExpandedLayout.module.css

@@ -18,7 +18,11 @@ Please see LICENSE in the repository root for full details.
   position: absolute;
   inline-size: 135px;
   block-size: 160px;
-  inset: var(--cpd-space-4x);
+  /* Ensure that PiP lies within the safe area */
+  inset: calc(env(safe-area-inset-top) + var(--cpd-space-4x))
+    var(--content-inset-right)
+    calc(env(safe-area-inset-bottom) + var(--cpd-space-4x))
+    var(--content-inset-left);
 }
 
 @media (min-width: 600px) {

src/grid/SpotlightExpandedLayout.tsx

@@ -19,8 +19,8 @@ import { useBehavior } from "../useBehavior";
  */
 export const makeSpotlightExpandedLayout: CallLayout<
   SpotlightExpandedLayoutModel
-> = ({ pipAlignment$ }) => ({
-  scrollingOnTop: true,
+> = () => ({
+  foreground: "scrolling",
 
   fixed: function SpotlightExpandedLayoutFixed({
     ref,
@@ -46,15 +46,15 @@ export const makeSpotlightExpandedLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    const pipAlignmentValue = useBehavior(pipAlignment$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
 
     const onDragPip: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
-        pipAlignment$.next({
+        model.pipAlignment$.next({
           block: yRatio < 0.5 ? "start" : "end",
           inline: xRatio < 0.5 ? "start" : "end",
         }),
-      [],
+      [model.pipAlignment$],
     );
 
     return (
@@ -65,8 +65,8 @@ export const makeSpotlightExpandedLayout: CallLayout<
             id={model.pip.id}
             model={model.pip}
             onDrag={onDragPip}
-            data-block-alignment={pipAlignmentValue.block}
-            data-inline-alignment={pipAlignmentValue.inline}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
           />
         )}
       </div>

src/grid/SpotlightLandscapeLayout.tsx

@@ -22,7 +22,7 @@ import { useUpdateLayout, useVisibleTiles } from "./Grid";
 export const makeSpotlightLandscapeLayout: CallLayout<
   SpotlightLandscapeLayoutModel
 > = ({ minBounds$ }) => ({
-  scrollingOnTop: false,
+  foreground: "scrolling",
 
   fixed: function SpotlightLandscapeLayoutFixed({
     ref,

src/grid/SpotlightPortraitLayout.tsx

@@ -29,7 +29,7 @@ interface GridCSSProperties extends CSSProperties {
 export const makeSpotlightPortraitLayout: CallLayout<
   SpotlightPortraitLayoutModel
 > = ({ minBounds$ }) => ({
-  scrollingOnTop: false,
+  foreground: "fixed",
 
   fixed: function SpotlightPortraitLayoutFixed({
     ref,

src/index.css

@@ -37,10 +37,20 @@ layer(compound);
   --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
-  96px for typical desktop windows. */
-  --inline-content-inset: min(
-    var(--cpd-space-24x),
-    max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+  96px for typical desktop windows, and accounts for the safe area. */
+  --content-inset-left: calc(
+    env(safe-area-inset-left) +
+      min(
+        var(--cpd-space-24x),
+        max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+      )
+  );
+  --content-inset-right: calc(
+    env(safe-area-inset-right) +
+      min(
+        var(--cpd-space-24x),
+        max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+      )
   );
   --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
   --big-drop-shadow: 0px 0px 24px 0px #1b1d221a;

src/initializer.tsx

@@ -23,12 +23,17 @@ import {
   createRoutesFromChildren,
   matchRoutes,
 } from "react-router-dom";
+import {
+  setLogExtension as setLKLogExtension,
+  setLogLevel as setLKLogLevel,
+} from "livekit-client";
 
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
 import { platform } from "./Platform";
 import { isFailure } from "./utils/fetch";
 import { initializeWidget } from "./widget";
+import { enableExtendedLivekitLogs } from "./settings/settings.ts";
 
 // This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
 // {
@@ -189,6 +194,18 @@ export class Initializer {
 
     // Add the platform to the DOM, so CSS can query it
     document.body.setAttribute("data-platform", platform);
+
+    // livekit logging configuration
+    setLKLogExtension((level, msg, context) => {
+      // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read
+      global.mx_rage_logger.log(level, "livekit", msg, context);
+    });
+
+    enableExtendedLivekitLogs.value$.subscribe((enabled) => {
+      setLKLogLevel(enabled ? "trace" : "info");
+    });
+
+    window.setLKLogLevel = setLKLogLevel;
   }
 
   public static init(): Promise<void> | null {

src/input/AvatarInputField.tsx

@@ -113,7 +113,7 @@ export const AvatarInputField: FC<Props> = ({
                 iconOnly
                 Icon={EditIcon}
                 kind="tertiary"
-                size="sm"
+                size="md"
                 aria-label={t("action.edit")}
               />
             }
@@ -136,7 +136,7 @@ export const AvatarInputField: FC<Props> = ({
             iconOnly
             Icon={EditIcon}
             kind="tertiary"
-            size="sm"
+            size="md"
             aria-label={t("action.edit")}
             onClick={onSelectUpload}
           />

src/livekit/openIDSFU.test.ts

@@ -84,6 +84,99 @@ describe("getSFUConfigWithOpenID", () => {
     expect.fail("Expected test to throw;");
   });
 
+  it("should retry without delay params if the JWT service legacy endpoint returns M_BAD_JSON 400", async () => {
+    let callCount = 0;
+
+    fetchMock.post(
+      "https://sfu.example.org/sfu/get",
+      (url, opts) => {
+        callCount++;
+        const body = JSON.parse(opts.body as string);
+
+        // First call: check if it has delay parts and return 400
+        if (callCount === 1) {
+          expect(body).toHaveProperty("delay_id", "mock_delay_id");
+          return {
+            status: 400,
+            body: { errcode: "M_BAD_JSON", error: "Unsupported parameters" },
+          };
+        }
+
+        // Second call: check if delay parts were stripped and return success
+        expect(body).not.toHaveProperty("delay_id");
+        expect(body).not.toHaveProperty("delay_timeout");
+        expect(body).not.toHaveProperty("delay_cs_api_url");
+
+        return {
+          status: 200,
+          body: { url: sfuUrl, jwt: testJWTToken },
+        };
+      },
+      { overwriteRoutes: true },
+    );
+
+    // Note: Assuming getSFUConfigWithOpenID eventually calls getLiveKitJWT
+    const config = await getSFUConfigWithOpenID(
+      matrixClient,
+      ownMemberMock,
+      "https://sfu.example.org",
+      "!example_room_id",
+      {
+        delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
+        delayId: "mock_delay_id",
+      },
+    );
+
+    expect(config.jwt).toBe(testJWTToken);
+    expect(callCount).toBe(2);
+    void (await fetchMock.flush());
+  });
+
+  it("should successfully send delay parameters to the JWT service legacy endpoint", async () => {
+    fetchMock.post(
+      "https://sfu.example.org/sfu/get",
+      (url, opts) => {
+        const body = JSON.parse(opts.body as string);
+
+        // Verify, that the request contains the expected delay parameters
+        if (
+          body.delay_id === "mock_delay_id" &&
+          body.delay_timeout === 10000 &&
+          body.delay_cs_api_url === "https://homeserverserver.org/cs_api"
+        ) {
+          return {
+            status: 200,
+            body: { url: sfuUrl, jwt: testJWTToken },
+          };
+        }
+        return {
+          status: 400,
+          body: { error: "Missing expected delay params" },
+        };
+      },
+      { overwriteRoutes: true },
+    );
+
+    const config = await getSFUConfigWithOpenID(
+      matrixClient,
+      ownMemberMock,
+      "https://sfu.example.org",
+      "!example_room_id",
+      {
+        delayEndpointBaseUrl: "https://homeserverserver.org/cs_api",
+        delayId: "mock_delay_id",
+      },
+    );
+
+    // Prüfe das Ergebnis
+    expect(config).toMatchObject({
+      jwt: testJWTToken,
+      url: sfuUrl,
+    });
+
+    void (await fetchMock.flush());
+  });
+
   it("should try legacy and then new endpoint with delay delegation", async () => {
     fetchMock.post("https://sfu.example.org/get_token", () => {
       return {
@@ -121,7 +214,7 @@ describe("getSFUConfigWithOpenID", () => {
     expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
     expect(calls[0][1]).toStrictEqual({
       // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":1000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -131,7 +224,7 @@ describe("getSFUConfigWithOpenID", () => {
     expect(calls[1][0]).toStrictEqual("https://sfu.example.org/sfu/get");
 
     expect(calls[1][1]).toStrictEqual({
-      body: '{"room":"!example_room_id","device_id":"DEVICE"}',
+      body: '{"room":"!example_room_id","device_id":"DEVICE","delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
       headers: {
         "Content-Type": "application/json",
       },
@@ -176,7 +269,7 @@ describe("getSFUConfigWithOpenID", () => {
     expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
     expect(calls[0][1]).toStrictEqual({
       // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":1000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
       method: "POST",
       headers: {
         "Content-Type": "application/json",

src/livekit/openIDSFU.ts

@@ -155,6 +155,8 @@ export async function getSFUConfigWithOpenID(
       serviceUrl,
       roomId,
       openIdToken,
+      opts?.delayEndpointBaseUrl,
+      opts?.delayId,
     );
     logger?.info(`Got JWT from call's active focus URL.`);
     return extractFullConfigFromToken(sfuConfig);
@@ -187,20 +189,62 @@ async function getLiveKitJWT(
   livekitServiceURL: string,
   matrixRoomId: string,
   openIDToken: IOpenIDToken,
+  delayEndpointBaseUrl?: string,
+  delayId?: string,
 ): Promise<{ url: string; jwt: string }> {
-  const res = await doNetworkOperationWithRetry(async () => {
+  interface IDelayParams {
+    delay_id?: string;
+    delay_timeout?: number;
+    delay_cs_api_url?: string;
+  }
+  let bodyDalayParts: IDelayParams = {};
+  // Also check for empty string
+  if (delayId && delayEndpointBaseUrl) {
+    const delayTimeoutMs =
+      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms;
+    bodyDalayParts = {
+      delay_id: delayId,
+      delay_timeout: delayTimeoutMs,
+      delay_cs_api_url: delayEndpointBaseUrl,
+    };
+  }
+
+  const makeRequest = async (delayParts: IDelayParams): Promise<Response> => {
     return await fetch(livekitServiceURL + "/sfu/get", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        // This is the actual livekit room alias. For the legacy jwt endpoint simply the room id was used.
+        // The legacy JWT endpoint uses only the matrix room id to calculate the livekit room alias.
+        // However, the livekit room alias is provided as part of the JWT payload.
         room: matrixRoomId,
         openid_token: openIDToken,
         device_id: deviceId,
+        ...delayParts,
       }),
     });
+  };
+
+  const res = await doNetworkOperationWithRetry(async () => {
+    let response = await makeRequest(bodyDalayParts);
+
+    // Old service compatibility check
+    const oldServiceDoesNotSupportDelayParts =
+      response.status === 400 && Object.keys(bodyDalayParts).length > 0;
+    // If http status 400 with M_BAD_JSON and we sent delay parts, retry without them
+    if (oldServiceDoesNotSupportDelayParts) {
+      try {
+        const errorBody = await response.json();
+        if (errorBody.errcode === "M_BAD_JSON") {
+          response = await makeRequest({});
+        }
+      } catch {
+        // If we can't parse the error, treat as real error
+      }
+    }
+
+    return response;
   });
 
   if (!res.ok) {
@@ -241,7 +285,7 @@ export async function getLiveKitJWTWithDelayDelegation(
   // Also check for empty string
   if (delayId && delayEndpointBaseUrl) {
     const delayTimeoutMs =
-      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms ?? 1000;
+      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms;
     bodyDalayParts = {
       delay_id: delayId,
       delay_timeout: delayTimeoutMs,

src/main.tsx

@@ -15,10 +15,6 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import { logger } from "matrix-js-sdk/lib/logger";
-import {
-  setLogExtension as setLKLogExtension,
-  setLogLevel as setLKLogLevel,
-} from "livekit-client";
 
 import { App } from "./App";
 import { init as initRageshake } from "./settings/rageshake";
@@ -26,16 +22,9 @@ import { Initializer } from "./initializer";
 import { AppViewModel } from "./state/AppViewModel";
 import { globalScope } from "./state/ObservableScope";
 
-window.setLKLogLevel = setLKLogLevel;
-
 initRageshake().catch((e) => {
   logger.error("Failed to initialize rageshake", e);
 });
-setLKLogLevel("info");
-setLKLogExtension((level, msg, context) => {
-  // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read
-  global.mx_rage_logger.log(level, "livekit", msg, context);
-});
 
 logger.info(`Element Call ${import.meta.env.VITE_APP_VERSION || "dev"}`);
 

src/room/CallEndedView.module.css

@@ -57,7 +57,8 @@ Please see LICENSE in the repository root for full details.
   flex: 1;
   flex-direction: column;
   align-items: center;
-  padding-inline: var(--inline-content-inset);
+  padding-left: var(--content-inset-left);
+  padding-right: var(--content-inset-right);
 }
 
 .logo {

src/room/EarpieceOverlay.tsx

@@ -30,7 +30,7 @@ export const EarpieceOverlay: FC<Props> = ({ show, onBackToVideoPressed }) => {
       <Text>{t("handset.overlay_description")}</Text>
       <Button
         kind="primary"
-        size="sm"
+        size="md"
         onClick={() => {
           onBackToVideoPressed?.();
         }}

src/room/GroupCallView.test.tsx

@@ -25,7 +25,9 @@ import {
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { BrowserRouter } from "react-router-dom";
-import userEvent from "@testing-library/user-event";
+import userEvent, {
+  PointerEventsCheckLevel,
+} from "@testing-library/user-event";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
 import { useState } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -395,7 +397,11 @@ test("user can reconnect after a membership manager error", async () => {
   // async state update should be processed automatically by the waitFor call),
   // and yet here we are.
   await act(async () =>
-    user.click(screen.getByRole("button", { name: "Reconnect" })),
+    user
+      // With css vitest turned on this test thinks that the button has pointer_events: none;.
+      // TODO investigate if this is a test setup issue or an actual problem.
+      .setup({ pointerEventsCheck: PointerEventsCheckLevel.Never })
+      .click(screen.getByRole("button", { name: "Reconnect" })),
   );
   // In-call controls should be visible again
   await waitFor(() => screen.getByRole("button", { name: "Leave" }));

src/room/InCallView.module.css

@@ -26,6 +26,33 @@ Please see LICENSE in the repository root for full details.
   );
 }
 
+.header.hidden {
+  display: none;
+}
+
+.header.overlay {
+  /* Note that the header is still position: sticky in this case so that certain
+    tiles can move down out of the way of the header when visible. */
+  opacity: 1;
+  transition: opacity 0.15s;
+}
+
+.header.overlay.hidden {
+  display: flex;
+  opacity: 0;
+  pointer-events: none;
+  /* Switch to position: absolute so the header takes up no space in the layout
+    when hidden. */
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+}
+
+.header.overlay:has(:focus-visible) {
+  opacity: 1;
+  pointer-events: initial;
+}
+
 .header.filler {
   block-size: var(--cpd-space-6x);
   background: none;

src/room/InCallView.test.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
+  afterEach,
   beforeEach,
   describe,
   expect,
@@ -14,10 +15,15 @@ import {
   type MockedFunction,
   vi,
 } from "vitest";
-import { render, type RenderResult } from "@testing-library/react";
+import {
+  render,
+  type RenderResult,
+  getByRole,
+  screen,
+} from "@testing-library/react";
 import { type LocalParticipant } from "livekit-client";
 import { BehaviorSubject, of } from "rxjs";
-import { BrowserRouter, MemoryRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { RoomContext, useLocalParticipant } from "@livekit/components-react";
 import userEvent from "@testing-library/user-event";
@@ -34,7 +40,10 @@ import {
 } from "../utils/test";
 import { E2eeType } from "../e2ee/e2eeType";
 import { getBasicCallViewModelEnvironment } from "../utils/test-viewmodel";
-import { type CallViewModelOptions } from "../state/CallViewModel/CallViewModel";
+import {
+  type CallViewModel,
+  type CallViewModelOptions,
+} from "../state/CallViewModel/CallViewModel";
 import { alice, local } from "../utils/test-fixtures";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
@@ -100,13 +109,12 @@ beforeEach(() => {
 interface CreateInCallViewArgs {
   mediaDevices?: ECMediaDevices;
   callViewModelOptions?: Partial<CallViewModelOptions>;
-  /** If set, uses a MemoryRouter with this as the initial entry instead of BrowserRouter */
-  initialRoute?: string;
   /** If true, wraps the rendered tree in an AppBar provider */
   withAppBar?: boolean;
 }
 function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   rtcSession: MockRTCSession;
+  vm: CallViewModel;
 } {
   const mediaDevices = args.mediaDevices ?? mockMediaDevices({});
   const muteState = mockMuteStates();
@@ -118,7 +126,7 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
       remoteParticipants$: of([remoteParticipant]),
     },
   );
-  const { vm, rtcSession } = getBasicCallViewModelEnvironment(
+  const { vm, footerVm, rtcSession } = getBasicCallViewModelEnvironment(
     [local, alice],
     undefined,
     mediaDevices,
@@ -129,20 +137,13 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   const room = rtcSession.room;
   const client = room.client;
 
-  const Router = args.initialRoute
-    ? ({ children }: { children: React.ReactNode }): React.ReactNode => (
-        <MemoryRouter initialEntries={[args.initialRoute!]}>
-          {children}
-        </MemoryRouter>
-      )
-    : BrowserRouter;
-
   const inCallView = (
     <InCallView
       client={client}
       rtcSession={rtcSession.asMockedSession()}
       muteStates={muteState}
       vm={vm}
+      footerVm={footerVm}
       matrixInfo={{
         userId: "",
         displayName: "",
@@ -163,7 +164,7 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   const content = args.withAppBar ? <AppBar>{inCallView}</AppBar> : inCallView;
 
   const renderResult = render(
-    <Router>
+    <BrowserRouter>
       <MediaDevicesContext value={mediaDevices}>
         <ReactionsSenderProvider
           vm={vm}
@@ -174,11 +175,12 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
           </TooltipProvider>
         </ReactionsSenderProvider>
       </MediaDevicesContext>
-    </Router>,
+    </BrowserRouter>,
   );
   return {
     ...renderResult,
     rtcSession,
+    vm,
   };
 }
 
@@ -189,57 +191,46 @@ describe("InCallView", () => {
       expect(container).toMatchSnapshot();
     });
   });
+
   describe("settings button with AppBar header", () => {
-    it("mobile landscape, is accessible when showHeader is false", () => {
-      // windowSize with height <= 600 results in "flat" windowMode,
-      // which means showHeader$ emits false.
-      const { getAllByRole } = createInCallView({
-        initialRoute: "/?header=app_bar",
-        withAppBar: true,
-        callViewModelOptions: {
-          // Set windowMode$ to "flat" (height <= 600)
-          windowSize$: constant({ width: 1000, height: 500 }),
-        },
-      });
-      // When showHeader is false, hideSettingsButton is false,
-      // so the settings button is visible in the footer.
-      const settingsBtn = getAllByRole("button", { name: "Settings" });
-      // here we check for two settings buttons because there are two buttons in the bottom bar. One for the
-      // the narrow layout and another one for the wide layout.
-      // Their visibility uses @media css queries, which cannot be tested in JSDOM,
-      // but we can at least check that both buttons are rendered and have the correct classes.
-      expect(settingsBtn.length).toBe(2);
-      expect(settingsBtn[0]).toHaveAttribute(
-        "data-testid",
-        "settings-bottom-left",
-      );
-      expect(settingsBtn[0]).toBeVisible();
+    beforeEach(() => {
+      // getUrlParams() reads window.location directly rather than from the
+      // React Router context, so MemoryRouter alone is not enough to make
+      // it see "header=app_bar". Push the real URL so both paths agree.
+      window.history.pushState({}, "", "?header=app_bar");
     });
 
-    it("mobile portrait, is accessible when showHeader is true", () => {
-      // windowSize with height > 600 and width > 600 results in "normal" windowMode,
-      // which means showHeader$ emits true.
-      const { getAllByRole } = createInCallView({
-        initialRoute: "/?header=app_bar",
+    afterEach(() => {
+      window.history.pushState({}, "", "/");
+    });
+
+    it("mobile portrait, is visible in the header", () => {
+      createInCallView({
         withAppBar: true,
         callViewModelOptions: {
-          // Set windowMode$ to "normal" (height >= 600)
-          windowSize$: constant({ width: 1000, height: 800 }),
+          // Narrow like a mobile phone in portrait orientation
+          windowSize$: constant({ width: 400, height: 700 }),
         },
       });
-      // When showHeader is true and headerStyle is AppBar,
-      // hideSettingsButton is true in the footer, but the settings
-      // button is rendered in the AppBar via useAppBarSecondaryButton.
-      const settingsBtns = getAllByRole("button", { name: "Settings" });
 
-      expect(settingsBtns.length).toBe(1);
-      expect(settingsBtns[0]).toHaveAttribute(
-        "data-testid",
-        "settings-app-bar",
-      );
-      expect(settingsBtns[0]).toBeVisible();
+      getByRole(screen.getByRole("banner"), "button", {
+        name: "Settings",
+      });
+    });
+
+    it("mobile landscape, is not visible anywhere", () => {
+      const { queryByRole } = createInCallView({
+        withAppBar: true,
+        callViewModelOptions: {
+          // Flat like a mobile phone in landscape orientation
+          windowSize$: constant({ width: 700, height: 400 }),
+        },
+      });
+
+      expect(queryByRole("button", { name: "Settings" })).not.toBeVisible();
     });
   });
+
   describe("audioOutputSwitcher", () => {
     it("is visible and can be clicked", async () => {
       const user = userEvent.setup();

src/room/InCallView.tsx

@@ -8,7 +8,6 @@ Please see LICENSE in the repository root for full details.
 import { type MatrixClient, type Room as MatrixRoom } from "matrix-js-sdk";
 import {
   type FC,
-  type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
   useCallback,
   useEffect,
@@ -21,7 +20,7 @@ import {
 import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
-import { BehaviorSubject, map } from "rxjs";
+import { map } from "rxjs";
 import { useObservable } from "observable-hooks";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { useTranslation } from "react-i18next";
@@ -43,7 +42,6 @@ import { InviteButton } from "../button/InviteButton";
 import {
   type CallViewModel,
   createCallViewModel$,
-  type GridMode,
 } from "../state/CallViewModel/CallViewModel.ts";
 import { Grid, type TileProps } from "../grid/Grid";
 import { useInitial } from "../useInitial";
@@ -51,12 +49,9 @@ import { SpotlightTile } from "../tile/SpotlightTile";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { E2eeType } from "../e2ee/e2eeType";
 import { makeGridLayout } from "../grid/GridLayout";
-import {
-  type CallLayoutOutputs,
-  defaultPipAlignment,
-  defaultSpotlightAlignment,
-} from "../grid/CallLayout";
-import { makeOneOnOneLayout } from "../grid/OneOnOneLayout";
+import { type CallLayoutOutputs } from "../grid/CallLayout";
+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";
@@ -68,11 +63,7 @@ import {
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { ReactionsOverlay } from "./ReactionsOverlay";
 import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
-import {
-  debugTileLayout as debugTileLayoutSetting,
-  matrixRTCMode as matrixRTCModeSetting,
-  useSetting,
-} from "../settings/settings";
+import { matrixRTCMode as matrixRTCModeSetting } from "../settings/settings";
 import { ReactionsReader } from "../reactions/ReactionsReader";
 import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
 import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
@@ -90,14 +81,23 @@ import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.t
 import { type Layout } from "../state/layout-types.ts";
 import { ObservableScope } from "../state/ObservableScope.ts";
 import { useLatest } from "../useLatest.ts";
-import { CallFooter } from "../components/CallFooter.tsx";
+import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
 import { SettingsIconButton } from "../button/Button.tsx";
+import { createCallFooterViewModel } from "../components/CallFooterViewModel.tsx";
+import { type ViewModel } from "../state/ViewModel.ts";
+
+declare module "react" {
+  interface CSSProperties {
+    "--call-view-safe-area-inset-top"?: string;
+    "--call-view-safe-area-inset-bottom"?: string;
+  }
+}
 
 const logger = rootLogger.getChild("[InCallView]");
 
 export interface ActiveCallProps extends Omit<
   InCallViewProps,
-  "vm" | "livekitRoom" | "connState"
+  "vm" | "livekitRoom" | "connState" | "footerVm"
 > {
   e2eeSystem: EncryptionSystem;
   // TODO refactor those reasons into an enum
@@ -108,7 +108,9 @@ export interface ActiveCallProps extends Omit<
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const [vm, setVm] = useState<CallViewModel | null>(null);
-
+  const [footerVm, setFooterVm] = useState<ViewModel<FooterSnapshot> | null>(
+    null,
+  );
   const urlParams = useUrlParams();
   const mediaDevices = useMediaDevices();
   const trackProcessorState$ = useTrackProcessorObservable$();
@@ -118,6 +120,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     const reactionsReader = new ReactionsReader(scope, props.rtcSession);
     const { autoLeaveWhenOthersLeft, waitForCallPickup, sendNotificationType } =
       urlParams;
+
     const vm = createCallViewModel$(
       scope,
       props.rtcSession,
@@ -141,7 +144,6 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     vm.leave$.pipe(scope.bind()).subscribe(props.onLeft);
 
     return (): void => {
-      logger.info("END CALL VIEW SCOPE");
       scope.end();
     };
   }, [
@@ -153,13 +155,44 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     urlParams,
     mediaDevices,
     trackProcessorState$,
+    props.client,
+  ]);
+
+  useEffect(() => {
+    if (vm === null) return;
+
+    const scope = new ObservableScope();
+    const footerVm = createCallFooterViewModel(
+      scope,
+      vm,
+      props.muteStates,
+      mediaDevices,
+      `${props.client.getUserId()}:${props.client.getDeviceId()}`,
+    );
+    setFooterVm(footerVm);
+
+    return (): void => {
+      scope.end();
+    };
+  }, [
+    props.rtcSession,
+    props.matrixRoom,
+    props.muteStates,
+    props.e2eeSystem,
+    props.onLeft,
+    urlParams,
+    mediaDevices,
+    trackProcessorState$,
+    props.client,
+    vm,
   ]);
 
   if (vm === null) return null;
+  if (footerVm === null) return null;
 
   return (
     <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
-      <InCallView {...props} vm={vm} />
+      <InCallView {...props} vm={vm} footerVm={footerVm} />
     </ReactionsSenderProvider>
   );
 };
@@ -167,6 +200,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
 export interface InCallViewProps {
   client: MatrixClient;
   vm: CallViewModel;
+  footerVm: ViewModel<FooterSnapshot>;
   matrixInfo: MatrixInfo;
   rtcSession: MatrixRTCSession;
   matrixRoom: MatrixRoom;
@@ -177,14 +211,14 @@ export interface InCallViewProps {
 export const InCallView: FC<InCallViewProps> = ({
   client,
   vm,
+  footerVm,
   matrixInfo,
   matrixRoom,
   muteStates,
   onShareClick,
 }) => {
   const { t } = useTranslation();
-  const { supportsReactions, sendReaction, toggleRaisedHand } =
-    useReactionsSender();
+  const { sendReaction, toggleRaisedHand } = useReactionsSender();
 
   useWakeLock();
   // TODO-MULTI-SFU This is unused now??
@@ -220,17 +254,11 @@ export const InCallView: FC<InCallViewProps> = ({
     muted: muteAllAudio,
   });
   const latestPickupPhaseAudio = useLatest(pickupPhaseAudio);
-
-  const audioEnabled = useBehavior(muteStates.audio.enabled$);
-  const videoEnabled = useBehavior(muteStates.video.enabled$);
   const toggleAudio = useBehavior(muteStates.audio.toggle$);
   const toggleVideo = useBehavior(muteStates.video.toggle$);
   const setAudioEnabled = useBehavior(muteStates.audio.setEnabled$);
 
-  // This function incorrectly assumes that there is a camera and microphone, which is not always the case.
-  // TODO: Make sure that this module is resilient when it comes to camera/microphone availability!
   useCallViewKeyboardShortcuts(
-    containerRef1,
     toggleAudio,
     toggleVideo,
     setAudioEnabled,
@@ -242,16 +270,14 @@ export const InCallView: FC<InCallViewProps> = ({
   const audioParticipants = useBehavior(vm.livekitRoomItems$);
   const participantCount = useBehavior(vm.participantCount$);
   const reconnecting = useBehavior(vm.reconnecting$);
-  const windowMode = useBehavior(vm.windowMode$);
   const layout = useBehavior(vm.layout$);
-  const tileStoreGeneration = useBehavior(vm.tileStoreGeneration$);
-  const [debugTileLayout] = useSetting(debugTileLayoutSetting);
-  const gridMode = useBehavior(vm.gridMode$);
+  const edgeToEdge = useBehavior(vm.edgeToEdge$);
+  const showNameTags = useBehavior(vm.showNameTags$);
   const showHeader = useBehavior(vm.showHeader$);
-  const showFooter = useBehavior(vm.showFooter$);
+  const settingsOpen = useBehavior(vm.settingsOpen$);
+  const setSettingsOpen = useBehavior(vm.setSettingsOpen$);
   const earpieceMode = useBehavior(vm.earpieceMode$);
   const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
-  const sharingScreen = useBehavior(vm.sharingScreen$);
 
   const fatalCallError = useBehavior(vm.fatalError$);
   // Stop the rendering and throw for the error boundary
@@ -276,10 +302,13 @@ export const InCallView: FC<InCallViewProps> = ({
     }
   }, [ringing, latestPickupPhaseAudio]);
 
-  const onViewClick = useCallback(
-    (e: ReactMouseEvent) => {
+  // iOS Safari doesn't reliably fire `click` on plain <div>s, so we listen
+  // for `pointerup` instead. Scrolls end in `pointercancel`, not `pointerup`,
+  // so this still only fires for taps.
+  const onViewPointerUp = useCallback(
+    (e: ReactPointerEvent) => {
       if (
-        (e.nativeEvent as PointerEvent).pointerType === "touch" &&
+        e.pointerType === "touch" &&
         // If an interactive element was tapped, don't count this as a tap on the screen
         (e.target as Element).closest?.("button, input") === null
       )
@@ -296,28 +325,18 @@ export const InCallView: FC<InCallViewProps> = ({
   );
   const onPointerOut = useCallback(() => vm.unhoverScreen(), [vm]);
 
-  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
   const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
 
-  const openSettings = useCallback(
-    () => setSettingsModalOpen(true),
-    [setSettingsModalOpen],
-  );
-  const closeSettings = useCallback(
-    () => setSettingsModalOpen(false),
-    [setSettingsModalOpen],
-  );
-
   const openProfile = useMemo(
     () =>
       // Profile settings are unavailable in widget mode
       widget === null
         ? (): void => {
             setSettingsTab("profile");
-            setSettingsModalOpen(true);
+            setSettingsOpen(true);
           }
         : null,
-    [setSettingsTab, setSettingsModalOpen],
+    [setSettingsTab, setSettingsOpen],
   );
 
   const [headerRef, headerBounds] = useMeasure();
@@ -328,15 +347,14 @@ export const InCallView: FC<InCallViewProps> = ({
       width: bounds.width,
       height:
         bounds.height -
-        headerBounds.height -
-        (windowMode === "flat" ? 0 : footerBounds.height),
+        (edgeToEdge ? 0 : headerBounds.height + footerBounds.height),
     }),
     [
       bounds.width,
       bounds.height,
       headerBounds.height,
       footerBounds.height,
-      windowMode,
+      edgeToEdge,
     ],
   );
   const gridBoundsObservable$ = useObservable(
@@ -344,64 +362,50 @@ export const InCallView: FC<InCallViewProps> = ({
     [gridBounds],
   );
 
-  const spotlightAlignment$ = useInitial(
-    () => new BehaviorSubject(defaultSpotlightAlignment),
-  );
-  const pipAlignment$ = useInitial(
-    () => new BehaviorSubject(defaultPipAlignment),
-  );
-
-  const setGridMode = useCallback(
-    (mode: GridMode) => vm.setGridMode(mode),
-    [vm],
-  );
-
   useAppBarHidden(!showHeader);
 
   let header: ReactNode = null;
-  if (showHeader) {
-    switch (headerStyle) {
-      case HeaderStyle.AppBar: {
-        // dont build a header here. The AppBar will take care of it.
-        break;
-      }
-      case HeaderStyle.None:
-        // Cosmetic header to fill out space while still affecting the bounds of
-        // the grid
-        header = (
-          <div
-            className={classNames(styles.header, styles.filler)}
-            ref={headerRef}
-          />
-        );
-        break;
-      case HeaderStyle.Standard:
-        header = (
-          <Header
-            className={styles.header}
-            ref={headerRef}
-            disconnectedBanner={false} // This screen has its own 'reconnecting' toast
-          >
-            <LeftNav>
-              <RoomHeaderInfo
-                id={matrixInfo.roomId}
-                name={matrixInfo.roomName}
-                avatarUrl={matrixInfo.roomAvatar}
-                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
-                participantCount={participantCount}
-              />
-            </LeftNav>
-            <RightNav>
-              {showControls && onShareClick !== null && (
-                <InviteButton
-                  className={styles.invite}
-                  onClick={onShareClick}
-                />
-              )}
-            </RightNav>
-          </Header>
-        );
+  switch (headerStyle) {
+    case HeaderStyle.AppBar: {
+      // dont build a header here. The AppBar will take care of it.
+      break;
     }
+    case HeaderStyle.None:
+      // Cosmetic header to fill out space while still affecting the bounds of
+      // the grid
+      header = showHeader && (
+        <div
+          className={classNames(styles.header, styles.filler)}
+          ref={headerRef}
+        />
+      );
+      break;
+    case HeaderStyle.Standard:
+      header = (
+        <Header
+          className={classNames(styles.header, {
+            [styles.overlay]: edgeToEdge,
+            [styles.hidden]: !showHeader,
+          })}
+          ref={headerRef}
+          disconnectedBanner={false} // This screen has its own 'reconnecting' toast
+        >
+          <LeftNav>
+            <RoomHeaderInfo
+              id={matrixInfo.roomId}
+              name={matrixInfo.roomName}
+              avatarUrl={matrixInfo.roomAvatar}
+              encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
+              participantCount={participantCount}
+            />
+          </LeftNav>
+          <RightNav>
+            {showControls && onShareClick !== null && (
+              <InviteButton className={styles.invite} onClick={onShareClick} />
+            )}
+          </RightNav>
+        </Header>
+      );
   }
 
   // The reconnecting toast cannot be dismissed
@@ -448,12 +452,11 @@ export const InCallView: FC<InCallViewProps> = ({
       }: TileProps<TileViewModel, HTMLDivElement>): ReactNode {
         const spotlightExpanded = useBehavior(vm.spotlightExpanded$);
         const onToggleExpanded = useBehavior(vm.toggleSpotlightExpanded$);
-        const showSpeakingIndicatorsValue = useBehavior(
-          vm.showSpeakingIndicators$,
-        );
-        const showSpotlightIndicatorsValue = useBehavior(
+        const showSpotlightIndicators = useBehavior(
           vm.showSpotlightIndicators$,
         );
+        const showSpeakingIndicators = useBehavior(vm.showSpeakingIndicators$);
+        const showNameTags = useBehavior(vm.showNameTags$);
 
         return model instanceof GridTileViewModel ? (
           <GridTile
@@ -464,7 +467,8 @@ export const InCallView: FC<InCallViewProps> = ({
             targetHeight={targetHeight}
             className={classNames(className, styles.tile)}
             style={style}
-            showSpeakingIndicators={showSpeakingIndicatorsValue}
+            showSpeakingIndicators={showSpeakingIndicators}
+            showNameTags={showNameTags}
             focusable={!contentObscured}
           />
         ) : (
@@ -475,7 +479,8 @@ export const InCallView: FC<InCallViewProps> = ({
             onToggleExpanded={onToggleExpanded}
             targetWidth={targetWidth}
             targetHeight={targetHeight}
-            showIndicators={showSpotlightIndicatorsValue}
+            showIndicators={showSpotlightIndicators}
+            showNameTags={showNameTags}
             focusable={!contentObscured}
             className={classNames(className, styles.tile)}
             style={style}
@@ -486,20 +491,18 @@ export const InCallView: FC<InCallViewProps> = ({
   );
 
   const layouts = useMemo(() => {
-    const inputs = {
-      minBounds$: gridBoundsObservable$,
-      spotlightAlignment$,
-      pipAlignment$,
-    };
+    const inputs = { minBounds$: gridBoundsObservable$ };
     return {
       grid: makeGridLayout(inputs),
       "spotlight-landscape": makeSpotlightLandscapeLayout(inputs),
       "spotlight-portrait": makeSpotlightPortraitLayout(inputs),
       "spotlight-expanded": makeSpotlightExpandedLayout(inputs),
-      "one-on-one": makeOneOnOneLayout(inputs),
+      "one-on-one-landscape": makeOneOnOneLandscapeLayout(inputs),
+      "one-on-one-portrait": makeOneOnOnePortraitLayout(inputs),
     };
-  }, [gridBoundsObservable$, spotlightAlignment$, pipAlignment$]);
+  }, [gridBoundsObservable$]);
 
+  const showFooter = useBehavior(footerVm.showFooter$);
   const renderContent = (): JSX.Element => {
     if (layout.type === "pip") {
       return (
@@ -511,6 +514,7 @@ export const InCallView: FC<InCallViewProps> = ({
           targetWidth={gridBounds.width}
           targetHeight={gridBounds.height}
           showIndicators={false}
+          showNameTags={showNameTags}
           focusable={!contentObscured}
           aria-hidden={contentObscured}
         />
@@ -523,9 +527,26 @@ export const InCallView: FC<InCallViewProps> = ({
         key="fixed"
         className={styles.fixedGrid}
         style={{
-          insetBlockStart:
-            headerBounds.height > 0 ? headerBounds.bottom : bounds.top,
-          height: gridBounds.height,
+          // If not edge-to-edge, consume the header insets right here.
+          insetBlockStart: edgeToEdge ? 0 : bounds.top + headerBounds.height,
+          height: edgeToEdge ? "100%" : gridBounds.height,
+          // If edge-to-edge, compute new safe area insets that account for the
+          // header and footer, passing them down to the tiles.
+          "--call-view-safe-area-inset-top":
+            edgeToEdge && headerStyle !== HeaderStyle.None && showHeader
+              ? // Header has two relevant cases: if it's an app bar, it lives
+                // outside the InCallView and consumes the safe area insets
+                // itself. Otherwise account for the safe area and header size
+                // as part of the InCallView.
+                headerStyle === HeaderStyle.AppBar
+                ? `${bounds.top}px`
+                : `calc(env(safe-area-inset-top) + ${headerBounds.height}px)`
+              : undefined,
+          "--call-view-safe-area-inset-bottom":
+            edgeToEdge && showFooter
+              ? // Footer always lives inside the InCallView.
+                `calc(env(safe-area-inset-bottom) + ${footerBounds.height}px)`
+              : undefined,
         }}
         model={layout}
         Layout={layers.fixed}
@@ -543,75 +564,52 @@ export const InCallView: FC<InCallViewProps> = ({
         aria-hidden={contentObscured}
       />
     );
-    // The grid tiles go *under* the spotlight in the portrait layout, but
-    // *over* the spotlight in the expanded layout
-    return layout.type === "spotlight-expanded" ? (
-      <>
-        {fixedGrid}
-        {scrollingGrid}
-      </>
-    ) : (
-      <>
-        {scrollingGrid}
-        {fixedGrid}
-      </>
-    );
+
+    // Put the right layer in the foreground for the requested layout
+    switch (layers.foreground) {
+      case "fixed":
+        return (
+          <>
+            {scrollingGrid}
+            {fixedGrid}
+          </>
+        );
+      case "scrolling":
+        return (
+          <>
+            {fixedGrid}
+            {scrollingGrid}
+          </>
+        );
+    }
   };
 
   const rageshakeRequestModalProps = useRageshakeRequestModal(
     matrixRoom.roomId,
   );
 
-  const settingsButtonInAppBar =
-    headerStyle === HeaderStyle.AppBar && showHeader;
   useAppBarSecondaryButton(
     <SettingsIconButton
       key="settings"
-      onClick={openSettings}
+      onClick={() => setSettingsOpen(true)}
       data-testid="settings-app-bar"
     />,
   );
 
   // Only hide the settings button if we have an AppBar header and we are showing the header
-  const footer = (
-    <CallFooter
-      ref={footerRef}
-      hidden={!showFooter}
-      hideControls={!showControls}
-      asOverlay={windowMode === "flat"}
-      asPip={layout.type === "pip"}
-      // Hide the logo for both embedded solutions. mobile: HeaderStyle.AppBar and desktop: HeaderStyle.None.
-      hideLogo={headerStyle !== HeaderStyle.Standard}
-      layoutMode={gridMode}
-      setLayoutMode={setGridMode}
-      audioEnabled={audioEnabled}
-      toggleAudio={toggleAudio ?? undefined}
-      videoEnabled={videoEnabled}
-      toggleVideo={toggleVideo ?? undefined}
-      sharingScreen={sharingScreen}
-      toggleScreenSharing={vm.toggleScreenSharing ?? undefined}
-      reactionIdentifier={`${client.getUserId()}:${client.getDeviceId()}`}
-      reactionData={supportsReactions ? vm : undefined}
-      audioOutputSwitcher={audioOutputSwitcher ?? undefined}
-      // Only pass the openSettings function if the settings button is not in the app bar.
-      // If there is no fn the button will be hidden in the footer.
-      openSettings={settingsButtonInAppBar ? undefined : openSettings}
-      hangup={vm.hangup}
-      //Debug props
-      debugTileLayout={debugTileLayout}
-      tileStoreGeneration={tileStoreGeneration}
-    />
+  const footer = footerVm !== null && (
+    <CallFooter ref={footerRef} vm={footerVm} />
   );
   const allConnections = useBehavior(vm.allConnections$);
 
   return (
-    // The onClick handler here exists to control the visibility of the footer,
+    // The pointer handler here exists to control the visibility of the footer,
     // 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, jsx-a11y/click-events-have-key-events
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       className={styles.inRoom}
       ref={containerRef}
-      onClick={onViewClick}
+      onPointerUp={onViewPointerUp}
       onPointerMove={onPointerMove}
       onPointerOut={onPointerOut}
     >
@@ -638,8 +636,8 @@ export const InCallView: FC<InCallViewProps> = ({
           <SettingsModal
             client={client}
             roomId={matrixRoom.roomId}
-            open={settingsModalOpen}
-            onDismiss={closeSettings}
+            open={settingsOpen}
+            onDismiss={(): void => setSettingsOpen(false)}
             tab={settingsTab}
             onTabChange={setSettingsTab}
             livekitRooms={allConnections

src/room/LayoutToggle.module.css

@@ -1,79 +0,0 @@
-/*
-Copyright 2023, 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-.toggle {
-  padding: 2px;
-  border: 1px solid var(--cpd-color-border-interactive-secondary);
-  border-radius: var(--cpd-radius-pill-effect);
-  background: var(--cpd-color-bg-canvas-default);
-  display: flex;
-  position: relative;
-}
-
-.toggle input {
-  appearance: none;
-  /* Safari puts a margin on these, which is not removed via appearance: none */
-  margin: 0;
-  block-size: var(--cpd-space-11x);
-  inline-size: var(--cpd-space-11x);
-  cursor: pointer;
-  border-radius: var(--cpd-radius-pill-effect);
-  background: var(--cpd-color-bg-action-secondary-rest);
-  box-shadow: var(--small-drop-shadow);
-  transition: background-color 0.1s;
-}
-
-.toggle svg {
-  display: block;
-  position: absolute;
-  padding: calc(2.5 * var(--cpd-space-1x));
-  pointer-events: none;
-  color: var(--cpd-color-icon-primary);
-  transition: color 0.1s;
-}
-
-.toggle svg:nth-child(2) {
-  inset-inline-start: 2px;
-}
-
-.toggle svg:nth-child(4) {
-  inset-inline-end: 2px;
-}
-
-@media (hover: hover) {
-  .toggle input:hover {
-    background: var(--cpd-color-bg-action-secondary-hovered);
-    box-shadow: none;
-  }
-}
-
-.toggle input:active {
-  background: var(--cpd-color-bg-action-secondary-pressed);
-  box-shadow: none;
-}
-
-.toggle input:checked {
-  background: var(--cpd-color-bg-action-primary-rest);
-}
-
-.toggle input:checked + svg {
-  color: var(--cpd-color-icon-on-solid-primary);
-}
-
-@media (hover: hover) {
-  .toggle input:checked:hover {
-    background: var(--cpd-color-bg-action-primary-hovered);
-  }
-}
-
-.toggle input:checked:active {
-  background: var(--cpd-color-bg-action-primary-pressed);
-}
-
-.toggle input:first-child {
-  margin-inline-end: 5px;
-}