remotion 4.0.523 → 4.0.525

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.d.ts

@@ -49,6 +49,7 @@ export type AudioSyncAnchorEmitter = {
     };
 };
 type SharedAudioContextValue = {
+    sampleRate: number;
     audioContext: AudioContext | null;
     getAudioContextState: () => RemotionAudioContextState | null;
     gainNode: GainNode | null;

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;
@@ -91,12 +91,6 @@ const shouldSaveForLater = (state) => {
 const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, previewSampleRate, _experimentalKeepAudioContextAlive, }) => {
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const sampleRate = previewSampleRate !== null && previewSampleRate !== void 0 ? previewSampleRate : 48000;
-    (0, react_1.useEffect)(() => {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        window.remotion_sampleRate = sampleRate;
-    }, [sampleRate]);
     const ctxAndGain = (0, use_audio_context_js_1.useSingletonAudioContext)({
         logLevel,
         latencyHint: audioLatencyHint,
@@ -323,6 +317,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
     const audioContextValue = (0, react_1.useMemo)(() => {
         var _a, _b;
         return {
+            sampleRate,
             audioContext: (_a = ctxAndGain === null || ctxAndGain === void 0 ? void 0 : ctxAndGain.audioContext) !== null && _a !== void 0 ? _a : null,
             getAudioContextState: () => {
                 var _a;
@@ -340,6 +335,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
             _experimentalKeepAudioContextAlive,
         };
     }, [
+        sampleRate,
         ctxAndGain,
         audioSyncAnchor,
         audioSyncAnchorEmitter,

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/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/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;
@@ -816,6 +822,7 @@ export declare const Internals: {
     readonly SetMediaVolumeContext: import("react").Context<SetMediaVolumeContextValue>;
     readonly getRemotionEnvironment: () => RemotionEnvironment;
     readonly SharedAudioContext: import("react").Context<{
+        sampleRate: number;
         audioContext: AudioContext | null;
         getAudioContextState: () => RemotionAudioContextState | null;
         gainNode: GainNode | null;

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,
 };

package/dist/cjs/timeline-position-state.d.ts

@@ -11,6 +11,7 @@ export declare const clampFrameToCompositionRange: (frame: number, durationInFra
 export declare const useTimelineContext: () => TimelineContextValue;
 export declare const usePlaybackRate: () => PlaybackRateContextValue;
 export declare const useTimelinePosition: () => number;
+export declare const useIsInsideFreeze: () => boolean;
 export declare const useAbsoluteTimelinePosition: () => number;
 export declare const useTimelineSetFrame: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
 export { usePlaying } from './use-playing.js';

package/dist/cjs/timeline-position-state.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBuffering = exports.usePlaying = exports.useTimelineSetFrame = exports.useAbsoluteTimelinePosition = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.clampFrameToCompositionRange = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
+exports.useBuffering = exports.usePlaying = exports.useTimelineSetFrame = exports.useAbsoluteTimelinePosition = exports.useIsInsideFreeze = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.clampFrameToCompositionRange = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
 const react_1 = require("react");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -69,6 +69,10 @@ const useTimelinePosition = () => {
     return useTimelinePositionFromContext(state);
 };
 exports.useTimelinePosition = useTimelinePosition;
+const useIsInsideFreeze = () => {
+    return (0, exports.useTimelineContext)().isInsideFreeze;
+};
+exports.useIsInsideFreeze = useIsInsideFreeze;
 const useAbsoluteTimelinePosition = () => {
     const state = (0, react_1.useContext)(TimelineContext_js_1.AbsoluteTimeContext);
     if (state === null) {

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.523";
+export declare const VERSION = "4.0.525";

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.523';
+exports.VERSION = '4.0.525';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.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 cancel_render_js_1 = require("../cancel-render.js");
 const default_css_js_1 = require("../default-css.js");
 const Img_js_1 = require("../Img.js");
@@ -15,6 +16,7 @@ const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const truthy_js_1 = require("../truthy.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 use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const volume_safeguard_js_1 = require("../volume-safeguard.js");
@@ -42,27 +44,27 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
     ]);
-    if (!videoConfig) {
-        throw new Error('No video config found');
-    }
     const volume = (0, volume_prop_js_1.evaluateVolume)({
         volume: volumeProp,
         frame: volumePropsFrame,
         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,
+        volume,
+        audioEnabled,
+    });
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
     (0, react_1.useEffect)(() => {
         var _a;
         if (!src) {
             throw new Error('No src passed');
         }
-        if (!window.remotion_audioEnabled) {
-            return;
-        }
-        if (muted) {
-            return;
-        }
-        if (volume <= 0) {
+        if (!shouldUseAudio) {
             return;
         }
         registerRenderAsset({
@@ -79,7 +81,7 @@ crossOrigin, audioStreamIndex, preservePitch: _preservePitch, ...props }) => {
         });
         return () => unregisterRenderAsset(id);
     }, [
-        muted,
+        shouldUseAudio,
         src,
         registerRenderAsset,
         id,

package/dist/cjs/video/VideoForPreview.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const shared_audio_tags_js_1 = require("../audio/shared-audio-tags.js");
 const shared_element_source_node_js_1 = require("../audio/shared-element-source-node.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 get_cross_origin_value_js_1 = require("../get-cross-origin-value.js");
 const log_level_context_js_1 = require("../log-level-context.js");
 const playback_logging_js_1 = require("../playback-logging.js");
@@ -111,12 +112,16 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
     const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
-    const [playerMuted] = (0, volume_position_state_js_1.usePlayerMutedState)();
     const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
         frame: volumePropFrame,
         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 getStack = (0, react_1.useCallback)(() => {
         return _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null;
@@ -138,7 +143,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,
+        muted: isMutedForTimeline,
     });
     // putting playback before useVolume
     // because volume looks at playbackrate
@@ -284,7 +289,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         requestsVideoFrame: Boolean(onVideoFrame),
         isClientSideRendering: false,
     });
-    const video = (jsx_runtime_1.jsx("video", { ...nativeProps, ref: videoRef, muted: muted || playerMuted || userPreferredVolume <= 0, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, controls: false }));
+    const video = (jsx_runtime_1.jsx("video", { ...nativeProps, ref: videoRef, muted: isMutedForPlayback, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, controls: false }));
     return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: timelineId, children: video })) : (video);
 };
 exports.VideoForPreview = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);

package/dist/cjs/video/VideoForRendering.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.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 is_approximately_the_same_js_1 = require("../is-approximately-the-same.js");
 const log_level_context_js_1 = require("../log-level-context.js");
 const random_js_1 = require("../random.js");
@@ -13,6 +14,7 @@ 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 use_remotion_environment_js_1 = require("../use-remotion-environment.js");
 const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
@@ -22,6 +24,7 @@ const get_current_time_js_1 = require("./get-current-time.js");
 const MediaPlaybackError_js_1 = require("./MediaPlaybackError.js");
 const seek_until_right_js_1 = require("./seek-until-right.js");
 const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, audioStreamIndex, onVideoFrame, preservePitch: _preservePitch, ...props }, ref) => {
+    var _a;
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
@@ -45,27 +48,27 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
     ]);
-    if (!videoConfig) {
-        throw new Error('No video config found');
-    }
     const volume = (0, volume_prop_js_1.evaluateVolume)({
         volume: volumeProp,
         frame: volumePropsFrame,
         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,
+    });
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
     (0, react_1.useEffect)(() => {
         var _a;
         if (!props.src) {
             throw new Error('No src passed');
         }
-        if (props.muted) {
-            return;
-        }
-        if (volume <= 0) {
-            return;
-        }
-        if (!window.remotion_audioEnabled) {
+        if (!shouldUseAudio) {
             return;
         }
         registerRenderAsset({
@@ -82,7 +85,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         });
         return () => unregisterRenderAsset(id);
     }, [
-        props.muted,
+        shouldUseAudio,
         props.src,
         registerRenderAsset,
         id,