rlottie: Add support of animated stickers and emojis

Author: yuraiz

data/resources/style-dark.css

@@ -2,6 +2,11 @@
   background-color: @dark_2;
 }
 
+/* sticker must be repainted to a text color in messages */
+messagesticker.needs-repainting > overlay > widget > widget {
+  filter: invert(1);
+}
+
 .chat-list row .unread-count-muted {
   background-color: @dark_2;
 }

data/resources/ui/content-message-sticker.ui

@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <template class="MessageSticker" parent="MessageBase">
-    <property name="layout-manager">
-      <object class="GtkBinLayout"/>
-    </property>
     <child>
-      <object class="GtkOverlay">
+      <object class="GtkOverlay" id="overlay">
         <child>
-          <object class="MessageStickerPicture" id="picture"/>
+          <object class="GtkGestureClick" id="click">
+            <property name="button">1</property>
+          </object>
+        </child>
+        <child>
+          <object class="AdwBin" id="bin"/>
         </child>
         <child type="overlay">
           <object class="MessageIndicators" id="indicators">

src/session/content/message_row/mod.rs

@@ -7,7 +7,6 @@ mod label;
 mod media_picture;
 mod photo;
 mod sticker;
-mod sticker_picture;
 mod text;
 mod video;
 
@@ -19,7 +18,6 @@ use self::label::MessageLabel;
 use self::media_picture::MediaPicture;
 use self::photo::MessagePhoto;
 use self::sticker::MessageSticker;
-use self::sticker_picture::StickerPicture;
 use self::text::MessageText;
 use self::video::MessageVideo;
 
@@ -336,11 +334,17 @@ impl MessageRow {
                 MessageContent::MessageAnimation(_) /*| MessageContent::MessageVideo(_)*/ => {
                     self.update_specific_content::<_, MessageVideo>(message_.clone());
                 }
+                MessageContent::MessageAnimatedEmoji(data)
+                    if data.animated_emoji.sticker.clone().map(
+                        |s| matches!(s.format, StickerFormat::Webp | StickerFormat::Tgs)
+                    ).unwrap_or_default() => {
+                    self.update_specific_content::<_, MessageSticker>(message_.clone());
+                }
                 MessageContent::MessagePhoto(_) => {
                     self.update_specific_content::<_, MessagePhoto>(message_.clone());
                 }
                 MessageContent::MessageSticker(data)
-                    if data.sticker.format == StickerFormat::Webp =>
+                    if matches!(data.sticker.format, StickerFormat::Webp | StickerFormat::Tgs) =>
                 {
                     self.update_specific_content::<_, MessageSticker>(message_.clone());
                 }

src/session/content/message_row/sticker.rs

@@ -1,16 +1,14 @@
+use adw::prelude::*;
 use glib::clone;
-use gtk::prelude::*;
 use gtk::subclass::prelude::*;
 use gtk::{gdk, gio, glib, CompositeTemplate};
 use image::io::Reader as ImageReader;
 use image::ImageFormat;
 use std::io::Cursor;
-use tdlib::enums::MessageContent;
+use tdlib::enums::{MessageContent, StickerFormat, StickerFullType};
 use tdlib::types::File;
 
-use crate::session::content::message_row::{
-    MessageBase, MessageBaseImpl, MessageIndicators, StickerPicture,
-};
+use crate::session::content::message_row::{MessageBase, MessageBaseImpl, MessageIndicators};
 use crate::tdlib::Message;
 use crate::utils::spawn;
 
@@ -19,14 +17,21 @@ use super::base::MessageBaseExt;
 mod imp {
     use super::*;
     use once_cell::sync::Lazy;
-    use std::cell::RefCell;
+    use std::cell::{Cell, RefCell};
 
     #[derive(Debug, Default, CompositeTemplate)]
     #[template(resource = "/com/github/melix99/telegrand/ui/content-message-sticker.ui")]
     pub(crate) struct MessageSticker {
+        pub(super) format: RefCell<Option<StickerFormat>>,
+        pub(super) aspect_ratio: Cell<f64>,
+        pub(super) is_emoji: Cell<bool>,
         pub(super) message: RefCell<Option<Message>>,
         #[template_child]
-        pub(super) picture: TemplateChild<StickerPicture>,
+        pub(super) overlay: TemplateChild<gtk::Overlay>,
+        #[template_child]
+        pub(super) click: TemplateChild<gtk::GestureClick>,
+        #[template_child]
+        pub(super) bin: TemplateChild<adw::Bin>,
         #[template_child]
         pub(super) indicators: TemplateChild<MessageIndicators>,
     }
@@ -72,9 +77,61 @@ mod imp {
                 _ => unimplemented!(),
             }
         }
+
+        fn constructed(&self) {
+            let obj = self.obj();
+            self.click
+                .connect_released(clone!(@weak obj => move |_, _, _, _| {
+                    let imp = obj.imp();
+                    if imp.is_emoji.get() {
+                        if let Some(animation) = imp.bin.child() {
+                            if let Ok(animation) = animation.downcast::<rlt::Animation>() {
+                                if !animation.is_playing() {
+                                    // TODO: animated emoji needs to play
+                                    // effect when someone clicks on it
+                                    animation.play();
+                                }
+                            }
+                        }
+                    }
+                }));
+        }
     }
 
