Call minimal vanilla impl [wip]

resources/views/app/video/call-minimal.blade.php

@@ -37,110 +37,50 @@
     </button>
 
     <div class="instruction-container">
-        <div class="mic-access-chrome-desktop border bg-light rounded mx-3 p-2 d-none">
+        <div class="mic-access-chrome-desktop border bg-light rounded mx-3 px-3 pt-3 pb-2 d-none">
             <p><b>We were unable to access your microphone!</b></p>
-            <p>To allow access, please tap the media icon (indicated in the figure below).</p>
-            <img src="/img/mic-access-chrome-desktop.png" class="mw-100 mx-auto my-2 d-block">
+            <p>To allow access, please tap the blocked media icon in your browser's address bar (indicated in the figure below).</p>
+            <img src="/img/mic-access-chrome-desktop.png" class="mw-100 mx-auto mb-3 d-block">
+            <p class="mb-0">Once you have allowed access, please click <b>Start Video</b> again to retry.</p>
+        </div>
+        <div class="cam-access-chrome-desktop border bg-light rounded mx-3 px-3 pt-3 pb-2 d-none">
+            <p><b>We were unable to access your camera!</b></p>
+            <p>To allow access, please tap the blocked media icon in your browser's address bar (indicated in the figure below).</p>
+            <img src="/img/mic-access-chrome-desktop.png" class="mw-100 mx-auto mb-3 d-block">
             <p class="mb-0">Once you have allowed access, please click <b>Start Video</b> again to retry.</p>
         </div>
     </div>
 
-    <div id="video-container" class="d-none">
+    <div id="video-container">
         <div class="main-view mx-auto">
-            <div id="self-view" class="full-view"
-                 :data-self="mainViewParticipant.self"
-                 :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="!getMediaByMediaServiceId(mainViewParticipant.uid).isCameraOn"
-                       class="fa fa-video-slash muted ml-1"
-                       :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="!getMediaByMediaServiceId(mainViewParticipant.uid).isMicrophoneAcquired ? 'text-danger' : 'text-white'"></i>
-                </div>
-            </div>
-            <div class="thumbs">
-                <div v-if="mainViewParticipant.uid !== myMediaServiceIdentifier"
-                     :id="'remote-view-' + myMediaServiceIdentifier"
-                     :data-self="true"
-                     :data-uid="myMediaServiceIdentifier"
-                     :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 (' + myName + ')', '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' : 'text-white'"></i>
-                        <i v-show="!myMedia || !myMedia.isMicrophoneOn"
-                           class="fa fa-microphone-slash muted ml-1"
-                           :class="!myMedia || !myMedia.isMicrophoneAcquired ? 'text-danger' : 'text-white'"></i>
-                    </div>
-                </div>
-                <div v-for="participant in otherParticipants"
-                     v-if="mainViewParticipant.uid !== (+participant.mediaServiceIdentifier)"
-                     :id="'remote-view-' + participant.mediaServiceIdentifier"
-                     :data-self="false"
-                     :data-uid="participant.mediaServiceIdentifier"
-                     :data-name="participant.displayName"
-                     :data-type="participant.participantType"
-                     :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' : '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' : 'text-white'"></i>
-                    </div>
-                </div>
-            </div>
-            <div class="call-actions d-flex align-items-center">
-                <button class="btn btn-danger rounded-circle"
-                        title="Leave Call"
-                        v-on:click.prevent="leaveClientRoom()">
-                    <i class="fa fa-phone"></i>
-                </button>
-                <button v-if="myMedia.isCameraOn" class="btn btn-default bg-light border rounded-circle"
-                        title="Stop Camera"
-                        v-on:click.prevent="myCameraIsOff()">
-                    <i class="fa fa-video"></i>
-                </button>
-                <button v-if="!myMedia.isCameraOn" class="btn btn-secondary rounded-circle"
-                        title="Start Camera"
-                        v-on:click.prevent="myCameraIsOn()">
-                    <i class="fa fa-video-slash"></i>
-                </button>
-                <button v-if="myMedia.isMicrophoneOn" class="btn btn-default bg-light border rounded-circle"
-                        title="Stop Microphone"
-                        v-on:click.prevent="myMicrophoneIsOff()">
-                    <i class="fa fa-microphone"></i>
-                </button>
-                <button v-if="!myMedia.isMicrophoneOn" class="btn btn-secondary rounded-circle"
-                        title="Start Microphone"
-                        v-on:click.prevent="myMicrophoneIsOn()">
-                    <i class="fa fa-microphone-slash"></i>
-                </button>
-            </div>
+            <div id="self-view" class="video-view"></div>
         </div>
     </div>
 
