updated media widget with better syntax and json

.config/eww/eww.yuck

@@ -36,7 +36,7 @@
        :class 'center'
        :space-evenly false
        :spacing 5
-    (music)
+    (media)
   )
 )
 

.config/eww/widgets.scss

@@ -32,4 +32,9 @@
     background: #420042;
     color: white;
   }
+
+  &--chromium {
+    background: #1a73e8;
+    color: white;
+  }
 }

.config/eww/widgets.yuck

@@ -4,31 +4,27 @@
   )
 )
 
-(defwidget music []
-  (box :class "music"
+(defvar playerIcons `{
+  "spotify": "",
+  "mpv": "",
+  "firefox": "",
+  "chromium": ""
+}`)
+(defwidget media []
+  (box :class "media"
        :halign "center"
        :valign "center"
-       :class {music == ''
+       :class { playerctl == '' || objectlength(playerctl) == 0
           ? 'music--off'
-          : arraylength(search(music, 'spotify')) >= 1
-            ? 'music--spotify'
-            : arraylength(search(music, 'firefox')) >= 1
-              ? 'music--firefox'
-              : arraylength(search(music, 'mpv')) >= 1
-                ? 'music--mpv'
-                : 'music--on'
-        }
-    {arraylength(search(music, 'spotify')) >= 1
-      ? replace(music, 'spotify', ' ')
-      : arraylength(search(music, 'firefox')) >= 1
-        ? replace(music, 'firefox', ' ')
-        : arraylength(search(music, 'mpv')) >= 1
-          ? replace(music, 'mpv', ' ')
-          : music
-    }
+          : matches(playerctl.player, 'spotify|firefox|mpv|chromium')
+            ? 'music--' + playerctl.player
+            : 'music--on' }
+    { matches(playerctl.player, 'spotify|firefox|mpv|chromium')
+        ? "${playerIcons[playerctl.player]}  ${substring(playerctl.artist, 0, 20)}${strlength(playerctl.artist) >= 20 ? '…' : ''} | ${substring(playerctl.title, 0, 25)}${strlength(playerctl.title) >= 25 ? '…' : ''}"
+        : "${playerctl.player} - ${substring(playerctl.artist, 0, 20)}${strlength(playerctl.artist) >= 20 ? '…' : ''} | ${s      ubstring(playerctl.title, 0, 25)}${strlength(playerctl.title) >= 25 ? '…' : ''}" }
   )
 )
 
-(deflisten music :initial ""
-  "playerctl --follow metadata --format '{{ playerName }} {{ trunc(artist,20) }} | {{ trunc(title,25) }}' || true"
+(deflisten playerctl :initial ""
+  `playerctl --follow metadata --format '{"player": "{{ playerName }}", "trackid": "{{ mpris:trackid }}", "length": "{{ duration(mpris:length) }}", "artUrl": "{{ mrpis:artUrl }}", "album": "{{ album }}", "albumArtist": "{{ xesam:albumArtist }}", "artist": "{{ artist }}", "autoRating": "{{ xesam:autoRating }}", "discNumber": "{{ xesam:discNumber }}", "title": "{{ title }}", "trackNumber": "{{ xesam:trackNumber }}", "url": "{{ xesam:url }}", "position": "{{ position }}"}'`
 )