feat: Add Captions/Subtitles Support with Custom Styling Options #991

src/components/ComparisonPreview.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 "use client";
 
-import { useEffect, useRef, useState, useCallback, RefObject } from "react";
+import { useEffect, useRef, useState, useCallback, useMemo, RefObject } from "react";
 import { EditRecipe } from "@/lib/types";
 import { getPresetById } from "@/lib/presets";
 import { cn } from "@/lib/utils";
@@ -19,6 +19,15 @@ export default function ComparisonPreview({ file, recipe, videoRef }: Props) {
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  const aspectStyle = useMemo(() => {
+    if (!recipe) return undefined;
+    const preset = recipe.preset === "custom"
+      ? { width: recipe.customWidth, height: recipe.customHeight }
+      : getPresetById(recipe.preset);
+    if (!preset) return undefined;
+    return { aspectRatio: `${preset.width} / ${preset.height}` };
+  }, [recipe]);
+
   // Calculate overlay for the right (reframed) side
   const overlay = (() => {
     if (!recipe) return null;
@@ -166,7 +175,8 @@ export default function ComparisonPreview({ file, recipe, videoRef }: Props) {
   return (
     <div
       ref={containerRef}
-      className="relative w-full rounded-lg overflow-hidden bg-[#0a0a0a] aspect-video"
+      className="relative w-full rounded-lg overflow-hidden bg-[#0a0a0a] mx-auto max-h-[60vh] object-contain"
+      style={aspectStyle || { aspectRatio: "16 / 9" }}
       role="group"
       aria-label="Video comparison preview"
     >

src/components/FileUpload.tsx

@@ -12,13 +12,15 @@ interface Props {
   currentFile: File | null;
   fileError: string;
   duration: number;
+  isLoading?: boolean;
 }
 
 export default function FileUpload({
   onFileSelect,
   currentFile,
   fileError,
   duration,
+  isLoading = false,
 }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -259,6 +261,24 @@ export default function FileUpload({
       />
     </div>
   );
+
+  // ── Loading state ──
+  const LoadingState = () => (
+    <div className="flex flex-col items-center justify-center gap-4 py-12 px-6 border-2 border-dashed border-[var(--border)] rounded-xl bg-[var(--bg)] animate-pulse">
+      <div className="relative flex items-center justify-center w-16 h-16">
+        <div className="absolute w-12 h-12 rounded-full border-4 border-film-500/20 border-t-film-600 animate-spin" />
+        <Film size={20} className="text-film-600 animate-pulse" />
+      </div>
+      <div className="text-center">
+        <p className="font-heading font-semibold text-[var(--text)] text-base">
+          Processing Video
+        </p>
+        <p className="text-sm text-[var(--muted)] mt-1">
+          Extracting dimensions, aspect ratio, and metadata...
+        </p>
+      </div>
+    </div>
+  );
 
   return (
     <>
@@ -305,7 +325,7 @@ export default function FileUpload({
             {warning}
           </p>
         )}
-        {currentFile ? <FileInfo /> : <DropZone />}
+        {isLoading ? <LoadingState /> : currentFile ? <FileInfo /> : <DropZone />}
       </div>
     </>
   );