From 3289396e5c8f4fbea88d23f825f1f0aead49ac26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Mon, 21 Aug 2023 11:27:57 -0700 Subject: [PATCH 1/8] BottomBar: custom minimal style --- data/Application.css | 42 +++++++++++++++++++++++++++++- src/Widgets/Player/BottomBar.vala | 18 ++++++------- src/Widgets/Player/PlayerPage.vala | 5 ++-- 3 files changed, 51 insertions(+), 14 deletions(-) diff --git a/data/Application.css b/data/Application.css index 03ffc038f..8ec5ad10e 100644 --- a/data/Application.css +++ b/data/Application.css @@ -1,3 +1,43 @@ +mediacontrols { + background-image: linear-gradient( + to bottom, + transparent, + alpha(black, 0.1) 1.5em + ); + border-spacing: 0.25em; + font-weight: bold; + padding: 1em; + text-shadow: + 0 1px 3px alpha(black, 0.4), + 0 0 1em alpha(black, 0.25); + -gtk-icon-shadow: + 0 1px 3px alpha(black, 0.4), + 0 0 1em alpha(black, 0.25); +} + +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; @@ -5,5 +45,5 @@ popover.preview contents { 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; } diff --git a/src/Widgets/Player/BottomBar.vala b/src/Widgets/Player/BottomBar.vala index 725071a2e..619ad2afc 100644 --- a/src/Widgets/Player/BottomBar.vala +++ b/src/Widgets/Player/BottomBar.vala @@ -32,6 +32,10 @@ public class Audience.Widgets.BottomBar : Gtk.Box { 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, @@ -58,16 +62,10 @@ public class Audience.Widgets.BottomBar : Gtk.Box { seek_bar = new Videos.SeekBar (); - var main_actionbar = new Gtk.ActionBar () { - hexpand = true - }; - 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); + append (play_button); + append (seek_bar); + append (settings_button); + append (playlist_button); var motion_controller = new Gtk.EventControllerMotion (); add_controller (motion_controller); diff --git a/src/Widgets/Player/PlayerPage.vala b/src/Widgets/Player/PlayerPage.vala index 379d04b28..45ba6eb11 100644 --- a/src/Widgets/Player/PlayerPage.vala +++ b/src/Widgets/Player/PlayerPage.vala @@ -77,10 +77,9 @@ namespace Audience { 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) { From ef5e5b770bd4b0d6730462b9e8b039b431c832a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Mon, 21 Aug 2023 17:05:00 -0700 Subject: [PATCH 2/8] Combine seekbar, use tabular numbers --- data/Application.css | 12 +++-- po/POTFILES | 1 - src/Widgets/Player/BottomBar.vala | 75 ++++++++++++++++++++++++--- src/Widgets/Player/SeekBar.vala | 84 ------------------------------- src/meson.build | 1 - 5 files changed, 75 insertions(+), 98 deletions(-) delete mode 100644 src/Widgets/Player/SeekBar.vala diff --git a/data/Application.css b/data/Application.css index 8ec5ad10e..c94ddda5a 100644 --- a/data/Application.css +++ b/data/Application.css @@ -4,13 +4,17 @@ mediacontrols { transparent, alpha(black, 0.1) 1.5em ); - border-spacing: 0.25em; - font-weight: bold; + border-spacing: 0.5em; padding: 1em; - text-shadow: + -gtk-icon-shadow: 0 1px 3px alpha(black, 0.4), 0 0 1em alpha(black, 0.25); - -gtk-icon-shadow: +} + +mediacontrols label { + font-weight: bold; + font-variant-numeric: tabular-nums; + text-shadow: 0 1px 3px alpha(black, 0.4), 0 0 1em alpha(black, 0.25); } diff --git a/po/POTFILES b/po/POTFILES index 798e90db8..896c6c8cd 100644 --- a/po/POTFILES +++ b/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 diff --git a/src/Widgets/Player/BottomBar.vala b/src/Widgets/Player/BottomBar.vala index 619ad2afc..6cfdec2b3 100644 --- a/src/Widgets/Player/BottomBar.vala +++ b/src/Widgets/Player/BottomBar.vala @@ -27,7 +27,11 @@ public class Audience.Widgets.BottomBar : Gtk.Box { } } - private Videos.SeekBar seek_bar; + private Audience.Widgets.PreviewPopover preview_popover; + private Gtk.Label progression_label; + private Gtk.Label duration_label; + private Gtk.Scale scale; + private double playback_duration; private PlaylistPopover playlist_popover; private SettingsPopover settings_popover; private bool hovered; @@ -60,10 +64,23 @@ public class Audience.Widgets.BottomBar : Gtk.Box { direction = UP }; - seek_bar = new Videos.SeekBar (); + progression_label = new Gtk.Label (Granite.DateTime.seconds_to_time (0)); + + duration_label = new Gtk.Label (null); + + scale = new Gtk.Scale (Gtk.Orientation.HORIZONTAL, null) { + hexpand = true, + draw_value = false, + can_focus = false + }; + + preview_popover = new Audience.Widgets.PreviewPopover (); + preview_popover.set_parent (scale); append (play_button); - append (seek_bar); + append (progression_label); + append (scale); + append (duration_label); append (settings_button); append (playlist_button); @@ -95,14 +112,56 @@ 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.update_pointing ((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 (); } } diff --git a/src/Widgets/Player/SeekBar.vala b/src/Widgets/Player/SeekBar.vala deleted file mode 100644 index fcef8f672..000000000 --- a/src/Widgets/Player/SeekBar.vala +++ /dev/null @@ -1,84 +0,0 @@ -/*- - * Copyright 2017 elementary, Inc. (https://elementary.io) - * SPDX-License-Identifier: LGPL-3.0-or-later - */ - -public class Videos.SeekBar : Gtk.Box { - public Audience.Widgets.PreviewPopover preview_popover { get; private set; } - - private Gtk.Label progression_label; - private Gtk.Label duration_label; - private Gtk.Scale scale; - private double playback_duration; - - construct { - progression_label = new Gtk.Label (Granite.DateTime.seconds_to_time (0)) { - margin_start = 3 - }; - - duration_label = new Gtk.Label (null) { - margin_end = 3 - }; - - scale = new Gtk.Scale (Gtk.Orientation.HORIZONTAL, null) { - hexpand = true, - draw_value = false, - can_focus = false - }; - - preview_popover = new Audience.Widgets.PreviewPopover (); - preview_popover.set_parent (scale); - - hexpand = true; - spacing = 6; - append (progression_label); - append (scale); - append (duration_label); - - 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.update_pointing ((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; - }); - } -} diff --git a/src/meson.build b/src/meson.build index 146e81ac1..53f15b6c6 100644 --- a/src/meson.build +++ b/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: [ From d19e209f0a07e7ce5b1baa8d9e93e09f69073e67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Mon, 21 Aug 2023 17:07:35 -0700 Subject: [PATCH 3/8] Scope down vars --- src/Widgets/Player/BottomBar.vala | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/Widgets/Player/BottomBar.vala b/src/Widgets/Player/BottomBar.vala index 6cfdec2b3..f4b1a6ca5 100644 --- a/src/Widgets/Player/BottomBar.vala +++ b/src/Widgets/Player/BottomBar.vala @@ -28,9 +28,6 @@ public class Audience.Widgets.BottomBar : Gtk.Box { } private Audience.Widgets.PreviewPopover preview_popover; - private Gtk.Label progression_label; - private Gtk.Label duration_label; - private Gtk.Scale scale; private double playback_duration; private PlaylistPopover playlist_popover; private SettingsPopover settings_popover; @@ -64,11 +61,11 @@ public class Audience.Widgets.BottomBar : Gtk.Box { direction = UP }; - progression_label = new Gtk.Label (Granite.DateTime.seconds_to_time (0)); + var progression_label = new Gtk.Label (Granite.DateTime.seconds_to_time (0)); - duration_label = new Gtk.Label (null); + var duration_label = new Gtk.Label (null); - scale = new Gtk.Scale (Gtk.Orientation.HORIZONTAL, null) { + var scale = new Gtk.Scale (Gtk.Orientation.HORIZONTAL, null) { hexpand = true, draw_value = false, can_focus = false From 5d02988cf5770d0112fdf7e66d99277928257ca3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Mon, 21 Aug 2023 17:17:00 -0700 Subject: [PATCH 4/8] Simplify pointing since no arrow --- src/Widgets/Player/BottomBar.vala | 5 ++++- src/Widgets/Player/PreviewPopover.vala | 15 --------------- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/src/Widgets/Player/BottomBar.vala b/src/Widgets/Player/BottomBar.vala index f4b1a6ca5..2d6ea1b49 100644 --- a/src/Widgets/Player/BottomBar.vala +++ b/src/Widgets/Player/BottomBar.vala @@ -144,7 +144,10 @@ public class Audience.Widgets.BottomBar : Gtk.Box { scale_motion_controller.leave.connect (preview_popover.schedule_hide); scale_motion_controller.motion.connect ((x, y) => { - preview_popover.update_pointing ((int) x); + 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 diff --git a/src/Widgets/Player/PreviewPopover.vala b/src/Widgets/Player/PreviewPopover.vala index d4c933d28..3fd10a001 100644 --- a/src/Widgets/Player/PreviewPopover.vala +++ b/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; From e3a5a05e93c20dbf9699d17f2e124e2185c05162 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Mon, 21 Aug 2023 17:25:49 -0700 Subject: [PATCH 5/8] fix leaky CSS --- data/Application.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/data/Application.css b/data/Application.css index c94ddda5a..3bcb8147e 100644 --- a/data/Application.css +++ b/data/Application.css @@ -5,14 +5,18 @@ mediacontrols { alpha(black, 0.1) 1.5em ); border-spacing: 0.5em; + font-weight: bold; padding: 1em; +} + +mediacontrols > button, +mediacontrols > menubutton { -gtk-icon-shadow: 0 1px 3px alpha(black, 0.4), 0 0 1em alpha(black, 0.25); } -mediacontrols label { - font-weight: bold; +mediacontrols > label { font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px alpha(black, 0.4), From 156c8d1506f98df4aed694f1de8f7bd8d964cb40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Thu, 24 Aug 2023 08:51:59 -0700 Subject: [PATCH 6/8] Require latest granite --- src/meson.build | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/meson.build b/src/meson.build index 53f15b6c6..542467ff7 100644 --- a/src/meson.build +++ b/src/meson.build @@ -36,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'), From 583ef6d5dcbd773c81eaa34406a69f302ec20ae3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Thu, 24 Aug 2023 14:19:17 -0700 Subject: [PATCH 7/8] Also style headerbar --- data/Application.css | 51 +++++++++++++++++++++++++++--- src/Widgets/Player/PlayerPage.vala | 3 +- 2 files changed, 49 insertions(+), 5 deletions(-) diff --git a/data/Application.css b/data/Application.css index 3bcb8147e..2d6e08f22 100644 --- a/data/Application.css +++ b/data/Application.css @@ -1,3 +1,49 @@ +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, @@ -6,9 +52,9 @@ mediacontrols { ); border-spacing: 0.5em; font-weight: bold; - padding: 1em; } +headerbar.osd windowcontrols button, mediacontrols > button, mediacontrols > menubutton { -gtk-icon-shadow: @@ -18,9 +64,6 @@ mediacontrols > menubutton { mediacontrols > label { font-variant-numeric: tabular-nums; - text-shadow: - 0 1px 3px alpha(black, 0.4), - 0 0 1em alpha(black, 0.25); } mediacontrols scale trough { diff --git a/src/Widgets/Player/PlayerPage.vala b/src/Widgets/Player/PlayerPage.vala index af66afbe9..29372ac55 100644 --- a/src/Widgets/Player/PlayerPage.vala +++ b/src/Widgets/Player/PlayerPage.vala @@ -45,9 +45,10 @@ 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 }; From ed3b3790835625e1056db0db9629de6c79387b12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 22 May 2024 09:09:14 -0700 Subject: [PATCH 8/8] Fix css for light mode --- data/Application.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/data/Application.css b/data/Application.css index f92cae3e4..5b42dedc5 100644 --- a/data/Application.css +++ b/data/Application.css @@ -3,7 +3,7 @@ mediacontrols { } mediacontrols > label { - color: @fg_color; + color: white; text-shadow: 0 1px 3px alpha(black, 0.4), 0 0 1em alpha(black, 0.25); @@ -20,7 +20,8 @@ mediacontrols { } mediacontrols > button, -mediacontrols > menubutton { +mediacontrols > menubutton > button { + color: white; -gtk-icon-shadow: 0 1px 3px alpha(black, 0.4), 0 0 1em alpha(black, 0.25); @@ -31,18 +32,18 @@ mediacontrols > label { } mediacontrols scale trough { - background-color: alpha(@fg_color, 0.25); + background-color: alpha(white, 0.25); border: none; box-shadow: 0 0 1em alpha(black, 0.05); } mediacontrols scale highlight { - background-color: @fg_color; + background-color: white; box-shadow: 0 1px 3px alpha(black, 0.1); } mediacontrols scale slider { - background-color: transparent; + background: transparent; box-shadow: none; min-width: 3px; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);