From 5d4a4ca13c57878a2e8c4a918eb5fe5dbdfdb65a Mon Sep 17 00:00:00 2001 From: Christoph Stahl Date: Tue, 29 Nov 2022 20:59:38 +0100 Subject: [PATCH] Code cleanup and implemented the last missing features (i think) --- index.html | 2 +- public/favicon.ico | Bin 4286 -> 4669 bytes src/App.vue | 140 ++++++++++++++++++++++-------- src/assets/main.css | 97 +-------------------- src/components/DesktopLayout.vue | 18 +++- src/components/Entry.vue | 61 +++++++++++-- src/components/Footer.vue | 41 +++++++++ src/components/FoundationTest.vue | 9 -- src/components/GetUserName.vue | 37 ++++++++ src/components/MobileLayout.vue | 19 ++-- src/components/QueueDesktop.vue | 16 +++- src/components/QueueInner.vue | 43 ++++++--- src/components/QueueTab.vue | 9 +- src/components/RecentDesktop.vue | 7 +- src/components/RecentInner.vue | 7 +- src/components/Result.vue | 2 +- src/components/SearchDesktop.vue | 12 ++- src/components/SearchResults.vue | 5 +- src/components/SearchTab.vue | 4 +- src/components/WelcomeReveal.vue | 6 +- src/main.js | 3 +- 21 files changed, 350 insertions(+), 188 deletions(-) create mode 100644 src/components/Footer.vue delete mode 100644 src/components/FoundationTest.vue create mode 100644 src/components/GetUserName.vue 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 df36fcfb72584e00488330b560ebcf34a41c64c2..bce2724e6552263169f9ced29f42893b2caed65d 100644 GIT binary patch literal 4669 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 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S 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}}
- +