From efb4a92ba6f5551306c191a3e10dc5583782d986 Mon Sep 17 00:00:00 2001
From: Vincent Lark <v.lark@astonitf.com>
Date: Thu, 19 Oct 2023 19:18:03 +0200
Subject: [PATCH 1/3] Show a different icon when the player is paused

---
 src/assets/img/equalizer-paused.gif             | Bin 0 -> 153 bytes
 src/components/remotecontrol/remotecontrol.js   |   2 ++
 src/components/remotecontrol/remotecontrol.scss |   4 ++++
 3 files changed, 6 insertions(+)
 create mode 100644 src/assets/img/equalizer-paused.gif

diff --git a/src/assets/img/equalizer-paused.gif b/src/assets/img/equalizer-paused.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0c92e4e7dfff85280981ed5a9fa0e68cac842998
GIT binary patch
literal 153
zcmZ?wbhEHbRAi85_`m=H|NsA2{Lk%~o0y*Jo0y)NoXwY>n46nuYoKRh3W5xZKUo+>
zfC_a$szLe~n1WjR#ZJ%RkDtBq(9Jb=H*)Xl%1iWxNz4#k<(8v8wcyjaIXT)Dd*4;u
z-^uFf%y9mxHj|-~+QrO2irvS(g?24@5pYG@d~<8v?k5}7qs*2ciZWToz+epk12H%x

literal 0
HcmV?d00001

diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index b790edded..f0a922c40 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -525,6 +525,7 @@ export default function () {
                 if (img) {
                     img.classList.remove('lazy');
                     img.classList.add('playlistIndexIndicatorImage');
+                    img.classList.toggle('playlistIndexIndicatorPausedImage', playbackManager.paused());
                 }
             }
 
@@ -598,6 +599,7 @@ export default function () {
 
     function onPlayPauseStateChanged() {
         updatePlayPauseState(this.paused(), true);
+        onPlaylistUpdate();
     }
 
     function onStateChanged(event, state) {
diff --git a/src/components/remotecontrol/remotecontrol.scss b/src/components/remotecontrol/remotecontrol.scss
index aa8714e8d..caf90ed97 100644
--- a/src/components/remotecontrol/remotecontrol.scss
+++ b/src/components/remotecontrol/remotecontrol.scss
@@ -452,6 +452,10 @@
     display: none;
 }
 
+.playlistIndexIndicatorImage.playlistIndexIndicatorPausedImage {
+    background-image: url(../../assets/img/equalizer-paused.gif) !important;
+}
+
 .hideVideoButtons .videoButton {
     display: none;
 }

From f24e2998812d61bf5cb0e647c2bec1a293163d87 Mon Sep 17 00:00:00 2001
From: Vincent Lark <v.lark@astonitf.com>
Date: Fri, 20 Oct 2023 11:18:36 +0200
Subject: [PATCH 2/3] Avoid updating the playlist, just the paused icon class

---
 src/components/remotecontrol/remotecontrol.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index f0a922c40..0c6fe4982 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -455,6 +455,11 @@ export default function () {
         btnPlayPauseIcon.classList.remove('play_circle_filled', 'pause_circle_filled');
         btnPlayPauseIcon.classList.add(isPaused ? 'play_circle_filled' : 'pause_circle_filled');
 
+        const playlistIndicator = context.querySelector('.playlistIndexIndicatorImage');
+        if (playlistIndicator) {
+            playlistIndicator.classList.toggle('playlistIndexIndicatorPausedImage', isPaused);
+        }
+
         buttonVisible(btnPlayPause, isActive);
     }
 
@@ -599,7 +604,6 @@ export default function () {
 
     function onPlayPauseStateChanged() {
         updatePlayPauseState(this.paused(), true);
-        onPlaylistUpdate();
     }
 
     function onStateChanged(event, state) {

From 781b0858cb07a3e910413655d42953cba0123dc8 Mon Sep 17 00:00:00 2001
From: Vincent Lark <v.lark@astonitf.com>
Date: Fri, 20 Oct 2023 19:23:12 +0200
Subject: [PATCH 3/3] Use a static PNG image for paused indicator

---
 src/assets/img/equalizer-paused.gif             | Bin 153 -> 0 bytes
 src/assets/img/equalizer-paused.png             | Bin 0 -> 539 bytes
 src/components/remotecontrol/remotecontrol.scss |   2 +-
 3 files changed, 1 insertion(+), 1 deletion(-)
 delete mode 100644 src/assets/img/equalizer-paused.gif
 create mode 100644 src/assets/img/equalizer-paused.png

diff --git a/src/assets/img/equalizer-paused.gif b/src/assets/img/equalizer-paused.gif
deleted file mode 100644
index 0c92e4e7dfff85280981ed5a9fa0e68cac842998..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 153
zcmZ?wbhEHbRAi85_`m=H|NsA2{Lk%~o0y*Jo0y)NoXwY>n46nuYoKRh3W5xZKUo+>
zfC_a$szLe~n1WjR#ZJ%RkDtBq(9Jb=H*)Xl%1iWxNz4#k<(8v8wcyjaIXT)Dd*4;u
z-^uFf%y9mxHj|-~+QrO2irvS(g?24@5pYG@d~<8v?k5}7qs*2ciZWToz+epk12H%x

