Add snapshot coverage for all call layouts

Snapshotting the layout templates so that they get reviewed as a whole feels a little more straightforward than the existing tests.

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

@@ -44,9 +44,7 @@ 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: "scripts/layered.sh --ignore-pnpmfile"
-        env:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
       - name: Build Element Call
         run: pnpm run build:"$PACKAGE":"$BUILD_MODE"
         env:

.github/workflows/lint.yaml

@@ -19,9 +19,7 @@ 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: "scripts/layered.sh --ignore-pnpmfile"
-        env:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
       - name: Formatting
         run: "pnpm run format:check"
       - name: i18n

.github/workflows/test.yaml

@@ -21,9 +21,7 @@ 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: "scripts/layered.sh --ignore-pnpmfile"
-        env:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries
@@ -61,9 +59,7 @@ 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: scripts/layered.sh --ignore-pnpmfile
-        env:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+        run: pnpm install --frozen-lockfile --ignore-pnpmfile
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries

.gitignore

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

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,
-since it inherits the `--max-old-space-size` setting of
+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
 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,27 +306,8 @@ 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`, `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.
+`react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
+them external.
 
 ### Backend
 

backend/app-service-othersite.yaml

@@ -5,7 +5,7 @@ sender_localpart: "_lk_jwt_service"
 namespaces:
   users:
     - exclusive: false
-      regex: "@.*:synapse\\.othersite\\.m\\.localhost" # Cover all local users
+      regex: "@.*:homeserver-1" # Cover all local users
 # Required for Synapse to call POST /_matrix/app/v1/ping on this service.
 url: "http://auth-server-1:16080"
 # Enable membership look-ups via /is_joined.

backend/app-service.yaml

@@ -5,7 +5,7 @@ sender_localpart: "_lk_jwt_service"
 namespaces:
   users:
     - exclusive: false
-      regex: "@.*:synapse\\.m\\.localhost" # Cover all local users
+      regex: "@.*:homeserver" # Cover all local users
 # Required for Synapse to call POST /_matrix/app/v1/ping on this service.
 url: "http://auth-server:6080"
 # Enable membership look-ups via /is_joined.

backend/dev_livekit-othersite.yaml

@@ -6,11 +6,6 @@ rtc:
   port_range_start: 50300
   port_range_end: 50400
   use_external_ip: false
-  # Advertise the loopback address instead of the container IP, which is not
-  # routable from the host when Docker runs in a VM (colima, Docker Desktop).
-  # The browser then reaches the SFU through the published ports. Firefox
-  # ignores loopback candidates, so this only works in Chromium-based browsers.
-  node_ip: 127.0.0.1
 turn:
   enabled: false
   domain: localhost

backend/dev_livekit.yaml

@@ -6,11 +6,6 @@ rtc:
   port_range_start: 50100
   port_range_end: 50200
   use_external_ip: false
-  # Advertise the loopback address instead of the container IP, which is not
-  # routable from the host when Docker runs in a VM (colima, Docker Desktop).
-  # The browser then reaches the SFU through the published ports. Firefox
-  # ignores loopback candidates, so this only works in Chromium-based browsers.
-  node_ip: 127.0.0.1
 turn:
   enabled: false
   domain: localhost

component/ElementCall.module.css

@@ -34,18 +34,10 @@ component rather than a page makes. */
   -webkit-tap-highlight-color: transparent;
 }
 
-/* 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%;
+/* 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;
-  isolation: isolate;
+  block-size: 100%;
 }

component/api.ts

@@ -1,124 +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.
-*/
-
-/**
- * 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
- * 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:
+ * 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:
  *
  * - `html`, `body` and `:root` become the root element, which is what stands in
  *   for the document inside a host.
@@ -55,10 +55,9 @@ 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 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.
+ * 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.
  */
 export function scopeStylesToRoot(): Plugin {
   return {

component/dev/main.tsx

@@ -9,16 +9,6 @@ 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,37 +17,33 @@ Please see LICENSE in the repository root for full details.
  * host instead, or is confined to the container it is mounted in.
  */
 
-// The element defaults and custom properties every Element Call stylesheet
+// The design tokens, fonts and element defaults 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.
+// components inherit rather than compete with, and everything from Compound
+// sits in a `@layer`, which loses to unlayered rules either way.
 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";
@@ -66,8 +62,10 @@ import { RootElementProvider, useRootElement } from "../src/RootElementContext";
 import {
   configurationForIntent,
   componentProperties,
+  type UrlConfiguration,
   type UrlParams,
   UrlParamsProvider,
+  type UrlProperties,
   UserIntent,
   useUrlParams,
 } from "../src/UrlParams";
@@ -81,16 +79,102 @@ import { i18n } from "../src/utils/i18n";
 import { useTheme } from "../src/useTheme";
 import { useStableValue } from "../src/useStableValue";
 import styles from "./ElementCall.module.css";
-import { useComponentHostBridge } from "./host";
-import { type ElementCallProps } from "./api";
+import {
+  type ElementCallHandle,
+  type ElementCallHostBridge,
+  useComponentHostBridge,
+} from "./host";
 import { supportedLanguages, translationsBackend } from "./localization";
 
 // The languages Element Call can be shown in
 export { supportedLanguages } from "./localization";
-// 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";
+
+// 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;
+}
 
 /**
  * Prepares the things Element Call needs before it can be shown: translations,
@@ -237,38 +321,34 @@ export const ElementCall: FC<ElementCallProps> = ({
         <UrlParamsProvider value={params}>
           <div ref={setContainer} className={styles.root}>
             {ready && (
-              // 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
+              <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>
-              </div>
+                <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>
         </UrlParamsProvider>

component/package.json

@@ -25,10 +25,6 @@
       "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": [
@@ -38,8 +34,6 @@
     "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 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"],
+  // 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"],
   "exclude": []
 }

config/config.devenv.json

@@ -7,6 +7,7 @@
   },
   "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,6 +11,7 @@
   "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,6 +7,7 @@
   },
   "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,6 +7,7 @@
   },
   "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-dev.yml

@@ -3,8 +3,7 @@ networks:
 
 services:
   auth-service:
-    # Need to use rolling main until the `member_id` change has been released.
-    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
+    image: ghcr.io/element-hq/lk-jwt-service:0.7.0
     pull_policy: always
     hostname: auth-server
     environment:
@@ -34,8 +33,7 @@ services:
       - ecbackend
 
   auth-service-1:
-    # Need to use rolling main until the `member_id` change has been released.
-    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
+    image: ghcr.io/element-hq/lk-jwt-service:0.7.0
     pull_policy: always
     hostname: auth-server-1
     environment:

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

docs/agents/architecture.md

@@ -76,10 +76,4 @@ 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` / `@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`.
+  `matrix-js-sdk` / `livekit-client` subpath the externals list omits.

docs/linking.md

@@ -60,21 +60,6 @@ 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 the Matrix `room_id`.
+and identifies the room by a hashed identity instead of a `livekit_alias`.
 (Remote memberships always try the new endpoint first and fall back to the
 legacy one, so remote participants can be on either.)
 

locales/en/app.json

@@ -59,10 +59,10 @@
   "developer_mode": {
     "always_show_iphone_earpiece": "Show iPhone earpiece option on all platforms",
     "crypto_version": "Crypto version: {{version}}",
-    "custom_transport": {
-      "current": "Currently set to: ",
+    "custom_livekit_url": {
+      "current_url": "Currently set to: ",
       "from_config": "Currently, no overwrite is set. Url from config is used.",
-      "label": "Custom transport JSON",
+      "label": "Custom Livekit-url",
       "reset": "Reset overwrite",
       "save": "Save",
       "saving": "Saving..."

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 --max-old-space-size=16384 node_modules/vite/bin/vite.js build",
+    "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite 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",
@@ -103,8 +103,8 @@
     "livekit-client": "^2.18.1",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#robin/livekit-updates",
-    "matrix-widget-api": "^1.20.0",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+    "matrix-widget-api": "^1.18.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
     "oxfmt": "^0.66.0",
@@ -129,6 +129,7 @@
     "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/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", exact: true })
+        .getByRole("button", { name: "New conversation" })
         .click();
 
       await ewPage1.getByRole("menuitem", { name: "Start chat" }).click();

playwright/url-transport.spec.ts

@@ -1,421 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { expect, type Page, test } from "@playwright/test";
-
-import { SpaHelpers } from "./spa-helpers";
-
-const sfuUrl = "wss://matrix-rtc.m.localhost/livekit/sfu";
-const serviceUrl = "https://matrix-rtc.m.localhost/livekit/jwt";
-
-const otherHomeserver = {
-  base_url: "https://synapse.othersite.m.localhost",
-  server_name: "synapse.othersite.m.localhost",
-};
-const otherSfuUrl = "wss://matrix-rtc.othersite.m.localhost/livekit/sfu";
-
-interface Transport {
-  type: "livekit";
-  url?: string;
-  livekit_service_url?: string;
-}
-
-/**
- * The transport shapes a homeserver may advertise while migrating to the
- * latest MSC4195. `legacy` is what the e2e Synapse advertises on its own.
- */
-const shapes = {
-  url: { type: "livekit", url: sfuUrl },
-  both: { type: "livekit", url: sfuUrl, livekit_service_url: serviceUrl },
-  legacy: null,
-} satisfies Record<string, Transport | null>;
-type Shape = keyof typeof shapes;
-
-/** Which endpoint a page asks for its SFU tokens. */
-type Flow = "cs-api" | "service-legacy" | "service-default";
-
-const cases: {
-  hostShape: Shape;
-  guestShape: Shape;
-  hostFlows: Flow[];
-  guestFlows: Flow[];
-}[] = [
-  {
-    hostShape: "url",
-    guestShape: "url",
-    hostFlows: ["cs-api"],
-    guestFlows: ["cs-api"],
-  },
-  {
-    hostShape: "both",
-    guestShape: "both",
-    hostFlows: ["cs-api"],
-    guestFlows: ["cs-api"],
-  },
-  {
-    hostShape: "url",
-    guestShape: "legacy",
-    hostFlows: ["cs-api", "service-default"],
-    guestFlows: ["service-legacy", "cs-api"],
-  },
-];
-
-for (const { hostShape, guestShape, hostFlows, guestFlows } of cases) {
-  test(`One to one call with ${hostShape} host and ${guestShape} guest transport`, async ({
-    browser,
-    page,
-    browserName,
-  }) => {
-    skipOnFirefox(browserName);
-
-    // The host starts the call.
-    await advertiseTransport(page, shapes[hostShape]);
-    const hostRequests = recordAuthRequests(page);
-    await page.goto("/");
-    await SpaHelpers.createCall(page, "Androl", "HelloCall", true, "2_0");
-    const inviteLink = await SpaHelpers.getCallInviteLink(page);
-
-    // The guest joins.
-    const guestContext = await browser.newContext({ reducedMotion: "reduce" });
-    const guestPage = await guestContext.newPage();
-    await advertiseTransport(guestPage, shapes[guestShape]);
-    const guestRequests = recordAuthRequests(guestPage);
-    await SpaHelpers.joinCallFromInviteLink(
-      guestPage,
-      inviteLink,
-      "Pevara",
-      "2_0",
-    );
-
-    // Wait for the call to connect and render.
-    await SpaHelpers.expectVideoTilesCount(page, 2);
-    await SpaHelpers.expectVideoTilesCount(guestPage, 2);
-
-    // The host and guest ran through the expected flows.
-    expect(flowsOf(hostRequests)).toEqual(new Set(hostFlows));
-    expect(flowsOf(guestRequests)).toEqual(new Set(guestFlows));
-
-    // All requests succeeded and the SFU URL was set on C-S requests.
-    for (const request of [...hostRequests, ...guestRequests]) {
-      expect(request.status).toBe(200);
-      if (request.flow === "cs-api") expect(request.sfuUrl).toBe(sfuUrl);
-    }
-  });
-}
-
-test("Subscriber falls back to the JWT service when the homeserver lacks MSC4195", async ({
-  browser,
-  page,
-  browserName,
-}) => {
-  skipOnFirefox(browserName);
-
-  // The host starts the call with both transport shapes.
-  await advertiseTransport(page, shapes.both);
-  await page.goto("/");
-  await SpaHelpers.createCall(page, "Androl", "HelloCall", true, "2_0");
-  const inviteLink = await SpaHelpers.getCallInviteLink(page);
-
-  // The guest joins but their C-S requests fail.
-  const guestContext = await browser.newContext({ reducedMotion: "reduce" });
-  const guestPage = await guestContext.newPage();
-  await rejectCsApiTokens(guestPage);
-  const guestRequests = recordAuthRequests(guestPage);
-  await SpaHelpers.joinCallFromInviteLink(
-    guestPage,
-    inviteLink,
-    "Pevara",
-    "2_0",
-  );
-
-  // Wait for the call to connect and render.
-  await SpaHelpers.expectVideoTilesCount(page, 2);
-  await SpaHelpers.expectVideoTilesCount(guestPage, 2);
-
-  // The guest ran through all flows.
-  expect(flowsOf(guestRequests)).toEqual(
-    new Set<Flow>(["cs-api", "service-legacy", "service-default"]),
-  );
-
-  // The C-S token requests failed.
-  for (const request of guestRequests) {
-    expect(request.status).toBe(request.flow === "cs-api" ? 404 : 200);
-  }
-
-  // The C-S token requests preceeded the fallback request.
-  const flows = guestRequests.map((r) => r.flow);
-  expect(flows.indexOf("service-default")).toBeGreaterThan(
-    flows.indexOf("cs-api"),
-  );
-});
-
-test("Publisher shows an error when the homeserver lacks MSC4195", async ({
-  page,
-  browserName,
-}) => {
-  skipOnFirefox(browserName);
-
-  // The host tries to start a call with only the C-S transport shape available but
-  // their C-S requests fail.
-  await advertiseTransport(page, shapes.url);
-  await rejectCsApiTokens(page);
-  await page.goto("/");
-  await SpaHelpers.createCall(page, "Androl", "HelloCall", true, "2_0");
-
-  // We land on an error page.
-  await expect(
-    page.getByRole("heading", { name: "Something went wrong" }),
-  ).toBeVisible();
-  await expect(
-    page.getByText(
-      "The authorization service for your media server (SFU) is out of date.",
-    ),
-  ).toBeVisible();
-});
-
-test("Delegated leave on a url transport ends the membership when the guest drops", async ({
-  browser,
-  page,
-  browserName,
-}) => {
-  skipOnFirefox(browserName);
-
-  // The host starts the call.
-  await advertiseTransport(page, shapes.url);
-  await page.goto("/");
-  await SpaHelpers.createCall(page, "Androl", "HelloCall", true, "2_0");
-  const inviteLink = await SpaHelpers.getCallInviteLink(page);
-
-  // The guest joins.
-  const guestContext = await browser.newContext({ reducedMotion: "reduce" });
-  const guestPage = await guestContext.newPage();
-  await advertiseTransport(guestPage, shapes.url);
-  const delayedLeave = recordDelayedLeave(guestPage);
-  const delegations = recordDelegations(guestPage);
-  await SpaHelpers.joinCallFromInviteLink(
-    guestPage,
-    inviteLink,
-    "Pevara",
-    "2_0",
-  );
-
-  // Wait for the call to connect and render.
-  await SpaHelpers.expectVideoTilesCount(page, 2);
-  await SpaHelpers.expectVideoTilesCount(guestPage, 2);
-
-  // The guest handed its delayed leave to the homeserver, after probing it for
-  // delegation support with bodiless requests.
-  await expect
-    .poll(() => delegations.at(-1))
-    .toEqual({ status: 200, sfuUrl, delayId: delayedLeave.delayId });
-  const probes = delegations.slice(0, -1);
-  expect(probes.length).toBeGreaterThan(0);
-  for (const probe of probes) expect(probe).toEqual({ status: 401 });
-
-  // The delay is long enough that a leave within the window below cannot come
-  // from the delayed event expiring on its own.
-  expect(delayedLeave.delayMs).toBeGreaterThan(60_000);
-
-  // The guest drops without leaving.
-  await guestPage.reload();
-
-  // The host eventually sees the guest go once the delayed event fires.
-  await expect(page.getByTestId("videoTile")).toHaveCount(1, {
-    timeout: 30_000,
-  });
-});
-
-test("Subscribers get tokens for a remote homeserver's SFU over federation", async ({
-  browser,
-  page,
-  browserName,
-}) => {
-  skipOnFirefox(browserName);
-
-  // The host lives on the other homeserver and publishes on its SFU.
-  await useHomeserver(page, otherHomeserver);
-  await advertiseTransport(page, { type: "livekit", url: otherSfuUrl });
-  const hostRequests = recordAuthRequests(page);
-  await page.goto("/");
-  await SpaHelpers.createCall(page, "Androl", "HelloCall", true, "2_0");
-  const inviteLink = await SpaHelpers.getCallInviteLink(page);
-
-  // The guest lives on the default homeserver and joins over federation.
-  const guestContext = await browser.newContext({ reducedMotion: "reduce" });
-  const guestPage = await guestContext.newPage();
-  await advertiseTransport(guestPage, shapes.url);
-  const guestRequests = recordAuthRequests(guestPage);
-  await SpaHelpers.joinCallFromInviteLink(
-    guestPage,
-    `${inviteLink}&viaServers=${otherHomeserver.server_name}`,
-    "Pevara",
-    "2_0",
-  );
-
-  // Wait for the call to connect and render.
-  await SpaHelpers.expectVideoTilesCount(page, 2);
-  await SpaHelpers.expectVideoTilesCount(guestPage, 2);
-
-  // Each side got a token for its own SFU and for the other side's SFU, all
-  // through its own homeserver.
-  for (const requests of [hostRequests, guestRequests]) {
-    expect(flowsOf(requests)).toEqual(new Set<Flow>(["cs-api"]));
-    expect(new Set(requests.map((r) => r.sfuUrl))).toEqual(
-      new Set([sfuUrl, otherSfuUrl]),
-    );
-    for (const request of requests) expect(request.status).toBe(200);
-  }
-});
-
-/** Skips the calling test if we're running on Firefox. */
-function skipOnFirefox(browserName: string): void {
-  test.skip(
-    browserName === "firefox",
-    "The is test is not working on firefox CI environment. No mic/audio device inputs so cam/mic are disabled",
-  );
-}
-
-/** Points this page's Element Call at another homeserver. */
-async function useHomeserver(
-  page: Page,
-  homeserver: typeof otherHomeserver,
-): Promise<void> {
-  await page.route("**/config.json", async (route) => {
-    const response = await route.fetch();
-    const config = (await response.json()) as Record<string, unknown>;
-    await route.fulfill({
-      response,
-      json: {
-        ...config,
-        default_server_config: { "m.homeserver": homeserver },
-      },
-    });
-  });
-}
-
-/**
- * Maps recorded requests to a set of flows. Publisher and subscriber connections
- * start concurrently so using arrays for comparison isn't convenient.
- */
-function flowsOf(requests: AuthRequest[]): Set<Flow> {
-  return new Set(requests.map((r) => r.flow));
-}
-
-/**
- * Replaces the transports the homeserver advertises to this page. The real
- * response is fetched first so its CORS headers carry over.
- */
-async function advertiseTransport(
-  page: Page,
-  transport: Transport | null,
-): Promise<void> {
-  if (transport === null) return;
-  await page.route("**/org.matrix.msc4143/rtc/transports", async (route) => {
-    if (route.request().method() !== "GET") return route.continue();
-    const response = await route.fetch();
-    await route.fulfill({ response, json: { rtc_transports: [transport] } });
-  });
-}
-
-/**
- * Makes the homeserver look like one without MSC4195: its `get_token`
- * endpoint answers as Synapse does for an unknown route.
- */
-async function rejectCsApiTokens(page: Page): Promise<void> {
-  await page.route("**/rtc/livekit/get_token", async (route) => {
-    if (route.request().method() !== "POST") return route.continue();
-    await route.fulfill({
-      status: 404,
-      json: { errcode: "M_UNRECOGNIZED", error: "Unrecognized request" },
-      headers: { "Access-Control-Allow-Origin": "*" },
-    });
-  });
-}
-
-/** A recorded delayed leave event. */
-interface DelayedLeave {
-  delayMs?: number;
-  delayId?: string;
-}
-
-/** Records the delayed leave event the page schedules on joining. */
-function recordDelayedLeave(page: Page): DelayedLeave {
-  const delayedLeave: DelayedLeave = {};
-  page.on("response", (response) => {
-    const delay = new URL(response.request().url()).searchParams.get(
-      "org.matrix.msc4140.delay",
-    );
-    if (delay === null || response.status() !== 200) return;
-    delayedLeave.delayMs = Number(delay);
-    response
-      .json()
-      .then((body: { delay_id: string }) => {
-        delayedLeave.delayId = body.delay_id;
-      })
-      .catch(() => {});
-  });
-  return delayedLeave;
-}
-
-/** A recorded delegation request for a delayed leave event. */
-interface Delegation {
-  status: number;
-  sfuUrl?: string;
-  delayId?: string;
-}
-
-/** Records requests to the MSC4195 `delegate_delayed_leave` endpoint. */
-function recordDelegations(page: Page): Delegation[] {
-  const delegations: Delegation[] = [];
-  page.on("response", (response) => {
-    const request = response.request();
-    if (
-      request.method() !== "POST" ||
-      !request.url().endsWith("/rtc/livekit/delegate_delayed_leave")
-    )
-      return;
-    const body = request.postDataJSON() as {
-      url: string;
-      delay_id: string;
-    } | null;
-    delegations.push({
-      status: response.status(),
-      ...(body && { sfuUrl: body.url, delayId: body.delay_id }),
-    });
-  });
-  return delegations;
-}
-
-/** A recorded token request. */
-interface AuthRequest {
-  flow: Flow;
-  status: number;
-  /** The SFU a request to the MSC4195 `get_token` endpoint asked for. */
-  sfuUrl?: string;
-}
-
-/** Records token requests. */
-function recordAuthRequests(page: Page): AuthRequest[] {
-  const requests: AuthRequest[] = [];
-  page.on("response", (response) => {
-    const request = response.request();
-    if (request.method() !== "POST") return;
-    const url = request.url();
-    if (url.endsWith("/rtc/livekit/get_token")) {
-      requests.push({
-        flow: "cs-api",
-        status: response.status(),
-        sfuUrl: (request.postDataJSON() as { url: string }).url,
-      });
-    } else if (url.endsWith("/livekit/jwt/sfu/get")) {
-      requests.push({ flow: "service-legacy", status: response.status() });
-    } else if (url.endsWith("/livekit/jwt/get_token")) {
-      requests.push({ flow: "service-default", status: response.status() });
-    }
-  });
-  return requests;
-}

playwright/widget/test-helpers.ts

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

pnpm-lock.yaml

@@ -191,11 +191,11 @@ importers:
         specifier: ^1.9.1
         version: 1.9.2
       matrix-js-sdk:
-        specifier: github:matrix-org/matrix-js-sdk#robin/livekit-updates
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/621b225e227dc6dc2b1c9d53413235d8999e6d54
+        specifier: github:matrix-org/matrix-js-sdk#develop
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a
       matrix-widget-api:
-        specifier: ^1.20.0
-        version: 1.20.0
+        specifier: ^1.18.0
+        version: 1.19.0
       node-stdlib-browser:
         specifier: ^1.3.1
         version: 1.3.1
@@ -268,6 +268,9 @@ 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))
@@ -1191,8 +1194,8 @@ packages:
       '@types/dom-mediacapture-transform': ^0.1.9
       livekit-client: ^1.12.0 || ^2.1.0
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0':
-    resolution: {integrity: sha512-NtLzNDTEfNASBjNCTGZHuk7N0jrQhS6Zx2CM857rCHZYYh/rpbKGQNrJ7azktm4S1P5Jy3WU3nwJTGohGw26qQ==}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0':
+    resolution: {integrity: sha512-E826Hy1rG26LanPjtSsOiVRcVoHfSgPgj2r2Xsb5RPScpaKi9XJADQ0u3dNjRCitZPX4oyLNl1FDd5AfDlmIwQ==}
     engines: {node: '>= 18'}
 
   '@mdx-js/react@3.1.1':
@@ -3656,8 +3659,8 @@ packages:
   constants-browserify@1.0.0:
     resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==}
 
