@remotion/player 4.0.460 → 4.0.462

package/dist/cjs/index.d.ts

@@ -39,7 +39,7 @@ export declare const PlayerInternals: {
         inFrame: number | null;
         outFrame: number | null;
         browserMediaControlsBehavior: import("./browser-mediasession.js").BrowserMediaControlsBehavior;
-        getCurrentFrame: import("./use-frame-imperative.js").GetCurrentFrame;
+        getCurrentFrame: () => number;
         muted: boolean;
     }) => void;
     useElementSize: (ref: import("react").RefObject<HTMLElement | null>, options: {
@@ -67,5 +67,4 @@ export declare const PlayerInternals: {
     BufferingIndicator: import("react").FC<{
         readonly type: "player" | "studio";
     }>;
-    useFrameImperative: () => import("./use-frame-imperative.js").GetCurrentFrame;
 };

package/dist/cjs/index.js

@@ -7,7 +7,6 @@ const calculate_scale_js_1 = require("./calculate-scale.js");
 const emitter_context_js_1 = require("./emitter-context.js");
 const EmitterProvider_js_1 = require("./EmitterProvider.js");
 const event_emitter_js_1 = require("./event-emitter.js");
-const use_frame_imperative_js_1 = require("./use-frame-imperative.js");
 const use_hover_state_js_1 = require("./use-hover-state.js");
 const use_playback_js_1 = require("./use-playback.js");
 const use_player_js_1 = require("./use-player.js");
@@ -27,5 +26,4 @@ exports.PlayerInternals = {
     updateAllElementsSizes: use_element_size_js_1.updateAllElementsSizes,
     PlayerEmitterProvider: EmitterProvider_js_1.PlayerEmitterProvider,
     BufferingIndicator: BufferingIndicator_js_1.BufferingIndicator,
-    useFrameImperative: use_frame_imperative_js_1.useFrameImperative,
 };

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

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

package/dist/esm/index.mjs

@@ -1,4 +1,22 @@
 "use client";
+// src/_check-rsc.ts
+import { createContext } from "react";
+if (typeof createContext !== "function") {
+  const err = [
+    'Remotion requires React.createContext, but it is "undefined".',
+    'If you are in a React Server Component, turn it into a client component by adding "use client" at the top of the file.',
+    "",
+    "Before:",
+    '  import {Player} from "@remotion/player";',
+    "",
+    "After:",
+    '  "use client";',
+    '  import {Player} from "@remotion/player";'
+  ];
+  throw new Error(err.join(`
+`));
+}
+
 // src/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var ICON_SIZE = 25;
@@ -495,19 +513,6 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   });
 };
 
-// src/use-frame-imperative.ts
-import { useCallback, useRef } from "react";
-import { Internals as Internals4 } from "remotion";
-var useFrameImperative = () => {
-  const frame = Internals4.Timeline.useTimelinePosition();
-  const frameRef = useRef(frame);
-  frameRef.current = frame;
-  const getCurrentFrame = useCallback(() => {
-    return frameRef.current;
-  }, []);
-  return getCurrentFrame;
-};
-
 // src/use-hover-state.ts
 import { useEffect as useEffect2, useState as useState2 } from "react";
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
@@ -553,29 +558,29 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 
 // src/use-playback.ts
 import { useLayoutEffect as useLayoutEffect2 } from "react";
-import { useContext as useContext4, useEffect as useEffect5, useRef as useRef5 } from "react";
-import { Internals as Internals7 } from "remotion";
+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, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
 
 // src/use-player.ts
