remotion 4.0.505 → 4.0.507

package/README.md

@@ -48,6 +48,7 @@ Remotion is extensively documented over more than 1000 pages.
   - [Prompts](https://www.remotion.dev/prompts)
   - [Templates](https://remotion.dev/templates)
 - Components
+  - [Elements](https://remotion.dev/elements)
   - [Effects](https://remotion.dev/effects)
   - [Shapes](https://remotion.dev/docs/shapes)
   - [Transitions](https://remotion.dev/transitions)

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 { NonceHistory } from './nonce.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
+import type { RuntimeValueSnapshot, RuntimeValueStore } from './runtime-value-store.js';
 export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     width: number | undefined;
     height: number | undefined;
@@ -56,14 +57,17 @@ export type LoopDisplay = {
     durationInFrames: number;
 };
 export type JsxComponentIdentity = string;
-export type SequenceControls = {
+export type SequenceRegistrationControls = {
     schema: InteractivitySchema;
-    currentRuntimeValueDotNotation: Record<string, unknown>;
+    runtimeValues: RuntimeValueStore;
     overrideId: string;
     supportsEffects: boolean;
     componentIdentity: JsxComponentIdentity | null;
     componentName: string;
 };
+export type SequenceControls = SequenceRegistrationControls & {
+    currentRuntimeValueDotNotation: RuntimeValueSnapshot;
+};
 export type TSequence = {
     from: number;
     trimBefore: number | null;
@@ -78,7 +82,7 @@ export type TSequence = {
     getStack: () => string | null;
     premountDisplay: number | null;
     postmountDisplay: number | null;
-    controls: SequenceControls | null;
+    controls: SequenceRegistrationControls | null;
     refForOutline: React.RefObject<Element | null> | null;
     effects: readonly EffectDefinition<unknown>[];
     isInsideSeries: boolean;

package/dist/cjs/Interactive.d.ts

@@ -10,8 +10,8 @@ export type InteractiveBaseProps = Pick<SequenceProps, 'durationInFrames' | 'fro
 export type InteractiveTransformProps = Pick<AbsoluteFillLayout, 'style'>;
 export type InteractiveCropProps = Pick<SequenceProps, 'cropLeft' | 'cropRight' | 'cropTop' | 'cropBottom'>;
 export type InteractivePremountProps = Pick<AbsoluteFillLayout, 'premountFor' | 'postmountFor' | 'styleWhilePremounted' | 'styleWhilePostmounted'>;
-type InteractiveSequenceProps = InteractiveBaseProps;
-type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveSequenceProps> & InteractiveSequenceProps;
+type InteractiveManagedProps = InteractiveBaseProps & InteractiveCropProps;
+type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveManagedProps> & InteractiveManagedProps;
 type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentType<InteractiveElementProps<Tag> & React.RefAttributes<ElementForTag<Tag>>>;
 type RemotionComponentIdentityPackage = 'remotion' | `@remotion/${string}`;
 /**
@@ -296,6 +296,11 @@ export declare const Interactive: {
         };
     };
     svgPaintSchema: {
+        readonly color: {
+            readonly type: "color";
+            readonly default: undefined;
+            readonly description: "Current color";
+        };
         readonly stroke: {
             readonly type: "color";
             readonly default: "none";
@@ -316,6 +321,11 @@ export declare const Interactive: {
         };
     };
     svgStrokeSchema: {
+        readonly color: {
+            readonly type: "color";
+            readonly default: undefined;
+            readonly description: "Current color";
+        };
         readonly stroke: {
             readonly type: "color";
             readonly default: "none";

package/dist/cjs/Interactive.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(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 use_crop_style_js_1 = require("./use-crop-style.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const sourcePathToIdentityPrefix = (packageName) => {
     if (packageName === 'remotion') {
@@ -58,6 +59,7 @@ const makeRemotionComponentIdentity = ({ packageName, componentName, }) => {
 const interactiveElementSchema = {
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.transformSchema,
+    ...interactivity_schema_js_1.cropSchema,
 };
 const interactiveBackgroundElementSchema = {
     ...interactiveElementSchema,
@@ -106,7 +108,15 @@ const withSchema = (options) => {
 };
 const makeInteractiveElement = (tag, displayName, schema) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
-        const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, controls, ...props } = propsWithControls;
+        const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, controls, cropLeft, cropRight, cropTop, cropBottom, style, ...props } = propsWithControls;
+        const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
+            cropLeft,
+            cropRight,
+            cropTop,
+            cropBottom,
+            style: style !== null && style !== void 0 ? style : null,
+            componentName: displayName,
+        });
         const refForOutline = (0, react_1.useRef)(null);
         const callbackRef = (0, react_1.useCallback)((element) => {
             refForOutline.current = element;
@@ -114,6 +124,7 @@ const makeInteractiveElement = (tag, displayName, schema) => {
         }, [ref]);
         return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, children: react_1.default.createElement(tag, {
                 ...props,
+                style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
                 ref: callbackRef,
             }) }));
     });

package/dist/cjs/Sequence.js

@@ -189,6 +189,37 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     : registeredFrozenFrame) *
                     isMedia.data.playbackRate
         : null;
+    const controlsSchema = controls === null || controls === void 0 ? void 0 : controls.schema;
+    const controlsRuntimeValues = controls === null || controls === void 0 ? void 0 : controls.runtimeValues;
+    const controlsOverrideId = controls === null || controls === void 0 ? void 0 : controls.overrideId;
+    const controlsSupportsEffects = controls === null || controls === void 0 ? void 0 : controls.supportsEffects;
+    const controlsComponentIdentity = controls === null || controls === void 0 ? void 0 : controls.componentIdentity;
+    const controlsComponentName = controls === null || controls === void 0 ? void 0 : controls.componentName;
+    const registrationControls = (0, react_1.useMemo)(() => {
+        if (controlsSchema === undefined ||
+            controlsRuntimeValues === undefined ||
+            controlsOverrideId === undefined ||
+            controlsSupportsEffects === undefined ||
+            controlsComponentIdentity === undefined ||
+            controlsComponentName === undefined) {
+            return null;
+        }
+        return {
+            schema: controlsSchema,
+            runtimeValues: controlsRuntimeValues,
+            overrideId: controlsOverrideId,
+            supportsEffects: controlsSupportsEffects,
+            componentIdentity: controlsComponentIdentity,
+            componentName: controlsComponentName,
+        };
+    }, [
+        controlsComponentIdentity,
+        controlsComponentName,
+        controlsOverrideId,
+        controlsRuntimeValues,
+        controlsSchema,
+        controlsSupportsEffects,
+    ]);
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
         if (!env.isStudio) {
@@ -198,7 +229,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             if (isMedia.type === 'image') {
                 registerSequence({
                     type: 'image',
-                    controls: controls !== null && controls !== void 0 ? controls : null,
+                    controls: registrationControls,
                     effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
                     displayName: timelineClipName,
                     documentationLink: resolvedDocumentationLink,
@@ -223,7 +254,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             else {
                 registerSequence({
                     type: isMedia.type,
-                    controls: controls !== null && controls !== void 0 ? controls : null,
+                    controls: registrationControls,
                     effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
                     displayName: timelineClipName,
                     documentationLink: resolvedDocumentationLink,
@@ -270,7 +301,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             getStack: () => stackRef.current,
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
-            controls: controls !== null && controls !== void 0 ? controls : null,
+            controls: registrationControls,
             effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
             refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
             isInsideSeries,
@@ -298,7 +329,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         premountDisplay,
         postmountDisplay,
         env.isStudio,
-        controls,
+        registrationControls,
         _remotionInternalEffects,
         isMedia,
         resolvedDocumentationLink,

package/dist/cjs/TimelineContext.d.ts

@@ -7,6 +7,11 @@ export type TimelineContextValue = {
     imperativePlaying: RefObject<boolean>;
     audioAndVideoTags: RefObject<PlayableMediaTag[]>;
 };
+export type TimelineImperativeContextValue = {
+    frameRef: RefObject<Record<string, number>>;
+    imperativePlaying: RefObject<boolean>;
+    audioAndVideoTags: RefObject<PlayableMediaTag[]>;
+};
 export type PlaybackRateContextValue = {
     playbackRate: number;
     setPlaybackRate: (u: React.SetStateAction<number>) => void;
@@ -17,6 +22,7 @@ export type SetTimelineContextValue = {
 };
 export declare const SetTimelineContext: React.Context<SetTimelineContextValue>;
 export declare const TimelineContext: React.Context<TimelineContextValue | null>;
+export declare const TimelineImperativeContext: React.Context<TimelineImperativeContextValue | null>;
 export declare const PlaybackRateContext: React.Context<PlaybackRateContextValue | null>;
 export declare const AbsoluteTimeContext: React.Context<TimelineContextValue | null>;
 export declare const TimelineContextProvider: React.FC<{

package/dist/cjs/TimelineContext.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineContextProvider = exports.AbsoluteTimeContext = exports.PlaybackRateContext = exports.TimelineContext = exports.SetTimelineContext = void 0;
+exports.TimelineContextProvider = exports.AbsoluteTimeContext = exports.PlaybackRateContext = exports.TimelineImperativeContext = exports.TimelineContext = exports.SetTimelineContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const timeline_position_state_1 = require("./timeline-position-state");
@@ -14,6 +14,7 @@ exports.SetTimelineContext = (0, react_1.createContext)({
     },
 });
 exports.TimelineContext = (0, react_1.createContext)(null);
+exports.TimelineImperativeContext = (0, react_1.createContext)(null);
 exports.PlaybackRateContext = (0, react_1.createContext)(null);
 exports.AbsoluteTimeContext = (0, react_1.createContext)(null);
 const TimelineContextProvider = ({ children, frameState }) => {
@@ -23,6 +24,8 @@ const TimelineContextProvider = ({ children, frameState }) => {
     const audioAndVideoTags = (0, react_1.useRef)([]);
     const [_frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_1.getInitialFrameState)());
     const frame = frameState !== null && frameState !== void 0 ? frameState : _frame;
+    const frameRef = (0, react_1.useRef)(frame);
+    frameRef.current = frame;
     const { delayRender, continueRender } = (0, use_delay_render_1.useDelayRender)();
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -63,6 +66,13 @@ const TimelineContextProvider = ({ children, frameState }) => {
             audioAndVideoTags,
         };
     }, [frame, playing]);
+    const timelineImperativeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            frameRef,
+            imperativePlaying,
+            audioAndVideoTags,
+        };
+    }, []);
     const playbackRateContextValue = (0, react_1.useMemo)(() => {
         return {
             playbackRate,
@@ -75,6 +85,6 @@ const TimelineContextProvider = ({ children, frameState }) => {
             setPlaying,
         };
     }, []);
-    return (jsx_runtime_1.jsx(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.PlaybackRateContext.Provider, { value: playbackRateContextValue, children: jsx_runtime_1.jsx(exports.TimelineContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }) }));
+    return (jsx_runtime_1.jsx(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.PlaybackRateContext.Provider, { value: playbackRateContextValue, children: jsx_runtime_1.jsx(exports.TimelineImperativeContext.Provider, { value: timelineImperativeContextValue, children: jsx_runtime_1.jsx(exports.TimelineContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }) }) }));
 };
 exports.TimelineContextProvider = TimelineContextProvider;

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

@@ -1,6 +1,7 @@
 import React, { type AudioHTMLAttributes } from 'react';
 import type { SharedElementSourceNode } from './shared-element-source-node.js';
 import type { RemotionAudioContextState } from './use-audio-context.js';
+import { type AudioContextResumeResult } from './wait-until-actually-resumed.js';
 /**
  * This functionality of Remotion will keep a certain amount
  * of <audio> tags pre-mounted and by default filled with an empty audio track.
@@ -58,7 +59,7 @@ type SharedAudioContextValue = {
     scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
     resume: () => Promise<void>;
     suspend: () => Promise<void>;
-    getIsResumingAudioContext: () => Promise<void> | null;
+    getIsResumingAudioContext: () => Promise<AudioContextResumeResult> | null;
     unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
 };
 type SharedAudioTagsContextValue = {

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

@@ -105,6 +105,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
     });
     const audioContextIsPlayingEventually = (0, react_1.useRef)(false);
     const isResuming = (0, react_1.useRef)(null);
+    const nextResumeAttemptId = (0, react_1.useRef)(0);
     const audioSyncAnchor = (0, react_1.useMemo)(() => ({ value: 0 }), []);
     const audioSyncAnchorListeners = (0, react_1.useRef)([]);
     const audioSyncAnchorEmitter = (0, react_1.useMemo)(() => {
@@ -203,24 +204,39 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
         });
         nodesToResume.current.clear();
         const resumePromise = ctxAndGain.resume();
-        isResuming.current = new Promise((resolve) => {
-            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel).then(resolve);
+        const abortController = new AbortController();
+        const resumeAttemptId = nextResumeAttemptId.current++;
+        const waitPromise = new Promise((resolve) => {
+            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel, abortController.signal).then(resolve);
             resumePromise.catch((err) => {
-                log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'AudioContext resume rejected, continuing without audio sync', err);
-                resolve();
+                log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'AudioContext resume rejected, muting playback and continuing without audio', err);
+                abortController.abort();
+                resolve('failed');
             });
         }).finally(() => {
-            isResuming.current = null;
+            var _a;
+            if (((_a = isResuming.current) === null || _a === void 0 ? void 0 : _a.id) === resumeAttemptId) {
+                isResuming.current = null;
+            }
         });
+        isResuming.current = {
+            abortController,
+            id: resumeAttemptId,
+            promise: waitPromise,
+        };
         return resumePromise.catch(() => {
             // Already logged above; swallow to avoid unhandled rejection
             // since callers (e.g. use-playback.ts) do not await this.
         });
     }, [ctxAndGain, logLevel]);
     const getIsResumingAudioContext = (0, react_1.useCallback)(() => {
-        return isResuming.current;
+        var _a;
+        var _b;
+        return (_b = (_a = isResuming.current) === null || _a === void 0 ? void 0 : _a.promise) !== null && _b !== void 0 ? _b : null;
     }, []);
     const suspend = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = isResuming.current) === null || _a === void 0 ? void 0 : _a.abortController.abort();
         if (!ctxAndGain) {
             return Promise.resolve();
         }

package/dist/cjs/audio/wait-until-actually-resumed.d.ts

@@ -1 +1,2 @@
-export declare const waitUntilActuallyResumed: (audioContext: AudioContext, logLevel: "error" | "info" | "trace" | "verbose" | "warn") => Promise<void>;
+export type AudioContextResumeResult = 'resumed' | 'cancelled' | 'failed';
+export declare const waitUntilActuallyResumed: (audioContext: AudioContext, logLevel: "error" | "info" | "trace" | "verbose" | "warn", signal: AbortSignal) => Promise<AudioContextResumeResult>;

package/dist/cjs/audio/wait-until-actually-resumed.js

@@ -2,15 +2,36 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitUntilActuallyResumed = void 0;
 const log_js_1 = require("../log.js");
-const waitUntilActuallyResumed = (audioContext, logLevel) => {
+const RESUME_WAIT_TIMEOUT = 1000;
+const waitUntilActuallyResumed = (audioContext, logLevel, signal) => {
     return new Promise((resolve) => {
         const startCurrentTime = audioContext.currentTime;
         const start = audioContext.getOutputTimestamp();
         const startOutputPerformanceTime = start.performanceTime;
         const startWallClock = performance.now();
+        let animationFrame = null;
+        let timeout = null;
+        let settled = false;
+        let onAbort = () => undefined;
+        const finish = (result) => {
+            if (settled) {
+                return;
+            }
+            settled = true;
+            if (animationFrame !== null) {
+                cancelAnimationFrame(animationFrame);
+            }
+            if (timeout !== null) {
+                clearTimeout(timeout);
+            }
+            signal.removeEventListener('abort', onAbort);
+            resolve(result);
+        };
+        onAbort = () => finish('cancelled');
         const check = () => {
             var _a;
             var _b;
+            animationFrame = null;
             const { currentTime } = audioContext;
             const outputTimestamp = audioContext.getOutputTimestamp();
             const elapsedWallClock = performance.now() - startWallClock;
@@ -20,12 +41,21 @@ const waitUntilActuallyResumed = (audioContext, logLevel) => {
                 outputTimestamp.contextTime !== undefined &&
                 outputTimestamp.contextTime > startCurrentTime) {
                 log_js_1.Log.verbose({ logLevel, tag: 'audio' }, `waitUntilActuallyResumed: getOutputTimestamp.performanceTime advanced from ${startOutputPerformanceTime.toFixed(6)} to ${outputTimestamp.performanceTime.toFixed(6)} after ${elapsedWallClock.toFixed(1)}ms. currentTime=${currentTime.toFixed(6)} (advanced by ${(currentTime - startCurrentTime).toFixed(6)}), getOutputTimestamp.performanceTime=${(_b = (_a = outputTimestamp.performanceTime) === null || _a === void 0 ? void 0 : _a.toFixed(1)) !== null && _b !== void 0 ? _b : 'undefined'}`);
-                resolve();
+                finish('resumed');
                 return;
             }
-            requestAnimationFrame(check);
+            animationFrame = requestAnimationFrame(check);
         };
-        requestAnimationFrame(check);
+        if (signal.aborted) {
+            finish('cancelled');
+            return;
+        }
+        signal.addEventListener('abort', onAbort, { once: true });
+        timeout = setTimeout(() => {
+            log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'WARNING: You enabled autoPlay on an unmuted <Player /> and the browser did not allow the video to be started. Remotion muted the <Player /> so it can play. To properly handle this, either set the `muted` prop or remove the `autoPlay` prop');
+            finish('failed');
+        }, RESUME_WAIT_TIMEOUT);
+        animationFrame = requestAnimationFrame(check);
     });
 };
 exports.waitUntilActuallyResumed = waitUntilActuallyResumed;

package/dist/cjs/buffering.js

@@ -41,8 +41,14 @@ const playback_logging_1 = require("./playback-logging");
 const use_remotion_environment_1 = require("./use-remotion-environment");
 const useBufferManager = (logLevel, mountTime) => {
     const [blocks, setBlocks] = (0, react_1.useState)([]);
-    const [onBufferingCallbacks, setOnBufferingCallbacks] = (0, react_1.useState)([]);
-    const [onResumeCallbacks, setOnResumeCallbacks] = (0, react_1.useState)([]);
+    // Listener registries are refs, not state: `usePlayback` parks its loop
+    // during buffering and registers its resume listener from a rAF callback.
+    // With state, that registration only lands after the next React commit -
+    // if the last block unblocks before then, the resume dispatch reads the
+    // previous array, the listener is never called, and the playback loop
+    // stays parked forever (frame clock frozen while isPlaying() is true).
+    const onBufferingCallbacks = (0, react_1.useRef)([]);
+    const onResumeCallbacks = (0, react_1.useRef)([]);
     const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
     const rendering = env.isRendering;
     const buffering = (0, react_1.useRef)(false);
@@ -71,18 +77,21 @@ const useBufferManager = (logLevel, mountTime) => {
         };
     }, [rendering]);
     const listenForBuffering = (0, react_1.useCallback)((callback) => {
-        setOnBufferingCallbacks((c) => [...c, callback]);
+        onBufferingCallbacks.current = [
+            ...onBufferingCallbacks.current,
+            callback,
+        ];
         return {
             remove: () => {
-                setOnBufferingCallbacks((c) => c.filter((cb) => cb !== callback));
+                onBufferingCallbacks.current = onBufferingCallbacks.current.filter((cb) => cb !== callback);
             },
         };
     }, []);
     const listenForResume = (0, react_1.useCallback)((callback) => {
-        setOnResumeCallbacks((c) => [...c, callback]);
+        onResumeCallbacks.current = [...onResumeCallbacks.current, callback];
         return {
             remove: () => {
-                setOnResumeCallbacks((c) => c.filter((cb) => cb !== callback));
+                onResumeCallbacks.current = onResumeCallbacks.current.filter((cb) => cb !== callback);
             },
         };
     }, []);
@@ -95,7 +104,7 @@ const useBufferManager = (logLevel, mountTime) => {
         // not re-dispatch `waiting` to listeners.
         if (blocks.length > 0 && !buffering.current) {
             buffering.current = true;
-            onBufferingCallbacks.forEach((c) => c());
+            [...onBufferingCallbacks.current].forEach((c) => c());
             (0, playback_logging_1.playbackLogging)({
                 logLevel,
                 message: 'Player is entering buffer state',
@@ -119,7 +128,7 @@ const useBufferManager = (logLevel, mountTime) => {
             // dispatch `resume` to listeners.
             if (blocks.length === 0 && buffering.current) {
                 buffering.current = false;
-                onResumeCallbacks.forEach((c) => c());
+                [...onResumeCallbacks.current].forEach((c) => c());
                 (0, playback_logging_1.playbackLogging)({
                     logLevel,
                     message: 'Player is exiting buffer state',

package/dist/cjs/index.d.ts

@@ -1,7 +1,7 @@
 import './_check-rsc.js';
 import './asset-types.js';
 import type { Codec } from './codec.js';
-import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentIdentity, LoopDisplay, SequenceControls, TRenderAsset } from './CompositionManager.js';
+import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentIdentity, LoopDisplay, SequenceControls, SequenceRegistrationControls, TRenderAsset } from './CompositionManager.js';
 import type { DelayRenderScope } from './delay-render.js';
 import { type TFolder } from './Folder.js';
 import type { StaticFile } from './get-static-files.js';
@@ -9,6 +9,7 @@ import type { AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, Captions
 import type { LogLevel } from './log.js';
 import type { ProResProfile } from './prores-profile.js';
 import type { PixelFormat, VideoImageFormat } from './render-types.js';
+import type { RuntimeValueSnapshot, RuntimeValueStore } from './runtime-value-store.js';
 import type { UseBufferState } from './use-buffer-state';
 import type { VideoConfig } from './video-config.js';
 export type VideoConfigWithSerializedProps = Omit<VideoConfig, 'defaultProps' | 'props'> & {
@@ -183,4 +184,4 @@ export type _InternalTypes = {
     TRenderAsset: TRenderAsset;
     ProResProfile: ProResProfile;
 };
-export type { AnyComposition, AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, CaptionsFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };
+export type { AnyComposition, AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, CaptionsFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, RuntimeValueSnapshot, RuntimeValueStore, SequenceControls, SequenceRegistrationControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };

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

@@ -386,6 +386,11 @@ export declare const backgroundSchema: {
     };
 };
 export declare const svgStrokeSchema: {
+    readonly color: {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Current color";
+    };
     readonly stroke: {
         readonly type: "color";
         readonly default: "none";
@@ -401,6 +406,11 @@ export declare const svgStrokeSchema: {
     };
 };
 export declare const svgPaintSchema: {
+    readonly color: {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Current color";
+    };
     readonly stroke: {
         readonly type: "color";
         readonly default: "none";

package/dist/cjs/interactivity-schema.js

@@ -208,7 +208,15 @@ exports.backgroundSchema = {
         description: 'Color',
     },
 };
+const svgColorSchema = {
+    color: {
+        type: 'color',
+        default: undefined,
+        description: 'Current color',
+    },
+};
 exports.svgStrokeSchema = {
+    ...svgColorSchema,
     stroke: {
         type: 'color',
         // `none` is the SVG initial value of stroke.

package/dist/cjs/internals.d.ts

@@ -16,7 +16,7 @@ import type { ResolvedStackLocation } from './sequence-stack-traces.js';
 import type { CannotUpdateSequenceReason } from './SequenceManager.js';
 import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFalse, type CanUpdateEffectPropsResponseTrue, type CanUpdateSequencePropsResponse, type CanUpdateSequencePropsResponseFalse, type CanUpdateSequencePropsResponseTrue, type SequenceNodePath, type SequencePropsSubscriptionKey, type VideoConfigValues } from './SequenceManager.js';
 import * as TimelinePosition from './timeline-position-state.js';
-import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineContextValue } from './TimelineContext.js';
+import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineImperativeContextValue, type TimelineContextValue } from './TimelineContext.js';
 import { truthy } from './truthy.js';
 import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, VideoConfigNumericExpression } from './use-schema.js';
 import { type CanUpdateSequencePropStatus, type DragOverrides, type EffectDragOverrides, type PropStatuses } from './use-schema.js';
@@ -26,6 +26,8 @@ import { useRemotionContexts } from './wrap-remotion-context.js';
 export type { EffectChainState } from './effects/run-effect-chain.js';
 export declare const Internals: {
     readonly MaxMediaCacheSizeContext: import("react").Context<number | null>;
+    readonly makeRenderResourceManager: () => import("./render-resource-manager.js").RenderResourceManager;
+    readonly RenderResourceManagerContext: import("react").Context<import("./render-resource-manager.js").RenderResourceManager | null>;
     readonly useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
     readonly useFrameForVolumeProp: (behavior: import("./index.js").LoopVolumeCurveBehavior) => number;
     readonly useTimelinePosition: () => number;
@@ -812,7 +814,7 @@ export declare const Internals: {
         scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
         resume: () => Promise<void>;
         suspend: () => Promise<void>;
-        getIsResumingAudioContext: () => Promise<void> | null;
+        getIsResumingAudioContext: () => Promise<import("./audio/wait-until-actually-resumed.js").AudioContextResumeResult> | null;
         unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
     } | null>;
     readonly SharedAudioContextProvider: import("react").FC<{
@@ -873,6 +875,7 @@ export declare const Internals: {
         getCompositions: () => import("./CompositionManager.js").AnyComposition[];
     } | null>;
     readonly portalNode: () => HTMLElement;
+    readonly setPortalNodeCurrentScale: (scale: number) => void;
     readonly waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
     readonly SetTimelineContext: import("react").Context<SetTimelineContextValue>;
     readonly CanUseRemotionHooksProvider: import("react").FC<{
@@ -1166,6 +1169,7 @@ export declare const Internals: {
     readonly TimelinePosition: typeof TimelinePosition;
     readonly DelayRenderContextType: import("react").Context<import("./delay-render.js").DelayRenderScope | null>;
     readonly TimelineContext: import("react").Context<TimelineContextValue | null>;
+    readonly TimelineImperativeContext: import("react").Context<TimelineImperativeContextValue | null>;
     readonly PlaybackRateContext: import("react").Context<PlaybackRateContextValue | null>;
     readonly AbsoluteTimeContext: import("react").Context<TimelineContextValue | null>;
     readonly RenderAssetManagerProvider: import("react").FC<{
@@ -1269,4 +1273,4 @@ export declare const Internals: {
         readonly componentName: string;
     }) => import("react").CSSProperties | null;
 };
-export type { ArrayFieldSchema, AssetFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, VideoConfigNumericExpression, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };
+export type { ArrayFieldSchema, AssetFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, VideoConfigNumericExpression, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TimelineImperativeContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -78,6 +78,7 @@ const PremountContext_js_1 = require("./PremountContext.js");
 const register_root_js_1 = require("./register-root.js");
 const remotion_environment_context_js_1 = require("./remotion-environment-context.js");
 const RemotionRoot_js_1 = require("./RemotionRoot.js");
+const render_resource_manager_js_1 = require("./render-resource-manager.js");
 const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
@@ -123,6 +124,8 @@ const compositionSelectorRef = (0, react_1.createRef)();
 // API and are less likely to use it
 exports.Internals = {
     MaxMediaCacheSizeContext: max_video_cache_size_js_1.MaxMediaCacheSizeContext,
+    makeRenderResourceManager: render_resource_manager_js_1.makeRenderResourceManager,
+    RenderResourceManagerContext: render_resource_manager_js_1.RenderResourceManagerContext,
     useUnsafeVideoConfig: use_unsafe_video_config_js_1.useUnsafeVideoConfig,
     useFrameForVolumeProp: use_audio_frame_js_1.useFrameForVolumeProp,
     useTimelinePosition: TimelinePosition.useTimelinePosition,
@@ -188,6 +191,7 @@ exports.Internals = {
     getPreviewDomElement: get_preview_dom_element_js_1.getPreviewDomElement,
     compositionsRef: CompositionManager_js_1.compositionsRef,
     portalNode: portal_node_js_1.portalNode,
+    setPortalNodeCurrentScale: portal_node_js_1.setPortalNodeCurrentScale,
     waitForRoot: register_root_js_1.waitForRoot,
     SetTimelineContext: TimelineContext_js_1.SetTimelineContext,
     CanUseRemotionHooksProvider: CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider,
@@ -248,6 +252,7 @@ exports.Internals = {
     TimelinePosition,
     DelayRenderContextType: use_delay_render_js_1.DelayRenderContextType,
     TimelineContext: TimelineContext_js_1.TimelineContext,
+    TimelineImperativeContext: TimelineContext_js_1.TimelineImperativeContext,
     PlaybackRateContext: TimelineContext_js_1.PlaybackRateContext,
     AbsoluteTimeContext: TimelineContext_js_1.AbsoluteTimeContext,
     RenderAssetManagerProvider: RenderAssetManager_js_1.RenderAssetManagerProvider,

package/dist/cjs/interpolate-keyframed-status.js

@@ -10,6 +10,8 @@ const easingToFn = ({ easing, forceSpringAllowTail, }) => {
     switch (easing.type) {
         case 'linear':
             return easing_js_1.Easing.linear;
+        case 'step1':
+            return easing_js_1.Easing.step1;
         case 'spring':
             return easing_js_1.Easing.spring({
                 allowTail: (_a = forceSpringAllowTail !== null && forceSpringAllowTail !== void 0 ? forceSpringAllowTail : easing.allowTail) !== null && _a !== void 0 ? _a : undefined,

package/dist/cjs/portal-node.d.ts

@@ -1 +1,4 @@
+export declare const getPortalNodeCurrentScale: () => number;
+export declare const subscribeToPortalNodeCurrentScale: (listener: () => void) => () => void;
+export declare const setPortalNodeCurrentScale: (scale: number) => void;
 export declare const portalNode: () => HTMLElement;