@remotion/web-renderer: Support object-fit property#6206
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds support for the CSS object-fit property to the @remotion/web-renderer package, enabling proper rendering of images and canvas elements with different object-fit values (fill, contain, cover, none, scale-down).
Key Changes:
- Implemented comprehensive object-fit calculation logic for all five CSS object-fit values
- Refactored DOM element drawing to handle SVG and replaced elements separately
- Added test coverage with visual regression testing for all object-fit modes
Reviewed changes
Copilot reviewed 7 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/web-renderer/src/drawing/calculate-object-fit.ts | New file implementing object-fit calculation logic for all five CSS values (fill, contain, cover, none, scale-down) |
| packages/web-renderer/src/drawing/draw-dom-element.ts | Refactored to separate SVG and replaced element rendering, integrating object-fit support for images and canvas elements |
| packages/web-renderer/src/test/object-fit.test.tsx | Added test case for object-fit rendering verification |
| packages/web-renderer/src/test/fixtures/object-fit.tsx | Created test fixture showcasing all five object-fit values in a grid layout |
| packages/web-renderer/src/test/Root.tsx | Registered new object-fit composition for testing |
| packages/docs/docs/client-side-rendering/limitations.mdx | Updated documentation to mark object-fit as supported and removed it from unsupported list |
| packages/web-renderer/package.json | Added public directory configuration to studio and remotion scripts |
| const calculateContain = ({ | ||
| containerSize, | ||
| intrinsicSize, | ||
| }: ObjectFitParams): ObjectFitResult => { |
There was a problem hiding this comment.
The calculateContain and calculateCover functions divide by containerSize.height and intrinsicSize.height without checking for zero values. If either of these values is zero, this will result in division by zero, leading to Infinity or NaN values in the calculations. Consider adding validation to ensure both container and intrinsic dimensions are positive before performing these calculations, similar to the validation in fitSvgIntoItsContainer function.
| }: ObjectFitParams): ObjectFitResult => { | |
| }: ObjectFitParams): ObjectFitResult => { | |
| if (containerSize.height <= 0 || intrinsicSize.height <= 0) { | |
| // Fall back to fill behavior if heights are invalid to avoid division by zero | |
| return calculateFill({containerSize, intrinsicSize}); | |
| } |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 participant
No description provided.