remotion 4.0.535 → 4.0.537

package/dist/cjs/SequenceActivityBudget.js

@@ -50,8 +50,9 @@ const createActivityBudget = () => {
     let frame = {};
     let limit = sequence_activity_context_js_1.DEFAULT_SEQUENCE_ACTIVITY_LIMIT;
     let scheduled = false;
+    let suspended = false;
     const schedule = () => {
-        if (scheduled) {
+        if (scheduled || suspended) {
             return;
         }
         scheduled = true;
@@ -59,6 +60,9 @@ const createActivityBudget = () => {
         // whole commit, once all candidates and the root playhead are current.
         queueMicrotask(() => {
             scheduled = false;
+            if (suspended) {
+                return;
+            }
             const ranked = [...candidates.values()]
                 .filter((candidate) => candidate.end > candidate.from)
                 .map((candidate) => {
@@ -105,6 +109,12 @@ const createActivityBudget = () => {
     };
     return {
         ...registry,
+        setSuspended: (next) => {
+            if (suspended !== next) {
+                suspended = next;
+                schedule();
+            }
+        },
         setLimit: (next) => {
             if (limit !== next) {
                 limit = next;
@@ -133,10 +143,11 @@ const SequenceActivityBudgetProvider = ({ children }) => {
     var _a;
     const enabled = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityContext);
     const settings = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivitySettingsContext);
+    const suspended = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivitySuspensionContext);
     const limit = (_a = settings === null || settings === void 0 ? void 0 : settings.limit) !== null && _a !== void 0 ? _a : sequence_activity_context_js_1.DEFAULT_SEQUENCE_ACTIVITY_LIMIT;
-    const admitting = enabled && limit > 0;
+    const admitting = enabled && limit > 0 && limit !== Infinity;
     const [budget] = (0, react_1.useState)(createActivityBudget);
-    const timeline = (0, react_1.useContext)(admitting ? TimelineContext_js_1.TimelineContext : InactiveTimelineContext);
+    const timeline = (0, react_1.useContext)(admitting && !suspended ? TimelineContext_js_1.TimelineContext : InactiveTimelineContext);
     const selected = (0, use_sync_external_store_js_1.useSyncExternalStore)(budget.subscribe, budget.getSnapshot, budget.getSnapshot);
     // Shrinking the setting must not keep the old, larger selection for a commit
     // while the budget schedules its new snapshot.
@@ -146,26 +157,30 @@ const SequenceActivityBudgetProvider = ({ children }) => {
             ? new Set([...selected].slice(0, limit))
             : selected, [admitting, limit, selected]);
     useCommitEffect(() => {
+        // Retain the admitted trees while moving the playhead. Re-ranking would
+        // unmount their suspended content and remove its timeline registrations.
+        budget.setSuspended(suspended);
         budget.setLimit(admitting ? limit : 0);
         if (admitting && timeline !== null) {
             budget.setFrame(timeline.frame);
         }
-    }, [admitting, budget, limit, timeline]);
+    }, [admitting, budget, limit, suspended, timeline]);
     return (jsx_runtime_1.jsx(ActivityBudgetContext.Provider, { value: admitting ? budget : null, children: jsx_runtime_1.jsx(ActivitySelectionContext.Provider, { value: admitted, children: children }) }));
 };
 exports.SequenceActivityBudgetProvider = SequenceActivityBudgetProvider;
 const useSequenceActivityAdmission = (candidate) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const budget = (0, react_1.useContext)(ActivityBudgetContext);
     const enabled = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityContext);
     const settings = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivitySettingsContext);
-    const unlimited = enabled && (settings === null || settings === void 0 ? void 0 : settings.limit) === -1;
+    const unlimited = enabled &&
+        ((_a = settings === null || settings === void 0 ? void 0 : settings.limit) !== null && _a !== void 0 ? _a : sequence_activity_context_js_1.DEFAULT_SEQUENCE_ACTIVITY_LIMIT) === Infinity;
     const selected = (0, react_1.useContext)(ActivitySelectionContext);
-    const id = (_a = candidate === null || candidate === void 0 ? void 0 : candidate.id) !== null && _a !== void 0 ? _a : null;
-    const parent = (_b = candidate === null || candidate === void 0 ? void 0 : candidate.parent) !== null && _b !== void 0 ? _b : null;
-    const compositionId = (_c = candidate === null || candidate === void 0 ? void 0 : candidate.compositionId) !== null && _c !== void 0 ? _c : null;
-    const from = (_d = candidate === null || candidate === void 0 ? void 0 : candidate.from) !== null && _d !== void 0 ? _d : null;
-    const end = (_e = candidate === null || candidate === void 0 ? void 0 : candidate.end) !== null && _e !== void 0 ? _e : null;
+    const id = (_b = candidate === null || candidate === void 0 ? void 0 : candidate.id) !== null && _b !== void 0 ? _b : null;
+    const parent = (_c = candidate === null || candidate === void 0 ? void 0 : candidate.parent) !== null && _c !== void 0 ? _c : null;
+    const compositionId = (_d = candidate === null || candidate === void 0 ? void 0 : candidate.compositionId) !== null && _d !== void 0 ? _d : null;
+    const from = (_e = candidate === null || candidate === void 0 ? void 0 : candidate.from) !== null && _e !== void 0 ? _e : null;
+    const end = (_f = candidate === null || candidate === void 0 ? void 0 : candidate.end) !== null && _f !== void 0 ? _f : null;
     const committedCandidate = (0, react_1.useMemo)(() => id !== null && compositionId !== null && from !== null && end !== null
         ? { id, parent, compositionId, from, end }
         : null, [id, parent, compositionId, from, end]);

package/dist/cjs/SequenceActivitySuspensionProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SequenceActivitySuspensionProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/cjs/SequenceActivitySuspensionProvider.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceActivitySuspensionProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const sequence_activity_context_js_1 = require("./sequence-activity-context.js");
+const TimelineContext_js_1 = require("./TimelineContext.js");
+const SequenceActivitySuspensionProvider = ({ children }) => {
+    const enabled = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityContext);
+    const { isPlaying, subscribePlaying, seek } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
+    const [suspended, setSuspended] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!enabled) {
+            setSuspended(false);
+            return;
+        }
+        let timeout = null;
+        const update = () => {
+            setSuspended(isPlaying() || timeout !== null);
+        };
+        const unsubscribePlaying = subscribePlaying(update);
+        const unsubscribeSeek = seek === null || seek === void 0 ? void 0 : seek.subscribe(() => {
+            setSuspended(true);
+            if (timeout !== null) {
+                clearTimeout(timeout);
+            }
+            // Repeated pointer, keyboard, and API seeks keep discovery suspended.
+            // Resume only once navigation settles, using the latest scene props.
+            timeout = setTimeout(() => {
+                timeout = null;
+                update();
+            }, 150);
+        });
+        update();
+        return () => {
+            unsubscribePlaying();
+            unsubscribeSeek === null || unsubscribeSeek === void 0 ? void 0 : unsubscribeSeek();
+            if (timeout !== null) {
+                clearTimeout(timeout);
+            }
+        };
+    }, [enabled, isPlaying, seek, subscribePlaying]);
+    return (jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivitySuspensionContext.Provider, { value: suspended, children: children }));
+};
+exports.SequenceActivitySuspensionProvider = SequenceActivitySuspensionProvider;

