musicus/data/ui/player_bar.blp

using Gtk 4.0;

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

  styles [
    "playerbar",
  ]

  Gtk.Box {
    spacing: 6;

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

      Gtk.Label title_label {
        ellipsize: end;
        wrap: true;
        natural-wrap-mode: none;
        lines: 2;
        xalign: 0.0;
        halign: start;

        styles [
          "title",
        ]
      }

      Gtk.Label subtitle_label {
        ellipsize: end;
        wrap: true;
        natural-wrap-mode: none;
        lines: 2;
        xalign: 0.0;
        halign: start;

        styles [
          "subtitle",
          "dim-label",
        ]
      }
    }

    Gtk.Button back_button {
      icon-name: "media-skip-backward-symbolic";
      valign: center;
      clicked => $previous() swapped;

      styles [
        "circular",
        "flat",
      ]
    }

    Gtk.ToggleButton playlist_button {
      icon-name: "playlist-symbolic";
      valign: center;
      clicked => $show_playlist() swapped;

      styles [
        "flat",
        "circular",
      ]
    }

    Gtk.Button forward_button {
      valign: center;
      icon-name: "media-skip-forward-symbolic";
      clicked => $next() swapped;

      styles [
        "circular",
        "flat",
      ]
    }
  }

  Gtk.Box {
    spacing: 6;

    Gtk.Button play_button {
      valign: center;
      icon-name: "media-playback-start-symbolic";
      clicked => $play_pause() swapped;

      styles [
        "circular",
        "flat",
      ]
    }

    Gtk.Label current_time_label {
      label: "00:00";
      tooltip-text: _("Elapsed time");
      valign: center;

      styles [
        "caption",
        "numeric",
      ]
    }

    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 {
      label: "01:00";
      tooltip-text: _("Remaining time");
      valign: center;

      styles [
        "caption",
        "numeric",
      ]
    }
  }
}