perf: Optimise FFmpeg args and show elapsed export time (#694)

[Abhi190702]

New Reframe - (30 sec clip showing , relatively fast export)

Reframe-New.online-video-cutter.com.mp4

Old Reframe - (30 sec clip showing , slow export)

Reframe-Old.online-video-cutter.com.mp4

Summary

Resolves #694

Optimises FFmpeg export settings so browser-based exports complete much faster, and adds visible elapsed export timing during and after export.

Changes Made

• Switched x264 MP4/MKV exports from -preset medium to -preset ultrafast
• Added VP9 speed flags: -cpu-used 4 -deadline realtime
• Skipped the FFmpeg eq filter when brightness/contrast/saturation are neutral
• Preserved neutral defaults: brightness 0, contrast 1, saturation 1
• Added live elapsed time in the export overlay, e.g. 0:42 elapsed
• Added total export duration to the download result card, e.g. Exported in 1 min 23 sec
• Added export duration tracking through useVideoEditor
• Added a regression test proving neutral adjustments skip eq
• Added the minimal Vitest JSX/matchMedia setup needed for the current test suite to run cleanly

COOP/COEP

vercel.json already contains:

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

No hosting-header changes were needed in this PR.

Testing

• bun run lint ✅
• bunx tsc --noEmit ✅
• bun run test -- --run ✅
• bun run build ✅

Note: bun run lint and bun run build still print the existing ThumbnailStrip.tsx hook warning from main, but both commands exit successfully. The build required elevated filesystem access locally because Next.js hit Windows sandbox readlink permissions.

Screen Recordings

Required before merge:

• Before recording: export the same 1–2 minute video on current main
• After recording: export the same video on this branch and show the elapsed timer + faster completion

[vercel]

Someone is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

✅ PR Format Check Passed — @Abhi190702

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[github-actions]

👋 Thanks for your PR, @Abhi190702!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[Abhi190702]

@magicPeach , adding recording soon !!

[Abhi190702]

@magic-peach , happy that You might look into this

[magic-peach]

Merged! This PR delivers meaningful performance improvements (ultrafast preset, VP9 realtime mode, skipping neutral eq filter) plus a helpful elapsed export timer in the UI. Well-tested with the regression test for neutral adjustments. All CI checks passed. Excellent work @Abhi190702!

[Abhi190702]

@magic-peach , Thanks , Looking forward for More contributions and support
-- Abhijeet