MediaControls: minimal transparent style

data/Application.css

@@ -1,9 +1,100 @@
+headerbar.osd,
+mediacontrols {
+    padding: 1em;
+}
+
+headerbar.osd {
+    background: linear-gradient(
+        to top,
+        transparent,
+        alpha(black, 0.1) 1.5em
+    );
+    box-shadow: none;
+    margin: 0;
+}
+
+headerbar.osd button.text-button {
+    background-color: @SILVER_100;
+    box-shadow:
+        0 1px 3px alpha(black, 0.3),
+        0 3px 0.7em alpha(black, 0.05);
+    color: @BLACK_500;
+    font-weight: 600;
+    -gtk-icon-shadow: none;
+    min-height: 2.25em;
+    padding-bottom: 0;
+    padding-top: 0;
+    text-shadow: none;
+}
+
+headerbar.osd label.title {
+    font-size: 1.25em;
+}
+
+headerbar.osd label.title,
+mediacontrols > label {
+    color: @fg_color;
+    text-shadow:
+        0 1px 3px alpha(black, 0.4),
+        0 0 1em alpha(black, 0.25);
+}
+
+headerbar.osd windowcontrols button {
+    background: alpha(BLACK, 0.5);
+    border-radius: 2em;
+}
+
+mediacontrols {
+    background-image: linear-gradient(
+        to bottom,
+        transparent,
+        alpha(black, 0.1) 1.5em
+    );
+    border-spacing: 0.5em;
+    font-weight: bold;
+}
+
+headerbar.osd windowcontrols button,
+mediacontrols > button,
+mediacontrols > menubutton {
+    -gtk-icon-shadow:
+        0 1px 3px alpha(black, 0.4),
+        0 0 1em alpha(black, 0.25);
+}
+
+mediacontrols > label {
+    font-variant-numeric: tabular-nums;
+}
+
+mediacontrols scale trough {
+    background-color: alpha(@fg_color, 0.25);
+    border: none;
+    box-shadow: 0 0 1em alpha(black, 0.05);
+}
+
+mediacontrols scale highlight {
+    background-color: @fg_color;
+    box-shadow: 0 1px 3px alpha(black, 0.1);
+}
+
+mediacontrols scale slider {
+    background-color: transparent;
+    box-shadow: none;
+    min-width: 3px;
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+mediacontrols scale:hover slider {
+    background-color: white;
+    box-shadow: 0 1px 3px alpha(black, 0.25);
+}
+
 popover.preview contents {
     background: black;
     border: none;
     box-shadow:
         0 0 0 1px alpha(black, 0.05),
         0 3px 4px alpha(black, 0.15),
         0 3px 3px -3px alpha(black, 0.35);
-    margin: 0 1em;
+    margin: 0.5em 1em;
 }

po/POTFILES

@@ -17,5 +17,4 @@ src/Widgets/Player/PlayerPage.vala
 src/Widgets/Player/PlaylistItem.vala
 src/Widgets/Player/PlaylistPopover.vala
 src/Widgets/Player/PreviewPopover.vala
-src/Widgets/Player/SeekBar.vala
 src/Widgets/Player/SettingsPopover.vala

src/Widgets/Player/BottomBar.vala

@@ -27,11 +27,16 @@ public class Audience.Widgets.BottomBar : Gtk.Box {
         }
     }
 
-    private Videos.SeekBar seek_bar;
+    private Audience.Widgets.PreviewPopover preview_popover;
+    private double playback_duration;
     private PlaylistPopover playlist_popover;
     private SettingsPopover settings_popover;
     private bool hovered;
 
