Add progress bar

Signed-off-by: Vasiliy Doylov <nekocwd@mainlining.org>

src/player.blp

@@ -44,6 +44,18 @@ template $MediaPlayerPlayer: Box {
       single-line-mode: true;
       ellipsize: end;
       visible: true;
+
+      styles [
+        "nekoplayer-subtitle",
+      ]
+    }
+
+    ProgressBar progress {
+      orientation: horizontal;
+      visible: true;
+      margin-end: 12;
+      margin-top: 6;
+      margin-bottom: 6;
     }
 
     Box {

src/player.vala

@@ -25,10 +25,16 @@ public class MediaPlayer.Player : Gtk.Box {
   private unowned Gtk.Button next;
   [GtkChild]
   private unowned Gtk.Image pause_img;
+  [GtkChild]
+  private unowned Gtk.ProgressBar progress;
+
   private string id = Uuid.string_random ();
   private Gtk.CssProvider css_provider = new Gtk.CssProvider ();
   construct {
-    get_style_context ().add_provider (css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER);
+    Gtk.StyleContext.add_provider_for_screen
+    (
+     Gdk.Screen.get_default (),
+     css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
     get_style_context ().add_class (id);
   }
 
@@ -38,11 +44,27 @@ public class MediaPlayer.Player : Gtk.Box {
   }
 
   void set_colors (Gdk.RGBA start, Gdk.RGBA end, Gdk.RGBA fg) {
+    var progress = fg.copy ();
+    progress.alpha = 0.5;
+    var hover = fg.copy ();
+    hover.alpha = 0.2;
     var data =
-      ".%s {
-        color: %s;
-        background: radial-gradient(circle at left, %s 0%%, %s 100%%);
-      }".printf (id, fg.to_string (), start.to_string (), end.to_string ());
+      @"
+      .$id {
+        color: $fg;
+        background: radial-gradient(circle at left, $start 0%, $end 100%);
+      }
+      .$id .nekoplayer-controls progressbar > trough {
+        background-color: $progress;
+      }
+      .$id .nekoplayer-controls progressbar > trough > progress {
+        background-color: $fg;
+      }
+      .$id .nekoplayer-controls button:hover {
+        background-color: $hover;
+      }
+      ";
+    message ("%s", data);
     try {
       css_provider.load_from_data (data);
     } catch (Error err) {
@@ -142,5 +164,8 @@ public class MediaPlayer.Player : Gtk.Box {
       image.gicon = cover;
     }));
     _image.notify_property ("gicon");
+    // Progress bar
+    var _progress = (Gtk.ProgressBar) Utils.find_widget_by_css_name (player, "prb_position");
+    _progress.bind_property ("fraction", progress, "fraction", BindingFlags.SYNC_CREATE);
   }
 }

src/style.css

@@ -8,16 +8,37 @@
   border-radius: 999px;
   padding: 5px;
 }
-.nekoplayer-controls button:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-.nekoplayer-controls button:active {
-  background-color: rgba(0, 0, 0, 0.2);
-}
+
 .nekoplayer-title {
   font-weight: bold;
   font-size: 120%;
 }
+
 .nekoplayer image {
   padding: 10px;
 }
+
+.nekoplayer-controls {
+  padding: 0px;
+}
+
+.nekoplayer-controls progressbar {
+  background: none;
+}
+
+.nekoplayer-controls progressbar > trough {
+  border: none;
+  box-shadow: none;
+  border-radius: 10px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.nekoplayer-controls progressbar > trough > progress {
+  background-color: green;
+  border: none;
+  box-shadow: none;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  border-radius: 10px;
+}