fix removing tracks from queue

src/components/BottomBar.vue

@@ -3,7 +3,6 @@
     <div class="centered">
       <div class="inner">
         <div class="with-icons rounded-sm border">
-          <!-- <button><PlusSvg /></button> -->
           <RouterLink
             title="go to album"
             :to="{
@@ -26,7 +25,7 @@
           <div class="with-title">
             <div class="time time-current">
               <span>
-                {{ formatSeconds(queue.duration?.current) }}
+                {{ formatSeconds(queue.duration.current || 0) }}
               </span>
             </div>
             <div class="tags">
@@ -58,28 +57,26 @@
           <HotKeys />
         </div>
       </div>
-      <div class=""></div>
+      <div></div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { paths } from "@/config";
-import useQStore from "@/stores/queue";
 import { formatSeconds } from "@/utils";
-
 import { Routes } from "@/composables/enums";
-import useSettingsStore from "@/stores/settings";
 
+
+import useQStore from "@/stores/queue";
+import ArtistName from "@/components/shared/ArtistName.vue";
 import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";
 import Progress from "@/components/LeftSidebar/NP/Progress.vue";
-import ArtistName from "@/components/shared/ArtistName.vue";
 
 import HeartSvg from "@/assets/icons/heart.svg";
 // import PlusSvg from "@/assets/icons/plus.svg";
 
 const queue = useQStore();
-const settings = useSettingsStore();
 </script>
 
 <style lang="scss">

src/components/LeftSidebar/NP/Progress.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import useQStore from "../../../stores/queue";
+import useQStore from "@/stores/queue";
 
 const q = useQStore();
 

src/components/RightSideBar/Queue.vue

@@ -13,10 +13,12 @@
       key-field="id"
       v-slot="{ item, index }"
     >
+    
       <TrackItem
+        :index="index"
         :track="item.track"
-        :isCurrentPlaying="index === queue.currentindex && queue.playing"
         :isCurrent="index === queue.currentindex"
+        :isCurrentPlaying="index === queue.currentindex && queue.playing"
         :isQueueTrack="true"
         @playThis="playFromQueue(index)"
       />

src/components/shared/TrackItem.vue

@@ -11,10 +11,7 @@
     @contextmenu.prevent="showMenu"
   >
     <div class="album-art">
-      <img
-        :src="paths.images.thumb.small + track.image"
-        class="rounded-sm"
-      />
+      <img :src="paths.images.thumb.small + track.image" class="rounded-sm" />
       <div
         class="now-playing-track-indicator image"
         v-if="isCurrent"
@@ -39,7 +36,9 @@
       @click.stop="queue.removeFromQueue(index)"
       v-if="isQueueTrack"
     >
-      <DelSvg />
+      <div title="remove from queue" >
+        <DelSvg/>
+      </div>
     </div>
   </div>
 </template>
@@ -47,7 +46,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import DelSvg from "@/assets/icons/delete.svg";
+import DelSvg from "@/assets/icons/plus.svg";
 import { showTrackContextMenu as showContext } from "@/composables/context";
 import { paths } from "@/config";
 import { Track } from "@/interfaces";
