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

Merge pull request #348 from robintown/limit-width

Browse source 
Limit the width of the remote participant's video in 1:1 layout
This commit is contained in:
Robin 2022-05-24 07:45:09 -04:00 committed by GitHub
commit 6f892edd5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/video-grid/VideoGrid.jsx
View file

@ -119,16 +119,23 @@ function getOneOnOneLayoutTilePositions(
pipXRatio, pipXRatio,
pipYRatio pipYRatio
) { ) {
const [remotePosition] = getFreedomLayoutTilePositions(
1,
0,
gridWidth,
gridHeight
);
const gridAspectRatio = gridWidth / gridHeight; const gridAspectRatio = gridWidth / gridHeight;
const pipWidth = gridAspectRatio < 1 ? 114 : 230; const pipWidth = gridAspectRatio < 1 ? 114 : 230;
const pipHeight = gridAspectRatio < 1 ? 163 : 155; const pipHeight = gridAspectRatio < 1 ? 163 : 155;
const pipGap = getPipGap(gridAspectRatio); const pipGap = getPipGap(gridAspectRatio);
const pipMinX = GAP + pipGap; const pipMinX = remotePosition.x + pipGap;
const pipMinY = GAP + pipGap; const pipMinY = remotePosition.y + pipGap;
const pipMaxX = gridWidth - pipWidth - GAP - pipGap; const pipMaxX = remotePosition.x + remotePosition.width - pipWidth - pipGap;
const pipMaxY = gridHeight - pipHeight - GAP - pipGap; const pipMaxY = remotePosition.y + remotePosition.height - pipHeight - pipGap;
return [ return [
{ {
@ -139,13 +146,7 @@ function getOneOnOneLayoutTilePositions(
height: pipHeight, height: pipHeight,
zIndex: 1, zIndex: 1,
}, },
{ remotePosition,
x: GAP,
y: GAP,
width: gridWidth - GAP * 2,
height: gridHeight - GAP * 2,
zIndex: 0,
},
]; ];
} }
@ -934,13 +935,21 @@ export function VideoGrid({
// Only update the position on the last event // Only update the position on the last event
if (last) { if (last) {
const remotePosition = tilePositions[1];
const pipGap = getPipGap(gridBounds.width / gridBounds.height); const pipGap = getPipGap(gridBounds.width / gridBounds.height);
const pipMinX = GAP + pipGap; const pipMinX = remotePosition.x + pipGap;
const pipMinY = GAP + pipGap; const pipMinY = remotePosition.y + pipGap;
const pipMaxX = const pipMaxX =
gridBounds.width - dragTilePosition.width - GAP - pipGap; remotePosition.x +
remotePosition.width -
dragTilePosition.width -
pipGap;
const pipMaxY = const pipMaxY =
gridBounds.height - dragTilePosition.height - GAP - pipGap; remotePosition.y +
remotePosition.height -
dragTilePosition.height -
pipGap;
const newPipXRatio = const newPipXRatio =
(dragTilePosition.x + movement[0] - pipMinX) / (pipMaxX - pipMinX); (dragTilePosition.x + movement[0] - pipMinX) / (pipMaxX - pipMinX);