call widget works now

resources/js/components/pages/ClientEntrance.vue

@@ -186,7 +186,22 @@ export default {
             prosList: []
         };
     },
-    sockets: {},
+    sockets: {
+        reconnect: function(){
+            this.$socket.emit("userData", {
+                user: {
+                    uid: this.clientUid,
+                    name: `${this.firstName} ${this.lastName}`,
+                    type: "STRANGER"
+                },
+                meeting: {
+                    uid: this.meetingUid,
+                    lobby_uid: this.lobbyProp.uid
+                },
+                lobbies_uid_list: [`${this.lobbyProp.uid}`]
+            })
+        }
+    },
     watch: {
         publisherReady(val) {
             if (val && this.sessionConnected) this.publishToSession();
@@ -665,7 +680,7 @@ export default {
                     lobby_uid: this.lobbyProp.uid
                 },
                 lobbies_uid_list: [`${this.lobbyProp.uid}`]
-            });
+            })
         }
     },
     mounted() {

resources/js/components/pages/MeetingsAppRoot.vue

@@ -33,7 +33,7 @@
                 </v-expansion-panel-content>
             </v-expansion-panel>
         </v-expansion-panels>
-        <call-bubble :call="incomingCallDetails"></call-bubble>
+        <call-bubble></call-bubble>
     </v-app>
 </template>
 
@@ -62,7 +62,6 @@ export default {
     data() {
         return {
             active_panel: [0, 1, 2],
-            incomingCallDetails: null,
             lobbies: []
         };
     },
@@ -113,26 +112,16 @@ export default {
         incomingCall: function(data) {
             let self = this;
 
-            if (!data.time_limit) {
-                data.time_limit = 10;
-            }
-
-            self.incomingCallDetails = data;
-
-            let timer = setInterval(() => {
-                if (self.incomingCallDetails.time_limit > 0) {
-                    self.incomingCallDetails.time_limit--;
-
-                    if (self.incomingCallDetails.time_limit == 0) {
-                        clearInterval(timer);
-                        console.log("TIME IS OUT!");
-                    }
-                }
-            }, 1000);
+            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("userData", {
+                    user: this.userProp,
+                    meeting: this.meeting,
+                    lobbies_uid_list: lobbies.reduce((acc, cur) => { console.log(cur); return [...acc, cur.uid] }, [])
+                })
             }
         }
     },

resources/js/components/partials/LobbyList.vue

@@ -169,6 +169,13 @@ export default {
                 }
             });
         }
+    },
+    mounted(){
+        let self = this
+
+        this.$eventBus.$on('joinMeeting', function(data){
+            self.joinMeeting(data)
+        })
     }
 };
 </script>

resources/js/components/vuex/index.js

@@ -33,6 +33,10 @@ export default () => new Vuex.Store({
             admin: {
                 showAllLobbiesMettings: localStorage.getItem('showAllLobbiesMettings') == 'true' ? true : false
             }
+        },
+        callWidget: {
+            active: false,
+            callInfo: {}
         }
     },
     mutations: {
@@ -93,6 +97,14 @@ export default () => new Vuex.Store({
                     if (state.meeting.uid && state.meeting.uid == meeting[0].uid) {
                         state.meeting.active_members = data.active_members
                     }
+
+                    if(state.callWidget.callInfo.meeting_uid == meeting[0].uid){
+                        if(!meeting[0].active_members.length || meeting[0].pros_online.findIndex((x) => x.uid == state.user.uid) !== -1){
+                            state.callWidget.active = false
+                        } else {
+                            state.callWidget.active = true
+                        }
+                    }
                 }
             }
         },
@@ -131,6 +143,26 @@ export default () => new Vuex.Store({
 
         /* Other */
 
+        setCall(state, 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--;
+
+                        if (state.callWidget.callInfo.time_limit == 0) {
+                            clearInterval(timer);
+                            console.log("TIME IS OUT!");
+                        }
+                    }
+                }, 1000)
+            }
+        },
+        rejectCall(state) {
+            state.callWidget.active = false
+            state.callWidget.callInfo = {}
+        },
         setSessionConnectivityState(state, data) {
             state.session.sessionConnected = data
         },

resources/js/components/widgets/CallBubble.vue

@@ -2,7 +2,7 @@
   <v-btn
         color="pink"
         class="callBtn"
-        :class="{'showingAll': showCalleeDetails, 'active': call && call.time_limit > 0}"
+        :class="{'showingAll': showCalleeDetails, 'active': (callWidget.active && callWidget.callInfo && (callWidget.callInfo.time_limit > 0 || callWidget.callInfo.time_limit == null))}"
         dark
         absolute
         bottom
@@ -10,28 +10,28 @@
         ripple
         @click="shiftForm"
         >
-        <div v-if="call">
+        <div v-if="callWidget.active">
             <div class="d-flex flex-row align-items-center btnHeader">
                 <v-icon>mdi-video</v-icon>
-                <div class="ml-2 incomingCallMsg">Incoming Call {{!showCalleeDetails ? `(${call.time_limit})` : ''}}</div>
+                <div class="ml-2 incomingCallMsg">Incoming Call {{!showCalleeDetails && callWidget.callInfo.time_limit !== null ? `(${callWidget.callInfo.time_limit})` : ''}}</div>
             </div>
             <div class="fullDetails mt-3">
                 <div class="d-flex flex-row justify-content-between">
                     <span>Callee:</span>
-                    <span>{{call.user_type}}</span>
+                    <span>{{callWidget.callInfo.user_type}}</span>
                 </div>
 
                 <div class="d-flex flex-row justify-content-between">
                     <span>Lobby:</span>
-                    <span>{{call.lobby || 'None'}}</span>
+                    <span>{{callWidget.callInfo.lobby || 'None'}}</span>
                 </div>
 
-                <div class="d-flex flex-row justify-content-between mt-2">
-                    <span>{{call.name || 'Unknown'}}</span>
+                <div class="d-flex flex-row justify-content-center mt-2">
+                    <span>{{callWidget.callInfo.name || 'Unknown'}}</span>
                 </div>
 
                 <div class="d-flex flex-row justify-content-center mt-5">
-                    <h2>{{call.time_limit}}</h2>
+                    <h2 v-if="callWidget.callInfo.time_limit">{{callWidget.callInfo.time_limit}}</h2>
                 </div>
 
                 <div class="d-flex flex-row justify-content-between mt-5 ctrlBtns">
@@ -63,7 +63,7 @@ export default {
         }
     },
     computed: {
-        ...mapState(["settings"]),
+        ...mapState(["lobbies","settings", "callWidget"]),
     },
     watch: {
         call: {
@@ -82,9 +82,27 @@ export default {
     methods: {
         handleCall(acceptCall) {
             if(acceptCall){
-                console.log('Call accepted!')
+                let meeting = []
+
+                for(let lobby of this.lobbies){
+                    meeting = lobby.meetings.filter((x) => x.uid == this.callWidget.callInfo.meeting_uid)
+
+                    if(meeting.length){
+                        break
+                    }
+                }
+
+                if(!meeting.length){
+                    return
+                } else {
+                    let data = {
+                        selected_meeting: meeting[0]
+                    }
+
+                    this.$eventBus.$emit('joinMeeting', data)
+                }
             } else {
-                console.log('Call Rejected!')
+                this.$store.commit('rejectCall')
             }
         },
         shiftForm(){