From 2df8488c20422c4da3fb36d6619051231d2dfbf9 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Fri, 12 May 2023 11:43:17 -0400 Subject: [PATCH] Cap the size of the local tile in 1:1 calls So that it doesn't cover up too much of the remote tile at small window sizes --- src/video-grid/VideoGrid.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/video-grid/VideoGrid.tsx b/src/video-grid/VideoGrid.tsx index 522924f..99b9df6 100644 --- a/src/video-grid/VideoGrid.tsx +++ b/src/video-grid/VideoGrid.tsx @@ -172,8 +172,16 @@ function getOneOnOneLayoutTilePositions( const gridAspectRatio = gridWidth / gridHeight; const smallPip = gridAspectRatio < 1 || gridWidth < 700; - const pipWidth = smallPip ? 114 : 230; - const pipHeight = smallPip ? 163 : 155; + const maxPipWidth = smallPip ? 114 : 230; + const maxPipHeight = smallPip ? 163 : 155; + // Cap the PiP size at 1/3 the remote tile size, preserving aspect ratio + const pipScaleFactor = Math.min( + 1, + remotePosition.width / 3 / maxPipWidth, + remotePosition.height / 3 / maxPipHeight + ); + const pipWidth = maxPipWidth * pipScaleFactor; + const pipHeight = maxPipHeight * pipScaleFactor; const pipGap = getPipGap(gridAspectRatio, gridWidth); const pipMinX = remotePosition.x + pipGap;