fix: notify user when export falls back to WebM

src/components/DownloadResult.tsx

@@ -82,7 +82,16 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
   {soundError && (
     <p className="text-xs text-[var(--muted)]">Completion sound could not be played on this device.</p>
   )}
-
+
+  {result.usedFallback && result.fallbackReason && (
+    <div
+      role="alert"
+      className="flex items-start gap-2 rounded-lg border border-[var(--warning)] bg-[var(--surface)] px-3 py-2.5 text-sm text-[var(--warning)] animate-fade-in"
+    >
+      <AlertCircle size={14} className="shrink-0 mt-0.5" aria-hidden="true" />
+      <p>{result.fallbackReason}</p>
+    </div>
+  )}
       <div className="grid grid-cols-2 gap-2 text-sm">
         <div className="bg-[var(--bg)] rounded-lg p-3 border border-[var(--border)]">
           <p className="text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)] mb-1">Resolution</p>

src/lib/ffmpeg.ts

@@ -290,7 +290,15 @@ export async function exportVideo(
   );
 
   try {
-    return await exportPromise;
+    const exportResult = await exportPromise;
+    if (exportResult.format !== recipe.format) {
+      return {
+        ...exportResult,
+        usedFallback: true,
+        fallbackReason: `${recipe.format.toUpperCase()} encoding failed. Your video was exported as ${exportResult.format.toUpperCase()} instead.`,
+      };
+    }
+    return exportResult;
   } finally {
     signal?.removeEventListener("abort", onAbort);
   }

src/lib/types.ts

@@ -66,6 +66,8 @@ export interface ExportResult {
   height: number;
   format: "mp4" | "webm" | "mkv" | "gif";
   exportDurationMs?: number;
+  usedFallback?: boolean;    
+  fallbackReason?: string; 
 }
 
 export type ExportStatus =