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

package.json

@@ -14,6 +14,7 @@
     "@vueuse/components": "^9.2.0",
     "@vueuse/core": "^8.5.0",
     "@vueuse/integrations": "^9.2.0",
+    "vue-virtual-scroller": "^2.0.0-alpha.1",
     "axios": "^0.26.1",
     "fuse.js": "^6.6.2",
     "pinia": "^2.0.17",

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">
+  <div class="playlist-virtual-scroller v-scroll-page">
-    <template #header>
+    <RecycleScroller
-      <Header :info="playlist.info" />
+      class="scroller"
-    </template>
+      :items="scrollerItems"
-  </Layout>
+      :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>

yarn.lock

@@ -1646,6 +1646,11 @@ minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
+mitt@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230"
+  integrity sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==
+
 mkdirp@~0.5.1:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
@@ -2230,6 +2235,16 @@ vue-eslint-parser@^8.0.1:
     lodash "^4.17.21"
     semver "^7.3.5"
 
+vue-observe-visibility@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz#1e4eda7b12562161d58984b7e0dea676d83bdb13"
+  integrity sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==
+
+vue-resize@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
+  integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
+
 vue-router@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.3.tgz#f8dc7931a2253cc5aa9b740f8b98969d08ca283c"
@@ -2253,6 +2268,15 @@ vue-template-compiler@^2.0.0:
     de-indent "^1.0.2"
     he "^1.2.0"
 
+vue-virtual-scroller@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-alpha.1.tgz#5b5410105b8e60ca57bbd5f2faf5ad1d8108d046"
+  integrity sha512-Mn5w3Qe06t7c3Imm2RHD43RACab1CCWplpdgzq+/FWJcpQtcGKd5vDep8i+nIwFtzFLsWAqEK0RzM7KrfAcBng==
+  dependencies:
+    mitt "^2.1.0"
+    vue-observe-visibility "^2.0.0-alpha.1"
+    vue-resize "^2.0.0-alpha.1"
+
 vue@^3.2.37:
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"