Skip to content

Commit c46285f

Browse files
chriswhilarchriswhilar
committed
Fix participant panel when rendering videos
1 parent 8ed7a44 commit c46285f

File tree

5 files changed

+89
-87
lines changed

5 files changed

+89
-87
lines changed

‎Project/package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Project/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "1.0.0",
44
"private": true,
55
"dependencies": {
6-
"@azure/communication-calling": "1.34.1-beta.2",
6+
"@azure/communication-calling": "1.35.1-beta.1",
77
"@azure/communication-calling-effects": "1.1.1-beta.1",
88
"@azure/communication-common": "^2.3.0",
99
"@azure/communication-identity": "^1.3.0",

‎Project/src/App.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,8 @@ ul {
215215
}
216216

217217
.participant-item {
218+
display: flex;
219+
flex-wrap: wrap;;
218220
padding-top: 2em;
219221
padding-bottom: 2em;
220222
padding-left: 1em;

‎Project/src/MakeCall/CallCard.js‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1506,22 +1506,24 @@ export default class CallCard extends React.Component {
15061506

15071507
</div>
15081508
}
1509-
<div>
1510-
{
1511-
this.state.remoteScreenShareStream &&
1512-
<StreamRenderer
1513-
key={`${utils.getIdentifierText(this.state.remoteScreenShareStream.participant.identifier)}-${this.state.remoteScreenShareStream.stream.mediaStreamType}-${this.state.remoteScreenShareStream.stream.id}`}
1514-
ref={this.state.remoteScreenShareStream.streamRendererComponentRef}
1515-
stream={this.state.remoteScreenShareStream.stream}
1516-
remoteParticipant={this.state.remoteScreenShareStream.participant}
1517-
dominantSpeakerMode={this.state.dominantSpeakerMode}
1518-
dominantRemoteParticipant={this.state.dominantRemoteParticipant}
1519-
call={this.call}
1520-
showMediaStats={this.state.logMediaStats}
1521-
streamCount={streamCount}
1522-
/>
1523-
}
1524-
</div>
1509+
</div>
1510+
<div className="ms-Grid-row">
1511+
{
1512+
this.state.remoteScreenShareStream &&
1513+
<StreamRenderer
1514+
key={`${utils.getIdentifierText(this.state.remoteScreenShareStream.participant.identifier)}-${this.state.remoteScreenShareStream.stream.mediaStreamType}-${this.state.remoteScreenShareStream.stream.id}`}
1515+
ref={this.state.remoteScreenShareStream.streamRendererComponentRef}
1516+
stream={this.state.remoteScreenShareStream.stream}
1517+
remoteParticipant={this.state.remoteScreenShareStream.participant}
1518+
dominantSpeakerMode={this.state.dominantSpeakerMode}
1519+
dominantRemoteParticipant={this.state.dominantRemoteParticipant}
1520+
call={this.call}
1521+
showMediaStats={this.state.logMediaStats}
1522+
streamCount={streamCount}
1523+
/>
1524+
}
1525+
</div>
1526+
<div className="ms-Grid-row">
15251527
<div className="video-grid-row">
15261528
{
15271529
(this.state.callState === 'Connected' ||

‎Project/src/MakeCall/RemoteParticipantCard.js‎

Lines changed: 64 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -206,75 +206,73 @@ export default class RemoteParticipantCard extends React.Component {
206206
render() {
207207
return (
208208
<li className={this.state.isSpotlighted ? 'participant-item spotlightEnabled':'participant-item'} key={utils.getIdentifierText(this.remoteParticipant.identifier)}>
209-
<div className="ms-Grid-row">
210-
<div className="inline-flex align-items-center">
211-
{
212-
this.isCheckable &&
213-
<div className="mr-3 inline-flex">
214-
<input type="checkbox" onChange={e => this.handleCheckboxChange(e)} />
215-
</div>
216-
}
217-
<div className="inline-flex">
218-
<Persona className={this.state.isSpeaking ? `speaking-border-for-initials` : ``}
219-
size={PersonaSize.size40}
220-
text={ this.state.displayName ?
221-
this.state.displayName :
222-
this.state.participantIds.toString()
223-
}
224-
secondaryText={this.getSecondaryText()}
225-
styles={{ primaryText: {color: '#edebe9'}, secondaryText: {color: '#edebe9'} }}/>
209+
<div className="inline-flex align-items-center">
210+
{
211+
this.isCheckable &&
212+
<div className="mr-3 inline-flex">
213+
<input type="checkbox" onChange={e => this.handleCheckboxChange(e)} />
226214
</div>
215+
}
216+
<div className="inline-flex">
217+
<Persona className={this.state.isSpeaking ? `speaking-border-for-initials` : ``}
218+
size={PersonaSize.size40}
219+
text={ this.state.displayName ?
220+
this.state.displayName :
221+
this.state.participantIds.toString()
222+
}
223+
secondaryText={this.getSecondaryText()}
224+
styles={{ primaryText: {color: '#edebe9'}, secondaryText: {color: '#edebe9'} }}/>
227225
</div>
228-
<div className="inline-flex align-items-center ml-5">
229-
{
230-
this.props.mediaAccess?.isVideoPermitted === false ? <div className="in-call-button inline-block"
231-
title={`${this.state.isMuted ? 'Participant camera disabled': ``}`}
232-
disabled={true}>
233-
<Icon iconName={this.state.isMuted ? "VideoOff" : "Video"}/>
234-
</div> : undefined
235-
}
236-
{
237-
this.props.mediaAccess?.isAudioPermitted === false ? <div className="in-call-button inline-block"
238-
title={`${this.state.isMuted ? 'Participant mic disabled': ``}`}
239-
disabled={true}>
240-
<Icon iconName={this.state.isMuted ? "MicOff" : "Microphone"}/>
241-
</div> : <div className="in-call-button inline-block"
242-
title={`${this.state.isMuted ? 'Participant is muted': ``}`}
243-
onClick={e => this.handleMuteParticipant(e, this.remoteParticipant)}>
244-
<Icon iconName={this.state.isMuted ? "MicOff2" : "Microphone"}/>
245-
</div>
246-
}
247-
{
248-
!(isPhoneNumberIdentifier(this.remoteParticipant.identifier) || isUnknownIdentifier(this.remoteParticipant.identifier)) &&
249-
<div className="in-call-button inline-block"
250-
title={this.state.isHandRaised ? "Lower Participant Hand":``}
251-
variant="secondary"
252-
onClick={() => this.handleRemoteRaiseHand()}>
253-
<Icon iconName="HandsFree" className={this.state.isHandRaised ? "callFeatureEnabled" : ``}/>
254-
</div>
255-
}
256-
<div className="inline-block">
257-
<ParticipantMenuOptions
258-
id={this.remoteParticipant.identifier}
259-
appendMenuitems={this.getMenuItems()}
260-
menuOptionsHandler={this.menuOptionsHandler}
261-
menuOptionsState={{isSpotlighted: this.state.isSpotlighted}} />
262-
</div>
263-
<div className="inline-block">
264-
{
265-
this.state.state === "InLobby" ?
266-
<div className="text-right lobby-action" id="lobbyAction" hidden={this.state.canManageLobby === false}>
267-
<a href="#" onClick={e => this.admitParticipant(e)} className="float-right ml-3 green-link"> Admit</a>
268-
<a href="#" onClick={e => this.rejectParticipant(e)} className="float-right ml-3 red-link"> Reject</a>
269-
</div> :
270-
<div className="in-call-button inline-block"
271-
title={`Remove participant`}
272-
variant="secondary"
273-
onClick={(e) => this.handleRemoveParticipant(e, this.remoteParticipant.identifier)}>
274-
<Icon iconName="UserRemove" />
275-
</div>
276-
}
226+
</div>
227+
<div className="inline-flex align-items-center ml-3">
228+
{
229+
this.props.mediaAccess?.isVideoPermitted === false ? <div className="in-call-button inline-block"
230+
title={`${this.state.isMuted ? 'Participant camera disabled': ``}`}
231+
disabled={true}>
232+
<Icon iconName={this.state.isMuted ? "VideoOff" : "Video"}/>
233+
</div> : undefined
234+
}
235+
{
236+
this.props.mediaAccess?.isAudioPermitted === false ? <div className="in-call-button inline-block"
237+
title={`${this.state.isMuted ? 'Participant mic disabled': ``}`}
238+
disabled={true}>
239+
<Icon iconName={this.state.isMuted ? "MicOff" : "Microphone"}/>
240+
</div> : <div className="in-call-button inline-block"
241+
title={`${this.state.isMuted ? 'Participant is muted': ``}`}
242+
onClick={e => this.handleMuteParticipant(e, this.remoteParticipant)}>
243+
<Icon iconName={this.state.isMuted ? "MicOff2" : "Microphone"}/>
277244
</div>
245+
}
246+
{
247+
!(isPhoneNumberIdentifier(this.remoteParticipant.identifier) || isUnknownIdentifier(this.remoteParticipant.identifier)) &&
248+
<div className="in-call-button inline-block"
249+
title={this.state.isHandRaised ? "Lower Participant Hand":``}
250+
variant="secondary"
251+
onClick={() => this.handleRemoteRaiseHand()}>
252+
<Icon iconName="HandsFree" className={this.state.isHandRaised ? "callFeatureEnabled" : ``}/>
253+
</div>
254+
}
255+
<div className="inline-block">
256+
<ParticipantMenuOptions
257+
id={this.remoteParticipant.identifier}
258+
appendMenuitems={this.getMenuItems()}
259+
menuOptionsHandler={this.menuOptionsHandler}
260+
menuOptionsState={{isSpotlighted: this.state.isSpotlighted}} />
261+
</div>
262+
<div className="inline-block">
263+
{
264+
this.state.state === "InLobby" ?
265+
<div className="text-right lobby-action" id="lobbyAction" hidden={this.state.canManageLobby === false}>
266+
<a href="#" onClick={e => this.admitParticipant(e)} className="float-right ml-3 green-link"> Admit</a>
267+
<a href="#" onClick={e => this.rejectParticipant(e)} className="float-right ml-3 red-link"> Reject</a>
268+
</div> :
269+
<div className="in-call-button inline-block"
270+
title={`Remove participant`}
271+
variant="secondary"
272+
onClick={(e) => this.handleRemoveParticipant(e, this.remoteParticipant.identifier)}>
273+
<Icon iconName="UserRemove" />
274+
</div>
275+
}
278276
</div>
279277
</div>
280278
</li>

0 commit comments

Comments
 (0)