@@ -103,7 +102,7 @@ const playThis = (track: Track) => {
   .remove-track {
     opacity: 0;
     transition: all 0.25s ease;
-    transform: scale(0.75) translateY(1rem);
+    transform: scale(0.75) translateY(1rem) rotate(45deg);
 
     &:hover {
       opacity: 1 !important;
@@ -113,7 +112,7 @@ const playThis = (track: Track) => {
   &:hover {
     .remove-track {
       opacity: 0.5;
-      transform: scale(1) translateY(0);
+      transform: scale(1) translateY(0) rotate(45deg);
     }
 
     background-color: $gray5;

src/stores/queue.ts

@@ -1,3 +1,4 @@
+import { ref } from "@vue/reactivity";
 import { paths } from "@/config";
 import { defineStore } from "pinia";
 import { Ref } from "vue";
@@ -11,7 +12,7 @@ import {
   fromFolder,
   fromPlaylist,
   fromSearch,
-  Track
+  Track,
 } from "../interfaces";
 
 function shuffle(tracks: Track[]) {
@@ -26,6 +27,7 @@ function shuffle(tracks: Track[]) {
 type From = fromFolder | fromAlbum | fromPlaylist | fromSearch;
 
 let audio = new Audio();
+audio.autoplay = false;
 
 export default defineStore("Queue", {
   state: () => ({
@@ -34,7 +36,6 @@ export default defineStore("Queue", {
       full: 0,
     },
     currentindex: 0,
-    currentid: <string | null>"",
     playing: false,
     from: {} as From,
     tracklist: [] as Track[],
@@ -51,13 +52,12 @@ export default defineStore("Queue", {
       }
 
       const track = this.tracklist[index];
-      this.currentid = track.trackid;
-      const uri = `${paths.api.files}/${track.hash}`;
+      const uri = `${paths.api.files}/${track.trackid}-${track.hash}`;
 
       new Promise((resolve, reject) => {
         audio.autoplay = true;
         audio.src = uri;
-        audio.oncanplaythrough = resolve;
+        audio.oncanplay = resolve;
         audio.onerror = reject;
       })
         .then(() => {
@@ -81,7 +81,6 @@ export default defineStore("Queue", {
             "Can't play: " + track.title,
             NotifType.Error
           );
-
           if (this.currentindex !== this.tracklist.length - 1) {
             setTimeout(() => {
               if (!this.playing) return;
@@ -90,22 +89,31 @@ export default defineStore("Queue", {
           }
         });
     },
+    stop() {
+      this.playing = false;
+      audio.src = "";
+      // audio.pause();
+    },
     playPause() {
       if (audio.src === "") {
         this.play(this.currentindex);
+        return;
       }
 
       if (audio.paused) {
+        audio.currentTime === 0 ? this.play(this.currentindex) : null;
         audio.play();
+        this.playing = true;
       } else {
         audio.pause();
+        this.playing = false;
       }
 
-      if (this.playing) {
-        this.playing = false;
-      } else {
-        this.playing = true;
-      }
+      // if (this.playing) {
+      //   this.playing = false;
+      // } else {
+      //   this.playing = true;
+      // }
     },
     playNext() {
       this.play(this.nextindex);
@@ -208,7 +216,6 @@ export default defineStore("Queue", {
     },
     clearQueue() {
       this.tracklist = [] as Track[];
-      this.currentid = "";
       this.currentindex = 0;
       this.from = <From>{};
     },
@@ -220,7 +227,7 @@ export default defineStore("Queue", {
       }
 
       const current = this.currenttrack;
-      const current_hash = current.hash;
+      const current_hash = current?.hash;
 
       this.tracklist = shuffle(this.tracklist);
       // find current track after shuffle
@@ -233,7 +240,7 @@ export default defineStore("Queue", {
         // remove current track from queue
         this.tracklist.splice(newindex, 1);
         // insert current track at beginning of queue
-        this.tracklist.unshift(current);
+        this.tracklist.unshift(current as Track);
         this.currentindex = 0;
         return;
       }
@@ -242,7 +249,23 @@ export default defineStore("Queue", {
       this.play(this.currentindex);
     },
     removeFromQueue(index: number = 0) {
-      this.tracklist.splice(index, 1);
+      if (index === this.currentindex) {
+        const is_last = index === this.tracklist.length - 1;
+        const was_playing = this.playing;
+
+        audio.src = "";
+        this.tracklist.splice(index, 1);
+
+        if (is_last) {
+          this.currentindex = 0;
+        }
+
+        if (was_playing) {
+          this.playPause();
+        }
+      } else {
+        this.tracklist.splice(index, 1);
+      }
     },
     setScrollFunction(
       cb: (index: number) => void,
@@ -253,23 +276,26 @@ export default defineStore("Queue", {
     },
   },
   getters: {
-    next(): Track {
+    next(): Track | undefined {
       if (this.currentindex == this.tracklist.length - 1) {
         return this.tracklist[0];
       } else {
         return this.tracklist[this.currentindex + 1];
       }
     },
-    prev(): Track {
+    prev(): Track | undefined {
       if (this.currentindex === 0) {
         return this.tracklist[this.tracklist.length - 1];
       } else {
         return this.tracklist[this.currentindex - 1];
       }
     },
-    currenttrack(): Track {
+    currenttrack(): Track | undefined {
       return this.tracklist[this.currentindex];
     },
+    currentid(): string {
+      return this.currenttrack?.trackid || "";
+    },
     previndex(): number {
       return this.currentindex === 0
         ? this.tracklist.length - 1

src/utils/useCreateTrackProps.ts

@@ -5,8 +5,8 @@ export default function createTrackProps(track: Track) {
   return {
     track,
     index: track.index + 1,
-    isCurrent: queue().currenttrack?.hash === track.hash,
+    isCurrent: queue().currentid === track.trackid,
     isCurrentPlaying:
-      queue().currenttrack?.hash === track.hash && queue().playing,
+      queue().currentid === track.trackid && queue().playing,
   };
 }

src/views/FolderView.vue

@@ -34,13 +34,13 @@ import { computed } from "@vue/reactivity";
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
 
 import { Track } from "@/interfaces";
-import useQueueStore from "@/stores/queue";
+import { isMedium, isSmall } from "@/stores/content-width";
 import useLoaderStore from "@/stores/loader";
 import useFolderStore from "@/stores/pages/folder";
-import { isSmall, isMedium } from "@/stores/content-width";
+import useQueueStore from "@/stores/queue";
 
-import SongItem from "@/components/shared/SongItem.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
+import SongItem from "@/components/shared/SongItem.vue";
 
 const loader = useLoaderStore();
 const folder = useFolderStore();
@@ -62,9 +62,9 @@ class songItem {
     this.props = {
       track,
       index: track.index + 1,
-      isCurrent: queue.currenttrack?.hash === track.hash,
+      isCurrent: queue.currentid === track.trackid,
       isCurrentPlaying:
-        queue.currenttrack?.hash === track.hash && queue.playing,
+        queue.currentid === track.trackid && queue.playing,
     };
   }
 }

src/views/PlaylistView/index.vue

@@ -36,7 +36,7 @@ const queue = useQueueStore();
 const playlist = usePlaylistStore();
 
 interface ScrollerItem {
-  id: string;
+  id: string | number;
   component: typeof Header | typeof SongItem;
   props: Record<string, unknown>;
   size: number;
@@ -56,7 +56,7 @@ const scrollerItems = computed(() => {
     header,
     ...playlist.tracks.map((track) => {
       return {
-        id: track.trackid,
+        id: Math.random(),
         component: SongItem,
         props: {
           track: track,

src/views/QueueView.vue

@@ -16,9 +16,9 @@
       <SongItem
         :track="item.track"
         :index="index + 1"
-        :isCurrent="queue.currenttrack?.hash === item.track.hash"
+        :isCurrent="queue.currentid === item.trackid"
         :isCurrentPlaying="
-          queue.currenttrack?.hash === item.track.hash && queue.playing
+          queue.currentid === item.trackid && queue.playing
         "
         @playThis="playFromQueue(index)"
       />