@remotion/player 4.0.479 → 4.0.482

package/dist/cjs/MediaVolumeSlider.js

@@ -9,7 +9,7 @@ const render_volume_slider_js_1 = require("./render-volume-slider.js");
 const use_hover_state_js_1 = require("./use-hover-state.js");
 exports.VOLUME_SLIDER_WIDTH = 100;
 const MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
-    const [mediaMuted, setMediaMuted] = remotion_1.Internals.useMediaMutedState();
+    const [playerMuted, setPlayerMuted] = remotion_1.Internals.usePlayerMutedState();
     const [mediaVolume, setMediaVolume] = remotion_1.Internals.useMediaVolumeState();
     const [focused, setFocused] = (0, react_1.useState)(false);
     const parentDivRef = (0, react_1.useRef)(null);
@@ -28,11 +28,11 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, rend
     const onClick = (0, react_1.useCallback)(() => {
         if (isVolume0) {
             setMediaVolume(1);
-            setMediaMuted(false);
+            setPlayerMuted(false);
             return;
         }
-        setMediaMuted((mute) => !mute);
-    }, [isVolume0, setMediaMuted, setMediaVolume]);
+        setPlayerMuted((mute) => !mute);
+    }, [isVolume0, setPlayerMuted, setMediaVolume]);
     const parentDivStyle = (0, react_1.useMemo)(() => {
         return {
             display: 'inline-flex',
@@ -62,11 +62,11 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, rend
     }, [onBlur, onClick, volumeContainer]);
     const muteButton = (0, react_1.useMemo)(() => {
         return renderMuteButton
-            ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume })
-            : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
-    }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
+            ? renderMuteButton({ muted: playerMuted, volume: mediaVolume })
+            : renderDefaultMuteButton({ muted: playerMuted, volume: mediaVolume });
+    }, [playerMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
     const volumeSlider = (0, react_1.useMemo)(() => {
-        return (focused || hover) && !mediaMuted && !remotion_1.Internals.isIosSafari()
+        return (focused || hover) && !playerMuted && !remotion_1.Internals.isIosSafari()
             ? (renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : render_volume_slider_js_1.renderDefaultVolumeSlider)({
                 isVertical: displayVerticalVolumeSlider,
                 volume: mediaVolume,
@@ -79,7 +79,7 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, rend
         displayVerticalVolumeSlider,
         focused,
         hover,
-        mediaMuted,
+        playerMuted,
         mediaVolume,
         renderVolumeSlider,
         setMediaVolume,

package/dist/cjs/PlayerUI.js

@@ -74,11 +74,11 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     }, []);
     const player = (0, use_player_js_1.usePlayer)();
     const playerToggle = player.toggle;
-    const { mediaMuted, mediaVolume } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
+    const { playerMuted, mediaVolume } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     (0, react_1.useEffect)(() => {
         player.emitter.dispatchVolumeChange(mediaVolume);
     }, [player.emitter, mediaVolume]);
-    const isMuted = mediaMuted || mediaVolume === 0;
+    const isMuted = playerMuted || mediaVolume === 0;
     (0, react_1.useEffect)(() => {
         player.emitter.dispatchMuteChange({
             isMuted,
@@ -201,7 +201,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         }
         player.emitter.dispatchScaleChange(scale);
     }, [player.emitter, scale]);
-    const { setMediaVolume, setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
+    const { setMediaVolume, setPlayerMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         let timeout = null;
@@ -280,7 +280,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             requestFullscreen,
             exitFullscreen,
             getVolume: () => {
-                if (mediaMuted) {
+                if (playerMuted) {
                     return 0;
                 }
                 return mediaVolume;
@@ -299,10 +299,10 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             },
             isMuted: () => isMuted,
             mute: () => {
-                setMediaMuted(true);
+                setPlayerMuted(true);
             },
             unmute: () => {
-                setMediaMuted(false);
+                setPlayerMuted(false);
             },
             getScale: () => scale,
             pauseAndReturnToPlayStart: () => {
@@ -314,12 +314,12 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         durationInFrames,
         exitFullscreen,
         loop,
-        mediaMuted,
+        playerMuted,
         isMuted,
         mediaVolume,
         player,
         requestFullscreen,
-        setMediaMuted,
+        setPlayerMuted,
         setMediaVolume,
         toggle,
         scale,

package/dist/cjs/SharedPlayerContext.js

@@ -51,16 +51,17 @@ const SharedPlayerContexts = ({ children, timelineContext, playbackRateContext,
         fps,
         inputProps,
     ]);
-    const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => initiallyMuted);
+    const [playerMuted, setPlayerMuted] = (0, react_1.useState)(() => initiallyMuted);
     const [mediaVolume, setMediaVolume] = (0, react_1.useState)(() => persistVolumeToStorage
         ? (0, volume_persistence_js_1.getPreferredVolume)(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : null)
         : initialVolume);
     const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
-            mediaMuted,
+            playerMuted,
             mediaVolume,
         };
-    }, [mediaMuted, mediaVolume]);
+    }, [playerMuted, mediaVolume]);
+    const shouldCreateAudioContext = audioEnabled && !playerMuted && mediaVolume > 0;
     const setMediaVolumeAndPersist = (0, react_1.useCallback)((vol) => {
         setMediaVolume(vol);
         if (persistVolumeToStorage) {
@@ -69,7 +70,7 @@ const SharedPlayerContexts = ({ children, timelineContext, playbackRateContext,
     }, [persistVolumeToStorage, logLevel, volumePersistenceKey]);
     const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
-            setMediaMuted,
+            setPlayerMuted,
             setMediaVolume: setMediaVolumeAndPersist,
         };
     }, [setMediaVolumeAndPersist]);
@@ -88,6 +89,6 @@ const SharedPlayerContexts = ({ children, timelineContext, playbackRateContext,
             isReadOnlyStudio: false,
         };
     }, []);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.RemotionEnvironmentContext.Provider, { value: env, children: jsx_runtime_1.jsx(remotion_1.Internals.LogLevelContext.Provider, { value: logLevelContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteTimeContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PlaybackRateContext.Provider, { value: playbackRateContext, children: jsx_runtime_1.jsx(remotion_1.Internals.TimelineContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PrefetchProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.DurationsContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.BufferingProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, previewSampleRate: sampleRate, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Internals.RemotionEnvironmentContext.Provider, { value: env, children: jsx_runtime_1.jsx(remotion_1.Internals.LogLevelContext.Provider, { value: logLevelContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteTimeContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PlaybackRateContext.Provider, { value: playbackRateContext, children: jsx_runtime_1.jsx(remotion_1.Internals.TimelineContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx_runtime_1.jsx(remotion_1.Internals.PrefetchProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.DurationsContextProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx_runtime_1.jsx(remotion_1.Internals.BufferingProvider, { children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: shouldCreateAudioContext, previewSampleRate: sampleRate, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.SharedPlayerContexts = SharedPlayerContexts;

package/dist/esm/index.mjs

@@ -1603,7 +1603,7 @@ var renderDefaultVolumeSlider = (props) => {
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var VOLUME_SLIDER_WIDTH = 100;
 var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
-  const [mediaMuted, setMediaMuted] = Internals7.useMediaMutedState();
+  const [playerMuted, setPlayerMuted] = Internals7.usePlayerMutedState();
   const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
   const [focused, setFocused] = useState6(false);
   const parentDivRef = useRef5(null);
@@ -1620,11 +1620,11 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
   const onClick = useCallback4(() => {
     if (isVolume0) {
       setMediaVolume(1);
-      setMediaMuted(false);
+      setPlayerMuted(false);
       return;
     }
-    setMediaMuted((mute) => !mute);
-  }, [isVolume0, setMediaMuted, setMediaVolume]);
+    setPlayerMuted((mute) => !mute);
+  }, [isVolume0, setPlayerMuted, setMediaVolume]);
   const parentDivStyle = useMemo4(() => {
     return {
       display: "inline-flex",
@@ -1662,10 +1662,10 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     });
   }, [onBlur, onClick, volumeContainer]);
   const muteButton = useMemo4(() => {
-    return renderMuteButton ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
-  }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
+    return renderMuteButton ? renderMuteButton({ muted: playerMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: playerMuted, volume: mediaVolume });
+  }, [playerMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
   const volumeSlider = useMemo4(() => {
-    return (focused || hover) && !mediaMuted && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
+    return (focused || hover) && !playerMuted && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
       onBlur: () => setFocused(false),
@@ -1676,7 +1676,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     displayVerticalVolumeSlider,
     focused,
     hover,
-    mediaMuted,
+    playerMuted,
     mediaVolume,
     renderVolumeSlider,
     setMediaVolume
@@ -2596,11 +2596,11 @@ var PlayerUI = ({
   }, []);
   const player = usePlayer();
   const playerToggle = player.toggle;
-  const { mediaMuted, mediaVolume } = useContext5(Internals11.MediaVolumeContext);
+  const { playerMuted, mediaVolume } = useContext5(Internals11.MediaVolumeContext);
   useEffect12(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
-  const isMuted = mediaMuted || mediaVolume === 0;
+  const isMuted = playerMuted || mediaVolume === 0;
   useEffect12(() => {
     player.emitter.dispatchMuteChange({
       isMuted
@@ -2709,7 +2709,7 @@ var PlayerUI = ({
     }
     player.emitter.dispatchScaleChange(scale);
   }, [player.emitter, scale]);
-  const { setMediaVolume, setMediaMuted } = useContext5(Internals11.SetMediaVolumeContext);
+  const { setMediaVolume, setPlayerMuted } = useContext5(Internals11.SetMediaVolumeContext);
   const [showBufferIndicator, setShowBufferState] = useState11(false);
   useEffect12(() => {
     let timeout = null;
@@ -2783,7 +2783,7 @@ var PlayerUI = ({
       requestFullscreen,
       exitFullscreen,
       getVolume: () => {
-        if (mediaMuted) {
+        if (playerMuted) {
           return 0;
         }
         return mediaVolume;
@@ -2802,10 +2802,10 @@ var PlayerUI = ({
       },
       isMuted: () => isMuted,
       mute: () => {
-        setMediaMuted(true);
+        setPlayerMuted(true);
       },
       unmute: () => {
-        setMediaMuted(false);
+        setPlayerMuted(false);
       },
       getScale: () => scale,
       pauseAndReturnToPlayStart: () => {
@@ -2817,12 +2817,12 @@ var PlayerUI = ({
     durationInFrames,
     exitFullscreen,
     loop,
-    mediaMuted,
+    playerMuted,
     isMuted,
     mediaVolume,
     player,
     requestFullscreen,
-    setMediaMuted,
+    setPlayerMuted,
     setMediaVolume,
     toggle,
     scale
@@ -3111,14 +3111,15 @@ var SharedPlayerContexts = ({
     fps,
     inputProps
   ]);
-  const [mediaMuted, setMediaMuted] = useState12(() => initiallyMuted);
+  const [playerMuted, setPlayerMuted] = useState12(() => initiallyMuted);
   const [mediaVolume, setMediaVolume] = useState12(() => persistVolumeToStorage ? getPreferredVolume(volumePersistenceKey ?? null) : initialVolume);
   const mediaVolumeContextValue = useMemo13(() => {
     return {
-      mediaMuted,
+      playerMuted,
       mediaVolume
     };
-  }, [mediaMuted, mediaVolume]);
+  }, [playerMuted, mediaVolume]);
+  const shouldCreateAudioContext = audioEnabled && !playerMuted && mediaVolume > 0;
   const setMediaVolumeAndPersist = useCallback11((vol) => {
     setMediaVolume(vol);
     if (persistVolumeToStorage) {
@@ -3127,7 +3128,7 @@ var SharedPlayerContexts = ({
   }, [persistVolumeToStorage, logLevel, volumePersistenceKey]);
   const setMediaVolumeContextValue = useMemo13(() => {
     return {
-      setMediaMuted,
+      setPlayerMuted,
       setMediaVolume: setMediaVolumeAndPersist
     };
   }, [setMediaVolumeAndPersist]);
@@ -3168,7 +3169,7 @@ var SharedPlayerContexts = ({
                         children: /* @__PURE__ */ jsx13(Internals13.BufferingProvider, {
                           children: /* @__PURE__ */ jsx13(Internals13.SharedAudioContextProvider, {
                             audioLatencyHint,
-                            audioEnabled,
+                            audioEnabled: shouldCreateAudioContext,
                             previewSampleRate: sampleRate,
                             children: /* @__PURE__ */ jsx13(Internals13.SharedAudioTagsContextProvider, {
                               numberOfAudioTags: numberOfSharedAudioTags,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.479",
+	"version": "4.0.482",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.479"
+		"remotion": "4.0.482"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -49,7 +49,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.479",
+		"@remotion/eslint-config-internal": "4.0.482",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},