+<!--    <div class="call-actions d-none align-items-center">
+        <button class="btn btn-danger rounded-circle"
+                title="Leave Call">
+            <i class="fa fa-phone"></i>
+        </button>
+        <button v-if="myMedia.isCameraOn" class="btn btn-default bg-light border rounded-circle"
+                title="Stop Camera">
+            <i class="fa fa-video"></i>
+        </button>
+        <button v-if="!myMedia.isCameraOn" class="btn btn-secondary rounded-circle"
+                title="Start Camera">
+            <i class="fa fa-video-slash"></i>
+        </button>
+        <button v-if="myMedia.isMicrophoneOn" class="btn btn-default bg-light border rounded-circle"
+                title="Stop Microphone"
+                v-on:click.prevent="myMicrophoneIsOff()">
+            <i class="fa fa-microphone"></i>
+        </button>
+        <button v-if="!myMedia.isMicrophoneOn" class="btn btn-secondary rounded-circle"
+                title="Start Microphone">
+            <i class="fa fa-microphone-slash"></i>
+        </button>
+    </div>-->
+
 </div>
 
 <script>
@@ -247,6 +187,22 @@
                 // create client
                 this.mediaServiceClient = AgoraRTC.createClient({mode: 'rtc', codec: 'vp8'});
 
+                // acquire devices
+                this.attemptToAcquireMicrophone(() => {
+                    this.attemptToAcquireCamera(() => {
+                        console.log('ALIX: Hurrah! Mic and camera both acquired :)');
+
+                        // go to video UI
+                        $('#btn-start-video').removeClass('d-block').addClass('d-none');
+                        $('#video-container').removeClass('d-none').addClass('d-block');
+                        $('#self-view').height($('#self-view').width() * 0.75);
+                        this.myCamera.play($('#self-view')[0], {fit: 'contain'});
+                    })
+                });
+
+            },
+
+            attemptToAcquireMicrophone: function(_done) {
                 AgoraRTC.onMicrophoneChanged = (_info) => {
                     console.log("ALIX: microphone changed!", _info.state, _info.device);
                     if(_info.state === 'ACTIVE') {
@@ -260,6 +216,11 @@
                             console.log('ALIX: microphone acquisition attempt completed');
                             console.log('ALIX: (reactive) isMicrophoneAcquired = ', this.meetingData.myMedia.isMicrophoneAcquired);
                             console.log('ALIX: (reactive) isMicrophoneOn = ', this.meetingData.myMedia.isMicrophoneOn);
+
+                            // if all good, allow to proceed
+                            if(this.myMicrophone && this.meetingData.myMedia.isMicrophoneAcquired) {
+                                _done.call(this);
+                            }
                         });
                     }
                 };
@@ -269,11 +230,15 @@
                     console.log('ALIX: microphone acquisition attempt completed');
                     console.log('ALIX: (proactive) isMicrophoneAcquired = ', this.meetingData.myMedia.isMicrophoneAcquired);
                     console.log('ALIX: (proactive) isMicrophoneOn = ', this.meetingData.myMedia.isMicrophoneOn);
-                });
 
+                    // if all good, allow to proceed
+                    if(this.myMicrophone && this.meetingData.myMedia.isMicrophoneAcquired) {
+                        _done.call(this);
+                    }
+                });
             },
 
