socket updates

resources/js/components/pages/ClientEntrance.vue

@@ -108,6 +108,16 @@ import { mapState } from "vuex";
 
 import VueGridLayout from "vue-grid-layout";
 
+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 {
     components: {
         GridLayout: VueGridLayout.GridLayout,
@@ -121,21 +131,17 @@ export default {
         meetingProp: {
             type: Object
         }
-        // ,
-        // lobby_uid: {
-        //     type: String,
-        //     required: true
-        // }
     },
     data() {
         return {
             user: {
-                firstName: "",
-                lastName: "",
+                firstName: '',
+                lastName: '',
                 dateOfBirth: null
             },
-            meetingUid: "",
-            stepper: 1,
+            meetingUid: '',
+            meetingName: sessionStorage.getItem('meeting_name') || '',
+            stepper: sessionStorage.getItem('step') || 1,
             cameraWorkingConfirmed: false,
             loading: false,
             /* Copied */
@@ -159,9 +165,46 @@ export default {
             loadingInProgress: false
         };
     },
+    sockets: {},
+    watch: {
+        publisherReady(val) {
+            if (val && this.sessionConnected) this.publishToSession();
+        },
+        sessionConnected(val) {
+            if (val && this.publisherReady) this.publishToSession();
+        },
+        "user.is_active_and_visible"(val) {
+            if (!this.publisher || !this.publisher.publishVideo) return;
+            this.publisher.publishVideo(val);
+            this.publisher.publishAudio(val);
+        },
+        "meeting.id"(val) {
+            if (this.loadingInProgress) return;
+            this.loadingInProgress = true;
+            this.disconnect();
+
+            if (val) {
+                this.getToken({}, true);
+            } 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);
+        },
+        stepper: {
+            handler(newVal) {
+                sessionStorage.setItem('step', newVal)
+            }
+        }
+    },
     methods: {
         checkIn() {
             this.loading = true;
+            this.meetingName = `${this.user.firstName} ${this.user.lastName} ${this.user.dateOfBirth}`
+
             $.ajax({
                 url: "/post-to-api",
                 method: "POST",
@@ -172,7 +215,7 @@ export default {
                 data: {
                     _api: "/api/meeting/createAsStrangerPerformer",
                     lobbyUid: this.lobbyProp.uid,
-                    title: `${this.user.firstName} ${this.user.lastName} ${this.user.dateOfBirth}`,
+                    title: this.meetingName,
                     strangerFirstName: this.user.firstName,
                     strangerLastName: this.user.lastName,
                     strangerDob: this.user.dateOfBirth
@@ -180,7 +223,22 @@ export default {
                 success: data => {
                     this.stepper = 2;
                     this.meetingUid = data.data;
-                    this.$nextTick(this.initializePublisher);
+
+                    this.$socket.emit('userData', {
+                        user: {
+                            uid: 'someuid',
+                            name: `${this.firstName} ${this.lastName}`,
+                            type: 'STRANGER'
+                        },
+                        meeting: {
+                            uid: this.meetingUid,
+                            lobby_uid: this.lobbyProp.uid
+                        }
+                    })
+
+                    if(!this.publisher){
+                        this.$nextTick(this.initializePublisher);
+                    }
                 },
                 error: jXhr => {},
                 complete: () => {
@@ -215,6 +273,22 @@ export default {
                             cont.obj = this.publisher;
                             this.$set(cont, "self", true);
                             this.cameraWorkingConfirmed = true;
+
+                            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: 'someuid' //TODO:
+                                    }
+                                })
+
+                            if(this.stepper == 3){
+                                this.gotoStep3()
+                            }
                         });
                     }
                 }
@@ -229,7 +303,10 @@ export default {
             });
         },
         gotoStep3() {
-            this.stepper = 3;
+            if(this.stepper != 3){
+                this.stepper = 3;
+            }
+
             this.videoGridPreview = [];
             this.adjustVideoContainers();
             this.$nextTick(() => {
@@ -494,9 +571,9 @@ export default {
                 this.subscribers.push(subscriber);
             });
 
-            console.log(sessionId);
+            /* console.log(sessionId);
             console.log(token);
-            console.log(apiKey);
+            console.log(apiKey); */
             this.openTokSession.connect(token, error => {
                 // If the connection is successful, publish to the session
                 if (error) {
@@ -538,36 +615,36 @@ export default {
             });
         }
     },
-    watch: {
-        publisherReady(val) {
-            if (val && this.sessionConnected) this.publishToSession();
-        },
-        sessionConnected(val) {
-            if (val && this.publisherReady) this.publishToSession();
-        },
-        "user.is_active_and_visible"(val) {
-            if (!this.publisher || !this.publisher.publishVideo) return;
-            this.publisher.publishVideo(val);
-            this.publisher.publishAudio(val);
-        },
-        "meeting.id"(val) {
-            if (this.loadingInProgress) return;
-            this.loadingInProgress = true;
-            this.disconnect();
-
-            if (val) {
-                this.getToken({}, true);
-            } else {
-                this.loadingInProgress = false;
+    created() {
+        if(this.meetingProp){
+            this.user.firstName = this.meetingProp.strangerFirstName
+            this.user.lastName = this.meetingProp.strangerLastName
+            this.user.dateOfBirth = this.meetingProp.strangerDob
+
+            if(this.stepper == 1){
+                this.stepper = 2
             }
-        },
-        "active_menu_item.template"(val) {
-            if (this.loadingInProgress || val !== "room" || !this.meeting.id || this.openTokSession) return;
-            this.loadingInProgress = true;
-            this.getToken({}, true);
+
+            this.$socket.emit('userData', {
+                user: {
+                    uid: 'someuid',
+                    name: `${this.firstName} ${this.lastName}`,
+                    type: 'STRANGER'
+                },
+                meeting: {
+                    uid: this.meetingUid,
+                    lobby_uid: this.lobbyProp.uid
+                }
+            })
         }
     },
     mounted() {
+        if(this.meetingProp){
+            this.meetingUid = this.meetingProp.uid;
+            this.$nextTick(this.initializePublisher);
+            let self = this
+        }
+
         let self = this;
 
         this.$eventBus.$on("meetingRejoin", () => {

resources/js/components/pages/MeetingsAppRoot.vue

@@ -9,7 +9,9 @@
             </v-expansion-panel>
 
             <v-expansion-panel class="no-v-padding">
-                <v-expansion-panel-header>Meeting Room</v-expansion-panel-header>
+                <v-expansion-panel-header>
+                    Meeting Room
+                </v-expansion-panel-header>
                 <v-expansion-panel-content>
                     <meeting-room></meeting-room>
                 </v-expansion-panel-content>
@@ -146,8 +148,6 @@ export default {
         let lobbies = this.userProp.lobbies;
         delete this.userProp.lobbies;
 
-        this.$socket.emit("userData", { user: this.userProp });
-
         lobbies.map(lobby => {
             lobby.selected_meeting = null;
             lobby.meetings.map(meeting => {
@@ -167,13 +167,15 @@ export default {
             this.$store.commit("setMeeting", meeting);
         }
 
+        this.$socket.emit("userData", { user: this.userProp, meeting: this.meeting });
+
         this.$store.commit("setInitialUser", this.userProp);
         this.$store.commit("setLobbies", lobbies);
 
         this.$socket.emit("lobbyDataRequest", lobbies);
 
         this.sockets.subscribe("lobby-data", data => {
-            for (let meeting of data.meetings) {
+            for (let meeting of Object.values(data.meetings)) {
                 this.$store.commit("setLobbyActivity", meeting);
             }
         })