remotion 4.0.537 → 4.0.539

package/dist/cjs/HtmlInCanvas.d.ts

@@ -91,55 +91,57 @@ export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & Interac
     readonly onInit?: HtmlInCanvasOnInit;
     readonly pixelDensity?: HtmlInCanvasPixelDensity;
     readonly _remotionInternalCanvasSiblings?: React.ReactNode;
+    readonly _remotionInternalFallbackLabel?: string;
 };
+export declare const useHtmlInCanvasUnsupportedMessage: () => string | null;
 export declare const htmlInCanvasSchema: {
     readonly 'style.transformOrigin': {
-        readonly type: "transform-origin";
+        readonly type: 'transform-origin';
         readonly step: 1;
-        readonly default: "50% 50%";
-        readonly description: "Transform origin";
+        readonly default: '50% 50%';
+        readonly description: 'Transform origin';
     };
     readonly 'style.translate': {
-        readonly type: "translate";
+        readonly type: 'translate';
         readonly step: 1;
-        readonly default: "0px 0px";
-        readonly description: "Offset";
+        readonly default: '0px 0px';
+        readonly description: 'Offset';
     };
     readonly 'style.scale': {
-        readonly type: "scale";
+        readonly type: 'scale';
         readonly max: 100;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Scale";
-        readonly defaultKeyframeOutput: "perceptual-scale";
+        readonly description: 'Scale';
+        readonly defaultKeyframeOutput: 'perceptual-scale';
     };
     readonly 'style.rotate': {
-        readonly type: "rotation-css";
+        readonly type: 'rotation-css';
         readonly step: 1;
-        readonly default: "0deg";
-        readonly description: "Rotation";
+        readonly default: '0deg';
+        readonly description: 'Rotation';
     };
     readonly 'style.opacity': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Opacity";
+        readonly description: 'Opacity';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderWidth': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border width";
+        readonly description: 'Border width';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderStyle': {
-        readonly type: "enum";
-        readonly default: "none";
-        readonly description: "Border style";
+        readonly type: 'enum';
+        readonly default: 'none';
+        readonly description: 'Border style';
         readonly variants: {
             readonly none: {};
             readonly hidden: {};
@@ -154,67 +156,67 @@ export declare const htmlInCanvasSchema: {
         };
     };
     readonly 'style.borderColor': {
-        readonly type: "color";
+        readonly type: 'color';
         readonly default: undefined;
-        readonly description: "Border color";
+        readonly description: 'Border color';
     };
     readonly 'style.borderRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border radius";
+        readonly description: 'Border radius';
         readonly hiddenFromList: false;
         readonly keyframable: true;
     };
     readonly 'style.borderTopLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top left radius";
+        readonly description: 'Top left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderTopRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top right radius";
+        readonly description: 'Top right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom right radius";
+        readonly description: 'Bottom right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom left radius";
+        readonly description: 'Bottom left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.backgroundColor': {
-        readonly type: "color";
-        readonly default: "transparent";
-        readonly description: "Color";
+        readonly type: 'color';
+        readonly default: 'transparent';
+        readonly description: 'Color';
     };
     readonly premountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
-        readonly description: "Premount For";
+        readonly description: 'Premount For';
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
     readonly postmountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
@@ -222,9 +224,9 @@ export declare const htmlInCanvasSchema: {
         readonly keyframable: false;
     };
     readonly cropLeft: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop left";
+        readonly description: 'Crop left';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -232,9 +234,9 @@ export declare const htmlInCanvasSchema: {
         readonly keyframable: true;
     };
     readonly cropRight: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop right";
+        readonly description: 'Crop right';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -242,9 +244,9 @@ export declare const htmlInCanvasSchema: {
         readonly keyframable: true;
     };
     readonly cropTop: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop top";
+        readonly description: 'Crop top';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -252,9 +254,9 @@ export declare const htmlInCanvasSchema: {
         readonly keyframable: true;
     };
     readonly cropBottom: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop bottom";
