feat: support png, gif, webp

[ZuzooVn]

Checklist:

Important

Please review the checklist below before submitting your pull request.

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

Description

PNg

• Before

- After

GIF, WEBP

• Before

- After

2024-09-04_06-41-13.mp4

Type of Change

• New feature (non-breaking change which adds functionality)

[xuzuodong]

Since animated images do not require cropping, we need to ensure that even if the user uploads a non-square image, it will be displayed without stretching.

[ZuzooVn]

thank @xuzuodong , I will fix it asap

[xuzuodong]

The implementation for determining animated .webp images looks good to me.

Could you also review the other minor issues mentioned above?

[ZuzooVn]

The implementation for determining animated .webp images looks good to me.

Could you also review the other minor issues mentioned above?

@xuzuodong I did it

[xuzuodong]

@ZuzooVn Uploading an animated image will raise an error now.

2024-10-08.09.35.41.mov

[ZuzooVn]

@xuzuodong I can not reproduce this issue. Could you please send me that image?

[xuzuodong]

Here's the webp image:

animated-webp-supported.webp.zip

Although I don't think there's anything special about this image; the error is clearly caused by accessing file property from an undefined value. If you check web/app/components/base/app-icon-picker/index.tsx, there's a lot of TypeScript error:

2024-10-11.17.19.25.mov

[crazywoola]

Hello can you resolve those comments.