From 56d377d9f450bd2e562e5a728d0b4e9d658e3bcd Mon Sep 17 00:00:00 2001 From: Roopathanushree <162782255+Roopathanushree@users.noreply.github.com> Date: Mon, 3 Aug 2026 19:44:20 +0000 Subject: [PATCH] feat: display video upload requirements --- src/components/FileUpload.tsx | 87 ++++++++++++++++++++++++++++++++++- 1 file changed, 85 insertions(+), 2 deletions(-) diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index f94c17ef..531e6d70 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. +

+
+
+
+ ); +} + export default function FileUpload({ onFileSelect, currentFile, @@ -301,7 +377,14 @@ export default function FileUpload({ {warning}

)} - {currentFile ? : } + {currentFile ? ( + + ) : ( +
+ + +
+ )}