Improved player

client/src/components/Player.vue

@@ -7,13 +7,22 @@
       @playing="roomStatus.player.playing">
     </youtube>
     <b-field position="is-centered">
-      <p class="control">
-        <b-button @click="play" icon-right="play"/>
-        <b-button @click="mute" icon-right="volume-mute"/>
-        <b-button @click="skip" icon-right="skip-next"/>
-        <b-slider :min="0" :max="100" @change="volume"/>
-      </p>
+        <b-button class="playerButton" @click="play" icon-right="play"/>
+        <b-button class="playerButton" @click="mute" icon-right="volume-mute"/>
+        <b-button class="playerButton" @click="skip" icon-right="skip-next" v-if="isAdmin"/>
+        <b-slider class="playerVolume" :min="0" :max="100" :value="100" @change="volume"/>
     </b-field>
+    <b-field position="is-centered">
+      <b-slider
+        rounded
+        :min="0"
+        :max="roomStatus.player.timeLength"
+        :value="roomStatus.player.timeCode"
+        :custom-formatter="value => convertTimeCode(value)"
+        :disabled="!isAdmin"
+        @change="seek"/>
+    </b-field>
+    <h2 class="subtitle is-6">{{convertTimeCode(roomStatus.player.timeCode)}} / {{convertTimeCode(roomStatus.player.timeLength)}}</h2>
   </div>
 </template>
 
