Merge branch 'livekit' into fkwp/change_video_codec

.eslintrc.cjs

@@ -0,0 +1,116 @@
+const COPYRIGHT_HEADER = `/*
+Copyright %%CURRENT_YEAR%% New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+`;
+
+module.exports = {
+  plugins: ["matrix-org", "rxjs", "jsdoc"],
+  extends: [
+    "plugin:matrix-org/react",
+    "plugin:matrix-org/a11y",
+    "plugin:matrix-org/typescript",
+    "prettier",
+    "plugin:rxjs/recommended",
+    "plugin:storybook/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json"],
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+  rules: {
+    "jsdoc/no-types": "error",
+    "jsdoc/empty-tags": "error",
+    "jsdoc/check-property-names": "error",
+    "jsdoc/check-values": "error",
+    "jsdoc/check-param-names": "warn",
+    // "jsdoc/require-param": "warn",
+    "jsdoc/require-param-description": "warn",
+    "matrix-org/require-copyright-header": ["error", COPYRIGHT_HEADER],
+    "jsx-a11y/media-has-caption": "off",
+    "react/display-name": "error",
+    // Encourage proper usage of Promises:
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/no-misused-promises": "error",
+    "@typescript-eslint/promise-function-async": "error",
+    "@typescript-eslint/require-await": "error",
+    "@typescript-eslint/await-thenable": "error",
+    // To help ensure that we get proper vite/rollup lazy loading (e.g. for matrix-js-sdk):
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      { fixStyle: "inline-type-imports" },
+    ],
+    // To encourage good usage of RxJS:
+    "rxjs/no-exposed-subjects": "error",
+    "rxjs/finnish": ["error", { names: { "^this$": false } }],
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: ["matrix-widget-api", "matrix-js-sdk"].flatMap((lib) =>
+          ["src", "src/", "src/index", "lib", "lib/", "lib/index"]
+            .map((path) => `${lib}/${path}`)
+            .map((name) => ({ name, message: `Please use ${lib} instead` })),
+        ),
+        patterns: [
+          ...["matrix-widget-api"].map((lib) => ({
+            group: ["src", "src/", "src/**", "lib", "lib/", "lib/**"].map(
+              (path) => `${lib}/${path}`,
+            ),
+            message: `Please use ${lib} instead`,
+          })),
+          // XXX: We use /lib in lots of places, so allow for now.
+          ...["matrix-js-sdk"].map((lib) => ({
+            group: ["src", "src/", "src/**"].map((path) => `${lib}/${path}`),
+            message: `Please use ${lib} instead`,
+          })),
+        ],
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ["src/*/**"],
+      rules: {
+        // In application code we should use the js-sdk logger, never console directly.
+        "no-console": ["error"],
+      },
+    },
+    {
+      files: [
+        "**/*.test.ts",
+        "**/*.test.tsx",
+        "**/test.ts",
+        "**/test.tsx",
+        "**/test-**",
+      ],
+      rules: {
+        "jsdoc/no-types": "off",
+        "jsdoc/empty-tags": "off",
+        "jsdoc/check-property-names": "off",
+        "jsdoc/check-values": "off",
+        "jsdoc/check-param-names": "off",
+        "jsdoc/require-param-description": "off",
+      },
+    },
+    {
+      files: ["playwright/**"],
+      rules: {
+        // Playwright as a `use` function that has nothing to do with React hooks.
+        "react-hooks/rules-of-hooks": "off",
+      },
+    },
+  ],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

.github/labels.yml

@@ -1,253 +0,0 @@
-- name: "A-1:1"
-  description: "Calls between two people"
-  color: "bfd4f2"
-- name: "A-Big-Grid"
-  description: "The freedom layout system used for >12 participants"
-  color: "bfd4f2"
-- name: "A-Developer-Experience"
-  description: "Workflow of developing: building, linting, debugging, profiling, etc."
-  color: "c5def5"
-- name: "A-E2EE"
-  description: "End-to-end encryption"
-  color: "bfd4f2"
-- name: "A-Embedded"
-  description: "Using the app embedded within other Matrix clients (as a widget)"
-  color: "bfd4f2"
-- name: "A-Feedback-Reporting"
-  description: "Reporting process for bugs, debug logs (rageshakes), suggestions"
-  color: "bfd4f2"
-- name: "A-Freedom"
-  description: "Freedom layout, where participants can be rearranged and resized"
-  color: "bfd4f2"
-- name: "A-Handset"
-  description: "Audio playback through the earpiece of a phone. Also known as 'earpiece mode' or 'handset mode'."
-  color: "bfd4f2"
-- name: "A-Huddle"
-  description: "Ad-hoc calls in a room notifying others"
-  color: "bfd4f2"
-- name: "A-Lobby"
-  description: "The page before joining a call"
-  color: "bfd4f2"
-- name: "A-Login"
-  color: "bfd4f2"
-- name: "A-Matrix2.0"
-  description: "Issues relating to the Matrix 2.0 / MSC4143 work, such as sticky events and multi-sfu"
-  color: "bfd4f2"
-- name: "A-Media-Devices"
-  color: "BFD4F2"
-- name: "A-Media-Quality"
-  description: "Distortions or glitches in audio/video"
-  color: "bfd4f2"
-- name: "A-Meeting"
-  description: "Scheduled call on the calendar"
-  color: "bfd4f2"
-- name: "A-Mobile"
-  description: "Using the app on a mobile device"
-  color: "bfd4f2"
-- name: "A-Moderation"
-  description: "Access to calls and powers within calls"
-  color: "bfd4f2"
-- name: "A-Performance"
-  color: "bfd4f2"
-- name: "A-Reactions"
-  color: "bfd4f2"
-- name: "A-Registration"
-  color: "bfd4f2"
-- name: "A-Screen-Sharing"
-  color: "bfd4f2"
-- name: "A-SDK"
-  description: "SDK for building MatrixRTC + LiveKit widgets"
-  color: "c5def5"
-- name: "A-Settings"
-  color: "bfd4f2"
-- name: "A-SFU"
-  description: "Routing calls through a selective forwarding unit"
-  color: "bfd4f2"
-- name: "A-Signaling"
-  description: "Call signaling"
-  color: "bfd4f2"
-- name: "A-Simulcast"
-  description: "Automatic selection of variable video resolutions"
-  color: "bfd4f2"
-- name: "A-SPA"
-  description: "Standalone application accessed via call links"
-  color: "bfd4f2"
-- name: "A-Spatial-Audio"
-  description: "Directional audio based on where a speaker appears on screen"
-  color: "bfd4f2"
-- name: "A-Speech-Enhancement"
-  description: "Techniques to enhance the intelligibility of speech in calls"
-  color: "c5def5"
-- name: "A-Split-Grid"
-  description: "The freedom layout system used for ≤12 participants"
-  color: "bfd4f2"
-- name: "A-Spotlight"
-  description: "Spotlight layout, where the active speaker is foregrounded"
-  color: "bfd4f2"
-- name: "A-Telemetry-Posthog"
-  description: "Share opt in usage data for optimizing the app via posthog"
-  color: "bfd4f2"
-- name: "A-Testing"
-  description: "Integration tests, unit tests, etc."
-  color: "bfd4f2"
-- name: "A-Video-Rooms"
-  description: "Rooms reserved exclusively for calling"
-  color: "bfd4f2"
-- name: "A-Walkie-Talkie"
-  description: "Walkie-talkie / PTT (push-to-talk) mode"
-  color: "bfd4f2"
-- name: "A11y"
-  description: "Accessibility"
-  color: "4ADEC0"
-- name: "backport-candidate"
-  description: "Something that is a candidate for backport to a particular release branch"
-  color: "0B8D85"
-- name: "customer-retainer"
-  color: "F44A5F"
-- name: "dependencies"
-  description: "Pull requests that update a dependency file"
-  color: "0366d6"
-- name: "development build"
-  description: "runs yarn build process in development mode"
-  color: "1d76db"
-- name: "Discord"
-  description: "Use case familiar to Discord users"
-  color: "3670d2"
-- name: "docker build"
-  description: "Creates a docker image for this PR"
-  color: "0e8a16"
-- name: "EPIC"
-  color: "5319E7"
-- name: "good first issue"
-  description: "Good for newcomers"
-  color: "7057ff"
-- name: "Help Wanted"
-  description: "Community contributions are welcome!"
-  color: "159818"
-- name: "I18n"
-  description: "Internationalisation"
-  color: "d4c5f9"
-- name: "O-Frequent"
-  description: "Affects or can be seen by most users regularly or impacts most users' first experience"
-  color: "0052CC"
-- name: "O-Occasional"
-  description: "Affects or can be seen by some users regularly or most users rarely"
-  color: "1D76DB"
-- name: "O-Uncommon"
-  description: "Most users are unlikely to come across this or unexpected workflow"
-  color: "C5DEF5"
-- name: "p1"
-  description: "Must fix/implement before this is usable as a product"
-  color: "D93F0B"
-- name: "p2"
-  description: "Should fix/implement, but not at the expense of p1s"
-  color: "FBCA04"
-- name: "p3"
-  description: "Could fix/implement when time allows"
-  color: "0E8A16"
-- name: "PR-Breaking-Change"
-  description: "A Pull request that changes EC in a way that is incompatible to the previous version."
-  color: "D93F0B"
-- name: "PR-Bug-Fix"
-  description: "Release note category. A PR that fixes a bug."
-  color: "C2E0C6"
-- name: "PR-Developer-Experience"
-  description: "Release note category. A PR that does not change EC but improves working with the repository."
-  color: "C2E0C6"
-- name: "PR-Documentation"
-  description: "Release note category. A PR that improves the documentation."
-  color: "C2E0C6"
-- name: "PR-Feature"
-  description: "Release note category. A PR that introduces a new user facing feature."
-  color: "C2E0C6"
-- name: "PR-Improvement"
-  description: "Release note category. A PR that improves EC's performance or stability."
-  color: "C2E0C6"
-- name: "PR-Task"
-  description: "Release note category. A PR that is hidden from release note."
-  color: "C2E0C6"
-- name: "Privacy"
-  color: "f41192"
-- name: "Roadmap"
-  color: "57457E"
-- name: "S-Critical"
-  description: "Prevents work, causes data loss and/or has no workaround"
-  color: "bd0026"
-- name: "S-Major"
-  description: "Severely degrades major functionality or product features, with no satisfactory workaround"
-  color: "fc4e2a"
-- name: "S-Minor"
-  description: "Impairs non-critical functionality or suitable workarounds exist"
-  color: "feb24c"
-- name: "S-Tolerable"
-  description: "Low/no impact on users"
-  color: "ffeda0"
-- name: "Security"
-  color: "b3e5fc"
-- name: "storybook build"
-  description: "Build and deploy the storybook frontend to netlify."
-  color: "45cd61"
-- name: "T-Defect"
-  description: "Something isn't working: bugs, crashes, hangs, vulnerabilities, or other reported problems"
-  color: "98e6ae"
-- name: "T-Enhancement"
-  description: "New features, changes in functionality, performance boosts, user-facing improvements"
-  color: "98e6ae"
-- name: "T-Other"
-  description: "Questions, user support, anything else"
-  color: "98e6ae"
-- name: "T-Task"
-  description: "Refactoring, enabling or disabling functionality, other engineering tasks"
-  color: "98e6ae"
-- name: "X-Blocked"
-  description: "Cannot be merged due to external dependencies"
-  color: "ff7979"
-- name: "X-Cannot-Reproduce"
-  description: "Needs reproduction steps"
-  color: "ff7979"
-- name: "X-Needs-Design"
-  description: "May require input from the design team"
-  color: "ff7979"
-- name: "X-Needs-Info"
-  description: "This issue is blocked awaiting information from the reporter"
-  color: "ff7979"
-- name: "X-Needs-Investigation"
-  color: "ff7979"
-- name: "X-Needs-Product"
-  description: "More input needed from the Product team"
-  color: "ff7979"
-- name: "X-Regression"
-  color: "ff7979"
-- name: "X-Release-Blocker"
-  color: "ff7979"
-- name: "X-Spec-Changes"
-  description: "May require spec changes"
-  color: "ff7979"
-- name: "X-Won't-Fix"
-  description: "This will not be worked on"
-  color: "ff7979"
-- name: "Z-Community-Testing"
-  description: "Issues found during the community testing sessions"
-  color: "efefef"
-- name: "Z-Could"
-  color: "ededed"
-- name: "Z-Design"
-  color: "ededed"
-- name: "Z-Flaky-Test"
-  color: "aaaaaa"
-- name: "Z-Media-Failure"
-  description: "Someone's audio or video isn't coming through"
-  color: "ededed"
-- name: "Z-Must"
-  color: "ededed"
-- name: "Z-Platform-Specific"
-  color: "ededed"
-- name: "Z-Power-Users"
-  color: "ededed"
-- name: "Z-ProductPolish"
-  color: "aaaaaa"
-- name: "Z-Should"
-  color: "ededed"
-- name: "Z-Splitbrain"
-  description: "Someone who should be on the call isn't showing up"
-  color: "ededed"

.github/workflows/lint.yaml

@@ -2,7 +2,7 @@ name: Lint, format & type check
 on:
   pull_request: {}
 jobs:
-  lint:
+  prettier:
     name: Lint, format & type check
     runs-on: ubuntu-latest
     steps:
@@ -20,12 +20,12 @@ jobs:
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
         run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
-      - name: Formatting
-        run: "pnpm run format:check"
+      - name: Prettier
+        run: "pnpm run prettier:check"
       - name: i18n
         run: "pnpm run i18n:check"
-      - name: Lint
-        run: "pnpm run lint:oxlint"
+      - name: ESLint
+        run: "pnpm run lint:eslint"
       - name: Type check
         run: "pnpm run lint:types"
       - name: Dead code analysis

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

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

.github/workflows/sync-labels.yml

@@ -1,23 +0,0 @@
-name: Sync labels
-on:
-  workflow_dispatch: {}
-
-  push:
-    branches:
-      - main
-    paths:
-      - .github/labels.yml
-      - .github/workflows/sync-labels.yml
-
-permissions: {} # We use LABEL_SYNC_GITHUB_TOKEN instead
-
-jobs:
-  sync-labels:
-    uses: element-hq/element-meta/.github/workflows/sync-labels.yml@7f2f93fb9b52ece7a0998f60e64862aa203c1746
-    with:
-      LABELS: |
-        .github/labels.yml
-      DELETE: true
-      WET: true
-    secrets:
-      ELEMENT_BOT_TOKEN: ${{ secrets.LABEL_SYNC_GITHUB_TOKEN }}

.github/workflows/test.yaml

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

.github/workflows/translations-download.yaml

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

.github/workflows/translations-upload.yaml

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

.github/workflows/zizmor.yml

@@ -2,7 +2,7 @@ name: GitHub Actions Security Analysis with zizmor 🌈
 
 on:
   push:
-    branches: ["main", "full-mesh"]
+    branches: ["livekit", "full-mesh"]
   pull_request: {}
 
 permissions: {}
@@ -15,9 +15,9 @@ jobs:
       security-events: write # Required for upload-sarif (used by zizmor-action) to upload SARIF files.
     steps:
       - name: Checkout repository
-        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
 
       - name: Run zizmor 🌈
-        uses: zizmorcore/zizmor-action@192e21d79ab29983730a13d1382995c2307fbcaa # v0.5.7
+        uses: zizmorcore/zizmor-action@b1d7e1fb5de872772f31590499237e7cce841e8e # v0.5.3

.oxfmtrc.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "./node_modules/oxfmt/configuration_schema.json",
-  "printWidth": 80,
-  "sortPackageJson": false,
-  "ignorePatterns": ["pnpm-lock.yaml", "node_modules", "dist"]
-}

.oxlintrc.json

@@ -1,154 +0,0 @@
-{
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": [
-    "eslint",
-    "import",
-    "jsdoc",
-    "jsx-a11y",
-    "promise",
-    "react",
-    "typescript",
-    "unicorn",
-    "vitest"
-  ],
-  "jsPlugins": [
-    "eslint-plugin-storybook",
-    "eslint-plugin-element-call"
-    // TODO: Re-enable once oxlint supports lint rules that rely on TypeScript type-awareness.
-    // "eslint-plugin-rxjs"
-  ],
-  "categories": {
-    "correctness": "error",
-    "perf": "error"
-  },
-  "options": {
-    "denyWarnings": true,
-    "typeAware": true
-  },
-  "env": {
-    "builtin": true
-  },
-  "rules": {
-    "element-call/copyright-header": [
-      "error",
-      "/*\nCopyright %%CURRENT_YEAR%% Element Creations Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE in the repository root for full details.\n*/\n\n"
-    ],
-    "element-call/no-observablescope-leak": "error",
-    "element-call/no-top-level-logger-get-child": "error",
-    "jsdoc/empty-tags": "error",
-    "jsdoc/check-property-names": "error",
-    "jsdoc/require-param-description": "warn",
-    "react/display-name": "error",
-    // TODO: Re-enable once oxlint supports lint rules that rely on TypeScript type-awareness.
-    // "rxjs/no-exposed-subjects": "error",
-    // "rxjs/finnish": [
-    //   "error",
-    //   {
-    //     "names": {
-    //       "^this$": false
-    //     }
-    //   }
-    // ],
-    "no-restricted-imports": [
-      "error",
-      {
-        "patterns": [
-          {
-            "group": [
-              "matrix-widget-api/src",
-              "matrix-widget-api/src/",
-              "matrix-widget-api/src/**",
-              "matrix-widget-api/lib",
-              "matrix-widget-api/lib/",
-              "matrix-widget-api/lib/**"
-            ],
-            "message": "Please use matrix-widget-api instead"
-          },
-          {
-            "group": [
-              "matrix-js-sdk/src",
-              "matrix-js-sdk/src/",
-              "matrix-js-sdk/src/**",
-              "matrix-js-sdk/lib",
-              "matrix-js-sdk/lib/",
-              "matrix-js-sdk/lib/index"
-            ],
-            "message": "Please use matrix-js-sdk instead"
-          }
-        ]
-      }
-    ],
-    "typescript/no-floating-promises": "error",
-    "typescript/no-misused-promises": "error",
-    "typescript/promise-function-async": "error",
-    "typescript/require-await": "error",
-    "typescript/await-thenable": "error",
-    // To help ensure that we get proper vite/rollup lazy loading (e.g. for matrix-js-sdk).
-    "typescript/consistent-type-imports": [
-      "error",
-      {
-        "fixStyle": "inline-type-imports"
-      }
-    ],
-    // TODO: These had to be disabled in the eslint -> oxlint migration. Would be nice to
-    // enable them in future or at least document why we're disabling them.
-    "eslint/no-await-in-loop": "off",
-    "eslint/no-unused-vars": ["error", { "args": "none" }],
-    "import/default": "off",
-    "jsdoc/check-tag-names": "off",
-    "jsx-a11y/prefer-tag-over-role": "off",
-    "promise/no-callback-in-promise": "off",
-    "react/jsx-key": "off",
-    "react/jsx-no-constructed-context-values": "off",
-    "react/no-array-index-key": "off",
-    "react/no-children-prop": "off",
-    "react/no-object-type-as-default-prop": "off",
-    "typescript/no-misused-spread": "off",
-    "typescript/no-useless-default-assignment": "off",
-    "typescript/restrict-template-expressions": "off",
-    "typescript/unbound-method": "off",
-    "vitest/expect-expect": "off",
-    "vitest/no-conditional-expect": "off",
-    "vitest/no-disabled-tests": "off",
-    "vitest/require-mock-type-parameters": "off",
-    "vitest/require-to-throw-message": "off"
-  },
-  "overrides": [
-    {
-      "files": ["src/*/**"],
-      "rules": {
-        // In application code we should use the js-sdk logger, never console directly.
-        "no-console": "error"
-      }
-    },
-    {
-      "files": [
-        "**/*.test.ts",
-        "**/*.test.tsx",
-        "**/test.ts",
-        "**/test.tsx",
-        "**/test-**"
-      ],
-      "rules": {
-        // Tests often initialize an ObservableScope in an outer scope in
-        // beforeEach, which is not actually a problem
-        "element-call/no-observablescope-leak": "off",
-        "jsdoc/empty-tags": "off",
-        "jsdoc/check-property-names": "off",
-        "jsdoc/require-param-description": "off",
-        "jsx-a11y/media-has-caption": "off"
-        // TODO: Enable once oxlint supports them.
-        // "jsdoc/check-values": "off",
-        // "jsdoc/check-param-names": "off",
-        // "jsdoc/no-types": "off",
-      }
-    },
-    {
-      "files": ["playwright/**"],
-      "rules": {
-        // Playwright as a `use` function that has nothing to do with React hooks.
-        "react-hooks/rules-of-hooks": "off"
-      }
-    }
-  ]
-}

