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

Improved player

Browse Source
This commit is contained in:
Thomas
2020-07-31 15:09:37 +02:00
parent c577d8f360
commit 76c6b45e2b
5 changed files with 120 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 () {