@remotion/player 4.0.391 → 4.0.392

package/dist/cjs/Player.js

@@ -125,7 +125,6 @@ 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,7 +22,6 @@ 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,7 +31,6 @@ 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-frame-imperative.js

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

package/dist/cjs/use-playback.js

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

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

@@ -16,7 +16,6 @@ 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 = remotion_1.Internals.Timeline.useTimelineFrameRef();
+    const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
     const video = remotion_1.Internals.useVideo();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
@@ -30,16 +30,13 @@ 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) {
-            setFrameAndImperative(newFrame, video.id);
+            setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
         }
+        frameRef.current = newFrame;
         emitter.dispatchSeek(newFrame);
-    }, [emitter, setFrameAndImperative, video === null || video === void 0 ? void 0 : video.id]);
+    }, [emitter, setTimelinePosition, video === null || video === void 0 ? void 0 : video.id]);
     const play = (0, react_1.useCallback)((e) => {
         var _a;
         if (imperativePlaying.current) {
@@ -73,7 +70,6 @@ const usePlayer = () => {
         emitter,
         seek,
         audioAndVideoTags,
-        frameRef,
     ]);
     const pause = (0, react_1.useCallback)(() => {
         var _a;
@@ -97,14 +93,7 @@ const usePlayer = () => {
                 emitter.dispatchPause();
             }
         }
-    }, [
-        config,
-        emitter,
-        imperativePlaying,
-        setPlaying,
-        setTimelinePosition,
-        frameRef,
-    ]);
+    }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
     const videoId = video === null || video === void 0 ? void 0 : video.id;
     const frameBack = (0, react_1.useCallback)((frames) => {
         if (!videoId) {
@@ -165,15 +154,12 @@ const usePlayer = () => {
             pause,
             seek,
             isFirstFrame,
-            getCurrentFrame: () => {
-                return frameRef.current;
-            },
+            getCurrentFrame: () => frameRef.current,
             isPlaying: () => imperativePlaying.current,
             isBuffering: () => buffering.current,
             pauseAndReturnToPlayStart,
             hasPlayed,
             toggle,
-            setFrameAndImperative,
         };
     }, [
         buffering,
@@ -190,8 +176,6 @@ const usePlayer = () => {
         playing,
         seek,
         toggle,
-        setFrameAndImperative,
-        frameRef,
     ]);
     return returnValue;
 };

package/dist/esm/index.mjs

@@ -496,13 +496,15 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
 };
 
 // src/use-frame-imperative.ts
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { Internals as Internals4 } from "remotion";
 var useFrameImperative = () => {
-  const frameRef = Internals4.Timeline.useTimelineFrameRef();
+  const frame = Internals4.Timeline.useTimelinePosition();
+  const frameRef = useRef(frame);
+  frameRef.current = frame;
   const getCurrentFrame = useCallback(() => {
     return frameRef.current;
-  }, [frameRef]);
+  }, []);
   return getCurrentFrame;
 };
 
@@ -550,25 +552,25 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 
 // src/use-playback.ts
-import { useContext as useContext4, useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useContext as useContext4, useEffect as useEffect5, useRef as useRef4 } from "react";
 import { Internals as Internals6 } from "remotion";
 
 // src/browser-mediasession.ts
 import { useEffect as useEffect3 } from "react";
 
 // src/use-player.ts
-import { useCallback as useCallback2, useContext as useContext3, useMemo, useRef, useState as useState3 } from "react";
+import { useCallback as useCallback2, useContext as useContext3, useMemo, useRef as useRef2, 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 = useRef(frame);
+  const playStart = useRef2(frame);
   const setFrame = Internals5.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals5.Timeline.useTimelineSetFrame();
   const audioContext = useContext3(Internals5.SharedAudioContext);
   const { audioAndVideoTags } = useContext3(Internals5.TimelineContext);
-  const frameRef = Internals5.Timeline.useTimelineFrameRef();
+  const frameRef = useRef2(frame);
   frameRef.current = frame;
   const video = Internals5.useVideo();
   const config = Internals5.useUnsafeVideoConfig();
@@ -584,16 +586,13 @@ 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) {
-      setFrameAndImperative(newFrame, video.id);
+      setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
     }
