remotion 4.0.533 → 4.0.534

package/dist/cjs/CompositionManager.d.ts

@@ -7,6 +7,7 @@ import type { EffectDefinition } from './effects/effect-types.js';
 import type { InteractivitySchema } from './interactivity-schema.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 import type { RuntimeValueSnapshot, RuntimeValueStore } from './runtime-value-store.js';
+import type { TimelineTrackItem } from './timeline-track-context.js';
 import type { VideoConfigValues } from './video-config.js';
 export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     width: number | undefined;
@@ -89,8 +90,11 @@ export type TSequence = {
     parent: string | null;
     showInTimeline: boolean;
     timelineOrder: number | null;
+    timelineTrack?: TimelineTrackItem;
     loopDisplay: LoopDisplay | undefined;
     getStack: () => string | null;
+    /** Read the committed child clock without updating timeline metadata each frame. */
+    getCurrentFrame?: (() => number) | null;
     premountDisplay: number | null;
     postmountDisplay: number | null;
     controls: SequenceRegistrationControls | null;

package/dist/cjs/CompositionManagerProvider.js

@@ -28,11 +28,10 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
     // CompositionManagerProvider state
     const currentcompositionsRef = (0, react_1.useRef)(compositions);
     const updateCompositions = (0, react_1.useCallback)((updateComps) => {
-        setCompositions((comps) => {
-            const updated = updateComps(comps);
-            currentcompositionsRef.current = updated;
-            return updated;
-        });
+        // The renderer may read registrations before React commits the state.
+        const updated = updateComps(currentcompositionsRef.current);
+        currentcompositionsRef.current = updated;
+        setCompositions(updated);
     }, []);
     const registerComposition = (0, react_1.useCallback)((comp) => {
         const orderKey = (0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
@@ -58,10 +57,8 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
     }, [updateCompositions]);
     const unregisterComposition = (0, react_1.useCallback)((id) => {
         internalOrderRef.current.delete((0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({ type: 'composition', id }));
-        setCompositions((comps) => {
-            return comps.filter((c) => c.id !== id);
-        });
-    }, []);
+        updateCompositions((comps) => comps.filter((c) => c.id !== id));
+    }, [updateCompositions]);
     const registerFolder = (0, react_1.useCallback)((name, parent, stack) => {
         const orderKey = (0, sequence_order_marker_js_1.getCompositionAndFolderOrderKey)({
             type: 'folder',

package/dist/cjs/HtmlInCanvas.js

@@ -147,7 +147,7 @@ const defaultOnPaint = ({ canvas, elementImage, }) => {
 /* eslint-enable react/require-default-props */
 const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
 const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, children, canvasSiblings, onPaint, onInit, pixelDensity, controls, style, }, ref) => {
-    var _a;
+    var _a, _b;
     const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
     if (isInsideAncestorHtmlInCanvas && !(0, exports.isHtmlInCanvasNestingSupported)()) {
@@ -180,6 +180,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
         overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
+        videoConfigValues: (_b = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _b !== void 0 ? _b : null,
     });
     // Refs so the paint handler always reads fresh values.
     const effectsRef = (0, react_1.useRef)(memoizedEffects);

package/dist/cjs/Sequence.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { LoopDisplay, SequenceControls } from './CompositionManager.js';
 import type { EffectDefinition } from './effects/effect-types.js';
+import { type TimelineTrackItem } from './timeline-track-context.js';
 import type { BasicMediaInTimelineReturnType } from './use-media-in-timeline.js';
 export type AbsoluteFillLayout = {
     layout?: 'absolute-fill';
@@ -32,6 +33,10 @@ export type SequencePropsWithoutDuration = {
     readonly hidden?: boolean;
     readonly controls?: SequenceControls;
     readonly _remotionInternalEffects?: readonly EffectDefinition<unknown>[];
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalTimelineTrack?: Pick<TimelineTrackItem, 'role'>;
     /**
      * @deprecated For internal use only.
      */

package/dist/cjs/Sequence.js

@@ -18,6 +18,7 @@ const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const is_inside_series_js_1 = require("./series/is-inside-series.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const timeline_track_context_js_1 = require("./timeline-track-context.js");
 const use_premounting_js_1 = require("./use-premounting.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_sequence_registration_js_1 = require("./use-sequence-registration.js");
@@ -26,12 +27,14 @@ const v5_flag_js_1 = require("./v5-flag.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const SeriesContentVisibilityContext = (0, react_1.createContext)(true);
 const EMPTY_EFFECTS = [];
-const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playbackRate = 1, loop = false, freeze, durationInFrames, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalSingleChildComponent: singleChildComponent, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, cropLeft, cropRight, cropTop, cropBottom, ...other }, ref) => {
-    var _a, _b, _c, _d, _e;
+const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playbackRate = 1, loop = false, freeze, durationInFrames, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalTimelineTrack: timelineTrackItem, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalSingleChildComponent: singleChildComponent, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, cropLeft, cropRight, cropTop, cropBottom, ...other }, ref) => {
+    var _a, _b, _c, _d, _e, _f;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const parentPlaybackRate = (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.playbackRate) !== null && _a !== void 0 ? _a : 1;
+    const timelineTrack = (0, react_1.useContext)(timeline_track_context_js_1.TimelineTrackContext);
+    const timelineTrackRole = (_a = timelineTrackItem === null || timelineTrackItem === void 0 ? void 0 : timelineTrackItem.role) !== null && _a !== void 0 ? _a : 'clip';
+    const parentPlaybackRate = (_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.playbackRate) !== null && _b !== void 0 ? _b : 1;
     const cumulativePlaybackRate = parentPlaybackRate * playbackRate;
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
@@ -141,7 +144,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     const clockFrom = from + loopOffset;
     const effectiveRelativeFrom = clockFrom - trimBefore / playbackRate;
     const relativeFrom = effectiveRelativeFrom / parentPlaybackRate;
-    const absoluteFrom = ((_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _b !== void 0 ? _b : 0) + relativeFrom;
+    const absoluteFrom = ((_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _c !== void 0 ? _c : 0) + relativeFrom;
     // Inside a loop, the local clock ends after `durationInFrames`, except in a final
     // iteration that the parent cuts short.
     const localClockEnd = loopPeriod === null
@@ -255,11 +258,18 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     // and if it changes, it would lead to-remounting of the sequence.
     const stackRef = (0, react_1.useRef)(null);
     stackRef.current = controls
-        ? ((_d = (_c = (0, enable_sequence_stack_traces_js_1.getStackForControls)(controls)) !== null && _c !== void 0 ? _c : stack) !== null && _d !== void 0 ? _d : null)
+        ? ((_e = (_d = (0, enable_sequence_stack_traces_js_1.getStackForControls)(controls)) !== null && _d !== void 0 ? _d : stack) !== null && _e !== void 0 ? _e : null)
         : (stack !== null && stack !== void 0 ? stack : null);
+    const getStack = (0, react_1.useCallback)(() => stackRef.current, []);
     const registeredFrozenFrame = typeof freeze === 'number' ? freeze : null;
+    const currentFrame = registeredFrozenFrame !== null && registeredFrozenFrame !== void 0 ? registeredFrozenFrame : (absoluteFrame - currentSequenceStart) * cumulativePlaybackRate;
+    const currentFrameRef = (0, react_1.useRef)(currentFrame);
+    (0, react_1.useLayoutEffect)(() => {
+        currentFrameRef.current = currentFrame;
+    }, [currentFrame]);
+    const getCurrentFrame = (0, react_1.useCallback)(() => currentFrameRef.current, []);
     const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
-    const parentCumulatedNegativeFrom = (_e = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _e !== void 0 ? _e : 0;
+    const parentCumulatedNegativeFrom = (_f = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _f !== void 0 ? _f : 0;
     const startMediaFrom = isMedia && isMedia.type !== 'image'
         ? isMedia.data.startMediaFrom +
             parentCumulatedNegativeFrom -
@@ -335,9 +345,18 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     ]);
     const getSequenceForRegistration = (0, react_1.useCallback)(() => {
         var _a, _b, _c;
+        const trackRegistration = timelineTrack
+            ? {
+                timelineTrack: {
+                    ...timelineTrack,
+                    role: timelineTrackRole,
+                },
+            }
+            : {};
         if (isMedia) {
             if (isMedia.type === 'image') {
                 return {
+                    ...trackRegistration,
                     sequencePlaybackRate: playbackRate,
                     type: 'image',
                     controls: registrationControls,
@@ -356,7 +375,8 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
                     showInTimeline,
                     timelineOrder: null,
                     src: isMedia.src,
-                    getStack: () => stackRef.current,
+                    getStack,
+                    getCurrentFrame,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
                     frozenFrame: registeredFrozenFrame,
@@ -364,6 +384,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
                 };
             }
             return {
+                ...trackRegistration,
                 type: isMedia.type,
                 sequencePlaybackRate: playbackRate,
                 controls: registrationControls,
@@ -384,7 +405,8 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
                 showInTimeline,
                 timelineOrder: null,
                 src: isMedia.data.src,
-                getStack: () => stackRef.current,
+                getStack,
+                getCurrentFrame,
                 startMediaFrom: startMediaFrom !== null && startMediaFrom !== void 0 ? startMediaFrom : isMedia.data.startMediaFrom,
                 mediaFrameAtSequenceZero,
                 volume: isMedia.data.volumes,
@@ -397,6 +419,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
             };
         }
         return {
+            ...trackRegistration,
             from,
             sequencePlaybackRate: playbackRate,
             trimBefore: registeredTrimBefore,
@@ -412,7 +435,8 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
             showInTimeline,
             timelineOrder: null,
             loopDisplay: resolvedLoopDisplay,
-            getStack: () => stackRef.current,
+            getStack,
+            getCurrentFrame,
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
             controls: registrationControls,
@@ -425,6 +449,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         };
     }, [
         id,
+        timelineTrack,
+        timelineTrackRole,
+        getCurrentFrame,
+        getStack,
         timelineClipName,
         playbackRate,
         parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id,
@@ -513,8 +541,13 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     // Retain resolved scene registrations so Studio can recover the natural end
     // even when seeking past an explicit wrapper trim. Scene contents stay hidden.
     const retainSeriesRegistration = env.isStudio && canInferDuration;
-    const sequenceContent = loopedContent === null ? (retainSeriesRegistration ? (children) : null) : other.layout === 'none' ? (loopedContent) : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: sequenceRef, style: defaultStyle, className: other.className, children: loopedContent }));
-    const sequence = (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: retainSeriesRegistration ? (jsx_runtime_1.jsx(SeriesContentVisibilityContext.Provider, { value: content !== null, children: sequenceContent })) : (sequenceContent) }));
+    const renderedContent = loopedContent === null ? (retainSeriesRegistration ? (children) : null) : other.layout === 'none' ? (loopedContent) : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: sequenceRef, style: defaultStyle, className: other.className, children: loopedContent }));
+    const sequenceContent = (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: retainSeriesRegistration ? (jsx_runtime_1.jsx(SeriesContentVisibilityContext.Provider, { value: content !== null, children: renderedContent })) : (renderedContent) }));
+    // Keep the provider mounted when track grouping changes so clip state survives.
+    const sequence = (jsx_runtime_1.jsx(timeline_track_context_js_1.TimelineTrackContext.Provider, { value: timelineTrackRole === 'track' ||
+            (timelineTrackRole === 'clip' && !showInTimeline)
+            ? timelineTrack
+            : null, children: sequenceContent }));
     return shouldDiscoverOutline ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: id, outlineChildrenRef: automaticOutlineRef, children: sequence })) : (sequence);
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);

