socket adjustments

resources/js/components/pages/MeetingsAppRoot.vue

@@ -38,16 +38,16 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
-import VueSocketIO from "vue-socket.io";
-import SocketIO from "socket.io-client";
+import { mapState } from "vuex"
+import VueSocketIO from "vue-socket.io"
+import SocketIO from "socket.io-client"
 
 Vue.use(
     new VueSocketIO({
         debug: true,
         connection: SocketIO(process.env.MIX_SOCKET_SERVICE_URL)
     })
-);
+)
 
 export default {
     props: {
@@ -63,7 +63,7 @@ export default {
         return {
             active_panel: [0, 1, 2],
             lobbies: []
-        };
+        }
     },
     computed: {
         ...mapState(["user", "meeting"])
@@ -72,12 +72,12 @@ export default {
         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 });
+                    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 });
+                    this.$socket.emit("meetingJoined", { lobby_uid: newVal.lobby_uid, meeting_name: newVal.name, meeting_uid: newVal.uid, user: this.user })
 
                     this.$eventBus.$emit("updateMeetingMessages")
                     /* axios
@@ -85,44 +85,86 @@ export default {
                         .then(response => {
                             this.messages = response.data.map(cur => {
                                 // cur.id = cur.message_id
-                                cur.timestamp_formatted = timeago.format(cur.timestamp);
+                                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;
+                                cur.sent = this.user.UID == cur.user.UID ? true : false
 
                                 // delete cur.message_id
                                 // delete cur.name
                                 // delete cur.user_uid
 
-                                return cur;
-                            });
+                                return cur
+                            })
                         })
                         .catch(e => {
-                            console.log(e);
-                        }); */
+                            console.log(e)
+                        }) */
                 }
             }
         }
     },
     sockets: {
         incomingCall: function(data) {
-            let self = this;
+            let self = this
 
             this.$store.commit('setCall', data)
         },
         reconnect: function() {
             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("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) => { console.log(cur); return [...acc, cur.uid] }, [])
+                    lobbies_uid_list: lobbies.reduce((acc, cur) => { return [...acc, cur.uid] }, [])
                 })
             }
