diff --git a/src/components/RightSideBar/UpNext.vue b/src/components/RightSideBar/UpNext.vue index e720089c..fdbbff81 100644 --- a/src/components/RightSideBar/UpNext.vue +++ b/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; diff --git a/src/composables/car.js b/src/composables/car.js deleted file mode 100644 index 8e22c0b3..00000000 --- a/src/composables/car.js +++ /dev/null @@ -1,5 +0,0 @@ -const car = () => { - return; -}; - -export default car; diff --git a/src/composables/perks.js b/src/composables/perks.js index 7bda74bd..da921425 100644 --- a/src/composables/perks.js +++ b/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]; - - if (elem) { - elem.scrollIntoView({ - behavior: "smooth", - block: "center", - inline: "center", - }); - } + focusCurrent(); }); - + 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 }; diff --git a/src/composables/playAudio.js b/src/composables/playAudio.js index 507c7b3b..1a811d40 100644 --- a/src/composables/playAudio.js +++ b/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.load(); + audio.onloadeddata = resolve; + audio.onerror = reject; + }) + .then(() => { + audio.play(); + playing.value = true; - audio.oncanplaythrough = () => { - audio.play(); - }; - - audio.ontimeupdate = () => { - pos.value = (audio.currentTime / audio.duration) * 1000; - }; - - audio.addEventListener("ended", () => { - playNext(); - }); + audio.ontimeupdate = () => { + pos.value = (audio.currentTime / audio.duration) * 1000; + }; + }) + .catch((err) => console.log(err)); }; 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 };