Add support for displaying gzipped lottie (e.g. tgs) by mohsenasm · Pull Request #1104 · SableClient/Sable · GitHub
Skip to content

Add support for displaying gzipped lottie (e.g. tgs) - #1104

Merged
7w1 merged 6 commits into
SableClient:devfrom
mohsenasm:gzipped-lottie
Jul 26, 2026
Merged

Add support for displaying gzipped lottie (e.g. tgs)#1104
7w1 merged 6 commits into
SableClient:devfrom
mohsenasm:gzipped-lottie

Conversation

@mohsenasm

@mohsenasm mohsenasm commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Description

Hi,
This PR adds support for displaying gzipped Lottie files, such as .tgs (Telegram sticker) files.

Demo video:
demo

How it works

Gzipped files begin with a fixed byte sequence (1f 8b), which distinguishes them from standard image formats (PNG, WebP, JPG). The implementation detects this signature in the file header and automatically decompresses gzipped content before parsing it as Lottie JSON. If parsing succeeds, the decompressed animation is passed to the Lottie player.

To test this feature, download and unzip AnimatedSticker.tgs.zip, then send it as m.image or m.sticker.

What I have tested

  • Works as m.image, m.sticker, and inline emoji on Chrome
  • Works as m.image and m.sticker on Safari
  • Functions correctly in sticker and emoji picker on both browsers

Next steps

  • Fix inline Lottie emoji width on Safari
  • Respect autoplayStickers setting when rendering stickers (set autoplay={false} in DotLottieReact)
  • Respect autoplayEmojis setting when rendering emojis (set autoplay={false} in DotLottieReact)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings

AI disclosure:

  • Partially AI assisted (clarify which code was AI assisted and briefly explain what it does).
  • Fully AI generated (explain what all the generated code does in moderate detail).

@mohsenasm
mohsenasm requested review from 7w1 and hazre as code owners July 17, 2026 12:25
@mohsenasm
mohsenasm marked this pull request as draft July 17, 2026 17:37
@mohsenasm
mohsenasm force-pushed the gzipped-lottie branch 2 times, most recently from 88c48c2 to c2ee781 Compare July 23, 2026 17:53
@mohsenasm
mohsenasm marked this pull request as ready for review July 23, 2026 18:23
@mohsenasm

Copy link
Copy Markdown
Contributor Author

@7w1

7w1 commented Jul 24, 2026

Copy link
Copy Markdown
Member

Yes, please do. It looks like those lint and merge errors are just a slightly messed up merge in Bookmarks.tsx with some duplicate lines

@mohsenasm

mohsenasm commented Jul 24, 2026

Copy link
Copy Markdown
Contributor Author

After the merge, some animated stickers no longer work (those with "type": "m.sticker"). I suspect this line is the cause:

return mxcUrlToHttp(mx, url, useAuthentication, 800, 600, 'scale') ?? undefined;

It asks the homeserver to scale stickers, but the server can't scale Lottie. We can see that in the logs:

Cannot find any thumbnails for the requested media ('/_matrix/client/v1/media/thumbnail/...').
This might mean the media is not a supported_media_format=(image/jpeg, image/jpg, image/webp, image/gif, image/png) or that thumbnailing failed for some other reason. (Dynamic thumbnails are disabled on this server.)

What should we do? Should we fallback to the original download url when thumbnail is not available? @7w1


This is fixed when I change the line to:

return mxcUrlToHttp(mx, url, useAuthentication) ?? undefined;

Why do we use a thumbnail when displaying stickers in room, but the full image in the sticker picker?

@7w1

7w1 commented Jul 24, 2026

Copy link
Copy Markdown
Member

You're right, it probably shouldn't have been changed there. I changed it in #1286 so if you merge/rebase on the latest it should finally work

@mohsenasm

Copy link
Copy Markdown
Contributor Author

Thanks. It's fixed now. @7w1

@7w1
7w1 force-pushed the gzipped-lottie branch 2 times, most recently from f30cff9 to 25b7da5 Compare July 26, 2026 02:53
@7w1

7w1 commented Jul 26, 2026

Copy link
Copy Markdown
Member

Hey, I'm doing some cleanup on your pr and it'll be merged at some point. There's a few issues I still need to fix, namely better mime type classification, some form of max size, and just testing coverage and making sure normal media isn't broken.

@mohsenasm

Copy link
Copy Markdown
Contributor Author

Hi, after your changes, animated stickers with "type": "m.sticker" and emote icons no longer work.

Please test your changes by sending an m.sticker event with a .tgs file (unzip it and use the mxc from AnimatedSticker.tgs.zip).

My code wasn’t sensitive to the mimetype, although I use image/tgs in my events. We don’t check the mimetype when displaying image/jpeg, so I think we don’t need to do it here either. We can verify the file is gzipped from the header and parse the JSON to confirm it’s Lottie, which also seems reasonably efficient.

@7w1

7w1 commented Jul 26, 2026

Copy link
Copy Markdown
Member

