remotion 4.0.524 → 4.0.526

package/dist/cjs/AbsoluteFill.d.ts

@@ -74,7 +74,6 @@ export declare const absoluteFillSchema: {
         readonly type: "font-weight";
         readonly default: 400;
         readonly description: "Font weight";
-        readonly keyframable: false;
     };
     readonly 'style.fontStyle': {
         readonly type: "enum";

package/dist/cjs/Img.d.ts

@@ -8,6 +8,7 @@ export type ImgProps = NativeImgProps & {
     readonly delayRenderRetries?: number;
     readonly delayRenderTimeoutInMilliseconds?: number;
     readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
+    readonly onImageError?: (error: Error) => void;
     readonly src: string;
     readonly effects?: EffectsProp;
     readonly showInTimeline?: boolean;
@@ -225,6 +226,7 @@ export declare const Img: React.ComponentType<NativeImgProps & {
     readonly delayRenderRetries?: number | undefined;
     readonly delayRenderTimeoutInMilliseconds?: number | undefined;
     readonly onImageFrame?: ((imageElement: HTMLImageElement) => void) | undefined;
+    readonly onImageError?: ((error: Error) => void) | undefined;
     readonly src: string;
     readonly effects?: EffectsProp | undefined;
     readonly showInTimeline?: boolean | undefined;

package/dist/cjs/Img.js

@@ -22,7 +22,7 @@ const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js")
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, refForOutline, ...props }) => {
+const ImgContent = ({ onError, onImageError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, refForOutline, ...props }) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -67,34 +67,36 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
     const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
     const didGetError = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _j, _k, _l, _m;
         if (!errors.current) {
             return;
         }
         errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src] =
-            ((_h = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _h !== void 0 ? _h : 0) + 1;
-        if (onError &&
-            ((_j = errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src]) !== null && _j !== void 0 ? _j : 0) > maxRetries) {
-            onError(e);
+            ((_j = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _j !== void 0 ? _j : 0) + 1;
+        if ((onError || onImageError) &&
+            ((_k = errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src]) !== null && _k !== void 0 ? _k : 0) > maxRetries) {
+            onError === null || onError === void 0 ? void 0 : onError(e);
+            onImageError === null || onImageError === void 0 ? void 0 : onImageError(new Error('Error loading image with src: ' +
+                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src)));
             return;
         }
-        if (((_k = errors.current[(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src]) !== null && _k !== void 0 ? _k : 0) <= maxRetries) {
-            const backoff = exponentialBackoff((_l = errors.current[(_e = imageRef.current) === null || _e === void 0 ? void 0 : _e.src]) !== null && _l !== void 0 ? _l : 0);
+        if (((_l = errors.current[(_e = imageRef.current) === null || _e === void 0 ? void 0 : _e.src]) !== null && _l !== void 0 ? _l : 0) <= maxRetries) {
+            const backoff = exponentialBackoff((_m = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _m !== void 0 ? _m : 0);
             // eslint-disable-next-line no-console
-            console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src)}, retrying again in ${backoff}ms`);
+            console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_g = imageRef.current) === null || _g === void 0 ? void 0 : _g.src)}, retrying again in ${backoff}ms`);
             retryIn(backoff);
             return;
         }
         try {
             cancelRender('Error loading image with src: ' +
-                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_g = imageRef.current) === null || _g === void 0 ? void 0 : _g.src));
+                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src));
         }