diff --git a/src/assets/img/equalizer-paused.png b/src/assets/img/equalizer-paused.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf2b033726cc9e3f1bd006e4c245291878d77e77
GIT binary patch
literal 539
zcmV+$0_6RPP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0004QX+uL$X=7sm
z04R}lkvmHRK@^2QqoPJ7h$%!YwotJ!5ER5xBA7-kk_f(<Wb+d8SauU6*a|il0SnQ_
zSK&X<R<KnN1Vs?Bv-j1Ataq}31W9I@y&q@hTxQOIYd)iAtu{Yoa|JUL3~0+Mt6Ik!
zZoKr-g)6FC#zJ^5Leug6K#QvPKGm!FzJ{Yap0IRi=@g#Q4YMFTBRs!ZFcj|!d-ZfQ
zE_^IJZps0LZ<HQ$_*HSr;ZMb8Bs2>y)l*B=ajcH@w3!ti6CTcHihA`t>Lxvj+)`NT
zpv)mGLIeq*5u?Zk84CEM<|MPmK7YlxNM1a;{0&N&;z*Ge@3^Q%>6(z56g?qdhLXzt
zf1Xxya>D7}6M*&?+x{4Vjy?D-+xE|iZU3G^>oZ*CYW}?BH2o!dxuy*tfoB^ou4`Is
zA1-%b;K_)Z(Tdb6)0IrZ`#JQkK>r=M*PN`X>zqA8WJ{jt77h+!RQ7w;{{X2sXX3c9
zpQ-==010qNS#tmY3labT3lag+-G2N4002`-L_t(&-tE{?3IGrgKtbgGSH=nOv9)c@
z9KiOXNNWH9l+_~_TgP+Y5jk^I-vI#v1PBlyKtQIMIXvR+<Om56AV7eC(yljg#xH{-
dBtQTF{M$H_3_28*w4(q3002ovPDHLkV1nd><ZJ){

literal 0
HcmV?d00001

diff --git a/src/components/remotecontrol/remotecontrol.scss b/src/components/remotecontrol/remotecontrol.scss
index caf90ed97..f6e9a82e5 100644
--- a/src/components/remotecontrol/remotecontrol.scss
+++ b/src/components/remotecontrol/remotecontrol.scss
@@ -453,7 +453,7 @@
 }
 
 .playlistIndexIndicatorImage.playlistIndexIndicatorPausedImage {
-    background-image: url(../../assets/img/equalizer-paused.gif) !important;
+    background-image: url(../../assets/img/equalizer-paused.png) !important;
 }
 
 .hideVideoButtons .videoButton {