feat: store current track object to enable clear queue to work correctly

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 { paths } from "../../../config";
-import { Track } from "../../interfaces";
+import { Track } from "../../../interfaces";
 const imguri = paths.images.thumb;
 
 const props = defineProps<{

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();

src/composables/perks.ts

@@ -1,7 +1,5 @@
 import { RouteLocationNormalized } from "vue-router";
 
-
-
 function getElem(id: string, type: string) {
   switch (type) {
     case "class": {

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>{},
+    from: {} as From,
-    tracks: <Track[]>[defaultTrack],
+    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);
     },
   },
 });

src/views/FolderView.vue

@@ -12,10 +12,7 @@
         />
       </div>
       <FolderList :folders="FStore.dirs" v-if="FStore.dirs.length" />
-      <SongList
+      <SongList :tracks="FStore.tracks" :path="FStore.path" />
-        :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;