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 = ({
}}
/>
{userId}
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 && (
-
+
{
flexDirection: 'row',
flexGrow: 1,
flexWrap: selectedPeerStream ? 'nowrap' : 'wrap',
+ justifyContent: 'center',
overflow: 'auto',
width: '100%',
...(selectedPeerStream && {