package/dist/cjs/SequenceManager.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { TSequence } from './CompositionManager.js';
 import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, PropStatuses } from './use-schema.js';
+import type { SourceNumericValue } from './use-schema.js';
 import type { VideoConfigValues } from './video-config.js';
 export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
@@ -66,12 +67,12 @@ export type VisualModeBatchSetters = {
         readonly value: DragOverrideValue;
     }[]) => void;
 };
-export type CanUpdateEffectPropsResponseTrue = {
+export type CanUpdateEffectPropsResponseTrue<Numeric = SourceNumericValue> = {
     canUpdate: true;
     callee: string;
     importPath: string | null;
     effectIndex: number;
-    props: Record<string, CanUpdateSequencePropStatus>;
+    props: Record<string, CanUpdateSequencePropStatus<Numeric>>;
 };
 export type CannotUpdateEffectReason = 'not-found' | 'computed' | 'not-call-expression';
 export type CannotUpdateSequenceReason = 'not-found' | 'error';
@@ -80,17 +81,17 @@ export type CanUpdateEffectPropsResponseFalse = {
     effectIndex: number;
     reason: CannotUpdateEffectReason;
 };
-export type CanUpdateEffectPropsResponse = CanUpdateEffectPropsResponseTrue | CanUpdateEffectPropsResponseFalse;
-export type CanUpdateSequencePropsResponseTrue = {
+export type CanUpdateEffectPropsResponse<Numeric = SourceNumericValue> = CanUpdateEffectPropsResponseTrue<Numeric> | CanUpdateEffectPropsResponseFalse;
+export type CanUpdateSequencePropsResponseTrue<Numeric = SourceNumericValue> = {
     canUpdate: true;
-    props: Record<string, CanUpdateSequencePropStatus>;
-    effects: CanUpdateEffectPropsResponse[];
+    props: Record<string, CanUpdateSequencePropStatus<Numeric>>;
+    effects: CanUpdateEffectPropsResponse<Numeric>[];
 };
 export type CanUpdateSequencePropsResponseFalse = {
     canUpdate: false;
     reason: CannotUpdateSequenceReason;
 };
-export type CanUpdateSequencePropsResponse = CanUpdateSequencePropsResponseTrue | CanUpdateSequencePropsResponseFalse;
+export type CanUpdateSequencePropsResponse<Numeric = SourceNumericValue> = CanUpdateSequencePropsResponseTrue<Numeric> | CanUpdateSequencePropsResponseFalse;
 export declare const makeSequencePropsSubscriptionKey: (key: SequencePropsSubscriptionKey) => string;
 export declare const VisualModePropStatusesContext: React.Context<VisualModePropStatuses>;
 export declare const VisualModePropStatusesRefContext: React.Context<VisualModePropStatusesRef>;
@@ -105,6 +106,7 @@ export type SequencePropsSubscriptionKey = {
     nodePath: SequenceNodePath;
     sequenceKeys: string[];
     effectKeys: string[][];
+    /** Evaluation context of a rendered instance. Never part of source identity. */
     videoConfigValues: VideoConfigValues | null;
 };
 export type { VideoConfigValues } from './video-config.js';

package/dist/cjs/SequenceManager.js

@@ -505,11 +505,31 @@ const SequenceManagerProvider = ({ children }) => {
             if (index === -1) {
                 return seqs;
             }
+            const previousSequence = seqs[index];
+            const timelineOrder = (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(seq.id)) !== null && _b !== void 0 ? _b : null;
+            // A new registration getter does not necessarily change the metadata.
+            let unchanged = Object.is(previousSequence.timelineOrder, timelineOrder);
+            // The manager adds timelineOrder even if the incoming object omits it.
+            let keyCount = 1;
+            if (unchanged) {
+                for (const key in seq) {
+                    if (key === 'timelineOrder' ||
+                        !Object.prototype.hasOwnProperty.call(seq, key)) {
+                        continue;
+                    }
+                    keyCount++;
+                    if (!Object.prototype.hasOwnProperty.call(previousSequence, key) ||
+                        !Object.is(previousSequence[key], seq[key])) {
+                        unchanged = false;
+                        break;
+                    }
+                }
+            }
+            if (unchanged && Object.keys(previousSequence).length === keyCount) {
+                return seqs;
+            }
             const next = [...seqs];
-            next[index] = {
-                ...seq,
-                timelineOrder: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(seq.id)) !== null && _b !== void 0 ? _b : null,
-            };
+            next[index] = { ...seq, timelineOrder };
             return next;
         });
     }, []);

