diff --git a/src/video-grid/NewVideoGrid.tsx b/src/video-grid/NewVideoGrid.tsx index 6bc78e15..003c0709 100644 --- a/src/video-grid/NewVideoGrid.tsx +++ b/src/video-grid/NewVideoGrid.tsx @@ -80,16 +80,18 @@ export const NewVideoGrid: FC = ({ items, children }) => { const slotCells = useMemo(() => cells.filter(cell => cell.slot), [cells]) - const tiles: Tile[] = useMemo(() => slotRects.map((slot, i) => { + const tiles: Tile[] = useMemo(() => slotRects.flatMap((slot, i) => { const cell = slotCells[i] - return { + 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, () => ({ @@ -109,7 +111,11 @@ export const NewVideoGrid: FC = ({ items, children }) => { // Render nothing if the bounds are not yet known if (gridBounds.width === 0) { - return
+ return
+ {/* It's important that we always attach slotGridRef to something, + or else we may not receive the initial slot rects. */} +
+
} return (