From f5c0eb3f1616223f95f2a5340abe900e433abf6b Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Tue, 15 Nov 2022 09:52:00 -0600
Subject: [PATCH] feat: improve video layout

---
 src/components/Room/PeerVideo.tsx        | 10 ++++++++--
 src/components/Room/RoomVideoDisplay.tsx |  5 ++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Room/PeerVideo.tsx b/src/components/Room/PeerVideo.tsx
index 149fe73..29ab569 100644
--- a/src/components/Room/PeerVideo.tsx
+++ b/src/components/Room/PeerVideo.tsx
@@ -7,6 +7,7 @@ import { VideoStreamType } from 'models/chat'
 import { SelectedPeerStream } from './RoomVideoDisplay'
 
 interface PeerVideoProps {
+  isSelectedVideo?: boolean
   isSelfVideo?: boolean
   numberOfVideos: number
   onVideoClick?: (
@@ -28,6 +29,7 @@ const nextPerfectSquare = (base: number) => {
 }
 
 export const PeerVideo = ({
+  isSelectedVideo,
   isSelfVideo,
   numberOfVideos,
   onVideoClick,
@@ -59,7 +61,7 @@ export const PeerVideo = ({
         flexDirection: 'column',
         flexShrink: 1,
         justifyContent: 'center',
-        margin: '0 0.5em 0.5em 0.5em',
+        mx: 'auto',
         overflow: 'auto',
         py: 2,
         ...(selectedPeerStream
@@ -70,6 +72,10 @@ export const PeerVideo = ({
               width: `calc(${sizePercent}% - 1em)`,
               height: `calc(${sizePercent}% - 1em)`,
             }),
+        ...(selectedPeerStream &&
+          !isSelectedVideo && {
+            width: 'min-content',
+          }),
       }}
       elevation={10}
     >
@@ -90,7 +96,7 @@ export const PeerVideo = ({
         }}
       />
       <PeerNameDisplay
-        sx={{ textAlign: 'center', display: 'block', marginTop: '1em' }}
+        sx={{ textAlign: 'center', display: 'block', marginTop: 1, px: 1 }}
       >
         {userId}
       </PeerNameDisplay>
diff --git a/src/components/Room/RoomVideoDisplay.tsx b/src/components/Room/RoomVideoDisplay.tsx
index 735a26b..b2c745a 100644
--- a/src/components/Room/RoomVideoDisplay.tsx
+++ b/src/components/Room/RoomVideoDisplay.tsx
@@ -120,12 +120,14 @@ export const RoomVideoDisplay = ({ userId }: RoomVideoDisplayProps) => {
         display: 'flex',
         flexDirection: 'column',
         overflow: 'auto',
+        padding: 1,
         width: '85%',
       }}
     >
       {selectedPeerStream && (
-        <Box sx={{ height: 'calc(85% - 1em)', mb: 'auto' }}>
+        <Box sx={{ height: '85%' }}>
           <PeerVideo
+            isSelectedVideo
             numberOfVideos={numberOfVideos}
             onVideoClick={handleVideoClick}
             userId={userId}
@@ -143,6 +145,7 @@ export const RoomVideoDisplay = ({ userId }: RoomVideoDisplayProps) => {
           flexDirection: 'row',
           flexGrow: 1,
           flexWrap: selectedPeerStream ? 'nowrap' : 'wrap',
+          justifyContent: 'center',
           overflow: 'auto',
           width: '100%',
           ...(selectedPeerStream && {