Cam/mic acquire/on updates

public/css/meeting.css

@@ -169,10 +169,11 @@ h1 {
     font-size: 12px;
     color: #fff;
     background: #333;
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
     text-align: center;
-    line-height: 18px;
+    line-height: 20px;
+    border-radius: 3px;
 }
 .main-view .thumbs .disconnected-view {
     opacity: 0;

resources/views/app/video/call-agora-v2.blade.php

@@ -70,7 +70,9 @@
                          :data-audio="myMedia && myMedia.isMicrophoneOn ? 'on' : 'off'"
                          v-on:click.prevent="showInCenterView(true, myMediaServiceIdentifier, 'You', 'PRO')"
                          class="remote-view thumb-view c-pointer">
-                        <i v-show="!myMedia || !myMedia.isMicrophoneOn" class="fa fa-microphone-slash muted"></i>
+                        <i v-show="!myMedia || !myMedia.isMicrophoneOn"
+                           class="fa fa-microphone-slash muted"
+                           :class="!myMedia || !myMedia.isMicrophoneAcquired ? 'text-danger' : ''"></i>
                     </div>
                     <div v-for="participant in otherParticipants"
                          v-if="mainViewParticipant.uid !== (+participant.mediaServiceIdentifier)"
@@ -82,7 +84,9 @@
                          :data-audio="participant.media && participant.media.isMicrophoneOn ? 'on' : 'off'"
                          v-on:click.prevent="showInCenterView(false, participant.mediaServiceIdentifier, participant.displayName, participant.participantType)"
                          class="remote-view thumb-view c-pointer">
-                        <i v-show="!participant.media || !participant.media.isMicrophoneOn" class="fa fa-microphone-slash muted"></i>
+                        <i v-show="!participant.media || !participant.media.isMicrophoneOn"
+                           class="fa fa-microphone-slash muted"
+                           :class="!participant.media || !participant.media.isMicrophoneAcquired ? 'text-danger' : ''"></i>
                     </div>
                 </div>
                 <div class="call-actions d-flex align-items-center">
@@ -439,10 +443,12 @@
                                 }
                                 else {
                                     this.myCameraIsNotAcquired();
+                                    this.myCameraIsOff();
                                 }
                             }
                             else {
                                 this.myCameraIsNotAcquired();
+                                this.myCameraIsOff();
                             }
 
                             // notify others about my microphone status
@@ -453,10 +459,12 @@
                                 }
                                 else {
                                     this.myMicrophoneIsNotAcquired();
+                                    this.myMicrophoneIsOff();
                                 }
                             }
                             else {
                                 this.myMicrophoneIsNotAcquired();
+                                this.myMicrophoneIsOff();
                             }
 
                         }
@@ -549,19 +557,19 @@
                             JSON.stringify({sessionKey: '{{$performer->session_key}}'})
                         );
                     },
-                    myMicrophoneIsOn: function (_notifyOnly = false) {
-                        if(!this.myMedia.isMicrophoneAcquired) return;
-                        if(!_notifyOnly) {
+                    myMicrophoneIsOn: function () {
+                        if(this.myMicrophone) {
                             this.myMicrophone.setEnabled(true);
-                            this.myMedia.isMicrophoneOn = true;
                         }
+                        this.myMedia.isMicrophoneOn = true;
                         this.socketClient.send("/app/myMicrophoneIsOn", {},
                             JSON.stringify({sessionKey: '{{$performer->session_key}}'})
                         );
                     },
                     myMicrophoneIsOff: function () {
-                        if(!this.myMedia.isMicrophoneAcquired) return;
-                        this.myMicrophone.setEnabled(false);
+                        if(this.myMicrophone) {
+                            this.myMicrophone.setEnabled(false);
+                        }
                         this.myMedia.isMicrophoneOn = false;
                         this.socketClient.send("/app/myMicrophoneIsOff", {},
                             JSON.stringify({sessionKey: '{{$performer->session_key}}'})
@@ -577,19 +585,19 @@
                             JSON.stringify({sessionKey: '{{$performer->session_key}}'})
                         );
                     },
-                    myCameraIsOn: function (_notifyOnly = false) {
-                        if(!this.myMedia.isCameraAcquired) return;
-                        if(!_notifyOnly) {
+                    myCameraIsOn: function () {
+                        if(this.myCamera) {
                             this.myCamera.setEnabled(true);
-                            this.myMedia.isCameraOn = true;
                         }
+                        this.myMedia.isCameraOn = true;
                         this.socketClient.send("/app/myCameraIsOn", {},
                             JSON.stringify({sessionKey: '{{$performer->session_key}}'})
                         );
                     },
                     myCameraIsOff: function () {
-                        if(!this.myMedia.isCameraAcquired) return;
-                        this.myCamera.setEnabled(false);
+                        if(this.myCamera) {
+                            this.myCamera.setEnabled(false);
+                        }
                         this.myMedia.isCameraOn = false;
                         this.socketClient.send("/app/myCameraIsOff", {},
                             JSON.stringify({sessionKey: '{{$performer->session_key}}'})