rewrite album view using @Akryum/vue-virtual-scroller

src/main.ts

@@ -11,21 +11,23 @@ import {
 import { autoAnimatePlugin } from "@formkit/auto-animate/vue";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 
-import "./assets/scss/index.scss";
-import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 
 import App from "./App.vue";
 import router from "./router";
 import vTooltip from "./directives/vTooltip";
 
+import "./assets/scss/index.scss";
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+
 const app = createApp(App);
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
 
 app.use(pinia);
 app.use(router);
-app.directive("tooltip", vTooltip);
 app.use(autoAnimatePlugin);
+
+app.directive("tooltip", vTooltip);
 app.component("RecycleScroller", RecycleScroller);
 app.component("DynamicScroller", DynamicScroller);
 app.component("DynamicScrollerItem", DynamicScrollerItem);

src/utils/index.ts

@@ -5,6 +5,7 @@ import useFuse from "./useFuse";
 import { readLocalStorage, writeLocalStorage } from "./useLocalStorage";
 import putCommas from "./usePutCommas";
 import useVisibility from "./useVisibility";
+import useCreateTrackProps from "./useCreateTrackProps";
 
 export {
     readLocalStorage,
@@ -13,6 +14,7 @@ export {
     focusElemByClass,
     useVisibility,
     formatSeconds,
+    useCreateTrackProps as createTrackProps,
     putCommas,
     useFuse,
 };

src/utils/useCreateTrackProps.ts

@@ -0,0 +1,12 @@
+import { Track } from "@/interfaces";
+import queue from "@/stores/queue";
+
+export default function createTrackProps(track: Track) {
+  return {
+    track,
+    index: track.index + 1,
+    isCurrent: queue().currenttrack?.hash === track.hash,
+    isCurrentPlaying:
+      queue().currenttrack?.hash === track.hash && queue().playing,
+  };
+}

src/views/AlbumView/index.vue

@@ -1,43 +1,89 @@
 <template>
-  <Layout
+  <div class="album-virtual-scroller v-scroll-page">
-    :tracks="album.tracks"
+    <RecycleScroller
-    @playFromPage="playFromAlbum"
+      class="scroller"
-    :on_album_page="true"
+      :items="scrollerItems"
+      :item-size="null"
+      key-field="id"
+      v-slot="{ item }"
     >
-    <template #header>
+      <component
-      <Header :album="album.info" />
+        :is="item.component"
-    </template>
+        v-bind="item.props"
-  </Layout>
+        @playThis="playFromAlbum(item.props.index - item.props.track.disc - 1)"
+      />
+    </RecycleScroller>
+  </div>
 </template>
 
 <script setup lang="ts">
-// @libs
 import {
   onBeforeRouteLeave,
   onBeforeRouteUpdate,
   RouteLocationNormalized,
 } from "vue-router";
+import { computed } from "@vue/reactivity";
+
+import { Track } from "@/interfaces";
+import { createTrackProps } from "@/utils";
 
-// @stores
 import useQueueStore from "@/stores/queue";
-import useAStore from "@/stores/pages/album";
+import useAlbumStore from "@/stores/pages/album";
 
-// @components
 import Header from "@/components/AlbumView/Header.vue";
-import Layout from "@/layouts/HeaderAndVList.vue";
+import SongItem from "@/components/shared/SongItem.vue";
+import AlbumDiscBar from "@/components/AlbumView/AlbumDiscBar.vue";
 
-// @vars
+const album = useAlbumStore();
-const album = useAStore();
 const queue = useQueueStore();
 
-// @methods
+interface ScrollerItem {
+  id: string;
+  component: typeof Header | typeof SongItem;
+  props: Record<string, unknown>;
+  size: number;
+}
+
+class songItem {
+  id: number;
+  props = {};
+  size = 64;
+  component: typeof SongItem | typeof AlbumDiscBar;
+
+  constructor(track: Track) {
+    this.id = Math.random();
+    this.props = track.is_album_disc_number
+      ? { album_disc: track }
+      : createTrackProps(track);
+    this.component = track.is_album_disc_number ? AlbumDiscBar : SongItem;
+  }
+}
+
+function getSongItems() {
+  return album.tracks.map((track) => {
+    return new songItem(track);
+  });
+}
+
+const scrollerItems = computed(() => {
+  const header: ScrollerItem = {
+    id: "album-header",
+    component: Header,
+    props: {
+      album: album.info,
+    },
+    size: 18 * 16,
+  };
+
+  return [header, ...getSongItems()];
+});
+
 function playFromAlbum(index: number) {
   const { title, artist, hash } = album.info;
   queue.playFromAlbum(title, artist, hash, album.allTracks);
   queue.play(index);
 }
 
-// @hooks
 onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
   await album
     .fetchTracksAndArtists(to.params.hash.toString())
@@ -50,3 +96,12 @@ onBeforeRouteLeave(() => {
   }, 500);
 });
 </script>
+
+<style lang="scss">
+.album-virtual-scroller {
+  height: 100%;
+  .scroller {
+    padding-bottom: $content-padding-bottom;
+  }
+}
+</style>

src/views/FolderView.vue

@@ -48,8 +48,8 @@ interface ScrollerItem {
 
 class songItem {
   id: string;
-  component = SongItem;
   props: any;
+  component = SongItem;
 
   constructor(track: Track) {
     this.id = track.trackid;