diff --git a/src/video-grid/NewVideoGrid.tsx b/src/video-grid/NewVideoGrid.tsx index 5012fb46..754b0297 100644 --- a/src/video-grid/NewVideoGrid.tsx +++ b/src/video-grid/NewVideoGrid.tsx @@ -49,6 +49,7 @@ import { addItems, tryMoveTile, resize, + promoteSpeakers, } from "./model"; import { TileWrapper } from "./TileWrapper"; @@ -99,6 +100,9 @@ const useGridState = ( const newItems = items.filter((i) => !existingItemIds.has(i.id)); const grid3 = addItems(newItems, grid2); + // Step 4: Promote speakers to the top + promoteSpeakers(grid3); + return { ...grid3, generation: prevGrid.generation + 1 }; }, [columns, items] diff --git a/src/video-grid/model.ts b/src/video-grid/model.ts index 0101d8d8..faf5e44e 100644 --- a/src/video-grid/model.ts +++ b/src/video-grid/model.ts @@ -668,3 +668,31 @@ export function resize(g: Grid, columns: number): Grid { return fillGaps(result); } + +/** + * Promotes speakers to the first page of the grid. + */ +export function promoteSpeakers(g: Grid) { + // This is all a bit of a hack right now, because we don't know if the designs + // will stick with this approach in the long run + // We assume that 4 rows are probably about 1 page + const firstPageEnd = g.columns * 4; + + for (let from = firstPageEnd; from < g.cells.length; from++) { + const fromCell = g.cells[from]; + // Don't bother trying to promote enlarged tiles + if ( + fromCell?.item.isSpeaker && + fromCell.columns === 1 && + fromCell.rows === 1 + ) { + // Promote this tile by making 10 attempts to place it on the first page + for (let j = 0; j < 10; j++) { + const to = Math.floor(Math.random() * firstPageEnd); + const toCell = g.cells[to]; + if (toCell === undefined || (toCell.columns === 1 && toCell.rows === 1)) + moveTile(g, from, to); + } + } + } +}