element-call/src/video-grid/NewVideoGrid.tsx

import { useTransition } from "@react-spring/web";
import React, { FC, memo, ReactNode, useMemo, useRef } from "react";
import useMeasure from "react-use-measure";
import styles from "./NewVideoGrid.module.css";
import { TileDescriptor } from "./TileDescriptor";
import { VideoGridProps as Props } from "./VideoGrid";

interface Cell {
  /**
   * The item held by the slot containing this cell.
   */
  item: TileDescriptor
  /**
   * Whether this cell is the first cell of the containing slot.
   */
  slot: boolean
  /**
   * The width, in columns, of the containing slot.
   */
  columns: number
  /**
   * The height, in rows, of the containing slot.
   */
  rows: number
}

interface Rect {
  x: number
  y: number
  width: number
  height: number
}

interface Tile extends Rect {
  item: TileDescriptor
  dragging: boolean
}

interface SlotsProps {
  count: number
}

/**
 * Generates a number of empty slot divs.
 */
const Slots: FC<SlotsProps> = memo(({ count }) => {
  const slots = new Array<ReactNode>(count)
  for (let i = 0; i < count; i++) slots[i] = <div className={styles.slot} key={i} />
  return <>{slots}</>
})

export const NewVideoGrid: FC<Props> = ({ items, children }) => {
  const slotGridRef = useRef<HTMLDivElement>(null);
  const [gridRef, gridBounds] = useMeasure();

  const slotRects = useMemo(() => {
    if (slotGridRef.current === null) return [];

    const slots = slotGridRef.current.getElementsByClassName(styles.slot)
    const rects = new Array<Rect>(slots.length)
    for (let i = 0; i < slots.length; i++) {
      const slot = slots[i] as HTMLElement
      rects[i] = {
        x: slot.offsetLeft,
        y: slot.offsetTop,
        width: slot.offsetWidth,
        height: slot.offsetHeight,
      }
    }

    return rects;
  }, [items, gridBounds]);

  const cells: Cell[] = useMemo(() => items.map(item => ({
    item,
    slot: true,
    columns: 1,
    rows: 1,
  })), [items])

  const slotCells = useMemo(() => cells.filter(cell => cell.slot), [cells])

  const tiles: Tile[] = useMemo(() => slotRects.flatMap((slot, i) => {
    const cell = slotCells[i]
    if (cell === undefined) return []

    return [{
      item: cell.item,
      x: slot.x,
      y: slot.y,
      width: slot.width,
      height: slot.height,
      dragging: false,
    }]
  }), [slotRects, cells])

  const [tileTransitions] = useTransition(tiles, () => ({
    key: ({ item }: Tile) => item.id,
    from: { opacity: 0 },
    enter: ({ x, y, width, height }: Tile) => ({ opacity: 1, x, y, width, height }),
    update: ({ x, y, width, height }: Tile) => ({ x, y, width, height }),
    leave: { opacity: 0 },
  }), [tiles])

  const slotGridStyle = useMemo(() => {
    const columnCount = gridBounds.width >= 800 ? 6 : 3;
    return {
      gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
    };
  }, [gridBounds]);

  // Render nothing if the bounds are not yet known
  if (gridBounds.width === 0) {
    return <div ref={gridRef} className={styles.grid}>
      {/* It's important that we always attach slotGridRef to something,
      or else we may not receive the initial slot rects. */}
      <div ref={slotGridRef} className={styles.slotGrid} />
    </div>
  }

  return (
    <div
      ref={gridRef}
      className={styles.grid}
    >
      <div style={slotGridStyle} ref={slotGridRef} className={styles.slotGrid}>
        <Slots count={items.length} />
      </div>
      {tileTransitions((style, tile) => children({
        key: tile.item.id,
        style: style as any,
        width: tile.width,
        height: tile.height,
        item: tile.item,
      }))}
    </div>
  );
};