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 && {