remotion 4.0.532 → 4.0.534

package/dist/cjs/evaluate-source-expressions.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.evaluateSourcePropStatuses = exports.evaluateSourceNumericValue = void 0;
+const evaluateSourceNumericValue = (expression, config) => {
+    var _a;
+    if (typeof expression === 'number') {
+        return expression;
+    }
+    if (expression.type === 'literal') {
+        return expression.value;
+    }
+    if (expression.type === 'binary') {
+        const left = (0, exports.evaluateSourceNumericValue)(expression.left, config);
+        const right = (0, exports.evaluateSourceNumericValue)(expression.right, config);
+        switch (expression.operator) {
+            case '+':
+                return left + right;
+            case '-':
+                return left - right;
+            case '*':
+                return left * right;
+            case '/':
+                return left / right;
+            default:
+                throw new Error('Unknown source expression operator');
+        }
+    }
+    const value = expression.binding.type === 'constant'
+        ? expression.binding.value
+        : ((_a = config === null || config === void 0 ? void 0 : config[expression.binding.field]) !== null && _a !== void 0 ? _a : NaN);
+    if (expression.type === 'video-config-multiplication') {
+        return value * expression.multiplier;
+    }
+    if (expression.type === 'video-config-subtraction') {
+        return value - expression.subtrahend;
+    }
+    return value;
+};
+exports.evaluateSourceNumericValue = evaluateSourceNumericValue;
+const evaluatedProps = new WeakMap();
+/** Resolve at the consumer, never in the shared source subscription cache. */
+const evaluateSourcePropStatuses = (props, config) => {
+    var _a;
+    const configKey = config === null
+        ? ''
+        : `${config.durationInFrames}:${config.fps}:${config.width}:${config.height}`;
+    const cached = (_a = evaluatedProps.get(props)) !== null && _a !== void 0 ? _a : new Map();
+    const existing = cached.get(configKey);
+    if (existing)
+        return existing;
+    const result = Object.fromEntries(Object.entries(props).map(([key, status]) => {
+        var _a;
+        if (status.status === 'computed') {
+            return [key, status];
+        }
+        const adjustment = status.keyframeDisplayOffsetAdjustment === null
+            ? null
+            : (0, exports.evaluateSourceNumericValue)(status.keyframeDisplayOffsetAdjustment, config);
+        const rate = (0, exports.evaluateSourceNumericValue)((_a = status.keyframePlaybackRateAdjustment) !== null && _a !== void 0 ? _a : 1, config);
+        if ((adjustment !== null && !Number.isFinite(adjustment)) ||
+            !Number.isFinite(rate) ||
+            rate <= 0) {
+            return [key, { status: 'computed' }];
+        }
+        const timing = {
+            keyframeDisplayOffsetAdjustment: adjustment,
+            ...(status.keyframePlaybackRateAdjustment === undefined
+                ? {}
+                : { keyframePlaybackRateAdjustment: rate }),
+        };
+        if (status.status === 'static') {
+            const value = status.numericExpression === undefined
+                ? status.codeValue
+                : (0, exports.evaluateSourceNumericValue)(status.numericExpression, config);
+            return [
+                key,
+                status.numericExpression !== undefined && !Number.isFinite(value)
+                    ? { status: 'computed' }
+                    : { ...status, ...timing, codeValue: value },
+            ];
+        }
+        const keyframes = status.keyframes.map((keyframe) => ({
+            ...keyframe,
+            frame: (0, exports.evaluateSourceNumericValue)(keyframe.frame, config),
+        }));
+        if (keyframes.some((keyframe, index) => !Number.isFinite(keyframe.frame) ||
+            (index > 0 && keyframe.frame <= keyframes[index - 1].frame))) {
+            return [key, { status: 'computed' }];
+        }
+        return [key, { ...status, ...timing, keyframes }];
+    }));
+    cached.set(configKey, result);
+    if (cached.size > 8)
+        cached.delete(cached.keys().next().value);
+    evaluatedProps.set(props, cached);
+    return result;
+};
+exports.evaluateSourcePropStatuses = evaluateSourcePropStatuses;

