client: fix scrollIntoView

This commit is contained in:
geoffrey45 2021-12-27 10:58:58 +03:00
parent 17f29a76ed
commit fd02390f71
2 changed files with 29 additions and 30 deletions

View File

@ -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 {

View File

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