@remotion/player 4.0.427 → 4.0.429

package/README.md

@@ -1,18 +1,18 @@
 # @remotion/player
- 
+
 React component for embedding a Remotion preview into your app
- 
+
 [![NPM Downloads](https://img.shields.io/npm/dm/@remotion/player.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/player?minimal=true)
- 
+
 ## Installation
- 
+
 ```bash
 npm install @remotion/player --save-exact
 ```
- 
+
 When installing a Remotion package, make sure to align the version of all `remotion` and `@remotion/*` packages to the same version.
 Remove the `^` character from the version number to use the exact version.
- 
+
 ## Usage
- 
+
 See the [documentation](https://www.remotion.dev/docs/player) for more information.

package/dist/cjs/Player.d.ts

@@ -1,11 +1,11 @@
 import type { ComponentType } from 'react';
 import React from 'react';
 import type { AnyZodObject, CompProps, LogLevel } from 'remotion';
+import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
 import type { RenderMuteButton } from './MediaVolumeSlider.js';
+import type { PlayerRef, RenderCustomControls } from './player-methods.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
 import type { PosterFillMode, RenderLoading, RenderPoster } from './PlayerUI.js';
-import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
-import type { PlayerRef, RenderCustomControls } from './player-methods.js';
 import type { RenderVolumeSlider } from './render-volume-slider.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
 export type ErrorFallback = (info: {

package/dist/cjs/Player.js

@@ -8,9 +8,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const EmitterProvider_js_1 = require("./EmitterProvider.js");
+const player_css_classname_js_1 = require("./player-css-classname.js");
 const PlayerUI_js_1 = __importDefault(require("./PlayerUI.js"));
 const SharedPlayerContext_js_1 = require("./SharedPlayerContext.js");
-const player_css_classname_js_1 = require("./player-css-classname.js");
 const use_remotion_license_acknowledge_js_1 = require("./use-remotion-license-acknowledge.js");
 const validate_in_out_frame_js_1 = require("./utils/validate-in-out-frame.js");
 const validate_initial_frame_js_1 = require("./utils/validate-initial-frame.js");

package/dist/cjs/PlayerControls.js

@@ -4,11 +4,11 @@ exports.Controls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DefaultPlayPauseButton_js_1 = require("./DefaultPlayPauseButton.js");
+const icons_js_1 = require("./icons.js");
 const MediaVolumeSlider_js_1 = require("./MediaVolumeSlider.js");
 const PlaybackrateControl_js_1 = require("./PlaybackrateControl.js");
 const PlayerSeekBar_js_1 = require("./PlayerSeekBar.js");
 const PlayerTimeLabel_js_1 = require("./PlayerTimeLabel.js");
-const icons_js_1 = require("./icons.js");
 const use_hover_state_js_1 = require("./use-hover-state.js");
 const use_video_controls_resize_js_1 = require("./use-video-controls-resize.js");
 const gradientSteps = [

package/dist/cjs/PlayerUI.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { RenderMuteButton } from './MediaVolumeSlider.js';
-import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
 import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
+import type { RenderMuteButton } from './MediaVolumeSlider.js';
 import type { PlayerRef, RenderCustomControls } from './player-methods.js';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
 import type { RenderVolumeSlider } from './render-volume-slider.js';
 export type ErrorFallback = (info: {
     error: Error;

package/dist/cjs/PlayerUI.js

@@ -36,11 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const PlayerControls_js_1 = require("./PlayerControls.js");
 const calculate_scale_js_1 = require("./calculate-scale.js");
 const error_boundary_js_1 = require("./error-boundary.js");
 const license_blacklist_js_1 = require("./license-blacklist.js");
 const player_css_classname_js_1 = require("./player-css-classname.js");
+const PlayerControls_js_1 = require("./PlayerControls.js");
 const use_playback_js_1 = require("./use-playback.js");
 const use_player_js_1 = require("./use-player.js");
 const is_node_js_1 = require("./utils/is-node.js");

package/dist/cjs/browser-mediasession.js

@@ -5,6 +5,12 @@ const react_1 = require("react");
 const use_player_js_1 = require("./use-player.js");
 const useBrowserMediaSession = ({ browserMediaControlsBehavior, videoConfig, playbackRate, }) => {
     const { playing, pause, play, emitter, getCurrentFrame, seek } = (0, use_player_js_1.usePlayer)();
+    const hasEverPlayed = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (playing) {
+            hasEverPlayed.current = true;
+        }
+    }, [playing]);
     (0, react_1.useEffect)(() => {
         if (!navigator.mediaSession) {
             return;
@@ -15,7 +21,7 @@ const useBrowserMediaSession = ({ browserMediaControlsBehavior, videoConfig, pla
         if (playing) {
             navigator.mediaSession.playbackState = 'playing';
         }
-        else {
+        else if (hasEverPlayed.current) {
             navigator.mediaSession.playbackState = 'paused';
         }
     }, [browserMediaControlsBehavior.mode, playing]);

package/dist/cjs/render-volume-slider.js

@@ -37,8 +37,8 @@ exports.renderDefaultVolumeSlider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
 const icons_1 = require("./icons");
+const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
 const KNOB_SIZE = 12;
 const BAR_HEIGHT = 5;
 const DefaultVolumeSlider = ({ volume, isVertical, onBlur, inputRef, setVolume, }) => {

package/dist/esm/index.mjs

@@ -552,11 +552,11 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 
 // src/use-playback.ts
-import { useContext as useContext4, useEffect as useEffect5, useRef as useRef4 } from "react";
+import { useContext as useContext4, useEffect as useEffect5, useRef as useRef5 } from "react";
 import { Internals as Internals6 } from "remotion";
 
 // src/browser-mediasession.ts
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
 
 // src/use-player.ts
 import { useCallback as useCallback2, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3 } from "react";
@@ -741,6 +741,12 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek } = usePlayer();
+  const hasEverPlayed = useRef3(false);
+  useEffect3(() => {
+    if (playing) {
+      hasEverPlayed.current = true;
+    }
+  }, [playing]);
   useEffect3(() => {
     if (!navigator.mediaSession) {
       return;
@@ -750,7 +756,7 @@ var useBrowserMediaSession = ({
     }
     if (playing) {
       navigator.mediaSession.playbackState = "playing";
-    } else {
+    } else if (hasEverPlayed.current) {
       navigator.mediaSession.playbackState = "paused";
     }
   }, [browserMediaControlsBehavior.mode, playing]);
@@ -874,7 +880,7 @@ var calculateNextFrame = ({
 };
 
 // src/is-backgrounded.ts
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 var getIsBackgrounded = () => {
   if (typeof document === "undefined") {
     return false;
@@ -882,7 +888,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef3(getIsBackgrounded());
+  const isBackgrounded = useRef4(getIsBackgrounded());
   useEffect4(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -910,7 +916,7 @@ var usePlayback = ({
   const { playing, pause, emitter, isPlaying } = usePlayer();
   const setFrame = Internals6.Timeline.useTimelineSetFrame();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateEvent = useRef4(null);
+  const lastTimeUpdateEvent = useRef5(null);
   const context = useContext4(Internals6.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
@@ -1170,11 +1176,16 @@ import {
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo14,
-  useRef as useRef11,
+  useRef as useRef12,
   useState as useState13
 } from "react";
 import { Composition, Internals as Internals15 } from "remotion";
 
+// src/player-css-classname.ts
+var playerCssClassname = (override) => {
+  return override ?? "__remotion-player";
+};
+
 // src/PlayerUI.tsx
 import React10, {
   Suspense,
@@ -1184,36 +1195,158 @@ import React10, {
   useEffect as useEffect12,
   useImperativeHandle,
   useMemo as useMemo12,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState11
 } from "react";
 import { Internals as Internals11 } from "remotion";
 
+// src/error-boundary.tsx
+import React3 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var errorStyle = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  flex: 1,
+  height: "100%",
+  width: "100%"
+};
+
+class ErrorBoundary extends React3.Component {
+  state = { hasError: null };
+  static getDerivedStateFromError(error) {
+    return { hasError: error };
+  }
+  componentDidCatch(error) {
+    this.props.onError(error);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx4("div", {
+        style: errorStyle,
+        children: this.props.errorFallback({
+          error: this.state.hasError
+        })
+      });
+    }
+    return this.props.children;
+  }
+}
+
+// src/license-blacklist.tsx
+import React4, { useEffect as useEffect7 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var getHashOfDomain = async () => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (typeof window.crypto === "undefined") {
+    return null;
+  }
+  if (typeof window.crypto.subtle === "undefined") {
+    return null;
+  }
+  try {
+    const hashBuffer = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(window.location.hostname));
+    return Array.from(new Uint8Array(hashBuffer)).map((b) => b.toString(16).padStart(2, "0")).join("");
+  } catch {
+    return null;
+  }
+};
+var style = {
+  backgroundColor: "red",
+  position: "absolute",
+  padding: 12,
+  fontFamily: "Arial"
+};
+var DOMAIN_BLACKLIST = [
+  "28d262b44cc61fa750f1686b16ad0604dabfe193fbc263eec05c89b7ad4c2cd6",
+  "4db1b0a94be33165dfefcb3ba03d04c7a2666dd27c496d3dc9fa41858e94925e",
+  "fbc48530bbf245da790f63675e84e06bab38c3b114fab07eb350025119922bdc",
+  "7baf10a8932757b1b3a22b3fce10a048747ac2f8eaf638603487e3705b07eb83",
+  "8a6c21a598d8c667272b5207c051b85997bf5b45d5fb712378be3f27cd72c6a6",
+  "a2f7aaac9c50a9255e7fc376110c4e0bfe153722dc66ed3c5d3bf2a135f65518"
+];
+var ran = false;
+var RenderWarningIfBlacklist = () => {
+  const [unlicensed, setUnlicensed] = React4.useState(false);
+  useEffect7(() => {
+    if (ran) {
+      return;
+    }
+    ran = true;
+    getHashOfDomain().then((hash) => {
+      if (hash && DOMAIN_BLACKLIST.includes(hash)) {
+        setUnlicensed(true);
+      }
+    }).catch(() => {});
+  }, []);
+  useEffect7(() => {
+    if (!unlicensed) {
+      return;
+    }
+    const ensureBanner = () => {
+      const banner = document.querySelector(".warning-banner");
+      if (!banner) {
+        const div = document.createElement("div");
+        div.className = "warning-banner";
+        Object.assign(div.style, style, {
+          zIndex: "9999",
+          cssText: `${style.cssText} !important;`
+        });
+        div.innerHTML = `
+	        <a href="https://github.com/remotion-dev/remotion/pull/4589" style="color: white;">
+	          Remotion Unlicensed – Contact hi@remotion.dev
+	        </a>
+	      `;
+        document.body.appendChild(div);
+      }
+    };
+    const observer = new MutationObserver(() => ensureBanner());
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+    };
+  }, [unlicensed]);
+  if (!unlicensed) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx5("div", {
+    style,
+    className: "warning-banner",
+    children: /* @__PURE__ */ jsx5("a", {
+      style: { color: "white" },
+      href: "https://github.com/remotion-dev/remotion/pull/4589",
+      children: "Remotion Unlicensed – Contact hi@remotion.dev"
+    })
+  });
+};
+
 // src/PlayerControls.tsx
-import { useCallback as useCallback8, useEffect as useEffect10, useMemo as useMemo9, useRef as useRef8, useState as useState10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef9, useState as useState10 } from "react";
 
 // src/DefaultPlayPauseButton.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var DefaultPlayPauseButton = ({ playing, buffering }) => {
   if (playing && buffering) {
-    return /* @__PURE__ */ jsx4(BufferingIndicator, {
+    return /* @__PURE__ */ jsx6(BufferingIndicator, {
       type: "player"
     });
   }
   if (playing) {
-    return /* @__PURE__ */ jsx4(PauseIcon, {});
+    return /* @__PURE__ */ jsx6(PauseIcon, {});
   }
-  return /* @__PURE__ */ jsx4(PlayIcon, {});
+  return /* @__PURE__ */ jsx6(PlayIcon, {});
 };
 
 // src/MediaVolumeSlider.tsx
-import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef6, useState as useState6 } from "react";
 import { Internals as Internals7 } from "remotion";
 
 // src/render-volume-slider.tsx
-import React3, { useCallback as useCallback4, useMemo as useMemo3, useState as useState5 } from "react";
+import React5, { 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";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var KNOB_SIZE = 12;
 var BAR_HEIGHT = 5;
 var DefaultVolumeSlider = ({
@@ -1243,7 +1376,7 @@ var DefaultVolumeSlider = ({
       ...common
     };
   }, [isVertical]);
-  const randomId = typeof React3.useId === "undefined" ? "volume-slider" : React3.useId();
+  const randomId = typeof React5.useId === "undefined" ? "volume-slider" : React5.useId();
   const [randomClass] = useState5(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
   const onVolumeChange = useCallback4((e) => {
     setVolume(parseFloat(e.target.value));
@@ -1291,12 +1424,12 @@ var DefaultVolumeSlider = ({
   return /* @__PURE__ */ jsxs3("div", {
     style: sliderContainer,
     children: [
-      /* @__PURE__ */ jsx5("style", {
+      /* @__PURE__ */ jsx7("style", {
         dangerouslySetInnerHTML: {
           __html: sliderStyle
         }
       }),
-      /* @__PURE__ */ jsx5("input", {
+      /* @__PURE__ */ jsx7("input", {
         ref: inputRef,
         "aria-label": "Change volume",
         className: randomClass,
@@ -1313,20 +1446,20 @@ var DefaultVolumeSlider = ({
   });
 };
 var renderDefaultVolumeSlider = (props) => {
-  return /* @__PURE__ */ jsx5(DefaultVolumeSlider, {
+  return /* @__PURE__ */ jsx7(DefaultVolumeSlider, {
     ...props
   });
 };
 
 // src/MediaVolumeSlider.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var VOLUME_SLIDER_WIDTH = 100;
 var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
   const [mediaMuted, setMediaMuted] = Internals7.useMediaMutedState();
   const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
   const [focused, setFocused] = useState6(false);
-  const parentDivRef = useRef5(null);
-  const inputRef = useRef5(null);
+  const parentDivRef = useRef6(null);
+  const inputRef = useRef6(null);
   const hover = useHoverState(parentDivRef, false);
   const onBlur = useCallback5(() => {
     setTimeout(() => {
@@ -1369,7 +1502,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
   }, []);
   const renderDefaultMuteButton = useCallback5(({ muted, volume }) => {
     const isMutedOrZero = muted || volume === 0;
-    return /* @__PURE__ */ jsx6("button", {
+    return /* @__PURE__ */ jsx8("button", {
       "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
       title: isMutedOrZero ? "Unmute sound" : "Mute sound",
       onClick,
@@ -1377,7 +1510,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       onFocus: () => setFocused(true),
       style: volumeContainer,
       type: "button",
-      children: isMutedOrZero ? /* @__PURE__ */ jsx6(VolumeOffIcon, {}) : /* @__PURE__ */ jsx6(VolumeOnIcon, {})
+      children: isMutedOrZero ? /* @__PURE__ */ jsx8(VolumeOffIcon, {}) : /* @__PURE__ */ jsx8(VolumeOnIcon, {})
     });
   }, [onBlur, onClick, volumeContainer]);
   const muteButton = useMemo4(() => {
@@ -1414,18 +1547,18 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 import {
   useCallback as useCallback6,
   useContext as useContext5,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useMemo as useMemo5,
   useState as useState8
 } from "react";
 import { Internals as Internals8 } from "remotion";
 
 // src/utils/use-component-visible.ts
-import { useEffect as useEffect7, useRef as useRef6, useState as useState7 } from "react";
+import { useEffect as useEffect8, useRef as useRef7, useState as useState7 } from "react";
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
-  const ref = useRef6(null);
-  useEffect7(() => {
+  const ref = useRef7(null);
+  useEffect8(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         setIsComponentVisible(false);
@@ -1440,7 +1573,7 @@ function useComponentVisible(initialIsVisible) {
 }
 
 // src/PlaybackrateControl.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var BOTTOM = 35;
 var THRESHOLD = 70;
 var rateDiv = {
@@ -1461,10 +1594,10 @@ var checkmarkStyle = {
   height: 14,
   color: "black"
 };
-var Checkmark = () => /* @__PURE__ */ jsx7("svg", {
+var Checkmark = () => /* @__PURE__ */ jsx9("svg", {
   viewBox: "0 0 512 512",
   style: checkmarkStyle,
-  children: /* @__PURE__ */ jsx7("path", {
+  children: /* @__PURE__ */ jsx9("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"
   })
@@ -1500,9 +1633,9 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
     style: actualStyle,
     onClick,
     children: [
-      /* @__PURE__ */ jsx7("div", {
+      /* @__PURE__ */ jsx9("div", {
         style: checkmarkContainer,
-        children: rate === selectedRate ? /* @__PURE__ */ jsx7(Checkmark, {}) : null
+        children: rate === selectedRate ? /* @__PURE__ */ jsx9(Checkmark, {}) : null
       }),
       formatPlaybackRate(rate),
       "x"
@@ -1512,7 +1645,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
   const { setPlaybackRate, playbackRate } = useContext5(Internals8.TimelineContext);
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
-  useEffect8(() => {
+  useEffect9(() => {
     const listener = (e) => {
       e.preventDefault();
       if (e.key === "ArrowUp") {
@@ -1568,10 +1701,10 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
       textAlign: "left"
     };
   }, [canvasSize.height]);
-  return /* @__PURE__ */ jsx7("div", {
+  return /* @__PURE__ */ jsx9("div", {
     style: playbackPopup,
     children: playbackRates.map((rate) => {
-      return /* @__PURE__ */ jsx7(PlaybackrateOption, {
+      return /* @__PURE__ */ jsx9(PlaybackrateOption, {
         selectedRate: playbackRate,
         onSelect,
         rate,
@@ -1618,7 +1751,7 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
     e.preventDefault();
     setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
   }, [setIsComponentVisible]);
-  return /* @__PURE__ */ jsx7("div", {
+  return /* @__PURE__ */ jsx9("div", {
     ref,
     children: /* @__PURE__ */ jsxs5("button", {
       type: "button",
@@ -1633,7 +1766,7 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
             "x"
           ]
         }),
-        isComponentVisible && /* @__PURE__ */ jsx7(PlaybackPopup, {
+        isComponentVisible && /* @__PURE__ */ jsx9(PlaybackPopup, {
           canvasSize,
           playbackRates,
           setIsComponentVisible
@@ -1644,9 +1777,9 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef8, useState as useState9 } from "react";
 import { Internals as Internals9, interpolate } from "remotion";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
   const pos = clientX;
   const frame = Math.round(interpolate(pos, [0, width], [0, durationInFrames - 1], {
@@ -1682,7 +1815,7 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef7(null);
+  const containerRef = useRef8(null);
   const barHovered = useHoverState(containerRef, false);
   const size = useElementSize(containerRef, {
     triggerOnWindowResize: true,
@@ -1733,7 +1866,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, pause, play]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -1785,15 +1918,15 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       /* @__PURE__ */ jsxs6("div", {
         style: barBackground,
         children: [
-          /* @__PURE__ */ jsx8("div", {
+          /* @__PURE__ */ jsx10("div", {
             style: active
           }),
-          /* @__PURE__ */ jsx8("div", {
+          /* @__PURE__ */ jsx10("div", {
             style: fillStyle
           })
         ]
       }),
-      /* @__PURE__ */ jsx8("div", {
+      /* @__PURE__ */ jsx10("div", {
         style: knobStyle
       })
     ]
@@ -1865,7 +1998,7 @@ var useVideoControlsResize = ({
 };
 
 // src/PlayerControls.tsx
-import { jsx as jsx9, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
 var gradientSteps = [
   0,
   0.013,
@@ -1974,7 +2107,7 @@ var Controls = ({
   toggle,
   renderCustomControls
 }) => {
-  const playButtonRef = useRef8(null);
+  const playButtonRef = useRef9(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -2009,17 +2142,17 @@ var Controls = ({
       opacity: Number(shouldShow)
     };
   }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (playButtonRef.current && spaceKeyToPlayOrPause) {
       playButtonRef.current.focus({
         preventScroll: true
       });
     }
   }, [playing, spaceKeyToPlayOrPause]);
-  useEffect10(() => {
+  useEffect11(() => {
     setSupportsFullscreen((typeof document !== "undefined" && (document.fullscreenEnabled || document.webkitFullscreenEnabled)) ?? false);
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (shouldShowInitially === false) {
       return;
     }
@@ -2049,8 +2182,8 @@ var Controls = ({
     return null;
   }, [showPlaybackRateControl]);
   const customControlsElement = renderCustomControls ? renderCustomControls() : null;
-  const ref = useRef8(null);
-  const flexRef = useRef8(null);
+  const ref = useRef9(null);
+  const flexRef = useRef9(null);
   const onPointerDownIfContainer = useCallback8((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
@@ -2074,82 +2207,82 @@ var Controls = ({
           /* @__PURE__ */ jsxs8("div", {
             style: leftPartStyle,
             children: [
-              /* @__PURE__ */ jsx9("button", {
+              /* @__PURE__ */ jsx11("button", {
                 ref: playButtonRef,
                 type: "button",
                 style: playerButtonStyle,
                 onClick: toggle,
                 "aria-label": playing ? "Pause video" : "Play video",
                 title: playing ? "Pause video" : "Play video",
-                children: renderPlayPauseButton === null ? /* @__PURE__ */ jsx9(DefaultPlayPauseButton, {
+                children: renderPlayPauseButton === null ? /* @__PURE__ */ jsx11(DefaultPlayPauseButton, {
                   buffering,
                   playing
                 }) : renderPlayPauseButton({
                   playing,
                   isBuffering: buffering
-                }) ?? /* @__PURE__ */ jsx9(DefaultPlayPauseButton, {
+                }) ?? /* @__PURE__ */ jsx11(DefaultPlayPauseButton, {
                   buffering,
                   playing
                 })
               }),
               showVolumeControls ? /* @__PURE__ */ jsxs8(Fragment2, {
                 children: [
-                  /* @__PURE__ */ jsx9("div", {
+                  /* @__PURE__ */ jsx11("div", {
                     style: xSpacer
                   }),
-                  /* @__PURE__ */ jsx9(MediaVolumeSlider, {
+                  /* @__PURE__ */ jsx11(MediaVolumeSlider, {
                     renderMuteButton,
                     renderVolumeSlider,
                     displayVerticalVolumeSlider
                   })
                 ]
               }) : null,
-              /* @__PURE__ */ jsx9("div", {
+              /* @__PURE__ */ jsx11("div", {
                 style: xSpacer
               }),
-              /* @__PURE__ */ jsx9(PlayerTimeLabel, {
+              /* @__PURE__ */ jsx11(PlayerTimeLabel, {
                 durationInFrames,
                 fps,
                 maxTimeLabelWidth
               }),
-              /* @__PURE__ */ jsx9("div", {
+              /* @__PURE__ */ jsx11("div", {
                 style: xSpacer
               })
             ]
           }),
-          /* @__PURE__ */ jsx9("div", {
+          /* @__PURE__ */ jsx11("div", {
             style: flex1
           }),
           customControlsElement,
-          customControlsElement && playbackRates && canvasSize ? /* @__PURE__ */ jsx9("div", {
+          customControlsElement && playbackRates && canvasSize ? /* @__PURE__ */ jsx11("div", {
             style: xSpacer
           }) : null,
-          playbackRates && canvasSize && /* @__PURE__ */ jsx9(PlaybackrateControl, {
+          playbackRates && canvasSize && /* @__PURE__ */ jsx11(PlaybackrateControl, {
             canvasSize,
             playbackRates
           }),
-          playbackRates && supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx9("div", {
+          playbackRates && supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx11("div", {
             style: xSpacer
           }) : null,
-          /* @__PURE__ */ jsx9("div", {
+          /* @__PURE__ */ jsx11("div", {
             style: fullscreen,
-            children: supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx9("button", {
+            children: supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx11("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 ? /* @__PURE__ */ jsx9(FullscreenIcon, {
+              children: renderFullscreenButton === null ? /* @__PURE__ */ jsx11(FullscreenIcon, {
                 isFullscreen
               }) : renderFullscreenButton({ isFullscreen })
             }) : null
           })
         ]
       }),
-      /* @__PURE__ */ jsx9("div", {
+      /* @__PURE__ */ jsx11("div", {
         style: ySpacer
       }),
-      /* @__PURE__ */ jsx9(PlayerSeekBar, {
+      /* @__PURE__ */ jsx11(PlayerSeekBar, {
         onSeekEnd,
         onSeekStart,
         durationInFrames,
@@ -2160,133 +2293,6 @@ var Controls = ({
   });
 };
 
-// src/error-boundary.tsx
-import React8 from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var errorStyle = {
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  flex: 1,
-  height: "100%",
-  width: "100%"
-};
-
-class ErrorBoundary extends React8.Component {
-  state = { hasError: null };
-  static getDerivedStateFromError(error) {
-    return { hasError: error };
-  }
-  componentDidCatch(error) {
-    this.props.onError(error);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ jsx10("div", {
-        style: errorStyle,
-        children: this.props.errorFallback({
-          error: this.state.hasError
-        })
-      });
-    }
-    return this.props.children;
-  }
-}
-
-// src/license-blacklist.tsx
-import React9, { useEffect as useEffect11 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var getHashOfDomain = async () => {
-  if (typeof window === "undefined") {
-    return null;
-  }
-  if (typeof window.crypto === "undefined") {
-    return null;
-  }
-  if (typeof window.crypto.subtle === "undefined") {
-    return null;
-  }
-  try {
-    const hashBuffer = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(window.location.hostname));
-    return Array.from(new Uint8Array(hashBuffer)).map((b) => b.toString(16).padStart(2, "0")).join("");
-  } catch {
-    return null;
-  }
-};
-var style = {
-  backgroundColor: "red",
-  position: "absolute",
-  padding: 12,
-  fontFamily: "Arial"
-};
-var DOMAIN_BLACKLIST = [
-  "28d262b44cc61fa750f1686b16ad0604dabfe193fbc263eec05c89b7ad4c2cd6",
-  "4db1b0a94be33165dfefcb3ba03d04c7a2666dd27c496d3dc9fa41858e94925e",
-  "fbc48530bbf245da790f63675e84e06bab38c3b114fab07eb350025119922bdc",
-  "7baf10a8932757b1b3a22b3fce10a048747ac2f8eaf638603487e3705b07eb83",
-  "8a6c21a598d8c667272b5207c051b85997bf5b45d5fb712378be3f27cd72c6a6",
-  "a2f7aaac9c50a9255e7fc376110c4e0bfe153722dc66ed3c5d3bf2a135f65518"
-];
-var ran = false;
-var RenderWarningIfBlacklist = () => {
-  const [unlicensed, setUnlicensed] = React9.useState(false);
-  useEffect11(() => {
-    if (ran) {
-      return;
-    }
-    ran = true;
-    getHashOfDomain().then((hash) => {
-      if (hash && DOMAIN_BLACKLIST.includes(hash)) {
-        setUnlicensed(true);
-      }
-    }).catch(() => {});
-  }, []);
-  useEffect11(() => {
-    if (!unlicensed) {
-      return;
-    }
-    const ensureBanner = () => {
-      const banner = document.querySelector(".warning-banner");
-      if (!banner) {
-        const div = document.createElement("div");
-        div.className = "warning-banner";
-        Object.assign(div.style, style, {
-          zIndex: "9999",
-          cssText: `${style.cssText} !important;`
-        });
-        div.innerHTML = `
-	        <a href="https://github.com/remotion-dev/remotion/pull/4589" style="color: white;">
-	          Remotion Unlicensed – Contact hi@remotion.dev
-	        </a>
-	      `;
-        document.body.appendChild(div);
-      }
-    };
-    const observer = new MutationObserver(() => ensureBanner());
-    observer.observe(document.body, { childList: true, subtree: true });
-    return () => {
-      observer.disconnect();
-    };
-  }, [unlicensed]);
-  if (!unlicensed) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx11("div", {
-    style,
-    className: "warning-banner",
-    children: /* @__PURE__ */ jsx11("a", {
-      style: { color: "white" },
-      href: "https://github.com/remotion-dev/remotion/pull/4589",
-      children: "Remotion Unlicensed – Contact hi@remotion.dev"
-    })
-  });
-};
-
-// src/player-css-classname.ts
-var playerCssClassname = (override) => {
-  return override ?? "__remotion-player";
-};
-
 // src/utils/is-node.ts
 var IS_NODE = typeof document === "undefined";
 
@@ -2319,9 +2325,9 @@ var cancellablePromise = (promise) => {
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 
 // src/utils/use-cancellable-promises.ts
-import { useCallback as useCallback9, useMemo as useMemo10, useRef as useRef9 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo10, useRef as useRef10 } from "react";
 var useCancellablePromises = () => {
-  const pendingPromises = useRef9([]);
+  const pendingPromises = useRef10([]);
   const appendPendingPromise = useCallback9((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
@@ -2431,7 +2437,7 @@ var PlayerUI = ({
 }, ref) => {
   const config = Internals11.useUnsafeVideoConfig();
   const video = Internals11.useVideo();
-  const container = useRef10(null);
+  const container = useRef11(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -2542,7 +2548,7 @@ var PlayerUI = ({
     });
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef10(false);
+  const initialScaleIgnored = useRef11(false);
   useEffect12(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
@@ -3219,9 +3225,9 @@ var PlayerFn = ({
   }));
   const [playing, setPlaying] = useState13(false);
   const [rootId] = useState13("player-comp");
-  const rootRef = useRef11(null);
-  const audioAndVideoTags = useRef11([]);
-  const imperativePlaying = useRef11(false);
+  const rootRef = useRef12(null);
+  const audioAndVideoTags = useRef12([]);
+  const imperativePlaying = useRef12(false);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState13(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -3385,7 +3391,7 @@ import {
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo17,
-  useRef as useRef13,
+  useRef as useRef14,
   useState as useState14
 } from "react";
 import { Internals as Internals17, random as random2 } from "remotion";
@@ -3397,7 +3403,7 @@ import React13, {
   useCallback as useCallback13,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo16,
-  useRef as useRef12
+  useRef as useRef13
 } from "react";
 import { Internals as Internals16 } from "remotion";
 
@@ -3435,7 +3441,7 @@ var ThumbnailUI = ({
 }, ref) => {
   const config = Internals16.useUnsafeVideoConfig();
   const video = Internals16.useVideo();
-  const container = useRef12(null);
+  const container = useRef13(null);
   const canvasSize = useElementSize(container, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -3564,7 +3570,7 @@ var ThumbnailFn = ({
     }, []);
   }
   const [thumbnailId] = useState14(() => String(random2(null)));
-  const rootRef = useRef13(null);
+  const rootRef = useRef14(null);
   const timelineState = useMemo17(() => {
     const value = {
       playing: false,

package/package.json

@@ -3,14 +3,14 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.427",
+	"version": "4.0.429",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
 	"module": "dist/esm/index.mjs",
 	"sideEffects": false,
 	"scripts": {
-		"formatting": "prettier src --check",
+		"formatting": "oxfmt src --check",
 		"lint": "eslint src",
 		"make": "tsgo -d && bun ensure-correct-version.ts && bun --env-file=../.env.bundle bundle.ts",
 		"test": "bun test src",
@@ -35,7 +35,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.427"
+		"remotion": "4.0.429"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -49,7 +49,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.427",
+		"@remotion/eslint-config-internal": "4.0.429",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},