fix: preview generation works for processed results too

NonNativePreview now accepts either a File (pre-processing) or a src
URL (post-processing). After processing a non-native video (e.g.,
muting an AVI), the preview button fetches the processed result from
its URL and sends it for transcoding, instead of showing the broken
MediaPlayerView.

apps/web/src/components/common/non-native-preview.tsx

@@ -19,13 +19,20 @@ const PROGRESS_MESSAGES = [
 type PreviewState = "idle" | "generating" | "ready" | "error";
 
 export interface NonNativePreviewProps {
-  file: File;
+  file?: File;
+  src?: string;
   filename: string;
   fileSize: number;
   modality: "video" | "audio";
 }
 
-export function NonNativePreview({ file, filename, fileSize, modality }: NonNativePreviewProps) {
+export function NonNativePreview({
+  file,
+  src,
+  filename,
+  fileSize,
+  modality,
+}: NonNativePreviewProps) {
   const { t } = useTranslation();
   const [state, setState] = useState<PreviewState>("idle");
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
@@ -64,8 +71,17 @@ export function NonNativePreview({ file, filename, fileSize, modality }: NonNati
     abortRef.current = controller;
 
     try {
+      let fileToUpload = file;
+      if (!fileToUpload && src) {
+        const res = await fetch(src);
+        const blob = await res.blob();
+        fileToUpload = new File([blob], filename, { type: blob.type });
+      }
+      if (!fileToUpload) {
+        throw new Error("No file to generate preview from");
+      }
       const formData = new FormData();
-      formData.append("file", file, filename);
+      formData.append("file", fileToUpload, filename);
 
       const response = await fetch("/api/v1/preview/generate", {
         method: "POST",

apps/web/src/pages/tool-page.tsx

@@ -672,17 +672,25 @@ export function ToolPage() {
       const nativeVideoExts = new Set(["mp4", "webm", "ogg", "ogv", "m4v", "mov"]);
       const isNativeVideo = nativeVideoExts.has(currentExt);
 
-      if (!isNativeVideo && currentExt && currentEntry?.file) {
-        return (
-          <Suspense fallback={<div className="text-sm text-muted-foreground">Loading...</div>}>
-            <NonNativePreview
-              file={currentEntry.file}
-              filename={currentFileName}
-              fileSize={currentEntry.file.size}
-              modality="video"
-            />
-          </Suspense>
-        );
+      if (!isNativeVideo && currentExt) {
+        const previewFile = hasProcessed ? undefined : currentEntry?.file;
+        const previewSrc = hasProcessed ? processedUrl : undefined;
+        const previewSize = hasProcessed
+          ? (currentEntry?.processedSize ?? 0)
+          : (currentEntry?.file?.size ?? 0);
+        if (previewFile || previewSrc) {
+          return (
+            <Suspense fallback={<div className="text-sm text-muted-foreground">Loading...</div>}>
+              <NonNativePreview
+                file={previewFile}
+                src={previewSrc}
+                filename={currentFileName}
+                fileSize={previewSize}
+                modality="video"
+              />
+            </Suspense>
+          );
+        }
       }
       return (
         <Suspense fallback={<div className="text-sm text-muted-foreground">Loading...</div>}>