remotion 4.0.472 → 4.0.474

package/dist/cjs/interpolate.js

@@ -261,6 +261,36 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
         dimensions,
     });
 };
+const validateTupleOutputRange = (outputRange) => {
+    var _a;
+    const dimensions = (_a = outputRange[0]) === null || _a === void 0 ? void 0 : _a.length;
+    if (dimensions === undefined) {
+        throw new Error('outputRange must have at least 1 element');
+    }
+    if (dimensions === 0) {
+        throw new TypeError('outputRange tuples must contain at least 1 number');
+    }
+    for (const output of outputRange) {
+        if (output.length !== dimensions) {
+            throw new TypeError(`outputRange tuples must all have the same length, but got ${dimensions} and ${output.length}`);
+        }
+        for (const value of output) {
+            if (typeof value !== 'number' || !Number.isFinite(value)) {
+                throw new TypeError(`outputRange tuples must contain only finite numbers, but got [${output.join(',')}]`);
+            }
+        }
+    }
+    return dimensions;
+};
+const interpolateTuple = ({ input, inputRange, outputRange, options, }) => {
+    const dimensions = validateTupleOutputRange(outputRange);
+    return new Array(dimensions).fill(true).map((_, axis) => interpolateNumber({
+        input,
+        inputRange,
+        outputRange: outputRange.map((output) => output[axis]),
+        options,
+    }));
+};
 function checkValidInputRange(arr) {
     for (let i = 1; i < arr.length; ++i) {
         if (!(arr[i] > arr[i - 1])) {
@@ -342,8 +372,11 @@ function interpolate(input, inputRange, outputRange, options) {
         }
         return interpolateString({ input, inputRange, outputRange, options });
     }
+    if (outputRange.every((output) => Array.isArray(output))) {
+        return interpolateTuple({ input, inputRange, outputRange, options });
+    }
     if (!outputRange.every((output) => typeof output === 'number')) {
-        throw new TypeError('outputRange must contain only numbers, or supported scale, translate, and rotate strings');
+        throw new TypeError('outputRange must contain only numbers, numeric tuples, or supported scale, translate, and rotate strings');
     }
     checkInfiniteRange('outputRange', outputRange);
     return interpolateNumber({ input, inputRange, outputRange, options });

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

@@ -90,7 +90,6 @@ export declare const NoReactInternals: {
                     };
                     readonly 'style.scale': {
                         readonly type: "scale";
-                        readonly min: 0.05;
                         readonly max: 100;
                         readonly step: 0.01;
                         readonly default: 1;

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

@@ -55,6 +55,7 @@ export type UvCoordinateFieldSchema = {
     min?: number;
     max?: number;
     step?: number;
+    lineTo?: string;
     default: readonly [number, number] | undefined;
     description?: string;
     keyframable?: boolean;
@@ -109,7 +110,6 @@ export declare const sequenceVisualStyleSchema: {
     };
     readonly 'style.scale': {
         readonly type: "scale";
-        readonly min: 0.05;
         readonly max: 100;
         readonly step: 0.01;
         readonly default: 1;
@@ -163,7 +163,6 @@ export declare const sequenceStyleSchema: {
     };
     readonly 'style.scale': {
         readonly type: "scale";
-        readonly min: 0.05;
         readonly max: 100;
         readonly step: 0.01;
         readonly default: 1;
@@ -249,7 +248,75 @@ export declare const sequenceSchema: {
                 };
                 readonly 'style.scale': {
                     readonly type: "scale";
-                    readonly min: 0.05;
+                    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: {};
+        };
+    };
+};
+export declare const sequenceSchemaWithoutFrom: {
+    readonly hidden: BooleanFieldSchema;
+    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.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;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sequenceSchemaDefaultLayoutNone = 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.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.sequenceVisualStyleSchema = void 0;
 exports.sequenceVisualStyleSchema = {
     'style.translate': {
         type: 'translate',
@@ -10,7 +10,6 @@ exports.sequenceVisualStyleSchema = {
     },
     'style.scale': {
         type: 'scale',
-        min: 0.05,
         max: 100,
         step: 0.01,
         default: 1,
@@ -91,6 +90,11 @@ exports.sequenceSchema = {
         },
     },
 };
+exports.sequenceSchemaWithoutFrom = {
+    hidden: exports.hiddenField,
+    durationInFrames: exports.durationInFramesField,
+    layout: exports.sequenceSchema.layout,
+};
 exports.sequenceSchemaDefaultLayoutNone = {
     ...exports.sequenceSchema,
     layout: {

package/dist/cjs/series/index.js

@@ -16,6 +16,7 @@ const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
     return jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: children });
 };
 const SeriesSequence = (0, react_1.forwardRef)(SeriesSequenceRefForwardingFunction);
+const SequenceWithoutSchemaWithRef = Sequence_js_1.SequenceWithoutSchema;
 const SeriesInner = (props) => {
     const childrenValue = (0, react_1.useMemo)(() => {
         let startFrame = 0;
@@ -55,7 +56,7 @@ const SeriesInner = (props) => {
             }
             const currentStartFrame = startFrame + offset;
             startFrame += durationInFramesProp + offset;
-            return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
+            return (jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: castedChild.ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, children: child }));
         });
     }, [props.children]);
     return (jsx_runtime_1.jsx(is_inside_series_js_1.IsInsideSeriesContainer, { children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", name: "<Series>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series", ...props, children: childrenValue }) }));
@@ -73,4 +74,3 @@ const Series = Object.assign((0, wrap_in_schema_js_1.wrapInSchema)({
 });
 exports.Series = Series;
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Series);
-(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(SeriesSequence);

package/dist/cjs/timeline-position-state.d.ts

@@ -8,6 +8,7 @@ type CurrentTimePerComposition = Record<string, number>;
 export declare const persistCurrentFrame: (time: CurrentTimePerComposition) => void;
 export declare const getInitialFrameState: () => CurrentTimePerComposition;
 export declare const getFrameForComposition: (composition: string) => number;
+export declare const clampFrameToCompositionRange: (frame: number, durationInFrames: number) => number;
 export declare const useTimelineContext: () => TimelineContextValue;
 export declare const usePlaybackRate: () => PlaybackRateContextValue;
 export declare const useTimelinePosition: () => number;

package/dist/cjs/timeline-position-state.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePlayingState = exports.useTimelineSetFrame = exports.useAbsoluteTimelinePosition = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
+exports.usePlayingState = exports.useTimelineSetFrame = exports.useAbsoluteTimelinePosition = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.clampFrameToCompositionRange = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
 const react_1 = require("react");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -32,6 +32,10 @@ const getFrameForComposition = (composition) => {
     return (_b = window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
 };
 exports.getFrameForComposition = getFrameForComposition;
+const clampFrameToCompositionRange = (frame, durationInFrames) => {
+    return Math.max(0, Math.min(Math.max(0, durationInFrames - 1), frame));
+};
+exports.clampFrameToCompositionRange = clampFrameToCompositionRange;
 const useTimelinePositionFromContext = (state) => {
     var _a, _b;
     const videoConfig = (0, use_video_js_1.useVideo)();
@@ -42,7 +46,7 @@ const useTimelinePositionFromContext = (state) => {
             : ((_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0);
     }
     const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : (env.isPlayer ? 0 : (0, exports.getFrameForComposition)(videoConfig.id));
-    return Math.min(videoConfig.durationInFrames - 1, unclamped);
+    return (0, exports.clampFrameToCompositionRange)(unclamped, videoConfig.durationInFrames);
 };
 const useTimelineContext = () => {
     const state = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);

package/dist/cjs/use-media-in-timeline.d.ts

@@ -38,5 +38,5 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType,
     postmountDisplay: number | null;
     loopDisplay: LoopDisplay | undefined;
     documentationLink: string | null;
-    refForOutline: import("react").RefObject<HTMLElement | null> | null;
+    refForOutline: import("react").RefObject<Element | null> | null;
 }) => void;

package/dist/cjs/use-schema.d.ts

@@ -20,7 +20,6 @@ export type CanUpdateSequencePropStatusComputed = {
 };
 export type CanUpdateSequencePropStatusKeyframed = {
     status: 'keyframed';
-    codeValue: unknown;
     interpolationFunction: CanUpdateSequencePropStatusInterpolationFunction;
     keyframes: CanUpdateSequencePropStatusKeyframe[];
     easing: CanUpdateSequencePropStatusEasing[];
@@ -38,9 +37,9 @@ export type DragOverrideValue = {
 };
 export type DragOverrides = Record<string, Record<string, DragOverrideValue>>;
 export type EffectDragOverrides = Record<string, Record<string, DragOverrideValue>>;
-export type CodeValues = Record<string, CanUpdateSequencePropsResponse>;
-export type GetCodeValues = (nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
-export type GetEffectCodeValues = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, CanUpdateSequencePropStatus> | undefined;
+export type PropStatuses = Record<string, CanUpdateSequencePropsResponse>;
+export type GetPropStatuses = (nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
+export type GetEffectPropStatuses = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, CanUpdateSequencePropStatus> | undefined;
 export type GetDragOverrides = (nodePath: SequencePropsSubscriptionKey) => DragOverrides[string];
 export type GetEffectDragOverrides = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, DragOverrideValue>;
 export declare const makeStaticDragOverride: (value: unknown) => DragOverrideValue;

package/dist/cjs/use-schema.js

@@ -64,16 +64,16 @@ const computeEffectiveSchemaValuesDotNotation = ({ schema, currentValue, overrid
     const merged = {};
     const propsToDelete = new Set();
     for (const key of Object.keys(currentValue)) {
-        const codeValueStatus = (_b = propStatus === null || propStatus === void 0 ? void 0 : propStatus[key]) !== null && _b !== void 0 ? _b : null;
+        const status = (_b = propStatus === null || propStatus === void 0 ? void 0 : propStatus[key]) !== null && _b !== void 0 ? _b : null;
         const field = findFieldInSchema(schema, key);
         if ((field === null || field === void 0 ? void 0 : field.type) === 'hidden') {
             continue;
         }
         let value;
-        if (codeValueStatus === null) {
+        if (status === null) {
             value = currentValue[key];
         }
-        else if ((0, exports.isKeyframedStatus)(codeValueStatus)) {
+        else if ((0, exports.isKeyframedStatus)(status)) {
             if ((field === null || field === void 0 ? void 0 : field.type) === 'array' || (field === null || field === void 0 ? void 0 : field.keyframable) === false) {
                 value = currentValue[key];
             }
@@ -88,7 +88,7 @@ const computeEffectiveSchemaValuesDotNotation = ({ schema, currentValue, overrid
                 else if (frame !== null) {
                     const interpolated = (0, interpolate_keyframed_status_js_1.interpolateKeyframedStatus)({
                         frame,
-                        status: codeValueStatus,
+                        status,
                     });
                     value = interpolated !== null && interpolated !== void 0 ? interpolated : currentValue[key];
                 }
@@ -97,12 +97,12 @@ const computeEffectiveSchemaValuesDotNotation = ({ schema, currentValue, overrid
                 }
             }
         }
-        else if (codeValueStatus.status === 'computed') {
+        else if (status.status === 'computed') {
             value = currentValue[key];
         }
         else {
             value = (0, get_effective_visual_mode_value_js_1.getEffectiveVisualModeValue)({
-                codeValue: codeValueStatus,
+                propStatus: status,
                 dragOverrideValue: overrideValues[key],
                 defaultValue: field === null || field === void 0 ? void 0 : field.default,
                 frame,

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

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.472';
+exports.VERSION = '4.0.474';

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

@@ -112,7 +112,7 @@ const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
             });
         }
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const { codeValues } = (0, react_1.useContext)(SequenceManager_js_1.VisualModeCodeValuesContext);
+        const { propStatuses } = (0, react_1.useContext)(SequenceManager_js_1.VisualModePropStatusesContext);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const { getDragOverrides } = (0, react_1.useContext)(SequenceManager_js_1.VisualModeDragOverridesContext);
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -169,14 +169,14 @@ const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
                 overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
                 propStatus: nodePath === null
                     ? undefined
-                    : (0, use_memoized_effects_js_1.getCodeValuesCtx)(codeValues, nodePath),
+                    : (0, use_memoized_effects_js_1.getPropStatusesCtx)(propStatuses, nodePath),
                 frame,
             });
         }, [
             currentRuntimeValueDotNotation,
             getDragOverrides,
             nodePath,
-            codeValues,
+            propStatuses,
             frame,
         ]);
         // 4. Eliminate values forbidden by the resolved discriminated union.

package/dist/cjs/wrap-remotion-context.d.ts

@@ -25,6 +25,8 @@ export declare function useRemotionContexts(): {
     } | null;
     renderAssetManagerContext: import("./RenderAssetManager.js").RenderAssetManagerContext;
     sequenceManagerContext: import("./SequenceManager.js").SequenceManagerContext;
+    sequenceManagerRefContext: import("./SequenceManager.js").SequenceManagerRef;
+    visualModePropStatusesRefContext: import("./SequenceManager.js").VisualModePropStatusesRef;
     bufferManagerContext: {
         addBlock: (block: {
             id: string;

package/dist/cjs/wrap-remotion-context.js

@@ -62,6 +62,8 @@ function useRemotionContexts() {
     const resolveCompositionContext = react_1.default.useContext(ResolveCompositionConfig_js_1.ResolveCompositionContext);
     const renderAssetManagerContext = react_1.default.useContext(RenderAssetManager_js_1.RenderAssetManager);
     const sequenceManagerContext = react_1.default.useContext(SequenceManager_js_1.SequenceManager);
+    const sequenceManagerRefContext = react_1.default.useContext(SequenceManager_js_1.SequenceManagerRefContext);
+    const visualModePropStatusesRefContext = react_1.default.useContext(SequenceManager_js_1.VisualModePropStatusesRefContext);
     const bufferManagerContext = react_1.default.useContext(buffering_js_1.BufferingContextReact);
     const logLevelContext = react_1.default.useContext(log_level_context_js_1.LogLevelContext);
     return (0, react_1.useMemo)(() => ({
@@ -75,6 +77,8 @@ function useRemotionContexts() {
         resolveCompositionContext,
         renderAssetManagerContext,
         sequenceManagerContext,
+        sequenceManagerRefContext,
+        visualModePropStatusesRefContext,
         bufferManagerContext,
         logLevelContext,
     }), [
@@ -88,12 +92,14 @@ function useRemotionContexts() {
         resolveCompositionContext,
         renderAssetManagerContext,
         sequenceManagerContext,
+        sequenceManagerRefContext,
+        visualModePropStatusesRefContext,
         bufferManagerContext,
         logLevelContext,
     ]);
 }
 const RemotionContextProvider = (props) => {
     const { children, contexts } = props;
-    return (jsx_runtime_1.jsx(log_level_context_js_1.LogLevelContext.Provider, { value: contexts.logLevelContext, children: jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx_runtime_1.jsx(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: jsx_runtime_1.jsx(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: jsx_runtime_1.jsx(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: jsx_runtime_1.jsx(RenderAssetManager_js_1.RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: jsx_runtime_1.jsx(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: jsx_runtime_1.jsx(TimelineContext_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: jsx_runtime_1.jsx(buffering_js_1.BufferingContextReact.Provider, { value: contexts.bufferManagerContext, children: children }) }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx_runtime_1.jsx(log_level_context_js_1.LogLevelContext.Provider, { value: contexts.logLevelContext, children: jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx_runtime_1.jsx(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: jsx_runtime_1.jsx(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: jsx_runtime_1.jsx(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManagerRefContext.Provider, { value: contexts.sequenceManagerRefContext, children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: jsx_runtime_1.jsx(SequenceManager_js_1.VisualModePropStatusesRefContext.Provider, { value: contexts.visualModePropStatusesRefContext, children: jsx_runtime_1.jsx(RenderAssetManager_js_1.RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: jsx_runtime_1.jsx(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: jsx_runtime_1.jsx(TimelineContext_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: jsx_runtime_1.jsx(buffering_js_1.BufferingContextReact.Provider, { value: contexts.bufferManagerContext, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionContextProvider = RemotionContextProvider;