+        readonly description: 'Crop bottom';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -262,36 +264,36 @@ export declare const htmlInCanvasSchema: {
         readonly keyframable: true;
     };
     readonly durationInFrames: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 1;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly from: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly trimBefore: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly playbackRate: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 1;
         readonly min: 0.01;
         readonly step: 0.1;
-        readonly description: "Playback rate";
+        readonly description: 'Playback rate';
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
     readonly freeze: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: null;
         readonly step: 1;
         readonly hiddenFromList: true;
@@ -300,27 +302,16 @@ export declare const htmlInCanvasSchema: {
     readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
     readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
     readonly pixelDensity: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly min: 1;
         readonly max: 3;
         readonly step: 0.1;
         readonly default: 1;
-        readonly description: "Pixel density";
+        readonly description: 'Pixel density';
         readonly hiddenFromList: false;
     };
 };
-export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<InteractiveBaseProps, "children"> & InteractiveCropProps & Omit<AbsoluteFillLayout, "layout"> & {
-    readonly durationInFrames?: number | undefined;
-    readonly width: number;
-    readonly height: number;
-    readonly effects?: EffectsProp | undefined;
-    readonly effectsOutputSize?: EffectsOutputSize | undefined;
-    readonly children: React.ReactNode;
-    readonly onPaint?: HtmlInCanvasOnPaint | undefined;
-    readonly onInit?: HtmlInCanvasOnInit | undefined;
-    readonly pixelDensity?: number | undefined;
-    readonly _remotionInternalCanvasSiblings?: React.ReactNode;
-} & React.RefAttributes<HTMLCanvasElement>> & {
-    readonly isSupported: () => boolean;
-    readonly isNestingSupported: () => boolean;
+export declare const HtmlInCanvas: React.ForwardRefExoticComponent<HtmlInCanvasProps & React.RefAttributes<HTMLCanvasElement>> & {
+    readonly isSupported: typeof isHtmlInCanvasSupported;
+    readonly isNestingSupported: typeof isHtmlInCanvasNestingSupported;
 };

package/dist/cjs/HtmlInCanvas.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.getHtmlInCanvasUnsupportedMessage = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasNestingSupported = exports.isHtmlInCanvasSupported = void 0;
+exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.useHtmlInCanvasUnsupportedMessage = exports.getHtmlInCanvasUnsupportedMessage = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasNestingSupported = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DefaultPremountContext_js_1 = require("./DefaultPremountContext.js");
@@ -9,6 +9,7 @@ const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const freeze_js_1 = require("./freeze.js");
+const HtmlInCanvasFallback_js_1 = require("./HtmlInCanvasFallback.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const resolve_sequence_duration_js_1 = require("./resolve-sequence-duration.js");
 const Sequence_js_1 = require("./Sequence.js");
@@ -147,6 +148,17 @@ const defaultOnPaint = ({ canvas, elementImage, }) => {
     ctx.drawElementImage(elementImage, 0, 0);
 };
 const HtmlInCanvasAncestorContext = (0, react_1.createContext)(null);
+const useHtmlInCanvasUnsupportedMessage = () => {
+    const ancestorPaintState = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
+    if (!(0, exports.isHtmlInCanvasSupported)()) {
+        return (0, exports.getHtmlInCanvasUnsupportedMessage)();
+    }
+    if (ancestorPaintState && !(0, exports.isHtmlInCanvasNestingSupported)()) {
+        return `Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer with HTML-in-canvas enabled.`;
+    }
+    return null;
+};
+exports.useHtmlInCanvasUnsupportedMessage = useHtmlInCanvasUnsupportedMessage;
 const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, effectsOutputSize, children, canvasSiblings, onPaint, onInit, pixelDensity, controls, style, renderFrame, }, ref) => {
     var _a, _b;
     const ancestorPaintState = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
@@ -589,8 +601,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
             ...(style !== null && style !== void 0 ? style : {}),
         };
     }, [height, style, width]);
