remotion 4.0.475 → 4.0.476

package/dist/cjs/HtmlInCanvas.js

@@ -290,9 +290,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
                 node;
         }
     }, [ref]);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: name === undefined
-            ? 'https://www.remotion.dev/docs/remotion/html-in-canvas'
-            : undefined, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalRefForOutline: 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 }) }));
+    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", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalRefForOutline: 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 = {

package/dist/cjs/Img.js

@@ -187,7 +187,7 @@ const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durati
     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, _remotionInternalStack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, _remotionInternalRefForOutline: 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, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, _remotionInternalRefForOutline: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, ...props }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -254,7 +254,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, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _experimentalControls: controls, _remotionInternalRefForOutline: 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, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _experimentalControls: controls, _remotionInternalRefForOutline: 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.js

@@ -62,7 +62,7 @@ const makeInteractiveElement = (tag, displayName) => {
             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, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, _experimentalControls: _experimentalControls, _remotionInternalStack: stack, _remotionInternalRefForOutline: 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, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, _experimentalControls: _experimentalControls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", _remotionInternalRefForOutline: refForOutline, children: react_1.default.createElement(tag, {
                 ...props,
                 ref: callbackRef,
             }) }));

package/dist/cjs/Sequence.js

@@ -20,7 +20,7 @@ const v5_flag_js_1 = require("./v5-flag.js");
 const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 const EMPTY_EFFECTS = [];
 const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, _remotionInternalRefForOutline: refForOutline, ...other }, ref) => {
-    var _a;
+    var _a, _b;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -28,6 +28,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     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}`);
@@ -92,6 +93,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const contextValue = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         return {
+            absoluteFrom,
             cumulatedFrom,
             relativeFrom: from,
             cumulatedNegativeFrom,
@@ -107,6 +109,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         };
     }, [
         cumulatedFrom,
+        absoluteFrom,
         from,
         actualDurationInFrames,
         parentSequence,
@@ -122,10 +125,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const timelineClipName = (0, react_1.useMemo)(() => {
         return name !== null && name !== void 0 ? name : '';
     }, [name]);
-    const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : (name === undefined ? 'https://www.remotion.dev/docs/sequence' : null);
+    const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : 'https://www.remotion.dev/docs/sequence';
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const isInsideSeries = (0, react_1.useContext)(is_inside_series_js_1.IsInsideSeriesContext);
-    const inheritedStack = (_a = other === null || other === void 0 ? void 0 : other.stack) !== null && _a !== void 0 ? _a : null;
+    const inheritedStack = (_b = other === null || other === void 0 ? void 0 : other.stack) !== null && _b !== void 0 ? _b : null;
     // Our assumption: Stack doesnt' change. After we symbolicate we assign it a nodePath
     // and if it changes, it would lead to-remounting of the sequence.
     const stackRef = (0, react_1.useRef)(null);

package/dist/cjs/SequenceContext.d.ts

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

package/dist/cjs/audio/AudioForPreview.js

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

package/dist/cjs/easing.d.ts

@@ -1,3 +1,5 @@
+import type { SpringConfig } from './spring/spring-utils.js';
+export type EasingSpringConfig = Partial<Pick<SpringConfig, 'damping' | 'mass' | 'stiffness' | 'overshootClamping'>>;
 /**
  * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
  * @see [Documentation](https://www.remotion.dev/docs/easing)
@@ -15,6 +17,7 @@ export declare class Easing {
     static exp(t: number): number;
     static elastic(bounciness?: number): (t: number) => number;
     static back(s?: number): (t: number) => number;
+    static spring(config?: EasingSpringConfig): (t: number) => number;
     static bounce(t: number): number;
     static bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
     static in(easing: (t: number) => number): (t: number) => number;

package/dist/cjs/easing.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Easing = void 0;
 const bezier_js_1 = require("./bezier.js");
+const index_js_1 = require("./spring/index.js");
 // Some easing curves are only defined on [0, 1] (e.g. quarter circle, bounce segments).
 // `interpolate(..., { extrapolate: 'extend' })` can pass values outside that interval; clamp
 // there so we return endpoints instead of NaN or unintended extrapolation.
 const clampUnit = (t) => Math.min(1, Math.max(0, t));
+const springEasingDurationInFrames = 30;
 /**
  * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
  * @see [Documentation](https://www.remotion.dev/docs/easing)
@@ -50,6 +52,22 @@ class Easing {
     static back(s = 1.70158) {
         return (t) => t * t * ((s + 1) * t - s);
     }
+    static spring(config = {}) {
+        return (t) => {
+            if (t <= 0) {
+                return 0;
+            }
+            if (t >= 1) {
+                return 1;
+            }
+            return (0, index_js_1.spring)({
+                fps: springEasingDurationInFrames,
+                frame: t * springEasingDurationInFrames,
+                config,
+                durationInFrames: springEasingDurationInFrames,
+            });
+        };
+    }
     static bounce(t) {
         const u = clampUnit(t);
         if (u < 1 / 2.75) {

package/dist/cjs/effects/Solid.js

@@ -148,7 +148,7 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControl
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalRefForOutline: actualRef, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/solid' : undefined, ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalRefForOutline: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
 });
 exports.Solid = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: SolidOuter,

package/dist/cjs/internals.d.ts

@@ -86,6 +86,7 @@ export declare const Internals: {
     }) => import("react").ComponentType<Props>;
     readonly sequenceSchema: {
         readonly hidden: import("./sequence-field-schema.js").BooleanFieldSchema;
+        readonly showInTimeline: import("./sequence-field-schema.js").HiddenFieldSchema;
         readonly from: {
             readonly type: "number";
             readonly default: 0;
@@ -164,6 +165,8 @@ export declare const Internals: {
                 readonly none: {};
             };
         };
+    } & {
+        name: SequenceFieldSchema;
     };
     readonly SequenceWithoutSchema: import("react").ForwardRefExoticComponent<import("./Sequence.js").SequenceProps & import("react").RefAttributes<HTMLDivElement>>;
     readonly sequenceStyleSchema: {

package/dist/cjs/loop/index.js

@@ -84,7 +84,7 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, showInTimeli
             durationInFrames,
         };
     }, [currentFrame, durationInFrames]);
-    return (jsx_runtime_1.jsx(LoopContext.Provider, { value: loopContext, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/loop' : undefined, _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, showInTimeline: showInTimeline, children: children }) }));
+    return (jsx_runtime_1.jsx(LoopContext.Provider, { value: loopContext, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/loop", _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, showInTimeline: showInTimeline, children: children }) }));
 };
 exports.Loop = Loop;
 exports.Loop.useLoop = useLoop;

package/dist/cjs/no-react.d.ts

@@ -63,6 +63,7 @@ export declare const NoReactInternals: {
     }) => string[];
     sequenceSchema: {
         readonly hidden: import("./sequence-field-schema").BooleanFieldSchema;
+        readonly showInTimeline: import("./sequence-field-schema").HiddenFieldSchema;
         readonly from: {
             readonly type: "number";
             readonly default: 0;
@@ -141,6 +142,8 @@ export declare const NoReactInternals: {
                 readonly none: {};
             };
         };
+    } & {
+        name: import("./sequence-field-schema").SequenceFieldSchema;
     };
     parseScaleValue: (value: unknown) => import("./scale-value").ScaleValue;
     serializeScaleValue: ([x, y, z]: import("./scale-value").ScaleValue) => string | number;

package/dist/cjs/sequence-field-schema.d.ts

@@ -225,6 +225,10 @@ export declare const sequenceStyleSchema: {
     };
 };
 export declare const hiddenField: SequenceFieldSchema;
+export declare const sequenceNameField: SequenceFieldSchema;
+export declare const extendSchemaWithSequenceName: <S extends SequenceSchema>(schema: S) => S & {
+    name: SequenceFieldSchema;
+};
 export declare const durationInFramesField: {
     readonly type: "number";
     readonly default: undefined;
@@ -240,6 +244,7 @@ export declare const fromField: {
 };
 export declare const sequenceSchema: {
     readonly hidden: BooleanFieldSchema;
+    readonly showInTimeline: HiddenFieldSchema;
     readonly from: {
         readonly type: "number";
         readonly default: 0;
@@ -318,9 +323,12 @@ export declare const sequenceSchema: {
             readonly none: {};
         };
     };
+} & {
+    name: SequenceFieldSchema;
 };
 export declare const sequenceSchemaWithoutFrom: {
     readonly hidden: BooleanFieldSchema;
+    readonly showInTimeline: HiddenFieldSchema;
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -393,5 +401,7 @@ export declare const sequenceSchemaWithoutFrom: {
             readonly none: {};
         };
     };
+} & {
+    name: SequenceFieldSchema;
 };
 export declare const sequenceSchemaDefaultLayoutNone: SequenceSchema;

package/dist/cjs/sequence-field-schema.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.sequenceSchema = exports.fromField = exports.durationInFramesField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.sequenceVisualStyleSchema = void 0;
+exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.sequenceSchema = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.sequenceVisualStyleSchema = void 0;
 exports.sequenceVisualStyleSchema = {
     'style.transformOrigin': {
         type: 'transform-origin',
@@ -69,6 +69,19 @@ exports.hiddenField = {
     default: false,
     description: 'Hidden',
 };
+const showInTimelineField = {
+    type: 'hidden',
+};
+exports.sequenceNameField = {
+    type: 'hidden',
+};
+const extendSchemaWithSequenceName = (schema) => {
+    return {
+        name: exports.sequenceNameField,
+        ...schema,
+    };
+};
+exports.extendSchemaWithSequenceName = extendSchemaWithSequenceName;
 exports.durationInFramesField = {
     type: 'number',
     default: undefined,
@@ -82,8 +95,9 @@ exports.fromField = {
     step: 1,
     hiddenFromList: true,
 };
-exports.sequenceSchema = {
+exports.sequenceSchema = (0, exports.extendSchemaWithSequenceName)({
     hidden: exports.hiddenField,
+    showInTimeline: showInTimelineField,
     from: exports.fromField,
     durationInFrames: exports.durationInFramesField,
     layout: {
@@ -95,12 +109,13 @@ exports.sequenceSchema = {
             none: {},
         },
     },
-};
-exports.sequenceSchemaWithoutFrom = {
+});
+exports.sequenceSchemaWithoutFrom = (0, exports.extendSchemaWithSequenceName)({
     hidden: exports.hiddenField,
+    showInTimeline: showInTimelineField,
     durationInFrames: exports.durationInFramesField,
     layout: exports.sequenceSchema.layout,
-};
+});
 exports.sequenceSchemaDefaultLayoutNone = {
     ...exports.sequenceSchema,
     layout: {

package/dist/cjs/series/index.d.ts

@@ -4,7 +4,7 @@ type SeriesSequenceProps = PropsWithChildren<{
     readonly durationInFrames: number;
     readonly offset?: number;
     readonly className?: string;
-} & Pick<SequenceProps, 'layout' | 'name' | 'hidden'> & LayoutAndStyle>;
+} & Pick<SequenceProps, 'layout' | 'name' | 'hidden' | 'showInTimeline'> & LayoutAndStyle>;
 declare const SeriesSequence: React.ForwardRefExoticComponent<SeriesSequenceProps & React.RefAttributes<HTMLDivElement>>;
 type SeriesProps = SequenceProps;
 /**

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.475";
+export declare const VERSION = "4.0.476";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.475';
+exports.VERSION = '4.0.476';

package/dist/cjs/video/VideoForPreview.js

@@ -131,11 +131,9 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         premountDisplay: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premountDisplay) !== null && _c !== void 0 ? _c : null,
         postmountDisplay: (_d = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmountDisplay) !== null && _d !== void 0 ? _d : null,
         loopDisplay: undefined,
-        documentationLink: name === undefined
-            ? onlyWarnForMediaSeekingError
-                ? 'https://www.remotion.dev/docs/offthreadvideo'
-                : 'https://www.remotion.dev/docs/html5-video'
-            : null,
+        documentationLink: onlyWarnForMediaSeekingError
+            ? 'https://www.remotion.dev/docs/offthreadvideo'
+            : 'https://www.remotion.dev/docs/html5-video',
         refForOutline: videoRef,
     });
     // putting playback before useVolume
@@ -282,6 +280,6 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         requestsVideoFrame: Boolean(onVideoFrame),
         isClientSideRendering: false,
     });
-    return (jsx_runtime_1.jsx("video", { ref: videoRef, muted: muted || mediaMuted || userPreferredVolume <= 0, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, ...nativeProps }));
+    return (jsx_runtime_1.jsx("video", { ...nativeProps, ref: videoRef, muted: muted || mediaMuted || userPreferredVolume <= 0, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, controls: false }));
 };
 exports.VideoForPreview = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);

package/dist/cjs/wrap-in-schema.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SequenceControls } from './CompositionManager.js';
-import type { SequenceSchema } from './sequence-field-schema.js';
+import { type SequenceSchema } from './sequence-field-schema.js';
 export declare const getNestedValue: (obj: Record<string, unknown>, key: string) => unknown;
 export declare const readValuesFromProps: (props: Record<string, unknown>, keys: string[]) => Record<string, unknown>;
 export declare const selectActiveKeys: (schema: SequenceSchema, values: Record<string, unknown>) => string[];

package/dist/cjs/wrap-in-schema.js

@@ -38,6 +38,7 @@ const react_1 = __importStar(require("react"));
 const delete_nested_key_js_1 = require("./delete-nested-key.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const flatten_schema_js_1 = require("./flatten-schema.js");
+const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
 const sequence_node_path_js_1 = require("./sequence-node-path.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
@@ -99,7 +100,8 @@ exports.mergeValues = mergeValues;
 const stackToOverrideMap = {};
 const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
     // Schema is static for a component, so we move this outside
-    const flatSchema = (0, flatten_schema_js_1.getFlatSchemaWithAllKeys)(schema);
+    const schemaWithSequenceName = (0, sequence_field_schema_js_1.extendSchemaWithSequenceName)(schema);
+    const flatSchema = (0, flatten_schema_js_1.getFlatSchemaWithAllKeys)(schemaWithSequenceName);
     const flatKeys = Object.keys(flatSchema);
     const Wrapped = (0, react_1.forwardRef)((props, ref) => {
         var _a;
@@ -154,7 +156,7 @@ const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const controls = (0, react_1.useMemo)(() => {
             return {
-                schema,
+                schema: schemaWithSequenceName,
                 currentRuntimeValueDotNotation,
                 overrideId,
                 supportsEffects,
@@ -164,7 +166,7 @@ const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const { merged: valuesDotNotation, propsToDelete } = (0, react_1.useMemo)(() => {
             return (0, use_schema_js_1.computeEffectiveSchemaValuesDotNotation)({
-                schema,
+                schema: schemaWithSequenceName,
                 currentValue: currentRuntimeValueDotNotation,
                 overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
                 propStatus: nodePath === null
@@ -180,7 +182,7 @@ const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
             frame,
         ]);
         // 4. Eliminate values forbidden by the resolved discriminated union.
-        const activeKeys = (0, exports.selectActiveKeys)(schema, valuesDotNotation);
+        const activeKeys = (0, exports.selectActiveKeys)(schemaWithSequenceName, valuesDotNotation);
         // 5. Apply the active values back onto the props.
         const mergedProps = (0, exports.mergeValues)({
             props: props,