Various fixes and cleanups

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

@@ -124,7 +124,7 @@
                 delimiters: ['@{{', '}}'],
                 data: {
 
-                    // model - declare up-front to make reactive - override with server data on mount
+                    // main model - declare up-front to make reactive - override with server data on mount
                     amIInAMeeting: false,
                     meetingType: '', // PRO/CLIENT,
                     inMeetingForClientUid: '',
@@ -182,7 +182,7 @@
                     unrenderedParticipantsTimer: false,
                     unresolvedParticipantsTimer: false,
 
-                    // main-view & thumb views
+                    // main-view participant
                     mainViewParticipant: {
                         self: true,
                         uid: '',
@@ -192,52 +192,13 @@
                 },
                 methods: {
 
-                    toggleRinger: function () {
-                        let self = this, endPoint = this.ringer ? 'turnOffRing' : 'turnOnRing';
-                        $.post('/api/pro/' + endPoint, function (_data) {
-                            if (_data && _data.success) {
-                                self.ringer = !self.ringer;
-                            } else {
-                                if (_data.message) {
-                                    toastr.error(_data.message);
-                                } else {
-                                    toastr.error('Unable to change ringer status');
-                                }
-                            }
-                        }, 'json');
-                    },
-                    activateParty: function (_stream = 'self') {
-                        var current = $('.full-view');
-                        if (current.attr('data-stream') === _stream) return;
-                        current.removeClass('full-view').addClass('thumb-view');
-                        if (current.attr('data-type') === 'CLIENT') {
-                            current.prependTo('.thumbs');
-                        } else {
-                            current.appendTo('.thumbs');
-                        }
-                        if (_stream === 'self') {
-                            $('#self-view')
-                                .removeClass('thumb-view')
-                                .removeClass('disconnected-view')
-                                .addClass('full-view')
-                                .prependTo('.main-view');
-                        } else {
-                            $('div[data-stream="' + _stream + '"]')
-                                .removeClass('thumb-view')
-                                .removeClass('disconnected-view')
-                                .addClass('full-view')
-                                .prependTo('.main-view');
-                        }
-                    },
-
+                    // start: main flow
                     enterClientRoomAsPro: function() {
-                        @if($client)
                         $.post('/api/meeting/enterClientRoomAsPro', {clientUid: '{{ $client->uid }}'}, (_data) => {
                             // TODO: check success
                             console.log(_data);
                             this.getMeetingInfo(true);
                         });
-                        @endif
                     },
                     getMeetingInfo: function(_firstRun = false) {
                         $.post('/api/meeting/getMyMeeting', (_data) => {
@@ -294,6 +255,20 @@
                             return _eventData.performer === '{{ $session->uid  }}';
                         }
 
+                        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) {
@@ -309,56 +284,42 @@
 
                         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);
                         });
 
                         this.socketClient.subscribe("/user/topic/myMicrophoneIsOn", (message) => {
                             console.log("myMicrophoneIsOn 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 = true;
-                                            break;
-                                        }
-                                    }
-                                }
-                            }
+                            _setParticipantMediaProperty.call(this, message, 'isMicrophoneOn', true);
                         });
 
                         this.socketClient.subscribe("/user/topic/myMicrophoneIsOff", (message) => {
                             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;
-                                        }
-                                    }
-                                }
-                            }
+                            _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);
                         });
 
                         this.socketClient.subscribe("/user/topic/myCameraIsOn", (message) => {
                             console.log("myCameraIsOn received:", message.body);
+                            _setParticipantMediaProperty.call(this, message, 'isCameraOn', 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) => {
@@ -384,6 +345,7 @@
                                         if (this.otherParticipants[i].uid === eventData.performer) {
                                             if(this.mainViewParticipant.uid === (+this.otherParticipants[i].mediaServiceIdentifier)) {
                                                 this.showInCenterView(true, this.myMediaServiceIdentifier, 'You', 'PRO');
+                                                break;
                                             }
                                         }
                                     }
@@ -469,29 +431,49 @@
                                 [this.myMicrophone, this.myCamera].filter(Boolean)
                             );
 
-                            // notify others that I have arrived
-                            if(this.myCamera && this.myMedia.isCameraAcquired) {
-                                this.myCameraIsOn();
+                            // notify others about my camera status
+                            if(this.myCamera) {
+                                if(this.myMedia.isCameraAcquired) {
+                                    this.myCameraIsAcquired();
+                                    this.myCameraIsOn(true);
+                                }
+                                else {
+                                    this.myCameraIsNotAcquired();
+                                }
                             }
-                            if(this.myMicrophone && this.myMedia.isMicrophoneAcquired) {
-                                this.myMicrophoneIsOn();
+                            else {
+                                this.myCameraIsNotAcquired();
+                            }
+
+                            // notify others about my microphone status
+                            if(this.myMicrophone) {
+                                if(this.myMedia.isMicrophoneAcquired) {
+                                    this.myMicrophoneIsAcquired();
+                                    this.myMicrophoneIsOn(true);
+                                }
+                                else {
+                                    this.myMicrophoneIsNotAcquired();
+                                }
+                            }
+                            else {
+                                this.myMicrophoneIsNotAcquired();
                             }
 
                         }
 
                         _initMediaService.call(this);
                     },
-
-                    //  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
                     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;
                         });
@@ -517,6 +499,7 @@
                             this.markUserAsUnresolved(user, mediaType);
                         }
                     },
+                    // end: main flow
 
                     // start: agora <-> WS sync helpers
                     initUnrenderedParticipantsTimer: function() {
@@ -566,10 +549,12 @@
                             JSON.stringify({sessionKey: '{{$performer->session_key}}'})
                         );
                     },
-                    myMicrophoneIsOn: function () {
+                    myMicrophoneIsOn: function (_notifyOnly = false) {
                         if(!this.myMedia.isMicrophoneAcquired) return;
-                        this.myMicrophone.setEnabled(true);
-                        this.myMedia.isMicrophoneOn = true;
+                        if(!_notifyOnly) {
+                            this.myMicrophone.setEnabled(true);
+                            this.myMedia.isMicrophoneOn = true;
+                        }
                         this.socketClient.send("/app/myMicrophoneIsOn", {},
                             JSON.stringify({sessionKey: '{{$performer->session_key}}'})
                         );
@@ -592,10 +577,12 @@
                             JSON.stringify({sessionKey: '{{$performer->session_key}}'})
                         );
                     },
-                    myCameraIsOn: function () {
+                    myCameraIsOn: function (_notifyOnly = false) {
                         if(!this.myMedia.isCameraAcquired) return;
-                        this.myCamera.setEnabled(true);
-                        this.myMedia.isCameraOn = true;
+                        if(!_notifyOnly) {
+                            this.myCamera.setEnabled(true);
+                            this.myMedia.isCameraOn = true;
+                        }
                         this.socketClient.send("/app/myCameraIsOn", {},
                             JSON.stringify({sessionKey: '{{$performer->session_key}}'})
                         );
@@ -678,7 +665,14 @@
                     },
                     // end: main view / thumb views
 
-                    // start: utils
+                    // start: other/misc
+                    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) {
@@ -688,10 +682,12 @@
                         toastr.error(msg);
                         return true;
                     }
-                    // end: utils
+                    // end: other/misc
                 },
                 mounted: function () {
-                    this.enterClientRoomAsPro();
+                    @if($client)
+                        this.enterClientRoomAsPro();
+                    @endif
                 }
             });
         })();