-    return (jsx_runtime_1.jsxs(HtmlInCanvasAncestorContext.Provider, { value: paintState, children: [
-            jsx_runtime_1.jsx("canvas", { ref: paintTargetMode === 'copied' ? canvas2dRef : setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: paintTargetMode === 'copied'
+    return ((0, jsx_runtime_1.jsxs)(HtmlInCanvasAncestorContext.Provider, { value: paintState, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: paintTargetMode === 'copied' ? canvas2dRef : setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: paintTargetMode === 'copied'
                     ? {
                         ...canvasStyle,
                         position: 'absolute',
@@ -599,22 +610,24 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
                         visibility: 'hidden',
                         pointerEvents: 'none',
                     }
-                    : canvasStyle, children: jsx_runtime_1.jsxs(DefaultPremountContext_js_1.DefaultPremountContext.Provider, { value: 0, children: [
-                        jsx_runtime_1.jsx("div", { ref: divRef, style: paintTargetMode === 'copied'
+                    : canvasStyle, children: (0, jsx_runtime_1.jsxs)(DefaultPremountContext_js_1.DefaultPremountContext.Provider, { value: 0, children: [(0, jsx_runtime_1.jsx)("div", { ref: divRef, style: paintTargetMode === 'copied'
                                 ? { ...innerStyle, visibility: 'visible' }
-                                : innerStyle, children: children }), canvasSiblings] }) }, canvasSizeKey), paintTargetMode === 'copied' ? (jsx_runtime_1.jsx("canvas", { ref: setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle }, `output-${canvasSizeKey}`)) : null] }));
+                                : innerStyle, children: children }), canvasSiblings] }) }, canvasSizeKey), paintTargetMode === 'copied' ? ((0, jsx_runtime_1.jsx)("canvas", { ref: setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle }, `output-${canvasSizeKey}`)) : null] }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 // Subscribe to frame changes only while rendering. Preview keeps relying on
 // the browser's paints and does not need a capture barrier on every frame.
 const HtmlInCanvasContentForRendering = (0, react_1.forwardRef)((props, ref) => {
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
-    return jsx_runtime_1.jsx(HtmlInCanvasContent, { ...props, ref: ref, renderFrame: frame });
+    return (0, jsx_runtime_1.jsx)(HtmlInCanvasContent, { ...props, ref: ref, renderFrame: frame });
 });
 HtmlInCanvasContentForRendering.displayName = 'HtmlInCanvasContentForRendering';
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], effectsOutputSize, children, onPaint, onInit, pixelDensity, _remotionInternalCanvasSiblings, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, name, ...sequenceProps }, ref) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], effectsOutputSize, children, onPaint, onInit, pixelDensity, _remotionInternalCanvasSiblings, _remotionInternalFallbackLabel = 'Effects are not visible', controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, name, ...sequenceProps }, ref) => {
     var _a;
     const { isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const unsupportedMessage = (0, exports.useHtmlInCanvasUnsupportedMessage)();
+    assertHtmlInCanvasDimensions(width, height);
+    resolveHtmlInCanvasPixelDensity(pixelDensity);
     const Content = isRendering
         ? HtmlInCanvasContentForRendering
         : HtmlInCanvasContent;
@@ -651,7 +664,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
         style: premountingStyle,
         componentName: '<HtmlInCanvas />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(Content, { ref: setCanvasRef, renderFrame: null, width: width, height: height, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, canvasSiblings: _remotionInternalCanvasSiblings !== null && _remotionInternalCanvasSiblings !== void 0 ? _remotionInternalCanvasSiblings : null, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: !isRendering && unsupportedMessage !== null ? ((0, jsx_runtime_1.jsx)(HtmlInCanvasFallback_js_1.HtmlInCanvasFallback, { style: { width, height, ...croppedStyle }, label: _remotionInternalFallbackLabel, children: (0, jsx_runtime_1.jsx)(DefaultPremountContext_js_1.DefaultPremountContext.Provider, { value: 0, children: (0, jsx_runtime_1.jsx)("div", { style: { width, height }, children: children }) }) })) : ((0, jsx_runtime_1.jsx)(Content, { ref: setCanvasRef, renderFrame: null, width: width, height: height, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, canvasSiblings: _remotionInternalCanvasSiblings !== null && _remotionInternalCanvasSiblings !== void 0 ? _remotionInternalCanvasSiblings : null, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children })) }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 exports.htmlInCanvasSchema = {

package/dist/cjs/HtmlInCanvasFallback.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const HtmlInCanvasFallback: React.FC<{
+    readonly children: React.ReactNode;
+    readonly style: React.CSSProperties;
+    readonly label: string;
+}>;

package/dist/cjs/HtmlInCanvasFallback.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HtmlInCanvasFallback = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_current_scale_js_1 = require("./use-current-scale.js");
+const HtmlInCanvasFallback = ({ children, style, label }) => {
+    const currentScale = (0, use_current_scale_js_1.useCurrentScale)({ dontThrowIfOutsideOfRemotion: true });
+    const scale = currentScale > 0 ? currentScale : 1;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', ...style }, children: [children, (0, jsx_runtime_1.jsxs)("div", { className: "css-reset", style: {
+                    position: 'absolute',
+                    top: 8 / scale,
+                    right: 8 / scale,
+                    zIndex: 1000,
+                    // Cancel the preview zoom while keeping the badge inside its component.
+                    transform: `scale(${1 / scale})`,
+                    transformOrigin: 'top right',
+                    maxWidth: `calc(${scale * 100}% - 16px)`,
+                    padding: '8px 10px',
+                    borderRadius: 6,
+                    border: '1px solid #7f3540',
+                    backgroundColor: '#2b171c',
+                    boxShadow: '0 2px 8px #0003',
+                    pointerEvents: 'none',
+                    textAlign: 'left',
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontSize: 12,
+                            fontWeight: 600,
+                            lineHeight: 1.5,
+                            color: '#ffabb5',
+                        }, children: "HTML-in-canvas is not available" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontSize: 11,
+                            fontWeight: 400,
+                            lineHeight: 1.5,
+                            color: '#e8bdc3',
+                        }, children: label })] })] }));
+};
+exports.HtmlInCanvasFallback = HtmlInCanvasFallback;

