remotion 4.0.533 → 4.0.534

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, }: {
@@ -826,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;
@@ -1242,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[];
@@ -1256,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>;
@@ -1280,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;
@@ -1347,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,
@@ -201,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/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.533";
+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.533';
+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,

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

@@ -121,7 +121,6 @@ const mergeValues = ({ flatSchema, props, valuesDotNotation, schemaKeys, propsTo
     return merged;
 };
 exports.mergeValues = mergeValues;
-const stackToOverrideMap = {};
 const DisableInteractivityContext = (0, react_1.createContext)(false);
 const DisableInteractivityProvider = ({ children }) => {
     return react_1.default.createElement(DisableInteractivityContext.Provider, { value: true }, children);
@@ -139,6 +138,9 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity =
     const schemaWithSequenceName = (0, interactivity_schema_js_1.extendSchemaWithSequenceName)(schema);
     const flatSchema = (0, flatten_schema_js_1.getFlatSchemaWithAllKeys)(schemaWithSequenceName);
     const flatKeys = Object.keys(flatSchema);
+    // A structural edit can put a different component at the same stack.
+    // Only reuse overrides for instances of this component.
+    const stackToOverrideMap = {};
     const Wrapped = (0, react_1.forwardRef)((props, ref) => {
         var _a;
         const { _remotionInternalStack: internalStack, ...propsWithoutInternalStack } = props;
@@ -261,7 +263,10 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity =
                 overrideValues: dragOverrides,
                 propStatus: nodePath === null
                     ? undefined
-                    : (0, use_memoized_effects_js_1.getPropStatusesCtx)(propStatuses, nodePath),
+                    : (0, use_memoized_effects_js_1.getPropStatusesCtx)(propStatuses, {
+                        ...nodePath,
+                        videoConfigValues,
+                    }),
                 frame,
             });
         }, [
@@ -269,6 +274,7 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity =
             dragOverrides,
             nodePath,
             propStatuses,
+            videoConfigValues,
             frame,
         ]);
         // 4. Eliminate values forbidden by the resolved discriminated union.

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

@@ -4,6 +4,8 @@ export declare function useRemotionContexts(): {
     timelineContext: import("./TimelineContext.js").TimelineContextValue | null;
     setTimelineContext: import("./TimelineContext.js").SetTimelineContextValue;
     sequenceContext: import("./SequenceContext.js").SequenceContextType | null;
+    experimentalTracksEnabled: boolean;
+    timelineTrackContext: import("./timeline-track-context.js").TimelineTrack | null;
     canUseRemotionHooksContext: boolean;
     preloadContext: {
         [x: string]: string;

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

@@ -49,12 +49,15 @@ const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.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 TimelineContext_js_1 = require("./TimelineContext.js");
 function useRemotionContexts() {
     const compositionManagerCtx = react_1.default.useContext(CompositionManagerContext_js_1.CompositionManager);
     const timelineContext = react_1.default.useContext(TimelineContext_js_1.TimelineContext);
     const setTimelineContext = react_1.default.useContext(TimelineContext_js_1.SetTimelineContext);
     const sequenceContext = react_1.default.useContext(SequenceContext_js_1.SequenceContext);
+    const experimentalTracksEnabled = react_1.default.useContext(timeline_track_context_js_1.ExperimentalTracksEnabledContext);
+    const timelineTrackContext = react_1.default.useContext(timeline_track_context_js_1.TimelineTrackContext);
     const canUseRemotionHooksContext = react_1.default.useContext(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
     const preloadContext = react_1.default.useContext(prefetch_state_js_1.PreloadContext);
     const resolveCompositionContext = react_1.default.useContext(ResolveCompositionConfig_js_1.ResolveCompositionContext);
@@ -69,6 +72,8 @@ function useRemotionContexts() {
         timelineContext,
         setTimelineContext,
         sequenceContext,
+        experimentalTracksEnabled,
+        timelineTrackContext,
         canUseRemotionHooksContext,
         preloadContext,
         resolveCompositionContext,
@@ -81,6 +86,8 @@ function useRemotionContexts() {
     }), [
         compositionManagerCtx,
         sequenceContext,
+        experimentalTracksEnabled,
+        timelineTrackContext,
         setTimelineContext,
         timelineContext,
         canUseRemotionHooksContext,
@@ -96,6 +103,6 @@ function useRemotionContexts() {
 }
 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(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 }) }) }) }) }) }) }) }) }) }) }) }) }));
+    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(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: jsx_runtime_1.jsx(timeline_track_context_js_1.ExperimentalTracksEnabledContext.Provider, { value: contexts.experimentalTracksEnabled, children: jsx_runtime_1.jsx(timeline_track_context_js_1.TimelineTrackContext.Provider, { value: contexts.timelineTrackContext, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionContextProvider = RemotionContextProvider;