package/dist/cjs/SequenceManager.d.ts

@@ -67,6 +67,11 @@ export type CanUpdateSequencePropsResponseTrue<Numeric = SourceNumericValue> = {
     canUpdate: true;
     props: Record<string, CanUpdateSequencePropStatus<Numeric>>;
     effects: CanUpdateEffectPropsResponse<Numeric>[];
+    /** Source ranges also include interpolations outside the editable schema. */
+    durationDependentKeyframes: {
+        readonly scope: SequenceNodePath;
+        readonly inputRanges: readonly (readonly SourceNumericValue[] | null)[];
+    } | null;
 };
 export type CanUpdateSequencePropsResponseFalse = {
     canUpdate: false;

package/dist/cjs/SequenceManager.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 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);
 };
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceManagerProvider = exports.VisualModeBatchSettersContext = exports.VisualModeSettersContext = exports.useEffectDragOverridesForNodePath = exports.useActiveFromDragOverrideKeys = exports.useDragOverridesForNodePath = exports.VisualModeDragOverridesRefContext = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.VisualModeDragOverridesSubscriptionContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -43,23 +44,26 @@ __exportStar(require("./sequence-registry-context.js"), exports);
 const sequence_activity_context_js_1 = require("./sequence-activity-context.js");
 const sequence_registry_context_js_1 = require("./sequence-registry-context.js");
 const SequenceActivityBudget_js_1 = require("./SequenceActivityBudget.js");
