remotion 4.0.520 → 4.0.522

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/use-media-playback.js

@@ -101,6 +101,11 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     // and it is also in a useLayoutEffect.
     (0, react_1.useLayoutEffect)(() => {
         const playbackRateToSet = Math.max(0, playbackRate);
+        // Loading a resource resets playbackRate to defaultPlaybackRate.
+        if (mediaRef.current &&
+            mediaRef.current.defaultPlaybackRate !== playbackRateToSet) {
+            mediaRef.current.defaultPlaybackRate = playbackRateToSet;
+        }
         if (mediaRef.current &&
             mediaRef.current.playbackRate !== playbackRateToSet) {
             mediaRef.current.playbackRate = playbackRateToSet;

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

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.520';
+exports.VERSION = '4.0.522';

package/dist/cjs/video-config.d.ts

@@ -16,3 +16,4 @@ export type VideoConfig = {
     defaultProResProfile: ProResProfile | null;
     defaultSampleRate: number | null;
 };
+export type VideoConfigValues = Pick<VideoConfig, 'durationInFrames' | 'fps' | 'height' | 'width'>;

package/dist/cjs/with-interactivity-schema.js

@@ -47,6 +47,7 @@ const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_schema_js_1 = require("./use-schema.js");
+const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const getNestedValue = (obj, key) => {
     const parts = key.split('.');
     let current = obj;
@@ -156,6 +157,24 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
         const nodePathMapping = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
+        const durationInFrames = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames;
+        const fps = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.fps;
+        const height = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.height;
+        const width = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.width;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const videoConfigValues = (0, react_1.useMemo)(() => durationInFrames === undefined ||
+            fps === undefined ||
+            height === undefined ||
+            width === undefined
+            ? null
+            : {
+                durationInFrames,
+                fps,
+                height,
+                width,
+            }, [durationInFrames, fps, height, width]);
         // If the parent has passed `controls`, we should not override it.
         // @ts-expect-error
         if (cleanProps.controls) {
@@ -212,12 +231,18 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
                 schema: schemaWithSequenceName,
                 currentRuntimeValueDotNotation,
                 runtimeValues: runtimeValueStore.store,
+                videoConfigValues,
                 overrideId,
                 supportsEffects,
                 componentIdentity,
                 componentName,
             };
-        }, [currentRuntimeValueDotNotation, overrideId, runtimeValueStore.store]);
+        }, [
+            currentRuntimeValueDotNotation,
+            overrideId,
+            runtimeValueStore.store,
+            videoConfigValues,
+        ]);
         (0, enable_sequence_stack_traces_js_1.setStackForControls)(controls, internalStack);
         // 3. Apply drag/code overrides on top of the runtime values.
         // eslint-disable-next-line react-hooks/rules-of-hooks

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