-        catch (_m) {
+        catch (_o) {
             // cancelRender() intentionally throws after storing the error in scope.
             // In async image callbacks, we rely on the stored error for renderer propagation.
         }
-    }, [cancelRender, maxRetries, onError, retryIn]);
+    }, [cancelRender, maxRetries, onError, onImageError, retryIn]);
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -200,6 +202,10 @@ const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, d
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
+    const isMedia = (0, react_1.useMemo)(() => ({
+        type: 'image',
+        src,
+    }), [src]);
     const { effectivePostmountFor, effectivePremountFor, freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
         from: from !== null && from !== void 0 ? from : 0,
         durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
@@ -218,7 +224,7 @@ const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, d
         style: premountingStyle,
         componentName: '<Img />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -239,7 +245,6 @@ exports.imgSchema = {
 };
 const imgCanvasFallbackIncompatibleProps = new Set([
     'alt',
-    'crossOrigin',
     'decoding',
     'fetchPriority',
     'loading',
@@ -276,12 +281,12 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, cropLeft, cropRight, cropTop, cropBottom, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, cropLeft, cropRight, cropTop, cropBottom, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageError, ...props }) => {
     var _a;
     const refForOutline = (0, react_1.useRef)(null);
     const shouldPauseWhenLoading = (0, v5_flag_js_1.resolveV5Default)(pauseWhenLoading);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, onImageError: onImageError, outlineRef: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -296,7 +301,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, outlineRef: refForOutline, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, onError: onImageError, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, outlineRef: refForOutline, ...canvasProps }));
 };
 /*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.

package/dist/cjs/Interactive.d.ts

@@ -126,7 +126,6 @@ export declare const Interactive: {
             readonly type: "font-weight";
             readonly default: 400;
             readonly description: "Font weight";
-            readonly keyframable: false;
         };
         readonly 'style.fontStyle': {
             readonly type: "enum";

package/dist/cjs/TimelineContext.d.ts

@@ -4,6 +4,7 @@ import { type PlayableMediaTag } from './timeline-position-state';
 export type TimelineContextValue = {
     frame: Record<string, number>;
     isPlaying: () => boolean;
+    isInsideFreeze: boolean;
     audioAndVideoTags: RefObject<PlayableMediaTag[]>;
 };
 export type PlaybackRateContextValue = {

package/dist/cjs/TimelineContext.js

@@ -70,6 +70,7 @@ const TimelineContextProvider = ({ children, frameState }) => {
         return {
             frame,
             isPlaying: readIsPlaying,
+            isInsideFreeze: false,
             audioAndVideoTags,
         };
     }, [frame, readIsPlaying]);

package/dist/cjs/absolute-src.js

@@ -13,6 +13,6 @@ const getAbsoluteSrc = (relativeSrc) => {
         relativeSrc.startsWith('data:')) {
         return relativeSrc;
     }
-    return new URL(relativeSrc, window.origin).href;
+    return new URL(relativeSrc, document.baseURI).href;
 };
 exports.getAbsoluteSrc = getAbsoluteSrc;

package/dist/cjs/animated-image/resolve-image-source.js

@@ -5,6 +5,6 @@ const resolveAnimatedImageSource = (src) => {
     if (typeof window === 'undefined') {
         return src;
     }
-    return new URL(src, window.origin).href;
+    return new URL(src, document.baseURI).href;
 };
 exports.resolveAnimatedImageSource = resolveAnimatedImageSource;

package/dist/cjs/audio/AudioForPreview.js

@@ -53,6 +53,7 @@ const volume_prop_js_1 = require("../volume-prop.js");
 const volume_safeguard_js_1 = require("../volume-safeguard.js");
 const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
+const use_media_audio_state_js_1 = require("./use-media-audio-state.js");
 const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     var _a, _b, _c;
     const [initialShouldPreMountAudioElements] = (0, react_2.useState)(props.shouldPreMountAudioTags);
@@ -68,7 +69,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         throw new Error('typecheck error');
     }
     const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
-    const [playerMuted] = (0, volume_position_state_js_1.usePlayerMutedState)();
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     if (!src) {
         throw new TypeError("No 'src' was passed to <Html5Audio>.");
@@ -82,6 +82,11 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         volume,
         mediaVolume,
     });
+    const { isMutedForTimeline, isMutedForPlayback } = (0, use_media_audio_state_js_1.useMediaAudioState)({
+        muted: muted !== null && muted !== void 0 ? muted : false,
+        volume: userPreferredVolume,
+        audioEnabled: true,
+    });
     (0, volume_safeguard_js_1.warnAboutTooHighVolume)(userPreferredVolume);
     const crossOriginValue = (0, get_cross_origin_value_js_1.getCrossOriginValue)({
         crossOrigin,
@@ -90,7 +95,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     });
     const propsToPass = (0, react_2.useMemo)(() => {
         return {
-            muted: muted || playerMuted || userPreferredVolume <= 0,
+            muted: isMutedForPlayback,
             src: preloadedSrc,
             loop: _remotionInternalNativeLoopPassed,
             crossOrigin: crossOriginValue,
@@ -98,11 +103,9 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         };
     }, [
         _remotionInternalNativeLoopPassed,
-        playerMuted,
-        muted,
+        isMutedForPlayback,
         nativeProps,
         preloadedSrc,
-        userPreferredVolume,
         crossOriginValue,
     ]);
     // Generate a string that's as unique as possible for this asset
@@ -139,7 +142,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,
+        muted: isMutedForTimeline,
     });
     // putting playback before useVolume
     // because volume looks at playbackrate

package/dist/cjs/audio/AudioForRendering.js

@@ -10,10 +10,13 @@ const SequenceContext_js_1 = require("../SequenceContext.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
+const use_media_enabled_js_1 = require("../use-media-enabled.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const volume_safeguard_js_1 = require("../volume-safeguard.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
+const use_media_audio_state_js_1 = require("./use-media-audio-state.js");
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
+    var _a;
     const audioRef = (0, react_1.useRef)(null);
     const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onNativeError, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, pauseWhenBuffering, audioStreamIndex, preservePitch: _preservePitch, ...nativeProps } = props;
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
@@ -39,6 +42,12 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         mediaVolume: 1,
     });
     (0, volume_safeguard_js_1.warnAboutTooHighVolume)(volume);
+    const audioEnabled = (0, use_media_enabled_js_1.useAudioEnabled)();
+    const { shouldUseAudio } = (0, use_media_audio_state_js_1.useMediaAudioState)({
+        muted: (_a = props.muted) !== null && _a !== void 0 ? _a : false,
+        volume,
+        audioEnabled,
+    });
     (0, react_1.useImperativeHandle)(ref, () => {
         return audioRef.current;
     }, []);
@@ -47,13 +56,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         if (!props.src) {
             throw new Error('No src passed');
         }
-        if (!window.remotion_audioEnabled) {
-            return;
-        }
-        if (props.muted) {
-            return;
-        }
-        if (volume <= 0) {
+        if (!shouldUseAudio) {
             return;
         }
         registerRenderAsset({
@@ -70,7 +73,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         });
         return () => unregisterRenderAsset(id);
     }, [
-        props.muted,
+        shouldUseAudio,
         props.src,
         registerRenderAsset,
         absoluteFrame,

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

@@ -67,8 +67,8 @@ const didPropChange = (key, newProp, prevProp) => {
     if (key === 'src' &&
         !prevProp.startsWith('data:') &&
         !newProp.startsWith('data:')) {
-        return (new URL(prevProp, window.origin).toString() !==
-            new URL(newProp, window.origin).toString());
+        return (new URL(prevProp, document.baseURI).toString() !==
+            new URL(newProp, document.baseURI).toString());
     }
     if (prevProp === newProp) {
         return false;

package/dist/cjs/audio/use-media-audio-state.d.ts

@@ -0,0 +1,17 @@
+export type MediaAudioState = {
+    readonly isMutedForTimeline: boolean;
+    readonly isMutedForPlayback: boolean;
+    readonly shouldUseAudio: boolean;
+};
+export declare const resolveMediaAudioState: ({ muted, playerMuted, volume, isInsideFreeze, audioEnabled, }: {
+    readonly muted: boolean;
+    readonly playerMuted: boolean;
+    readonly volume: number | null;
+    readonly isInsideFreeze: boolean;
+    readonly audioEnabled: boolean;
+}) => MediaAudioState;
+export declare const useMediaAudioState: ({ muted, volume, audioEnabled, }: {
+    readonly muted: boolean;
+    readonly volume: number | null;
+    readonly audioEnabled: boolean;
+}) => MediaAudioState;

package/dist/cjs/audio/use-media-audio-state.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaAudioState = exports.resolveMediaAudioState = void 0;
+const timeline_position_state_js_1 = require("../timeline-position-state.js");
+const volume_position_state_js_1 = require("../volume-position-state.js");
+const resolveMediaAudioState = ({ muted, playerMuted, volume, isInsideFreeze, audioEnabled, }) => {
+    const isMutedForTimeline = muted || isInsideFreeze;
+    const isMutedForPlayback = isMutedForTimeline || playerMuted || (volume !== null && volume <= 0);
+    return {
+        isMutedForTimeline,
+        isMutedForPlayback,
+        shouldUseAudio: audioEnabled && !isMutedForPlayback,
+    };
+};
+exports.resolveMediaAudioState = resolveMediaAudioState;
+const useMediaAudioState = ({ muted, volume, audioEnabled, }) => {
+    const [playerMuted] = (0, volume_position_state_js_1.usePlayerMutedState)();
+    const isInsideFreeze = (0, timeline_position_state_js_1.useIsInsideFreeze)();
+    return (0, exports.resolveMediaAudioState)({
+        muted,
+        playerMuted,
+        volume,
+        isInsideFreeze,
+        audioEnabled,
+    });
+};
+exports.useMediaAudioState = useMediaAudioState;

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -219,6 +219,7 @@ export declare const canvasImageSchema: {
 };
 export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & CanvasImageCanvasProps & {
     readonly src: string;
+    readonly crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     readonly width?: number | undefined;
     readonly height?: number | undefined;
     readonly fit?: import("../calculate-image-fit.js").ImageFit | undefined;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -53,7 +53,7 @@ const makeAbortError = () => {
     error.name = 'AbortError';
     return error;
 };
-const loadImage = ({ src, signal, }) => {
+const loadImage = ({ src, signal, crossOrigin, }) => {
     return new Promise((resolve, reject) => {
         const image = new Image();
         let settled = false;
@@ -94,7 +94,7 @@ const loadImage = ({ src, signal, }) => {
             onAbort();
             return;
         }
-        image.crossOrigin = 'anonymous';
+        image.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : 'anonymous';
         image.src = src;
     });
 };
@@ -109,7 +109,7 @@ const waitForNextFrame = ({ onFrame, }) => {
     const frame = requestAnimationFrame(onFrame);
     return () => cancelAnimationFrame(frame);
 };
-const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, refForOutline, ...canvasProps }, ref) => {
+const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, refForOutline, ...canvasProps }, ref) => {
     var _a;
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -187,7 +187,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
             continued: false,
         };
         const attemptLoad = () => {
-            loadImage({ src: actualSrc, signal: controller.signal })
+            loadImage({ src: actualSrc, signal: controller.signal, crossOrigin })
                 .then((image) => {
                 if (cancelled) {
                     return;
@@ -232,6 +232,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         actualSrc,
         cancelRender,
         continuePendingLoadDelay,
+        crossOrigin,
         delayRender,
         delayRenderRetries,
         delayRenderTimeoutInMilliseconds,
@@ -329,10 +330,14 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     return (jsx_runtime_1.jsx("canvas", { ...canvasProps, ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
 });
 CanvasImageContent.displayName = 'CanvasImageContent';
-const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, outlineRef, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, outlineRef, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
+    const isMedia = (0, react_1.useMemo)(() => ({
+        type: 'image',
+        src,
+    }), [src]);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => {
@@ -356,7 +361,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
         style: premountingStyle,
         componentName: _remotionInternalCropComponentName !== null && _remotionInternalCropComponentName !== void 0 ? _remotionInternalCropComponentName : '<CanvasImage />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, crossOrigin: crossOrigin, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.

package/dist/cjs/canvas-image/props.d.ts

@@ -6,6 +6,7 @@ type CanvasImageSequenceProps = InteractiveBaseProps & InteractiveCropProps & In
 export type CanvasImageCanvasProps = Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'children' | 'height' | 'onError' | 'width'>;
 export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps & {
     readonly src: string;
+    readonly crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
     readonly width?: number;
     readonly height?: number;
     readonly fit?: ImageFit;

package/dist/cjs/delay-render.js

@@ -30,7 +30,7 @@ const delayRenderInternal = ({ scope, environment, label, options, }) => {
     scope.remotion_delayRenderHandles.push(handle);
     const called = (_b = (_a = Error().stack) === null || _a === void 0 ? void 0 : _a.replace(/^Error/g, '')) !== null && _b !== void 0 ? _b : '';
     if (environment.isRendering) {
-        const timeoutToUse = ((_d = (_c = options === null || options === void 0 ? void 0 : options.timeoutInMilliseconds) !== null && _c !== void 0 ? _c : scope.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout) - 2000;
+        const timeoutToUse = Math.max(0, ((_d = (_c = options === null || options === void 0 ? void 0 : options.timeoutInMilliseconds) !== null && _c !== void 0 ? _c : scope.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout) - 2000);
         const retriesLeft = ((_e = options === null || options === void 0 ? void 0 : options.retries) !== null && _e !== void 0 ? _e : 0) - (scope.remotion_attempt - 1);
         scope.remotion_delayRenderTimeouts[handle] = {
             label: label !== null && label !== void 0 ? label : null,

package/dist/cjs/font-face-registry.d.ts

@@ -0,0 +1,19 @@
+export type RegisteredFontFace = {
+    ascentOverride: string | null;
+    descentOverride: string | null;
+    display: 'auto' | 'block' | 'fallback' | 'optional' | 'swap' | null;
+    featureSettings: string | null;
+    fontFamily: string;
+    fontData: ArrayBuffer;
+    fontUrl: string;
+    format: 'woff2' | 'woff' | 'opentype' | 'truetype';
+    lineGapOverride: string | null;
+    style: string | null;
+    weight: string | null;
+    stretch: string | null;
+    unicodeRange: string | null;
+    variant: string | null;
+};
+export declare const fetchFontData: (fontUrl: string) => Promise<ArrayBuffer>;
+export declare const registerFontFace: (fontFace: RegisteredFontFace) => void;
+export declare const getRegisteredFontFaces: () => RegisteredFontFace[];

package/dist/cjs/font-face-registry.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRegisteredFontFaces = exports.registerFontFace = exports.fetchFontData = void 0;
+const registeredFontFaces = [];
+const fontDataByUrl = new Map();
+const fetchFontData = (fontUrl) => {
+    const cached = fontDataByUrl.get(fontUrl);
+    if (cached) {
+        return cached;
+    }
+    const promise = fetch(fontUrl)
+        .then((response) => {
+        if (!response.ok) {
+            throw new Error(`Failed to load font ${JSON.stringify(fontUrl)}: ${response.status} ${response.statusText}`);
+        }
+        return response.arrayBuffer();
+    })
+        .catch((error) => {
+        fontDataByUrl.delete(fontUrl);
+        throw error;
+    });
+    fontDataByUrl.set(fontUrl, promise);
+    return promise;
+};
+exports.fetchFontData = fetchFontData;
+const registerFontFace = (fontFace) => {
+    if (registeredFontFaces.some((registered) => registered.ascentOverride === fontFace.ascentOverride &&
+        registered.descentOverride === fontFace.descentOverride &&
+        registered.display === fontFace.display &&
+        registered.featureSettings === fontFace.featureSettings &&
+        registered.fontFamily === fontFace.fontFamily &&
+        registered.fontUrl === fontFace.fontUrl &&
+        registered.format === fontFace.format &&
+        registered.lineGapOverride === fontFace.lineGapOverride &&
+        registered.style === fontFace.style &&
+        registered.weight === fontFace.weight &&
+        registered.stretch === fontFace.stretch &&
+        registered.unicodeRange === fontFace.unicodeRange &&
+        registered.variant === fontFace.variant)) {
+        return;
+    }
+    registeredFontFaces.push(fontFace);
+};
+exports.registerFontFace = registerFontFace;
+const getRegisteredFontFaces = () => {
+    return registeredFontFaces.slice();
+};
+exports.getRegisteredFontFaces = getRegisteredFontFaces;

package/dist/cjs/freeze.js

@@ -46,6 +46,7 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
         return {
             ...timelineContext,
             isPlaying: () => false,
+            isInsideFreeze: true,
             frame: {
                 [videoConfig.id]: frameToFreeze + relativeFrom,
             },

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

@@ -101,7 +101,7 @@ export type FontWeightFieldSchema = {
     type: 'font-weight';
     default: number | string | undefined;
     description?: string;
-    keyframable?: false;
+    keyframable?: boolean;
 };
 export type AssetFieldSchema = {
     type: 'asset';
@@ -265,7 +265,6 @@ export declare const textSchema: {
         readonly type: "font-weight";
         readonly default: 400;
         readonly description: "Font weight";
-        readonly keyframable: false;
     };
     readonly 'style.fontStyle': {
         readonly type: "enum";

package/dist/cjs/interactivity-schema.js

@@ -79,7 +79,6 @@ exports.textSchema = {
         type: 'font-weight',
         default: 400,
         description: 'Font weight',
-        keyframable: false,
     },
     'style.fontStyle': {
         type: 'enum',

package/dist/cjs/internals.d.ts

@@ -42,6 +42,12 @@ export declare const Internals: {
     readonly useFrameForVolumeProp: (behavior: import("./index.js").LoopVolumeCurveBehavior) => number;
     readonly useTimelinePosition: () => number;
     readonly useAbsoluteTimelinePosition: () => number;
+    readonly useIsInsideFreeze: () => boolean;
+    readonly useMediaAudioState: ({ muted, volume, audioEnabled, }: {
+        readonly muted: boolean;
+        readonly volume: number | null;
+        readonly audioEnabled: boolean;
+    }) => import("./audio/use-media-audio-state.js").MediaAudioState;
     readonly evaluateVolume: ({ frame, volume, mediaVolume, }: {
         frame: number;
         volume: import("./volume-prop.js").VolumeProp | undefined;
@@ -648,7 +654,6 @@ export declare const Internals: {
             readonly type: "font-weight";
             readonly default: 400;
             readonly description: "Font weight";
-            readonly keyframable: false;
         };
         readonly 'style.fontStyle': {
             readonly type: "enum";

package/dist/cjs/internals.js

@@ -41,6 +41,7 @@ const get_duration_in_seconds_js_1 = require("./animated-image/get-duration-in-s
 const AudioForPreview_js_1 = require("./audio/AudioForPreview.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
+const use_media_audio_state_js_1 = require("./audio/use-media-audio-state.js");
 const buffering_js_1 = require("./buffering.js");
 const calculate_media_duration_js_1 = require("./calculate-media-duration.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
@@ -143,6 +144,8 @@ exports.Internals = {
     useFrameForVolumeProp: use_audio_frame_js_1.useFrameForVolumeProp,
     useTimelinePosition: TimelinePosition.useTimelinePosition,
     useAbsoluteTimelinePosition: TimelinePosition.useAbsoluteTimelinePosition,
+    useIsInsideFreeze: TimelinePosition.useIsInsideFreeze,
+    useMediaAudioState: use_media_audio_state_js_1.useMediaAudioState,
     evaluateVolume: volume_prop_js_1.evaluateVolume,
     getAbsoluteSrc: absolute_src_js_1.getAbsoluteSrc,
     getAnimatedImageDurationInSeconds: get_duration_in_seconds_js_1.getAnimatedImageDurationInSeconds,

package/dist/cjs/no-react.d.ts

@@ -273,4 +273,7 @@ export declare const NoReactInternals: {
     };
     parseScaleValue: (value: unknown) => import("./scale-value").ScaleValue;
     serializeScaleValue: ([x, y, z]: import("./scale-value").ScaleValue) => string | number;
+    getRegisteredFontFaces: () => import("./font-face-registry").RegisteredFontFace[];
+    registerFontFace: (fontFace: import("./font-face-registry").RegisteredFontFace) => void;
+    fetchFontData: (fontUrl: string) => Promise<ArrayBuffer>;
 };

package/dist/cjs/no-react.js

@@ -9,6 +9,7 @@ const random_js_1 = require("./random.js");
 Object.defineProperty(exports, "random", { enumerable: true, get: function () { return random_js_1.random; } });
 const delay_render_constants_1 = require("./delay-render-constants");
 const find_props_to_delete_1 = require("./find-props-to-delete");
+const font_face_registry_1 = require("./font-face-registry");
 const input_props_serialization_1 = require("./input-props-serialization");
 const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const interactivity_schema_1 = require("./interactivity-schema");
@@ -56,4 +57,7 @@ exports.NoReactInternals = {
     sequenceSchema: interactivity_schema_1.sequenceSchema,
     parseScaleValue: scale_value_1.parseScaleValue,
     serializeScaleValue: scale_value_1.serializeScaleValue,
+    getRegisteredFontFaces: font_face_registry_1.getRegisteredFontFaces,
+    registerFontFace: font_face_registry_1.registerFontFace,
+    fetchFontData: font_face_registry_1.fetchFontData,
 };