feat: add a cranky scroll to current in queue method

+ fix: media notification image url

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;
   }
 }

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"

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",
         },

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 {