add bottom padding to v-scroll-page class instead of individual pages

+ Rewrite queue page with  @Akryum/vue-virtual-scroller

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

@@ -93,6 +93,7 @@ $g-border: solid 1px $gray5;
     height: 100%;
     width: 100%;
     padding-right: $small !important;
+    padding-bottom: $content-padding-bottom;
   }
 }
 

src/components/RightSideBar/Queue.vue

@@ -2,7 +2,6 @@
   <QueueActions />
   <div
     class="queue-virtual-scroller"
-    style="height: 100%"
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
   >
@@ -39,8 +38,8 @@ const mouseover = ref(false);
 
 const scrollerItems = computed(() => {
   return queue.tracklist.map((track) => ({
+    track,
     id: Math.random(),
-    track: track,
   }));
 });
 

src/components/shared/SongItem.vue

@@ -100,8 +100,6 @@ function showMenu(e: Event) {
 </script>
 
 <style lang="scss">
-
-
 .songlist-item {
   display: grid;
   grid-template-columns: 1.5rem 2fr 1fr 1.5fr 2.5rem 2.5rem;
@@ -233,4 +231,8 @@ function showMenu(e: Event) {
     border-radius: 0 $small $small 0;
   }
 }
+
+.songlist-item.current {
+  background-color: $gray;
+}
 </style>

src/views/AlbumView/Content.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="album-tracks rounded">
-    <div v-for="(disc, key) in discs" class="album-disc">
-      <SongList
-        :key="key"
-        :tracks="disc"
-        :on_album_page="true"
-        :disc="key"
-        :copyright="isLastDisc(key) ? copyright : null"
-        @playFromPage="playFromAlbumPage"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-// @stores
-import useQueueStore from "@/stores/queue";
-import useAlbumStore from "@/stores/pages/album";
-
-// @utils
-import { Track } from "@/interfaces";
-
-// @components
-import SongList from "@/components/FolderView/SongList.vue";
-
-// @setup
-
-const props = defineProps<{
-  discs: {
-    [key: string]: Track[];
-  };
-  copyright?: string;
-}>();
-
-const queue = useQueueStore();
-const album = useAlbumStore();
-
-// check if the disc is the last disc
-const isLastDisc = (disc: string | number) => {
-  const discs = Object.keys(props.discs);
-  return discs[discs.length - 1] === disc;
-};
-
-function playFromAlbumPage(index: number) {
-  const { title, artist, hash } = album.info;
-  queue.playFromAlbum(title, artist, hash, album.allTracks);
-  queue.play(index);
-}
-</script>
-
-<style lang="scss">
-.album-tracks {
-  display: grid;
-  gap: 1rem;
-}
-</style>

src/views/AlbumView/index.vue

@@ -21,9 +21,9 @@
 <script setup lang="ts">
 import { computed } from "@vue/reactivity";
 import {
-onBeforeRouteLeave,
+  onBeforeRouteLeave,
-onBeforeRouteUpdate,
+  onBeforeRouteUpdate,
-RouteLocationNormalized
+  RouteLocationNormalized,
 } from "vue-router";
 
 import { Track } from "@/interfaces";
@@ -104,10 +104,6 @@ onBeforeRouteLeave(() => {
 .album-virtual-scroller {
   height: 100%;
 
-  .scroller {
-    padding-bottom: $content-padding-bottom;
-  }
-
   .songlist-item {
     grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem 2.5rem;
   }

src/views/FolderView.vue

@@ -1,9 +1,14 @@
 <template>
-  <div class="folder-view v-scroll-page" :class="{ isSmall, isMedium }">
+  <div
+    class="folder-view v-scroll-page"
+    style="height: 100%"
+    :class="{ isSmall, isMedium }"
+  >
     <DynamicScroller
       :items="scrollerItems"
       :min-item-size="64"
       class="scroller"
+      style="height: 100%"
     >
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem
@@ -106,14 +111,3 @@ onBeforeRouteLeave(() => {
   setTimeout(() => folder.resetQuery(), 500);
 });
 </script>
-
-<style lang="scss">
-.folder-view {
-  height: 100%;
-
-  .scroller {
-    height: 100%;
-    padding-bottom: $content-padding-bottom !important;
-  }
-}
-</style>

src/views/PlaylistView/index.vue

@@ -2,6 +2,7 @@
   <div
     class="playlist-virtual-scroller v-scroll-page"
     :class="{ isSmall, isMedium }"
+    style="height: 100%"
   >
     <RecycleScroller
       class="scroller"
@@ -9,6 +10,7 @@
       :item-size="null"
       key-field="id"
       v-slot="{ item }"
+      style="height: 100%"
     >
       <component
         :is="item.component"
@@ -80,16 +82,3 @@ onBeforeRouteLeave(() => {
   }, 500);
 });
 </script>
-
-<style lang="scss">
-.playlist-virtual-scroller {
-  height: 100%;
-  width: 100%;
-
-  .scroller {
-    height: 100%;
-    width: 100%;
-    padding-bottom: $content-padding-bottom;
-  }
-}
-</style>

src/views/QueueView.vue

@@ -1,29 +1,60 @@
 <template>
-  <div class="queue-view" style="height: 100%">
+  <div
-    <Layout
+    class="queue-view-virtual-scroller v-scroll-page"
-      :tracks="queue.tracklist"
+    :class="{ isSmall, isMedium }"
-      :no_header="true"
+    style="height: 100%"
-      @playFromPage="playFromQueue"
+  >
+    <RecycleScroller
+      class="scroller"
+      id="queue-page-scrollable"
+      style="height: 100%"
+      :items="scrollerItems"
+      :item-size="itemHeight"
+      key-field="id"
+      v-slot="{ item, index }"
     >
-    </Layout>
+      <SongItem
+        :track="item.track"
+        :index="index + 1"
+        :isCurrent="queue.currenttrack?.hash === item.track.hash"
+        :isCurrentPlaying="
+          queue.currenttrack?.hash === item.track.hash && queue.playing
+        "
+        @playThis="playFromQueue(index)"
+      />
+    </RecycleScroller>
   </div>
 </template>
 
 <script setup lang="ts">
-import useQStore from "@/stores/queue";
+import { computed, onMounted } from "vue";
-import Layout from "@/layouts/HeaderAndVList.vue";
-import { onBeforeMount, onMounted } from "vue";
 
+import useQStore from "@/stores/queue";
+import { createTrackProps } from "@/utils";
+import SongItem from "@/components/shared/SongItem.vue";
+import { isSmall, isMedium } from "@/stores/content-width";
+
+const itemHeight = 64;
 const queue = useQStore();
 
+const scrollerItems = computed(() => {
+  return queue.tracklist.map((track) => {
+    return {
+      track,
+      id: Math.random(),
+      props: createTrackProps(track),
+    };
+  });
+});
+
 function playFromQueue(index: number) {
   queue.play(index);
 }
 
 function scrollToCurrent() {
-  const scrollable = document.getElementById("v-page-scrollable");
+  const scrollable = document.getElementById("queue-page-scrollable");
   const itemHeight = 64;
-  const top = queue.currentindex * itemHeight - 290;
+  const top = queue.currentindex * itemHeight - itemHeight;
 
   scrollable?.scrollTo({
     top,
@@ -31,9 +62,17 @@ function scrollToCurrent() {
   });
 }
 
-onBeforeMount(() => {
+onMounted(() => {
   setTimeout(() => {
     scrollToCurrent();
   }, 1000);
 });
 </script>
+
+<style lang="scss">
+.queue-view-virtual-scroller {
+  .songlist-item.current {
+    background-color: $darkestblue !important;
+  }
+}
+</style>