mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-07-28 13:41:42 +00:00
client: fix scrollIntoView
This commit is contained in:
parent
17f29a76ed
commit
fd02390f71
@ -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 {
|
||||
|
@ -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 };
|
||||
|
Loading…
x
Reference in New Issue
Block a user