eww -> music: Created widget

bar/eww/eww.scss

@@ -1,5 +1,6 @@
 @import "./theme.scss";
 @import "./bar/style.scss";
+@import "./music/style.scss";
 @import "./timer/style.scss";
 @import "./freqtrade/style.scss";
 

bar/eww/eww.yuck

@@ -1,4 +1,5 @@
 (include "./bar/widget.yuck")
+(include "./music/widget.yuck")
 (include "./timer/widget.yuck")
 (include "./freqtrade/widget.yuck")
 

bar/eww/music/style.scss

@@ -0,0 +1,47 @@
+.music {
+  background-color: $background;
+  border-radius: 20px;
+
+  padding: 20px;
+
+  .art {
+    background-size: cover;
+    min-width: 200px;
+    min-height: 200px;
+
+    border-radius: 20px;
+
+    transition: opacity 1s ease-in-out;
+  }
+
+  .player-container {
+    min-width: 300px;
+
+    .title {
+      font-size: 20px;
+      color: $purple;
+    }
+
+    .artist {
+      font-size: 16px;
+      color: $yellow;
+    }
+
+    button {
+      min-width: 32px;
+      min-height: 32px;
+
+      font-size: 20px;
+    }
+
+    button.playpause {
+      border-radius: 50%;
+      background-color: $green;
+      color: $background;
+
+      padding-top: 4px;
+      padding-right: 2px;
+      padding-left: 2px;
+    }
+  }
+}

bar/eww/music/widget.yuck

@@ -0,0 +1,74 @@
+(defvar COVER_HIDDEN false) ; Bcz sometimes I listen to Geoxor, so, yeah...
+(defvar FALLBACK_COVER "/home/gaspard/Images/Icons/music-disk.png")
+(defvar PLAY_STATUS "⏸︎")
+
+(deflisten music_info :initial '{"title": "", "artist": "", "artUrl": "", "status": ""}' "~/.config/eww/scripts/get-music-info")
+
+(defwidget music []
+  (box
+    :class "music"
+    :orientation "h"
+    :spacing 25
+    :space-evenly false
+    (button
+      :class "art"
+      :vexpand false 
+      :hexpand false
+      :style "background-image: url('${COVER_HIDDEN ? FALLBACK_COVER : music_info.artUrl ?: FALLBACK_COVER }');"
+      :onclick `
+        if [ "$(eww get COVER_HIDDEN)" == "true" ]; then
+          eww update COVER_HIDDEN=false
+        else
+          eww update COVER_HIDDEN=true
+        fi
+      `)
+    (box
+      :class "player-container"
+      :orientation "v"
+      :vexpand true
+      :space-evenly false
+      :spacing 25
+      (label
+        :class "title"
+        :limit-width 22
+        :text "${music_info.title ?: "Not playing"}")
+      (label
+        :class "artist"
+        :limit-width 26
+        :text "${music_info.artist}")
+      (box
+        :orientation "h"
+        :halign "center"
+        :valign "center"
+        :spacing 25
+        :space-evenly false
+        :vexpand true
+        (button
+          :vexpand false
+          :onclick "playerctl previous"
+          :class "previous" " ⏪︎")
+        (button
+          :vexpand false
+          :onclick "playerctl play-pause"
+          :class "playpause" "${music_info.status == "Playing" ? "⏸︎" : "⏵︎"}")
+        (button
+          :vexpand false
+          :onclick "playerctl next"
+          :class "next" " ⏩︎")
+      )
+    )
+  )
+)
+
+(defwindow music
+  :namespace "eww.music"
+  :monitor 0
+  :geometry (geometry
+    :x "19%"
+    :y "10%"
+    :anchor "top left")
+  :stacking "bg"
+  :focusable false
+  :exclusive true
+  (music)
+)

bar/eww/scripts/get-music-info

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+info (){
+	title=$(playerctl metadata xesam:title 2> /dev/null)
+	artist=$(playerctl metadata xesam:artist 2> /dev/null)
+	artUrl=$(playerctl metadata mpris:artUrl 2> /dev/null)
+	status=$(playerctl status 2> /dev/null)
+	echo "{\"title\": \"${title}\", \"artist\": \"${artist}\", \"artUrl\": \"${artUrl}\", \"status\": \"${status}\"}"
+}
+
+info
+dbus-monitor "path=/org/mpris/MediaPlayer2,member=PropertiesChanged" | while read -r line; do
+	info
+done