Add audio mute button in tab label

Fixes: https://gitlab.gnome.org/GNOME/epiphany/-/issues/311

4 files changed, 78 insertions, 19 deletions

diff --git a/meson.build b/meson.build
index bcd8b2a23..024600aff 100644
--- a/meson.build
+++ b/meson.build
@@ -76,7 +76,7 @@ config_h = declare_dependency(
 glib_requirement = '>= 2.61.2'
 gtk_requirement = '>= 3.24.0'
 nettle_requirement = '>= 3.4'
-webkitgtk_requirement = '>= 2.27.4'
+webkitgtk_requirement = '>= 2.29.2'
 
 cairo_dep = dependency('cairo', version: '>= 1.2')
 gcr_dep = dependency('gcr-3', version: '>= 3.5.5')
diff --git a/src/ephy-notebook.c b/src/ephy-notebook.c
index f946ea28a..111aa2c23 100644
--- a/src/ephy-notebook.c
+++ b/src/ephy-notebook.c
@@ -761,6 +761,16 @@ close_button_clicked_cb (GtkWidget *widget,
   g_signal_emit (notebook, signals[TAB_CLOSE_REQUEST], 0, tab);
 }
 
+static void
+audio_clicked_cb (GtkWidget *widget,
+                  EphyEmbed *embed)
+{
+  EphyWebView *view = ephy_embed_get_web_view (embed);
+  gboolean muted = webkit_web_view_get_is_muted (WEBKIT_WEB_VIEW (view));
+
+  webkit_web_view_set_is_muted (WEBKIT_WEB_VIEW (view), !muted);
+}
+
 static GtkWidget *
 build_tab_label (EphyNotebook *nb,
                  EphyEmbed    *embed)
@@ -770,6 +780,7 @@ build_tab_label (EphyNotebook *nb,
 
   tab_label = ephy_tab_label_new ();
   g_signal_connect (tab_label, "close-clicked", G_CALLBACK (close_button_clicked_cb), embed);
+  g_signal_connect (tab_label, "audio-clicked", G_CALLBACK (audio_clicked_cb), embed);
 
   /* Set up drag-and-drop target */
   g_signal_connect (tab_label, "drag-data-received",
@@ -790,6 +801,7 @@ build_tab_label (EphyNotebook *nb,
   g_object_bind_property (view, "icon", tab_label, "icon-buf", G_BINDING_DEFAULT | G_BINDING_SYNC_CREATE);
   g_object_bind_property (view, "is-loading", tab_label, "spinning", G_BINDING_DEFAULT | G_BINDING_SYNC_CREATE);
   g_object_bind_property (view, "is-playing-audio", tab_label, "audio", G_BINDING_DEFAULT | G_BINDING_SYNC_CREATE);
+  g_object_bind_property (view, "is-muted", tab_label, "audio-muted", G_BINDING_DEFAULT | G_BINDING_SYNC_CREATE);
 
   return tab_label;
 }
diff --git a/src/ephy-tab-label.c b/src/ephy-tab-label.c
index 2562bf323..60c06eecf 100644
--- a/src/ephy-tab-label.c
+++ b/src/ephy-tab-label.c
@@ -35,7 +35,8 @@ struct _EphyTabLabel {
   GtkWidget *icon;
   GtkWidget *label;
   GtkWidget *close_button;
-  GtkWidget *audio_button;
+  GtkWidget *audio_box;
+  GtkWidget *audio_image;
 
   gboolean is_pinned;
   gboolean is_loading;
@@ -44,6 +45,7 @@ struct _EphyTabLabel {
 
 enum {
   CLOSE_CLICKED,
+  AUDIO_CLICKED,
   LAST_SIGNAL
 };
 
@@ -54,6 +56,7 @@ enum {
   PROP_ICON_BUF,
   PROP_SPINNING,
   PROP_AUDIO,
+  PROP_AUDIO_MUTED,
   PROP_PINNED,
   LAST_PROP
 };
@@ -88,6 +91,13 @@ ephy_tab_label_update_icon (EphyTabLabel *self)
 }
 
 static void
+ephy_tab_label_update_audio_muted (GtkWidget *image,
+                                   gboolean   muted)
+{
+  gtk_image_set_from_icon_name (GTK_IMAGE (image), muted ? "audio-volume-muted-symbolic" : "audio-volume-high-symbolic", GTK_ICON_SIZE_MENU);
+}
+
+static void
 ephy_tab_label_set_property (GObject      *object,
                              guint         prop_id,
                              const GValue *value,
@@ -120,7 +130,10 @@ ephy_tab_label_set_property (GObject      *object,
       ephy_tab_label_set_spinning (self, g_value_get_boolean (value));
       break;
     case PROP_AUDIO:
-      gtk_widget_set_visible (self->audio_button, g_value_get_boolean (value));
+      gtk_widget_set_visible (self->audio_box, g_value_get_boolean (value));
+      break;
+    case PROP_AUDIO_MUTED:
+      ephy_tab_label_update_audio_muted (self->audio_image, g_value_get_boolean (value));
       break;
     case PROP_PINNED:
       self->is_pinned = g_value_get_boolean (value);
@@ -152,7 +165,9 @@ ephy_tab_label_get_property (GObject    *object,
       g_value_set_boolean (value, spinning);
       break;
     case PROP_AUDIO:
-      g_value_set_boolean (value, gtk_widget_get_visible (self->audio_button));
+      g_value_set_boolean (value, gtk_widget_get_visible (self->audio_box));
+      break;
+    case PROP_AUDIO_MUTED:
       break;
     case PROP_PINNED:
       g_value_set_boolean (value, self->is_pinned);
@@ -273,6 +288,14 @@ close_button_clicked_cb (GtkWidget    *widget,
 }
 
 static void
+audio_box_button_release_event_cb (GtkWidget    *widget,
+                                   GdkEvent     *event,
+                                   EphyTabLabel *tab_label)
+{
+  g_signal_emit (tab_label, signals[AUDIO_CLICKED], 0, NULL);
+}
+
+static void
 style_updated_cb (GtkWidget *widget,
                   gpointer   user_data)
 {
@@ -322,6 +345,12 @@ ephy_tab_label_class_init (EphyTabLabelClass *klass)
                                                      FALSE,
                                                      G_PARAM_READWRITE |
                                                      G_PARAM_CONSTRUCT);
+  obj_properties[PROP_AUDIO_MUTED] = g_param_spec_boolean ("audio-muted",
+                                                           "Audio Muted",
+                                                           "Is audio muted",
+                                                           FALSE,
+                                                           G_PARAM_READWRITE |
+                                                           G_PARAM_CONSTRUCT);
   obj_properties[PROP_PINNED] = g_param_spec_boolean ("pinned",
                                                       "Pinned",
                                                       "Is tab pinned",
@@ -339,16 +368,27 @@ ephy_tab_label_class_init (EphyTabLabelClass *klass)
                                          G_TYPE_NONE,
                                          0);
 
+  signals[AUDIO_CLICKED] = g_signal_new ("audio-clicked",
+                                         EPHY_TYPE_TAB_LABEL,
+                                         G_SIGNAL_RUN_LAST,
+                                         0,
+                                         NULL, NULL,
+                                         NULL,
+                                         G_TYPE_NONE,
+                                         0);
+
   /* Bind class to template */
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/epiphany/gtk/tab-label.ui");
 
   gtk_widget_class_bind_template_child (widget_class, EphyTabLabel, spinner);
   gtk_widget_class_bind_template_child (widget_class, EphyTabLabel, icon);
   gtk_widget_class_bind_template_child (widget_class, EphyTabLabel, label);
-  gtk_widget_class_bind_template_child (widget_class, EphyTabLabel, audio_button);
+  gtk_widget_class_bind_template_child (widget_class, EphyTabLabel, audio_box);
+  gtk_widget_class_bind_template_child (widget_class, EphyTabLabel, audio_image);
   gtk_widget_class_bind_template_child (widget_class, EphyTabLabel, close_button);
 
   gtk_widget_class_bind_template_callback (widget_class, close_button_clicked_cb);
+  gtk_widget_class_bind_template_callback (widget_class, audio_box_button_release_event_cb);
   gtk_widget_class_bind_template_callback (widget_class, style_updated_cb);
 }
 
diff --git a/src/resources/gtk/tab-label.ui b/src/resources/gtk/tab-label.ui
index 3fa1527af..d80e40f7b 100644
--- a/src/resources/gtk/tab-label.ui
+++ b/src/resources/gtk/tab-label.ui
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.22.1 -->
+<!-- Generated with glade 3.22.2 -->
 <interface>
   <requires lib="gtk+" version="3.20"/>
   <object class="GtkImage" id="close_button_image">
@@ -45,6 +45,26 @@
       </packing>
     </child>
     <child>
+      <object class="GtkEventBox" id="audio_box">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <signal name="button-release-event" handler="audio_box_button_release_event_cb" object="EphyTabLabel" swapped="no"/>
+        <child>
+          <object class="GtkImage" id="audio_image">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="icon_name">audio-volume-high-symbolic</property>
+          </object>
+        </child>
+      </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="GtkButton" id="close_button">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
@@ -66,18 +86,5 @@
         <property name="position">3</property>
       </packing>
     </child>
-    <child>
-      <object class="GtkImage" id="audio_button">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="icon_name">audio-volume-high-symbolic</property>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-        <property name="pack_type">end</property>
-        <property name="position">5</property>
-      </packing>
-    </child>
   </template>
 </interface>