Working room & client refactor

client/src/components/Admin.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <b-button @click="broadcastStatus">Force status update</b-button>
+    <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}}
+        </b-table-column>
+
+        <b-table-column>
+          <b-button @click="kickUser" icon-left="karate" type="is-dark"/>
+        </b-table-column>
+      </template>
+    </b-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Admin',
+  computed: {
+    usersList () {
+      return this.$store.state.rtc.peers
+    }
+  },
+  methods: {
+    broadcastStatus () {
+      this.$store.dispatch('rtc/broadcast', { message: this.$store.state.room.roomStatus, type: 'status' })
+    },
+    kickUser () {
+
+    }
+  }
+}
+</script>

client/src/components/Invite.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h1 class="subtitle">{{roomCode}}</h1>
+    <qrcode :value="roomCode" :options="{ width: 200 }"/>
+  </div>
+</template>
+
+<script>
+import qrcode from '@chenfengyuan/vue-qrcode'
+
+export default {
+  name: 'Invite',
+  components: {
+    qrcode
+  },
+  props: {
+    roomCode: {
+      type: String,
+      default: 'abc'
+    }
+  }
+}
+</script>

client/src/components/Player.vue

@@ -1,13 +1,102 @@
 <template>
-  <div id="player"></div>
+  <div>
+    <youtube
+      ref="youtube"
+      :video-id="roomStatus.current.linkID"
+      :player-vars="playerVars"
+      @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-field>
+  </div>
 </template>
 
 <script>
 export default {
+  name: 'Player',
+  props: ['settings'],
+  computed: {
+    isAdmin () {
+      return this.$store.state.room.admin
+    },
+    roomStatus () {
+      return this.$store.state.room.roomStatus
+    },
+    player () {
+      return this.$refs.youtube.player
+    },
+    playerVars () {
+      const adminVars = {
+        autoplay: 1,
+        controls: 1,
+        disablekb: 0,
+        modestbranding: 1,
+        rel: 0
+      }
+      const userVars = {
+        autoplay: 1,
+        controls: 1,
+        disablekb: 1,
+        modestbranding: 1,
+        rel: 0
+      }
+      return this.isAdmin ? adminVars : userVars
+    }
+  },
+  mounted () {
+    this.player.addEventListener('onStateChange', this.playerStateChange)
+  },
+  watch: {
+    roomStatus: function (status) {
+      if (!this.settings.playLink) {
+        this.player.pauseVideo()
+        return
+      }
 
+      this.player.seekTo(status.player.timeCode, true)
+      if (status.player.playing) this.player.playVideo()
+      else this.player.pauseVideo()
+    }
+  },
+  methods: {
+    async playerStateChange (event) {
+      console.log('[PLAYER] Status change ' + event.data)
+      console.log(await event.target.getVideoData())
+      if (this.isAdmin) {
+        this.$store.dispatch('room/setCurrent', {
+          playerStatus: event.data,
+          timeCode: await this.player.getCurrentTime(),
+          title: await event.target.getVideoData().title
+        })
+      }
+    },
+    play () {
+      if (this.roomStatus.player.playing) this.player.pauseVideo()
+      else this.player.playVideo()
+    },
+    mute () {
+      if (this.player.isMuted()) this.player.unMute()
+      else this.player.mute()
+    },
+    volume (volume) {
+      this.player.setVolume(volume)
+    },
+    skip () {
+
+    }
+  }
 }
 </script>
 
-<style>
-
+<style local>
+.controls {
+  text-align: center;
+  max-width: 500px;
+}
 </style>

