@remotion/player 4.0.453 → 4.0.455

package/dist/cjs/PlayerUI.js

@@ -74,6 +74,16 @@ 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);
+    (0, react_1.useEffect)(() => {
+        player.emitter.dispatchVolumeChange(mediaVolume);
+    }, [player.emitter, mediaVolume]);
+    const isMuted = mediaMuted || mediaVolume === 0;
+    (0, react_1.useEffect)(() => {
+        player.emitter.dispatchMuteChange({
+            isMuted,
+        });
+    }, [player.emitter, isMuted]);
     (0, use_playback_js_1.usePlayback)({
         loop,
         playbackRate,
@@ -82,6 +92,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         outFrame,
         getCurrentFrame: player.getCurrentFrame,
         browserMediaControlsBehavior,
+        muted: isMuted,
     });
     (0, react_1.useEffect)(() => {
         if (hasPausedToResume && !player.playing) {
@@ -191,16 +202,6 @@ 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 { mediaMuted, 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;
-    (0, react_1.useEffect)(() => {
-        player.emitter.dispatchMuteChange({
-            isMuted,
-        });
-    }, [player.emitter, isMuted]);
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         let timeout = null;

package/dist/cjs/index.d.ts

@@ -32,7 +32,7 @@ export declare const PlayerInternals: {
         isBuffering: () => boolean;
         toggle: (e?: PointerEvent | import("react").SyntheticEvent<Element, Event> | undefined) => void;
     };
-    usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }: {
+    usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, muted, }: {
         loop: boolean;
         playbackRate: number;
         moveToBeginningWhenEnded: boolean;
@@ -40,6 +40,7 @@ export declare const PlayerInternals: {
         outFrame: number | null;
         browserMediaControlsBehavior: import("./browser-mediasession.js").BrowserMediaControlsBehavior;
         getCurrentFrame: import("./use-frame-imperative.js").GetCurrentFrame;
+        muted: boolean;
     }) => void;
     useElementSize: (ref: import("react").RefObject<HTMLElement | null>, options: {
         triggerOnWindowResize: boolean;

package/dist/cjs/use-playback.d.ts

@@ -1,6 +1,6 @@
 import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
 import type { GetCurrentFrame } from './use-frame-imperative.js';
-export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }: {
+export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, muted, }: {
     loop: boolean;
     playbackRate: number;
     moveToBeginningWhenEnded: boolean;
@@ -8,4 +8,5 @@ export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnde
     outFrame: number | null;
     browserMediaControlsBehavior: BrowserMediaControlsBehavior;
     getCurrentFrame: GetCurrentFrame;
+    muted: boolean;
 }) => void;

package/dist/cjs/use-playback.js

@@ -10,7 +10,7 @@ const calculate_next_frame_js_1 = require("./calculate-next-frame.js");
 const is_backgrounded_js_1 = require("./is-backgrounded.js");
 const set_global_time_anchor_js_1 = require("./set-global-time-anchor.js");
 const use_player_js_1 = require("./use-player.js");
-const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }) => {
+const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, muted, }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const { playing, pause, emitter, isPlaying } = (0, use_player_js_1.usePlayer)();
@@ -152,7 +152,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                 });
                 return;
             }
-            if (context.buffering.current) {
+            if (context.buffering.current && !muted) {
                 (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
                 const stopListening = context.listenForResume(() => {
                     stopListening.remove();
@@ -205,6 +205,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         sharedAudioContext,
         timelineContext.playbackRate,
         logLevel,
+        muted,
     ]);
     (0, react_2.useEffect)(() => {
         const now = performance.now();

package/dist/esm/index.mjs

@@ -935,7 +935,8 @@ var usePlayback = ({
   inFrame,
   outFrame,
   browserMediaControlsBehavior,
-  getCurrentFrame
+  getCurrentFrame,
+  muted
 }) => {
   const config = Internals7.useUnsafeVideoConfig();
   const frame = Internals7.Timeline.useTimelinePosition();
@@ -1065,7 +1066,7 @@ var usePlayback = ({
         });
         return;
       }
-      if (context.buffering.current) {
+      if (context.buffering.current && !muted) {
         sharedAudioContext?.suspend?.();
         const stopListening = context.listenForResume(() => {
           stopListening.remove();
@@ -1114,7 +1115,8 @@ var usePlayback = ({
     isPlaying,
     sharedAudioContext,
     timelineContext.playbackRate,
-    logLevel
+    logLevel,
+    muted
   ]);
   useEffect5(() => {
     const now = performance.now();
@@ -2538,6 +2540,16 @@ var PlayerUI = ({
   }, []);
   const player = usePlayer();
   const playerToggle = player.toggle;
+  const { mediaMuted, mediaVolume } = useContext5(Internals12.MediaVolumeContext);
+  useEffect12(() => {
+    player.emitter.dispatchVolumeChange(mediaVolume);
+  }, [player.emitter, mediaVolume]);
+  const isMuted = mediaMuted || mediaVolume === 0;
+  useEffect12(() => {
+    player.emitter.dispatchMuteChange({
+      isMuted
+    });
+  }, [player.emitter, isMuted]);
   usePlayback({
     loop,
     playbackRate,
@@ -2545,7 +2557,8 @@ var PlayerUI = ({
     inFrame,
     outFrame,
     getCurrentFrame: player.getCurrentFrame,
-    browserMediaControlsBehavior
+    browserMediaControlsBehavior,
+    muted: isMuted
   });
   useEffect12(() => {
     if (hasPausedToResume && !player.playing) {
@@ -2641,16 +2654,6 @@ var PlayerUI = ({
     player.emitter.dispatchScaleChange(scale);
   }, [player.emitter, scale]);
   const { setMediaVolume, setMediaMuted } = useContext5(Internals12.SetMediaVolumeContext);
-  const { mediaMuted, mediaVolume } = useContext5(Internals12.MediaVolumeContext);
-  useEffect12(() => {
-    player.emitter.dispatchVolumeChange(mediaVolume);
-  }, [player.emitter, mediaVolume]);
-  const isMuted = mediaMuted || mediaVolume === 0;
-  useEffect12(() => {
-    player.emitter.dispatchMuteChange({
-      isMuted
-    });
-  }, [player.emitter, isMuted]);
   const [showBufferIndicator, setShowBufferState] = useState11(false);
   useEffect12(() => {
     let timeout = null;

package/package.json

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