refactor queu store to use play track using index

- this allows to have duplicate tracks in queue safely
- store indexes in localstorage instead of track objects.

src/components/FolderView/SongList.vue

@@ -9,7 +9,7 @@
           :index="track.index"
           @updateQueue="updateQueue"
           :isPlaying="queue.playing"
-          :isCurrent="queue.current.trackid == track.trackid"
+          :isCurrent="queue.currentid == track.trackid"
         />
       </div>
     </div>
@@ -47,18 +47,22 @@ let route = useRoute().name;
  * @param track Track object
  */
 function updateQueue(track: Track) {
+  const index = props.tracks.findIndex(
+    (t: Track) => t.trackid === track.trackid
+  );
+
   switch (route) {
     case "FolderView":
       queue.playFromFolder(props.path, props.tracks);
-      queue.play(track);
+      queue.play(index);
       break;
     case "AlbumView":
       queue.playFromAlbum(track.album, track.albumartist, props.tracks);
-      queue.play(track);
+      queue.play(index);
       break;
     case "PlaylistView":
       queue.playFromPlaylist(props.pname, props.playlistid, props.tracks);
-      queue.play(track);
+      queue.play(index);
       break;
   }
 }

src/components/LeftSidebar/nowPlaying.vue

@@ -10,7 +10,7 @@
     </div>
     <div class="separator no-border"></div>
     <div>
-      <SongCard :track="queue.current" />
+      <SongCard :track="queue.tracks[queue.current]" />
       <Progress />
       <HotKeys />
     </div>
@@ -39,7 +39,11 @@ const showContextMenu = (e: Event) => {
   e.preventDefault();
   e.stopPropagation();
 
-  const menus = trackContext(queue.current, useModalStore, useQueueStore);
+  const menus = trackContext(
+    queue.tracks[queue.current],
+    useModalStore,
+    useQueueStore
+  );
 
   contextStore.showContextMenu(e, menus, ContextSrc.Track);
   context_on.value = true;
@@ -82,7 +86,6 @@ const showContextMenu = (e: Event) => {
 
   .button {
     position: absolute;
-    background-size: 1.5rem;
     top: $small;
     cursor: pointer;
     transition: all 200ms;

src/components/RightSideBar/Home/Main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="r-home">
-    <UpNext :next="queue.next" :playNext="queue.playNext" />
+    <UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
     <Recommendations />
   </div>
 </template>

src/components/RightSideBar/Queue.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <UpNext :next="queue.next" :playNext="queue.playNext" />
+      <UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
       <div class="scrollable-r border rounded">
         <div
           class="inner"
@@ -9,11 +9,11 @@
           @mouseleave="setMouseOver(false)"
         >
           <TrackItem
-            v-for="t in queue.tracks"
+            v-for="(t, index) in queue.tracks"
             :key="t.trackid"
             :track="t"
-            @playThis="queue.play(t)"
-            :isCurrent="t.trackid === queue.current.trackid"
+            @playThis="queue.play(index)"
+            :isCurrent="index === queue.current"
             :isPlaying="queue.playing"
           />
         </div>

src/components/RightSideBar/Search/TracksGrid.vue

@@ -2,13 +2,13 @@
   <div id="tracks-results" v-if="search.tracks.value">
     <TransitionGroup name="list">
       <TrackItem
-        v-for="track in search.tracks.value"
+        v-for="(track, index) in search.tracks.value"
         :key="track.trackid"
         :track="track"
         :isPlaying="queue.playing"
-        :isCurrent="queue.current.trackid == track.trackid"
+        :isCurrent="queue.currentid == track.trackid"
         :isSearchTrack="true"
-        @PlayThis="updateQueue"
+        @PlayThis="updateQueue(index)"
       />
     </TransitionGroup>
     <LoadMore v-if="search.tracks.more" @loadMore="loadMore" />
@@ -30,9 +30,9 @@ function loadMore() {
   search.loadTracks(search.loadCounter.tracks);
 }
 
-function updateQueue(track: Track) {
+function updateQueue(index: number) {
   queue.playFromSearch(search.query, search.tracks.value);
-  queue.play(track);
+  queue.play(index);
 }
 </script>
 

src/components/contextMenu.vue

@@ -139,7 +139,7 @@ const context = useContextStore();
 
       .children {
         transform: scale(1);
-        transition: transform 0.2s ease-in-out;
+        transition: transform 0.1s ease-in-out;
       }
     }
   }

src/components/shared/TrackItem.vue

@@ -74,11 +74,11 @@ const showContextMenu = (e: Event) => {
 };
 
 const emit = defineEmits<{
-  (e: "PlayThis", track: Track): void;
+  (e: "PlayThis"): void;
 }>();
 
 const playThis = (track: Track) => {
-  emit("PlayThis", track);
+  emit("PlayThis");
 };
 </script>