remotion 4.0.489 → 4.0.491

package/dist/cjs/delay-render.js

@@ -17,11 +17,6 @@ exports.DELAY_RENDER_RETRIES_LEFT = 'Retries left: ';
 exports.DELAY_RENDER_RETRY_TOKEN = '- Rendering the frame will be retried.';
 exports.DELAY_RENDER_CLEAR_TOKEN = 'handle was cleared after';
 const defaultTimeout = 30000;
-/**
- * Internal function that accepts environment as parameter.
- * This allows useDelayRender to control its own environment source.
- * @private
- */
 const delayRenderInternal = ({ scope, environment, label, options, }) => {
     var _a;
     var _b, _c, _d, _e;
@@ -80,10 +75,6 @@ const delayRender = (label, options) => {
     });
 };
 exports.delayRender = delayRender;
-/**
- * Internal function that accepts environment as parameter.
- * @private
- */
 const continueRenderInternal = ({ scope, handle, environment, logLevel, }) => {
     if (typeof handle === 'undefined') {
         throw new TypeError('The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.');
@@ -92,28 +83,22 @@ const continueRenderInternal = ({ scope, handle, environment, logLevel, }) => {
         throw new TypeError('The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: ' +
             JSON.stringify(handle));
     }
-    scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
-        if (h === handle) {
-            if (environment.isRendering && scope !== undefined) {
-                if (!scope.remotion_delayRenderTimeouts[handle]) {
-                    return false;
-                }
-                const { label, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
-                clearTimeout(timeout);
-                const message = [
-                    label ? `"${label}"` : 'A handle',
-                    exports.DELAY_RENDER_CLEAR_TOKEN,
-                    `${Date.now() - startTime}ms`,
-                ]
-                    .filter(truthy_js_1.truthy)
-                    .join(' ');
-                log_js_1.Log.verbose({ logLevel, tag: 'delayRender()' }, message);
-                delete scope.remotion_delayRenderTimeouts[handle];
-            }
-            return false;
-        }
-        return true;
-    });
+    const handleExists = scope.remotion_delayRenderHandles.includes(handle);
+    const timeoutEntry = scope.remotion_delayRenderTimeouts[handle];
+    if (handleExists && environment.isRendering && timeoutEntry) {
+        const { label, startTime, timeout } = timeoutEntry;
+        clearTimeout(timeout);
+        const message = [
+            label ? `"${label}"` : 'A handle',
+            exports.DELAY_RENDER_CLEAR_TOKEN,
+            `${Date.now() - startTime}ms`,
+        ]
+            .filter(truthy_js_1.truthy)
+            .join(' ');
+        log_js_1.Log.verbose({ logLevel, tag: 'delayRender()' }, message);
+        delete scope.remotion_delayRenderTimeouts[handle];
+    }
+    scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => h !== handle);
     if (scope.remotion_delayRenderHandles.length === 0) {
         scope.remotion_renderReady = true;
     }

package/dist/cjs/effects/Solid.d.ts

@@ -32,6 +32,7 @@ export declare const solidSchema: {
         readonly step: 0.01;
         readonly default: 1;
         readonly description: "Scale";
+        readonly defaultKeyframeOutput: "perceptual-scale";
     };
     readonly 'style.rotate': {
         readonly type: "rotation-css";

package/dist/cjs/flatten-schema.js

@@ -28,7 +28,7 @@ const getFlatSchemaWithAllKeys = (schema) => {
     const out = {};
     const addKey = (key, field) => {
         if (key in out) {
-            throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
+            return;
         }
         out[key] = field;
     };

package/dist/cjs/index.d.ts

@@ -132,7 +132,7 @@ export * from './internals.js';
 export { interpolateColors, type InterpolateColorsOptions, } from './interpolate-colors.js';
 export { LogLevel } from './log.js';
 export { Loop } from './loop/index.js';
-export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, random, RandomSeed, } from './no-react';
+export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, EasingFunction, ExtrapolateType, interpolate, InterpolateOutputOption, InterpolateOptions, random, RandomSeed, } from './no-react';
 export type { NonceHistory } from './nonce.js';
 export { prefetch, PrefetchOnProgress } from './prefetch.js';
 export { registerRoot } from './register-root.js';

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

