From 0fcab8d90f005828504755fc23896055b122ec4b Mon Sep 17 00:00:00 2001
From: elavarasid <elavarasid@microsoft.com>
Date: Fri, 1 Dec 2023 20:23:07 -0800
Subject: [PATCH 1/2] Disable mic / camera button functionality based on
 capabilities with a tool tip.

---
 Project/src/App.css              |  9 +++++++++
 Project/src/MakeCall/CallCard.js | 13 ++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/Project/src/App.css b/Project/src/App.css
index 12f0e0f4..835293ee 100644
--- a/Project/src/App.css
+++ b/Project/src/App.css
@@ -126,6 +126,9 @@ input:disabled {
   height: 30px;
   animation: spin 1.5s linear infinite;
 }
+.graybutton {
+  disabled: true;
+}
 
 @keyframes spin {
   0% {
@@ -371,6 +374,12 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox-
   display: inline;
 }
 
+.in-call-button.disabled {
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+  color: gray
+}
+
 .in-call-button:hover,
 .incoming-call-button:hover {
   cursor: pointer;
diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
index 0cc60632..99660882 100644
--- a/Project/src/MakeCall/CallCard.js
+++ b/Project/src/MakeCall/CallCard.js
@@ -635,7 +635,9 @@ export default class CallCard extends React.Component {
             if (!this.call.isMuted) {
                 await this.call.mute();
             } else {
-                await this.call.unmute();
+                if (this.call.canUnMuteMic) {
+                    await this.call.unmute();
+                }
             }
             this.setState({ micMuted: this.call.isMuted });
         } catch (e) {
@@ -1084,8 +1086,8 @@ export default class CallCard extends React.Component {
                 </div>
                 <div className="ms-Grid-row">
                     <div className="text-center">
-                        <span className="in-call-button"
-                            title={`Turn your video ${this.state.videoOn ? 'off' : 'on'}`}
+                        <span className={`in-call-button ${!this.state.canOnVideo && 'disabled'}`}
+                            title={!this.state.canOnVideo ? `No permission to turn on video` : `Turn your video ${this.state.videoOn ? 'off' : 'on'}`}
                             variant="secondary"
                             onClick={() => this.handleVideoOnOff()}>
                             {
@@ -1097,9 +1099,10 @@ export default class CallCard extends React.Component {
                                 <Icon iconName="VideoOff" />
                             }
                         </span>
-                        <span className="in-call-button"
-                            title={`${this.state.micMuted ? 'Unmute' : 'Mute'} your microphone`}
+                        <span className={`in-call-button ${!this.state.canUnMuteMic && 'disabled'}`}
+                            title={!this.state.canUnMuteMic ? `No permission to unmute mic` : `${this.state.micMuted ? 'Unmute' : 'Mute'} your microphone`}
                             variant="secondary"
+                            disabled="true"
                             onClick={() => this.handleMicOnOff()}>
                             {
                                 this.state.canUnMuteMic && !this.state.micMuted &&

From ed2f2719e56cd0c0c88f6bbf741d3e32cedf4426 Mon Sep 17 00:00:00 2001
From: elavarasid <elavarasid@microsoft.com>
Date: Tue, 19 Dec 2023 17:19:34 -0800
Subject: [PATCH 2/2] Update className conditoin

---
 Project/src/MakeCall/CallCard.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Project/src/MakeCall/CallCard.js b/Project/src/MakeCall/CallCard.js
index 99660882..e6ba9783 100644
--- a/Project/src/MakeCall/CallCard.js
+++ b/Project/src/MakeCall/CallCard.js
@@ -635,7 +635,7 @@ export default class CallCard extends React.Component {
             if (!this.call.isMuted) {
                 await this.call.mute();
             } else {
-                if (this.call.canUnMuteMic) {
+                if (this.state.canUnMuteMic) {
                     await this.call.unmute();
                 }
             }
@@ -1086,7 +1086,7 @@ export default class CallCard extends React.Component {
                 </div>
                 <div className="ms-Grid-row">
                     <div className="text-center">
-                        <span className={`in-call-button ${!this.state.canOnVideo && 'disabled'}`}
+                        <span className={`in-call-button ${!this.state.canOnVideo ? `disabled` : ``}`}
                             title={!this.state.canOnVideo ? `No permission to turn on video` : `Turn your video ${this.state.videoOn ? 'off' : 'on'}`}
                             variant="secondary"
                             onClick={() => this.handleVideoOnOff()}>
@@ -1099,7 +1099,7 @@ export default class CallCard extends React.Component {
                                 <Icon iconName="VideoOff" />
                             }
                         </span>
-                        <span className={`in-call-button ${!this.state.canUnMuteMic && 'disabled'}`}
+                        <span className={`in-call-button ${!this.state.canUnMuteMic ? `disabled` : ``}`}
                             title={!this.state.canUnMuteMic ? `No permission to unmute mic` : `${this.state.micMuted ? 'Unmute' : 'Mute'} your microphone`}
                             variant="secondary"
                             disabled="true"