From d0e4d3525cd970579d2dc33e0898cc6de1002d7c Mon Sep 17 00:00:00 2001
From: xihongshichaojidan8
 <93921041+xihongshichaojidan8@users.noreply.github.com>
Date: Wed, 30 Sep 2026 15:58:45 +0800
Subject: [PATCH] fix(frontend): show media icons for APNG, AVIF and WebM
 (#6089)

---
 frontend/src/core/utils/files.tsx            |  3 +++
 frontend/tests/unit/core/utils/files.test.ts | 17 +++++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 frontend/tests/unit/core/utils/files.test.ts

diff --git a/frontend/src/core/utils/files.tsx b/frontend/src/core/utils/files.tsx
index 409dda5e2e..956c271818 100644
--- a/frontend/src/core/utils/files.tsx
+++ b/frontend/src/core/utils/files.tsx
@@ -234,6 +234,8 @@ export function getFileIcon(filepath: string, className?: string) {
     case "jpg":
     case "jpeg":
     case "png":
+    case "apng":
+    case "avif":
     case "gif":
     case "bmp":
     case "tiff":
@@ -254,6 +256,7 @@ export function getFileIcon(filepath: string, className?: string) {
     case "mp4":
     case "mov":
     case "m4v":
+    case "webm":
       return <FilePlayIcon className={className} />;
     default:
       if (isCodeFile) {
diff --git a/frontend/tests/unit/core/utils/files.test.ts b/frontend/tests/unit/core/utils/files.test.ts
new file mode 100644
index 0000000000..f10aa44ad8
--- /dev/null
+++ b/frontend/tests/unit/core/utils/files.test.ts
@@ -0,0 +1,17 @@
+import { expect, test } from "@rstest/core";
+import { FilePlayIcon, FileTextIcon, ImageIcon } from "lucide-react";
+
+import { canBrowserPreviewFile, getFileIcon } from "@/core/utils/files";
+
+test.each([
+  ["animation.apng", ImageIcon],
+  ["photo.avif", ImageIcon],
+  ["clip.webm", FilePlayIcon],
+])("uses a media icon for previewable %s", (filepath, icon) => {
+  expect(canBrowserPreviewFile(filepath)).toBe(true);
+  expect(getFileIcon(filepath).type).toBe(icon);
+});
+
+test("keeps the document icon for an unknown extension", () => {
+  expect(getFileIcon("data.unknown").type).toBe(FileTextIcon);
+});