Code cleanup and implemented the last missing features (i think)
This commit is contained in:
parent
bb1a0e653d
commit
5d4a4ca13c
21 changed files with 350 additions and 188 deletions
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<title>Syng Rocks!</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.6 KiB |
140
src/App.vue
140
src/App.vue
|
|
@ -7,6 +7,8 @@ import $ from 'jquery'
|
|||
import MobileLayout from './components/MobileLayout.vue'
|
||||
import DesktopLayout from './components/DesktopLayout.vue'
|
||||
import WelcomeReveal from './components/WelcomeReveal.vue'
|
||||
import GetUserName from './components/GetUserName.vue'
|
||||
import Footer from './components/Footer.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
|
@ -23,6 +25,9 @@ const state = ref({
|
|||
'secret': undefined,
|
||||
'current_entry': undefined,
|
||||
'current_name': undefined,
|
||||
'searching': false,
|
||||
'last_msg': "",
|
||||
'join_msg': undefined
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -39,13 +44,17 @@ function setServer(server) { state.value.server = server }
|
|||
function setSearchTerm(searchTerm) { state.value.search.searchTerm = searchTerm }
|
||||
|
||||
function search() {
|
||||
state.value.searching = true
|
||||
state.socket.emit("search", {"query": state.value.search.searchTerm })
|
||||
}
|
||||
|
||||
function append(entry) {_append(entry, state.value.name) }
|
||||
function append(entry) {
|
||||
_append(entry, state.value.name)
|
||||
}
|
||||
function _append(entry, name) {
|
||||
if(name == "" || name == undefined) {
|
||||
state.value.current_entry = entry
|
||||
state.value.current_name = ""
|
||||
$("#getusername").foundation("open")
|
||||
} else {
|
||||
$("#getusername").foundation("close")
|
||||
|
|
@ -55,13 +64,32 @@ function _append(entry, name) {
|
|||
}
|
||||
}
|
||||
|
||||
function close_name() {
|
||||
$("#getusername").foundation("close")
|
||||
state.value.current_entry = undefined
|
||||
state.value.current_name = undefined
|
||||
}
|
||||
|
||||
function connect() {
|
||||
state.socket = io(state.value.server)
|
||||
registerSocketEvents(state.socket)
|
||||
}
|
||||
|
||||
function skipCurrent() {
|
||||
state.socket.emit("skip-current")
|
||||
}
|
||||
|
||||
function moveUp(uuid) {
|
||||
state.socket.emit("moveUp", {"uuid": uuid})
|
||||
}
|
||||
|
||||
function skip(uuid) {
|
||||
state.socket.emit("skip", {"uuid": uuid})
|
||||
}
|
||||
|
||||
function registerSocketEvents(socket) {
|
||||
socket.on("search-results", (results) => {
|
||||
state.value.searching = false
|
||||
state.value.search.searchResults = results.results
|
||||
})
|
||||
|
||||
|
|
@ -75,6 +103,11 @@ function registerSocketEvents(socket) {
|
|||
socket.on("register-admin", (response) => {
|
||||
state.value.admin = response.success
|
||||
})
|
||||
|
||||
socket.on("msg", (response) => {
|
||||
state.value.last_msg = response.msg
|
||||
$("#msg").foundation("open")
|
||||
})
|
||||
}
|
||||
|
||||
function joinRoom() {
|
||||
|
|
@ -86,59 +119,90 @@ function joinRoom() {
|
|||
state.socket.emit("register-admin", {"secret": state.value.secret})
|
||||
}
|
||||
} else {
|
||||
console.log("no such room")
|
||||
state.value.join_msg = "<strong>No such room!</strong> <br/>" +
|
||||
"Please use the correct room code your organizer provided you.<br/>" +
|
||||
"To host your own syng powered karaoke parties, please download and " +
|
||||
"install <a href='https://git.k-fortytwo.de/christofsteel/syng2.git' " +
|
||||
"target='_blank'>Syng</a> and run it with <pre>syng-client " +
|
||||
state.value.server + "</pre>"
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="row" id="main-content">
|
||||
<MobileLayout v-show="state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" />
|
||||
<DesktopLayout v-show="!state.is_small" :state="state" @update:searchTerm="setSearchTerm" @search="search" @append="append" />
|
||||
<WelcomeReveal v-if="!state.joined" :room="state.room" :server="state.server" @connect="connect" @update:room="setRoomCode" @update:name="setName" @update:server="setServer" @update:secret="setSecret" />
|
||||
<div class="reveal" id="getusername" data-reveal data-close-on-esc="false" data-close-on-click="false" >
|
||||
<h1>Please enter your name</h1>
|
||||
<label>Name
|
||||
<input type="text" @input="(evt) => setCurrentName(evt.target.value)" placeholder="Arno Nym">
|
||||
</label>
|
||||
<button class="button" @click="() => _append(state.current_entry, state.current_name)">Ok</button>
|
||||
<button class="button" @click="append">Abort</button>
|
||||
<MobileLayout
|
||||
v-show="state.is_small"
|
||||
:state="state"
|
||||
@update:searchTerm="setSearchTerm"
|
||||
@search="search"
|
||||
@append="append"
|
||||
@skip="skip"
|
||||
@skipCurrent="skipCurrent"
|
||||
@moveUp="moveUp"
|
||||
/>
|
||||
<DesktopLayout
|
||||
v-show="!state.is_small"
|
||||
:state="state"
|
||||
@update:searchTerm="setSearchTerm"
|
||||
@search="search"
|
||||
@append="append"
|
||||
@skip="skip"
|
||||
@skipCurrent="skipCurrent"
|
||||
@moveUp="moveUp"
|
||||
/>
|
||||
<WelcomeReveal
|
||||
v-if="!state.joined"
|
||||
:room="state.room"
|
||||
:server="state.server"
|
||||
:joinMsg="state.join_msg"
|
||||
@connect="connect"
|
||||
@update:room="setRoomCode"
|
||||
@update:name="setName"
|
||||
@update:server="setServer"
|
||||
@update:secret="setSecret"
|
||||
/>
|
||||
<GetUserName
|
||||
:current_name="state.current_name"
|
||||
:current_entry="state.current_entry"
|
||||
@update:currentName="setCurrentName"
|
||||
@append="_append(state.current_entry, state.current_name)"
|
||||
@close_name="close_name"
|
||||
/>
|
||||
<div class="reveal" id="msg" data-reveal>
|
||||
{{ state.last_msg }}
|
||||
<button class="close-button" data-close aria-label="Close modal" type="button">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
Name: <span class="userName" @focusout="(evt) => setName(evt.target.textContent)" contenteditable>{{ state.name }}</span>
|
||||
</footer>
|
||||
<Footer
|
||||
:name="state.name"
|
||||
@update:name="setName"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
background-color: #008000;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
font-size: 1.5rem;
|
||||
margin: auto;
|
||||
.page {
|
||||
height:100vh;
|
||||
background: url('assets/syng.png') fixed;
|
||||
background-color: #8a8a8a;
|
||||
background-size: auto 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
footer > .userName {
|
||||
border: none;
|
||||
border-bottom: 1px dashed #00F000;
|
||||
background-color: #008000;
|
||||
min-width: 5em;
|
||||
display: inline-block;
|
||||
height: 70%;
|
||||
text-align: center;
|
||||
.page {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
height: calc(100vh - 50px);
|
||||
max-height: 100vh;
|
||||
max-width: 100vw;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,6 @@ li {
|
|||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
body {
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
.page {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #008000;
|
||||
font-weight: bold;
|
||||
|
|
@ -30,11 +21,6 @@ body {
|
|||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.splitter {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.comp-column {
|
||||
max-height: 100vh;
|
||||
flex:1;
|
||||
|
|
@ -42,29 +28,6 @@ body {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
#left-side {
|
||||
margin: 0.2em 0.1em 0.2em 0.2em;
|
||||
}
|
||||
#middle {
|
||||
margin: 0.2em 0.1em 0.1em 0.2em;
|
||||
}
|
||||
#right-side {
|
||||
margin: 0.2em 0.2em 0.1em 0.2em;
|
||||
}
|
||||
|
||||
|
||||
#main-content {
|
||||
height: calc(100vh - 50px);
|
||||
max-height: 100vh;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tabs-panel {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -80,10 +43,6 @@ body {
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#recent {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.performer, .album {
|
||||
font-size: smaller;
|
||||
font-style: italic;
|
||||
|
|
@ -93,10 +52,6 @@ body {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
padding:0.4em;
|
||||
}
|
||||
|
|
@ -105,13 +60,6 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
#search-results div {
|
||||
vertical-align: middle;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
|
||||
.tabs-panel {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -124,33 +72,13 @@ body {
|
|||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.current {
|
||||
background-color: #008000 !important;
|
||||
}
|
||||
|
||||
.button, button:focus {
|
||||
background-color: #008000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.current::before, #large-current::before{
|
||||
content: "Now Playing";
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.eta {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.eta::before {
|
||||
content: "in ";
|
||||
}
|
||||
|
||||
.eta::after {
|
||||
content: " min";
|
||||
#recent .eta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.artist::after{
|
||||
|
|
@ -161,19 +89,6 @@ body {
|
|||
background-color: #3b3b3b;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url(syng.png) fixed;
|
||||
background-color: #8a8a8a;
|
||||
background-size: auto 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.warning {
|
||||
padding: 10px;
|
||||
background-color: #a53b2a;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -210,11 +125,3 @@ div.tabs .tabs-title {
|
|||
margin-bottom: 0.1em;
|
||||
background-color: #3b3b3b;
|
||||
}
|
||||
|
||||
.bulk-upload-label {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.button-group .button {
|
||||
/* margin-left: 0.5em; */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,26 @@ import QueueDesktop from './QueueDesktop.vue'
|
|||
import RecentDesktop from './RecentDesktop.vue'
|
||||
|
||||
const props = defineProps(['state']);
|
||||
const emit = defineEmits(['update:searchTerm', 'search', 'append'])
|
||||
const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skipCurrent', 'moveUp'])
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="splitter">
|
||||
<SearchDesktop :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)" />
|
||||
<QueueDesktop :queue="state.queue" :admin="state.admin" />
|
||||
<SearchDesktop :search="state.search" :searching="state.searching" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)" />
|
||||
<QueueDesktop
|
||||
:queue="state.queue"
|
||||
:admin="state.admin"
|
||||
@skip="(uuid) => $emit('skip', uuid)"
|
||||
@moveUp="(uuid) => $emit('moveUp', uuid)"
|
||||
@skipCurrent="$emit('skipCurrent')"
|
||||
/>
|
||||
<RecentDesktop :recent="state.recent" :admin="state.admin" />
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.splitter {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,29 @@
|
|||
<script>
|
||||
export default {
|
||||
props: ['admin', 'entry', 'current']
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
const props = defineProps(['admin', 'entry', 'current', 'firstStartedAt', 'offset', 'currentTime'])
|
||||
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
|
||||
|
||||
function skip() {
|
||||
if(props.current) {
|
||||
emits("skipCurrent")
|
||||
} else {
|
||||
emits("skip", props.entry.uuid)
|
||||
}
|
||||
}
|
||||
|
||||
const eta = computed(() =>{
|
||||
let now = props.currentTime
|
||||
let startTime = new Date(props.firstStartedAt * 1000)
|
||||
let playBackSeconds = (now - startTime) / 1000
|
||||
let etaSeconds = Math.round(props.offset - playBackSeconds)
|
||||
|
||||
if (isNaN(etaSeconds)) {
|
||||
return "error"
|
||||
} else {
|
||||
return new Date(etaSeconds * 1000).toISOString().substring(11,19)
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -11,16 +33,41 @@ export default {
|
|||
<span class="artist">{{ entry.artist }}</span>
|
||||
<span class="title">{{ entry.title }}</span><br />
|
||||
<span class="performer">{{ entry.performer }}</span>
|
||||
<span v-if="!current" class="eta">{{ eta }}</span>
|
||||
</div>
|
||||
<div v-if="admin" class="cell small-3">
|
||||
<button class="button alert fright" v-if="!current">
|
||||
<font-awesome-icon icon="fa-solid fa-step-forward" />
|
||||
</button>
|
||||
<button class="button alert fright">
|
||||
<button class="button alert fright" @click="skip">
|
||||
<font-awesome-icon icon="fa-solid fa-times" />
|
||||
</button>
|
||||
<button
|
||||
class="button alert fright"
|
||||
v-if="!current"
|
||||
@click="$emit('moveUp', entry.uuid)" >
|
||||
<font-awesome-icon icon="fa-solid fa-arrow-up" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.current {
|
||||
background-color: #008000 !important;
|
||||
}
|
||||
|
||||
.current::before, #large-current::before{
|
||||
content: "Now Playing";
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.eta {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.eta::before {
|
||||
content: "in ";
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
41
src/components/Footer.vue
Normal file
41
src/components/Footer.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script setup>
|
||||
const props = defineProps(['name'])
|
||||
const emits = defineEmits(['update:name'])
|
||||
</script>
|
||||
<template>
|
||||
<footer>
|
||||
Name: <span
|
||||
class="userName"
|
||||
@keyup.enter="(evt) => evt.target.blur()"
|
||||
@focusout="(evt) => $emit('update:name', evt.target.textContent)"
|
||||
contenteditable
|
||||
>
|
||||
{{ name }}
|
||||
</span>
|
||||
</footer>
|
||||
</template>
|
||||
<style scoped>
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
background-color: #008000;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
font-size: 1.5rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
footer > .userName {
|
||||
border: none;
|
||||
border-bottom: 1px dashed #00F000;
|
||||
background-color: #008000;
|
||||
min-width: 5em;
|
||||
display: inline-block;
|
||||
height: 70%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<script setup>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button type="button" class="alert button">Delete</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
37
src/components/GetUserName.vue
Normal file
37
src/components/GetUserName.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<script setup>
|
||||
const props = defineProps(["current_name","current_entry"])
|
||||
const emits = defineEmits(["update:currentName", "append", "close_name"])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="reveal" id="getusername" @keyup.enter="$emit('append')" data-reveal >
|
||||
<h1>Please enter your name</h1>
|
||||
<label>Name
|
||||
<input
|
||||
type="text"
|
||||
@input="(evt) => $emit('update:currentName', evt.target.value)"
|
||||
placeholder="Arno Nym"
|
||||
:value="current_name"
|
||||
>
|
||||
</label>
|
||||
<div class="grid-x">
|
||||
<div class="cell medium-6 small-12 btn">
|
||||
<button
|
||||
class="button expanded"
|
||||
@click="$emit('append')"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
<div class="cell medium-6 small-12 btn">
|
||||
<button class="button expanded alert" @click="$emit('close_name')">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
padding: 3px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,7 +5,7 @@ import RecentTab from './RecentTab.vue'
|
|||
import TabHeader from './TabHeader.vue'
|
||||
|
||||
const props = defineProps(['state']);
|
||||
const emit = defineEmits(['update:searchTerm', 'search', 'append' ])
|
||||
const emit = defineEmits(['update:searchTerm', 'search', 'append', 'skip', 'skipCurrent', 'moveUp'])
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -18,8 +18,14 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append' ])
|
|||
<TabHeader link="#recent-list" icon="fa-history" />
|
||||
</div>
|
||||
<div class="tabs-container" data-tabs-content="main-tab">
|
||||
<SearchTab :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)"/>
|
||||
<QueueTab :queue="state.queue" :admin="state.admin" />
|
||||
<SearchTab :search="state.search" :searching="state.searching" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)"/>
|
||||
<QueueTab
|
||||
:queue="state.queue"
|
||||
:admin="state.admin"
|
||||
@skip="(uuid) => $emit('skip', uuid)"
|
||||
@moveUp="(uuid) => $emit('moveUp', uuid)"
|
||||
@skipCurrent="$emit('skipCurrent')"
|
||||
/>
|
||||
<RecentTab :recent="state.recent" :admin="state.admin" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,12 +37,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append' ])
|
|||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
.comp-column {
|
||||
max-height: 100vh;
|
||||
flex:1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,23 @@
|
|||
import QueueInner from './QueueInner.vue'
|
||||
|
||||
const props = defineProps(['queue', 'admin']);
|
||||
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="comp-column" id="middle">
|
||||
<div class="comp-column">
|
||||
<div class="header">Queue</div>
|
||||
<QueueInner :queue="queue" :admin="admin" />
|
||||
<QueueInner
|
||||
:queue="queue"
|
||||
:admin="admin"
|
||||
@skip="(uuid) => $emit('skip', uuid)"
|
||||
@moveUp="(uuid) => $emit('moveUp', uuid)"
|
||||
@skipCurrent="$emit('skipCurrent')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.comp-column {
|
||||
margin: 0.2em 0.1em 0.1em 0.2em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,46 @@
|
|||
<script setup>
|
||||
import { onMounted, reactive } from 'vue'
|
||||
import Entry from './Entry.vue'
|
||||
|
||||
const props = defineProps(['queue', 'admin']);
|
||||
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
|
||||
|
||||
let currentTime = reactive({time: Date.now()})
|
||||
|
||||
function updateNow() {
|
||||
currentTime.time = Date.now()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateNow()
|
||||
setInterval(updateNow.bind(this), 1000)
|
||||
})
|
||||
|
||||
function offset(index) {
|
||||
let _offset = 0
|
||||
for(let i = 0; i < index; i++) {
|
||||
_offset += props.queue[i].duration
|
||||
}
|
||||
return _offset
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="vsplit">
|
||||
<div id="queue-list-wrapper" class="results">
|
||||
<ul id="queue" class="vertical menu">
|
||||
<Entry v-for="(entry, index) in queue" :entry="entry" :current="index == 0" :admin="admin" />
|
||||
<li v-show="admin">
|
||||
<div class="row">
|
||||
<div class="columns small-12">
|
||||
<a class="button" download="queue.json" rv-href="queue.data">Save</a>
|
||||
<label for="small-bulk-upload" class="button bulk-upload-label">Bulk Append</label>
|
||||
<input type="file" id="small-bulk-upload" rv-on-change="queue.bulk_append" class="show-for-sr">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<Entry
|
||||
v-for="(entry, index) in queue"
|
||||
:entry="entry"
|
||||
:current="index == 0"
|
||||
:admin="admin"
|
||||
:firstStartedAt="queue[0].started_at"
|
||||
:currentTime="currentTime.time"
|
||||
:offset="offset(index)"
|
||||
@skip="(uuid) => $emit('skip', uuid)"
|
||||
@skipCurrent="$emit('skipCurrent')"
|
||||
@moveUp="(uuid) => $emit('moveUp', uuid)"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,17 @@
|
|||
import QueueInner from './QueueInner.vue'
|
||||
|
||||
const props = defineProps(['queue', 'admin']);
|
||||
const emits = defineEmits(['skip', 'skipCurrent', 'moveUp'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tabs-panel" id="queue-list">
|
||||
<QueueInner :queue="queue" :admin="admin" />
|
||||
<QueueInner
|
||||
:queue="queue"
|
||||
:admin="admin"
|
||||
@skip="(uuid) => $emit('skip', uuid)"
|
||||
@moveUp="(uuid) => $emit('moveUp', uuid)"
|
||||
@skipCurrent="$emit('skipCurrent')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,13 @@ import RecentInner from './RecentInner.vue'
|
|||
const props = defineProps(['recent', 'admin'])
|
||||
</script>
|
||||
<template>
|
||||
<div class="comp-column" id="right-side">
|
||||
<div class="comp-column">
|
||||
<div class="header">Recent</div>
|
||||
<RecentInner :recent="recent" />
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.comp-column {
|
||||
margin: 0.2em 0.2em 0.1em 0.2em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,13 @@ const props = defineProps(['recent'])
|
|||
<div class="vsplit">
|
||||
<div id="recent-list-wrapper" class="results">
|
||||
<ul id="recent" class="vertical menu">
|
||||
<Entry v-for="entry in recent" :entry="entry" />
|
||||
<Entry v-for="entry in recent" :entry="entry" :firstStartedAt="0" :currentTime="0" :offset="0" />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
#recent {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const emits = defineEmits(['append'])
|
|||
<span class="album">{{result.album}}</span>
|
||||
</div>
|
||||
<div class="cell small-3">
|
||||
<a class="button alert fright" :href="result.id" v-if="result.source == 'youtube'">
|
||||
<a class="button alert fright" target="_blank" rel="noreferrer noopener" :href="result.id" v-if="result.source == 'youtube'">
|
||||
<font-awesome-icon icon="fa-brands fa-youtube" />
|
||||
</a>
|
||||
<button class="button fright" @click="$emit('append')">
|
||||
|
|
|
|||
|
|
@ -2,16 +2,22 @@
|
|||
import SearchResults from './SearchResults.vue'
|
||||
import SearchBar from './SearchBar.vue'
|
||||
|
||||
const props = defineProps(['search']);
|
||||
const props = defineProps(['search', 'searching']);
|
||||
const emit = defineEmits(['update:searchTerm', 'search', 'append'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="comp-column" id="left-side">
|
||||
<div class="comp-column">
|
||||
<div class="header">Search</div>
|
||||
<div class="vsplit">
|
||||
<SearchBar :searchTerm="search.searchTerm" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" />
|
||||
<SearchResults :searchResults="search.searchResults" @append="(entry) => $emit('append', entry)" />
|
||||
<SearchResults :searchResults="search.searchResults" :searching="searching" @append="(entry) => $emit('append', entry)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.comp-column {
|
||||
margin: 0.2em 0.1em 0.2em 0.2em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
<script setup>
|
||||
import Result from './Result.vue'
|
||||
const props = defineProps(['searchResults']);
|
||||
const props = defineProps(['searchResults', 'searching']);
|
||||
const emits = defineEmits(['append'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="search-results" class="results">
|
||||
<ul class="vertical menu">
|
||||
<Result v-for="result in searchResults" :result="result" @append="$emit('append', result)" />
|
||||
<li v-if="searching">Searching...</li>
|
||||
<Result v-else v-for="result in searchResults" :result="result" @append="$emit('append', result)" />
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import SearchBar from './SearchBar.vue'
|
||||
import SearchResults from './SearchResults.vue'
|
||||
|
||||
const props = defineProps(['search']);
|
||||
const props = defineProps(['search', 'searching']);
|
||||
const emit = defineEmits(['update:searchTerm', 'search', 'append'])
|
||||
</script>
|
||||
|
||||
|
|
@ -10,7 +10,7 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append'])
|
|||
<div class="tabs-panel is-active" id="simplesearch">
|
||||
<div class="vsplit">
|
||||
<SearchBar :searchTerm="search.searchTerm" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)" />
|
||||
<SearchResults :searchResults="search.searchResults" @append="(entry) => $emit('append', entry)" />
|
||||
<SearchResults :searchResults="search.searchResults" :searching="searching" @append="(entry) => $emit('append', entry)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { onMounted, onBeforeUnmount } from 'vue'
|
|||
import $ from 'jquery'
|
||||
|
||||
const emits = defineEmits(['connect', 'update:room', 'update:name', 'update:server', 'update:secret'])
|
||||
const props = defineProps(['room', 'server'])
|
||||
const props = defineProps(['room', 'server', 'joinMsg'])
|
||||
|
||||
onMounted(() => {
|
||||
$(document).foundation();
|
||||
|
|
@ -15,7 +15,7 @@ onBeforeUnmount(() => {
|
|||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="reveal" id="welcome" data-reveal data-close-on-esc="false" data-close-on-click="false">
|
||||
<div class="reveal" id="welcome" @keyup.enter="$emit('connect')" data-reveal data-close-on-esc="false" data-close-on-click="false">
|
||||
<h1>Welcome to Syng</h1>
|
||||
<p>
|
||||
Please enter the room code and your name
|
||||
|
|
@ -45,6 +45,8 @@ onBeforeUnmount(() => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p v-html="joinMsg">
|
||||
</p>
|
||||
<button class="button expanded" @click="$emit('connect')">Connect</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import App from './App.vue'
|
|||
import Main from './Main.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { faMagnifyingGlass, faList, faHistory, faPlus, faStepForward, faTimes } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faMagnifyingGlass, faList, faArrowUp, faHistory, faPlus, faStepForward, faTimes } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faYoutube } from '@fortawesome/free-brands-svg-icons'
|
||||
|
||||
import 'foundation-sites/dist/css/foundation.min.css'
|
||||
|
|
@ -18,6 +18,7 @@ library.add(faHistory)
|
|||
library.add(faStepForward)
|
||||
library.add(faYoutube)
|
||||
library.add(faTimes)
|
||||
library.add(faArrowUp)
|
||||
|
||||
window.jQuery = jquery;
|
||||
window.$ = jquery;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue