remotion 4.0.467 → 4.0.469

package/dist/cjs/CompositionManager.d.ts

@@ -70,6 +70,7 @@ export type TSequence = {
     premountDisplay: number | null;
     postmountDisplay: number | null;
     controls: SequenceControls | null;
+    refForOutline: React.RefObject<HTMLElement | null> | null;
     effects: readonly EffectDefinition<unknown>[];
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {

package/dist/cjs/Img.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import type { EffectsProp } from './effects/effect-types.js';
 import type { SequenceProps } from './Sequence.js';
-export declare function truncateSrcForLabel(src: string): string;
 type NativeImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
 export type ImgProps = NativeImgProps & {
     readonly maxRetries?: number;
@@ -9,6 +9,7 @@ export type ImgProps = NativeImgProps & {
     readonly delayRenderTimeoutInMilliseconds?: number;
     readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
     readonly src: string;
+    readonly effects?: EffectsProp;
     readonly showInTimeline?: boolean;
     readonly name?: string;
     /**
@@ -16,6 +17,37 @@ export type ImgProps = NativeImgProps & {
      */
     readonly stack?: string;
 } & Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden'>;
+export declare const imgSchema: {
+    readonly hidden: import("./sequence-field-schema.js").SequenceFieldSchema;
+    readonly 'style.translate': {
+        readonly type: "translate";
+        readonly step: 1;
+        readonly default: "0px 0px";
+        readonly description: "Offset";
+    };
+    readonly 'style.scale': {
+        readonly type: "number";
+        readonly min: 0.05;
+        readonly max: 100;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Scale";
+    };
+    readonly 'style.rotate': {
+        readonly type: "rotation";
+        readonly step: 1;
+        readonly default: "0deg";
+        readonly description: "Rotation";
+    };
+    readonly 'style.opacity': {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Opacity";
+    };
+};
 export declare const Img: React.ComponentType<NativeImgProps & {
     readonly maxRetries?: number;
     readonly pauseWhenLoading?: boolean;
@@ -23,6 +55,7 @@ export declare const Img: React.ComponentType<NativeImgProps & {
     readonly delayRenderTimeoutInMilliseconds?: number;
     readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
     readonly src: string;
+    readonly effects?: EffectsProp;
     readonly showInTimeline?: boolean;
     readonly name?: string;
     /**

package/dist/cjs/Img.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Img = void 0;
-exports.truncateSrcForLabel = truncateSrcForLabel;
+exports.Img = exports.imgSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const index_js_1 = require("./canvas-image/index.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
 const prefetch_js_1 = require("./prefetch.js");
 const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
+const truncate_src_for_label_js_1 = require("./truncate-src-for-label.js");
 const use_buffer_state_js_1 = require("./use-buffer-state.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -17,14 +18,6 @@ const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-// Data URLs like the ones from canvas.toDataURL() can be many megabytes, which makes the delayRender() label
-// unreadable and bloats log output
-function truncateSrcForLabel(src) {
-    if (src.startsWith('data:') && src.length > 100) {
-        return src.slice(0, 60) + '...[' + src.length + ' chars total]';
-    }
-    return src;
-}
 const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, ...props }) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
@@ -74,13 +67,13 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
         if (((_g = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _g !== void 0 ? _g : 0) <= maxRetries) {
             const backoff = exponentialBackoff((_j = errors.current[(_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src]) !== null && _j !== void 0 ? _j : 0);
             // eslint-disable-next-line no-console
-            console.warn(`Could not load image with source ${truncateSrcForLabel((_k = imageRef.current) === null || _k === void 0 ? void 0 : _k.src)}, retrying again in ${backoff}ms`);
+            console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_k = imageRef.current) === null || _k === void 0 ? void 0 : _k.src)}, retrying again in ${backoff}ms`);
             retryIn(backoff);
             return;
         }
         try {
             cancelRender('Error loading image with src: ' +
-                truncateSrcForLabel((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
+                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
         }
         catch (_m) {
             // cancelRender() intentionally throws after storing the error in scope.
@@ -103,7 +96,7 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
             if (!current) {
                 return;
             }
-            const newHandle = delayRender('Loading <Img> with src=' + truncateSrcForLabel(actualSrc), {
+            const newHandle = delayRender('Loading <Img> with src=' + (0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc), {
                 retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
             });
@@ -121,7 +114,7 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
                 if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
                     delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
                     // eslint-disable-next-line no-console
-                    console.info(`Retry successful - ${truncateSrcForLabel((_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src)} is now loaded`);
+                    console.info(`Retry successful - ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src)} is now loaded`);
                 }
                 if (current) {
                     onImageFrame === null || onImageFrame === void 0 ? void 0 : onImageFrame(current);
@@ -181,19 +174,79 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     // src gets set once we've loaded and decoded the image.
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
-const ImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, ...props }) => {
+const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, ...props }) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
     return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, _remotionInternalStack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, children: (0, jsx_runtime_1.jsx)(ImgContent, { src: src, ...props }) }));
 };
-const imgSchema = {
+const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
+exports.imgSchema = {
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
+const imgCanvasFallbackIncompatibleProps = new Set([
+    'alt',
+    'crossOrigin',
+    'decoding',
+    'fetchPriority',
+    'loading',
+    'onError',
+    'onImageFrame',
+    'onLoad',
+    'sizes',
+    'srcSet',
+    'useMap',
+]);
+const getIncompatiblePropNames = (props) => Object.keys(props).filter((key) => props[key] !== undefined && imgCanvasFallbackIncompatibleProps.has(key));
+const formatPropList = (props) => {
+    return props.map((prop) => `"${prop}"`).join(', ');
+};
+const validateCanvasImageFallbackProps = ({ props, ref, width, height, }) => {
+    if (typeof width === 'string' || typeof height === 'string') {
+        throw new Error('The "width" and "height" props must be numbers on <Img> when effects are passed, because <Img> renders a <CanvasImage>. Use numeric props or CSS dimensions in "style".');
+    }
+    const conflictingProps = getIncompatiblePropNames(props);
+    if (ref !== null && ref !== undefined) {
+        conflictingProps.unshift('ref');
+    }
+    if (conflictingProps.length === 0) {
+        return;
+    }
+    throw new Error(`The ${formatPropList(conflictingProps)} prop${conflictingProps.length === 1 ? '' : 's'} cannot be used on <Img> when effects are passed, because <Img> renders a <canvas> instead of a native <img>. Remove ${conflictingProps.length === 1 ? 'this prop' : 'these props'}.`);
+};
+const getFitFromObjectFit = (style) => {
+    const objectFit = style === null || style === void 0 ? void 0 : style.objectFit;
+    if (objectFit === 'fill' ||
+        objectFit === 'contain' ||
+        objectFit === 'cover') {
+        return objectFit;
+    }
+    return undefined;
+};
+const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+    var _a;
+    if (effects.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, durationInFrames: durationInFrames, _experimentalControls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds }));
+    }
+    if (!src) {
+        throw new Error('No "src" prop was passed to <Img>.');
+    }
+    validateCanvasImageFallbackProps({
+        props,
+        ref,
+        width,
+        height,
+    });
+    const canvasWidth = typeof width === 'number' ? width : undefined;
+    const canvasHeight = typeof height === 'number' ? height : undefined;
+    const canvasProps = props;
+    const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
+    return ((0, jsx_runtime_1.jsx)(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _experimentalControls: controls, ...canvasProps }));
+};
 /*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
  * @see [Documentation](https://remotion.dev/docs/img)
  */
-exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)(ImgInner, imgSchema);
+exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)(ImgInner, exports.imgSchema);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Img);

package/dist/cjs/Sequence.d.ts

@@ -62,6 +62,10 @@ export type SequencePropsWithoutDuration = {
         type: 'image';
         src: string;
     };
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalRefForOutline?: React.RefObject<HTMLElement | null> | null;
 } & LayoutAndStyle;
 export type SequenceProps = {
     readonly durationInFrames?: number;

package/dist/cjs/Sequence.js

@@ -4,7 +4,6 @@ exports.Sequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
-const react_2 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const freeze_js_1 = require("./freeze.js");
 const nonce_js_1 = require("./nonce.js");
@@ -18,7 +17,7 @@ const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
-const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, _remotionInternalRefForOutline: refForOutline, ...other }, ref) => {
     var _a;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -66,11 +65,34 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         return ((parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmounting) ||
             Boolean(other._remotionInternalIsPostmounting));
     }, [other._remotionInternalIsPostmounting, parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmounting]);
