rewrite playlist page with @Akryum/vue-virtual-scroller

src/assets/scss/Global/app-grid.scss

@@ -54,6 +54,16 @@ $g-border: solid 1px $gray5;
   padding-right: calc(1rem - $small + 2px);
 }
 
+.v-scroll-page {
+  width: calc(100% + $medium) !important;
+
+  .scroller {
+    height: 100%;
+    width: 100%;
+    padding-right: $small !important;
+  }
+}
+
 // ====== MODIFIERS =======
 
 #app-grid.extendWidth {

src/assets/scss/moz.scss

@@ -21,6 +21,16 @@
     }
   }
 
+  .v-scroll-page {
+    width: calc(100% + 1rem) !important;
+
+    .scroller {
+      height: 100%;
+      width: 100%;
+      padding-right: 1rem !important;
+    }
+  }
+
   #app-grid.noSidebar > #acontent {
     padding-right: 1rem !important;
   }

src/main.ts

@@ -1,8 +1,13 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+
+// @ts-ignore
+import { RecycleScroller } from "vue-virtual-scroller";
 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";
@@ -16,5 +21,6 @@ app.use(pinia);
 app.use(router);
 app.directive("tooltip", vTooltip);
 app.use(autoAnimatePlugin);
+app.component("RecycleScroller", RecycleScroller)
 
 app.mount("#app");

src/views/PlaylistView/index.vue

@@ -1,23 +1,69 @@
 <template>
-  <Layout :tracks="playlist.tracks" @playFromPage="playFromPlaylistPage">
-    <template #header>
-      <Header :info="playlist.info" />
-    </template>
-  </Layout>
+  <div class="playlist-virtual-scroller v-scroll-page">
+    <RecycleScroller
+      class="scroller"
+      :items="scrollerItems"
+      :item-size="null"
+      key-field="id"
+      v-slot="{ item }"
+    >
+      <component
+        :is="item.component"
+        v-bind="item.props"
+        @playThis="playFromPlaylistPage(item.props.index - 1)"
+      />
+    </RecycleScroller>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from "@vue/reactivity";
 import { onBeforeRouteLeave } from "vue-router";
 
 import useQueueStore from "@/stores/queue";
 import usePlaylistStore from "@/stores/pages/playlist";
 
-import Layout from "@/layouts/HeaderAndVList.vue";
 import Header from "@/components/PlaylistView/Header.vue";
+import SongItem from "@/components/shared/SongItem.vue";
 
 const queue = useQueueStore();
 const playlist = usePlaylistStore();
 
+interface ScrollerItem {
+  id: string;
+  component: typeof Header | typeof SongItem;
+  props: Record<string, unknown>;
+  size: number;
+}
+
+const header: ScrollerItem = {
+  id: "header",
+  component: Header,
+  props: {
+    info: playlist.info,
+  },
+  size: 19 * 16,
+};
+
+const scrollerItems = computed(() => {
+  return [
+    header,
+    ...playlist.tracks.map((track) => {
+      return {
+        id: track.trackid,
+        component: SongItem,
+        props: {
+          track: track,
+          index: track.index + 1,
+          isCurrent: queue.currentid === track.trackid,
+          isCurrentPlaying: queue.currentid === track.trackid && queue.playing,
+        },
+        size: 64,
+      };
+    }),
+  ];
+});
+
 function playFromPlaylistPage(index: number) {
   const { name, playlistid } = playlist.info;
   queue.playFromPlaylist(name, playlistid, playlist.allTracks);
@@ -30,3 +76,16 @@ onBeforeRouteLeave(() => {
   }, 500);
 });
 </script>
+
+<style lang="scss">
+.playlist-virtual-scroller {
+  height: 100%;
+  width: 100%;
+  
+  .scroller {
+    height: 100%;
+    width: 100%;
+    padding-bottom: 4rem;
+  }
+}
+</style>