diff --git a/src/components/Player.astro b/src/components/Player.astro index 2ffc583..a660f80 100644 --- a/src/components/Player.astro +++ b/src/components/Player.astro @@ -104,35 +104,72 @@ const playerArtworkOpacity = 0.4;
-
- - - - +
+
+ + + + +
+
{ + e.stopPropagation(); + window.player.toggleMute(); + }); + this.UI.controls.volume.addEventListener("input", (e) => { + e.stopPropagation(); + window.player.setVolume(e.target.value / 100); + }); + + try { + const stored = parseFloat(localStorage.getItem("player-volume")); + if (Number.isFinite(stored)) { + this.volume = Math.min(Math.max(stored, 0), 1); + this.lastVolume = this.volume > 0 ? this.volume : 1; + } + } catch (e) { + /* ignore */ + } + this.syncVolumeUI(); this.UI.progress.bar.addEventListener("click", function (event) { event.stopPropagation(); @@ -490,6 +587,38 @@ const playerArtworkOpacity = 0.4; window.playerIsInitialised = true; } + syncVolumeUI() { + Howler.volume(this.volume); + this.UI.controls.volume.value = String(Math.round(this.volume * 100)); + const muted = this.volume <= 0; + this.UI.controls.volumeOn.classList.toggle("hidden", muted); + this.UI.controls.volumeOff.classList.toggle("hidden", !muted); + this.UI.controls.mute.setAttribute( + "aria-label", + muted ? "Unmute" : "Mute" + ); + this.UI.controls.mute.setAttribute( + "aria-pressed", + muted ? "true" : "false" + ); + try { + localStorage.setItem("player-volume", String(this.volume)); + } catch (e) { + /* ignore */ + } + } + + setVolume(volume) { + if (!Number.isFinite(volume)) return; + this.volume = Math.min(Math.max(volume, 0), 1); + if (this.volume > 0) this.lastVolume = this.volume; + this.syncVolumeUI(); + } + + toggleMute() { + this.setVolume(this.volume > 0 ? 0 : this.lastVolume || 1); + } + setminimised(minimised) { this.minimised = minimised; try {