From 5245a3656ee42ebc8f06f4cec5d3ff397407750f Mon Sep 17 00:00:00 2001
From: Allison Chiang <allchiang@microsoft.com>
Date: Fri, 5 Jul 2024 10:53:04 -0700
Subject: [PATCH] add muteOthers capability

---
 Project/src/MakeCall/CallCard.js              | 20 +++++++++++++------
 Project/src/MakeCall/RemoteParticipantCard.js |  7 ++++++-
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
index 66ae7da..827b2d8 100644
--- a/Project/src/MakeCall/CallCard.js
+++ b/Project/src/MakeCall/CallCard.js
@@ -64,6 +64,7 @@ export default class CallCard extends React.Component {
             canShareScreen: this.capabilities.shareScreen?.isPresent || this.capabilities.shareScreen?.reason === 'FeatureNotSupported',
             canRaiseHands: this.capabilities.raiseHand?.isPresent || this.capabilities.raiseHand?.reason === 'FeatureNotSupported',
             canSpotlight: this.capabilities.spotlightParticipant?.isPresent || this.capabilities.spotlightParticipant?.reason === 'FeatureNotSupported',
+            canMuteOthers: this.capabilities.muteOthers?.isPresent || this.capabilities.muteOthers?.reason === 'FeatureNotSupported',
             canReact: this.capabilities.useReactions?.isPresent || this.capabilities.useReactions?.reason === 'FeatureNotSupported',
             videoOn: this.call.isLocalVideoStarted,
             screenSharingOn: this.call.isScreenSharingOn,
@@ -612,6 +613,10 @@ export default class CallCard extends React.Component {
                 (value.isPresent) ? this.setState({ canRaiseHands: true }) : this.setState({ canRaiseHands: false });
                 continue;
             }
+            if(key === 'muteOthers' && value.reason != 'FeatureNotSupported') {
+                (value.isPresent) ? this.setState({ canMuteOthers: true }) : this.setState({ canMuteOthers: false });
+                continue;
+            }
             if(key === 'reaction' && value.reason != 'FeatureNotSupported') {
                 (value.isPresent) ? this.setState({ canReact: true }) : this.setState({ canReact: false });
                 continue;
@@ -1319,12 +1324,15 @@ export default class CallCard extends React.Component {
                                 <Icon iconName="Volume2" />
                             }
                         </span>
-                        <span className="in-call-button"
-                            title={`Mute all other participants`}
-                            variant="secondary"
-                            onClick={() => this.handleMuteAllRemoteParticipants()}>
-                            <Icon iconName="VolumeDisabled" />
-                        </span>
+                        {
+                            this.state.canMuteOthers &&
+                            <span className="in-call-button"
+                                title={`Mute all other participants`}
+                                variant="secondary"
+                                onClick={() => this.handleMuteAllRemoteParticipants()}>
+                                <Icon iconName="VolumeDisabled" />
+                            </span>
+                        }
                         <span className="in-call-button"
                             title={`${this.state.screenSharingOn && this.localScreenSharingStream?.mediaStreamType === 'RawMedia' ? 'Stop' : 'Start'} screen sharing a dummy stream`}
                             variant="secondary"
diff --git a/Project/src/MakeCall/RemoteParticipantCard.js b/Project/src/MakeCall/RemoteParticipantCard.js
index a76a8d1..3c84867 100644
--- a/Project/src/MakeCall/RemoteParticipantCard.js
+++ b/Project/src/MakeCall/RemoteParticipantCard.js
@@ -35,6 +35,7 @@ export default class RemoteParticipantCard extends React.Component {
             isHandRaised: utils.isParticipantHandRaised(this.remoteParticipant.identifier, this.raiseHandFeature.getRaisedHands()),
             isSpotlighted: utils.isParticipantHandRaised(this.remoteParticipant.identifier, this.spotlightFeature.getSpotlightedParticipants()),
             canManageLobby: this.capabilities.manageLobby?.isPresent || this.capabilities.manageLobby?.reason === 'FeatureNotSupported',
+            canMuteOthers: this.capabilities.muteOthers?.isPresent || this.capabilities.muteOthers?.reason === 'FeatureNotSupported',
         };
     }
 
@@ -108,7 +109,11 @@ export default class RemoteParticipantCard extends React.Component {
 
     handleMuteParticipant(e, remoteParticipant) {
         e.preventDefault();
-        remoteParticipant.mute?.().catch((e) => console.error('Failed to mute specific participant.', e))
+        if (this.state.canMuteOthers) {
+            remoteParticipant.mute?.().catch((e) => console.error('Failed to mute specific participant.', e.message, e));
+        } else {
+            console.error('Soft mute of remote participants is not a supported capability for this participant.');
+        }
     }
 
     handleCheckboxChange(e) {