package/dist/cjs/Track.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type SequenceProps } from './Sequence.js';
+export type TrackProps = Pick<SequenceProps, 'children' | 'name' | 'from' | 'durationInFrames' | 'hidden' | 'showInTimeline'>;
+export declare const TrackWithoutSchema: React.FC<SequenceProps>;
+/** Groups clips on one Studio timeline row and applies Sequence timing. */
+export declare const Track: React.ComponentType<TrackProps>;

package/dist/cjs/Track.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Track = exports.TrackWithoutSchema = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const interactivity_schema_js_1 = require("./interactivity-schema.js");
+const Sequence_js_1 = require("./Sequence.js");
+const timeline_track_context_js_1 = require("./timeline-track-context.js");
+const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
+const trackSchema = {
+    name: interactivity_schema_js_1.sequenceSchema.name,
+    hidden: interactivity_schema_js_1.sequenceSchema.hidden,
+};
+// Series variants share the Track foundation while retaining their own
+// Sequence props, layout defaults, and interactivity schemas.
+const TrackWithoutSchema = ({ name = 'Track', children, layout = 'none', ...props }) => {
+    const [id] = (0, react_1.useState)(() => String(Math.random()));
+    const tracksEnabled = (0, react_1.useContext)(timeline_track_context_js_1.ExperimentalTracksEnabledContext);
+    const value = (0, react_1.useMemo)(() => (tracksEnabled ? { id, name } : null), [id, name, tracksEnabled]);
+    return (jsx_runtime_1.jsx(timeline_track_context_js_1.TimelineTrackContext.Provider, { value: value, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { ...props, name: name, layout: layout, _remotionInternalTimelineTrack: { role: 'track' }, children: children }) }));
+};
+exports.TrackWithoutSchema = TrackWithoutSchema;
+/** Groups clips on one Studio timeline row and applies Sequence timing. */
+exports.Track = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
+    Component: exports.TrackWithoutSchema,
+    componentName: '<Track>',
+    componentIdentity: 'dev.remotion.remotion.Track',
+    schema: trackSchema,
+    supportsEffects: false,
+});
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Track);

