use virtual scroll page layout in album page

src/layouts/HeaderAndVList.vue

@@ -7,7 +7,7 @@
       @scroll="handleScroll"
     >
       <div v-bind="wrapperProps">
-        <div class="header rounded pad-sm" style="height: 64px">
+        <div class="header rounded" style="height: 64px">
           <div
             ref="header"
             :style="{ top: -headerHeight + 64 - 16 + 'px' }"
@@ -18,12 +18,21 @@
         </div>
         <SongItem
           style="height: 60px"
-          v-for="(t, index) in tracks"
+          v-for="t in tracks"
           :key="t.data.trackid"
           :track="t.data"
-          :index="0"
+          :index="
+            on_album_page
+              ? t.data.track
+              : t.data.index !== undefined
+              ? t.data.index + 1
+              : t.index + 1
+          "
           :isPlaying="queue.playing"
           :isCurrent="queue.currentid == t.data.trackid"
+          @playThis="
+            updateQueue(t.data.index !== undefined ? t.data.index : t.index)
+          "
         />
       </div>
     </div>
@@ -40,6 +49,11 @@ import SongItem from "@/components/shared/SongItem.vue";
 
 const props = defineProps<{
   tracks: Track[];
+  on_album_page?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "playFromPage", index: number): void;
 }>();
 
 const queue = useQStore();
@@ -56,6 +70,10 @@ const {
   overscan: 15,
 });
 
+function updateQueue(index: number) {
+  emit("playFromPage", index);
+}
+
 function handleScroll(e: Event) {
   const scrollTop = (e.target as HTMLElement).scrollTop;
 
@@ -74,6 +92,7 @@ function handleScroll(e: Event) {
 
     .header-content {
       position: absolute;
+      width: 100%;
     }
   }
 }

src/views/QueueView.vue

@@ -50,7 +50,7 @@ const source = computed(() => queue.tracklist);
 // import { focusElem } from "@/utils";
 </script>
 
-<style lang="scss">
+<!-- <style lang="scss">
 .queue-view {
 }
-</style>
+</style> -->

src/views/album/index.vue

@@ -1,12 +1,9 @@
 <template>
-  <Page>
+  <Layout :tracks="album.tracks" @playFromPage="playFromAlbum">
     <template #header>
       <Header :album="album.info" :bio="album.bio" />
     </template>
-    <template #content>
+  </Layout>
-      <Content :discs="album.discs" :copyright="album.info.copyright" />
-    </template>
-  </Page>
 </template>
 
 <script setup lang="ts">
@@ -18,10 +15,11 @@ import {
 } from "vue-router";
 
 import Header from "./Header.vue";
-import Content from "./Content.vue";
+import Layout from "@/layouts/HeaderAndVList.vue";
-import Page from "@/layouts/HeaderContentBottom.vue";
+import useQueueStore from "@/stores/queue";
 
 const album = useAStore();
+const queue = useQueueStore();
 
 onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
   await album
@@ -34,4 +32,10 @@ onBeforeRouteLeave(() => {
     album.resetQuery();
   }, 500);
 });
+
+function playFromAlbum(index: number) {
+  const { title, artist, hash } = album.info;
+  queue.playFromAlbum(title, artist, hash, album.allTracks);
+  queue.play(index);
+}
 </script>