client cleanup

resources/js/components/pages/ClientEntrance.vue

@@ -95,7 +95,23 @@
                         class="mb-12"
                         color="grey lighten-1"
                         height="200px"
-                        ></v-card>
+                        >
+                        <grid-layout
+                            :layout="videoGrid"
+                            :key="uniqueId"
+                            :col-num="maxCols"
+                            :max-rows="maxRows"
+                            :row-height="rowHeight"
+                            :is-draggable="true"
+                            :is-resizable="true"
+                            :verticalCompact="true"
+                            :margin="[gridPadding, gridPadding]"
+                            :use-css-transforms="true"
+                        >
+                            <grid-item v-for="video in videoGrid" :key="video.id" :id="video.id" :x="video.x" :y="video.y" :w="video.w" :h="video.h" :i="video.i">
+                            </grid-item>
+                        </grid-layout>
+                        </v-card>
 
                         <v-btn
                         color="primary"
@@ -112,7 +128,15 @@
 </template>
 
 <script>
+import { mapState } from "vuex"
+
+import VueGridLayout from "vue-grid-layout"
+
 export default {
+    components: {
+        GridLayout: VueGridLayout.GridLayout,
+        GridItem: VueGridLayout.GridItem
+    },
     props: {
         lobby_uid: {
             type: String,
@@ -151,27 +175,27 @@ export default {
         },
         /* Copied */
         disconnect() {
-            if (!this.openTokSession) return;
-            this.openTokSession.disconnect();
-            this.openTokSession.off();
-            this.videos = [];
-            this.publisher.destroy();
-            this.publisher = null;
-            this.subscribers = [];
-            this.publisherReady = false;
-            this.$store.commit("setSessionConnectivityState", false);
-            this.openTokSession = null;
+            if (!this.openTokSession) return
+            this.openTokSession.disconnect()
+            this.openTokSession.off()
+            this.videos = []
+            this.publisher.destroy()
+            this.publisher = null
+            this.subscribers = []
+            this.publisherReady = false
+            this.$store.commit("setSessionConnectivityState", false)
+            this.openTokSession = null
             if (this.screenPublisher) {
-                this.screenPublisher.destroy();
-                this.screenPublisher = null;
-                this.$store.commit("setScreenShareState", null);
+                this.screenPublisher.destroy()
+                this.screenPublisher = null
+                this.$store.commit("setScreenShareState", null)
             }
         },
         getToken(data, isAssociate) {
             if (this.meeting.scheduledDate && !this.meeting.startedAt && this.meeting.scheduledDate > new Date() && (this.user.type === "guest" || !confirm("Meeting not started. Start it now?")))
-                return;
-            data.meetingId = this.meeting.id;
-            data.userUid = this.user.UID;
+                return
+            data.meetingId = this.meeting.id
+            data.userUid = this.user.UID
             $.ajax({
                 url: isAssociate ? "/associate/token" : "/token",
                 method: "POST",
@@ -180,141 +204,141 @@ export default {
                 },
                 data,
                 success: data => {
-                    this.$refs.initialModal.hide();
+                    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);
+                        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.apiKey, data.sessionId, data.token);
+                    this.initializeOpenTok(data.apiKey, data.sessionId, data.token)
                 },
                 error: jXhr => {
                     if (jXhr.responseJSON && jXhr.responseJSON.errorCode) {
                         switch (jXhr.responseJSON.errorCode) {
                             case "LM-1":
-                                alert("Meeting not started yet.");
-                                break;
+                                alert("Meeting not started yet.")
+                                break
                             case "LM-2":
-                                alert("You was kicked from this meeting.");
-                                window.location = "/";
-                                break;
+                                alert("You was kicked from this meeting.")
+                                window.location = "/"
+                                break
                             case "LM-3":
-                                alert("Wrong password");
-                                this.$refs.initialModal.disableWaiting();
-                                break;
+                                alert("Wrong password")
+                                this.$refs.initialModal.disableWaiting()
+                                break
                         }
                     } else {
-                        this.$refs.initialModal.disableWaiting();
-                        alert(getSingleError(jXhr));
+                        this.$refs.initialModal.disableWaiting()
+                        alert(getSingleError(jXhr))
                     }
                 }
-            });
+            })
         },
         createVideoContainer() {
-            let videoCont = {};
-            videoCont.id = `${this.uniqueId}_video_${this.counter++}`;
+            let videoCont = {}
+            videoCont.id = `${this.uniqueId}_video_${this.counter++}`
 
-            this.videos.push(videoCont);
-            this.adjustVideoContainers();
+            this.videos.push(videoCont)
+            this.adjustVideoContainers()
 
-            return videoCont;
+            return videoCont
         },
         adjustVideoContainers() {
-            this.videoGrid = [];
+            this.videoGrid = []
 
-            let windowHeight = window.innerHeight;
-            this.rowHeight = (windowHeight - this.gridPadding * (this.maxRows + 1)) / this.maxRows;
+            let windowHeight = window.innerHeight
+            this.rowHeight = (windowHeight - this.gridPadding * (this.maxRows + 1)) / this.maxRows
 
-            let cols = Math.ceil(Math.sqrt(this.videos.length));
-            let rows = Math.ceil(this.videos.length / cols);
+            let cols = Math.ceil(Math.sqrt(this.videos.length))
+            let rows = Math.ceil(this.videos.length / cols)
 
-            let elementsLastRow = this.videos.length % cols;
-            let lastNormalIndex = this.videos.length - elementsLastRow;
+            let elementsLastRow = this.videos.length % cols
+            let lastNormalIndex = this.videos.length - elementsLastRow
 
             if (elementsLastRow) {
-                this.maxCols = cols * elementsLastRow;
+                this.maxCols = cols * elementsLastRow
             } else {
-                this.maxCols = cols;
+                this.maxCols = cols
             }
 
-            let colsPerElement = this.maxCols / cols;
-            let rowsPerElement = this.maxRows / rows;
+            let colsPerElement = this.maxCols / cols
+            let rowsPerElement = this.maxRows / rows
 
-            let colsLastRow = Math.ceil(this.maxCols / elementsLastRow);
+            let colsLastRow = Math.ceil(this.maxCols / elementsLastRow)
 
-            let cntX = 0;
-            let cntY = 0;
+            let cntX = 0
+            let cntY = 0
 
             for (let [index, video] of this.videos.entries()) {
-                video.i = index;
-                video.x = cntX;
-                video.y = cntY;
-                video.h = rowsPerElement;
-                video.w = colsPerElement;
-                cntX += colsPerElement;
+                video.i = index
+                video.x = cntX
+                video.y = cntY
+                video.h = rowsPerElement
+                video.w = colsPerElement
+                cntX += colsPerElement
 
                 if (cntX >= this.maxCols) {
-                    cntX = 0;
-                    cntY += rowsPerElement;
+                    cntX = 0
+                    cntY += rowsPerElement
                 }
 
-                let videoTemp = Object.assign({}, video);
-                videoTemp.video = video;
-                this.videoGrid.push(videoTemp);
+                let videoTemp = Object.assign({}, video)
+                videoTemp.video = video
+                this.videoGrid.push(videoTemp)
             }
 
             /* OLD IMPLEMENTATION */
 
             /* for (let [index, video] of this.videos.entries()) {
-                video.i = index;
+                video.i = index
                 if (index < lastNormalIndex) {
-                    video.x = cntX;
-                    video.y = cntY;
-                    video.h = rowsPerElement;
-                    video.w = colsPerElement;
-                    cntX += colsPerElement;
+                    video.x = cntX
+                    video.y = cntY
+                    video.h = rowsPerElement
+                    video.w = colsPerElement
+                    cntX += colsPerElement
 
                     if (cntX >= this.maxCols) {
-                        cntX = 0;
-                        cntY += rowsPerElement;
+                        cntX = 0
+                        cntY += rowsPerElement
                     }
                 } else {
-                    video.x = cntX;
-                    video.y = cntY;
-                    video.h = rowsPerElement;
-                    video.w = colsLastRow;
-                    cntX += colsLastRow;
+                    video.x = cntX
+                    video.y = cntY
+                    video.h = rowsPerElement
+                    video.w = colsLastRow
+                    cntX += colsLastRow
                 }
 
-                let videoTemp = Object.assign({}, video);
-                this.videoGrid.push(videoTemp);
+                let videoTemp = Object.assign({}, video)
+                this.videoGrid.push(videoTemp)
             } */
 
             /* let gridColumn, gridRows = ''
 
             if(rows && cols){
-                gridColumn = `grid-template-columns: repeat(${cols}, minmax(320px, 1fr));`
-                gridRows = `grid-template-rows: repeat(${rows}, minmax(240px, 1fr));`
+                gridColumn = `grid-template-columns: repeat(${cols}, minmax(320px, 1fr))`
+                gridRows = `grid-template-rows: repeat(${rows}, minmax(240px, 1fr))`
             } */
         },
         initializeOpenTok(apiKey, sessionId, token) {
-            this.openTokSession = OT.initSession(apiKey, sessionId);
+            this.openTokSession = OT.initSession(apiKey, sessionId)
 
             this.openTokSession.on({
                 sessionDisconnected: event => {
                     if (event.reason === "forceDisconnected") {
-                        alert("You were kicked.");
+                        alert("You were kicked.")
                         if (this.user.type === "associate") {
-                            this.disconnect();
-                            this.$store.dispatch("leaveMeeting");
+                            this.disconnect()
+                            this.$store.dispatch("leaveMeeting")
                         } else {
-                            window.location = "/";
+                            window.location = "/"
                         }
                     }
                 }
-            });
+            })
 
             // Create a publisher
             this.publisher = OT.initPublisher(
@@ -333,33 +357,33 @@ export default {
                 },
                 error => {
                     if (error) {
-                        alert(error.message);
+                        alert(error.message)
                     } else {
-                        this.publisherReady = true;
-                        const cont = this.createVideoContainer();
+                        this.publisherReady = true
+                        const cont = this.createVideoContainer()
                         this.$nextTick(() => {
-                            cont.el = $(`#${cont.id}`)[0];
-                            cont.el.appendChild(this.publisher.element);
-                            cont.obj = this.publisher;
-                            this.$set(cont, "self", true);
-                            //cont.self = true;
-                        });
+                            cont.el = $(`#${cont.id}`)[0]
+                            cont.el.appendChild(this.publisher.element)
+                            cont.obj = this.publisher
+                            this.$set(cont, "self", true)
+                            //cont.self = true
+                        })
                     }
                 }