package/dist/cjs/animated-image/AnimatedImage.js

@@ -52,7 +52,7 @@ const getCanvasPropsFromSequenceProps = (props) => {
     return canvasProps;
 };
 const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, controls, ...props }, canvasRef) => {
-    var _a;
+    var _a, _b;
     const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
     const [imageDecoder, setImageDecoder] = (0, react_2.useState)(null);
     const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
@@ -69,6 +69,7 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
         overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
+        videoConfigValues: (_b = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _b !== void 0 ? _b : null,
     });
     (0, react_2.useImperativeHandle)(canvasRef, () => {
         var _a;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -111,7 +111,7 @@ const waitForNextFrame = ({ onFrame, }) => {
     return () => cancelAnimationFrame(frame);
 };
 const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...canvasProps }, ref) => {
-    var _a;
+    var _a, _b;
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
     const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
@@ -121,6 +121,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, h
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
         overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
+        videoConfigValues: (_b = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _b !== void 0 ? _b : null,
     });
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const pendingLoadDelayRef = (0, react_1.useRef)(null);

package/dist/cjs/effects/Solid.js

@@ -65,7 +65,7 @@ exports.solidSchema = {
     ...interactivity_schema_js_1.borderRadiusSchema,
     ...interactivity_schema_js_1.cropSchema,
 };