-    impl WidgetImpl for MessageSticker {}
+    impl WidgetImpl for MessageSticker {
+        fn measure(&self, orientation: gtk::Orientation, for_size: i32) -> (i32, i32, i32, i32) {
+            const STICKER_SIZE: i32 = 176;
+            const EMOJI_SIZE: i32 = 112;
+            const EMOJI_BOTTOM_MARGIN: i32 = 16;
+
+            let (size, bottom_margin) = if self.is_emoji.get() {
+                (EMOJI_SIZE, EMOJI_BOTTOM_MARGIN)
+            } else {
+                (STICKER_SIZE, 0)
+            };
+
+            let aspect_ratio = self.aspect_ratio.get();
+            let min_size = self.overlay.measure(orientation, for_size).0;
+            let size = if let gtk::Orientation::Horizontal = orientation {
+                if aspect_ratio >= 1.0 {
+                    size
+                } else {
+                    (size as f64 * aspect_ratio) as i32
+                }
+            } else if aspect_ratio >= 1.0 {
+                (size as f64 / aspect_ratio) as i32 + bottom_margin
+            } else {
+                size + bottom_margin
+            }
+            .max(min_size);
+
+            (size, size, -1, -1)
+        }
+
+        fn size_allocate(&self, width: i32, height: i32, baseline: i32) {
+            self.overlay.allocate(width, height, baseline, None);
+        }
+    }
     impl MessageBaseImpl for MessageSticker {}
 }
 
