@remotion/promo-pages 4.0.486 → 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.486";
+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;
@@ -28769,7 +28789,8 @@ var useBufferManager = (logLevel, mountTime) => {
     if (rendering) {
       return;
     }
-    if (blocks.length > 0) {
+    if (blocks.length > 0 && !buffering.current) {
+      buffering.current = true;
       onBufferingCallbacks.forEach((c2) => c2());
       playbackLogging({
         logLevel,
@@ -28784,7 +28805,8 @@ var useBufferManager = (logLevel, mountTime) => {
       if (rendering) {
         return;
       }
-      if (blocks.length === 0) {
+      if (blocks.length === 0 && buffering.current) {
+        buffering.current = false;
         onResumeCallbacks.forEach((c2) => c2());
         playbackLogging({
           logLevel,
@@ -28817,15 +28839,11 @@ var useIsPlayerBuffering = (bufferManager) => {
     const onResume = () => {
       setIsBuffering(false);
     };
-    bufferManager.listenForBuffering(onBuffer);
-    bufferManager.listenForResume(onResume);
+    const buffer = bufferManager.listenForBuffering(onBuffer);
+    const resume = bufferManager.listenForResume(onResume);
     return () => {
-      bufferManager.listenForBuffering(() => {
-        return;
-      });
-      bufferManager.listenForResume(() => {
-        return;
-      });
+      buffer.remove();
+      resume.remove();
     };
   }, [bufferManager]);
   return isBuffering;
@@ -28949,6 +28967,72 @@ var useBufferUntilFirstFrame = ({
     };
   }, [bufferUntilFirstFrame]);
 };
+var getMediaSyncAction = (input) => {
+  const {
+    duration,
+    currentTime,
+    paused,
+    ended,
+    desiredUnclampedTime,
+    mediaTagTime,
+    mediaTagLastUpdate,
+    rvcTime,
+    rvcLastUpdate,
+    isVariableFpsVideo,
+    acceptableTimeShift,
+    lastSeekDueToShift,
+    playing,
+    playbackRate,
+    mediaTagBufferingOrStalled,
+    playerBuffering,
+    absoluteFrame,
+    onlyWarnForMediaSeekingError,
+    isPremounting,
+    isPostmounting,
+    pauseWhenBuffering
+  } = input;
+  const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration) ? Math.min(duration, desiredUnclampedTime) : desiredUnclampedTime;
+  const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
+  const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
+  const mostRecentTimeshift = rvcLastUpdate && rvcTime > mediaTagLastUpdate ? timeShiftRvcTag : timeShiftMediaTag;
+  const timeShift = timeShiftRvcTag && !isVariableFpsVideo ? mostRecentTimeshift : timeShiftMediaTag;
+  if (timeShift > acceptableTimeShift && lastSeekDueToShift !== shouldBeTime) {
+    return {
+      type: "seek-due-to-shift",
+      shouldBeTime,
+      why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ", isVariableFpsVideo = true" : ""}, isPremounting = ${isPremounting}, isPostmounting = ${isPostmounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
+      bufferUntilFirstFrame: playing && playbackRate > 0,
+      playReason: playing && paused ? "player is playing but media tag is paused, and just seeked" : null,
+      warnAboutNonSeekable: !onlyWarnForMediaSeekingError
+    };
+  }
+  const seekThreshold = playing ? 0.15 : 0.01;
+  const makesSenseToSeek = Math.abs(currentTime - shouldBeTime) > seekThreshold;
+  const isSomethingElseBuffering = playerBuffering && !mediaTagBufferingOrStalled;
+  if (!playing || isSomethingElseBuffering) {
+    return {
+      type: "seek-if-not-playing",
+      shouldBeTime,
+      why: makesSenseToSeek ? `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})` : null
+    };
+  }
+  if (!playing || playerBuffering) {
+    return { type: "none" };
+  }
+  const pausedCondition = paused && !ended;
+  const firstFrameCondition = absoluteFrame === 0;
+  if (pausedCondition || firstFrameCondition) {
+    const reason = pausedCondition ? "media tag is paused" : "absolute frame is 0";
+    return {
+      type: "play-and-seek",
+      shouldBeTime,
+      why: makesSenseToSeek ? `is over timeshift threshold (threshold = ${seekThreshold}) and ${reason}` : null,
+      playReason: `player is playing and ${reason}`,
+      bufferUntilFirstFrame: !isVariableFpsVideo && playbackRate > 0
+    };
+  }
+  return { type: "none" };
+};
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
   const lastUpdate = React21.useRef({
     time: mediaRef.current?.currentTime ?? 0,
@@ -29368,89 +29452,93 @@ var useMediaPlayback = ({
     if (!src) {
       throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
     }
-    const { duration } = mediaRef.current;
-    const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration) ? Math.min(duration, desiredUnclampedTime) : desiredUnclampedTime;
-    const mediaTagTime = mediaTagCurrentTime.current.time;
-    const rvcTime = rvcCurrentTime.current?.time ?? null;
-    const isVariableFpsVideo = isVariableFpsVideoMap.current[src];
-    const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
-    const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
-    const mostRecentTimeshift = rvcCurrentTime.current?.lastUpdate && rvcCurrentTime.current.time > mediaTagCurrentTime.current.lastUpdate ? timeShiftRvcTag : timeShiftMediaTag;
-    const timeShift = timeShiftRvcTag && !isVariableFpsVideo ? mostRecentTimeshift : timeShiftMediaTag;
-    if (timeShift > acceptableTimeShiftButLessThanDuration && lastSeekDueToShift.current !== shouldBeTime) {
+    const { current } = mediaRef;
+    const action = getMediaSyncAction({
+      duration: current.duration,
+      currentTime: current.currentTime,
+      paused: current.paused,
+      ended: current.ended,
+      desiredUnclampedTime,
+      mediaTagTime: mediaTagCurrentTime.current.time,
+      mediaTagLastUpdate: mediaTagCurrentTime.current.lastUpdate,
+      rvcTime: rvcCurrentTime.current?.time ?? null,
+      rvcLastUpdate: rvcCurrentTime.current?.lastUpdate ?? null,
+      isVariableFpsVideo: Boolean(isVariableFpsVideoMap.current[src]),
+      acceptableTimeShift: acceptableTimeShiftButLessThanDuration,
+      lastSeekDueToShift: lastSeekDueToShift.current,
+      playing,
+      playbackRate,
+      mediaTagBufferingOrStalled: isMediaTagBuffering || isBuffering(),
+      playerBuffering: buffering.buffering.current,
+      absoluteFrame,
+      onlyWarnForMediaSeekingError,
+      isPremounting,
+      isPostmounting,
+      pauseWhenBuffering
+    });
+    if (action.type === "none") {
+      return;
+    }
+    if (action.type === "seek-due-to-shift") {
       lastSeek.current = seek({
-        mediaRef: mediaRef.current,
-        time: shouldBeTime,
+        mediaRef: current,
+        time: action.shouldBeTime,
         logLevel,
-        why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ", isVariableFpsVideo = true" : ""}, isPremounting = ${isPremounting}, isPostmounting = ${isPostmounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
+        why: action.why,
         mountTime
       });
       lastSeekDueToShift.current = lastSeek.current;
-      if (playing) {
-        if (playbackRate > 0) {
-          bufferUntilFirstFrame(shouldBeTime);
-        }
-        if (mediaRef.current.paused) {
-          playAndHandleNotAllowedError({
-            mediaRef,
-            mediaType,
-            onAutoPlayError,
-            logLevel,
-            mountTime,
-            reason: "player is playing but media tag is paused, and just seeked",
-            isPlayer: env.isPlayer
-          });
-        }
-      }
-      if (!onlyWarnForMediaSeekingError) {
-        warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? "console-warning" : "console-error");
+      if (action.bufferUntilFirstFrame) {
+        bufferUntilFirstFrame(action.shouldBeTime);
       }
-      return;
-    }
-    const seekThreshold = playing ? 0.15 : 0.01;
-    const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > seekThreshold;
-    const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
-    const isSomethingElseBuffering = buffering.buffering.current && !isMediaTagBufferingOrStalled;
-    if (!playing || isSomethingElseBuffering) {
-      if (makesSenseToSeek) {
-        lastSeek.current = seek({
-          mediaRef: mediaRef.current,
-          time: shouldBeTime,
+      if (action.playReason !== null) {
+        playAndHandleNotAllowedError({
+          mediaRef,
+          mediaType,
+          onAutoPlayError,
           logLevel,
-          why: `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})`,
-          mountTime
+          mountTime,
+          reason: action.playReason,
+          isPlayer: env.isPlayer
         });
       }
+      if (action.warnAboutNonSeekable) {
+        warnAboutNonSeekableMedia(current, "console-error");
+      }
       return;
     }
-    if (!playing || buffering.buffering.current) {
-      return;
-    }
-    const pausedCondition = mediaRef.current.paused && !mediaRef.current.ended;
-    const firstFrameCondition = absoluteFrame === 0;
-    if (pausedCondition || firstFrameCondition) {
-      const reason = pausedCondition ? "media tag is paused" : "absolute frame is 0";
-      if (makesSenseToSeek) {
+    if (action.type === "seek-if-not-playing") {
+      if (action.why !== null) {
         lastSeek.current = seek({
-          mediaRef: mediaRef.current,
-          time: shouldBeTime,
+          mediaRef: current,
+          time: action.shouldBeTime,
           logLevel,
-          why: `is over timeshift threshold (threshold = ${seekThreshold}) and ${reason}`,
+          why: action.why,
           mountTime
         });
       }
-      playAndHandleNotAllowedError({
-        mediaRef,
-        mediaType,
-        onAutoPlayError,
+      return;
+    }
+    if (action.why !== null) {
+      lastSeek.current = seek({
+        mediaRef: current,
+        time: action.shouldBeTime,
         logLevel,
-        mountTime,
-        reason: `player is playing and ${reason}`,
-        isPlayer: env.isPlayer
+        why: action.why,
+        mountTime
       });
-      if (!isVariableFpsVideo && playbackRate > 0) {
-        bufferUntilFirstFrame(shouldBeTime);
-      }
+    }
+    playAndHandleNotAllowedError({
+      mediaRef,
+      mediaType,
+      onAutoPlayError,
+      logLevel,
+      mountTime,
+      reason: action.playReason,
+      isPlayer: env.isPlayer
+    });
+    if (action.bufferUntilFirstFrame) {
+      bufferUntilFirstFrame(action.shouldBeTime);
     }
   }, [
     absoluteFrame,
@@ -30683,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]);
@@ -30711,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 = () => {
@@ -30738,7 +30838,7 @@ var CanvasImageContent = forwardRef10(({
         setLoadedImage(image);
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: false });
           return;
         }
         errorCount++;
@@ -30752,7 +30852,7 @@ var CanvasImageContent = forwardRef10(({
           }, backoff);
         } else if (onError) {
           onError(err);
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: true });
         } else {
           cancelRender2(err);
         }
@@ -30765,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) {
@@ -30831,7 +30927,7 @@ var CanvasImageContent = forwardRef10(({
               return;
             }
             continueRenderOnce();
-            continuePendingLoadDelay();
+            continuePendingLoadDelay({ markAsReady: true });
           }
         });
       }
@@ -30842,7 +30938,7 @@ var CanvasImageContent = forwardRef10(({
       if (onError) {
         onError(err);
         continueRenderOnce();
-        continuePendingLoadDelay();
+        continuePendingLoadDelay({ markAsReady: true });
       } else {
         cancelRender2(err);
       }
@@ -31013,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");
@@ -31045,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;
@@ -31065,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) {
@@ -31078,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) {
@@ -31098,7 +31205,7 @@ var ImgContent = ({
         if (current) {
           onImageFrame?.(current);
         }
-        unblock();
+        setIsLoading(false);
         continueRender2(newHandle);
       };
       if (!imageRef.current) {
@@ -31117,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
@@ -31445,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) => {
@@ -32018,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) {
@@ -32222,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.");
   }
@@ -32293,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",
@@ -32974,6 +33076,15 @@ var staticFile = (path) => {
   }
   return preparsed;
 };
+var Still = (props2) => {
+  const newProps = {
+    ...props2,
+    durationInFrames: 1,
+    fps: 1
+  };
+  return React42.createElement(Composition, newProps);
+};
+addSequenceStackTraces(Still);
 var roundTo6Commas = (num) => {
   return Math.round(num * 1e5) / 1e5;
 };
@@ -36779,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) {
@@ -43079,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";
@@ -43099,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);
@@ -43129,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";
@@ -43206,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);
@@ -43237,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));