diff --git a/index.html b/index.html index 99f583a..af32274 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite App + Syng Rocks!
diff --git a/public/favicon.ico b/public/favicon.ico index df36fcf..bce2724 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/App.vue b/src/App.vue index 620f9ca..2774f0a 100644 --- a/src/App.vue +++ b/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 = "No such room!
" + + "Please use the correct room code your organizer provided you.
" + + "To host your own syng powered karaoke parties, please download and " + + "install Syng and run it with 
syng-client " + 
+                state.value.server + "
" } }) } - - diff --git a/src/assets/main.css b/src/assets/main.css index 0bc8dc3..0781968 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -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; */ -} diff --git a/src/components/DesktopLayout.vue b/src/components/DesktopLayout.vue index 0bc382c..c0e60fc 100644 --- a/src/components/DesktopLayout.vue +++ b/src/components/DesktopLayout.vue @@ -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']) + diff --git a/src/components/Entry.vue b/src/components/Entry.vue index 171f296..13d755a 100644 --- a/src/components/Entry.vue +++ b/src/components/Entry.vue @@ -1,7 +1,29 @@ - + + diff --git a/src/components/Footer.vue b/src/components/Footer.vue new file mode 100644 index 0000000..8cc5b7e --- /dev/null +++ b/src/components/Footer.vue @@ -0,0 +1,41 @@ + + + diff --git a/src/components/FoundationTest.vue b/src/components/FoundationTest.vue deleted file mode 100644 index dd549e0..0000000 --- a/src/components/FoundationTest.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - - - diff --git a/src/components/GetUserName.vue b/src/components/GetUserName.vue new file mode 100644 index 0000000..9a1c781 --- /dev/null +++ b/src/components/GetUserName.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/components/MobileLayout.vue b/src/components/MobileLayout.vue index 4f11f85..8f0f6a2 100644 --- a/src/components/MobileLayout.vue +++ b/src/components/MobileLayout.vue @@ -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']) @@ -18,8 +18,14 @@ const emit = defineEmits(['update:searchTerm', 'search', 'append' ])
- - + +
@@ -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; diff --git a/src/components/QueueDesktop.vue b/src/components/QueueDesktop.vue index 6742091..3db45c1 100644 --- a/src/components/QueueDesktop.vue +++ b/src/components/QueueDesktop.vue @@ -2,11 +2,23 @@ import QueueInner from './QueueInner.vue' const props = defineProps(['queue', 'admin']); +const emits = defineEmits(['skip', 'skipCurrent', 'moveUp']) + diff --git a/src/components/QueueInner.vue b/src/components/QueueInner.vue index 9b3d7c3..c9be024 100644 --- a/src/components/QueueInner.vue +++ b/src/components/QueueInner.vue @@ -1,23 +1,46 @@ + diff --git a/src/components/Result.vue b/src/components/Result.vue index aa0ad75..6af0816 100644 --- a/src/components/Result.vue +++ b/src/components/Result.vue @@ -11,7 +11,7 @@ const emits = defineEmits(['append']) {{result.album}}
- +