remotion 4.0.486 → 4.0.488

package/dist/esm/index.mjs

@@ -1291,7 +1291,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.486";
+var VERSION = "4.0.488";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -5124,7 +5124,7 @@ var useEffectChainState = () => {
 
 // src/animated-image/canvas.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
-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(() => {
@@ -5188,7 +5188,8 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
   return /* @__PURE__ */ jsx13("canvas", {
     ref: canvasRef,
     className,
-    style
+    style,
+    ...props
   });
 };
 var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
@@ -5374,6 +5375,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,
@@ -5528,6 +5539,7 @@ var AnimatedImageInner = ({
   useImperativeHandle2(ref, () => {
     return actualRef.current;
   }, []);
+  const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
   const animatedImageProps = {
     src,
     width,
@@ -5539,7 +5551,8 @@ var AnimatedImageInner = ({
     id,
     className,
     style,
-    requestInit
+    requestInit,
+    ...canvasProps
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
@@ -6567,6 +6580,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     return ({
       node,
       mediaTimestamp,
+      sourceOffset,
       scheduledTime,
       duration,
       offset,
@@ -6595,7 +6609,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;
@@ -7458,7 +7472,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,
@@ -7473,7 +7488,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,
@@ -7506,15 +7522,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;
@@ -7643,6 +7655,74 @@ var useBufferUntilFirstFrame = ({
   }, [bufferUntilFirstFrame]);
 };
 
+// src/get-media-sync-action.ts
+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" };
+};
+
 // src/media-tag-current-time-timestamp.ts
 import React21 from "react";
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
@@ -8078,89 +8158,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,
@@ -9457,13 +9541,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]);
@@ -9485,23 +9574,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 = () => {
@@ -9512,7 +9608,7 @@ var CanvasImageContent = forwardRef10(({
         setLoadedImage(image);
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: false });
           return;
         }
         errorCount++;
@@ -9526,7 +9622,7 @@ var CanvasImageContent = forwardRef10(({
           }, backoff);
         } else if (onError) {
           onError(err);
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: true });
         } else {
           cancelRender2(err);
         }
@@ -9539,21 +9635,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) {
@@ -9605,7 +9697,7 @@ var CanvasImageContent = forwardRef10(({
               return;
             }
             continueRenderOnce();
-            continuePendingLoadDelay();
+            continuePendingLoadDelay({ markAsReady: true });
           }
         });
       }
@@ -9616,7 +9708,7 @@ var CanvasImageContent = forwardRef10(({
       if (onError) {
         onError(err);
         continueRenderOnce();
-        continuePendingLoadDelay();
+        continuePendingLoadDelay({ markAsReady: true });
       } else {
         cancelRender2(err);
       }
@@ -9801,7 +9893,13 @@ var IFrameRefForwarding = ({
 };
 var IFrame = forwardRef11(IFrameRefForwarding);
 // src/Img.tsx
-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";
 function exponentialBackoff2(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
@@ -9824,6 +9922,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");
@@ -9856,6 +9955,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;
@@ -9876,8 +9977,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) {
@@ -9889,13 +10000,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) {
@@ -9909,7 +10018,7 @@ var ImgContent = ({
         if (current) {
           onImageFrame?.(current);
         }
-        unblock();
+        setIsLoading(false);
         continueRender2(newHandle);
       };
       if (!imageRef.current) {
@@ -9928,17 +10037,12 @@ var ImgContent = ({
       return () => {
         unmounted = true;
         current.removeEventListener("load", onComplete);
-        unblock();
         continueRender2(newHandle);
       };
     }, [
       actualSrc,
-      delayPlayback,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
-      pauseWhenLoading,
-      isPremounting,
-      isPostmounting,
       onImageFrame,
       continueRender2,
       delayRender2
@@ -10264,7 +10368,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";
 var CompositionManagerProvider = ({
@@ -10274,9 +10378,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) => {
@@ -10851,7 +10955,7 @@ import {
   useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo35,
-  useState as useState19
+  useState as useState20
 } from "react";
 
 // src/video/offthread-video-source.ts
@@ -10966,7 +11070,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) {
@@ -11078,7 +11182,7 @@ import React37, {
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
   useRef as useRef27,
-  useState as useState20
+  useState as useState21
 } from "react";
 
 // src/video/emit-video-frame.ts
@@ -11189,7 +11293,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.");
   }
@@ -11260,7 +11364,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",
@@ -12009,6 +12113,7 @@ var Still = (props2) => {
   };
   return React42.createElement(Composition, newProps);
 };
+addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
 import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
 

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.486";
+var VERSION = "4.0.488";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.486",
+	"version": "4.0.488",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.486",
+		"@remotion/eslint-config-internal": "4.0.488",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},