socket updates

resources/js/components/pages/MeetingsAppRoot.vue

@@ -68,7 +68,46 @@ export default {
         };
     },
     computed: {
-        ...mapState(["user"])
+        ...mapState(["user", "meeting"])
+    },
+    watch: {
+        meeting: {
+            handler(newVal, oldVal) {
+                if (oldVal && oldVal.uid) {
+                    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 });
+
+                    /* axios
+                        .get(`/meeting/${this.meeting.id}/messages`)
+                        .then(response => {
+                            this.messages = response.data.map(cur => {
+                                // cur.id = cur.message_id
+                                cur.timestamp_formatted = timeago.format(cur.timestamp);
+
+                                // cur.user = {
+                                //     name: cur.name,
+                                //     UID: cur.user_uid,
+                                //     avatarFile: cur.avatarSrc || null
+                                // }
+                                cur.sent = this.user.UID == cur.user.UID ? true : false;
+
+                                // delete cur.message_id
+                                // delete cur.name
+                                // delete cur.user_uid
+
+                                return cur;
+                            });
+                        })
+                        .catch(e => {
+                            console.log(e);
+                        }); */
+                }
+            }
+        }
     },
     sockets: {
         incomingCall: function(data) {
@@ -90,6 +129,11 @@ export default {
                     }
                 }
             }, 1000);
+        },
+        reconnect: function() {
+            if (this.meeting.uid) {
+                this.$socket.emit("meetingJoined", { lobby_uid: this.meeting.lobby_uid, meeting_uid: this.meeting.uid, user: this.user });
+            }
         }
     },
     methods: {
@@ -119,6 +163,10 @@ export default {
                 this.$store.commit("setLobbyActivity", meeting)
             }
         })
+
+        this.sockets.subscribe("meeting-activity", data => {
+            this.$store.commit("setLobbyActivity", data)
+        })
     }
 };
 </script>

resources/js/components/partials/LobbyList.vue

@@ -112,7 +112,7 @@ export default {
                     if (this.meeting.uid === lobby.selected_meeting.uid) {
                         this.$eventBus.$emit("meetingRejoin");
                     } else {
-                        this.$store.commit("setMeeting", lobby.selected_meeting);
+                        this.$store.commit("setMeeting", {lobby_uid: lobby.uid, ...lobby.selected_meeting});
                     }
                 },
                 error: jXhr => {},

resources/js/components/partials/MeetingRoom.vue

@@ -45,6 +45,9 @@ export default {
         GridLayout: VueGridLayout.GridLayout,
         GridItem: VueGridLayout.GridItem
     },
+    computed: {
+        ...mapState(["meeting", "user", "session"])
+    },
     data() {
         return {
             readyForUse: false,
@@ -67,9 +70,6 @@ export default {
             loadingInProgress: false
         };
     },
-    computed: {
-        ...mapState(["meeting", "user", "session"])
-    },
     methods: {
         disconnect() {
             if (!this.openTokSession) return;

resources/js/components/vuex/index.js

@@ -26,13 +26,11 @@ export default () => new Vuex.Store({
             template: 'lobby-list'
         },
         meeting: {
-            id: '',
+            uid: null,
+            lobby_uid: null,
             name: '',
-            passwordRequired: false,
-            lobby: null,
-            active_members: 0,
-            scheduledDate: null,
-            startedAt: null
+            active_members: [],
+            pros_online: []
         },
         lobbies: [],
         settings: {
@@ -79,14 +77,15 @@ export default () => new Vuex.Store({
             }
         },
         setLobbyActivity(state, data) {
-            let lobby = state.lobbies.filter((cur) => cur.id == data.lobbyID)
+            let lobby = state.lobbies.filter((cur) => cur.uid == data.lobby_uid)
             if (lobby.length) {
-                let meeting = lobby[0].meetings.filter((cur) => cur.id == data.meetingID)
+                let meeting = lobby[0].meetings.filter((cur) => cur.uid == data.meeting_uid)
+                console.log(meeting)
                 if (meeting.length) {
-                    meeting[0].active_members = data.active_members
-                    meeting[0].pros_online = data.pros_online
+                    meeting[0].active_members = Object.values(data.active_members)
+                    meeting[0].pros_online = Object.values(data.pros_online)
 
-                    if (state.meeting.id && state.meeting.id == meeting[0].id) {
+                    if (state.meeting.uid && state.meeting.uid == meeting[0].uid) {
                         state.meeting.active_members = data.active_members
                     }
                 }