Improved server select screen
This commit is contained in:
Sam
parent
a9a57abee1
commit
ccb0b3c150
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs12 lg8 xl6 style="background: rgba(0,0,0,0.1); border-radius: 10px" class="pa-4">
|
||||
<v-flex xs12 lg8 style="background: rgba(0,0,0,0.1); border-radius: 10px" class="pa-4">
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs12 md8 lg4 xl6>
|
||||
<img style="width:100%" v-bind:src="logo">
|
||||
|
|
@ -16,112 +16,124 @@
|
|||
<v-stepper-step step="3">Sync</v-stepper-step>
|
||||
</v-stepper-header>
|
||||
</v-stepper>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs10 lg8 xl6>
|
||||
<h2 class="text-xs-left">Connect to a SyncLounge room</h2>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs10 lg8 xl6>
|
||||
<p class="pa-2">
|
||||
It's time to connect to SyncLounge. From the list select a server which is closest to your location. Once you've chosen one that works for you it's time to create a room for your friends to join.
|
||||
</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap v-if="recents" justify-center class="pa-2">
|
||||
<v-flex xs10 lg8 xl6 class="nicelist" v-if="!context.getters.getConnected" style="color:white !important">
|
||||
<h4>Recent rooms</h4>
|
||||
<v-list class="pa-0">
|
||||
<template v-for="(item, index) in recentsSorted">
|
||||
<v-list-tile :key="index" v-if="index < 5" avatar @click="recentConnect(item)">
|
||||
<v-list-tile-avatar>
|
||||
<img :src="logos.light.small" style="width: 32px; height: auto"/>
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title v-html="item.server"></v-list-tile-title>
|
||||
<v-list-tile-sub-title><b>{{ item.room }}</b> <span style="opacity: 0.5; float: right">{{ sinceNow(item.time) }}</span></v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-flex>
|
||||
|
||||
</v-layout>
|
||||
<v-layout row wrap justify-center class="pa-2">
|
||||
<v-flex xs10 lg8 xl6 class="nicelist" v-if="!context.getters.getConnected" style="color:white !important">
|
||||
<v-select
|
||||
v-bind:items="ptservers"
|
||||
@input="attemptConnect()"
|
||||
class="input-group--focused pt-input nicelist"
|
||||
style="mt-4"
|
||||
v-model="selectedServer"
|
||||
transition="v-scale-transition" origin="center center"
|
||||
max-height="auto"
|
||||
label="Select a server"
|
||||
append-icon="arrow_drop_up"
|
||||
></v-select>
|
||||
<v-text-field
|
||||
v-if="selectedServer == 'custom'"
|
||||
name="input-2"
|
||||
label="Custom Server"
|
||||
v-model="CUSTOMSERVER"
|
||||
class="input-group pt-input"
|
||||
></v-text-field>
|
||||
<v-layout row wrap v-if="selectedServer == 'custom'">
|
||||
<v-flex xs4 offset-xs4>
|
||||
<v-btn class="pt-orange white--text pa-0 ma-0" color="primary" primary style="width:100%" v-on:click.native="attemptConnectCustom()">Connect</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap v-if="connectionPending && !serverError" class="pt-3">
|
||||
<v-flex xs4 offset-xs4 center>
|
||||
<div style="width:100%;text-align:center">
|
||||
<v-progress-circular indeterminate v-bind:size="50" class="amber--text" style="display:inline-block"></v-progress-circular>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="pt-3 text-xs-center" row wrap v-if="serverError">
|
||||
<v-flex xs12 class="red--text">
|
||||
<v-icon class="red--text">info</v-icon> {{ serverError }}
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs10 lg8 xl6 v-if="context.getters.getConnected">
|
||||
<v-layout row wrap>
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs12>
|
||||
<v-text-field
|
||||
origin="center center"
|
||||
:maxlength="25"
|
||||
name="input-2"
|
||||
label="Room name"
|
||||
:autofocus="true"
|
||||
v-on:keyup.enter.native="joinRoom()"
|
||||
v-model="room"
|
||||
></v-text-field>
|
||||
<h2 class="text-xs-left">Connect to a SyncLounge room</h2>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-text-field
|
||||
transition="v-scale-transition" origin="center center"
|
||||
name="input-2"
|
||||
label="Room password"
|
||||
v-on:keyup.enter.native="joinRoom()"
|
||||
v-model="password"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs4 offset-xs4>
|
||||
<v-btn block color="primary" v-on:click.native="joinRoom()">Join</v-btn>
|
||||
</v-flex>
|
||||
<v-layout class="pt-3 text-xs-center" row wrap v-if="roomError">
|
||||
<v-flex xs12 class="red--text">
|
||||
<v-icon class="red--text">info</v-icon> {{ roomError }}
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs12>
|
||||
<p class="pa-2">
|
||||
It's time to connect to SyncLounge. From the list select a server which is closest to your location. Once you've chosen one that works for you it's time to create a room for your friends to join.
|
||||
</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-flex xs12 class="nicelist" v-if="!context.getters.getConnected && recents" style="color:white !important">
|
||||
<h4>Recent rooms</h4>
|
||||
<v-list class="pa-0">
|
||||
<template v-for="(item, index) in recentsSorted">
|
||||
<v-list-tile :key="index" v-if="index < 5" avatar @click="recentConnect(item)">
|
||||
<v-list-tile-avatar>
|
||||
<img :src="logos.light.small" style="width: 32px; height: auto"/>
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title v-html="item.server"></v-list-tile-title>
|
||||
<v-list-tile-sub-title><b>{{ item.room }}</b> <span style="opacity: 0.5; float: right">{{ sinceNow(item.time) }}</span></v-list-tile-sub-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-flex>
|
||||
<v-flex xs12 class="nicelist pt-3" v-if="!context.getters.getConnected" style="color:white !important">
|
||||
<v-subheader>Select a server</v-subheader>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 md3 v-for="server in ptservers" :key="server.url" class="pa-2">
|
||||
<v-card height="250px" style="background: #353e58">
|
||||
<v-layout row wrap justify-center style="height: 100%">
|
||||
<v-flex xs12 class="text-xs-center pa-2" style="height: 50%; position: relative; background: rgba(0,0,0,0.2)">
|
||||
<img :src="server.flag" class="flag" style="height: 50%; vertical-align: middle"/>
|
||||
</v-flex>
|
||||
<v-flex xs12 style="height: 50%" class="text-xs-center pt-1">
|
||||
<h2>{{ server.text }}</h2>
|
||||
<h4>{{ server.location }}</h4>
|
||||
<v-btn color="primary" :disabled="connectionPending" @click="serverSelected(server)"> Connect</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<!-- <v-select
|
||||
box
|
||||
v-bind:items="ptservers"
|
||||
@input="attemptConnect()"
|
||||
class="input-group--focused pt-input nicelist"
|
||||
style="mt-4"
|
||||
v-model="selectedServer"
|
||||
max-height="auto"
|
||||
label="Select a server"
|
||||
></v-select> -->
|
||||
<v-text-field
|
||||
v-if="selectedServer == 'custom'"
|
||||
name="input-2"
|
||||
label="Custom Server"
|
||||
v-model="CUSTOMSERVER"
|
||||
class="input-group pt-input"
|
||||
></v-text-field>
|
||||
<v-layout row wrap v-if="selectedServer == 'custom'">
|
||||
<v-flex xs4 offset-xs4>
|
||||
<v-btn class="pt-orange white--text pa-0 ma-0" color="primary" primary style="width:100%" v-on:click.native="attemptConnectCustom()">Connect</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap v-if="connectionPending && !serverError" class="pt-3">
|
||||
<v-flex xs4 offset-xs4 center>
|
||||
<div style="width:100%;text-align:center">
|
||||
<v-progress-circular indeterminate v-bind:size="50" class="amber--text" style="display:inline-block"></v-progress-circular>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout class="pt-3 text-xs-center" row wrap v-if="serverError">
|
||||
<v-flex xs12 class="red--text">
|
||||
<v-icon class="red--text">info</v-icon> {{ serverError }}
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<v-layout row wrap justify-center>
|
||||
<v-flex xs12 v-if="context.getters.getConnected">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<v-text-field
|
||||
origin="center center"
|
||||
:maxlength="25"
|
||||
name="input-2"
|
||||
label="Room name"
|
||||
:autofocus="true"
|
||||
v-on:keyup.enter.native="joinRoom()"
|
||||
v-model="room"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-text-field
|
||||
transition="v-scale-transition" origin="center center"
|
||||
name="input-2"
|
||||
label="Room password"
|
||||
v-on:keyup.enter.native="joinRoom()"
|
||||
v-model="password"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs4 offset-xs4>
|
||||
<v-btn block color="primary" v-on:click.native="joinRoom()">Join</v-btn>
|
||||
</v-flex>
|
||||
<v-layout class="pt-3 text-xs-center" row wrap v-if="roomError">
|
||||
<v-flex xs12 class="red--text">
|
||||
<v-icon class="red--text">info</v-icon> {{ roomError }}
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -143,20 +155,28 @@ export default {
|
|||
|
||||
ptservers: [
|
||||
{
|
||||
text: 'SyncLounge V2 AU1',
|
||||
value: 'https://v2au1.synclounge.tv'
|
||||
location: 'Sydney, Australia',
|
||||
text: 'SyncLounge AU1',
|
||||
value: 'https://v2au1.synclounge.tv',
|
||||
flag: 'flags/aus.png'
|
||||
},
|
||||
{
|
||||
text: 'SyncLounge V2 US1',
|
||||
value: 'https://v2us1.synclounge.tv'
|
||||
location: 'Amsterdam, Netherlands',
|
||||
text: 'SyncLounge EU1',
|
||||
value: 'https://v2eu1.synclounge.tv',
|
||||
flag: 'flags/eu.png'
|
||||
},
|
||||
{
|
||||
text: 'SyncLounge V2 EU1',
|
||||
value: 'https://v2eu1.synclounge.tv'
|
||||
location: 'Miami, United States',
|
||||
text: 'SyncLounge US1',
|
||||
value: 'https://v2us1.synclounge.tv',
|
||||
flag: 'flags/usa.png'
|
||||
},
|
||||
{
|
||||
location: 'Anywhere!',
|
||||
text: 'Custom Server',
|
||||
value: 'custom'
|
||||
value: 'custom',
|
||||
flag: 'synclounge-white.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -168,24 +188,33 @@ export default {
|
|||
this.recents = JSON.parse(window.localStorage.getItem('recentrooms'))
|
||||
},
|
||||
methods: {
|
||||
serverSelected: function (server) {
|
||||
this.selectedServer = server.value
|
||||
if (this.selectedServer !== 'custom') {
|
||||
this.attemptConnect()
|
||||
}
|
||||
},
|
||||
attemptConnect: function () {
|
||||
// Attempt the connection
|
||||
return new Promise((resolve, reject) => {
|
||||
this.serverError = null
|
||||
console.log('Connecting to', this.selectedServer)
|
||||
if (this.selectedServer !== 'custom') {
|
||||
this.$store.dispatch('socketConnect', { address: this.selectedServer }).then(result => {
|
||||
console.log('Connection done', result)
|
||||
this.connectionPending = false
|
||||
if (result) {
|
||||
console.log('Resuming')
|
||||
resolve()
|
||||
} else {
|
||||
this.serverError = null
|
||||
reject(result)
|
||||
}
|
||||
})
|
||||
this.connectionPending = true
|
||||
this.$store.dispatch('socketConnect', { address: this.selectedServer })
|
||||
.then(result => {
|
||||
console.log('Connection done', result)
|
||||
this.connectionPending = false
|
||||
if (result) {
|
||||
console.log('Resuming')
|
||||
resolve()
|
||||
} else {
|
||||
this.serverError = null
|
||||
reject(result)
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
this.connectionPending = false
|
||||
this.serverError = 'Failed to connect to ' + this.selectedServer
|
||||
reject(e)
|
||||
})
|
||||
|
|
@ -277,6 +306,9 @@ export default {
|
|||
arr = arr.sort((a, b) => {
|
||||
return b.time - a.time
|
||||
})
|
||||
if (arr.length > 3) {
|
||||
return arr.slice(0, 3)
|
||||
}
|
||||
return arr
|
||||
},
|
||||
CUSTOMSERVER: {
|
||||
|
|
@ -293,3 +325,13 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.flag {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Loading…
Reference in New Issue