Add play button and player bar

data/res/home_page.blp

@@ -5,92 +5,107 @@ template $MusicusHomePage : Adw.NavigationPage {
   title: _("Musicus");
   tag: "home";
 
-  Adw.ToolbarView {
+  Gtk.Overlay {
-    [top]
+    Adw.ToolbarView {
-    Adw.HeaderBar header_bar {
+      [top]
-      [end]
+      Adw.HeaderBar header_bar {
-      MenuButton {
+        [end]
-        icon-name: "open-menu-symbolic";
+        MenuButton {
-        menu-model: primary_menu;
+          icon-name: "open-menu-symbolic";
-      }
+          menu-model: primary_menu;
-    }
-
-    [top]
-    Adw.Clamp {
-      maximum-size: 1000;
-      tightening-threshold: 600;
-
-      Adw.Bin {
-        styles ["searchbar"]
-
-        Gtk.SearchEntry search_entry {
-          placeholder-text: _("Enter composers, performers, works…");
         }
       }
-    }
-
-    Gtk.ScrolledWindow {
-      hscrollbar-policy: never;
 
+      [top]
       Adw.Clamp {
         maximum-size: 1000;
         tightening-threshold: 600;
 
-        Gtk.Box {
+        Adw.Bin {
-          orientation: vertical;
+          styles ["searchbar"]
-          margin-start: 12;
-          margin-end: 12;
-          margin-top: 24;
 
-          Gtk.Label {
+          Gtk.SearchEntry search_entry {
-            styles ["heading"]
+            placeholder-text: _("Enter composers, performers, works…");
-            visible: bind persons_flow_box.visible; 
+            search-changed => $search() swapped;
-            halign: start;
-            label: _("Composers and performers");
-          }
-
-          Gtk.FlowBox persons_flow_box {
-            margin-top: 12;
-            margin-bottom: 24;
-            column-spacing: 14;
-            row-spacing: 14;
-            homogeneous: true;
-            selection-mode: none;
-          }
-
-          Gtk.Label {
-            styles ["heading"]
-            visible: bind works_flow_box.visible;
-            halign: start;
-            label: _("Works");
-          }
-
-          Gtk.FlowBox works_flow_box {
-            margin-top: 12;
-            margin-bottom: 24;
-            column-spacing: 14;
-            row-spacing: 14;
-            homogeneous: true;
-            selection-mode: none;
-          }
-
-          Gtk.Label {
-            styles ["heading"]
-            visible: bind recordings_flow_box.visible;
-            halign: start;
-            label: _("Recordings");
-          }
-
-          Gtk.FlowBox recordings_flow_box {
-            margin-top: 12;
-            margin-bottom: 24;
-            column-spacing: 14;
-            row-spacing: 14;
-            homogeneous: true;
-            selection-mode: none;
           }
         }
       }
+
+      Gtk.ScrolledWindow {
+        hscrollbar-policy: never;
+
+        Adw.Clamp {
+          maximum-size: 1000;
+          tightening-threshold: 600;
+
+          Gtk.Box {
+            orientation: vertical;
+            margin-start: 12;
+            margin-end: 12;
+            margin-top: 24;
+            margin-bottom: 68;
+
+            Gtk.Label {
+              styles ["heading"]
+              visible: bind persons_flow_box.visible; 
+              halign: start;
+              label: _("Composers and performers");
+            }
+
+            Gtk.FlowBox persons_flow_box {
+              margin-top: 12;
+              margin-bottom: 24;
+              column-spacing: 12;
+              row-spacing: 12;
+              homogeneous: true;
+              selection-mode: none;
+            }
+
+            Gtk.Label {
+              styles ["heading"]
+              visible: bind works_flow_box.visible;
+              halign: start;
+              label: _("Works");
+            }
+
+            Gtk.FlowBox works_flow_box {
+              margin-top: 12;
+              margin-bottom: 24;
+              column-spacing: 12;
+              row-spacing: 12;
+              homogeneous: true;
+              selection-mode: none;
+            }
+
+            Gtk.Label {
+              styles ["heading"]
+              visible: bind recordings_flow_box.visible;
+              halign: start;
+              label: _("Recordings");
+            }
+
+            Gtk.FlowBox recordings_flow_box {
+              margin-top: 12;
+              margin-bottom: 24;
+              column-spacing: 12;
+              row-spacing: 12;
+              homogeneous: true;
+              selection-mode: none;
+            }
+          }
+        }
+      }
+    }
+
+    [overlay]
+    Gtk.Button play_button {
+      styles ["pill", "suggested-action"]
+      halign: end;
+      valign: end;
+      margin-end: 24;
+      margin-bottom: 24;
+      label: _("Play music");
+      clicked => $play() swapped;
     }
   }
 }

data/res/icons/scalable/actions/playlist-symbolic.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 3 3 v 2 h 10 v -2 z m 0 4 v 2 h 5.980469 v -2 z m 0 4 v 2 h 6 l -0.011719 -2 z m 0 0"/><path d="m 10 7 v 6 h 1 c 0.199219 0 0.390625 -0.058594 0.554688 -0.167969 l 3 -2 c 0.59375 -0.394531 0.59375 -1.269531 0 -1.664062 l -3 -2 c -0.164063 -0.109375 -0.355469 -0.167969 -0.554688 -0.167969 z m 0 0"/></svg>

data/res/musicus.gresource.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/de/johrpan/musicus">
+    <file preprocess="xml-stripblanks">icons/scalable/actions/playlist-symbolic.svg</file>
     <file preprocess="xml-stripblanks">home_page.ui</file>
     <file preprocess="xml-stripblanks">tile.ui</file>
     <file preprocess="xml-stripblanks">welcome_page.ui</file>

data/res/window.blp

@@ -6,11 +6,63 @@ template $MusicusWindow : Adw.ApplicationWindow {
   default-width: 800;
   default-height: 600;
 
-  Adw.NavigationView navigation_view {
+  Adw.ToolbarView {
-    $MusicusWelcomePage {
+    Adw.NavigationView navigation_view {
-      folder-selected => $set_library_folder() swapped;
+      $MusicusWelcomePage {
+        folder-selected => $set_library_folder() swapped;
+      }
+
+      $MusicusHomePage {}
     }
 
-    $MusicusHomePage {}
+    [bottom]
+    Gtk.Revealer player_bar_revealer {
+      reveal-child: false;
+      transition-type: slide_up;
+
+      Gtk.Box {
+        margin-start: 6;
+        margin-end: 6;
+        margin-top: 6;
+        margin-bottom: 6;
+        spacing: 6;
+
+        Gtk.Button play_button {
+          styles ["circular"]
+          valign: center;
+          icon-name: "media-playback-start-symbolic";
+        }
+
+        Gtk.Box {
+          hexpand: true;
+          valign: center;
+          orientation: vertical;
+
+          Gtk.Label title_label {
+            styles ["caption-heading"]
+            halign: start;
+            label: _("Title");
+          }
+
+          Gtk.Label subtitle_label {
+            styles ["caption"]
+            halign: start;
+            label: _("Subtitle");
+          }
+        }
+
+        Gtk.Label {
+          styles ["caption", "numeric"]
+          valign: center;
+          label: "00:00 / 01:00";
+        }
+
+        Gtk.Button {
+          styles ["flat"]
+          valign: center;
+          icon-name: "playlist-symbolic";
+        }
+      }
+    }
   }
 }

src/home_page.rs

@@ -1,5 +1,5 @@
 use adw::subclass::{navigation_page::NavigationPageImpl, prelude::*};
-use gtk::glib;
+use gtk::{glib, prelude::*};
 
 mod imp {
     use crate::tile::MusicusTile;
@@ -17,6 +17,8 @@ mod imp {
         pub works_flow_box: TemplateChild<gtk::FlowBox>,
         #[template_child]
         pub recordings_flow_box: TemplateChild<gtk::FlowBox>,
+        #[template_child]
+        pub play_button: TemplateChild<gtk::Button>,
     }
 
     #[glib::object_subclass]
@@ -27,6 +29,7 @@ mod imp {
 
         fn class_init(klass: &mut Self::Class) {
             klass.bind_template();
+            klass.bind_template_instance_callbacks();
         }
 
         fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
@@ -57,8 +60,19 @@ glib::wrapper! {
         @extends gtk::Widget, adw::NavigationPage;
 }
 
+#[gtk::template_callbacks]
 impl MusicusHomePage {
     pub fn new() -> Self {
         glib::Object::new()
     }
+
+    #[template_callback]
+    fn play(&self, _: &gtk::Button) {
+        log::info!("Play button clicked");
+    }
+
+    #[template_callback]
+    fn search(&self, entry: &gtk::SearchEntry) {
+        log::info!("Search changed: \"{}\"", entry.text());
+    }
 }

src/window.rs

@@ -11,6 +11,8 @@ mod imp {
     pub struct MusicusWindow {
         #[template_child]
         pub navigation_view: TemplateChild<adw::NavigationView>,
+        #[template_child]
+        pub player_bar_revealer: TemplateChild<gtk::Revealer>,
     }
 
     #[glib::object_subclass]