-  content-type@3.1.1:
-    resolution: {integrity: sha512-GW4qUsfFo59d0HbUibDlWv5wPz+vAAcaTWbKIuKCf0JkC7wWkSyf8f13IpXn5JkeMlB2P8iTSSIjwXljorg2vA==}
+  content-type@3.0.0:
+    resolution: {integrity: sha512-AIi5H6p0xk5uknXcN3/rmhP8jgp69OfSe/JuKiQAFprJ7UGw7mwj7m4XcmDzlrnJDG+cGpphAINGdU3g3g7kDw==}
     engines: {node: '>=22'}
 
   convert-source-map@2.0.0:
@@ -4462,6 +4465,10 @@ 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
@@ -4673,13 +4680,13 @@ 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/621b225e227dc6dc2b1c9d53413235d8999e6d54:
-    resolution: {gitHosted: true, integrity: sha512-HeTjG3NPGeCMkfPfGPaYl1QBnn7XYRiC1NpBgOxflujzQmTBNTPshGSTzMsMQKH/hpfi8QtjPE1SddNzzax3vA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/621b225e227dc6dc2b1c9d53413235d8999e6d54}
-    version: 42.3.0
+  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
     engines: {node: '>=22.0.0'}
 
-  matrix-widget-api@1.20.0:
-    resolution: {integrity: sha512-qwFP37rgns7mPesM5/vvZgknzb+kvyRB5BISv5sCuBxsGMceMr+Kogf7OkjRxBXdMCPBFuf6gIuYRe5S+lpzQw==}
+  matrix-widget-api@1.19.0:
+    resolution: {integrity: sha512-Qe7L6G1mQJphBC47/Bzp5ljPIK1UARgLiuGgS+/KmEs/eaNHkQ3+ArD0/0kvMV+d6kCGAZ9OKRqsnuPjizI+tw==}
 
   md5.js@1.3.5:
     resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==}
@@ -4696,6 +4703,14 @@ 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'}
@@ -4880,8 +4895,8 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-retry@8.0.1:
-    resolution: {integrity: sha512-NAigyu8hfvJe7MsS18mnc4is0MZtau3QMdBklaJKK23oBQb6occO3UPM3vHmTckW8KhfyjMZaUOqdTFEYliHgg==}
+  p-retry@8.0.0:
+    resolution: {integrity: sha512-kFVqH1HxOHp8LupNsOys7bSV09VYTRLxarH/mokO4Rqhk6wGi70E0jh4VzvVGXfEVNggHoHLAMWsQqHyU1Ey9A==}
     engines: {node: '>=22'}
 
   p-try@2.2.0:
@@ -5889,6 +5904,9 @@ 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:
@@ -7083,7 +7101,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.9.0': {}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {}
 
   '@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
@@ -9145,7 +9163,7 @@ snapshots:
 
   constants-browserify@1.0.0: {}
 
-  content-type@3.1.1: {}
+  content-type@3.0.0: {}
 
   convert-source-map@2.0.0: {}
 
@@ -10016,6 +10034,10 @@ 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
@@ -10227,21 +10249,21 @@ snapshots:
 
   matrix-events-sdk@0.0.1: {}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/621b225e227dc6dc2b1c9d53413235d8999e6d54:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
     dependencies:
       '@babel/runtime': 8.0.0
-      '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0
+      '@matrix-org/matrix-sdk-crypto-wasm': 18.5.0
       another-json: 0.2.0
       bs58: 6.0.0
-      content-type: 3.1.1
+      content-type: 3.0.0
       loglevel: 1.9.2
       matrix-events-sdk: 0.0.1
-      matrix-widget-api: 1.20.0
-      p-retry: 8.0.1
+      matrix-widget-api: 1.19.0
+      p-retry: 8.0.0
       sdp-transform: 3.0.0
       unhomoglyph: 1.0.6
 
-  matrix-widget-api@1.20.0:
+  matrix-widget-api@1.19.0:
     dependencies:
       '@types/events': 3.0.3
       events: 3.3.0
@@ -10264,6 +10286,12 @@ 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: {}
@@ -10556,7 +10584,7 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  p-retry@8.0.1:
+  p-retry@8.0.0:
     dependencies:
       is-network-error: 1.3.2
 
@@ -11624,6 +11652,13 @@ 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,11 +9,9 @@ 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, 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
+ * 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
  * 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
@@ -35,9 +33,6 @@ 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 = [
@@ -45,8 +40,6 @@ const MUST_BE_EXTERNAL = [
   "react-dom",
   "matrix-js-sdk",
   "livekit-client",
-  "@vector-im/compound-web",
-  "@vector-im/compound-design-tokens",
 ];
 
 const isTestFile = (name) =>
@@ -56,7 +49,6 @@ 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

@@ -1,73 +0,0 @@
-#!/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

@@ -1,62 +0,0 @@
-#!/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/UrlConfiguration.ts

@@ -1,242 +0,0 @@
-/*
-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,36 +9,47 @@ 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 {
-  BackgroundStyle,
-  configurationForIntent,
-  HeaderStyle,
-  type UrlConfiguration,
-  UserIntent,
-} from "./UrlConfiguration";
+import { platform } from "./Platform";
 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
@@ -155,6 +166,109 @@ 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 {
@@ -240,6 +354,97 @@ 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,24 +5,19 @@ 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 element defaults and
-custom properties its own stylesheets build on top of.
+/* The styles Element Call needs wherever it is shown: the design tokens, fonts
+and element defaults 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. 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.
+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.
 
 Nothing here should depend on where it lands relative to Element Call's
 component stylesheets: the bundler decides that, and it decides differently for
@@ -30,7 +25,16 @@ 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/components/CallFooterViewModel.test.ts

@@ -6,12 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { describe, expect, it, vi } from "vitest";
-import { BehaviorSubject } from "rxjs";
 
 import { testScope, mockMuteStates, mockMediaDevices } from "../utils/test";
 import { constant } from "../state/Behavior";
 import type { CallViewModel } from "../state/CallViewModel/CallViewModel";
-import type { Alignment, Layout } from "../state/layout-types";
+import type { Layout } from "../state/layout-types";
 import type { SpotlightTileViewModel } from "../state/TileViewModel";
 import type { DeviceLabel } from "../state/MediaDevices";
 import { createCallFooterViewModel } from "./CallFooterViewModel";
@@ -65,10 +64,6 @@ function buildMinimalCallViewModel(layout: Layout): CallViewModel {
 const gridLayout: Layout = {
   type: "grid",
   grid: [],
-  spotlightAlignment$: new BehaviorSubject<Alignment>({
-    inline: "end",
-    block: "end",
-  }),
   setVisibleTiles: (_: number) => {},
 };
 

src/config/ConfigOptions.ts

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

@@ -5,28 +5,25 @@ 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 { render } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
 
-import { arrangeTiles, type Bounds } from "./CallLayout";
+import { type CallLayout } from "./CallLayout";
 import { makeGridLayout } from "./GridLayout";
 import { makeSpotlightLandscapeLayout } from "./SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "./SpotlightPortraitLayout";
-import { type DragCallback, type LayoutProps } from "./Grid";
+import { type LayoutProps } from "./Grid";
 import { constant } from "../state/Behavior";
-import {
-  type Alignment,
-  type GridLayout,
-  type SpotlightLandscapeLayout,
-  type SpotlightPortraitLayout,
-} from "../state/layout-types";
+import { type Alignment } from "../state/layout-types";
 import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
 import {
   GridTileViewModel,
   SpotlightTileViewModel,
   type TileViewModel,
 } from "../state/TileViewModel";
+import { makeOneOnOneMobileLayout } from "./OneOnOneMobileLayout";
+import { makeSpotlightExpandedLayout } from "./SpotlightExpandedLayout";
+import { makeOneOnOneDesktopLayout } from "./OneOnOneDesktopLayout";
 
 // Grid supplies these hooks to the layouts it renders; on their own the
 // layouts have no grid to report to
@@ -36,152 +33,105 @@ vi.mock("./Grid", async (importOriginal) => ({
   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`,
-    );
+const minBounds$ = constant({ width: 800, height: 800 });
 
-    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 spotlight = {
+  vm: new SpotlightTileViewModel(
+    constant([]),
+    constant(false),
+    constant("solid"),
+  ),
+  alignment$: constant<Alignment>({ inline: "end", block: "end" }),
+  onDrag: () => {},
+};
+const grid = Array.from(
+  { length: 3 },
+  () => new GridTileViewModel(constant({} as UserMediaViewModel)),
 );
-const tiles = (): GridTileViewModel[] =>
-  Array.from({ length: 3 }, () => new GridTileViewModel(constant(media)));
+const pip = {
+  alignment$: constant<Alignment>({ inline: "end", block: "end" }),
+  onDrag: () => {},
+  vm: { id: "pip" } as GridTileViewModel,
+  size$: constant("sm" as const),
+};
 
-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,
+  children,
   ...props
-}) => {
-  drags.set(id, onDrag);
-  return (
-    <div data-testid={`slot-${id}`} {...props}>
-      {model instanceof GridTileViewModel ? model.id : "spotlight"}
-    </div>
-  );
-};
+}) => (
+  <div data-testid={`slot-${id}`} {...props}>
+    {children}
+  </div>
+);
 
-function slotIds(): string[] {
-  return screen
-    .getAllByTestId(/^slot-/)
-    .map((slot) => slot.textContent ?? "")
-    .filter((id) => id !== "spotlight");
+function snapshotLayout<Model>(layout: CallLayout<Model>, model: Model): void {
+  const {
+    foreground,
+    scrolling: Scrolling,
+    fixed: Fixed,
+  } = layout({ minBounds$ });
+  const scrollingLayer = <Scrolling model={model} Slot={Slot} />;
+  const fixedLayer = <Fixed model={model} Slot={Slot} />;
+  const { container } = render(
+    foreground === "fixed" ? (
+      <>
+        {scrollingLayer}
+        {fixedLayer}
+      </>
+    ) : (
+      <>
+        {fixedLayer}
+        {scrollingLayer}
+      </>
+    ),
+  );
+  expect(container).toMatchSnapshot();
 }
+
+test("grid layout", () =>
+  snapshotLayout(makeGridLayout, {
+    type: "grid",
+    spotlight,
+    grid,
+    setVisibleTiles: () => {},
+  }));
+
+test("spotlight landscape layout", () =>
+  snapshotLayout(makeSpotlightLandscapeLayout, {
+    type: "spotlight-landscape",
+    spotlight,
+    grid,
+    setVisibleTiles: () => {},
+  }));
+
+test("spotlight portrait layout", () =>
+  snapshotLayout(makeSpotlightPortraitLayout, {
+    type: "spotlight-portrait",
+    spotlight,
+    grid,
+    setVisibleTiles: () => {},
+  }));
+
+test("spotlight expanded layout", () =>
+  snapshotLayout(makeSpotlightExpandedLayout, {
+    type: "spotlight-expanded",
+    spotlight: spotlight.vm,
+    pip,
+  }));
+
+test("one-on-one desktop layout", () =>
+  snapshotLayout(makeOneOnOneDesktopLayout, {
+    type: "one-on-one-desktop",
+    spotlight: { id: "spotlight" } as GridTileViewModel,
+    pip,
+  }));
+
+test("one-on-one mobile layout", () =>
+  snapshotLayout(makeOneOnOneMobileLayout, {
+    type: "one-on-one-mobile",
+    spotlight: spotlight.vm,
+    pip,
+  }));

src/grid/Grid.tsx

@@ -40,6 +40,7 @@ import { useMergedRefs } from "../useMergedRefs";
 import { TileWrapper } from "./TileWrapper";
 import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
 import { useInitial } from "../useInitial";
+import { type DragCallback } from "../state/layout-types";
 
 const MAX_ANIMATED_TILES = 50; // Capped for performance reasons
 
@@ -83,7 +84,10 @@ interface DragState {
   cursorY: number;
 }
 
-interface SlotProps<Model> extends Omit<ComponentProps<"div">, "onDrag"> {
+export interface SlotProps<Model> extends Omit<
+  ComponentProps<"div">,
+  "onDrag"
+> {
   id: string;
   model: Model;
   onDrag?: DragCallback;
@@ -181,27 +185,6 @@ export interface TileProps<Model, R extends HTMLElement> {
   model: Model;
 }
 
-interface Drag {
-  /**
-   * The X coordinate of the dragged tile in grid space.
-   */
-  x: number;
-  /**
-   * The Y coordinate of the dragged tile in grid space.
-   */
-  y: number;
-  /**
-   * The X coordinate of the dragged tile, as a scalar of the grid width.
-   */
-  xRatio: number;
-  /**
-   * The Y coordinate of the dragged tile, as a scalar of the grid height.
-   */
-  yRatio: number;
-}
-
-export type DragCallback = (drag: Drag) => void;
-
 interface LayoutMemoProps<
   LayoutModel,
   TileModel,
@@ -464,13 +447,13 @@ export function Grid<
       )
       .catch(logger.error);
 
-    if (endOfGesture)
-      callback({
-        x: tileX,
-        y: tileY,
-        xRatio: tileX / (gridBounds.width - tile.width),
-        yRatio: tileY / (gridBounds.height - tile.height),
-      });
+    callback({
+      x: tileX,
+      y: tileY,
+      xRatio: tileX / (gridBounds.width - tile.width),
+      yRatio: tileY / (gridBounds.height - tile.height),
+      endOfGesture,
+    });
   };
 
   // Callback for useDrag. We could call useDrag here, but the default

src/grid/GridLayout.tsx

@@ -8,15 +8,21 @@ Please see LICENSE in the repository root for full details.
 import {
   type CSSProperties,
   type ReactNode,
-  useCallback,
   useMemo,
+  type FC,
+  type ComponentType,
 } from "react";
 
 import { type GridLayout as GridLayoutModel } from "../state/layout-types.ts";
 import styles from "./GridLayout.module.css";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
-import { type DragCallback, useUpdateLayout, useVisibleTiles } from "./Grid";
+import { type SlotProps, useUpdateLayout, useVisibleTiles } from "./Grid";
 import { useBehavior } from "../useBehavior";
+import {
+  type SpotlightTileViewModel,
+  type TileViewModel,
+} from "../state/TileViewModel.ts";
+import { type FloatingTile } from "../state/FloatingTile.ts";
 
 interface GridCSSProperties extends CSSProperties {
   "--gap": string;
@@ -24,6 +30,27 @@ interface GridCSSProperties extends CSSProperties {
   "--height": string;
 }
 
+interface SpotlightSlotProps {
+  model: FloatingTile & { vm: SpotlightTileViewModel };
+  Slot: ComponentType<SlotProps<TileViewModel>>;
+}
+
+const SpotlightSlot: FC<SpotlightSlotProps> = ({ model, Slot }) => {
+  useUpdateLayout();
+  const alignment = useBehavior(model.alignment$);
+
+  return (
+    <Slot
+      className={styles.slot}
+      id="spotlight"
+      model={model.vm}
+      onDrag={model.onDrag}
+      data-block-alignment={alignment.block}
+      data-inline-alignment={alignment.inline}
+    />
+  );
+};
+
 /**
  * An implementation of the "grid" layout, in which all participants are shown
  * together in a scrolling grid.
@@ -37,32 +64,10 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   // lives
   fixed: function GridLayoutFixed({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
-    const alignment = useBehavior(model.spotlightAlignment$);
-
-    const onDragSpotlight: DragCallback = useCallback(
-      ({ 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$],
-    );
-
     return (
       <div ref={ref} className={styles.fixed}>
         {model.spotlight && (
-          <Slot
-            className={styles.slot}
-            id="spotlight"
-            model={model.spotlight}
-            onDrag={onDragSpotlight}
-            data-block-alignment={alignment.block}
-            data-inline-alignment={alignment.inline}
-          />
+          <SpotlightSlot model={model.spotlight} Slot={Slot} />
         )}
       </div>
     );

src/grid/OneOnOneDesktopLayout.tsx

@@ -6,13 +6,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, useCallback, useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 import classNames from "classnames";
 
 import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneDesktopLayout.module.css";
-import { type DragCallback, useUpdateLayout } from "./Grid";
+import { useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
 
 /**
@@ -37,21 +37,12 @@ export const makeOneOnOneDesktopLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     const { width, height } = useBehavior(minBounds$);
-    const pipAlignment = useBehavior(model.pipAlignment$);
+    const pipAlignment = useBehavior(model.pip.alignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),
       [width, height],
     );
 
-    const onDragLocalTile: DragCallback = useCallback(
-      ({ xRatio, yRatio }) =>
-        model.pipAlignment$.next({
-          block: yRatio < 0.5 ? "start" : "end",
-          inline: xRatio < 0.5 ? "start" : "end",
-        }),
-      [model.pipAlignment$],
-    );
-
     return (
       <div ref={ref} className={styles.layer}>
         <Slot
@@ -62,9 +53,9 @@ export const makeOneOnOneDesktopLayout: CallLayout<
         >
           <Slot
             className={classNames(styles.slot, styles.local)}
-            id={model.pip.id}
-            model={model.pip}
-            onDrag={onDragLocalTile}
+            id={model.pip.vm.id}
+            model={model.pip.vm}
+            onDrag={model.pip.onDrag}
             data-block-alignment={pipAlignment.block}
             data-inline-alignment={pipAlignment.inline}
           />

src/grid/OneOnOneMobileLayout.tsx

@@ -6,14 +6,43 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, useCallback } from "react";
+import { type ComponentType, type FC, type ReactNode } from "react";
 import classNames from "classnames";
 
 import { type OneOnOneMobileLayout as OneOnOneMobileLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
 import styles from "./OneOnOneMobileLayout.module.css";
-import { type DragCallback, useUpdateLayout } from "./Grid";
+import { type SlotProps, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
+import { type FloatingTile } from "../state/FloatingTile.ts";
+import {
+  type GridTileViewModel,
+  type TileViewModel,
+} from "../state/TileViewModel.ts";
+import { type Behavior } from "../state/Behavior.ts";
+
+interface PipSlotProps {
+  model: FloatingTile & { vm: GridTileViewModel; size$: Behavior<"sm" | "lg"> };
+  Slot: ComponentType<SlotProps<TileViewModel>>;
+}
+
+const PipSlot: FC<PipSlotProps> = ({ model, Slot }) => {
+  useUpdateLayout();
+  const size = useBehavior(model.size$);
+  const alignment = useBehavior(model.alignment$);
+
+  return (
+    <Slot
+      className={classNames(styles.pip)}
+      id={model.vm.id}
+      model={model.vm}
+      onDrag={model.onDrag}
+      data-size={size}
+      data-block-alignment={alignment.block}
+      data-inline-alignment={alignment.inline}
+    />
+  );
+};
 
 /**
  * An implementation of the "one-on-one" layout for mobile platforms, in which
@@ -44,30 +73,9 @@ export const makeOneOnOneMobileLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    const pipSize = useBehavior(model.pipSize$);
-    const pipAlignment = useBehavior(model.pipAlignment$);
-    const onDragLocalTile: DragCallback = useCallback(
-      ({ xRatio, yRatio }) =>
-        model.pipAlignment$.next({
-          block: yRatio < 0.5 ? "start" : "end",
-          inline: xRatio < 0.5 ? "start" : "end",
-        }),
-      [model.pipAlignment$],
-    );
-
     return (
       <div ref={ref} className={styles.layer}>
-        {model.pip && (
-          <Slot
-            className={classNames(styles.pip)}
-            id={model.pip.id}
-            model={model.pip}
-            onDrag={onDragLocalTile}
-            data-size={pipSize}
-            data-block-alignment={pipAlignment.block}
-            data-inline-alignment={pipAlignment.inline}
-          />
-        )}
+        {model.pip && <PipSlot model={model.pip} Slot={Slot} />}
       </div>
     );
   },

src/grid/SpotlightExpandedLayout.tsx

@@ -5,13 +5,39 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, useCallback } from "react";
+import { type ReactNode, type ComponentType, type FC } from "react";
 
 import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
-import { type DragCallback, useUpdateLayout } from "./Grid";
+import { type SlotProps, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
 import { useBehavior } from "../useBehavior";
+import { type FloatingTile } from "../state/FloatingTile.ts";
+import {
+  type GridTileViewModel,
+  type TileViewModel,
+} from "../state/TileViewModel.ts";
+
+interface PipSlotProps {
+  model: FloatingTile & { vm: GridTileViewModel };
+  Slot: ComponentType<SlotProps<TileViewModel>>;
+}
+
+const PipSlot: FC<PipSlotProps> = ({ model, Slot }) => {
+  useUpdateLayout();
+  const alignment = useBehavior(model.alignment$);
+
+  return (
+    <Slot
+      className={styles.pip}
+      id={model.vm.id}
+      model={model.vm}
+      onDrag={model.onDrag}
+      data-block-alignment={alignment.block}
+      data-inline-alignment={alignment.inline}
+    />
+  );
+};
 
 /**
  * An implementation of the "expanded spotlight" layout, in which the spotlight
@@ -28,7 +54,6 @@ export const makeSpotlightExpandedLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-
     return (
       <div ref={ref} className={styles.layer}>
         <Slot
@@ -46,29 +71,9 @@ export const makeSpotlightExpandedLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    const pipAlignment = useBehavior(model.pipAlignment$);
-
-    const onDragPip: DragCallback = useCallback(
-      ({ xRatio, yRatio }) =>
-        model.pipAlignment$.next({
-          block: yRatio < 0.5 ? "start" : "end",
-          inline: xRatio < 0.5 ? "start" : "end",
-        }),
-      [model.pipAlignment$],
-    );
-
     return (
       <div ref={ref} className={styles.layer}>
-        {model.pip && (
-          <Slot
-            className={styles.pip}
-            id={model.pip.id}
-            model={model.pip}
-            onDrag={onDragPip}
-            data-block-alignment={pipAlignment.block}
-            data-inline-alignment={pipAlignment.inline}
-          />
-        )}
+        {model.pip && <PipSlot model={model.pip} Slot={Slot} />}
       </div>
     );
   },

src/grid/SpotlightLandscapeLayout.tsx

@@ -40,7 +40,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
           <Slot
             className={styles.slot}
             id="spotlight"
-            model={model.spotlight}
+            model={model.spotlight.vm}
           />
         </div>
         <div className={styles.grid} />
@@ -59,7 +59,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
 
     return (
       <div ref={ref} className={styles.layer}>
-        <SpotlightSlot media$={model.spotlight.media$} />
+        <SpotlightSlot media$={model.spotlight.vm.media$} />
         <div className={styles.grid}>
           {model.grid.map((m) => (
             <Slot key={m.id} className={styles.slot} id={m.id} model={m} />

src/grid/SpotlightPortraitLayout.tsx

@@ -43,7 +43,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
           <Slot
             className={styles.slot}
             id="spotlight"
-            model={model.spotlight}
+            model={model.spotlight.vm}
           />
         </div>
       </div>
@@ -65,7 +65,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
       width,
       model.grid.length,
     );
-    const withIndicators = useBehavior(model.spotlight.media$).length > 1;
+    const withIndicators = useBehavior(model.spotlight.vm.media$).length > 1;
 
     return (
       <div

src/grid/__snapshots__/CallLayout.test.tsx.snap

@@ -0,0 +1,186 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`grid layout 1`] = `
+<div>
+  <div
+    class="_scrolling_e8555d"
+    style="width: 800px; --gap: 20px; --width: 370px; --height: 277px;"
+  >
+    <div
+      class="_slot_e8555d"
+      data-testid="slot-0"
+    />
+    <div
+      class="_slot_e8555d"
+      data-testid="slot-1"
+    />
+    <div
+      class="_slot_e8555d"
+      data-testid="slot-2"
+    />
+  </div>
+  <div
+    class="_fixed_e8555d"
+  >
+    <div
+      class="_slot_e8555d"
+      data-block-alignment="end"
+      data-inline-alignment="end"
+      data-testid="slot-spotlight"
+    />
+  </div>
+</div>
+`;
+
+exports[`one-on-one desktop layout 1`] = `
+<div>
+  <div
+    class="_layer_185815"
+  >
+    <div
+      class="_container_185815"
+      data-testid="slot-spotlight"
+      style="width: 760px; height: 570px;"
+    >
+      <div
+        class="_slot_185815 _local_185815"
+        data-block-alignment="end"
+        data-inline-alignment="end"
+        data-testid="slot-pip"
+      />
+    </div>
+  </div>
+  <div />
+</div>
+`;
+
+exports[`one-on-one mobile layout 1`] = `
+<div>
+  <div
+    class="_layer_c81c30"
+  >
+    <div
+      class="_spotlight_c81c30"
+      data-testid="slot-spotlight"
+    />
+  </div>
+  <div
+    class="_layer_c81c30"
+  >
+    <div
+      class="_pip_c81c30"
+      data-block-alignment="end"
+      data-inline-alignment="end"
+      data-size="sm"
+      data-testid="slot-pip"
+    />
+  </div>
+</div>
+`;
+
+exports[`spotlight expanded layout 1`] = `
+<div>
+  <div
+    class="_layer_e70191"
+  >
+    <div
+      class="_spotlight_e70191"
+      data-testid="slot-spotlight"
+    />
+  </div>
+  <div
+    class="_layer_e70191"
+  >
+    <div
+      class="_pip_e70191"
+      data-block-alignment="end"
+      data-inline-alignment="end"
+      data-testid="slot-pip"
+    />
+  </div>
+</div>
+`;
+
+exports[`spotlight landscape layout 1`] = `
+<div>
+  <div
+    class="_layer_29809c"
+  >
+    <div
+      class="_spotlight_29809c"
+    >
+      <div
+        class="_slot_29809c"
+        data-testid="slot-spotlight"
+      />
+    </div>
+    <div
+      class="_grid_29809c"
+    />
+  </div>
+  <div
+    class="_layer_29809c"
+  >
+    <div
+      class="_spotlight_29809c"
+    />
+    <div
+      class="_grid_29809c"
+    >
+      <div
+        class="_slot_29809c"
+        data-testid="slot-0"
+      />
+      <div
+        class="_slot_29809c"
+        data-testid="slot-1"
+      />
+      <div
+        class="_slot_29809c"
+        data-testid="slot-2"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`spotlight portrait layout 1`] = `
+<div>
+  <div
+    class="_layer_065bbc"
+    style="--grid-gap: 20px; --grid-tile-width: 370px; --grid-tile-height: 277px;"
+  >
+    <div
+      class="_spotlight_065bbc"
+    />
+    <div
+      class="_grid_065bbc"
+    >
+      <div
+        class="_slot_065bbc"
+        data-testid="slot-0"
+      />
+      <div
+        class="_slot_065bbc"
+        data-testid="slot-1"
+      />
+      <div
+        class="_slot_065bbc"
+        data-testid="slot-2"
+      />
+    </div>
+  </div>
+  <div
+    class="_layer_065bbc"
+  >
+    <div
+      class="_spotlight_065bbc"
+    >
+      <div
+        class="_slot_065bbc"
+        data-testid="slot-spotlight"
+      />
+    </div>
+  </div>
+</div>
+`;

src/index.css

@@ -7,24 +7,10 @@ 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.
-
-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. */
+and are not loaded when a host embeds Element Call as a component. */
 
 @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/auth/csApi.ts

@@ -1,76 +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 MatrixClient } from "matrix-js-sdk";
-import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
-
-import { extractFullConfigFromToken, type SFUConfig } from "./types.ts";
-import { doNetworkOperationWithRetry } from "../../utils/matrix.ts";
-
-// TODO: This should come from the `MatrixRTCSession`s slot description instead
-// of being hardcoded here. (the legacy flow hardcodes it as well)
-const SLOT_ID = "m.call#ROOM";
-
-export type ClientGetTokenParts = Pick<
-  MatrixClient,
-  "_unstable_getLivekitToken"
->;
-
-export interface GetSFUConfigParams {
-  client: ClientGetTokenParts;
-  membership: CallMembershipIdentityParts;
-  url: string;
-  roomId: string;
-}
-
-export async function getSFUConfig({
-  client,
-  membership,
-  url,
-  roomId,
-}: GetSFUConfigParams): Promise<SFUConfig> {
-  const res = await doNetworkOperationWithRetry(async () =>
-    client._unstable_getLivekitToken({
-      url,
-      room_id: roomId,
-      slot_id: "m.call#ROOM",
-      member_id: membership.memberId,
-    }),
-  );
-  return extractFullConfigFromToken({ url, jwt: res.jwt });
-}
-
-export type ClientDelegationParts = Pick<
-  MatrixClient,
-  "_unstable_delegateDelayedLeave" | "baseUrl"
->;
-
-export interface DelegateDelayedLeaveParams {
-  client: ClientDelegationParts;
-  membership: CallMembershipIdentityParts;
-  url: string;
-  roomId: string;
-  delayId: string;
-}
-
-export async function delegateDelayedLeave({
-  client,
-  membership,
-  url,
-  roomId,
-  delayId,
-}: DelegateDelayedLeaveParams): Promise<void> {
-  await doNetworkOperationWithRetry(async () =>
-    client._unstable_delegateDelayedLeave({
-      url,
-      room_id: roomId,
-      slot_id: SLOT_ID,
-      member_id: membership.memberId,
-      delay_id: delayId,
-    }),
-  );
-}