@7w1
7w1 force-pushed the gzipped-lottie branch from 090a324 to 0a20724 Compare July 26, 2026 16:21
@7w1
7w1 merged commit c965272 into SableClient:dev Jul 26, 2026
12 of 13 checks passed
7w1 added a commit that referenced this pull request Aug 17, 2026
> **Preview the next release on [dev.sable.moe](https://dev.sable.moe)**

> [!IMPORTANT]
> Merging this PR will create a new release.

## Features

* Add the `forum` room type with a dedicated forum view that presents
threads as topics. by @smokku in #980
* New composer commands: `/gif` opens the GIF picker and `/rainbowme`
sends rainbow-formatted action messages (#1109). by @eleboucher in #1573
* Add selectable app icons on Android and iOS. by @eleboucher in #1594
* Add MSC4466 profile sync controls for supported homeservers. by @7w1
in #1117
* Add experimental new calls using LiveKit on web, desktop, and
supported mobile devices, enabled by a single setting with Element Call
as the fallback. by @eleboucher in #1575
* Add toggleable, reorderable composer trigger buttons (emoji, gif,
sticker) with a drag-and-drop settings list. by @eleboucher in #1261
* Settings improvements: search the settings sidebar and customize
keyboard shortcuts (#1121). by @eleboucher in #1660
* Add an accessibility settings tab with color correction filters. by
@j0lol in #1664
* Persona improvements: pick a persona directly in the editor, an
account-wide persona toggle, latching shorthands, persona name colors,
and a redesigned persona settings menu (#1223, #1264, #1368, #1369,
#1435, #1462). by @j0lol in #1171
* Style tables in formatted messages. by @Steffo99 in #1580
* New bottom sheets across the app: attach files and pick emoji from
sheets in the composer, plus a room details sheet on small screens
(#1173, #1433). by @eleboucher in #1234
* Update the device display name after login to reflect the current
client and build flavor. by @hazre in #1458
* Replaced the connection status top bar with a small styled popup and
added a variant that shows sliding sync initial progress. by @7w1 in
#1200
* Add per-message profiles (MSC4461): a different name and avatar in
each room, with PluralKit import, shorthands, backup and restore,
editing sent messages, and profile info on user profiles (#1352, #1479,
#1586, #1611, #1651, #1701). by @j0lol in #1589
* The notifications inbox is now built from push rules evaluated on this
device instead of the server's `/notifications` endpoint, so mentions in
encrypted rooms are detected correctly. by @eleboucher in #1372
* Add beta desktop and mobile builds with a greatly improved mobile
experience, UnifiedPush support and more reliable notifications, better
desktop shortcuts, updates and window controls, and improved native
media handling and sharing. by @eleboucher in #1103

## Fixes

* Publish an `obtainium.json` app config with every release so Android
builds can be installed and auto-updated through Obtainium. by
@eleboucher in #1616
* Performance: faster startup and warm syncs by caching room metadata,
profile data, and device verification, plus lower memory use by pruning
inactive room history (#1127, #1184, #1305, #1466). by @7w1 in #1118
* Login and account fixes: full-URL homeservers no longer land on an
empty room, a retry button when discovery fails, OAuth device
verification no longer hangs, identity reset completes, key backup
restores on verified devices, and account switch or logout from the
offline screen (#1115, #1270, #1348, #1379, #1380). by @eleboucher in
#1582
* Media fixes: encrypted images and GIFs render again, playback works on
Firefox, better loading on slow connections, decrypted media is freed
from memory, gzipped Lottie support, stickers send reliably, and
notification sounds no longer play as media (#1104, #1296, #1331, #1332,
#1334, #1353, #1381). by @eleboucher in #1271
* Fix link previews leaving empty space in a message until it is
reloaded by @eleboucher in #1827
* Message formatting fixes: checklists no longer render as raw HTML,
spoilers work with proxy tags, maps with malformed coordinates no longer
crash the app, and membership reasons are wrapped in parentheses (#1248,
#1307, #1470). by @eleboucher in #1354
* Fix context menus closing instead of opening, keep the room options
sheet open, and let sidebar, space, and image viewer menus open on
long-press as well as right-click (#1336, #1358). by @eleboucher in
#1431
* Assorted fixes: popups on start appear one at a time, room leave
updates immediately, accepted invites stop reappearing, synced CSS
tweaks are restored, the scheduled-messages chip shows again, faster
recovery from network switches, plus small visual and formatting fixes
(#1114, #1120, #1146, #1200, #1220, #1284, #1514, #1656). by @eleboucher
in #1399
* Profile fixes: hero colours and full scrolling restored on profile
sheets, local time respects the 24-hour setting, devices stay sorted
when last-active times are missing, and no crash in room cosmetics
before members load (#1298, #1579, #1793). by @eleboucher in #1503
* Fix sliding sync issues: missing or stale display names, bridged
avatars, blank space icons, sticker and emote packs, subspaces, call
updates, and incomplete member lists (#1111, #1112, #1119, #1173, #1530,
#1554). by @7w1 in #1170
* Notification and unread fixes: rooms no longer stay unread after a
thread reply or restart, the inbox shows real message previews, the page
title shows the mention count, and tapping a notification navigates
correctly (#1245, #1390). by @eleboucher in #1816
* Timeline fixes: reliably follow new messages, stop loading a room's
whole history on open, unstuck pagination, restored polls, and fixed
thread rendering, reactions, and replies (#1113, #1358, #1363, #1367,
#1373, #1425). by @eleboucher in #1105
* Fix voice recordings continuing after cancel or rapid taps, and stop
the microphone when a recording is interrupted before the permission
prompt resolves (#1428). by @eleboucher in #1252
* Add option to always keep the last line of the text editor "inline"
with the UI buttons. by @lunar-seal in #1218
* Mobile polish: smoother swipe navigation and drawer, steady keyboard
while editing, better touch feedback, chat input and account panel,
swipe-to-edit on messages, and fixed swiping in attachments (#1103,
#1130, #1131, #1144, #1173, #1267, #1303, #1382, #1754). by @eleboucher
in #1166
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants