tons of socket connectivity fixes for various scenarios

resources/js/components/pages/ClientEntrance.vue

@@ -200,6 +200,19 @@ export default {
                 },
                 lobbies_uid_list: [`${this.lobbyProp.uid}`]
             })
+
+            if (this.meetingUid) {
+                this.$socket.emit("meetingJoined", {
+                    lobby_uid: this.lobbyProp.uid,
+                    meeting_name: this.meetingName,
+                    meeting_uid: this.meetingUid,
+                    user: {
+                        name: `${this.firstName} ${this.lastName}`,
+                        type: "STRANGER",
+                        uid: this.clientUid
+                    }
+                })
+            }
         }
     },
     watch: {
@@ -684,7 +697,6 @@ export default {
         }
     },
     mounted() {
-        console.log(this.lobbyProp);
         if (this.meetingProp) {
             this.meetingUid = this.meetingProp.uid;
             this.$nextTick(this.initializePublisher);

resources/js/components/pages/MeetingsAppRoot.vue

@@ -12,7 +12,7 @@
                 <v-expansion-panel-header>
                     <span>Meeting Room</span>
                     <v-spacer></v-spacer>
-                    <v-btn v-if="meeting.uid" color="purple" small ripple outlined class="mr-3" @click.stop="leaveMeeting">Leave</v-btn>
+                    <v-btn :disabled="meetingLoading" v-if="meeting.uid" color="purple" small ripple outlined class="mr-3" @click.stop="leaveMeeting">Leave</v-btn>
                 </v-expansion-panel-header>
                 <v-expansion-panel-content>
                     <meeting-room></meeting-room>
@@ -62,11 +62,11 @@ export default {
     data() {
         return {
             active_panel: [0, 1, 2],
-            lobbies: []
+            lobbies_: []
         }
     },
     computed: {
-        ...mapState(["user", "meeting"])
+        ...mapState(["user", "meeting", "lobbies", "meetingLoading"])
     },
     watch: {
         meeting: {
@@ -75,7 +75,6 @@ export default {
                     this.$socket.emit("meetingLeft", { lobby_uid: oldVal.lobby_uid, meeting_name: oldVal.name, meeting_uid: oldVal.uid, user: this.user })
                 }
 
-
                 if (newVal && newVal.uid) {
                     this.$socket.emit("meetingJoined", { lobby_uid: newVal.lobby_uid, meeting_name: newVal.name, meeting_uid: newVal.uid, user: this.user })
 
@@ -109,19 +108,23 @@ export default {
         }
     },
     sockets: {
-        incomingCall: function(data) {
+        incomingCall: function(data){
             let self = this
 
             this.$store.commit('setCall', data)
         },
-        reconnect: function() {
+        disconnect: function(){
+            this.$store.commit("nullifyMeetingsOnline")
+        },
+        reconnect: function(){
+            this.$socket.emit("userData", {
+                user: this.user,
+                meeting: this.meeting,
+                lobbies_uid_list: this.lobbies.reduce((acc, cur) => { return [...acc, cur.uid] }, [])
+            })
+
             if (this.meeting.uid) {
                 this.$socket.emit("meetingJoined", { lobby_uid: this.meeting.lobby_uid, meeting_uid: this.meeting.uid, user: this.user })
-                this.$socket.emit("userData", {
-                    user: this.userProp,
-                    meeting: this.meeting,
-                    lobbies_uid_list: lobbies.reduce((acc, cur) => { return [...acc, cur.uid] }, [])
-                })
             }
         },
         'call-data': function(data){
@@ -140,6 +143,7 @@ export default {
         /* Meeting Handlers */
 
         'meeting-activity': function(data){
+
             this.$store.commit("setLobbyActivity", data)
         },
         'meeting-created': function(data){
@@ -149,7 +153,7 @@ export default {
             this.$store.commit("setUpdatedMeetingInLobby", data)
         },
         'meeting-closed': function(data){
-            this.$eventBus.$emit("leaveMeeting")
+            this.$store.dispatch("leaveMeeting");
         },
 
         /* Lobby Handlers */
@@ -203,8 +207,6 @@ export default {
 
         this.$store.commit("setInitialUser", this.userProp)
         this.$store.commit("setLobbies", lobbies)
-
-        this.$socket.emit("callDataRequest", lobbies)
     }
 }
 </script>

resources/js/components/partials/LobbyList.vue

@@ -67,14 +67,14 @@
                 </v-list>
 
                 <transition-expand>
-                    <div v-if="meetingListFiltered(lobby.meetings).length">
+                    <div v-if="meetingListFiltered(lobby).length">
                         <v-divider class="mx-4"></v-divider>
 
                         <v-card-actions>
-                            <v-btn :disabled="lobby.selected_meeting !== 0 && !lobby.selected_meeting" color="deep-purple accent-4" text @click="joinMeeting(lobby)">Join</v-btn>
+                            <v-btn :disabled="loading || (lobby.selected_meeting !== 0 && !lobby.selected_meeting)" color="deep-purple accent-4" text @click="joinMeeting(lobby)">Join</v-btn>
                             <v-btn :disabled="lobby.selected_meeting !== 0 && !lobby.selected_meeting" color="deep-purple accent-4" text @click="inviteToMeeting(lobby)">Invite</v-btn>
                             <v-spacer></v-spacer>
-                            <v-btn :disabled="lobby.selected_meeting !== 0 && !lobby.selected_meeting" color="deep-purple accent-4" text @click="closeMeeting(lobby)">Close</v-btn>
+                            <v-btn :disabled="loading || (lobby.selected_meeting !== 0 && !lobby.selected_meeting)" color="deep-purple accent-4" text @click="closeMeeting(lobby)">Close</v-btn>
                         </v-card-actions>
                     </div>
                 </transition-expand>
@@ -134,7 +134,7 @@ export default {
                     if (this.meeting.uid === lobby.selected_meeting.uid) {
                         this.$eventBus.$emit("meetingRejoin")
                     } else {
-                        lobby.selected_meeting.lobby = lobby;
+                        lobby.selected_meeting.lobby = lobby.name;
                         this.$store.commit("setCurrentMeeting", { lobby_uid: lobby.uid, ...lobby.selected_meeting });
                     }
                 },

resources/js/components/partials/MeetingRoom.vue

@@ -46,7 +46,7 @@ export default {
         GridItem: VueGridLayout.GridItem
     },
     computed: {
-        ...mapState(["meeting", "user", "session"])
+        ...mapState(["meeting", "user", "session", "meetingLoading"])
     },
     data() {
         return {
@@ -65,8 +65,7 @@ export default {
             maxCols: 1,
             maxRows: 12,
             rowHeight: 120,
-            gridPadding: 0,
-            loadingInProgress: false
+            gridPadding: 0
         };
     },
     methods: {
@@ -75,6 +74,7 @@ export default {
             this.openTokSession.disconnect();
             this.openTokSession.off();
             this.videos = [];
+            this.videoGrid = [];
             this.publisher.destroy();
             this.publisher = null;
             this.subscribers = [];
@@ -316,7 +316,7 @@ export default {
                     this.$store.commit("setSessionConnectivityState", true);
                 }
             });
-            this.loadingInProgress = false;
+            this.$store.commit('setMeetingLoadingState', false)
         },
         publishToSession() {
             this.openTokSession.publish(this.publisher, error => {
@@ -428,14 +428,13 @@ export default {
             this.publisher.publishAudio(val);
         },
         "meeting.uid"(val) {
-            if (this.loadingInProgress) return;
-            this.loadingInProgress = true;
-
+            if (this.meetingLoading) return;
+            this.$store.commit('setMeetingLoadingState', true)
             if (val) {
                 this.getToken();
             } else {
                 this.disconnect()
-                this.loadingInProgress = false;
+                this.$store.commit('setMeetingLoadingState', false)
             }
         }
     },
@@ -444,7 +443,7 @@ export default {
 
         this.$eventBus.$on("screenShare", this.shareScreen);
         this.$eventBus.$on("meetingRejoin", () => {
-            this.loadingInProgress = true;
+            this.$store.commit('setMeetingLoadingState', true)
             this.disconnect();
             this.getToken({}, true);
         });

resources/js/components/partials/Settings.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="d-flex flex-column">
         <v-switch class="mt-0" v-model="newSettings.newMeetingNotificationExpanded" @change="updateSettings(newSettings.newMeetingNotificationExpanded)" label="Always expand new meeting notification"></v-switch>
-        <p class="mb-0 pb-2 pt-3"><b>ADMIN SETTINGS</b></p>
-        <v-switch class="mt-0" v-model="newSettings.admin.showAllLobbiesMettings" @change="updateSettings(newSettings.admin.showAllLobbiesMettings)" label="Show All Lobbies / Meetings"></v-switch>
     </div>
 </template>
 
@@ -27,7 +25,6 @@ export default {
         updateSettings(setting){
             localStorage.setItem(setting, this.newSettings[setting])
             this.$store.commit('updateSettings', this.newSettings)
-            console.log('here')
         }
     },
     created(){

resources/js/components/vuex/index.js

@@ -34,6 +34,7 @@ export default () => new Vuex.Store({
                 showAllLobbiesMettings: localStorage.getItem('showAllLobbiesMettings') == 'true' ? true : false
             }
         },
+        meetingLoading: false,
         callWidget: {
             active: false,
             callInfo: {}
@@ -112,6 +113,7 @@ export default () => new Vuex.Store({
         /* Meetings */
 
         addNewMeetingInLobby(state, data) {
+            console.log(data)
             let lobby = state.lobbies.filter((cur) => cur.uid == data.lobby.uid)
 
             if (lobby.length) {
@@ -140,6 +142,19 @@ export default () => new Vuex.Store({
         setCurrentMeeting(state, data) {
             state.meeting = data
         },
+        nullifyMeetingsOnline(state) {
+            for (let lobby of state.lobbies) {
+                for (let meeting of lobby.meetings) {
+                    meeting.active_members = []
+                    meeting.pros_online = []
+                }
+            }
+
+            state.callWidget.active = false
+        },
+        setMeetingLoadingState(state, data){
+            state.meetingLoading = data
+        },
 
         /* Other */