From 021cdb4ec5fdd44d43bafd637baf1cdaefbf1e5b Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sun, 18 Sep 2022 23:42:21 +0300
Subject: [PATCH] feat: use @vueuse/useVirtualList on sidebar queue

---
 src/components/RightSideBar/Queue.vue | 39 ++++++++++++++++++---------
 src/components/shared/TrackItem.vue   | 10 ++++---
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index 65101dd1..dccce504 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/src/components/RightSideBar/Queue.vue
@@ -2,18 +2,20 @@
   <QueueActions />
   <div
     class="scrollable-r"
+    v-bind="containerProps"
+    style="height: 100%"
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
   >
-    <div class="inner">
+    <div class="inner" v-bind="wrapperProps">
       <TrackItem
-        v-for="(t, index) in queue.tracklist"
-        :key="index"
-        :track="t"
+        style="height: 64px"
+        v-for="(t, index) in tracks"
+        :key="t.index"
+        :track="t.data"
         :index="index"
         :isPlaying="queue.playing"
-        :isHighlighted="false"
-        :isCurrent="index === queue.currentindex"
+        :isCurrent="t.index === queue.currentindex"
         :isQueueTrack="true"
         @PlayThis="playFromQueue(index)"
       />
@@ -22,10 +24,11 @@
 </template>
 
 <script setup lang="ts">
-import { onUpdated, ref } from "vue";
+import { computed, ref, onMounted } from "vue";
+import { useVirtualList } from "@vueuse/core";
 
+// import { focusElem } from "@/utils";
 import useQStore from "@/stores/queue";
-import { focusElem } from "@/utils";
 
 import TrackItem from "../shared/TrackItem.vue";
 import QueueActions from "./Queue/QueueActions.vue";
@@ -37,13 +40,23 @@ function playFromQueue(index: number) {
   queue.play(index);
 }
 
-onUpdated(() => {
-  if (mouseover.value) return;
+const source = computed(() => queue.tracklist);
 
-  setTimeout(() => {
-    focusElem("currentInQueue");
-  }, 1000);
+const {
+  list: tracks,
+  containerProps,
+  wrapperProps,
+  scrollTo,
+} = useVirtualList(source, {
+  itemHeight: 64,
+  overscan: 10,
 });
+
+onMounted(() => {
+  scrollTo(queue.currentindex);
+});
+
+// TODO: Handle focusing current track on song end
 </script>
 
 <style lang="scss">
diff --git a/src/components/shared/TrackItem.vue b/src/components/shared/TrackItem.vue
index 2b009185..d9e92412 100644
--- a/src/components/shared/TrackItem.vue
+++ b/src/components/shared/TrackItem.vue
@@ -11,7 +11,11 @@
     @contextmenu.prevent="showMenu"
   >
     <div class="album-art">
-      <img :src="paths.images.thumb.small + track.image" alt="" class="rounded-sm" />
+      <img
+        :src="paths.images.thumb.small + track.image"
+        alt=""
+        class="rounded-sm"
+      />
       <div
         class="now-playing-track-indicator image"
         v-if="isCurrent"
@@ -73,7 +77,7 @@ const playThis = (track: Track) => {
 
 <style lang="scss">
 .currentInQueue {
-  background: linear-gradient(37deg, $gray4, $gray3, $gray3);
+  background-color: $gray4;
 }
 
 .contexton {
@@ -109,7 +113,7 @@ const playThis = (track: Track) => {
       transform: scale(1) translateY(0);
     }
 
-    background: linear-gradient(37deg, $gray4, $gray3, $gray3);
+    background-color: $gray5;
   }
 
   hr {