src/livekit/auth/index.ts

@@ -1,143 +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 CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
-import { type Logger } from "matrix-js-sdk/lib/logger";
-
-import { MatrixError } from "matrix-js-sdk";
-import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import * as openID from "./openID";
-import * as csApi from "./csApi";
-import { type SFUConfig } from "./types";
-import { NoMatrix2AuthorizationService } from "../../utils/errors";
-
-export type { ClientOpenIDParts } from "./openID";
-export type { ClientGetTokenParts, ClientDelegationParts } from "./csApi";
-export type * from "./types";
-
-/**
- * Checks whether an error means "this homeserver does not implement the
- * (unstable) MSC4195 endpoints".
- *
- * MSC4195 documents `M_NOT_FOUND` for this, but a homeserver without support
- * answers with whatever it uses for unknown endpoints (Synapse: 404 with
- * `M_UNRECOGNIZED`), so we accept any 404 as "unsupported".
- * @param e The error to check.
- */
-function isEndpointUnsupported(e: unknown): boolean {
-  return (
-    e instanceof MatrixError &&
-    (e.httpStatus === 404 ||
-      e.errcode === "M_NOT_FOUND" ||
-      e.errcode === "M_UNRECOGNIZED")
-  );
-}
-
-export interface GetSFUConfigParams {
-  client: csApi.ClientGetTokenParts & openID.ClientOpenIDParts;
-  membership: CallMembershipIdentityParts;
-  transport: UnstableLivekitTransport;
-  roomId: string;
-  role: "publisher" | "subscriber";
-  logger: Logger;
-}
-
-export async function getSFUConfig({
-  client,
-  membership,
-  transport,
-  roomId,
-  role,
-  logger,
-}: GetSFUConfigParams): Promise<SFUConfig> {
-  if ("url" in transport) {
-    try {
-      return await csApi.getSFUConfig({
-        client,
-        membership,
-        url: transport.url,
-        roomId,
-      });
-    } catch (e) {
-      if (isEndpointUnsupported(e)) {
-        const mayFallBack =
-          role === "subscriber" && "livekit_service_url" in transport;
-        if (mayFallBack) {
-          logger.warn(
-            `Homeserver does not support the MSC4195 get_token endpoint, falling back to the OpenID flow with service ${transport.livekit_service_url}`,
-          );
-          // Fall through
-        } else {
-          logger.error(
-            `Homeserver does not support the MSC4195 get_token endpoint, cannot get token for transport ${transport.url}`,
-          );
-          throw new NoMatrix2AuthorizationService(e as Error);
-        }
-      } else {
-        throw e;
-      }
-    }
-  }
-
-  return await openID.getSFUConfig({
-    client,
-    membership,
-    serviceUrl: transport.livekit_service_url,
-    roomId,
-    role,
-    logger,
-  });
-}
-
-export interface DelegateDelayedLeaveParams {
-  client: csApi.ClientDelegationParts & openID.ClientOpenIDParts;
-  membership: CallMembershipIdentityParts;
-  transport: UnstableLivekitTransport;
-  roomId: string;
-  delayId: string;
-  logger: Logger;
-}
-
-export async function delegateDelayedLeave({
-  client,
-  membership,
-  transport,
-  roomId,
-  delayId,
-  logger,
-}: DelegateDelayedLeaveParams): Promise<void> {
-  if ("url" in transport) {
-    try {
-      await csApi.delegateDelayedLeave({
-        client,
-        membership,
-        url: transport.url,
-        roomId,
-        delayId,
-      });
-    } catch (e) {
-      if (isEndpointUnsupported(e))
-        logger.error(
-          "Server misconfigured: transport contains a 'url' field but server does not support the MSC4195 delegate_delayed_leave endpoint",
-        );
-      throw e;
-    }
-  } else {
-    // This will technically cause the service to issue a new JWT token, but
-    // it's safe to discard. We're only interested in triggering delegation.
-    await openID.getSFUConfig({
-      client,
-      membership,
-      serviceUrl: transport.livekit_service_url,
-      roomId,
-      role: "publisher",
-      delayEndpointBaseUrl: client.baseUrl,
-      delayId,
-      logger,
-    });
-  }
-}

src/livekit/auth/types.ts

@@ -1,79 +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.
-*/
-
-/**
- * Configuration and access tokens provided by the SFU on successful authentication.
- */
-export interface SFUConfig {
-  /**
-   * The WebSocket URL of the LiveKit SFU. This is what we connect the LiveKit
-   * room to. Note that this is NOT the JWT service URL
-   * (`livekit_service_url`): the legacy JWT service returns this URL as part of
-   * its response, while the CS-Api based flow requires us to know it upfront.
-   */
-  url: string;
-  jwt: string;
-  livekitAlias: string;
-  // NOTE: Currently unused.
-  livekitIdentity: string;
-}
-
-/**
- * Decoded details from the JWT.
- */
-interface SFUJWTPayload {
-  /**
-   * Expiration time for the JWT.
-   * Note: This value is in seconds since Unix epoch.
-   */
-  exp: number;
-  /**
-   * Name of the instance which authored the JWT
-   */
-  iss: string;
-  /**
-   * Time at which the JWT can start to be used.
-   * Note: This value is in seconds since Unix epoch.
-   */
-  nbf: number;
-  /**
-   * Subject. The Livekit alias in this context.
-   */
-  sub: string;
-  /**
-   * The set of permissions for the user.
-   */
-  video: {
-    canPublish: boolean;
-    canSubscribe: boolean;
-    room: string;
-    roomJoin: boolean;
-  };
-}
-
-/**
- * Complements the SFU websocket url and the JWT with the information encoded in
- * the JWT payload itself.
- * @param sfuConfig The SFU websocket url and the JWT to connect with.
- * @returns The full SFU config, including the LiveKit alias and identity.
- */
-export function extractFullConfigFromToken(sfuConfig: {
-  url: string;
-  jwt: string;
-}): SFUConfig {
-  const [, payloadStr] = sfuConfig.jwt.split(".");
-  const payload = JSON.parse(global.atob(payloadStr)) as SFUJWTPayload;
-  return {
-    jwt: sfuConfig.jwt,
-    url: sfuConfig.url,
-    livekitAlias: payload.video.room,
-    // NOTE: Currently unused.
-    // Probably also not helpful since we now compute the backendIdentity on joining the call so we can use it for the encryption manager.
-    // The only reason for us to know it locally is to connect the right users with the lk world. (and to set our own keys)
-    livekitIdentity: payload.sub,
-  };
-}

src/livekit/openIDSFU.test.ts

