use latest lk-jwt-service for CI

fix snapshot test following commit 007a50d

.eslintrc.cjs

@@ -44,7 +44,7 @@ module.exports = {
     ],
     // To encourage good usage of RxJS:
     "rxjs/no-exposed-subjects": "error",
-    "rxjs/finnish": "error",
+    "rxjs/finnish": ["error", { names: { "^this$": false } }],
   },
   settings: {
     react: {

.gitignore

@@ -9,6 +9,7 @@ dist-ssr
 public/config.json
 backend/synapse_tmp/*
 /coverage
+config.json
 
 # Yarn
 yarn-error.log

backend/dev_livekit.yaml

@@ -21,3 +21,5 @@ turn:
   external_tls: true
 keys:
   devkey: secret
+room:
+  auto_create: false

config/config.devenv.json

@@ -14,6 +14,6 @@
     "membership_event_expiry_ms": 180000000,
     "delayed_leave_event_delay_ms": 18000,
     "delayed_leave_event_restart_ms": 4000,
-    "network_error_retry_ms": 4000
+    "network_error_retry_ms": 100
   }
 }

config/config.sample.json

@@ -17,6 +17,6 @@
     "membership_event_expiry_ms": 180000000,
     "delayed_leave_event_delay_ms": 18000,
     "delayed_leave_event_restart_ms": 4000,
-    "network_error_retry_ms": 4000
+    "network_error_retry_ms": 100
   }
 }

config/config_netlify_preview.json

@@ -11,7 +11,7 @@
     "membership_event_expiry_ms": 180000000,
     "delayed_leave_event_delay_ms": 18000,
     "delayed_leave_event_restart_ms": 4000,
-    "network_error_retry_ms": 4000
+    "network_error_retry_ms": 100
   },
   "posthog": {
     "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU",

dev-backend-docker-compose.yml

@@ -14,6 +14,7 @@ services:
       # If the configured homeserver runs on localhost, it'll probably be using
       # a self-signed certificate
       - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
+      - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
     deploy:
       restart_policy:
         condition: on-failure
@@ -101,4 +102,6 @@ services:
     depends_on:
       - synapse
     networks:
-      - ecbackend
+      ecbackend:
+        aliases:
+          - matrix-rtc.m.localhost

docs/controls.md

@@ -17,9 +17,15 @@ On mobile platforms (iOS, Android), web views do not reliably support selecting
 - `controls.onAudioDeviceSelect: ((id: string) => void) | undefined` Callback called whenever the user or application selects a new audio output.
 - `controls.setAudioDevice(id: string): void` Sets the selected audio device in Element Call's menu. This should be used if the OS decides to automatically switch to Bluetooth, for example.
 - `controls.setAudioEnabled(enabled: boolean)` Enables/disables all audio output from the application. Output is enabled by default.
-- `showNativeAudioDevicePicker: (() => void) | undefined`. Callback called whenever the user presses the output button in the settings menu.
-  This button is only shown on iOS. (`userAgent.includes("iPhone")`)
 - `controls.onAudioPlaybackStarted: ((id: string) => void) | undefined`: This will be called the first time we start
   playing audio in the webview. It can be helpful to do device setup on the native app when the webviews audio is ready.
   In particular android is using it to setup the output channel so that the call volume can
   be controlled by the hardware volume rocker.
+
+## Element Call button delegation
+
+Callbacks for buttons in EC that are handled by the native application
+
+- `showNativeAudioDevicePicker: (() => void) | undefined`. Callback called whenever the user presses the output button in the settings menu.
+  This button is only shown on iOS. (`/iPad|iPhone|iPod|Mac/.test(navigator.userAgent)`)
+- `onBackButtonPressed: (() => void) | undefined`. Callback when the webview detects a tab on the header's back button.

docs/url-params.md

@@ -56,7 +56,7 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `enableE2EE` (deprecated)                               | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch.                                                                                                                                                                                                                                                                                                                      |
 | `fontScale`                                             | A decimal number such as `0.9`                                                                       | No, defaults to `1.0`                                                                             | No, defaults to `1.0`        | Factor by which to scale the interface's font size.                                                                                                                                                                                                                                                                                                                                                 |
 | `fonts`                                                 |                                                                                                      | No                                                                                                | No                           | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`.                                                                                                                                                                                                                                                                            |
-| `hideHeader`                                            | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the room header when in a call.                                                                                                                                                                                                                                                                                                                                                               |
+| `header`                                                | `none`, `standard` or `app_bar`                                                                      | No, defaults to `standard`                                                                        | No, defaults to `standard`   | 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`.                                                                                                                             |
 | `hideScreensharing`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the screen-sharing button.                                                                                                                                                                                                                                                                                                                                                                    |
 | `homeserver`                                            |                                                                                                      | Not applicable                                                                                    | No                           | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
 | `intent`                                                | `start_call` or `join_existing`                                                                      | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent of the user with respect to the call. e.g. if they clicked a Start Call button, this would be `start_call`. If it was a Join Call button, it would be `join_existing`.                                                                                                                                                                                                                   |
@@ -69,6 +69,7 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `skipLobby` (deprecated: use `intent` instead)          | `true` or `false`                                                                                    | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false`      | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |
 | `theme`                                                 | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                 | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
 | `viaServers`                                            | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
+| `sendNotificationType`                                  | `ring` or `notification`                                                                             | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
 
 ### Widget-only parameters
 

embedded/android/gradle/libs.versions.toml

@@ -2,11 +2,11 @@
 # https://docs.gradle.org/current/userguide/platforms.html#sub::toml-dependencies-format
 
 [versions]
-android_gradle_plugin = "8.10.1"
+android_gradle_plugin = "8.11.0"
 
 [libraries]
 android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref = "android_gradle_plugin" }
 
 [plugins]
 android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
-maven_publish = { id = "com.vanniktech.maven.publish", version = "0.32.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.33.0" }

embedded/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.2-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

locales/de/app.json

@@ -175,7 +175,7 @@
       "camera_numbered": "Kamera {{n}}",
       "default": "Standard",
       "default_named": "Standard<2> ({{name}} )</2>",
-      "earpiece": "Ohrhörer",
+      "handset": "Ohrhörer",
       "microphone": "Mikrofon",
       "microphone_numbered": "Mikrofon{{n}}",
       "speaker": "Lautsprecher",

locales/en/app.json

@@ -82,7 +82,7 @@
   "error": {
     "call_is_not_supported": "Call is not supported",
     "call_not_found": "Call not found",
-    "call_not_found_description": "<0>That link doesn't appear to belong to any existing call. Check that you have the right link, or <1>create a new one</1>.</0>",
+    "call_not_found_description": "<0>That link doesn't appear to belong to any existing call. Check that you have the right link, or <2>create a new one</2>.</0>",
     "connection_lost": "Connection lost",
     "connection_lost_description": "You were disconnected from the call.",
     "e2ee_unsupported": "Incompatible browser",
@@ -105,6 +105,11 @@
     "knock_reject_heading": "Access denied",
     "reason": "Reason: {{reason}}"
   },
+  "handset": {
+    "overlay_back_button": "Back to Speaker Mode",
+    "overlay_description": "Only works while using app",
+    "overlay_title": "Handset Mode"
+  },
   "hangup_button_label": "End call",
   "header_label": "Element Call Home",
   "header_participants_label": "Participants",
@@ -176,7 +181,8 @@
       "change_device_button": "Change audio device",
       "default": "Default",
       "default_named": "Default <2>({{name}})</2>",
-      "earpiece": "Earpiece",
+      "handset": "Handset",
+      "loudspeaker": "Loudspeaker",
       "microphone": "Microphone",
       "microphone_numbered": "Microphone {{n}}",
       "speaker": "Speaker",

package.json

@@ -49,7 +49,7 @@
     "@mediapipe/tasks-vision": "^0.10.18",
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/core": "^2.0.0",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.201.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.202.0",
     "@opentelemetry/resources": "^2.0.0",
     "@opentelemetry/sdk-trace-base": "^2.0.0",
     "@opentelemetry/sdk-trace-web": "^2.0.0",
@@ -81,7 +81,7 @@
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^4.0.0",
+    "@vector-im/compound-design-tokens": "^5.0.0",
     "@vector-im/compound-web": "^8.0.0",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/coverage-v8": "^3.0.0",

playwright/sfu-reconnect-bug.spec.ts

@@ -0,0 +1,104 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "@playwright/test";
+
+test("When creator left, avoid reconnect to the same SFU", async ({
+  browser,
+}) => {
+  // Use reduce motion to disable animations that are making the tests a bit flaky
+  const creatorContext = await browser.newContext({ reducedMotion: "reduce" });
+  const creatorPage = await creatorContext.newPage();
+
+  await creatorPage.goto("/");
+
+  // ========
+  // ARRANGE: The first user creates a call as guest, join it, then click the invite button to copy the invite link
+  // ========
+  await creatorPage.getByTestId("home_callName").click();
+  await creatorPage.getByTestId("home_callName").fill("Welcome");
+  await creatorPage.getByTestId("home_displayName").click();
+  await creatorPage.getByTestId("home_displayName").fill("Inviter");
+  await creatorPage.getByTestId("home_go").click();
+  await expect(creatorPage.locator("video")).toBeVisible();
+
+  // join
+  await creatorPage.getByTestId("lobby_joinCall").click();
+  // Spotlight mode to make checking the test visually clearer
+  await creatorPage.getByRole("radio", { name: "Spotlight" }).check();
+
+  // Get the invite link
+  await creatorPage.getByRole("button", { name: "Invite" }).click();
+  await expect(
+    creatorPage.getByRole("heading", { name: "Invite to this call" }),
+  ).toBeVisible();
+  await expect(creatorPage.getByRole("img", { name: "QR Code" })).toBeVisible();
+  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
+  await expect(creatorPage.getByTestId("modal_inviteLink")).toBeVisible();
+  await creatorPage.getByTestId("modal_inviteLink").click();
+
+  const inviteLink = (await creatorPage.evaluate(
+    "navigator.clipboard.readText()",
+  )) as string;
+  expect(inviteLink).toContain("room/#/");
+
+  // ========
+  // ACT: The other user use the invite link to join the call as a guest
+  // ========
+  const guestB = await browser.newContext({
+    reducedMotion: "reduce",
+  });
+  const guestBPage = await guestB.newPage();
+
+  await guestBPage.goto(inviteLink);
+  await guestBPage.getByTestId("joincall_displayName").fill("Invitee");
+  await expect(guestBPage.getByTestId("joincall_joincall")).toBeVisible();
+  await guestBPage.getByTestId("joincall_joincall").click();
+  await guestBPage.getByTestId("lobby_joinCall").click();
+  await guestBPage.getByRole("radio", { name: "Spotlight" }).check();
+
+  // ========
+  // ACT: add a third user to the call to reproduce the bug
+  // ========
+  const guestC = await browser.newContext({
+    reducedMotion: "reduce",
+  });
+  const guestCPage = await guestC.newPage();
+  let sfuGetCallCount = 0;
+  await guestCPage.route("**/livekit/jwt/sfu/get", async (route) => {
+    sfuGetCallCount++;
+    await route.continue();
+  });
+  // Track WebSocket connections
+  let wsConnectionCount = 0;
+  await guestCPage.routeWebSocket("**", (ws) => {
+    // For some reason the interception is not working with the **
+    if (ws.url().includes("livekit/sfu/rtc")) {
+      wsConnectionCount++;
+    }
+    ws.connectToServer();
+  });
+
+  await guestCPage.goto(inviteLink);
+  await guestCPage.getByTestId("joincall_displayName").fill("Invitee");
+  await expect(guestCPage.getByTestId("joincall_joincall")).toBeVisible();
+  await guestCPage.getByTestId("joincall_joincall").click();
+  await guestCPage.getByTestId("lobby_joinCall").click();
+  await guestCPage.getByRole("radio", { name: "Spotlight" }).check();
+
+  await guestCPage.waitForTimeout(1000);
+
+  // ========
+  // the creator leaves the call
+  await creatorPage.getByTestId("incall_leave").click();
+
+  await guestCPage.waitForTimeout(2000);
+  // https://github.com/element-hq/element-call/issues/3344
+  // The app used to request a new jwt token then to reconnect to the SFU
+  expect(wsConnectionCount).toBe(1);
+  expect(sfuGetCallCount).toBe(1);
+});

src/App.tsx

@@ -5,7 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, type JSX, Suspense, useEffect, useState } from "react";
+import {
+  type FC,
+  type JSX,
+  Suspense,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -24,6 +31,8 @@ import { useTheme } from "./useTheme";
 import { ProcessorProvider } from "./livekit/TrackProcessorContext";
 import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
+import { getUrlParams, HeaderStyle } from "./UrlParams";
+import { AppBar } from "./AppBar";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
@@ -67,41 +76,43 @@ export const App: FC<Props> = ({ vm }) => {
       .catch(logger.error);
   });
 
+  // Since we are outside the router component, we cannot use useUrlParams here
+  const { header } = useMemo(getUrlParams, []);
+
+  const content = loaded ? (
+    <ClientProvider>
+      <MediaDevicesContext value={vm.mediaDevices}>
+        <ProcessorProvider>
+          <Sentry.ErrorBoundary
+            fallback={(error) => <ErrorPage error={error} widget={widget} />}
+          >
+            <DisconnectedBanner />
+            <Routes>
+              <SentryRoute path="/" element={<HomePage />} />
+              <SentryRoute path="/login" element={<LoginPage />} />
+              <SentryRoute path="/register" element={<RegisterPage />} />
+              <SentryRoute path="*" element={<RoomPage />} />
+            </Routes>
+          </Sentry.ErrorBoundary>
+        </ProcessorProvider>
+      </MediaDevicesContext>
+    </ClientProvider>
+  ) : (
+    <LoadingPage />
+  );
+
   return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     <BrowserRouter>
       <BackgroundProvider>
         <ThemeProvider>
           <TooltipProvider>
-            {loaded ? (
-              <Suspense fallback={null}>
-                <ClientProvider>
-                  <MediaDevicesContext value={vm.mediaDevices}>
-                    <ProcessorProvider>
-                      <Sentry.ErrorBoundary
-                        fallback={(error) => (
-                          <ErrorPage error={error} widget={widget} />
-                        )}
-                      >
-                        <DisconnectedBanner />
-                        <Routes>
-                          <SentryRoute path="/" element={<HomePage />} />
-                          <SentryRoute path="/login" element={<LoginPage />} />
-                          <SentryRoute
-                            path="/register"
-                            element={<RegisterPage />}
-                          />
-                          <SentryRoute path="*" element={<RoomPage />} />
-                        </Routes>
-                      </Sentry.ErrorBoundary>
-                    </ProcessorProvider>
-                  </MediaDevicesContext>
-                </ClientProvider>
-              </Suspense>
-            ) : (
-              <LoadingPage />
-            )}
+            <Suspense fallback={null}>
+              {header === HeaderStyle.AppBar ? (
+                <AppBar>{content}</AppBar>
+              ) : (
+                content
+              )}
+            </Suspense>
           </TooltipProvider>
         </ThemeProvider>
       </BackgroundProvider>

src/AppBar.module.css

