client: implement queuing

src/components/FolderView/SongList.vue

@@ -2,44 +2,52 @@
   <div class="folder">
     <div class="table rounded" ref="songtitle" v-if="songs.length">
       <table>
-        <tr>
-          <th>Track</th>
-          <th>Artist</th>
-          <th>Album</th>
-          <th v-if="songTitleWidth > minWidth">Duration</th>
-        </tr>
-        <tr v-for="song in songs" :key="song" @click="playAudio(song.filepath)">
-          <td :style="{ width: songTitleWidth + 'px' }" class="flex">
-            <div
-              class="album-art rounded image"
-              :style="{
-                backgroundImage: `url(&quot;${image_path + song.image}&quot;)`,
-              }"
-            ></div>
-            <div>
-              <span class="ellip">{{ song.title }}</span>
-            </div>
-          </td>
-          <td :style="{ width: songTitleWidth + 'px' }">
-            <div class="ellip">
-              <span
-                class="artist"
-                v-for="artist in song.artists"
-                :key="artist"
-                >{{ artist }}</span
-              >
-            </div>
-          </td>
-          <td :style="{ width: songTitleWidth + 'px' }">
-            <div class="ellip">{{ song.album }}</div>
-          </td>
-          <td
-            :style="{ width: songTitleWidth + 'px' }"
-            v-if="songTitleWidth > minWidth"
+        <thead>
+          <tr>
+            <th>Track</th>
+            <th>Artist</th>
+            <th>Album</th>
+            <th v-if="songTitleWidth > minWidth">Duration</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="song in songs"
+            :key="song"
+            @click="updateQueue(song.type.name, song.type.id)"
           >
-            {{ `${Math.trunc(song.length / 60)} min` }}
-          </td>
-        </tr>
+            <td :style="{ width: songTitleWidth + 'px' }" class="flex">
+              <div
+                class="album-art rounded image"
+                :style="{
+                  backgroundImage: `url(&quot;${song.image}&quot;)`,
+                }"
+              ></div>
+              <div>
+                <span class="ellip">{{ song.title }}</span>
+              </div>
+            </td>
+            <td :style="{ width: songTitleWidth + 'px' }">
+              <div class="ellip">
+                <span
+                  class="artist"
+                  v-for="artist in putCommas(song.artists)"
+                  :key="artist"
+                  >{{ artist }}</span
+                >
+              </div>
+            </td>
+            <td :style="{ width: songTitleWidth + 'px' }">
+              <div class="ellip">{{ song.album }}</div>
+            </td>
+            <td
+              :style="{ width: songTitleWidth + 'px' }"
+              v-if="songTitleWidth > minWidth"
+            >
+              {{ `${Math.trunc(song.length / 60)} min` }}
+            </td>
+          </tr>
+        </tbody>
       </table>
     </div>
     <div v-else ref="songtitle"></div>
@@ -48,15 +56,17 @@
 
 <script>
 import { ref } from "@vue/reactivity";
+
 import { onMounted, onUnmounted } from "@vue/runtime-core";
 import { playAudio } from "@/composables/playAudio.js";
+import getQueue from "@/composables/getQueue.js";
+import putCommas from "@/composables/perks.js";
 
 export default {
   props: ["songs"],
-  setup() {
+  setup(props, context) {
     const songtitle = ref(null);
     const songTitleWidth = ref(null);
-    const image_path = "http://127.0.0.1:8900/images/thumbnails/";
 
     const minWidth = ref(300);
 
@@ -66,6 +76,11 @@ export default {
       songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3;
     };
 
+    const updateQueue = async (type, id) => {
+      const queue = await getQueue(type, id);
+      context.emit("updateQueue", queue);
+    };
+
     onMounted(() => {
       resizeSongTitleWidth();
 
@@ -80,7 +95,14 @@ export default {
       });
     });
 
-    return { songtitle, image_path, songTitleWidth, minWidth, playAudio };
+    return {
+      songtitle,
+      songTitleWidth,
+      minWidth,
+      playAudio,
+      updateQueue,
+      putCommas
+    };
   },
 };
 </script>
