Merge branch 'main' into toger5/component-bundle-check

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Update ghcr.io/element-hq/element-web:develop Docker digest to 8dc3767 (#4447 )
2026-11-13 01:12:29 +00:00 · 2026-11-11 16:32:20 +01:00 · 2026-11-11 14:47:22 +00:00 · 2026-11-11 15:37:31 +01:00 · 2026-11-11 15:29:03 +01:00 · 2026-11-11 13:53:30 +01:00
46 changed files with 367 additions and 134 deletions
@@ -14,7 +14,7 @@ permissions:
 jobs:
  prevent-blocked:
    name: Prevent blocked
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    permissions:
      pull-requests: read
    steps:
@@ -17,7 +17,7 @@ env:
 jobs:
  build_and_deploy:
    name: Build & publish docker
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    permissions:
      contents: write # required to upload release asset
      packages: write # needed for publishing packages to GHCR
@@ -29,7 +29,7 @@ on:
 jobs:
  build:
    name: Build Element Call
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    steps:
      - name: Checkout code
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
@@ -25,7 +25,7 @@ jobs:
    # Deploy main branch to call.element.dev after build completes
    if: github.ref == 'refs/heads/main'
    needs: build_full_element_call
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    steps:
      - name: Deploy to call.element.dev
        uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6
@@ -92,7 +92,7 @@ jobs:
  build_storybook:
    name: Build Storybook
    if: contains(github.event.pull_request.labels.*.name, 'storybook build')
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    steps:
      - name: Checkout code
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
@@ -13,7 +13,7 @@ permissions:

 jobs:
  pr-changelog-label:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    steps:
      - uses: yogevbd/enforce-label-action@a3c219da6b8fa73f6ba62b68ff09c469b3a1c024 # 2.2.2
        with:
@@ -13,7 +13,7 @@ jobs:
    name: Review
    # Only run on labelling and skip forks.
    if: github.event.label.name == 'Claude-Review' && github.event.pull_request.head.repo.full_name == github.repository
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    steps:
      - name: Checkout code
        uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4.4.0
@@ -32,7 +32,7 @@ on:

 jobs:
  deploy:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    permissions:
      deployments: write
    environment: Netlify
@@ -10,7 +10,7 @@ on:
 jobs:
  lint:
    name: Lint, format & type check
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    steps:
      - name: Checkout code
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
@@ -17,7 +17,7 @@ jobs:
      github.event.workflow_run.conclusion == 'success' &&
      github.event.workflow_run.event == 'pull_request' &&
      github.event.workflow_run.head_repository.full_name == github.repository
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    outputs:
      pr_number: ${{ steps.prdetails.outputs.pr_id }}
      pr_data_json: ${{ steps.prdetails.outputs.data }}
@@ -17,7 +17,7 @@ permissions: {}
 jobs:
  versioning:
    name: Versioning
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    outputs:
      DRY_RUN: ${{ steps.dry_run.outputs.DRY_RUN }}
      PREFIXED_VERSION: ${{ steps.prefixed_version.outputs.PREFIXED_VERSION }}
@@ -59,7 +59,7 @@ jobs:
  publish_npm:
    needs: versioning
    name: Publish NPM
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    outputs:
      ARTIFACT_VERSION: ${{ steps.artifact_version.outputs.ARTIFACT_VERSION }}
    permissions:
@@ -111,7 +111,7 @@ jobs:
    needs: [versioning, publish_npm]
    if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
    name: Update release notes
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    # Shared with publish-embedded-packages.yaml, which appends to the same release: two
    # appends at once would each write back the body without the other's section
    concurrency:
@@ -14,7 +14,7 @@ on:
 jobs:
  versioning:
    name: Versioning
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    outputs:
      DRY_RUN: ${{ steps.dry_run.outputs.DRY_RUN }}
      PREFIXED_VERSION: ${{ steps.prefixed_version.outputs.PREFIXED_VERSION }}
@@ -76,7 +76,7 @@ jobs:
    needs: [build_element_call, versioning]
    if: always()
    name: Publish tarball
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    permissions:
      contents: write # required to upload release asset
    steps:
@@ -107,7 +107,7 @@ jobs:
    needs: [build_element_call, versioning]
    if: always()
    name: Publish NPM
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    outputs:
      ARTIFACT_VERSION: ${{ steps.artifact_version.outputs.ARTIFACT_VERSION }}
    permissions:
@@ -152,7 +152,7 @@ jobs:
    needs: [build_element_call, versioning]
    if: always()
    name: Publish Android AAR
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    outputs:
      ARTIFACT_VERSION: ${{ steps.artifact_version.outputs.ARTIFACT_VERSION }}
    permissions:
@@ -212,7 +212,7 @@ jobs:
    needs: [build_element_call, versioning]
    if: always()
    name: Publish SwiftPM Library
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    outputs:
      ARTIFACT_VERSION: ${{ steps.artifact_version.outputs.ARTIFACT_VERSION }}
    permissions:
@@ -282,7 +282,7 @@ jobs:
    needs: [versioning, publish_npm, publish_android, publish_ios]
    if: always()
    name: Update release notes
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    # Shared with publish-component.yaml, which appends to the same release: two appends
    # at once would each write back the body without the other's section
    concurrency:
@@ -23,7 +23,7 @@ jobs:
    needs: build_element_call
    if: always()
    name: Publish tarball
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    permissions:
      contents: write # required to upload release asset
      packages: write
@@ -68,7 +68,7 @@ jobs:
  add_docker_release_note:
    needs: publish_docker
    name: Add docker release note
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    steps:
      - name: Add release note
        uses: softprops/action-gh-release@3bb12739c298aeb8a4eeaf626c5b8d85266b0e65 # v2
@@ -25,7 +25,7 @@ on:
 jobs:
  vitest:
    name: Run unit tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    steps:
      - name: Checkout code
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
@@ -74,7 +74,7 @@ jobs:
    name: Run end-to-end tests (${{ matrix.part }})
    if: ${{ !inputs.disable_e2e_tests }}
    timeout-minutes: 60
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    # We manually shard the tests across runners. Playwright's own shards cut
    # the list of tests into equal counts in file order, which would leave the
    # widget suite, the slowest tests by far, together at the end.
@@ -150,7 +150,7 @@ jobs:
    name: Run end-to-end tests
    needs: playwright
    if: ${{ always() && !inputs.disable_e2e_tests }}
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    steps:
      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
        with:
@@ -7,7 +7,7 @@ on:

 jobs:
  download:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    permissions:
      contents: read

@@ -8,7 +8,7 @@ on:

 jobs:
  upload:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    permissions:
      contents: read

@@ -10,7 +10,7 @@ permissions: {}
 jobs:
  zizmor:
    name: Run zizmor 🌈
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
    permissions:
      security-events: write # Required for upload-sarif (used by zizmor-action) to upload SARIF files.
    steps:
@@ -275,7 +275,11 @@ API is in `component/index.tsx`, `component/api.ts` and `component/host.ts`.

 ##### Develop

- `pnpm build:component` builds the library into `component/dist`.
+- `pnpm build:component` builds the library into `component/dist`. It ends
+  with `scripts/check-component-bundle.mjs`, which fails the build on what a
+  host must not be handed: an asset inlined as a data URL, a file referenced
+  by an absolute path, the standalone app's client store worker, or a module
+  over its size budget.
 - `pnpm dev:component` serves a test host on `https://localhost:3001`: two
  calls side by side in resizable boxes, with host messages logged at the
  bottom. It uses the development backend, `public/config.json` if present,
@@ -19,10 +19,10 @@ services:
      - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
  element-web:
    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:37d88b4426ff93a884b31c63d5319a7bcee32580f189c724e6b09f793a6de390
+    image: ghcr.io/element-hq/element-web:develop@sha256:72791f0b2541208f8f7edd9c6b5a7eaf88accd8ed1f0c4db1bc62bfe18eb90fe
  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:37d88b4426ff93a884b31c63d5319a7bcee32580f189c724e6b09f793a6de390
+    image: ghcr.io/element-hq/element-web:develop@sha256:72791f0b2541208f8f7edd9c6b5a7eaf88accd8ed1f0c4db1bc62bfe18eb90fe
    volumes:
      # The other site opens the embedded package under test in place of the
      # copy its image bundles (the first site opens the dev server's app.
@@ -22,7 +22,7 @@
    "build:sdk:production": "pnpm build:sdk-target-based-on-call-view-model",
    "build:sdk:development": "pnpm build:sdk-target-based-on-call-view-model --mode development",
    "build:component": "pnpm build:component:js && pnpm build:component:types",
-    "build:component:js": "pnpm build:full --config vite-component.config.js",
+    "build:component:js": "pnpm build:full --config vite-component.config.js && node scripts/check-component-bundle.mjs",
    "build:component:types": "tsc -p component/tsconfig.build.json",
    "build:component:production": "pnpm build:component",
    "build:component:development": "pnpm build:component:js --mode development && pnpm build:component:types",
@@ -107,7 +107,7 @@
    "livekit-client": "^2.18.1",
    "lodash-es": "^4.17.21",
    "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#dc8610e796c92553c658300a4882dde961a0678a",
    "matrix-widget-api": "^1.18.0",
    "node-stdlib-browser": "^1.3.1",
    "normalize.css": "^8.0.1",
@@ -191,8 +191,8 @@ importers:
        specifier: ^1.9.1
        version: 1.9.2
      matrix-js-sdk:
-        specifier: github:matrix-org/matrix-js-sdk#a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01
+        specifier: github:matrix-org/matrix-js-sdk#dc8610e796c92553c658300a4882dde961a0678a
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/dc8610e796c92553c658300a4882dde961a0678a
      matrix-widget-api:
        specifier: ^1.18.0
        version: 1.20.0
@@ -4734,8 +4734,8 @@ packages:
  matrix-events-sdk@0.0.1:
    resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}

