diff --git a/app/components/Player/Fullscreen/LyricsDisplay.vue b/app/components/Player/Fullscreen/LyricsDisplay.vue index b15d1c7..07c5882 100644 --- a/app/components/Player/Fullscreen/LyricsDisplay.vue +++ b/app/components/Player/Fullscreen/LyricsDisplay.vue @@ -49,6 +49,7 @@ const scrollActiveIndex = computed(() => { const height = ref() const top = ref(0) const syncedHeight = ref() +const topFadeExtension = 75 const updateLyricsLayout = () => { const trackDisplay = document.querySelector(".track-display") @@ -99,7 +100,7 @@ const onWheel = (event: WheelEvent) => { if (!containerRef.value || !outerRef.value) return if (!isScrolling.value) { - manualOffset.value = transformY.value + offset + manualOffset.value = transformY.value + offset + topFadeExtension } isScrolling.value = true @@ -109,7 +110,7 @@ const onWheel = (event: WheelEvent) => { manualOffset.value -= delta - const maxTranslate = offset + const maxTranslate = offset + topFadeExtension const lowerViewportLimit = Math.max( outerRef.value.offsetHeight, window.innerHeight - 300, @@ -134,7 +135,7 @@ const onLyricClick = (time: number) => { const finalTransform = computed(() => { if (isScrolling.value) return manualOffset.value - return transformY.value + offset + return transformY.value + offset + topFadeExtension }) @@ -144,8 +145,8 @@ const finalTransform = computed(() => { v-if="song && song.lyrics && song.lyrics.synced" class="synced-lyrics-container" :style="{ - height: `${syncedHeight}px`, - marginTop: `${top}px`, + height: `${syncedHeight + topFadeExtension}px`, + marginTop: `${top - topFadeExtension}px`, }" @wheel.prevent="onWheel" > @@ -160,7 +161,10 @@ const finalTransform = computed(() => {

@@ -226,6 +230,18 @@ const finalTransform = computed(() => { opacity: 1; filter: initial; } + + &.past { + opacity: 0; + filter: blur(1.5px); + transition: opacity 0.4s ease; + + &:hover { + cursor: default; + opacity: 0; + filter: blur(1.5px); + } + } } }