package/dist/cjs/freeze.js

@@ -44,12 +44,11 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, _remotionIntern
     const isInsideNonPremountFreeze = (0, exports.useIsInsideNonPremountFreeze)();
     const relativeFrom = (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0;
     const playbackRate = (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.playbackRate) !== null && _b !== void 0 ? _b : 1;
-    const timelineValue = (0, react_1.useMemo)(() => {
-        if (!isActive) {
-            return timelineContext;
-        }
+    const { audioAndVideoTags } = timelineContext;
+    // Advancing the outer timeline must not invalidate the frozen clock.
+    const frozenTimelineValue = (0, react_1.useMemo)(() => {
         return {
-            ...timelineContext,
+            audioAndVideoTags,
             isPlaying: () => false,
             isInsideFreeze: true,
             frame: {
@@ -57,8 +56,7 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, _remotionIntern
             },
         };
     }, [
-        isActive,
-        timelineContext,
+        audioAndVideoTags,
         videoConfig.id,
         frameToFreeze,
         relativeFrom,
@@ -77,6 +75,6 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, _remotionIntern
         };
     }, [sequenceContext, isActive]);
     return (jsx_runtime_1.jsx(NonPremountFreezeContext.Provider, { value: isInsideNonPremountFreeze ||
-            (Boolean(isActive) && !_remotionInternalIsPremounting), children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContext.Provider, { value: timelineValue, children: jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: newSequenceContext, children: children }) }) }));
+            (Boolean(isActive) && !_remotionInternalIsPremounting), children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContext.Provider, { value: isActive ? frozenTimelineValue : timelineContext, children: jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: newSequenceContext, children: children }) }) }));
 };
 exports.Freeze = Freeze;

package/dist/cjs/index.d.ts