-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01:
-    resolution: {gitHosted: true, integrity: sha512-ZAhn/zB44MgrXqUzi9ffSFcmZY3+2nx7bEgfEJR7chYDFyT/XmlmfCJx7Ar4rOTAYZJRVnMxrEwiEHGDapUi0Q==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01}
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/dc8610e796c92553c658300a4882dde961a0678a:
+    resolution: {gitHosted: true, integrity: sha512-Ldt/VkCzBtre6m1cn0FqgrzRV0GrgWIoARgQUQO58ef2Edu2ERFCINPzp/psFS5RwoN3RIy9Rm4oPVc1ATkEWA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/dc8610e796c92553c658300a4882dde961a0678a}
    version: 45.0.0
    engines: {node: '>=22.0.0'}

@@ -4946,8 +4946,8 @@ packages:
    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
    engines: {node: '>=10'}

-  p-retry@8.0.1:
-    resolution: {integrity: sha512-NAigyu8hfvJe7MsS18mnc4is0MZtau3QMdBklaJKK23oBQb6occO3UPM3vHmTckW8KhfyjMZaUOqdTFEYliHgg==}
+  p-retry@9.0.0:
+    resolution: {integrity: sha512-HuEats8gYn/UUYa5uyveyQGv75mQmwdFtuMgnZlS12dj/7bdnJSO6keaTjgcZUhvkANTj5EO3lACUmV3xmgj0Q==}
    engines: {node: '>=22'}

  p-try@2.2.0:
@@ -5318,6 +5318,10 @@ packages:
  randomfill@1.0.4:
    resolution: {integrity: sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==}

+  re2js@2.9.1:
+    resolution: {integrity: sha512-JIT3bEEUZTOR2YS1walNEIfH4cF/cQeZcBUFq7ldqO6lR6g0X5CBq/S8rsa9omzZcsNf8qc36jCkWpKKtncrZg==}
+    engines: {node: '>=20.0.0'}
+
  react-docgen-typescript@2.4.0:
    resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==}
    peerDependencies:
@@ -10409,7 +10413,7 @@ snapshots:

  matrix-events-sdk@0.0.1: {}

-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/dc8610e796c92553c658300a4882dde961a0678a:
    dependencies:
      '@babel/runtime': 8.0.8
      '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0
@@ -10419,7 +10423,8 @@ snapshots:
      loglevel: 1.9.2
      matrix-events-sdk: 0.0.1
      matrix-widget-api: 1.20.0
-      p-retry: 8.0.1
+      p-retry: 9.0.0
+      re2js: 2.9.1
      sdp-transform: 3.0.0
      unhomoglyph: 1.0.6

@@ -10741,7 +10746,7 @@ snapshots:
    dependencies:
      p-limit: 3.1.0

-  p-retry@8.0.1:
+  p-retry@9.0.0:
    dependencies:
      is-network-error: 1.3.2

@@ -11165,6 +11170,8 @@ snapshots:
      randombytes: 2.1.0
      safe-buffer: 5.2.1

+  re2js@2.9.1: {}
+
  react-docgen-typescript@2.4.0(typescript@5.9.3):
    dependencies:
      typescript: 5.9.3
