@remotion/promo-pages 4.0.391 → 4.0.392

package/dist/Homepage.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.392", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,9 +1582,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
-}, useTimelineFrameRef = () => {
-  const { frameRef } = useContext6(TimelineContext);
-  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1769,7 +1766,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
-  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1805,8 +1801,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags,
-      frameRef
+      audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -6800,7 +6795,6 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
-    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6898,7 +6892,6 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
-    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",
@@ -20541,12 +20534,12 @@ import React41 from "react";
 import { useContext as useContext210, useEffect as useEffect36, useState as useState35 } from "react";
 import { useContext as useContext40, useLayoutEffect as useLayoutEffect15 } from "react";
 import { jsx as jsx310 } from "react/jsx-runtime";
-import { useCallback as useCallback27 } from "react";
+import { useCallback as useCallback27, useRef as useRef33 } from "react";
 import { useEffect as useEffect210, useState as useState210 } from "react";
-import { useContext as useContext42, useEffect as useEffect52, useRef as useRef33 } from "react";
+import { useContext as useContext42, useEffect as useEffect52, useRef as useRef42 } from "react";
 import { useEffect as useEffect37 } from "react";
-import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef34, useState as useState36 } from "react";
-import { useEffect as useEffect42, useRef as useRef24 } from "react";
+import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef24, useState as useState36 } from "react";
+import { useEffect as useEffect42, useRef as useRef34 } from "react";
 import { useCallback as useCallback32, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef26,
@@ -20554,7 +20547,7 @@ import {
   useImperativeHandle as useImperativeHandle22,
   useLayoutEffect as useLayoutEffect23,
   useMemo as useMemo142,
-  useRef as useRef102,
+  useRef as useRef112,
   useState as useState132
 } from "react";
 import React102, {
@@ -20565,12 +20558,12 @@ import React102, {
   useEffect as useEffect122,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo122,
-  useRef as useRef92,
+  useRef as useRef102,
   useState as useState113
 } from "react";
-import { useCallback as useCallback82, useEffect as useEffect102, useMemo as useMemo92, useRef as useRef72, useState as useState102 } from "react";
+import { useCallback as useCallback82, useEffect as useEffect102, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
-import { useCallback as useCallback52, useMemo as useMemo43, useRef as useRef42, useState as useState62 } from "react";
+import { useCallback as useCallback52, useMemo as useMemo43, useRef as useRef52, useState as useState62 } from "react";
 import React38, { useCallback as useCallback42, useMemo as useMemo34, useState as useState52 } from "react";
 import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
@@ -20581,9 +20574,9 @@ import {
   useMemo as useMemo52,
   useState as useState82
 } from "react";
-import { useEffect as useEffect72, useRef as useRef52, useState as useState72 } from "react";
+import { useEffect as useEffect72, useRef as useRef62, useState as useState72 } from "react";
 import { jsx as jsx74, jsxs as jsxs52 } from "react/jsx-runtime";
-import { useCallback as useCallback72, useEffect as useEffect92, useMemo as useMemo62, useRef as useRef62, useState as useState92 } from "react";
+import { useCallback as useCallback72, useEffect as useEffect92, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
 import { jsx as jsx84, jsxs as jsxs62 } from "react/jsx-runtime";
 import { useMemo as useMemo72 } from "react";
 import { jsxs as jsxs7 } from "react/jsx-runtime";
@@ -20594,7 +20587,7 @@ import { jsx as jsx104 } from "react/jsx-runtime";
 import React92, { useEffect as useEffect112 } from "react";
 import { jsx as jsx113 } from "react/jsx-runtime";
 import { useCallback as useCallback102, useMemo as useMemo112 } from "react";
-import { useCallback as useCallback92, useMemo as useMemo102, useRef as useRef82 } from "react";
+import { useCallback as useCallback92, useMemo as useMemo102, useRef as useRef92 } from "react";
 import { jsx as jsx123, jsxs as jsxs92, Fragment as Fragment32 } from "react/jsx-runtime";
 import { useCallback as useCallback122, useMemo as useMemo132, useState as useState122 } from "react";
 import { jsx as jsx133 } from "react/jsx-runtime";
@@ -21235,7 +21228,7 @@ import {
   useImperativeHandle as useImperativeHandle42,
   useLayoutEffect as useLayoutEffect33,
   useMemo as useMemo172,
-  useRef as useRef122,
+  useRef as useRef132,
   useState as useState142
 } from "react";
 import React132, {
@@ -21244,7 +21237,7 @@ import React132, {
   useCallback as useCallback132,
   useImperativeHandle as useImperativeHandle32,
   useMemo as useMemo162,
-  useRef as useRef112
+  useRef as useRef122
 } from "react";
 import { useContext as useContext72, useMemo as useMemo152 } from "react";
 import { jsx as jsx153 } from "react/jsx-runtime";
@@ -21762,12 +21755,12 @@ var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState36(false);
   const frame = Internals.Timeline.useTimelinePosition();
-  const playStart = useRef34(frame);
+  const playStart = useRef24(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
   const audioContext = useContext37(Internals.SharedAudioContext);
   const { audioAndVideoTags } = useContext37(Internals.TimelineContext);
-  const frameRef = Internals.Timeline.useTimelineFrameRef();
+  const frameRef = useRef24(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
@@ -21783,16 +21776,13 @@ var usePlayer = () => {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
   const { buffering } = bufferingContext;
-  const setFrameAndImperative = useCallback28((newFrame, videoIdToSet) => {
-    setTimelinePosition((c) => ({ ...c, [videoIdToSet]: newFrame }));
-    frameRef.current = newFrame;
-  }, [frameRef, setTimelinePosition]);
   const seek2 = useCallback28((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 = useCallback28((e) => {
     if (imperativePlaying.current) {
       return;
@@ -21817,8 +21807,7 @@ var usePlayer = () => {
     setPlaying,
     emitter,
     seek2,
-    audioAndVideoTags,
-    frameRef
+    audioAndVideoTags
   ]);
   const pause = useCallback28(() => {
     if (imperativePlaying.current) {
@@ -21841,14 +21830,7 @@ var usePlayer = () => {
         emitter.dispatchPause();
       }
     }
-  }, [
-    config,
-    emitter,
-    imperativePlaying,
-    setPlaying,
-    setTimelinePosition,
-    frameRef
-  ]);
+  }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
   const videoId = video?.id;
   const frameBack = useCallback28((frames) => {
     if (!videoId) {
@@ -21906,15 +21888,12 @@ var usePlayer = () => {
       pause,
       seek: seek2,
       isFirstFrame,
-      getCurrentFrame: () => {
-        return frameRef.current;
-      },
+      getCurrentFrame: () => frameRef.current,
       isPlaying: () => imperativePlaying.current,
       isBuffering: () => buffering.current,
       pauseAndReturnToPlayStart,
       hasPlayed,
-      toggle,
-      setFrameAndImperative
+      toggle
     };
   }, [
     buffering,
@@ -21930,9 +21909,7 @@ var usePlayer = () => {
     play,
     playing,
     seek2,
-    toggle,
-    setFrameAndImperative,
-    frameRef
+    toggle
   ]);
   return returnValue;
 };
@@ -22078,7 +22055,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef24(getIsBackgrounded());
+  const isBackgrounded = useRef34(getIsBackgrounded());
   useEffect42(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -22101,9 +22078,10 @@ var usePlayback = ({
 }) => {
   const config = Internals.useUnsafeVideoConfig();
   const frame = Internals.Timeline.useTimelinePosition();
-  const { playing, pause, emitter, setFrameAndImperative } = usePlayer();
+  const { playing, pause, emitter } = usePlayer();
+  const setFrame = Internals.Timeline.useTimelineSetFrame();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateEvent = useRef33(null);
+  const lastTimeUpdateEvent = useRef42(null);
   const context = useContext42(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
@@ -22157,7 +22135,7 @@ var usePlayback = ({
       });
       framesAdvanced += framesToAdvance;
       if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded)) {
-        setFrameAndImperative(nextFrame, config.id);
+        setFrame((c) => ({ ...c, [config.id]: nextFrame }));
       }
       if (hasEnded) {
         stop();
@@ -22204,7 +22182,7 @@ var usePlayback = ({
     loop,
     pause,
     playing,
-    setFrameAndImperative,
+    setFrame,
     emitter,
     playbackRate,
     inFrame,
@@ -22462,8 +22440,8 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
   const [mediaMuted, setMediaMuted] = Internals.useMediaMutedState();
   const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
   const [focused, setFocused] = useState62(false);
-  const parentDivRef = useRef42(null);
-  const inputRef = useRef42(null);
+  const parentDivRef = useRef52(null);
+  const inputRef = useRef52(null);
   const hover = useHoverState(parentDivRef, false);
   const onBlur = useCallback52(() => {
     setTimeout(() => {
@@ -22548,7 +22526,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 };
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState72(initialIsVisible);
-  const ref = useRef52(null);
+  const ref = useRef62(null);
   useEffect72(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -22798,7 +22776,7 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef62(null);
+  const containerRef = useRef72(null);
   const barHovered = useHoverState(containerRef, false);
   const size4 = useElementSize(containerRef, {
     triggerOnWindowResize: true,
@@ -23074,7 +23052,7 @@ var Controls = ({
   playing,
   toggle
 }) => {
-  const playButtonRef = useRef72(null);
+  const playButtonRef = useRef82(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState102(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -23148,8 +23126,8 @@ var Controls = ({
     }
     return null;
   }, [showPlaybackRateControl]);
-  const ref = useRef72(null);
-  const flexRef = useRef72(null);
+  const ref = useRef82(null);
+  const flexRef = useRef82(null);
   const onPointerDownIfContainer = useCallback82((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
@@ -23394,7 +23372,7 @@ var cancellablePromise = (promise) => {
 };
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 var useCancellablePromises = () => {
-  const pendingPromises = useRef82([]);
+  const pendingPromises = useRef92([]);
   const appendPendingPromise = useCallback92((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
@@ -23498,7 +23476,7 @@ var PlayerUI = ({
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
   const video = Internals.useVideo();
-  const container4 = useRef92(null);
+  const container4 = useRef102(null);
   const canvasSize = useElementSize(container4, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -23609,7 +23587,7 @@ var PlayerUI = ({
     });
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef92(false);
+  const initialScaleIgnored = useRef102(false);
   useEffect122(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
@@ -24257,9 +24235,9 @@ var PlayerFn = ({
   }));
   const [playing, setPlaying] = useState132(false);
   const [rootId] = useState132("player-comp");
-  const rootRef = useRef102(null);
-  const audioAndVideoTags = useRef102([]);
-  const imperativePlaying = useRef102(false);
+  const rootRef = useRef112(null);
+  const audioAndVideoTags = useRef112([]);
+  const imperativePlaying = useRef112(false);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState132(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -24323,7 +24301,6 @@ var PlayerFn = ({
   const timelineContextValue = useMemo142(() => {
     return {
       frame,
-      frameRef: { current: frame[PLAYER_COMP_ID] },
       playing,
       rootId,
       playbackRate: currentPlaybackRate,
@@ -24445,7 +24422,7 @@ var ThumbnailUI = ({
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
   const video = Internals.useVideo();
-  const container4 = useRef112(null);
+  const container4 = useRef122(null);
   const canvasSize = useElementSize(container4, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -24571,10 +24548,9 @@ var ThumbnailFn = ({
     }, []);
   }
   const [thumbnailId] = useState142(() => String(random(null)));
-  const rootRef = useRef122(null);
+  const rootRef = useRef132(null);
   const timelineState = useMemo172(() => {
     const value = {
-      frameRef: { current: frameToDisplay },
       playing: false,
       frame: {
         [PLAYER_COMP_ID]: frameToDisplay
@@ -25429,7 +25405,7 @@ import {
 
 // src/components/homepage/Demo/Card.tsx
 init_esm();
-import { useCallback as useCallback31, useRef as useRef36 } from "react";
+import { useCallback as useCallback31, useRef as useRef35 } from "react";
 
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -25527,7 +25503,7 @@ var Card2 = ({
   onClickRight
 }) => {
   const refToUse = refsToUse[index2];
-  const stopPrevious = useRef36([]);
+  const stopPrevious = useRef35([]);
   let newIndices = [...indices];
   const applyPositions = useCallback31((except) => {
     let stopped = false;

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/Homepage.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.392", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,9 +1582,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
-}, useTimelineFrameRef = () => {
-  const { frameRef } = useContext6(TimelineContext);
-  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1769,7 +1766,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
-  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1805,8 +1801,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags,
-      frameRef
+      audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -6800,7 +6795,6 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
-    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6898,7 +6892,6 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
-    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",
@@ -20541,12 +20534,12 @@ import React41 from "react";
 import { useContext as useContext210, useEffect as useEffect36, useState as useState35 } from "react";
 import { useContext as useContext40, useLayoutEffect as useLayoutEffect15 } from "react";
 import { jsx as jsx310 } from "react/jsx-runtime";
-import { useCallback as useCallback27 } from "react";
+import { useCallback as useCallback27, useRef as useRef33 } from "react";
 import { useEffect as useEffect210, useState as useState210 } from "react";
-import { useContext as useContext42, useEffect as useEffect52, useRef as useRef33 } from "react";
+import { useContext as useContext42, useEffect as useEffect52, useRef as useRef42 } from "react";
 import { useEffect as useEffect37 } from "react";
-import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef34, useState as useState36 } from "react";
-import { useEffect as useEffect42, useRef as useRef24 } from "react";
+import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef24, useState as useState36 } from "react";
+import { useEffect as useEffect42, useRef as useRef34 } from "react";
 import { useCallback as useCallback32, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef26,
@@ -20554,7 +20547,7 @@ import {
   useImperativeHandle as useImperativeHandle22,
   useLayoutEffect as useLayoutEffect23,
   useMemo as useMemo142,
-  useRef as useRef102,
+  useRef as useRef112,
   useState as useState132
 } from "react";
 import React102, {
@@ -20565,12 +20558,12 @@ import React102, {
   useEffect as useEffect122,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo122,
-  useRef as useRef92,
+  useRef as useRef102,
   useState as useState113
 } from "react";
-import { useCallback as useCallback82, useEffect as useEffect102, useMemo as useMemo92, useRef as useRef72, useState as useState102 } from "react";
+import { useCallback as useCallback82, useEffect as useEffect102, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
-import { useCallback as useCallback52, useMemo as useMemo43, useRef as useRef42, useState as useState62 } from "react";
+import { useCallback as useCallback52, useMemo as useMemo43, useRef as useRef52, useState as useState62 } from "react";
 import React38, { useCallback as useCallback42, useMemo as useMemo34, useState as useState52 } from "react";
 import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
@@ -20581,9 +20574,9 @@ import {
   useMemo as useMemo52,
   useState as useState82
 } from "react";
-import { useEffect as useEffect72, useRef as useRef52, useState as useState72 } from "react";
+import { useEffect as useEffect72, useRef as useRef62, useState as useState72 } from "react";
 import { jsx as jsx74, jsxs as jsxs52 } from "react/jsx-runtime";
-import { useCallback as useCallback72, useEffect as useEffect92, useMemo as useMemo62, useRef as useRef62, useState as useState92 } from "react";
+import { useCallback as useCallback72, useEffect as useEffect92, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
 import { jsx as jsx84, jsxs as jsxs62 } from "react/jsx-runtime";
 import { useMemo as useMemo72 } from "react";
 import { jsxs as jsxs7 } from "react/jsx-runtime";
@@ -20594,7 +20587,7 @@ import { jsx as jsx104 } from "react/jsx-runtime";
 import React92, { useEffect as useEffect112 } from "react";
 import { jsx as jsx113 } from "react/jsx-runtime";
 import { useCallback as useCallback102, useMemo as useMemo112 } from "react";
-import { useCallback as useCallback92, useMemo as useMemo102, useRef as useRef82 } from "react";
+import { useCallback as useCallback92, useMemo as useMemo102, useRef as useRef92 } from "react";
 import { jsx as jsx123, jsxs as jsxs92, Fragment as Fragment32 } from "react/jsx-runtime";
 import { useCallback as useCallback122, useMemo as useMemo132, useState as useState122 } from "react";
 import { jsx as jsx133 } from "react/jsx-runtime";
@@ -21235,7 +21228,7 @@ import {
   useImperativeHandle as useImperativeHandle42,
   useLayoutEffect as useLayoutEffect33,
   useMemo as useMemo172,
-  useRef as useRef122,
+  useRef as useRef132,
   useState as useState142
 } from "react";
 import React132, {
@@ -21244,7 +21237,7 @@ import React132, {
   useCallback as useCallback132,
   useImperativeHandle as useImperativeHandle32,
   useMemo as useMemo162,
-  useRef as useRef112
+  useRef as useRef122
 } from "react";
 import { useContext as useContext72, useMemo as useMemo152 } from "react";
 import { jsx as jsx153 } from "react/jsx-runtime";
@@ -21762,12 +21755,12 @@ var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState36(false);
   const frame = Internals.Timeline.useTimelinePosition();
-  const playStart = useRef34(frame);
+  const playStart = useRef24(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
   const audioContext = useContext37(Internals.SharedAudioContext);
   const { audioAndVideoTags } = useContext37(Internals.TimelineContext);
-  const frameRef = Internals.Timeline.useTimelineFrameRef();
+  const frameRef = useRef24(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
@@ -21783,16 +21776,13 @@ var usePlayer = () => {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
   const { buffering } = bufferingContext;
-  const setFrameAndImperative = useCallback28((newFrame, videoIdToSet) => {
-    setTimelinePosition((c) => ({ ...c, [videoIdToSet]: newFrame }));
-    frameRef.current = newFrame;
-  }, [frameRef, setTimelinePosition]);
   const seek2 = useCallback28((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 = useCallback28((e) => {
     if (imperativePlaying.current) {
       return;
@@ -21817,8 +21807,7 @@ var usePlayer = () => {
     setPlaying,
     emitter,
     seek2,
-    audioAndVideoTags,
-    frameRef
+    audioAndVideoTags
   ]);
   const pause = useCallback28(() => {
     if (imperativePlaying.current) {
@@ -21841,14 +21830,7 @@ var usePlayer = () => {
         emitter.dispatchPause();
       }
     }
-  }, [
-    config,
-    emitter,
-    imperativePlaying,
-    setPlaying,
-    setTimelinePosition,
-    frameRef
-  ]);
+  }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
   const videoId = video?.id;
   const frameBack = useCallback28((frames) => {
     if (!videoId) {
@@ -21906,15 +21888,12 @@ var usePlayer = () => {
       pause,
       seek: seek2,
       isFirstFrame,
-      getCurrentFrame: () => {
-        return frameRef.current;
-      },
+      getCurrentFrame: () => frameRef.current,
       isPlaying: () => imperativePlaying.current,
       isBuffering: () => buffering.current,
       pauseAndReturnToPlayStart,
       hasPlayed,
-      toggle,
-      setFrameAndImperative
+      toggle
     };
   }, [
     buffering,
@@ -21930,9 +21909,7 @@ var usePlayer = () => {
     play,
     playing,
     seek2,
-    toggle,
-    setFrameAndImperative,
-    frameRef
+    toggle
   ]);
   return returnValue;
 };
@@ -22078,7 +22055,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef24(getIsBackgrounded());
+  const isBackgrounded = useRef34(getIsBackgrounded());
   useEffect42(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -22101,9 +22078,10 @@ var usePlayback = ({
 }) => {
   const config = Internals.useUnsafeVideoConfig();
   const frame = Internals.Timeline.useTimelinePosition();
-  const { playing, pause, emitter, setFrameAndImperative } = usePlayer();
+  const { playing, pause, emitter } = usePlayer();
+  const setFrame = Internals.Timeline.useTimelineSetFrame();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateEvent = useRef33(null);
+  const lastTimeUpdateEvent = useRef42(null);
   const context = useContext42(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
@@ -22157,7 +22135,7 @@ var usePlayback = ({
       });
       framesAdvanced += framesToAdvance;
       if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded)) {
-        setFrameAndImperative(nextFrame, config.id);
+        setFrame((c) => ({ ...c, [config.id]: nextFrame }));
       }
       if (hasEnded) {
         stop();
@@ -22204,7 +22182,7 @@ var usePlayback = ({
     loop,
     pause,
     playing,
-    setFrameAndImperative,
+    setFrame,
     emitter,
     playbackRate,
     inFrame,
@@ -22462,8 +22440,8 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
   const [mediaMuted, setMediaMuted] = Internals.useMediaMutedState();
   const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
   const [focused, setFocused] = useState62(false);
-  const parentDivRef = useRef42(null);
-  const inputRef = useRef42(null);
+  const parentDivRef = useRef52(null);
+  const inputRef = useRef52(null);
   const hover = useHoverState(parentDivRef, false);
   const onBlur = useCallback52(() => {
     setTimeout(() => {
@@ -22548,7 +22526,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 };
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState72(initialIsVisible);
-  const ref = useRef52(null);
+  const ref = useRef62(null);
   useEffect72(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -22798,7 +22776,7 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef62(null);
+  const containerRef = useRef72(null);
   const barHovered = useHoverState(containerRef, false);
   const size4 = useElementSize(containerRef, {
     triggerOnWindowResize: true,
@@ -23074,7 +23052,7 @@ var Controls = ({
   playing,
   toggle
 }) => {
-  const playButtonRef = useRef72(null);
+  const playButtonRef = useRef82(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState102(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -23148,8 +23126,8 @@ var Controls = ({
     }
     return null;
   }, [showPlaybackRateControl]);
-  const ref = useRef72(null);
-  const flexRef = useRef72(null);
+  const ref = useRef82(null);
+  const flexRef = useRef82(null);
   const onPointerDownIfContainer = useCallback82((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
@@ -23394,7 +23372,7 @@ var cancellablePromise = (promise) => {
 };
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 var useCancellablePromises = () => {
-  const pendingPromises = useRef82([]);
+  const pendingPromises = useRef92([]);
   const appendPendingPromise = useCallback92((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
@@ -23498,7 +23476,7 @@ var PlayerUI = ({
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
   const video = Internals.useVideo();
-  const container4 = useRef92(null);
+  const container4 = useRef102(null);
   const canvasSize = useElementSize(container4, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -23609,7 +23587,7 @@ var PlayerUI = ({
     });
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef92(false);
+  const initialScaleIgnored = useRef102(false);
   useEffect122(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
@@ -24257,9 +24235,9 @@ var PlayerFn = ({
   }));
   const [playing, setPlaying] = useState132(false);
   const [rootId] = useState132("player-comp");
-  const rootRef = useRef102(null);
-  const audioAndVideoTags = useRef102([]);
-  const imperativePlaying = useRef102(false);
+  const rootRef = useRef112(null);
+  const audioAndVideoTags = useRef112([]);
+  const imperativePlaying = useRef112(false);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState132(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -24323,7 +24301,6 @@ var PlayerFn = ({
   const timelineContextValue = useMemo142(() => {
     return {
       frame,
-      frameRef: { current: frame[PLAYER_COMP_ID] },
       playing,
       rootId,
       playbackRate: currentPlaybackRate,
@@ -24445,7 +24422,7 @@ var ThumbnailUI = ({
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
   const video = Internals.useVideo();
-  const container4 = useRef112(null);
+  const container4 = useRef122(null);
   const canvasSize = useElementSize(container4, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -24571,10 +24548,9 @@ var ThumbnailFn = ({
     }, []);
   }
   const [thumbnailId] = useState142(() => String(random(null)));
-  const rootRef = useRef122(null);
+  const rootRef = useRef132(null);
   const timelineState = useMemo172(() => {
     const value = {
-      frameRef: { current: frameToDisplay },
       playing: false,
       frame: {
         [PLAYER_COMP_ID]: frameToDisplay
@@ -25429,7 +25405,7 @@ import {
 
 // src/components/homepage/Demo/Card.tsx
 init_esm();
-import { useCallback as useCallback31, useRef as useRef36 } from "react";
+import { useCallback as useCallback31, useRef as useRef35 } from "react";
 
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -25527,7 +25503,7 @@ var Card2 = ({
   onClickRight
 }) => {
   const refToUse = refsToUse[index2];
-  const stopPrevious = useRef36([]);
+  const stopPrevious = useRef35([]);
   let newIndices = [...indices];
   const applyPositions = useCallback31((except) => {
     let stopped = false;

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/design.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.392", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,9 +1582,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
-}, useTimelineFrameRef = () => {
-  const { frameRef } = useContext6(TimelineContext);
-  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1769,7 +1766,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
-  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1805,8 +1801,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags,
-      frameRef
+      audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -6800,7 +6795,6 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
-    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6898,7 +6892,6 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
-    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/homepage/Pricing.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.392", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,9 +1582,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
-}, useTimelineFrameRef = () => {
-  const { frameRef } = useContext6(TimelineContext);
-  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1769,7 +1766,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
-  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1805,8 +1801,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags,
-      frameRef
+      audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -6800,7 +6795,6 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
-    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6898,7 +6892,6 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
-    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.392", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,9 +1582,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
-}, useTimelineFrameRef = () => {
-  const { frameRef } = useContext6(TimelineContext);
-  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1769,7 +1766,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
-  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1805,8 +1801,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags,
-      frameRef
+      audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -6800,7 +6795,6 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
-    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6898,7 +6892,6 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
-    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/templates.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.392", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,9 +1582,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
-}, useTimelineFrameRef = () => {
-  const { frameRef } = useContext6(TimelineContext);
-  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1769,7 +1766,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
-  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1805,8 +1801,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags,
-      frameRef
+      audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -6800,7 +6795,6 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
-    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6898,7 +6892,6 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
-    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",

package/dist/design.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.392", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,9 +1582,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
-}, useTimelineFrameRef = () => {
-  const { frameRef } = useContext6(TimelineContext);
-  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1769,7 +1766,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
-  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1805,8 +1801,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags,
-      frameRef
+      audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -6800,7 +6795,6 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
-    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6898,7 +6892,6 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
-    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",

package/dist/homepage/Pricing.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.392", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,9 +1582,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
-}, useTimelineFrameRef = () => {
-  const { frameRef } = useContext6(TimelineContext);
-  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1769,7 +1766,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
-  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1805,8 +1801,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags,
-      frameRef
+      audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -6800,7 +6795,6 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
-    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6898,7 +6892,6 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
-    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",

package/dist/template-modal-content.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.392", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,9 +1582,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
-}, useTimelineFrameRef = () => {
-  const { frameRef } = useContext6(TimelineContext);
-  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1769,7 +1766,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
-  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1805,8 +1801,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags,
-      frameRef
+      audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -6800,7 +6795,6 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
-    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6898,7 +6892,6 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
-    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",

package/dist/templates.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.392", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,9 +1582,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
-}, useTimelineFrameRef = () => {
-  const { frameRef } = useContext6(TimelineContext);
-  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1769,7 +1766,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
-  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1805,8 +1801,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags,
-      frameRef
+      audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -6800,7 +6795,6 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
-    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6898,7 +6892,6 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
-    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.391",
+	"version": "4.0.392",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -11,23 +11,23 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@remotion/animated-emoji": "4.0.391",
-		"@remotion/design": "4.0.391",
-		"@remotion/lambda": "4.0.391",
-		"@remotion/lottie": "4.0.391",
-		"@remotion/paths": "4.0.391",
-		"@remotion/player": "4.0.391",
-		"@remotion/shapes": "4.0.391",
-		"@remotion/svg-3d-engine": "4.0.391",
-		"create-video": "4.0.391",
+		"@remotion/animated-emoji": "4.0.392",
+		"@remotion/design": "4.0.392",
+		"@remotion/lambda": "4.0.392",
+		"@remotion/lottie": "4.0.392",
+		"@remotion/paths": "4.0.392",
+		"@remotion/player": "4.0.392",
+		"@remotion/shapes": "4.0.392",
+		"@remotion/svg-3d-engine": "4.0.392",
+		"create-video": "4.0.392",
 		"hls.js": "1.5.19",
 		"polished": "4.3.1",
-		"remotion": "4.0.391",
+		"remotion": "4.0.392",
 		"zod": "3.22.3",
 		"bun-plugin-tailwind": "0.1.2"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.391",
+		"@remotion/eslint-config-internal": "4.0.392",
 		"@eslint/eslintrc": "3.1.0",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",