major socket updates

resources/js/components/pages/ClientEntrance.vue

@@ -193,11 +193,6 @@ export default {
                 this.loadingInProgress = false;
             }
         },
-        "active_menu_item.template"(val) {
-            if (this.loadingInProgress || val !== "room" || !this.meeting.id || this.openTokSession) return;
-            this.loadingInProgress = true;
-            this.getToken({}, true);
-        },
         stepper: {
             handler(newVal) {
                 sessionStorage.setItem("step", newVal);
@@ -237,7 +232,8 @@ export default {
                         meeting: {
                             uid: this.meetingUid,
                             lobby_uid: this.lobbyProp.uid
-                        }
+                        },
+                        lobbies_uid_list: [`${this.lobbyProp.uid}`]
                     });
 
                     if (!this.publisher) {
@@ -335,7 +331,6 @@ export default {
             if (this.screenPublisher) {
                 this.screenPublisher.destroy();
                 this.screenPublisher = null;
-                this.$store.commit("setScreenShareState", null);
             }
         },
         getToken() {
@@ -352,14 +347,6 @@ export default {
                     uid: this.meetingUid
                 },
                 success: data => {
-                    // this.$refs.initialModal.hide();
-                    // if (!isAssociate) {
-                    //     const user = Object.assign({}, this.user);
-                    //     user.id = data.participantId;
-                    //     user.name = data.participantName;
-                    //     user.pin = data.participantPin;
-                    //     this.$store.commit("setUser", user);
-                    // }
                     this.initializeOpenTok(data.data.apiKey, data.data.sessionId, data.data.token);
                 },
                 error: jXhr => {
@@ -599,7 +586,7 @@ export default {
             this.$nextTick(function() {
                 this.readyForUse = true;
                 if (this.user.type === "associate") {
-                    if (!this.meeting.id || this.active_menu_item.template !== "room") return;
+                    if (!this.meeting.id) return;
                     this.getToken({}, true);
                     return;
                 }
@@ -638,7 +625,8 @@ export default {
                 meeting: {
                     uid: this.meetingUid,
                     lobby_uid: this.lobbyProp.uid
-                }
+                },
+                lobbies_uid_list: [`${this.lobbyProp.uid}`]
             });
         }
     },

resources/js/components/pages/MeetingsAppRoot.vue

@@ -61,15 +61,7 @@ export default {
         return {
             active_panel: [0, 1, 2],
             incomingCallDetails: null,
-            lobbies: [
-                {
-                    lobbyUid: "1",
-                    name: "Test Lobby",
-                    description: null,
-                    isStrangerAccessible: true,
-                    isClientAccessible: true
-                }
-            ]
+            lobbies: []
         };
     },
     computed: {
@@ -164,10 +156,14 @@ export default {
                 active_members: [],
                 pros_online: []
             }
-            this.$store.commit("setMeeting", meeting);
+            this.$store.commit("setCurrentMeeting", meeting);
         }
 
-        this.$socket.emit("userData", { user: this.userProp, meeting: this.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] }, [])
+        })
 
         this.$store.commit("setInitialUser", this.userProp);
         this.$store.commit("setLobbies", lobbies);
