[fractal] Improve design of video messages in room history

[Daniel Garcia Moreno <danigm src gnome org>]

commit 3640d6469efeeeb33edbed08ca8892df9046a2ca
Author: sonjita <sonjaleaheinze gmail com>
Date:   Sat Jan 18 18:51:46 2020 +0100

    Improve design of video messages in room history
    
    This commit fixes the right click context menu options for videos. Now,
    it contains "Reply", "Open With...", "Save Video As", "View Source" and
    "Delete Message".
    
    Furthermore, the auto video play widget of video messages in the room
    history gets overlayed with
    - a play icon in the center
    - a message context menu button on the top right. On click, it opens
    a popover. That popover contains the same options as the right click
    context menu popover.

 fractal-gtk/res/app.css                 |  8 +++++-
 fractal-gtk/res/ui/message_menu.ui      | 13 ++++++++++
 fractal-gtk/res/ui/scroll_widget.ui     |  2 +-
 fractal-gtk/src/widgets/message.rs      | 43 ++++++++++++++++++++++++++++++---
 fractal-gtk/src/widgets/message_menu.rs | 12 +++++++--
 5 files changed, 71 insertions(+), 7 deletions(-)
---
diff --git a/fractal-gtk/res/app.css b/fractal-gtk/res/app.css
index 99724eec..95ada2da 100644
--- a/fractal-gtk/res/app.css
+++ b/fractal-gtk/res/app.css
@@ -155,11 +155,17 @@ row:not(:selected) .member-uid {
   padding: 6px 9px;
 }
 