@@ -95,35 +152,54 @@ impl MessageBaseExt for MessageSticker {
 
         imp.indicators.set_message(message.clone().upcast());
 
-        imp.picture.set_texture(None);
+        let (sticker, looped) = match message.content().0 {
+            MessageContent::MessageSticker(data) => {
+                let sticker = data.sticker;
+                (sticker, true)
+            }
+            MessageContent::MessageAnimatedEmoji(data) => {
+                self.imp().is_emoji.set(true);
+                let sticker = data.animated_emoji.sticker.unwrap();
+                let looped = matches!(sticker.full_type, StickerFullType::CustomEmoji(_));
+                (sticker, looped)
+            }
+            _ => unreachable!(),
+        };
 
-        if let MessageContent::MessageSticker(data) = message.content().0 {
-            self.imp()
-                .picture
-                .set_aspect_ratio(data.sticker.width as f64 / data.sticker.height as f64);
+        match sticker.full_type {
+            StickerFullType::CustomEmoji(data) if data.needs_repainting => {
+                self.add_css_class("needs-repainting")
+            }
+            _ => self.remove_css_class("needs-repainting"),
+        }
 
-            if data.sticker.sticker.local.is_downloading_completed {
-                self.load_sticker(&data.sticker.sticker.local.path);
-            } else {
-                let (sender, receiver) =
-                    glib::MainContext::sync_channel::<File>(Default::default(), 5);
-
-                receiver.attach(
-                    None,
-                    clone!(@weak self as obj => @default-return glib::Continue(false), move |file| {
-                        if file.local.is_downloading_completed {
-                            obj.load_sticker(&file.local.path);
-                        }
+        imp.format.replace(Some(sticker.format));
 
-                        glib::Continue(true)
-                    }),
-                );
+        imp.aspect_ratio
+            .set(sticker.width as f64 / sticker.height as f64);
 
-                message
-                    .chat()
-                    .session()
-                    .download_file(data.sticker.sticker.id, sender);
-            }
+        // TODO: draw sticker outline with cairo
+
+        if sticker.sticker.local.is_downloading_completed {
+            self.load_sticker(&sticker.sticker.local.path, looped);
+        } else {
+            let (sender, receiver) = glib::MainContext::sync_channel::<File>(Default::default(), 5);
+
+            receiver.attach(
+                None,
+                clone!(@weak self as obj => @default-return glib::Continue(false), move |file| {
+                    if file.local.is_downloading_completed {
+                        obj.load_sticker(&file.local.path, looped);
+                    }
+
+                    glib::Continue(true)
+                }),
+            );
+
+            message
+                .chat()
+                .session()
+                .download_file(sticker.sticker.id, sender);
         }
 
         imp.message.replace(Some(message));
@@ -132,35 +208,55 @@ impl MessageBaseExt for MessageSticker {
 }
 
 impl MessageSticker {
-    fn load_sticker(&self, path: &str) {
-        let picture = &*self.imp().picture;
-        let file = gio::File::for_path(path);
-        spawn(clone!(@weak picture => async move {
-            match file.load_bytes_future().await {
-                Ok((bytes, _)) => {
-                    let flat_samples = ImageReader::with_format(Cursor::new(bytes), ImageFormat::WebP)
-                        .decode()
-                        .unwrap()
-                        .into_rgba8()
-                        .into_flat_samples();
-
-                    let (stride, width, height) = flat_samples.extents();
-                    let gtk_stride = stride * width;
-
-                    let bytes = glib::Bytes::from_owned(flat_samples.samples);
-                    let texture = gdk::MemoryTexture::new(
-                        width as i32,
-                        height as i32,
-                        gdk::MemoryFormat::R8g8b8a8,
-                        &bytes,
-                        gtk_stride,
-                    );
-                    picture.set_texture(Some(texture.upcast()));
-                }
-                Err(e) => {
-                    log::warn!("Failed to load a sticker: {}", e);
+    fn load_sticker(&self, path: &str, looped: bool) {
+        let path = path.to_owned();
+        let format = self.imp().format.borrow().clone().unwrap();
+        spawn(clone!(@weak self as obj => async move {
+            let widget: gtk::Widget = match format {
+            StickerFormat::Tgs => {
+                let animation = rlt::Animation::from_filename(&path);
+                animation.set_loop(looped);
+                animation.use_cache(looped);
+                animation.play();
+                animation.upcast()
+            }
+            StickerFormat::Webp => {
+                let file = gio::File::for_path(&path);
+                match file.load_bytes_future().await {
+                    Ok((bytes, _)) => {
+                        let flat_samples =
+                            ImageReader::with_format(Cursor::new(bytes), ImageFormat::WebP)
+                                .decode()
+                                .unwrap()
+                                .into_rgba8()
+                                .into_flat_samples();
+
+                        let (stride, width, height) = flat_samples.extents();
+                        let gtk_stride = stride * width;
+
+                        let bytes = glib::Bytes::from_owned(flat_samples.samples);
+                        let texture = gdk::MemoryTexture::new(
+                            width as i32,
+                            height as i32,
+                            gdk::MemoryFormat::R8g8b8a8,
+                            &bytes,
+                            gtk_stride,
+                        );
+
+                        let picture = gtk::Picture::new();
+                        picture.set_paintable(Some(&texture));
+                        picture.upcast()
+                    }
+                    Err(e) => {
+                        log::warn!("Failed to load a sticker: {}", e);
+                        return;
+                    }
                 }
             }
+            _ => unimplemented!(),
+        };
+
+        obj.imp().bin.set_child(Some(&widget));
         }));
     }
 }