Animated sticker import

[tulir]

Lottie files can be converted using https://github.com/sot-tech/LottieConverter like mautrix-telegram does. Probably need to convert to gif to make it work, even though that's not such a nice format

[Ai-rin]

convert to gif

Why not apng?

[Bubu]

What about keeping them as lottie files and rendering them via https://github.com/airbnb/lottie-web?

(And then of course shoving lottie support into all the clients as well... eventually)

[tulir]

(And then of course shoving lottie support into all the clients as well... eventually)

That would have to be the first step, not the eventually step

[Bubu]

That would have to be the first step, not the eventually step

🤷 This is a bit of a chicken/egg problem isn't it? I think this would be useful to have even with partial client support.

[Bubu]

Fluffychat can now render lottie files: https://gitlab.com/famedly/fluffychat/-/blob/main/CHANGELOG.md#v0340-2021-07-13

[williamkray]

the comments on here sound unrelated, but the existing pack command leverages the convert_image function, both of which assume that the image packs should only include .png files. is this the right issue to request that those functions be updated to include logic that allows for animated gif sticker pack creation and import?

[Trendyne]

I don't understand why the images are force converted at all. If it supports the original image format, which from the thread it seems like it, then use it. I was encoding my stickers as lossless webps so they'd be better compressed, but apparently that's useless. Stickers are easily made 2x the size for no good reason. And if lossy formats are used, it would be even worse

[tulir]

webp support is fairly recent on iOS, and the original format in question in this issue (lottie) isn't supported anywhere. The conversion could probably be removed now, but it won't help with this issue.

[Trendyne]

Webps do support animations

[Oha-you]

You can actually upload an APNG/WebP image as a GIF so that it's stored with image/gif mime type.
And then describe it as image/gif in your json too, like so: test.json#L12
Thanks to this, an isGif check in Element will return true and your sticker will be treated as a normal GIF.
If people enabled "Autoplay GIFs", a source image will be displayed instead of a static preview: MImageBody.tsx#L550

Example sticker pack: https://oha-you.github.io/stickerpicker/web/?theme=$theme
Live demo: https://matrix.to/#/!stickerpicker:maunium.net/$p5lFnqaeTJxCTssiMEZx6Gv4Dh3NQeQWWvSlhe_tz9o?via=maunium.net&via=matrix.org&via=envs.net

You also need to disable PNG conversion, of course. Here's how I patched it: Oha-you@3eb61e4
I didn't touch stickerimport.py since I don't plan to convert any stickers (I'll prepare them manually).
You can probably add fancy detection of animated webp/apng images, but since I'll probably have separate animated sticker packs, I just added a lazy one-liner to force image/gif here: pack.py#L58

Note: currently such animations won't play on mobile, at least in Element Android. It's an upstream issue (even for actual GIFs)

[LuckyTurtleDev]

The sticker picker itself does support gifs. You can upload a pack with gifs and it work fine. The only issue is that their is now moved preview.

Because the import program of this repo does not support converting tgs to gif you need a different tool for this.
I have written an alternative import program, witch does support tgs: Lukas1818/mstickereditor

[HerrFrutti]

I've played around with your suggestions and have implemented the changes from @Oha-you.

I've added a stupid option to argparse so now you can add --animated 1 and it assumes the png's are animated. It's not super clean to use a global var to check if the animated var is true, but I did not want to waste to much time...

https://github.com/HerrFrutti/stickerpicker/blob/a9e7783263f6b92e782aff296a54a70f62dea421/sticker/pack.py#L142-L143

[HerrFrutti]

Oh and one weird thing is, that my stickers are not animated on my pack in the web, but if I send them in my chat, they are animated. Maybe my file format is wrong? I tried with webp and apng, both are not animated on the website, but in matrix chat they are.

like in the example from @Oha-you :

Example sticker pack: https://oha-you.github.io/stickerpicker/web/?theme=$theme

[Oha-you]

@HerrFrutti Ah, that's probably because I've added this commit as well Oha-you@f71cce9
Replaces thumbs with source images on mouse hover. Maybe that's not desirable for static stickers, but in my use case it worked fine.