New video call logic updates

public/css/meeting.css

@@ -131,8 +131,8 @@ h1 {
     justify-content: flex-end;
 }
 .main-view .thumbs .thumb-view {
-    width: 120px;
-    height: 90px;
+    width: 100px;
+    height: 75px;
     border: 1px solid #0d5875;
     box-shadow: 0 0 3px #888;
     border-radius: 3px;

resources/views/checkin.blade.php

@@ -36,7 +36,7 @@
                 if(_data.success) {
                     Cookies.set('sessionKey', _data.data.sessionKey, {expires: 365});
                     Cookies.set('clientUid', _data.data.clientUid, {expires: 365});
-                    // window.location = '/client/dashboard';
+                    window.location = '/client/dashboard';
                 }
                 else {
                     new Noty({

resources/views/client-dashboard.blade.php

@@ -16,7 +16,7 @@
             <div class="py-3 text-center" v-if="started">
                 <h6 class="text-black font-weight-bold m-0">Call in progress: @{{ timeDisplay() }}</h6>
             </div>
-            <div class="py-3 text-center" v-if="!pro || !started">
+            <div class="py-3 text-center" v-if="noOneElseInCall">
                 <h6 class="text-black font-weight-bold m-0">A pro may pop in here at the next chance. Please wait..</h6>
             </div>
             <div class="main-view mx-auto">
@@ -73,7 +73,9 @@
                 readyToPublish: false,
                 publishing: false,
 
-                selfUserType: 'CLIENT'
+                selfUserType: 'CLIENT',
+                selfStreamId: '',
+                noOneElseInCall: true,
             },
             methods: {
                 timeDisplay: function() {
@@ -151,15 +153,9 @@
                             self.pro = true;
                         }
 
-                        if(!self.startTime) {
-                            self.startTime = new Date().getTime();
-                            window.setInterval(function() {
-                                self.time = new Date().getTime() - self.startTime;
-                            }, 1000);
-                            self.started = true;
-                        }
-
                         self.activateParty(event.stream.id);
+
+                        self.noOneElseInCall = false;
                     });
 
                     // peer disconnected
@@ -177,7 +173,7 @@
                         console.log('onPeerDisconnection');
 
                         if(event.stream && $('.full-view[data-stream="' + event.stream.id + '"]').length) {
-                            var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):visible');
+                            var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):not(.disconnected-view):visible');
                             if(allThumbs.length) {
                                 $('.thumbs [data-stream]:not([data-stream=""])').each(function() {
                                     if($(this).attr('data-stream') !== event.stream.id) {
@@ -193,19 +189,30 @@
 
                         if(event.stream) {
                             var remoteViewElem = $('[data-stream="' + event.stream.id + '"]');
-                            if(remoteViewElem.length) {
-                                remoteViewElem.attr('data-stream', '');
-                                remoteViewElem.attr('data-connection-data', '');
-                                remoteViewElem.attr('data-type', '');
-                                remoteViewElem.attr('data-name', '');
-                            }
-                            remoteViewElem.addClass('disconnected-view')
+                            remoteViewElem.remove();
+                            // if(remoteViewElem.length) {
+                            //     remoteViewElem.attr('data-stream', '');
+                            //     remoteViewElem.attr('data-connection-data', '');
+                            //     remoteViewElem.attr('data-type', '');
+                            //     remoteViewElem.attr('data-name', '');
+                            // }
+                            // remoteViewElem.addClass('disconnected-view')
                         }
 
                         // if no other parties in call, hang up
-                        if(!$('[data-stream]:not([data-stream=""])').length) {
+                        if(!$('[data-stream]:not([data-stream="' + self.selfStreamId + '"])').length) {
                             // self.hangUp();
-                            console.warn('No other parties in the call!')
+                            console.warn('No other parties in the call!');
+                            new Noty({
+                                theme: 'mint',
+                                type: 'info',
+                                text: 'All other participants have left the call',
+                                progressBar: false,
+                                timeout: false,
+                            }).show();
+                            self.startTime = 0;
+                            self.started = false;
+                            self.noOneElseInCall = true;
                         }
                     }
 
@@ -228,8 +235,16 @@
                         var selfView = $('#self-view');
                         selfView.attr('data-stream', event.stream.id);
                         selfView.attr('data-type', 'CLIENT');
+                        self.selfStreamId = event.stream.id;
                         self.activateParty('self');
                         $('#self-view').show();
+
+                        self.startTime = new Date().getTime();
+                        window.setInterval(function() {
+                            self.time = new Date().getTime() - self.startTime;
+                        }, 1000);
+                        self.started = true;
+
                     });
 
                     self.publisher.on('streamDestroyed', function(event) {

resources/views/pro-call.blade.php

@@ -64,6 +64,7 @@
                 otSession: false,
 
                 selfUserType: 'PRO',
+                selfStreamId: '',
                 patientInQueue: false,
 
                 videoActive: false
@@ -226,7 +227,7 @@
                     function onPeerDisconnection(event, data) {
 
                         if(event.stream && $('.full-view[data-stream="' + event.stream.id + '"]').length) {
-                            var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):visible');
+                            var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):not(.disconnected-view):visible');
                             if(allThumbs.length) {
                                 $('.thumbs [data-stream]:not([data-stream=""])').each(function() {
                                     if($(this).attr('data-stream') !== event.stream.id) {
@@ -242,13 +243,14 @@
 
                         if(event.stream) {
                             var remoteViewElem = $('[data-stream="' + event.stream.id + '"]');
-                            if(remoteViewElem.length) {
-                                remoteViewElem.attr('data-stream', '');
-                                remoteViewElem.attr('data-connection-data', '');
-                                remoteViewElem.attr('data-type', '');
-                                remoteViewElem.attr('data-name', '');
-                            }
-                            remoteViewElem.addClass('disconnected-view')
+                            remoteViewElem.remove();
+                            // if(remoteViewElem.length) {
+                            //     remoteViewElem.attr('data-stream', '');
+                            //     remoteViewElem.attr('data-connection-data', '');
+                            //     remoteViewElem.attr('data-type', '');
+                            //     remoteViewElem.attr('data-name', '');
+                            // }
+                            // remoteViewElem.addClass('disconnected-view')
                         }
 
                         var connectionData = JSON.parse(data);
@@ -257,7 +259,18 @@
                         }
 
                         // if no other parties in call, hang up
-                        if(!$('[data-stream]:not([data-stream=""])').length) {
+                        if(!$('[data-stream]:not([data-stream="' + self.selfStreamId + '"])').length) {
+                            // self.hangUp();
+                            console.warn('No other parties in the call!');
+                            new Noty({
+                                theme: 'mint',
+                                type: 'info',
+                                text: 'All other participants have left the call',
+                                progressBar: false,
+                                timeout: 2500,
+                            }).show();
+                            self.startTime = 0;
+                            self.started = false;
                             self.hangUp();
                         }
                     }
@@ -285,6 +298,7 @@
                         var selfView = $('#self-view');
                         selfView.attr('data-stream', event.stream.id);
                         selfView.attr('data-connection-data', event.stream.connection.data);
+                        self.selfStreamId = event.stream.id;
                     });
 
                     publisher.on('streamCreated', function(event) {
@@ -301,7 +315,7 @@
                         event.preventDefault();
                         console.log('publisher->streamDestroyed');
                         $('#self-view').hide();
-                        var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):visible');
+                        var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):not(.disconnected-view):visible');
                         if(allThumbs.length) {
                             $('.thumbs [data-stream]:not([data-stream=""])').each(function() {
                                 if($(this).attr('data-stream') !== $('#self-view').attr('data-stream')) {