+    // `cumulatedNegativeFrom` answers: "How many frames of this media have
+    // already elapsed before the first visible frame of this sequence?"
+    //
+    // This is intentionally based on the effective sequence start, not on adding
+    // all negative `from` values. See the asset-calculation tests for:
+    // - "Should calculate startFrom correctly with negative offset (Html5Audio)"
+    // - "same as above, but with <Sequence from={0}> inbetween"
+    // - "same as above, but a positive child offset cancels part of the negative parent offset"
+    //
+    // In particular, <Sequence from={-20}><Sequence from={10}> should have a
+    // 10-frame pre-roll, because the positive child offset cancels part of the
+    // negative parent offset. But <Sequence from={10}><Sequence from={-5}>
+    // should still trim 5 frames from the media once the parent starts.
+    const currentSequenceStart = cumulatedFrom + from;
+    const parentSequenceStart = parentSequence
+        ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
+        : 0;
+    const parentFirstFrame = parentSequence
+        ? parentSequenceStart - parentSequence.cumulatedNegativeFrom
+        : 0;
+    const firstFrame = Math.max(0, parentFirstFrame, currentSequenceStart);
+    const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
     const contextValue = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         return {
             cumulatedFrom,
             relativeFrom: from,
+            cumulatedNegativeFrom,
             durationInFrames: actualDurationInFrames,
             parentFrom: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0,
             id,
@@ -93,6 +115,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         postmounting,
         premountDisplay,
         postmountDisplay,
+        cumulatedNegativeFrom,
     ]);
     const timelineClipName = (0, react_1.useMemo)(() => {
         return name !== null && name !== void 0 ? name : '';
@@ -102,7 +125,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const inheritedStack = (_a = other === null || other === void 0 ? void 0 : other.stack) !== null && _a !== void 0 ? _a : null;
     // Our assumption: Stack doesnt' change. After we symbolicate we assign it a nodePath
     // and if it changes, it would lead to-remounting of the sequence.
-    const stackRef = (0, react_2.useRef)(null);
+    const stackRef = (0, react_1.useRef)(null);
     stackRef.current = stack !== null && stack !== void 0 ? stack : inheritedStack;
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
@@ -129,6 +152,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     showInTimeline,
                     src: isMedia.src,
                     getStack: () => stackRef.current,
+                    refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                 });
             }
             else {
@@ -154,6 +178,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     getStack: () => stackRef.current,
                     startMediaFrom: isMedia.data.startMediaFrom,
                     volume: isMedia.data.volumes,
+                    refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                 });
             }
             return () => {
@@ -177,6 +202,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
             controls: controls !== null && controls !== void 0 ? controls : null,
             effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
+            refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
         });
         return () => {
             unregisterSequence(id);
@@ -202,6 +228,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         _remotionInternalEffects,
         isMedia,
         resolvedDocumentationLink,
+        refForOutline,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958

package/dist/cjs/SequenceContext.d.ts

@@ -1,6 +1,7 @@
 export declare const SequenceContext: import("react").Context<SequenceContextType | null>;
 export type SequenceContextType = {
     cumulatedFrom: number;
+    cumulatedNegativeFrom: number;
     relativeFrom: number;
     parentFrom: number;
     durationInFrames: number;

package/dist/cjs/audio/AudioForPreview.js

@@ -135,6 +135,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
         loopDisplay: undefined,
         documentationLink: name === undefined ? 'https://www.remotion.dev/docs/html5-audio' : null,
+        refForOutline: null,
     });
     // putting playback before useVolume
     // because volume looks at playbackrate