@@ -0,0 +1,23 @@
+.bar {
+  block-size: 64px;
+  flex-shrink: 0;
+}
+
+.bar > header {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 0;
+  block-size: 64px;
+  z-index: var(--call-view-header-footer-layer);
+}
+
+.bar svg path {
+  fill: var(--cpd-color-icon-primary);
+}
+
+.bar > header > h1 {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/AppBar.test.tsx

@@ -0,0 +1,25 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TooltipProvider } from "@vector-im/compound-web";
+
+import { AppBar } from "./AppBar";
+
+describe("AppBar", () => {
+  it("renders", () => {
+    const { container } = render(
+      <TooltipProvider>
+        <AppBar>
+          <p>This is the content.</p>
+        </AppBar>
+      </TooltipProvider>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

src/AppBar.tsx

@@ -0,0 +1,130 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  createContext,
+  type FC,
+  type MouseEvent,
+  type ReactNode,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
+import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useTranslation } from "react-i18next";
+
+import { Header, LeftNav, RightNav } from "./Header";
+import { platform } from "./Platform";
+import styles from "./AppBar.module.css";
+
+interface AppBarContext {
+  setTitle: (value: string) => void;
+  setSecondaryButton: (value: ReactNode) => void;
+  setHidden: (value: boolean) => void;
+}
+
+const AppBarContext = createContext<AppBarContext | null>(null);
+
+interface Props {
+  children: ReactNode;
+}
+
+/**
+ * A "top app bar" featuring a back button, title and possibly a secondary
+ * button, similar to what you might see in mobile apps.
+ */
+export const AppBar: FC<Props> = ({ children }) => {
+  const { t } = useTranslation();
+  const onBackClick = useCallback((e: MouseEvent) => {
+    e.preventDefault();
+    window.controls.onBackButtonPressed?.();
+  }, []);
+
+  const [title, setTitle] = useState<string>("");
+  const [hidden, setHidden] = useState<boolean>(false);
+  const [secondaryButton, setSecondaryButton] = useState<ReactNode>(null);
+  const context = useMemo(
+    () => ({ setTitle, setSecondaryButton, setHidden }),
+    [setTitle, setHidden, setSecondaryButton],
+  );
+
+  return (
+    <>
+      <div
+        style={{ display: hidden ? "none" : "block" }}
+        className={styles.bar}
+      >
+        <Header>
+          <LeftNav>
+            <Tooltip label={t("common.back")}>
+              <IconButton onClick={onBackClick}>
+                <CollapseIcon />
+              </IconButton>
+            </Tooltip>
+          </LeftNav>
+          {title && (
+            <Heading
+              type="body"
+              size="lg"
+              weight={platform === "android" ? "medium" : "semibold"}
+            >
+              {title}
+            </Heading>
+          )}
+          <RightNav>{secondaryButton}</RightNav>
+        </Header>
+      </div>
+      <AppBarContext value={context}>{children}</AppBarContext>
+    </>
+  );
+};
+
+/**
+ * React hook which sets the title to be shown in the app bar, if present. It is
+ * an error to call this hook from multiple sites in the same component tree.
+ */
+export function useAppBarTitle(title: string): void {
+  const setTitle = use(AppBarContext)?.setTitle;
+  useEffect(() => {
+    if (setTitle !== undefined) {
+      setTitle(title);
+      return (): void => setTitle("");
+    }
+  }, [title, setTitle]);
+}
+
+/**
+ * React hook which sets the title to be shown in the app bar, if present. It is
+ * an error to call this hook from multiple sites in the same component tree.
+ */
+export function useAppBarHidden(hidden: boolean): void {
+  const setHidden = use(AppBarContext)?.setHidden;
+  useEffect(() => {
+    if (setHidden !== undefined) {
+      setHidden(hidden);
+      return (): void => setHidden(false);
+    }
+  }, [setHidden, hidden]);
+}
+
+/**
+ * React hook which sets the secondary button to be shown in the app bar, if
+ * present. It is an error to call this hook from multiple sites in the same
+ * component tree.
+ */
+export function useAppBarSecondaryButton(button: ReactNode): void {
+  const setSecondaryButton = use(AppBarContext)?.setSecondaryButton;
+  useEffect(() => {
+    if (setSecondaryButton !== undefined) {
+      setSecondaryButton(button);
+      return (): void => setSecondaryButton("");
+    }
+  }, [button, setSecondaryButton]);
+}

src/ErrorView.module.css

@@ -12,6 +12,7 @@
 
 .error > h1 {
   margin: 0;
+  text-align: center;
 }
 
 .error > p {

src/ErrorView.tsx

@@ -99,7 +99,7 @@ export const ErrorView: FC<Props> = ({
   return (
     <div className={styles.error}>
       <BigIcon className={styles.icon}>
-        <Icon />
+        <Icon aria-hidden />
       </BigIcon>
       <Heading as="h1" weight="semibold" size="md">
         {title}

src/FullScreenView.tsx

@@ -28,10 +28,10 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
   className,
   children,
 }) => {
-  const { hideHeader } = useUrlParams();
+  const { header } = useUrlParams();
   return (
     <div className={classNames(styles.page, className)}>
-      {!hideHeader && (
+      {header === "standard" && (
         <Header>
           <LeftNav>
             <HeaderLogo />

src/Header.tsx

@@ -6,12 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import {
-  type FC,
-  type HTMLAttributes,
-  type ReactNode,
-  forwardRef,
-} from "react";
+import { type Ref, type FC, type HTMLAttributes, type ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
@@ -24,23 +19,27 @@ import { EncryptionLock } from "./room/EncryptionLock";
 import { useMediaQuery } from "./useMediaQuery";
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
+  ref?: Ref<HTMLElement>;
   children: ReactNode;
   className?: string;
 }
 
-export const Header = forwardRef<HTMLElement, HeaderProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <header
-        ref={ref}
-        className={classNames(styles.header, className)}
-        {...rest}
-      >
-        {children}
-      </header>
-    );
-  },
-);
+export const Header: FC<HeaderProps> = ({
+  ref,
+  children,
+  className,
+  ...rest
+}) => {
+  return (
+    <header
+      ref={ref}
+      className={classNames(styles.header, className)}
+      {...rest}
+    >
+      {children}
+    </header>
+  );
+};
 
 Header.displayName = "Header";
 

src/MediaDevicesContext.ts

@@ -23,6 +23,14 @@ export function useMediaDevices(): MediaDevices {
   return mediaDevices;
 }
 
+export const useIsEarpiece = (): boolean => {
+  const devices = useMediaDevices();
+  const audioOutput = useObservableEagerState(devices.audioOutput.selected$);
+  const available = useObservableEagerState(devices.audioOutput.available$);
+  if (!audioOutput?.id) return false;
+  return available.get(audioOutput.id)?.type === "earpiece";
+};
+
 /**
  * A convenience hook to get the audio node configuration for the earpiece.
  * It will check the `useAsEarpiece` of the `audioOutput` device and return
@@ -36,17 +44,13 @@ export const useEarpieceAudioConfig = (): {
 } => {
   const devices = useMediaDevices();
   const audioOutput = useObservableEagerState(devices.audioOutput.selected$);
-  // We use only the right speaker (pan = 1) for the earpiece.
-  // This mimics the behavior of the native earpiece speaker (only the top speaker on an iPhone)
-  const pan = useMemo(
-    () => (audioOutput?.virtualEarpiece ? 1 : 0),
-    [audioOutput?.virtualEarpiece],
-  );
-  // We also do lower the volume by a factor of 10 to optimize for the usecase where
-  // a user is holding the phone to their ear.
-  const volume = useMemo(
-    () => (audioOutput?.virtualEarpiece ? 0.1 : 1),
-    [audioOutput?.virtualEarpiece],
-  );
-  return { pan, volume };
+  const isVirtualEarpiece = audioOutput?.virtualEarpiece ?? false;
+  return {
+    // We use only the right speaker (pan = 1) for the earpiece.
+    // This mimics the behavior of the native earpiece speaker (only the top speaker on an iPhone)
+    pan: useMemo(() => (isVirtualEarpiece ? 1 : 0), [isVirtualEarpiece]),
+    // We also do lower the volume by a factor of 10 to optimize for the usecase where
+    // a user is holding the phone to their ear.
+    volume: useMemo(() => (isVirtualEarpiece ? 0.1 : 1), [isVirtualEarpiece]),
+  };
 };

src/UrlParams.test.ts

@@ -10,7 +10,7 @@ import { describe, expect, it } from "vitest";
 import {
   getRoomIdentifierFromUrl,
   getUrlParams,
-  UserIntent,
+  HeaderStyle,
 } from "../src/UrlParams";
 
 const ROOM_NAME = "roomNameHere";
@@ -82,6 +82,16 @@ describe("UrlParams", () => {
         getRoomIdentifierFromUrl("", `?roomId=${ROOM_ID}`, "").roomId,
       ).toBe(ROOM_ID);
     });
+    it("(roomId with unprintable characters)", () => {
+      const invisibleChar = "\u2066";
+      expect(
+        getRoomIdentifierFromUrl(
+          "",
+          `?roomId=${invisibleChar}${ROOM_ID}${invisibleChar}`,
+          "",
+        ).roomId,
+      ).toBe(ROOM_ID);
+    });
   });
 
   it("ignores room alias", () => {
@@ -201,24 +211,68 @@ describe("UrlParams", () => {
   });
 
   describe("intent", () => {
-    it("defaults to unknown", () => {
-      expect(getUrlParams().intent).toBe(UserIntent.Unknown);
+    const noIntentDefaults = {
+      confineToRoom: false,
+      appPrompt: true,
+      preload: false,
+      header: HeaderStyle.Standard,
+      showControls: true,
+      hideScreensharing: false,
+      allowIceFallback: false,
+      perParticipantE2EE: false,
+      controlledAudioDevices: false,
+      skipLobby: false,
+      returnToLobby: false,
+      sendNotificationType: undefined,
+    };
+    const startNewCallDefaults = (platform: string): object => ({
+      confineToRoom: true,
+      appPrompt: false,
+      preload: true,
+      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",
+    });
+    const joinExistingCallDefaults = (platform: string): object => ({
+      confineToRoom: true,
+      appPrompt: false,
+      preload: true,
+      header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+      showControls: true,
+      hideScreensharing: false,
+      allowIceFallback: true,
+      perParticipantE2EE: true,
+      controlledAudioDevices: platform === "desktop" ? false : true,
+      skipLobby: false,
+      returnToLobby: false,
+      sendNotificationType: "notification",
+    });
+    it("use no-intent-defaults with unknown intent", () => {
+      expect(getUrlParams()).toMatchObject(noIntentDefaults);
     });
 
     it("ignores intent if it is not a valid value", () => {
-      expect(getUrlParams("?intent=foo").intent).toBe(UserIntent.Unknown);
+      expect(getUrlParams("?intent=foo")).toMatchObject(noIntentDefaults);
     });
 
     it("accepts start_call", () => {
-      expect(getUrlParams("?intent=start_call").intent).toBe(
-        UserIntent.StartNewCall,
-      );
+      expect(
+        getUrlParams("?intent=start_call&widgetId=1234&parentUrl=parent.org"),
+      ).toMatchObject(startNewCallDefaults("desktop"));
     });
 
     it("accepts join_existing", () => {
-      expect(getUrlParams("?intent=join_existing").intent).toBe(
-        UserIntent.JoinExistingCall,
-      );
+      expect(
+        getUrlParams(
+          "?intent=join_existing&widgetId=1234&parentUrl=parent.org",
+        ),
+      ).toMatchObject(joinExistingCallDefaults("desktop"));
     });
   });
 
@@ -243,4 +297,12 @@ describe("UrlParams", () => {
       expect(getUrlParams("?intent=join_existing").skipLobby).toBe(false);
     });
   });
+  describe("header", () => {
+    it("uses header if provided", () => {
+      expect(getUrlParams("?header=app_bar&hideHeader=true").header).toBe(
+        "app_bar",
+      );
+      expect(getUrlParams("?header=none&hideHeader=false").header).toBe("none");
+    });
+  });
 });

src/UrlParams.ts

@@ -8,10 +8,13 @@ Please see LICENSE in the repository root for full details.
 import { useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { type RTCNotificationType } from "matrix-js-sdk/lib/matrixrtc";
+import { pickBy } from "lodash-es";
 
 import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
+import { platform } from "./Platform";
 
 interface RoomIdentifier {
   roomAlias: string | null;
@@ -20,17 +23,24 @@ interface RoomIdentifier {
 }
 
 export enum UserIntent {
+  // TODO: add DM vs room call
   StartNewCall = "start_call",
   JoinExistingCall = "join_existing",
   Unknown = "unknown",
 }
 
-// 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 {
+export enum HeaderStyle {
+  None = "none",
+  Standard = "standard",
+  AppBar = "app_bar",
+}
+
+/**
+ * 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
+ * widget but provide the required data to the widget.
+ */
+export interface UrlProperties {
   // Widget api related params
   widgetId: string | null;
   parentUrl: string | null;
@@ -42,42 +52,11 @@ export interface UrlParams {
    * is also not validated, where it is in useRoomIdentifier().
    */
   roomId: string | null;
-  /**
-   * Whether the app should keep the user confined to the current call/room.
-   */
-  confineToRoom: boolean;
-  /**
-   * Whether upon entering a room, the user should be prompted to launch the
-   * native mobile app. (Affects only Android and iOS.)
-   *
-   * The app prompt must also be enabled in the config for this to take effect.
-   */
-  appPrompt: 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;
-  /**
-   * Whether to hide the room header when in a call.
-   */
-  hideHeader: boolean;
-  /**
-   * 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 to use end-to-end encryption.
-   */
-  e2eEnabled: boolean;
   /**
    * The user's ID (only used in matryoshka mode).
    */
   userId: string | null;
+
   /**
    * The display name to use for auto-registration.
    */
@@ -115,14 +94,96 @@ export interface UrlParams {
    */
   posthogApiKey: string | null;
   /**
-   * Whether the app is allowed to use fallback STUN servers for ICE in case the
-   * user's homeserver doesn't provide any.
+   * Whether to use end-to-end encryption.
    */
-  allowIceFallback: boolean;
+  e2eEnabled: boolean;
   /**
    * E2EE password
    */
   password: string | null;
+  /** This defines the homeserver that is going to be used when joining a room.
+   * It has to be set to a non default value for links to rooms
+   * that are not on the default homeserver,
+   * that is in use for the current user.
+   */
+  viaServers: string | null;
+
+  /**
+   * This defines the homeserver that is going to be used when registering
+   * a new (guest) user.
+   * This can be user to configure a non default guest user server when
+   * creating a spa link.
+   */
+  homeserver: string | null;
+
+  /**
+   * The rageshake submit URL. This is only used in the embedded package of Element Call.
+   */
+  rageshakeSubmitUrl: string | null;
+
+  /**
+   * The Sentry DSN. This is only used in the embedded package of Element Call.
+   */
+  sentryDsn: string | null;
+
+  /**
+   * The Sentry environment. This is only used in the embedded package of Element Call.
+   */
+  sentryEnvironment: string | null;
+  /**
+   * The theme to use for element call.
+   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
+   */
+  theme: string | null;
+}
+
+/**
+ * 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 upon entering a room, the user should be prompted to launch the
+   * native mobile app. (Affects only Android and iOS.)
+   *
+   * The app prompt must also be enabled in the config for this to take effect.
+   */
+  appPrompt: 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.
    */
@@ -145,47 +206,18 @@ export interface UrlParams {
    */
   returnToLobby: boolean;
   /**
-   * The theme to use for element call.
-   * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
+   * Whether and what type of notification EC should send, when the user joins the call.
    */
-  theme: string | null;
-  /** This defines the homeserver that is going to be used when joining a room.
-   * It has to be set to a non default value for links to rooms
-   * that are not on the default homeserver,
-   * that is in use for the current user.
-   */
-  viaServers: string | null;
-  /**
-   * This defines the homeserver that is going to be used when registering
-   * a new (guest) user.
-   * This can be user to configure a non default guest user server when
-   * creating a spa link.
-   */
-  homeserver: string | null;
-
-  /**
-   * The user's intent with respect to the call.
-   * e.g. if they clicked a Start Call button, this would be `start_call`.
-   * If it was a Join Call button, it would be `join_existing`.
-   */
-  intent: string | null;
-
-  /**
-   * The rageshake submit URL. This is only used in the embedded package of Element Call.
-   */
-  rageshakeSubmitUrl: string | null;
-
-  /**
-   * The Sentry DSN. This is only used in the embedded package of Element Call.
-   */
-  sentryDsn: string | null;
-
-  /**
-   * The Sentry environment. This is only used in the embedded package of Element Call.
-   */
-  sentryEnvironment: string | null;
+  sendNotificationType?: RTCNotificationType;
 }
 
+// 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 {}
+
 // This is here as a stopgap, but what would be far nicer is a function that
 // takes a UrlParams and returns a query string. That would enable us to
 // consolidate all the data about URL parameters and their meanings to this one
@@ -226,6 +258,17 @@ class ParamParser {
     return this.fragmentParams.get(name) ?? this.queryParams.get(name);
   }
 
+  public getEnumParam<T extends string>(
+    name: string,
+    type: { [s: string]: T } | ArrayLike<T>,
+  ): T | undefined {
+    const value = this.getParam(name);
+    if (value !== null && Object.values(type).includes(value as T)) {
+      return value as T;
+    }
+    return undefined;
+  }
+
   public getAllParams(name: string): string[] {
     return [
       ...this.fragmentParams.getAll(name),
@@ -237,6 +280,10 @@ class ParamParser {
     const param = this.getParam(name);
     return param === null ? defaultValue : param !== "false";
   }
+  public getFlag(name: string): boolean | undefined {
+    const param = this.getParam(name);
+    return param !== null ? param !== "false" : undefined;
+  }
 }
 
 /**
@@ -253,32 +300,79 @@ export const getUrlParams = (
 
   const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
 
-  let intent = parser.getParam("intent");
-  if (!intent || !Object.values(UserIntent).includes(intent as UserIntent)) {
-    intent = UserIntent.Unknown;
-  }
   const widgetId = parser.getParam("widgetId");
   const parentUrl = parser.getParam("parentUrl");
   const isWidget = !!widgetId && !!parentUrl;
 
-  return {
+  /**
+   * The user's intent with respect to the call.
+   * e.g. if they clicked a Start Call button, this would be `start_call`.
+   * If it was a Join Call button, it would be `join_existing`.
+   * This is a platform specific default set of parameters, that allows to minize the configuration
+   * needed to start a call. And empowers the EC codebase to control the platform/intent behavior in
+   * a central place.
+   *
+   * In short: either provide url query parameters of UrlConfiguration or set the intent
+   * (or the global defaults will be used).
+   */
+  const intent = !isWidget
+    ? UserIntent.Unknown
+    : (parser.getEnumParam("intent", UserIntent) ?? UserIntent.Unknown);
+  // Here we only use constants and `platform` to determine the intent preset.
+  let intentPreset: UrlConfiguration;
+  const inAppDefault = {
+    confineToRoom: true,
+    appPrompt: false,
+    preload: true,
+    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" as RTCNotificationType,
+  };
+  switch (intent) {
+    case UserIntent.StartNewCall:
+      intentPreset = {
+        ...inAppDefault,
+        skipLobby: true,
+      };
+      break;
+    case UserIntent.JoinExistingCall:
+      intentPreset = {
+        ...inAppDefault,
+        skipLobby: false,
+      };
+      break;
+    // Non widget usecase defaults
+    default:
+      intentPreset = {
+        confineToRoom: false,
+        appPrompt: true,
+        preload: false,
+        header: HeaderStyle.Standard,
+        showControls: true,
+        hideScreensharing: false,
+        allowIceFallback: false,
+        perParticipantE2EE: false,
+        controlledAudioDevices: false,
+        skipLobby: false,
+        returnToLobby: false,
+        sendNotificationType: undefined,
+      };
+  }
+
+  const properties: UrlProperties = {
     widgetId,
     parentUrl,
-
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
     // what would we do if it were invalid? If the widget API says that's what
     // the room ID is, then that's what it is.
     roomId: parser.getParam("roomId"),
     password: parser.getParam("password"),
-    // This flag has 'embed' as an alias for historical reasons
-    confineToRoom:
-      parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
-    appPrompt: parser.getFlagParam("appPrompt", true),
-    preload: isWidget ? parser.getFlagParam("preload") : false,
-    hideHeader: parser.getFlagParam("hideHeader"),
-    showControls: parser.getFlagParam("showControls", true),
-    hideScreensharing: parser.getFlagParam("hideScreensharing"),
-    e2eEnabled: parser.getFlagParam("enableE2EE", true),
     userId: isWidget ? parser.getParam("userId") : null,
     displayName: parser.getParam("displayName"),
     deviceId: isWidget ? parser.getParam("deviceId") : null,
@@ -286,24 +380,9 @@ export const getUrlParams = (
     lang: parser.getParam("lang"),
     fonts: parser.getAllParams("font"),
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
-    allowIceFallback: parser.getFlagParam("allowIceFallback"),
-    perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
-    controlledAudioDevices: parser.getFlagParam(
-      "controlledAudioDevices",
-      // the deprecated property name
-      parser.getFlagParam("controlledMediaDevices"),
-    ),
-    skipLobby: parser.getFlagParam(
-      "skipLobby",
-      isWidget && intent === UserIntent.StartNewCall,
-    ),
-    // In SPA mode the user should always exit to the home screen when hanging
-    // up, rather than being sent back to the lobby
-    returnToLobby: isWidget ? parser.getFlagParam("returnToLobby") : false,
     theme: parser.getParam("theme"),
     viaServers: !isWidget ? parser.getParam("viaServers") : null,
     homeserver: !isWidget ? parser.getParam("homeserver") : null,
-    intent,
     posthogApiHost: parser.getParam("posthogApiHost"),
     posthogApiKey: parser.getParam("posthogApiKey"),
     posthogUserId:
@@ -311,6 +390,35 @@ export const getUrlParams = (
     rageshakeSubmitUrl: parser.getParam("rageshakeSubmitUrl"),
     sentryDsn: parser.getParam("sentryDsn"),
     sentryEnvironment: parser.getParam("sentryEnvironment"),
+    e2eEnabled: parser.getFlagParam("enableE2EE", true),
+  };
+
+  const configuration: Partial<UrlConfiguration> = {
+    confineToRoom: parser.getFlag("confineToRoom"),
+    appPrompt: parser.getFlag("appPrompt"),
+    preload: isWidget ? parser.getFlag("preload") : undefined,
+    // Check hideHeader for backwards compatibility. If header is set, hideHeader
+    // is ignored.
+    header: parser.getEnumParam("header", HeaderStyle),
+    showControls: parser.getFlag("showControls"),
+    hideScreensharing: parser.getFlag("hideScreensharing"),
+    allowIceFallback: parser.getFlag("allowIceFallback"),
+    perParticipantE2EE: parser.getFlag("perParticipantE2EE"),
+    controlledAudioDevices: parser.getFlag("controlledAudioDevices"),
+    skipLobby: isWidget ? parser.getFlag("skipLobby") : false,
+    // In SPA mode the user should always exit to the home screen when hanging
+    // up, rather than being sent back to the lobby
+    returnToLobby: isWidget ? parser.getFlag("returnToLobby") : false,
+    sendNotificationType: parser.getEnumParam("sendNotificationType", [
+      "ring",
+      "notification",
+    ]),
+  };
+
+  return {
+    ...properties,
+    ...intentPreset,
+    ...pickBy(configuration, (v) => v !== undefined),
   };
 };
 
@@ -369,10 +477,16 @@ export function getRoomIdentifierFromUrl(
 
   // Make sure roomId is valid
   let roomId: string | null = parser.getParam("roomId");
-  if (!roomId?.startsWith("!")) {
-    roomId = null;
-  } else if (!roomId.includes("")) {
-    roomId = null;
+  if (roomId !== null) {
+    // Replace any non-printable characters that another client may have inserted.
+    // For instance on iOS, some copied links end up with zero width characters on the end which get encoded into the URL.
+    // This isn't valid for a roomId, so we can freely strip the content.
+    roomId = roomId.replaceAll(/^[^ -~]+|[^ -~]+$/g, "");
+    if (!roomId.startsWith("!")) {
+      roomId = null;
+    } else if (!roomId.includes("")) {
+      roomId = null;
+    }
   }
 
   return {

src/__snapshots__/AppBar.test.tsx.snap

@@ -0,0 +1,50 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AppBar > renders 1`] = `
+<div>
+  <div
+    class="bar"
+    style="display: block;"
+  >
+    <header
+      class="header"
+    >
+      <div
+        class="nav leftNav"
+      >
+        <button
+          aria-labelledby="«r0»"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_zr2a0_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div
+        class="nav rightNav"
+      />
+    </header>
+  </div>
+  <p>
+    This is the content.
+  </p>
+</div>
+`;

src/button/Link.tsx

@@ -5,11 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  type ComponentPropsWithoutRef,
-  forwardRef,
-  type MouseEvent,
-} from "react";
+import { type ComponentProps, type FC, type MouseEvent } from "react";
 import { Link as CpdLink } from "@vector-im/compound-web";
 import { type LinkProps, useHref, useLinkClickHandler } from "react-router-dom";
 import classNames from "classnames";
@@ -26,31 +22,30 @@ export function useLink(
   return [href, onClick];
 }
 
-type Props = Omit<
-  ComponentPropsWithoutRef<typeof CpdLink>,
-  "href" | "onClick"
-> & { to: LinkProps["to"]; state?: unknown };
+type Props = Omit<ComponentProps<typeof CpdLink>, "href" | "onClick"> & {
+  to: LinkProps["to"];
+  state?: unknown;
+};
 
 /**
  * A version of Compound's link component that integrates with our router setup.
  * This is only for app-internal links.
  */
-export const Link = forwardRef<HTMLAnchorElement, Props>(function Link(
-  { to, state, ...props },
-  ref,
-) {
+export const Link: FC<Props> = ({ ref, to, state, ...props }) => {
   const [path, onClick] = useLink(to, state);
   return <CpdLink ref={ref} {...props} href={path} onClick={onClick} />;
-});
+};
 
 /**
  * A link to an external web page, made to fit into blocks of text more subtly
  * than the normal Compound link component.
  */
-export const ExternalLink = forwardRef<
-  HTMLAnchorElement,
-  ComponentPropsWithoutRef<"a">
->(function ExternalLink({ className, children, ...props }, ref) {
+export const ExternalLink: FC<ComponentProps<"a">> = ({
+  ref,
+  className,
+  children,
+  ...props
+}) => {
   return (
     <a
       ref={ref}
@@ -62,4 +57,4 @@ export const ExternalLink = forwardRef<
       {children}
     </a>
   );
-});
+};

src/button/LinkButton.tsx

@@ -5,24 +5,22 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import { type ComponentProps, type FC } from "react";
 import { Button } from "@vector-im/compound-web";
 
 import type { LinkProps } from "react-router-dom";
 import { useLink } from "./Link";
 
-type Props = Omit<
-  ComponentPropsWithoutRef<typeof Button<"a">>,
-  "as" | "href"
-> & { to: LinkProps["to"]; state?: unknown };
+type Props = Omit<ComponentProps<typeof Button<"a">>, "as" | "href"> & {
+  to: LinkProps["to"];
+  state?: unknown;
+};
 
 /**
  * A version of Compound's button component that acts as a link and integrates
  * with our router setup.
  */
-export const LinkButton = forwardRef<HTMLAnchorElement, Props>(
-  function LinkButton({ to, state, ...props }, ref) {
-    const [path, onClick] = useLink(to, state);
-    return <Button as="a" ref={ref} {...props} href={path} onClick={onClick} />;
-  },
-);
+export const LinkButton: FC<Props> = ({ ref, to, state, ...props }) => {
+  const [path, onClick] = useLink(to, state);
+  return <Button as="a" ref={ref} {...props} href={path} onClick={onClick} />;
+};

src/button/ReactionToggleButton.tsx

@@ -24,8 +24,6 @@ import {
 import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/lib/logger";
 import classNames from "classnames";
-import { useObservableState } from "observable-hooks";
-import { map } from "rxjs";
 
 import { useReactionsSender } from "../reactions/useReactionsSender";
 import styles from "./ReactionToggleButton.module.css";
@@ -36,6 +34,7 @@ import {
 } from "../reactions";
 import { Modal } from "../Modal";
 import { type CallViewModel } from "../state/CallViewModel";
+import { useBehavior } from "../useBehavior";
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
   raised: boolean;
@@ -180,12 +179,8 @@ export function ReactionToggleButton({
   const [showReactionsMenu, setShowReactionsMenu] = useState(false);
   const [errorText, setErrorText] = useState<string>();
 
-  const isHandRaised = useObservableState(
-    vm.handsRaised$.pipe(map((v) => !!v[identifier])),
-  );
-  const canReact = useObservableState(
-    vm.reactions$.pipe(map((v) => !v[identifier])),
-  );
+  const isHandRaised = !!useBehavior(vm.handsRaised$)[identifier];
+  const canReact = !useBehavior(vm.reactions$)[identifier];
 
   useEffect(() => {
     // Clear whenever the reactions menu state changes.

src/config/ConfigOptions.ts

@@ -125,6 +125,17 @@ export interface ConfigOptions {
     /** @deprecated use delayed_leave_event_delay_ms instead */
     membership_server_side_expiry_timeout?: number;
 
+    /**
+     * The time (in milliseconds) after which a we consider a delayed event restart http request to have failed.
+     * Setting this to a lower value will result in more frequent retries but also a higher chance of failiour.
+     *
+     * In the presence of network packet loss (hurting TCP connections), the custom delayedEventRestartLocalTimeoutMs
+     * helps by keeping more delayed event reset candidates in flight,
+     * improving the chances of a successful reset. (its is equivalent to the js-sdk `localTimeout` configuration,
+     * but only applies to calls to the `_unstable_updateDelayedEvent` endpoint with a body of `{action:"restart"}`.)
+     */
+    delayed_leave_event_restart_local_timeout_ms?: number;
+
     /**
      * The time interval (in milliseconds) at which the client sends membership keep-alive
      * messages to the server by restarting the timer for the delayed leave event.

src/controls.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024-2025 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -14,22 +14,25 @@ export interface Controls {
   canEnterPip(): boolean;
   enablePip(): void;
   disablePip(): void;
-  /** @deprecated use  setAvailableAudioDevices instead*/
-  setAvailableOutputDevices(devices: OutputDevice[]): void;
+
   setAvailableAudioDevices(devices: OutputDevice[]): void;
-  /** @deprecated use  setAudioDevice instead*/
-  setOutputDevice(id: string): void;
   setAudioDevice(id: string): void;
-  /** @deprecated use  onAudioDeviceSelect instead*/
-  onOutputDeviceSelect?: (id: string) => void;
   onAudioDeviceSelect?: (id: string) => void;
   onAudioPlaybackStarted?: () => void;
+  setAudioEnabled(enabled: boolean): void;
+  showNativeAudioDevicePicker?: () => void;
+  onBackButtonPressed?: () => void;
+
+  /** @deprecated use  setAvailableAudioDevices instead*/
+  setAvailableOutputDevices(devices: OutputDevice[]): void;
+  /** @deprecated use  setAudioDevice instead*/
+  setOutputDevice(id: string): void;
+  /** @deprecated use  onAudioDeviceSelect instead*/
+  onOutputDeviceSelect?: (id: string) => void;
   /** @deprecated use  setAudioEnabled instead*/
   setOutputEnabled(enabled: boolean): void;
-  setAudioEnabled(enabled: boolean): void;
   /** @deprecated use  showNativeAudioDevicePicker instead*/
   showNativeOutputDevicePicker?: () => void;
-  showNativeAudioDevicePicker?: () => void;
 }
 
 export interface OutputDevice {
@@ -48,7 +51,7 @@ export const setPipEnabled$ = new Subject<boolean>();
 
 export const availableOutputDevices$ = new Subject<OutputDevice[]>();
 
-export const outputDevice$ = new Subject<string | undefined>();
+export const outputDevice$ = new Subject<string>();
 
 /**
  * This allows the os to mute the call if the user
@@ -57,6 +60,7 @@ export const outputDevice$ = new Subject<string | undefined>();
  * This should also be used to display a darkened overlay screen letting the user know that audio is muted.
  */
 export const setAudioEnabled$ = new Subject<boolean>();
+
 let playbackStartedEmitted = false;
 export const setPlaybackStarted = (): void => {
   if (!playbackStartedEmitted) {
@@ -64,6 +68,7 @@ export const setPlaybackStarted = (): void => {
     window.controls.onAudioPlaybackStarted?.();
   }
 };
+
 window.controls = {
   canEnterPip(): boolean {
     return setPipEnabled$.observed;
@@ -76,6 +81,7 @@ window.controls = {
     if (!setPipEnabled$.observed) throw new Error("No call is running");
     setPipEnabled$.next(false);
   },
+
   setAvailableAudioDevices(devices: OutputDevice[]): void {
     logger.info("setAvailableAudioDevices called from native:", devices);
     availableOutputDevices$.next(devices);

src/form/Form.tsx

@@ -6,28 +6,32 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { type FormEventHandler, forwardRef, type ReactNode } from "react";
+import {
+  type FC,
+  type Ref,
+  type FormEventHandler,
+  type ReactNode,
+} from "react";
 
 import styles from "./Form.module.css";
 
 interface FormProps {
+  ref?: Ref<HTMLFormElement>;
   className: string;
   onSubmit: FormEventHandler<HTMLFormElement>;
   children: ReactNode[];
 }
 
-export const Form = forwardRef<HTMLFormElement, FormProps>(
-  ({ children, className, onSubmit }, ref) => {
-    return (
-      <form
-        onSubmit={onSubmit}
-        className={classNames(styles.form, className)}
-        ref={ref}
-      >
-        {children}
-      </form>
-    );
-  },
-);
+export const Form: FC<FormProps> = ({ ref, children, className, onSubmit }) => {
+  return (
+    <form
+      onSubmit={onSubmit}
+      className={classNames(styles.form, className)}
+      ref={ref}
+    >
+      {children}
+    </form>
+  );
+};
 
 Form.displayName = "Form";

src/grid/Grid.tsx

@@ -18,23 +18,22 @@ import {
   type ComponentType,
   type Dispatch,
   type FC,
-  type LegacyRef,
   type ReactNode,
+  type Ref,
   type SetStateAction,
   createContext,
-  forwardRef,
   memo,
   use,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  useSyncExternalStore,
 } from "react";
 import useMeasure from "react-use-measure";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { useObservableEagerState } from "observable-hooks";
-import { fromEvent, map, startWith } from "rxjs";
 
 import styles from "./Grid.module.css";
 import { useMergedRefs } from "../useMergedRefs";
@@ -156,13 +155,8 @@ export function useVisibleTiles(callback: VisibleTilesCallback): void {
   );
 }
 
-const windowHeightObservable$ = fromEvent(window, "resize").pipe(
-  startWith(null),
-  map(() => window.innerHeight),
-);
-
 export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
-  ref: LegacyRef<R>;
+  ref?: Ref<R>;
   model: LayoutModel;
   /**
    * Component creating an invisible "slot" for a tile to go in.
@@ -171,7 +165,7 @@ export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
 }
 
 export interface TileProps<Model, R extends HTMLElement> {
-  ref: LegacyRef<R>;
+  ref?: Ref<R>;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
   /**
@@ -262,7 +256,13 @@ export function Grid<
   const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
   const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);
 
-  const windowHeight = useObservableEagerState(windowHeightObservable$);
+  const windowHeight = useSyncExternalStore(
+    useCallback((onChange) => {
+      window.addEventListener("resize", onChange);
+      return (): void => window.removeEventListener("resize", onChange);
+    }, []),
+    useCallback(() => window.innerHeight, []),
+  );
   const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
   const [generation, setGeneration] = useState<number | null>(null);
   const [visibleTilesCallback, setVisibleTilesCallback] =
@@ -297,14 +297,13 @@ export function Grid<
   // render of Grid causes a re-render of Layout, which in turn re-renders Grid
   const LayoutMemo = useMemo(
     () =>
-      memo(
-        forwardRef<
-          LayoutRef,
-          LayoutMemoProps<LayoutModel, TileModel, LayoutRef>
-        >(function LayoutMemo({ Layout, ...props }, ref): ReactNode {
-          return <Layout {...props} ref={ref} />;
-        }),
-      ),
+      memo(function LayoutMemo({
+        ref,
+        Layout,
+        ...props
+      }: LayoutMemoProps<LayoutModel, TileModel, LayoutRef>): ReactNode {
+        return <Layout {...props} ref={ref} />;
+      }),
     [],
   );
 

src/grid/GridLayout.tsx

@@ -5,7 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type CSSProperties, forwardRef, useCallback, useMemo } from "react";
+import {
+  type CSSProperties,
+  type ReactNode,
+  useCallback,
+  useMemo,
+} from "react";
 import { distinctUntilChanged } from "rxjs";
 import { useObservableEagerState } from "observable-hooks";
 
@@ -33,7 +38,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
 
   // The "fixed" (non-scrolling) part of the layout is where the spotlight tile
   // lives
-  fixed: forwardRef(function GridLayoutFixed({ model, Slot }, ref) {
+  fixed: function GridLayoutFixed({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     const alignment = useObservableEagerState(
       useInitial(() =>
@@ -68,10 +73,10 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
         )}
       </div>
     );
-  }),
+  },
 
   // The scrolling part of the layout is where all the grid tiles live
-  scrolling: forwardRef(function GridLayout({ model, Slot }, ref) {
+  scrolling: function GridLayout({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
     const { width, height: minHeight } = useObservableEagerState(minBounds$);
@@ -98,5 +103,5 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
         ))}
       </div>
     );
-  }),
+  },
 });

src/grid/OneOnOneLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { forwardRef, useCallback, useMemo } from "react";
+import { type ReactNode, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -13,6 +13,7 @@ import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewMod
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";
+import { useBehavior } from "../useBehavior";
 
 /**
  * An implementation of the "one-on-one" layout, in which the remote participant
@@ -24,15 +25,15 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
 }) => ({
   scrollingOnTop: false,
 
-  fixed: forwardRef(function OneOnOneLayoutFixed(_props, ref) {
+  fixed: function OneOnOneLayoutFixed({ ref }): ReactNode {
     useUpdateLayout();
     return <div ref={ref} />;
-  }),
+  },
 
-  scrolling: forwardRef(function OneOnOneLayoutScrolling({ model, Slot }, ref) {
+  scrolling: function OneOnOneLayoutScrolling({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     const { width, height } = useObservableEagerState(minBounds$);
-    const pipAlignmentValue = useObservableEagerState(pipAlignment$);
+    const pipAlignmentValue = useBehavior(pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),
       [width, height],
@@ -66,5 +67,5 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
         </Slot>
       </div>
     );
-  }),
+  },
 });

src/grid/SpotlightExpandedLayout.tsx

@@ -5,13 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { forwardRef, useCallback } from "react";
-import { useObservableEagerState } from "observable-hooks";
+import { type ReactNode, useCallback } from "react";
 
 import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
 import { type CallLayout } from "./CallLayout";
 import { type DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
+import { useBehavior } from "../useBehavior";
 
 /**
  * An implementation of the "expanded spotlight" layout, in which the spotlight
@@ -22,10 +22,11 @@ export const makeSpotlightExpandedLayout: CallLayout<
 > = ({ pipAlignment$ }) => ({
   scrollingOnTop: true,
 
-  fixed: forwardRef(function SpotlightExpandedLayoutFixed(
-    { model, Slot },
+  fixed: function SpotlightExpandedLayoutFixed({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
 
     return (
@@ -37,14 +38,15 @@ export const makeSpotlightExpandedLayout: CallLayout<
         />
       </div>
     );
-  }),
+  },
 
-  scrolling: forwardRef(function SpotlightExpandedLayoutScrolling(
-    { model, Slot },
+  scrolling: function SpotlightExpandedLayoutScrolling({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
-    const pipAlignmentValue = useObservableEagerState(pipAlignment$);
+    const pipAlignmentValue = useBehavior(pipAlignment$);
 
     const onDragPip: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
@@ -69,5 +71,5 @@ export const makeSpotlightExpandedLayout: CallLayout<
         )}
       </div>
     );
-  }),
+  },
 });

src/grid/SpotlightLandscapeLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { forwardRef } from "react";
+import { type ReactNode } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -24,10 +24,11 @@ export const makeSpotlightLandscapeLayout: CallLayout<
 > = ({ minBounds$ }) => ({
   scrollingOnTop: false,
 
-  fixed: forwardRef(function SpotlightLandscapeLayoutFixed(
-    { model, Slot },
+  fixed: function SpotlightLandscapeLayoutFixed({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
     useObservableEagerState(minBounds$);
 
@@ -43,12 +44,13 @@ export const makeSpotlightLandscapeLayout: CallLayout<
         <div className={styles.grid} />
       </div>
     );
-  }),
+  },
 
-  scrolling: forwardRef(function SpotlightLandscapeLayoutScrolling(
-    { model, Slot },
+  scrolling: function SpotlightLandscapeLayoutScrolling({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
     useObservableEagerState(minBounds$);
@@ -69,5 +71,5 @@ export const makeSpotlightLandscapeLayout: CallLayout<
         </div>
       </div>
     );
-  }),
+  },
 });

src/grid/SpotlightPortraitLayout.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type CSSProperties, forwardRef } from "react";
+import { type ReactNode, type CSSProperties } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
@@ -13,6 +13,7 @@ import { type CallLayout, arrangeTiles } from "./CallLayout";
 import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightPortraitLayout.module.css";
 import { useUpdateLayout, useVisibleTiles } from "./Grid";
+import { useBehavior } from "../useBehavior";
 
 interface GridCSSProperties extends CSSProperties {
   "--grid-gap": string;
@@ -30,10 +31,11 @@ export const makeSpotlightPortraitLayout: CallLayout<
 > = ({ minBounds$ }) => ({
   scrollingOnTop: false,
 
-  fixed: forwardRef(function SpotlightPortraitLayoutFixed(
-    { model, Slot },
+  fixed: function SpotlightPortraitLayoutFixed({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
 
     return (
@@ -47,12 +49,13 @@ export const makeSpotlightPortraitLayout: CallLayout<
         </div>
       </div>
     );
-  }),
+  },
 
-  scrolling: forwardRef(function SpotlightPortraitLayoutScrolling(
-    { model, Slot },
+  scrolling: function SpotlightPortraitLayoutScrolling({
     ref,
-  ) {
+    model,
+    Slot,
+  }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
     const { width } = useObservableEagerState(minBounds$);
@@ -63,8 +66,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
       width,
       model.grid.length,
     );
-    const withIndicators =
-      useObservableEagerState(model.spotlight.media$).length > 1;
+    const withIndicators = useBehavior(model.spotlight.media$).length > 1;
 
     return (
       <div
@@ -90,5 +92,5 @@ export const makeSpotlightPortraitLayout: CallLayout<
         </div>
       </div>
     );
-  }),
+  },
 });

src/home/RegisteredView.tsx

@@ -37,12 +37,14 @@ import { Form } from "../form/Form";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useOptInAnalytics } from "../settings/settings";
+import { useUrlParams } from "../UrlParams";
 
 interface Props {
   client: MatrixClient;
 }
 
 export const RegisteredView: FC<Props> = ({ client }) => {
+  const { header } = useUrlParams();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
   const [optInAnalytics] = useOptInAnalytics();
@@ -114,14 +116,16 @@ export const RegisteredView: FC<Props> = ({ client }) => {
   return (
     <>
       <div className={commonStyles.container}>
-        <Header>
-          <LeftNav>
-            <HeaderLogo />
-          </LeftNav>
-          <RightNav>
-            <UserMenuContainer />
-          </RightNav>
-        </Header>
+        {header === "standard" && (
+          <Header>
+            <LeftNav>
+              <HeaderLogo />
+            </LeftNav>
+            <RightNav>
+              <UserMenuContainer />
+            </RightNav>
+          </Header>
+        )}
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
           <Heading size="lg" weight="semibold">

src/home/UnauthenticatedView.tsx

@@ -34,9 +34,11 @@ import { Config } from "../config/Config";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useOptInAnalytics } from "../settings/settings";
 import { ExternalLink, Link } from "../button/Link";
+import { useUrlParams } from "../UrlParams";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
+  const { header } = useUrlParams();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
   const [optInAnalytics] = useOptInAnalytics();
@@ -141,14 +143,16 @@ export const UnauthenticatedView: FC = () => {
   return (
     <>
       <div className={commonStyles.container}>
-        <Header>
-          <LeftNav>
-            <HeaderLogo />
-          </LeftNav>
-          <RightNav hideMobile>
-            <UserMenuContainer />
-          </RightNav>
-        </Header>
+        {header === "standard" && (
+          <Header>
+            <LeftNav>
+              <HeaderLogo />
+            </LeftNav>
+            <RightNav hideMobile>
+              <UserMenuContainer />
+            </RightNav>
+          </Header>
+        )}
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
           <Heading size="lg" weight="semibold">

src/index.css

@@ -45,6 +45,9 @@ layer(compound);
   --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
   --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   --background-gradient: url("graphics/backgroundGradient.svg");
+
+  --call-view-overlay-layer: 1;
+  --call-view-header-footer-layer: 2;
 }
 
 :root,
@@ -71,6 +74,13 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
+/* This prohibits the view to scroll for pages smaller than 122px in width
+we use this for mobile pip webviews */
+.no-scroll-body {
+  position: fixed;
+  width: 100%;
+}
+
 /* We use this to not render the page at all until we know the theme.*/
 .no-theme {
   opacity: 0;

src/input/Input.tsx

@@ -9,10 +9,10 @@ import {
   type ChangeEvent,
   type FC,
   type ForwardedRef,
-  forwardRef,
   type ReactNode,
   useId,
   type JSX,
+  type Ref,
 } from "react";
 import classNames from "classnames";
 
@@ -54,6 +54,7 @@ function Field({ children, className }: FieldProps): JSX.Element {
 }
 
 interface InputFieldProps {
+  ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;
   label?: string;
   type: string;
   prefix?: string;
@@ -78,88 +79,81 @@ interface InputFieldProps {
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const InputField = forwardRef<
-  HTMLInputElement | HTMLTextAreaElement,
-  InputFieldProps
->(
-  (
-    {
-      id,
-      label,
-      className,
-      type,
-      checked,
-      prefix,
-      suffix,
-      description,
-      disabled,
-      min,
-      ...rest
-    },
-    ref,
-  ) => {
-    const descriptionId = useId();
+export const InputField: FC<InputFieldProps> = ({
+  ref,
+  id,
+  label,
+  className,
+  type,
+  checked,
+  prefix,
+  suffix,
+  description,
+  disabled,
+  min,
+  ...rest
+}) => {
+  const descriptionId = useId();
 
-    return (
-      <Field
-        className={classNames(
-          type === "checkbox" ? styles.checkboxField : styles.inputField,
-          {
-            [styles.prefix]: !!prefix,
-            [styles.disabled]: disabled,
-          },
-          className,
-        )}
-      >
-        {prefix && <span>{prefix}</span>}
-        {type === "textarea" ? (
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          <textarea
-            id={id}
-            ref={ref as ForwardedRef<HTMLTextAreaElement>}
-            disabled={disabled}
-            aria-describedby={descriptionId}
-            {...rest}
-          />
-        ) : (
-          <input
-            id={id}
-            ref={ref as ForwardedRef<HTMLInputElement>}
-            type={type}
-            checked={checked}
-            disabled={disabled}
-            aria-describedby={descriptionId}
-            min={min}
-            {...rest}
-          />
-        )}
+  return (
+    <Field
+      className={classNames(
+        type === "checkbox" ? styles.checkboxField : styles.inputField,
+        {
+          [styles.prefix]: !!prefix,
+          [styles.disabled]: disabled,
+        },
+        className,
+      )}
+    >
+      {prefix && <span>{prefix}</span>}
+      {type === "textarea" ? (
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        <textarea
+          id={id}
+          ref={ref as ForwardedRef<HTMLTextAreaElement>}
+          disabled={disabled}
+          aria-describedby={descriptionId}
+          {...rest}
+        />
+      ) : (
+        <input
+          id={id}
+          ref={ref as ForwardedRef<HTMLInputElement>}
+          type={type}
+          checked={checked}
+          disabled={disabled}
+          aria-describedby={descriptionId}
+          min={min}
+          {...rest}
+        />
+      )}
 
-        <label htmlFor={id}>
-          {type === "checkbox" && (
-            <div className={styles.checkbox}>
-              <CheckIcon />
-            </div>
-          )}
-          {label}
-        </label>
-        {suffix && <span>{suffix}</span>}
-        {description && (
-          <p
-            id={descriptionId}
-            className={
-              label
-                ? styles.description
-                : classNames(styles.description, styles.noLabel)
-            }
-          >
-            {description}
-          </p>
+      <label htmlFor={id}>
+        {type === "checkbox" && (
+          <div className={styles.checkbox}>
+            <CheckIcon />
+          </div>
         )}
-      </Field>
-    );
-  },
-);
+        {label}
+      </label>
+      {suffix && <span>{suffix}</span>}
+      {description && (
+        <p
+          id={descriptionId}
+          className={
+            label
+              ? styles.description
+              : classNames(styles.description, styles.noLabel)
+          }
+        >
+          {description}
+        </p>
+      )}
+    </Field>
+  );
+};
 
 InputField.displayName = "InputField";
 

src/livekit/useLivekit.ts

@@ -157,10 +157,13 @@ export function useLivekit(
     useObservableEagerState(
       useObservable(
         (room$) =>
-          observeTrackReference$(
-            room$.pipe(map(([room]) => room.localParticipant)),
-            Track.Source.Camera,
-          ).pipe(
+          room$.pipe(
+            switchMap(([room]) =>
+              observeTrackReference$(
+                room.localParticipant,
+                Track.Source.Camera,
+              ),
+            ),
             map((trackRef) => {
               const track = trackRef?.publication?.track;
               return track instanceof LocalVideoTrack ? track : null;
@@ -320,16 +323,18 @@ export function useLivekit(
 
   useEffect(() => {
     // Sync the requested devices with LiveKit's devices
-    if (
-      room !== undefined &&
-      connectionState === ConnectionState.Connected &&
-      !controlledAudioDevices
-    ) {
+    if (room !== undefined && connectionState === ConnectionState.Connected) {
       const syncDevice = (
         kind: MediaDeviceKind,
         selected$: Observable<SelectedDevice | undefined>,
       ): Subscription =>
         selected$.subscribe((device) => {
+          logger.info(
+            "[LivekitRoom] syncDevice room.getActiveDevice(kind) !== d.id :",
+            room.getActiveDevice(kind),
+            " !== ",
+            device?.id,
+          );
           if (
             device !== undefined &&
             room.getActiveDevice(kind) !== device.id
@@ -344,7 +349,9 @@ export function useLivekit(
 
       const subscriptions = [
         syncDevice("audioinput", devices.audioInput.selected$),
-        syncDevice("audiooutput", devices.audioOutput.selected$),
+        !controlledAudioDevices
+          ? syncDevice("audiooutput", devices.audioOutput.selected$)
+          : undefined,
         syncDevice("videoinput", devices.videoInput.selected$),
         // Restart the audio input track whenever we detect that the active media
         // device has changed to refer to a different hardware device. We do this
@@ -384,7 +391,7 @@ export function useLivekit(
       ];
 
       return (): void => {
-        for (const s of subscriptions) s.unsubscribe();
+        for (const s of subscriptions) s?.unsubscribe();
       };
     }
   }, [room, devices, connectionState, controlledAudioDevices]);

src/reactions/useReactionsSender.tsx

@@ -16,12 +16,12 @@ import {
 } from "react";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { useObservableEagerState } from "observable-hooks";
 
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { useClientState } from "../ClientContext";
 import { ElementCallReactionEventType, type ReactionOption } from ".";
 import { type CallViewModel } from "../state/CallViewModel";
+import { useBehavior } from "../useBehavior";
 
 interface ReactionsSenderContextType {
   supportsReactions: boolean;
@@ -70,7 +70,7 @@ export const ReactionsSenderProvider = ({
     [memberships, myUserId, myDeviceId],
   );
 
-  const reactions = useObservableEagerState(vm.reactions$);
+  const reactions = useBehavior(vm.reactions$);
   const myReaction = useMemo(
     () =>
       myMembershipIdentifier !== undefined
@@ -79,7 +79,7 @@ export const ReactionsSenderProvider = ({
     [myMembershipIdentifier, reactions],
   );
 
-  const handsRaised = useObservableEagerState(vm.handsRaised$);
+  const handsRaised = useBehavior(vm.handsRaised$);
   const myRaisedHand = useMemo(
     () =>
       myMembershipIdentifier !== undefined

src/room/CallEndedView.tsx

@@ -25,6 +25,7 @@ import { LinkButton } from "../button";
 interface Props {
   client: MatrixClient;
   isPasswordlessUser: boolean;
+  hideHeader: boolean;
   confineToRoom: boolean;
   endedCallId: string;
 }
@@ -32,6 +33,7 @@ interface Props {
 export const CallEndedView: FC<Props> = ({
   client,
   isPasswordlessUser,
+  hideHeader,
   confineToRoom,
   endedCallId,
 }) => {
@@ -133,10 +135,12 @@ export const CallEndedView: FC<Props> = ({
 
   return (
     <>
-      <Header>
-        <LeftNav>{!confineToRoom && <HeaderLogo />}</LeftNav>
-        <RightNav />
-      </Header>
+      {!hideHeader && (
+        <Header>
+          <LeftNav>{!confineToRoom && <HeaderLogo />}</LeftNav>
+          <RightNav />
+        </Header>
+      )}
       <div className={styles.container}>
         <main className={styles.main}>
           <Heading size="xl" weight="semibold" className={styles.headline}>

src/room/EarpieceOverlay.module.css

@@ -0,0 +1,67 @@
+.overlay {
+  position: fixed;
+  z-index: var(--call-view-overlay-layer);
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cpd-space-2x);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.overlay[data-show="true"] {
+  animation: fade-in 200ms;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    display: none;
+  }
+}
+
+.overlay[data-show="false"] {
+  animation: fade-out 130ms forwards;
+  content-visibility: hidden;
+  pointer-events: none;
+}
+
+.overlay::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background: var(--cpd-color-bg-canvas-default);
+  opacity: 0.94;
+}
+
+.icon {
+  margin-block-end: var(--cpd-space-4x);
+  background: var(--cpd-color-alpha-gray-600);
+  color: var(--cpd-color-icon-primary);
+}
+
+.overlay > h2 {
+  text-align: center;
+  margin: 0;
+}
+
+.overlay > p {
+  text-align: center;
+}
+
+.spacer {
+  min-height: var(--cpd-space-32x);
+}

src/room/EarpieceOverlay.tsx

@@ -0,0 +1,44 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC } from "react";
+import { BigIcon, Button, Heading, Text } from "@vector-im/compound-web";
+import { VoiceCallIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useTranslation } from "react-i18next";
+
+import styles from "./EarpieceOverlay.module.css";
+
+interface Props {
+  show: boolean;
+  onBackToVideoPressed?: (() => void) | null;
+}
+
+export const EarpieceOverlay: FC<Props> = ({ show, onBackToVideoPressed }) => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.overlay} data-show={show}>
+      <BigIcon className={styles.icon}>
+        <VoiceCallIcon aria-hidden />
+      </BigIcon>
+      <Heading as="h2" weight="semibold" size="md">
+        {t("handset.overlay_title")}
+      </Heading>
+      <Text>{t("handset.overlay_description")}</Text>
+      <Button
+        kind="primary"
+        size="sm"
+        onClick={() => {
+          onBackToVideoPressed?.();
+        }}
+      >
+        {t("handset.overlay_back_button")}
+      </Button>
+      {/* This spacer is used to give the overlay an offset to the top. */}
+      <div className={styles.spacer} />
+    </div>
+  );
+};

src/room/GroupCallErrorBoundary.tsx

@@ -21,6 +21,7 @@ import {
   OfflineIcon,
   WebBrowserIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Button } from "@vector-im/compound-web";
 
 import {
   ConnectionLostError,
@@ -93,9 +94,13 @@ const ErrorPage: FC<ErrorPageProps> = ({
         </p>
         {actions &&
           actions.map((action, index) => (
-            <button onClick={action.onClick} key={`action${index}`}>
+            <Button
+              kind="secondary"
+              onClick={action.onClick}
+              key={`action${index}`}
+            >
               {action.label}
-            </button>
+            </Button>
           ))}
       </ErrorView>
     </FullScreenView>

src/room/GroupCallView.test.tsx

@@ -16,7 +16,6 @@ import {
 import { render, waitFor, screen } from "@testing-library/react";
 import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
-import { of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
@@ -42,6 +41,8 @@ import { LazyEventEmitter } from "../LazyEventEmitter";
 import { MatrixRTCFocusMissingError } from "../utils/errors";
 import { ProcessorProvider } from "../livekit/TrackProcessorContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
+import { HeaderStyle } from "../UrlParams";
+import { constant } from "../state/Behavior";
 
 vi.mock("../soundUtils");
 vi.mock("../useAudioContext");
@@ -140,7 +141,7 @@ function createGroupCallView(
     room,
     localRtcMember,
     [],
-  ).withMemberships(of([]));
+  ).withMemberships(constant([]));
   rtcSession.joined = joined;
   const muteState = {
     audio: { enabled: false },
@@ -157,7 +158,7 @@ function createGroupCallView(
               confineToRoom={false}
               preload={false}
               skipLobby={false}
-              hideHeader={true}
+              header={HeaderStyle.Standard}
               rtcSession={rtcSession as unknown as MatrixRTCSession}
               isJoined={joined}
               muteStates={muteState}

src/room/GroupCallView.tsx

@@ -24,7 +24,6 @@ import {
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { useNavigate } from "react-router-dom";
-import { useObservableEagerState } from "observable-hooks";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
@@ -51,17 +50,16 @@ import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import { useUrlParams } from "../UrlParams";
+import { HeaderStyle, useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useAudioContext } from "../useAudioContext";
 import { callEventAudioSounds } from "./CallEventAudioRenderer";
 import { useLatest } from "../useLatest";
 import { usePageTitle } from "../usePageTitle";
 import {
+  ConnectionLostError,
   E2EENotSupportedError,
   ElementCallError,
-  ErrorCode,
-  RTCSessionError,
   UnknownCallError,
 } from "../utils/errors.ts";
 import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary.tsx";
@@ -72,6 +70,8 @@ import {
 } from "../settings/settings";
 import { useTypedEventEmitter } from "../useEvents";
 import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
+import { useAppBarTitle } from "../AppBar.tsx";
+import { useBehavior } from "../useBehavior.ts";
 
 declare global {
   interface Window {
@@ -85,7 +85,7 @@ interface Props {
   confineToRoom: boolean;
   preload: boolean;
   skipLobby: boolean;
-  hideHeader: boolean;
+  header: HeaderStyle;
   rtcSession: MatrixRTCSession;
   isJoined: boolean;
   muteStates: MuteStates;
@@ -98,7 +98,7 @@ export const GroupCallView: FC<Props> = ({
   confineToRoom,
   preload,
   skipLobby,
-  hideHeader,
+  header,
   rtcSession,
   isJoined,
   muteStates,
@@ -110,7 +110,7 @@ export const GroupCallView: FC<Props> = ({
   );
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
 
-  const muteAllAudio = useObservableEagerState(muteAllAudio$);
+  const muteAllAudio = useBehavior(muteAllAudio$);
   const leaveSoundContext = useLatest(
     useAudioContext({
       sounds: callEventAudioSounds,
@@ -132,6 +132,16 @@ export const GroupCallView: FC<Props> = ({
     };
   }, []);
 
+  // This CSS is the only way we could find to not make element call scroll for
+  // viewport sizes smaller than 122px width. (It is actually this exact number: 122px
+  // tested on different devices...)
+  useEffect(() => {
+    document.body.classList.add("no-scroll-body");
+    return (): void => {
+      document.body.classList.remove("no-scroll-body");
+    };
+  }, []);
+
   useEffect(() => {
     window.rtcSession = rtcSession;
     return (): void => {
@@ -142,14 +152,7 @@ export const GroupCallView: FC<Props> = ({
   useTypedEventEmitter(
     rtcSession,
     MatrixRTCSessionEvent.MembershipManagerError,
-    (error) => {
-      setExternalError(
-        new RTCSessionError(
-          ErrorCode.MEMBERSHIP_MANAGER_UNRECOVERABLE,
-          error.message ?? error,
-        ),
-      );
-    },
+    (error) => setExternalError(new ConnectionLostError()),
   );
   useEffect(() => {
     // Sanity check the room object
@@ -177,6 +180,7 @@ export const GroupCallView: FC<Props> = ({
   }, [passwordFromUrl, room.roomId]);
 
   usePageTitle(roomName);
+  useAppBarTitle(roomName);
 
   const matrixInfo = useMemo((): MatrixInfo => {
     return {
@@ -421,7 +425,7 @@ export const GroupCallView: FC<Props> = ({
         muteStates={muteStates}
         onEnter={() => void enterRTCSessionOrError(rtcSession)}
         confineToRoom={confineToRoom}
-        hideHeader={hideHeader}
+        hideHeader={header === HeaderStyle.None}
         participantCount={participantCount}
         onShareClick={onShareClick}
       />
@@ -447,7 +451,7 @@ export const GroupCallView: FC<Props> = ({
           rtcSession={rtcSession as MatrixRTCSession}
           participantCount={participantCount}
           onLeave={onLeave}
-          hideHeader={hideHeader}
+          header={header}
           muteStates={muteStates}
           e2eeSystem={e2eeSystem}
           //otelGroupCallMembership={otelGroupCallMembership}
@@ -473,6 +477,7 @@ export const GroupCallView: FC<Props> = ({
           endedCallId={rtcSession.room.roomId}
           client={client}
           isPasswordlessUser={isPasswordlessUser}
+          hideHeader={header === HeaderStyle.None}
           confineToRoom={confineToRoom}
         />
       );

src/room/InCallView.module.css

@@ -18,7 +18,7 @@ Please see LICENSE in the repository root for full details.
   position: sticky;
   flex-shrink: 0;
   inset-block-start: 0;
-  z-index: 1;
+  z-index: var(--call-view-header-footer-layer);
   background: linear-gradient(
     0deg,
     rgba(0, 0, 0, 0) 0%,
@@ -34,7 +34,7 @@ Please see LICENSE in the repository root for full details.
 .footer {
   position: sticky;
   inset-block-end: 0;
-  z-index: 1;
+  z-index: var(--call-view-header-footer-layer);
   display: grid;
   grid-template-columns:
     minmax(0, var(--inline-content-inset))

src/room/InCallView.test.tsx

@@ -47,6 +47,7 @@ import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer";
 import { MediaDevicesContext } from "../MediaDevicesContext";
+import { HeaderStyle } from "../UrlParams";
 
 // vi.hoisted(() => {
 //   localStorage = {} as unknown as Storage;
@@ -158,7 +159,7 @@ function createInCallView(): RenderResult & {
             <RoomContext value={livekitRoom}>
               <InCallView
                 client={client}
-                hideHeader={true}
+                header={HeaderStyle.Standard}
                 rtcSession={rtcSession as unknown as MatrixRTCSession}
                 muteStates={muteState}
                 vm={vm}
@@ -243,6 +244,7 @@ describe("InCallView", () => {
         queryByText("using to Device key transport"),
       ).not.toBeInTheDocument();
     });
+
     it("is not shown if setting is disabled", () => {
       useExperimentalToDeviceTransportSetting.setValue(false);
       developerModeSetting.setValue(true);
@@ -254,6 +256,7 @@ describe("InCallView", () => {
         queryByText("using to Device key transport"),
       ).not.toBeInTheDocument();
     });
+
     it("is not shown if developer mode is disabled", () => {
       useExperimentalToDeviceTransportSetting.setValue(true);
       developerModeSetting.setValue(false);

src/room/InCallView.tsx

@@ -6,29 +6,33 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { RoomContext, useLocalParticipant } from "@livekit/components-react";
-import { Text } from "@vector-im/compound-web";
+import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
 import { ConnectionState, type Room } from "livekit-client";
 import { type MatrixClient } from "matrix-js-sdk";
 import {
   type FC,
   type PointerEvent,
-  type PropsWithoutRef,
   type TouchEvent,
-  forwardRef,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
   type JSX,
+  type ReactNode,
 } from "react";
 import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
-import { useObservable, useObservableEagerState } from "observable-hooks";
+import { useObservable } from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
+import {
+  VoiceCallSolidIcon,
+  VolumeOnSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useTranslation } from "react-i18next";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -43,7 +47,7 @@ import {
   SwitchCameraButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import { useUrlParams } from "../UrlParams";
+import { type HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
@@ -105,6 +109,10 @@ import { useTypedEventEmitter } from "../useEvents.ts";
 import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
 import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships.ts";
+import { useMediaDevices } from "../MediaDevicesContext.ts";
+import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
+import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
+import { useBehavior } from "../useBehavior.ts";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -116,6 +124,7 @@ export interface ActiveCallProps
 }
 
 export const ActiveCall: FC<ActiveCallProps> = (props) => {
+  const mediaDevices = useMediaDevices();
   const sfuConfig = useOpenIDSFU(props.client, props.rtcSession);
   const { livekitRoom, connState } = useLivekit(
     props.rtcSession,
@@ -156,6 +165,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       const vm = new CallViewModel(
         props.rtcSession,
         livekitRoom,
+        mediaDevices,
         props.e2eeSystem,
         connStateObservable$,
         reactionsReader.raisedHands$,
@@ -167,7 +177,13 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         reactionsReader.destroy();
       };
     }
-  }, [props.rtcSession, livekitRoom, props.e2eeSystem, connStateObservable$]);
+  }, [
+    props.rtcSession,
+    livekitRoom,
+    mediaDevices,
+    props.e2eeSystem,
+    connStateObservable$,
+  ]);
 
   if (livekitRoom === undefined || vm === null) return null;
 
@@ -195,7 +211,7 @@ export interface InCallViewProps {
   participantCount: number;
   /** Function to call when the user explicitly ends the call */
   onLeave: () => void;
-  hideHeader: boolean;
+  header: HeaderStyle;
   otelGroupCallMembership?: OTelGroupCallMembership;
   connState: ECConnectionState;
   onShareClick: (() => void) | null;
@@ -210,10 +226,11 @@ export const InCallView: FC<InCallViewProps> = ({
   muteStates,
   participantCount,
   onLeave,
-  hideHeader,
+  header: headerStyle,
   connState,
   onShareClick,
 }) => {
+  const { t } = useTranslation();
   const { supportsReactions, sendReaction, toggleRaisedHand } =
     useReactionsSender();
 
@@ -235,7 +252,7 @@ export const InCallView: FC<InCallViewProps> = ({
     room: livekitRoom,
   });
 
-  const muteAllAudio = useObservableEagerState(muteAllAudio$);
+  const muteAllAudio = useBehavior(muteAllAudio$);
 
   // This seems like it might be enough logic to use move it into the call view model?
   const [didFallbackToRoomKey, setDidFallbackToRoomKey] = useState(false);
@@ -286,13 +303,15 @@ export const InCallView: FC<InCallViewProps> = ({
     () => void toggleRaisedHand(),
   );
 
-  const windowMode = useObservableEagerState(vm.windowMode$);
-  const layout = useObservableEagerState(vm.layout$);
-  const tileStoreGeneration = useObservableEagerState(vm.tileStoreGeneration$);
+  const windowMode = useBehavior(vm.windowMode$);
+  const layout = useBehavior(vm.layout$);
+  const tileStoreGeneration = useBehavior(vm.tileStoreGeneration$);
   const [debugTileLayout] = useSetting(debugTileLayoutSetting);
-  const gridMode = useObservableEagerState(vm.gridMode$);
-  const showHeader = useObservableEagerState(vm.showHeader$);
-  const showFooter = useObservableEagerState(vm.showFooter$);
+  const gridMode = useBehavior(vm.gridMode$);
+  const showHeader = useBehavior(vm.showHeader$);
+  const showFooter = useBehavior(vm.showFooter$);
+  const earpieceMode = useBehavior(vm.earpieceMode$);
+  const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
   const switchCamera = useSwitchCamera(vm.localVideo$);
 
   // Ideally we could detect taps by listening for click events and checking
@@ -435,25 +454,86 @@ export const InCallView: FC<InCallViewProps> = ({
     }
   }, [setGridMode]);
 
+  useAppBarSecondaryButton(
+    useMemo(() => {
+      if (audioOutputSwitcher === null) return null;
+      const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
+      const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
+      const label = isEarpieceTarget
+        ? t("settings.devices.handset")
+        : t("settings.devices.loudspeaker");
+
+      return (
+        <Tooltip label={label}>
+          <IconButton
+            onClick={(e) => {
+              e.preventDefault();
+              audioOutputSwitcher.switch();
+            }}
+          >
+            <Icon />
+          </IconButton>
+        </Tooltip>
+      );
+    }, [t, audioOutputSwitcher]),
+  );
+
+  useAppBarHidden(!showHeader);
+
+  let header: ReactNode = null;
+  if (showHeader) {
+    switch (headerStyle) {
+      case "none":
+        // Cosmetic header to fill out space while still affecting the bounds of
+        // the grid
+        header = (
+          <div
+            className={classNames(styles.header, styles.filler)}
+            ref={headerRef}
+          />
+        );
+        break;
+      case "standard":
+        header = (
+          <Header className={styles.header} ref={headerRef}>
+            <LeftNav>
+              <RoomHeaderInfo
+                id={matrixInfo.roomId}
+                name={matrixInfo.roomName}
+                avatarUrl={matrixInfo.roomAvatar}
+                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
+                participantCount={participantCount}
+              />
+            </LeftNav>
+            <RightNav>
+              {showControls && onShareClick !== null && (
+                <InviteButton
+                  className={styles.invite}
+                  onClick={onShareClick}
+                />
+              )}
+            </RightNav>
+          </Header>
+        );
+    }
+  }
+
   const Tile = useMemo(
     () =>
-      forwardRef<
-        HTMLDivElement,
-        PropsWithoutRef<TileProps<TileViewModel, HTMLDivElement>>
-      >(function Tile(
-        { className, style, targetWidth, targetHeight, model },
+      function Tile({
         ref,
-      ) {
-        const spotlightExpanded = useObservableEagerState(
-          vm.spotlightExpanded$,
-        );
-        const onToggleExpanded = useObservableEagerState(
-          vm.toggleSpotlightExpanded$,
-        );
-        const showSpeakingIndicatorsValue = useObservableEagerState(
+        className,
+        style,
+        targetWidth,
+        targetHeight,
+        model,
+      }: TileProps<TileViewModel, HTMLDivElement>): ReactNode {
+        const spotlightExpanded = useBehavior(vm.spotlightExpanded$);
+        const onToggleExpanded = useBehavior(vm.toggleSpotlightExpanded$);
+        const showSpeakingIndicatorsValue = useBehavior(
           vm.showSpeakingIndicators$,
         );
-        const showSpotlightIndicatorsValue = useObservableEagerState(
+        const showSpotlightIndicatorsValue = useBehavior(
           vm.showSpotlightIndicators$,
         );
 
@@ -481,7 +561,7 @@ export const InCallView: FC<InCallViewProps> = ({
             style={style}
           />
         );
-      }),
+      },
     [vm, openProfile],
   );
 
@@ -521,7 +601,8 @@ export const InCallView: FC<InCallViewProps> = ({
         key="fixed"
         className={styles.fixedGrid}
         style={{
-          insetBlockStart: headerBounds.bottom,
+          insetBlockStart:
+            headerBounds.height > 0 ? headerBounds.bottom : bounds.top,
           height: gridBounds.height,
         }}
         model={layout}
@@ -644,10 +725,11 @@ export const InCallView: FC<InCallViewProps> = ({
       ref={footerRef}
       className={classNames(styles.footer, {
         [styles.overlay]: windowMode === "flat",
-        [styles.hidden]: !showFooter || (!showControls && hideHeader),
+        [styles.hidden]:
+          !showFooter || (!showControls && headerStyle === "none"),
       })}
     >
-      {!hideHeader && (
+      {headerStyle !== "none" && (
         <div className={styles.logo}>
           <LogoMark width={24} height={24} aria-hidden />
           <LogoType
@@ -683,35 +765,7 @@ export const InCallView: FC<InCallViewProps> = ({
       onPointerMove={onPointerMove}
       onPointerOut={onPointerOut}
     >
-      {showHeader &&
-        (hideHeader ? (
-          // Cosmetic header to fill out space while still affecting the bounds
-          // of the grid
-          <div
-            className={classNames(styles.header, styles.filler)}
-            ref={headerRef}
-          />
-        ) : (
-          <Header className={styles.header} ref={headerRef}>
-            <LeftNav>
-              <RoomHeaderInfo
-                id={matrixInfo.roomId}
-                name={matrixInfo.roomName}
-                avatarUrl={matrixInfo.roomAvatar}
-                encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
-                participantCount={participantCount}
-              />
-            </LeftNav>
-            <RightNav>
-              {showControls && onShareClick !== null && (
-                <InviteButton
-                  className={styles.invite}
-                  onClick={onShareClick}
-                />
-              )}
-            </RightNav>
-          </Header>
-        ))}
+      {header}
       {
         // TODO: remove this once we remove the developer flag gets removed and we have shipped to
         // device transport as the default.
@@ -728,6 +782,10 @@ export const InCallView: FC<InCallViewProps> = ({
       {renderContent()}
       <CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
+      <EarpieceOverlay
+        show={earpieceMode}
+        onBackToVideoPressed={audioOutputSwitcher?.switch}
+      />
       <ReactionsOverlay vm={vm} />
       {footer}
       {layout.type !== "pip" && (

src/room/LobbyView.tsx

@@ -184,6 +184,16 @@ export const LobbyView: FC<Props> = ({
         null) as LocalVideoTrack | null,
     [tracks],
   );
+
+  useEffect(() => {
+    if (videoTrack && videoInputId === undefined) {
+      // If we have a video track but no videoInputId,
+      // we have to update the available devices. So that we select the first
+      // available video input device as the default instead of the `""` id.
+      devices.requestDeviceNames();
+    }
+  }, [devices, videoInputId, videoTrack]);
+
   useTrackProcessorSync(videoTrack);
   const showSwitchCamera = useShowSwitchCamera(
     useObservable(

src/room/MuteStates.test.tsx

@@ -191,7 +191,11 @@ describe("useMuteStates", () => {
     mockConfig();
 
     render(
-      <MemoryRouter initialEntries={["/room/?skipLobby=true"]}>
+      <MemoryRouter
+        initialEntries={[
+          "/room/?skipLobby=true&widgetId=1234&parentUrl=www.parent.org",
+        ]}
+      >
         <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent />
         </MediaDevicesContext>

src/room/MuteStates.ts

@@ -21,7 +21,7 @@ import {
   type SelectedDevice,
   type MediaDevice,
 } from "../state/MediaDevices";
-import { useMediaDevices } from "../MediaDevicesContext";
+import { useIsEarpiece, useMediaDevices } from "../MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import { ElementWidgetActions, widget } from "../widget";
 import { Config } from "../config/Config";
@@ -58,6 +58,7 @@ export interface MuteStates {
 function useMuteState(
   device: MediaDevice<DeviceLabel, SelectedDevice>,
   enabledByDefault: () => boolean,
+  forceUnavailable: boolean = false,
 ): MuteState {
   const available = useObservableEagerState(device.available$);
   const [enabled, setEnabled] = useReactiveState<boolean | undefined>(
@@ -67,13 +68,13 @@ function useMuteState(
   );
   return useMemo(
     () =>
-      available.size === 0
+      available.size === 0 || forceUnavailable
         ? deviceUnavailable
         : {
             enabled: enabled ?? false,
             setEnabled: setEnabled as Dispatch<SetStateAction<boolean>>,
           },
-    [available.size, enabled, setEnabled],
+    [available.size, enabled, forceUnavailable, setEnabled],
   );
 }
 
@@ -85,9 +86,19 @@ export function useMuteStates(isJoined: boolean): MuteStates {
   const audio = useMuteState(devices.audioInput, () => {
     return Config.get().media_devices.enable_audio && !skipLobby && !isJoined;
   });
+  useEffect(() => {
+    // If audio is enabled, we need to request the device names again,
+    // because iOS will not be able to switch to the correct device after un-muting.
+    // This is one of the main changes that makes iOS work with bluetooth audio devices.
+    if (audio.enabled) {
+      devices.requestDeviceNames();
+    }
+  }, [audio.enabled, devices]);
+  const isEarpiece = useIsEarpiece();
   const video = useMuteState(
     devices.videoInput,
     () => Config.get().media_devices.enable_video && !skipLobby && !isJoined,
+    isEarpiece, // Force video to be unavailable if using earpiece
   );
 
   useEffect(() => {

src/room/ReactionsOverlay.tsx

@@ -6,16 +6,16 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode } from "react";
-import { useObservableState } from "observable-hooks";
 
 import styles from "./ReactionsOverlay.module.css";
 import { type CallViewModel } from "../state/CallViewModel";
+import { useBehavior } from "../useBehavior";
 
 export function ReactionsOverlay({ vm }: { vm: CallViewModel }): ReactNode {
-  const reactionsIcons = useObservableState(vm.visibleReactions$);
+  const reactionsIcons = useBehavior(vm.visibleReactions$);
   return (
     <div className={styles.container}>
-      {reactionsIcons?.map(({ sender, emoji, startX }) => (
+      {reactionsIcons.map(({ sender, emoji, startX }) => (
         <span
           // Reactions effects are considered presentation elements. The reaction
           // is also present on the sender's tile, which assistive technology can

src/room/RoomAuthView.tsx

@@ -19,8 +19,10 @@ import { UserMenuContainer } from "../UserMenuContainer";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 import { Config } from "../config/Config";
 import { ExternalLink, Link } from "../button/Link";
+import { useUrlParams } from "../UrlParams";
 
 export const RoomAuthView: FC = () => {
+  const { header } = useUrlParams();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
 
@@ -53,14 +55,16 @@ export const RoomAuthView: FC = () => {
 
   return (
     <>
-      <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav>
-          <UserMenuContainer preventNavigation />
-        </RightNav>
-      </Header>
+      {header === "standard" && (
+        <Header>
+          <LeftNav>
+            <HeaderLogo />
+          </LeftNav>
+          <RightNav>
+            <UserMenuContainer preventNavigation />
+          </RightNav>
+        </Header>
+      )}
       <div className={styles.container}>
         <main className={styles.main}>
           <Heading size="xl" weight="semibold" className={styles.headline}>

src/room/RoomPage.tsx

@@ -43,14 +43,8 @@ import { ErrorView } from "../ErrorView";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
 
 export const RoomPage: FC = () => {
-  const {
-    confineToRoom,
-    appPrompt,
-    preload,
-    hideHeader,
-    displayName,
-    skipLobby,
-  } = useUrlParams();
+  const { confineToRoom, appPrompt, preload, header, displayName, skipLobby } =
+    useUrlParams();
   const { t } = useTranslation();
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
 
@@ -120,7 +114,7 @@ export const RoomPage: FC = () => {
             confineToRoom={confineToRoom}
             preload={preload}
             skipLobby={skipLobby || wasInWaitForInviteState.current}
-            hideHeader={hideHeader}
+            header={header}
             muteStates={muteStates}
           />
         );
@@ -161,7 +155,7 @@ export const RoomPage: FC = () => {
             enterLabel={label}
             waitingForInvite={groupCallState.kind === "waitForInvite"}
             confineToRoom={confineToRoom}
-            hideHeader={hideHeader}
+            hideHeader={header !== "standard"}
             participantCount={null}
             muteStates={muteStates}
             onShareClick={null}

src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap

@@ -112,6 +112,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -131,7 +132,13 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
           <p>
             You were disconnected from the call.
           </p>
-          <button>
+          <button
+            class="_button_vczzf_8"
+            data-kind="secondary"
+            data-size="lg"
+            role="button"
+            tabindex="0"
+          >
             Reconnect
           </button>
           <button
@@ -262,6 +269,7 @@ exports[`should have a close button in widget mode 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -414,6 +422,7 @@ exports[`should render the error page with link back to home 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -566,6 +575,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -718,6 +728,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -737,7 +748,13 @@ exports[`should report correct error for 'Connection lost' 1`] = `
           <p>
             You were disconnected from the call.
           </p>
-          <button>
+          <button
+            class="_button_vczzf_8"
+            data-kind="secondary"
+            data-size="lg"
+            role="button"
+            tabindex="0"
+          >
             Reconnect
           </button>
           <button
@@ -868,6 +885,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -1015,6 +1033,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
             data-size="large"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -5,9 +5,56 @@ exports[`InCallView > rendering > renders 1`] = `
   <div
     class="inRoom"
   >
-    <div
-      class="header filler"
-    />
+    <header
+      class="header header"
+    >
+      <div
+        class="nav leftNav"
+      >
+        <div
+          class="roomHeaderInfo"
+          data-size="lg"
+        >
+          <span
+            aria-label=""
+            class="_avatar_1qbcf_8 roomAvatar _avatar-imageless_1qbcf_52"
+            data-color="1"
+            data-type="round"
+            role="img"
+            style="--cpd-avatar-size: 56px;"
+          />
+          <div
+            class="nameLine"
+          >
+            <h1
+              class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
+              data-testid="roomHeader_roomName"
+            />
+            <span
+              tabindex="0"
+            >
+              <svg
+                aria-labelledby="«r0»"
+                class="lock"
+                data-encrypted="false"
+                fill="currentColor"
+                height="16"
+                viewBox="0 0 24 24"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="nav rightNav"
+      />
+    </header>
     <div>
       mocked: MatrixAudioRenderer
     </div>
@@ -35,18 +82,181 @@ exports[`InCallView > rendering > renders 1`] = `
     >
       <div />
     </div>
+    <div
+      class="overlay"
+      data-show="false"
+    >
+      <div
+        class="_content_o77nw_8 icon"
+        data-size="large"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            clip-path="url(#a)"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M8.929 15.1a13.6 13.6 0 0 0 4.654 3.066q2.62 1.036 5.492.923h.008l.003-.004.003-.002-.034-3.124-3.52-.483-1.791 1.792-.645-.322a13.5 13.5 0 0 1-3.496-2.52 13.4 13.4 0 0 1-2.52-3.496l-.322-.644 1.792-1.792-.483-3.519-3.123-.034-.003.002-.003.004v.002a13.65 13.65 0 0 0 .932 5.492A13.4 13.4 0 0 0 8.93 15.1m3.92 4.926a15.6 15.6 0 0 1-5.334-3.511 15.4 15.4 0 0 1-3.505-5.346 15.6 15.6 0 0 1-1.069-6.274 1.93 1.93 0 0 1 .589-1.366c.366-.366.84-.589 1.386-.589h.01l3.163.035a1.96 1.96 0 0 1 1.958 1.694v.005l.487 3.545v.003c.043.297.025.605-.076.907a2 2 0 0 1-.485.773l-.762.762a11.4 11.4 0 0 0 3.206 3.54q.457.33.948.614l.762-.761a2 2 0 0 1 .774-.486c.302-.1.61-.118.907-.076l3.553.487a1.96 1.96 0 0 1 1.694 1.958l.034 3.174c0 .546-.223 1.02-.588 1.386-.361.36-.827.582-1.363.588a15.3 15.3 0 0 1-6.29-1.062"
+              fill-rule="evenodd"
+            />
+          </g>
+          <defs>
+            <clippath
+              id="a"
+            >
+              <path
+                d="M0 0h24v24H0z"
+              />
+            </clippath>
+          </defs>
+        </svg>
+      </div>
+      <h2
+        class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
+      >
+        Handset Mode
+      </h2>
+      <p
+        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+      >
+        Only works while using app
+      </p>
+      <button
+        class="_button_vczzf_8"
+        data-kind="primary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Back to Speaker Mode
+      </button>
+      <div
+        class="spacer"
+      />
+    </div>
     <div
       class="container"
     />
     <div
       class="footer"
     >
+      <div
+        class="logo"
+      >
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="24"
+          viewBox="0 0 48 48"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            id="Logo Mark"
+          >
+            <rect
+              fill="#0DBD8B"
+              height="48"
+              rx="23.93"
+              width="47.86"
+            />
+            <g
+              id="Union"
+            >
+              <path
+                d="M21.3075 9.42871C20.3396 9.42871 19.5549 10.214 19.5549 11.1828C19.5549 12.1516 20.3396 12.9369 21.3075 12.9369C25.9321 12.9369 29.6811 16.689 29.6811 21.3175C29.6811 22.2863 30.4657 23.0716 31.4337 23.0716C32.4016 23.0716 33.1863 22.2863 33.1863 21.3175C33.1863 14.7515 27.868 9.42871 21.3075 9.42871Z"
+                fill="white"
+              />
+              <path
+                d="M38.4591 21.3174C38.4591 20.3486 37.6745 19.5633 36.7065 19.5633C35.7386 19.5633 34.9539 20.3486 34.9539 21.3174C34.9539 25.9459 31.2049 29.698 26.5804 29.698C25.6124 29.698 24.8277 30.4833 24.8277 31.4521C24.8277 32.4209 25.6124 33.2062 26.5804 33.2062C33.1408 33.2062 38.4591 27.8834 38.4591 21.3174Z"
+                fill="white"
+              />
+              <path
+                d="M28.3329 36.8173C28.3329 37.786 27.5482 38.5714 26.5803 38.5714C20.0198 38.5714 14.7015 33.2486 14.7015 26.6826C14.7015 25.7138 15.4862 24.9285 16.4541 24.9285C17.4221 24.9285 18.2067 25.7138 18.2067 26.6826C18.2067 31.3111 21.9557 35.0632 26.5803 35.0632C27.5482 35.0632 28.3329 35.8485 28.3329 36.8173Z"
+                fill="white"
+              />
+              <path
+                d="M9.40112 26.6827C9.40112 27.6514 10.1858 28.4368 11.1537 28.4368C12.1217 28.4368 12.9064 27.6514 12.9064 26.6827C12.9064 22.0542 16.6553 18.3021 21.2799 18.3021C22.2478 18.3021 23.0325 17.5167 23.0325 16.548C23.0325 15.5792 22.2478 14.7939 21.2799 14.7939C14.7194 14.7939 9.40112 20.1167 9.40112 26.6827Z"
+                fill="white"
+              />
+            </g>
+          </g>
+        </svg>
+        <svg
+          aria-label="Element Call"
+          fill="none"
+          height="11"
+          viewBox="0 0 160 22"
+          width="80"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            id="Logo Type"
+          >
+            <g
+              id="Vector"
+            >
+              <path
+                d="M14.8673 15.1575H3.39742C3.53293 16.3508 3.96849 17.3036 4.70411 18.0157C5.43974 18.7087 6.40766 19.0551 7.60789 19.0551C8.40159 19.0551 9.11785 18.8626 9.75668 18.4777C10.3955 18.0927 10.8504 17.5731 11.1215 16.9186H14.606C14.1414 18.4392 13.2702 19.671 11.9926 20.6142C10.7343 21.5381 9.24368 22 7.52078 22C5.27519 22 3.45549 21.259 2.06168 19.7769C0.687227 18.2948 0 16.4182 0 14.147C0 11.9335 0.696906 10.0761 2.09072 8.5748C3.48453 7.07349 5.28487 6.32283 7.49174 6.32283C9.69861 6.32283 11.4796 7.06387 12.8347 8.54593C14.2091 10.0087 14.8964 11.8565 14.8964 14.0892L14.8673 15.1575ZM7.49174 9.12336C6.40766 9.12336 5.50749 9.44095 4.79123 10.0761C4.07496 10.7113 3.62972 11.5582 3.45549 12.6168H11.4699C11.315 11.5582 10.8892 10.7113 10.1922 10.0761C9.49534 9.44095 8.59517 9.12336 7.49174 9.12336Z"
+                fill="currentColor"
+              />
+              <path
+                d="M17.2743 17.1785V0H20.7298V17.2362C20.7298 18.0061 21.1557 18.3911 22.0074 18.3911L22.6172 18.3622V21.6247C22.2881 21.6824 21.9397 21.7113 21.5719 21.7113C20.0813 21.7113 18.9875 21.336 18.2906 20.5853C17.6131 19.8346 17.2743 18.699 17.2743 17.1785Z"
+                fill="currentColor"
+              />
+              <path
+                d="M38.71 15.1575H27.2401C27.3756 16.3508 27.8112 17.3036 28.5468 18.0157C29.2824 18.7087 30.2504 19.0551 31.4506 19.0551C32.2443 19.0551 32.9606 18.8626 33.5994 18.4777C34.2382 18.0927 34.6931 17.5731 34.9642 16.9186H38.4487C37.9841 18.4392 37.113 19.671 35.8353 20.6142C34.577 21.5381 33.0864 22 31.3635 22C29.1179 22 27.2982 21.259 25.9044 19.7769C24.5299 18.2948 23.8427 16.4182 23.8427 14.147C23.8427 11.9335 24.5396 10.0761 25.9334 8.5748C27.3272 7.07349 29.1276 6.32283 31.3344 6.32283C33.5413 6.32283 35.3223 7.06387 36.6774 8.54593C38.0518 10.0087 38.7391 11.8565 38.7391 14.0892L38.71 15.1575ZM31.3344 9.12336C30.2504 9.12336 29.3502 9.44095 28.6339 10.0761C27.9177 10.7113 27.4724 11.5582 27.2982 12.6168H35.3126C35.1577 11.5582 34.7319 10.7113 34.035 10.0761C33.3381 9.44095 32.4379 9.12336 31.3344 9.12336Z"
+                fill="currentColor"
+              />
+              <path
+                d="M54.3001 13.0499V21.6535H50.8446V12.6745C50.8446 10.4033 49.8961 9.26772 47.9989 9.26772C46.9729 9.26772 46.1502 9.59493 45.5307 10.2493C44.9306 10.9038 44.6306 11.7988 44.6306 12.9344V21.6535H41.1751V6.66929H44.3692V8.66142C44.737 7.98775 45.2984 7.42957 46.0534 6.98688C46.8084 6.54418 47.7473 6.32283 48.8701 6.32283C50.9608 6.32283 52.4707 7.11199 53.4 8.69029C54.6776 7.11199 56.3812 6.32283 58.5106 6.32283C60.2722 6.32283 61.6273 6.87139 62.5759 7.9685C63.5244 9.04637 63.9987 10.4707 63.9987 12.2415V21.6535H60.5432V12.6745C60.5432 10.4033 59.5947 9.26772 57.6975 9.26772C56.6522 9.26772 55.8198 9.60455 55.2003 10.2782C54.6002 10.9326 54.3001 11.8565 54.3001 13.0499Z"
+                fill="currentColor"
+              />
+              <path
+                d="M81.1834 15.1575H69.7135C69.849 16.3508 70.2846 17.3036 71.0202 18.0157C71.7558 18.7087 72.7237 19.0551 73.924 19.0551C74.7177 19.0551 75.4339 18.8626 76.0728 18.4777C76.7116 18.0927 77.1665 17.5731 77.4375 16.9186H80.9221C80.4575 18.4392 79.5863 19.671 78.3087 20.6142C77.0504 21.5381 75.5598 22 73.8369 22C71.5913 22 69.7716 21.259 68.3778 19.7769C67.0033 18.2948 66.3161 16.4182 66.3161 14.147C66.3161 11.9335 67.013 10.0761 68.4068 8.5748C69.8006 7.07349 71.601 6.32283 73.8078 6.32283C76.0147 6.32283 77.7957 7.06387 79.1508 8.54593C80.5252 10.0087 81.2124 11.8565 81.2124 14.0892L81.1834 15.1575ZM73.8078 9.12336C72.7237 9.12336 71.8236 9.44095 71.1073 10.0761C70.391 10.7113 69.9458 11.5582 69.7716 12.6168H77.786C77.6311 11.5582 77.2052 10.7113 76.5083 10.0761C75.8114 9.44095 74.9113 9.12336 73.8078 9.12336Z"
+                fill="currentColor"
+              />
+              <path
+                d="M86.8426 6.66929V8.66142C87.191 8.007 87.7621 7.45844 88.5558 7.01575C89.3689 6.55381 90.3465 6.32283 91.4886 6.32283C93.2696 6.32283 94.6441 6.86177 95.612 7.93963C96.5993 9.0175 97.0929 10.4514 97.0929 12.2415V21.6535H93.6374V12.6745C93.6374 11.6159 93.3858 10.7883 92.8824 10.1916C92.3985 9.57568 91.6532 9.26772 90.6465 9.26772C89.5431 9.26772 88.672 9.59493 88.0331 10.2493C87.4137 10.9038 87.1039 11.8084 87.1039 12.9633V21.6535H83.6484V6.66929H86.8426Z"
+                fill="currentColor"
+              />
+              <path
+                d="M107.185 18.5932V21.5669C106.759 21.6824 106.159 21.7402 105.384 21.7402C102.442 21.7402 100.971 20.2677 100.971 17.3228V9.41208H98.6766V6.66929H100.971V2.77165H104.426V6.66929H107.243V9.41208H104.426V16.9764C104.426 18.1505 104.987 18.7375 106.11 18.7375L107.185 18.5932Z"
+                fill="currentColor"
+              />
+              <path
+                d="M116.115 18.9881C114.474 17.2035 113.653 14.9429 113.653 12.2064C113.653 9.4699 114.474 7.21782 116.115 5.45015C117.773 3.66548 119.953 2.77314 122.654 2.77314C124.876 2.77314 126.756 3.38503 128.295 4.6088C129.833 5.83258 130.816 7.47277 131.244 9.52939H129.269C128.91 7.99967 128.132 6.7844 126.936 5.88357C125.739 4.98273 124.312 4.53232 122.654 4.53232C120.534 4.53232 118.824 5.23769 117.525 6.64842C116.243 8.05916 115.602 9.91182 115.602 12.2064C115.602 14.501 116.243 16.3536 117.525 17.7644C118.824 19.1751 120.534 19.8805 122.654 19.8805C124.312 19.8805 125.739 19.4301 126.936 18.5292C128.132 17.6284 128.91 16.4131 129.269 14.8834H131.244C130.816 16.94 129.833 18.5802 128.295 19.804C126.756 21.0278 124.876 21.6397 122.654 21.6397C119.953 21.6397 117.773 20.7558 116.115 18.9881Z"
+                fill="currentColor"
+              />
+              <path
+                d="M143.174 15.0874C140.832 15.0874 139.233 15.1384 138.379 15.2403C137.541 15.3253 136.926 15.4698 136.532 15.6738C135.831 16.0647 135.481 16.6936 135.481 17.5604C135.481 19.2261 136.473 20.0589 138.456 20.0589C139.977 20.0589 141.139 19.719 141.943 19.0391C142.763 18.3593 143.174 17.4499 143.174 16.3111V15.0874ZM138.25 21.5632C136.763 21.5632 135.626 21.2062 134.84 20.4924C134.071 19.7615 133.686 18.8012 133.686 17.6114C133.686 16.8295 133.891 16.1327 134.301 15.5208C134.729 14.9089 135.31 14.4585 136.045 14.1695C136.661 13.9316 137.455 13.7786 138.43 13.7106C139.404 13.6256 140.986 13.5831 143.174 13.5831V12.7418C143.174 10.6002 141.943 9.52939 139.481 9.52939C137.361 9.52939 136.131 10.3877 135.789 12.1044H134.019C134.207 10.8466 134.746 9.84383 135.635 9.09597C136.541 8.34811 137.849 7.97418 139.558 7.97418C141.387 7.97418 142.746 8.3991 143.635 9.24894C144.541 10.0988 144.994 11.2716 144.994 12.7673V21.2572H143.251V19.3706C142.345 20.8323 140.678 21.5632 138.25 21.5632Z"
+                fill="currentColor"
+              />
+              <path
+                d="M149.358 18.4018V2.13576H151.178V18.1978C151.178 18.7247 151.264 19.0901 151.435 19.2941C151.623 19.498 151.956 19.6 152.435 19.6L152.948 19.549V21.2062C152.657 21.2572 152.341 21.2827 151.999 21.2827C150.238 21.2827 149.358 20.3224 149.358 18.4018Z"
+                fill="currentColor"
+              />
+              <path
+                d="M155.944 18.4018V2.13576H157.764V18.1978C157.764 18.7247 157.85 19.0901 158.021 19.2941C158.209 19.498 158.542 19.6 159.021 19.6L159.534 19.549V21.2062C159.243 21.2572 158.927 21.2827 158.585 21.2827C156.824 21.2827 155.944 20.3224 155.944 18.4018Z"
+                fill="currentColor"
+              />
+            </g>
+          </g>
+        </svg>
+      </div>
       <div
         class="buttons"
       >
         <button
           aria-disabled="false"
-          aria-labelledby="«r0»"
+          aria-labelledby="«r5»"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
@@ -69,7 +279,7 @@ exports[`InCallView > rendering > renders 1`] = `
         </button>
         <button
           aria-disabled="false"
-          aria-labelledby="«r5»"
+          aria-labelledby="«ra»"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="primary"
           data-size="lg"
@@ -91,7 +301,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby="«ra»"
+          aria-labelledby="«rf»"
           class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
           data-kind="secondary"
           data-size="lg"
@@ -112,7 +322,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby="«rf»"
+          aria-labelledby="«rk»"
           class="_button_vczzf_8 endCall _has-icon_vczzf_57 _icon-only_vczzf_50 _destructive_vczzf_107"
           data-kind="primary"
           data-size="lg"
@@ -138,7 +348,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="toggle layout"
       >
         <input
-          aria-labelledby="«rk»"
+          aria-labelledby="«rp»"
           name="layout"
           type="radio"
           value="spotlight"
@@ -156,7 +366,7 @@ exports[`InCallView > rendering > renders 1`] = `
           />
         </svg>
         <input
-          aria-labelledby="«rp»"
+          aria-labelledby="«ru»"
           checked=""
           name="layout"
           type="radio"

src/room/useActiveFocus.ts

@@ -9,7 +9,7 @@ import {
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useRef } from "react";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type LivekitFocus, isLivekitFocus } from "matrix-js-sdk/lib/matrixrtc";
@@ -24,27 +24,22 @@ import { useTypedEventEmitterState } from "../useEvents";
 export function useActiveLivekitFocus(
   rtcSession: MatrixRTCSession,
 ): LivekitFocus | undefined {
-  const activeFocus = useTypedEventEmitterState(
+  const prevActiveFocus = useRef<LivekitFocus | undefined>(undefined);
+  return useTypedEventEmitterState(
     rtcSession,
     MatrixRTCSessionEvent.MembershipsChanged,
     useCallback(() => {
       const f = rtcSession.getActiveFocus();
       // Only handle foci with type="livekit" for now.
-      return !!f && isLivekitFocus(f) ? f : undefined;
+      if (f && isLivekitFocus(f) && !deepCompare(f, prevActiveFocus.current)) {
+        const oldestMembership = rtcSession.getOldestMembership();
+        logger.info(
+          `Got new active focus from membership: ${oldestMembership?.sender}/${oldestMembership?.deviceId}.
+          Updated focus (focus switch) from ${JSON.stringify(prevActiveFocus.current)} to ${JSON.stringify(f)}`,
+        );
+        prevActiveFocus.current = f;
+      }
+      return prevActiveFocus.current;
     }, [rtcSession]),
   );
-
-  const prevActiveFocus = useRef(activeFocus);
-  useEffect(() => {
-    if (!deepCompare(activeFocus, prevActiveFocus.current)) {
-      const oldestMembership = rtcSession.getOldestMembership();
-      logger.warn(
-        `Got new active focus from membership: ${oldestMembership?.sender}/${oldestMembership?.deviceId}.
-        Updated focus (focus switch) from ${JSON.stringify(prevActiveFocus.current)} to ${JSON.stringify(activeFocus)}`,
-      );
-      prevActiveFocus.current = activeFocus;
-    }
-  }, [activeFocus, rtcSession]);
-
-  return activeFocus;
 }

src/rtcSessionHelpers.ts

@@ -18,8 +18,8 @@ import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
 import { PosthogAnalytics } from "./analytics/PosthogAnalytics";
 import { Config } from "./config/Config";
 import { ElementWidgetActions, widget, type WidgetHelpers } from "./widget";
-import { MatrixRTCFocusMissingError } from "./utils/errors.ts";
-import { getUrlParams } from "./UrlParams.ts";
+import { MatrixRTCFocusMissingError } from "./utils/errors";
+import { getUrlParams } from "./UrlParams";
 
 const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
 
@@ -116,6 +116,7 @@ export async function enterRTCSession(
     await makePreferredLivekitFoci(rtcSession, livekitAlias),
     makeActiveFocus(),
     {
+      notificationType: getUrlParams().sendNotificationType,
       useNewMembershipManager,
       manageMediaKeys: encryptMedia,
       ...(useDeviceSessionMemberEvents !== undefined && {
@@ -127,6 +128,8 @@ export async function enterRTCSession(
       delayedLeaveEventDelayMs:
         matrixRtcSessionConfig?.delayed_leave_event_delay_ms ??
         matrixRtcSessionConfig?.membership_server_side_expiry_timeout,
+      delayedLeaveEventRestartLocalTimeoutMs:
+        matrixRtcSessionConfig?.delayed_leave_event_restart_local_timeout_ms,
       networkErrorRetryMs: matrixRtcSessionConfig?.network_error_retry_ms,
       makeKeyDelay:
         matrixRtcSessionConfig?.wait_for_key_rotation_ms ??

src/settings/DeviceSelection.tsx

@@ -94,8 +94,11 @@ export const DeviceSelection: FC<Props> = ({
                   </Trans>
                 );
               break;
+            case "speaker":
+              labelText = t("settings.devices.loudspeaker");
+              break;
             case "earpiece":
-              labelText = t("settings.devices.earpiece");
+              labelText = t("settings.devices.handset");
               break;
           }
 

src/settings/SettingsModal.tsx

@@ -10,7 +10,6 @@ import { useTranslation } from "react-i18next";
 import { type MatrixClient } from "matrix-js-sdk";
 import { Button, Root as Form, Separator } from "@vector-im/compound-web";
 import { type Room as LivekitRoom } from "livekit-client";
-import { useObservableEagerState } from "observable-hooks";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
@@ -34,6 +33,7 @@ import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
 import { FieldRow, InputField } from "../input/Input";
 import { useSubmitRageshake } from "./submit-rageshake";
 import { useUrlParams } from "../UrlParams";
+import { useBehavior } from "../useBehavior";
 
 type SettingsTab =
   | "audio"
@@ -112,7 +112,7 @@ export const SettingsModal: FC<Props> = ({
   // rather than the input section.
   const { controlledAudioDevices } = useUrlParams();
   // If we are on iOS we will show a button to open the native audio device picker.
-  const iosDeviceMenu = useObservableEagerState(iosDeviceMenu$);
+  const iosDeviceMenu = useBehavior(iosDeviceMenu$);
 
   const audioTab: Tab<SettingsTab> = {
     key: "audio",

src/settings/settings.ts

@@ -6,10 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { logger } from "matrix-js-sdk/lib/logger";
-import { BehaviorSubject, type Observable } from "rxjs";
-import { useObservableEagerState } from "observable-hooks";
+import { BehaviorSubject } from "rxjs";
 
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import { type Behavior } from "../state/Behavior";
+import { useBehavior } from "../useBehavior";
 
 export class Setting<T> {
   public constructor(
@@ -38,7 +39,7 @@ export class Setting<T> {
   private readonly key: string;
 
   private readonly _value$: BehaviorSubject<T>;
-  public readonly value$: Observable<T>;
+  public readonly value$: Behavior<T>;
 
   public readonly setValue = (value: T): void => {
     this._value$.next(value);
@@ -53,7 +54,7 @@ export class Setting<T> {
  * React hook that returns a settings's current value and a setter.
  */
 export function useSetting<T>(setting: Setting<T>): [T, (value: T) => void] {
-  return [useObservableEagerState(setting.value$), setting.setValue];
+  return [useBehavior(setting.value$), setting.setValue];
 }
 
 // null = undecided

src/state/Behavior.ts

@@ -0,0 +1,26 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { BehaviorSubject } from "rxjs";
+
+/**
+ * A stateful, read-only reactive value. As an Observable, it is "hot" and
+ * always replays the current value upon subscription.
+ *
+ * A Behavior is to BehaviorSubject what Observable is to Subject; it does not
+ * provide a way to imperatively set new values. For more info on the
+ * distinction between Behaviors and Observables, see
+ * https://monoid.dk/post/behaviors-and-streams-why-both/.
+ */
+export type Behavior<T> = Omit<BehaviorSubject<T>, "next" | "observers">;
+
+/**
+ * Creates a Behavior which never changes in value.
+ */
+export function constant<T>(value: T): Behavior<T> {
+  return new BehaviorSubject(value);
+}

src/state/CallViewModel.test.ts

@@ -12,9 +12,9 @@ import {
   debounceTime,
   distinctUntilChanged,
   map,
+  NEVER,
   type Observable,
   of,
-  skip,
   switchMap,
 } from "rxjs";
 import { type MatrixClient } from "matrix-js-sdk";
@@ -42,6 +42,7 @@ import {
   withTestScheduler,
   mockRtcMembership,
   MockRTCSession,
+  mockMediaDevices,
 } from "../utils/test";
 import {
   ECAddonConnectionState,
@@ -71,6 +72,20 @@ import {
   localId,
   localRtcMember,
 } from "../utils/test-fixtures";
+import { ObservableScope } from "./ObservableScope";
+import { MediaDevices } from "./MediaDevices";
+import { getValue } from "../utils/observable";
+import { type Behavior, constant } from "./Behavior";
+
+const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
+vi.mock("../UrlParams", () => ({ getUrlParams }));
+
+vi.mock("rxjs", async (importOriginal) => ({
+  ...(await importOriginal()),
+  // Disable interval Observables for the following tests since the test
+  // scheduler will loop on them forever and never call the test 'done'
+  interval: (): Observable<number> => NEVER,
+}));
 
 vi.mock("@livekit/components-core");
 
@@ -150,9 +165,10 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
         case "grid":
           return combineLatest(
             [
-              l.spotlight?.media$ ?? of(undefined),
+              l.spotlight?.media$ ?? constant(undefined),
               ...l.grid.map((vm) => vm.media$),
             ],
+            // eslint-disable-next-line rxjs/finnish -- false positive
             (spotlight, ...grid) => ({
               type: l.type,
               spotlight: spotlight?.map((vm) => vm.id),
@@ -171,7 +187,8 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           );
         case "spotlight-expanded":
           return combineLatest(
-            [l.spotlight.media$, l.pip?.media$ ?? of(undefined)],
+            [l.spotlight.media$, l.pip?.media$ ?? constant(undefined)],
+            // eslint-disable-next-line rxjs/finnish -- false positive
             (spotlight, pip) => ({
               type: l.type,
               spotlight: spotlight.map((vm) => vm.id),
@@ -205,10 +222,11 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
 }
 
 function withCallViewModel(
-  remoteParticipants$: Observable<RemoteParticipant[]>,
-  rtcMembers$: Observable<Partial<CallMembership>[]>,
+  remoteParticipants$: Behavior<RemoteParticipant[]>,
+  rtcMembers$: Behavior<Partial<CallMembership>[]>,
   connectionState$: Observable<ECConnectionState>,
   speaking: Map<Participant, Observable<boolean>>,
+  mediaDevices: MediaDevices,
   continuation: (
     vm: CallViewModel,
     subjects: { raisedHands$: BehaviorSubject<Record<string, RaisedHandInfo>> },
@@ -262,6 +280,7 @@ function withCallViewModel(
   const vm = new CallViewModel(
     rtcSession as unknown as MatrixRTCSession,
     liveKitRoom,
+    mediaDevices,
     {
       kind: E2eeType.PER_PARTICIPANT,
     },
@@ -282,7 +301,7 @@ function withCallViewModel(
 }
 
 test("participants are retained during a focus switch", () => {
-  withTestScheduler(({ hot, expectObservable }) => {
+  withTestScheduler(({ behavior, expectObservable }) => {
     // Participants disappear on frame 2 and come back on frame 3
     const participantInputMarbles = "a-ba";
     // Start switching focus on frame 1 and reconnect on frame 3
@@ -291,16 +310,17 @@ test("participants are retained during a focus switch", () => {
     const expectedLayoutMarbles = "  a";
 
     withCallViewModel(
-      hot(participantInputMarbles, {
+      behavior(participantInputMarbles, {
         a: [aliceParticipant, bobParticipant],
         b: [],
       }),
-      of([aliceRtcMember, bobRtcMember]),
-      hot(connectionInputMarbles, {
+      constant([aliceRtcMember, bobRtcMember]),
+      behavior(connectionInputMarbles, {
         c: ConnectionState.Connected,
         s: ECAddonConnectionState.ECSwitchingFocus,
       }),
       new Map(),
+      mockMediaDevices({}),
       (vm) => {
         expectObservable(summarizeLayout$(vm.layout$)).toBe(
           expectedLayoutMarbles,
@@ -318,7 +338,7 @@ test("participants are retained during a focus switch", () => {
 });
 
 test("screen sharing activates spotlight layout", () => {
-  withTestScheduler(({ hot, schedule, expectObservable }) => {
+  withTestScheduler(({ behavior, schedule, expectObservable }) => {
     // Start with no screen shares, then have Alice and Bob share their screens,
     // then return to no screen shares, then have just Alice share for a bit
     const participantInputMarbles = "    abcda-ba";
@@ -331,15 +351,16 @@ test("screen sharing activates spotlight layout", () => {
     const expectedLayoutMarbles = "      abcdaefeg";
     const expectedShowSpeakingMarbles = "y----nyny";
     withCallViewModel(
-      hot(participantInputMarbles, {
+      behavior(participantInputMarbles, {
         a: [aliceParticipant, bobParticipant],
         b: [aliceSharingScreen, bobParticipant],
         c: [aliceSharingScreen, bobSharingScreen],
         d: [aliceParticipant, bobSharingScreen],
       }),
-      of([aliceRtcMember, bobRtcMember]),
+      constant([aliceRtcMember, bobRtcMember]),
       of(ConnectionState.Connected),
       new Map(),
+      mockMediaDevices({}),
       (vm) => {
         schedule(modeInputMarbles, {
           s: () => vm.setGridMode("spotlight"),
@@ -402,7 +423,7 @@ test("screen sharing activates spotlight layout", () => {
 });
 
 test("participants stay in the same order unless to appear/disappear", () => {
-  withTestScheduler(({ hot, schedule, expectObservable }) => {
+  withTestScheduler(({ behavior, schedule, expectObservable }) => {
     const visibilityInputMarbles = "a";
     // First Bob speaks, then Dave, then Alice
     const aSpeakingInputMarbles = " n- 1998ms - 1999ms y";
@@ -415,14 +436,24 @@ test("participants stay in the same order unless to appear/disappear", () => {
     const expectedLayoutMarbles = " a  1999ms b 1999ms a 57999ms c 1999ms a";
 
     withCallViewModel(
-      of([aliceParticipant, bobParticipant, daveParticipant]),
-      of([aliceRtcMember, bobRtcMember, daveRtcMember]),
+      constant([aliceParticipant, bobParticipant, daveParticipant]),
+      constant([aliceRtcMember, bobRtcMember, daveRtcMember]),
       of(ConnectionState.Connected),
       new Map([
-        [aliceParticipant, hot(aSpeakingInputMarbles, { y: true, n: false })],
-        [bobParticipant, hot(bSpeakingInputMarbles, { y: true, n: false })],
-        [daveParticipant, hot(dSpeakingInputMarbles, { y: true, n: false })],
+        [
+          aliceParticipant,
+          behavior(aSpeakingInputMarbles, { y: true, n: false }),
+        ],
+        [
+          bobParticipant,
+          behavior(bSpeakingInputMarbles, { y: true, n: false }),
+        ],
+        [
+          daveParticipant,
+          behavior(dSpeakingInputMarbles, { y: true, n: false }),
+        ],
       ]),
+      mockMediaDevices({}),
       (vm) => {
         schedule(visibilityInputMarbles, {
           a: () => {
@@ -460,7 +491,7 @@ test("participants stay in the same order unless to appear/disappear", () => {
 });
 
 test("participants adjust order when space becomes constrained", () => {
-  withTestScheduler(({ hot, schedule, expectObservable }) => {
+  withTestScheduler(({ behavior, schedule, expectObservable }) => {
     // Start with all tiles on screen then shrink to 3
     const visibilityInputMarbles = "a-b";
     // Bob and Dave speak
@@ -472,13 +503,20 @@ test("participants adjust order when space becomes constrained", () => {
     const expectedLayoutMarbles = " a-b";
 
     withCallViewModel(
-      of([aliceParticipant, bobParticipant, daveParticipant]),
-      of([aliceRtcMember, bobRtcMember, daveRtcMember]),
+      constant([aliceParticipant, bobParticipant, daveParticipant]),
+      constant([aliceRtcMember, bobRtcMember, daveRtcMember]),
       of(ConnectionState.Connected),
       new Map([
-        [bobParticipant, hot(bSpeakingInputMarbles, { y: true, n: false })],
-        [daveParticipant, hot(dSpeakingInputMarbles, { y: true, n: false })],
+        [
+          bobParticipant,
+          behavior(bSpeakingInputMarbles, { y: true, n: false }),
+        ],
+        [
+          daveParticipant,
+          behavior(dSpeakingInputMarbles, { y: true, n: false }),
+        ],
       ]),
+      mockMediaDevices({}),
       (vm) => {
         let setVisibleTiles: ((value: number) => void) | null = null;
         vm.layout$.subscribe((layout) => {
@@ -510,7 +548,7 @@ test("participants adjust order when space becomes constrained", () => {
 });
 
 test("spotlight speakers swap places", () => {
-  withTestScheduler(({ hot, schedule, expectObservable }) => {
+  withTestScheduler(({ behavior, schedule, expectObservable }) => {
     // Go immediately into spotlight mode for the test
     const modeInputMarbles = "     s";
     // First Bob speaks, then Dave, then Alice
@@ -524,14 +562,24 @@ test("spotlight speakers swap places", () => {
     const expectedLayoutMarbles = "abcd";
 
     withCallViewModel(
-      of([aliceParticipant, bobParticipant, daveParticipant]),
-      of([aliceRtcMember, bobRtcMember, daveRtcMember]),
+      constant([aliceParticipant, bobParticipant, daveParticipant]),
+      constant([aliceRtcMember, bobRtcMember, daveRtcMember]),
       of(ConnectionState.Connected),
       new Map([
-        [aliceParticipant, hot(aSpeakingInputMarbles, { y: true, n: false })],
-        [bobParticipant, hot(bSpeakingInputMarbles, { y: true, n: false })],
-        [daveParticipant, hot(dSpeakingInputMarbles, { y: true, n: false })],
+        [
+          aliceParticipant,
+          behavior(aSpeakingInputMarbles, { y: true, n: false }),
+        ],
+        [
+          bobParticipant,
+          behavior(bSpeakingInputMarbles, { y: true, n: false }),
+        ],
+        [
+          daveParticipant,
+          behavior(dSpeakingInputMarbles, { y: true, n: false }),
+        ],
       ]),
+      mockMediaDevices({}),
       (vm) => {
         schedule(modeInputMarbles, { s: () => vm.setGridMode("spotlight") });
 
@@ -573,10 +621,11 @@ test("layout enters picture-in-picture mode when requested", () => {
     const expectedLayoutMarbles = " aba";
 
     withCallViewModel(
-      of([aliceParticipant, bobParticipant]),
-      of([aliceRtcMember, bobRtcMember]),
+      constant([aliceParticipant, bobParticipant]),
+      constant([aliceRtcMember, bobRtcMember]),
       of(ConnectionState.Connected),
       new Map(),
+      mockMediaDevices({}),
       (vm) => {
         schedule(pipControlInputMarbles, {
           e: () => window.controls.enablePip(),
@@ -614,10 +663,11 @@ test("spotlight remembers whether it's expanded", () => {
     const expectedLayoutMarbles = "abcbada";
 
     withCallViewModel(
-      of([aliceParticipant, bobParticipant]),
-      of([aliceRtcMember, bobRtcMember]),
+      constant([aliceParticipant, bobParticipant]),
+      constant([aliceRtcMember, bobRtcMember]),
       of(ConnectionState.Connected),
       new Map(),
+      mockMediaDevices({}),
       (vm) => {
         schedule(modeInputMarbles, {
           s: () => vm.setGridMode("spotlight"),
@@ -662,7 +712,7 @@ test("spotlight remembers whether it's expanded", () => {
 });
 
 test("participants must have a MatrixRTCSession to be visible", () => {
-  withTestScheduler(({ hot, expectObservable }) => {
+  withTestScheduler(({ behavior, expectObservable }) => {
     // iterate through a number of combinations of participants and MatrixRTC memberships
     // Bob never has an MatrixRTC membership
     const scenarioInputMarbles = " abcdec";
@@ -670,14 +720,14 @@ test("participants must have a MatrixRTCSession to be visible", () => {
     const expectedLayoutMarbles = "a-bc-b";
 
     withCallViewModel(
-      hot(scenarioInputMarbles, {
+      behavior(scenarioInputMarbles, {
         a: [],
         b: [bobParticipant],
         c: [aliceParticipant, bobParticipant],
         d: [aliceParticipant, daveParticipant, bobParticipant],
         e: [aliceParticipant, daveParticipant, bobSharingScreen],
       }),
-      hot(scenarioInputMarbles, {
+      behavior(scenarioInputMarbles, {
         a: [],
         b: [],
         c: [aliceRtcMember],
@@ -686,6 +736,7 @@ test("participants must have a MatrixRTCSession to be visible", () => {
       }),
       of(ConnectionState.Connected),
       new Map(),
+      mockMediaDevices({}),
       (vm) => {
         vm.setGridMode("grid");
         expectObservable(summarizeLayout$(vm.layout$)).toBe(
@@ -717,19 +768,20 @@ test("shows participants without MatrixRTCSession when enabled in settings", ()
   try {
     // enable the setting:
     showNonMemberTiles.setValue(true);
-    withTestScheduler(({ hot, expectObservable }) => {
+    withTestScheduler(({ behavior, expectObservable }) => {
       const scenarioInputMarbles = " abc";
       const expectedLayoutMarbles = "abc";
 
       withCallViewModel(
-        hot(scenarioInputMarbles, {
+        behavior(scenarioInputMarbles, {
           a: [],
           b: [aliceParticipant],
           c: [aliceParticipant, bobParticipant],
         }),
-        of([]), // No one joins the MatrixRTC session
+        constant([]), // No one joins the MatrixRTC session
         of(ConnectionState.Connected),
         new Map(),
+        mockMediaDevices({}),
         (vm) => {
           vm.setGridMode("grid");
           expectObservable(summarizeLayout$(vm.layout$)).toBe(
@@ -761,15 +813,15 @@ test("shows participants without MatrixRTCSession when enabled in settings", ()
 });
 
 it("should show at least one tile per MatrixRTCSession", () => {
-  withTestScheduler(({ hot, expectObservable }) => {
+  withTestScheduler(({ behavior, expectObservable }) => {
     // iterate through some combinations of MatrixRTC memberships
     const scenarioInputMarbles = " abcd";
     // There should always be one tile for each MatrixRTCSession
     const expectedLayoutMarbles = "abcd";
 
     withCallViewModel(
-      of([]),
-      hot(scenarioInputMarbles, {
+      constant([]),
+      behavior(scenarioInputMarbles, {
         a: [],
         b: [aliceRtcMember],
         c: [aliceRtcMember, daveRtcMember],
@@ -777,6 +829,7 @@ it("should show at least one tile per MatrixRTCSession", () => {
       }),
       of(ConnectionState.Connected),
       new Map(),
+      mockMediaDevices({}),
       (vm) => {
         vm.setGridMode("grid");
         expectObservable(summarizeLayout$(vm.layout$)).toBe(
@@ -810,13 +863,13 @@ it("should show at least one tile per MatrixRTCSession", () => {
 });
 
 test("should disambiguate users with the same displayname", () => {
-  withTestScheduler(({ hot, expectObservable }) => {
+  withTestScheduler(({ behavior, expectObservable }) => {
     const scenarioInputMarbles = "abcde";
     const expectedLayoutMarbles = "abcde";
 
     withCallViewModel(
-      of([]),
-      hot(scenarioInputMarbles, {
+      constant([]),
+      behavior(scenarioInputMarbles, {
         a: [],
         b: [aliceRtcMember],
         c: [aliceRtcMember, aliceDoppelgangerRtcMember],
@@ -825,109 +878,100 @@ test("should disambiguate users with the same displayname", () => {
       }),
       of(ConnectionState.Connected),
       new Map(),
+      mockMediaDevices({}),
       (vm) => {
-        // Skip the null state.
-        expectObservable(vm.memberDisplaynames$.pipe(skip(1))).toBe(
-          expectedLayoutMarbles,
-          {
-            // Carol has no displayname - So userId is used.
-            a: new Map([[carolId, carol.userId]]),
-            b: new Map([
-              [carolId, carol.userId],
-              [aliceId, alice.rawDisplayName],
-            ]),
-            // The second alice joins.
-            c: new Map([
-              [carolId, carol.userId],
-              [aliceId, "Alice (@alice:example.org)"],
-              [aliceDoppelgangerId, "Alice (@alice2:example.org)"],
-            ]),
-            // Bob also joins
-            d: new Map([
-              [carolId, carol.userId],
-              [aliceId, "Alice (@alice:example.org)"],
-              [aliceDoppelgangerId, "Alice (@alice2:example.org)"],
-              [bobId, bob.rawDisplayName],
-            ]),
-            // Alice leaves, and the displayname should reset.
-            e: new Map([
-              [carolId, carol.userId],
-              [aliceDoppelgangerId, "Alice"],
-              [bobId, bob.rawDisplayName],
-            ]),
-          },
-        );
+        expectObservable(vm.memberDisplaynames$).toBe(expectedLayoutMarbles, {
+          // Carol has no displayname - So userId is used.
+          a: new Map([[carolId, carol.userId]]),
+          b: new Map([
+            [carolId, carol.userId],
+            [aliceId, alice.rawDisplayName],
+          ]),
+          // The second alice joins.
+          c: new Map([
+            [carolId, carol.userId],
+            [aliceId, "Alice (@alice:example.org)"],
+            [aliceDoppelgangerId, "Alice (@alice2:example.org)"],
+          ]),
+          // Bob also joins
+          d: new Map([
+            [carolId, carol.userId],
+            [aliceId, "Alice (@alice:example.org)"],
+            [aliceDoppelgangerId, "Alice (@alice2:example.org)"],
+            [bobId, bob.rawDisplayName],
+          ]),
+          // Alice leaves, and the displayname should reset.
+          e: new Map([
+            [carolId, carol.userId],
+            [aliceDoppelgangerId, "Alice"],
+            [bobId, bob.rawDisplayName],
+          ]),
+        });
       },
     );
   });
 });
 
 test("should disambiguate users with invisible characters", () => {
-  withTestScheduler(({ hot, expectObservable }) => {
+  withTestScheduler(({ behavior, expectObservable }) => {
     const scenarioInputMarbles = "ab";
     const expectedLayoutMarbles = "ab";
 
     withCallViewModel(
-      of([]),
-      hot(scenarioInputMarbles, {
+      constant([]),
+      behavior(scenarioInputMarbles, {
         a: [],
         b: [bobRtcMember, bobZeroWidthSpaceRtcMember],
       }),
       of(ConnectionState.Connected),
       new Map(),
+      mockMediaDevices({}),
       (vm) => {
-        // Skip the null state.
-        expectObservable(vm.memberDisplaynames$.pipe(skip(1))).toBe(
-          expectedLayoutMarbles,
-          {
-            // Carol has no displayname - So userId is used.
-            a: new Map([[carolId, carol.userId]]),
-            // Both Bobs join, and should handle zero width hacks.
-            b: new Map([
-              [carolId, carol.userId],
-              [bobId, `Bob (${bob.userId})`],
-              [
-                bobZeroWidthSpaceId,
-                `${bobZeroWidthSpace.rawDisplayName} (${bobZeroWidthSpace.userId})`,
-              ],
-            ]),
-          },
-        );
+        expectObservable(vm.memberDisplaynames$).toBe(expectedLayoutMarbles, {
+          // Carol has no displayname - So userId is used.
+          a: new Map([[carolId, carol.userId]]),
+          // Both Bobs join, and should handle zero width hacks.
+          b: new Map([
+            [carolId, carol.userId],
+            [bobId, `Bob (${bob.userId})`],
+            [
+              bobZeroWidthSpaceId,
+              `${bobZeroWidthSpace.rawDisplayName} (${bobZeroWidthSpace.userId})`,
+            ],
+          ]),
+        });
       },
     );
   });
 });
 
 test("should strip RTL characters from displayname", () => {
-  withTestScheduler(({ hot, expectObservable }) => {
+  withTestScheduler(({ behavior, expectObservable }) => {
     const scenarioInputMarbles = "ab";
     const expectedLayoutMarbles = "ab";
 
     withCallViewModel(
-      of([]),
-      hot(scenarioInputMarbles, {
+      constant([]),
+      behavior(scenarioInputMarbles, {
         a: [],
         b: [daveRtcMember, daveRTLRtcMember],
       }),
       of(ConnectionState.Connected),
       new Map(),
+      mockMediaDevices({}),
       (vm) => {
-        // Skip the null state.
-        expectObservable(vm.memberDisplaynames$.pipe(skip(1))).toBe(
-          expectedLayoutMarbles,
-          {
-            // Carol has no displayname - So userId is used.
-            a: new Map([[carolId, carol.userId]]),
-            // Both Dave's join. Since after stripping
-            b: new Map([
-              [carolId, carol.userId],
-              // Not disambiguated
-              [daveId, "Dave"],
-              // This one is, since it's using RTL.
-              [daveRTLId, `evaD (${daveRTL.userId})`],
-            ]),
-          },
-        );
+        expectObservable(vm.memberDisplaynames$).toBe(expectedLayoutMarbles, {
+          // Carol has no displayname - So userId is used.
+          a: new Map([[carolId, carol.userId]]),
+          // Both Dave's join. Since after stripping
+          b: new Map([
+            [carolId, carol.userId],
+            // Not disambiguated
+            [daveId, "Dave"],
+            // This one is, since it's using RTL.
+            [daveRTLId, `evaD (${daveRTL.userId})`],
+          ]),
+        });
       },
     );
   });
@@ -939,10 +983,11 @@ it("should rank raised hands above video feeds and below speakers and presenters
     const expectedLayoutMarbles = "ab";
 
     withCallViewModel(
-      of([aliceParticipant, bobParticipant]),
-      of([aliceRtcMember, bobRtcMember]),
+      constant([aliceParticipant, bobParticipant]),
+      constant([aliceRtcMember, bobRtcMember]),
       of(ConnectionState.Connected),
       new Map(),
+      mockMediaDevices({}),
       (vm, { raisedHands$ }) => {
         schedule("ab", {
           a: () => {
@@ -991,3 +1036,47 @@ it("should rank raised hands above video feeds and below speakers and presenters
     );
   });
 });
+
+test("audio output changes when toggling earpiece mode", () => {
+  withTestScheduler(({ schedule, expectObservable }) => {
+    getUrlParams.mockReturnValue({ controlledAudioDevices: true });
+    vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(of([]));
+
+    const scope = new ObservableScope();
+    onTestFinished(() => scope.end());
+    const devices = new MediaDevices(scope);
+
+    window.controls.setAvailableAudioDevices([
+      { id: "speaker", name: "Speaker", isSpeaker: true },
+      { id: "earpiece", name: "Handset", isEarpiece: true },
+      { id: "headphones", name: "Headphones" },
+    ]);
+    window.controls.setAudioDevice("headphones");
+
+    const toggleInputMarbles = "         -aaa";
+    const expectedEarpieceModeMarbles = "n-yn";
+    const expectedTargetStateMarbles = " sese";
+
+    withCallViewModel(
+      constant([]),
+      constant([]),
+      of(ConnectionState.Connected),
+      new Map(),
+      devices,
+      (vm) => {
+        schedule(toggleInputMarbles, {
+          a: () => getValue(vm.audioOutputSwitcher$)?.switch(),
+        });
+        expectObservable(vm.earpieceMode$).toBe(expectedEarpieceModeMarbles, {
+          n: false,
+          y: true,
+        });
+        expectObservable(
+          vm.audioOutputSwitcher$.pipe(
+            map((switcher) => switcher?.targetOutput),
+          ),
+        ).toBe(expectedTargetStateMarbles, { s: "speaker", e: "earpiece" });
+      },
+    );
+  });
+});

src/state/MediaDevices.ts

@@ -10,7 +10,6 @@ import {
   filter,
   map,
   merge,
-  of,
   pairwise,
   startWith,
   Subject,
@@ -18,7 +17,7 @@ import {
   type Observable,
 } from "rxjs";
 import { createMediaDeviceObserver } from "@livekit/components-core";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 
 import {
   audioInput as audioInputSetting,
@@ -32,17 +31,24 @@ import {
   availableOutputDevices$ as controlledAvailableOutputDevices$,
 } from "../controls";
 import { getUrlParams } from "../UrlParams";
+import { platform } from "../Platform";
+import { switchWhen } from "../utils/observable";
+import { type Behavior, constant } from "./Behavior";
 
 // This hardcoded id is used in EX ios! It can only be changed in coordination with
 // the ios swift team.
 const EARPIECE_CONFIG_ID = "earpiece-id";
+const logger = rootLogger.getChild("[MediaDevices]");
 
 export type DeviceLabel =
   | { type: "name"; name: string }
-  | { type: "number"; number: number }
-  | { type: "default"; name: string | null };
+  | { type: "number"; number: number };
 
-export type AudioOutputDeviceLabel = DeviceLabel | { type: "earpiece" };
+export type AudioOutputDeviceLabel =
+  | DeviceLabel
+  | { type: "speaker" }
+  | { type: "earpiece" }
+  | { type: "default"; name: string | null };
 
 export interface SelectedDevice {
   id: string;
@@ -68,11 +74,11 @@ export interface MediaDevice<Label, Selected> {
   /**
    * A map from available device IDs to labels.
    */
-  available$: Observable<Map<string, Label>>;
+  available$: Behavior<Map<string, Label>>;
   /**
    * The selected device.
    */
-  selected$: Observable<Selected | undefined>;
+  selected$: Behavior<Selected | undefined>;
   /**
    * Selects a new device.
    */
@@ -87,25 +93,37 @@ export interface MediaDevice<Label, Selected> {
  *  - Only show the earpiece toggle option if the earpiece is available:
  *   `availableOutputDevices$.includes((d)=>d.forEarpiece)`
  */
-export const iosDeviceMenu$ = navigator.userAgent.includes("iPhone")
-  ? of(true)
-  : alwaysShowIphoneEarpieceSetting.value$;
+export const iosDeviceMenu$ =
+  platform === "ios" ? constant(true) : alwaysShowIphoneEarpieceSetting.value$;
 
 function availableRawDevices$(
   kind: MediaDeviceKind,
-  usingNames$: Observable<boolean>,
+  usingNames$: Behavior<boolean>,
   scope: ObservableScope,
-): Observable<MediaDeviceInfo[]> {
-  return usingNames$.pipe(
-    switchMap((usingNames) =>
-      createMediaDeviceObserver(
-        kind,
-        (e) => logger.error("Error creating MediaDeviceObserver", e),
-        usingNames,
+): Behavior<MediaDeviceInfo[]> {
+  const logError = (e: Error): void =>
+    logger.error("Error creating MediaDeviceObserver", e);
+  const devices$ = createMediaDeviceObserver(kind, logError, false);
+  const devicesWithNames$ = createMediaDeviceObserver(kind, logError, true);
+
+  return scope.behavior(
+    usingNames$.pipe(
+      switchMap((withNames) =>
+        withNames
+          ? // It might be that there is already a media stream running somewhere,
+            // and so we can do without requesting a second one. Only switch to the
+            // device observer that explicitly requests the names if we see that
+            // names are in fact missing from the initial device enumeration.
+            devices$.pipe(
+              switchWhen(
+                (devices, i) => i === 0 && devices.every((d) => !d.label),
+                devicesWithNames$,
+              ),
+            )
+          : devices$,
       ),
     ),
-    startWith([]),
-    scope.state(),
+    [],
   );
 }
 
@@ -144,34 +162,33 @@ function selectDevice$<Label>(
 }
 
 class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
-  private readonly availableRaw$: Observable<MediaDeviceInfo[]> =
+  private readonly availableRaw$: Behavior<MediaDeviceInfo[]> =
     availableRawDevices$("audioinput", this.usingNames$, this.scope);
 
-  public readonly available$ = this.availableRaw$.pipe(
-    map(buildDeviceMap),
-    this.scope.state(),
+  public readonly available$ = this.scope.behavior(
+    this.availableRaw$.pipe(map(buildDeviceMap)),
   );
 
-  public readonly selected$ = selectDevice$(
-    this.available$,
-    audioInputSetting.value$,
-  ).pipe(
-    map((id) =>
-      id === undefined
-        ? undefined
-        : {
-            id,
-            // We can identify when the hardware device has changed by watching for
-            // changes in the group ID
-            hardwareDeviceChange$: this.availableRaw$.pipe(
-              map((devices) => devices.find((d) => d.deviceId === id)?.groupId),
-              pairwise(),
-              filter(([before, after]) => before !== after),
-              map(() => undefined),
-            ),
-          },
+  public readonly selected$ = this.scope.behavior(
+    selectDevice$(this.available$, audioInputSetting.value$).pipe(
+      map((id) =>
+        id === undefined
+          ? undefined
+          : {
+              id,
+              // We can identify when the hardware device has changed by watching for
+              // changes in the group ID
+              hardwareDeviceChange$: this.availableRaw$.pipe(
+                map(
+                  (devices) => devices.find((d) => d.deviceId === id)?.groupId,
+                ),
+                pairwise(),
+                filter(([before, after]) => before !== after),
+                map(() => undefined),
+              ),
+            },
+      ),
     ),
-    this.scope.state(),
   );
 
   public select(id: string): void {
@@ -179,89 +196,103 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
   }
 
   public constructor(
-    private readonly usingNames$: Observable<boolean>,
+    private readonly usingNames$: Behavior<boolean>,
     private readonly scope: ObservableScope,
-  ) {}
+  ) {
+    this.available$.subscribe((available) => {
+      logger.info("[audio-input] available devices:", available);
+    });
+  }
 }
 
 class AudioOutput
   implements MediaDevice<AudioOutputDeviceLabel, SelectedAudioOutputDevice>
 {
-  public readonly available$ = availableRawDevices$(
-    "audiooutput",
-    this.usingNames$,
-    this.scope,
-  ).pipe(
-    map((availableRaw) => {
-      const available = buildDeviceMap(availableRaw);
-      // Create a virtual default audio output for browsers that don't have one.
-      // Its device ID must be the empty string because that's what setSinkId
-      // recognizes.
-      if (available.size && !available.has("") && !available.has("default"))
-        available.set("", {
-          type: "default",
-          name: availableRaw[0]?.label || null,
-        });
-      // Note: creating virtual default input devices would be another problem
-      // entirely, because requesting a media stream from deviceId "" won't
-      // automatically track the default device.
-      return available;
-    }),
-    this.scope.state(),
-  );
-
-  public readonly selected$ = selectDevice$(
-    this.available$,
-    audioOutputSetting.value$,
-  ).pipe(
-    map((id) =>
-      id === undefined
-        ? undefined
-        : {
-            id,
-            virtualEarpiece: false,
-          },
+  public readonly available$ = this.scope.behavior(
+    availableRawDevices$("audiooutput", this.usingNames$, this.scope).pipe(
+      map((availableRaw) => {
+        const available: Map<string, AudioOutputDeviceLabel> =
+          buildDeviceMap(availableRaw);
+        // Create a virtual default audio output for browsers that don't have one.
+        // Its device ID must be the empty string because that's what setSinkId
+        // recognizes.
+        if (available.size && !available.has("") && !available.has("default"))
+          available.set("", {
+            type: "default",
+            name: availableRaw[0]?.label || null,
+          });
+        // Note: creating virtual default input devices would be another problem
+        // entirely, because requesting a media stream from deviceId "" won't
+        // automatically track the default device.
+        return available;
+      }),
     ),
-    this.scope.state(),
   );
 
+  public readonly selected$ = this.scope.behavior(
+    selectDevice$(this.available$, audioOutputSetting.value$).pipe(
+      map((id) =>
+        id === undefined
+          ? undefined
+          : {
+              id,
+              virtualEarpiece: false,
+            },
+      ),
+    ),
+  );
   public select(id: string): void {
     audioOutputSetting.setValue(id);
   }
 
   public constructor(
-    private readonly usingNames$: Observable<boolean>,
+    private readonly usingNames$: Behavior<boolean>,
     private readonly scope: ObservableScope,
-  ) {}
+  ) {
+    this.available$.subscribe((available) => {
+      logger.info("[audio-output] available devices:", available);
+    });
+  }
 }
 
 class ControlledAudioOutput
   implements MediaDevice<AudioOutputDeviceLabel, SelectedAudioOutputDevice>
 {
-  public readonly available$ = combineLatest(
-    [controlledAvailableOutputDevices$.pipe(startWith([])), iosDeviceMenu$],
-    (availableRaw, iosDeviceMenu) => {
-      const available = new Map<string, AudioOutputDeviceLabel>(
-        availableRaw.map(
-          ({ id, name, isEarpiece, isSpeaker /*,isExternalHeadset*/ }) => {
-            let deviceLabel: AudioOutputDeviceLabel;
-            // if (isExternalHeadset) // Do we want this?
-            if (isEarpiece) deviceLabel = { type: "earpiece" };
-            else if (isSpeaker) deviceLabel = { type: "default", name };
-            else deviceLabel = { type: "name", name };
-            return [id, deviceLabel];
-          },
-        ),
-      );
+  // We need to subscribe to the raw devices so that the OS does update the input
+  // back to what it was before. otherwise we will switch back to the default
+  // whenever we allocate a new stream.
+  public readonly availableRaw$ = availableRawDevices$(
+    "audiooutput",
+    this.usingNames$,
+    this.scope,
+  );
 
-      // Create a virtual earpiece device in case a non-earpiece device is
-      // designated for this purpose
-      if (iosDeviceMenu && availableRaw.some((d) => d.forEarpiece))
-        available.set(EARPIECE_CONFIG_ID, { type: "earpiece" });
+  public readonly available$ = this.scope.behavior(
+    combineLatest(
+      [controlledAvailableOutputDevices$.pipe(startWith([])), iosDeviceMenu$],
+      (availableRaw, iosDeviceMenu) => {
+        const available = new Map<string, AudioOutputDeviceLabel>(
+          availableRaw.map(
+            ({ id, name, isEarpiece, isSpeaker /*,isExternalHeadset*/ }) => {
+              let deviceLabel: AudioOutputDeviceLabel;
+              // if (isExternalHeadset) // Do we want this?
+              if (isEarpiece) deviceLabel = { type: "earpiece" };
+              else if (isSpeaker) deviceLabel = { type: "speaker" };
+              else deviceLabel = { type: "name", name };
+              return [id, deviceLabel];
+            },
+          ),
+        );
 
-      return available;
-    },
-  ).pipe(this.scope.state());
+        // Create a virtual earpiece device in case a non-earpiece device is
+        // designated for this purpose
+        if (iosDeviceMenu && availableRaw.some((d) => d.forEarpiece))
+          available.set(EARPIECE_CONFIG_ID, { type: "earpiece" });
+
+        return available;
+      },
+    ),
+  );
 
   private readonly deviceSelection$ = new Subject<string>();
 
@@ -269,58 +300,73 @@ class ControlledAudioOutput
     this.deviceSelection$.next(id);
   }
 
-  public readonly selected$ = merge(
-    this.deviceSelection$,
-    controlledOutputSelection$,
-  ).pipe(
-    startWith<string | undefined>(undefined),
-    map((id) =>
-      id === undefined
-        ? undefined
-        : { id, virtualEarpiece: id === EARPIECE_CONFIG_ID },
+  public readonly selected$ = this.scope.behavior(
+    combineLatest(
+      [
+        this.available$,
+        merge(
+          controlledOutputSelection$.pipe(startWith(undefined)),
+          this.deviceSelection$,
+        ),
+      ],
+      (available, preferredId) => {
+        const id = preferredId ?? available.keys().next().value;
+        return id === undefined
+          ? undefined
+          : { id, virtualEarpiece: id === EARPIECE_CONFIG_ID };
+      },
     ),
-    this.scope.state(),
   );
 
-  public constructor(private readonly scope: ObservableScope) {
+  public constructor(
+    private readonly usingNames$: Behavior<boolean>,
+    private readonly scope: ObservableScope,
+  ) {
     this.selected$.subscribe((device) => {
       // Let the hosting application know which output device has been selected.
       // This information is probably only of interest if the earpiece mode has
       // been selected - for example, Element X iOS listens to this to determine
       // whether it should enable the proximity sensor.
       if (device !== undefined) {
-        logger.info("[controlled-output] setAudioDeviceSelect called:", device);
+        logger.info("[controlled-output] onAudioDeviceSelect called:", device);
         window.controls.onAudioDeviceSelect?.(device.id);
         // Also invoke the deprecated callback for backward compatibility
         window.controls.onOutputDeviceSelect?.(device.id);
       }
     });
+    this.available$.subscribe((available) => {
+      logger.info("[controlled-output] available devices:", available);
+    });
+    this.availableRaw$.subscribe((availableRaw) => {
+      logger.info("[controlled-output] available raw devices:", availableRaw);
+    });
   }
 }
 
 class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
-  public readonly available$ = availableRawDevices$(
-    "videoinput",
-    this.usingNames$,
-    this.scope,
-  ).pipe(map(buildDeviceMap));
-
-  public readonly selected$ = selectDevice$(
-    this.available$,
-    videoInputSetting.value$,
-  ).pipe(
-    map((id) => (id === undefined ? undefined : { id })),
-    this.scope.state(),
+  public readonly available$ = this.scope.behavior(
+    availableRawDevices$("videoinput", this.usingNames$, this.scope).pipe(
+      map(buildDeviceMap),
+    ),
+  );
+  public readonly selected$ = this.scope.behavior(
+    selectDevice$(this.available$, videoInputSetting.value$).pipe(
+      map((id) => (id === undefined ? undefined : { id })),
+    ),
   );
-
   public select(id: string): void {
     videoInputSetting.setValue(id);
   }
 
   public constructor(
-    private readonly usingNames$: Observable<boolean>,
+    private readonly usingNames$: Behavior<boolean>,
     private readonly scope: ObservableScope,
-  ) {}
+  ) {
+    // This also has the purpose of subscribing to the available devices
+    this.available$.subscribe((available) => {
+      logger.info("[video-input] available devices:", available);
+    });
+  }
 }
 
 export class MediaDevices {
@@ -341,12 +387,10 @@ export class MediaDevices {
   // you to do to receive device names in lieu of a more explicit permissions
   // API. This flag never resets to false, because once permissions are granted
   // the first time, the user won't be prompted again until reload of the page.
-  private readonly usingNames$ = this.deviceNamesRequest$.pipe(
-    map(() => true),
-    startWith(false),
-    this.scope.state(),
+  private readonly usingNames$ = this.scope.behavior(
+    this.deviceNamesRequest$.pipe(map(() => true)),
+    false,
   );
-
   public readonly audioInput: MediaDevice<
     DeviceLabel,
     SelectedAudioInputDevice
@@ -356,7 +400,7 @@ export class MediaDevices {
     AudioOutputDeviceLabel,
     SelectedAudioOutputDevice
   > = getUrlParams().controlledAudioDevices
-    ? new ControlledAudioOutput(this.scope)
+    ? new ControlledAudioOutput(this.usingNames$, this.scope)
     : new AudioOutput(this.usingNames$, this.scope);
 
   public readonly videoInput: MediaDevice<DeviceLabel, SelectedDevice> =

src/state/MediaViewModel.ts

@@ -51,26 +51,19 @@ import { accumulate } from "../utils/observable";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { E2eeType } from "../e2ee/e2eeType";
 import { type ReactionOption } from "../reactions";
+import { type Behavior } from "./Behavior";
 
 export function observeTrackReference$(
-  participant$: Observable<Participant | undefined>,
+  participant: Participant,
   source: Track.Source,
-): Observable<TrackReferenceOrPlaceholder | undefined> {
-  return participant$.pipe(
-    switchMap((p) => {
-      if (p) {
-        return observeParticipantMedia(p).pipe(
-          map(() => ({
-            participant: p,
-            publication: p.getTrackPublication(source),
-            source,
-          })),
-          distinctUntilKeyChanged("publication"),
-        );
-      } else {
-        return of(undefined);
-      }
-    }),
+): Observable<TrackReferenceOrPlaceholder> {
+  return observeParticipantMedia(participant).pipe(
+    map(() => ({
+      participant: participant,
+      publication: participant.getTrackPublication(source),
+      source,
+    })),
+    distinctUntilKeyChanged("publication"),
   );
 }
 
@@ -82,7 +75,7 @@ export function observeRtpStreamStats$(
   RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
 > {
   return combineLatest([
-    observeTrackReference$(of(participant), source),
+    observeTrackReference$(participant, source),
     interval(1000).pipe(startWith(0)),
   ]).pipe(
     switchMap(async ([trackReference]) => {
@@ -223,19 +216,31 @@ abstract class BaseMediaViewModel extends ViewModel {
   /**
    * The LiveKit video track for this media.
    */
-  public readonly video$: Observable<TrackReferenceOrPlaceholder | undefined>;
+  public readonly video$: Behavior<TrackReferenceOrPlaceholder | undefined>;
   /**
    * Whether there should be a warning that this media is unencrypted.
    */
-  public readonly unencryptedWarning$: Observable<boolean>;
+  public readonly unencryptedWarning$: Behavior<boolean>;
 
-  public readonly encryptionStatus$: Observable<EncryptionStatus>;
+  public readonly encryptionStatus$: Behavior<EncryptionStatus>;
 
   /**
    * Whether this media corresponds to the local participant.
    */
   public abstract readonly local: boolean;
 
+  private observeTrackReference$(
+    source: Track.Source,
+  ): Behavior<TrackReferenceOrPlaceholder | undefined> {
+    return this.scope.behavior(
+      this.participant$.pipe(
+        switchMap((p) =>
+          p === undefined ? of(undefined) : observeTrackReference$(p, source),
+        ),
+      ),
+    );
+  }
+
   public constructor(
     /**
      * An opaque identifier for this media.
@@ -257,84 +262,85 @@ abstract class BaseMediaViewModel extends ViewModel {
     audioSource: AudioSource,
     videoSource: VideoSource,
     livekitRoom: LivekitRoom,
-    public readonly displayname$: Observable<string>,
+    public readonly displayName$: Behavior<string>,
   ) {
     super();
-    const audio$ = observeTrackReference$(participant$, audioSource).pipe(
-      this.scope.state(),
-    );
-    this.video$ = observeTrackReference$(participant$, videoSource).pipe(
-      this.scope.state(),
-    );
-    this.unencryptedWarning$ = combineLatest(
-      [audio$, this.video$],
-      (a, v) =>
-        encryptionSystem.kind !== E2eeType.NONE &&
-        (a?.publication?.isEncrypted === false ||
-          v?.publication?.isEncrypted === false),
-    ).pipe(this.scope.state());
 
-    this.encryptionStatus$ = this.participant$.pipe(
-      switchMap((participant): Observable<EncryptionStatus> => {
-        if (!participant) {
-          return of(EncryptionStatus.Connecting);
-        } else if (
-          participant.isLocal ||
-          encryptionSystem.kind === E2eeType.NONE
-        ) {
-          return of(EncryptionStatus.Okay);
-        } else if (encryptionSystem.kind === E2eeType.PER_PARTICIPANT) {
-          return combineLatest([
-            encryptionErrorObservable$(
-              livekitRoom,
-              participant,
-              encryptionSystem,
-              "MissingKey",
-            ),
-            encryptionErrorObservable$(
-              livekitRoom,
-              participant,
-              encryptionSystem,
-              "InvalidKey",
-            ),
-            observeRemoteTrackReceivingOkay$(participant, audioSource),
-            observeRemoteTrackReceivingOkay$(participant, videoSource),
-          ]).pipe(
-            map(([keyMissing, keyInvalid, audioOkay, videoOkay]) => {
-              if (keyMissing) return EncryptionStatus.KeyMissing;
-              if (keyInvalid) return EncryptionStatus.KeyInvalid;
-              if (audioOkay || videoOkay) return EncryptionStatus.Okay;
-              return undefined; // no change
-            }),
-            filter((x) => !!x),
-            startWith(EncryptionStatus.Connecting),
-          );
-        } else {
-          return combineLatest([
-            encryptionErrorObservable$(
-              livekitRoom,
-              participant,
-              encryptionSystem,
-              "InvalidKey",
-            ),
-            observeRemoteTrackReceivingOkay$(participant, audioSource),
-            observeRemoteTrackReceivingOkay$(participant, videoSource),
-          ]).pipe(
-            map(
-              ([keyInvalid, audioOkay, videoOkay]):
-                | EncryptionStatus
-                | undefined => {
-                if (keyInvalid) return EncryptionStatus.PasswordInvalid;
+    const audio$ = this.observeTrackReference$(audioSource);
+    this.video$ = this.observeTrackReference$(videoSource);
+
+    this.unencryptedWarning$ = this.scope.behavior(
+      combineLatest(
+        [audio$, this.video$],
+        (a, v) =>
+          encryptionSystem.kind !== E2eeType.NONE &&
+          (a?.publication?.isEncrypted === false ||
+            v?.publication?.isEncrypted === false),
+      ),
+    );
+
+    this.encryptionStatus$ = this.scope.behavior(
+      this.participant$.pipe(
+        switchMap((participant): Observable<EncryptionStatus> => {
+          if (!participant) {
+            return of(EncryptionStatus.Connecting);
+          } else if (
+            participant.isLocal ||
+            encryptionSystem.kind === E2eeType.NONE
+          ) {
+            return of(EncryptionStatus.Okay);
+          } else if (encryptionSystem.kind === E2eeType.PER_PARTICIPANT) {
+            return combineLatest([
+              encryptionErrorObservable$(
+                livekitRoom,
+                participant,
+                encryptionSystem,
+                "MissingKey",
+              ),
+              encryptionErrorObservable$(
+                livekitRoom,
+                participant,
+                encryptionSystem,
+                "InvalidKey",
+              ),
+              observeRemoteTrackReceivingOkay$(participant, audioSource),
+              observeRemoteTrackReceivingOkay$(participant, videoSource),
+            ]).pipe(
+              map(([keyMissing, keyInvalid, audioOkay, videoOkay]) => {
+                if (keyMissing) return EncryptionStatus.KeyMissing;
+                if (keyInvalid) return EncryptionStatus.KeyInvalid;
                 if (audioOkay || videoOkay) return EncryptionStatus.Okay;
                 return undefined; // no change
-              },
-            ),
-            filter((x) => !!x),
-            startWith(EncryptionStatus.Connecting),
-          );
-        }
-      }),
-      this.scope.state(),
+              }),
+              filter((x) => !!x),
+              startWith(EncryptionStatus.Connecting),
+            );
+          } else {
+            return combineLatest([
+              encryptionErrorObservable$(
+                livekitRoom,
+                participant,
+                encryptionSystem,
+                "InvalidKey",
+              ),
+              observeRemoteTrackReceivingOkay$(participant, audioSource),
+              observeRemoteTrackReceivingOkay$(participant, videoSource),
+            ]).pipe(
+              map(
+                ([keyInvalid, audioOkay, videoOkay]):
+                  | EncryptionStatus
+                  | undefined => {
+                  if (keyInvalid) return EncryptionStatus.PasswordInvalid;
+                  if (audioOkay || videoOkay) return EncryptionStatus.Okay;
+                  return undefined; // no change
+                },
+              ),
+              filter((x) => !!x),
+              startWith(EncryptionStatus.Connecting),
+            );
+          }
+        }),
+      ),
     );
   }
 }
@@ -354,31 +360,33 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
   /**
    * Whether the participant is speaking.
    */
-  public readonly speaking$ = this.participant$.pipe(
-    switchMap((p) =>
-      p
-        ? observeParticipantEvents(p, ParticipantEvent.IsSpeakingChanged).pipe(
-            map((p) => p.isSpeaking),
-          )
-        : of(false),
+  public readonly speaking$ = this.scope.behavior(
+    this.participant$.pipe(
+      switchMap((p) =>
+        p
+          ? observeParticipantEvents(
+              p,
+              ParticipantEvent.IsSpeakingChanged,
+            ).pipe(map((p) => p.isSpeaking))
+          : of(false),
+      ),
     ),
-    this.scope.state(),
   );
 
   /**
    * Whether this participant is sending audio (i.e. is unmuted on their side).
    */
-  public readonly audioEnabled$: Observable<boolean>;
+  public readonly audioEnabled$: Behavior<boolean>;
   /**
    * Whether this participant is sending video.
    */
-  public readonly videoEnabled$: Observable<boolean>;
+  public readonly videoEnabled$: Behavior<boolean>;
 
   private readonly _cropVideo$ = new BehaviorSubject(true);
   /**
    * Whether the tile video should be contained inside the tile or be cropped to fit.
    */
-  public readonly cropVideo$: Observable<boolean> = this._cropVideo$;
+  public readonly cropVideo$: Behavior<boolean> = this._cropVideo$;
 
   public constructor(
     id: string,
@@ -386,9 +394,9 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
     participant$: Observable<LocalParticipant | RemoteParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    displayname$: Observable<string>,
-    public readonly handRaised$: Observable<Date | null>,
-    public readonly reaction$: Observable<ReactionOption | null>,
+    displayName$: Behavior<string>,
+    public readonly handRaised$: Behavior<Date | null>,
+    public readonly reaction$: Behavior<ReactionOption | null>,
   ) {
     super(
       id,
@@ -398,18 +406,19 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
       Track.Source.Microphone,
       Track.Source.Camera,
       livekitRoom,
-      displayname$,
+      displayName$,
     );
 
-    const media$ = participant$.pipe(
-      switchMap((p) => (p && observeParticipantMedia(p)) ?? of(undefined)),
-      this.scope.state(),
+    const media$ = this.scope.behavior(
+      participant$.pipe(
+        switchMap((p) => (p && observeParticipantMedia(p)) ?? of(undefined)),
+      ),
     );
-    this.audioEnabled$ = media$.pipe(
-      map((m) => m?.microphoneTrack?.isMuted === false),
+    this.audioEnabled$ = this.scope.behavior(
+      media$.pipe(map((m) => m?.microphoneTrack?.isMuted === false)),
     );
-    this.videoEnabled$ = media$.pipe(
-      map((m) => m?.cameraTrack?.isMuted === false),
+    this.videoEnabled$ = this.scope.behavior(
+      media$.pipe(map((m) => m?.cameraTrack?.isMuted === false)),
     );
   }
 
@@ -436,18 +445,19 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
   /**
    * Whether the video should be mirrored.
    */
-  public readonly mirror$ = this.video$.pipe(
-    switchMap((v) => {
-      const track = v?.publication?.track;
-      if (!(track instanceof LocalTrack)) return of(false);
-      // Watch for track restarts, because they indicate a camera switch
-      return fromEvent(track, TrackEvent.Restarted).pipe(
-        startWith(null),
-        // Mirror only front-facing cameras (those that face the user)
-        map(() => facingModeFromLocalTrack(track).facingMode === "user"),
-      );
-    }),
-    this.scope.state(),
+  public readonly mirror$ = this.scope.behavior(
+    this.video$.pipe(
+      switchMap((v) => {
+        const track = v?.publication?.track;
+        if (!(track instanceof LocalTrack)) return of(false);
+        // Watch for track restarts, because they indicate a camera switch
+        return fromEvent(track, TrackEvent.Restarted).pipe(
+          startWith(null),
+          // Mirror only front-facing cameras (those that face the user)
+          map(() => facingModeFromLocalTrack(track).facingMode === "user"),
+        );
+      }),
+    ),
   );
 
   /**
@@ -460,12 +470,12 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
   public constructor(
     id: string,
     member: RoomMember | undefined,
-    participant$: Observable<LocalParticipant | undefined>,
+    participant$: Behavior<LocalParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    displayname$: Observable<string>,
-    handRaised$: Observable<Date | null>,
-    reaction$: Observable<ReactionOption | null>,
+    displayName$: Behavior<string>,
+    handRaised$: Behavior<Date | null>,
+    reaction$: Behavior<ReactionOption | null>,
   ) {
     super(
       id,
@@ -473,7 +483,7 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
       participant$,
       encryptionSystem,
       livekitRoom,
-      displayname$,
+      displayName$,
       handRaised$,
       reaction$,
     );
@@ -512,42 +522,42 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
    * The volume to which this participant's audio is set, as a scalar
    * multiplier.
    */
-  public readonly localVolume$: Observable<number> = merge(
-    this.locallyMutedToggle$.pipe(map(() => "toggle mute" as const)),
-    this.localVolumeAdjustment$,
-    this.localVolumeCommit$.pipe(map(() => "commit" as const)),
-  ).pipe(
-    accumulate({ volume: 1, committedVolume: 1 }, (state, event) => {
-      switch (event) {
-        case "toggle mute":
-          return {
-            ...state,
-            volume: state.volume === 0 ? state.committedVolume : 0,
-          };
-        case "commit":
-          // Dragging the slider to zero should have the same effect as
-          // muting: keep the original committed volume, as if it were never
-          // dragged
-          return {
-            ...state,
-            committedVolume:
-              state.volume === 0 ? state.committedVolume : state.volume,
-          };
-        default:
-          // Volume adjustment
-          return { ...state, volume: event };
-      }
-    }),
-    map(({ volume }) => volume),
-    this.scope.state(),
+  public readonly localVolume$ = this.scope.behavior<number>(
+    merge(
+      this.locallyMutedToggle$.pipe(map(() => "toggle mute" as const)),
+      this.localVolumeAdjustment$,
+      this.localVolumeCommit$.pipe(map(() => "commit" as const)),
+    ).pipe(
+      accumulate({ volume: 1, committedVolume: 1 }, (state, event) => {
+        switch (event) {
+          case "toggle mute":
+            return {
+              ...state,
+              volume: state.volume === 0 ? state.committedVolume : 0,
+            };
+          case "commit":
+            // Dragging the slider to zero should have the same effect as
+            // muting: keep the original committed volume, as if it were never
+            // dragged
+            return {
+              ...state,
+              committedVolume:
+                state.volume === 0 ? state.committedVolume : state.volume,
+            };
+          default:
+            // Volume adjustment
+            return { ...state, volume: event };
+        }
+      }),
+      map(({ volume }) => volume),
+    ),
   );
 
   /**
    * Whether this participant's audio is disabled.
    */
-  public readonly locallyMuted$: Observable<boolean> = this.localVolume$.pipe(
-    map((volume) => volume === 0),
-    this.scope.state(),
+  public readonly locallyMuted$ = this.scope.behavior<boolean>(
+    this.localVolume$.pipe(map((volume) => volume === 0)),
   );
 
   public constructor(
@@ -556,9 +566,9 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
     participant$: Observable<RemoteParticipant | undefined>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    displayname$: Observable<string>,
-    handRaised$: Observable<Date | null>,
-    reaction$: Observable<ReactionOption | null>,
+    displayname$: Behavior<string>,
+    handRaised$: Behavior<Date | null>,
+    reaction$: Behavior<ReactionOption | null>,
   ) {
     super(
       id,
@@ -621,7 +631,7 @@ export class ScreenShareViewModel extends BaseMediaViewModel {
     participant$: Observable<LocalParticipant | RemoteParticipant>,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
-    displayname$: Observable<string>,
+    displayname$: Behavior<string>,
     public readonly local: boolean,
   ) {
     super(

src/state/MuteAllAudioModel.test.ts

@@ -26,11 +26,9 @@ test("muteAllAudio$", () => {
 
   muteAllAudio.unsubscribe();
 
-  expect(valueMock).toHaveBeenCalledTimes(6);
+  expect(valueMock).toHaveBeenCalledTimes(4);
   expect(valueMock).toHaveBeenNthCalledWith(1, false); // startWith([false, muteAllAudioSetting.getValue()]);
   expect(valueMock).toHaveBeenNthCalledWith(2, true); // setAudioEnabled$.next(false);
   expect(valueMock).toHaveBeenNthCalledWith(3, false); // setAudioEnabled$.next(true);
-  expect(valueMock).toHaveBeenNthCalledWith(4, false); // muteAllAudioSetting.setValue(false);
-  expect(valueMock).toHaveBeenNthCalledWith(5, true); // muteAllAudioSetting.setValue(true);
-  expect(valueMock).toHaveBeenNthCalledWith(6, true); // setAudioEnabled$.next(false);
+  expect(valueMock).toHaveBeenNthCalledWith(4, true); // muteAllAudioSetting.setValue(true);
 });

src/state/MuteAllAudioModel.ts

@@ -9,11 +9,14 @@ import { combineLatest, startWith } from "rxjs";
 
 import { setAudioEnabled$ } from "../controls";
 import { muteAllAudio as muteAllAudioSetting } from "../settings/settings";
+import { globalScope } from "./ObservableScope";
 
 /**
  * This can transition into sth more complete: `GroupCallViewModel.ts`
  */
-export const muteAllAudio$ = combineLatest(
-  [setAudioEnabled$.pipe(startWith(true)), muteAllAudioSetting.value$],
-  (outputEnabled, settingsMute) => !outputEnabled || settingsMute,
+export const muteAllAudio$ = globalScope.behavior(
+  combineLatest(
+    [setAudioEnabled$.pipe(startWith(true)), muteAllAudioSetting.value$],
+    (outputEnabled, settingsMute) => !outputEnabled || settingsMute,
+  ),
 );

src/state/ObservableScope.ts

@@ -6,15 +6,19 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
+  BehaviorSubject,
   distinctUntilChanged,
   type Observable,
-  shareReplay,
   Subject,
   takeUntil,
 } from "rxjs";
 
+import { type Behavior } from "./Behavior";
+
 type MonoTypeOperator = <T>(o: Observable<T>) => Observable<T>;
 
+const nothing = Symbol("nothing");
+
 /**
  * A scope which limits the execution lifetime of its bound Observables.
  */
@@ -31,20 +35,31 @@ export class ObservableScope {
     return this.bindImpl;
   }
 
-  private readonly stateImpl: MonoTypeOperator = (o$) =>
-    o$.pipe(
-      this.bind(),
-      distinctUntilChanged(),
-      shareReplay({ bufferSize: 1, refCount: false }),
-    );
-
   /**
-   * Transforms an Observable into a hot state Observable which replays its
-   * latest value upon subscription, skips updates with identical values, and
-   * is bound to this scope.
+   * Converts an Observable to a Behavior. If no initial value is specified, the
+   * Observable must synchronously emit an initial value.
    */
-  public state(): MonoTypeOperator {
-    return this.stateImpl;
+  public behavior<T>(
+    setValue$: Observable<T>,
+    initialValue: T | typeof nothing = nothing,
+  ): Behavior<T> {
+    const subject$ = new BehaviorSubject(initialValue);
+    // Push values from the Observable into the BehaviorSubject.
+    // BehaviorSubjects have an undesirable feature where if you call 'complete',
+    // they will no longer re-emit their current value upon subscription. We want
+    // to support Observables that complete (for example `of({})`), so we have to
+    // take care to not propagate the completion event.
+    setValue$.pipe(this.bind(), distinctUntilChanged()).subscribe({
+      next(value) {
+        subject$.next(value);
+      },
+      error(err: unknown) {
+        subject$.error(err);
+      },
+    });
+    if (subject$.value === nothing)
+      throw new Error("Behavior failed to synchronously emit an initial value");
+    return subject$ as Behavior<T>;
   }
 
   /**
@@ -55,3 +70,8 @@ export class ObservableScope {
     this.ended$.complete();
   }
 }
+
+/**
+ * The global scope, a scope which never ends.
+ */
+export const globalScope = new ObservableScope();

src/state/TileViewModel.ts

@@ -5,10 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Observable } from "rxjs";
-
 import { ViewModel } from "./ViewModel";
 import { type MediaViewModel, type UserMediaViewModel } from "./MediaViewModel";
+import { type Behavior } from "./Behavior";
 
 let nextId = 0;
 function createId(): string {
@@ -18,15 +17,15 @@ function createId(): string {
 export class GridTileViewModel extends ViewModel {
   public readonly id = createId();
 
-  public constructor(public readonly media$: Observable<UserMediaViewModel>) {
+  public constructor(public readonly media$: Behavior<UserMediaViewModel>) {
     super();
   }
 }
 
 export class SpotlightTileViewModel extends ViewModel {
   public constructor(
-    public readonly media$: Observable<MediaViewModel[]>,
-    public readonly maximised$: Observable<boolean>,
+    public readonly media$: Behavior<MediaViewModel[]>,
+    public readonly maximised$: Behavior<boolean>,
   ) {
     super();
   }

src/tile/GridTile.module.css

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 .tile {
   --media-view-border-radius: var(--cpd-space-4x);
+  --hover-space-margin: var(--cpd-space-1x);
   transition: outline-color ease 0.15s;
   outline: var(--cpd-border-width-2) solid rgb(0 0 0 / 0);
 }

src/tile/GridTile.test.tsx

@@ -9,7 +9,6 @@ import { type RemoteTrackPublication } from "livekit-client";
 import { test, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
-import { of } from "rxjs";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 
 import { GridTile } from "./GridTile";
@@ -17,6 +16,7 @@ import { mockRtcMembership, withRemoteMedia } from "../utils/test";
 import { GridTileViewModel } from "../state/TileViewModel";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import type { CallViewModel } from "../state/CallViewModel";
+import { constant } from "../state/Behavior";
 
 global.IntersectionObserver = class MockIntersectionObserver {
   public observe(): void {}
@@ -53,13 +53,13 @@ test("GridTile is accessible", async () => {
         memberships: [],
       } as unknown as MatrixRTCSession;
       const cVm = {
-        reactions$: of({}),
-        handsRaised$: of({}),
+        reactions$: constant({}),
+        handsRaised$: constant({}),
       } as Partial<CallViewModel> as CallViewModel;
       const { container } = render(
         <ReactionsSenderProvider vm={cVm} rtcSession={fakeRtcSession}>
           <GridTile
-            vm={new GridTileViewModel(of(vm))}
+            vm={new GridTileViewModel(constant(vm))}
             onOpenProfile={() => {}}
             targetWidth={300}
             targetHeight={200}

src/tile/GridTile.tsx

@@ -7,8 +7,9 @@ Please see LICENSE in the repository root for full details.
 
 import {
   type ComponentProps,
+  type FC,
   type ReactNode,
-  forwardRef,
+  type Ref,
   useCallback,
   useRef,
   useState,
@@ -34,7 +35,7 @@ import {
   ToggleMenuItem,
   Menu,
 } from "@vector-im/compound-web";
-import { useObservableEagerState, useObservableState } from "observable-hooks";
+import { useObservableEagerState } from "observable-hooks";
 
 import styles from "./GridTile.module.css";
 import {
@@ -48,8 +49,10 @@ import { useLatest } from "../useLatest";
 import { type GridTileViewModel } from "../state/TileViewModel";
 import { useMergedRefs } from "../useMergedRefs";
 import { useReactionsSender } from "../reactions/useReactionsSender";
+import { useBehavior } from "../useBehavior";
 
 interface TileProps {
+  ref?: Ref<HTMLDivElement>;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
   targetWidth: number;
@@ -66,132 +69,128 @@ interface UserMediaTileProps extends TileProps {
   menuEnd?: ReactNode;
 }
 
-const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
-  (
-    {
-      vm,
-      showSpeakingIndicators,
-      locallyMuted,
-      menuStart,
-      menuEnd,
-      className,
-      displayName,
-      ...props
+const UserMediaTile: FC<UserMediaTileProps> = ({
+  ref,
+  vm,
+  showSpeakingIndicators,
+  locallyMuted,
+  menuStart,
+  menuEnd,
+  className,
+  displayName,
+  ...props
+}) => {
+  const { toggleRaisedHand } = useReactionsSender();
+  const { t } = useTranslation();
+  const video = useBehavior(vm.video$);
+  const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
+  const encryptionStatus = useBehavior(vm.encryptionStatus$);
+  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$);
+  const cropVideo = useBehavior(vm.cropVideo$);
+  const onSelectFitContain = useCallback(
+    (e: Event) => {
+      e.preventDefault();
+      vm.toggleFitContain();
     },
-    ref,
-  ) => {
-    const { toggleRaisedHand } = useReactionsSender();
-    const { t } = useTranslation();
-    const video = useObservableEagerState(vm.video$);
-    const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning$);
-    const encryptionStatus = useObservableEagerState(vm.encryptionStatus$);
-    const audioStreamStats = useObservableEagerState<
-      RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-    >(vm.audioStreamStats$);
-    const videoStreamStats = useObservableEagerState<
-      RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-    >(vm.videoStreamStats$);
-    const audioEnabled = useObservableEagerState(vm.audioEnabled$);
-    const videoEnabled = useObservableEagerState(vm.videoEnabled$);
-    const speaking = useObservableEagerState(vm.speaking$);
-    const cropVideo = useObservableEagerState(vm.cropVideo$);
-    const onSelectFitContain = useCallback(
-      (e: Event) => {
-        e.preventDefault();
-        vm.toggleFitContain();
-      },
-      [vm],
-    );
-    const handRaised = useObservableState(vm.handRaised$);
-    const reaction = useObservableState(vm.reaction$);
+    [vm],
+  );
+  const handRaised = useBehavior(vm.handRaised$);
+  const reaction = useBehavior(vm.reaction$);
 
-    const AudioIcon = locallyMuted
-      ? VolumeOffSolidIcon
-      : audioEnabled
-        ? MicOnSolidIcon
-        : MicOffSolidIcon;
-    const audioIconLabel = locallyMuted
-      ? t("video_tile.muted_for_me")
-      : audioEnabled
-        ? t("microphone_on")
-        : t("microphone_off");
+  const AudioIcon = locallyMuted
+    ? VolumeOffSolidIcon
+    : audioEnabled
+      ? MicOnSolidIcon
+      : MicOffSolidIcon;
+  const audioIconLabel = locallyMuted
+    ? t("video_tile.muted_for_me")
+    : audioEnabled
+      ? t("microphone_on")
+      : t("microphone_off");
 
-    const [menuOpen, setMenuOpen] = useState(false);
-    const menu = (
-      <>
-        {menuStart}
-        <ToggleMenuItem
-          Icon={ExpandIcon}
-          label={t("video_tile.change_fit_contain")}
-          checked={cropVideo}
-          onSelect={onSelectFitContain}
-        />
-        {menuEnd}
-      </>
-    );
-
-    const raisedHandOnClick = vm.local
-      ? (): void => void toggleRaisedHand()
-      : undefined;
-
-    const showSpeaking = showSpeakingIndicators && speaking;
-
-    const tile = (
-      <MediaView
-        ref={ref}
-        video={video}
-        member={vm.member}
-        unencryptedWarning={unencryptedWarning}
-        encryptionStatus={encryptionStatus}
-        videoEnabled={videoEnabled}
-        videoFit={cropVideo ? "cover" : "contain"}
-        className={classNames(className, styles.tile, {
-          [styles.speaking]: showSpeaking,
-          [styles.handRaised]: !showSpeaking && handRaised,
-        })}
-        nameTagLeadingIcon={
-          <AudioIcon
-            width={20}
-            height={20}
-            aria-label={audioIconLabel}
-            data-muted={locallyMuted || !audioEnabled}
-            className={styles.muteIcon}
-          />
-        }
-        displayName={displayName}
-        primaryButton={
-          <Menu
-            open={menuOpen}
-            onOpenChange={setMenuOpen}
-            title={displayName}
-            trigger={
-              <button aria-label={t("common.options")}>
-                <OverflowHorizontalIcon aria-hidden width={20} height={20} />
-              </button>
-            }
-            side="left"
-            align="start"
-          >
-            {menu}
-          </Menu>
-        }
-        raisedHandTime={handRaised ?? undefined}
-        currentReaction={reaction ?? undefined}
-        raisedHandOnClick={raisedHandOnClick}
-        localParticipant={vm.local}
-        audioStreamStats={audioStreamStats}
-        videoStreamStats={videoStreamStats}
-        {...props}
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menu = (
+    <>
+      {menuStart}
+      <ToggleMenuItem
+        Icon={ExpandIcon}
+        label={t("video_tile.change_fit_contain")}
+        checked={cropVideo}
+        onSelect={onSelectFitContain}
       />
-    );
+      {menuEnd}
+    </>
+  );
 
-    return (
-      <ContextMenu title={displayName} trigger={tile} hasAccessibleAlternative>
-        {menu}
-      </ContextMenu>
-    );
-  },
-);
+  const raisedHandOnClick = vm.local
+    ? (): void => void toggleRaisedHand()
+    : undefined;
+
+  const showSpeaking = showSpeakingIndicators && speaking;
+
+  const tile = (
+    <MediaView
+      ref={ref}
+      video={video}
+      member={vm.member}
+      unencryptedWarning={unencryptedWarning}
+      encryptionStatus={encryptionStatus}
+      videoEnabled={videoEnabled}
+      videoFit={cropVideo ? "cover" : "contain"}
+      className={classNames(className, styles.tile, {
+        [styles.speaking]: showSpeaking,
+        [styles.handRaised]: !showSpeaking && handRaised,
+      })}
+      nameTagLeadingIcon={
+        <AudioIcon
+          width={20}
+          height={20}
+          aria-label={audioIconLabel}
+          data-muted={locallyMuted || !audioEnabled}
+          className={styles.muteIcon}
+        />
+      }
+      displayName={displayName}
+      primaryButton={
+        <Menu
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+          title={displayName}
+          trigger={
+            <button aria-label={t("common.options")}>
+              <OverflowHorizontalIcon aria-hidden width={20} height={20} />
+            </button>
+          }
+          side="left"
+          align="start"
+        >
+          {menu}
+        </Menu>
+      }
+      raisedHandTime={handRaised ?? undefined}
+      currentReaction={reaction ?? undefined}
+      raisedHandOnClick={raisedHandOnClick}
+      localParticipant={vm.local}
+      audioStreamStats={audioStreamStats}
+      videoStreamStats={videoStreamStats}
+      {...props}
+    />
+  );
+
+  return (
+    <ContextMenu title={displayName} trigger={tile} hasAccessibleAlternative>
+      {menu}
+    </ContextMenu>
+  );
+};
 
 UserMediaTile.displayName = "UserMediaTile";
 
@@ -200,48 +199,51 @@ interface LocalUserMediaTileProps extends TileProps {
   onOpenProfile: (() => void) | null;
 }
 
-const LocalUserMediaTile = forwardRef<HTMLDivElement, LocalUserMediaTileProps>(
-  ({ vm, onOpenProfile, ...props }, ref) => {
-    const { t } = useTranslation();
-    const mirror = useObservableEagerState(vm.mirror$);
-    const alwaysShow = useObservableEagerState(vm.alwaysShow$);
-    const latestAlwaysShow = useLatest(alwaysShow);
-    const onSelectAlwaysShow = useCallback(
-      (e: Event) => {
-        e.preventDefault();
-        vm.setAlwaysShow(!latestAlwaysShow.current);
-      },
-      [vm, latestAlwaysShow],
-    );
+const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
+  ref,
+  vm,
+  onOpenProfile,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const mirror = useBehavior(vm.mirror$);
+  const alwaysShow = useBehavior(vm.alwaysShow$);
+  const latestAlwaysShow = useLatest(alwaysShow);
+  const onSelectAlwaysShow = useCallback(
+    (e: Event) => {
+      e.preventDefault();
+      vm.setAlwaysShow(!latestAlwaysShow.current);
+    },
+    [vm, latestAlwaysShow],
+  );
 
-    return (
-      <UserMediaTile
-        ref={ref}
-        vm={vm}
-        locallyMuted={false}
-        mirror={mirror}
-        menuStart={
-          <ToggleMenuItem
-            Icon={VisibilityOnIcon}
-            label={t("video_tile.always_show")}
-            checked={alwaysShow}
-            onSelect={onSelectAlwaysShow}
+  return (
+    <UserMediaTile
+      ref={ref}
+      vm={vm}
+      locallyMuted={false}
+      mirror={mirror}
+      menuStart={
+        <ToggleMenuItem
+          Icon={VisibilityOnIcon}
+          label={t("video_tile.always_show")}
+          checked={alwaysShow}
+          onSelect={onSelectAlwaysShow}
+        />
+      }
+      menuEnd={
+        onOpenProfile && (
+          <MenuItem
+            Icon={UserProfileIcon}
+            label={t("common.profile")}
+            onSelect={onOpenProfile}
           />
-        }
-        menuEnd={
-          onOpenProfile && (
-            <MenuItem
-              Icon={UserProfileIcon}
-              label={t("common.profile")}
-              onSelect={onOpenProfile}
-            />
-          )
-        }
-        {...props}
-      />
-    );
-  },
-);
+        )
+      }
+      {...props}
+    />
+  );
+};
 
 LocalUserMediaTile.displayName = "LocalUserMediaTile";
 
@@ -249,13 +251,14 @@ interface RemoteUserMediaTileProps extends TileProps {
   vm: RemoteUserMediaViewModel;
 }
 
-const RemoteUserMediaTile = forwardRef<
-  HTMLDivElement,
-  RemoteUserMediaTileProps
->(({ vm, ...props }, ref) => {
+const RemoteUserMediaTile: FC<RemoteUserMediaTileProps> = ({
+  ref,
+  vm,
+  ...props
+}) => {
   const { t } = useTranslation();
-  const locallyMuted = useObservableEagerState(vm.locallyMuted$);
-  const localVolume = useObservableEagerState(vm.localVolume$);
+  const locallyMuted = useBehavior(vm.locallyMuted$);
+  const localVolume = useBehavior(vm.localVolume$);
   const onSelectMute = useCallback(
     (e: Event) => {
       e.preventDefault();
@@ -303,11 +306,12 @@ const RemoteUserMediaTile = forwardRef<
       {...props}
     />
   );
-});
+};
 
 RemoteUserMediaTile.displayName = "RemoteUserMediaTile";
 
 interface GridTileProps {
+  ref?: Ref<HTMLDivElement>;
   vm: GridTileViewModel;
   onOpenProfile: (() => void) | null;
   targetWidth: number;
@@ -317,34 +321,37 @@ interface GridTileProps {
   showSpeakingIndicators: boolean;
 }
 
-export const GridTile = forwardRef<HTMLDivElement, GridTileProps>(
-  ({ vm, onOpenProfile, ...props }, theirRef) => {
-    const ourRef = useRef<HTMLDivElement | null>(null);
-    const ref = useMergedRefs(ourRef, theirRef);
-    const media = useObservableEagerState(vm.media$);
-    const displayName = useObservableEagerState(media.displayname$);
+export const GridTile: FC<GridTileProps> = ({
+  ref: theirRef,
+  vm,
+  onOpenProfile,
+  ...props
+}) => {
+  const ourRef = useRef<HTMLDivElement | null>(null);
+  const ref = useMergedRefs(ourRef, theirRef);
+  const media = useBehavior(vm.media$);
+  const displayName = useBehavior(media.displayName$);
 
-    if (media instanceof LocalUserMediaViewModel) {
-      return (
-        <LocalUserMediaTile
-          ref={ref}
-          vm={media}
-          onOpenProfile={onOpenProfile}
-          displayName={displayName}
-          {...props}
-        />
-      );
-    } else {
-      return (
-        <RemoteUserMediaTile
-          ref={ref}
-          vm={media}
-          displayName={displayName}
-          {...props}
-        />
-      );
-    }
-  },
-);
+  if (media instanceof LocalUserMediaViewModel) {
+    return (
+      <LocalUserMediaTile
+        ref={ref}
+        vm={media}
+        onOpenProfile={onOpenProfile}
+        displayName={displayName}
+        {...props}
+      />
+    );
+  } else {
+    return (
+      <RemoteUserMediaTile
+        ref={ref}
+        vm={media}
+        displayName={displayName}
+        {...props}
+      />
+    );
+  }
+};
 
 GridTile.displayName = "GridTile";

src/tile/MediaView.module.css

@@ -9,6 +9,8 @@ Please see LICENSE in the repository root for full details.
   container-name: mediaView;
   container-type: size;
   border-radius: var(--media-view-border-radius);
+  /*Add spacing for the hover boarder. Otherwise it might get clipped.*/
+  margin: var(--hover-space-margin);
 }
 
 .media video {

src/tile/MediaView.tsx

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
 import { animated } from "@react-spring/web";
 import { type RoomMember } from "matrix-js-sdk";
-import { type ComponentProps, type ReactNode, forwardRef } from "react";
+import { type FC, type ComponentProps, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { VideoTrack } from "@livekit/components-react";
@@ -47,97 +47,94 @@ interface Props extends ComponentProps<typeof animated.div> {
   videoStreamStats?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
 }
 
-export const MediaView = forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      className,
-      style,
-      targetWidth,
-      targetHeight,
-      video,
-      videoFit,
-      mirror,
-      member,
-      videoEnabled,
-      unencryptedWarning,
-      nameTagLeadingIcon,
-      displayName,
-      primaryButton,
-      encryptionStatus,
-      raisedHandTime,
-      currentReaction,
-      raisedHandOnClick,
-      localParticipant,
-      audioStreamStats,
-      videoStreamStats,
-      ...props
-    },
-    ref,
-  ) => {
-    const { t } = useTranslation();
-    const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
+export const MediaView: FC<Props> = ({
+  ref,
+  className,
+  style,
+  targetWidth,
+  targetHeight,
+  video,
+  videoFit,
+  mirror,
+  member,
+  videoEnabled,
+  unencryptedWarning,
+  nameTagLeadingIcon,
+  displayName,
+  primaryButton,
+  encryptionStatus,
+  raisedHandTime,
+  currentReaction,
+  raisedHandOnClick,
+  localParticipant,
+  audioStreamStats,
+  videoStreamStats,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
 
-    const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
+  const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
 
-    return (
-      <animated.div
-        className={classNames(styles.media, className, {
-          [styles.mirror]: mirror,
-        })}
-        style={style}
-        ref={ref}
-        data-testid="videoTile"
-        data-video-fit={videoFit}
-        {...props}
-      >
-        <div className={styles.bg}>
-          <Avatar
-            id={member?.userId ?? displayName}
-            name={displayName}
-            size={avatarSize}
-            src={member?.getMxcAvatarUrl()}
-            className={styles.avatar}
-            style={{ display: video && videoEnabled ? "none" : "initial" }}
+  return (
+    <animated.div
+      className={classNames(styles.media, className, {
+        [styles.mirror]: mirror,
+      })}
+      style={style}
+      ref={ref}
+      data-testid="videoTile"
+      data-video-fit={videoFit}
+      {...props}
+    >
+      <div className={styles.bg}>
+        <Avatar
+          id={member?.userId ?? displayName}
+          name={displayName}
+          size={avatarSize}
+          src={member?.getMxcAvatarUrl()}
+          className={styles.avatar}
+          style={{ display: video && videoEnabled ? "none" : "initial" }}
+        />
+        {video?.publication !== undefined && (
+          <VideoTrack
+            trackRef={video}
+            // There's no reason for this to be focusable
+            tabIndex={-1}
+            disablePictureInPicture
+            style={{ display: video && videoEnabled ? "block" : "none" }}
+            data-testid="video"
           />
-          {video?.publication !== undefined && (
-            <VideoTrack
-              trackRef={video}
-              // There's no reason for this to be focusable
-              tabIndex={-1}
-              disablePictureInPicture
-              style={{ display: video && videoEnabled ? "block" : "none" }}
-              data-testid="video"
+        )}
+      </div>
+      <div className={styles.fg}>
+        <div className={styles.reactions}>
+          <RaisedHandIndicator
+            raisedHandTime={raisedHandTime}
+            miniature={avatarSize < 96}
+            showTimer={handRaiseTimerVisible}
+            onClick={raisedHandOnClick}
+          />
+          {currentReaction && (
+            <ReactionIndicator
+              miniature={avatarSize < 96}
+              emoji={currentReaction.emoji}
             />
           )}
         </div>
-        <div className={styles.fg}>
-          <div className={styles.reactions}>
-            <RaisedHandIndicator
-              raisedHandTime={raisedHandTime}
-              miniature={avatarSize < 96}
-              showTimer={handRaiseTimerVisible}
-              onClick={raisedHandOnClick}
-            />
-            {currentReaction && (
-              <ReactionIndicator
-                miniature={avatarSize < 96}
-                emoji={currentReaction.emoji}
-              />
-            )}
+        {!video && !localParticipant && (
+          <div className={styles.status}>
+            {t("video_tile.waiting_for_media")}
           </div>
-          {!video && !localParticipant && (
-            <div className={styles.status}>
-              {t("video_tile.waiting_for_media")}
-            </div>
-          )}
-          {(audioStreamStats || videoStreamStats) && (
-            <RTCConnectionStats
-              audio={audioStreamStats}
-              video={videoStreamStats}
-            />
-          )}
-          {/* TODO: Bring this back once encryption status is less broken */}
-          {/*encryptionStatus !== EncryptionStatus.Okay && (
+        )}
+        {(audioStreamStats || videoStreamStats) && (
+          <RTCConnectionStats
+            audio={audioStreamStats}
+            video={videoStreamStats}
+          />
+        )}
+        {/* TODO: Bring this back once encryption status is less broken */}
+        {/*encryptionStatus !== EncryptionStatus.Okay && (
             <div className={styles.status}>
               <Text as="span" size="sm" weight="medium" className={styles.name}>
                 {encryptionStatus === EncryptionStatus.Connecting &&
@@ -151,38 +148,37 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
               </Text>
             </div>
           )*/}
-          <div className={styles.nameTag}>
-            {nameTagLeadingIcon}
-            <Text
-              as="span"
-              size="sm"
-              weight="medium"
-              className={styles.name}
-              data-testid="name_tag"
+        <div className={styles.nameTag}>
+          {nameTagLeadingIcon}
+          <Text
+            as="span"
+            size="sm"
+            weight="medium"
+            className={styles.name}
+            data-testid="name_tag"
+          >
+            {displayName}
+          </Text>
+          {unencryptedWarning && (
+            <Tooltip
+              label={t("common.unencrypted")}
+              placement="bottom"
+              isTriggerInteractive={false}
             >
-              {displayName}
-            </Text>
-            {unencryptedWarning && (
-              <Tooltip
-                label={t("common.unencrypted")}
-                placement="bottom"
-                isTriggerInteractive={false}
-              >
-                <ErrorSolidIcon
-                  width={20}
-                  height={20}
-                  className={styles.errorIcon}
-                  role="img"
-                  aria-label={t("common.unencrypted")}
-                />
-              </Tooltip>
-            )}
-          </div>
-          {primaryButton}
+              <ErrorSolidIcon
+                width={20}
+                height={20}
+                className={styles.errorIcon}
+                role="img"
+                aria-label={t("common.unencrypted")}
+              />
+            </Tooltip>
+          )}
         </div>
-      </animated.div>
-    );
-  },
-);
+        {primaryButton}
+      </div>
+    </animated.div>
+  );
+};
 
 MediaView.displayName = "MediaView";

src/tile/SpotlightTile.test.tsx

@@ -9,7 +9,6 @@ import { test, expect, vi } from "vitest";
 import { isInaccessible, render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
 import userEvent from "@testing-library/user-event";
-import { of } from "rxjs";
 
 import { SpotlightTile } from "./SpotlightTile";
 import {
@@ -18,6 +17,7 @@ import {
   withRemoteMedia,
 } from "../utils/test";
 import { SpotlightTileViewModel } from "../state/TileViewModel";
+import { constant } from "../state/Behavior";
 
 global.IntersectionObserver = class MockIntersectionObserver {
   public observe(): void {}
@@ -44,7 +44,12 @@ test("SpotlightTile is accessible", async () => {
           const toggleExpanded = vi.fn();
           const { container } = render(
             <SpotlightTile
-              vm={new SpotlightTileViewModel(of([vm1, vm2]), of(false))}
+              vm={
+                new SpotlightTileViewModel(
+                  constant([vm1, vm2]),
+                  constant(false),
+                )
+              }
               targetWidth={300}
               targetHeight={200}
               expanded={false}

src/tile/SpotlightTile.tsx

@@ -7,8 +7,9 @@ Please see LICENSE in the repository root for full details.
 
 import {
   type ComponentProps,
+  type FC,
+  type Ref,
   type RefAttributes,
-  forwardRef,
   useCallback,
   useEffect,
   useRef,
@@ -22,7 +23,7 @@ import {
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { animated } from "@react-spring/web";
 import { type Observable, map } from "rxjs";
-import { useObservableEagerState, useObservableRef } from "observable-hooks";
+import { useObservableRef } from "observable-hooks";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
@@ -42,8 +43,10 @@ import { useMergedRefs } from "../useMergedRefs";
 import { useReactiveState } from "../useReactiveState";
 import { useLatest } from "../useLatest";
 import { type SpotlightTileViewModel } from "../state/TileViewModel";
+import { useBehavior } from "../useBehavior";
 
 interface SpotlightItemBaseProps {
+  ref?: Ref<HTMLDivElement>;
   className?: string;
   "data-id": string;
   targetWidth: number;
@@ -67,13 +70,13 @@ interface SpotlightLocalUserMediaItemProps
   vm: LocalUserMediaViewModel;
 }
 
-const SpotlightLocalUserMediaItem = forwardRef<
-  HTMLDivElement,
-  SpotlightLocalUserMediaItemProps
->(({ vm, ...props }, ref) => {
-  const mirror = useObservableEagerState(vm.mirror$);
-  return <MediaView ref={ref} mirror={mirror} {...props} />;
-});
+const SpotlightLocalUserMediaItem: FC<SpotlightLocalUserMediaItemProps> = ({
+  vm,
+  ...props
+}) => {
+  const mirror = useBehavior(vm.mirror$);
+  return <MediaView mirror={mirror} {...props} />;
+};
 
 SpotlightLocalUserMediaItem.displayName = "SpotlightLocalUserMediaItem";
 
@@ -81,16 +84,15 @@ interface SpotlightUserMediaItemProps extends SpotlightItemBaseProps {
   vm: UserMediaViewModel;
 }
 
-const SpotlightUserMediaItem = forwardRef<
-  HTMLDivElement,
-  SpotlightUserMediaItemProps
->(({ vm, ...props }, ref) => {
-  const videoEnabled = useObservableEagerState(vm.videoEnabled$);
-  const cropVideo = useObservableEagerState(vm.cropVideo$);
+const SpotlightUserMediaItem: FC<SpotlightUserMediaItemProps> = ({
+  vm,
+  ...props
+}) => {
+  const videoEnabled = useBehavior(vm.videoEnabled$);
+  const cropVideo = useBehavior(vm.cropVideo$);
 
   const baseProps: SpotlightUserMediaItemBaseProps &
     RefAttributes<HTMLDivElement> = {
-    ref,
     videoEnabled,
     videoFit: cropVideo ? "cover" : "contain",
     ...props,
@@ -101,11 +103,12 @@ const SpotlightUserMediaItem = forwardRef<
   ) : (
     <MediaView mirror={false} {...baseProps} />
   );
-});
+};
 
 SpotlightUserMediaItem.displayName = "SpotlightUserMediaItem";
 
 interface SpotlightItemProps {
+  ref?: Ref<HTMLDivElement>;
   vm: MediaViewModel;
   targetWidth: number;
   targetHeight: number;
@@ -117,71 +120,63 @@ interface SpotlightItemProps {
   "aria-hidden"?: boolean;
 }
 
-const SpotlightItem = forwardRef<HTMLDivElement, SpotlightItemProps>(
-  (
-    {
-      vm,
-      targetWidth,
-      targetHeight,
-      intersectionObserver$,
-      snap,
-      "aria-hidden": ariaHidden,
-    },
-    theirRef,
-  ) => {
-    const ourRef = useRef<HTMLDivElement | null>(null);
-    const ref = useMergedRefs(ourRef, theirRef);
-    const displayName = useObservableEagerState(vm.displayname$);
-    const video = useObservableEagerState(vm.video$);
-    const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning$);
-    const encryptionStatus = useObservableEagerState(vm.encryptionStatus$);
+const SpotlightItem: FC<SpotlightItemProps> = ({
+  ref: theirRef,
+  vm,
+  targetWidth,
+  targetHeight,
+  intersectionObserver$,
+  snap,
+  "aria-hidden": ariaHidden,
+}) => {
+  const ourRef = useRef<HTMLDivElement | null>(null);
+  const ref = useMergedRefs(ourRef, theirRef);
+  const displayName = useBehavior(vm.displayName$);
+  const video = useBehavior(vm.video$);
+  const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
+  const encryptionStatus = useBehavior(vm.encryptionStatus$);
 
-    // Hook this item up to the intersection observer
-    useEffect(() => {
-      const element = ourRef.current!;
-      let prevIo: IntersectionObserver | null = null;
-      const subscription = intersectionObserver$.subscribe((io) => {
-        prevIo?.unobserve(element);
-        io.observe(element);
-        prevIo = io;
-      });
-      return (): void => {
-        subscription.unsubscribe();
-        prevIo?.unobserve(element);
-      };
-    }, [intersectionObserver$]);
-
-    const baseProps: SpotlightItemBaseProps & RefAttributes<HTMLDivElement> = {
-      ref,
-      "data-id": vm.id,
-      className: classNames(styles.item, { [styles.snap]: snap }),
-      targetWidth,
-      targetHeight,
-      video,
-      member: vm.member,
-      unencryptedWarning,
-      displayName,
-      encryptionStatus,
-      "aria-hidden": ariaHidden,
-      localParticipant: vm.local,
+  // Hook this item up to the intersection observer
+  useEffect(() => {
+    const element = ourRef.current!;
+    let prevIo: IntersectionObserver | null = null;
+    const subscription = intersectionObserver$.subscribe((io) => {
+      prevIo?.unobserve(element);
+      io.observe(element);
+      prevIo = io;
+    });
+    return (): void => {
+      subscription.unsubscribe();
+      prevIo?.unobserve(element);
     };
+  }, [intersectionObserver$]);
 
-    return vm instanceof ScreenShareViewModel ? (
-      <MediaView
-        videoEnabled
-        videoFit="contain"
-        mirror={false}
-        {...baseProps}
-      />
-    ) : (
-      <SpotlightUserMediaItem vm={vm} {...baseProps} />
-    );
-  },
-);
+  const baseProps: SpotlightItemBaseProps & RefAttributes<HTMLDivElement> = {
+    ref,
+    "data-id": vm.id,
+    className: classNames(styles.item, { [styles.snap]: snap }),
+    targetWidth,
+    targetHeight,
+    video,
+    member: vm.member,
+    unencryptedWarning,
+    displayName,
+    encryptionStatus,
+    "aria-hidden": ariaHidden,
+    localParticipant: vm.local,
+  };
+
+  return vm instanceof ScreenShareViewModel ? (
+    <MediaView videoEnabled videoFit="contain" mirror={false} {...baseProps} />
+  ) : (
+    <SpotlightUserMediaItem vm={vm} {...baseProps} />
+  );
+};
 
 SpotlightItem.displayName = "SpotlightItem";
 
 interface Props {
+  ref?: Ref<HTMLDivElement>;
   vm: SpotlightTileViewModel;
   expanded: boolean;
   onToggleExpanded: (() => void) | null;
@@ -192,156 +187,148 @@ interface Props {
   style?: ComponentProps<typeof animated.div>["style"];
 }
 
-export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      vm,
-      expanded,
-      onToggleExpanded,
-      targetWidth,
-      targetHeight,
-      showIndicators,
-      className,
-      style,
-    },
-    theirRef,
-  ) => {
-    const { t } = useTranslation();
-    const [ourRef, root$] = useObservableRef<HTMLDivElement | null>(null);
-    const ref = useMergedRefs(ourRef, theirRef);
-    const maximised = useObservableEagerState(vm.maximised$);
-    const media = useObservableEagerState(vm.media$);
-    const [visibleId, setVisibleId] = useState<string | undefined>(
-      media[0]?.id,
-    );
-    const latestMedia = useLatest(media);
-    const latestVisibleId = useLatest(visibleId);
-    const visibleIndex = media.findIndex((vm) => vm.id === visibleId);
-    const canGoBack = visibleIndex > 0;
-    const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;
+export const SpotlightTile: FC<Props> = ({
+  ref: theirRef,
+  vm,
+  expanded,
+  onToggleExpanded,
+  targetWidth,
+  targetHeight,
+  showIndicators,
+  className,
+  style,
+}) => {
+  const { t } = useTranslation();
+  const [ourRef, root$] = useObservableRef<HTMLDivElement | null>(null);
+  const ref = useMergedRefs(ourRef, theirRef);
+  const maximised = useBehavior(vm.maximised$);
+  const media = useBehavior(vm.media$);
+  const [visibleId, setVisibleId] = useState<string | undefined>(media[0]?.id);
+  const latestMedia = useLatest(media);
+  const latestVisibleId = useLatest(visibleId);
+  const visibleIndex = media.findIndex((vm) => vm.id === visibleId);
+  const canGoBack = visibleIndex > 0;
+  const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;
 
-    // To keep track of which item is visible, we need an intersection observer
-    // hooked up to the root element and the items. Because the items will run
-    // their effects before their parent does, we need to do this dance with an
-    // Observable to actually give them the intersection observer.
-    const intersectionObserver$ = useInitial<Observable<IntersectionObserver>>(
-      () =>
-        root$.pipe(
-          map(
-            (r) =>
-              new IntersectionObserver(
-                (entries) => {
-                  const visible = entries.find((e) => e.isIntersecting);
-                  if (visible !== undefined)
-                    setVisibleId(visible.target.getAttribute("data-id")!);
-                },
-                { root: r, threshold: 0.5 },
-              ),
-          ),
+  // To keep track of which item is visible, we need an intersection observer
+  // hooked up to the root element and the items. Because the items will run
+  // their effects before their parent does, we need to do this dance with an
+  // Observable to actually give them the intersection observer.
+  const intersectionObserver$ = useInitial<Observable<IntersectionObserver>>(
+    () =>
+      root$.pipe(
+        map(
+          (r) =>
+            new IntersectionObserver(
+              (entries) => {
+                const visible = entries.find((e) => e.isIntersecting);
+                if (visible !== undefined)
+                  setVisibleId(visible.target.getAttribute("data-id")!);
+              },
+              { root: r, threshold: 0.5 },
+            ),
         ),
+      ),
+  );
+
+  const [scrollToId, setScrollToId] = useReactiveState<string | null>(
+    (prev) =>
+      prev == null || prev === visibleId || media.every((vm) => vm.id !== prev)
+        ? null
+        : prev,
+    [visibleId],
+  );
+
+  const onBackClick = useCallback(() => {
+    const media = latestMedia.current;
+    const visibleIndex = media.findIndex(
+      (vm) => vm.id === latestVisibleId.current,
     );
+    if (visibleIndex > 0) setScrollToId(media[visibleIndex - 1].id);
+  }, [latestVisibleId, latestMedia, setScrollToId]);
 
-    const [scrollToId, setScrollToId] = useReactiveState<string | null>(
-      (prev) =>
-        prev == null ||
-        prev === visibleId ||
-        media.every((vm) => vm.id !== prev)
-          ? null
-          : prev,
-      [visibleId],
+  const onNextClick = useCallback(() => {
+    const media = latestMedia.current;
+    const visibleIndex = media.findIndex(
+      (vm) => vm.id === latestVisibleId.current,
     );
+    if (visibleIndex !== -1 && visibleIndex !== media.length - 1)
+      setScrollToId(media[visibleIndex + 1].id);
+  }, [latestVisibleId, latestMedia, setScrollToId]);
 
-    const onBackClick = useCallback(() => {
-      const media = latestMedia.current;
-      const visibleIndex = media.findIndex(
-        (vm) => vm.id === latestVisibleId.current,
-      );
-      if (visibleIndex > 0) setScrollToId(media[visibleIndex - 1].id);
-    }, [latestVisibleId, latestMedia, setScrollToId]);
+  const ToggleExpandIcon = expanded ? CollapseIcon : ExpandIcon;
 
-    const onNextClick = useCallback(() => {
-      const media = latestMedia.current;
-      const visibleIndex = media.findIndex(
-        (vm) => vm.id === latestVisibleId.current,
-      );
-      if (visibleIndex !== -1 && visibleIndex !== media.length - 1)
-        setScrollToId(media[visibleIndex + 1].id);
-    }, [latestVisibleId, latestMedia, setScrollToId]);
-
-    const ToggleExpandIcon = expanded ? CollapseIcon : ExpandIcon;
-
-    return (
-      <animated.div
-        ref={ref}
-        className={classNames(className, styles.tile, {
-          [styles.maximised]: maximised,
-        })}
-        style={style}
-      >
-        {canGoBack && (
-          <button
-            className={classNames(styles.advance, styles.back)}
-            aria-label={t("common.back")}
-            onClick={onBackClick}
-          >
-            <ChevronLeftIcon aria-hidden width={24} height={24} />
-          </button>
-        )}
-        <div className={styles.contents}>
+  return (
+    <animated.div
+      ref={ref}
+      className={classNames(className, styles.tile, {
+        [styles.maximised]: maximised,
+      })}
+      style={style}
+    >
+      {canGoBack && (
+        <button
+          className={classNames(styles.advance, styles.back)}
+          aria-label={t("common.back")}
+          onClick={onBackClick}
+        >
+          <ChevronLeftIcon aria-hidden width={24} height={24} />
+        </button>
+      )}
+      <div className={styles.contents}>
+        {media.map((vm) => (
+          <SpotlightItem
+            key={vm.id}
+            vm={vm}
+            targetWidth={targetWidth}
+            targetHeight={targetHeight}
+            intersectionObserver$={intersectionObserver$}
+            // This is how we get the container to scroll to the right media
+            // when the previous/next buttons are clicked: we temporarily
+            // remove all scroll snap points except for just the one media
+            // that we want to bring into view
+            snap={scrollToId === null || scrollToId === vm.id}
+            aria-hidden={(scrollToId ?? visibleId) !== vm.id}
+          />
+        ))}
+      </div>
+      {onToggleExpanded && (
+        <button
+          className={classNames(styles.expand)}
+          aria-label={
+            expanded ? t("video_tile.collapse") : t("video_tile.expand")
+          }
+          onClick={onToggleExpanded}
+        >
+          <ToggleExpandIcon aria-hidden width={20} height={20} />
+        </button>
+      )}
+      {canGoToNext && (
+        <button
+          className={classNames(styles.advance, styles.next)}
+          aria-label={t("common.next")}
+          onClick={onNextClick}
+        >
+          <ChevronRightIcon aria-hidden width={24} height={24} />
+        </button>
+      )}
+      {!expanded && (
+        <div
+          className={classNames(styles.indicators, {
+            [styles.show]: showIndicators && media.length > 1,
+          })}
+        >
           {media.map((vm) => (
-            <SpotlightItem
+            <div
               key={vm.id}
-              vm={vm}
-              targetWidth={targetWidth}
-              targetHeight={targetHeight}
-              intersectionObserver$={intersectionObserver$}
-              // This is how we get the container to scroll to the right media
-              // when the previous/next buttons are clicked: we temporarily
-              // remove all scroll snap points except for just the one media
-              // that we want to bring into view
-              snap={scrollToId === null || scrollToId === vm.id}
-              aria-hidden={(scrollToId ?? visibleId) !== vm.id}
+              className={styles.item}
+              data-visible={vm.id === visibleId}
             />
           ))}
         </div>
-        {onToggleExpanded && (
-          <button
-            className={classNames(styles.expand)}
-            aria-label={
-              expanded ? t("video_tile.collapse") : t("video_tile.expand")
-            }
-            onClick={onToggleExpanded}
-          >
-            <ToggleExpandIcon aria-hidden width={20} height={20} />
-          </button>
-        )}
-        {canGoToNext && (
-          <button
-            className={classNames(styles.advance, styles.next)}
-            aria-label={t("common.next")}
-            onClick={onNextClick}
-          >
-            <ChevronRightIcon aria-hidden width={24} height={24} />
-          </button>
-        )}
-        {!expanded && (
-          <div
-            className={classNames(styles.indicators, {
-              [styles.show]: showIndicators && media.length > 1,
-            })}
-          >
-            {media.map((vm) => (
-              <div
-                key={vm.id}
-                className={styles.item}
-                data-visible={vm.id === visibleId}
-              />
-            ))}
-          </div>
-        )}
-      </animated.div>
-    );
-  },
-);
+      )}
+    </animated.div>
+  );
+};
 
 SpotlightTile.displayName = "SpotlightTile";

src/useAudioContext.test.tsx

@@ -10,12 +10,12 @@ import { type FC } from "react";
 import { render } from "@testing-library/react";
 import userEvent, { type UserEvent } from "@testing-library/user-event";
 import { BrowserRouter } from "react-router-dom";
-import { of } from "rxjs";
 
 import { MediaDevicesContext } from "./MediaDevicesContext";
 import { useAudioContext } from "./useAudioContext";
 import { soundEffectVolume as soundEffectVolumeSetting } from "./settings/settings";
 import { mockMediaDevices } from "./utils/test";
+import { constant } from "./state/Behavior";
 
 const staticSounds = Promise.resolve({
   aSound: new ArrayBuffer(0),
@@ -128,8 +128,8 @@ test("will use the correct device", () => {
     <MediaDevicesContext
       value={mockMediaDevices({
         audioOutput: {
-          available$: of(new Map<never, never>()),
-          selected$: of({ id: "chosen-device", virtualEarpiece: false }),
+          available$: constant(new Map<never, never>()),
+          selected$: constant({ id: "chosen-device", virtualEarpiece: false }),
           select: () => {},
         },
       })}
@@ -161,8 +161,8 @@ test("will use the pan if earpiece is selected", async () => {
     <MediaDevicesContext
       value={mockMediaDevices({
         audioOutput: {
-          available$: of(new Map<never, never>()),
-          selected$: of({ id: "chosen-device", virtualEarpiece: true }),
+          available$: constant(new Map<never, never>()),
+          selected$: constant({ id: "chosen-device", virtualEarpiece: true }),
           select: () => {},
         },
       })}

src/useBehavior.ts

@@ -0,0 +1,25 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useCallback, useSyncExternalStore } from "react";
+
+import { type Behavior } from "./state/Behavior";
+
+/**
+ * React hook which reactively reads the value of a behavior.
+ */
+export function useBehavior<T>(behavior: Behavior<T>): T {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const s = behavior.subscribe(onChange);
+      return (): void => s.unsubscribe();
+    },
+    [behavior],
+  );
+  const getValue = useCallback(() => behavior.value, [behavior]);
+  return useSyncExternalStore(subscribe, getValue);
+}

src/useMergedRefs.ts

@@ -5,21 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type MutableRefObject, type RefCallback, useCallback } from "react";
+import { type RefCallback, type RefObject, useCallback } from "react";
 
 /**
  * Combines multiple refs into one, useful for attaching multiple refs to the
  * same DOM node.
  */
 export const useMergedRefs = <T>(
-  ...refs: (MutableRefObject<T | null> | RefCallback<T | null> | null)[]
+  ...refs: (RefObject<T | null> | RefCallback<T | null> | null | undefined)[]
 ): RefCallback<T | null> =>
   useCallback(
     (value) =>
       refs.forEach((ref) => {
         if (typeof ref === "function") {
           ref(value);
-        } else if (ref !== null) {
+        } else if (ref) {
           ref.current = value;
         }
       }),

src/utils/errors.ts

@@ -13,7 +13,6 @@ export enum ErrorCode {
    */
   MISSING_MATRIX_RTC_FOCUS = "MISSING_MATRIX_RTC_FOCUS",
   CONNECTION_LOST_ERROR = "CONNECTION_LOST_ERROR",
-  MEMBERSHIP_MANAGER_UNRECOVERABLE = "MEMBERSHIP_MANAGER_UNRECOVERABLE",
   /** LiveKit indicates that the server has hit its track limits */
   INSUFFICIENT_CAPACITY_ERROR = "INSUFFICIENT_CAPACITY_ERROR",
   E2EE_NOT_SUPPORTED = "E2EE_NOT_SUPPORTED",
@@ -25,7 +24,6 @@ export enum ErrorCategory {
   /** Calling is not supported, server misconfigured (JWT service missing, no MSC support ...)*/
   CONFIGURATION_ISSUE = "CONFIGURATION_ISSUE",
   NETWORK_CONNECTIVITY = "NETWORK_CONNECTIVITY",
-  RTC_SESSION_FAILURE = "RTC_SESSION_FAILURE",
   CLIENT_CONFIGURATION = "CLIENT_CONFIGURATION",
   UNKNOWN = "UNKNOWN",
   // SYSTEM_FAILURE / FEDERATION_FAILURE ..
@@ -84,11 +82,6 @@ export class ConnectionLostError extends ElementCallError {
   }
 }
 
-export class RTCSessionError extends ElementCallError {
-  public constructor(code: ErrorCode, message: string) {
-    super("RTCSession Error", code, ErrorCategory.RTC_SESSION_FAILURE, message);
-  }
-}
 export class E2EENotSupportedError extends ElementCallError {
   public constructor() {
     super(
@@ -106,7 +99,7 @@ export class UnknownCallError extends ElementCallError {
       t("error.generic"),
       ErrorCode.UNKNOWN_ERROR,
       ErrorCategory.UNKNOWN,
-      error.message,
+      undefined,
       // Properly set it as a cause for a better reporting on sentry
       error,
     );

src/utils/observable.ts

@@ -5,7 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Observable, defer, finalize, scan, startWith, tap } from "rxjs";
+import {
+  type Observable,
+  concat,
+  defer,
+  finalize,
+  map,
+  scan,
+  startWith,
+  takeWhile,
+  tap,
+} from "rxjs";
 
 const nothing = Symbol("nothing");
 
@@ -39,6 +49,29 @@ export function accumulate<State, Event>(
     events$.pipe(scan(update, initial), startWith(initial));
 }
 
+const switchSymbol = Symbol("switch");
+
+/**
+ * RxJS operator which behaves like the input Observable (A) until it emits a
+ * value satisfying the given predicate, then behaves like Observable B.
+ *
+ * The switch is immediate; the value that triggers the switch will not be
+ * present in the output.
+ */
+export function switchWhen<A, B>(
+  predicate: (a: A, index: number) => boolean,
+  b$: Observable<B>,
+) {
+  return (a$: Observable<A>): Observable<A | B> =>
+    concat(
+      a$.pipe(
+        map((a, index) => (predicate(a, index) ? switchSymbol : a)),
+        takeWhile((a) => a !== switchSymbol),
+      ) as Observable<A>,
+      b$,
+    );
+}
+
 /**
  * Reads the current value of a state Observable without reacting to future
  * changes.

src/utils/test-viewmodel.ts

@@ -18,7 +18,12 @@ import EventEmitter from "events";
 import type { RoomMember, MatrixClient } from "matrix-js-sdk";
 import { E2eeType } from "../e2ee/e2eeType";
 import { CallViewModel } from "../state/CallViewModel";
-import { mockLivekitRoom, mockMatrixRoom, MockRTCSession } from "./test";
+import {
+  mockLivekitRoom,
+  mockMatrixRoom,
+  mockMediaDevices,
+  MockRTCSession,
+} from "./test";
 import {
   aliceRtcMember,
   aliceParticipant,
@@ -132,6 +137,7 @@ export function getBasicCallViewModelEnvironment(
   const vm = new CallViewModel(
     rtcSession as unknown as MatrixRTCSession,
     liveKitRoom,
+    mockMediaDevices({}),
     {
       kind: E2eeType.PER_PARTICIPANT,
     },

src/utils/test.ts

@@ -47,6 +47,8 @@ import {
 } from "../config/ConfigOptions";
 import { Config } from "../config/Config";
 import { type MediaDevices } from "../state/MediaDevices";
+import { type Behavior, constant } from "../state/Behavior";
+import { ObservableScope } from "../state/ObservableScope";
 
 export function withFakeTimers(continuation: () => void): void {
   vi.useFakeTimers();
@@ -67,6 +69,11 @@ export interface OurRunHelpers extends RunHelpers {
    * diagram.
    */
   schedule: (marbles: string, actions: Record<string, () => void>) => void;
+  behavior<T = string>(
+    marbles: string,
+    values?: { [marble: string]: T },
+    error?: unknown,
+  ): Behavior<T>;
 }
 
 interface TestRunnerGlobal {
@@ -82,6 +89,7 @@ export function withTestScheduler(
   const scheduler = new TestScheduler((actual, expected) => {
     expect(actual).deep.equals(expected);
   });
+  const scope = new ObservableScope();
   // we set the test scheduler as a global so that you can watch it in a debugger
   // and get the frame number. e.g. `rxjsTestScheduler?.now()`
   (global as unknown as TestRunnerGlobal).rxjsTestScheduler = scheduler;
@@ -98,8 +106,36 @@ export function withTestScheduler(
         // Run the actions and verify that none of them error
         helpers.expectObservable(actionsObservable$).toBe(marbles, results);
       },
+      behavior<T>(
+        marbles: string,
+        values?: { [marble: string]: T },
+        error?: unknown,
+      ) {
+        // Generate a hot Observable with helpers.hot and use it as a Behavior.
+        // To do this, we need to ensure that the initial value emits
+        // synchronously upon subscription. The issue is that helpers.hot emits
+        // frame 0 of the marble diagram *asynchronously*, only once we return
+        // from the continuation, so we need to splice out the initial marble
+        // and turn it into a proper initial value.
+        const initialMarbleIndex = marbles.search(/[^ ]/);
+        if (initialMarbleIndex === -1)
+          throw new Error("Behavior must have an initial value");
+        const initialMarble = marbles[initialMarbleIndex];
+        const initialValue =
+          values === undefined ? (initialMarble as T) : values[initialMarble];
+        // The remainder of the marble diagram should start on frame 1
+        return scope.behavior(
+          helpers.hot(
+            `-${marbles.slice(initialMarbleIndex + 1)}`,
+            values,
+            error,
+          ),
+          initialValue,
+        );
+      },
     }),
   );
+  scope.end();
 }
 
 interface EmitterMock<T> {
@@ -211,14 +247,14 @@ export async function withLocalMedia(
   const vm = new LocalUserMediaViewModel(
     "local",
     mockMatrixRoomMember(localRtcMember, roomMember),
-    of(localParticipant),
+    constant(localParticipant),
     {
       kind: E2eeType.PER_PARTICIPANT,
     },
     mockLivekitRoom({ localParticipant }),
-    of(roomMember.rawDisplayName ?? "nodisplayname"),
-    of(null),
-    of(null),
+    constant(roomMember.rawDisplayName ?? "nodisplayname"),
+    constant(null),
+    constant(null),
   );
   try {
     await continuation(vm);
@@ -255,9 +291,9 @@ export async function withRemoteMedia(
       kind: E2eeType.PER_PARTICIPANT,
     },
     mockLivekitRoom({}, { remoteParticipants$: of([remoteParticipant]) }),
-    of(roomMember.rawDisplayName ?? "nodisplayname"),
-    of(null),
-    of(null),
+    constant(roomMember.rawDisplayName ?? "nodisplayname"),
+    constant(null),
+    constant(null),
   );
   try {
     await continuation(vm);
@@ -299,7 +335,7 @@ export class MockRTCSession extends TypedEventEmitter<
   }
 
   public withMemberships(
-    rtcMembers$: Observable<Partial<CallMembership>[]>,
+    rtcMembers$: Behavior<Partial<CallMembership>[]>,
   ): MockRTCSession {
     rtcMembers$.subscribe((m) => {
       const old = this.memberships;

src/widget.ts

@@ -106,6 +106,10 @@ export const widget = ((): WidgetHelpers | null => {
       if (!baseUrl) throw new Error("Base URL must be supplied");
 
       // These are all the event types the app uses
+      const sendEvent = [
+        EventType.CallNotify, // Sent as a deprecated fallback
+        EventType.RTCNotification,
+      ];
       const sendRecvEvent = [
         "org.matrix.rageshake_request",
         EventType.CallEncryptionKeysPrefix,
@@ -124,10 +128,12 @@ export const widget = ((): WidgetHelpers | null => {
       }));
       const receiveState = [
         { eventType: EventType.RoomCreate },
+        { eventType: EventType.RoomName },
         { eventType: EventType.RoomMember },
         { eventType: EventType.RoomEncryption },
         { eventType: EventType.GroupCallMemberPrefix },
       ];
+
       const sendRecvToDevice = [
         EventType.CallInvite,
         EventType.CallCandidates,
@@ -145,7 +151,7 @@ export const widget = ((): WidgetHelpers | null => {
       const client = createRoomWidgetClient(
         api,
         {
-          sendEvent: sendRecvEvent,
+          sendEvent: [...sendEvent, ...sendRecvEvent],
           receiveEvent: sendRecvEvent,
           sendState,
           receiveState,