@remotion/promo-pages 4.0.380 → 4.0.381

package/dist/Homepage.js

@@ -111,7 +111,7 @@ import { jsx as jsx15 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
   useContext as useContext25,
-  useEffect as useEffect13,
+  useEffect as useEffect12,
   useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo21,
   useRef as useRef12,
@@ -123,7 +123,6 @@ import React15, {
   createRef as createRef2,
   useCallback as useCallback7,
   useContext as useContext16,
-  useEffect as useEffect6,
   useMemo as useMemo15,
   useRef as useRef5,
   useState as useState11
@@ -131,12 +130,12 @@ import React15, {
 import { useMemo as useMemo14 } from "react";
 import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
 import { useRef as useRef6 } from "react";
-import { useContext as useContext19, useEffect as useEffect7, useMemo as useMemo16, useState as useState12 } from "react";
+import { useContext as useContext19, useEffect as useEffect6, useMemo as useMemo16, useState as useState12 } from "react";
 import { useContext as useContext18 } from "react";
 import {
   useCallback as useCallback10,
   useContext as useContext22,
-  useEffect as useEffect11,
+  useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef11
 } from "react";
@@ -145,7 +144,7 @@ import { useContext as useContext21, useMemo as useMemo18 } from "react";
 import React16, {
   useCallback as useCallback8,
   useContext as useContext20,
-  useEffect as useEffect8,
+  useEffect as useEffect7,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo17,
   useRef as useRef8,
@@ -153,15 +152,15 @@ import React16, {
 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import React17 from "react";
-import { useEffect as useEffect9, useState as useState14 } from "react";
-import { useEffect as useEffect10, useRef as useRef10 } from "react";
-import { useContext as useContext23, useEffect as useEffect12 } from "react";
+import { useEffect as useEffect8, useState as useState14 } from "react";
+import { useEffect as useEffect9, useRef as useRef10 } from "react";
+import { useContext as useContext23, useEffect as useEffect11 } from "react";
 import { createContext as createContext17, useContext as useContext24, useMemo as useMemo20 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
   useContext as useContext26,
-  useEffect as useEffect14,
+  useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo222,
@@ -169,9 +168,9 @@ import {
 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import { jsx as jsx20 } from "react/jsx-runtime";
-import { Suspense, useContext as useContext29, useEffect as useEffect16 } from "react";
+import { Suspense, useContext as useContext29, useEffect as useEffect15 } from "react";
 import { createPortal } from "react-dom";
-import { createContext as createContext18, useContext as useContext28, useEffect as useEffect15, useMemo as useMemo23 } from "react";
+import { createContext as createContext18, useContext as useContext28, useEffect as useEffect14, useMemo as useMemo23 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import { jsx as jsx222, jsxs as jsxs22 } from "react/jsx-runtime";
 import React21, { useMemo as useMemo24 } from "react";
@@ -198,7 +197,7 @@ import {
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import React26 from "react";
-import { useContext as useContext32, useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo27, useState as useState18 } from "react";
 import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -206,8 +205,8 @@ import React28, { createContext as createContext20 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
-  useContext as useContext33,
-  useEffect as useEffect18,
+  useContext as useContext32,
+  useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo28,
   useState as useState19
@@ -215,14 +214,14 @@ import {
 import { jsx as jsx29 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef9,
-  useContext as useContext34,
-  useEffect as useEffect20,
+  useContext as useContext33,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo29,
   useRef as useRef16,
   useState as useState20
 } from "react";
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import React32, { useMemo as useMemo30 } from "react";
@@ -233,11 +232,11 @@ import React34, { createContext as createContext21 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import React36 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext36 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext35 } from "react";
 import {
   forwardRef as forwardRef11,
-  useContext as useContext35,
-  useEffect as useEffect21,
+  useContext as useContext34,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle11,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo32,
@@ -756,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.380", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.381", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -3061,7 +3060,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return false;
   }
   return true;
-}, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, component }) => {
+}, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint }) => {
   const audios = useRef5([]);
   const [initialNumberOfAudioTags] = useState11(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
@@ -3205,16 +3204,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
     updateAudio,
     audioContext
   ]);
-  const resetAudio = useCallback7(() => {
-    takenAudios.current = new Array(numberOfAudioTags).fill(false);
-    audios.current = [];
-    rerenderAudios();
-  }, [numberOfAudioTags, rerenderAudios]);
-  useEffect6(() => {
-    return () => {
-      resetAudio();
-    };
-  }, [component, resetAudio]);
   return /* @__PURE__ */ jsxs2(SharedAudioContext.Provider, {
     value,
     children: [
@@ -3522,7 +3511,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       });
     }).join(",");
   }, [duration, startsAt, volume, mediaVolume]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
@@ -3575,7 +3564,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     trimBefore: undefined,
     playbackRate
   });
-  useEffect7(() => {
+  useEffect6(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -3665,7 +3654,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  useEffect8(() => {
+  useEffect7(() => {
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3701,7 +3690,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState13(bufferManager.buffering.current);
-  useEffect8(() => {
+  useEffect7(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -3864,7 +3853,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState14(false);
-  useEffect9(() => {
+  useEffect8(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -3996,7 +3985,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef10(null);
-  useEffect10(() => {
+  useEffect9(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -4178,7 +4167,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect11(() => {
+  useEffect10(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -4223,7 +4212,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect11(() => {
+  useEffect10(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -4351,7 +4340,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect12(() => {
+  useEffect11(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -4544,7 +4533,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [audioRef]);
   const currentOnDurationCallback = useRef12(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect13(() => {
+  useEffect12(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -4611,7 +4600,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle7(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect14(() => {
+  useEffect13(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -4915,7 +4904,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect16(() => {
+  useEffect15(() => {
     const fallback = delayRender2("Waiting for Root component to unsuspend");
     return () => continueRender2(fallback);
   }, [continueRender2, delayRender2]);
@@ -4952,7 +4941,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
   const { folderName, parentName } = useContext29(FolderContext);
-  useEffect16(() => {
+  useEffect15(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -4991,7 +4980,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     registerComposition,
     unregisterComposition
   ]);
-  useEffect16(() => {
+  useEffect15(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -4999,7 +4988,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }));
   }, [defaultProps, id]);
   const resolved = useResolvedVideoConfig(id);
-  if (environment.isStudio && video && video.component === lazy) {
+  if (environment.isStudio && video && video.component === lazy && video.id === id) {
     const Comp = lazy;
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
@@ -5013,7 +5002,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       })
     }), portalNode());
   }
-  if (environment.isRendering && video && video.component === lazy) {
+  if (environment.isRendering && video && video.component === lazy && video.id === id) {
     const Comp = lazy;
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
@@ -5416,7 +5405,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  useEffect17(() => {
+  useEffect16(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -5430,10 +5419,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const logging = useMemo27(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  const compositionManager = useContext32(CompositionManager);
-  const composition = useMemo27(() => {
-    return compositionManager.compositions.find((c2) => compositionManager.canvasContent?.type === "composition" ? c2.id === compositionManager.canvasContent.compositionId : false);
-  }, [compositionManager.compositions, compositionManager.canvasContent]);
   return /* @__PURE__ */ jsx28(LogLevelContext.Provider, {
     value: logging,
     children: /* @__PURE__ */ jsx28(NonceContext.Provider, {
@@ -5451,7 +5436,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
                   children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
                     numberOfAudioTags,
                     audioLatencyHint,
-                    component: composition?.component ?? null,
                     children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
                       children: /* @__PURE__ */ jsx28(BufferingProvider, {
                         children
@@ -5535,9 +5519,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext32(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext32(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -5556,7 +5540,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5716,7 +5700,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ref,
   onVideoFrame
 }) => {
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -5738,7 +5722,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, [onVideoFrame, ref]);
 }, VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext34(SharedAudioContext);
+  const context = useContext33(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -5786,8 +5770,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext34(SequenceContext);
-  const { hidden } = useContext34(SequenceVisibilityToggleContext);
+  const parentSequence = useContext33(SequenceContext);
+  const { hidden } = useContext33(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState20(() => String(Math.random()));
@@ -5862,7 +5846,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     tag: "video",
     mountTime
   }));
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5893,7 +5877,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const currentOnDurationCallback = useRef16(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5910,7 +5894,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6466,13 +6450,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext35(SequenceContext);
+  const sequenceContext = useContext34(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
   const id = useMemo32(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -6488,7 +6472,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -6531,7 +6515,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle11(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -6671,7 +6655,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext36(DurationsContext);
+  const { durations, setDurations } = useContext35(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -7263,7 +7247,7 @@ __export(exports_esm, {
   Lottie: () => Lottie
 });
 import lottie from "lottie-web";
-import { useEffect as useEffect39, useRef as useRef36, useState as useState37 } from "react";
+import { useEffect as useEffect38, useRef as useRef36, useState as useState37 } from "react";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -7335,14 +7319,14 @@ var getLottieMetadata = (animationData) => {
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender, continueRender } = useDelayRender();
   const [handle] = useState37(() => delayRender("Waiting for Lottie animation to load"));
-  useEffect39(() => {
+  useEffect38(() => {
     return () => {
       continueRender(handle);
     };
   }, [handle, continueRender]);
   const frame = useCurrentFrame();
   currentFrameRef.current = frame;
-  useEffect39(() => {
+  useEffect38(() => {
     if (!containerRef.current) {
       return;
     }
@@ -7387,17 +7371,17 @@ var getLottieMetadata = (animationData) => {
     renderer,
     continueRender
   ]);
-  useEffect39(() => {
+  useEffect38(() => {
     if (animationRef.current && direction) {
       animationRef.current.setDirection(direction === "backward" ? -1 : 1);
     }
   }, [direction]);
-  useEffect39(() => {
+  useEffect38(() => {
     if (animationRef.current && playbackRate) {
       animationRef.current.setSpeed(playbackRate);
     }
   }, [playbackRate]);
-  useEffect39(() => {
+  useEffect38(() => {
     if (!animationRef.current) {
       return;
     }
@@ -8774,7 +8758,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React7, { useEffect as useEffect22, useMemo as useMemo33, useState as useState21 } from "react";
+import React7, { useEffect as useEffect21, useMemo as useMemo33, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -12915,7 +12899,7 @@ var extrudeAndTransformElement = (options) => {
 init_esm();
 import { jsx as jsx37, Fragment } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs3 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef18 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef18 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
 import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 import React42 from "react";
@@ -13003,7 +12987,7 @@ var useHoverTransforms = (ref, disabled) => {
     isActive: false
   });
   const eventTarget = useMemo33(() => new EventTarget, []);
-  useEffect22(() => {
+  useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -13150,7 +13134,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
-  useEffect22(() => {
+  useEffect21(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -13271,7 +13255,7 @@ var Spinner = ({ size, duration }) => {
     };
   }, [size]);
   const pathsRef = useRef18([]);
-  useEffect23(() => {
+  useEffect22(() => {
     const animate = () => {
       const now = performance.now();
       for (let index = 0;index < lines; index++) {
@@ -20079,7 +20063,7 @@ var Pricing = () => {
 };
 
 // src/components/homepage/BackgroundAnimation.tsx
-import { useEffect as useEffect36 } from "react";
+import { useEffect as useEffect35 } from "react";
 import { jsx as jsx46, jsxs as jsxs11 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
@@ -20105,7 +20089,7 @@ var BackgroundAnimation = () => {
       }
     }  
   `;
-  useEffect36(() => {
+  useEffect35(() => {
     const _style = document.createElement("style");
     _style.innerHTML = css;
     document.head.appendChild(_style);
@@ -20528,13 +20512,13 @@ 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 useContext41, useEffect as useEffect37 } from "react";
+import { useContext as useContext40, useEffect as useEffect36 } from "react";
 import { jsx as jsx310 } from "react/jsx-runtime";
 import { useCallback as useCallback27, useRef as useRef32 } from "react";
-import { useEffect as useEffect38, useState as useState210 } 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 { useCallback as useCallback28, useContext as useContext38, useMemo as useMemo42, useRef as useRef24, useState as useState36 } 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 useRef33 } from "react";
 import { useCallback as useCallback32, useEffect as useEffect72, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -21670,11 +21654,11 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext41(Internals.BufferingContextReact);
+  const bufferManager = useContext40(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect37(() => {
+  useEffect36(() => {
     const clear1 = bufferManager.listenForBuffering(() => {
       bufferManager.buffering.current = true;
       emitter.dispatchWaiting({});
@@ -21708,7 +21692,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
 };
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState210(false);
-  useEffect38(() => {
+  useEffect37(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -21753,20 +21737,20 @@ var usePlayer = () => {
   const playStart = useRef24(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-  const audioContext = useContext38(Internals.SharedAudioContext);
-  const { audioAndVideoTags } = useContext38(Internals.TimelineContext);
+  const audioContext = useContext37(Internals.SharedAudioContext);
+  const { audioAndVideoTags } = useContext37(Internals.TimelineContext);
   const frameRef = useRef24(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
-  const emitter = useContext38(PlayerEventEmitterContext);
+  const emitter = useContext37(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
   const isFirstFrame = frame === 0;
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext38(Internals.BufferingContextReact);
+  const bufferingContext = useContext37(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -24035,7 +24019,6 @@ var SharedPlayerContexts = ({
                     children: /* @__PURE__ */ jsx133(Internals.SharedAudioContextProvider, {
                       numberOfAudioTags: numberOfSharedAudioTags,
                       audioLatencyHint,
-                      component,
                       children: /* @__PURE__ */ jsx133(Internals.BufferingProvider, {
                         children
                       })
@@ -24609,7 +24592,7 @@ var Thumbnail = forward2(ThumbnailFn);
 // src/components/homepage/Demo/index.tsx
 import {
   useCallback as useCallback43,
-  useEffect as useEffect53,
+  useEffect as useEffect51,
   useMemo as useMemo53,
   useRef as useRef41,
   useState as useState47
@@ -25361,7 +25344,7 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React43, { useContext as useContext43, useMemo as useMemo44 } from "react";
+import React43, { useContext as useContext41, useMemo as useMemo44 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var Context = React43.createContext(undefined);
 var ColorModeProvider = ({
@@ -25378,7 +25361,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext43(Context);
+  const context = useContext41(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -25387,14 +25370,14 @@ function useColorMode() {
 
 // src/components/homepage/Demo/Comp.tsx
 init_esm();
-import { useCallback as useCallback36, useEffect as useEffect46, useMemo as useMemo48, useState as useState41 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect45, useMemo as useMemo48, useState as useState41 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 init_esm();
 import {
   createRef as createRef4,
   useCallback as useCallback35,
-  useEffect as useEffect45,
+  useEffect as useEffect43,
   useRef as useRef38,
   useState as useState40
 } from "react";
@@ -25765,14 +25748,14 @@ init_esm();
 import {
   forwardRef as forwardRef29,
   useCallback as useCallback33,
-  useEffect as useEffect43,
+  useEffect as useEffect41,
   useImperativeHandle as useImperativeHandle14,
   useRef as useRef37
 } from "react";
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
 init_esm();
-import { useEffect as useEffect41, useMemo as useMemo46, useState as useState39 } from "react";
+import { useEffect as useEffect40, useMemo as useMemo46, useState as useState39 } from "react";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState39(null);
@@ -25792,7 +25775,7 @@ var DisplayedEmoji = ({ emoji }) => {
     throw new Error("Unknown emoji");
   }, [emoji]);
   const [handle] = useState39(() => delayRender());
-  useEffect41(() => {
+  useEffect40(() => {
     Promise.all([
       fetch(src).then((res) => res.json()),
       Promise.resolve().then(() => (init_esm2(), exports_esm)).then(({ Lottie: Lottie2, getLottieMetadata: getLottieMetadata2 }) => ({
@@ -25810,7 +25793,7 @@ var DisplayedEmoji = ({ emoji }) => {
       cancelRender(err);
     });
   }, [handle, src, continueRender]);
-  useEffect41(() => {
+  useEffect40(() => {
     if (typeof document !== "undefined") {
       setBrowser(true);
     }
@@ -25906,7 +25889,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useEffect43(() => {
+  useEffect41(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -25923,7 +25906,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       onRight
     };
   }, [onLeft, onRight]);
-  useEffect43(() => {
+  useEffect41(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -26345,7 +26328,7 @@ var Cards = ({
   const positions = useRef38(getInitialPositions());
   const shouldBePositions = useRef38(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
-  useEffect45(() => {
+  useEffect43(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -26458,7 +26441,7 @@ var HomepageVideoComp = ({
     }
     return sadAudio;
   }, [emoji]);
-  useEffect46(() => {
+  useEffect45(() => {
     const a = prefetch(fireAudio);
     const b = prefetch(partyHornAudio);
     const c = prefetch(sadAudio);
@@ -26884,10 +26867,10 @@ var DragAndDropNudge = () => {
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
 init_esm();
-import { useCallback as useCallback39, useEffect as useEffect48, useMemo as useMemo51, useRef as useRef39, useState as useState45 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect47, useMemo as useMemo51, useRef as useRef39, useState as useState45 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback38, useEffect as useEffect47, useMemo as useMemo50, useState as useState43 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect46, useMemo as useMemo50, useState as useState43 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState43(null);
   const observer = useMemo50(() => {
@@ -26911,7 +26894,7 @@ var useElementSize2 = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect47(() => {
+  useEffect46(() => {
     updateSize();
     if (!observer) {
       return;
@@ -26967,7 +26950,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState45(false);
-  useEffect48(() => {
+  useEffect47(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -27018,7 +27001,7 @@ var PlayerSeekBar2 = ({
   const size4 = useElementSize2(containerRef.current);
   const [playing, setPlaying] = useState45(false);
   const [frame, setFrame] = useState45(0);
-  useEffect48(() => {
+  useEffect47(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -27031,7 +27014,7 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("frameupdate", onFrameUpdate);
     };
   }, [playerRef]);
-  useEffect48(() => {
+  useEffect47(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -27092,7 +27075,7 @@ var PlayerSeekBar2 = ({
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, playerRef]);
-  useEffect48(() => {
+  useEffect47(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -27162,7 +27145,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback40, useEffect as useEffect49, useRef as useRef40, useState as useState46 } from "react";
+import { useCallback as useCallback40, useEffect as useEffect48, useRef as useRef40, useState as useState46 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx90 } from "react/jsx-runtime";
@@ -27223,7 +27206,7 @@ var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState46(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState46(false);
   const timerRef = useRef40(null);
-  useEffect49(() => {
+  useEffect48(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -27236,7 +27219,7 @@ var PlayerVolume = ({ playerRef }) => {
       current.removeEventListener("mutechange", onMutedChange);
     };
   }, [playerRef]);
-  useEffect49(() => {
+  useEffect48(() => {
     if (isHovered) {
       document.body.style.userSelect = "none";
     } else {
@@ -27281,7 +27264,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React58, { useCallback as useCallback41, useEffect as useEffect50 } from "react";
+import React58, { useCallback as useCallback41, useEffect as useEffect49 } from "react";
 import { jsx as jsx95 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -27299,7 +27282,7 @@ var playerButtonStyle2 = {
 };
 var PlayPauseButton = ({ playerRef }) => {
   const [playing, setPlaying] = React58.useState(true);
-  useEffect50(() => {
+  useEffect49(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -27336,7 +27319,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React59, { useEffect as useEffect51 } from "react";
+import React59, { useEffect as useEffect50 } from "react";
 import { jsx as jsx97 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -27345,7 +27328,7 @@ var formatTime2 = (timeInSeconds) => {
 };
 var TimeDisplay = ({ fps, playerRef }) => {
   const [time, setTime] = React59.useState(0);
-  useEffect51(() => {
+  useEffect50(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -27516,7 +27499,7 @@ var Demo = () => {
   const [cardOrder, setCardOrder] = useState47([0, 1, 2, 3]);
   const [emojiIndex, setEmojiIndex] = useState47(0);
   const [error2, setError] = useState47(false);
-  useEffect53(() => {
+  useEffect51(() => {
     getDataAndProps().then((d2) => {
       setData(d2);
     }).catch((err) => {
@@ -27524,7 +27507,7 @@ var Demo = () => {
       setError(true);
     });
   }, []);
-  useEffect53(() => {
+  useEffect51(() => {
     const { current: playerRef } = ref;
     if (!playerRef || !data2) {
       return;
@@ -27658,16 +27641,16 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef31, useEffect as useEffect56, useImperativeHandle as useImperativeHandle15, useRef as useRef45 } from "react";
+import { forwardRef as forwardRef31, useEffect as useEffect55, useImperativeHandle as useImperativeHandle15, useRef as useRef45 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef30, useCallback as useCallback45, useEffect as useEffect55, useRef as useRef43, useState as useState48 } from "react";
+import { forwardRef as forwardRef30, useCallback as useCallback45, useEffect as useEffect53, useRef as useRef43, useState as useState48 } from "react";
 import { jsx as jsx105 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef43(null);
-  useEffect55(() => {
+  useEffect53(() => {
     refs.forEach((ref) => {
       if (!ref)
         return;
@@ -27696,12 +27679,12 @@ var VideoPlayerWithControls = forwardRef30(({ playbackId, poster, currentTime, o
       console.error("Error getting img dimensions", event);
     }
   }, [onLoaded, onSize]);
-  useEffect55(() => {
+  useEffect53(() => {
     const img = new Image;
     img.onload = (evt) => onImageLoad(evt);
     img.src = poster;
   }, [onImageLoad, poster]);
-  useEffect55(() => {
+  useEffect53(() => {
     const video = videoRef.current;
     const src = `https://stream.mux.com/${playbackId}.m3u8`;
     let hls;
@@ -27744,7 +27727,7 @@ var VideoPlayerWithControls = forwardRef30(({ playbackId, poster, currentTime, o
       }
     };
   }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect55(() => {
+  useEffect53(() => {
     const video = videoRef.current;
     if (currentTime && video) {
       video.currentTime = currentTime;
@@ -27771,7 +27754,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
   const videoRef = useRef45(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle15(ref, () => videoRef.current, []);
-  useEffect56(() => {
+  useEffect55(() => {
     let hls;
     if (videoRef.current) {
       const { current } = videoRef;
@@ -27884,11 +27867,11 @@ var EditorStarterSection = () => {
 var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect57, useState as useState49 } from "react";
+import { useEffect as useEffect56, useState as useState49 } from "react";
 import { jsx as jsx109, jsxs as jsxs41 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
   const [dailyAvatars, setDailyAvatars] = useState49([]);
-  useEffect57(() => {
+  useEffect56(() => {
     const avatars = [
       "/img/freelancers/alex.jpeg",
       "/img/freelancers/antoine.jpeg",
@@ -27987,7 +27970,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect58, useState as useState50 } from "react";
+import { useEffect as useEffect57, useState as useState50 } from "react";
 import { jsx as jsx110, jsxs as jsxs43 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -28003,7 +27986,7 @@ var icon2 = {
 };
 var IfYouKnowReact = () => {
   const [vid, setVid] = useState50("/img/compose.webm");
-  useEffect58(() => {
+  useEffect57(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
     }
@@ -28150,7 +28133,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect59, useRef as useRef46, useState as useState53 } from "react";
+import { useEffect as useEffect58, useRef as useRef46, useState as useState53 } from "react";
 import { jsx as jsx114, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
@@ -28159,7 +28142,7 @@ var icon3 = {
 var ParameterizeAndEdit = () => {
   const ref = useRef46(null);
   const [vid, setVid] = useState53("/img/editing-vp9-chrome.webm");
-  useEffect59(() => {
+  useEffect58(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
     }
@@ -28273,7 +28256,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect60, useRef as useRef47, useState as useState55 } from "react";
+import { useEffect as useEffect59, useRef as useRef47, useState as useState55 } from "react";
 import { jsx as jsx116, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -28283,12 +28266,12 @@ var RealMP4Videos = () => {
   const ref = useRef47(null);
   const videoRef = useRef47(null);
   const [vid, setVid] = useState55("/img/render-progress.webm");
-  useEffect60(() => {
+  useEffect59(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
     }
   }, []);
-  useEffect60(() => {
+  useEffect59(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -28534,7 +28517,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useEffect as useEffect61, useRef as useRef48, useState as useState56 } from "react";
+import { useEffect as useEffect60, useRef as useRef48, useState as useState56 } from "react";
 import { jsx as jsx118, jsxs as jsxs49 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -28592,7 +28575,7 @@ var VideoAppsShowcase = () => {
   const [isPlaying, setIsPlaying] = useState56(false);
   const videoRef = useRef48(null);
   const containerRef = useRef48(null);
-  useEffect61(() => {
+  useEffect60(() => {
     const video = videoRef.current;
     if (video) {
       video.pause();