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

Center tiles within own subgrids

Browse source
This commit is contained in:
Robert Long 2021-08-31 13:54:18 -07:00
parent a9e8b570f4
commit d57d9e9af0
1 changed files with 30 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/VideoGrid.jsx
View file

@ -85,9 +85,9 @@ function getTilePositions(
if (layoutDirection === "vertical") { if (layoutDirection === "vertical") {
presenterGridWidth = gridWidth; presenterGridWidth = gridWidth;
presenterGridHeight = gridHeight - (participantGridBounds.height + gap); presenterGridHeight = gridHeight - (participantGridBounds.height + gap * 2);
} else { } else {
presenterGridWidth = gridWidth - (participantGridBounds.width + gap); presenterGridWidth = gridWidth - (participantGridBounds.width + gap * 2);
presenterGridHeight = gridHeight; presenterGridHeight = gridHeight;
} }
@ -97,28 +97,37 @@ function getTilePositions(
presenterGridHeight, presenterGridHeight,
gap gap
); );
const presenterGridBounds = getSubGridBoundingBox(presenterGridPositions);
if (layoutDirection === "vertical") {
applyTileOffsets(
participantGridPositions,
0,
presenterGridBounds.height + gap
);
} else {
applyTileOffsets(
participantGridPositions,
presenterGridBounds.width + gap,
0
);
}
const tilePositions = [ const tilePositions = [
...presenterGridPositions, ...presenterGridPositions,
...participantGridPositions, ...participantGridPositions,
]; ];
centerTiles(tilePositions, gridWidth, gridHeight); centerTiles(
presenterGridPositions,
presenterGridWidth,
presenterGridHeight,
0,
0
);
if (layoutDirection === "vertical") {
centerTiles(
participantGridPositions,
gridWidth,
gridHeight - presenterGridHeight,
0,
presenterGridHeight
);
} else {
centerTiles(
participantGridPositions,
gridWidth - presenterGridWidth,
gridHeight,
presenterGridWidth,
0
);
}
return tilePositions; return tilePositions;
} }
@ -187,11 +196,11 @@ function getGridLayout(tileCount, presenterTileCount, gridWidth, gridHeight) {
return { participantGridRatio, layoutDirection }; return { participantGridRatio, layoutDirection };
} }
function centerTiles(positions, gridWidth, gridHeight) { function centerTiles(positions, gridWidth, gridHeight, offsetLeft, offsetTop) {
const bounds = getSubGridBoundingBox(positions); const bounds = getSubGridBoundingBox(positions);
const leftOffset = Math.round((gridWidth - bounds.width) / 2); const leftOffset = Math.round((gridWidth - bounds.width) / 2) + offsetLeft;
const topOffset = Math.round((gridHeight - bounds.height) / 2); const topOffset = Math.round((gridHeight - bounds.height) / 2) + offsetTop;
applyTileOffsets(positions, leftOffset, topOffset); applyTileOffsets(positions, leftOffset, topOffset);