(defwidget music []
  (box
    :class "music-window"
    :space-evenly false
    :style "background-color: ${music.color1}; border: 1px solid ${music.color2};"
    (box
      :class "music-cover-art"
      :style "background-image: url(\"${music.cover}\");")
    (box
      :orientation "v"
      :class "music-box"
      (label
        :class "music-title"
        :wrap true
        :text {music.title})
      (label
        :class "music-artist"
        :wrap true
        :text {music.artist})
      (centerbox
        :halign "center"
        :class "music-button-box icon"
        (button :class "music-button" :onclick "playerctl previous" "")
        (button :class "music-button" :onclick "playerctl play-pause" {music.status})
        (button :class "music-button" :onclick "playerctl next" ""))
      (box
        :orientation "v"
        (box
          (label
            :xalign 0
            :class "music-time"
            :text {music.position_time})
          (label
            :xalign 1
            :class "music-time"
            :text {music.length}))
        (box
          :class "music-bar"
          (scale
            ; doesn't work, looking for other ways
            ; :style "background: linear-gradient(to right, ${music.color1}, ${music.color2});"
            :onchange "playerctl position `bc <<< \"{} * $(playerctl metadata mpris:length) / 1000000 / 100\"`"
            :value {music.position}))))))

(defwindow music
  :stacking "fg"
  :focusable false
  :monitor 0
  :geometry (geometry
    :x "0%"
    :y "0%"
    :width "0%"
    :height "0%"
    :anchor "top center")
  (music))