Implement the new unified grid layout

Here I've implemented an MVP for the new unified grid layout, which scales smoothly up to arbitrarily many participants. It doesn't yet have a special 1:1 layout, so in spotlight mode and 1:1s, we will still fall back to the legacy grid systems.

Things that happened along the way:
- The part of VideoTile that is common to both spotlight and grid tiles, I refactored into MediaView
- VideoTile renamed to GridTile
- Added SpotlightTile for the new, glassy spotlight designs
- NewVideoGrid renamed to Grid, and refactored to be even more generic
- I extracted the media name logic into a custom React hook
- Deleted the BigGrid experiment

src/grid/Grid.css

@@ -0,0 +1,31 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.grid {
+  contain: layout style;
+  position: relative;
+  flex-grow: 1;
+  margin-inline: var(--inline-content-inset);
+  margin-block: var(--cpd-space-4x);
+}
+
+.slots {
+  position: relative;
+}
+
+.slot {
+  contain: strict;
+}

src/grid/Grid.module.css

@@ -0,0 +1,23 @@
+/*
+Copyright 2023-2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.grid {
+  contain: layout style;
+}
+
+.slot {
+  contain: strict;
+}

src/grid/Grid.tsx

@@ -0,0 +1,465 @@
+/*
+Copyright 2023-2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  SpringRef,
+  TransitionFn,
+  animated,
+  useTransition,
+} from "@react-spring/web";
+import { EventTypes, Handler, useScroll } from "@use-gesture/react";
+import {
+  CSSProperties,
+  ComponentProps,
+  ComponentType,
+  FC,
+  LegacyRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import useMeasure from "react-use-measure";
+import classNames from "classnames";
+
+import styles from "./Grid.module.css";
+import { useMergedRefs } from "../useMergedRefs";
+import { TileWrapper } from "./TileWrapper";
+import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
+import { TileSpringUpdate } from "./LegacyGrid";
+
+interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface Tile<Model> extends Rect {
+  id: string;
+  model: Model;
+}
+
+interface TileSpring {
+  opacity: number;
+  scale: number;
+  zIndex: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface DragState {
+  tileId: string;
+  tileX: number;
+  tileY: number;
+  cursorX: number;
+  cursorY: number;
+}
+
+interface SlotProps extends ComponentProps<"div"> {
+  tile: string;
+  style?: CSSProperties;
+  className?: string;
+}
+
+/**
+ * An invisible "slot" for a tile to go in.
+ */
+export const Slot: FC<SlotProps> = ({ tile, style, className, ...props }) => (
+  <div
+    className={classNames(className, styles.slot)}
+    data-tile={tile}
+    style={style}
+    {...props}
+  />
+);
+
+export interface LayoutProps<Model, R extends HTMLElement> {
+  ref: LegacyRef<R>;
+  model: Model;
+}
+
+export interface TileProps<Model, R extends HTMLElement> {
+  ref: LegacyRef<R>;
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  /**
+   * The width this tile will have once its animations have settled.
+   */
+  targetWidth: number;
+  /**
+   * The height this tile will have once its animations have settled.
+   */
+  targetHeight: number;
+  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;
+}
+
+type DragCallback = (drag: Drag) => void;
+
+export interface LayoutSystem<LayoutModel, TileModel, R extends HTMLElement> {
+  /**
+   * Defines the ID and model of each tile present in the layout.
+   */
+  tiles: (model: LayoutModel) => Map<string, TileModel>;
+  /**
+   * A component which creates an invisible layout grid of "slots" for tiles to
+   * go in. The root element must have a data-generation attribute which
+   * increments whenever the layout may have changed.
+   */
+  Layout: ComponentType<LayoutProps<LayoutModel, R>>;
+  /**
+   * Gets a drag callback for the tile with the given ID. If this is not
+   * provided or it returns null, the tile is not draggable.
+   */
+  onDrag?: (model: LayoutModel, tile: string) => DragCallback | null;
+}
+
+interface Props<
+  LayoutModel,
+  TileModel,
+  LayoutRef extends HTMLElement,
+  TileRef extends HTMLElement,
+> {
+  /**
+   * Data with which to populate the layout.
+   */
+  model: LayoutModel;
+  /**
+   * The system by which to arrange the layout and respond to interactions.
+   */
+  system: LayoutSystem<LayoutModel, TileModel, LayoutRef>;
+  /**
+   * The component used to render each tile in the layout.
+   */
+  Tile: ComponentType<TileProps<TileModel, TileRef>>;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A grid of animated tiles.
+ */
+export function Grid<
+  LayoutModel,
+  TileModel,
+  LayoutRef extends HTMLElement,
+  TileRef extends HTMLElement,
+>({
+  model,
+  system: { tiles: getTileModels, Layout, onDrag },
+  Tile,
+  className,
+  style,
+}: Props<LayoutModel, TileModel, LayoutRef, TileRef>): ReactNode {
+  // Overview: This component places tiles by rendering an invisible layout grid
+  // of "slots" for tiles to go in. Once rendered, it uses the DOM API to get
+  // the dimensions of each slot, feeding these numbers back into react-spring
+  // to let the actual tiles move freely atop the layout.
+
+  // To tell us when the layout has changed, the layout system increments its
+  // data-generation attribute, which we watch with a MutationObserver.
+
+  const [gridRef1, gridBounds] = useMeasure();
+  const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
+  const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);
+
+  const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
+  const [generation, setGeneration] = useState<number | null>(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  const layoutRef = useCallback(
+    (e: HTMLElement | null) => {
+      setLayoutRoot(e);
+      if (e !== null)
+        setGeneration(parseInt(e.getAttribute("data-generation")!));
+    },
+    [setLayoutRoot, setGeneration],
+  );
+
+  useEffect(() => {
+    if (layoutRoot !== null) {
+      const observer = new MutationObserver((mutations) => {
+        if (mutations.some((m) => m.type === "attributes")) {
+          setGeneration(parseInt(layoutRoot.getAttribute("data-generation")!));
+        }
+      });
+
+      observer.observe(layoutRoot, { attributes: true });
+      return (): void => observer.disconnect();
+    }
+  }, [layoutRoot, setGeneration]);
+
+  const slotRects = useMemo(() => {
+    const rects = new Map<string, Rect>();
+
+    if (layoutRoot !== null) {
+      const slots = layoutRoot.getElementsByClassName(
+        styles.slot,
+      ) as HTMLCollectionOf<HTMLElement>;
+      for (const slot of slots)
+        rects.set(slot.getAttribute("data-tile")!, {
+          x: slot.offsetLeft,
+          y: slot.offsetTop,
+          width: slot.offsetWidth,
+          height: slot.offsetHeight,
+        });
+    }
+
+    return rects;
+    // The rects may change due to the grid being resized or rerendered, but
+    // eslint can't statically verify this
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layoutRoot, generation]);
+
+  const tileModels = useMemo(
+    () => getTileModels(model),
+    [getTileModels, model],
+  );
+
+  // Combine the tile models and slots together to create placed tiles
+  const tiles = useMemo<Tile<TileModel>[]>(() => {
+    const items: Tile<TileModel>[] = [];
+    for (const [id, model] of tileModels) {
+      const rect = slotRects.get(id);
+      if (rect !== undefined) items.push({ id, model, ...rect });
+    }
+    return items;
+  }, [slotRects, tileModels]);
+
+  const dragCallbacks = useMemo(
+    () =>
+      new Map(
+        (function* (): Iterable<[string, DragCallback | null]> {
+          if (onDrag !== undefined)
+            for (const id of tileModels.keys()) yield [id, onDrag(model, id)];
+        })(),
+      ),
+    [onDrag, tileModels, model],
+  );
+
+  // Drag state is stored in a ref rather than component state, because we use
+  // react-spring's imperative API during gestures to improve responsiveness
+  const dragState = useRef<DragState | null>(null);
+
+  const [tileTransitions, springRef] = useTransition(
+    tiles,
+    () => ({
+      key: ({ id }: Tile<TileModel>): string => id,
+      from: ({ x, y, width, height }: Tile<TileModel>): TileSpringUpdate => ({
+        opacity: 0,
+        scale: 0,
+        zIndex: 1,
+        x,
+        y,
+        width,
+        height,
+        immediate: prefersReducedMotion,
+      }),
+      enter: { opacity: 1, scale: 1, immediate: prefersReducedMotion },
+      update: ({
+        id,
+        x,
+        y,
+        width,
+        height,
+      }: Tile<TileModel>): TileSpringUpdate | null =>
+        id === dragState.current?.tileId
+          ? null
+          : {
+              x,
+              y,
+              width,
+              height,
+              immediate: prefersReducedMotion,
+            },
+      leave: { opacity: 0, scale: 0, immediate: prefersReducedMotion },
+      config: { mass: 0.7, tension: 252, friction: 25 },
+    }),
+    // react-spring's types are bugged and can't infer the spring type
+  ) as unknown as [
+    TransitionFn<Tile<TileModel>, TileSpring>,
+    SpringRef<TileSpring>,
+  ];
+
+  // Because we're using react-spring in imperative mode, we're responsible for
+  // firing animations manually whenever the tiles array updates
+  useEffect(() => {
+    springRef.start();
+  }, [tiles, springRef]);
+
+  const animateDraggedTile = (
+    endOfGesture: boolean,
+    callback: DragCallback,
+  ): void => {
+    const { tileId, tileX, tileY } = dragState.current!;
+    const tile = tiles.find((t) => t.id === tileId)!;
+
+    springRef.current
+      .find((c) => (c.item as Tile<TileModel>).id === tileId)
+      ?.start(
+        endOfGesture
+          ? {
+              scale: 1,
+              zIndex: 1,
+              x: tile.x,
+              y: tile.y,
+              width: tile.width,
+              height: tile.height,
+              immediate:
+                prefersReducedMotion || ((key): boolean => key === "zIndex"),
+              // Allow the tile's position to settle before pushing its
+              // z-index back down
+              delay: (key): number => (key === "zIndex" ? 500 : 0),
+            }
+          : {
+              scale: 1.1,
+              zIndex: 2,
+              x: tileX,
+              y: tileY,
+              immediate:
+                prefersReducedMotion ||
+                ((key): boolean =>
+                  key === "zIndex" || key === "x" || key === "y"),
+            },
+      );
+
+    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
+  // pattern of spreading {...bind()} across the children to bind the gesture
+  // ends up breaking memoization and ruining this component's performance.
+  // Instead, we pass this callback to each tile via a ref, to let them bind the
+  // gesture using the much more sensible ref-based method.
+  const onTileDrag = (
+    tileId: string,
+
+    {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      tap,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      initial: [initialX, initialY],
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      delta: [dx, dy],
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      last,
+    }: Parameters<Handler<"drag", EventTypes["drag"]>>[0],
+  ): void => {
+    if (!tap) {
+      const tileController = springRef.current.find(
+        (c) => (c.item as Tile<TileModel>).id === tileId,
+      )!;
+      const callback = dragCallbacks.get(tileController.item.id);
+
+      if (callback != null) {
+        if (dragState.current === null) {
+          const tileSpring = tileController.get();
+          dragState.current = {
+            tileId,
+            tileX: tileSpring.x,
+            tileY: tileSpring.y,
+            cursorX: initialX - gridBounds.x,
+            cursorY: initialY - gridBounds.y + scrollOffset.current,
+          };
+        }
+
+        dragState.current.tileX += dx;
+        dragState.current.tileY += dy;
+        dragState.current.cursorX += dx;
+        dragState.current.cursorY += dy;
+
+        animateDraggedTile(last, callback);
+
+        if (last) dragState.current = null;
+      }
+    }
+  };
+
+  const onTileDragRef = useRef(onTileDrag);
+  onTileDragRef.current = onTileDrag;
+
+  const scrollOffset = useRef(0);
+
+  useScroll(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ({ xy: [, y], delta: [, dy] }) => {
+      scrollOffset.current = y;
+
+      if (dragState.current !== null) {
+        dragState.current.tileY += dy;
+        dragState.current.cursorY += dy;
+        animateDraggedTile(false, onDrag!(model, dragState.current.tileId)!);
+      }
+    },
+    { target: gridRoot ?? undefined },
+  );
+
+  return (
+    <div
+      ref={gridRef}
+      className={classNames(className, styles.grid)}
+      style={style}
+    >
+      <Layout ref={layoutRef} model={model} />
+      {tileTransitions((spring, { id, model, width, height }) => (
+        <TileWrapper
+          key={id}
+          id={id}
+          onDrag={dragCallbacks.get(id) ? onTileDragRef : null}
+          targetWidth={width}
+          targetHeight={height}
+          model={model}
+          Tile={Tile}
+          {...spring}
+        />
+      ))}
+    </div>
+  );
+}

src/grid/GridLayout.module.css

@@ -0,0 +1,54 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.scrolling {
+  box-sizing: border-box;
+  block-size: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  gap: var(--gap);
+  box-sizing: border-box;
+}
+
+.scrolling > .slot {
+  width: var(--width);
+  height: var(--height);
+}
+
+.fixed > .slot {
+  position: absolute;
+  inline-size: 404px;
+  block-size: 233px;
+  inset: -12px;
+}
+
+.fixed > .slot[data-block-alignment="start"] {
+  inset-block-end: unset;
+}
+
+.fixed > .slot[data-block-alignment="end"] {
+  inset-block-start: unset;
+}
+
+.fixed > .slot[data-inline-alignment="start"] {
+  inset-inline-end: unset;
+}
+
+.fixed > .slot[data-inline-alignment="end"] {
+  inset-inline-start: unset;
+}

src/grid/GridLayout.tsx

@@ -0,0 +1,189 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { CSSProperties, useMemo } from "react";
+import { StateObservable, state, useStateObservable } from "@react-rxjs/core";
+import { BehaviorSubject, distinctUntilChanged } from "rxjs";
+
+import { GridLayout as GridLayoutModel } from "../state/CallViewModel";
+import { MediaViewModel } from "../state/MediaViewModel";
+import { LayoutSystem, Slot } from "./Grid";
+import styles from "./GridLayout.module.css";
+import { useReactiveState } from "../useReactiveState";
+import { subscribe } from "../state/subscribe";
+import { Alignment } from "../room/InCallView";
+import { useInitial } from "../useInitial";
+
+export interface Bounds {
+  width: number;
+  height: number;
+}
+
+interface GridCSSProperties extends CSSProperties {
+  "--gap": string;
+  "--width": string;
+  "--height": string;
+}
+
+interface GridLayoutSystems {
+  scrolling: LayoutSystem<GridLayoutModel, MediaViewModel, HTMLDivElement>;
+  fixed: LayoutSystem<GridLayoutModel, MediaViewModel[], HTMLDivElement>;
+}
+
+const slotMinHeight = 130;
+const slotMaxAspectRatio = 17 / 9;
+const slotMinAspectRatio = 4 / 3;
+
+export const gridLayoutSystems = (
+  minBounds: StateObservable<Bounds>,
+  floatingAlignment: BehaviorSubject<Alignment>,
+): GridLayoutSystems => ({
+  // The "fixed" (non-scrolling) part of the layout is where the spotlight tile
+  // lives
+  fixed: {
+    tiles: (model) =>
+      new Map(
+        model.spotlight === undefined ? [] : [["spotlight", model.spotlight]],
+      ),
+    Layout: subscribe(function GridLayoutFixed({ model }, ref) {
+      const { width, height } = useStateObservable(minBounds);
+      const alignment = useStateObservable(
+        useInitial<StateObservable<Alignment>>(() =>
+          state(
+            floatingAlignment.pipe(
+              distinctUntilChanged(
+                (a1, a2) => a1.block === a2.block && a1.inline === a2.inline,
+              ),
+            ),
+          ),
+        ),
+      );
+      const [generation] = useReactiveState<number>(
+        (prev) => (prev === undefined ? 0 : prev + 1),
+        [model.spotlight === undefined, width, height, alignment],
+      );
+
+      return (
+        <div
+          ref={ref}
+          className={styles.fixed}
+          data-generation={generation}
+          style={{ height }}
+        >
+          {model.spotlight && (
+            <Slot
+              className={styles.slot}
+              tile="spotlight"
+              data-block-alignment={alignment.block}
+              data-inline-alignment={alignment.inline}
+            />
+          )}
+        </div>
+      );
+    }),
+    onDrag:
+      () =>
+      ({ xRatio, yRatio }) =>
+        floatingAlignment.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+  },
+
+  // The scrolling part of the layout is where all the grid tiles live
+  scrolling: {
+    tiles: (model) => new Map(model.grid.map((tile) => [tile.id, tile])),
+    Layout: subscribe(function GridLayout({ model }, ref) {
+      const { width, height: minHeight } = useStateObservable(minBounds);
+
+      // The goal here is to determine the grid size and padding that maximizes
+      // use of screen space for n tiles without making those tiles too small or
+      // too cropped (having an extreme aspect ratio)
+      const [gap, slotWidth, slotHeight] = useMemo(() => {
+        const gap = width < 800 ? 16 : 20;
+        const slotMinWidth = width < 500 ? 150 : 180;
+
+        let columns = Math.min(
+          // Don't create more columns than we have items for
+          model.grid.length,
+          // The ideal number of columns is given by a packing of equally-sized
+          // squares into a grid.
+          // width / column = height / row.
+          // columns * rows = number of squares.
+          // ∴ columns = sqrt(width / height * number of squares).
+          // Except we actually want 16:9-ish slots rather than squares, so we
+          // divide the width-to-height ratio by the target aspect ratio.
+          Math.ceil(
+            Math.sqrt(
+              (width / minHeight / slotMaxAspectRatio) * model.grid.length,
+            ),
+          ),
+        );
+        let rows = Math.ceil(model.grid.length / columns);
+
+        let slotWidth = (width - (columns - 1) * gap) / columns;
+        let slotHeight = (minHeight - (rows - 1) * gap) / rows;
+
+        // Impose a minimum width and height on the slots
+        if (slotWidth < slotMinWidth) {
+          // In this case we want the slot width to determine the number of columns,
+          // not the other way around. If we take the above equation for the slot
+          // width (w = (W - (c - 1) * g) / c) and solve for c, we get
+          // c = (W + g) / (w + g).
+          columns = Math.floor((width + gap) / (slotMinWidth + gap));
+          rows = Math.ceil(model.grid.length / columns);
+          slotWidth = (width - (columns - 1) * gap) / columns;
+          slotHeight = (minHeight - (rows - 1) * gap) / rows;
+        }
+        if (slotHeight < slotMinHeight) slotHeight = slotMinHeight;
+        // Impose a minimum and maximum aspect ratio on the slots
+        const slotAspectRatio = slotWidth / slotHeight;
+        if (slotAspectRatio > slotMaxAspectRatio)
+          slotWidth = slotHeight * slotMaxAspectRatio;
+        else if (slotAspectRatio < slotMinAspectRatio)
+          slotHeight = slotWidth / slotMinAspectRatio;
+        // TODO: We might now be hitting the minimum height or width limit again
+
+        return [gap, slotWidth, slotHeight];
+      }, [width, minHeight, model.grid.length]);
+
+      const [generation] = useReactiveState<number>(
+        (prev) => (prev === undefined ? 0 : prev + 1),
+        [model.grid, width, minHeight],
+      );
+
+      return (
+        <div
+          ref={ref}
+          data-generation={generation}
+          className={styles.scrolling}
+          style={
+            {
+              width,
+              "--gap": `${gap}px`,
+              "--width": `${Math.floor(slotWidth)}px`,
+              "--height": `${Math.floor(slotHeight)}px`,
+            } as GridCSSProperties
+          }
+        >
+          {model.grid.map((tile) => (
+            <Slot className={styles.slot} tile={tile.id} />
+          ))}
+        </div>
+      );
+    }),
+  },
+});

src/grid/LegacyGrid.module.css

@@ -0,0 +1,22 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.grid {
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  touch-action: none;
+}

src/grid/TileWrapper.module.css

@@ -0,0 +1,23 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.tile.draggable {
+  cursor: grab;
+}
+
+.tile.draggable:active {
+  cursor: grabbing;
+}

src/grid/TileWrapper.tsx

@@ -0,0 +1,102 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ComponentType, memo, RefObject, useRef } from "react";
+import { EventTypes, Handler, useDrag } from "@use-gesture/react";
+import { SpringValue } from "@react-spring/web";
+import classNames from "classnames";
+
+import { TileProps } from "./Grid";
+import styles from "./TileWrapper.module.css";
+
+interface Props<M, R extends HTMLElement> {
+  id: string;
+  onDrag: RefObject<
+    (
+      tileId: string,
+      state: Parameters<Handler<"drag", EventTypes["drag"]>>[0],
+    ) => void
+  > | null;
+  targetWidth: number;
+  targetHeight: number;
+  model: M;
+  Tile: ComponentType<TileProps<M, R>>;
+  opacity: SpringValue<number>;
+  scale: SpringValue<number>;
+  zIndex: SpringValue<number>;
+  x: SpringValue<number>;
+  y: SpringValue<number>;
+  width: SpringValue<number>;
+  height: SpringValue<number>;
+}
+
+const TileWrapper_ = memo(
+  <M, R extends HTMLElement>({
+    id,
+    onDrag,
+    targetWidth,
+    targetHeight,
+    model,
+    Tile,
+    opacity,
+    scale,
+    zIndex,
+    x,
+    y,
+    width,
+    height,
+  }: Props<M, R>) => {
+    const ref = useRef<R | null>(null);
+
+    useDrag((state) => onDrag?.current!(id, state), {
+      target: ref,
+      filterTaps: true,
+      preventScroll: true,
+    });
+
+    return (
+      <Tile
+        ref={ref}
+        className={classNames(styles.tile, { [styles.draggable]: onDrag })}
+        style={{
+          opacity,
+          scale,
+          zIndex,
+          x,
+          y,
+          width,
+          height,
+        }}
+        targetWidth={targetWidth}
+        targetHeight={targetHeight}
+        model={model}
+      />
+    );
+  },
+);
+
+TileWrapper_.displayName = "TileWrapper";
+
+/**
+ * A wrapper around a tile in a video grid. This component exists to decouple
+ * child components from the grid.
+ */
+// We pretend this component is a simple function rather than a
+// NamedExoticComponent, because that's the only way we can fit in a type
+// parameter
+export const TileWrapper = TileWrapper_ as <M, R extends HTMLElement>(
+  props: Props<M, R>,
+) => JSX.Element;