remotion 4.0.479 → 4.0.482

package/dist/cjs/CompositionManager.d.ts

@@ -59,9 +59,11 @@ export type SequenceControls = {
     overrideId: string;
     supportsEffects: boolean;
     componentIdentity: JsxComponentIdentity | null;
+    componentName: string;
 };
 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");
@@ -137,13 +137,6 @@ 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;
@@ -293,14 +286,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.
@@ -260,6 +260,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
  */
 exports.Img = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: ImgInner,
+    componentName: '<Img>',
     componentIdentity: 'dev.remotion.remotion.Img',
     schema: exports.imgSchema,
     supportsEffects: true,

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;
@@ -193,10 +278,11 @@ export declare const Interactive: {
             };
         };
     };
-    withSchema: <S extends InteractivitySchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
+    withSchema: <S extends InteractivitySchema, Props extends object>({ Component, componentName, componentIdentity, schema, supportsEffects, }: {
         Component: React.ComponentType<Props & {
             readonly controls: SequenceControls | undefined;
         }>;
+        componentName: string;
         componentIdentity: string | null;
         schema: S;
         supportsEffects: boolean;

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,
             }) }));
@@ -68,6 +69,7 @@ const makeInteractiveElement = (tag, displayName) => {
     Inner.displayName = displayName;
     const Wrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
         Component: Inner,
+        componentName: displayName,
         componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
         schema: interactiveElementSchema,
         supportsEffects: false,
@@ -82,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,
@@ -377,12 +396,14 @@ exports.SequenceWithoutSchema = SequenceInner;
  */
 exports.Sequence = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SequenceInner,
+    componentName: '<Sequence>',
     componentIdentity: 'dev.remotion.remotion.Sequence',
     schema: interactivity_schema_js_1.sequenceSchema,
     supportsEffects: false,
 });
 exports.SequenceWithoutFrom = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SequenceInner,
+    componentName: '<Sequence>',
     componentIdentity: null,
     schema: interactivity_schema_js_1.sequenceSchemaWithoutFrom,
     supportsEffects: false,

package/dist/cjs/animated-image/AnimatedImage.js

@@ -175,6 +175,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
 };
 exports.AnimatedImage = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: AnimatedImageInner,
+    componentName: '<AnimatedImage>',
     componentIdentity: 'dev.remotion.remotion.AnimatedImage',
     schema: animatedImageSchema,
     supportsEffects: true,

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/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;

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

@@ -281,7 +281,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     return (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, freeze, hidden, name, showInTimeline, stack, controls, _remotionInternalDocumentationLink, outlineRef, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, stack, controls, _remotionInternalDocumentationLink, outlineRef, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
@@ -290,7 +290,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
-    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, 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', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, 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, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }));
+    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, 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', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, 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, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
@@ -298,6 +298,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
  */
 exports.CanvasImage = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: CanvasImageInner,
+    componentName: '<CanvasImage>',
     componentIdentity: 'dev.remotion.remotion.CanvasImage',
     schema: exports.canvasImageSchema,
     supportsEffects: true,