client: fix scrollIntoView

src/components/RightSideBar/UpNext.vue

@@ -28,7 +28,9 @@
             v-for="song in queue"
             :key="song"
             @click="playThis(song)"
-            :class="{ currentInQueue: current._id.$oid == song._id.$oid }"
+            :class="{
+              currentInQueue: current._id.$oid == song._id.$oid,
+            }"
           >
             <div
               class="album-art image"
@@ -56,7 +58,6 @@
 import { ref, toRefs } from "@vue/reactivity";
 import perks from "@/composables/perks.js";
 import audio from "@/composables/playAudio.js";
-import { watch } from "@vue/runtime-core";
 
 export default {
   props: ["up_next"],
@@ -64,8 +65,8 @@ export default {
     const is_expanded = toRefs(props).up_next;
 
     const queue = ref(perks.queue);
-    const next = ref(perks.next);
     const current = ref(perks.current);
+    const next = ref(perks.next);
 
     let collapse = () => {
       emit("expandQueue");
@@ -74,28 +75,6 @@ export default {
     const { playNext } = audio;
     const { playAudio } = audio;
 
-    watch(is_expanded, (val) => {
-      if (val == true) {
-        var elem = document.getElementsByClassName("currentInQueue")[0];
-        elem.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-          inline: "center",
-        });
-      }
-    });
-
-    watch(current, (val) => {
-      if (val) {
-        var elem = document.getElementsByClassName("currentInQueue")[0];
-        elem.scrollIntoView({
-          behavior: "smooth",
-          block: "center",
-          inline: "center",
-        });
-      }
-    });
-
     const playThis = (song) => {
       playAudio(song.filepath);
       perks.current.value = song;
@@ -110,8 +89,8 @@ export default {
       playThis,
       putCommas,
       queue,
-      next,
       current,
+      next,
     };
   },
 };
@@ -158,7 +137,7 @@ export default {
 }
 
 .up-next > p > span:hover {
-  background: rgb(62, 69, 77);
+  background: $blue;
   cursor: pointer;
 }
 
@@ -220,6 +199,7 @@ export default {
 
 .up-next .all-items .scrollable .song-item:hover {
   cursor: pointer;
+  background-color: $blue;
 }
 
 .up-next .all-items .scrollable .song-item hr {

src/composables/perks.js

@@ -60,6 +60,7 @@ const readQueue = () => {
   const prev_queue = JSON.parse(localStorage.getItem("queue"));
   const last_played = JSON.parse(localStorage.getItem("current"));
   const next_ = JSON.parse(localStorage.getItem("next"));
+  const prev_ = JSON.parse(localStorage.getItem("prev"));
 
   if (last_played) {
     current.value = last_played;
@@ -72,9 +73,13 @@ const readQueue = () => {
   if (next_) {
     next.value = next_;
   }
+
+  if (prev_) {
+    prev.value = prev_;
+  }
 };
 
-watch(current, (new_current) => {
+watch(current, (new_current, old_current) => {
   localStorage.setItem("current", JSON.stringify(new_current));
 
   const index = queue.value.findIndex(
@@ -86,11 +91,25 @@ watch(current, (new_current) => {
     prev.value = queue.value[queue.value.length - 2];
   } else if (index == 0) {
     next.value = queue.value[1];
-    prev.value = queue.value[queue.value.length - 1];
+    // prev.value = queue.value[queue.value.length - 1];
   } else {
     next.value = queue.value[index + 1];
-    prev.value = queue.value[index - 1];
+    // prev.value = queue.value[index - 1];
   }
+
+  prev.value = old_current;
+  localStorage.setItem("prev", JSON.stringify(prev.value));
+
+  setTimeout(() => {
+    const elem = document.getElementsByClassName("currentInQueue")[0];
+
+    if (elem) {
+      elem.scrollIntoView({
+        behavior: "smooth",
+        inline: "center",
+      });
+    }
+  }, 100);
 });
 
 export default { putCommas, doThat, readQueue, current, queue, next, prev };