From 16e309c3464bb7ccf1caf51093b365363299d8f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Fri, 25 Sep 2026 21:45:06 +0200
Subject: [PATCH] Added fullscreen volume control

---
 app/components/Player/Fullscreen.vue          |  4 +-
 .../Player/Fullscreen/TrackDisplay.vue        | 43 +++++++++++++++++--
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index 6cfbae9..40f906f 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -55,9 +55,7 @@ nuxtApp.hook("page:finish", () => {
 			/>
 
 			<div class="content-container" :class="{ lyrics: song.lyrics }">
-				<PlayerFullscreenTrackDisplay
-					:show-buttons="mouseMovedRecently"
-				/>
+				<PlayerFullscreenTrackDisplay :show-buttons="mouseMovedRecently" />
 				<PlayerFullscreenLyricsDisplay
 					:animation-duration="0.2"
 					:offset="150"
diff --git a/app/components/Player/Fullscreen/TrackDisplay.vue b/app/components/Player/Fullscreen/TrackDisplay.vue
index 0efdfeb..0ad3adb 100644
--- a/app/components/Player/Fullscreen/TrackDisplay.vue
+++ b/app/components/Player/Fullscreen/TrackDisplay.vue
@@ -12,6 +12,7 @@ const {
 	repeat,
 	secondsPlayed,
 	duration,
+	volume,
 } = usePlayer()
 
 const secondsPlayedFormatted = computed(() =>
@@ -66,6 +67,22 @@ const durationFormatted = computed(() =>
 				@click="repeat = !repeat"
 			/>
 		</div>
+
+		<div class="volume-slider" :class="{ hidden: !showButtons }">
+			<Icon name="lucide:volume-2" />
+			<RangeSlider
+				:model-value="volume"
+				@update:model-value="
+					(v) => {
+						if (v !== undefined) volume = v
+					}
+				"
+				:max="1"
+				:min="0"
+				:step="0.01"
+				monochrome
+			/>
+		</div>
 	</article>
 </template>
 
@@ -127,12 +144,11 @@ const durationFormatted = computed(() =>
 	width: 100%;
 	gap: 1rem;
 
-	overflow: hidden;
-	max-height: 30px;
-	transition: max-height 0.2s ease-in-out;
+	transition: opacity 0.2s ease-in-out;
 
 	&.hidden {
-		max-height: 0;
+		opacity: 0;
+		pointer-events: none;
 	}
 
 	& > * {
@@ -143,4 +159,23 @@ const durationFormatted = computed(() =>
 		color: $color-accent;
 	}
 }
+
+.volume-slider {
+	align-self: stretch;
+	margin: 0.5rem 1rem 0;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	opacity: 1;
+	transition: opacity 0.2s ease-in-out;
+
+	:deep(.slider) {
+		flex: 1;
+	}
+
+	&.hidden {
+		opacity: 0;
+		pointer-events: none;
+	}
+}
 </style>