kick and leave buttons connected - meetings

resources/js/components/pages/ClientEntrance.vue

@@ -488,8 +488,8 @@ export default {
             this.openTokSession.on({
                 sessionDisconnected: event => {
                     if (event.reason === "forceDisconnected") {
-                        alert("You were kicked.");
-                        window.location.reload();
+                        alert("You were kicked out of meeting.");
+                        //window.location.reload();
                         //TODO: Kicked
                         // if (this.user.type === "associate") {
                         //     this.disconnect();

resources/js/components/pages/MeetingsAppRoot.vue

@@ -10,7 +10,9 @@
 
             <v-expansion-panel class="no-v-padding">
                 <v-expansion-panel-header>
-                    Meeting Room
+                    <span>Meeting Room</span>
+                    <v-spacer></v-spacer>
+                    <v-btn color="purple" small ripple outlined class="mr-3" @click.stop="leaveMeeting">Leave</v-btn>
                 </v-expansion-panel-header>
                 <v-expansion-panel-content>
                     <meeting-room></meeting-room>
@@ -134,7 +136,9 @@ export default {
         }
     },
     methods: {
-        //
+        leaveMeeting(){
+            this.$eventBus.$emit('leaveMeeting')
+        }
     },
     mounted() {
         let lobbies = this.userProp.lobbies;

resources/js/components/partials/MeetingRoom.vue

@@ -16,7 +16,7 @@
                     :use-css-transforms="true"
                 >
                     <grid-item v-for="(video, index) in videoGrid" :key="video.id" :id="video.id" :x="video.x" :y="video.y" :w="video.w" :h="video.h" :i="video.i">
-                        <v-btn :color="'#282e38'" fab large dark class="v-btn--kick" @click="kickParcitipant(video)" v-show="!video.video.self && user.type == 'associate'">
+                        <v-btn :color="'#282e38'" fab large dark class="v-btn--kick" @click="kickParcitipant(video)" v-show="!video.video.self && user.type == 'PRO'">
                             <v-icon>mdi-account-remove</v-icon>
                         </v-btn>
                     </grid-item>
@@ -55,7 +55,6 @@ export default {
             counter: 1,
             openTokSession: null,
             publisher: null,
-            screenPublisher: null,
             subscribers: [],
             publisherReady: false,
             accessDialogShown: false,
@@ -82,10 +81,6 @@ export default {
             this.publisherReady = false;
             this.$store.commit("setSessionConnectivityState", false);
             this.openTokSession = null;
-            if (this.screenPublisher) {
-                this.screenPublisher.destroy();
-                this.screenPublisher = null;
-            }
         },
         getToken() {
             $.ajax({
@@ -226,7 +221,7 @@ export default {
             this.openTokSession.on({
                 sessionDisconnected: event => {
                     if (event.reason === "forceDisconnected") {
-                        alert("You were kicked.");
+                        alert("You were kicked out of meeting.");
                         this.$store.dispatch("leaveMeeting");
                     }
                 }
@@ -439,7 +434,7 @@ export default {
             if (val) {
                 this.getToken();
             } else {
-                //this.disconnect(); - causing openTok errors
+                this.disconnect()
                 this.loadingInProgress = false;
             }
         }

resources/sass/app.scss

@@ -52,6 +52,27 @@ $orange: #F08322;
     transform: scale(0.3);
 }
 
+/* Grid */
+
+.vue-grid-item {
+	.v-btn.v-btn--kick {
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		position: fixed;
+		margin-bottom: 8px;
+		z-index: 10000 !important;
+		transition: all 0.3s;
+		opacity: 0;
+	}
+
+	&:hover {
+		.v-btn.v-btn--kick {
+			opacity: 1
+		}
+	}
+}
+
 /* MC */
 
 .mc-page {