@@ -103,11 +125,15 @@ export default {
   position: relative;
   margin: 1rem;
 
-  tr {
+  tbody tr {
+    cursor: pointer;
+    transition: all 0.5s ease;
+
     &:hover {
       td {
         background-color: rgba(255, 174, 0, 0.534);
       }
+      transform: scale(0.99);
     }
   }
 }

src/components/LeftSidebar/Navigation.vue

@@ -45,7 +45,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: '$home' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: 'home' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="folders-icon"></div>
@@ -54,7 +54,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: '$home' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: 'home' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="settings-icon"></div>

src/components/RightSideBar/UpNext.vue

@@ -14,12 +14,21 @@
     <div>
       <div :class="{ hr: is_expanded }" class="all-items">
         <div :class="{ v0: !is_expanded, v1: is_expanded }" class="scrollable">
-          <div class="song-item h-1" v-for="song in songs" :key="song">
-            <div class="album-art image"></div>
+          <div class="song-item h-1" v-for="song in queue" :key="song">
+            <div
+              class="album-art image"
+              :style="{
+                backgroundImage: `url(&quot;${song.image}&quot;)`,
+              }"
+            ></div>
             <div class="tags">
               <p class="title">{{ song.title }}</p>
               <hr />
-              <p class="artist">{{ song.artist }}</p>
+              <p class="artist">
+                <span v-for="artist in putCommas(song.artists)" :key="artist">{{
+                  artist
+                }}</span>
+              </p>
             </div>
           </div>
         </div>
@@ -30,97 +39,18 @@
 
 <script>
 import { toRefs } from "@vue/reactivity";
+import putCommas from "@/composables/perks.js";
 
 export default {
-  props: ["up_next"],
-  emits: ["expandQueue"],
+  props: ["up_next", "queue"],
   setup(props, { emit }) {
-    const songs = [
-      {
-        title: "Hard to forget",
-        artist: "Sam Hunt",
-      },
-      {
-        title: "Bluebird",
-        artist: "Miranda Lambert",
-      },
-      {
-        title: "I called mama",
-        artist: "Ken Chesseny",
-      },
-      {
-        title: "Bluebird",
-        artist: "Miranda Lambert",
-      },
-      {
-        title: "I called mama",
-        artist: "Ken Chesseny",
-      },
-      {
-        title: "Bluebird",
-        artist: "Miranda Lambert",
-      },
-      {
-        title: "I called mama",
-        artist: "Ken Chesseny",
-      },
-      {
-        title: "Bluebird",
-        artist: "Miranda Lambert",
-      },
-      {
-        title: "I called mama",
-        artist: "Ken Chesseny",
-      },
-      {
-        title: "Bluebird",
-        artist: "Miranda Lambert",
-      },
-      {
-        title: "I called mama",
-        artist: "Ken Chesseny",
-      },
-      {
-        title: "Bluebird",
-        artist: "Miranda Lambert",
-      },
-      {
-        title: "I called mama",
-        artist: "Ken Chesseny",
-      },
-      {
-        title: "Bluebird",
-        artist: "Miranda Lambert",
-      },
-      {
-        title: "I called mama",
-        artist: "Ken Chesseny",
-      },
-      {
-        title: "Bluebird",
-        artist: "Miranda Lambert",
-      },
-      {
-        title: "I called mama",
-        artist: "Ken Chesseny",
-      },
-      {
-        title: "Bluebird",
-        artist: "Miranda Lambert",
-      },
-      {
-        title: "I called mama",
-        artist: "Ken Chesseny",
-      },
-    ];
-
     const is_expanded = toRefs(props).up_next;
 
     let collapse = () => {
       emit("expandQueue");
     };
-
-    return { songs, collapse, is_expanded };
+    
+    return { collapse, is_expanded, putCommas };
   },
 };
 </script>
@@ -177,10 +107,9 @@ export default {
 .up-next .main-item .album-art {
   width: 4.5rem;
   height: 4.5rem;
-  background-color: #ccc;
+  background-image: url(../../assets/images/null.webp);
   margin: 0 0.5rem 0 0;
   border-radius: 0.5rem;
-  background-image: url(../../assets/images/htf.jpeg);
 }
 
 .up-next .main-item .tags hr {
@@ -234,10 +163,9 @@ export default {
 .up-next .all-items .album-art {
   width: 3rem;
   height: 3rem;
-  background-color: #ccc;
   margin: 0 0.5rem 0 0;
   border-radius: 0.5rem;
-  background-image: url(../../assets/images/htf.jpeg);
+  background-image: url(../../assets/images/null.webp);
 }
 
 .up-next .all-items .song-item .artist {