@remotion/player 4.0.456 → 4.0.458

package/dist/cjs/PlaybackrateControl.js

@@ -61,7 +61,7 @@ const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate
             jsx_runtime_1.jsx("div", { style: checkmarkContainer, children: rate === selectedRate ? jsx_runtime_1.jsx(exports.Checkmark, {}) : null }), formatPlaybackRate(rate), "x"] }, rate));
 };
 const PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-    const { setPlaybackRate, playbackRate } = remotion_1.Internals.useTimelineContext();
+    const { setPlaybackRate, playbackRate } = remotion_1.Internals.usePlaybackRate();
     const [keyboardSelectedRate, setKeyboardSelectedRate] = (0, react_1.useState)(playbackRate);
     (0, react_1.useEffect)(() => {
         const listener = (e) => {
@@ -159,7 +159,7 @@ const button = {
 };
 const PlaybackrateControl = ({ playbackRates, canvasSize }) => {
     const { ref, isComponentVisible, setIsComponentVisible } = (0, use_component_visible_js_1.default)(false);
-    const { playbackRate } = remotion_1.Internals.useTimelineContext();
+    const { playbackRate } = remotion_1.Internals.usePlaybackRate();
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         e.preventDefault();

package/dist/cjs/Player.js

@@ -138,14 +138,16 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             frame,
             playing,
             rootId,
-            playbackRate: currentPlaybackRate,
             imperativePlaying,
-            setPlaybackRate: (rate) => {
-                setCurrentPlaybackRate(rate);
-            },
             audioAndVideoTags,
         };
-    }, [frame, currentPlaybackRate, playing, rootId]);
+    }, [frame, playing, rootId]);
+    const playbackRateContextValue = (0, react_1.useMemo)(() => {
+        return {
+            playbackRate: currentPlaybackRate,
+            setPlaybackRate: setCurrentPlaybackRate,
+        };
+    }, [currentPlaybackRate]);
     const setTimelineContextValue = (0, react_1.useMemo)(() => {
         return {
             setFrame,
@@ -165,7 +167,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
             mode: 'prevent-media-session',
         });
     }, [passedBrowserMediaControlsBehavior]);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, audioLatencyHint: audioLatencyHint, volumePersistenceKey: volumePersistenceKey, initialVolume: initialVolume, inputProps: actualInputProps, audioEnabled: true, children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx_runtime_1.jsx(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: jsx_runtime_1.jsx(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
+    return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, playbackRateContext: playbackRateContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, logLevel: logLevel, audioLatencyHint: audioLatencyHint, volumePersistenceKey: volumePersistenceKey, initialVolume: initialVolume, inputProps: actualInputProps, audioEnabled: true, children: jsx_runtime_1.jsx(remotion_1.Internals.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx_runtime_1.jsx(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: jsx_runtime_1.jsx(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
                             : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), showPosterWhenBufferingAndPaused: Boolean(showPosterWhenBufferingAndPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, renderCustomControls: renderCustomControls !== null && renderCustomControls !== void 0 ? renderCustomControls : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined, noSuspense: Boolean(noSuspense) }) }) }) }) }));
 };

package/dist/cjs/SharedPlayerContext.d.ts

@@ -1,10 +1,11 @@
 import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
