Handle CG editMyName, show own name after "You"

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

@@ -77,10 +77,10 @@
                          :id="'remote-view-' + myMediaServiceIdentifier"
                          :data-self="true"
                          :data-uid="myMediaServiceIdentifier"
-                         :data-name="'You'"
+                         :data-name="'You (' + myName + ')'"
                          :data-type="'PRO'"   {{-- TODO: change in FE4 --}}
                          :data-audio="myMedia && myMedia.isMicrophoneOn ? 'on' : 'off'"
-                         v-on:click.prevent="showInCenterView(true, myMediaServiceIdentifier, 'You', 'PRO')"
+                         v-on:click.prevent="showInCenterView(true, myMediaServiceIdentifier, 'You (' + myName + ')', 'PRO')"
                          class="remote-view thumb-view c-pointer">
                         <div class="user-type-indicator">
                             <i class="fa fa-stethoscope text-white"></i>
@@ -194,6 +194,7 @@
                         }
                     ],
                     awayMessage: '',
+                    myName: '{{ $performer->pro->displayName() }}',
 
                     // agora
                     mediaServiceClient: null, // set on agora init
@@ -220,7 +221,7 @@
                         self: true,
                         uid: '',
                         type: 'PRO',
-                        name: 'You',
+                        name: 'You ({{ $performer->pro->displayName() }})',
                     },
                 },
                 methods: {
@@ -290,6 +291,20 @@
                             return _eventData.performer === '{{ $session->uid  }}';
                         }
 
+                        function _setParticipantProperty(_message, _propertyName, _valueKeyName) {
+                            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][_propertyName] = eventData.data[_valueKeyName];
+                                            break;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
                         function _setParticipantMediaProperty(_message, _propertyName, _value) {
                             if(_message && _message.body) {
                                 let eventData = JSON.parse(_message.body);
@@ -359,6 +374,7 @@
 
                         this.socketClient.subscribe("/user/topic/editMyName", (message) => {
                             console.log("editMyName received:", message.body);
+                            _setParticipantProperty.call(this, message, 'displayName', 'myName');
                         });
 
                         this.socketClient.subscribe("/user/topic/setMyAwayMessage", (message) => {
@@ -379,7 +395,7 @@
                                     for (let i = 0; i < this.otherParticipants.length; i++) {
                                         if (this.otherParticipants[i].uid === eventData.performer) {
                                             if(this.mainViewParticipant.uid === (+this.otherParticipants[i].mediaServiceIdentifier)) {
-                                                this.showInCenterView(true, this.myMediaServiceIdentifier, 'You', 'PRO');
+                                                this.showInCenterView(true, this.myMediaServiceIdentifier, 'You (' + myName + ')', 'PRO');
                                                 break;
                                             }
                                         }