remotion 4.0.529 → 4.0.531

package/dist/cjs/AbsoluteFill.d.ts

@@ -243,7 +243,7 @@ export declare const absoluteFillSchema: {
     readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
     readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
 };
-export declare const AbsoluteFill: React.ComponentType<Omit<AbsoluteFillElementProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "playbackRate" | "showInTimeline" | "trimBefore"> & InteractiveBaseProps & InteractivePremountProps & {
+export declare const AbsoluteFill: React.ComponentType<Omit<AbsoluteFillElementProps, "durationInFrames" | "freeze" | "from" | "hidden" | "loop" | "name" | "playbackRate" | "showInTimeline" | "trimBefore"> & InteractiveBaseProps & InteractivePremountProps & {
     /**
      * @deprecated For internal use only
      */

package/dist/cjs/AbsoluteFill.js

@@ -7,6 +7,7 @@ const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const freeze_js_1 = require("./freeze.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");
 const use_premounting_js_1 = require("./use-premounting.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
@@ -29,11 +30,15 @@ const setRef = (ref, value) => {
         ref.current = value;
     }
 };
-const AbsoluteFillWithTiming = ({ ref: callbackRef, outlineRef: refForOutline, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, durationInFrames, hidden, name, showInTimeline, stack, controls, children, ...divProps }) => {
+const AbsoluteFillWithTiming = ({ ref: callbackRef, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, durationInFrames, hidden, name, showInTimeline, stack, controls, children, ...divProps }) => {
     var _a;
     const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
         from: from !== null && from !== void 0 ? from : 0,
-        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        durationInFrames: (0, resolve_sequence_duration_js_1.resolveSequenceDuration)({
+            durationInFrames,
+            playbackRate,
+            loop,
+        }),
         premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
         postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
         style: (_a = divProps.style) !== null && _a !== void 0 ? _a : null,
@@ -41,19 +46,17 @@ const AbsoluteFillWithTiming = ({ ref: callbackRef, outlineRef: refForOutline, f
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'opacity',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, playbackRate: playbackRate, freeze: freeze, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, name: name !== null && name !== void 0 ? name : '<AbsoluteFill>', showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/absolute-fill", outlineRef: refForOutline, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, children: children }) }) }));
+    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", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<AbsoluteFill>', showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/absolute-fill", _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, children: children }) }) }));
 };
-const AbsoluteFillInner = ({ ref, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, durationInFrames, hidden, name, showInTimeline, stack, controls, children, ...divProps }) => {
+const AbsoluteFillInner = ({ ref, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, durationInFrames, hidden, name, showInTimeline, stack, controls, children, ...divProps }) => {
     const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
-    const refForOutline = (0, react_1.useRef)(null);
     const callbackRef = (0, react_1.useCallback)((element) => {
-        refForOutline.current = element;
         setRef(ref, element);
     }, [ref]);
     if (videoConfig === null) {
         return hidden ? null : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, children: children }));
     }
