Skip to content

feat: Implement reverse video and audio playback toggle#1078

Open
Abhishek2005-ard wants to merge 5 commits into
magic-peach:mainfrom
Abhishek2005-ard:feat/reverse-playback
Open

feat: Implement reverse video and audio playback toggle#1078
Abhishek2005-ard wants to merge 5 commits into
magic-peach:mainfrom
Abhishek2005-ard:feat/reverse-playback

Conversation

@Abhishek2005-ard
Copy link
Copy Markdown

Description

This PR introduces the new Reverse Playback feature, allowing users to completely reverse the playback direction of both the video frames and audio track.

Changes Made

  • Types & Configuration (src/lib/types.ts, src/lib/constants.ts):
    • Added the reverse boolean parameter to the EditRecipe definition and schema validation.
    • Set the default configuration to reverse: false in DEFAULT_RECIPE.
  • State Hook Validation (src/hooks/useVideoEditor.ts):
    • Expanded isValidValue to safely permit "reverse" values, ensuring recipe storage debounces and syncs correctly.
  • FFmpeg WASM Filters (src/lib/ffmpeg.ts):
    • Injected the reverse filter into the video processing pipeline. It is strategically placed after downscaling to ensure memory efficiency and prevent browser crashes.
    • Injected the areverse filter into the audio pipeline when the original audio is active.
  • UI Integration (src/components/AudioSpeedControl.tsx):
    • Added a beautiful "Reverse Playback" toggle button utilizing the Lucide Rewind icon inside the Audio & Speed accordion section.
    • Seamlessly integrated the toggle state with the existing "Reset to Default" logic.

Verification

  • Ran npm run lint with 0 errors.
  • Ran npx tsc --noEmit with 0 errors.
  • Ran npm run build locally, completing the production build successfully.
  • Manually tested uploading a video, toggling Reverse Playback, and exporting successfully.

ScreenRecord:-

Screen.Recording.2026-05-24.185635.1.1.mp4

close #1062

@vercel
Copy link
Copy Markdown

vercel Bot commented May 24, 2026

@Abhishek2005-ard 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
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 24, 2026

✅ PR Format Check Passed — @Abhishek2005-ard

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 github-actions Bot added level:intermediate Intermediate level - 35 pts type:design UI/UX design type:feature New feature type:performance Performance labels May 24, 2026
@github-actions
Copy link
Copy Markdown
Contributor

👋 Thanks for your PR, @Abhishek2005-ard!

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

Happy coding! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

level:intermediate Intermediate level - 35 pts type:design UI/UX design type:feature New feature type:performance Performance

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Add Reverse Video (Playback & Audio) Functionality

1 participant