remotion 4.0.536 → 4.0.537

package/dist/cjs/CompositionManagerContext.d.ts

@@ -38,4 +38,7 @@ export type CompositionManagerContext = {
     canvasContent: CanvasContent | null;
 };
 export declare const CompositionManager: React.Context<CompositionManagerContext>;
+export declare const CompositionManagerRefContext: React.Context<{
+    readonly current: CompositionManagerContext;
+}>;
 export declare const CompositionSetters: React.Context<CompositionManagerSetters>;

package/dist/cjs/CompositionManagerContext.js

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSetters = exports.CompositionManager = exports.getAssetPreviewCompositionId = void 0;
+exports.CompositionSetters = exports.CompositionManagerRefContext = exports.CompositionManager = exports.getAssetPreviewCompositionId = void 0;
 const react_1 = require("react");
 const getAssetPreviewCompositionId = (asset) => `asset:${asset}`;
 exports.getAssetPreviewCompositionId = getAssetPreviewCompositionId;
-exports.CompositionManager = (0, react_1.createContext)({
+const defaultCompositionManagerContext = {
     compositions: [],
     folders: [],
     currentCompositionMetadata: null,
     currentAssetMetadata: null,
     canvasContent: null,
-});
+};
+exports.CompositionManager = (0, react_1.createContext)(defaultCompositionManagerContext);
+exports.CompositionManagerRefContext = (0, react_1.createContext)({ current: defaultCompositionManagerContext });
 exports.CompositionSetters = (0, react_1.createContext)({
     setCanvasContent: () => undefined,
     setCurrentAssetMetadata: () => undefined,

package/dist/cjs/CompositionManagerProvider.js

@@ -103,9 +103,11 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
         currentAssetMetadata,
         canvasContent,
     ]);
+    const compositionManagerRef = (0, react_1.useRef)(compositionManagerContextValue);
+    compositionManagerRef.current = compositionManagerContextValue;
     if (registrationError !== null) {
         throw registrationError;
     }
