From d5482a9ea4b40c17d75d3c1d28c685d6e8c38bc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sat, 7 Mar 2026 19:49:06 +0100
Subject: [PATCH] Added non synced text

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

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index 2511ee2..83bc7de 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -54,7 +54,11 @@ onMounted(() => {
 				<PlayerFullscreenTrackDisplay
 					:show-buttons="mouseMovedRecently"
 				/>
-				<LyricsDisplay :animation-duration="0.2" :offset="150" />
+				<LyricsDisplay
+					:animation-duration="0.2"
+					:offset="150"
+					:show-scroll-bar="mouseMovedRecently"
+				/>
 			</div>
 		</section>
 	</section>
diff --git a/app/components/Player/Fullscreen/LyricsDisplay.vue b/app/components/Player/Fullscreen/LyricsDisplay.vue
index ac39ed9..f541cb4 100644
--- a/app/components/Player/Fullscreen/LyricsDisplay.vue
+++ b/app/components/Player/Fullscreen/LyricsDisplay.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-const { animationDuration, offset } = defineProps<{
+const { animationDuration, offset, showScrollBar } = defineProps<{
 	animationDuration: number
 	offset: number
+	showScrollBar: boolean
 }>()
 
 const song = useSong()
@@ -46,7 +47,7 @@ const scrollActiveIndex = computed(() => {
 
 const height = ref(0)
 
-watch(parsedLyrics, () => {
+watch(song, () => {
 	const trackDisplay = document.querySelector(".track-display")
 
 	if (!trackDisplay) return
@@ -139,13 +140,21 @@ const finalTransform = computed(() => {
 			</p>
 		</div>
 	</div>
-	<template v-else-if="song">
+	<div
+		v-else-if="song"
+		class="lyrics"
+		:style="{
+			height: `${height}px`,
+		}"
+		:class="{ show: showScrollBar }"
+	>
 		<p>{{ song.lyrics.text }}</p>
-	</template>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 @use "@/styles/util" as *;
+@use "@/styles/variables" as *;
 
 .synced-lyrics-container {
 	position: relative;
@@ -191,4 +200,27 @@ const finalTransform = computed(() => {
 		}
 	}
 }
+
+.lyrics {
+	overflow: hidden;
+
+	& > p {
+		height: 100%;
+		overflow-y: scroll;
+		white-space: pre-wrap;
+
+		&::-webkit-scrollbar {
+			width: 10px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-color: transparent;
+			border-radius: 5px;
+		}
+	}
+
+	&.show > p::-webkit-scrollbar-thumb {
+		background-color: $color-secondary-background;
+	}
+}
 </style>