From 018d13ea7806c4117441982f76d6fda72f951680 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Sat, 11 Apr 2026 10:47:52 +0800
Subject: [PATCH] refactor(front): improve image handling in FileIcon component
 by adding HEIC support and optimizing file type checks

---
 front/components/FileIcon/Image.vue | 19 ++++++----
 front/components/FileIcon/Index.vue |  8 ++---
 front/components/FileIcon/Video.vue | 56 +++--------------------------
 front/lib/getVideoFileThumbnail.ts  | 44 +++++++++++++++++++++++
 4 files changed, 64 insertions(+), 63 deletions(-)
 create mode 100644 front/lib/getVideoFileThumbnail.ts

diff --git a/front/components/FileIcon/Image.vue b/front/components/FileIcon/Image.vue
index 5d390d2..9ea6e0f 100644
--- a/front/components/FileIcon/Image.vue
+++ b/front/components/FileIcon/Image.vue
@@ -1,16 +1,21 @@
 <script setup lang="ts">
-import type { filePreview } from './Index.vue'
+import { isHeic, heicTo } from 'heic-to'
 
 const props = defineProps<{
-    file: File | filePreview
+    file: File
 }>()
 
-const imageUrl = computed(() => {
-    if (props?.file?.type?.startsWith('image/') && props?.file instanceof File) {
-        return URL.createObjectURL(props?.file)
+const { state: imageUrl } = useAsyncState(async () => {
+    let blob: Blob = props?.file
+    if (await isHeic(props?.file)) {
+        blob = await heicTo({
+            blob: props?.file,
+            type: 'image/jpeg',
+            quality: 1,
+        })
     }
-    return null
-})
+    return URL.createObjectURL(blob)
+}, null)
 
 onUnmounted(() => {
     if (imageUrl.value) {
diff --git a/front/components/FileIcon/Index.vue b/front/components/FileIcon/Index.vue
index 1bd5cde..e5b9f70 100644
--- a/front/components/FileIcon/Index.vue
+++ b/front/components/FileIcon/Index.vue
@@ -9,7 +9,6 @@ export type filePreview = {
     size: number
 }
 
-import { LucideFileAudio, LucideFileVideo, LucideFile, LucideFileCode, LucideFileArchive, LucideFileText } from 'lucide-vue-next'
 const props = withDefaults(
     defineProps<{
         file: File | filePreview
@@ -20,15 +19,16 @@ const props = withDefaults(
         size: 'md',
     }
 )
-const isImage = computed(() => props?.file?.type?.startsWith('image/'))
-const isVideo = computed(() => props?.file?.type?.startsWith('video/'))
+const isFile = computed(() => props?.file instanceof File)
+const isImage = computed(() => isFile.value && props?.file?.type?.startsWith('image/'))
+const isVideo = computed(() => isFile.value && props?.file?.type?.startsWith('video/'))
 </script>
 
 <template>
     <div v-if="isImage || isVideo" :class="cx('flex overflow-hidden', size === 'sm' && 'max-w-20 max-h-16', size === 'md' && 'max-w-30 max-h-20')">
         <component
             :is="isImage ? ImageIcon : VideoIcon"
-            :file="props?.file"
+            :file="props?.file as File"
             class="block max-w-full max-h-full object-contain border border-black/20 rounded"
         />
     </div>
diff --git a/front/components/FileIcon/Video.vue b/front/components/FileIcon/Video.vue
index a28fbc8..ab0a007 100644
--- a/front/components/FileIcon/Video.vue
+++ b/front/components/FileIcon/Video.vue
@@ -1,60 +1,17 @@
 <script setup lang="ts">
-import type { filePreview } from './Index.vue'
+import getVideoFileThumbnail from '@/lib/getVideoFileThumbnail'
 
 const props = defineProps<{
-    file: File | filePreview
+    file: File
 }>()
 
 const { state: thumbnailUrl } = useAsyncState(async () => {
-    if (props.file instanceof File && props.file.type.startsWith('video/')) {
-        return await extractThumbnail(props.file)
+    if (props.file.type.startsWith('video/')) {
+        return await getVideoFileThumbnail(props.file)
     }
     return null
 }, null)
 
-async function extractThumbnail(file: File): Promise<string> {
-    return new Promise((resolve, reject) => {
-        const video = document.createElement('video')
-        const objectUrl = URL.createObjectURL(file)
-
-        video.muted = true
-        video.playsInline = true
-        video.preload = 'metadata'
-
-        video.onloadedmetadata = () => {
-            video.currentTime = video.duration * 0.1
-        }
-
-        video.onseeked = async () => {
-            try {
-                // WebCodecs: capture a VideoFrame from the video element
-                const frame = new VideoFrame(video)
-                const bitmap = await createImageBitmap(frame)
-                frame.close()
-
-                const canvas = new OffscreenCanvas(bitmap.width, bitmap.height)
-                const ctx = canvas.getContext('2d')!
-                ctx.drawImage(bitmap, 0, 0)
-                bitmap.close()
-
-                const blob = await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.8 })
-                URL.revokeObjectURL(objectUrl)
-                resolve(URL.createObjectURL(blob))
-            } catch (e) {
-                URL.revokeObjectURL(objectUrl)
-                reject(e)
-            }
-        }
-
-        video.onerror = () => {
-            URL.revokeObjectURL(objectUrl)
-            reject(new Error('Video load failed'))
-        }
-
-        video.src = objectUrl
-    })
-}
-
 onUnmounted(() => {
     if (!!thumbnailUrl.value) {
         URL.revokeObjectURL(thumbnailUrl.value)
@@ -67,9 +24,4 @@ onUnmounted(() => {
         <img :src="thumbnailUrl" class="object-contain block max-w-full max-h-full" />
         <LucidePlay class="size-[40%] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white" />
     </div>
-    <div v-else>
-        <div class="h-16 aspect-video flex justify-center items-center bg-white/80 rounded-sm">
-            <LucideVideo class="size-10" />
-        </div>
-    </div>
 </template>
diff --git a/front/lib/getVideoFileThumbnail.ts b/front/lib/getVideoFileThumbnail.ts
new file mode 100644
index 0000000..da8d742
--- /dev/null
+++ b/front/lib/getVideoFileThumbnail.ts
@@ -0,0 +1,44 @@
+async function getVideoFileThumbnail(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+        const video = document.createElement('video')
+        const objectUrl = URL.createObjectURL(file)
+
+        video.muted = true
+        video.playsInline = true
+        video.preload = 'metadata'
+
+        video.onloadedmetadata = () => {
+            video.currentTime = video.duration * 0.1
+        }
+
+        video.onseeked = async () => {
+            try {
+                // WebCodecs: capture a VideoFrame from the video element
+                const frame = new VideoFrame(video)
+                const bitmap = await createImageBitmap(frame)
+                frame.close()
+
+                const canvas = new OffscreenCanvas(bitmap.width, bitmap.height)
+                const ctx = canvas.getContext('2d')!
+                ctx.drawImage(bitmap, 0, 0)
+                bitmap.close()
+
+                const blob = await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.8 })
+                URL.revokeObjectURL(objectUrl)
+                resolve(URL.createObjectURL(blob))
+            } catch (e) {
+                URL.revokeObjectURL(objectUrl)
+                reject(e)
+            }
+        }
+
+        video.onerror = () => {
+            URL.revokeObjectURL(objectUrl)
+            reject(new Error('Video load failed'))
+        }
+
+        video.src = objectUrl
+    })
+}
+
+export default getVideoFileThumbnail