Remove unused vite-plugin-generate-file dependency

I learned that makeKeyDelay has been deprecated in matrix-js-sdk ever since the switch to the new encryption manager, so this config option has no effect.

.github/workflows/build-element-call.yaml

@@ -44,7 +44,9 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
       - name: Build Element Call
         run: pnpm run build:"$PACKAGE":"$BUILD_MODE"
         env:

.github/workflows/lint.yaml

@@ -19,7 +19,9 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
       - name: Formatting
         run: "pnpm run format:check"
       - name: i18n

.github/workflows/test.yaml

@@ -21,7 +21,9 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries
@@ -59,7 +61,9 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: pnpm install --frozen-lockfile --ignore-pnpmfile
+        run: scripts/layered.sh --ignore-pnpmfile
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries

.gitignore

@@ -41,3 +41,6 @@ yarn-error.log
 
 *storybook.log
 storybook-static
+
+# Nested checkout made by scripts/layered.sh
+/matrix-js-sdk/

AGENTS.md

@@ -48,6 +48,8 @@ pnpm i18n:check
 - View model + marble tests, thin view, a story per state, an e2e spec.
 - Any new shared component called out explicitly, with why nothing existing fit.
 - Template filled for real: what, why, before/after screenshots, repro steps.
+- Comments only where the code can't give the reason — see
+  [code-style.md](docs/agents/code-style.md#comments).
 - Anything that redraws continuously — an animation frame, a stream — says what it
   costs, or better, counts the redraws in a test.
 - Branch `<handle>/<topic>`. Plain imperative commit subjects, no prefixes.

README.md

@@ -34,16 +34,16 @@ You can find the latest development version continuously deployed to
 ## ✨ Key Features
 
 ✅ **Decentralized & Federated** – No central authority; works across Matrix
-homeservers.  
-✅ **End-to-End Encrypted** – Secure and private calls.  
+homeservers.
+✅ **End-to-End Encrypted** – Secure and private calls.
 ✅ **Standalone, Widget & Component Mode** – Use as an independent app, embed
 in Matrix clients as a widget, or (experimentally) mount it as a React component
-inside your own application.  
-✅ **WebRTC-based** – No additional software required.  
+inside your own application.
+✅ **WebRTC-based** – No additional software required.
 ✅ **Scalable with LiveKit** – Supports large meetings via SFU
-([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).  
+([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).
 ✅ **Raise Hand** – Participants can signal when they want to speak, helping to
-organize the flow of the meeting.  
+organize the flow of the meeting.
 ✅ **Emoji Reactions** – Users can react with emojis 👍️ 🎉 👏 🤘, adding
 engagement and interactivity to the conversation.
 
@@ -297,8 +297,8 @@ The package is not published yet. A host installs it as a git dependency on the
 ```
 
 whose `prepare` script runs the build on install. That build needs pnpm (via
-Corepack) on the host's machine, runs a full `pnpm install` of this repository
-and is memory-hungry, since it inherits the `--max-old-space-size` setting of
+Corepack) on the host's machine, runs a full `pnpm install` of this repository,
+since it inherits the `--max-old-space-size` setting of
 the app build; the host's pnpm also has to allow it to run at all
 (`allowBuilds` in its `pnpm-workspace.yaml`). Note that `component/` is a pnpm
 project of its own for this reason, so pnpm commands run from inside that
@@ -306,8 +306,27 @@ directory target it rather than the repository; run them from the repository
 root. The host imports the component from
 `@element-hq/element-call-component` and the stylesheet from
 `@element-hq/element-call-component/style.css`, and has to provide `react`,
-`react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
-them external.
+`react-dom`, `matrix-js-sdk`, `livekit-client`, `@vector-im/compound-web` and
+`@vector-im/compound-design-tokens` itself, since the bundle leaves them
+external. Compound's stylesheet are the host's to load too: the component shares
+the host's copy of Compound, (required for example for tooltips)
+
+The component is large, and a host will usually load it lazily, only once a
+call is shown. Everything a host needs in order to talk about a call before
+then is also exported
+from `@element-hq/element-call-component/api` (a small entry point that does not
+load the component).
+
+- props and the types they are made of
+- the handle
+- the host bridge
+- `UserIntent`
+- `HeaderStyle`
+- `BackgroundStyle` enums
+- `configurationForIntent`, the defaults each intent implies
+  Import from it wherever a value such as
+  `BackgroundStyle.Solid` is needed on a path that must stay light; the main
+  entry point re-exports all of it too.
 
 ### Backend
 

component/ElementCall.module.css

@@ -34,10 +34,18 @@ component rather than a page makes. */
   -webkit-tap-highlight-color: transparent;
 }
 
-/* Compound's overlay container, which holds tooltips and popovers, has to fill
-the container for the elements inside it to be positioned against it. The
-standalone page does the same for the container under `#root`. */
-.root > [data-overlay-container] {
-  position: relative;
+/* The call itself. It is a stacking context of its own, as the standalone
+page's `#root` is, so that the layers the call view uses for its header, footer
+and overlays stay below the modals and toasts, which are portalled into the
+root and carry no layer of their own.
+
+What Compound floats — tooltips, menus — is not in here at all: it goes into
+the host's body, as it would for any other component on the host's page, and is
+styled and layered by the host's copy of Compound. */
+.content {
+  display: flex;
+  flex-direction: column;
   block-size: 100%;
+  position: relative;
+  isolation: isolate;
 }

component/api.ts

@@ -0,0 +1,124 @@
+/*
+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.
+*/
+
+/**
+ * EXPERIMENTAL
+ *
+ * What a host needs in order to talk about Element Call, without Element Call:
+ * the component's props and the types they are made of, the handle and the
+ * host bridge, the intents a call can be started with and the configuration
+ * each implies.
+ *
+ * This is an entry point of its own, `@element-hq/element-call-component/api`,
+ * so that a host can import it on a path that must stay light — a call model
+ * that needs `BackgroundStyle.Solid` as a value, say — and load the component
+ * itself, and everything it brings, only when a call is shown. The main entry
+ * point re-exports all of it, so a host that does not care may import
+ * everything from there.
+ *
+ * Nothing in here may reach anything that is not a type or a constant: the
+ * point of this module is what it does not import.
+ */
+
+import type { Ref } from "react";
+import type { MatrixClient } from "matrix-js-sdk";
+
+import type { UrlProperties } from "../src/UrlParams";
+import type { ElementCallHandle, ElementCallHostBridge } from "./host";
+import {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "../src/UrlConfiguration";
+
+// How the host and Element Call talk to each other, and what they say
+export type { ElementCallHandle, ElementCallHostBridge } from "./host";
+export type { DeviceMuteRequest, DeviceMuteState } from "../src/HostBridge";
+export type { JoinCallData } from "../src/widget";
+// The deployment-wide configuration, as distinct from ElementCallConfiguration
+// below, which is per call
+export type { ConfigOptions } from "../src/config/ConfigOptions";
+// The values that appear in ElementCallConfiguration and in the intent, and
+// what each intent means by default
+export {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+};
+
+/**
+ * How Element Call should behave. Everything is optional; anything left out
+ * takes the default that {@link ElementCallProps.intent} implies.
+ *
+ * This is the behaviour a widget can be configured with through its URL, plus
+ * the one fact about the call a host has a say in here, the background. The
+ * rest of what a widget's URL carries — who the user is, how to reach the
+ * homeserver, where to report analytics, the shared secret of a room that is
+ * encrypted with one — a component host supplies by other routes, or not at
+ * all; and what can change while the call is running, the theme and the
+ * language, is a prop of its own.
+ */
+export type ElementCallConfiguration = Partial<UrlConfiguration> &
+  Partial<Pick<UrlProperties, "background">>;
+
+export interface ElementCallProps {
+  /**
+   * The client to place the call with. Element Call does not authenticate
+   * anyone or manage a session of its own; this one is the host's.
+   */
+  client: MatrixClient;
+  /** The room to call in. The host's client must already know about it. */
+  roomId: string;
+  /**
+   * What the user asked for — whether they started the call or joined one that
+   * was already running, and whether it is a call in a group or a DM. Element
+   * Call decides what each of those means: whether to show the lobby first,
+   * whether to ring, and so on.
+   *
+   * Defaults to joining an existing group call, which is the most conservative
+   * reading, but a host that knows which button the user pressed should say so.
+   */
+  intent?: UserIntent;
+  /**
+   * How Element Call should behave, overriding whatever {@link intent} implies.
+   * A host that finds itself setting a lot of these probably wants a different
+   * intent instead.
+   *
+   * Compared by value, so it is fine to write this inline; only a change to
+   * what it says restarts anything.
+   */
+  config?: ElementCallConfiguration;
+  /**
+   * What Element Call tells the host while the call is running: that the user
+   * has joined or hung up, that it would like to be kept on screen, and so on.
+   * Without one, Element Call assumes nobody is listening.
+   */
+  hostBridge?: ElementCallHostBridge;
+  /**
+   * What the host tells Element Call: to hang up, to mute, to join. Available
+   * once the component has rendered.
+   */
+  ref?: Ref<ElementCallHandle>;
+  /**
+   * The theme to show Element Call in, `light` or `dark`. Left out, Element
+   * Call picks. Changes take effect at once, and cost nothing else.
+   */
+  theme?: string;
+  /**
+   * The language to show Element Call in, as a BCP 47 tag: one of the
+   * `supportedLanguages` the main entry point exports, or something that falls
+   * back to one (`de-AT` to `de`). Left out, the browser's language is used.
+   *
+   * Translations are one thing shared by every Element Call on the page, so
+   * the most recently set language wins for all of them.
+   */
+  language?: string;
+}

component/build/scopeStylesToRoot.ts

@@ -40,10 +40,10 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * Element Call as a component.
  *
  * As a page of its own, Element Call can style the document: normalize.css and
- * Compound speak of `html`, `body` and bare elements, and the design tokens are
- * declared on `:root`. As a component, all of that would land on the host's
- * document too. This rewrites every selector so that it matches only the root
- * or its descendants:
+ * its own base styles speak of `html`, `body` and bare elements, and its custom
+ * properties are declared on `:root`. As a component, all of that would land on
+ * the host's document too. This rewrites every selector so that it matches only
+ * the root or its descendants:
  *
  * - `html`, `body` and `:root` become the root element, which is what stands in
  *   for the document inside a host.
@@ -55,9 +55,10 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * CSS modules are scoped by their class names already, so only their selectors
  * that would match by element alone — `pre` rather than `.pre` — are touched.
  *
- * The root's fonts and design tokens are still inherited by everything inside
- * it, the way they were from `body` and `:root`, and `@font-face` declarations
- * stay global, which they are by nature.
+ * The root's custom properties are still inherited by everything inside it,
+ * the way they were from `:root`. Compound's own stylesheet — the design
+ * tokens, the component styles, the fonts — is not in this build at all: the
+ * host supplies it, unscoped, along with its copy of Compound.
  */
 export function scopeStylesToRoot(): Plugin {
   return {

component/dev/main.tsx

@@ -9,6 +9,16 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { logger } from "matrix-js-sdk/lib/logger";
 
+// What a host provides along with its copy of Compound: its stylesheet, the
+// design tokens and the fonts they name. The component does not bundle them.
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/inter/600.css";
+import "@fontsource/inter/700.css";
+import "@fontsource/inconsolata/400.css";
+import "@fontsource/inconsolata/700.css";
+import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
+import "@vector-im/compound-web/dist/style.css";
 import { type ConfigOptions, initializeElementCall } from "../index";
 import { Harness } from "./Harness";
 // After Element Call's, so that the host has the last word on its own page

component/index.tsx

@@ -17,33 +17,37 @@ Please see LICENSE in the repository root for full details.
  * host instead, or is confined to the container it is mounted in.
  */
 
-// The design tokens, fonts and element defaults every Element Call stylesheet
+// The element defaults and custom properties every Element Call stylesheet
 // builds on. Written for a page, they speak of `html`, `body` and bare
 // elements; the component build confines them, and every other stylesheet in
 // this bundle, to the root element below (see build/scopeStylesToRoot.ts), so
 // that the host's document is left as it was.
 //
+// Compound is not in here. The component uses the host's copy of it (a peer
+// dependency, left external by the build), and the host loads Compound's
+// stylesheet, design tokens and fonts along with it: what Compound floats into
+// the host's body — tooltips, menus — is then styled by the same stylesheet as
+// everything else there, and Element Call's root takes the tokens and fonts of
+// the theme class it carries, as any element on the host's page would.
+//
 // Where these land relative to the component stylesheets is the bundler's
 // choice — the standalone app puts them first, this build puts them in the
 // middle — so nothing in base.css may depend on winning or losing against a
 // component's own rules at equal specificity. It currently does not: what it
 // declares unlayered is custom properties on Element Call's root, which
-// components inherit rather than compete with, and everything from Compound
-// sits in a `@layer`, which loses to unlayered rules either way.
+// components inherit rather than compete with.
 import "../src/base.css";
 
 import {
   type FC,
   type JSX,
   type ReactNode,
-  type Ref,
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
-import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { I18nextProvider } from "react-i18next";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -62,10 +66,8 @@ import { RootElementProvider, useRootElement } from "../src/RootElementContext";
 import {
   configurationForIntent,
   componentProperties,
-  type UrlConfiguration,
   type UrlParams,
   UrlParamsProvider,
-  type UrlProperties,
   UserIntent,
   useUrlParams,
 } from "../src/UrlParams";
@@ -79,102 +81,16 @@ import { i18n } from "../src/utils/i18n";
 import { useTheme } from "../src/useTheme";
 import { useStableValue } from "../src/useStableValue";
 import styles from "./ElementCall.module.css";
-import {
-  type ElementCallHandle,
-  type ElementCallHostBridge,
-  useComponentHostBridge,
-} from "./host";
+import { useComponentHostBridge } from "./host";
+import { type ElementCallProps } from "./api";
 import { supportedLanguages, translationsBackend } from "./localization";
 
 // The languages Element Call can be shown in
 export { supportedLanguages } from "./localization";
-
-// How the host and Element Call talk to each other, and what they say
-export { type ElementCallHandle, type ElementCallHostBridge } from "./host";
-export {
-  type DeviceMuteRequest,
-  type DeviceMuteState,
-} from "../src/HostBridge";
-export { type JoinCallData } from "../src/widget";
-// The deployment-wide configuration, as distinct from ElementCallConfiguration
-// above, which is per call
-export { type ConfigOptions } from "../src/config/ConfigOptions";
-// The values that appear in ElementCallConfiguration and in the intent
-export {
-  BackgroundStyle,
-  HeaderStyle,
-  UserIntent,
-  type UrlConfiguration,
-} from "../src/UrlParams";
-
-/**
- * How Element Call should behave. Everything is optional; anything left out
- * takes the default that {@link ElementCallProps.intent} implies.
- *
- * This is the behaviour a widget can be configured with through its URL, plus
- * the one fact about the call a host has a say in here, the background. The
- * rest of what a widget's URL carries — who the user is, how to reach the
- * homeserver, where to report analytics, the shared secret of a room that is
- * encrypted with one — a component host supplies by other routes, or not at
- * all; and what can change while the call is running, the theme and the
- * language, is a prop of its own.
- */
-export type ElementCallConfiguration = Partial<UrlConfiguration> &
-  Partial<Pick<UrlProperties, "background">>;
-
-export interface ElementCallProps {
-  /**
-   * The client to place the call with. Element Call does not authenticate
-   * anyone or manage a session of its own; this one is the host's.
-   */
-  client: MatrixClient;
-  /** The room to call in. The host's client must already know about it. */
-  roomId: string;
-  /**
-   * What the user asked for — whether they started the call or joined one that
-   * was already running, and whether it is a call in a group or a DM. Element
-   * Call decides what each of those means: whether to show the lobby first,
-   * whether to ring, and so on.
-   *
-   * Defaults to joining an existing group call, which is the most conservative
-   * reading, but a host that knows which button the user pressed should say so.
-   */
-  intent?: UserIntent;
-  /**
-   * How Element Call should behave, overriding whatever {@link intent} implies.
-   * A host that finds itself setting a lot of these probably wants a different
-   * intent instead.
-   *
-   * Compared by value, so it is fine to write this inline; only a change to
-   * what it says restarts anything.
-   */
-  config?: ElementCallConfiguration;
-  /**
-   * What Element Call tells the host while the call is running: that the user
-   * has joined or hung up, that it would like to be kept on screen, and so on.
-   * Without one, Element Call assumes nobody is listening.
-   */
-  hostBridge?: ElementCallHostBridge;
-  /**
-   * What the host tells Element Call: to hang up, to mute, to join. Available
-   * once the component has rendered.
-   */
-  ref?: Ref<ElementCallHandle>;
-  /**
-   * The theme to show Element Call in, `light` or `dark`. Left out, Element
-   * Call picks. Changes take effect at once, and cost nothing else.
-   */
-  theme?: string;
-  /**
-   * The language to show Element Call in, as a BCP 47 tag: one of
-   * {@link supportedLanguages}, or something that falls back to one (`de-AT`
-   * to `de`). Left out, the browser's language is used.
-   *
-   * Translations are one thing shared by every Element Call on the page, so
-   * the most recently set language wins for all of them.
-   */
-  language?: string;
-}
+// Everything a host needs to talk about Element Call — the props, the handle,
+// the host bridge, the intents and what each means — also available without
+// the component itself from `@element-hq/element-call-component/api`
+export * from "./api";
 
 /**
  * Prepares the things Element Call needs before it can be shown: translations,
@@ -321,34 +237,38 @@ export const ElementCall: FC<ElementCallProps> = ({
         <UrlParamsProvider value={params}>
           <div ref={setContainer} className={styles.root}>
             {ready && (
-              <RootElementProvider value={container}>
-                {/* Whatever goes wrong in here is shown in here. Left to
+              // Stands in for the standalone page's `#root`: see `.content`
+              // in ElementCall.module.css
+              <div className={styles.content}>
+                <RootElementProvider value={container}>
+                  {/* Whatever goes wrong in here is shown in here. Left to
                   propagate, an error would unmount the host's own tree. */}
-                <ErrorBoundary
-                  fallback={(error) => <ErrorPage error={error} />}
-                  // A broken call should not hold the host on screen
-                  onError={() => void hostBridge.setAlwaysOnScreen(false)}
-                >
-                  <Decoration>
-                    <TooltipProvider>
-                      <ClientProvider client={client}>
-                        <MediaDevicesContext value={mediaDevices}>
-                          <ProcessorProvider>
-                            <CallView
-                              client={client}
-                              rtcSession={rtcSession}
-                              isPasswordlessUser={false}
-                              confineToRoom={params.confineToRoom}
-                              preload={params.preload}
-                              skipLobby={params.skipLobby}
-                            />
-                          </ProcessorProvider>
-                        </MediaDevicesContext>
-                      </ClientProvider>
-                    </TooltipProvider>
-                  </Decoration>
-                </ErrorBoundary>
-              </RootElementProvider>
+                  <ErrorBoundary
+                    fallback={(error) => <ErrorPage error={error} />}
+                    // A broken call should not hold the host on screen
+                    onError={() => void hostBridge.setAlwaysOnScreen(false)}
+                  >
+                    <Decoration>
+                      <TooltipProvider>
+                        <ClientProvider client={client}>
+                          <MediaDevicesContext value={mediaDevices}>
+                            <ProcessorProvider>
+                              <CallView
+                                client={client}
+                                rtcSession={rtcSession}
+                                isPasswordlessUser={false}
+                                confineToRoom={params.confineToRoom}
+                                preload={params.preload}
+                                skipLobby={params.skipLobby}
+                              />
+                            </ProcessorProvider>
+                          </MediaDevicesContext>
+                        </ClientProvider>
+                      </TooltipProvider>
+                    </Decoration>
+                  </ErrorBoundary>
+                </RootElementProvider>
+              </div>
             )}
           </div>
         </UrlParamsProvider>

component/package.json

@@ -25,6 +25,10 @@
       "types": "./dist/types/component/index.d.ts",
       "default": "./dist/element-call.js"
     },
+    "./api": {
+      "types": "./dist/types/component/api.d.ts",
+      "default": "./dist/api.js"
+    },
     "./style.css": "./dist/element-call.css"
   },
   "sideEffects": [
@@ -34,6 +38,8 @@
     "prepare": "cd .. && pnpm install --frozen-lockfile && pnpm build:component"
   },
   "peerDependencies": {
+    "@vector-im/compound-design-tokens": "^11.0.0",
+    "@vector-im/compound-web": "^10.0.0",
     "livekit-client": "^2.18.1",
     "matrix-js-sdk": "*",
     "react": "^19",

component/tsconfig.build.json

@@ -13,8 +13,8 @@
     "rootDir": "..",
     "outDir": "./dist/types"
   },
-  // The entry point, plus the ambient declarations (CSS modules, `?react` SVGs,
-  // `import.meta.env`, …) that the sources it reaches rely on.
-  "include": ["./index.tsx", "../src/@types/*.d.ts"],
+  // The entry points, plus the ambient declarations (CSS modules, `?react` SVGs,
+  // `import.meta.env`, …) that the sources they reach rely on.
+  "include": ["./index.tsx", "./api.ts", "../src/@types/*.d.ts"],
   "exclude": []
 }

config/config.devenv.json

@@ -7,7 +7,6 @@
   },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   }

config/config.sample.json

@@ -11,7 +11,6 @@
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_mode": "compatibility",
   "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   }

config/config_netlify_preview.json

@@ -7,7 +7,6 @@
   },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   },

config/config_netlify_preview_sdk.json

@@ -7,7 +7,6 @@
   },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   }

docker-compose-playwright.yml

@@ -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:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167
+    image: ghcr.io/element-hq/element-web:develop@sha256:588f0b4ef516310331432e885920ed722bcafa577b1dd30429394c423d3e2848
   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:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167
+    image: ghcr.io/element-hq/element-web:develop@sha256:588f0b4ef516310331432e885920ed722bcafa577b1dd30429394c423d3e2848

docs/agents/architecture.md

@@ -76,4 +76,10 @@ Code that builds in only one is a bug.
 - `build:component` — `@element-hq/element-call-component`, sources in `component/`
   (its own pnpm project; run pnpm from the repo root). Host API is in the README;
   `pnpm lint:externals` rejects an import of a `react` / `react-dom` /
-  `matrix-js-sdk` / `livekit-client` subpath the externals list omits.
+  `matrix-js-sdk` / `livekit-client` / `@vector-im/compound-web` /
+  `@vector-im/compound-design-tokens` subpath the externals list omits.
+  Compound's stylesheets are loaded by `src/index.css` for the page and by the
+  host for the component, never by `src/base.css`. Two entry
+  points: `index.tsx` (the component) and `api.ts` (types, enums and
+  `configurationForIntent`, for a host that must not load the component). `api.ts`
+  may only reach types and constants — `src/UrlConfiguration.ts`, not `UrlParams`.

docs/agents/code-style.md

@@ -31,7 +31,28 @@ copy, the PR says so.
 - **Suites.** Test cases first, helpers below. Older suites invert this; follow the
   rule in new ones, don't reorder old ones.
 - **Names.** What a thing means, not what it is made of: `naturalLayout$`, not
-  `computedLayout$`. Comments explain why, never what.
+  `computedLayout$`.
+
+## Comments
+
+No comment is the default. One earns its place by giving a reason the code
+cannot: a platform quirk, an outside constraint, a trap that looks like a
+simplification.
+
+- Say the reason, then stop. Test each sentence: does the reason still stand
+  without it? If so, cut it. Most reasons fit on a line, so a long comment is
+  worth a second look — it is usually carrying something that isn't one.
+- Write about the line the comment sits on, in terms of what the code does
+  there — leave layout to the stylesheet and measurements to the design.
+- Name the condition ("where the platform can't route audio"), not the browser
+  or the spec entry.
+- Put history — what was tried, removed or rejected, the dev journal — in the
+  commit or the PR description.
+- In tests, comment only structure that looks wrong but isn't: batching, timers,
+  why this scroll position.
+
+Before keeping one: would it still be true after a CSS change or a refactor of
+its caller? If not, cut it.
 
 ## TypeScript, React and RxJS idiom win on a clash
 

docs/linking.md

@@ -60,6 +60,21 @@ git config --local core.hooksPath .githooks
 
 This will add the hook path for this repository only to .gihooks. which is a tracked (by git) folder containing the pre-commit hook.
 
+## Testing against a matrix-js-sdk branch in CI
+
+Linking covers local development. In CI, `scripts/layered.sh` plays the same
+role for `matrix-js-sdk`: after the usual frozen install, `scripts/fetchdep.sh`
+looks for a matrix-js-sdk branch with the same name as the pull request's head
+branch (in the fork first, when the pull request comes from one). If there is
+one, it is cloned, packed and installed over the locked version. If there is
+none, the install stays as `pnpm-lock.yaml` pins it.
+
+This means a change that needs a not yet merged matrix-js-sdk change can be tested
+by giving both branches the same name. This mirrors how element-web tests against
+matrix-js-sdk. Once the matrix-js-sdk branch is merged and deleted, the pull
+request falls back to the lockfile and needs a lockfile bump to stay green,
+which is also what keeps `main` consistent after the merge.
+
 ## Background
 
 Information, why this approach is used can be found in the [linking concept reasoning](./linking_concept_reasoning.md) document.

docs/matrix_rtc_modes.md

@@ -24,7 +24,7 @@ homeserver does not support sticky events. This is the default.
 MSC4354 and all clients on v0.17.0 or later. The local membership requests its
 token from the Matrix 2.0 JWT endpoint of the
 [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
-and identifies the room by a hashed identity instead of a `livekit_alias`.
+and identifies the room by a hashed identity instead of the Matrix `room_id`.
 (Remote memberships always try the new endpoint first and fall back to the
 legacy one, so remote participants can be on either.)
 

locales/en/app.json

@@ -3,10 +3,6 @@
     "user_menu": "User menu"
   },
   "action": {
-    "add_background_image": "Add image",
-    "background_effect_blur": "Blur",
-    "background_effect_none": "None",
-    "background_effect_numbered": "Background {{n}}",
     "blur_background": "Blur background",
     "close": "Close",
     "copy_link": "Copy link",
@@ -27,9 +23,6 @@
     "upload_file": "Upload file"
   },
   "analytics_notice": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <6>Cookie Policy</6>.",
-  "background_effects": {
-    "slow_in_this_browser": "This browser runs background effects slowly, so other people may see your video stutter."
-  },
   "call_ended_view": {
     "create_account_button": "Create account",
     "create_account_prompt": "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>",
@@ -99,10 +92,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 an 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>",
@@ -177,7 +166,7 @@
   "microphone_level": {
     "label": "Microphone level",
     "no_device": "No microphone found. Connect one, then try again.",
-    "permission_denied": "Element Call cannot use your microphone. Allow access in your browser settings.",
+    "permission_denied": "Microphone access is blocked. Allow it, then try again.",
     "value": "{{level}} of {{max}}"
   },
   "microphone_off": "Microphone off",
@@ -223,7 +212,6 @@
     "auto_gain_control_label": "Automatic gain control",
     "background_blur_header": "Background",
     "background_blur_label": "Blur the background of the video",
-    "background_effects_header": "Background effects",
     "bitrate_label": "Bitrate",
     "blur_not_supported_by_browser": "(Background blur is not supported by this device.)",
     "camera_header": "Camera quality",

package.json

@@ -8,7 +8,7 @@
     "dev:embedded": "vite --config vite-embedded.config.js",
     "dev:component": "vite --config vite-component-dev.config.ts",
     "build": "pnpm build:full",
-    "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "build:full": "node --max-old-space-size=16384 node_modules/vite/bin/vite.js build",
     "build:full:production": "pnpm build:full",
     "build:full:development": "pnpm build:full --mode development",
     "build:embedded": "pnpm build:full --config vite-embedded.config.js",
@@ -83,7 +83,7 @@
     "@types/sdp-transform": "^2.4.5",
     "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^10.0.0",
+    "@vector-im/compound-design-tokens": "^11.0.0",
     "@vector-im/compound-web": "^10.0.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",
@@ -107,7 +107,6 @@
     "matrix-widget-api": "^1.18.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
-    "observable-hooks": "^4.2.3",
     "oxfmt": "^0.66.0",
     "oxlint": "^1.70.0",
     "oxlint-tsgolint": "^0.25.0",
@@ -130,7 +129,6 @@
     "uuid": "^14.0.0",
     "vaul": "^1.0.0",
     "vite": "^8.0.0",
-    "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-node-polyfills": "^0.28.0",
     "vite-plugin-node-stdlib-browser": "^0.2.1",

playwright/audio-menu.spec.ts

@@ -18,11 +18,9 @@ test.describe("the quick audio menu", () => {
     await joinACall(page, "Menu user", "Audio menu");
     await openAudioMenu(page);
 
-    // The speaker list is what the settings modal used to be the only home of.
     await expect(page.getByRole("group", { name: "Speaker" })).toBeVisible();
     await expect(page.getByRole("group", { name: "Microphone" })).toBeVisible();
-    // Named rather than counted: the browser contributes its own fake output
-    // and a "Default" entry, so a total would be a fact about the browser.
+    // By name, not count: the browser adds its own fake output and a Default.
     for (const n of [1, 2, 3])
       await expect(
         page
@@ -30,8 +28,6 @@ test.describe("the quick audio menu", () => {
           .getByRole("menuitemradio", { name: `Fake Speaker ${n}` }),
       ).toBeVisible();
 
-    // Only one entry of a kind is marked, and the meter reports a number
-    // rather than a colour.
     await expect(
       page.getByRole("menuitemradio", { checked: true }),
     ).toHaveCount(2);
@@ -40,10 +36,7 @@ test.describe("the quick audio menu", () => {
     await expect(meter).toHaveAttribute("aria-valuenow", /\d+/);
     await expect(meter).toHaveAttribute("aria-valuetext", /\d+ of \d+/);
 
-    // Both browsers in the matrix can route audio to a chosen output, so the
-    // section offers a real choice. The case where a platform cannot — Safari,
-    // and anything without setSinkId — is covered by a unit check, since no
-    // browser here can reach it.
+    // Both browsers here can route audio; the platform that can't is a unit check.
     await expect(
       page
         .getByRole("group", { name: "Speaker" })
@@ -55,7 +48,7 @@ test.describe("the quick audio menu", () => {
   test("moves the microphone and the speaker without disturbing the call", async ({
     browser,
   }) => {
-    // Two browsers, two joins and a real call between them.
+    // Two browsers and a real call.
     test.slow();
     const hostContext = await browser.newContext({ reducedMotion: "reduce" });
     const host = await hostContext.newPage();
@@ -73,9 +66,7 @@ test.describe("the quick audio menu", () => {
     await openAudioMenu(host);
     await selectDevice(host, "Speaker", "Fake Speaker 2");
 
-    // The point of the criterion: the switch is not a rejoin. Neither side
-    // sees the call drop, and the guest still has both tiles — so the host
-    // never left and came back.
+    // Not a rejoin: neither side drops, and the guest still has both tiles.
     await expect(
       host.getByRole("dialog", { name: "Reconnecting…" }),
     ).not.toBeVisible();
@@ -92,7 +83,7 @@ test.describe("the quick audio menu", () => {
   test("keeps the meter moving while muted, and sends nothing", async ({
     browser,
   }) => {
-    // Two browsers, two joins and a real call between them.
+    // Two browsers and a real call.
     test.slow();
     const hostContext = await browser.newContext({ reducedMotion: "reduce" });
     const host = await hostContext.newPage();
@@ -110,15 +101,12 @@ test.describe("the quick audio menu", () => {
     await expect(mute).toHaveAttribute("aria-checked", "false");
     await openAudioMenu(host);
 
-    // The microphone is held open while muted, so the meter still reports the
-    // hardware. The mute control is what says nothing is being transmitted.
     const meter = host.getByRole("meter", { name: "Microphone level" });
     await expect(meter).toBeVisible();
-    // Queried by test id, not by role: the menu is modal, so Radix takes the
-    // rest of the call out of the accessibility tree while it is open.
+    // By test id: the modal menu hides the rest of the call from the a11y tree.
     await expect(mute).toHaveAttribute("aria-checked", "false");
     await expect(mute).toBeVisible();
-    // And the listener is told so, rather than being left to guess from silence.
+    // And the guest is shown the mute.
     await expect(
       guest.getByTestId("videoTile").filter({ hasText: "Muted host" }),
     ).toBeVisible();
@@ -137,9 +125,8 @@ test.describe("the quick audio menu", () => {
     const meter = page.getByRole("meter", { name: "Microphone level" });
     await expect(meter).toBeVisible();
 
-    // Scrolled so the microphones start at the top of the list and run past its
-    // bottom: the position that tells a pinned meter from one that merely
-    // happens to be last.
+    // Scrolled so the microphones start at the top: only there does a pinned
+    // meter differ from one that is simply last.
     const list = page.locator("[role='menu'] div[role='none']").first();
     await list.evaluate((element) => {
       const group = element.querySelector("[role='group'][aria-label*='icro']");
@@ -150,7 +137,6 @@ test.describe("the quick audio menu", () => {
 
     await expect(meter).toBeInViewport();
     await expectPinnedInside(meter, list);
-    // Every entry stays reachable, which is what the scroll is for.
     await expect(
       page.getByRole("menuitemradio", { name: "Fake Microphone 20" }),
     ).toBeVisible();
@@ -169,16 +155,14 @@ test.describe("the quick audio menu", () => {
     await openAudioMenu(page);
 
     const first = page.getByRole("menuitemradio").first();
-    // Opened by pointer, so no ring, even though Radix has moved focus into the
-    // menu already.
+    // Opened by pointer: no ring, though Radix has moved focus into the menu.
     await expect.poll(async () => outlineWidth(first)).toBe(0);
 
     await page.keyboard.press("ArrowDown");
     const focused = page.locator("[role='menuitemradio']:focus");
     await expect.poll(async () => outlineWidth(focused)).toBeGreaterThan(0);
 
-    // The pointer takes it away again: the menu focuses whatever it is over, so
-    // a ring that followed focus alone would trail the mouse.
+    // And the pointer takes it away again.
     await first.hover();
     await expect.poll(async () => outlineWidth(focused)).toBe(0);
   });
@@ -193,8 +177,7 @@ async function joinACall(
   await page.goto("/");
   await SpaHelpers.createCall(page, userName, callName, true);
   await expect(page.getByTestId("name_tag")).toContainText(userName);
-  // The media controls stay disabled until the devices have enumerated, and
-  // every test here drives them.
+  // The media controls stay disabled until devices have enumerated.
   await expect(page.getByTestId("incall_mute")).toBeEnabled({
     timeout: 10_000,
   });
@@ -214,19 +197,12 @@ async function selectDevice(
     .getByRole("group", { name: section })
     .getByRole("menuitemradio", { name });
   await item.click();
-  // Selecting does not close the menu — the component prevents the default so
-  // the list survives a mis-click — so it is dismissed explicitly.
+  // Selecting doesn't close the menu, so dismiss it.
   await page.keyboard.press("Escape");
   await expect(page.getByRole("menu")).not.toBeVisible();
 }
 
-/**
- * Asserts the meter sits within the scrollport, and inside the menu's frame.
- *
- * The meter is the one opaque element in the menu, so it is the one thing that
- * can paint over the border. Whether it actually does needs a screenshot; this
- * pins the geometry that decides it.
- */
+/** Asserts the meter sits within the scrollport and inside the menu's frame. */
 async function expectPinnedInside(
   meter: Locator,
   list: Locator,
@@ -243,7 +219,7 @@ async function expectPinnedInside(
   expect(meterBox.x + meterBox.width).toBeLessThan(frame.x + frame.width);
 }
 
-/** The painted outline width in pixels, however the stylesheet spells it. */
+/** Painted outline width, in px. */
 async function outlineWidth(item: Locator): Promise<number> {
   if ((await item.count()) === 0) return 0;
   return item.first().evaluate((element) => {

playwright/component/audio-menu.spec.ts

@@ -11,22 +11,12 @@ import { createUserAndRoom, resizeContainer, startHarness } from "./harness.ts";
 import { installFakeDevices } from "../utils/fake-devices.ts";
 
 /**
- * The device menu where Element Call is a component in a host's page rather
- * than the whole of one.
- *
- * This is the case the stylesheets cannot describe: the menu is portalled to
- * the document, so a container query and a viewport unit both measure the wrong
- * thing — the first has no container to resolve against out there, the second
- * measures a page Element Call does not own. The menu has to be sized against
- * the space the call is actually drawn in.
- *
- * Driven from the lobby rather than a joined call. The footer builds the same
- * menu from the same device behaviours in both, and the container is the same
- * size either way, so joining would only add two connections' worth of flake.
+ * The device menu with Element Call as a component in a host page, where the
+ * portalled menu must be sized against the call, not the window. Driven from
+ * the lobby: it builds the same menu, without two connections' worth of flake.
  */
 
-// Signing in, setting up crypto and syncing happen twice before anything is on
-// screen, as in component-call.spec.ts
+// Sign-in, crypto setup and sync happen twice before anything shows.
 test.describe.configure({ timeout: 180_000 });
 
 test("sizes the device list against the call, not the window", async ({
@@ -37,8 +27,7 @@ test("sizes the device list against the call, not the window", async ({
   const panes = await startHarness(page, username, roomId);
   const pane = panes.first();
 
-  // A short call in a much taller page: the difference between measuring the
-  // call and measuring the window.
+  // A short call in a much taller page.
   const container = pane.getByTestId("call-container");
   await resizeContainer(container, { width: 900, height: 400 });
   await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
@@ -50,8 +39,6 @@ test("sizes the device list against the call, not the window", async ({
   const windowHeight = page.viewportSize()!.height;
   const listHeight = (await list.boundingBox())!.height;
 
-  // Sized against the call. Were it sized against the window the list would be
-  // half as tall again, and the assertion below would not be able to tell.
   expect(callHeight).toBeLessThan(windowHeight * 0.75);
   expect(listHeight).toBeLessThanOrEqual(callHeight);
   expect(listHeight).toBeLessThan(windowHeight * 0.6);
@@ -72,9 +59,7 @@ test("follows the call area when the host resizes it", async ({ page }) => {
   const list = await openDeviceList(page, pane);
   const whenShort = (await list.boundingBox())!.height;
 
-  // The host grows the space Element Call is drawn in while the menu is open —
-  // a panel opening, a window dragged, a phone turned. A bound taken once on
-  // opening would still describe the smaller call.
+  // The host grows the call while the menu is open.
   await resizeContainer(container, { width: 900, height: 700 });
   await expect
     .poll(async () => (await list.boundingBox())!.height)
@@ -88,15 +73,13 @@ test("keeps every device reachable in a small container", async ({ page }) => {
   const pane = panes.first();
 
   const container = pane.getByTestId("call-container");
-  // Narrow as well as short, which is where entries get pushed out of reach.
   await resizeContainer(container, { width: 400, height: 360 });
   await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
     timeout: 60_000,
   });
 
   const list = await openDeviceList(page, pane);
-  // More devices than the space allows, so the list has to scroll rather than
-  // put entries somewhere they cannot be got at.
+  // More devices than fit, so the list must scroll.
   expect(await list.evaluate((el) => el.scrollHeight > el.clientHeight)).toBe(
     true,
   );
@@ -104,14 +87,12 @@ test("keeps every device reachable in a small container", async ({ page }) => {
   const last = page.getByRole("menuitemradio", { name: "Fake Microphone 20" });
   await last.scrollIntoViewIfNeeded();
   await expect(last).toBeInViewport();
-  // Reachable means usable, not merely painted: D11 accepts that the menu may
-  // be drawn outside the call area, so this asserts reach rather than
-  // containment.
+  // Reachable means clickable: the menu may be drawn outside the call area.
   await last.click();
   await expect(last).toHaveAttribute("aria-checked", "true");
 });
 
-test("tracks the focus modality of its own call, not the page", async ({
+test("tracks the focus source of its own call, not the page", async ({
   page,
 }) => {
   await installFakeDevices(page);
@@ -124,36 +105,25 @@ test("tracks the focus modality of its own call, not the page", async ({
     timeout: 60_000,
   });
   await openDeviceList(page, pane);
-  // The menu owns the modality, because every item it can focus has to answer
-  // to it — the device rows and the camera menu's blur toggle alike.
   const menu = page.getByRole("menu");
 
-  // Asserted on the attribute rather than the painted ring, which cannot be
-  // read here: the menu is portalled outside the call root, and the component
-  // build scopes the stylesheet to it, so neither the ring nor the rule that
-  // suppresses the browser's own reaches this menu. The paint is asserted
-  // standalone instead — in the story and in audio-menu.spec.ts. What is on
-  // trial here is which call the tracking answers for.
-  await expect(menu).toHaveAttribute("data-focus-modality", "pointer");
+  // Asserted on the attribute: the component build's scoped stylesheet doesn't
+  // reach the portalled menu, so its ring can't be read here.
+  await expect(menu).toHaveAttribute("data-focus-source", "pointer");
 
-  // A key pressed in the other call on this page — or anywhere in the host's
-  // own page — says nothing about how this menu is being used.
+  // A key pressed in the other call says nothing about this menu.
   await other.evaluate((element) =>
     element.dispatchEvent(
       new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
     ),
   );
-  await expect(menu).toHaveAttribute("data-focus-modality", "pointer");
+  await expect(menu).toHaveAttribute("data-focus-source", "pointer");
 
-  // A key pressed in this menu does.
   await page.keyboard.press("ArrowDown");
-  await expect(menu).toHaveAttribute("data-focus-modality", "keyboard");
+  await expect(menu).toHaveAttribute("data-focus-source", "keyboard");
 });
 
-/**
- * Opens the microphone menu of one component and returns its scrolling device
- * list, which lives outside the component: the menu is portalled to the page.
- */
+/** Opens a component's microphone menu and returns its device list. */
 async function openDeviceList(page: Page, pane: Locator): Promise<Locator> {
   await pane
     .getByRole("button", { name: "Microphone" })

playwright/fixtures/widget-user.ts

@@ -132,7 +132,7 @@ export const widgetTest = test.extend<MyFixtures>({
 
       await ewPage1
         .getByRole("navigation", { name: "Room list" })
-        .getByRole("button", { name: "New conversation" })
+        .getByRole("button", { name: "New", exact: true })
         .click();
 
       await ewPage1.getByRole("menuitem", { name: "Start chat" }).click();

playwright/utils/fake-devices.ts

@@ -8,20 +8,10 @@ Please see LICENSE in the repository root for full details.
 import { type Page } from "@playwright/test";
 
 /**
- * Gives the browser more fake devices than it ships with.
- *
- * A headless browser's fake capture offers one microphone and one speaker,
- * which is one short of what a device menu is for: with no choice to make, every
- * entry renders disabled. These are synthetic entries on top of the real fake
- * device, so the menu has a list to show and a selection to move, and the app
- * runs its real device pipeline against them.
- *
- * What they do not do is route audio: every entry is backed by the same capture,
- * and `setSinkId` is accepted rather than honoured. A test can prove that
- * choosing a device changes the app's state and does not disturb the call. That
- * a listener hears the change needs hardware, and stays a manual check.
- *
- * Must be called before the page navigates.
+ * Adds synthetic devices beside the browser's one fake microphone and speaker,
+ * so the menu has a choice to show. They share one capture and `setSinkId` is
+ * accepted but not honoured: routing still needs hardware and a manual check.
+ * Call before the page navigates.
  */
 export async function installFakeDevices(
   page: Page,
@@ -58,8 +48,7 @@ export async function installFakeDevices(
         ...synthetic("audiooutput", speakers, "Fake Speaker"),
       ];
 
-      // Our ids name no hardware, so an exact-device constraint on one would be
-      // rejected. Drop it and let the one real fake device answer.
+      // Our ids name no hardware, so drop the exact-device constraint.
       const getUserMedia = devices.getUserMedia.bind(devices);
       devices.getUserMedia = async (
         constraints?: MediaStreamConstraints,
@@ -77,10 +66,8 @@ export async function installFakeDevices(
         return getUserMedia(constraints);
       };
 
-      // Routing to a device that does not exist would reject, and the app
-      // treats that as a failed switch. Both sinks are patched: Element Call
-      // routes its own AudioContext as well as the media elements, and leaving
-      // that one alone logs a NotFoundError for every switch.
+      // Accept routing to our ids on both media elements and the AudioContext,
+      // which the app also routes.
       for (const proto of [
         HTMLMediaElement.prototype,
         AudioContext.prototype,

playwright/widget/test-helpers.ts

@@ -223,7 +223,7 @@ export class TestHelpers {
 
     await page
       .getByRole("navigation", { name: "Room list" })
-      .getByRole("button", { name: "New conversation" })
+      .getByRole("button", { name: "New", exact: true })
       .click();
 
     await page.getByRole("menuitem", { name: "New Room" }).click({

pnpm-lock.yaml

@@ -131,11 +131,11 @@ importers:
         specifier: ^10.2.11
         version: 10.3.1(react@19.2.8)
       '@vector-im/compound-design-tokens':
-        specifier: ^10.0.0
-        version: 10.2.4(@types/react@19.2.18)(react@19.2.8)
+        specifier: ^11.0.0
+        version: 11.0.0(@types/react@19.2.18)(react@19.2.8)
       '@vector-im/compound-web':
         specifier: ^10.0.0
-        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@vitejs/plugin-react':
         specifier: ^6.0.2
         version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@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)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@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))
@@ -192,7 +192,7 @@ importers:
         version: 1.9.2
       matrix-js-sdk:
         specifier: github:matrix-org/matrix-js-sdk#develop
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999
       matrix-widget-api:
         specifier: ^1.18.0
         version: 1.19.0
@@ -202,9 +202,6 @@ importers:
       normalize.css:
         specifier: ^8.0.1
         version: 8.0.1
-      observable-hooks:
-        specifier: ^4.2.3
-        version: 4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2)
       oxfmt:
         specifier: ^0.66.0
         version: 0.66.0
@@ -271,9 +268,6 @@ importers:
       vite:
         specifier: ^8.0.0
         version: 8.2.2(@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)
-      vite-plugin-generate-file:
-        specifier: ^0.3.0
-        version: 0.3.1
       vite-plugin-html:
         specifier: ^3.2.2
         version: 3.2.2(vite@8.2.2(@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))
@@ -1197,8 +1191,8 @@ packages:
       '@types/dom-mediacapture-transform': ^0.1.9
       livekit-client: ^1.12.0 || ^2.1.0
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0':
-    resolution: {integrity: sha512-E826Hy1rG26LanPjtSsOiVRcVoHfSgPgj2r2Xsb5RPScpaKi9XJADQ0u3dNjRCitZPX4oyLNl1FDd5AfDlmIwQ==}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0':
+    resolution: {integrity: sha512-NtLzNDTEfNASBjNCTGZHuk7N0jrQhS6Zx2CM857rCHZYYh/rpbKGQNrJ7azktm4S1P5Jy3WU3nwJTGohGw26qQ==}
     engines: {node: '>= 18'}
 
   '@mdx-js/react@3.1.1':
@@ -3229,8 +3223,8 @@ packages:
     peerDependencies:
       react: '>= 16.8.0'
 
-  '@vector-im/compound-design-tokens@10.2.4':
-    resolution: {integrity: sha512-2aCjhSvJxktPWnvh5s9Xdc0Rd76AfHqbDbN4QjOxo2VIac6zYdLyQbxMUQ5ZeoR9G3vAxILd0H1UvApRfMilpQ==}
+  '@vector-im/compound-design-tokens@11.0.0':
+    resolution: {integrity: sha512-pWz0Q67Xbo8gwzaTeFbTTcM6i29ju6PR7SqyuExr2nIV3j9K785cOInft8FA2CM7PEapkr6TRtJKR/4xtWh2RA==}
     peerDependencies:
       '@adobe/leonardo-contrast-colors': ^1.0.0
       '@types/react': '*'
@@ -3246,8 +3240,8 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@10.0.1':
-    resolution: {integrity: sha512-CT3aGMalPSf53o3JUbBF7EA10Rfp+auftIuBwOUSna+hfZ/zPxGLTFcuCuOJ7L8hrzijM+V4I8L0PUkfyOczpg==}
+  '@vector-im/compound-web@10.1.0':
+    resolution: {integrity: sha512-Lhw9Q+RZo1GtDYjF5PXWTD0zdfbrz/vnSVBYFHC8Hq+YeDule2QfGbTRo8IVHeV7jK6ZzsLc8zb6553eeIRLYg==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
@@ -3662,8 +3656,8 @@ packages:
   constants-browserify@1.0.0:
     resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==}
 
-  content-type@3.0.0:
-    resolution: {integrity: sha512-AIi5H6p0xk5uknXcN3/rmhP8jgp69OfSe/JuKiQAFprJ7UGw7mwj7m4XcmDzlrnJDG+cGpphAINGdU3g3g7kDw==}
+  content-type@3.1.1:
+    resolution: {integrity: sha512-GW4qUsfFo59d0HbUibDlWv5wPz+vAAcaTWbKIuKCf0JkC7wWkSyf8f13IpXn5JkeMlB2P8iTSSIjwXljorg2vA==}
     engines: {node: '>=22'}
 
   convert-source-map@2.0.0:
@@ -4468,10 +4462,6 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@4.3.0:
-    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
-    hasBin: true
-
   js-yaml@4.3.1:
     resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
     hasBin: true
@@ -4683,9 +4673,9 @@ 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/24929be0e741be6a5d0a7226f1c682e245263b8a:
-    resolution: {gitHosted: true, integrity: sha512-0EGwbXzvG88sBOxq4ZlCRwT4VpQj2xkizfyy0A3bTSK0ysb6/gXJ/o1WPFoqCjRGMDgPq4gAsk92xGtHA7EhPg==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a}
-    version: 42.2.0
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999:
+    resolution: {gitHosted: true, integrity: sha512-qF8++74MX36KS1KEw6Lc8HHXgZ6nHD1oUU4yBZUj5vVPvZTIspk1lOGztkFmizE5vmLAHd5tdadL9Xu1Asy4bA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999}
+    version: 42.3.0
     engines: {node: '>=22.0.0'}
 
   matrix-widget-api@1.19.0:
@@ -4706,14 +4696,6 @@ packages:
     resolution: {integrity: sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==}
     hasBin: true
 
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
   mimic-function@5.0.1:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
@@ -4816,13 +4798,6 @@ packages:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
-  observable-hooks@4.2.4:
-    resolution: {integrity: sha512-FdTQgyw1h5bG/QHCBIqctdBSnv9VARJCEilgpV6L2qlw1yeLqFIwPm4U15dMtl5kDmNN0hSt+Nl6iYbLFwEcQA==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-      rxjs: '>=6.0.0'
-
   obug@2.1.4:
     resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==}
     engines: {node: '>=12.20.0'}
@@ -4905,8 +4880,8 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-retry@8.0.0:
-    resolution: {integrity: sha512-kFVqH1HxOHp8LupNsOys7bSV09VYTRLxarH/mokO4Rqhk6wGi70E0jh4VzvVGXfEVNggHoHLAMWsQqHyU1Ey9A==}
+  p-retry@8.0.1:
+    resolution: {integrity: sha512-NAigyu8hfvJe7MsS18mnc4is0MZtau3QMdBklaJKK23oBQb6occO3UPM3vHmTckW8KhfyjMZaUOqdTFEYliHgg==}
     engines: {node: '>=22'}
 
   p-try@2.2.0:
@@ -5914,9 +5889,6 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
-  vite-plugin-generate-file@0.3.1:
-    resolution: {integrity: sha512-tiA3gkPM21MS2+RyqsBMT33GSlM9LM1TJjf6vGvV/e/ml3e3vTKfuH3l2N0NpUgcayvj1fXnmlo5YBuahA6bsg==}
-
   vite-plugin-html@3.2.2:
     resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==}
     peerDependencies:
@@ -7111,7 +7083,7 @@ snapshots:
       '@types/dom-mediacapture-transform': 0.1.11
       livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22)
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0': {}
 
   '@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
@@ -8695,12 +8667,12 @@ snapshots:
       '@use-gesture/core': 10.3.1
       react: 19.2.8
 
-  '@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8)':
+  '@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8)':
     optionalDependencies:
       '@types/react': 19.2.18
       react: 19.2.8
 
-  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -8712,7 +8684,7 @@ snapshots:
       '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@vector-im/compound-design-tokens': 10.2.4(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 11.0.0(@types/react@19.2.18)(react@19.2.8)
       classnames: 2.5.1
       react: 19.2.8
       vaul: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -9173,7 +9145,7 @@ snapshots:
 
   constants-browserify@1.0.0: {}
 
-  content-type@3.0.0: {}
+  content-type@3.1.1: {}
 
   convert-source-map@2.0.0: {}
 
@@ -10044,10 +10016,6 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-yaml@4.3.0:
-    dependencies:
-      argparse: 2.0.1
-
   js-yaml@4.3.1:
     dependencies:
       argparse: 2.0.1
@@ -10259,17 +10227,17 @@ snapshots:
 
   matrix-events-sdk@0.0.1: {}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999:
     dependencies:
       '@babel/runtime': 8.0.0
-      '@matrix-org/matrix-sdk-crypto-wasm': 18.5.0
+      '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0
       another-json: 0.2.0
       bs58: 6.0.0
-      content-type: 3.0.0
+      content-type: 3.1.1
       loglevel: 1.9.2
       matrix-events-sdk: 0.0.1
       matrix-widget-api: 1.19.0
-      p-retry: 8.0.0
+      p-retry: 8.0.1
       sdp-transform: 3.0.0
       unhomoglyph: 1.0.6
 
@@ -10296,12 +10264,6 @@ snapshots:
       bn.js: 4.12.3
       brorand: 1.1.0
 
-  mime-db@1.52.0: {}
-
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
   mimic-function@5.0.1: {}
 
   min-indent@1.0.1: {}
@@ -10410,12 +10372,6 @@ snapshots:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  observable-hooks@4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2):
-    dependencies:
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      rxjs: 7.8.2
-
   obug@2.1.4: {}
 
   once@1.4.0:
@@ -10600,7 +10556,7 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  p-retry@8.0.0:
+  p-retry@8.0.1:
     dependencies:
       is-network-error: 1.3.2
 
@@ -11668,13 +11624,6 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
-  vite-plugin-generate-file@0.3.1:
-    dependencies:
-      ejs: 3.1.10
-      js-yaml: 4.3.0
-      mime-types: 2.1.35
-      picocolors: 1.1.1
-
   vite-plugin-html@3.2.2(vite@8.2.2(@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:
       '@rollup/pluginutils': 4.2.1

scripts/check-component-externals.mjs

@@ -9,9 +9,11 @@ Please see LICENSE in the repository root for full details.
  * Checks that the component build leaves the packages a host must supply to
  * the host.
  *
- * A host application already has React, the Matrix SDK and LiveKit, and a
- * second copy of any of them is worse than dead weight: React would hold two
- * sets of hooks, and the Matrix client would run two sync loops. So the
+ * A host application already has React, the Matrix SDK, LiveKit and Compound,
+ * and a second copy of any of them is worse than dead weight: React would hold
+ * two sets of hooks, the Matrix client would run two sync loops, and a second
+ * Compound would style the tooltips it floats into the host's body with class
+ * names the host's stylesheet does not know. So the
  * component build lists them as external — but that list has to name every
  * subpath, since the bundler silently ignores the pattern and callback forms
  * of the option, and an import it does not cover is bundled with no warning at
@@ -33,6 +35,9 @@ import { loadConfigFromFile } from "vite";
 
 const CONFIG = "vite-component.config.ts";
 const SOURCES = ["src", "component"];
+// The development harness is a host, not part of the component: it is the
+// one that imports what a host supplies (Compound's stylesheets, say).
+const EXCLUDED = ["component/dev"];
 
 /** The packages whose duplication would break a host, rather than merely enlarge it. */
 const MUST_BE_EXTERNAL = [
@@ -40,6 +45,8 @@ const MUST_BE_EXTERNAL = [
   "react-dom",
   "matrix-js-sdk",
   "livekit-client",
+  "@vector-im/compound-web",
+  "@vector-im/compound-design-tokens",
 ];
 
 const isTestFile = (name) =>
@@ -49,6 +56,7 @@ const isTestFile = (name) =>
 async function* sourceFiles(dir) {
   for (const entry of await readdir(dir, { withFileTypes: true })) {
     const path = join(dir, entry.name);
+    if (EXCLUDED.includes(path)) continue;
     if (entry.isDirectory()) yield* sourceFiles(path);
     else if (/\.(ts|tsx)$/.test(entry.name) && !isTestFile(entry.name))
       yield path;

scripts/fetchdep.sh

@@ -0,0 +1,73 @@
+#!/usr/bin/env bash
+
+# Clones the branch of a dependency's repository that has the same name as
+# the pull request branch under test, so a change spanning both repositories
+# can be tested before either side is merged. Inspired by scripts/fetchdep.sh 
+# element-web.
+#
+# Usage: scripts/fetchdep.sh <org> <repo> [ref]
+#
+# The clone lands in ./<repo>. When the pull request comes from a fork and
+# PR_HEAD_REPO_OWNER was set, the fork's own copy of the repository is tried
+# before <org>'s. Exits 0 when a branch was cloned and 1 when there is none,
+# so the caller can keep the locked version in that case. Without a ref,
+# nothing is closed outside a pull request.
+
+set -eu
+
+org=$1
+repo=$2
+ref=${3:-}
+
+rm -rf "$repo"
+
+# If a ref was passed, try to clone it or die.
+if [ -n "$ref" ]; then
+    echo "fetchdep.sh: Using $org/$repo at $ref"
+    git clone --depth 1 "https://github.com/$org/$repo.git" "$repo"
+    git -C "$repo" fetch --depth 1 origin "$ref"
+    git -C "$repo" -c advice.detachedHead=false checkout FETCH_HEAD
+    git -C "$repo" log -1
+    exit 0
+fi
+
+# Otherwise ensure that we're on a pull request.
+head_ref=${GITHUB_HEAD_REF:-}
+if [ -z "$head_ref" ]; then
+    echo "fetchdep.sh: Not a pull request, nothing to match"
+    exit 1
+fi
+
+# Bots name their branches the same way in every repository, so a match on
+# one of theirs would be a coincidence rather than a paired change.
+case "$head_ref" in
+    renovate/* | dependabot/*)
+        echo "fetchdep.sh: Not matching bot branch $head_ref"
+        exit 1
+        ;;
+esac
+
+# Clones a branch if it exists and ends the script on success.
+clone() {
+    local try_org=$1
+    local branch=$2
+    echo "fetchdep.sh: Trying to use $try_org/$repo#$branch"
+    # Disable auth prompts: https://serverfault.com/a/665959
+    if GIT_TERMINAL_PROMPT=0 git clone "https://github.com/$try_org/$repo.git" "$repo" --branch "$branch" --depth 1; then
+        git -C "$repo" log -1
+        # Surface the match on the workflow run summary.
+        echo "::notice title=Matched $repo branch::Using $try_org/$repo#$branch at $(git -C "$repo" rev-parse HEAD)"
+        exit 0
+    fi
+}
+
+# Try cloning from the fork, then from the org.
+head_owner=${PR_HEAD_REPO_OWNER:-}
+if [ -n "$head_owner" ] && [ "$head_owner" != "${GITHUB_REPOSITORY_OWNER:-}" ]; then
+    clone "$head_owner" "$head_ref"
+fi
+clone "$org" "$head_ref"
+
+# Nothing worked. Die.
+echo "fetchdep.sh: No branch named $head_ref in $org/$repo"
+exit 1

scripts/layered.sh

@@ -0,0 +1,62 @@
+#!/usr/bin/env bash
+
+# Installs dependencies, then swaps matrix-js-sdk for a branch of the same
+# name as the pull request branch under test if one exists. This is what
+# lets CI test an Element Call branch together with a matrix-js-sdk branch
+# before either is merged. Inspired by scripts/layered.sh in element-web.
+#
+# Usage: scripts/layered.sh [pnpm install flags]
+#
+# The layering is only performed when package.json uses the develop branch of
+# matrix-js-sdk and the run is for a pull request whose branch has a matrix-js-sdk
+# counterpart. Otherwise the dependency is left as pnpm-lock.yaml pins it.
+#
+# The matrix-js-sdk checkout is nested inside this directory because some CI
+# systems do not allow moving above the primary checkout. It is git-ignored.
+#
+# Set JS_SDK_GITHUB_BASE_REF to a ref to use that exact ref of matrix-js-sdk
+# instead of looking for a matching branch.
+#
+# This script is only meant to be used in CI. For local development use
+# see docs/linking.md.
+
+set -ex
+
+# Paths below are relative to the repository root.
+cd "$(dirname "$0")/.."
+
+pnpm install --frozen-lockfile "$@"
+
+js_sdk_dep=$(jq -r '.devDependencies["matrix-js-sdk"]' < package.json)
+
+# Only layer when package.json follows the branch head rather than pinning a
+# release, so a release build keeps its pinned version.
+if [ "$js_sdk_dep" != "github:matrix-org/matrix-js-sdk#develop" ]; then
+    echo "layered.sh: Skipping matrix-js-sdk fetch and install as package.json pins $js_sdk_dep"
+    exit 0
+fi
+
+if ! scripts/fetchdep.sh matrix-org matrix-js-sdk "${JS_SDK_GITHUB_BASE_REF:-}"; then
+    echo "layered.sh: No matching matrix-js-sdk branch, keeping the locked version"
+    exit 0
+fi
+
+# matrix-js-sdk pins its pnpm version in `devEngines` only. Under corepack,
+# pnpm does not switch versions on its own and corepack, finding no
+# `packageManager` field there, would walk up to this project's and use
+# ours. Pinning it in the clone makes every pnpm invocation inside that
+# directory, including the `prepare` script run by pack, use the right one.
+js_sdk_pnpm="pnpm@$(jq -r '.devEngines.packageManager.version' < matrix-js-sdk/package.json)"
+jq --arg pm "$js_sdk_pnpm" '.packageManager = $pm' matrix-js-sdk/package.json > matrix-js-sdk/package.json.tmp
+mv matrix-js-sdk/package.json.tmp matrix-js-sdk/package.json
+export COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+
+# Install matrix-js-sdk's build dependencies. `prepare` runs on pack below,
+# so it is skipped here.
+(cd matrix-js-sdk && pnpm install --frozen-lockfile --ignore-scripts)
+
+# Rather than `pnpm link`, build matrix-js-sdk into a tarball and install
+# that. This better reflects a clean install: dependencies may be hoisted
+# and shared, and there is no tsconfig.json to pick up sources from.
+(cd matrix-js-sdk && pnpm pack --out matrix-js-sdk.tgz)
+pnpm install "$(pwd)/matrix-js-sdk/matrix-js-sdk.tgz" "$@"

src/App.tsx

@@ -22,8 +22,6 @@ import {
 } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { TooltipProvider } from "@vector-im/compound-web";
-
-import { BackgroundEffectsBench } from "./livekit/BackgroundEffectsBench";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type MatrixClient } from "matrix-js-sdk";
 import { I18nextProvider } from "react-i18next";
@@ -158,15 +156,6 @@ export const App: FC<Props> = ({ vm, widget }) => {
                 <SentryRoute path="/" element={<HomePage />} />
                 <SentryRoute path="/login" element={<LoginPage />} />
                 <SentryRoute path="/register" element={<RegisterPage />} />
-                {/* Exploration only: measures whether this device can run
-                    background effects, on a device the app refuses to run them
-                    on. One path segment, not two: the config is fetched
-                    relative to the page, so a nested path looks for it in a
-                    directory that does not exist and the app never starts. */}
-                <SentryRoute
-                  path="/background-effects-bench"
-                  element={<BackgroundEffectsBench />}
-                />
                 <SentryRoute path="*" element={<RoomPage />} />
               </Routes>
             </Sentry.ErrorBoundary>

src/MediaDevicesContext.ts

@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { createContext, use, useMemo } from "react";
-import { useObservableEagerState } from "observable-hooks";
 
 import { type MediaDevices } from "./state/MediaDevices";
+import { useBehavior } from "./useBehavior";
 
 export const MediaDevicesContext = createContext<MediaDevices | undefined>(
   undefined,
@@ -35,7 +35,7 @@ export const useEarpieceAudioConfig = (): {
   volume: number;
 } => {
   const devices = useMediaDevices();
-  const audioOutput = useObservableEagerState(devices.audioOutput.selected$);
+  const audioOutput = useBehavior(devices.audioOutput.selected$);
   const isVirtualEarpiece = audioOutput?.virtualEarpiece ?? false;
   return {
     // We use only the right speaker (pan = 1) for the earpiece.

src/UrlConfiguration.ts

@@ -0,0 +1,242 @@
+/*
+Copyright 2022-2024 New Vector Ltd.
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * How Element Call can be told to behave, and what each intent means.
+ *
+ * Kept apart from {@link UrlParams} on purpose: everything here is constants,
+ * types and one function of them, so that a host of the component can import
+ * these — the enums it needs as values, the defaults an intent implies — without
+ * loading Element Call itself. UrlParams, which reads them from a URL, needs
+ * the router, the config and the rest of the app; this module must not.
+ * `component/api.ts` is built from it as an entry point of its own.
+ */
+
+import {
+  type RTCCallIntent,
+  type RTCNotificationType,
+} from "matrix-js-sdk/lib/matrixrtc";
+
+import { platform } from "./Platform";
+
+export enum UserIntent {
+  StartNewCall = "start_call",
+  JoinExistingCall = "join_existing",
+  StartNewCallVoice = "start_call_voice",
+  JoinExistingCallVoice = "join_existing_voice",
+  StartNewCallDM = "start_call_dm",
+  StartNewCallDMVoice = "start_call_dm_voice",
+  JoinExistingCallDM = "join_existing_dm",
+  JoinExistingCallDMVoice = "join_existing_dm_voice",
+  Unknown = "unknown",
+}
+
+export enum HeaderStyle {
+  None = "none",
+  Standard = "standard",
+  AppBar = "app_bar",
+}
+
+export enum BackgroundStyle {
+  Solid = "solid",
+  Gradient = "gradient",
+}
+
+/**
+ * The configuration for the app, which can be set via URL parameters.
+ * Those property are different to the UrlProperties, since they are all optional
+ * and configure the behavior of the app. Their value is the same if EC is used in
+ * the same context but with different accounts/users.
+ *
+ * Their defaults can be controlled by the `intent` property.
+ */
+export interface UrlConfiguration {
+  /**
+   * Whether the app should keep the user confined to the current call/room.
+   */
+  confineToRoom: boolean;
+  /**
+   * Whether the app should pause before joining the call until it sees an
+   * io.element.join widget action, allowing it to be preloaded.
+   */
+  preload: boolean;
+  /**
+   * The style of headers to show. "standard" is the default arrangement, "none"
+   * hides the header entirely, and "app_bar" produces a header with a back
+   * button like you might see in mobile apps. The callback for the back button
+   * is window.controls.onBackButtonPressed.
+   */
+  header: HeaderStyle;
+  /**
+   * Whether the controls should be shown. For screen recording no controls can be desired.
+   */
+  showControls: boolean;
+  /**
+   * Whether to hide the screen-sharing button.
+   */
+  hideScreensharing: boolean;
+
+  /**
+   * Whether the app is allowed to use fallback STUN servers for ICE in case the
+   * user's homeserver doesn't provide any.
+   */
+  allowIceFallback: boolean;
+
+  /**
+   * Whether the app should use per participant keys for E2EE.
+   */
+  perParticipantE2EE: boolean;
+  /**
+   * Whether the global JS controls for audio output devices should be enabled,
+   * allowing the list of output devices to be controlled by the app hosting
+   * Element Call.
+   */
+  controlledAudioDevices: boolean;
+  /**
+   * Setting this flag skips the lobby and brings you in the call directly.
+   * In the widget this can be combined with preload to pass the device settings
+   * with the join widget action.
+   */
+  skipLobby: boolean;
+  /**
+   * Setting this flag makes element call show the lobby after leaving a call.
+   * This is useful for video rooms.
+   */
+  returnToLobby: boolean;
+  /**
+   * Whether and what type of notification EC should send, when the user joins the call.
+   */
+  sendNotificationType?: RTCNotificationType;
+  /**
+   * Whether the app should automatically leave the call when there
+   * is no one left in the call.
+   * This is one part to make the call matrixRTC session behave like a telephone call.
+   */
+  autoLeaveWhenOthersLeft: boolean;
+
+  /**
+   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
+   * This is a no-op if not combined with sendNotificationType.
+   *
+   * This entails:
+   *  - show ui that it is awaiting an answer
+   *  - play a sound that indicates that it is awaiting an answer
+   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
+   */
+  waitForCallPickup: boolean;
+
+  /**
+   * Whether to enable echo cancellation for audio capture.
+   * Defaults to true.
+   */
+  echoCancellation?: boolean;
+  /**
+   * Whether to enable noise suppression for audio capture.
+   * Defaults to true.
+   */
+  noiseSuppression?: boolean;
+
+  callIntent?: RTCCallIntent;
+}
+
+// If you need to add a new flag to this interface, prefer a name that describes
+// a specific behavior (such as 'confineToRoom'), rather than one that describes
+// the situations that call for this behavior ('isEmbedded'). This makes it
+// clearer what each flag means, and helps us avoid coupling Element Call's
+// behavior to the needs of specific consumers.
+
+/**
+ * The configuration implied by what the user meant to do — if they pressed a
+ * Start Call button this would be `start_call`, and if they pressed Join Call,
+ * `join_existing`.
+ *
+ * These are platform-specific defaults, so that a host can start a call by
+ * saying what the user asked for rather than by setting every parameter itself,
+ * and so that what each intent means is Element Call's decision, made in one
+ * place. A host that wants something else states it alongside the intent.
+ *
+ * {@link UserIntent.Unknown} means no intent was stated, and gives the
+ * standalone app's defaults: Element Call owns the whole page, so it offers the
+ * way out of the room that a hosted call must not.
+ */
+export function configurationForIntent(intent: UserIntent): UrlConfiguration {
+  // Only constants and `platform` here, so that this depends on nothing but
+  // the intent.
+  let preset: UrlConfiguration = {
+    confineToRoom: true,
+    preload: false,
+    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+    showControls: true,
+    hideScreensharing: false,
+    allowIceFallback: true,
+    perParticipantE2EE: true,
+    controlledAudioDevices: platform === "desktop" ? false : true,
+    skipLobby: true,
+    returnToLobby: false,
+    sendNotificationType: "notification",
+    autoLeaveWhenOthersLeft: false,
+    waitForCallPickup: false,
+  };
+  switch (intent) {
+    case UserIntent.StartNewCall:
+      preset.skipLobby = false;
+      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 = "video";
+      break;
+    case UserIntent.StartNewCallVoice:
+      preset.skipLobby = false;
+      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 = "audio";
+      break;
+    case UserIntent.StartNewCallDMVoice:
+      preset.callIntent = "audio";
+    // Fall through
+    case UserIntent.StartNewCallDM:
+      preset.skipLobby = true;
+      preset.sendNotificationType = "ring";
+      preset.autoLeaveWhenOthersLeft = true;
+      preset.waitForCallPickup = true;
+      preset.callIntent = preset.callIntent ?? "video";
+      break;
+    case UserIntent.JoinExistingCallDMVoice:
+      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 ?? "video";
+      break;
+    // Non widget usecase defaults
+    default:
+      preset = {
+        confineToRoom: false,
+        preload: false,
+        header: HeaderStyle.Standard,
+        showControls: true,
+        hideScreensharing: false,
+        allowIceFallback: false,
+        perParticipantE2EE: false,
+        controlledAudioDevices: false,
+        skipLobby: false,
+        returnToLobby: false,
+        sendNotificationType: undefined,
+        autoLeaveWhenOthersLeft: false,
+        waitForCallPickup: false,
+      };
+  }
+  return preset;
+}

src/UrlParams.ts

@@ -9,47 +9,36 @@ Please see LICENSE in the repository root for full details.
 import { createContext, use, useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
-import {
-  type RTCCallIntent,
-  type RTCNotificationType,
-} from "matrix-js-sdk/lib/matrixrtc";
 import { pickBy } from "lodash-es";
 
 import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
-import { platform } from "./Platform";
+import {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "./UrlConfiguration";
 import { redact } from "./utils/redact";
 
+// Moved to their own module, so that a host can import them without the rest
+// of this one; re-exported here as they always were
+export {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "./UrlConfiguration";
+
 interface RoomIdentifier {
   roomAlias: string | null;
   roomId: string | null;
   viaServers: string[];
 }
 
-export enum UserIntent {
-  StartNewCall = "start_call",
-  JoinExistingCall = "join_existing",
-  StartNewCallVoice = "start_call_voice",
-  JoinExistingCallVoice = "join_existing_voice",
-  StartNewCallDM = "start_call_dm",
-  StartNewCallDMVoice = "start_call_dm_voice",
-  JoinExistingCallDM = "join_existing_dm",
-  JoinExistingCallDMVoice = "join_existing_dm_voice",
-  Unknown = "unknown",
-}
-
-export enum HeaderStyle {
-  None = "none",
-  Standard = "standard",
-  AppBar = "app_bar",
-}
-
-export enum BackgroundStyle {
-  Solid = "solid",
-  Gradient = "gradient",
-}
-
 /**
  * The UrlProperties are used to pass required data to the widget.
  * Those are different in different rooms, users, devices. They do not configure the behavior of the
@@ -166,109 +155,6 @@ export interface UrlProperties {
    */
   background: BackgroundStyle;
 }
-
-/**
- * The configuration for the app, which can be set via URL parameters.
- * Those property are different to the UrlProperties, since they are all optional
- * and configure the behavior of the app. Their value is the same if EC is used in
- * the same context but with different accounts/users.
- *
- * Their defaults can be controlled by the `intent` property.
- */
-export interface UrlConfiguration {
-  /**
-   * Whether the app should keep the user confined to the current call/room.
-   */
-  confineToRoom: boolean;
-  /**
-   * Whether the app should pause before joining the call until it sees an
-   * io.element.join widget action, allowing it to be preloaded.
-   */
-  preload: boolean;
-  /**
-   * The style of headers to show. "standard" is the default arrangement, "none"
-   * hides the header entirely, and "app_bar" produces a header with a back
-   * button like you might see in mobile apps. The callback for the back button
-   * is window.controls.onBackButtonPressed.
-   */
-  header: HeaderStyle;
-  /**
-   * Whether the controls should be shown. For screen recording no controls can be desired.
-   */
-  showControls: boolean;
-  /**
-   * Whether to hide the screen-sharing button.
-   */
-  hideScreensharing: boolean;
-
-  /**
-   * Whether the app is allowed to use fallback STUN servers for ICE in case the
-   * user's homeserver doesn't provide any.
-   */
-  allowIceFallback: boolean;
-
-  /**
-   * Whether the app should use per participant keys for E2EE.
-   */
-  perParticipantE2EE: boolean;
-  /**
-   * Whether the global JS controls for audio output devices should be enabled,
-   * allowing the list of output devices to be controlled by the app hosting
-   * Element Call.
-   */
-  controlledAudioDevices: boolean;
-  /**
-   * Setting this flag skips the lobby and brings you in the call directly.
-   * In the widget this can be combined with preload to pass the device settings
-   * with the join widget action.
-   */
-  skipLobby: boolean;
-  /**
-   * Setting this flag makes element call show the lobby after leaving a call.
-   * This is useful for video rooms.
-   */
-  returnToLobby: boolean;
-  /**
-   * Whether and what type of notification EC should send, when the user joins the call.
-   */
-  sendNotificationType?: RTCNotificationType;
-  /**
-   * Whether the app should automatically leave the call when there
-   * is no one left in the call.
-   * This is one part to make the call matrixRTC session behave like a telephone call.
-   */
-  autoLeaveWhenOthersLeft: boolean;
-
-  /**
-   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
-   * This is a no-op if not combined with sendNotificationType.
-   *
-   * This entails:
-   *  - show ui that it is awaiting an answer
-   *  - play a sound that indicates that it is awaiting an answer
-   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
-   */
-  waitForCallPickup: boolean;
-
-  /**
-   * Whether to enable echo cancellation for audio capture.
-   * Defaults to true.
-   */
-  echoCancellation?: boolean;
-  /**
-   * Whether to enable noise suppression for audio capture.
-   * Defaults to true.
-   */
-  noiseSuppression?: boolean;
-
-  callIntent?: RTCCallIntent;
-}
-
-// If you need to add a new flag to this interface, prefer a name that describes
-// a specific behavior (such as 'confineToRoom'), rather than one that describes
-// the situations that call for this behavior ('isEmbedded'). This makes it
-// clearer what each flag means, and helps us avoid coupling Element Call's
-// behavior to the needs of specific consumers.
 export interface UrlParams extends UrlProperties, UrlConfiguration {}
 
 class ParamParser {
@@ -354,97 +240,6 @@ export const getUrlParams = (
   return params;
 };
 
-/**
- * The configuration implied by what the user meant to do — if they pressed a
- * Start Call button this would be `start_call`, and if they pressed Join Call,
- * `join_existing`.
- *
- * These are platform-specific defaults, so that a host can start a call by
- * saying what the user asked for rather than by setting every parameter itself,
- * and so that what each intent means is Element Call's decision, made in one
- * place. A host that wants something else states it alongside the intent.
- *
- * {@link UserIntent.Unknown} means no intent was stated, and gives the
- * standalone app's defaults: Element Call owns the whole page, so it offers the
- * way out of the room that a hosted call must not.
- */
-export function configurationForIntent(intent: UserIntent): UrlConfiguration {
-  // Only constants and `platform` here, so that this depends on nothing but
-  // the intent.
-  let preset: UrlConfiguration = {
-    confineToRoom: true,
-    preload: false,
-    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
-    showControls: true,
-    hideScreensharing: false,
-    allowIceFallback: true,
-    perParticipantE2EE: true,
-    controlledAudioDevices: platform === "desktop" ? false : true,
-    skipLobby: true,
-    returnToLobby: false,
-    sendNotificationType: "notification",
-    autoLeaveWhenOthersLeft: false,
-    waitForCallPickup: false,
-  };
-  switch (intent) {
-    case UserIntent.StartNewCall:
-      preset.skipLobby = false;
-      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 = "video";
-      break;
-    case UserIntent.StartNewCallVoice:
-      preset.skipLobby = false;
-      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 = "audio";
-      break;
-    case UserIntent.StartNewCallDMVoice:
-      preset.callIntent = "audio";
-    // Fall through
-    case UserIntent.StartNewCallDM:
-      preset.skipLobby = true;
-      preset.sendNotificationType = "ring";
-      preset.autoLeaveWhenOthersLeft = true;
-      preset.waitForCallPickup = true;
-      preset.callIntent = preset.callIntent ?? "video";
-      break;
-    case UserIntent.JoinExistingCallDMVoice:
-      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 ?? "video";
-      break;
-    // Non widget usecase defaults
-    default:
-      preset = {
-        confineToRoom: false,
-        preload: false,
-        header: HeaderStyle.Standard,
-        showControls: true,
-        hideScreensharing: false,
-        allowIceFallback: false,
-        perParticipantE2EE: false,
-        controlledAudioDevices: false,
-        skipLobby: false,
-        returnToLobby: false,
-        sendNotificationType: undefined,
-        autoLeaveWhenOthersLeft: false,
-        waitForCallPickup: false,
-      };
-  }
-  return preset;
-}
-
 /**
  * The {@link UrlProperties} for Element Call running as a component inside a
  * host application.

src/base.css

@@ -5,19 +5,24 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-/* The styles Element Call needs wherever it is shown: the design tokens, fonts
-and element defaults its own stylesheets build on top of.
+/* The styles Element Call needs wherever it is shown: the element defaults and
+custom properties its own stylesheets build on top of.
 
 Split out from index.css so that Element Call as a component can have these
 without also being given the standalone page's layout, which would style the
-host's own document. What remains here still speaks of the
-document — normalize.css and the typography below use bare element selectors,
-and the custom properties are declared on `:root` — which is right for the
-page, and is why the component build rewrites it: there every selector is
-confined to Element Call's root element (see component/build/scopeStylesToRoot.ts),
-with `html`, `body` and `:root` becoming that element. Nothing needs to be
-written differently here for that to work, but nothing here may rely on
-reaching the host's document either.
+host's own document. Compound's stylesheets — the design tokens, the component
+styles and the fonts they use — are not here either: as a component, Element
+Call shares the host's copy of Compound (it is a peer dependency, so that what
+Compound floats into the host's body, tooltips and menus, is styled by the
+host's stylesheet), and index.css loads it for the page.
+
+What remains here still speaks of the document — normalize.css and the
+typography below use bare element selectors, and the custom properties are
+declared on `:root` — which is right for the page, and is why the component
+build rewrites it: there every selector is confined to Element Call's root
+element (see component/build/scopeStylesToRoot.ts), with `html`, `body` and
+`:root` becoming that element. Nothing needs to be written differently here for
+that to work, but nothing here may rely on reaching the host's document either.
 
 Nothing here should depend on where it lands relative to Element Call's
 component stylesheets: the bundler decides that, and it decides differently for
@@ -25,16 +30,7 @@ the app and for the component build. */
 
 @layer normalize, compound-legacy, compound;
 
-@import url("@fontsource/inter/400.css");
-@import url("@fontsource/inter/500.css");
-@import url("@fontsource/inter/600.css");
-@import url("@fontsource/inter/700.css");
-@import url("@fontsource/inconsolata/400.css");
-@import url("@fontsource/inconsolata/700.css");
-
 @import url("normalize.css/normalize.css") layer(normalize);
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
-@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
 
 :root {
   --font-scale: 1;

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

@@ -9,7 +9,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby="_r_bb_"
+    aria-labelledby="_r_bh_"
     class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="primary"
     data-size="lg"

src/components/CallFooter.module.css

@@ -43,7 +43,10 @@ Please see LICENSE in the repository root for full details.
   inset-inline: 0;
 }
 
-.footer.overlay:has(:focus-visible) {
+/* Keep the footer while it is in use: focus inside it, or a menu opened from
+   it. The menu is portalled out, so the trigger's aria-expanded tracks it. */
+.footer.overlay:has(:focus-visible),
+.footer.overlay:has([aria-expanded="true"]) {
   opacity: 1;
   pointer-events: initial;
 }

src/components/CallFooter.stories.tsx

@@ -12,8 +12,8 @@ import { Link } from "@vector-im/compound-web";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CallFooter, type FooterSnapshot } from "./CallFooter";
-import { ProcessorProvider } from "../livekit/TrackProcessorContext";
 import inCallViewStyles from "../room/InCallView.module.css";
+import styles from "./CallFooter.module.css";
 import { useStaticViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
@@ -83,15 +83,6 @@ const fnArgType = {
 
 const meta = {
   component: CallFooterStoryWrapper,
-  // The footer reads the backgrounds this device keeps from the processor
-  // provider, the same way the lobby and the call do.
-  decorators: [
-    (Story): JSX.Element => (
-      <ProcessorProvider>
-        <Story />
-      </ProcessorProvider>
-    ),
-  ],
   argTypes: {
     layout: {
       control: "radio",
@@ -134,8 +125,6 @@ export const Default: Story = {
     toggleScreenSharing: fn(),
     toggleBlur: fn(),
     videoBlurEnabled: true,
-    backgroundEffect: "none",
-    selectBackgroundEffect: fn(),
     hangup: fn(),
     buttonSize: "lg",
     showFooter: true,
@@ -187,6 +176,32 @@ export const WithAudioAndVideoOptions: Story = {
   },
 };
 
+export const StaysWhileAMenuIsOpen: Story = {
+  ...Default,
+  args: {
+    ...WithAudioAndVideoOptions.args,
+    // In a short window the footer overlays the call and hides itself.
+    asOverlay: true,
+    showFooter: true,
+  },
+  play: async ({ canvasElement }): Promise<void> => {
+    const footer = canvasElement.querySelector<HTMLElement>(
+      '[data-testid="footer-container"]',
+    )!;
+    await userEvent.click(
+      within(canvasElement).getByRole("button", { name: "Microphone" }),
+    );
+    await expect(document.body.querySelector('[role="menu"]')).not.toBeNull();
+
+    // The call hides the footer with this class.
+    footer.classList.add(styles.hidden);
+
+    // Read after the 0.15s fade, not mid-transition.
+    await new Promise((settled) => setTimeout(settled, 400));
+    await expect(getComputedStyle(footer).opacity).toBe("1");
+  },
+};
+
 export const AudioBusy: Story = {
   ...Default,
   args: {

src/components/CallFooter.tsx

@@ -5,17 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  type FC,
-  type JSX,
-  type Ref,
-  useCallback,
-  useMemo,
-  useState,
-} from "react";
+import { type FC, type JSX, type Ref, useMemo } from "react";
 import classNames from "classnames";
-import { useTranslation } from "react-i18next";
-import { logger } from "matrix-js-sdk/lib/logger";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -32,25 +23,9 @@ import {
 } from "../button";
 import styles from "./CallFooter.module.css";
 import {
-  type BackgroundEffectOption,
   MediaMuteAndSwitchButton,
   type MenuOptions,
 } from "./MediaMuteAndSwitchButton";
-import {
-  parseEffect,
-  serializeEffect,
-  shippedBackgrounds,
-} from "../livekit/backgroundEffects";
-import {
-  maxAddedBackgrounds,
-  UnusableImage,
-} from "../livekit/backgroundImages";
-import {
-  useAddedBackgrounds,
-  useBackgroundProcessing,
-} from "../livekit/TrackProcessorContext";
-import { usesFallbackProcessing } from "../livekit/backgroundProcessing";
-import { SelfPreview } from "./SelfPreview";
 import { type Behavior } from "../state/Behavior";
 import { type ViewModel } from "../state/ViewModel";
 import { useBehavior } from "../useBehavior";
@@ -82,8 +57,6 @@ export interface FooterActions {
   /** Also controls if the videoMute button is disabled */
   toggleVideo: (() => void) | undefined;
   toggleBlur: (() => void) | undefined;
-  /** Undefined where background processing is unavailable. */
-  selectBackgroundEffect: ((id: string) => void) | undefined;
   toggleScreenSharing: (() => void) | undefined;
   /** Also controls if the settings button is visible */
   openSettings: (() => void) | undefined;
@@ -97,8 +70,6 @@ export interface FooterState {
   videoEnabled: boolean;
   videoBusy: boolean;
   videoBlurEnabled: boolean;
-  /** The chosen background effect, in its stored form. */
-  backgroundEffect: string;
   showFooter: boolean;
 
   /* This is needed for WindowMode = "flat" */
@@ -128,7 +99,7 @@ export interface FooterState {
 
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   audioOptions: MenuOptions[];
-  /** Output devices shown as their own section in the audio menu. */
+  /** Output (speaker) devices. */
   audioOutputOptions: MenuOptions[];
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   videoOptions: MenuOptions[];
@@ -152,7 +123,6 @@ export const CallFooter: FC<FooterProps> = ({
   children,
   vm,
 }) => {
-  const { t } = useTranslation();
   const asOverlay = useBehavior(vm.asOverlay$);
   const showFooter = useBehavior(vm.showFooter$);
   const hideControls = useBehavior(vm.hideControls$);
@@ -181,102 +151,8 @@ export const CallFooter: FC<FooterProps> = ({
   const selectedAudioOutput = useBehavior(vm.selectedAudioOutput$);
   const selectAudioOutputOption = useBehavior(vm.selectAudioOutputOption$);
   const selectVideoButtonOption = useBehavior(vm.selectVideoButtonOption$);
-  const backgroundEffect = useBehavior(vm.backgroundEffect$);
-  const selectBackgroundEffect = useBehavior(vm.selectBackgroundEffect$);
-  const { added, addBackground, removeBackground } = useAddedBackgrounds();
-  const { settling, cameraTrack } = useBackgroundProcessing();
-
-  // Said, not decided. Where only the slow path exists the effect still works,
-  // it costs frames — and the user is the only one who knows whether they would
-  // rather show the room they are sitting in. It stays put while the pipeline
-  // is being built: that wait is shown on the tile that was pressed, where a
-  // message that came and went would only flash once the assets are cached.
-  const backgroundEffectNotice = useMemo(
-    () =>
-      usesFallbackProcessing()
-        ? t("background_effects.slow_in_this_browser")
-        : undefined,
-    [t],
-  );
-  const [backgroundEffectError, setBackgroundEffectError] = useState<
-    string | undefined
-  >(undefined);
-
-  // Spelled out rather than built from the reason, so the extractor can find
-  // every string it has to translate.
-  const whyRefused = useCallback(
-    (e: unknown): string => {
-      if (e instanceof UnusableImage)
-        switch (e.reason) {
-          case "not-an-image":
-            return t("error.background_not_an_image");
-          case "animated":
-            return t("error.background_animated");
-          case "undecodable":
-            return t("error.background_undecodable");
-        }
-      return t("error.background_not_kept");
-    },
-    [t],
-  );
-
-  const onRemoveBackgroundEffect = useCallback(
-    (id: string): void => {
-      const effect = parseEffect(id);
-      if (effect.kind !== "added") return;
-      removeBackground(effect.id).catch((e) =>
-        logger.warn("Could not remove that background", e),
-      );
-    },
-    [removeBackground],
-  );
-
-  const onAddBackgroundImage = useCallback(
-    (file: File): void => {
-      setBackgroundEffectError(undefined);
-      // Added, not put on — before joining and during a call alike. It joins
-      // the backgrounds on offer and is in force once the user chooses it:
-      // choosing a file and choosing to wear it are two decisions, and one
-      // rule for both places is one less thing to know.
-      addBackground(file).catch((e) => {
-        setBackgroundEffectError(whyRefused(e));
-        logger.warn(
-          e instanceof UnusableImage
-            ? `Cannot use that file as a background: ${e.reason}`
-            : "Could not keep that background",
-          e,
-        );
-      });
-    },
-    [addBackground, whyRefused],
-  );
-
-  // The catalogue is named here rather than in the view model: the names are
-  // for reading, and a view model has no business holding translated text.
-  const backgroundEffects = useMemo(
-    (): BackgroundEffectOption[] => [
-      { id: "none", kind: "none", label: t("action.background_effect_none") },
-      { id: "blur", kind: "blur", label: t("action.background_effect_blur") },
-      ...shippedBackgrounds.map((background, i) => ({
-        id: serializeEffect({ kind: "shipped", id: background.id }),
-        kind: "image" as const,
-        // Numbered rather than named: the images are stand-ins, and naming
-        // them here would invent names the design has not given them.
-        label: t("action.background_effect_numbered", { n: i + 1 }),
-        imageUrl: background.imagePath,
-      })),
-      ...added.map((background, i) => ({
-        id: serializeEffect({ kind: "added", id: background.id }),
-        kind: "image" as const,
-        removable: true,
-        label: t("action.background_effect_numbered", {
-          n: shippedBackgrounds.length + i + 1,
-        }),
-        imageUrl: background.url,
-      })),
-    ],
-    [t, added],
-  );
+  const toggleBlur = useBehavior(vm.toggleBlur$);
+  const videoBlurEnabled = useBehavior(vm.videoBlurEnabled$);
   const buttonSize = useBehavior(vm.buttonSize$);
   const showLogo = useBehavior(vm.showLogo$);
 
@@ -338,21 +214,8 @@ export const CallFooter: FC<FooterProps> = ({
         options={videoOptions}
         selectedOption={selectedVideo}
         onSelect={selectVideoButtonOption}
-        backgroundEffects={backgroundEffects}
-        selectedBackgroundEffect={backgroundEffect}
-        onSelectBackgroundEffect={selectBackgroundEffect}
-        // Withheld once the device keeps as many as it will, which is what
-        // renders the add tile unavailable rather than letting it fail.
-        onAddBackgroundImage={
-          selectBackgroundEffect && added.length < maxAddedBackgrounds
-            ? onAddBackgroundImage
-            : undefined
-        }
-        onRemoveBackgroundEffect={onRemoveBackgroundEffect}
-        backgroundEffectError={backgroundEffectError}
-        backgroundEffectNotice={backgroundEffectNotice}
-        backgroundEffectSettling={settling}
-        selfPreview={<SelfPreview track={cameraTrack ?? null} />}
+        videoBlurToggleClick={toggleBlur}
+        videoBlurEnabled={videoBlurEnabled}
       />,
     );
   } else {

src/components/CallFooterViewModel.test.ts

@@ -14,10 +14,7 @@ import type { CallViewModel } from "../state/CallViewModel/CallViewModel";
 import type { Alignment, Layout } from "../state/layout-types";
 import type { SpotlightTileViewModel } from "../state/TileViewModel";
 import type { DeviceLabel } from "../state/MediaDevices";
-import {
-  createCallFooterViewModel,
-  createLobbyFooterViewModel,
-} from "./CallFooterViewModel";
+import { createCallFooterViewModel } from "./CallFooterViewModel";
 import { HeaderStyle } from "../UrlParams";
 
 const platformMock = vi.hoisted(() => vi.fn(() => "desktop"));
@@ -27,12 +24,10 @@ vi.mock("../Platform", () => ({
   },
 }));
 
-// The SDK's own check needs WebGL and canvas APIs jsdom does not have. The
-// tests below drive it directly, because what they are about is the answer the
-// app gives on top of it.
-const sdkSupportMock = vi.hoisted(() => vi.fn(() => true));
+// Prevent supportsBackgroundProcessors from throwing in jsdom – it is not
+// exercised by these tests (only used in `videoToggles`, not `videoOptions`).
 vi.mock("@livekit/track-processors", () => ({
-  supportsBackgroundProcessors: (): boolean => sdkSupportMock(),
+  supportsBackgroundProcessors: (): boolean => false,
 }));
 
 const outputSelectionMock = vi.hoisted(() => vi.fn(() => true));
@@ -121,7 +116,6 @@ describe("createCallFooterViewModel", () => {
 
     it("is withheld where the platform cannot route audio to a chosen device", () => {
       outputSelectionMock.mockReturnValue(false);
-      // Undefined is what renders the speaker section disabled.
       expect(buildFooterVm().selectAudioOutputOption$.value).toBeUndefined();
     });
 
@@ -150,9 +144,7 @@ describe("createCallFooterViewModel", () => {
             selected$: constant(undefined),
             select: vi.fn(),
           },
-          // Safari enumerates no output devices whatsoever. Reproduced by the
-          // condition rather than by the browser, so it is checked on the
-          // Linux CI runners that have no Safari to check it with.
+          // As Safari: no outputs listed.
           audioOutput: {
             available$: constant(new Map<string, DeviceLabel>()),
             selected$: constant(undefined),
@@ -163,10 +155,7 @@ describe("createCallFooterViewModel", () => {
         { showControls: true, header: HeaderStyle.Standard },
       );
 
-      // Empty rather than undefined: undefined means this menu has no notion
-      // of outputs at all, as the camera menu has none, and hides the section.
-      // Empty means there are none to list, and the menu still shows the
-      // section with a default in it, disabled.
+      // Empty, not undefined: undefined would hide the section.
       expect(vm.audioOutputOptions$.value).toEqual([]);
     });
   });
@@ -233,74 +222,4 @@ describe("createCallFooterViewModel", () => {
       ]);
     });
   });
-  describe("background effects", () => {
-    // The lobby, deliberately: in a call the whole switcher is already
-    // withheld on a phone, so a check there passes whatever the verdict says.
-    // The lobby keeps its switcher, which is where a phone browser was offered
-    // every effect, given none of them, and told nothing.
-    function lobbyFor(
-      platform: string,
-    ): ReturnType<typeof createLobbyFooterViewModel> {
-      platformMock.mockReturnValue(platform);
-      return createLobbyFooterViewModel(
-        testScope(),
-        mockMuteStates(),
-        twoMicsAndOneCamMediaDevices,
-        /* openSettings */ undefined,
-        /* hangup */ undefined,
-        /* showLogo */ false,
-      );
-    }
-
-    // A phone is offered them, and that is the point of asking the browser
-    // rather than the platform: measured, a phone on the fast path held 99% of
-    // its frame rate while a desktop on the slow one held 73%, so refusing by
-    // platform refused the better device and allowed the worse.
-    it("offers them on a phone whose browser can run them", () => {
-      sdkSupportMock.mockReturnValue(true);
-      const vm = lobbyFor("ios");
-
-      expect(vm.selectBackgroundEffect$.value).toBeDefined();
-      expect(vm.toggleBlur$.value).toBeDefined();
-    });
-
-    it("offers them where the pipeline will honour them", () => {
-      sdkSupportMock.mockReturnValue(true);
-      const vm = lobbyFor("desktop");
-
-      expect(vm.selectBackgroundEffect$.value).toBeDefined();
-      expect(vm.toggleBlur$.value).toBeDefined();
-    });
-
-    it("offers nothing where the browser itself cannot run them", () => {
-      sdkSupportMock.mockReturnValue(false);
-      const vm = lobbyFor("desktop");
-
-      expect(vm.selectBackgroundEffect$.value).toBeUndefined();
-      expect(vm.toggleBlur$.value).toBeUndefined();
-    });
-
-    it("availability is the same before and during a call", () => {
-      for (const supported of [true, false]) {
-        sdkSupportMock.mockReturnValue(supported);
-        platformMock.mockReturnValue("desktop");
-        const inCall = createCallFooterViewModel(
-          testScope(),
-          buildMinimalCallViewModel(gridLayout),
-          mockMuteStates(),
-          twoMicsAndOneCamMediaDevices,
-          /* reactionIdentifier */ undefined,
-          { showControls: true, header: HeaderStyle.Standard },
-        );
-        const lobby = lobbyFor("desktop");
-
-        const offeredInCall =
-          inCall.selectBackgroundEffect$.value !== undefined;
-        const offeredInLobby =
-          lobby.selectBackgroundEffect$.value !== undefined;
-        expect(offeredInLobby).toBe(offeredInCall);
-        expect(offeredInLobby).toBe(supported);
-      }
-    });
-  });
 });

src/components/CallFooterViewModel.tsx

@@ -6,16 +6,14 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { combineLatest, map, type Observable, switchMap } from "rxjs";
+import { supportsBackgroundProcessors } from "@livekit/track-processors";
 import { supportsAudioOutputSelection } from "livekit-client";
 
-import { supportsBackgroundProcessors } from "../livekit/backgroundProcessing";
-
 import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { type MenuOptions } from "./MediaMuteAndSwitchButton";
 import { type MediaDevices } from "../state/MediaDevices";
 import {
   backgroundBlur as backgroundBlurSettings,
-  backgroundEffect as backgroundEffectSetting,
   debugTileLayout as debugTileLayoutSetting,
 } from "../settings/settings";
 import { type Behavior, constant } from "../state/Behavior";
@@ -78,8 +76,6 @@ function buildDeviceBehaviors(
   | "selectVideoButtonOption$"
   | "toggleBlur$"
   | "videoBlurEnabled$"
-  | "backgroundEffect$"
-  | "selectBackgroundEffect$"
 > {
   const options$ = (
     available$: Behavior<Map<string, MenuOptions["label"]>>,
@@ -108,8 +104,8 @@ function buildDeviceBehaviors(
     selectedAudioOutput$: scope.behavior(
       mediaDevices.audioOutput.selected$.pipe(map((s) => s?.id)),
     ),
-    // Safari and most Firefox builds cannot route audio to a chosen device at
-    // all. Withholding the callback is what renders the section disabled.
+    // Withheld where the platform can't route audio to a chosen device, which
+    // disables the speaker section.
     selectAudioOutputOption$: constant(
       supportsAudioOutputSelection()
         ? mediaDevices.audioOutput.select
@@ -132,20 +128,6 @@ function buildDeviceBehaviors(
       ),
     ),
     videoBlurEnabled$: backgroundBlurSettings.value$,
-    backgroundEffect$: backgroundEffectSetting.value$,
-    // Withholding the callback is what renders the section disabled, the same
-    // way the speaker section is disabled where no output can be chosen.
-    selectBackgroundEffect$: scope.behavior(
-      disableSwitcher$.pipe(
-        map((switcherDisabled) =>
-          !switcherDisabled && supportsBackgroundProcessors()
-            ? (id: string): void => {
-                backgroundEffectSetting.setValue(id);
-              }
-            : undefined,
-        ),
-      ),
-    ),
   };
 }
 

src/components/MediaMuteAndSwitchButton.mdx

@@ -1,88 +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.
-**/}
-
-{/**
-A custom doc page, replacing the default autodocs for this component, so that
-the background effects states can be reviewed together rather than hunted for
-in the sidebar. Same filename as the component, which is how Storybook picks
-it up.
-**/}
-
-import {
-  Meta,
-  Primary,
-  Controls,
-  Stories,
-  Title,
-  Subtitle,
-  Canvas,
-} from "@storybook/addon-docs/blocks";
-import * as MenuStories from "./MediaMuteAndSwitchButton.stories";
-
-<Meta of={MenuStories} />
-
-<Title> Device menu </Title>
-
-The menu behind the chevron on the microphone and camera buttons: the devices
-to choose from, and — on the camera — the background effects.
-
-<Subtitle> Background effects: the four states worth reviewing </Subtitle>
-
-**Offered.** The ordinary case. No effect, blur, the images we ship, the ones
-the user added, and a tile for adding another.
-
-<Canvas of={MenuStories.BackgroundEffects} />
-
-**Offered, with what it costs.** Browsers without the fast path — Safari and
-Firefox, on every platform — draw each frame through a canvas instead.
-Measured across four of them that costs between a sixth and a quarter of the
-frame rate, on a phone and on a desktop alike.
-
-It is said rather than enforced. The cost is smoothness; the reason to pay it
-is privacy; and only the person in the room knows which they would rather
-have. Everything stays choosable.
-
-Drawn quietly on purpose, to the design: the subtle ground, an outline mark and
-the text at its ordinary weight, held the same sixteen pixels from the menu's
-sides as the grid above it. Not an alert — an alert is for something that just
-happened, and this was true before the menu opened and will be true after it
-closes.
-
-<Canvas of={MenuStories.BackgroundEffectsSlowInThisBrowser} />
-
-**Being set up.** Only on the first effect of a session. The tile that was
-pressed spins where its tick will go, until a frame has actually come out of
-the pipeline — about three seconds of building, and on Safari another twelve to
-fifteen while the page holds still. The spinner turns by rotating, which a
-browser composites, so it keeps moving through a pause that has stopped
-everything else: the difference between looking busy and looking crashed.
-
-On the tile rather than in a message, because once the assets are cached the
-wait is a fraction of a second, and a message that appears and vanishes that
-fast is noise. A spinner that brief just reads as a control responding. The
-notice about what the browser costs stays put throughout — it is true before,
-during and after.
-
-This story plays the sequence rather than posing it, shortened to a second and
-a half so it is watchable. Later effects skip it entirely: switching a built
-pipeline costs nothing.
-
-<Canvas of={MenuStories.BackgroundEffectsSettling} />
-
-**Not possible at all.** Where the browser cannot run background processing on
-any path, the tiles are shown and disabled — except no effect, which needs no
-processing and stays choosable, so there is always a way back to plain video.
-
-<Canvas of={MenuStories.BackgroundEffectsUnavailable} />
-
-<Subtitle> Mobile layouts </Subtitle>
-
-This component is reactive. To check the mobile layout, open the story from the
-sidebar: the summaries on this page do not render it.
-
-<Primary />
-<Controls of={MenuStories.Default} />
-<Stories />

src/components/MediaMuteAndSwitchButton.module.css

@@ -41,549 +41,54 @@ Please see LICENSE in the repository root for full details.
   flex-direction: column;
 }
 
-/* Only the device lists scroll; the level meter stays put beneath them.
-   The bound comes from the measured height of the call area, set by the
-   component: the menu is portalled outside the root, so neither a container
-   query nor a viewport unit describes the space it is allowed to fill. */
+/* Only the device lists scroll, bounded by the measured call area: the menu is
+   portalled out of the root, so CSS can't size it against the call. */
 .deviceList {
-  /* Held one border width clear of the frame on each side. The menu draws its
-     frame as an outline just inside its own edge, and once this list has
-     enough in it to scroll, Safari paints it — rows and all — above that
-     outline, so the frame vanished beside every device; measured on the
-     microphone menu with many devices, 384 pixels of it. Everything the list
-     holds is inside this, so nothing in it needs to keep clear on its own. */
-  margin-inline: var(--cpd-border-width-1);
-  /* The camera menu's width, set by the component, less that clearance so the
-     menu still comes to it. Without the variable the calc is invalid and the
-     width falls back to auto, which is what every other menu wants. */
-  inline-size: calc(
-    var(--device-list-inline-size) - 2 * var(--cpd-border-width-1)
-  );
   overflow-y: auto;
   min-block-size: 0;
   max-block-size: var(--device-list-max-height);
-  /* The heading stands over the head of this list and the level meter over its
-     foot. Scrolling a row flush to either edge would put it underneath one of
-     them, which is how a row reached by the keyboard ends up half-readable;
-     this keeps both their heights clear for anything the browser scrolls to.
-     Set by the component, which is the only thing that can measure them. */
+  /* Keeps a row reached by keyboard clear of the sticky heading and meter. */
   scroll-padding-block: var(--device-list-scroll-padding-start, 0)
     var(--device-list-scroll-padding-end, 0);
 }
 
-/* Each section is headed by its own rule, which Compound draws under a menu
-   heading already. The heading spans the whole menu — the menu has no padding
-   of its own — so that rule runs edge to edge, stopping only where the frame
-   is, rather than inset as a separator between the sections would be.
-
-   Compound's spacing around it is the design's too, bar one thing: the design
-   leaves a section's first device further below the rule than Compound does —
-   measured off the mock, 27px from the rule to the top of the control, against
-   the 16px that Compound's 8px margin and the row's own 8px padding give. The
-   difference goes below the rule, so the rule stays tight under its own text
-   where Compound put it. */
+/* Compound's heading rule heads each section; the design adds space below it. */
 .menu h3 {
   margin-block-end: var(--cpd-space-5x);
 }
 
-/* One section is set much further from the one above it than Compound's 8px
-   heading margin allows: measured off the mock, 41px from the last device's
-   control to the next heading's text, against the 22px we had. Only between
-   sections — the first heading keeps Compound's spacing, because the menu's
-   own padding is already above it. */
+/* And more above a heading that follows another section. */
 .deviceList [role="group"] + [role="group"] h3 {
   margin-block-start: var(--cpd-space-7x);
 }
 
-/* Each section's heading stays at the top of the scrollport while any of that
-   section is still in view, so a long list never leaves you wondering which
-   kind of device you are looking at. It leaves with its own section, because
-   sticky only holds while the group it belongs to is in view.
-
-   Opaque, and held a border width clear of the sides, for the same reason as
-   the meter below: this is a positioned element, so it paints above the
-   outline the menu draws its frame with, and would swallow it. */
+/* Sticky within its own section. Opaque and inset a border width so it doesn't
+   paint over the menu's outline. */
 .sectionHeading {
   position: sticky;
   inset-block-start: 0;
-  /* Over what scrolls beneath it. Without a layer of its own it is painted in
-     order with everything else positioned, and the effect tiles — positioned,
-     to carry their tick and the remove cross — come after it, so the grid
-     slid over the heading instead of under it. */
-  z-index: 1;
   background: var(--cpd-color-bg-canvas-default);
-  /* Clear of the frame's top edge; the list it sits in already keeps it clear
-     of the sides. */
+  margin-inline: var(--cpd-border-width-1);
   margin-block-start: var(--cpd-border-width-1);
 }
 
-/* The meter belongs to the microphone section: it stays at the bottom of the
-   scrollport while that section is in view, and leaves with it when the list
-   is scrolled up to the speakers. The wrapper is deliberately unpositioned —
-   a positioned one paints above the menu's outline and swallows the frame
-   along this whole section. Sticky is resolved against the scroll container,
-   so it does not need one. */
-
+/* Sticky at the foot of the microphone section; opaque and inset as above. */
 .stickyMeter {
   position: sticky;
   inset-block-end: 0;
-  /* Opaque, so the list does not show through it as it scrolls past, and held
-     clear of the frame's bottom edge. The list it sits in already keeps it
-     clear of the sides. */
   background: var(--cpd-color-bg-canvas-default);
+  margin-inline: var(--cpd-border-width-1);
   margin-block-end: var(--cpd-border-width-1);
 }
 
-/* Radix focuses whatever the pointer is over, so the browser's own ring marks
-   the item under the mouse. It cannot distinguish the two modalities here, so
-   it is suppressed and replaced by one that can.
-
-   Every kind of item the menu can focus, not only the device rows: the camera
-   menu's blur toggle is a checkbox item and a child of the menu rather than of
-   the list, and left out it kept the browser's own ring and followed the
-   pointer with it. */
+/* Radix focuses whatever the pointer is over, so the browser's ring would
+   follow the mouse. Replaced by one shown only for keyboard focus. */
 .menu [role^="menuitem"]:focus,
 .menu [role^="menuitem"]:focus-visible {
   outline: none;
 }
 
-/* Shown only when the keyboard is what moved the focus. */
-.menu[data-focus-modality="keyboard"] [role^="menuitem"]:focus {
+.menu[data-focus-source="keyboard"] [role^="menuitem"]:focus {
   outline: var(--cpd-border-width-2) solid var(--cpd-color-border-focused);
   outline-offset: calc(-1 * var(--cpd-border-width-2));
 }
-
-/*
- * The Background effects grid.
- *
- * Three across matches the design and keeps a thumbnail readable at a glance;
- * with no effect, blur and two shipped images, the five a user may add fill it
- * to a whole three-by-three at the limit, where the add tile goes away, and
- * four and the add tile fill it one short of it.
- *
- * minmax(0, 1fr) rather than 1fr: a grid track will not shrink below its
- * content's minimum width by default, and a tile carrying a label is wider
- * than a third of the menu, so plain 1fr lays out three full-width columns and
- * clips two of them.
- */
-.effectGrid {
-  display: grid;
-  /* Thirds of a menu whose width is set, so the tiles are the size design
-     draws them — about eighty pixels — whatever the device names are. Zero
-     rather than the content as the floor, so a long label wraps inside its
-     tile instead of pushing the grid wider than the menu. */
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  /* Every tile the same height, set by the tallest — the ones carrying a
-     label. Forcing a ratio instead clips the label as soon as the menu is
-     narrow enough that the ratio cannot hold it. */
-  grid-auto-rows: 1fr;
-  /* Measured against the design, where the gap is about a sixth of a tile's
-     width. A step less than this read as tight, and left the remove cross on
-     the corner with little room of its own. */
-  gap: var(--cpd-space-3x);
-  /* The same inset a menu heading and a device row carry, so the tiles line
-     their left edge up with the "B" of the heading above them and with the
-     radio buttons above that. Matching the surrounding boxes instead puts the
-     tiles to the left of both, since a heading insets its own text. */
-  /* The sides carry the full inset to the menu's frame. Above, the grid is
-     the first control of its section, so it starts where a device row's
-     control starts under its own rule: the heading's spacing supplies most of
-     that, and this adds the same step a device row holds above its control.
-     Below, the menu's own padding is already the inset, so nothing is set. */
-  /* Sixteen from the menu's edge, as the notice below it is and as design
-     draws both: the list this sits in is already held a border width in from
-     the frame, so that much less here. */
-  padding: var(--cpd-space-2x)
-    calc(var(--cpd-space-4x) - var(--cpd-border-width-1)) 0;
-}
-
-/*
- * A menu item lays itself out as a grid of chevron, icon and label in a row.
- * A tile centres its glyph with the label beneath instead, so this has to
- * outweigh that rule rather than sit beside it.
- *
- * The tiles are a little wider than tall, as the design draws them, and hold
- * that shape whatever the menu measures.
- */
-.effectGrid .effectTile {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  /* Glyph and label centre together as one group. Pinning the label to the
-     floor instead leaves the glyph riding high in the space above it. */
-  justify-content: center;
-  /* Measured against the design: the glyph sits a quarter of the tile wide,
-     with about a seventh of the tile's height between its ink and the label's.
-     The label's own leading is part of that distance, so the step here is
-     smaller than the ink gap it produces. */
-  gap: var(--cpd-space-1x);
-  block-size: auto;
-  min-block-size: 0;
-  min-inline-size: 0;
-  /* More room above and below than at the sides: the tile is wider than tall,
-     and the padding is what carries that proportion now the gap is set by the
-     design's spacing rather than by filling the box. */
-  padding: var(--cpd-space-3x) var(--cpd-space-2x);
-  overflow: hidden;
-  border: 2px solid var(--cpd-color-border-interactive-secondary);
-  border-radius: var(--cpd-space-2x);
-}
-
-/* The selection is drawn here and announced by the item's aria-checked, so it
-   never rests on colour alone. Matched to the specificity of the base tile
-   rule above, which also sets a border-color and would otherwise win.
-   Colour alone, at the width every tile already carries: thickening it with an
-   inset shadow drew it inside the padding box, where an image tile's picture
-   sits, so the picture covered it and an added background wore a thinner frame
-   than no effect did. */
-.effectGrid .effectTileSelected {
-  border-color: var(--cpd-color-border-accent);
-}
-
-.effectGrid .effectTile > * {
-  /* A menu item spaces its icon and label for a row, with the gap carried as a
-     right margin on each. Stacked in a tile that margin is dead space on one
-     side, which shifts the glyph and the label off the tile's centre. */
-  margin: 0;
-  min-inline-size: 0;
-  max-inline-size: 100%;
-  text-align: center;
-  overflow-wrap: anywhere;
-}
-
-.effectSwatch {
-  flex: 0 0 auto;
-  inline-size: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--cpd-color-icon-secondary);
-}
-
-/* An image tile is the picture: it fills the tile rather than sitting in a box
-   inside one, which is what the design draws and what makes a background
-   recognisable at this size. */
-.effectThumb {
-  position: absolute;
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-}
-
-/* Blur has no icon in the design system, and a hatch reads as "softened" in a
-   way a glyph does not. */
-.effectBlurGlyph {
-  /* Smaller than the glyph beside it, and than the design's own hatch measures.
-     The design's is an icon whose strokes shorten towards the corners, so it
-     leaves them empty and reads lighter; a uniform hatch fills its box and
-     reads heavier at the same size. */
-  inline-size: 18px;
-  block-size: 18px;
-  border-radius: var(--cpd-space-1x);
-  background-image: repeating-linear-gradient(
-    135deg,
-    var(--cpd-color-icon-secondary) 0 1.2px,
-    transparent 1.2px 3.15px
-  );
-}
-
-/* The tick marking the tile in force, standing where the glyph would.
-   Positioned, so it paints above the image, which is positioned itself and
-   would otherwise cover anything left in normal flow. */
-.effectCheck {
-  position: relative;
-  color: var(--cpd-color-icon-accent-primary);
-}
-
-/* On a picture it needs its own ground: a tick alone disappears into whatever
-   the image happens to be behind it. */
-.effectCheckOnImage {
-  border-radius: 50%;
-  background: var(--cpd-color-bg-canvas-default);
-  box-shadow: 0 0 0 var(--cpd-border-width-2) var(--cpd-color-bg-canvas-default);
-}
-
-/* A menu item's label is sized for a row; in a tile the design sets it a step
-   smaller, against the glyph above it. */
-.effectLabel {
-  font: var(--cpd-font-body-sm-medium);
-  /* A menu item labels itself in the secondary colour, which reads as muted
-     under a glyph the design draws at full strength. */
-  color: var(--cpd-color-text-primary);
-}
-
-/* Named for assistive technology, not drawn: an image labels itself, and the
-   design gives the add tile a plus alone. */
-.effectLabelUnseen {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-/*
- * Unavailable. Opacity alone is not enough on an image tile: a washed-out
- * photograph still reads as a photograph you could pick. Draining the colour
- * as well says plainly that there is nothing to choose here.
- */
-.effectGrid .effectTile[aria-disabled="true"] {
-  opacity: 0.55;
-}
-
-.effectGrid .effectTile[aria-disabled="true"] .effectThumb {
-  filter: grayscale(1);
-}
-
-/*
- * The cross that removes one of the user's own backgrounds.
- *
- * Shown on hover, and whenever the tile has the keyboard's attention, so the
- * two ways of reaching it look the same. It carries its own ground for the
- * same reason the tick does: it sits on a picture nobody chose.
- */
-.effectRemove {
-  position: absolute;
-  /* On the tile's top-right corner, where Zoom and Teams both put it, and
-     clear of the middle: centred, it sat inside the target for choosing the
-     tile, so the one destructive action lived where the ordinary one does. */
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  /* It overhangs the corner by about a fifth of itself, as the design draws
-     it: enough to read as sitting on the tile rather than in it, little
-     enough that it never reaches the tile beside it. */
-  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);
-  /* Red at rest, not only under the pointer. The design says what the button
-     does before you are on it, and the ground carries the hover instead. */
-  color: var(--cpd-color-icon-critical-primary);
-  /* Raised off the tile rather than outlined against it — Compound's own value
-     for a small raised surface, there being no shadow token. In a dark theme
-     it falls on a near-black ground and reads as nothing, which is how the
-     design draws it there too. */
-  box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
-  cursor: pointer;
-}
-
-/* Under the pointer the ground turns critical and the shadow gives way to a
-   ring, so the button reads as pressable and as destructive at once. */
-.effectRemove: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);
-}
-
-.effectGrid .effectTileWrap:hover .effectRemove,
-.effectGrid .effectTileWrap:focus-within .effectRemove {
-  display: flex;
-}
-
-/* Holds a tile that can be removed, so the cross can sit over it without
-   being inside the menu item. */
-.effectTileWrap {
-  position: relative;
-  display: flex;
-  min-inline-size: 0;
-}
-
-.effectGrid .effectTileWrap > .effectTile {
-  flex: 1;
-  min-inline-size: 0;
-}
-
-/* Sits under the tiles, inside the same margin they keep from the frame, and
-   with the same distance above it as below: the menu's own bottom padding
-   supplies the lower half, so only the upper half is set here. Without it the
-   message sits flush against the tiles with a gap twice its size underneath. */
-.effectError {
-  /* For the same reason as the notice below: a refusal's title is a sentence,
-     and would otherwise set the menu's width rather than fit inside it. */
-  contain: inline-size;
-  /* A step short of the margin it keeps at the sides: the menu is a column
-     with a gap of its own, which makes up the difference above. */
-  padding: var(--cpd-space-3x) var(--cpd-space-4x) 0;
-}
-
-/* The spinner stands exactly where the tick will, so the tile does not shift
-   when one becomes the other. */
-.effectBusy {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 20px;
-  block-size: 20px;
-}
-
-/*
- * What the browser costs, said quietly.
- *
- * Measured off the design: the subtle secondary ground, held the same sixteen
- * pixels from the menu's sides as the grid above it, with the mark and the
- * text on one line's baseline and the text at its ordinary weight. Not an
- * alert — an alert is for something that just happened, and this was true
- * before the menu opened and will be true after it closes.
- */
-.effectNotice {
-  /* Takes the width the menu has rather than lending it one. The menu is as
-     wide as its widest content, and a sentence asks for its whole length on
-     one line: without this the notice widened the camera menu from 296 to 340
-     pixels, past the width the grid and the preview are drawn for. */
-  contain: inline-size;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--cpd-space-3x);
-  /* Nothing below: the menu's own bottom padding is already the inset, and
-     setting one here as well made the gap under the notice twice the gap
-     beside it. The same reason the grid leaves its own bottom alone. */
-  margin: var(--cpd-space-2x) var(--cpd-space-4x) 0;
-  padding: var(--cpd-space-3x);
-  border-radius: var(--cpd-space-2x);
-  background: var(--cpd-color-bg-subtle-secondary);
-  color: var(--cpd-color-text-primary);
-  font: var(--cpd-font-body-md-regular);
-}
-
-.effectNotice > svg {
-  flex-shrink: 0;
-  color: var(--cpd-color-icon-secondary);
-}
-
-/*
- * How the user looks, at the top of the camera menu.
- *
- * Edge to edge and flush with the top, as the design draws it: it takes the
- * menu's own top padding, which is why it pulls itself up over it. Held one
- * border width clear of the frame and rounded to match what is left of the
- * frame's corner, because a video paints on a layer of its own and would
- * otherwise draw over the outline the menu is framed with.
- *
- * Sixteen by nine across the camera menu's fixed width, less its frame, and
- * written as a height rather than a ratio: with a ratio and a cap Safari kept
- * the ratio by narrowing the box, and the preview stopped short of the menu's
- * right edge. Cropped rather than letterboxed where the call is narrow enough
- * to narrow the menu — a face cut at the edge reads as a self-view, a face in
- * bars reads as a broken one.
- */
-.selfPreview {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-block-end: var(--cpd-space-2x);
-  block-size: 166px;
-  overflow: hidden;
-  border-start-start-radius: calc(
-    var(--cpd-space-3x) - var(--cpd-border-width-1)
-  );
-  border-start-end-radius: calc(
-    var(--cpd-space-3x) - var(--cpd-border-width-1)
-  );
-  background: var(--cpd-color-bg-subtle-secondary);
-  color: var(--cpd-color-icon-secondary);
-}
-
-/* Above the list: it takes the menu's own top padding, which is why it pulls
-   itself up over it, and it keeps clear of the frame's sides itself, since it
-   is not inside the list that otherwise does. */
-.selfPreviewPinned {
-  margin-block-start: calc(
-    -1 * var(--cpd-space-5x) + var(--cpd-border-width-1)
-  );
-  margin-inline: var(--cpd-border-width-1);
-}
-
-/* Inside the list, where there was no room to pin it. A scrolling container
-   cuts off whatever is pulled above its top, so it is the list that moves up
-   over the menu's padding instead, to bring the preview flush with the top.
-   That puts the list's corners where the frame's are rounded, so they are
-   rounded too: square, a stuck heading would show past the curve. */
-.deviceListLeadsWithPreview {
-  margin-block-start: calc(
-    -1 * var(--cpd-space-5x) + var(--cpd-border-width-1)
-  );
-  border-start-start-radius: calc(
-    var(--cpd-space-3x) - var(--cpd-border-width-1)
-  );
-  border-start-end-radius: calc(
-    var(--cpd-space-3x) - var(--cpd-border-width-1)
-  );
-}
-
-/* Laid over the box rather than in it. In flow, a sixteen-by-nine picture
-   166 pixels tall asks for 295 of width, and the menu, sized to its widest
-   content, grew by the pixel that asked for. Out of flow it only fills what
-   the menu's width already gives it. */
-.selfPreview > video,
-.selfPreview > img {
-  position: absolute;
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-}
-
-/* The camera faces the user, so the picture is what a mirror would show —
-   the same as the pre-join preview, or the two would disagree. */
-.selfPreview > .mirrored {
-  transform: scaleX(-1);
-}
-
-/*
- * A fade at each edge of the list while there is more that way.
- *
- * In place of the scrollbar, which the platform fades out after a moment: with
- * a trackpad on a Mac there was otherwise nothing to say that the list scrolls,
- * and it looked as though the backgrounds simply stopped. Sticky, so each holds
- * its edge of what is in view, and taking no room: each gives back its own
- * height in a margin. Over the content, so the rows and tiles fade into it
- * rather than past it, since they are opaque and a background would not show.
- *
- * The top one stands below whichever heading holds the top of the list, which
- * is where the content is coming out from under.
- */
-.scrollEdge {
-  position: sticky;
-  z-index: 1;
-  block-size: var(--cpd-space-6x);
-  pointer-events: none;
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .scrollEdge {
-    transition: opacity 150ms ease-out;
-  }
-}
-
-.scrollEdgeShown {
-  opacity: 1;
-}
-
-.scrollEdgeTop {
-  inset-block-start: var(--device-list-stuck-heading-height, 0);
-  margin-block-end: calc(-1 * var(--cpd-space-6x));
-  background: linear-gradient(
-    to bottom,
-    var(--cpd-color-bg-canvas-default),
-    transparent
-  );
-}
-
-.scrollEdgeBottom {
-  inset-block-end: 0;
-  margin-block-start: calc(-1 * var(--cpd-space-6x));
-  background: linear-gradient(
-    to top,
-    var(--cpd-color-bg-canvas-default),
-    transparent
-  );
-}

src/components/MediaMuteAndSwitchButton.test.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, expect, test, vi } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import { axe } from "vitest-axe";
 import {
   act,
@@ -15,37 +15,51 @@ import {
   type RenderResult,
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { type JSX, useState, type ReactNode } from "react";
+import { Profiler, type JSX, useState, type ReactNode } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
-import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
+import {
+  MediaMuteAndSwitchButton,
+  type MenuOptions,
+} from "./MediaMuteAndSwitchButton";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices } from "../state/MediaDevices";
+import { restoreAudioCapture, stubAudioCapture } from "../utils/test";
 
 interface RenderOptions {
   requestDeviceNames: () => void;
 }
 
-function renderComponent(
+function withProviders(
   component: ReactNode,
   { requestDeviceNames = (): void => {} }: Partial<RenderOptions> = {},
-): RenderResult {
-  return render(
+): JSX.Element {
+  return (
     <TooltipProvider>
       <MediaDevicesContext
         value={{ requestDeviceNames } as unknown as MediaDevices}
       >
         {component}
       </MediaDevicesContext>
-    </TooltipProvider>,
+    </TooltipProvider>
   );
 }
 
+function renderComponent(
+  component: ReactNode,
+  options: Partial<RenderOptions> = {},
+): RenderResult {
+  return render(withProviders(component, options));
+}
+
 describe("MediaMuteAndSwitchButton", () => {
+  // Only one test stubs the capture; don't let it leak into the rest.
+  afterEach(restoreAudioCapture);
+
   test("renders", () => {
     const { container } = renderComponent(
       <TooltipProvider>
-        <MediaMuteAndSwitchButton title={"Switcher"} iconsAndLabels={"audio"} />
+        <MediaMuteAndSwitchButton iconsAndLabels={"audio"} />
       </TooltipProvider>,
     );
     expect(container).toMatchSnapshot();
@@ -57,11 +71,7 @@ describe("MediaMuteAndSwitchButton", () => {
       enabled: boolean,
     ): RenderResult => {
       return renderComponent(
-        <MediaMuteAndSwitchButton
-          title={"Switcher"}
-          iconsAndLabels={type}
-          enabled={enabled}
-        />,
+        <MediaMuteAndSwitchButton iconsAndLabels={type} enabled={enabled} />,
       );
     };
     const renderAudioEndabled = renderLabels("audio", true);
@@ -88,7 +98,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="audio"
         enabled={true}
@@ -105,7 +114,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="audio"
         enabled={true}
@@ -126,7 +134,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="video"
         enabled={true}
@@ -146,11 +153,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const requestDeviceNames = vi.fn();
     renderComponent(
-      <MediaMuteAndSwitchButton
-        title="Switcher"
-        iconsAndLabels="audio"
-        enabled
-      />,
+      <MediaMuteAndSwitchButton iconsAndLabels="audio" enabled />,
       { requestDeviceNames },
     );
 
@@ -164,7 +167,6 @@ describe("MediaMuteAndSwitchButton", () => {
     renderComponent(
       <>
         <MediaMuteAndSwitchButton
-          title="Switcher"
           iconsAndLabels="audio"
           enabled
           options={[
@@ -174,7 +176,6 @@ describe("MediaMuteAndSwitchButton", () => {
           selectedOption="mic1"
         />
         <MediaMuteAndSwitchButton
-          title="Switcher"
           iconsAndLabels="video"
           enabled
           options={[
@@ -200,7 +201,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -224,7 +224,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -253,7 +252,6 @@ describe("MediaMuteAndSwitchButton", () => {
       const [selectedOption, setSelectedOption] = useState("mic1");
       return (
         <MediaMuteAndSwitchButton
-          title="Switcher"
           iconsAndLabels="audio"
           enabled={true}
           options={[
@@ -313,7 +311,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onVideoBlurToggle = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="video"
         enabled={true}
         videoBlurToggleClick={onVideoBlurToggle}
@@ -338,7 +335,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -362,7 +358,6 @@ describe("MediaMuteAndSwitchButton", () => {
       const [selectedOption, setSelectedOption] = useState("mic1");
       return (
         <MediaMuteAndSwitchButton
-          title="Switcher"
           iconsAndLabels="audio"
           enabled={true}
           options={[
@@ -389,8 +384,7 @@ describe("MediaMuteAndSwitchButton", () => {
       screen.getByRole("menuitemradio", { name: "Microphone 2" }),
     );
 
-    // In flight: nothing else can be picked, in either section, so a second
-    // request cannot overtake the first.
+    // In flight: nothing else can be picked, in either section.
     for (const name of ["Microphone 1", "Speakers", "Headset"]) {
       expect(screen.getByRole("menuitemradio", { name })).toHaveAttribute(
         "aria-disabled",
@@ -403,7 +397,7 @@ describe("MediaMuteAndSwitchButton", () => {
       await promise;
     });
 
-    // Settled: choosable again.
+    // Settled: selectable again.
     expect(
       screen.getByRole("menuitemradio", { name: "Microphone 1" }),
     ).not.toHaveAttribute("aria-disabled", "true");
@@ -412,11 +406,144 @@ describe("MediaMuteAndSwitchButton", () => {
     ).not.toHaveAttribute("aria-disabled", "true");
   });
 
+  test("lets go of a device switch that never arrives", async () => {
+    const user = userEvent.setup();
+    // onSelect never reports back, as when a device is removed mid-switch.
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );
+    await user.keyboard("{Escape}");
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    for (const name of ["Microphone 1", "Speakers", "Headset"]) {
+      expect(screen.getByRole("menuitemradio", { name })).not.toHaveAttribute(
+        "aria-disabled",
+        "true",
+      );
+    }
+  });
+
+  test("lets go of a device switch whose device is unplugged", async () => {
+    const user = userEvent.setup();
+    const mics: MenuOptions[] = [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ];
+    const menu = (options: MenuOptions[]): JSX.Element => (
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={options}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={vi.fn()}
+      />
+    );
+
+    const { getByRole, rerender } = renderComponent(menu(mics));
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );
+
+    // The second microphone is unplugged before the switch lands.
+    rerender(withProviders(menu(mics.slice(0, 1))));
+
+    // Selectable again without closing the menu.
+    expect(
+      screen.getByRole("menuitemradio", { name: "Headset" }),
+    ).not.toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("moves the level without re-rendering anything", async () => {
+    // The level is drawn into the DOM, so a moving level commits nothing.
+    const capture = stubAudioCapture();
+    const user = userEvent.setup();
+    let commits = 0;
+
+    const { getByRole } = renderComponent(
+      <Profiler
+        id="menu"
+        onRender={(): void => {
+          commits++;
+        }}
+      >
+        <MediaMuteAndSwitchButton
+          iconsAndLabels="audio"
+          enabled={true}
+          options={[
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+          ]}
+          selectedOption="mic1"
+          onSelect={vi.fn()}
+          outputOptions={[
+            { label: { type: "name", name: "Speakers" }, id: "spk1" },
+            { label: { type: "name", name: "Headset" }, id: "spk2" },
+          ]}
+          selectedOutputOption="spk1"
+          onSelectOutput={vi.fn()}
+        />
+      </Profiler>,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    capture.grant();
+    await vi.waitFor(() => expect(capture.contexts).toHaveLength(1));
+    const meter = await screen.findByRole("meter");
+    // The capture's arrival is one render: the idle level swapped for its own.
+    await act(async () => {});
+    const settled = commits;
+
+    // The meter smooths by elapsed time, so hand-driven frames need a clock.
+    let elapsed = performance.now();
+    const clock = vi
+      .spyOn(performance, "now")
+      .mockImplementation(() => (elapsed += 16));
+
+    // One frame per task, as a browser delivers them: one act() would batch them.
+    for (let step = 1; step <= 8; step++) {
+      capture.speak(step / 8);
+      await act(async () => {
+        capture.drawFrames(1);
+        await Promise.resolve();
+      });
+    }
+    clock.mockRestore();
+
+    expect(meter.getAttribute("aria-valuenow")).not.toBe("0");
+    expect(commits - settled).toBe(0);
+  });
+
   test("camera menu uses the same selection pattern and keeps the blur toggle", async () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="video"
         enabled={true}
         options={[
@@ -431,10 +558,8 @@ describe("MediaMuteAndSwitchButton", () => {
 
     await user.click(getByRole("button", { name: "Camera" }));
 
-    // Same selection pattern as the microphone menu.
     screen.getByRole("menuitemradio", { name: "Camera 1", checked: true });
     screen.getByRole("menuitemradio", { name: "Camera 2", checked: false });
-    // And background blur is still reachable from here.
     expect(
       screen.getByRole("menuitemcheckbox", { name: "Blur background" }),
     ).toBeInTheDocument();
@@ -444,7 +569,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -459,27 +583,25 @@ describe("MediaMuteAndSwitchButton", () => {
     await user.click(getByRole("button", { name: "Microphone" }));
     const list = screen
       .getByRole("menuitemradio", { name: "Microphone 1" })
-      .closest("[data-focus-modality]");
+      .closest("[data-focus-source]");
 
-    // The menu focuses whatever the pointer is over, so focus alone says
-    // nothing about how someone is navigating.
-    expect(list).toHaveAttribute("data-focus-modality", "pointer");
+    // The menu focuses whatever the pointer is over, so focus alone says nothing.
+    expect(list).toHaveAttribute("data-focus-source", "pointer");
 
     await user.keyboard("{ArrowDown}");
-    expect(list).toHaveAttribute("data-focus-modality", "keyboard");
+    expect(list).toHaveAttribute("data-focus-source", "keyboard");
 
     await user.pointer({
       target: screen.getByRole("menuitemradio", { name: "Microphone 2" }),
       coords: { clientX: 10, clientY: 10 },
     });
-    expect(list).toHaveAttribute("data-focus-modality", "pointer");
+    expect(list).toHaveAttribute("data-focus-source", "pointer");
   });
 
   test("marks the selected device with the accent fill", async () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -497,8 +619,7 @@ describe("MediaMuteAndSwitchButton", () => {
       .getByRole("menuitemradio", { name: "Microphone 2" })
       .querySelector("input[type=radio]");
     expect(selected).toBeChecked();
-    // A read-only control is painted muted, which loses the accent fill that
-    // marks the selection and makes the menu differ from settings.
+    // readOnly would paint the selected radio muted.
     expect(selected).not.toHaveAttribute("readonly");
   });
 
@@ -506,7 +627,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -526,8 +646,6 @@ describe("MediaMuteAndSwitchButton", () => {
 
     await user.click(getByRole("button", { name: "Microphone" }));
 
-    // Includes the menu's own structure: wrappers between the menu and its
-    // items break the relationship the roles describe.
     const menu = document.querySelector('[role="menu"]');
     expect(await axe(menu as HTMLElement)).toHaveNoViolations();
   });
@@ -536,7 +654,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -570,7 +687,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -607,7 +723,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelectOutput = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -635,7 +750,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -648,7 +762,7 @@ describe("MediaMuteAndSwitchButton", () => {
 
     await user.click(getByRole("button", { name: "Microphone" }));
 
-    // Shown rather than hidden, so the menu keeps its shape, but not choosable.
+    // Shown, but not selectable.
     const only = screen.getByRole("menuitemradio", { name: "Microphone 1" });
     expect(only).toHaveAttribute("aria-disabled", "true");
   });
@@ -657,7 +771,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -666,8 +779,7 @@ describe("MediaMuteAndSwitchButton", () => {
         ]}
         selectedOption="mic1"
         onSelect={vi.fn()}
-        // Safari enumerates no output devices at all, and offers no way to
-        // choose one.
+        // As Safari: no outputs listed.
         outputOptions={[]}
         selectedOutputOption={undefined}
         onSelectOutput={undefined}
@@ -676,8 +788,6 @@ describe("MediaMuteAndSwitchButton", () => {
 
     await user.click(getByRole("button", { name: "Microphone" }));
 
-    // A heading with nothing under it says the feature is broken. Audio is
-    // playing somewhere, so the section names that somewhere and disables it.
     const speakers = screen
       .getAllByRole("group")
       .find((group) => group.getAttribute("aria-label") === "Speaker")!;
@@ -685,8 +795,6 @@ describe("MediaMuteAndSwitchButton", () => {
     expect(entries).toHaveLength(1);
     expect(entries[0]).toHaveAccessibleName("Default");
     expect(entries[0]).toHaveAttribute("aria-disabled", "true");
-    // And marked as the selection: it is where audio is going, so an unchecked
-    // lone entry would read as nothing being chosen at all.
     expect(entries[0]).toHaveAttribute("aria-checked", "true");
     expect(
       within(entries[0]).getByRole("radio", { hidden: true }),
@@ -697,7 +805,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -711,7 +818,6 @@ describe("MediaMuteAndSwitchButton", () => {
           { label: { type: "name", name: "Headset" }, id: "spk2" },
         ]}
         selectedOutputOption="spk1"
-        // No callback: nothing can be picked here.
         onSelectOutput={undefined}
       />,
     );
@@ -724,7 +830,6 @@ describe("MediaMuteAndSwitchButton", () => {
     expect(
       screen.getByRole("menuitemradio", { name: "Headset" }),
     ).toHaveAttribute("aria-disabled", "true");
-    // The microphone section is unaffected.
     expect(
       screen.getByRole("menuitemradio", { name: "Microphone 2" }),
     ).not.toHaveAttribute("aria-disabled", "true");

src/components/MediaMuteAndSwitchButton.tsx

@@ -11,31 +11,20 @@ import {
   type CSSProperties,
   type FC,
   useEffect,
-  useRef,
   type ReactElement,
-  type ReactNode,
-  useLayoutEffect,
 } from "react";
 import {
-  Alert,
   Button,
   Menu,
   MenuItem,
-  InlineSpinner,
   MenuTitle,
   RadioInput,
-  Tooltip,
   ToggleMenuItem,
 } from "@vector-im/compound-web";
 import {
   ChevronUpIcon,
   ChevronDownIcon,
   SpinnerIcon,
-  BlockIcon,
-  PlusIcon,
-  CheckCircleSolidIcon,
-  CloseIcon,
-  InfoIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
@@ -50,32 +39,14 @@ import {
 import { useMediaDevices } from "../MediaDevicesContext";
 import { useRootElement } from "../RootElementContext";
 import { observeElementSize$ } from "../utils/elementSize";
-import { MicrophoneLevelMeter } from "./MicrophoneLevelMeter";
-import { useMicrophoneLevel } from "./useMicrophoneLevel";
+import { LiveMicrophoneLevelMeter } from "./MicrophoneLevelMeter";
 
 export interface MenuOptions {
   label: DeviceLabel | AudioOutputDeviceLabel;
   id: string;
 }
 
-/** One choice in the camera menu's Background effects section. */
-export interface BackgroundEffectOption {
-  id: string;
-  /** Shown under the tile, and the item's accessible name. */
-  label: string;
-  kind: "none" | "blur" | "image";
-  /** The thumbnail, for kind "image". Blur and no effect draw their own. */
-  imageUrl?: string;
-  /** Whether this one is the user's to remove. */
-  removable?: boolean;
-}
-
 export interface MediaMuteAndSwitchButtonProps {
-  /**
-   * The accessible name of the menu. Defaults to a translated name for the
-   * media kind. Never shown: each section carries its own heading.
-   */
-  title?: string;
   /** If the Mute button is enabled */
   enabled?: boolean;
   /** Callback if the mute button is clicked */
@@ -87,71 +58,14 @@ export interface MediaMuteAndSwitchButtonProps {
   options?: MenuOptions[];
   /** The option that will currently be rendered as the selected option */
   selectedOption?: string;
-  /**
-   * Output (speaker) devices, shown as their own section above the input
-   * section. Audio menu only; omitted entirely for video.
-   */
+  /** Output (speaker) devices. Audio menu only. */
   outputOptions?: MenuOptions[];
   /** The output option currently rendered as selected */
   selectedOutputOption?: string;
-  /**
-   * Called when an output device is picked. Undefined means no output can be
-   * chosen here, and the section renders disabled.
-   */
+  /** Picks an output device. Undefined disables the speaker section. */
   onSelectOutput?: (id: string) => void;
   videoBlurToggleClick?: () => void;
   videoBlurEnabled?: boolean;
-  /**
-   * Background effects, shown as a grid of tiles under the camera list. Camera
-   * menu only; omitted entirely for audio. An empty list leaves the section out.
-   */
-  backgroundEffects?: BackgroundEffectOption[];
-  /** The effect currently in force. */
-  selectedBackgroundEffect?: string;
-  /**
-   * Called when an effect is chosen. Undefined means no effect can be chosen
-   * here, and the section renders disabled, so the menu keeps the same shape
-   * wherever background processing is unavailable.
-   */
-  onSelectBackgroundEffect?: (id: string) => void;
-  /**
-   * Called with the file the user chose from the add tile. Omit to leave that
-   * tile out. The picker lives here rather than with the caller because
-   * opening it takes the focus, which would otherwise dismiss the menu.
-   */
-  onAddBackgroundImage?: (file: File) => void;
-  /**
-   * Called to remove one of the user's own backgrounds. Omit to offer no
-   * removal. The one in force is never offered: it is what the user is
-   * wearing, and taking it away would leave them with nothing chosen.
-   */
-  onRemoveBackgroundEffect?: (id: string) => void;
-  /**
-   * Why the last file the user offered could not be used, if it could not.
-   * Shown with the grid, where they chose it.
-   */
-  backgroundEffectError?: string;
-  /**
-   * What the user should know before choosing, if anything — that effects run
-   * slowly in this browser, say. Told, not decided for them: the cost is
-   * smoothness and the reason to pay it is privacy, and only they know which
-   * they would rather have.
-   */
-  backgroundEffectNotice?: string;
-  /**
-   * Whether the pipeline is still being built, which happens once a session on
-   * the first effect chosen. Shown on that effect's own tile, in place of its
-   * tick, rather than as a message: it belongs to what the user just pressed,
-   * and where the wait is short a message would only flash.
-   */
-  backgroundEffectSettling?: boolean;
-  /**
-   * How the user looks right now, with whatever effect is in force: drawn at
-   * the top of the camera menu, where choosing a background can be judged by
-   * its result rather than by a thumbnail of it. Shown only where the call
-   * leaves room for it, and scrolled beneath rather than scrolled away.
-   */
-  selfPreview?: ReactNode;
   /**
    * 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`
@@ -161,58 +75,16 @@ export interface MediaMuteAndSwitchButtonProps {
 
 const BLUR_ID = "blur";
 
-/**
- * Stands for wherever the platform is sending audio, where it will not say.
- *
- * Not a device id the browser would recognise: nothing can be selected on a
- * platform that lists no outputs, so this is only ever shown, never sent.
- */
+/** Id of the placeholder "Default" row, shown when the platform lists no outputs. */
 const DEFAULT_OUTPUT_ID = "default";
 
-/**
- * The share of the call area the device list may fill.
- *
- * The menu carries its headings and the level meter as well, and a list that
- * took the whole call would hide the call it belongs to.
- */
+/** Largest share of the call area's height the device list may take. */
 const LIST_SHARE_OF_CALL = 0.6;
 
-/**
- * The shortest the device list may be, whatever the call measures.
- *
- * A share alone collapses in a small call to a list that shows one device and
- * gives no sign that there are others. Scrolling a short list is the better
- * failure.
- */
+/** Smallest device list height in px, so a short call still shows more than one device. */
 const MIN_LIST_HEIGHT = 160;
 
-/**
- * The most the self-preview may take, which is also what it costs the list.
- *
- * Its fixed height: sixteen by nine across the camera menu's width, less the
- * frame, so it never costs more than this. The
- * preview is paid for out of the list's share rather than on top of it, so the
- * menu is never taller for having one: where the list could not keep its floor
- * after paying, there is no preview at all.
- */
-const PREVIEW_BLOCK = 166;
-
-/**
- * The camera menu's width, as design sets it.
- *
- * Fixed rather than sized to its content, so a long device name wraps instead
- * of widening the menu over more of the picture the user is trying to judge,
- * and so the self-preview is always the sixteen by nine it is drawn at. Less
- * only where the call area itself is narrower — the menu has to stay inside
- * it — which is why it is measured rather than written into the stylesheet.
- */
-const CAMERA_MENU_WIDTH = 296;
-
-/** Clear space kept between the menu and the call area's sides. */
-const CAMERA_MENU_MARGIN = 16;
-
 export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
-  title,
   enabled,
   busy,
   onMuteClick,
@@ -224,81 +96,36 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
   onSelectOutput,
   videoBlurEnabled,
   videoBlurToggleClick,
-  backgroundEffects,
-  selectedBackgroundEffect,
-  onSelectBackgroundEffect,
-  onAddBackgroundImage,
-  onRemoveBackgroundEffect,
-  backgroundEffectError,
-  backgroundEffectNotice,
-  backgroundEffectSettling,
-  selfPreview,
   onSelect,
 }) => {
-  // Which device we have asked for but not yet been given. Carries the kind as
-  // well as the id, because an input and an output can share an id: "default"
-  // names both on Chrome.
-  // Held open across the file picker: a native dialog takes the focus, and the
-  // menu would take that as a click elsewhere and close behind it.
-  const [choosingFile, setChoosingFile] = useState(false);
-
-  // The refusal belongs to the attempt that caused it. It stays while the menu
-  // is open, can be dismissed, and is gone by the time the menu is opened
-  // again: a message about a file chosen minutes ago explains nothing.
-  const [refusalSeen, setRefusalSeen] = useState(false);
-  useEffect(() => setRefusalSeen(false), [backgroundEffectError]);
-  const chooseFile = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    const input = chooseFile.current;
-    if (!input) return;
-    // Dismissing the picker without choosing fires `cancel`, which React does
-    // not type, so it is listened for directly. Without it the menu would
-    // stay pinned open after a cancelled pick.
-    const done = (): void => setChoosingFile(false);
-    input.addEventListener("cancel", done);
-    return (): void => input.removeEventListener("cancel", done);
-  }, [onAddBackgroundImage]);
-
+  // Requested but not yet selected. Keyed by kind too, since Chrome uses
+  // "default" for both an input and an output.
   const [plannedSelection, setPlannedSelection] = useState<{
     kind: "input" | "output";
     id: string;
   } | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
+  const onOpenChange = useCallback((open: boolean): void => {
+    setMenuOpen(open);
+    // Drop a request that never arrived.
+    if (!open) setPlannedSelection(null);
+  }, []);
   const isBusy = busy ?? false;
   const { t } = useTranslation();
   const devices = useMediaDevices();
 
-  // Radix focuses whatever the pointer is over, so the browser's own
-  // :focus-visible cannot tell us whether a person is navigating by keyboard:
-  // Chromium answers yes to everything after any key press, Firefox answers no
-  // to programmatic focus. Track it ourselves and let the styling follow.
   /**
-   * Tracks which modality moved the focus, for as long as the list is mounted.
-   *
-   * A ref rather than an effect on `menuOpen`: that state is ours, the open
-   * menu is Radix's, and the two do not commit together — an effect keyed on
-   * ours can run before Radix has mounted the content, with nothing to attach
-   * to. The list existing is the honest signal that the menu is open.
-   *
-   * Recorded on the menu rather than held in state, because every item the menu
-   * can focus has to answer to it — the device rows and the camera menu's blur
-   * toggle, which is the menu's child and not the list's — and because which
-   * modality someone is using changes nothing that has to be rendered again.
+   * Records on the menu whether the keyboard or the pointer moved focus, for
+   * the focus ring. `:focus-visible` can't tell: Radix focuses whatever the
+   * pointer is over. Listened for on the menu, not the document, so a second
+   * Element Call on the page doesn't answer for this one.
    */
-  const trackFocusModality = useCallback(
+  const trackFocusSource = useCallback(
     (list: HTMLDivElement | null): (() => void) | undefined => {
-      // Watched on the menu, not on the document. Element Call can be mounted
-      // more than once in a host's page, and the menu is portalled out of the
-      // call root, so a document listener would also answer for a key pressed
-      // in the other instance, or in the host's own page. The menu rather than
-      // the list, because the first arrow key arrives while the menu itself
-      // holds focus, above anything we render.
       const menu = list?.closest<HTMLElement>('[role="menu"]');
       if (menu === null || menu === undefined) return;
-      // Each opening starts over: the modality belongs to whoever is using this
-      // menu now, not to whoever last used it.
-      const record = (modality: "keyboard" | "pointer"): void => {
-        menu.dataset.focusModality = modality;
+      const record = (source: "keyboard" | "pointer"): void => {
+        menu.dataset.focusSource = source;
       };
       record("pointer");
       const usedKeyboard = (): void => record("keyboard");
@@ -313,150 +140,34 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     [],
   );
 
-  // The menu is portalled outside the call root, so nothing in the stylesheets
-  // can size it against the call. Measure the call area rather than the window,
-  // or the menu is wrong wherever Element Call is not the whole page.
+  // Measured on the call area: CSS can't size the portalled menu against it.
   const rootElement = useRootElement();
-  const [listShare, setListShare] = useState<number>();
+  const [listMaxHeight, setListMaxHeight] = useState<number>();
   useEffect(() => {
     if (!menuOpen) return;
-    // Followed rather than measured once: a host can resize the space Element
-    // Call is drawn in while the menu is open — a panel animating, a window
-    // dragged, a phone turned — and a bound taken on opening then describes a
-    // call area that no longer exists. Quantised before it reaches React, so a
-    // resize re-renders only when the bound itself moves.
+    // Followed, since a host can resize the call while the menu is open.
     const subscription = observeElementSize$(rootElement)
       .pipe(
-        map(({ height }) => Math.round(height * LIST_SHARE_OF_CALL)),
-        distinctUntilChanged(),
-      )
-      .subscribe(setListShare);
-    return (): void => subscription.unsubscribe();
-  }, [menuOpen, rootElement]);
-
-  // Whether the list has more to show above or below what is in view, and how
-  // tall the heading stuck at its top is. Said with a fade at each edge rather
-  // than left to the scrollbar, which the platform fades away after a moment —
-  // with a trackpad on a Mac there is otherwise nothing to say the list scrolls
-  // at all. Worked out from the list itself, on scrolling, on resizing and
-  // after every render, since adding or removing a background changes its
-  // length without doing either.
-  const [listElement, setListElement] = useState<HTMLDivElement | null>(null);
-  const listRef = useCallback(
-    (list: HTMLDivElement | null): (() => void) | undefined => {
-      setListElement(list);
-      return trackFocusModality(list);
-    },
-    [trackFocusModality],
-  );
-  const [edges, setEdges] = useState({ above: false, below: false, stuck: 0 });
-  const measureEdges = useCallback((): void => {
-    if (listElement === null) return;
-    const above = listElement.scrollTop > 0;
-    const below =
-      listElement.scrollTop + listElement.clientHeight <
-      listElement.scrollHeight - 1;
-    // The heading holding the top is the one at the list's own top edge, give
-    // or take the border width it keeps clear of the frame.
-    const top = listElement.getBoundingClientRect().top;
-    let stuck = 0;
-    if (above)
-      for (const heading of listElement.querySelectorAll<HTMLElement>(
-        `.${styles.sectionHeading}`,
-      )) {
-        const box = heading.getBoundingClientRect();
-        // How far down it reaches, to the fraction: a heading's line height
-        // lands it on half pixels, and rounding left the fade half a pixel
-        // short of it or over it.
-        if (Math.abs(box.top - top) < 2) stuck = box.bottom - top;
-      }
-    setEdges((previous) =>
-      previous.above === above &&
-      previous.below === below &&
-      previous.stuck === stuck
-        ? previous
-        : { above, below, stuck },
-    );
-  }, [listElement]);
-  useLayoutEffect(measureEdges);
-  useEffect(() => {
-    if (listElement === null) return;
-    listElement.addEventListener("scroll", measureEdges, { passive: true });
-    const subscription =
-      observeElementSize$(listElement).subscribe(measureEdges);
-    return (): void => {
-      listElement.removeEventListener("scroll", measureEdges);
-      subscription.unsubscribe();
-    };
-  }, [listElement, measureEdges]);
-
-  const [cameraMenuWidth, setCameraMenuWidth] = useState(CAMERA_MENU_WIDTH);
-  useEffect(() => {
-    if (!menuOpen || iconsAndLabels !== "video") return;
-    const subscription = observeElementSize$(rootElement)
-      .pipe(
-        map(({ width }) =>
-          Math.min(
-            CAMERA_MENU_WIDTH,
-            Math.round(width - 2 * CAMERA_MENU_MARGIN),
-          ),
+        map(({ height }) =>
+          Math.max(MIN_LIST_HEIGHT, Math.round(height * LIST_SHARE_OF_CALL)),
         ),
         distinctUntilChanged(),
       )
-      .subscribe(setCameraMenuWidth);
+      .subscribe(setListMaxHeight);
     return (): void => subscription.unsubscribe();
-  }, [menuOpen, iconsAndLabels, rootElement]);
+  }, [menuOpen, rootElement]);
 
-  // Only while the menu is open, so nothing holds a second capture of the
-  // microphone for the length of a call.
-  // The meter sits over the foot of the scrolling list, so the list has to
-  // keep that much of itself clear: a row scrolled to by the keyboard would
-  // otherwise arrive underneath it, half-read. Its own height, measured,
-  // because the failure states are two lines where a level is one.
-  const [meterHeight, setMeterHeight] = useState<number>();
-  const meter = useCallback(
-    (element: HTMLDivElement | null): (() => void) | undefined => {
-      if (element === null) return;
-      const subscription = observeElementSize$(element)
-        .pipe(
-          map(({ height }) => height),
-          distinctUntilChanged(),
-        )
-        .subscribe(setMeterHeight);
-      return (): void => subscription.unsubscribe();
-    },
-    [],
-  );
+  // Kept clear at the list's foot, so a row reached by keyboard isn't under
+  // the meter.
+  const [meterHeight, meter] = useMeasuredHeight();
 
-  // The headings stand over the head of the list, so it has to keep their
-  // height clear too — the same bargain as the meter, at the other end. One
-  // measurement serves both: the sections are headed alike.
-  const [headingHeight, setHeadingHeight] = useState<number>();
-  const heading = useCallback(
-    (element: HTMLDivElement | null): (() => void) | undefined => {
-      if (element === null) return;
-      const subscription = observeElementSize$(element)
-        .pipe(
-          map(({ height }) => height),
-          distinctUntilChanged(),
-        )
-        .subscribe(setHeadingHeight);
-      return (): void => subscription.unsubscribe();
-    },
-    [],
-  );
-
-  const microphoneState = useMicrophoneLevel(
-    selectedOption,
-    menuOpen && iconsAndLabels === "audio",
-  );
+  // Likewise at its head, for the sticky headings.
+  const [headingHeight, heading] = useMeasuredHeight();
 
   useEffect(() => {
     if (menuOpen) devices.requestDeviceNames(); // No-op after the first call
   }, [menuOpen, devices]);
 
-  // The mute control differs between the two only in which button it is and
-  // what it is called; how it behaves is the same, and was worth saying once.
   const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton;
   const button = (
     <MuteButton
@@ -474,7 +185,6 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     />
   );
 
-  // Only the camera menu carries a toggle, and only when the caller offers one.
   const toggles =
     iconsAndLabels === "video" && videoBlurToggleClick !== undefined
       ? [
@@ -487,24 +197,23 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
       : [];
 
   let optionsButtonLabel: string;
-  let defaultMenuTitle: string;
+  let menuTitle: string;
   let numberedLabel: (number: number) => string;
   switch (iconsAndLabels) {
     case "video":
       optionsButtonLabel = t("settings.devices.camera");
-      defaultMenuTitle = t("settings.devices.camera_source");
+      menuTitle = t("settings.devices.camera_source");
       numberedLabel = (n): string =>
         t("settings.devices.camera_numbered", { n });
       break;
     case "audio":
       optionsButtonLabel = t("settings.devices.microphone");
-      defaultMenuTitle = t("settings.devices.mic_source");
+      menuTitle = t("settings.devices.mic_source");
       numberedLabel = (n): string =>
         t("settings.devices.microphone_numbered", { n });
       break;
   }
 
-  /** The text shown for a device, whichever kind of label it carries. */
   const labelText = (
     label: MenuOptions["label"],
     numbered: (n: number) => string,
@@ -525,26 +234,24 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     }
   };
 
-  // A device we asked for that has not arrived yet. Until it does, nothing in
-  // the menu can be picked, so a second request cannot overtake the first.
+  // Nothing can be picked while a requested device is on offer but not yet
+  // selected, so a second request can't overtake it.
+  const plannedOutput = plannedSelection?.kind === "output";
+  const selectedOfPlannedKind = plannedOutput
+    ? selectedOutputOption
+    : selectedOption;
+  const offeredOfPlannedKind = plannedOutput ? outputOptions : options;
   const settling =
     plannedSelection !== null &&
-    plannedSelection.id !==
-      (plannedSelection.kind === "output"
-        ? selectedOutputOption
-        : selectedOption);
+    plannedSelection.id !== selectedOfPlannedKind &&
+    offeredOfPlannedKind?.some(({ id }) => id === plannedSelection.id) === true;
 
-  // Safari enumerates no output devices at all, and offers no way to choose
-  // one, so the list arrives empty. The section is shown all the same — audio
-  // is playing somewhere — naming that somewhere and disabling it like any
-  // single entry. A heading with nothing beneath it reads as a broken feature,
-  // and leaves the menu a different shape on one browser.
+  // Safari lists no outputs: show a disabled, selected Default rather than an
+  // empty section.
   const noOutputsListed = outputOptions?.length === 0;
   const speakerOptions: MenuOptions[] | undefined = noOutputsListed
     ? [{ id: DEFAULT_OUTPUT_ID, label: { type: "default", name: null } }]
     : outputOptions;
-  // And it is the selection, not merely the only row: it is where audio is
-  // going. An unchecked lone entry reads as nothing being chosen at all.
   const selectedSpeaker = noOutputsListed
     ? DEFAULT_OUTPUT_ID
     : selectedOutputOption;
@@ -557,30 +264,23 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     numbered: (n: number) => string,
   ): ReactElement[] => {
     const list = items ?? [];
-    // Shown but not choosable when nothing can be picked here, or when there is
-    // only one device. The entry stays visible so the menu keeps the same shape
-    // on every platform.
+    // Disabled rather than hidden, so the menu keeps its shape.
     const disabled = select === undefined || list.length <= 1 || settling;
     return list.map(({ label, id }) => (
       <MenuItem
-        // A radio input inside a button is invalid, and the menu needs an
-        // element it can give menuitemradio semantics to.
+        // A radio input may not sit inside a button.
         as="div"
         hideChevron
         disabled={disabled}
         label={labelText(label, numbered)}
         Icon={
-          // Inert, not aria-hidden: a form control inside a menu item must be
-          // out of the focus order and out of the accessibility tree, and
-          // aria-hidden alone leaves it focusable. The item's aria-checked is
-          // what conveys the selection.
+          // Inert, not aria-hidden: aria-hidden alone leaves it focusable.
           <span inert>
             <RadioInput
               checked={selected === id}
               disabled={disabled}
-              // Not readOnly: that styles the control as muted, losing the
-              // accent fill that marks the selection. The menu item owns the
-              // interaction, so the change handler has nothing to do.
+              // Not readOnly, which mutes the selected fill. The item handles
+              // the click.
               onChange={(): void => {}}
             />
           </span>
@@ -609,209 +309,6 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     ));
   };
 
-  // The camera menu's Background effects section. Tiles rather than rows, but
-  // menuitemradio like the device list above, so the menu stays one keyboard
-  // model throughout and the selection is announced rather than only drawn.
-  const effectTiles = (): ReactElement[] => {
-    const list = backgroundEffects ?? [];
-    // Shown but not choosable where background processing is unavailable, so
-    // the menu keeps the same shape on every platform. No effect is the
-    // exception: it needs no processing, so it stays choosable and stays the
-    // one in force.
-    const unavailable = onSelectBackgroundEffect === undefined;
-    // The one in force is never offered for removal: FR-025. Everything else
-    // the user added is theirs to take away.
-    const canRemove = (effect: BackgroundEffectOption): boolean =>
-      effect.removable === true &&
-      onRemoveBackgroundEffect !== undefined &&
-      selectedBackgroundEffect !== effect.id;
-
-    const tiles = list.map((effect) => {
-      const tile = (
-        <MenuItem
-          as="div"
-          hideChevron
-          disabled={unavailable && effect.kind !== "none"}
-          // The cross is drawn, not focusable: a control inside a menu item is
-          // invalid, and the item is what the arrow keys walk. Delete reaches
-          // the same action from the keyboard, announced by aria-keyshortcuts.
-          aria-keyshortcuts={canRemove(effect) ? "Delete" : undefined}
-          onKeyDown={
-            canRemove(effect)
-              ? (e: React.KeyboardEvent): void => {
-                  if (e.key !== "Delete" && e.key !== "Backspace") return;
-                  e.preventDefault();
-                  onRemoveBackgroundEffect?.(effect.id);
-                }
-              : undefined
-          }
-          className={classNames(styles.effectTile, {
-            [styles.effectTileSelected]: selectedBackgroundEffect === effect.id,
-          })}
-          label={effect.label}
-          // An image is its own label, so its name is carried for assistive
-          // technology alone rather than drawn over the picture.
-          labelProps={{
-            className:
-              effect.kind === "image"
-                ? styles.effectLabelUnseen
-                : styles.effectLabel,
-          }}
-          Icon={
-            <span aria-hidden className={styles.effectSwatch}>
-              {effect.kind === "image" && (
-                <img
-                  className={styles.effectThumb}
-                  src={effect.imageUrl}
-                  alt=""
-                />
-              )}
-              {selectedBackgroundEffect === effect.id &&
-              backgroundEffectSettling ? (
-                // Before the tick, on the tile that was pressed: the feedback
-                // belongs to the thing the user acted on. It spins by rotating,
-                // which a browser composites, so it keeps turning through the
-                // pause where the page itself has stopped — the difference
-                // between looking busy and looking crashed.
-                <span
-                  className={classNames(styles.effectCheck, styles.effectBusy, {
-                    [styles.effectCheckOnImage]: effect.kind === "image",
-                  })}
-                >
-                  <InlineSpinner size={20} />
-                </span>
-              ) : selectedBackgroundEffect === effect.id ? (
-                // The tick stands where the glyph would, and on a picture it
-                // carries its own ground so it reads against whatever is behind
-                // it.
-                <CheckCircleSolidIcon
-                  className={classNames(styles.effectCheck, {
-                    [styles.effectCheckOnImage]: effect.kind === "image",
-                  })}
-                  width={20}
-                  height={20}
-                />
-              ) : (
-                <>
-                  {effect.kind === "none" && (
-                    <BlockIcon width={20} height={20} />
-                  )}
-                  {effect.kind === "blur" && (
-                    <span className={styles.effectBlurGlyph} />
-                  )}
-                </>
-              )}
-            </span>
-          }
-          onSelect={(e) => {
-            e.preventDefault();
-            if (effect.id === selectedBackgroundEffect) return;
-            onSelectBackgroundEffect?.(effect.id);
-          }}
-          key={effect.id}
-          role="menuitemradio"
-          aria-checked={selectedBackgroundEffect === effect.id}
-        />
-      );
-      // The cross sits beside the item rather than inside it. Inside, its
-      // press and its click both reach the item first however they are
-      // handled, so the tile was chosen and the cross taken away before it
-      // could act: by mouse nothing happened, while the keyboard, which never
-      // touches it, worked.
-      return canRemove(effect) ? (
-        <div className={styles.effectTileWrap} key={effect.id}>
-          {tile}
-          {/* The cross carries no words, so hovering it names what it does.
-              Interactive as far as the tooltip is concerned — that keeps it
-              from wrapping the cross in a tab stop of its own, which is the
-              one thing this must not grow. */}
-          <Tooltip label={t("action.remove")}>
-            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
-                jsx-a11y/no-static-element-interactions --
-                Deliberately not a control: aria-hidden, so assistive technology
-                never meets it, and the keyboard reaches the same action through
-                Delete on the tile. A role and a tab stop here would add a stop
-                the menu's arrow keys know nothing about. */}
-            <span
-              aria-hidden
-              className={styles.effectRemove}
-              onClick={(): void => onRemoveBackgroundEffect?.(effect.id)}
-            >
-              <CloseIcon width={20} height={20} />
-            </span>
-          </Tooltip>
-        </div>
-      ) : (
-        tile
-      );
-    });
-    // Adding is a command, not a choice, so it is a plain item among the tiles
-    // rather than another radio.
-    if (onAddBackgroundImage !== undefined)
-      tiles.push(
-        <MenuItem
-          as="div"
-          hideChevron
-          disabled={unavailable}
-          className={styles.effectTile}
-          label={t("action.add_background_image")}
-          // The design draws a plus alone; the name is kept for assistive
-          // technology, which has nothing else to go on.
-          labelProps={{ className: styles.effectLabelUnseen }}
-          Icon={
-            <span aria-hidden className={styles.effectSwatch}>
-              <PlusIcon width={24} height={24} />
-            </span>
-          }
-          onSelect={(e) => {
-            e.preventDefault();
-            setChoosingFile(true);
-            chooseFile.current?.click();
-          }}
-          key="add-background-image"
-        />,
-      );
-    return tiles;
-  };
-
-  // The preview is always there in the camera menu; what the call's height
-  // decides is whether it stays put. Pinned above the list, it is paid for out
-  // of the list's share, and only where the list keeps its floor after paying,
-  // so a menu with one is no taller than a menu without. Where the list could
-  // not afford it, it goes into the list instead, first, and scrolls away with
-  // everything else: seen on opening, out of the way once the user is choosing.
-  const hasPreview =
-    iconsAndLabels === "video" &&
-    selfPreview !== undefined &&
-    listShare !== undefined;
-  const previewPinned =
-    hasPreview && listShare - PREVIEW_BLOCK >= MIN_LIST_HEIGHT;
-  const listMaxHeight =
-    listShare === undefined
-      ? undefined
-      : Math.max(
-          MIN_LIST_HEIGHT,
-          listShare - (previewPinned ? PREVIEW_BLOCK : 0),
-        );
-  const preview = hasPreview && (
-    // Decoration to assistive technology — the choice is announced by the
-    // items, and a picture of the user tells them nothing new.
-    <div
-      aria-hidden
-      className={classNames(styles.selfPreview, {
-        [styles.selfPreviewPinned]: previewPinned,
-      })}
-    >
-      {backgroundEffectSettling ? (
-        // The same wait the pressed tile shows, where the picture will be, so
-        // the eye does not have to go looking for why it is not.
-        <InlineSpinner size={32} />
-      ) : (
-        selfPreview
-      )}
-    </div>
-  );
-
   return (
     <div
       className={classNames({
@@ -821,35 +318,13 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     >
       {/* The mute button lives inside */}
       {button}
-      {onAddBackgroundImage !== undefined && (
-        <input
-          ref={chooseFile}
-          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 = "";
-            setChoosingFile(false);
-            if (file) onAddBackgroundImage(file);
-          }}
-        />
-      )}
       <Menu
         className={styles.menu}
-        title={title ?? defaultMenuTitle}
-        // Each section carries its own heading, so the menu's own title would
-        // sit on top of the first one. Kept for the accessible name only.
+        // Named for screen readers only: each section has its own heading.
+        title={menuTitle}
         showTitle={false}
         open={menuOpen}
-        onOpenChange={(open) => {
-          // Ignore the close the file picker provokes by taking the focus.
-          if (!open && choosingFile) return;
-          // A refusal does not outlive the menu it was shown in.
-          if (!open) setRefusalSeen(true);
-          setMenuOpen(open);
-        }}
+        onOpenChange={onOpenChange}
         side="top"
         trigger={
           <Button
@@ -865,50 +340,27 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
           />
         }
       >
-        {/* Pinned where there is room: the devices and the effects scroll
-            beneath it, because it is what the choosing below is for. */}
-        {previewPinned && preview}
         <div
-          ref={listRef}
-          // Transparent to assistive technology, so the menu still sees its
-          // items as its own children.
+          ref={trackFocusSource}
+          // Keeps the items the menu's own children for assistive tech.
           role="none"
-          className={classNames(styles.deviceList, {
-            [styles.deviceListLeadsWithPreview]: hasPreview && !previewPinned,
-          })}
+          className={styles.deviceList}
           style={
             {
               "--device-list-max-height":
                 listMaxHeight === undefined ? undefined : `${listMaxHeight}px`,
-              // The menu takes its width from its content, and this is the
-              // content that could otherwise set it. Only the camera menu.
-              "--device-list-inline-size":
-                iconsAndLabels === "video" ? `${cameraMenuWidth}px` : undefined,
               "--device-list-scroll-padding-end":
                 meterHeight === undefined ? undefined : `${meterHeight}px`,
               "--device-list-scroll-padding-start":
                 headingHeight === undefined ? undefined : `${headingHeight}px`,
-              "--device-list-stuck-heading-height": `${edges.stuck}px`,
             } as CSSProperties
           }
         >
-          {iconsAndLabels === "video" && (
-            <div
-              aria-hidden
-              className={classNames(styles.scrollEdge, styles.scrollEdgeTop, {
-                [styles.scrollEdgeShown]: edges.above,
-              })}
-            />
-          )}
-          {hasPreview && !previewPinned && preview}
           {iconsAndLabels === "audio" && speakerOptions && (
             <>
               {/* A menu may only contain items, separators and groups, so each
-                  heading belongs to a group rather than sitting beside the
-                  items it names. */}
+                  heading is a hidden part of a named group. */}
               <div role="group" aria-label={t("settings.devices.speaker")}>
-                {/* The heading is decoration: the group carries the name, and
-                    a menu may only contain items, separators and groups. */}
                 <div aria-hidden className={styles.sectionHeading}>
                   <MenuTitle title={t("settings.devices.speaker")} />
                 </div>
@@ -926,8 +378,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
             <div ref={heading} aria-hidden className={styles.sectionHeading}>
               <MenuTitle title={optionsButtonLabel} />
             </div>
-            {/* The heading sits outside, so the meter can never ride up over it:
-              sticky only holds while this block is in view. */}
+            {/* Apart from the heading, so the sticky meter can't ride over it. */}
             <div role="none">
               {deviceItems(
                 "input",
@@ -937,68 +388,17 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
                 numberedLabel,
               )}
               {iconsAndLabels === "audio" && (
-                <MicrophoneLevelMeter
+                <LiveMicrophoneLevelMeter
                   ref={meter}
-                  state={microphoneState}
+                  deviceId={selectedOption}
+                  // Only while open, so the microphone isn't held all call.
+                  active={menuOpen}
                   className={styles.stickyMeter}
                 />
               )}
             </div>
           </div>
-          {iconsAndLabels === "video" &&
-            backgroundEffects !== undefined &&
-            backgroundEffects.length > 0 && (
-              <div
-                role="group"
-                aria-label={t("settings.background_effects_header")}
-              >
-                <div aria-hidden className={styles.sectionHeading}>
-                  <MenuTitle title={t("settings.background_effects_header")} />
-                </div>
-                <div role="none" className={styles.effectGrid}>
-                  {effectTiles()}
-                </div>
-              </div>
-            )}
-          {iconsAndLabels === "video" && (
-            <div
-              aria-hidden
-              className={classNames(
-                styles.scrollEdge,
-                styles.scrollEdgeBottom,
-                {
-                  [styles.scrollEdgeShown]: edges.below,
-                },
-              )}
-            />
-          )}
         </div>
-        {backgroundEffectError !== undefined &&
-          !refusalSeen && (
-            // Outside the list, which scrolls and is bounded by the call: inside
-            // it, a message could be cut off by the menu's own height or left
-            // below the fold, which is no way to tell someone something failed.
-            <div role="none" className={styles.effectError}>
-              <Alert
-                type="critical"
-                title={backgroundEffectError}
-                onClose={(): void => setRefusalSeen(true)}
-              />
-            </div>
-          )}
-        {backgroundEffectError === undefined &&
-          backgroundEffectNotice !== undefined && (
-            // Never both at once: a refusal is about what the user just did and
-            // wins the space, where this is about the browser and will still be
-            // true next time. Not dismissible for the same reason — there is
-            // nothing to dismiss, only something to know, and it is drawn to be
-            // read once rather than to interrupt: a subtle ground, an outline
-            // mark and text at its ordinary weight, as the design has it.
-            <div role="none" className={styles.effectNotice}>
-              <InfoIcon width={20} height={20} />
-              <span>{backgroundEffectNotice}</span>
-            </div>
-          )}
         {toggles.length > 0 && <hr />}
         {toggles.map((toggle) => (
           <ToggleMenuItem
@@ -1015,3 +415,25 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     </div>
   );
 };
+
+/** Follows an element's height. */
+function useMeasuredHeight(): [
+  number | undefined,
+  (element: HTMLElement | null) => (() => void) | undefined,
+] {
+  const [height, setHeight] = useState<number>();
+  const ref = useCallback(
+    (element: HTMLElement | null): (() => void) | undefined => {
+      if (element === null) return;
+      const subscription = observeElementSize$(element)
+        .pipe(
+          map((size) => size.height),
+          distinctUntilChanged(),
+        )
+        .subscribe(setHeight);
+      return (): void => subscription.unsubscribe();
+    },
+    [],
+  );
+  return [height, ref];
+}

src/components/MicrophoneLevelMeter.module.css

@@ -6,20 +6,21 @@ Please see LICENSE in the repository root for full details.
 */
 
 .meter {
+  /* A device row's icon column, so the bars start where the names do. */
+  --meter-icon-size: 24px;
+
+  /* Compound's radio size, whose centre line the icon shares. */
+  --device-control-size: 20px;
+
   display: flex;
   align-items: center;
   gap: var(--cpd-space-3x);
   padding-block: var(--cpd-space-2x);
-  /* The icon shares a centre with the radio controls in the device rows above,
-     which sit one 4x padding in from the menu's edge. Two things pull this row
-     out of line with them, and both come off the padding: the row is inset by a
-     border width so that the menu's frame stays visible behind it (see
-     `.stickyMeter`), and the icon is wider than a radio control, so it has to
-     start further left for the two to share a centre. Both are
-     measured in the MeterAlignsWithTheDeviceRows story rather than trusted:
-     jsdom lays nothing out, so only a real browser can hold this. */
+  /* Centres the icon on the radio column: less the row's inset border and half
+     the icon's extra width. Checked in the MeterAlignsWithTheDeviceRows story. */
   padding-inline-start: calc(
-    var(--cpd-space-4x) - var(--cpd-border-width-1) - 2px
+    var(--cpd-space-4x) - var(--cpd-border-width-1) -
+      (var(--meter-icon-size) - var(--device-control-size)) / 2
   );
   padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x));
 }
@@ -27,33 +28,20 @@ Please see LICENSE in the repository root for full details.
 .icon {
   color: var(--cpd-color-icon-secondary);
   flex-shrink: 0;
-  /* Same width as a device row's icon column, so the bars start where the
-     device names start. */
-  inline-size: 24px;
+  inline-size: var(--meter-icon-size);
+  block-size: var(--meter-icon-size);
 }
 
 .segments {
-  /* A bar and the space beside it are always the same size; what changes with
-     the width available is how many bars there are. Spreading a fixed number of
-     bars instead would make the meter a different shape in every place it is
-     used, and close them up into one solid block wherever the space ran short —
-     and a meter whose bars touch stops reading as a count, which is what
-     carries the level for anyone who cannot rely on the colour.
-
-     Both sizes are set here and nowhere else: the component reads them back off
-     the rendered bars to work out how many fit. */
+  /* Bars keep one size and the width decides how many; the component reads the
+     sizes back from here. */
   flex: 1;
-  /* The width decides the count, never the other way round. Containment is
-     what enforces that: without it the bars are both a floor under the width
-     and the widest thing in the menu, so the meter would set the menu's width
-     and the device names — which are what a person is reading — would have to
-     fit around it. */
+  /* So the bars never set the menu's width. */
   contain: inline-size;
   min-inline-size: 0;
   display: flex;
   align-items: center;
-  /* Half again as wide as a bar, as the design has it: bars set as close as
-     their own width read as a solid block long before they touch. */
+  /* Half again a bar's width, per the design. */
   gap: var(--cpd-space-1-5x);
 }
 
@@ -65,16 +53,13 @@ Please see LICENSE in the repository root for full details.
   background: var(--cpd-color-bg-subtle-primary);
 }
 
-/* Filled segments carry the level by count as well as by colour, so the meter
-   stays readable without relying on hue. */
+/* The count of lit bars carries the level as well as their colour. */
 .segmentLit {
   background: var(--cpd-color-bg-accent-rest);
 }
 
 .message {
   color: var(--cpd-color-text-secondary);
-  /* A paragraph brings a margin below it, which in a centred row does not push
-     the text down but lifts it: the margin box is what gets centred, so the
-     words end up above the middle and the icon beside them looks low. */
+  /* A paragraph's margin would lift the text off centre. */
   margin-block: 0;
 }

src/components/MicrophoneLevelMeter.stories.tsx

@@ -14,17 +14,10 @@ import {
   type MicrophoneLevelMeterProps,
 } from "./MicrophoneLevelMeter";
 import styles from "./MicrophoneLevelMeter.module.css";
-import { METER_SEGMENTS } from "../state/MicrophoneLevel";
+import { LEVEL_SCALE } from "../state/MicrophoneLevel";
+import { constant } from "../state/Behavior";
 
-/**
- * A width to show the meter at, close to the menu it lives in.
- *
- * Not a copy of the menu's width, and nothing depends on the two agreeing: a
- * bar and the gap beside it are a fixed size now, so this only decides how many
- * bars there is room for. Without a width at all the stories would shrink-wrap
- * to almost nothing and show a meter two bars wide, which is no use to anyone
- * looking at them.
- */
+/** Roughly the menu's width. It only decides how many bars fit. */
 const STORY_WIDTH = 256;
 
 const meta = {
@@ -47,29 +40,22 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/**
- * A quiet room. Nothing is lit: room hiss below the noise floor must not read
- * as "it can hear me".
- */
+/** A quiet room: hiss below the noise floor lights nothing. */
 export const Silent: Story = {
-  args: { state: { type: "level", level: 0 } },
+  args: { state: { type: "level", level$: constant(0) } },
   play: async ({ canvasElement }) => {
     await expect(litSegments(canvasElement)).toBe(0);
   },
 };
 
 export const QuietSpeech: Story = {
-  args: { state: { type: "level", level: 5 } },
+  args: { state: { type: "level", level$: constant(5) } },
 };
 
 export const NormalSpeech: Story = {
-  args: { state: { type: "level", level: 12 } },
+  args: { state: { type: "level", level$: constant(12) } },
   play: async ({ canvasElement }) => {
-    // Shown at something like the width of the menu, so the meter in a story
-    // reads like the meter in a call rather than like a handful of bars. The
-    // design's own mock has sixteen of them at this width; a floor rather than
-    // a count, because the number follows from the bar and gap sizes and those
-    // are the design's to change.
+    // A floor, not a count: the count follows from the design's bar and gap sizes.
     await expect(
       canvasElement.getElementsByClassName(styles.segment).length,
     ).toBeGreaterThanOrEqual(15);
@@ -77,48 +63,44 @@ export const NormalSpeech: Story = {
 };
 
 export const LoudSpeech: Story = {
-  args: { state: { type: "level", level: METER_SEGMENTS } },
+  args: { state: { type: "level", level$: constant(LEVEL_SCALE) } },
 };
 
-/**
- * The three volumes differ by how many bars are lit, so the level survives
- * greyscale and a screen reader as well as it survives colour.
- */
+/** The three volumes differ in how many bars are lit, not only in colour. */
 export const VolumesAreDistinguishable: Story = {
-  args: { state: { type: "level", level: 5 } },
+  args: { state: { type: "level", level$: constant(5) } },
   play: async ({ canvasElement, mount }) => {
     const lit: number[] = [];
-    for (const level of [5, 12, METER_SEGMENTS]) {
-      await mount(<MicrophoneLevelMeter state={{ type: "level", level }} />);
+    for (const level of [5, 12, LEVEL_SCALE]) {
+      await mount(
+        <MicrophoneLevelMeter
+          state={{ type: "level", level$: constant(level) }}
+        />,
+      );
       lit.push(litSegments(canvasElement));
       await expect(within(canvasElement).getByRole("meter")).toHaveAttribute(
         "aria-valuenow",
         String(level),
       );
     }
-    // Three different counts, rising: the level is carried by how many bars
-    // are lit, not by their colour alone.
     await expect(new Set(lit).size).toBe(lit.length);
     await expect(lit).toEqual([...lit].sort((a, b) => a - b));
   },
 };
 
-/**
- * Permission refused. A message with a next action, never a still meter that
- * reads as silence.
- */
+/** Permission refused: a message with a next action, not a still meter. */
 export const PermissionDenied: Story = {
   args: { state: { type: "permission-denied" } },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await expect(canvas.queryByRole("meter")).toBeNull();
     await expect(
-      canvas.getByText(/Allow access in your browser settings/),
+      canvas.getByText(/Microphone access is blocked/),
     ).toBeVisible();
   },
 };
 
-/** No input device at all, told apart from a refusal. */
+/** No input device, told apart from a refusal. */
 export const NoDevice: Story = {
   args: { state: { type: "no-device" } },
   play: async ({ canvasElement }) => {
@@ -126,9 +108,7 @@ export const NoDevice: Story = {
     await expect(canvas.queryByRole("meter")).toBeNull();
     await expect(canvas.getByText(/No microphone found/)).toBeVisible();
 
-    // The icon sits on the middle of the words, however many lines they run to.
-    // A paragraph's own margin would centre its margin box instead, leaving the
-    // text high and the icon looking low beside it.
+    // The icon sits on the middle of the text, however many lines it runs to.
     const middle = (element: Element): number => {
       const box = element.getBoundingClientRect();
       return box.top + box.height / 2;
@@ -139,17 +119,9 @@ export const NoDevice: Story = {
   },
 };
 
-/**
- * The same meter at two widths.
- *
- * A bar and the space beside it are always the same size; what changes is how
- * many bars there are. Spreading a fixed number of bars instead would make the
- * meter a different shape in every place it is used, and close the bars up into
- * one block wherever the space ran short — and bars that touch cannot be
- * counted, which is what carries the level without colour.
- */
+/** The same meter at two widths: the bars keep their size and only their count changes. */
 export const ShapeStaysTheSameAtAnyWidth: Story = {
-  args: { state: { type: "level", level: 12 } },
+  args: { state: { type: "level", level$: constant(12) } },
   play: async ({ mount, args }) => {
     const narrow = await measureAt(mount, args, 180);
     const wide = await measureAt(mount, args, 400);
@@ -157,17 +129,17 @@ export const ShapeStaysTheSameAtAnyWidth: Story = {
     await expect(narrow.bar).toBe(wide.bar);
     await expect(narrow.gap).toBe(wide.gap);
     await expect(narrow.count).toBeLessThan(wide.count);
-    // And the bars are still bars, not one run of colour.
+    // The bars are still separate, not one run of colour.
     await expect(narrow.gap).toBeGreaterThan(0);
   },
 };
 
-/** How many bars are painted as carrying level, rather than as empty. */
+/** How many bars are lit. */
 function litSegments(canvasElement: HTMLElement): number {
   return canvasElement.getElementsByClassName(styles.segmentLit).length;
 }
 
-/** Renders the meter at one width and reports the shape of its bars. */
+/** Renders the meter at one width and reports its bars' shape. */
 async function measureAt(
   mount: (ui: JSX.Element) => Promise<unknown>,
   args: MicrophoneLevelMeterProps,

src/components/MicrophoneLevelMeter.test.tsx

@@ -9,25 +9,27 @@ import { describe, expect, test } from "vitest";
 import { render, screen } from "@testing-library/react";
 
 import { MicrophoneLevelMeter } from "./MicrophoneLevelMeter";
-import { METER_SEGMENTS } from "../state/MicrophoneLevel";
+import { LEVEL_SCALE } from "../state/MicrophoneLevel";
+import { constant } from "../state/Behavior";
 
 describe("MicrophoneLevelMeter", () => {
   test("announces the level rather than relying on hue", () => {
-    render(<MicrophoneLevelMeter state={{ type: "level", level: 6 }} />);
+    render(
+      <MicrophoneLevelMeter state={{ type: "level", level$: constant(6) }} />,
+    );
 
     const meter = screen.getByRole("meter", { name: "Microphone level" });
     expect(meter).toHaveAttribute("aria-valuenow", "6");
-    expect(meter).toHaveAttribute("aria-valuemax", String(METER_SEGMENTS));
-    expect(meter).toHaveAttribute("aria-valuetext", `6 of ${METER_SEGMENTS}`);
+    expect(meter).toHaveAttribute("aria-valuemax", String(LEVEL_SCALE));
+    expect(meter).toHaveAttribute("aria-valuetext", `6 of ${LEVEL_SCALE}`);
   });
 
   test("shows distinct messages for denied permission and no input device", () => {
     const denied = render(
       <MicrophoneLevelMeter state={{ type: "permission-denied" }} />,
     );
-    // A next action, not a flat meter that reads as silence.
     expect(
-      denied.getByText(/Allow access in your browser settings/),
+      denied.getByText(/Microphone access is blocked/),
     ).toBeInTheDocument();
     expect(denied.queryByRole("meter")).toBeNull();
 

src/components/MicrophoneLevelMeter.tsx

@@ -5,7 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { useCallback, useState, type FC, type Ref } from "react";
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type FC,
+  type Ref,
+} from "react";
 import { Text } from "@vector-im/compound-web";
 import { MicOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
@@ -14,107 +21,126 @@ import { useTranslation } from "react-i18next";
 import { distinctUntilChanged, map } from "rxjs";
 
 import styles from "./MicrophoneLevelMeter.module.css";
-import { METER_SEGMENTS, type MicrophoneState } from "../state/MicrophoneLevel";
+import { LEVEL_SCALE, type MicrophoneState } from "../state/MicrophoneLevel";
 import { observeElementSize$ } from "../utils/elementSize";
+import { useMicrophoneLevel } from "./useMicrophoneLevel";
 
-export interface MicrophoneLevelMeterProps {
-  state: MicrophoneState;
+export interface LiveMicrophoneLevelMeterProps {
+  /** The microphone to listen to. */
+  deviceId: string | undefined;
+  /** Whether to hold a capture at all. */
+  active: boolean;
   className?: string;
-  /**
-   * The meter's own element. Its height is what a scroll container has to keep
-   * clear to stop the meter covering the row it has just scrolled to.
-   */
   ref?: Ref<HTMLDivElement>;
 }
 
 /**
- * The live input level of the selected microphone, shown beneath it.
- *
- * It says whether the microphone is picking anything up, which is not the same
- * as whether the user is being heard: it keeps moving while muted, and the mute
- * control is what says nothing is transmitted.
+ * The meter, wired to a live capture. Its own component so a changing level
+ * re-renders the meter, not its parent.
  */
+export const LiveMicrophoneLevelMeter: FC<LiveMicrophoneLevelMeterProps> = ({
+  deviceId,
+  active,
+  className,
+  ref,
+}) => {
+  const state = useMicrophoneLevel(deviceId, active);
+  return <MicrophoneLevelMeter state={state} className={className} ref={ref} />;
+};
+
+export interface MicrophoneLevelMeterProps {
+  state: MicrophoneState;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+
+/** The input level of a microphone, or why there is none. */
 export const MicrophoneLevelMeter: FC<MicrophoneLevelMeterProps> = ({
   state,
   className,
   ref,
 }) => {
   const { t } = useTranslation();
-  // How many bars there is room for. The bars never change size, so this is
-  // what absorbs a change of width. Starts at the full count so that the first
-  // paint is a meter rather than a single bar, and so that a renderer with no
-  // layout at all — jsdom — still draws the whole thing.
-  const [barCount, setBarCount] = useState(METER_SEGMENTS);
+  // Bars keep one size, so their count follows the width. Starts full so the
+  // first paint, and jsdom, draw a whole meter.
+  const [barCount, setBarCount] = useState(LEVEL_SCALE);
+  const segments = useRef<HTMLDivElement | null>(null);
   const track = useCallback(
     (element: HTMLDivElement | null): (() => void) | undefined => {
       if (element === null) return;
+      segments.current = element;
       const subscription = observeElementSize$(element)
         .pipe(
           map(({ width }) => barsThatFit(element, width)),
           distinctUntilChanged(),
         )
         .subscribe(setBarCount);
-      return (): void => subscription.unsubscribe();
+      return (): void => {
+        subscription.unsubscribe();
+        segments.current = null;
+      };
     },
     [],
   );
 
-  if (state.type !== "level")
-    return (
-      <div ref={ref} className={classNames(styles.meter, className)}>
-        <MicOnIcon width={24} height={24} className={styles.icon} aria-hidden />
+  // Drawn straight into the DOM: the level changes many times a second, and
+  // re-rendering for each change is what this avoids.
+  useLayoutEffect(() => {
+    const element = segments.current;
+    if (state.type !== "level" || element === null) return;
+    const subscription = state.level$.subscribe((level) => {
+      element.setAttribute("aria-valuenow", String(level));
+      element.setAttribute(
+        "aria-valuetext",
+        t("microphone_level.value", { level, max: LEVEL_SCALE }),
+      );
+      // The level is a share of the scale, not a bar count.
+      const lit = Math.round((level / LEVEL_SCALE) * barCount);
+      Array.from(element.children).forEach((bar, i) =>
+        bar.classList.toggle(styles.segmentLit, i < lit),
+      );
+    });
+    return (): void => subscription.unsubscribe();
+  }, [state, barCount, t]);
+
+  return (
+    <div ref={ref} className={classNames(styles.meter, className)}>
+      <MicOnIcon className={styles.icon} aria-hidden />
+      {state.type !== "level" ? (
         <Text size="sm" className={styles.message}>
           {state.type === "permission-denied"
             ? t("microphone_level.permission_denied")
             : t("microphone_level.no_device")}
         </Text>
-      </div>
-    );
-
-  return (
-    <div ref={ref} className={classNames(styles.meter, className)}>
-      <MicOnIcon width={24} height={24} className={styles.icon} aria-hidden />
-      <div
-        ref={track}
-        className={styles.segments}
-        role="meter"
-        aria-label={t("microphone_level.label")}
-        aria-valuemin={0}
-        aria-valuemax={METER_SEGMENTS}
-        aria-valuenow={state.level}
-        aria-valuetext={t("microphone_level.value", {
-          level: state.level,
-          max: METER_SEGMENTS,
-        })}
-      >
-        {Array.from({ length: barCount }, (_, i) => (
-          <span
-            key={i}
-            aria-hidden
-            className={classNames(styles.segment, {
-              // The level is a share of the scale, not a number of bars: how
-              // many bars stand for it depends on how many there are.
-              [styles.segmentLit]:
-                i < Math.round((state.level / METER_SEGMENTS) * barCount),
-            })}
-          />
-        ))}
-      </div>
+      ) : (
+        <div
+          ref={track}
+          className={styles.segments}
+          role="meter"
+          aria-label={t("microphone_level.label")}
+          aria-valuemin={0}
+          aria-valuemax={LEVEL_SCALE}
+          // The first paint's value; the effect above keeps it current.
+          aria-valuenow={state.level$.value}
+          aria-valuetext={t("microphone_level.value", {
+            level: state.level$.value,
+            max: LEVEL_SCALE,
+          })}
+        >
+          {Array.from({ length: barCount }, (_, i) => (
+            <span key={i} aria-hidden className={styles.segment} />
+          ))}
+        </div>
+      )}
     </div>
   );
 };
 
-/**
- * How many bars fit across `width`, at the size the stylesheet draws them.
- *
- * Measured off a rendered bar rather than told: the size of a bar and of the
- * space beside it are a design question, settled in the stylesheet, and reading
- * them back is what keeps them from being settled twice.
- */
+/** How many bars fit across `width`, measured so the stylesheet alone sets their size. */
 function barsThatFit(track: HTMLElement, width: number): number {
   const gap = Number.parseFloat(getComputedStyle(track).columnGap);
   const bar = track.firstElementChild?.getBoundingClientRect().width ?? 0;
-  // A renderer that lays nothing out tells us nothing; keep the full count.
-  if (!(bar > 0) || !(gap >= 0)) return METER_SEGMENTS;
+  // No layout (jsdom): keep the full count.
+  if (!(bar > 0) || !(gap >= 0)) return LEVEL_SCALE;
   return Math.max(1, Math.floor((width + gap) / (bar + gap)));
 }

src/components/SelfPreview.tsx

@@ -1,54 +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 { type FC, useEffect, useRef } from "react";
-import { facingModeFromLocalTrack, type LocalVideoTrack } from "livekit-client";
-import { VideoCallOffIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import styles from "./MediaMuteAndSwitchButton.module.css";
-
-interface Props {
-  /** The camera as the pipeline has it, or none while the camera is off. */
-  track: LocalVideoTrack | null;
-}
-
-/**
- * The user's own camera, for the camera menu's preview.
- *
- * Attached to the same track the pipeline is synced to, so it shows whatever
- * effect is in force — the processed picture where one has been chosen, and
- * the plain one where none ever has — without a capture or a pipeline of its
- * own. A second consumer of one track, not a second track.
- */
-export const SelfPreview: FC<Props> = ({ track }) => {
-  const video = useRef<HTMLVideoElement>(null);
-  useEffect(() => {
-    const element = video.current;
-    if (!track || !element) return;
-    track.attach(element);
-    return (): void => {
-      track.detach(element);
-    };
-  }, [track]);
-
-  // Nothing to show, and saying so: an effect chosen now still applies when
-  // the camera comes back, so the grid below stays live.
-  if (!track) return <VideoCallOffIcon width={32} height={32} />;
-
-  return (
-    <video
-      ref={video}
-      muted
-      playsInline
-      className={
-        facingModeFromLocalTrack(track).facingMode === "user"
-          ? styles.mirrored
-          : undefined
-      }
-    />
-  );
-};

src/components/useMicrophoneLevel.test.tsx

@@ -11,9 +11,7 @@ import { renderHook } from "@testing-library/react";
 import { useMicrophoneLevel } from "./useMicrophoneLevel";
 import { restoreAudioCapture, stubAudioCapture } from "../utils/test";
 
-// The capture itself, and releasing it, belong to observeMicrophoneState$ and
-// are covered in src/state/MicrophoneLevel.test.ts. What is left here is the
-// bridging: when the hook watches, and what it reports before it has an answer.
+// Capture and release are covered in MicrophoneLevel.test.ts; this covers the bridge.
 describe("useMicrophoneLevel", () => {
   afterEach(restoreAudioCapture);
 
@@ -36,7 +34,8 @@ describe("useMicrophoneLevel", () => {
 
     rerender({ id: "mic2" });
 
-    // No level carried over: the meter reads the new device or nothing at all.
-    expect(result.current).toEqual({ type: "level", level: 0 });
+    // No level carried over from the previous device.
+    const state = result.current;
+    expect(state.type === "level" ? state.level$.value : state.type).toBe(0);
   });
 });

src/components/useMicrophoneLevel.ts

@@ -11,17 +11,11 @@ import {
   type MicrophoneState,
   observeMicrophoneState$,
 } from "../state/MicrophoneLevel";
+import { constant } from "../state/Behavior";
 
-const IDLE: MicrophoneState = { type: "level", level: 0 };
+const IDLE: MicrophoneState = { type: "level", level$: constant(0) };
 
-/**
- * Reads the live input level of a microphone, while `active`.
- *
- * A bridge and nothing else: the capture, its lifetime and the maths belong to
- * {@link observeMicrophoneState$}. Scoped to `active` so the device is held
- * only while whatever shows the meter is on screen, rather than for the length
- * of a call.
- */
+/** The live level of a microphone, captured only while `active`. */
 export function useMicrophoneLevel(
   deviceId: string | undefined,
   active: boolean,
@@ -30,8 +24,7 @@ export function useMicrophoneLevel(
 
   useEffect(() => {
     if (!active) return;
-    // Idle first, so a new device starts from nothing rather than from the
-    // level the previous one was reading.
+    // Idle first, so a new device doesn't start from the previous level.
     setState(IDLE);
     const subscription = observeMicrophoneState$(deviceId).subscribe(setState);
     return (): void => subscription.unsubscribe();

src/config/ConfigOptions.ts

@@ -207,12 +207,6 @@ export interface ConfigOptions {
    * Take care when changing these options.
    */
   matrix_rtc_session?: {
-    /**
-     * How long (in milliseconds) to wait before rotating end-to-end media encryption keys
-     * when someone leaves a call.
-     */
-    wait_for_key_rotation_ms?: number;
-
     /**
      * How long we wait before retrying after a network error on any of the requests.
      */

src/grid/CallLayout.test.tsx

@@ -0,0 +1,187 @@
+/*
+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 { act, render, screen } from "@testing-library/react";
+import { BehaviorSubject } from "rxjs";
+import { describe, expect, it, vi } from "vitest";
+
+import { arrangeTiles, type Bounds } from "./CallLayout";
+import { makeGridLayout } from "./GridLayout";
+import { makeSpotlightLandscapeLayout } from "./SpotlightLandscapeLayout";
+import { makeSpotlightPortraitLayout } from "./SpotlightPortraitLayout";
+import { type DragCallback, type LayoutProps } from "./Grid";
+import { constant } from "../state/Behavior";
+import {
+  type Alignment,
+  type GridLayout,
+  type SpotlightLandscapeLayout,
+  type SpotlightPortraitLayout,
+} from "../state/layout-types";
+import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
+import {
+  GridTileViewModel,
+  SpotlightTileViewModel,
+  type TileViewModel,
+} from "../state/TileViewModel";
+
+// Grid supplies these hooks to the layouts it renders; on their own the
+// layouts have no grid to report to
+vi.mock("./Grid", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  useUpdateLayout: (): void => {},
+  useVisibleTiles: (): void => {},
+}));
+
+describe("grid layout", () => {
+  it("sizes the tiles from the minimum bounds", () => {
+    const minBounds$ = new BehaviorSubject<Bounds>({ width: 800, height: 600 });
+    const { scrolling: Scrolling } = makeGridLayout({ minBounds$ });
+    render(<Scrolling model={gridModel()} Slot={Slot} />);
+    const layer = screen.getByTestId("slot-0").parentElement!;
+    expect(layer.style.width).toBe("800px");
+    expect(layer.style.getPropertyValue("--width")).toBe(
+      `${Math.floor(arrangeTiles(800, 600, 3).tileWidth)}px`,
+    );
+
+    act(() => minBounds$.next({ width: 400, height: 300 }));
+    expect(layer.style.width).toBe("400px");
+    expect(layer.style.getPropertyValue("--width")).toBe(
+      `${Math.floor(arrangeTiles(400, 300, 3).tileWidth)}px`,
+    );
+  });
+
+  it("moves the spotlight only when a drag reaches another corner", () => {
+    const model = gridModel();
+    const { fixed: Fixed } = makeGridLayout({ minBounds$: bounds });
+    render(<Fixed model={model} Slot={Slot} />);
+    const alignments: Alignment[] = [];
+    model.spotlightAlignment$.subscribe((a) => alignments.push(a));
+    const drag = drags.get("spotlight")!;
+
+    // Still in the bottom right corner
+    act(() => drag({ x: 0, y: 0, xRatio: 0.9, yRatio: 0.9 }));
+    // Over to the bottom left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.1, yRatio: 0.9 }));
+    // And a little further, still bottom left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.8 }));
+    // Up to the top left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.1 }));
+
+    expect(alignments).toEqual([
+      { inline: "end", block: "end" },
+      { inline: "start", block: "end" },
+      { inline: "start", block: "start" },
+    ]);
+    const slot = screen.getByTestId("slot-spotlight");
+    expect(slot.getAttribute("data-inline-alignment")).toBe("start");
+    expect(slot.getAttribute("data-block-alignment")).toBe("start");
+  });
+});
+
+describe("spotlight landscape layout", () => {
+  it("puts the spotlight in the fixed layer and the grid in the scrolling one", () => {
+    const { fixed: Fixed, scrolling: Scrolling } = makeSpotlightLandscapeLayout(
+      { minBounds$: bounds },
+    );
+    const model = landscapeModel();
+    const { unmount } = render(<Fixed model={model} Slot={Slot} />);
+    expect(screen.getByTestId("slot-spotlight")).toBeInTheDocument();
+    unmount();
+
+    render(<Scrolling model={model} Slot={Slot} />);
+    expect(slotIds()).toEqual(model.grid.map((tile) => tile.id));
+  });
+});
+
+describe("spotlight portrait layout", () => {
+  it("sizes the grid tiles from the minimum width", () => {
+    const minBounds$ = new BehaviorSubject<Bounds>({ width: 300, height: 700 });
+    const { scrolling: Scrolling } = makeSpotlightPortraitLayout({
+      minBounds$,
+    });
+    const model = portraitModel();
+    render(<Scrolling model={model} Slot={Slot} />);
+    expect(slotIds()).toEqual(model.grid.map((tile) => tile.id));
+    const layer = screen.getByTestId(`slot-${model.grid[0].id}`).parentElement!
+      .parentElement!;
+    expect(layer.style.getPropertyValue("--grid-tile-width")).toBe(
+      `${Math.floor(arrangeTiles(300, 300, 3).tileWidth)}px`,
+    );
+
+    act(() => minBounds$.next({ width: 500, height: 700 }));
+    expect(layer.style.getPropertyValue("--grid-tile-width")).toBe(
+      `${Math.floor(arrangeTiles(500, 500, 3).tileWidth)}px`,
+    );
+  });
+});
+
+const bounds = constant<Bounds>({ width: 800, height: 600 });
+
+// The layouts only pass tile view models through to their slots
+const media = {} as UserMediaViewModel;
+const spotlight = new SpotlightTileViewModel(
+  constant([]),
+  constant(false),
+  constant("solid"),
+);
+const tiles = (): GridTileViewModel[] =>
+  Array.from({ length: 3 }, () => new GridTileViewModel(constant(media)));
+
+function gridModel(): GridLayout {
+  return {
+    type: "grid",
+    spotlight,
+    grid: tiles(),
+    spotlightAlignment$: new BehaviorSubject<Alignment>({
+      inline: "end",
+      block: "end",
+    }),
+    setVisibleTiles: () => {},
+  };
+}
+
+function landscapeModel(): SpotlightLandscapeLayout {
+  return {
+    type: "spotlight-landscape",
+    spotlight,
+    grid: tiles(),
+    setVisibleTiles: () => {},
+  };
+}
+
+function portraitModel(): SpotlightPortraitLayout {
+  return {
+    type: "spotlight-portrait",
+    spotlight,
+    grid: tiles(),
+    setVisibleTiles: () => {},
+  };
+}
+
+// Slots record their drag callback so a test can drag them, and show the id
+// of the tile they hold
+const drags = new Map<string, DragCallback | undefined>();
+const Slot: LayoutProps<unknown, TileViewModel, HTMLDivElement>["Slot"] = ({
+  id,
+  model,
+  onDrag,
+  ...props
+}) => {
+  drags.set(id, onDrag);
+  return (
+    <div data-testid={`slot-${id}`} {...props}>
+      {model instanceof GridTileViewModel ? model.id : "spotlight"}
+    </div>
+  );
+};
+
+function slotIds(): string[] {
+  return screen
+    .getAllByTestId(/^slot-/)
+    .map((slot) => slot.textContent ?? "")
+    .filter((id) => id !== "spotlight");
+}

src/grid/CallLayout.ts

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Observable } from "rxjs";
 import { type ComponentType } from "react";
 
 import { type LayoutProps } from "./Grid";
 import { type TileViewModel } from "../state/TileViewModel";
+import { type Behavior } from "../state/Behavior";
 
 export interface Bounds {
   width: number;
@@ -20,7 +20,7 @@ export interface CallLayoutInputs {
   /**
    * The minimum bounds of the layout area.
    */
-  minBounds$: Observable<Bounds>;
+  minBounds$: Behavior<Bounds>;
 }
 
 export interface CallLayoutOutputs<Model> {

src/grid/GridLayout.tsx

@@ -11,14 +11,12 @@ import {
   useCallback,
   useMemo,
 } from "react";
-import { distinctUntilChanged } from "rxjs";
-import { useObservableEagerState } from "observable-hooks";
 
 import { type GridLayout as GridLayoutModel } from "../state/layout-types.ts";
 import styles from "./GridLayout.module.css";
-import { useInitial } from "../useInitial";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import { type DragCallback, useUpdateLayout, useVisibleTiles } from "./Grid";
+import { useBehavior } from "../useBehavior";
 
 interface GridCSSProperties extends CSSProperties {
   "--gap": string;
@@ -39,22 +37,18 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   // lives
   fixed: function GridLayoutFixed({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
-    const alignment = useObservableEagerState(
-      useInitial(() =>
-        model.spotlightAlignment$.pipe(
-          distinctUntilChanged(
-            (a1, a2) => a1.block === a2.block && a1.inline === a2.inline,
-          ),
-        ),
-      ),
-    );
+    const alignment = useBehavior(model.spotlightAlignment$);
 
     const onDragSpotlight: DragCallback = useCallback(
-      ({ xRatio, yRatio }) =>
-        model.spotlightAlignment$.next({
-          block: yRatio < 0.5 ? "start" : "end",
-          inline: xRatio < 0.5 ? "start" : "end",
-        }),
+      ({ xRatio, yRatio }) => {
+        const block = yRatio < 0.5 ? "start" : "end";
+        const inline = xRatio < 0.5 ? "start" : "end";
+        // A drag reports the same alignment on every move; only a change is
+        // worth a re-render
+        const current = model.spotlightAlignment$.value;
+        if (current.block !== block || current.inline !== inline)
+          model.spotlightAlignment$.next({ block, inline });
+      },
       [model.spotlightAlignment$],
     );
 
@@ -78,7 +72,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   scrolling: function GridLayout({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width, height: minHeight } = useObservableEagerState(minBounds$);
+    const { width, height: minHeight } = useBehavior(minBounds$);
     const { gap, tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, minHeight, model.grid.length),
       [width, minHeight, model.grid.length],

src/grid/OneOnOneDesktopLayout.tsx

@@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode, useCallback, useMemo } from "react";
-import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts";
@@ -37,7 +36,7 @@ export const makeOneOnOneDesktopLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    const { width, height } = useObservableEagerState(minBounds$);
+    const { width, height } = useBehavior(minBounds$);
     const pipAlignment = useBehavior(model.pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),

src/grid/SpotlightLandscapeLayout.tsx

@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type FC, type ReactNode } from "react";
-import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout } from "./CallLayout";
@@ -33,7 +32,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    useObservableEagerState(minBounds$);
+    useBehavior(minBounds$);
 
     return (
       <div ref={ref} className={styles.layer}>
@@ -56,7 +55,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    useObservableEagerState(minBounds$);
+    useBehavior(minBounds$);
 
     return (
       <div ref={ref} className={styles.layer}>

src/grid/SpotlightPortraitLayout.tsx

@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode, type CSSProperties } from "react";
-import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout, arrangeTiles } from "./CallLayout";
@@ -58,7 +57,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width } = useObservableEagerState(minBounds$);
+    const { width } = useBehavior(minBounds$);
     const { gap, tileWidth, tileHeight } = arrangeTiles(
       width,
       // TODO: We pretend that the minimum height is the width, because the

src/index.css

@@ -7,10 +7,24 @@ Please see LICENSE in the repository root for full details.
 
 /* Styles for Element Call as a page of its own. The parts that apply wherever
 Element Call is shown live in base.css; these are about owning the document,
-and are not loaded when a host embeds Element Call as a component. */
+and are not loaded when a host embeds Element Call as a component.
+
+That includes Compound: the page brings the design tokens, the component styles
+and their fonts, where a host embedding the component supplies its own. The
+`compound` layers are ordered by base.css. */
 
 @import url("./base.css");
 
+@import url("@fontsource/inter/400.css");
+@import url("@fontsource/inter/500.css");
+@import url("@fontsource/inter/600.css");
+@import url("@fontsource/inter/700.css");
+@import url("@fontsource/inconsolata/400.css");
+@import url("@fontsource/inconsolata/700.css");
+
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
+@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
+
 body {
   background-color: var(--cpd-color-bg-canvas-default);
   color: var(--cpd-color-text-primary);

src/livekit/BackgroundEffectsBench.tsx

@@ -1,401 +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 { type FC, useCallback, useRef, useState } from "react";
-import {
-  createLocalVideoTrack,
-  type LocalVideoTrack,
-  VideoPresets,
-} from "livekit-client";
-import {
-  BackgroundProcessorWrapper,
-  supportsBackgroundProcessors as supportsBackgroundProcessorsLivekitSdk,
-  supportsModernBackgroundProcessors,
-  type SwitchBackgroundProcessorOptions,
-} from "@livekit/track-processors";
-import { logger } from "matrix-js-sdk/lib/logger";
-
-import { BackgroundEffectTransformer } from "./BackgroundEffectTransformer";
-import { blurRadius, imagePathFor } from "./backgroundEffects";
-import { supportsBackgroundProcessors } from "./backgroundProcessing";
-import { platform } from "../Platform";
-
-/**
- * Whether background effects can hold their frame rate on this device, asked
- * without a call in the way.
- *
- * The camera and the pipeline only: no SFU, no encoder, no second participant.
- * If a device cannot hold a frame rate here it cannot hold one in a call
- * either, so this is the cheap half of the question — and it is the half that
- * has never been asked. The gate that keeps effects off phones was added from
- * reports, not measurements, and nothing in the app will run the pipeline
- * there, so there has been nothing to measure.
- *
- * Deliberately ignores that gate: measuring what it forbids is the point. It
- * reports what the gate would have said, and runs anyway.
- *
- * Exploration only, and never ported: an unlisted route, its text not
- * translated, its numbers meant for whoever is holding the phone.
- */
-
-type Effect = "none" | "blur" | "image";
-
-interface Bucket {
-  /** Seconds since the first frame. */
-  at: number;
-  fps: number;
-}
-
-interface Run {
-  effect: Effect;
-  device: string;
-  platform: string;
-  /** Whether the browser has the API that avoids the canvas fallback. */
-  modernApi: boolean;
-  /** What the app's own verdict would have said about this device. */
-  appWouldAllow: boolean;
-  sdkWouldAllow: boolean;
-  capture: { width?: number; height?: number; frameRate?: number };
-  processed: { width?: number; height?: number; frameRate?: number };
-  /** Milliseconds from asking for the effect until the pipeline reports ready. */
-  startupMs: number | null;
-  /**
-   * Where that time went: attaching builds the segmenter — fetching its
-   * assets, compiling the WASM, setting up the GPU — while switching only
-   * tells an already-built one what to draw. Split, because the two have
-   * different answers: one can be paid ahead of time, the other cannot.
-   */
-  attachMs: number | null;
-  switchMs: number | null;
-  /**
-   * The segmenter's own assets, as the browser saw them. A transfer size of
-   * zero means the bytes came from cache and no network was involved, which is
-   * what separates "the first time on this device" from "every time".
-   */
-  assets: {
-    name: string;
-    transferredBytes: number;
-    bytes: number;
-    ms: number;
-  }[];
-  meanFps: number;
-  /** The worst five-second stretch — where throttling shows up first. */
-  worstFps: number;
-  buckets: Bucket[];
-  /** Worst observed delay on a 100ms timer: the main thread's own stutter. */
-  worstTimerLagMs: number;
-  /** The longest the picture simply stopped, in milliseconds. */
-  worstFrameGapMs: number;
-  /** From asking for the run to the first frame on screen. */
-  firstFrameMs: number | null;
-  frames: number;
-  seconds: number;
-}
-
-const bucketSeconds = 5;
-
-function optionsFor(effect: Effect): SwitchBackgroundProcessorOptions {
-  switch (effect) {
-    case "blur":
-      return { mode: "background-blur", blurRadius };
-    case "image": {
-      const imagePath = imagePathFor("indoor");
-      return imagePath
-        ? { mode: "virtual-background", imagePath }
-        : { mode: "disabled" };
-    }
-    default:
-      return { mode: "disabled" };
-  }
-}
-
-export const BackgroundEffectsBench: FC = () => {
-  const video = useRef<HTMLVideoElement | null>(null);
-  const [seconds, setSeconds] = useState(60);
-  const [busy, setBusy] = useState(false);
-  const [status, setStatus] = useState("Ready.");
-  const [runs, setRuns] = useState<Run[]>([]);
-
-  const measure = useCallback(
-    async (effect: Effect): Promise<void> => {
-      setBusy(true);
-      setStatus(`Starting the camera for "${effect}"…`);
-      let track: LocalVideoTrack | undefined;
-      try {
-        // The resolution and frame rate a real call captures at, so the cost
-        // measured here is the cost a call would pay.
-        track = await createLocalVideoTrack({
-          resolution: VideoPresets.h720.resolution,
-        });
-        const capture = track.mediaStreamTrack.getSettings();
-
-        let startupMs: number | null = null;
-        let attachMs: number | null = null;
-        let switchMs: number | null = null;
-        if (effect !== "none") {
-          setStatus("Starting the pipeline…");
-          const askedAt = performance.now();
-          const pipeline = new BackgroundProcessorWrapper(
-            new BackgroundEffectTransformer({ backgroundDisabled: true }),
-            "background-effect-bench",
-          );
-          await track.setProcessor(pipeline);
-          const attachedAt = performance.now();
-          await pipeline.switchTo(optionsFor(effect));
-          const readyAt = performance.now();
-          attachMs = Math.round(attachedAt - askedAt);
-          switchMs = Math.round(readyAt - attachedAt);
-          startupMs = Math.round(readyAt - askedAt);
-        }
-
-        const element = video.current!;
-        track.attach(element);
-        await element.play().catch(() => undefined);
-
-        setStatus(`Measuring "${effect}" for ${seconds}s…`);
-        const result = await countFrames(element, seconds, (done) =>
-          setStatus(`Measuring "${effect}": ${done}s of ${seconds}s`),
-        );
-
-        const processed = track.mediaStreamTrack.getSettings();
-        setRuns((previous) => [
-          ...previous,
-          {
-            effect,
-            device: navigator.userAgent,
-            platform,
-            modernApi: supportsModernBackgroundProcessors(),
-            appWouldAllow: supportsBackgroundProcessors(),
-            sdkWouldAllow: supportsBackgroundProcessorsLivekitSdk(),
-            capture: {
-              width: capture.width,
-              height: capture.height,
-              frameRate: capture.frameRate,
-            },
-            processed: {
-              width: processed.width,
-              height: processed.height,
-              frameRate: processed.frameRate,
-            },
-            startupMs,
-            attachMs,
-            switchMs,
-            assets: segmenterAssets(),
-            ...result,
-          },
-        ]);
-        setStatus(`Done: ${effect}.`);
-      } catch (e) {
-        logger.error("Background effects bench failed", e);
-        setStatus(`Failed: ${e instanceof Error ? e.message : String(e)}`);
-      } finally {
-        track?.stop();
-        setBusy(false);
-      }
-    },
-    [seconds],
-  );
-
-  return (
-    <div style={{ padding: 16, font: "14px system-ui", lineHeight: 1.5 }}>
-      <h1 style={{ fontSize: 20 }}>Background effects: can this device?</h1>
-      <p>
-        The camera and the pipeline, with no call in the way. Run{" "}
-        <strong>No effect</strong> first — every other number is only meaningful
-        beside it, on this device, in this light.
-      </p>
-      <p>
-        This device: <code>{platform}</code>, the app would{" "}
-        <strong>{supportsBackgroundProcessors() ? "allow" : "refuse"}</strong>{" "}
-        effects here, the browser has{" "}
-        <strong>
-          {supportsModernBackgroundProcessors()
-            ? "the fast path"
-            : "only the canvas fallback"}
-        </strong>
-        .
-      </p>
-      <label>
-        Seconds per run:{" "}
-        <select
-          value={seconds}
-          onChange={(e) => setSeconds(Number(e.target.value))}
-          disabled={busy}
-        >
-          <option value={30}>30</option>
-          <option value={60}>60</option>
-          <option value={300}>300 (five minutes, for throttling)</option>
-          <option value={600}>600 (ten minutes)</option>
-        </select>
-      </label>
-      <div style={{ display: "flex", gap: 8, margin: "12px 0" }}>
-        {(["none", "blur", "image"] as const).map((effect) => (
-          <button
-            key={effect}
-            disabled={busy}
-            onClick={() => void measure(effect)}
-            style={{ padding: "8px 12px" }}
-          >
-            {effect === "none" ? "No effect" : effect}
-          </button>
-        ))}
-      </div>
-      <p>
-        <strong>{status}</strong>
-      </p>
-      <video
-        ref={video}
-        muted
-        playsInline
-        style={{ inlineSize: "100%", maxInlineSize: 320, background: "#000" }}
-      />
-      {runs.map((run, i) => (
-        <div key={i} style={{ marginBlockStart: 12 }}>
-          <strong>{run.effect}</strong>: mean {run.meanFps.toFixed(1)}fps, worst{" "}
-          {run.worstFps.toFixed(1)}fps
-          {run.startupMs !== null && (
-            <>
-              , ready in {run.startupMs}ms ({run.attachMs}ms attaching,{" "}
-              {run.switchMs}ms switching)
-            </>
-          )}
-          , first frame at {run.firstFrameMs ?? "?"}ms, picture stopped for up
-          to {run.worstFrameGapMs}ms, main thread stalled up to{" "}
-          {run.worstTimerLagMs}ms
-        </div>
-      ))}
-      {runs.length > 0 && (
-        <textarea
-          readOnly
-          value={JSON.stringify(runs, null, 2)}
-          style={{ inlineSize: "100%", blockSize: 240, marginBlockStart: 12 }}
-        />
-      )}
-    </div>
-  );
-};
-
-/**
- * What the browser did to fetch the segmenter: bytes over the wire, bytes
- * total, and how long each took. Same-origin, so the sizes are not hidden.
- */
-function segmenterAssets(): Run["assets"] {
-  return performance
-    .getEntriesByType("resource")
-    .filter((e): e is PerformanceResourceTiming =>
-      /\.(wasm|tflite|task|binarypb)(\?|$)/.test(e.name),
-    )
-    .map((e) => ({
-      name: e.name.slice(e.name.lastIndexOf("/") + 1),
-      transferredBytes: e.transferSize,
-      bytes: e.encodedBodySize,
-      ms: Math.round(e.duration),
-    }));
-}
-
-/**
- * Counts frames as the video actually presents them, which is the rate the
- * pipeline is really delivering rather than the rate it was asked for.
- */
-async function countFrames(
-  element: HTMLVideoElement,
-  seconds: number,
-  onProgress: (done: number) => void,
-): Promise<
-  Pick<
-    Run,
-    | "meanFps"
-    | "worstFps"
-    | "buckets"
-    | "worstTimerLagMs"
-    | "worstFrameGapMs"
-    | "firstFrameMs"
-    | "frames"
-    | "seconds"
-  >
-> {
-  return new Promise((resolve) => {
-    const buckets: Bucket[] = [];
-    const startedAt = performance.now();
-    let frames = 0;
-    let inBucket = 0;
-    let firstFrameMs: number | null = null;
-    let lastFrameAt = startedAt;
-    let worstFrameGapMs = 0;
-
-    // A phone that is struggling stalls its main thread, and a timer is the
-    // cheapest witness to that: Safari has no long-task observer.
-    let worstTimerLagMs = 0;
-    let lastTick = performance.now();
-    const ticker = window.setInterval(() => {
-      const now = performance.now();
-      worstTimerLagMs = Math.max(
-        worstTimerLagMs,
-        Math.round(now - lastTick - 100),
-      );
-      lastTick = now;
-    }, 100);
-
-    // On the clock, not on the frames. Closing a bucket only when a frame
-    // arrives cannot report a stretch with no frames in it at all — the first
-    // measurement on a phone spent fourteen seconds inside one bucket and
-    // reported it as a seventh of a frame per second rather than as a freeze.
-    const bucketer = window.setInterval(() => {
-      const at = Math.round((performance.now() - startedAt) / 1000);
-      buckets.push({ at, fps: inBucket / bucketSeconds });
-      inBucket = 0;
-      onProgress(at);
-    }, bucketSeconds * 1000);
-
-    const finish = (): void => {
-      window.clearInterval(ticker);
-      window.clearInterval(bucketer);
-      const elapsed = (performance.now() - startedAt) / 1000;
-      resolve({
-        meanFps: elapsed > 0 ? frames / elapsed : 0,
-        worstFps: buckets.length ? Math.min(...buckets.map((b) => b.fps)) : 0,
-        buckets,
-        worstTimerLagMs,
-        worstFrameGapMs: Math.round(worstFrameGapMs),
-        firstFrameMs: firstFrameMs === null ? null : Math.round(firstFrameMs),
-        frames,
-        seconds: Math.round(elapsed),
-      });
-    };
-
-    const onFrame = (): void => {
-      const now = performance.now();
-      firstFrameMs ??= now - startedAt;
-      worstFrameGapMs = Math.max(worstFrameGapMs, now - lastFrameAt);
-      lastFrameAt = now;
-      frames += 1;
-      inBucket += 1;
-      if (now - startedAt >= seconds * 1000) return finish();
-      element.requestVideoFrameCallback(onFrame);
-    };
-
-    if (!("requestVideoFrameCallback" in element)) {
-      window.clearInterval(ticker);
-      window.clearInterval(bucketer);
-      resolve({
-        meanFps: 0,
-        worstFps: 0,
-        buckets: [],
-        worstTimerLagMs: 0,
-        worstFrameGapMs: 0,
-        firstFrameMs: null,
-        frames: 0,
-        seconds: 0,
-      });
-      return;
-    }
-    element.requestVideoFrameCallback(onFrame);
-    // A freeze can outlast the run: without this, a device that never presents
-    // another frame never finishes and reports nothing at all.
-    window.setTimeout(finish, seconds * 1000 + 2000);
-  });
-}

src/livekit/BlurBackgroundTransformer.ts

@@ -43,40 +43,13 @@ const wasmFileset: WasmFileset = {
 };
 
 /**
- * Track processor that applies background effects — blur, or a replacement
- * image — to a user's camera.
+ * Track processor that applies effects such as blurring to a user's background.
  *
  * This is just like LiveKit's prebuilt BackgroundTransformer except that it
  * loads the segmentation models from our own bundle rather than as an external
- * resource fetched from the public internet. The library's own `assetPaths`
- * option cannot do this: it takes a directory and resolves the WASM through
- * MediaPipe's FilesetResolver, which picks its own variants, whereas we want
- * only the SIMD ones.
+ * resource fetched from the public internet.
  */
-export class BackgroundEffectTransformer extends BackgroundTransformer {
-  /**
-   * Called once, when a frame has actually come out of the pipeline.
-   *
-   * The promises say nothing useful about when that happens. Measured on four
-   * devices, attaching resolves in about three seconds and switching in none
-   * at all, and then a browser on the slow path spends another twelve to
-   * fifteen seconds before the first frame appears. Only the frame itself
-   * marks the end of the wait.
-   */
-  public onFirstFrame: (() => void) | undefined;
-  private produced = false;
-
-  public override async transform(
-    frame: VideoFrame,
-    controller: TransformStreamDefaultController<VideoFrame>,
-  ): Promise<void> {
-    await super.transform(frame, controller);
-    if (!this.produced) {
-      this.produced = true;
-      this.onFirstFrame?.();
-    }
-  }
-
+export class BlurBackgroundTransformer extends BackgroundTransformer {
   public async init({
     outputCanvas,
     inputElement: inputVideo,
@@ -100,16 +73,8 @@ export class BackgroundEffectTransformer extends BackgroundTransformer {
       outputConfidenceMasks: false,
     });
 
-    // BackgroundTransformer applies these at the end of its own init. Because
-    // we replace init wholesale rather than extending it, we have to repeat
-    // them, or an effect that was already selected when the pipeline starts is
-    // silently ignored.
-    if (this.options.imagePath) {
-      await this.loadAndSetBackground(this.options.imagePath);
-    }
-    if (typeof this.options.blurRadius === "number") {
+    if (this.options.blurRadius) {
       this.gl?.setBlurRadius(this.options.blurRadius);
     }
-    this.gl?.setBackgroundDisabled(this.options.backgroundDisabled ?? false);
   }
 }

src/livekit/TrackProcessorContext.tsx

@@ -6,122 +6,41 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  BackgroundProcessorWrapper,
-  type ProcessorWrapper,
+  ProcessorWrapper,
+  supportsBackgroundProcessors as supportsBackgroundProcessorsLivekitSdk,
   type BackgroundOptions,
-  type SwitchBackgroundProcessorOptions,
 } from "@livekit/track-processors";
 import {
   createContext,
   type FC,
   type JSX,
   use,
-  useCallback,
   useEffect,
   useMemo,
-  useRef,
-  useState,
 } from "react";
 import { type LocalVideoTrack } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { BehaviorSubject, combineLatest, map, type Observable } from "rxjs";
-import { useObservable, useObservableEagerState } from "observable-hooks";
+import { combineLatest } from "rxjs";
 
 import {
-  backgroundEffect as backgroundEffectSetting,
+  backgroundBlur as backgroundBlurSettings,
   useSetting,
 } from "../settings/settings";
-import { BackgroundEffectTransformer } from "./BackgroundEffectTransformer";
-import {
-  blurRadius,
-  imagePathFor,
-  parseEffect,
-  type BackgroundEffect,
-} from "./backgroundEffects";
-import { BackgroundImageStore } from "./backgroundImages";
-import { supportsBackgroundProcessors } from "./backgroundProcessing";
+import { BlurBackgroundTransformer } from "./BlurBackgroundTransformer";
 import { type Behavior } from "../state/Behavior";
 import { type ObservableScope } from "../state/ObservableScope";
+import { platform } from "../Platform";
+import { useValueBehavior } from "../useValueBehavior";
 
 //TODO-MULTI-SFU: This is not yet fully there.
 // it is a combination of exposing observable and react hooks.
 // preferably we should not make this a context anymore and instead just a vm?
 
-/** A background the user added, as the view needs it: an id and a picture. */
-export interface AddedBackgroundImage {
-  id: string;
-  /** Lives as long as the provider does. */
-  url: string;
-}
-
-/**
- * What the publishing side needs: whether effects can run at all, and the
- * pipeline to attach. Deliberately not the backgrounds a user has added — the
- * publisher has no use for those, and every test that stands in for this would
- * have to carry them.
- */
 export type ProcessorState = {
   supported: boolean | undefined;
   processor: undefined | ProcessorWrapper<BackgroundOptions>;
 };
 
-/** What the camera menu needs: the backgrounds this device keeps. */
-export interface AddedBackgrounds {
-  /** Oldest first. */
-  added: AddedBackgroundImage[];
-  /**
-   * Keeps a file as a background. Rejects with `UnusableImage` for a file that
-   * cannot be used, and `RangeError` once the device keeps as many as it will.
-   */
-  addBackground: (file: Blob) => Promise<string>;
-  removeBackground: (id: string) => Promise<void>;
-}
-
-/** What the camera menu needs to know about the pipeline itself. */
-export interface BackgroundProcessing {
-  /**
-   * Whether the pipeline is still being built. Only ever true once a session,
-   * and only the first time an effect is chosen: building it fetches, compiles
-   * and sets up the segmenter, which on some browsers holds the page still for
-   * long enough that saying nothing looks like a crash.
-   */
-  settling: boolean;
-  /**
-   * The camera track the pipeline is synced to: the pre-join preview's before
-   * joining, the published one after, and none while the camera is off. It
-   * draws with whatever effect is in force, and plainly when none has ever
-   * been chosen, so the menu can show someone how they look without building
-   * anything of its own.
-   */
-  cameraTrack: LocalVideoTrack | null;
-}
-
-const BackgroundProcessingContext = createContext<
-  BackgroundProcessing | undefined
->(undefined);
-
-export function useBackgroundProcessing(): BackgroundProcessing {
-  const value = use(BackgroundProcessingContext);
-  if (value === undefined)
-    throw new Error(
-      "useBackgroundProcessing must be used within a ProcessorProvider",
-    );
-  return value;
-}
-
-const AddedBackgroundsContext = createContext<AddedBackgrounds | undefined>(
-  undefined,
-);
-
-export function useAddedBackgrounds(): AddedBackgrounds {
-  const value = use(AddedBackgroundsContext);
-  if (value === undefined)
-    throw new Error(
-      "useAddedBackgrounds must be used within a ProcessorProvider",
-    );
-  return value;
-}
-
 const ProcessorContext = createContext<ProcessorState | undefined>(undefined);
 
 export function useTrackProcessor(): ProcessorState {
@@ -133,18 +52,8 @@ export function useTrackProcessor(): ProcessorState {
   return state;
 }
 
-export function useTrackProcessorObservable$(): Observable<ProcessorState> {
-  const state = use(ProcessorContext);
-  if (state === undefined)
-    throw new Error(
-      "useTrackProcessor must be used within a ProcessorProvider",
-    );
-  const state$ = useObservable(
-    (init$) => init$.pipe(map(([init]) => init)),
-    [state],
-  );
-
-  return state$;
+export function useTrackProcessorState$(): Behavior<ProcessorState> {
+  return useValueBehavior(useTrackProcessor());
 }
 
 /**
@@ -178,27 +87,6 @@ export function applyProcessor(
 /**
  * Updates your video tracks to always use the given processor.
  */
-/**
- * The camera track the pipeline was last synced to.
- *
- * Module state rather than context, because one of the two paths that sync a
- * track is not React at all: in a call the publisher does it, from an
- * observable. There is one camera and one pipeline for the app's lifetime, so
- * there is one track to know about; each path reports its own, and clears it
- * only if it is still the one reported, so a lobby leaving cannot blank a call
- * that has just started.
- */
-const syncedCameraTrack$ = new BehaviorSubject<LocalVideoTrack | null>(null);
-
-function reportCameraTrack(track: LocalVideoTrack | null): void {
-  if (syncedCameraTrack$.value !== track) syncedCameraTrack$.next(track);
-}
-
-function withdrawCameraTrack(track: LocalVideoTrack | null): void {
-  if (track !== null && syncedCameraTrack$.value === track)
-    syncedCameraTrack$.next(null);
-}
-
 export const trackProcessorSync = (
   scope: ObservableScope,
   videoTrack$: Behavior<LocalVideoTrack | null>,
@@ -211,15 +99,6 @@ export const trackProcessorSync = (
       if (!videoTrack) return;
       applyProcessor(videoTrack, processorState.processor);
     });
-  let reported: LocalVideoTrack | null = null;
-  videoTrack$.pipe(scope.bind()).subscribe({
-    next: (videoTrack) => {
-      withdrawCameraTrack(reported);
-      reported = videoTrack;
-      reportCameraTrack(videoTrack);
-    },
-    complete: () => withdrawCameraTrack(reported),
-  });
 };
 
 export const useTrackProcessorSync = (
@@ -230,167 +109,37 @@ export const useTrackProcessorSync = (
     if (!videoTrack) return;
     applyProcessor(videoTrack, processor);
   }, [processor, videoTrack]);
-  useEffect(() => {
-    reportCameraTrack(videoTrack);
-    return (): void => withdrawCameraTrack(videoTrack);
-  }, [videoTrack]);
 };
 
 interface Props {
   children: JSX.Element;
 }
 
-/** Translates a chosen effect into the pipeline's own vocabulary. */
-function switchOptionsFor(
-  effect: BackgroundEffect,
-  added: AddedBackgroundImage[],
-): SwitchBackgroundProcessorOptions {
-  const withImage = (
-    imagePath: string | undefined,
-  ): SwitchBackgroundProcessorOptions =>
-    // A background the device no longer has — removed, or storage cleared —
-    // leaves the user with no effect rather than a pipeline drawing nothing.
-    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(added.find((a) => a.id === effect.id)?.url);
-    default:
-      return { mode: "disabled" };
-  }
+function supportsBackgroundProcessors(): boolean {
+  return supportsBackgroundProcessorsLivekitSdk() && platform === "desktop";
 }
 
 export const ProcessorProvider: FC<Props> = ({ children }) => {
-  const [effectRaw] = useSetting(backgroundEffectSetting);
+  // The setting the user wants to have
+  const [blurActivated] = useSetting(backgroundBlurSettings);
   const supported = useMemo(() => supportsBackgroundProcessors(), []);
-
-  // One pipeline for the lifetime of the app, so the pre-join preview and the
-  // call share it and its priming frame is spent before anything is published
-  // (D4).
-  const transformer = useMemo(
-    () => new BackgroundEffectTransformer({ backgroundDisabled: true }),
+  const blur = useMemo(
+    () =>
+      new ProcessorWrapper(
+        new BlurBackgroundTransformer({ blurRadius: 15 }),
+        "background-blur",
+      ),
     [],
   );
-  const pipeline = useMemo(
-    () => new BackgroundProcessorWrapper(transformer, "background-effect"),
-    [transformer],
-  );
-
-  // The backgrounds this device keeps. Their URLs live as long as the provider
-  // does, and are replaced wholesale whenever the set changes: an object URL
-  // outlives the blob it names unless it is revoked, and the alternative is
-  // tracking one lifetime per image.
-  const store = useMemo(() => new BackgroundImageStore(), []);
-  const [added, setAdded] = useState<AddedBackgroundImage[]>([]);
-  const urls = useRef<string[]>([]);
-
-  const reread = useCallback(async (): Promise<void> => {
-    const kept = await store.list();
-    urls.current.forEach((url) => URL.revokeObjectURL(url));
-    urls.current = kept.map((background) =>
-      URL.createObjectURL(background.image),
-    );
-    setAdded(kept.map(({ id }, i) => ({ id, url: urls.current[i] })));
-  }, [store]);
-
-  useEffect(() => {
-    reread().catch((e) => logger.warn("Could not read added backgrounds", e));
-    const opened = urls;
-    return (): void => {
-      opened.current.forEach((url) => URL.revokeObjectURL(url));
-      opened.current = [];
-    };
-  }, [reread]);
-
-  const addBackground = useCallback(
-    async (file: Blob): Promise<string> => {
-      const kept = await store.add(file);
-      await reread();
-      return kept.id;
-    },
-    [store, reread],
-  );
-
-  const removeBackground = useCallback(
-    async (id: string): Promise<void> => {
-      await store.remove(id);
-      await reread();
-    },
-    [store, reread],
-  );
-
-  // D5: nothing is attached until an effect is first chosen, so a user who
-  // never chooses one pays neither the segmentation assets nor the time to
-  // initialise them. Once attached it stays attached, including at no effect,
-  // so a later change is a switch rather than a fresh attachment and spends no
-  // further priming frame.
-  const [attached, setAttached] = useState(
-    () => parseEffect(effectRaw).kind !== "none",
-  );
-  useEffect(() => {
-    if (parseEffect(effectRaw).kind !== "none") setAttached(true);
-  }, [effectRaw]);
-
-  // D2: switch the running pipeline in place rather than tearing it down, so
-  // the previous effect stays in force until the new one is live.
-  const options = useMemo(
-    () => switchOptionsFor(parseEffect(effectRaw), added),
-    [effectRaw, added],
-  );
-  useEffect(() => {
-    if (!supported || !attached) return;
-    pipeline
-      .switchTo(options)
-      .catch((e) => logger.warn("Failed to switch background effect", e));
-  }, [pipeline, supported, attached, options]);
-
-  // The wait runs from deciding to attach until a frame actually comes out,
-  // which is the only thing that marks the end of it: the promises resolve
-  // while the segmenter is still being built, and on the slow path the page
-  // then holds still for another twelve to fifteen seconds. Bounded by the
-  // frame rather than by a timer, so it cannot end early and claim to be ready.
-  const [producedAFrame, setProducedAFrame] = useState(false);
-  useEffect(() => {
-    transformer.onFirstFrame = (): void => setProducedAFrame(true);
-    return (): void => {
-      transformer.onFirstFrame = undefined;
-    };
-  }, [transformer]);
-  const settling = supported === true && attached && !producedAFrame;
 
   // This is the actual state exposed through the context
   const processorState = useMemo(
     () => ({
       supported,
-      processor: supported && attached ? pipeline : undefined,
+      processor: supported && blurActivated ? blur : undefined,
     }),
-    [supported, attached, pipeline],
+    [supported, blurActivated, blur],
   );
 
-  const addedBackgrounds = useMemo(
-    () => ({ added, addBackground, removeBackground }),
-    [added, addBackground, removeBackground],
-  );
-
-  const cameraTrack = useObservableEagerState(syncedCameraTrack$);
-  const backgroundProcessing = useMemo(
-    () => ({ settling, cameraTrack }),
-    [settling, cameraTrack],
-  );
-
-  return (
-    <ProcessorContext value={processorState}>
-      <AddedBackgroundsContext value={addedBackgrounds}>
-        <BackgroundProcessingContext value={backgroundProcessing}>
-          {children}
-        </BackgroundProcessingContext>
-      </AddedBackgroundsContext>
-    </ProcessorContext>
-  );
+  return <ProcessorContext value={processorState}>{children}</ProcessorContext>;
 };

src/livekit/backgroundEffects.test.ts

@@ -1,92 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { maxAddedBackgrounds } from "./backgroundImages";
-import { describe, expect, test } from "vitest";
-
-import {
-  parseEffect,
-  serializeEffect,
-  shippedBackgrounds,
-  imagePathFor,
-} from "./backgroundEffects";
-
-describe("the chosen background effect", () => {
-  test("round-trips through its stored form", () => {
-    for (const effect of [
-      { kind: "none" } as const,
-      { kind: "blur" } as const,
-      { kind: "shipped", id: shippedBackgrounds[0].id } as const,
-      { kind: "added", id: "a-uuid" } as const,
-    ])
-      expect(parseEffect(serializeEffect(effect))).toEqual(effect);
-  });
-
-  test("falls back to no effect when the stored form names nothing we ship", () => {
-    // A background removed between releases, or a value from a future one.
-    expect(parseEffect("image:a-background-we-no-longer-ship")).toEqual({
-      kind: "none",
-    });
-    expect(parseEffect("")).toEqual({ kind: "none" });
-  });
-
-  // The regression this guards is not hypothetical: the first stand-ins were
-  // the app's own overlay gradients, which have no opaque pixel in them at all,
-  // so as backgrounds their dark half was simply missing.
-  test("ships only opaque backgrounds", async () => {
-    const { readFile } = await import("node:fs/promises");
-    for (const background of shippedBackgrounds) {
-      const name = background.imagePath.split("/").pop()!.split("?")[0];
-      const bytes = await readFile(`src/graphics/${name}`);
-      // JPEG, which has no alpha channel to carry a hole in.
-      expect([bytes[0], bytes[1], bytes[2]]).toEqual([0xff, 0xd8, 0xff]);
-    }
-  });
-
-  // Three to a row, and the add tile goes at the limit. At four of their own
-  // the grid stopped at eight and left its last corner empty; the rule is that
-  // it is whole both at the limit and one short of it, with the add tile.
-  test("fills the grid at the limit and one short of it", () => {
-    const fixed = 2 + shippedBackgrounds.length; // no effect, blur, shipped
-    expect((fixed + maxAddedBackgrounds) % 3).toBe(0);
-    expect((fixed + maxAddedBackgrounds - 1 + 1) % 3).toBe(0);
-  });
-
-  test("gives every shipped background an image to draw", () => {
-    for (const background of shippedBackgrounds)
-      expect(imagePathFor(background.id)).toBeTruthy();
-  });
-});
-
-describe("the blur control in settings", () => {
-  // The control is a checkbox over a setting that holds more than two states,
-  // so what it shows and what it writes are both derived. This is that
-  // derivation, which is what keeps it from disagreeing with the camera menu.
-  const shows = (stored: string): boolean =>
-    parseEffect(stored).kind === "blur";
-  const writes = (on: boolean): string =>
-    serializeEffect(on ? { kind: "blur" } : { kind: "none" });
-
-  test("reads as off while an image background is in force", () => {
-    expect(shows(serializeEffect({ kind: "shipped", id: "indoor" }))).toBe(
-      false,
-    );
-    expect(shows(serializeEffect({ kind: "added", id: "a-uuid" }))).toBe(false);
-  });
-
-  test("reads as on while blur is in force", () => {
-    expect(shows("blur")).toBe(true);
-  });
-
-  test("replaces an image background when it is turned on", () => {
-    expect(writes(true)).toBe("blur");
-  });
-
-  test("leaves no effect behind when it is turned off", () => {
-    expect(writes(false)).toBe("none");
-  });
-});

src/livekit/backgroundEffects.ts

@@ -1,82 +0,0 @@
-/*
-Copyright 2024-2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import indoorStandIn from "../graphics/background-indoor-standin.jpg?url";
-import outdoorStandIn from "../graphics/background-outdoor-standin.jpg?url";
-
-/** How much to blur, when the chosen effect is blur. */
-export const blurRadius = 15;
-
-export interface ShippedBackground {
-  id: string;
-  imagePath: string;
-}
-
-// EXPLORATION SHORTCUT (S1): the two shipped backgrounds, one indoor and one
-// outdoor, do not exist yet. These stand-ins are the app's own gradients, laid
-// on the canvas colour they are painted over and kept as JPEG.
-//
-// Not a detail: those gradients are overlay scrims, and measured, not one
-// pixel in either is opaque — where they look dark they are transparent. Used
-// directly as a background their dark half was simply absent, which is what
-// showed on the slow path. Flattening them is what makes them a picture rather
-// than a veil, and JPEG cannot carry transparency at all, so it cannot come
-// back. Never port this.
-export const shippedBackgrounds: ShippedBackground[] = [
-  { id: "indoor", imagePath: indoorStandIn },
-  { id: "outdoor", imagePath: outdoorStandIn },
-];
-
-export type BackgroundEffect =
-  | { kind: "none" }
-  | { kind: "blur" }
-  /** One of the images that come with the application. */
-  | { kind: "shipped"; id: string }
-  /** One the user added, kept on this device. */
-  | { kind: "added"; id: string };
-
-export const noEffect: BackgroundEffect = { kind: "none" };
-
-/**
- * Parses the stored form of a chosen effect, falling back to no effect.
- *
- * A shipped background is checked against what we ship, so a stored one that a
- * later release no longer carries falls back rather than leaving the user with
- * an effect that cannot be drawn. An added one cannot be checked here — only
- * the device knows what it keeps — so that check belongs where it is resolved.
- */
-export function parseEffect(raw: string): BackgroundEffect {
-  if (raw === "blur") return { kind: "blur" };
-  if (raw.startsWith("image:")) {
-    const id = raw.slice("image:".length);
-    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;
-}
-
-/** The stored form of a chosen effect. */
-export function serializeEffect(effect: BackgroundEffect): string {
-  switch (effect.kind) {
-    case "blur":
-      return "blur";
-    case "shipped":
-      return `image:${effect.id}`;
-    case "added":
-      return `added:${effect.id}`;
-    default:
-      return "none";
-  }
-}
-
-export function imagePathFor(id: string): string | undefined {
-  return shippedBackgrounds.find((b) => b.id === id)?.imagePath;
-}

src/livekit/backgroundImages.ts

@@ -1,187 +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 { logger } from "matrix-js-sdk/lib/logger";
-
-/**
- * The most backgrounds of their own a device keeps.
- *
- * Five, because it fills the grid. With no effect, blur and the two shipped
- * images that makes nine tiles at the limit, where the add tile goes; and one
- * short of it, four and the add tile make nine too. At four the grid stopped
- * at eight and left its last corner empty.
- */
-export const maxAddedBackgrounds = 5;
-
-/**
- * The longest edge an added background is kept at.
- *
- * Not a display constraint: the pipeline crops and scales the image to the
- * camera on every use, so a larger one buys nothing. It is what stops a
- * forty-megapixel photograph sitting in storage and being decoded on every
- * call.
- */
-export const maxStoredEdge = 1920;
-
-/** A background the user added, as it is kept on the device. */
-export interface AddedBackground {
-  id: string;
-  image: Blob;
-  addedAt: number;
-}
-
-/** Why a file cannot 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";
-  }
-}
-
-/**
- * Whether the file holds more than one frame.
- *
- * Read from the file rather than guessed from its type: an animated WebP and a
- * still one are both `image/webp`, and a `.png` may be an APNG. Where the
- * browser cannot tell us, the types that are usually animated are refused
- * rather than accepted and left to move behind someone's head.
- */
-async function isAnimated(file: Blob): Promise<boolean> {
-  const decoder = (
-    globalThis as { ImageDecoder?: new (init: unknown) => unknown }
-  ).ImageDecoder;
-  if (!decoder) return /gif|apng/.test(file.type);
-  try {
-    const d = new decoder({ data: await file.arrayBuffer(), type: file.type });
-    await (d as { completed: Promise<void> }).completed;
-    const track = (d as { tracks: { selectedTrack?: { frameCount: number } } })
-      .tracks.selectedTrack;
-    return (track?.frameCount ?? 1) > 1;
-  } catch (e) {
-    logger.debug("Could not read frame count, judging by type", e);
-    return /gif|apng/.test(file.type);
-  }
-}
-
-/**
- * Prepares a file to be kept as a background: refuses what cannot be used, and
- * reduces what is larger than we keep.
- *
- * Does not crop. The pipeline covers the camera's frame with whatever it is
- * given, recomputed as the frame changes, so cropping here would bake in one
- * shape and lose the rest of the picture for good.
- */
-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 {
-    // Every picture goes through the canvas, not only the oversized ones: a
-    // background covers what is behind it, so it has to be opaque, and a
-    // picture with transparency in it — a logo, a screenshot with rounded
-    // corners — would otherwise be stored with its holes and drawn with them.
-    // Passing small files straight through is what kept them.
-    const longest = Math.max(bitmap.width, bitmap.height);
-    const scale = Math.min(1, maxStoredEdge / longest);
-    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");
-    // The ground the picture is laid on, so nothing it does not cover is a
-    // hole. Black rather than white: an unfilled corner reads as the frame's
-    // own edge rather than as a lamp.
-    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();
-  }
-}
-
-const DB_NAME = "element-call-background-images";
-const STORE = "backgrounds";
-
-/**
- * The backgrounds a user added, kept on this device.
- *
- * They never leave it: there is no upload here and no identifier that would
- * let anything fetch one.
- */
-export class BackgroundImageStore {
-  private db?: Promise<IDBDatabase>;
-
-  /** The factory is injected so a test can hand over its own. */
-  public constructor(
-    private readonly indexedDB: IDBFactory = globalThis.indexedDB,
-  ) {}
-
-  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<AddedBackground[]> {
-    const all = await this.run<AddedBackground[]>("readonly", (s) =>
-      s.getAll(),
-    );
-    return all.sort((a, b) => a.addedAt - b.addedAt);
-  }
-
-  /**
-   * Keeps a file as a background, and answers with it.
-   *
-   * Throws {@link UnusableImage} for a file that cannot be used, and
-   * {@link RangeError} once the device is already keeping as many as it will.
-   */
-  public async add(file: Blob): Promise<AddedBackground> {
-    const image = await prepareImage(file);
-    if ((await this.list()).length >= maxAddedBackgrounds)
-      throw new RangeError("Already keeping the most backgrounds we keep");
-    const background: AddedBackground = {
-      id: crypto.randomUUID(),
-      image,
-      addedAt: Date.now(),
-    };
-    await this.run("readwrite", (s) => s.add(background));
-    return background;
-  }
-
-  public async remove(id: string): Promise<void> {
-    await this.run("readwrite", (s) => s.delete(id));
-  }
-}

src/livekit/backgroundProcessing.ts

@@ -1,54 +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 {
-  supportsBackgroundProcessors as supportsBackgroundProcessorsLivekitSdk,
-  supportsModernBackgroundProcessors,
-} from "@livekit/track-processors";
-
-/**
- * Whether this device can run background effects at all.
- *
- * The one answer, for everything that asks. The controls and the pipeline used
- * to work it out separately, and differently: the pipeline required a desktop
- * while the controls asked only whether the browser had the APIs. A phone
- * browser has them, so it was offered a choice the pipeline then refused to
- * honour, and the video simply never changed — the worst of both, since it
- * neither worked nor said why.
- *
- * Anything that offers a background effect must ask this, so that what is
- * offered and what can be delivered cannot drift apart again.
- *
- * It no longer asks for a desktop. Measured, that test sorted devices by the
- * wrong thing: a phone on the fast path held 99% of its frame rate and was
- * refused, while a desktop on the slow one held 73% and was allowed. What the
- * cost tracks is the path, which {@link usesFallbackProcessing} names — and a
- * cost is something to tell someone about, not to decide for them, because the
- * user is the only one who knows whether they would rather show the room.
- */
-export function supportsBackgroundProcessors(): boolean {
-  return supportsBackgroundProcessorsLivekitSdk();
-}
-
-/**
- * Whether effects here run the slow way.
- *
- * Browsers without `MediaStreamTrackProcessor` — Safari and Firefox, on every
- * platform — fall back to drawing each frame through a canvas. Measured across
- * four of them, that costs between a sixth and a quarter of the frame rate,
- * phone or desktop, and on Safari it also blocks the page for twelve to
- * fifteen seconds the first time the segmenter is built.
- *
- * Not a reason to withhold the feature: that cost ships today wherever the
- * fallback runs, and it is a cost in smoothness while the feature is about
- * privacy. It is a reason to say so.
- */
-export function usesFallbackProcessing(): boolean {
-  return (
-    supportsBackgroundProcessors() && !supportsModernBackgroundProcessors()
-  );
-}

src/reactions/index.ts

@@ -29,6 +29,8 @@ import waveSoundOgg from "../sound/reactions/wave.ogg?url";
 import waveSoundMp3 from "../sound/reactions/wave.mp3?url";
 import baduntssSoundOgg from "../sound/reactions/baduntss.ogg?url";
 import baduntssSoundMp3 from "../sound/reactions/baduntss.mp3?url";
+import bellSoundOgg from "../sound/reactions/bell.ogg?url";
+import bellSoundMp3 from "../sound/reactions/bell.mp3?url";
 
 export const ElementCallReactionEventType = "io.element.call.reaction";
 
@@ -202,6 +204,15 @@ export const ReactionSet: ReactionOption[] = [
       mp3: baduntssSoundMp3,
     },
   },
+  {
+    emoji: "🛎️",
+    name: "bell",
+    alias: ["ding"],
+    sound: {
+      ogg: bellSoundOgg,
+      mp3: bellSoundMp3,
+    },
+  },
 ];
 
 export interface RaisedHandInfo {

src/room/InCallView.test.tsx

@@ -170,16 +170,14 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   const renderResult = render(
     <BrowserRouter>
       <MediaDevicesContext value={mediaDevices}>
-        <ProcessorProvider>
-          <ReactionsSenderProvider
-            vm={vm}
-            rtcSession={rtcSession.asMockedSession()}
-          >
-            <TooltipProvider>
-              <RoomContext value={livekitRoom}>{content}</RoomContext>
-            </TooltipProvider>
-          </ReactionsSenderProvider>
-        </ProcessorProvider>
+        <ReactionsSenderProvider
+          vm={vm}
+          rtcSession={rtcSession.asMockedSession()}
+        >
+          <TooltipProvider>
+            <RoomContext value={livekitRoom}>{content}</RoomContext>
+          </TooltipProvider>
+        </ReactionsSenderProvider>
       </MediaDevicesContext>
     </BrowserRouter>,
   );

src/room/InCallView.tsx

@@ -20,8 +20,6 @@ import {
 import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
-import { map } from "rxjs";
-import { useObservable } from "observable-hooks";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { useTranslation } from "react-i18next";
 
@@ -77,10 +75,11 @@ import {
   useAppBarSubtitle,
 } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
+import { useValueBehavior } from "../useValueBehavior.ts";
 import { constant } from "../state/Behavior.ts";
 import { Toast } from "../Toast.tsx";
 import overlayStyles from "../Overlay.module.css";
-import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx";
+import { useTrackProcessorState$ } from "../livekit/TrackProcessorContext.tsx";
 import { type Layout } from "../state/layout-types.ts";
 import { ObservableScope } from "../state/ObservableScope.ts";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
@@ -121,7 +120,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const urlParams = useUrlParams();
   const hostBridge = useHostBridge();
   const mediaDevices = useMediaDevices();
-  const trackProcessorState$ = useTrackProcessorObservable$();
+  const trackProcessorState$ = useTrackProcessorState$();
   // The element we have to draw the call in: the page, or the container a host
   // gave us. Its size, not the window's, decides how the call is laid out.
   const rootElement = useRootElement();
@@ -151,7 +150,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
-      scope.behavior(trackProcessorState$),
+      trackProcessorState$,
     );
     // TODO move this somewhere else once we use the callViewModel in the lobby as well!
     vm.join();
@@ -252,7 +251,7 @@ export const InCallView: FC<InCallViewProps> = ({
 
   useWakeLock();
   // TODO-MULTI-SFU This is unused now??
-  // const connectionState = useObservableEagerState(vm.livekitConnectionState$);
+  // const connectionState = useBehavior(vm.livekitConnectionState$);
 
   // annoyingly we don't get the disconnection reason this way,
   // only by listening for the emitted event
@@ -374,10 +373,7 @@ export const InCallView: FC<InCallViewProps> = ({
       edgeToEdge,
     ],
   );
-  const gridBoundsObservable$ = useObservable(
-    (inputs$) => inputs$.pipe(map(([gridBounds]) => gridBounds)),
-    [gridBounds],
-  );
+  const gridBounds$ = useValueBehavior(gridBounds);
 
   useAppBarHidden(!showHeader);
   useAppBarSubtitle(
@@ -538,7 +534,7 @@ export const InCallView: FC<InCallViewProps> = ({
   );
 
   const layouts = useMemo(() => {
-    const inputs = { minBounds$: gridBoundsObservable$ };
+    const inputs = { minBounds$: gridBounds$ };
     return {
       grid: makeGridLayout(inputs),
       "spotlight-landscape": makeSpotlightLandscapeLayout(inputs),
@@ -547,7 +543,7 @@ export const InCallView: FC<InCallViewProps> = ({
       "one-on-one-desktop": makeOneOnOneDesktopLayout(inputs),
       "one-on-one-mobile": makeOneOnOneMobileLayout(inputs),
     };
-  }, [gridBoundsObservable$]);
+  }, [gridBounds$]);
 
   const showFooter = useBehavior(footerVm.showFooter$);
   const renderContent = (): JSX.Element => {

src/room/KnockLobbyView.test.tsx

@@ -27,16 +27,6 @@ vi.mock("../livekit/TrackProcessorContext", () => ({
     processor: undefined,
   }),
   useTrackProcessorSync: (): void => {},
-  useBackgroundProcessing: (): { settling: boolean } => ({ settling: false }),
-  useAddedBackgrounds: (): {
-    added: [];
-    addBackground: () => Promise<void>;
-    removeBackground: () => Promise<void>;
-  } => ({
-    added: [],
-    addBackground: async (): Promise<void> => {},
-    removeBackground: async (): Promise<void> => {},
-  }),
 }));
 
 vi.mock("react-use-measure", () => ({

src/room/LobbyView.test.tsx

@@ -20,7 +20,12 @@ import {
 
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
-import { mockMediaDevices, mockMuteStates } from "../utils/test";
+import {
+  mockMediaDevices,
+  mockMuteStates,
+  restoreAudioCapture,
+  stubAudioCapture,
+} from "../utils/test";
 import { type MediaDevices } from "../state/MediaDevices";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type ProcessorState } from "../livekit/TrackProcessorContext";
@@ -42,16 +47,6 @@ vi.mock("../livekit/TrackProcessorContext", () => ({
     processor: undefined,
   }),
   useTrackProcessorSync: (): void => {},
-  useBackgroundProcessing: (): { settling: boolean } => ({ settling: false }),
-  useAddedBackgrounds: (): {
-    added: [];
-    addBackground: () => Promise<void>;
-    removeBackground: () => Promise<void>;
-  } => ({
-    added: [],
-    addBackground: async (): Promise<void> => {},
-    removeBackground: async (): Promise<void> => {},
-  }),
 }));
 
 vi.mock("react-use-measure", () => ({
@@ -194,51 +189,11 @@ describe("LobbyView", () => {
 });
 
 describe("LobbyView microphone level", () => {
-  const realMediaDevices = Object.getOwnPropertyDescriptor(
-    navigator,
-    "mediaDevices",
-  );
-
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    // Put navigator back, or every later test in the run inherits the stub.
-    if (realMediaDevices === undefined) {
-      Reflect.deleteProperty(navigator, "mediaDevices");
-    } else {
-      Object.defineProperty(navigator, "mediaDevices", realMediaDevices);
-    }
-  });
-
-  /** Just enough of the Web Audio and capture APIs for the meter to run. */
-  function stubAudioCapture(): void {
-    vi.stubGlobal(
-      "AudioContext",
-      class {
-        public readonly state = "running";
-        public createAnalyser(): object {
-          return {
-            fftSize: 1024,
-            getByteTimeDomainData: (): void => {},
-          };
-        }
-        public createMediaStreamSource(): object {
-          return { connect: (): void => {} };
-        }
-        public close(): void {}
-      },
-    );
-    // Only this property: replacing navigator wholesale drops the getters on
-    // its prototype, such as userAgent.
-    Object.defineProperty(navigator, "mediaDevices", {
-      configurable: true,
-      value: {
-        getUserMedia: vi.fn().mockResolvedValue({ getTracks: () => [] }),
-      },
-    });
-  }
+  afterEach(restoreAudioCapture);
 
   it("shows the microphone level meter", async () => {
-    stubAudioCapture();
+    const capture = stubAudioCapture();
+    capture.grant();
     const user = userEvent.setup();
     const { getByRole } = renderLobbyView({}, false, "desktop", {
       requestDeviceNames: (): void => {},
@@ -251,8 +206,7 @@ describe("LobbyView microphone level", () => {
       },
     } as unknown as Partial<MediaDevices>);
 
-    // The meter lives with the microphone picker, which the pre-join screen
-    // reaches through the same chevron as a call in progress.
+    // Pre-join reaches the meter through the same chevron as a call.
     await user.click(getByRole("button", { name: "Microphone" }));
 
     expect(

src/room/LobbyView.tsx

@@ -24,7 +24,6 @@ import {
   type LocalVideoTrack,
   Track,
 } from "livekit-client";
-import { useObservableEagerState } from "observable-hooks";
 
 import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
@@ -125,9 +124,7 @@ export const LobbyView: FC<Props> = ({
   );
 
   const devices = useMediaDevices();
-  const videoInputId = useObservableEagerState(
-    devices.videoInput.selected$,
-  )?.id;
+  const videoInputId = useBehavior(devices.videoInput.selected$)?.id;
 
   // Capture the audio options as they were when we first mounted, because
   // we're not doing anything with the audio anyway so we don't need to

src/settings/DeviceSelection.test.tsx

@@ -0,0 +1,82 @@
+/*
+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 { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Form } from "@vector-im/compound-web";
+import { describe, expect, it, vi } from "vitest";
+
+import { DeviceSelection } from "./DeviceSelection";
+import { constant } from "../state/Behavior";
+import {
+  type AudioOutputDeviceLabel,
+  type DeviceLabel,
+  type MediaDevice,
+  type SelectedDevice,
+} from "../state/MediaDevices";
+
+type Device = MediaDevice<DeviceLabel | AudioOutputDeviceLabel, SelectedDevice>;
+
+function mockDevice(
+  available: [string, DeviceLabel][],
+  selectedId: string | undefined,
+): Device & { select: ReturnType<typeof vi.fn> } {
+  return {
+    available$: constant(new Map(available)),
+    selected$: constant(
+      selectedId === undefined ? undefined : { id: selectedId },
+    ),
+    select: vi.fn(),
+  } as unknown as Device & { select: ReturnType<typeof vi.fn> };
+}
+
+const twoDevices: [string, DeviceLabel][] = [
+  ["a", { type: "name", name: "Mic A" }],
+  ["b", { type: "number", number: 2 }],
+];
+
+describe("DeviceSelection", () => {
+  it("marks the selected device and selects another on click", async () => {
+    const device = mockDevice(twoDevices, "a");
+    render(
+      <Form.Root>
+        <DeviceSelection
+          device={device}
+          title="Microphone"
+          numberedLabel={(n) => `Microphone ${n}`}
+        />
+      </Form.Root>,
+    );
+
+    const first = screen.getByRole<HTMLInputElement>("radio", {
+      name: "Mic A",
+    });
+    const second = screen.getByRole<HTMLInputElement>("radio", {
+      name: "Microphone 2",
+    });
+    expect(first.checked).toBe(true);
+    expect(second.checked).toBe(false);
+
+    await userEvent.click(second);
+    expect(device.select).toHaveBeenCalledWith("b");
+  });
+
+  it("shows nothing when there is no choice to make", () => {
+    const device = mockDevice([twoDevices[0]], "a");
+    render(
+      <Form.Root>
+        <DeviceSelection
+          device={device}
+          title="Microphone"
+          numberedLabel={(n) => `Microphone ${n}`}
+        />
+      </Form.Root>,
+    );
+    expect(screen.queryByRole("radio")).toBeNull();
+    expect(screen.queryByText("Microphone")).toBeNull();
+  });
+});

src/settings/DeviceSelection.tsx

@@ -21,7 +21,6 @@ import {
   Separator,
 } from "@vector-im/compound-web";
 import { Trans, useTranslation } from "react-i18next";
-import { useObservableEagerState } from "observable-hooks";
 
 import {
   type AudioOutputDeviceLabel,
@@ -30,6 +29,7 @@ import {
   type MediaDevice,
 } from "../state/MediaDevices";
 import styles from "./DeviceSelection.module.css";
+import { useBehavior } from "../useBehavior";
 
 interface Props {
   device: MediaDevice<DeviceLabel | AudioOutputDeviceLabel, SelectedDevice>;
@@ -44,8 +44,8 @@ export const DeviceSelection: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const groupId = useId();
-  const available = useObservableEagerState(device.available$);
-  const selectedId = useObservableEagerState(device.selected$)?.id;
+  const available = useBehavior(device.available$);
+  const selectedId = useBehavior(device.selected$)?.id;
   const onChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       device.select(e.target.value);

src/settings/SettingsModal.tsx

@@ -22,14 +22,13 @@ import { useHostBridge } from "../HostBridge";
 import {
   useSetting,
   soundEffectVolume as soundEffectVolumeSetting,
-  backgroundEffect as backgroundEffectSetting,
+  backgroundBlur as backgroundBlurSetting,
   developerMode,
 } from "./settings";
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
 import { DeviceSelection } from "./DeviceSelection";
 import { useTrackProcessor } from "../livekit/TrackProcessorContext";
-import { parseEffect, serializeEffect } from "../livekit/backgroundEffects";
 import {
   DeveloperSettingsTab,
   type DeveloperSettingsSnapshot,
@@ -84,13 +83,7 @@ export const SettingsModal: FC<Props> = ({
   const BlurCheckbox: React.FC = (): ReactNode => {
     const { supported } = useTrackProcessor();
 
-    // The same setting the camera menu's Background effects grid writes, so
-    // the two controls cannot disagree. An image background reads here as blur
-    // off, and turning blur on replaces it.
-    const [effect, setEffect] = useSetting(backgroundEffectSetting);
-    const blurActive = parseEffect(effect).kind === "blur";
-    const setBlurActive = (on: boolean): void =>
-      setEffect(serializeEffect(on ? { kind: "blur" } : { kind: "none" }));
+    const [blurActive, setBlurActive] = useSetting(backgroundBlurSetting);
 
     return (
       <>
@@ -104,7 +97,7 @@ export const SettingsModal: FC<Props> = ({
               supported ? "" : t("settings.blur_not_supported_by_browser")
             }
             type="checkbox"
-            checked={blurActive}
+            checked={!!blurActive}
             onChange={(b): void => setBlurActive(b.target.checked)}
             disabled={!supported}
           />

src/settings/settings.ts

@@ -117,18 +117,6 @@ export const videoInput = new Setting<string | undefined>(
 
 export const backgroundBlur = new Setting<boolean>("background-blur", false);
 
-/**
- * The background effect applied to the local camera: "none", "blur", or
- * "image:<id>". See backgroundEffects.ts for the stored form.
- */
-export const backgroundEffect = new Setting<string>(
-  "background-effect",
-  // Defaults to whatever blur the user had already chosen, so someone who
-  // turned blur on before this existed still has it afterwards. Their own
-  // choice replaces this the moment they make one.
-  backgroundBlur.getValue() ? "blur" : "none",
-);
-
 export const showHandRaisedTimer = new Setting<boolean>(
   "hand-raised-show-timer",
   false,

src/sound/LICENCE.md

@@ -10,6 +10,7 @@ The following sound effects have been licensed from Pixabay, under https://pixab
 - `reactions/generic`
 - `reactions/lightbulb`
 - `reactions/party`
+- `reactions/bell`
 
 ### Other
 

src/soundUtils.test.ts

@@ -0,0 +1,77 @@
+/*
+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 { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { prefetchSounds } from "./soundUtils";
+
+const bytesOf = (buffer: ArrayBuffer): number[] => [...new Uint8Array(buffer)];
+
+describe("prefetchSounds", () => {
+  const fetchSpy = vi.fn<typeof fetch>();
+
+  beforeEach(() => {
+    vi.stubGlobal("fetch", fetchSpy);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    fetchSpy.mockReset();
+  });
+
+  it("fetches sounds given as ordinary URLs", async () => {
+    fetchSpy.mockResolvedValue(
+      new Response(new Uint8Array([1, 2, 3]), { status: 200 }),
+    );
+    const sounds = await prefetchSounds({
+      beep: { ogg: "https://example.org/beep.ogg" },
+    });
+    expect(fetchSpy).toHaveBeenCalledWith("https://example.org/beep.ogg");
+    expect(bytesOf(sounds.beep)).toEqual([1, 2, 3]);
+  });
+
+  it("decodes base64 data: URLs without fetching them", async () => {
+    // "OggS" — the bytes 0x4f 0x67 0x67 0x53
+    const sounds = await prefetchSounds({
+      beep: { ogg: "data:audio/ogg;base64,T2dnUw==" },
+    });
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(bytesOf(sounds.beep)).toEqual([0x4f, 0x67, 0x67, 0x53]);
+  });
+
+  it("leaves out a sound with a percent-encoded data: URL", async () => {
+    const sounds = await prefetchSounds({
+      beep: { ogg: "data:audio/ogg,Ogg%53" },
+    });
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(sounds).toEqual({});
+  });
+
+  it("leaves out a sound whose response is not okay", async () => {
+    fetchSpy.mockResolvedValue(new Response(null, { status: 404 }));
+    const sounds = await prefetchSounds({
+      beep: { ogg: "https://example.org/missing.ogg" },
+    });
+    expect(sounds).toEqual({});
+  });
+
+  it("leaves out a sound that fails to load, keeping the others", async () => {
+    fetchSpy.mockRejectedValue(new TypeError("Failed to fetch"));
+    const sounds = await prefetchSounds({
+      beep: { ogg: "https://example.org/beep.ogg" },
+      boop: { ogg: "data:audio/ogg;base64,T2dnUw==" },
+    });
+    expect(Object.keys(sounds)).toEqual(["boop"]);
+  });
+
+  it("leaves out a sound with a malformed data: URL", async () => {
+    const sounds = await prefetchSounds({
+      beep: { ogg: "data:audio/ogg;base64" },
+    });
+    expect(sounds).toEqual({});
+  });
+});

src/soundUtils.ts

@@ -32,6 +32,43 @@ function getPreferredAudioFormat(): "ogg" | "mp3" {
 
 const preferredFormat = getPreferredAudioFormat();
 
+/**
+ * Decode a `data:` URL into the bytes it carries.
+ *
+ * The component build inlines the sound files as `data:` URLs. Those could be
+ * `fetch`ed like any other URL, but that fetch is subject to the host page's
+ * Content Security Policy, and `connect-src` lists rarely allow `data:` (a `*`
+ * source does not cover it). Reading the bytes out of the URL directly needs no
+ * network access, so no policy can stop it.
+ * @param url The `data:` URL to decode.
+ * @returns The decoded bytes.
+ */
+function decodeDataUrl(url: string): ArrayBuffer {
+  const separator = url.indexOf(",");
+  if (!url.startsWith("data:") || separator === -1)
+    throw new Error("Not a valid data: URL");
+  const header = url.slice("data:".length, separator);
+  // Vite only percent-encodes SVGs; every other inlined asset is base64.
+  if (!header.split(";").includes("base64"))
+    throw new Error("Only base64 data: URLs are supported");
+  // `decoded` is a binary string: one char per byte
+  const decoded = atob(url.slice(separator + 1));
+  const bytes = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
+  return bytes.buffer;
+}
+
+/**
+ * Load the bytes of a single sound file.
+ * @param url Where the sound is: an ordinary URL to fetch, or a `data:` URL.
+ * @returns The bytes, or null if the sound could not be loaded.
+ */
+async function loadSound(url: string): Promise<ArrayBuffer | null> {
+  if (url.startsWith("data:")) return decodeDataUrl(url);
+  const response = await fetch(url);
+  if (isFailure(response)) return null;
+  return await response.arrayBuffer();
+}
+
 /**
  * Prefetch sounds to be used by the AudioContext. This can
  * be called outside the scope of a component to ensure the
@@ -47,18 +84,20 @@ export async function prefetchSounds<S extends string>(
     Object.entries(sounds).map(async ([name, file]) => {
       const { mp3, ogg } = file as SoundDefinition;
       // Use preferred format, fallback to ogg if no mp3 is provided.
-      // Load an audio file
-      const response = await fetch(
-        preferredFormat === "ogg" ? ogg : (mp3 ?? ogg),
-      );
-      if (isFailure(response)) {
+      const url = preferredFormat === "ogg" ? ogg : (mp3 ?? ogg);
+      let buffer: ArrayBuffer | null = null;
+      try {
+        buffer = await loadSound(url);
+      } catch (e) {
+        logger.warn(`Could not load sound ${name}`, e);
+      }
+      if (buffer === null) {
         // If the sound doesn't load, it's not the end of the world. We won't play
         // the sound when requested, but it's better than failing the whole application.
         logger.warn(`Could not load sound ${name}, response was not okay`);
         return;
       }
-      // Decode it
-      buffers[name] = await response.arrayBuffer();
+      buffers[name] = buffer;
     }),
   );
   return buffers as Record<S, ArrayBuffer>;

src/state/CallViewModel/CallViewModel.ts

@@ -16,7 +16,6 @@ import {
 import { type Room as MatrixRoom } from "matrix-js-sdk";
 import {
   BehaviorSubject,
-  catchError,
   combineLatest,
   distinctUntilChanged,
   filter,
@@ -39,11 +38,12 @@ import {
   throttleTime,
   timer,
   takeUntil,
+  from,
 } from "rxjs";
 import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
   MembershipManagerEvent,
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -112,7 +112,7 @@ import {
   TransportState,
 } from "./localMember/LocalMember.ts";
 import {
-  createLocalTransport$,
+  getLocalTransport,
   type LocalTransport,
 } from "./localMember/LocalTransport.ts";
 import {
@@ -573,16 +573,16 @@ export function createCallViewModel$(
         : `${userId}:${deviceId}`,
   };
 
-  const localTransport =
-    options.localTransport ??
-    createLocalTransport$({
-      scope: scope,
-      memberships$: memberships$,
-      ownMembershipIdentity,
-      client,
-      roomId: matrixRoom.roomId,
-      matrixRTCMode,
-    });
+  const localTransport$ = options.localTransport
+    ? constant(options.localTransport)
+    : from(
+        getLocalTransport({
+          ownMembershipIdentity,
+          client,
+          roomId: matrixRoom.roomId,
+          matrixRTCMode,
+        }),
+      );
 
   const connectionFactory =
     options.connectionFactory ??
@@ -599,17 +599,7 @@ export function createCallViewModel$(
   const connectionManager = createConnectionManager$({
     scope: scope,
     connectionFactory: connectionFactory,
-    localTransport$: scope.behavior(
-      localTransport.active$.pipe(
-        catchError((e: unknown) => {
-          logger.info(
-            "could not pass local transport to createConnectionManager$. localTransport$ threw an error",
-            e,
-          );
-          return of(null);
-        }),
-      ),
-    ),
+    localTransport$,
     remoteTransports$: membershipsAndTransports.transports$,
     logger: logger,
     ownMembershipIdentity,
@@ -634,7 +624,7 @@ export function createCallViewModel$(
     ),
     muteStates,
     joinMatrixRTC: (
-      transport: LivekitTransportConfig,
+      transport: LivekitTransport,
       delayedLeaveTimings: ResolvedDelayedLeaveTimings,
     ) => {
       return enterRTCSession(
@@ -665,7 +655,7 @@ export function createCallViewModel$(
     connectionManager,
     client,
     matrixRTCSession,
-    localTransport,
+    localTransport$,
     roomId: matrixRoom.roomId,
     hideScreensharing,
     hostBridge,

src/state/CallViewModel/CallViewModelTestUtils.ts

@@ -210,11 +210,8 @@ export function withCallViewModel(mode: MatrixRTCMode) {
         connectionState$,
         windowSize$,
         localTransport: {
-          active$: constant({
-            transport: exampleTransport,
-            sfuConfig: exampleSfuConfig,
-          }),
-          advertised$: constant(exampleTransport),
+          transport: exampleTransport,
+          sfuConfig: exampleSfuConfig,
         },
         connectionFactory: {
           createConnection(

src/state/CallViewModel/localMember/LocalMember.test.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 
 import {
   Status as RTCMemberStatus,
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
@@ -21,7 +21,7 @@ import {
   beforeEach,
   afterEach,
 } from "vitest";
-import { BehaviorSubject, map, of } from "rxjs";
+import { BehaviorSubject, map, of, Subject } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type LocalParticipant, type LocalTrack } from "livekit-client";
 import fetchMock from "fetch-mock";
@@ -50,10 +50,7 @@ import {
   TrackState,
   watchScreenShareToggle,
 } from "./LocalMember";
-import {
-  FailToGetOpenIdToken,
-  MatrixRTCTransportMissingError,
-} from "../../../utils/errors";
+import { MatrixRTCTransportMissingError } from "../../../utils/errors";
 import { Epoch, ObservableScope } from "../../ObservableScope";
 import { constant } from "../../Behavior";
 import { ConnectionManagerData } from "../remoteMembers/ConnectionManager";
@@ -61,10 +58,7 @@ import { ConnectionState, type Connection } from "../remoteMembers/Connection";
 import { type Publisher } from "./Publisher";
 import { initializeWidget } from "../../../widget";
 import { nullHostBridge } from "../../../HostBridge";
-import {
-  type LocalTransport,
-  type LocalTransportWithSFUConfig,
-} from "./LocalTransport";
+import { type LocalTransport } from "./LocalTransport";
 import * as openIDSFU from "../../../livekit/openIDSFU";
 
 initializeWidget();
@@ -127,8 +121,7 @@ const mockedClient = {
 };
 
 describe("enterRTCSession", () => {
-  const transport: LivekitTransportConfig = {
-    livekit_alias: "roomId",
+  const transport: LivekitTransport = {
     livekit_service_url: "http://my-livekit-service-url.com",
     type: "livekit",
   };
@@ -145,7 +138,7 @@ describe("enterRTCSession", () => {
       client: mockedClient,
     },
     memberships: [],
-    joinRTCSession: vi.fn(),
+    join: vi.fn(),
   }) as unknown as MatrixRTCSession;
 
   beforeEach(() =>
@@ -157,19 +150,18 @@ describe("enterRTCSession", () => {
   it("It joins the correct Session", () => {
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+    expect(mockedSession.join).toHaveBeenLastCalledWith(
       {
         deviceId: "DEVICE",
         memberId: "@alice:example.org:DEVICE",
         userId: "@alice:example.org",
       },
-      [],
-      transport,
+      [transport],
       expect.objectContaining({ manageMediaKeys: true }),
     );
   });
 
-  it("passes keyRotationParticipantLimit from config to joinRTCSession", () => {
+  it("passes keyRotationParticipantLimit from config to join", () => {
     mockConfig({
       livekit: { livekit_service_url: "http://my-default-service-url.com" },
       matrix_rtc_session: {
@@ -182,9 +174,8 @@ describe("enterRTCSession", () => {
 
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+    expect(mockedSession.join).toHaveBeenLastCalledWith(
       expect.any(Object),
-      [],
       expect.any(Object),
       expect.objectContaining({
         keyRotationParticipantLimit: 50,
@@ -195,8 +186,7 @@ describe("enterRTCSession", () => {
   it("uses the specified delayed leave timings", () => {
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
-      expect.anything(),
+    expect(mockedSession.join).toHaveBeenLastCalledWith(
       expect.anything(),
       expect.anything(),
       expect.objectContaining({
@@ -216,7 +206,7 @@ describe("LocalMembership", () => {
     }),
     matrixRTCSession: {
       updateCallIntent: vi.fn().mockReturnValue(Promise.resolve()),
-      leaveRoomSession: vi.fn(),
+      leave: vi.fn(),
     } as unknown as MatrixRTCSession,
     muteStates: mockMuteStates(),
     trackProcessorState$: constant({
@@ -261,8 +251,8 @@ describe("LocalMembership", () => {
   });
 
   it("throws error on missing RTC config error", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
+    withTestScheduler(({ scope, hot, expectObservable }) => {
+      const localTransport$ = scope.behavior<null | LivekitTransport>(
         hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
         null,
       );
@@ -277,16 +267,15 @@ describe("LocalMembership", () => {
         ),
       };
 
-      const aLocalTransport: LocalTransport = {
-        advertised$: localTransport$,
-        active$: behavior("a", { a: null }),
-      };
-
       const localMembership = createLocalMembership$({
         scope,
         ...defaultCreateLocalMemberValues,
         connectionManager: mockConnectionManager,
-        localTransport: aLocalTransport,
+        localTransport$: hot(
+          "1ms #",
+          {},
+          new MatrixRTCTransportMissingError("domain.com"),
+        ),
       });
 
       expectObservable(localMembership.localMemberState$).toBe("ne", {
@@ -296,61 +285,9 @@ describe("LocalMembership", () => {
     });
   });
 
-  it("Should not publish to active transport if advertised has errors", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      const advertised$ = scope.behavior<null | LivekitTransportConfig>(
-        hot("--#", {}, new FailToGetOpenIdToken(new Error("foo"))),
-        null,
-      );
-
-      // Populate a connection for active
-      const connectionManagerData = new ConnectionManagerData();
-      connectionManagerData.add(connectionTransportBConnected, []);
-      const mockConnectionManager = {
-        transports$: constant(new Epoch([bTransport])),
-        connectionManagerData$: constant(new Epoch(connectionManagerData)),
-      };
-
-      const aLocalTransport: LocalTransport = {
-        advertised$,
-        active$: behavior("a", { n: null, a: bTransportWithSFUConfig }),
-      };
-
-      defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
-        () => {
-          return {} as unknown as Publisher;
-        },
-      );
-      const publisherFactory =
-        defaultCreateLocalMemberValues.createPublisherFactory as ReturnType<
-          typeof vi.fn
-        >;
-
-      const localMembership = createLocalMembership$({
-        scope,
-        ...defaultCreateLocalMemberValues,
-        connectionManager: mockConnectionManager,
-        localTransport: aLocalTransport,
-      });
-
-      expectObservable(localMembership.localMemberState$).toBe("n-e", {
-        n: TransportState.Waiting,
-        e: expect.toSatisfy((e) => e instanceof FailToGetOpenIdToken),
-      });
-
-      // Should not have created any publisher
-      expect(publisherFactory).toHaveBeenCalledTimes(0);
-    });
-  });
-
   it("logs if callIntent cannot be updated", async () => {
     const scope = new ObservableScope();
 
-    const aLocalTransport: LocalTransport = {
-      advertised$: constant(aTransport),
-      active$: constant(aTransportWithSFUConfig),
-    };
-
     const mockConnectionManager = {
       transports$: constant(new Epoch([])),
       connectionManagerData$: constant(new Epoch(new ConnectionManagerData())),
@@ -363,10 +300,10 @@ describe("LocalMembership", () => {
       ...defaultCreateLocalMemberValues,
       matrixRTCSession: {
         updateCallIntent: vi.fn().mockImplementation(reject),
-        leaveRoomSession: vi.fn(),
+        leave: vi.fn(),
       },
       connectionManager: mockConnectionManager,
-      localTransport: aLocalTransport,
+      localTransport$: constant(mockTransport),
     });
     const expextedLog =
       "'not connected yet' while updating the call intent (this is expected on startup)";
@@ -378,33 +315,19 @@ describe("LocalMembership", () => {
     scope.end();
   });
 
-  const aTransport = {
+  const mockTransportConfig = {
     livekit_service_url: "a",
-  } as LivekitTransportConfig;
+  } as LivekitTransport;
 
-  const aTransportWithSFUConfig = {
-    transport: aTransport,
+  const mockTransport = {
+    transport: mockTransportConfig,
     sfuConfig: {
       jwt: "foo",
       livekitAlias: "bar",
       livekitIdentity: "baz",
       url: "bro",
     },
-  } as LocalTransportWithSFUConfig;
-
-  const bTransport = {
-    livekit_service_url: "b",
-  } as LivekitTransportConfig;
-
-  const bTransportWithSFUConfig = {
-    transport: bTransport,
-    sfuConfig: {
-      jwt: "foo2",
-      livekitAlias: "bar2",
-      livekitIdentity: "baz2",
-      url: "bro2",
-    },
-  } as LocalTransportWithSFUConfig;
+  } as LocalTransport;
 
   const connectionTransportAConnected = {
     livekitRoom: mockLivekitRoom({
@@ -414,18 +337,13 @@ describe("LocalMembership", () => {
       } as unknown as LocalParticipant,
     }),
     state$: constant(ConnectionState.LivekitConnected),
-    transport: aTransport,
-  } as unknown as Connection;
+    transport: mockTransportConfig,
+  } as Connection;
   const connectionTransportAConnecting = {
     ...connectionTransportAConnected,
     state$: constant(ConnectionState.LivekitConnecting),
     livekitRoom: mockLivekitRoom({}),
   } as unknown as Connection;
-  const connectionTransportBConnected = {
-    state$: constant(ConnectionState.LivekitConnected),
-    transport: bTransport,
-    livekitRoom: mockLivekitRoom({}),
-  } as unknown as Connection;
 
   const authCallSpy = vi
     .spyOn(openIDSFU, "getSFUConfigWithOpenID")
@@ -459,10 +377,7 @@ describe("LocalMembership", () => {
           ),
         },
         joinMatrixRTC,
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
         delayId$,
       });
 
@@ -471,7 +386,7 @@ describe("LocalMembership", () => {
       await flushPromises();
       // Joins with timings appropriate for the level of delegation support
       expect(joinMatrixRTC).toHaveBeenCalledWith(
-        aTransport,
+        mockTransportConfig,
         delayedLeaveTimings,
       );
 
@@ -505,75 +420,7 @@ describe("LocalMembership", () => {
     },
   );
 
-  it("recreates publisher if new connection is used, always unpublish and end tracks", async () => {
-    const scope = new ObservableScope();
-
-    const activeTransport$ = new BehaviorSubject(aTransportWithSFUConfig);
-    const aLocalTransport: LocalTransport = {
-      advertised$: constant(aTransport),
-      active$: activeTransport$,
-    };
-
-    const publishers: Publisher[] = [];
-    let seed = 0;
-    defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
-      () => {
-        const a = seed;
-        seed += 1;
-        logger.info(`creating [${a}]`);
-        const p = {
-          // It is enought to check if destroy is called. Destroy itself is tested in the publisher to make sure it does
-          // all the cleanup we need.
-          destroy: vi.fn(),
-          stopPublishing: vi.fn().mockImplementation(() => {
-            logger.info(`stopPublishing [${a}]`);
-          }),
-          stopTracks: vi.fn(),
-        };
-        publishers.push(p as unknown as Publisher);
-        return p;
-      },
-    );
-    const publisherFactory =
-      defaultCreateLocalMemberValues.createPublisherFactory as ReturnType<
-        typeof vi.fn
-      >;
-
-    const connectionManagerData = new ConnectionManagerData();
-    connectionManagerData.add(connectionTransportAConnected, []);
-    connectionManagerData.add(connectionTransportBConnected, []);
-    createLocalMembership$({
-      scope,
-      ...defaultCreateLocalMemberValues,
-      connectionManager: {
-        connectionManagerData$: constant(new Epoch(connectionManagerData)),
-      },
-      localTransport: aLocalTransport,
-    });
-    await flushPromises();
-    activeTransport$.next({
-      ...aTransportWithSFUConfig,
-      transport: bTransport,
-    });
-    await flushPromises();
-
-    expect(publisherFactory).toHaveBeenCalledTimes(2);
-    expect(publishers.length).toBe(2);
-    // stop the first Publisher and let the second one life.
-    expect(publishers[0].destroy).toHaveBeenCalled();
-    expect(publishers[1].destroy).not.toHaveBeenCalled();
-    expect(publisherFactory.mock.calls[0][0].transport).toBe(aTransport);
-    expect(publisherFactory.mock.calls[1][0].transport).toBe(bTransport);
-    scope.end();
-    await flushPromises();
-    // stop all tracks after ending scopes
-    expect(publishers[1].destroy).toHaveBeenCalled();
-    // expect(publishers[1].stopTracks).toHaveBeenCalled();
-
-    defaultCreateLocalMemberValues.createPublisherFactory.mockReset();
-  });
-
-  it("only start tracks if requested", async () => {
+  it("only starts tracks if requested", async () => {
     const scope = new ObservableScope();
 
     const publishers: Publisher[] = [];
@@ -602,11 +449,6 @@ describe("LocalMembership", () => {
         typeof vi.fn
       >;
 
-    const aLocalTransport: LocalTransport = {
-      advertised$: constant(aTransport),
-      active$: constant(aTransportWithSFUConfig),
-    };
-
     const connectionManagerData = new ConnectionManagerData();
     connectionManagerData.add(connectionTransportAConnected, []);
     // connectionManagerData.add(connectionTransportB, []);
@@ -616,7 +458,7 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$: constant(new Epoch(connectionManagerData)),
       },
-      localTransport: aLocalTransport,
+      localTransport$: constant(mockTransport),
     });
     await flushPromises();
     expect(publisherFactory).toHaveBeenCalledOnce();
@@ -637,16 +479,8 @@ describe("LocalMembership", () => {
   //
   it("tracks livekit state correctly", async () => {
     const scope = new ObservableScope();
-
     const connectionManagerData = new ConnectionManagerData();
-
-    const activeTransport$ =
-      new BehaviorSubject<null | LocalTransportWithSFUConfig>(null);
-
-    const aLocalTransport: LocalTransport = {
-      advertised$: constant(aTransport),
-      active$: activeTransport$,
-    };
+    const localTransport$ = new Subject<LocalTransport>();
 
     const connectionManagerData$ = new BehaviorSubject(
       new Epoch(connectionManagerData),
@@ -687,14 +521,14 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$,
       },
-      localTransport: aLocalTransport,
+      localTransport$,
     });
 
     await flushPromises();
     expect(localMembership.localMemberState$.value).toStrictEqual(
       TransportState.Waiting,
     );
-    activeTransport$.next(aTransportWithSFUConfig);
+    localTransport$.next(mockTransport);
     await flushPromises();
     expect(localMembership.localMemberState$.value).toStrictEqual({
       matrix: RTCMemberStatus.Connected,
@@ -719,7 +553,7 @@ describe("LocalMembership", () => {
     });
 
     (
-      connectionManagerData2.getConnectionForTransport(aTransport)!
+      connectionManagerData2.getConnectionForTransport(mockTransportConfig)!
         .state$ as BehaviorSubject<ConnectionState>
     ).next(ConnectionState.LivekitConnected);
     expect(localMembership.localMemberState$.value).toStrictEqual({
@@ -822,10 +656,7 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
       });
 
       await flushPromises();
@@ -862,10 +693,7 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
       });
 
       await flushPromises();
@@ -913,10 +741,7 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
       });
 
       await flushPromises();
@@ -957,10 +782,7 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
       });
 
       await flushPromises();
@@ -1026,10 +848,7 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
       });
       return { scope, localMembership };
     };
@@ -1039,7 +858,7 @@ describe("LocalMembership", () => {
       const setScreenShareEnabled = vi.fn().mockRejectedValue(error);
       const connection = {
         state$: constant(ConnectionState.LivekitConnected),
-        transport: aTransport,
+        transport: mockTransportConfig,
         livekitRoom: mockLivekitRoom({
           localParticipant: mockLocalParticipant({
             isScreenShareEnabled: false,

src/state/CallViewModel/localMember/LocalMember.ts

@@ -19,7 +19,6 @@ import { type MatrixClient } from "matrix-js-sdk";
 import {
   Status as RTCSessionStatus,
   type LivekitTransport,
-  type LivekitTransportConfig,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -38,6 +37,10 @@ import {
   startWith,
   switchMap,
   tap,
+  NEVER,
+  concat,
+  race,
+  Subject,
 } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
@@ -77,8 +80,6 @@ import {
 } from "../remoteMembers/Connection.ts";
 import { type HomeserverConnected } from "./HomeserverConnected.ts";
 import { type LocalTransport } from "./LocalTransport.ts";
-import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
-import { or$ } from "../../../utils/observable.ts";
 import { getSFUConfigWithOpenID } from "../../../livekit/openIDSFU.ts";
 
 export enum TransportState {
@@ -142,18 +143,15 @@ interface Props {
   connectionManager: IConnectionManager;
   createPublisherFactory: (connection: Connection) => Publisher;
   joinMatrixRTC: (
-    transport: LivekitTransportConfig,
+    transport: LivekitTransport,
     delayedLeaveTimings: ResolvedDelayedLeaveTimings,
   ) => void;
   homeserverConnected: HomeserverConnected;
   roomId: string;
   ownMembershipIdentity: CallMembershipIdentityParts;
-  localTransport: LocalTransport;
+  localTransport$: Observable<LocalTransport>;
   client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
-  matrixRTCSession: Pick<
-    MatrixRTCSession,
-    "updateCallIntent" | "leaveRoomSession"
-  >;
+  matrixRTCSession: Pick<MatrixRTCSession, "updateCallIntent" | "leave">;
   /** Whether to hide the screen-sharing button. */
   hideScreensharing: boolean;
   /** The application hosting Element Call, to be kept informed of join/leave. */
@@ -194,7 +192,7 @@ interface Props {
 export const createLocalMembership$ = ({
   scope,
   connectionManager,
-  localTransport,
+  localTransport$: localTransportWithErrors$,
   homeserverConnected,
   createPublisherFactory,
   joinMatrixRTC,
@@ -252,20 +250,24 @@ export const createLocalMembership$ = ({
   const logger = parentLogger.getChild("[LocalMembership]");
   logger.debug(`Creating local membership..`);
 
-  // We consider error on the transport as fatal.
-  // Whether it is the active transport or the preferred transport.
-  const handleTransportError = (e: unknown): Observable<null> => {
-    let error: ElementCallError;
-    if (e instanceof ElementCallError) {
-      error = e;
-    } else {
-      error = new UnknownCallError(
-        e instanceof Error ? e : new Error("Unknown error from localTransport"),
-      );
-    }
-    setTransportError(error);
-    return of(null);
-  };
+  // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
+  const fatalTransportError$ = new Subject<ElementCallError>();
+  const localTransport$ = localTransportWithErrors$.pipe(
+    catchError((e: unknown) => {
+      let error: ElementCallError;
+      if (e instanceof ElementCallError) {
+        error = e;
+      } else {
+        error = new UnknownCallError(
+          e instanceof Error
+            ? e
+            : new Error("Unknown error from localTransport"),
+        );
+      }
+      fatalTransportError$.next(error);
+      return NEVER; // Make this Observable swallow the error
+    }),
+  );
 
   async function checkDelegationSupport(
     endpointUrl: string,
@@ -303,58 +305,40 @@ export const createLocalMembership$ = ({
 
   // The transport that we will advertise in our membership, paired with info as
   // to whether delayed event delegation is supported
-  const joinParams$ = localTransport.advertised$.pipe(
-    catchError(handleTransportError),
-    distinctUntilChanged(areLivekitTransportsEqual),
-    switchMap((transport) => {
-      if (transport === null) return of(null);
-      const transportSupportsDelegation = checkDelegationSupport(
-        transport.livekit_service_url + "/delegate_delayed_leave",
-        `transport ${transport.livekit_service_url}`,
-      );
-      return or$(
-        from(homeserverSupportsDelegation),
-        from(transportSupportsDelegation),
-      ).pipe(
-        map((delegationSupported) => ({ transport, delegationSupported })),
-        startWith(null),
-      );
-    }),
-  );
-
-  // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
-  const activeTransport$ = scope.behavior(
-    combineLatest([localTransport.active$, localTransport.advertised$]).pipe(
-      map(([active, advertised]) => {
-        // Our policy is to not publish to another transport if our prefered transport is miss-configured
-        if (advertised == null) return null;
-
-        return active?.transport ?? null;
+  const joinParams$ = scope.behavior(
+    localTransport$.pipe(
+      switchMap(async ({ transport }) => {
+        const transportSupportsDelegation = checkDelegationSupport(
+          transport.livekit_service_url + "/delegate_delayed_leave",
+          `transport ${transport.livekit_service_url}`,
+        );
+        return {
+          transport,
+          delegationSupported:
+            (await homeserverSupportsDelegation) ||
+            (await transportSupportsDelegation),
+        };
       }),
-      catchError(handleTransportError),
-      distinctUntilChanged(areLivekitTransportsEqual),
     ),
+    null,
   );
 
   // Drop Epoch data here since we will not combine this anymore
   const localConnection$ = scope.behavior(
     combineLatest([
       connectionManager.connectionManagerData$,
-      activeTransport$,
+      localTransport$,
     ]).pipe(
-      map(([{ value: connectionData }, localTransport]) => {
-        if (localTransport === null) {
-          return null;
-        }
-
-        return connectionData.getConnectionForTransport(localTransport);
-      }),
+      map(([{ value: connectionData }, { transport }]) =>
+        connectionData.getConnectionForTransport(transport),
+      ),
       tap((connection) => {
         logger.info(
           `Local connection updated: ${connection?.transport?.livekit_service_url}`,
         );
       }),
     ),
+    null,
   );
 
   // Tracks error that happen when creating the local tracks.
@@ -490,18 +474,6 @@ export const createLocalMembership$ = ({
     }
   };
 
-  const fatalTransportError$ = new BehaviorSubject<ElementCallError | null>(
-    null,
-  );
-
-  const setTransportError = (e: ElementCallError): void => {
-    if (fatalTransportError$.value !== null) {
-      logger.error("Multiple Transport Errors:", e);
-    } else {
-      fatalTransportError$.next(e);
-    }
-  };
-
   const localConnectionState$ = localConnection$.pipe(
     switchMap((connection) => (connection ? connection.state$ : of(null))),
   );
@@ -509,38 +481,29 @@ export const createLocalMembership$ = ({
   const mediaState$: Behavior<LocalMemberMediaState> = scope.behavior(
     combineLatest([
       localConnectionState$,
-      activeTransport$,
       joinAndPublishRequested$,
       from(trackStartRequested.promise).pipe(
         map(() => true),
         startWith(false),
       ),
     ]).pipe(
-      map(
-        ([
-          localConnectionState,
-          localTransport,
-          shouldPublish,
-          shouldStartTracks,
-        ]) => {
-          if (!localTransport) return null;
-          const trackState: TrackState = shouldStartTracks
-            ? TrackState.Ready
-            : TrackState.WaitingForUser;
+      map(([localConnectionState, shouldPublish, shouldStartTracks]) => {
+        const trackState: TrackState = shouldStartTracks
+          ? TrackState.Ready
+          : TrackState.WaitingForUser;
 
-          if (
-            localConnectionState !== ConnectionState.LivekitConnected ||
-            trackState !== TrackState.Ready
-          )
-            return {
-              connection: localConnectionState,
-              tracks: trackState,
-            };
-          if (!shouldPublish) return PublishState.WaitingForUser;
-          // if (!publishing) return PublishState.Starting;
-          return PublishState.Publishing;
-        },
-      ),
+        if (
+          localConnectionState !== ConnectionState.LivekitConnected ||
+          trackState !== TrackState.Ready
+        )
+          return {
+            connection: localConnectionState,
+            tracks: trackState,
+          };
+        if (!shouldPublish) return PublishState.WaitingForUser;
+        // if (!publishing) return PublishState.Starting;
+        return PublishState.Publishing;
+      }),
       distinctUntilChanged(deepCompare),
     ),
   );
@@ -554,30 +517,36 @@ export const createLocalMembership$ = ({
   };
 
   const localMemberState$ = scope.behavior<LocalMemberState>(
-    combineLatest([
-      mediaState$,
-      homeserverConnected.rtsSession$,
-      fatalMatrixError$,
-      fatalTransportError$,
-      publishError$,
-    ]).pipe(
-      map(
-        ([
-          mediaState,
-          rtcSessionStatus,
-          fatalMatrixError,
-          fatalTransportError,
-          publishError,
-        ]) => {
-          if (fatalTransportError !== null) return fatalTransportError;
-          // `mediaState` will be 'null' until the transport/connection appears.
-          if (mediaState && rtcSessionStatus)
-            return {
-              matrix: fatalMatrixError ?? rtcSessionStatus,
-              media: publishError ?? mediaState,
-            };
-          return TransportState.Waiting;
-        },
+    concat(
+      // Waiting until…
+      of(TransportState.Waiting),
+      race(
+        // either there is a fatal transport error
+        fatalTransportError$,
+        // or the transport is available.
+        localTransport$.pipe(
+          switchMap(() =>
+            // Once available, track session/media state.
+            combineLatest([
+              mediaState$,
+              homeserverConnected.rtsSession$,
+              fatalMatrixError$,
+              publishError$,
+            ]).pipe(
+              map(
+                ([
+                  mediaState,
+                  rtcSessionStatus,
+                  fatalMatrixError,
+                  publishError,
+                ]) => ({
+                  matrix: fatalMatrixError ?? rtcSessionStatus,
+                  media: publishError ?? mediaState,
+                }),
+              ),
+            ),
+          ),
+        ),
       ),
     ),
   );
@@ -685,7 +654,7 @@ export const createLocalMembership$ = ({
       });
   });
 
-  // Keep matrix rtc session in sync with advertisedTransport$, connectRequested$
+  // Join and leave the session as needed
   scope.reconcile(
     scope.behavior(combineLatest([joinParams$, joinAndPublishRequested$])),
     async ([joinParams, shouldConnect]) => {
@@ -710,7 +679,7 @@ export const createLocalMembership$ = ({
       return Promise.resolve(async (): Promise<void> => {
         try {
           // TODO Update matrixRTCSession to allow udpating the transport without leaving the session!
-          await matrixRTCSession.leaveRoomSession(1000);
+          await matrixRTCSession.leave(1000);
         } catch (e) {
           logger.error("Error leaving RTC session", e);
         }
@@ -993,7 +962,7 @@ interface EnterRTCSessionOptions {
 export function enterRTCSession(
   rtcSession: MatrixRTCSession,
   ownMembershipIdentity: CallMembershipIdentityParts,
-  transport: LivekitTransportConfig,
+  transport: LivekitTransport,
   {
     encryptMedia,
     matrixRTCMode,
@@ -1014,21 +983,6 @@ export function enterRTCSession(
     matrix_rtc_session: sessionConfig,
   } = Config.get();
   const retryInterval = sessionConfig.network_error_retry_ms;
-  const multiSFU =
-    matrixRTCMode === MatrixRTCMode.Compatibility ||
-    matrixRTCMode === MatrixRTCMode.Matrix_2_0;
-
-  // For backwards compatibility with Element Call versions that do not do Matrix 2.0,
-  // we add the livekit alias to the transport.
-  let backwardCompatibleTransport: LivekitTransport | LivekitTransportConfig;
-  if (matrixRTCMode === MatrixRTCMode.Matrix_2_0) {
-    backwardCompatibleTransport = transport;
-  } else {
-    backwardCompatibleTransport = {
-      livekit_alias: rtcSession.room.roomId,
-      ...transport,
-    };
-  }
 
   // Set maximumNetworkErrorRetryCount such that we will consider the client
   // disconnected as soon as either it fails to sync for longer than the grace
@@ -1041,24 +995,18 @@ export function enterRTCSession(
   // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
   // TODO where/how do we track errors originating from the ongoing rtcSession?
 
-  rtcSession.joinRTCSession(
-    ownMembershipIdentity,
-    multiSFU ? [] : [backwardCompatibleTransport],
-    multiSFU ? backwardCompatibleTransport : undefined,
-    {
-      notificationType,
-      callIntent,
-      manageMediaKeys: encryptMedia,
-      delayedLeaveEventRestartMs: delayedLeaveTimings.restart_ms,
-      delayedLeaveEventDelayMs: delayedLeaveTimings.delay_ms,
-      delayedLeaveEventRestartLocalTimeoutMs:
-        delayedLeaveTimings.restart_timeout_ms,
-      networkErrorRetryMs: sessionConfig.network_error_retry_ms,
-      makeKeyDelay: sessionConfig.wait_for_key_rotation_ms,
-      membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
-      keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
-      unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
-      maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
-    },
-  );
+  rtcSession.join(ownMembershipIdentity, [transport], {
+    notificationType,
+    callIntent,
+    manageMediaKeys: encryptMedia,
+    delayedLeaveEventRestartMs: delayedLeaveTimings.restart_ms,
+    delayedLeaveEventDelayMs: delayedLeaveTimings.delay_ms,
+    delayedLeaveEventRestartLocalTimeoutMs:
+      delayedLeaveTimings.restart_timeout_ms,
+    networkErrorRetryMs: sessionConfig.network_error_retry_ms,
+    membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
+    keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
+    unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
+    maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
+  });
 }

src/state/CallViewModel/localMember/LocalTransport.test.ts

@@ -14,19 +14,10 @@ import {
   type MockedObject,
   vi,
 } from "vitest";
-import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
-import { lastValueFrom } from "rxjs";
 import fetchMock from "fetch-mock";
 
-import {
-  mockConfig,
-  flushPromises,
-  ownMemberMock,
-  testScope,
-} from "../../../utils/test";
-import { createLocalTransport$ } from "./LocalTransport";
-import { constant } from "../../Behavior";
-import { Epoch, ObservableScope } from "../../ObservableScope";
+import { mockConfig, ownMemberMock } from "../../../utils/test";
+import { getLocalTransport } from "./LocalTransport";
 import {
   MatrixRTCTransportMissingError,
   FailToGetOpenIdToken,
@@ -47,118 +38,79 @@ describe("LocalTransport", () => {
   beforeEach(() => vi.clearAllMocks());
 
   it("throws if config is missing", async () => {
-    const { advertised$, active$ } = createLocalTransport$({
-      scope: testScope(),
-      roomId: "!room:example.org",
-      memberships$: constant(new Epoch<CallMembership[]>([])),
-      client: {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getDomain: () => "example.org",
-        // These won't be called in this error path but satisfy the type
-        getOpenIdToken: vi.fn(),
-        getDeviceId: vi.fn(),
-      },
-      ownMembershipIdentity: ownMemberMock,
-      matrixRTCMode: MatrixRTCMode.Compatibility,
-    });
-    await flushPromises();
-
-    expect(() => advertised$.value).toThrow(
-      new MatrixRTCTransportMissingError("example.org"),
-    );
-    expect(() => active$.value).toThrow(
-      new MatrixRTCTransportMissingError("example.org"),
-    );
+    await expect(
+      getLocalTransport({
+        roomId: "!room:example.org",
+        client: {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          _unstable_getRTCTransports: async () => Promise.resolve([]),
+          getDomain: () => "example.org",
+          // These won't be called in this error path but satisfy the type
+          getOpenIdToken: vi.fn(),
+          getDeviceId: vi.fn(),
+        },
+        ownMembershipIdentity: ownMemberMock,
+        matrixRTCMode: MatrixRTCMode.Compatibility,
+      }),
+    ).rejects.toThrow(new MatrixRTCTransportMissingError("example.org"));
   });
 
   it("throws FailToGetOpenIdToken when OpenID fetch fails", async () => {
     // Provide a valid config so makeTransportInternal resolves a transport
-    const scope = new ObservableScope();
     mockConfig({
       livekit: { livekit_service_url: "https://lk.example.org" },
     });
-    const resolver = Promise.withResolvers<void>();
-    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockImplementation(
-      async () => {
-        await resolver.promise;
-        throw new FailToGetOpenIdToken(new Error("no openid"));
-      },
+    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockRejectedValue(
+      new FailToGetOpenIdToken(new Error("no openid")),
     );
-    const observations: unknown[] = [];
-    const errors: Error[] = [];
-    const { advertised$, active$ } = createLocalTransport$({
-      scope,
-      roomId: "!example_room_id",
-      memberships$: constant(new Epoch<CallMembership[]>([])),
-      client: {
-        getDomain: () => "example.org",
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getOpenIdToken: vi.fn(),
-        getDeviceId: vi.fn(),
-      },
-      ownMembershipIdentity: ownMemberMock,
-      matrixRTCMode: MatrixRTCMode.Compatibility,
-    });
-    active$.subscribe(
-      (o) => observations.push(o),
-      (e) => errors.push(e),
-    );
-    resolver.resolve();
-    await flushPromises();
 
-    const expectedError = new FailToGetOpenIdToken(new Error("no openid"));
-    expect(observations).toStrictEqual([null]);
-    expect(errors).toStrictEqual([expectedError]);
-    expect(() => advertised$.value).toThrow(expectedError);
-    expect(() => active$.value).toThrow(expectedError);
+    await expect(
+      getLocalTransport({
+        roomId: "!example_room_id",
+        client: {
+          getDomain: () => "example.org",
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          _unstable_getRTCTransports: async () => Promise.resolve([]),
+          getOpenIdToken: vi.fn(),
+          getDeviceId: vi.fn(),
+        },
+        ownMembershipIdentity: ownMemberMock,
+        matrixRTCMode: MatrixRTCMode.Compatibility,
+      }),
+    ).rejects.toThrow(new FailToGetOpenIdToken(new Error("no openid")));
   });
 
-  it("emits preferred transport after OpenID resolves", async () => {
+  it("returns preferred transport", async () => {
     // Use config so transport discovery succeeds, but delay OpenID JWT fetch
     mockConfig({
       livekit: { livekit_service_url: "https://lk.example.org" },
     });
 
-    const openIdResolver = Promise.withResolvers<openIDSFU.SFUConfig>();
-
-    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockReturnValue(
-      openIdResolver.promise,
-    );
-
-    const { advertised$, active$ } = createLocalTransport$({
-      scope: testScope(),
-      roomId: "!room:example.org",
-      memberships$: constant(new Epoch<CallMembership[]>([])),
-      client: {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getDomain: () => "example.org",
-        getOpenIdToken: vi.fn(),
-        getDeviceId: vi.fn(),
-      },
-      ownMembershipIdentity: ownMemberMock,
-      matrixRTCMode: MatrixRTCMode.Compatibility,
-    });
-
-    openIdResolver.resolve?.({
+    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue({
       url: "https://lk.example.org",
       jwt: "jwt",
       livekitAlias: "Akph4alDMhen",
       livekitIdentity: ownMemberMock.userId + ":" + ownMemberMock.deviceId,
     });
-    expect(advertised$.value).toBe(null);
-    expect(active$.value).toBe(null);
-    await flushPromises();
-    // final
-    const expectedTransport = {
-      livekit_service_url: "https://lk.example.org",
-      type: "livekit",
-    };
-    expect(advertised$.value).toStrictEqual(expectedTransport);
-    expect(active$.value).toStrictEqual({
-      transport: expectedTransport,
+
+    expect(
+      await getLocalTransport({
+        roomId: "!room:example.org",
+        client: {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          _unstable_getRTCTransports: async () => Promise.resolve([]),
+          getDomain: () => "example.org",
+          getOpenIdToken: vi.fn(),
+          getDeviceId: vi.fn(),
+        },
+        ownMembershipIdentity: ownMemberMock,
+        matrixRTCMode: MatrixRTCMode.Compatibility,
+      }),
+    ).toStrictEqual({
+      transport: {
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
+      },
       sfuConfig: {
         jwt: "jwt",
         livekitAlias: "Akph4alDMhen",
@@ -168,22 +120,19 @@ describe("LocalTransport", () => {
     });
   });
 
-  type LocalTransportProps = Parameters<typeof createLocalTransport$>[0];
+  type LocalTransportProps = Parameters<typeof getLocalTransport>[0];
 
   describe("transport configuration mechanisms", () => {
     let localTransportOpts: LocalTransportProps & {
       client: MockedObject<LocalTransportProps["client"]>;
     };
-    let openIdResolver: PromiseWithResolvers<openIDSFU.SFUConfig>;
     beforeEach(() => {
       mockConfig({});
       customLivekitUrl.setValue(customLivekitUrl.defaultValue);
       localTransportOpts = {
         ownMembershipIdentity: ownMemberMock,
-        scope: testScope(),
         roomId: "!example_room_id",
         matrixRTCMode: MatrixRTCMode.Compatibility,
-        memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
           getDomain: vi.fn().mockReturnValue("example.org"),
           // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -192,10 +141,6 @@ describe("LocalTransport", () => {
           getDeviceId: vi.fn(),
         },
       };
-      openIdResolver = Promise.withResolvers<openIDSFU.SFUConfig>();
-      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockReturnValue(
-        openIdResolver.promise,
-      );
     });
 
     afterEach(() => {
@@ -206,19 +151,15 @@ describe("LocalTransport", () => {
       mockConfig({
         livekit: { livekit_service_url: "https://lk.example.org" },
       });
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
-      openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      const expectedTransport = {
-        livekit_service_url: "https://lk.example.org",
-        type: "livekit",
-      };
-      expect(advertised$.value).toStrictEqual(expectedTransport);
-      expect(active$.value).toStrictEqual({
-        transport: expectedTransport,
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
+        openIdResponse,
+      );
+
+      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
+        transport: {
+          livekit_service_url: "https://lk.example.org",
+          type: "livekit",
+        },
         sfuConfig: {
           jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
           livekitAlias: "Akph4alDMhen",
@@ -230,12 +171,11 @@ describe("LocalTransport", () => {
 
     it("supports getting transport via user settings", async () => {
       customLivekitUrl.setValue("https://lk.example.org");
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
-      openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
-      await flushPromises();
-      expect(active$.value).toStrictEqual({
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
+        openIdResponse,
+      );
+
+      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
         transport: {
           livekit_service_url: "https://lk.example.org",
           type: "livekit",
@@ -253,19 +193,15 @@ describe("LocalTransport", () => {
       localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
         { type: "livekit", livekit_service_url: "https://lk.example.org" },
       ]);
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
-      openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      const expectedTransport = {
-        livekit_service_url: "https://lk.example.org",
-        type: "livekit",
-      };
-      expect(advertised$.value).toStrictEqual(expectedTransport);
-      expect(active$.value).toStrictEqual({
-        transport: expectedTransport,
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
+        openIdResponse,
+      );
+
+      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
+        transport: {
+          livekit_service_url: "https://lk.example.org",
+          type: "livekit",
+        },
         sfuConfig: {
           jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
           livekitAlias: "Akph4alDMhen",
@@ -279,38 +215,31 @@ describe("LocalTransport", () => {
       localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
         { type: "livekit", livekit_service_url: "https://lk.example.org" },
       ]);
-      openIdResolver.reject(
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockRejectedValue(
         new FailToGetOpenIdToken(new Error("Test driven error")),
       );
-      await expect(async () =>
-        lastValueFrom(createLocalTransport$(localTransportOpts).active$),
-      ).rejects.toThrow(expect.any(FailToGetOpenIdToken));
+
+      await expect(getLocalTransport(localTransportOpts)).rejects.toThrow(
+        expect.any(FailToGetOpenIdToken),
+      );
     });
 
     it("throws if no options are available", async () => {
-      const { advertised$, active$ } = createLocalTransport$({
-        scope: testScope(),
-        ownMembershipIdentity: ownMemberMock,
-        roomId: "!example_room_id",
-        matrixRTCMode: MatrixRTCMode.Compatibility,
-        memberships$: constant(new Epoch<CallMembership[]>([])),
-        client: {
-          getDomain: () => "example.org",
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () => Promise.resolve([]),
-          // These won't be called in this error path but satisfy the type
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-        },
-      });
-      await flushPromises();
-
-      expect(() => advertised$.value).toThrow(
-        new MatrixRTCTransportMissingError("example.org"),
-      );
-      expect(() => active$.value).toThrow(
-        new MatrixRTCTransportMissingError("example.org"),
-      );
+      await expect(
+        getLocalTransport({
+          ownMembershipIdentity: ownMemberMock,
+          roomId: "!example_room_id",
+          matrixRTCMode: MatrixRTCMode.Compatibility,
+          client: {
+            getDomain: () => "example.org",
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            _unstable_getRTCTransports: async () => Promise.resolve([]),
+            // These won't be called in this error path but satisfy the type
+            getOpenIdToken: vi.fn(),
+            getDeviceId: vi.fn(),
+          },
+        }),
+      ).rejects.toThrow(new MatrixRTCTransportMissingError("example.org"));
     });
   });
 });

src/state/CallViewModel/localMember/LocalTransport.ts

@@ -5,17 +5,11 @@ SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  type CallMembership,
-  type LivekitTransportConfig,
-} from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
-import { distinctUntilChanged, from, map, of, switchMap } from "rxjs";
 import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
-import { type Behavior } from "../../Behavior.ts";
-import { type Epoch, type ObservableScope } from "../../ObservableScope.ts";
 import { Config } from "../../../config/Config.ts";
 import {
   FailToGetOpenIdToken,
@@ -27,19 +21,12 @@ import {
   type SFUConfig,
   type OpenIDClientParts,
 } from "../../../livekit/openIDSFU.ts";
-import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
 import { customLivekitUrl } from "../../../settings/settings.ts";
 import { RtcTransportAutoDiscovery } from "./RtcTransportAutoDiscovery.ts";
 import { type MatrixRTCMode } from "../../../config/ConfigOptions.ts";
 
-/*
- * It figures out “which LiveKit focus URL/alias the local user should use,”
- * and ensures the SFU path is primed before advertising that choice.
- */
 interface Props {
-  scope: ObservableScope;
   ownMembershipIdentity: CallMembershipIdentityParts;
-  memberships$: Behavior<Epoch<CallMembership[]>>;
   client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
     OpenIDClientParts;
   // Used by the jwt service to create the livekit room and compute the livekit alias.
@@ -47,135 +34,65 @@ interface Props {
   matrixRTCMode: MatrixRTCMode;
 }
 
-// TODO livekit_alias-cleanup
-// 1. We need to move away from transports map to connections!!!
-//
-// 2. We need to stop sending livekit_alias all together
-//
-//
-// 1.
-// Transports are just the jwt service adress but do not contain the information which room on this transport to use.
-// That requires slot and roomId.
-//
-// We need one connection per room on the transport.
-//
-// We need an object that contains:
-// transport
-// roomId
-// slotId
-//
-// To map to the connections. Prosposal: `ConnectionIdentifier`
-//
-// 2.
-// We need to make sure we do not sent livekit_alias in sticky events and that we drop all code for sending state events!
-export interface LocalTransportWithSFUConfig {
-  transport: LivekitTransportConfig;
+export interface LocalTransport {
+  transport: LivekitTransport;
   sfuConfig: SFUConfig;
 }
 
-export function isLocalTransportWithSFUConfig(
-  obj: LivekitTransportConfig | LocalTransportWithSFUConfig,
-): obj is LocalTransportWithSFUConfig {
+export function isLocalTransport(
+  obj: LivekitTransport | LocalTransport,
+): obj is LocalTransport {
   return "transport" in obj && "sfuConfig" in obj;
 }
 
-export interface LocalTransport {
-  /**
-   * The transport to be advertised in our MatrixRTC membership. `null` when not
-   * yet fetched/validated.
-   */
-  advertised$: Behavior<LivekitTransportConfig | null>;
-  /**
-   * The transport to connect to and publish media on. `null` when not yet known
-   * or available.
-   */
-  active$: Behavior<LocalTransportWithSFUConfig | null>;
-}
-
 /**
- * Connects to the JWT service and determines the transports that the local member should use.
+ * Connects to the JWT service and determines the transport that the local member should use.
  *
  * @prop useOldJwtEndpoint Whether to set forceOldJwtEndpoint on the returned transport and to use the old JWT endpoint.
  * This is used when the connection manager needs to know if it has to use the legacy endpoint which implies a string concatenated rtcBackendIdentity.
  * (which is expected for non sticky event based rtc member events)
- * @returns The transport to advertise in the local MatrixRTC membership, along with the transport to actively publish media to.
+ * @returns The transport to advertise in our MatrixRTC membership and publish media on.
  * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
  */
-export const createLocalTransport$ = ({
-  scope,
-  memberships$,
+export async function getLocalTransport({
   ownMembershipIdentity,
   client,
   roomId,
   matrixRTCMode,
-}: Props): LocalTransport => {
+}: Props): Promise<LocalTransport> {
   const logger = rootLogger.getChild("[LocalTransport]");
-
-  const transportDiscovery = new RtcTransportAutoDiscovery({
+  const discovery = new RtcTransportAutoDiscovery({
     client: client,
     resolvedConfig: Config.get(),
     logger: logger,
   });
+  const customUrl = customLivekitUrl.value$.value;
 
-  // Get the preferred transport from the current deployment.
-  const discoveredTransport$ = from(
-    transportDiscovery.discoverPreferredTransport(),
-  );
+  // Respect the user's custom URL, if set
+  const transport: LivekitTransport | null = customUrl
+    ? { type: "livekit", livekit_service_url: customUrl }
+    : await discovery.discoverPreferredTransport();
 
-  const preferredConfig$ = customLivekitUrl.value$.pipe(
-    switchMap((customUrl) => {
-      if (customUrl) {
-        return of({
-          type: "livekit",
-          livekit_service_url: customUrl,
-        } as LivekitTransportConfig);
-      } else {
-        return discoveredTransport$;
-      }
-    }),
-    map((config) => {
-      if (!config) {
-        // Bubbled up from the preferredConfig$ observable.
-        throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
-      }
-      return config;
-    }),
-    distinctUntilChanged(areLivekitTransportsEqual),
-  );
+  if (transport === null)
+    throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
 
-  const preferredTransport$ = preferredConfig$.pipe(
-    switchMap(async (transport) => {
-      try {
-        return await doOpenIdAndJWTFromUrl(
-          transport,
-          matrixRTCMode,
-          ownMembershipIdentity,
-          roomId,
-          client,
-          logger,
-        );
-      } catch (e) {
-        logger.error(
-          `Failed to authenticate to transport ${transport.livekit_service_url}`,
-          e,
-        );
-        throw mapAuthErrorToUserFriendlyError(e);
-      }
-    }),
-  );
-
-  // Always publish on and advertise the preferred transport.
-  return {
-    advertised$: scope.behavior(
-      preferredTransport$.pipe(
-        map((t) => t.transport),
-        distinctUntilChanged(areLivekitTransportsEqual),
-      ),
-      null,
-    ),
-    active$: scope.behavior(preferredTransport$, null),
-  };
-};
+  try {
+    return await doOpenIdAndJWTFromUrl(
+      transport,
+      matrixRTCMode,
+      ownMembershipIdentity,
+      roomId,
+      client,
+      logger,
+    );
+  } catch (e) {
+    logger.error(
+      `Failed to authenticate to transport ${transport.livekit_service_url}`,
+      e,
+    );
+    throw mapAuthErrorToUserFriendlyError(e);
+  }
+}
 
 /**
  *  Utility to ensure the user can authenticate with the SFU.
@@ -193,13 +110,13 @@ export const createLocalTransport$ = ({
  *  @throws FailToGetOpenIdToken, NoMatrix2AuthorizationService
  */
 async function doOpenIdAndJWTFromUrl(
-  transport: LivekitTransportConfig,
+  transport: LivekitTransport,
   matrixRTCMode: MatrixRTCMode,
   membership: CallMembershipIdentityParts,
   roomId: string,
   client: Pick<MatrixClient, "_unstable_getRTCTransports"> & OpenIDClientParts,
   logger?: Logger,
-): Promise<LocalTransportWithSFUConfig> {
+): Promise<LocalTransport> {
   const sfuConfig = await getSFUConfigWithOpenID(
     client,
     membership,

src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.test.ts

@@ -16,7 +16,7 @@ import {
 import { MatrixError } from "matrix-js-sdk";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type Transport,
 } from "matrix-js-sdk/lib/matrixrtc";
 
@@ -28,12 +28,12 @@ import {
 
 type DiscoveryClient = RtcTransportAutoDiscoveryProps["client"];
 
-const backendTransport: LivekitTransportConfig = {
+const backendTransport: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://backend.example.org",
 };
 
-const configTransport: LivekitTransportConfig = {
+const configTransport: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://config.example.org",
 };

src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.ts

@@ -5,8 +5,8 @@ SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 import {
-  isLivekitTransportConfig,
-  type LivekitTransportConfig,
+  isLivekitTransport,
+  type LivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
 import { type Logger } from "matrix-js-sdk/lib/logger";
@@ -40,7 +40,7 @@ export class RtcTransportAutoDiscovery {
     this.logger = logger.getChild("[RtcTransportAutoDiscovery]");
   }
 
-  public async discoverPreferredTransport(): Promise<LivekitTransportConfig | null> {
+  public async discoverPreferredTransport(): Promise<LivekitTransport | null> {
     // 1) backend transports
     const backendTransport = await this.tryBackendTransports();
     if (backendTransport) {
@@ -67,7 +67,7 @@ export class RtcTransportAutoDiscovery {
    * This will not throw errors, but instead just log them and return null if the expected config is not found or malformed.
    * @private
    */
-  private async tryBackendTransports(): Promise<LivekitTransportConfig | null> {
+  private async tryBackendTransports(): Promise<LivekitTransport | null> {
     const client = this.client;
     // MSC4143: Attempt to fetch transports from backend.
     this.logger.info("First try to use getRTCTransports end point ...");
@@ -75,7 +75,7 @@ export class RtcTransportAutoDiscovery {
       const transportList = await doNetworkOperationWithRetry(async () =>
         client._unstable_getRTCTransports(),
       );
-      const first = transportList.find(isLivekitTransportConfig);
+      const first = transportList.find(isLivekitTransport);
       if (first) {
         return first;
       } else {
@@ -90,7 +90,7 @@ export class RtcTransportAutoDiscovery {
     return null;
   }
 
-  private tryConfigTransport(): LivekitTransportConfig | null {
+  private tryConfigTransport(): LivekitTransport | null {
     const url = this.resolvedConfig.livekit?.livekit_service_url;
     if (url) {
       return {

src/state/CallViewModel/remoteMembers/Connection.test.ts

@@ -30,7 +30,7 @@ import fetchMock from "fetch-mock";
 import EventEmitter from "events";
 import { type IOpenIDToken } from "matrix-js-sdk";
 import { logger, type Logger } from "matrix-js-sdk/lib/logger";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 
 import {
   Connection,
@@ -57,7 +57,7 @@ let fakeLocalParticipant: MockedObject<LocalParticipant>;
 
 const ROOM_ID = "!roomID:example.org";
 
-const livekitFocus: LivekitTransportConfig = {
+const livekitFocus: LivekitTransport = {
   livekit_service_url: "https://matrix-rtc.example.org/livekit/jwt",
   type: "livekit",
 };
@@ -228,9 +228,7 @@ describe("Start connection states", () => {
     capturedState = capturedStates.pop();
     if (capturedState instanceof Error) {
       expect(capturedState.message).toEqual("Something went wrong");
-      expect(connection.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
+      expect(connection.transport).toEqual(livekitFocus);
     } else {
       expect.fail("Expected FailedToStart state but got " + capturedState);
     }
@@ -290,9 +288,7 @@ describe("Start connection states", () => {
       expect(capturedState.cause.message).toContain(
         "Failed to look up user info from homeserver",
       );
-      expect(connection.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
+      expect(connection.transport).toEqual(livekitFocus);
     } else {
       expect.fail("Expected FailedToStart state but got " + capturedState);
     }
@@ -357,9 +353,7 @@ describe("Start connection states", () => {
       expect(capturedState.cause.message).toContain(
         "Failed to connect to livekit",
       );
-      expect(connection.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
+      expect(connection.transport).toEqual(livekitFocus);
     } else {
       expect.fail(
         "Expected FailedToStart state but got " + JSON.stringify(capturedState),

src/state/CallViewModel/remoteMembers/Connection.ts

@@ -22,7 +22,7 @@ import {
   type Track,
   type TrackPublication,
 } from "livekit-client";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, map } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
@@ -52,7 +52,7 @@ export interface ConnectionOpts {
   /** The identity parts to use on this connection */
   ownMembershipIdentity: CallMembershipIdentityParts;
   /** The media transport to connect to. */
-  transport: LivekitTransportConfig;
+  transport: LivekitTransport;
   /** The Matrix client to use for OpenID and SFU config requests. */
   client: OpenIDClientParts;
   /** The room ID this connection is associated with. */
@@ -107,7 +107,7 @@ export class Connection {
   /**
    * The media transport to connect to.
    */
-  public readonly transport: LivekitTransportConfig;
+  public readonly transport: LivekitTransport;
 
   public readonly livekitRoom: LivekitRoom;
 

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

@@ -16,7 +16,7 @@ import { logger, type Logger } from "matrix-js-sdk/lib/logger";
 // imported as inline to support worker when loaded from a cdn (cross domain)
 import E2EEWorker from "livekit-client/e2ee-worker?worker&inline";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 
 import { type ObservableScope } from "../../ObservableScope.ts";
 import { Connection } from "./Connection.ts";
@@ -44,7 +44,7 @@ import {
 export interface ConnectionFactory {
   createConnection(
     scope: ObservableScope,
-    transport: LivekitTransportConfig,
+    transport: LivekitTransport,
     ownMembershipIdentity: CallMembershipIdentityParts,
     logger: Logger,
     sfuConfig?: SFUConfig,
@@ -103,7 +103,7 @@ export class ECConnectionFactory implements ConnectionFactory {
    */
   public createConnection(
     scope: ObservableScope,
-    transport: LivekitTransportConfig,
+    transport: LivekitTransport,
     ownMembershipIdentity: CallMembershipIdentityParts,
     logger: Logger,
     sfuConfig?: SFUConfig,

src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts

@@ -6,8 +6,8 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { BehaviorSubject } from "rxjs";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { BehaviorSubject, NEVER } from "rxjs";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { type RemoteParticipant } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
 
@@ -20,16 +20,16 @@ import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import { type Connection } from "./Connection.ts";
 import { ownMemberMock, withTestScheduler } from "../../../utils/test.ts";
 import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
-import { constant, type Behavior } from "../../Behavior.ts";
+import { type Behavior } from "../../Behavior.ts";
 
 // Some test constants
 
-const TRANSPORT_1: LivekitTransportConfig = {
+const TRANSPORT_1: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
 };
 
-const TRANSPORT_2: LivekitTransportConfig = {
+const TRANSPORT_2: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.sample.com",
 };
@@ -47,7 +47,7 @@ beforeEach(() => {
   vi.mocked(fakeConnectionFactory).createConnection = vi
     .fn()
     .mockImplementation(
-      (scope: ObservableScope, transport: LivekitTransportConfig) => {
+      (scope: ObservableScope, transport: LivekitTransport) => {
         const mockConnection = {
           transport,
           remoteParticipants$: new BehaviorSubject([]),
@@ -74,7 +74,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
+        localTransport$: NEVER,
         remoteTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),
@@ -115,7 +115,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
+        localTransport$: NEVER,
         remoteTransports$: behavior("abcdef", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1], 1),
@@ -162,7 +162,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
+        localTransport$: NEVER,
         remoteTransports$: behavior("abc", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1, TRANSPORT_2], 1),
@@ -225,7 +225,7 @@ describe("connectionManagerData$ stream", () => {
   // Used in test to control fake connections' remoteParticipants$ streams
   let fakeRemoteParticipantsStreams: Map<string, Behavior<RemoteParticipant[]>>;
 
-  function keyForTransport(transport: LivekitTransportConfig): string {
+  function keyForTransport(transport: LivekitTransport): string {
     return `${transport.livekit_service_url}`;
   }
 
@@ -233,7 +233,7 @@ describe("connectionManagerData$ stream", () => {
     fakeRemoteParticipantsStreams = new Map();
 
     function getRemoteParticipantsFor(
-      transport: LivekitTransportConfig,
+      transport: LivekitTransport,
     ): Behavior<RemoteParticipant[]> {
       return (
         fakeRemoteParticipantsStreams.get(keyForTransport(transport)) ??
@@ -245,7 +245,7 @@ describe("connectionManagerData$ stream", () => {
     vi.mocked(fakeConnectionFactory).createConnection = vi
       .fn()
       .mockImplementation(
-        (scope: ObservableScope, transport: LivekitTransportConfig) => {
+        (scope: ObservableScope, transport: LivekitTransport) => {
           const fakeRemoteParticipants$ = new BehaviorSubject<
             RemoteParticipant[]
           >([]);
@@ -297,7 +297,7 @@ describe("connectionManagerData$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
+        localTransport$: NEVER,
         remoteTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),