Summary
Several critical issues were identified in the video editing/export pipeline affecting:
export size estimation accuracy
preview crop visualization
trim state validation
thumbnail strip memory usage
These bugs lead to incorrect UI behavior, broken editing feedback, inaccurate export information, and potential browser crashes on large videos.
- Critical Size Estimation Bug: Preset ID Mismatch
Affected File
src/lib/exportEstimate.ts
Impact
Export size estimates become highly inaccurate (often inflated by 200%–300%) for standard vertical, portrait, and square presets.
Problem
getOutputDimensions() attempts to resolve dimensions using keys from PRESET_DIMENSIONS, but the actual preset IDs used throughout the application do not match those keys.
Example mismatch:
Expected keys in estimator:
"square-1080"
"portrait-1080"
"1080p"
Actual preset IDs:
"vertical-9-16"
"square-1-1"
"instagram-4-5"
Because of this mismatch:
PRESET_DIMENSIONS[recipe.preset]
always returns undefined.
The logic then falls back to:
recipe.customWidth || 1920
recipe.customHeight || 1080
causing nearly all preset exports to be estimated as full HD landscape videos.
Result
Incorrect file size predictions
Misleading export estimates
Square/portrait videos shown as 1920×1080 exports
2. Inverted Preview Crop Overlay Geometry (90° Rotation Bug)
Affected File
src/components/VideoPreview.tsx
Impact
The crop/fill overlay displayed in the preview is visually inverted, showing cropping in the wrong direction.
Problem
The crop geometry logic incorrectly interprets aspect ratio relationships during fill/crop mode.
For tall output formats such as 9:16:
the actual crop occurs on the left/right sides
but the UI draws crop bars on the top/bottom
Example problematic branch:
if (outputRatio < containerRatio) {
// Output is taller → crops top & bottom
}
This interpretation is reversed for fill scaling behavior.
Result
Overlay preview does not match actual FFmpeg crop behavior
Users receive misleading visual feedback
Preview appears rotated/inverted conceptually
3. Trim Control Invalid State Propagation (NaN Leak)
Affected File
src/components/TrimControl.tsx
Impact
Invalid temporary input states leak into application state, causing corrupted duration calculations and broken UI rendering.
Problem
handleEnd() commits parsed values into state before validation.
Example:
onChange({ trimEnd: n });
This occurs even when:
n is NaN
input is temporarily empty
user types -
value exceeds duration
Meanwhile handleStart() correctly validates before committing.
Result
Temporary invalid states propagate into:
clipLength = trimEnd - trimStart
leading to:
NaN duration calculations
broken clip length display
inconsistent editor state
4. High Memory / Crash Risk in Thumbnail Strip
Affected File
src/components/ThumbnailStrip.tsx
Impact
Long videos can cause:
massive memory usage
browser freezing
UI lag
tab crashes (OOM)
Problem
Thumbnail generation scales linearly with duration using a fixed interval.
Example:
for (let t = 0; t <= duration; t += intervalSeconds)
A 30-minute video generates:
~360 thumbnails
360 seek operations
360 canvas renders
360 Object URLs retained in memory
All thumbnails remain simultaneously mounted in React state.
Result
Extremely high RAM consumption
CPU/GPU spikes
browser instability
Out-of-memory crashes on long videos
Suggested Direction
Thumbnail generation should dynamically cap total thumbnail count based on duration.
Example approach:
const effectiveInterval =
Math.max(intervalSeconds, Math.ceil(duration / 20));
Additional Notes
Automated Test Results
Automated tests successfully passed multiple unit tests, including:
presets.test.ts
presetSuggestion.test.ts
exportEstimate.test.ts
However, some test suites failed due to unresolved dependencies in the environment.
Dependency Failures
Cannot find package '@ffmpeg/ffmpeg'
Cannot find package 'clsx'
Overall Impact
These issues collectively affect:
export accuracy
preview correctness
editing stability
browser performance
reliability on large media files
Some of these bugs can significantly degrade user trust due to incorrect export estimates and misleading preview overlays, while others can cause full browser crashes during editing sessions.
Please assign this issue to me. gssoc
Summary
Several critical issues were identified in the video editing/export pipeline affecting:
export size estimation accuracy
preview crop visualization
trim state validation
thumbnail strip memory usage
These bugs lead to incorrect UI behavior, broken editing feedback, inaccurate export information, and potential browser crashes on large videos.
Affected File
src/lib/exportEstimate.ts
Impact
Export size estimates become highly inaccurate (often inflated by 200%–300%) for standard vertical, portrait, and square presets.
Problem
getOutputDimensions() attempts to resolve dimensions using keys from PRESET_DIMENSIONS, but the actual preset IDs used throughout the application do not match those keys.
Example mismatch:
Expected keys in estimator:
"square-1080"
"portrait-1080"
"1080p"
Actual preset IDs:
"vertical-9-16"
"square-1-1"
"instagram-4-5"
Because of this mismatch:
PRESET_DIMENSIONS[recipe.preset]
always returns undefined.
The logic then falls back to:
recipe.customWidth || 1920
recipe.customHeight || 1080
causing nearly all preset exports to be estimated as full HD landscape videos.
Result
Incorrect file size predictions
Misleading export estimates
Square/portrait videos shown as 1920×1080 exports
2. Inverted Preview Crop Overlay Geometry (90° Rotation Bug)
Affected File
src/components/VideoPreview.tsx
Impact
The crop/fill overlay displayed in the preview is visually inverted, showing cropping in the wrong direction.
Problem
The crop geometry logic incorrectly interprets aspect ratio relationships during fill/crop mode.
For tall output formats such as 9:16:
the actual crop occurs on the left/right sides
but the UI draws crop bars on the top/bottom
Example problematic branch:
if (outputRatio < containerRatio) {
// Output is taller → crops top & bottom
}
This interpretation is reversed for fill scaling behavior.
Result
Overlay preview does not match actual FFmpeg crop behavior
Users receive misleading visual feedback
Preview appears rotated/inverted conceptually
3. Trim Control Invalid State Propagation (NaN Leak)
Affected File
src/components/TrimControl.tsx
Impact
Invalid temporary input states leak into application state, causing corrupted duration calculations and broken UI rendering.
Problem
handleEnd() commits parsed values into state before validation.
Example:
onChange({ trimEnd: n });
This occurs even when:
n is NaN
input is temporarily empty
user types -
value exceeds duration
Meanwhile handleStart() correctly validates before committing.
Result
Temporary invalid states propagate into:
clipLength = trimEnd - trimStart
leading to:
NaN duration calculations
broken clip length display
inconsistent editor state
4. High Memory / Crash Risk in Thumbnail Strip
Affected File
src/components/ThumbnailStrip.tsx
Impact
Long videos can cause:
massive memory usage
browser freezing
UI lag
tab crashes (OOM)
Problem
Thumbnail generation scales linearly with duration using a fixed interval.
Example:
for (let t = 0; t <= duration; t += intervalSeconds)
A 30-minute video generates:
~360 thumbnails
360 seek operations
360 canvas renders
360 Object URLs retained in memory
All thumbnails remain simultaneously mounted in React state.
Result
Extremely high RAM consumption
CPU/GPU spikes
browser instability
Out-of-memory crashes on long videos
Suggested Direction
Thumbnail generation should dynamically cap total thumbnail count based on duration.
Example approach:
const effectiveInterval =
Math.max(intervalSeconds, Math.ceil(duration / 20));
Additional Notes
Automated Test Results
Automated tests successfully passed multiple unit tests, including:
presets.test.ts
presetSuggestion.test.ts
exportEstimate.test.ts
However, some test suites failed due to unresolved dependencies in the environment.
Dependency Failures
Cannot find package '@ffmpeg/ffmpeg'
Cannot find package 'clsx'
Overall Impact
These issues collectively affect:
export accuracy
preview correctness
editing stability
browser performance
reliability on large media files
Some of these bugs can significantly degrade user trust due to incorrect export estimates and misleading preview overlays, while others can cause full browser crashes during editing sessions.
Please assign this issue to me. gssoc