Added kick & lil refactor

client/src/components/Admin.vue

@@ -1,23 +1,13 @@
 <template>
   <div>
-    <b-button @click="broadcastStatus" icon-left="sync">Force status update</b-button>
-    <hr>
     <b-table :data="usersList" striped hoverable>
       <template slot-scope="props">
         <b-table-column field="name" label="Name">
-          {{props.row.name}}
-        </b-table-column>
-
-        <b-table-column field="connection" label="Connection">
-          {{props.row.connection.signalingState}}
-        </b-table-column>
-
-        <b-table-column field="data" label="DataChannel">
-          {{props.row.dataChannel.readyState}}
+          {{props.row}}
         </b-table-column>
 
         <b-table-column>
-          <b-button @click="kickUser(props.row.name)" icon-left="karate" type="is-dark"/>
+          <b-button v-if="isAdmin" @click="kickUser(props.row)" icon-left="karate" type="is-dark"/>
         </b-table-column>
       </template>
     </b-table>
@@ -25,20 +15,21 @@
 </template>
 
 <script>
+import { send } from '@/store/signalPlugin'
+
 export default {
   name: 'Admin',
   computed: {
     usersList () {
-      // return this.$store.state.rtc.peers
-      return []
+      return this.$store.state.room.roomStatus.users
+    },
+    isAdmin () {
+      return this.$store.state.room.admin
     }
   },
   methods: {
-    broadcastStatus () {
-      // this.$store.dispatch('rtc/broadcast', { message: this.$store.state.room.roomStatus, type: 'status' })
-    },
     kickUser (target) {
-      // this.$store.dispatch('rtc/kick', target)
+      send({ name: target, type: 'roomUserKick' })
     }
   }
 }

client/src/store/roomModule.js

@@ -18,7 +18,8 @@ const state = {
       votes: 0,
       voters: []
     },
-    playlist: []
+    playlist: [],
+    users: []
   },
   roomSettings: {
     userControl: false,
@@ -125,6 +126,7 @@ const actions = {
       },
       playlist: []
     })
+    router.push({ name: 'Home' })
   }
 }
 

client/src/store/signalPlugin.js

@@ -2,18 +2,24 @@ const connection = new WebSocket('ws://localhost:8181/socket')
 // const connection = new WebSocket('wss://echo.websocket.org')
 // const connection = new WebSocket('wss://voozik.gltronic.ovh/socket')
 
-setTimeout(send({ type: 'alive' }), 5000)
+var alive = null
 
 export default function createSignalPlugin () {
   return store => {
     connection.onopen = function () {
       console.log('[WS] connected')
       store.dispatch('app/signalConnected')
+      alive = setTimeout(send({ type: 'alive' }), 5000)
+    }
+
+    connection.onclose = function () {
+      clearTimeout(alive)
     }
 
     connection.onerror = function (error) {
-      console.log('[WS] error ' + error)
-      store.dispatch('app/signalError', error)
+      console.log('[WS] error ' + error.type)
+      clearTimeout(alive)
+      store.dispatch('app/signalError', error.type)
     }
 
     connection.onmessage = function (message) {
@@ -23,7 +29,6 @@ export default function createSignalPlugin () {
 
       switch (data.type) {
         case 'leave':
-          store.dispatch('rtc/leave')
           break
 
         case 'login':
@@ -31,7 +36,7 @@ export default function createSignalPlugin () {
           break
 
         case 'serverInfos':
-          store.dispatch('app/serverStatus', data)
+          store.dispatch('app/serverStatus', data.message)
           break
 
         case 'roomCreate':
@@ -47,7 +52,7 @@ export default function createSignalPlugin () {
           break
 
         case 'roomStatus':
-          if (!store.state.room.admin) store.dispatch('room/setRoomStatus', data.message)
+          store.dispatch('room/setRoomStatus', data.message)
           break
 
         case 'roomSettings':
@@ -62,6 +67,10 @@ export default function createSignalPlugin () {
           if (store.state.room.roomSettings.userControl) store.dispatch('room/setUserCommand', data.message)
           break
 
+        case 'roomUserKick':
+          store.dispatch('room/leave', data.message)
+          break
+
         default:
           break
       }

client/src/views/Room.vue

@@ -14,7 +14,7 @@
         <Player />
       </b-tab-item>
 
-      <b-tab-item label="Peers" icon="lan" :visible="isAdmin">
+      <b-tab-item label="Users" icon="account-multiple">
         <Admin />
       </b-tab-item>
 
@@ -51,9 +51,6 @@ export default {
     roomStatus () {
       return this.$store.state.room.roomStatus
     },
-    isAdmin () {
-      return this.$store.state.room.admin
-    },
     isLoggedIn () {
       return this.$store.state.app.loginSuccess
     },