Feature description
A live, real-time WYSIWYG (What You See Is What You Get) preview inside the video player container that instantly reflects layout variations and visual transformations—specifically video rotation, framing options (fit vs fill), and color tweaks (brightness, contrast, and saturation)—as the user adjusts the control panels.
Problem this solves
Right now, changing parameters like video rotation, color filters, output size, or framing adjustments doesn't update the video canvas player dynamically in src/components/VideoPreview.tsx. The values are correctly held in state and passed to the FFmpeg engine, but users are essentially editing "blindly" because they can only see the resulting impact after the entire export process completes.
Proposed solution
Replicate the expected processing outputs inside the client-side presentation layer by utilizing hardware-accelerated CSS properties directly inside src/components/VideoPreview.tsx linked to the reactive recipe state:
- Color Adjustments: Bind a dynamic inline CSS filter configuration string onto the
- Video Rotation: Apply a dynamic inline style={{ transform: "rotate(" + recipe.rotate + "deg)" }} macro accompanied by transition smoothing variables.
- Framing Toggles: Replace the static object-contain className with a reactive mapping layer: recipe.framing === 'fill' ? 'object-cover' : 'object-contain'.
- Output Masking: Conditionally update the layout aspect ratio wrappers around the video container container to cleanly simulate cropping profiles or output bounding boxes before processing starts.
Alternatives considered
Relying on a background Canvas drawing system or spinning up miniature real-time FFmpeg processing streams to render micro-previews. However, browser-native CSS styling handles all of these operations instantly at zero performance cost to the user's browser, keeping the core experience completely lightweight.
Additional context
This enhancement falls directly under the enhancement / feature tier and would massively boost user satisfaction without modifying or interfering with any underlying WASM rendering hooks inside the application lifecycle. I would be glad to take this up under GSSOC and build it!
Feature description
A live, real-time WYSIWYG (What You See Is What You Get) preview inside the video player container that instantly reflects layout variations and visual transformations—specifically video rotation, framing options (fit vs fill), and color tweaks (brightness, contrast, and saturation)—as the user adjusts the control panels.
Problem this solves
Right now, changing parameters like video rotation, color filters, output size, or framing adjustments doesn't update the video canvas player dynamically in src/components/VideoPreview.tsx. The values are correctly held in state and passed to the FFmpeg engine, but users are essentially editing "blindly" because they can only see the resulting impact after the entire export process completes.
Proposed solution
Replicate the expected processing outputs inside the client-side presentation layer by utilizing hardware-accelerated CSS properties directly inside src/components/VideoPreview.tsx linked to the reactive recipe state:
Alternatives considered
Relying on a background Canvas drawing system or spinning up miniature real-time FFmpeg processing streams to render micro-previews. However, browser-native CSS styling handles all of these operations instantly at zero performance cost to the user's browser, keeping the core experience completely lightweight.
Additional context
This enhancement falls directly under the enhancement / feature tier and would massively boost user satisfaction without modifying or interfering with any underlying WASM rendering hooks inside the application lifecycle. I would be glad to take this up under GSSOC and build it!