[sushi/wip/cosimoc/no-clutter: 14/50] media-bin: adapt to Sushi design
- From: Cosimo Cecchi <cosimoc src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [sushi/wip/cosimoc/no-clutter: 14/50] media-bin: adapt to Sushi design
- Date: Mon, 17 Jun 2019 18:33:47 +0000 (UTC)
commit 770af689a0b24d48c86aa3f6a91fd6196043f3b4
Author: Cosimo Cecchi <cosimoc gnome org>
Date: Sun Apr 2 12:59:08 2017 -0700
media-bin: adapt to Sushi design
Remove a lot of the custom theming, the big playback button and the
value drawn over the scale. Instead, add labels before/after it, as it
was in the former Sushi toolbar.
src/libsushi/SushiMediaBin.ui | 183 ++++++++++++++++++++-------------------
src/libsushi/sushi-media-bin.c | 22 ++---
src/libsushi/sushi-media-bin.css | 142 ++----------------------------
3 files changed, 113 insertions(+), 234 deletions(-)
---
diff --git a/src/libsushi/SushiMediaBin.ui b/src/libsushi/SushiMediaBin.ui
index 2933878..f8eaa67 100644
--- a/src/libsushi/SushiMediaBin.ui
+++ b/src/libsushi/SushiMediaBin.ui
@@ -10,7 +10,7 @@
<object class="GtkImage" id="fullscreen_image">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="pixel_size">18</property>
+ <property name="icon_size">1</property>
<property name="icon_name">view-fullscreen-symbolic</property>
</object>
<object class="GtkAdjustment" id="playback_adjustment">
@@ -22,7 +22,7 @@
<object class="GtkImage" id="playback_image">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="pixel_size">18</property>
+ <property name="icon_size">1</property>
<property name="icon_name">media-playback-start-symbolic</property>
</object>
<object class="GtkAdjustment" id="volume_adjustment">
@@ -113,7 +113,7 @@
<property name="can_focus">False</property>
<property name="events">GDK_POINTER_MOTION_MASK | GDK_LEAVE_NOTIFY_MASK |
GDK_STRUCTURE_MASK</property>
<property name="valign">end</property>
- <property name="transition_type">slide-up</property>
+ <property name="transition_type">crossfade</property>
<signal name="leave-notify-event" handler="on_revealer_leave_notify_event" swapped="no"/>
<signal name="motion-notify-event" handler="on_revealer_motion_notify_event" swapped="no"/>
<child>
@@ -121,113 +121,125 @@
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="valign">end</property>
- <property name="orientation">vertical</property>
+ <property name="orientation">horizontal</property>
+ <property name="margin-start">32</property>
+ <property name="margin-end">32</property>
+ <property name="margin-bottom">32</property>
+ <child>
+ <object class="GtkButton" id="playback_button">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">False</property>
+ <property name="image">playback_image</property>
+ <property name="relief">none</property>
+ <signal name="clicked" handler="sushi_media_bin_toggle_playback" swapped="yes"/>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkLabel" id="progress_position_label">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="valign">center</property>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">1</property>
+ </packing>
+ </child>
<child>
<object class="GtkScale" id="progress_scale">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="adjustment">playback_adjustment</property>
<property name="round_digits">2</property>
+ <property name="draw_value">False</property>
<signal name="format-value" handler="on_progress_scale_format_value" swapped="no"/>
</object>
<packing>
- <property name="expand">False</property>
+ <property name="expand">True</property>
<property name="fill">True</property>
- <property name="position">0</property>
+ <property name="position">2</property>
</packing>
</child>
<child>
- <object class="GtkBox">
+ <object class="GtkLabel" id="progress_duration_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="spacing">2</property>
- <child>
- <object class="GtkButton" id="playback_button">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">False</property>
- <property name="image">playback_image</property>
- <property name="relief">none</property>
- <signal name="clicked" handler="sushi_media_bin_toggle_playback" swapped="yes"/>
- </object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">0</property>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="fullscreen_button">
- <property name="visible">True</property>
+ <property name="valign">center</property>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">3</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkButton" id="fullscreen_button">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">False</property>
+ <property name="image">fullscreen_image</property>
+ <property name="relief">none</property>
+ <signal name="clicked" handler="sushi_media_bin_toggle_fullscreen" swapped="yes"/>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="pack_type">end</property>
+ <property name="position">4</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkVolumeButton" id="volume_button">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="focus_on_click">False</property>
+ <property name="receives_default">False</property>
+ <property name="relief">none</property>
+ <property name="orientation">vertical</property>
+ <property name="value">1</property>
+ <property name="size">menu</property>
+ <property name="adjustment">volume_adjustment</property>
+ <child internal-child="plus_button">
+ <object class="GtkButton">
<property name="can_focus">True</property>
- <property name="receives_default">False</property>
- <property name="image">fullscreen_image</property>
+ <property name="receives_default">True</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
<property name="relief">none</property>
- <signal name="clicked" handler="sushi_media_bin_toggle_fullscreen"
swapped="yes"/>
</object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="pack_type">end</property>
- <property name="position">1</property>
- </packing>
</child>
- <child>
- <object class="GtkVolumeButton" id="volume_button">
- <property name="visible">True</property>
+ <child internal-child="minus_button">
+ <object class="GtkButton">
<property name="can_focus">True</property>
- <property name="focus_on_click">False</property>
- <property name="receives_default">False</property>
+ <property name="receives_default">True</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
<property name="relief">none</property>
- <property name="orientation">vertical</property>
- <property name="value">1</property>
- <property name="size">large-toolbar</property>
- <property name="adjustment">volume_adjustment</property>
- <property name="icons">audio-volume-muted-symbolic
-audio-volume-high-symbolic
-audio-volume-low-symbolic
-audio-volume-medium-symbolic</property>
- <property name="use_symbolic">False</property>
- <child internal-child="plus_button">
- <object class="GtkButton">
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
- <property name="relief">none</property>
- </object>
- </child>
- <child internal-child="minus_button">
- <object class="GtkButton">
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
- <property name="relief">none</property>
- </object>
- </child>
</object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="pack_type">end</property>
- <property name="position">2</property>
- </packing>
</child>
- <child>
- <placeholder/>
- </child>
- <style>
- <class name="overlay-bar"/>
- <class name="bottom"/>
- </style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
- <property name="position">1</property>
+ <property name="pack_type">end</property>
+ <property name="position">5</property>
</packing>
</child>
+ <child>
+ <placeholder/>
+ </child>
+ <style>
+ <class name="osd"/>
+ <class name="overlay-bar"/>
+ <class name="bottom"/>
+ </style>
</object>
</child>
</object>
@@ -237,7 +249,7 @@ audio-volume-medium-symbolic</property>
</child>
<child type="overlay">
<object class="GtkBox" id="play_box">
- <property name="visible">True</property>
+ <property name="visible">False</property>
<property name="can_focus">False</property>
<property name="halign">center</property>
<property name="valign">center</property>
@@ -334,13 +346,8 @@ audio-volume-medium-symbolic</property>
<property name="relief">none</property>
<property name="orientation">vertical</property>
<property name="value">1</property>
- <property name="size">large-toolbar</property>
+ <property name="size">menu</property>
<property name="adjustment">volume_adjustment</property>
- <property name="icons">audio-volume-muted-symbolic
-audio-volume-high-symbolic
-audio-volume-low-symbolic
-audio-volume-medium-symbolic</property>
- <property name="use_symbolic">False</property>
<child internal-child="plus_button">
<object class="GtkButton">
<property name="can_focus">True</property>
diff --git a/src/libsushi/sushi-media-bin.c b/src/libsushi/sushi-media-bin.c
index 4bce95d..ac37cf8 100644
--- a/src/libsushi/sushi-media-bin.c
+++ b/src/libsushi/sushi-media-bin.c
@@ -97,6 +97,8 @@ typedef struct
GtkLabel *title_label;
GtkLabel *info_column_label[INFO_N_COLUMNS];
GtkLabel *duration_label;
+ GtkLabel *progress_duration_label;
+ GtkLabel *progress_position_label;
/* Thanks to GSK all the blitting will be done in GL */
GtkRevealer *top_revealer;
@@ -843,10 +845,6 @@ sushi_media_bin_init_volume_button (SushiMediaBin *self,
}
gtk_style_context_add_class (gtk_widget_get_style_context (popup), "sushi-media-bin");
-
- /* Hide volume popup buttons */
- gtk_widget_hide (gtk_scale_button_get_plus_button (button));
- gtk_widget_hide (gtk_scale_button_get_minus_button (button));
}
static void
@@ -1061,8 +1059,8 @@ sushi_media_bin_get_preferred_width (GtkWidget *self,
}
else
{
- *minimum_width = 320;
- *natural_width = priv->video_width ? priv->video_width : 640;
+ *minimum_width = priv->video_width ? 320 : 0;
+ *natural_width = priv->video_width ? priv->video_width : 0;
}
}
@@ -1080,8 +1078,8 @@ sushi_media_bin_get_preferred_height (GtkWidget *self,
}
else
{
- *minimum_height = 240;
- *natural_height = priv->video_height ? priv->video_height : 480;
+ *minimum_height = priv->video_height ? 240 : 0;
+ *natural_height = priv->video_height ? priv->video_height : 0;
}
}
@@ -1201,6 +1199,8 @@ sushi_media_bin_class_init (SushiMediaBinClass *klass)
gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, title_label);
gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, info_box);
gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, duration_label);
+ gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, progress_duration_label);
+ gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, progress_position_label);
gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, top_revealer);
gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, bottom_revealer);
@@ -1437,6 +1437,7 @@ sushi_media_bin_update_duration (SushiMediaBin *self)
duration = GST_TIME_AS_SECONDS (duration);
gtk_label_set_label (priv->duration_label, format_time (duration));
+ gtk_label_set_label (priv->progress_duration_label, format_time (duration));
gtk_adjustment_set_upper (priv->playback_adjustment, duration);
}
@@ -1455,6 +1456,7 @@ sushi_media_bin_update_position (SushiMediaBin *self)
gtk_adjustment_set_value (priv->playback_adjustment, position);
priv->ignore_adjustment_changes = FALSE;
+ gtk_label_set_label (priv->progress_position_label, format_time (position));
gtk_label_set_label (priv->audio_position_label, format_time (position));
}
@@ -1582,7 +1584,7 @@ sushi_media_bin_handle_msg_state_changed (SushiMediaBin *self, GstMessage *msg)
if (old_state == GST_STATE_READY && new_state == GST_STATE_PAUSED)
{
gtk_image_set_from_icon_name (priv->playback_image, SMB_ICON_NAME_PLAY, SMB_ICON_SIZE);
- widget_set_visible (priv->play_box, TRUE);
+ widget_set_visible (priv->play_box, FALSE);
sushi_media_bin_update_duration (self);
}
else if (new_state == GST_STATE_PLAYING)
@@ -1594,7 +1596,7 @@ sushi_media_bin_handle_msg_state_changed (SushiMediaBin *self, GstMessage *msg)
else
{
gtk_image_set_from_icon_name (priv->playback_image, SMB_ICON_NAME_PLAY, SMB_ICON_SIZE);
- widget_set_visible (priv->play_box, TRUE);
+ widget_set_visible (priv->play_box, FALSE);
priv->position = 0;
sushi_media_bin_set_tick_enabled (self, FALSE);
}
diff --git a/src/libsushi/sushi-media-bin.css b/src/libsushi/sushi-media-bin.css
index 6cd6450..fb09bb6 100644
--- a/src/libsushi/sushi-media-bin.css
+++ b/src/libsushi/sushi-media-bin.css
@@ -23,40 +23,12 @@
*
*/
-@define-color transparent-light rgba (1,1,1,.1);
-@define-color transparent-dark rgba (.11,.11,.11,.8);
-@define-color highlight-color #ff6835;
@define-color audio-bg-color #4c4c4c;
-/* hiden/shown */
-sushi-media-bin *.hide {
- transition: opacity .32s;
- opacity: 0;
-}
-
-sushi-media-bin *.show {
- transition: opacity .32s;
- opacity: 1;
-}
-
sushi-media-bin {
background: black;
}
-sushi-media-bin label,
-sushi-media-bin scale value {
- color: white;
-}
-
-sushi-media-bin label:backdrop,
-sushi-media-bin scale value:backdrop {
- color: darker(white);
-}
-
-sushi-media-bin box.overlay-bar {
- background: @transparent-dark;
-}
-
sushi-media-bin box.overlay-bar.top {
padding: 12px;
}
@@ -65,116 +37,14 @@ sushi-media-bin label.title {
font: 18px Sans;
}
-sushi-media-bin box.bottom button {
- border: 0px;
- border-radius: 0px;
- box-shadow: none;
- outline: 0px;
- background: none;
- padding: 8px;
-}
-
-sushi-media-bin box.bottom button:hover {
- box-shadow: none;
- background: rgba (0,0,0,.6);
-}
-
-/* Main play button */
-sushi-media-bin overlay > box {
- font-size: 18px;
- border: 0px;
- border-radius: 2em;
- padding: .7em 1em;
- box-shadow: none;
- background: @transparent-dark;
-}
-
-sushi-media-bin overlay > box > label {
- padding-left: .64em;
-}
-
-/* Style media playback scale */
-sushi-media-bin scale {
- margin-top: .5em;
- padding: 3px 0px;
- background-image: linear-gradient(to top, @transparent-dark 3px, transparent 3px);
-}
-
-sushi-media-bin scale trough {
- border: 0;
- border-radius: 0px;
- padding: 1px;
- background: @transparent-light;
-}
-
-sushi-media-bin scale slider {
- min-height: 12px;
- min-width: 12px;
- margin: -4px;
- border: 0px;
- border-radius: 6px;
- box-shadow: none;
- background: none;
-}
-
-sushi-media-bin scale highlight {
- border: 0px;
- padding: 0px;
- border-radius: 0px 4px 4px 0px;
- background: @highlight-color;
-}
-
-sushi-media-bin scale value {
- padding: 2px 0px;
- border-radius: 1em;
- background: @transparent-dark;
-}
-
-sushi-media-bin scale:hover slider {
- background: white;
-}
-
-/* Volume popover */
-popover.sushi-media-bin {
- border: 0px;
- border-radius: 0px;
- box-shadow: none;
- background: none;
-}
-
-popover.sushi-media-bin scale {
- border-radius: 18px;
- padding: 6px;
- background: @transparent-dark;
-}
-
-popover.sushi-media-bin scale trough {
- outline: 0px;
- border: 0px;
- border-radius: 3px;
- padding: 1px;
- background: @transparent-light;
-}
-
-popover.sushi-media-bin scale highlight {
- border: 0px;
- padding: 0px;
- border-radius: 4px;
- background: @highlight-color;
-}
-
-popover.sushi-media-bin scale slider {
- min-height: 12px;
- min-width: 12px;
- margin: -3px;
- border: 0px;
- border-radius: 6px;
- box-shadow: none;
- background: none;
+/* Controls */
+sushi-media-bin box.overlay-bar.bottom {
+ padding: 13px;
+ border-radius: 5px;
}
-popover.sushi-media-bin scale:hover slider {
- background: white;
+sushi-media-bin box.overlay-bar.bottom label {
+ margin: 0px 6px;
}
/* Audio nodes */
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
