volume icon verbeteringen

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;

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.add("muted");
     }
     kankerherrie.volume = volume;
   })