feat: reverse playback option added (#122)

[garima-agarwall]

Description

Added a video reverse playback option that plays the video and audio backwards. A warning is shown inline when the file is larger than 100MB since the entire video must be loaded into memory.

Related Issue

Closes #122

Type of Contribution

• New feature
• GSSoC contribution

Participant Info

• GitHub username: garima-agarwall
• Contribution level (Beginner/Intermediate/Advanced): Beginner

Screen Recording

Recording / Loom link: ] https://github.com/user-attachments/assets/2a5f3a95-433b-4a6c-ba26-e9546fc5e2b0

Checklist

• [ yes] I have read the contribution guidelines
• [yes ] My changes follow the project structure
• [yes ] I have tested my changes in Chrome, Firefox, and Safari
• [yes ] bun run lint passes (no ESLint errors)
• [ yes] bunx tsc --noEmit passes (no TypeScript errors)
• [ yes] New interactive elements have aria-label / accessible names
• [ yes] No console.log statements left in
• [yes ] This PR is related to a valid issue
• [yes ] Screen recording attached above (required for UI/feature/design changes)

[vercel]

@garima-agarwall 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 — @garima-agarwall

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, @garima-agarwall!

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

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

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! 🎉

[garima-agarwall]

@magic-peach Please give feedback on the PR.

[magic-peach]

@garima-agarwall Thank you for implementing the reverse playback feature! The concept is good, but there are several issues that need to be fixed before this can be merged:

Code quality issues:

1. Comment left in code — src/lib/ffmpeg.ts has // ADD THIS before the return: left as a comment. Please remove it.
2. Broken indentation in VideoEditor.tsx — the reverse toggle UI uses 2-space indentation inconsistently with the surrounding 4-space code.
3. window.confirm() in useVideoEditor.ts — browser dialogs can be blocked and are generally poor UX. Consider showing an inline warning instead (like you already do in the UI toggle label).

Technical issues:
4. No build/lint/typecheck CI has run — please push a fresh branch (not main) and trigger full CI.
5. Merge conflicts — this branch has conflicts with main.
6. Branch naming — using your fork's main branch directly for a PR makes rebasing harder. Please create a dedicated feature branch.

Steps to fix:

git checkout -b feat/reverse-playback
# Apply your changes cleanly
git fetch upstream
git rebase upstream/main
# Fix the code issues above
git push origin feat/reverse-playback

The reverse filter logic using FFmpeg's reverse/areverse filters is the right approach!