v3: performance pass, bundle size pass, i18n pass, docker pass

src/components/FilePreview.tsx

@@ -118,6 +118,21 @@ function AudioFilePreview(
   );
 }
 
+function VideoThumb({ src, fallback }: { src: string; fallback: string }) {
+  const [failed, setFailed] = useState(false);
+  if (failed) {
+    return <span className="rich-content-compact-icon">{fallback}</span>;
+  }
+  return (
+    <img
+      src={src}
+      alt=""
+      className="rich-content-compact-thumbnail"
+      onError={() => setFailed(true)}
+    />
+  );
+}
+
 function mimeIcon(mime: string): string {
   if (mime.startsWith("video/")) return "🎬";
   if (mime.startsWith("audio/")) return "🎵";
@@ -148,6 +163,7 @@ export default function FilePreview(
       );
     }
     if (mime.startsWith("video/")) {
+      const thumbUrl = `${API_URL}/api/thumbnails/${dump.id}`;
       return (
         <button
           type="button"
@@ -160,15 +176,7 @@ export default function FilePreview(
             play({ kind: "file", fileUrl, mimeType: mime, title: dump.title });
           }}
         >
-          <video
-            src={fileUrl}
-            preload="metadata"
-            className="rich-content-compact-thumbnail"
-            muted
-            onLoadedMetadata={(e) => {
-              (e.target as HTMLVideoElement).currentTime = 0.1;
-            }}
-          />
+          <VideoThumb src={thumbUrl} fallback={mimeIcon(mime)} />
           <span className="rich-content-play-overlay">▶</span>
         </button>
       );
@@ -217,12 +225,9 @@ export default function FilePreview(
         >
           <video
             src={fileUrl}
-            preload="metadata"
+            preload="none"
             className="file-preview-video-thumb"
             muted
-            onLoadedMetadata={(e) => {
-              (e.target as HTMLVideoElement).currentTime = 0.1;
-            }}
           />
           <span className="rich-content-play-overlay">
             {videoPlaying ? "⏸" : "▶"}