@@ -17,40 +17,21 @@ import {
 import fetchMock from "fetch-mock";
 import { MatrixError } from "matrix-js-sdk";
 
-import {
-  getSFUConfig,
-  type GetSFUConfigParams,
-  type ClientOpenIDParts,
-} from "./openID";
-import { testJWTToken } from "../../utils/test-fixtures";
-import { ownMemberMock } from "../../utils/test";
-import { FailToGetOpenIdToken } from "../../utils/errors";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { getSFUConfigWithOpenID, type OpenIDClientParts } from "./openIDSFU";
+import { testJWTToken } from "../utils/test-fixtures";
+import { ownMemberMock } from "../utils/test";
+import { FailToGetOpenIdToken } from "../utils/errors";
 
-const serviceUrl = "https://sfu.example.org";
+const sfuUrl = "https://sfu.example.org";
 
-const delayParams = {
-  delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
-  delayId: "mock_delay_id",
-};
-
-describe("getSFUConfig", () => {
-  let matrixClient: MockedObject<ClientOpenIDParts>;
-  let params: GetSFUConfigParams;
+describe("getSFUConfigWithOpenID", () => {
+  let matrixClient: MockedObject<OpenIDClientParts>;
   beforeEach(() => {
     fetchMock.catch(404);
     matrixClient = {
       getOpenIdToken: vitest.fn(),
       getDeviceId: vitest.fn(),
     };
-    params = {
-      client: matrixClient,
-      membership: ownMemberMock,
-      serviceUrl: "https://sfu.example.org",
-      roomId: "!example_room_id",
-      role: "subscriber",
-      logger,
-    };
   });
   afterEach(() => {
     vitest.clearAllMocks();
@@ -61,13 +42,18 @@ describe("getSFUConfig", () => {
     fetchMock.post("https://sfu.example.org/sfu/get", () => {
       return {
         status: 200,
-        body: { url: serviceUrl, jwt: testJWTToken },
+        body: { url: sfuUrl, jwt: testJWTToken },
       };
     });
-    const config = await getSFUConfig(params);
+    const config = await getSFUConfigWithOpenID(
+      matrixClient,
+      ownMemberMock,
+      "https://sfu.example.org",
+      "!example_room_id",
+    );
     expect(config).toEqual({
       jwt: testJWTToken,
-      url: serviceUrl,
+      url: sfuUrl,
       livekitIdentity: "@me:example.org:ABCDEF",
       livekitAlias: "!example_room_id",
     });
@@ -85,7 +71,12 @@ describe("getSFUConfig", () => {
       };
     });
     try {
-      await getSFUConfig(params);
+      await getSFUConfigWithOpenID(
+        matrixClient,
+        ownMemberMock,
+        "https://sfu.example.org",
+        "!example_room_id",
+      );
     } catch (ex: unknown) {
       expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
       expect((ex as FailToGetOpenIdToken).cause).toBeInstanceOf(MatrixError);
@@ -125,14 +116,23 @@ describe("getSFUConfig", () => {
 
         return {
           status: 200,
-          body: { url: serviceUrl, jwt: testJWTToken },
+          body: { url: sfuUrl, jwt: testJWTToken },
         };
       },
       { overwriteRoutes: true },
     );
 
-    // Note: Assuming getSFUConfig eventually calls getLiveKitJWT
-    const config = await getSFUConfig({ ...params, ...delayParams });
+    // Note: Assuming getSFUConfigWithOpenID eventually calls getLiveKitJWT
+    const config = await getSFUConfigWithOpenID(
+      matrixClient,
+      ownMemberMock,
+      "https://sfu.example.org",
+      "!example_room_id",
+      {
+        delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
+        delayId: "mock_delay_id",
+      },
+    );
 
     expect(config.jwt).toBe(testJWTToken);
     expect(callCount).toBe(2);
@@ -153,7 +153,7 @@ describe("getSFUConfig", () => {
         ) {
           return {
             status: 200,
-            body: { url: serviceUrl, jwt: testJWTToken },
+            body: { url: sfuUrl, jwt: testJWTToken },
           };
         }
         return {
@@ -164,12 +164,21 @@ describe("getSFUConfig", () => {
       { overwriteRoutes: true },
     );
 
-    const config = await getSFUConfig({ ...params, ...delayParams });
+    const config = await getSFUConfigWithOpenID(
+      matrixClient,
+      ownMemberMock,
+      "https://sfu.example.org",
+      "!example_room_id",
+      {
+        delayEndpointBaseUrl: "https://homeserverserver.org/cs_api",
+        delayId: "mock_delay_id",
+      },
+    );
 
     // Prüfe das Ergebnis
     expect(config).toMatchObject({
       jwt: testJWTToken,
-      url: serviceUrl,
+      url: sfuUrl,
     });
 
     void (await fetchMock.flush());
@@ -195,7 +204,16 @@ describe("getSFUConfig", () => {
       };
     });
     try {
-      await getSFUConfig({ ...params, ...delayParams });
+      await getSFUConfigWithOpenID(
+        matrixClient,
+        ownMemberMock,
+        "https://sfu.example.org",
+        "!example_room_id",
+        {
+          delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
+          delayId: "mock_delay_id",
+        },
+      );
     } catch (ex) {
       expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
       expect((ex as FailToGetOpenIdToken).cause).toBeInstanceOf(MatrixError);
@@ -233,7 +251,7 @@ describe("getSFUConfig", () => {
     fetchMock.post("https://sfu.example.org/get_token", () => {
       return {
         status: 200,
-        body: { url: serviceUrl, jwt: testJWTToken },
+        body: { url: sfuUrl, jwt: testJWTToken },
       };
     });
     fetchMock.post("https://sfu.example.org/sfu/get", () => {
@@ -243,7 +261,16 @@ describe("getSFUConfig", () => {
       };
     });
     try {
-      await getSFUConfig({ ...params, ...delayParams });
+      await getSFUConfigWithOpenID(
+        matrixClient,
+        ownMemberMock,
+        "https://sfu.example.org",
+        "!example_room_id",
+        {
+          delayEndpointBaseUrl: "https://matrix.homeserverserver.org",
+          delayId: "mock_delay_id",
+        },
+      );
     } catch (ex) {
       expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
       expect((ex as FailToGetOpenIdToken).cause).toEqual(
@@ -282,13 +309,18 @@ describe("getSFUConfig", () => {
     fetchMock.post("https://sfu.example.org/sfu/get", () => {
       return {
         status: 200,
-        body: { url: serviceUrl, jwt: testJWTToken },
+        body: { url: sfuUrl, jwt: testJWTToken },
       };
     });
-    const config = await getSFUConfig({ ...params, ...delayParams });
+    const config = await getSFUConfigWithOpenID(
+      matrixClient,
+      ownMemberMock,
+      "https://sfu.example.org",
+      "!example_room_id",
+    );
     expect(config).toEqual({
       jwt: testJWTToken,
-      url: serviceUrl,
+      url: sfuUrl,
       livekitIdentity: "@me:example.org:ABCDEF",
       livekitAlias: "!example_room_id",
     });

src/livekit/openIDSFU.ts

@@ -13,64 +13,95 @@ import {
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 
-import { FailToGetOpenIdToken } from "../../utils/errors";
-import { doNetworkOperationWithRetry } from "../../utils/matrix";
-import { Config } from "../../config/Config";
-import { extractFullConfigFromToken, type SFUConfig } from "./types";
+import {
+  FailToGetOpenIdToken,
+  NoMatrix2AuthorizationService,
+} from "../utils/errors";
+import { doNetworkOperationWithRetry } from "../utils/matrix";
+import { Config } from "../config/Config";
+import { MatrixRTCMode } from "../config/ConfigOptions";
+
+/**
+ * Configuration and access tokens provided by the SFU on successful authentication.
+ */
+export interface SFUConfig {
+  url: string;
+  jwt: string;
+  livekitAlias: string;
+  // NOTE: Currently unused.
+  livekitIdentity: string;
+}
+
+/**
+ * Decoded details from the JWT.
+ */
+interface SFUJWTPayload {
+  /**
+   * Expiration time for the JWT.
+   * Note: This value is in seconds since Unix epoch.
+   */
+  exp: number;
+  /**
+   * Name of the instance which authored the JWT
+   */
+  iss: string;
+  /**
+   * Time at which the JWT can start to be used.
+   * Note: This value is in seconds since Unix epoch.
+   */
+  nbf: number;
+  /**
+   * Subject. The Livekit alias in this context.
+   */
+  sub: string;
+  /**
+   * The set of permissions for the user.
+   */
+  video: {
+    canPublish: boolean;
+    canSubscribe: boolean;
+    room: string;
+    roomJoin: boolean;
+  };
+}
 
 // The bits we need from MatrixClient
-export type ClientOpenIDParts = Pick<
+export type OpenIDClientParts = Pick<
   MatrixClient,
   "getOpenIdToken" | "getDeviceId"
 >;
 
-export interface GetSFUConfigParams {
-  client: ClientOpenIDParts;
-  /**
-   * Our own membership identity parts used to send to the JWT service.
-   */
-  membership: CallMembershipIdentityParts;
-  /**
-   * The base URL of the LiveKit JWT service.
-   */
-  serviceUrl: string;
-  /**
-   * The room ID used in the request. This is NOT the livekit_alias. The JWT
-   * service will provide the alias. It maps Matrix room IDs to LiveKit aliases.
-   */
-  roomId: string;
-  /**
-   * Whether we want to publish or only subscribe on this transport.
-   */
-  role: "publisher" | "subscriber";
-  /**
-   * The base URL of the Matrix homeserver, for delayed leave delegation.
-   */
-  delayEndpointBaseUrl?: string;
-  /**
-   * The delay ID of the leave event to be delegated to the JWT service.
-   */
-  delayId?: string;
-  logger: Logger;
-}
-
 /**
  * Gets a bearer token from the homeserver and then use it to authenticate
  * to the matrix RTC backend in order to get acces to the SFU.
  * It has built-in retry for calls to the homeserver with a backoff policy.
+ * @param client The Matrix client
+ * @param membership Our own membership identity parts used to send to jwt service.
+ * @param serviceUrl The URL of the livekit SFU service
+ * @param roomId The room id used in the jwt request. This is NOT the livekit_alias. The jwt service will provide the alias. It maps matrix room ids <-> Livekit aliases.
+ * @param opts Additional options to modify which endpoint with which data will be used to acquire the jwt token.
+ * @param opts.matrixRTCMode Determines which version of the JWT endpoint to use, which affects whether the
+ * RTC backend identity is based on string concatenation (legacy) or a hash (Matrix 2.0).
+ * This function by default uses whatever is possible with the current jwt service installed next to the SFU.
+ * For remote connections this does not matter, since we will not publish there we can rely on the newest option.
+ * @param opts.delayEndpointBaseUrl The URL of the matrix homeserver.
+ * @param opts.delayId The delay id used for the jwt service to manage.
+ * @param logger optional logger.
  * @returns Object containing the token information
  * @throws FailToGetOpenIdToken
  */
-export async function getSFUConfig({
-  client,
-  membership,
-  serviceUrl,
-  roomId,
-  role,
-  delayEndpointBaseUrl,
-  delayId,
-  logger,
-}: GetSFUConfigParams): Promise<SFUConfig> {
+export async function getSFUConfigWithOpenID(
+  client: OpenIDClientParts,
+  membership: CallMembershipIdentityParts,
+  serviceUrl: string,
+  roomId: string,
+  opts?: {
+    matrixRTCMode?: MatrixRTCMode;
+    delayEndpointBaseUrl?: string;
+    delayId?: string;
+  },
+  logger?: Logger,
+): Promise<SFUConfig> {
   let openIdToken: IOpenIDToken;
   try {
     openIdToken = await doNetworkOperationWithRetry(async () =>
@@ -81,50 +112,82 @@ export async function getSFUConfig({
       error instanceof Error ? error : new Error("Unknown error"),
     );
   }
-  logger.debug("Got openID token", openIdToken);
+  logger?.debug("Got openID token", openIdToken);
   let sfuConfig: { url: string; jwt: string } | undefined;
 
-  let endpoint: "default" | "legacy";
-  switch (role) {
-    case "publisher":
-      // When publishing a legacy transport (one with a `livekit_service_url`),
-      // subscribers will expect our participant identity to use the legacy
-      // `@user_id:device_id` format. Only the legacy JWT service endpoint
-      // assigns identities in this format, so we must use it.
-      endpoint = "legacy";
-      break;
-    case "subscriber":
-      // Use the default endpoint as it's more likely to allow remote access.
-      endpoint = "default";
-      break;
+  const tryBothJwtEndpoints = opts?.matrixRTCMode === undefined; // This is for SFUs where we do not publish.
+
+  const forceMatrix2Jwt = opts?.matrixRTCMode === MatrixRTCMode.Matrix_2_0;
+
+  // We want to start using the new endpoint (with optional delay delegation)
+  // if we can use both or if we are forced to use the new one.
+  if (tryBothJwtEndpoints || forceMatrix2Jwt) {
+    try {
+      logger?.info(
+        `Trying to get JWT via default endpoint for focus ${serviceUrl}...`,
+      );
+      const sfuConfig = await getLiveKitJWT(
+        membership,
+        serviceUrl,
+        roomId,
+        openIdToken,
+        opts?.delayEndpointBaseUrl,
+        opts?.delayId,
+      );
+
+      return extractFullConfigFromToken(sfuConfig);
+    } catch (e) {
+      logger?.debug(`Failed fetching jwt with matrix 2.0 endpoint:`, e);
+      // Make this throw a hard error in case we force the matrix2.0 endpoint.
+      if (forceMatrix2Jwt) {
+        throw new NoMatrix2AuthorizationService(e as Error);
+      }
+    }
   }
 
+  // DEPRECATED
+  // here we either have a sfuConfig or we already exited because of `if (forceMatrix2) throw ...`
+  // The only case we can get into this condition is, if `forceMatrix2` is `false`
   try {
-    logger.info(
-      `Trying to get JWT with ${endpoint} endpoint for focus ${serviceUrl}...`,
+    logger?.info(
+      `Trying to get JWT with legacy endpoint for focus ${serviceUrl}...`,
     );
-    sfuConfig = await (
-      endpoint === "legacy" ? getLiveKitJWTLegacy : getLiveKitJWT
-    )(
-      membership,
+    sfuConfig = await getLiveKitJWTLegacy(
+      membership.deviceId,
       serviceUrl,
       roomId,
       openIdToken,
-      delayEndpointBaseUrl,
-      delayId,
+      opts?.delayEndpointBaseUrl,
+      opts?.delayId,
     );
-    logger.info(`Got JWT from call's active focus URL.`);
+    logger?.info(`Got JWT from call's active focus URL.`);
     return extractFullConfigFromToken(sfuConfig);
-  } catch (e) {
-    logger.error(`Failed fetching jwt with ${endpoint} endpoint:`, e);
+  } catch (ex) {
     throw new FailToGetOpenIdToken(
-      e instanceof Error ? e : new Error(`Unknown error ${e}`),
+      ex instanceof Error ? ex : new Error(`Unknown error ${ex}`),
     );
   }
 }
 
+function extractFullConfigFromToken(sfuConfig: {
+  url: string;
+  jwt: string;
+}): SFUConfig {
+  const [, payloadStr] = sfuConfig.jwt.split(".");
+  const payload = JSON.parse(global.atob(payloadStr)) as SFUJWTPayload;
+  return {
+    jwt: sfuConfig.jwt,
+    url: sfuConfig.url,
+    livekitAlias: payload.video.room,
+    // NOTE: Currently unused.
+    // Probably also not helpful since we now compute the backendIdentity on joining the call so we can use it for the encryption manager.
+    // The only reason for us to know it locally is to connect the right users with the lk world. (and to set our own keys)
+    livekitIdentity: payload.sub,
+  };
+}
+
 async function getLiveKitJWTLegacy(
-  membership: CallMembershipIdentityParts,
+  deviceId: string,
   livekitServiceURL: string,
   matrixRoomId: string,
   openIDToken: IOpenIDToken,
@@ -158,7 +221,7 @@ async function getLiveKitJWTLegacy(
         // However, the livekit room alias is provided as part of the JWT payload.
         room: matrixRoomId,
         openid_token: openIDToken,
-        device_id: membership.deviceId,
+        device_id: deviceId,
         ...delayParts,
       }),
     });
@@ -198,7 +261,7 @@ class NotSupportedError extends Error {
   }
 }
 
-async function getLiveKitJWT(
+export async function getLiveKitJWT(
   membership: CallMembershipIdentityParts,
   livekitServiceURL: string,
   matrixRoomId: string,

src/room/CallEventAudioRenderer.test.tsx

@@ -17,7 +17,7 @@ import {
 import { act } from "react";
 import { type RoomMember } from "matrix-js-sdk";
 import {
-  type UnstableLivekitTransport,
+  type LivekitTransport,
   type CallMembership,
 } from "matrix-js-sdk/lib/matrixrtc";
 
@@ -46,7 +46,7 @@ vitest.mock("../useAudioContext");
 vitest.mock("../soundUtils");
 vitest.mock("../rtcSessionHelpers", async (importOriginal) => ({
   ...(await importOriginal()),
-  makeTransport: (): [UnstableLivekitTransport] => [exampleTransport],
+  makeTransport: (): [LivekitTransport] => [exampleTransport],
 }));
 
 afterEach(() => {

src/room/InCallView.tsx

@@ -694,19 +694,15 @@ export const InCallView: FC<InCallViewProps> = ({
             tab={settingsTab}
             onTabChange={setSettingsTab}
             developerSettingsVm={developerSettingsVm}
-            livekitRooms={allConnections.map(
-              ({ livekitRoom: room, livekitAlias, transport, role }) => ({
-                room,
-                livekitAlias,
-                role,
-                url:
-                  // It should be relatively clear to the user which kind of URL
-                  // this is, based on the scheme (ws:// vs. http://)
-                  "url" in transport
-                    ? transport.url
-                    : transport.livekit_service_url,
-              }),
-            )}
+            livekitRooms={allConnections
+              .getConnections()
+              .map((connectionItem) => ({
+                room: connectionItem.livekitRoom,
+                livekitAlias: connectionItem.livekitAlias,
+                // TODO compute is local or tag it in the livekit room items already
+                isLocal: undefined,
+                url: connectionItem.transport.livekit_service_url,
+              }))}
           />
         </>
       )}

src/settings/DeveloperSettingsTab.test.tsx

@@ -18,14 +18,14 @@ import {
 } from "./DeveloperSettingsTab";
 import { outOfCallDeveloperSettingsTabViewModel } from "./DeveloperSettingsTabViewModel";
 import { createStaticViewModel } from "../state/ViewModel";
+import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
 import {
-  customTransport as customTransportSetting,
+  customLivekitUrl as customLivekitUrlSetting,
   enableExtendedLivekitLogs as enableExtendedLivekitLogsSetting,
   matrixRTCMode as matrixRTCModeSetting,
 } from "./settings";
 import { MatrixRTCMode } from "../config/ConfigOptions";
 import { mockConfig } from "../utils/test";
-import { getSFUConfig } from "../livekit/auth";
 
 // Mock url params hook to avoid environment-dependent snapshot churn.
 vi.mock("../UrlParams", () => ({
@@ -36,8 +36,8 @@ vi.mock("../UrlParams", () => ({
 }));
 
 // IMPORTANT: mock the same specifier used by DeveloperSettingsTab
-vi.mock("../livekit/auth", () => ({
-  getSFUConfig: vi.fn().mockResolvedValue({
+vi.mock("../livekit/openIDSFU", () => ({
+  getSFUConfigWithOpenID: vi.fn().mockResolvedValue({
     url: "mock-url",
     jwt: "mock-jwt",
   }),
@@ -126,7 +126,7 @@ describe("DeveloperSettingsTab", () => {
   });
   describe("custom livekit url", () => {
     afterEach(() => {
-      customTransportSetting.setValue(null);
+      customLivekitUrlSetting.setValue(null);
     });
     const client = {
       doesServerSupportUnstableFeature: vi.fn().mockResolvedValue(true),
@@ -153,9 +153,9 @@ describe("DeveloperSettingsTab", () => {
 
       const saveButton = screen.getByRole("button", { name: "Save" });
       await user.click(saveButton);
-      expect(getSFUConfig).not.toHaveBeenCalled();
+      expect(getSFUConfigWithOpenID).not.toHaveBeenCalled();
 
-      expect(customTransportSetting.getValue()).toBe(null);
+      expect(customLivekitUrlSetting.getValue()).toBe(null);
     });
     it("will not update custom livekit url without text in input", async () => {
       const user = userEvent.setup();
@@ -176,9 +176,9 @@ describe("DeveloperSettingsTab", () => {
 
       const saveButton = screen.getByRole("button", { name: "Save" });
       await user.click(saveButton);
-      expect(getSFUConfig).not.toHaveBeenCalled();
+      expect(getSFUConfigWithOpenID).not.toHaveBeenCalled();
 
-      expect(customTransportSetting.getValue()).toBe(null);
+      expect(customLivekitUrlSetting.getValue()).toBe(null);
     });
     it("will not update custom livekit url when pressing cancel", async () => {
       const user = userEvent.setup();
@@ -202,9 +202,9 @@ describe("DeveloperSettingsTab", () => {
         name: "Reset overwrite",
       });
       await user.click(cancelButton);
-      expect(getSFUConfig).not.toHaveBeenCalled();
+      expect(getSFUConfigWithOpenID).not.toHaveBeenCalled();
 
-      expect(customTransportSetting.getValue()).toBe(null);
+      expect(customLivekitUrlSetting.getValue()).toBe(null);
     });
     it("will update custom livekit url", async () => {
       const user = userEvent.setup();
@@ -226,14 +226,14 @@ describe("DeveloperSettingsTab", () => {
 
       const saveButton = screen.getByRole("button", { name: "Save" });
       await user.click(saveButton);
-      expect(getSFUConfig).toHaveBeenCalledWith(
+      expect(getSFUConfigWithOpenID).toHaveBeenCalledWith(
         expect.anything(),
         expect.anything(),
         "wss://example.livekit.valid",
         "#testRoom",
       );
 
-      expect(customTransportSetting.getValue()).toBe(
+      expect(customLivekitUrlSetting.getValue()).toBe(
         "wss://example.livekit.valid",
       );
     });
@@ -256,14 +256,14 @@ describe("DeveloperSettingsTab", () => {
       await user.type(input, "wss://example.livekit.valid");
 
       const saveButton = screen.getByRole("button", { name: "Save" });
-      (getSFUConfig as Mock).mockImplementation(() => {
+      (getSFUConfigWithOpenID as Mock).mockImplementation(() => {
         throw new Error("Invalid URL");
       });
       await user.click(saveButton);
       expect(
         screen.getByText("invalid URL (did not update)"),
       ).toBeInTheDocument();
-      expect(customTransportSetting.getValue()).toBe(null);
+      expect(customLivekitUrlSetting.getValue()).toBe(null);
     });
   });
 

src/settings/DeveloperSettingsTab.tsx

@@ -45,7 +45,7 @@ import {
   muteAllAudio as muteAllAudioSetting,
   alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
   matrixRTCMode as matrixRTCModeSetting,
-  customTransport as customTransportSetting,
+  customLivekitUrl as customLivekitUrlSetting,
   advancedScreenShare as advancedScreenShareSetting,
   screenShareResolution as screenShareResolutionSetting,
   screenShareFramerate as screenShareFramerateSetting,
@@ -67,9 +67,9 @@ import styles from "./DeveloperSettingsTab.module.css";
 import settingsStyles from "./SettingsModal.module.css";
 import { Slider } from "../Slider";
 import { useUrlParams } from "../UrlParams";
+import { getSFUConfigWithOpenID } from "../livekit/openIDSFU";
 import { useBehavior } from "../useBehavior";
 import { type ViewModel } from "../state/ViewModel.ts";
-import { getSFUConfig } from "../livekit/auth/index.ts";
 
 /**
  * The state of MatrixRTC's media key rotation.
@@ -167,18 +167,16 @@ export const DeveloperSettingsTab: FC<Props> = ({
     enableExtendedLivekitLogsSetting,
   );
 
-  const [customTransportUpdateError, setCustomLivekitUrlUpdateError] = useState<
-    string | null
-  >(null);
-  const [customTransport, setCustomTransport] = useSetting(
-    customTransportSetting,
-  );
-  const [customTransportTextBuffer, setCustomLivekitUrlTextBuffer] = useState(
-    () => JSON.stringify(customTransport),
+  const [customLivekitUrlUpdateError, setCustomLivekitUrlUpdateError] =
+    useState<string | null>(null);
+  const [customLivekitUrl, setCustomLivekitUrl] = useSetting(
+    customLivekitUrlSetting,
   );
+  const [customLivekitUrlTextBuffer, setCustomLivekitUrlTextBuffer] =
+    useState(customLivekitUrl);
   useEffect(() => {
-    setCustomLivekitUrlTextBuffer(JSON.stringify(customTransport));
-  }, [customTransport]);
+    setCustomLivekitUrlTextBuffer(customLivekitUrl);
+  }, [customLivekitUrl]);
 
   const [muteAllAudio, setMuteAllAudio] = useSetting(muteAllAudioSetting);
 
@@ -493,23 +491,23 @@ export const DeveloperSettingsTab: FC<Props> = ({
       <EditInPlace
         onSubmit={(e) => e.preventDefault()}
         helpLabel={
-          customTransport === null
-            ? t("developer_mode.custom_transport.from_config")
-            : t("developer_mode.custom_transport.current") +
-              JSON.stringify(customTransport)
+          customLivekitUrl === null
+            ? t("developer_mode.custom_livekit_url.from_config")
+            : t("developer_mode.custom_livekit_url.current_url") +
+              customLivekitUrl
         }
-        label={t("developer_mode.custom_transport.label")}
-        saveButtonLabel={t("developer_mode.custom_transport.save")}
-        savingLabel={t("developer_mode.custom_transport.saving")}
-        cancelButtonLabel={t("developer_mode.custom_transport.reset")}
+        label={t("developer_mode.custom_livekit_url.label")}
+        saveButtonLabel={t("developer_mode.custom_livekit_url.save")}
+        savingLabel={t("developer_mode.custom_livekit_url.saving")}
+        cancelButtonLabel={t("developer_mode.custom_livekit_url.reset")}
         onSave={useCallback(
           async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
             if (
               roomId === undefined ||
-              customTransportTextBuffer === "" ||
-              customTransportTextBuffer === null
+              customLivekitUrlTextBuffer === "" ||
+              customLivekitUrlTextBuffer === null
             ) {
-              setCustomTransport(null);
+              setCustomLivekitUrl(null);
               return;
             }
 
@@ -520,27 +518,21 @@ export const DeveloperSettingsTab: FC<Props> = ({
               if (userId === null || deviceId === null) {
                 throw new Error("Invalid user or device ID");
               }
-              const transport = JSON.parse(customTransportTextBuffer);
-              // Validate the transport by attempting to get a token for it
-              await getSFUConfig({
+              await getSFUConfigWithOpenID(
                 client,
-                membership: { userId, deviceId, memberId: "" },
-                transport,
+                { userId, deviceId, memberId: "" },
+                customLivekitUrlTextBuffer,
                 roomId,
-                role: "publisher",
-                logger,
-              });
-              setCustomLivekitUrlUpdateError(null);
-              setCustomTransport(transport);
-            } catch {
-              setCustomLivekitUrlUpdateError(
-                "invalid transport (did not update)",
               );
+              setCustomLivekitUrlUpdateError(null);
+              setCustomLivekitUrl(customLivekitUrlTextBuffer);
+            } catch {
+              setCustomLivekitUrlUpdateError("invalid URL (did not update)");
             }
           },
-          [customTransportTextBuffer, setCustomTransport, client, roomId],
+          [customLivekitUrlTextBuffer, setCustomLivekitUrl, client, roomId],
         )}
-        value={customTransportTextBuffer ?? ""}
+        value={customLivekitUrlTextBuffer ?? ""}
         onChange={useCallback(
           (event: ChangeEvent<HTMLInputElement>): void => {
             setCustomLivekitUrlTextBuffer(event.target.value);
@@ -549,14 +541,14 @@ export const DeveloperSettingsTab: FC<Props> = ({
         )}
         onCancel={useCallback(
           (e: React.FormEvent<HTMLFormElement>) => {
-            setCustomTransport(null);
+            setCustomLivekitUrl(null);
           },
-          [setCustomTransport],
+          [setCustomLivekitUrl],
         )}
-        serverInvalid={customTransportUpdateError !== null}
+        serverInvalid={customLivekitUrlUpdateError !== null}
       >
-        {customTransportUpdateError !== null && (
-          <ErrorMessage>{customTransportUpdateError}</ErrorMessage>
+        {customLivekitUrlUpdateError !== null && (
+          <ErrorMessage>{customLivekitUrlUpdateError}</ErrorMessage>
         )}
       </EditInPlace>
       <Separator />

src/settings/SettingsModal.tsx

@@ -59,7 +59,7 @@ interface Props {
   livekitRooms?: {
     room: LivekitRoom;
     url: string;
-    role: "publisher" | "subscriber";
+    isLocal?: boolean;
   }[];
   /** Only available while in a call. Used by the developer tab. */
   developerSettingsVm?: ViewModel<DeveloperSettingsSnapshot>;

src/settings/settings.ts

@@ -12,7 +12,6 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { type Behavior } from "../state/Behavior";
 import { useBehavior } from "../useBehavior";
 import { MatrixRTCMode } from "../config/ConfigOptions";
-import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 
 export class Setting<T> {
   public constructor(
@@ -154,8 +153,8 @@ export const matrixRTCMode = new Setting<MatrixRTCMode>(
   MatrixRTCMode.Compatibility,
 );
 
-export const customTransport = new Setting<UnstableLivekitTransport | null>(
-  "custom-transport",
+export const customLivekitUrl = new Setting<string | null>(
+  "custom-livekit-url",
   null,
 );
 

src/soundUtils.test.ts

@@ -1,77 +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 { 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,43 +32,6 @@ 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
@@ -84,20 +47,18 @@ 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.
-      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) {
+      // Load an audio file
+      const response = await fetch(
+        preferredFormat === "ogg" ? ogg : (mp3 ?? ogg),
+      );
+      if (isFailure(response)) {
         // 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;
       }
-      buffers[name] = buffer;
+      // Decode it
+      buffers[name] = await response.arrayBuffer();
     }),
   );
   return buffers as Record<S, ArrayBuffer>;

src/state/CallViewModel/CallViewModel.test.ts

@@ -31,7 +31,7 @@ import {
   type CallMembership,
   type IRTCNotificationContent,
   MatrixRTCSessionEvent,
-  type UnstableLivekitTransport,
+  type LivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
 
@@ -97,7 +97,7 @@ vi.mock(
   "../state/CallViewModel/localMember/localTransport",
   async (importOriginal) => ({
     ...(await importOriginal()),
-    makeTransport: async (): Promise<UnstableLivekitTransport> =>
+    makeTransport: async (): Promise<LivekitTransport> =>
       Promise.resolve(exampleTransport),
   }),
 );
@@ -176,7 +176,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
         case "grid":
           return combineLatest(
             [
-              l.spotlight?.media$ ?? constant(undefined),
+              l.spotlight?.vm.media$ ?? constant(undefined),
               ...l.grid.map((vm) => vm.media$),
             ],
             (spotlight, ...grid) => ({
@@ -188,7 +188,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
         case "spotlight-landscape":
         case "spotlight-portrait":
           return combineLatest(
-            [l.spotlight.media$, ...l.grid.map((vm) => vm.media$)],
+            [l.spotlight.vm.media$, ...l.grid.map((vm) => vm.media$)],
             (spotlight, ...grid) => ({
               type: l.type,
               spotlight: spotlight.map((vm) => vm.id),
@@ -197,7 +197,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           );
         case "spotlight-expanded":
           return combineLatest(
-            [l.spotlight.media$, l.pip?.media$ ?? constant(undefined)],
+            [l.spotlight.media$, l.pip?.vm.media$ ?? constant(undefined)],
             (spotlight, pip) => ({
               type: l.type,
               spotlight: spotlight.map((vm) => vm.id),
@@ -206,7 +206,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           );
         case "one-on-one-desktop":
           return combineLatest(
-            [l.spotlight.media$, l.pip.media$],
+            [l.spotlight.media$, l.pip.vm.media$],
             (spotlight, pip) => ({
               type: l.type,
               spotlight: spotlight.id,
@@ -217,8 +217,8 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           return combineLatest(
             [
               l.spotlight.media$,
-              l.pip?.media$ ?? constant(undefined),
-              l.pipSize$,
+              l.pip?.vm.media$ ?? constant(undefined),
+              l.pip?.size$ ?? constant(undefined),
             ],
             (spotlight, pip, pipSize) => ({
               type: l.type,
@@ -480,7 +480,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: "lg",
+                pipSize: undefined,
               },
               b: {
                 type: "one-on-one-mobile",
@@ -518,7 +518,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
               type: "one-on-one-mobile",
               spotlight: [`${aliceId}:0`],
               pip: undefined,
-              pipSize: "lg",
+              pipSize: undefined,
             },
           });
           // It wouldn't be clear whether Alice or Bob is the remote video tile,
@@ -566,7 +566,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: "sm",
+                pipSize: undefined,
               },
               b: {
                 type: "spotlight-landscape",
@@ -765,7 +765,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: "lg",
+                pipSize: undefined,
               },
               b: {
                 // In a larger window, expect the one-on-one desktop layout

src/state/CallViewModel/CallViewModel.ts

@@ -39,12 +39,11 @@ import {
   timer,
   takeUntil,
   from,
-  concatWith,
 } from "rxjs";
 import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
   MembershipManagerEvent,
-  type UnstableLivekitTransport,
+  type LivekitTransportConfig,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -57,7 +56,6 @@ import {
   createToggle$,
   filterBehavior,
   generateItems,
-  mapScoped,
   pauseWhen,
 } from "../../utils/observable";
 import {
@@ -95,7 +93,6 @@ import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { type HostBridge, nullHostBridge } from "../../HostBridge";
 import {
   layoutShallowEquals,
-  type Alignment,
   type GridLayoutMedia,
   type Layout,
   type LayoutMedia,
@@ -106,14 +103,17 @@ import {
   type SpotlightPortraitLayoutMedia,
 } from "../layout-types.ts";
 import { ElementCallError, UnknownCallError } from "../../utils/errors.ts";
-import { Epoch, type ObservableScope } from "../ObservableScope.ts";
+import { type Epoch, type ObservableScope } from "../ObservableScope.ts";
 import { createHomeserverConnected$ } from "./localMember/HomeserverConnected.ts";
 import {
   createLocalMembership$,
   enterRTCSession,
   TransportState,
 } from "./localMember/LocalMember.ts";
-import { getLocalTransport } from "./localMember/LocalTransport.ts";
+import {
+  getLocalTransport,
+  type LocalTransport,
+} from "./localMember/LocalTransport.ts";
 import {
   createKeyRotationSuppressed$,
   createMemberships$,
@@ -124,9 +124,8 @@ import {
   ECConnectionFactory,
 } from "./remoteMembers/ConnectionFactory.ts";
 import {
-  ConnectionManagerData,
+  type ConnectionManagerData,
   createConnectionManager$,
-  type IConnectionManager,
 } from "./remoteMembers/ConnectionManager.ts";
 import {
   createRemoteMatrixLivekitMembers$,
@@ -163,6 +162,7 @@ import {
   type RingingMediaViewModel,
 } from "../media/RingingMediaViewModel.ts";
 import { type GridTileViewModel } from "../TileViewModel.ts";
+import { createFloatingTile } from "../FloatingTile.ts";
 
 //TODO
 // Larger rename
@@ -215,7 +215,7 @@ export interface CallViewModelOptions {
    */
   windowSize$: Behavior<{ width: number; height: number }>;
   /** Optional value overriding the local transport, for testing purposes. */
-  localTransport?: UnstableLivekitTransport;
+  localTransport?: LocalTransport;
   /** Optional value overriding the connection factory, for testing purposes. */
   connectionFactory?: ConnectionFactory;
   /** The version & compatibility mode of MatrixRTC that we should use. */
@@ -384,7 +384,7 @@ export interface CallViewModel {
    * key is generated when someone joins or leaves.
    */
   keyRotationSuppressed$: Behavior<boolean>;
-  allConnections$: Behavior<Connection[]>;
+  allConnections$: Behavior<ConnectionManagerData>;
   /** Participants sorted by livekit room so they can be used in the audio rendering */
   livekitRoomItems$: Behavior<LivekitRoomItem[]>;
   /** use the layout instead, this is just for the sdk export. */
@@ -575,7 +575,14 @@ export function createCallViewModel$(
 
   const localTransport$ = options.localTransport
     ? constant(options.localTransport)
-    : from(getLocalTransport(client));
+    : from(
+        getLocalTransport({
+          ownMembershipIdentity,
+          client,
+          roomId: matrixRoom.roomId,
+          matrixRTCMode,
+        }),
+      );
 
   const connectionFactory =
     options.connectionFactory ??
@@ -589,25 +596,14 @@ export function createCallViewModel$(
       options.livekitRoomFactory,
     );
 
-  const connectionManager: IConnectionManager = {
-    connectionManagerData$: scope.behavior(
-      localTransport$.pipe(
-        concatWith(NEVER), // So the Observable doesn't complete prematurely
-        mapScoped("connectionManager$", (scope, localTransport) =>
-          createConnectionManager$({
-            scope,
-            connectionFactory,
-            localTransport,
-            remoteTransports$: membershipsAndTransports.transports$,
-            logger,
-            ownMembershipIdentity,
-          }),
-        ),
-        switchMap(({ connectionManagerData$ }) => connectionManagerData$),
-      ),
-      new Epoch(new ConnectionManagerData()),
-    ),
-  };
+  const connectionManager = createConnectionManager$({
+    scope: scope,
+    connectionFactory: connectionFactory,
+    localTransport$,
+    remoteTransports$: membershipsAndTransports.transports$,
+    logger: logger,
+    ownMembershipIdentity,
+  });
 
   const remoteMatrixLivekitMembers$: Behavior<
     Epoch<RemoteMatrixLivekitMember[]>
@@ -628,7 +624,7 @@ export function createCallViewModel$(
     ),
     muteStates,
     joinMatrixRTC: (
-      transport: UnstableLivekitTransport,
+      transport: LivekitTransportConfig,
       delayedLeaveTimings: ResolvedDelayedLeaveTimings,
     ) => {
       return enterRTCSession(
@@ -650,7 +646,9 @@ export function createCallViewModel$(
         mediaDevices,
         muteStates,
         trackProcessorState$,
-        logger.getChild(`[Publisher ${JSON.stringify(connection.transport)}]`),
+        logger.getChild(
+          "[Publisher " + connection.transport.livekit_service_url + "]",
+        ),
         controlledAudioDevices,
       );
     },
@@ -673,6 +671,7 @@ export function createCallViewModel$(
       ).pipe(map(([delayId]) => delayId ?? null)),
       matrixRTCSession.delayId ?? null,
     ),
+    matrixRTCMode,
     logger: logger.getChild(`[${Date.now()}]`),
   });
 
@@ -740,32 +739,51 @@ export function createCallViewModel$(
   });
 
   const allConnections$ = scope.behavior(
-    connectionManager.connectionManagerData$.pipe(
-      map((d) => d.value.getConnections()),
-    ),
+    connectionManager.connectionManagerData$.pipe(map((d) => d.value)),
   );
-  const livekitRoomItems$ = scope.behavior<LivekitRoomItem[]>(
-    allConnections$.pipe(
-      switchMap((connections) => {
-        if (connections.length === 0) return of([]);
-        return combineLatest(
-          connections.map((connection) =>
-            remoteMatrixLivekitMembers$.pipe(
-              switchMap((members) =>
-                combineLatest(members.value.map((m) => m.participant.value$)),
-              ),
-              map((participants) => ({
-                url: JSON.stringify(connection.transport), // TODO
-                livekitRoom: connection.livekitRoom,
-                participants: participants
-                  .filter((p) => p !== null)
-                  .map((p) => p.identity),
-              })),
+  const livekitRoomItems$ = scope.behavior(
+    remoteMatrixLivekitMembers$.pipe(
+      switchMap((members) => {
+        const a$ = combineLatest(
+          members.value.map((member) =>
+            combineLatest([member.connection$, member.participant.value$]).pipe(
+              map(([connection, participant]) => {
+                // do not render audio for local participant
+                if (!connection || !participant || participant.isLocal)
+                  return null;
+                const livekitRoom = connection.livekitRoom;
+                const url = connection.transport.livekit_service_url;
+
+                return {
+                  url,
+                  livekitRoom,
+                  participant: participant.identity,
+                };
+              }),
             ),
           ),
         );
+        return a$;
       }),
+      map((members) =>
+        members.reduce<LivekitRoomItem[]>((acc, curr) => {
+          if (!curr) return acc;
+
+          const existing = acc.find((item) => item.url === curr.url);
+          if (existing) {
+            existing.participants.push(curr.participant);
+          } else {
+            acc.push({
+              livekitRoom: curr.livekitRoom,
+              participants: [curr.participant],
+              url: curr.url,
+            });
+          }
+          return acc;
+        }, []),
+      ),
     ),
+    [],
   );
 
   const handsRaised$ = scope.behavior(
@@ -823,7 +841,7 @@ export function createCallViewModel$(
               connection$.pipe(map((c) => c?.livekitRoom)),
             ),
             focusUrl$: scope.behavior(
-              connection$.pipe(map((c) => JSON.stringify(c?.transport))), // TODO
+              connection$.pipe(map((c) => c?.transport.livekit_service_url)),
             ),
             mediaDevices,
             pretendToBeDisconnected$: localMembership.reconnecting$,
@@ -1530,32 +1548,28 @@ export function createCallViewModel$(
   );
 
   /**
-   * The alignment of the floating spotlight tile, if present.
+   * State of the floating spotlight tile, if present.
    */
-  const spotlightAlignment$ = new BehaviorSubject<Alignment>({
+  const floatingSpotlightTile = createFloatingTile(scope, {
     inline: "end",
     block: "end",
   });
   /**
-   * The size of the small picture-in-picture tile, if present, when in portrait.
+   * State of the small picture-in-picture tile, if present, when in landscape.
    */
-  const portraitPipSize$ = scope.behavior(
-    showFooter$.pipe(map((showFooter) => (showFooter ? "lg" : "sm"))),
-  );
-  /**
-   * The alignment of the small picture-in-picture tile, if present, when in portrait.
-   */
-  const portraitPipAlignment$ = new BehaviorSubject<Alignment>({
-    inline: "end",
-    block: "end",
-  });
-  /**
-   * The alignment of the small picture-in-picture tile, if present, when in landscape.
-   */
-  const landscapePipAlignment$ = new BehaviorSubject<Alignment>({
+  const landscapePipTile = createFloatingTile(scope, {
     inline: "end",
     block: "start",
   });
+  /**
+   * State of the small picture-in-picture tile, if present, when in portrait.
+   */
+  const portraitPipTile = {
+    ...createFloatingTile(scope, { inline: "end", block: "end" }),
+    size$: scope.behavior(
+      showFooter$.pipe(map((showFooter) => (showFooter ? "lg" : "sm"))),
+    ),
+  };
 
   // There is a cyclical dependency here: the layout algorithms want to know
   // which tiles are on screen, but to know which tiles are on screen we have to
@@ -1585,7 +1599,7 @@ export function createCallViewModel$(
             case "spotlight-portrait":
               [layout, newTiles] = gridLikeLayout(
                 media,
-                spotlightAlignment$,
+                floatingSpotlightTile,
                 visibleTiles,
                 setVisibleTiles,
                 prevTiles,
@@ -1595,26 +1609,25 @@ export function createCallViewModel$(
             case "spotlight-expanded":
               [layout, newTiles] = spotlightExpandedLayout(
                 media,
-                landscapePipAlignment$,
+                landscapePipTile,
                 prevTiles,
               );
               break;
             case "one-on-one-desktop":
               [layout, newTiles] = oneOnOneDesktopLayout(
                 media,
-                landscapePipAlignment$,
+                landscapePipTile,
                 prevTiles,
               );
-              pip = layout.pip;
+              pip = layout.pip.vm;
               break;
             case "one-on-one-mobile":
               [layout, newTiles] = oneOnOneMobileLayout(
                 media,
-                portraitPipSize$,
-                portraitPipAlignment$,
+                portraitPipTile,
                 prevTiles,
               );
-              pip = layout.pip;
+              pip = layout.pip?.vm;
               break;
             case "pip":
               [layout, newTiles] = pipLayout(media, prevTiles);

src/state/CallViewModel/CallViewModelTestUtils.ts

@@ -30,6 +30,7 @@ import {
   type CallViewModelOptions,
 } from "./CallViewModel";
 import {
+  exampleSfuConfig,
   exampleTransport,
   mockConfig,
   MockConnection,
@@ -208,21 +209,24 @@ export function withCallViewModel(mode: MatrixRTCMode) {
         livekitRoomFactory,
         connectionState$,
         windowSize$,
-        localTransport: exampleTransport,
+        localTransport: {
+          transport: exampleTransport,
+          sfuConfig: exampleSfuConfig,
+        },
         connectionFactory: {
           createConnection(
             scope,
-            role,
             transport,
             ownMembershipIdentity,
             logger,
+            sfuConfig,
           ) {
             return new MockConnection(
               {
                 scope,
-                role,
                 transport,
                 ownMembershipIdentity,
+                existingSFUConfig: sfuConfig,
                 client: room.client,
                 roomId: room.roomId,
                 livekitRoomFactory,

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 UnstableLivekitTransport,
+  type LivekitTransportConfig,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
@@ -58,8 +58,8 @@ import { ConnectionState, type Connection } from "../remoteMembers/Connection";
 import { type Publisher } from "./Publisher";
 import { initializeWidget } from "../../../widget";
 import { nullHostBridge } from "../../../HostBridge";
-import { type SFUConfig } from "../../../livekit/auth";
-import * as livekitAuth from "../../../livekit/auth";
+import { type LocalTransport } from "./LocalTransport";
+import * as openIDSFU from "../../../livekit/openIDSFU";
 
 initializeWidget();
 
@@ -110,7 +110,6 @@ const delegatedTimings: ResolvedDelayedLeaveTimings = {
 };
 
 const mockedClient = {
-  baseUrl: "https://matrix.example.org",
   getDomain: vi.fn().mockReturnValue("example.org"),
   getDeviceId: vi.fn().mockReturnValue("AAAA"),
   getOpenIdToken: vi.fn().mockResolvedValue({
@@ -119,11 +118,11 @@ const mockedClient = {
     matrix_server_name: "localhost",
     expires_in: 10000,
   }),
-  _unstable_delegateDelayedLeave: vi.fn().mockResolvedValue({}),
 };
 
 describe("enterRTCSession", () => {
-  const transport: UnstableLivekitTransport = {
+  const transport: LivekitTransportConfig = {
+    livekit_alias: "roomId",
     livekit_service_url: "http://my-livekit-service-url.com",
     type: "livekit",
   };
@@ -140,7 +139,7 @@ describe("enterRTCSession", () => {
       client: mockedClient,
     },
     memberships: [],
-    join: vi.fn(),
+    joinRTCSession: vi.fn(),
   }) as unknown as MatrixRTCSession;
 
   beforeEach(() =>
@@ -152,18 +151,19 @@ describe("enterRTCSession", () => {
   it("It joins the correct Session", () => {
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.join).toHaveBeenLastCalledWith(
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
       {
         deviceId: "DEVICE",
         memberId: "@alice:example.org:DEVICE",
         userId: "@alice:example.org",
       },
-      [transport],
+      [],
+      transport,
       expect.objectContaining({ manageMediaKeys: true }),
     );
   });
 
-  it("passes keyRotationParticipantLimit from config to join", () => {
+  it("passes keyRotationParticipantLimit from config to joinRTCSession", () => {
     mockConfig({
       livekit: { livekit_service_url: "http://my-default-service-url.com" },
       matrix_rtc_session: {
@@ -176,8 +176,9 @@ describe("enterRTCSession", () => {
 
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.join).toHaveBeenLastCalledWith(
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
       expect.any(Object),
+      [],
       expect.any(Object),
       expect.objectContaining({
         keyRotationParticipantLimit: 50,
@@ -188,7 +189,8 @@ describe("enterRTCSession", () => {
   it("uses the specified delayed leave timings", () => {
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.join).toHaveBeenLastCalledWith(
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      expect.anything(),
       expect.anything(),
       expect.anything(),
       expect.objectContaining({
@@ -208,7 +210,7 @@ describe("LocalMembership", () => {
     }),
     matrixRTCSession: {
       updateCallIntent: vi.fn().mockReturnValue(Promise.resolve()),
-      leave: vi.fn(),
+      leaveRoomSession: vi.fn(),
     } as unknown as MatrixRTCSession,
     muteStates: mockMuteStates(),
     trackProcessorState$: constant({
@@ -254,7 +256,7 @@ describe("LocalMembership", () => {
 
   it("throws error on missing RTC config error", () => {
     withTestScheduler(({ scope, hot, expectObservable }) => {
-      const localTransport$ = scope.behavior<null | UnstableLivekitTransport>(
+      const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
         hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
         null,
       );
@@ -302,7 +304,7 @@ describe("LocalMembership", () => {
       ...defaultCreateLocalMemberValues,
       matrixRTCSession: {
         updateCallIntent: vi.fn().mockImplementation(reject),
-        leave: vi.fn(),
+        leaveRoomSession: vi.fn(),
       },
       connectionManager: mockConnectionManager,
       localTransport$: constant(mockTransport),
@@ -317,17 +319,19 @@ describe("LocalMembership", () => {
     scope.end();
   });
 
-  const mockTransport: UnstableLivekitTransport = {
-    type: "livekit",
-    url: "https://sfu.example.org",
-  } as UnstableLivekitTransport;
+  const mockTransportConfig = {
+    livekit_service_url: "a",
+  } as LivekitTransportConfig;
 
-  const mockSFUConfig: SFUConfig = {
-    jwt: "foo",
-    livekitAlias: "bar",
-    livekitIdentity: "baz",
-    url: "bro",
-  };
+  const mockTransport = {
+    transport: mockTransportConfig,
+    sfuConfig: {
+      jwt: "foo",
+      livekitAlias: "bar",
+      livekitIdentity: "baz",
+      url: "bro",
+    },
+  } as LocalTransport;
 
   const connectionTransportAConnected = {
     livekitRoom: mockLivekitRoom({
@@ -337,7 +341,7 @@ describe("LocalMembership", () => {
       } as unknown as LocalParticipant,
     }),
     state$: constant(ConnectionState.LivekitConnected),
-    transport: mockTransport,
+    transport: mockTransportConfig,
   } as Connection;
   const connectionTransportAConnecting = {
     ...connectionTransportAConnected,
@@ -346,8 +350,8 @@ describe("LocalMembership", () => {
   } as unknown as Connection;
 
   const authCallSpy = vi
-    .spyOn(livekitAuth, "getSFUConfig")
-    .mockResolvedValue(mockSFUConfig);
+    .spyOn(openIDSFU, "getSFUConfigWithOpenID")
+    .mockImplementation(() => mockedClient.getOpenIdToken());
   afterEach(() => authCallSpy.mockClear());
 
   it.each([
@@ -386,7 +390,7 @@ describe("LocalMembership", () => {
       await flushPromises();
       // Joins with timings appropriate for the level of delegation support
       expect(joinMatrixRTC).toHaveBeenCalledWith(
-        mockTransport,
+        mockTransportConfig,
         delayedLeaveTimings,
       );
 
@@ -480,7 +484,7 @@ describe("LocalMembership", () => {
   it("tracks livekit state correctly", async () => {
     const scope = new ObservableScope();
     const connectionManagerData = new ConnectionManagerData();
-    const localTransport$ = new Subject<UnstableLivekitTransport>();
+    const localTransport$ = new Subject<LocalTransport>();
 
     const connectionManagerData$ = new BehaviorSubject(
       new Epoch(connectionManagerData),
@@ -553,7 +557,7 @@ describe("LocalMembership", () => {
     });
 
     (
-      connectionManagerData2.getConnectionForTransport(mockTransport)!
+      connectionManagerData2.getConnectionForTransport(mockTransportConfig)!
         .state$ as BehaviorSubject<ConnectionState>
     ).next(ConnectionState.LivekitConnected);
     expect(localMembership.localMemberState$.value).toStrictEqual({
@@ -858,7 +862,7 @@ describe("LocalMembership", () => {
       const setScreenShareEnabled = vi.fn().mockRejectedValue(error);
       const connection = {
         state$: constant(ConnectionState.LivekitConnected),
-        transport: mockTransport,
+        transport: mockTransportConfig,
         livekitRoom: mockLivekitRoom({
           localParticipant: mockLocalParticipant({
             isScreenShareEnabled: false,

src/state/CallViewModel/localMember/LocalMember.ts

@@ -15,9 +15,11 @@ import {
   MediaDeviceFailure,
 } from "livekit-client";
 import { observeParticipantEvents } from "@livekit/components-core";
+import { type MatrixClient } from "matrix-js-sdk";
 import {
   Status as RTCSessionStatus,
-  type UnstableLivekitTransport,
+  type LivekitTransport,
+  type LivekitTransportConfig,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -78,11 +80,8 @@ import {
   type FailedToStartError,
 } from "../remoteMembers/Connection.ts";
 import { type HomeserverConnected } from "./HomeserverConnected.ts";
-import {
-  type ClientDelegationParts,
-  delegateDelayedLeave,
-  type ClientOpenIDParts,
-} from "../../../livekit/auth";
+import { type LocalTransport } from "./LocalTransport.ts";
+import { getSFUConfigWithOpenID } from "../../../livekit/openIDSFU.ts";
 
 export enum TransportState {
   /** Not even a transport is available to the LocalMembership */
@@ -145,21 +144,25 @@ interface Props {
   connectionManager: IConnectionManager;
   createPublisherFactory: (connection: Connection) => Publisher;
   joinMatrixRTC: (
-    transport: UnstableLivekitTransport,
+    transport: LivekitTransportConfig,
     delayedLeaveTimings: ResolvedDelayedLeaveTimings,
   ) => void;
   homeserverConnected: HomeserverConnected;
   roomId: string;
   ownMembershipIdentity: CallMembershipIdentityParts;
-  localTransport$: Observable<UnstableLivekitTransport>;
-  client: ClientDelegationParts & ClientOpenIDParts;
-  matrixRTCSession: Pick<MatrixRTCSession, "updateCallIntent" | "leave">;
+  localTransport$: Observable<LocalTransport>;
+  client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
+  matrixRTCSession: Pick<
+    MatrixRTCSession,
+    "updateCallIntent" | "leaveRoomSession"
+  >;
   /** Whether to hide the screen-sharing button. */
   hideScreensharing: boolean;
   /** The application hosting Element Call, to be kept informed of join/leave. */
   hostBridge: HostBridge;
   baseUrl: string;
   delayId$: Behavior<string | null>;
+  matrixRTCMode: MatrixRTCMode;
   logger: Logger;
 }
 
@@ -207,6 +210,7 @@ export const createLocalMembership$ = ({
   hostBridge,
   ownMembershipIdentity,
   delayId$,
+  matrixRTCMode,
 }: Props): {
   /**
    * This request to start audio and video tracks.
@@ -307,17 +311,16 @@ export const createLocalMembership$ = ({
   // to whether delayed event delegation is supported
   const joinParams$ = scope.behavior(
     localTransport$.pipe(
-      switchMap(async (transport) => {
-        const transportSupportsDelegation =
-          "livekit_service_url" in transport &&
-          (await checkDelegationSupport(
-            transport.livekit_service_url + "/delegate_delayed_leave",
-            `transport ${transport.livekit_service_url}`,
-          ));
+      switchMap(async ({ transport }) => {
+        const transportSupportsDelegation = checkDelegationSupport(
+          transport.livekit_service_url + "/delegate_delayed_leave",
+          `transport ${transport.livekit_service_url}`,
+        );
         return {
           transport,
           delegationSupported:
-            transportSupportsDelegation || (await homeserverSupportsDelegation),
+            (await homeserverSupportsDelegation) ||
+            (await transportSupportsDelegation),
         };
       }),
     ),
@@ -330,12 +333,12 @@ export const createLocalMembership$ = ({
       connectionManager.connectionManagerData$,
       localTransport$,
     ]).pipe(
-      map(([{ value: connectionData }, transport]) =>
+      map(([{ value: connectionData }, { transport }]) =>
         connectionData.getConnectionForTransport(transport),
       ),
       tap((connection) => {
         logger.info(
-          `Local connection updated: ${JSON.stringify(connection?.transport)}`,
+          `Local connection updated: ${connection?.transport?.livekit_service_url}`,
         );
       }),
     ),
@@ -407,7 +410,7 @@ export const createLocalMembership$ = ({
   scope.reconcile(localConnection$, async (connection) => {
     logger.info(
       "reconcile based on new localConnection:",
-      JSON.stringify(connection?.transport),
+      connection?.transport.livekit_service_url,
     );
     if (connection !== null) {
       const publisher = createPublisherFactory(connection);
@@ -680,7 +683,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.leave(1000);
+          await matrixRTCSession.leaveRoomSession(1000);
         } catch (e) {
           logger.error("Error leaving RTC session", e);
         }
@@ -703,21 +706,23 @@ export const createLocalMembership$ = ({
     async ([joinParams, delayId]) => {
       if (joinParams?.delegationSupported && delayId !== null) {
         try {
-          logger.info(
-            `Delegating delayed leave to ${JSON.stringify(joinParams.transport)}…`,
-          );
-          await delegateDelayedLeave({
+          // This will technically cause the service to issue a new JWT token,
+          // but it's safe to discard. We're only interested in triggering
+          // delegation.
+          await getSFUConfigWithOpenID(
             client,
-            membership: ownMembershipIdentity,
-            transport: joinParams.transport,
+            ownMembershipIdentity,
+            joinParams.transport.livekit_service_url,
             roomId,
-            delayId,
+            { matrixRTCMode, delayEndpointBaseUrl: baseUrl, delayId },
             logger,
-          });
-          logger.info("Delayed leave successfully delegated");
+          );
         } catch (e) {
           // TODO: Surface this to the user as a service interruption?
-          logger.error(`Failed to delegate leave`, e);
+          logger.error(
+            `Failed to delegate leave to ${joinParams.transport.livekit_service_url}`,
+            e,
+          );
         }
       }
     },
@@ -950,7 +955,7 @@ interface EnterRTCSessionOptions {
  *
  * @param rtcSession - The MatrixRTCSession to join.
  * @param ownMembershipIdentity - Options for entering the RTC session.
- * @param transport - The UnstableLivekitTransport to use for this session.
+ * @param transport - The LivekitTransport to use for this session.
  * @param options - `encryptMedia`: Whether to encrypt media. `matrixRTCMode`: The
  *   Matrix RTC mode to use. `delayedLeaveTimings`: The preferred timings for
  *   delayed leave events. `sendNotificationType`: Whether and what kind of
@@ -961,7 +966,7 @@ interface EnterRTCSessionOptions {
 export function enterRTCSession(
   rtcSession: MatrixRTCSession,
   ownMembershipIdentity: CallMembershipIdentityParts,
-  transport: UnstableLivekitTransport,
+  transport: LivekitTransportConfig,
   {
     encryptMedia,
     matrixRTCMode,
@@ -982,6 +987,21 @@ 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
@@ -994,18 +1014,24 @@ 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.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,
-  });
+  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,
+    },
+  );
 }

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

@@ -22,13 +22,13 @@ import {
   MatrixRTCTransportMissingError,
   FailToGetOpenIdToken,
 } from "../../../utils/errors";
-import * as livekitAuth from "../../../livekit/auth";
-import { customTransport } from "../../../settings/settings";
+import * as openIDSFU from "../../../livekit/openIDSFU";
+import { customLivekitUrl } from "../../../settings/settings";
 import { testJWTToken } from "../../../utils/test-fixtures";
-import { type MatrixClient } from "matrix-js-sdk";
+import { MatrixRTCMode } from "../../../config/ConfigOptions";
 
 describe("LocalTransport", () => {
-  const sfuConfig: livekitAuth.SFUConfig = {
+  const openIdResponse: openIDSFU.SFUConfig = {
     url: "https://lk.example.org",
     jwt: testJWTToken,
     livekitAlias: "Akph4alDMhen",
@@ -40,25 +40,42 @@ describe("LocalTransport", () => {
   it("throws if config is missing", async () => {
     await expect(
       getLocalTransport({
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getDomain: () => "example.org",
+        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("threes if SFU config fetch fails", async () => {
+  it("throws FailToGetOpenIdToken when OpenID fetch fails", async () => {
     // Provide a valid config so makeTransportInternal resolves a transport
     mockConfig({
       livekit: { livekit_service_url: "https://lk.example.org" },
     });
-    vi.spyOn(livekitAuth, "getSFUConfig").mockRejectedValue(
+    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockRejectedValue(
       new FailToGetOpenIdToken(new Error("no openid")),
     );
 
     await expect(
       getLocalTransport({
-        getDomain: () => "example.org",
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
+        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")));
   });
@@ -69,7 +86,7 @@ describe("LocalTransport", () => {
       livekit: { livekit_service_url: "https://lk.example.org" },
     });
 
-    vi.spyOn(livekitAuth, "getSFUConfig").mockResolvedValue({
+    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue({
       url: "https://lk.example.org",
       jwt: "jwt",
       livekitAlias: "Akph4alDMhen",
@@ -78,8 +95,16 @@ describe("LocalTransport", () => {
 
     expect(
       await getLocalTransport({
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getDomain: () => "example.org",
+        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: {
@@ -95,16 +120,26 @@ describe("LocalTransport", () => {
     });
   });
 
+  type LocalTransportProps = Parameters<typeof getLocalTransport>[0];
+
   describe("transport configuration mechanisms", () => {
-    let client: MockedObject<
-      Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports">
-    >;
+    let localTransportOpts: LocalTransportProps & {
+      client: MockedObject<LocalTransportProps["client"]>;
+    };
     beforeEach(() => {
       mockConfig({});
-      customTransport.setValue(customTransport.defaultValue);
-      client = {
-        getDomain: vi.fn().mockReturnValue("example.org"),
-        _unstable_getRTCTransports: vi.fn().mockResolvedValue([]),
+      customLivekitUrl.setValue(customLivekitUrl.defaultValue);
+      localTransportOpts = {
+        ownMembershipIdentity: ownMemberMock,
+        roomId: "!example_room_id",
+        matrixRTCMode: MatrixRTCMode.Compatibility,
+        client: {
+          getDomain: vi.fn().mockReturnValue("example.org"),
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          _unstable_getRTCTransports: vi.fn().mockResolvedValue([]),
+          getOpenIdToken: vi.fn(),
+          getDeviceId: vi.fn(),
+        },
       };
     });
 
@@ -116,9 +151,11 @@ describe("LocalTransport", () => {
       mockConfig({
         livekit: { livekit_service_url: "https://lk.example.org" },
       });
-      vi.spyOn(livekitAuth, "getSFUConfig").mockResolvedValue(sfuConfig);
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
+        openIdResponse,
+      );
 
-      expect(await getLocalTransport(client)).toStrictEqual({
+      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
         transport: {
           livekit_service_url: "https://lk.example.org",
           type: "livekit",
@@ -133,13 +170,12 @@ describe("LocalTransport", () => {
     });
 
     it("supports getting transport via user settings", async () => {
-      customTransport.setValue({
-        type: "livekit",
-        livekit_service_url: "https://lk.example.org",
-      });
-      vi.spyOn(livekitAuth, "getSFUConfig").mockResolvedValue(sfuConfig);
+      customLivekitUrl.setValue("https://lk.example.org");
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
+        openIdResponse,
+      );
 
-      expect(await getLocalTransport(client)).toStrictEqual({
+      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
         transport: {
           livekit_service_url: "https://lk.example.org",
           type: "livekit",
@@ -154,12 +190,14 @@ describe("LocalTransport", () => {
     });
 
     it("supports getting transport via backend", async () => {
-      client._unstable_getRTCTransports.mockResolvedValue([
+      localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
         { type: "livekit", livekit_service_url: "https://lk.example.org" },
       ]);
-      vi.spyOn(livekitAuth, "getSFUConfig").mockResolvedValue(sfuConfig);
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
+        openIdResponse,
+      );
 
-      expect(await getLocalTransport(client)).toStrictEqual({
+      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
         transport: {
           livekit_service_url: "https://lk.example.org",
           type: "livekit",
@@ -174,14 +212,14 @@ describe("LocalTransport", () => {
     });
 
     it("fails fast if the openID request fails for backend config", async () => {
-      client._unstable_getRTCTransports.mockResolvedValue([
+      localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
         { type: "livekit", livekit_service_url: "https://lk.example.org" },
       ]);
-      vi.spyOn(livekitAuth, "getSFUConfig").mockRejectedValue(
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockRejectedValue(
         new FailToGetOpenIdToken(new Error("Test driven error")),
       );
 
-      await expect(getLocalTransport(client)).rejects.toThrow(
+      await expect(getLocalTransport(localTransportOpts)).rejects.toThrow(
         expect.any(FailToGetOpenIdToken),
       );
     });
@@ -189,8 +227,17 @@ describe("LocalTransport", () => {
     it("throws if no options are available", async () => {
       await expect(
         getLocalTransport({
-          getDomain: () => "example.org",
-          _unstable_getRTCTransports: async () => Promise.resolve([]),
+          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,38 +5,163 @@ SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
+import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
+import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import { Config } from "../../../config/Config.ts";
-import { MatrixRTCTransportMissingError } from "../../../utils/errors.ts";
-import { customTransport as customTransportSetting } from "../../../settings/settings.ts";
+import {
+  FailToGetOpenIdToken,
+  MatrixRTCTransportMissingError,
+  NoMatrix2AuthorizationService,
+} from "../../../utils/errors.ts";
+import {
+  getSFUConfigWithOpenID,
+  type SFUConfig,
+  type OpenIDClientParts,
+} from "../../../livekit/openIDSFU.ts";
+import { customLivekitUrl } from "../../../settings/settings.ts";
 import { RtcTransportAutoDiscovery } from "./RtcTransportAutoDiscovery.ts";
+import { type MatrixRTCMode } from "../../../config/ConfigOptions.ts";
+
+interface Props {
+  ownMembershipIdentity: CallMembershipIdentityParts;
+  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
+    OpenIDClientParts;
+  // Used by the jwt service to create the livekit room and compute the livekit alias.
+  roomId: string;
+  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 LocalTransport {
+  transport: LivekitTransportConfig;
+  sfuConfig: SFUConfig;
+}
+
+export function isLocalTransport(
+  obj: LivekitTransportConfig | LocalTransport,
+): obj is LocalTransport {
+  return "transport" in obj && "sfuConfig" in obj;
+}
 
 /**
- * Determines the transport to advertise in our MatrixRTC membership and publish
- * media on.
+ * 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 our MatrixRTC membership and publish media on.
+ * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
  */
-export async function getLocalTransport(
-  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports">,
-): Promise<UnstableLivekitTransport> {
+export async function getLocalTransport({
+  ownMembershipIdentity,
+  client,
+  roomId,
+  matrixRTCMode,
+}: Props): Promise<LocalTransport> {
+  const logger = rootLogger.getChild("[LocalTransport]");
   const discovery = new RtcTransportAutoDiscovery({
-    client,
+    client: client,
     resolvedConfig: Config.get(),
-    logger: rootLogger.getChild("[LocalTransport]"),
+    logger: logger,
   });
+  const customUrl = customLivekitUrl.value$.value;
 
-  // Respect the user's custom transport, if set
-  const transport =
-    customTransportSetting.value$.value ??
-    (await discovery.discoverPreferredTransport());
+  // Respect the user's custom URL, if set
+  const transport: LivekitTransportConfig | null = customUrl
+    ? { type: "livekit", livekit_service_url: customUrl }
+    : await discovery.discoverPreferredTransport();
 
   if (transport === null)
     throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
 
-  // TODO: Since this module no longer maps auth errors to fatal user-facing
-  // errors (as it doesn't even perform auth), that needs to happen somewhere
-  // else.
-  return 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);
+  }
+}
+
+/**
+ *  Utility to ensure the user can authenticate with the SFU.
+ *  We will call `getSFUConfigWithOpenID` once per transport here as it's our
+ *  only mechanism of validation. This means we will also ask the
+ *  homeserver for a OpenID token a few times. Since OpenID tokens are single
+ *  use we don't want to risk any issues by re-using a token.
+ *
+ *  @param transport The transport to authenticate with.
+ *  @param matrixRTCMode Whether to force the JWT endpoint to be used.
+ *  @param membership The identity of the local member.
+ *  @param roomId The room ID to use for the JWT.
+ *  @param client The client to use for the OpenID token.
+ *
+ *  @throws FailToGetOpenIdToken, NoMatrix2AuthorizationService
+ */
+async function doOpenIdAndJWTFromUrl(
+  transport: LivekitTransportConfig,
+  matrixRTCMode: MatrixRTCMode,
+  membership: CallMembershipIdentityParts,
+  roomId: string,
+  client: Pick<MatrixClient, "_unstable_getRTCTransports"> & OpenIDClientParts,
+  logger?: Logger,
+): Promise<LocalTransport> {
+  const sfuConfig = await getSFUConfigWithOpenID(
+    client,
+    membership,
+    transport.livekit_service_url,
+    roomId,
+    { matrixRTCMode },
+    logger,
+  );
+  return {
+    transport,
+    sfuConfig,
+  };
+}
+
+function mapAuthErrorToUserFriendlyError(e: unknown): Error {
+  if (
+    e instanceof FailToGetOpenIdToken ||
+    e instanceof NoMatrix2AuthorizationService
+  ) {
+    // rethrow as is
+    return e;
+  }
+  // Catch others and rethrow as FailToGetOpenIdToken that has user friendly message.
+  return new FailToGetOpenIdToken(
+    e instanceof Error ? e : new Error(String(e)),
+  );
 }

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 UnstableLivekitTransport,
+  type LivekitTransportConfig,
   type Transport,
 } from "matrix-js-sdk/lib/matrixrtc";
 
@@ -28,12 +28,12 @@ import {
 
 type DiscoveryClient = RtcTransportAutoDiscoveryProps["client"];
 
-const backendTransport: UnstableLivekitTransport = {
+const backendTransport: LivekitTransportConfig = {
   type: "livekit",
   livekit_service_url: "https://backend.example.org",
 };
 
-const configTransport: UnstableLivekitTransport = {
+const configTransport: LivekitTransportConfig = {
   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 {
-  isUnstableLivekitTransport,
-  type UnstableLivekitTransport,
+  isLivekitTransportConfig,
+  type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
 import { type Logger } from "matrix-js-sdk/lib/logger";
@@ -40,12 +40,12 @@ export class RtcTransportAutoDiscovery {
     this.logger = logger.getChild("[RtcTransportAutoDiscovery]");
   }
 
-  public async discoverPreferredTransport(): Promise<UnstableLivekitTransport | null> {
+  public async discoverPreferredTransport(): Promise<LivekitTransportConfig | null> {
     // 1) backend transports
     const backendTransport = await this.tryBackendTransports();
     if (backendTransport) {
       this.logger.info(
-        `Found backend transport: ${JSON.stringify(backendTransport)}`,
+        `Found backend transport: ${backendTransport.livekit_service_url}`,
       );
       return backendTransport;
     }
@@ -54,7 +54,7 @@ export class RtcTransportAutoDiscovery {
     const configTransport = this.tryConfigTransport();
     if (configTransport) {
       this.logger.info(
-        `Found app config transport: ${JSON.stringify(configTransport)}`,
+        `Found app config transport: ${configTransport.livekit_service_url}`,
       );
       return configTransport;
     }
@@ -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<UnstableLivekitTransport | null> {
+  private async tryBackendTransports(): Promise<LivekitTransportConfig | 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(isUnstableLivekitTransport);
+      const first = transportList.find(isLivekitTransportConfig);
       if (first) {
         return first;
       } else {
@@ -90,7 +90,7 @@ export class RtcTransportAutoDiscovery {
     return null;
   }
 
-  private tryConfigTransport(): UnstableLivekitTransport | null {
+  private tryConfigTransport(): LivekitTransportConfig | null {
     const url = this.resolvedConfig.livekit?.livekit_service_url;
     if (url) {
       return {

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

@@ -28,9 +28,9 @@ import {
 } from "livekit-client";
 import fetchMock from "fetch-mock";
 import EventEmitter from "events";
-import { MatrixError, type IOpenIDToken } from "matrix-js-sdk";
+import { type IOpenIDToken } from "matrix-js-sdk";
 import { logger, type Logger } from "matrix-js-sdk/lib/logger";
-import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 
 import {
   Connection,
@@ -38,20 +38,17 @@ import {
   type ConnectionOpts,
 } from "./Connection.ts";
 import { ObservableScope } from "../../ObservableScope.ts";
+import { type OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
 import {
   ElementCallError,
   FailToGetOpenIdToken,
 } from "../../../utils/errors.ts";
 import { testJWTToken } from "../../../utils/test-fixtures.ts";
 import { mockRemoteParticipant, ownMemberMock } from "../../../utils/test.ts";
-import {
-  type ClientGetTokenParts,
-  type ClientOpenIDParts,
-} from "../../../livekit/auth";
 
 let testScope: ObservableScope;
 
-let client: MockedObject<ClientGetTokenParts & ClientOpenIDParts>;
+let client: MockedObject<OpenIDClientParts>;
 
 let fakeLivekitRoom: MockedObject<LivekitRoom>;
 
@@ -60,14 +57,14 @@ let fakeLocalParticipant: MockedObject<LocalParticipant>;
 
 const ROOM_ID = "!roomID:example.org";
 
-const transport: UnstableLivekitTransport = {
+const livekitFocus: LivekitTransportConfig = {
+  livekit_service_url: "https://matrix-rtc.example.org/livekit/jwt",
   type: "livekit",
-  url: "wss://matrix-rtc.m.localhost/livekit/sfu",
 };
 
 function setupTest(): void {
   testScope = new ObservableScope();
-  client = vi.mocked<ClientGetTokenParts & ClientOpenIDParts>({
+  client = vi.mocked<OpenIDClientParts>({
     getOpenIdToken: vi.fn().mockResolvedValue({
       access_token: "rYsmGUEwNjKgJYyeNUkZseJN",
       token_type: "Bearer",
@@ -75,8 +72,7 @@ function setupTest(): void {
       expires_in: 3600,
     }),
     getDeviceId: vi.fn().mockReturnValue("ABCDEF"),
-    _unstable_getLivekitToken: vi.fn().mockResolvedValue({ jwt: testJWTToken }),
-  });
+  } as unknown as OpenIDClientParts);
 
   localParticipantEventEmiter = new EventEmitter();
 
@@ -122,13 +118,22 @@ function setupRemoteConnection(): Connection {
   const opts: ConnectionOpts = {
     client: client,
     roomId: ROOM_ID,
-    role: "subscriber",
-    transport: transport,
+    transport: livekitFocus,
     scope: testScope,
     ownMembershipIdentity: ownMemberMock,
     livekitRoomFactory: () => fakeLivekitRoom,
   };
 
+  fetchMock.post(`${livekitFocus.livekit_service_url}/sfu/get`, () => {
+    return {
+      status: 200,
+      body: {
+        url: "wss://matrix-rtc.m.localhost/livekit/sfu",
+        jwt: testJWTToken,
+      },
+    };
+  });
+
   fakeLivekitRoom.connect.mockImplementation(async (): Promise<void> => {
     const changeEv = RoomEvent.ConnectionStateChanged;
 
@@ -169,8 +174,7 @@ describe("Start connection states", () => {
     const opts: ConnectionOpts = {
       client: client,
       roomId: ROOM_ID,
-      role: "subscriber",
-      transport: transport,
+      transport: livekitFocus,
       scope: testScope,
       ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
@@ -187,8 +191,7 @@ describe("Start connection states", () => {
     const opts: ConnectionOpts = {
       client: client,
       roomId: ROOM_ID,
-      role: "subscriber",
-      transport: transport,
+      transport: livekitFocus,
       scope: testScope,
       ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
@@ -225,7 +228,9 @@ describe("Start connection states", () => {
     capturedState = capturedStates.pop();
     if (capturedState instanceof Error) {
       expect(capturedState.message).toEqual("Something went wrong");
-      expect(connection.transport).toEqual(transport);
+      expect(connection.transport.livekit_alias).toEqual(
+        livekitFocus.livekit_alias,
+      );
     } else {
       expect.fail("Expected FailedToStart state but got " + capturedState);
     }
@@ -238,8 +243,7 @@ describe("Start connection states", () => {
     const opts: ConnectionOpts = {
       client: client,
       roomId: ROOM_ID,
-      role: "subscriber",
-      transport: transport,
+      transport: livekitFocus,
       scope: testScope,
       ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
@@ -254,15 +258,16 @@ describe("Start connection states", () => {
     onTestFinished(() => s.unsubscribe());
 
     const deferredSFU = Promise.withResolvers<void>();
-    client._unstable_getLivekitToken.mockImplementation(async () => {
+    // mock the /sfu/get call
+    fetchMock.post(`${livekitFocus.livekit_service_url}/sfu/get`, async () => {
       await deferredSFU.promise;
-      throw new MatrixError(
-        {
+      return {
+        status: 500,
+        body: {
           errcode: "M_LOOKUP_FAILED",
           error: "Failed to look up user info from homeserver",
         },
-        500,
-      );
+      };
     });
 
     connection.start().catch(() => {
@@ -285,7 +290,9 @@ describe("Start connection states", () => {
       expect(capturedState.cause.message).toContain(
         "Failed to look up user info from homeserver",
       );
-      expect(connection.transport).toEqual(transport);
+      expect(connection.transport.livekit_alias).toEqual(
+        livekitFocus.livekit_alias,
+      );
     } else {
       expect.fail("Expected FailedToStart state but got " + capturedState);
     }
@@ -298,8 +305,7 @@ describe("Start connection states", () => {
     const opts: ConnectionOpts = {
       client: client,
       roomId: ROOM_ID,
-      role: "subscriber",
-      transport: transport,
+      transport: livekitFocus,
       scope: testScope,
       ownMembershipIdentity: ownMemberMock,
       livekitRoomFactory: () => fakeLivekitRoom,
@@ -314,6 +320,17 @@ describe("Start connection states", () => {
     onTestFinished(() => s.unsubscribe());
 
     const deferredSFU = Promise.withResolvers<void>();
+    // mock the /sfu/get call
+    fetchMock.post(`${livekitFocus.livekit_service_url}/sfu/get`, () => {
+      return {
+        status: 200,
+        body: {
+          url: "wss://matrix-rtc.m.localhost/livekit/sfu",
+          jwt: testJWTToken,
+        },
+      };
+    });
+
     fakeLivekitRoom.connect.mockImplementation(async () => {
       await deferredSFU.promise;
       throw new Error("Failed to connect to livekit");
@@ -340,7 +357,9 @@ describe("Start connection states", () => {
       expect(capturedState.cause.message).toContain(
         "Failed to connect to livekit",
       );
-      expect(connection.transport).toEqual(transport);
+      expect(connection.transport.livekit_alias).toEqual(
+        livekitFocus.livekit_alias,
+      );
     } else {
       expect.fail(
         "Expected FailedToStart state but got " + JSON.stringify(capturedState),
@@ -537,8 +556,7 @@ describe("remote track logging", () => {
       {
         client,
         roomId: ROOM_ID,
-        role: "subscriber",
-        transport: transport,
+        transport: livekitFocus,
         scope: testScope,
         ownMembershipIdentity: ownMemberMock,
         livekitRoomFactory: () => fakeLivekitRoom,

src/state/CallViewModel/remoteMembers/Connection.ts

@@ -22,11 +22,16 @@ import {
   type Track,
   type TrackPublication,
 } from "livekit-client";
-import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } 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";
 
+import {
+  getSFUConfigWithOpenID,
+  type OpenIDClientParts,
+  type SFUConfig,
+} from "../../../livekit/openIDSFU.ts";
 import { type Behavior } from "../../Behavior.ts";
 import { type ObservableScope } from "../../ObservableScope.ts";
 import {
@@ -37,22 +42,19 @@ import {
   SFURoomCreationRestrictedError,
   UnknownCallError,
 } from "../../../utils/errors.ts";
-import {
-  type ClientGetTokenParts,
-  getSFUConfig,
-  type ClientOpenIDParts,
-  type SFUConfig,
-} from "../../../livekit/auth";
 
 export interface ConnectionOpts {
+  /**
+   * For the local transport we already do know the jwt token and url. We can reuse it.
+   * On top the local transport will send additional data to the jwt server to use delayed event delegation.
+   */
+  existingSFUConfig?: SFUConfig;
   /** The identity parts to use on this connection */
   ownMembershipIdentity: CallMembershipIdentityParts;
-  /** Whether we want to publish or only subscribe on this connection. */
-  role: "publisher" | "subscriber";
   /** The media transport to connect to. */
-  transport: UnstableLivekitTransport;
+  transport: LivekitTransportConfig;
   /** The Matrix client to use for OpenID and SFU config requests. */
-  client: ClientGetTokenParts & ClientOpenIDParts;
+  client: OpenIDClientParts;
   /** The room ID this connection is associated with. */
   roomId: string;
   /** The observable scope to use for this connection. */
@@ -102,15 +104,10 @@ export class Connection {
    */
   public readonly state$: Behavior<ConnectionState | Error> = this._state$;
 
-  /**
-   * Whether we want to publish or only subscribe on this connection.
-   */
-  public readonly role: "publisher" | "subscriber";
-
   /**
    * The media transport to connect to.
    */
-  public readonly transport: UnstableLivekitTransport;
+  public readonly transport: LivekitTransportConfig;
 
   public readonly livekitRoom: LivekitRoom;
 
@@ -140,10 +137,11 @@ export class Connection {
   protected stopped = false;
 
   // TODO: can we just keep the ConnectionOpts object instead of spreading?
-  private readonly client: ClientGetTokenParts & ClientOpenIDParts;
+  private readonly client: OpenIDClientParts;
   private readonly roomId: string;
   private readonly logger: Logger;
   private readonly ownMembershipIdentity: CallMembershipIdentityParts;
+  private readonly existingSFUConfig?: SFUConfig;
   /**
    * Creates a new connection to a matrix RTC LiveKit backend.
    *
@@ -153,16 +151,18 @@ export class Connection {
    */
   public constructor(opts: ConnectionOpts, logger: Logger) {
     this.ownMembershipIdentity = opts.ownMembershipIdentity;
+    this.existingSFUConfig = opts.existingSFUConfig;
     this.roomId = opts.roomId;
     this.logger = logger.getChild(
-      `[Connection ${JSON.stringify(opts.transport)}]`,
+      "[Connection " + opts.transport.livekit_service_url + "]",
     );
-    this.logger.debug(`constructor called`);
-    const { role, transport, client, scope } = opts;
+    this.logger.info(
+      `constructor: ${opts.transport.livekit_service_url} roomId: ${this.roomId} withSfuConfig?: ${opts.existingSFUConfig ? JSON.stringify(opts.existingSFUConfig) : "undefined"}`,
+    );
+    const { transport, client, scope } = opts;
 
     this.scope = scope;
     this.livekitRoom = opts.livekitRoomFactory();
-    this.role = role;
     this.transport = transport;
     this.client = client;
 
@@ -305,9 +305,15 @@ export class Connection {
     this.stopped = false;
     try {
       this._state$.next(ConnectionState.FetchingConfig);
-      const { url, jwt, livekitAlias } = await this.getSFUConfig();
+      // We should already have this information after creating the localTransport.
+      // only call getSFUConfigWithOpenID for connections where we do not have a token yet. (existingJwtTokenData === undefined)
+      const { url, jwt, livekitAlias } =
+        this.existingSFUConfig ??
+        (await this.getSFUConfigForRemoteConnection());
       this.logger.debug(
-        "Starting Connection - jwt: ",
+        "Starting Connection to: ",
+        this.transport.livekit_service_url,
+        "jwt: ",
         jwt,
         "wss: ",
         url,
@@ -389,17 +395,18 @@ export class Connection {
     }
   }
 
-  protected async getSFUConfig(): Promise<SFUConfig> {
+  protected async getSFUConfigForRemoteConnection(): Promise<SFUConfig> {
     // This will only be called for sfu's where we do not publish ourselves.
     // For the local connection we will use the existingJwtTokenData
-    return await getSFUConfig({
-      client: this.client,
-      membership: this.ownMembershipIdentity,
-      role: this.role,
-      transport: this.transport,
-      roomId: this.roomId,
-      logger: this.logger,
-    });
+    return await getSFUConfigWithOpenID(
+      this.client,
+      this.ownMembershipIdentity,
+      this.transport.livekit_service_url,
+      this.roomId,
+      // dont pass any custom opts for the subscribe only connections
+      {},
+      this.logger,
+    );
   }
 
   /**
@@ -409,13 +416,17 @@ export class Connection {
    * If the connection is already stopped, this is a no-op.
    */
   public async stop(): Promise<void> {
-    this.logger.debug("stop: disconnecing from lk room");
+    this.logger.debug(
+      `stop: disconnecing from lk room ${this.transport.livekit_service_url}`,
+    );
     if (this.stopped) return;
     // Mark as stopped before disconnecting so that a connect() aborted by the
     // disconnect sees the flag and does not report the abort as an error.
     this.stopped = true;
     await this.livekitRoom.disconnect();
     this._state$.next(ConnectionState.Stopped);
-    this.logger.debug("stop: DONE disconnecing from lk room");
+    this.logger.debug(
+      `stop: DONE disconnecing from lk room ${this.transport.livekit_service_url}`,
+    );
   }
 }

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

@@ -16,10 +16,14 @@ 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 UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 
 import { type ObservableScope } from "../../ObservableScope.ts";
 import { Connection } from "./Connection.ts";
+import type {
+  OpenIDClientParts,
+  SFUConfig,
+} from "../../../livekit/openIDSFU.ts";
 import type { MediaDevices } from "../../MediaDevices.ts";
 import type { Behavior } from "../../Behavior.ts";
 import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
@@ -35,19 +39,15 @@ import {
   noiseSuppressionSetting,
   autoGainControlSetting,
 } from "../../../settings/settings.ts";
-import {
-  type ClientGetTokenParts,
-  type ClientOpenIDParts,
-} from "../../../livekit/auth";
 
 // TODO evaluate if this should be done like the Publisher Factory
 export interface ConnectionFactory {
   createConnection(
     scope: ObservableScope,
-    role: "publisher" | "subscriber",
-    transport: UnstableLivekitTransport,
+    transport: LivekitTransportConfig,
     ownMembershipIdentity: CallMembershipIdentityParts,
     logger: Logger,
+    sfuConfig?: SFUConfig,
   ): Connection;
 }
 
@@ -66,7 +66,7 @@ export class ECConnectionFactory implements ConnectionFactory {
    * @param livekitRoomFactory - Optional factory function (for testing) to create LivekitRoom instances. If not provided, a default factory is used.
    */
   public constructor(
-    private client: ClientGetTokenParts & ClientOpenIDParts,
+    private client: OpenIDClientParts,
     private readonly roomId: string,
     private devices: MediaDevices,
     private processorState$: Behavior<ProcessorState>,
@@ -103,15 +103,15 @@ export class ECConnectionFactory implements ConnectionFactory {
    */
   public createConnection(
     scope: ObservableScope,
-    role: "publisher" | "subscriber",
-    transport: UnstableLivekitTransport,
+    transport: LivekitTransportConfig,
     ownMembershipIdentity: CallMembershipIdentityParts,
     logger: Logger,
+    sfuConfig?: SFUConfig,
   ): Connection {
     return new Connection(
       {
+        existingSFUConfig: sfuConfig,
         roomId: this.roomId,
-        role,
         transport,
         client: this.client,
         scope: scope,

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 UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { BehaviorSubject, NEVER } from "rxjs";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { type RemoteParticipant } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
 
@@ -19,17 +19,17 @@ import {
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import { type Connection } from "./Connection.ts";
 import { ownMemberMock, withTestScheduler } from "../../../utils/test.ts";
-import { areUnstableLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
+import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
 import { type Behavior } from "../../Behavior.ts";
 
 // Some test constants
 
-const TRANSPORT_1: UnstableLivekitTransport = {
+const TRANSPORT_1: LivekitTransportConfig = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
 };
 
-const TRANSPORT_2: UnstableLivekitTransport = {
+const TRANSPORT_2: LivekitTransportConfig = {
   type: "livekit",
   livekit_service_url: "https://lk.sample.com",
 };
@@ -47,7 +47,7 @@ beforeEach(() => {
   vi.mocked(fakeConnectionFactory).createConnection = vi
     .fn()
     .mockImplementation(
-      (scope: ObservableScope, transport: UnstableLivekitTransport) => {
+      (scope: ObservableScope, transport: LivekitTransportConfig) => {
         const mockConnection = {
           transport,
           remoteParticipants$: new BehaviorSubject([]),
@@ -74,7 +74,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport: TRANSPORT_1,
+        localTransport$: NEVER,
         remoteTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),
@@ -94,13 +94,13 @@ describe("connections$ stream", () => {
           ).toHaveBeenCalledTimes(2);
 
           const conn1 = connections.find((c) =>
-            areUnstableLivekitTransportsEqual(c.transport, TRANSPORT_1),
+            areLivekitTransportsEqual(c.transport, TRANSPORT_1),
           );
           expect(conn1).toBeDefined();
           expect(conn1!.start).toHaveBeenCalled();
 
           const conn2 = connections.find((c) =>
-            areUnstableLivekitTransportsEqual(c.transport, TRANSPORT_2),
+            areLivekitTransportsEqual(c.transport, TRANSPORT_2),
           );
           expect(conn2).toBeDefined();
           expect(conn2!.start).toHaveBeenCalled();
@@ -115,7 +115,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport: TRANSPORT_1,
+        localTransport$: NEVER,
         remoteTransports$: behavior("abcdef", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1], 1),
@@ -141,12 +141,12 @@ describe("connections$ stream", () => {
           ).toHaveBeenCalledTimes(2);
 
           const conn2 = connections.find((c) =>
-            areUnstableLivekitTransportsEqual(c.transport, TRANSPORT_2),
+            areLivekitTransportsEqual(c.transport, TRANSPORT_2),
           );
           expect(conn2).toBeDefined();
 
           const conn1 = connections.find((c) =>
-            areUnstableLivekitTransportsEqual(c.transport, TRANSPORT_1),
+            areLivekitTransportsEqual(c.transport, TRANSPORT_1),
           );
           expect(conn1).toBeDefined();
           expect(conn1!.start).toHaveBeenCalledOnce();
@@ -162,7 +162,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport: TRANSPORT_1,
+        localTransport$: NEVER,
         remoteTransports$: behavior("abc", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1, TRANSPORT_2], 1),
@@ -187,7 +187,7 @@ describe("connections$ stream", () => {
           expect(connections.length).toBe(1);
           // The second connection should have been stopped has it is no longer needed.
           const connection2 = allCreatedConnections.find((c) =>
-            areUnstableLivekitTransportsEqual(c.transport, TRANSPORT_2),
+            areLivekitTransportsEqual(c.transport, TRANSPORT_2),
           );
           expect(connection2).toBeDefined();
           expect(connection2!.stop).toHaveBeenCalled();
@@ -225,20 +225,15 @@ describe("connectionManagerData$ stream", () => {
   // Used in test to control fake connections' remoteParticipants$ streams
   let fakeRemoteParticipantsStreams: Map<string, Behavior<RemoteParticipant[]>>;
 
-  function keyForTransport(transport: UnstableLivekitTransport): string {
-    return JSON.stringify([
-      "url" in transport ? transport.url : undefined,
-      "livekit_service_url" in transport
-        ? transport.livekit_service_url
-        : undefined,
-    ]);
+  function keyForTransport(transport: LivekitTransportConfig): string {
+    return `${transport.livekit_service_url}`;
   }
 
   beforeEach(() => {
     fakeRemoteParticipantsStreams = new Map();
 
     function getRemoteParticipantsFor(
-      transport: UnstableLivekitTransport,
+      transport: LivekitTransportConfig,
     ): Behavior<RemoteParticipant[]> {
       return (
         fakeRemoteParticipantsStreams.get(keyForTransport(transport)) ??
@@ -250,7 +245,7 @@ describe("connectionManagerData$ stream", () => {
     vi.mocked(fakeConnectionFactory).createConnection = vi
       .fn()
       .mockImplementation(
-        (scope: ObservableScope, transport: UnstableLivekitTransport) => {
+        (scope: ObservableScope, transport: LivekitTransportConfig) => {
           const fakeRemoteParticipants$ = new BehaviorSubject<
             RemoteParticipant[]
           >([]);
@@ -302,7 +297,7 @@ describe("connectionManagerData$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport: TRANSPORT_1,
+        localTransport$: NEVER,
         remoteTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),

src/state/CallViewModel/remoteMembers/ConnectionManager.ts

@@ -6,22 +6,32 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import { combineLatest, map, of, switchMap, tap } from "rxjs";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import {
+  combineLatest,
+  map,
+  type Observable,
+  of,
+  switchMap,
+  startWith,
+  catchError,
+  NEVER,
+} from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { type RemoteParticipant } from "livekit-client";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
 import { type Behavior } from "../../Behavior.ts";
 import { type Connection } from "./Connection.ts";
-import {
-  Epoch,
-  mapEpoch,
-  type ObservableScope,
-} from "../../ObservableScope.ts";
+import { Epoch, type ObservableScope } from "../../ObservableScope.ts";
 import { generateItemsWithEpoch } from "../../../utils/observable.ts";
-import { areUnstableLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
+import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
+import {
+  isLocalTransport,
+  type LocalTransport,
+} from "../localMember/LocalTransport.ts";
+import { type SFUConfig } from "../../../livekit/openIDSFU.ts";
 
 export class ConnectionManagerData {
   private readonly store: Map<
@@ -46,15 +56,10 @@ export class ConnectionManagerData {
     }
   }
 
-  private getKey(transport: UnstableLivekitTransport): string {
+  private getKey(transport: LivekitTransportConfig): string {
     // This is enough as a key because the ConnectionManager is already scoped by room.
     // We also do not need to consider the slotId at this point since each `MatrixRTCSession` is already scoped by `slotDescription: {id, application}`.
-    return JSON.stringify([
-      "url" in transport ? transport.url : undefined,
-      "livekit_service_url" in transport
-        ? transport.livekit_service_url
-        : undefined,
-    ]);
+    return transport.livekit_service_url;
   }
 
   public getConnections(): Connection[] {
@@ -62,13 +67,13 @@ export class ConnectionManagerData {
   }
 
   public getConnectionForTransport(
-    transport: UnstableLivekitTransport,
+    transport: LivekitTransportConfig,
   ): Connection | null {
     return this.store.get(this.getKey(transport))?.connection ?? null;
   }
 
   public getParticipantsForTransport(
-    transport: UnstableLivekitTransport,
+    transport: LivekitTransportConfig,
   ): RemoteParticipant[] {
     const key = this.getKey(transport);
     const existing = this.store.get(key);
@@ -82,8 +87,8 @@ export class ConnectionManagerData {
 interface Props {
   scope: ObservableScope;
   connectionFactory: ConnectionFactory;
-  localTransport: UnstableLivekitTransport;
-  remoteTransports$: Behavior<Epoch<UnstableLivekitTransport[]>>;
+  localTransport$: Observable<LocalTransport>;
+  remoteTransports$: Behavior<Epoch<LivekitTransportConfig[]>>;
 
   logger: Logger;
   ownMembershipIdentity: CallMembershipIdentityParts;
@@ -117,7 +122,7 @@ export interface IConnectionManager {
 export function createConnectionManager$({
   scope,
   connectionFactory,
-  localTransport,
+  localTransport$,
   remoteTransports$,
   logger: parentLogger,
   ownMembershipIdentity,
@@ -125,21 +130,49 @@ export function createConnectionManager$({
   const logger = parentLogger.getChild("[ConnectionManager]");
   // TODO logger: only construct one logger from the client and make it compatible via a EC specific sing
 
+  const localTransportAsArray$ = localTransport$.pipe(
+    // LocalMember already surfaces local transport errors properly in the UI,
+    // here we can just swallow them
+    catchError(() => NEVER),
+    map((transport) => [transport]),
+    startWith([]),
+  );
+
   /**
-   * All transports currently managed by the ConnectionManager. This list does
-   * not include duplicate transports.
+   * All transports currently managed by the ConnectionManager.
+   *
+   * This list does not include duplicate transports.
+   *
+   * It is build based on the list of subscribed transports (`transportsSubscriptions$`).
+   * externally this is modified via `registerTransports()`.
    */
-  const localAndRemoteTransports$: Behavior<Epoch<UnstableLivekitTransport[]>> =
-    scope.behavior(
-      remoteTransports$.pipe(
-        mapEpoch((remoteTransports) =>
-          removeDuplicateTransports([localTransport, ...remoteTransports]),
-        ),
-        tap((transports) =>
-          logger.debug("localAndRemoteTransports$ = ", transports),
-        ),
-      ),
-    );
+  const localAndRemoteTransports$: Behavior<
+    Epoch<(LivekitTransportConfig | LocalTransport)[]>
+  > = scope.behavior(
+    combineLatest([localTransportAsArray$, remoteTransports$]).pipe(
+      // Combine local and remote transports into one transport array
+      // and set the forceOldJwtEndpoint property on the local transport
+      map(([localTransportAsArray, remoteTransports]) => {
+        const dedupedRemote = removeDuplicateTransports(remoteTransports.value);
+        const remoteWithoutLocal = dedupedRemote.filter(
+          (transport) =>
+            !localTransportAsArray.find((l) =>
+              areLivekitTransportsEqual(l.transport, transport),
+            ),
+        );
+        logger.debug(
+          "remoteWithoutLocal",
+          remoteWithoutLocal,
+          "localTransportAsArray",
+          localTransportAsArray,
+        );
+        return new Epoch(
+          [...localTransportAsArray, ...remoteWithoutLocal],
+          remoteTransports.epoch,
+        );
+      }),
+    ),
+  );
 
   /**
    * Connections for each transport in use by one or more session members.
@@ -150,31 +183,39 @@ export function createConnectionManager$({
         "ConnectionManager connections$",
         function* (transports) {
           for (const transport of transports) {
-            const role =
-              transport === localTransport
-                ? ("publisher" as const)
-                : ("subscriber" as const);
-            const url = "url" in transport ? transport.url : undefined;
-            const serviceUrl =
-              "livekit_service_url" in transport
-                ? transport.livekit_service_url
-                : undefined;
-            yield { keys: [role, url, serviceUrl], data: undefined };
+            if (isLocalTransport(transport)) {
+              // This is the local transport; only the `LocalTransport`
+              // interface has a `sfuConfig` field.
+              yield {
+                keys: [
+                  transport.transport.livekit_service_url,
+                  transport.sfuConfig,
+                ],
+                data: undefined,
+              };
+            } else {
+              yield {
+                keys: [
+                  transport.livekit_service_url,
+                  undefined as SFUConfig | undefined,
+                ],
+                data: undefined,
+              };
+            }
           }
         },
-        (scope, _data$, role, url, serviceUrl) => {
+        (scope, _data$, serviceUrl, sfuConfig) => {
           const connection = connectionFactory.createConnection(
             scope,
-            role,
             {
               type: "livekit",
-              ...(url === undefined ? {} : { url }),
-              ...(serviceUrl === undefined
-                ? {}
-                : { livekit_service_url: serviceUrl }),
-            } as UnstableLivekitTransport,
+              livekit_service_url: serviceUrl,
+            },
             ownMembershipIdentity,
             logger,
+            // TODO: This whole optional SFUConfig parameter is not particularly elegant.
+            // I would like it if connections always fetched the SFUConfig by themselves.
+            sfuConfig,
           );
           // Start the connection immediately
           // Use connection state to track connection progress
@@ -230,11 +271,11 @@ export function createConnectionManager$({
   return { connectionManagerData$ };
 }
 
-function removeDuplicateTransports<T extends UnstableLivekitTransport>(
+function removeDuplicateTransports<T extends LivekitTransportConfig>(
   transports: T[],
 ): T[] {
   return transports.reduce((acc, transport) => {
-    if (!acc.some((t) => areUnstableLivekitTransportsEqual(t, transport)))
+    if (!acc.some((t) => areLivekitTransportsEqual(t, transport)))
       acc.push(transport);
     return acc;
   }, [] as T[]);

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

@@ -14,10 +14,7 @@ import EventEmitter from "events";
 
 import { ObservableScope } from "../../ObservableScope.ts";
 import { ECConnectionFactory } from "./ConnectionFactory.ts";
-import {
-  type ClientGetTokenParts,
-  type ClientOpenIDParts,
-} from "../../../livekit/auth";
+import type { OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
 import {
   exampleTransport,
   mockMediaDevices,
@@ -35,7 +32,6 @@ import {
   cameraBitrate,
   cameraCodec,
 } from "../../../settings/settings.ts";
-import { testJWTToken } from "../../../utils/test-fixtures.ts";
 
 // At the top of your test file, after imports
 vi.mock("livekit-client", async (importOriginal) => {
@@ -55,14 +51,13 @@ vi.mock("livekit-client", async (importOriginal) => {
 });
 
 let testScope: ObservableScope;
-let mockClient: ClientGetTokenParts & ClientOpenIDParts;
+let mockClient: OpenIDClientParts;
 
 beforeEach(() => {
   testScope = new ObservableScope();
   mockClient = {
     getOpenIdToken: vi.fn().mockReturnValue(""),
     getDeviceId: vi.fn().mockReturnValue("DEV000"),
-    _unstable_getLivekitToken: vi.fn().mockResolvedValue({ jwt: testJWTToken }),
   };
 });
 
@@ -94,7 +89,6 @@ describe("ECConnectionFactory - Audio inputs options", () => {
       );
       ecConnectionFactory.createConnection(
         testScope,
-        "subscriber",
         exampleTransport,
         ownMemberMock,
         logger,
@@ -143,7 +137,6 @@ describe("ECConnectionFactory - ControlledAudioDevice", () => {
       );
       ecConnectionFactory.createConnection(
         testScope,
-        "subscriber",
         exampleTransport,
         ownMemberMock,
         logger,
@@ -179,7 +172,6 @@ describe("ECConnectionFactory - Camera quality settings", () => {
     );
     ecConnectionFactory.createConnection(
       testScope,
-      "subscriber",
       exampleTransport,
       ownMemberMock,
       logger,
@@ -217,7 +209,6 @@ describe("ECConnectionFactory - Camera quality settings", () => {
     );
     ecConnectionFactory.createConnection(
       testScope,
-      "subscriber",
       exampleTransport,
       ownMemberMock,
       logger,
@@ -256,7 +247,6 @@ describe("ECConnectionFactory - Camera quality settings", () => {
     );
     ecConnectionFactory.createConnection(
       testScope,
-      "subscriber",
       exampleTransport,
       ownMemberMock,
       logger,

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

@@ -9,7 +9,7 @@ import { describe, test, expect, beforeEach, afterEach, vi } from "vitest";
 import { logger } from "matrix-js-sdk/lib/logger";
 import {
   type CallMembership,
-  type UnstableLivekitTransport,
+  type LivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, combineLatest, map, type Observable } from "rxjs";
 
@@ -39,14 +39,16 @@ let testScope: ObservableScope;
 const fallbackMemberId = (userId: string, deviceId: string): string =>
   `${userId}:${deviceId}`;
 
-const transportA: UnstableLivekitTransport = {
+const transportA: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
+  livekit_alias: "!alias:example.org",
 };
 
-const transportB: UnstableLivekitTransport = {
+const transportB: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.sample.com",
+  livekit_alias: "!alias:sample.com",
 };
 
 const bobMembership = mockRtcMembership("@bob:example.org", "DEV000", {
@@ -117,18 +119,18 @@ test("should signal participant not yet connected to livekit", async () => {
 function createEpochedMemberships$(m$: Observable<CallMembership[]>): {
   memberships$: Observable<Epoch<CallMembership[]>>;
   membershipsWithTransport$: Observable<
-    Epoch<{ membership: CallMembership; transport?: UnstableLivekitTransport }[]>
+    Epoch<{ membership: CallMembership; transport?: LivekitTransport }[]>
   >;
 } {
   const memberships$ = m$.pipe(trackEpoch());
   const membershipsWithTransport$ = memberships$.pipe(
     mapEpoch((members) => {
       return members.map((m) => {
-        const tr = m.getTransport();
+        const tr = m.getTransport(m);
         return {
           membership: m,
           transport:
-            tr?.type === "livekit" ? (tr as UnstableLivekitTransport) : undefined,
+            tr?.type === "livekit" ? (tr as LivekitTransport) : undefined,
         };
       });
     }),
@@ -150,7 +152,7 @@ test("should signal participant on a connection that is publishing", async () =>
   );
 
   const connection = {
-    transport: bobMembership.getTransport(),
+    transport: bobMembership.getTransport(bobMembership),
   } as unknown as Connection;
   const dataWithPublisher = new ConnectionManagerData();
   dataWithPublisher.add(connection, [
@@ -193,7 +195,7 @@ test("should signal participant on a connection that is not publishing", async (
   );
 
   const connection = {
-    transport: bobMembership.getTransport(),
+    transport: bobMembership.getTransport(bobMembership),
   } as unknown as Connection;
   const dataWithPublisher = new ConnectionManagerData();
   dataWithPublisher.add(connection, []);

src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { type LocalParticipant, type RemoteParticipant } from "livekit-client";
 import {
   type CallMembership,
-  type UnstableLivekitTransport,
+  type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { combineLatest, filter, map } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
@@ -60,9 +60,7 @@ export interface RemoteMatrixLivekitMember extends MatrixLivekitMember {
 interface Props {
   scope: ObservableScope;
   membershipsWithTransport$: Behavior<
-    Epoch<
-      { membership: CallMembership; transport?: UnstableLivekitTransport }[]
-    >
+    Epoch<{ membership: CallMembership; transport?: LivekitTransportConfig }[]>
   >;
   connectionManager: IConnectionManager;
   localUser: { deviceId: string; userId: string };
@@ -113,8 +111,8 @@ export function createRemoteMatrixLivekitMembers$({
             const participants = transport
               ? managerData.getParticipantsForTransport(transport)
               : [];
-            const matches = participants.filter((p) =>
-              membership.backendIdentities.includes(p.identity),
+            const matches = participants.filter(
+              (p) => p.identity == membership.rtcBackendIdentity,
             );
             const participant = matches[0] ?? null;
             const connection = transport
@@ -145,9 +143,9 @@ export function createRemoteMatrixLivekitMembers$({
           // Log whether the member could be matched to a LiveKit participant,
           // since a tile shows "waiting for media" for as long as it cannot.
           participant$.pipe(scope.bind()).subscribe((p) => {
-            const transport = data$.value.connection?.transport;
+            const url = data$.value.connection?.transport.livekit_service_url;
             logger.info(
-              `[RemoteMatrixLivekitMembers] ${rtcBackendIdentity}: LiveKit participant ${p ? `matched (${p.sid})` : "missing"} on ${transport ? JSON.stringify(transport) : "no connection"}`,
+              `[RemoteMatrixLivekitMembers] ${rtcBackendIdentity}: LiveKit participant ${p ? `matched (${p.sid})` : "missing"} on ${url ?? "no connection"}`,
             );
           });
           // will only get called once per backend identity.
@@ -167,26 +165,12 @@ export function createRemoteMatrixLivekitMembers$({
 // TODO add back in the callviewmodel pauseWhen(this.pretendToBeDisconnected$)
 
 // TODO add this to the JS-SDK
-export function areUnstableLivekitTransportsEqual<
-  T extends UnstableLivekitTransport,
->(t1: T | null, t2: T | null): boolean {
+export function areLivekitTransportsEqual<T extends LivekitTransportConfig>(
+  t1: T | null,
+  t2: T | null,
+): boolean {
   if (t1 && t2) {
-    if ("url" in t1 !== "url" in t2) return false;
-    if ("livekit_service_url" in t1 !== "livekit_service_url" in t2)
-      return false;
-    if (
-      "url" in t1 &&
-      t1.url !== (t2 as UnstableLivekitTransport & { url: string }).url
-    )
-      return false;
-    if (
-      "livekit_service_url" in t1 &&
-      t1.livekit_service_url !==
-        (t2 as UnstableLivekitTransport & { livekit_service_url: string })
-          .livekit_service_url
-    )
-      return false;
-    return true;
+    return t1.livekit_service_url === t2.livekit_service_url;
   }
   return !t1 && !t2;
 }

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

@@ -6,11 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { test, vi, expect, beforeEach, afterEach } from "vitest";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, NEVER } from "rxjs";
 import { type Room as LivekitRoom } from "livekit-client";
 import EventEmitter from "events";
 import fetchMock from "fetch-mock";
-import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import {
@@ -19,12 +19,8 @@ import {
   trackEpoch,
 } from "../../ObservableScope.ts";
 import { ECConnectionFactory } from "./ConnectionFactory.ts";
+import { type OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
 import {
-  type ClientGetTokenParts,
-  type ClientOpenIDParts,
-} from "../../../livekit/auth";
-import {
-  exampleTransport,
   mockMediaDevices,
   mockRtcMembership,
   ownMemberMock,
@@ -32,7 +28,7 @@ import {
 } from "../../../utils/test.ts";
 import { type ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
 import {
-  areUnstableLivekitTransportsEqual,
+  areLivekitTransportsEqual,
   createRemoteMatrixLivekitMembers$,
   type RemoteMatrixLivekitMember,
 } from "./MatrixLivekitMembers.ts";
@@ -44,7 +40,7 @@ import { localRtcMember, testJWTToken } from "../../../utils/test-fixtures.ts";
 
 let testScope: ObservableScope;
 let ecConnectionFactory: ECConnectionFactory;
-let mockClient: ClientGetTokenParts & ClientOpenIDParts;
+let mockClient: OpenIDClientParts;
 let lkRoomFactory: () => LivekitRoom;
 
 const createdMockLivekitRooms: Map<string, LivekitRoom> = new Map();
@@ -54,7 +50,6 @@ beforeEach(() => {
   mockClient = {
     getOpenIdToken: vi.fn().mockReturnValue(""),
     getDeviceId: vi.fn().mockReturnValue("DEV000"),
-    _unstable_getLivekitToken: vi.fn().mockResolvedValue({ jwt: testJWTToken }),
   };
 
   lkRoomFactory = vi.fn().mockImplementation(() => {
@@ -128,7 +123,7 @@ test("bob, carl, then bob joining no tracks yet", () => {
     const connectionManager = createConnectionManager$({
       scope: testScope,
       connectionFactory: ecConnectionFactory,
-      localTransport: exampleTransport,
+      localTransport$: NEVER,
       remoteTransports$: membershipsAndTransports.transports$,
       logger: logger,
       ownMembershipIdentity: ownMemberMock,
@@ -152,9 +147,9 @@ test("bob, carl, then bob joining no tracks yet", () => {
         });
         expectObservable(item.connection$).toBe("a", {
           a: expect.toSatisfy((co) =>
-            areUnstableLivekitTransportsEqual(
+            areLivekitTransportsEqual(
               co.transport,
-              bobMembership.transports[0]! as UnstableLivekitTransport,
+              bobMembership.transports[0]! as LivekitTransportConfig,
             ),
           ),
         });
@@ -189,9 +184,9 @@ test("bob, carl, then bob joining no tracks yet", () => {
           expectObservable(item.connection$).toBe("a", {
             a: expect.toSatisfy((connection) => {
               expect(
-                areUnstableLivekitTransportsEqual(
+                areLivekitTransportsEqual(
                   connection.transport,
-                  carlMembership.transports[0]! as UnstableLivekitTransport,
+                  carlMembership.transports[0]! as LivekitTransportConfig,
                 ),
               ).toBe(true);
               return true;
@@ -219,9 +214,9 @@ test("bob, carl, then bob joining no tracks yet", () => {
           expectObservable(item.connection$).toBe("a", {
             a: expect.toSatisfy((connection) => {
               expect(
-                areUnstableLivekitTransportsEqual(
+                areLivekitTransportsEqual(
                   connection.transport,
-                  daveMembership.transports[0]! as UnstableLivekitTransport,
+                  daveMembership.transports[0]! as LivekitTransportConfig,
                 ),
               ).toBe(true);
               return true;

src/state/FloatingTile.test.ts

@@ -0,0 +1,38 @@
+/*
+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 { test } from "vitest";
+import { withTestScheduler } from "../utils/test";
+import { createFloatingTile } from "./FloatingTile";
+
+test("FloatingTile changes alignment on drag", () =>
+  withTestScheduler(({ scope, expectObservable, schedule }) => {
+    // Tile starts in the top left
+    const { alignment$, onDrag } = createFloatingTile(scope, {
+      inline: "start",
+      block: "start",
+    });
+    // Drag to all four corners, and then repeatedly into the top left.
+    schedule("-↗↘↙↖↖", {
+      "↗": () =>
+        onDrag({ x: 100, y: 0, xRatio: 1, yRatio: 0, endOfGesture: false }),
+      "↘": () =>
+        onDrag({ x: 100, y: 100, xRatio: 1, yRatio: 1, endOfGesture: false }),
+      "↙": () =>
+        onDrag({ x: 0, y: 100, xRatio: 0, yRatio: 1, endOfGesture: false }),
+      "↖": () =>
+        onDrag({ x: 0, y: 0, xRatio: 0, yRatio: 0, endOfGesture: false }),
+    });
+    // Alignment should change accordingly. Notably, the alignment should *not*
+    // update when repeatedly dragged into the same corner, for performance.
+    expectObservable(alignment$).toBe("↖↗↘↙↖-", {
+      "↗": { inline: "end", block: "start" },
+      "↘": { inline: "end", block: "end" },
+      "↙": { inline: "start", block: "end" },
+      "↖": { inline: "start", block: "start" },
+    });
+  }));

src/state/FloatingTile.ts

@@ -0,0 +1,43 @@
+/*
+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 { distinctUntilChanged, map, startWith, Subject } from "rxjs";
+
+import { type Behavior } from "./Behavior";
+import { type DragCallback, type Alignment, type Drag } from "./layout-types";
+import { type ObservableScope } from "./ObservableScope";
+
+/**
+ * Represents a floating tile which may be dragged to different corners of the
+ * call interface.
+ */
+export interface FloatingTile {
+  alignment$: Behavior<Alignment>;
+  onDrag: DragCallback;
+}
+
+export function createFloatingTile(
+  scope: ObservableScope,
+  defaultAlignment: Alignment,
+): FloatingTile {
+  const dragEvents$ = new Subject<Drag>();
+  return {
+    alignment$: scope.behavior(
+      dragEvents$.pipe(
+        map<Drag, Alignment>(({ xRatio, yRatio }) => ({
+          inline: xRatio < 0.5 ? "start" : "end",
+          block: yRatio < 0.5 ? "start" : "end",
+        })),
+        startWith(defaultAlignment),
+        distinctUntilChanged(
+          (a1, a2) => a1.inline === a2.inline && a1.block === a2.block,
+        ),
+      ),
+    ),
+    onDrag: (drag) => dragEvents$.next(drag),
+  };
+}

src/state/GridLikeLayout.ts

@@ -5,14 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type BehaviorSubject } from "rxjs";
-
-import {
-  type Alignment,
-  type Layout,
-  type LayoutMedia,
-} from "./layout-types.ts";
+import { type Layout, type LayoutMedia } from "./layout-types.ts";
 import { type TileStore } from "./TileStore";
+import { type FloatingTile } from "./FloatingTile.ts";
 
 export type GridLikeLayoutType =
   | "grid"
@@ -25,7 +20,7 @@ export type GridLikeLayoutType =
  */
 export function gridLikeLayout(
   media: LayoutMedia & { type: GridLikeLayoutType },
-  spotlightAlignment$: BehaviorSubject<Alignment>,
+  floatingSpotlightTile: FloatingTile,
   visibleTiles: number,
   setVisibleTiles: (value: number) => void,
   prevTiles: TileStore,
@@ -42,9 +37,11 @@ export function gridLikeLayout(
   return [
     {
       type: media.type,
-      spotlight: tiles.spotlightTile,
+      spotlight: tiles.spotlightTile && {
+        vm: tiles.spotlightTile,
+        ...floatingSpotlightTile,
+      },
       grid: tiles.gridTiles,
-      spotlightAlignment$,
       setVisibleTiles,
     } as Layout & { type: GridLikeLayoutType },
     tiles,

src/state/OneOnOneDesktopLayout.ts

@@ -6,21 +6,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type BehaviorSubject } from "rxjs";
-
 import {
-  type Alignment,
   type OneOnOneDesktopLayout,
   type OneOnOneDesktopLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";
+import { type FloatingTile } from "./FloatingTile";
 
 /**
  * Produces a one-on-one desktop layout with the given media.
  */
 export function oneOnOneDesktopLayout(
   media: OneOnOneDesktopLayoutMedia,
-  pipAlignment$: BehaviorSubject<Alignment>,
+  pipTile: FloatingTile,
   prevTiles: TileStore,
 ): [OneOnOneDesktopLayout, TileStore] {
   const update = prevTiles.from(2);
@@ -32,8 +30,7 @@ export function oneOnOneDesktopLayout(
     {
       type: media.type,
       spotlight: tiles.gridTilesByMedia.get(media.spotlight)!,
-      pip: tiles.gridTilesByMedia.get(media.pip)!,
-      pipAlignment$,
+      pip: { vm: tiles.gridTilesByMedia.get(media.pip)!, ...pipTile },
     },
     tiles,
   ];

src/state/OneOnOneMobileLayout.ts

@@ -6,23 +6,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type BehaviorSubject } from "rxjs";
-
 import {
-  type Alignment,
   type OneOnOneMobileLayout,
   type OneOnOneMobileLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";
 import { type Behavior } from "./Behavior";
+import { type FloatingTile } from "./FloatingTile";
 
 /**
  * Produces a one-on-one mobile layout with the given media.
  */
 export function oneOnOneMobileLayout(
   media: OneOnOneMobileLayoutMedia,
-  pipSize$: Behavior<"sm" | "lg">,
-  pipAlignment$: BehaviorSubject<Alignment>,
+  pipTile: FloatingTile & { size$: Behavior<"sm" | "lg"> },
   prevTiles: TileStore,
 ): [OneOnOneMobileLayout, TileStore] {
   const update = prevTiles.from(media.pip === undefined ? 0 : 1);
@@ -30,13 +27,12 @@ export function oneOnOneMobileLayout(
   if (media.pip !== undefined) update.registerGridTile(media.pip);
   const tiles = update.build();
 
+  const pipVm = media.pip && tiles.gridTilesByMedia.get(media.pip);
   return [
     {
       type: media.type,
       spotlight: tiles.spotlightTile!,
-      pip: media.pip && tiles.gridTilesByMedia.get(media.pip),
-      pipSize$,
-      pipAlignment$,
+      pip: pipVm && { vm: pipVm, ...pipTile },
     },
     tiles,
   ];

src/state/SessionBehaviors.ts

@@ -7,10 +7,10 @@ Please see LICENSE in the repository root for full details.
 
 import {
   type CallMembership,
-  type UnstableLivekitTransport,
+  type LivekitTransportConfig,
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
-  isUnstableLivekitTransport,
+  isLivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { fromEvent } from "rxjs";
 
@@ -31,32 +31,35 @@ export const membershipsAndTransports$ = (
   memberships$: Behavior<Epoch<CallMembership[]>>,
 ): {
   membershipsWithTransport$: Behavior<
-    Epoch<{ membership: CallMembership; transport?: UnstableLivekitTransport }[]>
+    Epoch<{ membership: CallMembership; transport?: LivekitTransportConfig }[]>
   >;
-  transports$: Behavior<Epoch<UnstableLivekitTransport[]>>;
+  transports$: Behavior<Epoch<LivekitTransportConfig[]>>;
 } => {
   const membershipsWithTransport$: Behavior<
     Epoch<
       {
         membership: CallMembership;
-        transport: UnstableLivekitTransport | undefined;
+        transport: LivekitTransportConfig | undefined;
       }[]
     >
   > = scope.behavior(
     memberships$.pipe(
       mapEpoch((memberships) => {
         return memberships.map((membership) => {
-          const transport = membership.getTransport();
+          const oldestMembership = memberships[0] ?? membership;
+          const transport = membership.getTransport(oldestMembership);
           return {
             membership,
-            transport: isUnstableLivekitTransport(transport) ? transport : undefined,
+            transport: isLivekitTransportConfig(transport)
+              ? transport
+              : undefined,
           };
         });
       }),
     ),
   );
 
-  const transports$: Behavior<Epoch<UnstableLivekitTransport[]>> = scope.behavior(
+  const transports$: Behavior<Epoch<LivekitTransportConfig[]>> = scope.behavior(
     membershipsWithTransport$.pipe(
       mapEpoch((mts) => mts.flatMap(({ transport: t }) => (t ? [t] : []))),
     ),

src/state/SpotlightExpandedLayout.ts

@@ -5,21 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type BehaviorSubject } from "rxjs";
-
 import {
-  type Alignment,
   type SpotlightExpandedLayout,
   type SpotlightExpandedLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";
+import { type FloatingTile } from "./FloatingTile";
 
 /**
  * Produces an expanded spotlight layout with the given media.
  */
 export function spotlightExpandedLayout(
   media: SpotlightExpandedLayoutMedia,
-  pipAlignment$: BehaviorSubject<Alignment>,
+  pipTile: FloatingTile,
   prevTiles: TileStore,
 ): [SpotlightExpandedLayout, TileStore] {
   const update = prevTiles.from(1);
@@ -27,12 +25,12 @@ export function spotlightExpandedLayout(
   if (media.pip !== undefined) update.registerPipTile(media.pip);
   const tiles = update.build();
 
+  const pipVm = tiles.gridTiles.at(0);
   return [
     {
       type: media.type,
       spotlight: tiles.spotlightTile!,
-      pip: tiles.gridTiles.at(0),
-      pipAlignment$,
+      pip: pipVm && { vm: pipVm, ...pipTile },
     },
     tiles,
   ];

src/state/layout-types.test.ts

@@ -6,33 +6,25 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { test, expect } from "vitest";
-import {
-  type Alignment,
-  layoutShallowEquals,
-  type Layout,
-} from "./layout-types";
+import { layoutShallowEquals, type Layout } from "./layout-types";
 import {
   type SpotlightTileViewModel,
   type GridTileViewModel,
 } from "./TileViewModel";
-import { BehaviorSubject } from "rxjs";
+import { type FloatingTile } from "./FloatingTile";
 
 const spotlightTile = {} as unknown as SpotlightTileViewModel;
 const gridTile = {} as unknown as GridTileViewModel;
-const pipAlignment$ = new BehaviorSubject<Alignment>({
-  inline: "end",
-  block: "end",
-});
+const pipTile = {} as unknown as FloatingTile & { vm: GridTileViewModel };
 
 const spotlightExpanded: Layout = {
   type: "spotlight-expanded",
   spotlight: spotlightTile,
-  pipAlignment$,
 };
 
 const spotlightPortrait: Layout = {
   type: "spotlight-portrait",
-  spotlight: spotlightTile,
+  spotlight: { vm: spotlightTile },
   grid: [gridTile],
   setVisibleTiles: () => {},
 };
@@ -46,12 +38,12 @@ test("layoutShallowEquals detects a missing key", () => {
   expect(
     layoutShallowEquals(spotlightExpanded, {
       ...spotlightExpanded,
-      pip: gridTile,
+      pip: pipTile,
     }),
   ).toBe(false);
   expect(
     layoutShallowEquals(
-      { ...spotlightExpanded, pip: gridTile },
+      { ...spotlightExpanded, pip: pipTile },
       spotlightExpanded,
     ),
   ).toBe(false);

src/state/layout-types.ts

@@ -5,8 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type BehaviorSubject } from "rxjs";
-
 import { type LocalUserMediaViewModel } from "./media/LocalUserMediaViewModel.ts";
 import { type MediaViewModel } from "./media/MediaViewModel.ts";
 import { type RingingMediaViewModel } from "./media/RingingMediaViewModel.ts";
@@ -17,6 +15,7 @@ import {
 } from "./TileViewModel.ts";
 import { type Behavior } from "./Behavior.ts";
 import { shallowEquals as arrayShallowEquals } from "../utils/array.ts";
+import { type FloatingTile } from "./FloatingTile.ts";
 
 export interface GridLayoutMedia {
   type: "grid";
@@ -80,24 +79,48 @@ export interface Alignment {
   block: "start" | "end";
 }
 
+export interface Drag {
+  /**
+   * The X offset of the dragged tile relative to its container.
+   */
+  x: number;
+  /**
+   * The Y offset of the dragged tile relative to its container.
+   */
+  y: number;
+  /**
+   * The X coordinate of the dragged tile, as a scalar of the container's width.
+   */
+  xRatio: number;
+  /**
+   * The Y coordinate of the dragged tile, as a scalar of the container's height.
+   */
+  yRatio: number;
+  /**
+   * Whether this event ends the drag gesture.
+   */
+  endOfGesture: boolean;
+}
+
+export type DragCallback = (drag: Drag) => void;
+
 export interface GridLayout {
   type: "grid";
-  spotlight?: SpotlightTileViewModel;
+  spotlight?: FloatingTile & { vm: SpotlightTileViewModel };
   grid: GridTileViewModel[];
-  spotlightAlignment$: BehaviorSubject<Alignment>;
   setVisibleTiles: (value: number) => void;
 }
 
 export interface SpotlightLandscapeLayout {
   type: "spotlight-landscape";
-  spotlight: SpotlightTileViewModel;
+  spotlight: { vm: SpotlightTileViewModel };
   grid: GridTileViewModel[];
   setVisibleTiles: (value: number) => void;
 }
 
 export interface SpotlightPortraitLayout {
   type: "spotlight-portrait";
-  spotlight: SpotlightTileViewModel;
+  spotlight: { vm: SpotlightTileViewModel };
   grid: GridTileViewModel[];
   setVisibleTiles: (value: number) => void;
 }
@@ -105,23 +128,19 @@ export interface SpotlightPortraitLayout {
 export interface SpotlightExpandedLayout {
   type: "spotlight-expanded";
   spotlight: SpotlightTileViewModel;
-  pip?: GridTileViewModel;
-  pipAlignment$: BehaviorSubject<Alignment>;
+  pip?: FloatingTile & { vm: GridTileViewModel };
 }
 
 export interface OneOnOneDesktopLayout {
   type: "one-on-one-desktop";
   spotlight: GridTileViewModel;
-  pip: GridTileViewModel;
-  pipAlignment$: BehaviorSubject<Alignment>;
+  pip: FloatingTile & { vm: GridTileViewModel };
 }
 
 export interface OneOnOneMobileLayout {
   type: "one-on-one-mobile";
   spotlight: SpotlightTileViewModel;
-  pip?: GridTileViewModel;
-  pipSize$: Behavior<"sm" | "lg">;
-  pipAlignment$: BehaviorSubject<Alignment>;
+  pip?: FloatingTile & { vm: GridTileViewModel; size$: Behavior<"sm" | "lg"> };
 }
 
 export interface PipLayout {

src/useAudioContext.tsx

@@ -156,7 +156,7 @@ export function useAudioContext<S extends string>(
       }
       setAudioBuffers(buffers as Record<S, AudioBuffer>);
     })().catch((ex) => {
-      logger.warn("Failed to setup audio context", ex);
+      logger.debug("Failed to setup audio context", ex);
     });
 
     setAudioContext(ctx);
@@ -209,9 +209,7 @@ export function useAudioContext<S extends string>(
     },
     playSoundLooping: (name, delayS: number): (() => Promise<void>) => {
       if (!audioBuffers[name]) {
-        // We do not throw here. Instead we log and let the component life. Its not a fatal error if sounds are missing.
-        logger.debug(`Tried to play a sound that wasn't buffered (${name})`);
-        return async () => {};
+        throw Error(`Tried to play a sound that wasn't buffered (${name})`);
       }
       return playSoundLooping(
         audioContext,

src/utils/observable.ts

@@ -218,28 +218,6 @@ export function filterBehavior<T, S extends T>(
     );
 }
 
-/**
- * Maps a changing input value to an item whose lifetime is tied to a certain
- * computed key. The item may capture some dynamic data from the input.
- */
-export function mapScoped<A, B>(
-  name: string,
-  project: (scope: ObservableScope, a: A) => B,
-): OperatorFunction<A, B> {
-  return (a$) =>
-    a$.pipe(
-      generateItemsInternal(
-        name,
-        function* (a) {
-          yield { keys: [a], data: undefined };
-        },
-        (scope, _data$, a) => project(scope, a),
-        (items) => items,
-      ),
-      map(([item]) => item),
-    );
-}
-
 function generateItemsInternal<
   Input,
   Keys extends [unknown, ...unknown[]],

src/utils/test.ts

@@ -26,7 +26,7 @@ import {
 import {
   CallMembership,
   type LivekitFocusSelection,
-  type UnstableLivekitTransport,
+  type LivekitTransport,
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
   type MatrixRTCSessionEventHandlerMap,
@@ -78,6 +78,7 @@ import {
   type RemoteScreenShareViewModel,
 } from "../state/media/RemoteScreenShareViewModel";
 import { Connection } from "../state/CallViewModel/remoteMembers/Connection";
+import { type SFUConfig } from "../livekit/openIDSFU";
 
 export function withFakeTimers(continuation: () => void): void {
   vi.useFakeTimers();
@@ -208,9 +209,17 @@ export function mockEmitter<T>(): EmitterMock<T> {
   };
 }
 
-export const exampleTransport: UnstableLivekitTransport = {
+export const exampleTransport: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
+  livekit_alias: "!alias:example.org",
+};
+
+export const exampleSfuConfig: SFUConfig = {
+  jwt: "foo",
+  livekitAlias: "bar",
+  livekitIdentity: "baz",
+  url: "bro",
 };
 
 export function mockRtcMembership(
@@ -253,12 +262,11 @@ export function mockRtcMembership(
     content: data,
   });
 
-  const backendIdentity = rtcBackendIdentity ?? `${userId}:${deviceId}`;
+  const membershipData = CallMembership.membershipDataFromMatrixEvent(event);
   const cms = new CallMembership(
     event,
-    CallMembership.membershipDataFromMatrixEvent(event),
-    [backendIdentity],
-    backendIdentity,
+    membershipData,
+    rtcBackendIdentity ?? `${userId}:${deviceId}`,
   );
   vi.mocked(cms).getTransport = vi.fn().mockReturnValue(fociPreferred[0]);
 
@@ -465,7 +473,7 @@ export class MockRTCSession extends TypedEventEmitter<
     counters: {},
   };
 
-  public leave: ReturnType<typeof vitest.fn> = vitest
+  public leaveRoomSession: ReturnType<typeof vitest.fn> = vitest
     .fn()
     .mockResolvedValue(undefined);
 
@@ -524,7 +532,7 @@ export class MockRTCSession extends TypedEventEmitter<
     if (value !== prev) this.emit(MembershipManagerEvent.ProbablyLeft, value);
   }
 
-  public async join(): Promise<void> {
+  public async joinRTCSession(): Promise<void> {
     return Promise.resolve();
   }
 }

src/widget.ts

@@ -175,8 +175,6 @@ export const initializeWidget = (
           receiveToDevice: sendRecvToDevice,
           turnServers: false,
           rtcTransports: true,
-          rtcLivekitGetToken: true,
-          rtcLivekitDelegateDelayedLeave: true,
           sendDelayedEvents: true,
           updateDelayedEvents: true,
           sendSticky: true,

vite-component.config.ts

@@ -49,28 +49,13 @@ export default defineConfig(({ mode }) => {
       cssCodeSplit: false,
       lib: {
         formats: ["es" as const],
-        entry: {
-          // The component
-          "element-call": "./component/index.tsx",
-          // What a host needs to talk about it, without it (see component/api.ts).
-          // Built as an entry point of its own so that importing it does not
-          // load the component: the bundler gives it a chunk that reaches only
-          // what it imports.
-          api: "./component/api.ts",
-        },
-        fileName: (_format, entryName) => `${entryName}.js`,
-        // The one stylesheet (see cssCodeSplit) keeps the name it had when the
-        // component was the only entry
-        cssFileName: "element-call",
+        entry: "./component/index.tsx",
+        fileName: "element-call",
       },
       rollupOptions: {
         // The host already has these, and a second copy of any of them does not
-        // merely bloat the bundle: React would hold two sets of hooks, the
-        // Matrix client would run two sync loops, and a second Compound would
-        // bring a second stylesheet with class names of its own — so that what
-        // it floats into the host's body, tooltips and menus, would match the
-        // host's Compound stylesheet only when the two happened to be the same
-        // version.
+        // merely bloat the bundle: React would hold two sets of hooks, and the
+        // Matrix client would run two sync loops.
         //
         // Every subpath has to be named. Element Call reaches most of the Matrix
         // SDK as `matrix-js-sdk/lib/…`, and a bare "matrix-js-sdk" would not
@@ -107,8 +92,6 @@ export default defineConfig(({ mode }) => {
           "matrix-js-sdk/lib/sync",
           "matrix-js-sdk/lib/types",
           "matrix-js-sdk/lib/utils",
-          "@vector-im/compound-web",
-          "@vector-im/compound-design-tokens/assets/web/icons",
         ],
       },
     },

vite-embedded.config.ts

@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { defineConfig, mergeConfig } from "vite";
+import generateFile from "vite-plugin-generate-file";
 
 import fullConfig from "./vite.config.ts";
 
@@ -18,6 +19,19 @@ export default defineConfig((env) =>
     defineConfig({
       base, // Use relative URLs to allow the app to be hosted under any path
       publicDir: false, // Don't serve the public directory which only contains the favicon
+      plugins: [
+        generateFile([
+          {
+            type: "json",
+            output: "./config.json",
+            data: {
+              matrix_rtc_session: {
+                wait_for_key_rotation_ms: 5000,
+              },
+            },
+          },
+        ]),
+      ],
     }),
   ),
 );

vitest.config.ts

@@ -25,7 +25,6 @@ export default defineConfig((configEnv) =>
                 "src/**/*.test.ts",
                 "src/**/*.test.tsx",
                 "component/**/*.test.ts",
-                "component/**/*.test.tsx",
               ],
             },
           },