Adds media display

.config/eww/eww.scss

@@ -0,0 +1,14 @@
+@import '../theming/library/entry.scss'
+
+.background {
+  background: none;
+}
+
+.widget {
+  box-shadow: $box-shadow-inner-less;
+  background: $background;
+  border-radius: $border-radius;
+  border: 1px solid $border-color;
+}
+
+@import "./widgets/media/style.scss"

.config/eww/eww.yuck

@@ -0,0 +1 @@
+(include "./widgets/media/media.yuck")

.config/eww/widgets/media/media.yuck

@@ -0,0 +1,97 @@
+(deflisten media-info :initial '{}' `~/.config/scripts/playerctl-metadata-json.sh`)
+(deflisten media-status :initial 'stopped' 'playerctl status --follow')
+(defpoll media-playback-info :interval '1s' :initial '0' `playerctl position`)
+
+(defvar statusIcons '{"Playing": "player_play", "Paused": "player_pause"}')
+
+(defvar media-close-time 0)
+
+(defwidget icon-button [icon onclick]
+  (button 
+    :onclick {onclick}
+    :vexpand false
+
+    (image :icon {icon})
+  )
+)
+
+(defwidget media-label [text ?class]
+  (label :text {text} :xalign "0" :class {class})
+)
+
+(defwidget media-texts [] 
+  (box 
+    :orientation "vertical"
+    :hexpand true
+    :valign "center"
+    :halign "start"
+    :space-evenly false
+    (media-label :class "header" :text {media-info["xesam:title"]})
+    (media-label :text {media-info["xesam:artist"]})
+    (media-label :text {media-info["xesam:album"]})
+  )
+)
+
+(defwidget media-control []
+  (box 
+    :visible {EWW_TIME < media-close-time}
+    :class "widget"
+    :width 512
+    :space-evenly false
+    :orientation "v"
+
+    (box
+      :class "data-display"
+      :valign "center"
+      :halign "start"
+      :space-evenly false
+      :spacing 20
+      (box
+        :width {512 - 128}
+
+        :space-evenly false
+        :orientation "vertical"
+        :spacing 10
+        (media-texts)
+        (box
+          :hexpand true
+          :vexpand true
+          :spacing 10
+          (icon-button
+            :icon "player_rew"
+            :onclick "~/.config/scripts/media.sh previous"
+            )
+
+          (icon-button
+            :icon {statusIcons[media-status] ?: "player_stop"}
+            :onclick "~/.config/scripts/media.sh play-pause"
+            )
+          (icon-button
+            :icon "player_fwd"
+            :onclick "~/.config/scripts/media.sh next"
+            )
+          )
+      )
+
+      (image
+        :path {substring(media-info["mpris:artUrl"], 7, 8000)}
+        :image-width 128
+      )
+    )
+    (progress
+      :height 1
+      :value {jq(media-playback-info, "tonumber(.)") / (jq(media-info["mpris:length"] ?: 1000, "tonumber(.)") / 1000000) * 100}
+      )
+  )
+)
+(defwindow media
+  :monitor 1
+  :geometry (geometry 
+    :x "10px"
+    :y "50px"
+    :width "512px"
+    :height "10%"
+    :anchor "top right")
+  :stacking "fg"
+  (media-control)
+  )

.config/eww/widgets/media/style.scss

@@ -0,0 +1,25 @@
+.media {
+  transition: opacity 0.2s ease-in-out;
+  opacity: 1;
+
+  .closed {
+    opacity: 0;
+  }
+
+  .data-display {
+    padding: 1rem;
+  }
+
+  label {
+    font-size: 1.5rem;
+    &.header {
+      font-size: 2rem;
+      font-weight: bolder;
+    }
+  }
+
+  progressbar {
+    padding: 0 1rem;
+  }
+}
+