package/dist/cjs/audio/AudioForRendering.js

@@ -65,7 +65,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             mediaFrame: frame,
             playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : 1,
-            audioStartFrame: Math.max(0, -((_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _b !== void 0 ? _b : 0)),
+            audioStartFrame: Math.max(0, -((_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedNegativeFrom) !== null && _b !== void 0 ? _b : 0)),
             audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0,
         });
         return () => unregisterRenderAsset(id);
@@ -82,7 +82,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         playbackRate,
         props.playbackRate,
         toneFrequency,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedNegativeFrom,
         audioStreamIndex,
     ]);
     const { src } = props;

package/dist/cjs/audio/use-audio-frame.js

@@ -8,8 +8,7 @@ const use_current_frame_js_1 = require("../use-current-frame.js");
 const useMediaStartsAt = () => {
     var _a;
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const startsAt = Math.min(0, (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0);
-    return startsAt;
+    return (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _a !== void 0 ? _a : 0;
 };
 exports.useMediaStartsAt = useMediaStartsAt;
 /**

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -1,7 +1,49 @@
 import type { EffectsProp } from '../effects/effect-types.js';
+import type { CanvasImageCanvasProps } from './props.js';
+export declare const canvasImageSchema: {
+    readonly hidden: import("../sequence-field-schema.js").SequenceFieldSchema;
+    readonly 'style.translate': {
+        readonly type: "translate";
+        readonly step: 1;
+        readonly default: "0px 0px";
+        readonly description: "Offset";
+    };
+    readonly 'style.scale': {
+        readonly type: "number";
+        readonly min: 0.05;
+        readonly max: 100;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Scale";
+    };
+    readonly 'style.rotate': {
+        readonly type: "rotation";
+        readonly step: 1;
+        readonly default: "0deg";
+        readonly description: "Rotation";
+    };
+    readonly 'style.opacity': {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Opacity";
+    };
+    readonly fit: {
+        readonly type: "enum";
+        readonly default: "fill";
+        readonly description: "Fit";
+        readonly variants: {
+            readonly fill: {};
+            readonly contain: {};
+            readonly cover: {};
+        };
+    };
+};
 export declare const CanvasImage: import("react").ComponentType<Pick<import("../Sequence.js").SequenceProps, "hidden" | "name" | "durationInFrames" | "from" | "showInTimeline"> & {
     readonly stack?: string;
-} & {
+} & CanvasImageCanvasProps & {
     readonly src: string;
     readonly width?: number;
     readonly height?: number;
@@ -15,4 +57,5 @@ export declare const CanvasImage: import("react").ComponentType<Pick<import("../
     readonly maxRetries?: number;
     readonly delayRenderRetries?: number;
     readonly delayRenderTimeoutInMilliseconds?: number;
+    readonly _remotionInternalDocumentationLink?: string;
 } & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasImage = void 0;
+exports.CanvasImage = exports.canvasImageSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const calculate_image_fit_js_1 = require("../calculate-image-fit.js");
@@ -8,15 +8,15 @@ const run_effect_chain_js_1 = require("../effects/run-effect-chain.js");
 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 Img_js_1 = require("../Img.js");
 const prefetch_js_1 = require("../prefetch.js");
 const sequence_field_schema_js_1 = require("../sequence-field-schema.js");
 const Sequence_js_1 = require("../Sequence.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
+const truncate_src_for_label_js_1 = require("../truncate-src-for-label.js");
 const use_buffer_state_js_1 = require("../use-buffer-state.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const wrap_in_schema_js_1 = require("../wrap-in-schema.js");
-const canvasImageSchema = {
+exports.canvasImageSchema = {
     fit: {
         type: 'enum',
         default: 'fill',
@@ -65,14 +65,14 @@ const loadImage = ({ src, signal, }) => {
                 const imageWidth = image.naturalWidth || image.width;
                 const imageHeight = image.naturalHeight || image.height;
                 if (imageWidth <= 0 || imageHeight <= 0) {
-                    settle(() => reject(new Error(`Could not determine dimensions for <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(src)}"`)));
+                    settle(() => reject(new Error(`Could not determine dimensions for <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(src)}"`)));
                     return;
                 }
                 settle(() => resolve({ element: image, width: imageWidth, height: imageHeight }));
             });
         };
         image.onerror = () => {
-            settle(() => reject(new Error(`Could not load <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(src)}"`)));
+            settle(() => reject(new Error(`Could not load <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(src)}"`)));
         };
         signal.addEventListener('abort', onAbort, { once: true });
         if (signal.aborted) {
@@ -86,7 +86,7 @@ const loadImage = ({ src, signal, }) => {
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, }, ref) => {
+const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...canvasProps }, ref) => {
     var _a;
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -119,7 +119,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         }
         const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
         const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
-        const handle = delayRender(`Rendering <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(actualSrc)}"`, {
+        const handle = delayRender(`Rendering <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}"`, {
             retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
         });
@@ -182,7 +182,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                 if (errorCount <= maxRetries) {
                     const backoff = exponentialBackoff(errorCount);
                     // eslint-disable-next-line no-console
-                    console.warn(`Could not load <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(actualSrc)}", retrying in ${backoff}ms`);
+                    console.warn(`Could not load <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}", retrying in ${backoff}ms`);
                     timeoutId = setTimeout(() => {
                         if (!cancelled) {
                             attemptLoad();
@@ -228,20 +228,20 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         sourceCanvas,
         width,
     ]);
-    return ((0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
+    return ((0, jsx_runtime_1.jsx)("canvas", { ...canvasProps, ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
 });
 CanvasImageContent.displayName = 'CanvasImageContent';
-const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, hidden, name, showInTimeline, stack, _experimentalControls: controls, }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, hidden, name, showInTimeline, stack, _experimentalControls: controls, _remotionInternalDocumentationLink, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, children: (0, jsx_runtime_1.jsx)(CanvasImageContent, { ref: ref, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: style, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds }) }));
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, children: (0, jsx_runtime_1.jsx)(CanvasImageContent, { ref: ref, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: style, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...canvasProps }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
  * @see [Documentation](https://www.remotion.dev/docs/canvasimage)
  */
-exports.CanvasImage = (0, wrap_in_schema_js_1.wrapInSchema)(CanvasImageInner, canvasImageSchema);
+exports.CanvasImage = (0, wrap_in_schema_js_1.wrapInSchema)(CanvasImageInner, exports.canvasImageSchema);
 exports.CanvasImage.displayName = 'CanvasImage';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.CanvasImage);

package/dist/cjs/canvas-image/props.d.ts

@@ -8,7 +8,8 @@ type CanvasImageSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from'
      */
     readonly stack?: string;
 };
