Merge pull request #4367 from RaphaelFakhri/RaphaelFakhri/shared-key-storage-key

Read and write the room shared key under its single-prefixed storage key

docker-compose-playwright.yml

@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:79e47d8d5a93848403cb83042a405d8ed233a7727c499fa53b4b39a80f090be4
+    image: ghcr.io/element-hq/element-web:develop@sha256:ee8ce55012dda2c097147859aece32802ce7a9174e40c3711c56f75ccfe1b169
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:79e47d8d5a93848403cb83042a405d8ed233a7727c499fa53b4b39a80f090be4
+    image: ghcr.io/element-hq/element-web:develop@sha256:ee8ce55012dda2c097147859aece32802ce7a9174e40c3711c56f75ccfe1b169

src/components/CallFooterViewModel.test.ts

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

src/e2ee/sharedKeyManagement.test.ts

@@ -5,11 +5,24 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { afterEach, describe, expect, test } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import { E2eeType } from "@element-hq/matrixrtc-sdk";
 
-import { getKeyForRoom, saveKeyForRoom } from "./sharedKeyManagement";
+import {
+  getKeyForRoom,
+  saveKeyForRoom,
+  useRoomEncryptionSystem,
+} from "./sharedKeyManagement";
+
+vi.mock("../ClientContext", () => {
+  const room = { hasEncryptionStateEvent: (): boolean => false };
+  const client = { getRoom: (): typeof room => room };
+  return { useClient: (): { client: typeof client } => ({ client }) };
+});
 
 const roomId = "!room:example.org";