-    return (jsx_runtime_1.jsx(AbsoluteFillWithTiming, { ...divProps, ref: callbackRef, outlineRef: refForOutline, from: from, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, trimBefore: trimBefore, playbackRate: playbackRate, freeze: freeze, durationInFrames: durationInFrames, hidden: hidden, name: name, showInTimeline: showInTimeline, stack: stack, controls: controls, children: children }));
+    return (jsx_runtime_1.jsx(AbsoluteFillWithTiming, { ...divProps, ref: callbackRef, from: from, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, durationInFrames: durationInFrames, hidden: hidden, name: name, showInTimeline: showInTimeline, stack: stack, controls: controls, children: children }));
 };
 /*
  * @description A helper component which renders an absolutely positioned <div> element with full width, height, and flex display suited for content layering.

package/dist/cjs/HtmlInCanvas.d.ts

@@ -3,24 +3,41 @@ import type { EffectsProp } from './effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps } from './Interactive.js';
 import type { AbsoluteFillLayout } from './Sequence.js';
 declare global {
+    interface DrawElementImageOptions {
+        preserveElementGeometry?: boolean;
+    }
+    interface WebGLCopyElementImageConfig {
+        sx?: GLfloat;
+        sy?: GLfloat;
+        swidth?: GLfloat;
+        sheight?: GLfloat;
+        width?: GLsizei;
+        height?: GLsizei;
+    }
+    interface UpdateElementGeometryOptions {
+        preserveHitTestOrder?: boolean;
+        clip?: DOMRectInit;
+        canvasTransform?: DOMMatrixInit;
+    }
     interface ElementImage {
         readonly width: number;
         readonly height: number;
         close(): void;
     }
     interface CanvasRenderingContext2D {
-        drawElementImage(element: Element | ElementImage, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number, options?: DrawElementImageOptions): void;
     }
     interface OffscreenCanvasRenderingContext2D {
-        drawElementImage(element: Element | ElementImage, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number, options?: DrawElementImageOptions): void;
     }
     interface WebGLRenderingContextBase {
+        texElementSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, element: Element | ElementImage, config?: WebGLCopyElementImageConfig): void;
         texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, format: GLenum, type: GLenum, element: Element | ElementImage): void;
         texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, element: Element | ElementImage): void;
         texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, sx: GLfloat, sy: GLfloat, swidth: GLfloat, sheight: GLfloat, format: GLenum, type: GLenum, element: Element | ElementImage): void;
@@ -30,11 +47,18 @@ declare global {
         paint: Event;
     }
     interface HTMLCanvasElement {
+        content: string;
         layoutSubtree?: boolean;
         onpaint: ((this: HTMLCanvasElement, ev: Event) => unknown) | null;
         requestPaint?(): void;
         captureElementImage(element: Element): ElementImage;
-        getElementTransform(element: Element | ElementImage, drawTransform: DOMMatrix): DOMMatrix;
+        updateElementGeometry(element: Element | ElementImage, options?: UpdateElementGeometryOptions): void;
+        clearElementGeometry(element: Element | ElementImage): void;
+        getElementTransform(element: Element): DOMMatrix;
+    }
+    interface OffscreenCanvas {
+        updateElementGeometry(element: Element | ElementImage, options?: UpdateElementGeometryOptions): void;
+        clearElementGeometry(element: Element | ElementImage): void;
     }
 }
 export type HtmlInCanvasOnPaintParams = {
@@ -48,8 +72,9 @@ export type HtmlInCanvasOnPaintParams = {
     readonly pixelDensity: number;
 };
 export declare const isHtmlInCanvasSupported: () => boolean;
-/** Shown when {@link isHtmlInCanvasSupported} is false: APIs are absent (old Chrome and/or flag off). */
-export declare const HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome).";
+/** Generic fallback for consumers that cannot inspect the current browser. */
+export declare const HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas requires Chrome 149 or newer with Canvas Draw Element enabled at chrome://flags/#canvas-draw-element.";
+export declare const getHtmlInCanvasUnsupportedMessage: () => string;
 export type HtmlInCanvasOnPaint = (params: HtmlInCanvasOnPaintParams) => void | Promise<void>;
 export type HtmlInCanvasOnInitCleanup = () => void;
 export type HtmlInCanvasOnInit = (params: HtmlInCanvasOnPaintParams) => HtmlInCanvasOnInitCleanup | Promise<HtmlInCanvasOnInitCleanup>;

