From a445bcd0b9b6e0d918999cbb85be70400f6517ed Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 23 May 2022 09:59:55 -0400
Subject: [PATCH] Limit the width of the remote participant's video in 1:1
 layout

---
 src/video-grid/VideoGrid.jsx | 39 ++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 15 deletions(-)

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