-    return (jsx_runtime_1.jsx(CompositionRegistryProvider_js_1.CompositionRegistryProvider, { ref: flushSnapshotRef, onSnapshot: onCommitRegistrations, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }) }));
+    return (jsx_runtime_1.jsx(CompositionRegistryProvider_js_1.CompositionRegistryProvider, { ref: flushSnapshotRef, onSnapshot: onCommitRegistrations, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManagerRefContext.Provider, { value: compositionManagerRef, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }) }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/HtmlInCanvas.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.getHtmlInCanvasUnsupportedMessage = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasNestingSupported = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const DefaultPremountContext_js_1 = require("./DefaultPremountContext.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 use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
@@ -160,11 +161,15 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
     const { isClientSideRendering, isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
     const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
-    const paintTargetMode = usesDirectLayoutCanvas
-        ? 'direct'
-        : isRendering
-            ? 'copied'
-            : 'transferred';
+    // Keep a nested drawable canvas separate from the bitmap captured by its
+    // parent. Reusing it for both can crash Chromium during raster invalidation.
+    const paintTargetMode = ancestorPaintState
+        ? 'copied'
+        : usesDirectLayoutCanvas
+            ? 'direct'
+            : isRendering
+                ? 'copied'
+                : 'transferred';
     if (!(0, exports.isHtmlInCanvasSupported)()) {
         cancelRender(new Error((0, exports.getHtmlInCanvasUnsupportedMessage)()));
     }
@@ -237,9 +242,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
     const initializedRef = (0, react_1.useRef)(false);
     const onInitCleanupRef = (0, react_1.useRef)(null);
     const unmountedRef = (0, react_1.useRef)(false);
+    const effectScratchCanvasesRef = (0, react_1.useRef)(null);
     const paintingTargets = (0, react_1.useRef)(new WeakMap());
     const onPaintCb = (0, react_1.useCallback)(async () => {
         var _a, _b;
+        var _c;
         if (isRendering && paintState.pendingChildren > 0) {
             return;
         }
@@ -351,6 +358,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
                 }
                 throw error;
             }
+            let effectSourceCanvas = null;
             try {
                 const currentOnPaint = onPaintRef.current;
                 if (currentOnPaint) {
@@ -367,6 +375,48 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
                         await paintResult;
                     }
                 }
+                else if (paintTarget instanceof HTMLCanvasElement &&
+                    effectsRef.current.some((effect) => !effect.params.disabled)) {
+                    // The element image can only be drawn into the visible layout
+                    // canvas, but effects finish asynchronously (e.g. while the
+                    // WebGPU device initializes). Move the unprocessed pixels to a
+                    // scratch canvas and restore the previous output within this task,
+                    // so the browser never presents the HTML without its effects.
+                    (_c = effectScratchCanvasesRef.current) !== null && _c !== void 0 ? _c : (effectScratchCanvasesRef.current = {
+                        source: document.createElement('canvas'),
+                        previousOutput: document.createElement('canvas'),
+                    });
+                    const { source: effectSource, previousOutput } = effectScratchCanvasesRef.current;
+                    resizePaintTarget({
+                        target: effectSource,
+                        width: canvasWidth,
+                        height: canvasHeight,
+                    });
+                    resizePaintTarget({
+                        target: previousOutput,
+                        width: canvasWidth,
+                        height: canvasHeight,
+                    });
+                    const effectSourceCtx = effectSource.getContext('2d');
+                    const previousOutputCtx = previousOutput.getContext('2d');
+                    const paintTargetCtx = paintTarget.getContext('2d');
+                    if (!effectSourceCtx || !previousOutputCtx || !paintTargetCtx) {
+                        throw new Error('Failed to acquire 2D context for <HtmlInCanvas> canvas');
+                    }
+                    previousOutputCtx.reset();
+                    previousOutputCtx.drawImage(paintTarget, 0, 0);
+                    defaultOnPaint({
+                        canvas: paintTarget,
+                        element,
+                        elementImage: elImage,
+                        pixelDensity: resolvedPixelDensity,
+                    });
+                    effectSourceCtx.reset();
+                    effectSourceCtx.drawImage(paintTarget, 0, 0);
+                    paintTargetCtx.reset();
+                    paintTargetCtx.drawImage(previousOutput, 0, 0);
+                    effectSourceCanvas = effectSource;
+                }
                 else {
                     defaultOnPaint({
                         canvas: paintTarget,
@@ -380,7 +430,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
                 if (state) {
                     await (0, run_effect_chain_js_1.runEffectChain)({
                         state,
-                        source: paintTarget,
+                        source: effectSourceCanvas !== null && effectSourceCanvas !== void 0 ? effectSourceCanvas : paintTarget,
                         effects: effectsRef.current,
                         output: paintTarget,
                         width: canvasWidth,
@@ -445,10 +495,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
             paintState.release = null;
         };
     }, [paintState]);
-    // Default paint handlers draw synchronously on the layout canvas itself.
-    // ElementImage can only be drawn into its associated canvas, so custom
-    // handlers retain a transferred target. Rendering copies it to a separate
-    // visible canvas without waiting for the transferred canvas to present.
+    // Non-nested default handlers paint directly on the layout canvas. Nested
+    // canvases and custom handlers retain a transferred target because an
+    // ElementImage can only be drawn into its associated canvas. Nested canvases
+    // and rendering copy it to a separate visible canvas without waiting for
+    // the transferred canvas to present.
     (0, react_1.useLayoutEffect)(() => {
         var _a;
         const placeholder = canvas2dRef.current;
@@ -539,7 +590,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
         };
     }, [height, style, width]);
     return (jsx_runtime_1.jsxs(HtmlInCanvasAncestorContext.Provider, { value: paintState, children: [
-            jsx_runtime_1.jsxs("canvas", { ref: paintTargetMode === 'copied' ? canvas2dRef : setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: paintTargetMode === 'copied'
+            jsx_runtime_1.jsx("canvas", { ref: paintTargetMode === 'copied' ? canvas2dRef : setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: paintTargetMode === 'copied'
                     ? {
                         ...canvasStyle,
                         position: 'absolute',
@@ -548,10 +599,10 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
                         visibility: 'hidden',
                         pointerEvents: 'none',
                     }
-                    : canvasStyle, children: [
-                    jsx_runtime_1.jsx("div", { ref: divRef, style: paintTargetMode === 'copied'
-                            ? { ...innerStyle, visibility: 'visible' }
-                            : innerStyle, children: children }), canvasSiblings] }, canvasSizeKey), paintTargetMode === 'copied' ? (jsx_runtime_1.jsx("canvas", { ref: setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle }, `output-${canvasSizeKey}`)) : null] }));
+                    : canvasStyle, children: jsx_runtime_1.jsxs(DefaultPremountContext_js_1.DefaultPremountContext.Provider, { value: 0, children: [
+                        jsx_runtime_1.jsx("div", { ref: divRef, style: paintTargetMode === 'copied'
+                                ? { ...innerStyle, visibility: 'visible' }
+                                : innerStyle, children: children }), canvasSiblings] }) }, canvasSizeKey), paintTargetMode === 'copied' ? (jsx_runtime_1.jsx("canvas", { ref: setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle }, `output-${canvasSizeKey}`)) : null] }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 // Subscribe to frame changes only while rendering. Preview keeps relying on

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

@@ -56,6 +56,7 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
     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}"/>`);

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

@@ -39,6 +39,7 @@ const react_1 = __importStar(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 registry_store_js_1 = require("../registry-store.js");
 const runtime_value_store_js_1 = require("../runtime-value-store.js");
 const sequence_activity_context_js_1 = require("../sequence-activity-context.js");
 const sequence_node_path_js_1 = require("../sequence-node-path.js");
@@ -46,6 +47,20 @@ const SequenceManager_js_1 = require("../SequenceManager.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const emptyDragOverrides = {};
 const useCacheCommitEffect = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_1.useLayoutEffect;
+const areEffectParamsEqual = (previous, next) => {
+    if (Object.is(previous, next)) {
+        return true;
+    }
+    if (previous === null ||
+        next === null ||
+        typeof previous !== 'object' ||
+        typeof next !== 'object' ||
+        Object.getPrototypeOf(previous) !== Object.prototype ||
+        Object.getPrototypeOf(next) !== Object.prototype) {
+        return false;
+    }
+    return (0, registry_store_js_1.areRegistryEntriesEqual)(previous, next);
+};
 const mergeOverrides = ({ descriptor, propStatusOverrides, dragOverrides, frame, }) => {
     if (!propStatusOverrides && !dragOverrides) {
         return { params: descriptor.params, effectKey: descriptor.effectKey };
@@ -105,17 +120,16 @@ const resolvePropStatusOverrides = (propStatus, frame) => {
 const useMemoizedEffectDefinitions = (effects) => {
     const activityDormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
     const previousRef = (0, react_1.useRef)(null);
-    const definitions = effects.map((descriptor) => descriptor.definition);
     const previous = previousRef.current;
     const isSame = previous !== null &&
-        previous.definitions.length === definitions.length &&
-        previous.definitions.every((definition, i) => definition === definitions[i]);
+        previous.definitions.length === effects.length &&
+        previous.definitions.every((definition, i) => definition === effects[i].definition);
     const controllers = isSame
         ? previous.controllers
         : effects.map((effect) => (0, runtime_value_store_js_1.createRuntimeValueStore)(effect.params));
     const stableDefinitions = isSame
         ? previous.definitions
-        : Object.assign(definitions, {
+        : Object.assign(effects.map((descriptor) => descriptor.definition), {
             runtimeValues: controllers.map((controller) => controller.store),
         });
     useCacheCommitEffect(() => {
@@ -125,6 +139,12 @@ const useMemoizedEffectDefinitions = (effects) => {
         if (!activityDormant || controllers.length === 0) {
             return;
         }
+        if (controllers.every((controller, index) => {
+            var _a;
+            return areEffectParamsEqual(controller.store.getSnapshot(), (_a = effects[index]) === null || _a === void 0 ? void 0 : _a.params);
+        })) {
+            return;
+        }
         let cancelled = false;
         queueMicrotask(() => {
             if (cancelled) {
@@ -134,21 +154,10 @@ const useMemoizedEffectDefinitions = (effects) => {
                 var _a;
                 const snapshot = (_a = effects[index]) === null || _a === void 0 ? void 0 : _a.params;
                 const currentSnapshot = controller.store.getSnapshot();
-                if (Object.is(snapshot, currentSnapshot)) {
-                    return;
-                }
                 // Equivalent inline params should not notify inspector subscribers on
                 // every dormant render. Preserve changes to keys and leaf references.
-                if (snapshot !== null &&
-                    currentSnapshot !== null &&
-                    typeof snapshot === 'object' &&
-                    typeof currentSnapshot === 'object') {
-                    const keys = Object.keys(snapshot);
-                    if (keys.length === Object.keys(currentSnapshot).length &&
-                        keys.every((key) => Object.prototype.hasOwnProperty.call(currentSnapshot, key) &&
-                            Object.is(snapshot[key], currentSnapshot[key]))) {
-                        return;
-                    }
+                if (areEffectParamsEqual(snapshot, currentSnapshot)) {
+                    return;
                 }
                 controller.setSnapshot(snapshot);
             });
@@ -164,7 +173,9 @@ const useMemoizedEffectDefinitions = (effects) => {
         stableDefinitions.forEach((_definition, index) => {
             var _a;
             const snapshot = (_a = effects[index]) === null || _a === void 0 ? void 0 : _a.params;
-            controllers[index].setSnapshot(snapshot);
+            if (!areEffectParamsEqual(controllers[index].store.getSnapshot(), snapshot)) {
+                controllers[index].setSnapshot(snapshot);
+            }
         });
     }, [controllers, effects, stableDefinitions]);
     return stableDefinitions;
@@ -206,55 +217,86 @@ const useMemoizedEffects = ({ effects, overrideId, videoConfigValues, }) => {
     var _a;
     const previousRef = (0, react_1.useRef)(null);
     const { propStatuses } = (0, react_1.useContext)(SequenceManager_js_1.VisualModePropStatusesContext);
-    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
     const previous = previousRef.current;
     const nodePath = overrideId
         ? ((_a = overrideIdToNodePathMappings[overrideId]) !== null && _a !== void 0 ? _a : null)
         : null;
     const effectDragOverrides = (0, SequenceManager_js_1.useEffectDragOverridesForNodePath)(nodePath);
-    const resolved = effects.map((descriptor, index) => {
-        var _a;
+    const effectPropStatuses = (0, react_1.useMemo)(() => Array.from({ length: effects.length }, (_, effectIndex) => {
         if (nodePath === null) {
-            return {
-                descriptor,
-                params: descriptor.params,
-                effectKey: descriptor.effectKey,
-            };
+            return null;
         }
-        const effectStatus = (0, exports.getEffectPropStatusesCtx)({
+        const status = (0, exports.getEffectPropStatusesCtx)({
             propStatuses,
             nodePath: { ...nodePath, videoConfigValues },
-            effectIndex: index,
+            effectIndex,
         });
-        const propStatusOverrides = effectStatus.type === 'can-update-effect'
-            ? resolvePropStatusOverrides(effectStatus.props, frame)
-            : null;
+        return status.type === 'can-update-effect' ? status.props : null;
+    }), [effects.length, nodePath, propStatuses, videoConfigValues]);
+    const animatedEffects = (0, react_1.useMemo)(() => effectPropStatuses.map((status, index) => {
+        var _a;
+        return Object.values(status !== null && status !== void 0 ? status : {}).some((prop) => prop.status === 'keyframed') ||
+            Object.values((_a = effectDragOverrides[index]) !== null && _a !== void 0 ? _a : emptyDragOverrides).some((override) => override.type === 'keyframed');
+    }), [effectDragOverrides, effectPropStatuses]);
+    // Runtime animations arrive through props. Only source/drag keyframes need
+    // their own clock, and an animated effect must not invalidate static siblings.
+    const frame = (0, use_current_frame_js_1.useCurrentFrameWithOptionalSubscription)(animatedEffects.some(Boolean));
+    const prepared = effects.map((descriptor, index) => {
+        var _a;
+        const propStatus = effectPropStatuses[index];
         const dragOverridesMap = (_a = effectDragOverrides[index]) !== null && _a !== void 0 ? _a : emptyDragOverrides;
         const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
+        const effectFrame = animatedEffects[index] ? frame : null;
+        const cached = previous === null || previous === void 0 ? void 0 : previous.prepared[index];
+        if (cached &&
+            cached.definition === descriptor.definition &&
+            cached.sourceKey === descriptor.effectKey &&
+            areEffectParamsEqual(cached.params, descriptor.params) &&
+            cached.propStatus === propStatus &&
+            cached.dragOverrides === dragOverrides &&
+            cached.frame === effectFrame) {
+            return cached;
+        }
+        const propStatusOverrides = resolvePropStatusOverrides(propStatus !== null && propStatus !== void 0 ? propStatus : undefined, frame);
         const { params, effectKey } = mergeOverrides({
             descriptor,
             propStatusOverrides,
             dragOverrides,
             frame,
         });
-        return { descriptor, params, effectKey };
+        return {
+            definition: descriptor.definition,
+            sourceKey: descriptor.effectKey,
+            // Snapshot plain params so shallow comparisons see in-place field edits.
+            params: descriptor.params !== null &&
+                typeof descriptor.params === 'object' &&
+                Object.getPrototypeOf(descriptor.params) === Object.prototype
+                ? { ...descriptor.params }
+                : descriptor.params,
+            propStatus,
+            dragOverrides,
+            frame: effectFrame,
+            value: (cached === null || cached === void 0 ? void 0 : cached.value.definition) === descriptor.definition &&
+                cached.value.effectKey === effectKey
+                ? cached.value
+                : {
+                    definition: descriptor.definition,
+                    effectKey,
+                    params,
+                    memoized: true,
+                },
+        };
     });
     const isSame = previous !== null &&
-        previous.length === resolved.length &&
-        previous.every((p, i) => p.definition === resolved[i].descriptor.definition &&
-            p.effectKey === resolved[i].effectKey);
+        previous.effects.length === prepared.length &&
+        previous.effects.every((effect, i) => effect === prepared[i].value);
     const next = isSame
-        ? previous
-        : resolved.map(({ descriptor, params, effectKey }) => ({
-            definition: descriptor.definition,
-            effectKey,
-            params,
-            memoized: true,
-        }));
+        ? previous.effects
+        : prepared.map((effect) => effect.value);
     useCacheCommitEffect(() => {
-        previousRef.current = next;
-    }, [next]);
+        previousRef.current = { prepared, effects: next };
+    }, [next, prepared]);
     return next;
 };
 exports.useMemoizedEffects = useMemoizedEffects;

package/dist/cjs/internals.d.ts

@@ -133,6 +133,9 @@ export declare const Internals: {
         readonly crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     }, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;
     readonly CompositionManager: import("react").Context<CompositionManagerContext>;
+    readonly CompositionManagerRefContext: import("react").Context<{
+        readonly current: CompositionManagerContext;
+    }>;
     readonly CompositionSetters: import("react").Context<import("./CompositionManagerContext.js").CompositionManagerSetters>;
     readonly VisualModePropStatusesContext: import("react").Context<import("./SequenceManager.js").VisualModePropStatuses>;
     readonly VisualModePropStatusesRefContext: import("react").Context<import("./SequenceManager.js").VisualModePropStatusesRef>;

package/dist/cjs/internals.js

@@ -180,6 +180,7 @@ exports.Internals = {
     resolveTrimProps: validate_start_from_props_js_1.resolveTrimProps,
     VideoForPreview: VideoForPreview_js_1.VideoForPreview,
     CompositionManager: CompositionManagerContext_js_1.CompositionManager,
+    CompositionManagerRefContext: CompositionManagerContext_js_1.CompositionManagerRefContext,
     CompositionSetters: CompositionManagerContext_js_1.CompositionSetters,
     VisualModePropStatusesContext: SequenceManager_js_1.VisualModePropStatusesContext,
     VisualModePropStatusesRefContext: SequenceManager_js_1.VisualModePropStatusesRefContext,

package/dist/cjs/timeline-position-state.d.ts

@@ -11,6 +11,7 @@ export declare const clampFrameToCompositionRange: (frame: number, durationInFra
 export declare const useTimelineContext: () => TimelineContextValue;
 export declare const usePlaybackRate: () => PlaybackRateContextValue;
 export declare const useTimelinePosition: () => number;
+export declare const useTimelinePositionWithOptionalSubscription: (subscribe: boolean) => number;
 export declare const useIsInsideFreeze: () => boolean;
 export declare const useAbsoluteTimelinePosition: () => number;
 export declare const useTimelineSetFrameWithoutSeek: () => (u: import("react").SetStateAction<Record<string, number>>) => void;

package/dist/cjs/timeline-position-state.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBuffering = exports.usePlaying = exports.useTimelineSeekFrame = exports.useTimelineSetFrameWithoutSeek = exports.useAbsoluteTimelinePosition = exports.useIsInsideFreeze = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.clampFrameToCompositionRange = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
+exports.useBuffering = exports.usePlaying = exports.useTimelineSeekFrame = exports.useTimelineSetFrameWithoutSeek = exports.useAbsoluteTimelinePosition = exports.useIsInsideFreeze = exports.useTimelinePositionWithOptionalSubscription = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.clampFrameToCompositionRange = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
 const react_1 = require("react");
 const sequence_activity_context_js_1 = require("./sequence-activity-context.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_js_1 = require("./use-video.js");
+// Reading TimelineContext and ignoring its value would still schedule frame
+// updates. Inactive subscribers must read a separate, never-changing context.
+const UnsubscribedTimelineContext = (0, react_1.createContext)(null);
 const makeKey = () => {
     return `remotion.time-all`;
 };
@@ -42,6 +45,9 @@ const useTimelinePositionFromContext = (state) => {
     const videoConfig = (0, use_video_js_1.useVideo)();
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const dormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
+    if (state === null) {
+        return 0;
+    }
     if (!videoConfig) {
         return typeof window === 'undefined'
             ? 0
@@ -76,6 +82,20 @@ const useTimelinePosition = () => {
     return useTimelinePositionFromContext(state);
 };
 exports.useTimelinePosition = useTimelinePosition;
+const useTimelinePositionWithOptionalSubscription = (subscribe) => {
+    const dormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
+    const state = (0, react_1.useContext)(subscribe
+        ? dormant
+            ? sequence_activity_context_js_1.SequenceActivityTimelineContext
+            : TimelineContext_js_1.TimelineContext
+        : UnsubscribedTimelineContext);
+    const frame = useTimelinePositionFromContext(state);
+    if (subscribe && state === null) {
+        throw new Error('TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.');
+    }
+    return frame;
+};
+exports.useTimelinePositionWithOptionalSubscription = useTimelinePositionWithOptionalSubscription;
 const useIsInsideFreeze = () => {
     return (0, exports.useTimelineContext)().isInsideFreeze;
 };

package/dist/cjs/use-current-frame.d.ts

@@ -1 +1,2 @@
+export declare const useCurrentFrameWithOptionalSubscription: (subscribe: boolean) => number;
 export declare const useCurrentFrame: () => number;

package/dist/cjs/use-current-frame.js

@@ -1,16 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCurrentFrame = void 0;
+exports.useCurrentFrame = exports.useCurrentFrameWithOptionalSubscription = void 0;
 const react_1 = require("react");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
-/*
- * @description Retrieves the current frame of the video within a component. Frames are 0-indexed, and if the component is wrapped in a `<Sequence>`, it returns the frame relative to when the Sequence starts.
- * @see [Documentation](https://www.remotion.dev/docs/use-current-frame)
- */
-const useCurrentFrame = () => {
+const useCurrentFrameWithOptionalSubscription = (subscribe) => {
     var _a;
     const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
@@ -20,11 +16,22 @@ const useCurrentFrame = () => {
         }
         throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
     }
-    const frame = (0, timeline_position_state_js_1.useTimelinePosition)();
+    const frame = (0, timeline_position_state_js_1.useTimelinePositionWithOptionalSubscription)(subscribe);
     const context = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    if (!subscribe) {
+        return 0;
+    }
     const contextOffset = context
         ? context.cumulatedFrom + context.relativeFrom
         : 0;
     return (frame - contextOffset) * ((_a = context === null || context === void 0 ? void 0 : context.playbackRate) !== null && _a !== void 0 ? _a : 1);
 };
+exports.useCurrentFrameWithOptionalSubscription = useCurrentFrameWithOptionalSubscription;
+/*
+ * @description Retrieves the current frame of the video within a component. Frames are 0-indexed, and if the component is wrapped in a `<Sequence>`, it returns the frame relative to when the Sequence starts.
+ * @see [Documentation](https://www.remotion.dev/docs/use-current-frame)
+ */
+const useCurrentFrame = () => {
+    return (0, exports.useCurrentFrameWithOptionalSubscription)(true);
+};
 exports.useCurrentFrame = useCurrentFrame;

package/dist/cjs/validation/validate-duration-in-frames.js

@@ -12,10 +12,10 @@ function validateDurationInFrames(durationInFrames, options) {
     if (durationInFrames <= 0) {
         throw new TypeError(`The "durationInFrames" prop ${component} must be positive, but got ${durationInFrames}.`);
     }
-    if (!allowFloats && durationInFrames % 1 !== 0) {
-        throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
-    }
     if (!Number.isFinite(durationInFrames)) {
         throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
     }
+    if (!allowFloats && durationInFrames % 1 !== 0) {
+        throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
+    }
 }

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

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.536';
+exports.VERSION = '4.0.537';