[FEATURE] Add Warning Before Closing Tab During Export

[CodeSrushti-3105]

Description

Problem

Currently, when a user is exporting a video and accidentally refreshes the page or closes the browser tab, the export process is immediately cancelled without any warning. This creates a frustrating experience, especially for large video exports that take several minutes to complete.

Users may unintentionally lose all export progress and be forced to restart the process from the beginning.

---

Current Behavior

• User starts video export
• User accidentally refreshes the page or closes the browser tab
• Export process is cancelled instantly
• No warning or confirmation is shown
• User loses all export progress

---

Expected Behavior

When a video export is in progress:

• Attempting to refresh or close the page should trigger a browser warning dialog
• Users should receive a message indicating that an export is currently running
• Users should be able to choose whether to stay on the page or leave

---

Proposed Solution

Add a beforeunload event listener in useVideoEditor.ts that:

• Activates when:
  • status === "loading-engine"
  • status === "exporting"
• Displays the browser’s native warning dialog
• Prevents accidental navigation during export
• Automatically removes the listener once export is completed or cancelled

---

Files to Modify

• useVideoEditor.ts

---

Acceptance Criteria

• Browser warning appears during active export
• Warning is triggered on refresh, tab close, or page navigation
• Warning only appears while export is in progress
• Event listener is removed properly after export completion/cancellation
• Existing export workflow continues working correctly

[github-actions]

👋 Thanks for opening an issue, @CodeSrushti-3105!

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!

[CodeSrushti-3105]

/assign GSSoc'26
Hi @magic-peach, i would like to contribute under GSSoc'26

[Ram-sah19]

/assign gssoc

[github-actions]

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

[CodeSrushti-3105]

Hi @magic-peach , the auto-assignment workflow seems to have failed due to permission restrictions.
I would still like to work on this issue under GSSOC'26. Please assign it to me manually if possible.

[Ram-sah19]

hi @magic-peach , I completed the issue and raise a pr kindly review it

PR #745