pawelplaatje

playlist/static/style.css

@@ -285,13 +285,17 @@ input[type="range"]#seek::-webkit-slider-runnable-track{
 }
 
 #media-control #volume {
-	background-image:url(img/volume.png);
+	background-image:url(img/muted.png);
 	background-repeat:no-repeat;
 	padding-left: 24px;
 	background-position: 0 50%;
 	max-width: 120px;
 }
 
+#media-control #volume.playing {
+	background-image:url(img/pawel.png);
+}
+
 #volume::-moz-range-thumb {
 	background: transparent;
 	background-image:url(img/vol-select.svg);

playlist/templates/MediaPlayer.html

@@ -100,8 +100,12 @@
     //document.getElementById("stop").click();
     console.log(event);
     let volume = event.target.value / 11;
+    event.target.classList.add("playing");
     kankerherrie.play();
-    if (volume <= 1/11) kankerherrie.pause();
+    if (volume <= 1/11) {
+      kankerherrie.pause();
+    event.target.classList.remove("playing");
+    }
     kankerherrie.volume = volume;
   })
 </script>