@remotion/promo-pages 4.0.470 → 4.0.471

package/dist/design.js

@@ -36,7 +36,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 import * as React22 from "react";
 import * as React3 from "react";
 import { Fragment as Fragment2, jsx as jsx39 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback25, useRef as useRef27, useState as useState22 } from "react";
+import React52, { useCallback as useCallback25, useRef as useRef28, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -5891,19 +5891,15 @@ import {
   useCallback as useCallback16,
   useContext as useContext32,
   useEffect as useEffect17,
+  useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo31,
+  useRef as useRef23,
   useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import { forwardRef as forwardRef11, useCallback as useCallback17, useState as useState17 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-import {
-  useCallback as useCallback18,
-  useContext as useContext33,
-  useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect10,
-  useRef as useRef23
-} from "react";
+import { useCallback as useCallback18, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
 import React28 from "react";
@@ -5911,7 +5907,7 @@ import {
   useCallback as useCallback19,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo322,
-  useRef as useRef24,
+  useRef as useRef25,
   useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -5938,7 +5934,7 @@ import React34, {
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState20,
   useCallback as useCallback21
 } from "react";
@@ -5961,7 +5957,7 @@ import {
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo39,
-  useRef as useRef26
+  useRef as useRef27
 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -7087,7 +7083,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.470";
+var VERSION = "4.0.471";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -9690,13 +9686,14 @@ var getActualTime = ({
 var decodeImage = async ({
   resolvedSrc,
   signal,
+  requestInit,
   currentTime,
   initialLoopBehavior
 }) => {
   if (typeof ImageDecoder === "undefined") {
     throw new Error("Your browser does not support the WebCodecs ImageDecoder API.");
   }
-  const res = await fetch(resolvedSrc, { signal });
+  const res = await fetch(resolvedSrc, { ...requestInit, signal });
   const { body } = res;
   if (!body) {
     throw new Error("Got no body");
@@ -9819,6 +9816,18 @@ var decodeImage = async ({
     frameCount: selectedTrack.frameCount
   };
 };
+var serializeRequestInit = (requestInit) => {
+  if (!requestInit) {
+    return null;
+  }
+  const requestInitWithoutSignal = { ...requestInit };
+  delete requestInitWithoutSignal.signal;
+  const { headers, ...rest } = requestInitWithoutSignal;
+  return JSON.stringify({
+    ...rest,
+    headers: headers ? Array.from(new Headers(headers).entries()) : null
+  });
+};
 var resolveAnimatedImageSource = (src) => {
   if (typeof window === "undefined") {
     return src;
@@ -9845,6 +9854,7 @@ var AnimatedImageContent = forwardRef4(({
   loopBehavior = "loop",
   playbackRate = 1,
   fit = "fill",
+  requestInit,
   effects,
   controls,
   ...props
@@ -9858,6 +9868,9 @@ var AnimatedImageContent = forwardRef4(({
   const currentTime = frame / playbackRate / fps;
   const currentTimeRef = useRef9(currentTime);
   currentTimeRef.current = currentTime;
+  const requestInitKey = serializeRequestInit(requestInit);
+  const requestInitRef = useRef9(requestInit);
+  requestInitRef.current = requestInit;
   const ref = useRef9(null);
   const memoizedEffects = useMemoizedEffects({
     effects,
@@ -9876,6 +9889,7 @@ var AnimatedImageContent = forwardRef4(({
     decodeImage({
       resolvedSrc,
       signal: controller.signal,
+      requestInit: requestInitRef.current,
       currentTime: currentTimeRef.current,
       initialLoopBehavior
     }).then((d) => {
@@ -9900,6 +9914,7 @@ var AnimatedImageContent = forwardRef4(({
     resolvedSrc,
     decodeHandle,
     onError,
+    requestInitKey,
     initialLoopBehavior,
     continueRender2
   ]);
@@ -9972,6 +9987,7 @@ var AnimatedImageInner = ({
   className,
   style,
   durationInFrames,
+  requestInit,
   effects = [],
   _experimentalControls: controls,
   ref,
@@ -9979,7 +9995,11 @@ var AnimatedImageInner = ({
 }) => {
   const { durationInFrames: videoDuration } = useVideoConfig();
   const resolvedDuration = durationInFrames ?? videoDuration;
+  const actualRef = useRef9(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  useImperativeHandle2(ref, () => {
+    return actualRef.current;
+  }, []);
   const animatedImageProps = {
     src,
     width,
@@ -9990,7 +10010,8 @@ var AnimatedImageInner = ({
     loopBehavior,
     id,
     className,
-    style
+    style,
+    requestInit
   };
   return /* @__PURE__ */ jsx13(Sequence, {
     layout: "none",
@@ -10000,9 +10021,10 @@ var AnimatedImageInner = ({
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
+    _remotionInternalRefForOutline: actualRef,
     children: /* @__PURE__ */ jsx13(AnimatedImageContent, {
       ...animatedImageProps,
-      ref,
+      ref: actualRef,
       effects,
       controls
     })
@@ -13326,16 +13348,26 @@ var HtmlInCanvasInner = forwardRef9(({
   const { durationInFrames: videoDuration } = useVideoConfig();
   const resolvedDuration = durationInFrames ?? videoDuration;
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  const actualRef = useRef22(null);
+  const setCanvasRef = useCallback15((node) => {
+    actualRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
   return /* @__PURE__ */ jsx24(Sequence, {
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
     _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/remotion/html-in-canvas" : undefined,
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
+    _remotionInternalRefForOutline: actualRef,
     layout: "none",
     ...sequenceProps,
     children: /* @__PURE__ */ jsx24(HtmlInCanvasContent, {
-      ref,
+      ref: setCanvasRef,
       width,
       height,
       effects,
@@ -13451,6 +13483,7 @@ var CanvasImageContent = forwardRef10(({
   maxRetries = 2,
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
+  refForOutline,
   ...canvasProps
 }, ref) => {
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
@@ -13471,12 +13504,15 @@ var CanvasImageContent = forwardRef10(({
   }, []);
   const canvasRef = useCallback16((canvas) => {
     setOutputCanvas(canvas);
+    if (refForOutline) {
+      refForOutline.current = canvas;
+    }
     if (typeof ref === "function") {
       ref(canvas);
     } else if (ref) {
       ref.current = canvas;
     }
-  }, [ref]);
+  }, [ref, refForOutline]);
   useEffect17(() => {
     if (!outputCanvas || !sourceCanvas) {
       return;
@@ -13619,12 +13655,17 @@ var CanvasImageInner = forwardRef10(({
   stack,
   _experimentalControls: controls,
   _remotionInternalDocumentationLink,
+  _remotionInternalRefForOutline,
   ...canvasProps
 }, ref) => {
   if (!src) {
     throw new Error('No "src" prop was passed to <CanvasImage>.');
   }
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  const actualRef = useRef23(null);
+  useImperativeHandle7(ref, () => {
+    return actualRef.current;
+  }, []);
   return /* @__PURE__ */ jsx25(Sequence, {
     layout: "none",
     from: from ?? 0,
@@ -13637,8 +13678,9 @@ var CanvasImageInner = forwardRef10(({
     _remotionInternalEffects: memoizedEffectDefinitions,
     _remotionInternalIsMedia: { type: "image", src },
     _remotionInternalStack: stack,
+    _remotionInternalRefForOutline: _remotionInternalRefForOutline ?? actualRef,
     children: /* @__PURE__ */ jsx25(CanvasImageContent, {
-      ref,
+      ref: actualRef,
       src,
       width,
       height,
@@ -13653,6 +13695,7 @@ var CanvasImageInner = forwardRef10(({
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
+      refForOutline: _remotionInternalRefForOutline ?? null,
       ...canvasProps
     })
   });
@@ -13707,19 +13750,26 @@ var ImgContent = ({
   crossOrigin,
   decoding,
   ref,
+  refForOutline,
   ...props2
 }) => {
-  const imageRef = useRef23(null);
-  const errors = useRef23({});
+  const imageRef = useRef24(null);
+  const errors = useRef24({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext33(SequenceContext);
   const _propsValid = true;
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  useImperativeHandle7(ref, () => {
-    return imageRef.current;
-  }, []);
+  const imageCallbackRef = useCallback18((img) => {
+    imageRef.current = img;
+    refForOutline.current = img;
+    if (typeof ref === "function") {
+      ref(img);
+    } else if (ref) {
+      ref.current = img;
+    }
+  }, [ref, refForOutline]);
   const actualSrc = usePreload(src);
   const retryIn = useCallback18((timeout) => {
     if (!imageRef.current) {
@@ -13835,7 +13885,7 @@ var ImgContent = ({
   });
   return /* @__PURE__ */ jsx27("img", {
     ...props2,
-    ref: imageRef,
+    ref: imageCallbackRef,
     crossOrigin: crossOriginValue,
     onError: didGetError,
     decoding: isRendering ? "sync" : decoding
@@ -13850,6 +13900,7 @@ var NativeImgInner = ({
   from,
   durationInFrames,
   _experimentalControls: controls,
+  _remotionInternalRefForOutline: refForOutline,
   ...props2
 }) => {
   if (!src) {
@@ -13866,8 +13917,10 @@ var NativeImgInner = ({
     _experimentalControls: controls,
     showInTimeline: showInTimeline ?? true,
     hidden,
+    _remotionInternalRefForOutline: refForOutline,
     children: /* @__PURE__ */ jsx27(ImgContent, {
       src,
+      refForOutline,
       ...props2
     })
   });
@@ -13941,6 +13994,7 @@ var ImgInner = ({
   delayRenderTimeoutInMilliseconds,
   ...props2
 }) => {
+  const refForOutline = useRef24(null);
   if (effects.length === 0) {
     return /* @__PURE__ */ jsx27(NativeImgInner, {
       ...props2,
@@ -13961,7 +14015,8 @@ var ImgInner = ({
       pauseWhenLoading,
       maxRetries,
       delayRenderRetries,
-      delayRenderTimeoutInMilliseconds
+      delayRenderTimeoutInMilliseconds,
+      _remotionInternalRefForOutline: refForOutline
     });
   }
   if (!src) {
@@ -13998,6 +14053,7 @@ var ImgInner = ({
     stack,
     _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
     _experimentalControls: controls,
+    _remotionInternalRefForOutline: refForOutline,
     ...canvasProps
   });
 };
@@ -14014,7 +14070,7 @@ var CompositionManagerProvider = ({
   const [folders, setFolders] = useState18([]);
   const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
   const [compositions, setCompositions] = useState18(initialCompositions);
-  const currentcompositionsRef = useRef24(compositions);
+  const currentcompositionsRef = useRef25(compositions);
   const updateCompositions = useCallback19((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
@@ -14754,7 +14810,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
-  const videoRef = useRef25(null);
+  const videoRef = useRef26(null);
   const sharedSource = useMemo36(() => {
     if (!context.audioContext) {
       return null;
@@ -14927,7 +14983,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("error", errorHandler);
     };
   }, [onError, src]);
-  const currentOnDurationCallback = useRef25(onDuration);
+  const currentOnDurationCallback = useRef26(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect20(() => {
@@ -15949,7 +16005,7 @@ var VideoForRenderingForwardFunction = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const videoRef = useRef26(null);
+  const videoRef = useRef27(null);
   const sequenceContext = useContext37(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
@@ -16285,7 +16341,7 @@ addSequenceStackTraces(Composition);
 // ../design/dist/esm/index.mjs
 import { jsx as jsx210, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx310, jsxs as jsxs3 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef28 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef29 } from "react";
 import { jsx as jsx43 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 import React62 from "react";
@@ -16807,7 +16863,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef28([]);
+  const pathsRef = useRef29([]);
   useEffect23(() => {
     const animate = () => {
       const now = performance.now();
@@ -16853,7 +16909,7 @@ var Button = ({
   ...rest
 }) => {
   const [dimensions, setDimensions] = useState22(null);
-  const ref = useRef27(null);
+  const ref = useRef28(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
   const onPointerEnter = useCallback25((e) => {
     if (e.pointerType !== "mouse") {