gltron/Voozik
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fully converted to full socket

Browse Source
This commit is contained in:
Thomas
2020-08-12 14:57:09 +02:00
parent 167dcc354d
commit c1b3280fff
14 changed files with 340 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/components/Admin.vue
View File

@@ -29,15 +29,16 @@ export default {
name: 'Admin',
computed: {
usersList () {
return this.$store.state.rtc.peers
// return this.$store.state.rtc.peers
return []
}
},
methods: {
broadcastStatus () {
this.$store.dispatch('rtc/broadcast', { message: this.$store.state.room.roomStatus, type: 'status' })
// this.$store.dispatch('rtc/broadcast', { message: this.$store.state.room.roomStatus, type: 'status' })
},
kickUser (target) {
this.$store.dispatch('rtc/kick', target)
// this.$store.dispatch('rtc/kick', target)
}
}
}

8
client/src/components/Player.vue
View File

@@ -29,6 +29,8 @@
</template>
<script>
import { send } from '@/store/signalPlugin'
export default {
name: 'Player',
computed: {
@@ -118,7 +120,7 @@ export default {
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' })
send({ message: { type: 'play' }, type: 'roomUserCommand' })
}
},
async mute () {
@@ -130,11 +132,11 @@ export default {
},
skip () {
if (this.isAdmin) this.$store.commit('room/CURRENT_END')
else if (this.roomSettings.userControl) this.$store.dispatch('rtc/broadcast', { message: { type: 'skip' }, type: 'userCommand' })
else if (this.roomSettings.userControl) send({ message: { type: 'skip' }, type: 'roomUserCommand' })
},
seek (time) {
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' })
else if (this.roomSettings.userControl) send({ message: { type: 'seek', argument: time }, type: 'roomUserCommand' })
},
async updateTimeCode () {
if (this.localSettings.playLink) this.$store.dispatch('room/setTimeCode', await this.player.getCurrentTime())

15
client/src/components/Playlist.vue
View File

@@ -31,6 +31,8 @@
</template>
<script>
import { send } from '@/store/signalPlugin'
export default {
name: 'Playlist',
computed: {
@@ -70,23 +72,24 @@ export default {
},
vote (title, link, linkID, isPositive) {
if (this.isAdmin) {
this.$store.dispatch('room/vote', { title: title, link: link, linkID: linkID, isPositive: isPositive, voterName: this.$store.state.rtc.name })
this.$store.dispatch('room/vote', { title: title, link: link, linkID: linkID, isPositive: isPositive, voterName: this.$store.state.app.name })
} else {
this.sendVote(link, linkID, isPositive)
this.sendVote(title, link, linkID, isPositive)
}
},
sendVote (link, linkID, isPositive) {
sendVote (title, link, linkID, isPositive) {
const message = {
type: 'vote',
title: title,
link: link,
linkID: linkID,
isPositive: isPositive,
voterName: this.$store.state.rtc.name
voterName: this.$store.state.app.name
}
this.$store.dispatch('rtc/broadcast', { message: message, type: 'vote' })
send({ message: message, type: 'roomVote' })
},
hasVoted (play) {
return play.voters.includes(this.$store.state.rtc.name)
return play.voters.includes(this.$store.state.app.name)
},
removePlay (linkID) {
this.$store.dispatch('room/removePlay', linkID)

4
client/src/registerServiceWorker.js
View File

@@ -1,6 +1,7 @@
/* eslint-disable no-console */
import { register } from 'register-service-worker'
import { ToastProgrammatic as Toast } from 'buefy'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
@@ -18,13 +19,16 @@ if (process.env.NODE_ENV === 'production') {
},
updatefound () {
console.log('New content is downloading.')
Toast.open('Update found, downloading...')
},
updated () {
console.log('New content is available; please refresh.')
window.location.reload(true)
Toast.open('App updated !')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
Toast.open('No internet connection !')
},
error (error) {
console.error('Error during service worker registration:', error)

17
client/src/store/appModule.js
View File

@@ -4,6 +4,7 @@ import router from '@/router/index'
const state = {
signalServerConnected: false,
loginSuccess: null,
name: '',
error: null,
serverStatus: {}
}
@@ -33,17 +34,15 @@ const actions = {
serverStatus ({ commit }, serverStatus) {
commit('SET_SERVERSTATUS', serverStatus)
},
createRoom ({ commit, dispatch }, code) {
commit('CREATE_ROOM')
dispatch('room/setRoomCode', code, { root: true })
dispatch('room/setAdmin', null, { root: true })
},
connectRoom ({ commit, dispatch }, name) {
commit('CONNECT_ROOM')
dispatch('rtc/makeOffer', name, { root: true })
// dispatch('rtc/makeOffer', name, { root: true })
},
error ({ commit }, error) {
commit('ERROR', error)
},
setName ({ commit }, name) {
commit('SET_NAME', name)
}
}
@@ -67,15 +66,15 @@ const mutations = {
SET_SERVERSTATUS (state, serverStatus) {
state.serverStatus = serverStatus
},
CREATE_ROOM (state) {
router.push({ name: 'Room' })
},
CONNECT_ROOM (state) {
router.push({ name: 'Room' })
},
ERROR (state, error) {
state.error = error
Dialog.alert(error)
},
SET_NAME (state, name) {
state.name = name
}
}

2
client/src/store/index.js
View File

@@ -1,7 +1,6 @@
import Vue from 'vue'
import Vuex from 'vuex'
import signal from './signalPlugin'
import rtc from './rtcModule'
import room from './roomModule'
import app from './appModule'
@@ -9,7 +8,6 @@ Vue.use(Vuex)
export default new Vuex.Store({
modules: {
rtc,
app,
room
},

30
client/src/store/roomModule.js
View File

@@ -1,3 +1,6 @@
import { send } from './signalPlugin'
import router from '@/router/index'
const state = {
admin: false,
roomStatus: {
@@ -32,6 +35,13 @@ const getters = {
}
const actions = {
createRoom ({ commit }, roomCode) {
commit('SET_ROOMCODE', roomCode)
commit('SET_ADMIN')
send({ message: state.roomSettings, type: 'roomSettings' })
send({ message: state.roomStatus, type: 'roomStatus' })
router.push({ name: 'Room' })
},
setRoomCode ({ commit }, roomCode) {
commit('SET_ROOMCODE', roomCode)
},
@@ -44,9 +54,9 @@ const actions = {
setUserCommand ({ commit }, command) {
commit('SET_USERCOMMAND', command)
},
setRoomSettings ({ commit, dispatch, state }, roomSettings) {
setRoomSettings ({ commit, state }, roomSettings) {
commit('SET_ROOMSETTINGS', roomSettings)
if (state.admin) dispatch('rtc/broadcast', { message: state.roomSettings, type: 'settings' }, { root: true })
if (state.admin) send({ message: state.roomSettings, type: 'roomSettings' })
},
setLocalSettings ({ commit }, localSettings) {
commit('SET_LOCALSETTINGS', localSettings)
@@ -57,7 +67,7 @@ const actions = {
setTimeCode ({ commit }, timeCode) {
commit('SET_TIMECODE', timeCode)
},
vote ({ commit, dispatch, state }, { title, link, linkID, isPositive, voterName }) {
vote ({ commit, state }, { title, link, linkID, isPositive, voterName }) {
console.log('vote on ' + link + ' | ' + linkID + ' (' + isPositive + ') by ' + voterName)
if (isPositive) {
commit('ADD_VOTE', {
@@ -72,13 +82,13 @@ const actions = {
voterName: voterName
})
}
dispatch('rtc/broadcast', { message: state.roomStatus, type: 'status' }, { root: true })
send({ message: state.roomStatus, type: 'roomStatus' })
},
removePlay ({ commit, dispatch, state }, linkID) {
removePlay ({ commit, state }, linkID) {
commit('REMOVE_PLAY', linkID)
dispatch('rtc/broadcast', { message: state.roomStatus, type: 'status' }, { root: true })
send({ message: state.roomStatus, type: 'roomStatus' })
},
setCurrent ({ commit, dispatch }, { playerStatus, timeCode, timeLength, title }) {
setCurrent ({ commit }, { playerStatus, timeCode, timeLength, title }) {
switch (playerStatus) {
case 0:
commit('CURRENT_END')
@@ -94,10 +104,10 @@ const actions = {
default:
return
}
dispatch('rtc/broadcast', { message: state.roomStatus, type: 'status' }, { root: true })
send({ message: state.roomStatus, type: 'roomStatus' })
},
leave ({ commit, dispatch }) {
dispatch('rtc/leave', null, { root: true })
leave ({ commit }) {
send({ type: 'roomLeave' })
commit('SET_ROOMSTATUS', {
roomName: '',
roomCode: '',

38
client/src/store/signalPlugin.js
View File

@@ -2,7 +2,7 @@ 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)
setTimeout(send({ type: 'alive' }), 5000)
export default function createSignalPlugin () {
return store => {
@@ -22,20 +22,6 @@ export default function createSignalPlugin () {
var data = JSON.parse(message.data)
switch (data.type) {
case 'offer':
console.log('offer from ' + data.name)
store.dispatch('rtc/offer', { offer: data.data, senderName: data.name })
break
case 'answer':
console.log('answer from ' + data.name)
store.dispatch('rtc/answer', { answer: data.data, senderName: data.name })
break
case 'candidate':
store.dispatch('rtc/candidate', { candidate: data.data, senderName: data.name })
break
case 'leave':
store.dispatch('rtc/leave')
break
@@ -48,11 +34,11 @@ export default function createSignalPlugin () {
store.dispatch('app/serverStatus', data)
break
case 'createRoom':
store.dispatch('app/createRoom', data.message)
case 'roomCreate':
store.dispatch('room/createRoom', data.message)
break
case 'connectRoom':
case 'roomConnect':
store.dispatch('app/connectRoom', data.message)
break
@@ -60,6 +46,22 @@ export default function createSignalPlugin () {
store.dispatch('app/error', data.message)
break
case 'roomStatus':
if (!store.state.room.admin) store.dispatch('room/setRoomStatus', data.message)
break
case 'roomSettings':
if (!store.state.room.admin) store.dispatch('room/setRoomSettings', data.message)
break
case 'roomVote':
store.dispatch('room/vote', { link: data.message.link, linkID: data.message.linkID, isPositive: data.message.isPositive, voterName: data.message.voterName })
break
case 'roomUserCommand':
if (store.state.room.roomSettings.userControl) store.dispatch('room/setUserCommand', data.message)
break
default:
break
}

13
client/src/views/Home.vue
View File

@@ -17,6 +17,8 @@
<b-button type="is-primary" size="is-large" @click="makeRoomPrompt">Make a room</b-button>
<hr>
<b-button @click="changeName">Change name</b-button>
<hr>
<p>V2.0</p>
<b-modal :active.sync="isQRModalActive" has-modal-card trap-focus>
<QRReader v-on:get-code="connectToRoom"/>
</b-modal>
@@ -54,7 +56,7 @@ export default {
return this.$store.state.app.loginSuccess
},
userName () {
return this.$store.state.rtc.name
return this.$store.state.app.name
}
},
watch: {
@@ -101,7 +103,7 @@ export default {
type: 'login',
name: name
})
this.$store.dispatch('rtc/setName', name)
this.$store.dispatch('app/setName', name)
},
makeRoomPrompt () {
this.$buefy.dialog.prompt({
@@ -119,8 +121,7 @@ export default {
},
makeRoom (name) {
send({
type: 'createRoom',
name: name
type: 'roomCreate'
})
this.$store.dispatch('room/setRoomName', name)
},
@@ -140,8 +141,8 @@ export default {
},
connectToRoom (code) {
send({
type: 'connectRoom',
name: code
type: 'roomConnect',
code: code
})
},
changeName () {