From d1903045a46f76f81eb444c2ff7c5e2e68e984ff Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Mon, 22 Apr 2024 20:04:12 +0200
Subject: [PATCH] Improve Volume Handling

---
 src/routes/+page.svelte | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 08889f8..c49c468 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -126,11 +126,20 @@
         source.pause();
     }
 
-    $effect(() => {
-        if (source) {
-            source.volume = volume;
+    function changeVolume(change: number) {
+        if (volume + change > 1) {
+            volume = 1;
+        }
+        else if (volume + change < 0) {
+            volume = 0;
+        }
+        else {
+            volume = toFixedNumber(volume + change, 2, 10) ;
+        }
+
+        if (currentSong.source) {
+            currentSong.source.volume = volume;
         }
-    });
 
     function progressPercent() {
         return progress / duration * 100 || 0;
@@ -175,6 +184,8 @@
         <p class="border p-2">Volume: {volume}</p>
         <p class="border p-2">{displayTime(progress)}/{displayTime(duration)}</p>
         <p class="border p-2">{progressPercent().toFixed(2)}%</p>
+        <Button class="border p-2" onclick={() => changeVolume(-0.05)}>-</Button>
+        <Button class="border p-2" onclick={() => changeVolume(0.05)}>+</Button>
         {#if isPaused}
             <Button onclick={play}>Play</Button>
         {:else}