[BUG] State corruption and export failure due to premature state update in 'TrimControl'

[Sandeep6135]

Description

In TrimControl.tsx, the handleEnd function dispatches a state update to the global recipe object before validating the user's input. If a user enters an invalid value (resulting in NaN) or a value that is out of bounds, the application's state is corrupted with NaN for trimEnd. Because NaN > duration evaluates to false, this bypasses the pre-export validation in useVideoEditor.ts, passing the invalid state directly to FFmpeg which causes the export to fail or crash.

To Reproduce
Steps to reproduce the behavior:

1. Upload a valid video file.
2. In the "Trim" section, type an invalid character or partially clear the "End (sec)" input field (so that parseFloat results in NaN).
3. Note that the UI correctly displays an inline error message ("Enter a valid number.").
4. Click the "Export" button.
5. The export will attempt to run (bypassing validation) and subsequently crash/fail because the underlying recipe.trimEnd state is corrupted.

Expected behavior
The recipe state should only be updated after the input has been fully validated (similar to how handleStart currently operates). If the input is invalid, the state should remain unchanged, and the export validation should correctly block the export.

Code Snippet

// src/components/TrimControl.tsx
const handleEnd = (val: string) => {
  // ...
  const n = parseFloat(val);
  
  // 🐛 BUG: State is updated before validation
  onChange({ trimEnd: n }); 

  if (isNaN(n)) {
    setEnd(true);
    setEndErrorMsg("Enter a valid number.");
    return;
  }
  // ...
}

[github-actions]

👋 Thanks for opening an issue, @Sandeep6135!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[Sandeep6135]

Hey @magic-peach 👋
Consider assigning this issue to me and I will take care of rest.
Thank you!

[aaniya22]

please assign this to me under gssoc'26

[Sandeep6135]

/assign

[github-actions]

Hey @Sandeep6135, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.

[Sandeep6135]

@magic-peach
I've pushed a fix for this bug in PR #957.

What was happening: The app was dispatching a state update for the "End" trim time before fully validating the input. This allowed invalid NaN values to sneak into the global state, which bypassed the final export validations and crashed the FFmpeg processor.

The Fix: I've adjusted the sequence of events in TrimControl.tsx. The application state is now securely locked behind proper input validation, so it's impossible to pass invalid trim constraints to the export engine.
This should completely resolve the broken exports! Feel free to reopen this issue if you notice any more odd behavior with the trim controls.