-import type { LogLevel, TimelineContextValue } from 'remotion';
+import type { LogLevel, PlaybackRateContextValue, TimelineContextValue } from 'remotion';
 export declare const PLAYER_COMP_ID = "player-comp";
 export declare const SharedPlayerContexts: React.FC<{
     readonly children: React.ReactNode;
     readonly timelineContext: TimelineContextValue;
+    readonly playbackRateContext: PlaybackRateContextValue;
     readonly fps: number;
     readonly compositionWidth: number;
     readonly compositionHeight: number;

package/dist/cjs/SharedPlayerContext.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const volume_persistence_js_1 = require("./volume-persistence.js");
 exports.PLAYER_COMP_ID = 'player-comp';
-const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, logLevel, audioLatencyHint, volumePersistenceKey, initialVolume, inputProps, audioEnabled, }) => {
+const SharedPlayerContexts = ({ children, timelineContext, playbackRateContext, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, logLevel, audioLatencyHint, volumePersistenceKey, initialVolume, inputProps, audioEnabled, }) => {
     const persistVolumeToStorage = initialVolume === undefined;
     const compositionManagerContext = (0, react_1.useMemo)(() => {
         const context = {
@@ -88,6 +88,6 @@ const SharedPlayerContexts = ({ children, timelineContext, fps, compositionHeigh
             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.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, 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: audioEnabled, children: jsx_runtime_1.jsx(remotion_1.Internals.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.SharedPlayerContexts = SharedPlayerContexts;

package/dist/cjs/Thumbnail.js

@@ -30,14 +30,18 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
             imperativePlaying: {
                 current: false,
             },
+            audioAndVideoTags: { current: [] },
+        };
+        return value;
+    }, [frameToDisplay, thumbnailId]);
+    const playbackRateContext = (0, react_1.useMemo)(() => {
+        return {
             playbackRate: 1,
             setPlaybackRate: () => {
                 throw new Error('thumbnail');
             },
-            audioAndVideoTags: { current: [] },
         };
-        return value;
-    }, [frameToDisplay, thumbnailId]);
+    }, []);
     (0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
     const Component = remotion_1.Internals.useLazyComponent({
         compProps: componentProps,
@@ -48,7 +52,7 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, logLevel: logLevel, audioLatencyHint: "playback", inputProps: passedInputProps, audioEnabled: false, children: jsx_runtime_1.jsx(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: jsx_runtime_1.jsx(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible, overrideInternalClassName: overrideInternalClassName, noSuspense: Boolean(noSuspense) }) }) }) }));
+    return (jsx_runtime_1.jsx(remotion_1.Internals.IsPlayerContextProvider, { children: jsx_runtime_1.jsx(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, playbackRateContext: playbackRateContext, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, logLevel: logLevel, audioLatencyHint: "playback", inputProps: passedInputProps, audioEnabled: false, children: jsx_runtime_1.jsx(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: jsx_runtime_1.jsx(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible, overrideInternalClassName: overrideInternalClassName, noSuspense: Boolean(noSuspense) }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /*

package/dist/cjs/use-playback.js

@@ -17,7 +17,6 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const sharedAudioContext = (0, react_2.useContext)(remotion_1.Internals.SharedAudioContext);
     const logLevel = remotion_1.Internals.useLogLevel();
-    const timelineContext = remotion_1.Internals.useTimelineContext();
     // requestAnimationFrame() does not work if the tab is not active.
     // This means that audio will keep playing even if it has ended.
     // In that case, we use setTimeout() instead.
@@ -46,19 +45,13 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             audioContext: sharedAudioContext.audioContext,
             audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
             absoluteTimeInSeconds: frame / config.fps,
-            globalPlaybackRate: timelineContext.playbackRate,
+            globalPlaybackRate: playbackRate,
             logLevel,
         });
         if (changed) {
             sharedAudioContext.audioSyncAnchorEmitter.dispatch('changed');
         }
-    }, [
-        config,
-        frame,
-        logLevel,
-        sharedAudioContext,
-        timelineContext.playbackRate,
-    ]);
+    }, [config, frame, logLevel, playbackRate, sharedAudioContext]);
     (0, react_2.useEffect)(() => {
         var _a;
         if (!config) {
@@ -95,7 +88,9 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                 (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext);
                 return;
             }
-            (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.resume) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
+            if (!muted) {
+                (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.resume) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
+            }
             const time = performance.now() - startedTime;
             const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
             const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
@@ -127,7 +122,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             var _a, _b;
             var _c;
             const getIsResumingAudioContext = (_c = (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.getIsResumingAudioContext) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext)) !== null && _c !== void 0 ? _c : null;
-            if (getIsResumingAudioContext !== null) {
+            if (getIsResumingAudioContext !== null && !muted) {
                 getIsResumingAudioContext.then(() => {
                     if (!(sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.audioContext)) {
                         return;
@@ -143,7 +138,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                         audioContext: sharedAudioContext.audioContext,
                         audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
                         absoluteTimeInSeconds: getCurrentFrame() / config.fps,
-                        globalPlaybackRate: timelineContext.playbackRate,
+                        globalPlaybackRate: playbackRate,
                         logLevel,
                     });
                     startedTime = performance.now();
@@ -203,7 +198,6 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         context,
         isPlaying,
         sharedAudioContext,
-        timelineContext.playbackRate,
         logLevel,
         muted,
     ]);

package/dist/esm/index.mjs

@@ -944,7 +944,6 @@ var usePlayback = ({
   const setFrame = Internals7.Timeline.useTimelineSetFrame();
   const sharedAudioContext = useContext4(Internals7.SharedAudioContext);
   const logLevel = Internals7.useLogLevel();
-  const timelineContext = Internals7.useTimelineContext();
   const isBackgroundedRef = useIsBackgrounded();
   const lastTimeUpdateTimestamp = useRef5(0);
   const context = useContext4(Internals7.BufferingContextReact);
@@ -970,19 +969,13 @@ var usePlayback = ({
       audioContext: sharedAudioContext.audioContext,
       audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
       absoluteTimeInSeconds: frame / config.fps,
-      globalPlaybackRate: timelineContext.playbackRate,
+      globalPlaybackRate: playbackRate,
       logLevel
     });
     if (changed) {
       sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
     }
-  }, [
-    config,
-    frame,
-    logLevel,
-    sharedAudioContext,
-    timelineContext.playbackRate
-  ]);
+  }, [config, frame, logLevel, playbackRate, sharedAudioContext]);
   useEffect5(() => {
     if (!config) {
       return;
@@ -1016,7 +1009,9 @@ var usePlayback = ({
         sharedAudioContext?.suspend?.();
         return;
       }
-      sharedAudioContext?.resume?.();
+      if (!muted) {
+        sharedAudioContext?.resume?.();
+      }
       const time = performance.now() - startedTime;
       const actualLastFrame = outFrame ?? config.durationInFrames - 1;
       const actualFirstFrame = inFrame ?? 0;
@@ -1045,7 +1040,7 @@ var usePlayback = ({
     };
     const queueNextFrame = () => {
       const getIsResumingAudioContext = sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
-      if (getIsResumingAudioContext !== null) {
+      if (getIsResumingAudioContext !== null && !muted) {
         getIsResumingAudioContext.then(() => {
           if (!sharedAudioContext?.audioContext) {
             return;
@@ -1057,7 +1052,7 @@ var usePlayback = ({
             audioContext: sharedAudioContext.audioContext,
             audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
             absoluteTimeInSeconds: getCurrentFrame() / config.fps,
-            globalPlaybackRate: timelineContext.playbackRate,
+            globalPlaybackRate: playbackRate,
             logLevel
           });
           startedTime = performance.now();
@@ -1114,7 +1109,6 @@ var usePlayback = ({
     context,
     isPlaying,
     sharedAudioContext,
-    timelineContext.playbackRate,
     logLevel,
     muted
   ]);
@@ -1729,7 +1723,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
   }, rate);
 };
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-  const { setPlaybackRate, playbackRate } = Internals9.useTimelineContext();
+  const { setPlaybackRate, playbackRate } = Internals9.usePlaybackRate();
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
   useEffect9(() => {
     const listener = (e) => {
@@ -1831,7 +1825,7 @@ var button = {
 };
 var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
-  const { playbackRate } = Internals9.useTimelineContext();
+  const { playbackRate } = Internals9.usePlaybackRate();
   const onClick = useCallback6((e) => {
     e.stopPropagation();
     e.preventDefault();
@@ -2995,6 +2989,7 @@ var PLAYER_COMP_ID = "player-comp";
 var SharedPlayerContexts = ({
   children,
   timelineContext,
+  playbackRateContext,
   fps,
   compositionHeight,
   compositionWidth,
@@ -3095,23 +3090,26 @@ var SharedPlayerContexts = ({
       children: /* @__PURE__ */ jsx13(Internals14.CanUseRemotionHooksProvider, {
         children: /* @__PURE__ */ jsx13(Internals14.AbsoluteTimeContext.Provider, {
           value: timelineContext,
-          children: /* @__PURE__ */ jsx13(Internals14.TimelineContext.Provider, {
-            value: timelineContext,
-            children: /* @__PURE__ */ jsx13(Internals14.CompositionManager.Provider, {
-              value: compositionManagerContext,
-              children: /* @__PURE__ */ jsx13(Internals14.PrefetchProvider, {
-                children: /* @__PURE__ */ jsx13(Internals14.DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx13(Internals14.MediaVolumeContext.Provider, {
-                    value: mediaVolumeContextValue,
-                    children: /* @__PURE__ */ jsx13(Internals14.SetMediaVolumeContext.Provider, {
-                      value: setMediaVolumeContextValue,
-                      children: /* @__PURE__ */ jsx13(Internals14.BufferingProvider, {
-                        children: /* @__PURE__ */ jsx13(Internals14.SharedAudioContextProvider, {
-                          audioLatencyHint,
-                          audioEnabled,
-                          children: /* @__PURE__ */ jsx13(Internals14.SharedAudioTagsContextProvider, {
-                            numberOfAudioTags: numberOfSharedAudioTags,
-                            children
+          children: /* @__PURE__ */ jsx13(Internals14.PlaybackRateContext.Provider, {
+            value: playbackRateContext,
+            children: /* @__PURE__ */ jsx13(Internals14.TimelineContext.Provider, {
+              value: timelineContext,
+              children: /* @__PURE__ */ jsx13(Internals14.CompositionManager.Provider, {
+                value: compositionManagerContext,
+                children: /* @__PURE__ */ jsx13(Internals14.PrefetchProvider, {
+                  children: /* @__PURE__ */ jsx13(Internals14.DurationsContextProvider, {
+                    children: /* @__PURE__ */ jsx13(Internals14.MediaVolumeContext.Provider, {
+                      value: mediaVolumeContextValue,
+                      children: /* @__PURE__ */ jsx13(Internals14.SetMediaVolumeContext.Provider, {
+                        value: setMediaVolumeContextValue,
+                        children: /* @__PURE__ */ jsx13(Internals14.BufferingProvider, {
+                          children: /* @__PURE__ */ jsx13(Internals14.SharedAudioContextProvider, {
+                            audioLatencyHint,
+                            audioEnabled,
+                            children: /* @__PURE__ */ jsx13(Internals14.SharedAudioTagsContextProvider, {
+                              numberOfAudioTags: numberOfSharedAudioTags,
+                              children
+                            })
                           })
                         })
                       })
@@ -3398,14 +3396,16 @@ var PlayerFn = ({
       frame,
       playing,
       rootId,
-      playbackRate: currentPlaybackRate,
       imperativePlaying,
-      setPlaybackRate: (rate) => {
-        setCurrentPlaybackRate(rate);
-      },
       audioAndVideoTags
     };
-  }, [frame, currentPlaybackRate, playing, rootId]);
+  }, [frame, playing, rootId]);
+  const playbackRateContextValue = useMemo14(() => {
+    return {
+      playbackRate: currentPlaybackRate,
+      setPlaybackRate: setCurrentPlaybackRate
+    };
+  }, [currentPlaybackRate]);
   const setTimelineContextValue = useMemo14(() => {
     return {
       setFrame,
@@ -3426,6 +3426,7 @@ var PlayerFn = ({
   return /* @__PURE__ */ jsx14(Internals16.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
+      playbackRateContext: playbackRateContextValue,
       component,
       compositionHeight,
       compositionWidth,
@@ -3687,14 +3688,18 @@ var ThumbnailFn = ({
       imperativePlaying: {
         current: false
       },
-      playbackRate: 1,
-      setPlaybackRate: () => {
-        throw new Error("thumbnail");
-      },
       audioAndVideoTags: { current: [] }
     };
     return value;
   }, [frameToDisplay, thumbnailId]);
+  const playbackRateContext = useMemo17(() => {
+    return {
+      playbackRate: 1,
+      setPlaybackRate: () => {
+        throw new Error("thumbnail");
+      }
+    };
+  }, []);
   useImperativeHandle4(ref, () => rootRef.current, []);
   const Component = Internals18.useLazyComponent({
     compProps: componentProps,
@@ -3708,6 +3713,7 @@ var ThumbnailFn = ({
   return /* @__PURE__ */ jsx16(Internals18.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
       timelineContext: timelineState,
+      playbackRateContext,
       component: Component,
       compositionHeight,
       compositionWidth,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.456",
+	"version": "4.0.458",
 	"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.456"
+		"remotion": "4.0.458"
 	},
 	"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.456",
+		"@remotion/eslint-config-internal": "4.0.458",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},