From 4b336ce18d819fd62775512e80f979b9a0b62c79 Mon Sep 17 00:00:00 2001
From: Sharif Rahaman <srahaman@microsoft.com>
Date: Tue, 21 May 2024 17:59:51 -0700
Subject: [PATCH] Remote UFD feature and UI updates

---
 Project/src/MakeCall/CallCard.js              | 150 +++++++++---------
 Project/src/MakeCall/MakeCall.js              |  40 +++--
 Project/src/MakeCall/RemoteParticipantCard.js |   6 +-
 3 files changed, 114 insertions(+), 82 deletions(-)

diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
index 854f50af..c6fd1a9d 100644
--- a/Project/src/MakeCall/CallCard.js
+++ b/Project/src/MakeCall/CallCard.js
@@ -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,
@@ -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">
@@ -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>
         );
     }
diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js
index ec2505ea..67776f61 100644
--- a/Project/src/MakeCall/MakeCall.js
+++ b/Project/src/MakeCall/MakeCall.js
@@ -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 => {
diff --git a/Project/src/MakeCall/RemoteParticipantCard.js b/Project/src/MakeCall/RemoteParticipantCard.js
index bd37a5f0..a31b7239 100644
--- a/Project/src/MakeCall/RemoteParticipantCard.js
+++ b/Project/src/MakeCall/RemoteParticipantCard.js
@@ -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) {
@@ -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>