mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-05 04:53:01 +00:00
use div scroll method to scroll to current song in queue
This commit is contained in:
committed by
Mungai Njoroge
parent
8e258eaf24
commit
278439eee8
@@ -30,7 +30,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<div class="title ellip">
|
||||
<div v-tooltip class="title ellip">
|
||||
{{ queue.currenttrack?.title || "Hello there" }}
|
||||
</div>
|
||||
<ArtistName
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<QueueActions />
|
||||
<div
|
||||
ref="scrollable"
|
||||
class="scrollable-r"
|
||||
v-bind="containerProps"
|
||||
style="height: 100%"
|
||||
@mouseover="mouseover = true"
|
||||
@mouseout="mouseover = false"
|
||||
>
|
||||
<div class="inner" v-bind="wrapperProps" >
|
||||
<div class="inner" v-bind="wrapperProps">
|
||||
<TrackItem
|
||||
style="height: 64px"
|
||||
v-for="t in tracks"
|
||||
@@ -34,6 +35,7 @@ import QueueActions from "./Queue/QueueActions.vue";
|
||||
|
||||
const queue = useQStore();
|
||||
const mouseover = ref(false);
|
||||
const scrollable = ref<HTMLElement>();
|
||||
|
||||
function playFromQueue(index: number) {
|
||||
queue.play(index);
|
||||
@@ -51,8 +53,8 @@ const {
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
scrollTo(queue.currentindex);
|
||||
queue.setScrollFunction(scrollTo, mouseover);
|
||||
// scrollTo(queue.currentindex);
|
||||
queue.setScrollFunction(scrollToCurrent, mouseover);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@@ -60,6 +62,18 @@ onBeforeUnmount(() => {
|
||||
});
|
||||
|
||||
// TODO: Handle focusing current track on song end
|
||||
|
||||
|
||||
function scrollToCurrent() {
|
||||
const elem = document.getElementsByClassName('scrollable-r')[0] as HTMLElement;
|
||||
const itemHeight = 64;
|
||||
|
||||
const top = queue.currentindex * itemHeight - itemHeight;
|
||||
elem.scroll({
|
||||
top,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@@ -14,9 +14,7 @@
|
||||
<div class="flex">
|
||||
<div v-auto-animate @click.pre@dblclick.prevent="emitUpdate" class="thumbnail">
|
||||
<img
|
||||
loading="lazy"
|
||||
:src="imguri + track.image"
|
||||
alt=""
|
||||
class="album-art image rounded-sm"
|
||||
/>
|
||||
<div
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
<div class="album-art">
|
||||
<img
|
||||
:src="paths.images.thumb.small + track.image"
|
||||
alt=""
|
||||
class="rounded-sm"
|
||||
/>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user