.prettierignore

@@ -0,0 +1,3 @@
+pnpm-lock.yaml
+node_modules
+dist

.prettierrc.json

@@ -0,0 +1 @@
+{}

.storybook/preview.tsx

@@ -7,16 +7,14 @@ Please see LICENSE in the repository root for full details.
 
 import type { Preview } from "@storybook/react-vite";
 import { TooltipProvider } from "@vector-im/compound-web";
+import i18n from "i18next";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import EN from "../locales/en/app.json";
 import { initReactI18next } from "react-i18next";
-import { i18n } from "../src/utils/i18n";
 import "../src/index.css";
 
-// Bare-minimum i18n config.
-// Unlike the app, stories register the instance as react-i18next's default
-// rather than wrapping every story in an <I18nextProvider>.
+// Bare-minimum i18n config
 i18n
   .use(initReactI18next)
   .init({

README.md

@@ -115,33 +115,30 @@ For more details on the packages, see the
 For operating and deploying Element Call on your own server, refer to the
 [**Self-Hosting Guide**](./docs/self_hosting.md).
 
-## MatrixRTC Transports
+## 🧭 MatrixRTC Backend Discovery and Selection
 
-For proper operation of Element Call, each deployment needs to set up a
-MatrixRTC transport in the form of a LiveKit server as outlined in the
-[Self-Hosting Guide](./docs/self_hosting.md). A typical federated site
-deployment for three different sites A, B and C is depicted below.
+For proper Element Call operation each site deployment needs a MatrixRTC backend
+setup as outlined in the [Self-Hosting Guide](./docs/self_hosting.md). A typical
+federated site deployment for three different sites A, B and C is depicted below.
 
 <p align="center">
   <img src="./docs/Federated_Setup.drawio.png" alt="Element Call federated setup">
 </p>
 
-### Transport Discovery
+### Backend Discovery
 
-Element Call discovers the available MatrixRTC transports (as defined by
-[MSC4519](https://github.com/matrix-org/matrix-spec-proposals/pull/4519)) by
-hitting the `GET /_matrix/client/unstable/org.matrix.msc4143/rtc/transports`
-endpoint of the Client-Server API. An example response:
+The MatrixRTC backend (according to
+[MSC4143](https://github.com/matrix-org/matrix-spec-proposals/pull/4143)) is
+announced by the Matrix site's `.well-known/matrix/client` file and discovered
+via the `org.matrix.msc4143.rtc_foci` key, e.g.:
 
 ```json
-{
-  "rtc_transports": [
+"org.matrix.msc4143.rtc_foci": [
     {
-      "type": "livekit",
-      "livekit_service_url": "https://matrix-rtc.example.com/livekit/jwt"
-    }
-  ]
-}
+        "type": "livekit",
+        "livekit_service_url": "https://matrix-rtc.example.com/livekit/jwt"
+    },
+]
 ```
 
 where the format for MatrixRTC using LiveKit backend is defined in
@@ -152,7 +149,7 @@ via `livekit_service_url`.
 
 ### Backend Selection
 
-- Each call participant proposes their discovered MatrixRTC transport from
+- Each call participant proposes their discovered MatrixRTC backend from
   `org.matrix.msc4143.rtc_foci` in their `org.matrix.msc3401.call.member` state event.
 - For the **LiveKit** MatrixRTC backend
   ([MSC4195](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)),
@@ -215,7 +212,7 @@ See also:
 
 ### Backend
 
-A docker compose file `docker-compose-dev.yml` is provided to start the
+A docker compose file `dev-backend-docker-compose.yml` is provided to start the
 whole stack of components which is required for a local development environment
 including federation:
 
@@ -242,14 +239,15 @@ the backend components:
 ```sh
 pnpm backend
 # or for podman-compose:
-# podman-compose -f docker-compose-dev.yml up
+# podman-compose -f dev-backend-docker-compose.yml up
 ```
 
 > [!NOTE]
 > To ensure your local development frontend functions properly, you’ll need to
-> add certificate exceptions in your browser for `https://localhost:3000` and
-> `https://matrix-rtc.m.localhost/livekit/jwt/healthz`. This can be done either
-> by adding the minimum localhost CA
+> add certificate exceptions in your browser for `https://localhost:3000`,
+> `https://matrix-rtc.m.localhost/livekit/jwt/healthz` and
+> `https://synapse.m.localhost/.well-known/matrix/client`. This can be either
+> done by adding the minimum localhost CA
 > ([./backend/dev_tls_local-ca.crt](./backend/dev_tls_local-ca.crt)) to your web
 > browser's trusted certificates or by simply copying and pasting each URL into
 > your browser’s address bar and follow the prompts to add the exception.
@@ -361,16 +359,6 @@ Usage and other technical details about the project can be found here:
 
 [**Docs**](./docs/README.md)
 
-## GitHub Labels
-
-GitHub labels in this repository are maintained in the [`labels.yml`](.github/labels.yml) file and
-automatically synced to GitHub using the [`sync-labels` workflow](.github/workflows/sync-labels.yml).
-We do this so that we can reuse the labels between repositories.
-
-> [!WARNING]
-> Do not manually edit labels in the GitHub UI. Any manual changes will be overridden by the
-> workflow on its next invocation.
-
 ## 📝 Copyright & License
 
 Copyright 2021-2025 New Vector Ltd

babel.config.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: "current",
+        },
+      },
+    ],
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+      },
+    ],
+    "@babel/preset-typescript",
+  ],
+  plugins: ["babel-plugin-transform-vite-meta-env"],
+};

backend/dev_homeserver-othersite.yaml

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

backend/dev_homeserver.yaml

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

backend/dev_nginx.conf

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

backend/playwright_homeserver-othersite.yaml

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

backend/playwright_homeserver.yaml

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

config/config.devenv.json

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

config/config.sample.json

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

dev-backend-docker-compose.yml

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

docker-compose-playwright.yml

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

docs/README.md

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

docs/controls.md

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

docs/matrix_rtc_modes.md

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

docs/self_hosting.md

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

docs/url_params.md

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

embedded/android/gradle/libs.versions.toml

@@ -9,4 +9,4 @@ android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref
 
 [plugins]
 android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
-maven_publish = { id = "com.vanniktech.maven.publish", version = "0.36.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.36.0" }

eslint/CopyrightHeader.js

@@ -1,66 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { ESLintUtils } from "@typescript-eslint/utils";
-
-const rule = ESLintUtils.RuleCreator(
-  () => "https://github.com/element-hq/element-call",
-)({
-  name: "copyright-header",
-  meta: {
-    type: "problem",
-    fixable: "code",
-    docs: {
-      description: "Require a copyright header in files.",
-    },
-    messages: {
-      noHeader: "Copyright header is required.",
-    },
-    schema: [{ type: "string" }],
-  },
-  create(context) {
-    const code = context.getSourceCode();
-
-    return {
-      Program(node) {
-        const firstToken = code.getFirstToken(node, { includeComments: false });
-
-        if (!firstToken) {
-          return;
-        }
-
-        const headComments = code.getCommentsBefore(firstToken);
-        const hasSomeCopyrightHeader = headComments?.some((comment) =>
-          comment?.value?.includes("Copyright"),
-        );
-        if (hasSomeCopyrightHeader) {
-          return;
-        }
-        const headerTemplate = context.options[0];
-        const fix = headerTemplate
-          ? function (fixer) {
-              return fixer.insertTextBefore(
-                firstToken,
-                headerTemplate.replace(
-                  /%%CURRENT_YEAR%%/g,
-                  new Date().getFullYear(),
-                ),
-              );
-            }
-          : undefined;
-
-        context.report({
-          messageId: "noHeader",
-          node,
-          fix,
-        });
-      },
-    };
-  },
-});
-
-export default rule;

eslint/NoObservableScopeLeak.js

@@ -1,78 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { ESLintUtils } from "@typescript-eslint/utils";
-
-// These ObservableScope methods will not generally cause resource leaks even if
-// called from a callback
-const safeScopeMethods = new Set(["bind", "end"]);
-
-/**
- * Determines whether the variable with the given name is local to
- * the enclosing function or class scope.
- */
-function isLocal(name, scope) {
-  // If it is nowhere to be found in the "through" scope, it is local.
-  if (!scope.through.some(({ identifier }) => identifier.name === name))
-    return true;
-  if (scope.type === "function" || scope.type === "class") return false;
-  // If this is something other than a function or class scope, check its outer
-  // scope.
-  return !scope.upper || isLocal(name, scope.upper);
-}
-
-const rule = ESLintUtils.RuleCreator(
-  () => "https://github.com/element-hq/element-call",
-)({
-  name: "no-observablescope-leak",
-  meta: {
-    type: "problem",
-    docs: {
-      description:
-        "Require referenced ObservableScopes to be defined in the very same scope to avoid resource leaks.",
-    },
-    messages: {
-      scopeLeak:
-        "Do not reference ObservableScopes defined in an outer scope; this may create resource leaks.",
-    },
-    schema: [],
-  },
-  create(context) {
-    return {
-      Identifier(node) {
-        const scope = context.sourceCode.getScope(node);
-        if (
-          // Is this a reference to a variable defined in an outer scope?
-          !isLocal(node.name, scope) &&
-          // Exclude calls to "safe" ObservableScope methods
-          node.parent?.type === "MemberExpression" &&
-          node.parent.object === node &&
-          node.parent.property.type === "Identifier" &&
-          !safeScopeMethods.has(node.parent.property.name) &&
-          /(^s|S)cope$/.test(node.name)
-        ) {
-          // TODO: Once oxlint supports lint rules that rely on TypeScript type-awareness,
-          // Verify that the variable is actually of type ObservableScope rather than just
-          // checking its name. This is expensive so we should do this last.
-          //
-          // const services = ESLintUtils.getParserServices(context);
-          // const type = services.getTypeAtLocation(node);
-          // if (type.symbol?.name === "ObservableScope") { ... }
-
-          // This ObservableScope method call may be causing resource leaks.
-          context.report({
-            messageId: "scopeLeak",
-            loc: node.loc,
-            node,
-          });
-        }
-      },
-    };
-  },
-});
-
-export default rule;

eslint/NoTopLevelLoggerGetChild.js

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

eslint/index.js

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

eslint/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "eslint-plugin-element-call",
-  "version": "0.0.0"
-}

i18next-parser.config.ts

@@ -0,0 +1,32 @@
+import type { UserConfig } from "i18next-parser";
+
+const config: UserConfig = {
+  keySeparator: ".",
+  namespaceSeparator: false,
+  contextSeparator: "|",
+  pluralSeparator: "_",
+  createOldCatalogs: false,
+  defaultNamespace: "app",
+  lexers: {
+    ts: [
+      {
+        lexer: "JavascriptLexer",
+        functions: ["t", "translatedError"],
+        namespaceFunctions: ["useTranslation", "withTranslation"],
+      },
+    ],
+    tsx: [
+      {
+        lexer: "JsxLexer",
+        functions: ["t", "translatedError"],
+        namespaceFunctions: ["useTranslation", "withTranslation"],
+      },
+    ],
+  },
+  locales: ["en"],
+  output: "locales/$LOCALE/$NAMESPACE.json",
+  input: ["src/**/*.{ts,tsx}"],
+  sort: true,
+};
+
+export default config;

i18next.config.ts

@@ -1,20 +0,0 @@
-import { defineConfig } from "i18next-cli";
-
-export default defineConfig({
-  locales: ["en"],
-  extract: {
-    input: ["src/**/*.{ts,tsx}"],
-    output: "locales/{{language}}/{{namespace}}.json",
-    defaultNS: "app",
-    keySeparator: ".",
-    nsSeparator: false,
-    contextSeparator: "|",
-    extractFromComments: false,
-    functions: ["t", "*.t", "translatedError", "i18nKey"],
-    transComponents: ["Trans"],
-  },
-  types: {
-    input: ["locales/{{language}}/{{namespace}}.json"],
-    output: "src/types/i18next.d.ts",
-  },
-});

knip.ts

@@ -11,35 +11,31 @@ export default {
   vite: {
     config: ["vite.config.ts", "vite-embedded.config.ts", "vite-sdk.config.ts"],
   },
-  entry: ["src/main.tsx", "eslint/index.js", "i18next.config.ts"],
+  entry: ["src/main.tsx", "i18next-parser.config.ts"],
   ignoreBinaries: [
     // This is deprecated, so Knip doesn't actually recognize it as a globally
     // installed binary. TODO We should switch to Compose v2:
     // https://docs.docker.com/compose/migrate/
     "docker-compose",
-    // This is a shell built-in.
-    "printf",
-  ],
-  ignoreFiles: [
-    "scripts/.pnpmfile.cjs",
-    // Deliberately added prior to any component or business logic
-    // implementation
-    "src/state/ServiceInterruptionsViewModel.ts",
   ],
+  ignoreFiles: ["scripts/.pnpmfile.cjs"],
   ignoreDependencies: [
     // Used in CSS
     "normalize.css",
     // Used for its global type declarations
     "@types/grecaptcha",
+    // Because we use matrix-js-sdk as a Git dependency rather than consuming
+    // the proper release artifacts, and also import directly from src/, we're
+    // forced to re-install some of the types that it depends on even though
+    // these look unused to Knip
+    "@types/content-type",
     "@types/sdp-transform",
+    "@types/uuid",
     // We obviously use this, but if the package has been linked with pnpm link,
     // then Knip will flag it as a false positive
     // https://github.com/webpro-nl/knip/issues/766
     "@vector-im/compound-web",
     "matrix-widget-api",
-    // Used by oxlint
-    "eslint-plugin-element-call",
-    "eslint-plugin-storybook",
   ],
   ignoreExportsUsedInFile: true,
 } satisfies KnipConfig;

locales/cs/app.json

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

locales/en/app.json

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

locales/et/app.json

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

locales/fi/app.json

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

locales/pl/app.json

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

package.json

@@ -17,21 +17,21 @@
     "build:sdk": "pnpm build:full --config vite-sdk.config.js",
     "build:sdk:production": "pnpm build:sdk",
     "serve": "vite preview",
-    "format": "oxfmt",
-    "format:check": "oxfmt --check; rc=$?; [[ $rc -ne 0 ]] && printf '\\033[46;30m INFO \\033[0m To fix, run: pnpm format\\n' >&2; exit $rc",
-    "lint": "pnpm lint:types && pnpm lint:oxlint && pnpm lint:knip",
-    "lint:oxlint": "oxlint src playwright",
-    "lint:oxlint-fix": "oxlint --fix src playwright",
+    "prettier:check": "prettier -c .",
+    "prettier:format": "prettier -w .",
+    "lint": "pnpm lint:types && pnpm lint:eslint && pnpm lint:knip",
+    "lint:eslint": "eslint --max-warnings 0 src playwright",
+    "lint:eslint-fix": "eslint --max-warnings 0 src playwright --fix",
     "lint:knip": "knip",
     "lint:types": "tsc",
-    "i18n": "npx i18next-cli extract",
-    "i18n:check": "npx i18next-cli extract --ci",
+    "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 docker-compose-dev.yml up",
-    "backend-playwright": "docker-compose -f docker-compose-dev.yml -f docker-compose-playwright.yml up",
+    "backend": "docker-compose -f dev-backend-docker-compose.yml up",
+    "backend-playwright": "docker-compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up",
     "test:playwright": "playwright test",
     "test:playwright:open": "pnpm test:playwright --ui",
     "links:on": "cp scripts/.pnpmfile.cjs .pnpmfile.cjs & pnpm install",
@@ -40,6 +40,10 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@babel/core": "^7.16.5",
+    "@babel/preset-env": "^7.29.5",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
     "@codecov/vite-plugin": "^1.3.0",
     "@fontsource/inconsolata": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
@@ -47,6 +51,7 @@
     "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.12.0",
     "@livekit/components-react": "^2.0.0",
+    "@livekit/protocol": "^1.42.2",
     "@livekit/track-processors": "^0.7.1",
     "@mediapipe/tasks-vision": "^0.10.18",
     "@playwright/test": "^1.60.0",
@@ -54,17 +59,17 @@
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@react-spring/web": "^10.0.0",
-    "@rolldown/plugin-babel": "^0.2.3",
     "@sentry/react": "^8.0.0",
     "@sentry/vite-plugin": "^3.0.0",
     "@storybook/addon-docs": "^10.3.6",
     "@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",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/eslint": "^9.6.1",
+    "@types/content-type": "^1.1.5",
     "@types/grecaptcha": "^3.0.9",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
@@ -74,40 +79,52 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/sdp-transform": "^2.4.5",
-    "@typescript-eslint/utils": "^8.61.0",
+    "@types/uuid": "10",
+    "@typescript-eslint/eslint-plugin": "^8.31.0",
+    "@typescript-eslint/parser": "^8.31.0",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^10.0.0",
-    "@vector-im/compound-web": "^10.0.0",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@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.10",
-    "babel-plugin-react-compiler": "^1.0.0",
+    "@vitest/ui": "4.1.7",
+    "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.3",
-    "eslint-plugin-element-call": "link:eslint",
+    "eslint": "^8.14.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-config-prettier": "^10.0.0",
+    "eslint-plugin-deprecate": "^0.9.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsdoc": "^61.5.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-matrix-org": "2.1.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-rxjs": "^5.0.3",
     "eslint-plugin-storybook": "^10.3.6",
+    "eslint-plugin-unicorn": "^56.0.0",
     "fetch-mock": "11.1.5",
-    "i18next": "^26.0.0",
+    "global-jsdom": "^26.0.0",
+    "i18next": "^25.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-cli": "^1.61.0",
+    "i18next-parser": "^9.1.0",
     "jsdom": "^26.0.0",
     "knip": "^5.86.0",
     "livekit-client": "^2.18.1",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-    "matrix-widget-api": "^1.18.0",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
+    "matrix-widget-api": "^1.16.1",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
-    "oxfmt": "^0.61.0",
-    "oxlint": "^1.70.0",
-    "oxlint-tsgolint": "^0.25.0",
     "pako": "^2.0.4",
     "postcss": "^8.4.41",
     "postcss-preset-env": "^10.0.0",
-    "posthog-js": "1.408.2",
+    "posthog-js": "1.374.0",
+    "prettier": "^3.0.0",
     "qrcode": "^1.5.4",
     "react": "19",
     "react-dom": "19",
@@ -118,6 +135,7 @@
     "sass": "^1.42.1",
     "storybook": "^10.3.6",
     "typescript": "^5.8.3",
+    "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
     "uuid": "^14.0.0",
     "vaul": "^1.0.0",
