remotion 4.0.513 → 4.0.515

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

@@ -53,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)}.`);
@@ -107,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);
@@ -156,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');
@@ -284,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) {
@@ -303,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) {
@@ -379,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/internals.d.ts

@@ -25,7 +25,17 @@ 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 getMediabunnyInputResourceKey: ({ src, credentials, requestInitFingerprint, revision, }: {
+        src: string;
+        credentials: RequestCredentials | null;
+        requestInitFingerprint: unknown;
+        revision: string | null;
+    }) => string;
+    readonly globalMediaResourceManager: import("./media-resource-manager.js").MediaResourceManager;
+    readonly makeMediaResourceManager: () => import("./media-resource-manager.js").MediaResourceManager;
+    readonly MEDIABUNNY_DURATION_VALUE_KEY: "mediabunny-duration";
     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;
@@ -753,7 +763,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 +778,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 +1140,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 +1152,7 @@ export declare const Internals: {
         sequenceDurationInFrames: number;
         mediaStartsAt: number;
         loop: boolean;
+        muted: boolean;
     }) => {
         volumes: string | number;
         duration: number;
@@ -1150,6 +1162,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 +1210,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");
@@ -69,6 +70,7 @@ const is_player_js_1 = require("./is-player.js");
 const log_level_context_js_1 = require("./log-level-context.js");
 const log_js_1 = require("./log.js");
 const max_video_cache_size_js_1 = require("./max-video-cache-size.js");
+const media_resource_manager_js_1 = require("./media-resource-manager.js");
 const nonce_js_1 = require("./nonce.js");
 const playback_logging_js_1 = require("./playback-logging.js");
 const portal_node_js_1 = require("./portal-node.js");
@@ -123,7 +125,12 @@ 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,
+    getMediabunnyInputResourceKey: media_resource_manager_js_1.getMediabunnyInputResourceKey,
+    globalMediaResourceManager: media_resource_manager_js_1.globalMediaResourceManager,
+    makeMediaResourceManager: media_resource_manager_js_1.makeMediaResourceManager,
+    MEDIABUNNY_DURATION_VALUE_KEY: media_resource_manager_js_1.MEDIABUNNY_DURATION_VALUE_KEY,
     makeRenderResourceManager: render_resource_manager_js_1.makeRenderResourceManager,
     RenderResourceManagerContext: render_resource_manager_js_1.RenderResourceManagerContext,
     useUnsafeVideoConfig: use_unsafe_video_config_js_1.useUnsafeVideoConfig,

package/dist/cjs/interpolate-translate.d.ts

@@ -0,0 +1,8 @@
+import { type InterpolateOptions } from './interpolate.js';
+export type InterpolateTranslateOptions = InterpolateOptions;
+export declare const interpolateTranslate: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: Partial<{
+    easing: import("./interpolate.js").EasingFunction | readonly import("./interpolate.js").EasingFunction[];
+    extrapolateLeft: import("./interpolate.js").ExtrapolateType;
+    extrapolateRight: import("./interpolate.js").ExtrapolateType;
+    posterize: number;
+}> | undefined) => string;

package/dist/cjs/interpolate-translate.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateTranslate = void 0;
+const interpolate_js_1 = require("./interpolate.js");
+const pixelValueRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))px$/;
+const parseTranslate = (value) => {
+    if (typeof value !== 'string') {
+        throw new TypeError(`outputRange must contain only strings, but got ${typeof value}`);
+    }
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        throw new TypeError(`translate values must contain 1 to 3 pixel values, but got "${value}"`);
+    }
+    return parts.map((part) => {
+        const match = pixelValueRegex.exec(part);
+        if (match === null) {
+            throw new TypeError(`interpolateTranslate() only supports px values, but got "${part}" in "${value}"`);
+        }
+        return Number(match[1]);
+    });
+};
+/*
+ * @description Allows you to map a range of values to CSS translate values using pixel units.
+ * @see [Documentation](https://remotion.dev/docs/interpolate-translate)
+ */
+const interpolateTranslate = (input, inputRange, outputRange, options) => {
+    var _a;
+    if (typeof input === 'undefined') {
+        throw new TypeError('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new TypeError('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new TypeError('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new TypeError('inputRange (' +
+            inputRange.length +
+            ' values provided) and outputRange (' +
+            outputRange.length +
+            ' values provided) must have the same length');
+    }
+    const parsedOutputRange = outputRange.map((translateValue) => parseTranslate(translateValue));
+    const firstValueLength = (_a = parsedOutputRange[0]) === null || _a === void 0 ? void 0 : _a.length;
+    if (firstValueLength === undefined) {
+        throw new TypeError('outputRange must have at least 1 element');
+    }
+    for (const parsedTranslate of parsedOutputRange) {
+        if (parsedTranslate.length !== firstValueLength) {
+            throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${parsedTranslate.length}`);
+        }
+    }
+    return new Array(firstValueLength)
+        .fill(true)
+        .map((_, index) => {
+        const outputValues = [];
+        for (const translateValue of parsedOutputRange) {
+            const value = translateValue[index];
+            if (value === undefined) {
+                throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${translateValue.length}`);
+            }
+            outputValues.push(value);
+        }
+        const interpolatedValue = (0, interpolate_js_1.interpolate)(input, inputRange, outputValues, options);
+        return `${interpolatedValue}px`;
+    })
+        .join(' ');
+};
+exports.interpolateTranslate = interpolateTranslate;

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/media-resource-manager.d.ts

@@ -0,0 +1,25 @@
+export type MediaResourceLease<T> = {
+    resource: T;
+    getOrCreateValue: <Value>(key: string, create: () => Value) => Value;
+    release: () => void;
+};
+export type MediaResourceManager = {
+    acquire: <T>({ key, create }: {
+        key: string;
+        create: () => {
+            resource: T;
+            dispose: () => void;
+        };
+    }) => MediaResourceLease<T>;
+    invalidate: (key: string) => void;
+    dispose: () => void;
+};
+export declare const makeMediaResourceManager: () => MediaResourceManager;
+export declare const getMediabunnyInputResourceKey: ({ src, credentials, requestInitFingerprint, revision, }: {
+    src: string;
+    credentials: RequestCredentials | null;
+    requestInitFingerprint: unknown;
+    revision: string | null;
+}) => string;
+export declare const MEDIABUNNY_DURATION_VALUE_KEY = "mediabunny-duration";
+export declare const globalMediaResourceManager: MediaResourceManager;