Explain why we use merge

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.
 
@@ -309,23 +309,6 @@ root. The host imports the component from
 `react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
 them external.
 
-The component is large, and a host will usually load it lazily, only once a
-call is shown. Everything a host needs in order to talk about a call before
-then is also exported
-from `@element-hq/element-call-component/api` (a small entry point that does not
-load the component).
-
-- props and the types they are made of
-- the handle
-- the host bridge
-- `UserIntent`
-- `HeaderStyle`
-- `BackgroundStyle` enums
-- `configurationForIntent`, the defaults each intent implies
-  Import from it wherever a value such as
-  `BackgroundStyle.Solid` is needed on a path that must stay light; the main
-  entry point re-exports all of it too.
-
 ### Backend
 
 A docker compose file `docker-compose-dev.yml` is provided to start the

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/index.tsx

@@ -36,12 +36,14 @@ 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";
@@ -60,8 +62,10 @@ import { RootElementProvider, useRootElement } from "../src/RootElementContext";
 import {
   configurationForIntent,
   componentProperties,
+  type UrlConfiguration,
   type UrlParams,
   UrlParamsProvider,
+  type UrlProperties,
   UserIntent,
   useUrlParams,
 } from "../src/UrlParams";
@@ -75,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,

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": [

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": []
 }

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

docs/agents/architecture.md

@@ -76,7 +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` subpath the externals list omits. 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/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.)
 

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",
@@ -107,6 +107,7 @@
     "matrix-widget-api": "^1.18.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
+    "observable-hooks": "^4.2.3",
     "oxfmt": "^0.66.0",
     "oxlint": "^1.70.0",
     "oxlint-tsgolint": "^0.25.0",

pnpm-lock.yaml

@@ -192,7 +192,7 @@ importers:
         version: 1.9.2
       matrix-js-sdk:
         specifier: github:matrix-org/matrix-js-sdk#develop
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a
       matrix-widget-api:
         specifier: ^1.18.0
         version: 1.19.0
@@ -202,6 +202,9 @@ importers:
       normalize.css:
         specifier: ^8.0.1
         version: 8.0.1
+      observable-hooks:
+        specifier: ^4.2.3
+        version: 4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2)
       oxfmt:
         specifier: ^0.66.0
         version: 0.66.0
@@ -1194,8 +1197,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':
@@ -3659,8 +3662,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:
@@ -4680,9 +4683,9 @@ packages:
   matrix-events-sdk@0.0.1:
     resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999:
-    resolution: {gitHosted: true, integrity: sha512-qF8++74MX36KS1KEw6Lc8HHXgZ6nHD1oUU4yBZUj5vVPvZTIspk1lOGztkFmizE5vmLAHd5tdadL9Xu1Asy4bA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999}
-    version: 42.3.0
+  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.19.0:
@@ -4813,6 +4816,13 @@ packages:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
+  observable-hooks@4.2.4:
+    resolution: {integrity: sha512-FdTQgyw1h5bG/QHCBIqctdBSnv9VARJCEilgpV6L2qlw1yeLqFIwPm4U15dMtl5kDmNN0hSt+Nl6iYbLFwEcQA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+      rxjs: '>=6.0.0'
+
   obug@2.1.4:
     resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==}
     engines: {node: '>=12.20.0'}
@@ -4895,8 +4905,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:
@@ -7101,7 +7111,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:
@@ -9163,7 +9173,7 @@ snapshots:
 
   constants-browserify@1.0.0: {}
 
-  content-type@3.1.1: {}
+  content-type@3.0.0: {}
 
   convert-source-map@2.0.0: {}
 
@@ -10249,17 +10259,17 @@ snapshots:
 
   matrix-events-sdk@0.0.1: {}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999:
+  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.19.0
-      p-retry: 8.0.1
+      p-retry: 8.0.0
       sdp-transform: 3.0.0
       unhomoglyph: 1.0.6
 
@@ -10400,6 +10410,12 @@ snapshots:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
+  observable-hooks@4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      rxjs: 7.8.2
+
   obug@2.1.4: {}
 
   once@1.4.0:
@@ -10584,7 +10600,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
 

src/MediaDevicesContext.ts

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

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/grid/CallLayout.test.tsx

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

src/grid/CallLayout.ts

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

src/grid/GridLayout.tsx

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

src/grid/OneOnOneDesktopLayout.tsx

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

src/grid/SpotlightLandscapeLayout.tsx

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

src/grid/SpotlightPortraitLayout.tsx

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

src/livekit/TrackProcessorContext.tsx

@@ -20,7 +20,8 @@ import {
 } from "react";
 import { type LocalVideoTrack } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { combineLatest } from "rxjs";
