feat: add more buttons to spotify widget

config/eww/playerinfo/playerinfo.scss

@@ -21,18 +21,20 @@
   }
   .bottom {
     font-size: 30px;
-    padding: 0 10px 0 10px;
   }
 
   .pausebutton {
     transition: background 250ms;
     padding: 14px 16px;
-    font-size: 20px;
+    font-size: 15px;
   }
 
   .playing {
     transition: all ease .2s;
     border-radius: 15px;
+    label {
+      padding-left: 4px;
+    }
   }
 
   .paused {
@@ -41,3 +43,22 @@
     padding: 14px 14px 14px 18px;
   }
 }
+
+.previousbutton,
+.nextbutton,
+.shuffle,
+.repeat {
+  border-radius: 100%;
+  transition: background-color 200ms;
+  &:hover {
+    border-radius: 100%;
+    background-color: rgba(127, 132, 156, 0.4);
+    transition: background-color 200ms;
+  }
+}
+
+.repeat {
+  label {
+    padding-right: 8px;
+  }
+}

config/eww/playerinfo/playerinfo.yuck

@@ -6,6 +6,9 @@
 (defpoll music_status :interval "1s" "playerctl -p spotify status")
 (defpoll title :interval "1s" "playerctl -p spotify metadata title")
 (defpoll artist :interval "1s" "playerctl -p spotify metadata artist")
+(defvar button_height "42")
+(defpoll shuffle_status :interval "1s" "playerctl -p spotify shuffle")
+(defpoll repeat_icon :interval "1s" "$EWW_PATH/music.sh loop_status")
 
 (defwidget playerinfo []
   (centerbox  :class "playerinfo"
@@ -33,15 +36,17 @@
       (centerbox :orientation "v"
         (label)
         (eventbox :class "pausebutton ${music_status == 'Playing' ? 'playing' : 'paused'}"
-                  :halign "end"
+                  :halign "left"
                   :style "background-color: ${button_accent}; 
-                      color: ${button_text};"
+                          color: ${button_text};"
                   :onclick "playerctl -p spotify play-pause"
                   :cursor "pointer"
+                  :onhover "eww update button_height=41"
+                  :onhoverlost "eww update button_height=42"
           
-          (label  :text "${music_status == 'Playing' ? '  ' : ''}" 
+          (label  :text "${music_status == 'Playing' ? ' ' : ''}" 
-                  :width 40
+                  :width button_height
-                  :height 40
+                  :height button_height
           )
         )
         (label)
@@ -53,15 +58,31 @@
                 :halign "start"
                 :onclick "playerctl -p spotify previous & $EWW_PATH/music.sh cover"
                 :class "previousbutton"
+                :width 40
                 :cursor "pointer"
               "󰒮"
       )
-      (eventbox :valign "end"
+      (box :valign "end"
-                :halign "end"
+           :halign "end"
-                :onclick "playerctl -p spotify next & $EWW_PATH/music.sh cover"
+                
-                :class "nextbutton"
+        (eventbox :onclick "playerctl -p spotify next & $EWW_PATH/music.sh cover"
-                :cursor "pointer"
+                  :class "nextbutton"
-              "󰒭"
+                  :width 40
+                  :cursor "pointer"
+                "󰒭"
+        )
+        (eventbox :onclick "playerctl -p spotify shuffle toggle"
+                  :class "shuffle"
+                  :width 40
+                  :cursor "pointer"
+                "${shuffle_status == 'On' ? '󰒝' : '󰒞'}"
+        )
+        (eventbox :onclick "$EWW_PATH/music.sh loop"
+                  :class "repeat"
+                  :width 40
+                  :cursor "pointer"
+                "${repeat_icon}"
+        )
       )
     )
   )
@@ -75,7 +96,7 @@
                       :y "10px"
                       :width "0px"
                       :height "0px"
-                      :anchor "bottom left"
+                      :anchor "top left"
             )
   (playerinfo)
 )

config/eww/scripts/close-opened.sh

@@ -19,6 +19,7 @@ do
   [[ "$element" != "osk" ]] &&
   [[ "$element" != "tablet" ]] &&
   [[ "$element" != "quick-settings-toggle" ]] &&
+  [[ "$element" != "playerinfo" ]] &&
   #[[ "$element" != "" ]] &&
 	eww close "$element"
 done

config/eww/scripts/music.sh

@@ -1,5 +1,46 @@
 #!/usr/bin/env bash
 
+loop() {
+  loop_status=$(playerctl -p spotify loop)
+
+  case $loop_status in
+    "None" )
+      playerctl -p spotify loop Playlist
+      eww update repeat_icon="󰑖"
+      ;;
+    "Track" )
+      playerctl -p spotify loop None
+      eww update repeat_icon="󰑗"
+      ;;
+    "Playlist" )
+      playerctl -p spotify loop Track
+      eww update repeat_icon="󰑘"
+      ;;
+    * )
+      echo "Unknown loop status."
+      ;;
+  esac
+}
+
+loop_status() {
+  loop_status=$(playerctl -p spotify loop)
+
+  case $loop_status in
+    "None" )
+      eww update repeat_icon="󰑗"
+      ;;
+    "Track" )
+      eww update repeat_icon="󰑘"
+      ;;
+    "Playlist" )
+      eww update repeat_icon="󰑖"
+      ;;
+    * )
+      echo "Unknown loop status."
+      ;;
+  esac
+}
+
 get_accents() {
   accents="$(coloryou /tmp/cover.jpg | sed 's/,//g' | sed 's/}//' | sed 's/'\''//g')"
   music_accent=$(echo "$accents" | awk '{ print $2 }')
@@ -31,4 +72,6 @@ get_cover() {
 }
 
 [[ "$1" == "accents" ]] && get_accents
+[[ "$1" == "loop" ]] && loop
+[[ "$1" == "loop_status" ]] && loop_status
 [[ "$1" == "cover" ]] && get_cover