+    class construct {
+        set_css_name ("mediacontrols");
+    }
+
     construct {
         var play_button = new Gtk.Button.from_icon_name ("media-playback-start-symbolic") {
             action_name = App.ACTION_PREFIX + App.ACTION_PLAY_PAUSE,
@@ -56,18 +61,25 @@ public class Audience.Widgets.BottomBar : Gtk.Box {
             direction = UP
         };
 
-        seek_bar = new Videos.SeekBar ();
+        var progression_label = new Gtk.Label (Granite.DateTime.seconds_to_time (0));
+
+        var duration_label = new Gtk.Label (null);
 
-        var main_actionbar = new Gtk.ActionBar () {
-            hexpand = true
+        var scale = new Gtk.Scale (Gtk.Orientation.HORIZONTAL, null) {
+            hexpand = true,
+            draw_value = false,
+            can_focus = false
         };
-        main_actionbar.pack_start (play_button);
-        main_actionbar.set_center_widget (seek_bar);
-        main_actionbar.pack_end (settings_button);
-        main_actionbar.pack_end (playlist_button);
 
-        hexpand = true;
-        append (main_actionbar);
+        preview_popover = new Audience.Widgets.PreviewPopover ();
+        preview_popover.set_parent (scale);
+
+        append (play_button);
+        append (progression_label);
+        append (scale);
+        append (duration_label);
+        append (settings_button);
+        append (playlist_button);
 
         var motion_controller = new Gtk.EventControllerMotion ();
         add_controller (motion_controller);
@@ -97,14 +109,59 @@ public class Audience.Widgets.BottomBar : Gtk.Box {
                 notify_property ("should-stay-revealed");
             }
         });
+
+        var playback_manager = Audience.PlaybackManager.get_default ();
+
+        playback_manager.notify["position"].connect (() => {
+            progression_label.label = Granite.DateTime.seconds_to_time ((int)(playback_manager.position / 1000000000));
+            scale.set_value (playback_manager.position);
+        });
+
+        playback_manager.notify["duration"].connect (() => {
+            playback_duration = playback_manager.duration;
+            if (playback_duration < 0) {
+                debug ("Duration value less than zero, duration set to 0.0");
+                playback_duration = 0;
+            }
+
+            scale.set_range (0, playback_duration);
+            duration_label.label = Granite.DateTime.seconds_to_time ((int)(playback_duration / 1000000000));
+
+            scale.set_value (playback_manager.position);
+
+            // Don't allow to change the time if there is none.
+            sensitive = (playback_duration > 0);
+            if (sensitive) {
+                preview_popover.playback_uri = playback_manager.get_uri ();
+            }
+        });
+
+        var scale_motion_controller = new Gtk.EventControllerMotion ();
+        scale.add_controller (scale_motion_controller);
+
+        scale_motion_controller.enter.connect (preview_popover.schedule_show);
+
+        scale_motion_controller.leave.connect (preview_popover.schedule_hide);
+
+        scale_motion_controller.motion.connect ((x, y) => {
+            preview_popover.pointing_to = Gdk.Rectangle () {
+                x = (int) x
+            };
+
+            preview_popover.set_preview_position (
+                (int64)(x / scale.get_allocated_width () * playback_duration),
+                !playback_manager.playing
+            );
+        });
+
+        scale.change_value.connect ((scroll, new_value) => {
+            playback_manager.seek ((int64)new_value);
+            return true;
+        });
     }
 
     public void hide_popovers () {
         playlist_popover.popdown ();
-
-        var popover = seek_bar.preview_popover;
-        if (popover != null) {
-            popover.schedule_hide ();
-        }
+        preview_popover.schedule_hide ();
     }
 }

src/Widgets/Player/PlayerPage.vala

@@ -45,20 +45,20 @@ namespace Audience {
                 show_title_buttons = true
             };
             header_bar.pack_start (navigation_button);
+            header_bar.add_css_class (Granite.STYLE_CLASS_OSD);
 
             windowcontrols_revealer = new Gtk.Revealer () {
-                transition_type = SLIDE_DOWN,
+                transition_type = CROSSFADE,
                 valign = START,
                 child = header_bar
             };
 
             bottom_bar = new Widgets.BottomBar ();
 
             bottom_bar_revealer = new Gtk.Revealer () {
-                transition_type = SLIDE_UP,
+                transition_type = CROSSFADE,
                 valign = END,
-                child = bottom_bar,
-                hexpand = true
+                child = bottom_bar
             };
 
             var picture = new Gtk.Picture.for_paintable (playback_manager.gst_video_widget) {

src/Widgets/Player/PreviewPopover.vala

@@ -122,21 +122,6 @@ public class Audience.Widgets.PreviewPopover : Gtk.Popover {
         });
     }
 
-    public void update_pointing (int x) {
-        var pointing = pointing_to;
-        pointing.x = x;
-
-        // changing the width properly updates arrow position when popover hits the edge
-        if (pointing.width == 0) {
-            pointing.width = 2;
-            pointing.x -= 1;
-        } else {
-            pointing.width = 0;
-        }
-
-        set_pointing_to (pointing);
-    }
-
     public void schedule_show () {
         if (show_timer_id > 0) {
             return;

src/meson.build

@@ -24,7 +24,6 @@ executable(
     'Widgets/Player/PlaylistItem.vala',
     'Widgets/Player/PlaylistPopover.vala',
     'Widgets/Player/PreviewPopover.vala',
-    'Widgets/Player/SeekBar.vala',
     'Widgets/Player/SettingsPopover.vala',
 
     vala_args: [
@@ -37,7 +36,7 @@ executable(
         dependency('gee-0.8'),
         dependency('glib-2.0'),
         dependency('gobject-2.0'),
-        dependency('granite-7'),
+        dependency('granite-7', version: '>=7.3.0'),
         dependency('gstreamer-1.0'),
         dependency('gstreamer-pbutils-1.0'),
         dependency('gstreamer-video-1.0'),