Keep tiles in a stable order

This introduces a new layer of abstraction on top of MediaViewModel: TileViewModel, which gives us a place to store data relating to tiles rather than their media, and also generally makes it easier to reason about tiles as they move about the call layout. I have created a class called TileStore to keep track of these tiles. This allows us to swap out the media shown on a tile as the spotlight speaker changes, and avoid moving tiles around unless they really need to jump between the visible/invisible regions of the layout.
element-hq · Oct 18, 2024 · 217c57e · 217c57e
1 parent 75c7516
commit 217c57e
Show file tree

Hide file tree

Showing 21 changed files with 1,038 additions and 327 deletions.
diff --git a/src/grid/CallLayout.ts b/src/grid/CallLayout.ts
@@ -8,8 +8,8 @@ Please see LICENSE in the repository root for full details.
 import { BehaviorSubject, Observable } from "rxjs";
 import { ComponentType } from "react";
 
-import { MediaViewModel, UserMediaViewModel } from "../state/MediaViewModel";
 import { LayoutProps } from "./Grid";
+import { TileViewModel } from "../state/TileViewModel";
 
 export interface Bounds {
   width: number;
@@ -42,19 +42,6 @@ export interface CallLayoutInputs {
   pipAlignment: BehaviorSubject<Alignment>;
 }
 
-export interface GridTileModel {
-  type: "grid";
-  vm: UserMediaViewModel;
-}
-
-export interface SpotlightTileModel {
-  type: "spotlight";
-  vms: MediaViewModel[];
-  maximised: boolean;
-}
-
-export type TileModel = GridTileModel | SpotlightTileModel;
-
 export interface CallLayoutOutputs<Model> {
   /**
    * Whether the scrolling layer of the layout should appear on top.
@@ -63,11 +50,11 @@ export interface CallLayoutOutputs<Model> {
   /**
    * The visually fixed (non-scrolling) layer of the layout.
    */
-  fixed: ComponentType<LayoutProps<Model, TileModel, HTMLDivElement>>;
+  fixed: ComponentType<LayoutProps<Model, TileViewModel, HTMLDivElement>>;
   /**
    * The layer of the layout that can overflow and be scrolled.
    */
-  scrolling: ComponentType<LayoutProps<Model, TileModel, HTMLDivElement>>;
+  scrolling: ComponentType<LayoutProps<Model, TileViewModel, HTMLDivElement>>;
 }
 
 /**

diff --git a/src/grid/GridLayout.tsx b/src/grid/GridLayout.tsx
@@ -12,12 +12,7 @@ import { useObservableEagerState } from "observable-hooks";
 import { GridLayout as GridLayoutModel } from "../state/CallViewModel";
 import styles from "./GridLayout.module.css";
 import { useInitial } from "../useInitial";
-import {
-  CallLayout,
-  GridTileModel,
-  TileModel,
-  arrangeTiles,
-} from "./CallLayout";
+import { CallLayout, arrangeTiles } from "./CallLayout";
 import { DragCallback, useUpdateLayout } from "./Grid";
 
 interface GridCSSProperties extends CSSProperties {
@@ -49,15 +44,6 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
         ),
       ),
     );
-    const tileModel: TileModel | undefined = useMemo(
-      () =>
-        model.spotlight && {
-          type: "spotlight",
-          vms: model.spotlight,
-          maximised: false,
-        },
-      [model.spotlight],
-    );
 
     const onDragSpotlight: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
@@ -70,11 +56,11 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
 
     return (
       <div ref={ref} className={styles.fixed}>
-        {tileModel && (
+        {model.spotlight && (
           <Slot
             className={styles.slot}
             id="spotlight"
-            model={tileModel}
+            model={model.spotlight}
             onDrag={onDragSpotlight}
             data-block-alignment={alignment.block}
             data-inline-alignment={alignment.inline}
@@ -93,11 +79,6 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
       [width, minHeight, model.grid.length],
     );
 
-    const tileModels: GridTileModel[] = useMemo(
-      () => model.grid.map((vm) => ({ type: "grid", vm })),
-      [model.grid],
-    );
-
     return (
       <div
         ref={ref}
@@ -111,8 +92,8 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
           } as GridCSSProperties
         }
       >
-        {tileModels.map((m) => (
-          <Slot key={m.vm.id} className={styles.slot} id={m.vm.id} model={m} />
+        {model.grid.map((m) => (
+          <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
         ))}
       </div>
     );

diff --git a/src/grid/OneOnOneLayout.tsx b/src/grid/OneOnOneLayout.tsx
@@ -10,7 +10,7 @@ import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
-import { CallLayout, GridTileModel, arrangeTiles } from "./CallLayout";
+import { CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
 import { DragCallback, useUpdateLayout } from "./Grid";
 
@@ -38,15 +38,6 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
       [width, height],
     );
 
-    const remoteTileModel: GridTileModel = useMemo(
-      () => ({ type: "grid", vm: model.remote }),
-      [model.remote],
-    );
-    const localTileModel: GridTileModel = useMemo(
-      () => ({ type: "grid", vm: model.local }),
-      [model.local],
-    );
-
     const onDragLocalTile: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
         pipAlignment.next({
@@ -59,15 +50,15 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
     return (
       <div ref={ref} className={styles.layer}>
         <Slot
-          id={remoteTileModel.vm.id}
-          model={remoteTileModel}
+          id={model.remote.id}
+          model={model.remote}
           className={styles.container}
           style={{ width: tileWidth, height: tileHeight }}
         >
           <Slot
             className={classNames(styles.slot, styles.local)}
-            id={localTileModel.vm.id}
-            model={localTileModel}
+            id={model.local.id}
+            model={model.local}
             onDrag={onDragLocalTile}
             data-block-alignment={pipAlignmentValue.block}
             data-inline-alignment={pipAlignmentValue.inline}

diff --git a/src/grid/SpotlightExpandedLayout.tsx b/src/grid/SpotlightExpandedLayout.tsx
@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { forwardRef, useCallback, useMemo } from "react";
+import { forwardRef, useCallback } from "react";
 import { useObservableEagerState } from "observable-hooks";
 
 import { SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
-import { CallLayout, GridTileModel, SpotlightTileModel } from "./CallLayout";
+import { CallLayout } from "./CallLayout";
 import { DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
 
@@ -27,17 +27,13 @@ export const makeSpotlightExpandedLayout: CallLayout<
     ref,
   ) {
     useUpdateLayout();
-    const spotlightTileModel: SpotlightTileModel = useMemo(
-      () => ({ type: "spotlight", vms: model.spotlight, maximised: true }),
-      [model.spotlight],
-    );
 
     return (
       <div ref={ref} className={styles.layer}>
         <Slot
           className={styles.spotlight}
           id="spotlight"
-          model={spotlightTileModel}
+          model={model.spotlight}
         />
       </div>
     );
@@ -50,11 +46,6 @@ export const makeSpotlightExpandedLayout: CallLayout<
     useUpdateLayout();
     const pipAlignmentValue = useObservableEagerState(pipAlignment);
 
-    const pipTileModel: GridTileModel | undefined = useMemo(
-      () => model.pip && { type: "grid", vm: model.pip },
-      [model.pip],
-    );
-
     const onDragPip: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
         pipAlignment.next({
@@ -66,11 +57,11 @@ export const makeSpotlightExpandedLayout: CallLayout<
 
     return (
       <div ref={ref} className={styles.layer}>
-        {pipTileModel && (
+        {model.pip && (
           <Slot
             className={styles.pip}
-            id="pip"
-            model={pipTileModel}
+            id={model.pip.id}
+            model={model.pip}
             onDrag={onDragPip}
             data-block-alignment={pipAlignmentValue.block}
             data-inline-alignment={pipAlignmentValue.inline}

diff --git a/src/grid/SpotlightLandscapeLayout.tsx b/src/grid/SpotlightLandscapeLayout.tsx
@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { forwardRef, useMemo } from "react";
+import { forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { CallLayout, GridTileModel, TileModel } from "./CallLayout";
+import { CallLayout } from "./CallLayout";
 import { SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightLandscapeLayout.module.css";
 import { useUpdateLayout } from "./Grid";
@@ -30,19 +30,15 @@ export const makeSpotlightLandscapeLayout: CallLayout<
   ) {
     useUpdateLayout();
     useObservableEagerState(minBounds);
-    const tileModel: TileModel = useMemo(
-      () => ({
-        type: "spotlight",
-        vms: model.spotlight,
-        maximised: false,
-      }),
-      [model.spotlight],
-    );
 
     return (
       <div ref={ref} className={styles.layer}>
         <div className={styles.spotlight}>
-          <Slot className={styles.slot} id="spotlight" model={tileModel} />
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={model.spotlight}
+          />
         </div>
         <div className={styles.grid} />
       </div>
@@ -55,26 +51,19 @@ export const makeSpotlightLandscapeLayout: CallLayout<
   ) {
     useUpdateLayout();
     useObservableEagerState(minBounds);
-    const tileModels: GridTileModel[] = useMemo(
-      () => model.grid.map((vm) => ({ type: "grid", vm })),
-      [model.grid],
-    );
+    const withIndicators =
+      useObservableEagerState(model.spotlight.media).length > 1;
 
     return (
       <div ref={ref} className={styles.layer}>
         <div
           className={classNames(styles.spotlight, {
-            [styles.withIndicators]: model.spotlight.length > 1,
+            [styles.withIndicators]: withIndicators,
           })}
         />
         <div className={styles.grid}>
-          {tileModels.map((m) => (
-            <Slot
-              key={m.vm.id}
-              className={styles.slot}
-              id={m.vm.id}
-              model={m}
-            />
+          {model.grid.map((m) => (
+            <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
           ))}
         </div>
       </div>

diff --git a/src/grid/SpotlightPortraitLayout.tsx b/src/grid/SpotlightPortraitLayout.tsx
@@ -5,16 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { CSSProperties, forwardRef, useMemo } from "react";
+import { CSSProperties, forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import {
-  CallLayout,
-  GridTileModel,
-  TileModel,
-  arrangeTiles,
-} from "./CallLayout";
+import { CallLayout, arrangeTiles } from "./CallLayout";
 import { SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightPortraitLayout.module.css";
 import { useUpdateLayout } from "./Grid";
@@ -40,19 +35,15 @@ export const makeSpotlightPortraitLayout: CallLayout<
     ref,
   ) {
     useUpdateLayout();
-    const tileModel: TileModel = useMemo(
-      () => ({
-        type: "spotlight",
-        vms: model.spotlight,
-        maximised: true,
-      }),
-      [model.spotlight],
-    );
 
     return (
       <div ref={ref} className={styles.layer}>
         <div className={styles.spotlight}>
-          <Slot className={styles.slot} id="spotlight" model={tileModel} />
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={model.spotlight}
+          />
         </div>
       </div>
     );
@@ -71,10 +62,8 @@ export const makeSpotlightPortraitLayout: CallLayout<
       width,
       model.grid.length,
     );
-    const tileModels: GridTileModel[] = useMemo(
-      () => model.grid.map((vm) => ({ type: "grid", vm })),
-      [model.grid],
-    );
+    const withIndicators =
+      useObservableEagerState(model.spotlight.media).length > 1;
 
     return (
       <div
@@ -90,17 +79,12 @@ export const makeSpotlightPortraitLayout: CallLayout<
       >
         <div
           className={classNames(styles.spotlight, {
-            [styles.withIndicators]: model.spotlight.length > 1,
+            [styles.withIndicators]: withIndicators,
           })}
         />
         <div className={styles.grid}>
-          {tileModels.map((m) => (
-            <Slot
-              key={m.vm.id}
-              className={styles.slot}
-              id={m.vm.id}
-              model={m}
-            />
+          {model.grid.map((m) => (
+            <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
           ))}
         </div>
       </div>