From 00b0e8d9a726f9cfb3757cc6708e448593decc78 Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Wed, 24 Jul 2024 21:51:57 +0200
Subject: [PATCH] pawelplaatje

---
 playlist/static/img/muted.png       | Bin 0 -> 411 bytes
 playlist/static/img/pawel.png       | Bin 0 -> 1288 bytes
 playlist/static/style.css           |   6 +++++-
 playlist/templates/MediaPlayer.html |   6 +++++-
 4 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 playlist/static/img/muted.png
 create mode 100644 playlist/static/img/pawel.png

diff --git a/playlist/static/img/muted.png b/playlist/static/img/muted.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cfe7dbf06b01fb5bd90ebd8dec84154b8ed53c9
GIT binary patch
literal 411
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!73?$#)eFPF<Nq6*hWMJ6X&;2Kn706de_6YK2
zV5m}KU}$JzVE6?TYIwoGP-?)y@G60U!D<ErgLuK5U4b@035fuo5LX}#1pk5PKf{3o
z2O1g}8X6k@|Nk%bw;>%U!B`UH7tG-B>_!@hljQC0!Y-EB@fyfsFY)wsWq-sbAugag
zRqCY_P^j3`#W95Ax^JH$ACn;u%XgiN&LV-*hdXC!@jqB{rG<Y@(-i(CAHJWQ$Yw70
z)=Q50K+zEy<GH^#p7i^aH`6J>_oC&g!&}|guhOubdq+Xzyj=6U372o)&^old-P(QA
znv-)R+V!43d&0nZR@44y_UcphFKZriN8A$bSh}6_B+z=*64!{5l*E!$tK_0oAjM#0
zU}&LhV5Vzi5@KX*WoTw)Y_4lyVr5`(=ggCM6b-rgDVb@NxHYVu81opYfx*+&&t;uc
GLK6T8^@scb

literal 0
HcmV?d00001

diff --git a/playlist/static/img/pawel.png b/playlist/static/img/pawel.png
new file mode 100644
index 0000000000000000000000000000000000000000..ace33517589726499ecf7c737687a2f7346f12e3
GIT binary patch
literal 1288
zcmV+j1^4=iP)<h;3K|Lk000e1NJLTq000~S000~a1^@s6at+^<00001b5ch_0Itp)
z=>Px(!bwCyR7i=vmP=?<R~*KF_dWM9$;8RzX(M8qh!Wxh>9Sh7Ewl?)6|t_gZYtJN
zu`UYYqMLT7bXRH#1;Is8x~VR@C@LCb>$6s(F`2~4Op=+oGjs2`k1i(BC>c#s=pQck
zp2Ok$o$r4??mh57m$JgO2G9m<2L=EQC<F2Q^~REx2{JFAJ-H|U=g6mHV^8`O+tI5c
zW_wRMl=}zoY}>l|Ols3dX8{)o{|nH$KXhVWZhHDqDVyt^$YxbPe4%HV7Mlk8>D)XR
zJMHbG?$qS*?p+7Z1GUuv+fE<f^LeILIGA#5M=94eT;Zdu3a;y6+XkAX(6wU=PRCm8
z_O_Yw<kXS1yABLBg31kGiJwpI|77mz#KE*~IEo*Dt^#0dIshrhdcOGa)$2_Bb(5))
z8!brE7r@3wE*b&b9!?hb_qLkO^O;3Z%`gygh$bnBxZdKa2ag!LdymmuBOC4yoj3y6
zO9`tDfGM?H$Y7W+!xr5aV49@h3Lk*lOc6lKN%1xyLp?;xa%cxpXro$7!hn|?F0>h7
zwp`)vy|E0?vl558D#_~n6Ziq4lVBk@i(!k~D!hOMQ1yfXB$pCy<WQ-hNRApW;Onr3
zclZiSlj`3O%}}XnDptaj8<}YYtWqh6av%}vD#G*Xv-53z751!9q>y*XdxC@rAdaBH
zmuD$p(+}SrTR&AZ0)QZh$qB)|T#n(<ajp%I;<_HL@bQC?;n8s(XNyeNDg?eqO;e#V
zXa4x@v7<omtKv)9?y|BEPi^f<n*<fqgoUB&JgfTL_~#jKrA+jaPOp)okau~MFY#a^
zPhVG>&9+X;u}JH>($%SWEHkC0^uU&>)}Sgm2@}N+@O&Rpt+%!0R)Kmz7RIJ!k#g!u
zRs4WZR~Zk@tHA7X9Oj<p+|w<(x&x3xT_vMwSlu10F$`owBk}~PbxlB#!Jak%S`!vZ
zvq`9{$iAq)_wn)DKy^6|{k?}zU31&kPA}|OGYo9opszbar;%WNYYW2jNI4d*35)Kg
zBuU30qiHDR8j+@s0#}yMZkW<1BH4bf6yOG$5-|_eRRuelz@HzBIK<EuJU_&?jrwk*
zp!6Uxhk&uAgd6>U{qw*6e)WUhA3h0Z@;fa}GVlXRZjD0DB?7#vhiU3$CrSuE!V>|G
zV^EajEBn4V_Z2X+5{Ce}y`P=B944EmC(30+95P#|qUbV}vY=8H+`N;e==l^qpU{tR
zT@NHeAZR4|Iv~L8^wYU<0N3^K{E*4KOM8byYK_U;>(<a@)YDlrBPzN~)Y2h<Xth8W
z;_+&zMw+1#H%nxaCbNYqAr_^w_k5wQC<s3Y2RC$Pfl4F6HyxtH#p`#~_qX)yjH1X+
z#xk~JAS)7u+#E6zsv?s~Ta-gVD$_Cf?%^|E0*_Yf5a73x7yja_iCRss@6YpJq*Kvl
zvR(~gSnl60=YgBA6I;$Pv2tnT@s)Qrc5k;Mzo!}nilwM%x<Yevf|<}mkqO;c8$R~^
z#X~em=SqM8?xkC!7Y4eU%5EH|{W!{KRzh}tk1&d(YDL^QI`qeGVB$?e%Q=@WE)%eT
yKA`XG-CO%b#h*HP;r36!^a{0BRSGLRz4I@^I5ZnlnJc9L0000<MNUMnLSTYMxo%nj

literal 0
HcmV?d00001

diff --git a/playlist/static/style.css b/playlist/static/style.css
index ea5657c..de3ff32 100644
--- a/playlist/static/style.css
+++ b/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);
diff --git a/playlist/templates/MediaPlayer.html b/playlist/templates/MediaPlayer.html
index 93649eb..0053610 100644
--- a/playlist/templates/MediaPlayer.html
+++ b/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>
\ No newline at end of file