@remotion/promo-pages 4.0.439 → 4.0.441

package/dist/Homepage.js

@@ -888,7 +888,8 @@ import {
   useContext as useContext29,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
-  useRef as useRef17
+  useRef as useRef17,
+  useState as useState15
 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
@@ -898,7 +899,7 @@ import {
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo26,
   useRef as useRef18,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import React25 from "react";
@@ -908,7 +909,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React27 from "react";
 import React28, { createContext as createContext21 } from "react";
-import { useContext as useContext31, useMemo as useMemo29, useState as useState16 } from "react";
+import { useContext as useContext31, useMemo as useMemo29, useState as useState17 } from "react";
 import { useContext as useContext32 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
@@ -917,7 +918,7 @@ import {
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo30,
-  useState as useState17
+  useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import React30, {
@@ -927,7 +928,7 @@ import React30, {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo31,
   useRef as useRef19,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { useEffect as useEffect15 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -998,7 +999,7 @@ var useIsPlayer = () => {
 function truthy(value) {
   return Boolean(value);
 }
-var VERSION = "4.0.439";
+var VERSION = "4.0.441";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -4089,6 +4090,76 @@ var useBasicMediaInTimeline = ({
     finalDisplayName: displayName ?? getAssetDisplayName(src)
   };
 };
+var useImageInTimeline = ({
+  src,
+  displayName,
+  id,
+  stack,
+  showInTimeline,
+  premountDisplay,
+  postmountDisplay,
+  loopDisplay
+}) => {
+  const parentSequence = useContext19(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
+  const { duration, nonce, rootId, isStudio, finalDisplayName } = useBasicMediaInTimeline({
+    volume: undefined,
+    mediaVolume: 0,
+    mediaType: "image",
+    src,
+    displayName,
+    trimAfter: undefined,
+    trimBefore: undefined,
+    playbackRate: 1
+  });
+  useEffect4(() => {
+    if (!src) {
+      throw new Error("No src passed");
+    }
+    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
+      return;
+    }
+    if (!showInTimeline) {
+      return;
+    }
+    registerSequence({
+      type: "image",
+      src,
+      id,
+      duration,
+      from: 0,
+      parent: parentSequence?.id ?? null,
+      displayName: finalDisplayName,
+      rootId,
+      showInTimeline: true,
+      nonce: nonce.get(),
+      loopDisplay,
+      stack,
+      premountDisplay,
+      postmountDisplay,
+      controls: null
+    });
+    return () => {
+      unregisterSequence(id);
+    };
+  }, [
+    duration,
+    id,
+    parentSequence,
+    src,
+    registerSequence,
+    unregisterSequence,
+    nonce,
+    stack,
+    showInTimeline,
+    premountDisplay,
+    postmountDisplay,
+    isStudio,
+    loopDisplay,
+    rootId,
+    finalDisplayName
+  ]);
+};
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -5833,12 +5904,16 @@ var ImgRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   onImageFrame,
   crossOrigin,
+  showInTimeline,
+  name,
+  stack,
   ...props2
 }, ref) => {
   const imageRef = useRef17(null);
   const errors = useRef17({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext29(SequenceContext);
+  const [timelineId] = useState15(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -5849,6 +5924,16 @@ var ImgRefForwarding = ({
   useImperativeHandle6(ref, () => {
     return imageRef.current;
   }, []);
+  useImageInTimeline({
+    src,
+    displayName: name ?? null,
+    id: timelineId,
+    stack: stack ?? null,
+    showInTimeline: showInTimeline ?? true,
+    premountDisplay: sequenceContext?.premountDisplay ?? null,
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
+    loopDisplay: undefined
+  });
   const actualSrc = usePreload(src);
   const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
@@ -5971,6 +6056,7 @@ var ImgRefForwarding = ({
   });
 };
 var Img = forwardRef8(ImgRefForwarding);
+addSequenceStackTraces(Img);
 var compositionsRef = React24.createRef();
 var CompositionManagerProvider = ({
   children,
@@ -5979,9 +6065,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState15([]);
-  const [canvasContent, setCanvasContent] = useState15(initialCanvasContent);
-  const [compositions, setCompositions] = useState15(initialCompositions);
+  const [folders, setFolders] = useState16([]);
+  const [canvasContent, setCanvasContent] = useState16(initialCanvasContent);
+  const [compositions, setCompositions] = useState16(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
@@ -6245,6 +6331,7 @@ var validCodecs = [
   "h265",
   "vp8",
   "vp9",
+  "av1",
   "mp3",
   "aac",
   "wav",
@@ -6468,7 +6555,7 @@ var useSchema = (schema, currentValue) => {
   if (earlyReturn) {
     return earlyReturn;
   }
-  const [overrideId] = useState16(() => String(Math.random()));
+  const [overrideId] = useState17(() => String(Math.random()));
   const {
     visualModeEnabled,
     dragOverrides: overrides,
@@ -6638,7 +6725,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState17(null);
+  const [imageSrc, setImageSrc] = useState18(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
@@ -6827,7 +6914,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState18(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -6893,7 +6980,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState18(() => playbackLogging({
+  useState19(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -10061,7 +10148,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React6, { useEffect as useEffect18, useMemo as useMemo39, useState as useState19 } from "react";
+import React6, { useEffect as useEffect18, useMemo as useMemo39, useState as useState20 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -14664,7 +14751,7 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState19(getAngle(ref.current, lastCoordinates));
+  const [angle, setAngle] = useState20(getAngle(ref.current, lastCoordinates));
   useEffect18(() => {
     const element = ref.current;
     if (!element) {
@@ -22289,10 +22376,10 @@ function cn2(...inputs) {
 }
 
 // src/components/homepage/InfoTooltip.tsx
-import { useState as useState38 } from "react";
+import { useState as useState39 } from "react";
 import { jsx as jsx44, jsxs as jsxs7 } from "react/jsx-runtime";
 var InfoTooltip = ({ children }) => {
-  const [isVisible, setIsVisible] = useState38(false);
+  const [isVisible, setIsVisible] = useState39(false);
   return /* @__PURE__ */ jsxs7("span", {
     className: "relative inline-block ml-1 text-gray-600 cursor-default",
     onPointerEnter: () => setIsVisible(true),
@@ -23370,7 +23457,7 @@ var CommunityStats_default = CommunityStats;
 import { jsx as jsx56, jsxs as jsxs14 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment9 } from "react/jsx-runtime";
 import React55 from "react";
-import { useContext as useContext210, useEffect as useEffect40, useState as useState39 } from "react";
+import { useContext as useContext210, useEffect as useEffect40, useState as useState40 } from "react";
 import { useContext as useContext43, useLayoutEffect as useLayoutEffect16 } from "react";
 import { jsx as jsx312 } from "react/jsx-runtime";
 import { useCallback as useCallback31, useRef as useRef38 } from "react";
@@ -24074,6 +24161,7 @@ var validCodecs2 = [
   "h265",
   "vp8",
   "vp9",
+  "av1",
   "mp3",
   "aac",
   "wav",
@@ -24682,7 +24770,7 @@ var useBufferStateEmitter = (emitter) => {
   }, [bufferManager, emitter]);
 };
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-  const [emitter] = useState39(() => new PlayerEmitter);
+  const [emitter] = useState40(() => new PlayerEmitter);
   const bufferManager = useContext210(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
@@ -27640,7 +27728,7 @@ import {
   useEffect as useEffect56,
   useMemo as useMemo61,
   useRef as useRef50,
-  useState as useState54
+  useState as useState56
 } from "react";
 
 // ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/extends.js
@@ -28420,7 +28508,7 @@ import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
 import { useMemo as useMemo51 } from "react";
 import { useContext as useContext47, useLayoutEffect as useLayoutEffect17 } from "react";
-import { useContext as useContext212, useState as useState40, useEffect as useEffect41 } from "react";
+import { useContext as useContext212, useState as useState41, useEffect as useEffect41 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
 import { useContext as useContext46, useLayoutEffect as useLayoutEffect24, useMemo as useMemo310, useState as useState312 } from "react";
 import React211 from "react";
@@ -30308,8 +30396,8 @@ var useMediaInTimeline2 = ({
   const parentSequence = useContext212(Internals.SequenceContext);
   const startsAt = Internals.useMediaStartsAt();
   const { registerSequence, unregisterSequence } = useContext212(Internals.SequenceManager);
-  const [sequenceId] = useState40(() => String(Math.random()));
-  const [mediaId] = useState40(() => String(Math.random()));
+  const [sequenceId] = useState41(() => String(Math.random()));
+  const [mediaId] = useState41(() => String(Math.random()));
   const frame = useCurrentFrame();
   const {
     volumes,
@@ -30520,6 +30608,7 @@ var AudioForPreviewAssertedShowing = ({
   const initialGlobalPlaybackRate = useRef40(globalPlaybackRate);
   const initialPlaybackRate = useRef40(playbackRate);
   const initialMuted = useRef40(effectiveMuted);
+  const initialDurationInFrames = useRef40(videoConfig.durationInFrames);
   const initialSequenceOffset = useRef40(sequenceOffset);
   useCommonEffects({
     mediaPlayerRef,
@@ -30570,7 +30659,7 @@ var AudioForPreviewAssertedShowing = ({
         isPostmounting: initialIsPostmounting.current,
         isPremounting: initialIsPremounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
-        durationInFrames: videoConfig.durationInFrames,
+        durationInFrames: initialDurationInFrames.current,
         onVideoFrameCallback: null,
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
@@ -30666,7 +30755,6 @@ var AudioForPreviewAssertedShowing = ({
     debugAudioScheduling,
     buffer,
     onError,
-    videoConfig.durationInFrames,
     credentials
   ]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
@@ -32889,6 +32977,7 @@ var VideoForPreviewAssertedShowing = ({
   const initialGlobalPlaybackRate = useRef212(globalPlaybackRate);
   const initialPlaybackRate = useRef212(playbackRate);
   const initialMuted = useRef212(effectiveMuted);
+  const initialDurationInFrames = useRef212(videoConfig.durationInFrames);
   const initialSequenceOffset = useRef212(sequenceOffset);
   useEffect312(() => {
     if (!sharedAudioContext)
@@ -32914,7 +33003,7 @@ var VideoForPreviewAssertedShowing = ({
         isPremounting: initialIsPremounting.current,
         isPostmounting: initialIsPostmounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
-        durationInFrames: videoConfig.durationInFrames,
+        durationInFrames: initialDurationInFrames.current,
         onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
         playing: initialPlaying.current,
         sequenceOffset: initialSequenceOffset.current,
@@ -33008,7 +33097,6 @@ var VideoForPreviewAssertedShowing = ({
     sharedAudioContext,
     videoConfig.fps,
     onError,
-    videoConfig.durationInFrames,
     credentials
   ]);
   const classNameValue = useMemo412(() => {
@@ -33620,7 +33708,7 @@ var Video = Internals.wrapInSchema(VideoInner, videoSchema);
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback38, useEffect as useEffect48, useMemo as useMemo57, useState as useState47 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect48, useMemo as useMemo57, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
@@ -33628,7 +33716,7 @@ import {
   useCallback as useCallback37,
   useEffect as useEffect47,
   useRef as useRef47,
-  useState as useState46
+  useState as useState47
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
@@ -34001,7 +34089,7 @@ import {
 
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
-import { useEffect as useEffect43, useRef as useRef45, useState as useState41 } from "react";
+import { useEffect as useEffect43, useRef as useRef45, useState as useState44 } from "react";
 import { jsx as jsx69 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -34076,7 +34164,7 @@ var Lottie = ({
   const onAnimationLoadedRef = useRef45(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender, continueRender } = useDelayRender();
-  const [handle] = useState41(() => delayRender("Waiting for Lottie animation to load"));
+  const [handle] = useState44(() => delayRender("Waiting for Lottie animation to load"));
   useEffect43(() => {
     return () => {
       continueRender(handle);
@@ -34172,12 +34260,12 @@ var Lottie = ({
 };
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
-import { useEffect as useEffect45, useMemo as useMemo54, useState as useState44 } from "react";
+import { useEffect as useEffect45, useMemo as useMemo54, useState as useState46 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
-  const [data, setData] = useState44(null);
+  const [data, setData] = useState46(null);
   const { durationInFrames, fps } = useVideoConfig();
-  const [browser, setBrowser] = useState44(typeof document !== "undefined");
+  const [browser, setBrowser] = useState46(typeof document !== "undefined");
   const { delayRender, continueRender, cancelRender: cancelRender2 } = useDelayRender();
   const src = useMemo54(() => {
     if (emoji === "melting") {
@@ -34191,7 +34279,7 @@ var DisplayedEmoji = ({ emoji }) => {
     }
     throw new Error("Unknown emoji");
   }, [emoji]);
-  const [handle] = useState44(() => delayRender("Loading emojis!"));
+  const [handle] = useState46(() => delayRender("Loading emojis!"));
   useEffect45(() => {
     fetch(src).then((res) => res.json()).then((json) => {
       setData({
@@ -34723,7 +34811,7 @@ var Cards = ({
   trending
 }) => {
   const container4 = useRef47(null);
-  const [refs] = useState46(() => {
+  const [refs] = useState47(() => {
     return new Array(4).fill(true).map(() => {
       return createRef4();
     });
@@ -34821,7 +34909,7 @@ var HomepageVideoComp = ({
   onClickLeft,
   onClickRight
 }) => {
-  const [rerenders, setRerenders] = useState47(0);
+  const [rerenders, setRerenders] = useState48(0);
   const onUpdate = useCallback38((newIndices) => {
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
@@ -34920,7 +35008,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.439";
+var VERSION2 = "4.0.441";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -34928,7 +35016,7 @@ import { AudioSampleSource } from "mediabunny";
 import { createRef as createRef6 } from "react";
 import { flushSync as flushSync22 } from "react-dom";
 import ReactDOM6 from "react-dom/client";
-import { useImperativeHandle as useImperativeHandle13, useState as useState48 } from "react";
+import { useImperativeHandle as useImperativeHandle13, useState as useState49 } from "react";
 import { flushSync as flushSync3 } from "react-dom";
 import { jsx as jsx88 } from "react/jsx-runtime";
 import { jsx as jsx217 } from "react/jsx-runtime";
@@ -35485,7 +35573,7 @@ var UpdateTime = ({
   initialFrame,
   timeUpdater
 }) => {
-  const [frame, setFrame] = useState48(initialFrame);
+  const [frame, setFrame] = useState49(initialFrame);
   useImperativeHandle13(timeUpdater, () => ({
     update: (f) => {
       flushSync3(() => {
@@ -39406,12 +39494,12 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback41, useEffect as useEffect50, useMemo as useMemo60, useRef as useRef48, useState as useState50 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect50, useMemo as useMemo60, useRef as useRef48, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback40, useEffect as useEffect49, useMemo as useMemo59, useState as useState49 } from "react";
+import { useCallback as useCallback40, useEffect as useEffect49, useMemo as useMemo59, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
-  const [size4, setSize] = useState49(null);
+  const [size4, setSize] = useState50(null);
   const observer = useMemo59(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -39488,7 +39576,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
   return current;
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
-  const [hovered, setHovered] = useState50(false);
+  const [hovered, setHovered] = useState51(false);
   useEffect50(() => {
     const { current } = ref;
     if (!current) {
@@ -39538,8 +39626,8 @@ var PlayerSeekBar2 = ({
   const containerRef = useRef48(null);
   const barHovered = useHoverState2(containerRef, false);
   const size4 = useElementSize2(containerRef.current);
-  const [playing, setPlaying] = useState50(false);
-  const [frame, setFrame] = useState50(0);
+  const [playing, setPlaying] = useState51(false);
+  const [frame, setFrame] = useState51(0);
   useEffect50(() => {
     const { current } = playerRef;
     if (!current) {
@@ -39571,7 +39659,7 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const [dragging, setDragging] = useState50({
+  const [dragging, setDragging] = useState51({
     dragging: false
   });
   const width2 = size4?.width ?? 0;
@@ -39684,7 +39772,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback43, useEffect as useEffect51, useRef as useRef49, useState as useState51 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect51, useRef as useRef49, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx101 } from "react/jsx-runtime";
@@ -39742,8 +39830,8 @@ var IsMutedIcon = (props) => {
 // src/components/homepage/Demo/PlayerVolume.tsx
 import { jsx as jsx105 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
-  const [muted, setIsMuted] = useState51(() => playerRef.current?.isMuted() ?? true);
-  const [isHovered, setIsHovered] = useState51(false);
+  const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
+  const [isHovered, setIsHovered] = useState54(false);
   const timerRef = useRef49(null);
   useEffect51(() => {
     const { current } = playerRef;
@@ -40032,12 +40120,12 @@ var playerWrapper = {
 };
 var Demo = () => {
   const { colorMode } = useColorMode();
-  const [data2, setData] = useState54(null);
+  const [data2, setData] = useState56(null);
   const ref = useRef50(null);
-  const [isFullscreen, setIsFullscreen] = useState54(false);
-  const [cardOrder, setCardOrder] = useState54([0, 1, 2, 3]);
-  const [emojiIndex, setEmojiIndex] = useState54(0);
-  const [error2, setError] = useState54(false);
+  const [isFullscreen, setIsFullscreen] = useState56(false);
+  const [cardOrder, setCardOrder] = useState56([0, 1, 2, 3]);
+  const [emojiIndex, setEmojiIndex] = useState56(0);
+  const [error2, setError] = useState56(false);
   useEffect56(() => {
     getDataAndProps().then((d2) => {
       setData(d2);
@@ -40196,7 +40284,7 @@ import { forwardRef as forwardRef37, useEffect as useEffect58, useImperativeHand
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef36, useCallback as useCallback47, useEffect as useEffect57, useRef as useRef51, useState as useState56 } from "react";
+import { forwardRef as forwardRef36, useCallback as useCallback47, useEffect as useEffect57, useRef as useRef51, useState as useState57 } from "react";
 import { jsx as jsx116 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef51(null);
@@ -40217,7 +40305,7 @@ var VideoPlayerWithControls = forwardRef36(({ playbackId, poster, currentTime, o
   const videoRef = useRef51(null);
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef51(null);
-  const [playerInitTime] = useState56(Date.now());
+  const [playerInitTime] = useState57(Date.now());
   const videoError = useCallback47((event) => onError(event), [onError]);
   const onImageLoad = useCallback47((event) => {
     const [w, h] = [event.target.width, event.target.height];
@@ -40417,10 +40505,10 @@ var EditorStarterSection = () => {
 var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect59, useState as useState57 } from "react";
+import { useEffect as useEffect59, useState as useState58 } from "react";
 import { jsx as jsx119, jsxs as jsxs41 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
-  const [dailyAvatars, setDailyAvatars] = useState57([]);
+  const [dailyAvatars, setDailyAvatars] = useState58([]);
   useEffect59(() => {
     const avatars = experts.map((expert) => expert.image);
     const selectedAvatars = [];
@@ -40518,7 +40606,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect60, useState as useState58 } from "react";
+import { useEffect as useEffect60, useState as useState59 } from "react";
 import { jsx as jsx120, jsxs as jsxs44 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -40533,7 +40621,7 @@ var icon2 = {
   marginLeft: 10
 };
 var IfYouKnowReact = () => {
-  const [vid, setVid] = useState58("/img/compose.webm");
+  const [vid, setVid] = useState59("/img/compose.webm");
   useEffect60(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
@@ -40593,12 +40681,12 @@ var IfYouKnowReact = () => {
 };
 
 // src/components/homepage/NewsletterButton.tsx
-import { useCallback as useCallback48, useState as useState59 } from "react";
+import { useCallback as useCallback48, useState as useState60 } from "react";
 import { jsx as jsx121, jsxs as jsxs46 } from "react/jsx-runtime";
 var NewsletterButton = () => {
-  const [email, setEmail] = useState59("");
-  const [submitting, setSubmitting] = useState59(false);
-  const [subscribed, setSubscribed] = useState59(false);
+  const [email, setEmail] = useState60("");
+  const [submitting, setSubmitting] = useState60(false);
+  const [subscribed, setSubscribed] = useState60(false);
   const handleSubmit = useCallback48(async (e) => {
     try {
       setSubmitting(true);
@@ -40681,7 +40769,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect61, useRef as useRef55, useState as useState60 } from "react";
+import { useEffect as useEffect61, useRef as useRef55, useState as useState61 } from "react";
 import { jsx as jsx124, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
@@ -40689,7 +40777,7 @@ var icon3 = {
 };
 var ParameterizeAndEdit = () => {
   const ref = useRef55(null);
-  const [vid, setVid] = useState60("/img/editing-vp9-chrome.webm");
+  const [vid, setVid] = useState61("/img/editing-vp9-chrome.webm");
   useEffect61(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
@@ -40804,7 +40892,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect63, useRef as useRef56, useState as useState61 } from "react";
+import { useEffect as useEffect63, useRef as useRef56, useState as useState63 } from "react";
 import { jsx as jsx126, jsxs as jsxs48 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -40813,7 +40901,7 @@ var icon4 = {
 var RealMP4Videos = () => {
   const ref = useRef56(null);
   const videoRef = useRef56(null);
-  const [vid, setVid] = useState61("/img/render-progress.webm");
+  const [vid, setVid] = useState63("/img/render-progress.webm");
   useEffect63(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
@@ -41065,7 +41153,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useRef as useRef57, useState as useState63 } from "react";
+import { useRef as useRef57, useState as useState65 } from "react";
 import { jsx as jsx128, jsxs as jsxs50 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -41118,10 +41206,10 @@ var icon5 = {
   marginLeft: 10
 };
 var VideoAppsShowcase = () => {
-  const [activeTab, setActiveTab] = useState63(0);
-  const [isMuted, setIsMuted] = useState63(true);
-  const [isPlaying, setIsPlaying] = useState63(false);
-  const [videoLoaded, setVideoLoaded] = useState63(false);
+  const [activeTab, setActiveTab] = useState65(0);
+  const [isMuted, setIsMuted] = useState65(true);
+  const [isPlaying, setIsPlaying] = useState65(false);
+  const [videoLoaded, setVideoLoaded] = useState65(false);
   const videoRef = useRef57(null);
   const containerRef = useRef57(null);
   const handleTabChange = (index2) => {
@@ -42634,7 +42722,7 @@ var ChooseTemplate = () => {
 };
 
 // src/components/homepage/GetStartedStrip.tsx
-import { useState as useState65 } from "react";
+import { useState as useState66 } from "react";
 
 // src/components/homepage/GitHubButton.tsx
 import { jsx as jsx164, jsxs as jsxs66 } from "react/jsx-runtime";
@@ -42669,7 +42757,7 @@ var GithubButton = () => {
 // src/components/homepage/GetStartedStrip.tsx
 import { jsx as jsx166, jsxs as jsxs67 } from "react/jsx-runtime";
 var GetStarted = () => {
-  const [clicked, setClicked] = useState65(null);
+  const [clicked, setClicked] = useState66(null);
   return /* @__PURE__ */ jsxs67("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [