Skip to content

Commit

Permalink
Merge pull request #229 from sharifrahaman/remote-ufd-and-ui-changes
Browse files Browse the repository at this point in the history 
Remote UFD feature and UI updates
  • Loading branch information
@sharifrahaman
sharifrahaman authored May 22, 2024
2 parents d99427b + 4b336ce commit 0521ef0
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 82 deletions.
150 changes: 79 additions & 71 deletions Project/src/MakeCall/CallCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ export default class CallCard extends React.Component {
selectedCameraDeviceId: props.selectedCameraDeviceId,
selectedSpeakerDeviceId: this.deviceManager.selectedSpeaker?.id,
selectedMicrophoneDeviceId: this.deviceManager.selectedMicrophone?.id,
isShowParticipants: false,
showSettings: false,
// StartWithNormal or StartWithDummy
localScreenSharingMode: undefined,
Expand Down Expand Up @@ -1115,39 +1116,86 @@ export default class CallCard extends React.Component {
<CurrentCallInformation sentResolution={this.state.sentResolution} call={this.call} />
}
</div>
<div className="video-grid-row">
{
(this.state.callState === 'Connected' ||
this.state.callState === 'LocalHold' ||
this.state.callState === 'RemoteHold') &&
this.state.allRemoteParticipantStreams.map(v =>
<StreamRenderer
key={`${utils.getIdentifierText(v.participant.identifier)}-${v.stream.mediaStreamType}-${v.stream.id}`}
ref={v.streamRendererComponentRef}
stream={v.stream}
remoteParticipant={v.participant}
dominantSpeakerMode={this.state.dominantSpeakerMode}
dominantRemoteParticipant={this.state.dominantRemoteParticipant}
call={this.call}
showMediaStats={this.state.logMediaStats}
/>
)
}
<div className="ms-Grid-row">
<div className="ms-Grid-col">
<h2 className="inline-block" onClick={() => this.setState({isShowParticipants: !this.state.isShowParticipants})}>&equiv; Participants</h2>
</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}
/>
)
this.state.callState === 'Connected' && this.state.isShowParticipants &&
<div className="ms-Grid-col ms-lg4">
<div>
{ this.state.showAddParticipantPanel &&
<AddParticipantPopover call={this.call} />
}
</div>
<div>
<Lobby call={this.call}/>
</div>
{
this.state.dominantSpeakerMode &&
<div>
Current dominant speaker: {this.state.dominantRemoteParticipant ? utils.getIdentifierText(this.state.dominantRemoteParticipant.identifier) : `None`}
</div>
}
{
this.state.remoteParticipants.length === 0 &&
<p>No other participants currently in the call</p>
}
<ul className="p-0 m-0">
{
this.state.remoteParticipants.map(remoteParticipant =>
<RemoteParticipantCard
key={`${utils.getIdentifierText(remoteParticipant.identifier)}`}
remoteParticipant={remoteParticipant}
call={this.call}
menuOptionsHandler={this.getParticipantMenuCallBacks()}
onSelectionChanged={(identifier, isChecked) => this.remoteParticipantSelectionChanged(identifier, isChecked)}
/>
)
}
</ul>

</div>
}

