@remotion/promo-pages 4.0.486 → 4.0.488

package/dist/template-modal-content.js

@@ -1378,7 +1378,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 = ({
@@ -4330,7 +4330,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";
@@ -4341,7 +4347,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";
@@ -4359,7 +4365,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, {
@@ -4370,7 +4376,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";
@@ -5565,7 +5571,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;
@@ -9249,7 +9255,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(() => {
@@ -9313,7 +9319,8 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
   return /* @__PURE__ */ jsx13("canvas", {
     ref: canvasRef,
     className,
-    style
+    style,
+    ...props
   });
 };
 var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
@@ -9490,6 +9497,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,
@@ -9644,6 +9661,7 @@ var AnimatedImageInner = ({
   useImperativeHandle2(ref, () => {
     return actualRef.current;
   }, []);
+  const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
   const animatedImageProps = {
     src,
     width,
@@ -9655,7 +9673,8 @@ var AnimatedImageInner = ({
     id,
     className,
     style,
-    requestInit
+    requestInit,
+    ...canvasProps
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
@@ -10592,6 +10611,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     return ({
       node,
       mediaTimestamp,
+      sourceOffset,
       scheduledTime,
       duration,
       offset,
@@ -10620,7 +10640,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;
@@ -11435,7 +11455,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,
@@ -11450,7 +11471,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,
@@ -11483,15 +11505,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;
@@ -11615,6 +11633,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,
@@ -12034,89 +12118,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 (action.bufferUntilFirstFrame) {
+        bufferUntilFirstFrame(action.shouldBeTime);
       }
-      if (!onlyWarnForMediaSeekingError) {
-        warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? "console-warning" : "console-error");
-      }
-      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,
@@ -13349,13 +13437,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]);
@@ -13377,23 +13470,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 = () => {
@@ -13404,7 +13504,7 @@ var CanvasImageContent = forwardRef10(({
         setLoadedImage(image);
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: false });
           return;
         }
         errorCount++;
@@ -13418,7 +13518,7 @@ var CanvasImageContent = forwardRef10(({
           }, backoff);
         } else if (onError) {
           onError(err);
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: true });
         } else {
           cancelRender2(err);
         }
@@ -13431,21 +13531,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) {
@@ -13497,7 +13593,7 @@ var CanvasImageContent = forwardRef10(({
               return;
             }
             continueRenderOnce();
-            continuePendingLoadDelay();
+            continuePendingLoadDelay({ markAsReady: true });
           }
         });
       }
@@ -13508,7 +13604,7 @@ var CanvasImageContent = forwardRef10(({
       if (onError) {
         onError(err);
         continueRenderOnce();
-        continuePendingLoadDelay();
+        continuePendingLoadDelay({ markAsReady: true });
       } else {
         cancelRender2(err);
       }
@@ -13679,6 +13775,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");
@@ -13711,6 +13808,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;
@@ -13731,8 +13830,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) {
@@ -13744,13 +13853,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) {
@@ -13764,7 +13871,7 @@ var ImgContent = ({
         if (current) {
           onImageFrame?.(current);
         }
-        unblock();
+        setIsLoading(false);
         continueRender2(newHandle);
       };
       if (!imageRef.current) {
@@ -13783,17 +13890,12 @@ var ImgContent = ({
       return () => {
         unmounted = true;
         current.removeEventListener("load", onComplete);
-        unblock();
         continueRender2(newHandle);
       };
     }, [
       actualSrc,
-      delayPlayback,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
-      pauseWhenLoading,
-      isPremounting,
-      isPostmounting,
       onImageFrame,
       continueRender2,
       delayRender2
@@ -14111,9 +14213,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) => {
@@ -14684,7 +14786,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) {
@@ -14888,7 +14990,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.");
   }
@@ -14959,7 +15061,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",
@@ -15640,6 +15742,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;
 };
@@ -19445,7 +19556,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) {
@@ -25745,7 +25856,7 @@ var Triangle22 = (props) => {
 };
 
 // src/components/template-modal-content.tsx
-import { useCallback as useCallback40, useState as useState40 } from "react";
+import { useCallback as useCallback40, useState as useState42 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -27064,9 +27175,9 @@ function cn2(...inputs) {
 }
 
 // src/helpers/use-el-size.ts
-import { useCallback as useCallback38, useEffect as useEffect40, useMemo as useMemo51, useState as useState38 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect40, useMemo as useMemo51, useState as useState40 } from "react";
 var useElementSize = (ref) => {
-  const [size4, setSize] = useState38(null);
+  const [size4, setSize] = useState40(null);
   const observer = useMemo51(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -27173,7 +27284,7 @@ import { forwardRef as forwardRef37, useEffect as useEffect42, useImperativeHand
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef36, useCallback as useCallback39, useEffect as useEffect41, useRef as useRef47, useState as useState39 } from "react";
+import { forwardRef as forwardRef36, useCallback as useCallback39, useEffect as useEffect41, useRef as useRef47, useState as useState41 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef47(null);
@@ -27194,7 +27305,7 @@ var VideoPlayerWithControls = forwardRef36(({ playbackId, poster, currentTime, o
   const videoRef = useRef47(null);
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef47(null);
-  const [playerInitTime] = useState39(Date.now());
+  const [playerInitTime] = useState41(Date.now());
   const videoError = useCallback39((event) => onError(event), [onError]);
   const onImageLoad = useCallback39((event) => {
     const [w, h] = [event.target.width, event.target.height];
@@ -27369,7 +27480,7 @@ var PreviewIcon = () => {
 };
 var copyTimeout = null;
 var TemplateModalContent = ({ template }) => {
-  const [copied, setCopied] = useState40(false);
+  const [copied, setCopied] = useState42(false);
   const mobileLayout = useMobileLayout();
   const copyCommand = useCallback40(async (command) => {
     clearTimeout(copyTimeout);