Add support for APNG (Animated PNG) image format

[mattermod]

In the web application, we currently have support for displaying animated GIFs. Now, we need to add similar functionality to support animated PNGs as well.

Environment: Web

Reproduction Steps:

1. Attach the provided animated PNG file.
2. You can use sample animated PNG images from https://en.wikipedia.org/wiki/APNG .
3. Note that the attached image does not display animation in the post.
4. However, if you download the attachment, you will be able to view the original animated image in your system.

Expected:

• Instead of showing a still "preview" image, we want to display the original animated file, just like we do for animated GIFs.

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-53284

[olalekanteeblaze]

Can I pick this up? @marianunez @M-ZubairAhmed

[marianunez]

Can I pick this up?

Yes! I'll assign it to you and let us know if you have any questions

[larkox]

@olalekanteeblaze Have you made any progress on this?

[abhinav700]

@amyblais can I pick this issue if no one is working on it?

[larkox]

Since @olalekanteeblaze hasn't answered in a long while, I will assign it to you.

[abhinav700]

@larkox Thanks. Will begin working on it.

[marianunez]

@abhinav700 just wanted to check in and see if you have any questions about this issue?

[abhinav700]

@marianunez I am not working on this issue anymore.(sorry for not updating, was busy with something)

I have switched to a project which is more suitable for my current skillset.

[Vinecreeper888]

Hi, can I work on this?

[marianunez]

All yours @Vinecreeper888 👍

[Vinecreeper888]

Edit: I am able to show the animation in preview now. But I have a doubt. When I click on the send button, the same animation is not rendered in the chat. Should I change this as well?

@marianunez, I have been experimenting with few things but not able to find a solution. Have tried a bunch of approaches still not able to render the animation in preview. Any suggestions?

[hmhealey]

Do you perhaps need to have the server set FileInfo.HasPreviewImage to false? That's what the server uses for animated gifs to signal to the client that it should load the actual animated image instead of using the static preview image

[Vinecreeper888]

@hmhealey Yeah, i guess, but I am not sure if changing it to false has an impact in other places or if it has a performance impact. I can give it a try. Let me know