+    frameRef.current = newFrame;
     emitter.dispatchSeek(newFrame);
-  }, [emitter, setFrameAndImperative, video?.id]);
+  }, [emitter, setTimelinePosition, video?.id]);
   const play = useCallback2((e) => {
     if (imperativePlaying.current) {
       return;
@@ -618,8 +617,7 @@ var usePlayer = () => {
     setPlaying,
     emitter,
     seek,
-    audioAndVideoTags,
-    frameRef
+    audioAndVideoTags
   ]);
   const pause = useCallback2(() => {
     if (imperativePlaying.current) {
@@ -642,14 +640,7 @@ var usePlayer = () => {
         emitter.dispatchPause();
       }
     }
-  }, [
-    config,
-    emitter,
-    imperativePlaying,
-    setPlaying,
-    setTimelinePosition,
-    frameRef
-  ]);
+  }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
   const videoId = video?.id;
   const frameBack = useCallback2((frames) => {
     if (!videoId) {
@@ -707,15 +698,12 @@ var usePlayer = () => {
       pause,
       seek,
       isFirstFrame,
-      getCurrentFrame: () => {
-        return frameRef.current;
-      },
+      getCurrentFrame: () => frameRef.current,
       isPlaying: () => imperativePlaying.current,
       isBuffering: () => buffering.current,
       pauseAndReturnToPlayStart,
       hasPlayed,
-      toggle,
-      setFrameAndImperative
+      toggle
     };
   }, [
     buffering,
@@ -731,9 +719,7 @@ var usePlayer = () => {
     play,
     playing,
     seek,
-    toggle,
-    setFrameAndImperative,
-    frameRef
+    toggle
   ]);
   return returnValue;
 };
@@ -878,7 +864,7 @@ var calculateNextFrame = ({
 };
 
 // src/is-backgrounded.ts
-import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
 var getIsBackgrounded = () => {
   if (typeof document === "undefined") {
     return false;
@@ -886,7 +872,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef2(getIsBackgrounded());
+  const isBackgrounded = useRef3(getIsBackgrounded());
   useEffect4(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -911,9 +897,10 @@ var usePlayback = ({
 }) => {
   const config = Internals6.useUnsafeVideoConfig();
   const frame = Internals6.Timeline.useTimelinePosition();
-  const { playing, pause, emitter, setFrameAndImperative } = usePlayer();
+  const { playing, pause, emitter } = usePlayer();
+  const setFrame = Internals6.Timeline.useTimelineSetFrame();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateEvent = useRef3(null);
+  const lastTimeUpdateEvent = useRef4(null);
   const context = useContext4(Internals6.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
@@ -967,7 +954,7 @@ var usePlayback = ({
       });
       framesAdvanced += framesToAdvance;
       if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded)) {
-        setFrameAndImperative(nextFrame, config.id);
+        setFrame((c) => ({ ...c, [config.id]: nextFrame }));
       }
       if (hasEnded) {
         stop();
@@ -1014,7 +1001,7 @@ var usePlayback = ({
     loop,
     pause,
     playing,
-    setFrameAndImperative,
+    setFrame,
     emitter,
     playbackRate,
     inFrame,
@@ -1169,7 +1156,7 @@ import {
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo14,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState13
 } from "react";
 import { Composition, Internals as Internals15 } from "remotion";
@@ -1183,13 +1170,13 @@ import React10, {
   useEffect as useEffect12,
   useImperativeHandle,
   useMemo as useMemo12,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState11
 } from "react";
 import { Internals as Internals11 } from "remotion";
 
 // src/PlayerControls.tsx
-import { useCallback as useCallback8, useEffect as useEffect10, useMemo as useMemo9, useRef as useRef7, useState as useState10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useMemo as useMemo9, useRef as useRef8, useState as useState10 } from "react";
 
 // src/DefaultPlayPauseButton.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -1206,7 +1193,7 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
 };
 
 // src/MediaVolumeSlider.tsx
-import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef4, useState as useState6 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
 import { Internals as Internals7 } from "remotion";
 
 // src/render-volume-slider.tsx
@@ -1324,8 +1311,8 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
   const [mediaMuted, setMediaMuted] = Internals7.useMediaMutedState();
   const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
   const [focused, setFocused] = useState6(false);
-  const parentDivRef = useRef4(null);
-  const inputRef = useRef4(null);
+  const parentDivRef = useRef5(null);
+  const inputRef = useRef5(null);
   const hover = useHoverState(parentDivRef, false);
   const onBlur = useCallback5(() => {
     setTimeout(() => {
@@ -1420,10 +1407,10 @@ import {
 import { Internals as Internals8 } from "remotion";
 
 // src/utils/use-component-visible.ts
-import { useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
+import { useEffect as useEffect7, useRef as useRef6, useState as useState7 } from "react";
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
-  const ref = useRef5(null);
+  const ref = useRef6(null);
   useEffect7(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -1643,7 +1630,7 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef6, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef7, 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) => {
@@ -1681,7 +1668,7 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef6(null);
+  const containerRef = useRef7(null);
   const barHovered = useHoverState(containerRef, false);
   const size = useElementSize(containerRef, {
     triggerOnWindowResize: true,
@@ -1972,7 +1959,7 @@ var Controls = ({
   playing,
   toggle
 }) => {
-  const playButtonRef = useRef7(null);
+  const playButtonRef = useRef8(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -2046,8 +2033,8 @@ var Controls = ({
     }
     return null;
   }, [showPlaybackRateControl]);
-  const ref = useRef7(null);
-  const flexRef = useRef7(null);
+  const ref = useRef8(null);
+  const flexRef = useRef8(null);
   const onPointerDownIfContainer = useCallback8((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
@@ -2312,9 +2299,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 useRef8 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo10, useRef as useRef9 } from "react";
 var useCancellablePromises = () => {
-  const pendingPromises = useRef8([]);
+  const pendingPromises = useRef9([]);
   const appendPendingPromise = useCallback9((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
@@ -2423,7 +2410,7 @@ var PlayerUI = ({
 }, ref) => {
   const config = Internals11.useUnsafeVideoConfig();
   const video = Internals11.useVideo();
-  const container = useRef9(null);
+  const container = useRef10(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -2534,7 +2521,7 @@ var PlayerUI = ({
     });
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef9(false);
+  const initialScaleIgnored = useRef10(false);
   useEffect12(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
@@ -3207,9 +3194,9 @@ var PlayerFn = ({
   }));
   const [playing, setPlaying] = useState13(false);
   const [rootId] = useState13("player-comp");
-  const rootRef = useRef10(null);
-  const audioAndVideoTags = useRef10([]);
-  const imperativePlaying = useRef10(false);
+  const rootRef = useRef11(null);
+  const audioAndVideoTags = useRef11([]);
+  const imperativePlaying = useRef11(false);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState13(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -3273,7 +3260,6 @@ var PlayerFn = ({
   const timelineContextValue = useMemo14(() => {
     return {
       frame,
-      frameRef: { current: frame[PLAYER_COMP_ID] },
       playing,
       rootId,
       playbackRate: currentPlaybackRate,
@@ -3372,7 +3358,7 @@ import {
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo17,
-  useRef as useRef12,
+  useRef as useRef13,
   useState as useState14
 } from "react";
 import { Internals as Internals17, random as random2 } from "remotion";
@@ -3384,7 +3370,7 @@ import React13, {
   useCallback as useCallback13,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo16,
-  useRef as useRef11
+  useRef as useRef12
 } from "react";
 import { Internals as Internals16 } from "remotion";
 
@@ -3422,7 +3408,7 @@ var ThumbnailUI = ({
 }, ref) => {
   const config = Internals16.useUnsafeVideoConfig();
   const video = Internals16.useVideo();
-  const container = useRef11(null);
+  const container = useRef12(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -3551,10 +3537,9 @@ var ThumbnailFn = ({
     }, []);
   }
   const [thumbnailId] = useState14(() => String(random2(null)));
-  const rootRef = useRef12(null);
+  const rootRef = useRef13(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.391",
+	"version": "4.0.392",
 	"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.391"
+		"remotion": "4.0.392"
 	},
 	"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.391",
+		"@remotion/eslint-config-internal": "4.0.392",
 		"eslint": "9.19.0"
 	},
 	"keywords": [