From ab22cd6eb9671e3c7569a6a089364771ec4212f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sat, 7 Mar 2026 19:37:59 +0100
Subject: [PATCH] Implemented scrolling

---
 app/components/Player/Fullscreen.vue          |  2 +-
 .../Player/Fullscreen/LyricsDisplay.vue       | 48 +++++++++++++++++--
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index af0ddca..2511ee2 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -54,7 +54,7 @@ onMounted(() => {
 				<PlayerFullscreenTrackDisplay
 					:show-buttons="mouseMovedRecently"
 				/>
-				<LyricsDisplay :animation-duration="0.2" />
+				<LyricsDisplay :animation-duration="0.2" :offset="150" />
 			</div>
 		</section>
 	</section>
diff --git a/app/components/Player/Fullscreen/LyricsDisplay.vue b/app/components/Player/Fullscreen/LyricsDisplay.vue
index 106dc5f..ac39ed9 100644
--- a/app/components/Player/Fullscreen/LyricsDisplay.vue
+++ b/app/components/Player/Fullscreen/LyricsDisplay.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-const { animationDuration } = defineProps<{ animationDuration: number }>()
+const { animationDuration, offset } = defineProps<{
+	animationDuration: number
+	offset: number
+}>()
 
 const song = useSong()
 const { secondsPlayed } = usePlayer()
@@ -55,8 +58,6 @@ watch(parsedLyrics, () => {
 	resizeObserver.observe(trackDisplay)
 })
 
-onMounted(() => {})
-
 const transformY = computed(() => {
 	if (activeIndex.value < 0) return 0
 
@@ -71,20 +72,59 @@ const transformY = computed(() => {
 
 	return -accumulatedHeight
 })
+
+const containerRef = useTemplateRef("container-ref")
+const outerRef = useTemplateRef("outer-ref")
+
+const manualOffset = ref(0)
+const isScrolling = ref(false)
+
+let scrollingTimeout: any = null
+
+const onWheel = (event: WheelEvent) => {
+	if (!containerRef.value || !outerRef.value) return
+
+	isScrolling.value = true
+	clearTimeout(scrollingTimeout)
+
+	const delta = event.deltaY
+
+	manualOffset.value -= delta
+
+	const maxTranslate = offset
+	const minTranslate =
+		-containerRef.value.scrollHeight + outerRef.value.offsetHeight
+
+	manualOffset.value = Math.min(
+		maxTranslate,
+		Math.max(minTranslate, manualOffset.value),
+	)
+
+	scrollingTimeout = setTimeout(() => (isScrolling.value = false), 3000)
+}
+
+const finalTransform = computed(() => {
+	if (isScrolling.value) return manualOffset.value
+
+	return transformY.value + offset
+})
 </script>
 
 <template>
 	<div
+		ref="outer-ref"
 		v-if="song && song.lyrics.synced"
 		class="synced-lyrics-container"
 		:style="{
 			height: `${height}px`,
 		}"
+		@wheel.prevent="onWheel"
 	>
 		<div
+			ref="container-ref"
 			class="synced-lyrics"
 			:style="{
-				transform: `translateY(${transformY + 150}px)`,
+				transform: `translateY(${finalTransform}px)`,
 				transition: `transform ${animationDuration}s ease`,
 			}"
 		>