+import { combineLatest, map, type Observable } from "rxjs";
+import { useObservable } from "observable-hooks";
 
 import {
   backgroundBlur as backgroundBlurSettings,
@@ -30,7 +31,6 @@ import { BlurBackgroundTransformer } from "./BlurBackgroundTransformer";
 import { type Behavior } from "../state/Behavior";
 import { type ObservableScope } from "../state/ObservableScope";
 import { platform } from "../Platform";
-import { useValueBehavior } from "../useValueBehavior";
 
 //TODO-MULTI-SFU: This is not yet fully there.
 // it is a combination of exposing observable and react hooks.
@@ -52,8 +52,18 @@ export function useTrackProcessor(): ProcessorState {
   return state;
 }
 
-export function useTrackProcessorState$(): Behavior<ProcessorState> {
-  return useValueBehavior(useTrackProcessor());
+export function useTrackProcessorObservable$(): Observable<ProcessorState> {
+  const state = use(ProcessorContext);
+  if (state === undefined)
+    throw new Error(
+      "useTrackProcessor must be used within a ProcessorProvider",
+    );
+  const state$ = useObservable(
+    (init$) => init$.pipe(map(([init]) => init)),
+    [state],
+  );
+
+  return state$;
 }
 
 /**

src/room/InCallView.tsx

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

src/room/LobbyView.tsx

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

src/settings/DeviceSelection.test.tsx

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

src/settings/DeviceSelection.tsx

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

src/state/CallViewModel/CallViewModel.ts

@@ -30,7 +30,6 @@ import {
   scan,
   startWith,
   Subject,
-  switchAll,
   switchMap,
   switchScan,
   take,
@@ -43,7 +42,7 @@ import {
 import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
   MembershipManagerEvent,
-  type LivekitTransport,
+  type LivekitTransportConfig,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -83,6 +82,7 @@ import {
   type ReactionOption,
 } from "../../reactions";
 import { shallowEquals as shallowArrayEquals } from "../../utils/array";
+import { shallowEquals as shallowObjectEquals } from "../../utils/object";
 import { type MediaDevices } from "../MediaDevices";
 import { constant, type Behavior } from "../Behavior";
 import { E2eeType } from "../../e2ee/e2eeType";
@@ -92,17 +92,17 @@ import { HeaderStyle, type UrlParams } from "../../UrlParams";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { type HostBridge, nullHostBridge } from "../../HostBridge";
 import {
-  layoutShallowEquals,
   type Alignment,
-  type GridLayoutMedia,
   type Layout,
   type LayoutMedia,
-  type OneOnOneDesktopLayoutMedia,
-  type OneOnOneMobileLayoutMedia,
-  type SpotlightExpandedLayoutMedia,
-  type SpotlightLandscapeLayoutMedia,
-  type SpotlightPortraitLayoutMedia,
+  type WindowMode,
 } from "../layout-types.ts";
+import {
+  chooseSpotlightSpeaker,
+  computeLayoutMedia,
+  computeSpotlight,
+  type OneOnOneMedia,
+} from "../layoutMedia.ts";
 import { ElementCallError, UnknownCallError } from "../../utils/errors.ts";
 import { type Epoch, type ObservableScope } from "../ObservableScope.ts";
 import { createHomeserverConnected$ } from "./localMember/HomeserverConnected.ts";
@@ -263,21 +263,10 @@ export function callViewModelOptionsFromParams(
 export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;
 export const THROTTLE_SOUND_EFFECT_MS = 500;
 
-// This is the number of participants that we think constitutes a "small" call
-// on mobile. No spotlight tile should be shown below this threshold.
-const smallMobileCallThreshold = 3;
-
 // How long the footer should be shown for when hovering over or interacting
 // with the interface
 const showFooterMs = 4000;
 
-/**
- * The general shape of the space the call is drawn in. Called a window because
- * that is what it is in the standalone app; for a component it is the container
- * the host gave us, which may be a small corner of a large window.
- */
-export type WindowMode = "normal" | "narrow" | "flat" | "pip";
-
 interface LayoutScanState {
   layout: Layout | null;
   overflowing: boolean;
@@ -624,7 +613,7 @@ export function createCallViewModel$(
     ),
     muteStates,
     joinMatrixRTC: (
-      transport: LivekitTransport,
+      transport: LivekitTransportConfig,
       delayedLeaveTimings: ResolvedDelayedLeaveTimings,
     ) => {
       return enterRTCSession(
@@ -981,33 +970,16 @@ export function createCallViewModel$(
         mediaItems.length === 0
           ? of([])
           : combineLatest(
-              mediaItems.map((m) =>
-                m.speaking$.pipe(map((s) => [m, s] as const)),
+              mediaItems.map((media) =>
+                media.speaking$.pipe(map((speaking) => ({ media, speaking }))),
               ),
             ),
       ),
       scan<
-        (readonly [UserMediaViewModel, boolean])[],
+        { media: UserMediaViewModel; speaking: boolean }[],
         UserMediaViewModel | undefined,
         undefined
-      >((prev, mediaItems) => {
-        // Only remote users that are still in the call should be sticky
-        const [stickyMedia, stickySpeaking] =
-          (!prev?.local && mediaItems.find(([m]) => m === prev)) || [];
-        // Decide who to spotlight:
-        // If the previous speaker is still speaking, stick with them rather
-        // than switching eagerly to someone else
-        return stickySpeaking
-          ? stickyMedia!
-          : // Otherwise, select any remote user who is speaking
-            (mediaItems.find(([m, s]) => !m.local && s)?.[0] ??
-              // Otherwise, stick with the person who was last speaking
-              stickyMedia ??
-              // Otherwise, spotlight an arbitrary remote user
-              mediaItems.find(([m]) => !m.local)?.[0] ??
-              // Otherwise, spotlight the local user
-              mediaItems.find(([m]) => m.local)?.[0]);
-      }, undefined),
+      >(chooseSpotlightSpeaker, undefined),
     ),
   );
 
@@ -1051,33 +1023,12 @@ export function createCallViewModel$(
     ),
   );
 
-  const spotlightAndPip$ = scope.behavior<{
-    spotlight: MediaViewModel[];
-    pip$: Observable<UserMediaViewModel | undefined>;
-  }>(
-    ringingMedia$.pipe(
-      switchMap((ringingMedia) => {
-        if (ringingMedia !== null)
-          return of({ spotlight: [ringingMedia], pip$: localUserMediaForPip$ });
-
-        return screenShares$.pipe(
-          switchMap((screenShares) => {
-            if (screenShares.length > 0)
-              return of({ spotlight: screenShares, pip$: spotlightSpeaker$ });
-
-            return spotlightSpeaker$.pipe(
-              map((speaker) => ({
-                spotlight: speaker ? [speaker] : [],
-                // Hide PiP if redundant (i.e. if local user is already in spotlight)
-                pip$: localUserMediaForPip$.pipe(
-                  map((m) => (m === speaker ? undefined : m)),
-                ),
-              })),
-            );
-          }),
-        );
-      }),
-    ),
+  const spotlightAndPip$ = scope.behavior(
+    combineLatest(
+      [ringingMedia$, screenShares$, spotlightSpeaker$, localUserMediaForPip$],
+      (ringing, screenShares, speaker, localPip) =>
+        computeSpotlight({ ringing, screenShares, speaker, localPip }),
+    ).pipe(distinctUntilChanged(shallowObjectEquals)),
   );
 
   const spotlight$ = scope.behavior<MediaViewModel[]>(
@@ -1135,56 +1086,7 @@ export function createCallViewModel$(
     hasRemoteScreenShares$,
   );
 
-  const gridLayoutMedia$: Observable<GridLayoutMedia> = combineLatest(
-    [grid$, spotlight$],
-    (grid, spotlight) => ({
-      type: "grid",
-      edgeToEdge: false,
-      spotlight: spotlight.some((vm) => vm.type === "screen share")
-        ? spotlight
-        : undefined,
-      grid,
-    }),
-  );
-
-  const spotlightLandscapeLayoutMedia$ = (
-    edgeToEdge: boolean,
-  ): Observable<SpotlightLandscapeLayoutMedia> =>
-    combineLatest([grid$, spotlight$], (grid, spotlight) => ({
-      type: "spotlight-landscape",
-      edgeToEdge,
-      spotlight,
-      grid,
-    }));
-
-  const spotlightPortraitLayoutMedia$: Observable<SpotlightPortraitLayoutMedia> =
-    combineLatest([grid$, spotlight$], (grid, spotlight) => ({
-      type: "spotlight-portrait",
-      edgeToEdge: false,
-      spotlight,
-      grid,
-    }));
-
-  const spotlightExpandedLayoutMedia$ = (
-    edgeToEdge: boolean,
-  ): Observable<SpotlightExpandedLayoutMedia> =>
-    spotlightAndPip$.pipe(
-      switchMap(({ spotlight, pip$ }) =>
-        pip$.pipe(
-          map((pip) => ({
-            type: "spotlight-expanded" as const,
-            edgeToEdge,
-            spotlight,
-            pip: pip ?? undefined,
-          })),
-        ),
-      ),
-    );
-
-  const oneOnOneLayoutMedia$: Behavior<{
-    local: LocalUserMediaViewModel;
-    remote: UserMediaViewModel | RingingMediaViewModel;
-  } | null> = scope.behavior(
+  const oneOnOneLayoutMedia$: Behavior<OneOnOneMedia | null> = scope.behavior(
     combineLatest([userMedia$, screenShares$]).pipe(
       switchMap(([userMedia, screenShares]) => {
         // One-on-one layout only supports 2 user media, no screen shares
@@ -1222,47 +1124,12 @@ export function createCallViewModel$(
     ),
   );
 
-  const oneOnOneDesktopLayoutMedia$: Observable<OneOnOneDesktopLayoutMedia | null> =
+  const localVideoEnabled$ = scope.behavior<boolean>(
     oneOnOneLayoutMedia$.pipe(
-      map((media) => {
-        if (media === null) return null;
-        return media.remote.type === "ringing"
-          ? {
-              type: "one-on-one-desktop" as const,
-              edgeToEdge: false,
-              spotlight: media.local,
-              pip: media.remote,
-            }
-          : {
-              type: "one-on-one-desktop" as const,
-              edgeToEdge: false,
-              spotlight: media.remote,
-              pip: media.local,
-            };
-      }),
-    );
-
-  const oneOnOneMobileLayoutMedia$: Observable<OneOnOneMobileLayoutMedia | null> =
-    oneOnOneLayoutMedia$.pipe(
-      switchMap((media) => {
-        if (media === null) return of(null);
-        return media.local.videoEnabled$.pipe(
-          map((videoEnabled) => ({
-            type: "one-on-one-mobile" as const,
-            edgeToEdge: true as const,
-            spotlight: media.remote,
-            pip: videoEnabled ? media.local : undefined,
-          })),
-        );
-      }),
-    );
-
-  const pipLayoutMedia$: Observable<LayoutMedia> = spotlight$.pipe(
-    map((spotlight) => ({
-      type: "pip",
-      edgeToEdge: platform !== "desktop",
-      spotlight,
-    })),
+      switchMap((media) =>
+        media === null ? of(false) : media.local.videoEnabled$,
+      ),
+    ),
   );
 
   spotlight$
@@ -1297,66 +1164,38 @@ export function createCallViewModel$(
    * The media to be used to produce a layout.
    */
   const layoutMedia$ = scope.behavior<LayoutMedia>(
-    windowMode$.pipe(
-      switchMap((windowMode) => {
-        switch (windowMode) {
-          case "normal":
-            return layoutSwitchVm.layout$.pipe(
-              switchMap((layout) => {
-                switch (layout) {
-                  case "grid":
-                    return oneOnOneDesktopLayoutMedia$.pipe(
-                      switchMap((oneOnOne) =>
-                        oneOnOne === null ? gridLayoutMedia$ : of(oneOnOne),
-                      ),
-                    );
-                  case "spotlight":
-                    return spotlightExpanded$.pipe(
-                      switchMap((expanded) =>
-                        expanded
-                          ? spotlightExpandedLayoutMedia$(false)
-                          : spotlightLandscapeLayoutMedia$(false),
-                      ),
-                    );
-                }
-              }),
-            );
-          case "narrow":
-            return oneOnOneMobileLayoutMedia$.pipe(
-              switchMap((oneOnOne) =>
-                oneOnOne === null
-                  ? combineLatest([grid$, spotlight$], (grid, spotlight) =>
-                      grid.length > smallMobileCallThreshold ||
-                      spotlight.some((vm) => vm.type === "screen share")
-                        ? spotlightPortraitLayoutMedia$
-                        : gridLayoutMedia$,
-                    ).pipe(switchAll())
-                  : of(oneOnOne),
-              ),
-            );
-          case "flat":
-            return oneOnOneMobileLayoutMedia$.pipe(
-              switchMap((oneOnOne) =>
-                oneOnOne === null
-                  ? layoutSwitchVm.layout$.pipe(
-                      switchMap((layout) => {
-                        switch (layout) {
-                          case "grid":
-                            // Yes, grid mode actually gets you a "spotlight" layout in
-                            // this window mode.
-                            return spotlightLandscapeLayoutMedia$(true);
-                          case "spotlight":
-                            return spotlightExpandedLayoutMedia$(true);
-                        }
-                      }),
-                    )
-                  : of(oneOnOne),
-              ),
-            );
-          case "pip":
-            return pipLayoutMedia$;
-        }
-      }),
+    // We deliberately don't use combineLatest here. Several of the inputs
+    // below derive from the same source. So one upstream change cascades
+    // through them one at a time. combineLatest would see each step of the
+    // cascade and emit layouts built from inputs that never coexisted.
+    // Instead, we treat the emissions as a mere "something changed" signal
+    // and read every input's current value. The derived behaviors were
+    // subscribed before this one and a BehaviorSubject updates its value
+    // before notifying. So by the time the first signal arrives every value
+    // is already consistent. The duplicate signals from the rest of the
+    // cascade are dropped by distinctUntilChanged.
+    merge(
+      windowMode$,
+      layoutSwitchVm.layout$,
+      spotlightExpanded$,
+      oneOnOneLayoutMedia$,
+      localVideoEnabled$,
+      spotlightAndPip$,
+      grid$,
+    ).pipe(
+      map(() =>
+        computeLayoutMedia({
+          windowMode: windowMode$.value,
+          layoutMode: layoutSwitchVm.layout$.value,
+          spotlightExpanded: spotlightExpanded$.value,
+          oneOnOne: oneOnOneLayoutMedia$.value,
+          localVideoEnabled: localVideoEnabled$.value,
+          ...spotlightAndPip$.value,
+          grid: grid$.value,
+          desktop: platform === "desktop",
+        }),
+      ),
+      distinctUntilChanged(shallowObjectEquals<LayoutMedia>),
     ),
   );
 
@@ -1657,7 +1496,7 @@ export function createCallViewModel$(
     layoutInternals$.pipe(
       map(({ layout }) => layout),
       // Drop redundant layout updates before they would hit React.
-      distinctUntilChanged<Layout>(layoutShallowEquals),
+      distinctUntilChanged(shallowObjectEquals<Layout>),
     ),
   );
 

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 LivekitTransport,
+  type LivekitTransportConfig,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
@@ -121,7 +121,8 @@ const mockedClient = {
 };
 
 describe("enterRTCSession", () => {
-  const transport: LivekitTransport = {
+  const transport: LivekitTransportConfig = {
+    livekit_alias: "roomId",
     livekit_service_url: "http://my-livekit-service-url.com",
     type: "livekit",
   };
@@ -138,7 +139,7 @@ describe("enterRTCSession", () => {
       client: mockedClient,
     },
     memberships: [],
-    join: vi.fn(),
+    joinRTCSession: vi.fn(),
   }) as unknown as MatrixRTCSession;
 
   beforeEach(() =>
@@ -150,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: {
@@ -174,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,
@@ -186,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({
@@ -206,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({
@@ -252,7 +256,7 @@ describe("LocalMembership", () => {
 
   it("throws error on missing RTC config error", () => {
     withTestScheduler(({ scope, hot, expectObservable }) => {
-      const localTransport$ = scope.behavior<null | LivekitTransport>(
+      const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
         hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
         null,
       );
@@ -300,7 +304,7 @@ describe("LocalMembership", () => {
       ...defaultCreateLocalMemberValues,
       matrixRTCSession: {
         updateCallIntent: vi.fn().mockImplementation(reject),
-        leave: vi.fn(),
+        leaveRoomSession: vi.fn(),
       },
       connectionManager: mockConnectionManager,
       localTransport$: constant(mockTransport),
@@ -317,7 +321,7 @@ describe("LocalMembership", () => {
 
   const mockTransportConfig = {
     livekit_service_url: "a",
-  } as LivekitTransport;
+  } as LivekitTransportConfig;
 
   const mockTransport = {
     transport: mockTransportConfig,

src/state/CallViewModel/localMember/LocalMember.ts

@@ -19,6 +19,7 @@ import { type MatrixClient } from "matrix-js-sdk";
 import {
   Status as RTCSessionStatus,
   type LivekitTransport,
+  type LivekitTransportConfig,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -143,7 +144,7 @@ interface Props {
   connectionManager: IConnectionManager;
   createPublisherFactory: (connection: Connection) => Publisher;
   joinMatrixRTC: (
-    transport: LivekitTransport,
+    transport: LivekitTransportConfig,
     delayedLeaveTimings: ResolvedDelayedLeaveTimings,
   ) => void;
   homeserverConnected: HomeserverConnected;
@@ -151,7 +152,10 @@ interface Props {
   ownMembershipIdentity: CallMembershipIdentityParts;
   localTransport$: Observable<LocalTransport>;
   client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
-  matrixRTCSession: Pick<MatrixRTCSession, "updateCallIntent" | "leave">;
+  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. */
@@ -679,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);
         }
@@ -962,7 +966,7 @@ interface EnterRTCSessionOptions {
 export function enterRTCSession(
   rtcSession: MatrixRTCSession,
   ownMembershipIdentity: CallMembershipIdentityParts,
-  transport: LivekitTransport,
+  transport: LivekitTransportConfig,
   {
     encryptMedia,
     matrixRTCMode,
@@ -983,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
@@ -995,19 +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,
-    makeKeyDelay: sessionConfig.wait_for_key_rotation_ms,
-    membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
-    keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
-    unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
-    maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
-  });
+  rtcSession.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.ts

@@ -5,7 +5,7 @@ SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type LivekitTransport } 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, type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
@@ -34,13 +34,34 @@ interface Props {
   matrixRTCMode: MatrixRTCMode;
 }
 
+// TODO livekit_alias-cleanup
+// 1. We need to move away from transports map to connections!!!
+//
+// 2. We need to stop sending livekit_alias all together
+//
+//
+// 1.
+// Transports are just the jwt service adress but do not contain the information which room on this transport to use.
+// That requires slot and roomId.
+//
+// We need one connection per room on the transport.
+//
+// We need an object that contains:
+// transport
+// roomId
+// slotId
+//
+// To map to the connections. Prosposal: `ConnectionIdentifier`
+//
+// 2.
+// We need to make sure we do not sent livekit_alias in sticky events and that we drop all code for sending state events!
 export interface LocalTransport {
-  transport: LivekitTransport;
+  transport: LivekitTransportConfig;
   sfuConfig: SFUConfig;
 }
 
 export function isLocalTransport(
-  obj: LivekitTransport | LocalTransport,
+  obj: LivekitTransportConfig | LocalTransport,
 ): obj is LocalTransport {
   return "transport" in obj && "sfuConfig" in obj;
 }
@@ -69,7 +90,7 @@ export async function getLocalTransport({
   const customUrl = customLivekitUrl.value$.value;
 
   // Respect the user's custom URL, if set
-  const transport: LivekitTransport | null = customUrl
+  const transport: LivekitTransportConfig | null = customUrl
     ? { type: "livekit", livekit_service_url: customUrl }
     : await discovery.discoverPreferredTransport();
 
@@ -110,7 +131,7 @@ export async function getLocalTransport({
  *  @throws FailToGetOpenIdToken, NoMatrix2AuthorizationService
  */
 async function doOpenIdAndJWTFromUrl(
-  transport: LivekitTransport,
+  transport: LivekitTransportConfig,
   matrixRTCMode: MatrixRTCMode,
   membership: CallMembershipIdentityParts,
   roomId: string,

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 LivekitTransport,
+  type LivekitTransportConfig,
   type Transport,
 } from "matrix-js-sdk/lib/matrixrtc";
 
@@ -28,12 +28,12 @@ import {
 
 type DiscoveryClient = RtcTransportAutoDiscoveryProps["client"];
 
-const backendTransport: LivekitTransport = {
+const backendTransport: LivekitTransportConfig = {
   type: "livekit",
   livekit_service_url: "https://backend.example.org",
 };
 
-const configTransport: LivekitTransport = {
+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 {
-  isLivekitTransport,
-  type LivekitTransport,
+  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,7 +40,7 @@ export class RtcTransportAutoDiscovery {
     this.logger = logger.getChild("[RtcTransportAutoDiscovery]");
   }
 
-  public async discoverPreferredTransport(): Promise<LivekitTransport | null> {
+  public async discoverPreferredTransport(): Promise<LivekitTransportConfig | null> {
     // 1) backend transports
     const backendTransport = await this.tryBackendTransports();
     if (backendTransport) {
@@ -67,7 +67,7 @@ export class RtcTransportAutoDiscovery {
    * This will not throw errors, but instead just log them and return null if the expected config is not found or malformed.
    * @private
    */
-  private async tryBackendTransports(): Promise<LivekitTransport | 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(isLivekitTransport);
+      const first = transportList.find(isLivekitTransportConfig);
       if (first) {
         return first;
       } else {
@@ -90,7 +90,7 @@ export class RtcTransportAutoDiscovery {
     return null;
   }
 
-  private tryConfigTransport(): LivekitTransport | null {
+  private tryConfigTransport(): LivekitTransportConfig | null {
     const url = this.resolvedConfig.livekit?.livekit_service_url;
     if (url) {
       return {

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

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

src/state/CallViewModel/remoteMembers/Connection.ts

@@ -22,7 +22,7 @@ import {
   type Track,
   type TrackPublication,
 } from "livekit-client";
-import { type LivekitTransport } 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";
@@ -52,7 +52,7 @@ export interface ConnectionOpts {
   /** The identity parts to use on this connection */
   ownMembershipIdentity: CallMembershipIdentityParts;
   /** The media transport to connect to. */
-  transport: LivekitTransport;
+  transport: LivekitTransportConfig;
   /** The Matrix client to use for OpenID and SFU config requests. */
   client: OpenIDClientParts;
   /** The room ID this connection is associated with. */
@@ -107,7 +107,7 @@ export class Connection {
   /**
    * The media transport to connect to.
    */
-  public readonly transport: LivekitTransport;
+  public readonly transport: LivekitTransportConfig;
 
   public readonly livekitRoom: LivekitRoom;
 

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

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

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

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { BehaviorSubject, NEVER } from "rxjs";
-import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { type RemoteParticipant } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
 
@@ -24,12 +24,12 @@ import { type Behavior } from "../../Behavior.ts";
 
 // Some test constants
 
-const TRANSPORT_1: LivekitTransport = {
+const TRANSPORT_1: LivekitTransportConfig = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
 };
 
-const TRANSPORT_2: LivekitTransport = {
+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: LivekitTransport) => {
+      (scope: ObservableScope, transport: LivekitTransportConfig) => {
         const mockConnection = {
           transport,
           remoteParticipants$: new BehaviorSubject([]),
@@ -225,7 +225,7 @@ describe("connectionManagerData$ stream", () => {
   // Used in test to control fake connections' remoteParticipants$ streams
   let fakeRemoteParticipantsStreams: Map<string, Behavior<RemoteParticipant[]>>;
 
-  function keyForTransport(transport: LivekitTransport): string {
+  function keyForTransport(transport: LivekitTransportConfig): string {
     return `${transport.livekit_service_url}`;
   }
 
@@ -233,7 +233,7 @@ describe("connectionManagerData$ stream", () => {
     fakeRemoteParticipantsStreams = new Map();
 
     function getRemoteParticipantsFor(
-      transport: LivekitTransport,
+      transport: LivekitTransportConfig,
     ): Behavior<RemoteParticipant[]> {
       return (
         fakeRemoteParticipantsStreams.get(keyForTransport(transport)) ??
@@ -245,7 +245,7 @@ describe("connectionManagerData$ stream", () => {
     vi.mocked(fakeConnectionFactory).createConnection = vi
       .fn()
       .mockImplementation(
-        (scope: ObservableScope, transport: LivekitTransport) => {
+        (scope: ObservableScope, transport: LivekitTransportConfig) => {
           const fakeRemoteParticipants$ = new BehaviorSubject<
             RemoteParticipant[]
           >([]);

src/state/CallViewModel/remoteMembers/ConnectionManager.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import {
   combineLatest,
   map,
@@ -56,7 +56,7 @@ export class ConnectionManagerData {
     }
   }
 
-  private getKey(transport: LivekitTransport): 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 transport.livekit_service_url;
@@ -67,13 +67,13 @@ export class ConnectionManagerData {
   }
 
   public getConnectionForTransport(
-    transport: LivekitTransport,
+    transport: LivekitTransportConfig,
   ): Connection | null {
     return this.store.get(this.getKey(transport))?.connection ?? null;
   }
 
   public getParticipantsForTransport(
-    transport: LivekitTransport,
+    transport: LivekitTransportConfig,
   ): RemoteParticipant[] {
     const key = this.getKey(transport);
     const existing = this.store.get(key);
@@ -88,7 +88,7 @@ interface Props {
   scope: ObservableScope;
   connectionFactory: ConnectionFactory;
   localTransport$: Observable<LocalTransport>;
-  remoteTransports$: Behavior<Epoch<LivekitTransport[]>>;
+  remoteTransports$: Behavior<Epoch<LivekitTransportConfig[]>>;
 
   logger: Logger;
   ownMembershipIdentity: CallMembershipIdentityParts;
@@ -147,7 +147,7 @@ export function createConnectionManager$({
    * externally this is modified via `registerTransports()`.
    */
   const localAndRemoteTransports$: Behavior<
-    Epoch<(LivekitTransport | LocalTransport)[]>
+    Epoch<(LivekitTransportConfig | LocalTransport)[]>
   > = scope.behavior(
     combineLatest([localTransportAsArray$, remoteTransports$]).pipe(
       // Combine local and remote transports into one transport array
@@ -271,7 +271,7 @@ export function createConnectionManager$({
   return { connectionManagerData$ };
 }
 
-function removeDuplicateTransports<T extends LivekitTransport>(
+function removeDuplicateTransports<T extends LivekitTransportConfig>(
   transports: T[],
 ): T[] {
   return transports.reduce((acc, transport) => {

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

@@ -42,11 +42,13 @@ const fallbackMemberId = (userId: string, deviceId: string): string =>
 const transportA: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
+  livekit_alias: "!alias:example.org",
 };
 
 const transportB: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.sample.com",
+  livekit_alias: "!alias:sample.com",
 };
 
 const bobMembership = mockRtcMembership("@bob:example.org", "DEV000", {
@@ -124,7 +126,7 @@ function createEpochedMemberships$(m$: Observable<CallMembership[]>): {
   const membershipsWithTransport$ = memberships$.pipe(
     mapEpoch((members) => {
       return members.map((m) => {
-        const tr = m.getTransport();
+        const tr = m.getTransport(m);
         return {
           membership: m,
           transport:
@@ -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 LivekitTransport,
+  type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { combineLatest, filter, map } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
@@ -60,7 +60,7 @@ export interface RemoteMatrixLivekitMember extends MatrixLivekitMember {
 interface Props {
   scope: ObservableScope;
   membershipsWithTransport$: Behavior<
-    Epoch<{ membership: CallMembership; transport?: LivekitTransport }[]>
+    Epoch<{ membership: CallMembership; transport?: LivekitTransportConfig }[]>
   >;
   connectionManager: IConnectionManager;
   localUser: { deviceId: string; userId: string };
@@ -165,7 +165,7 @@ export function createRemoteMatrixLivekitMembers$({
 // TODO add back in the callviewmodel pauseWhen(this.pretendToBeDisconnected$)
 
 // TODO add this to the JS-SDK
-export function areLivekitTransportsEqual<T extends LivekitTransport>(
+export function areLivekitTransportsEqual<T extends LivekitTransportConfig>(
   t1: T | null,
   t2: T | null,
 ): boolean {

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

@@ -10,7 +10,7 @@ import { BehaviorSubject, NEVER } from "rxjs";
 import { type Room as LivekitRoom } from "livekit-client";
 import EventEmitter from "events";
 import fetchMock from "fetch-mock";
-import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import {
@@ -149,7 +149,7 @@ test("bob, carl, then bob joining no tracks yet", () => {
           a: expect.toSatisfy((co) =>
             areLivekitTransportsEqual(
               co.transport,
-              bobMembership.transports[0]! as LivekitTransport,
+              bobMembership.transports[0]! as LivekitTransportConfig,
             ),
           ),
         });
@@ -186,7 +186,7 @@ test("bob, carl, then bob joining no tracks yet", () => {
               expect(
                 areLivekitTransportsEqual(
                   connection.transport,
-                  carlMembership.transports[0]! as LivekitTransport,
+                  carlMembership.transports[0]! as LivekitTransportConfig,
                 ),
               ).toBe(true);
               return true;
@@ -216,7 +216,7 @@ test("bob, carl, then bob joining no tracks yet", () => {
               expect(
                 areLivekitTransportsEqual(
                   connection.transport,
-                  daveMembership.transports[0]! as LivekitTransport,
+                  daveMembership.transports[0]! as LivekitTransportConfig,
                 ),
               ).toBe(true);
               return true;

src/state/LayoutSwitchViewModel.ts

@@ -14,7 +14,7 @@ import {
   switchAll,
 } from "rxjs";
 
-import { type WindowMode } from "./CallViewModel/CallViewModel.ts";
+import { type WindowMode } from "./layout-types.ts";
 import { constant, type Behavior } from "./Behavior.ts";
 import { type ObservableScope } from "./ObservableScope.ts";
 

src/state/SessionBehaviors.ts

@@ -7,10 +7,10 @@ Please see LICENSE in the repository root for full details.
 
 import {
   type CallMembership,
-  type LivekitTransport,
+  type LivekitTransportConfig,
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
-  isLivekitTransport,
+  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?: LivekitTransport }[]>
+    Epoch<{ membership: CallMembership; transport?: LivekitTransportConfig }[]>
   >;
-  transports$: Behavior<Epoch<LivekitTransport[]>>;
+  transports$: Behavior<Epoch<LivekitTransportConfig[]>>;
 } => {
   const membershipsWithTransport$: Behavior<
     Epoch<
       {
         membership: CallMembership;
-        transport: LivekitTransport | 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: isLivekitTransport(transport) ? transport : undefined,
+            transport: isLivekitTransportConfig(transport)
+              ? transport
+              : undefined,
           };
         });
       }),
     ),
   );
 
-  const transports$: Behavior<Epoch<LivekitTransport[]>> = scope.behavior(
+  const transports$: Behavior<Epoch<LivekitTransportConfig[]>> = scope.behavior(
     membershipsWithTransport$.pipe(
       mapEpoch((mts) => mts.flatMap(({ transport: t }) => (t ? [t] : []))),
     ),

src/state/layout-types.test.ts

@@ -1,74 +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 { test, expect } from "vitest";
-import {
-  type Alignment,
-  layoutShallowEquals,
-  type Layout,
-} from "./layout-types";
-import {
-  type SpotlightTileViewModel,
-  type GridTileViewModel,
-} from "./TileViewModel";
-import { BehaviorSubject } from "rxjs";
-
-const spotlightTile = {} as unknown as SpotlightTileViewModel;
-const gridTile = {} as unknown as GridTileViewModel;
-const pipAlignment$ = new BehaviorSubject<Alignment>({
-  inline: "end",
-  block: "end",
-});
-
-const spotlightExpanded: Layout = {
-  type: "spotlight-expanded",
-  spotlight: spotlightTile,
-  pipAlignment$,
-};
-
-const spotlightPortrait: Layout = {
-  type: "spotlight-portrait",
-  spotlight: spotlightTile,
-  grid: [gridTile],
-  setVisibleTiles: () => {},
-};
-
-test("layoutShallowEquals considers a layout to be equal to its shallow clone", () =>
-  expect(layoutShallowEquals(spotlightExpanded, { ...spotlightExpanded })).toBe(
-    true,
-  ));
-
-test("layoutShallowEquals detects a missing key", () => {
-  expect(
-    layoutShallowEquals(spotlightExpanded, {
-      ...spotlightExpanded,
-      pip: gridTile,
-    }),
-  ).toBe(false);
-  expect(
-    layoutShallowEquals(
-      { ...spotlightExpanded, pip: gridTile },
-      spotlightExpanded,
-    ),
-  ).toBe(false);
-});
-
-test("layoutShallowEquals considers grid arrays with equal contents to be equal", () =>
-  expect(
-    layoutShallowEquals(spotlightPortrait, {
-      ...spotlightPortrait,
-      grid: [...spotlightPortrait.grid],
-    }),
-  ).toBe(true));
-
-test("layoutShallowEquals detects grid arrays with different contents", () =>
-  expect(
-    layoutShallowEquals(spotlightPortrait, {
-      ...spotlightPortrait,
-      grid: [...spotlightPortrait.grid, gridTile],
-    }),
-  ).toBe(false));

src/state/layout-types.ts

@@ -16,7 +16,13 @@ import {
   type SpotlightTileViewModel,
 } from "./TileViewModel.ts";
 import { type Behavior } from "./Behavior.ts";
-import { shallowEquals as arrayShallowEquals } from "../utils/array.ts";
+
+/**
+ * The general shape of the space the call is drawn in. Called a window because
+ * that is what it is in the standalone app; for a component it is the container
+ * the host gave us, which may be a small corner of a large window.
+ */
+export type WindowMode = "normal" | "narrow" | "flat" | "pip";
 
 export interface GridLayoutMedia {
   type: "grid";
@@ -141,30 +147,3 @@ export type Layout =
   | OneOnOneDesktopLayout
   | OneOnOneMobileLayout
   | PipLayout;
-
-/**
- * Tests whether the top-level properties and array elements of layout `a` are
- * equal to those of layout `b`. Useful for deduping redundant layout updates.
- */
-export function layoutShallowEquals(a: Layout, b: Layout): boolean {
-  // If a and b have the same number of keys and every key in a is also in b,
-  // then they have the same keys.
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) return false;
-
-  for (const key of aKeys) {
-    if (!(key in b)) return false;
-
-    // Now check that they have the same values.
-    const aValue = (a as any)[key];
-    const bValue = (b as any)[key];
-    if (Array.isArray(aValue) && Array.isArray(bValue)) {
-      // Special case for arrays so we can detect when the grid tiles arrays are
-      // essentially the same.
-      if (!arrayShallowEquals(aValue, bValue)) return false;
-    } else if (aValue !== bValue) return false;
-  }
-
-  return true;
-}

src/state/layoutMedia.test.ts

@@ -0,0 +1,220 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it } from "vitest";
+
+import {
+  chooseSpotlightSpeaker,
+  computeLayoutMedia,
+  computeSpotlight,
+  type LayoutMediaInputs,
+} from "./layoutMedia";
+import { type LocalUserMediaViewModel } from "./media/LocalUserMediaViewModel";
+import { type RemoteUserMediaViewModel } from "./media/RemoteUserMediaViewModel";
+import { type RingingMediaViewModel } from "./media/RingingMediaViewModel";
+import { type ScreenShareViewModel } from "./media/ScreenShareViewModel";
+
+// The layout functions only look at `type` and `local`, so stubs suffice
+const local = { type: "user", local: true } as LocalUserMediaViewModel;
+const alice = { type: "user", local: false } as RemoteUserMediaViewModel;
+const bob = { type: "user", local: false } as RemoteUserMediaViewModel;
+const carol = { type: "user", local: false } as RemoteUserMediaViewModel;
+const screenShare = {
+  type: "screen share",
+  local: false,
+} as ScreenShareViewModel;
+const ringing = { type: "ringing" } as RingingMediaViewModel;
+
+describe("chooseSpotlightSpeaker", () => {
+  const items = (
+    ...speaking: boolean[]
+  ): {
+    media: RemoteUserMediaViewModel | LocalUserMediaViewModel;
+    speaking: boolean;
+  }[] =>
+    [local, alice, bob].map((media, i) => ({
+      media,
+      speaking: speaking[i] ?? false,
+    }));
+
+  it("prefers a remote speaker over the local user", () => {
+    expect(chooseSpotlightSpeaker(undefined, items(true, false, true))).toBe(
+      bob,
+    );
+  });
+
+  it("falls back to any remote user, then the local user", () => {
+    expect(chooseSpotlightSpeaker(undefined, items())).toBe(alice);
+    expect(
+      chooseSpotlightSpeaker(undefined, [{ media: local, speaking: false }]),
+    ).toBe(local);
+    expect(chooseSpotlightSpeaker(undefined, [])).toBeUndefined();
+  });
+
+  it("sticks with the previous speaker while they keep speaking", () => {
+    expect(chooseSpotlightSpeaker(bob, items(false, true, true))).toBe(bob);
+  });
+
+  it("sticks with the previous speaker when nobody is speaking", () => {
+    expect(chooseSpotlightSpeaker(bob, items())).toBe(bob);
+  });
+
+  it("switches when someone else speaks and the previous speaker is silent", () => {
+    expect(chooseSpotlightSpeaker(bob, items(false, true, false))).toBe(alice);
+  });
+
+  it("forgets a previous speaker who left, and never sticks to the local user", () => {
+    expect(chooseSpotlightSpeaker(carol, items())).toBe(alice);
+    expect(chooseSpotlightSpeaker(local, items())).toBe(alice);
+  });
+});
+
+describe("computeSpotlight", () => {
+  it("spotlights ringing media with the local user in the PiP", () => {
+    expect(
+      computeSpotlight({
+        ringing,
+        screenShares: [screenShare],
+        speaker: alice,
+        localPip: local,
+      }),
+    ).toEqual({ spotlight: [ringing], pip: local });
+  });
+
+  it("spotlights screen shares with the speaker in the PiP", () => {
+    expect(
+      computeSpotlight({
+        ringing: null,
+        screenShares: [screenShare],
+        speaker: alice,
+        localPip: local,
+      }),
+    ).toEqual({ spotlight: [screenShare], pip: alice });
+  });
+
+  it("otherwise spotlights the speaker and hides a redundant PiP", () => {
+    expect(
+      computeSpotlight({
+        ringing: null,
+        screenShares: [],
+        speaker: alice,
+        localPip: local,
+      }),
+    ).toEqual({ spotlight: [alice], pip: local });
+    expect(
+      computeSpotlight({
+        ringing: null,
+        screenShares: [],
+        speaker: local,
+        localPip: local,
+      }),
+    ).toEqual({ spotlight: [local], pip: undefined });
+  });
+});
+
+describe("computeLayoutMedia", () => {
+  const base: LayoutMediaInputs = {
+    windowMode: "normal",
+    layoutMode: "grid",
+    spotlightExpanded: false,
+    oneOnOne: null,
+    localVideoEnabled: true,
+    spotlight: [alice],
+    grid: [local, alice, bob],
+    pip: local,
+    desktop: false,
+  };
+  const layout = (
+    overrides: Partial<LayoutMediaInputs>,
+  ): ReturnType<typeof computeLayoutMedia> =>
+    computeLayoutMedia({ ...base, ...overrides });
+
+  it("uses a plain grid unless a screen share needs the spotlight", () => {
+    expect(layout({})).toEqual({
+      type: "grid",
+      edgeToEdge: false,
+      spotlight: undefined,
+      grid: base.grid,
+    });
+    expect(layout({ spotlight: [screenShare] }).spotlight).toEqual([
+      screenShare,
+    ]);
+  });
+
+  it("switches between landscape and expanded spotlight", () => {
+    expect(layout({ layoutMode: "spotlight" })).toMatchObject({
+      type: "spotlight-landscape",
+      edgeToEdge: false,
+    });
+    expect(
+      layout({ layoutMode: "spotlight", spotlightExpanded: true }),
+    ).toEqual({
+      type: "spotlight-expanded",
+      edgeToEdge: false,
+      spotlight: [alice],
+      pip: local,
+    });
+  });
+
+  it("puts the remote user in the desktop one-on-one spotlight, or the local user when ringing", () => {
+    expect(layout({ oneOnOne: { local, remote: alice } })).toEqual({
+      type: "one-on-one-desktop",
+      edgeToEdge: false,
+      spotlight: alice,
+      pip: local,
+    });
+    expect(layout({ oneOnOne: { local, remote: ringing } })).toMatchObject({
+      spotlight: local,
+      pip: ringing,
+    });
+  });
+
+  it("uses a mobile one-on-one layout in narrow and flat windows, hiding the PiP without video", () => {
+    const oneOnOne = { local, remote: alice };
+    expect(layout({ windowMode: "narrow", oneOnOne })).toEqual({
+      type: "one-on-one-mobile",
+      edgeToEdge: true,
+      spotlight: alice,
+      pip: local,
+    });
+    expect(
+      layout({ windowMode: "flat", oneOnOne, localVideoEnabled: false }),
+    ).toMatchObject({ type: "one-on-one-mobile", pip: undefined });
+  });
+
+  it("uses a portrait spotlight in narrow windows for big calls or screen shares", () => {
+    expect(layout({ windowMode: "narrow" }).type).toBe("grid");
+    expect(
+      layout({ windowMode: "narrow", grid: [local, alice, bob, carol] }).type,
+    ).toBe("spotlight-portrait");
+    expect(
+      layout({ windowMode: "narrow", spotlight: [screenShare] }).type,
+    ).toBe("spotlight-portrait");
+  });
+
+  it("uses edge-to-edge spotlight layouts in flat windows", () => {
+    expect(layout({ windowMode: "flat" })).toMatchObject({
+      type: "spotlight-landscape",
+      edgeToEdge: true,
+    });
+    expect(
+      layout({ windowMode: "flat", layoutMode: "spotlight" }),
+    ).toMatchObject({
+      type: "spotlight-expanded",
+      edgeToEdge: true,
+    });
+  });
+
+  it("uses the PiP layout, edge to edge except on desktop", () => {
+    expect(layout({ windowMode: "pip" })).toEqual({
+      type: "pip",
+      edgeToEdge: true,
+      spotlight: [alice],
+    });
+    expect(layout({ windowMode: "pip", desktop: true }).edgeToEdge).toBe(false);
+  });
+});

src/state/layoutMedia.ts

@@ -0,0 +1,216 @@
+/*
+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 LayoutMode } from "./LayoutSwitchViewModel.ts";
+import {
+  type GridLayoutMedia,
+  type LayoutMedia,
+  type OneOnOneDesktopLayoutMedia,
+  type OneOnOneMobileLayoutMedia,
+  type SpotlightExpandedLayoutMedia,
+  type SpotlightLandscapeLayoutMedia,
+  type SpotlightPortraitLayoutMedia,
+  type WindowMode,
+} from "./layout-types.ts";
+import { type LocalUserMediaViewModel } from "./media/LocalUserMediaViewModel.ts";
+import { type MediaViewModel } from "./media/MediaViewModel.ts";
+import { type RingingMediaViewModel } from "./media/RingingMediaViewModel.ts";
+import { type ScreenShareViewModel } from "./media/ScreenShareViewModel.ts";
+import { type UserMediaViewModel } from "./media/UserMediaViewModel.ts";
+
+/**
+ * This is the number of participants that we think constitutes a "small" call
+ * on mobile. No spotlight tile should be shown below this threshold.
+ */
+const smallMobileCallThreshold = 3;
+
+/**
+ * Picks who to spotlight based on who is speaking, preferring the previous
+ * pick so that the spotlight doesn't flip eagerly between speakers.
+ *
+ * @param prev The previous pick, if any.
+ * @param items All user media in the call along with whether each is speaking.
+ */
+export function chooseSpotlightSpeaker<M extends { local: boolean }>(
+  prev: M | undefined,
+  items: readonly { media: M; speaking: boolean }[],
+): M | undefined {
+  // Only remote users that are still in the call should be sticky
+  const sticky = items.find((i) => i.media === prev && !i.media.local);
+  // If the previous speaker is still speaking, stick with them
+  if (sticky?.speaking) return sticky.media;
+  return (
+    // Otherwise, select any remote user who is speaking
+    items.find((i) => !i.media.local && i.speaking)?.media ??
+    // Otherwise, stick with the person who was last speaking
+    sticky?.media ??
+    // Otherwise, spotlight an arbitrary remote user
+    items.find((i) => !i.media.local)?.media ??
+    // Otherwise, spotlight the local user
+    items.find((i) => i.media.local)?.media
+  );
+}
+
+export interface SpotlightInputs {
+  ringing: RingingMediaViewModel | null;
+  screenShares: ScreenShareViewModel[];
+  speaker: UserMediaViewModel | undefined;
+  /** Local user media suitable for showing in a PiP, if any. */
+  localPip: UserMediaViewModel | undefined;
+}
+
+/**
+ * Decides what goes in the spotlight, and what goes in the picture-in-picture
+ * tile of the expanded spotlight layout.
+ */
+export function computeSpotlight({
+  ringing,
+  screenShares,
+  speaker,
+  localPip,
+}: SpotlightInputs): {
+  spotlight: MediaViewModel[];
+  pip: UserMediaViewModel | undefined;
+} {
+  if (ringing !== null) return { spotlight: [ringing], pip: localPip };
+  if (screenShares.length > 0) return { spotlight: screenShares, pip: speaker };
+  return {
+    spotlight: speaker ? [speaker] : [],
+    // Hide PiP if redundant (i.e. if local user is already in spotlight)
+    pip: localPip === speaker ? undefined : localPip,
+  };
+}
+
+export interface OneOnOneMedia {
+  local: LocalUserMediaViewModel;
+  remote: UserMediaViewModel | RingingMediaViewModel;
+}
+
+export interface LayoutMediaInputs {
+  windowMode: WindowMode;
+  /** The layout chosen with the layout switch. */
+  layoutMode: LayoutMode;
+  spotlightExpanded: boolean;
+  /** Set when the call qualifies for a one-on-one layout. */
+  oneOnOne: OneOnOneMedia | null;
+  localVideoEnabled: boolean;
+  spotlight: MediaViewModel[];
+  grid: UserMediaViewModel[];
+  pip: UserMediaViewModel | undefined;
+  desktop: boolean;
+}
+
+/**
+ * Decides which layout to use and which media goes where in it.
+ */
+export function computeLayoutMedia({
+  windowMode,
+  layoutMode,
+  spotlightExpanded,
+  oneOnOne,
+  localVideoEnabled,
+  spotlight,
+  grid,
+  pip,
+  desktop,
+}: LayoutMediaInputs): LayoutMedia {
+  switch (windowMode) {
+    case "normal":
+      if (layoutMode === "grid")
+        return oneOnOne === null
+          ? gridLayoutMedia(spotlight, grid)
+          : oneOnOneDesktopLayoutMedia(oneOnOne);
+      return spotlightExpanded
+        ? spotlightExpandedLayoutMedia(false, spotlight, pip)
+        : spotlightLandscapeLayoutMedia(false, spotlight, grid);
+    case "narrow":
+      if (oneOnOne !== null)
+        return oneOnOneMobileLayoutMedia(oneOnOne, localVideoEnabled);
+      return grid.length > smallMobileCallThreshold || hasScreenShare(spotlight)
+        ? spotlightPortraitLayoutMedia(spotlight, grid)
+        : gridLayoutMedia(spotlight, grid);
+    case "flat":
+      if (oneOnOne !== null)
+        return oneOnOneMobileLayoutMedia(oneOnOne, localVideoEnabled);
+      // Yes, grid mode actually gets you a "spotlight" layout in this window
+      // mode.
+      return layoutMode === "grid"
+        ? spotlightLandscapeLayoutMedia(true, spotlight, grid)
+        : spotlightExpandedLayoutMedia(true, spotlight, pip);
+    case "pip":
+      return { type: "pip", edgeToEdge: !desktop, spotlight };
+  }
+}
+
+function hasScreenShare(spotlight: MediaViewModel[]): boolean {
+  return spotlight.some((vm) => vm.type === "screen share");
+}
+
+function gridLayoutMedia(
+  spotlight: MediaViewModel[],
+  grid: UserMediaViewModel[],
+): GridLayoutMedia {
+  return {
+    type: "grid",
+    edgeToEdge: false,
+    spotlight: hasScreenShare(spotlight) ? spotlight : undefined,
+    grid,
+  };
+}
+
+function oneOnOneDesktopLayoutMedia(
+  media: OneOnOneMedia,
+): OneOnOneDesktopLayoutMedia {
+  return media.remote.type === "ringing"
+    ? {
+        type: "one-on-one-desktop",
+        edgeToEdge: false,
+        spotlight: media.local,
+        pip: media.remote,
+      }
+    : {
+        type: "one-on-one-desktop",
+        edgeToEdge: false,
+        spotlight: media.remote,
+        pip: media.local,
+      };
+}
+
+function spotlightExpandedLayoutMedia(
+  edgeToEdge: boolean,
+  spotlight: MediaViewModel[],
+  pip: UserMediaViewModel | undefined,
+): SpotlightExpandedLayoutMedia {
+  return { type: "spotlight-expanded", edgeToEdge, spotlight, pip };
+}
+
+function spotlightLandscapeLayoutMedia(
+  edgeToEdge: boolean,
+  spotlight: MediaViewModel[],
+  grid: UserMediaViewModel[],
+): SpotlightLandscapeLayoutMedia {
+  return { type: "spotlight-landscape", edgeToEdge, spotlight, grid };
+}
+
+function oneOnOneMobileLayoutMedia(
+  media: OneOnOneMedia,
+  localVideoEnabled: boolean,
+): OneOnOneMobileLayoutMedia {
+  return {
+    type: "one-on-one-mobile",
+    edgeToEdge: true,
+    spotlight: media.remote,
+    pip: localVideoEnabled ? media.local : undefined,
+  };
+}
+
+function spotlightPortraitLayoutMedia(
+  spotlight: MediaViewModel[],
+  grid: UserMediaViewModel[],
+): SpotlightPortraitLayoutMedia {
+  return { type: "spotlight-portrait", edgeToEdge: false, spotlight, grid };
+}

src/state/media/MediaViewModel.test.ts

@@ -25,7 +25,6 @@ import {
   mockRemoteScreenShare,
 } from "../../utils/test";
 import { constant } from "../Behavior";
-import { showConnectionStats } from "../../settings/settings";
 
 global.MediaStreamTrack = class {} as unknown as {
   new (): MediaStreamTrack;
@@ -43,12 +42,6 @@ vi.mock("../../Platform", () => ({
   },
 }));
 
-const observeRtpStreamStatsMock = vi.hoisted(() => vi.fn());
-vi.mock("./observeRtpStreamStats", async (importOriginal) => ({
-  ...(await importOriginal<Record<string, unknown>>()),
-  observeRtpStreamStats$: observeRtpStreamStatsMock,
-}));
-
 const rtcMembership = mockRtcMembership("@alice:example.org", "AAAA");
 
 test("control a participant's volume", () => {
@@ -296,37 +289,3 @@ test("remote media is not in waiting state when user does not intend to publish
   );
   expect(vm.waitingForMedia$.value).toBe(false);
 });
-
-test("user media polls stream stats only while the setting is on", () => {
-  const participant = mockRemoteParticipant({});
-  const vm = mockRemoteMedia(rtcMembership, {}, participant);
-  onTestFinished(() => showConnectionStats.setValue(false));
-  withTestScheduler(({ cold, expectObservable, schedule }) => {
-    const stats = { type: "inbound-rtp" } as RTCInboundRtpStreamStats;
-    observeRtpStreamStatsMock.mockImplementation(() =>
-      cold("-s", { s: stats }),
-    );
-    schedule("-a-b", {
-      a() {
-        showConnectionStats.setValue(true);
-      },
-      b() {
-        showConnectionStats.setValue(false);
-      },
-    });
-    expectObservable(vm.audioStreamStats$).toBe("u-su", {
-      u: undefined,
-      s: stats,
-    });
-  });
-  expect(observeRtpStreamStatsMock).toHaveBeenCalledWith(
-    participant,
-    Track.Source.Microphone,
-    "inbound-rtp",
-  );
-  expect(observeRtpStreamStatsMock).toHaveBeenCalledWith(
-    participant,
-    Track.Source.Camera,
-    "inbound-rtp",
-  );
-});

src/state/media/UserMediaViewModel.ts

@@ -10,6 +10,7 @@ import {
   BehaviorSubject,
   combineLatest,
   map,
+  type Observable,
   of,
   Subject,
   switchMap,
@@ -53,10 +54,10 @@ export interface BaseUserMediaViewModel extends BaseMemberMediaViewModel {
   rtcBackendIdentity: string;
   handRaised$: Behavior<Date | null>;
   reaction$: Behavior<ReactionOption | null>;
-  audioStreamStats$: Behavior<
+  audioStreamStats$: Observable<
     RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
   >;
-  videoStreamStats$: Behavior<
+  videoStreamStats$: Observable<
     RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
   >;
   /**
@@ -93,21 +94,6 @@ export function createBaseUserMedia(
   );
   const toggleCropVideo$ = new Subject<void>();
   const videoAspectRatio$ = new BehaviorSubject(NaN);
-  const streamStats$ = (
-    scope: ObservableScope,
-    source: Track.Source,
-  ): Behavior<
-    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-  > =>
-    scope.behavior(
-      combineLatest([participant$, showConnectionStats.value$]).pipe(
-        switchMap(([p, showConnectionStats]) =>
-          p && showConnectionStats
-            ? observeRtpStreamStats$(p, source, statsType)
-            : of(undefined),
-        ),
-      ),
-    );
 
   return {
     ...createMemberMedia(scope, {
@@ -144,8 +130,25 @@ export function createBaseUserMedia(
     rtcBackendIdentity,
     handRaised$,
     reaction$,
-    audioStreamStats$: streamStats$(scope, Track.Source.Microphone),
-    videoStreamStats$: streamStats$(scope, Track.Source.Camera),
+    audioStreamStats$: combineLatest([
+      participant$,
+      showConnectionStats.value$,
+    ]).pipe(
+      switchMap(([p, showConnectionStats]) => {
+        //
+        if (!p || !showConnectionStats) return of(undefined);
+        return observeRtpStreamStats$(p, Track.Source.Microphone, statsType);
+      }),
+    ),
+    videoStreamStats$: combineLatest([
+      participant$,
+      showConnectionStats.value$,
+    ]).pipe(
+      switchMap(([p, showConnectionStats]) => {
+        if (!p || !showConnectionStats) return of(undefined);
+        return observeRtpStreamStats$(p, Track.Source.Camera, statsType);
+      }),
+    ),
     setVideoAspectRatio: (ratio) => videoAspectRatio$.next(ratio),
   };
 }

src/tile/GridTile.tsx

@@ -37,6 +37,7 @@ import {
   Menu,
   Text,
 } from "@vector-im/compound-web";
+import { useObservableEagerState } from "observable-hooks";
 
 import styles from "./GridTile.module.css";
 import { Slider } from "../Slider";
@@ -132,8 +133,12 @@ const UserMediaTileInner: FC<UserMediaTileProps & { menu: ReactNode }> = ({
   const { t } = useTranslation();
   const video = useBehavior(vm.video$);
   const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
-  const audioStreamStats = useBehavior(vm.audioStreamStats$);
-  const videoStreamStats = useBehavior(vm.videoStreamStats$);
+  const audioStreamStats = useObservableEagerState<
+    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
+  >(vm.audioStreamStats$);
+  const videoStreamStats = useObservableEagerState<
+    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
+  >(vm.videoStreamStats$);
   const audioEnabled = useBehavior(vm.audioEnabled$);
   const videoEnabled = useBehavior(vm.videoEnabled$);
   const speaking = useBehavior(vm.speaking$);

src/tile/SpotlightTile.tsx

@@ -26,7 +26,8 @@ import {
   VolumeOnSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { animated } from "@react-spring/web";
-import { BehaviorSubject, type Observable, map } from "rxjs";
+import { type Observable, map } from "rxjs";
+import { useObservableRef } from "observable-hooks";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
@@ -415,13 +416,7 @@ export const SpotlightTile: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const rootElement = useRootElement();
-  const root$ = useInitial(
-    () => new BehaviorSubject<HTMLDivElement | null>(null),
-  );
-  const ourRef = useCallback(
-    (root: HTMLDivElement | null) => root$.next(root),
-    [root$],
-  );
+  const [ourRef, root$] = useObservableRef<HTMLDivElement | null>(null);
   const ref = useMergedRefs(ourRef, theirRef);
   const maximised = useBehavior(vm.maximised$);
   const background = useBehavior(vm.background$);

src/useAudioContext.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { logger } from "matrix-js-sdk/lib/logger";
 import { useState, useEffect } from "react";
+import { useObservableEagerState } from "observable-hooks";
 
 import {
   soundEffectVolume as soundEffectVolumeSetting,
@@ -16,7 +17,6 @@ import { useEarpieceAudioConfig, useMediaDevices } from "./MediaDevicesContext";
 import { type PrefetchedSounds } from "./soundUtils";
 import { useUrlParams } from "./UrlParams";
 import * as controls from "./controls";
-import { useBehavior } from "./useBehavior";
 
 /**
  * Play a sound though a given AudioContext. Will take
@@ -168,7 +168,7 @@ export function useAudioContext<S extends string>(
     };
   }, [props.sounds, props.latencyHint]);
 
-  const audioOutputId = useBehavior(
+  const audioOutputId = useObservableEagerState(
     useMediaDevices().audioOutput.selected$,
   )?.id;
   const { controlledAudioDevices } = useUrlParams();

src/useBehavior.test.tsx

@@ -1,23 +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 { act, renderHook } from "@testing-library/react";
-import { BehaviorSubject } from "rxjs";
-import { describe, expect, test } from "vitest";
-
-import { useBehavior } from "./useBehavior";
-
-describe("useBehavior", () => {
-  test("reads the current value and follows changes", () => {
-    const value$ = new BehaviorSubject(1);
-    const { result } = renderHook(() => useBehavior(value$));
-    expect(result.current).toBe(1);
-
-    act(() => value$.next(2));
-    expect(result.current).toBe(2);
-  });
-});

src/useValueBehavior.test.tsx

@@ -1,34 +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 { renderHook } from "@testing-library/react";
-import { describe, expect, test } from "vitest";
-
-import { useValueBehavior } from "./useValueBehavior";
-
-describe("useValueBehavior", () => {
-  test("holds the value from the first render", () => {
-    const { result } = renderHook(({ value }) => useValueBehavior(value), {
-      initialProps: { value: "a" },
-    });
-    expect(result.current.value).toBe("a");
-  });
-
-  test("keeps one identity and takes each new value", () => {
-    const { result, rerender } = renderHook(
-      ({ value }) => useValueBehavior(value),
-      { initialProps: { value: "a" } },
-    );
-    const value$ = result.current;
-    const seen: string[] = [];
-    value$.subscribe((value) => seen.push(value));
-
-    rerender({ value: "b" });
-    expect(result.current).toBe(value$);
-    expect(seen).toEqual(["a", "b"]);
-  });
-});

src/useValueBehavior.ts

@@ -1,25 +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 { useEffect } from "react";
-import { BehaviorSubject } from "rxjs";
-
-import { type Behavior } from "./state/Behavior";
-import { useInitial } from "./useInitial";
-
-/**
- * React hook which mirrors a value from the render cycle into a behavior, so
- * that a prop or memoised value can be handed to a view model. The behavior
- * takes each new value once the render that produced it has committed.
- */
-export function useValueBehavior<T>(value: T): Behavior<T> {
-  const value$ = useInitial(() => new BehaviorSubject(value));
-  useEffect(() => {
-    value$.next(value);
-  }, [value$, value]);
-  return value$;
-}

src/utils/object.test.ts

@@ -0,0 +1,40 @@
+/*
+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, expect } from "vitest";
+import { shallowEquals } from "./object";
+
+interface Thing {
+  type: string;
+  items: object[];
+  value: number;
+  extra?: object;
+}
+
+const item = {};
+const withArray: Thing = { type: "a", items: [item], value: 1 };
+
+test("shallowEquals considers an object to be equal to its shallow clone", () =>
+  expect(shallowEquals(withArray, { ...withArray })).toBe(true));
+
+test("shallowEquals detects a missing key", () => {
+  expect(shallowEquals(withArray, { ...withArray, extra: item })).toBe(false);
+  expect(shallowEquals({ ...withArray, extra: item }, withArray)).toBe(false);
+});
+
+test("shallowEquals detects a differing value", () =>
+  expect(shallowEquals(withArray, { ...withArray, value: 2 })).toBe(false));
+
+test("shallowEquals considers arrays with equal contents to be equal", () =>
+  expect(
+    shallowEquals(withArray, { ...withArray, items: [...withArray.items] }),
+  ).toBe(true));
+
+test("shallowEquals detects arrays with different contents", () =>
+  expect(
+    shallowEquals(withArray, { ...withArray, items: [...withArray.items, {}] }),
+  ).toBe(false));

src/utils/object.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 { shallowEquals as arrayShallowEquals } from "./array.ts";
+
+/**
+ * Determine whether two objects are equal by shallow comparison of their
+ * top-level properties. Array-valued properties are themselves compared
+ * shallowly, so two objects holding distinct arrays with the same elements are
+ * considered equal.
+ */
+export function shallowEquals<T extends object>(
+  a: Readonly<T>,
+  b: Readonly<T>,
+): boolean {
+  // If a and b have the same number of keys and every key in a is also in b,
+  // then they have the same keys.
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+
+  for (const key of aKeys) {
+    if (!(key in b)) return false;
+
+    // Now check that they have the same values.
+    const aValue = (a as any)[key];
+    const bValue = (b as any)[key];
+    if (Array.isArray(aValue) && Array.isArray(bValue)) {
+      if (!arrayShallowEquals(aValue, bValue)) return false;
+    } else if (aValue !== bValue) return false;
+  }
+
+  return true;
+}

src/utils/test.ts

@@ -212,6 +212,7 @@ export function mockEmitter<T>(): EmitterMock<T> {
 export const exampleTransport: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
+  livekit_alias: "!alias:example.org",
 };
 
 export const exampleSfuConfig: SFUConfig = {
@@ -472,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);
 
@@ -531,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();
   }
 }

vite-component.config.ts

@@ -49,19 +49,8 @@ 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