@remotion/player 4.0.208 → 4.0.210

package/dist/cjs/index.d.ts

@@ -23,7 +23,7 @@ export declare const PlayerInternals: {
         isFirstFrame: boolean;
         emitter: PlayerEmitter;
         playing: boolean;
-        play: (e?: PointerEvent | import("react").SyntheticEvent<Element, Event> | undefined) => void;
+        play: (e?: import("react").SyntheticEvent<Element, Event> | PointerEvent | undefined) => void;
         pause: () => void;
         pauseAndReturnToPlayStart: () => void;
         seek: (newFrame: number) => void;

package/dist/esm/index.mjs

@@ -7,12 +7,12 @@ jsxs
 var ICON_SIZE = 25;
 var fullscreenIconSize = 16;
 var PlayIcon = () => {
-  return jsx("svg", {
+  return /* @__PURE__ */ jsx("svg", {
     width: ICON_SIZE,
     height: ICON_SIZE,
     viewBox: "0 0 25 25",
     fill: "none",
-    children: jsx("path", {
+    children: /* @__PURE__ */ jsx("path", {
       d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z",
       fill: "white",
       stroke: "white",
@@ -22,12 +22,12 @@ var PlayIcon = () => {
   });
 };
 var PauseIcon = () => {
-  return jsxs("svg", {
+  return /* @__PURE__ */ jsxs("svg", {
     viewBox: "0 0 100 100",
     width: ICON_SIZE,
     height: ICON_SIZE,
     children: [
-      jsx("rect", {
+      /* @__PURE__ */ jsx("rect", {
         x: "25",
         y: "20",
         width: "20",
@@ -36,7 +36,7 @@ var PauseIcon = () => {
         ry: "5",
         rx: "5"
       }),
-      jsx("rect", {
+      /* @__PURE__ */ jsx("rect", {
         x: "55",
         y: "20",
         width: "20",
@@ -56,12 +56,12 @@ var FullscreenIcon = ({
   const out = isFullscreen ? 0 : strokeWidth / 2;
   const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
   const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
-  return jsxs("svg", {
+  return /* @__PURE__ */ jsxs("svg", {
     viewBox: `0 0 ${viewSize} ${viewSize}`,
     height: fullscreenIconSize,
     width: fullscreenIconSize,
     children: [
-      jsx("path", {
+      /* @__PURE__ */ jsx("path", {
         d: `
 				M ${out} ${inset}
 				L ${middleInset} ${middleInset}
@@ -71,7 +71,7 @@ var FullscreenIcon = ({
         strokeWidth,
         fill: "none"
       }),
-      jsx("path", {
+      /* @__PURE__ */ jsx("path", {
         d: `
 				M ${viewSize - out} ${inset}
 				L ${viewSize - middleInset} ${middleInset}
@@ -81,7 +81,7 @@ var FullscreenIcon = ({
         strokeWidth,
         fill: "none"
       }),
-      jsx("path", {
+      /* @__PURE__ */ jsx("path", {
         d: `
 				M ${out} ${viewSize - inset}
 				L ${middleInset} ${viewSize - middleInset}
@@ -91,7 +91,7 @@ var FullscreenIcon = ({
         strokeWidth,
         fill: "none"
       }),
-      jsx("path", {
+      /* @__PURE__ */ jsx("path", {
         d: `
 				M ${viewSize - out} ${viewSize - inset}
 				L ${viewSize - middleInset} ${viewSize - middleInset}
@@ -105,22 +105,22 @@ var FullscreenIcon = ({
   });
 };
 var VolumeOffIcon = () => {
-  return jsx("svg", {
+  return /* @__PURE__ */ jsx("svg", {
     width: ICON_SIZE,
     height: ICON_SIZE,
     viewBox: "0 0 24 24",
-    children: jsx("path", {
+    children: /* @__PURE__ */ jsx("path", {
       d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z",
       fill: "#fff"
     })
   });
 };
 var VolumeOnIcon = () => {
-  return jsx("svg", {
+  return /* @__PURE__ */ jsx("svg", {
     width: ICON_SIZE,
     height: ICON_SIZE,
     viewBox: "0 0 24 24",
-    children: jsx("path", {
+    children: /* @__PURE__ */ jsx("path", {
       d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z",
       fill: "#fff"
     })
@@ -151,9 +151,9 @@ var studioStyle = {
 };
 var BufferingIndicator = ({ type }) => {
   const style = type === "player" ? playerStyle : studioStyle;
-  return jsxs2(Fragment, {
+  return /* @__PURE__ */ jsxs2(Fragment, {
     children: [
-      jsx2("style", {
+      /* @__PURE__ */ jsx2("style", {
         type: "text/css",
         children: `
 				@keyframes ${remotionBufferingAnimation} {
@@ -170,13 +170,13 @@ var BufferingIndicator = ({ type }) => {
         }        
 			`
       }),
-      jsx2("div", {
+      /* @__PURE__ */ jsx2("div", {
         style,
-        children: jsx2("svg", {
+        children: /* @__PURE__ */ jsx2("svg", {
           viewBox: type === "player" ? "0 0 22 22" : "0 0 18 18",
           style,
           className,
-          children: jsx2("path", {
+          children: /* @__PURE__ */ jsx2("path", {
             d: type === "player" ? "M 11 4 A 7 7 0 0 1 15.1145 16.66312" : "M 9 2 A 7 7 0 0 1 13.1145 14.66312",
             stroke: "white",
             strokeLinecap: "round",
@@ -477,7 +477,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
     }
   }, [emitter, currentPlaybackRate]);
   useBufferStateEmitter(emitter);
-  return jsx3(PlayerEventEmitterContext.Provider, {
+  return /* @__PURE__ */ jsx3(PlayerEventEmitterContext.Provider, {
     value: emitter,
     children
   });
@@ -1037,14 +1037,14 @@ jsx as jsx4
 } from "react/jsx-runtime";
 var DefaultPlayPauseButton = ({ playing, buffering }) => {
   if (playing && buffering) {
-    return jsx4(BufferingIndicator, {
+    return /* @__PURE__ */ jsx4(BufferingIndicator, {
       type: "player"
     });
   }
   if (playing) {
-    return jsx4(PauseIcon, {});
+    return /* @__PURE__ */ jsx4(PauseIcon, {});
   }
-  return jsx4(PlayIcon, {});
+  return /* @__PURE__ */ jsx4(PlayIcon, {});
 };
 
 // src/MediaVolumeSlider.tsx
@@ -1132,15 +1132,15 @@ var DefaultVolumeSlider = ({
 		width: ${KNOB_SIZE}px;
 	}
 `;
-  return jsxs3("div", {
+  return /* @__PURE__ */ jsxs3("div", {
     style: sliderContainer,
     children: [
-      jsx5("style", {
+      /* @__PURE__ */ jsx5("style", {
         dangerouslySetInnerHTML: {
           __html: sliderStyle
         }
       }),
-      jsx5("input", {
+      /* @__PURE__ */ jsx5("input", {
         ref: inputRef,
         "aria-label": "Change volume",
         className: randomClass,
@@ -1157,7 +1157,7 @@ var DefaultVolumeSlider = ({
   });
 };
 var renderDefaultVolumeSlider = (props) => {
-  return jsx5(DefaultVolumeSlider, {
+  return /* @__PURE__ */ jsx5(DefaultVolumeSlider, {
     ...props
   });
 };
@@ -1216,7 +1216,7 @@ var MediaVolumeSlider2 = ({ displayVerticalVolumeSlider, renderMuteButton, rende
   }, []);
   const renderDefaultMuteButton = useCallback4(({ muted, volume }) => {
     const isMutedOrZero = muted || volume === 0;
-    return jsx6("button", {
+    return /* @__PURE__ */ jsx6("button", {
       "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
       title: isMutedOrZero ? "Unmute sound" : "Mute sound",
       onClick,
@@ -1224,7 +1224,7 @@ var MediaVolumeSlider2 = ({ displayVerticalVolumeSlider, renderMuteButton, rende
       onFocus: () => setFocused(true),
       style: volumeContainer,
       type: "button",
-      children: isMutedOrZero ? jsx6(VolumeOffIcon, {}) : jsx6(VolumeOnIcon, {})
+      children: isMutedOrZero ? /* @__PURE__ */ jsx6(VolumeOffIcon, {}) : /* @__PURE__ */ jsx6(VolumeOnIcon, {})
     });
   }, [onBlur, onClick, volumeContainer]);
   const muteButton = useMemo4(() => {
@@ -1247,7 +1247,7 @@ var MediaVolumeSlider2 = ({ displayVerticalVolumeSlider, renderMuteButton, rende
     renderVolumeSlider,
     setMediaVolume
   ]);
-  return jsxs4("div", {
+  return /* @__PURE__ */ jsxs4("div", {
     ref: parentDivRef,
     style: parentDivStyle,
     children: [
@@ -1311,10 +1311,10 @@ var checkmarkStyle = {
   height: 14,
   color: "black"
 };
-var Checkmark = () => jsx7("svg", {
+var Checkmark = () => /* @__PURE__ */ jsx7("svg", {
   viewBox: "0 0 512 512",
   style: checkmarkStyle,
-  children: jsx7("path", {
+  children: /* @__PURE__ */ jsx7("path", {
     fill: "currentColor",
     d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"
   })
@@ -1339,16 +1339,16 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
     };
   }, [hovered, isFocused]);
-  return jsxs5("div", {
+  return /* @__PURE__ */ jsxs5("div", {
     onMouseEnter,
     onMouseLeave,
     tabIndex: 0,
     style: actualStyle,
     onClick,
     children: [
-      jsx7("div", {
+      /* @__PURE__ */ jsx7("div", {
         style: checkmarkContainer,
-        children: rate === selectedRate ? jsx7(Checkmark, {}) : null
+        children: rate === selectedRate ? /* @__PURE__ */ jsx7(Checkmark, {}) : null
       }),
       rate.toFixed(1),
       "x"
@@ -1414,10 +1414,10 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
       textAlign: "left"
     };
   }, [canvasSize.height]);
-  return jsx7("div", {
+  return /* @__PURE__ */ jsx7("div", {
     style: playbackPopup,
     children: playbackRates.map((rate) => {
-      return jsx7(PlaybackrateOption, {
+      return /* @__PURE__ */ jsx7(PlaybackrateOption, {
         selectedRate: playbackRate,
         onSelect,
         rate,
@@ -1464,22 +1464,22 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
     e.preventDefault();
     setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
   }, [setIsComponentVisible]);
-  return jsx7("div", {
+  return /* @__PURE__ */ jsx7("div", {
     ref,
-    children: jsxs5("button", {
+    children: /* @__PURE__ */ jsxs5("button", {
       type: "button",
       "aria-label": "Change playback rate",
       style: button,
       onClick,
       children: [
-        jsxs5("div", {
+        /* @__PURE__ */ jsxs5("div", {
           style: label,
           children: [
             playbackRate,
             "x"
           ]
         }),
-        isComponentVisible && jsx7(PlaybackPopup, {
+        isComponentVisible && /* @__PURE__ */ jsx7(PlaybackPopup, {
           canvasSize,
           playbackRates,
           setIsComponentVisible
@@ -1626,23 +1626,23 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       position: "absolute"
     };
   }, [durationInFrames, inFrame, outFrame]);
-  return jsxs6("div", {
+  return /* @__PURE__ */ jsxs6("div", {
     ref: containerRef,
     onPointerDown,
     style: containerStyle,
     children: [
-      jsxs6("div", {
+      /* @__PURE__ */ jsxs6("div", {
         style: barBackground,
         children: [
-          jsx8("div", {
+          /* @__PURE__ */ jsx8("div", {
             style: active
           }),
-          jsx8("div", {
+          /* @__PURE__ */ jsx8("div", {
             style: fillStyle
           })
         ]
       }),
-      jsx8("div", {
+      /* @__PURE__ */ jsx8("div", {
         style: knobStyle
       })
     ]
@@ -1892,53 +1892,53 @@ var Controls = ({
       onDoubleClick?.(e);
     }
   }, [onDoubleClick]);
-  return jsxs7("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     ref,
     style: containerCss,
     onPointerDown: onPointerDownIfContainer,
     onDoubleClick: onDoubleClickIfContainer,
     children: [
-      jsxs7("div", {
+      /* @__PURE__ */ jsxs7("div", {
         ref: flexRef,
         style: controlsRow,
         children: [
-          jsxs7("div", {
+          /* @__PURE__ */ jsxs7("div", {
             style: leftPartStyle,
             children: [
-              jsx9("button", {
+              /* @__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",
-                children: renderPlayPauseButton === null ? jsx9(DefaultPlayPauseButton, {
+                children: renderPlayPauseButton === null ? /* @__PURE__ */ jsx9(DefaultPlayPauseButton, {
                   buffering,
                   playing: player.playing
                 }) : renderPlayPauseButton({
                   playing: player.playing,
                   isBuffering: buffering
-                }) ?? jsx9(DefaultPlayPauseButton, {
+                }) ?? /* @__PURE__ */ jsx9(DefaultPlayPauseButton, {
                   buffering,
                   playing: player.playing
                 })
               }),
-              showVolumeControls ? jsxs7(Fragment2, {
+              showVolumeControls ? /* @__PURE__ */ jsxs7(Fragment2, {
                 children: [
-                  jsx9("div", {
+                  /* @__PURE__ */ jsx9("div", {
                     style: xSpacer
                   }),
-                  jsx9(MediaVolumeSlider2, {
+                  /* @__PURE__ */ jsx9(MediaVolumeSlider2, {
                     renderMuteButton,
                     renderVolumeSlider,
                     displayVerticalVolumeSlider
                   })
                 ]
               }) : null,
-              jsx9("div", {
+              /* @__PURE__ */ jsx9("div", {
                 style: xSpacer
               }),
-              jsxs7("div", {
+              /* @__PURE__ */ jsxs7("div", {
                 style: timeLabel,
                 children: [
                   formatTime(frame / fps),
@@ -1946,40 +1946,40 @@ var Controls = ({
                   formatTime(durationInFrames / fps)
                 ]
               }),
-              jsx9("div", {
+              /* @__PURE__ */ jsx9("div", {
                 style: xSpacer
               })
             ]
           }),
-          jsx9("div", {
+          /* @__PURE__ */ jsx9("div", {
             style: flex1
           }),
-          playbackRates && canvasSize && jsx9(PlaybackrateControl, {
+          playbackRates && canvasSize && /* @__PURE__ */ jsx9(PlaybackrateControl, {
             canvasSize,
             playbackRates
           }),
-          playbackRates && supportsFullscreen && allowFullscreen ? jsx9("div", {
+          playbackRates && supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx9("div", {
             style: xSpacer
           }) : null,
-          jsx9("div", {
+          /* @__PURE__ */ jsx9("div", {
             style: fullscreen,
-            children: supportsFullscreen && allowFullscreen ? jsx9("button", {
+            children: supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx9("button", {
               type: "button",
               "aria-label": isFullscreen ? "Exit fullscreen" : "Enter Fullscreen",
               title: isFullscreen ? "Exit fullscreen" : "Enter Fullscreen",
               style: playerButtonStyle,
               onClick: isFullscreen ? onExitFullscreenButtonClick : onFullscreenButtonClick,
-              children: renderFullscreenButton === null ? jsx9(FullscreenIcon, {
+              children: renderFullscreenButton === null ? /* @__PURE__ */ jsx9(FullscreenIcon, {
                 isFullscreen
               }) : renderFullscreenButton({ isFullscreen })
             }) : null
           })
         ]
       }),
-      jsx9("div", {
+      /* @__PURE__ */ jsx9("div", {
         style: ySpacer
       }),
-      jsx9(PlayerSeekBar, {
+      /* @__PURE__ */ jsx9(PlayerSeekBar, {
         onSeekEnd,
         onSeekStart,
         durationInFrames,
@@ -2014,7 +2014,7 @@ class ErrorBoundary extends React7.Component {
   }
   render() {
     if (this.state.hasError) {
-      return jsx10("div", {
+      return /* @__PURE__ */ jsx10("div", {
         style: errorStyle,
         children: this.props.errorFallback({
           error: this.state.hasError
@@ -2506,30 +2506,30 @@ var PlayerUI = ({
     showPosterWhenBuffering && showBufferIndicator && player.isPlaying()
   ].some(Boolean);
   const { left, top, width, height, ...outerWithoutScale } = outer;
-  const content = jsxs8(Fragment3, {
+  const content = /* @__PURE__ */ jsxs8(Fragment3, {
     children: [
-      jsx11("div", {
+      /* @__PURE__ */ jsx11("div", {
         style: outer,
         onPointerDown: clickToPlay ? handlePointerDown : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
-        children: jsxs8("div", {
+        children: /* @__PURE__ */ jsxs8("div", {
           style: containerStyle3,
           className: PLAYER_CSS_CLASSNAME,
           children: [
-            VideoComponent ? jsx11(ErrorBoundary, {
+            VideoComponent ? /* @__PURE__ */ jsx11(ErrorBoundary, {
               onError,
               errorFallback,
-              children: jsx11(Internals10.ClipComposition, {
-                children: jsx11(Internals10.CurrentScaleContext.Provider, {
+              children: /* @__PURE__ */ jsx11(Internals10.ClipComposition, {
+                children: /* @__PURE__ */ jsx11(Internals10.CurrentScaleContext.Provider, {
                   value: currentScale,
-                  children: jsx11(VideoComponent, {
+                  children: /* @__PURE__ */ jsx11(VideoComponent, {
                     ...video?.props ?? {},
                     ...inputProps ?? {}
                   })
                 })
               })
             }) : null,
-            shouldShowPoster && posterFillMode === "composition-size" ? jsx11("div", {
+            shouldShowPoster && posterFillMode === "composition-size" ? /* @__PURE__ */ jsx11("div", {
               style: {
                 ...outerWithoutScale,
                 width: config.width,
@@ -2542,13 +2542,13 @@ var PlayerUI = ({
           ]
         })
       }),
-      shouldShowPoster && posterFillMode === "player-size" ? jsx11("div", {
+      shouldShowPoster && posterFillMode === "player-size" ? /* @__PURE__ */ jsx11("div", {
         style: outer,
         onPointerDown: clickToPlay ? handlePointerDown : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
         children: poster
       }) : null,
-      controls ? jsx11(Controls, {
+      controls ? /* @__PURE__ */ jsx11(Controls, {
         fps: config.fps,
         durationInFrames: config.durationInFrames,
         player,
@@ -2579,18 +2579,18 @@ var PlayerUI = ({
     ]
   });
   if (IS_NODE && !doesReactVersionSupportSuspense) {
-    return jsx11("div", {
+    return /* @__PURE__ */ jsx11("div", {
       ref: container,
       style: outerStyle,
       className: className2,
       children: content
     });
   }
-  return jsx11("div", {
+  return /* @__PURE__ */ jsx11("div", {
     ref: container,
     style: outerStyle,
     className: className2,
-    children: jsx11(Suspense, {
+    children: /* @__PURE__ */ jsx11(Suspense, {
       fallback: loadingMarkup,
       children: content
     })
@@ -2704,23 +2704,23 @@ var SharedPlayerContexts = ({
       setMediaVolume: setMediaVolumeAndPersist
     };
   }, [setMediaVolumeAndPersist]);
-  return jsx12(Internals11.CanUseRemotionHooksProvider, {
-    children: jsx12(Internals11.Timeline.TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx12(Internals11.CanUseRemotionHooksProvider, {
+    children: /* @__PURE__ */ jsx12(Internals11.Timeline.TimelineContext.Provider, {
       value: timelineContext,
-      children: jsx12(Internals11.CompositionManager.Provider, {
+      children: /* @__PURE__ */ jsx12(Internals11.CompositionManager.Provider, {
         value: compositionManagerContext,
-        children: jsx12(Internals11.ResolveCompositionConfig, {
-          children: jsx12(Internals11.PrefetchProvider, {
-            children: jsx12(Internals11.DurationsContextProvider, {
-              children: jsx12(Internals11.MediaVolumeContext.Provider, {
+        children: /* @__PURE__ */ jsx12(Internals11.ResolveCompositionConfig, {
+          children: /* @__PURE__ */ jsx12(Internals11.PrefetchProvider, {
+            children: /* @__PURE__ */ jsx12(Internals11.DurationsContextProvider, {
+              children: /* @__PURE__ */ jsx12(Internals11.MediaVolumeContext.Provider, {
                 value: mediaVolumeContextValue,
-                children: jsx12(Internals11.NativeLayersProvider, {
-                  children: jsx12(Internals11.SetMediaVolumeContext.Provider, {
+                children: /* @__PURE__ */ jsx12(Internals11.NativeLayersProvider, {
+                  children: /* @__PURE__ */ jsx12(Internals11.SetMediaVolumeContext.Provider, {
                     value: setMediaVolumeContextValue,
-                    children: jsx12(Internals11.SharedAudioContextProvider, {
+                    children: /* @__PURE__ */ jsx12(Internals11.SharedAudioContextProvider, {
                       numberOfAudioTags: numberOfSharedAudioTags,
                       component,
-                      children: jsx12(Internals11.BufferingProvider, {
+                      children: /* @__PURE__ */ jsx12(Internals11.BufferingProvider, {
                         children
                       })
                     })
@@ -2987,8 +2987,8 @@ var PlayerFn = ({
     }, []);
   }
   const actualInputProps = useMemo13(() => inputProps ?? {}, [inputProps]);
-  return jsx13(Internals12.IsPlayerContextProvider, {
-    children: jsx13(SharedPlayerContexts, {
+  return /* @__PURE__ */ jsx13(Internals12.IsPlayerContextProvider, {
+    children: /* @__PURE__ */ jsx13(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
       component,
       compositionHeight,
@@ -2997,11 +2997,11 @@ var PlayerFn = ({
       fps,
       numberOfSharedAudioTags,
       initiallyMuted,
-      children: jsx13(Internals12.Timeline.SetTimelineContext.Provider, {
+      children: /* @__PURE__ */ jsx13(Internals12.Timeline.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
-        children: jsx13(PlayerEmitterProvider, {
+        children: /* @__PURE__ */ jsx13(PlayerEmitterProvider, {
           currentPlaybackRate,
-          children: jsx13(PlayerUI_default, {
+          children: /* @__PURE__ */ jsx13(PlayerUI_default, {
             ref: rootRef,
             posterFillMode,
             renderLoading,
@@ -3044,7 +3044,6 @@ var PlayerFn = ({
 };
 var forward = forwardRef2;
 var Player = forward(PlayerFn);
-
 // src/Thumbnail.tsx
 import {
 forwardRef as forwardRef4,
@@ -3155,17 +3154,17 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
   if (!config) {
     return null;
   }
-  const content = jsx14("div", {
+  const content = /* @__PURE__ */ jsx14("div", {
     style: outer,
-    children: jsx14("div", {
+    children: /* @__PURE__ */ jsx14("div", {
       style: containerStyle3,
       className: PLAYER_CSS_CLASSNAME,
-      children: VideoComponent ? jsx14(ErrorBoundary, {
+      children: VideoComponent ? /* @__PURE__ */ jsx14(ErrorBoundary, {
         onError,
         errorFallback,
-        children: jsx14(Internals13.CurrentScaleContext.Provider, {
+        children: /* @__PURE__ */ jsx14(Internals13.CurrentScaleContext.Provider, {
           value: currentScaleContext,
-          children: jsx14(VideoComponent, {
+          children: /* @__PURE__ */ jsx14(VideoComponent, {
             ...video?.props ?? {},
             ...inputProps ?? {}
           })
@@ -3174,18 +3173,18 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
     })
   });
   if (IS_NODE && !doesReactVersionSupportSuspense2) {
-    return jsx14("div", {
+    return /* @__PURE__ */ jsx14("div", {
       ref: container,
       style: outerStyle,
       className: className2,
       children: content
     });
   }
-  return jsx14("div", {
+  return /* @__PURE__ */ jsx14("div", {
     ref: container,
     style: outerStyle,
     className: className2,
-    children: jsx14(Suspense2, {
+    children: /* @__PURE__ */ jsx14(Suspense2, {
       fallback: loadingMarkup,
       children: content
     })
@@ -3242,8 +3241,8 @@ var ThumbnailFn = ({
   const passedInputProps = useMemo16(() => {
     return inputProps ?? {};
   }, [inputProps]);
-  return jsx15(Internals14.IsPlayerContextProvider, {
-    children: jsx15(SharedPlayerContexts, {
+  return /* @__PURE__ */ jsx15(Internals14.IsPlayerContextProvider, {
+    children: /* @__PURE__ */ jsx15(SharedPlayerContexts, {
       timelineContext: timelineState,
       component: Component,
       compositionHeight,
@@ -3252,9 +3251,9 @@ var ThumbnailFn = ({
       fps,
       numberOfSharedAudioTags: 0,
       initiallyMuted: true,
-      children: jsx15(ThumbnailEmitterContext.Provider, {
+      children: /* @__PURE__ */ jsx15(ThumbnailEmitterContext.Provider, {
         value: emitter,
-        children: jsx15(ThumbnailUI_default, {
+        children: /* @__PURE__ */ jsx15(ThumbnailUI_default, {
           ref: rootRef,
           className: className2,
           errorFallback,

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.208",
+  "version": "4.0.210",
   "description": "React component for embedding a Remotion preview into your app",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "remotion": "4.0.208"
+    "remotion": "4.0.210"
   },
   "peerDependencies": {
     "react": ">=16.8.0",