@remotion/promo-pages 4.0.487 → 4.0.488

package/dist/prompts/PromptsShow.js

@@ -40,7 +40,7 @@ __export(exports_vidstack_CZgUA94N, {
   waitTimeout: () => waitTimeout,
   waitIdlePeriod: () => waitIdlePeriod,
   useStateContext: () => useStateContext,
-  useState: () => useState42,
+  useState: () => useState44,
   useSignalRecord: () => useSignalRecord,
   useSignal: () => useSignal,
   useReactScope: () => useReactScope,
@@ -678,7 +678,7 @@ class State {
     }
   }
 }
-function useState42(state) {
+function useState44(state) {
   return useContext47(state);
 }
 function camelToKebabCase(str) {
@@ -15039,7 +15039,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
   SliderThumbnail = class SliderThumbnail extends Thumbnail {
     #slider;
     onAttach(el) {
-      this.#slider = useState42(Slider.state);
+      this.#slider = useState44(Slider.state);
     }
     getTime() {
       const { duration, clipStartTime } = this.media.$state;
@@ -15066,7 +15066,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     }
     onSetup() {
       this.#media = useMediaContext();
-      this.#slider = useState42(Slider.state);
+      this.#slider = useState44(Slider.state);
       this.#watchCrossOrigin();
       this.setAttributes({
         "data-loading": this.#isLoading.bind(this),
@@ -15152,7 +15152,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     #text;
     #slider;
     onSetup() {
-      this.#slider = useState42(Slider.state);
+      this.#slider = useState44(Slider.state);
       this.#format = useContext47(sliderValueFormatContext);
       this.#text = computed(this.getValueText.bind(this));
     }
@@ -15193,7 +15193,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     #slider;
     onSetup() {
       this.#slider = useContext47(sliderContext);
-      const { active } = useState42(Slider.state);
+      const { active } = useState44(Slider.state);
       this.setAttributes({
         "data-visible": active
       });
@@ -15734,7 +15734,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     }
     onSetup() {
       this.#media = useMediaContext();
-      this.#sliderState = useState42(TimeSlider.state);
+      this.#sliderState = useState44(TimeSlider.state);
     }
     onAttach(el) {
       watchActiveTextTrack(this.#media.textTracks, "chapters", this.#setTrack.bind(this));
@@ -18712,7 +18712,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React32, { useEffect as useEffect21, useMemo as useMemo42, useState as useState21 } from "react";
+import React32, { useEffect as useEffect21, useMemo as useMemo42, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -21664,7 +21664,13 @@ import {
 import { jsx as jsx26 } from "react/jsx-runtime";
 import { forwardRef as forwardRef11, useCallback as useCallback18, useState as useState17 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect11, useRef as useRef24 } from "react";
+import {
+  useCallback as useCallback19,
+  useContext as useContext33,
+  useLayoutEffect as useLayoutEffect11,
+  useRef as useRef24,
+  useState as useState18
+} from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -21675,7 +21681,7 @@ import {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
   useRef as useRef26,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React31 from "react";
@@ -21693,7 +21699,7 @@ import {
   useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo35,
-  useState as useState19
+  useState as useState20
 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import React37, {
@@ -21704,7 +21710,7 @@ import React37, {
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
   useRef as useRef27,
-  useState as useState20
+  useState as useState21
 } from "react";
 import { useEffect as useEffect18 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
@@ -22899,7 +22905,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.487";
+var VERSION = "4.0.488";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -26583,7 +26589,7 @@ var useEffectChainState = () => {
     }
   }), []);
 };
-var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects }, ref) => {
+var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
   const canvasRef = useRef8(null);
   const chainState = useEffectChainState();
   const sourceCanvas = useMemo16(() => {
@@ -26647,7 +26653,8 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
   return /* @__PURE__ */ jsx13("canvas", {
     ref: canvasRef,
     className,
-    style
+    style,
+    ...props
   });
 };
 var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
@@ -26824,6 +26831,16 @@ var animatedImageSchema = {
   },
   ...transformSchema
 };
+var getCanvasPropsFromSequenceProps = (props) => {
+  const canvasProps = {};
+  const mutableCanvasProps = canvasProps;
+  for (const key in props) {
+    if (Object.prototype.hasOwnProperty.call(props, key) && (key.startsWith("data-") || key.startsWith("aria-"))) {
+      mutableCanvasProps[key] = props[key];
+    }
+  }
+  return canvasProps;
+};
 var AnimatedImageContent = forwardRef4(({
   src,
   width,
@@ -26978,6 +26995,7 @@ var AnimatedImageInner = ({
   useImperativeHandle2(ref, () => {
     return actualRef.current;
   }, []);
+  const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
   const animatedImageProps = {
     src,
     width,
@@ -26989,7 +27007,8 @@ var AnimatedImageInner = ({
     id,
     className,
     style,
-    requestInit
+    requestInit,
+    ...canvasProps
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
@@ -27926,6 +27945,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     return ({
       node,
       mediaTimestamp,
+      sourceOffset,
       scheduledTime,
       duration,
       offset,
@@ -27954,7 +27974,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
         }
       }
       const scheduledEndTime = scheduledTime + duration / node.playbackRate.value;
-      const mediaTime = mediaTimestamp + offset;
+      const mediaTime = mediaTimestamp + offset - sourceOffset;
       const mediaEndTime = mediaTime + duration;
       const latency = ctxAndGain.audioContext.baseLatency + ctxAndGain.audioContext.outputLatency;
       const timeDiff = scheduledTime - ctxAndGain.audioContext.currentTime;
@@ -30751,13 +30771,18 @@ var CanvasImageContent = forwardRef10(({
   });
   const sequenceContext = useContext32(SequenceContext);
   const pendingLoadDelayRef = useRef23(null);
-  const continuePendingLoadDelay = useCallback17(() => {
+  const [isLoadPending, setIsLoadPending] = useState16(false);
+  const isPremounting = Boolean(sequenceContext?.premounting);
+  const isPostmounting = Boolean(sequenceContext?.postmounting);
+  const continuePendingLoadDelay = useCallback17(({ markAsReady }) => {
     const pending = pendingLoadDelayRef.current;
     if (!pending || pending.continued) {
       return;
     }
     pending.continued = true;
-    pending.unblock();
+    if (markAsReady) {
+      setIsLoadPending(false);
+    }
     continueRender2(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender2]);
@@ -30779,23 +30804,30 @@ var CanvasImageContent = forwardRef10(({
     }
   }, [ref, refForOutline]);
   useLayoutEffect10(() => {
-    const isPremounting = Boolean(sequenceContext?.premounting);
-    const isPostmounting = Boolean(sequenceContext?.postmounting);
+    if (!pauseWhenLoading || !isLoadPending || isPremounting || isPostmounting) {
+      return;
+    }
+    return delayPlayback().unblock;
+  }, [
+    delayPlayback,
+    isLoadPending,
+    isPostmounting,
+    isPremounting,
+    pauseWhenLoading
+  ]);
+  useLayoutEffect10(() => {
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
-    const unblock = pauseWhenLoading && !isPremounting && !isPostmounting ? delayPlayback().unblock : () => {
-      return;
-    };
     const controller = new AbortController;
     let cancelled = false;
     let errorCount = 0;
     let timeoutId = null;
     setLoadedImage(null);
+    setIsLoadPending(true);
     pendingLoadDelayRef.current = {
       handle,
-      unblock,
       continued: false
     };
     const attemptLoad = () => {
@@ -30806,7 +30838,7 @@ var CanvasImageContent = forwardRef10(({
         setLoadedImage(image);
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: false });
           return;
         }
         errorCount++;
@@ -30820,7 +30852,7 @@ var CanvasImageContent = forwardRef10(({
           }, backoff);
         } else if (onError) {
           onError(err);
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: true });
         } else {
           cancelRender2(err);
         }
@@ -30833,21 +30865,17 @@ var CanvasImageContent = forwardRef10(({
         clearTimeout(timeoutId);
       }
       controller.abort();
-      continuePendingLoadDelay();
+      continuePendingLoadDelay({ markAsReady: false });
     };
   }, [
     actualSrc,
     cancelRender2,
     continuePendingLoadDelay,
-    delayPlayback,
     delayRender2,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     maxRetries,
-    onError,
-    pauseWhenLoading,
-    sequenceContext?.postmounting,
-    sequenceContext?.premounting
+    onError
   ]);
   useLayoutEffect10(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
@@ -30899,7 +30927,7 @@ var CanvasImageContent = forwardRef10(({
               return;
             }
             continueRenderOnce();
-            continuePendingLoadDelay();
+            continuePendingLoadDelay({ markAsReady: true });
           }
         });
       }
@@ -30910,7 +30938,7 @@ var CanvasImageContent = forwardRef10(({
       if (onError) {
         onError(err);
         continueRenderOnce();
-        continuePendingLoadDelay();
+        continuePendingLoadDelay({ markAsReady: true });
       } else {
         cancelRender2(err);
       }
@@ -31081,6 +31109,7 @@ var ImgContent = ({
   const errors = useRef24({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext33(SequenceContext);
+  const [isLoading, setIsLoading] = useState18(false);
   const _propsValid = true;
   if (!_propsValid) {
     throw new Error("typecheck error");
@@ -31113,6 +31142,8 @@ var ImgContent = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const isPremounting = Boolean(sequenceContext?.premounting);
+  const isPostmounting = Boolean(sequenceContext?.postmounting);
   const didGetError = useCallback19((e) => {
     if (!errors.current) {
       return;
@@ -31133,8 +31164,18 @@ var ImgContent = ({
     } catch {}
   }, [cancelRender2, maxRetries, onError, retryIn]);
   if (typeof window !== "undefined") {
-    const isPremounting = Boolean(sequenceContext?.premounting);
-    const isPostmounting = Boolean(sequenceContext?.postmounting);
+    useLayoutEffect11(() => {
+      if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
+        return;
+      }
+      return delayPlayback().unblock;
+    }, [
+      delayPlayback,
+      isLoading,
+      isPostmounting,
+      isPremounting,
+      pauseWhenLoading
+    ]);
     useLayoutEffect11(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
@@ -31146,13 +31187,11 @@ var ImgContent = ({
       if (!current) {
         return;
       }
+      setIsLoading(true);
       const newHandle = delayRender2("Loading <Img> with src=" + truncateSrcForLabel(actualSrc), {
         retries: delayRenderRetries ?? undefined,
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
       });
-      const unblock = pauseWhenLoading && !isPremounting && !isPostmounting ? delayPlayback().unblock : () => {
-        return;
-      };
       let unmounted = false;
       const onComplete = () => {
         if (unmounted) {
@@ -31166,7 +31205,7 @@ var ImgContent = ({
         if (current) {
           onImageFrame?.(current);
         }
-        unblock();
+        setIsLoading(false);
         continueRender2(newHandle);
       };
       if (!imageRef.current) {
@@ -31185,17 +31224,12 @@ var ImgContent = ({
       return () => {
         unmounted = true;
         current.removeEventListener("load", onComplete);
-        unblock();
         continueRender2(newHandle);
       };
     }, [
       actualSrc,
-      delayPlayback,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
-      pauseWhenLoading,
-      isPremounting,
-      isPostmounting,
       onImageFrame,
       continueRender2,
       delayRender2
@@ -31513,9 +31547,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState18([]);
-  const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
-  const [compositions, setCompositions] = useState18(initialCompositions);
+  const [folders, setFolders] = useState19([]);
+  const [canvasContent, setCanvasContent] = useState19(initialCanvasContent);
+  const [compositions, setCompositions] = useState19(initialCompositions);
   const currentcompositionsRef = useRef26(compositions);
   const updateCompositions = useCallback21((updateComps) => {
     setCompositions((comps) => {
@@ -32086,7 +32120,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState19(null);
+  const [imageSrc, setImageSrc] = useState20(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect12(() => {
     if (!window.remotion_videoEnabled) {
@@ -32290,7 +32324,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const parentSequence = useContext37(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState20(() => String(Math.random()));
+  const [timelineId] = useState21(() => String(Math.random()));
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
@@ -32361,7 +32395,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState20(() => playbackLogging({
+  useState21(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -36856,7 +36890,7 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
+  const [angle, setAngle] = useState23(getAngle(ref.current, lastCoordinates));
   useEffect21(() => {
     const element = ref.current;
     if (!element) {
@@ -43156,7 +43190,7 @@ var Triangle22 = (props) => {
 };
 
 // src/components/prompts/CopyPromptButton.tsx
-import { useCallback as useCallback38, useState as useState38 } from "react";
+import { useCallback as useCallback38, useState as useState40 } from "react";
 
 // src/components/prompts/ClipboardIcon.tsx
 import { jsx as jsx45 } from "react/jsx-runtime";
@@ -43176,7 +43210,7 @@ var ClipboardIcon = ({ size: size4 = 16, color = "currentColor" }) => {
 // src/components/prompts/CopyPromptButton.tsx
 import { jsx as jsx46, jsxs as jsxs6 } from "react/jsx-runtime";
 var CopyPromptButton = ({ prompt }) => {
-  const [copied, setCopied] = useState38(false);
+  const [copied, setCopied] = useState40(false);
   const onCopy = useCallback38(() => {
     navigator.clipboard.writeText(prompt);
     setCopied(true);
@@ -43206,7 +43240,7 @@ var CopyPromptButton = ({ prompt }) => {
 };
 
 // src/components/prompts/LikeButton.tsx
-import { useCallback as useCallback40, useEffect as useEffect40, useState as useState40 } from "react";
+import { useCallback as useCallback40, useEffect as useEffect40, useState as useState42 } from "react";
 
 // src/components/prompts/config.ts
 var REMOTION_PRO_ORIGIN = "https://www.remotion.pro";
@@ -43283,11 +43317,11 @@ var getRelativeTime = (dateStr) => {
 };
 
 // src/components/prompts/use-heart-animation.ts
-import { useCallback as useCallback39, useRef as useRef47, useState as useState39 } from "react";
+import { useCallback as useCallback39, useRef as useRef47, useState as useState41 } from "react";
 var DURATION = 300;
 var useHeartAnimation = () => {
-  const [scale, setScale] = useState39(1);
-  const [roundness, setRoundness] = useState39(0.09);
+  const [scale, setScale] = useState41(1);
+  const [roundness, setRoundness] = useState41(0.09);
   const rafRef = useRef47(0);
   const animate = useCallback39(() => {
     cancelAnimationFrame(rafRef.current);
@@ -43314,8 +43348,8 @@ var useHeartAnimation = () => {
 // src/components/prompts/LikeButton.tsx
 import { jsx as jsx47, jsxs as jsxs7 } from "react/jsx-runtime";
 var LikeButton = ({ submissionId, initialLikeCount }) => {
-  const [liked, setLiked] = useState40(false);
-  const [likeCount, setLikeCount] = useState40(initialLikeCount);
+  const [liked, setLiked] = useState42(false);
+  const [likeCount, setLikeCount] = useState42(initialLikeCount);
   const { scale, roundness, animate } = useHeartAnimation();
   useEffect40(() => {
     setLiked(getLikedIds().has(submissionId));