feat: scroll queue if mouse if not over the area

src/assets/css/global.scss

@@ -98,7 +98,7 @@ a {
 .l-sidebar {
   width: 17rem;
   grid-area: l-sidebar;
-  background-color: $gray;
+  background-color: $black;
   margin: $small;
   padding: 1rem;
 }

src/components/RightSideBar/Queue.vue

@@ -2,12 +2,16 @@
   <div class="up-next">
     <div class="r-grid">
       <UpNext :next="queue.next" :playNext="queue.playNext" />
-      <div class="scrollable-r border rounded">
+      <div
+        class="scrollable-r border rounded"
+        @mouseenter="setMouseOver(true)"
+        @mouseleave="setMouseOver(false)"
+      >
         <TrackItem
           v-for="t in queue.tracks"
           :key="t.trackid"
           :track="t"
-          @playThis="playThis"
+          @playThis="queue.play(t)"
           :isCurrent="t.trackid === queue.current.trackid"
           :isPlaying="queue.playing"
         />
@@ -20,15 +24,23 @@
 <script setup lang="ts">
 import TrackItem from "../shared/TrackItem.vue";
 import useQStore from "../../stores/queue";
-import { Track } from "../../interfaces.js";
 import PlayingFrom from "./queue/playingFrom.vue";
 import UpNext from "./queue/upNext.vue";
+import { onUpdated, ref } from "vue";
+import { focusElem } from "@/composables/perks";
 
 const queue = useQStore();
+const mouseover = ref(false);
 
-function playThis(track: Track) {
+function setMouseOver(val: boolean) {
-  queue.play(track);
+  mouseover.value = val;
 }
+
+onUpdated(() => {
+  if (mouseover.value) return;
+
+  focusElem("currentInQueue");
+});
 </script>
 
 <style lang="scss">

src/composables/perks.ts

@@ -14,7 +14,6 @@ const putCommas = (artists: string[]) => {
 
 function focusElem(className: string, delay?: number) {
   const dom = document.getElementsByClassName(className)[0];
-  if (!delay) delay = 300;
 
   setTimeout(() => {
     if (dom) {
@@ -24,7 +23,7 @@ function focusElem(className: string, delay?: number) {
         inline: "center",
       });
     }
-  }, delay);
+  }, delay | 300);
 }
 
 function getElem(id: string, type: string) {

src/stores/queue.ts

@@ -66,13 +66,13 @@ export default defineStore("Queue", {
       this.updateCurrent(track);
 
       new Promise((resolve, reject) => {
+        this.audio.autoplay = true;
         this.audio.src = uri;
         this.audio.oncanplaythrough = resolve;
         this.audio.onerror = reject;
       })
         .then(() => {
           this.track.duration = this.audio.duration;
-
           this.audio.play().then(() => {
             this.playing = true;
             notif(track, this.playPause, this.playNext, this.playPrev);