From 86dfbeb3ba597c8161b668a053deecdc836e2ca7 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Mon, 19 Sep 2022 01:00:16 +0300
Subject: [PATCH] feat: add a cranky scroll to current in queue method

+ fix: media notification image url
---
 src/components/RightSideBar/Queue.vue       |  8 ++++++--
 src/components/RightSideBar/SearchInput.vue |  2 +-
 src/composables/mediaNotification.ts        | 13 +++++++------
 src/stores/queue.ts                         | 15 +++++++++++++++
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index ab8252b6..1846e57c 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/src/components/RightSideBar/Queue.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from "vue";
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
 import { useVirtualList } from "@vueuse/core";
 
 // import { focusElem } from "@/utils";
@@ -53,6 +53,11 @@ const {
 
 onMounted(() => {
   scrollTo(queue.currentindex);
+  queue.setQueueFunction(scrollTo, mouseover);
+});
+
+onBeforeUnmount(() => {
+  queue.setQueueFunction(() => {}, null);
 });
 
 // TODO: Handle focusing current track on song end
@@ -64,7 +69,6 @@ onMounted(() => {
   overflow: auto;
 
   .inner {
-    // scrollbar-color: grey transparent;
     margin-bottom: 1rem;
   }
 }
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index e2a31943..013a120f 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/src/components/RightSideBar/SearchInput.vue
@@ -4,7 +4,7 @@
       <input
         id="globalsearch"
         v-model.trim="search.query"
-        placeholder="Search your library"
+        placeholder="Type to search"
         type="search"
         @blur.prevent="removeFocusedClass"
         @focus.prevent="addFocusedClass"
diff --git a/src/composables/mediaNotification.ts b/src/composables/mediaNotification.ts
index 05fc487c..6fa47620 100644
--- a/src/composables/mediaNotification.ts
+++ b/src/composables/mediaNotification.ts
@@ -6,38 +6,39 @@ export default () => {
   if ("mediaSession" in navigator) {
     const queue = useQueueStore();
     const { currenttrack: track } = queue;
+    const url = paths.images.thumb.large
 
     navigator.mediaSession.metadata = new window.MediaMetadata({
       title: track.title,
       artist: track.artist.join(", "),
       artwork: [
         {
-          src: paths.images.thumb + track.image,
+          src: url + track.image,
           sizes: "96x96",
           type: "image/jpeg",
         },
         {
-          src: paths.images.thumb + track.image,
+          src: url + track.image,
           sizes: "128x128",
           type: "image/webp",
         },
         {
-          src: paths.images.thumb + track.image,
+          src: url + track.image,
           sizes: "192x192",
           type: "image/webp",
         },
         {
-          src: paths.images.thumb + track.image,
+          src: url + track.image,
           sizes: "256x256",
           type: "image/webp",
         },
         {
-          src: paths.images.thumb + track.image,
+          src: url + track.image,
           sizes: "384x384",
           type: "image/webp",
         },
         {
-          src: paths.images.thumb + track.image,
+          src: url + track.image,
           sizes: "512x512",
           type: "image/webp",
         },
diff --git a/src/stores/queue.ts b/src/stores/queue.ts
index 95b273e9..d5ea375f 100644
--- a/src/stores/queue.ts
+++ b/src/stores/queue.ts
@@ -1,3 +1,4 @@
+import { Ref } from "vue";
 import { focusElem } from "@/utils";
 import { paths } from "@/config";
 import { defineStore } from "pinia";
@@ -38,11 +39,18 @@ export default defineStore("Queue", {
     playing: false,
     from: {} as From,
     tracklist: [] as Track[],
+    queueScrollFunction: (index: number) => {},
+    mousover: <Ref | null>null,
   }),
   actions: {
     play(index: number = 0) {
       if (this.tracklist.length === 0) return;
       this.currentindex = index;
+
+      if (!this.mousover) {
+        this.queueScrollFunction(this.currentindex - 1);
+      }
+
       const track = this.tracklist[index];
       this.currentid = track.trackid;
       const uri = `${paths.api.files}/${track.hash}`;
@@ -237,6 +245,13 @@ export default defineStore("Queue", {
     removeFromQueue(index: number = 0) {
       this.tracklist.splice(index, 1);
     },
+    setQueueFunction(
+      cb: (index: number) => void,
+      mousover: Ref<boolean> | null
+    ) {
+      this.queueScrollFunction = cb;
+      this.mousover = mousover;
+    },
   },
   getters: {
     next(): Track {