package/dist/cjs/HtmlInCanvas.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasSupported = void 0;
+exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.getHtmlInCanvasUnsupportedMessage = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
@@ -9,6 +9,7 @@ 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 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");
 const use_crop_style_js_1 = require("./use-crop-style.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
@@ -53,8 +54,43 @@ const isHtmlInCanvasSupported = () => {
     return cachedSupport;
 };
 exports.isHtmlInCanvasSupported = isHtmlInCanvasSupported;
-/** Shown when {@link isHtmlInCanvasSupported} is false: APIs are absent (old Chrome and/or flag off). */
-exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = 'HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome).';
+/** Generic fallback for consumers that cannot inspect the current browser. */
+exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = 'HTML in Canvas requires Chrome 149 or newer with Canvas Draw Element enabled at chrome://flags/#canvas-draw-element.';
+const getHtmlInCanvasUnsupportedMessage = () => {
+    var _a;
+    if (typeof document === 'undefined') {
+        return `HTML in Canvas is unavailable because there is no browser document. ${exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE}`;
+    }
+    const userAgent = typeof navigator === 'undefined' ? '' : navigator.userAgent;
+    const chromiumVersion = (_a = userAgent.match(/(?:Chrome|Chromium)\/(\d+)/)) === null || _a === void 0 ? void 0 : _a[1];
+    let browser = 'this browser';
+    if (userAgent.includes('Edg/')) {
+        browser = 'Microsoft Edge';
+    }
+    else if (userAgent.includes('Chromium/')) {
+        browser = 'Chromium';
+    }
+    else if (chromiumVersion) {
+        browser = 'Chrome';
+    }
+    else if (userAgent.includes('Firefox/')) {
+        browser = 'Firefox';
+    }
+    else if (userAgent.includes('Safari/')) {
+        browser = 'Safari';
+    }
+    if (chromiumVersion && Number(chromiumVersion) >= 149) {
+        const flagUrl = browser === 'Microsoft Edge'
+            ? 'edge://flags/#canvas-draw-element'
+            : 'chrome://flags/#canvas-draw-element';
+        return `HTML in Canvas is unavailable. Enable Canvas Draw Element at ${flagUrl} and fully restart ${browser}.`;
+    }
+    if (chromiumVersion) {
+        return `HTML in Canvas is not supported in ${browser} ${chromiumVersion}. Use a Chromium-based browser running version 149 or newer.`;
+    }
+    return `HTML in Canvas is not supported in ${browser}. Use Chrome 149 or newer.`;
+};
+exports.getHtmlInCanvasUnsupportedMessage = getHtmlInCanvasUnsupportedMessage;
 function assertHtmlInCanvasDimensions(width, height) {
     if (typeof width !== 'number' || typeof height !== 'number') {
         throw new Error(`HtmlInCanvas: \`width\` and \`height\` must be numbers. Received width=${String(width)}, height=${String(height)}.`);
@@ -89,14 +125,13 @@ const resizePaintTarget = ({ target, width, height, }) => {
         target.height = height;
     }
 };
-const defaultOnPaint = ({ canvas, element, elementImage, }) => {
+const defaultOnPaint = ({ canvas, elementImage, }) => {
     const ctx = canvas.getContext('2d');
     if (!ctx) {
         throw new Error('Failed to acquire 2D context for <HtmlInCanvas> canvas');
     }
     ctx.reset();
-    const transform = ctx.drawElementImage(elementImage, 0, 0);
-    element.style.transform = transform.toString();
+    ctx.drawElementImage(elementImage, 0, 0);
 };
 /* eslint-enable react/require-default-props */
 const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
@@ -115,7 +150,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
     const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
     if (!(0, exports.isHtmlInCanvasSupported)()) {
-        cancelRender(new Error(exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
+        cancelRender(new Error((0, exports.getHtmlInCanvasUnsupportedMessage)()));
     }
     const canvas2dRef = (0, react_1.useRef)(null);
     const paintTargetRef = (0, react_1.useRef)(null);
@@ -258,14 +293,18 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                         pixelDensity: resolvedPixelDensity,
                     });
                 }
-                await (0, run_effect_chain_js_1.runEffectChain)({
-                    state: chainState.get(canvasWidth, canvasHeight),
-                    source: paintTarget,
-                    effects: effectsRef.current,
-                    output: paintTarget,
-                    width: canvasWidth,
-                    height: canvasHeight,
-                });
+                // `null` once unmounted, e.g. when an async `onPaint` resolves late.
+                const state = chainState.get(canvasWidth, canvasHeight);
+                if (state) {
+                    await (0, run_effect_chain_js_1.runEffectChain)({
+                        state,
+                        source: paintTarget,
+                        effects: effectsRef.current,
+                        output: paintTarget,
+                        width: canvasWidth,
+                        height: canvasHeight,
+                    });
+                }
             }
             finally {
                 elImage.close();
@@ -288,11 +327,14 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     // Default paint handlers draw synchronously on the layout canvas itself.
     // Custom handlers retain the transferred OffscreenCanvas API.
     (0, react_1.useLayoutEffect)(() => {
+        var _a;
         const placeholder = canvas2dRef.current;
         if (!placeholder) {
             throw new Error('Canvas not found');
         }
+        placeholder.setAttribute('content', 'drawable');
         placeholder.layoutSubtree = true;
+        (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('drawable', '');
         const paintTarget = usesDirectLayoutCanvas
             ? placeholder
             : getTransferredOffscreenCanvas(placeholder);
@@ -379,7 +421,11 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
     }, [ref]);
     const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
         from: (_a = sequenceProps.from) !== null && _a !== void 0 ? _a : 0,
-        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        durationInFrames: (0, resolve_sequence_duration_js_1.resolveSequenceDuration)({
+            durationInFrames,
+            playbackRate: sequenceProps.playbackRate,
+            loop: sequenceProps.loop,
+        }),
         premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
         postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
         style: style !== null && style !== void 0 ? style : null,
@@ -395,7 +441,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, 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, outlineRef: actualRef, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, 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 (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(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, 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/Img.js

@@ -9,6 +9,7 @@ const freeze_js_1 = require("./freeze.js");
 const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const prefetch_js_1 = require("./prefetch.js");
+const resolve_sequence_duration_js_1 = require("./resolve-sequence-duration.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");
@@ -22,7 +23,7 @@ const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js")
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const ImgContent = ({ onError, onImageError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, refForOutline, ...props }) => {
+const ImgContent = ({ onError, onImageError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, ...props }) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -34,14 +35,13 @@ const ImgContent = ({ onError, onImageError, maxRetries = 2, src, pauseWhenLoadi
     }
     const imageCallbackRef = (0, react_1.useCallback)((img) => {
         imageRef.current = img;
-        refForOutline.current = img;
         if (typeof ref === 'function') {
             ref(img);
         }
         else if (ref) {
             ref.current = img;
         }
-    }, [ref, refForOutline]);
+    }, [ref]);
     const actualSrc = (0, prefetch_js_1.usePreload)(src);
     const retryIn = (0, react_1.useCallback)((timeout) => {
         if (!imageRef.current) {
@@ -198,7 +198,7 @@ const ImgContent = ({ onError, onImageError, maxRetries = 2, src, pauseWhenLoadi
     // blocks frame rendering.
     return (jsx_runtime_1.jsx("img", { ...props, ref: imageCallbackRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
-const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, controls, outlineRef: refForOutline, ...props }) => {
+const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, loop, durationInFrames, freeze, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, controls, ...props }) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
@@ -208,7 +208,11 @@ const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, d
     }), [src]);
     const { effectivePostmountFor, effectivePremountFor, freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
         from: from !== null && from !== void 0 ? from : 0,
-        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        durationInFrames: (0, resolve_sequence_duration_js_1.resolveSequenceDuration)({
+            durationInFrames,
+            playbackRate: undefined,
+            loop,
+        }),
         premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
         postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
         style: style !== null && style !== void 0 ? style : null,
@@ -224,7 +228,7 @@ const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, d
         style: premountingStyle,
         componentName: '<Img />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }));
+    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", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, loop: loop, durationInFrames: durationInFrames, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, children: jsx_runtime_1.jsx(ImgContent, { src: src, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -283,10 +287,9 @@ const getFitFromObjectFit = (style) => {
 };
 const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, cropLeft, cropRight, cropTop, cropBottom, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageError, ...props }) => {
     var _a;
-    const refForOutline = (0, react_1.useRef)(null);
     const shouldPauseWhenLoading = (0, v5_flag_js_1.resolveV5Default)(pauseWhenLoading);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, onImageError: onImageError, outlineRef: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, onImageError: onImageError }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -301,7 +304,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, onError: onImageError, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, outlineRef: refForOutline, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, onError: onImageError, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: 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.

package/dist/cjs/Interactive.d.ts

@@ -6,7 +6,7 @@ type InteractiveHtmlTag = 'a' | 'article' | 'aside' | 'button' | 'code' | 'div'
 type InteractiveSvgTag = 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'rect' | 'svg' | 'text';
 type InteractiveTag = InteractiveHtmlTag | InteractiveSvgTag;
 type ElementForTag<Tag extends InteractiveTag> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : Element;
-export type InteractiveBaseProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'trimBefore' | 'playbackRate' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'>;
+export type InteractiveBaseProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'trimBefore' | 'playbackRate' | 'loop' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'>;
 export type InteractiveTransformProps = Pick<AbsoluteFillLayout, 'style'>;
 export type InteractiveCropProps = Pick<SequenceProps, 'cropLeft' | 'cropRight' | 'cropTop' | 'cropBottom'>;
 export type InteractivePremountProps = Pick<AbsoluteFillLayout, 'premountFor' | 'postmountFor' | 'styleWhilePremounted' | 'styleWhilePostmounted'>;
@@ -14,6 +14,25 @@ type InteractiveManagedProps = InteractiveBaseProps & InteractiveCropProps & Int
 type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveManagedProps> & InteractiveManagedProps;
 type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentType<InteractiveElementProps<Tag> & React.RefAttributes<ElementForTag<Tag>>>;
 type RemotionComponentIdentityPackage = 'remotion' | `@remotion/${string}`;
+type NonIntrinsicComponent<Component extends React.ElementType> = Component & React.ComponentType<React.ComponentProps<Component>>;
+type KeysOfUnion<Props> = Props extends unknown ? keyof Props : never;
+type ComponentWithoutReservedProps<Component extends React.ElementType, ReservedKey extends PropertyKey> = NonIntrinsicComponent<Component> & (Extract<KeysOfUnion<React.ComponentPropsWithoutRef<Component>>, ReservedKey> extends never ? unknown : never);
+type WithSchemaReservedKey = keyof InteractiveBaseProps | keyof InteractiveCropProps | keyof InteractivePremountProps | 'controls';
+type IsAny<Value> = 0 extends 1 & Value ? true : false;
+type StyleMemberAcceptsCssProperties<Style> = IsAny<Style> extends true ? true : Style extends unknown ? [Style] extends [null | undefined] ? false : Exclude<keyof React.CSSProperties, keyof Style> extends never ? React.CSSProperties extends Style ? true : false : false : never;
+type StyleAcceptsCssProperties<Style> = true extends StyleMemberAcceptsCssProperties<Style> ? true : false;
+type PropsBranchAcceptsStyle<Props> = Props extends unknown ? 'style' extends keyof Props ? StyleAcceptsCssProperties<Props[Extract<'style', keyof Props>]> : false : never;
+type EveryPropsBranchAcceptsStyle<Props> = [Props] extends [never] ? false : false extends PropsBranchAcceptsStyle<Props> ? false : true;
+type ComponentAcceptingStyle<Component extends React.ElementType, ReservedKey extends PropertyKey> = ComponentWithoutReservedProps<Component, ReservedKey> & (EveryPropsBranchAcceptsStyle<React.ComponentPropsWithoutRef<Component>> extends true ? unknown : never);
+type WithSchema = {
+    <S extends InteractivitySchema, Component extends React.ElementType>(options: Omit<WithInteractivitySchemaOptions<S, React.ComponentPropsWithoutRef<Component>>, 'Component' | 'supportsEffects'> & {
+        readonly Component: ComponentAcceptingStyle<Component, WithSchemaReservedKey>;
+        readonly wrapInSequence: true;
+    }): React.FC<React.ComponentPropsWithRef<Component> & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps>;
+    <S extends InteractivitySchema, Props extends object>(options: WithInteractivitySchemaOptions<S, Props> & {
+        readonly wrapInSequence?: false;
+    }): React.ComponentType<Props>;
+};
 /**
  * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
  */
@@ -573,7 +592,7 @@ export declare const Interactive: {
             };
         };
     };
-    withSchema: <S extends InteractivitySchema, Props extends object>(options: WithInteractivitySchemaOptions<S, Props>) => React.ComponentType<Props>;
+    withSchema: WithSchema;
     _internalMakeRemotionComponentIdentity: ({ packageName, componentName, }: {
         readonly packageName: RemotionComponentIdentityPackage;
         readonly componentName: string;

package/dist/cjs/Interactive.js

@@ -36,9 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Interactive = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const freeze_js_1 = require("./freeze.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");
 const use_crop_style_js_1 = require("./use-crop-style.js");
 const use_premounting_js_1 = require("./use-premounting.js");
@@ -113,17 +115,78 @@ const setRef = (ref, value) => {
         ref.current = value;
     }
 };
-const withSchema = (options) => {
-    const Wrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)(options);
+const withSchema = (untypedOptions) => {
+    const options = untypedOptions;
+    if (!options.wrapInSequence) {
+        const LegacyWrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)(options);
+        (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(LegacyWrapped);
+        return LegacyWrapped;
+    }
+    const { Component, componentName, schema, wrapInSequence: _, ...rest } = options;
+    const ComponentWrappedInSequence = (0, react_1.forwardRef)((props, ref) => {
+        const { canvasContent, compositions } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+        // The render callback runs after the exported wrapper has been initialized.
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        const componentIdentity = (0, enable_sequence_stack_traces_js_1.resolveComponentIdentity)(Wrapped);
+        const isCurrentComposition = compositions.some((composition) => (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' &&
+            composition.id === canvasContent.compositionId &&
+            composition.componentFromProps === componentIdentity);
+        const { durationInFrames, from, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, controls, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, ...componentProps } = props;
+        const { cropLeft, cropRight, cropTop, cropBottom, style, ...componentPropsWithoutCropping } = componentProps;
+        const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
+            from: from !== null && from !== void 0 ? from : 0,
+            durationInFrames: (0, resolve_sequence_duration_js_1.resolveSequenceDuration)({
+                durationInFrames,
+                playbackRate,
+                loop,
+            }),
+            premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
+            postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
+            style: style !== null && style !== void 0 ? style : null,
+            styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+            styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+            hideWhilePremounted: 'opacity',
+        });
+        const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
+            cropLeft,
+            cropRight,
+            cropTop,
+            cropBottom,
+            style: premountingStyle,
+            componentName,
+        });
+        return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { _remotionInternalSingleChildComponent: isCurrentComposition ? null : componentIdentity, layout: "none", durationInFrames: durationInFrames, from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : componentName, showInTimeline: isCurrentComposition ? false : showInTimeline, controls: controls, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(Component, {
+                    ...componentPropsWithoutCropping,
+                    style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
+                    ref,
+                }) }) }));
+    });
+    const Wrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
+        ...rest,
+        Component: ComponentWrappedInSequence,
+        componentName,
+        schema: {
+            ...schema,
+            ...interactivity_schema_js_1.transformSchema,
+            ...interactivity_schema_js_1.baseSchema,
+            ...interactivity_schema_js_1.premountSchema,
+            ...interactivity_schema_js_1.cropSchema,
+        },
+        supportsEffects: false,
+    });
     (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
     return Wrapped;
 };
 const makeInteractiveElement = (tag, displayName, schema) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
