diff --git a/src/video-grid/NewVideoGrid.tsx b/src/video-grid/NewVideoGrid.tsx index 2ad5e3ba..28b9e0aa 100644 --- a/src/video-grid/NewVideoGrid.tsx +++ b/src/video-grid/NewVideoGrid.tsx @@ -122,7 +122,7 @@ const inArea = ( g: Grid ): boolean => { const indexColumn = column(index, g); - const indexRow = column(index, g); + const indexRow = row(index, g); return ( indexRow >= row(start, g) && indexRow <= row(end, g) && @@ -266,9 +266,6 @@ const fillGaps = (g: Grid): Grid => { }; const cycleTileSize = (tileId: string, g: Grid): Grid => { - // TODO: When unenlarging tiles, do all this in reverse somehow (deleting - // rows and displacing tiles. pushing tiles outwards might be necessary) - const from = g.cells.findIndex((c) => c?.item.id === tileId); if (from === -1) return g; // Tile removed, no change const fromWidth = g.cells[from]!.columns; @@ -277,13 +274,20 @@ const cycleTileSize = (tileId: string, g: Grid): Grid => { const [toWidth, toHeight] = fromWidth === 1 && fromHeight === 1 ? [3, 2] : [1, 1]; - const newRows = Math.ceil( - (toWidth * toHeight - fromWidth * fromHeight) / g.columns + const newRows = Math.max( + 0, + Math.ceil((toWidth * toHeight - fromWidth * fromHeight) / g.columns) ); const candidateWidth = toWidth; const candidateHeight = toHeight - newRows; + const gappyGrid: Grid = { + ...g, + generation: g.generation + 1, + cells: new Array(g.cells.length + newRows * g.columns), + }; + const nextScanLocations = new Set([from]); const scanColumnOffset = Math.floor((toWidth - 1) / 2); const scanRowOffset = Math.floor((toHeight - 1) / 2); @@ -302,7 +306,7 @@ const cycleTileSize = (tileId: string, g: Grid): Grid => { if ( start >= 0 && - end < g.cells.length && + end < gappyGrid.cells.length && endColumn - startColumn + 1 === candidateWidth ) { if (allCellsInArea(start, end, g, displaceable)) { @@ -320,12 +324,6 @@ const cycleTileSize = (tileId: string, g: Grid): Grid => { // TODO: Don't give up on placing the tile yet if (to === null) return g; - const gappyGrid: Grid = { - ...g, - generation: g.generation + 1, - cells: new Array(g.cells.length + newRows * g.columns), - }; - const toRow = row(to, g); g.cells.forEach((c, src) => { @@ -333,10 +331,10 @@ const cycleTileSize = (tileId: string, g: Grid): Grid => { const offset = row(src, g) > toRow + candidateHeight - 1 ? g.columns * newRows : 0; forEachCellInArea(src, areaEnd(src, c.columns, c.rows, g), g, (c, i) => { - gappyGrid.cells[i + offset] = c - }) + gappyGrid.cells[i + offset] = c; + }); } - }) + }); const displacedTiles: Cell[] = []; const toEnd = areaEnd(to, toWidth, toHeight, g); diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css index c13976d1..00429867 100644 --- a/src/video-grid/VideoTile.module.css +++ b/src/video-grid/VideoTile.module.css @@ -144,13 +144,6 @@ limitations under the License. white-space: nowrap; } -.videoMutedAvatar { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} - .videoMutedOverlay { width: 100%; height: 100%;