Skip to content

[Enhancement]: Add real-time preview for rotate transformations before export #1185

@NavyaK16

Description

@NavyaK16

Feature description
Add a real-time preview for rotate transformations in the video preview and comparison modes before export. Currently, rotation settings can be selected through the UI, but the applied transformation is not visually reflected in the preview until export.

Problem this solves
Users cannot verify whether rotate transformations have been applied correctly before exporting the video. Although rotation controls are available, the preview currently displays the original video without visually applying the transformation, which can make the editing experience less intuitive.

Proposed solution
Apply CSS-based transformations to the preview video element using the existing recipe.rotate state. This would allow the preview and comparison components to visually reflect rotation changes instantly.

Possible implementation approach:

  • Read rotation values from recipe.rotate
  • Apply dynamic CSS transforms
  • Update both VideoPreview and ComparisonPreview components to reflect the transformation visually in real time.

Alternatives considered
Rendering transformed previews using FFmpeg before export, which may be computationally expensive and difficult to maintain for real-time interactions.

Metadata

Metadata

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions