Skip to content

Fix participant panel when rendering videos #270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 23, 2025
Merged

Fix participant panel when rendering videos #270

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c46285f
Fix participant panel when rendering videos
chriswhilar Apr 23, 2025
c797bf2
double quote
chriswhilar Apr 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions Project/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion Project/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "1.0.0",
"private": true,
"dependencies": {
"@azure/communication-calling": "1.34.1-beta.2",
"@azure/communication-calling": "1.35.1-beta.1",
"@azure/communication-calling-effects": "1.1.1-beta.1",
"@azure/communication-common": "^2.3.0",
"@azure/communication-identity": "^1.3.0",
Expand Down
2 changes: 2 additions & 0 deletions Project/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,8 @@ ul {
}

.participant-item {
display: flex;
flex-wrap: wrap;;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

double ;;

padding-top: 2em;
padding-bottom: 2em;
padding-left: 1em;
Expand Down
34 changes: 18 additions & 16 deletions Project/src/MakeCall/CallCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1506,22 +1506,24 @@ export default class CallCard extends React.Component {

</div>
}
<div>
{
this.state.remoteScreenShareStream &&
<StreamRenderer
key={`${utils.getIdentifierText(this.state.remoteScreenShareStream.participant.identifier)}-${this.state.remoteScreenShareStream.stream.mediaStreamType}-${this.state.remoteScreenShareStream.stream.id}`}
ref={this.state.remoteScreenShareStream.streamRendererComponentRef}
stream={this.state.remoteScreenShareStream.stream}
remoteParticipant={this.state.remoteScreenShareStream.participant}
dominantSpeakerMode={this.state.dominantSpeakerMode}
dominantRemoteParticipant={this.state.dominantRemoteParticipant}
call={this.call}
showMediaStats={this.state.logMediaStats}
streamCount={streamCount}
/>
}
</div>
</div>
<div className="ms-Grid-row">
{
this.state.remoteScreenShareStream &&
<StreamRenderer
key={`${utils.getIdentifierText(this.state.remoteScreenShareStream.participant.identifier)}-${this.state.remoteScreenShareStream.stream.mediaStreamType}-${this.state.remoteScreenShareStream.stream.id}`}
ref={this.state.remoteScreenShareStream.streamRendererComponentRef}
stream={this.state.remoteScreenShareStream.stream}
remoteParticipant={this.state.remoteScreenShareStream.participant}
dominantSpeakerMode={this.state.dominantSpeakerMode}
dominantRemoteParticipant={this.state.dominantRemoteParticipant}
call={this.call}
showMediaStats={this.state.logMediaStats}
streamCount={streamCount}
/>
}
</div>
<div className="ms-Grid-row">
<div className="video-grid-row">
{
(this.state.callState === 'Connected' ||
Expand Down
130 changes: 64 additions & 66 deletions Project/src/MakeCall/RemoteParticipantCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,75 +206,73 @@ export default class RemoteParticipantCard extends React.Component {
render() {
return (
<li className={this.state.isSpotlighted ? 'participant-item spotlightEnabled':'participant-item'} key={utils.getIdentifierText(this.remoteParticipant.identifier)}>
<div className="ms-Grid-row">
<div className="inline-flex align-items-center">
{
this.isCheckable &&
<div className="mr-3 inline-flex">
<input type="checkbox" onChange={e => this.handleCheckboxChange(e)} />
</div>
}
<div className="inline-flex">
<Persona className={this.state.isSpeaking ? `speaking-border-for-initials` : ``}
size={PersonaSize.size40}
text={ this.state.displayName ?
this.state.displayName :
this.state.participantIds.toString()
}
secondaryText={this.getSecondaryText()}
styles={{ primaryText: {color: '#edebe9'}, secondaryText: {color: '#edebe9'} }}/>
<div className="inline-flex align-items-center">
{
this.isCheckable &&
<div className="mr-3 inline-flex">
<input type="checkbox" onChange={e => this.handleCheckboxChange(e)} />
</div>
}
<div className="inline-flex">
<Persona className={this.state.isSpeaking ? `speaking-border-for-initials` : ``}
size={PersonaSize.size40}
text={ this.state.displayName ?
this.state.displayName :
this.state.participantIds.toString()
}
secondaryText={this.getSecondaryText()}
styles={{ primaryText: {color: '#edebe9'}, secondaryText: {color: '#edebe9'} }}/>
</div>
<div className="inline-flex align-items-center ml-5">
{
this.props.mediaAccess?.isVideoPermitted === false ? <div className="in-call-button inline-block"
title={`${this.state.isMuted ? 'Participant camera disabled': ``}`}
disabled={true}>
<Icon iconName={this.state.isMuted ? "VideoOff" : "Video"}/>
</div> : undefined
}
{
this.props.mediaAccess?.isAudioPermitted === false ? <div className="in-call-button inline-block"
title={`${this.state.isMuted ? 'Participant mic disabled': ``}`}
disabled={true}>
<Icon iconName={this.state.isMuted ? "MicOff" : "Microphone"}/>
</div> : <div className="in-call-button inline-block"
title={`${this.state.isMuted ? 'Participant is muted': ``}`}
onClick={e => this.handleMuteParticipant(e, this.remoteParticipant)}>
<Icon iconName={this.state.isMuted ? "MicOff2" : "Microphone"}/>
</div>
}
{
!(isPhoneNumberIdentifier(this.remoteParticipant.identifier) || isUnknownIdentifier(this.remoteParticipant.identifier)) &&
<div className="in-call-button inline-block"
title={this.state.isHandRaised ? "Lower Participant Hand":``}
variant="secondary"
onClick={() => this.handleRemoteRaiseHand()}>
<Icon iconName="HandsFree" className={this.state.isHandRaised ? "callFeatureEnabled" : ``}/>
</div>
}
<div className="inline-block">
<ParticipantMenuOptions
id={this.remoteParticipant.identifier}
appendMenuitems={this.getMenuItems()}
menuOptionsHandler={this.menuOptionsHandler}
menuOptionsState={{isSpotlighted: this.state.isSpotlighted}} />
</div>
<div className="inline-block">
{
this.state.state === "InLobby" ?
<div className="text-right lobby-action" id="lobbyAction" hidden={this.state.canManageLobby === false}>
<a href="#" onClick={e => this.admitParticipant(e)} className="float-right ml-3 green-link"> Admit</a>
<a href="#" onClick={e => this.rejectParticipant(e)} className="float-right ml-3 red-link"> Reject</a>
</div> :
<div className="in-call-button inline-block"
title={`Remove participant`}
variant="secondary"
onClick={(e) => this.handleRemoveParticipant(e, this.remoteParticipant.identifier)}>
<Icon iconName="UserRemove" />
</div>
}
</div>
<div className="inline-flex align-items-center ml-3">
{
this.props.mediaAccess?.isVideoPermitted === false ? <div className="in-call-button inline-block"
title={`${this.state.isMuted ? 'Participant camera disabled': ``}`}
disabled={true}>
<Icon iconName={this.state.isMuted ? "VideoOff" : "Video"}/>
</div> : undefined
}
{
this.props.mediaAccess?.isAudioPermitted === false ? <div className="in-call-button inline-block"
title={`${this.state.isMuted ? 'Participant mic disabled': ``}`}
disabled={true}>
<Icon iconName={this.state.isMuted ? "MicOff" : "Microphone"}/>
</div> : <div className="in-call-button inline-block"
title={`${this.state.isMuted ? 'Participant is muted': ``}`}
onClick={e => this.handleMuteParticipant(e, this.remoteParticipant)}>
<Icon iconName={this.state.isMuted ? "MicOff2" : "Microphone"}/>
</div>
}
{
!(isPhoneNumberIdentifier(this.remoteParticipant.identifier) || isUnknownIdentifier(this.remoteParticipant.identifier)) &&
<div className="in-call-button inline-block"
title={this.state.isHandRaised ? "Lower Participant Hand":``}
variant="secondary"
onClick={() => this.handleRemoteRaiseHand()}>
<Icon iconName="HandsFree" className={this.state.isHandRaised ? "callFeatureEnabled" : ``}/>
</div>
}
<div className="inline-block">
<ParticipantMenuOptions
id={this.remoteParticipant.identifier}
appendMenuitems={this.getMenuItems()}
menuOptionsHandler={this.menuOptionsHandler}
menuOptionsState={{isSpotlighted: this.state.isSpotlighted}} />
</div>
<div className="inline-block">
{
this.state.state === "InLobby" ?
<div className="text-right lobby-action" id="lobbyAction" hidden={this.state.canManageLobby === false}>
<a href="#" onClick={e => this.admitParticipant(e)} className="float-right ml-3 green-link"> Admit</a>
<a href="#" onClick={e => this.rejectParticipant(e)} className="float-right ml-3 red-link"> Reject</a>
</div> :
<div className="in-call-button inline-block"
title={`Remove participant`}
variant="secondary"
onClick={(e) => this.handleRemoveParticipant(e, this.remoteParticipant.identifier)}>
<Icon iconName="UserRemove" />
</div>
}
</div>
</div>
</li>
Expand Down
Loading