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-07 00:52:28 +00:00 · 2026-11-06 14:44:22 +01:00
59 changed files with 395 additions and 2551 deletions
@@ -243,6 +243,11 @@ needs a certificate exception for `https://localhost:3001` as well (see the
 note under [Backend](#backend)). It reads the same `public/config.json` as
 `pnpm dev` if one exists, and runs with Element Call's defaults otherwise.

+`pnpm build:component` ends with `scripts/check-component-bundle.mjs`, which
+fails the build on what a host must not be handed: an asset inlined into the
+module 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.
+
 The call lays itself out for the size of the element it is mounted in, not the
 window: a host that shrinks the container to a corner of its page gets the
 picture-in-picture layout, just as a host that shrank the whole iframe used to.
@@ -26,7 +26,8 @@
  "features": {
    "feature_element_call_video_rooms": true,
    "feature_video_rooms": true,
-    "feature_group_calls": true
+    "feature_group_calls": true,
+    "feature_release_announcement": false
  },
  "default_federate": true,
  "default_theme": "light",
@@ -39,10 +40,7 @@
  },
  "setting_defaults": {
    "breadcrumbs": true,
-    "feature_group_calls": true,
-    "releaseAnnouncementData": {
-      "room_list_section": true
-    }
+    "feature_group_calls": true
  },
  "jitsi": {
    "preferred_domain": "meet.element.io"
@@ -26,7 +26,8 @@
  "features": {
    "feature_element_call_video_rooms": true,
    "feature_video_rooms": true,
-    "feature_group_calls": true
+    "feature_group_calls": true,
+    "feature_release_announcement": false
  },
  "default_federate": true,
  "default_theme": "light",
@@ -39,10 +40,7 @@
  },
  "setting_defaults": {
    "breadcrumbs": true,
-    "feature_group_calls": true,
-    "releaseAnnouncementData": {
-      "room_list_section": true
-    }
+    "feature_group_calls": true
  },
  "jitsi": {
    "preferred_domain": "meet.element.io"
@@ -19,7 +19,7 @@ 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:e063472b6bdf6d0bfa1d43dfa4ef7effee1efd2c9684daee665d1bedfe746a47
+    image: ghcr.io/element-hq/element-web:develop@sha256:a79801206c628a912d57fa6f355d5c5ab9c6c40c2d1b6208d4192678fb6e80c7
  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:e063472b6bdf6d0bfa1d43dfa4ef7effee1efd2c9684daee665d1bedfe746a47
+    image: ghcr.io/element-hq/element-web:develop@sha256:a79801206c628a912d57fa6f355d5c5ab9c6c40c2d1b6208d4192678fb6e80c7
@@ -48,8 +48,6 @@ Test what a user observes: the peer sees the change, it survives a reconnect, it
 right after a reload. Reuse `playwright/spa-helpers.ts`,
 `playwright/widget/test-helpers.ts`, `playwright/fixtures/`.

-To mark new release announcements as viewed, add them in `backend/ew.test*.config.json`.
-
 ```sh
 pnpm test                   # unit + storybook
 pnpm backend                # Synapse + LiveKit, required for e2e
@@ -3,7 +3,6 @@
    "user_menu": "User menu"
  },
  "action": {
-    "add_background_image": "Add image",
    "close": "Close",
    "copy_link": "Copy link",
    "edit": "Edit",
@@ -99,10 +98,6 @@
  },
  "disconnected_banner": "Connectivity to the server has been lost.",
  "error": {
-    "background_animated": "Animated images cannot be used as a background",
-    "background_not_an_image": "That file is not a supported image",
-    "background_not_kept": "That background could not be saved",
-    "background_undecodable": "That image could not be opened",
    "call_is_not_supported": "Call is not supported",
    "call_not_found": "Call not found",
    "call_not_found_description": "<0>That link doesn't appear to belong to any existing call. Check that you have the right link, or <2>create a new one</2>.</0>",
@@ -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",
@@ -97,7 +97,6 @@
    "copy-to-clipboard": "^3.3.3",
    "eslint-plugin-element-call": "link:eslint",
    "eslint-plugin-storybook": "^10.3.6",
-    "fake-indexeddb": "^6.2.5",
    "fetch-mock": "11.1.5",
    "i18next": "^26.0.0",
    "i18next-browser-languagedetector": "^8.0.0",
@@ -107,7 +106,7 @@
    "livekit-client": "^2.18.1",
    "lodash-es": "^4.17.21",
    "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#4cb91f3155c31f982cbb7375ca34a14fbecc7848",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01",
    "matrix-widget-api": "^1.18.0",
    "node-stdlib-browser": "^1.3.1",
    "normalize.css": "^8.0.1",
@@ -5,15 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import { expect, test, type Browser, type Page } from "@playwright/test";
+import { expect, test, type Locator, type Page } from "@playwright/test";

 import { SpaHelpers } from "./spa-helpers.ts";
-import {
-  averageColour,
-  cameraColour,
-  type Colour,
-  distance,
-} from "./utils/colour.ts";

 // Background effects need WebGL2, and headless Firefox on a CI runner has none,
 // so it rightly offers none of them.
@@ -22,13 +16,15 @@ test.skip(
  "Background effects need WebGL2, which headless Firefox on CI does not have",
 );

+type Colour = [number, number, number];
+
 test.describe("background effects", () => {
  test("pre-join preview shows the chosen effect", async ({ page }) => {
    test.slow();
    await page.goto("/");
    await SpaHelpers.createCall(page, "Effect user", "Background effects");
    const preview = page.locator("video").first();
-    const camera = await cameraColour(preview);
+    const camera = await averageColour(preview);

    await page.getByRole("button", { name: "Camera", exact: true }).click();
    const tile = page
@@ -106,747 +102,25 @@ async function drawsPerSecond(page: Page): Promise<number> {
  });
 }

-test.describe("background effects section", () => {
-  test("section stays within the call area at every size", async ({ page }) => {
-    test.setTimeout(120_000);
-    await page.goto("/");
-    await SpaHelpers.createCall(page, "Sizes user", "Background effect sizes");
-
-    for (const size of [
-      { width: 1280, height: 800 },
-      { width: 800, height: 600 },
-      { width: 600, height: 420 },
-      { width: 480, height: 360 },
-      { width: 360, height: 640 },
-    ]) {
-      await page.setViewportSize(size);
-      await page.getByRole("button", { name: "Camera", exact: true }).click();
-      const menu = page.getByRole("menu");
-      await expect(menu).toBeVisible();
-
-      const box = (await menu.boundingBox())!;
-      const where = `at ${size.width}x${size.height}`;
-      expect(box.x, where).toBeGreaterThanOrEqual(0);
-      expect(box.y, where).toBeGreaterThanOrEqual(0);
-      expect(box.x + box.width, where).toBeLessThanOrEqual(size.width);
-      expect(box.y + box.height, where).toBeLessThanOrEqual(size.height);
-
-      const last = page
-        .getByRole("group", { name: "Background effects" })
-        .getByRole("menuitemradio")
-        .last();
-      await last.scrollIntoViewIfNeeded();
-      await expect(last, where).toBeInViewport({ ratio: 1 });
-      await last.click();
-      await expect(last, where).toHaveAttribute("aria-checked", "true");
-
-      // Back to no effect for the next size, and close.
-      await page
-        .getByRole("group", { name: "Background effects" })
-        .getByRole("menuitemradio", { name: "None" })
-        .click();
-      await page.keyboard.press("Escape");
-      await expect(menu).toBeHidden();
-    }
-  });
-});
-
-test.describe("the chosen effect", () => {
-  test("chosen effect survives leaving and rejoining", async ({ page }) => {
-    test.setTimeout(120_000);
-    await page.goto("/");
-    await SpaHelpers.createCall(page, "Returning user", "Effect remembered");
-    const { camera, picture } = await chooseAndWear(page, "Background 1");
-    await page.getByTestId("lobby_joinCall").click();
-    await page.getByTestId("incall_leave").click();
-    await expect(page.getByRole("heading")).toContainText(
-      "your call has ended",
-    );
-
-    await page.goto("/");
-    await page.getByTestId("home_callName").fill("Effect remembered again");
-    await page.getByTestId("home_go").click();
-    await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
-    await page.getByRole("button", { name: "Camera", exact: true }).click();
-    const tile = page
-      .getByRole("group", { name: "Background effects" })
-      .getByRole("menuitemradio", { name: "Background 1" });
-    await expect(tile).toHaveAttribute("aria-checked", "true");
-    const preview = page.locator("video").first();
-    await expect
-      .poll(async () => distance(await averageColour(preview), picture), {
-        timeout: 60_000,
-      })
-      .toBeLessThan(distance(camera, picture) / 2);
-  });
-
-  test("second session still shows the existing error", async ({ page }) => {
-    test.setTimeout(120_000);
-    await page.goto("/");
-    await SpaHelpers.createCall(page, "Two tabs", "Effect in two tabs");
-    await chooseAndWear(page, "Background 1");
-
-    const second = await page.context().newPage();
-    await second.goto("/");
-    await expect(
-      page.getByRole("heading", { name: "Opened in another tab" }),
-    ).toBeVisible();
-  });
-});
-
-/** Chooses an effect in the lobby, and waits until the preview wears it. */
-async function chooseAndWear(
-  page: Page,
-  name: string,
-): Promise<{ camera: Colour; picture: Colour }> {
-  const preview = page.locator("video").first();
-  const camera = await cameraColour(preview);
-  await page.getByRole("button", { name: "Camera", exact: true }).click();
-  const tile = page.getByRole("menuitemradio", { name });
-  await tile.click();
-  const picture = await averageColour(tile.locator("img"));
-  await expect
-    .poll(async () => distance(await averageColour(preview), picture), {
-      timeout: 60_000,
-    })
-    .toBeLessThan(distance(camera, picture) / 2);
-  await page.keyboard.press("Escape");
-  return { camera, picture };
-}
-
-test.describe("a background of one's own", () => {
-  test("adds an image from the device", async ({ page }) => {
-    test.setTimeout(120_000);
-    await page.goto("/");
-    await SpaHelpers.createCall(page, "Adding user", "Own background");
-    const preview = page.locator("video").first();
-    const camera = await cameraColour(preview);
-    const red = await redImage(page);
-
-    await addImage(page, red);
-    const mine = page
-      .getByRole("group", { name: "Background effects" })
-      .getByRole("menuitemradio", { name: "Background 3" });
-    await expect(mine).toBeVisible();
-    await expect(mine).toHaveAttribute("aria-checked", "false");
-
-    await mine.click();
-    await expect
-      .poll(async () => distance(await averageColour(preview), RED), {
-        timeout: 60_000,
-      })
-      .toBeLessThan(distance(camera, RED) / 2);
-  });
-
-  test("adding an image makes no upload", async ({ page }) => {
-    test.setTimeout(120_000);
-    await page.goto("/");
-    await SpaHelpers.createCall(page, "Private user", "Own background kept");
-    const preview = page.locator("video").first();
-    const camera = await cameraColour(preview);
-    const red = await redImage(page);
-    const sent: { request: string; body: Buffer | null }[] = [];
-    page.on("request", (request) =>
-      sent.push({
-        request: `${request.method()} ${request.url()}`,
-        body: request.postDataBuffer(),
-      }),
-    );
-
-    await addImage(page, red);
-    await page
-      .getByRole("group", { name: "Background effects" })
-      .getByRole("menuitemradio", { name: "Background 3" })
-      .click();
-    // Kept, chosen and in force: anything that would send it has had its turn.
-    await expect
-      .poll(async () => distance(await averageColour(preview), RED), {
-        timeout: 60_000,
-      })
-      .toBeLessThan(distance(camera, RED) / 2);
-    // The file as given, and the copy kept, which is encoded anew.
-    const samples = [red, await keptBytes(page)].map((bytes) =>
-      bytes.subarray(bytes.length - 64),
-    );
-    const carriesIt = sent.filter(
-      ({ request, body }) =>
-        request.includes("/_matrix/media/") ||
-        samples.some((sample) => body?.includes(sample)),
-    );
-    expect(carriesIt.map(({ request }) => request)).toEqual([]);
-  });
-
-  test("added image survives rejoining and is gone after storage is cleared", async ({
-    page,
-  }) => {
-    test.setTimeout(120_000);
-    await page.goto("/");
-    await SpaHelpers.createCall(page, "Keeping user", "Own background again");
-    const preview = page.locator("video").first();
-    const camera = await cameraColour(preview);
-    const red = await redImage(page);
-    await addImage(page, red);
-    const mine = page
-      .getByRole("group", { name: "Background effects" })
-      .getByRole("menuitemradio", { name: "Background 3" });
-    await mine.click();
-    await page.keyboard.press("Escape");
-
-    await page.reload();
-    await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
-    await page.getByRole("button", { name: "Camera", exact: true }).click();
-    await expect(mine).toHaveAttribute("aria-checked", "true");
-    await page.keyboard.press("Escape");
-    await expect
-      .poll(async () => distance(await averageColour(preview), RED), {
-        timeout: 60_000,
-      })
-      .toBeLessThan(distance(camera, RED) / 2);
-
-    await page.evaluate(
-      async () =>
-        new Promise<void>((resolve, reject) => {
-          const request = indexedDB.deleteDatabase(
-            "element-call-background-images",
-          );
-          request.onsuccess = (): void => resolve();
-          request.onerror = (): void => reject(request.error);
-          request.onblocked = (): void => resolve();
-        }),
-    );
-    await page.reload();
-    await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
-    await page.getByRole("button", { name: "Camera", exact: true }).click();
-    await expect(
-      page.getByRole("group", { name: "Background effects" }),
-    ).toBeVisible();
-    await expect(mine).toHaveCount(0);
-    await page.keyboard.press("Escape");
-
-    await addImage(page, red);
-    await expect(mine).toBeVisible();
-  });
-
-  test("a removed image stays removed", async ({ page }) => {
-    test.setTimeout(120_000);
-    await page.goto("/");
-    await SpaHelpers.createCall(
-      page,
-      "Removing user",
-      "Own background removed",
-    );
-    await addImage(page, await redImage(page));
-    const mine = page
-      .getByRole("group", { name: "Background effects" })
-      .getByRole("menuitemradio", { name: "Background 3" });
-    await expect(mine).toHaveAttribute("aria-keyshortcuts", "Delete");
-    await mine.focus();
-    await page.keyboard.press("Delete");
-    await expect(mine).toHaveCount(0);
-
-    await page.reload();
-    await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
-    await page.getByRole("button", { name: "Camera", exact: true }).click();
-    await expect(
-      page.getByRole("group", { name: "Background effects" }),
-    ).toBeVisible();
-    await expect(mine).toHaveCount(0);
-    expect(await keptImages(page)).toEqual([]);
-  });
-});
-
-test.describe("what can be added", () => {
-  test("refuses an animated image", async ({ page }) => {
-    test.setTimeout(120_000);
-    await page.goto("/");
-    await SpaHelpers.createCall(page, "Refused user", "Animated refused");
-    await addImage(page, ANIMATED_GIF, {
-      name: "moving.gif",
-      type: "image/gif",
-    });
-
-    await expect(
-      page.getByText("Animated images cannot be used as a background"),
-    ).toBeVisible();
-    const section = page.getByRole("group", { name: "Background effects" });
-    await expect(
-      section.getByRole("menuitemradio", { name: "Background 3" }),
-    ).toHaveCount(0);
-    await expect(
-      section.getByRole("menuitemradio", { name: "None" }),
-    ).toHaveAttribute("aria-checked", "true");
-    expect(await keptImages(page)).toEqual([]);
-  });
-
-  test("reduces an oversized image", async ({ page }) => {
-    test.setTimeout(120_000);
-    await page.goto("/");
-    await SpaHelpers.createCall(page, "Large user", "Oversized reduced");
-    await addImage(page, await pngImage(page, { width: 4000, height: 3000 }));
-
-    await expect(
-      page
-        .getByRole("group", { name: "Background effects" })
-        .getByRole("menuitemradio", { name: "Background 3" }),
-    ).toBeVisible();
-    await expect(page.getByRole("alert")).toHaveCount(0);
-    const [kept] = await keptImages(page);
-    expect(kept).toMatchObject({ width: 1920, height: 1440 });
-  });
-
-  test("lays every image on an opaque ground", async ({ page }) => {
-    test.setTimeout(120_000);
-    await page.goto("/");
-    await SpaHelpers.createCall(page, "Logo user", "Transparent made opaque");
-    await addImage(
-      page,
-      await pngImage(page, { width: 320, height: 180, transparent: true }),
-    );
-
-    await expect(
-      page
-        .getByRole("group", { name: "Background effects" })
-        .getByRole("menuitemradio", { name: "Background 3" }),
-    ).toBeVisible();
-    const [kept] = await keptImages(page);
-    expect(kept.minAlpha).toBe(255);
-  });
-});
-
-/** Two frames of one pixel, red then blue. */
-const ANIMATED_GIF = Buffer.from(
-  "R0lGODlhAQABAPEAAP8AAAAA/wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQACgAAACwAAAAAAQABAAACAkQBACH5BAAKAAAALAAAAAABAAEAAAICTAEAOw==",
-  "base64",
-);
-
-/** A red PNG of the given size; transparent leaves its right half empty. */
-async function pngImage(
-  page: Page,
-  size: { width: number; height: number; transparent?: boolean },
-): Promise<Buffer> {
-  const dataUrl = await page.evaluate(({ width, height, transparent }) => {
-    const canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
-    const context = canvas.getContext("2d")!;
-    context.fillStyle = "rgb(255, 0, 0)";
-    context.fillRect(0, 0, transparent ? width / 2 : width, height);
-    return canvas.toDataURL("image/png");
-  }, size);
-  return Buffer.from(dataUrl.split(",")[1], "base64");
-}
-
-/** The images the device keeps, as it keeps them. */
-async function keptImages(
-  page: Page,
-): Promise<{ width: number; height: number; minAlpha: number }[]> {
-  return page.evaluate(async () => {
-    const db = await new Promise<IDBDatabase>((resolve, reject) => {
-      const request = indexedDB.open("element-call-background-images");
-      request.onsuccess = (): void => resolve(request.result);
-      request.onerror = (): void => reject(request.error);
-    });
-    if (!db.objectStoreNames.contains("backgrounds")) return [];
-    const kept = await new Promise<{ image: Blob }[]>((resolve, reject) => {
-      const request = db
-        .transaction("backgrounds")
-        .objectStore("backgrounds")
-        .getAll();
-      request.onsuccess = (): void => resolve(request.result);
-      request.onerror = (): void => reject(request.error);
-    });
-    db.close();
-    return Promise.all(
-      kept.map(async ({ image }) => {
-        const bitmap = await createImageBitmap(image);
-        const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
-        const context = canvas.getContext("2d")!;
-        context.drawImage(bitmap, 0, 0);
-        const { data } = context.getImageData(
-          0,
-          0,
-          bitmap.width,
-          bitmap.height,
-        );
-        let minAlpha = 255;
-        for (let i = 3; i < data.length; i += 4)
-          minAlpha = Math.min(minAlpha, data[i]);
-        return { width: bitmap.width, height: bitmap.height, minAlpha };
-      }),
-    );
-  });
-}
-
-/** The bytes of the one image the device keeps. */
-async function keptBytes(page: Page): Promise<Buffer> {
-  const base64 = await page.evaluate(
-    async () =>
-      new Promise<string>((resolve, reject) => {
-        const open = indexedDB.open("element-call-background-images");
-        open.onerror = (): void => reject(open.error);
-        open.onsuccess = (): void => {
-          const all = open.result
-            .transaction("backgrounds")
-            .objectStore("backgrounds")
-            .getAll();
-          all.onerror = (): void => reject(all.error);
-          all.onsuccess = (): void => {
-            const reader = new FileReader();
-            reader.onload = (): void =>
-              resolve((reader.result as string).split(",")[1]);
-            reader.readAsDataURL((all.result[0] as { image: Blob }).image);
-          };
-        };
-      }),
-  );
-  return Buffer.from(base64, "base64");
-}
-
-const RED: Colour = [255, 0, 0];
-
-/** A solid red PNG, unlike the camera and the shipped pictures. */
-async function redImage(page: Page): Promise<Buffer> {
-  const dataUrl = await page.evaluate(() => {
-    const canvas = document.createElement("canvas");
-    canvas.width = 320;
-    canvas.height = 180;
-    const context = canvas.getContext("2d")!;
-    context.fillStyle = "rgb(255, 0, 0)";
-    context.fillRect(0, 0, canvas.width, canvas.height);
-    return canvas.toDataURL("image/png");
-  });
-  return Buffer.from(dataUrl.split(",")[1], "base64");
-}
-
-/** Adds an image from the camera menu's add tile, leaving the menu open. */
-async function addImage(
-  page: Page,
-  image: Buffer,
-  { name, type } = { name: "mine.png", type: "image/png" },
-): Promise<void> {
-  if (!(await page.getByRole("menu").isVisible()))
-    await page.getByRole("button", { name: "Camera", exact: true }).click();
-  const chooser = page.waitForEvent("filechooser");
-  await page.getByRole("menuitem", { name: "Add image" }).click();
-  await (await chooser).setFiles({ name, mimeType: type, buffer: image });
-}
-
-test.describe("joining with a background chosen", () => {
-  test("publishes no frame of the room", async ({ browser }) => {
-    // Two first builds of the pipeline, one of them held back.
-    test.setTimeout(180_000);
-    const hostContext = await browser.newContext();
-    const host = await hostContext.newPage();
-    await recordIncomingFrames(host);
-    await host.goto("/");
-    await SpaHelpers.createCall(host, "Host", "Join with a background", true);
-    await expect(host.getByTestId("incall_videomute")).toBeEnabled({
-      timeout: 10_000,
-    });
-    const inviteLink = await SpaHelpers.getCallInviteLink(host);
-    await host.keyboard.press("Escape");
-
-    const guestContext = await browser.newContext();
-    const guest = await guestContext.newPage();
-    await guest.goto(inviteLink);
-    await guest.getByTestId("joincall_displayName").fill("Guest");
-    await guest.getByTestId("joincall_joincall").click();
-    const preview = guest.locator("video").first();
-    await expect(preview).toBeVisible();
-    const camera = await cameraColour(preview);
-    await guest.getByRole("button", { name: "Camera", exact: true }).click();
-    const tile = guest.getByRole("menuitemradio", { name: "Background 1" });
-    await tile.click();
-    const picture = await averageColour(tile.locator("img"));
-    await expect
-      .poll(async () => distance(await averageColour(preview), picture), {
-        timeout: 60_000,
-      })
-      .toBeLessThan(distance(camera, picture) / 2);
-    // Were the pipeline built again for the call's track, it would take as
-    // long as on the slower route. Routing bypasses the cache, so it waits.
-    let heldBack = 0;
-    await guest.route("**/*.tflite*", async (route) => {
-      heldBack += 1;
-      await new Promise((resolve) => setTimeout(resolve, 15_000));
-      await route.continue();
-    });
-    await guest.keyboard.press("Escape");
-    await guest.getByTestId("lobby_joinCall").click();
-
-    const guestTile = host
-      .getByTestId("videoTile")
-      .filter({ has: host.getByTestId("name_tag").getByText("Guest") });
-    await expect(guestTile.locator("video")).toBeVisible({ timeout: 60_000 });
-    // Visible can come before the stream is attached.
-    let trackId: string | undefined;
-    await expect
-      .poll(async () => {
-        trackId = await guestTile
-          .locator("video")
-          .evaluate(
-            (video: HTMLVideoElement) =>
-              (video.srcObject as MediaStream | null)?.getVideoTracks()[0]?.id,
-          );
-        return trackId;
-      })
-      .toBeDefined();
-    await expectNoFrameOfTheRoom(host, trackId!, 0, camera, picture);
-    // The join adopts the lobby's pipeline, so the model is never fetched again.
-    expect(heldBack).toBe(0);
-
-    await hostContext.close();
-    await guestContext.close();
-  });
-});
-
-test.describe("the first build", () => {
-  test("survives the camera turned off and on while it runs", async ({
-    page,
-  }) => {
-    test.setTimeout(120_000);
-    const failures: string[] = [];
-    page.on("console", (m) => {
-      if (m.text().includes("Failed to attach video processor"))
-        failures.push(m.text());
-    });
-    await page.goto("/");
-    await SpaHelpers.createCall(page, "Toggling user", "Toggle while building");
-    const preview = page.locator("video").first();
-    const camera = await cameraColour(preview);
-
-    const held = await holdBackTheModel(page);
-    await page.getByRole("button", { name: "Camera", exact: true }).click();
-    const tile = page.getByRole("menuitemradio", { name: "Background 1" });
-    await tile.click();
-    const picture = await averageColour(tile.locator("img"));
-    await page.keyboard.press("Escape");
-    // New preview tracks, each attached while the first is still building.
-    for (let i = 0; i < 2; i++) {
-      await page.getByTestId("incall_videomute").click();
-      await page.getByTestId("incall_videomute").click();
-    }
-
-    await expect
-      .poll(async () => distance(await averageColour(preview), picture), {
-        timeout: 60_000,
-      })
-      .toBeLessThan(distance(camera, picture) / 2);
-    expect(failures).toEqual([]);
-    expect(held()).toBeGreaterThan(0);
-  });
-});
-
-test.describe("turning the camera on with a background chosen", () => {
-  test("publishes no frame of the room when the camera started off", async ({
-    browser,
-  }) => {
-    test.setTimeout(120_000);
-    const { host, guest, close } = await hostAndGuest(browser);
-    const camera = await cameraColour(guest.locator("video").first());
-    await guest.getByTestId("incall_videomute").click();
-    await guest.getByTestId("lobby_joinCall").click();
-
-    const picture = await chooseBackground(guest);
-    const held = await holdBackTheModel(guest);
-    await guest.getByTestId("incall_videomute").click();
-
-    const trackId = await incomingTrackId(host);
-    await expectNoFrameOfTheRoom(host, trackId, 0, camera, picture);
-    expect(held()).toBeGreaterThan(0);
-    await close();
-  });
-
-  test("publishes no frame of the room when the camera was turned off", async ({
-    browser,
-  }) => {
-    test.setTimeout(120_000);
-    const { host, guest, close } = await hostAndGuest(browser);
-    const camera = await cameraColour(guest.locator("video").first());
-    await guest.getByTestId("lobby_joinCall").click();
-    const trackId = await incomingTrackId(host);
-    await expect
-      .poll(async () => (await framesOf(host, trackId)).length, {
-        timeout: 20_000,
-      })
-      .toBeGreaterThan(0);
-    await guest.getByTestId("incall_videomute").click();
-
-    const picture = await chooseBackground(guest);
-    const held = await holdBackTheModel(guest);
-    const before = (await framesOf(host, trackId)).length;
-    await guest.getByTestId("incall_videomute").click();
-
-    await expectNoFrameOfTheRoom(host, trackId, before, camera, picture);
-    expect(held()).toBeGreaterThan(0);
-    await close();
-  });
-});
-
-/** A host in a call, recording what it receives, and a guest in its lobby. */
-async function hostAndGuest(browser: Browser): Promise<{
-  host: Page;
-  guest: Page;
-  close: () => Promise<void>;
-}> {
-  const hostContext = await browser.newContext();
-  const host = await hostContext.newPage();
-  await recordIncomingFrames(host);
-  await host.goto("/");
-  await SpaHelpers.createCall(host, "Host", "Camera with a background", true);
-  await expect(host.getByTestId("incall_videomute")).toBeEnabled({
-    timeout: 10_000,
-  });
-  const inviteLink = await SpaHelpers.getCallInviteLink(host);
-  await host.keyboard.press("Escape");
-
-  const guestContext = await browser.newContext();
-  const guest = await guestContext.newPage();
-  await guest.goto(inviteLink);
-  await guest.getByTestId("joincall_displayName").fill("Guest");
-  await guest.getByTestId("joincall_joincall").click();
-  await expect(guest.locator("video").first()).toBeVisible();
-  return {
-    host,
-    guest,
-    close: async (): Promise<void> => {
-      await hostContext.close();
-      await guestContext.close();
-    },
-  };
-}
-
-/** Chooses the first shipped picture in the call, and answers its colour. */
-async function chooseBackground(guest: Page): Promise<Colour> {
-  // The lobby has a camera button of its own, so wait for the call's.
-  await expect(guest.getByTestId("incall_leave")).toBeVisible({
-    timeout: 30_000,
-  });
-  await expect(guest.getByTestId("incall_videomute")).toBeEnabled({
-    timeout: 10_000,
-  });
-  await guest.getByRole("button", { name: "Camera", exact: true }).click();
-  const tile = guest.getByRole("menuitemradio", { name: "Background 1" });
-  await tile.click();
-  await expect(tile).toHaveAttribute("aria-checked", "true");
-  const picture = await averageColour(tile.locator("img"));
-  await guest.keyboard.press("Escape");
-  return picture;
-}
-
-/** Makes the pipeline's first build as slow as on the slower route. */
-/** Answers how often it held the model back, which a check should see. */
-async function holdBackTheModel(page: Page): Promise<() => number> {
-  let held = 0;
-  // Routing bypasses the cache, so it waits.
-  await page.route("**/*.tflite*", async (route) => {
-    held += 1;
-    await new Promise((resolve) => setTimeout(resolve, 5_000));
-    await route.continue();
-  });
-  return () => held;
-}
-
-/** The id of the guest's camera track, as the host receives it. */
-async function incomingTrackId(host: Page): Promise<string> {
-  const guestTile = host
-    .getByTestId("videoTile")
-    .filter({ has: host.getByTestId("name_tag").getByText("Guest") });
-  await expect(guestTile.locator("video")).toBeVisible({ timeout: 60_000 });
-  // Visible can come before the stream is attached.
-  let trackId: string | undefined;
-  await expect
-    .poll(async () => {
-      trackId = await guestTile
-        .locator("video")
-        .evaluate(
-          (video: HTMLVideoElement) =>
-            (video.srcObject as MediaStream | null)?.getVideoTracks()[0]?.id,
-        );
-      return trackId;
-    })
-    .toBeDefined();
-  return trackId!;
-}
-
-/** Waits for the picture to arrive, then finds no frame of the room since. */
-async function expectNoFrameOfTheRoom(
-  host: Page,
-  trackId: string,
-  since: number,
-  camera: Colour,
-  picture: Colour,
-): Promise<void> {
-  await expect
-    .poll(
-      async () => {
-        const frames = (await framesOf(host, trackId)).slice(since);
-        // A black frame, as a track starts, is nearer the picture than the
-        // camera, but shows neither.
-        return frames.some(
-          (f) =>
-            distance(f, picture) <
-            Math.min(distance(f, camera), distance(f, [0, 0, 0])),
-        );
-      },
-      { timeout: 60_000 },
-    )
-    .toBe(true);
-  const frames = (await framesOf(host, trackId)).slice(since);
-  expect(
-    frames.filter((f) => distance(f, camera) < distance(f, picture)),
-  ).toEqual([]);
-}
-
-/**
- * Records the mean colour of every frame of every video track the page
- * receives, from the moment it arrives: a tile may attach it later than its
- * first frame.
- */
-async function recordIncomingFrames(page: Page): Promise<void> {
-  await page.addInitScript(() => {
-    const frames: Record<string, [number, number, number][]> = {};
-    (window as unknown as { receivedFrames: typeof frames }).receivedFrames =
-      frames;
-    const record = (track: MediaStreamTrack): void => {
-      if (track.kind !== "video" || frames[track.id]) return;
-      const seen: [number, number, number][] = (frames[track.id] = []);
-      const video = document.createElement("video");
-      video.muted = true;
-      video.srcObject = new MediaStream([track]);
+/** The mean colour of a video's current frame or an image, drawn small. */
+async function averageColour(element: Locator): Promise<Colour> {
+  return element.evaluate(
+    async (source: HTMLVideoElement | HTMLImageElement) => {
+      if (source instanceof HTMLImageElement) await source.decode();
      const canvas = document.createElement("canvas");
-      canvas.width = canvas.height = 16;
-      const context = canvas.getContext("2d", { willReadFrequently: true })!;
-      const step = (): void => {
-        context.drawImage(video, 0, 0, 16, 16);
-        const { data } = context.getImageData(0, 0, 16, 16);
-        const sum = [0, 0, 0];
-        for (let i = 0; i < data.length; i += 4)
-          for (let c = 0; c < 3; c++) sum[c] += data[i + c];
-        seen.push(sum.map((v) => v / (data.length / 4)) as Colour);
-        video.requestVideoFrameCallback(step);
-      };
-      video.requestVideoFrameCallback(step);
-      void video.play();
-    };
-    const Connection = window.RTCPeerConnection;
-    window.RTCPeerConnection = class extends Connection {
-      public constructor(...args: ConstructorParameters<typeof Connection>) {
-        super(...args);
-        this.addEventListener("track", (e) => record(e.track));
-      }
-    };
-  });
-}
-
-async function framesOf(page: Page, trackId: string): Promise<Colour[]> {
-  return page.evaluate(
-    (id) =>
-      (
-        window as unknown as {
-          receivedFrames: Record<string, [number, number, number][]>;
-        }
-      ).receivedFrames[id] ?? [],
-    trackId,
+      canvas.width = canvas.height = 32;
+      const context = canvas.getContext("2d")!;
+      context.drawImage(source, 0, 0, 32, 32);
+      const { data } = context.getImageData(0, 0, 32, 32);
+      const sum = [0, 0, 0];
+      for (let i = 0; i < data.length; i += 4)
+        for (let c = 0; c < 3; c++) sum[c] += data[i + c];
+      const pixels = data.length / 4;
+      return sum.map((s) => s / pixels) as Colour;
+    },
  );
 }
+
+function distance(a: Colour, b: Colour): number {
+  return Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
+}
@@ -1,85 +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, type Locator, type Page, test } from "@playwright/test";
-
-import { createUserAndRoom, resizeContainer, startHarness } from "./harness.ts";
-import { averageColour, cameraColour, expectWearing } from "../utils/colour.ts";
-
-// Background effects need WebGL2, and headless Firefox on a CI runner has none,
-// so it rightly offers none of them.
-test.skip(
-  ({ browserName }) => browserName === "firefox",
-  "Background effects need WebGL2, which headless Firefox on CI does not have",
-);
-
-/**
- * Background effects with Element Call as a component in a host page: the
- * pipeline's model and WebAssembly have to load from the component's bundle,
- * and the portalled menu has to be sized against the call, not the window.
- * Driven from the lobby, which builds the same menu and pipeline.
- */
-
-// Sign-in, crypto setup and sync happen twice before anything shows.
-test.describe.configure({ timeout: 180_000 });
-
-test("puts a picture on the call's preview", async ({ page }) => {
-  const { username, roomId } = await createUserAndRoom("effects");
-  const panes = await startHarness(page, username, roomId);
-  const pane = panes.first();
-  await resizeContainer(pane.getByTestId("call-container"), {
-    width: 900,
-    height: 480,
-  });
-  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
-    timeout: 60_000,
-  });
-  const preview = pane.locator("video").first();
-  const camera = await cameraColour(preview);
-
-  const tile = await openEffect(page, pane, "Background 1");
-  const picture = await averageColour(tile.locator("img"));
-  await tile.click();
-  await expect(tile).toHaveAttribute("aria-checked", "true");
-  await expectWearing(preview, picture, camera);
-});
-
-test("keeps every effect reachable in a small container", async ({ page }) => {
-  const { username, roomId } = await createUserAndRoom("effectsreach");
-  const panes = await startHarness(page, username, roomId);
-  const pane = panes.first();
-  const container = pane.getByTestId("call-container");
-  await resizeContainer(container, { width: 400, height: 360 });
-  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
-    timeout: 60_000,
-  });
-
-  const last = await openEffect(page, pane, "Background 2");
-  const list = page.locator("[role='menu'] div[role='none']").first();
-  expect((await list.boundingBox())!.height).toBeLessThanOrEqual(
-    (await container.boundingBox())!.height,
-  );
-  await last.scrollIntoViewIfNeeded();
-  await expect(last).toBeInViewport({ ratio: 1 });
-  await last.click();
-  await expect(last).toHaveAttribute("aria-checked", "true");
-});
-
-/** Opens a component's camera menu and returns one of its effects. */
-async function openEffect(
-  page: Page,
-  pane: Locator,
-  name: string,
-): Promise<Locator> {
-  await pane
-    .getByRole("button", { name: "Camera", exact: true })
-    .click({ timeout: 60_000 });
-  // Portalled out of the pane, so found on the page.
-  return page
-    .getByRole("group", { name: "Background effects" })
-    .getByRole("menuitemradio", { name });
-}
@@ -29,10 +29,47 @@ export interface MyFixtures {
  addUser: (username: string, host: string) => Promise<UserBaseFixture>;
 }

+// Minimal config.json for the local element-web instance
+const CONFIG_JSON = {
+  default_server_config: {
+    "m.homeserver": {
+      base_url: "https://synapse.m.localhost",
+      server_name: "synapse.m.localhost",
+    },
+  },
+
+  element_call: {
+    participant_limit: 8,
+    brand: "Element Call",
+  },
+
+  // The default language is set here for test consistency
+  setting_defaults: {
+    language: "en-GB",
+    feature_group_calls: true,
+  },
+
+  // the location tests want a map style url.
+  map_style_url:
+    "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx",
+
+  features: {
+    // We don't want to go through the feature announcement during the e2e test
+    feature_release_announcement: false,
+    feature_element_call_video_rooms: true,
+    feature_video_rooms: true,
+    feature_group_calls: true,
+  },
+};
+
 export const widgetTest = test.extend<MyFixtures>({
  // allow per-test override: `widgetTest.use({ callType: "dm" })`
  callType: ["room", { option: true }],
-  asWidget: async ({ browser, callType }, pUse) => {
+  asWidget: async ({ browser, context, callType }, pUse) => {
+    await context.route(`http://localhost:8081/config.json*`, async (route) => {
+      await route.fulfill({ json: CONFIG_JSON });
+    });
+
    const brooksDisplayName = `brooks_${Date.now()}`;
    const whistlerDisplayName = `whistler_${Date.now()}`;

