@remotion/player 4.0.460 → 4.0.461

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -39,7 +39,7 @@ export declare const PlayerInternals: {
39
39
  inFrame: number | null;
40
40
  outFrame: number | null;
41
41
  browserMediaControlsBehavior: import("./browser-mediasession.js").BrowserMediaControlsBehavior;
42
- getCurrentFrame: import("./use-frame-imperative.js").GetCurrentFrame;
42
+ getCurrentFrame: () => number;
43
43
  muted: boolean;
44
44
  }) => void;
45
45
  useElementSize: (ref: import("react").RefObject<HTMLElement | null>, options: {
@@ -67,5 +67,4 @@ export declare const PlayerInternals: {
67
67
  BufferingIndicator: import("react").FC<{
68
68
  readonly type: "player" | "studio";
69
69
  }>;
70
- useFrameImperative: () => import("./use-frame-imperative.js").GetCurrentFrame;
71
70
  };
package/dist/cjs/index.js CHANGED
@@ -7,7 +7,6 @@ const calculate_scale_js_1 = require("./calculate-scale.js");
7
7
  const emitter_context_js_1 = require("./emitter-context.js");
8
8
  const EmitterProvider_js_1 = require("./EmitterProvider.js");
9
9
  const event_emitter_js_1 = require("./event-emitter.js");
10
- const use_frame_imperative_js_1 = require("./use-frame-imperative.js");
11
10
  const use_hover_state_js_1 = require("./use-hover-state.js");
12
11
  const use_playback_js_1 = require("./use-playback.js");
13
12
  const use_player_js_1 = require("./use-player.js");
@@ -27,5 +26,4 @@ exports.PlayerInternals = {
27
26
  updateAllElementsSizes: use_element_size_js_1.updateAllElementsSizes,
28
27
  PlayerEmitterProvider: EmitterProvider_js_1.PlayerEmitterProvider,
29
28
  BufferingIndicator: BufferingIndicator_js_1.BufferingIndicator,
30
- useFrameImperative: use_frame_imperative_js_1.useFrameImperative,
31
29
  };
@@ -1,5 +1,4 @@
1
1
  import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
2
- import type { GetCurrentFrame } from './use-frame-imperative.js';
3
2
  export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, muted, }: {
4
3
  loop: boolean;
5
4
  playbackRate: number;
@@ -7,6 +6,6 @@ export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnde
7
6
  inFrame: number | null;
8
7
  outFrame: number | null;
9
8
  browserMediaControlsBehavior: BrowserMediaControlsBehavior;
10
- getCurrentFrame: GetCurrentFrame;
9
+ getCurrentFrame: () => number;
11
10
  muted: boolean;
12
11
  }) => void;
@@ -495,19 +495,6 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
495
495
  });
496
496
  };
497
497
 
498
- // src/use-frame-imperative.ts
499
- import { useCallback, useRef } from "react";
500
- import { Internals as Internals4 } from "remotion";
501
- var useFrameImperative = () => {
502
- const frame = Internals4.Timeline.useTimelinePosition();
503
- const frameRef = useRef(frame);
504
- frameRef.current = frame;
505
- const getCurrentFrame = useCallback(() => {
506
- return frameRef.current;
507
- }, []);
508
- return getCurrentFrame;
509
- };
510
-
511
498
  // src/use-hover-state.ts
512
499
  import { useEffect as useEffect2, useState as useState2 } from "react";
513
500
  var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
@@ -553,29 +540,29 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
553
540
 
554
541
  // src/use-playback.ts
555
542
  import { useLayoutEffect as useLayoutEffect2 } from "react";
556
- import { useContext as useContext4, useEffect as useEffect5, useRef as useRef5 } from "react";
557
- import { Internals as Internals7 } from "remotion";
543
+ import { useContext as useContext4, useEffect as useEffect5, useRef as useRef4 } from "react";
544
+ import { Internals as Internals6 } from "remotion";
558
545
 
559
546
  // src/browser-mediasession.ts
560
- import { useEffect as useEffect3, useRef as useRef3 } from "react";
547
+ import { useEffect as useEffect3, useRef as useRef2 } from "react";
561
548
 
562
549
  // src/use-player.ts
