play queue experiment

src/style.css

@@ -1,3 +1,11 @@
+/*
+#play-queue-page {
+  background-image: linear-gradient(
+    var(--window-bg-color),
+    var(--accent-bg-color));
+}
+*/
+
 #seek-scale slider {  
   margin: 0px;
   opacity: 0%;
@@ -11,6 +19,10 @@
   min-height: 15px;
 }
 
-.playing .title-label {
+#play-queue .playing .title-label {
   font-weight: bold;
 }
+
+.drag-handle {
+  color: color-mix(in srgb, currentColor 40%, transparent);
+}

src/ui/play_queue.blp

@@ -1,36 +1,30 @@
 using Gtk 4.0;
-using Adw 1;
 
-template $UiPlayQueue: Adw.NavigationPage {
-  title: _("Play queue");
+template $UiPlayQueue: Box {
+  name: "play-queue";
 
-  Adw.ToolbarView {
-    [top]
-    Adw.HeaderBar {
-      Button {
-        icon-name: "edit-clear-all";
-        clicked => $on_clear ();
-        sensitive: bind template.can_clear_all;
-      }
-    }
+  ScrolledWindow {
+    hexpand: true;
+    vscrollbar-policy: always;
+    hscrollbar-policy: never;
 
-    ScrolledWindow {
-      ListView view {
-        show-separators: true;
-        single-click-activate: true;
+    ListView view {
+      show-separators: true;
+      single-click-activate: true;
 
-        activate => $on_row_activated ();
+      styles [ "rich-list" ]
 
-        model: NoSelection {
-          model: bind template.playbin as <$Playbin>.play_queue;
-        };
+      activate => $on_row_activated ();
 
-        factory: SignalListItemFactory {
-          setup => $on_song_list_setup ();
-          bind => $on_song_list_bind ();
-          unbind => $on_song_list_unbind ();
-        };
-      }
+      model: NoSelection {
+        model: bind template.playbin as <$Playbin>.play_queue;
+      };
+
+      factory: SignalListItemFactory {
+        setup => $on_song_list_setup ();
+        bind => $on_song_list_bind ();
+        unbind => $on_song_list_unbind ();
+      };
     }
   }
 }

src/ui/play_queue.vala

@@ -108,7 +108,7 @@ class Ui.PlayQueueSong : Gtk.ListBoxRow {
 }
 
 [GtkTemplate (ui = "/eu/callcc/audrey/ui/play_queue.ui")]
-public class Ui.PlayQueue : Adw.NavigationPage {
+public class Ui.PlayQueue : Gtk.Box {
     private Playbin _playbin;
     public Playbin playbin {
         get { return _playbin; }
@@ -118,17 +118,14 @@ public class Ui.PlayQueue : Adw.NavigationPage {
 
             _playbin.play_queue.items_changed.connect (this.on_store_items_changed);
             this.can_clear_all = _playbin.play_queue.get_n_items () > 0;
-
-            _playbin.notify["play-queue-position"].connect (() => {
-            });
         }
     }
 
     public bool can_clear_all { get; private set; }
 
-    [GtkCallback] private void on_clear () {
+    /*[GtkCallback] private void on_clear () {
         this.playbin.clear ();
-    }
+    }*/
 
     private void on_store_items_changed (GLib.ListModel store, uint position, uint removed, uint added) {
         this.can_clear_all = store.get_n_items () > 0;

src/ui/play_queue_song.blp

@@ -2,6 +2,7 @@ using Gtk 4.0;
 
 template $UiPlayQueueSong: ListBoxRow {
   selectable: false;
+  activatable: false; // prevents double background change on focus
 
   Box {
     focusable: false;

src/ui/window.blp

@@ -10,87 +10,70 @@ template $UiWindow: Adw.ApplicationWindow {
     can-open: false; // broken in libadwaita
 
     [content]
-    Adw.OverlaySplitView {
+    Adw.ToolbarView {
       margin-bottom: bind bottom_sheet.bottom-bar-height;
 
-      vexpand: true;
+      [top]
+      Adw.HeaderBar {
+        [start]
+        Button {
+          icon-name: "media-playlist-shuffle";
+          sensitive: bind template.can_click_shuffle_all;
+          clicked => $shuffle_all ();
+        }
 
-      [sidebar]
-      Adw.NavigationPage {
-        width-request: 100;
-        title: _("audrey");
+        title-widget: Adw.ViewSwitcher {
+          stack: stack;
+          policy: wide;
+        };
 
-        Adw.ToolbarView {
-          [top]
-          Adw.HeaderBar {
-            show-title: false;
-
-            [end]
-            Button {
-              icon-name: "applications-system";
-              clicked => $show_setup_dialog ();
-            }
-          }
-
-          content: Box {
-            orientation: vertical;
-
-            ListBox sidebar {
-              styles [
-                "navigation-sidebar",
-              ]
-
-              row-activated => $on_sidebar_row_activated();
-
-              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;
-              }
-            }
-
-            Separator {
-              styles [
-                "spacer",
-              ]
-              vexpand: true;
-            }
-
-            Picture {
-              paintable: bind template.playing_cover_art;
-            }
-          };
+        [end]
+        Button {
+          icon-name: "applications-system";
+          clicked => $show_setup_dialog ();
         }
       }
 
-      [content]
-      Stack stack {
-        StackPage {
-          name: "play_queue";
+      content: Adw.ViewStack stack {
+        Adw.ViewStackPage {
           title: _("Play queue");
+          icon-name: "media-playback-start";
 
-          child: $UiPlayQueue play_queue {
-            playbin: bind template.playbin;
+          child: Box {
+            name: "play-queue-page";
+            homogeneous: true;
+
+            Adw.Clamp {
+              halign: center;
+              maximum-size: 400;
+              width-request: 400;
+              margin-start: 24;
+              margin-end: 24;
+
+              Image {
+                valign: center;
+                styles [ "frame" ]
+                halign: center;
+                pixel-size: 400;
+                paintable: bind template.playing_cover_art;
+              }
+            }
+
+            $UiPlayQueue play_queue {
+              hexpand: true;
+              halign: fill;
+
+              margin-top: 48;
+              margin-bottom: 48;
+              margin-start: 24;
+              margin-end: 24;
+
+              styles [ "frame" ]
+              playbin: bind template.playbin;
+            }
           };
         }
-      }
+      };
     }
 
     [bottom-bar]

src/ui/window.vala

@@ -1,12 +1,8 @@
 [GtkTemplate (ui = "/eu/callcc/audrey/ui/window.ui")]
 class Ui.Window : Adw.ApplicationWindow {
-    [GtkChild] private unowned Gtk.ListBox sidebar;
-    [GtkChild] private unowned Gtk.ListBoxRow sidebar_play_queue;
-    [GtkChild] private unowned Gtk.Stack stack;
-
     [GtkChild] public unowned Ui.PlayQueue play_queue;
     [GtkChild] public unowned Ui.Playbar playbar;
-    [GtkChild] public unowned Adw.ButtonRow shuffle_all_tracks;
+    //[GtkChild] public unowned Adw.ButtonRow shuffle_all_tracks;
 
     private Setup setup;
 
@@ -79,11 +75,10 @@ class Ui.Window : Adw.ApplicationWindow {
         this.setup.connected.connect ((api) => {
             this.api = api;
             this.playbin.api = api;
+            this.can_click_shuffle_all = true;
         });
         this.setup.load ();
 
-        this.sidebar.select_row (this.sidebar.get_row_at_index (0));
-
         this.playbin.new_track.connect (() => {
             this.now_playing (this.playbin.play_queue.get_item (this.playbin.play_queue_position) as Subsonic.Song);
         });
@@ -92,33 +87,28 @@ class Ui.Window : Adw.ApplicationWindow {
             this.playing_cover_art = null;
             this.song = null;
         });
-
-        this.shuffle_all_tracks.sensitive = true;
-        this.shuffle_all_tracks.activated.connect (() => {
-            this.shuffle_all_tracks.sensitive = false;
-            this.playbin.clear ();
-            api.get_random_songs.begin (null, (song) => {
-                this.playbin.append_track (song);
-            }, (obj, res) => {
-                try {
-                    api.get_random_songs.end (res);
-                } catch (Error e) {
-                    error ("could not get random songs: %s", e.message);
-                }
-                this.shuffle_all_tracks.sensitive = true;
-
-                this.playbin.select_track (0);
-            });
-        });
-    }
-
-    [GtkCallback] private void on_sidebar_row_activated (Gtk.ListBoxRow row) {
-        if (row == this.sidebar_play_queue) {
-            this.stack.set_visible_child_name("play_queue");
-        }
     }
 
     [GtkCallback] private void show_setup_dialog () {
         this.setup.present (this);
     }
+
+    public bool can_click_shuffle_all { get; private set; default = false; }
+
+    [GtkCallback] private void shuffle_all () {
+        this.can_click_shuffle_all = false;
+        this.playbin.clear ();
+        api.get_random_songs.begin (null, (song) => {
+            this.playbin.append_track (song);
+        }, (obj, res) => {
+            try {
+                api.get_random_songs.end (res);
+            } catch (Error e) {
+                error ("could not get random songs: %s", e.message);
+            }
+            this.can_click_shuffle_all = true;
+
+            this.playbin.select_track (0);
+        });
+    }
 }