+
+
onExportNameChange(sanitizeFilenameBase(e.target.value))}
+ placeholder="reframe-video"
+ maxLength={80}
+ className="w-full rounded-lg border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm font-heading text-[var(--text)] transition-shadow focus:outline-none focus:ring-2 focus:ring-film-400"
+ />
+
+ Used as the default filename when the export completes.
+
+
diff --git a/src/hooks/useVideoEditor.ts b/src/hooks/useVideoEditor.ts
index f2edb45c..4a8e1ba1 100644
--- a/src/hooks/useVideoEditor.ts
+++ b/src/hooks/useVideoEditor.ts
@@ -189,6 +189,7 @@ export function useVideoEditor() {
const [overlaySize, setOverlaySize] = useState(150);
const [overlayOpacity, setOverlayOpacity] = useState(100);
const [currentTime, setCurrentTime] = useState(0);
+ const [exportName, setExportName] = useState("reframe-video");
// Phase 1 MVP: Multi-track timeline support
const [multiTrackState, setMultiTrackState] = useState
(createMultiTrackState);
@@ -350,6 +351,7 @@ export function useVideoEditor() {
setError(null);
setFile(null);
setVideoMetadata(null);
+ setExportName("reframe-video");
if (!selectedFile) {
setFileError("");
@@ -623,6 +625,7 @@ export function useVideoEditor() {
const resetSettings = useCallback(() => {
setRecipe(DEFAULT_RECIPE);
+ setExportName("reframe-video");
try {
localStorage.removeItem(RECIPE_STORAGE_KEY);
localStorage.removeItem(LEGACY_SETTINGS_KEY);
@@ -649,6 +652,7 @@ export function useVideoEditor() {
setVideoMetadata(null);
setDuration(0);
setRecipe(DEFAULT_RECIPE);
+ setExportName("reframe-video");
setStatus("idle");
setProgress(0);
setResult(null);
@@ -720,6 +724,8 @@ export function useVideoEditor() {
recommendedPreset,
currentTime,
toggleSound,
+ exportName,
+ setExportName,
// Phase 1 MVP: Multi-track timeline support
multiTrackState,
addTrack,
diff --git a/src/lib/fileNaming.ts b/src/lib/fileNaming.ts
new file mode 100644
index 00000000..662e3688
--- /dev/null
+++ b/src/lib/fileNaming.ts
@@ -0,0 +1,15 @@
+const INVALID_FILENAME_CHARS = /[<>:"/\\|?*\u0000-\u001F]/g;
+
+export function sanitizeFilenameBase(input: string): string {
+ const cleaned = input
+ .replace(INVALID_FILENAME_CHARS, "")
+ .replace(/\s+/g, " ")
+ .trim()
+ .replace(/[. ]+$/g, "");
+
+ return cleaned || "reframe-video";
+}
+
+export function buildDownloadFilename(baseName: string, extension: string): string {
+ return `${sanitizeFilenameBase(baseName)}.${extension}`;
+}
diff --git a/src/lib/tests/fileNaming.test.ts b/src/lib/tests/fileNaming.test.ts
new file mode 100644
index 00000000..a601e27a
--- /dev/null
+++ b/src/lib/tests/fileNaming.test.ts
@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest";
+import { buildDownloadFilename, sanitizeFilenameBase } from "../fileNaming";
+
+describe("fileNaming", () => {
+ it("removes invalid filename characters and normalizes spacing", () => {
+ expect(sanitizeFilenameBase(' my:video / export ')).toBe("myvideo export");
+ });
+
+ it("falls back to a safe default when the name becomes empty", () => {
+ expect(sanitizeFilenameBase(" ")).toBe("reframe-video");
+ });
+
+ it("builds a complete filename with the requested extension", () => {
+ expect(buildDownloadFilename('final*cut', "mp4")).toBe("finalcut.mp4");
+ });
+});