Remote device status indicator in center view

public/css/meeting.css

@@ -161,7 +161,7 @@ h1 {
     font-weight: bold;
     text-align: center;
 }
-.main-view .thumbs .thumb-view>.media-status-indicator {
+.media-status-indicator {
     position: absolute;
     z-index: 1;
     right: 3px;
@@ -169,7 +169,11 @@ h1 {
     display: flex;
     justify-content: end;
 }
-.main-view .thumbs .thumb-view i.muted {
+.full-view .media-status-indicator {
+    right: 8px;
+    top: 8px;
+}
+.media-status-indicator i.muted {
     font-size: 12px;
     color: #fff;
     background: #333;

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

@@ -59,7 +59,16 @@
                      :data-self="mainViewParticipant.self"
                      :data-uid="mainViewParticipant.uid"
                      :data-name="mainViewParticipant.name"
-                     :data-type="mainViewParticipant.type"></div>
+                     :data-type="mainViewParticipant.type">
+                    <div class="media-status-indicator">
+                        <i v-show="!myMedia || !myMedia.isCameraOn"
+                           class="fa fa-video-slash muted ml-1"
+                           :class="!myMedia || !myMedia.isCameraAcquired ? 'text-danger' : ''"></i>
+                        <i v-show="!myMedia || !myMedia.isMicrophoneOn"
+                           class="fa fa-microphone-slash muted ml-1"
+                           :class="!myMedia || !myMedia.isMicrophoneAcquired ? 'text-danger' : ''"></i>
+                    </div>
+                </div>
                 <div class="thumbs">
                     <div v-if="mainViewParticipant.uid !== myMediaServiceIdentifier"
                          :id="'remote-view-' + myMediaServiceIdentifier"
@@ -571,13 +580,13 @@
                         );
                     },
                     myMicrophoneIsOn: function () {
-                        if(this.myMicrophone) {
+                        if(this.myMicrophone && this.myMedia.isMicrophoneAcquired) {
+                            this.myMedia.isMicrophoneOn = true;
                             this.myMicrophone.setEnabled(true);
+                            this.socketClient.send("/app/myMicrophoneIsOn", {},
+                                JSON.stringify({sessionKey: '{{$performer->session_key}}'})
+                            );
                         }
-                        this.myMedia.isMicrophoneOn = true;
-                        this.socketClient.send("/app/myMicrophoneIsOn", {},
-                            JSON.stringify({sessionKey: '{{$performer->session_key}}'})
-                        );
                     },
                     myMicrophoneIsOff: function () {
                         if(this.myMicrophone) {
@@ -599,13 +608,13 @@
                         );
                     },
                     myCameraIsOn: function () {
-                        if(this.myCamera) {
+                        if(this.myCamera && this.myMedia.isCameraAcquired) {
                             this.myCamera.setEnabled(true);
+                            this.myMedia.isCameraOn = true;
+                            this.socketClient.send("/app/myCameraIsOn", {},
+                                JSON.stringify({sessionKey: '{{$performer->session_key}}'})
+                            );
                         }
-                        this.myMedia.isCameraOn = true;
-                        this.socketClient.send("/app/myCameraIsOn", {},
-                            JSON.stringify({sessionKey: '{{$performer->session_key}}'})
-                        );
                     },
                     myCameraIsOff: function () {
                         if(this.myCamera) {