Merge pull request #256 from Azure-Samples/chwhilar/pinning-is-active

isPinningActive

Author: chriswhilar

Project/src/App.css

@@ -402,18 +402,22 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
   }
 }
 
-.stream-container.pinned {
-    order: 0;
-    flex: 0 100% !important;
-}
-
 .stream-container {
   order: 1;
   display: none;
   position: relative;
   flex: 0 20%;
 }
 
+.stream-container.pinned {
+    order: 0;
+    flex: 0 100% !important;
+}
+
+.stream-container.pinning-is-active {
+  flex: 0 25% !important;
+}
+
 .stream-container.stream-count-1,
 .stream-container.stream-count-2,
 .stream-container.stream-count-3,

Project/src/MakeCall/CallCard.js

@@ -129,6 +129,7 @@ export default class CallCard extends React.Component {
                 isAudioPermitted: meetingMediaAccess?.isAudioPermitted,
                 isVideoPermitted: meetingMediaAccess?.isVideoPermitted,
             },
+            isPinningActive: false,
             showPin2VideosList: false,
         };
         this.selectedRemoteParticipants = new Set();
@@ -1392,9 +1393,10 @@ export default class CallCard extends React.Component {
         // e.preventDefault();
         const checked = e.target.checked;
         const allRemoteParticipantStreams = this.state.allRemoteParticipantStreams;
+        // If there is already 2 streams pinned and the user is trying to pin another stream, return
         if (allRemoteParticipantStreams.filter(streamTuple => streamTuple.isPinned).length >= 2 && checked) {
             return;
-        } 
+        }
 
         allRemoteParticipantStreams.forEach(v => {
             if (streamTuple === v) {
@@ -1404,7 +1406,10 @@ export default class CallCard extends React.Component {
             }
         });
 
-        this.setState({ allRemoteParticipantStreams: allRemoteParticipantStreams }, () => {
+        this.setState({
+            allRemoteParticipantStreams: allRemoteParticipantStreams,
+            isPinningActive: allRemoteParticipantStreams.some(v => v.isPinned)
+        }, () => {
             this.updateListOfParticipantsToRender('Pinned videos changed');
         });
     }
@@ -1521,6 +1526,7 @@ export default class CallCard extends React.Component {
                                     key={`${utils.getIdentifierText(v.participant.identifier)}-${v.stream.mediaStreamType}-${v.stream.id}`}
                                     ref={v.streamRendererComponentRef}
                                     stream={v.stream}
+                                    isPinningActive={this.state.isPinningActive}
                                     isPinned={v.isPinned}
                                     remoteParticipant={v.participant}
                                     dominantSpeakerMode={this.state.dominantSpeakerMode}

Project/src/MakeCall/FunctionalStreamRenderer.js

@@ -7,6 +7,7 @@ import VideoReceiveStats from './VideoReceiveStats';
 export const FunctionalStreamRenderer = forwardRef(({
     remoteParticipant,
     stream,
+    isPinningActive,
     isPinned,
     dominantRemoteParticipant,
     dominantSpeakerMode,
@@ -144,35 +145,42 @@ export const FunctionalStreamRenderer = forwardRef(({
 
     if (stream.isAvailable) {
         return (
-            <div id={componentId} ref={componentContainer} className={`stream-container  stream-count-${streamCount} ${stream.mediaStreamType === 'ScreenSharing' ? `ms-xxl12` : ``} ${stream.isAvailable ? 'rendering' : ''} ${isPinned ? 'pinned' : ''}`}>
-                <div className={`remote-video-container ${isSpeaking && !isMuted ? `speaking-border-for-video` : ``}`} id={videoContainerId} ref={videoContainer}>
-                    <h4 className="video-title">
-                        {displayName ? displayName : remoteParticipant.displayName ? remoteParticipant.displayName : utils.getIdentifierText(remoteParticipant.identifier)}
-                    </h4>
-                    <CustomVideoEffects
-                        stream={stream}
-                        buttons={{
-                            add: {
-                                label: "Set B/W effect",
-                                disabled: false
-                            },
-                            remove: {
-                                label: "Remove B/W effect", 
-                                disabled: false
+            <div id={componentId}
+                ref={componentContainer}
+                className={`stream-container  stream-count-${streamCount}
+                ${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}>
+                            <h4 className="video-title">
+                                {displayName ? displayName : remoteParticipant.displayName ? remoteParticipant.displayName : utils.getIdentifierText(remoteParticipant.identifier)}
+                            </h4>
+                            <CustomVideoEffects
+                                stream={stream}
+                                buttons={{
+                                    add: {
+                                        label: "Set B/W effect",
+                                        disabled: false
+                                    },
+                                    remove: {
+                                        label: "Remove B/W effect", 
+                                        disabled: false
+                                    }
+                                }}
+                                isLocal={false}
+                                videoContainerId={videoContainerId}/>
+                            {
+                                isLoading && <div className="remote-video-loading-spinner"></div>
                             }
-                        }}
-                        isLocal={false}
-                        videoContainerId={videoContainerId}/>
+                    </div>
                     {
-                        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>
         );
     }