+const otherRoomId = "!other:example.org";
 
 describe("getKeyForRoom", () => {
   afterEach(() => {
@@ -33,4 +46,58 @@ describe("getKeyForRoom", () => {
   test("has no key to offer for a room it has never seen", () => {
     expect(getKeyForRoom(roomId)).toBeNull();
   });
+
+  test("prefers the stored key when the parameters are for another room", () => {
+    saveKeyForRoom(roomId, "stored");
+    window.location.hash = `#?roomId=${encodeURIComponent(otherRoomId)}&password=other-room`;
+
+    expect(getKeyForRoom(roomId)).toBe("stored");
+  });
+
+  test("ignores the password in the parameters for another room", () => {
+    window.location.hash = `#?roomId=${encodeURIComponent(otherRoomId)}&password=other-room`;
+
+    expect(getKeyForRoom(roomId)).toBeNull();
+  });
+});
+
+describe("useRoomEncryptionSystem", () => {
+  afterEach(() => {
+    window.location.hash = "#";
+    localStorage.clear();
+  });
+
+  test("picks up a key saved for the room after it rendered", () => {
+    const { result } = renderHook(() => useRoomEncryptionSystem(roomId));
+    expect(result.current).toEqual({ kind: E2eeType.NONE });
+
+    act(() => saveKeyForRoom(roomId, "stored"));
+
+    expect(result.current).toEqual({
+      kind: E2eeType.SHARED_KEY,
+      secret: "stored",
+    });
+  });
+
+  test("stores a key from the parameters under the room's key only", () => {
+    window.location.hash = `#?roomId=${encodeURIComponent(roomId)}&password=from-the-link`;
+
+    renderHook(() => useRoomEncryptionSystem(roomId));
+
+    expect(Object.keys(localStorage)).toEqual([`room-shared-key-${roomId}`]);
+    expect(getKeyForRoom(roomId)).toBe("from-the-link");
+  });
+
+  test("keeps the stored key when the parameters are for another room", () => {
+    saveKeyForRoom(roomId, "stored");
+    window.location.hash = `#?roomId=${encodeURIComponent(otherRoomId)}&password=other-room`;
+
+    const { result } = renderHook(() => useRoomEncryptionSystem(roomId));
+
+    expect(result.current).toEqual({
+      kind: E2eeType.SHARED_KEY,
+      secret: "stored",
+    });
+    expect(localStorage.getItem(`room-shared-key-${roomId}`)).toBe("stored");
+  });
 });

src/e2ee/sharedKeyManagement.ts

@@ -59,22 +59,27 @@ const useRoomSharedKey = (
 
 /**
  * The shared key for a room, preferring one supplied in the parameters Element
- * Call was started with over whatever is in local storage.
+ * Call was started with over whatever is in local storage. If the parameters
+ * are for another room, only the stored key is used, because the password in
+ * the parameters belongs to that other room.
  */
 function keyForRoom(
   roomId: string,
   paramsRoomId: string | null,
   password: string | null,
 ): string | null {
-  if (roomId !== paramsRoomId)
+  const storedKey = localStorage.getItem(
+    getRoomSharedKeyLocalStorageKey(roomId),
+  );
+  if (roomId !== paramsRoomId) {
     logger.warn(
       "requested key for a roomId which is not the current call room id (from the URL)",
       roomId,
       paramsRoomId,
     );
-  return (
-    password ?? localStorage.getItem(getRoomSharedKeyLocalStorageKey(roomId))
-  );
+    return storedKey;
+  }
+  return password ?? storedKey;
 }
 
 export function getKeyForRoom(roomId: string): string | null {
@@ -89,11 +94,7 @@ export function useRoomEncryptionSystem(roomId: string): EncryptionSystem {
   const { roomId: paramsRoomId, password } = useUrlParams();
 
   const [storedPassword] = useRoomSharedKey(
-    // TODO: this passes an already-prefixed key where a room ID is expected, so
-    // the local storage key ends up prefixed twice and never matches what
-    // saveKeyForRoom writes. Preserved as-is here to keep this commit a pure
-    // refactor; the reactive read is effectively dead until it is fixed.
-    getRoomSharedKeyLocalStorageKey(roomId),
+    roomId,
     keyForRoom(roomId, paramsRoomId, password) ?? undefined,
   );
 

src/grid/CallLayout.test.tsx

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

src/grid/Grid.tsx

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

src/grid/GridLayout.tsx

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

src/grid/OneOnOneDesktopLayout.tsx

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

src/grid/OneOnOneMobileLayout.tsx

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

src/grid/SpotlightExpandedLayout.tsx

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

src/grid/SpotlightLandscapeLayout.tsx

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

src/grid/SpotlightPortraitLayout.tsx

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

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

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

src/state/CallViewModel/CallViewModel.test.ts

@@ -155,7 +155,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
         case "grid":
           return combineLatest(
             [
-              l.spotlight?.media$ ?? constant(undefined),
+              l.spotlight?.vm.media$ ?? constant(undefined),
               ...l.grid.map((vm) => vm.media$),
             ],
             (spotlight, ...grid) => ({
@@ -167,7 +167,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
         case "spotlight-landscape":
         case "spotlight-portrait":
           return combineLatest(
-            [l.spotlight.media$, ...l.grid.map((vm) => vm.media$)],
+            [l.spotlight.vm.media$, ...l.grid.map((vm) => vm.media$)],
             (spotlight, ...grid) => ({
               type: l.type,
               spotlight: spotlight.map((vm) => vm.id),
@@ -176,7 +176,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           );
         case "spotlight-expanded":
           return combineLatest(
-            [l.spotlight.media$, l.pip?.media$ ?? constant(undefined)],
+            [l.spotlight.media$, l.pip?.vm.media$ ?? constant(undefined)],
             (spotlight, pip) => ({
               type: l.type,
               spotlight: spotlight.map((vm) => vm.id),
@@ -185,7 +185,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           );
         case "one-on-one-desktop":
           return combineLatest(
-            [l.spotlight.media$, l.pip.media$],
+            [l.spotlight.media$, l.pip.vm.media$],
             (spotlight, pip) => ({
               type: l.type,
               spotlight: spotlight.id,
@@ -196,8 +196,8 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           return combineLatest(
             [
               l.spotlight.media$,
-              l.pip?.media$ ?? constant(undefined),
-              l.pipSize$,
+              l.pip?.vm.media$ ?? constant(undefined),
+              l.pip?.size$ ?? constant(undefined),
             ],
             (spotlight, pip, pipSize) => ({
               type: l.type,
@@ -506,7 +506,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: "lg",
+                pipSize: undefined,
               },
               b: {
                 type: "one-on-one-mobile",
@@ -544,7 +544,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
               type: "one-on-one-mobile",
               spotlight: [`${aliceId}:0`],
               pip: undefined,
-              pipSize: "lg",
+              pipSize: undefined,
             },
           });
           // It wouldn't be clear whether Alice or Bob is the remote video tile,
@@ -592,7 +592,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: "sm",
+                pipSize: undefined,
               },
               b: {
                 type: "spotlight-landscape",
@@ -791,7 +791,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: "lg",
+                pipSize: undefined,
               },
               b: {
                 // In a larger window, expect the one-on-one desktop layout

src/state/CallViewModel/CallViewModel.ts

@@ -78,14 +78,13 @@ import {
   type ReactionInfo,
   type ReactionOption,
 } from "../../reactions";
-import { shallowEquals as shallowArrayEquals } from "../../utils/array";
-import { shallowEquals as shallowObjectEquals } from "../../utils/object";
+import { shallowEquals as arrayShallowEquals } from "../../utils/array";
 import { type MediaDevice, type MediaDevices } from "../MediaDevices";
 import { type Handler, type MuteStates } from "../MuteStates";
 import { HeaderStyle, type UrlParams } from "../../UrlParams";
 import { type HostBridge, nullHostBridge } from "../../HostBridge";
 import {
-  type Alignment,
+  layoutShallowEquals,
   type Layout,
   type LayoutMedia,
   type WindowMode,
@@ -126,6 +125,7 @@ import {
   type RingingMediaViewModel,
 } from "../media/RingingMediaViewModel.ts";
 import { type GridTileViewModel } from "../TileViewModel.ts";
+import { createFloatingTile } from "../FloatingTile.ts";
 
 /** How a call captures and encodes the tracks it publishes. */
 export interface CaptureSettings {
@@ -830,7 +830,7 @@ export function createCallViewModel$(
               bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m),
             );
       }),
-      distinctUntilChanged(shallowArrayEquals),
+      distinctUntilChanged(arrayShallowEquals),
     ),
   );
 
@@ -862,13 +862,18 @@ export function createCallViewModel$(
       [ringingMedia$, screenShares$, spotlightSpeaker$, localUserMediaForPip$],
       (ringing, screenShares, speaker, localPip) =>
         computeSpotlight({ ringing, screenShares, speaker, localPip }),
-    ).pipe(distinctUntilChanged(shallowObjectEquals)),
+    ).pipe(
+      distinctUntilChanged(
+        (a, b) =>
+          arrayShallowEquals(a.spotlight, b.spotlight) && a.pip === b.pip,
+      ),
+    ),
   );
 
   const spotlight$ = scope.behavior<MediaViewModel[]>(
     spotlightAndPip$.pipe(
       map(({ spotlight }) => spotlight),
-      distinctUntilChanged<MediaViewModel[]>(shallowArrayEquals),
+      distinctUntilChanged<MediaViewModel[]>(arrayShallowEquals),
     ),
   );
 
@@ -1029,7 +1034,7 @@ export function createCallViewModel$(
           desktop: platform === "desktop",
         }),
       ),
-      distinctUntilChanged(shallowObjectEquals<LayoutMedia>),
+      distinctUntilChanged(layoutShallowEquals),
     ),
   );
 
@@ -1221,32 +1226,28 @@ export function createCallViewModel$(
   );
 
   /**
-   * The alignment of the floating spotlight tile, if present.
+   * State of the floating spotlight tile, if present.
    */
-  const spotlightAlignment$ = new BehaviorSubject<Alignment>({
+  const floatingSpotlightTile = createFloatingTile(scope, {
     inline: "end",
     block: "end",
   });
   /**
-   * The size of the small picture-in-picture tile, if present, when in portrait.
+   * State of the small picture-in-picture tile, if present, when in landscape.
    */
-  const portraitPipSize$ = scope.behavior(
-    showFooter$.pipe(map((showFooter) => (showFooter ? "lg" : "sm"))),
-  );
-  /**
-   * The alignment of the small picture-in-picture tile, if present, when in portrait.
-   */
-  const portraitPipAlignment$ = new BehaviorSubject<Alignment>({
-    inline: "end",
-    block: "end",
-  });
-  /**
-   * The alignment of the small picture-in-picture tile, if present, when in landscape.
-   */
-  const landscapePipAlignment$ = new BehaviorSubject<Alignment>({
+  const landscapePipTile = createFloatingTile(scope, {
     inline: "end",
     block: "start",
   });
+  /**
+   * State of the small picture-in-picture tile, if present, when in portrait.
+   */
+  const portraitPipTile = {
+    ...createFloatingTile(scope, { inline: "end", block: "end" }),
+    size$: scope.behavior(
+      showFooter$.pipe(map((showFooter) => (showFooter ? "lg" : "sm"))),
+    ),
+  };
 
   // There is a cyclical dependency here: the layout algorithms want to know
   // which tiles are on screen, but to know which tiles are on screen we have to
@@ -1276,7 +1277,7 @@ export function createCallViewModel$(
             case "spotlight-portrait":
               [layout, newTiles] = gridLikeLayout(
                 media,
-                spotlightAlignment$,
+                floatingSpotlightTile,
                 visibleTiles,
                 setVisibleTiles,
                 prevTiles,
@@ -1286,26 +1287,25 @@ export function createCallViewModel$(
             case "spotlight-expanded":
               [layout, newTiles] = spotlightExpandedLayout(
                 media,
-                landscapePipAlignment$,
+                landscapePipTile,
                 prevTiles,
               );
               break;
             case "one-on-one-desktop":
               [layout, newTiles] = oneOnOneDesktopLayout(
                 media,
-                landscapePipAlignment$,
+                landscapePipTile,
                 prevTiles,
               );
-              pip = layout.pip;
+              pip = layout.pip.vm;
               break;
             case "one-on-one-mobile":
               [layout, newTiles] = oneOnOneMobileLayout(
                 media,
-                portraitPipSize$,
-                portraitPipAlignment$,
+                portraitPipTile,
                 prevTiles,
               );
-              pip = layout.pip;
+              pip = layout.pip?.vm;
               break;
             case "pip":
               [layout, newTiles] = pipLayout(media, prevTiles);
@@ -1330,7 +1330,7 @@ export function createCallViewModel$(
     layoutInternals$.pipe(
       map(({ layout }) => layout),
       // Drop redundant layout updates before they would hit React.
-      distinctUntilChanged(shallowObjectEquals<Layout>),
+      distinctUntilChanged(layoutShallowEquals),
     ),
   );
 

src/state/FloatingTile.test.ts

@@ -0,0 +1,38 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { test } from "vitest";
+import { withTestScheduler } from "../utils/test";
+import { createFloatingTile } from "./FloatingTile";
+
+test("FloatingTile changes alignment on drag", () =>
+  withTestScheduler(({ scope, expectObservable, schedule }) => {
+    // Tile starts in the top left
+    const { alignment$, onDrag } = createFloatingTile(scope, {
+      inline: "start",
+      block: "start",
+    });
+    // Drag to all four corners, and then repeatedly into the top left.
+    schedule("-↗↘↙↖↖", {
+      "↗": () =>
+        onDrag({ x: 100, y: 0, xRatio: 1, yRatio: 0, endOfGesture: false }),
+      "↘": () =>
+        onDrag({ x: 100, y: 100, xRatio: 1, yRatio: 1, endOfGesture: false }),
+      "↙": () =>
+        onDrag({ x: 0, y: 100, xRatio: 0, yRatio: 1, endOfGesture: false }),
+      "↖": () =>
+        onDrag({ x: 0, y: 0, xRatio: 0, yRatio: 0, endOfGesture: false }),
+    });
+    // Alignment should change accordingly. Notably, the alignment should *not*
+    // update when repeatedly dragged into the same corner, for performance.
+    expectObservable(alignment$).toBe("↖↗↘↙↖-", {
+      "↗": { inline: "end", block: "start" },
+      "↘": { inline: "end", block: "end" },
+      "↙": { inline: "start", block: "end" },
+      "↖": { inline: "start", block: "start" },
+    });
+  }));

src/state/FloatingTile.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { distinctUntilChanged, map, startWith, Subject } from "rxjs";
+
+import { type Behavior } from "./Behavior";
+import { type DragCallback, type Alignment, type Drag } from "./layout-types";
+import { type ObservableScope } from "./ObservableScope";
+
+/**
+ * Represents a floating tile which may be dragged to different corners of the
+ * call interface.
+ */
+export interface FloatingTile {
+  alignment$: Behavior<Alignment>;
+  onDrag: DragCallback;
+}
+
+export function createFloatingTile(
+  scope: ObservableScope,
+  defaultAlignment: Alignment,
+): FloatingTile {
+  const dragEvents$ = new Subject<Drag>();
+  return {
+    alignment$: scope.behavior(
+      dragEvents$.pipe(
+        map<Drag, Alignment>(({ xRatio, yRatio }) => ({
+          inline: xRatio < 0.5 ? "start" : "end",
+          block: yRatio < 0.5 ? "start" : "end",
+        })),
+        startWith(defaultAlignment),
+        distinctUntilChanged(
+          (a1, a2) => a1.inline === a2.inline && a1.block === a2.block,
+        ),
+      ),
+    ),
+    onDrag: (drag) => dragEvents$.next(drag),
+  };
+}

src/state/GridLikeLayout.ts

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

src/state/OneOnOneDesktopLayout.ts

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

src/state/OneOnOneMobileLayout.ts

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

src/state/SpotlightExpandedLayout.ts

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

src/state/layout-types.test.ts

@@ -0,0 +1,82 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { test, expect } from "vitest";
+import { layoutShallowEquals, type Layout } from "./layout-types";
+import {
+  type SpotlightTileViewModel,
+  type GridTileViewModel,
+} from "./TileViewModel";
+import { type FloatingTile } from "./FloatingTile";
+
+const spotlightTile = {} as unknown as SpotlightTileViewModel;
+const gridTile = {} as unknown as GridTileViewModel;
+const pipTile = {} as unknown as FloatingTile & { vm: GridTileViewModel };
+
+const spotlightExpanded: Layout = {
+  type: "spotlight-expanded",
+  spotlight: spotlightTile,
+};
+
+const spotlightPortrait: Layout = {
+  type: "spotlight-portrait",
+  spotlight: { vm: spotlightTile },
+  grid: [gridTile],
+  setVisibleTiles: () => {},
+};
+
+test("layoutShallowEquals considers a layout to be equal to its shallow clone", () =>
+  expect(layoutShallowEquals(spotlightExpanded, { ...spotlightExpanded })).toBe(
+    true,
+  ));
+
+test("layoutShallowEquals detects a missing key", () => {
+  expect(
+    layoutShallowEquals(spotlightExpanded, {
+      ...spotlightExpanded,
+      pip: pipTile,
+    }),
+  ).toBe(false);
+  expect(
+    layoutShallowEquals(
+      { ...spotlightExpanded, pip: pipTile },
+      spotlightExpanded,
+    ),
+  ).toBe(false);
+});
+
+test("layoutShallowEquals considers tile wrappers with equal contents to be equal", () =>
+  expect(
+    layoutShallowEquals(spotlightPortrait, {
+      ...spotlightPortrait,
+      spotlight: { vm: spotlightTile },
+    }),
+  ).toBe(true));
+
+test("layoutShallowEquals detects tile wrappers with different contents", () =>
+  expect(
+    layoutShallowEquals(spotlightPortrait, {
+      ...spotlightPortrait,
+      spotlight: { vm: {} as unknown as SpotlightTileViewModel },
+    }),
+  ).toBe(false));
+
+test("layoutShallowEquals considers grid arrays with equal contents to be equal", () =>
+  expect(
+    layoutShallowEquals(spotlightPortrait, {
+      ...spotlightPortrait,
+      grid: [...spotlightPortrait.grid],
+    }),
+  ).toBe(true));
+
+test("layoutShallowEquals detects grid arrays with different contents", () =>
+  expect(
+    layoutShallowEquals(spotlightPortrait, {
+      ...spotlightPortrait,
+      grid: [...spotlightPortrait.grid, gridTile],
+    }),
+  ).toBe(false));

src/state/layout-types.ts

@@ -5,8 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type BehaviorSubject } from "rxjs";
-
 import { type LocalUserMediaViewModel } from "./media/LocalUserMediaViewModel.ts";
 import { type MediaViewModel } from "./media/MediaViewModel.ts";
 import { type RingingMediaViewModel } from "./media/RingingMediaViewModel.ts";
@@ -16,6 +14,9 @@ import {
   type SpotlightTileViewModel,
 } from "./TileViewModel.ts";
 import { type Behavior } from "./Behavior.ts";
+import { type FloatingTile } from "./FloatingTile.ts";
+import { shallowEquals } from "../utils/object.ts";
+import { shallowEquals as arrayShallowEquals } from "../utils/array.ts";
 
 /**
  * The general shape of the space the call is drawn in. Called a window because
@@ -86,24 +87,48 @@ export interface Alignment {
   block: "start" | "end";
 }
 
+export interface Drag {
+  /**
+   * The X offset of the dragged tile relative to its container.
+   */
+  x: number;
+  /**
+   * The Y offset of the dragged tile relative to its container.
+   */
+  y: number;
+  /**
+   * The X coordinate of the dragged tile, as a scalar of the container's width.
+   */
+  xRatio: number;
+  /**
+   * The Y coordinate of the dragged tile, as a scalar of the container's height.
+   */
+  yRatio: number;
+  /**
+   * Whether this event ends the drag gesture.
+   */
+  endOfGesture: boolean;
+}
+
+export type DragCallback = (drag: Drag) => void;
+
 export interface GridLayout {
   type: "grid";
-  spotlight?: SpotlightTileViewModel;
+  spotlight?: FloatingTile & { vm: SpotlightTileViewModel };
   grid: GridTileViewModel[];
-  spotlightAlignment$: BehaviorSubject<Alignment>;
   setVisibleTiles: (value: number) => void;
 }
 
 export interface SpotlightLandscapeLayout {
   type: "spotlight-landscape";
-  spotlight: SpotlightTileViewModel;
+  spotlight: { vm: SpotlightTileViewModel };
   grid: GridTileViewModel[];
   setVisibleTiles: (value: number) => void;
 }
 
 export interface SpotlightPortraitLayout {
   type: "spotlight-portrait";
-  spotlight: SpotlightTileViewModel;
+  spotlight: { vm: SpotlightTileViewModel };
   grid: GridTileViewModel[];
   setVisibleTiles: (value: number) => void;
 }
@@ -111,23 +136,19 @@ export interface SpotlightPortraitLayout {
 export interface SpotlightExpandedLayout {
   type: "spotlight-expanded";
   spotlight: SpotlightTileViewModel;
-  pip?: GridTileViewModel;
-  pipAlignment$: BehaviorSubject<Alignment>;
+  pip?: FloatingTile & { vm: GridTileViewModel };
 }
 
 export interface OneOnOneDesktopLayout {
   type: "one-on-one-desktop";
   spotlight: GridTileViewModel;
-  pip: GridTileViewModel;
-  pipAlignment$: BehaviorSubject<Alignment>;
+  pip: FloatingTile & { vm: GridTileViewModel };
 }
 
 export interface OneOnOneMobileLayout {
   type: "one-on-one-mobile";
   spotlight: SpotlightTileViewModel;
-  pip?: GridTileViewModel;
-  pipSize$: Behavior<"sm" | "lg">;
-  pipAlignment$: BehaviorSubject<Alignment>;
+  pip?: FloatingTile & { vm: GridTileViewModel; size$: Behavior<"sm" | "lg"> };
 }
 
 export interface PipLayout {
@@ -147,3 +168,34 @@ export type Layout =
   | OneOnOneDesktopLayout
   | OneOnOneMobileLayout
   | PipLayout;
+
+/**
+ * Tests whether the top-level properties, tile wrapper properties, and array
+ * elements of layout `a` are equal to those of layout `b`. Useful for deduping
+ * redundant layout updates.
+ */
+export function layoutShallowEquals<T extends Layout | LayoutMedia>(
+  a: T,
+  b: T,
+): boolean {
+  return shallowEquals<T>(a, b, (aValue, bValue) => {
+    // Special case for tile wrapper objects so we can detect when the
+    // spotlight or PiP tile is essentially the same
+    if (
+      typeof aValue === "object" &&
+      aValue !== null &&
+      "vm" in aValue &&
+      typeof bValue === "object" &&
+      bValue !== null &&
+      "vm" in bValue
+    )
+      return shallowEquals(aValue, bValue);
+
+    // Special case for arrays so we can detect when the grid tile arrays are
+    // essentially the same
+    if (Array.isArray(aValue) && Array.isArray(bValue))
+      return arrayShallowEquals(aValue, bValue);
+
+    return aValue === bValue;
+  });
+}

src/state/media/MediaViewModel.test.ts

@@ -235,22 +235,35 @@ test("audio and video follow the tracks' mute state", () => {
 
 test("user media polls stream stats only while the setting is on", () => {
   onTestFinished(() => showConnectionStats.setValue(false));
+
   withTestScheduler(({ cold, expectObservable, schedule }) => {
     const stats = { type: "inbound-rtp" } as RTCInboundRtpStreamStats;
     const vm = mockRemoteMedia(rtcMembership, {}, [
-      mockAudioTrack({
-        stats$: () => cold("-s", { s: stats }),
-      }),
+      mockAudioTrack({ stats$: () => cold("-s", { s: { ...stats } }) }),
     ]);
-    schedule("-a-b", {
-      a() {
-        showConnectionStats.setValue(true);
-      },
-      b() {
-        showConnectionStats.setValue(false);
-      },
+    schedule("-t-f-t", {
+      t: () => showConnectionStats.setValue(true),
+      f: () => showConnectionStats.setValue(false),
     });
-    expectObservable(vm.audioStreamStats$).toBe("u-su", {
+
+    expectObservable(vm.audioStreamStats$).toBe("u-s---s", {
+      u: undefined,
+      s: stats,
+    });
+  });
+});
+
+test("stream stats can be enabled before creating media", () => {
+  showConnectionStats.setValue(true);
+  onTestFinished(() => showConnectionStats.setValue(false));
+
+  withTestScheduler(({ cold, expectObservable }) => {
+    const stats = { type: "inbound-rtp" } as RTCInboundRtpStreamStats;
+    const vm = mockRemoteMedia(rtcMembership, {}, [
+      mockAudioTrack({ stats$: () => cold("-s", { s: stats }) }),
+    ]);
+
+    expectObservable(vm.audioStreamStats$).toBe("us", {
       u: undefined,
       s: stats,
     });

src/state/media/UserMediaViewModel.ts

@@ -16,7 +16,9 @@ import {
   BehaviorSubject,
   combineLatest,
   map,
+  NEVER,
   of,
+  startWith,
   Subject,
   switchMap,
 } from "rxjs";
@@ -105,10 +107,9 @@ export function createBaseUserMedia(
         showConnectionStats.value$,
       ]).pipe(
         switchMap(([track, show]) =>
-          track !== undefined && show
-            ? track.stats$(statsIntervalMs)
-            : of(undefined),
+          track !== undefined && show ? track.stats$(statsIntervalMs) : NEVER,
         ),
+        startWith<MediaStreamStats>(undefined),
       ),
     );
 

src/utils/object.test.ts

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { test, expect } from "vitest";
 import { shallowEquals } from "./object";
+import { shallowEquals as arrayShallowEquals } from "./array";
 
 interface Thing {
   type: string;
@@ -29,12 +30,26 @@ test("shallowEquals detects a missing key", () => {
 test("shallowEquals detects a differing value", () =>
   expect(shallowEquals(withArray, { ...withArray, value: 2 })).toBe(false));
 
-test("shallowEquals considers arrays with equal contents to be equal", () =>
+const comparator = (aValue: unknown, bValue: unknown): boolean => {
+  if (Array.isArray(aValue) && Array.isArray(bValue))
+    return arrayShallowEquals(aValue, bValue);
+  return aValue === bValue;
+};
+
+test("shallowEquals with comparator considers arrays with equal contents to be equal", () =>
   expect(
-    shallowEquals(withArray, { ...withArray, items: [...withArray.items] }),
+    shallowEquals(
+      withArray,
+      { ...withArray, items: [...withArray.items] },
+      comparator,
+    ),
   ).toBe(true));
 
-test("shallowEquals detects arrays with different contents", () =>
+test("shallowEquals with comparator detects arrays with different contents", () =>
   expect(
-    shallowEquals(withArray, { ...withArray, items: [...withArray.items, {}] }),
+    shallowEquals(
+      withArray,
+      { ...withArray, items: [...withArray.items, {}] },
+      comparator,
+    ),
   ).toBe(false));

src/utils/object.ts

@@ -5,17 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { shallowEquals as arrayShallowEquals } from "./array.ts";
-
 /**
  * Determine whether two objects are equal by shallow comparison of their
- * top-level properties. Array-valued properties are themselves compared
- * shallowly, so two objects holding distinct arrays with the same elements are
- * considered equal.
+ * top-level properties, using the given `comparator`.
  */
 export function shallowEquals<T extends object>(
   a: Readonly<T>,
   b: Readonly<T>,
+  comparator: (aValue: unknown, bValue: unknown) => boolean = (
+    aValue,
+    bValue,
+  ) => aValue === bValue,
 ): boolean {
   // If a and b have the same number of keys and every key in a is also in b,
   // then they have the same keys.
@@ -29,9 +29,7 @@ export function shallowEquals<T extends object>(
     // Now check that they have the same values.
     const aValue = (a as any)[key];
     const bValue = (b as any)[key];
-    if (Array.isArray(aValue) && Array.isArray(bValue)) {
-      if (!arrayShallowEquals(aValue, bValue)) return false;
-    } else if (aValue !== bValue) return false;
+    if (!comparator(aValue, bValue)) return false;
   }
 
   return true;