client: implement queuing

src/App.vue

@@ -12,7 +12,7 @@
       <PinnedStuff :collapsed="collapsed" />
     </div>
     <div class="content">
-      <router-view />
+      <router-view @sendQueue="updpateQueue"/>
     </div>
     <div class="r-sidebar">
       <Search
@@ -23,7 +23,7 @@
       <div class="m-np">
         <NowPlaying />
       </div>
-      <UpNext v-model:up_next="up_next" @expandQueue="expandQueue" />
+      <UpNext v-model:up_next="up_next" @expandQueue="expandQueue" :queue="queue"/>
       <RecommendedArtist />
     </div>
   </div>
@@ -51,6 +51,12 @@ export default {
   },
 
   setup() {
+    const queue = ref(JSON.parse(localStorage.getItem("queue")) || []);
+
+    const updpateQueue = (data)=> {
+      queue.value = data;
+    }
+
     const collapsed = ref(true);
 
     function toggleNav() {
@@ -76,12 +82,14 @@ export default {
 
     return {
       toggleNav,
+      updpateQueue,
       collapsed,
       up_next,
       expandQueue,
       expandSearch,
       collapseSearch,
       search,
+      queue,
     };
   },
 };

src/assets/css/global.scss

@@ -129,11 +129,11 @@ a {
   margin-bottom: 0.5em;
 }
 
-@media (max-width: 70em) {
-  .r-sidebar {
-    display: none;
-  }
-}
+// @media (max-width: 70em) {
+//   .r-sidebar {
+//     display: none;
+//   }
+// }
 
 .image {
   background-position: center;

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 {

src/composables/car.js

@@ -0,0 +1,5 @@
+const car = () => {
+  return;
+};
+
+export default car;

src/composables/getFiles.js

@@ -12,13 +12,13 @@ const getData = async (path, last_id) => {
   if (last_id) {
     url = `${folders_uri}/f/${encoded_path}::${last_id}`;
   } else {
-    url = url = `${folders_uri}/f/${encoded_path}`;
+    url = url = `${folders_uri}/f/${encoded_path}::None`;
   }
 
   const res = await fetch(url);
 
   if (!res.ok) {
-    const message = `An erro has occured: ${res.status}`;
+    const message = `An error has occured: ${res.status}`;
     throw new Error(message);
   }
 

src/composables/getQueue.js

@@ -0,0 +1,27 @@
+const url = "http://127.0.0.1:9876/get/queue";
+
+const getQueue = async (type, id) => {
+  const res = await fetch(url, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      type: type,
+      id: id,
+    }),
+  });
+
+  if (!res.ok) {
+    const message = `An error has occured: ${res.status}`;
+    throw new Error(message);
+  }
+
+  const data = await res.json();
+  localStorage.setItem("queue", JSON.stringify(data.songs));
+
+  return data.songs;
+};
+
+export default getQueue;

src/composables/perks.js

@@ -0,0 +1,15 @@
+const putCommas = (artists) => {
+  let result = [];
+
+  artists.forEach((i, index, artists) => {
+    if (index !== artists.length - 1) {
+      result.push(i + ", ");
+    } else {
+      result.push(i);
+    }
+  });
+
+  return result;
+};
+
+export default putCommas;

src/main.js

@@ -6,5 +6,11 @@ import router from "./router";
 import "../src/assets/css/global.scss";
 
 import "animate.css";
+import mitt from "mitt";
 
-createApp(App).use(router).mount("#app");
+const emitter = mitt();
+
+const app = createApp(App);
+app.use(router);
+app.provide('emitter', emitter);
+app.mount('#app');

src/views/FolderView.vue

@@ -5,7 +5,7 @@
     </div>
     <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
-      <SongList :songs="songs" />
+      <SongList :songs="songs" @updateQueue="updateQueue" />
     </div>
   </div>
 </template>
@@ -27,7 +27,7 @@ export default {
     FolderList,
     SearchBox,
   },
-  setup() {
+  setup(props, context) {
     const route = useRoute();
     const path = ref(route.params.path);
 
@@ -39,6 +39,10 @@ export default {
     const scrollable = ref(null);
     const loading = ref(false);
 
+    const updateQueue = (queue) => {
+     context.emit("sendQueue", queue);
+    };
+
     onMounted(() => {
       const getPathFolders = (path, last_id) => {
         loading.value = true;
@@ -92,6 +96,7 @@ export default {
       path,
       scrollable,
       loading,
+      updateQueue,
     };
   },
 };