client: fix sending multiple requests

on songlist click

src/App.vue

@@ -12,7 +12,7 @@
       <PinnedStuff :collapsed="collapsed" />
     </div>
     <div class="content">
-      <router-view @sendQueue="updpateQueue"/>
+      <router-view />
     </div>
     <div class="r-sidebar">
       <Search
@@ -23,7 +23,11 @@
       <div class="m-np">
         <NowPlaying />
       </div>
-      <UpNext v-model:up_next="up_next" @expandQueue="expandQueue" :queue="queue"/>
+      <UpNext
+        v-model:up_next="up_next"
+        @expandQueue="expandQueue"
+        :queue="queue"
+      />
       <RecommendedArtist />
     </div>
   </div>
@@ -40,6 +44,8 @@ import NowPlaying from "./components/RightSideBar/NowPlaying.vue";
 import UpNext from "./components/RightSideBar/UpNext.vue";
 import RecommendedArtist from "./components/RightSideBar/Recommendation.vue";
 
+import perks from "@/composables/perks.js";
+
 export default {
   components: {
     Navigation,
@@ -51,13 +57,10 @@ export default {
   },
 
   setup() {
+    const collapsed = ref(true);
     const queue = ref(JSON.parse(localStorage.getItem("queue")) || []);
 
-    const updpateQueue = (data)=> {
-      queue.value = data;
-    }
-
-    const collapsed = ref(true);
+    perks.readQueue();
 
     function toggleNav() {
       collapsed.value = !collapsed.value;
@@ -82,7 +85,6 @@ export default {
 
     return {
       toggleNav,
-      updpateQueue,
       collapsed,
       up_next,
       expandQueue,
@@ -132,9 +134,8 @@ export default {
   cursor: pointer;
 }
 
-.m-np {
-  position: absolute;
-  bottom: 0;
-}
-
+// .m-np {
+//   position: absolute;
+//   bottom: 0;
+// }
 </style>

src/components/FolderView/SongList.vue

@@ -14,7 +14,7 @@
           <tr
             v-for="song in songs"
             :key="song"
-            @click="updateQueue(song.type.name, song.type.id)"
+            @click="updateQueue(song, song.type.name, song.type.id)"
           >
             <td :style="{ width: songTitleWidth + 'px' }" class="flex">
               <div
@@ -55,30 +55,58 @@
 </template>
 
 <script>
-import { ref } from "@vue/reactivity";
-
+import { ref, toRefs } 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";
+import perks from "@/composables/perks.js";
 
 export default {
   props: ["songs"],
-  setup(props, context) {
+  setup(props) {
+    const song_list = toRefs(props).songs;
     const songtitle = ref(null);
     const songTitleWidth = ref(null);
 
     const minWidth = ref(300);
+    const putCommas = perks.putCommas;
 
-    const resizeSongTitleWidth = () => {
-      let a = songtitle.value.clientWidth;
+    const updateQueue = async (song, type, id) => {
+      if (perks.queue.value[0]._id.$oid !== song_list.value[0]._id.$oid) {
+        const queue = await getQueue(type, id);
+        localStorage.setItem("queue", JSON.stringify(queue));
+        perks.queue.value = queue;
+      }
+
+      perks.current.value = song;
+      localStorage.setItem("current", JSON.stringify(song));
+
+      const index = perks.queue.value.findIndex(
+        (item) => item._id.$oid === song._id.$oid
+      );
+
+      if (index == perks.queue.value.length - 1) {
+        perks.next.value = perks.queue.value[0];
+      } else {
+        perks.next.value = perks.queue.value[index + 1];
+      }
+
+      localStorage.setItem(
+        "next",
+        JSON.stringify(perks.queue.value[index + 1])
+      );
 
-      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);
+    const resizeSongTitleWidth = () => {
+      try {
+        let a = songtitle.value.clientWidth;
+  
+        songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3;
+      } catch (error) {
+        return;
+      }
     };
 
     onMounted(() => {
@@ -101,7 +129,7 @@ export default {
       minWidth,
       playAudio,
       updateQueue,
-      putCommas
+      putCommas,
     };
   },
 };

src/components/RightSideBar/NowPlaying.vue

@@ -1,11 +1,20 @@
 <template>
   <div class="now-playing">
     <div class="art-tags">
-      <div class="album-art image"></div>
+      <div
+        class="album-art image"
+        :style="{
+          backgroundImage: `url(&quot;${current.image}&quot;)`,
+        }"
+      ></div>
       <div>
-        <p id="title" class="ellipsis">I love this bar (remix)</p>
+        <p id="title" class="ellipsis">{{ current.title }}</p>
         <hr />
-        <span id="artist">Toby Keith, Morgan Wallen</span>
+        <div id="artist">
+          <span v-for="artist in putCommas(current.artists)" :key="artist">{{
+            artist
+          }}</span>
+        </div>
       </div>
     </div>
     <div class="controls">
@@ -17,7 +26,17 @@
 </template>
 
 <script>
-export default {};
+import { ref } from "@vue/reactivity";
+import perks from "../../composables/perks.js";
+
+export default {
+  setup() {
+    const current = ref(perks.current);
+    const putCommas = perks.putCommas;
+
+    return { current, putCommas };
+  },
+};
 </script>
 
 <style>
@@ -43,7 +62,7 @@ export default {};
   border-radius: 0.5rem;
   margin-right: 0.5rem;
   background-color: #ad1717a8;
-  background-image: url(../../assets/images/tk.jpg);
+  background-image: url(../../assets/images/null.webp);
 }
 
 .now-playing .art-tags hr {

src/components/RightSideBar/UpNext.vue

@@ -4,11 +4,20 @@
       COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span>
     </p>
     <div class="main-item h-1">
-      <div class="album-art image"></div>
+      <div
+        class="album-art image"
+        :style="{
+          backgroundImage: `url(&quot;${next.image}&quot;)`,
+        }"
+      ></div>
       <div class="tags">
-        <p class="title">Hard to forget</p>
+        <p class="title">{{ next.title }}</p>
         <hr />
-        <p class="artist">Sam hunt</p>
+        <p class="artist">
+          <span v-for="artist in putCommas(next.artists)" :key="artist">{{
+            artist
+          }}</span>
+        </p>
       </div>
     </div>
     <div>
@@ -38,19 +47,25 @@
 </template>
 
 <script>
-import { toRefs } from "@vue/reactivity";
-import putCommas from "@/composables/perks.js";
+import { ref, toRefs } from "@vue/reactivity";
+import perks from "@/composables/perks.js";
 
 export default {
-  props: ["up_next", "queue"],
+  props: ["up_next"],
   setup(props, { emit }) {
     const is_expanded = toRefs(props).up_next;
 
+    const queue = ref(perks.queue);
+
+    const next = ref(perks.next);
+
     let collapse = () => {
       emit("expandQueue");
     };
-    
-    return { collapse, is_expanded, putCommas };
+
+    const putCommas = perks.putCommas;
+
+    return { collapse, is_expanded, putCommas, queue, next };
   },
 };
 </script>

src/composables/getQueue.js

@@ -19,7 +19,6 @@ const getQueue = async (type, id) => {
   }
 
   const data = await res.json();
-  localStorage.setItem("queue", JSON.stringify(data.songs));
 
   return data.songs;
 };

src/composables/perks.js

@@ -1,3 +1,25 @@
+import { ref } from "@vue/reactivity";
+
+const current = ref({
+    title: "Nothing played yet",
+    artists: ["... blah blah blah"],
+});
+
+const next = ref({
+    title: "Next song shows here",
+    artists: ["... blah blah blah"],
+});
+
+const queue = ref([
+    {
+        title: "Nothing played yet",
+        artists: ["... blah blah blah"],
+        _id: {
+            $oid: ""
+        }
+    }
+]);
+
 const putCommas = (artists) => {
   let result = [];
 
@@ -12,4 +34,29 @@ const putCommas = (artists) => {
   return result;
 };
 
-export default putCommas;
+const doThat = (songs, current) => {
+  queue.value = songs;
+  current.value = current;
+
+  console.log(queue.value);
+};
+
+const readQueue = () => {
+    const prev_queue = JSON.parse(localStorage.getItem("queue"));
+    const last_played =  JSON.parse(localStorage.getItem("current"));
+    const next_ = JSON.parse(localStorage.getItem("next"));
+
+    if (last_played){
+        current.value = last_played;
+    }
+
+    if (prev_queue){
+        queue.value = prev_queue;
+    }
+
+    if (next_){
+        next.value = next_;
+    }
+}
+
+export default { putCommas, doThat, readQueue, current, queue, next };

src/views/FolderView.vue

@@ -5,7 +5,7 @@
     </div>
     <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
-      <SongList :songs="songs" @updateQueue="updateQueue" />
+      <SongList :songs="songs" />
     </div>
   </div>
 </template>
@@ -27,7 +27,7 @@ export default {
     FolderList,
     SearchBox,
   },
-  setup(props, context) {
+  setup() {
     const route = useRoute();
     const path = ref(route.params.path);
 
@@ -39,10 +39,6 @@ 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;
@@ -96,7 +92,6 @@ export default {
       path,
       scrollable,
       loading,
-      updateQueue,
     };
   },
 };