remotion 4.0.475 → 4.0.477

package/dist/cjs/interpolate-translate.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateTranslate = void 0;
+const interpolate_js_1 = require("./interpolate.js");
+const pixelValueRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))px$/;
+const parseTranslate = (value) => {
+    if (typeof value !== 'string') {
+        throw new TypeError(`outputRange must contain only strings, but got ${typeof value}`);
+    }
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        throw new TypeError(`translate values must contain 1 to 3 pixel values, but got "${value}"`);
+    }
+    return parts.map((part) => {
+        const match = pixelValueRegex.exec(part);
+        if (match === null) {
+            throw new TypeError(`interpolateTranslate() only supports px values, but got "${part}" in "${value}"`);
+        }
+        return Number(match[1]);
+    });
+};
+/*
+ * @description Allows you to map a range of values to CSS translate values using pixel units.
+ * @see [Documentation](https://remotion.dev/docs/interpolate-translate)
+ */
+const interpolateTranslate = (input, inputRange, outputRange, options) => {
+    var _a;
+    if (typeof input === 'undefined') {
+        throw new TypeError('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new TypeError('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new TypeError('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new TypeError('inputRange (' +
+            inputRange.length +
+            ' values provided) and outputRange (' +
+            outputRange.length +
+            ' values provided) must have the same length');
+    }
+    const parsedOutputRange = outputRange.map((translateValue) => parseTranslate(translateValue));
+    const firstValueLength = (_a = parsedOutputRange[0]) === null || _a === void 0 ? void 0 : _a.length;
+    if (firstValueLength === undefined) {
+        throw new TypeError('outputRange must have at least 1 element');
+    }
+    for (const parsedTranslate of parsedOutputRange) {
+        if (parsedTranslate.length !== firstValueLength) {
+            throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${parsedTranslate.length}`);
+        }
+    }
+    return new Array(firstValueLength)
+        .fill(true)
+        .map((_, index) => {
+        const outputValues = [];
+        for (const translateValue of parsedOutputRange) {
+            const value = translateValue[index];
+            if (value === undefined) {
+                throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${translateValue.length}`);
+            }
+            outputValues.push(value);
+        }
+        const interpolatedValue = (0, interpolate_js_1.interpolate)(input, inputRange, outputValues, options);
+        return `${interpolatedValue}px`;
+    })
+        .join(' ');
+};
+exports.interpolateTranslate = interpolateTranslate;

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,12 +63,19 @@ 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;
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly freeze: {
+            readonly type: "number";
+            readonly default: null;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly durationInFrames: {
             readonly type: "number";
             readonly default: undefined;
@@ -141,6 +148,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

@@ -7,7 +7,7 @@ export type NumberFieldSchema = {
     min?: number;
     max?: number;
     step?: number;
-    default: number | undefined;
+    default: number | null | undefined;
     description?: string;
     hiddenFromList: boolean;
     keyframable?: boolean;
@@ -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;
@@ -238,14 +242,27 @@ export declare const fromField: {
     readonly step: 1;
     readonly hiddenFromList: true;
 };
+export declare const freezeField: {
+    readonly type: "number";
+    readonly default: null;
+    readonly step: 1;
+    readonly hiddenFromList: true;
+};
 export declare const sequenceSchema: {
     readonly hidden: BooleanFieldSchema;
+    readonly showInTimeline: HiddenFieldSchema;
     readonly from: {
         readonly type: "number";
         readonly default: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -318,9 +335,18 @@ export declare const sequenceSchema: {
             readonly none: {};
         };
     };
+} & {
+    name: SequenceFieldSchema;
 };
 export declare const sequenceSchemaWithoutFrom: {
     readonly hidden: BooleanFieldSchema;
+    readonly showInTimeline: HiddenFieldSchema;
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -393,5 +419,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.freezeField = 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,9 +95,17 @@ exports.fromField = {
     step: 1,
     hiddenFromList: true,
 };
-exports.sequenceSchema = {
+exports.freezeField = {
+    type: 'number',
+    default: null,
+    step: 1,
+    hiddenFromList: true,
+};
+exports.sequenceSchema = (0, exports.extendSchemaWithSequenceName)({
     hidden: exports.hiddenField,
+    showInTimeline: showInTimelineField,
     from: exports.fromField,
+    freeze: exports.freezeField,
     durationInFrames: exports.durationInFramesField,
     layout: {
         type: 'enum',
@@ -95,12 +116,14 @@ exports.sequenceSchema = {
             none: {},
         },
     },
-};
-exports.sequenceSchemaWithoutFrom = {
+});
+exports.sequenceSchemaWithoutFrom = (0, exports.extendSchemaWithSequenceName)({
     hidden: exports.hiddenField,
+    showInTimeline: showInTimelineField,
+    freeze: exports.freezeField,
     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' | 'freeze'> & LayoutAndStyle>;
 declare const SeriesSequence: React.ForwardRefExoticComponent<SeriesSequenceProps & React.RefAttributes<HTMLDivElement>>;
 type SeriesProps = SequenceProps;
 /**

package/dist/cjs/series/index.js

@@ -67,6 +67,7 @@ const SeriesInner = (props) => {
  */
 const Series = Object.assign((0, wrap_in_schema_js_1.wrapInSchema)({
     Component: SeriesInner,
+    componentIdentity: 'dev.remotion.remotion.Series',
     schema: sequence_field_schema_js_1.sequenceSchemaDefaultLayoutNone,
     supportsEffects: false,
 }), {

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.477";

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.477';

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[];
@@ -10,10 +10,11 @@ export declare const mergeValues: ({ props, valuesDotNotation, schemaKeys, props
     schemaKeys: string[];
     propsToDelete: Set<string>;
 }) => Record<string, unknown>;
-export declare const wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, schema, supportsEffects, }: {
+export declare const wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
     Component: React.ComponentType<Props & {
         readonly _experimentalControls: SequenceControls | undefined;
     }>;
+    componentIdentity: string | null;
     schema: S;
     supportsEffects: boolean;
 }) => React.ComponentType<Props>;

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");
@@ -97,9 +98,10 @@ const mergeValues = ({ props, valuesDotNotation, schemaKeys, propsToDelete, }) =
 };
 exports.mergeValues = mergeValues;
 const stackToOverrideMap = {};
-const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
+const wrapInSchema = ({ Component, componentIdentity, 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,17 +156,18 @@ 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,
+                componentIdentity,
             };
         }, [currentRuntimeValueDotNotation, overrideId]);
         // 3. Apply drag/code overrides on top of the runtime values.
         // 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 +183,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,