+const SequenceActivitySuspensionProvider_js_1 = require("./SequenceActivitySuspensionProvider.js");
 const SequenceRegistryProvider_js_1 = require("./SequenceRegistryProvider.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_sync_external_store_js_1 = require("./use-sync-external-store.js");
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.default.useEffect : react_1.default.useLayoutEffect;
+const useCommitEffect = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : useIsomorphicLayoutEffect;
 exports.VisualModeDragOverridesSubscriptionContext = react_1.default.createContext(null);
 const ActiveFromDragOverrideKeysContext = react_1.default.createContext(null);
 const SequenceManagerScopeProviders = ({ children, dragOverridesSubscription, fromKeys }) => {
+    var _a;
     const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const activitySettings = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivitySettingsContext);
     const commitRegistrationEnabled = (0, react_1.useContext)(sequence_registry_context_js_1.SequenceCommitRegistrationContext);
     const manager = (0, react_1.useContext)(sequence_registry_context_js_1.SequenceManagerActionsContext);
     const scopedDragOverridesSubscription = (0, react_1.useMemo)(() => ({ ...dragOverridesSubscription, manager }), [dragOverridesSubscription, manager]);
     const activeFromDragOverrideKeys = (0, react_1.useMemo)(() => ({ manager, keys: fromKeys }), [fromKeys, manager]);
-    return (jsx_runtime_1.jsx(ActiveFromDragOverrideKeysContext.Provider, { value: activeFromDragOverrideKeys, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesSubscriptionContext.Provider, { value: scopedDragOverridesSubscription, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivityContext.Provider, { value: (activitySettings === null || activitySettings === void 0 ? void 0 : activitySettings.enabled) === true &&
+    return (jsx_runtime_1.jsx(ActiveFromDragOverrideKeysContext.Provider, { value: activeFromDragOverrideKeys, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesSubscriptionContext.Provider, { value: scopedDragOverridesSubscription, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivityContext.Provider, { value: ((_a = activitySettings === null || activitySettings === void 0 ? void 0 : activitySettings.limit) !== null && _a !== void 0 ? _a : sequence_activity_context_js_1.DEFAULT_SEQUENCE_ACTIVITY_LIMIT) > 0 &&
                     isStudio &&
                     commitRegistrationEnabled &&
-                    typeof react_1.default.Activity !== 'undefined', children: jsx_runtime_1.jsx(SequenceActivityBudget_js_1.SequenceActivityBudgetProvider, { children: children }) }) }) }));
+                    typeof react_1.default.Activity !== 'undefined', children: jsx_runtime_1.jsx(SequenceActivitySuspensionProvider_js_1.SequenceActivitySuspensionProvider, { children: jsx_runtime_1.jsx(SequenceActivityBudget_js_1.SequenceActivityBudgetProvider, { children: children }) }) }) }) }));
 };
 const emptyDragOverrides = {};
 const emptyFromOverrideKeys = new Set();