-export type CanvasImageProps = CanvasImageSequenceProps & {
+export type CanvasImageCanvasProps = Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'children' | 'height' | 'onError' | 'width'>;
+export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps & {
     readonly src: string;
     readonly width?: number;
     readonly height?: number;
@@ -22,5 +23,9 @@ export type CanvasImageProps = CanvasImageSequenceProps & {
     readonly maxRetries?: number;
     readonly delayRenderRetries?: number;
     readonly delayRenderTimeoutInMilliseconds?: number;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalDocumentationLink?: string;
 };
 export {};

package/dist/cjs/effects/Solid.js

@@ -32,8 +32,9 @@ const solidSchema = {
         description: 'Height',
     },
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
+    hidden: sequence_field_schema_js_1.hiddenField,
 };
-const SolidInner = ({ color, width, height, effects = [], className, style, overrideId, ref, }) => {
+const SolidInner = ({ color, width, height, effects = [], className, style, overrideId, reference, }) => {
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
@@ -52,13 +53,13 @@ const SolidInner = ({ color, width, height, effects = [], className, style, over
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
     const canvasRef = (0, react_1.useCallback)((canvas) => {
         setOutputCanvas(canvas);
-        if (typeof ref === 'function') {
-            ref(canvas);
+        if (typeof reference === 'function') {
+            reference(canvas);
         }
-        else if (ref) {
-            ref.current = canvas;
+        else if (reference) {
+            reference.current = canvas;
         }
-    }, [ref]);
+    }, [reference]);
     // Fill source and run effect chain on every frame / color change.
     (0, react_1.useEffect)(() => {
         if (!outputCanvas || !sourceCanvas) {
@@ -118,7 +119,11 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControl
     var _a;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/solid' : undefined, ...props, children: (0, jsx_runtime_1.jsx)(SolidInner, { ref: ref, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects }) }));
+    const actualRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return actualRef.current;
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalRefForOutline: actualRef, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/solid' : undefined, ...props, children: (0, jsx_runtime_1.jsx)(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects }) }));
 });
 exports.Solid = (0, wrap_in_schema_js_1.wrapInSchema)(SolidOuter, solidSchema);
 exports.Solid.displayName = 'Solid';

package/dist/cjs/internals.d.ts

@@ -270,7 +270,7 @@ export declare const Internals: {
     readonly getRoot: () => import("react").FC<{}> | null;
     readonly useMediaVolumeState: () => readonly [number, (u: number) => void];
     readonly useMediaMutedState: () => readonly [boolean, (u: React.SetStateAction<boolean>) => void];
-    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, }: {
+    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, }: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         mediaVolume: number;
         src: string | undefined;
@@ -284,6 +284,7 @@ export declare const Internals: {
         postmountDisplay: number | null;
         loopDisplay: import("./CompositionManager.js").LoopDisplay | undefined;
         documentationLink: string | null;
+        refForOutline: React.RefObject<HTMLElement | null> | null;
     }) => void;
     readonly useLazyComponent: <Props>({ compProps, componentName, noSuspense, }: {
         compProps: CompProps<Props>;

package/dist/cjs/interpolate.js

@@ -66,8 +66,8 @@ function checkValidInputRange(arr) {
     }
 }
 function checkInfiniteRange(name, arr) {
-    if (arr.length < 2) {
-        throw new Error(name + ' must have at least 2 elements');
+    if (arr.length < 1) {
+        throw new Error(name + ' must have at least 1 element');
     }
     for (const element of arr) {
         if (typeof element !== 'number') {
@@ -143,6 +143,9 @@ function interpolate(input, inputRange, outputRange, options) {
     if (typeof input !== 'number') {
         throw new TypeError('Cannot interpolate an input which is not a number');
     }
+    if (inputRange.length === 1) {
+        return outputRange[0];
+    }
     const range = findRange(input, inputRange);
     return interpolateFunction(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
         easing: resolveEasingForSegment(range),