remotion 4.0.513 → 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

@@ -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,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/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/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;

package/dist/cjs/use-media-in-timeline.js

@@ -20,7 +20,7 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, }) => {
+const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, muted, }) => {
     var _a;
     if (!src) {
         throw new Error('No src passed');
@@ -39,6 +39,13 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
         if (typeof volume === 'number') {
             return volume;
         }
+        if (typeof volume !== 'function') {
+            return (0, volume_prop_js_1.evaluateVolume)({
+                frame: 0,
+                volume,
+                mediaVolume,
+            });
+        }
         return new Array(Math.floor(Math.max(0, duration + mediaStartsAt)))
             .fill(true)
             .map((_, i) => {
@@ -68,6 +75,7 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
             startMediaFrom,
             src,
             playbackRate,
+            muted,
         };
     }, [
         volumes,
@@ -78,11 +86,12 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
         src,
         startMediaFrom,
         playbackRate,
+        muted,
     ]);
     return memoizedResult;
 };
 exports.useBasicMediaInTimeline = useBasicMediaInTimeline;
-const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, muted, }) => {
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
@@ -100,6 +109,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
         sequenceDurationInFrames: durationInFrames,
         mediaStartsAt,
         loop: false,
+        muted,
     });
     const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     (0, react_1.useEffect)(() => {
@@ -115,6 +125,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             return;
         }
         registerSequence({
+            effectRuntimeValues: null,
             type: mediaType,
             src,
             id,
@@ -125,6 +136,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             displayName: finalDisplayName,
             documentationLink,
             volume: volumes,
+            muted,
             showInTimeline: true,
             nonce: nonce.get(),
             startMediaFrom: 0 - startsAt,
@@ -167,6 +179,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
         finalDisplayName,
         isStudio,
         refForOutline,
+        muted,
     ]);
 };
 exports.useMediaInTimeline = useMediaInTimeline;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.513";
+export declare const VERSION = "4.0.514";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.513';
+exports.VERSION = '4.0.514';

package/dist/cjs/video/VideoForPreview.js

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