musicus/data/ui/player_bar.blp

using Gtk 4.0;
using Adw 1;

template $MusicusPlayerBar : Gtk.Box {
  styles ["playerbar"]
  orientation: vertical;
  margin-start: 6;
  margin-end: 6;
  margin-top: 12;
  margin-bottom: 12;
  spacing: 6;

  Gtk.Box {
    spacing: 6;
    
    Gtk.Box {
      valign: center;
      hexpand: true;
      margin-start: 10;
      orientation: vertical;

      Gtk.Label title_label {
        styles ["title"]
        halign: start;
        ellipsize: end;
      }

      Gtk.Label subtitle_label {
        styles ["subtitle", "dim-label"]
        halign: start;
        ellipsize: end;
      }
    }

    Gtk.Button back_button {
      styles ["circular", "flat"]
      valign: center;
      icon-name: "media-skip-backward-symbolic";
      clicked => $previous() swapped;
    }

    Gtk.ToggleButton playlist_button {
      styles ["flat", "circular"]
      valign: center;
      icon-name: "playlist-symbolic";
      clicked => $show_playlist() swapped;
    }

    Gtk.Button forward_button {
      styles ["circular", "flat"]
      valign: center;
      icon-name: "media-skip-forward-symbolic";
      clicked => $next() swapped;
    }
  }

  Gtk.Box {
    spacing: 6;

    Gtk.Button play_button {
      styles ["circular", "flat"]
      valign: center;
      icon-name: "media-playback-start-symbolic";
      clicked => $play_pause() swapped;
    }

    Gtk.Label current_time_label {
      styles ["caption", "numeric"]
      valign: center;
      label: "00:00";
    }

    Gtk.Scale slider {
      valign: center;
      hexpand: true;
      adjustment: Gtk.Adjustment {
        lower: 0;
        upper: 1;
        value: 0.2;
        step-increment: 0.01;
      };
    }

    Gtk.Label remaining_time_label {
      styles ["caption", "numeric"]
      valign: center;
      label: "01:00";
    }
  }
}