@@ -84,6 +88,20 @@ const defaultVisualModeDragOverrides = {
 };
 exports.VisualModeDragOverridesContext = react_1.default.createContext(defaultVisualModeDragOverrides);
 exports.VisualModeDragOverridesRefContext = react_1.default.createContext({ current: defaultVisualModeDragOverrides });
+const useDragOverrideSnapshot = (subscribe, getSnapshot) => {
+    const dormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
+    const [, forceUpdate] = (0, react_1.useState)(0);
+    const snapshot = (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    useCommitEffect(() => {
+        if (!dormant) {
+            return;
+        }
+        // Activity disconnects passive subscriptions, including useSyncExternalStore.
+        // Insertion effects stay connected through nested hidden Activities.
+        return subscribe(() => forceUpdate((current) => current + 1));
+    }, [dormant, subscribe]);
+    return snapshot;
+};
 const useDragOverridesForNodePath = (nodePath) => {
     const subscription = (0, react_1.useContext)(exports.VisualModeDragOverridesSubscriptionContext);
     const manager = (0, react_1.useContext)(sequence_registry_context_js_1.SequenceManagerActionsContext);
@@ -97,7 +115,7 @@ const useDragOverridesForNodePath = (nodePath) => {
         var _a;
         return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.getSnapshot(key)) !== null && _a !== void 0 ? _a : emptyDragOverrides;
     }, [key, scopedSubscription]);
-    return (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    return useDragOverrideSnapshot(subscribe, getSnapshot);
 };
 exports.useDragOverridesForNodePath = useDragOverridesForNodePath;
 const useActiveFromDragOverrideKeys = () => {
@@ -119,7 +137,7 @@ const useEffectDragOverridesForNodePath = (nodePath) => {
         var _a;
         return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.getEffectSnapshot(key)) !== null && _a !== void 0 ? _a : emptyEffectDragOverrides;
     }, [key, scopedSubscription]);
-    return (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    return useDragOverrideSnapshot(subscribe, getSnapshot);
 };
 exports.useEffectDragOverridesForNodePath = useEffectDragOverridesForNodePath;
 exports.VisualModeSettersContext = react_1.default.createContext({

package/dist/cjs/Track.js

@@ -17,8 +17,7 @@ const trackSchema = {
 };
 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]);
+    const value = (0, react_1.useMemo)(() => ({ id, name }), [id, name]);
     return (jsx_runtime_1.jsx(timeline_track_context_js_1.TimelineTrackContext.Provider, { value: value, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/track", ...props, name: name, layout: layout, _remotionInternalTimelineTrack: { role: 'track', seriesOffset: null }, children: children }) }));
 };
 exports.TrackWithoutSchema = TrackWithoutSchema;

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { SequenceControls } from '../CompositionManager.js';
-import type { EffectsProp } from '../effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 export declare const animatedImageSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -115,7 +115,7 @@ export declare const animatedImageSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -236,6 +236,7 @@ export declare const AnimatedImage: React.ComponentType<import("../Interactive.j
     requestInit?: RequestInit | undefined;
 } & React.AriaAttributes & Record<`data-${string}`, string | undefined> & {
     readonly effects?: EffectsProp | undefined;
+    readonly effectsOutputSize?: EffectsOutputSize | undefined;
 } & {
     readonly controls?: SequenceControls | undefined;
     readonly ref?: React.Ref<HTMLCanvasElement> | undefined;

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

@@ -51,11 +51,12 @@ 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) => {
+const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, effectsOutputSize, controls, ...props }, canvasRef) => {
     var _a, _b, _c;
     const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
     const [decodedImage, setDecodedImage] = (0, react_2.useState)(null);
     const imageDecoder = (_a = decodedImage === null || decodedImage === void 0 ? void 0 : decodedImage.decoder) !== null && _a !== void 0 ? _a : null;
+    const activeDecoderRef = (0, react_2.useRef)(null);
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
@@ -85,6 +86,7 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
         const controller = new AbortController();
         let cancelled = false;
         let continued = false;
+        let decoder = null;
         const continueRenderOnce = () => {
             if (continued) {
                 return;
@@ -104,6 +106,8 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
                 d.close();
                 return;
             }
+            decoder = d;
+            activeDecoderRef.current = d;
             setDecodedImage({ decoder: d, handle: decodeHandle });
         })
             .catch((err) => {
@@ -124,6 +128,8 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
         });
         return () => {
             cancelled = true;
+            activeDecoderRef.current = null;
+            decoder === null || decoder === void 0 ? void 0 : decoder.close();
             controller.abort();
             continueRenderOnce();
         };