@@ -51,6 +60,7 @@ export default {
   },
   mounted () {
     this.player.addEventListener('onStateChange', this.playerStateChange)
+    setInterval(this.updateTimeCode, 1000)
   },
   watch: {
     roomStatus: function (status) {
@@ -72,6 +82,7 @@ export default {
         this.$store.dispatch('room/setCurrent', {
           playerStatus: event.data,
           timeCode: await this.player.getCurrentTime(),
+          timeLength: await this.player.getDuration(),
           title: await event.target.getVideoData().title
         })
       }
@@ -80,15 +91,26 @@ export default {
       if (this.roomStatus.player.playing) this.player.pauseVideo()
       else this.player.playVideo()
     },
-    mute () {
-      if (this.player.isMuted()) this.player.unMute()
+    async mute () {
+      if (await this.player.isMuted()) this.player.unMute()
       else this.player.mute()
     },
     volume (volume) {
       this.player.setVolume(volume)
     },
     skip () {
-
+      this.$store.commit('room/CURRENT_END')
+    },
+    seek (time) {
+      this.player.seekTo(time, true)
+    },
+    async updateTimeCode () {
+      if (this.settings.playLink) this.$store.dispatch('room/setTimeCode', await this.player.getCurrentTime())
+    },
+    convertTimeCode (timeCode) {
+      const minutes = Math.round(timeCode / 60)
+      const seconds = Math.round(timeCode % 60)
+      return minutes + ':' + seconds
     }
   }
 }
@@ -99,4 +121,14 @@ export default {
   text-align: center;
   max-width: 500px;
 }
+
+.playerButton {
+  margin-left: 10px;
+}
+
+.playerVolume {
+  margin-left: 30px;
+  margin-right: 30px;
+  max-width: 150px;
+}
 </style>

client/src/store/roomModule.js

@@ -35,6 +35,9 @@ const actions = {
   setAdmin ({ commit }) {
     commit('SET_ADMIN')
   },
+  setTimeCode ({ commit }, timeCode) {
+    commit('SET_TIMECODE', timeCode)
+  },
   vote ({ commit, dispatch, state }, { link, linkID, isPositive, voterName }) {
     console.log('vote on ' + link + ' | ' + linkID + ' (' + isPositive + ') by ' + voterName)
     if (isPositive) {
@@ -51,7 +54,7 @@ const actions = {
     }
     dispatch('rtc/broadcast', { message: state.roomStatus, type: 'status' }, { root: true })
   },
-  setCurrent ({ commit, dispatch }, { playerStatus, timeCode, title }) {
+  setCurrent ({ commit, dispatch }, { playerStatus, timeCode, timeLength, title }) {
     switch (playerStatus) {
       case 0:
         commit('CURRENT_END')
@@ -59,12 +62,33 @@ const actions = {
       case 1:
         commit('CURRENT_PLAY', timeCode)
         commit('SET_CURRENTTITLE', title)
+        commit('SET_TIMELENGTH', timeLength)
         break
       case 2:
         commit('CURRENT_PAUSE', timeCode)
         break
     }
     dispatch('rtc/broadcast', { message: state.roomStatus, type: 'status' }, { root: true })
+  },
+  leave ({ commit, dispatch }) {
+    dispatch('rtc/leave', null, { root: true })
+    commit('SET_ROOMSTATUS', {
+      roomName: '',
+      roomCode: '',
+      player: {
+        timeCode: 0,
+        timeLength: 0,
+        playing: true
+      },
+      current: {
+        link: '',
+        linkID: '',
+        title: '',
+        votes: 0,
+        voters: []
+      },
+      playlist: []
+    })
   }
 }
 
@@ -81,6 +105,12 @@ const mutations = {
   SET_ADMIN (state) {
     state.admin = true
   },
+  SET_TIMECODE (state, timeCode) {
+    state.roomStatus.player.timeCode = timeCode
+  },
+  SET_TIMELENGTH (state, timeLength) {
+    state.roomStatus.player.timeLength = timeLength
+  },
   SET_CURRENTTITLE (state, title) {
     state.roomStatus.current.title = title
   },

client/src/store/rtcModule.js

@@ -124,9 +124,10 @@ const mutations = {
   },
   LEAVE (state) {
     state.peers.forEach((peer) => {
+      peer.dataChannel.close()
       peer.connection.close()
     })
-    state.peers = {}
+    state.peers = []
   },
   BROADCAST (state, { message, type }) {
     const data = JSON.stringify({

client/src/views/Home.vue

@@ -1,22 +1,28 @@
 <template>
   <div class="home">
     <div v-if="serverConnected">
-      <h1 class="title has-text-success">Server online</h1>
-      <h1 class="title">{{serverStatus.userCount}} users | {{serverStatus.roomCount}} rooms</h1>
+      <h1 class="title is-1 has-text-success">Server online</h1>
+      <div v-if="isLoggedIn">
+        <h1 class="title is-4">{{serverStatus.userCount}} users | {{serverStatus.roomCount}} rooms</h1>
+        <h1 class="subtitle is-6">Connected as {{userName}}</h1>
+        <hr>
+        <b-field position="is-centered">
+          <b-button type="is-primary" @click="connectToRoomPrompt">Join a room</b-button>
+        </b-field>
+        <b-field position="is-centered">
+          <b-button @click="isQRModalActive = true" icon-right="qrcode" size="is-large"/>
+        </b-field>
+        <hr>
+        <b-button type="is-primary" @click="makeRoomPrompt">Make a room</b-button>
+        <b-modal :active.sync="isQRModalActive" has-modal-card trap-focus>
+          <QRReader v-on:get-code="connectToRoom"/>
+        </b-modal>
+      </div>
+    </div>
+    <div v-else>
+      <h1 class="title is-1 has-text-danger">Server offline</h1>
+      <h1 class="subtitle">it is sad day</h1>
     </div>
-    <h1 v-else class="title has-text-danger">Server offline</h1>
-    <hr>
-    <b-field position="is-centered">
-      <b-button type="is-primary" @click="connectToRoomPrompt">Join a room</b-button>
-    </b-field>
-    <b-field position="is-centered">
-      <b-button @click="isQRModalActive = true" icon-right="qrcode"/>
-    </b-field>
-    <hr>
-    <b-button type="is-primary" @click="makeRoomPrompt">Make a room</b-button>
-    <b-modal :active.sync="isQRModalActive" has-modal-card trap-focus>
-      <QRReader v-on:get-code="connectToRoom"/>
-    </b-modal>
   </div>
 </template>
 
@@ -40,10 +46,18 @@ export default {
     },
     serverConnected () {
       return this.$store.state.app.signalServerConnected
+    },
+    isLoggedIn () {
+      return this.$store.state.app.loginSuccess
+    },
+    userName () {
+      return this.$store.state.rtc.name
     }
   },
-  mounted () {
-    this.loginPrompt()
+  watch: {
+    serverConnected: function (isConnected) {
+      if (!this.isLoggedIn && this.serverConnected) this.loginPrompt()
+    }
   },
   methods: {
     loginPrompt () {

client/src/views/Room.vue

@@ -9,7 +9,7 @@
       </b-tab-item>
 
       <b-tab-item label="Player" :visible="settings.showPlayer && settings.playLink">
-        <Player />
+        <Player v-bind:settings="settings"/>
       </b-tab-item>
 
       <b-tab-item label="Admin" :visible="isAdmin">
@@ -21,12 +21,16 @@
       </b-tab-item>
 
       <b-tab-item label="Settings">
-        <div class="field">
+        <b-field label="Player">
           <b-switch v-model="settings.playLink">Play link</b-switch>
-        </div>
-        <div class="field">
+        </b-field>
+        <b-field>
           <b-switch v-model="settings.showPlayer" :disabled="!settings.playLink">Show player</b-switch>
-        </div>
+        </b-field>
+        <hr>
+        <b-field label="User">
+          <b-button type="is-danger" icon-right="exit-to-app" @click="leave">Leave</b-button>
+        </b-field>
       </b-tab-item>
 
     </b-tabs>
@@ -76,6 +80,12 @@ export default {
       this.settings.playLink = true
       this.settings.showPlayer = true
     }
+  },
+  methods: {
+    leave () {
+      this.$store.dispatch('room/leave')
+      this.$router.push({ name: 'Home' })
+    }
   }
 }
 </script>