diff --git a/app/components/Player/Fullscreen/LyricsDisplay.vue b/app/components/Player/Fullscreen/LyricsDisplay.vue index eebcee2..106dc5f 100644 --- a/app/components/Player/Fullscreen/LyricsDisplay.vue +++ b/app/components/Player/Fullscreen/LyricsDisplay.vue @@ -15,7 +15,7 @@ const lyricsRefs = useTemplateRef("lyrics") const activeIndex = computed(() => { if (!parsedLyrics.value) return -1 - const time = secondsPlayed.value + animationDuration + const time = secondsPlayed.value return parsedLyrics.value.findIndex( (lyric, i) => @@ -24,6 +24,22 @@ const activeIndex = computed(() => { parsedLyrics.value![i + 1]!.time > time), ) }) +const scrollActiveIndex = computed(() => { + if (!parsedLyrics.value) return -1 + + const time = secondsPlayed.value + animationDuration + + let index = parsedLyrics.value.findIndex( + (lyric, i) => + lyric.time <= time && + (!parsedLyrics.value![i + 1] || + parsedLyrics.value![i + 1]!.time > time), + ) + + if (index >= parsedLyrics.value.length - 1) + index = parsedLyrics.value.length - 2 + return index +}) const height = ref(0) @@ -48,7 +64,7 @@ const transformY = computed(() => { if (!lyricsRefs.value) return 0 - for (let i = 0; i < activeIndex.value; i++) { + for (let i = 0; i < scrollActiveIndex.value; i++) { const el = lyricsRefs.value[i] if (el) accumulatedHeight += el.getBoundingClientRect().height } @@ -77,12 +93,15 @@ const transformY = computed(() => { :key="lyric.time" :class="{ active: i == activeIndex }" ref="lyrics" + @click="() => (secondsPlayed = lyric.time)" > {{ lyric.text }}

- +