+        },
+        'call-data': function(data){
+            if(data.callData && data.state == null){
+                this.$store.commit("setCall", data.callData)
+            }
+
+            this.$socket.emit("lobbyDataRequest", this.lobbies)
+        },
+        'lobby-data': function(data){
+            for (let meeting of Object.values(data.meetings)) {
+                this.$store.commit("setLobbyActivity", meeting)
+            }
+        },
+
+        /* Meeting Handlers */
+
+        'meeting-activity': function(data){
+            this.$store.commit("setLobbyActivity", data)
+        },
+        'meeting-created': function(data){
+            this.$store.commit("addNewMeetingInLobby", data)
+        },
+        'meeting-updated': function(data){
+            this.$store.commit("setUpdatedMeetingInLobby", data)
+        },
+        'meeting-closed': function(data){
+            this.$eventBus.$emit("leaveMeeting")
+        },
+
+        /* Lobby Handlers */
+
+        'lobby-updated': function(data){
+            this.$store.commit("updateLobby", data)
+        },
+        'lobby-activated': function(data){
+            this.$store.commit("activateLobby", data)
+        },
+        'lobby-deactivated': function(data){
+            this.$store.commit("deactivateLobby", data)
+        },
+        'lobby-created-for-pro': function(data){
+            this.$store.commit("addNewLobby", data)
         }
     },
     methods: {
@@ -131,16 +173,16 @@ export default {
         }
     },
     mounted() {
-        let lobbies = this.userProp.lobbies;
-        delete this.userProp.lobbies;
+        let lobbies = this.userProp.lobbies
+        delete this.userProp.lobbies
 
         lobbies.map(lobby => {
-            lobby.selected_meeting = null;
+            lobby.selected_meeting = null
             lobby.meetings.map(meeting => {
-                meeting.active_members = [];
-                meeting.pros_online = [];
-            });
-        });
+                meeting.active_members = []
+                meeting.pros_online = []
+            })
+        })
 
         if (this.meetingProp) {
             let meeting = {
@@ -150,67 +192,25 @@ export default {
                 active_members: [],
                 pros_online: []
             }
-            this.$store.commit("setCurrentMeeting", meeting);
+            this.$store.commit("setCurrentMeeting", meeting)
         }
 
         this.$socket.emit("userData", {
             user: this.userProp,
             meeting: this.meeting,
-            lobbies_uid_list: lobbies.reduce((acc, cur) => { console.log(cur); return [...acc, cur.uid] }, [])
+            lobbies_uid_list: lobbies.reduce((acc, cur) => { return [...acc, cur.uid] }, [])
         })
 
-        this.$store.commit("setInitialUser", this.userProp);
-        this.$store.commit("setLobbies", lobbies);
-
-        this.$socket.emit("lobbyDataRequest", lobbies);
+        this.$store.commit("setInitialUser", this.userProp)
+        this.$store.commit("setLobbies", lobbies)
 
-        this.sockets.subscribe("lobby-data", data => {
-            for (let meeting of Object.values(data.meetings)) {
-                this.$store.commit("setLobbyActivity", meeting);
-            }
-        })
-
-        /* Meeting Handlers */
-
-        this.sockets.subscribe("meeting-activity", data => {
-            this.$store.commit("setLobbyActivity", data)
-        })
-
-        this.sockets.subscribe("meeting-created", data => {
-            this.$store.commit("addNewMeetingInLobby", data);
-        })
-
-        this.sockets.subscribe("meeting-updated", data => {
-            this.$store.commit("setUpdatedMeetingInLobby", data);
-        })
-
-        this.sockets.subscribe("meeting-closed", data => {
-            this.$eventBus.$emit("leaveMeeting")
-        })
-
-        /* Lobby Handlers */
-
-        this.sockets.subscribe("lobby-updated", data => {
-            this.$store.commit("updateLobby", data)
-        })
-
-        this.sockets.subscribe("lobby-activated", data => {
-            this.$store.commit("activateLobby", data);
-        })
-
-        this.sockets.subscribe("lobby-deactivated", data => {
-            this.$store.commit("deactivateLobby", data);
-        })
-
-        this.sockets.subscribe("lobby-created-for-pro", data => {
-            this.$store.commit("addNewLobby", data);
-        })
+        this.$socket.emit("callDataRequest", lobbies)
     }
-};
+}
 </script>
 
 <style>
 .v-expansion-panel-content__wrap {
-    padding: 24px 16px;
+    padding: 24px 16px
 }
 </style>

resources/js/components/vuex/index.js

@@ -144,16 +144,16 @@ export default () => new Vuex.Store({
         /* Other */
 
         setCall(state, data) {
-            state.callWidget.callInfo = data;
+            state.callWidget.callInfo = data
 
             if(state.callWidget.callInfo.time_limit){
                 let timer = setInterval(() => {
                     if (state.callWidget.callInfo.time_limit > 0) {
-                        state.callWidget.callInfo.time_limit--;
+                        state.callWidget.callInfo.time_limit--
 
                         if (state.callWidget.callInfo.time_limit == 0) {
-                            clearInterval(timer);
-                            console.log("TIME IS OUT!");
+                            clearInterval(timer)
+                            console.log('TIME IS OUT!')
                         }
                     }
                 }, 1000)

resources/js/components/widgets/CallBubble.vue

@@ -82,6 +82,7 @@ export default {
     methods: {
         handleCall(acceptCall) {
             if(acceptCall){
+                this.$socket.emit('callDecision', true)
                 let meeting = []
 
                 for(let lobby of this.lobbies){
@@ -102,6 +103,7 @@ export default {
                     this.$eventBus.$emit('joinMeeting', data)
                 }
             } else {
+                this.$socket.emit('callDecision', false)
                 this.$store.commit('rejectCall')
             }
         },