christofsteel/syng-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added Welcome screen

Browse source
This commit is contained in:
Christoph Stahl 2022-11-22 10:01:17 +01:00
parent 8a0a07424a
commit 699881d972
10 changed files with 104 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/App.vue
View file

@ -1,11 +1,11 @@
<script setup> <script setup>
import { computed, ref, onMounted, onDeactivated } from 'vue' import { computed, ref, onMounted, onDeactivated } from 'vue'
import $ from 'jquery'
import { io } from "socket.io-client" import { io } from "socket.io-client"
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import MobileLayout from './components/MobileLayout.vue' import MobileLayout from './components/MobileLayout.vue'
import DesktopLayout from './components/DesktopLayout.vue' import DesktopLayout from './components/DesktopLayout.vue'
import WelcomeReveal from './components/WelcomeReveal.vue'
const router=useRouter() const router=useRouter()
@ -17,33 +17,28 @@ const is_small = ref(window.innerWidth < 768)
const state = ref({ const state = ref({
'search': {'searchTerm': '', 'searchResults': []}, 'search': {'searchTerm': '', 'searchResults': []},
'queue': [ ], 'queue': [ ],
'roomCode': undefined, 'room': useRoute().params.room,
'name': undefined 'name': undefined,
'joined': false
}) })
onMounted(() => { onMounted(() => {
window.addEventListener("resize", resizeBrowserHandler) window.addEventListener("resize", resizeBrowserHandler)
$(document).foundation();
$("#welcome").foundation("open")
if(useRoute().params.room) {
state.value.roomCode = useRoute().params.room
closeWelcome()
}
}) })
function setRoomCode(roomEvent) { function setRoomCode(room) {
state.value.roomCode = roomEvent.target.value state.value.room = room
} }
function setName(nameEvent) { function setName(name) {
state.value.name = nameEvent.target.value state.value.name = name
} }
function updateSearchTerm(val) { function updateSearchTerm(val) {
state.value.search.searchTerm = val state.value.search.searchTerm = val
} }
const socket = io("ws://localhost:8080") const socket = io()
function search() { function search() {
socket.emit("search", {"query": state.value.search.searchTerm }) socket.emit("search", {"query": state.value.search.searchTerm })
@ -53,29 +48,30 @@ function append(entry) {
socket.emit("append", {"id": entry.id, "performer": state.value.name, "source": entry.source }) socket.emit("append", {"id": entry.id, "performer": state.value.name, "source": entry.source })
} }
function closeWelcome() { function joinRoom() {
if(state.value.roomCode != undefined) { socket.emit("register-web", {"room": state.value.room}, (response) => {
socket.emit("register-web", {"room": state.value.roomCode}, (response) => {
if(response === true) { if(response === true) {
$('#welcome').foundation("close") state.value.joined = true
router.push({name: "room", params: {room: state.value.roomCode}}) router.push({name: "room", params: {room: state.value.room}})
} else { } else {
console.log("no such room") console.log("no such room")
} }
}) })
} }
}
socket.on("search-results", (results) => { socket.on("search-results", (results) => {
state.value.search.searchResults = results state.value.search.searchResults = results
}) })
socket.on("connect", () => socket.on("connect", () =>
{ socket.emit("register-web", {"room": "ABCD"}) } {
joinRoom()
}
) )
socket.on("state", (val) => { socket.on("state", (val) => {
state.value.queue=val state.value.queue=val.queue
state.value.recent=val.recent
}) })
</script> </script>
@ -87,34 +83,9 @@ socket.on("state", (val) => {
<div class="row" id="main-content"> <div class="row" id="main-content">
<MobileLayout v-show="is_small" :state="state" @update:searchTerm="updateSearchTerm" /> <MobileLayout v-show="is_small" :state="state" @update:searchTerm="updateSearchTerm" />
<DesktopLayout v-show="!is_small" :state="state" @update:searchTerm="updateSearchTerm" @search="search" @append="append" /> <DesktopLayout v-show="!is_small" :state="state" @update:searchTerm="updateSearchTerm" @search="search" @append="append" />
<div class="reveal" id="welcome" data-reveal data-close-on-click="false"> <WelcomeReveal v-if="!state.joined" :room="state.room" @connect="joinRoom" @update:room="setRoomCode" @update:name="setName" />
<h1>Welcome to Syng</h1>
<p>
Please enter the room code and your name
</p>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="medium-6 cell">
<label>Room code
<input type="text" @input="setRoomCode" placeholder="XXXX">
</label>
</div>
<div class="medium-6 cell">
<label>Name
<input type="text" @input="setName" placeholder="Leave empty to be asked on append">
</label>
</div> </div>
</div> </div>
</div>
<button class="button" @click="closeWelcome" >Connect</button>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>
</div>
<router-view></router-view>
</template> </template>
<style scoped> <style scoped>

23
src/components/DesktopLayout.vue
View file

@ -1,6 +1,7 @@
<script setup> <script setup>
import SearchDesktop from './SearchDesktop.vue' import SearchDesktop from './SearchDesktop.vue'
import QueueDesktop from './QueueDesktop.vue' import QueueDesktop from './QueueDesktop.vue'
import RecentDesktop from './RecentDesktop.vue'
const props = defineProps(['state']); const props = defineProps(['state']);
const emit = defineEmits(['update:searchTerm', 'search', 'append']) const emit = defineEmits(['update:searchTerm', 'search', 'append'])
@ -11,26 +12,6 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append'])
<div class="splitter"> <div class="splitter">
<SearchDesktop :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)" /> <SearchDesktop :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')" @append="(entry) => $emit('append', entry)" />
<QueueDesktop :queue="state.queue" /> <QueueDesktop :queue="state.queue" />
<div class="comp-column" id="right-side"> <RecentDesktop :recent="state.recent" />
<div class="header">Recent</div>
<div id="large-recent-list">
<div class="vsplit">
<div id="large-recent-list-wrapper" class="results">
<ol id="large-last10" class="vertical menu">
<li rv-each-entry="queue.last10">
<div class="row">
<span class="artist">{ entry.artist }</span>
<span class="title">{ entry.title }</span>
<span class="album">{ entry.album }</span>
</div>
<div class="row">
<span class="singer">{ entry.performer }</span>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>

8
src/components/Entry.vue
View file

@ -1,6 +1,6 @@
<script> <script>
export default { export default {
props: ['admin', 'artist', 'title', 'album', 'performer', 'current'] props: ['admin', 'entry', 'current']
} }
</script> </script>
@ -8,9 +8,9 @@ export default {
<li :class="{ current: current }"> <li :class="{ current: current }">
<div class="grid-x"> <div class="grid-x">
<div class="cell" :class="{'small-9': admin}"> <div class="cell" :class="{'small-9': admin}">
<span class="artist">{{ artist }}</span> <span class="artist">{{ entry.artist }}</span>
<span class="title">{{ title }}</span><br /> <span class="title">{{ entry.title }}</span><br />
<span class="performer">{{ performer }}</span> <span class="performer">{{ entry.performer }}</span>
</div> </div>
<div v-if="admin" class="cell small-3"> <div v-if="admin" class="cell small-3">
<button class="button alert fright" v-if="!current"> <button class="button alert fright" v-if="!current">

6
src/components/MobileLayout.vue
View file

@ -5,7 +5,7 @@ import RecentTab from './RecentTab.vue'
import TabHeader from './TabHeader.vue' import TabHeader from './TabHeader.vue'
const props = defineProps(['state']); const props = defineProps(['state']);
const emit = defineEmits(['update:searchTerm']) const emit = defineEmits(['update:searchTerm', 'search'])
</script> </script>
@ -18,9 +18,9 @@ const emit = defineEmits(['update:searchTerm'])
<TabHeader link="#recent-list" icon="fa-history" /> <TabHeader link="#recent-list" icon="fa-history" />
</div> </div>
<div class="tabs-container" data-tabs-content="main-tab"> <div class="tabs-container" data-tabs-content="main-tab">
<SearchTab :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)"/> <SearchTab :search="state.search" @update:searchTerm="(val) => $emit('update:searchTerm', val)" @search="$emit('search')"/>
<QueueTab :queue="state.queue" /> <QueueTab :queue="state.queue" />
<RecentTab /> <RecentTab :recent="state.recent" />
</div> </div>
</div> </div>
</div> </div>

2
src/components/QueueInner.vue
View file

@ -12,7 +12,7 @@ export default {
<div class="vsplit"> <div class="vsplit">
<div id="queue-list-wrapper" class="results"> <div id="queue-list-wrapper" class="results">
<ul id="queue" class="vertical menu"> <ul id="queue" class="vertical menu">
<Entry v-for="(entry, index) in queue" :artist="entry.artist" :title="entry.title" :album="entry.album" :performer="entry.performer" :current="index == 0" :admin="admin" /> <Entry v-for="(entry, index) in queue" :entry="entry" :current="index == 0" :admin="admin" />
<li v-if="admin"> <li v-if="admin">
<div class="row"> <div class="row">
<div class="columns small-12"> <div class="columns small-12">

11
src/components/RecentDesktop.vue Normal file
View file

@ -0,0 +1,11 @@
<script setup>
import RecentInner from './RecentInner.vue'
const props = defineProps(['recent'])
</script>
<template>
<div class="comp-column" id="right-side">
<div class="header">Recent</div>
<RecentInner :state="recent" />
</div>
</template>

14
src/components/RecentInner.vue Normal file
View file

@ -0,0 +1,14 @@
<script setup>
import Entry from './Entry.vue'
const props = defineProps(['recent'])
</script>
<template>
<div class="vsplit">
<div id="recent-list-wrapper" class="results">
<ul id="last10" class="vertical menu">
<Entry v-for="entry in recent" :entry="entry" />
</ul>
</div>
</div>
</template>

14
src/components/RecentTab.vue
View file

@ -1,17 +1,11 @@
<script setup> <script setup>
import Entry from './Entry.vue' import RecentInner from './RecentInner.vue'
const props = defineProps(['recent'])
</script> </script>
<template> <template>
<div class="tabs-panel" id="recent-list"> <div class="tabs-panel" id="recent-list">
<div class="vsplit"> <RecentInner :recent="recent" />
<div id="recent-list-wrapper" class="results">
<ol id="last10" class="vertical menu">
<Entry artist="Artist" title="Title" album="Album" performer="Performer" />
<Entry artist="Artist" title="Title" album="Album" performer="Performer" />
<Entry artist="Artist" title="Title" album="Album" performer="Performer" />
</ol>
</div>
</div>
</div> </div>
</template> </template>

2
src/components/SearchBar.vue
View file

@ -5,7 +5,7 @@ const emit = defineEmits(['update:searchTerm', 'search'])
<template> <template>
<div class="input-group"> <div class="input-group">
<input id="search-query" class="input-group-field" type="search" placeholder="Search term or YouTube link (https://www.youtube.com/watch?v=...)" :value='searchTerm' @input="$emit('update:searchTerm', $event.target.value)"/> <input id="search-query" class="input-group-field" type="search" placeholder="Search term or YouTube link (https://www.youtube.com/watch?v=...)" :value='searchTerm' @input="$emit('update:searchTerm', $event.target.value)" @keyup.enter="$emit('search')" />
<div class="input-group-button"> <div class="input-group-button">
<button class="button" @click="$emit('search')"><font-awesome-icon icon="fa-solid fa-magnifying-glass" /></button> <button class="button" @click="$emit('search')"><font-awesome-icon icon="fa-solid fa-magnifying-glass" /></button>
</div> </div>

43
src/components/WelcomeReveal.vue Normal file
View file

@ -0,0 +1,43 @@
<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import $ from 'jquery'
const emits = defineEmits(['connect', 'update:room', 'update:name'])
const props = defineProps(['room'])
onMounted(() => {
$(document).foundation();
$("#welcome").foundation("open")
})
onBeforeUnmount(() => {
$("#welcome").foundation("close")
})
</script>
<template>
<div class="reveal" id="welcome" data-reveal data-close-on-click="false">
<h1>Welcome to Syng</h1>
<p>
Please enter the room code and your name
</p>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="medium-6 cell">
<label>Room code
<input type="text" :value="room" @input="$emit('update:room', $event.target.value)" placeholder="ABCD">
</label>
</div>
<div class="medium-6 cell">
<label>Name
<input type="text" @input="$emit('update:name', $event.target.value)" placeholder="Leave empty to be asked on append">
</label>
</div>
</div>
</div>
<button class="button" @click="$emit('connect')">Connect</button>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">&times;</span>
</button>
</div>
</template>