Merge branch 'main' of github.com:th0rn0/lanops-spotify-jukebox

th0rn0 · May 3, 2024 · 04c8580 · 04c8580
2 parents 319bbfb + 59fc8e0
commit 04c8580
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/ui/app.vue b/ui/app.vue
@@ -17,13 +17,18 @@
     </div>
     <div v-if="Object.keys(nowPlaying).length !== 0" class="fixed-bottom bg-light p-3">
         <h3>Now Playing</h3>
-        <div class="d-flex">
-            <img :src="nowPlaying.album.images[2].url" />
-            <h5 class="ps-3">
-                {{ nowPlaying.name }}
-                <br />
-                <small class="text-muted">{{ nowPlaying.artists[0].name }}</small>
-            </h5>
+        <div class="d-flex justify-content-between">
+            <div class="d-flex">
+                <img :src="nowPlaying.album.images[2].url" />
+                <h5 class="ps-3">
+                    {{ nowPlaying.name }}
+                    <br />
+                    <small class="text-muted">{{ nowPlaying.artists[0].name }}</small>
+                </h5>
+            </div>
+            <div class="btn-group-vertical" role="group" aria-label="Basic example">
+                <button type="button" class="btn btn-danger btn-lg"  @click="voteDown">{{ skipText }}</button>
+            </div>
         </div>
     </div>
 </template>
@@ -33,10 +38,23 @@
 
     const playlist = ref([]);
     const nowPlaying = ref({});
-
+    const skipText = ref("Vote song uploader is a cunt");
+    
     async function refreshPlaylist () {
         playlist.value = await $fetch(runtimeConfig.public.apiEndpoint + `/tracks`).catch((error) => error.data)
     }
+
+    async function voteDown() {
+        try {
+            await $fetch(`${runtimeConfig.public.apiEndpoint}/votes/skip`, {method: 'POST', body: { uri: nowPlaying.value.uri }})
+            skipText.value = "Order received, Obergruppenführer";
+            setTimeout(() => skipText.value = "Vote song uploader is a cunt", 10000)
+        } catch (error) {
+            skipText.value = "Chill out, music hitler";
+            setTimeout(() => skipText.value = "Vote song uploader is a cunt", 10000)
+        }
+        refreshPlaylist();
+    }
     
     onMounted(async () => {
         refreshPlaylist();

diff --git a/ui/components/playlistItem.vue b/ui/components/playlistItem.vue
@@ -10,12 +10,6 @@
                 <small class="text-white-50">{{ track.artist }}</small>
             </h5>
         </td>
-        <td>
-            <div class="btn-group-vertical" role="group" aria-label="Basic example">
-                <button type="button" class="btn btn-success btn-sm"  @click="voteUp">Vote up</button>
-                <button type="button" class="btn btn-danger btn-sm"  @click="voteDown">Vote down</button>
-                </div>
-        </td>
     </tr>
 </template>
 
@@ -37,14 +31,4 @@
 
     const props = defineProps<Props>()
     const runtimeConfig = useRuntimeConfig()
-
-    async function voteUp() {
-        await $fetch(`${runtimeConfig.public.apiEndpoint}/votes/add`, {method: 'POST', body: { uri: props.track.uri }})
-        emit('voted');
-    }
-
-    async function voteDown() {
-        await $fetch(`${runtimeConfig.public.apiEndpoint}/votes/remove`, {method: 'POST', body: { uri: props.track.uri }})
-        emit('voted');
-    }
 </script>