From 9e0c164e176e69880060619da48c7d49511f1d22 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 14 Jul 2026 18:48:57 +0200
Subject: [PATCH] feat(frontend): persistent player volume

---
 .../src/lib/components/player/VolumeControl.svelte     |  8 +++++++-
 frontend/src/lib/player/player.svelte.ts               | 10 +++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/player/VolumeControl.svelte b/frontend/src/lib/components/player/VolumeControl.svelte
index ea2b3e7..5290164 100644
--- a/frontend/src/lib/components/player/VolumeControl.svelte
+++ b/frontend/src/lib/components/player/VolumeControl.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
+
+	function handleVolumeChange(event: Event) {
+		const target = event.currentTarget as HTMLInputElement;
+		const newVolume = Number(target.value);
+		player.setVolume(newVolume);
+	}
 </script>
 
 <div class="flex items-center justify-end gap-3.5">
@@ -8,7 +14,7 @@
 		min="0"
 		max="100"
 		value={player.volume}
-		oninput={(event) => player.setVolume(Number(event.currentTarget.value))}
+		oninput={handleVolumeChange}
 		aria-label="Volumen"
 		class="mf-volume"
 		style="background:linear-gradient(to right, var(--mf-accent) {player.volume}%, var(--mf-track) {player.volume}%)"
diff --git a/frontend/src/lib/player/player.svelte.ts b/frontend/src/lib/player/player.svelte.ts
index 5e701fc..e385b48 100644
--- a/frontend/src/lib/player/player.svelte.ts
+++ b/frontend/src/lib/player/player.svelte.ts
@@ -48,10 +48,11 @@ class PlayerState {
 	currentId = $state<string | number | null>(null);
 	playing = $state(false);
 	progress = $state(0);
-	volume = $state(70);
+	volume = $state(
+		browser ? Number(localStorage.getItem("player.volume") ?? 100) : 100
+	);
 	loading = $state(false);
 	error = $state('');
-
 	recentlyPlayed = $state<PlayerTrack[]>([]);
 	playlists = $state<Playlist[]>([]);
 
@@ -274,7 +275,10 @@ class PlayerState {
 	setVolume(value: number) {
 		this.volume = Math.min(100, Math.max(0, Math.round(value)));
 		const audio = this.#audioEl();
-		if (audio) audio.volume = this.volume / 100;
+		if (audio) {
+			audio.volume = this.volume / 100;
+			localStorage.setItem("player.volume", String(this.volume));
+		}
 	}
 }