Interactivity promo video#8319
Conversation
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
[!CAUTION]
This PR introduces a TypeScript compilation error: StudioCanvasCapture.tsx passes density to HtmlInCanvasCapture but density was removed from HtmlInCanvasCaptureProps.
Reviewed changes — converts canvas capture from a simple on/off boolean (CANVAS_CAPTURE_ENABLED) to a multi-target string system (CANVAS_CAPTURE_TARGET), embeds capture metadata directly in WebM files via Mediabunny tags instead of downloading a separate JSON, and rewrites CanvasCapturePreview to read metadata from video tags.
- Replace
CANVAS_CAPTURE_ENABLEDwithCANVAS_CAPTURE_TARGET— a union type ('canvas' | 'timeline-list' | 'timeline-tracks' | 'timeline' | 'undo-redo' | 'full-studio' | 'off') replaces the boolean toggle. Each capture target wraps only the relevant UI subtree inStudioCanvasCapture. - Wrap individual studio regions with conditional capture wrappers —
Editor.tsx,Preview.tsx,Timeline.tsx,MenuToolbar.tsxeach checkCANVAS_CAPTURE_TARGETand conditionally wrap their content inStudioCanvasCapture. - Embed capture metadata as Mediabunny tags in the WebM —
finalizeRecordingnow remuxes viaConversionto attachREMOTION_CAPTURE_DATAas a raw tag, eliminating the separate JSON download. - Record pointer clicks alongside mouse movements —
PointerClickevents (pointer-down/pointer-up) are recorded and stored in the video tags, used byCursorOverlayto scale the cursor glyph on click. - Remove
densityfromHtmlInCanvasCaptureprops —CAPTURE_DENSITY = 2is now a constant, exported for consumers.StudioCanvasCapturecallsites all switched fromdensity={2}todensity={5}. - Rewrite
CanvasCapturePreviewto read cursor data from video tags —calculateMetadatausesmediabunny.Input/UrlSourceto read video dimensions and extract capture metadata from tags instead of fetching a separate JSON file. - Remove inline cursor SVG components —
ArrowCursor,TextCursor,ResizeCursorare deleted.CursorGlyphnow delegates exclusively toCursorImgusing cursor SVGs fromremotion.media. - Add new demo recording assets — several
.webmvideos and.jsonmetadata files inpackages/example/public/for star radius, star color, click-star, undo-redo, and timeline-scrub demos. - Rewrite
CenteredSolidcomposition — replaced multi-effect demo with a star shape using thezigzageffect. - Wrap
UndoRedoButtonsin a fixed-size container and useInteractive.SvginSpringSeason.
🚨 StudioCanvasCapture passes density to HtmlInCanvasCapture which no longer accepts it
StudioCanvasCapture.tsx:49 passes density={density} to <HtmlInCanvasCapture>, but this PR removes the density prop from HtmlInCanvasCaptureProps (packages/canvas-capture/src/index.tsx:111—114). This will fail TypeScript compilation. The StudioCanvasCapture component is not in the diff — it was missed.
Technical details
# StudioCanvasCapture passes density to HtmlInCanvasCapture which no longer accepts it
## Affected sites
- `packages/studio/src/components/StudioCanvasCapture.tsx:49` — `<HtmlInCanvasCapture ref={captureRef} density={density} ...>`
- `packages/canvas-capture/src/index.tsx:111-114` — `HtmlInCanvasCaptureProps` no longer includes `density`
## Required outcome
- Either update `StudioCanvasCapture` to stop passing `density` to `HtmlInCanvasCapture` (use the exported `CAPTURE_DENSITY` constant), or restore the `density` prop on `HtmlInCanvasCapture`.
- Note: all studio callsites were changed from `density={2}` to `density={5}`, so if the intent is to keep density=5, `CAPTURE_DENSITY` should be 5 (or the prop should be reinstated).
ℹ️ _scale destructured but unused in CursorGlyph
packages/example/src/CanvasCapturePreview.tsx:272 renames scale to _scale (unused parameter). It can be removed from the destructuring entirely.
Note: 1 inline comment(s) dropped because they did not anchor to lines inside the PR diff:
packages/studio/src/components/StudioCanvasCapture.tsx:49(RIGHT) — file not in PR diff
DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏
| readonly scale: number; | ||
| }> = ({cursor, cursorAssetBasePath, scale}) => { | ||
| readonly cursorScale: number; | ||
| }> = ({cursor, scale: _scale, cursorScale}) => { |
There was a problem hiding this comment.
ℹ️ _scale is destructured but never used — it was renamed from the old scale prop. Remove it from the destructuring pattern.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 participant
No description provided.