audrey/src/window.blp

using Gtk 4.0;
using Adw 1;

template $WaveletWindow: Adw.ApplicationWindow {
  title: _("Wavelet");
  default-width: 800;
  default-height: 600;

  content: Box {
    orientation: vertical;

    Adw.OverlaySplitView {
      vexpand: true;

      [sidebar]
      Adw.NavigationPage {
        width-request: 100;
        title: _("Wavelet");

        Adw.ToolbarView {
          [top]
          Adw.HeaderBar {}

          content: Box {
            orientation: vertical;

            ListBox sidebar {
              styles [
                "navigation-sidebar",
              ]

              row-activated => $on_sidebar_row_activated();

              ListBoxRow sidebar_setup {
                Label {
                  xalign: 0;
                  label: _("Setup");
                }
              }

              ListBoxRow sidebar_play_queue {
                Label {
                  xalign: 0;
                  label: _("Play queue");
                }
              }
            }

            Separator {}

            ListBox {
              selection-mode: none;

              styles [
                "navigation-sidebar",
              ]

              Adw.ButtonRow shuffle_all_tracks {
                title: _("Shuffle all tracks");
                start-icon-name: "media-playlist-shuffle";
                sensitive: false;
              }
            }
          };
        }
      }

      [content]
      Stack stack {
        StackPage {
          name: "setup";
          title: _("Setup");

          child: $WaveletSetup setup {};
        }

        StackPage {
          name: "play_queue";
          title: _("Play queue");

          child: $WaveletPlayQueue play_queue {};
        }
      }
    }

    [bottom]
    Box {
      orientation: horizontal;

      styles [
        "toolbar",
      ]

      Picture {
        paintable: bind template.playing_cover_art;
      }

      Box {
        orientation: vertical;
        valign: center;

        Label {
          styles [ "caption-heading" ]
          halign: start;
          label: bind template.song as <$WaveletSong>.title;
        }

        Box {
          halign: start;
          Label {
            styles [ "caption" ]
            label: bind template.song as <$WaveletSong>.artist;
          }
          Label {
            styles [ "caption" ]
            label: " - ";
          }
          Label {
            styles [ "caption" ]
            label: bind template.song as <$WaveletSong>.album;
          }
          Label {
            styles [ "caption" ]
            label: " - ";
          }
          Label {
            styles [ "caption" ]
            label: bind template.song as <$WaveletSong>.year;
          }
        }

        Box {
          halign: start;
          orientation: horizontal;

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

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

          Scale play_position {
            orientation: horizontal;
            width-request: 200;

            adjustment: Adjustment {
              lower: 0;
              value: bind template.position;
              upper: bind template.playbin as <$Playbin>.duration;
            };

            change-value => $on_play_position_seek ();
          }

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

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

      Separator {
        styles [
          "spacer",
        ]

        hexpand: true;
      }

      Button {
        icon-name: "media-skip-backward";
        valign: center;
      }

      Button {
        icon-name: "media-playback-start";
        valign: center;

        clicked => $on_play_pause_clicked ();
      }

      Button {
        icon-name: "media-skip-forward";
        valign: center;
      }

      Button {
        icon-name: "non-starred";
        valign: center;
      }

      Button mute {
        icon-name: "audio-volume-high";
        valign: center;
      }

      Scale {
        orientation: horizontal;
        width-request: 130;

        adjustment: Adjustment {
          lower: 0.0;
          value: bind template.volume bidirectional;
          upper: 1.0;
        };
      }
    }
  };
}