stabilize track components

src/components/FolderView/SongList.vue

@@ -27,7 +27,7 @@
             : index + 1
         "
         @playThis="updateQueue(track.index !== undefined ? track.index : index)"
-        :isPlaying="queue.playing"
+        :isCurrentPlaying="queue.playing"
         :isCurrent="queue.currentid == track.trackid"
       />
     </div>

src/components/RightSideBar/Queue.vue

@@ -14,7 +14,7 @@
         :key="t.index"
         :track="t.data"
         :index="t.index"
-        :isPlaying="queue.playing"
+        :isCurrentPlaying="t.index === queue.currentindex && queue.playing"
         :isCurrent="t.index === queue.currentindex"
         :isQueueTrack="true"
         @PlayThis="playFromQueue(t.index)"
@@ -24,10 +24,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount } from "vue";
 import { useVirtualList } from "@vueuse/core";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 
-// import { focusElem } from "@/utils";
 import useQStore from "@/stores/queue";
 
 import TrackItem from "../shared/TrackItem.vue";
@@ -53,11 +52,11 @@ const {
 
 onMounted(() => {
   scrollTo(queue.currentindex);
-  queue.setQueueFunction(scrollTo, mouseover);
+  queue.setScrollFunction(scrollTo, mouseover);
 });
 
 onBeforeUnmount(() => {
-  queue.setQueueFunction(() => {}, null);
+  queue.setScrollFunction(() => {}, null);
 });
 
 // TODO: Handle focusing current track on song end

src/components/RightSideBar/Search/TracksGrid.vue

@@ -4,9 +4,9 @@
       <TrackComponent
         v-for="(track, index) in search.tracks.value"
         :key="track.trackid"
-        :isCurrent="queue.currentid == track.trackid"
+        :isCurrent="queue.currentid === track.trackid"
         :isHighlighted="false"
-        :isPlaying="queue.playing"
+        :isCurrentPlaying="queue.currentid === track.trackid && queue.playing"
         :track="track"
         @playThis="updateQueue(index)"
         :index="index + 1"
@@ -20,11 +20,11 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import LoadMore from "./LoadMore.vue";
-import TrackItem from "@/components/shared/TrackItem.vue";
 import SongItem from "@/components/shared/SongItem.vue";
+import TrackItem from "@/components/shared/TrackItem.vue";
 import useQStore from "@/stores/queue";
 import useSearchStore from "@/stores/search";
+import LoadMore from "./LoadMore.vue";
 
 const queue = useQStore();
 const search = useSearchStore();

src/components/shared/SongItem.vue

@@ -22,7 +22,7 @@
         <div
           class="now-playing-track-indicator image"
           v-if="isCurrent"
-          :class="{ last_played: !isPlaying }"
+          :class="{ last_played: !isCurrentPlaying }"
         ></div>
       </div>
       <div v-tooltip class="song-title">
@@ -67,16 +67,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { onUpdated, ref } from "vue";
 
+import { showTrackContextMenu as showContext } from "@/composables/context";
 import { paths } from "@/config";
 import { Track } from "@/interfaces";
 import { formatSeconds } from "@/utils";
-import { showTrackContextMenu as showContext } from "@/composables/context";
 
-import ArtistName from "./ArtistName.vue";
 import HeartSvg from "@/assets/icons/heart.svg";
 import OptionSvg from "@/assets/icons/more.svg";
+import ArtistName from "./ArtistName.vue";
 
 const context_on = ref(false);
 const imguri = paths.images.thumb.small;
@@ -87,8 +87,8 @@ const artisttitle = ref<HTMLElement | null>(null);
 const props = defineProps<{
   track: Track;
   index: number | string;
-  isPlaying: Boolean;
   isCurrent: Boolean;
+  isCurrentPlaying: Boolean;
 }>();
 
 const emit = defineEmits<{
@@ -102,6 +102,10 @@ function emitUpdate(track: Track) {
 function showMenu(e: Event) {
   showContext(e, props.track, options_button_clicked);
 }
+
+onUpdated(() => {
+  console.log(artisttitle.value);
+});
 </script>
 
 <style lang="scss">
@@ -155,7 +159,6 @@ function showMenu(e: Event) {
     width: 100%;
     position: relative;
     height: 3rem;
-    // border: solid 1px;
 
     .text {
       opacity: 1;

src/components/shared/TrackItem.vue

@@ -19,7 +19,7 @@
       <div
         class="now-playing-track-indicator image"
         v-if="isCurrent"
-        :class="{ last_played: !isPlaying }"
+        :class="{ last_played: !isCurrentPlaying }"
       ></div>
     </div>
     <div class="tags">
@@ -54,7 +54,7 @@ import ArtistName from "./ArtistName.vue";
 const props = defineProps<{
   track: Track;
   isCurrent: boolean;
-  isPlaying: boolean;
+  isCurrentPlaying: boolean;
   isQueueTrack?: boolean;
   index?: number;
 }>();

src/layouts/HeaderAndVList.vue

@@ -28,8 +28,8 @@
               ? t.data.index + 1
               : t.index + 1
           "
-          :isPlaying="queue.playing"
+          :isCurrent="queue.currentid === t.data.trackid"
-          :isCurrent="queue.currentid == t.data.trackid"
+          :isCurrentPlaying="queue.currentid === t.data.trackid && queue.playing"
           @playThis="
             updateQueue(t.data.index !== undefined ? t.data.index : t.index)
           "
@@ -40,8 +40,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
 import { useElementSize, useVirtualList } from "@vueuse/core";
+import { computed, ref } from "vue";
 
 import { Track } from "@/interfaces";
 import useQStore from "@/stores/queue";

src/stores/queue.ts

@@ -1,7 +1,6 @@
-import { Ref } from "vue";
-import { focusElem } from "@/utils";
 import { paths } from "@/config";
 import { defineStore } from "pinia";
+import { Ref } from "vue";
 import { NotifType, useNotifStore } from "./notification";
 
 import { FromOptions } from "../composables/enums";
@@ -12,7 +11,7 @@ import {
   fromFolder,
   fromPlaylist,
   fromSearch,
-  Track,
+  Track
 } from "../interfaces";
 
 function shuffle(tracks: Track[]) {
@@ -245,7 +244,7 @@ export default defineStore("Queue", {
     removeFromQueue(index: number = 0) {
       this.tracklist.splice(index, 1);
     },
-    setQueueFunction(
+    setScrollFunction(
       cb: (index: number) => void,
       mousover: Ref<boolean> | null
     ) {