@remotion/player 4.0.457 → 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) {
@@ -145,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();
@@ -205,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;
@@ -1059,7 +1052,7 @@ var usePlayback = ({
             audioContext: sharedAudioContext.audioContext,
             audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
             absoluteTimeInSeconds: getCurrentFrame() / config.fps,
-            globalPlaybackRate: timelineContext.playbackRate,
+            globalPlaybackRate: playbackRate,
             logLevel
           });
           startedTime = performance.now();
@@ -1116,7 +1109,6 @@ var usePlayback = ({
     context,
     isPlaying,
     sharedAudioContext,
-    timelineContext.playbackRate,
     logLevel,
     muted
   ]);
@@ -1731,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) => {
@@ -1833,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();
@@ -2997,6 +2989,7 @@ var PLAYER_COMP_ID = "player-comp";
 var SharedPlayerContexts = ({
   children,
   timelineContext,
+  playbackRateContext,
   fps,
   compositionHeight,
   compositionWidth,
@@ -3097,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
+                            })
                           })
                         })
                       })
@@ -3400,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,
@@ -3428,6 +3426,7 @@ var PlayerFn = ({
   return /* @__PURE__ */ jsx14(Internals16.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
+      playbackRateContext: playbackRateContextValue,
       component,
       compositionHeight,
       compositionWidth,
@@ -3689,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,
@@ -3710,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.457",
+	"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.457"
+		"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.457",
+		"@remotion/eslint-config-internal": "4.0.458",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/cjs/volume-persistance.d.ts

@@ -1,2 +0,0 @@
-export declare const persistVolume: (volume: number, logLevel: "error" | "info" | "trace" | "verbose" | "warn", volumePersistenceKey: string | null) => void;
-export declare const getPreferredVolume: (volumePersistenceKey: string | null) => number;

package/dist/cjs/volume-persistance.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPreferredVolume = exports.persistVolume = void 0;
-const remotion_1 = require("remotion");
-const DEFAULT_VOLUME_PERSISTANCE_KEY = 'remotion.volumePreference';
-const persistVolume = (volume, logLevel, volumePersistenceKey) => {
-    if (typeof window === 'undefined') {
-        return;
-    }
-    try {
-        window.localStorage.setItem(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : DEFAULT_VOLUME_PERSISTANCE_KEY, String(volume));
-    }
-    catch (e) {
-        // User can disallow localStorage access
-        // https://github.com/remotion-dev/remotion/issues/3540
-        remotion_1.Internals.Log.error({ logLevel, tag: null }, 'Could not persist volume', e);
-    }
-};
-exports.persistVolume = persistVolume;
-const getPreferredVolume = (volumePersistenceKey) => {
-    if (typeof window === 'undefined') {
-        return 1;
-    }
-    try {
-        const val = window.localStorage.getItem(volumePersistenceKey !== null && volumePersistenceKey !== void 0 ? volumePersistenceKey : DEFAULT_VOLUME_PERSISTANCE_KEY);
-        return val ? Number(val) : 1;
-    }
-    catch (_a) {
-        // User can disallow localStorage access
-        // https://github.com/remotion-dev/remotion/issues/3540
-        return 1;
-    }
-};
-exports.getPreferredVolume = getPreferredVolume;