client/src/components/Playlist.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <b-button icon-left="plus" @click="addLinkPrompt">Add link</b-button>
+    <b-table :data="roomStatus.playlist" striped hoverable default-sort="vote">
+      <template slot-scope="props">
+        <b-table-column field="title" label="Title">
+          {{props.row.title}}
+        </b-table-column>
+
+        <b-table-column field="link" label="Link">
+          {{props.row.link}}
+        </b-table-column>
+
+        <b-table-column field="vote" label="Votes">
+          {{props.row.votes}}
+        </b-table-column>
+
+        <b-table-column field="voters" label="Voters" :visible="isAdmin">
+          {{props.row.voters}}
+        </b-table-column>
+
+        <b-table-column>
+          <b-button v-if="hasVoted(props.row)" icon-left="arrow-down-bold-outline" type="is-dark" @click="vote (props.row.link, props.row.linkID, false)"/>
+          <b-button v-else icon-left="arrow-up-bold-outline" type="is-dark" @click="vote (props.row.link, props.row.linkID, true)"/>
+        </b-table-column>
+      </template>
+    </b-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Palylist',
+  computed: {
+    isAdmin () {
+      return this.$store.state.room.admin
+    },
+    roomStatus () {
+      return this.$store.state.room.roomStatus
+    }
+  },
+  methods: {
+    addLinkPrompt () {
+      this.$buefy.dialog.prompt({
+        message: 'Add a youtube link',
+        trapFocus: true,
+        inputAttrs: {
+          placeholder: 'https://www.youtube.com/watch?v=YItIK09bpKk',
+          minlength: 10
+        },
+        cancelText: 'Nah',
+        confirmText: 'Add',
+        onConfirm: (link) => this.addLink(link)
+      })
+    },
+    addLink (link) {
+      const linkID = this.$youtube.getIdFromUrl(link)
+      if (linkID === null) {
+        this.$buefy.toast.open('Invalid youtube link')
+        return
+      }
+      this.vote(link, linkID, true)
+    },
+    vote (link, linkID, isPositive) {
+      if (this.isAdmin) {
+        this.$store.dispatch('room/vote', { link: link, linkID: linkID, isPositive: isPositive, voterName: this.$store.state.rtc.name })
+      } else {
+        this.sendVote(link, linkID, isPositive)
+      }
+    },
+    sendVote (link, linkID, isPositive) {
+      const message = {
+        type: 'vote',
+        link: link,
+        linkID: linkID,
+        isPositive: isPositive,
+        voterName: this.$store.state.rtc.name
+      }
+      this.$store.dispatch('rtc/broadcast', { message: message, type: 'vote' })
+    },
+    hasVoted (play) {
+      return play.voters.includes(this.$store.state.rtc.name)
+    }
+  }
+}
+</script>

