Skip to content

fix: reset all settings when new video file is uploaded #1189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sudha09-git wants to merge 2 commits into
base: main
Choose a base branch
from
+44 −45
Open

fix: reset all settings when new video file is uploaded #1189

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
962c51a
fix: reset all settings when new video file is uploaded
sudha09-git May 25, 2026
322ddd7
Merge branch 'main' into fix/reset-settings-on-new-file-upload
sudha09-git May 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 44 additions & 45 deletions src/hooks/useVideoEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,20 @@ import { suggestPreset } from "@/lib/presetSuggestion";
import { validateDimensions, getDownscaledDimensions } from "@/utils/video-validation";

const DEFAULT_TITLE = "Reframe — Resize, trim, and export videos in your browser";
const STORAGE_KEY = "reframe:recipe";
const STORAGE_KEY = "reframe:recipe";

export function extractMetadata(file: File): Promise<{ width: number; height: number; duration: number }> {
return new Promise((resolve, reject) => {
const url = URL.createObjectURL(file);
const video = document.createElement("video");
const timeout = setTimeout(() => {
URL.revokeObjectURL(url);
reject( new Error("Video metaData load timeout — the file may be too large or the device too slow. Please try again.") );
reject(new Error("Video metaData load timeout — the file may be too large or the device too slow. Please try again."));
}, 5000);

video.preload = "metadata";
video.onloadedmetadata = () => {
clearTimeout(timeout)
clearTimeout(timeout);
resolve({
width: video.videoWidth,
height: video.videoHeight,
Expand All @@ -31,7 +31,7 @@ export function extractMetadata(file: File): Promise<{ width: number; height: nu
URL.revokeObjectURL(url);
};
video.onerror = () => {
clearTimeout(timeout)
clearTimeout(timeout);
URL.revokeObjectURL(url);
reject(new Error("Failed to load video metadata"));
};
Expand Down Expand Up @@ -64,7 +64,7 @@ function verifyMagicBytes(file: File): Promise<boolean> {
});
}

function validateRecipe(recipe: EditRecipe, duration: number ): string | null {
function validateRecipe(recipe: EditRecipe, duration: number): string | null {
const validations: Array<[boolean, string]> = [
[
recipe.trimStart < 0,
Expand Down Expand Up @@ -100,12 +100,10 @@ function validateRecipe(recipe: EditRecipe, duration: number ): string | null {
recipe.brightness < -1 || recipe.brightness > 1,
"Brightness must be between -1 and 1.",
],

[
recipe.contrast < 0 || recipe.contrast > 2,
"Contrast must be between 0 and 2.",
],

[
recipe.saturation < 0 || recipe.saturation > 3,
"Saturation must be between 0 and 3.",
Expand Down Expand Up @@ -174,16 +172,18 @@ export function useVideoEditor() {
const [overlaySize, setOverlaySize] = useState(150);
const [overlayOpacity, setOverlayOpacity] = useState(100);
const [currentTime, setCurrentTime] = useState(0);
const updateRecipe = useCallback((patch: Partial<EditRecipe>) => {
setRecipe((prev) => {
const next = { ...prev, ...patch };
// GIF has no audio — force keepAudio off
if (next.format === "gif") {
next.keepAudio = false;
}
return next;
});
}, []);

const updateRecipe = useCallback((patch: Partial<EditRecipe>) => {
setRecipe((prev) => {
const next = { ...prev, ...patch };
// GIF has no audio — force keepAudio off
if (next.format === "gif") {
next.keepAudio = false;
}
return next;
});
}, []);

const isValidValue = (key: keyof EditRecipe, val: any): boolean => {
switch (key) {
case "preset":
Expand Down Expand Up @@ -352,11 +352,19 @@ export function useVideoEditor() {
}, [videoMetadata]);

const handleFileSelect = useCallback(async (selectedFile: File) => {
// Reset all state when a new file is selected
setResult(null);
setStatus("idle");
setError(null);
setFile(null);
setVideoMetadata(null);
setDuration(0);
setOverlayFile(null);
setOverlayPosition("bottom-right");
setOverlaySize(150);
setOverlayOpacity(100);
setRecipe(DEFAULT_RECIPE);

if (!selectedFile.type.startsWith("video/")) {
setFileError("Please upload a video file only.");
return;
Expand Down Expand Up @@ -411,20 +419,13 @@ export function useVideoEditor() {
setDuration(dur);
setVideoMetadata({ width, height, duration: dur });
setFile(selectedFile);

if (dimensionCheck === "warning") {
console.warn(`[Reframe] High resolution video detected (${width}×${height}). Export may be slow.`);
}
setRecipe((prev) => {
const suggestedPreset = suggestPreset(width, height);
const shouldApplySuggestion = prev.preset === DEFAULT_RECIPE.preset;

return {
...prev,
trimStart: 0,
trimEnd: null,
...(shouldApplySuggestion ? { preset: suggestedPreset } : {}),
};
// Apply suggested preset based on video dimensions
const suggestedPreset = suggestPreset(width, height);
setRecipe({
...DEFAULT_RECIPE,
trimStart: 0,
trimEnd: null,
preset: suggestedPreset,
});
} catch (err) {
setError(`Layer 4 Validation Failed: ${err instanceof Error ? err.message : "Unknown error"}`);
Expand Down Expand Up @@ -489,7 +490,7 @@ export function useVideoEditor() {
exportDurationMs: Date.now() - startedAt,
});
setStatus("done");
} catch (err) {
} catch (err) {
if (exportCancelledRef.current) return;

console.error("export failed:", err);
Expand All @@ -504,8 +505,7 @@ export function useVideoEditor() {
}
setExportStartedAt(null);
setStatus("error");
}
finally {
} finally {
if (exportAbortControllerRef.current === abortController) {
exportAbortControllerRef.current = null;
}
Expand All @@ -526,7 +526,6 @@ export function useVideoEditor() {
status,
]);


useEffect(() => {
if (status === "exporting") {
document.title = `Exporting ${progress}% | Reframe`;
Expand Down Expand Up @@ -559,7 +558,7 @@ export function useVideoEditor() {
window.addEventListener("beforeunload", handler);
return () => window.removeEventListener("beforeunload", handler);
}, [status]);

useEffect(() => {
const handleKeydown = (e: KeyboardEvent) => {
if (
Expand Down Expand Up @@ -604,13 +603,13 @@ export function useVideoEditor() {
};
}, [file]);

useEffect(()=>{
return ()=>{
if(result?.blobUrl){
useEffect(() => {
return () => {
if (result?.blobUrl) {
URL.revokeObjectURL(result.blobUrl);
}
}
},[result?.blobUrl])
};
}, [result?.blobUrl]);

useEffect(() => {
return () => {
Expand Down Expand Up @@ -638,7 +637,6 @@ export function useVideoEditor() {
setExportStartedAt(null);
}, []);


const reset = useCallback(() => {
if (result?.blobUrl) URL.revokeObjectURL(result.blobUrl);
setFile(null);
Expand All @@ -657,15 +655,16 @@ export function useVideoEditor() {
}
}, [result]);


useEffect(() => {
localStorage.setItem("soundOnCompletion", String(recipe.soundOnCompletion));
}, [recipe.soundOnCompletion]);

const seekTo = useCallback((time: number) => {
if (videoRef.current) {
videoRef.current.currentTime = time;
}
}, []);

useEffect(() => {
const video = videoRef.current;
if (!video) return;
Expand All @@ -675,8 +674,8 @@ export function useVideoEditor() {
},[]);

const toggleSound = useCallback(() => {
updateRecipe({ soundOnCompletion: !recipe.soundOnCompletion });
}, [recipe.soundOnCompletion, updateRecipe]);
updateRecipe({ soundOnCompletion: !recipe.soundOnCompletion });
}, [recipe.soundOnCompletion, updateRecipe]);

return {
file,
Expand Down
Loading