Skip to content

Commit 29f2d9c

Browse files
chriswhilarchriswhilar
authored
Merge pull request #256 from Azure-Samples/chwhilar/pinning-is-active
isPinningActive
2 parents 5d80286 + 1497718 commit 29f2d9c

File tree

3 files changed

+51
-33
lines changed

3 files changed

+51
-33
lines changed

‎Project/src/App.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -402,18 +402,22 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
402402
}
403403
}
404404

405-
.stream-container.pinned {
406-
order: 0;
407-
flex: 0 100% !important;
408-
}
409-
410405
.stream-container {
411406
order: 1;
412407
display: none;
413408
position: relative;
414409
flex: 0 20%;
415410
}
416411

412+
.stream-container.pinned {
413+
order: 0;
414+
flex: 0 100% !important;
415+
}
416+
417+
.stream-container.pinning-is-active {
418+
flex: 0 25% !important;
419+
}
420+
417421
.stream-container.stream-count-1,
418422
.stream-container.stream-count-2,
419423
.stream-container.stream-count-3,

‎Project/src/MakeCall/CallCard.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ export default class CallCard extends React.Component {
129129
isAudioPermitted: meetingMediaAccess?.isAudioPermitted,
130130
isVideoPermitted: meetingMediaAccess?.isVideoPermitted,
131131
},
132+
isPinningActive: false,
132133
showPin2VideosList: false,
133134
};
134135
this.selectedRemoteParticipants = new Set();
@@ -1392,9 +1393,10 @@ export default class CallCard extends React.Component {
13921393
// e.preventDefault();
13931394
const checked = e.target.checked;
13941395
const allRemoteParticipantStreams = this.state.allRemoteParticipantStreams;
1396+
// If there is already 2 streams pinned and the user is trying to pin another stream, return
13951397
if (allRemoteParticipantStreams.filter(streamTuple => streamTuple.isPinned).length >= 2 && checked) {
13961398
return;
1397-
}
1399+
}
13981400

13991401
allRemoteParticipantStreams.forEach(v => {
14001402
if (streamTuple === v) {
@@ -1404,7 +1406,10 @@ export default class CallCard extends React.Component {
14041406
}
14051407
});
14061408

1407-
this.setState({ allRemoteParticipantStreams: allRemoteParticipantStreams }, () => {
1409+
this.setState({
1410+
allRemoteParticipantStreams: allRemoteParticipantStreams,
1411+
isPinningActive: allRemoteParticipantStreams.some(v => v.isPinned)
1412+
}, () => {
14081413
this.updateListOfParticipantsToRender('Pinned videos changed');
14091414
});
14101415
}
@@ -1521,6 +1526,7 @@ export default class CallCard extends React.Component {
15211526
key={`${utils.getIdentifierText(v.participant.identifier)}-${v.stream.mediaStreamType}-${v.stream.id}`}
15221527
ref={v.streamRendererComponentRef}
15231528
stream={v.stream}
1529+
isPinningActive={this.state.isPinningActive}
15241530
isPinned={v.isPinned}
15251531
remoteParticipant={v.participant}
15261532
dominantSpeakerMode={this.state.dominantSpeakerMode}

‎Project/src/MakeCall/FunctionalStreamRenderer.js‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import VideoReceiveStats from './VideoReceiveStats';
77
export const FunctionalStreamRenderer = forwardRef(({
88
remoteParticipant,
99
stream,
10+
isPinningActive,
1011
isPinned,
1112
dominantRemoteParticipant,
1213
dominantSpeakerMode,
@@ -144,35 +145,42 @@ export const FunctionalStreamRenderer = forwardRef(({
144145

145146
if (stream.isAvailable) {
146147
return (
147-
<div id={componentId} ref={componentContainer} className={`stream-container stream-count-${streamCount} ${stream.mediaStreamType === 'ScreenSharing' ? `ms-xxl12` : ``} ${stream.isAvailable ? 'rendering' : ''} ${isPinned ? 'pinned' : ''}`}>
148-
<div className={`remote-video-container ${isSpeaking && !isMuted ? `speaking-border-for-video` : ``}`} id={videoContainerId} ref={videoContainer}>
149-
<h4 className="video-title">
150-
{displayName ? displayName : remoteParticipant.displayName ? remoteParticipant.displayName : utils.getIdentifierText(remoteParticipant.identifier)}
151-
</h4>
152-
<CustomVideoEffects
153-
stream={stream}
154-
buttons={{
155-
add: {
156-
label: "Set B/W effect",
157-
disabled: false
158-
},
159-
remove: {
160-
label: "Remove B/W effect",
161-
disabled: false
148+
<div id={componentId}
149+
ref={componentContainer}
150+
className={`stream-container stream-count-${streamCount}
151+
${stream.mediaStreamType === 'ScreenSharing' ? `ms-xxl12` : ``}
152+
${stream.isAvailable ? 'rendering' : ''}
153+
${isPinned ? 'pinned' : (isPinningActive ? 'pinning-is-active' : '')}`}>
154+
<div className={`remote-video-container ${isSpeaking && !isMuted ? `speaking-border-for-video` : ``}`}
155+
id={videoContainerId}
156+
ref={videoContainer}>
157+
<h4 className="video-title">
158+
{displayName ? displayName : remoteParticipant.displayName ? remoteParticipant.displayName : utils.getIdentifierText(remoteParticipant.identifier)}
159+
</h4>
160+
<CustomVideoEffects
161+
stream={stream}
162+
buttons={{
163+
add: {
164+
label: "Set B/W effect",
165+
disabled: false
166+
},
167+
remove: {
168+
label: "Remove B/W effect",
169+
disabled: false
170+
}
171+
}}
172+
isLocal={false}
173+
videoContainerId={videoContainerId}/>
174+
{
175+
isLoading && <div className="remote-video-loading-spinner"></div>
162176
}
163-
}}
164-
isLocal={false}
165-
videoContainerId={videoContainerId}/>
177+
</div>
166178
{
167-
isLoading && <div className="remote-video-loading-spinner"></div>
179+
videoStats && showMediaStats &&
180+
<h4 className="video-stats">
181+
<VideoReceiveStats videoStats={videoStats} transportStats={transportStats} />
182+
</h4>
168183
}
169-
</div>
170-
{
171-
videoStats && showMediaStats &&
172-
<h4 className="video-stats">
173-
<VideoReceiveStats videoStats={videoStats} transportStats={transportStats} />
174-
</h4>
175-
}
176184
</div>
177185
);
178186
}

0 commit comments

Comments
 (0)