@remotion/player 4.0.232 → 4.0.233

package/dist/esm/index.mjs

@@ -60,40 +60,40 @@ var FullscreenIcon = ({
     children: [
       /* @__PURE__ */ jsx("path", {
         d: `
-				M ${out} ${inset}
-				L ${middleInset} ${middleInset}
-				L ${inset} ${out}
-				`,
+\t\t\t\tM ${out} ${inset}
+\t\t\t\tL ${middleInset} ${middleInset}
+\t\t\t\tL ${inset} ${out}
+\t\t\t\t`,
         stroke: "#fff",
         strokeWidth,
         fill: "none"
       }),
       /* @__PURE__ */ jsx("path", {
         d: `
-				M ${viewSize - out} ${inset}
-				L ${viewSize - middleInset} ${middleInset}
-				L ${viewSize - inset} ${out}
-				`,
+\t\t\t\tM ${viewSize - out} ${inset}
+\t\t\t\tL ${viewSize - middleInset} ${middleInset}
+\t\t\t\tL ${viewSize - inset} ${out}
+\t\t\t\t`,
         stroke: "#fff",
         strokeWidth,
         fill: "none"
       }),
       /* @__PURE__ */ jsx("path", {
         d: `
-				M ${out} ${viewSize - inset}
-				L ${middleInset} ${viewSize - middleInset}
-				L ${inset} ${viewSize - out}
-				`,
+\t\t\t\tM ${out} ${viewSize - inset}
+\t\t\t\tL ${middleInset} ${viewSize - middleInset}
+\t\t\t\tL ${inset} ${viewSize - out}
+\t\t\t\t`,
         stroke: "#fff",
         strokeWidth,
         fill: "none"
       }),
       /* @__PURE__ */ jsx("path", {
         d: `
-				M ${viewSize - out} ${viewSize - inset}
-				L ${viewSize - middleInset} ${viewSize - middleInset}
-				L ${viewSize - inset} ${viewSize - out}
-				`,
+\t\t\t\tM ${viewSize - out} ${viewSize - inset}
+\t\t\t\tL ${viewSize - middleInset} ${viewSize - middleInset}
+\t\t\t\tL ${viewSize - inset} ${viewSize - out}
+\t\t\t\t`,
         stroke: "#fff",
         strokeWidth,
         fill: "none"
@@ -149,7 +149,7 @@ var BufferingIndicator = ({ type }) => {
       /* @__PURE__ */ jsx2("style", {
         type: "text/css",
         children: `
-				@keyframes ${remotionBufferingAnimation} {
+\t\t\t\t@keyframes ${remotionBufferingAnimation} {
           0% {
             rotate: 0deg;
           }
@@ -161,7 +161,7 @@ var BufferingIndicator = ({ type }) => {
         .${className} {
             animation: ${remotionBufferingAnimation} 1s linear infinite;
         }        
-			`
+\t\t\t`
       }),
       /* @__PURE__ */ jsx2("div", {
         style,
@@ -476,6 +476,19 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   });
 };
 
+// src/use-frame-imperative.ts
+import { useCallback, useRef } from "react";
+import { Internals as Internals4 } from "remotion";
+var useFrameImperative = () => {
+  const frame = Internals4.Timeline.useTimelinePosition();
+  const frameRef = useRef(frame);
+  frameRef.current = frame;
+  const getCurrentFrame = useCallback(() => {
+    return frameRef.current;
+  }, []);
+  return getCurrentFrame;
+};
+
 // src/use-hover-state.ts
 import { useEffect as useEffect3, useState as useState2 } from "react";
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
@@ -520,28 +533,28 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 
 // src/use-playback.ts
-import { useContext as useContext4, useEffect as useEffect6, useRef as useRef3 } from "react";
-import { Internals as Internals5 } from "remotion";
+import { useContext as useContext4, useEffect as useEffect6, useRef as useRef4 } from "react";
+import { Internals as Internals6 } from "remotion";
 
 // src/browser-mediasession.ts
 import { useEffect as useEffect4 } from "react";
 
 // src/use-player.ts
-import { useCallback, useContext as useContext3, useMemo, useRef, useState as useState3 } from "react";
-import { Internals as Internals4 } from "remotion";
+import { useCallback as useCallback2, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { Internals as Internals5 } from "remotion";
 var usePlayer = () => {
-  const [playing, setPlaying, imperativePlaying] = Internals4.Timeline.usePlayingState();
+  const [playing, setPlaying, imperativePlaying] = Internals5.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState3(false);
-  const frame = Internals4.Timeline.useTimelinePosition();
-  const playStart = useRef(frame);
-  const setFrame = Internals4.Timeline.useTimelineSetFrame();
-  const setTimelinePosition = Internals4.Timeline.useTimelineSetFrame();
-  const audioContext = useContext3(Internals4.SharedAudioContext);
-  const { audioAndVideoTags } = useContext3(Internals4.Timeline.TimelineContext);
-  const frameRef = useRef(frame);
+  const frame = Internals5.Timeline.useTimelinePosition();
+  const playStart = useRef2(frame);
+  const setFrame = Internals5.Timeline.useTimelineSetFrame();
+  const setTimelinePosition = Internals5.Timeline.useTimelineSetFrame();
+  const audioContext = useContext3(Internals5.SharedAudioContext);
+  const { audioAndVideoTags } = useContext3(Internals5.Timeline.TimelineContext);
+  const frameRef = useRef2(frame);
   frameRef.current = frame;
-  const video = Internals4.useVideo();
-  const config = Internals4.useUnsafeVideoConfig();
+  const video = Internals5.useVideo();
+  const config = Internals5.useUnsafeVideoConfig();
   const emitter = useContext3(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
@@ -549,19 +562,19 @@ var usePlayer = () => {
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext3(Internals4.BufferingContextReact);
+  const bufferingContext = useContext3(Internals5.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
   const { buffering } = bufferingContext;
-  const seek = useCallback((newFrame) => {
+  const seek = useCallback2((newFrame) => {
     if (video?.id) {
       setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
     }
     frameRef.current = newFrame;
     emitter.dispatchSeek(newFrame);
   }, [emitter, setTimelinePosition, video?.id]);
-  const play = useCallback((e) => {
+  const play = useCallback2((e) => {
     if (imperativePlaying.current) {
       return;
     }
@@ -586,14 +599,14 @@ var usePlayer = () => {
     seek,
     audioAndVideoTags
   ]);
-  const pause = useCallback(() => {
+  const pause = useCallback2(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       setPlaying(false);
       emitter.dispatchPause();
     }
   }, [emitter, imperativePlaying, setPlaying]);
-  const pauseAndReturnToPlayStart = useCallback(() => {
+  const pauseAndReturnToPlayStart = useCallback2(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       frameRef.current = playStart.current;
@@ -608,7 +621,7 @@ var usePlayer = () => {
     }
   }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
   const videoId = video?.id;
-  const frameBack = useCallback((frames) => {
+  const frameBack = useCallback2((frames) => {
     if (!videoId) {
       return null;
     }
@@ -623,7 +636,7 @@ var usePlayer = () => {
       };
     });
   }, [imperativePlaying, setFrame, videoId]);
-  const frameForward = useCallback((frames) => {
+  const frameForward = useCallback2((frames) => {
     if (!videoId) {
       return null;
     }
@@ -638,6 +651,14 @@ var usePlayer = () => {
       };
     });
   }, [videoId, imperativePlaying, lastFrame, setFrame]);
+  const getCurrentFrame = useFrameImperative();
+  const toggle = useCallback2((e) => {
+    if (imperativePlaying.current) {
+      pause();
+    } else {
+      play(e);
+    }
+  }, [imperativePlaying, pause, play]);
   const returnValue = useMemo(() => {
     return {
       frameBack,
@@ -649,27 +670,30 @@ var usePlayer = () => {
       pause,
       seek,
       isFirstFrame,
-      getCurrentFrame: () => frameRef.current,
+      getCurrentFrame,
       isPlaying: () => imperativePlaying.current,
       isBuffering: () => buffering.current,
       pauseAndReturnToPlayStart,
       hasPlayed,
-      remotionInternal_currentFrameRef: frameRef
+      remotionInternal_currentFrameRef: frameRef,
+      toggle
     };
   }, [
+    buffering,
+    emitter,
     frameBack,
     frameForward,
+    getCurrentFrame,
+    hasPlayed,
+    imperativePlaying,
+    isFirstFrame,
     isLastFrame,
-    emitter,
-    playing,
-    play,
     pause,
-    seek,
-    isFirstFrame,
     pauseAndReturnToPlayStart,
-    hasPlayed,
-    imperativePlaying,
-    buffering
+    play,
+    playing,
+    seek,
+    toggle
   ]);
   return returnValue;
 };
@@ -814,7 +838,7 @@ var calculateNextFrame = ({
 };
 
 // src/is-backgrounded.ts
-import { useEffect as useEffect5, useRef as useRef2 } from "react";
+import { useEffect as useEffect5, useRef as useRef3 } from "react";
 var getIsBackgrounded = () => {
   if (typeof document === "undefined") {
     return false;
@@ -822,7 +846,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef2(getIsBackgrounded());
+  const isBackgrounded = useRef3(getIsBackgrounded());
   useEffect5(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -842,17 +866,17 @@ var usePlayback = ({
   moveToBeginningWhenEnded,
   inFrame,
   outFrame,
-  frameRef,
-  browserMediaControlsBehavior
+  browserMediaControlsBehavior,
+  getCurrentFrame
 }) => {
-  const config = Internals5.useUnsafeVideoConfig();
-  const frame = Internals5.Timeline.useTimelinePosition();
+  const config = Internals6.useUnsafeVideoConfig();
+  const frame = Internals6.Timeline.useTimelinePosition();
   const { playing, pause, emitter } = usePlayer();
-  const setFrame = Internals5.Timeline.useTimelineSetFrame();
-  const buffering = useRef3(null);
+  const setFrame = Internals6.Timeline.useTimelineSetFrame();
+  const buffering = useRef4(null);
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateEvent = useRef3(null);
-  const context = useContext4(Internals5.BufferingContextReact);
+  const lastTimeUpdateEvent = useRef4(null);
+  const context = useContext4(Internals6.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -901,7 +925,7 @@ var usePlayback = ({
       const time = performance.now() - startedTime;
       const actualLastFrame = outFrame ?? config.durationInFrames - 1;
       const actualFirstFrame = inFrame ?? 0;
-      const currentFrame = frameRef.current;
+      const currentFrame = getCurrentFrame();
       const { nextFrame, framesToAdvance, hasEnded } = calculateNextFrame({
         time,
         currentFrame,
@@ -913,7 +937,7 @@ var usePlayback = ({
         shouldLoop: loop
       });
       framesAdvanced += framesToAdvance;
-      if (nextFrame !== frameRef.current && (!hasEnded || moveToBeginningWhenEnded)) {
+      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded)) {
         setFrame((c) => ({ ...c, [config.id]: nextFrame }));
       }
       if (hasEnded) {
@@ -973,27 +997,27 @@ var usePlayback = ({
     outFrame,
     moveToBeginningWhenEnded,
     isBackgroundedRef,
-    frameRef,
+    getCurrentFrame,
     buffering,
     context
   ]);
   useEffect6(() => {
     const interval = setInterval(() => {
-      if (lastTimeUpdateEvent.current === frameRef.current) {
+      if (lastTimeUpdateEvent.current === getCurrentFrame()) {
         return;
       }
-      emitter.dispatchTimeUpdate({ frame: frameRef.current });
-      lastTimeUpdateEvent.current = frameRef.current;
+      emitter.dispatchTimeUpdate({ frame: getCurrentFrame() });
+      lastTimeUpdateEvent.current = getCurrentFrame();
     }, 250);
     return () => clearInterval(interval);
-  }, [emitter, frameRef]);
+  }, [emitter, getCurrentFrame]);
   useEffect6(() => {
     emitter.dispatchFrameUpdate({ frame });
   }, [emitter, frame]);
 };
 
 // src/utils/use-element-size.ts
-import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo2, useState as useState4 } from "react";
 var elementSizeHooks = [];
 var updateAllElementsSizes = () => {
   for (const listener of elementSizeHooks) {
@@ -1046,7 +1070,7 @@ var useElementSize = (ref, options) => {
       });
     });
   }, [options.shouldApplyCssTransforms]);
-  const updateSize = useCallback2(() => {
+  const updateSize = useCallback3(() => {
     if (!ref.current) {
       return;
     }
@@ -1115,29 +1139,28 @@ import {
   useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect,
-  useMemo as useMemo13,
-  useRef as useRef10,
+  useMemo as useMemo14,
+  useRef as useRef11,
   useState as useState13
 } from "react";
-import { Composition, Internals as Internals12 } from "remotion";
+import { Composition, Internals as Internals13 } from "remotion";
 
 // src/PlayerUI.tsx
-import React8, {
+import React9, {
   Suspense,
   forwardRef,
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useContext as useContext6,
   useEffect as useEffect12,
   useImperativeHandle,
-  useMemo as useMemo11,
-  useRef as useRef9,
+  useMemo as useMemo12,
+  useRef as useRef10,
   useState as useState11
 } from "react";
-import { Internals as Internals10 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 
 // src/PlayerControls.tsx
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef7, useState as useState10 } from "react";
-import { Internals as Internals9 } from "remotion";
+import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef8, useState as useState10 } from "react";
 
 // src/DefaultPlayPauseButton.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -1154,11 +1177,11 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
 };
 
 // src/MediaVolumeSlider.tsx
-import { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef4, useState as useState6 } from "react";
-import { Internals as Internals6 } from "remotion";
+import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import { Internals as Internals7 } from "remotion";
 
 // src/render-volume-slider.tsx
-import React3, { useCallback as useCallback3, useMemo as useMemo3, useState as useState5 } from "react";
+import React3, { useCallback as useCallback4, useMemo as useMemo3, useState as useState5 } from "react";
 import { random } from "remotion";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var KNOB_SIZE = 12;
@@ -1192,7 +1215,7 @@ var DefaultVolumeSlider = ({
   }, [isVertical]);
   const randomId = typeof React3.useId === "undefined" ? "volume-slider" : React3.useId();
   const [randomClass] = useState5(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
-  const onVolumeChange = useCallback3((e) => {
+  const onVolumeChange = useCallback4((e) => {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
   const inputStyle = useMemo3(() => {
@@ -1204,9 +1227,9 @@ var DefaultVolumeSlider = ({
       height: BAR_HEIGHT,
       width: VOLUME_SLIDER_WIDTH,
       backgroundImage: `linear-gradient(
-				to right,
-				white ${volume * 100}%, rgba(255, 255, 255, 0) ${volume * 100}%
-			)`
+\t\t\t\tto right,
+\t\t\t\twhite ${volume * 100}%, rgba(255, 255, 255, 0) ${volume * 100}%
+\t\t\t)`
     };
     if (isVertical) {
       return {
@@ -1217,23 +1240,23 @@ var DefaultVolumeSlider = ({
     return commonStyle;
   }, [isVertical, volume]);
   const sliderStyle = `
-	.${randomClass}::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		background-color: white;
-		border-radius: ${KNOB_SIZE / 2}px;
-		box-shadow: 0 0 2px black;
-		height: ${KNOB_SIZE}px;
-		width: ${KNOB_SIZE}px;
-	}
+\t.${randomClass}::-webkit-slider-thumb {
+\t\t-webkit-appearance: none;
+\t\tbackground-color: white;
+\t\tborder-radius: ${KNOB_SIZE / 2}px;
+\t\tbox-shadow: 0 0 2px black;
+\t\theight: ${KNOB_SIZE}px;
+\t\twidth: ${KNOB_SIZE}px;
+\t}
 
-	.${randomClass}::-moz-range-thumb {
-		-webkit-appearance: none;
-		background-color: white;
-		border-radius: ${KNOB_SIZE / 2}px;
-		box-shadow: 0 0 2px black;
-		height: ${KNOB_SIZE}px;
-		width: ${KNOB_SIZE}px;
-	}
+\t.${randomClass}::-moz-range-thumb {
+\t\t-webkit-appearance: none;
+\t\tbackground-color: white;
+\t\tborder-radius: ${KNOB_SIZE / 2}px;
+\t\tbox-shadow: 0 0 2px black;
+\t\theight: ${KNOB_SIZE}px;
+\t\twidth: ${KNOB_SIZE}px;
+\t}
 `;
   return /* @__PURE__ */ jsxs3("div", {
     style: sliderContainer,
@@ -1269,13 +1292,13 @@ var renderDefaultVolumeSlider = (props) => {
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var VOLUME_SLIDER_WIDTH = 100;
 var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
-  const [mediaMuted, setMediaMuted] = Internals6.useMediaMutedState();
-  const [mediaVolume, setMediaVolume] = Internals6.useMediaVolumeState();
+  const [mediaMuted, setMediaMuted] = Internals7.useMediaMutedState();
+  const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
   const [focused, setFocused] = useState6(false);
-  const parentDivRef = useRef4(null);
-  const inputRef = useRef4(null);
+  const parentDivRef = useRef5(null);
+  const inputRef = useRef5(null);
   const hover = useHoverState(parentDivRef, false);
-  const onBlur = useCallback4(() => {
+  const onBlur = useCallback5(() => {
     setTimeout(() => {
       if (inputRef.current && document.activeElement !== inputRef.current) {
         setFocused(false);
@@ -1283,7 +1306,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     }, 10);
   }, []);
   const isVolume0 = mediaVolume === 0;
-  const onClick = useCallback4(() => {
+  const onClick = useCallback5(() => {
     if (isVolume0) {
       setMediaVolume(1);
       setMediaMuted(false);
@@ -1314,7 +1337,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       padding: 0
     };
   }, []);
-  const renderDefaultMuteButton = useCallback4(({ muted, volume }) => {
+  const renderDefaultMuteButton = useCallback5(({ muted, volume }) => {
     const isMutedOrZero = muted || volume === 0;
     return /* @__PURE__ */ jsx6("button", {
       "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
@@ -1331,7 +1354,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     return renderMuteButton ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
   }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
   const volumeSlider = useMemo4(() => {
-    return (focused || hover) && !mediaMuted && !Internals6.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
+    return (focused || hover) && !mediaMuted && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
       onBlur: () => setFocused(false),
@@ -1359,19 +1382,19 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 
 // src/PlaybackrateControl.tsx
 import {
-  useCallback as useCallback5,
+  useCallback as useCallback6,
   useContext as useContext5,
   useEffect as useEffect9,
   useMemo as useMemo5,
   useState as useState8
 } from "react";
-import { Internals as Internals7 } from "remotion";
+import { Internals as Internals8 } from "remotion";
 
 // src/utils/use-component-visible.ts
-import { useEffect as useEffect8, useRef as useRef5, useState as useState7 } from "react";
+import { useEffect as useEffect8, useRef as useRef6, useState as useState7 } from "react";
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
-  const ref = useRef5(null);
+  const ref = useRef6(null);
   useEffect8(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -1417,16 +1440,16 @@ var Checkmark = () => /* @__PURE__ */ jsx7("svg", {
   })
 });
 var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
-  const onClick = useCallback5((e) => {
+  const onClick = useCallback6((e) => {
     e.stopPropagation();
     e.preventDefault();
     onSelect(rate);
   }, [onSelect, rate]);
   const [hovered, setHovered] = useState8(false);
-  const onMouseEnter = useCallback5(() => {
+  const onMouseEnter = useCallback6(() => {
     setHovered(true);
   }, []);
-  const onMouseLeave = useCallback5(() => {
+  const onMouseLeave = useCallback6(() => {
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
@@ -1453,7 +1476,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
   }, rate);
 };
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-  const { setPlaybackRate, playbackRate } = useContext5(Internals7.Timeline.TimelineContext);
+  const { setPlaybackRate, playbackRate } = useContext5(Internals8.Timeline.TimelineContext);
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
   useEffect9(() => {
     const listener = (e) => {
@@ -1493,7 +1516,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate,
     setIsComponentVisible
   ]);
-  const onSelect = useCallback5((rate) => {
+  const onSelect = useCallback6((rate) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
@@ -1555,8 +1578,8 @@ var button = {
 };
 var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
-  const { playbackRate } = useContext5(Internals7.Timeline.TimelineContext);
-  const onClick = useCallback5((e) => {
+  const { playbackRate } = useContext5(Internals8.Timeline.TimelineContext);
+  const onClick = useCallback6((e) => {
     e.stopPropagation();
     e.preventDefault();
     setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
@@ -1587,8 +1610,8 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef6, useState as useState9 } from "react";
-import { Internals as Internals8, interpolate } from "remotion";
+import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
+import { Internals as Internals9, interpolate } from "remotion";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
   const pos = clientX;
@@ -1625,19 +1648,19 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef6(null);
+  const containerRef = useRef7(null);
   const barHovered = useHoverState(containerRef, false);
   const size = useElementSize(containerRef, {
     triggerOnWindowResize: true,
     shouldApplyCssTransforms: true
   });
   const { seek, play, pause, playing } = usePlayer();
-  const frame = Internals8.Timeline.useTimelinePosition();
+  const frame = Internals9.Timeline.useTimelinePosition();
   const [dragging, setDragging] = useState9({
     dragging: false
   });
   const width = size?.width ?? 0;
-  const onPointerDown = useCallback6((e) => {
+  const onPointerDown = useCallback7((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -1651,7 +1674,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     });
     onSeekStart();
   }, [durationInFrames, width, pause, seek, playing, onSeekStart]);
-  const onPointerMove = useCallback6((e) => {
+  const onPointerMove = useCallback7((e) => {
     if (!size) {
       throw new Error("Player has no size");
     }
@@ -1662,7 +1685,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
     seek(_frame);
   }, [dragging.dragging, durationInFrames, seek, size]);
-  const onPointerUp = useCallback6(() => {
+  const onPointerUp = useCallback7(() => {
     setDragging({
       dragging: false
     });
@@ -1698,18 +1721,18 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       backgroundColor: "white",
       left: Math.max(0, frame / Math.max(1, durationInFrames - 1) * width - KNOB_SIZE2 / 2),
       boxShadow: "0 0 2px black",
-      opacity: Number(barHovered)
+      opacity: Number(barHovered || dragging.dragging)
     };
-  }, [barHovered, durationInFrames, frame, width]);
+  }, [barHovered, dragging.dragging, durationInFrames, frame, width]);
   const fillStyle = useMemo6(() => {
     return {
       height: BAR_HEIGHT2,
       backgroundColor: "rgba(255, 255, 255, 1)",
-      width: (frame - (inFrame ?? 0)) / (durationInFrames - 1) * 100 + "%",
-      marginLeft: (inFrame ?? 0) / (durationInFrames - 1) * 100 + "%",
+      width: (frame - (inFrame ?? 0)) / (durationInFrames - 1) * width,
+      marginLeft: (inFrame ?? 0) / (durationInFrames - 1) * width,
       borderRadius: BAR_HEIGHT2 / 2
     };
-  }, [durationInFrames, frame, inFrame]);
+  }, [durationInFrames, frame, inFrame, width]);
   const active = useMemo6(() => {
     return {
       height: BAR_HEIGHT2,
@@ -1743,6 +1766,10 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
   });
 };
 
+// src/PlayerTimeLabel.tsx
+import { useMemo as useMemo7 } from "react";
+import { Internals as Internals10 } from "remotion";
+
 // src/format-time.ts
 var formatTime = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -1750,15 +1777,39 @@ var formatTime = (timeInSeconds) => {
   return `${String(minutes)}:${String(seconds).padStart(2, "0")}`;
 };
 
+// src/PlayerTimeLabel.tsx
+import { jsxs as jsxs7 } from "react/jsx-runtime";
+var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
+  const frame = Internals10.Timeline.useTimelinePosition();
+  const timeLabel = useMemo7(() => {
+    return {
+      color: "white",
+      fontFamily: "sans-serif",
+      fontSize: 14,
+      maxWidth: maxTimeLabelWidth === null ? undefined : maxTimeLabelWidth,
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    };
+  }, [maxTimeLabelWidth]);
+  return /* @__PURE__ */ jsxs7("div", {
+    style: timeLabel,
+    children: [
+      formatTime(frame / fps),
+      " / ",
+      formatTime(durationInFrames / fps)
+    ]
+  });
+};
+
 // src/use-video-controls-resize.ts
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 var X_SPACER = 10;
 var X_PADDING = 12;
 var useVideoControlsResize = ({
   allowFullscreen: allowFullScreen,
   playerWidth
 }) => {
-  const resizeInfo = useMemo7(() => {
+  const resizeInfo = useMemo8(() => {
     const playPauseIconSize = ICON_SIZE;
     const volumeIconSize = ICON_SIZE;
     const _fullscreenIconSize = allowFullScreen ? fullscreenIconSize : 0;
@@ -1778,7 +1829,7 @@ var useVideoControlsResize = ({
 };
 
 // src/PlayerControls.tsx
-import { jsx as jsx9, jsxs as jsxs7, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
 var gradientSteps = [
   0,
   0.013,
@@ -1861,7 +1912,6 @@ var Controls = ({
   durationInFrames,
   isFullscreen,
   fps,
-  player,
   showVolumeControls,
   onFullscreenButtonClick,
   allowFullscreen,
@@ -1883,10 +1933,11 @@ var Controls = ({
   onPointerDown,
   onDoubleClick,
   renderMuteButton,
-  renderVolumeSlider
+  renderVolumeSlider,
+  playing,
+  toggle
 }) => {
-  const playButtonRef = useRef7(null);
-  const frame = Internals9.Timeline.useTimelinePosition();
+  const playButtonRef = useRef8(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -1914,20 +1965,20 @@ var Controls = ({
     }
     throw new TypeError("initiallyShowControls must be a number or a boolean");
   });
-  const containerCss = useMemo8(() => {
-    const shouldShow = hovered || !player.playing || shouldShowInitially || alwaysShowControls;
+  const containerCss = useMemo9(() => {
+    const shouldShow = hovered || !playing || shouldShowInitially || alwaysShowControls;
     return {
       ...containerStyle2,
       opacity: Number(shouldShow)
     };
-  }, [hovered, shouldShowInitially, player.playing, alwaysShowControls]);
+  }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
   useEffect11(() => {
     if (playButtonRef.current && spaceKeyToPlayOrPause) {
       playButtonRef.current.focus({
         preventScroll: true
       });
     }
-  }, [player.playing, spaceKeyToPlayOrPause]);
+  }, [playing, spaceKeyToPlayOrPause]);
   useEffect11(() => {
     setSupportsFullscreen((typeof document !== "undefined" && (document.fullscreenEnabled || document.webkitFullscreenEnabled)) ?? false);
   }, []);
@@ -1943,17 +1994,7 @@ var Controls = ({
       clearInterval(timeout);
     };
   }, [shouldShowInitially]);
-  const timeLabel = useMemo8(() => {
-    return {
-      color: "white",
-      fontFamily: "sans-serif",
-      fontSize: 14,
-      maxWidth: maxTimeLabelWidth === null ? undefined : maxTimeLabelWidth,
-      overflow: "hidden",
-      textOverflow: "ellipsis"
-    };
-  }, [maxTimeLabelWidth]);
-  const playbackRates = useMemo8(() => {
+  const playbackRates = useMemo9(() => {
     if (showPlaybackRateControl === true) {
       return [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3];
     }
@@ -1970,50 +2011,50 @@ var Controls = ({
     }
     return null;
   }, [showPlaybackRateControl]);
-  const ref = useRef7(null);
-  const flexRef = useRef7(null);
-  const onPointerDownIfContainer = useCallback7((e) => {
+  const ref = useRef8(null);
+  const flexRef = useRef8(null);
+  const onPointerDownIfContainer = useCallback8((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
     }
   }, [onPointerDown]);
-  const onDoubleClickIfContainer = useCallback7((e) => {
+  const onDoubleClickIfContainer = useCallback8((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onDoubleClick?.(e);
     }
   }, [onDoubleClick]);
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     ref,
     style: containerCss,
     onPointerDown: onPointerDownIfContainer,
     onDoubleClick: onDoubleClickIfContainer,
     children: [
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         ref: flexRef,
         style: controlsRow,
         children: [
-          /* @__PURE__ */ jsxs7("div", {
+          /* @__PURE__ */ jsxs8("div", {
             style: leftPartStyle,
             children: [
               /* @__PURE__ */ jsx9("button", {
                 ref: playButtonRef,
                 type: "button",
                 style: playerButtonStyle,
-                onClick: player.playing ? player.pause : player.play,
-                "aria-label": player.playing ? "Pause video" : "Play video",
-                title: player.playing ? "Pause video" : "Play video",
+                onClick: toggle,
+                "aria-label": playing ? "Pause video" : "Play video",
+                title: playing ? "Pause video" : "Play video",
                 children: renderPlayPauseButton === null ? /* @__PURE__ */ jsx9(DefaultPlayPauseButton, {
                   buffering,
-                  playing: player.playing
+                  playing
                 }) : renderPlayPauseButton({
-                  playing: player.playing,
+                  playing,
                   isBuffering: buffering
                 }) ?? /* @__PURE__ */ jsx9(DefaultPlayPauseButton, {
                   buffering,
-                  playing: player.playing
+                  playing
                 })
               }),
-              showVolumeControls ? /* @__PURE__ */ jsxs7(Fragment2, {
+              showVolumeControls ? /* @__PURE__ */ jsxs8(Fragment2, {
                 children: [
                   /* @__PURE__ */ jsx9("div", {
                     style: xSpacer
@@ -2028,13 +2069,10 @@ var Controls = ({
               /* @__PURE__ */ jsx9("div", {
                 style: xSpacer
               }),
-              /* @__PURE__ */ jsxs7("div", {
-                style: timeLabel,
-                children: [
-                  formatTime(frame / fps),
-                  " / ",
-                  formatTime(durationInFrames / fps)
-                ]
+              /* @__PURE__ */ jsx9(PlayerTimeLabel, {
+                durationInFrames,
+                fps,
+                maxTimeLabelWidth
               }),
               /* @__PURE__ */ jsx9("div", {
                 style: xSpacer
@@ -2081,7 +2119,7 @@ var Controls = ({
 };
 
 // src/error-boundary.tsx
-import React7 from "react";
+import React8 from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var errorStyle = {
   display: "flex",
@@ -2092,7 +2130,7 @@ var errorStyle = {
   width: "100%"
 };
 
-class ErrorBoundary extends React7.Component {
+class ErrorBoundary extends React8.Component {
   state = { hasError: null };
   static getDerivedStateFromError(error) {
     return { hasError: error };
@@ -2114,13 +2152,15 @@ class ErrorBoundary extends React7.Component {
 }
 
 // src/player-css-classname.ts
-var PLAYER_CSS_CLASSNAME = "__remotion-player";
+var playerCssClassname = (override) => {
+  return override ?? "__remotion-player";
+};
 
 // src/utils/is-node.ts
 var IS_NODE = typeof document === "undefined";
 
 // src/utils/use-click-prevention-on-double-click.ts
-import { useCallback as useCallback9, useMemo as useMemo10 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo11 } from "react";
 
 // src/utils/cancellable-promise.ts
 var cancellablePromise = (promise) => {
@@ -2148,17 +2188,17 @@ var cancellablePromise = (promise) => {
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 
 // src/utils/use-cancellable-promises.ts
-import { useCallback as useCallback8, useMemo as useMemo9, useRef as useRef8 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo10, useRef as useRef9 } from "react";
 var useCancellablePromises = () => {
-  const pendingPromises = useRef8([]);
-  const appendPendingPromise = useCallback8((promise) => {
+  const pendingPromises = useRef9([]);
+  const appendPendingPromise = useCallback9((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
-  const removePendingPromise = useCallback8((promise) => {
+  const removePendingPromise = useCallback9((promise) => {
     pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
   }, []);
-  const clearPendingPromises = useCallback8(() => pendingPromises.current.map((p) => p.cancel()), []);
-  const api = useMemo9(() => ({
+  const clearPendingPromises = useCallback9(() => pendingPromises.current.map((p) => p.cancel()), []);
+  const api = useMemo10(() => ({
     appendPendingPromise,
     removePendingPromise,
     clearPendingPromises
@@ -2169,7 +2209,7 @@ var useCancellablePromises = () => {
 // src/utils/use-click-prevention-on-double-click.ts
 var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
   const api = useCancellablePromises();
-  const handleClick = useCallback9(async (e) => {
+  const handleClick = useCallback10(async (e) => {
     if (e instanceof PointerEvent ? e.pointerType === "touch" : e.nativeEvent.pointerType === "touch") {
       onClick(e);
       return;
@@ -2189,18 +2229,18 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
       }
     }
   }, [api, onClick]);
-  const handlePointerDown = useCallback9(() => {
+  const handlePointerDown = useCallback10(() => {
     document.addEventListener("pointerup", (newEvt) => {
       handleClick(newEvt);
     }, {
       once: true
     });
   }, [handleClick]);
-  const handleDoubleClick = useCallback9(() => {
+  const handleDoubleClick = useCallback10(() => {
     api.clearPendingPromises();
     onDoubleClick();
   }, [api, onDoubleClick]);
-  const returnValue = useMemo10(() => {
+  const returnValue = useMemo11(() => {
     if (!doubleClickToFullscreen) {
       return { handlePointerDown: onClick, handleDoubleClick: () => {
         return;
@@ -2212,8 +2252,8 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
 };
 
 // src/PlayerUI.tsx
-import { jsx as jsx11, jsxs as jsxs8, Fragment as Fragment3 } from "react/jsx-runtime";
-var reactVersion = React8.version.split(".")[0];
+import { jsx as jsx11, jsxs as jsxs9, Fragment as Fragment3 } from "react/jsx-runtime";
+var reactVersion = React9.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
@@ -2252,11 +2292,12 @@ var PlayerUI = ({
   bufferStateDelayInMilliseconds,
   hideControlsWhenPointerDoesntMove,
   overflowVisible,
-  browserMediaControlsBehavior
+  browserMediaControlsBehavior,
+  overrideInternalClassName
 }, ref) => {
-  const config = Internals10.useUnsafeVideoConfig();
-  const video = Internals10.useVideo();
-  const container = useRef9(null);
+  const config = Internals11.useUnsafeVideoConfig();
+  const video = Internals11.useVideo();
+  const container = useRef10(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -2265,20 +2306,21 @@ var PlayerUI = ({
   const [shouldAutoplay, setShouldAutoPlay] = useState11(autoPlay);
   const [isFullscreen, setIsFullscreen] = useState11(() => false);
   const [seeking, setSeeking] = useState11(false);
-  const supportsFullScreen = useMemo11(() => {
+  const supportsFullScreen = useMemo12(() => {
     if (typeof document === "undefined") {
       return false;
     }
     return Boolean(document.fullscreenEnabled || document.webkitFullscreenEnabled);
   }, []);
   const player = usePlayer();
+  const playerToggle = player.toggle;
   usePlayback({
     loop,
     playbackRate,
     moveToBeginningWhenEnded,
     inFrame,
     outFrame,
-    frameRef: player.remotionInternal_currentFrameRef,
+    getCurrentFrame: player.getCurrentFrame,
     browserMediaControlsBehavior
   });
   useEffect12(() => {
@@ -2303,14 +2345,10 @@ var PlayerUI = ({
       document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
     };
   }, []);
-  const toggle = useCallback10((e) => {
-    if (player.isPlaying()) {
-      player.pause();
-    } else {
-      player.play(e);
-    }
-  }, [player]);
-  const requestFullscreen = useCallback10(() => {
+  const toggle = useCallback11((e) => {
+    playerToggle(e);
+  }, [playerToggle]);
+  const requestFullscreen = useCallback11(() => {
     if (!allowFullscreen) {
       throw new Error("allowFullscreen is false");
     }
@@ -2326,7 +2364,7 @@ var PlayerUI = ({
       container.current.requestFullscreen();
     }
   }, [allowFullscreen, supportsFullScreen]);
-  const exitFullscreen = useCallback10(() => {
+  const exitFullscreen = useCallback11(() => {
     if (document.webkitExitFullscreen) {
       document.webkitExitFullscreen();
     } else {
@@ -2358,7 +2396,7 @@ var PlayerUI = ({
     };
   }, [player.emitter]);
   const durationInFrames = config?.durationInFrames ?? 1;
-  const layout = useMemo11(() => {
+  const layout = useMemo12(() => {
     if (!config || !canvasSize) {
       return null;
     }
@@ -2370,7 +2408,7 @@ var PlayerUI = ({
     });
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef9(false);
+  const initialScaleIgnored = useRef10(false);
   useEffect12(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
@@ -2378,8 +2416,8 @@ var PlayerUI = ({
     }
     player.emitter.dispatchScaleChange(scale);
   }, [player.emitter, scale]);
-  const { setMediaVolume, setMediaMuted } = useContext6(Internals10.SetMediaVolumeContext);
-  const { mediaMuted, mediaVolume } = useContext6(Internals10.MediaVolumeContext);
+  const { setMediaVolume, setMediaMuted } = useContext6(Internals11.SetMediaVolumeContext);
+  const { mediaMuted, mediaVolume } = useContext6(Internals11.MediaVolumeContext);
   useEffect12(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
@@ -2507,7 +2545,7 @@ var PlayerUI = ({
     scale
   ]);
   const VideoComponent = video ? video.component : null;
-  const outerStyle = useMemo11(() => {
+  const outerStyle = useMemo12(() => {
     return calculateOuterStyle({
       canvasSize,
       config,
@@ -2516,10 +2554,10 @@ var PlayerUI = ({
       layout
     });
   }, [canvasSize, config, layout, overflowVisible, style]);
-  const outer = useMemo11(() => {
+  const outer = useMemo12(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);
-  const containerStyle3 = useMemo11(() => {
+  const containerStyle3 = useMemo12(() => {
     return calculateContainerStyle({
       canvasSize,
       config,
@@ -2528,32 +2566,34 @@ var PlayerUI = ({
       overflowVisible
     });
   }, [canvasSize, config, layout, overflowVisible, scale]);
-  const onError = useCallback10((error) => {
-    player.pause();
-    player.emitter.dispatchError(error);
-  }, [player]);
-  const onFullscreenButtonClick = useCallback10((e) => {
+  const playerPause = player.pause;
+  const playerDispatchError = player.emitter.dispatchError;
+  const onError = useCallback11((error) => {
+    playerPause();
+    playerDispatchError(error);
+  }, [playerDispatchError, playerPause]);
+  const onFullscreenButtonClick = useCallback11((e) => {
     e.stopPropagation();
     requestFullscreen();
   }, [requestFullscreen]);
-  const onExitFullscreenButtonClick = useCallback10((e) => {
+  const onExitFullscreenButtonClick = useCallback11((e) => {
     e.stopPropagation();
     exitFullscreen();
   }, [exitFullscreen]);
-  const onSingleClick = useCallback10((e) => {
+  const onSingleClick = useCallback11((e) => {
     const rightClick = e instanceof MouseEvent ? e.button === 2 : e.nativeEvent.button;
     if (rightClick) {
       return;
     }
     toggle(e);
   }, [toggle]);
-  const onSeekStart = useCallback10(() => {
+  const onSeekStart = useCallback11(() => {
     setSeeking(true);
   }, []);
-  const onSeekEnd = useCallback10(() => {
+  const onSeekEnd = useCallback11(() => {
     setSeeking(false);
   }, []);
-  const onDoubleClick = useCallback10(() => {
+  const onDoubleClick = useCallback11(() => {
     if (isFullscreen) {
       exitFullscreen();
     } else {
@@ -2567,14 +2607,14 @@ var PlayerUI = ({
       setShouldAutoPlay(false);
     }
   }, [shouldAutoplay, player]);
-  const loadingMarkup = useMemo11(() => {
+  const loadingMarkup = useMemo12(() => {
     return renderLoading ? renderLoading({
       height: outerStyle.height,
       width: outerStyle.width,
       isBuffering: showBufferIndicator
     }) : null;
   }, [outerStyle.height, outerStyle.width, renderLoading, showBufferIndicator]);
-  const currentScale = useMemo11(() => {
+  const currentScale = useMemo12(() => {
     return {
       type: "scale",
       scale
@@ -2598,20 +2638,20 @@ var PlayerUI = ({
     showPosterWhenBuffering && showBufferIndicator && player.isPlaying()
   ].some(Boolean);
   const { left, top, width, height, ...outerWithoutScale } = outer;
-  const content = /* @__PURE__ */ jsxs8(Fragment3, {
+  const content = /* @__PURE__ */ jsxs9(Fragment3, {
     children: [
       /* @__PURE__ */ jsx11("div", {
         style: outer,
         onPointerDown: clickToPlay ? handlePointerDown : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
-        children: /* @__PURE__ */ jsxs8("div", {
+        children: /* @__PURE__ */ jsxs9("div", {
           style: containerStyle3,
-          className: PLAYER_CSS_CLASSNAME,
+          className: playerCssClassname(overrideInternalClassName),
           children: [
             VideoComponent ? /* @__PURE__ */ jsx11(ErrorBoundary, {
               onError,
               errorFallback,
-              children: /* @__PURE__ */ jsx11(Internals10.CurrentScaleContext.Provider, {
+              children: /* @__PURE__ */ jsx11(Internals11.CurrentScaleContext.Provider, {
                 value: currentScale,
                 children: /* @__PURE__ */ jsx11(VideoComponent, {
                   ...video?.props ?? {},
@@ -2640,8 +2680,9 @@ var PlayerUI = ({
       }) : null,
       controls ? /* @__PURE__ */ jsx11(Controls, {
         fps: config.fps,
+        playing: player.playing,
+        toggle: player.toggle,
         durationInFrames: config.durationInFrames,
-        player,
         containerRef: container,
         onFullscreenButtonClick,
         isFullscreen,
@@ -2689,8 +2730,8 @@ var PlayerUI = ({
 var PlayerUI_default = forwardRef(PlayerUI);
 
 // src/SharedPlayerContext.tsx
-import { useCallback as useCallback11, useMemo as useMemo12, useState as useState12 } from "react";
-import { Internals as Internals11 } from "remotion";
+import { useCallback as useCallback12, useMemo as useMemo13, useState as useState12 } from "react";
+import { Internals as Internals12 } from "remotion";
 
 // src/volume-persistance.ts
 var VOLUME_PERSISTANCE_KEY = "remotion.volumePreference";
@@ -2730,7 +2771,7 @@ var SharedPlayerContexts = ({
   numberOfSharedAudioTags,
   initiallyMuted
 }) => {
-  const compositionManagerContext = useMemo12(() => {
+  const compositionManagerContext = useMemo13(() => {
     const context = {
       compositions: [
         {
@@ -2776,38 +2817,38 @@ var SharedPlayerContexts = ({
   }, [component, durationInFrames, compositionHeight, compositionWidth, fps]);
   const [mediaMuted, setMediaMuted] = useState12(() => initiallyMuted);
   const [mediaVolume, setMediaVolume] = useState12(() => getPreferredVolume());
-  const mediaVolumeContextValue = useMemo12(() => {
+  const mediaVolumeContextValue = useMemo13(() => {
     return {
       mediaMuted,
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeAndPersist = useCallback11((vol) => {
+  const setMediaVolumeAndPersist = useCallback12((vol) => {
     setMediaVolume(vol);
     persistVolume(vol);
   }, []);
-  const setMediaVolumeContextValue = useMemo12(() => {
+  const setMediaVolumeContextValue = useMemo13(() => {
     return {
       setMediaMuted,
       setMediaVolume: setMediaVolumeAndPersist
     };
   }, [setMediaVolumeAndPersist]);
-  return /* @__PURE__ */ jsx12(Internals11.CanUseRemotionHooksProvider, {
-    children: /* @__PURE__ */ jsx12(Internals11.Timeline.TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx12(Internals12.CanUseRemotionHooksProvider, {
+    children: /* @__PURE__ */ jsx12(Internals12.Timeline.TimelineContext.Provider, {
       value: timelineContext,
-      children: /* @__PURE__ */ jsx12(Internals11.CompositionManager.Provider, {
+      children: /* @__PURE__ */ jsx12(Internals12.CompositionManager.Provider, {
         value: compositionManagerContext,
-        children: /* @__PURE__ */ jsx12(Internals11.ResolveCompositionConfig, {
-          children: /* @__PURE__ */ jsx12(Internals11.PrefetchProvider, {
-            children: /* @__PURE__ */ jsx12(Internals11.DurationsContextProvider, {
-              children: /* @__PURE__ */ jsx12(Internals11.MediaVolumeContext.Provider, {
+        children: /* @__PURE__ */ jsx12(Internals12.ResolveCompositionConfig, {
+          children: /* @__PURE__ */ jsx12(Internals12.PrefetchProvider, {
+            children: /* @__PURE__ */ jsx12(Internals12.DurationsContextProvider, {
+              children: /* @__PURE__ */ jsx12(Internals12.MediaVolumeContext.Provider, {
                 value: mediaVolumeContextValue,
-                children: /* @__PURE__ */ jsx12(Internals11.SetMediaVolumeContext.Provider, {
+                children: /* @__PURE__ */ jsx12(Internals12.SetMediaVolumeContext.Provider, {
                   value: setMediaVolumeContextValue,
-                  children: /* @__PURE__ */ jsx12(Internals11.SharedAudioContextProvider, {
+                  children: /* @__PURE__ */ jsx12(Internals12.SharedAudioContextProvider, {
                     numberOfAudioTags: numberOfSharedAudioTags,
                     component,
-                    children: /* @__PURE__ */ jsx12(Internals11.BufferingProvider, {
+                    children: /* @__PURE__ */ jsx12(Internals12.BufferingProvider, {
                       children
                     })
                   })
@@ -2943,7 +2984,7 @@ var PlayerFn = ({
   spaceKeyToPlayOrPause = true,
   moveToBeginningWhenEnded = true,
   numberOfSharedAudioTags = 5,
-  errorFallback = () => "\u26A0\uFE0F",
+  errorFallback = () => "⚠️",
   playbackRate = 1,
   renderLoading,
   className: className2,
@@ -2968,6 +3009,7 @@ var PlayerFn = ({
   overflowVisible = false,
   renderMuteButton,
   browserMediaControlsBehavior: passedBrowserMediaControlsBehavior,
+  overrideInternalClassName,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -2985,16 +3027,16 @@ var PlayerFn = ({
   if (componentForValidation === Composition) {
     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.`);
   }
-  const component = Internals12.useLazyComponent(componentProps);
+  const component = Internals13.useLazyComponent(componentProps);
   validateInitialFrame({ initialFrame, durationInFrames });
   const [frame, setFrame] = useState13(() => ({
     [PLAYER_COMP_ID]: initialFrame ?? 0
   }));
   const [playing, setPlaying] = useState13(false);
   const [rootId] = useState13("player-comp");
-  const rootRef = useRef10(null);
-  const audioAndVideoTags = useRef10([]);
-  const imperativePlaying = useRef10(false);
+  const rootRef = useRef11(null);
+  const audioAndVideoTags = useRef11([]);
+  const imperativePlaying = useRef11(false);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState13(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -3047,7 +3089,7 @@ var PlayerFn = ({
     setCurrentPlaybackRate(playbackRate);
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
-  const timelineContextValue = useMemo13(() => {
+  const timelineContextValue = useMemo14(() => {
     return {
       frame,
       playing,
@@ -3060,7 +3102,7 @@ var PlayerFn = ({
       audioAndVideoTags
     };
   }, [frame, currentPlaybackRate, playing, rootId]);
-  const setTimelineContextValue = useMemo13(() => {
+  const setTimelineContextValue = useMemo14(() => {
     return {
       setFrame,
       setPlaying
@@ -3068,16 +3110,16 @@ var PlayerFn = ({
   }, [setFrame]);
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
-      Internals12.CSSUtils.injectCSS(Internals12.CSSUtils.makeDefaultPreviewCSS(`.${PLAYER_CSS_CLASSNAME}`, "#fff"));
-    }, []);
+      Internals13.CSSUtils.injectCSS(Internals13.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
+    }, [overrideInternalClassName]);
   }
-  const actualInputProps = useMemo13(() => inputProps ?? {}, [inputProps]);
-  const browserMediaControlsBehavior = useMemo13(() => {
+  const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
+  const browserMediaControlsBehavior = useMemo14(() => {
     return passedBrowserMediaControlsBehavior ?? {
       mode: "prevent-media-session"
     };
   }, [passedBrowserMediaControlsBehavior]);
-  return /* @__PURE__ */ jsx13(Internals12.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx13(Internals13.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx13(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
       component,
@@ -3087,7 +3129,7 @@ var PlayerFn = ({
       fps,
       numberOfSharedAudioTags,
       initiallyMuted,
-      children: /* @__PURE__ */ jsx13(Internals12.Timeline.SetTimelineContext.Provider, {
+      children: /* @__PURE__ */ jsx13(Internals13.Timeline.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
         children: /* @__PURE__ */ jsx13(PlayerEmitterProvider, {
           currentPlaybackRate,
@@ -3126,7 +3168,8 @@ var PlayerFn = ({
             bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds ?? 300,
             hideControlsWhenPointerDoesntMove,
             overflowVisible,
-            browserMediaControlsBehavior
+            browserMediaControlsBehavior,
+            overrideInternalClassName: overrideInternalClassName ?? undefined
           })
         })
       })
@@ -3140,31 +3183,31 @@ import {
   forwardRef as forwardRef4,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo16,
-  useRef as useRef12,
+  useMemo as useMemo17,
+  useRef as useRef13,
   useState as useState14
 } from "react";
-import { Internals as Internals14, random as random2 } from "remotion";
+import { Internals as Internals15, random as random2 } from "remotion";
 
 // src/ThumbnailUI.tsx
-import React11, {
+import React12, {
   forwardRef as forwardRef3,
   Suspense as Suspense2,
-  useCallback as useCallback12,
+  useCallback as useCallback13,
   useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo15,
-  useRef as useRef11
+  useMemo as useMemo16,
+  useRef as useRef12
 } from "react";
-import { Internals as Internals13 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 
 // src/use-thumbnail.ts
-import { useContext as useContext7, useMemo as useMemo14 } from "react";
+import { useContext as useContext7, useMemo as useMemo15 } from "react";
 var useThumbnail = () => {
   const emitter = useContext7(ThumbnailEmitterContext);
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const returnValue = useMemo14(() => {
+  const returnValue = useMemo15(() => {
     return {
       emitter
     };
@@ -3174,20 +3217,28 @@ var useThumbnail = () => {
 
 // src/ThumbnailUI.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-var reactVersion2 = React11.version.split(".")[0];
+var reactVersion2 = React12.version.split(".")[0];
 if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
 }
 var doesReactVersionSupportSuspense2 = parseInt(reactVersion2, 10) >= 18;
-var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className: className2, overflowVisible }, ref) => {
-  const config = Internals13.useUnsafeVideoConfig();
-  const video = Internals13.useVideo();
-  const container = useRef11(null);
+var ThumbnailUI = ({
+  style,
+  inputProps,
+  errorFallback,
+  renderLoading,
+  className: className2,
+  overflowVisible,
+  overrideInternalClassName
+}, ref) => {
+  const config = Internals14.useUnsafeVideoConfig();
+  const video = Internals14.useVideo();
+  const container = useRef12(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
   });
-  const layout = useMemo15(() => {
+  const layout = useMemo16(() => {
     if (!config || !canvasSize) {
       return null;
     }
@@ -3209,7 +3260,7 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
     return Object.assign(thumbnail.emitter, methods);
   }, [scale, thumbnail.emitter]);
   const VideoComponent = video ? video.component : null;
-  const outerStyle = useMemo15(() => {
+  const outerStyle = useMemo16(() => {
     return calculateOuterStyle({
       config,
       style,
@@ -3218,10 +3269,10 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
       layout
     });
   }, [canvasSize, config, layout, overflowVisible, style]);
-  const outer = useMemo15(() => {
+  const outer = useMemo16(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);
-  const containerStyle3 = useMemo15(() => {
+  const containerStyle3 = useMemo16(() => {
     return calculateContainerStyle({
       canvasSize,
       config,
@@ -3230,17 +3281,17 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
       overflowVisible
     });
   }, [canvasSize, config, layout, overflowVisible, scale]);
-  const onError = useCallback12((error) => {
+  const onError = useCallback13((error) => {
     thumbnail.emitter.dispatchError(error);
   }, [thumbnail.emitter]);
-  const loadingMarkup = useMemo15(() => {
+  const loadingMarkup = useMemo16(() => {
     return renderLoading ? renderLoading({
       height: outerStyle.height,
       width: outerStyle.width,
       isBuffering: false
     }) : null;
   }, [outerStyle.height, outerStyle.width, renderLoading]);
-  const currentScaleContext = useMemo15(() => {
+  const currentScaleContext = useMemo16(() => {
     return {
       type: "scale",
       scale
@@ -3253,11 +3304,11 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
     style: outer,
     children: /* @__PURE__ */ jsx14("div", {
       style: containerStyle3,
-      className: PLAYER_CSS_CLASSNAME,
+      className: playerCssClassname(overrideInternalClassName),
       children: VideoComponent ? /* @__PURE__ */ jsx14(ErrorBoundary, {
         onError,
         errorFallback,
-        children: /* @__PURE__ */ jsx14(Internals13.CurrentScaleContext.Provider, {
+        children: /* @__PURE__ */ jsx14(Internals14.CurrentScaleContext.Provider, {
           value: currentScaleContext,
           children: /* @__PURE__ */ jsx14(VideoComponent, {
             ...video?.props ?? {},
@@ -3298,9 +3349,10 @@ var ThumbnailFn = ({
   durationInFrames,
   fps,
   className: className2,
-  errorFallback = () => "\u26A0\uFE0F",
+  errorFallback = () => "⚠️",
   renderLoading,
   overflowVisible = false,
+  overrideInternalClassName,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -3309,8 +3361,8 @@ var ThumbnailFn = ({
     }, []);
   }
   const [thumbnailId] = useState14(() => String(random2(null)));
-  const rootRef = useRef12(null);
-  const timelineState = useMemo16(() => {
+  const rootRef = useRef13(null);
+  const timelineState = useMemo17(() => {
     const value = {
       playing: false,
       frame: {
@@ -3329,12 +3381,12 @@ var ThumbnailFn = ({
     return value;
   }, [frameToDisplay, thumbnailId]);
   useImperativeHandle4(ref, () => rootRef.current, []);
-  const Component = Internals14.useLazyComponent(componentProps);
+  const Component = Internals15.useLazyComponent(componentProps);
   const [emitter] = useState14(() => new ThumbnailEmitter);
-  const passedInputProps = useMemo16(() => {
+  const passedInputProps = useMemo17(() => {
     return inputProps ?? {};
   }, [inputProps]);
-  return /* @__PURE__ */ jsx15(Internals14.IsPlayerContextProvider, {
+  return /* @__PURE__ */ jsx15(Internals15.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx15(SharedPlayerContexts, {
       timelineContext: timelineState,
       component: Component,
@@ -3353,7 +3405,8 @@ var ThumbnailFn = ({
           inputProps: passedInputProps,
           renderLoading,
           style,
-          overflowVisible
+          overflowVisible,
+          overrideInternalClassName
         })
       })
     })
@@ -3373,7 +3426,8 @@ var PlayerInternals = {
   useHoverState,
   updateAllElementsSizes,
   PlayerEmitterProvider,
-  BufferingIndicator
+  BufferingIndicator,
+  useFrameImperative
 };
 export {
   Thumbnail,