refactor: preview media

package.json

@@ -41,6 +41,7 @@
     "clsx": "^2.1.1",
     "framer-motion": "^11.1.8",
     "i18next": "^23.11.3",
+    "mime": "^4.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^14.1.1",

src/components/FileView.tsx

@@ -1,6 +1,8 @@
 import { MingcuteFileMoreLine } from '@/components/icon'
 import { FileInfo } from '@/util'
 import { convertFileSrc } from '@tauri-apps/api/core'
+
+import { clsx } from 'clsx'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -9,9 +11,12 @@ function FileView({ fileInfo }: { fileInfo: FileInfo }) {
   const { t } = useTranslation()
 
   /* image source */
-  const imageSrc = convertFileSrc(fileInfo.pathname)
+  const imageSrc = fileInfo.preview ? convertFileSrc(fileInfo.pathname) : ''
+  const [isImgLoad, setIsImgLoad] = useState(false)
   const [isImgError, setIsImgError] = useState(false)
+  const onImgLoad = () => setIsImgLoad(true)
   const onImgError = () => setIsImgError(true)
+  const showFileIcon = !imageSrc || isImgError
 
   /* exif data */
   let focalLength = fileInfo.exifData?.FocalLength
@@ -32,11 +37,11 @@ function FileView({ fileInfo }: { fileInfo: FileInfo }) {
   return (
     <div className="ml-4 w-[248px] shrink-0 overflow-auto">
       <div className="flex-center h-[143px]">
-        {isImgError ? (
+        {showFileIcon ? (
           <MingcuteFileMoreLine className="text-5xl text-default-500" />
         ) : (
-          <div className="p-1 pt-0 shadow-md">
-            <img src={imageSrc} alt="" className="h-[135px] object-contain" onError={onImgError} />
+          <div className={clsx('p-1 pt-0', isImgLoad && 'shadow-md')}>
+            <img src={imageSrc} alt="" className="h-[135px] object-contain" onLoad={onImgLoad} onError={onImgError} />
           </div>
         )}
       </div>

src/util/file-transformer.ts

@@ -1,4 +1,5 @@
 import { ExifStatus, FormatVar } from '@/const'
+import mime from 'mime/lite'
 import { formatDate, formatFileSize, getDirFromFilePath, getValidPath } from './'
 
 export interface FileInfo {
@@ -8,6 +9,7 @@ export interface FileInfo {
   filename: string
   newFilename: string
   size: string
+  preview: boolean
   exifStatus: ExifStatus
   exifMsg: string
   exifData: IpcFiles[number]['exifData']
@@ -35,6 +37,7 @@ export function transformIpcFiles({ ipcFiles, format, t }: { ipcFiles: IpcFiles;
         filename: item.filename,
         newFilename: '',
         size: formatFileSize(item.size),
+        preview: checkPreview(item.filename, item.size),
         exifStatus,
         exifMsg,
         exifData,
@@ -120,3 +123,13 @@ function generateFilename({
     return format
   }
 }
+
+export function checkPreview(filename: string, size: number) {
+  const maxSize = 50_000_000
+  if (size > maxSize) return false
+
+  const mimeType = mime.getType(filename)
+  if (!mimeType) return false
+
+  return mimeType.startsWith('image') || mimeType.startsWith('video')
+}