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/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>