@@ -136,13 +142,12 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
         delayRender,
         cancelRender,
     ]);
-    (0, react_2.useEffect)(() => {
-        return () => {
-            imageDecoder === null || imageDecoder === void 0 ? void 0 : imageDecoder.close();
-        };
-    }, [imageDecoder]);
     (0, react_2.useLayoutEffect)(() => {
-        if (!imageDecoder || !decodedImage) {
+        // Activity and Suspense can retain state after cleaning up effects.
+        // Wait for the current loading effect to publish a live decoder.
+        if (!imageDecoder ||
+            !decodedImage ||
+            activeDecoderRef.current !== imageDecoder) {
             return;
         }
         const delay = delayRender(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
@@ -196,11 +201,13 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
         width,
         height,
         cancelRender,
+        effectsOutputSize === null || effectsOutputSize === void 0 ? void 0 : effectsOutputSize.width,
+        effectsOutputSize === null || effectsOutputSize === void 0 ? void 0 : effectsOutputSize.height,
     ]);
-    return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, ...props }));
+    return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, ...props }));
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
-const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
+const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, requestInit, effects = [], effectsOutputSize, controls, ref, ...sequenceProps }) => {
     const actualRef = (0, react_2.useRef)(null);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     (0, react_2.useImperativeHandle)(ref, () => {
@@ -242,7 +249,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         requestInit,
         ...canvasProps,
     };
-    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 !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }) }) }));
+    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 !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, controls: controls }) }) }) }));
 };
 const AnimatedImageWithIntrinsicDuration = (props) => {
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();

package/dist/cjs/animated-image/canvas.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { EffectDefinitionAndStack } from '../effects/effect-types.js';
+import type { EffectDefinitionAndStack, EffectsOutputSize } from '../effects/effect-types.js';
 export type AnimatedImageCanvasRef = {
     readonly draw: (imageData: VideoFrame) => Promise<boolean>;
     readonly getCanvas: () => HTMLCanvasElement | null;
@@ -12,4 +12,5 @@ export declare const Canvas: React.ForwardRefExoticComponent<{
     readonly className?: string | undefined;
     readonly style?: React.CSSProperties | undefined;
     readonly effects: EffectDefinitionAndStack<unknown>[];
+    readonly effectsOutputSize: EffectsOutputSize | null;
 } & React.AriaAttributes & Record<`data-${string}`, string | undefined> & React.RefAttributes<AnimatedImageCanvasRef>>;

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

@@ -39,9 +39,9 @@ const react_1 = __importStar(require("react"));
 const calculate_image_fit_js_1 = require("../calculate-image-fit.js");
 const run_effect_chain_js_1 = require("../effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("../effects/use-effect-chain-state.js");
-const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
+const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, effectsOutputSize, ...props }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
-    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(effectsOutputSize);
     const sourceCanvas = (0, react_1.useMemo)(() => {
         if (typeof document === 'undefined') {
             return null;

package/dist/cjs/animated-image/props.d.ts

@@ -1,5 +1,5 @@
 import type { ImageFit } from '../calculate-image-fit.js';
-import type { EffectsProp } from '../effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from '../Interactive.js';
 export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
 export type AnimatedImageCanvasProps = React.AriaAttributes & Record<`data-${string}`, string | undefined>;
@@ -18,5 +18,6 @@ export type RemotionAnimatedImageProps = {
 } & AnimatedImageCanvasProps;
 export type AnimatedImageProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps & RemotionAnimatedImageProps & {
     readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
 };
 export type AnimatedImageFillMode = ImageFit;

package/dist/cjs/asset-types.d.ts

@@ -31,6 +31,10 @@ declare module '*.jpeg' {
     const src: string;
     export default src;
 }
+declare module '*.jxl' {
+    const src: string;
+    export default src;
+}
 declare module '*.bmp' {
     const src: string;
     export default src;

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -62,7 +62,7 @@ type SharedAudioContextValue = {
     resumeAsAutoPlay: () => Promise<void>;
     suspend: () => Promise<void>;
     getIsResumingAudioContext: () => Promise<AudioContextResumeResult> | null;
-    unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
+    unscheduleAudioNode: (node: AudioBufferSourceNode) => boolean;
     _experimentalKeepAudioContextAlive: boolean;
 };
 type SharedAudioTagsContextValue = {

package/dist/cjs/audio/shared-audio-tags.js

@@ -127,7 +127,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
     const prevEndTimes = (0, react_1.useRef)({ scheduledEndTime: null, mediaEndTime: null });
     const nodesToResume = (0, react_1.useRef)(new Map());
     const unscheduleAudioNode = (0, react_1.useCallback)((node) => {
-        nodesToResume.current.delete(node);
+        return nodesToResume.current.delete(node);
     }, []);
     const scheduleAudioNode = (0, react_1.useMemo)(() => {
         return ({ node, mediaTimestamp, sourceOffset, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -1,4 +1,4 @@
-import type { EffectsProp } from '../effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 import type { CanvasImageCanvasProps } from './props.js';
 export declare const canvasImageSchema: {
     readonly 'style.transformOrigin': {
@@ -114,7 +114,7 @@ export declare const canvasImageSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -223,6 +223,7 @@ export declare const CanvasImage: import("react").ComponentType<Omit<import("../
     readonly height?: number | undefined;
     readonly fit?: import("../calculate-image-fit.js").ImageFit | undefined;
     readonly effects?: EffectsProp | undefined;
+    readonly effectsOutputSize?: EffectsOutputSize | undefined;
     readonly className?: string | undefined;
     readonly style?: import("react").CSSProperties | undefined;
     readonly id?: string | undefined;

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

@@ -111,14 +111,14 @@ const waitForNextFrame = ({ onFrame, }) => {
     const frame = requestAnimationFrame(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) => {
+const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit = 'fill', effects, effectsOutputSize, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...canvasProps }, ref) => {
     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);
     const [loadedImage, setLoadedImage] = (0, react_1.useState)(null);
     const actualSrc = (0, prefetch_js_1.usePreload)(src);
-    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(effectsOutputSize);
     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,
@@ -330,7 +330,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, h
     return (jsx_runtime_1.jsx("canvas", { ...canvasProps, ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
 });
 CanvasImageContent.displayName = 'CanvasImageContent';
-const CanvasImageInner = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, loop, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit, effects = [], effectsOutputSize, className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, loop, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
@@ -365,7 +365,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, crossOrigin, width, hei
         style: premountingStyle,
         componentName: _remotionInternalCropComponentName !== null && _remotionInternalCropComponentName !== void 0 ? _remotionInternalCropComponentName : '<CanvasImage />',
     });
-    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 !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, loop: loop, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, crossOrigin: crossOrigin, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...canvasProps }) }) }) }));
+    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 !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, loop: loop, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, crossOrigin: crossOrigin, width: width, height: height, fit: fit, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...canvasProps }) }) }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.