-        const { durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, hidden, name, showInTimeline, controls, cropLeft, cropRight, cropTop, cropBottom, style, ...props } = propsWithControls;
+        const { durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, controls, cropLeft, cropRight, cropTop, cropBottom, style, ...props } = propsWithControls;
         const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
             from: from !== null && from !== void 0 ? from : 0,
-            durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+            durationInFrames: (0, resolve_sequence_duration_js_1.resolveSequenceDuration)({
+                durationInFrames,
+                playbackRate,
+                loop,
+            }),
             premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
             postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
             style: style !== null && style !== void 0 ? style : null,
@@ -139,12 +202,10 @@ const makeInteractiveElement = (tag, displayName, schema) => {
             style: premountingStyle,
             componentName: displayName,
         });
-        const refForOutline = (0, react_1.useRef)(null);
         const callbackRef = (0, react_1.useCallback)((element) => {
-            refForOutline.current = element;
             setRef(ref, element);
         }, [ref]);
-        return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, playbackRate: playbackRate, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(tag, {
+        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", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(tag, {
                     ...props,
                     style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
                     ref: callbackRef,

package/dist/cjs/Sequence.d.ts

@@ -25,6 +25,7 @@ export type SequencePropsWithoutDuration = {
     readonly from?: number;
     readonly trimBefore?: number;
     readonly playbackRate?: number;
+    readonly loop?: boolean;
     readonly freeze?: number | null;
     readonly name?: string;
     readonly showInTimeline?: boolean;
@@ -74,8 +75,8 @@ export type SequencePropsWithoutDuration = {
         src: string;
     };
     /**
-     * A React ref pointing to the element that Remotion Studio should use for
-     * drawing the selection outline in the preview.
+     * @deprecated Remotion Studio discovers rendered elements automatically.
+     * Remove this prop.
      */
     readonly outlineRef?: React.RefObject<Element | null> | null;
 } & LayoutAndStyle;