xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix some layout bugs

Browse source
This commit is contained in:
Robin Townsend 2023-01-30 23:32:00 -05:00
parent 55dece274f
commit f540f48461
2 changed files with 14 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/video-grid/NewVideoGrid.tsx
View file

@ -122,7 +122,7 @@ const inArea = (
g: Grid g: Grid
): boolean => { ): boolean => {
const indexColumn = column(index, g); const indexColumn = column(index, g);
const indexRow = column(index, g); const indexRow = row(index, g);
return ( return (
indexRow >= row(start, g) && indexRow >= row(start, g) &&
indexRow <= row(end, g) && indexRow <= row(end, g) &&
@ -266,9 +266,6 @@ const fillGaps = (g: Grid): Grid => {
}; };
const cycleTileSize = (tileId: string, 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); const from = g.cells.findIndex((c) => c?.item.id === tileId);
if (from === -1) return g; // Tile removed, no change if (from === -1) return g; // Tile removed, no change
const fromWidth = g.cells[from]!.columns; const fromWidth = g.cells[from]!.columns;
@ -277,13 +274,20 @@ const cycleTileSize = (tileId: string, g: Grid): Grid => {
const [toWidth, toHeight] = const [toWidth, toHeight] =
fromWidth === 1 && fromHeight === 1 ? [3, 2] : [1, 1]; fromWidth === 1 && fromHeight === 1 ? [3, 2] : [1, 1];
const newRows = Math.ceil( const newRows = Math.max(
(toWidth * toHeight - fromWidth * fromHeight) / g.columns 0,
Math.ceil((toWidth * toHeight - fromWidth * fromHeight) / g.columns)
); );
const candidateWidth = toWidth; const candidateWidth = toWidth;
const candidateHeight = toHeight - newRows; 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<number>([from]); const nextScanLocations = new Set<number>([from]);
const scanColumnOffset = Math.floor((toWidth - 1) / 2); const scanColumnOffset = Math.floor((toWidth - 1) / 2);
const scanRowOffset = Math.floor((toHeight - 1) / 2); const scanRowOffset = Math.floor((toHeight - 1) / 2);
@ -302,7 +306,7 @@ const cycleTileSize = (tileId: string, g: Grid): Grid => {
if ( if (
start >= 0 && start >= 0 &&
end < g.cells.length && end < gappyGrid.cells.length &&
endColumn - startColumn + 1 === candidateWidth endColumn - startColumn + 1 === candidateWidth
) { ) {
if (allCellsInArea(start, end, g, displaceable)) { 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 // TODO: Don't give up on placing the tile yet
if (to === null) return g; 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); const toRow = row(to, g);
g.cells.forEach((c, src) => { g.cells.forEach((c, src) => {
@ -333,10 +331,10 @@ const cycleTileSize = (tileId: string, g: Grid): Grid => {
const offset = const offset =
row(src, g) > toRow + candidateHeight - 1 ? g.columns * newRows : 0; row(src, g) > toRow + candidateHeight - 1 ? g.columns * newRows : 0;
forEachCellInArea(src, areaEnd(src, c.columns, c.rows, g), g, (c, i) => { 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 displacedTiles: Cell[] = [];
const toEnd = areaEnd(to, toWidth, toHeight, g); const toEnd = areaEnd(to, toWidth, toHeight, g);

7
src/video-grid/VideoTile.module.css
View file

@ -144,13 +144,6 @@ limitations under the License.
white-space: nowrap; white-space: nowrap;
} }
.videoMutedAvatar {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.videoMutedOverlay { .videoMutedOverlay {
width: 100%; width: 100%;
height: 100%; height: 100%;