-.scroll_button {
+.round-button {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
 }
 
+.play-icon {
+  border-radius: 9999px;
+  -gtk-outline-radius: 9999px;
+  padding: 20px;
+}
+
 .msg-highlighted {
     color: @theme_selected_bg_color;
 }
diff --git a/fractal-gtk/res/ui/message_menu.ui b/fractal-gtk/res/ui/message_menu.ui
index e3203359..5dda5fd7 100644
--- a/fractal-gtk/res/ui/message_menu.ui
+++ b/fractal-gtk/res/ui/message_menu.ui
@@ -53,6 +53,19 @@
             <property name="position">2</property>
           </packing>
         </child>
+        <child>
+          <object class="GtkModelButton" id="save_video_as_button">
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="text" translatable="yes">Save Video As…</property>
+            <property name="action_name">room_history.save_as</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">2</property>
+          </packing>
+        </child>
         <child>
           <object class="GtkModelButton" id="copy_image_button">
             <property name="can_focus">True</property>
diff --git a/fractal-gtk/res/ui/scroll_widget.ui b/fractal-gtk/res/ui/scroll_widget.ui
index 7f717381..ea16bafe 100644
--- a/fractal-gtk/res/ui/scroll_widget.ui
+++ b/fractal-gtk/res/ui/scroll_widget.ui
@@ -65,7 +65,7 @@
                 </child>
                 <style>
                   <class name="osd"/>
-                  <class name="scroll_button"/>
+                  <class name="round-button"/>
                 </style>
               </object>
             </child>
diff --git a/fractal-gtk/src/widgets/message.rs b/fractal-gtk/src/widgets/message.rs
index ece491d2..8d702f5c 100644
--- a/fractal-gtk/src/widgets/message.rs
+++ b/fractal-gtk/src/widgets/message.rs
@@ -4,8 +4,7 @@ use itertools::Itertools;
 use chrono::prelude::*;
 use glib;
 use gtk;
-use gtk::prelude::*;
-use gtk::WidgetExt;
+use gtk::{prelude::*, ButtonExt, ContainerExt, Overlay, WidgetExt};
 use pango;
 use std::rc::Rc;
 use std::sync::mpsc::Sender;
@@ -414,10 +413,48 @@ impl MessageBox {
             &bx,
             start_playing,
         );
+
+        let overlay = Overlay::new();
         let video_widget = player.get_video_widget();
         video_widget.set_size_request(-1, 390);
         VideoPlayerWidget::auto_adjust_video_dimensions(&player);
-        bx.pack_start(&video_widget, true, true, 0);
+        overlay.add(&video_widget);
+
+        let play_icon =
+            gtk::Image::new_from_icon_name(Some("media-playback-start"), gtk::IconSize::Dialog);
+        play_icon.set_halign(gtk::Align::Center);
+        play_icon.set_valign(gtk::Align::Center);
+        play_icon.get_style_context().add_class("osd");
+        play_icon.get_style_context().add_class("play-icon");
+        overlay.add_overlay(&play_icon);
+
+        let menu_button = gtk::Button::new();
+        let three_dot_icon =
+            gtk::Image::new_from_icon_name(Some("view-more-symbolic"), gtk::IconSize::Button);
+        menu_button.set_image(Some(&three_dot_icon));
+        menu_button.get_style_context().add_class("osd");
+        menu_button.get_style_context().add_class("round-button");
+        menu_button.set_opacity(0.8);
+        menu_button.set_halign(gtk::Align::End);
+        menu_button.set_valign(gtk::Align::Start);
+        overlay.add_overlay(&menu_button);
+
+        let id = msg.id.clone();
+        let redactable = msg.redactable.clone();
+        let eventbox_weak = self.eventbox.downgrade();
+        menu_button.connect_clicked(move |_| {
+            eventbox_weak.upgrade().map(|eventbox| {
+                MessageMenu::new(
+                    id.as_str(),
+                    &RowType::Video,
+                    &redactable,
+                    &eventbox,
+                    eventbox.upcast_ref::<gtk::Widget>(),
+                );
+            });
+        });
+
+        bx.pack_start(&overlay, true, true, 0);
         self.connect_media_viewer(msg);
         self.video_player = Some(player.clone());
         bx
diff --git a/fractal-gtk/src/widgets/message_menu.rs b/fractal-gtk/src/widgets/message_menu.rs
index f80e4a39..2e5152a9 100644
--- a/fractal-gtk/src/widgets/message_menu.rs
+++ b/fractal-gtk/src/widgets/message_menu.rs
@@ -11,6 +11,7 @@ struct Widgets {
     reply_button: gtk::ModelButton,
     open_with_button: gtk::ModelButton,
     save_image_as_button: gtk::ModelButton,
+    save_video_as_button: gtk::ModelButton,
     copy_image_button: gtk::ModelButton,
     delete_message_button: gtk::ModelButton,
     view_source_button: gtk::ModelButton,
@@ -42,6 +43,10 @@ impl Widgets {
             .get_object("save_image_as_button")
             .expect("Can't find save_image_as_button in ui file.");
 
+        let save_video_as_button: gtk::ModelButton = builder
+            .get_object("save_video_as_button")
+            .expect("Can't find save_video_as_button in ui file.");
+
         let copy_image_button: gtk::ModelButton = builder
             .get_object("copy_image_button")
             .expect("Can't find copy_image_button in ui file.");
@@ -70,10 +75,11 @@ impl Widgets {
         copy_selected_button.hide();
         delete_message_button.set_visible(*redactable);
         menu_separator.set_visible(*redactable);
-        open_with_button.set_visible(mtype == &RowType::Image);
+        open_with_button.set_visible(mtype == &RowType::Image || mtype == &RowType::Video);
         save_image_as_button.set_visible(mtype == &RowType::Image);
+        save_video_as_button.set_visible(mtype == &RowType::Video);
         copy_image_button.set_visible(mtype == &RowType::Image);
-        copy_text_button.set_visible(mtype != &RowType::Image);
+        copy_text_button.set_visible(mtype != &RowType::Image && mtype != &RowType::Video);
 
         let data = glib::Variant::from(id);
         reply_button.set_action_target_value(Some(&data));
@@ -82,6 +88,7 @@ impl Widgets {
         delete_message_button.set_action_target_value(Some(&data));
         open_with_button.set_action_target_value(Some(&data));
         save_image_as_button.set_action_target_value(Some(&data));
+        save_video_as_button.set_action_target_value(Some(&data));
         copy_image_button.set_action_target_value(Some(&data));
         copy_text_button.set_action_target_value(Some(&data));
 
@@ -90,6 +97,7 @@ impl Widgets {
             reply_button,
             open_with_button,
             save_image_as_button,
+            save_video_as_button,
             copy_image_button,
             delete_message_button,
             view_source_button,