feat(eww): add spotify widget

config/eww/eww.scss

@@ -5,5 +5,6 @@
 @import "colors.scss";
 @import "date/date.scss";
 @import "powermenu/powermenu.scss";
+@import "playerinfo/playerinfo.scss";
 @import "quick-settings/quick-settings.scss";
 @import "traybuttons/traybuttons.scss";

config/eww/eww.yuck

@@ -1,6 +1,7 @@
 (include "variables.yuck")
 (include "date/date.yuck")
 (include "powermenu/powermenu.yuck")
+(include "playerinfo/playerinfo.yuck")
 (include "closer/closer.yuck")
 (include "quick-settings/quick-settings.yuck")
 (include "traybuttons/traybuttons.yuck")

config/eww/playerinfo/playerinfo.scss

@@ -0,0 +1,42 @@
+.playerinfo {
+  padding: 10px;
+  min-width: 400px;
+  border-radius: 15px;
+  border-top: 2px solid $contrastbg;
+  border-bottom: 2px solid $contrastbg;
+  transition: background 250ms;
+  .top {
+    font-size: 23px;
+  }
+  .metadata {
+    .title{
+      font-weight: 500;
+      transition: text 250ms;
+    }
+    .artist{
+      font-weight: 400;
+      font-size: 15px;
+      transition: text 250ms;
+    }
+  }
+  .bottom {
+    font-size: 30px;
+    padding: 0 10px 0 10px;
+  }
+
+  .pausebutton {
+    transition: background 250ms;
+    padding: 14px 16px;
+  }
+
+  .playing {
+    transition: all ease .2s;
+    border-radius: 15px;
+  }
+
+  .paused {
+    border-radius: 26px;  
+    transition: all ease .2s;
+    padding: 14px 14px 14px 18px;
+  }
+}

config/eww/playerinfo/playerinfo.yuck

@@ -0,0 +1,83 @@
+(defpoll player :interval "1s" "echo spotify")
+(defpoll music_cover :interval "1s" "$EWW_PATH/music.sh cover") ;done
+(defvar music_accent "rgb(0,0,0)") ;done
+(defvar button_accent "rgb(0,0,0)") ;done
+(defvar button_text "rgb(255,255,255)") ;done
+(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")
+
+(defwidget playerinfo []
+  (centerbox  :class "playerinfo"
+        :style "background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 30%, ${music_accent}), url(\"${music_cover}\"); 
+                background-size: cover;
+                background-position: center;"
+        :orientation "v"
+    (box  :class "top"
+          :halign "start"
+          :valign "start"
+          :style "color: ${button_accent};"
+        "${player == 'spotify' ? '' : '爵' }"
+    )
+    (box  :class "center"
+          :orientation "h"
+          :space-evenly false
+      (box  :class "metadata"
+            :orientation "v"
+            :halign "start"
+            :valign "center"
+            :hexpand true
+        (label :limit-width 25 :halign "start" :text title :class "title")
+        (label :limit-width 25 :halign "start" :text artist :class "artist")
+      )
+      (centerbox :orientation "v"
+        (label)
+        (eventbox :class "pausebutton ${music_status == 'Playing' ? 'playing' : 'paused'}"
+                  :halign "end"
+                  :style "background-color: ${button_accent}; 
+                      color: ${button_text};"
+                  :onclick "playerctl -p spotify play-pause"
+                  :cursor "pointer"
+          
+          (label  :text "${music_status == 'Playing' ? '  ' : ''}" 
+                  :width 40
+                  :height 40
+          )
+        )
+        (label)
+      )
+    )
+    (box  :class "bottom"
+          :style "color: ${button_accent};"
+      (eventbox :valign "end"
+                :halign "start"
+                :onclick "playerctl -p spotify previous & $EWW_PATH/music.sh cover"
+                :class "previousbutton"
+                :cursor "pointer"
+              "󰒮"
+      )
+      (eventbox :valign "end"
+                :halign "end"
+                :onclick "playerctl -p spotify next & $EWW_PATH/music.sh cover"
+                :class "nextbutton"
+                :cursor "pointer"
+              "󰒭"
+      )
+    )
+  )
+)
+(defwindow playerinfo
+  :monitor 0
+  :stacking "overlay"
+  :exclusive "ignore"
+  :focusable "false"
+  :geometry (geometry :x "800px"
+                      :y "10px"
+                      :width "0px"
+                      :height "0px"
+                      :anchor "bottom left"
+            )
+  (playerinfo)
+)
+
+

config/eww/scripts/heart.sh

@@ -32,6 +32,7 @@ startup() {
 
   "$HYPR_PATH"/osk-toggle.sh getState &
   "$EWW_PATH"/on-release.sh &
+  "$EWW_PATH"/music.sh accents &
   input-emulator start mouse -n &
 
   if grep -q 󰣐 "$FILE"; then

config/eww/scripts/music.sh

@@ -0,0 +1,34 @@
+#!/usr/bin/env bash  
+
+get_accents() {
+  accents="$(coloryou /tmp/cover.jpg | sed 's/,//g' | sed 's/}//' | sed 's/'\''//g')"
+  music_accent=$(echo "$accents" | awk '{ print $2 }')
+  eww update music_accent="$music_accent"
+  
+  button_accent=$(echo "$accents" | awk '{ print $4 }')
+  eww update button_accent="$button_accent"
+  
+  button_text=$(echo "$accents" | awk '{ print $6 }')
+  eww update button_text="$button_text"
+}
+
+get_cover() {
+  existing_file="/tmp/cover.jpg"
+  new_image_url=$(playerctl -p spotify metadata mpris:artUrl)
+  existing_hash=$(md5sum "$existing_file" | awk '{print $1}')
+
+  # Download the new image only if the hashes are different
+  if [[ "$(wget -qO- "$new_image_url" | md5sum | awk '{print $1}')" != "$existing_hash" ]]; then
+    wget -qO "$existing_file" "$new_image_url"
+    get_accents
+  fi
+
+  if [[ -f "/tmp/cover.jpg" ]]; then
+    echo "/tmp/cover.jpg"
+  else
+    echo "randomfile"
+  fi
+}
+
+[[ "$1" == "accents" ]] && get_accents
+[[ "$1" == "cover" ]] && get_cover

config/eww/traybuttons/traybuttons.yuck

@@ -101,7 +101,7 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Heart Toggle
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-(defvar heart-ts "default")
+(defvar heart-ts "false")
 (defvar heart-run-off "false")
 (defwidget heart-toggle-on []
   (eventbox :class "toggle-on"