Ellipsise app bar text on mobile

We already had text-overflow: ellipsis set on the title and subtitle elements of the app bar, but due to an annoying quirk of place-items: center, this had no effect. place-items: center stretch seems to give the text elements the right size constraints.

sdk/pnpm-lock.yaml

@@ -1,9 +0,0 @@
-lockfileVersion: '9.0'
-
-settings:
-  autoInstallPeers: false
-  excludeLinksFromLockfile: false
-
-importers:
-
-  .: {}

sdk/src/RTCParticipation.test.ts

@@ -12,7 +12,6 @@ import {
   MatrixRTCSessionEvent,
   MembershipManagerEvent,
   type Transport,
-  type UnstableLivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, EMPTY, Subject } from "rxjs";
 import { describe, expect, it, type Mock, vi } from "vitest";
@@ -47,16 +46,10 @@ import {
   MockRTCSession,
 } from "./utils/test";
 
-const transport: UnstableLivekitTransport = {
+const transport: Transport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
 };
-
-const transportWithAlias: Transport = {
-  livekit_alias: "!room:example.org",
-  ...transport,
-};
-
 const userId = "@alice:example.org";
 /** A token with the publish grant, as a homeserver issues it for its own SFU. */
 const publisherJWT = [
@@ -230,7 +223,7 @@ describe("createRTCParticipation", () => {
     await flushPromises();
     expect(join).toHaveBeenCalledWith(
       { userId, deviceId, memberId: legacyMemberId },
-      [transportWithAlias],
+      [transport],
       expect.objectContaining({
         manageMediaKeys: true,
         unstableSendStickyEvents: false,
@@ -326,7 +319,7 @@ describe("createRTCParticipation", () => {
     await flushPromises();
     expect(join).toHaveBeenCalledWith(
       expect.anything(),
-      [transportWithAlias],
+      [transport],
       expect.objectContaining({ delayedLeaveEventDelayMs: 7_200_000 }),
     );
     expect(fake.delegateDelayedLeave).not.toHaveBeenCalled();

sdk/src/RTCParticipation.ts

@@ -174,20 +174,14 @@ export function createRTCParticipation(
       timings.syncDisconnectGracePeriodMs,
     ),
     joinMatrixRTC: (transport, delayedLeave) =>
-      joinJsSdkSession(
-        room.roomId,
-        jsSdkSession,
-        ownMembershipIdentity,
-        transport,
-        {
-          encryptMedia: encryptionSystem.kind !== E2eeType.NONE,
-          matrixRTCMode,
-          sendNotificationType: options.sendNotificationType,
-          applicationData: options.applicationData,
-          timings,
-          delayedLeave,
-        },
-      ),
+      joinJsSdkSession(jsSdkSession, ownMembershipIdentity, transport, {
+        encryptMedia: encryptionSystem.kind !== E2eeType.NONE,
+        matrixRTCMode,
+        sendNotificationType: options.sendNotificationType,
+        applicationData: options.applicationData,
+        timings,
+        delayedLeave,
+      }),
     membershipManagerError$: fromEvent(
       jsSdkSession,
       MatrixRTCSessionEvent.MembershipManagerError,

sdk/src/matrixrtc/joinJsSdkSession.test.ts

@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  type UnstableLivekitTransport,
   type MatrixRTCSession,
   type Transport,
 } from "matrix-js-sdk/lib/matrixrtc";
@@ -16,16 +15,11 @@ import { defaultSessionTimings, MatrixRTCMode } from "../config";
 import { ownMemberMock } from "../utils/test";
 import { joinJsSdkSession } from "./joinJsSdkSession";
 
-const transport: UnstableLivekitTransport = {
+const transport: Transport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
 };
 
-const transportWithAlias: Transport = {
-  livekit_alias: "!room:example.org",
-  ...transport,
-};
-
 /** A session that only records the join; nothing else of it is touched. */
 function session(): MatrixRTCSession & {
   join: Mock<MatrixRTCSession["join"]>;
@@ -45,7 +39,7 @@ describe("joinJsSdkSession", () => {
       keyRotationParticipantLimit: 20,
     };
 
-    joinJsSdkSession("!room:example.org", s, ownMemberMock, transport, {
+    joinJsSdkSession(s, ownMemberMock, transport, {
       encryptMedia: true,
       matrixRTCMode: MatrixRTCMode.Compatibility,
       sendNotificationType: "ring",
@@ -57,7 +51,7 @@ describe("joinJsSdkSession", () => {
       },
     });
 
-    expect(s.join).toHaveBeenCalledWith(ownMemberMock, [transportWithAlias], {
+    expect(s.join).toHaveBeenCalledWith(ownMemberMock, [transport], {
       notificationType: "ring",
       callIntent: undefined,
       applicationData: {},
@@ -78,7 +72,7 @@ describe("joinJsSdkSession", () => {
   it("gives up on the network once the delayed leave has probably been sent", () => {
     const s = session();
 
-    joinJsSdkSession("!room:example.org", s, ownMemberMock, transport, {
+    joinJsSdkSession(s, ownMemberMock, transport, {
       encryptMedia: false,
       matrixRTCMode: MatrixRTCMode.Compatibility,
       timings: { ...defaultSessionTimings, networkErrorRetryMs: 4_000 },
@@ -87,7 +81,7 @@ describe("joinJsSdkSession", () => {
 
     expect(s.join).toHaveBeenCalledWith(
       ownMemberMock,
-      [transportWithAlias],
+      [transport],
       expect.objectContaining({
         manageMediaKeys: false,
         maximumNetworkErrorRetryCount: 4,
@@ -98,30 +92,7 @@ describe("joinJsSdkSession", () => {
   it("lifts the call intent out of the application data and sends sticky events in Matrix 2.0 mode", () => {
     const s = session();
 
-    joinJsSdkSession("!room:example.org", s, ownMemberMock, transport, {
-      encryptMedia: true,
-      matrixRTCMode: MatrixRTCMode.Matrix_2_0,
-      applicationData: { "m.call.intent": "audio", custom: 1 },
-      timings: defaultSessionTimings,
-      delayedLeave: defaultSessionTimings.delayedLeave,
-    });
-
-    expect(s.join).toHaveBeenCalledWith(
-      ownMemberMock,
-      [transportWithAlias],
-      expect.objectContaining({
-        callIntent: "audio",
-        applicationData: { custom: 1 },
-        unstableSendStickyEvents: true,
-      }),
-    );
-  });
-
-  it("does not add livekit_alias to newer transport format", () => {
-    const s = session();
-    const transport = { type: "livekit", url: "wss://lk.example.org" };
-
-    joinJsSdkSession("!room:example.org", s, ownMemberMock, transport, {
+    joinJsSdkSession(s, ownMemberMock, transport, {
       encryptMedia: true,
       matrixRTCMode: MatrixRTCMode.Matrix_2_0,
       applicationData: { "m.call.intent": "audio", custom: 1 },

sdk/src/matrixrtc/joinJsSdkSession.ts

@@ -35,7 +35,6 @@ interface Options {
  * @throws If the join could not be started.
  */
 export function joinJsSdkSession(
-  roomId: string,
   session: JsSdkRTCSession,
   ownMembershipIdentity: CallMembershipIdentityParts,
   transport: Transport,
@@ -59,37 +58,20 @@ export function joinJsSdkSession(
     timings.syncDisconnectGracePeriodMs,
     delayedLeave.delay_ms,
   );
-
-  session.join(
-    ownMembershipIdentity,
-    // TODO: `livekit_alias` should be unused these days, but some Ruma-based
-    // clients still expect it to be present. Remove from `publishedTransports`
-    // as soon as https://github.com/ruma/ruma/pull/2642 and
-    // https://github.com/matrix-org/matrix-rust-sdk/pull/7335 are widely
-    // deployed.
-    [
-      {
-        ...("livekit_service_url" in transport
-          ? { livekit_alias: roomId }
-          : {}),
-        ...transport,
-      },
-    ],
-    {
-      notificationType: sendNotificationType,
-      callIntent,
-      applicationData: rest,
-      manageMediaKeys: encryptMedia,
-      delayedLeaveEventRestartMs: delayedLeave.restart_ms,
-      delayedLeaveEventDelayMs: delayedLeave.delay_ms,
-      delayedLeaveEventRestartLocalTimeoutMs: delayedLeave.restart_timeout_ms,
-      networkErrorRetryMs: timings.networkErrorRetryMs,
-      makeKeyDelay: timings.waitForKeyRotationMs,
-      membershipEventExpiryMs: timings.membershipEventExpiryMs,
-      keyRotationParticipantLimit: timings.keyRotationParticipantLimit,
-      unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
-      maximumNetworkErrorRetryCount:
-        Math.ceil(maxWaitMs / timings.networkErrorRetryMs) + 1,
-    },
-  );
+  session.join(ownMembershipIdentity, [transport], {
+    notificationType: sendNotificationType,
+    callIntent,
+    applicationData: rest,
+    manageMediaKeys: encryptMedia,
+    delayedLeaveEventRestartMs: delayedLeave.restart_ms,
+    delayedLeaveEventDelayMs: delayedLeave.delay_ms,
+    delayedLeaveEventRestartLocalTimeoutMs: delayedLeave.restart_timeout_ms,
+    networkErrorRetryMs: timings.networkErrorRetryMs,
+    makeKeyDelay: timings.waitForKeyRotationMs,
+    membershipEventExpiryMs: timings.membershipEventExpiryMs,
+    keyRotationParticipantLimit: timings.keyRotationParticipantLimit,
+    unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
+    maximumNetworkErrorRetryCount:
+      Math.ceil(maxWaitMs / timings.networkErrorRetryMs) + 1,
+  });
 }

src/AppBar.module.css

@@ -7,6 +7,7 @@
   padding-top: env(safe-area-inset-top);
   opacity: 1;
   transition: opacity 0.15s;
+  text-align: center;
 }
 
 /* Pseudo-element for the gradient background */
@@ -52,7 +53,7 @@
     ". . ."
     "primaryButton title secondaryButton"
     ". . .";
-  place-items: center;
+  place-items: center stretch;
   column-gap: var(--cpd-space-2x);
 }
 

src/components/CallFooterViewModel.test.ts

@@ -6,11 +6,12 @@ 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 { Layout } from "../state/layout-types";
+import type { Alignment, Layout } from "../state/layout-types";
 import type { SpotlightTileViewModel } from "../state/TileViewModel";
 import type { DeviceLabel } from "../state/MediaDevices";
 import { createCallFooterViewModel } from "./CallFooterViewModel";
@@ -64,6 +65,10 @@ function buildMinimalCallViewModel(layout: Layout): CallViewModel {
 const gridLayout: Layout = {
   type: "grid",
   grid: [],
+  spotlightAlignment$: new BehaviorSubject<Alignment>({
+    inline: "end",
+    block: "end",
+  }),
   setVisibleTiles: (_: number) => {},
 };
 

src/grid/CallLayout.test.tsx

@@ -5,25 +5,28 @@ 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 { expect, test, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import { BehaviorSubject } from "rxjs";
+import { describe, expect, it, vi } from "vitest";
 
-import { type CallLayout } from "./CallLayout";
+import { arrangeTiles, type Bounds } from "./CallLayout";
 import { makeGridLayout } from "./GridLayout";
 import { makeSpotlightLandscapeLayout } from "./SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "./SpotlightPortraitLayout";
-import { type LayoutProps } from "./Grid";
+import { type DragCallback, type LayoutProps } from "./Grid";
 import { constant } from "../state/Behavior";
-import { type Alignment } from "../state/layout-types";
+import {
+  type Alignment,
+  type GridLayout,
+  type SpotlightLandscapeLayout,
+  type SpotlightPortraitLayout,
+} from "../state/layout-types";
 import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
 import {
   GridTileViewModel,
   SpotlightTileViewModel,
   type TileViewModel,
 } from "../state/TileViewModel";
-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
@@ -33,105 +36,152 @@ vi.mock("./Grid", async (importOriginal) => ({
   useVisibleTiles: (): void => {},
 }));
 
-const minBounds$ = constant({ width: 800, height: 800 });
+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 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)),
+    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 pip = {
-  alignment$: constant<Alignment>({ inline: "end", block: "end" }),
-  onDrag: () => {},
-  vm: { id: "pip" } as GridTileViewModel,
-  size$: constant("sm" as const),
-};
+const tiles = (): GridTileViewModel[] =>
+  Array.from({ length: 3 }, () => new GridTileViewModel(constant(media)));
 
+function gridModel(): GridLayout {
+  return {
+    type: "grid",
+    spotlight,
+    grid: tiles(),
+    spotlightAlignment$: new BehaviorSubject<Alignment>({
+      inline: "end",
+      block: "end",
+    }),
+    setVisibleTiles: () => {},
+  };
+}
+
+function landscapeModel(): SpotlightLandscapeLayout {
+  return {
+    type: "spotlight-landscape",
+    spotlight,
+    grid: tiles(),
+    setVisibleTiles: () => {},
+  };
+}
+
+function portraitModel(): SpotlightPortraitLayout {
+  return {
+    type: "spotlight-portrait",
+    spotlight,
+    grid: tiles(),
+    setVisibleTiles: () => {},
+  };
+}
+
+// Slots record their drag callback so a test can drag them, and show the id
+// of the tile they hold
+const drags = new Map<string, DragCallback | undefined>();
 const Slot: LayoutProps<unknown, TileViewModel, HTMLDivElement>["Slot"] = ({
   id,
   model,
   onDrag,
-  children,
   ...props
-}) => (
-  <div data-testid={`slot-${id}`} {...props}>
-    {children}
-  </div>
-);
-
-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}
-      </>
-    ),
+}) => {
+  drags.set(id, onDrag);
+  return (
+    <div data-testid={`slot-${id}`} {...props}>
+      {model instanceof GridTileViewModel ? model.id : "spotlight"}
+    </div>
   );
-  expect(container).toMatchSnapshot();
+};
+
+function slotIds(): string[] {
+  return screen
+    .getAllByTestId(/^slot-/)
+    .map((slot) => slot.textContent ?? "")
+    .filter((id) => id !== "spotlight");
 }
-
-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,7 +40,6 @@ 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
 
@@ -84,10 +83,7 @@ interface DragState {
   cursorY: number;
 }
 
-export interface SlotProps<Model> extends Omit<
-  ComponentProps<"div">,
-  "onDrag"
-> {
+interface SlotProps<Model> extends Omit<ComponentProps<"div">, "onDrag"> {
   id: string;
   model: Model;
   onDrag?: DragCallback;
@@ -185,6 +181,27 @@ 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,
@@ -447,13 +464,13 @@ export function Grid<
       )
       .catch(logger.error);
 
-    callback({
-      x: tileX,
-      y: tileY,
-      xRatio: tileX / (gridBounds.width - tile.width),
-      yRatio: tileY / (gridBounds.height - tile.height),
-      endOfGesture,
-    });
+    if (endOfGesture)
+      callback({
+        x: tileX,
+        y: tileY,
+        xRatio: tileX / (gridBounds.width - tile.width),
+        yRatio: tileY / (gridBounds.height - tile.height),
+      });
   };
 
   // Callback for useDrag. We could call useDrag here, but the default

src/grid/GridLayout.tsx

@@ -8,21 +8,15 @@ 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 SlotProps, useUpdateLayout, useVisibleTiles } from "./Grid";
+import { type DragCallback, 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;
@@ -30,27 +24,6 @@ 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.
@@ -64,10 +37,32 @@ 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 && (
-          <SpotlightSlot model={model.spotlight} Slot={Slot} />
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={model.spotlight}
+            onDrag={onDragSpotlight}
+            data-block-alignment={alignment.block}
+            data-inline-alignment={alignment.inline}
+          />
         )}
       </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, useMemo } from "react";
+import { type ReactNode, useCallback, 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 { useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
 
 /**
@@ -37,12 +37,21 @@ export const makeOneOnOneDesktopLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     const { width, height } = useBehavior(minBounds$);
-    const pipAlignment = useBehavior(model.pip.alignment$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
     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
@@ -53,9 +62,9 @@ export const makeOneOnOneDesktopLayout: CallLayout<
         >
           <Slot
             className={classNames(styles.slot, styles.local)}
-            id={model.pip.vm.id}
-            model={model.pip.vm}
-            onDrag={model.pip.onDrag}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragLocalTile}
             data-block-alignment={pipAlignment.block}
             data-inline-alignment={pipAlignment.inline}
           />

src/grid/OneOnOneMobileLayout.tsx

@@ -6,43 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ComponentType, type FC, type ReactNode } from "react";
+import { type ReactNode, useCallback } 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 SlotProps, useUpdateLayout } from "./Grid";
+import { type DragCallback, 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
@@ -73,9 +44,30 @@ 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 && <PipSlot model={model.pip} Slot={Slot} />}
+        {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}
+          />
+        )}
       </div>
     );
   },

src/grid/SpotlightExpandedLayout.tsx

@@ -5,39 +5,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, type ComponentType, type FC } from "react";
+import { type ReactNode, useCallback } from "react";
 
 import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
-import { type SlotProps, useUpdateLayout } from "./Grid";
+import { type DragCallback, 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
@@ -54,6 +28,7 @@ export const makeSpotlightExpandedLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
+
     return (
       <div ref={ref} className={styles.layer}>
         <Slot
@@ -71,9 +46,29 @@ 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 && <PipSlot model={model.pip} Slot={Slot} />}
+        {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}
+          />
+        )}
       </div>
     );
   },

src/grid/SpotlightLandscapeLayout.tsx

@@ -40,7 +40,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
           <Slot
             className={styles.slot}
             id="spotlight"
-            model={model.spotlight.vm}
+            model={model.spotlight}
           />
         </div>
         <div className={styles.grid} />
@@ -59,7 +59,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
 
     return (
       <div ref={ref} className={styles.layer}>
-        <SpotlightSlot media$={model.spotlight.vm.media$} />
+        <SpotlightSlot media$={model.spotlight.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.vm}
+            model={model.spotlight}
           />
         </div>
       </div>
@@ -65,7 +65,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
       width,
       model.grid.length,
     );
-    const withIndicators = useBehavior(model.spotlight.vm.media$).length > 1;
+    const withIndicators = useBehavior(model.spotlight.media$).length > 1;
 
     return (
       <div

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

@@ -1,186 +0,0 @@
-// 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?.vm.media$ ?? constant(undefined),
+              l.spotlight?.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.vm.media$, ...l.grid.map((vm) => vm.media$)],
+            [l.spotlight.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?.vm.media$ ?? constant(undefined)],
+            [l.spotlight.media$, l.pip?.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.vm.media$],
+            [l.spotlight.media$, l.pip.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?.vm.media$ ?? constant(undefined),
-              l.pip?.size$ ?? constant(undefined),
+              l.pip?.media$ ?? constant(undefined),
+              l.pipSize$,
             ],
             (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: undefined,
+                pipSize: "lg",
               },
               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: undefined,
+              pipSize: "lg",
             },
           });
           // 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: undefined,
+                pipSize: "sm",
               },
               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: undefined,
+                pipSize: "lg",
               },
               b: {
                 // In a larger window, expect the one-on-one desktop layout

src/state/CallViewModel/CallViewModel.ts

@@ -78,13 +78,14 @@ import {
   type ReactionInfo,
   type ReactionOption,
 } from "../../reactions";
-import { shallowEquals as arrayShallowEquals } from "../../utils/array";
+import { shallowEquals as shallowArrayEquals } from "../../utils/array";
+import { shallowEquals as shallowObjectEquals } from "../../utils/object";
 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 {
-  layoutShallowEquals,
+  type Alignment,
   type Layout,
   type LayoutMedia,
   type WindowMode,
@@ -125,7 +126,6 @@ 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(arrayShallowEquals),
+      distinctUntilChanged(shallowArrayEquals),
     ),
   );
 
@@ -862,18 +862,13 @@ export function createCallViewModel$(
       [ringingMedia$, screenShares$, spotlightSpeaker$, localUserMediaForPip$],
       (ringing, screenShares, speaker, localPip) =>
         computeSpotlight({ ringing, screenShares, speaker, localPip }),
-    ).pipe(
-      distinctUntilChanged(
-        (a, b) =>
-          arrayShallowEquals(a.spotlight, b.spotlight) && a.pip === b.pip,
-      ),
-    ),
+    ).pipe(distinctUntilChanged(shallowObjectEquals)),
   );
 
   const spotlight$ = scope.behavior<MediaViewModel[]>(
     spotlightAndPip$.pipe(
       map(({ spotlight }) => spotlight),
-      distinctUntilChanged<MediaViewModel[]>(arrayShallowEquals),
+      distinctUntilChanged<MediaViewModel[]>(shallowArrayEquals),
     ),
   );
 
@@ -1034,7 +1029,7 @@ export function createCallViewModel$(
           desktop: platform === "desktop",
         }),
       ),
-      distinctUntilChanged(layoutShallowEquals),
+      distinctUntilChanged(shallowObjectEquals<LayoutMedia>),
     ),
   );
 
@@ -1226,28 +1221,32 @@ export function createCallViewModel$(
   );
 
   /**
-   * State of the floating spotlight tile, if present.
+   * The alignment of the floating spotlight tile, if present.
    */
-  const floatingSpotlightTile = createFloatingTile(scope, {
+  const spotlightAlignment$ = new BehaviorSubject<Alignment>({
     inline: "end",
     block: "end",
   });
   /**
-   * State of the small picture-in-picture tile, if present, when in landscape.
+   * The size of the small picture-in-picture tile, if present, when in portrait.
    */
-  const landscapePipTile = createFloatingTile(scope, {
+  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>({
     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
@@ -1277,7 +1276,7 @@ export function createCallViewModel$(
             case "spotlight-portrait":
               [layout, newTiles] = gridLikeLayout(
                 media,
-                floatingSpotlightTile,
+                spotlightAlignment$,
                 visibleTiles,
                 setVisibleTiles,
                 prevTiles,
@@ -1287,25 +1286,26 @@ export function createCallViewModel$(
             case "spotlight-expanded":
               [layout, newTiles] = spotlightExpandedLayout(
                 media,
-                landscapePipTile,
+                landscapePipAlignment$,
                 prevTiles,
               );
               break;
             case "one-on-one-desktop":
               [layout, newTiles] = oneOnOneDesktopLayout(
                 media,
-                landscapePipTile,
+                landscapePipAlignment$,
                 prevTiles,
               );
-              pip = layout.pip.vm;
+              pip = layout.pip;
               break;
             case "one-on-one-mobile":
               [layout, newTiles] = oneOnOneMobileLayout(
                 media,
-                portraitPipTile,
+                portraitPipSize$,
+                portraitPipAlignment$,
                 prevTiles,
               );
-              pip = layout.pip?.vm;
+              pip = layout.pip;
               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(layoutShallowEquals),
+      distinctUntilChanged(shallowObjectEquals<Layout>),
     ),
   );
 

src/state/FloatingTile.test.ts

@@ -1,38 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { test } 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

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

src/state/OneOnOneDesktopLayout.ts

@@ -6,19 +6,21 @@ 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,
-  pipTile: FloatingTile,
+  pipAlignment$: BehaviorSubject<Alignment>,
   prevTiles: TileStore,
 ): [OneOnOneDesktopLayout, TileStore] {
   const update = prevTiles.from(2);
@@ -30,7 +32,8 @@ export function oneOnOneDesktopLayout(
     {
       type: media.type,
       spotlight: tiles.gridTilesByMedia.get(media.spotlight)!,
-      pip: { vm: tiles.gridTilesByMedia.get(media.pip)!, ...pipTile },
+      pip: tiles.gridTilesByMedia.get(media.pip)!,
+      pipAlignment$,
     },
     tiles,
   ];

src/state/OneOnOneMobileLayout.ts

@@ -6,20 +6,23 @@ 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,
-  pipTile: FloatingTile & { size$: Behavior<"sm" | "lg"> },
+  pipSize$: Behavior<"sm" | "lg">,
+  pipAlignment$: BehaviorSubject<Alignment>,
   prevTiles: TileStore,
 ): [OneOnOneMobileLayout, TileStore] {
   const update = prevTiles.from(media.pip === undefined ? 0 : 1);
@@ -27,12 +30,13 @@ 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: pipVm && { vm: pipVm, ...pipTile },
+      pip: media.pip && tiles.gridTilesByMedia.get(media.pip),
+      pipSize$,
+      pipAlignment$,
     },
     tiles,
   ];

src/state/SpotlightExpandedLayout.ts

@@ -5,19 +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 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,
-  pipTile: FloatingTile,
+  pipAlignment$: BehaviorSubject<Alignment>,
   prevTiles: TileStore,
 ): [SpotlightExpandedLayout, TileStore] {
   const update = prevTiles.from(1);
@@ -25,12 +27,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: pipVm && { vm: pipVm, ...pipTile },
+      pip: tiles.gridTiles.at(0),
+      pipAlignment$,
     },
     tiles,
   ];

src/state/layout-types.test.ts

@@ -1,82 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { 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,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type BehaviorSubject } from "rxjs";
+
 import { type LocalUserMediaViewModel } from "./media/LocalUserMediaViewModel.ts";
 import { type MediaViewModel } from "./media/MediaViewModel.ts";
 import { type RingingMediaViewModel } from "./media/RingingMediaViewModel.ts";
@@ -14,9 +16,6 @@ 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
@@ -87,48 +86,24 @@ 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?: FloatingTile & { vm: SpotlightTileViewModel };
+  spotlight?: SpotlightTileViewModel;
   grid: GridTileViewModel[];
+  spotlightAlignment$: BehaviorSubject<Alignment>;
   setVisibleTiles: (value: number) => void;
 }
 
 export interface SpotlightLandscapeLayout {
   type: "spotlight-landscape";
-  spotlight: { vm: SpotlightTileViewModel };
+  spotlight: SpotlightTileViewModel;
   grid: GridTileViewModel[];
   setVisibleTiles: (value: number) => void;
 }
 
 export interface SpotlightPortraitLayout {
   type: "spotlight-portrait";
-  spotlight: { vm: SpotlightTileViewModel };
+  spotlight: SpotlightTileViewModel;
   grid: GridTileViewModel[];
   setVisibleTiles: (value: number) => void;
 }
@@ -136,19 +111,23 @@ export interface SpotlightPortraitLayout {
 export interface SpotlightExpandedLayout {
   type: "spotlight-expanded";
   spotlight: SpotlightTileViewModel;
-  pip?: FloatingTile & { vm: GridTileViewModel };
+  pip?: GridTileViewModel;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }
 
 export interface OneOnOneDesktopLayout {
   type: "one-on-one-desktop";
   spotlight: GridTileViewModel;
-  pip: FloatingTile & { vm: GridTileViewModel };
+  pip: GridTileViewModel;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }
 
 export interface OneOnOneMobileLayout {
   type: "one-on-one-mobile";
   spotlight: SpotlightTileViewModel;
-  pip?: FloatingTile & { vm: GridTileViewModel; size$: Behavior<"sm" | "lg"> };
+  pip?: GridTileViewModel;
+  pipSize$: Behavior<"sm" | "lg">;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }
 
 export interface PipLayout {
@@ -168,34 +147,3 @@ 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/utils/object.test.ts

@@ -7,7 +7,6 @@ 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;
@@ -30,26 +29,12 @@ test("shallowEquals detects a missing key", () => {
 test("shallowEquals detects a differing value", () =>
   expect(shallowEquals(withArray, { ...withArray, value: 2 })).toBe(false));
 
-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", () =>
+test("shallowEquals considers arrays with equal contents to be equal", () =>
   expect(
-    shallowEquals(
-      withArray,
-      { ...withArray, items: [...withArray.items] },
-      comparator,
-    ),
+    shallowEquals(withArray, { ...withArray, items: [...withArray.items] }),
   ).toBe(true));
 
-test("shallowEquals with comparator detects arrays with different contents", () =>
+test("shallowEquals detects arrays with different contents", () =>
   expect(
-    shallowEquals(
-      withArray,
-      { ...withArray, items: [...withArray.items, {}] },
-      comparator,
-    ),
+    shallowEquals(withArray, { ...withArray, items: [...withArray.items, {}] }),
   ).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, using the given `comparator`.
+ * top-level properties. Array-valued properties are themselves compared
+ * shallowly, so two objects holding distinct arrays with the same elements are
+ * considered equal.
  */
 export function shallowEquals<T extends object>(
   a: Readonly<T>,
   b: Readonly<T>,
-  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,7 +29,9 @@ 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 (!comparator(aValue, bValue)) return false;
+    if (Array.isArray(aValue) && Array.isArray(bValue)) {
+      if (!arrayShallowEquals(aValue, bValue)) return false;
+    } else if (aValue !== bValue) return false;
   }
 
   return true;