remotion 4.0.502 → 4.0.503

package/dist/cjs/interpolate-translate.d.ts

@@ -0,0 +1,8 @@
+import { type InterpolateOptions } from './interpolate.js';
+export type InterpolateTranslateOptions = InterpolateOptions;
+export declare const interpolateTranslate: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: Partial<{
+    easing: import("./interpolate.js").EasingFunction | readonly import("./interpolate.js").EasingFunction[];
+    extrapolateLeft: import("./interpolate.js").ExtrapolateType;
+    extrapolateRight: import("./interpolate.js").ExtrapolateType;
+    posterize: number;
+}> | undefined) => string;

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/loading-indicator.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loading = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
+const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
 const rotate = {
     transform: `rotate(90deg)`,
 };
@@ -17,7 +17,7 @@ const container = {
     alignItems: 'center',
 };
 const Loading = () => {
-    return (jsx_runtime_1.jsxs(AbsoluteFill_js_1.AbsoluteFill, { style: container, id: "remotion-comp-loading", children: [
+    return (jsx_runtime_1.jsxs(AbsoluteFillElement_js_1.AbsoluteFillElement, { style: container, id: "remotion-comp-loading", children: [
             jsx_runtime_1.jsx("style", { type: "text/css", children: `
 				@keyframes anim {
 					from {

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

@@ -0,0 +1,425 @@
+export type HiddenFieldSchema = {
+    type: 'hidden';
+    keyframable?: boolean;
+};
+export type NumberFieldSchema = {
+    type: 'number';
+    min?: number;
+    max?: number;
+    step?: number;
+    default: number | null | undefined;
+    description?: string;
+    hiddenFromList: boolean;
+    keyframable?: boolean;
+};
+export type BooleanFieldSchema = {
+    type: 'boolean';
+    default: boolean;
+    description?: string;
+    keyframable?: boolean;
+};
+export type RotationCssFieldSchema = {
+    type: 'rotation-css';
+    step?: number;
+    default: string | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type RotationDegreesFieldSchema = {
+    type: 'rotation-degrees';
+    min?: number;
+    max?: number;
+    step?: number;
+    default: number | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type TranslateFieldSchema = {
+    type: 'translate';
+    step?: number;
+    default: string | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type TransformOriginFieldSchema = {
+    type: 'transform-origin';
+    step?: number;
+    default: string | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type ScaleFieldSchema = {
+    type: 'scale';
+    min?: number;
+    max?: number;
+    step?: number;
+    default: number | string | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type UvCoordinateFieldSchema = {
+    type: 'uv-coordinate';
+    min?: number;
+    max?: number;
+    step?: number;
+    lineTo?: string;
+    default: readonly [number, number] | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type ColorFieldSchema = {
+    type: 'color';
+    default: string | undefined;
+    description?: string;
+    keyframable?: boolean;
+};
+export type EnumFieldSchema = {
+    type: 'enum';
+    default: string;
+    description?: string;
+    variants: Record<string, SequenceSchema>;
+    keyframable?: boolean;
+};
+export type NumberArrayItemSchema = Omit<NumberFieldSchema, 'default' | 'description' | 'hiddenFromList' | 'keyframable'>;
+export type BooleanArrayItemSchema = Omit<BooleanFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type RotationCssArrayItemSchema = Omit<RotationCssFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type RotationDegreesArrayItemSchema = Omit<RotationDegreesFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type TranslateArrayItemSchema = Omit<TranslateFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type UvCoordinateArrayItemSchema = Omit<UvCoordinateFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type ColorArrayItemSchema = Omit<ColorFieldSchema, 'default' | 'description' | 'keyframable'>;
+export type EnumArrayItemSchema = {
+    type: 'enum';
+    variants: readonly string[];
+};
+export type ArrayItemFieldSchema = NumberArrayItemSchema | BooleanArrayItemSchema | RotationCssArrayItemSchema | RotationDegreesArrayItemSchema | TranslateArrayItemSchema | UvCoordinateArrayItemSchema | ColorArrayItemSchema | EnumArrayItemSchema;
+export type ArrayFieldSchema = {
+    type: 'array';
+    item: ArrayItemFieldSchema;
+    default: readonly unknown[] | undefined;
+    minLength?: number;
+    maxLength?: number;
+    newItemDefault: unknown;
+    description?: string;
+    keyframable?: false;
+};
+export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | ArrayFieldSchema | EnumFieldSchema;
+export type SequenceFieldSchema = VisibleFieldSchema | HiddenFieldSchema;
+export type SequenceSchema = {
+    [key: string]: SequenceFieldSchema;
+};
+export type SchemaKeysRecord<S extends SequenceSchema> = Record<keyof S, unknown>;
+export declare const sequenceVisualStyleSchema: {
+    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;
+    };
+};
+export declare const sequencePremountSchema: {
+    readonly premountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Premount For";
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: false;
+    };
+    readonly postmountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly styleWhilePremounted: {
+        readonly type: "hidden";
+    };
+    readonly styleWhilePostmounted: {
+        readonly type: "hidden";
+    };
+};
+export declare const sequenceStyleSchema: {
+    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 premountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Premount For";
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: false;
+    };
+    readonly postmountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly styleWhilePremounted: {
+        readonly type: "hidden";
+    };
+    readonly styleWhilePostmounted: {
+        readonly type: "hidden";
+    };
+};
+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;
+    readonly min: 1;
+    readonly step: 1;
+    readonly hiddenFromList: true;
+};
+export declare const fromField: {
+    readonly type: "number";
+    readonly default: 0;
+    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;
+        readonly min: 1;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly layout: {
+        readonly type: "enum";
+        readonly default: "absolute-fill";
+        readonly description: "Layout";
+        readonly variants: {
+            readonly 'absolute-fill': {
+                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 premountFor: {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly description: "Premount For";
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly hiddenFromList: false;
+                };
+                readonly postmountFor: {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly hiddenFromList: true;
+                };
+                readonly styleWhilePremounted: {
+                    readonly type: "hidden";
+                };
+                readonly styleWhilePostmounted: {
+                    readonly type: "hidden";
+                };
+            };
+            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;
+        readonly min: 1;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly layout: {
+        readonly type: "enum";
+        readonly default: "absolute-fill";
+        readonly description: "Layout";
+        readonly variants: {
+            readonly 'absolute-fill': {
+                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 premountFor: {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly description: "Premount For";
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly hiddenFromList: false;
+                };
+                readonly postmountFor: {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly hiddenFromList: true;
+                };
+                readonly styleWhilePremounted: {
+                    readonly type: "hidden";
+                };
+                readonly styleWhilePostmounted: {
+                    readonly type: "hidden";
+                };
+            };
+            readonly none: {};
+        };
+    };
+} & {
+    name: SequenceFieldSchema;
+};
+export declare const sequenceSchemaDefaultLayoutNone: SequenceSchema;

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

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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',
+        step: 1,
+        default: '50% 50%',
+        description: 'Transform origin',
+    },
+    'style.translate': {
+        type: 'translate',
+        step: 1,
+        default: '0px 0px',
+        description: 'Offset',
+    },
+    'style.scale': {
+        type: 'scale',
+        max: 100,
+        step: 0.01,
+        default: 1,
+        description: 'Scale',
+    },
+    'style.rotate': {
+        type: 'rotation-css',
+        step: 1,
+        default: '0deg',
+        description: 'Rotation',
+    },
+    'style.opacity': {
+        type: 'number',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        default: 1,
+        description: 'Opacity',
+        hiddenFromList: false,
+    },
+};
+exports.sequencePremountSchema = {
+    premountFor: {
+        type: 'number',
+        default: 0,
+        description: 'Premount For',
+        min: 0,
+        step: 1,
+        hiddenFromList: false,
+    },
+    postmountFor: {
+        type: 'number',
+        default: 0,
+        min: 0,
+        step: 1,
+        hiddenFromList: true,
+    },
+    styleWhilePremounted: {
+        type: 'hidden',
+    },
+    styleWhilePostmounted: {
+        type: 'hidden',
+    },
+};
+exports.sequenceStyleSchema = {
+    ...exports.sequenceVisualStyleSchema,
+    ...exports.sequencePremountSchema,
+};
+exports.hiddenField = {
+    type: 'boolean',
+    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,
+    min: 1,
+    step: 1,
+    hiddenFromList: true,
+};
+exports.fromField = {
+    type: 'number',
+    default: 0,
+    step: 1,
+    hiddenFromList: true,
+};
+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',
+        default: 'absolute-fill',
+        description: 'Layout',
+        variants: {
+            'absolute-fill': exports.sequenceStyleSchema,
+            none: {},
+        },
+    },
+});
+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: {
+        ...exports.sequenceSchema.layout,
+        default: 'none',
+    },
+};

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.502";
+export declare const VERSION = "4.0.503";

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.502';
+exports.VERSION = '4.0.503';

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { SequenceControls } from './CompositionManager.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[];
+export declare const mergeValues: ({ props, valuesDotNotation, schemaKeys, propsToDelete, }: {
+    props: Record<string, unknown>;
+    valuesDotNotation: Record<string, unknown>;
+    schemaKeys: string[];
+    propsToDelete: Set<string>;
+}) => Record<string, unknown>;
+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>;