package/dist/cjs/canvas-image/props.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { ImageFit } from '../calculate-image-fit.js';
-import type { EffectsProp } from '../effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from '../Interactive.js';
 type CanvasImageSequenceProps = Omit<InteractiveBaseProps, 'playbackRate'> & InteractiveCropProps & InteractivePremountProps;
 export type CanvasImageCanvasProps = Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'children' | 'height' | 'onError' | 'width'>;
@@ -11,6 +11,7 @@ export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps
     readonly height?: number;
     readonly fit?: ImageFit;
     readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly id?: string;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { InteractiveBaseProps, InteractivePremountProps, InteractiveCropProps } from '../Interactive.js';
-import type { EffectsProp } from './effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from './effect-types.js';
 type MandatoryProps = {
     readonly width: number;
     readonly height: number;
@@ -8,6 +8,7 @@ type MandatoryProps = {
 type OptionalProps = {
     readonly color: string | undefined;
     readonly effects: EffectsProp;
+    readonly effectsOutputSize: EffectsOutputSize | null;
     readonly className: string | undefined;
     readonly style: React.CSSProperties | undefined;
     readonly pixelDensity: number | undefined;
@@ -127,7 +128,7 @@ export declare const solidSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;

package/dist/cjs/effects/Solid.js

@@ -66,7 +66,7 @@ exports.solidSchema = {
     ...interactivity_schema_js_1.borderRadiusSchema,
     ...interactivity_schema_js_1.cropSchema,
 };
-const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, videoConfigValues, reference, }) => {
+const SolidInner = ({ color, width, height, effects = [], effectsOutputSize = null, 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);
@@ -86,7 +86,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
         canvas.height = 1;
         return canvas;
     }, []);
-    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(effectsOutputSize);
     const canvasRef = (0, react_1.useCallback)((canvas) => {
         setOutputCanvas(canvas);
         if (typeof reference === 'function') {
@@ -158,7 +158,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     }, [height, style, width]);
     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) => {
+const SolidOuter = (0, react_1.forwardRef)(({ effects = [], effectsOutputSize = null, 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, _b;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
@@ -188,7 +188,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(sequence_activity_context_js_1.SequenceContent, { 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 }) }) }) }));
+    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(sequence_activity_context_js_1.SequenceContent, { 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, effectsOutputSize: effectsOutputSize, pixelDensity: pixelDensity }) }) }) }));
 });
 exports.Solid = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SolidOuter,

