From 0004dd85be19cc2ebbaffd3435ccadfebbcbe06b Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Mon, 18 Sep 2023 14:31:08 -0400
Subject: [PATCH] feat(ags): add anim on playpause button in player

---
 config/ags/js/media-player/mpris.js | 12 ++++++++----
 config/ags/scss/widgets/player.scss | 17 +++++++++--------
 config/ags/style.css                | 12 +++++-------
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/config/ags/js/media-player/mpris.js b/config/ags/js/media-player/mpris.js
index cc1304b2..1317d05d 100644
--- a/config/ags/js/media-player/mpris.js
+++ b/config/ags/js/media-player/mpris.js
@@ -47,7 +47,7 @@ export const CoverArt = (player, params) => CenterBox({
 });
 
 export const TitleLabel = (player, params) => Label({
-  ...params,                    
+  ...params,
   xalign: 0,
   maxWidthChars: 40,
   truncate: 'end',
@@ -167,7 +167,9 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
     if (prop == 'playBackStatus') {
       items.forEach(item => {
         item[1].setStyle(`background-color: ${player.colors.value.hoverAccent};
-                          color: ${player.colors.value.buttonText};`);
+                          color: ${player.colors.value.buttonText};
+                          min-height: 40px; min-width: 36px;
+                          margin-bottom: 1px; margin-right: 1px;`);
       });
     }
   },
@@ -176,7 +178,8 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
     if (prop == 'playBackStatus') {
       items.forEach(item => {
         item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
-                          color: ${player.colors.value.buttonText};`);
+                          color: ${player.colors.value.buttonText};
+                          min-height: 42px; min-width: 38px;`);
       });
     }
   },
@@ -190,7 +193,8 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
         if (prop == 'playBackStatus') {
           items.forEach(item => {
             item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
-                              color: ${player.colors.value.buttonText};`);
+                              color: ${player.colors.value.buttonText};
+                              min-height: 42px; min-width: 38px;`);
           });
         }
         else {
diff --git a/config/ags/scss/widgets/player.scss b/config/ags/scss/widgets/player.scss
index 440a0eed..06fa64a0 100644
--- a/config/ags/scss/widgets/player.scss
+++ b/config/ags/scss/widgets/player.scss
@@ -35,23 +35,24 @@
   }
 
   .pausebutton {
-    transition: background 250ms;
+    transition: background-color ease .2s,
+                color ease .2s;
     font-size: 15px;
-    min-height: 14px;
-    min-width: 14px;
-    padding: 14px 14px 14px 17px;
+    padding: 4px 4px 4px 7px;
   }
 
   .playing {
-    transition: all ease .2s;
+    transition: background-color ease .2s,
+                color ease .2s;
     border-radius: 15px;
   }
 
   .stopped,
   .paused {
-    border-radius: 26px;  
-    transition: all ease .2s;
-    padding: 14px 14px 14px 20px;
+    transition: background-color ease .2s,
+                color ease .2s;
+    border-radius: 26px;
+    padding: 4px 4px 4px 10px;
   }
   button label {
     min-width: 35px;
diff --git a/config/ags/style.css b/config/ags/style.css
index 63c22e5a..de40c058 100644
--- a/config/ags/style.css
+++ b/config/ags/style.css
@@ -617,19 +617,17 @@ calendar:indeterminate {
   .player .bottom {
     font-size: 30px; }
   .player .pausebutton {
-    transition: background 250ms;
+    transition: background-color ease .2s, color ease .2s;
     font-size: 15px;
-    min-height: 14px;
-    min-width: 14px;
-    padding: 14px 14px 14px 17px; }
+    padding: 4px 4px 4px 7px; }
   .player .playing {
-    transition: all ease .2s;
+    transition: background-color ease .2s, color ease .2s;
     border-radius: 15px; }
   .player .stopped,
   .player .paused {
+    transition: background-color ease .2s, color ease .2s;
     border-radius: 26px;
-    transition: all ease .2s;
-    padding: 14px 14px 14px 20px; }
+    padding: 4px 4px 4px 10px; }
   .player button label {
     min-width: 35px; }