From aa4db95547e51596c5a7629c5865d3aa44edaf1e Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 5 Aug 2022 20:20:34 +0300
Subject: [PATCH] feat: store current track object to enable clear queue to
 work correctly

---
 .../LeftSidebar/{ => NP}/SongCard.vue         | 12 ++++++----
 src/components/LeftSidebar/nowPlaying.vue     |  4 ++--
 src/composables/perks.ts                      |  2 --
 src/stores/queue.ts                           | 22 +++++++++++--------
 src/views/FolderView.vue                      |  7 +++---
 5 files changed, 26 insertions(+), 21 deletions(-)
 rename src/components/LeftSidebar/{ => NP}/SongCard.vue (80%)

diff --git a/src/components/LeftSidebar/SongCard.vue b/src/components/LeftSidebar/NP/SongCard.vue
similarity index 80%
rename from src/components/LeftSidebar/SongCard.vue
rename to src/components/LeftSidebar/NP/SongCard.vue
index 07e4f977..32ffc874 100644
--- a/src/components/LeftSidebar/SongCard.vue
+++ b/src/components/LeftSidebar/NP/SongCard.vue
@@ -11,11 +11,15 @@
           }"
         >
           <div class="art">
-            <img :src="imguri + track.image" alt="" class="l-image rounded" />
+            <img
+              :src="imguri + track.image"
+              alt=""
+              class="l-image rounded force-lm"
+            />
           </div>
         </router-link>
 
-        <div id="bitrate">
+        <div id="bitrate" v-if="track.bitrate">
           <span v-if="track.bitrate > 1500">MASTER</span>
           <span v-else-if="track.bitrate > 330">FLAC</span>
           <span v-else>MP3</span>
@@ -40,8 +44,8 @@
 
 <script setup lang="ts">
 import { putCommas } from "@/utils";
-import { paths } from "../../config";
-import { Track } from "../../interfaces";
+import { paths } from "../../../config";
+import { Track } from "../../../interfaces";
 const imguri = paths.images.thumb;
 
 const props = defineProps<{
diff --git a/src/components/LeftSidebar/nowPlaying.vue b/src/components/LeftSidebar/nowPlaying.vue
index 80851b2a..a3d7074c 100644
--- a/src/components/LeftSidebar/nowPlaying.vue
+++ b/src/components/LeftSidebar/nowPlaying.vue
@@ -10,7 +10,7 @@
     </div>
     <div class="separator no-border"></div>
     <div>
-      <SongCard :track="queue.tracks[queue.current]" />
+      <SongCard :track="queue.currenttrack" />
       <div class="l-track-time">
         <span class="rounded">{{ formatSeconds(queue.duration.current) }}</span
         ><span class="rounded">{{ formatSeconds(queue.duration.full) }}</span>
@@ -36,7 +36,7 @@ import { formatSeconds } from "@/utils";
 
 import HotKeys from "./NP/HotKeys.vue";
 import Progress from "./NP/Progress.vue";
-import SongCard from "./SongCard.vue";
+import SongCard from "./NP/SongCard.vue";
 
 const queue = useQStore();
 const contextStore = useContextStore();
diff --git a/src/composables/perks.ts b/src/composables/perks.ts
index c241778e..eca9a2be 100644
--- a/src/composables/perks.ts
+++ b/src/composables/perks.ts
@@ -1,7 +1,5 @@
 import { RouteLocationNormalized } from "vue-router";
 
-
-
 function getElem(id: string, type: string) {
   switch (type) {
     case "class": {
diff --git a/src/stores/queue.ts b/src/stores/queue.ts
index a0591fc7..fad0cf40 100644
--- a/src/stores/queue.ts
+++ b/src/stores/queue.ts
@@ -1,16 +1,16 @@
 import { defineStore } from "pinia";
 import state from "../composables/state";
-import { useNotifStore, NotifType } from "./notification";
+import { NotifType, useNotifStore } from "./notification";
 
+import { FromOptions } from "../composables/enums";
+import notif from "../composables/mediaNotification";
 import {
-  Track,
-  fromFolder,
   fromAlbum,
+  fromFolder,
   fromPlaylist,
   fromSearch,
+  Track,
 } from "../interfaces";
-import notif from "../composables/mediaNotification";
-import { FromOptions } from "../composables/enums";
 
 function writeQueue(
   from: fromFolder | fromAlbum | fromPlaylist,
@@ -61,13 +61,14 @@ export default defineStore("Queue", {
     prev: 0,
     currentid: "",
     playing: false,
-    from: <From>{},
-    tracks: <Track[]>[defaultTrack],
+    from: {} as From,
+    currenttrack: {} as Track,
+    tracks: [defaultTrack] as Track[],
   }),
   actions: {
     play(index: number = 0) {
-      const track = this.tracks[index];
       this.current = index;
+      const track = this.tracks[index];
       this.currentid = track.trackid;
       const uri = state.settings.uri + "/file/" + track.trackid;
       const elem = document.getElementById("progress");
@@ -165,6 +166,7 @@ export default defineStore("Queue", {
     setCurrent(index: number) {
       const track = this.tracks[index];
 
+      this.currenttrack = track;
       this.current = index;
       this.currentid = track.trackid;
       this.duration.full = track.length;
@@ -250,7 +252,9 @@ export default defineStore("Queue", {
       this.next = 0;
       this.prev = 0;
       this.from = <From>{};
-      console.log(this.current);
+
+      writeQueue(this.from, [defaultTrack] as Track[]);
+      writeCurrent(0);
     },
   },
 });
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 69ca8ce6..a51f3878 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -12,10 +12,7 @@
         />
       </div>
       <FolderList :folders="FStore.dirs" v-if="FStore.dirs.length" />
-      <SongList
-        :tracks="FStore.tracks"
-        :path="FStore.path"
-      />
+      <SongList :tracks="FStore.tracks" :path="FStore.path" />
     </div>
   </div>
 </template>
@@ -79,6 +76,8 @@ onBeforeRouteUpdate((to, from) => {
     position: relative;
     height: max-content;
     height: $banner-height;
+    pointer-events: none;
+    user-select: none;
 
     .text {
       bottom: 1rem;