[sushi] media-bin: adapt audio player to Sushi design

[Cosimo Cecchi <cosimoc src gnome org>]

commit 9c7380ca76ba538f44736ef5619e841c455982b8
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Wed Jun 19 10:42:49 2019 -0700

    media-bin: adapt audio player to Sushi design
    
    Similar to what we did for the video widget.

 src/libsushi/SushiMediaBin.ui  | 143 ++++++++++++++++++-----------------------
 src/libsushi/sushi-media-bin.c |   3 +
 2 files changed, 67 insertions(+), 79 deletions(-)
---
diff --git a/src/libsushi/SushiMediaBin.ui b/src/libsushi/SushiMediaBin.ui
index f8eaa67..c06a385 100644
--- a/src/libsushi/SushiMediaBin.ui
+++ b/src/libsushi/SushiMediaBin.ui
@@ -290,8 +290,34 @@
           <object class="GtkBox" id="audio_box">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="valign">center</property>
-            <property name="orientation">vertical</property>
+            <property name="spacing">2</property>
+            <child>
+              <object class="GtkButton" id="audio_playback_button">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">False</property>
+                <property name="image">audio_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="audio_position_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="width_chars">4</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="audio_progress_scale">
                 <property name="visible">True</property>
@@ -300,104 +326,63 @@
                 <property name="draw_value">False</property>
               </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="audio_duration_label">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="spacing">2</property>
-                <child>
-                  <object class="GtkButton" id="audio_playback_button">
-                    <property name="visible">True</property>
+                <property name="width_chars">4</property>
+              </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="audio_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">audio_playback_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_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">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="width_chars">12</property>
-                  </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">True</property>
-                    <property name="position">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkVolumeButton" id="audio_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">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">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>
-                  <object class="GtkLabel" id="audio_position_label">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="width_chars">4</property>
                   </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">True</property>
-                    <property name="pack_type">end</property>
-                    <property name="position">3</property>
-                  </packing>
                 </child>
-                <style>
-                  <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">3</property>
               </packing>
             </child>
             <style>
+              <class name="bottom"/>
               <class name="audio"/>
             </style>
           </object>
diff --git a/src/libsushi/sushi-media-bin.c b/src/libsushi/sushi-media-bin.c
index 17c1fe6..c2469aa 100644
--- a/src/libsushi/sushi-media-bin.c
+++ b/src/libsushi/sushi-media-bin.c
@@ -107,6 +107,7 @@ typedef struct
   /* Internal Audio Widgets */
   GtkWidget      *audio_box;
   GtkScaleButton *audio_volume_button;
+  GtkLabel       *audio_duration_label;
   GtkLabel       *audio_position_label;
   GtkImage       *audio_playback_image;
 
@@ -1237,6 +1238,7 @@ sushi_media_bin_class_init (SushiMediaBinClass *klass)
   gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, bottom_revealer);
 
   gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, audio_box);
+  gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, audio_duration_label);
   gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, audio_volume_button);
   gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, audio_position_label);
   gtk_widget_class_bind_template_child_private (widget_class, SushiMediaBin, audio_playback_image);
@@ -1457,6 +1459,7 @@ sushi_media_bin_update_duration (SushiMediaBin *self)
   priv->duration = duration;
 
   duration = GST_TIME_AS_SECONDS (duration);
+  gtk_label_set_label (priv->audio_duration_label, format_time (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);