package/dist/cjs/effects/effect-types.d.ts

@@ -52,4 +52,8 @@ export type EffectFactory<P> = {} extends P ? (params?: P & {
 }) => EffectDescriptor<unknown> : (params: P & {
     readonly disabled?: boolean;
 }) => EffectDescriptor<unknown>;
+export type EffectsOutputSize = {
+    readonly width: number;
+    readonly height: number;
+};
 export {};

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

@@ -1,2 +1,2 @@
 export { createEffect } from './create-effect.js';
-export type { Backend, EffectApplyParams, EffectDefinitionAndStack, EffectDescriptor, EffectsProp, EffectDefinition, EffectFactory, } from './effect-types.js';
+export type { Backend, EffectApplyParams, EffectDefinitionAndStack, EffectDescriptor, EffectsProp, EffectsOutputSize, EffectDefinition, EffectFactory, } from './effect-types.js';

package/dist/cjs/effects/run-effect-chain.d.ts

@@ -1,6 +1,8 @@
 import { CanvasPool } from './canvas-pool.js';
 import type { EffectDefinition, EffectDefinitionAndStack } from './effect-types.js';
 export type EffectChainState = {
+    readonly width: number;
+    readonly height: number;
     pool: CanvasPool;
     setupCache: WeakMap<EffectDefinition<unknown, unknown>, WeakMap<HTMLCanvasElement, unknown>>;
     cleanupRegistry: Array<{
@@ -22,4 +24,4 @@ export type RunEffectChainOptions = {
     readonly width: number;
     readonly height: number;
 };
-export declare const runEffectChain: ({ state, source, effects, output, width, height, }: RunEffectChainOptions) => Promise<boolean>;
+export declare const runEffectChain: (options: RunEffectChainOptions) => Promise<boolean>;