[FEATURE] Enable and optimize aspect ratio crop/letterbox overlays in VideoPreview

[shivashanker123]

Feature description
Activate and optimize the pre-built framing/letterbox overlay helper inside the VideoPreview component to display a dashed crop boundary in Fill mode or letterbox bars in Fit mode, giving users real-time visual feedback on which portions of their video will be cropped or padded before export.

Problem this solves
When users select different aspect ratios (e.g. 9:16 Vertical, 1:1 Square, 16:9 Landscape) and switch between framing methods, there is no real-time visual feedback on the main player — forcing users to guess which parts of their video are being clipped before export.

The visual framing logic is fully built but dormant because the recipe state prop is never passed inside src/components/VideoEditor.tsx (Line 133):

<VideoPreview file={file} videoRef={videoRef} />

This keeps the "Show Overlay" toggle and all calculation handlers hidden. The button's bottom-right placement also causes a layout collision with native browser video controls.

Proposed solution

1. Pass the recipe prop in src/components/VideoEditor.tsx Line 133:

<VideoPreview file={file} videoRef={videoRef} recipe={recipe} />

2. Reposition the Show Overlay / Hide Overlay toggle button from bottom-right to top-left of the video player card to avoid conflict with native HTML5 playback controls.

Alternatives considered

• Leaving the overlay hidden — Rejected. Users export blind without knowing if content is being cropped.
• Building a custom overlay from scratch — Rejected. The logic already exists inside VideoPreview and only needs to be activated and repositioned.

Additional context
The fix requires only one prop addition and one CSS class change — no new dependencies or architectural changes needed. This significantly improves UX for users working with non-standard aspect ratios.

Screen.Recording.2026-05-19.135555.mp4

[github-actions]

👋 Thanks for opening an issue, @shivashanker123!

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!

[shivashanker123]

/assign

[github-actions]

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