diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index c5b8e7b..3e285cf 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -61,11 +61,16 @@ nuxtApp.hook("page:finish", () => {
@click="closeFullscreen()"
/>
-
-
+
diff --git a/app/components/Player/Fullscreen/LyricsDisplay.vue b/app/components/Player/Fullscreen/LyricsDisplay.vue
index 58551fd..fcda338 100644
--- a/app/components/Player/Fullscreen/LyricsDisplay.vue
+++ b/app/components/Player/Fullscreen/LyricsDisplay.vue
@@ -78,14 +78,13 @@ const transformY = computed(() => {
const lines = containerRef.value?.children
if (scrollActiveIndex.value < 0 || !lines?.length) return 0
- const firstLyric = lines[0] as HTMLElement
- const activeLyric = lines[scrollActiveIndex.value] as HTMLElement
- if (!firstLyric || !activeLyric) return 0
+ let accumulatedHeight = 0
+ for (let i = 0; i < scrollActiveIndex.value; i++) {
+ const line = lines[i] as HTMLElement | undefined
+ if (line) accumulatedHeight += line.getBoundingClientRect().height
+ }
- return (
- firstLyric.getBoundingClientRect().top -
- activeLyric.getBoundingClientRect().bottom
- )
+ return -accumulatedHeight
})
const manualOffset = ref(0)
@@ -112,8 +111,7 @@ const onWheel = (event: WheelEvent) => {
outerRef.value.offsetHeight,
window.innerHeight - 300,
)
- const minTranslate =
- -containerRef.value.scrollHeight + lowerViewportLimit
+ const minTranslate = -containerRef.value.scrollHeight + lowerViewportLimit
manualOffset.value = Math.min(
maxTranslate,
@@ -132,10 +130,7 @@ const onLyricClick = (time: number) => {
const finalTransform = computed(() => {
if (isScrolling.value) return manualOffset.value
- const lyricsTop = top.value - topFadeExtension
- const guideY = import.meta.client ? window.innerHeight * 0.45 : 0
- const laterLyricOffset = scrollActiveIndex.value > 0 ? 100 : 0
- return transformY.value + guideY - lyricsTop + laterLyricOffset
+ return transformY.value + offset + topFadeExtension
})