@@ -34,6 +34,7 @@ declare global {
         remotion_calculateComposition: (compId: string) => Promise<VideoConfigWithSerializedProps>;
         remotion_setBundleMode: (bundleMode: BundleState) => void;
         remotion_staticBase: string;
+        remotion_outputsBase: string | null;
         remotion_staticFiles: StaticFile[];
         remotion_publicPath: string;
         remotion_publicFolderExists: string | null;
@@ -145,6 +146,7 @@ export * from './spring/index.js';
 export { staticFile } from './static-file.js';
 export * from './Still.js';
 export type { PlayableMediaTag } from './timeline-position-state.js';
+export { Track, type TrackProps } from './Track.js';
 export { useBufferState } from './use-buffer-state';
 export { useCurrentFrame } from './use-current-frame.js';
 export { CurrentScaleContextType, PreviewSize, PreviewSizeCtx, Translation, useCurrentScale, } from './use-current-scale';

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.usePixelDensity = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Interactive = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.getHtmlInCanvasUnsupportedMessage = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = exports.createEffect = void 0;
+exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.usePixelDensity = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.Track = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Interactive = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.getHtmlInCanvasUnsupportedMessage = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = exports.createEffect = void 0;
 require("./_check-rsc.js");
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
@@ -91,6 +91,8 @@ __exportStar(require("./spring/index.js"), exports);
 const static_file_js_1 = require("./static-file.js");
 Object.defineProperty(exports, "staticFile", { enumerable: true, get: function () { return static_file_js_1.staticFile; } });
 __exportStar(require("./Still.js"), exports);
+const Track_js_1 = require("./Track.js");
+Object.defineProperty(exports, "Track", { enumerable: true, get: function () { return Track_js_1.Track; } });
 const use_buffer_state_1 = require("./use-buffer-state");
 Object.defineProperty(exports, "useBufferState", { enumerable: true, get: function () { return use_buffer_state_1.useBufferState; } });
 const use_current_frame_js_1 = require("./use-current-frame.js");

package/dist/cjs/internals.d.ts

@@ -25,6 +25,8 @@ import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
 import { useRemotionContexts } from './wrap-remotion-context.js';
 export type { EffectChainState } from './effects/run-effect-chain.js';
 export declare const Internals: {
+    readonly evaluateSourceNumericValue: (expression: import("./use-schema.js").SourceNumericValue, config: VideoConfigValues | null) => number;
+    readonly evaluateSourcePropStatuses: (props: Record<string, import("./use-schema.js").CanUpdateSequencePropSource>, config: VideoConfigValues | null) => Record<string, CanUpdateSequencePropStatus>;
     readonly AbsoluteFillElement: import("react").ForwardRefExoticComponent<Omit<import("./AbsoluteFillElement.js").AbsoluteFillElementProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     readonly MaxMediaCacheSizeContext: import("react").Context<number | null>;
     readonly getMediabunnyInputResourceKey: ({ src, credentials, requestInitFingerprint, revision, }: {
@@ -98,6 +100,7 @@ export declare const Internals: {
     readonly CompositionSetters: import("react").Context<import("./CompositionManagerContext.js").CompositionManagerSetters>;
     readonly VisualModePropStatusesContext: import("react").Context<import("./SequenceManager.js").VisualModePropStatuses>;
     readonly VisualModePropStatusesRefContext: import("react").Context<import("./SequenceManager.js").VisualModePropStatusesRef>;
+    readonly VisualModeBatchSettersContext: import("react").Context<import("./SequenceManager.js").VisualModeBatchSetters | null>;
     readonly VisualModeDragOverridesContext: import("react").Context<import("./SequenceManager.js").VisualModeDragOverrides>;
     readonly VisualModeSettersContext: import("react").Context<import("./SequenceManager.js").VisualModeSetters>;
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
@@ -105,6 +108,8 @@ export declare const Internals: {
         readonly children: import("react").ReactNode;
     }>;
     readonly SequenceManagerRefContext: import("react").Context<import("./SequenceManager.js").SequenceManagerRef>;
+    readonly useActiveFromDragOverrideKeys: () => ReadonlySet<string>;
+    readonly useSequenceManagerSequences: () => TSequence[];
     readonly SequenceRegistrationContext: import("react").Context<boolean>;
     readonly DisableSequenceRegistrationProvider: import("react").FC<{
         readonly children: import("react").ReactNode;
@@ -823,6 +828,9 @@ export declare const Internals: {
     });
     readonly truthy: typeof truthy;
     readonly SequenceContext: import("react").Context<import("./SequenceContext.js").SequenceContextType | null>;
+    readonly TimelineTrackContext: import("react").Context<import("./timeline-track-context.js").TimelineTrack | null>;
+    readonly ExperimentalTracksEnabledContext: import("react").Context<boolean>;
+    readonly TrackWithoutSchema: import("react").FC<import("./Sequence.js").SequenceProps>;
     readonly PremountContext: import("react").Context<import("./PremountContext.js").PremountContextValue>;
     readonly usePremounting: ({ from, durationInFrames, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, hideWhilePremounted, }: {
         readonly from: number;
@@ -1239,9 +1247,10 @@ export declare const Internals: {
     readonly createEffectChainState: (width: number, height: number) => import("./internals.js").EffectChainState;
     readonly cleanupEffectChainState: (state: import("./internals.js").EffectChainState) => void;
     readonly runEffectChain: ({ state, source, effects, output, width, height, }: import("./effects/run-effect-chain.js").RunEffectChainOptions) => Promise<boolean>;
-    readonly useMemoizedEffects: ({ effects, overrideId, }: {
+    readonly useMemoizedEffects: ({ effects, overrideId, videoConfigValues, }: {
         effects: readonly import("./index.js").EffectDescriptor<unknown>[];
         readonly overrideId: string | null;
+        videoConfigValues: VideoConfigValues | null;
     }) => import("./index.js").EffectDefinitionAndStack<unknown>[];
     readonly useMemoizedEffectDefinitions: (effects: readonly import("./index.js").EffectDescriptor<unknown>[]) => readonly import("./index.js").EffectDefinition<unknown>[] & {
         readonly runtimeValues: readonly import("./runtime-value-store.js").RuntimeValueStore[];
@@ -1253,7 +1262,7 @@ export declare const Internals: {
         schema: InteractivitySchema;
         currentValue: Record<string, unknown>;
         overrideValues: Record<string, DragOverrideValue>;
-        propStatus: Record<string, CanUpdateSequencePropStatus> | undefined;
+        propStatus: Record<string, CanUpdateSequencePropStatus<number>> | undefined;
         frame: number | null;
     }) => {
         merged: Record<string, unknown>;
@@ -1277,7 +1286,7 @@ export declare const Internals: {
     }) => string) => void;
     readonly makeStaticDragOverride: (value: unknown) => DragOverrideValue;
     readonly makeKeyframedDragOverride: ({ status, frame, value, defaultEasing, }: {
-        status: CanUpdateSequencePropStatusKeyframed;
+        status: CanUpdateSequencePropStatusKeyframed<number>;
         frame: number;
         value: unknown;
         defaultEasing?: CanUpdateSequencePropStatusEasing | undefined;
@@ -1344,3 +1353,4 @@ export declare const Internals: {
     }) => import("react").CSSProperties | null;
 };
 export type { ArrayFieldSchema, AssetFieldSchema, 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, OriginalSourceLocation, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, SequencePropsStatusRemapping, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };
+export type { CanUpdateSequencePropSource, SourceNumericValue, VideoConfigNumericBinding, } from './use-schema.js';

package/dist/cjs/internals.js

@@ -58,6 +58,7 @@ const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const webgl2_context_error_js_1 = require("./effects/webgl2-context-error.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const evaluate_source_expressions_js_1 = require("./evaluate-source-expressions.js");
 const find_props_to_delete_js_1 = require("./find-props-to-delete.js");
 const flatten_schema_js_1 = require("./flatten-schema.js");
 const freeze_js_1 = require("./freeze.js");
@@ -99,7 +100,9 @@ const SequenceManager_js_1 = require("./SequenceManager.js");
 const setup_env_variables_js_1 = require("./setup-env-variables.js");
 const TimelinePosition = __importStar(require("./timeline-position-state.js"));
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const timeline_track_context_js_1 = require("./timeline-track-context.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
+const Track_js_1 = require("./Track.js");
 const truthy_js_1 = require("./truthy.js");
 const use_buffering_js_1 = require("./use-buffering.js");
 const use_crop_style_js_1 = require("./use-crop-style.js");
@@ -136,6 +139,8 @@ const compositionSelectorRef = (0, react_1.createRef)();
 // Mark them as Internals so use don't assume this is public
 // API and are less likely to use it
 exports.Internals = {
+    evaluateSourceNumericValue: evaluate_source_expressions_js_1.evaluateSourceNumericValue,
+    evaluateSourcePropStatuses: evaluate_source_expressions_js_1.evaluateSourcePropStatuses,
     AbsoluteFillElement: AbsoluteFillElement_js_1.AbsoluteFillElement,
     MaxMediaCacheSizeContext: max_video_cache_size_js_1.MaxMediaCacheSizeContext,
     getMediabunnyInputResourceKey: media_resource_manager_js_1.getMediabunnyInputResourceKey,
@@ -165,11 +170,14 @@ exports.Internals = {
     CompositionSetters: CompositionManagerContext_js_1.CompositionSetters,
     VisualModePropStatusesContext: SequenceManager_js_1.VisualModePropStatusesContext,
     VisualModePropStatusesRefContext: SequenceManager_js_1.VisualModePropStatusesRefContext,
+    VisualModeBatchSettersContext: SequenceManager_js_1.VisualModeBatchSettersContext,
     VisualModeDragOverridesContext: SequenceManager_js_1.VisualModeDragOverridesContext,
     VisualModeSettersContext: SequenceManager_js_1.VisualModeSettersContext,
     SequenceManager: SequenceManager_js_1.SequenceManager,
     SequenceManagerProvider: SequenceManager_js_1.SequenceManagerProvider,
     SequenceManagerRefContext: SequenceManager_js_1.SequenceManagerRefContext,
+    useActiveFromDragOverrideKeys: SequenceManager_js_1.useActiveFromDragOverrideKeys,
+    useSequenceManagerSequences: SequenceManager_js_1.useSequenceManagerSequences,
     SequenceRegistrationContext: SequenceManager_js_1.SequenceRegistrationContext,
     DisableSequenceRegistrationProvider: SequenceManager_js_1.DisableSequenceRegistrationProvider,
     CommitOrderInternals: sequence_order_marker_js_1.CommitOrderInternals,
@@ -198,6 +206,9 @@ exports.Internals = {
     useLazyComponent: use_lazy_component_js_1.useLazyComponent,
     truthy: truthy_js_1.truthy,
     SequenceContext: SequenceContext_js_1.SequenceContext,
+    TimelineTrackContext: timeline_track_context_js_1.TimelineTrackContext,
+    ExperimentalTracksEnabledContext: timeline_track_context_js_1.ExperimentalTracksEnabledContext,
+    TrackWithoutSchema: Track_js_1.TrackWithoutSchema,
     PremountContext: PremountContext_js_1.PremountContext,
     usePremounting: use_premounting_js_1.usePremounting,
     resolveSequenceDuration: resolve_sequence_duration_js_1.resolveSequenceDuration,

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

@@ -12,6 +12,8 @@ import { validateDimension } from './validation/validate-dimensions';
 import { validateDurationInFrames } from './validation/validate-duration-in-frames';
 import { validateFps } from './validation/validate-fps';
 export declare const NoReactInternals: {
+    evaluateSourceNumericValue: (expression: import("./use-schema.js").SourceNumericValue, config: import("./video-config").VideoConfigValues | null) => number;
+    evaluateSourcePropStatuses: (props: Record<string, import("./use-schema.js").CanUpdateSequencePropSource>, config: import("./video-config").VideoConfigValues | null) => Record<string, import("./use-schema.js").CanUpdateSequencePropStatus>;
     processColor: typeof processColor;
     truthy: typeof truthy;
     validateFps: typeof validateFps;

package/dist/cjs/no-react.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NoReactInternals = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = void 0;
+const evaluate_source_expressions_js_1 = require("./evaluate-source-expressions.js");
 const interpolate_1 = require("./interpolate");
 Object.defineProperty(exports, "assertValidInterpolateEasingOption", { enumerable: true, get: function () { return interpolate_1.assertValidInterpolateEasingOption; } });
 Object.defineProperty(exports, "assertValidInterpolatePosterizeOption", { enumerable: true, get: function () { return interpolate_1.assertValidInterpolatePosterizeOption; } });
@@ -27,6 +28,8 @@ const validate_fps_1 = require("./validation/validate-fps");
 const get_current_time_1 = require("./video/get-current-time");
 const offthread_video_source_1 = require("./video/offthread-video-source");
 exports.NoReactInternals = {
+    evaluateSourceNumericValue: evaluate_source_expressions_js_1.evaluateSourceNumericValue,
+    evaluateSourcePropStatuses: evaluate_source_expressions_js_1.evaluateSourcePropStatuses,
     processColor: interpolate_colors_1.processColor,
     truthy: truthy_1.truthy,
     validateFps: validate_fps_1.validateFps,

package/dist/cjs/series/index.js

@@ -40,6 +40,7 @@ const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-trac
 const Interactive_js_1 = require("../Interactive.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const Sequence_js_1 = require("../Sequence.js");
+const Track_js_1 = require("../Track.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");
@@ -90,6 +91,7 @@ const validateSeriesSequenceProps = ({ durationInFrames, offset: offsetProp, ind
     return offset;
 };
 const SeriesInner = (props) => {
+    var _a;
     const childrenValue = (0, react_1.useMemo)(() => {
         const flattenedChildren = (0, flatten_children_js_1.flattenChildren)(props.children);
         const renderChildren = (i, startFrame) => {
@@ -139,7 +141,7 @@ const SeriesInner = (props) => {
         };
         return renderChildren(0, 0);
     }, [props.children]);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", name: "<Series>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series", ...props, children: jsx_runtime_1.jsx(is_inside_series_js_1.IsInsideSeriesContainer, { children: childrenValue }) }));
+    return (jsx_runtime_1.jsx(Track_js_1.TrackWithoutSchema, { layout: "none", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series", ...props, name: (_a = props.name) !== null && _a !== void 0 ? _a : '<Series>', children: jsx_runtime_1.jsx(is_inside_series_js_1.IsInsideSeriesContainer, { children: childrenValue }) }));
 };
 /**
  * @description with this component, you can easily stitch together scenes that should play sequentially after another.

package/dist/cjs/timeline-track-context.d.ts

@@ -0,0 +1,9 @@
+export type TimelineTrack = {
+    readonly id: string;
+    readonly name: string;
+};
+export type TimelineTrackItem = TimelineTrack & {
+    readonly role: 'track' | 'clip' | 'transition' | 'overlay';
+};
+export declare const TimelineTrackContext: import("react").Context<TimelineTrack | null>;
+export declare const ExperimentalTracksEnabledContext: import("react").Context<boolean>;

package/dist/cjs/timeline-track-context.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExperimentalTracksEnabledContext = exports.TimelineTrackContext = void 0;
+const react_1 = require("react");
+exports.TimelineTrackContext = (0, react_1.createContext)(null);
+exports.ExperimentalTracksEnabledContext = (0, react_1.createContext)(false);

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

@@ -9,10 +9,12 @@ const index_js_1 = require("./loop/index.js");
 const sequence_outline_js_1 = require("./sequence-outline.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
+const timeline_track_context_js_1 = require("./timeline-track-context.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_sequence_registration_js_1 = require("./use-sequence-registration.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const volume_prop_js_1 = require("./volume-prop.js");
+const EMPTY_EFFECTS = [];
 const useBasicMediaInTimeline = ({ volume, mediaVolume, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, mediaFrom, loop, muted, }) => {
     var _a, _b;
     if (!src) {
@@ -89,6 +91,7 @@ exports.useBasicMediaInTimeline = useBasicMediaInTimeline;
 const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, loopVolumeCurveBehavior, documentationLink, muted, }) => {
     var _a, _b;
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const timelineTrack = (0, react_1.useContext)(timeline_track_context_js_1.TimelineTrackContext);
     const mediaTrimBefore = (0, react_1.useContext)(use_audio_frame_js_1.Html5MediaTrimContext);
     const sequenceRegistrationEnabled = (0, react_1.useContext)(SequenceManager_js_1.SequenceRegistrationContext);
     const { durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
@@ -170,6 +173,14 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
         }
         return {
             effectRuntimeValues: null,
+            ...(timelineTrack
+                ? {
+                    timelineTrack: {
+                        ...timelineTrack,
+                        role: 'clip',
+                    },
+                }
+                : {}),
             type: mediaType,
             src,
             id,
@@ -193,7 +204,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             premountDisplay,
             postmountDisplay,
             controls: null,
-            effects: [],
+            effects: EMPTY_EFFECTS,
             refForOutline: automaticOutlineRef,
             isInsideSeries: false,
             frozenFrame: null,
@@ -202,7 +213,8 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
     }, [
         duration,
         id,
-        parentSequence,
+        timelineTrack,
+        parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id,
         src,
         volumes,
         doesVolumeChange,

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

@@ -1,42 +1,56 @@
 import type { InteractivitySchema } from './interactivity-schema.js';
 import type { ExtrapolateType, InterpolateOutputOption } from './interpolate.js';
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey } from './SequenceManager.js';
-export type CanUpdateSequencePropStatusStatic = {
+import type { VideoConfigValues } from './video-config.js';
+export type CanUpdateSequencePropStatusStatic<Numeric = number> = {
     status: 'static';
     codeValue: unknown;
-    keyframeDisplayOffsetAdjustment: number | null;
+    keyframeDisplayOffsetAdjustment: Numeric | null;
     /** Multiplies the element's local frame to recover the source frame clock. */
-    keyframePlaybackRateAdjustment?: number;
+    keyframePlaybackRateAdjustment?: Numeric;
     /** False when the source frame clock cannot be represented by the Studio. */
     canKeyframe?: false;
     numericExpression?: VideoConfigNumericExpression;
 };
-export type CanUpdateSequencePropStatusKeyframe = {
-    frame: number;
+export type CanUpdateSequencePropStatusKeyframe<Numeric = number> = {
+    frame: Numeric;
     value: unknown;
     frameExpression?: VideoConfigNumericExpression;
 };
+/** Source bindings remain independent of the configuration of a mounted instance. */
+export type VideoConfigNumericBinding = {
+    type: 'video-config';
+    field: keyof VideoConfigValues;
+} | {
+    type: 'constant';
+    value: number;
+};
 export type VideoConfigNumericExpression = {
     type: 'literal';
     value: number;
 } | {
     type: 'video-config-value';
     identifier: string;
-    value: number;
+    binding: VideoConfigNumericBinding;
 } | {
     type: 'video-config-multiplication';
     identifier: string;
+    binding: VideoConfigNumericBinding;
     multiplier: number;
-    multiplicand: number;
     factorPosition: 'left' | 'right';
-    value: number;
 } | {
     type: 'video-config-subtraction';
     identifier: string;
-    minuend: number;
+    binding: VideoConfigNumericBinding;
     subtrahend: number;
-    value: number;
+} | {
+    type: 'binary';
+    operator: '+' | '-' | '*' | '/';
+    left: SourceNumericValue;
+    right: SourceNumericValue;
 };
+export type SourceNumericValue = number | VideoConfigNumericExpression;
+export type CanUpdateSequencePropSource = CanUpdateSequencePropStatus<SourceNumericValue>;
 export type CanUpdateSequencePropStatusLinearEasing = {
     type: 'linear';
 };
@@ -69,7 +83,7 @@ export type CanUpdateSequencePropStatusInterpolationFunction = 'interpolate' | '
 export type CanUpdateSequencePropStatusComputed = {
     status: 'computed';
 };
-export type CanUpdateSequencePropStatusKeyframed = {
+export type CanUpdateSequencePropStatusKeyframed<Numeric = number> = {
     status: 'keyframed';
     interpolationFunction: CanUpdateSequencePropStatusInterpolationFunction;
     /**
@@ -78,17 +92,17 @@ export type CanUpdateSequencePropStatusKeyframed = {
      * This is non-zero when the useCurrentFrame() call is outside a timing
      * element that wraps the controlled element.
      */
-    keyframeDisplayOffsetAdjustment: number | null;
+    keyframeDisplayOffsetAdjustment: Numeric | null;
     /** Defaults to 1 for statuses produced without a playback rate conversion. */
-    keyframePlaybackRateAdjustment?: number;
-    keyframes: CanUpdateSequencePropStatusKeyframe[];
+    keyframePlaybackRateAdjustment?: Numeric;
+    keyframes: CanUpdateSequencePropStatusKeyframe<Numeric>[];
     easing: CanUpdateSequencePropStatusEasing[];
     clamping: CanUpdateSequencePropStatusClamping;
     posterize: number | undefined;
     output: InterpolateOutputOption | undefined;
 };
 export type CanUpdateSequencePropStatusFalse = CanUpdateSequencePropStatusComputed;
-export type CanUpdateSequencePropStatus = CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed | CanUpdateSequencePropStatusFalse;
+export type CanUpdateSequencePropStatus<Numeric = number> = CanUpdateSequencePropStatusStatic<Numeric> | CanUpdateSequencePropStatusKeyframed<Numeric> | CanUpdateSequencePropStatusFalse;
 export type DragOverrideValue = {
     readonly type: 'static';
     readonly value: unknown;
@@ -105,18 +119,18 @@ export type GetDragOverrides = (nodePath: SequencePropsSubscriptionKey) => DragO
 export type GetEffectDragOverrides = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, DragOverrideValue>;
 export declare const makeStaticDragOverride: (value: unknown) => DragOverrideValue;
 export declare const makeKeyframedDragOverride: ({ status, frame, value, defaultEasing, }: {
-    status: CanUpdateSequencePropStatusKeyframed;
+    status: CanUpdateSequencePropStatusKeyframed<number>;
     frame: number;
     value: unknown;
     defaultEasing?: CanUpdateSequencePropStatusEasing | undefined;
 }) => DragOverrideValue;
 export declare const getStaticDragOverrideValue: (dragOverrideValue: DragOverrideValue | undefined) => unknown;
-export declare const isKeyframedStatus: (status: CanUpdateSequencePropStatus | null) => status is CanUpdateSequencePropStatusKeyframed;
+export declare const isKeyframedStatus: (status: CanUpdateSequencePropStatus<number> | null) => status is CanUpdateSequencePropStatusKeyframed<number>;
 export declare const computeEffectiveSchemaValuesDotNotation: ({ schema, currentValue, overrideValues, propStatus, frame, }: {
     schema: InteractivitySchema;
     currentValue: Record<string, unknown>;
     overrideValues: Record<string, DragOverrideValue>;
-    propStatus: Record<string, CanUpdateSequencePropStatus> | undefined;
+    propStatus: Record<string, CanUpdateSequencePropStatus<number>> | undefined;
     frame: number | null;
 }) => {
     merged: Record<string, unknown>;

package/dist/cjs/use-sequence-registration.js

@@ -4,7 +4,7 @@ exports.useSequenceRegistration = void 0;
 const react_1 = require("react");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const useSequenceRegistration = ({ getSequence, id, }) => {
-    const { registerSequence, unregisterSequence, updateSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
+    const { registerSequence, unregisterSequence, updateSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManagerActionsContext);
     const registrationDisabled = (0, react_1.useContext)(SequenceManager_js_1.DisableSequenceRegistrationContext);
     const getSequenceRef = (0, react_1.useRef)(getSequence);
     getSequenceRef.current = getSequence;

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

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.532';
+exports.VERSION = '4.0.534';

package/dist/cjs/video/html5-video.js

@@ -80,7 +80,7 @@ const VideoForwardingFunction = (props, ref) => {
                     ? undefined
                     : (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0) +
                         (effectiveTrimAfter - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0)) /
-                            ((_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1), name: name, children: jsx_runtime_1.jsx(exports.Html5Video, { pauseWhenBuffering: shouldPauseWhenBuffering, onVideoFrame: onVideoFrame, ...otherProps, ref: ref, _remotionInternalStack: _remotionInternalStack }) }) }));
+                            ((_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1), name: name, children: jsx_runtime_1.jsx(exports.Html5Video, { pauseWhenBuffering: shouldPauseWhenBuffering, onVideoFrame: onVideoFrame, ...otherProps, ref: ref, showInTimeline: showInTimeline, _remotionInternalStack: _remotionInternalStack }) }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)({
         playbackRate: props.playbackRate,