diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index 4b18332d..8b931a22 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -1,7 +1,7 @@ "use client"; import { useRef, useState, useEffect, useCallback } from "react"; -import { Film, FolderOpen } from "lucide-react"; +import { Film, FolderOpen, Info } from "lucide-react"; import LottiePlayer from "./LottiePlayer"; import uploadAnim from "@/lib/lottie/upload.json"; import { cn, formatBytes, formatDuration } from "@/lib/utils"; @@ -14,6 +14,82 @@ interface Props { duration: number; } +function UploadRequirements() { + return ( +
+
+ + +
+

+ Upload requirements +

+ +

+ Check these details before choosing a video. +

+ +
+
+
+ File size +
+
+ Up to {formatBytes(MAX_FILE_SIZE)}. Files over{" "} + {formatBytes(WARNING_FILE_SIZE)} may process more slowly. +
+
+ +
+
+ Supported formats +
+
+ MP4, MOV, AVI, MKV and WebM. +
+
+ +
+
+ Best compatibility +
+
+ MP4 with H.264 video and AAC audio is recommended. +
+
+ +
+
+ Processing +
+
+ Processing happens locally in your browser using FFmpeg.wasm. +
+
+
+ +

+ Large, high-resolution or complex videos can exceed browser memory, + especially on devices with limited RAM. For smoother exports, close + unused tabs and use the recommended MP4 format. +

+
+
+
+ ); +} + // ── File info (shown after upload) ───────────────────── // Hoisted out of FileUpload: defining components inside a parent's body // recreates them on every render, forcing React to remount their subtree @@ -329,23 +405,26 @@ export default function FileUpload({ onChangeClick={() => inputRef.current?.click()} /> ) : ( - { - e.preventDefault(); - setDragging(true); - }} - onDragLeave={() => setDragging(false)} - onDrop={handleDrop} - onClick={() => inputRef.current?.click()} - onKeyDown={(e) => { - if (e.key === "Enter" || e.key === " ") { - inputRef.current?.click(); - } - }} - /> +
+ { + e.preventDefault(); + setDragging(true); + }} + onDragLeave={() => setDragging(false)} + onDrop={handleDrop} + onClick={() => inputRef.current?.click()} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + inputRef.current?.click(); + } + }} + /> + +
)}