From c0af89c6e5a4a7f5aa28a9d9f142fc2c49d7255f Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Wed, 24 Jul 2024 22:09:14 +0200
Subject: [PATCH] volume icon verbeteringen

---
 playlist/static/style.css           | 5 ++++-
 playlist/templates/MediaPlayer.html | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/playlist/static/style.css b/playlist/static/style.css
index de3ff32..7a8ef68 100644
--- a/playlist/static/style.css
+++ b/playlist/static/style.css
@@ -285,7 +285,7 @@ input[type="range"]#seek::-webkit-slider-runnable-track{
 }
 
 #media-control #volume {
-	background-image:url(img/muted.png);
+	background-image:url(img/volume.png);
 	background-repeat:no-repeat;
 	padding-left: 24px;
 	background-position: 0 50%;
@@ -295,6 +295,9 @@ input[type="range"]#seek::-webkit-slider-runnable-track{
 #media-control #volume.playing {
 	background-image:url(img/pawel.png);
 }
+#media-control #volume.muted {
+	background-image:url(img/muted.png);
+}
 
 #volume::-moz-range-thumb {
 	background: transparent;
diff --git a/playlist/templates/MediaPlayer.html b/playlist/templates/MediaPlayer.html
index 0053610..38e28d6 100644
--- a/playlist/templates/MediaPlayer.html
+++ b/playlist/templates/MediaPlayer.html
@@ -101,10 +101,12 @@
     console.log(event);
     let volume = event.target.value / 11;
     event.target.classList.add("playing");
+    event.target.classList.remove("muted");
     kankerherrie.play();
     if (volume <= 1/11) {
       kankerherrie.pause();
-    event.target.classList.remove("playing");
+      event.target.classList.remove("playing");
+      event.target.classList.add("muted");
     }
     kankerherrie.volume = volume;
   })