[BUG] Large video uploads can freeze or crash browser during waveform generation

[Krishnx21]

Bug Summary

Large uploaded videos are fully loaded into memory and decoded immediately for waveform generation, which can cause severe memory spikes, browser freezes, or tab crashes.

Files

src/hooks/useAudioWaveform.ts (around line 59)

audioContext = new AudioContextCtor();

const audioBuffer = await audioContext.decodeAudioData(
  await file.arrayBuffer()
);

Called automatically from:

src/components/TrimControl.tsx (around line 28)

const { waveform, isLoading: waveformLoading } = useAudioWaveform(file);

Root Cause

Every uploaded video file is immediately:

1. Read completely into memory using file.arrayBuffer()
2. Decoded using decodeAudioData()
3. Processed regardless of whether the user opens the trim feature

This occurs automatically when TrimControl mounts.

Steps to Reproduce

1. Upload a large video (400–500 MB).
2. Wait for the editor to initialize.
3. Observe memory usage in browser task manager/dev tools.
4. On lower-memory devices, the tab may become unresponsive or crash.

Actual Behavior

The application allocates a full copy of the uploaded file in memory and attempts to decode it immediately.

Large files can cause:

• Excessive memory consumption
• UI freezing
• Browser tab crashes
• Poor responsiveness

Expected Behavior

Waveform generation should be deferred until needed and should avoid loading extremely large files into memory.

Impact

The application accepts videos up to approximately 500 MB, yet immediately processes the full file.

Real users editing phone or camera footage may experience:

• Frozen UI
• Browser crashes
• Failed editing sessions

before performing any export operation.

Suggested Fix

Possible improvements include:

• Generate waveforms only when the trim panel is opened.
• Skip waveform generation for very large files.
• Downsample audio before processing.
• Move extraction work into the FFmpeg worker.
• Add true cancellation support that stops processing instead of only preventing state updates.

Why This Is a Bug

The failure mode is not theoretical. The application accepts large uploads and unconditionally allocates a full in-memory copy, making browser freezes and crashes a realistic user-facing issue.

ASSIGN TO ME UNDER GSSOC2026.
/ASSIGN /GSSOC2026

[github-actions]

👋 Thanks for opening an issue, @Krishnx21!

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!

[Naveen-Boddepalli]

Assign this issue to me as a GSSoC'26 contributor, if it is not assigned to anyone.
thank you.

[Krishnx21]

ASSIGN TO ME UNDER GSSOC2026.
/ASSIGN /GSSOC2026

[github-actions]

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