@@ -1,3 +1,4 @@
+import type { InterpolateOutputOption } from './interpolate.js';
 export type HiddenFieldSchema = {
     type: 'hidden';
     keyframable?: boolean;
@@ -11,6 +12,7 @@ export type NumberFieldSchema = {
     description?: string;
     hiddenFromList: boolean;
     keyframable?: boolean;
+    defaultKeyframeOutput?: InterpolateOutputOption;
 };
 export type BooleanFieldSchema = {
     type: 'boolean';
@@ -56,6 +58,7 @@ export type ScaleFieldSchema = {
     default: number | string | undefined;
     description?: string;
     keyframable?: boolean;
+    defaultKeyframeOutput?: InterpolateOutputOption;
 };
 export type UvCoordinateFieldSchema = {
     type: 'uv-coordinate';
@@ -101,7 +104,7 @@ export type EnumFieldSchema = {
     variants: Record<string, InteractivitySchema>;
     keyframable?: boolean;
 };
-export type NumberArrayItemSchema = Omit<NumberFieldSchema, 'default' | 'description' | 'hiddenFromList' | 'keyframable'>;
+export type NumberArrayItemSchema = Omit<NumberFieldSchema, 'default' | 'description' | 'hiddenFromList' | 'keyframable' | 'defaultKeyframeOutput'>;
 export type BooleanArrayItemSchema = Omit<BooleanFieldSchema, 'default' | 'description' | 'keyframable'>;
 export type RotationCssArrayItemSchema = Omit<RotationCssFieldSchema, 'default' | 'description' | 'keyframable'>;
 export type RotationDegreesArrayItemSchema = Omit<RotationDegreesFieldSchema, 'default' | 'description' | 'keyframable'>;
@@ -148,6 +151,7 @@ export declare const transformSchema: {
         readonly step: 0.01;
         readonly default: 1;
         readonly description: "Scale";
+        readonly defaultKeyframeOutput: "perceptual-scale";
     };
     readonly 'style.rotate': {
         readonly type: "rotation-css";
@@ -184,6 +188,7 @@ export declare const sequenceVisualStyleSchema: {
         readonly step: 0.01;
         readonly default: 1;
         readonly description: "Scale";
+        readonly defaultKeyframeOutput: "perceptual-scale";
     };
     readonly 'style.rotate': {
         readonly type: "rotation-css";
@@ -351,6 +356,7 @@ export declare const sequenceStyleSchema: {
         readonly step: 0.01;
         readonly default: 1;
         readonly description: "Scale";
+        readonly defaultKeyframeOutput: "perceptual-scale";
     };
     readonly 'style.rotate': {
         readonly type: "rotation-css";
@@ -505,6 +511,7 @@ export declare const sequenceSchema: {
                     readonly step: 0.01;
                     readonly default: 1;
                     readonly description: "Scale";
+                    readonly defaultKeyframeOutput: "perceptual-scale";
                 };
                 readonly 'style.rotate': {
                     readonly type: "rotation-css";
@@ -620,6 +627,7 @@ export declare const sequenceSchemaWithoutFrom: {
                     readonly step: 0.01;
                     readonly default: 1;
                     readonly description: "Scale";
+                    readonly defaultKeyframeOutput: "perceptual-scale";
                 };
                 readonly 'style.rotate': {
                     readonly type: "rotation-css";

package/dist/cjs/interactivity-schema.js

@@ -20,6 +20,7 @@ exports.transformSchema = {
         step: 0.01,
         default: 1,
         description: 'Scale',
+        defaultKeyframeOutput: 'perceptual-scale',
     },
     'style.rotate': {
         type: 'rotation-css',

package/dist/cjs/internals.d.ts

@@ -14,11 +14,11 @@ import type { OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSe
 import { OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext } from './sequence-node-path.js';
 import type { ResolvedStackLocation } from './sequence-stack-traces.js';
 import type { CannotUpdateSequenceReason } from './SequenceManager.js';
-import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFalse, type CanUpdateEffectPropsResponseTrue, type CanUpdateSequencePropsResponse, type CanUpdateSequencePropsResponseFalse, type CanUpdateSequencePropsResponseTrue, type SequenceNodePath, type SequencePropsSubscriptionKey } from './SequenceManager.js';
+import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFalse, type CanUpdateEffectPropsResponseTrue, type CanUpdateSequencePropsResponse, type CanUpdateSequencePropsResponseFalse, type CanUpdateSequencePropsResponseTrue, type SequenceNodePath, type SequencePropsSubscriptionKey, type VideoConfigValues } from './SequenceManager.js';
 import * as TimelinePosition from './timeline-position-state.js';
 import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineContextValue } from './TimelineContext.js';
 import { truthy } from './truthy.js';
-import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses } from './use-schema.js';
+import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, VideoConfigNumericExpression } from './use-schema.js';
 import { type CanUpdateSequencePropStatus, type DragOverrides, type EffectDragOverrides, type PropStatuses } from './use-schema.js';
 import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state.js';
 import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
@@ -162,6 +162,7 @@ export declare const Internals: {
                         readonly step: 0.01;
                         readonly default: 1;
                         readonly description: "Scale";
+                        readonly defaultKeyframeOutput: "perceptual-scale";
                     };
                     readonly 'style.rotate': {
                         readonly type: "rotation-css";
@@ -224,6 +225,7 @@ export declare const Internals: {
             readonly step: 0.01;
             readonly default: 1;
             readonly description: "Scale";
+            readonly defaultKeyframeOutput: "perceptual-scale";
         };
         readonly 'style.rotate': {
             readonly type: "rotation-css";
@@ -281,6 +283,7 @@ export declare const Internals: {
             readonly step: 0.01;
             readonly default: 1;
             readonly description: "Scale";
+            readonly defaultKeyframeOutput: "perceptual-scale";
         };
         readonly 'style.rotate': {
             readonly type: "rotation-css";
@@ -417,6 +420,7 @@ export declare const Internals: {
             readonly step: 0.01;
             readonly default: 1;
             readonly description: "Scale";
+            readonly defaultKeyframeOutput: "perceptual-scale";
         };
         readonly 'style.rotate': {
             readonly type: "rotation-css";
@@ -926,4 +930,4 @@ export declare const Internals: {
         readonly hiddenFromList: true;
     };
 };
-export type { ArrayFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };
+export type { ArrayFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, VideoConfigNumericExpression, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

package/dist/cjs/interpolate-keyframed-status.js

@@ -58,6 +58,7 @@ const interpolateKeyframedStatus = ({ frame, forceSpringAllowTail, status, }) =>
             easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
             extrapolateLeft: clamping.left,
             extrapolateRight: clamping.right,
+            output: status.output,
             posterize: status.posterize,
         });
     }

package/dist/cjs/interpolate.d.ts

@@ -1,4 +1,5 @@
 export type ExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
+export type InterpolateOutputOption = 'linear' | 'perceptual-scale';
 /**
  * @description This function allows you to map a range of values to another with a concise syntax
  * @see [Documentation](https://www.remotion.dev/docs/interpolate)
@@ -10,6 +11,7 @@ export type InterpolateOptions = Partial<{
     easing: EasingFunction | readonly EasingFunction[];
     extrapolateLeft: ExtrapolateType;
     extrapolateRight: ExtrapolateType;
+    output: InterpolateOutputOption;
     posterize: number;
 }>;
 type NumericTuple = readonly [number, ...number[]];

package/dist/cjs/interpolate.js

@@ -269,8 +269,20 @@ const serializeStringInterpolationValue = ({ kind, values, units, dimensions, })
         .map((value, index) => `${stringifyNumber(value)}${units[index]}`)
         .join(' ');
 };
+const toSignedArea = (scale) => {
+    if (scale === 0) {
+        return 0;
+    }
+    return Math.sign(scale) * scale * scale;
+};
+const fromSignedArea = (area) => {
+    if (area === 0) {
+        return 0;
+    }
+    return Math.sign(area) * Math.sqrt(Math.abs(area));
+};
 function interpolateFunction(input, inputRange, outputRange, options) {
-    const { extrapolateLeft, extrapolateRight, easing } = options;
+    const { extrapolateLeft, extrapolateRight, easing, output } = options;
     let result = input;
     const [inputMin, inputMax] = inputRange;
     const [outputMin, outputMax] = outputRange;
@@ -312,7 +324,14 @@ function interpolateFunction(input, inputRange, outputRange, options) {
     // Easing
     result = easing(result);
     // Output Range
-    result = result * (outputMax - outputMin) + outputMin;
+    if (output === 'perceptual-scale') {
+        const signedAreaMin = toSignedArea(outputMin);
+        const signedAreaMax = toSignedArea(outputMax);
+        result = fromSignedArea(result * (signedAreaMax - signedAreaMin) + signedAreaMin);
+    }
+    else {
+        result = result * (outputMax - outputMin) + outputMin;
+    }
     return result;
 }
 function findRange(input, inputRange) {
@@ -325,6 +344,9 @@ function findRange(input, inputRange) {
     return i - 1;
 }
 const defaultEasing = (num) => num;
+const resolveOutputOption = (output) => {
+    return output !== null && output !== void 0 ? output : 'linear';
+};
 const shouldExtendRightForEasing = (easing) => {
     return easing.remotionShouldExtendRight === true;
 };
@@ -338,7 +360,7 @@ const resolveEasingForSegment = ({ easing, segmentIndex, }) => {
     // `segmentIndex` is in [0, inputRange.length - 2]; array length was validated above.
     return easing[segmentIndex];
 };
-const interpolateSegment = ({ input, inputRange, outputRange, easing, extrapolateLeft, extrapolateRight, }) => {
+const interpolateSegment = ({ input, inputRange, outputRange, easing, extrapolateLeft, extrapolateRight, output, }) => {
     return interpolateFunction(input, inputRange, outputRange, {
         easing,
         extrapolateLeft,
@@ -347,9 +369,11 @@ const interpolateSegment = ({ input, inputRange, outputRange, easing, extrapolat
             shouldExtendRightForEasing(easing)
             ? 'extend'
             : extrapolateRight,
+        output,
     });
 };
 const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
+    const output = resolveOutputOption(options === null || options === void 0 ? void 0 : options.output);
     if (inputRange.length === 1) {
         return outputRange[0];
     }
@@ -377,6 +401,7 @@ const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
         easing,
         extrapolateLeft,
         extrapolateRight,
+        output,
     });
     for (let segmentIndex = 0; segmentIndex < range; segmentIndex++) {
         const previousEasing = resolveEasingForSegment({
@@ -397,6 +422,7 @@ const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
             easing: previousEasing,
             extrapolateLeft,
             extrapolateRight: 'extend',
+            output,
         });
         result += continuedSegmentValue - outputRange[segmentIndex + 1];
     }
@@ -440,14 +466,18 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
             }
         }
     }
-    return serializeStringInterpolationValue({
-        kind,
-        values: [0, 0, 0].map((_, axis) => interpolateNumber({
+    const values = [0, 0, 0];
+    for (let axis = 0; axis < dimensions; axis++) {
+        values[axis] = interpolateNumber({
             input,
             inputRange,
             outputRange: parsedOutputRange.map((parsed) => parsed.values[axis]),
             options,
-        })),
+        });
+    }
+    return serializeStringInterpolationValue({
+        kind,
+        values,
         units,
         dimensions,
     });
@@ -529,6 +559,14 @@ function assertValidInterpolatePosterizeOption(posterize) {
         throw new Error(`posterize must be a positive finite number, but got ${posterize}`);
     }
 }
+function assertValidInterpolateOutputOption(output) {
+    if (output === undefined ||
+        output === 'linear' ||
+        output === 'perceptual-scale') {
+        return;
+    }
+    throw new Error(`output must be "linear" or "perceptual-scale", but got ${String(output)}`);
+}
 function interpolate(input, inputRange, outputRange, options) {
     if (typeof input === 'undefined') {
         throw new Error('input can not be undefined');
@@ -550,6 +588,7 @@ function interpolate(input, inputRange, outputRange, options) {
     checkValidInputRange(inputRange);
     assertValidInterpolateEasingOption(options === null || options === void 0 ? void 0 : options.easing, inputRange.length);
     assertValidInterpolatePosterizeOption(options === null || options === void 0 ? void 0 : options.posterize);
+    assertValidInterpolateOutputOption(options === null || options === void 0 ? void 0 : options.output);
     if (typeof input !== 'number') {
         throw new TypeError('Cannot interpolate an input which is not a number');
     }

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

@@ -1,7 +1,7 @@
 export type { ArtifactAsset, AudioOrVideoAsset, InlineAudioAsset, TRenderAsset, } from './CompositionManager';
 export type { DownloadBehavior } from './download-behavior';
 export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, interpolate, } from './interpolate';
-export type { EasingFunction, ExtrapolateType, InterpolateOptions, } from './interpolate';
+export type { EasingFunction, ExtrapolateType, InterpolateOutputOption, InterpolateOptions, } from './interpolate';
 export { random } from './random.js';
 export type { RandomSeed } from './random.js';
 export type { VideoConfig } from './video-config';
@@ -115,6 +115,7 @@ export declare const NoReactInternals: {
                         readonly step: 0.01;
                         readonly default: 1;
                         readonly description: "Scale";
+                        readonly defaultKeyframeOutput: "perceptual-scale";
                     };
                     readonly 'style.rotate': {
                         readonly type: "rotation-css";

package/dist/cjs/series/index.js

@@ -1,63 +1,136 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Series = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
+const Interactive_js_1 = require("../Interactive.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const Sequence_js_1 = require("../Sequence.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
 const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 const flatten_children_js_1 = require("./flatten-children.js");
 const is_inside_series_js_1 = require("./is-inside-series.js");
-const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
-    (0, is_inside_series_js_1.useRequireToBeInsideSeries)();
-    // Discard ref
-    return jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: children });
+const seriesSequenceSchema = {
+    durationInFrames: Interactive_js_1.Interactive.baseSchema.durationInFrames,
+    name: Interactive_js_1.Interactive.sequenceSchema.name,
+    hidden: Interactive_js_1.Interactive.sequenceSchema.hidden,
+    showInTimeline: Interactive_js_1.Interactive.sequenceSchema.showInTimeline,
+    freeze: Interactive_js_1.Interactive.baseSchema.freeze,
+    layout: Interactive_js_1.Interactive.sequenceSchema.layout,
 };
-const SeriesSequence = (0, react_1.forwardRef)(SeriesSequenceRefForwardingFunction);
+const SeriesSequenceInner = (0, react_1.forwardRef)(({ offset = 0, className = '', stack = null, _remotionInternalRender = null, ...props }, ref) => {
+    (0, is_inside_series_js_1.useRequireToBeInsideSeries)();
+    if (_remotionInternalRender) {
+        return _remotionInternalRender({ ...props, offset, className: className || undefined, stack }, ref);
+    }
+    return (jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: props.children }));
+});
+const SeriesSequence = Interactive_js_1.Interactive.withSchema({
+    Component: SeriesSequenceInner,
+    componentName: '<Series.Sequence>',
+    componentIdentity: 'dev.remotion.remotion.Series.Sequence',
+    schema: seriesSequenceSchema,
+    supportsEffects: false,
+});
 const SequenceWithoutSchemaWithRef = Sequence_js_1.SequenceWithoutSchema;
+const validateSeriesSequenceProps = ({ durationInFrames, offset: offsetProp, index, childrenLength, }) => {
+    const debugInfo = `index = ${index}, duration = ${durationInFrames}`;
+    if (index !== childrenLength - 1 || durationInFrames !== Infinity) {
+        (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, {
+            component: `of a <Series.Sequence /> component`,
+            allowFloats: true,
+        });
+    }
+    const offset = offsetProp !== null && offsetProp !== void 0 ? offsetProp : 0;
+    if (Number.isNaN(offset)) {
+        throw new TypeError(`The "offset" property of a <Series.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
+    }
+    if (!Number.isFinite(offset)) {
+        throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+    }
+    if (offset % 1 !== 0) {
+        throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+    }
+    return offset;
+};
 const SeriesInner = (props) => {
     const childrenValue = (0, react_1.useMemo)(() => {
-        let startFrame = 0;
         const flattenedChildren = (0, flatten_children_js_1.flattenChildren)(props.children);
-        return react_1.Children.map(flattenedChildren, (child, i) => {
-            var _a;
+        const renderChildren = (i, startFrame) => {
+            if (i === flattenedChildren.length) {
+                return null;
+            }
+            const child = flattenedChildren[i];
             const castedChild = child;
             if (typeof castedChild === 'string') {
                 // Don't throw if it's just some accidential whitespace
                 if (castedChild.trim() === '') {
-                    return null;
+                    return renderChildren(i + 1, startFrame);
                 }
                 throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but you passed a string "${castedChild}"`);
             }
             if (castedChild.type !== SeriesSequence) {
                 throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead`);
             }
-            const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
-            const durationInFramesProp = castedChild.props.durationInFrames;
-            const { durationInFrames, children: _children, from, name, ...passedProps } = castedChild.props; // `from` is not accepted and must be filtered out if used in JS
-            if (i !== flattenedChildren.length - 1 ||
-                durationInFramesProp !== Infinity) {
-                (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFramesProp, {
-                    component: `of a <Series.Sequence /> component`,
-                    allowFloats: true,
-                });
-            }
-            const offset = (_a = castedChild.props.offset) !== null && _a !== void 0 ? _a : 0;
-            if (Number.isNaN(offset)) {
-                throw new TypeError(`The "offset" property of a <Series.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
-            }
-            if (!Number.isFinite(offset)) {
-                throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-            }
-            if (offset % 1 !== 0) {
-                throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-            }
-            const currentStartFrame = startFrame + offset;
-            startFrame += durationInFramesProp + offset;
-            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 }));
-        });
+            const castedElement = castedChild;
+            validateSeriesSequenceProps({
+                durationInFrames: castedElement.props.durationInFrames,
+                offset: castedElement.props.offset,
+                index: i,
+                childrenLength: flattenedChildren.length,
+            });
+            return react_1.default.cloneElement(castedElement, {
+                _remotionInternalRender: (resolvedProps, ref) => {
+                    const durationInFramesProp = resolvedProps.durationInFrames;
+                    const { durationInFrames: _durationInFrames, children: sequenceChildren, offset: offsetProp, controls, stack, from: _from, name, ...passedProps } = resolvedProps; // `from` is not accepted and must be filtered out if used in JS
+                    const offset = validateSeriesSequenceProps({
+                        durationInFrames: durationInFramesProp,
+                        offset: offsetProp,
+                        index: i,
+                        childrenLength: flattenedChildren.length,
+                    });
+                    const currentStartFrame = startFrame + offset;
+                    const nextStartFrame = startFrame + durationInFramesProp + offset;
+                    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
+                },
+            });
+        };
+        return renderChildren(0, 0);
     }, [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 }) }));
 };

package/dist/cjs/use-media-in-timeline.js

@@ -133,6 +133,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             showInTimeline: true,
             nonce: nonce.get(),
             startMediaFrom: 0 - startsAt,
+            mediaFrameAtSequenceZero: null,
             doesVolumeChange,
             loopDisplay,
             playbackRate,

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

@@ -1,13 +1,30 @@
 import type { InteractivitySchema } from './interactivity-schema.js';
-import type { ExtrapolateType } from './interpolate.js';
+import type { ExtrapolateType, InterpolateOutputOption } from './interpolate.js';
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey } from './SequenceManager.js';
 export type CanUpdateSequencePropStatusStatic = {
     status: 'static';
     codeValue: unknown;
+    numericExpression?: VideoConfigNumericExpression;
 };
 export type CanUpdateSequencePropStatusKeyframe = {
     frame: number;
     value: unknown;
+    frameExpression?: VideoConfigNumericExpression;
+};
+export type VideoConfigNumericExpression = {
+    type: 'literal';
+    value: number;
+} | {
+    type: 'video-config-value';
+    identifier: string;
+    value: number;
+} | {
+    type: 'video-config-multiplication';
+    identifier: string;
+    multiplier: number;
+    multiplicand: number;
+    factorPosition: 'left' | 'right';
+    value: number;
 };
 export type CanUpdateSequencePropStatusLinearEasing = {
     type: 'linear';
@@ -45,6 +62,7 @@ export type CanUpdateSequencePropStatusKeyframed = {
     easing: CanUpdateSequencePropStatusEasing[];
     clamping: CanUpdateSequencePropStatusClamping;
     posterize: number | undefined;
+    output: InterpolateOutputOption | undefined;
 };
 export type CanUpdateSequencePropStatusFalse = CanUpdateSequencePropStatusComputed;
 export type CanUpdateSequencePropStatus = CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed | CanUpdateSequencePropStatusFalse;

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

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.489';
+exports.VERSION = '4.0.491';