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,24 +1,19 @@
 using Gtk 4.0;
-using Adw 1;
 
-template $UiPlayQueue: Adw.NavigationPage {
-  title: _("Play queue");
-
-  Adw.ToolbarView {
-    [top]
-    Adw.HeaderBar {
-      Button {
-        icon-name: "edit-clear-all";
-        clicked => $on_clear ();
-        sensitive: bind template.can_clear_all;
-      }
-    }
+template $UiPlayQueue: Box {
+  name: "play-queue";
 
   ScrolledWindow {
+    hexpand: true;
+    vscrollbar-policy: always;
+    hscrollbar-policy: never;
+
     ListView view {
       show-separators: true;
       single-click-activate: true;
 
+      styles [ "rich-list" ]
+
       activate => $on_row_activated ();
 
       model: NoSelection {
@@ -32,5 +27,4 @@ template $UiPlayQueue: Adw.NavigationPage {
       };
     }
   }
-  }
 }

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,20 +10,22 @@ 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;
-
-      [sidebar]
-      Adw.NavigationPage {
-        width-request: 100;
-        title: _("audrey");
-
-        Adw.ToolbarView {
       [top]
       Adw.HeaderBar {
-            show-title: false;
+        [start]
+        Button {
+          icon-name: "media-playlist-shuffle";
+          sensitive: bind template.can_click_shuffle_all;
+          clicked => $shuffle_all ();
+        }
+
+        title-widget: Adw.ViewSwitcher {
+          stack: stack;
+          policy: wide;
+        };
 
         [end]
         Button {
@@ -32,65 +34,46 @@ template $UiWindow: Adw.ApplicationWindow {
         }
       }
 
-          content: Box {
-            orientation: vertical;
+      content: Adw.ViewStack stack {
+        Adw.ViewStackPage {
+          title: _("Play queue");
+          icon-name: "media-playback-start";
 
-            ListBox sidebar {
-              styles [
-                "navigation-sidebar",
-              ]
+          child: Box {
+            name: "play-queue-page";
+            homogeneous: true;
 
-              row-activated => $on_sidebar_row_activated();
+            Adw.Clamp {
+              halign: center;
+              maximum-size: 400;
+              width-request: 400;
+              margin-start: 24;
+              margin-end: 24;
 
-              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 {
+              Image {
+                valign: center;
+                styles [ "frame" ]
+                halign: center;
+                pixel-size: 400;
                 paintable: bind template.playing_cover_art;
               }
-          };
-        }
             }
 
-      [content]
-      Stack stack {
-        StackPage {
-          name: "play_queue";
-          title: _("Play queue");
+            $UiPlayQueue play_queue {
+              hexpand: true;
+              halign: fill;
 
-          child: $UiPlayQueue play_queue {
+              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,10 +87,16 @@ 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;
+    [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);
@@ -105,20 +106,9 @@ class Ui.Window : Adw.ApplicationWindow {
             } catch (Error e) {
                 error ("could not get random songs: %s", e.message);
             }
-                this.shuffle_all_tracks.sensitive = true;
+            this.can_click_shuffle_all = 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);
     }
 }