remotion 4.0.481 → 4.0.483

package/dist/cjs/CompositionManager.d.ts

@@ -63,6 +63,7 @@ export type SequenceControls = {
 };
 export type TSequence = {
     from: number;
+    trimBefore: number | null;
     duration: number;
     id: string;
     displayName: string;

package/dist/cjs/HtmlInCanvas.d.ts

@@ -64,6 +64,80 @@ export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & Omit<Ab
     readonly onInit?: HtmlInCanvasOnInit;
     readonly pixelDensity?: HtmlInCanvasPixelDensity;
 };
+export declare const htmlInCanvasSchema: {
+    readonly 'style.transformOrigin': {
+        readonly type: "transform-origin";
+        readonly step: 1;
+        readonly default: "50% 50%";
+        readonly description: "Transform origin";
+    };
+    readonly 'style.translate': {
+        readonly type: "translate";
+        readonly step: 1;
+        readonly default: "0px 0px";
+        readonly description: "Offset";
+    };
+    readonly 'style.scale': {
+        readonly type: "scale";
+        readonly max: 100;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Scale";
+    };
+    readonly 'style.rotate': {
+        readonly type: "rotation-css";
+        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 hiddenFromList: false;
+    };
+    readonly durationInFrames: {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 1;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly from: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema;
+    readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
+    readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
+    readonly pixelDensity: {
+        readonly type: "number";
+        readonly min: 1;
+        readonly max: 3;
+        readonly step: 0.1;
+        readonly default: 1;
+        readonly description: "Pixel density";
+        readonly hiddenFromList: false;
+    };
+};
 export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<InteractiveBaseProps, "children"> & Omit<AbsoluteFillLayout, "layout" | "postmountFor" | "premountFor" | "styleWhilePostmounted" | "styleWhilePremounted"> & {
     readonly durationInFrames?: number | undefined;
     readonly width: number;

package/dist/cjs/HtmlInCanvas.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasSupported = void 0;
+exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const delay_render_js_1 = require("./delay-render.js");
@@ -11,6 +11,7 @@ const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-trace
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 // Memoize the support check across the session — neither the platform
@@ -58,6 +59,10 @@ function resolveHtmlInCanvasPixelDensity(pixelDensity) {
     }
     return pixelDensity;
 }
+const isMissingPaintRecordError = (error) => {
+    return error instanceof DOMException && error.name === 'InvalidStateError';
+};
+const missingPaintRecordMessage = 'HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.';
 const resizeOffscreenCanvas = ({ offscreen, width, height, }) => {
     if (offscreen.width !== width) {
         offscreen.width = width;
@@ -85,6 +90,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
     const canvasHeight = Math.ceil(height * resolvedPixelDensity);
     const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const { isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     if (!(0, exports.isHtmlInCanvasSupported)()) {
         cancelRender(new Error(exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
     }
@@ -137,44 +143,70 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             if (!placeholderCanvas) {
                 throw new Error('Canvas not found');
             }
-            // `GPUQueue.copyElementImageToTexture` / related paths validate the
-            // linked offscreen surface has a rendering context. Acquire `2d` here
-            // before any capture or handler (must not call getContext on placeholder).
-            const offscreen2d = offscreen.getContext('2d');
-            if (!offscreen2d) {
-                throw new Error('Failed to acquire 2D context for <HtmlInCanvas> offscreen canvas');
-            }
             const handle = (0, delay_render_js_1.delayRender)('onPaint');
             if (!initializedRef.current) {
-                initializedRef.current = true;
                 // `onInit` may be async (e.g. WebGPU `requestAdapter`/`requestDevice`).
                 // Capture an `ElementImage` here only for `onInit` consumers — do NOT
                 // reuse it for the paint handler below, because awaiting `onInit`
                 // can invalidate the capture's paint context, leaving subsequent
                 // uploads (e.g. `copyElementImageToTexture`) failing with
                 // "No context found for ElementImage" on the very first paint.
-                const initImage = placeholderCanvas.captureElementImage(element);
-                const currentOnInit = onInitRef.current;
-                if (currentOnInit) {
-                    const cleanup = await currentOnInit({
-                        canvas: offscreen,
-                        element,
-                        elementImage: initImage,
-                        pixelDensity: resolvedPixelDensity,
-                    });
-                    if (typeof cleanup !== 'function') {
-                        throw new Error('HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.');
+                let initImage = null;
+                try {
+                    initImage = placeholderCanvas.captureElementImage(element);
+                }
+                catch (error) {
+                    if (isMissingPaintRecordError(error) && !isRendering) {
+                        // Element may be outside viewport (no cached paint record).
+                        // Skip init — will retry on the next paint cycle.
                     }
-                    if (unmountedRef.current) {
-                        cleanup();
+                    else if (isMissingPaintRecordError(error)) {
+                        throw new Error(missingPaintRecordMessage);
                     }
                     else {
-                        onInitCleanupRef.current = cleanup;
+                        throw error;
+                    }
+                }
+                if (initImage) {
+                    initializedRef.current = true;
+                    const currentOnInit = onInitRef.current;
+                    if (currentOnInit) {
+                        const cleanup = await currentOnInit({
+                            canvas: offscreen,
+                            element,
+                            elementImage: initImage,
+                            pixelDensity: resolvedPixelDensity,
+                        });
+                        if (typeof cleanup !== 'function') {
+                            throw new Error('HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.');
+                        }
+                        if (unmountedRef.current) {
+                            cleanup();
+                        }
+                        else {
+                            onInitCleanupRef.current = cleanup;
+                        }
                     }
                 }
             }
             const handler = (_a = onPaintRef.current) !== null && _a !== void 0 ? _a : defaultOnPaint;
-            const elImage = placeholderCanvas.captureElementImage(element);
+            let elImage;
+            try {
+                elImage = placeholderCanvas.captureElementImage(element);
+            }
+            catch (error) {
+                // `captureElementImage` throws `InvalidStateError` when the
+                // element is outside the viewport (no cached paint record).
+                // Skip this paint cycle — the canvas retains its last state.
+                if (isMissingPaintRecordError(error) && !isRendering) {
+                    continueRender(handle);
+                    return;
+                }
+                if (isMissingPaintRecordError(error)) {
+                    throw new Error(missingPaintRecordMessage);
+                }
+                throw error;
+            }
             await handler({
                 canvas: offscreen,
                 element,
@@ -201,6 +233,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         continueRender,
         cancelRender,
         resolvedPixelDensity,
+        isRendering,
     ]);
     // Transfer control once per layout canvas instance, then listen for paint on
     // the placeholder (capture) while drawing on the linked offscreen surface.
@@ -293,15 +326,24 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
     return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
-const htmlInCanvasSchema = {
+exports.htmlInCanvasSchema = {
     ...interactivity_schema_js_1.baseSchema,
+    pixelDensity: {
+        type: 'number',
+        min: 1,
+        max: 3,
+        step: 0.1,
+        default: 1,
+        description: 'Pixel density',
+        hiddenFromList: false,
+    },
     ...interactivity_schema_js_1.transformSchema,
 };
 const HtmlInCanvasWrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: HtmlInCanvasInner,
     componentName: '<HtmlInCanvas>',
     componentIdentity: 'dev.remotion.remotion.HtmlInCanvas',
-    schema: htmlInCanvasSchema,
+    schema: exports.htmlInCanvasSchema,
     supportsEffects: true,
 });
 exports.HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {

package/dist/cjs/Img.d.ts

@@ -65,6 +65,13 @@ export declare const imgSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;

package/dist/cjs/Img.js

@@ -183,11 +183,11 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     // src gets set once we've loaded and decoded the image.
     return (jsx_runtime_1.jsx("img", { ...props, ref: imageCallbackRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
-const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, freeze, controls, outlineRef: refForOutline, ...props }) => {
+const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, controls, outlineRef: refForOutline, ...props }) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
-    return (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, freeze: freeze, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, 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, ...props }) }));
+    return (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, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, 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, ...props }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -233,11 +233,11 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, durationInFrames, freeze, controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
     var _a;
     const refForOutline = (0, react_1.useRef)(null);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, durationInFrames: durationInFrames, freeze: freeze, controls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, controls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -252,7 +252,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
     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, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/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, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", controls: controls, outlineRef: refForOutline, ...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' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'>;
+export type InteractiveBaseProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'trimBefore' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'>;
 export type InteractiveTransformProps = Pick<AbsoluteFillLayout, 'style'>;
 export type InteractivePremountProps = Pick<AbsoluteFillLayout, 'premountFor' | 'postmountFor' | 'styleWhilePremounted' | 'styleWhilePostmounted'>;
 type InteractiveSequenceProps = InteractiveBaseProps & {
@@ -35,6 +35,13 @@ export declare const Interactive: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly trimBefore: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;
@@ -81,6 +88,77 @@ export declare const Interactive: {
             readonly hiddenFromList: false;
         };
     };
+    textSchema: {
+        readonly 'style.color': {
+            readonly type: "color";
+            readonly default: undefined;
+            readonly description: "Color";
+        };
+        readonly 'style.fontSize': {
+            readonly type: "number";
+            readonly default: undefined;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Font size";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.lineHeight': {
+            readonly type: "number";
+            readonly default: undefined;
+            readonly min: 0;
+            readonly step: 0.05;
+            readonly description: "Line height";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.fontWeight': {
+            readonly type: "enum";
+            readonly default: "400";
+            readonly description: "Font weight";
+            readonly variants: {
+                readonly '100': {};
+                readonly '200': {};
+                readonly '300': {};
+                readonly '400': {};
+                readonly '500': {};
+                readonly '600': {};
+                readonly '700': {};
+                readonly '800': {};
+                readonly '900': {};
+                readonly normal: {};
+                readonly bold: {};
+            };
+        };
+        readonly 'style.fontStyle': {
+            readonly type: "enum";
+            readonly default: "normal";
+            readonly description: "Font style";
+            readonly variants: {
+                readonly normal: {};
+                readonly italic: {};
+                readonly oblique: {};
+            };
+        };
+        readonly 'style.textAlign': {
+            readonly type: "enum";
+            readonly default: "left";
+            readonly description: "Text align";
+            readonly variants: {
+                readonly left: {};
+                readonly center: {};
+                readonly right: {};
+                readonly justify: {};
+                readonly start: {};
+                readonly end: {};
+            };
+        };
+        readonly 'style.letterSpacing': {
+            readonly type: "number";
+            readonly default: undefined;
+            readonly step: 0.1;
+            readonly description: "Letter spacing";
+            readonly hiddenFromList: false;
+        };
+    };
     premountSchema: {
         readonly premountFor: {
             readonly type: "number";
@@ -118,6 +196,13 @@ export declare const Interactive: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly trimBefore: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;

package/dist/cjs/Interactive.js

@@ -43,6 +43,7 @@ const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js")
 const interactiveElementSchema = {
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.transformSchema,
+    ...interactivity_schema_js_1.textSchema,
 };
 const setRef = (ref, value) => {
     if (typeof ref === 'function') {
@@ -54,13 +55,13 @@ const setRef = (ref, value) => {
 };
 const makeInteractiveElement = (tag, displayName) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
-        const { durationInFrames, from, freeze, hidden, name, showInTimeline, stack, controls, ...props } = propsWithControls;
+        const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, stack, controls, ...props } = propsWithControls;
         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(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, 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, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, children: react_1.default.createElement(tag, {
+        return (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, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, children: react_1.default.createElement(tag, {
                 ...props,
                 ref: callbackRef,
             }) }));
@@ -83,6 +84,7 @@ const makeInteractiveElement = (tag, displayName) => {
 exports.Interactive = {
     baseSchema: interactivity_schema_js_1.baseSchema,
     transformSchema: interactivity_schema_js_1.transformSchema,
+    textSchema: interactivity_schema_js_1.textSchema,
     premountSchema: interactivity_schema_js_1.premountSchema,
     sequenceSchema: interactivity_schema_js_1.sequenceSchema,
     withSchema: with_interactivity_schema_js_1.withInteractivitySchema,

package/dist/cjs/Sequence.d.ts

@@ -19,6 +19,7 @@ export type SequencePropsWithoutDuration = {
     readonly width?: number;
     readonly height?: number;
     readonly from?: number;
+    readonly trimBefore?: number;
     readonly freeze?: number | null;
     readonly name?: string;
     readonly showInTimeline?: boolean;

package/dist/cjs/Sequence.js

@@ -19,7 +19,7 @@ const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const EMPTY_EFFECTS = [];
-const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, ...other }, ref) => {
     var _a, _b, _c;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -28,7 +28,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
-    const absoluteFrom = ((_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _a !== void 0 ? _a : 0) + from;
     const nonce = (0, nonce_js_1.useNonce)();
     if (layout !== 'absolute-fill' && layout !== 'none') {
         throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
@@ -51,6 +50,18 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
     if (!Number.isFinite(from)) {
         throw new TypeError(`The "from" prop of a sequence must be finite, but got ${from}.`);
     }
+    if (typeof trimBefore !== 'number') {
+        throw new TypeError(`You passed to the "trimBefore" prop of your <Sequence> an argument of type ${typeof trimBefore}, but it must be a number.`);
+    }
+    if (trimBefore < 0) {
+        throw new TypeError(`The "trimBefore" prop of <Sequence /> must be greater than or equal to 0, but got ${trimBefore}.`);
+    }
+    if (Number.isNaN(trimBefore)) {
+        throw new TypeError('The "trimBefore" prop of <Sequence /> must be a real number, but it is NaN.');
+    }
+    if (!Number.isFinite(trimBefore)) {
+        throw new TypeError(`The "trimBefore" prop of <Sequence /> must be finite, but it is ${trimBefore}.`);
+    }
     if (typeof freeze !== 'undefined' && freeze !== null) {
         if (typeof freeze !== 'number') {
             throw new TypeError(`The "freeze" prop of <Sequence /> must be a number, but is of type ${typeof freeze}.`);
@@ -64,8 +75,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
     }
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
+    const effectiveRelativeFrom = from - trimBefore;
+    const absoluteFrom = ((_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _a !== void 0 ? _a : 0) + effectiveRelativeFrom;
     const parentSequenceDuration = parentSequence
-        ? Math.min(parentSequence.durationInFrames - from, durationInFrames)
+        ? Math.min(parentSequence.durationInFrames - effectiveRelativeFrom, durationInFrames)
         : durationInFrames;
     const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
@@ -96,7 +109,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
     // 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 currentSequenceStart = cumulatedFrom + effectiveRelativeFrom;
     const parentSequenceStart = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
@@ -110,7 +123,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
         return {
             absoluteFrom,
             cumulatedFrom,
-            relativeFrom: from,
+            relativeFrom: effectiveRelativeFrom,
             cumulatedNegativeFrom,
             durationInFrames: actualDurationInFrames,
             parentFrom: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0,
@@ -125,7 +138,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
     }, [
         cumulatedFrom,
         absoluteFrom,
-        from,
+        effectiveRelativeFrom,
         actualDurationInFrames,
         parentSequence,
         id,
@@ -149,6 +162,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
     const stackRef = (0, react_1.useRef)(null);
     stackRef.current = stack !== null && stack !== void 0 ? stack : inheritedStack;
     const registeredFrozenFrame = typeof freeze === 'number' ? freeze : null;
+    const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
     const parentCumulatedNegativeFrom = (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _c !== void 0 ? _c : 0;
     const startMediaFrom = isMedia && isMedia.type !== 'image'
         ? isMedia.data.startMediaFrom +
@@ -182,6 +196,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
                     documentationLink: resolvedDocumentationLink,
                     duration: actualDurationInFrames,
                     from,
+                    trimBefore: registeredTrimBefore,
                     id,
                     loopDisplay,
                     nonce: nonce.get(),
@@ -207,6 +222,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
                     doesVolumeChange: isMedia.data.doesVolumeChange,
                     duration: actualDurationInFrames,
                     from,
+                    trimBefore: registeredTrimBefore,
                     id,
                     loopDisplay,
                     nonce: nonce.get(),
@@ -232,6 +248,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
         }
         registerSequence({
             from,
+            trimBefore: registeredTrimBefore,
             duration: actualDurationInFrames,
             id,
             displayName: timelineClipName,
@@ -265,6 +282,8 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
         actualDurationInFrames,
         rootId,
         from,
+        trimBefore,
+        registeredTrimBefore,
         showInTimeline,
         nonce,
         loopDisplay,

package/dist/cjs/audio/AudioForPreview.js

@@ -66,7 +66,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         throw new Error('typecheck error');
     }
     const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
-    const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
+    const [playerMuted] = (0, volume_position_state_js_1.usePlayerMutedState)();
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     if (!src) {
         throw new TypeError("No 'src' was passed to <Html5Audio>.");
@@ -87,7 +87,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     });
     const propsToPass = (0, react_2.useMemo)(() => {
         return {
-            muted: muted || mediaMuted || userPreferredVolume <= 0,
+            muted: muted || playerMuted || userPreferredVolume <= 0,
             src: preloadedSrc,
             loop: _remotionInternalNativeLoopPassed,
             crossOrigin: crossOriginValue,
@@ -95,7 +95,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         };
     }, [
         _remotionInternalNativeLoopPassed,
-        mediaMuted,
+        playerMuted,
         muted,
         nativeProps,
         preloadedSrc,

package/dist/cjs/audio/html5-audio.js

@@ -22,13 +22,17 @@ const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const audioTagsContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioTagsContext);
-    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, ...otherProps } = props;
-    const { loop, ...propsOtherThanLoop } = props;
+    const propsWithFreeze = props;
+    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, freeze, ...otherProps } = propsWithFreeze;
+    const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     if (environment.isClientSideRendering) {
         throw new Error('<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations');
     }
+    if (typeof freeze !== 'undefined') {
+        throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
+    }
     const { durations, setDurations } = (0, react_1.useContext)(duration_state_js_1.DurationsContext);
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);

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

@@ -49,6 +49,13 @@ export declare const canvasImageSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;