test promise in playing audio

src/components/RightSideBar/UpNext.vue

@@ -58,6 +58,7 @@
 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"],
@@ -72,6 +73,14 @@ export default {
       emit("expandQueue");
     };
 
+    watch(is_expanded, (newVal) => {
+      if (newVal) {
+        setTimeout(() => {
+          perks.focusCurrent();
+        }, 1000);
+      }
+    });
+
     const { playNext } = audio;
     const { playAudio } = audio;
 

src/composables/car.js

@@ -1,5 +0,0 @@
-const car = () => {
-  return;
-};
-
-export default car;

src/composables/perks.js

@@ -81,6 +81,18 @@ const readQueue = () => {
   }
 };
 
+function focusCurrent() {
+  const elem = document.getElementsByClassName("currentInQueue")[0];
+
+  if (elem) {
+    elem.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "center",
+    });
+  }
+}
+
 watch(current, (new_current, old_current) => {
   media.showMediaNotif();
 
@@ -101,19 +113,11 @@ watch(current, (new_current, old_current) => {
     prev.value = old_current;
     resolve();
   }).then(() => {
-    const elem = document.getElementsByClassName("currentInQueue")[0];
+    focusCurrent();
-
-    if (elem) {
-      elem.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-        inline: "center",
-      });
-    }
   });
 
   localStorage.setItem("current", JSON.stringify(new_current));
   localStorage.setItem("prev", JSON.stringify(prev.value));
 });
 
-export default { putCommas, doThat, readQueue, current, queue, next, prev };
+export default { putCommas, doThat, readQueue, focusCurrent, current, queue, next, prev };

src/composables/playAudio.js

@@ -1,39 +1,37 @@
 import { ref } from "@vue/reactivity";
 
 import perks from "./perks";
-import media from "./mediaNotification.js"
+import media from "./mediaNotification.js";
 
 const audio = ref(new Audio()).value;
 const pos = ref(0);
-const playing = ref(false)
+const playing = ref(false);
 
 const url = "http://127.0.0.1:8901/";
 
 const playAudio = (path) => {
   const full_path = url + encodeURIComponent(path);
 
-  setTimeout(() => {
+  new Promise((resolve, reject) => {
     audio.src = full_path;
-  }, 150);
+    audio.onloadeddata = resolve;
-  audio.load();
+    audio.onerror = reject;
+  })
+    .then(() => {
+      audio.play();
+      playing.value = true;
 
-  audio.oncanplaythrough = () => {
+      audio.ontimeupdate = () => {
-    audio.play();
+        pos.value = (audio.currentTime / audio.duration) * 1000;
-  };
+      };
-
+    })
-  audio.ontimeupdate = () => {
+    .catch((err) => console.log(err));
-    pos.value = (audio.currentTime / audio.duration) * 1000;
-  };
-
-  audio.addEventListener("ended", () => {
-    playNext();
-  });
 };
 
 function playNext() {
   playAudio(perks.next.value.filepath);
   perks.current.value = perks.next.value;
-  media.showMediaNotif()
+  media.showMediaNotif();
 }
 
 function playPrev() {
@@ -58,12 +56,15 @@ function playPause() {
   }
 }
 
-audio.addEventListener('play', () => {
+audio.addEventListener("play", () => {
   playing.value = true;
-})
+});
 
-audio.addEventListener('pause', () => {
+audio.addEventListener("pause", () => {
   playing.value = false;
-})
+});
 
+audio.addEventListener("ended", () => {
+  playNext();
+});
 export default { playAudio, playNext, playPrev, playPause, seek, pos, playing };