fix slow folder page

~ stabilize props: move isCurrent check to inside SongItem component

src/components/ArtistView/TopTracks.vue

@@ -6,8 +6,6 @@
         v-for="(song, index) in artist.tracks"
         :track="song"
         :index="index + 1"
-        :isCurrent="false"
-        :isCurrentPlaying="false"
       />
     </div>
     <div class="error" v-if="!artist.tracks.length">No tracks</div>

src/components/FolderView/SongList.vue

@@ -27,8 +27,6 @@
             : index + 1
         "
         @playThis="updateQueue(track.index !== undefined ? track.index : index)"
-        :isCurrentPlaying="queue.playing"
-        :isCurrent="queue.currenttrackhash == track.trackhash"
       />
     </div>
     <div class="copyright" v-if="copyright && copyright">

src/components/shared/SongItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="songlist-item rounded-sm"
-    :class="[{ current: isCurrent }, { contexton: context_menu_showing }]"
+    :class="[{ current: isCurrent() }, { contexton: context_menu_showing }]"
     @dblclick.prevent="emitUpdate"
     @contextmenu.prevent="showMenu"
   >
@@ -16,20 +16,16 @@
         <img :src="imguri + track.image" class="album-art image rounded-sm" />
         <div
           class="now-playing-track-indicator image"
-          v-if="isCurrent"
+          v-if="isCurrent()"
-          :class="{ last_played: !isCurrentPlaying }"
+          :class="{ last_played: !isCurrentPlaying() }"
         ></div>
       </div>
       <div v-tooltip class="song-title">
-        <div class="with-flag">
+        <div class="with-flag" @click.prevent="emitUpdate">
-          <span
+          <span class="title ellip" ref="artisttitle">
-            class="title ellip"
-            @click.prevent="emitUpdate"
-            ref="artisttitle"
-          >
             {{ track.title }}
           </span>
-          <span v-if="(track.bitrate > 1024)" class="master-flag"><b>M</b> </span>
+          <span v-if="track.bitrate > 1024" class="master-flag"><b>M</b> </span>
         </div>
         <div class="isSmallArtists" style="display: none">
           <ArtistName
@@ -78,16 +74,17 @@ import HeartSvg from "@/assets/icons/heart.svg";
 import OptionSvg from "@/assets/icons/more.svg";
 import ArtistName from "./ArtistName.vue";
 
+import useQueueStore from "@/stores/queue";
+
 const imguri = paths.images.thumb.small;
 const context_menu_showing = ref(false);
+const queue = useQueueStore();
 
 const artisttitle = ref<HTMLElement | null>(null);
 
 const props = defineProps<{
   track: Track;
   index: Number | String;
-  isCurrent: Boolean;
-  isCurrentPlaying: Boolean;
   hide_album?: Boolean;
 }>();
 
@@ -102,6 +99,14 @@ function emitUpdate() {
 function showMenu(e: MouseEvent) {
   showContext(e, props.track, context_menu_showing);
 }
+
+function isCurrent() {
+  return queue.currenttrackhash == props.track.trackhash;
+}
+
+function isCurrentPlaying() {
+  return isCurrent() && queue.playing;
+}
 </script>
 
 <style lang="scss">
@@ -128,7 +133,7 @@ function showMenu(e: MouseEvent) {
       color: rgb(255, 153, 0);
       padding: 2px 5px;
       border-radius: 5px;
-      opacity: .75;
+      opacity: 0.75;
     }
 
     cursor: pointer;

src/layouts/HeaderAndVList.vue

@@ -50,10 +50,6 @@
                 ? t.data.index + 1
                 : t.index + 1
             "
-            :isCurrent="queue.currenttrackhash === t.data.trackhash"
-            :isCurrentPlaying="
-              queue.currenttrackhash === t.data.trackhash && queue.playing
-            "
             @playThis="
               updateQueue(
                 t.data.index !== undefined

src/utils/useCreateTrackProps.ts

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

src/views/FolderView.vue

@@ -41,6 +41,7 @@ import useQueueStore from "@/stores/queue";
 
 import FolderList from "@/components/FolderView/FolderList.vue";
 import SongItem from "@/components/shared/SongItem.vue";
+import { createTrackProps } from "@/utils";
 
 const loader = useLoaderStore();
 const folder = useFolderStore();
@@ -59,13 +60,7 @@ class songItem {
 
   constructor(track: Track) {
     this.id = Math.random();
-    this.props = {
+    this.props = createTrackProps(track)
-      track,
-      index: track.index + 1,
-      isCurrent: queue.currenttrackhash === track.trackhash,
-      isCurrentPlaying:
-        queue.currenttrackhash === track.trackhash && queue.playing,
-    };
   }
 }
 

src/views/PlaylistView/index.vue

@@ -38,7 +38,6 @@ const playlist = usePlaylistStore();
 interface ScrollerItem {
   id: string | number;
   component: typeof Header | typeof SongItem;
-  // props: Record<string, unknown>;
   size: number;
 }
 
@@ -58,8 +57,6 @@ const scrollerItems = computed(() => {
         props: {
           track: track,
           index: track.index + 1,
-          isCurrent: queue.currenttrackhash === track.trackhash,
-          isCurrentPlaying: queue.currenttrackhash === track.trackhash && queue.playing,
         },
         size: 64,
       };

src/views/QueueView.vue

@@ -16,10 +16,6 @@
       <SongItem
         :track="item.track"
         :index="index + 1"
-        :isCurrent="queue.currenttrackhash === item.track.trackhash"
-        :isCurrentPlaying="
-          queue.currenttrackhash === item.track.trackhash && queue.playing
-        "
         @playThis="playFromQueue(index)"
       />
     </RecycleScroller>