package/dist/cjs/IFrame.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const IFrame: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLIFrameElement> & React.IframeHTMLAttributes<HTMLIFrameElement> & {
-    readonly delayRenderRetries?: number | undefined;
-    readonly delayRenderTimeoutInMilliseconds?: number | undefined;
+    readonly delayRenderRetries?: number;
+    readonly delayRenderTimeoutInMilliseconds?: number;
 }, "ref"> & React.RefAttributes<HTMLIFrameElement>>;

package/dist/cjs/IFrame.js

@@ -56,7 +56,7 @@ const IFrameRefForwarding = ({ onLoad, onError, delayRenderRetries, delayRenderT
             console.error('Error loading iframe:', e, 'Handle the event using the onError() prop to make this message disappear.');
         }
     }, [onError, continueRender, src, srcDoc]);
-    return (jsx_runtime_1.jsx("iframe", { referrerPolicy: "strict-origin-when-cross-origin", ...props, ref: ref, onError: didGetError, onLoad: didLoad }));
+    return ((0, jsx_runtime_1.jsx)("iframe", { referrerPolicy: "strict-origin-when-cross-origin", ...props, ref: ref, onError: didGetError, onLoad: didLoad }));
 };
 /*
  * @description The <IFrame /> can be used like a regular <iframe> HTML tag.