@remotion/promo-pages 4.0.458 → 4.0.459

package/dist/Homepage.js

@@ -1016,7 +1016,7 @@ import { jsx as jsx19 } from "react/jsx-runtime";
 import React23, {
   forwardRef as forwardRef6,
   useContext as useContext28,
-  useEffect as useEffect15,
+  useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo28,
   useRef as useRef18,
@@ -1032,15 +1032,15 @@ import React20, {
   useRef as useRef11,
   useState as useState12
 } from "react";
-import { useEffect as useEffect8, useMemo as useMemo21 } from "react";
+import { useMemo as useMemo21 } from "react";
 import { jsx as jsx20, jsxs as jsxs22 } from "react/jsx-runtime";
 import { useRef as useRef12 } from "react";
-import { useContext as useContext23, useEffect as useEffect9, useMemo as useMemo23, useState as useState13 } from "react";
+import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo23, useState as useState13 } from "react";
 import { useContext as useContext22 } from "react";
 import {
   useCallback as useCallback12,
   useContext as useContext26,
-  useEffect as useEffect13,
+  useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect8,
   useRef as useRef17
 } from "react";
@@ -1049,7 +1049,7 @@ import { useContext as useContext25, useMemo as useMemo25 } from "react";
 import React21, {
   useCallback as useCallback10,
   useContext as useContext24,
-  useEffect as useEffect10,
+  useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo24,
   useRef as useRef14,
@@ -1057,15 +1057,15 @@ import React21, {
 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import React22 from "react";
-import { useEffect as useEffect11, useState as useState15 } from "react";
-import { useEffect as useEffect12, useRef as useRef16 } from "react";
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect10, useState as useState15 } from "react";
+import { useEffect as useEffect11, useRef as useRef16 } from "react";
+import { useEffect as useEffect13 } from "react";
 import { createContext as createContext21, useContext as useContext27, useMemo as useMemo27 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef7,
   useContext as useContext29,
-  useEffect as useEffect16,
+  useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo29,
@@ -1106,7 +1106,7 @@ import { useCallback as useCallback18 } from "react";
 import {
   useCallback as useCallback17,
   useContext as useContext34,
-  useEffect as useEffect17,
+  useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo33,
   useState as useState20
@@ -1115,13 +1115,13 @@ import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
   forwardRef as forwardRef10,
   useContext as useContext35,
-  useEffect as useEffect19,
+  useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo34,
   useRef as useRef22,
   useState as useState21
 } from "react";
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect17 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx32 } from "react/jsx-runtime";
 import React36, { useMemo as useMemo35 } from "react";
@@ -1136,7 +1136,7 @@ import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as
 import {
   forwardRef as forwardRef12,
   useContext as useContext36,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo37,
@@ -2673,7 +2673,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.458";
+var VERSION = "4.0.459";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -4772,11 +4772,6 @@ var useSingletonAudioContext = ({
       gainNode
     };
   }, [logLevel, latencyHint, env.isRendering, audioEnabled]);
-  useEffect8(() => {
-    return () => {
-      context?.audioContext?.close();
-    };
-  }, [context]);
   return context;
 };
 var waitUntilActuallyResumed = (audioContext, logLevel) => {
@@ -5507,7 +5502,7 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, mediaStartsAt, volume, mediaVolume]);
-  useEffect9(() => {
+  useEffect8(() => {
     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`);
     }
@@ -5570,7 +5565,7 @@ var useImageInTimeline = ({
     loop: false
   });
   const { isStudio } = useRemotionEnvironment();
-  useEffect9(() => {
+  useEffect8(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5653,7 +5648,7 @@ var useMediaInTimeline = ({
     loop: false
   });
   const { isStudio } = useRemotionEnvironment();
-  useEffect9(() => {
+  useEffect8(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5755,7 +5750,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect10(() => {
+  useEffect9(() => {
     if (rendering) {
       return;
     }
@@ -5800,7 +5795,7 @@ var BufferingProvider = ({ children }) => {
 };
 var useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState14(bufferManager.buffering.current);
-  useEffect10(() => {
+  useEffect9(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -5969,7 +5964,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState15(false);
-  useEffect11(() => {
+  useEffect10(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -6102,7 +6097,7 @@ var useRequestVideoCallbackTime = ({
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef16(null);
-  useEffect12(() => {
+  useEffect11(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -6388,7 +6383,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect13(() => {
+  useEffect12(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -6433,7 +6428,7 @@ var useMediaPlayback = ({
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect13(() => {
+  useEffect12(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -6562,7 +6557,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect14(() => {
+  useEffect13(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -6781,7 +6776,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }, [audioRef]);
   const currentOnDurationCallback = useRef18(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect15(() => {
+  useEffect14(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -6850,7 +6845,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect16(() => {
+  useEffect15(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -7804,7 +7799,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect17(() => {
+  useEffect16(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -7965,7 +7960,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect18(() => {
+  useEffect17(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -8129,7 +8124,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -8172,7 +8167,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef22(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -8189,7 +8184,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -9200,7 +9195,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect20(() => {
+  useEffect19(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -9243,7 +9238,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect20(() => {
+  useEffect19(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -11287,7 +11282,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect21, useMemo as useMemo41, useState as useState23 } from "react";
+import React33, { useEffect as useEffect20, useMemo as useMemo41, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -15882,7 +15877,7 @@ var useHoverTransforms = (ref, disabled) => {
     isActive: false
   });
   const eventTarget = useMemo41(() => new EventTarget, []);
-  useEffect21(() => {
+  useEffect20(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -16029,7 +16024,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState23(getAngle(ref.current, lastCoordinates));
-  useEffect21(() => {
+  useEffect20(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -24265,7 +24260,7 @@ var Pricing = () => {
 };
 
 // src/components/homepage/BackgroundAnimation.tsx
-import { useEffect as useEffect40 } from "react";
+import { useEffect as useEffect41 } from "react";
 import { jsx as jsx49, jsxs as jsxs10 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
@@ -24291,7 +24286,7 @@ var BackgroundAnimation = () => {
       }
     }  
   `;
-  useEffect40(() => {
+  useEffect41(() => {
     const _style = document.createElement("style");
     _style.innerHTML = css;
     document.head.appendChild(_style);
@@ -24697,16 +24692,16 @@ var CommunityStats_default = CommunityStats;
 import { jsx as jsx56, jsxs as jsxs13 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment11 } from "react/jsx-runtime";
 import React56 from "react";
-import { useContext as useContext210, useEffect as useEffect41, useState as useState40 } from "react";
+import { useContext as useContext210, useEffect as useEffect42, useState as useState40 } from "react";
 import { useContext as useContext44, useLayoutEffect as useLayoutEffect17 } from "react";
 import { jsx as jsx313 } from "react/jsx-runtime";
 import { useCallback as useCallback34, useRef as useRef42 } from "react";
-import { useEffect as useEffect210, useState as useState24 } from "react";
+import { useEffect as useEffect24, useState as useState24 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
 import { useContext as useContext45, useEffect as useEffect52, useRef as useRef52 } from "react";
 import { useEffect as useEffect310, useRef as useRef310 } from "react";
 import { useCallback as useCallback24, useContext as useContext39, useMemo as useMemo51, useRef as useRef26, useState as useState310 } from "react";
-import { useEffect as useEffect42, useRef as useRef43 } from "react";
+import { useEffect as useEffect43, useRef as useRef43 } from "react";
 import { useCallback as useCallback35, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef210,
@@ -26016,7 +26011,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect41(() => {
+  useEffect42(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
@@ -26029,7 +26024,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
 };
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState24(false);
-  useEffect210(() => {
+  useEffect24(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -26390,7 +26385,7 @@ var getIsBackgrounded = () => {
 };
 var useIsBackgrounded = () => {
   const isBackgrounded = useRef43(getIsBackgrounded());
-  useEffect42(() => {
+  useEffect43(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
     };
@@ -29077,7 +29072,7 @@ var Thumbnail = forward2(ThumbnailFn);
 // src/components/homepage/Demo/index.tsx
 import {
   useCallback as useCallback49,
-  useEffect as useEffect57,
+  useEffect as useEffect58,
   useMemo as useMemo64,
   useRef as useRef53,
   useState as useState56
@@ -29856,7 +29851,7 @@ function useColorMode() {
 // ../media/dist/esm/index.mjs
 import { useState as useState312 } from "react";
 import { useMemo as useMemo311 } from "react";
-import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo55, useRef as useRef44, useState as useState41 } from "react";
+import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo55, useRef as useRef44, useState as useState41 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
@@ -29879,7 +29874,7 @@ import { jsx as jsx315 } from "react/jsx-runtime";
 import { useMemo as useMemo63, useState as useState63 } from "react";
 import {
   useContext as useContext47,
-  useEffect as useEffect212,
+  useEffect as useEffect210,
   useLayoutEffect as useLayoutEffect34,
   useMemo as useMemo412,
   useRef as useRef210,
@@ -31856,7 +31851,7 @@ var AudioForPreviewAssertedShowing = ({
     logLevel,
     label: "AudioForPreview"
   });
-  useEffect43(() => {
+  useEffect44(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -34353,7 +34348,7 @@ var VideoForPreviewAssertedShowing = ({
       cacheVideoFrame(src, canvas);
     };
   }, [_experimentalInitiallyDrawCachedFrame, src]);
-  useEffect212(() => {
+  useEffect210(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -35143,13 +35138,13 @@ var Video = Internals.wrapInSchema(VideoInner, videoSchema);
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback41, useEffect as useEffect49, useMemo as useMemo58, useState as useState48 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect50, useMemo as useMemo58, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
   createRef as createRef4,
   useCallback as useCallback40,
-  useEffect as useEffect48,
+  useEffect as useEffect49,
   useRef as useRef49,
   useState as useState47
 } from "react";
@@ -35517,14 +35512,14 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 import {
   forwardRef as forwardRef35,
   useCallback as useCallback39,
-  useEffect as useEffect47,
+  useEffect as useEffect48,
   useImperativeHandle as useImperativeHandle12,
   useRef as useRef48
 } from "react";
 
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
-import { useEffect as useEffect45, useRef as useRef47, useState as useState44 } from "react";
+import { useEffect as useEffect46, useRef as useRef47, useState as useState44 } from "react";
 import { jsx as jsx69 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -35600,14 +35595,14 @@ var Lottie = ({
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
   const [handle] = useState44(() => delayRender2("Waiting for Lottie animation to load"));
-  useEffect45(() => {
+  useEffect46(() => {
     return () => {
       continueRender(handle);
     };
   }, [handle, continueRender]);
   const frame = useCurrentFrame();
   currentFrameRef.current = frame;
-  useEffect45(() => {
+  useEffect46(() => {
     if (!containerRef.current) {
       return;
     }
@@ -35652,17 +35647,17 @@ var Lottie = ({
     renderer,
     continueRender
   ]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (animationRef.current && direction) {
       animationRef.current.setDirection(direction === "backward" ? -1 : 1);
     }
   }, [direction]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (animationRef.current && playbackRate) {
       animationRef.current.setSpeed(playbackRate);
     }
   }, [playbackRate]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (!animationRef.current) {
       return;
     }
@@ -35695,7 +35690,7 @@ var Lottie = ({
 };
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
-import { useEffect as useEffect46, useMemo as useMemo56, useState as useState46 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo56, useState as useState46 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState46(null);
@@ -35715,7 +35710,7 @@ var DisplayedEmoji = ({ emoji }) => {
     throw new Error("Unknown emoji");
   }, [emoji]);
   const [handle] = useState46(() => delayRender2("Loading emojis!"));
-  useEffect46(() => {
+  useEffect47(() => {
     fetch(src).then((res) => res.json()).then((json) => {
       setData({
         duration: getLottieMetadata(json)?.durationInSeconds,
@@ -35726,7 +35721,7 @@ var DisplayedEmoji = ({ emoji }) => {
       cancelRender2(err);
     });
   }, [handle, src, continueRender, cancelRender2]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (typeof document !== "undefined") {
       setBrowser(true);
     }
@@ -35822,7 +35817,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useEffect47(() => {
+  useEffect48(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -35839,7 +35834,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       onRight
     };
   }, [onLeft, onRight]);
-  useEffect47(() => {
+  useEffect48(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -36254,7 +36249,7 @@ var Cards = ({
   const positions = useRef49(getInitialPositions());
   const shouldBePositions = useRef49(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
-  useEffect48(() => {
+  useEffect49(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -36367,7 +36362,7 @@ var HomepageVideoComp = ({
     }
     return sadAudio;
   }, [emoji]);
-  useEffect49(() => {
+  useEffect50(() => {
     const a = prefetch(fireAudio);
     const b = prefetch(partyHornAudio);
     const c = prefetch(sadAudio);
@@ -36443,7 +36438,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.458";
+var VERSION2 = "4.0.459";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -41449,10 +41444,10 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback46, useEffect as useEffect51, useMemo as useMemo61, useRef as useRef50, useState as useState51 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect53, useMemo as useMemo61, useRef as useRef50, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback45, useEffect as useEffect50, useMemo as useMemo60, useState as useState50 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect51, useMemo as useMemo60, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState50(null);
   const observer = useMemo60(() => {
@@ -41476,7 +41471,7 @@ var useElementSize2 = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect50(() => {
+  useEffect51(() => {
     updateSize();
     if (!observer) {
       return;
@@ -41532,7 +41527,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState51(false);
-  useEffect51(() => {
+  useEffect53(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -41583,7 +41578,7 @@ var PlayerSeekBar2 = ({
   const size4 = useElementSize2(containerRef.current);
   const [playing, setPlaying] = useState51(false);
   const [frame, setFrame] = useState51(0);
-  useEffect51(() => {
+  useEffect53(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41596,7 +41591,7 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("frameupdate", onFrameUpdate);
     };
   }, [playerRef]);
-  useEffect51(() => {
+  useEffect53(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41657,7 +41652,7 @@ var PlayerSeekBar2 = ({
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, playerRef]);
-  useEffect51(() => {
+  useEffect53(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -41727,7 +41722,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback47, useEffect as useEffect53, useRef as useRef51, useState as useState54 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect55, useRef as useRef51, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx101 } from "react/jsx-runtime";
@@ -41788,7 +41783,7 @@ var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState54(false);
   const timerRef = useRef51(null);
-  useEffect53(() => {
+  useEffect55(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41801,7 +41796,7 @@ var PlayerVolume = ({ playerRef }) => {
       current.removeEventListener("mutechange", onMutedChange);
     };
   }, [playerRef]);
-  useEffect53(() => {
+  useEffect55(() => {
     if (isHovered) {
       document.body.style.userSelect = "none";
     } else {
@@ -41846,7 +41841,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React71, { useCallback as useCallback48, useEffect as useEffect55 } from "react";
+import React71, { useCallback as useCallback48, useEffect as useEffect56 } from "react";
 import { jsx as jsx107 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -41864,7 +41859,7 @@ var playerButtonStyle2 = {
 };
 var PlayPauseButton = ({ playerRef }) => {
   const [playing, setPlaying] = React71.useState(true);
-  useEffect55(() => {
+  useEffect56(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41901,7 +41896,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React73, { useEffect as useEffect56 } from "react";
+import React73, { useEffect as useEffect57 } from "react";
 import { jsx as jsx108 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -41910,7 +41905,7 @@ var formatTime2 = (timeInSeconds) => {
 };
 var TimeDisplay = ({ fps, playerRef }) => {
   const [time, setTime] = React73.useState(0);
-  useEffect56(() => {
+  useEffect57(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -42081,7 +42076,7 @@ var Demo = () => {
   const [cardOrder, setCardOrder] = useState56([0, 1, 2, 3]);
   const [emojiIndex, setEmojiIndex] = useState56(0);
   const [error2, setError] = useState56(false);
-  useEffect57(() => {
+  useEffect58(() => {
     getDataAndProps().then((d2) => {
       setData(d2);
     }).catch((err) => {
@@ -42089,7 +42084,7 @@ var Demo = () => {
       setError(true);
     });
   }, []);
-  useEffect57(() => {
+  useEffect58(() => {
     const { current: playerRef } = ref;
     if (!playerRef || !data2) {
       return;
@@ -42234,16 +42229,16 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef38, useEffect as useEffect59, useImperativeHandle as useImperativeHandle14, useRef as useRef56 } from "react";
+import { forwardRef as forwardRef38, useEffect as useEffect60, useImperativeHandle as useImperativeHandle14, useRef as useRef56 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef37, useCallback as useCallback50, useEffect as useEffect58, useRef as useRef55, useState as useState57 } from "react";
+import { forwardRef as forwardRef37, useCallback as useCallback50, useEffect as useEffect59, useRef as useRef55, useState as useState57 } from "react";
 import { jsx as jsx116 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef55(null);
-  useEffect58(() => {
+  useEffect59(() => {
     refs.forEach((ref) => {
       if (!ref)
         return;
@@ -42272,12 +42267,12 @@ var VideoPlayerWithControls = forwardRef37(({ playbackId, poster, currentTime, o
       console.error("Error getting img dimensions", event);
     }
   }, [onLoaded, onSize]);
-  useEffect58(() => {
+  useEffect59(() => {
     const img = new Image;
     img.onload = (evt) => onImageLoad(evt);
     img.src = poster;
   }, [onImageLoad, poster]);
-  useEffect58(() => {
+  useEffect59(() => {
     const video = videoRef.current;
     const src = `https://stream.mux.com/${playbackId}.m3u8`;
     let hls;
@@ -42320,7 +42315,7 @@ var VideoPlayerWithControls = forwardRef37(({ playbackId, poster, currentTime, o
       }
     };
   }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect58(() => {
+  useEffect59(() => {
     const video = videoRef.current;
     if (currentTime && video) {
       video.currentTime = currentTime;
@@ -42347,7 +42342,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
   const videoRef = useRef56(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle14(ref, () => videoRef.current, []);
-  useEffect59(() => {
+  useEffect60(() => {
     let hls;
     if (videoRef.current) {
       const { current } = videoRef;
@@ -42460,11 +42455,11 @@ var EditorStarterSection = () => {
 var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect60, useState as useState58 } from "react";
+import { useEffect as useEffect61, useState as useState58 } from "react";
 import { jsx as jsx119, jsxs as jsxs40 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
   const [dailyAvatars, setDailyAvatars] = useState58([]);
-  useEffect60(() => {
+  useEffect61(() => {
     const avatars = experts.map((expert) => expert.image);
     const selectedAvatars = [];
     for (let i = 0;i < 3; i++) {
@@ -42561,7 +42556,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect61, useState as useState59 } from "react";
+import { useEffect as useEffect63, useState as useState59 } from "react";
 import { jsx as jsx120, jsxs as jsxs41 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -42577,7 +42572,7 @@ var icon2 = {
 };
 var IfYouKnowReact = () => {
   const [vid, setVid] = useState59("/img/compose.webm");
-  useEffect61(() => {
+  useEffect63(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
     }
@@ -42724,7 +42719,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect63, useRef as useRef57, useState as useState61 } from "react";
+import { useEffect as useEffect65, useRef as useRef57, useState as useState61 } from "react";
 import { jsx as jsx124, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
@@ -42733,7 +42728,7 @@ var icon3 = {
 var ParameterizeAndEdit = () => {
   const ref = useRef57(null);
   const [vid, setVid] = useState61("/img/editing-vp9-chrome.webm");
-  useEffect63(() => {
+  useEffect65(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
     }
@@ -42847,7 +42842,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect65, useRef as useRef58, useState as useState64 } from "react";
+import { useEffect as useEffect66, useRef as useRef58, useState as useState64 } from "react";
 import { jsx as jsx126, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -42857,12 +42852,12 @@ var RealMP4Videos = () => {
   const ref = useRef58(null);
   const videoRef = useRef58(null);
   const [vid, setVid] = useState64("/img/render-progress.webm");
-  useEffect65(() => {
+  useEffect66(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
     }
   }, []);
-  useEffect65(() => {
+  useEffect66(() => {
     const { current } = ref;
     if (!current) {
       return;