@remotion/player 4.0.390 → 4.0.391

package/dist/cjs/Player.js

@@ -125,6 +125,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const timelineContextValue = (0, react_1.useMemo)(() => {
         return {
             frame,
+            frameRef: { current: frame[SharedPlayerContext_js_1.PLAYER_COMP_ID] },
             playing,
             rootId,
             playbackRate: currentPlaybackRate,

package/dist/cjs/Thumbnail.js

@@ -22,6 +22,7 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
     const rootRef = (0, react_1.useRef)(null);
     const timelineState = (0, react_1.useMemo)(() => {
         const value = {
+            frameRef: { current: frameToDisplay },
             playing: false,
             frame: {
                 [SharedPlayerContext_js_1.PLAYER_COMP_ID]: frameToDisplay,

package/dist/cjs/index.d.ts

@@ -31,6 +31,7 @@ export declare const PlayerInternals: {
         hasPlayed: boolean;
         isBuffering: () => boolean;
         toggle: (e?: import("react").SyntheticEvent | PointerEvent) => void;
+        setFrameAndImperative: (newFrame: number, videoIdToSet: string) => void;
     };
     usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }: {
         loop: boolean;

package/dist/cjs/use-buffer-state-emitter.js

@@ -8,7 +8,7 @@ const useBufferStateEmitter = (emitter) => {
     if (!bufferManager) {
         throw new Error('BufferingContextReact not found');
     }
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const clear1 = bufferManager.listenForBuffering(() => {
             bufferManager.buffering.current = true;
             emitter.dispatchWaiting({});

package/dist/cjs/use-frame-imperative.js

@@ -4,12 +4,10 @@ exports.useFrameImperative = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const useFrameImperative = () => {
-    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const frameRef = (0, react_1.useRef)(frame);
-    frameRef.current = frame;
+    const frameRef = remotion_1.Internals.Timeline.useTimelineFrameRef();
     const getCurrentFrame = (0, react_1.useCallback)(() => {
         return frameRef.current;
-    }, []);
+    }, [frameRef]);
     return getCurrentFrame;
 };
 exports.useFrameImperative = useFrameImperative;

package/dist/cjs/use-playback.js

@@ -11,8 +11,7 @@ const use_player_js_1 = require("./use-player.js");
 const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const { playing, pause, emitter } = (0, use_player_js_1.usePlayer)();
-    const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
+    const { playing, pause, emitter, setFrameAndImperative } = (0, use_player_js_1.usePlayer)();
     // 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.
@@ -74,7 +73,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             framesAdvanced += framesToAdvance;
             if (nextFrame !== getCurrentFrame() &&
                 (!hasEnded || moveToBeginningWhenEnded)) {
-                setFrame((c) => ({ ...c, [config.id]: nextFrame }));
+                setFrameAndImperative(nextFrame, config.id);
             }
             if (hasEnded) {
                 stop();
@@ -124,7 +123,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         loop,
         pause,
         playing,
-        setFrame,
+        setFrameAndImperative,
         emitter,
         playbackRate,
         inFrame,

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

@@ -16,6 +16,7 @@ type UsePlayerMethods = {
     hasPlayed: boolean;
     isBuffering: () => boolean;
     toggle: (e?: SyntheticEvent | PointerEvent) => void;
+    setFrameAndImperative: (newFrame: number, videoIdToSet: string) => void;
 };
 export declare const usePlayer: () => UsePlayerMethods;
 export {};

package/dist/cjs/use-player.js

@@ -14,7 +14,7 @@ const usePlayer = () => {
     const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext);
     const { audioAndVideoTags } = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
-    const frameRef = (0, react_1.useRef)(frame);
+    const frameRef = remotion_1.Internals.Timeline.useTimelineFrameRef();
     frameRef.current = frame;
     const video = remotion_1.Internals.useVideo();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
@@ -30,13 +30,16 @@ const usePlayer = () => {
         throw new Error('Missing the buffering context. Most likely you have a Remotion version mismatch.');
     }
     const { buffering } = bufferingContext;
+    const setFrameAndImperative = (0, react_1.useCallback)((newFrame, videoIdToSet) => {
+        setTimelinePosition((c) => ({ ...c, [videoIdToSet]: newFrame }));
+        frameRef.current = newFrame;
+    }, [frameRef, setTimelinePosition]);
     const seek = (0, react_1.useCallback)((newFrame) => {
         if (video === null || video === void 0 ? void 0 : video.id) {
-            setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
+            setFrameAndImperative(newFrame, video.id);
         }
-        frameRef.current = newFrame;
         emitter.dispatchSeek(newFrame);
-    }, [emitter, setTimelinePosition, video === null || video === void 0 ? void 0 : video.id]);
+    }, [emitter, setFrameAndImperative, video === null || video === void 0 ? void 0 : video.id]);
     const play = (0, react_1.useCallback)((e) => {
         var _a;
         if (imperativePlaying.current) {
@@ -70,6 +73,7 @@ const usePlayer = () => {
         emitter,
         seek,
         audioAndVideoTags,
+        frameRef,
     ]);
     const pause = (0, react_1.useCallback)(() => {
         var _a;
@@ -93,7 +97,14 @@ const usePlayer = () => {
                 emitter.dispatchPause();
             }
         }
-    }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
+    }, [
+        config,
+        emitter,
+        imperativePlaying,
+        setPlaying,
+        setTimelinePosition,
+        frameRef,
+    ]);
     const videoId = video === null || video === void 0 ? void 0 : video.id;
     const frameBack = (0, react_1.useCallback)((frames) => {
         if (!videoId) {
@@ -154,12 +165,15 @@ const usePlayer = () => {
             pause,
             seek,
             isFirstFrame,
-            getCurrentFrame: () => frameRef.current,
+            getCurrentFrame: () => {
+                return frameRef.current;
+            },
             isPlaying: () => imperativePlaying.current,
             isBuffering: () => buffering.current,
             pauseAndReturnToPlayStart,
             hasPlayed,
             toggle,
+            setFrameAndImperative,
         };
     }, [
         buffering,
@@ -176,6 +190,8 @@ const usePlayer = () => {
         playing,
         seek,
         toggle,
+        setFrameAndImperative,
+        frameRef,
     ]);
     return returnValue;
 };

package/dist/esm/index.mjs

@@ -335,7 +335,7 @@ var PlayerEventEmitterContext = React.createContext(undefined);
 var ThumbnailEmitterContext = React.createContext(undefined);
 
 // src/EmitterProvider.tsx
-import { useContext as useContext2, useEffect as useEffect2, useState } from "react";
+import { useContext as useContext2, useEffect, useState } from "react";
 import { Internals as Internals3 } from "remotion";
 
 // src/event-emitter.ts
@@ -452,14 +452,14 @@ class ThumbnailEmitter {
 }
 
 // src/use-buffer-state-emitter.ts
-import { useContext, useEffect } from "react";
+import { useContext, useLayoutEffect } from "react";
 import { Internals as Internals2 } from "remotion";
 var useBufferStateEmitter = (emitter) => {
   const bufferManager = useContext(Internals2.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect(() => {
+  useLayoutEffect(() => {
     const clear1 = bufferManager.listenForBuffering(() => {
       bufferManager.buffering.current = true;
       emitter.dispatchWaiting({});
@@ -483,7 +483,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect2(() => {
+  useEffect(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
@@ -496,23 +496,21 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
 };
 
 // src/use-frame-imperative.ts
-import { useCallback, useRef } from "react";
+import { useCallback } from "react";
 import { Internals as Internals4 } from "remotion";
 var useFrameImperative = () => {
-  const frame = Internals4.Timeline.useTimelinePosition();
-  const frameRef = useRef(frame);
-  frameRef.current = frame;
+  const frameRef = Internals4.Timeline.useTimelineFrameRef();
   const getCurrentFrame = useCallback(() => {
     return frameRef.current;
-  }, []);
+  }, [frameRef]);
   return getCurrentFrame;
 };
 
 // src/use-hover-state.ts
-import { useEffect as useEffect3, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState2(false);
-  useEffect3(() => {
+  useEffect2(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -552,25 +550,25 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 
 // src/use-playback.ts
-import { useContext as useContext4, useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useContext as useContext4, useEffect as useEffect5, useRef as useRef3 } from "react";
 import { Internals as Internals6 } from "remotion";
 
 // src/browser-mediasession.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect3 } from "react";
 
 // src/use-player.ts
-import { useCallback as useCallback2, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useContext as useContext3, useMemo, useRef, useState as useState3 } from "react";
 import { Internals as Internals5 } from "remotion";
 var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals5.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState3(false);
   const frame = Internals5.Timeline.useTimelinePosition();
-  const playStart = useRef2(frame);
+  const playStart = useRef(frame);
   const setFrame = Internals5.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals5.Timeline.useTimelineSetFrame();
   const audioContext = useContext3(Internals5.SharedAudioContext);
   const { audioAndVideoTags } = useContext3(Internals5.TimelineContext);
-  const frameRef = useRef2(frame);
+  const frameRef = Internals5.Timeline.useTimelineFrameRef();
   frameRef.current = frame;
   const video = Internals5.useVideo();
   const config = Internals5.useUnsafeVideoConfig();
@@ -586,13 +584,16 @@ var usePlayer = () => {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
   const { buffering } = bufferingContext;
+  const setFrameAndImperative = useCallback2((newFrame, videoIdToSet) => {
+    setTimelinePosition((c) => ({ ...c, [videoIdToSet]: newFrame }));
+    frameRef.current = newFrame;
+  }, [frameRef, setTimelinePosition]);
   const seek = useCallback2((newFrame) => {
     if (video?.id) {
-      setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
+      setFrameAndImperative(newFrame, video.id);
     }
-    frameRef.current = newFrame;
     emitter.dispatchSeek(newFrame);
-  }, [emitter, setTimelinePosition, video?.id]);
+  }, [emitter, setFrameAndImperative, video?.id]);
   const play = useCallback2((e) => {
     if (imperativePlaying.current) {
       return;
@@ -617,7 +618,8 @@ var usePlayer = () => {
     setPlaying,
     emitter,
     seek,
-    audioAndVideoTags
+    audioAndVideoTags,
+    frameRef
   ]);
   const pause = useCallback2(() => {
     if (imperativePlaying.current) {
@@ -640,7 +642,14 @@ var usePlayer = () => {
         emitter.dispatchPause();
       }
     }
-  }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
+  }, [
+    config,
+    emitter,
+    imperativePlaying,
+    setPlaying,
+    setTimelinePosition,
+    frameRef
+  ]);
   const videoId = video?.id;
   const frameBack = useCallback2((frames) => {
     if (!videoId) {
@@ -698,12 +707,15 @@ var usePlayer = () => {
       pause,
       seek,
       isFirstFrame,
-      getCurrentFrame: () => frameRef.current,
+      getCurrentFrame: () => {
+        return frameRef.current;
+      },
       isPlaying: () => imperativePlaying.current,
       isBuffering: () => buffering.current,
       pauseAndReturnToPlayStart,
       hasPlayed,
-      toggle
+      toggle,
+      setFrameAndImperative
     };
   }, [
     buffering,
@@ -719,7 +731,9 @@ var usePlayer = () => {
     play,
     playing,
     seek,
-    toggle
+    toggle,
+    setFrameAndImperative,
+    frameRef
   ]);
   return returnValue;
 };
@@ -731,7 +745,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek } = usePlayer();
-  useEffect4(() => {
+  useEffect3(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -744,7 +758,7 @@ var useBrowserMediaSession = ({
       navigator.mediaSession.playbackState = "paused";
     }
   }, [browserMediaControlsBehavior.mode, playing]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -774,7 +788,7 @@ var useBrowserMediaSession = ({
     playbackRate,
     videoConfig
   ]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -864,7 +878,7 @@ var calculateNextFrame = ({
 };
 
 // src/is-backgrounded.ts
-import { useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
 var getIsBackgrounded = () => {
   if (typeof document === "undefined") {
     return false;
@@ -872,8 +886,8 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef3(getIsBackgrounded());
-  useEffect5(() => {
+  const isBackgrounded = useRef2(getIsBackgrounded());
+  useEffect4(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
     };
@@ -897,10 +911,9 @@ var usePlayback = ({
 }) => {
   const config = Internals6.useUnsafeVideoConfig();
   const frame = Internals6.Timeline.useTimelinePosition();
-  const { playing, pause, emitter } = usePlayer();
-  const setFrame = Internals6.Timeline.useTimelineSetFrame();
+  const { playing, pause, emitter, setFrameAndImperative } = usePlayer();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateEvent = useRef4(null);
+  const lastTimeUpdateEvent = useRef3(null);
   const context = useContext4(Internals6.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
@@ -910,7 +923,7 @@ var usePlayback = ({
     playbackRate,
     videoConfig: config
   });
-  useEffect6(() => {
+  useEffect5(() => {
     if (!config) {
       return;
     }
@@ -954,7 +967,7 @@ var usePlayback = ({
       });
       framesAdvanced += framesToAdvance;
       if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded)) {
-        setFrame((c) => ({ ...c, [config.id]: nextFrame }));
+        setFrameAndImperative(nextFrame, config.id);
       }
       if (hasEnded) {
         stop();
@@ -1001,7 +1014,7 @@ var usePlayback = ({
     loop,
     pause,
     playing,
-    setFrame,
+    setFrameAndImperative,
     emitter,
     playbackRate,
     inFrame,
@@ -1011,7 +1024,7 @@ var usePlayback = ({
     getCurrentFrame,
     context
   ]);
-  useEffect6(() => {
+  useEffect5(() => {
     const interval = setInterval(() => {
       if (lastTimeUpdateEvent.current === getCurrentFrame()) {
         return;
@@ -1021,13 +1034,13 @@ var usePlayback = ({
     }, 250);
     return () => clearInterval(interval);
   }, [emitter, getCurrentFrame]);
-  useEffect6(() => {
+  useEffect5(() => {
     emitter.dispatchFrameUpdate({ frame });
   }, [emitter, frame]);
 };
 
 // src/utils/use-element-size.ts
-import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
 var elementSizeHooks = [];
 var updateAllElementsSizes = () => {
   for (const listener of elementSizeHooks) {
@@ -1112,7 +1125,7 @@ var useElementSize = (ref, options) => {
       };
     });
   }, [ref]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!observer) {
       return;
     }
@@ -1126,7 +1139,7 @@ var useElementSize = (ref, options) => {
       }
     };
   }, [observer, ref, updateSize]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!options.triggerOnWindowResize) {
       return;
     }
@@ -1135,7 +1148,7 @@ var useElementSize = (ref, options) => {
       window.removeEventListener("resize", updateSize);
     };
   }, [options.triggerOnWindowResize, updateSize]);
-  useEffect7(() => {
+  useEffect6(() => {
     elementSizeHooks.push(updateSize);
     return () => {
       elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
@@ -1152,11 +1165,11 @@ var useElementSize = (ref, options) => {
 // src/Player.tsx
 import {
   forwardRef as forwardRef2,
-  useEffect as useEffect14,
+  useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect,
+  useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo14,
-  useRef as useRef11,
+  useRef as useRef10,
   useState as useState13
 } from "react";
 import { Composition, Internals as Internals15 } from "remotion";
@@ -1167,16 +1180,16 @@ import React10, {
   forwardRef,
   useCallback as useCallback11,
   useContext as useContext6,
-  useEffect as useEffect13,
+  useEffect as useEffect12,
   useImperativeHandle,
   useMemo as useMemo12,
-  useRef as useRef10,
+  useRef as useRef9,
   useState as useState11
 } from "react";
 import { Internals as Internals11 } from "remotion";
 
 // src/PlayerControls.tsx
-import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef8, useState as useState10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useMemo as useMemo9, useRef as useRef7, useState as useState10 } from "react";
 
 // src/DefaultPlayPauseButton.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -1193,7 +1206,7 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
 };
 
 // src/MediaVolumeSlider.tsx
-import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef4, useState as useState6 } from "react";
 import { Internals as Internals7 } from "remotion";
 
 // src/render-volume-slider.tsx
@@ -1311,8 +1324,8 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
   const [mediaMuted, setMediaMuted] = Internals7.useMediaMutedState();
   const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
   const [focused, setFocused] = useState6(false);
-  const parentDivRef = useRef5(null);
-  const inputRef = useRef5(null);
+  const parentDivRef = useRef4(null);
+  const inputRef = useRef4(null);
   const hover = useHoverState(parentDivRef, false);
   const onBlur = useCallback5(() => {
     setTimeout(() => {
@@ -1400,18 +1413,18 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 import {
   useCallback as useCallback6,
   useContext as useContext5,
-  useEffect as useEffect9,
+  useEffect as useEffect8,
   useMemo as useMemo5,
   useState as useState8
 } from "react";
 import { Internals as Internals8 } from "remotion";
 
 // src/utils/use-component-visible.ts
-import { useEffect as useEffect8, useRef as useRef6, useState as useState7 } from "react";
+import { useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
-  const ref = useRef6(null);
-  useEffect8(() => {
+  const ref = useRef5(null);
+  useEffect7(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         setIsComponentVisible(false);
@@ -1498,7 +1511,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
   const { setPlaybackRate, playbackRate } = useContext5(Internals8.TimelineContext);
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
-  useEffect9(() => {
+  useEffect8(() => {
     const listener = (e) => {
       e.preventDefault();
       if (e.key === "ArrowUp") {
@@ -1630,7 +1643,7 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef6, useState as useState9 } from "react";
 import { Internals as Internals9, interpolate } from "remotion";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
@@ -1668,7 +1681,7 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef7(null);
+  const containerRef = useRef6(null);
   const barHovered = useHoverState(containerRef, false);
   const size = useElementSize(containerRef, {
     triggerOnWindowResize: true,
@@ -1719,7 +1732,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, pause, play]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -1959,7 +1972,7 @@ var Controls = ({
   playing,
   toggle
 }) => {
-  const playButtonRef = useRef8(null);
+  const playButtonRef = useRef7(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -1994,17 +2007,17 @@ var Controls = ({
       opacity: Number(shouldShow)
     };
   }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (playButtonRef.current && spaceKeyToPlayOrPause) {
       playButtonRef.current.focus({
         preventScroll: true
       });
     }
   }, [playing, spaceKeyToPlayOrPause]);
-  useEffect11(() => {
+  useEffect10(() => {
     setSupportsFullscreen((typeof document !== "undefined" && (document.fullscreenEnabled || document.webkitFullscreenEnabled)) ?? false);
   }, []);
-  useEffect11(() => {
+  useEffect10(() => {
     if (shouldShowInitially === false) {
       return;
     }
@@ -2033,8 +2046,8 @@ var Controls = ({
     }
     return null;
   }, [showPlaybackRateControl]);
-  const ref = useRef8(null);
-  const flexRef = useRef8(null);
+  const ref = useRef7(null);
+  const flexRef = useRef7(null);
   const onPointerDownIfContainer = useCallback8((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
@@ -2174,7 +2187,7 @@ class ErrorBoundary extends React8.Component {
 }
 
 // src/license-blacklist.tsx
-import React9, { useEffect as useEffect12 } from "react";
+import React9, { useEffect as useEffect11 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var getHashOfDomain = async () => {
   if (typeof window === "undefined") {
@@ -2210,7 +2223,7 @@ var DOMAIN_BLACKLIST = [
 var ran = false;
 var RenderWarningIfBlacklist = () => {
   const [unlicensed, setUnlicensed] = React9.useState(false);
-  useEffect12(() => {
+  useEffect11(() => {
     if (ran) {
       return;
     }
@@ -2221,7 +2234,7 @@ var RenderWarningIfBlacklist = () => {
       }
     }).catch(() => {});
   }, []);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!unlicensed) {
       return;
     }
@@ -2299,9 +2312,9 @@ var cancellablePromise = (promise) => {
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 
 // src/utils/use-cancellable-promises.ts
-import { useCallback as useCallback9, useMemo as useMemo10, useRef as useRef9 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo10, useRef as useRef8 } from "react";
 var useCancellablePromises = () => {
-  const pendingPromises = useRef9([]);
+  const pendingPromises = useRef8([]);
   const appendPendingPromise = useCallback9((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
@@ -2410,7 +2423,7 @@ var PlayerUI = ({
 }, ref) => {
   const config = Internals11.useUnsafeVideoConfig();
   const video = Internals11.useVideo();
-  const container = useRef10(null);
+  const container = useRef9(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -2436,13 +2449,13 @@ var PlayerUI = ({
     getCurrentFrame: player.getCurrentFrame,
     browserMediaControlsBehavior
   });
-  useEffect13(() => {
+  useEffect12(() => {
     if (hasPausedToResume && !player.playing) {
       setHasPausedToResume(false);
       player.play();
     }
   }, [hasPausedToResume, player]);
-  useEffect13(() => {
+  useEffect12(() => {
     const { current } = container;
     if (!current) {
       return;
@@ -2484,7 +2497,7 @@ var PlayerUI = ({
       document.exitFullscreen();
     }
   }, []);
-  useEffect13(() => {
+  useEffect12(() => {
     const { current } = container;
     if (!current) {
       return;
@@ -2521,8 +2534,8 @@ var PlayerUI = ({
     });
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef10(false);
-  useEffect13(() => {
+  const initialScaleIgnored = useRef9(false);
+  useEffect12(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
       return;
@@ -2531,17 +2544,17 @@ var PlayerUI = ({
   }, [player.emitter, scale]);
   const { setMediaVolume, setMediaMuted } = useContext6(Internals11.SetMediaVolumeContext);
   const { mediaMuted, mediaVolume } = useContext6(Internals11.MediaVolumeContext);
-  useEffect13(() => {
+  useEffect12(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
   const isMuted = mediaMuted || mediaVolume === 0;
-  useEffect13(() => {
+  useEffect12(() => {
     player.emitter.dispatchMuteChange({
       isMuted
     });
   }, [player.emitter, isMuted]);
   const [showBufferIndicator, setShowBufferState] = useState11(false);
-  useEffect13(() => {
+  useEffect12(() => {
     let timeout = null;
     let stopped = false;
     const onBuffer = () => {
@@ -2713,7 +2726,7 @@ var PlayerUI = ({
     }
   }, [exitFullscreen, isFullscreen, requestFullscreen]);
   const { handlePointerDown, handleDoubleClick } = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
-  useEffect13(() => {
+  useEffect12(() => {
     if (shouldAutoplay) {
       player.play();
       setShouldAutoPlay(false);
@@ -3194,9 +3207,9 @@ var PlayerFn = ({
   }));
   const [playing, setPlaying] = useState13(false);
   const [rootId] = useState13("player-comp");
-  const rootRef = useRef11(null);
-  const audioAndVideoTags = useRef11([]);
-  const imperativePlaying = useRef11(false);
+  const rootRef = useRef10(null);
+  const audioAndVideoTags = useRef10([]);
+  const imperativePlaying = useRef10(false);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState13(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -3245,7 +3258,7 @@ var PlayerFn = ({
     throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
   }
   validatePlaybackRate(currentPlaybackRate);
-  useEffect14(() => {
+  useEffect13(() => {
     setCurrentPlaybackRate(playbackRate);
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
@@ -3260,6 +3273,7 @@ var PlayerFn = ({
   const timelineContextValue = useMemo14(() => {
     return {
       frame,
+      frameRef: { current: frame[PLAYER_COMP_ID] },
       playing,
       rootId,
       playbackRate: currentPlaybackRate,
@@ -3277,7 +3291,7 @@ var PlayerFn = ({
     };
   }, [setFrame]);
   if (typeof window !== "undefined") {
-    useLayoutEffect(() => {
+    useLayoutEffect2(() => {
       Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
@@ -3356,9 +3370,9 @@ var Player = forward(PlayerFn);
 import {
   forwardRef as forwardRef4,
   useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo17,
-  useRef as useRef13,
+  useRef as useRef12,
   useState as useState14
 } from "react";
 import { Internals as Internals17, random as random2 } from "remotion";
@@ -3370,7 +3384,7 @@ import React13, {
   useCallback as useCallback13,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo16,
-  useRef as useRef12
+  useRef as useRef11
 } from "react";
 import { Internals as Internals16 } from "remotion";
 
@@ -3408,7 +3422,7 @@ var ThumbnailUI = ({
 }, ref) => {
   const config = Internals16.useUnsafeVideoConfig();
   const video = Internals16.useVideo();
-  const container = useRef12(null);
+  const container = useRef11(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -3532,14 +3546,15 @@ var ThumbnailFn = ({
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
-    useLayoutEffect2(() => {
+    useLayoutEffect3(() => {
       window.remotion_isPlayer = true;
     }, []);
   }
   const [thumbnailId] = useState14(() => String(random2(null)));
-  const rootRef = useRef13(null);
+  const rootRef = useRef12(null);
   const timelineState = useMemo17(() => {
     const value = {
+      frameRef: { current: frameToDisplay },
       playing: false,
       frame: {
         [PLAYER_COMP_ID]: frameToDisplay

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.390",
+	"version": "4.0.391",
 	"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.390"
+		"remotion": "4.0.391"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -49,7 +49,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.96.1",
 		"zod": "3.22.3",
-		"@remotion/eslint-config-internal": "4.0.390",
+		"@remotion/eslint-config-internal": "4.0.391",
 		"eslint": "9.19.0"
 	},
 	"keywords": [