User controls & websocket fix

client/README.md

@@ -1,24 +0,0 @@
-# oozik
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

client/src/components/Player.vue

@@ -63,11 +63,14 @@ export default {
         rel: 0
       }
       return this.isAdmin ? adminVars : userVars
+    },
+    lastUserCommand () {
+      return this.$store.state.room.lastUserCommand
     }
   },
   mounted () {
     this.player.addEventListener('onStateChange', this.playerStateChange)
-    // setInterval(this.updateTimeCode, 1000)
+    setInterval(this.updateTimeCode, 1000)
   },
   watch: {
     roomStatus: function (status) {
@@ -79,13 +82,26 @@ export default {
       this.player.seekTo(status.player.timeCode, true)
       if (status.player.playing) this.player.playVideo()
       else this.player.pauseVideo()
+    },
+    lastUserCommand: function (command) {
+      switch (command.type) {
+        case 'play':
+          this.play()
+          break
+        case 'seek':
+          this.seek(command.argument)
+          break
+        case 'skip':
+          this.skip()
+          break
+      }
     }
   },
   methods: {
     async playerStateChange (event) {
       console.log('[PLAYER] Status change ' + event.data)
-      console.log(await event.target.getVideoData())
-      if (this.isAdmin || this.roomSettings.userControl) {
+
+      if (this.isAdmin) {
         this.$store.dispatch('room/setCurrent', {
           playerStatus: event.data,
           timeCode: await this.player.getCurrentTime(),
@@ -98,8 +114,12 @@ export default {
       }
     },
     play () {
-      if (this.roomStatus.player.playing) this.player.pauseVideo()
-      else this.player.playVideo()
+      if (this.isAdmin) {
+        if (this.roomStatus.player.playing) this.player.pauseVideo()
+        else this.player.playVideo()
+      } else if (this.roomSettings.userControl) {
+        this.$store.dispatch('rtc/broadcast', { message: { type: 'play' }, type: 'userCommand' })
+      }
     },
     async mute () {
       if (await this.player.isMuted()) this.player.unMute()
@@ -109,10 +129,12 @@ export default {
       this.player.setVolume(volume)
     },
     skip () {
-      this.$store.commit('room/CURRENT_END')
+      if (this.isAdmin) this.$store.commit('room/CURRENT_END')
+      else if (this.roomSettings.userControl) this.$store.dispatch('rtc/broadcast', { message: { type: 'skip' }, type: 'userCommand' })
     },
     seek (time) {
-      this.player.seekTo(time, true)
+      if (this.isAdmin) this.player.seekTo(time, true)
+      else if (this.roomSettings.userControl) this.$store.dispatch('rtc/broadcast', { message: { type: 'seek', argument: time }, type: 'userCommand' })
     },
     async updateTimeCode () {
       if (this.localSettings.playLink) this.$store.dispatch('room/setTimeCode', await this.player.getCurrentTime())

client/src/store/roomModule.js

@@ -24,7 +24,8 @@ const state = {
   localSettings: {
     playLink: false,
     externalSearch: false
-  }
+  },
+  lastUserCommand: null
 }
 
 const getters = {
@@ -40,6 +41,9 @@ const actions = {
   setRoomStatus ({ commit }, roomStatus) {
     commit('SET_ROOMSTATUS', roomStatus)
   },
+  setUserCommand ({ commit }, command) {
+    commit('SET_USERCOMMAND', command)
+  },
   setRoomSettings ({ commit, dispatch, state }, roomSettings) {
     commit('SET_ROOMSETTINGS', roomSettings)
     if (state.admin) dispatch('rtc/broadcast', { message: state.roomSettings, type: 'settings' }, { root: true })
@@ -87,6 +91,8 @@ const actions = {
       case 2:
         commit('CURRENT_PAUSE', timeCode)
         break
+      default:
+        return
     }
     dispatch('rtc/broadcast', { message: state.roomStatus, type: 'status' }, { root: true })
   },
@@ -140,6 +146,9 @@ const mutations = {
   SET_CURRENTTITLE (state, title) {
     state.roomStatus.current.title = title
   },
+  SET_USERCOMMAND (state, command) {
+    state.lastUserCommand = command
+  },
   ADD_VOTE (state, { title, link, linkID, voterName }) {
     var play = state.roomStatus.playlist.find(play => play.linkID === linkID)
     if (play === undefined) {

client/src/store/rtcModule.js

@@ -195,7 +195,7 @@ function handleDataChannelMessage (event) {
   console.log('[RTC] data channel message type ' + data.type)
   switch (data.type) {
     case 'status':
-      if (!store.state.room.admin || store.state.room.roomSettings.userControl) store.dispatch('room/setRoomStatus', data.message)
+      if (!store.state.room.admin) store.dispatch('room/setRoomStatus', data.message)
       break
     case 'settings':
       if (!store.state.room.admin) store.dispatch('room/setRoomSettings', data.message)
@@ -203,6 +203,9 @@ function handleDataChannelMessage (event) {
     case 'vote':
       store.dispatch('room/vote', { link: data.message.link, linkID: data.message.linkID, isPositive: data.message.isPositive, voterName: data.message.voterName })
       break
+    case 'userCommand':
+      if (store.state.room.roomSettings.userControl) store.dispatch('room/setUserCommand', data.message)
+      break
   }
 }
 

client/src/store/signalPlugin.js

@@ -2,6 +2,8 @@
 // const connection = new WebSocket('wss://echo.websocket.org')
 const connection = new WebSocket('wss://voozik.gltronic.ovh/socket')
 
+// setTimeout(send({ type: 'alive' }), 5000)
+
 export default function createSignalPlugin () {
   return store => {
     connection.onopen = function () {

client/src/views/Home.vue

@@ -60,13 +60,13 @@ export default {
   watch: {
     serverConnected: async function (isConnected) {
       if (!this.isLoggedIn && this.serverConnected) {
+        setTimeout(send({ type: 'alive' }), 5000)
         const name = await localStorage.getItem('name')
         if (name) this.login(name)
         else this.loginPrompt()
       }
     },
     isLoggedIn: function (success) {
-      console.log('wwiguhspgus ' + success)
       // a cause de null = false
       if (success === false) {
         this.$buefy.toast.open({