From 45ae19149fb8787658ded260d5cdb1a57bb49626 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Mon, 5 Oct 2026 01:10:53 +0200
Subject: [PATCH] Refresh lyrics position on open

---
 app/components/Player/Fullscreen/LyricsDisplay.vue | 11 ++++++++++-
 app/plugins/player.ts                              |  4 ++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/components/Player/Fullscreen/LyricsDisplay.vue b/app/components/Player/Fullscreen/LyricsDisplay.vue
index 7e50b4b..adaf724 100644
--- a/app/components/Player/Fullscreen/LyricsDisplay.vue
+++ b/app/components/Player/Fullscreen/LyricsDisplay.vue
@@ -7,7 +7,7 @@ const { animationDuration, offset, showScrollBar } = defineProps<{
 
 const song = useSong()
 const { fullscreen } = useFullscreen()
-const { secondsPlayed } = usePlayer()
+const { secondsPlayed, refreshPosition } = usePlayer()
 const debugView = useCookie("DEBUG_VIEW")
 const debugViewEnabled = computed(() => String(debugView.value ?? "") === "1")
 
@@ -49,6 +49,7 @@ const scrollActiveIndex = computed(() => {
 const height = ref<number>()
 const top = ref(0)
 const syncedHeight = ref<number>()
+const layoutVersion = ref(0)
 const topFadeExtension = 75
 
 const updateLyricsLayout = () => {
@@ -64,8 +65,15 @@ const updateLyricsLayout = () => {
 watch(
 	fullscreen,
 	async () => {
+		if (fullscreen.value) refreshPosition()
 		await nextTick()
 		updateLyricsLayout()
+		if (fullscreen.value) {
+			requestAnimationFrame(() => {
+				updateLyricsLayout()
+				layoutVersion.value++
+			})
+		}
 	},
 	{ immediate: true },
 )
@@ -77,6 +85,7 @@ const containerRef = useTemplateRef("container-ref")
 const outerRef = useTemplateRef("outer-ref")
 
 const transformY = computed(() => {
+	layoutVersion.value
 	const lines = containerRef.value?.children
 	if (scrollActiveIndex.value < 0 || !lines?.length) return 0
 
diff --git a/app/plugins/player.ts b/app/plugins/player.ts
index 55e13ff..6d86dcc 100644
--- a/app/plugins/player.ts
+++ b/app/plugins/player.ts
@@ -48,6 +48,9 @@ export default defineNuxtPlugin((nuxtApp) => {
 			sound.value?.seek(value)
 		},
 	})
+	const refreshPosition = () => {
+		tick.value++
+	}
 	const volume = computed<number>({
 		get() {
 			tick.value
@@ -404,6 +407,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 				playAlbumAtIndex,
 				getDuration,
 				secondsPlayed,
+				refreshPosition,
 				duration,
 				volume,
 				queue,