Elements: Make preview metadata explicit - #9800
Conversation
There was a problem hiding this comment.
Reviewed changes — replaces the transparentPreview boolean with an explicit preview object on every ElementDefinition. URLs are now authoritative data (not derived from slugs), all previews render as opaque MP4/H.264, and the render script supports rendering single Elements via --element=<category>/<slug>.
- Add
ElementPreviewMetadatatype with template literal URL types forposterUrlandvideoUrl - Replace
transparentPreviewwithpreviewobject on every element definition and the template - Remove
getElementPreviewUrlshelper (URLs are now stored directly on definitions) - Always render opaque MP4/H.264/yuv420p previews (no more WebM/VP8/yuva420p branch)
- Derive R2 upload keys from the explicit URLs via
getUploadKey()with origin validation - Add
--element=<category>/<slug>filtering to render and optionally upload a single Element - Update scaffold and publish skills for the new flat URL convention
ℹ️ Old R2 assets at the nested path become orphaned
The URL scheme changes from elements/<category>/<slug>/preview.{png,webm} to the flat elements/<category>-<slug>-preview.{png,mp4}. When the new previews are uploaded, the old R2 objects at the nested paths still exist but are no longer referenced. This is harmless but may be worth noting for a future cleanup pass.
DeepSeek Pro (free via Pullfrog for OSS) (Claude Opus not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏
| video: `https://remotion.media/elements/${definition.slug}/preview.${definition.transparentPreview ? 'webm' : 'mp4'}`, | ||
| }); | ||
| const assetSlug = definition.slug.replaceAll('/', '-'); | ||
| expect(String(definition.preview.posterUrl)).toBe( |
There was a problem hiding this comment.
ℹ️ The String() wrapper is unnecessary here — definition.preview.posterUrl is a string at runtime (the template literal type is compile-time only). Same on line 296 for videoUrl.
Summary
Verification
bun run buildbun run stylecheckcd packages/docs && bun test src/test/elements.test.tsbun run render-element-previews --element=data/horizontal-bar-chart --uploadbun run render-element-previews --element=data/product-offer --upload