remotion 4.0.512 → 4.0.514

package/dist/cjs/CompositionManager.d.ts

@@ -34,6 +34,7 @@ type EnhancedTSequenceData = {
     src: string;
     volume: string | number;
     doesVolumeChange: boolean;
+    muted: boolean;
     startMediaFrom: number;
     mediaFrameAtSequenceZero: number | null;
     playbackRate: number;
@@ -43,6 +44,7 @@ type EnhancedTSequenceData = {
     src: string;
     volume: string | number;
     doesVolumeChange: boolean;
+    muted: boolean;
     startMediaFrom: number;
     mediaFrameAtSequenceZero: number | null;
     playbackRate: number;
@@ -85,6 +87,7 @@ export type TSequence = {
     controls: SequenceRegistrationControls | null;
     refForOutline: React.RefObject<Element | null> | null;
     effects: readonly EffectDefinition<unknown>[];
+    effectRuntimeValues: readonly RuntimeValueStore[] | null;
     isInsideSeries: boolean;
     frozenFrame: number | null;
     singleChildComponent?: unknown;

package/dist/cjs/HtmlInCanvas.js

@@ -13,6 +13,23 @@ const use_crop_style_js_1 = require("./use-crop-style.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
+// `transferControlToOffscreen()` may only be called once per canvas — a second
+// call throws an `InvalidStateError`. The layout effect that needs the
+// `OffscreenCanvas` can run more than once for the same canvas element: its
+// dependencies (e.g. the paint callback) can change identity without the
+// canvas remounting, and React StrictMode intentionally double-invokes
+// effects. Cache the transferred `OffscreenCanvas` per canvas element so
+// re-runs reuse it instead of throwing.
+const transferredOffscreenCanvases = new WeakMap();
+const getTransferredOffscreenCanvas = (canvas) => {
+    const existing = transferredOffscreenCanvases.get(canvas);
+    if (existing) {
+        return existing;
+    }
+    const offscreen = canvas.transferControlToOffscreen();
+    transferredOffscreenCanvases.set(canvas, offscreen);
+    return offscreen;
+};
 // Memoize the support check across the session — neither the platform
 // capability nor the chrome://flags toggle can change between calls.
 // SSR results are not cached so the check runs again once `document` exists.
@@ -36,17 +53,6 @@ const isHtmlInCanvasSupported = () => {
 exports.isHtmlInCanvasSupported = isHtmlInCanvasSupported;
 /** Shown when {@link isHtmlInCanvasSupported} is false: APIs are absent (old Chrome and/or flag off). */
 exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = 'HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome).';
-const MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS = 152;
-const getChromeMajorVersion = () => {
-    if (typeof navigator === 'undefined') {
-        return null;
-    }
-    const match = navigator.userAgent.match(/\b(?:HeadlessChrome|Chrome)\/(\d+)/);
-    if (!match) {
-        return null;
-    }
-    return Number(match[1]);
-};
 function assertHtmlInCanvasDimensions(width, height) {
     if (typeof width !== 'number' || typeof height !== 'number') {
         throw new Error(`HtmlInCanvas: \`width\` and \`height\` must be numbers. Received width=${String(width)}, height=${String(height)}.`);
@@ -90,16 +96,14 @@ const defaultOnPaint = ({ canvas, element, elementImage, }) => {
     const transform = ctx.drawElementImage(elementImage, 0, 0);
     element.style.transform = transform.toString();
 };
-const HtmlInCanvasAncestorContext = (0, react_1.createContext)(null);
+/* eslint-enable react/require-default-props */
+const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
 const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, children, onPaint, onInit, pixelDensity, controls, style, }, ref) => {
     var _a;
-    const ancestor = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
+    const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
-    const chromeMajorVersion = getChromeMajorVersion();
-    if (ancestor &&
-        chromeMajorVersion !== null &&
-        chromeMajorVersion < MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS) {
-        throw new Error(`Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer, but the current browser is Chrome ${chromeMajorVersion}. Upgrade Chrome or avoid nesting components that use <HtmlInCanvas>, such as shapes with effects.`);
+    if (isInsideAncestorHtmlInCanvas) {
+        throw new Error('<HtmlInCanvas> components cannot be nested. Chrome does not reliably render nested HTML-in-canvas subtrees. Consider merging the effects into one <HtmlInCanvas> if you can.');
     }
     const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
@@ -139,10 +143,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const initializedRef = (0, react_1.useRef)(false);
     const onInitCleanupRef = (0, react_1.useRef)(null);
     const unmountedRef = (0, react_1.useRef)(false);
-    const ancestorRef = (0, react_1.useRef)(ancestor);
-    ancestorRef.current = ancestor;
     const onPaintCb = (0, react_1.useCallback)(async () => {
-        var _a;
         const element = divRef.current;
         if (!element) {
             throw new Error('Canvas or scene element not found');
@@ -267,10 +268,6 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             finally {
                 elImage.close();
             }
-            // Effects may complete after Chromium has dispatched the parent's
-            // paint event. Repaint the direct parent so deeply nested canvases
-            // propagate their final pixels through every ancestor.
-            (_a = ancestorRef.current) === null || _a === void 0 ? void 0 : _a.requestParentPaint();
             continueRender(handle);
         }
         catch (error) {
@@ -286,9 +283,8 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         resolvedPixelDensity,
         canRetryMissingPaintRecord,
     ]);
-    // Default paint handlers draw synchronously on the layout canvas itself so
-    // Chromium can include their final pixels during its deepest-first nested
-    // paint traversal. Custom handlers retain the transferred OffscreenCanvas API.
+    // Default paint handlers draw synchronously on the layout canvas itself.
+    // Custom handlers retain the transferred OffscreenCanvas API.
     (0, react_1.useLayoutEffect)(() => {
         const placeholder = canvas2dRef.current;
         if (!placeholder) {
@@ -297,7 +293,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         placeholder.layoutSubtree = true;
         const paintTarget = usesDirectLayoutCanvas
             ? placeholder
-            : placeholder.transferControlToOffscreen();
+            : getTransferredOffscreenCanvas(placeholder);
         paintTargetRef.current = paintTarget;
         resizePaintTarget({
             target: paintTarget,
@@ -362,15 +358,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             ...(style !== null && style !== void 0 ? style : {}),
         };
     }, [height, style, width]);
-    const ancestorValue = (0, react_1.useMemo)(() => {
-        return {
-            requestParentPaint: () => {
-                var _a, _b;
-                (_b = (_a = canvas2dRef.current) === null || _a === void 0 ? void 0 : _a.requestPaint) === null || _b === void 0 ? void 0 : _b.call(_a);
-            },
-        };
-    }, []);
-    return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: ancestorValue, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
+    return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: true, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, name, ...sequenceProps }, ref) => {

package/dist/cjs/Sequence.js

@@ -195,6 +195,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     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 effectRuntimeValues = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = _remotionInternalEffects === null || _remotionInternalEffects === void 0 ? void 0 : _remotionInternalEffects.runtimeValues) !== null && _a !== void 0 ? _a : null;
+    }, [_remotionInternalEffects]);
     const registrationControls = (0, react_1.useMemo)(() => {
         if (controlsSchema === undefined ||
             controlsRuntimeValues === undefined ||
@@ -231,6 +235,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     type: 'image',
                     controls: registrationControls,
                     effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
+                    effectRuntimeValues,
                     displayName: timelineClipName,
                     documentationLink: resolvedDocumentationLink,
                     duration: actualDurationInFrames,
@@ -256,6 +261,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     type: isMedia.type,
                     controls: registrationControls,
                     effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
+                    effectRuntimeValues,
                     displayName: timelineClipName,
                     documentationLink: resolvedDocumentationLink,
                     doesVolumeChange: isMedia.data.doesVolumeChange,
@@ -275,6 +281,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     startMediaFrom: startMediaFrom !== null && startMediaFrom !== void 0 ? startMediaFrom : isMedia.data.startMediaFrom,
                     mediaFrameAtSequenceZero,
                     volume: isMedia.data.volumes,
+                    muted: isMedia.data.muted,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
                     frozenFrame: registeredFrozenFrame,
@@ -303,6 +310,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
             controls: registrationControls,
             effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
+            effectRuntimeValues,
             refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
             isInsideSeries,
             frozenFrame: registeredFrozenFrame,
@@ -331,6 +339,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         env.isStudio,
         registrationControls,
         _remotionInternalEffects,
+        effectRuntimeValues,
         isMedia,
         resolvedDocumentationLink,
         refForOutline,

package/dist/cjs/audio/AudioForPreview.js

@@ -136,6 +136,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         loopDisplay: undefined,
         documentationLink: 'https://www.remotion.dev/docs/html5-audio',
         refForOutline: null,
+        muted: muted !== null && muted !== void 0 ? muted : false,
     });
     // putting playback before useVolume
     // because volume looks at playbackrate

package/dist/cjs/delay-render-constants.d.ts

@@ -0,0 +1,4 @@
+export declare const DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
+export declare const DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
+export declare const DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
+export declare const DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";

package/dist/cjs/delay-render-constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DELAY_RENDER_CLEAR_TOKEN = exports.DELAY_RENDER_RETRY_TOKEN = exports.DELAY_RENDER_RETRIES_LEFT = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
+exports.DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
+exports.DELAY_RENDER_RETRIES_LEFT = 'Retries left: ';
+exports.DELAY_RENDER_RETRY_TOKEN = '- Rendering the frame will be retried.';
+exports.DELAY_RENDER_CLEAR_TOKEN = 'handle was cleared after';

package/dist/cjs/delay-render.d.ts

@@ -1,5 +1,6 @@
 import type { LogLevel } from './log.js';
 import type { RemotionEnvironment } from './remotion-environment-context.js';
+export { DELAY_RENDER_CALLSTACK_TOKEN, DELAY_RENDER_CLEAR_TOKEN, DELAY_RENDER_RETRIES_LEFT, DELAY_RENDER_RETRY_TOKEN, } from './delay-render-constants.js';
 export type DelayRenderScope = {
     remotion_renderReady: boolean;
     remotion_delayRenderTimeouts: {
@@ -14,10 +15,6 @@ export type DelayRenderScope = {
     remotion_delayRenderHandles: number[];
     remotion_cancelledError?: string;
 };
-export declare const DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
-export declare const DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
-export declare const DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
-export declare const DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";
 export type DelayRenderOptions = {
     timeoutInMilliseconds?: number;
     retries?: number;
@@ -47,4 +44,3 @@ type ContinueRenderInternalOptions = {
 };
 export declare const continueRenderInternal: ({ scope, handle, environment, logLevel, }: ContinueRenderInternalOptions) => void;
 export declare const continueRender: (handle: number) => void;
-export {};

package/dist/cjs/delay-render.js

@@ -1,10 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.continueRender = exports.continueRenderInternal = exports.delayRender = exports.delayRenderInternal = exports.DELAY_RENDER_CLEAR_TOKEN = exports.DELAY_RENDER_RETRY_TOKEN = exports.DELAY_RENDER_RETRIES_LEFT = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
+exports.continueRender = exports.continueRenderInternal = exports.delayRender = exports.delayRenderInternal = exports.DELAY_RENDER_RETRY_TOKEN = exports.DELAY_RENDER_RETRIES_LEFT = exports.DELAY_RENDER_CLEAR_TOKEN = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
 const cancel_render_js_1 = require("./cancel-render.js");
+const delay_render_constants_js_1 = require("./delay-render-constants.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const log_js_1 = require("./log.js");
 const truthy_js_1 = require("./truthy.js");
+const delay_render_constants_js_2 = require("./delay-render-constants.js");
+Object.defineProperty(exports, "DELAY_RENDER_CALLSTACK_TOKEN", { enumerable: true, get: function () { return delay_render_constants_js_2.DELAY_RENDER_CALLSTACK_TOKEN; } });
+Object.defineProperty(exports, "DELAY_RENDER_CLEAR_TOKEN", { enumerable: true, get: function () { return delay_render_constants_js_2.DELAY_RENDER_CLEAR_TOKEN; } });
+Object.defineProperty(exports, "DELAY_RENDER_RETRIES_LEFT", { enumerable: true, get: function () { return delay_render_constants_js_2.DELAY_RENDER_RETRIES_LEFT; } });
+Object.defineProperty(exports, "DELAY_RENDER_RETRY_TOKEN", { enumerable: true, get: function () { return delay_render_constants_js_2.DELAY_RENDER_RETRY_TOKEN; } });
 if (typeof window !== 'undefined') {
     window.remotion_renderReady = false;
     if (!window.remotion_delayRenderTimeouts) {
@@ -12,10 +18,6 @@ if (typeof window !== 'undefined') {
     }
     window.remotion_delayRenderHandles = [];
 }
-exports.DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
-exports.DELAY_RENDER_RETRIES_LEFT = 'Retries left: ';
-exports.DELAY_RENDER_RETRY_TOKEN = '- Rendering the frame will be retried.';
-exports.DELAY_RENDER_CLEAR_TOKEN = 'handle was cleared after';
 const defaultTimeout = 30000;
 const delayRenderInternal = ({ scope, environment, label, options, }) => {
     var _a;
@@ -38,9 +40,9 @@ const delayRenderInternal = ({ scope, environment, label, options, }) => {
                     `A delayRender()`,
                     label ? `"${label}"` : null,
                     `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-                    retriesLeft > 0 ? exports.DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
-                    retriesLeft > 0 ? exports.DELAY_RENDER_RETRY_TOKEN : null,
-                    exports.DELAY_RENDER_CALLSTACK_TOKEN,
+                    retriesLeft > 0 ? delay_render_constants_js_1.DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
+                    retriesLeft > 0 ? delay_render_constants_js_1.DELAY_RENDER_RETRY_TOKEN : null,
+                    delay_render_constants_js_1.DELAY_RENDER_CALLSTACK_TOKEN,
                     called,
                 ]
                     .filter(truthy_js_1.truthy)
@@ -90,7 +92,7 @@ const continueRenderInternal = ({ scope, handle, environment, logLevel, }) => {
         clearTimeout(timeout);
         const message = [
             label ? `"${label}"` : 'A handle',
-            exports.DELAY_RENDER_CLEAR_TOKEN,
+            delay_render_constants_js_1.DELAY_RENDER_CLEAR_TOKEN,
             `${Date.now() - startTime}ms`,
         ]
             .filter(truthy_js_1.truthy)

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

@@ -1,8 +1,11 @@
+import type { RuntimeValueStore } from '../runtime-value-store.js';
 import type { CannotUpdateEffectReason, CannotUpdateSequenceReason } from '../SequenceManager.js';
 import { type SequencePropsSubscriptionKey } from '../SequenceManager.js';
 import { type CanUpdateSequencePropStatus, type PropStatuses } from '../use-schema.js';
-import type { EffectDefinition, EffectDefinitionAndStack, EffectDescriptor } from './effect-types.js';
-export declare const useMemoizedEffectDefinitions: (effects: readonly EffectDescriptor<unknown>[]) => readonly EffectDefinition<unknown>[];
+import type { EffectDefinitionAndStack, EffectDescriptor, EffectDefinition } from './effect-types.js';
+export declare const useMemoizedEffectDefinitions: (effects: readonly EffectDescriptor<unknown>[]) => readonly EffectDefinition<unknown>[] & {
+    readonly runtimeValues: readonly RuntimeValueStore[];
+};
 type EffectStatus = {
     type: 'cannot-update-sequence';
     reason: CannotUpdateSequenceReason;

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

@@ -4,6 +4,7 @@ exports.useMemoizedEffects = exports.getPropStatusesCtx = exports.getEffectPropS
 const react_1 = require("react");
 const get_effective_visual_mode_value_js_1 = require("../get-effective-visual-mode-value.js");
 const interpolate_keyframed_status_js_1 = require("../interpolate-keyframed-status.js");
+const runtime_value_store_js_1 = require("../runtime-value-store.js");
 const sequence_node_path_js_1 = require("../sequence-node-path.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
@@ -68,13 +69,25 @@ const useMemoizedEffectDefinitions = (effects) => {
     const definitions = effects.map((descriptor) => descriptor.definition);
     const previous = previousRef.current;
     const isSame = previous !== null &&
-        previous.length === definitions.length &&
-        previous.every((def, i) => def === definitions[i]);
-    if (isSame) {
-        return previous;
-    }
-    previousRef.current = definitions;
-    return definitions;
+        previous.definitions.length === definitions.length &&
+        previous.definitions.every((definition, i) => definition === definitions[i]);
+    const controllers = isSame
+        ? previous.controllers
+        : effects.map((effect) => (0, runtime_value_store_js_1.createRuntimeValueStore)(effect.params));
+    const stableDefinitions = isSame ? previous.definitions : definitions;
+    (0, react_1.useLayoutEffect)(() => {
+        // Stores are intentionally updated without changing the registered effect
+        // array, so frame-dependent parameters don't re-register the Sequence.
+        stableDefinitions.forEach((_definition, index) => {
+            var _a;
+            const snapshot = (_a = effects[index]) === null || _a === void 0 ? void 0 : _a.params;
+            controllers[index].setSnapshot(snapshot);
+        });
+    }, [controllers, effects, stableDefinitions]);
+    previousRef.current = { definitions: stableDefinitions, controllers };
+    return Object.assign(stableDefinitions, {
+        runtimeValues: controllers.map((controller) => controller.store),
+    });
 };
 exports.useMemoizedEffectDefinitions = useMemoizedEffectDefinitions;
 const getEffectPropStatusesCtx = ({ propStatuses, nodePath, effectIndex, }) => {

package/dist/cjs/get-effective-visual-mode-value.d.ts

@@ -5,6 +5,10 @@ export type ResolvedDragOverrideValue = {
     readonly type: 'resolved';
     readonly value: unknown;
 };
+export declare const getFrameInKeyframedStatusClock: ({ frame, status, }: {
+    readonly frame: number;
+    readonly status: CanUpdateSequencePropStatusKeyframed;
+}) => number;
 export declare const resolveDragOverrideValue: ({ dragOverrideValue, frame, }: {
     dragOverrideValue: DragOverrideValue | undefined;
     frame: number | null;

package/dist/cjs/get-effective-visual-mode-value.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEffectiveVisualModeValue = exports.resolveDragOverrideValue = void 0;
+exports.getEffectiveVisualModeValue = exports.resolveDragOverrideValue = exports.getFrameInKeyframedStatusClock = void 0;
 const interpolate_keyframed_status_1 = require("./interpolate-keyframed-status");
+const getFrameInKeyframedStatusClock = ({ frame, status, }) => {
+    var _a;
+    return frame - ((_a = status.keyframeDisplayOffsetAdjustment) !== null && _a !== void 0 ? _a : 0);
+};
+exports.getFrameInKeyframedStatusClock = getFrameInKeyframedStatusClock;
 const resolveDragOverrideValue = ({ dragOverrideValue, frame, }) => {
     if (dragOverrideValue === undefined) {
         return { type: 'none' };
@@ -14,7 +19,10 @@ const resolveDragOverrideValue = ({ dragOverrideValue, frame, }) => {
     }
     const interpolated = (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
         forceSpringAllowTail: null,
-        frame,
+        frame: (0, exports.getFrameInKeyframedStatusClock)({
+            frame,
+            status: dragOverrideValue.status,
+        }),
         status: dragOverrideValue.status,
     });
     if (interpolated === null) {
@@ -35,7 +43,7 @@ const getEffectiveVisualModeValue = ({ propStatus, dragOverrideValue, defaultVal
         if (frame !== null) {
             return (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
                 forceSpringAllowTail: null,
-                frame,
+                frame: (0, exports.getFrameInKeyframedStatusClock)({ frame, status: propStatus }),
                 status: propStatus,
             });
         }

package/dist/cjs/internals.d.ts

@@ -25,6 +25,7 @@ import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
 import { useRemotionContexts } from './wrap-remotion-context.js';
 export type { EffectChainState } from './effects/run-effect-chain.js';
 export declare const Internals: {
+    readonly AbsoluteFillElement: import("react").ForwardRefExoticComponent<Omit<import("./AbsoluteFillElement.js").AbsoluteFillElementProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     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>;
@@ -753,7 +754,7 @@ export declare const Internals: {
     readonly getRoot: () => import("react").FC<{}> | null;
     readonly useMediaVolumeState: () => readonly [number, (u: number) => void];
     readonly usePlayerMutedState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void];
-    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, }: {
+    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, muted, }: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         mediaVolume: number;
         src: string | undefined;
@@ -768,6 +769,7 @@ export declare const Internals: {
         loopDisplay: import("./CompositionManager.js").LoopDisplay | undefined;
         documentationLink: string | null;
         refForOutline: import("react").RefObject<Element | null> | null;
+        muted: boolean;
     }) => void;
     readonly useLazyComponent: <Props>({ compProps, componentName, noSuspense, }: {
         compProps: CompProps<Props>;
@@ -1129,7 +1131,7 @@ export declare const Internals: {
     }, "ref"> & import("react").RefAttributes<HTMLAudioElement>>;
     readonly OBJECTFIT_CONTAIN_CLASS_NAME: "__remotion_objectfitcontain";
     readonly InnerOffthreadVideo: import("react").FC<import("./video/props.js").AllOffthreadVideoProps>;
-    readonly useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, }: {
+    readonly useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, muted, }: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         mediaVolume: number;
         mediaType: "audio" | "image" | "video";
@@ -1141,6 +1143,7 @@ export declare const Internals: {
         sequenceDurationInFrames: number;
         mediaStartsAt: number;
         loop: boolean;
+        muted: boolean;
     }) => {
         volumes: string | number;
         duration: number;
@@ -1150,6 +1153,7 @@ export declare const Internals: {
         startMediaFrom: number;
         src: string;
         playbackRate: number;
+        muted: boolean;
     };
     readonly getInputPropsOverride: () => Record<string, unknown> | null;
     readonly setInputPropsOverride: (override: Record<string, unknown> | null) => void;
@@ -1197,7 +1201,9 @@ export declare const Internals: {
         effects: readonly import("./index.js").EffectDescriptor<unknown>[];
         readonly overrideId: string | null;
     }) => import("./index.js").EffectDefinitionAndStack<unknown>[];
-    readonly useMemoizedEffectDefinitions: (effects: readonly import("./index.js").EffectDescriptor<unknown>[]) => readonly import("./index.js").EffectDefinition<unknown>[];
+    readonly useMemoizedEffectDefinitions: (effects: readonly import("./index.js").EffectDescriptor<unknown>[]) => readonly import("./index.js").EffectDefinition<unknown>[] & {
+        readonly runtimeValues: readonly import("./runtime-value-store.js").RuntimeValueStore[];
+    };
     readonly createEffect: <P, S>(definition: import("./index.js").EffectDefinition<P, S>) => import("./index.js").EffectFactory<P>;
     readonly createWebGLContextError: (effectName: string) => Error;
     readonly createWebGL2ContextError: (effectName: string) => Error;

package/dist/cjs/internals.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Internals = void 0;
 const react_1 = require("react");
 const absolute_src_js_1 = require("./absolute-src.js");
+const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
 const get_duration_in_seconds_js_1 = require("./animated-image/get-duration-in-seconds.js");
 const AudioForPreview_js_1 = require("./audio/AudioForPreview.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
@@ -123,6 +124,7 @@ const compositionSelectorRef = (0, react_1.createRef)();
 // Mark them as Internals so use don't assume this is public
 // API and are less likely to use it
 exports.Internals = {
+    AbsoluteFillElement: AbsoluteFillElement_js_1.AbsoluteFillElement,
     MaxMediaCacheSizeContext: max_video_cache_size_js_1.MaxMediaCacheSizeContext,
     makeRenderResourceManager: render_resource_manager_js_1.makeRenderResourceManager,
     RenderResourceManagerContext: render_resource_manager_js_1.RenderResourceManagerContext,

package/dist/cjs/interpolate.js

@@ -490,8 +490,12 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
     var _a;
     const initiallyParsedOutputRange = outputRange.map(parseStringInterpolationValue);
     const hasAxisRotation = initiallyParsedOutputRange.some((parsed) => parsed.axisRotation);
+    const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
+        ? input
+        : Math.floor(input / options.posterize) * options.posterize;
+    const segmentIndex = inputRange.length === 1 ? 0 : findRange(posterizedInput, inputRange);
     const parsedOutputRange = hasAxisRotation
-        ? initiallyParsedOutputRange.map((parsed) => {
+        ? initiallyParsedOutputRange.map((parsed, index) => {
             if (parsed.kind !== 'rotate') {
                 return parsed;
             }
@@ -501,9 +505,22 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
             if (parsed.dimensions !== 1) {
                 throw new TypeError('Cannot interpolate a multi-angle rotate value with an axis rotation');
             }
+            // A zero-degree rotation is the identity regardless of its axis. Reusing
+            // the active neighbor's axis prevents the axis from drifting while the
+            // angle interpolates away from zero.
+            const adjacentAxisRotation = parsed.values[0] === 0
+                ? index === segmentIndex
+                    ? initiallyParsedOutputRange[index + 1]
+                    : index === segmentIndex + 1
+                        ? initiallyParsedOutputRange[index - 1]
+                        : undefined
+                : undefined;
+            const axis = (adjacentAxisRotation === null || adjacentAxisRotation === void 0 ? void 0 : adjacentAxisRotation.axisRotation)
+                ? adjacentAxisRotation.values
+                : [0, 0, 1];
             return {
                 kind: 'rotate',
-                values: [0, 0, 1, parsed.values[0]],
+                values: [axis[0], axis[1], axis[2], parsed.values[0]],
                 units: [null, null, null, parsed.units[0]],
                 dimensions: 4,
                 axisRotation: true,

package/dist/cjs/loading-indicator.js

@@ -15,6 +15,14 @@ const label = {
 const container = {
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: '#1f2428',
+};
+const content = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    animation: 'anim 2s',
+    animationFillMode: 'forwards',
 };
 const Loading = () => {
     return (jsx_runtime_1.jsxs(AbsoluteFillElement_js_1.AbsoluteFillElement, { style: container, id: "remotion-comp-loading", children: [
@@ -27,11 +35,9 @@ const Loading = () => {
 						opacity: 1
 					}
 				}
-				#remotion-comp-loading {
-					animation: anim 2s;
-					animation-fill-mode: forwards;
-				}
-			` }), jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx_runtime_1.jsx("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), jsx_runtime_1.jsxs("p", { style: label, children: ["Resolving ", '<Suspense>', "..."] })
+			` }), jsx_runtime_1.jsxs("div", { id: "remotion-comp-loading-content", style: content, children: [
+                    jsx_runtime_1.jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx_runtime_1.jsx("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), jsx_runtime_1.jsxs("p", { style: label, children: ["Resolving ", '<Suspense>', "..."] })
+                ] })
         ] }));
 };
 exports.Loading = Loading;

package/dist/cjs/no-react.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "assertValidInterpolatePosterizeOption", { enumer
 Object.defineProperty(exports, "interpolate", { enumerable: true, get: function () { return interpolate_1.interpolate; } });
 const random_js_1 = require("./random.js");
 Object.defineProperty(exports, "random", { enumerable: true, get: function () { return random_js_1.random; } });
-const delay_render_1 = require("./delay-render");
+const delay_render_constants_1 = require("./delay-render-constants");
 const find_props_to_delete_1 = require("./find-props-to-delete");
 const input_props_serialization_1 = require("./input-props-serialization");
 const input_props_serialization_js_1 = require("./input-props-serialization.js");
@@ -37,10 +37,10 @@ exports.NoReactInternals = {
     bundleName: 'bundle.js',
     bundleMapName: 'bundle.js.map',
     deserializeJSONWithSpecialTypes: input_props_serialization_1.deserializeJSONWithSpecialTypes,
-    DELAY_RENDER_CALLSTACK_TOKEN: delay_render_1.DELAY_RENDER_CALLSTACK_TOKEN,
-    DELAY_RENDER_RETRY_TOKEN: delay_render_1.DELAY_RENDER_RETRY_TOKEN,
-    DELAY_RENDER_CLEAR_TOKEN: delay_render_1.DELAY_RENDER_CLEAR_TOKEN,
-    DELAY_RENDER_ATTEMPT_TOKEN: delay_render_1.DELAY_RENDER_RETRIES_LEFT,
+    DELAY_RENDER_CALLSTACK_TOKEN: delay_render_constants_1.DELAY_RENDER_CALLSTACK_TOKEN,
+    DELAY_RENDER_RETRY_TOKEN: delay_render_constants_1.DELAY_RENDER_RETRY_TOKEN,
+    DELAY_RENDER_CLEAR_TOKEN: delay_render_constants_1.DELAY_RENDER_CLEAR_TOKEN,
+    DELAY_RENDER_ATTEMPT_TOKEN: delay_render_constants_1.DELAY_RENDER_RETRIES_LEFT,
     getOffthreadVideoSource: offthread_video_source_1.getOffthreadVideoSource,
     getExpectedMediaFrameUncorrected: get_current_time_1.getExpectedMediaFrameUncorrected,
     ENABLE_V5_BREAKING_CHANGES: v5_flag_1.ENABLE_V5_BREAKING_CHANGES,

package/dist/cjs/series/index.js

@@ -127,7 +127,7 @@ const SeriesInner = (props) => {
                     const currentStartFrame = startFrame + offset;
                     const nextStartFrame = startFrame + durationInFramesProp + offset;
                     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
+                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, _remotionInternalSingleChildComponent: (0, enable_sequence_stack_traces_js_1.getSingleChildComponent)(sequenceChildren), children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
                 },
             });
         };

package/dist/cjs/use-media-in-timeline.d.ts

@@ -1,6 +1,6 @@
 import type { LoopDisplay } from './CompositionManager.js';
 import type { VolumeProp } from './volume-prop.js';
-export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, }: {
+export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, muted, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     mediaType: "audio" | "image" | "video";
@@ -12,6 +12,7 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     sequenceDurationInFrames: number;
     mediaStartsAt: number;
     loop: boolean;
+    muted: boolean;
 }) => {
     volumes: string | number;
     duration: number;
@@ -21,9 +22,10 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     startMediaFrom: number;
     src: string;
     playbackRate: number;
+    muted: boolean;
 };
 export type BasicMediaInTimelineReturnType = ReturnType<typeof useBasicMediaInTimeline>;
-export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, }: {
+export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, muted, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     src: string | undefined;
@@ -38,4 +40,5 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType,
     loopDisplay: LoopDisplay | undefined;
     documentationLink: string | null;
     refForOutline: import("react").RefObject<Element | null> | null;
+    muted: boolean;
 }) => void;