client/src/components/QRReader.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="container">
+    <p class="error">{{ error }}</p>
+    <qrcode-stream @decode="onDecode" @init="onInit" />
+  </div>
+</template>
+
+<script>
+import { QrcodeStream } from 'vue-qrcode-reader'
+
+export default {
+  name: 'QRReader',
+  components: {
+    QrcodeStream
+  },
+  data () {
+    return {
+      result: '',
+      error: ''
+    }
+  },
+  methods: {
+    onDecode (result) {
+      this.result = result
+      this.$emit('get-code', this.result)
+    },
+    async onInit (promise) {
+      try {
+        await promise
+      } catch (error) {
+        if (error.name === 'NotAllowedError') {
+          this.error = 'Missing camera permissions'
+        } else if (error.name === 'NotFoundError') {
+          this.error = 'No camera'
+        } else if (error.name === 'NotSupportedError') {
+          this.error = 'https ?'
+        } else if (error.name === 'NotReadableError') {
+          this.error = 'Camera in use'
+        } else if (error.name === 'OverconstrainedError') {
+          this.error = 'Shitty camera'
+        } else if (error.name === 'StreamApiNotSupportedError') {
+          this.error = 'Shitty browser'
+        }
+      }
+    },
+    showAlert (message) {
+      this.$buefy.dialog.alert({
+        title: 'Erreur',
+        message: message,
+        type: 'is-danger',
+        hasIcon: true,
+        icon: 'alert-circle-outline',
+        iconPack: 'mdi',
+        ariaRole: 'alertdialog',
+        ariaModal: true
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.error {
+  font-weight: bold;
+  color: red;
+}
+</style>

client/src/store/roomModule.js

@@ -5,10 +5,12 @@ const state = {
     roomCode: '',
     player: {
       timeCode: 0,
+      timeLength: 0,
       playing: true
     },
     current: {
       link: '',
+      linkID: '',
       title: '',
       votes: 0,
       voters: []
@@ -33,28 +35,30 @@ const actions = {
   setAdmin ({ commit }) {
     commit('SET_ADMIN')
   },
-  vote ({ commit, dispatch, state }, { link, isPositive, voterName }) {
-    console.log('vote on ' + link + ' (' + isPositive + ') by ' + voterName)
+  vote ({ commit, dispatch, state }, { link, linkID, isPositive, voterName }) {
+    console.log('vote on ' + link + ' | ' + linkID + ' (' + isPositive + ') by ' + voterName)
     if (isPositive) {
       commit('ADD_VOTE', {
+        linkID: linkID,
         link: link,
         voterName: voterName
       })
     } else {
       commit('REMOVE_VOTE', {
-        link: link,
+        linkID: linkID,
         voterName: voterName
       })
     }
     dispatch('rtc/broadcast', { message: state.roomStatus, type: 'status' }, { root: true })
   },
-  setCurrent ({ commit, dispatch }, { playerStatus, timeCode }) {
+  setCurrent ({ commit, dispatch }, { playerStatus, timeCode, title }) {
     switch (playerStatus) {
       case 0:
         commit('CURRENT_END')
         break
       case 1:
         commit('CURRENT_PLAY', timeCode)
+        commit('SET_CURRENTTITLE', title)
         break
       case 2:
         commit('CURRENT_PAUSE', timeCode)
@@ -77,11 +81,15 @@ const mutations = {
   SET_ADMIN (state) {
     state.admin = true
   },
-  ADD_VOTE (state, { link, voterName }) {
-    var play = state.roomStatus.playlist.find(play => play.link === link)
+  SET_CURRENTTITLE (state, title) {
+    state.roomStatus.current.title = title
+  },
+  ADD_VOTE (state, { link, linkID, voterName }) {
+    var play = state.roomStatus.playlist.find(play => play.linkID === linkID)
     if (play === undefined) {
       play = {
         link: link,
+        linkID: linkID,
         votes: 1,
         voters: [
           voterName
@@ -94,8 +102,8 @@ const mutations = {
       play.voters.push(voterName)
     }
   },
-  REMOVE_VOTE (state, { link, voterName }) {
-    var play = state.roomStatus.playlist.find(play => play.link === link)
+  REMOVE_VOTE (state, { linkID, voterName }) {
+    var play = state.roomStatus.playlist.find(play => play.linkID === linkID)
     play.votes--
     const index = play.voters.indexOf(voterName)
     if (index > -1) {
@@ -111,10 +119,13 @@ const mutations = {
   },
   CURRENT_END (state) {
     if (state.roomStatus.playlist.length === 0) {
-      state.roomStatus.current.link = ''
-      state.roomStatus.current.title = ''
-      state.roomStatus.current.votes = 0
-      state.roomStatus.current.voters = []
+      state.roomStatus.current = {
+        link: '',
+        linkID: '',
+        title: '',
+        votes: 0,
+        voters: []
+      }
     } else {
       state.roomStatus.playlist.sort((a, b) => {
         return b.votes - a.votes

client/src/store/rtcModule.js

@@ -166,7 +166,7 @@ function handleDataChannelStateChangeEvent () {
 }
 
 function handleDataChannelCallback (event) {
-  console.log('[RTC] data channel callback ' + event)
+  console.log('[RTC] data channel callback ' + event + ' target ' + event.target)
   var peer = lastPeer
   peer.dataChannel = event.channel
   peer.dataChannel.onmessage = handleDataChannelMessage
@@ -185,7 +185,7 @@ function handleDataChannelMessage (event) {
       store.dispatch('room/setRoomStatus', data.message)
       break
     case 'vote':
-      store.dispatch('room/vote', { link: data.message.link, isPositive: data.message.isPositive, voterName: data.message.voterName })
+      store.dispatch('room/vote', { link: data.message.link, linkID: data.message.linkID, isPositive: data.message.isPositive, voterName: data.message.voterName })
       break
   }
 }

client/src/views/Home.vue

@@ -6,17 +6,34 @@
     </div>
     <h1 v-else class="title has-text-danger">Server offline</h1>
     <hr>
-    <b-button type="is-primary" @click="connectToRoomPrompt">Join a room</b-button>
+    <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>
 
 <script>
 import { send } from '../store/signalPlugin'
+import QRReader from './../components/QRReader'
 
 export default {
   name: 'Home',
+  components: {
+    QRReader
+  },
+  data () {
+    return {
+      isQRModalActive: false
+    }
+  },
   computed: {
     serverStatus () {
       return this.$store.state.app.serverStatus

client/src/views/Room.vue

@@ -4,70 +4,20 @@
     <h2 class="subtitle">{{roomStatus.current.title}}</h2>
 
     <b-tabs>
-      <b-tab-item label="Player" :visible="settings.showPlayer">
-        <div class="playerDiv">
-          <youtube
-            :video-id="roomStatus.current.link"
-            nocookie="true"
-            ref="youtube"
-            @playing="roomStatus.player.playing"
-          ></youtube>
-        </div>
+      <b-tab-item label="Playlist">
+        <Playlist />
       </b-tab-item>
 
-      <b-tab-item label="Playlist">
-        <b-button icon-left="plus" @click="addLinkPrompt">Add link</b-button>
-        <b-table :data="roomStatus.playlist" striped hoverable default-sort="vote">
-          <template slot-scope="props">
-            <b-table-column field="title" label="Title">
-              {{props.row.title}}
-            </b-table-column>
-
-            <b-table-column field="link" label="Link">
-              {{props.row.link}}
-            </b-table-column>
-
-            <b-table-column field="vote" label="Votes">
-              {{props.row.votes}}
-            </b-table-column>
-
-            <b-table-column field="voters" label="Voters" :visible="isAdmin">
-              {{props.row.voters}}
-            </b-table-column>
-
-            <b-table-column>
-              <b-button v-if="hasVoted(props.row)" icon-left="arrow-down-bold-outline" type="is-dark" @click="vote (props.row.link, false)"/>
-              <b-button v-else icon-left="arrow-up-bold-outline" type="is-dark" @click="vote (props.row.link, true)"/>
-            </b-table-column>
-          </template>
-        </b-table>
+      <b-tab-item label="Player" :visible="settings.showPlayer && settings.playLink">
+        <Player />
       </b-tab-item>
 
       <b-tab-item label="Admin" :visible="isAdmin">
-        <b-button @click="broadcastStatus">Force status update</b-button>
-        <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}}
-            </b-table-column>
-
-            <b-table-column>
-              <b-button icon-left="karate" type="is-dark"/>
-            </b-table-column>
-          </template>
-        </b-table>
+        <Admin />
       </b-tab-item>
 
       <b-tab-item label="Invite">
-        <h1 class="subtitle">{{roomStatus.roomCode}}</h1>
+        <Invite v-bind:roomCode="roomStatus.roomCode"/>
       </b-tab-item>
 
       <b-tab-item label="Settings">
@@ -85,22 +35,26 @@
 </template>
 
 <script>
+import Invite from './../components/Invite'
+import Admin from './../components/Admin'
+import Playlist from './../components/Playlist'
+import Player from './../components/Player'
+
 export default {
   name: 'Room',
+  components: {
+    Invite,
+    Admin,
+    Playlist,
+    Player
+  },
   computed: {
-    player () {
-      return this.$refs.youtube.player
-    },
     roomStatus () {
       return this.$store.state.room.roomStatus
     },
     isAdmin () {
       return this.$store.state.room.admin
     },
-    usersList () {
-      console.log('USER LIST ' + this.$store.state.rtc.peers)
-      return this.$store.state.rtc.peers
-    },
     isLoggedIn () {
       return this.$store.state.app.loginSuccess
     },
@@ -111,67 +65,16 @@ export default {
   data () {
     return {
       settings: {
-        playLink: true,
-        showPlayer: true
+        playLink: false,
+        showPlayer: false
       }
     }
   },
   mounted () {
     if (!this.isLoggedIn) this.$router.push({ name: 'Home' })
-    this.player.addEventListener('onStateChange', this.playerStateChange)
-    this.player.playVideo()
-  },
-  watch: {
-    roomStatus: function (status) {
-      this.player.seekTo(status.player.timeCode, true)
-      if (status.player.playing) this.player.playVideo()
-      else this.player.pauseVideo()
-    }
-  },
-  methods: {
-    broadcastStatus () {
-      this.$store.dispatch('rtc/broadcast', { message: this.$store.state.room.roomStatus, type: 'status' })
-    },
-    addLinkPrompt () {
-      this.$buefy.dialog.prompt({
-        message: 'Add a youtube link',
-        trapFocus: true,
-        inputAttrs: {
-          placeholder: 'https://www.youtube.com/watch?v=YItIK09bpKk',
-          minlength: 10
-        },
-        cancelText: 'Nah',
-        confirmText: 'Add',
-        onConfirm: (link) => this.addLink(link)
-      })
-    },
-    addLink (link) {
-      const linkID = this.$youtube.getIdFromUrl(link)
-      if (linkID === null) {
-        this.$buefy.toast.open('Invalid youtube link')
-        return
-      }
-      if (this.isAdmin) {
-        this.$store.dispatch('room/vote', { link: linkID, isPositive: true, voterName: this.$store.state.rtc.name })
-      } else {
-        this.vote(linkID, true)
-      }
-    },
-    vote (link, isPositive) {
-      const message = {
-        type: 'vote',
-        link: link,
-        isPositive: isPositive,
-        voterName: this.$store.state.rtc.name
-      }
-      this.$store.dispatch('rtc/broadcast', { message: message, type: 'vote' })
-    },
-    hasVoted (play) {
-      return play.voters.includes(this.$store.state.rtc.name)
-    },
-    async playerStateChange (event) {
-      console.log('[PLAYER] Status change ' + event.data)
-      if (this.isAdmin) this.$store.dispatch('room/setCurrent', { playerStatus: event.data, timeCode: await this.$refs.youtube.player.getCurrentTime() })
+    if (this.isAdmin) {
+      this.settings.playLink = true
+      this.settings.showPlayer = true
     }
   }
 }
@@ -181,8 +84,4 @@ export default {
 .room {
   margin-top: 20px;
 }
-
-.playerDiv {
-  height: 500px;
-}
 </style>