-            );
+            )
 
             this.publisher.on({
                 accessDialogOpened: e => {
-                    this.accessDialogShown = true;
+                    this.accessDialogShown = true
                 },
                 accessDialogClosed: e => {
-                    this.accessDialogShown = false;
+                    this.accessDialogShown = false
                 }
-            });
+            })
 
             this.openTokSession.on("streamCreated", event => {
-                //console.log("stream Created event");
-                let container;
+                //console.log("stream Created event")
+                let container
                 if (event.stream.videoType === "screen") {
                 //TODO: This is
                 }
@@ -374,119 +398,119 @@ export default {
                 },
                 error => {
                     if (error) {
-                        alert(error.message);
+                        alert(error.message)
                     } else {
-                        const cont = this.createVideoContainer();
+                        const cont = this.createVideoContainer()
                         this.$nextTick(() => {
-                            cont.el = $(`#${cont.id}`)[0];
-                            cont.el.appendChild(subscriber.element);
-                            cont.obj = subscriber;
-                            container = cont;
-                        });
+                            cont.el = $(`#${cont.id}`)[0]
+                            cont.el.appendChild(subscriber.element)
+                            cont.obj = subscriber
+                            container = cont
+                        })
                     }
                 }
-                );
+                )
                 subscriber.on({
                 destroyed: e => {
-                    container.el.remove();
-                    const index = this.videos.findIndex(v => v.id == container.id);
-                    if (index >= 0) this.videos.splice(index, 1);
-                    this.adjustVideoContainers();
+                    container.el.remove()
+                    const index = this.videos.findIndex(v => v.id == container.id)
+                    if (index >= 0) this.videos.splice(index, 1)
+                    this.adjustVideoContainers()
                 }
-                });
-                this.subscribers.push(subscriber);
-            });
+                })
+                this.subscribers.push(subscriber)
+            })
 
             this.openTokSession.connect(token, error => {
                 // If the connection is successful, publish to the session
                 if (error) {
-                    alert(error.message);
+                    alert(error.message)
                 } else {
-                    this.$store.commit("setSessionConnectivityState", true);
+                    this.$store.commit("setSessionConnectivityState", true)
                 }
-            });
-            this.loadingInProgress = false;
+            })
+            this.loadingInProgress = false
         },
         publishToSession() {
             this.openTokSession.publish(this.publisher, error => {
             if (error) {
-                alert(error.message);
+                alert(error.message)
             }
-            });
+            })
         },
         ready() {
             this.$nextTick(function() {
-                this.readyForUse = true;
+                this.readyForUse = true
                 if (this.user.type === "associate") {
-                    if (!this.meeting.id || this.active_menu_item.template !== "room") return;
-                    this.getToken({}, true);
-                    return;
+                    if (!this.meeting.id || this.active_menu_item.template !== "room") return
+                    this.getToken({}, true)
+                    return
                 }
 
                 if (this.meeting.scheduledDate && !this.meeting.startedAt && this.meeting.scheduledDate > new Date()) {
-                    alert("Meeting not started.");
-                    return;
+                    alert("Meeting not started.")
+                    return
                 }
-                let participantId = this.user.id;
+                let participantId = this.user.id
                 if (!participantId) {
-                    this.$refs.initialModal.show(this.meeting.passwordRequired);
-                    return;
+                    this.$refs.initialModal.show(this.meeting.passwordRequired)
+                    return
                 }
                 this.getToken({
                     participantId
-                });
-            });
+                })
+            })
         }
     },
     watch: {
         publisherReady(val) {
-            if (val && this.session.sessionConnected) this.publishToSession();
+            if (val && this.session.sessionConnected) this.publishToSession()
         },
         "session.sessionConnected"(val) {
-            if (val && this.publisherReady) this.publishToSession();
+            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);
+            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 (this.loadingInProgress) return
+            this.loadingInProgress = true
+            this.disconnect()
 
             if (val) {
-                this.getToken({}, true);
+                this.getToken({}, true)
             } else {
-                this.loadingInProgress = false;
+                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);
+            if (this.loadingInProgress || val !== "room" || !this.meeting.id || this.openTokSession) return
+            this.loadingInProgress = true
+            this.getToken({}, true)
         }
     },
     mounted() {
-        let self = this;
+        let self = this
 
         this.$eventBus.$on("meetingRejoin", () => {
-            this.loadingInProgress = true;
-            this.disconnect();
-            this.getToken({}, true);
-        });
+            this.loadingInProgress = true
+            this.disconnect()
+            this.getToken({}, true)
+        })
 
-        let width = $(window).width();
-        let height = $(window).height();
+        let width = $(window).width()
+        let height = $(window).height()
 
         window.addEventListener("resize", function() {
-        let new_width = $(window).width();
-        let new_height = $(window).height();
+        let new_width = $(window).width()
+        let new_height = $(window).height()
 
         if (width !== new_width || height !== new_height) {
-            self.adjustVideoContainers();
+            self.adjustVideoContainers()
         }
-        });
+        })
 
         this.$eventBus.$on("leaveMeeting", () => {
             $.ajax({
@@ -496,12 +520,12 @@ export default {
                 "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                 },
                 error: jXhr => {
-                console.error(getSingleError(jXhr));
+                console.error(getSingleError(jXhr))
                 }
-            });
-            this.$store.dispatch("leaveMeeting");
-            this.disconnect();
-        });
+            })
+            this.$store.dispatch("leaveMeeting")
+            this.disconnect()
+        })
     }
 }
 </script>
@@ -509,14 +533,14 @@ export default {
 <style lang="scss" scoped>
 
 .login-box {
-    width: 100%;
+    width: 100%
 }
 
 .checkin-form {
-    height: 200px;
+    height: 200px
 
     form {
-        width: 75%;
+        width: 75%
     }
 }