@@ -72,7 +109,15 @@ export const widgetTest = test.extend<MyFixtures>({
      await TestHelpers.dismissInviteUnknownUserModal(ewPage1);

      // Accept the invite
-      await TestHelpers.openRoomInvite(ewPage2, "Welcome Room");
+      await TestHelpers.closeReleaseAnnouncement(
+        ewPage2,
+        "Introducing Sections",
+      );
+      await TestHelpers.expandAllSections(ewPage2);
+      await expect(
+        TestHelpers.roomListItem(ewPage2, "Welcome Room"),
+      ).toBeVisible();
+      await TestHelpers.roomListItem(ewPage2, "Welcome Room").click();
      await ewPage2.getByRole("button", { name: "Accept" }).click();
      await expect(
        ewPage2
@@ -80,7 +125,17 @@ export const widgetTest = test.extend<MyFixtures>({
          .getByRole("heading", { name: "Welcome Room" }),
      ).toBeVisible();
    } else if (callType === "dm") {
-      await TestHelpers.chooseFromRoomListNewMenu(ewPage1, "Start chat");
+      await TestHelpers.closeReleaseAnnouncement(
+        ewPage1,
+        "Introducing Sections",
+      );
+
+      await ewPage1
+        .getByRole("navigation", { name: "Room list" })
+        .getByRole("button", { name: "New", exact: true })
+        .click();
+
+      await ewPage1.getByRole("menuitem", { name: "Start chat" }).click();
      await ewPage1.getByRole("textbox", { name: "Search" }).click();
      await ewPage1.getByRole("textbox", { name: "Search" }).fill(whistlerMxId);
      await ewPage1.getByRole("button", { name: "Go" }).click();
@@ -102,7 +157,12 @@ export const widgetTest = test.extend<MyFixtures>({
      ).toBeVisible();

      // Accept the DM invite from brooks
-      await TestHelpers.openRoomInvite(ewPage2, brooksDisplayName);
+      await TestHelpers.closeReleaseAnnouncement(
+        ewPage2,
+        "Introducing Sections",
+      );
+      await TestHelpers.expandAllSections(ewPage2);
+      await TestHelpers.roomListItem(ewPage2, brooksDisplayName).click();
      await ewPage2.getByRole("button", { name: "Start chatting" }).click();
    }

@@ -1,55 +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, type Locator } from "@playwright/test";
-
-export type Colour = [number, number, number];
-
-/** The camera's colour, once the preview is showing it rather than nothing. */
-export async function cameraColour(preview: Locator): Promise<Colour> {
-  await expect
-    .poll(async () => Math.max(...(await averageColour(preview))))
-    .toBeGreaterThan(40);
-  return averageColour(preview);
-}
-
-/** The mean colour of a video's current frame or an image, drawn small. */
-export async function averageColour(element: Locator): Promise<Colour> {
-  return element.evaluate(
-    async (source: HTMLVideoElement | HTMLImageElement) => {
-      if (source instanceof HTMLImageElement) await source.decode();
-      const canvas = document.createElement("canvas");
-      canvas.width = canvas.height = 32;
-      const context = canvas.getContext("2d")!;
-      context.drawImage(source, 0, 0, 32, 32);
-      const { data } = context.getImageData(0, 0, 32, 32);
-      const sum = [0, 0, 0];
-      for (let i = 0; i < data.length; i += 4)
-        for (let c = 0; c < 3; c++) sum[c] += data[i + c];
-      const pixels = data.length / 4;
-      return sum.map((s) => s / pixels) as Colour;
-    },
-  );
-}
-
-export function distance(a: Colour, b: Colour): number {
-  return Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
-}
-
-/** Waits until a preview shows a picture rather than the camera. */
-export async function expectWearing(
-  preview: Locator,
-  picture: Colour,
-  camera: Colour,
-): Promise<void> {
-  // Long enough for the first effect of a session to be built.
-  await expect
-    .poll(async () => distance(await averageColour(preview), picture), {
-      timeout: 60_000,
-    })
-    .toBeLessThan(distance(camera, picture) / 2);
-}
@@ -1,43 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, test } from "@playwright/test";
-
-import { widgetTest } from "../fixtures/widget-user.ts";
-import { TestHelpers } from "./test-helpers.ts";
-import { averageColour, cameraColour, expectWearing } from "../utils/colour.ts";
-
-// Background effects need WebGL2, and headless Firefox on a CI runner has none,
-// so it rightly offers none of them.
-test.skip(
-  ({ browserName }) => browserName === "firefox",
-  "Background effects need WebGL2, which headless Firefox on CI does not have",
-);
-
-widgetTest(
-  "puts a picture on the preview inside Element Web",
-  async ({ asWidget }) => {
-    test.slow();
-    const { brooks } = asWidget;
-    await TestHelpers.startCallInCurrentRoom(brooks.page, false);
-    const frame = brooks.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
-    await expect(frame.getByTestId("lobby_joinCall")).toBeVisible();
-    const preview = frame.locator("video").first();
-    const camera = await cameraColour(preview);
-
-    await frame.getByRole("button", { name: "Camera", exact: true }).click();
-    const tile = frame
-      .getByRole("group", { name: "Background effects" })
-      .getByRole("menuitemradio", { name: "Background 1" });
-    const picture = await averageColour(tile.locator("img"));
-    await tile.click();
-    await expect(tile).toHaveAttribute("aria-checked", "true");
-    await expectWearing(preview, picture, camera);
-  },
-);
@@ -153,40 +153,29 @@ export class TestHelpers {
    return { page, clientHandle, mxId };
  }

-  // Dismisses the toasts a fresh device gets after sign-in.
-  //
-  // Toasts stack and only the top one can be dismissed, so look
-  // at what is on top each time.
+  // Dismisses any toasts that appear on startup, such as "Failed to load service worker" or "Back up your chats".
+  // Toast can be stacked, and only the top one can be dismiss, so just look at what is on top and
+  // dismiss (if part of expected toats)
  public static async dismissStartupToasts(page: Page): Promise<void> {
-    const expectedToasts: {
-      title: string;
-      button: string;
-      confirm?: string;
-    }[] = [
+    const expectedToasts = [
      { title: "Failed to load service worker", button: "OK" },
-      { title: "Verify this device", button: "Later" },
      { title: "Back up your chats", button: "Not now" },
-      {
-        title: "Turn on key storage",
-        button: "Dismiss",
-        confirm: "Yes, dismiss",
-      },
-      { title: "Notifications", button: "Dismiss" },
+      { title: "Turn on key storage", button: "Dismiss" },
      { title: "Element does not support this browser", button: "Dismiss" },
    ];

    const toast = page.locator(".mx_Toast_toast");
-    const toastTitle = toast.locator(".mx_Toast_title h2");

    // eslint-disable-next-line no-constant-condition
    while (true) {
      try {
        await toast.waitFor({ state: "visible", timeout: 700 });
-        const title = await toastTitle.textContent();
-        if (!title) break;
+        const title = await toast.locator(".mx_Toast_title h2").textContent();

        // Find the matching toast config
-        const toastConfig = expectedToasts.find((t) => title.includes(t.title));
+        const toastConfig = expectedToasts.find((t) =>
+          title?.includes(t.title),
+        );

        if (toastConfig) {
          // Bounded so that a renamed button leaves the toast in place and the
@@ -194,16 +183,6 @@ export class TestHelpers {
          await toast
            .getByRole("button", { name: toastConfig.button })
            .click({ timeout: 5000 });
-          if (toastConfig.confirm) {
-            const dialog = page.getByRole("dialog");
-            await dialog
-              .getByRole("button", { name: toastConfig.confirm })
-              .click({ timeout: 5000 });
-            await expect(dialog).toBeHidden({ timeout: 5000 });
-          }
-          // The same element shows the next toast a moment after the click, so
-          // reading it straight away acts on the dismissed one a second time
-          await expect(toastTitle).not.toHaveText(title, { timeout: 5000 });
        } else {
          // Unknown toast. We don't want to act on unknown toasts
          break;
@@ -215,6 +194,20 @@ 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 expandAllSections(page: Page): Promise<void> {
    try {
      await page
@@ -230,7 +223,16 @@ export class TestHelpers {
    page: Page,
    andInvite: string[] = [],
  ): Promise<void> {
-    await TestHelpers.chooseFromRoomListNewMenu(page, "New Room");
+    await TestHelpers.closeReleaseAnnouncement(page, "Introducing Sections");
+
+    await page
+      .getByRole("navigation", { name: "Room list" })
+      .getByRole("button", { name: "New", exact: true })
+      .click();
+
+    await page.getByRole("menuitem", { name: "New Room" }).click({
+      timeout: 5000,
+    });
    await page.getByRole("textbox", { name: "Name" }).fill(name);
    await page.getByRole("button", { name: "Create room" }).click();
    await expect(page.getByText("You created this room.")).toBeVisible({
@@ -257,24 +259,6 @@ export class TestHelpers {
    }
  }

-  /**
-   * Opens the room list's "New" menu and picks the given item.
-   *
-   * Driven by keyboard, as a toast arriving late sits over the button and
-   * swallows clicks.
-   */
-  public static async chooseFromRoomListNewMenu(
-    page: Page,
-    itemName: string,
-  ): Promise<void> {
-    await TestHelpers.dismissStartupToasts(page);
-    await page
-      .getByRole("navigation", { name: "Room list" })
-      .getByRole("button", { name: "New", exact: true })
-      .press("Enter");
-    await page.getByRole("menuitem", { name: itemName }).press("Enter");
-  }
-
  /**
   * Accepts a room invite using the room name.
   * Locatest the invite in the room list.
@@ -284,7 +268,9 @@ export class TestHelpers {
    roomName: string,
    page: Page,
  ): Promise<void> {
-    await TestHelpers.openRoomInvite(page, roomName);
+    await TestHelpers.closeReleaseAnnouncement(page, "Introducing Sections");
+    await TestHelpers.expandAllSections(page);
+    await TestHelpers.roomListItem(page, roomName).click({ timeout: 10000 });
    await page.getByRole("button", { name: "Accept" }).click({
      timeout: 5000,
    });
@@ -390,28 +376,6 @@ export class TestHelpers {
    return page.locator(`[aria-label^="Open room ${roomName}"]`);
  }

-  /**
-   * Opens a pending invite from the room list by its room name.
-   *
-   * Element Web collapses the Invites section every time it appears, so it is
-   * expanded here once the invite has arrived.
-   */
-  public static async openRoomInvite(
-    page: Page,
-    roomName: string,
-  ): Promise<void> {
-    const invitesSection = page.getByRole("button", {
-      name: "Toggle Invites section",
-    });
-    await expect(invitesSection).toBeVisible({ timeout: 10000 });
-    // Toasts sit over the top of the room list, where this header is.
-    await TestHelpers.dismissStartupToasts(page);
-    if ((await invitesSection.getAttribute("aria-expanded")) !== "true") {
-      await invitesSection.click();
-    }
-    await TestHelpers.roomListItem(page, roomName).click({ timeout: 10000 });
-  }
-
  /**
   * Switches to a room in the room list by its name.
   * @param page - The EW page
@@ -8,7 +8,7 @@ overrides:
  '@livekit/components-core>rxjs': ^7.8.1
  '@livekit/track-processors>@mediapipe/tasks-vision': ^0.10.18
  tar: ^7.5.11
-  minimatch: ^11.0.0
+  minimatch: ^10.2.3
  glob: ^10.5.0
  qs: ^6.15.2
  js-yaml: ^4.2.0
@@ -160,9 +160,6 @@ importers:
      eslint-plugin-storybook:
        specifier: ^10.3.6
        version: 10.6.2(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
-      fake-indexeddb:
-        specifier: ^6.2.5
-        version: 6.2.5
      fetch-mock:
        specifier: 11.1.5
        version: 11.1.5(node-fetch@2.7.0)
@@ -191,8 +188,8 @@ importers:
        specifier: ^1.9.1
        version: 1.9.2
      matrix-js-sdk:
-        specifier: github:matrix-org/matrix-js-sdk#4cb91f3155c31f982cbb7375ca34a14fbecc7848
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/4cb91f3155c31f982cbb7375ca34a14fbecc7848
+        specifier: github:matrix-org/matrix-js-sdk#a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01
      matrix-widget-api:
        specifier: ^1.18.0
        version: 1.20.0
@@ -1145,9 +1142,6 @@ packages:
    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
    engines: {node: '>=12'}

-  '@isaacs/nonrecursive-glob-match@1.0.3':
-    resolution: {integrity: sha512-SI7kyKHq4XXDRozw+r9GlRZkia1ZkFrpLW98r2IC2Bpr8YkFGE3fvjzmxCG0x78A++69HmDNrDvSMYBZmHGpKA==}
-
  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0':
    resolution: {integrity: sha512-qvsTEwEFefhdirGOPnu9Wp6ChfIwy2dBCRuETU3uE+4cC+PFoxMSiiEhxk4lOluA34eARHA0OxqsEUYDqRMgeQ==}
    peerDependencies:
@@ -3533,8 +3527,8 @@ packages:
  boolbase@1.0.0:
    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}

-  brace-expansion@5.0.12:
-    resolution: {integrity: sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ==}
+  brace-expansion@5.0.9:
+    resolution: {integrity: sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==}
    engines: {node: 20 || >=22}

  braces@3.0.3:
@@ -4054,10 +4048,6 @@ packages:
    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
    engines: {node: '>=12.0.0'}

-  fake-indexeddb@6.2.5:
-    resolution: {integrity: sha512-CGnyrvbhPlWYMngksqrSSUT1BAVP49dZocrHuK0SvtR0D5TMs5wP0o3j7jexDJW01KSadjBp1M/71o/KR3nD1w==}
-    engines: {node: '>=18'}
-
  fast-deep-equal@3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}

@@ -4734,8 +4724,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/4cb91f3155c31f982cbb7375ca34a14fbecc7848:
-    resolution: {gitHosted: true, integrity: sha512-3OCLpmzR0zO9TsTdUcxhN8dhy8ZpoZqGzbAQFESaDU60nJXrJRUKiKJAB61KzimVdy2xNscLl4M4NGdqX3aNuw==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/4cb91f3155c31f982cbb7375ca34a14fbecc7848}
+  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}
    version: 45.0.0
    engines: {node: '>=22.0.0'}

@@ -4771,9 +4761,9 @@ packages:
  minimalistic-crypto-utils@1.0.1:
    resolution: {integrity: sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==}

-  minimatch@11.0.4:
-    resolution: {integrity: sha512-/UJ1dEoVQTjPNDh6SGlUo+ueLMmoHTas4q+8yaAR/5t6nLAIiBDJtoYUh20IYleix7ehiQkgczb84PE3uzHkxg==}
-    engines: {node: 20 || >=22}
+  minimatch@10.2.6:
+    resolution: {integrity: sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==}
+    engines: {node: 18 || 20 || >=22}

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

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

  p-try@2.2.0:
@@ -6905,7 +6895,7 @@ snapshots:
      ignore: 5.3.2
      import-fresh: 3.3.1
      js-yaml: 4.3.1
-      minimatch: 11.0.4
+      minimatch: 10.2.6
      strip-json-comments: 3.1.1
    transitivePeerDependencies:
      - supports-color
@@ -6984,7 +6974,7 @@ snapshots:
    dependencies:
      '@humanwhocodes/object-schema': 2.0.3
      debug: 4.4.3(supports-color@7.2.0)
-      minimatch: 11.0.4
+      minimatch: 10.2.6
    transitivePeerDependencies:
      - supports-color

@@ -7120,8 +7110,6 @@ snapshots:
      wrap-ansi: 8.1.0
      wrap-ansi-cjs: wrap-ansi@7.0.0

-  '@isaacs/nonrecursive-glob-match@1.0.3': {}
-
  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@5.9.3)(vite@8.2.4(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))':
    dependencies:
      glob: 10.5.0
@@ -8781,7 +8769,7 @@ snapshots:
      '@typescript-eslint/types': 8.69.0
      '@typescript-eslint/visitor-keys': 8.69.0
      debug: 4.4.3(supports-color@7.2.0)
-      minimatch: 11.0.4
+      minimatch: 10.2.6
      semver: 7.8.5
      tinyglobby: 0.2.17
      ts-api-utils: 2.5.0(typescript@5.9.3)
@@ -8796,7 +8784,7 @@ snapshots:
      '@typescript-eslint/types': 8.72.0
      '@typescript-eslint/visitor-keys': 8.72.0
      debug: 4.4.3(supports-color@7.2.0)
-      minimatch: 11.0.4
+      minimatch: 10.2.6
      semver: 7.8.5
      tinyglobby: 0.2.17
      ts-api-utils: 2.5.0(typescript@5.9.3)
@@ -9121,7 +9109,7 @@ snapshots:

  boolbase@1.0.0: {}

-  brace-expansion@5.0.12:
+  brace-expansion@5.0.9:
    dependencies:
      balanced-match: 4.0.4

@@ -9666,7 +9654,7 @@ snapshots:
      json-stable-stringify-without-jsonify: 1.0.1
      levn: 0.4.1
      lodash.merge: 4.6.2
-      minimatch: 11.0.4
+      minimatch: 10.2.6
      natural-compare: 1.4.0
      optionator: 0.9.4
      strip-ansi: 6.0.1
@@ -9724,8 +9712,6 @@ snapshots:

  expect-type@1.4.0: {}

-  fake-indexeddb@6.2.5: {}
-
  fast-deep-equal@3.1.3: {}

  fast-glob@3.3.3:
@@ -9786,7 +9772,7 @@ snapshots:

  filelist@1.0.6:
    dependencies:
-      minimatch: 11.0.4
+      minimatch: 10.2.6

  fill-range@7.1.1:
    dependencies:
@@ -9886,7 +9872,7 @@ snapshots:
    dependencies:
      foreground-child: 3.3.1
      jackspeak: 3.4.3
-      minimatch: 11.0.4
+      minimatch: 10.2.6
      minipass: 7.1.3
      package-json-from-dist: 1.0.1
      path-scurry: 1.11.1
@@ -10011,7 +9997,7 @@ snapshots:
      jiti: 2.7.0
      jsonc-parser: 3.3.1
      magic-string: 1.2.3
-      minimatch: 11.0.4
+      minimatch: 10.2.6
      ora: 9.4.1
      react: 19.2.8
      react-i18next: 17.0.13(i18next@26.4.1(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3)
@@ -10409,7 +10395,7 @@ snapshots:

  matrix-events-sdk@0.0.1: {}

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

@@ -10454,10 +10440,9 @@ snapshots:

  minimalistic-crypto-utils@1.0.1: {}

-  minimatch@11.0.4:
+  minimatch@10.2.6:
    dependencies:
-      '@isaacs/nonrecursive-glob-match': 1.0.3
-      brace-expansion: 5.0.12
+      brace-expansion: 5.0.9

  minimist@1.2.8: {}

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

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

@@ -27,7 +27,7 @@ overrides:
  # Security fixes:
  # - https://github.com/advisories/GHSA-7r86-cg39-jmmj
  # - https://github.com/advisories/GHSA-23c5-xmqv-rm74
-  "minimatch": "^11.0.0"
+  "minimatch": "^10.2.3"
  # Security fix: https://github.com/element-hq/element-call/security/dependabot/109
  "glob": "^10.5.0"
  # Security fixes:
@@ -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);
+}
@@ -184,7 +184,6 @@ export function createRTCParticipation(
          encryptMedia: encryptionSystem.kind !== E2eeType.NONE,
          matrixRTCMode,
          sendNotificationType: options.sendNotificationType,
-          callIntent: options.callIntent,
          applicationData: options.applicationData,
          timings,
          delayedLeave,
@@ -12,7 +12,6 @@ Please see LICENSE in the repository root for full details.
 */

 import {
-  type RTCCallIntent,
  type RTCNotificationType,
  type Transport,
 } from "matrix-js-sdk/lib/matrixrtc";
@@ -104,14 +103,11 @@ 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.
+   * 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.
   */
  applicationData?: Record<string, unknown>;
  /** Timings the host has configured; the defaults otherwise. */
@@ -291,7 +287,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. `intent`. */
+  /** What the member's application says about itself, e.g. `m.call.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: undefined,
+      applicationData: {},
      manageMediaKeys: true,
      delayedLeaveEventRestartMs: 300_000,
      delayedLeaveEventDelayMs: 3_600_000,
@@ -95,14 +95,13 @@ describe("joinJsSdkSession", () => {
    );
  });

-  it("passes the call intent and application data through and sends sticky events in Matrix 2.0 mode", () => {
+  it("lifts the call intent out of the application data 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,
-      callIntent: "m.audio",
-      applicationData: { custom: 1 },
+      applicationData: { "m.call.intent": "audio", custom: 1 },
      timings: defaultSessionTimings,
      delayedLeave: defaultSessionTimings.delayedLeave,
    });
@@ -111,7 +110,7 @@ describe("joinJsSdkSession", () => {
      ownMemberMock,
      [transportWithAlias],
      expect.objectContaining({
-        callIntent: "m.audio",
+        callIntent: "audio",
        applicationData: { custom: 1 },
        unstableSendStickyEvents: true,
      }),
@@ -125,8 +124,7 @@ describe("joinJsSdkSession", () => {
    joinJsSdkSession("!room:example.org", s, ownMemberMock, transport, {
      encryptMedia: true,
      matrixRTCMode: MatrixRTCMode.Matrix_2_0,
-      callIntent: "m.audio",
-      applicationData: { custom: 1 },
+      applicationData: { "m.call.intent": "audio", custom: 1 },
      timings: defaultSessionTimings,
      delayedLeave: defaultSessionTimings.delayedLeave,
    });
@@ -135,7 +133,7 @@ describe("joinJsSdkSession", () => {
      ownMemberMock,
      [transport],
      expect.objectContaining({
-        callIntent: "m.audio",
+        callIntent: "audio",
        applicationData: { custom: 1 },
        unstableSendStickyEvents: true,
      }),
@@ -23,7 +23,6 @@ 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. */
@@ -44,12 +43,15 @@ 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
@@ -76,7 +78,7 @@ export function joinJsSdkSession(
    {
      notificationType: sendNotificationType,
      callIntent,
-      applicationData,
+      applicationData: rest,
      manageMediaKeys: encryptMedia,
      delayedLeaveEventRestartMs: delayedLeave.restart_ms,
      delayedLeaveEventDelayMs: delayedLeave.delay_ms,
@@ -225,51 +225,6 @@ describe("createLivekitMediaTrack", () => {
    );
  });

-  // LiveKit's media stream track is the processed one while a processor runs,
-  // and that one names no device; the camera behind it does
-  it.each([
-    { deviceId: "cam-1", switches: false },
-    { deviceId: "cam-2", switches: true },
-  ])(
-    "leaves a processed camera alone unless its device changes: $deviceId",
-    async ({ deviceId, switches }) => {
-      vi.stubGlobal("MediaStreamTrack", class {});
-      onTestFinished(() => {
-        vi.unstubAllGlobals();
-      });
-      const camera = Object.assign(Object.create(LocalVideoTrack.prototype), {
-        source: Track.Source.Camera,
-        _mediaStreamTrack: {
-          readyState: "live",
-          label: "",
-          getSettings: () => ({ deviceId: "cam-1" }),
-        },
-        // What LiveKit shows as the track, with no device of its own
-        processor: {
-          processedTrack: { label: "", getSettings: () => ({}) },
-        },
-      }) as LocalVideoTrack;
-      const switchActiveDevice = vi.fn().mockResolvedValue(true);
-      const { participant, publication, room } = fakes({
-        track: camera as unknown as FakeTrack,
-      });
-      const track = createLocalLivekitMediaTrack(
-        scope,
-        Object.assign(participant, {
-          isLocal: true,
-        }) as unknown as LocalParticipant,
-        publication as unknown as TrackPublication,
-        Object.assign(room, { switchActiveDevice }),
-        vi.fn(),
-      );
-
-      await track.setDevice(deviceId);
-      expect(switchActiveDevice.mock.calls).toEqual(
-        switches ? [["videoinput", deviceId, false]] : [],
-      );
-    },
-  );
-
  // LiveKit stops a camera that is turned off; the processor is built when it
  // is turned on again
  it.each([
@@ -199,13 +199,11 @@ export function createLocalLivekitMediaTrack(
        throw new MatrixRTCError(`A ${base.source} track has no device`);
      // LiveKit decides whether to restart by the constraints it keeps, which
      // a browser that does not echo the device id back (Firefox) leaves
-      // without one; a track already on the device is left alone here. Asked
-      // of the camera track itself: with a processor on, LiveKit's media
-      // stream track is the processed one, which names no device
+      // without one; a track already on the device is left alone here
      const current = publication.track;
      if (
        current instanceof LocalTrack &&
-        (await current.getDeviceId(false)) === deviceId
+        current.mediaStreamTrack.getSettings().deviceId === deviceId
      )
        return;
      await room.switchActiveDevice(
@@ -18,8 +18,6 @@ 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";
@@ -181,40 +179,40 @@ export function configurationForIntent(intent: UserIntent): UrlConfiguration {
  switch (intent) {
    case UserIntent.StartNewCall:
      preset.skipLobby = false;
-      preset.callIntent = RTC_CALL_INTENT_VIDEO;
+      preset.callIntent = "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 = RTC_CALL_INTENT_VIDEO;
+      preset.callIntent = "video";
      break;
    case UserIntent.StartNewCallVoice:
      preset.skipLobby = false;
-      preset.callIntent = RTC_CALL_INTENT_AUDIO;
+      preset.callIntent = "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 = RTC_CALL_INTENT_AUDIO;
+      preset.callIntent = "audio";
      break;
    case UserIntent.StartNewCallDMVoice:
-      preset.callIntent = RTC_CALL_INTENT_AUDIO;
+      preset.callIntent = "audio";
    // Fall through
    case UserIntent.StartNewCallDM:
      preset.skipLobby = true;
      preset.sendNotificationType = "ring";
      preset.autoLeaveWhenOthersLeft = true;
      preset.waitForCallPickup = true;
-      preset.callIntent = preset.callIntent ?? RTC_CALL_INTENT_VIDEO;
+      preset.callIntent = preset.callIntent ?? "video";
      break;
    case UserIntent.JoinExistingCallDMVoice:
-      preset.callIntent = RTC_CALL_INTENT_AUDIO;
+      preset.callIntent = "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 ?? RTC_CALL_INTENT_VIDEO;
+      preset.callIntent = preset.callIntent ?? "video";
      break;
    // Non widget usecase defaults
    default:
@@ -21,10 +21,6 @@ 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";
@@ -279,7 +275,7 @@ describe("UrlParams", () => {
      ).toMatchObject({
        ...startNewCallDefaults("desktop"),
        skipLobby: false,
-        callIntent: RTC_CALL_INTENT_VIDEO,
+        callIntent: "video",
      });
    });

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

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

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

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

@@ -381,7 +377,7 @@ describe("UrlParams", () => {
        skipLobby: true,
        autoLeaveWhenOthersLeft: true,
        waitForCallPickup: false,
-        callIntent: RTC_CALL_INTENT_AUDIO,
+        callIntent: "audio",
      });
    });
  });
@@ -90,42 +90,3 @@ Please see LICENSE in the repository root for full details.
  text-align: center;
  overflow-wrap: anywhere;
 }
-
-.removable {
-  position: relative;
-  display: flex;
-  min-inline-size: 0;
-}
-
-.removable > .tile {
-  flex: 1;
-}
-
-/* Clear of the target for choosing the tile. */
-.remove {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  translate: 20% -20%;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  inline-size: 28px;
-  block-size: 28px;
-  border-radius: 50%;
-  background: var(--cpd-color-bg-canvas-default);
-  color: var(--cpd-color-icon-critical-primary);
-  box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
-  cursor: pointer;
-}
-
-.remove:hover {
-  background: var(--cpd-color-bg-critical-subtle-hovered);
-  box-shadow: 0 0 0 var(--cpd-border-width-1)
-    var(--cpd-color-border-critical-subtle);
-}
-
-.removable:hover .remove,
-.removable:focus-within .remove {
-  display: flex;
-}
@@ -5,16 +5,14 @@ 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 KeyboardEvent, type ReactElement } from "react";
+import { type FC, type ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { InlineSpinner, MenuItem, Tooltip } from "@vector-im/compound-web";
+import { InlineSpinner, MenuItem } from "@vector-im/compound-web";
 import {
  BlockIcon,
  BlurIcon,
  CheckCircleSolidIcon,
-  CloseIcon,
-  PlusIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";

 import styles from "./BackgroundEffectGrid.module.css";
@@ -29,8 +27,6 @@ export interface BackgroundEffectGridItem {
  kind: "none" | "blur" | "image";
  /** For kind "image". */
  imageUrl?: string;
-  /** Whether it is the user's to remove. */
-  removable?: boolean;
 }

 interface Props {
@@ -42,12 +38,6 @@ interface Props {
  settling?: boolean;
  /** Id of the text saying what the user should know before choosing. */
  describedBy?: string;
-  /** Offers to add a background of one's own. Omit to leave that tile out. */
-  onAdd?: () => void;
-  addLabel?: string;
-  /** Removes a removable one, never the one in force. Omit to offer none. */
-  onRemove?: (id: string) => void;
-  removeLabel?: string;
 }

 /**
@@ -61,10 +51,6 @@ export const BackgroundEffectGrid: FC<Props> = ({
  onSelect,
  settling = false,
  describedBy,
-  onAdd,
-  addLabel,
-  onRemove,
-  removeLabel,
 }) => {
  const { t } = useTranslation();
  const choose = (id: string): void => {
@@ -80,30 +66,7 @@ export const BackgroundEffectGrid: FC<Props> = ({
          : t("background_effects.numbered", { n: ++pictures });
    const checked = effect.id === selected;
    const disabled = onSelect === undefined && effect.kind !== "none";
-    const remove =
-      effect.removable && !checked && onRemove !== undefined
-        ? (): void => onRemove(effect.id)
-        : undefined;
-    const removeProps =
-      remove === undefined
-        ? {}
-        : {
-            "aria-keyshortcuts": "Delete",
-            onKeyDown: (e: KeyboardEvent): void => {
-              if (e.key !== "Delete" && e.key !== "Backspace") return;
-              e.preventDefault();
-              remove();
-            },
-          };
-    const content = (
-      <TileContent
-        effect={effect}
-        label={label}
-        checked={checked}
-        settling={checked && settling}
-      />
-    );
-    const tile = (
+    return (
      <MenuItem
        key={effect.id}
        role="menuitemradio"
@@ -125,57 +88,21 @@ export const BackgroundEffectGrid: FC<Props> = ({
                choose(effect.id);
              }
        }
-        {...removeProps}
      >
-        {content}
+        <TileContent
+          effect={effect}
+          label={label}
+          checked={checked}
+          settling={checked && settling}
+        />
      </MenuItem>
    );
-    if (remove === undefined) return tile;
-    // Beside the item, not in it: inside, the item takes the press first and
-    // the tile is chosen instead.
-    return (
-      <div key={effect.id} className={styles.removable}>
-        {tile}
-        <Tooltip label={removeLabel ?? ""}>
-          {/* Not a control of its own, so the menu keeps one keyboard model:
-              the keyboard reaches the same action through Delete. */}
-          <span aria-hidden className={styles.remove} onClick={remove}>
-            <CloseIcon width={20} height={20} />
-          </span>
-        </Tooltip>
-      </div>
-    );
  });

-  // A command rather than a choice, so an item beside the radios.
-  const addContent = (
-    <>
-      <span aria-hidden className={styles.swatch}>
-        <PlusIcon width={24} height={24} />
-      </span>
-      <VisuallyHidden>{addLabel}</VisuallyHidden>
-    </>
-  );
-  const addTile =
-    onAdd === undefined ? null : (
-      <MenuItem
-        label={null}
-        hideChevron
-        className={styles.tile}
-        onSelect={(e) => {
-          e.preventDefault();
-          onAdd();
-        }}
-      >
-        {addContent}
-      </MenuItem>
-    );
-
  return (
    // A group of its own, as the section's can't carry the description.
    <div role="group" aria-describedby={describedBy} className={styles.grid}>
      {tiles}
-      {addTile}
    </div>
  );
 };
@@ -127,20 +127,16 @@ export const Default: Story = {
    selectBackgroundEffect: fn(),
    backgroundEffect: "blur",
    backgroundEffects: [
-      { id: "none", kind: "none", removable: false },
-      { id: "blur", kind: "blur", removable: false },
+      { id: "none", kind: "none" },
+      { id: "blur", kind: "blur" },
      ...shippedBackgrounds.map((background) => ({
        id: `image:${background.id}`,
        kind: "image" as const,
        imageUrl: background.imagePath,
-        removable: false,
      })),
    ],
    backgroundEffectNotice: undefined,
    backgroundEffectSettling: false,
-    backgroundImageRefusal: undefined,
-    addBackgroundImage: fn(),
-    removeBackgroundEffect: fn(),
    hangup: fn(),
    buttonSize: "lg",
    showFooter: true,
@@ -33,11 +33,6 @@ import { useBehavior } from "../useBehavior";
 import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
 import { LayoutSwitch } from "../room/LayoutSwitch";
 import { type BackgroundEffectGridItem } from "./BackgroundEffectGrid";
-import { type UnusableReason } from "../tracks/backgroundImages";
-
-export interface BackgroundImageRefusal {
-  reason: UnusableReason | "not-kept";
-}

 export interface AudioOutputSwitcher {
  targetOutput: string;
@@ -65,10 +60,6 @@ export interface FooterActions {
  toggleVideo: (() => void) | undefined;
  /** Undefined where background effects can't be chosen. */
  selectBackgroundEffect: ((id: string) => void) | undefined;
-  /** Undefined where no background can be added. */
-  addBackgroundImage: ((file: File) => void) | undefined;
-  /** Removes an added background by its option id; never the one in force. */
-  removeBackgroundEffect: ((id: string) => void) | undefined;
  toggleScreenSharing: (() => void) | undefined;
  /** Also controls if the settings button is visible */
  openSettings: (() => void) | undefined;
@@ -90,8 +81,6 @@ export interface FooterState {
  backgroundEffectNotice: "unavailable" | "slow" | undefined;
  /** Whether the first effect chosen is still being prepared. */
  backgroundEffectSettling: boolean;
-  /** Why the last file offered couldn't be kept, if it couldn't. */
-  backgroundImageRefusal: BackgroundImageRefusal | undefined;
  showFooter: boolean;

  /* This is needed for WindowMode = "flat" */
@@ -179,23 +168,6 @@ export const CallFooter: FC<FooterProps> = ({
  const selectBackgroundEffect = useBehavior(vm.selectBackgroundEffect$);
  const backgroundEffectNotice = useBehavior(vm.backgroundEffectNotice$);
  const backgroundEffectSettling = useBehavior(vm.backgroundEffectSettling$);
-  const addBackgroundImage = useBehavior(vm.addBackgroundImage$);
-  const removeBackgroundEffect = useBehavior(vm.removeBackgroundEffect$);
-  const refusal = useBehavior(vm.backgroundImageRefusal$);
-  const refusalMessage = useMemo(() => {
-    switch (refusal?.reason) {
-      case undefined:
-        return undefined;
-      case "not-an-image":
-        return { text: t("error.background_not_an_image") };
-      case "animated":
-        return { text: t("error.background_animated") };
-      case "undecodable":
-        return { text: t("error.background_undecodable") };
-      case "not-kept":
-        return { text: t("error.background_not_kept") };
-    }
-  }, [refusal, t]);
  const backgroundEffects = useBehavior(vm.backgroundEffects$);
  const buttonSize = useBehavior(vm.buttonSize$);
  const showLogo = useBehavior(vm.showLogo$);
@@ -262,9 +234,6 @@ export const CallFooter: FC<FooterProps> = ({
        selectedBackgroundEffect={backgroundEffect}
        onSelectBackgroundEffect={selectBackgroundEffect}
        backgroundEffectSettling={backgroundEffectSettling}
-        onAddBackgroundImage={addBackgroundImage}
-        onRemoveBackgroundEffect={removeBackgroundEffect}
-        backgroundImageRefusal={refusalMessage}
        backgroundEffectNotice={
          backgroundEffectNotice === "unavailable"
            ? t("background_effects.unavailable")
@@ -8,12 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { BehaviorSubject } from "rxjs";

-import {
-  flushPromises,
-  testScope,
-  mockMuteStates,
-  mockMediaDevices,
-} from "../utils/test";
+import { testScope, mockMuteStates, mockMediaDevices } from "../utils/test";
 import { constant } from "../state/Behavior";
 import type { CallViewModel } from "../state/CallViewModel/CallViewModel";
 import type { Layout } from "../state/layout-types";
@@ -26,13 +21,6 @@ import {
 import { HeaderStyle } from "../UrlParams";
 import { backgroundEffect as backgroundEffectSetting } from "../settings/settings";
 import { shippedBackgrounds } from "../tracks/backgroundEffectCatalog";
-import type * as BackgroundImages from "../tracks/backgroundImages";
-import {
-  type AddedBackground,
-  addedBackgrounds,
-  maxAddedBackgrounds,
-  UnusableImage,
-} from "../tracks/backgroundImages";

 const platformMock = vi.hoisted(() => vi.fn(() => "desktop"));
 vi.mock("../Platform", () => ({
@@ -49,22 +37,6 @@ vi.mock("@livekit/track-processors", () => ({
  supportsModernBackgroundProcessors: (): boolean => modernRouteMock(),
 }));

-const store = vi.hoisted(() => ({
-  add: vi.fn<(file: Blob) => Promise<string>>(),
-  remove: vi.fn<(id: string) => Promise<void>>(),
-}));
-vi.mock("../tracks/backgroundImages", async (original) => {
-  const { BehaviorSubject } = await import("rxjs");
-  return {
-    ...(await original<typeof BackgroundImages>()),
-    addedBackgrounds: {
-      added$: new BehaviorSubject<AddedBackground[] | undefined>([]),
-      add: store.add,
-      remove: store.remove,
-    },
-  };
-});
-
 const outputSelectionMock = vi.hoisted(() => vi.fn(() => true));
 vi.mock("livekit-client", () => ({
  supportsAudioOutputSelection: (): boolean => outputSelectionMock(),
@@ -291,7 +263,6 @@ describe("createCallFooterViewModel", () => {
    it("offers nothing where the browser itself cannot run them", () => {
      sdkSupportMock.mockReturnValue(false);
      expect(lobbyOn("desktop").selectBackgroundEffect$.value).toBeUndefined();
-      expect(lobbyOn("desktop").addBackgroundImage$.value).toBeUndefined();
    });

    it("puts no effect in force where the browser cannot run them", () => {
@@ -322,29 +293,17 @@ describe("createCallFooterViewModel", () => {
      expect(lobbyOn("desktop").backgroundEffectNotice$.value).toBeUndefined();
    });

-    it("offers every effect in order, the added ones removable", () => {
+    it("offers every effect in order", () => {
      sdkSupportMock.mockReturnValue(true);
-      const added$ = addedBackgrounds.added$ as BehaviorSubject<
-        AddedBackground[] | undefined
-      >;
-      added$.next([{ id: "mine", url: "blob:mine" }]);
      expect(lobbyOn("desktop").backgroundEffects$.value).toEqual([
-        { id: "none", kind: "none", removable: false },
-        { id: "blur", kind: "blur", removable: false },
+        { id: "none", kind: "none" },
+        { id: "blur", kind: "blur" },
        ...shippedBackgrounds.map((background) => ({
          id: `image:${background.id}`,
          kind: "image",
          imageUrl: background.imagePath,
-          removable: false,
        })),
-        {
-          id: "added:mine",
-          kind: "image",
-          imageUrl: "blob:mine",
-          removable: true,
-        },
      ]);
-      added$.next([]);
    });

    it("says they are unavailable where they cannot be chosen", () => {
@@ -371,62 +330,6 @@ describe("createCallFooterViewModel", () => {
      expect(vm.backgroundEffectSettling$.value).toBe(false);
    });

-    it("adding is unavailable at the limit", () => {
-      sdkSupportMock.mockReturnValue(true);
-      const added$ = addedBackgrounds.added$ as BehaviorSubject<
-        AddedBackground[] | undefined
-      >;
-      const vm = lobbyOn("desktop");
-      expect(vm.addBackgroundImage$.value).toBeDefined();
-      added$.next(
-        Array.from({ length: maxAddedBackgrounds }, (_, i) => ({
-          id: `${i}`,
-          url: `blob:${i}`,
-        })),
-      );
-      expect(vm.addBackgroundImage$.value).toBeUndefined();
-      added$.next(added$.value!.slice(1));
-      expect(vm.addBackgroundImage$.value).toBeDefined();
-      added$.next([]);
-    });
-
-    it("says why each refused file was refused", async () => {
-      sdkSupportMock.mockReturnValue(true);
-      const vm = lobbyOn("desktop");
-      store.add.mockRejectedValue(new UnusableImage("animated"));
-      vm.addBackgroundImage$.value!(new File(["x"], "a.gif"));
-      await flushPromises();
-      const first = vm.backgroundImageRefusal$.value;
-      expect(first).toEqual({ reason: "animated" });
-
-      // The same again is a refusal of its own, so it is shown again.
-      vm.addBackgroundImage$.value!(new File(["x"], "a.gif"));
-      await flushPromises();
-      expect(vm.backgroundImageRefusal$.value).toEqual({ reason: "animated" });
-      expect(vm.backgroundImageRefusal$.value).not.toBe(first);
-
-      store.add.mockRejectedValue(new Error("quota"));
-      vm.addBackgroundImage$.value!(new File(["x"], "b.png"));
-      await flushPromises();
-      expect(vm.backgroundImageRefusal$.value).toEqual({ reason: "not-kept" });
-
-      store.add.mockResolvedValue("kept");
-      vm.addBackgroundImage$.value!(new File(["x"], "c.png"));
-      await flushPromises();
-      expect(vm.backgroundImageRefusal$.value).toBeUndefined();
-    });
-
-    it("never removes the background in force", () => {
-      sdkSupportMock.mockReturnValue(true);
-      store.remove.mockResolvedValue();
-      const vm = lobbyOn("desktop");
-      backgroundEffectSetting.setValue("added:worn");
-      vm.removeBackgroundEffect$.value!("added:worn");
-      expect(store.remove).not.toHaveBeenCalled();
-      vm.removeBackgroundEffect$.value!("added:spare");
-      expect(store.remove).toHaveBeenCalledWith("spare");
-    });
-
    it("availability is the same before and during a call", () => {
      for (const supported of [true, false]) {
        sdkSupportMock.mockReturnValue(supported);
@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */

 import {
-  BehaviorSubject,
  combineLatest,
  distinctUntilChanged,
  map,
@@ -18,19 +17,12 @@ import {
  supportsBackgroundProcessors,
  supportsModernBackgroundProcessors,
 } from "@livekit/track-processors";
-import { logger } from "matrix-js-sdk/lib/logger";

 import {
  parseEffect,
  serializeEffect,
  shippedBackgrounds,
 } from "../tracks/backgroundEffectCatalog";
-import {
-  type AddedBackground,
-  addedBackgrounds,
-  maxAddedBackgrounds,
-  UnusableImage,
-} from "../tracks/backgroundImages";

 import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { type MenuOptions } from "./MediaMuteAndSwitchButton";
@@ -45,7 +37,7 @@ import { type MuteStates } from "../state/MuteStates";
 import { createStaticViewModel, type ViewModel } from "../state/ViewModel";
 import { HeaderStyle } from "../UrlParams";
 import { platform } from "../Platform";
-import { type BackgroundImageRefusal, type FooterSnapshot } from "./CallFooter";
+import { type FooterSnapshot } from "./CallFooter";
 import { type BackgroundEffectGridItem } from "./BackgroundEffectGrid";

 /**
@@ -104,9 +96,6 @@ function buildDeviceBehaviors(
  | "backgroundEffects$"
  | "backgroundEffectNotice$"
  | "backgroundEffectSettling$"
-  | "addBackgroundImage$"
-  | "backgroundImageRefusal$"
-  | "removeBackgroundEffect$"
 > {
  const options$ = (
    available$: Behavior<Map<string, MenuOptions["label"]>>,
@@ -128,10 +117,6 @@ function buildDeviceBehaviors(
  const offered$ = disableSwitcher$.pipe(
    map((switcherDisabled) => !switcherDisabled && supported),
  );
-  // A new object for each refusal, so the same one twice is shown twice.
-  const refusal$ = new BehaviorSubject<BackgroundImageRefusal | undefined>(
-    undefined,
-  );
  return {
    audioOptions$: scope.behavior(options$(mediaDevices.audioInput.available$)),
    selectedAudio$: scope.behavior(
@@ -173,11 +158,7 @@ function buildDeviceBehaviors(
        ),
      ),
    ),
-    backgroundEffects$: scope.behavior(
-      addedBackgrounds.added$.pipe(
-        map((added) => backgroundEffectChoices(added ?? [])),
-      ),
-    ),
+    backgroundEffects$: constant(backgroundEffectChoices()),
    backgroundEffectNotice$: scope.behavior(
      offered$.pipe(
        map((offered) =>
@@ -189,44 +170,6 @@ function buildDeviceBehaviors(
      backgroundEffectSettling$.pipe(distinctUntilChanged()),
      false,
    ),
-    // Kept and offered, not put on: that waits for the user to choose it.
-    addBackgroundImage$: scope.behavior(
-      combineLatest([offered$, addedBackgrounds.added$]).pipe(
-        map(([offered, added]) =>
-          offered && (added?.length ?? 0) < maxAddedBackgrounds
-            ? (file: File): void => {
-                refusal$.next(undefined);
-                addedBackgrounds.add(file).catch((e) => {
-                  logger.warn("Could not keep that background", e);
-                  refusal$.next({
-                    reason: e instanceof UnusableImage ? e.reason : "not-kept",
-                  });
-                });
-              }
-            : undefined,
-        ),
-      ),
-    ),
-    backgroundImageRefusal$: refusal$,
-    // Never the one in force: taking it away would leave nothing chosen.
-    removeBackgroundEffect$: scope.behavior(
-      offered$.pipe(
-        map((offered) =>
-          offered
-            ? (optionId: string): void => {
-                const effect = parseEffect(optionId);
-                if (effect.kind !== "added") return;
-                if (backgroundEffectSetting.getValue() === optionId) return;
-                addedBackgrounds
-                  .remove(effect.id)
-                  .catch((e) =>
-                    logger.warn("Could not remove that background", e),
-                  );
-              }
-            : undefined,
-        ),
-      ),
-    ),
  };
 }

@@ -394,23 +337,14 @@ export function createLobbyFooterViewModel(
  };
 }

-function backgroundEffectChoices(
-  added: AddedBackground[],
-): BackgroundEffectGridItem[] {
+function backgroundEffectChoices(): BackgroundEffectGridItem[] {
  return [
-    { id: serializeEffect({ kind: "none" }), kind: "none", removable: false },
-    { id: serializeEffect({ kind: "blur" }), kind: "blur", removable: false },
+    { id: serializeEffect({ kind: "none" }), kind: "none" },
+    { id: serializeEffect({ kind: "blur" }), kind: "blur" },
    ...shippedBackgrounds.map((background) => ({
      id: serializeEffect({ kind: "shipped", id: background.id }),
      kind: "image" as const,
      imageUrl: background.imagePath,
-      removable: false,
-    })),
-    ...added.map((background) => ({
-      id: serializeEffect({ kind: "added", id: background.id }),
-      kind: "image" as const,
-      imageUrl: background.url,
-      removable: true,
    })),
  ];
 }
@@ -93,7 +93,3 @@ Please see LICENSE in the repository root for full details.
  flex-shrink: 0;
  color: var(--cpd-color-icon-secondary);
 }
-
-.refusal {
-  margin: var(--cpd-space-2x) var(--cpd-space-4x) 0;
-}
@@ -198,7 +198,6 @@ export const VideoUnmute: Story = {
    backgroundEffects: effects,
    selectedBackgroundEffect: "none",
    onSelectBackgroundEffect: fn(),
-    onAddBackgroundImage: fn(),
  },
 };

@@ -242,11 +241,6 @@ export const BackgroundEffects: Story = {
        true,
      );

-    const add = within(section).getByRole("menuitem", { name: "Add image" });
-    await expect(
-      tiles[3].compareDocumentPosition(add) & Node.DOCUMENT_POSITION_FOLLOWING,
-    ).toBeTruthy();
-
    await userEvent.click(menu.getByRole("menuitemradio", { name: "Blur" }));
    await expect(args.onSelectBackgroundEffect).toHaveBeenCalledWith("blur");
    await expect(menu.getByRole("menu")).toBeVisible();
@@ -347,160 +341,6 @@ export const BackgroundEffectsSettling: Story = {
  },
 };

-/** A file that can't be used: said where it was chosen, and nothing changes. */
-export const BackgroundImageRefused: Story = {
-  args: {
-    ...VideoUnmute.args,
-    selectedBackgroundEffect: "blur",
-    backgroundEffectNotice:
-      "Background effects run slowly on this platform, which may cause your video to stutter.",
-    backgroundImageRefusal: { text: "That file is not a supported image" },
-  },
-  decorators: [
-    (Story): JSX.Element => (
-      <WithACallArea blockSize={300}>
-        <Story />
-      </WithACallArea>
-    ),
-  ],
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Camera" }));
-    const menu = within(document.body);
-    const message = await menu.findByText("That file is not a supported image");
-    const list = document.body.querySelector<HTMLElement>(
-      `.${styles.deviceList}`,
-    )!;
-    await expect(list.scrollHeight).toBeGreaterThan(list.clientHeight);
-    const scrollport = list.getBoundingClientRect();
-    const shown = message.getBoundingClientRect();
-    await expect(shown.bottom).toBeLessThanOrEqual(scrollport.bottom + 1);
-    await expect(shown.top).toBeGreaterThanOrEqual(scrollport.top - 1);
-    await expect(menu.queryByText(/run slowly/)).toBeNull();
-    await expect(
-      menu.getByRole("menuitemradio", { name: "Blur" }),
-    ).toHaveAttribute("aria-checked", "true");
-  },
-};
-
-/** A flat picture, for backgrounds of one's own. */
-function swatch(colour: string): string {
-  return `data:image/svg+xml,${encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="9"><rect width="16" height="9" fill="${colour}"/></svg>`,
-  )}`;
-}
-
-/** One's own backgrounds are removable, never the one in force. */
-export const AddedBackgroundsCanBeRemoved: Story = {
-  args: {
-    ...VideoUnmute.args,
-    backgroundEffects: [
-      ...effects,
-      {
-        id: "added:one",
-        kind: "image",
-        imageUrl: swatch("#c2410c"),
-        removable: true,
-      },
-      {
-        id: "added:two",
-        kind: "image",
-        imageUrl: swatch("#1d4ed8"),
-        removable: true,
-      },
-    ],
-    selectedBackgroundEffect: "added:one",
-    onRemoveBackgroundEffect: fn(),
-  },
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Camera" }));
-    const body = within(document.body);
-
-    const inForce = await body.findByRole("menuitemradio", {
-      name: "Background 3",
-    });
-    await expect(inForce).not.toHaveAttribute("aria-keyshortcuts");
-
-    const other = body.getByRole("menuitemradio", { name: "Background 4" });
-    await expect(other).toHaveAttribute("aria-keyshortcuts", "Delete");
-    other.focus();
-    await userEvent.keyboard("{Delete}");
-    await expect(args.onRemoveBackgroundEffect).toHaveBeenCalledWith(
-      "added:two",
-    );
-
-    const wrapper = other.parentElement!;
-    await userEvent.hover(wrapper);
-    const cross = wrapper.querySelector<HTMLElement>(
-      "[aria-hidden]:last-child",
-    )!;
-    const probe = document.createElement("span");
-    probe.style.color = "var(--cpd-color-icon-critical-primary)";
-    cross.append(probe);
-    const critical = getComputedStyle(probe).color;
-    probe.remove();
-    await expect(getComputedStyle(cross).color).toBe(critical);
-    const tile = other.getBoundingClientRect();
-    const box = cross.getBoundingClientRect();
-    await expect(box.right).toBeGreaterThan(tile.right);
-    await expect(box.top).toBeLessThan(tile.top);
-
-    await userEvent.hover(cross);
-    await waitFor(async () =>
-      expect(
-        [...document.body.querySelectorAll("div")].some(
-          (d) => d.textContent === "Remove" && d.offsetParent !== null,
-        ),
-      ).toBe(true),
-    );
-  },
-};
-
-/** Removing by pointer while the selection really changes. */
-export const RemovingWithLiveSelection: Story = {
-  args: AddedBackgroundsCanBeRemoved.args,
-  render: function WithLiveSelection(args): JSX.Element {
-    const [selected, setSelected] = useState("none");
-    const [offered, setOffered] = useState(args.backgroundEffects ?? []);
-    return (
-      <MediaMuteAndSwitchButton
-        {...args}
-        backgroundEffects={offered}
-        selectedBackgroundEffect={selected}
-        onSelectBackgroundEffect={setSelected}
-        onRemoveBackgroundEffect={(id): void =>
-          setOffered((current) => current.filter((o) => o.id !== id))
-        }
-      />
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Camera" }));
-    const body = within(document.body);
-
-    const tile = await body.findByRole("menuitemradio", {
-      name: "Background 4",
-    });
-    await userEvent.hover(tile);
-    const cross = tile.parentElement!.querySelector<HTMLElement>(
-      "[aria-hidden]:last-child",
-    )!;
-    await expect(cross).toBeVisible();
-    await userEvent.click(cross);
-
-    await waitFor(async () =>
-      expect(
-        body.queryByRole("menuitemradio", { name: "Background 4" }),
-      ).toBeNull(),
-    );
-    await expect(
-      body.getByRole("menuitemradio", { name: "None" }),
-    ).toHaveAttribute("aria-checked", "true");
-  },
-};
-
 /** In a short call the effects scroll into view with the list. */
 export const BackgroundEffectsScrollWhenTheyDoNotFit: Story = {
  args: {
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import { afterEach, describe, expect, onTestFinished, test, vi } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import { axe } from "vitest-axe";
 import {
  act,
@@ -367,120 +367,6 @@ describe("MediaMuteAndSwitchButton", () => {
    expect(onSelectBackgroundEffect).not.toHaveBeenCalled();
  });

-  test("added images are chosen like shipped ones", async () => {
-    const user = userEvent.setup();
-    const onSelectBackgroundEffect = vi.fn();
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="video"
-        enabled={true}
-        options={[{ label: { type: "name", name: "Camera 1" }, id: "cam1" }]}
-        selectedOption="cam1"
-        backgroundEffects={[
-          ...effects,
-          {
-            id: "added:mine",
-            kind: "image",
-            imageUrl: "",
-          },
-        ]}
-        selectedBackgroundEffect="none"
-        onSelectBackgroundEffect={onSelectBackgroundEffect}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Camera" }));
-    const section = screen.getByRole("group", { name: "Background effects" });
-    await user.click(
-      within(section).getByRole("menuitemradio", { name: "Background 3" }),
-    );
-    expect(onSelectBackgroundEffect).toHaveBeenCalledWith("added:mine");
-  });
-
-  test("adds the file chosen from the add tile, and stays open", async () => {
-    const user = userEvent.setup();
-    const onAddBackgroundImage = vi.fn();
-    const pick = vi
-      .spyOn(HTMLInputElement.prototype, "click")
-      .mockImplementation(() => {});
-    try {
-      const { getByRole, container } = renderComponent(
-        <MediaMuteAndSwitchButton
-          iconsAndLabels="video"
-          enabled={true}
-          options={[{ label: { type: "name", name: "Camera 1" }, id: "cam1" }]}
-          selectedOption="cam1"
-          backgroundEffects={effects}
-          selectedBackgroundEffect="none"
-          onSelectBackgroundEffect={vi.fn()}
-          onAddBackgroundImage={onAddBackgroundImage}
-        />,
-      );
-
-      await user.click(getByRole("button", { name: "Camera" }));
-      await user.click(screen.getByRole("menuitem", { name: "Add image" }));
-      expect(pick).toHaveBeenCalled();
-      // The picker takes the focus, which would otherwise close the menu.
-      await user.keyboard("{Escape}");
-      expect(screen.getByRole("menu")).toBeInTheDocument();
-
-      const file = new File(["x"], "mine.png", { type: "image/png" });
-      // What the picker hands back; the open menu blocks pointer events.
-      fireEvent.change(
-        container.querySelector<HTMLInputElement>("input[type=file]")!,
-        { target: { files: [file] } },
-      );
-      expect(onAddBackgroundImage).toHaveBeenCalledWith(file);
-      screen.getByRole("menuitemradio", { name: "None", checked: true });
-    } finally {
-      pick.mockRestore();
-    }
-  });
-
-  test("a refusal can be dismissed and does not outlive the menu", async () => {
-    const user = userEvent.setup();
-    // jsdom lays nothing out, so has nothing to scroll.
-    const scroll = Element.prototype.scrollIntoView;
-    Element.prototype.scrollIntoView = vi.fn();
-    onTestFinished(() => {
-      Element.prototype.scrollIntoView = scroll;
-    });
-    const menu = (refusal?: { text: string }): JSX.Element =>
-      withProviders(
-        <MediaMuteAndSwitchButton
-          iconsAndLabels="video"
-          enabled={true}
-          options={[{ label: { type: "name", name: "Camera 1" }, id: "cam1" }]}
-          selectedOption="cam1"
-          backgroundEffects={effects}
-          selectedBackgroundEffect="blur"
-          onSelectBackgroundEffect={vi.fn()}
-          onAddBackgroundImage={vi.fn()}
-          backgroundImageRefusal={refusal}
-        />,
-      );
-    const { rerender, getByRole } = render(menu());
-    await user.click(getByRole("button", { name: "Camera" }));
-
-    rerender(menu({ text: "That file is not a supported image" }));
-    expect(
-      screen.getByText("That file is not a supported image"),
-    ).toBeVisible();
-    screen.getByRole("menuitemradio", { name: "Blur", checked: true });
-    await user.click(screen.getByRole("button", { name: "Close" }));
-    expect(screen.queryByText("That file is not a supported image")).toBeNull();
-
-    // The next refusal is shown, even if it says the same.
-    rerender(menu({ text: "That file is not a supported image" }));
-    expect(
-      screen.getByText("That file is not a supported image"),
-    ).toBeVisible();
-
-    await user.keyboard("{Escape}");
-    await user.click(getByRole("button", { name: "Camera" }));
-    expect(screen.queryByText("That file is not a supported image")).toBeNull();
-  });
-
  test("offers the background effects in a phone's drawer", async () => {
    const userAgent = vi
      .spyOn(navigator, "userAgent", "get")
@@ -8,7 +8,6 @@ Please see LICENSE in the repository root for full details.
 import {
  useCallback,
  useId,
-  useRef,
  useState,
  type CSSProperties,
  type FC,
@@ -16,7 +15,6 @@ import {
  type ReactElement,
 } from "react";
 import {
-  Alert,
  Button,
  Menu,
  MenuItem,
@@ -81,12 +79,6 @@ export interface MediaMuteAndSwitchButtonProps {
  backgroundEffectNotice?: string;
  /** Whether the first effect chosen is still being prepared. */
  backgroundEffectSettling?: boolean;
-  /** Called with the file chosen from the add tile. Omit to leave it out. */
-  onAddBackgroundImage?: (file: File) => void;
-  /** Removes a removable effect, never the one in force. */
-  onRemoveBackgroundEffect?: (id: string) => void;
-  /** Why the last file offered couldn't be used; a new object each time. */
-  backgroundImageRefusal?: { text: string };
  /**
   * For any toggle and option this method will be called.
   * So toggles need to be implemented by listening here and setting the right toggle item to `enabled`
@@ -121,9 +113,6 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
  onSelectBackgroundEffect,
  backgroundEffectNotice,
  backgroundEffectSettling,
-  onAddBackgroundImage,
-  onRemoveBackgroundEffect,
-  backgroundImageRefusal,
  onSelect,
 }) => {
  // Requested but not yet selected. Keyed by kind too, since Chrome uses
@@ -133,42 +122,11 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
    id: string;
  } | null>(null);
  const [menuOpen, setMenuOpen] = useState(false);
-  // The file picker takes the focus, which the menu reads as a click
-  // elsewhere; it is held open until the picker is done.
-  const choosingFile = useRef(false);
-  const fileInput = useRef<HTMLInputElement | null>(null);
-  // A refusal is about the attempt that caused it: shown until dismissed or
-  // until the menu closes, and again for the next one.
-  const [seenRefusal, setSeenRefusal] = useState<object>();
-  const refusal =
-    backgroundImageRefusal !== seenRefusal ? backgroundImageRefusal : undefined;
-  const onOpenChange = useCallback(
-    (open: boolean): void => {
-      if (!open && choosingFile.current) return;
-      setMenuOpen(open);
-      // Drop a request that never arrived.
-      if (!open) setPlannedSelection(null);
-      if (!open) setSeenRefusal(backgroundImageRefusal);
-    },
-    [backgroundImageRefusal],
-  );
-  // Scrolled to as it appears, as the list may be scrolled away from it.
-  const scrollIntoView = useCallback((element: HTMLElement | null): void => {
-    element?.scrollIntoView({ block: "nearest" });
+  const onOpenChange = useCallback((open: boolean): void => {
+    setMenuOpen(open);
+    // Drop a request that never arrived.
+    if (!open) setPlannedSelection(null);
  }, []);
-  const watchFileInput = useCallback(
-    (input: HTMLInputElement | null): (() => void) | undefined => {
-      fileInput.current = input;
-      if (input === null) return;
-      // Dismissing the picker fires cancel, which React doesn't type.
-      const done = (): void => {
-        choosingFile.current = false;
-      };
-      input.addEventListener("cancel", done);
-      return (): void => input.removeEventListener("cancel", done);
-    },
-    [],
-  );
  const isBusy = busy ?? false;
  const { t } = useTranslation();
  const devices = useMediaDevices();
@@ -368,21 +326,6 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
    >
      {/* The mute button lives inside */}
      {button}
-      {onAddBackgroundImage !== undefined && (
-        <input
-          ref={watchFileInput}
-          type="file"
-          accept="image/*"
-          hidden
-          onChange={(e) => {
-            const file = e.target.files?.[0];
-            // Cleared, so the same file can be chosen twice in a row.
-            e.target.value = "";
-            choosingFile.current = false;
-            if (file) onAddBackgroundImage(file);
-          }}
-        />
-      )}
      <Menu
        className={styles.menu}
        // Named for screen readers only: each section has its own heading.
@@ -451,39 +394,14 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
                describedBy={
                  backgroundEffectNotice === undefined ? undefined : noticeId
                }
-                onAdd={
-                  onAddBackgroundImage === undefined
-                    ? undefined
-                    : (): void => {
-                        choosingFile.current = true;
-                        fileInput.current?.click();
-                      }
-                }
-                addLabel={t("action.add_background_image")}
-                onRemove={onRemoveBackgroundEffect}
-                removeLabel={t("action.remove")}
              />
              {/* In the list, so the menu grows no taller for it. */}
-              {refusal !== undefined && (
-                <div
-                  ref={scrollIntoView}
-                  role="none"
-                  className={styles.refusal}
-                >
-                  <Alert
-                    type="critical"
-                    title={refusal.text}
-                    onClose={(): void => setSeenRefusal(refusal)}
-                  />
+              {backgroundEffectNotice !== undefined && (
+                <div id={noticeId} role="none" className={styles.notice}>
+                  <InfoIcon width={20} height={20} />
+                  <span>{backgroundEffectNotice}</span>
                </div>
              )}
-              {refusal === undefined &&
-                backgroundEffectNotice !== undefined && (
-                  <div id={noticeId} role="none" className={styles.notice}>
-                    <InfoIcon width={20} height={20} />
-                    <span>{backgroundEffectNotice}</span>
-                  </div>
-                )}
            </MenuScrollSection>
          )}
        </MenuScrollArea>
@@ -95,19 +95,6 @@ describe("Config.initWith", () => {
    expect(Config.get().ssla).toBe("https://example.invalid/ssla");
  });

-  it("falls back to the defaults when fetching config.json rejects", async () => {
-    // A rejected promise is what a webview gives for a missing local file.
-    vi.spyOn(globalThis, "fetch").mockRejectedValue(
-      new TypeError("Load failed"),
-    );
-    vi.spyOn(logger, "info").mockImplementation(() => {});
-    Reflect.set(Config, "internalInstance", undefined);
-
-    await expect(Config.init()).resolves.toBeUndefined();
-
-    expect(Config.get().media_quality).toEqual(DEFAULT_CONFIG.media_quality);
-  });
-
  it("replaces a config initialized earlier", () => {
    Config.initWith({ ssla: "https://first.invalid/ssla" });
    Config.initWith({ ssla: "https://second.invalid/ssla" });
@@ -140,20 +140,13 @@ export function validateConfig(config: ConfigOptions): ConfigOptions {
 }

 async function downloadConfig(fetchTarget: string): Promise<ConfigOptions> {
-  let response: Response;
-  try {
-    response = await fetch(fetchTarget);
-  } catch (e) {
-    // The embedded package ships no config.json, and some webviews (Element X
-    // iOS) reject the fetch of a missing local file rather than answering 404.
-    logger.info(`No config at ${fetchTarget}, using defaults`, e);
-    // resolveConfig merges in the defaults.
-    return {};
-  }
+  const response = await fetch(fetchTarget);

  if (isFailure(response)) {
-    // resolveConfig merges in the defaults.
-    return {};
+    // Lack of a config isn't an error, we should just use the defaults.
+    // Also treat a blank config as no config, assuming the status code is 0, because we don't get 404s from file:
+    // URIs so this is the only way we can not fail if the file doesn't exist when loading from a file:// URI.
+    return DEFAULT_CONFIG;
  }

  return response.json();
@@ -825,7 +825,9 @@ export function rtcParticipationOptions(
  const session = config.matrix_rtc_session;
  return {
    sendNotificationType: urlParams.sendNotificationType,
-    callIntent: urlParams.callIntent,
+    applicationData: urlParams.callIntent
+      ? { "m.call.intent": urlParams.callIntent }
+      : undefined,
    timings: {
      syncDisconnectGracePeriodMs: config.sync_disconnect_grace_period_ms,
      networkErrorRetryMs: session.network_error_retry_ms,
@@ -8,7 +8,6 @@ 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";
@@ -40,7 +39,7 @@ test("ringtone plays on loop while ringing", () => {
    userId: alice.userId,
    displayName$: constant("Alice"),
    mxcAvatarUrl$: constant(undefined),
-    intent: RTC_CALL_INTENT_AUDIO,
+    intent: "audio",
    pickupState$,
  });

@@ -7,11 +7,7 @@ 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 {
-  RTC_CALL_INTENT_AUDIO,
-  RTC_CALL_INTENT_VIDEO,
-  type RTCCallIntent,
-} from "matrix-js-sdk/lib/matrixrtc";
+import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";

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

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

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

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

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

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

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

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

    // Emit the base device list, the speaker should be selected
    availableSource$.next(BASE_DEVICE_LIST);
@@ -423,9 +419,7 @@ 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(
-      RTC_CALL_INTENT_VIDEO,
-    );
+    const controlledAudioOutput = createAudioControlledOutput("video");

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

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

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

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

    availableSource$.next(BT_HEADSET_BASE_DEVICE_LIST);

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

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

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

@@ -105,7 +102,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. "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 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 controls - The controls provided by the hosting application to control the audio routing and notify of user actions.
   */
  public constructor(
@@ -319,7 +316,7 @@ export class AndroidControlledAudioOutput implements MediaDevice<
    this.logger.debug(
      `Android routing logic intent: ${this.initialIntent} finding best default...`,
    );
-    if (this.initialIntent === RTC_CALL_INTENT_AUDIO) {
+    if (this.initialIntent === "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,
@@ -15,7 +15,6 @@ import {
  type BackgroundEffectsOptions,
  type BackgroundEffectsState,
 } from "./BackgroundEffects";
-import { type AddedBackground } from "../tracks/backgroundImages";
 import { shippedBackgrounds } from "../tracks/backgroundEffectCatalog";
 import { flushPromises, testScope, withTestScheduler } from "../utils/test";

@@ -70,8 +69,6 @@ describe("the pipeline's state", () => {
      const effects = createBackgroundEffects(testScope(), {
        supported: true,
        effect$: behavior(effect, { n: "none", b: "blur" }),
-        setEffect: vi.fn(),
-        added$: new BehaviorSubject<AddedBackground[] | undefined>([]),
        pipeline: fakePipeline().pipeline,
        transformer,
      });
@@ -97,8 +94,6 @@ describe("the pipeline's state", () => {

 describe("background effects", () => {
  let effect$: BehaviorSubject<string>;
-  let added$: BehaviorSubject<AddedBackground[] | undefined>;
-  let setEffect: (raw: string) => void;
  let fake: ReturnType<typeof fakePipeline>;

  function build(
@@ -107,8 +102,6 @@ describe("background effects", () => {
    return createBackgroundEffects(testScope(), {
      supported: true,
      effect$,
-      setEffect,
-      added$,
      pipeline: fake.pipeline,
      transformer: { onFirstFrame: undefined },
      ...options,
@@ -123,8 +116,6 @@ describe("background effects", () => {

  beforeEach(() => {
    effect$ = new BehaviorSubject("none");
-    added$ = new BehaviorSubject<AddedBackground[] | undefined>(undefined);
-    setEffect = vi.fn((raw: string) => effect$.next(raw));
    fake = fakePipeline();
  });

@@ -178,63 +169,4 @@ describe("background effects", () => {
      { mode: "disabled" },
    ]);
  });
-
-  it("clears a remembered effect when it cannot be honoured", () => {
-    effect$.next(`image:${shippedBackgrounds[0].id}`);
-    const effects = build({ supported: false });
-    expect(effect$.value).toBe("none");
-    expect(effects.state$.value.processor).toBeUndefined();
-  });
-
-  it("puts an added background on as its picture", async () => {
-    added$.next([{ id: "mine", url: "blob:mine" }]);
-    build();
-    await choose("added:mine");
-    expect(fake.switches).toEqual([
-      { mode: "virtual-background", imagePath: "blob:mine" },
-    ]);
-  });
-
-  it("switches between any two effects in place", async () => {
-    added$.next([{ id: "mine", url: "blob:mine" }]);
-    const shipped = shippedBackgrounds[0];
-    const options: Record<string, unknown> = {
-      none: { mode: "disabled" },
-      blur: { mode: "background-blur", blurRadius: 15 },
-      [`image:${shipped.id}`]: {
-        mode: "virtual-background",
-        imagePath: shipped.imagePath,
-      },
-      "added:mine": { mode: "virtual-background", imagePath: "blob:mine" },
-    };
-    // Each kind to each other kind, and back.
-    const order = [
-      "blur",
-      `image:${shipped.id}`,
-      "added:mine",
-      "blur",
-      "added:mine",
-      `image:${shipped.id}`,
-      "none",
-      "added:mine",
-      "none",
-      "blur",
-    ];
-    const effects = build();
-    await choose(order[0]);
-    const pipeline = effects.state$.value.processor;
-    for (const raw of order.slice(1)) await choose(raw);
-
-    expect(effects.state$.value.processor).toBe(pipeline);
-    expect(fake.switches).toEqual(order.map((raw) => options[raw]));
-  });
-
-  it("forgets an added background the device no longer keeps", () => {
-    effect$.next("added:gone");
-    build();
-    // Not before the device has said what it keeps.
-    expect(effect$.value).toBe("added:gone");
-    added$.next([]);
-    expect(effect$.value).toBe("none");
-  });
 });
@@ -27,11 +27,9 @@ import { type Behavior } from "./Behavior";
 import { type ObservableScope } from "./ObservableScope";
 import {
  type BackgroundEffect,
-  type EffectId,
  imagePathFor,
  parseEffect,
 } from "../tracks/backgroundEffectCatalog";
-import { type AddedBackground } from "../tracks/backgroundImages";

 const blurRadius = 15;

@@ -47,10 +45,6 @@ export interface BackgroundEffectsOptions {
  supported: boolean;
  /** The effect chosen, as the setting stores it. */
  effect$: Behavior<string>;
-  /** Stores a choice, to forget one that can't be honoured. */
-  setEffect: (id: EffectId) => void;
-  /** The backgrounds the device keeps, undefined until it has said. */
-  added$: Behavior<AddedBackground[] | undefined>;
  /** The background processor pipeline to be switched between effects. */
  pipeline: BackgroundProcessorWrapper;
  /** Tells, once, that a frame carrying an effect has been drawn. */
@@ -65,14 +59,7 @@ export interface BackgroundEffects {
 /** Switches the pipeline as the choice changes, for as long as the scope lasts. */
 export function createBackgroundEffects(
  scope: ObservableScope,
-  {
-    supported,
-    effect$,
-    setEffect,
-    added$,
-    pipeline,
-    transformer,
-  }: BackgroundEffectsOptions,
+  { supported, effect$, pipeline, transformer }: BackgroundEffectsOptions,
 ): BackgroundEffects {
  // Wrapped once, so the call and the preview see one processor throughout.
  const processor = fromLivekitProcessor(pipeline);
@@ -82,19 +69,6 @@ export function createBackgroundEffects(
    distinctUntilChanged(),
  );

-  combineLatest([choice$, added$])
-    .pipe(scope.bind())
-    .subscribe(([effect, added]) => {
-      if (effect.kind === "none") return;
-      if (
-        !supported ||
-        (effect.kind === "added" &&
-          added !== undefined &&
-          !added.some(({ id }) => id === effect.id))
-      )
-        setEffect("none");
-    });
-
  const drewAFrame$ = scope.behavior(
    new Observable<boolean>((subscriber) => {
      subscriber.next(false);
@@ -127,16 +101,9 @@ export function createBackgroundEffects(
  const switchOptions$ = scope.behavior<
    SwitchBackgroundProcessorOptions | undefined
  >(
-    combineLatest([state$, choice$, added$]).pipe(
-      map(([{ processor }, effect, added]) =>
-        processor === undefined
-          ? undefined
-          : switchOptionsFor(
-              effect,
-              effect.kind === "added"
-                ? added?.find(({ id }) => id === effect.id)?.url
-                : undefined,
-            ),
+    combineLatest([state$, choice$]).pipe(
+      map(([{ processor }, effect]) =>
+        processor === undefined ? undefined : switchOptionsFor(effect),
      ),
      distinctUntilChanged(deepCompare),
    ),
@@ -154,24 +121,18 @@ export function createBackgroundEffects(
  return { state$ };
 }

-/** `addedUrl` is the picture of the added background chosen, if still kept. */
 function switchOptionsFor(
  effect: BackgroundEffect,
-  addedUrl: string | undefined,
 ): SwitchBackgroundProcessorOptions {
-  const withImage = (
-    imagePath: string | undefined,
-  ): SwitchBackgroundProcessorOptions =>
-    imagePath
-      ? { mode: "virtual-background", imagePath }
-      : { mode: "disabled" };
  switch (effect.kind) {
    case "blur":
      return { mode: "background-blur", blurRadius };
-    case "shipped":
-      return withImage(imagePathFor(effect.id));
-    case "added":
-      return withImage(addedUrl);
+    case "shipped": {
+      const imagePath = imagePathFor(effect.id);
+      return imagePath
+        ? { mode: "virtual-background", imagePath }
+        : { mode: "disabled" };
+    }
    default:
      return { mode: "disabled" };
  }
@@ -12,11 +12,7 @@ import {
  MatrixEvent,
  type Room,
 } from "matrix-js-sdk";
-import {
-  RTC_CALL_INTENT_AUDIO,
-  RTC_CALL_INTENT_VIDEO,
-  type RTCCallIntent,
-} from "matrix-js-sdk/lib/matrixrtc";
+import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
 import { map, mergeMap, NEVER, type Observable, startWith } from "rxjs";

 import { withTestScheduler } from "../../utils/test";
@@ -37,12 +33,10 @@ 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;
@@ -134,25 +128,7 @@ test("ring attempt times out after nobody joins", () => {
    });

    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-a 29ms A", {
-      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: { intent: "audio", recipient: alice.userId },
      A: { outcome: "timeout" },
    });
  });
@@ -172,7 +148,7 @@ test("ring attempt is accepted once recipient joins", () => {
    });

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

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

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

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

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

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

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

@@ -1558,7 +1557,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
            b: expect.objectContaining({
              type: "ringing",
              userId: alice.userId,
-              intent: RTC_CALL_INTENT_AUDIO,
+              intent: "audio",
            }),
          });
          // Layout should show placeholder media for the participant we're
@@ -1604,7 +1603,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
            b: expect.objectContaining({
              type: "ringing",
              userId: alice.userId,
-              intent: RTC_CALL_INTENT_AUDIO,
+              intent: "audio",
            }),
          });
          // Layout should show placeholder media for the participant we're
@@ -21,10 +21,6 @@ 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
@@ -85,7 +81,7 @@ describe("Default selection", () => {
    const output = new IOSControlledAudioOutput(
      constant(false),
      testScope,
-      RTC_CALL_INTENT_AUDIO,
+      "audio",
    );
    const selected = latestSelection(output);

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

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

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

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

@@ -8,10 +8,7 @@ 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 {
-  RTC_CALL_INTENT_AUDIO,
-  type RTCCallIntent,
-} from "matrix-js-sdk/lib/matrixrtc";
+import type { RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
 import {
  availableOutputDevices$ as controlledAvailableOutputDevices$,
  outputDevice$ as controlledOutputSelection$,
@@ -114,7 +111,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 === "m.audio"`) we want to start on the
+   * For voice calls (`initialIntent === "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
@@ -125,7 +122,7 @@ export class IOSControlledAudioOutput implements MediaDevice<
    available: Map<string, AudioOutputDeviceLabel>,
  ): string | undefined {
    const firstId = available.keys().next().value;
-    if (this.initialIntent === RTC_CALL_INTENT_AUDIO) {
+    if (this.initialIntent === "audio") {
      const firstLabel =
        firstId !== undefined ? available.get(firstId) : undefined;
      if (firstLabel?.type === "speaker") {
@@ -35,10 +35,6 @@ 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.
@@ -56,7 +52,7 @@ describe("MediaDevices audio output", () => {

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

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

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

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

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

 import { calculateInitialMuteState } from "./initialMuteState";

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

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

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

 /**
 * Calculates the initial mute state for media devices based on configuration.
@@ -43,10 +40,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 "m.audio", we
+  // their settings there. Additionally, if the call intent is "audio", we
  // disable video by default.
  return {
    audioEnabled: true,
-    videoEnabled: callIntent != RTC_CALL_INTENT_AUDIO,
+    videoEnabled: callIntent != "audio",
  };
 }
@@ -8,10 +8,7 @@ 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 {
-  RTC_CALL_INTENT_AUDIO,
-  type MatrixRTCSession,
-} from "matrix-js-sdk/lib/matrixrtc";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject } from "rxjs";

 import { GridTile } from "./GridTile";
@@ -125,7 +122,7 @@ test("GridTile displays ringing media", async () => {
  const vm = createRingingMedia({
    pickupState$,
    id: "test",
-    intent: RTC_CALL_INTENT_AUDIO,
+    intent: "audio",
    userId: "@alice:example.org",
    displayName$: constant("Alice"),
    mxcAvatarUrl$: constant(undefined),
@@ -12,7 +12,6 @@ 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";
@@ -26,7 +25,7 @@ export const RingingStatus: FC<Props> = ({ vm }) => {
  const pickupState = useBehavior(vm.pickupState$);
  const Icon =
    pickupState === "ringing"
-      ? vm.intent === RTC_CALL_INTENT_VIDEO
+      ? vm.intent === "video"
        ? VideoCallSolidIcon
        : VoiceCallSolidIcon
      : EndCallIcon;
@@ -11,7 +11,6 @@ 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 {
@@ -177,7 +176,7 @@ test("SpotlightTile displays ringing media", async () => {
  const vm = createRingingMedia({
    pickupState$,
    id: "test",
-    intent: RTC_CALL_INTENT_AUDIO,
+    intent: "audio",
    userId: "@alice:example.org",
    displayName$: constant("Alice"),
    mxcAvatarUrl$: constant(undefined),
@@ -19,10 +19,8 @@ import {
  type BackgroundEffectsState,
 } from "../state/BackgroundEffects";
 import { backgroundEffect } from "../settings/settings";
-import { type AddedBackground } from "./backgroundImages";
 import { flushPromises, testScope } from "../utils/test";

-const sdkSupportMock = vi.hoisted(() => vi.fn(() => true));
 const pipelines = vi.hoisted(() => ({
  built: 0,
  destroyed: 0,
@@ -43,18 +41,10 @@ vi.mock("@livekit/track-processors", () => ({
      return Promise.resolve();
    });
  }),
-  supportsBackgroundProcessors: (): boolean => sdkSupportMock(),
+  supportsBackgroundProcessors: (): boolean => true,
 }));
 const platformMock = vi.hoisted(() => ({ platform: "desktop" }));
 vi.mock("../Platform", () => platformMock);
-vi.mock("./backgroundImages", async () => {
-  const { BehaviorSubject } = await import("rxjs");
-  return {
-    addedBackgrounds: {
-      added$: new BehaviorSubject<AddedBackground[] | undefined>(undefined),
-    },
-  };
-});
 vi.mock("./BackgroundEffectTransformer", () => ({
  BackgroundEffectTransformer: vi.fn(),
 }));
@@ -87,7 +77,6 @@ describe("BackgroundEffectsProvider", () => {
    pipelines.destroyed = 0;
    pipelines.switches = [];
    platformMock.platform = "desktop";
-    sdkSupportMock.mockReturnValue(true);
    backgroundEffect.setValue("none");
  });
  afterEach(() => backgroundEffect.setValue("none"));
@@ -13,7 +13,6 @@ import { createContext, type FC, type JSX, use } from "react";

 import { backgroundEffect as backgroundEffectSetting } from "../settings/settings";
 import { BackgroundEffectTransformer } from "./BackgroundEffectTransformer";
-import { addedBackgrounds } from "./backgroundImages";
 import { type Behavior } from "../state/Behavior";
 import { type ObservableScope } from "../state/ObservableScope";
 import {
@@ -54,8 +53,6 @@ export function createAppBackgroundEffects(
  return createBackgroundEffects(scope, {
    supported: supportsBackgroundProcessors(),
    effect$: backgroundEffectSetting.value$,
-    setEffect: backgroundEffectSetting.setValue,
-    added$: addedBackgrounds.added$,
    pipeline: new BackgroundProcessorWrapper(transformer, "background-effect"),
    transformer,
  });
@@ -15,7 +15,6 @@ import {
  serializeEffect,
  shippedBackgrounds,
 } from "./backgroundEffectCatalog";
-import { maxAddedBackgrounds } from "./backgroundImages";

 describe("the chosen background effect", () => {
  test("round-trips through its stored form", () => {
@@ -23,7 +22,6 @@ describe("the chosen background effect", () => {
      { kind: "none" },
      { kind: "blur" },
      ...shippedBackgrounds.map(({ id }) => ({ kind: "shipped" as const, id })),
-      { kind: "added", id: "d3b07384" },
    ];
    for (const effect of effects)
      expect(parseEffect(serializeEffect(effect))).toEqual(effect);
@@ -32,7 +30,6 @@ describe("the chosen background effect", () => {
  test("falls back to no effect when the stored form names nothing we ship", () => {
    expect(parseEffect("image:gone")).toEqual({ kind: "none" });
    expect(parseEffect("")).toEqual({ kind: "none" });
-    expect(parseEffect("added:")).toEqual({ kind: "none" });
  });

  test("reads a stored value that is not a string as no effect", () => {
@@ -40,14 +37,6 @@ describe("the chosen background effect", () => {
      expect(parseEffect(raw)).toEqual({ kind: "none" });
  });

-  test("fills the grid at the limit and one short of it", () => {
-    // No effect, blur and the shipped ones, then the added ones.
-    const fixed = 2 + shippedBackgrounds.length;
-    expect((fixed + maxAddedBackgrounds) % 3).toBe(0);
-    // One short, the add tile takes the last place.
-    expect((fixed + maxAddedBackgrounds - 1 + 1) % 3).toBe(0);
-  });
-
  test("gives every shipped background an image to draw", () => {
    for (const { id } of shippedBackgrounds)
      expect(imagePathFor(id)).toBeTruthy();
@@ -22,18 +22,16 @@ export const shippedBackgrounds: ShippedBackground[] = [
 export type BackgroundEffect =
  | { kind: "none" }
  | { kind: "blur" }
-  | { kind: "shipped"; id: string }
-  | { kind: "added"; id: string };
+  | { kind: "shipped"; id: string };

 /** An effect as the setting stores it, and as the menu names its option. */
-export type EffectId = "none" | "blur" | `image:${string}` | `added:${string}`;
+export type EffectId = "none" | "blur" | `image:${string}`;

 export const noEffect: BackgroundEffect = { kind: "none" };

 /**
- * Reads a stored effect; one we no longer ship reads as no effect. Whether an
- * added one is still kept only the device knows. Stored by hand or by another
- * build, the value need not even be a string.
+ * Reads a stored effect; one we no longer ship reads as no effect. Stored by
+ * hand or by another build, the value need not even be a string.
 */
 export function parseEffect(raw: unknown): BackgroundEffect {
  if (typeof raw !== "string") return noEffect;
@@ -43,10 +41,6 @@ export function parseEffect(raw: unknown): BackgroundEffect {
    if (shippedBackgrounds.some((b) => b.id === id))
      return { kind: "shipped", id };
  }
-  if (raw.startsWith("added:")) {
-    const id = raw.slice("added:".length);
-    if (id) return { kind: "added", id };
-  }
  return noEffect;
 }

@@ -56,8 +50,6 @@ export function serializeEffect(effect: BackgroundEffect): EffectId {
      return "blur";
    case "shipped":
      return `image:${effect.id}`;
-    case "added":
-      return `added:${effect.id}`;
    default:
      return "none";
  }
@@ -1,172 +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 { beforeEach, describe, expect, it, vi } from "vitest";
-import { IDBFactory } from "fake-indexeddb";
-
-import {
-  AddedBackgrounds,
-  type BackgroundImageStorage,
-  IndexedDBImageStorage,
-  type KeptImage,
-  maxAddedBackgrounds,
-  prepareImage,
-  UnusableImage,
-} from "./backgroundImages";
-import { flushPromises } from "../utils/test";
-
-describe("AddedBackgrounds", () => {
-  beforeEach(() => {
-    let n = 0;
-    vi.spyOn(URL, "createObjectURL").mockImplementation(() => `blob:${++n}`);
-  });
-
-  it("offers what the device keeps, oldest first", async () => {
-    const image = new Blob(["x"], { type: "image/png" });
-    const store = new AddedBackgrounds(
-      memoryStorage([
-        { id: "later", image, addedAt: 2 },
-        { id: "earlier", image, addedAt: 1 },
-      ]),
-      asGiven,
-    );
-    expect(store.added$.value).toBeUndefined();
-    await flushPromises();
-    expect(store.added$.value?.map(({ id }) => id)).toEqual([
-      "earlier",
-      "later",
-    ]);
-  });
-
-  it("keeps an added image and offers it after the others", async () => {
-    const storage = memoryStorage();
-    const store = new AddedBackgrounds(storage, asGiven);
-    await flushPromises();
-    const id = await store.add(new Blob(["x"], { type: "image/png" }));
-    expect(store.added$.value?.map((a) => a.id)).toEqual([id]);
-    expect((await storage.list()).map((k) => k.id)).toEqual([id]);
-  });
-
-  it("keeps the prepared image, not the file", async () => {
-    const storage = memoryStorage();
-    const prepared = new Blob(["y"], { type: "image/webp" });
-    const store = new AddedBackgrounds(storage, async () =>
-      Promise.resolve(prepared),
-    );
-    await store.add(new Blob(["x"], { type: "image/png" }));
-    expect((await storage.list())[0].image).toBe(prepared);
-  });
-
-  it("keeps nothing of a file it refuses", async () => {
-    const storage = memoryStorage();
-    const store = new AddedBackgrounds(storage, async () =>
-      Promise.reject(new UnusableImage("animated")),
-    );
-    await flushPromises();
-    await expect(store.add(new Blob(["x"]))).rejects.toThrow(UnusableImage);
-    expect(await storage.list()).toEqual([]);
-    expect(store.added$.value).toEqual([]);
-  });
-
-  it("keeps no more than the grid holds", async () => {
-    const storage = memoryStorage();
-    const store = new AddedBackgrounds(storage, asGiven);
-    for (let i = 0; i < maxAddedBackgrounds; i++)
-      await store.add(new Blob([`${i}`]));
-    await expect(store.add(new Blob(["more"]))).rejects.toThrow(RangeError);
-    expect(await storage.list()).toHaveLength(maxAddedBackgrounds);
-  });
-
-  it("forgets a removed image, and lets its picture go", async () => {
-    const revoke = vi
-      .spyOn(URL, "revokeObjectURL")
-      .mockImplementation(() => {});
-    const storage = memoryStorage();
-    const store = new AddedBackgrounds(storage, asGiven);
-    await flushPromises();
-    const first = await store.add(new Blob(["a"]));
-    const second = await store.add(new Blob(["b"]));
-    const url = store.added$.value![0].url;
-
-    await store.remove(first);
-    expect(store.added$.value?.map((a) => a.id)).toEqual([second]);
-    expect((await storage.list()).map((k) => k.id)).toEqual([second]);
-    expect(revoke).toHaveBeenCalledWith(url);
-  });
-
-  it("offers nothing where the browser keeps nothing", async () => {
-    const store = new AddedBackgrounds(null);
-    await flushPromises();
-    expect(store.added$.value).toEqual([]);
-    await expect(store.add(new Blob(["x"]))).rejects.toThrow();
-  });
-
-  it("offers none, rather than waiting, where the device can't be read", async () => {
-    const unreadable: BackgroundImageStorage = {
-      ...memoryStorage(),
-      list: async () => Promise.reject(new Error("storage cleared")),
-    };
-    const store = new AddedBackgrounds(unreadable);
-    await flushPromises();
-    expect(store.added$.value).toEqual([]);
-  });
-});
-
-describe("prepareImage", () => {
-  // Refused before anything is decoded, which only a real browser could do.
-  it("refuses a file that isn't an image", async () => {
-    await expect(
-      prepareImage(new Blob(["x"], { type: "text/plain" })),
-    ).rejects.toEqual(new UnusableImage("not-an-image"));
-  });
-
-  it("refuses an animated type where the browser can't count frames", async () => {
-    expect(globalThis.ImageDecoder).toBeUndefined();
-    await expect(
-      prepareImage(new Blob(["GIF89a"], { type: "image/gif" })),
-    ).rejects.toEqual(new UnusableImage("animated"));
-  });
-});
-
-describe("IndexedDBImageStorage", () => {
-  it("keeps images across sessions until they are deleted", async () => {
-    const indexedDB = new IDBFactory();
-    const image = new Blob(["x"], { type: "image/webp" });
-    const first = new IndexedDBImageStorage(indexedDB);
-    await first.put({ id: "a", image, addedAt: 1 });
-    await first.put({ id: "b", image, addedAt: 2 });
-
-    // A session of its own, as after a reload.
-    const second = new IndexedDBImageStorage(indexedDB);
-    expect(
-      (await second.list()).map(({ id, addedAt }) => [id, addedAt]),
-    ).toEqual([
-      ["a", 1],
-      ["b", 2],
-    ]);
-    await second.delete("a");
-    expect((await first.list()).map(({ id }) => id)).toEqual(["b"]);
-  });
-});
-
-// Decoding needs a real browser; the end-to-end checks cover it.
-const asGiven = async (file: Blob): Promise<Blob> => Promise.resolve(file);
-
-function memoryStorage(kept: KeptImage[] = []): BackgroundImageStorage {
-  return {
-    list: async (): Promise<KeptImage[]> => Promise.resolve([...kept]),
-    put: async (image): Promise<void> => {
-      kept.push(image);
-      return Promise.resolve();
-    },
-    delete: async (id): Promise<void> => {
-      const index = kept.findIndex((k) => k.id === id);
-      if (index !== -1) kept.splice(index, 1);
-      return Promise.resolve();
-    },
-  };
-}
@@ -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 { BehaviorSubject } from "rxjs";
-import { logger } from "matrix-js-sdk/lib/logger";
-
-import { type Behavior } from "../state/Behavior";
-
-export const maxAddedBackgrounds = 5;
-
-/** The longest edge kept; the pipeline scales every image to the camera. */
-export const maxStoredEdge = 1920;
-
-/** Why a file can't be used as a background. */
-export type UnusableReason = "not-an-image" | "animated" | "undecodable";
-
-export class UnusableImage extends Error {
-  public constructor(public readonly reason: UnusableReason) {
-    super(reason);
-    this.name = "UnusableImage";
-  }
-}
-
-/** A background the user added, as the menu and the pipeline use it. */
-export interface AddedBackground {
-  id: string;
-  url: string;
-}
-
-/** A background the user added, as it is kept on the device. */
-export interface KeptImage {
-  id: string;
-  image: Blob;
-  addedAt: number;
-}
-
-/** Where added backgrounds are kept. */
-export interface BackgroundImageStorage {
-  list(): Promise<KeptImage[]>;
-  put(image: KeptImage): Promise<void>;
-  delete(id: string): Promise<void>;
-}
-
-/** The backgrounds this device keeps, which never leave it. */
-export class AddedBackgrounds {
-  private readonly subject$ = new BehaviorSubject<
-    AddedBackground[] | undefined
-  >(undefined);
-  /** Undefined until what the device keeps has been read. */
-  public readonly added$: Behavior<AddedBackground[] | undefined> =
-    this.subject$;
-
-  public constructor(
-    private readonly storage: BackgroundImageStorage | null,
-    private readonly prepare: (file: Blob) => Promise<Blob> = prepareImage,
-  ) {
-    this.read().catch((e) => {
-      logger.warn("Could not read added backgrounds", e);
-      this.subject$.next([]);
-    });
-  }
-
-  private async read(): Promise<void> {
-    const kept = (await this.storage?.list()) ?? [];
-    kept.sort((a, b) => a.addedAt - b.addedAt);
-    this.subject$.next(
-      kept.map(({ id, image }) => ({ id, url: URL.createObjectURL(image) })),
-    );
-  }
-
-  /**
-   * Keeps a file as a background, and answers with its id. Throws
-   * {@link UnusableImage} for a file that can't be used, and a RangeError
-   * once maxAddedBackgrounds are kept.
-   */
-  public async add(file: Blob): Promise<string> {
-    if (this.storage === null)
-      throw new Error("This browser keeps no backgrounds");
-    const image = await this.prepare(file);
-    if ((await this.storage.list()).length >= maxAddedBackgrounds)
-      throw new RangeError(
-        `${maxAddedBackgrounds} backgrounds are kept already`,
-      );
-    const kept: KeptImage = {
-      id: crypto.randomUUID(),
-      image,
-      addedAt: Date.now(),
-    };
-    await this.storage.put(kept);
-    this.subject$.next([
-      ...(this.subject$.value ?? []),
-      { id: kept.id, url: URL.createObjectURL(image) },
-    ]);
-    return kept.id;
-  }
-
-  public async remove(id: string): Promise<void> {
-    await this.storage?.delete(id);
-    const current = this.subject$.value ?? [];
-    const gone = current.find((a) => a.id === id);
-    if (gone) URL.revokeObjectURL(gone.url);
-    this.subject$.next(current.filter((a) => a.id !== id));
-  }
-}
-
-/**
- * Refuses what can't be used, reduces what is larger than is kept, and lays
- * every image on an opaque ground: a background has to cover what is behind
- * it, so a transparent pixel would be a hole in it.
- */
-export async function prepareImage(file: Blob): Promise<Blob> {
-  if (!file.type.startsWith("image/")) throw new UnusableImage("not-an-image");
-  if (await isAnimated(file)) throw new UnusableImage("animated");
-
-  let bitmap: ImageBitmap;
-  try {
-    bitmap = await createImageBitmap(file);
-  } catch (e) {
-    logger.debug("Could not decode the chosen file", e);
-    throw new UnusableImage("undecodable");
-  }
-  try {
-    const scale = Math.min(
-      1,
-      maxStoredEdge / Math.max(bitmap.width, bitmap.height),
-    );
-    const canvas = new OffscreenCanvas(
-      Math.round(bitmap.width * scale),
-      Math.round(bitmap.height * scale),
-    );
-    const context = canvas.getContext("2d");
-    if (!context) throw new UnusableImage("undecodable");
-    context.fillStyle = "black";
-    context.fillRect(0, 0, canvas.width, canvas.height);
-    context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
-    return await canvas.convertToBlob({ type: "image/webp", quality: 0.9 });
-  } finally {
-    bitmap.close();
-  }
-}
-
-// Read from the file, not its type: a still and an animated WebP share one.
-async function isAnimated(file: Blob): Promise<boolean> {
-  if (typeof ImageDecoder === "undefined") return /gif|apng/.test(file.type);
-  try {
-    const decoder = new ImageDecoder({
-      data: await file.arrayBuffer(),
-      type: file.type,
-    });
-    // Some browsers have no selected track until the tracks are ready.
-    await decoder.tracks.ready;
-    await decoder.completed;
-    return (decoder.tracks.selectedTrack?.frameCount ?? 1) > 1;
-  } catch (e) {
-    logger.debug("Could not read the frame count, judging by type", e);
-    return /gif|apng/.test(file.type);
-  }
-}
-
-const DB_NAME = "element-call-background-images";
-const STORE = "backgrounds";
-
-export class IndexedDBImageStorage implements BackgroundImageStorage {
-  private db?: Promise<IDBDatabase>;
-
-  public constructor(private readonly indexedDB: IDBFactory) {}
-
-  private async open(): Promise<IDBDatabase> {
-    return (this.db ??= new Promise((resolve, reject) => {
-      const request = this.indexedDB.open(DB_NAME, 1);
-      request.onupgradeneeded = (): void => {
-        request.result.createObjectStore(STORE, { keyPath: "id" });
-      };
-      request.onsuccess = (): void => resolve(request.result);
-      request.onerror = (): void => reject(request.error);
-    }));
-  }
-
-  private async run<T>(
-    mode: IDBTransactionMode,
-    body: (store: IDBObjectStore) => IDBRequest<T>,
-  ): Promise<T> {
-    const db = await this.open();
-    return new Promise((resolve, reject) => {
-      const request = body(db.transaction(STORE, mode).objectStore(STORE));
-      request.onsuccess = (): void => resolve(request.result);
-      request.onerror = (): void => reject(request.error);
-    });
-  }
-
-  public async list(): Promise<KeptImage[]> {
-    return this.run<KeptImage[]>("readonly", (s) => s.getAll());
-  }
-
-  public async put(image: KeptImage): Promise<void> {
-    await this.run("readwrite", (s) => s.put(image));
-  }
-
-  public async delete(id: string): Promise<void> {
-    await this.run("readwrite", (s) => s.delete(id));
-  }
-}
-
-function openStorage(): BackgroundImageStorage | null {
-  // Merely reading indexedDB throws where it is disabled.
-  try {
-    return globalThis.indexedDB
-      ? new IndexedDBImageStorage(globalThis.indexedDB)
-      : null;
-  } catch (e) {
-    logger.warn("Could not reach IndexedDB", e);
-    return null;
-  }
-}
-
-export const addedBackgrounds = new AddedBackgrounds(openStorage());