Merge pull request #272 from Azure-Samples/chwhilar/equal-height-pinned-videos

Chwhilar/equal height pinned videos

Author: chriswhilar

Project/src/App.css

@@ -414,6 +414,7 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
 .stream-container.pinned {
     order: 0;
     flex: 0 100% !important;
+    text-align: -webkit-center;
 }
 
 .stream-container.pinning-is-active {
@@ -474,11 +475,36 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
 
 .remote-video-container {
   position: relative;
-  height: 100%;
+}
+
+.remote-video-container.pinning-is-active {
+  height: 234px !important;
+  width: 416px !important;
+  justify-self: center;
+}
+
+.remote-video-container.pinned {
+  height: 720px !important;
+  width: 1280px !important;
+  justify-self: center;
+}
+
+.remote-video-container.pinned.portrait {
+  height: 1280px !important;
+  width: 720px !important;
+  justify-self: center;
+}
+
+@media screen and (max-width: 1024px){
+  .remote-video-container.pinned, .remote-video-container.pinned.portrait {
+    height: 100% !important;
+    width: 100% !important;
+    justify-self: unset;
+  }
 }
 
 .remote-video-container video {
-  object-fit: cover !important;
+  object-fit: contain !important;
   object-position: center center;
 }
 

Project/src/MakeCall/StreamRenderer.js

@@ -27,11 +27,14 @@ export const StreamRenderer = forwardRef(({
     const [displayName, setDisplayName] = useState(remoteParticipant?.displayName?.trim() ?? '');
     const [videoStats, setVideoStats] = useState();
     const [transportStats, setTransportStats] = useState();
+    const [height, setHeight] = useState(stream.size.height);
+    const [width, setWidth] = useState(stream.size.width);
 
     useEffect(() => {
         initializeComponent();
         return () => {
             stream.off('isReceivingChanged', isReceivingChanged);
+            stream.off('sizeChanged', sizeChanged);
             remoteParticipant.off('isSpeakingChanged', isSpeakingChanged);
             remoteParticipant.off('isMutedChanged', isMutedChanged);
             remoteParticipant.off('displayNameChanged', isDisplayNameChanged);
@@ -94,6 +97,11 @@ export const StreamRenderer = forwardRef(({
         }
     };
 
+    const sizeChanged = () => {
+        setHeight(stream.size.height);
+        setWidth(stream.size.width);
+    }
+
     const isMutedChanged = () => {
         setIsMuted(remoteParticipant && remoteParticipant?.isMuted);
     };
@@ -110,6 +118,7 @@ export const StreamRenderer = forwardRef(({
      */
     const initializeComponent = async () => {
         stream.on('isReceivingChanged', isReceivingChanged);
+        stream.on('sizeChanged', sizeChanged);
         remoteParticipant.on('isMutedChanged', isMutedChanged);
         remoteParticipant.on('isSpeakingChanged', isSpeakingChanged);
         if (dominantSpeakerMode && dominantRemoteParticipant !== remoteParticipant) {
@@ -149,9 +158,11 @@ export const StreamRenderer = forwardRef(({
                 ${stream.mediaStreamType === 'ScreenSharing' ? `ms-xxl12` : ``}
                 ${stream.isAvailable ? 'rendering' : ''}
                 ${isPinned ? 'pinned' : (isPinningActive ? 'pinning-is-active' : '')}`}>
-                    <div className={`remote-video-container ${isSpeaking && !isMuted ? `speaking-border-for-video` : ``}`}
-                        id={videoContainerId}
-                        ref={videoContainer}>
+                    <div id={videoContainerId}
+                        ref={videoContainer}
+                        className={`remote-video-container ${isSpeaking && !isMuted ? `speaking-border-for-video` : ``}
+                        ${isPinned ? 'pinned' : (isPinningActive ? 'pinning-is-active' : '')}
+                        ${height > width ? 'portrait' : ''}`}>
                             <h4 className="video-title">
                                 {displayName ? displayName : remoteParticipant.displayName ? remoteParticipant.displayName : utils.getIdentifierText(remoteParticipant.identifier)}
                             </h4>
@@ -172,13 +183,13 @@ export const StreamRenderer = forwardRef(({
                             {
                                 isLoading && <div className="remote-video-loading-spinner"></div>
                             }
+                            {
+                                videoStats && showMediaStats &&
+                                <h4 className="video-stats">
+                                    <VideoReceiveStats videoStats={videoStats} transportStats={transportStats} />
+                                </h4>
+                            }
                     </div>
-                    {
-                        videoStats && showMediaStats &&
-                        <h4 className="video-stats">
-                            <VideoReceiveStats videoStats={videoStats} transportStats={transportStats} />
-                        </h4>
-                    }
             </div>
         );
     }