From 76a77823c8ea12ca56f801d88d4852c4c6c3b413 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 21 Sep 2022 12:05:01 +0300
Subject: [PATCH] try virtualList on QueueView

---
 src/interfaces.ts       |   4 +-
 src/views/QueueView.vue | 117 +++++++++++++++++++++++++++++++++++++---
 2 files changed, 111 insertions(+), 10 deletions(-)

diff --git a/src/interfaces.ts b/src/interfaces.ts
index bce4883d..7beaf454 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -13,8 +13,8 @@ export interface Track {
   bitrate?: number;
   genre?: string;
   image: string;
-  track: string;
-  disc: string;
+  track: number;
+  disc: number;
   index: number;
   hash: string;
   copyright?: string;
diff --git a/src/views/QueueView.vue b/src/views/QueueView.vue
index fba273cf..9d94e8e6 100644
--- a/src/views/QueueView.vue
+++ b/src/views/QueueView.vue
@@ -1,32 +1,133 @@
 <template>
   <div class="queue-view">
-    <SongList :tracks="queue.tracklist" @playFromPage="playFromQueuePage" />
+    <div
+      v-bind="containerProps"
+      style="height: calc(100vh - 4.25rem)"
+      :style="{ paddingTop: height - 64 + 16 + 'px' }"
+      @scroll="handleScroll"
+    >
+      <div v-bind="wrapperProps">
+        <div class="header rounded pad-sm" style="height: 64px">
+          <div ref="header" :style="{ top: -height + 64 - 16 + 'px' }">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa
+            facere recusandae dolorem sunt blanditiis natus delectus alias
+            soluta facilis? Asperiores praesentium repellat magni rerum? Ratione
+            reiciendis ut magni laborum itaque! Lorem ipsum dolor sit amet
+            consectetur adipisicing elit. Consequatur, ut. Iure ex nemo sunt.
+            Nostrum, corporis! Asperiores omnis ducimus eum culpa quae nesciunt
+            eius, soluta molestiae delectus quasi labore ipsum! Lorem ipsum
+            dolor sit amet consectetur adipisicing elit. Alias et ducimus
+            consequuntur doloremque voluptate laboriosam, obcaecati eligendi!
+            Mollitia cum, sint fuga facere sit minus modi quaerat quia nisi,
+            earum ut! Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Alias aliquam, sit laboriosam quidem minus ipsam consequatur
+            deleniti architecto accusamus distinctio earum in suscipit eveniet
+            temporibus obcaecati voluptas odit tenetur adipisci?Lorem ipsum
+            dolor sit amet consectetur, adipisicing elit. Culpa facere
+            recusandae dolorem sunt blanditiis natus delectus alias soluta
+            facilis? Asperiores praesentium repellat magni rerum? Ratione
+            reiciendis ut magni laborum itaque! Lorem ipsum dolor sit amet
+            consectetur adipisicing elit. Consequatur, ut. Iure ex nemo sunt.
+            Nostrum, corporis! Asperiores omnis ducimus eum culpa quae nesciunt
+            eius, soluta molestiae delectus quasi labore ipsum! Lorem ipsum
+            dolor sit amet consectetur adipisicing elit. Alias et ducimus
+            consequuntur doloremque voluptate laboriosam, obcaecati eligendi!
+            Mollitia cum, sint fuga facere sit minus modi quaerat quia nisi,
+            earum ut! Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Alias aliquam, sit laboriosam quidem minus ipsam consequatur
+            deleniti architecto accusamus distinctio earum in suscipit eveniet
+            temporibus obcaecati voluptas odit tenetur adipisci?Lorem ipsum
+            dolor sit amet consectetur, adipisicing elit. Culpa facere
+            recusandae dolorem sunt blanditiis natus delectus alias soluta
+            facilis? Asperiores praesentium repellat magni rerum? Ratione
+            reiciendis ut magni laborum itaque! Lorem ipsum dolor sit amet
+            consectetur adipisicing elit. Consequatur, ut. Iure ex nemo sunt.
+            Nostrum, corporis! Asperiores omnis ducimus eum culpa quae nesciunt
+            eius, soluta molestiae delectus quasi labore ipsum! Lorem ipsum
+            dolor sit amet consectetur adipisicing elit. Alias et ducimus
+            consequuntur doloremque voluptate laboriosam, obcaecati eligendi!
+            Mollitia cum, sint fuga facere sit minus modi quaerat quia nisi,
+            earum ut! Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Alias aliquam, sit laboriosam quidem minus ipsam consequatur
+            deleniti architecto accusamus distinctio earum in suscipit eveniet
+            temporibus obcaecati voluptas odit tenetur adipisci?
+          </div>
+        </div>
+        <SongItem
+          style="height: 60px"
+          v-for="(t, index) in tracks"
+          :key="t.data.trackid"
+          :track="t.data"
+          :index="0"
+          :isPlaying="queue.playing"
+          :isCurrent="queue.currentid == t.data.trackid"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from "vue";
+
 import useQStore from "@/stores/queue";
 import { focusElem } from "@/utils";
 import SongList from "@/components/FolderView/SongList.vue";
 import { onMounted } from "vue";
+import SongItem from "@/components/shared/SongItem.vue";
+import { useVirtualList } from "@vueuse/core";
 
 const queue = useQStore();
+const height = ref(330);
 
 function playFromQueuePage(index: number) {
   queue.play(index);
 }
 
+const header = ref<HTMLElement>();
 onMounted(() => {
-  setTimeout(() => {
-    focusElem("current");
-  }, 1000);
+  height.value = header.value.offsetHeight;
+  console.log(height.value);
+  // height.value = 370;
+});
+const source = computed(() => queue.tracklist);
+function handleScroll(e: Event) {
+  // check if header is visible
+  const headerHeight = header.value?.offsetHeight || 0;
+  const scrollTop = (e.target as HTMLElement).scrollTop;
+
+  if (scrollTop > headerHeight) {
+    // console.log("header is not visible");
+    header.value.style.opacity = "0";
+  } else {
+    // console.log("header is visible");
+    header.value.style.opacity = "1";
+  }
+}
+
+const {
+  list: tracks,
+  containerProps,
+  wrapperProps,
+  scrollTo,
+} = useVirtualList(source, {
+  itemHeight: 60,
+  overscan: 15,
 });
 </script>
 
-<!-- <style lang="scss">
+<style lang="scss">
 .queue-view {
-  .table {
-    margin-top: -1rem;
+  .header {
+    // background-color: $gray3;
+    // margin-bottom: 2rem;
+    position: relative;
+    overflow: visible;
+
+    div {
+      position: absolute;
+      top: -25rem;
+    }
   }
 }
-</style> -->
+</style>