-const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, reference, }) => {
+const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, videoConfigValues, reference, }) => {
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
@@ -74,6 +74,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
         overrideId: overrideId !== null && overrideId !== void 0 ? overrideId : null,
+        videoConfigValues,
     });
     const sourceCanvas = (0, react_1.useMemo)(() => {
         if (typeof document === 'undefined') {
@@ -157,7 +158,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: canvasWidth, height: canvasHeight, className: className, style: canvasStyle }));
 };
 const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, height, width, className, durationInFrames, style, name, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, hidden, showInTimeline, pixelDensity, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
-    var _a;
+    var _a, _b;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
@@ -186,7 +187,7 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, hei
         style: premountingStyle,
         componentName: '<Solid />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, pixelDensity: pixelDensity }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, videoConfigValues: (_a = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _a !== void 0 ? _a : null, overrideId: (_b = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _b !== void 0 ? _b : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, pixelDensity: pixelDensity }) }) }));
 });
 exports.Solid = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SolidOuter,

package/dist/cjs/effects/use-memoized-effects.d.ts

@@ -2,6 +2,7 @@ import type { RuntimeValueStore } from '../runtime-value-store.js';
 import type { CannotUpdateEffectReason, CannotUpdateSequenceReason } from '../SequenceManager.js';
 import { type SequencePropsSubscriptionKey } from '../SequenceManager.js';
 import { type CanUpdateSequencePropStatus, type PropStatuses } from '../use-schema.js';
