fix: validate uploaded video files

src/components/FileUpload.tsx

@@ -6,6 +6,7 @@ import LottiePlayer from "./LottiePlayer";
 import uploadAnim from "@/lib/lottie/upload.json";
 import { cn, formatBytes, formatDuration } from "@/lib/utils";
 import { MAX_FILE_SIZE, WARNING_FILE_SIZE } from "@/lib/types";
+import { validateVideoFile } from "@/utils/video-validation";
 
 interface Props {
   onFileSelect: (file: File | null) => void;
@@ -83,12 +84,13 @@ export default function FileUpload({
   }, []);
 
   // ── File validation ───────────────────────────────────
-  const handleFile = useCallback((file: File) => {
+  const handleFile = useCallback(async (file: File) => {
     setError("");
     setWarning("");
 
-    if (!file.type.startsWith("video/")) {
-      setError("Please drop a valid video file (MP4, MOV, AVI, WebM, etc.)");
+    const validation = await validateVideoFile(file);
+    if (!validation.valid) {
+      setError(validation.error);
       return;
     }
 
@@ -174,7 +176,7 @@ export default function FileUpload({
       <input
         ref={inputRef}
         type="file"
-        accept="video/*"
+        accept="video/*,.mp4,.mov,.avi,.mkv,.webm"
         className="hidden"
         onChange={(e) => {
           const f = e.target.files?.[0];
@@ -305,7 +307,7 @@ export default function FileUpload({
         <input
           ref={inputRef}
           type="file"
-          accept="video/*"
+          accept="video/*,.mp4,.mov,.avi,.mkv,.webm"
           className="hidden"
           onChange={(e) => {
             const f = e.target.files?.[0];

src/lib/tests/video-validation.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import {
+  getDownscaledDimensions,
+  validateDimensions,
+  validateVideoFile,
+} from "../../utils/video-validation";
+
+const makeFile = (name: string, type: string, bytes: number[]) =>
+  new File([new Uint8Array(bytes)], name, { type });
+
+describe("validateDimensions", () => {
+  it("blocks frames larger than 8K", () => {
+    expect(validateDimensions(8000, 8000)).toBe("blocked");
+  });
+
+  it("warns for frames above 4K", () => {
+    expect(validateDimensions(5000, 3000)).toBe("warning");
+  });
+
+  it("marks standard sizes as safe", () => {
+    expect(validateDimensions(1920, 1080)).toBe("safe");
+  });
+});
+
+describe("getDownscaledDimensions", () => {
+  it("keeps dimensions even", () => {
+    const result = getDownscaledDimensions(5000, 3000);
+    expect(result.width % 2).toBe(0);
+    expect(result.height % 2).toBe(0);
+  });
+});
+
+describe("validateVideoFile", () => {
+  it("rejects invalid extensions first", async () => {
+    const result = await validateVideoFile(
+      makeFile("clip.txt", "video/mp4", [0x00, 0x00, 0x00, 0x18, 0x66, 0x74, 0x79, 0x70])
+    );
+
+    expect(result.valid).toBe(false);
+    if (!result.valid) {
+      expect(result.error).toContain("Invalid video extension");
+    }
+  });
+
+  it("rejects non-video MIME types second", async () => {
+    const result = await validateVideoFile(
+      makeFile("clip.mp4", "application/octet-stream", [0x00, 0x00, 0x00, 0x18, 0x66, 0x74, 0x79, 0x70])
+    );
+
+    expect(result.valid).toBe(false);
+    if (!result.valid) {
+      expect(result.error).toContain("Invalid Content-Type");
+    }
+  });
+
+  it("rejects files that do not match a known video signature", async () => {
+    const result = await validateVideoFile(
+      makeFile("clip.mp4", "video/mp4", [0x00, 0x11, 0x22, 0x33, 0x44, 0x55, 0x66, 0x77])
+    );
+
+    expect(result.valid).toBe(false);
+    if (!result.valid) {
+      expect(result.error).toContain("File contents do not match");
+    }
+  });
+
+  it("accepts a valid mp4 signature", async () => {
+    const result = await validateVideoFile(
+      makeFile("clip.mp4", "video/mp4", [0x00, 0x00, 0x00, 0x18, 0x66, 0x74, 0x79, 0x70, 0x6d, 0x70, 0x34, 0x32])
+    );
+
+    expect(result).toEqual({ valid: true });
+  });
+});

src/utils/video-validation.ts

@@ -1,26 +1,91 @@
 // src/utils/video-validation.ts
 
-export const MAX_4K_PIXELS = 3840 * 2160; 
-export const MAX_8K_PIXELS = 7680 * 7680; 
+export const MAX_4K_PIXELS = 3840 * 2160;
+export const MAX_8K_PIXELS = 7680 * 7680;
 
-export type ValidationResult = 'safe' | 'warning' | 'blocked';
+export const SUPPORTED_VIDEO_EXTENSIONS = [".mp4", ".mov", ".avi", ".mkv", ".webm"] as const;
+
+export type ValidationResult = "safe" | "warning" | "blocked";
+
+export type VideoFileValidationResult = { valid: true } | { valid: false; error: string };
 
 export function validateDimensions(width: number, height: number): ValidationResult {
   const pixels = width * height;
-  
-  if (pixels > MAX_8K_PIXELS) return 'blocked';
-  if (pixels > MAX_4K_PIXELS) return 'warning';
-  
-  return 'safe';
+
+  if (pixels > MAX_8K_PIXELS) return "blocked";
+  if (pixels > MAX_4K_PIXELS) return "warning";
+
+  return "safe";
 }
 
 export function getDownscaledDimensions(width: number, height: number) {
   const aspectRatio = width / height;
   const newHeight = Math.sqrt(MAX_4K_PIXELS / aspectRatio);
   const newWidth = newHeight * aspectRatio;
-  
+
   return {
     width: Math.floor(newWidth / 2) * 2,
-    height: Math.floor(newHeight / 2) * 2
+    height: Math.floor(newHeight / 2) * 2,
   };
-}
+}
+
+function hasSupportedVideoExtension(fileName: string): boolean {
+  const lowerName = fileName.toLowerCase();
+  return SUPPORTED_VIDEO_EXTENSIONS.some((extension) => lowerName.endsWith(extension));
+}
+
+function hasSupportedVideoMimeType(mimeType: string): boolean {
+  return mimeType.toLowerCase().startsWith("video/");
+}
+
+function matchesMp4OrMovSignature(bytes: Uint8Array): boolean {
+  return bytes.length >= 12 && String.fromCharCode(...bytes.slice(4, 8)) === "ftyp";
+}
+
+function matchesAviSignature(bytes: Uint8Array): boolean {
+  if (bytes.length < 12) return false;
+  return (
+    String.fromCharCode(...bytes.slice(0, 4)) === "RIFF" &&
+    String.fromCharCode(...bytes.slice(8, 12)) === "AVI "
+  );
+}
+
+function matchesMatroskaSignature(bytes: Uint8Array): boolean {
+  return (
+    bytes.length >= 4 &&
+    bytes[0] === 0x1a &&
+    bytes[1] === 0x45 &&
+    bytes[2] === 0xdf &&
+    bytes[3] === 0xa3
+  );
+}
+
+function hasKnownVideoMagicBytes(bytes: Uint8Array): boolean {
+  return matchesMp4OrMovSignature(bytes) || matchesAviSignature(bytes) || matchesMatroskaSignature(bytes);
+}
+
+export async function validateVideoFile(file: File): Promise<VideoFileValidationResult> {
+  if (!hasSupportedVideoExtension(file.name)) {
+    return {
+      valid: false,
+      error: "Invalid video extension. Use .mp4, .mov, .avi, .mkv, or .webm.",
+    };
+  }
+
+  if (!hasSupportedVideoMimeType(file.type)) {
+    return {
+      valid: false,
+      error: `Invalid Content-Type. Expected a video MIME type, got ${file.type || "unknown"}.`,
+    };
+  }
+
+  const header = new Uint8Array(await file.slice(0, 16).arrayBuffer());
+  if (!hasKnownVideoMagicBytes(header)) {
+    return {
+      valid: false,
+      error: "File contents do not match a supported video format.",
+    };
+  }
+
+  return { valid: true };
+}