-import { useCallback as useCallback2, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3 } from "react";
-import { Internals as Internals5 } from "remotion";
+import { useCallback, useContext as useContext3, useMemo, useRef, useState as useState3 } from "react";
+import { Internals as Internals4 } from "remotion";
 var usePlayer = () => {
-  const [playing, setPlaying, imperativePlaying] = Internals5.Timeline.usePlayingState();
+  const [playing, setPlaying, imperativePlaying] = Internals4.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState3(false);
-  const frame = Internals5.Timeline.useTimelinePosition();
-  const playStart = useRef2(frame);
-  const setFrame = Internals5.Timeline.useTimelineSetFrame();
-  const setTimelinePosition = Internals5.Timeline.useTimelineSetFrame();
-  const audioContext = useContext3(Internals5.SharedAudioContext);
-  const audioTagsContext = useContext3(Internals5.SharedAudioTagsContext);
-  const { audioAndVideoTags } = Internals5.useTimelineContext();
-  const frameRef = useRef2(frame);
+  const frame = Internals4.Timeline.useTimelinePosition();
+  const playStart = useRef(frame);
+  const setFrame = Internals4.Timeline.useTimelineSetFrame();
+  const setTimelinePosition = Internals4.Timeline.useTimelineSetFrame();
+  const audioContext = useContext3(Internals4.SharedAudioContext);
+  const audioTagsContext = useContext3(Internals4.SharedAudioTagsContext);
+  const { audioAndVideoTags } = Internals4.useTimelineContext();
+  const frameRef = useRef(frame);
   frameRef.current = frame;
-  const video = Internals5.useVideo();
-  const config = Internals5.useUnsafeVideoConfig();
+  const video = Internals4.useVideo();
+  const config = Internals4.useUnsafeVideoConfig();
   const emitter = useContext3(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
@@ -583,19 +588,19 @@ var usePlayer = () => {
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext3(Internals5.BufferingContextReact);
+  const bufferingContext = useContext3(Internals4.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
   const { buffering } = bufferingContext;
-  const seek = useCallback2((newFrame) => {
+  const seek = useCallback((newFrame) => {
     if (video?.id) {
       setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
     }
     frameRef.current = newFrame;
     emitter.dispatchSeek(newFrame);
   }, [emitter, setTimelinePosition, video?.id]);
-  const play = useCallback2((e) => {
+  const play = useCallback((e) => {
     if (imperativePlaying.current) {
       return;
     }
@@ -622,7 +627,7 @@ var usePlayer = () => {
     seek,
     audioAndVideoTags
   ]);
-  const pause = useCallback2(() => {
+  const pause = useCallback(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       setPlaying(false);
@@ -630,7 +635,7 @@ var usePlayer = () => {
       audioContext?.suspend();
     }
   }, [emitter, imperativePlaying, setPlaying, audioContext]);
-  const pauseAndReturnToPlayStart = useCallback2(() => {
+  const pauseAndReturnToPlayStart = useCallback(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       frameRef.current = playStart.current;
@@ -645,7 +650,7 @@ var usePlayer = () => {
     }
   }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
   const videoId = video?.id;
-  const frameBack = useCallback2((frames) => {
+  const frameBack = useCallback((frames) => {
     if (!videoId) {
       return null;
     }
@@ -664,7 +669,7 @@ var usePlayer = () => {
       };
     });
   }, [imperativePlaying, setFrame, videoId]);
-  const frameForward = useCallback2((frames) => {
+  const frameForward = useCallback((frames) => {
     if (!videoId) {
       return null;
     }
@@ -683,20 +688,20 @@ var usePlayer = () => {
       };
     });
   }, [videoId, imperativePlaying, lastFrame, setFrame]);
-  const toggle = useCallback2((e) => {
+  const toggle = useCallback((e) => {
     if (imperativePlaying.current) {
       pause();
     } else {
       play(e);
     }
   }, [imperativePlaying, pause, play]);
-  const isPlaying = useCallback2(() => {
+  const isPlaying = useCallback(() => {
     return imperativePlaying.current;
   }, [imperativePlaying]);
-  const getCurrentFrame = useCallback2(() => {
+  const getCurrentFrame = useCallback(() => {
     return frameRef.current;
   }, [frameRef]);
-  const isBuffering = useCallback2(() => {
+  const isBuffering = useCallback(() => {
     return buffering.current;
   }, [buffering]);
   const returnValue = useMemo(() => {
@@ -744,7 +749,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek } = usePlayer();
-  const hasEverPlayed = useRef3(false);
+  const hasEverPlayed = useRef2(false);
   useEffect3(() => {
     if (playing) {
       hasEverPlayed.current = true;
@@ -883,7 +888,7 @@ var calculateNextFrame = ({
 };
 
 // src/is-backgrounded.ts
-import { useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
 var getIsBackgrounded = () => {
   if (typeof document === "undefined") {
     return false;
@@ -891,7 +896,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef4(getIsBackgrounded());
+  const isBackgrounded = useRef3(getIsBackgrounded());
   useEffect4(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -905,7 +910,7 @@ var useIsBackgrounded = () => {
 };
 
 // src/set-global-time-anchor.ts
-import { Internals as Internals6 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 var ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
 var setGlobalTimeAnchor = ({
   audioContext,
@@ -923,7 +928,7 @@ var setGlobalTimeAnchor = ({
   if (Math.abs(shift) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency && !force) {
     return false;
   }
-  Internals6.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
+  Internals5.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
   audioSyncAnchor.value = newAnchor;
   return true;
 };
@@ -939,15 +944,15 @@ var usePlayback = ({
   getCurrentFrame,
   muted
 }) => {
-  const config = Internals7.useUnsafeVideoConfig();
-  const frame = Internals7.Timeline.useTimelinePosition();
+  const config = Internals6.useUnsafeVideoConfig();
+  const frame = Internals6.Timeline.useTimelinePosition();
   const { playing, pause, emitter, isPlaying } = usePlayer();
-  const setFrame = Internals7.Timeline.useTimelineSetFrame();
-  const sharedAudioContext = useContext4(Internals7.SharedAudioContext);
-  const logLevel = Internals7.useLogLevel();
+  const setFrame = Internals6.Timeline.useTimelineSetFrame();
+  const sharedAudioContext = useContext4(Internals6.SharedAudioContext);
+  const logLevel = Internals6.useLogLevel();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateTimestamp = useRef5(0);
-  const context = useContext4(Internals7.BufferingContextReact);
+  const lastTimeUpdateTimestamp = useRef4(0);
+  const context = useContext4(Internals6.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -1161,7 +1166,7 @@ var usePlayback = ({
 };
 
 // src/utils/use-element-size.ts
-import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
 var elementSizeHooks = [];
 var updateAllElementsSizes = () => {
   for (const listener of elementSizeHooks) {
@@ -1221,7 +1226,7 @@ var useElementSize = (ref, options) => {
       });
     });
   }, [options.shouldApplyCssTransforms]);
-  const updateSize = useCallback3(() => {
+  const updateSize = useCallback2(() => {
     if (!ref.current) {
       return;
     }
@@ -1291,10 +1296,10 @@ import {
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo14,
-  useRef as useRef12,
+  useRef as useRef11,
   useState as useState13
 } from "react";
-import { Composition, Internals as Internals16 } from "remotion";
+import { Composition, Internals as Internals15 } from "remotion";
 
 // src/player-css-classname.ts
 var playerCssClassname = (override) => {
@@ -1305,15 +1310,15 @@ var playerCssClassname = (override) => {
 import React10, {
   Suspense,
   forwardRef,
-  useCallback as useCallback11,
+  useCallback as useCallback10,
   useContext as useContext5,
   useEffect as useEffect12,
   useImperativeHandle,
   useMemo as useMemo12,
-  useRef as useRef11,
+  useRef as useRef10,
   useState as useState11
 } from "react";
-import { Internals as Internals12 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 
 // src/error-boundary.tsx
 import React3 from "react";
@@ -1438,7 +1443,7 @@ var RenderWarningIfBlacklist = () => {
 };
 
 // src/PlayerControls.tsx
-import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef9, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef8, useState as useState10 } from "react";
 
 // src/DefaultPlayPauseButton.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -1455,11 +1460,11 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
 };
 
 // src/MediaVolumeSlider.tsx
-import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef6, useState as useState6 } from "react";
-import { Internals as Internals8 } from "remotion";
+import { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import { Internals as Internals7 } from "remotion";
 
 // src/render-volume-slider.tsx
-import React5, { useCallback as useCallback4, useMemo as useMemo3, useState as useState5 } from "react";
+import React5, { useCallback as useCallback3, useMemo as useMemo3, useState as useState5 } from "react";
 import { random } from "remotion";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var KNOB_SIZE = 12;
@@ -1493,7 +1498,7 @@ var DefaultVolumeSlider = ({
   }, [isVertical]);
   const randomId = typeof React5.useId === "undefined" ? "volume-slider" : React5.useId();
   const [randomClass] = useState5(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
-  const onVolumeChange = useCallback4((e) => {
+  const onVolumeChange = useCallback3((e) => {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
   const inputStyle = useMemo3(() => {
@@ -1570,13 +1575,13 @@ var renderDefaultVolumeSlider = (props) => {
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var VOLUME_SLIDER_WIDTH = 100;
 var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
-  const [mediaMuted, setMediaMuted] = Internals8.useMediaMutedState();
-  const [mediaVolume, setMediaVolume] = Internals8.useMediaVolumeState();
+  const [mediaMuted, setMediaMuted] = Internals7.useMediaMutedState();
+  const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
   const [focused, setFocused] = useState6(false);
-  const parentDivRef = useRef6(null);
-  const inputRef = useRef6(null);
+  const parentDivRef = useRef5(null);
+  const inputRef = useRef5(null);
   const hover = useHoverState(parentDivRef, false);
-  const onBlur = useCallback5(() => {
+  const onBlur = useCallback4(() => {
     setTimeout(() => {
       if (inputRef.current && document.activeElement !== inputRef.current) {
         setFocused(false);
@@ -1584,7 +1589,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     }, 10);
   }, []);
   const isVolume0 = mediaVolume === 0;
-  const onClick = useCallback5(() => {
+  const onClick = useCallback4(() => {
     if (isVolume0) {
       setMediaVolume(1);
       setMediaMuted(false);
@@ -1615,7 +1620,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       padding: 0
     };
   }, []);
-  const renderDefaultMuteButton = useCallback5(({ muted, volume }) => {
+  const renderDefaultMuteButton = useCallback4(({ muted, volume }) => {
     const isMutedOrZero = muted || volume === 0;
     return /* @__PURE__ */ jsx8("button", {
       "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
@@ -1632,7 +1637,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     return renderMuteButton ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
   }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
   const volumeSlider = useMemo4(() => {
-    return (focused || hover) && !mediaMuted && !Internals8.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
+    return (focused || hover) && !mediaMuted && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
       onBlur: () => setFocused(false),
@@ -1659,14 +1664,14 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 };
 
 // src/PlaybackrateControl.tsx
-import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo5, useState as useState8 } from "react";
-import { Internals as Internals9 } from "remotion";
+import { useCallback as useCallback5, useEffect as useEffect9, 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 useRef7, useState as useState7 } from "react";
+import { useEffect as useEffect8, useRef as useRef6, useState as useState7 } from "react";
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
-  const ref = useRef7(null);
+  const ref = useRef6(null);
   useEffect8(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -1716,16 +1721,16 @@ var formatPlaybackRate = (rate) => {
   return str.includes(".") ? str : str + ".0";
 };
 var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
-  const onClick = useCallback6((e) => {
+  const onClick = useCallback5((e) => {
     e.stopPropagation();
     e.preventDefault();
     onSelect(rate);
   }, [onSelect, rate]);
   const [hovered, setHovered] = useState8(false);
-  const onMouseEnter = useCallback6(() => {
+  const onMouseEnter = useCallback5(() => {
     setHovered(true);
   }, []);
-  const onMouseLeave = useCallback6(() => {
+  const onMouseLeave = useCallback5(() => {
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
@@ -1752,7 +1757,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
   }, rate);
 };
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-  const { setPlaybackRate, playbackRate } = Internals9.usePlaybackRate();
+  const { setPlaybackRate, playbackRate } = Internals8.usePlaybackRate();
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
   useEffect9(() => {
     const listener = (e) => {
@@ -1792,7 +1797,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate,
     setIsComponentVisible
   ]);
-  const onSelect = useCallback6((rate) => {
+  const onSelect = useCallback5((rate) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
@@ -1854,8 +1859,8 @@ var button = {
 };
 var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
-  const { playbackRate } = Internals9.usePlaybackRate();
-  const onClick = useCallback6((e) => {
+  const { playbackRate } = Internals8.usePlaybackRate();
+  const onClick = useCallback5((e) => {
     e.stopPropagation();
     e.preventDefault();
     setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
@@ -1886,8 +1891,8 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef8, useState as useState9 } from "react";
-import { Internals as Internals10, interpolate } from "remotion";
+import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
+import { Internals as Internals9, interpolate } from "remotion";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
   const pos = clientX;
@@ -1924,19 +1929,19 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef8(null);
+  const containerRef = useRef7(null);
   const barHovered = useHoverState(containerRef, false);
   const size = useElementSize(containerRef, {
     triggerOnWindowResize: true,
     shouldApplyCssTransforms: true
   });
   const { seek, play, pause, playing } = usePlayer();
-  const frame = Internals10.Timeline.useTimelinePosition();
+  const frame = Internals9.Timeline.useTimelinePosition();
   const [dragging, setDragging] = useState9({
     dragging: false
   });
   const width = size?.width ?? 0;
-  const onPointerDown = useCallback7((e) => {
+  const onPointerDown = useCallback6((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -1950,7 +1955,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     });
     onSeekStart();
   }, [durationInFrames, width, pause, seek, playing, onSeekStart]);
-  const onPointerMove = useCallback7((e) => {
+  const onPointerMove = useCallback6((e) => {
     if (!size) {
       throw new Error("Player has no size");
     }
@@ -1961,7 +1966,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
     seek(_frame);
   }, [dragging.dragging, durationInFrames, seek, size]);
-  const onPointerUp = useCallback7(() => {
+  const onPointerUp = useCallback6(() => {
     setDragging({
       dragging: false
     });
@@ -2044,7 +2049,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
 
 // src/PlayerTimeLabel.tsx
 import { useMemo as useMemo7 } from "react";
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals10 } from "remotion";
 
 // src/format-time.ts
 var formatTime = (timeInSeconds) => {
@@ -2056,7 +2061,7 @@ var formatTime = (timeInSeconds) => {
 // src/PlayerTimeLabel.tsx
 import { jsxs as jsxs7 } from "react/jsx-runtime";
 var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
-  const frame = Internals11.Timeline.useTimelinePosition();
+  const frame = Internals10.Timeline.useTimelinePosition();
   const timeLabel = useMemo7(() => {
     return {
       color: "white",
@@ -2216,7 +2221,7 @@ var Controls = ({
   toggle,
   renderCustomControls
 }) => {
-  const playButtonRef = useRef9(null);
+  const playButtonRef = useRef8(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -2291,14 +2296,14 @@ var Controls = ({
     return null;
   }, [showPlaybackRateControl]);
   const customControlsElement = renderCustomControls ? renderCustomControls() : null;
-  const ref = useRef9(null);
-  const flexRef = useRef9(null);
-  const onPointerDownIfContainer = useCallback8((e) => {
+  const ref = useRef8(null);
+  const flexRef = useRef8(null);
+  const onPointerDownIfContainer = useCallback7((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
     }
   }, [onPointerDown]);
-  const onDoubleClickIfContainer = useCallback8((e) => {
+  const onDoubleClickIfContainer = useCallback7((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onDoubleClick?.(e);
     }
@@ -2406,7 +2411,7 @@ var Controls = ({
 var IS_NODE = typeof document === "undefined";
 
 // src/utils/use-click-prevention-on-double-click.ts
-import { useCallback as useCallback10, useMemo as useMemo11 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo11 } from "react";
 
 // src/utils/cancellable-promise.ts
 var cancellablePromise = (promise) => {
@@ -2434,16 +2439,16 @@ 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 useRef10 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo10, useRef as useRef9 } from "react";
 var useCancellablePromises = () => {
-  const pendingPromises = useRef10([]);
-  const appendPendingPromise = useCallback9((promise) => {
+  const pendingPromises = useRef9([]);
+  const appendPendingPromise = useCallback8((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
-  const removePendingPromise = useCallback9((promise) => {
+  const removePendingPromise = useCallback8((promise) => {
     pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
   }, []);
-  const clearPendingPromises = useCallback9(() => pendingPromises.current.map((p) => p.cancel()), []);
+  const clearPendingPromises = useCallback8(() => pendingPromises.current.map((p) => p.cancel()), []);
   const api = useMemo10(() => ({
     appendPendingPromise,
     removePendingPromise,
@@ -2455,7 +2460,7 @@ var useCancellablePromises = () => {
 // src/utils/use-click-prevention-on-double-click.ts
 var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
   const api = useCancellablePromises();
-  const handleClick = useCallback10(async (e) => {
+  const handleClick = useCallback9(async (e) => {
     if (e instanceof PointerEvent ? e.pointerType === "touch" : e.nativeEvent.pointerType === "touch") {
       onClick(e);
       return;
@@ -2475,14 +2480,14 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
       }
     }
   }, [api, onClick]);
-  const handlePointerDown = useCallback10(() => {
+  const handlePointerDown = useCallback9(() => {
     document.addEventListener("pointerup", (newEvt) => {
       handleClick(newEvt);
     }, {
       once: true
     });
   }, [handleClick]);
-  const handleDoubleClick = useCallback10(() => {
+  const handleDoubleClick = useCallback9(() => {
     api.clearPendingPromises();
     onDoubleClick();
   }, [api, onDoubleClick]);
@@ -2544,9 +2549,9 @@ var PlayerUI = ({
   overrideInternalClassName,
   noSuspense
 }, ref) => {
-  const config = Internals12.useUnsafeVideoConfig();
-  const video = Internals12.useVideo();
-  const container = useRef11(null);
+  const config = Internals11.useUnsafeVideoConfig();
+  const video = Internals11.useVideo();
+  const container = useRef10(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -2563,7 +2568,7 @@ var PlayerUI = ({
   }, []);
   const player = usePlayer();
   const playerToggle = player.toggle;
-  const { mediaMuted, mediaVolume } = useContext5(Internals12.MediaVolumeContext);
+  const { mediaMuted, mediaVolume } = useContext5(Internals11.MediaVolumeContext);
   useEffect12(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
@@ -2605,10 +2610,10 @@ var PlayerUI = ({
       document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
     };
   }, []);
-  const toggle = useCallback11((e) => {
+  const toggle = useCallback10((e) => {
     playerToggle(e);
   }, [playerToggle]);
-  const requestFullscreen = useCallback11(() => {
+  const requestFullscreen = useCallback10(() => {
     if (!allowFullscreen) {
       throw new Error("allowFullscreen is false");
     }
@@ -2624,7 +2629,7 @@ var PlayerUI = ({
       container.current.requestFullscreen();
     }
   }, [allowFullscreen, supportsFullScreen]);
-  const exitFullscreen = useCallback11(() => {
+  const exitFullscreen = useCallback10(() => {
     if (document.webkitExitFullscreen) {
       document.webkitExitFullscreen();
     } else {
@@ -2668,7 +2673,7 @@ var PlayerUI = ({
     });
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef11(false);
+  const initialScaleIgnored = useRef10(false);
   useEffect12(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
@@ -2676,7 +2681,7 @@ var PlayerUI = ({
     }
     player.emitter.dispatchScaleChange(scale);
   }, [player.emitter, scale]);
-  const { setMediaVolume, setMediaMuted } = useContext5(Internals12.SetMediaVolumeContext);
+  const { setMediaVolume, setMediaMuted } = useContext5(Internals11.SetMediaVolumeContext);
   const [showBufferIndicator, setShowBufferState] = useState11(false);
   useEffect12(() => {
     let timeout = null;
@@ -2817,32 +2822,32 @@ var PlayerUI = ({
   }, [config, layout, overflowVisible, scale]);
   const playerPause = player.pause;
   const playerDispatchError = player.emitter.dispatchError;
-  const onError = useCallback11((error) => {
+  const onError = useCallback10((error) => {
     playerPause();
     playerDispatchError(error);
   }, [playerDispatchError, playerPause]);
-  const onFullscreenButtonClick = useCallback11((e) => {
+  const onFullscreenButtonClick = useCallback10((e) => {
     e.stopPropagation();
     requestFullscreen();
   }, [requestFullscreen]);
-  const onExitFullscreenButtonClick = useCallback11((e) => {
+  const onExitFullscreenButtonClick = useCallback10((e) => {
     e.stopPropagation();
     exitFullscreen();
   }, [exitFullscreen]);
-  const onSingleClick = useCallback11((e) => {
+  const onSingleClick = useCallback10((e) => {
     const rightClick = e instanceof MouseEvent ? e.button === 2 : e.nativeEvent.button;
     if (rightClick) {
       return;
     }
     toggle(e);
   }, [toggle]);
-  const onSeekStart = useCallback11(() => {
+  const onSeekStart = useCallback10(() => {
     setSeeking(true);
   }, []);
-  const onSeekEnd = useCallback11(() => {
+  const onSeekEnd = useCallback10(() => {
     setSeeking(false);
   }, []);
-  const onDoubleClick = useCallback11(() => {
+  const onDoubleClick = useCallback10(() => {
     if (isFullscreen) {
       exitFullscreen();
     } else {
@@ -2902,7 +2907,7 @@ var PlayerUI = ({
               VideoComponent ? /* @__PURE__ */ jsx12(ErrorBoundary, {
                 onError,
                 errorFallback,
-                children: /* @__PURE__ */ jsx12(Internals12.CurrentScaleContext.Provider, {
+                children: /* @__PURE__ */ jsx12(Internals11.CurrentScaleContext.Provider, {
                   value: currentScale,
                   children: /* @__PURE__ */ jsx12(VideoComponent, {
                     ...video?.props ?? {},
@@ -2984,11 +2989,11 @@ var PlayerUI = ({
 var PlayerUI_default = forwardRef(PlayerUI);
 
 // src/SharedPlayerContext.tsx
-import { useCallback as useCallback12, useMemo as useMemo13, useState as useState12 } from "react";
-import { Internals as Internals14 } from "remotion";
+import { useCallback as useCallback11, useMemo as useMemo13, useState as useState12 } from "react";
+import { Internals as Internals13 } from "remotion";
 
 // src/volume-persistence.ts
-import { Internals as Internals13 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 var DEFAULT_VOLUME_PERSISTENCE_KEY = "remotion.volumePreference";
 var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   if (typeof window === "undefined") {
@@ -2997,7 +3002,7 @@ var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   try {
     window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTENCE_KEY, String(volume));
   } catch (e) {
-    Internals13.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
+    Internals12.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
   }
 };
 var getPreferredVolume = (volumePersistenceKey) => {
@@ -3085,7 +3090,7 @@ var SharedPlayerContexts = ({
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeAndPersist = useCallback12((vol) => {
+  const setMediaVolumeAndPersist = useCallback11((vol) => {
     setMediaVolume(vol);
     if (persistVolumeToStorage) {
       persistVolume(vol, logLevel, volumePersistenceKey ?? null);
@@ -3112,30 +3117,30 @@ var SharedPlayerContexts = ({
       isReadOnlyStudio: false
     };
   }, []);
-  return /* @__PURE__ */ jsx13(Internals14.RemotionEnvironmentContext.Provider, {
+  return /* @__PURE__ */ jsx13(Internals13.RemotionEnvironmentContext.Provider, {
     value: env,
-    children: /* @__PURE__ */ jsx13(Internals14.LogLevelContext.Provider, {
+    children: /* @__PURE__ */ jsx13(Internals13.LogLevelContext.Provider, {
       value: logLevelContext,
-      children: /* @__PURE__ */ jsx13(Internals14.CanUseRemotionHooksProvider, {
-        children: /* @__PURE__ */ jsx13(Internals14.AbsoluteTimeContext.Provider, {
+      children: /* @__PURE__ */ jsx13(Internals13.CanUseRemotionHooksProvider, {
+        children: /* @__PURE__ */ jsx13(Internals13.AbsoluteTimeContext.Provider, {
           value: timelineContext,
-          children: /* @__PURE__ */ jsx13(Internals14.PlaybackRateContext.Provider, {
+          children: /* @__PURE__ */ jsx13(Internals13.PlaybackRateContext.Provider, {
             value: playbackRateContext,
-            children: /* @__PURE__ */ jsx13(Internals14.TimelineContext.Provider, {
+            children: /* @__PURE__ */ jsx13(Internals13.TimelineContext.Provider, {
               value: timelineContext,
-              children: /* @__PURE__ */ jsx13(Internals14.CompositionManager.Provider, {
+              children: /* @__PURE__ */ jsx13(Internals13.CompositionManager.Provider, {
                 value: compositionManagerContext,
-                children: /* @__PURE__ */ jsx13(Internals14.PrefetchProvider, {
-                  children: /* @__PURE__ */ jsx13(Internals14.DurationsContextProvider, {
-                    children: /* @__PURE__ */ jsx13(Internals14.MediaVolumeContext.Provider, {
+                children: /* @__PURE__ */ jsx13(Internals13.PrefetchProvider, {
+                  children: /* @__PURE__ */ jsx13(Internals13.DurationsContextProvider, {
+                    children: /* @__PURE__ */ jsx13(Internals13.MediaVolumeContext.Provider, {
                       value: mediaVolumeContextValue,
-                      children: /* @__PURE__ */ jsx13(Internals14.SetMediaVolumeContext.Provider, {
+                      children: /* @__PURE__ */ jsx13(Internals13.SetMediaVolumeContext.Provider, {
                         value: setMediaVolumeContextValue,
-                        children: /* @__PURE__ */ jsx13(Internals14.BufferingProvider, {
-                          children: /* @__PURE__ */ jsx13(Internals14.SharedAudioContextProvider, {
+                        children: /* @__PURE__ */ jsx13(Internals13.BufferingProvider, {
+                          children: /* @__PURE__ */ jsx13(Internals13.SharedAudioContextProvider, {
                             audioLatencyHint,
                             audioEnabled,
-                            children: /* @__PURE__ */ jsx13(Internals14.SharedAudioTagsContextProvider, {
+                            children: /* @__PURE__ */ jsx13(Internals13.SharedAudioTagsContextProvider, {
                               numberOfAudioTags: numberOfSharedAudioTags,
                               children
                             })
@@ -3155,7 +3160,7 @@ var SharedPlayerContexts = ({
 };
 
 // src/use-remotion-license-acknowledge.ts
-import { Internals as Internals15 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 var warningShown = false;
 var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
   if (acknowledge) {
@@ -3165,7 +3170,7 @@ var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
     return;
   }
   warningShown = true;
-  Internals15.Log.warn({ logLevel, tag: null }, "Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license\nPass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear.");
+  Internals14.Log.warn({ logLevel, tag: null }, "Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license\nPass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear.");
 };
 
 // src/utils/validate-in-out-frame.ts
@@ -3340,7 +3345,7 @@ var PlayerFn = ({
     throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
   }
   useState13(() => acknowledgeRemotionLicenseMessage(Boolean(acknowledgeRemotionLicense), logLevel));
-  const component = Internals16.useLazyComponent({
+  const component = Internals15.useLazyComponent({
     compProps: componentProps,
     componentName: "Player",
     noSuspense: Boolean(noSuspense)
@@ -3351,9 +3356,9 @@ var PlayerFn = ({
   }));
   const [playing, setPlaying] = useState13(false);
   const [rootId] = useState13("player-comp");
-  const rootRef = useRef12(null);
-  const audioAndVideoTags = useRef12([]);
-  const imperativePlaying = useRef12(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`);
@@ -3413,7 +3418,7 @@ var PlayerFn = ({
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
   useState13(() => {
-    Internals16.playbackLogging({
+    Internals15.playbackLogging({
       logLevel,
       message: `[player] Mounting <Player>. User agent = ${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
       tag: "player",
@@ -3443,7 +3448,7 @@ var PlayerFn = ({
   }, [setFrame]);
   if (typeof window !== "undefined") {
     useLayoutEffect3(() => {
-      Internals16.CSSUtils.injectCSS(Internals16.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
+      Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
   const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
@@ -3452,7 +3457,7 @@ var PlayerFn = ({
       mode: "prevent-media-session"
     };
   }, [passedBrowserMediaControlsBehavior]);
-  return /* @__PURE__ */ jsx14(Internals16.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx14(Internals15.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
       playbackRateContext: playbackRateContextValue,
@@ -3469,7 +3474,7 @@ var PlayerFn = ({
       initialVolume,
       inputProps: actualInputProps,
       audioEnabled: true,
-      children: /* @__PURE__ */ jsx14(Internals16.SetTimelineContext.Provider, {
+      children: /* @__PURE__ */ jsx14(Internals15.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
         children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {
           currentPlaybackRate,
@@ -3527,21 +3532,21 @@ import {
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo17,
-  useRef as useRef14,
+  useRef as useRef13,
   useState as useState14
 } from "react";
-import { Internals as Internals18, random as random2 } from "remotion";
+import { Internals as Internals17, random as random2 } from "remotion";
 
 // src/ThumbnailUI.tsx
 import React13, {
   forwardRef as forwardRef3,
   Suspense as Suspense2,
-  useCallback as useCallback13,
+  useCallback as useCallback12,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo16,
-  useRef as useRef13
+  useRef as useRef12
 } from "react";
-import { Internals as Internals17 } from "remotion";
+import { Internals as Internals16 } from "remotion";
 
 // src/use-thumbnail.ts
 import { useContext as useContext6, useMemo as useMemo15 } from "react";
@@ -3575,9 +3580,9 @@ var ThumbnailUI = ({
   noSuspense,
   overrideInternalClassName
 }, ref) => {
-  const config = Internals17.useUnsafeVideoConfig();
-  const video = Internals17.useVideo();
-  const container = useRef13(null);
+  const config = Internals16.useUnsafeVideoConfig();
+  const video = Internals16.useVideo();
+  const container = useRef12(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -3624,7 +3629,7 @@ var ThumbnailUI = ({
       overflowVisible
     });
   }, [config, layout, overflowVisible, scale]);
-  const onError = useCallback13((error) => {
+  const onError = useCallback12((error) => {
     thumbnail.emitter.dispatchError(error);
   }, [thumbnail.emitter]);
   const loadingMarkup = useMemo16(() => {
@@ -3651,7 +3656,7 @@ var ThumbnailUI = ({
       children: VideoComponent ? /* @__PURE__ */ jsx15(ErrorBoundary, {
         onError,
         errorFallback,
-        children: /* @__PURE__ */ jsx15(Internals17.CurrentScaleContext.Provider, {
+        children: /* @__PURE__ */ jsx15(Internals16.CurrentScaleContext.Provider, {
           value: currentScaleContext,
           children: /* @__PURE__ */ jsx15(VideoComponent, {
             ...video?.props ?? {},
@@ -3706,7 +3711,7 @@ var ThumbnailFn = ({
     }, []);
   }
   const [thumbnailId] = useState14(() => String(random2(null)));
-  const rootRef = useRef14(null);
+  const rootRef = useRef13(null);
   const timelineState = useMemo17(() => {
     const value = {
       playing: false,
@@ -3730,7 +3735,7 @@ var ThumbnailFn = ({
     };
   }, []);
   useImperativeHandle4(ref, () => rootRef.current, []);
-  const Component = Internals18.useLazyComponent({
+  const Component = Internals17.useLazyComponent({
     compProps: componentProps,
     componentName: "Thumbnail",
     noSuspense: Boolean(noSuspense)
@@ -3739,7 +3744,7 @@ var ThumbnailFn = ({
   const passedInputProps = useMemo17(() => {
     return inputProps ?? {};
   }, [inputProps]);
-  return /* @__PURE__ */ jsx16(Internals18.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx16(Internals17.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
       timelineContext: timelineState,
       playbackRateContext,
@@ -3785,8 +3790,7 @@ var PlayerInternals = {
   useHoverState,
   updateAllElementsSizes,
   PlayerEmitterProvider,
-  BufferingIndicator,
-  useFrameImperative
+  BufferingIndicator
 };
 export {
   Thumbnail,

package/package.json

@@ -3,12 +3,11 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.460",
+	"version": "4.0.462",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
 	"module": "dist/esm/index.mjs",
-	"sideEffects": false,
 	"scripts": {
 		"formatting": "oxfmt src --check",
 		"format": "oxfmt src",
@@ -36,7 +35,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.460"
+		"remotion": "4.0.462"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -45,12 +44,12 @@
 	"devDependencies": {
 		"@testing-library/react": "16.1.0",
 		"@happy-dom/global-registrator": "14.5.1",
-		"csstype": "^3.1.1",
+		"csstype": "3.2.3",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.460",
+		"@remotion/eslint-config-internal": "4.0.462",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/cjs/use-frame-imperative.d.ts

@@ -1,2 +0,0 @@
-export type GetCurrentFrame = () => number;
-export declare const useFrameImperative: () => GetCurrentFrame;

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

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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 getCurrentFrame = (0, react_1.useCallback)(() => {
-        return frameRef.current;
-    }, []);
-    return getCurrentFrame;
-};
-exports.useFrameImperative = useFrameImperative;