Skip to content

feat: add video compression feature using ffmpeg.wasm - #1094

Open
Devangee20 wants to merge 5 commits into
reframe-oss:mainfrom
Devangee20:feature/browser-video-compression
Open

feat: add video compression feature using ffmpeg.wasm#1094
Devangee20 wants to merge 5 commits into
reframe-oss:mainfrom
Devangee20:feature/browser-video-compression

Conversation

@Devangee20

@Devangee20 Devangee20 commented May 24, 2026

Copy link
Copy Markdown

Description - Added a client-side VideoCompressor component that leverages ffmpeg.wasm via CDN. This feature allows users to compress uploaded videos directly in the browser, reducing bandwidth requirements before export. Included robust initialization logic to ensure script readiness and added a user-friendly UI for selecting compression presets ("Balanced" vs "Smallest Size").

Related Issue - Closes #1003

Type of Contribution

  • New feature
  • Documentation update
  • GSSoC contribution

Participant Info

  • GitHub username: Devangee20
  • Contribution level : Advanced

Screen Recording

Recording / Loom link: ## Checklist

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

@vercel

vercel Bot commented May 24, 2026

Copy link
Copy Markdown

@Devangee20 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

github-actions Bot commented May 24, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

✅ PR Format Check Passed — @Devangee20

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 commented May 24, 2026

Copy link
Copy Markdown
Contributor

👋 Thanks for your PR, @Devangee20!

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

Happy coding! 🎉

@github-actions github-actions Bot added level:advanced Advanced level - 55 pts type:design UI/UX design type:docs Documentation type:feature New feature gssoc'26 GirlScript Summer of Code 2026 labels May 24, 2026
@Devangee20

Devangee20 commented May 29, 2026

Copy link
Copy Markdown
Author

HI @magic-peach ,
I’ve completed the implementation for the browser video compression feature.
Could someone please review the PR when available? Thanks!

@magic-peach

magic-peach commented Aug 14, 2026

Copy link
Copy Markdown
Collaborator

Hi @Devangee20 — thanks for this, and sorry for the wait.

I'd like to get this merged, but it adds headers() to next.config.ts, which is silently ignored under output: "export".

To get it unblocked:

  1. move those headers into vercel.json instead

Could you take a look within the next 14 days? If I don't hear back by then I'll close it to keep the queue manageable — but you're very welcome to reopen it any time after that. Thanks again for contributing to Reframe 🙏

@magic-peach magic-peach added the status:changes-requested Maintainer asked for a specific fix label Aug 14, 2026
@magic-peach @claude
Merge main into feature/browser-video-compression, fix drift + real bugs
c1af6f4 
Resolved merge conflicts against current main (next.config.ts, package.json).
Along the way, fixed issues this PR's own changes introduced:

- next.config.ts: restored output: "export" (this branch had disabled it
  to work around headers() being ignored under static export — the correct
  fix, per earlier maintainer feedback on reframe-oss#1509's identical issue, is to
  drop the headers() block entirely since those COOP/COEP headers already
  live in vercel.json/netlify.toml, not to disable static export).
- layout.tsx: the merge left duplicate font/ErrorBoundary imports (one
  pointing at a redundant passthrough wrapper this PR added). Consolidated
  to the single real ErrorBoundary import.
- ExportSettings.tsx / VideoCompressor.tsx: the new Compress Video toggle
  and preset select had <label> elements not associated with their
  controls (jsx-a11y/label-has-associated-control) — added matching
  id/htmlFor pairs.
- ExportSettings.stories.tsx: this PR added a required videoFile prop to
  ExportSettings without updating its story, breaking typecheck. Supplied
  videoFile: null in the story's args.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L5gqyU5QKQtLAza6hL6dXv
@netlify

netlify Bot commented Sep 15, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for reframe-os ready!

Name Link
🔨 Latest commit c1af6f4
🔍 Latest deploy log https://app.netlify.com/projects/reframe-os/deploys/6aa98ce3afedd200085c5b66
😎 Deploy Preview https://deploy-preview-1094--reframe-os.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@magic-peach

magic-peach commented Sep 15, 2026

Copy link
Copy Markdown
Collaborator

Rebased onto current main and fixed a few things along the way:

  • Restored output: "export" in next.config.ts — this branch had disabled it to work around headers() being ignored under static export. The correct fix (same as what came up on fix: resolve next.js production build compilation errors and worker type mismatches #1509) is to drop the headers() block entirely, since those COOP/COEP headers already live in vercel.json/netlify.toml.
  • The merge left duplicate imports in layout.tsx (pointing partly at a redundant ErrorBoundaryWrapper passthrough) — consolidated to the real ErrorBoundary import.
  • Fixed two accessibility issues in the new Compress Video toggle and preset select (labels weren't associated with their controls).
  • Your ExportSettings change added a required videoFile prop but didn't update its Storybook story — fixed.

tsc --noEmit, lint, and bun run build all pass clean now. Should be ready for a real review.

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

Reviewers

No reviews

Assignees

No one assigned

Labels

gssoc'26 GirlScript Summer of Code 2026 level:advanced Advanced level - 55 pts status:changes-requested Maintainer asked for a specific fix type:design UI/UX design type:docs Documentation type:feature New feature

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[FEATURE] Video Compressor

2 participants

@Devangee20 @magic-peach