diff --git a/packages/studio/src/components/renders/RenderQueue.tsx b/packages/studio/src/components/renders/RenderQueue.tsx index c269e112e..654028433 100644 --- a/packages/studio/src/components/renders/RenderQueue.tsx +++ b/packages/studio/src/components/renders/RenderQueue.tsx @@ -11,6 +11,72 @@ interface RenderQueueProps { isRendering: boolean; } +const FORMAT_INFO: Record<"mp4" | "webm" | "mov", { label: string; desc: string }> = { + mp4: { label: "MP4", desc: "Best for general use. Smallest file, universal playback." }, + mov: { + label: "MOV (ProRes 4444)", + desc: "Transparent video. Works in CapCut, Final Cut Pro, Premiere, DaVinci Resolve, After Effects. Large files.", + }, + webm: { + label: "WebM (VP9)", + desc: "Transparent video for web. Smaller than MOV but limited editor support.", + }, +}; + +function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) { + const [open, setOpen] = useState(false); + const timeoutRef = useRef>(undefined); + + const show = () => { + clearTimeout(timeoutRef.current); + setOpen(true); + }; + const hide = () => { + timeoutRef.current = setTimeout(() => setOpen(false), 120); + }; + + useEffect(() => () => clearTimeout(timeoutRef.current), []); + + const info = FORMAT_INFO[format]; + + return ( +
+ + + + + + {open && ( +
+

{info.label}

+

{info.desc}

+
+ {(["mp4", "mov", "webm"] as const) + .filter((f) => f !== format) + .map((f) => ( +

+ {FORMAT_INFO[f].label} + {" — "} + {FORMAT_INFO[f].desc} +

+ ))} +
+
+ )} +
+ ); +} + function FormatExportButton({ onStartRender, isRendering, @@ -21,7 +87,8 @@ function FormatExportButton({ const [format, setFormat] = useState<"mp4" | "webm" | "mov">("mp4"); return ( -
+
+