Select add/replace/remove instead of state reload on WS events

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

@@ -30,8 +30,9 @@
             <div class="py-2 font-weight-normal mcp-theme-1 flex-grow-1">
                 <i class="fa fa-user-injured small mr-2"></i><a href="#" onclick="return window.top.openInLHS('/patients/view/{{$client->uid}}')">
                     <span class="font-weight-bold">{{ $client->displayName() }}</span>
-                    <span class="text-secondary ml-4">{{ $pro->displayName() }}</span>
-                    <span class="text-secondary ml-4">{{ date('H:i:s') }}</span>
+                    <span class="text-secondary ml-3">{{ $pro->displayName() }}</span>
+                    <span class="text-secondary ml-3">{{ $session->uid }}</span>
+                    <span class="text-secondary ml-3">{{ date('H:i:s') }}</span>
                 </a>
             </div>
             @endif
@@ -60,9 +61,9 @@
                          :data-uid="participant.mediaServiceIdentifier"
                          :data-name="participant.displayName"
                          :data-type="participant.participantType"
-                         :data-audio="participant.media.isMicrophoneOn ? 'on' : 'off'"
+                         :data-audio="participant.media && participant.media.isMicrophoneOn ? 'on' : 'off'"
                          class="remote-view thumb-view">
-                        <i v-show="!participant.media.isMicrophoneOn" class="fa fa-microphone-slash muted"></i>
+                        <i v-show="!participant.media || !participant.media.isMicrophoneOn" class="fa fa-microphone-slash muted"></i>
                     </div>
                 </div>
                 <div class="call-actions d-flex align-items-center">
@@ -234,7 +235,7 @@
                     getMeetingInfo: function(_firstRun = false) {
                         $.post('/api/meeting/getMyMeeting', (_data) => {
                             if(_data && _data.success) {
-                                let state = JSON.parse(_data.data);
+                                let state = _data.data;
                                 console.log(state);
 
                                 // overwrite model data
@@ -263,7 +264,7 @@
 
                                 console.log(this.$data);
                             }
-                        });
+                        }, 'json');
                     },
                     registerSocket: function(_done) {
                         let socket = new SockJS(this.backendWsURL);
@@ -281,12 +282,21 @@
                     },
                     initSocketListeners: function() {
 
+                        function _isSelf(_eventData) {
+                            return _eventData.performer === '{{ $session->uid  }}';
+                        }
+
                         this.socketClient.subscribe("/user/topic/newParticipant", (message) => {
                             console.log("newParticipant received:", message.body);
-
-                            // refresh meeting data
-                            // TODO: do participant replace
-                            this.getMeetingInfo();
+                            if(message && message.body) {
+                                let eventData = JSON.parse(message.body);
+                                if(!_isSelf(eventData) && eventData.data) {
+                                    let existing = this.otherParticipants.filter(_participant => {
+                                        return _participant.uid === eventData.performer;
+                                    });
+                                    if(!existing.length) this.otherParticipants.push(eventData);
+                                }
+                            }
                         });
 
                         this.socketClient.subscribe("/user/topic/myMicrophoneIsAcquired", (message) => {
@@ -299,16 +309,32 @@
 
                         this.socketClient.subscribe("/user/topic/myMicrophoneIsOn", (message) => {
                             console.log("myMicrophoneIsOn received:", message.body);
-                            // refresh meeting data
-                            // TODO: do participant replace
-                            this.getMeetingInfo();
+                            if(message && message.body) {
+                                let eventData = JSON.parse(message.body);
+                                if(!_isSelf(eventData) && eventData.data) {
+                                    for (let i = 0; i < this.otherParticipants.length; i++) {
+                                        if(this.otherParticipants[i].uid === eventData.performer) {
+                                            this.otherParticipants[i].media.isMicrophoneOn = true;
+                                            break;
+                                        }
+                                    }
+                                }
+                            }
                         });
 
                         this.socketClient.subscribe("/user/topic/myMicrophoneIsOff", (message) => {
-                            console.log("myMicrophoneIsOff received:", message.body);
-                            // refresh meeting data
-                            // TODO: do participant replace
-                            this.getMeetingInfo();
+                            console.log("ALIX myMicrophoneIsOff received:", message.body);
+                            if(message && message.body) {
+                                let eventData = JSON.parse(message.body);
+                                if(!_isSelf(eventData) && eventData.data) {
+                                    for (let i = 0; i < this.otherParticipants.length; i++) {
+                                        if(this.otherParticipants[i].uid === eventData.performer) {
+                                            this.otherParticipants[i].media.isMicrophoneOn = false;
+                                            break;
+                                        }
+                                    }
+                                }
+                            }
                         });
 
                         this.socketClient.subscribe("/user/topic/myCameraIsAcquired", (message) => {
@@ -341,9 +367,14 @@
 
                         this.socketClient.subscribe("/user/topic/leaveClientRoom", (message) => {
                             console.log("leaveClientRoom received:", message.body);
-                            // refresh meeting data
-                            // TODO: do participant thumb removal
-                            this.getMeetingInfo();
+                            if(message && message.body) {
+                                let eventData = JSON.parse(message.body);
+                                if(!_isSelf(eventData) && eventData.data) {
+                                    this.otherParticipants = this.otherParticipants.filter(_participant => {
+                                         return _participant.uid !== eventData.performer;
+                                    });
+                                }
+                            }
                         });
 
                     },