@@ -0,0 +1,92 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * Checks the component build's output for what a host must not be handed.
+ *
+ * A library build inlines every asset it meets as a data URL unless the import
+ * says otherwise, and does so silently: one import without `no-inline` and the
+ * module grows by the asset, encoded a third larger, that every host then
+ * downloads and parses before the first call. MediaPipe's runtime alone is
+ * 11 MB. A reference to a file by an absolute path is just as silent and
+ * breaks at runtime instead, since a host serves the module from wherever it
+ * likes. And the standalone app's client store worker, which carries a copy of
+ * the Matrix SDK and its crypto, has no business in a package whose host
+ * supplies the client: the bundler emits it on loading its import, used or
+ * not (see src/utils/initClient.ts). This fails the build on each of those.
+ */
+
+import { readdir, readFile, stat } from "node:fs/promises";
+import { join } from "node:path";
+
+const dist = "component/dist";
+
+/** The longest data URL a chunk may carry: enough for an icon, not a sound. */
+const inlineLimit = 16 * 1024;
+
+/**
+ * The module itself, in bytes. Well above where it sits with its assets as
+ * files, so that only an asset finding its way back in trips it.
+ */
+const moduleBudget = 4 * 1024 * 1024;
+
+/**
+ * The modules a host bundles: the entry points and their chunks, at the top of
+ * the package. What sits under `assets/` is fetched as it is, by URL.
+ */
+async function modules() {
+  const names = await readdir(dist);
+  return names.filter((name) => name.endsWith(".js")).map((n) => join(dist, n));
+}
+
+const problems = [];
+
+for (const name of await readdir(join(dist, "assets")))
+  if (name.includes("IndexedDBWorker"))
+    problems.push(
+      `${dist}/assets/${name}: the standalone app's client store worker is ` +
+        `in the package. Something the component reaches imports the worker; ` +
+        `keep it on the standalone app's side (see src/utils/initClient.ts ` +
+        `and the \`loadClient\` prop of ClientProvider).`,
+    );
+
+for (const file of await modules()) {
+  const code = await readFile(file, "utf8");
+
+  for (const [, type, payload] of code.matchAll(
+    /data:([a-z0-9/.+-]*);base64,([A-Za-z0-9+/=]*)/g,
+  ))
+    if (payload.length > inlineLimit)
+      problems.push(
+        `${file}: a ${type} asset of ${Math.round(payload.length / 1024)} kB ` +
+          `is inlined as a data URL. Import it with \`?url&no-inline\` so ` +
+          `that it is emitted as a file.`,
+      );
+
+  for (const [reference] of code.matchAll(/["'`]\/assets\/[^"'`]+["'`]/g))
+    problems.push(
+      `${file}: ${reference} is an absolute path, which only resolves ` +
+        `against an origin that serves the package at its root. The build ` +
+        `is meant to render relative references; check \`base\` in ` +
+        `vite-component.config.ts.`,
+    );
+}
+
+const moduleSize = (await stat(join(dist, "element-call.js"))).size;
+if (moduleSize > moduleBudget)
+  problems.push(
+    `${dist}/element-call.js is ${Math.round(moduleSize / 1024 / 1024)} MB, ` +
+      `over its ${moduleBudget / 1024 / 1024} MB budget. Something large ` +
+      `has been bundled into the module that a host would rather fetch when ` +
+      `it is needed.`,
+  );
+
+if (problems.length > 0) {
+  console.error(`The component build is not fit to publish:\n`);
+  for (const problem of problems) console.error(`  ${problem}\n`);
+  process.exit(1);
+}
@@ -162,6 +162,7 @@ describe("createLocalMedia", () => {
    media.release("camera");
    expect(trackBehind(camera).stop).toHaveBeenCalled();
    expect(media.tracks$.value).toEqual([microphone]);
+    expect(media.requests.map((r) => r.source)).toEqual(["microphone"]);

    media.stop();
    expect(trackBehind(microphone).stop).toHaveBeenCalled();
@@ -107,6 +107,7 @@ export function createLocalMedia(
    if (source !== "microphone" && source !== "camera") return;
    capturedTracks.get(source)?.stop();
    capturedTracks.delete(source);
+    requests.delete(source);
    publishCapturedTracks();
  };

@@ -184,6 +184,7 @@ export function createRTCParticipation(
          encryptMedia: encryptionSystem.kind !== E2eeType.NONE,
          matrixRTCMode,
          sendNotificationType: options.sendNotificationType,
+          callIntent: options.callIntent,
          applicationData: options.applicationData,
          timings,
          delayedLeave,
@@ -12,6 +12,7 @@ Please see LICENSE in the repository root for full details.
 */

 import {
+  type RTCCallIntent,
  type RTCNotificationType,
  type Transport,
 } from "matrix-js-sdk/lib/matrixrtc";
@@ -103,11 +104,14 @@ export interface RTCParticipationOptions {
   * to a notification (ringing, timeouts, declines) is the application's job.
   */
  sendNotificationType?: RTCNotificationType;
+  /**
+   * The kind of call the local member intends to take part in: `"m.audio"`
+   * or `"m.video"`. Carried by the membership as a field of its own.
+   */
+  callIntent?: RTCCallIntent;
  /**
   * Whatever the application wants to say about itself in the membership,
-   * under namespaced keys. Opaque to the SDK, apart from `m.call.intent`
-   * (`"audio"` or `"video"`), which the membership format carries as a
-   * field of its own.
+   * under namespaced keys. Opaque to the SDK.
   */
  applicationData?: Record<string, unknown>;
  /** Timings the host has configured; the defaults otherwise. */
@@ -287,7 +291,7 @@ export interface RTCMember {
  memberId: string;
  /** Which transport this member is on; undefined when the membership has none. */
  transport$: Behavior<TransportMetadata | undefined>;
-  /** What the member's application says about itself, e.g. `m.call.intent`. */
+  /** What the member's application says about itself, e.g. `intent`. */
  applicationData$: Behavior<Record<string, unknown>>;

  displayName$: Behavior<string>;
@@ -60,7 +60,7 @@ describe("joinJsSdkSession", () => {
    expect(s.join).toHaveBeenCalledWith(ownMemberMock, [transportWithAlias], {
      notificationType: "ring",
      callIntent: undefined,
-      applicationData: {},
+      applicationData: undefined,
      manageMediaKeys: true,
      delayedLeaveEventRestartMs: 300_000,
      delayedLeaveEventDelayMs: 3_600_000,
@@ -95,13 +95,14 @@ describe("joinJsSdkSession", () => {
    );
  });

-  it("lifts the call intent out of the application data and sends sticky events in Matrix 2.0 mode", () => {
+  it("passes the call intent and application data through and sends sticky events in Matrix 2.0 mode", () => {
    const s = session();

    joinJsSdkSession("!room:example.org", s, ownMemberMock, transport, {
      encryptMedia: true,
      matrixRTCMode: MatrixRTCMode.Matrix_2_0,
-      applicationData: { "m.call.intent": "audio", custom: 1 },
+      callIntent: "m.audio",
+      applicationData: { custom: 1 },
      timings: defaultSessionTimings,
      delayedLeave: defaultSessionTimings.delayedLeave,
    });
@@ -110,7 +111,7 @@ describe("joinJsSdkSession", () => {
      ownMemberMock,
      [transportWithAlias],
      expect.objectContaining({
-        callIntent: "audio",
+        callIntent: "m.audio",
        applicationData: { custom: 1 },
        unstableSendStickyEvents: true,
      }),
@@ -124,7 +125,8 @@ describe("joinJsSdkSession", () => {
    joinJsSdkSession("!room:example.org", s, ownMemberMock, transport, {
      encryptMedia: true,
      matrixRTCMode: MatrixRTCMode.Matrix_2_0,
-      applicationData: { "m.call.intent": "audio", custom: 1 },
+      callIntent: "m.audio",
+      applicationData: { custom: 1 },
      timings: defaultSessionTimings,
      delayedLeave: defaultSessionTimings.delayedLeave,
    });
@@ -133,7 +135,7 @@ describe("joinJsSdkSession", () => {
      ownMemberMock,
      [transport],
      expect.objectContaining({
-        callIntent: "audio",
+        callIntent: "m.audio",
        applicationData: { custom: 1 },
        unstableSendStickyEvents: true,
      }),
@@ -23,6 +23,7 @@ interface Options {
  encryptMedia: boolean;
  matrixRTCMode: MatrixRTCMode;
  sendNotificationType?: RTCNotificationType;
+  callIntent?: RTCCallIntent;
  applicationData?: Record<string, unknown>;
  timings: SessionTimings;
  /** The delayed leave timings to use: delegated to the SFU or not. */
@@ -43,15 +44,12 @@ export function joinJsSdkSession(
    encryptMedia,
    matrixRTCMode,
    sendNotificationType,
+    callIntent,
    applicationData,
    timings,
    delayedLeave,
  }: Options,
 ): void {
-  // The membership format carries the intent as a field of its own
-  const { "m.call.intent": intent, ...rest } = applicationData ?? {};
-  const callIntent =
-    typeof intent === "string" ? (intent as RTCCallIntent) : undefined;
  // Give up on the network as soon as either the sync has been down for the
  // grace period or the delayed leave has probably been sent, whichever is
  // sooner
@@ -78,7 +76,7 @@ export function joinJsSdkSession(
    {
      notificationType: sendNotificationType,
      callIntent,
-      applicationData: rest,
+      applicationData,
      manageMediaKeys: encryptMedia,
      delayedLeaveEventRestartMs: delayedLeave.restart_ms,
      delayedLeaveEventDelayMs: delayedLeave.delay_ms,
@@ -18,6 +18,8 @@ Please see LICENSE in the repository root for full details.
 */

 import {
+  RTC_CALL_INTENT_AUDIO,
+  RTC_CALL_INTENT_VIDEO,
  type RTCCallIntent,
  type RTCNotificationType,
 } from "matrix-js-sdk/lib/matrixrtc";
@@ -179,40 +181,40 @@ export function configurationForIntent(intent: UserIntent): UrlConfiguration {
  switch (intent) {
    case UserIntent.StartNewCall:
      preset.skipLobby = false;
-      preset.callIntent = "video";
+      preset.callIntent = RTC_CALL_INTENT_VIDEO;
      break;
    case UserIntent.JoinExistingCall:
      // On desktop this will be overridden based on which button was used to join the call
      preset.skipLobby = false;
-      preset.callIntent = "video";
+      preset.callIntent = RTC_CALL_INTENT_VIDEO;
      break;
    case UserIntent.StartNewCallVoice:
      preset.skipLobby = false;
-      preset.callIntent = "audio";
+      preset.callIntent = RTC_CALL_INTENT_AUDIO;
      break;
    case UserIntent.JoinExistingCallVoice:
      // On desktop this will be overridden based on which button was used to join the call
      preset.skipLobby = false;
-      preset.callIntent = "audio";
+      preset.callIntent = RTC_CALL_INTENT_AUDIO;
      break;
    case UserIntent.StartNewCallDMVoice:
-      preset.callIntent = "audio";
+      preset.callIntent = RTC_CALL_INTENT_AUDIO;
    // Fall through
    case UserIntent.StartNewCallDM:
      preset.skipLobby = true;
      preset.sendNotificationType = "ring";
      preset.autoLeaveWhenOthersLeft = true;
      preset.waitForCallPickup = true;
-      preset.callIntent = preset.callIntent ?? "video";
+      preset.callIntent = preset.callIntent ?? RTC_CALL_INTENT_VIDEO;
      break;
    case UserIntent.JoinExistingCallDMVoice:
-      preset.callIntent = "audio";
+      preset.callIntent = RTC_CALL_INTENT_AUDIO;
    // Fall through
    case UserIntent.JoinExistingCallDM:
      // On desktop this will be overridden based on which button was used to join the call
      preset.skipLobby = true;
      preset.autoLeaveWhenOthersLeft = true;
-      preset.callIntent = preset.callIntent ?? "video";
+      preset.callIntent = preset.callIntent ?? RTC_CALL_INTENT_VIDEO;
      break;
    // Non widget usecase defaults
    default:
@@ -21,6 +21,10 @@ import {
  UserIntent,
 } from "../src/UrlParams";
 import { mockConfig } from "./utils/test";
+import {
+  RTC_CALL_INTENT_AUDIO,
+  RTC_CALL_INTENT_VIDEO,
+} from "matrix-js-sdk/lib/matrixrtc";

 const ROOM_NAME = "roomNameHere";
 const ROOM_ID = "!d45f138fsd";
@@ -275,7 +279,7 @@ describe("UrlParams", () => {
      ).toMatchObject({
        ...startNewCallDefaults("desktop"),
        skipLobby: false,
-        callIntent: "video",
+        callIntent: RTC_CALL_INTENT_VIDEO,
      });
    });

@@ -322,7 +326,7 @@ describe("UrlParams", () => {
      ).toMatchObject({
        ...startNewCallDefaults("desktop"),
        skipLobby: false,
-        callIntent: "audio",
+        callIntent: RTC_CALL_INTENT_AUDIO,
      });
    });

@@ -333,7 +337,7 @@ describe("UrlParams", () => {
        ),
      ).toMatchObject({
        ...joinExistingCallDefaults("desktop"),
-        callIntent: "audio",
+        callIntent: RTC_CALL_INTENT_AUDIO,
      });
    });

@@ -348,7 +352,7 @@ describe("UrlParams", () => {
        sendNotificationType: "ring",
        autoLeaveWhenOthersLeft: true,
        waitForCallPickup: true,
-        callIntent: "audio",
+        callIntent: RTC_CALL_INTENT_AUDIO,
      });
    });

@@ -363,7 +367,7 @@ describe("UrlParams", () => {
        skipLobby: true,
        autoLeaveWhenOthersLeft: true,
        waitForCallPickup: false,
-        callIntent: "video",
+        callIntent: RTC_CALL_INTENT_VIDEO,
      });
    });

@@ -377,7 +381,7 @@ describe("UrlParams", () => {
        skipLobby: true,
        autoLeaveWhenOthersLeft: true,
        waitForCallPickup: false,
-        callIntent: "audio",
+        callIntent: RTC_CALL_INTENT_AUDIO,
      });
    });
  });
@@ -822,9 +822,7 @@ export function rtcParticipationOptions(
  const session = config.matrix_rtc_session;
  return {
    sendNotificationType: urlParams.sendNotificationType,
-    applicationData: urlParams.callIntent
-      ? { "m.call.intent": urlParams.callIntent }
-      : undefined,
+    callIntent: urlParams.callIntent,
    timings: {
      syncDisconnectGracePeriodMs: config.sync_disconnect_grace_period_ms,
      networkErrorRetryMs: session.network_error_retry_ms,
@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { expect, type MockedFunction, test, vi } from "vitest";
 import { act, render } from "@testing-library/react";
 import { BehaviorSubject } from "rxjs";
+import { RTC_CALL_INTENT_AUDIO } from "matrix-js-sdk/lib/matrixrtc";

 import { useAudioContext } from "../useAudioContext";
 import { createRingingMedia } from "../state/media/RingingMediaViewModel";
@@ -39,7 +40,7 @@ test("ringtone plays on loop while ringing", () => {
    userId: alice.userId,
    displayName$: constant("Alice"),
    mxcAvatarUrl$: constant(undefined),
-    intent: "audio",
+    intent: RTC_CALL_INTENT_AUDIO,
    pickupState$,
  });

@@ -7,7 +7,11 @@ Please see LICENSE in the repository root for full details.

 import { it, vi, expect, beforeEach, afterEach, describe } from "vitest";
 import { firstValueFrom, of, Subject, take, toArray } from "rxjs";
-import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
+import {
+  RTC_CALL_INTENT_AUDIO,
+  RTC_CALL_INTENT_VIDEO,
+  type RTCCallIntent,
+} from "matrix-js-sdk/lib/matrixrtc";

 import { AndroidControlledAudioOutput } from "./AndroidControlledAudioOutput.ts";
 import type { Controls, OutputDevice } from "../controls";
@@ -117,7 +121,7 @@ describe("Default selection", () => {
    const controlledAudioOutput = new AndroidControlledAudioOutput(
      of(BASE_DEVICE_LIST),
      testScope,
-      "video",
+      RTC_CALL_INTENT_VIDEO,
      mockControls,
    );

@@ -142,7 +146,7 @@ describe("Default selection", () => {
    const controlledAudioOutput = new AndroidControlledAudioOutput(
      of(BASE_DEVICE_LIST),
      testScope,
-      "audio",
+      RTC_CALL_INTENT_AUDIO,
      mockControls,
    );

@@ -163,7 +167,7 @@ describe("Default selection", () => {
    });
  });

-  ["audio", "video"].forEach((callIntent) => {
+  [RTC_CALL_INTENT_AUDIO, RTC_CALL_INTENT_VIDEO].forEach((callIntent) => {
    it(`Default to BT headset for ${callIntent} calls if present`, async () => {
      const controlledAudioOutput = new AndroidControlledAudioOutput(
        of(BT_HEADSET_BASE_DEVICE_LIST),
@@ -190,7 +194,7 @@ describe("Default selection", () => {
    });
  });

-  ["audio", "video"].forEach((callIntent) => {
+  [RTC_CALL_INTENT_AUDIO, RTC_CALL_INTENT_VIDEO].forEach((callIntent) => {
    it(`Default to wired headset for ${callIntent} calls if present`, async () => {
      const controlledAudioOutput = new AndroidControlledAudioOutput(
        of(WIRED_HEADSET_BASE_DEVICE_LIST),
@@ -300,7 +304,7 @@ describe("Test select a device", () => {
          b: BT_HEADSET_BASE_DEVICE_LIST,
        }),
        testScope,
-        "audio",
+        RTC_CALL_INTENT_AUDIO,
        mockControls,
      );

@@ -340,7 +344,7 @@ describe("Test select a device", () => {
          c: BASE_DEVICE_LIST,
        }),
        testScope,
-        "audio",
+        RTC_CALL_INTENT_AUDIO,
        mockControls,
      );

@@ -393,7 +397,7 @@ describe("Available device changes", () => {
  });

  it("When a BT headset is added, control should switch to use it", () => {
-    createAudioControlledOutput("video");
+    createAudioControlledOutput(RTC_CALL_INTENT_VIDEO);

    // Emit the base device list, the speaker should be selected
    availableSource$.next(BASE_DEVICE_LIST);
@@ -419,7 +423,9 @@ describe("Available device changes", () => {

  // Android does not set `isExternalHeadset` to true for wired headphones, so we can't test this case.'
  it.skip("When a wired headset is added, control should switch to use it", async () => {
-    const controlledAudioOutput = createAudioControlledOutput("video");
+    const controlledAudioOutput = createAudioControlledOutput(
+      RTC_CALL_INTENT_VIDEO,
+    );

    // Emit the base device list, the speaker should be selected
    availableSource$.next(BASE_DEVICE_LIST);
@@ -446,7 +452,7 @@ describe("Available device changes", () => {
  });

  it("When the active bt headset is removed on audio call, control should switch to earpiece", () => {
-    createAudioControlledOutput("audio");
+    createAudioControlledOutput(RTC_CALL_INTENT_AUDIO);

    // Emit the BT headset device list, the BT headset should be selected
    availableSource$.next(BT_HEADSET_BASE_DEVICE_LIST);
@@ -472,7 +478,7 @@ describe("Available device changes", () => {
  });

  it("When the active bt headset is removed on video call, control should switch to speaker", () => {
-    createAudioControlledOutput("video");
+    createAudioControlledOutput(RTC_CALL_INTENT_VIDEO);

    availableSource$.next(BT_HEADSET_BASE_DEVICE_LIST);

@@ -497,7 +503,7 @@ describe("Available device changes", () => {
  });

  it("Do not repeatidly set the same device", () => {
-    createAudioControlledOutput("video");
+    createAudioControlledOutput(RTC_CALL_INTENT_VIDEO);

    availableSource$.next(BT_HEADSET_BASE_DEVICE_LIST);
    availableSource$.next(BT_HEADSET_BASE_DEVICE_LIST);
@@ -22,7 +22,10 @@ import {
  type SelectedAudioOutputDevice,
 } from "./MediaDevices.ts";
 import type { ObservableScope } from "./ObservableScope.ts";
-import type { RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
+import {
+  RTC_CALL_INTENT_AUDIO,
+  type RTCCallIntent,
+} from "matrix-js-sdk/lib/matrixrtc";
 import { type Controls, type OutputDevice } from "../controls.ts";
 import { type Behavior } from "./Behavior.ts";

@@ -102,7 +105,7 @@ export class AndroidControlledAudioOutput implements MediaDevice<
   * @constructor
   * @param controlledDevices$ - The list of available output devices coming from the hosting application, ordered by preference order (most preferred first).
   * @param scope - The ObservableScope to create the Behaviors in.
-   * @param initialIntent - The initial call intent (e.g. "audio" or "video") that can be used to determine the default audio routing (e.g. default to earpiece for audio calls and speaker for video calls).
+   * @param initialIntent - The initial call intent (e.g. "m.audio" or "m.video") that can be used to determine the default audio routing (e.g. default to earpiece for audio calls and speaker for video calls).
   * @param controls - The controls provided by the hosting application to control the audio routing and notify of user actions.
   */
  public constructor(
@@ -316,7 +319,7 @@ export class AndroidControlledAudioOutput implements MediaDevice<
    this.logger.debug(
      `Android routing logic intent: ${this.initialIntent} finding best default...`,
    );
-    if (this.initialIntent === "audio") {
+    if (this.initialIntent === RTC_CALL_INTENT_AUDIO) {
      const systemProposed = available[0];
      // If no headset is connected, android will route to the speaker by default,
      // but for a voice call we want to route to the earpiece instead,
@@ -12,7 +12,11 @@ import {
  MatrixEvent,
  type Room,
 } from "matrix-js-sdk";
-import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
+import {
+  RTC_CALL_INTENT_AUDIO,
+  RTC_CALL_INTENT_VIDEO,
+  type RTCCallIntent,
+} from "matrix-js-sdk/lib/matrixrtc";
 import { map, mergeMap, NEVER, type Observable, startWith } from "rxjs";

 import { withTestScheduler } from "../../utils/test";
@@ -33,10 +37,12 @@ function mockRingEvent(
  eventId: string,
  lifetimeMs: number | undefined,
  sender = local.userId,
+  legacyIntent?: string,
 ): CallNotificationWrapper {
  return {
    event_id: eventId,
    ...(lifetimeMs === undefined ? {} : { lifetime: lifetimeMs }),
+    ...(legacyIntent === undefined ? {} : { "m.call.intent": legacyIntent }),
    notification_type: "ring",
    sender,
  } as unknown as CallNotificationWrapper;
@@ -128,7 +134,25 @@ test("ring attempt times out after nobody joins", () => {
    });

    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-a 29ms A", {
-      a: { intent: "audio", recipient: alice.userId },
+      a: { intent: RTC_CALL_INTENT_AUDIO, recipient: alice.userId },
+      A: { outcome: "timeout" },
+    });
+  });
+});
+
+test("ring attempt maps the legacy intent on the notification to its stable value", () => {
+  withTestScheduler(({ scope, expectObservable, hot }) => {
+    const { ringAttempts$ } = createCallNotificationLifecycle$({
+      scope,
+      ...defaultProps,
+      memberUserIds$: constant<string[]>([]),
+      sentCallNotification$: hot("-a", {
+        a: mockRingEvent("$notif1", 30, local.userId, "video"),
+      }),
+    });
+
+    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-a 29ms A", {
+      a: { intent: RTC_CALL_INTENT_VIDEO, recipient: alice.userId },
      A: { outcome: "timeout" },
    });
  });
@@ -148,7 +172,7 @@ test("ring attempt is accepted once recipient joins", () => {
    });

    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-aA", {
-      a: { intent: "audio", recipient: alice.userId },
+      a: { intent: RTC_CALL_INTENT_AUDIO, recipient: alice.userId },
      A: { outcome: "accept" },
    });
  });
@@ -166,7 +190,7 @@ test("ring attempt is immediately accepted if recipient is already joined", () =
    });

    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-(aA)", {
-      a: { intent: "audio", recipient: alice.userId },
+      a: { intent: RTC_CALL_INTENT_AUDIO, recipient: alice.userId },
      A: { outcome: "accept" },
    });
  });
@@ -201,7 +225,7 @@ test("ring attempt can be declined", () => {
    });

    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-aA", {
-      a: { intent: "audio", recipient: alice.userId },
+      a: { intent: RTC_CALL_INTENT_AUDIO, recipient: alice.userId },
      A: { outcome: "decline" },
    });
  });
@@ -236,7 +260,7 @@ test("ring attempt times out if recipient declines too late", () => {
    });

    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-a 29ms A", {
-      a: { intent: "audio", recipient: alice.userId },
+      a: { intent: RTC_CALL_INTENT_AUDIO, recipient: alice.userId },
      A: { outcome: "timeout" },
    });
  });
@@ -271,7 +295,7 @@ test("decline event relating to wrong event is ignored (times out)", () => {
    });

    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-a 29ms A", {
-      a: { intent: "audio", recipient: alice.userId },
+      a: { intent: RTC_CALL_INTENT_AUDIO, recipient: alice.userId },
      A: { outcome: "timeout" },
    });
  });
@@ -306,7 +330,7 @@ test("decline event from wrong sender is ignored (times out)", () => {
    });

    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-a 29ms A", {
-      a: { intent: "audio", recipient: alice.userId },
+      a: { intent: RTC_CALL_INTENT_AUDIO, recipient: alice.userId },
      A: { outcome: "timeout" },
    });
  });
@@ -9,7 +9,9 @@ import {
  type IRTCNotificationContent,
  type MatrixRTCSession,
  MatrixRTCSessionEvent,
+  RTC_CALL_INTENT_AUDIO,
  type RTCCallIntent,
+  toStableCallIntent,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
  filter,
@@ -155,7 +157,10 @@ export function createCallNotificationLifecycle$({
        );

        return of({
-          intent: notificationEvent["m.call.intent"] ?? "audio",
+          // The notification still carries the legacy intent values
+          intent:
+            toStableCallIntent(notificationEvent["m.call.intent"]) ??
+            RTC_CALL_INTENT_AUDIO,
          recipient,
          outcome$: race(timeout$, accept$, decline$).pipe(
            take(1),
@@ -21,6 +21,7 @@ import {
  type CallMembership,
  type IRTCNotificationContent,
  MatrixRTCSessionEvent,
+  RTC_CALL_INTENT_AUDIO,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { deepCompare } from "matrix-js-sdk/lib/utils";

@@ -1559,7 +1560,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
            b: expect.objectContaining({
              type: "ringing",
              userId: alice.userId,
-              intent: "audio",
+              intent: RTC_CALL_INTENT_AUDIO,
            }),
          });
          // Layout should show placeholder media for the participant we're
@@ -1605,7 +1606,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
            b: expect.objectContaining({
              type: "ringing",
              userId: alice.userId,
-              intent: "audio",
+              intent: RTC_CALL_INTENT_AUDIO,
            }),
          });
          // Layout should show placeholder media for the participant we're
@@ -21,6 +21,10 @@ import {
  EARPIECE_CONFIG_ID,
  IOSControlledAudioOutput,
 } from "./IOSControlledAudioOutput";
+import {
+  RTC_CALL_INTENT_AUDIO,
+  RTC_CALL_INTENT_VIDEO,
+} from "matrix-js-sdk/lib/matrixrtc";

 // `vi.mock` calls are hoisted above all imports, so the static imports below
 // already see these mocks. Force the iOS platform so that the virtual earpiece
@@ -81,7 +85,7 @@ describe("Default selection", () => {
    const output = new IOSControlledAudioOutput(
      constant(false),
      testScope,
-      "audio",
+      RTC_CALL_INTENT_AUDIO,
    );
    const selected = latestSelection(output);

@@ -100,7 +104,7 @@ describe("Default selection", () => {
    const output = new IOSControlledAudioOutput(
      constant(false),
      testScope,
-      "video",
+      RTC_CALL_INTENT_VIDEO,
    );
    const selected = latestSelection(output);

@@ -113,7 +117,7 @@ describe("Default selection", () => {
    const output = new IOSControlledAudioOutput(
      constant(false),
      testScope,
-      "audio",
+      RTC_CALL_INTENT_AUDIO,
    );
    const selected = latestSelection(output);

@@ -130,7 +134,7 @@ describe("Explicit selection", () => {
    const output = new IOSControlledAudioOutput(
      constant(false),
      testScope,
-      "audio",
+      RTC_CALL_INTENT_AUDIO,
    );
    const selected = latestSelection(output);

@@ -150,7 +154,7 @@ describe("Explicit selection", () => {
    const output = new IOSControlledAudioOutput(
      constant(false),
      testScope,
-      "audio",
+      RTC_CALL_INTENT_AUDIO,
    );
    const selected = latestSelection(output);

@@ -8,7 +8,10 @@ Please see LICENSE in the repository root for full details.
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { combineLatest, merge, startWith, Subject, tap } from "rxjs";

-import type { RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
+import {
+  RTC_CALL_INTENT_AUDIO,
+  type RTCCallIntent,
+} from "matrix-js-sdk/lib/matrixrtc";
 import {
  availableOutputDevices$ as controlledAvailableOutputDevices$,
  outputDevice$ as controlledOutputSelection$,
@@ -111,7 +114,7 @@ export class IOSControlledAudioOutput implements MediaDevice<
   * Chooses the default output device when no explicit selection (from the user
   * or the hosting application) has been made yet.
   *
-   * For voice calls (`initialIntent === "audio"`) we want to start on the
+   * For voice calls (`initialIntent === "m.audio"`) we want to start on the
   * earpiece rather than the speaker, like a regular phone call. We only
   * override when the device that would otherwise be the default is the
   * speaker: if the host already routed to a headset (e.g. Bluetooth) — which
@@ -122,7 +125,7 @@ export class IOSControlledAudioOutput implements MediaDevice<
    available: Map<string, AudioOutputDeviceLabel>,
  ): string | undefined {
    const firstId = available.keys().next().value;
-    if (this.initialIntent === "audio") {
+    if (this.initialIntent === RTC_CALL_INTENT_AUDIO) {
      const firstLabel =
        firstId !== undefined ? available.get(firstId) : undefined;
      if (firstLabel?.type === "speaker") {
@@ -35,6 +35,10 @@ import { AudioOutput, MediaDevices } from "./MediaDevices";
 import { AndroidControlledAudioOutput } from "./AndroidControlledAudioOutput";
 import { IOSControlledAudioOutput } from "./IOSControlledAudioOutput";
 import { ObservableScope } from "./ObservableScope";
+import {
+  RTC_CALL_INTENT_AUDIO,
+  RTC_CALL_INTENT_VIDEO,
+} from "matrix-js-sdk/lib/matrixrtc";

 // Which audio output implementation is used is decided by what the app hosting
 // Element Call told it, rather than being discovered from the environment.
@@ -52,7 +56,7 @@ describe("MediaDevices audio output", () => {

    const devices = new MediaDevices(new ObservableScope(), {
      controlledAudioDevices: true,
-      callIntent: "audio",
+      callIntent: RTC_CALL_INTENT_AUDIO,
    });

    expect(devices.audioOutput).toBeInstanceOf(AndroidControlledAudioOutput);
@@ -63,7 +67,7 @@ describe("MediaDevices audio output", () => {

    const devices = new MediaDevices(new ObservableScope(), {
      controlledAudioDevices: true,
-      callIntent: "video",
+      callIntent: RTC_CALL_INTENT_VIDEO,
    });

    expect(devices.audioOutput).toBeInstanceOf(IOSControlledAudioOutput);
@@ -6,7 +6,11 @@ Please see LICENSE in the repository root for full details.
 */

 import { test, expect } from "vitest";
-import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
+import {
+  RTC_CALL_INTENT_AUDIO,
+  RTC_CALL_INTENT_VIDEO,
+  type RTCCallIntent,
+} from "matrix-js-sdk/lib/matrixrtc";

 import { calculateInitialMuteState } from "./initialMuteState";

@@ -14,10 +18,10 @@ test.each<{
  callIntent: RTCCallIntent;
  allowJoinUnmutedViaIntent: boolean;
 }>([
-  { callIntent: "audio", allowJoinUnmutedViaIntent: false },
-  { callIntent: "audio", allowJoinUnmutedViaIntent: true },
-  { callIntent: "video", allowJoinUnmutedViaIntent: false },
-  { callIntent: "video", allowJoinUnmutedViaIntent: true },
+  { callIntent: RTC_CALL_INTENT_AUDIO, allowJoinUnmutedViaIntent: false },
+  { callIntent: RTC_CALL_INTENT_AUDIO, allowJoinUnmutedViaIntent: true },
+  { callIntent: RTC_CALL_INTENT_VIDEO, allowJoinUnmutedViaIntent: false },
+  { callIntent: RTC_CALL_INTENT_VIDEO, allowJoinUnmutedViaIntent: true },
  { callIntent: "unknown", allowJoinUnmutedViaIntent: false },
  { callIntent: "unknown", allowJoinUnmutedViaIntent: true },
 ])(
@@ -29,15 +33,15 @@ test.each<{
      allowJoinUnmutedViaIntent,
    );
    expect(audioEnabled).toBe(true);
-    expect(videoEnabled).toBe(callIntent !== "audio");
+    expect(videoEnabled).toBe(callIntent !== RTC_CALL_INTENT_AUDIO);
  },
 );

 test.each<{
  callIntent: RTCCallIntent;
 }>([
-  { callIntent: "audio" },
-  { callIntent: "video" },
+  { callIntent: RTC_CALL_INTENT_AUDIO },
+  { callIntent: RTC_CALL_INTENT_VIDEO },
  { callIntent: "unknown" },
 ])(
  "Should always mute on start if skipping lobby and the host does not vouch for the intent (callIntent: $callIntent)",
@@ -55,8 +59,8 @@ test.each<{
 test.each<{
  callIntent: RTCCallIntent;
 }>([
-  { callIntent: "audio" },
-  { callIntent: "video" },
+  { callIntent: RTC_CALL_INTENT_AUDIO },
+  { callIntent: RTC_CALL_INTENT_VIDEO },
  { callIntent: "unknown" },
 ])(
  "Can start unmuted if skipping lobby and the host vouches for the intent (callIntent: $callIntent)",
@@ -67,6 +71,6 @@ test.each<{
      true,
    );
    expect(audioEnabled).toBe(true);
-    expect(videoEnabled).toBe(callIntent !== "audio");
+    expect(videoEnabled).toBe(callIntent !== RTC_CALL_INTENT_AUDIO);
  },
 );
@@ -6,7 +6,10 @@ Please see LICENSE in the repository root for full details.
 */

 import { logger } from "matrix-js-sdk/lib/logger";
-import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
+import {
+  RTC_CALL_INTENT_AUDIO,
+  type RTCCallIntent,
+} from "matrix-js-sdk/lib/matrixrtc";

 /**
 * Calculates the initial mute state for media devices based on configuration.
@@ -40,10 +43,10 @@ export function calculateInitialMuteState(

  // A host that vouches for the intent is a trusted environment, so it allows
  // unmuted by default. Same for when showing a lobby, as users can adjust
-  // their settings there. Additionally, if the call intent is "audio", we
+  // their settings there. Additionally, if the call intent is "m.audio", we
  // disable video by default.
  return {
    audioEnabled: true,
-    videoEnabled: callIntent != "audio",
+    videoEnabled: callIntent != RTC_CALL_INTENT_AUDIO,
  };
 }
@@ -8,7 +8,10 @@ Please see LICENSE in the repository root for full details.
 import { test, expect } from "vitest";
 import { act, render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
-import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
+import {
+  RTC_CALL_INTENT_AUDIO,
+  type MatrixRTCSession,
+} from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject } from "rxjs";

 import { GridTile } from "./GridTile";
@@ -122,7 +125,7 @@ test("GridTile displays ringing media", async () => {
  const vm = createRingingMedia({
    pickupState$,
    id: "test",
-    intent: "audio",
+    intent: RTC_CALL_INTENT_AUDIO,
    userId: "@alice:example.org",
    displayName$: constant("Alice"),
    mxcAvatarUrl$: constant(undefined),
@@ -12,6 +12,7 @@ import {
  EndCallIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
+import { RTC_CALL_INTENT_VIDEO } from "matrix-js-sdk/lib/matrixrtc";

 import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
 import { useBehavior } from "../useBehavior";
@@ -25,7 +26,7 @@ export const RingingStatus: FC<Props> = ({ vm }) => {
  const pickupState = useBehavior(vm.pickupState$);
  const Icon =
    pickupState === "ringing"
-      ? vm.intent === "video"
+      ? vm.intent === RTC_CALL_INTENT_VIDEO
        ? VideoCallSolidIcon
        : VoiceCallSolidIcon
      : EndCallIcon;
@@ -11,6 +11,7 @@ import { axe } from "vitest-axe";
 import userEvent from "@testing-library/user-event";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { BehaviorSubject } from "rxjs";
+import { RTC_CALL_INTENT_AUDIO } from "matrix-js-sdk/lib/matrixrtc";

 import { SpotlightTile } from "./SpotlightTile";
 import {
@@ -176,7 +177,7 @@ test("SpotlightTile displays ringing media", async () => {
  const vm = createRingingMedia({
    pickupState$,
    id: "test",
-    intent: "audio",
+    intent: RTC_CALL_INTENT_AUDIO,
    userId: "@alice:example.org",
    displayName$: constant("Alice"),
    mxcAvatarUrl$: constant(undefined),
@@ -20,6 +20,7 @@ import {

 const frame = {} as VideoFrame;
 const controller = {} as TransformStreamDefaultController<VideoFrame>;
+const stats = { processingTimeMs: 1, segmentationTimeMs: 1, filterTimeMs: 0 };

 describe("BackgroundEffectTransformer", () => {
  afterEach(() => {
@@ -66,9 +67,10 @@ describe("BackgroundEffectTransformer", () => {
  });

  it("reports the first frame carrying an effect, once", async () => {
+    // The library reports every frame it draws.
    vi.spyOn(BackgroundTransformer.prototype, "transform").mockImplementation(
      async function (this: BackgroundTransformer) {
-        this.isFirstFrame = false;
+        this.options.onFrameProcessed?.(stats);
        return Promise.resolve();
      },
    );
@@ -91,6 +93,37 @@ describe("BackgroundEffectTransformer", () => {
    expect(transformer.onFirstFrame).not.toHaveBeenCalled();
  });

+  it("keeps reporting drawn frames to whoever asked", async () => {
+    vi.spyOn(BackgroundTransformer.prototype, "transform").mockImplementation(
+      async function (this: BackgroundTransformer) {
+        this.options.onFrameProcessed?.(stats);
+        return Promise.resolve();
+      },
+    );
+    const onFrameProcessed = vi.fn();
+    const transformer = new BackgroundEffectTransformer({ onFrameProcessed });
+
+    await transformer.transform(frame, controller);
+    expect(onFrameProcessed).toHaveBeenCalledWith(stats);
+  });
+
+  it("never sends the first frame on untouched", async () => {
+    // The library copies its first frame through untouched, ahead of the
+    // drawn one, unless told the first frame is past
+    const seen: boolean[] = [];
+    vi.spyOn(BackgroundTransformer.prototype, "transform").mockImplementation(
+      async function (this: BackgroundTransformer) {
+        seen.push(this.isFirstFrame);
+        return Promise.resolve();
+      },
+    );
+    const transformer = new BackgroundEffectTransformer({});
+    expect(transformer.isFirstFrame).toBe(true);
+
+    await transformer.transform(frame, controller);
+    expect(seen).toEqual([false]);
+  });
+
  it("passes frames on untouched once disabled, even after blurring", async () => {
    const transformer = new BackgroundEffectTransformer({});
    await transformer.update({ blurRadius: 15, backgroundDisabled: false });
@@ -41,18 +41,41 @@ const wasmFileset: WasmFileset = { wasmLoaderPath, wasmBinaryPath };
 * resource fetched from the public internet.
 */
 export class BackgroundEffectTransformer extends BackgroundTransformer {
-  /** Called once, when the first frame carrying an effect has been drawn. */
+  /**
+   * Called once, when the first frame carrying an effect has been drawn.
+   * This is used for drewAFrame$ to show the correct loading state.
+   */
  public onFirstFrame: (() => void) | undefined;
+  private drewAFrame = false;
+
+  public constructor(opts: BackgroundOptions) {
+    super(opts);
+    // Called by the library for a frame it drew, never for one it passed on
+    // untouched.
+    this.options.onFrameProcessed = (stats): void => {
+      opts.onFrameProcessed?.(stats);
+      if (this.drewAFrame) return;
+      this.drewAFrame = true;
+      this.onFirstFrame?.();
+    };
+  }

  public override async transform(
    frame: VideoFrame,
    controller: TransformStreamDefaultController<VideoFrame>,
  ): Promise<void> {
-    const priming = this.isFirstFrame;
+    // From the LK docs:
+    // > Render a copy of the first frame is rendered to the screen as soon as possible to act
+    // > as a less jarring initial state than a solid color while the synchronous work below
+    // > (segmentation + frame rendering) occurs.
+    // We do not want this copy (it leaks unblurred media).
+    // So we always set `isFirstFrame` to false -> never show an unprocessed frame.
+    // It does not have any impact other than setting the unprocessed frame while loading the processor.
+    //
+    // To not show the blank frame, we have our own mechanism for hiding the loading overlay:
+    // `onFirstFrame` is what the EC UI will listen to and only then show the video feed.
+    this.isFirstFrame = false;
    await super.transform(frame, controller);
-    // Cleared only once a frame has been through the segmenter; a frame
-    // passed through untouched leaves it set.
-    if (priming && !this.isFirstFrame) this.onFirstFrame?.();
  }

  /**
Author	SHA1	Message	Date
Timo K.andClaude Fable 5.1	796e9ace82	Merge branch 'main' into toger5/component-bundle-check Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>	2026-11-11 16:32:20 +01:00
renovate[bot]	96949a57da	Update ghcr.io/element-hq/element-web:develop Docker digest to 8dc3767 (#4447 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-11-11 14:47:22 +00:00
Johannes Marbach	2e05ef77a0	Merge pull request #4441 from element-hq/johannes/flakes Try to fix flaky background tests	2026-11-11 15:37:31 +01:00
Johannes Marbach	73826ec4f9	Reformat	2026-11-11 15:29:03 +01:00
Johannes Marbach	1135c02e6f	Merge branch 'main' into johannes/flakes	2026-11-11 13:53:30 +01:00
Johannes MarbachandTimo	9dc425b5f8	Apply batched suggestions from code review Improve comments Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>	2026-11-11 13:52:05 +01:00
Johannes Marbach	c1b94b62dd	Merge pull request #4434 from element-hq/johannes/intent Stabilise m.call.intent	2026-11-11 11:02:22 +01:00
Johannes Marbach	fa6efd9dad	Merge branch 'main' into johannes/intent	2026-11-11 10:45:51 +01:00
Johannes Marbach	6906404a64	Pin ubuntu image to 24.04 because 26.04 breaks Playwright, renovate should update it	2026-11-11 10:20:44 +01:00
Johannes Marbach	98e8343d0b	Stabilise m.call.intent	2026-11-11 10:10:33 +01:00
Timo	88659d6498	Merge pull request #4444 from element-hq/toger5/better-component-readme Shorten component README	2026-11-10 16:56:40 +01:00
Johannes Marbach	cfd8312e46	Try to fix flaky background tests	2026-11-09 12:20:00 +01:00
Timo K.andClaude Fable 5.1	3c8b381723	Fail the component build on what a host must not be handed A library build inlines an asset as a data URL the moment its import loses `no-inline`, and emits the standalone app's store worker the moment a module the component reaches imports it; neither warns, and the package grows by 11 MB without anyone seeing it in a diff. It had been published at 18 MB for several releases before it was measured. `scripts/check-component-bundle.mjs` now runs at the end of the component build and fails it on a data URL over 16 kB in a module a host bundles, an absolute `/assets/` reference, the store worker under `assets/`, or a main module over 4 MB, each with a message saying what to do. It passes only once both the assets and the store worker fixes are in. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>	2026-11-06 14:44:22 +01:00