From 83b2db4b76aa8b1cc839f9a7cdf010347c70047d Mon Sep 17 00:00:00 2001
From: Erica Z <zerica@callcc.eu>
Date: Sun, 20 Oct 2024 16:15:22 +0200
Subject: [PATCH] play queue experiment

---
 src/style.css              | 14 +++++++++++++-
 src/ui/play_queue.blp      |  6 ++++++
 src/ui/play_queue_song.blp |  1 +
 src/ui/window.blp          | 34 ++++++++++++++++++++++++++++++++--
 4 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/src/style.css b/src/style.css
index d2828fe..72842e2 100644
--- a/src/style.css
+++ b/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);
+}
diff --git a/src/ui/play_queue.blp b/src/ui/play_queue.blp
index 56ab5fa..7b87a8a 100644
--- a/src/ui/play_queue.blp
+++ b/src/ui/play_queue.blp
@@ -1,13 +1,19 @@
 using Gtk 4.0;
 
 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 {
diff --git a/src/ui/play_queue_song.blp b/src/ui/play_queue_song.blp
index a900b91..4a02ea0 100644
--- a/src/ui/play_queue_song.blp
+++ b/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;
diff --git a/src/ui/window.blp b/src/ui/window.blp
index 9823ff8..9d783f3 100644
--- a/src/ui/window.blp
+++ b/src/ui/window.blp
@@ -39,8 +39,38 @@ template $UiWindow: Adw.ApplicationWindow {
           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;
+            }
           };
         }
       };