mattermost/mattermost

Add support for APNG (Animated PNG) image format

Open

#24,088 opened on Jul 20, 2023

View on GitHub
 (13 comments) (3 reactions) (1 assignee)TypeScript (7,823 forks)batch import
Difficulty/2:MediumEnhancementHelp WantedTech/ReactJS

Repository metrics

Stars
 (32,880 stars)
PR merge metrics
 (Avg merge 6d 5h) (318 merged PRs in 30d)

Description

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

Contributor guide

Research direction
Examine how animated GIFs are currently handled in the frontend, then extend the same mechanism to support APNG format.
Tech stack
typescript
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
JavaScriptTypeScriptGit
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85