User type indicators, media status indicator fixes

public/css/meeting.css

@@ -112,7 +112,7 @@ h1 {
     color: #fff;
     font-size: 13px;
     white-space: nowrap;
-    padding: 0.5rem;
+    padding: 0.6rem 0.5rem 0.4rem 34px;
     overflow: hidden;
     text-overflow: ellipsis;
     pointer-events: none;
@@ -167,12 +167,17 @@ h1 {
     right: 3px;
     top: 3px;
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
+    width: calc(100% - 6px);
 }
 .full-view .media-status-indicator {
     right: 8px;
     top: 8px;
 }
+.full-view .user-type-indicator {
+    left: 8px;
+    top: 8px;
+}
 .media-status-indicator i.muted {
     font-size: 12px;
     color: #fff;
@@ -183,6 +188,36 @@ h1 {
     line-height: 20px;
     border-radius: 3px;
 }
+.user-type-indicator {
+    position: absolute;
+    z-index: 1;
+    left: 3px;
+    top: 3px;
+    display: flex;
+    justify-content: end;
+}
+.user-type-indicator i {
+    font-size: 12px;
+    color: #fff;
+    background: #333;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 3px;
+}
+.thumb-view .media-status-indicator i.muted,
+.thumb-view .user-type-indicator i {
+    font-size: 9px;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    opacity: 0.7;
+}
+.thumb-view:hover .media-status-indicator i.muted,
+.thumb-view:hover .user-type-indicator i {
+    opacity: 1;
+}
 .main-view .thumbs .disconnected-view {
     opacity: 0;
     height: 0;

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

@@ -59,13 +59,17 @@
                      :data-uid="mainViewParticipant.uid"
                      :data-name="mainViewParticipant.name"
                      :data-type="mainViewParticipant.type">
+                    <div class="user-type-indicator">
+                        <i v-if="mainViewParticipant.type === 'CLIENT_GUEST'" class="fa fa-user text-white"></i>
+                        <i v-if="mainViewParticipant.type === 'PRO'" class="fa fa-stethoscope text-white"></i>
+                    </div>
                     <div class="media-status-indicator">
-                        <i v-show="!myMedia || !myMedia.isCameraOn"
+                        <i v-show="!getMediaByMediaServiceId(mainViewParticipant.uid).isCameraOn"
                            class="fa fa-video-slash muted ml-1"
-                           :class="!myMedia || !myMedia.isCameraAcquired ? 'text-danger' : ''"></i>
-                        <i v-show="!myMedia || !myMedia.isMicrophoneOn"
+                           :class="!getMediaByMediaServiceId(mainViewParticipant.uid).isCameraAcquired ? 'text-danger' : 'text-white'"></i>
+                        <i v-show="!getMediaByMediaServiceId(mainViewParticipant.uid).isMicrophoneOn"
                            class="fa fa-microphone-slash muted ml-1"
-                           :class="!myMedia || !myMedia.isMicrophoneAcquired ? 'text-danger' : ''"></i>
+                           :class="!getMediaByMediaServiceId(mainViewParticipant.uid).isMicrophoneAcquired ? 'text-danger' : 'text-white'"></i>
                     </div>
                 </div>
                 <div class="thumbs">
@@ -78,13 +82,16 @@
                          :data-audio="myMedia && myMedia.isMicrophoneOn ? 'on' : 'off'"
                          v-on:click.prevent="showInCenterView(true, myMediaServiceIdentifier, 'You', 'PRO')"
                          class="remote-view thumb-view c-pointer">
+                        <div class="user-type-indicator">
+                            <i class="fa fa-stethoscope text-white"></i>
+                        </div>
                         <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>
+                               :class="!myMedia || !myMedia.isCameraAcquired ? 'text-danger' : 'text-white'"></i>
                             <i v-show="!myMedia || !myMedia.isMicrophoneOn"
                                class="fa fa-microphone-slash muted ml-1"
-                               :class="!myMedia || !myMedia.isMicrophoneAcquired ? 'text-danger' : ''"></i>
+                               :class="!myMedia || !myMedia.isMicrophoneAcquired ? 'text-danger' : 'text-white'"></i>
                         </div>
                     </div>
                     <div v-for="participant in otherParticipants"
@@ -97,13 +104,17 @@
                          :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">
+                        <div class="user-type-indicator">
+                            <i v-if="participant.participantType === 'CLIENT_GUEST'" class="fa fa-user text-white"></i>
+                            <i v-if="participant.participantType === 'PRO'" class="fa fa-stethoscope text-white"></i>
+                        </div>
                         <div class="media-status-indicator">
                             <i v-show="!participant.media || !participant.media.isCameraOn"
                                class="fa fa-video-slash muted ml-1"
-                               :class="!participant.media || !participant.media.isCameraAcquired ? 'text-danger' : ''"></i>
+                               :class="!participant.media || !participant.media.isCameraAcquired ? 'text-danger' : 'text-white'"></i>
                             <i v-show="!participant.media || !participant.media.isMicrophoneOn"
                                class="fa fa-microphone-slash muted ml-1"
-                               :class="!participant.media || !participant.media.isMicrophoneAcquired ? 'text-danger' : ''"></i>
+                               :class="!participant.media || !participant.media.isMicrophoneAcquired ? 'text-danger' : 'text-white'"></i>
                         </div>
                     </div>
                 </div>
@@ -697,6 +708,22 @@
                     // end: main view / thumb views
 
                     // start: other/misc
+                    getMediaByMediaServiceId: function(_msid) {
+                        if((+this.myMediaServiceIdentifier) === _msid) {               // is it self?
+                            return this.myMedia;
+                        }
+                        for (let i = 0; i < this.otherParticipants.length; i++) {   // or a remote participant
+                            if((+this.otherParticipants[i].mediaServiceIdentifier) === _msid) {
+                                return this.otherParticipants[i].media;
+                            }
+                        }
+                        return {    // return falsy object if nothing found
+                            isCameraAcquired: false,
+                            isCameraOn: false,
+                            isMicrophoneAcquired: false,
+                            isMicrophoneOn: false,
+                        };
+                    },
                     toggleRinger: function () {
                         $.post('/api/pro/' + (this.ringer ? 'turnOffRing' : 'turnOnRing'), (_data) => {
                             if(!this.hasError(_data)) {