<div className={this.state.isShowParticipants ? "ms-Grid-col ms-lg8" : undefined}>
<div className="video-grid-row">
{
(this.state.callState === 'Connected' ||
this.state.callState === 'LocalHold' ||
this.state.callState === 'RemoteHold') &&
this.state.allRemoteParticipantStreams.map(v =>
<StreamRenderer
key={`${utils.getIdentifierText(v.participant.identifier)}-${v.stream.mediaStreamType}-${v.stream.id}`}
ref={v.streamRendererComponentRef}
stream={v.stream}
remoteParticipant={v.participant}
dominantSpeakerMode={this.state.dominantSpeakerMode}
dominantRemoteParticipant={this.state.dominantRemoteParticipant}
call={this.call}
showMediaStats={this.state.logMediaStats}
/>
)
}
{
(
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}
/>
)
}
</div>
</div>
</div>
<div className="ms-Grid-row">
<div className="text-center">
Expand Down Expand Up @@ -1650,46 +1698,6 @@ export default class CallCard extends React.Component {
</div>
</div>
}
{
this.state.callState === 'Connected' &&
<div className="mt-5">
<div className="ms-Grid-row">
<h2>Participants</h2>
</div>
<div>
{ this.state.showAddParticipantPanel &&
<AddParticipantPopover call={this.call} />
}
</div>
<div>
<Lobby call={this.call}/>
</div>
{
this.state.dominantSpeakerMode &&
<div>
Current dominant speaker: {this.state.dominantRemoteParticipant ? utils.getIdentifierText(this.state.dominantRemoteParticipant.identifier) : `None`}
</div>
}
{
this.state.remoteParticipants.length === 0 &&
<p>No other participants currently in the call</p>
}
<ul className="p-0 m-0">
{
this.state.remoteParticipants.map(remoteParticipant =>
<RemoteParticipantCard
key={`${utils.getIdentifierText(remoteParticipant.identifier)}`}
remoteParticipant={remoteParticipant}
call={this.call}
menuOptionsHandler={this.getParticipantMenuCallBacks()}
onSelectionChanged={(identifier, isChecked) => this.remoteParticipantSelectionChanged(identifier, isChecked)}
/>
)
}
</ul>
</div>

}
</div>
);
}
Expand Down
40 changes: 30 additions & 10 deletions Project/src/MakeCall/MakeCall.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,21 +162,41 @@ export default class MakeCall extends React.Component {
this.setState({ call: call });

const diagnosticChangedListener = (diagnosticInfo) => {
const rmsg = `UFD Diagnostic changed:
Diagnostic: ${diagnosticInfo.diagnostic}
Value: ${diagnosticInfo.value}
Value type: ${diagnosticInfo.valueType}`;
if (this.state.ufdMessages.length > 0) {
this.setState({ ufdMessages: [...this.state.ufdMessages, rmsg] });
} else {
this.setState({ ufdMessages: [rmsg] });
}

const rmsg = `UFD Diagnostic changed:
Diagnostic: ${diagnosticInfo.diagnostic}
Value: ${diagnosticInfo.value}
Value type: ${diagnosticInfo.valueType}`;
if (this.state.ufdMessages.length > 0) {
// limit speakingWhileMicrophoneIsMuted diagnostic until another diagnostic is received
if (diagnosticInfo.diagnostic === 'speakingWhileMicrophoneIsMuted' && this.state.ufdMessages[0].includes('speakingWhileMicrophoneIsMuted')) {
console.info(rmsg);
return;
}
this.setState({ ufdMessages: [rmsg, ...this.state.ufdMessages] });
} else {
this.setState({ ufdMessages: [rmsg] });
}
};

const remoteDiagnosticChangedListener = (diagnosticArgs) => {
diagnosticArgs.diagnostics.forEach(diagnosticInfo => {
const rmsg = `UFD Diagnostic changed:
Diagnostic: ${diagnosticInfo.diagnostic}
Value: ${diagnosticInfo.value}
Value type: ${diagnosticInfo.valueType}
Participant Id: ${diagnosticInfo.participantId}
Participant name: ${diagnosticInfo.remoteParticipant?.displayName}`;
if (this.state.ufdMessages.length > 0) {
this.setState({ ufdMessages: [rmsg, ...this.state.ufdMessages] });
} else {
this.setState({ ufdMessages: [rmsg] });
}
});
};

call.feature(Features.UserFacingDiagnostics).media.on('diagnosticChanged', diagnosticChangedListener);
call.feature(Features.UserFacingDiagnostics).network.on('diagnosticChanged', diagnosticChangedListener);
call.feature(Features.UserFacingDiagnostics).remote?.on('diagnosticChanged', remoteDiagnosticChangedListener);
});

e.removed.forEach(call => {
Expand Down
6 changes: 5 additions & 1 deletion Project/src/MakeCall/RemoteParticipantCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,10 @@ export default class RemoteParticipantCard extends React.Component {
return menuItems.filter(item => item != 0)
}

getSecondaryText() {
return `${this.state.state} | ${this.state.participantIds.toString()}`;
}

async handleRemoteRaiseHand() {
try {
if (this.state.isHandRaised) {
Expand Down Expand Up @@ -157,7 +161,7 @@ export default class RemoteParticipantCard extends React.Component {
this.state.displayName :
this.state.participantIds.toString()
}
secondaryText={this.state.state}
secondaryText={this.getSecondaryText()}
styles={{ primaryText: {color: '#edebe9'}, secondaryText: {color: '#edebe9'} }}/>
</div>
</div>
Expand Down

0 comments on commit 0521ef0

Please sign in to comment.