-            acquireMicrophone: async function(_deviceId = false) {
+            acquireMicrophone: async function() {
 
                 // if already acquired, ignore
                 if(this.myMicrophone && this.meetingData.myMedia.isMicrophoneAcquired) {
@@ -292,7 +257,7 @@
                     // TODO: notify others via WS
 
                     this.myMicrophone.setEnabled(true);
-                    this.myMicrophone.setVolume(1000);
+                    this.myMicrophone.setVolume(1000); // 1000 is the max allowed value
                     this.meetingData.myMedia.isMicrophoneOn = true;
                     console.log('ALIX: microphone is ON and not on mute :)');
                     // TODO: log
@@ -312,20 +277,79 @@
                 }
             },
 
+            attemptToAcquireCamera: function(_done) {
+                AgoraRTC.onCameraChanged = (_info) => {
+                    console.log("ALIX: camera changed!", _info.state, _info.device);
+                    if(_info.state === 'ACTIVE') {
+
+                        if(!this.myCamera || !this.meetingData.myMedia.isCameraAcquired) {
+                            window.location.reload();
+                        }
+
+                        // reactive acquisition (because user later granted access)
+                        this.acquireCamera().then(() => {
+                            console.log('ALIX: camera acquisition attempt completed');
+                            console.log('ALIX: (reactive) isCameraAcquired = ', this.meetingData.myMedia.isCameraAcquired);
+                            console.log('ALIX: (reactive) isCameraOn = ', this.meetingData.myMedia.isCameraOn);
+
+                            // if all good, allow to proceed
+                            if(this.myCamera && this.meetingData.myMedia.isCameraAcquired) {
+                                _done.call(this);
+                            }
+                        });
+                    }
+                };
+
+                // proactive acquisition (already allowed OR user clicked "Allow" when prompted
+                this.acquireCamera().then(() => {
+                    console.log('ALIX: camera acquisition attempt completed');
+                    console.log('ALIX: (proactive) isCameraAcquired = ', this.meetingData.myMedia.isCameraAcquired);
+                    console.log('ALIX: (proactive) isCameraOn = ', this.meetingData.myMedia.isCameraOn);
+
+                    // if all good, allow to proceed
+                    if(this.myCamera && this.meetingData.myMedia.isCameraAcquired) {
+                        _done.call(this);
+                    }
+                });
+            },
+
             acquireCamera: async function() {
-                this.myMedia.isCameraAcquired = false;
-                this.myMedia.isCameraOn = false;
+
+                // if already acquired, ignore
+                if(this.myCamera && this.meetingData.myMedia.isCameraAcquired) {
+                    console.log("ALIX: Skipping camera acquisition..")
+                    return;
+                }
+
+                this.meetingData.myMedia.isCameraAcquired = false;
+                this.meetingData.myMedia.isCameraOn = false;
                 try {
-                    @if(config('app.agora_mode') === 'screen') // testing
-                    this.myCamera = await AgoraRTC.createScreenVideoTrack();
-                    @else
-                        this.myCamera = await AgoraRTC.createCameraVideoTrack({
+                    this.myCamera = await AgoraRTC.createCameraVideoTrack({
                         optimizationMode: "motion"
                     });
-                    @endif
-                        this.myMedia.isCameraAcquired = true;
+
+                    console.log('ALIX: acquired camera :)');
+                    this.meetingData.myMedia.isCameraAcquired = true;
+                    // TODO: log
+                    // TODO: notify others via WS
+
+                    this.myCamera.setEnabled(true);
+                    this.meetingData.myMedia.isCameraOn = true;
+                    console.log('ALIX: camera is ON :)');
+                    // TODO: log
+                    // TODO: notify others via WS
+
                 } catch (e) {
-                    console.log('ALIX: error in getting camera');
+                    console.error('ALIX: could not acquire camera');
+
+                    this.meetingData.myMedia.isCameraAcquired = false;
+                    this.meetingData.myMedia.isCameraOn = false;
+                    // TODO: log
+                    // TODO: notify others via WS
+
+                    $('#btn-start-video').removeClass('d-block').addClass('d-none');
+                    // TODO: Use device/browser specific instruction & image
+                    $('.cam-access-chrome-desktop').removeClass('d-none').addClass('d-block');
                 }
             },
 
@@ -379,643 +403,5 @@
     }).call(window);
 </script>
 
-
-<script class="d-none">
-    (function () {
-        window.proCallComponent = new Vue({
-            el: '#proCallComponentFF',
-            delimiters: ['@{{', '}}'],
-            data: {
-
-                // main model - declare up-front to make reactive - override with server data on mount
-                amIInAMeeting: false,
-                meetingType: '', // PRO/CLIENT,
-                inMeetingForClientUid: '',
-                inMeetingForClient: {
-                    clientMediaServiceRoomIdentifier: '',
-                    uid: '',
-                    displayName: '',
-                    dob: '',
-                },
-                myMediaServiceToken: '',
-                myMediaServiceIdentifier: '',
-                myMedia: {
-                    isCameraAcquired: false,
-                    isCameraOn: false,
-                    isMicrophoneAcquired: false,
-                    isMicrophoneOn: false,
-                },
-                otherParticipants: [
-                    {
-                        participantType: '', // PRO/CLIENT_GUEST,
-                        uid: '',
-                        mediaServiceIdentifier: '',
-                        displayName: '',
-                        media: {
-                            isCameraAcquired: false,
-                            isCameraOn: false,
-                            isMicrophoneAcquired: false,
-                            isMicrophoneOn: false,
-                        },
-                        awayMessage: '',
-                        deviceType: '',
-                        isMeetingAccessGranted: '',
-                        isSocketConnected: '',
-                    }
-                ],
-                awayMessage: '',
-                myName: '{{ $performer->pro->displayName() }}',
-
-                // agora
-                mediaServiceClient: null, // set on agora init
-                appId: '{{ config('app.agora_appid') }}',
-                channel: '', // set on mount
-                myMicrophone: null,
-                myCamera: null,
-                appMode: 'name', // Agora needs a user-gesture to init correctly
-
-                // sockets
-                backendWsURL: 'http://localhost:8080/ws', // {{ config('app.backend_ws_url') }}',
-                socketClient: null,
-
-                // other
-                ringer: {{ $pro->is_ring_on ? 'true' : 'false' }},
-
-                // agora <-> WS sync
-                unrenderedParticipants: [],     // exists in otherParticipants, but not yet in DOM
-                unresolvedParticipants: [],     // does not exist in otherParticipants, but came in via Agora
-                unrenderedParticipantsTimer: false,
-                unresolvedParticipantsTimer: false,
-
-                // main-view participant
-                mainViewParticipant: {
-                    self: true,
-                    uid: '',
-                    type: 'PRO',
-                    name: 'You ({{ $performer->pro->displayName() }})',
-                },
-            },
-            methods: {
-
-                // start: main flow
-                enterClientRoomAsPro: function () {
-                    @if($client)
-                        this.socketClient.send("/app/leaveClientRoom", {},
-                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
-                    );
-                    window.setTimeout(() => {
-                        $.post('/api/meeting/enterClientRoomAsPro', {clientUid: '{{ $client->uid }}'}, (_data) => {
-                            if (!this.hasError(_data)) {
-                                this.appMode = 'video';
-                                this.getMeetingInfo(true);
-                            }
-                        });
-                    }, 250);
-                    @endif
-                },
-                getMeetingInfo: function (_firstRun = false) {
-                    $.post('/api/meeting/getMyMeeting', (_data) => {
-                        if (_data && _data.success) {
-                            let state = _data.data;
-                            console.log(state);
-
-                            // overwrite model data
-                            this.amIInAMeeting = state.amIInAMeeting;
-                            this.inMeetingForClientUid = state.inMeetingForClientUid;
-                            this.inMeetingForClient.clientMediaServiceRoomIdentifier =
-                                state.inMeetingForClient.clientMediaServiceRoomIdentifier;
-                            this.inMeetingForClient.uid = state.inMeetingForClient.uid;
-                            this.inMeetingForClient.displayName = state.inMeetingForClient.displayName;
-                            this.inMeetingForClient.dob = state.inMeetingForClient.dob;
-                            this.meetingType = state.meetingType;
-                            // NOTE: this now comes from its own end-point (see below)
-                            // this.myMediaServiceToken = state.myMediaServiceToken;
-                            this.myMediaServiceIdentifier = +state.myMediaServiceIdentifier;
-                            this.otherParticipants = state.otherParticipants;
-
-                            if (_firstRun) {
-                                this.mainViewParticipant.uid = +state.myMediaServiceIdentifier;
-                                $.post('/api/meeting/refreshMyMediaServiceToken', (_data) => {  // get new agora token
-                                    if (!this.hasError(_data)) {
-                                        this.myMediaServiceToken = _data.data;
-                                        this.channel = this.inMeetingForClient.clientMediaServiceRoomIdentifier;
-                                        this.initMediaService();
-                                    }
-                                }, 'json');
-                            }
-
-                            console.log(this.$data);
-                        }
-                    }, 'json');
-                },
-                registerSocket: function (_done) {
-                    let socket = new SockJS(this.backendWsURL);
-                    this.socketClient = Stomp.over(socket);
-                    this.socketClient.connect({}, (frame) => {
-                        console.log('Connected: ' + frame);
-                        this.initSocketListeners();                     // init listeners
-                        this.socketClient.send("/app/register", {},     // register self
-                            JSON.stringify({
-                                sessionKey: '{{$performer->session_key}}'
-                            })
-                        );
-                        window.setInterval(() => {
-                            this.socketClient.send("/app/heartbeat", {},
-                                JSON.stringify({sessionKey: '{{ request()->cookie('sessionKey') }}'})
-                            );
-                        }, 5000);
-                    });
-                },
-                initSocketListeners: function () {
-
-                    function _isSelf(_eventData) {
-                        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);
-                            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[_propertyName] = _value;
-                                        break;
-                                    }
-                                }
-                            }
-                        }
-                    }
-
-                    this.socketClient.subscribe("/user/topic/newParticipant", (message) => {
-                        console.log("newParticipant received:", message.body);
-                        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.data);
-                                Vue.nextTick(() => {
-                                    this.refreshVideos();
-                                });
-                            }
-                        }
-                    });
-
-                    this.socketClient.subscribe("/user/topic/myMicrophoneIsAcquired", (message) => {
-                        console.log("myMicrophoneIsAcquired received:", message.body);
-                        _setParticipantMediaProperty.call(this, message, 'isMicrophoneAcquired', true);
-                    });
-
-                    this.socketClient.subscribe("/user/topic/myMicrophoneIsNotAcquired", (message) => {
-                        console.log("myMicrophoneIsNotAcquired received:", message.body);
-                        _setParticipantMediaProperty.call(this, message, 'isMicrophoneAcquired', false);
-                        _setParticipantMediaProperty.call(this, message, 'isMicrophoneOn', false);
-                    });
-
-                    this.socketClient.subscribe("/user/topic/myMicrophoneIsOn", (message) => {
-                        console.log("myMicrophoneIsOn received:", message.body);
-                        _setParticipantMediaProperty.call(this, message, 'isMicrophoneOn', true);
-                        _setParticipantMediaProperty.call(this, message, 'isMicrophoneAcquired', true);
-                    });
-
-                    this.socketClient.subscribe("/user/topic/myMicrophoneIsOff", (message) => {
-                        console.log("ALIX myMicrophoneIsOff received:", message.body);
-                        _setParticipantMediaProperty.call(this, message, 'isMicrophoneOn', false);
-                    });
-
-                    this.socketClient.subscribe("/user/topic/myCameraIsAcquired", (message) => {
-                        console.log("myCameraIsAcquired received:", message.body);
-                        _setParticipantMediaProperty.call(this, message, 'isCameraAcquired', true);
-                    });
-
-                    this.socketClient.subscribe("/user/topic/myCameraIsNotAcquired", (message) => {
-                        console.log("myCameraIsNotAcquired received:", message.body);
-                        _setParticipantMediaProperty.call(this, message, 'isCameraAcquired', false);
-                        _setParticipantMediaProperty.call(this, message, 'isCameraOn', false);
-                    });
-
-                    this.socketClient.subscribe("/user/topic/myCameraIsOn", (message) => {
-                        console.log("myCameraIsOn received:", message.body);
-                        _setParticipantMediaProperty.call(this, message, 'isCameraOn', true);
-                        _setParticipantMediaProperty.call(this, message, 'isCameraAcquired', true);
-                    });
-
-                    this.socketClient.subscribe("/user/topic/myCameraIsOff", (message) => {
-                        console.log("myCameraIsOff received:", message.body);
-                        _setParticipantMediaProperty.call(this, message, 'isCameraOn', false);
-                    });
-
-                    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) => {
-                        console.log("setMyAwayMessage received:", message.body);
-                    });
-
-                    this.socketClient.subscribe("/user/topic/removeMyAwayMessage", (message) => {
-                        console.log("removeMyAwayMessage received:", message.body);
-                    });
-
-                    this.socketClient.subscribe("/user/topic/leaveClientRoom", (message) => {
-                        console.log("leaveClientRoom received:", message.body);
-                        if (message && message.body) {
-                            let eventData = JSON.parse(message.body);
-                            if (!_isSelf(eventData) && eventData.data) {
-
-                                // if the participant who left is in center view, switch center view to self
-                                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 (' + this.myName + ')', 'PRO');
-                                            break;
-                                        }
-                                    }
-                                }
-
-                                this.otherParticipants = this.otherParticipants.filter(_participant => {
-                                    return _participant.uid !== eventData.performer;
-                                });
-
-                                Vue.nextTick(() => {
-                                    this.refreshVideos();
-                                });
-                            }
-                        }
-                    });
-
-                },
-                initMediaService: function () {
-
-                    this.mediaServiceClient = AgoraRTC.createClient({mode: 'rtc', codec: 'vp8'});
-
-                    async function _acquireMicrophone() {
-                        this.myMedia.isMicrophoneAcquired = false;
-                        this.myMedia.isMicrophoneOn = false;
-                        try {
-                            this.myMicrophone = await AgoraRTC.createMicrophoneAudioTrack();
-                            this.myMedia.isMicrophoneAcquired = true;
-                        } catch (e) {
-                            console.log('ALIX: error in getting mic');
-                        }
-                    }
-
-                    async function _acquireCamera() {
-                        this.myMedia.isCameraAcquired = false;
-                        this.myMedia.isCameraOn = false;
-                        try {
-                            @if(config('app.agora_mode') === 'screen') // testing
-                            this.myCamera = await AgoraRTC.createScreenVideoTrack();
-                            @else
-                                this.myCamera = await AgoraRTC.createCameraVideoTrack({
-                                optimizationMode: "motion"
-                            });
-                            @endif
-                                this.myMedia.isCameraAcquired = true;
-                        } catch (e) {
-                            console.log('ALIX: error in getting camera');
-                        }
-                    }
-
-                    async function _initMediaServiceEvents() {
-                        this.mediaServiceClient.on('user-joined', user => {
-                            // do nothing, newParticipant logic handled via WS
-                        });
-                        this.mediaServiceClient.on('user-left', user => {
-                            // do nothing, leaveClientRoom logic handled via WS
-                        });
-                        this.mediaServiceClient.on('user-published', async (user, mediaType) => {
-                            console.log('ALIX user-published', user);
-                            await this.mediaServiceClient.subscribe(user, mediaType)
-                            this.attemptToPlayParticipantMedia(user, mediaType);
-                            window.setTimeout(() => {
-                                this.refreshVideos();
-                            }, 500);
-                        });
-                    }
-
-                    async function _initMediaService() {
-
-                        await _acquireMicrophone.call(this);  // get mic
-                        await _acquireCamera.call(this);      // get cam (or screen for testing)
-
-                        if (!this.myMicrophone && !this.myCamera) {
-                            alert('Do you have camera/mic? Unable to hear or see you.');
-                            // return; // allow to proceed without any device!
-                        }
-
-                        await _initMediaServiceEvents.call(this);
-
-                        // Show own feed
-                        if (this.myCamera && this.myMedia.isCameraAcquired) {
-                            this.myCamera.play($('#self-view')[0], {fit: 'contain'});
-                        }
-
-                        // init unrenderedParticipantsTimer and unresolvedParticipantsTimer
-                        this.initUnrenderedParticipantsTimer();
-                        this.initUnresolvedParticipantsTimer();
-
-                        await this.mediaServiceClient.join(         // join agora channel
-                            this.appId,
-                            this.channel,
-                            this.myMediaServiceToken,
-                            +this.myMediaServiceIdentifier
-                        );
-
-                        if (this.myMicrophone || this.myCamera) {
-                            await this.mediaServiceClient.publish(      // publish audio/video
-                                [this.myMicrophone, this.myCamera].filter(Boolean)
-                            );
-                        }
-
-                        // notify others about my camera status
-                        if (this.myCamera && this.myMedia.isCameraAcquired) {
-                            this.myCameraIsAcquired();
-                            this.myCameraIsOn();
-                        } else {
-                            this.myCameraIsNotAcquired();
-                            this.myCameraIsOff();
-                        }
-
-                        // notify others about my microphone status
-                        if (this.myMicrophone && this.myMedia.isMicrophoneAcquired) {
-                            this.myMicrophoneIsAcquired();
-                            this.myMicrophoneIsOn();
-                        } else {
-                            this.myMicrophoneIsNotAcquired();
-                            this.myMicrophoneIsOff();
-                        }
-
-                    }
-
-                    _initMediaService.call(this);
-                },
-                attemptToPlayParticipantMedia: function (user, mediaType) {
-                    //  LOGIC
-                    //  attemptToPlayParticipantMedia
-                    //      if user already in otherParticipants
-                    //          if user's thumb already rendered
-                    //              if yes, check participant's isCameraOn is true
-                    //                  if yes, play participant's video in his thumb
-                    //          else store "user" in unrenderedParticipants
-                    //              and keep retrying after 500mx (max 2 times) - i.e. give vue a cycle or 2 to render thumb
-                    //      else store "user" in unresolvedParticipants
-                    //          and keep retrying after 500ms (max 10 times) till resolved - i.e. give WS time to receive the newParticipant event
-                    let participant = this.otherParticipants.filter(function (_participant) {
-                        return (+_participant.mediaServiceIdentifier) === user.uid;
-                    });
-                    if (participant && participant.length) {
-                        participant = participant[0];
-                        if ($('[data-uid="' + participant.mediaServiceIdentifier + '"]').length) {
-                            if (mediaType === 'audio' && user.hasAudio && user.audioTrack) {
-                                participant.media.isMicrophoneAcquired = true;
-                                participant.media.isMicrophoneOn = true;
-                                user.audioTrack.play();
-                            } else if (mediaType === 'video' && user.hasVideo && user.videoTrack) {
-                                participant.media.isCameraAcquired = true;
-                                participant.media.isCameraOn = true;
-                                user.videoTrack.play($('[data-uid="' + user.uid + '"]')[0], {fit: 'contain'});
-                            }
-                            this.markUserAsRendered(user);
-                        } else {
-                            console.warn('Thumb not yet in DOM for participant!', user.uid);
-                            this.markUserAsUnrendered(user, mediaType);
-                        }
-                        this.markUserAsResolved(user);
-                    } else {
-                        console.warn('Participant not found in otherParticipants!', user.uid);
-                        this.markUserAsUnresolved(user, mediaType);
-                    }
-                },
-                // end: main flow
-
-                // start: agora <-> WS sync helpers
-                initUnrenderedParticipantsTimer: function () {
-                    this.unrenderedParticipantsTimer = window.setInterval(() => {
-                        this.unrenderedParticipants.forEach((_user) => {
-                            this.attemptToPlayParticipantMedia(_user, _user.mediaType);
-                        });
-                    }, 500);
-                },
-                initUnresolvedParticipantsTimer: function () {
-                    this.unresolvedParticipantsTimer = window.setInterval(() => {
-                        this.unresolvedParticipants.forEach((_user) => {
-                            this.attemptToPlayParticipantMedia(_user, _user.mediaType);
-                        });
-                    }, 1000);
-                },
-                markUserAsUnrendered: function (_user, _mediaType) {
-                    let existing = !!this.unrenderedParticipants.filter((_item) => _item.uid === _user.uid).length;
-                    if (!existing) {
-                        _user.mediaType = _mediaType;
-                        this.unrenderedParticipants.push(_user);
-                    }
-                },
-                markUserAsRendered: function (_user) {
-                    this.unrenderedParticipants = this.unrenderedParticipants.filter((_item) => _item.uid !== _user.uid);
-                },
-                markUserAsUnresolved: function (_user, _mediaType) {
-                    let existing = !!this.unresolvedParticipants.filter((_item) => _item.uid === _user.uid).length;
-                    if (!existing) {
-                        _user.mediaType = _mediaType;
-                        this.unresolvedParticipants.push(_user);
-                    }
-                },
-                markUserAsResolved: function (_user) {
-                    this.unresolvedParticipants = this.unresolvedParticipants.filter((_item) => _item.uid !== _user.uid);
-                },
-                // end: agora <-> WS sync helpers
-
-                // start: actions that notify participants via socket
-                myMicrophoneIsAcquired: function () {
-                    this.socketClient.send("/app/myMicrophoneIsAcquired", {},
-                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
-                    );
-                },
-                myMicrophoneIsNotAcquired: function () {
-                    this.socketClient.send("/app/myMicrophoneIsNotAcquired", {},
-                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
-                    );
-                },
-                myMicrophoneIsOn: function () {
-                    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}}'})
-                        );
-                    }
-                },
-                myMicrophoneIsOff: function () {
-                    if (this.myMicrophone) {
-                        this.myMicrophone.setEnabled(false);
-                    }
-                    this.myMedia.isMicrophoneOn = false;
-                    this.socketClient.send("/app/myMicrophoneIsOff", {},
-                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
-                    );
-                },
-                myCameraIsAcquired: function () {
-                    this.socketClient.send("/app/myCameraIsAcquired", {},
-                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
-                    );
-                },
-                myCameraIsNotAcquired: function () {
-                    this.socketClient.send("/app/myCameraIsNotAcquired", {},
-                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
-                    );
-                },
-                myCameraIsOn: function () {
-                    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}}'})
-                        );
-                    }
-                },
-                myCameraIsOff: function () {
-                    if (this.myCamera) {
-                        this.myCamera.setEnabled(false);
-                    }
-                    this.myMedia.isCameraOn = false;
-                    this.socketClient.send("/app/myCameraIsOff", {},
-                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
-                    );
-                },
-                editMyName: function (_myNewName) {
-                    this.socketClient.send("/app/editMyName", {},
-                        JSON.stringify({
-                            sessionKey: '{{$performer->session_key}}',
-                            myNewName: _myNewName
-                        })
-                    );
-                },
-                setMyAwayMessage: function (_message) {
-                    this.socketClient.send("/app/setMyAwayMessage", {},
-                        JSON.stringify({
-                            sessionKey: '{{$performer->session_key}}',
-                            message: _message
-                        })
-                    );
-                },
-                removeMyAwayMessage: function () {
-                    this.socketClient.send("/app/removeMyAwayMessage", {},
-                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
-                    );
-                },
-                leaveClientRoom: function () {
-                    this.socketClient.send("/app/leaveClientRoom", {},
-                        JSON.stringify({sessionKey: '{{$performer->session_key}}'})
-                    );
-                    window.setTimeout(() => {   // a little timeout for the WS message sending op to complete
-                        window.location.href = '/pro/meet';
-                    }, 250);
-                },
-                // end: actions that notify participants via socket
-
-                // start: main view / thumb views
-                showInCenterView: function (_self, _uid, _name, _type) {
-                    this.mainViewParticipant = {
-                        self: _self,
-                        uid: +_uid,
-                        type: _type,
-                        name: _name,
-                    };
-                    Vue.nextTick(() => {
-                        this.refreshVideos();
-                    });
-                },
-                refreshVideos: function () {
-                    // play self (only video)
-                    // no need to check camera/mic acquired/on etc. as only published tracks will appear here
-                    for (let track in this.mediaServiceClient.localTracks) {
-                        if (this.mediaServiceClient.localTracks.hasOwnProperty(track)) {
-                            track = this.mediaServiceClient.localTracks[track];
-                            if (track.trackMediaType === 'video') {
-                                let videoContainer = $('[data-uid="' + this.myMediaServiceIdentifier + '"]');
-                                if (videoContainer.length) {
-                                    track.play(videoContainer[0], {fit: 'contain'});
-                                }
-                            }
-                        }
-                    }
-
-                    // play others
-                    for (let remoteParticipant in this.mediaServiceClient.remoteUsers) {
-                        if (this.mediaServiceClient.remoteUsers.hasOwnProperty(remoteParticipant)) {
-                            remoteParticipant = this.mediaServiceClient.remoteUsers[remoteParticipant];
-                            if (remoteParticipant.hasAudio && remoteParticipant.audioTrack) {
-                                remoteParticipant.audioTrack.play();
-                            }
-                            if (remoteParticipant.hasVideo && remoteParticipant.videoTrack) {
-                                let videoContainer = $('[data-uid="' + remoteParticipant.uid + '"]');
-                                if (videoContainer.length) {
-                                    remoteParticipant.videoTrack.play(videoContainer[0], {fit: 'contain'});
-                                }
-                            }
-                        }
-                    }
-                },
-                // 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)) {
-                            this.ringer = !this.ringer;
-                        }
-                    }, 'json');
-                },
-                hasError: function (_data) {     // check and report error if exists via toastr
-                    let msg = 'Unknown error!';
-                    if (_data) {
-                        if (_data.success) return false;
-                        else if (_data.message) msg = _data.message;
-                    }
-                    toastr.error(msg);
-                    return true;
-                }
-                // end: other/misc
-            },
-            mounted: function () {
-                this.registerSocket();
-            }
-        });
-    })();
-</script>
-
 </body>
 </html>