+import type { VideoConfigValues } from '../video-config.js';
 import type { EffectDefinitionAndStack, EffectDescriptor, EffectDefinition } from './effect-types.js';
 export declare const useMemoizedEffectDefinitions: (effects: readonly EffectDescriptor<unknown>[]) => readonly EffectDefinition<unknown>[] & {
     readonly runtimeValues: readonly RuntimeValueStore[];
@@ -23,8 +24,9 @@ export declare const getEffectPropStatusesCtx: ({ propStatuses, nodePath, effect
 }) => EffectStatus;
 export declare const getPropStatusesCtx: (propStatuses: PropStatuses, nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
 export type GetPropStatusesType = typeof getPropStatusesCtx;
-export declare const useMemoizedEffects: ({ effects, overrideId, }: {
+export declare const useMemoizedEffects: ({ effects, overrideId, videoConfigValues, }: {
     effects: readonly EffectDescriptor<unknown>[];
     readonly overrideId: string | null;
+    videoConfigValues: VideoConfigValues | null;
 }) => EffectDefinitionAndStack<unknown>[];
 export {};

package/dist/cjs/effects/use-memoized-effects.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMemoizedEffects = exports.getPropStatusesCtx = exports.getEffectPropStatusesCtx = exports.useMemoizedEffectDefinitions = void 0;
 const react_1 = require("react");
+const evaluate_source_expressions_js_1 = require("../evaluate-source-expressions.js");
 const get_effective_visual_mode_value_js_1 = require("../get-effective-visual-mode-value.js");
 const interpolate_keyframed_status_js_1 = require("../interpolate-keyframed-status.js");
 const runtime_value_store_js_1 = require("../runtime-value-store.js");
@@ -106,7 +107,10 @@ const getEffectPropStatusesCtx = ({ propStatuses, nodePath, effectIndex, }) => {
     if (!effect.canUpdate) {
         return { type: 'cannot-update-effect', reason: effect.reason };
     }
-    return { type: 'can-update-effect', props: effect.props };
+    return {
+        type: 'can-update-effect',
+        props: (0, evaluate_source_expressions_js_1.evaluateSourcePropStatuses)(effect.props, nodePath.videoConfigValues),
+    };
 };
 exports.getEffectPropStatusesCtx = getEffectPropStatusesCtx;
 const getPropStatusesCtx = (propStatuses, nodePath) => {
@@ -117,10 +121,10 @@ const getPropStatusesCtx = (propStatuses, nodePath) => {
     if (!status.canUpdate) {
         return undefined;
     }
-    return status.props;
+    return (0, evaluate_source_expressions_js_1.evaluateSourcePropStatuses)(status.props, nodePath.videoConfigValues);
 };
 exports.getPropStatusesCtx = getPropStatusesCtx;
-const useMemoizedEffects = ({ effects, overrideId, }) => {
+const useMemoizedEffects = ({ effects, overrideId, videoConfigValues, }) => {
     var _a;
     const previousRef = (0, react_1.useRef)(null);
     const { propStatuses } = (0, react_1.useContext)(SequenceManager_js_1.VisualModePropStatusesContext);
@@ -142,7 +146,7 @@ const useMemoizedEffects = ({ effects, overrideId, }) => {
         }
         const effectStatus = (0, exports.getEffectPropStatusesCtx)({
             propStatuses,
-            nodePath,
+            nodePath: { ...nodePath, videoConfigValues },
             effectIndex: index,
         });
         const propStatusOverrides = effectStatus.type === 'can-update-effect'

package/dist/cjs/evaluate-source-expressions.d.ts

@@ -0,0 +1,5 @@
+import type { CanUpdateSequencePropSource, CanUpdateSequencePropStatus, SourceNumericValue } from './use-schema.js';
+import type { VideoConfigValues } from './video-config.js';
+export declare const evaluateSourceNumericValue: (expression: SourceNumericValue, config: VideoConfigValues | null) => number;
+/** Resolve at the consumer, never in the shared source subscription cache. */
+export declare const evaluateSourcePropStatuses: (props: Record<string, CanUpdateSequencePropSource>, config: VideoConfigValues | null) => Record<string, CanUpdateSequencePropStatus>;

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;