@@ -131,5 +149,17 @@
     "vitest": "^4.1.5",
     "vitest-axe": "^1.0.0-pre.3"
   },
-  "packageManager": "pnpm@11.21.0+sha512.521705bce689924eac72f5a3587122f362689ef6571e55ba80076fd637c11132ecffada26fad4ea79c485bfddbfd3d5a2a5b05805a77e893de71ec8a6cca3bb1"
+  "pnpm": {
+    "overrides": {
+      "@livekit/components-core>rxjs": "^7.8.1",
+      "@livekit/track-processors>@mediapipe/tasks-vision": "^0.10.18",
+      "minimatch": "^10.2.3",
+      "tar": "^7.5.11",
+      "glob": "^10.5.0",
+      "qs": "^6.14.1",
+      "js-yaml": "^4.1.1",
+      "esbuild": "^0.28.0"
+    }
+  },
+  "packageManager": "pnpm@10.33.0"
 }

playwright-backend-docker-compose.override.yml

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

playwright-backend-docker-compose.yml

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

playwright/fixtures/widget-user.ts

@@ -120,11 +120,6 @@ export const widgetTest = test.extend<MyFixtures>({
           .getByRole("heading", { name: "Welcome Room" }),
       ).toBeVisible();
     } else if (callType === "dm") {
-      await TestHelpers.closeReleaseAnnouncement(
-        ewPage1,
-        "Introducing Sections",
-      );
-
       await ewPage1
         .getByRole("navigation", { name: "Room list" })
         .getByRole("button", { name: "New conversation" })

playwright/sfu-reconnect-bug.spec.ts

@@ -88,18 +88,15 @@ test("When creator left, avoid reconnect to the same SFU", async ({
   await guestCPage.getByRole("radio", { name: "Spotlight" }).check();
 
   await guestCPage.waitForTimeout(1000);
-  if (wsConnectionCount === 2) {
-    console.warn("wsConnectionCount is 2, expecting 1 after join");
-  }
-  const wsConnectionCountBeforeLeave = wsConnectionCount;
+
   // ========
   // the creator leaves the call
   await creatorPage.getByTestId("incall_leave").click();
 
   // 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(wsConnectionCountBeforeLeave);
+  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(wsConnectionCountBeforeLeave);
+  expect(wsConnectionCount).toBe(1);
 });

playwright/spa-helpers.ts

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

playwright/widget/federated-call.test.ts

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

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

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

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

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

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

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

playwright/widget/pip-call.test.ts

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

playwright/widget/test-helpers.ts

@@ -21,7 +21,7 @@ const PASSWORD = "foobarbaz1!";
 export const HOST1 = "https://app.m.localhost/#/welcome";
 export const HOST2 = "https://app.othersite.m.localhost/#/welcome";
 
-export type RtcMode = "compat" | "2_0";
+export type RtcMode = "legacy" | "compat" | "2_0";
 
 export class TestHelpers {
   public static async startCallInCurrentRoom(
@@ -73,6 +73,9 @@ export class TestHelpers {
     audioOnly: boolean = false,
     isDM: boolean = false,
   ): Promise<void> {
+    // XXX This using the notification toast to join the room.
+    // Not the button in the header
+
     await page.waitForTimeout(3000);
     const label = isDM
       ? audioOnly
@@ -82,9 +85,7 @@ export class TestHelpers {
     await expect(page.getByText(label)).toBeVisible({
       timeout: 10000,
     });
-    // XXX This using the notification toast to join the room.
-    // Not the buttons in the header or timeline
-    await page.getByRole("alert").getByRole("button", { name: "Join" }).click({
+    await page.getByRole("button", { name: "Join" }).click({
       timeout: 5000,
     });
   }
@@ -159,7 +160,6 @@ export class TestHelpers {
     const expectedToasts = [
       { title: "Failed to load service worker", button: "OK" },
       { title: "Back up your chats", button: "Dismiss" },
-      { title: "Turn on key storage", button: "Dismiss" },
       { title: "Element does not support this browser", button: "Dismiss" },
     ];
 
@@ -189,27 +189,11 @@ export class TestHelpers {
     }
   }
 
-  public static async closeReleaseAnnouncement(
-    page: Page,
-    name: string,
-  ): Promise<void> {
-    try {
-      await page
-        .getByRole("dialog", { name })
-        .getByRole("button", { name: "OK" })
-        .click({ timeout: 2000 });
-    } catch {
-      // Announcement not shown; nothing to do
-    }
-  }
-
   public static async createRoom(
     name: string,
     page: Page,
     andInvite: string[] = [],
   ): Promise<void> {
-    await TestHelpers.closeReleaseAnnouncement(page, "Introducing Sections");
-
     await page
       .getByRole("navigation", { name: "Room list" })
       .getByRole("button", { name: "New conversation" })
@@ -309,7 +293,9 @@ export class TestHelpers {
 
     // Move to Developer tab now
     await iframe.getByRole("tab", { name: "Developer" }).click();
-    if (mode == "2_0") {
+    if (mode == "legacy") {
+      await iframe.getByText("Legacy: state events").click();
+    } else if (mode == "2_0") {
       await iframe.getByText("Matrix 2.0").click();
     } else {
       // compat
@@ -344,12 +330,6 @@ export class TestHelpers {
     }
   }
 
-  public static async expandRoomList(page: Page): Promise<void> {
-    await page
-      .getByRole("separator", { name: "Click or drag to expand" })
-      .click();
-  }
-
   /**
    * Switches to a room in the room list by its name.
    * @param page - The EW page
@@ -388,9 +368,25 @@ export class TestHelpers {
     frame: FrameLocator,
     count: number,
   ): Promise<void> {
-    await expect(frame.locator("video").filter({ visible: true })).toHaveCount(
-      count,
-      { timeout: 10000 },
-    );
+    // XXX we need to be better at our HTML markup and accessibility, it would make
+    // this kind of stuff way easier to test if we could look out for aria attributes.
+    await expect
+      .poll(
+        async () => {
+          return await frame
+            .locator("video")
+            .evaluateAll(
+              (videos: Element[]) =>
+                videos.filter(
+                  (v: Element) =>
+                    window.getComputedStyle(v).display === "block",
+                ).length,
+            );
+        },
+        {
+          timeout: 10000,
+        },
+      )
+      .toBe(count);
   }
 }

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

@@ -31,18 +31,17 @@ widgetTest(
     const brooksFrame = brooks.page
       .locator('iframe[title="Element Call"]')
       .contentFrame();
+
     // We should show a ringing tile, let's check for that
     await expect(
       brooksFrame
         .getByTestId("videoTile")
+        .filter({ has: brooksFrame.getByText(whistler.displayName) })
         .filter({ has: brooksFrame.getByText("Calling…") }),
     ).toBeVisible();
 
     await expect(whistler.page.getByText("Incoming voice call")).toBeVisible();
-    await whistler.page
-      .getByRole("alert")
-      .getByRole("button", { name: "Join" })
-      .click();
+    await whistler.page.getByRole("button", { name: "Join" }).click();
 
     await expect(
       whistler.page.locator('iframe[title="Element Call"]'),
@@ -84,22 +83,23 @@ widgetTest(
       }),
     ).toBeVisible();
 
-    // We confirm that we started in Pip mode (voice call) and check that we still see the composer.
+    // In order to confirm that the call is disconnected we will check that the message composer is shown again.
+    // So first we need to confirm that it is hidden when in the call.
     await expect(
       whistler.page.locator(".mx_BasicMessageComposer"),
-    ).toBeVisible();
-    await expect(brooks.page.locator(".mx_BasicMessageComposer")).toBeVisible();
+    ).not.toBeVisible();
+    await expect(
+      brooks.page.locator(".mx_BasicMessageComposer"),
+    ).not.toBeVisible();
 
     // ASSERT hanging up on one side ends the call for both
     await brooksFrame.getByRole("button", { name: "End call" }).click();
 
-    // The widget should be closed on both sides
+    // The widget should be closed on both sides and the timeline should be back on screen
     await expect(
-      whistler.page.locator('iframe[title="Element Call"]'),
-    ).not.toBeVisible();
-    await expect(
-      whistler.page.locator('iframe[title="Element Call"]'),
-    ).not.toBeVisible();
+      whistler.page.locator(".mx_BasicMessageComposer"),
+    ).toBeVisible();
+    await expect(brooks.page.locator(".mx_BasicMessageComposer")).toBeVisible();
   },
 );
 
@@ -132,10 +132,7 @@ widgetTest(
     ).toBeVisible();
 
     await expect(whistler.page.getByText("Incoming video call")).toBeVisible();
-    await whistler.page
-      .getByRole("alert")
-      .getByRole("button", { name: "Join" })
-      .click();
+    await whistler.page.getByRole("button", { name: "Join" }).click();
 
     await expect(
       whistler.page.locator('iframe[title="Element Call"]'),

pnpm-workspace.yaml

@@ -1,58 +1,3 @@
-minimumReleaseAgeExclude:
-  - "@vector-im/compound-design-tokens"
-  - "@vector-im/compound-web"
-  - matrix-js-sdk
-  - matrix-widget-api
-allowBuilds:
-  "@parcel/watcher": true
-  "@sentry/cli": true
-  "@swc/core": true
-  "core-js": true
-  "esbuild": true
-  "matrix-js-sdk@git+https://github.com/matrix-org/matrix-js-sdk.git": true
-  "protobufjs": true
-overrides:
-  # We need compatible versions of RxJS in our dependencies and LiveKit's dependencies, but
-  # LiveKit has pinned it to a very specific version which is now holding us back from updating.
-  # See livekit/components-js#1101 for a request for a proper solution.
-  "@livekit/components-core>rxjs": "^7.8.1"
-  # Dedupe Mediapipe dependencies.
-  "@livekit/track-processors>@mediapipe/tasks-vision": "^0.10.18"
-  # Security fix: https://security-tracker.debian.org/tracker/CVE-2026-31802
-  "tar": "^7.5.11"
-  # Security fixes:
-  # - https://github.com/advisories/GHSA-7r86-cg39-jmmj
-  # - https://github.com/advisories/GHSA-23c5-xmqv-rm74
-  "minimatch": "^10.2.3"
-  # Security fix: https://github.com/element-hq/element-call/security/dependabot/109
-  "glob": "^10.5.0"
-  # Security fixes:
-  # - https://github.com/element-hq/element-call/security/dependabot/110
-  # - https://github.com/element-hq/element-call/security/dependabot/122
-  # - https://github.com/element-hq/element-call/security/dependabot/179
-  "qs": "^6.15.2"
-  # Security fixes:
-  # - https://github.com/element-hq/element-call/security/dependabot/106
-  # - https://github.com/element-hq/element-call/security/dependabot/203
-  "js-yaml": "^4.2.0"
-  # Storybook declares support for 0.27.0 only but empirically works fine with 0.28.0.
-  "esbuild": "^0.28.0"
-  # Security fixes:
-  # - https://github.com/nodejs/undici/releases/tag/v6.24.0
-  # - https://github.com/element-hq/element-call/security/dependabot/201
-  # - https://github.com/element-hq/element-call/security/dependabot/199
-  "undici": "^6.27.0"
-  # Security fix: https://github.com/advisories/GHSA-rf6f-7fwh-wjgh
-  "flatted": "^3.4.2"
-  # Security fix: https://github.com/element-hq/element-call/security/dependabot/184
-  "ws": "^8.21.0"
-  # Security fixes:
-  # - https://github.com/element-hq/element-call/security/dependabot/191
-  # - https://github.com/element-hq/element-call/security/dependabot/190
-  # - https://github.com/element-hq/element-call/security/dependabot/192
-  # - https://github.com/element-hq/element-call/security/dependabot/194
-  # - https://github.com/element-hq/element-call/security/dependabot/198
-  # - https://github.com/element-hq/element-call/security/dependabot/196
-  # - https://github.com/element-hq/element-call/security/dependabot/195
-  # - https://github.com/element-hq/element-call/security/dependabot/193
-  "dompurify": "^3.4.11"
+# dependencies where we use branches and hashes in the package.json. But that also use a pre/post install script.
+onlyBuiltDependencies:
+  - "matrix-js-sdk"

renovate.json

@@ -61,19 +61,10 @@
     {
       "groupName": "Pnpm",
       "matchDepNames": ["pnpm"]
-    },
-    {
-      "description": "Update the element-web image digest daily, in its own PR",
-      "groupName": "Element Web",
-      "matchPackageNames": ["ghcr.io/element-hq/element-web"],
-      "matchUpdateTypes": ["digest"],
-      "schedule": ["* 0-3 * * *"],
-      "minimumReleaseAge": null,
-      "automerge": true
     }
   ],
   "semanticCommits": "disabled",
-  "ignoreDeps": [],
+  "ignoreDeps": ["eslint-plugin-matrix-org"],
   "vulnerabilityAlerts": {
     "schedule": ["at any time"],
     "prHourlyLimit": 0,

sdk/helper.ts

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

sdk/main.ts

@@ -46,20 +46,19 @@ import {
 // Can this be done in the tsconfig.json
 import { type TextStreamInfo } from "../node_modules/livekit-client/dist/src/room/types";
 import { type Behavior, constant } from "../src/state/Behavior";
-import {
-  callViewModelOptionsFromParams,
-  createCallViewModel$,
-} from "../src/state/CallViewModel/CallViewModel";
+import { createCallViewModel$ } from "../src/state/CallViewModel/CallViewModel";
 import { ObservableScope } from "../src/state/ObservableScope";
 import { getUrlParams } from "../src/UrlParams";
 import { MuteStates } from "../src/state/MuteStates";
 import { MediaDevices } from "../src/state/MediaDevices";
 import { E2eeType } from "../src/e2ee/e2eeType";
-import { currentAndPrev, TEXT_LK_TOPIC, tryMakeSticky } from "./helper";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
-import { initializeWidget } from "../src/widget";
+import { currentAndPrev, logger, TEXT_LK_TOPIC, tryMakeSticky } from "./helper";
+import {
+  ElementWidgetActions,
+  widget as _widget,
+  initializeWidget,
+} from "../src/widget";
 import { type Connection } from "../src/state/CallViewModel/remoteMembers/Connection";
-import { createWidgetHostBridge } from "../src/HostBridge";
 
 interface MatrixRTCSdk {
   /**
@@ -77,9 +76,9 @@ interface MatrixRTCSdk {
   stop: () => void;
   data$: Observable<{ rtcBackendIdentity: string; data: string }>;
   /**
-   * flattened list of remote members
+   * flattened list of members
    */
-  remoteMembers$: Behavior<
+  members$: Behavior<
     {
       connection: Connection | null;
       membership: CallMembership;
@@ -87,7 +86,7 @@ interface MatrixRTCSdk {
     }[]
   >;
   /**
-   * flattened local member
+   * flattened local members
    */
   localMember$: Behavior<{
     connection: Connection | null;
@@ -105,19 +104,17 @@ export async function createMatrixRTCSdk(
   id: string = "",
   sticky: boolean = false,
 ): Promise<MatrixRTCSdk> {
-  const logger = rootLogger.getChild("[MatrixRTCSdk]");
   const scope = new ObservableScope();
 
   // widget client
-  const widget = initializeWidget(application, true);
+  initializeWidget(application, true);
+  const widget = _widget;
   if (!widget) throw Error("No widget. This webapp can only start as a widget");
   const client = await widget.client;
-  const hostBridge = createWidgetHostBridge(widget);
   logger.info("client created");
 
   // url params
-  const urlParams = getUrlParams();
-  const { roomId, controlledAudioDevices, callIntent } = urlParams;
+  const { roomId } = getUrlParams();
   if (roomId === null) throw Error("could not get roomId from url params");
   const room = client.getRoom(roomId);
   if (room === null) throw Error("could not get room from client");
@@ -129,16 +126,11 @@ export async function createMatrixRTCSdk(
   const rtcSession = rtcSessionManager.getRoomSession(room);
 
   // media devices
-  const mediaDevices = new MediaDevices(scope, {
-    controlledAudioDevices,
-    callIntent,
+  const mediaDevices = new MediaDevices(scope);
+  const muteStates = new MuteStates(scope, mediaDevices, {
+    audioEnabled: false,
+    videoEnabled: false,
   });
-  const muteStates = new MuteStates(
-    scope,
-    mediaDevices,
-    { audioEnabled: false, videoEnabled: false },
-    hostBridge,
-  );
 
   // call view model
   const callViewModel = createCallViewModel$(
@@ -147,11 +139,7 @@ export async function createMatrixRTCSdk(
     room,
     mediaDevices,
     muteStates,
-    {
-      ...callViewModelOptionsFromParams(urlParams),
-      encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
-      hostBridge,
-    },
+    { encryptionSystem: { kind: E2eeType.PER_PARTICIPANT } },
     of({}),
     of({}),
     constant({ supported: false, processor: undefined }),
@@ -292,17 +280,18 @@ export async function createMatrixRTCSdk(
       });
       await leaveResolver.promise;
       logger.info("send Unstick");
-      await hostBridge
+      await widget.api
         .setAlwaysOnScreen(false)
-        .catch((e: unknown) =>
-          logger.error("Failed to set `alwaysOnScreen` to false", e),
+        .catch((e) =>
+          logger.error(
+            "Failed to set call widget `alwaysOnScreen` to false",
+            e,
+          ),
         );
       logger.info("send Close");
-      await hostBridge
-        .close?.()
-        .catch((e: unknown) =>
-          logger.error("Failed to ask the host to close", e),
-        );
+      await widget.api.transport
+        .send(ElementWidgetActions.Close, {})
+        .catch((e) => logger.error("Failed to send close action", e));
     };
 
     // schedule close first and then leave (scope.end)
@@ -349,8 +338,8 @@ export async function createMatrixRTCSdk(
       ),
     ),
     connected$: callViewModel.connected$,
-    remoteMembers$: scope.behavior(
-      callViewModel.remoteMatrixLivekitMembers$.pipe(
+    members$: scope.behavior(
+      callViewModel.matrixLivekitMembers$.pipe(
         switchMap((members) => {
           const listOfMemberObservables = members.map((member) =>
             combineLatest([

src/App.tsx

@@ -5,13 +5,18 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, type JSX, Suspense, useEffect, useState } from "react";
+import {
+  type FC,
+  type JSX,
+  Suspense,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { type MatrixClient } from "matrix-js-sdk";
-import { I18nextProvider } from "react-i18next";
 
 import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
@@ -20,26 +25,13 @@ import { RoomPage } from "./room/RoomPage";
 import { ClientProvider } from "./ClientContext";
 import { ErrorPage, LoadingPage } from "./FullScreenView";
 import { Initializer } from "./initializer";
-import { type WidgetHelpers } from "./widget";
+import { widget } from "./widget";
 import { useTheme } from "./useTheme";
 import { ProcessorProvider } from "./livekit/TrackProcessorContext";
 import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
-import {
-  HeaderStyle,
-  UrlParamsProvider,
-  useUrlParams,
-  useUrlParamsFromLocation,
-} from "./UrlParams";
+import { getUrlParams, HeaderStyle } from "./UrlParams";
 import { AppBar } from "./AppBar";
-import { i18n } from "./utils/i18n";
-import { useRootElement } from "./RootElementContext";
-import {
-  createWidgetHostBridge,
-  HostBridgeProvider,
-  nullHostBridge,
-} from "./HostBridge";
-import { useInitial } from "./useInitial";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
@@ -47,114 +39,81 @@ interface SimpleProviderProps {
   children: JSX.Element;
 }
 
-/**
- * Supplies the URL-derived params to the rest of the app. Only the standalone
- * and widget builds own the URL, so this lives here in the app shell rather
- * than alongside the context itself.
- */
-const LocationUrlParamsProvider: FC<SimpleProviderProps> = ({ children }) => {
-  const urlParams = useUrlParamsFromLocation();
-  return <UrlParamsProvider value={urlParams}>{children}</UrlParamsProvider>;
-};
-
 const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
-  const { background } = useUrlParams();
-  const rootElement = useRootElement();
 
   useEffect(() => {
-    rootElement.setAttribute("data-background", background);
-  }, [pathname, background, rootElement]);
+    let backgroundImage = "";
+    if (!["/login", "/register"].includes(pathname) && !widget) {
+      backgroundImage = "var(--background-gradient)";
+    }
 
-  return children;
+    document.getElementsByTagName("body")[0].style.backgroundImage =
+      backgroundImage;
+  }, [pathname]);
+
+  return <>{children}</>;
 };
-
 const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
   useTheme();
   return children;
 };
 
-/** Wraps the app in an {@link AppBar}, if the params ask for one. */
-const MaybeAppBar: FC<SimpleProviderProps> = ({ children }) => {
-  const { header } = useUrlParams();
-  return header === HeaderStyle.AppBar ? <AppBar>{children}</AppBar> : children;
-};
-
 interface Props {
   vm: AppViewModel;
-  /** A point of access to the widget API, if running as a widget. */
-  widget: WidgetHelpers | null;
 }
 
-export const App: FC<Props> = ({ vm, widget }) => {
-  // The standalone build has no host; the widget build's host is the client it
-  // is a widget of.
-  const hostBridge = useInitial(() =>
-    widget === null ? nullHostBridge : createWidgetHostBridge(widget),
-  );
+export const App: FC<Props> = ({ vm }) => {
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     Initializer.init()
       ?.then(async () => {
         if (loaded) return;
         setLoaded(true);
-        await hostBridge.contentLoaded();
+        await widget?.api.sendContentLoaded();
       })
       .catch(logger.error);
   });
 
-  // As a widget, the client comes from the host over the widget API. Standalone,
-  // Element Call finds one itself, so there is nothing to wait for here.
-  const [widgetClient, setWidgetClient] = useState<MatrixClient | undefined>(
-    undefined,
-  );
-  useEffect(() => {
-    if (widget === null) return;
-    widget.client
-      .then(setWidgetClient)
-      .catch((e) => logger.error("Failed to obtain the host's client", e));
-  }, [widget]);
-  const clientReady = widget === null || widgetClient !== undefined;
+  // Since we are outside the router component, we cannot use useUrlParams here
+  const { header } = useMemo(getUrlParams, []);
 
-  const content =
-    loaded && clientReady ? (
-      <ClientProvider client={widgetClient}>
-        <MediaDevicesContext value={vm.mediaDevices}>
-          <ProcessorProvider>
-            <Sentry.ErrorBoundary
-              fallback={(error) => <ErrorPage error={error} />}
-            >
-              <Routes>
-                <SentryRoute path="/" element={<HomePage />} />
-                <SentryRoute path="/login" element={<LoginPage />} />
-                <SentryRoute path="/register" element={<RegisterPage />} />
-                <SentryRoute path="*" element={<RoomPage />} />
-              </Routes>
-            </Sentry.ErrorBoundary>
-          </ProcessorProvider>
-        </MediaDevicesContext>
-      </ClientProvider>
-    ) : (
-      <LoadingPage />
-    );
+  const content = loaded ? (
+    <ClientProvider>
+      <MediaDevicesContext value={vm.mediaDevices}>
+        <ProcessorProvider>
+          <Sentry.ErrorBoundary
+            fallback={(error) => <ErrorPage error={error} widget={widget} />}
+          >
+            <Routes>
+              <SentryRoute path="/" element={<HomePage />} />
+              <SentryRoute path="/login" element={<LoginPage />} />
+              <SentryRoute path="/register" element={<RegisterPage />} />
+              <SentryRoute path="*" element={<RoomPage />} />
+            </Routes>
+          </Sentry.ErrorBoundary>
+        </ProcessorProvider>
+      </MediaDevicesContext>
+    </ClientProvider>
+  ) : (
+    <LoadingPage />
+  );
 
   return (
-    <I18nextProvider i18n={i18n}>
-      <HostBridgeProvider value={hostBridge}>
-        <BrowserRouter>
-          <LocationUrlParamsProvider>
-            <BackgroundProvider>
-              <ThemeProvider>
-                <TooltipProvider>
-                  <Suspense fallback={null}>
-                    <MaybeAppBar>{content}</MaybeAppBar>
-                  </Suspense>
-                </TooltipProvider>
-              </ThemeProvider>
-            </BackgroundProvider>
-          </LocationUrlParamsProvider>
-        </BrowserRouter>
-      </HostBridgeProvider>
-    </I18nextProvider>
+    <BrowserRouter>
+      <BackgroundProvider>
+        <ThemeProvider>
+          <TooltipProvider>
+            <Suspense fallback={null}>
+              {header === HeaderStyle.AppBar ? (
+                <AppBar>{content}</AppBar>
+              ) : (
+                content
+              )}
+            </Suspense>
+          </TooltipProvider>
+        </ThemeProvider>
+      </BackgroundProvider>
+    </BrowserRouter>
   );
 };

src/AppBar.module.css

@@ -1,12 +1,6 @@
 .bar {
   flex-shrink: 0;
   position: relative;
-  z-index: var(--call-view-header-footer-layer);
-  padding-left: var(--content-inset-left);
-  padding-right: var(--content-inset-right);
-  padding-top: env(safe-area-inset-top);
-  opacity: 1;
-  transition: opacity 0.15s;
 }
 
 /* Pseudo-element for the gradient background */
@@ -15,7 +9,8 @@
   position: absolute;
   inset-inline: 0;
   /* Extend the gradient beyond the bottom of the header for readability */
-  inset-block: 0 -16px;
+  inset-block: -24px;
+  z-index: var(--call-view-header-footer-layer);
   background: linear-gradient(
     0deg,
     rgba(0, 0, 0, 0) 0%,
@@ -23,157 +18,21 @@
   );
 }
 
-.bar.hidden {
-  opacity: 0;
-  pointer-events: none;
-  /* Switch to position: absolute so the bar takes up no space in the layout
-    when hidden. */
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline: 0;
-}
-
-.bar:has(:focus-visible) {
-  opacity: 1;
-  pointer-events: initial;
-}
-
 .bar > header {
-  flex-shrink: 0;
   position: sticky;
   inset-inline: 0;
   inset-block-start: 0;
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-rows:
-    var(--cpd-space-3x) minmax(var(--cpd-space-10x), auto)
-    var(--cpd-space-3x);
-  grid-template-areas:
-    ". . ."
-    "primaryButton title secondaryButton"
-    ". . .";
-  place-items: center;
-  column-gap: var(--cpd-space-2x);
+  block-size: 64px;
+  z-index: var(--call-view-header-footer-layer);
 }
 
-.bar:has(.subtitle) > header {
-  grid-template-rows:
-    var(--cpd-space-3x) minmax(var(--cpd-space-10x), auto) var(--cpd-space-5x)
-    minmax(var(--cpd-space-8x), auto);
-  grid-template-areas:
-    ". . ."
-    "primaryButton title secondaryButton"
-    ". . ."
-    "subtitle subtitle subtitle";
+.bar svg path {
+  fill: var(--cpd-color-icon-primary);
 }
 
-/* Hide everything but the subtitle in small windows */
-@media (max-height: 450px) {
-  .bar {
-    display: none;
-  }
-
-  .bar:has(.subtitle) {
-    display: initial;
-
-    .title,
-    .primaryButton,
-    .secondaryButton {
-      display: none;
-    }
-
-    > header {
-      grid-template-columns: 1fr;
-      grid-template-rows: var(--cpd-space-5x) minmax(var(--cpd-space-5x), auto);
-      grid-template-areas: "." "subtitle";
-    }
-  }
-}
-
-.primaryButton {
-  grid-area: primaryButton;
-  justify-self: start;
-}
-
-.title {
-  grid-area: title;
-}
-
-.subtitle {
-  grid-area: subtitle;
-
-  svg {
-    color: var(--cpd-color-icon-tertiary);
-    margin-inline-end: var(--cpd-space-2x);
-    block-size: 1.2em;
-    inline-size: 1.2em;
-    vertical-align: text-bottom;
-  }
-}
-
-.title,
-.subtitle {
+.bar > header > h1 {
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.secondaryButton {
-  grid-area: secondaryButton;
-  justify-self: end;
-}
-
-.primaryButton,
-.secondaryButton {
-  svg * {
-    color: var(--cpd-color-icon-primary);
-  }
-}
-
-body[data-platform="ios"] {
-  .bar > header {
-    grid-template-rows: minmax(var(--cpd-space-11x), auto) var(--cpd-space-4x);
-    grid-template-areas: "primaryButton title secondaryButton";
-  }
-
-  .bar:has(.subtitle) > header {
-    grid-template-rows:
-      minmax(var(--cpd-space-6x), auto) minmax(var(--cpd-space-5x), auto)
-      var(--cpd-space-4x);
-    grid-template-areas:
-      "primaryButton title secondaryButton"
-      "primaryButton subtitle secondaryButton";
-
-    .title {
-      align-self: end;
-      /* Nudge the title and subtitle even closer together to replicate native
-      iOS styles */
-      transform: translateY(2px);
-    }
-
-    .subtitle {
-      align-self: start;
-    }
-  }
-
-  .subtitle {
-    color: var(--cpd-color-text-secondary);
-
-    svg {
-      display: none;
-    }
-  }
-
-  /* Hide everything but the subtitle in small windows */
-  @media (max-height: 450px) {
-    .bar:has(.subtitle) > header {
-      grid-template-rows: var(--cpd-space-4x) minmax(var(--cpd-space-5x), auto);
-      grid-template-areas: "." "subtitle";
-    }
-
-    .subtitle {
-      color: var(--cpd-color-text-primary);
-    }
-  }
-}

src/AppBar.test.tsx

@@ -5,33 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, type ReactNode } from "react";
 import { render } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
 
-import { AppBar, useAppBarSubtitle, useAppBarTitle } from "./AppBar";
-
-const content = <p>This is the content.</p>;
-
-function snapshotAppBar(content: ReactNode): void {
-  const { container } = render(
-    <TooltipProvider>
-      <AppBar>{content}</AppBar>
-    </TooltipProvider>,
-  );
-  expect(container).toMatchSnapshot();
-}
+import { AppBar } from "./AppBar";
 
 describe("AppBar", () => {
-  it("renders", () => snapshotAppBar(content));
-
-  it("renders with title and subtitle", () => {
-    const TestComponent: FC = () => {
-      useAppBarTitle("Title");
-      useAppBarSubtitle("Subtitle");
-      return content;
-    };
-    snapshotAppBar(<TestComponent />);
+  it("renders", () => {
+    const { container } = render(
+      <TooltipProvider>
+        <AppBar>
+          <p>This is the content.</p>
+        </AppBar>
+      </TooltipProvider>,
+    );
+    expect(container).toMatchSnapshot();
   });
 });

src/AppBar.tsx

@@ -6,34 +6,28 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
+  createContext,
+  type FC,
+  type MouseEvent,
+  type ReactNode,
   use,
   useCallback,
   useEffect,
   useMemo,
   useState,
-  createContext,
-  type FC,
-  type MouseEvent,
-  type ReactNode,
 } from "react";
-import classNames from "classnames";
-import { Heading, IconButton, Text, Tooltip } from "@vector-im/compound-web";
-import {
-  ArrowLeftIcon,
-  ChevronLeftIcon,
-  CollapseIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
+import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/lib/logger";
 
+import { Header, LeftNav, RightNav } from "./Header";
 import { platform } from "./Platform";
 import styles from "./AppBar.module.css";
 
 interface AppBarContext {
   setTitle: (value: string) => void;
-  setSubtitle: (value: ReactNode) => void;
   setSecondaryButton: (value: ReactNode) => void;
-  setPrimaryButtonIconKind: (value: "back" | "minimise") => void;
   setHidden: (value: boolean) => void;
 }
 
@@ -55,76 +49,44 @@ export const AppBar: FC<Props> = ({ children }) => {
   }, []);
 
   const [title, setTitle] = useState<string>("");
-  const [subtitle, setSubtitle] = useState<ReactNode>(undefined);
   const [hidden, setHidden] = useState<boolean>(false);
   const [secondaryButton, setSecondaryButton] = useState<ReactNode | null>(
     null,
   );
-  const [primaryButtonIcon, setPrimaryButtonIconKind] = useState<
-    "back" | "minimise"
-  >("minimise");
-
   const context = useMemo(
-    () => ({
-      setTitle,
-      setSubtitle,
-      setSecondaryButton,
-      setHidden,
-      setPrimaryButtonIconKind,
-    }),
-    [
-      setTitle,
-      setSubtitle,
-      setHidden,
-      setSecondaryButton,
-      setPrimaryButtonIconKind,
-    ],
+    () => ({ setTitle, setSecondaryButton, setHidden }),
+    [setTitle, setHidden, setSecondaryButton],
   );
 
-  const BackIcon = platform === "android" ? ArrowLeftIcon : ChevronLeftIcon;
-
   return (
     <>
-      {/* Wrap the header in a div due to annoying z-index issues with the
-      gradient background */}
-      <div className={classNames(styles.bar, { [styles.hidden]: hidden })}>
-        <header>
-          <Tooltip label={t("common.back")}>
-            <IconButton
-              className={styles.primaryButton}
-              // We render the back button (PrimaryButtonIcon) the same size as the native os.
-              // We render the minimise icon (default) smaller as per designs.
-              size={primaryButtonIcon === "back" ? "32px" : "24px"}
-              onClick={onBackClick}
-            >
-              {primaryButtonIcon === "back" ? (
-                <BackIcon aria-hidden />
-              ) : (
+      <div
+        style={{ display: hidden ? "none" : "block" }}
+        className={styles.bar}
+      >
+        <Header
+          // App bar is mainly seen in the call view, which has its own
+          // 'reconnecting' toast
+          disconnectedBanner={false}
+        >
+          <LeftNav>
+            <Tooltip label={t("common.back")}>
+              <IconButton size="24px" onClick={onBackClick}>
                 <CollapseIcon aria-hidden />
-              )}
-            </IconButton>
-          </Tooltip>
+              </IconButton>
+            </Tooltip>
+          </LeftNav>
           {title && (
             <Heading
-              className={styles.title}
               type="body"
-              size={platform === "ios" ? "md" : "lg"}
-              weight={platform === "ios" ? "semibold" : "medium"}
+              size="lg"
+              weight={platform === "android" ? "medium" : "semibold"}
             >
               {title}
             </Heading>
           )}
-          {subtitle && (
-            <Text
-              className={styles.subtitle}
-              as="span"
-              size={platform === "ios" ? "sm" : "lg"}
-            >
-              {subtitle}
-            </Text>
-          )}
-          <div className={styles.secondaryButton}>{secondaryButton}</div>
-        </header>
+          <RightNav>{secondaryButton}</RightNav>
+        </Header>
       </div>
       <AppBarContext value={context}>{children}</AppBarContext>
     </>
@@ -145,36 +107,6 @@ export function useAppBarTitle(title: string): void {
   }, [title, setTitle]);
 }
 
-/**
- * React hook which sets the subtitle to be shown in the app bar, if present. It
- * is an error to call this hook from multiple sites in the same component tree.
- */
-export function useAppBarSubtitle(subtitle: ReactNode): void {
-  const setSubtitle = use(AppBarContext)?.setSubtitle;
-  useEffect(() => {
-    if (setSubtitle !== undefined) {
-      setSubtitle(subtitle);
-      return (): void => setSubtitle("");
-    }
-  }, [subtitle, setSubtitle]);
-}
-
-/**
- * React hook which sets the primary button icon kind. Can only be "minimise" or "back"
- * It is an error to call this hook from multiple sites in the same component tree.
- */
-export function useAppBarPrimaryButtonIconKind(
-  icon: "back" | "minimise",
-): void {
-  const setIconKind = use(AppBarContext)?.setPrimaryButtonIconKind;
-  useEffect(() => {
-    if (setIconKind !== undefined) {
-      setIconKind(icon);
-      return (): void => setIconKind("minimise");
-    }
-  }, [setIconKind, icon]);
-}
-
 /**
  * React hook which sets the title to be shown in the app bar, if present. It is
  * an error to call this hook from multiple sites in the same component tree.

src/Avatar.test.tsx

@@ -9,22 +9,18 @@ import { afterEach, expect, test, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { type MatrixClient } from "matrix-js-sdk";
 import { type FC, type PropsWithChildren } from "react";
+import { type WidgetApi } from "matrix-widget-api";
 
 import { ClientContextProvider } from "./ClientContext";
-import { Avatar } from "./Avatar";
+import { Avatar, getAvatarFromWidgetAPI } from "./Avatar";
 import { mockMatrixRoomMember, mockRtcMembership } from "./utils/test";
-import {
-  type HostBridge,
-  HostBridgeProvider,
-  nullHostBridge,
-} from "./HostBridge";
+import { widget } from "./widget";
 
 const TestComponent: FC<
   PropsWithChildren<{
     client: MatrixClient;
-    hostBridge?: HostBridge;
   }>
-> = ({ client, hostBridge = nullHostBridge, children }) => {
+> = ({ client, children }) => {
   return (
     <ClientContextProvider
       value={{
@@ -42,11 +38,17 @@ const TestComponent: FC<
         },
       }}
     >
-      <HostBridgeProvider value={hostBridge}>{children}</HostBridgeProvider>
+      {children}
     </ClientContextProvider>
   );
 };
 
+vi.mock("./widget", () => ({
+  widget: {
+    api: null, // Ideally we'd only mock this in the as a widget test so the whole module is otherwise null, but just nulling `api` by default works well enough
+  },
+}));
+
 afterEach(() => {
   vi.unstubAllGlobals();
 });
@@ -133,7 +135,7 @@ test("should attempt to fetch authenticated media from the server", async () =>
   });
 });
 
-test("should download media through the host when it offers to", async () => {
+test("should attempt to use widget API if running as a widget", async () => {
   const expectedMXCUrl = "mxc://example.org/alice-avatar";
   const expectedObjectURL = "my-object-url";
   const theBlob = new Blob([]);
@@ -149,8 +151,8 @@ test("should download media through the host when it offers to", async () => {
     getAccessToken: () => undefined,
   } as unknown as MatrixClient);
 
-  const downloadMedia = vi.fn().mockResolvedValue(theBlob);
-  const hostBridge: HostBridge = { ...nullHostBridge, downloadMedia };
+  widget!.api = { downloadFile: vi.fn() } as unknown as WidgetApi;
+  vi.spyOn(widget!.api, "downloadFile").mockResolvedValue({ file: theBlob });
   const member = mockMatrixRoomMember(
     mockRtcMembership("@alice:example.org", "AAAA"),
     {
@@ -159,7 +161,7 @@ test("should download media through the host when it offers to", async () => {
   );
   const displayName = "Alice";
   render(
-    <TestComponent client={client} hostBridge={hostBridge}>
+    <TestComponent client={client}>
       <Avatar
         id={member.userId}
         name={displayName}
@@ -174,5 +176,38 @@ test("should download media through the host when it offers to", async () => {
     document.querySelector(`img[src='${expectedObjectURL}']`),
   );
 
-  expect(downloadMedia).toBeCalledWith(expectedMXCUrl);
+  expect(widget!.api.downloadFile).toBeCalledWith(expectedMXCUrl);
+});
+
+test("Supports download files as base64", async () => {
+  const expectedMXCUrl = "mxc://example.org/alice-avatar";
+  const expectedBase64 =
+    "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAADIElEQVR4nAAQA+/8ApxhEfFNuwna" +
+    "+DO1pFMx5YDg6gb8p1WFkbFSox9H6r5c8jp1gxlHXrDfA/oQFi4A0gTXH9YBNgwRm12xO68QP6lv" +
+    "ZLKH9qW1VM6kz6zA3T1Ui8J+Xbnh2BZ7oXDe/2gajzoA6j1JGotpz99xO+T2NR634Nhx3zhuera/" +
+    "UdrpMLdEpwWXLnSqZRasGsrl93FjdTwRBMaqsx6vJksnPOmV9ttbXFIOb0XDGPbVythSC2n7P/bS" +
+    "Zv0U0QqbBLk/5Wu1werYzAHiz11Bj8bEylQ92Pxvo+PwF6/KbGnIHTvGZkFzDkMnqz3g7Pw3NOSP" +
+    "oV+qfyJuSI0AeZmrPejFQ8kzBSDWO8D7lr4+6ePRBRmZtKCf+fNjSCOyb5jqwhBnD2cycbJtQQbR" +
+    "A4qdPG2ONfTPeQgi96+zT7grBI0JwvgFBceJdLJd4BX1VQIyY+j7OYueNWqEpf8iYgMj78I95eRt" +
+    "nfPLwlxhVns84iL4Yvw8jDrB9vQi8ktpsdJOMiDwKrBGD3q56COD2oIA96CCBgiro4tkvkumZSAc" +
+    "ZKXRLsziUFGytWJLaPjwnzXv2hicPy6k9AXsF3QkysOZAkB3m9XPpixhq9b0OKqV/zZx3L79o6wZ" +
+    "Dr40J7sj7f+ARd545CP01r5omHt94tbnjgA46HsM2OhP+qQ882LN+Bhscq2WSHGSHT4J9MQcsWZP" +
+    "2+N2LdPy61MN4/1++BJHmDcDLQBUEwLvjZp1fRfzxV7yirwIiOA7Vr8z+1yvS/pSkfUzkjswybOd" +
+    "M5i0I8Q69MTXAKxqtR0/tyGkfCmHfupGASp/SAT9J8f3aQV+gDbpva592v4w8Cv5EMm7CzZPwThF" +
+    "kgTChNPts7F03ccxpblfIz0EiAON1DKk71rX07BvDlLHY1ItPuqZ7hjy19jrAgl+QqEE1btHVA5R" +
+    "uAnRXpEWc6rjARlJY5G1wbMk12rrqpr8rhR3YpFgLgOx4BtQ0D/hGe7KANSGBMQojmObId0asCmd" +
+    "XzmnQI9P8QnwsO9vtqZlgIoU4g+f2/G8Q3/nVMX7dujniwEAAP//KmiQs7P8MeIAAAAASUVORK5C" +
+    "YII=";
+  const mockWidgetAPI = {
+    downloadFile: vi.fn().mockImplementation(async (contentUri) => {
+      if (contentUri !== expectedMXCUrl) {
+        return Promise.reject(new Error("Unexpected content URI"));
+      }
+      return { file: expectedBase64 };
+    }),
+  } as unknown as WidgetApi;
+
+  const blob = await getAvatarFromWidgetAPI(mockWidgetAPI, expectedMXCUrl);
+
+  expect(blob).toBeInstanceOf(Blob);
 });

src/Avatar.tsx

@@ -14,9 +14,10 @@ import {
 } from "react";
 import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
 import { type MatrixClient } from "matrix-js-sdk";
+import { type WidgetApi } from "matrix-widget-api";
 
 import { useClientState } from "./ClientContext";
-import { useHostBridge } from "./HostBridge";
+import { widget } from "./widget";
 
 export enum Size {
   XS = "xs",
@@ -75,7 +76,6 @@ export const Avatar: FC<Props> = ({
   ...props
 }) => {
   const clientState = useClientState();
-  const hostBridge = useHostBridge();
 
   const sizePx = useMemo(
     () =>
@@ -87,8 +87,7 @@ export const Avatar: FC<Props> = ({
 
   const [avatarUrl, setAvatarUrl] = useState<string | undefined>(undefined);
 
-  // In theory, a change in `clientState` or `sizePx` could run extra media
-  // downloads, but in practice they should be stable long before this code runs.
+  // In theory, a change in `clientState` or `sizePx` could run extra getAvatarFromWidgetAPI calls, but in practice they should be stable long before this code runs.
   useEffect(() => {
     if (!src) {
       setAvatarUrl(undefined);
@@ -97,8 +96,8 @@ export const Avatar: FC<Props> = ({
 
     let blob: Promise<Blob>;
 
-    if (hostBridge.downloadMedia) {
-      blob = hostBridge.downloadMedia(src);
+    if (widget?.api) {
+      blob = getAvatarFromWidgetAPI(widget.api, src);
     } else if (
       clientState?.state === "valid" &&
       clientState.authenticated?.client &&
@@ -133,7 +132,7 @@ export const Avatar: FC<Props> = ({
         URL.revokeObjectURL(objectUrl);
       }
     };
-  }, [clientState, hostBridge, src, sizePx]);
+  }, [clientState, src, sizePx]);
 
   return (
     <CompoundAvatar
@@ -173,3 +172,24 @@ async function getAvatarFromServer(
 
   return blob;
 }
+
+// export for testing
+export async function getAvatarFromWidgetAPI(
+  api: WidgetApi,
+  src: string,
+): Promise<Blob> {
+  const response = await api.downloadFile(src);
+  const file = response.file;
+
+  // element-web sends a Blob, and the MSC4039 is considering changing the spec to strictly Blob, so only handling that
+  if (file instanceof Blob) {
+    return file;
+  } else if (typeof file === "string") {
+    // it is a base64 string
+    const bytes = Uint8Array.from(atob(file), (c) => c.charCodeAt(0));
+    return new Blob([bytes]);
+  }
+  throw new Error(
+    "Downloaded file format is not supported: " + typeof file + "",
+  );
+}

src/ClientContext.test.tsx

@@ -1,115 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, test, vi } from "vitest";
-import { render, waitFor } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
-import { type MatrixClient } from "matrix-js-sdk";
-import { type FC } from "react";
-
-import { ClientProvider, useClientState } from "./ClientContext";
-
-const mockClient = (userId = "@alice:example.org"): MatrixClient =>
-  ({
-    on: vi.fn(),
-    removeListener: vi.fn(),
-    getUserId: () => userId,
-    getDeviceId: () => "AAAA",
-    stopClient: vi.fn(),
-  }) as Partial<MatrixClient> as MatrixClient;
-
-/** Reports what the context says, so a test can assert on it. */
-const ShowClientState: FC = () => {
-  const state = useClientState();
-  if (state === undefined) return <span>loading</span>;
-  if (state.state === "error") return <span>error</span>;
-  return (
-    <span>{state.authenticated?.client.getUserId() ?? "unauthenticated"}</span>
-  );
-};
-
-test("uses a client supplied by the host without waiting", () => {
-  const client = mockClient();
-
-  const { container } = render(
-    <BrowserRouter>
-      <ClientProvider client={client}>
-        <ShowClientState />
-      </ClientProvider>
-    </BrowserRouter>,
-  );
-
-  // Available on the very first render: a supplied client needs no session
-  // restoring, so there is no loading state to pass through.
-  expect(container.textContent).toBe("@alice:example.org");
-});
-
-test("does not claim exclusive use of storage when given a client", () => {
-  // The channel is created when the module loads, so spy on the prototype
-  // rather than trying to replace the global.
-  const postMessage = vi.spyOn(BroadcastChannel.prototype, "postMessage");
-
-  render(
-    <BrowserRouter>
-      <ClientProvider client={mockClient()}>
-        <ShowClientState />
-      </ClientProvider>
-    </BrowserRouter>,
-  );
-
-  // The broadcast shuts down other instances to protect Element Call's own
-  // stores. A host's client brings its own, so there is nothing to protect.
-  expect(postMessage).not.toHaveBeenCalled();
-
-  postMessage.mockRestore();
-});
-
-test("follows the client when the host swaps it", () => {
-  const first = mockClient();
-  const second = mockClient("@bob:example.org");
-
-  const { container, rerender } = render(
-    <BrowserRouter>
-      <ClientProvider client={first}>
-        <ShowClientState />
-      </ClientProvider>
-    </BrowserRouter>,
-  );
-  expect(container.textContent).toBe("@alice:example.org");
-
-  // A host that re-authenticates hands us a new client on a mounted component
-  rerender(
-    <BrowserRouter>
-      <ClientProvider client={second}>
-        <ShowClientState />
-      </ClientProvider>
-    </BrowserRouter>,
-  );
-
-  expect(container.textContent).toBe("@bob:example.org");
-});
-
-test("finds a client of its own when the host supplies none", async () => {
-  const client = mockClient();
-  vi.doMock("./utils/spa", () => ({
-    initSPA: vi.fn().mockResolvedValue({ client, passwordlessUser: true }),
-  }));
-
-  const { container } = render(
-    <BrowserRouter>
-      <ClientProvider>
-        <ShowClientState />
-      </ClientProvider>
-    </BrowserRouter>,
-  );
-
-  // Nothing to show until a session has been restored or created
-  expect(container.textContent).toBe("loading");
-  await waitFor(() => expect(container.textContent).toBe("@alice:example.org"));
-
-  vi.doUnmock("./utils/spa");
-});

src/ClientContext.tsx

@@ -21,8 +21,9 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { type ISyncStateData, type SyncState } from "matrix-js-sdk/lib/sync";
 import { ClientEvent, type MatrixClient } from "matrix-js-sdk";
 
+import type { WidgetApi } from "matrix-widget-api";
 import { ErrorPage } from "./FullScreenView";
-import { useHostBridge } from "./HostBridge";
+import { widget } from "./widget";
 import {
   PosthogAnalytics,
   RegistrationType,
@@ -133,48 +134,18 @@ const loadChannel =
 
 interface Props {
   children: JSX.Element;
-  /**
-   * The client Element Call should use.
-   *
-   * When a host embeds Element Call it already has a client, and owns the
-   * user's session; supplying it here means Element Call neither authenticates
-   * anyone nor manages their session. Left out, Element Call finds a client
-   * itself — from the widget API, or by restoring or creating a session of its
-   * own.
-   */
-  client?: MatrixClient;
 }
 
-export const ClientProvider: FC<Props> = ({ children, client }) => {
+export const ClientProvider: FC<Props> = ({ children }) => {
   const navigate = useNavigate();
-  const hostBridge = useHostBridge();
 
   // null = signed out, undefined = loading
   const [initClientState, setInitClientState] = useState<
     InitResult | null | undefined
-  >(
-    client === undefined
-      ? undefined
-      : // A supplied client belongs to the host, so there is no session of ours
-        // to restore and nothing to wait for.
-        { client, passwordlessUser: false },
-  );
+  >(undefined);
 
   const initializing = useRef(false);
   useEffect(() => {
-    if (client !== undefined) {
-      // Nothing to load, but a host may hand us a different client later — on
-      // re-authenticating, say — so follow whichever one it has given us.
-      setInitClientState((current) =>
-        current?.client === client
-          ? current
-          : { client, passwordlessUser: false },
-      );
-      // Analytics still need to follow the user's choices.
-      if (PosthogAnalytics.instance.isEnabled())
-        PosthogAnalytics.instance.startListeningToSettingsChanges();
-      return;
-    }
     // In case the component is mounted, unmounted, and remounted quickly (as
     // React does in strict mode), we need to make sure not to doubly initialize
     // the client.
@@ -189,7 +160,7 @@ export const ClientProvider: FC<Props> = ({ children, client }) => {
       })
       .catch((err) => logger.error(err))
       .finally(() => (initializing.current = false));
-  }, [client]);
+  }, []);
 
   const changePassword = useCallback(
     async (password: string) => {
@@ -230,6 +201,7 @@ export const ClientProvider: FC<Props> = ({ children, client }) => {
 
       saveSession(session);
       setInitClientState({
+        widgetApi: null,
         client,
         passwordlessUser: session.passwordlessUser,
       });
@@ -256,13 +228,11 @@ export const ClientProvider: FC<Props> = ({ children, client }) => {
 
   // To protect against multiple sessions writing to the same storage
   // simultaneously, we send a broadcast message that shuts down all other
-  // running instances of the app. Element Call only has storage of its own to
-  // protect when it created the session itself; given a client — by a host, or
-  // over the widget API — it is mostly stateless.
-  const ownsSession = client === undefined;
+  // running instances of the app. This isn't necessary if the app is running in
+  // a widget though, since then it'll be mostly stateless.
   useEffect(() => {
-    if (ownsSession) loadChannel?.postMessage({});
-  }, [ownsSession]);
+    if (!widget) loadChannel?.postMessage({});
+  }, []);
 
   const [alreadyOpenedErr, setAlreadyOpenedErr] = useState<Error | undefined>(
     undefined,
@@ -337,36 +307,64 @@ export const ClientProvider: FC<Props> = ({ children, client }) => {
       initClientState.client.on(ClientEvent.Sync, onSync);
     }
 
-    if (!hostBridge.supportsReactions)
-      logger.warn("The host does not permit reactions");
-    setSupportsReactions(hostBridge.supportsReactions);
+    if (initClientState.widgetApi) {
+      const reactSend = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.send.event:m.reaction",
+      );
+      const redactSend = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.send.event:m.room.redaction",
+      );
+      const reactRcv = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.receive.event:m.reaction",
+      );
+      const redactRcv = initClientState.widgetApi.hasCapability(
+        "org.matrix.msc2762.receive.event:m.room.redaction",
+      );
+
+      if (!reactSend || !reactRcv || !redactSend || !redactRcv) {
+        logger.warn("Widget does not support reactions");
+        setSupportsReactions(false);
+      } else {
+        setSupportsReactions(true);
+      }
+    } else {
+      setSupportsReactions(true);
+    }
 
     return (): void => {
       if (initClientState.client) {
         initClientState.client.removeListener(ClientEvent.Sync, onSync);
       }
     };
-  }, [initClientState, onSync, hostBridge]);
+  }, [initClientState, onSync]);
 
   if (alreadyOpenedErr) {
-    return <ErrorPage error={alreadyOpenedErr} />;
+    return <ErrorPage widget={widget} error={alreadyOpenedErr} />;
   }
 
   return <ClientContext value={state}>{children}</ClientContext>;
 };
 
 export type InitResult = {
+  widgetApi: WidgetApi | null;
   client: MatrixClient;
   passwordlessUser: boolean;
 };
 
-/**
- * Restores or creates a session of Element Call's own. Only reached when no
- * client was supplied for it to use.
- */
 async function loadClient(): Promise<InitResult | null> {
-  const { initSPA } = await import("./utils/spa");
-  return initSPA(loadSession, clearSession);
+  if (widget) {
+    // We're inside a widget, so let's engage *matryoshka mode*
+    logger.log("Using a matryoshka client");
+    const client = await widget.client;
+    return {
+      widgetApi: widget.api,
+      client,
+      passwordlessUser: false,
+    };
+  } else {
+    const { initSPA } = await import("./utils/spa");
+    return initSPA(loadSession, clearSession);
+  }
 }
 
 export interface Session {

src/ErrorView.tsx

@@ -21,7 +21,7 @@ import { RageshakeButton } from "./settings/RageshakeButton";
 import styles from "./ErrorView.module.css";
 import { useUrlParams } from "./UrlParams";
 import { LinkButton } from "./button";
-import { useHostBridge } from "./HostBridge.ts";
+import { ElementWidgetActions, type WidgetHelpers } from "./widget.ts";
 
 interface Props {
   Icon: ComponentType<SVGAttributes<SVGElement>>;
@@ -38,6 +38,7 @@ interface Props {
    */
   fatal?: boolean;
   children: ReactNode;
+  widget: WidgetHelpers | null;
 }
 
 export const ErrorView: FC<Props> = ({
@@ -46,27 +47,32 @@ export const ErrorView: FC<Props> = ({
   rageshake,
   fatal,
   children,
+  widget,
 }) => {
   const { t } = useTranslation();
   const { confineToRoom } = useUrlParams();
-  const hostBridge = useHostBridge();
 
   const onReload = useCallback(() => {
     window.location.href = "/";
   }, []);
 
-  const CloseButton: FC<{ close: () => Promise<void> }> = ({
-    close,
+  const CloseWidgetButton: FC<{ widget: WidgetHelpers }> = ({
+    widget,
   }): ReactElement => {
-    // When the host can dismiss us, offer that instead of a link home
-    const onClose = (): void => {
-      close().catch((e) => {
-        // What to do here?
-        logger.error("Failed to ask the host to close Element Call", e);
-      });
+    // in widget mode we don't want to show the return home button but a close button
+    const closeWidget = (): void => {
+      widget.api.transport
+        .send(ElementWidgetActions.Close, {})
+        .catch((e) => {
+          // What to do here?
+          logger.error("Failed to send close action", e);
+        })
+        .finally(() => {
+          widget.api.transport.stop();
+        });
     };
     return (
-      <Button kind="primary" onClick={onClose}>
+      <Button kind="primary" onClick={closeWidget}>
         {t("action.close")}
       </Button>
     );
@@ -102,8 +108,8 @@ export const ErrorView: FC<Props> = ({
       {rageshake && (
         <RageshakeButton description={`***Error View***: ${title}`} />
       )}
-      {hostBridge.close ? (
-        <CloseButton close={hostBridge.close} />
+      {widget ? (
+        <CloseWidgetButton widget={widget} />
       ) : (
         !confineToRoom && <ReturnToHomeButton />
       )}

src/FullScreenView.tsx

@@ -17,6 +17,7 @@ import styles from "./FullScreenView.module.css";
 import { useUrlParams } from "./UrlParams";
 import { RichError } from "./RichError";
 import { ErrorView } from "./ErrorView";
+import { type WidgetHelpers } from "./widget.ts";
 
 interface FullScreenViewProps {
   className?: string;
@@ -46,12 +47,13 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
 };
 
 interface ErrorPageProps {
-  error: unknown;
+  error: Error | unknown;
+  widget: WidgetHelpers | null;
 }
 
 // Due to this component being used as the crash fallback for Sentry, which has
 // weird type requirements, we can't just give this a type of FC<ErrorPageProps>
-export const ErrorPage = ({ error }: ErrorPageProps): ReactElement => {
+export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => {
   const { t } = useTranslation();
   useEffect(() => {
     logger.error(error);
@@ -64,6 +66,7 @@ export const ErrorPage = ({ error }: ErrorPageProps): ReactElement => {
         error.richMessage
       ) : (
         <ErrorView
+          widget={widget}
           Icon={ErrorSolidIcon}
           title={t("error.generic")}
           rageshake

src/HostBridge.test.ts

@@ -1,288 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { describe, expect, test, vi } from "vitest";
-import { type WidgetApi, WidgetApiToWidgetAction } from "matrix-widget-api";
-import EventEmitter from "events";
-
-import { type Observable } from "rxjs";
-
-import {
-  createWidgetHostBridge,
-  type HostBridge,
-  nullHostBridge,
-} from "./HostBridge";
-import { ElementWidgetActions, type WidgetHelpers } from "./widget";
-
-function mockWidget(api: Partial<WidgetApi>): WidgetHelpers {
-  return {
-    api: api as WidgetApi,
-    lazyActions: new EventEmitter(),
-    client: Promise.resolve(),
-  } as unknown as WidgetHelpers;
-}
-
-/** A widget whose transport records what Element Call sends it. */
-function mockTransport(): {
-  send: ReturnType<typeof vi.fn>;
-  reply: ReturnType<typeof vi.fn>;
-  stop: ReturnType<typeof vi.fn>;
-} {
-  return {
-    send: vi.fn().mockResolvedValue(undefined),
-    reply: vi.fn(),
-    stop: vi.fn(),
-  };
-}
-
-describe("createWidgetHostBridge", () => {
-  describe("telling the host what Element Call is doing", () => {
-    test("asks to be kept on screen, and to stop being", async () => {
-      const setAlwaysOnScreen = vi.fn().mockResolvedValue(true);
-      const bridge = createWidgetHostBridge(mockWidget({ setAlwaysOnScreen }));
-
-      await bridge.setAlwaysOnScreen(true);
-      await bridge.setAlwaysOnScreen(false);
-
-      expect(setAlwaysOnScreen).toHaveBeenNthCalledWith(1, true);
-      expect(setAlwaysOnScreen).toHaveBeenNthCalledWith(2, false);
-    });
-
-    test("reports that it has loaded", async () => {
-      const sendContentLoaded = vi.fn().mockResolvedValue(undefined);
-      const bridge = createWidgetHostBridge(mockWidget({ sendContentLoaded }));
-
-      await bridge.contentLoaded();
-
-      expect(sendContentLoaded).toHaveBeenCalledOnce();
-    });
-
-    test.each([
-      ["notifyJoined", ElementWidgetActions.JoinCall, {}],
-      ["notifyHungUp", ElementWidgetActions.HangupCall, {}],
-    ] as const)("sends %s as %s", async (method, action, payload) => {
-      const transport = mockTransport();
-      const bridge = createWidgetHostBridge(mockWidget({ transport } as never));
-
-      await bridge[method]();
-
-      expect(transport.send).toHaveBeenCalledWith(action, payload);
-    });
-
-    test("sends the mute state the host needs to mirror", async () => {
-      const transport = mockTransport();
-      const bridge = createWidgetHostBridge(mockWidget({ transport } as never));
-
-      await bridge.notifyDeviceMute({
-        audio_enabled: true,
-        video_enabled: false,
-      });
-
-      expect(transport.send).toHaveBeenCalledWith(
-        ElementWidgetActions.DeviceMute,
-        { audio_enabled: true, video_enabled: false },
-      );
-    });
-  });
-
-  describe("relaying what the host asks for", () => {
-    /** Emits a widget action the way widget.ts does, and returns the event. */
-    function askHost(
-      widget: WidgetHelpers,
-      action: string,
-      data: unknown,
-    ): CustomEvent {
-      const ev = new CustomEvent(action, { detail: { action, data } });
-      widget.lazyActions.emit(action, ev);
-      return ev;
-    }
-
-    // Selectors rather than keys, so each stream keeps its own request type
-    const inboundStreams: [
-      name: string,
-      select: (bridge: HostBridge) => Observable<{ data: unknown }>,
-      action: string,
-    ][] = [
-      [
-        "themeChange$",
-        (bridge) => bridge.themeChange$,
-        WidgetApiToWidgetAction.ThemeChange,
-      ],
-      ["join$", (bridge) => bridge.join$, ElementWidgetActions.JoinCall],
-      ["hangUp$", (bridge) => bridge.hangUp$, ElementWidgetActions.HangupCall],
-      [
-        "deviceMute$",
-        (bridge) => bridge.deviceMute$,
-        ElementWidgetActions.DeviceMute,
-      ],
-    ];
-
-    test.each(inboundStreams)(
-      "surfaces %s with the host's data",
-      (_name, select, action) => {
-        const widget = mockWidget({ transport: mockTransport() } as never);
-        const bridge = createWidgetHostBridge(widget);
-        const seen: unknown[] = [];
-        select(bridge).subscribe((request) => seen.push(request.data));
-
-        askHost(widget, action, { some: "payload" });
-
-        expect(seen).toEqual([{ some: "payload" }]);
-      },
-    );
-
-    test("replies to the host against the request it made", () => {
-      const transport = mockTransport();
-      const widget = mockWidget({ transport } as never);
-      const bridge = createWidgetHostBridge(widget);
-      bridge.deviceMute$.subscribe((request) =>
-        request.reply({ audio_enabled: false, video_enabled: true }),
-      );
-
-      const ev = askHost(widget, ElementWidgetActions.DeviceMute, {
-        audio_enabled: false,
-      });
-
-      expect(transport.reply).toHaveBeenCalledWith(ev.detail, {
-        audio_enabled: false,
-        video_enabled: true,
-      });
-    });
-
-    test("still replies when there is nothing to say", () => {
-      const transport = mockTransport();
-      const widget = mockWidget({ transport } as never);
-      const bridge = createWidgetHostBridge(widget);
-      bridge.hangUp$.subscribe((request) => request.reply());
-
-      const ev = askHost(widget, ElementWidgetActions.HangupCall, {});
-
-      // The widget API requires an answer, so an empty reply becomes {}
-      expect(transport.reply).toHaveBeenCalledWith(ev.detail, {});
-    });
-
-    test("stops listening once unsubscribed", () => {
-      const widget = mockWidget({ transport: mockTransport() } as never);
-      const bridge = createWidgetHostBridge(widget);
-      const seen: unknown[] = [];
-      const subscription = bridge.hangUp$.subscribe((r) => seen.push(r.data));
-
-      subscription.unsubscribe();
-      askHost(widget, ElementWidgetActions.HangupCall, {});
-
-      expect(seen).toEqual([]);
-    });
-  });
-
-  describe("downloadMedia", () => {
-    const mxcUri = "mxc://example.org/alice-avatar";
-
-    test("passes a Blob through unchanged", async () => {
-      const file = new Blob([]);
-      const bridge = createWidgetHostBridge(
-        mockWidget({ downloadFile: vi.fn().mockResolvedValue({ file }) }),
-      );
-
-      await expect(bridge.downloadMedia!(mxcUri)).resolves.toBe(file);
-    });
-
-    test("decodes a base64 string into a Blob", async () => {
-      const bridge = createWidgetHostBridge(
-        mockWidget({
-          // "hello" in base64
-          downloadFile: vi.fn().mockResolvedValue({ file: "aGVsbG8=" }),
-        }),
-      );
-
-      const blob = await bridge.downloadMedia!(mxcUri);
-
-      expect(blob).toBeInstanceOf(Blob);
-      // The five decoded bytes, rather than the eight characters of base64 —
-      // which is what we'd get if the string were stored verbatim.
-      expect(blob.size).toBe(5);
-    });
-
-    test("rejects a file format it does not understand", async () => {
-      const bridge = createWidgetHostBridge(
-        mockWidget({ downloadFile: vi.fn().mockResolvedValue({ file: 42 }) }),
-      );
-
-      await expect(bridge.downloadMedia!(mxcUri)).rejects.toThrow(
-        "Downloaded file format is not supported",
-      );
-    });
-  });
-
-  describe("close", () => {
-    test("asks the host to close, then stops the transport", async () => {
-      const transport = {
-        send: vi.fn().mockResolvedValue(undefined),
-        stop: vi.fn(),
-      };
-      const bridge = createWidgetHostBridge(mockWidget({ transport } as never));
-
-      await bridge.close!();
-
-      expect(transport.send).toHaveBeenCalledWith(
-        ElementWidgetActions.Close,
-        {},
-      );
-      expect(transport.stop).toHaveBeenCalledOnce();
-    });
-
-    test("stops the transport even when the host refuses to close", async () => {
-      const transport = {
-        send: vi.fn().mockRejectedValue(new Error("no")),
-        stop: vi.fn(),
-      };
-      const bridge = createWidgetHostBridge(mockWidget({ transport } as never));
-
-      // Leaving the messaging live would leave the close affordance dead
-      await expect(bridge.close!()).rejects.toThrow("no");
-      expect(transport.stop).toHaveBeenCalledOnce();
-    });
-  });
-
-  describe("supportsReactions", () => {
-    const capabilities = [
-      "org.matrix.msc2762.send.event:m.reaction",
-      "org.matrix.msc2762.send.event:m.room.redaction",
-      "org.matrix.msc2762.receive.event:m.reaction",
-      "org.matrix.msc2762.receive.event:m.room.redaction",
-    ];
-
-    test("is true when the host grants every reaction capability", () => {
-      const bridge = createWidgetHostBridge(
-        mockWidget({ hasCapability: () => true }),
-      );
-
-      expect(bridge.supportsReactions).toBe(true);
-    });
-
-    test.each(capabilities)("is false without %s", (missing) => {
-      const bridge = createWidgetHostBridge(
-        mockWidget({ hasCapability: (c) => c !== missing }),
-      );
-
-      expect(bridge.supportsReactions).toBe(false);
-    });
-  });
-});
-
-describe("nullHostBridge", () => {
-  test("offers no way to close, so the interface falls back to navigation", () => {
-    expect(nullHostBridge.close).toBeUndefined();
-  });
-
-  test("offers no media download, so Element Call uses its own client", () => {
-    expect(nullHostBridge.downloadMedia).toBeUndefined();
-  });
-
-  test("supports reactions, since nothing is mediating its homeserver access", () => {
-    expect(nullHostBridge.supportsReactions).toBe(true);
-  });
-});

src/HostBridge.ts

@@ -1,220 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { createContext, use } from "react";
-import { fromEvent, map, NEVER, type Observable } from "rxjs";
-import {
-  type IWidgetApiRequest,
-  type IWidgetApiRequestData,
-  WidgetApiToWidgetAction,
-} from "matrix-widget-api";
-
-import {
-  ElementWidgetActions,
-  type JoinCallData,
-  type WidgetHelpers,
-} from "./widget";
-
-// Note: these are type aliases rather than interfaces so that they satisfy the
-// widget API's index-signature payload types.
-
-/** The mute state Element Call and its host exchange. */
-export type DeviceMuteState = {
-  audio_enabled: boolean;
-  video_enabled: boolean;
-};
-
-/**
- * A mute state change requested by the host. An absent field means "leave this
- * one as it is".
- */
-export type DeviceMuteRequest = {
-  audio_enabled?: boolean;
-  video_enabled?: boolean;
-};
-
-/**
- * Something the host has asked of Element Call, which it is expected to
- * acknowledge.
- */
-export interface HostRequest<Data, Reply = void> {
-  data: Data;
-  /** Acknowledges the request. Should be called exactly once. */
-  reply(reply: Reply): void;
-}
-
-/**
- * Element Call's view of the application hosting it.
- *
- * Element Call can run as its own page, as a widget inside a Matrix client, or
- * embedded directly into one. Only the last two give it a host, and each of
- * them reaches it by a different route — so everything Element Call needs from
- * whatever is hosting it goes through this interface, rather than being
- * expressed in terms of the widget API.
- *
- * This covers the interactions Element Call has with its host while running.
- * The Matrix client it talks to is supplied separately, at startup.
- */
-export interface HostBridge {
-  // What Element Call tells the host.
-
-  /**
-   * Asks the host to keep Element Call on screen (or stop doing so), so that a
-   * call in progress is not torn down when the user navigates elsewhere.
-   */
-  setAlwaysOnScreen(alwaysOnScreen: boolean): Promise<void>;
-  /** Tells the host that Element Call has finished loading. */
-  contentLoaded(): Promise<void>;
-  /** Tells the host that the user has joined the call. */
-  notifyJoined(): Promise<void>;
-  /** Tells the host that the user has hung up. */
-  notifyHungUp(): Promise<void>;
-  /** Tells the host the user's current audio and video mute state. */
-  notifyDeviceMute(state: DeviceMuteState): Promise<void>;
-  /**
-   * Asks the host to close Element Call, and stops communicating with it. No
-   * further calls should be made on this bridge afterwards.
-   *
-   * Absent when the host has no way to dismiss Element Call — standalone, the
-   * user navigates away instead — so its presence is what tells the interface
-   * whether to offer a close affordance.
-   */
-  close?(): Promise<void>;
-
-  // What the host asks of Element Call.
-
-  /** The host has changed the theme Element Call should use. */
-  themeChange$: Observable<HostRequest<{ name?: string }>>;
-  /** The host wants a preloaded Element Call to join the call now. */
-  join$: Observable<HostRequest<JoinCallData>>;
-  /** The host wants Element Call to leave the call. */
-  hangUp$: Observable<HostRequest<Record<string, never>>>;
-  /** The host wants to change, or read back, the device mute state. */
-  deviceMute$: Observable<HostRequest<DeviceMuteRequest, DeviceMuteState>>;
-
-  // What the host is capable of.
-
-  /** Whether the host permits Element Call to send and receive reactions. */
-  readonly supportsReactions: boolean;
-  /**
-   * Fetches media on Element Call's behalf, for hosts that do not give it
-   * direct access to the homeserver. Absent when Element Call should fetch
-   * media itself using its own client.
-   */
-  downloadMedia?(mxcUri: string): Promise<Blob>;
-}
-
-/**
- * A bridge to nowhere, for when Element Call has no host — that is, when it is
- * running as its own page and talks to the homeserver directly.
- */
-export const nullHostBridge: HostBridge = {
-  setAlwaysOnScreen: async () => {},
-  contentLoaded: async () => {},
-  notifyJoined: async () => {},
-  notifyHungUp: async () => {},
-  notifyDeviceMute: async () => {},
-  themeChange$: NEVER,
-  join$: NEVER,
-  hangUp$: NEVER,
-  deviceMute$: NEVER,
-  // Standalone Element Call reaches the homeserver itself, so nothing is
-  // withholding these from it.
-  supportsReactions: true,
-};
-
-/** Bridges to a host that Element Call is a widget of. */
-export function createWidgetHostBridge(widget: WidgetHelpers): HostBridge {
-  const requests = <Data, Reply>(
-    action: string,
-  ): Observable<HostRequest<Data, Reply>> =>
-    (
-      fromEvent(widget.lazyActions, action) as Observable<
-        CustomEvent<IWidgetApiRequest>
-      >
-    ).pipe(
-      map((ev) => ({
-        data: ev.detail.data as Data,
-        // The widget API requires a reply for every request, and carries the
-        // payload as a plain object, so an empty reply becomes {}.
-        reply: (reply: Reply): void =>
-          widget.api.transport.reply(ev.detail, reply ?? {}),
-      })),
-    );
-
-  const send = async (
-    action: ElementWidgetActions,
-    data: IWidgetApiRequestData = {},
-  ): Promise<void> => {
-    await widget.api.transport.send(action, data);
-  };
-
-  return {
-    setAlwaysOnScreen: async (alwaysOnScreen) => {
-      await widget.api.setAlwaysOnScreen(alwaysOnScreen);
-    },
-    contentLoaded: async () => widget.api.sendContentLoaded(),
-    notifyJoined: async () => send(ElementWidgetActions.JoinCall),
-    notifyHungUp: async () => send(ElementWidgetActions.HangupCall),
-    notifyDeviceMute: async (state) =>
-      send(ElementWidgetActions.DeviceMute, state),
-    close: async () => {
-      try {
-        await send(ElementWidgetActions.Close);
-      } finally {
-        // Stop regardless of whether the host acknowledged the request. A host
-        // that rejects or never answers would otherwise leave the messaging
-        // live, and the close affordance doing nothing at all.
-        widget.api.transport.stop();
-      }
-    },
-    themeChange$: requests(WidgetApiToWidgetAction.ThemeChange),
-    join$: requests(ElementWidgetActions.JoinCall),
-    hangUp$: requests(ElementWidgetActions.HangupCall),
-    deviceMute$: requests(ElementWidgetActions.DeviceMute),
-    // Element Call needs the host's permission to send reactions on its behalf.
-    // Read on access rather than up front: the widget API negotiates its
-    // capabilities asynchronously, and the bridge is built before that settles.
-    get supportsReactions(): boolean {
-      return (
-        widget.api.hasCapability("org.matrix.msc2762.send.event:m.reaction") &&
-        widget.api.hasCapability(
-          "org.matrix.msc2762.send.event:m.room.redaction",
-        ) &&
-        widget.api.hasCapability(
-          "org.matrix.msc2762.receive.event:m.reaction",
-        ) &&
-        widget.api.hasCapability(
-          "org.matrix.msc2762.receive.event:m.room.redaction",
-        )
-      );
-    },
-    downloadMedia: async (mxcUri) => {
-      const { file } = await widget.api.downloadFile(mxcUri);
-      if (file instanceof Blob) return file;
-      if (typeof file === "string")
-        // it is a base64 string
-        return new Blob([Uint8Array.from(atob(file), (c) => c.charCodeAt(0))]);
-      throw new Error(
-        `Downloaded file format is not supported: ${typeof file}`,
-      );
-    },
-  };
-}
-
-const HostBridgeContext = createContext<HostBridge | null>(null);
-
-export const HostBridgeProvider = HostBridgeContext.Provider;
-
-/**
- * The application hosting Element Call.
- *
- * Defaults to {@link nullHostBridge}, so that tests and stories, which have no
- * host, need no provider.
- */
-export const useHostBridge = (): HostBridge =>
-  use(HostBridgeContext) ?? nullHostBridge;

src/Modal.tsx

@@ -24,7 +24,6 @@ import { Heading, Glass } from "@vector-im/compound-web";
 import styles from "./Modal.module.css";
 import overlayStyles from "./Overlay.module.css";
 import { useMediaQuery } from "./useMediaQuery";
-import { useRootElement } from "./RootElementContext";
 
 export interface Props {
   title: string;
@@ -79,7 +78,6 @@ export const Modal: FC<Props> = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const rootElement = useRootElement();
   // Empirically, Chrome on Android can end up not matching (hover: none), but
   // still matching (pointer: coarse) :/
   const touchscreen = useMediaQuery("(hover: none) or (pointer: coarse)");
@@ -102,7 +100,7 @@ export const Modal: FC<Props> = ({
         onOpenChange={onOpenChange}
         dismissible={onDismiss !== undefined}
       >
-        <Drawer.Portal container={rootElement}>
+        <Drawer.Portal>
           <Drawer.Overlay className={classNames(overlayStyles.bg)} />
           <Drawer.Content
             className={classNames(
@@ -157,7 +155,7 @@ export const Modal: FC<Props> = ({
 
     return (
       <DialogRoot open={open} onOpenChange={onOpenChange}>
-        <DialogPortal container={rootElement}>
+        <DialogPortal>
           <DialogOverlay
             className={classNames(overlayStyles.bg, overlayStyles.animate)}
           />

src/QrCode.tsx

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { type FC, useEffect, useState } from "react";
 import { toDataURL } from "qrcode";
 import classNames from "classnames";
-import { useTranslation } from "react-i18next";
+import { t } from "i18next";
 
 import styles from "./QrCode.module.css";
 
@@ -18,7 +18,6 @@ interface Props {
 }
 
 export const QrCode: FC<Props> = ({ data, className }) => {
-  const { t } = useTranslation();
   const [url, setUrl] = useState<string | null>(null);
 
   useEffect(() => {

src/RichError.tsx

@@ -10,6 +10,7 @@ import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import type { FC, ReactNode } from "react";
 import { ErrorView } from "./ErrorView";
+import { widget } from "./widget.ts";
 
 /**
  * An error consisting of a terse message to be logged to the console and a
@@ -31,7 +32,11 @@ const OpenElsewhere: FC = () => {
   const { t } = useTranslation();
 
   return (
-    <ErrorView Icon={PopOutIcon} title={t("error.open_elsewhere")}>
+    <ErrorView
+      widget={widget}
+      Icon={PopOutIcon}
+      title={t("error.open_elsewhere")}
+    >
       <p>
         {t("error.open_elsewhere_description", {
           brand: import.meta.env.VITE_PRODUCT_NAME || "Element Call",

src/RootElementContext.ts

@@ -1,39 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { createContext, use } from "react";
-
-/**
- * The element that Element Call treats as the root of its own interface.
- *
- * Element Call decorates this element with the theme, layout and background
- * attributes its stylesheets key off, and portals its modals into it. When
- * Element Call owns the page this is simply the document body; the intent is
- * that when embedded in a host application it becomes the container the host
- * mounted it into, so that Element Call does not reach outside its own subtree.
- *
- * That intent is not yet achievable: several selectors still name `body`
- * directly — `body[data-background="gradient"]` and `body[data-platform=…]` in
- * `index.css`, and `body[data-platform="ios"]` in `AppBar.module.css` and
- * `Modal.module.css` — and `Initializer.initBeforeReact` writes
- * `data-platform` straight onto the body. So anything other than the body will
- * be decorated correctly and styled incorrectly, silently. Until those are
- * scoped, treat this as preparation rather than a working seam.
- */
-// No provider is exported yet: nothing supplies a root element, so every
-// consumer falls back to the document body. M1 adds one along with the
-// component that mounts Element Call into a container.
-const RootElementContext = createContext<HTMLElement | null>(null);
-
-/**
- * The element Element Call should decorate and portal into.
- *
- * Defaults to the document body, so that the standalone and widget builds work
- * without a provider.
- */
-export const useRootElement = (): HTMLElement =>
-  use(RootElementContext) ?? document.body;

src/Slider.tsx

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

src/Toast.tsx

@@ -25,7 +25,6 @@ import { Text } from "@vector-im/compound-web";
 
 import styles from "./Toast.module.css";
 import overlayStyles from "./Overlay.module.css";
-import { useRootElement } from "./RootElementContext";
 
 interface Props {
   /**
@@ -65,7 +64,6 @@ export const Toast: FC<Props> = ({
   Icon,
   modal = true,
 }) => {
-  const rootElement = useRootElement();
   const onOpenChange = useCallback(
     (open: boolean) => {
       if (!open) onDismiss();
@@ -106,11 +104,7 @@ export const Toast: FC<Props> = ({
 
   return (
     <DialogRoot open={open} onOpenChange={onOpenChange} modal={modal}>
-      {modal ? (
-        <DialogPortal container={rootElement}>{content}</DialogPortal>
-      ) : (
-        content
-      )}
+      {modal ? <DialogPortal>{content}</DialogPortal> : content}
     </DialogRoot>
   );
 };

src/UrlParams.test.ts

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

src/UrlParams.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { createContext, use, useMemo } from "react";
+import { useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
 import {
@@ -19,7 +19,6 @@ import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
 import { platform } from "./Platform";
-import { redact } from "./utils/redact";
 
 interface RoomIdentifier {
   roomAlias: string | null;
@@ -45,11 +44,6 @@ export enum HeaderStyle {
   AppBar = "app_bar",
 }
 
-export enum BackgroundStyle {
-  Solid = "solid",
-  Gradient = "gradient",
-}
-
 /**
  * The UrlProperties are used to pass required data to the widget.
  * Those are different in different rooms, users, devices. They do not configure the behavior of the
@@ -59,17 +53,6 @@ export interface UrlProperties {
   // Widget api related params
   widgetId: string | null;
   parentUrl: string | null;
-  /**
-   * Whether Element Call was started as a widget of a Matrix client, which is
-   * to say whether it was given a widget ID and a parent to talk to.
-   *
-   * Only meaningful to the standalone and widget builds, which own the URL —
-   * so use it for decisions that belong to the app shell, such as whether
-   * Element Call is responsible for authenticating the user. Anything the call
-   * interface itself needs to know about its host should come from the host
-   * bridge instead.
-   */
-  isWidget: boolean;
   /**
    * Anything about what room we're pointed to should be from useRoomIdentifier which
    * parses the path and resolves alias with respect to the default server name, however
@@ -161,10 +144,6 @@ export interface UrlProperties {
    * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
    */
   theme: string | null;
-  /**
-   * The visual style of the page background.
-   */
-  background: BackgroundStyle;
 }
 
 /**
@@ -459,7 +438,6 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
   const properties: UrlProperties = {
     widgetId,
     parentUrl,
-    isWidget,
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
     // what would we do if it were invalid? If the widget API says that's what
     // the room ID is, then that's what it is.
@@ -473,9 +451,6 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     fonts: parser.getAllParams("font"),
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
     theme: parser.getParam("theme"),
-    background:
-      parser.getEnumParam("background", BackgroundStyle) ??
-      BackgroundStyle.Gradient,
     viaServers: !isWidget ? parser.getParam("viaServers") : null,
     homeserver: !isWidget ? parser.getParam("homeserver") : null,
     posthogApiHost: parser.getParam("posthogApiHost"),
@@ -519,7 +494,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     "intent:",
     intent,
     "\nproperties:",
-    redact(properties, "password"),
+    properties,
     "configuration:",
     configuration,
   );
@@ -531,36 +506,11 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
   };
 };
 
-const UrlParamsContext = createContext<UrlParams | null>(null);
-
 /**
- * Supplies the parameters Element Call should run with.
- *
- * The standalone and widget builds derive these from the URL, but an embedder
- * has no URL of its own to put them in, so it provides them directly instead.
- *
- * TODO: `UrlParams` is no longer an accurate name now that these need not come
- * from a URL. Renaming it touches every consumer, so it is left until the rest
- * of the de-globalisation work has settled.
+ * Hook to simplify use of getUrlParams.
+ * @returns The app parameters for the current URL
  */
-export const UrlParamsProvider = UrlParamsContext.Provider;
-
-/**
- * The parameters Element Call is running with.
- *
- * Falls back to parsing `window.location` when no provider is present, so that
- * tests and stories keep working without one.
- */
-export const useUrlParams = (): UrlParams =>
-  use(UrlParamsContext) ?? getUrlParams();
-
-/**
- * Derives {@link UrlParams} from the current router location.
- *
- * Only meaningful when Element Call owns the URL; embedders provide the params
- * directly through {@link UrlParamsProvider}.
- */
-export const useUrlParamsFromLocation = (): UrlParams => {
+export const useUrlParams = (): UrlParams => {
   const { search, hash } = useLocation();
   return useMemo(() => getUrlParams(search, hash), [search, hash]);
 };

src/__snapshots__/AppBar.test.tsx.snap

@@ -3,90 +3,44 @@
 exports[`AppBar > renders 1`] = `
 <div>
   <div
-    class="_bar_221541"
+    class="bar"
+    style="display: block;"
   >
-    <header>
-      <button
-        aria-labelledby="_r_0_"
-        class="_icon-button_1215g_8 _primaryButton_221541"
-        data-kind="primary"
-        role="button"
-        style="--cpd-icon-button-size: 24px;"
-        tabindex="0"
-      >
-        <div
-          class="_indicator-icon_147l5_17"
-          style="--cpd-icon-button-size: 100%;"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
-            />
-          </svg>
-        </div>
-      </button>
+    <header
+      class="header"
+    >
       <div
-        class="_secondaryButton_221541"
-      />
-    </header>
-  </div>
-  <p>
-    This is the content.
-  </p>
-</div>
-`;
-
-exports[`AppBar > renders with title and subtitle 1`] = `
-<div>
-  <div
-    class="_bar_221541"
-  >
-    <header>
-      <button
-        aria-labelledby="_r_6_"
-        class="_icon-button_1215g_8 _primaryButton_221541"
-        data-kind="primary"
-        role="button"
-        style="--cpd-icon-button-size: 24px;"
-        tabindex="0"
+        class="nav leftNav"
       >
-        <div
-          class="_indicator-icon_147l5_17"
-          style="--cpd-icon-button-size: 100%;"
+        <button
+          aria-labelledby="_r_0_"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          role="button"
+          style="--cpd-icon-button-size: 24px;"
+          tabindex="0"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
           >
-            <path
-              d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
-            />
-          </svg>
-        </div>
-      </button>
-      <h1
-        class="_typography_6v6n8_153 _font-body-lg-medium_6v6n8_79 _title_221541"
-      >
-        Title
-      </h1>
-      <span
-        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69 _subtitle_221541"
-      >
-        Subtitle
-      </span>
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
       <div
-        class="_secondaryButton_221541"
+        class="nav rightNav"
       />
     </header>
   </div>

src/__snapshots__/Modal.test.tsx.snap

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

src/__snapshots__/QrCode.test.tsx.snap

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

src/__snapshots__/Toast.test.tsx.snap

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

src/analytics/PosthogAnalytics.test.ts

@@ -15,7 +15,6 @@ import {
   afterAll,
 } from "vitest";
 import posthog, { type CaptureResult } from "posthog-js";
-import { type MatrixClient } from "matrix-js-sdk";
 
 import {
   Anonymity,
@@ -23,122 +22,75 @@ import {
   PosthogAnalytics,
 } from "./PosthogAnalytics";
 import { mockConfig } from "../utils/test";
-import { analyticsConfigFromEnvironment } from "../initializer";
-import { optInAnalytics } from "../settings/settings";
 
 describe("PosthogAnalytics", () => {
-  describe("enablement", () => {
-    beforeEach(() => {
-      PosthogAnalytics.resetInstance();
+  describe("embedded package", () => {
+    beforeAll(() => {
+      vi.stubEnv("VITE_PACKAGE", "embedded");
     });
 
-    it("stays off until it is configured", () => {
-      expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
-    });
-
-    it("stays off when configured without credentials", () => {
-      PosthogAnalytics.configure({ matrixBackend: "jssdk" });
-      expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
-    });
-
-    it("stays off when given only a key", () => {
-      PosthogAnalytics.configure({
-        matrixBackend: "jssdk",
-        apiKey: "api_key",
-      });
-      expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
-    });
-
-    it("turns on when given both a key and a host", () => {
-      PosthogAnalytics.configure({
-        matrixBackend: "jssdk",
-        apiKey: "api_key",
-        apiHost: "https://api.example.com.localhost",
-      });
-      expect(PosthogAnalytics.instance.isEnabled()).toBe(true);
-    });
-  });
-
-  // Which of the URL and config.json the credentials come from is a deliberate
-  // policy: an embedder is responsible for its own users' telemetry, so it must
-  // not pick up the deployment's, and vice versa.
-  describe("analyticsConfigFromEnvironment", () => {
     beforeEach(() => {
       mockConfig({});
       window.location.hash = "#";
+      PosthogAnalytics.resetInstance();
     });
 
     afterAll(() => {
       vi.unstubAllEnvs();
     });
 
-    const urlCredentials = `posthogApiHost=${encodeURIComponent("https://url.example.com.localhost")}&posthogApiKey=url_key`;
-    const configCredentials = {
-      posthog: {
-        api_host: "https://config.example.com.localhost",
-        api_key: "config_key",
-      },
-    };
-
-    describe("embedded package", () => {
-      beforeAll(() => {
-        vi.stubEnv("VITE_PACKAGE", "embedded");
-      });
-
-      it("has no credentials without URL params", () => {
-        expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined();
-      });
-
-      it("takes the credentials from the URL", () => {
-        window.location.hash = `#?${urlCredentials}`;
-        expect(analyticsConfigFromEnvironment()).toMatchObject({
-          apiKey: "url_key",
-          apiHost: "https://url.example.com.localhost",
-        });
-      });
-
-      it("ignores the deployment's config", () => {
-        mockConfig(configCredentials);
-        expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined();
-      });
+    it("does not create instance without config value or URL params", () => {
+      expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
     });
 
-    describe("full package", () => {
-      beforeAll(() => {
-        vi.stubEnv("VITE_PACKAGE", "full");
-      });
-
-      it("has no credentials without config", () => {
-        expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined();
-      });
-
-      it("takes the credentials from the config", () => {
-        mockConfig(configCredentials);
-        expect(analyticsConfigFromEnvironment()).toMatchObject({
-          apiKey: "config_key",
-          apiHost: "https://config.example.com.localhost",
-        });
-      });
-
-      it("ignores the URL params", () => {
-        window.location.hash = `#?${urlCredentials}`;
-        expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined();
+    it("ignores config value and does not create instance", () => {
+      mockConfig({
+        posthog: {
+          api_host: "https://api.example.com.localhost",
+          api_key: "api_key",
+        },
       });
+      expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
     });
 
-    // Who owns the user's analytics identity depends on how Element Call is
-    // running, not on which package it was built as.
-    it("reports the embedded backend when running as a widget", () => {
+    it("uses URL params if both set", () => {
+      window.location.hash = `#?posthogApiHost=${encodeURIComponent("https://url.example.com.localhost")}&posthogApiKey=api_key`;
+      expect(PosthogAnalytics.instance.isEnabled()).toBe(true);
+    });
+  });
+
+  describe("full package", () => {
+    beforeAll(() => {
       vi.stubEnv("VITE_PACKAGE", "full");
-      window.location.hash = `#?widgetId=id&parentUrl=${encodeURIComponent("https://host.example.com.localhost")}&posthogUserId=given_id`;
-      expect(analyticsConfigFromEnvironment()).toMatchObject({
-        matrixBackend: "embedded",
-        hostAnalyticsId: "given_id",
-      });
     });
 
-    it("reports the jssdk backend when running standalone", () => {
-      expect(analyticsConfigFromEnvironment().matrixBackend).toBe("jssdk");
+    beforeEach(() => {
+      mockConfig({});
+      window.location.hash = "#";
+      PosthogAnalytics.resetInstance();
+    });
+
+    afterAll(() => {
+      vi.unstubAllEnvs();
+    });
+
+    it("does not create instance without config value", () => {
+      expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
+    });
+
+    it("ignores URL params and does not create instance", () => {
+      window.location.hash = `#?posthogApiHost=${encodeURIComponent("https://url.example.com.localhost")}&posthogApiKey=api_key`;
+      expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
+    });
+
+    it("creates instance with config value", () => {
+      mockConfig({
+        posthog: {
+          api_host: "https://api.example.com.localhost",
+          api_key: "api_key",
+        },
+      });
+      expect(PosthogAnalytics.instance.isEnabled()).toBe(true);
     });
   });
 
@@ -252,13 +204,22 @@ describe("PosthogAnalytics", () => {
   // 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(() => {
-      PosthogAnalytics.resetInstance();
-      PosthogAnalytics.configure({
-        matrixBackend: "jssdk",
-        apiKey: "api_key",
-        apiHost: "https://api.example.com.localhost",
+      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", () => {
@@ -283,86 +244,3 @@ describe("PosthogAnalytics", () => {
     });
   });
 });
-
-describe("identifying the user", () => {
-  const credentials = {
-    apiKey: "api_key",
-    apiHost: "https://api.example.com.localhost",
-  };
-
-  function mockClient(accountDataId: string | null): MatrixClient {
-    return {
-      isGuest: () => false,
-      getCrypto: () => undefined,
-      getAccountDataFromServer: vi
-        .fn()
-        .mockResolvedValue(
-          accountDataId === null ? null : { id: accountDataId },
-        ),
-      setAccountData: vi.fn().mockResolvedValue({}),
-    } as Partial<MatrixClient> as MatrixClient;
-  }
-
-  beforeEach(() => {
-    PosthogAnalytics.resetInstance();
-    optInAnalytics.setValue(true);
-  });
-
-  it("reports under the ID its host assigned, and stores nothing", async () => {
-    const client = mockClient(null);
-    window.matrixclient = client;
-    PosthogAnalytics.configure({
-      ...credentials,
-      matrixBackend: "embedded",
-      hostAnalyticsId: "assigned-by-host",
-    });
-    const identify = vi.spyOn(posthog, "identify");
-
-    PosthogAnalytics.instance.startListeningToSettingsChanges();
-    await vi.waitFor(() =>
-      expect(identify).toHaveBeenCalledWith("assigned-by-host"),
-    );
-
-    // The host owns the user's account, so Element Call must not write to it
-    expect(client.setAccountData).not.toHaveBeenCalled();
-  });
-
-  it("keeps its own ID in account data when it owns the session", async () => {
-    const client = mockClient(null);
-    window.matrixclient = client;
-    PosthogAnalytics.configure({ ...credentials, matrixBackend: "jssdk" });
-
-    PosthogAnalytics.instance.startListeningToSettingsChanges();
-
-    // No ID on the server yet, so one is minted and stored for other devices
-    await vi.waitFor(() => expect(client.setAccountData).toHaveBeenCalled());
-  });
-
-  it("reuses the ID already in account data", async () => {
-    const client = mockClient("stored-earlier");
-    window.matrixclient = client;
-    PosthogAnalytics.configure({ ...credentials, matrixBackend: "jssdk" });
-    const identify = vi.spyOn(posthog, "identify");
-
-    PosthogAnalytics.instance.startListeningToSettingsChanges();
-    await vi.waitFor(() =>
-      expect(identify).toHaveBeenCalledWith("stored-earlier"),
-    );
-
-    expect(client.setAccountData).not.toHaveBeenCalled();
-  });
-
-  it("records how it reaches Matrix as a super property", async () => {
-    window.matrixclient = mockClient("stored-earlier");
-    PosthogAnalytics.configure({ ...credentials, matrixBackend: "embedded" });
-    const register = vi.spyOn(posthog, "register");
-
-    PosthogAnalytics.instance.startListeningToSettingsChanges();
-
-    await vi.waitFor(() =>
-      expect(register).toHaveBeenCalledWith(
-        expect.objectContaining({ matrixBackend: "embedded" }),
-      ),
-    );
-  });
-});

src/analytics/PosthogAnalytics.ts

@@ -15,6 +15,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { type MatrixClient } from "matrix-js-sdk";
 import { type Subscription } from "rxjs";
 
+import { widget } from "../widget";
 import {
   CallEndedTracker,
   CallStartedTracker,
@@ -28,6 +29,8 @@ import {
   CallConnectDurationTracker,
   CallReconnectingTracker,
 } from "./PosthogEvents";
+import { Config } from "../config/Config";
+import { getUrlParams } from "../UrlParams";
 import { optInAnalytics } from "../settings/settings";
 
 /* Posthog analytics tracking.
@@ -137,27 +140,6 @@ interface PlatformProperties {
   cryptoVersion?: string;
 }
 
-/**
- * How analytics reporting should be set up, supplied by whoever is starting
- * Element Call rather than discovered from the page it happens to be on.
- */
-export interface AnalyticsConfig {
-  /** The PostHog project key. Without one, analytics stay switched off. */
-  apiKey?: string;
-  apiHost?: string;
-  /**
-   * How Element Call reaches Matrix. When `embedded`, the host owns the user's
-   * identity: it supplies the analytics ID, and Element Call must not store one
-   * in the user's account data.
-   */
-  matrixBackend: "embedded" | "jssdk";
-  /** The analytics ID the host has assigned to this user, when embedded. */
-  hostAnalyticsId?: string | null;
-}
-
-/** Analytics are off until someone asks for them. */
-const analyticsDisabled: AnalyticsConfig = { matrixBackend: "jssdk" };
-
 export class PosthogAnalytics {
   /* Wrapper for Posthog analytics.
    * 3 modes of anonymity are supported, governed by this.anonymity
@@ -185,32 +167,13 @@ export class PosthogAnalytics {
   private registrationType: RegistrationType = RegistrationType.Guest;
   private optInListener: Subscription | null = null;
 
-  private static analyticsConfig: AnalyticsConfig = analyticsDisabled;
-
-  /**
-   * Sets up analytics reporting. Must be called before the instance is first
-   * used; without it, analytics stay switched off.
-   */
-  public static configure(config: AnalyticsConfig): void {
-    if (this.internalInstance)
-      // Configuration is read once, when the instance is built, so arriving
-      // late means analytics are already running unconfigured.
-      logger.warn(
-        "Analytics were configured after they had already been started; the new configuration will not take effect",
-      );
-    this.analyticsConfig = config;
-  }
-
   public static hasInstance(): boolean {
     return Boolean(this.internalInstance);
   }
 
   public static get instance(): PosthogAnalytics {
     if (!this.internalInstance) {
-      this.internalInstance = new PosthogAnalytics(
-        posthog,
-        PosthogAnalytics.analyticsConfig,
-      );
+      this.internalInstance = new PosthogAnalytics(posthog);
     }
     return this.internalInstance;
   }
@@ -218,14 +181,20 @@ export class PosthogAnalytics {
   public static resetInstance(): void {
     // Reset the singleton instance
     this.internalInstance = null;
-    this.analyticsConfig = analyticsDisabled;
   }
 
-  private constructor(
-    private readonly posthog: PostHog,
-    private readonly config: AnalyticsConfig,
-  ) {
-    const { apiKey, apiHost } = config;
+  private constructor(private readonly posthog: PostHog) {
+    let apiKey: string | undefined;
+    let apiHost: string | undefined;
+    if (import.meta.env.VITE_PACKAGE === "embedded") {
+      // for the embedded package we always use the values from the URL as the widget host is responsible for analytics configuration
+      apiKey = getUrlParams().posthogApiKey ?? undefined;
+      apiHost = getUrlParams().posthogApiHost ?? undefined;
+    } else if (import.meta.env.VITE_PACKAGE === "full") {
+      // in full package it is the server responsible for the analytics
+      apiKey = Config.get().posthog?.api_key;
+      apiHost = Config.get().posthog?.api_host;
+    }
 
     if (apiKey && apiHost) {
       const beforeSend = (event: CaptureResult | null): CaptureResult | null =>
@@ -256,15 +225,15 @@ export class PosthogAnalytics {
     }
   }
 
-  private getPlatformProperties(): PlatformProperties {
+  private static getPlatformProperties(): PlatformProperties {
     const appVersion = import.meta.env.VITE_APP_VERSION || "dev";
     return {
       appVersion,
-      matrixBackend: this.config.matrixBackend,
+      matrixBackend: widget ? "embedded" : "jssdk",
       callBackend: "livekit",
-      // Undefined when Element Call has no crypto of its own, which is the case
-      // whenever a host is doing the encrypting for it.
-      cryptoVersion: window.matrixclient?.getCrypto()?.getVersion(),
+      cryptoVersion: widget
+        ? undefined
+        : window.matrixclient?.getCrypto()?.getVersion(),
     };
   }
 
@@ -314,8 +283,8 @@ export class PosthogAnalytics {
       // different devices to send the same ID.
       let analyticsID = await this.getAnalyticsId();
       try {
-        if (!analyticsID && this.config.matrixBackend !== "embedded") {
-          // only mint an analytics ID when we are the ones storing it.
+        if (!analyticsID && !widget) {
+          // only try setting up a new analytics ID in the standalone app.
 
           // Couldn't retrieve an analytics ID from user settings, so create one and set it on the server.
           // Note there's a race condition here - if two devices do these steps at the same time, last write
@@ -344,8 +313,8 @@ export class PosthogAnalytics {
 
   private async getAnalyticsId(): Promise<string | null> {
     const client: MatrixClient = window.matrixclient;
-    if (this.config.matrixBackend === "embedded") {
-      return this.config.hostAnalyticsId ?? null;
+    if (widget) {
+      return getUrlParams().posthogUserId;
     } else {
       const accountData = await client.getAccountDataFromServer(
         PosthogAnalytics.ANALYTICS_EVENT_TYPE,
@@ -355,7 +324,7 @@ export class PosthogAnalytics {
   }
 
   private async setAccountAnalyticsId(analyticsID: string): Promise<void> {
-    if (this.config.matrixBackend !== "embedded") {
+    if (!widget) {
       const client = window.matrixclient;
 
       // the analytics ID only needs to be set in the standalone version.
@@ -393,7 +362,7 @@ export class PosthogAnalytics {
     // These properties will be subsequently passed in every event.
     //
     // This only needs to be done once per page lifetime. Note that getPlatformProperties
-    this.platformSuperProperties = this.getPlatformProperties();
+    this.platformSuperProperties = PosthogAnalytics.getPlatformProperties();
     this.registerSuperProperties({
       ...this.platformSuperProperties,
       registrationType:

src/auth/useInteractiveRegistration.ts

@@ -17,7 +17,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { initClient } from "../utils/matrix";
 import { type Session } from "../ClientContext";
 import { Config } from "../config/Config";
-import { useUrlParams } from "../UrlParams";
+import { widget } from "../widget";
 
 export const useInteractiveRegistration = (
   oldClient?: MatrixClient,
@@ -32,7 +32,6 @@ export const useInteractiveRegistration = (
     passwordlessUser: boolean,
   ) => Promise<[MatrixClient, Session]>;
 } => {
-  const { isWidget } = useUrlParams();
   const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState<string | undefined>(
     undefined,
   );
@@ -48,7 +47,7 @@ export const useInteractiveRegistration = (
   }
 
   useEffect(() => {
-    if (isWidget) return;
+    if (widget) return;
     // An empty registerRequest is used to get the privacy policy and recaptcha key.
     authClient.current!.registerRequest({}).catch((error) => {
       setPrivacyPolicyUrl(
@@ -56,7 +55,7 @@ export const useInteractiveRegistration = (
       );
       setRecaptchaKey(error.data?.params["m.login.recaptcha"]?.public_key);
     });
-  }, [isWidget]);
+  }, []);
 
   const register = useCallback(
     async (

src/auth/useRegisterPasswordlessUser.ts

@@ -12,7 +12,7 @@ import { useClient } from "../ClientContext";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { generateRandomName } from "../auth/generateRandomName";
 import { useRecaptcha } from "../auth/useRecaptcha";
-import { useUrlParams } from "../UrlParams";
+import { widget } from "../widget";
 
 interface UseRegisterPasswordlessUserType {
   privacyPolicyUrl?: string;
@@ -22,7 +22,6 @@ interface UseRegisterPasswordlessUserType {
 
 export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
   const { setClient } = useClient();
-  const { isWidget } = useUrlParams();
   const { privacyPolicyUrl, recaptchaKey, register } =
     useInteractiveRegistration();
   const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
@@ -32,7 +31,7 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
       if (!setClient) {
         throw new Error("No client context");
       }
-      if (isWidget) {
+      if (widget) {
         throw new Error(
           "Registration was skipped: We should never try to register password-less user in embedded mode.",
         );
@@ -54,7 +53,7 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
         throw e;
       }
     },
-    [execute, reset, register, setClient, isWidget],
+    [execute, reset, register, setClient],
   );
 
   return { privacyPolicyUrl, registerPasswordlessUser, recaptchaId };

src/button/Button.module.css

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

src/button/Button.tsx

@@ -135,12 +135,21 @@ interface EndCallButtonProps extends ComponentPropsWithoutRef<"button"> {
   size?: "md" | "lg";
 }
 
-export const EndCallButton: FC<EndCallButtonProps> = (props) => {
+export const EndCallButton: FC<EndCallButtonProps> = ({
+  className,
+  ...props
+}) => {
   const { t } = useTranslation();
 
   return (
     <Tooltip label={t("hangup_button_label")}>
-      <CpdButton iconOnly Icon={EndCallIcon} destructive {...props} />
+      <CpdButton
+        className={classNames(className, styles.endCall)}
+        iconOnly
+        Icon={EndCallIcon}
+        destructive
+        {...props}
+      />
     </Tooltip>
   );
 };
@@ -164,7 +173,7 @@ export const LoudspeakerButton: FC<LoudspeakerButtonProps> = ({
         iconOnly
         Icon={loudspeakerModeEnabled ? VolumeOnSolidIcon : VolumeOffSolidIcon}
         {...props}
-        kind={loudspeakerModeEnabled ? "secondary" : "primary"}
+        kind={loudspeakerModeEnabled ? "primary" : "secondary"}
         aria-checked={loudspeakerModeEnabled}
       />
     </Tooltip>

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

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

src/components/CallFooter.module.css

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

src/components/CallFooter.stories.tsx

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

src/components/CallFooter.tsx

@@ -7,6 +7,12 @@ Please see LICENSE in the repository root for full details.
 
 import { type FC, type JSX, type Ref, useMemo } from "react";
 import classNames from "classnames";
+import {
+  SpotlightIcon,
+  GridIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Switch } from "@vector-im/compound-web";
+import { t } from "i18next";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -22,15 +28,13 @@ import {
   type ReactionData,
 } from "../button";
 import styles from "./CallFooter.module.css";
+import { type GridMode } from "../state/CallViewModel/CallViewModel";
 import {
   MediaMuteAndSwitchButton,
   type MenuOptions,
 } from "./MediaMuteAndSwitchButton";
-import { type Behavior } from "../state/Behavior";
 import { type ViewModel } from "../state/ViewModel";
 import { useBehavior } from "../useBehavior";
-import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
-import { LayoutSwitch } from "../room/LayoutSwitch";
 
 export interface AudioOutputSwitcher {
   targetOutput: string;
@@ -57,6 +61,8 @@ export interface FooterActions {
   /** Also controls if the videoMute button is disabled */
   toggleVideo: (() => void) | undefined;
   toggleBlur: (() => void) | undefined;
+  /** Also controls if the layout button is visible */
+  setLayoutMode: ((mode: GridMode) => void) | undefined;
   toggleScreenSharing: (() => void) | undefined;
   /** Also controls if the settings button is visible */
   openSettings: (() => void) | undefined;
@@ -77,13 +83,11 @@ export interface FooterState {
   /** The footer should be used as an overlay.
    * (Over the Call Grid) This saves spaces on small screens. */
   asOverlay: boolean;
-  showModals: boolean;
 
   buttonSize: "md" | "lg";
   showLogo: boolean;
 
-  /** Also controls if the layout switch is visible */
-  layoutSwitchVm: LayoutSwitchViewModel | null;
+  layoutMode: GridMode | undefined;
 
   sharingScreen: boolean;
 
@@ -108,22 +112,16 @@ export interface FooterState {
 }
 
 export interface FooterProps {
-  className?: string;
   ref?: Ref<HTMLDivElement>;
   children?: JSX.Element | JSX.Element[] | false;
   vm: ViewModel<FooterSnapshot>;
 }
-export const CallFooter: FC<FooterProps> = ({
-  className,
-  ref,
-  children,
-  vm,
-}) => {
+export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
   const asOverlay = useBehavior(vm.asOverlay$);
   const showFooter = useBehavior(vm.showFooter$);
   const hideControls = useBehavior(vm.hideControls$);
-  const showModals = useBehavior(vm.showModals$);
-  const layoutSwitchVm = useBehavior(vm.layoutSwitchVm$);
+  const layoutMode = useBehavior(vm.layoutMode$);
+  const setLayoutMode = useBehavior(vm.setLayoutMode$);
   const openSettings = useBehavior(vm.openSettings$);
   const audioEnabled = useBehavior(vm.audioEnabled$);
   const audioBusy = useBehavior(vm.audioBusy$);
@@ -138,6 +136,7 @@ export const CallFooter: FC<FooterProps> = ({
   const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
   const hangup = useBehavior(vm.hangup$);
   const debugTileLayout = useBehavior(vm.debugTileLayout$);
+  const tileStoreGeneration = useBehavior(vm.tileStoreGeneration$);
   const videoOptions = useBehavior(vm.videoOptions$);
   const selectedVideo = useBehavior(vm.selectedVideo$);
   const audioOptions = useBehavior(vm.audioOptions$);
@@ -237,8 +236,7 @@ export const CallFooter: FC<FooterProps> = ({
     );
   }
 
-  // Reaction button contains a pretty large menu, so treat it like a modal
-  if (reactionIdentifier && reactionData && showModals) {
+  if (reactionIdentifier && reactionData) {
     buttons.push(
       <ReactionToggleButton
         size={buttonSize}
@@ -286,9 +284,7 @@ export const CallFooter: FC<FooterProps> = ({
           />
         </>
       )}
-      {debugTileLayout ? (
-        <TilesDebugInfo generation$={vm.tileStoreGeneration$} />
-      ) : undefined}
+      {debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
     </div>
   );
 
@@ -296,7 +292,7 @@ export const CallFooter: FC<FooterProps> = ({
     <div
       ref={ref}
       data-testid="footer-container"
-      className={classNames(className, styles.footer, {
+      className={classNames(styles.footer, {
         [styles.overlay]: asOverlay,
         [styles.hidden]: !showFooter,
       })}
@@ -315,20 +311,21 @@ export const CallFooter: FC<FooterProps> = ({
         {(showLogo || debugTileLayout) && logoDebugContainer}
       </div>
       {!hideControls && <div className={styles.buttons}>{buttons}</div>}
-      {!hideControls && layoutSwitchVm && (
-        <LayoutSwitch vm={layoutSwitchVm} className={styles.layout} />
+      {!hideControls && setLayoutMode && layoutMode && (
+        <Switch<"spotlight", "grid">
+          name="layoutMode"
+          aria-label={t("layout_switch_label")}
+          leftLabel={t("layout_spotlight_label")}
+          leftValue="spotlight"
+          leftIcon={SpotlightIcon}
+          rightLabel={t("layout_grid_label")}
+          rightValue="grid"
+          rightIcon={GridIcon}
+          className={styles.layout}
+          value={layoutMode}
+          onChange={setLayoutMode}
+        />
       )}
     </div>
   );
 };
-
-interface TilesDebugInfoProps {
-  generation$: Behavior<number | undefined>;
-}
-
-// Isolated in its own component since the layout generation updates frequently
-// and we can avoid re-rendering the footer this way
-const TilesDebugInfo: FC<TilesDebugInfoProps> = ({ generation$ }) => {
-  const generation = useBehavior(generation$);
-  return `Tiles generation: ${generation}`;
-};

src/components/CallFooterViewModel.test.ts

@@ -15,7 +15,6 @@ import type { Alignment, Layout } from "../state/layout-types";
 import type { SpotlightTileViewModel } from "../state/TileViewModel";
 import type { DeviceLabel } from "../state/MediaDevices";
 import { createCallFooterViewModel } from "./CallFooterViewModel";
-import { HeaderStyle } from "../UrlParams";
 
 const platformMock = vi.hoisted(() => vi.fn(() => "desktop"));
 vi.mock("../Platform", () => ({
@@ -50,7 +49,6 @@ function buildMinimalCallViewModel(layout: Layout): CallViewModel {
     reactions$: constant({}),
     tileStoreGeneration$: constant(0),
     showFooter$: constant(true),
-    showModals$: constant(true),
     settingsOpen$: constant(false),
     setSettingsOpen$: constant(() => {}),
   } as unknown as CallViewModel;
@@ -106,7 +104,6 @@ describe("createCallFooterViewModel", () => {
         mockMuteStates(),
         twoMicsAndOneCamMediaDevices,
         /* reactionIdentifier */ undefined,
-        { showControls: true, header: HeaderStyle.Standard },
       );
 
       expect(vm.audioOptions$.value).toEqual([]);
@@ -128,7 +125,6 @@ describe("createCallFooterViewModel", () => {
         mockMuteStates(),
         twoMicsAndOneCamMediaDevices,
         /* reactionIdentifier */ undefined,
-        { showControls: true, header: HeaderStyle.Standard },
       );
 
       expect(vm.audioOptions$?.value).toEqual([

src/components/CallFooterViewModel.tsx

@@ -19,7 +19,7 @@ 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 { HeaderStyle } from "../UrlParams";
+import { getUrlParams, HeaderStyle } from "../UrlParams";
 import { platform } from "../Platform";
 import { type FooterSnapshot } from "./CallFooter";
 
@@ -138,8 +138,6 @@ function buildDeviceBehaviors(
  * @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).
- * @param options - `showControls`: whether the call controls should be shown.
- *   `header`: the style of header, which decides whether to show the logo.
  */
 export function createCallFooterViewModel(
   scope: ObservableScope,
@@ -147,9 +145,8 @@ export function createCallFooterViewModel(
   muteStates: MuteStates,
   mediaDevices: MediaDevices,
   reactionIdentifier: string | undefined,
-  options: { showControls: boolean; header: HeaderStyle },
 ): ViewModel<FooterSnapshot> {
-  const { showControls, header: headerStyle } = options;
+  const { showControls, header: headerStyle } = getUrlParams();
   const showLogo = headerStyle === HeaderStyle.Standard;
 
   const isPip$ = scope.behavior(
@@ -164,7 +161,6 @@ export function createCallFooterViewModel(
     // candidat to move into the FooterViewModel
     showFooter$: callModel.showFooter$,
     hideControls$: constant(!showControls),
-    showModals$: callModel.showModals$,
     asOverlay$: callModel.edgeToEdge$,
     buttonSize$: scope.behavior(
       isPip$.pipe(map<boolean, "md" | "lg">((pip) => (pip ? "md" : "lg"))),
@@ -172,12 +168,14 @@ export function createCallFooterViewModel(
 
     openSettings$: scope.behavior(
       combineLatest([
-        callModel.showModals$,
+        isPip$,
         callModel.showHeader$,
         callModel.setSettingsOpen$,
       ]).pipe(
-        map(([showModals, showHeader, setSettingsOpen]) =>
-          showModals && headerStyle !== HeaderStyle.AppBar && showControls
+        map(([isPip, showHeader, setSettingsOpen]) =>
+          !isPip &&
+          !(headerStyle === HeaderStyle.AppBar && showHeader) &&
+          showControls
             ? (): void => setSettingsOpen(true)
             : undefined,
         ),
@@ -186,7 +184,14 @@ export function createCallFooterViewModel(
 
     showLogo$: scope.behavior(isPip$.pipe(map((isPip) => showLogo && !isPip))),
 
-    layoutSwitchVm$: callModel.layoutSwitchVm$,
+    layoutMode$: callModel.gridMode$,
+    setLayoutMode$: scope.behavior(
+      isPip$.pipe(
+        map((isPip) =>
+          !isPip && showControls ? callModel.setGridMode : undefined,
+        ),
+      ),
+    ),
 
     sharingScreen$: callModel.sharingScreen$,
     toggleScreenSharing$: constant(callModel.toggleScreenSharing ?? undefined),
@@ -243,20 +248,21 @@ export function createLobbyFooterViewModel(
       showLogo,
       hideControls: false,
       asOverlay: false,
-      showModals: true,
       buttonSize: "lg",
+      showLayoutSwitcher: false,
       openSettings,
       hangup,
       debugTileLayout: false,
       showFooter: true,
       toggleAudio: undefined,
       toggleVideo: undefined,
+      setLayoutMode: undefined,
       toggleScreenSharing: undefined,
       audioEnabled: undefined,
       audioBusy: false,
       videoEnabled: undefined,
       videoBusy: false,
-      layoutSwitchVm: null,
+      layoutMode: undefined,
       sharingScreen: false,
       audioOutputSwitcher: undefined,
       reactionIdentifier: undefined,

src/components/MediaMuteAndSwitchButton.stories.tsx

@@ -14,9 +14,7 @@ import { MediaDevicesContext } from "../MediaDevicesContext";
 import { MediaDevices } from "../state/MediaDevices";
 import { globalScope } from "../state/ObservableScope";
 
-const mediaDevices = new MediaDevices(globalScope, {
-  controlledAudioDevices: false,
-});
+const mediaDevices = new MediaDevices(globalScope);
 
 const meta = {
   component: MediaMuteAndSwitchButton,

src/components/MediaMuteAndSwitchButton.test.tsx

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