audrey/resources/playbar.blp

using Gtk 4.0;
using Adw 1;

template $AudreyUiPlaybar: Adw.Bin {
  child: CenterBox {
    hexpand: true;

    styles [
      "toolbar",
    ]

    [start]
    Box {
      AspectFrame {
        visible: false; // FIXME annoying annoying annoying annoying
        // visible: bind template.show_cover_art;
        vexpand: true;
        ratio: 1.0;
        obey-child: false;

        child: Picture {
          content-fit: scale_down;
          paintable: bind template.playing_cover_art;
        };
      }

      Box {
        margin-start: 6;
        orientation: vertical;
        valign: center;

        Label {
          styles [
            "heading"
          ]

          xalign: 0;
          halign: start;
          label: bind template.song as <$AudreyPlaybinSong>.title;
          ellipsize: end;
        }

        Label {
          styles [
            "caption"
          ]

          xalign: 0;
          label: bind template.song as <$AudreyPlaybinSong>.artist;
          ellipsize: end;
        }

        Label {
          styles [
            "caption"
          ]

          xalign: 0;
          label: bind template.song as <$AudreyPlaybinSong>.album;
          ellipsize: end;
        }
      }
    }

    [center]
    Box {
      orientation: vertical;
      valign: center;

      CenterBox {
        [start]
        Label play_position_label {
          styles [
            "caption",
            "numeric",
          ]

          label: bind $format_timestamp(template.position) as <string>;
        }

        [center]
        Scale play_position {
          name: "seek-scale";
          orientation: horizontal;
          width-request: 400;
          sensitive: bind template.idle-active inverted;
          adjustment: Adjustment {
            lower: 0;
            value: bind template.position;
            upper: bind template.duration;
          };

          change-value => $on_play_position_seek() swapped;
        }

        [end]
        Label play_duration {
          styles [
            "caption",
            "numeric",
          ]

          label: bind $format_timestamp(template.duration) as <string>;
        }
      }

      Box {
        halign: center;
        orientation: horizontal;

        Button {
          icon-name: "media-skip-backward";
          valign: center;
          sensitive: bind template.idle-active inverted;
          clicked => $on_skip_backward_clicked() swapped;
        }

        Button {
          icon-name: "media-seek-backward";
          valign: center;
          sensitive: bind template.idle-active inverted;
          clicked => $seek_backward() swapped;
        }

        Button {
          icon-name: bind $play_pause_icon_name(template.idle-active, template.pause) as <string>;
          valign: center;
          sensitive: bind $play_pause_sensitive(template.playlist-count) as <bool>;
          clicked => $on_play_pause_clicked() swapped;
        }

        Button {
          icon-name: "media-seek-forward";
          valign: center;
          sensitive: bind template.idle-active inverted;
          clicked => $seek_forward() swapped;
        }

        Button {
          icon-name: "media-skip-forward";
          valign: center;
          sensitive: bind template.idle-active inverted;
          clicked => $on_skip_forward_clicked() swapped;
        }
      }
    }

    [end]
    Box {
      Button {
        icon-name: "non-starred";
        valign: center;
      }

      Button {
        icon-name: bind $mute_button_icon_name(template.mute) as <string>;
        valign: center;
        clicked => $on_mute_toggle() swapped;
      }

      Scale {
        name: "volume-scale";
        orientation: horizontal;
        width-request: 130;

        adjustment: Adjustment {
          lower: 0;
          value: bind template.volume bidirectional;
          upper: 100;
        };
      }
    }
  };
}