@remotion/promo-pages 4.0.485 → 4.0.487

package/dist/templates.js

@@ -1378,7 +1378,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React32, { useEffect as useEffect22, useMemo as useMemo42, useState as useState21 } from "react";
+import React32, { useEffect as useEffect21, useMemo as useMemo42, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -3484,6 +3484,94 @@ var getBoundingBox = (d) => {
   const unarced = removeATSHVQInstructions(normalizeInstructions(parsed));
   return getBoundingBoxFromInstructions(unarced);
 };
+var translateSegments = (segments, x, y) => {
+  return segments.map((segment) => {
+    if (segment.type === "a" || segment.type === "c" || segment.type === "v" || segment.type === "s" || segment.type === "h" || segment.type === "l" || segment.type === "m" || segment.type === "q" || segment.type === "t") {
+      return segment;
+    }
+    if (segment.type === "V") {
+      return {
+        type: "V",
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "H") {
+      return {
+        type: "H",
+        x: segment.x + x
+      };
+    }
+    if (segment.type === "A") {
+      return {
+        type: "A",
+        rx: segment.rx,
+        ry: segment.ry,
+        largeArcFlag: segment.largeArcFlag,
+        sweepFlag: segment.sweepFlag,
+        xAxisRotation: segment.xAxisRotation,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "Z") {
+      return segment;
+    }
+    if (segment.type === "C") {
+      return {
+        type: "C",
+        cp1x: segment.cp1x + x,
+        cp1y: segment.cp1y + y,
+        cp2x: segment.cp2x + x,
+        cp2y: segment.cp2y + y,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "Q") {
+      return {
+        type: "Q",
+        cpx: segment.cpx + x,
+        cpy: segment.cpy + y,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "S") {
+      return {
+        type: "S",
+        cpx: segment.cpx + x,
+        cpy: segment.cpy + y,
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "T") {
+      return {
+        type: "T",
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "L") {
+      return {
+        type: "L",
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    if (segment.type === "M") {
+      return {
+        type: "M",
+        x: segment.x + x,
+        y: segment.y + y
+      };
+    }
+    throw new Error(`Unknown segment type: ${segment.type}`);
+  });
+};
+var translatePath = (path, x, y) => {
+  return serializeInstructions(translateSegments(parsePath(path), x, y));
+};
 var mod = (x, m) => {
   return (x % m + m) % m;
 };
@@ -4045,94 +4133,6 @@ var getLength = (path) => {
   const constructucted = construct(path);
   return constructucted.totalLength;
 };
-var translateSegments = (segments, x, y) => {
-  return segments.map((segment) => {
-    if (segment.type === "a" || segment.type === "c" || segment.type === "v" || segment.type === "s" || segment.type === "h" || segment.type === "l" || segment.type === "m" || segment.type === "q" || segment.type === "t") {
-      return segment;
-    }
-    if (segment.type === "V") {
-      return {
-        type: "V",
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "H") {
-      return {
-        type: "H",
-        x: segment.x + x
-      };
-    }
-    if (segment.type === "A") {
-      return {
-        type: "A",
-        rx: segment.rx,
-        ry: segment.ry,
-        largeArcFlag: segment.largeArcFlag,
-        sweepFlag: segment.sweepFlag,
-        xAxisRotation: segment.xAxisRotation,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "Z") {
-      return segment;
-    }
-    if (segment.type === "C") {
-      return {
-        type: "C",
-        cp1x: segment.cp1x + x,
-        cp1y: segment.cp1y + y,
-        cp2x: segment.cp2x + x,
-        cp2y: segment.cp2y + y,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "Q") {
-      return {
-        type: "Q",
-        cpx: segment.cpx + x,
-        cpy: segment.cpy + y,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "S") {
-      return {
-        type: "S",
-        cpx: segment.cpx + x,
-        cpy: segment.cpy + y,
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "T") {
-      return {
-        type: "T",
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "L") {
-      return {
-        type: "L",
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    if (segment.type === "M") {
-      return {
-        type: "M",
-        x: segment.x + x,
-        y: segment.y + y
-      };
-    }
-    throw new Error(`Unknown segment type: ${segment.type}`);
-  });
-};
-var translatePath = (path, x, y) => {
-  return serializeInstructions(translateSegments(parsePath(path), x, y));
-};
 var resetPath = (d) => {
   const box = getBoundingBox(d);
   return translatePath(d, -box.x1, -box.y1);
@@ -4321,8 +4321,8 @@ import {
   forwardRef as forwardRef10,
   useCallback as useCallback17,
   useContext as useContext32,
-  useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle7,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo31,
   useRef as useRef23,
   useState as useState16
@@ -4330,7 +4330,7 @@ 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 useLayoutEffect10, useRef as useRef24 } from "react";
+import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect11, useRef as useRef24 } 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";
@@ -4356,8 +4356,8 @@ import { useCallback as useCallback24 } from "react";
 import {
   useCallback as useCallback22,
   useContext as useContext36,
-  useEffect as useEffect18,
-  useLayoutEffect as useLayoutEffect11,
+  useEffect as useEffect17,
+  useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo35,
   useState as useState19
 } from "react";
@@ -4366,13 +4366,13 @@ import React37, {
   forwardRef as forwardRef13,
   useCallback as useCallback23,
   useContext as useContext37,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
   useRef as useRef27,
   useState as useState20
 } from "react";
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React39, { useMemo as useMemo37 } from "react";
@@ -4389,9 +4389,9 @@ import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as
 import {
   forwardRef as forwardRef15,
   useContext as useContext38,
-  useEffect as useEffect21,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect12,
+  useLayoutEffect as useLayoutEffect13,
   useMemo as useMemo39,
   useRef as useRef28
 } from "react";
@@ -5565,7 +5565,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.485";
+var VERSION = "4.0.487";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -5971,6 +5971,12 @@ var textSchema = {
     default: undefined,
     description: "Color"
   },
+  "style.fontFamily": {
+    type: "font-family",
+    default: undefined,
+    description: "Font family",
+    keyframable: false
+  },
   "style.fontSize": {
     type: "number",
     default: undefined,
@@ -11429,7 +11435,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,
@@ -11444,7 +11451,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,
@@ -11477,15 +11485,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;
@@ -11609,6 +11613,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,
@@ -12028,89 +12098,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,
@@ -13301,6 +13375,18 @@ var loadImage = ({
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
+var waitForNextFrame = ({
+  onFrame
+}) => {
+  if (typeof requestAnimationFrame === "undefined") {
+    onFrame();
+    return () => {
+      return;
+    };
+  }
+  const frame = requestAnimationFrame(onFrame);
+  return () => cancelAnimationFrame(frame);
+};
 var CanvasImageContent = forwardRef10(({
   src,
   width,
@@ -13330,6 +13416,17 @@ var CanvasImageContent = forwardRef10(({
     overrideId: controls?.overrideId ?? null
   });
   const sequenceContext = useContext32(SequenceContext);
+  const pendingLoadDelayRef = useRef23(null);
+  const continuePendingLoadDelay = useCallback17(() => {
+    const pending = pendingLoadDelayRef.current;
+    if (!pending || pending.continued) {
+      return;
+    }
+    pending.continued = true;
+    pending.unblock();
+    continueRender2(pending.handle);
+    pendingLoadDelayRef.current = null;
+  }, [continueRender2]);
   const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
       return null;
@@ -13347,7 +13444,7 @@ var CanvasImageContent = forwardRef10(({
       ref.current = canvas;
     }
   }, [ref, refForOutline]);
-  useEffect17(() => {
+  useLayoutEffect10(() => {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
@@ -13359,17 +13456,13 @@ var CanvasImageContent = forwardRef10(({
     };
     const controller = new AbortController;
     let cancelled = false;
-    let continued = false;
     let errorCount = 0;
     let timeoutId = null;
     setLoadedImage(null);
-    const continueRenderOnce = () => {
-      if (continued) {
-        return;
-      }
-      continued = true;
-      unblock();
-      continueRender2(handle);
+    pendingLoadDelayRef.current = {
+      handle,
+      unblock,
+      continued: false
     };
     const attemptLoad = () => {
       loadImage({ src: actualSrc, signal: controller.signal }).then((image) => {
@@ -13377,13 +13470,9 @@ var CanvasImageContent = forwardRef10(({
           return;
         }
         setLoadedImage(image);
-      }).then(() => {
-        if (!cancelled) {
-          continueRenderOnce();
-        }
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continueRenderOnce();
+          continuePendingLoadDelay();
           return;
         }
         errorCount++;
@@ -13397,7 +13486,7 @@ var CanvasImageContent = forwardRef10(({
           }, backoff);
         } else if (onError) {
           onError(err);
-          continueRenderOnce();
+          continuePendingLoadDelay();
         } else {
           cancelRender2(err);
         }
@@ -13410,12 +13499,12 @@ var CanvasImageContent = forwardRef10(({
         clearTimeout(timeoutId);
       }
       controller.abort();
-      continueRenderOnce();
+      continuePendingLoadDelay();
     };
   }, [
     actualSrc,
     cancelRender2,
-    continueRender2,
+    continuePendingLoadDelay,
     delayPlayback,
     delayRender2,
     delayRenderRetries,
@@ -13426,13 +13515,16 @@ var CanvasImageContent = forwardRef10(({
     sequenceContext?.postmounting,
     sequenceContext?.premounting
   ]);
-  useEffect17(() => {
+  useLayoutEffect10(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
     const handle = delayRender2(`Applying effects to <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`);
     let cancelled = false;
     let continued = false;
+    let cancelWaitForNextFrame = () => {
+      return;
+    };
     const continueRenderOnce = () => {
       if (continued) {
         return;
@@ -13467,7 +13559,15 @@ var CanvasImageContent = forwardRef10(({
       height: canvasHeight
     }).then((completed) => {
       if (completed && !cancelled) {
-        continueRenderOnce();
+        cancelWaitForNextFrame = waitForNextFrame({
+          onFrame: () => {
+            if (cancelled) {
+              return;
+            }
+            continueRenderOnce();
+            continuePendingLoadDelay();
+          }
+        });
       }
     }).catch((err) => {
       if (cancelled) {
@@ -13476,12 +13576,14 @@ var CanvasImageContent = forwardRef10(({
       if (onError) {
         onError(err);
         continueRenderOnce();
+        continuePendingLoadDelay();
       } else {
         cancelRender2(err);
       }
     });
     return () => {
       cancelled = true;
+      cancelWaitForNextFrame();
       continueRenderOnce();
     };
   }, [
@@ -13489,6 +13591,7 @@ var CanvasImageContent = forwardRef10(({
     cancelRender2,
     chainState,
     continueRender2,
+    continuePendingLoadDelay,
     delayRender2,
     fit,
     height,
@@ -13698,7 +13801,7 @@ var ImgContent = ({
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
-    useLayoutEffect10(() => {
+    useLayoutEffect11(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -14594,7 +14697,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -14651,7 +14754,7 @@ var OffthreadVideoForRendering = ({
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -14755,7 +14858,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -14930,7 +15033,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -14973,7 +15076,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef27(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -14990,7 +15093,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -15605,6 +15708,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;
 };
@@ -15771,7 +15883,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -15815,7 +15927,7 @@ var VideoForRenderingForwardFunction = ({
     return videoRef.current;
   }, []);
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect21(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -15905,7 +16017,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect12(() => {
+    useLayoutEffect13(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
@@ -19009,7 +19121,7 @@ var extrudeAndTransformElement = (options) => {
 // ../design/dist/esm/index.mjs
 import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx312, jsxs as jsxs5 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef31 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef31 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
 import React62 from "react";
@@ -19264,7 +19376,7 @@ var useHoverTransforms = (ref, disabled) => {
     isActive: false
   });
   const eventTarget = useMemo42(() => new EventTarget, []);
-  useEffect22(() => {
+  useEffect21(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -19411,7 +19523,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
-  useEffect22(() => {
+  useEffect21(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -19532,7 +19644,7 @@ var Spinner = ({ size, duration }) => {
     };
   }, [size]);
   const pathsRef = useRef31([]);
-  useEffect23(() => {
+  useEffect22(() => {
     const animate = () => {
       const now = performance.now();
       for (let index = 0;index < lines; index++) {