@remotion/promo-pages 4.0.390 → 4.0.392

package/dist/Homepage.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.390", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.392", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1647,7 +1647,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, error = (options, ...args) => {
   return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
-}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = ({
+}, Log, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = ({
   scope,
   environment,
   label,
@@ -1657,33 +1657,29 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
   }
   const handle = Math.random();
-  handles.push(handle);
+  scope.remotion_delayRenderHandles.push(handle);
   const called = Error().stack?.replace(/^Error/g, "") ?? "";
   if (environment.isRendering) {
-    const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof scope === "undefined" ? defaultTimeout : scope.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
-    if (typeof scope !== "undefined") {
-      const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
-      scope.remotion_delayRenderTimeouts[handle] = {
-        label: label ?? null,
-        startTime: Date.now(),
-        timeout: setTimeout(() => {
-          const message = [
-            `A delayRender()`,
-            label ? `"${label}"` : null,
-            `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-            retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
-            retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
-            DELAY_RENDER_CALLSTACK_TOKEN,
-            called
-          ].filter(truthy2).join(" ");
-          cancelRenderInternal(scope, Error(message));
-        }, timeoutToUse)
-      };
-    }
-  }
-  if (typeof scope !== "undefined") {
-    scope.remotion_renderReady = false;
+    const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
+    const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
+    scope.remotion_delayRenderTimeouts[handle] = {
+      label: label ?? null,
+      startTime: Date.now(),
+      timeout: setTimeout(() => {
+        const message = [
+          `A delayRender()`,
+          label ? `"${label}"` : null,
+          `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+          retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
+          retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
+          DELAY_RENDER_CALLSTACK_TOKEN,
+          called
+        ].filter(truthy2).join(" ");
+        cancelRenderInternal(scope, Error(message));
+      }, timeoutToUse)
+    };
   }
+  scope.remotion_renderReady = false;
   return handle;
 }, continueRenderInternal = ({
   scope,
@@ -1697,7 +1693,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (typeof handle !== "number") {
     throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
   }
-  handles = handles.filter((h) => {
+  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
     if (h === handle) {
       if (environment.isRendering && scope !== undefined) {
         if (!scope.remotion_delayRenderTimeouts[handle]) {
@@ -1717,7 +1713,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
     return true;
   });
-  if (handles.length === 0 && typeof scope !== "undefined") {
+  if (scope.remotion_delayRenderHandles.length === 0) {
     scope.remotion_renderReady = true;
   }
 }, LogLevelContext, useLogLevel = () => {
@@ -1734,19 +1730,25 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return mountTime;
 }, DelayRenderContextType, useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext8(DelayRenderContextType);
+  const scope = useContext8(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
   const logLevel = useLogLevel();
   const delayRender2 = useCallback4((label, options) => {
+    if (!scope) {
+      return Math.random();
+    }
     return delayRenderInternal({
-      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      scope,
       environment,
       label: label ?? null,
       options: options ?? {}
     });
   }, [environment, scope]);
   const continueRender2 = useCallback4((handle) => {
+    if (!scope) {
+      return;
+    }
     continueRenderInternal({
-      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      scope,
       handle,
       environment,
       logLevel
@@ -3105,7 +3107,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     });
   }, [refs]);
   const registerAudio = useCallback7((options) => {
-    const { aud, audioId, premounting } = options;
+    const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
       return found;
@@ -3124,7 +3126,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
       el: ref,
       audioId,
       mediaElementSourceNode,
-      premounting
+      premounting,
+      audioMounted: Boolean(ref.current),
+      postmounting
     };
     audios.current?.push(newElem);
     rerenderAudios();
@@ -3145,12 +3149,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
     aud,
     audioId,
     id,
-    premounting
+    premounting,
+    postmounting
   }) => {
     let changed = false;
     audios.current = audios.current?.map((prevA) => {
+      const audioMounted = Boolean(prevA.el.current);
+      if (prevA.audioMounted !== audioMounted) {
+        changed = true;
+      }
       if (prevA.id === id) {
-        const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting;
+        const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting && prevA.postmounting === postmounting;
         if (isTheSame) {
           return prevA;
         }
@@ -3159,7 +3168,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
           ...prevA,
           props: aud,
           premounting,
-          audioId
+          postmounting,
+          audioId,
+          audioMounted
         };
       }
       return prevA;
@@ -3221,12 +3232,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, useSharedAudio = ({
   aud,
   audioId,
-  premounting
+  premounting,
+  postmounting
 }) => {
   const ctx = useContext16(SharedAudioContext);
   const [elem] = useState11(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
-      return ctx.registerAudio({ aud, audioId, premounting });
+      return ctx.registerAudio({ aud, audioId, premounting, postmounting });
     }
     const el = React15.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
@@ -3239,16 +3251,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
       props: aud,
       audioId,
       mediaElementSourceNode,
-      premounting
+      premounting,
+      audioMounted: Boolean(el.current),
+      postmounting
     };
   });
   const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
-        ctx.updateAudio({ id: elem.id, aud, audioId, premounting });
+        ctx.updateAudio({ id: elem.id, aud, audioId, premounting, postmounting });
       }
-    }, [aud, ctx, elem.id, audioId, premounting]);
+    }, [aud, ctx, elem.id, audioId, premounting, postmounting]);
     effectToUse(() => {
       return () => {
         if (ctx && ctx.numberOfAudioTags > 0) {
@@ -4486,7 +4500,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { el: audioRef, mediaElementSourceNode } = useSharedAudio({
     aud: propsToPass,
     audioId: id,
-    premounting: Boolean(sequenceContext?.premounting)
+    premounting: Boolean(sequenceContext?.premounting),
+    postmounting: Boolean(sequenceContext?.postmounting)
   });
   useMediaInTimeline({
     volume,
@@ -6855,12 +6870,12 @@ var init_esm = __esm(() => {
     warn,
     error
   };
-  handles = [];
   if (typeof window !== "undefined") {
     window.remotion_renderReady = false;
     if (!window.remotion_delayRenderTimeouts) {
       window.remotion_delayRenderTimeouts = {};
     }
+    window.remotion_delayRenderHandles = [];
   }
   LogLevelContext = createContext8({
     logLevel: "info",
@@ -20516,21 +20531,21 @@ init_esm();
 import { jsx as jsx50, jsxs as jsxs14 } from "react/jsx-runtime";
 import { jsx as jsx213, jsxs as jsxs24, Fragment as Fragment6 } from "react/jsx-runtime";
 import React41 from "react";
-import { useContext as useContext210, useEffect as useEffect210, useState as useState35 } from "react";
-import { useContext as useContext40, useEffect as useEffect36 } from "react";
+import { useContext as useContext210, useEffect as useEffect36, useState as useState35 } from "react";
+import { useContext as useContext40, useLayoutEffect as useLayoutEffect15 } from "react";
 import { jsx as jsx310 } from "react/jsx-runtime";
 import { useCallback as useCallback27, useRef as useRef33 } from "react";
-import { useEffect as useEffect37, useState as useState210 } from "react";
-import { useContext as useContext42, useEffect as useEffect62, useRef as useRef42 } from "react";
-import { useEffect as useEffect42 } from "react";
+import { useEffect as useEffect210, useState as useState210 } from "react";
+import { useContext as useContext42, useEffect as useEffect52, useRef as useRef42 } from "react";
+import { useEffect as useEffect37 } from "react";
 import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef24, useState as useState36 } from "react";
-import { useEffect as useEffect52, useRef as useRef34 } from "react";
-import { useCallback as useCallback32, useEffect as useEffect72, useMemo as useMemo212, useState as useState42 } from "react";
+import { useEffect as useEffect42, useRef as useRef34 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef26,
-  useEffect as useEffect142,
+  useEffect as useEffect132,
   useImperativeHandle as useImperativeHandle22,
-  useLayoutEffect as useLayoutEffect15,
+  useLayoutEffect as useLayoutEffect23,
   useMemo as useMemo142,
   useRef as useRef112,
   useState as useState132
@@ -20540,13 +20555,13 @@ import React102, {
   forwardRef as forwardRef27,
   useCallback as useCallback112,
   useContext as useContext62,
-  useEffect as useEffect132,
+  useEffect as useEffect122,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo122,
   useRef as useRef102,
   useState as useState113
 } from "react";
-import { useCallback as useCallback82, useEffect as useEffect112, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
+import { useCallback as useCallback82, useEffect as useEffect102, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 import { useCallback as useCallback52, useMemo as useMemo43, useRef as useRef52, useState as useState62 } from "react";
 import React38, { useCallback as useCallback42, useMemo as useMemo34, useState as useState52 } from "react";
@@ -20555,13 +20570,13 @@ import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
 import {
   useCallback as useCallback62,
   useContext as useContext52,
-  useEffect as useEffect92,
+  useEffect as useEffect83,
   useMemo as useMemo52,
   useState as useState82
 } from "react";
-import { useEffect as useEffect83, useRef as useRef62, useState as useState72 } from "react";
+import { useEffect as useEffect72, useRef as useRef62, useState as useState72 } from "react";
 import { jsx as jsx74, jsxs as jsxs52 } from "react/jsx-runtime";
-import { useCallback as useCallback72, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
+import { useCallback as useCallback72, useEffect as useEffect92, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
 import { jsx as jsx84, jsxs as jsxs62 } from "react/jsx-runtime";
 import { useMemo as useMemo72 } from "react";
 import { jsxs as jsxs7 } from "react/jsx-runtime";
@@ -20569,7 +20584,7 @@ import { useMemo as useMemo82 } from "react";
 import { jsx as jsx94, jsxs as jsxs82, Fragment as Fragment22 } from "react/jsx-runtime";
 import React82 from "react";
 import { jsx as jsx104 } from "react/jsx-runtime";
-import React92, { useEffect as useEffect122 } from "react";
+import React92, { useEffect as useEffect112 } from "react";
 import { jsx as jsx113 } from "react/jsx-runtime";
 import { useCallback as useCallback102, useMemo as useMemo112 } from "react";
 import { useCallback as useCallback92, useMemo as useMemo102, useRef as useRef92 } from "react";
@@ -20685,6 +20700,7 @@ if (typeof window !== "undefined") {
   if (!window.remotion_delayRenderTimeouts) {
     window.remotion_delayRenderTimeouts = {};
   }
+  window.remotion_delayRenderHandles = [];
 }
 var DELAY_RENDER_CALLSTACK_TOKEN2 = "The delayRender was called:";
 var DELAY_RENDER_RETRIES_LEFT2 = "Retries left: ";
@@ -21210,7 +21226,7 @@ import { jsx as jsx143 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef42,
   useImperativeHandle as useImperativeHandle42,
-  useLayoutEffect as useLayoutEffect23,
+  useLayoutEffect as useLayoutEffect33,
   useMemo as useMemo172,
   useRef as useRef132,
   useState as useState142
@@ -21663,7 +21679,7 @@ var useBufferStateEmitter = (emitter) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect36(() => {
+  useLayoutEffect15(() => {
     const clear1 = bufferManager.listenForBuffering(() => {
       bufferManager.buffering.current = true;
       emitter.dispatchWaiting({});
@@ -21684,7 +21700,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect210(() => {
+  useEffect36(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
@@ -21697,7 +21713,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
 };
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState210(false);
-  useEffect37(() => {
+  useEffect210(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -21903,7 +21919,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek: seek2 } = usePlayer();
-  useEffect42(() => {
+  useEffect37(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -21916,7 +21932,7 @@ var useBrowserMediaSession = ({
       navigator.mediaSession.playbackState = "paused";
     }
   }, [browserMediaControlsBehavior.mode, playing]);
-  useEffect42(() => {
+  useEffect37(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -21946,7 +21962,7 @@ var useBrowserMediaSession = ({
     playbackRate,
     videoConfig
   ]);
-  useEffect42(() => {
+  useEffect37(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -22040,7 +22056,7 @@ var getIsBackgrounded = () => {
 };
 var useIsBackgrounded = () => {
   const isBackgrounded = useRef34(getIsBackgrounded());
-  useEffect52(() => {
+  useEffect42(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
     };
@@ -22075,7 +22091,7 @@ var usePlayback = ({
     playbackRate,
     videoConfig: config
   });
-  useEffect62(() => {
+  useEffect52(() => {
     if (!config) {
       return;
     }
@@ -22176,7 +22192,7 @@ var usePlayback = ({
     getCurrentFrame,
     context
   ]);
-  useEffect62(() => {
+  useEffect52(() => {
     const interval = setInterval(() => {
       if (lastTimeUpdateEvent.current === getCurrentFrame()) {
         return;
@@ -22186,7 +22202,7 @@ var usePlayback = ({
     }, 250);
     return () => clearInterval(interval);
   }, [emitter, getCurrentFrame]);
-  useEffect62(() => {
+  useEffect52(() => {
     emitter.dispatchFrameUpdate({ frame });
   }, [emitter, frame]);
 };
@@ -22269,7 +22285,7 @@ var useElementSize = (ref, options2) => {
       };
     });
   }, [ref]);
-  useEffect72(() => {
+  useEffect62(() => {
     if (!observer) {
       return;
     }
@@ -22283,7 +22299,7 @@ var useElementSize = (ref, options2) => {
       }
     };
   }, [observer, ref, updateSize]);
-  useEffect72(() => {
+  useEffect62(() => {
     if (!options2.triggerOnWindowResize) {
       return;
     }
@@ -22292,7 +22308,7 @@ var useElementSize = (ref, options2) => {
       window.removeEventListener("resize", updateSize);
     };
   }, [options2.triggerOnWindowResize, updateSize]);
-  useEffect72(() => {
+  useEffect62(() => {
     elementSizeHooks.push(updateSize);
     return () => {
       elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
@@ -22511,7 +22527,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState72(initialIsVisible);
   const ref = useRef62(null);
-  useEffect83(() => {
+  useEffect72(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         setIsComponentVisible(false);
@@ -22595,7 +22611,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
   const { setPlaybackRate, playbackRate } = useContext52(Internals.TimelineContext);
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState82(playbackRate);
-  useEffect92(() => {
+  useEffect83(() => {
     const listener = (e) => {
       e.preventDefault();
       if (e.key === "ArrowUp") {
@@ -22811,7 +22827,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, pause, play]);
-  useEffect102(() => {
+  useEffect92(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -23071,17 +23087,17 @@ var Controls = ({
       opacity: Number(shouldShow)
     };
   }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
-  useEffect112(() => {
+  useEffect102(() => {
     if (playButtonRef.current && spaceKeyToPlayOrPause) {
       playButtonRef.current.focus({
         preventScroll: true
       });
     }
   }, [playing, spaceKeyToPlayOrPause]);
-  useEffect112(() => {
+  useEffect102(() => {
     setSupportsFullscreen((typeof document !== "undefined" && (document.fullscreenEnabled || document.webkitFullscreenEnabled)) ?? false);
   }, []);
-  useEffect112(() => {
+  useEffect102(() => {
     if (shouldShowInitially === false) {
       return;
     }
@@ -23279,7 +23295,7 @@ var DOMAIN_BLACKLIST = [
 var ran = false;
 var RenderWarningIfBlacklist = () => {
   const [unlicensed, setUnlicensed] = React92.useState(false);
-  useEffect122(() => {
+  useEffect112(() => {
     if (ran) {
       return;
     }
@@ -23290,7 +23306,7 @@ var RenderWarningIfBlacklist = () => {
       }
     }).catch(() => {});
   }, []);
-  useEffect122(() => {
+  useEffect112(() => {
     if (!unlicensed) {
       return;
     }
@@ -23486,13 +23502,13 @@ var PlayerUI = ({
     getCurrentFrame: player.getCurrentFrame,
     browserMediaControlsBehavior
   });
-  useEffect132(() => {
+  useEffect122(() => {
     if (hasPausedToResume && !player.playing) {
       setHasPausedToResume(false);
       player.play();
     }
   }, [hasPausedToResume, player]);
-  useEffect132(() => {
+  useEffect122(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -23534,7 +23550,7 @@ var PlayerUI = ({
       document.exitFullscreen();
     }
   }, []);
-  useEffect132(() => {
+  useEffect122(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -23572,7 +23588,7 @@ var PlayerUI = ({
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
   const initialScaleIgnored = useRef102(false);
-  useEffect132(() => {
+  useEffect122(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
       return;
@@ -23581,17 +23597,17 @@ var PlayerUI = ({
   }, [player.emitter, scale]);
   const { setMediaVolume, setMediaMuted } = useContext62(Internals.SetMediaVolumeContext);
   const { mediaMuted, mediaVolume } = useContext62(Internals.MediaVolumeContext);
-  useEffect132(() => {
+  useEffect122(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
   const isMuted = mediaMuted || mediaVolume === 0;
-  useEffect132(() => {
+  useEffect122(() => {
     player.emitter.dispatchMuteChange({
       isMuted
     });
   }, [player.emitter, isMuted]);
   const [showBufferIndicator, setShowBufferState] = useState113(false);
-  useEffect132(() => {
+  useEffect122(() => {
     let timeout = null;
     let stopped = false;
     const onBuffer = () => {
@@ -23763,7 +23779,7 @@ var PlayerUI = ({
     }
   }, [exitFullscreen, isFullscreen, requestFullscreen]);
   const { handlePointerDown, handleDoubleClick } = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
-  useEffect132(() => {
+  useEffect122(() => {
     if (shouldAutoplay) {
       player.play();
       setShouldAutoPlay(false);
@@ -24270,7 +24286,7 @@ var PlayerFn = ({
     throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
   }
   validatePlaybackRate(currentPlaybackRate);
-  useEffect142(() => {
+  useEffect132(() => {
     setCurrentPlaybackRate(playbackRate);
   }, [playbackRate]);
   useImperativeHandle22(ref, () => rootRef.current, []);
@@ -24302,7 +24318,7 @@ var PlayerFn = ({
     };
   }, [setFrame]);
   if (typeof window !== "undefined") {
-    useLayoutEffect15(() => {
+    useLayoutEffect23(() => {
       Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
@@ -24527,7 +24543,7 @@ var ThumbnailFn = ({
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
-    useLayoutEffect23(() => {
+    useLayoutEffect33(() => {
       window.remotion_isPlayer = true;
     }, []);
   }