563
- import { useCallback as useCallback2, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3 } from "react";
564
- import { Internals as Internals5 } from "remotion";
550
+ import { useCallback, useContext as useContext3, useMemo, useRef, useState as useState3 } from "react";
551
+ import { Internals as Internals4 } from "remotion";
565
552
  var usePlayer = () => {
566
- const [playing, setPlaying, imperativePlaying] = Internals5.Timeline.usePlayingState();
553
+ const [playing, setPlaying, imperativePlaying] = Internals4.Timeline.usePlayingState();
567
554
  const [hasPlayed, setHasPlayed] = useState3(false);
568
- const frame = Internals5.Timeline.useTimelinePosition();
569
- const playStart = useRef2(frame);
570
- const setFrame = Internals5.Timeline.useTimelineSetFrame();
571
- const setTimelinePosition = Internals5.Timeline.useTimelineSetFrame();
572
- const audioContext = useContext3(Internals5.SharedAudioContext);
573
- const audioTagsContext = useContext3(Internals5.SharedAudioTagsContext);
574
- const { audioAndVideoTags } = Internals5.useTimelineContext();
575
- const frameRef = useRef2(frame);
555
+ const frame = Internals4.Timeline.useTimelinePosition();
556
+ const playStart = useRef(frame);
557
+ const setFrame = Internals4.Timeline.useTimelineSetFrame();
558
+ const setTimelinePosition = Internals4.Timeline.useTimelineSetFrame();
559
+ const audioContext = useContext3(Internals4.SharedAudioContext);
560
+ const audioTagsContext = useContext3(Internals4.SharedAudioTagsContext);
561
+ const { audioAndVideoTags } = Internals4.useTimelineContext();
562
+ const frameRef = useRef(frame);
576
563
  frameRef.current = frame;
577
- const video = Internals5.useVideo();
578
- const config = Internals5.useUnsafeVideoConfig();
564
+ const video = Internals4.useVideo();
565
+ const config = Internals4.useUnsafeVideoConfig();
579
566
  const emitter = useContext3(PlayerEventEmitterContext);
580
567
  const lastFrame = (config?.durationInFrames ?? 1) - 1;
581
568
  const isLastFrame = frame === lastFrame;
@@ -583,19 +570,19 @@ var usePlayer = () => {
583
570
  if (!emitter) {
584
571
  throw new TypeError("Expected Player event emitter context");
585
572
  }
586
- const bufferingContext = useContext3(Internals5.BufferingContextReact);
573
+ const bufferingContext = useContext3(Internals4.BufferingContextReact);
587
574
  if (!bufferingContext) {
588
575
  throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
589
576
  }
590
577
  const { buffering } = bufferingContext;
591
- const seek = useCallback2((newFrame) => {
578
+ const seek = useCallback((newFrame) => {
592
579
  if (video?.id) {
593
580
  setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
594
581
  }
595
582
  frameRef.current = newFrame;
596
583
  emitter.dispatchSeek(newFrame);
597
584
  }, [emitter, setTimelinePosition, video?.id]);
598
- const play = useCallback2((e) => {
585
+ const play = useCallback((e) => {
599
586
  if (imperativePlaying.current) {
600
587
  return;
601
588
  }
@@ -622,7 +609,7 @@ var usePlayer = () => {
622
609
  seek,
623
610
  audioAndVideoTags
624
611
  ]);
625
- const pause = useCallback2(() => {
612
+ const pause = useCallback(() => {
626
613
  if (imperativePlaying.current) {
627
614
  imperativePlaying.current = false;
628
615
  setPlaying(false);
@@ -630,7 +617,7 @@ var usePlayer = () => {
630
617
  audioContext?.suspend();
631
618
  }
632
619
  }, [emitter, imperativePlaying, setPlaying, audioContext]);
633
- const pauseAndReturnToPlayStart = useCallback2(() => {
620
+ const pauseAndReturnToPlayStart = useCallback(() => {
634
621
  if (imperativePlaying.current) {
635
622
  imperativePlaying.current = false;
636
623
  frameRef.current = playStart.current;
@@ -645,7 +632,7 @@ var usePlayer = () => {
645
632
  }
646
633
  }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
647
634
  const videoId = video?.id;
648
- const frameBack = useCallback2((frames) => {
635
+ const frameBack = useCallback((frames) => {
649
636
  if (!videoId) {
650
637
  return null;
651
638
  }
@@ -664,7 +651,7 @@ var usePlayer = () => {
664
651
  };
665
652
  });
666
653
  }, [imperativePlaying, setFrame, videoId]);
667
- const frameForward = useCallback2((frames) => {
654
+ const frameForward = useCallback((frames) => {
668
655
  if (!videoId) {
669
656
  return null;
670
657
  }
@@ -683,20 +670,20 @@ var usePlayer = () => {
683
670
  };
684
671
  });
685
672
  }, [videoId, imperativePlaying, lastFrame, setFrame]);
686
- const toggle = useCallback2((e) => {
673
+ const toggle = useCallback((e) => {
687
674
  if (imperativePlaying.current) {
688
675
  pause();
689
676
  } else {
690
677
  play(e);
691
678
  }
692
679
  }, [imperativePlaying, pause, play]);
693
- const isPlaying = useCallback2(() => {
680
+ const isPlaying = useCallback(() => {
694
681
  return imperativePlaying.current;
695
682
  }, [imperativePlaying]);
696
- const getCurrentFrame = useCallback2(() => {
683
+ const getCurrentFrame = useCallback(() => {
697
684
  return frameRef.current;
698
685
  }, [frameRef]);
699
- const isBuffering = useCallback2(() => {
686
+ const isBuffering = useCallback(() => {
700
687
  return buffering.current;
701
688
  }, [buffering]);
702
689
  const returnValue = useMemo(() => {
@@ -744,7 +731,7 @@ var useBrowserMediaSession = ({
744
731
  playbackRate
745
732
  }) => {
746
733
  const { playing, pause, play, emitter, getCurrentFrame, seek } = usePlayer();
747
- const hasEverPlayed = useRef3(false);
734
+ const hasEverPlayed = useRef2(false);
748
735
  useEffect3(() => {
749
736
  if (playing) {
750
737
  hasEverPlayed.current = true;
@@ -883,7 +870,7 @@ var calculateNextFrame = ({
883
870
  };
884
871
 
885
872
  // src/is-backgrounded.ts
886
- import { useEffect as useEffect4, useRef as useRef4 } from "react";
873
+ import { useEffect as useEffect4, useRef as useRef3 } from "react";
887
874
  var getIsBackgrounded = () => {
888
875
  if (typeof document === "undefined") {
889
876
  return false;
@@ -891,7 +878,7 @@ var getIsBackgrounded = () => {
891
878
  return document.visibilityState === "hidden";
892
879
  };
893
880
  var useIsBackgrounded = () => {
894
- const isBackgrounded = useRef4(getIsBackgrounded());
881
+ const isBackgrounded = useRef3(getIsBackgrounded());
895
882
  useEffect4(() => {
896
883
  const onVisibilityChange = () => {
897
884
  isBackgrounded.current = getIsBackgrounded();
@@ -905,7 +892,7 @@ var useIsBackgrounded = () => {
905
892
  };
906
893
 
907
894
  // src/set-global-time-anchor.ts
908
- import { Internals as Internals6 } from "remotion";
895
+ import { Internals as Internals5 } from "remotion";
909
896
  var ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
910
897
  var setGlobalTimeAnchor = ({
911
898
  audioContext,
@@ -923,7 +910,7 @@ var setGlobalTimeAnchor = ({
923
910
  if (Math.abs(shift) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency && !force) {
924
911
  return false;
925
912
  }
926
- Internals6.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
913
+ Internals5.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
927
914
  audioSyncAnchor.value = newAnchor;
928
915
  return true;
929
916
  };
@@ -939,15 +926,15 @@ var usePlayback = ({
939
926
  getCurrentFrame,
940
927
  muted
941
928
  }) => {
942
- const config = Internals7.useUnsafeVideoConfig();
943
- const frame = Internals7.Timeline.useTimelinePosition();
929
+ const config = Internals6.useUnsafeVideoConfig();
930
+ const frame = Internals6.Timeline.useTimelinePosition();
944
931
  const { playing, pause, emitter, isPlaying } = usePlayer();
945
- const setFrame = Internals7.Timeline.useTimelineSetFrame();
946
- const sharedAudioContext = useContext4(Internals7.SharedAudioContext);
947
- const logLevel = Internals7.useLogLevel();
932
+ const setFrame = Internals6.Timeline.useTimelineSetFrame();
933
+ const sharedAudioContext = useContext4(Internals6.SharedAudioContext);
934
+ const logLevel = Internals6.useLogLevel();
948
935
  const isBackgroundedRef = useIsBackgrounded();
949
- const lastTimeUpdateTimestamp = useRef5(0);
950
- const context = useContext4(Internals7.BufferingContextReact);
936
+ const lastTimeUpdateTimestamp = useRef4(0);
937
+ const context = useContext4(Internals6.BufferingContextReact);
951
938
  if (!context) {
952
939
  throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
953
940
  }
@@ -1161,7 +1148,7 @@ var usePlayback = ({
1161
1148
  };
1162
1149
 
1163
1150
  // src/utils/use-element-size.ts
1164
- import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
1151
+ import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
1165
1152
  var elementSizeHooks = [];
1166
1153
  var updateAllElementsSizes = () => {
1167
1154
  for (const listener of elementSizeHooks) {
@@ -1221,7 +1208,7 @@ var useElementSize = (ref, options) => {
1221
1208
  });
1222
1209
  });
1223
1210
  }, [options.shouldApplyCssTransforms]);
1224
- const updateSize = useCallback3(() => {
1211
+ const updateSize = useCallback2(() => {
1225
1212
  if (!ref.current) {
1226
1213
  return;
1227
1214
  }
@@ -1291,10 +1278,10 @@ import {
1291
1278
  useImperativeHandle as useImperativeHandle2,
1292
1279
  useLayoutEffect as useLayoutEffect3,
1293
1280
  useMemo as useMemo14,
1294
- useRef as useRef12,
1281
+ useRef as useRef11,
1295
1282
  useState as useState13
1296
1283
  } from "react";
1297
- import { Composition, Internals as Internals16 } from "remotion";
1284
+ import { Composition, Internals as Internals15 } from "remotion";
1298
1285
 
1299
1286
  // src/player-css-classname.ts
1300
1287
  var playerCssClassname = (override) => {
@@ -1305,15 +1292,15 @@ var playerCssClassname = (override) => {
1305
1292
  import React10, {
1306
1293
  Suspense,
1307
1294
  forwardRef,
1308
- useCallback as useCallback11,
1295
+ useCallback as useCallback10,
1309
1296
  useContext as useContext5,
1310
1297
  useEffect as useEffect12,
1311
1298
  useImperativeHandle,
1312
1299
  useMemo as useMemo12,
1313
- useRef as useRef11,
1300
+ useRef as useRef10,
1314
1301
  useState as useState11
1315
1302
  } from "react";
1316
- import { Internals as Internals12 } from "remotion";
1303
+ import { Internals as Internals11 } from "remotion";
1317
1304
 
1318
1305
  // src/error-boundary.tsx
1319
1306
  import React3 from "react";
@@ -1438,7 +1425,7 @@ var RenderWarningIfBlacklist = () => {
1438
1425
  };
1439
1426
 
1440
1427
  // src/PlayerControls.tsx
1441
- import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef9, useState as useState10 } from "react";
1428
+ import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef8, useState as useState10 } from "react";
1442
1429
 
1443
1430
  // src/DefaultPlayPauseButton.tsx
1444
1431
  import { jsx as jsx6 } from "react/jsx-runtime";
@@ -1455,11 +1442,11 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
1455
1442
  };
1456
1443
 
1457
1444
  // src/MediaVolumeSlider.tsx
1458
- import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef6, useState as useState6 } from "react";
1459
- import { Internals as Internals8 } from "remotion";
1445
+ import { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
1446
+ import { Internals as Internals7 } from "remotion";
1460
1447
 
1461
1448
  // src/render-volume-slider.tsx
1462
- import React5, { useCallback as useCallback4, useMemo as useMemo3, useState as useState5 } from "react";
1449
+ import React5, { useCallback as useCallback3, useMemo as useMemo3, useState as useState5 } from "react";
1463
1450
  import { random } from "remotion";
1464
1451
  import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
1465
1452
  var KNOB_SIZE = 12;
@@ -1493,7 +1480,7 @@ var DefaultVolumeSlider = ({
1493
1480
  }, [isVertical]);
1494
1481
  const randomId = typeof React5.useId === "undefined" ? "volume-slider" : React5.useId();
1495
1482
  const [randomClass] = useState5(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
1496
- const onVolumeChange = useCallback4((e) => {
1483
+ const onVolumeChange = useCallback3((e) => {
1497
1484
  setVolume(parseFloat(e.target.value));
1498
1485
  }, [setVolume]);
1499
1486
  const inputStyle = useMemo3(() => {
@@ -1570,13 +1557,13 @@ var renderDefaultVolumeSlider = (props) => {
1570
1557
  import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
1571
1558
  var VOLUME_SLIDER_WIDTH = 100;
1572
1559
  var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
1573
- const [mediaMuted, setMediaMuted] = Internals8.useMediaMutedState();
1574
- const [mediaVolume, setMediaVolume] = Internals8.useMediaVolumeState();
1560
+ const [mediaMuted, setMediaMuted] = Internals7.useMediaMutedState();
1561
+ const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
1575
1562
  const [focused, setFocused] = useState6(false);
1576
- const parentDivRef = useRef6(null);
1577
- const inputRef = useRef6(null);
1563
+ const parentDivRef = useRef5(null);
1564
+ const inputRef = useRef5(null);
1578
1565
  const hover = useHoverState(parentDivRef, false);
1579
- const onBlur = useCallback5(() => {
1566
+ const onBlur = useCallback4(() => {
1580
1567
  setTimeout(() => {
1581
1568
  if (inputRef.current && document.activeElement !== inputRef.current) {
1582
1569
  setFocused(false);
@@ -1584,7 +1571,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
1584
1571
  }, 10);
1585
1572
  }, []);
1586
1573
  const isVolume0 = mediaVolume === 0;
1587
- const onClick = useCallback5(() => {
1574
+ const onClick = useCallback4(() => {
1588
1575
  if (isVolume0) {
1589
1576
  setMediaVolume(1);
1590
1577
  setMediaMuted(false);
@@ -1615,7 +1602,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
1615
1602
  padding: 0
1616
1603
  };
1617
1604
  }, []);
1618
- const renderDefaultMuteButton = useCallback5(({ muted, volume }) => {
1605
+ const renderDefaultMuteButton = useCallback4(({ muted, volume }) => {
1619
1606
  const isMutedOrZero = muted || volume === 0;
1620
1607
  return /* @__PURE__ */ jsx8("button", {
1621
1608
  "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
@@ -1632,7 +1619,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
1632
1619
  return renderMuteButton ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
1633
1620
  }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
1634
1621
  const volumeSlider = useMemo4(() => {
1635
- return (focused || hover) && !mediaMuted && !Internals8.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
1622
+ return (focused || hover) && !mediaMuted && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
1636
1623
  isVertical: displayVerticalVolumeSlider,
1637
1624
  volume: mediaVolume,
1638
1625
  onBlur: () => setFocused(false),
@@ -1659,14 +1646,14 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
1659
1646
  };
1660
1647
 
1661
1648
  // src/PlaybackrateControl.tsx
1662
- import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo5, useState as useState8 } from "react";
1663
- import { Internals as Internals9 } from "remotion";
1649
+ import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo5, useState as useState8 } from "react";
1650
+ import { Internals as Internals8 } from "remotion";
1664
1651
 
1665
1652
  // src/utils/use-component-visible.ts
1666
- import { useEffect as useEffect8, useRef as useRef7, useState as useState7 } from "react";
1653
+ import { useEffect as useEffect8, useRef as useRef6, useState as useState7 } from "react";
1667
1654
  function useComponentVisible(initialIsVisible) {
1668
1655
  const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
1669
- const ref = useRef7(null);
1656
+ const ref = useRef6(null);
1670
1657
  useEffect8(() => {
1671
1658
  const handleClickOutside = (event) => {
1672
1659
  if (ref.current && !ref.current.contains(event.target)) {
@@ -1716,16 +1703,16 @@ var formatPlaybackRate = (rate) => {
1716
1703
  return str.includes(".") ? str : str + ".0";
1717
1704
  };
1718
1705
  var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
1719
- const onClick = useCallback6((e) => {
1706
+ const onClick = useCallback5((e) => {
1720
1707
  e.stopPropagation();
1721
1708
  e.preventDefault();
1722
1709
  onSelect(rate);
1723
1710
  }, [onSelect, rate]);
1724
1711
  const [hovered, setHovered] = useState8(false);
1725
- const onMouseEnter = useCallback6(() => {
1712
+ const onMouseEnter = useCallback5(() => {
1726
1713
  setHovered(true);
1727
1714
  }, []);
1728
- const onMouseLeave = useCallback6(() => {
1715
+ const onMouseLeave = useCallback5(() => {
1729
1716
  setHovered(false);
1730
1717
  }, []);
1731
1718
  const isFocused = keyboardSelectedRate === rate;
@@ -1752,7 +1739,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
1752
1739
  }, rate);
1753
1740
  };
1754
1741
  var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
1755
- const { setPlaybackRate, playbackRate } = Internals9.usePlaybackRate();
1742
+ const { setPlaybackRate, playbackRate } = Internals8.usePlaybackRate();
1756
1743
  const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
1757
1744
  useEffect9(() => {
1758
1745
  const listener = (e) => {
@@ -1792,7 +1779,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
1792
1779
  setPlaybackRate,
1793
1780
  setIsComponentVisible
1794
1781
  ]);
1795
- const onSelect = useCallback6((rate) => {
1782
+ const onSelect = useCallback5((rate) => {
1796
1783
  setPlaybackRate(rate);
1797
1784
  setIsComponentVisible(false);
1798
1785
  }, [setIsComponentVisible, setPlaybackRate]);
@@ -1854,8 +1841,8 @@ var button = {
1854
1841
  };
1855
1842
  var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
1856
1843
  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
1857
- const { playbackRate } = Internals9.usePlaybackRate();
1858
- const onClick = useCallback6((e) => {
1844
+ const { playbackRate } = Internals8.usePlaybackRate();
1845
+ const onClick = useCallback5((e) => {
1859
1846
  e.stopPropagation();
1860
1847
  e.preventDefault();
1861
1848
  setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
@@ -1886,8 +1873,8 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
1886
1873
  };
1887
1874
 
1888
1875
  // src/PlayerSeekBar.tsx
1889
- import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef8, useState as useState9 } from "react";
1890
- import { Internals as Internals10, interpolate } from "remotion";
1876
+ import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
1877
+ import { Internals as Internals9, interpolate } from "remotion";
1891
1878
  import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
1892
1879
  var getFrameFromX = (clientX, durationInFrames, width) => {
1893
1880
  const pos = clientX;
@@ -1924,19 +1911,19 @@ var findBodyInWhichDivIsLocated = (div) => {
1924
1911
  return current;
1925
1912
  };
1926
1913
  var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
1927
- const containerRef = useRef8(null);
1914
+ const containerRef = useRef7(null);
1928
1915
  const barHovered = useHoverState(containerRef, false);
1929
1916
  const size = useElementSize(containerRef, {
1930
1917
  triggerOnWindowResize: true,
1931
1918
  shouldApplyCssTransforms: true
1932
1919
  });
1933
1920
  const { seek, play, pause, playing } = usePlayer();
1934
- const frame = Internals10.Timeline.useTimelinePosition();
1921
+ const frame = Internals9.Timeline.useTimelinePosition();
1935
1922
  const [dragging, setDragging] = useState9({
1936
1923
  dragging: false
1937
1924
  });
1938
1925
  const width = size?.width ?? 0;
1939
- const onPointerDown = useCallback7((e) => {
1926
+ const onPointerDown = useCallback6((e) => {
1940
1927
  if (e.button !== 0) {
1941
1928
  return;
1942
1929
  }
@@ -1950,7 +1937,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
1950
1937
  });
1951
1938
  onSeekStart();
1952
1939
  }, [durationInFrames, width, pause, seek, playing, onSeekStart]);
1953
- const onPointerMove = useCallback7((e) => {
1940
+ const onPointerMove = useCallback6((e) => {
1954
1941
  if (!size) {
1955
1942
  throw new Error("Player has no size");
1956
1943
  }
@@ -1961,7 +1948,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
1961
1948
  const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
1962
1949
  seek(_frame);
1963
1950
  }, [dragging.dragging, durationInFrames, seek, size]);
1964
- const onPointerUp = useCallback7(() => {
1951
+ const onPointerUp = useCallback6(() => {
1965
1952
  setDragging({
1966
1953
  dragging: false
1967
1954
  });
@@ -2044,7 +2031,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
2044
2031
 
2045
2032
  // src/PlayerTimeLabel.tsx
2046
2033
  import { useMemo as useMemo7 } from "react";
2047
- import { Internals as Internals11 } from "remotion";
2034
+ import { Internals as Internals10 } from "remotion";
2048
2035
 
2049
2036
  // src/format-time.ts
2050
2037
  var formatTime = (timeInSeconds) => {
@@ -2056,7 +2043,7 @@ var formatTime = (timeInSeconds) => {
2056
2043
  // src/PlayerTimeLabel.tsx
2057
2044
  import { jsxs as jsxs7 } from "react/jsx-runtime";
2058
2045
  var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
2059
- const frame = Internals11.Timeline.useTimelinePosition();
2046
+ const frame = Internals10.Timeline.useTimelinePosition();
2060
2047
  const timeLabel = useMemo7(() => {
2061
2048
  return {
2062
2049
  color: "white",
@@ -2216,7 +2203,7 @@ var Controls = ({
2216
2203
  toggle,
2217
2204
  renderCustomControls
2218
2205
  }) => {
2219
- const playButtonRef = useRef9(null);
2206
+ const playButtonRef = useRef8(null);
2220
2207
  const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
2221
2208
  const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
2222
2209
  const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -2291,14 +2278,14 @@ var Controls = ({
2291
2278
  return null;
2292
2279
  }, [showPlaybackRateControl]);
2293
2280
  const customControlsElement = renderCustomControls ? renderCustomControls() : null;
2294
- const ref = useRef9(null);
2295
- const flexRef = useRef9(null);
2296
- const onPointerDownIfContainer = useCallback8((e) => {
2281
+ const ref = useRef8(null);
2282
+ const flexRef = useRef8(null);
2283
+ const onPointerDownIfContainer = useCallback7((e) => {
2297
2284
  if (e.target === ref.current || e.target === flexRef.current) {
2298
2285
  onPointerDown?.(e);
2299
2286
  }
2300
2287
  }, [onPointerDown]);
2301
- const onDoubleClickIfContainer = useCallback8((e) => {
2288
+ const onDoubleClickIfContainer = useCallback7((e) => {
2302
2289
  if (e.target === ref.current || e.target === flexRef.current) {
2303
2290
  onDoubleClick?.(e);
2304
2291
  }
@@ -2406,7 +2393,7 @@ var Controls = ({
2406
2393
  var IS_NODE = typeof document === "undefined";
2407
2394
 
2408
2395
  // src/utils/use-click-prevention-on-double-click.ts
2409
- import { useCallback as useCallback10, useMemo as useMemo11 } from "react";
2396
+ import { useCallback as useCallback9, useMemo as useMemo11 } from "react";
2410
2397
 
2411
2398
  // src/utils/cancellable-promise.ts
2412
2399
  var cancellablePromise = (promise) => {
@@ -2434,16 +2421,16 @@ var cancellablePromise = (promise) => {
2434
2421
  var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
2435
2422
 
2436
2423
  // src/utils/use-cancellable-promises.ts
2437
- import { useCallback as useCallback9, useMemo as useMemo10, useRef as useRef10 } from "react";
2424
+ import { useCallback as useCallback8, useMemo as useMemo10, useRef as useRef9 } from "react";
2438
2425
  var useCancellablePromises = () => {
2439
- const pendingPromises = useRef10([]);
2440
- const appendPendingPromise = useCallback9((promise) => {
2426
+ const pendingPromises = useRef9([]);
2427
+ const appendPendingPromise = useCallback8((promise) => {
2441
2428
  pendingPromises.current = [...pendingPromises.current, promise];
2442
2429
  }, []);
2443
- const removePendingPromise = useCallback9((promise) => {
2430
+ const removePendingPromise = useCallback8((promise) => {
2444
2431
  pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
2445
2432
  }, []);
2446
- const clearPendingPromises = useCallback9(() => pendingPromises.current.map((p) => p.cancel()), []);
2433
+ const clearPendingPromises = useCallback8(() => pendingPromises.current.map((p) => p.cancel()), []);
2447
2434
  const api = useMemo10(() => ({
2448
2435
  appendPendingPromise,
2449
2436
  removePendingPromise,
@@ -2455,7 +2442,7 @@ var useCancellablePromises = () => {
2455
2442
  // src/utils/use-click-prevention-on-double-click.ts
2456
2443
  var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
2457
2444
  const api = useCancellablePromises();
2458
- const handleClick = useCallback10(async (e) => {
2445
+ const handleClick = useCallback9(async (e) => {
2459
2446
  if (e instanceof PointerEvent ? e.pointerType === "touch" : e.nativeEvent.pointerType === "touch") {
2460
2447
  onClick(e);
2461
2448
  return;
@@ -2475,14 +2462,14 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
2475
2462
  }
2476
2463
  }
2477
2464
  }, [api, onClick]);
2478
- const handlePointerDown = useCallback10(() => {
2465
+ const handlePointerDown = useCallback9(() => {
2479
2466
  document.addEventListener("pointerup", (newEvt) => {
2480
2467
  handleClick(newEvt);
2481
2468
  }, {
2482
2469
  once: true
2483
2470
  });
2484
2471
  }, [handleClick]);
2485
- const handleDoubleClick = useCallback10(() => {
2472
+ const handleDoubleClick = useCallback9(() => {
2486
2473
  api.clearPendingPromises();
2487
2474
  onDoubleClick();
2488
2475
  }, [api, onDoubleClick]);
@@ -2544,9 +2531,9 @@ var PlayerUI = ({
2544
2531
  overrideInternalClassName,
2545
2532
  noSuspense
2546
2533
  }, ref) => {
2547
- const config = Internals12.useUnsafeVideoConfig();
2548
- const video = Internals12.useVideo();
2549
- const container = useRef11(null);
2534
+ const config = Internals11.useUnsafeVideoConfig();
2535
+ const video = Internals11.useVideo();
2536
+ const container = useRef10(null);
2550
2537
  const canvasSize = useElementSize(container, {
2551
2538
  triggerOnWindowResize: false,
2552
2539
  shouldApplyCssTransforms: false
@@ -2563,7 +2550,7 @@ var PlayerUI = ({
2563
2550
  }, []);
2564
2551
  const player = usePlayer();
2565
2552
  const playerToggle = player.toggle;
2566
- const { mediaMuted, mediaVolume } = useContext5(Internals12.MediaVolumeContext);
2553
+ const { mediaMuted, mediaVolume } = useContext5(Internals11.MediaVolumeContext);
2567
2554
  useEffect12(() => {
2568
2555
  player.emitter.dispatchVolumeChange(mediaVolume);
2569
2556
  }, [player.emitter, mediaVolume]);
@@ -2605,10 +2592,10 @@ var PlayerUI = ({
2605
2592
  document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
2606
2593
  };
2607
2594
  }, []);
2608
- const toggle = useCallback11((e) => {
2595
+ const toggle = useCallback10((e) => {
2609
2596
  playerToggle(e);
2610
2597
  }, [playerToggle]);
2611
- const requestFullscreen = useCallback11(() => {
2598
+ const requestFullscreen = useCallback10(() => {
2612
2599
  if (!allowFullscreen) {
2613
2600
  throw new Error("allowFullscreen is false");
2614
2601
  }
@@ -2624,7 +2611,7 @@ var PlayerUI = ({
2624
2611
  container.current.requestFullscreen();
2625
2612
  }
2626
2613
  }, [allowFullscreen, supportsFullScreen]);
2627
- const exitFullscreen = useCallback11(() => {
2614
+ const exitFullscreen = useCallback10(() => {
2628
2615
  if (document.webkitExitFullscreen) {
2629
2616
  document.webkitExitFullscreen();
2630
2617
  } else {
@@ -2668,7 +2655,7 @@ var PlayerUI = ({
2668
2655
  });
2669
2656
  }, [canvasSize, config]);
2670
2657
  const scale = layout?.scale ?? 1;
2671
- const initialScaleIgnored = useRef11(false);
2658
+ const initialScaleIgnored = useRef10(false);
2672
2659
  useEffect12(() => {
2673
2660
  if (!initialScaleIgnored.current) {
2674
2661
  initialScaleIgnored.current = true;
@@ -2676,7 +2663,7 @@ var PlayerUI = ({
2676
2663
  }
2677
2664
  player.emitter.dispatchScaleChange(scale);
2678
2665
  }, [player.emitter, scale]);
2679
- const { setMediaVolume, setMediaMuted } = useContext5(Internals12.SetMediaVolumeContext);
2666
+ const { setMediaVolume, setMediaMuted } = useContext5(Internals11.SetMediaVolumeContext);
2680
2667
  const [showBufferIndicator, setShowBufferState] = useState11(false);
2681
2668
  useEffect12(() => {
2682
2669
  let timeout = null;
@@ -2817,32 +2804,32 @@ var PlayerUI = ({
2817
2804
  }, [config, layout, overflowVisible, scale]);
2818
2805
  const playerPause = player.pause;
2819
2806
  const playerDispatchError = player.emitter.dispatchError;
2820
- const onError = useCallback11((error) => {
2807
+ const onError = useCallback10((error) => {
2821
2808
  playerPause();
2822
2809
  playerDispatchError(error);
2823
2810
  }, [playerDispatchError, playerPause]);
2824
- const onFullscreenButtonClick = useCallback11((e) => {
2811
+ const onFullscreenButtonClick = useCallback10((e) => {
2825
2812
  e.stopPropagation();
2826
2813
  requestFullscreen();
2827
2814
  }, [requestFullscreen]);
2828
- const onExitFullscreenButtonClick = useCallback11((e) => {
2815
+ const onExitFullscreenButtonClick = useCallback10((e) => {
2829
2816
  e.stopPropagation();
2830
2817
  exitFullscreen();
2831
2818
  }, [exitFullscreen]);
2832
- const onSingleClick = useCallback11((e) => {
2819
+ const onSingleClick = useCallback10((e) => {
2833
2820
  const rightClick = e instanceof MouseEvent ? e.button === 2 : e.nativeEvent.button;
2834
2821
  if (rightClick) {
2835
2822
  return;
2836
2823
  }
2837
2824
  toggle(e);
2838
2825
  }, [toggle]);
2839
- const onSeekStart = useCallback11(() => {
2826
+ const onSeekStart = useCallback10(() => {
2840
2827
  setSeeking(true);
2841
2828
  }, []);
2842
- const onSeekEnd = useCallback11(() => {
2829
+ const onSeekEnd = useCallback10(() => {
2843
2830
  setSeeking(false);
2844
2831
  }, []);
2845
- const onDoubleClick = useCallback11(() => {
2832
+ const onDoubleClick = useCallback10(() => {
2846
2833
  if (isFullscreen) {
2847
2834
  exitFullscreen();
2848
2835
  } else {
@@ -2902,7 +2889,7 @@ var PlayerUI = ({
2902
2889
  VideoComponent ? /* @__PURE__ */ jsx12(ErrorBoundary, {
2903
2890
  onError,
2904
2891
  errorFallback,
2905
- children: /* @__PURE__ */ jsx12(Internals12.CurrentScaleContext.Provider, {
2892
+ children: /* @__PURE__ */ jsx12(Internals11.CurrentScaleContext.Provider, {
2906
2893
  value: currentScale,
2907
2894
  children: /* @__PURE__ */ jsx12(VideoComponent, {
2908
2895
  ...video?.props ?? {},
@@ -2984,11 +2971,11 @@ var PlayerUI = ({
2984
2971
  var PlayerUI_default = forwardRef(PlayerUI);
2985
2972
 
2986
2973
  // src/SharedPlayerContext.tsx
2987
- import { useCallback as useCallback12, useMemo as useMemo13, useState as useState12 } from "react";
2988
- import { Internals as Internals14 } from "remotion";
2974
+ import { useCallback as useCallback11, useMemo as useMemo13, useState as useState12 } from "react";
2975
+ import { Internals as Internals13 } from "remotion";
2989
2976
 
2990
2977
  // src/volume-persistence.ts
2991
- import { Internals as Internals13 } from "remotion";
2978
+ import { Internals as Internals12 } from "remotion";
2992
2979
  var DEFAULT_VOLUME_PERSISTENCE_KEY = "remotion.volumePreference";
2993
2980
  var persistVolume = (volume, logLevel, volumePersistenceKey) => {
2994
2981
  if (typeof window === "undefined") {
@@ -2997,7 +2984,7 @@ var persistVolume = (volume, logLevel, volumePersistenceKey) => {
2997
2984
  try {
2998
2985
  window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTENCE_KEY, String(volume));
2999
2986
  } catch (e) {
3000
- Internals13.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
2987
+ Internals12.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
3001
2988
  }
3002
2989
  };
3003
2990
  var getPreferredVolume = (volumePersistenceKey) => {
@@ -3085,7 +3072,7 @@ var SharedPlayerContexts = ({
3085
3072
  mediaVolume
3086
3073
  };
3087
3074
  }, [mediaMuted, mediaVolume]);
3088
- const setMediaVolumeAndPersist = useCallback12((vol) => {
3075
+ const setMediaVolumeAndPersist = useCallback11((vol) => {
3089
3076
  setMediaVolume(vol);
3090
3077
  if (persistVolumeToStorage) {
3091
3078
  persistVolume(vol, logLevel, volumePersistenceKey ?? null);
@@ -3112,30 +3099,30 @@ var SharedPlayerContexts = ({
3112
3099
  isReadOnlyStudio: false
3113
3100
  };
3114
3101
  }, []);
3115
- return /* @__PURE__ */ jsx13(Internals14.RemotionEnvironmentContext.Provider, {
3102
+ return /* @__PURE__ */ jsx13(Internals13.RemotionEnvironmentContext.Provider, {
3116
3103
  value: env,
3117
- children: /* @__PURE__ */ jsx13(Internals14.LogLevelContext.Provider, {
3104
+ children: /* @__PURE__ */ jsx13(Internals13.LogLevelContext.Provider, {
3118
3105
  value: logLevelContext,
3119
- children: /* @__PURE__ */ jsx13(Internals14.CanUseRemotionHooksProvider, {
3120
- children: /* @__PURE__ */ jsx13(Internals14.AbsoluteTimeContext.Provider, {
3106
+ children: /* @__PURE__ */ jsx13(Internals13.CanUseRemotionHooksProvider, {
3107
+ children: /* @__PURE__ */ jsx13(Internals13.AbsoluteTimeContext.Provider, {
3121
3108
  value: timelineContext,
3122
- children: /* @__PURE__ */ jsx13(Internals14.PlaybackRateContext.Provider, {
3109
+ children: /* @__PURE__ */ jsx13(Internals13.PlaybackRateContext.Provider, {
3123
3110
  value: playbackRateContext,
3124
- children: /* @__PURE__ */ jsx13(Internals14.TimelineContext.Provider, {
3111
+ children: /* @__PURE__ */ jsx13(Internals13.TimelineContext.Provider, {
3125
3112
  value: timelineContext,
3126
- children: /* @__PURE__ */ jsx13(Internals14.CompositionManager.Provider, {
3113
+ children: /* @__PURE__ */ jsx13(Internals13.CompositionManager.Provider, {
3127
3114
  value: compositionManagerContext,
3128
- children: /* @__PURE__ */ jsx13(Internals14.PrefetchProvider, {
3129
- children: /* @__PURE__ */ jsx13(Internals14.DurationsContextProvider, {
3130
- children: /* @__PURE__ */ jsx13(Internals14.MediaVolumeContext.Provider, {
3115
+ children: /* @__PURE__ */ jsx13(Internals13.PrefetchProvider, {
3116
+ children: /* @__PURE__ */ jsx13(Internals13.DurationsContextProvider, {
3117
+ children: /* @__PURE__ */ jsx13(Internals13.MediaVolumeContext.Provider, {
3131
3118
  value: mediaVolumeContextValue,
3132
- children: /* @__PURE__ */ jsx13(Internals14.SetMediaVolumeContext.Provider, {
3119
+ children: /* @__PURE__ */ jsx13(Internals13.SetMediaVolumeContext.Provider, {
3133
3120
  value: setMediaVolumeContextValue,
3134
- children: /* @__PURE__ */ jsx13(Internals14.BufferingProvider, {
3135
- children: /* @__PURE__ */ jsx13(Internals14.SharedAudioContextProvider, {
3121
+ children: /* @__PURE__ */ jsx13(Internals13.BufferingProvider, {
3122
+ children: /* @__PURE__ */ jsx13(Internals13.SharedAudioContextProvider, {
3136
3123
  audioLatencyHint,
3137
3124
  audioEnabled,
3138
- children: /* @__PURE__ */ jsx13(Internals14.SharedAudioTagsContextProvider, {
3125
+ children: /* @__PURE__ */ jsx13(Internals13.SharedAudioTagsContextProvider, {
3139
3126
  numberOfAudioTags: numberOfSharedAudioTags,
3140
3127
  children
3141
3128
  })
@@ -3155,7 +3142,7 @@ var SharedPlayerContexts = ({
3155
3142
  };
3156
3143
 
3157
3144
  // src/use-remotion-license-acknowledge.ts
3158
- import { Internals as Internals15 } from "remotion";
3145
+ import { Internals as Internals14 } from "remotion";
3159
3146
  var warningShown = false;
3160
3147
  var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
3161
3148
  if (acknowledge) {
@@ -3165,7 +3152,7 @@ var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
3165
3152
  return;
3166
3153
  }
3167
3154
  warningShown = true;
3168
- 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.");
3155
+ 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.");
3169
3156
  };
3170
3157
 
3171
3158
  // src/utils/validate-in-out-frame.ts
@@ -3340,7 +3327,7 @@ var PlayerFn = ({
3340
3327
  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.`);
3341
3328
  }
3342
3329
  useState13(() => acknowledgeRemotionLicenseMessage(Boolean(acknowledgeRemotionLicense), logLevel));
3343
- const component = Internals16.useLazyComponent({
3330
+ const component = Internals15.useLazyComponent({
3344
3331
  compProps: componentProps,
3345
3332
  componentName: "Player",
3346
3333
  noSuspense: Boolean(noSuspense)
@@ -3351,9 +3338,9 @@ var PlayerFn = ({
3351
3338
  }));
3352
3339
  const [playing, setPlaying] = useState13(false);
3353
3340
  const [rootId] = useState13("player-comp");
3354
- const rootRef = useRef12(null);
3355
- const audioAndVideoTags = useRef12([]);
3356
- const imperativePlaying = useRef12(false);
3341
+ const rootRef = useRef11(null);
3342
+ const audioAndVideoTags = useRef11([]);
3343
+ const imperativePlaying = useRef11(false);
3357
3344
  const [currentPlaybackRate, setCurrentPlaybackRate] = useState13(playbackRate);
3358
3345
  if (typeof compositionHeight !== "number") {
3359
3346
  throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -3413,7 +3400,7 @@ var PlayerFn = ({
3413
3400
  }, [playbackRate]);
3414
3401
  useImperativeHandle2(ref, () => rootRef.current, []);
3415
3402
  useState13(() => {
3416
- Internals16.playbackLogging({
3403
+ Internals15.playbackLogging({
3417
3404
  logLevel,
3418
3405
  message: `[player] Mounting <Player>. User agent = ${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
3419
3406
  tag: "player",
@@ -3443,7 +3430,7 @@ var PlayerFn = ({
3443
3430
  }, [setFrame]);
3444
3431
  if (typeof window !== "undefined") {
3445
3432
  useLayoutEffect3(() => {
3446
- Internals16.CSSUtils.injectCSS(Internals16.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
3433
+ Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
3447
3434
  }, [overrideInternalClassName]);
3448
3435
  }
3449
3436
  const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
@@ -3452,7 +3439,7 @@ var PlayerFn = ({
3452
3439
  mode: "prevent-media-session"
3453
3440
  };
3454
3441
  }, [passedBrowserMediaControlsBehavior]);
3455
- return /* @__PURE__ */ jsx14(Internals16.IsPlayerContextProvider, {
3442
+ return /* @__PURE__ */ jsx14(Internals15.IsPlayerContextProvider, {
3456
3443
  children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
3457
3444
  timelineContext: timelineContextValue,
3458
3445
  playbackRateContext: playbackRateContextValue,
@@ -3469,7 +3456,7 @@ var PlayerFn = ({
3469
3456
  initialVolume,
3470
3457
  inputProps: actualInputProps,
3471
3458
  audioEnabled: true,
3472
- children: /* @__PURE__ */ jsx14(Internals16.SetTimelineContext.Provider, {
3459
+ children: /* @__PURE__ */ jsx14(Internals15.SetTimelineContext.Provider, {
3473
3460
  value: setTimelineContextValue,
3474
3461
  children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {
3475
3462
  currentPlaybackRate,
@@ -3527,21 +3514,21 @@ import {
3527
3514
  useImperativeHandle as useImperativeHandle4,
3528
3515
  useLayoutEffect as useLayoutEffect4,
3529
3516
  useMemo as useMemo17,
3530
- useRef as useRef14,
3517
+ useRef as useRef13,
3531
3518
  useState as useState14
3532
3519
  } from "react";
3533
- import { Internals as Internals18, random as random2 } from "remotion";
3520
+ import { Internals as Internals17, random as random2 } from "remotion";
3534
3521
 
3535
3522
  // src/ThumbnailUI.tsx
3536
3523
  import React13, {
3537
3524
  forwardRef as forwardRef3,
3538
3525
  Suspense as Suspense2,
3539
- useCallback as useCallback13,
3526
+ useCallback as useCallback12,
3540
3527
  useImperativeHandle as useImperativeHandle3,
3541
3528
  useMemo as useMemo16,
3542
- useRef as useRef13
3529
+ useRef as useRef12
3543
3530
  } from "react";
3544
- import { Internals as Internals17 } from "remotion";
3531
+ import { Internals as Internals16 } from "remotion";
3545
3532
 
3546
3533
  // src/use-thumbnail.ts
3547
3534
  import { useContext as useContext6, useMemo as useMemo15 } from "react";
@@ -3575,9 +3562,9 @@ var ThumbnailUI = ({
3575
3562
  noSuspense,
3576
3563
  overrideInternalClassName
3577
3564
  }, ref) => {
3578
- const config = Internals17.useUnsafeVideoConfig();
3579
- const video = Internals17.useVideo();
3580
- const container = useRef13(null);
3565
+ const config = Internals16.useUnsafeVideoConfig();
3566
+ const video = Internals16.useVideo();
3567
+ const container = useRef12(null);
3581
3568
  const canvasSize = useElementSize(container, {
3582
3569
  triggerOnWindowResize: false,
3583
3570
  shouldApplyCssTransforms: false
@@ -3624,7 +3611,7 @@ var ThumbnailUI = ({
3624
3611
  overflowVisible
3625
3612
  });
3626
3613
  }, [config, layout, overflowVisible, scale]);
3627
- const onError = useCallback13((error) => {
3614
+ const onError = useCallback12((error) => {
3628
3615
  thumbnail.emitter.dispatchError(error);
3629
3616
  }, [thumbnail.emitter]);
3630
3617
  const loadingMarkup = useMemo16(() => {
@@ -3651,7 +3638,7 @@ var ThumbnailUI = ({
3651
3638
  children: VideoComponent ? /* @__PURE__ */ jsx15(ErrorBoundary, {
3652
3639
  onError,
3653
3640
  errorFallback,
3654
- children: /* @__PURE__ */ jsx15(Internals17.CurrentScaleContext.Provider, {
3641
+ children: /* @__PURE__ */ jsx15(Internals16.CurrentScaleContext.Provider, {
3655
3642
  value: currentScaleContext,
3656
3643
  children: /* @__PURE__ */ jsx15(VideoComponent, {
3657
3644
  ...video?.props ?? {},
@@ -3706,7 +3693,7 @@ var ThumbnailFn = ({
3706
3693
  }, []);
3707
3694
  }
3708
3695
  const [thumbnailId] = useState14(() => String(random2(null)));
3709
- const rootRef = useRef14(null);
3696
+ const rootRef = useRef13(null);
3710
3697
  const timelineState = useMemo17(() => {
3711
3698
  const value = {
3712
3699
  playing: false,
@@ -3730,7 +3717,7 @@ var ThumbnailFn = ({
3730
3717
  };
3731
3718
  }, []);
3732
3719
  useImperativeHandle4(ref, () => rootRef.current, []);
3733
- const Component = Internals18.useLazyComponent({
3720
+ const Component = Internals17.useLazyComponent({
3734
3721
  compProps: componentProps,
3735
3722
  componentName: "Thumbnail",
3736
3723
  noSuspense: Boolean(noSuspense)
@@ -3739,7 +3726,7 @@ var ThumbnailFn = ({
3739
3726
  const passedInputProps = useMemo17(() => {
3740
3727
  return inputProps ?? {};
3741
3728
  }, [inputProps]);
3742
- return /* @__PURE__ */ jsx16(Internals18.IsPlayerContextProvider, {
3729
+ return /* @__PURE__ */ jsx16(Internals17.IsPlayerContextProvider, {
3743
3730
  children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
3744
3731
  timelineContext: timelineState,
3745
3732
  playbackRateContext,
@@ -3785,8 +3772,7 @@ var PlayerInternals = {
3785
3772
  useHoverState,
3786
3773
  updateAllElementsSizes,
3787
3774
  PlayerEmitterProvider,
3788
- BufferingIndicator,
3789
- useFrameImperative
3775
+ BufferingIndicator
3790
3776
  };
3791
3777
  export {
3792
3778
  Thumbnail,
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
4
4
  },
5
5
  "name": "@remotion/player",
6
- "version": "4.0.460",
6
+ "version": "4.0.461",
7
7
  "description": "React component for embedding a Remotion preview into your app",
8
8
  "main": "dist/cjs/index.js",
9
9
  "types": "dist/cjs/index.d.ts",
@@ -36,7 +36,7 @@
36
36
  ],
37
37
  "license": "SEE LICENSE IN LICENSE.md",
38
38
  "dependencies": {
39
- "remotion": "4.0.460"
39
+ "remotion": "4.0.461"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "react": ">=16.8.0",
@@ -45,12 +45,12 @@
45
45
  "devDependencies": {
46
46
  "@testing-library/react": "16.1.0",
47
47
  "@happy-dom/global-registrator": "14.5.1",
48
- "csstype": "^3.1.1",
48
+ "csstype": "3.2.3",
49
49
  "react": "19.2.3",
50
50
  "react-dom": "19.2.3",
51
51
  "webpack": "5.105.0",
52
52
  "zod": "4.3.6",
53
- "@remotion/eslint-config-internal": "4.0.460",
53
+ "@remotion/eslint-config-internal": "4.0.461",
54
54
  "eslint": "9.19.0",
55
55
  "@typescript/native-preview": "7.0.0-dev.20260217.1"
56
56
  },