@@ -187,7 +183,7 @@ export default {
         })
 
         this.sockets.subscribe("meeting-created", data => {
-            this.$store.commit("setNewMeetingInLobby", data);
+            this.$store.commit("addNewMeetingInLobby", data);
         })
 
         this.sockets.subscribe("meeting-updated", data => {
@@ -197,15 +193,15 @@ export default {
         /* Lobby Handlers */
 
         this.sockets.subscribe("lobby-updated", data => {
-            this.$store.commit("setUpdateLobby", data)
+            this.$store.commit("updateLobby", data)
         })
 
         this.sockets.subscribe("lobby-activated", data => {
-            this.$store.commit("setActivateLobby", data);
+            this.$store.commit("activateLobby", data);
         })
 
         this.sockets.subscribe("lobby-deactivated", data => {
-            this.$store.commit("setDeactivateLobby", data);
+            this.$store.commit("deactivateLobby", data);
         })
 
         this.sockets.subscribe("lobby-created-for-pro", data => {

resources/js/components/partials/LobbyList.vue

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

resources/js/components/partials/MeetingRoom.vue

@@ -85,7 +85,6 @@ export default {
             if (this.screenPublisher) {
                 this.screenPublisher.destroy();
                 this.screenPublisher = null;
-                this.$store.commit("setScreenShareState", null);
             }
         },
         getToken() {
@@ -345,7 +344,7 @@ export default {
             this.$nextTick(function() {
                 this.readyForUse = true;
                 if (this.user.type === "associate") {
-                    if (!this.meeting.id || this.active_menu_item.template !== "room") return;
+                    if (!this.meeting.id) return;
                     this.getToken({}, true);
                     return;
                 }
@@ -364,56 +363,6 @@ export default {
                 });
             });
         },
-        shareScreen() {
-            if (this.screenPublisher) return;
-            this.screenPublisher = OT.initPublisher(
-                this.$refs.otContainer,
-                {
-                    insertMode: "append",
-                    width: "100%",
-                    height: "100%",
-                    resolution: "1280x720",
-                    frameRate: 30,
-                    videoSource: "screen",
-                    name: this.user.name,
-                    style: {
-                        nameDisplayMode: "on",
-                        archiveStatusDisplayMode: "off"
-                    }
-                },
-                error => {
-                    if (error) {
-                        console.error(error);
-                        if (error.code !== 1500) alert(error.message);
-                        this.screenPublisher = null;
-                    } else {
-                        const cont = this.createVideoContainer();
-                        this.$nextTick(() => {
-                            cont.el = $(`#${cont.id}`)[0];
-                            cont.el.appendChild(this.screenPublisher.element);
-                            cont.obj = this.screenPublisher;
-                            // cont.self = true;
-
-                            this.$set(cont, "self", true);
-                        });
-                        this.screenPublisher.on("streamDestroyed", event => {
-                            cont.el.remove();
-                            const index = this.videos.findIndex(v => v.id == cont.id);
-                            if (index >= 0) this.videos.splice(index, 1);
-                            this.adjustVideoContainers();
-                            this.screenPublisher = null;
-                            this.$store.commit("setScreenShareState", false);
-                        });
-                        this.openTokSession.publish(this.screenPublisher, error => {
-                            if (error) {
-                                alert(error.message);
-                            }
-                        });
-                        this.$store.commit("setScreenShareState", true);
-                    }
-                }
-            );
-        },
         kickParcitipantContinue(participant) {
             const connection = participant.video.obj.stream.connection;
             const [type, id] = connection.data.split(":");
@@ -464,18 +413,8 @@ export default {
             } else {
                 this.loadingInProgress = false;
             }
-        },
-        "active_menu_item.template"(val) {
-            if (this.loadingInProgress || val !== "room" || !this.meeting.id || this.openTokSession) return;
-            this.loadingInProgress = true;
-            this.getToken({}, true);
         }
     },
-    created() {
-        OT.checkScreenSharingCapability(response => {
-            this.$store.commit("setScreesharingAvailability", response.supported);
-        });
-    },
     mounted() {
         let self = this;
 

resources/js/components/vuex/index.js

@@ -20,11 +20,6 @@ export default () => new Vuex.Store({
             sessionConnected: false,
             screenSharingActive: false
         },
-        active_menu_item: {
-            name: 'Lobbies',
-            class: 'mdi mdi-view-dashboard',
-            template: 'lobby-list'
-        },
         meeting: {
             uid: null,
             lobby_uid: null,
@@ -38,34 +33,28 @@ export default () => new Vuex.Store({
         }
     },
     mutations: {
-        setUsername: (state, data) => {
-            state.user.name = data
-        },
-        setUsertype: (state, data) => {
-            state.user.type = data
-        },
+
+        /* User */
+
         setInitialUser(state, data) {
             state.user = data
         },
-        setUser(state, data) {
-            state.user = data
-        },
         setUserAvatarFile(state, data) {
             state.user.avatarFile = data
         },
         setUserActivityState: (state, data) => {
             state.user.is_active_and_visible = data
         },
-        setScreenShareState: (state, data) => {
-            state.session.screenSharingActive = data
-        },
+
+        /* Lobbies */
+
         setLobbies(state, data) {
             state.lobbies = data
         },
         addNewLobby(state, data) {
             state.lobbies.push(data)
         },
-        setUpdateLobby(state, data) {
+        updateLobby(state, data) {
             let lobby = state.lobbies.filter((cur) => cur.uid == data.uid)
 
             if (lobby.length) {
@@ -74,31 +63,21 @@ export default () => new Vuex.Store({
                 }
             }
         },
-        setActivateLobby(state, data) {
+        activateLobby(state, data) {
             let lobby = state.lobbies.filter((cur) => cur.uid == data.uid)
 
             if(lobby.length){
                 lobby.isActive = true
             }
         },
-        setDeactivateLobby(state, data) {
+        deactivateLobby(state, data) {
             let lobby = state.lobbies.filter((cur) => cur.uid == data.uid)
 
             if(lobby.length){
                 lobby.isActive = false
             }
         },
-        setSingleLobby(state, data) {
-            let lobby = state.lobbies.findIndex((cur) => cur.id == data.id)
 
-            if (lobby !== -1) {
-                state.lobbies[lobby].meetings = data.meetings.map(m => {
-                    m.active_members = []
-                    m.pros_online = []
-                    return m
-                })
-            }
-        },
         setLobbyActivity(state, data) {
             let lobby = state.lobbies.filter((cur) => cur.uid == data.lobby_uid)
             if (lobby.length) {
@@ -113,9 +92,11 @@ export default () => new Vuex.Store({
                     }
                 }
             }
-
         },
-        setNewMeetingInLobby(state, data) {
+
+        /* Meetings */
+
+        addNewMeetingInLobby(state, data) {
             let lobby = state.lobbies.filter((cur) => cur.uid == data.lobby.uid)
 
             if (lobby.length) {
@@ -141,12 +122,12 @@ export default () => new Vuex.Store({
                 }
             }
         },
-        setMeeting(state, data) {
+        setCurrentMeeting(state, data) {
             state.meeting = data
         },
-        setScreesharingAvailability(state, data) {
-            state.session.screenSharingAvailable = data
-        },
+
+        /* Other */
+
         setSessionConnectivityState(state, data) {
             state.session.sessionConnected = data
         },