added music dash-widget

modules/ewwbar/eww-config/dashboard/dashboard.scss

@@ -41,6 +41,40 @@
     -1px  0   0 #000;
 }
 
+.music_controls {
+    margin: 10px;
+}
+.album_art {
+    background-size: 140px;
+	min-height: 140px;
+	min-width: 140px;
+	margin: 20px;
+	border-radius: 14px;
+}
+.music_title {
+    font-size: 20px;
+}
+.music_artist {
+    font-size: 15px;
+}
+.music_button {
+    font-size: 32px;
+    font-weight: bold;
+}
+.music_bar scale trough highlight {
+	all: unset;
+	background-color: #B48EAD;
+	border-radius: 8px;
+}
+.music_bar scale trough {
+	all: unset;
+	background-color: #3A404C;
+	border-radius: 8px;
+	min-height: 20px;
+	min-width: 200px;
+	margin : 10px 0px 0px 0px;
+}
+
 .btn_logout, .btn_restart, .btn_shutdown, .btn_switch_windows {
     font-size: 40px;
     font-weight: bold;

modules/ewwbar/eww-config/dashboard/dashboard.yuck

@@ -23,7 +23,6 @@
 
 (defwidget dash_clock_bg []
     (box :class "dash_clock_bg"
-         ;; :style "background-image: ${clock_gradient}"
          :style "background-image: ${clock_gradient}"
     ))
 
@@ -40,9 +39,66 @@
          (label :class "dash_clock_date"
                 :halign "center"
                 :text {formattime(EWW_TIME, "%B, %d %Y")})
-        ;; (box :vexpand "true")
                 ))
 
+(deflisten music_artist :initial ""
+    "playerctl --follow metadata artist || true")
+
+(deflisten music_title :initial ""
+    "playerctl --follow metadata title || true")
+(deflisten music_cover :initial ""
+    "playerctl --follow metadata mpris:artUrl || true")
+(deflisten music_percentage :initial "0"
+    "playerctl --follow metadata \"{{ (position * 100 / mpris:length) }}\" || true")
+(deflisten MUSIC_STATUS :initial "true"
+    "playerctl --follow status")
+
+(defwidget dash_music_state []
+    (box :class "dash_window"
+         :orientation "h"
+         :space-evenly "false"
+         :vexpand "false"
+         :hexpand "false"
+         (box :class "album_art"
+              :vexpand "false"
+              :hexpand "false"
+              :style "background-image: url('${music_cover}');")
+         (box :orientation "v"
+              :class "music_controls"
+              :spacing 10 
+              :space-evenly "false"
+              :vexpand "false"
+              :hexpand "false" 
+             (label :class "music_title"
+                    :halign "center"
+                    :wrap "true"
+                    :limit-width 20
+                    :text music_title
+                    )
+             (label :class "music_artist"
+                    :halign "center"
+                    :text music_artist 
+                    )
+            (box :orientation "h" 
+                 :spacing 20 
+                 :halign "center"
+                 :space-evenly "true" 
+                 :vexpand "false" 
+                 :hexpand "false"
+                 (button :class "music_button" :onclick "playerctl previous" "󰒫")
+				 (button :class "music_button" :onclick "playerctl play-pause" {
+                    MUSIC_STATUS == "Playing" ? "󰏤" : MUSIC_STATUS == "Paused" ? "" : "" 
+                })
+                 (button :class "music_button" :onclick "playerctl next" "󰒬")
+
+            )
+            (box :class "music_bar" :halign "center" :vexpand "false" :hexpand "false" 
+				(scale :min 0 :active "true" :max 100 :value music_percentage)
+            )
+        )
+    )
+)
+
 (defwidget logout []
     (box :class "dash_window"
          :vexpand "false"
@@ -98,6 +154,17 @@
     (dash_clock_bg)
 )
 
+(defwindow dash_music 
+    :stacking "bg"
+    :focusable "false"
+    :monitor 0
+    :geometry (geometry :x 760
+                        :y 575
+                        :width 400
+                        :height 150)
+    (dash_music_state)
+)
+
 (defwindow logout
     :stacking "bg"
     :focusable "false"