audrey/resources/playbar.blp

using Gtk 4.0;
using Adw 1;

template $AudreyUiPlaybar: Adw.Bin {
  child: Overlay {
    [overlay]
    ProgressBar pulse_bar {
      styles [
        "osd"
      ]

      visible: bind template.show-pulse-bar;
      valign: start;
    }

    child: CenterBox {
      hexpand: true;

      styles [
        "toolbar",
      ]

      [start]
      Box start {
        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;
            label: bind $song_title(template.song) as <string>;
            ellipsize: end;
            max-width-chars: 1;
            hexpand: true;
          }

          Label {
            styles [
              "caption"
            ]

            xalign: 0;
            label: bind $song_artist(template.song) as <string>;
            ellipsize: end;
            max-width-chars: 1;
            hexpand: true;
          }

          Label {
            styles [
              "caption"
            ]

            xalign: 0;
            label: bind $song_album(template.song) as <string>;
            ellipsize: end;
            max-width-chars: 1;
            hexpand: true;
          }
        }
      }

      [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;
            action-name: "app.seek-backward";
          }

          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;
            action-name: "app.seek-forward";
          }

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

      [end]
      Box end {
        Separator {
          styles [
            "spacer"
          ]

          hexpand: true;
        }

        Button {
          icon-name: "heart-empty-symbolic"; // placeholder
          halign: end;
          valign: center;
          sensitive: bind template.idle-active inverted;
        }

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

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

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

// make sure the middle is centered always
SizeGroup {
  mode: horizontal;

  widgets [
    start,
    end
  ]
}