@remotion/promo-pages 4.0.487 → 4.0.488

package/dist/Homepage.js

@@ -1100,7 +1100,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";
@@ -1111,7 +1117,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";
@@ -1129,7 +1135,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, {
@@ -1140,7 +1146,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";
@@ -2335,7 +2341,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.487";
+var VERSION = "4.0.488";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -6019,7 +6025,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(() => {
@@ -6083,7 +6089,8 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
   return /* @__PURE__ */ jsx13("canvas", {
     ref: canvasRef,
     className,
-    style
+    style,
+    ...props
   });
 };
 var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
@@ -6260,6 +6267,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,
@@ -6414,6 +6431,7 @@ var AnimatedImageInner = ({
   useImperativeHandle2(ref, () => {
     return actualRef.current;
   }, []);
+  const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
   const animatedImageProps = {
     src,
     width,
@@ -6425,7 +6443,8 @@ var AnimatedImageInner = ({
     id,
     className,
     style,
-    requestInit
+    requestInit,
+    ...canvasProps
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
@@ -7362,6 +7381,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     return ({
       node,
       mediaTimestamp,
+      sourceOffset,
       scheduledTime,
       duration,
       offset,
@@ -7390,7 +7410,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;
@@ -10187,13 +10207,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]);
@@ -10215,23 +10240,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 = () => {
@@ -10242,7 +10274,7 @@ var CanvasImageContent = forwardRef10(({
         setLoadedImage(image);
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: false });
           return;
         }
         errorCount++;
@@ -10256,7 +10288,7 @@ var CanvasImageContent = forwardRef10(({
           }, backoff);
         } else if (onError) {
           onError(err);
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: true });
         } else {
           cancelRender2(err);
         }
@@ -10269,21 +10301,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) {
@@ -10335,7 +10363,7 @@ var CanvasImageContent = forwardRef10(({
               return;
             }
             continueRenderOnce();
-            continuePendingLoadDelay();
+            continuePendingLoadDelay({ markAsReady: true });
           }
         });
       }
@@ -10346,7 +10374,7 @@ var CanvasImageContent = forwardRef10(({
       if (onError) {
         onError(err);
         continueRenderOnce();
-        continuePendingLoadDelay();
+        continuePendingLoadDelay({ markAsReady: true });
       } else {
         cancelRender2(err);
       }
@@ -10517,6 +10545,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");
@@ -10549,6 +10578,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;
@@ -10569,8 +10600,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) {
@@ -10582,13 +10623,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) {
@@ -10602,7 +10641,7 @@ var ImgContent = ({
         if (current) {
           onImageFrame?.(current);
         }
-        unblock();
+        setIsLoading(false);
         continueRender2(newHandle);
       };
       if (!imageRef.current) {
@@ -10621,17 +10660,12 @@ var ImgContent = ({
       return () => {
         unmounted = true;
         current.removeEventListener("load", onComplete);
-        unblock();
         continueRender2(newHandle);
       };
     }, [
       actualSrc,
-      delayPlayback,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
-      pauseWhenLoading,
-      isPremounting,
-      isPostmounting,
       onImageFrame,
       continueRender2,
       delayRender2
@@ -10949,9 +10983,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) => {
@@ -11522,7 +11556,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) {
@@ -11726,7 +11760,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.");
   }
@@ -11797,7 +11831,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",
@@ -14750,7 +14784,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React32, { useEffect as useEffect21, useMemo as useMemo43, useState as useState21 } from "react";
+import React32, { useEffect as useEffect21, useMemo as useMemo43, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -20841,7 +20875,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) {
@@ -29864,14 +29898,14 @@ import { createContext as createContext32 } from "react";
 import { jsx as jsx59, jsxs as jsxs14 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment12 } from "react/jsx-runtime";
 import React57 from "react";
-import { useContext as useContext210, useEffect as useEffect41, useState as useState38 } from "react";
+import { useContext as useContext210, useEffect as useEffect41, useState as useState40 } from "react";
 import { useContext as useContext46, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx314 } from "react/jsx-runtime";
-import { useEffect as useEffect210, useState as useState210 } from "react";
+import { useEffect as useEffect210, useState as useState24 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
 import { useContext as useContext47, useEffect as useEffect52, useRef as useRef47 } from "react";
 import { useEffect as useEffect310, useRef as useRef212 } from "react";
-import { useCallback as useCallback39, useContext as useContext310, useMemo as useMemo54, useRef as useRef48, useState as useState39 } from "react";
+import { useCallback as useCallback39, useContext as useContext310, useMemo as useMemo54, useRef as useRef48, useState as useState310 } from "react";
 import { useEffect as useEffect42, useRef as useRef310 } from "react";
 import { useCallback as useCallback210, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -31858,7 +31892,7 @@ var useBufferStateEmitter = (emitter) => {
   }, [bufferManager, emitter]);
 };
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-  const [emitter] = useState38(() => new PlayerEmitter);
+  const [emitter] = useState40(() => new PlayerEmitter);
   const bufferManager = useContext210(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
@@ -31875,7 +31909,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   });
 };
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
-  const [hovered, setHovered] = useState210(false);
+  const [hovered, setHovered] = useState24(false);
   useEffect210(() => {
     const { current } = ref;
     if (!current) {
@@ -31916,7 +31950,7 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
-  const [hasPlayed, setHasPlayed] = useState39(false);
+  const [hasPlayed, setHasPlayed] = useState310(false);
   const frame = Internals.Timeline.useTimelinePosition();
   const playStart = useRef48(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
@@ -35767,8 +35801,8 @@ function useColorMode() {
 }
 
 // ../media/dist/esm/index.mjs
-import { useMemo as useMemo312, useState as useState311 } from "react";
-import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo58, useRef as useRef50, useState as useState40 } from "react";
+import { useMemo as useMemo312, useState as useState312 } from "react";
+import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo58, useRef as useRef50, useState as useState41 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import {
   AudioBufferSink,
@@ -35777,7 +35811,7 @@ import {
 import { CanvasSink } from "mediabunny";
 import { useContext as useContext50, useLayoutEffect as useLayoutEffect19 } from "react";
 import { jsx as jsx61 } from "react/jsx-runtime";
-import { useContext as useContext312, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState212 } from "react";
+import { useContext as useContext312, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
 import React211 from "react";
 import {
   ALL_FORMATS as ALL_FORMATS2,
@@ -35921,94 +35955,20 @@ var calculateEndTime = ({
   }) / fps;
   return mediaDuration + (trimBefore ?? 0) / fps;
 };
-var AUDIO_PRIMING_SECONDS = 0.5;
-async function* makeIteratorWithPrimingInner(audioSink, timeToSeek, maximumTimestamp) {
-  const primingStart = Math.max(0, timeToSeek - AUDIO_PRIMING_SECONDS);
-  const iterator = audioSink.buffers(primingStart, maximumTimestamp);
-  for await (const buffer of iterator) {
-    if (buffer.timestamp + buffer.duration <= timeToSeek) {
-      continue;
-    }
-    yield {
-      buffer,
-      timestamp: buffer.timestamp
-    };
-  }
-}
-async function* makeLoopingIterator({
-  audioSink,
-  segmentStartInSeconds,
-  segmentEndInSeconds,
-  playbackRate,
-  sequenceDurationInSeconds
-}) {
-  const duration = segmentEndInSeconds - segmentStartInSeconds;
-  let iteration = 0;
-  let broken = false;
-  while (true) {
-    for await (const item of makeIteratorWithPrimingInner(audioSink, segmentStartInSeconds, segmentEndInSeconds)) {
-      const timestamp = item.timestamp + iteration * duration;
-      const endTimestamp = duration * iteration + (item.timestamp - segmentStartInSeconds + item.buffer.duration);
-      if (endTimestamp > sequenceDurationInSeconds * playbackRate) {
-        broken = true;
-        break;
-      }
-      yield {
-        buffer: item.buffer,
-        timestamp
-      };
-    }
-    if (broken) {
-      break;
-    }
-    iteration++;
-  }
-}
-var makeIteratorWithPriming = ({
-  audioSink,
-  timeToSeek,
-  maximumTimestamp,
-  loop,
-  playbackRate,
-  sequenceDurationInSeconds
-}) => {
-  if (loop) {
-    return makeLoopingIterator({
-      audioSink,
-      segmentStartInSeconds: timeToSeek,
-      segmentEndInSeconds: maximumTimestamp,
-      playbackRate,
-      sequenceDurationInSeconds
-    });
-  }
-  return makeIteratorWithPrimingInner(audioSink, timeToSeek, maximumTimestamp);
-};
 var ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT2 = 0.1;
 var makeAudioIterator = ({
   startFromSecond,
-  maximumTimestamp,
-  audioSink,
-  loop,
-  playbackRate,
-  sequenceDurationInSeconds,
+  iterator,
   unscheduleAudioNode
 }) => {
   let destroyed = false;
-  const iterator = makeIteratorWithPriming({
-    audioSink,
-    timeToSeek: startFromSecond,
-    maximumTimestamp,
-    loop,
-    playbackRate,
-    sequenceDurationInSeconds
-  });
   const queuedAudioNodes = [];
   let mostRecentTimestamp = -Infinity;
   const cleanupAudioQueue = () => {
-    for (const node of queuedAudioNodes) {
-      unscheduleAudioNode(node.node);
+    for (const { node } of queuedAudioNodes) {
+      unscheduleAudioNode(node);
       try {
-        node.node.stop();
+        node.stop();
       } catch {}
     }
     queuedAudioNodes.length = 0;
@@ -36016,7 +35976,7 @@ var makeAudioIterator = ({
   const getNextFn = async () => {
     const next = await iterator.next();
     if (next.value) {
-      mostRecentTimestamp = Math.max(mostRecentTimestamp, next.value.timestamp + next.value.buffer.duration);
+      mostRecentTimestamp = Math.max(mostRecentTimestamp, next.value.timelineTimestamp + next.value.sourceDurationInSeconds);
     }
     return next;
   };
@@ -36032,21 +35992,8 @@ var makeAudioIterator = ({
     isDestroyed: () => {
       return destroyed;
     },
-    addQueuedAudioNode: ({
-      node,
-      timestamp,
-      buffer,
-      scheduledTime,
-      scheduledAtAnchor
-    }) => {
-      queuedAudioNodes.push({
-        node,
-        timestamp,
-        buffer,
-        scheduledTime,
-        playbackRate,
-        scheduledAtAnchor
-      });
+    addQueuedAudioNode: (queuedNode) => {
+      queuedAudioNodes.push(queuedNode);
     },
     guessNextTimestamp: () => {
       return !Number.isFinite(mostRecentTimestamp) ? startFromSecond : mostRecentTimestamp;
@@ -36055,7 +36002,7 @@ var makeAudioIterator = ({
       let until = -Infinity;
       let from = Infinity;
       for (const node of queuedAudioNodes) {
-        until = Math.max(until, node.timestamp + node.buffer.duration);
+        until = Math.max(until, node.timestamp + node.sourceDurationInSeconds);
         from = Math.min(from, node.timestamp);
       }
       if (!Number.isFinite(from) || !Number.isFinite(until)) {
@@ -36088,27 +36035,23 @@ var getScheduledTime = ({
   return scheduledTime;
 };
 var getDurationOfNode = ({
-  bufferDuration,
-  loopSegmentMediaEndTimestamp,
-  offset: offset4,
-  originalUnloopedMediaTimestamp
+  sourceDurationInSeconds,
+  sourceOffsetInSeconds,
+  offset: offset4
 }) => {
-  const originalUnloopedMediaEndTime = originalUnloopedMediaTimestamp + bufferDuration;
-  const needsTrimEnd = originalUnloopedMediaEndTime > loopSegmentMediaEndTimestamp;
-  const durationMinusOffset = bufferDuration - offset4;
-  const duration = needsTrimEnd ? durationMinusOffset - Math.max(0, originalUnloopedMediaEndTime - loopSegmentMediaEndTimestamp) : durationMinusOffset;
-  return duration;
+  return Math.max(0, sourceDurationInSeconds - (offset4 - sourceOffsetInSeconds));
 };
 var getTrimStartForAudioNode = ({
   mediaTimestamp,
   targetTime,
   sequenceStartTime,
-  combinedPlaybackRate
+  combinedPlaybackRate,
+  sourceStartOffsetInSeconds
 }) => {
   const needsTrimStart = mediaTimestamp < sequenceStartTime;
   const offsetBecauseOfTrim = needsTrimStart ? sequenceStartTime - mediaTimestamp : 0;
   const offsetBecauseOfTooLate = targetTime < 0 ? -targetTime * combinedPlaybackRate : 0;
-  return offsetBecauseOfTrim + offsetBecauseOfTooLate;
+  return sourceStartOffsetInSeconds + offsetBecauseOfTrim + offsetBecauseOfTooLate;
 };
 
 class StaleWaiterError extends Error {
@@ -36210,6 +36153,76 @@ var waitForTurn = ({
   });
   processNext();
 };
+var AUDIO_PRIMING_SECONDS = 0.5;
+async function* makeIteratorWithPriming({
+  audioSink,
+  timeToSeek,
+  maximumTimestamp
+}) {
+  const primingStart = Math.max(0, timeToSeek - AUDIO_PRIMING_SECONDS);
+  const iterator = audioSink.buffers(primingStart, maximumTimestamp);
+  for await (const buffer of iterator) {
+    const sourceStart = Math.max(buffer.timestamp, timeToSeek);
+    const sourceEnd = Math.min(buffer.timestamp + buffer.duration, maximumTimestamp);
+    if (sourceEnd <= sourceStart) {
+      continue;
+    }
+    yield {
+      buffer,
+      timelineTimestamp: sourceStart,
+      sourceOffsetInSeconds: sourceStart - buffer.timestamp,
+      sourceDurationInSeconds: sourceEnd - sourceStart
+    };
+  }
+}
+async function* makeLoopingIterator({
+  audioSink,
+  seekTimeInSeconds,
+  loopStartInSeconds,
+  segmentEndInSeconds,
+  maximumContinuousTimestamp
+}) {
+  if (segmentEndInSeconds <= loopStartInSeconds) {
+    throw new Error(`Cannot loop audio over an empty range (${loopStartInSeconds} to ${segmentEndInSeconds})`);
+  }
+  let passStartInSeconds = seekTimeInSeconds;
+  let passBaseTimestamp = seekTimeInSeconds;
+  while (true) {
+    let yieldedInPass = false;
+    for await (const item of makeIteratorWithPriming({
+      audioSink,
+      timeToSeek: passStartInSeconds,
+      maximumTimestamp: segmentEndInSeconds
+    })) {
+      yieldedInPass = true;
+      const timelineTimestamp = passBaseTimestamp + (item.timelineTimestamp - passStartInSeconds);
+      const sourceDurationInSeconds = Math.min(item.sourceDurationInSeconds, maximumContinuousTimestamp - timelineTimestamp);
+      if (sourceDurationInSeconds <= 0) {
+        return;
+      }
+      yield {
+        ...item,
+        timelineTimestamp,
+        sourceDurationInSeconds
+      };
+      if (timelineTimestamp + sourceDurationInSeconds >= maximumContinuousTimestamp) {
+        return;
+      }
+    }
+    if (!yieldedInPass) {
+      throw new Error(`Audio loop pass from ${passStartInSeconds} to ${segmentEndInSeconds} yielded no buffers`);
+    }
+    passBaseTimestamp += segmentEndInSeconds - passStartInSeconds;
+    passStartInSeconds = loopStartInSeconds;
+  }
+}
+var anchorToContinuousTime = ({
+  anchor,
+  unloopedTimeInSeconds,
+  playbackRate
+}) => {
+  return anchor.mediaStartInSeconds + (unloopedTimeInSeconds - anchor.unloopedStartInSeconds) * playbackRate;
+};
 var audioIteratorManager = ({
   audioTrack,
   delayPlaybackHandleIfNotPremounting,
@@ -36244,6 +36257,7 @@ var audioIteratorManager = ({
   gainNode.connect(sharedAudioContext.gainNode);
   const audioSink = new AudioBufferSink(audioTrack);
   let audioBufferIterator = null;
+  let currentAnchor = null;
   let audioIteratorsCreated = 0;
   let totalAudioScheduledInSeconds = 0;
   let currentDelayHandle = null;
@@ -36276,6 +36290,8 @@ var audioIteratorManager = ({
     buffer,
     mediaTimestamp,
     originalUnloopedMediaTimestamp,
+    sourceOffsetInSeconds,
+    sourceDurationInSeconds,
     playbackRate,
     scheduleAudioNode,
     logLevel
@@ -36290,7 +36306,7 @@ var audioIteratorManager = ({
     node.buffer = buffer;
     node.playbackRate.value = playbackRate;
     node.connect(gainNode);
-    const started = scheduleAudioNode(node, mediaTimestamp, originalUnloopedMediaTimestamp);
+    const started = scheduleAudioNode(node, mediaTimestamp, originalUnloopedMediaTimestamp, sourceOffsetInSeconds, sourceDurationInSeconds);
     if (started.type === "not-started") {
       Internals.Log.verbose({ logLevel, tag: "audio-scheduling" }, "not started, disconnected: %s %s", mediaTimestamp.toFixed(3), buffer.duration.toFixed(3));
       node.disconnect();
@@ -36300,7 +36316,9 @@ var audioIteratorManager = ({
       node,
       timestamp: mediaTimestamp,
       buffer,
+      sourceDurationInSeconds,
       scheduledTime: started.scheduledTime,
+      playbackRate,
       scheduledAtAnchor: sharedAudioContext.audioSyncAnchor.value
     });
   };
@@ -36315,22 +36333,24 @@ var audioIteratorManager = ({
     }
     const startTime = getStartTime();
     const sequenceEndTime = getSequenceEndTimestamp();
-    if (buffer.timestamp + buffer.buffer.duration <= startTime) {
+    if (buffer.timelineTimestamp + buffer.sourceDurationInSeconds <= startTime) {
       return;
     }
-    if (buffer.timestamp >= sequenceEndTime) {
+    if (buffer.timelineTimestamp >= sequenceEndTime) {
       return;
     }
-    const scheduledStart = Math.max(buffer.timestamp, startTime);
-    const scheduledEnd = Math.min(buffer.timestamp + buffer.buffer.duration, sequenceEndTime);
+    const scheduledStart = Math.max(buffer.timelineTimestamp, startTime);
+    const scheduledEnd = Math.min(buffer.timelineTimestamp + buffer.sourceDurationInSeconds, sequenceEndTime);
     totalAudioScheduledInSeconds += Math.max(0, scheduledEnd - scheduledStart);
     scheduleAudioChunk({
       buffer: buffer.buffer.buffer,
-      mediaTimestamp: buffer.timestamp,
+      mediaTimestamp: buffer.timelineTimestamp,
       playbackRate,
       scheduleAudioNode,
       logLevel,
-      originalUnloopedMediaTimestamp: buffer.buffer.timestamp
+      originalUnloopedMediaTimestamp: buffer.buffer.timestamp,
+      sourceOffsetInSeconds: buffer.sourceOffsetInSeconds,
+      sourceDurationInSeconds: buffer.sourceDurationInSeconds
     });
     drawDebugOverlay();
   };
@@ -36378,7 +36398,7 @@ var audioIteratorManager = ({
           onDone();
           return;
         }
-        onScheduled(result.value.timestamp);
+        onScheduled(result.value.timelineTimestamp);
         notifyNodeScheduled();
         onAudioChunk({
           buffer: result.value,
@@ -36418,6 +36438,7 @@ var audioIteratorManager = ({
     nonce,
     playbackRate,
     startFromSecond,
+    unloopedStartFromSecond,
     scheduleAudioNode,
     getTargetTime,
     logLevel,
@@ -36436,14 +36457,25 @@ var audioIteratorManager = ({
     unblockCurrentDelayHandle();
     const delayHandle = delayPlaybackHandleIfNotPremounting();
     currentDelayHandle = delayHandle;
+    currentAnchor = {
+      unloopedStartInSeconds: unloopedStartFromSecond,
+      mediaStartInSeconds: startFromSecond
+    };
+    const maximumContinuousTimestamp = startFromSecond + getSequenceDurationInSeconds() * playbackRate;
+    const source = loop ? makeLoopingIterator({
+      audioSink,
+      seekTimeInSeconds: startFromSecond,
+      loopStartInSeconds: getStartTime(),
+      segmentEndInSeconds: maximumTimestamp,
+      maximumContinuousTimestamp
+    }) : makeIteratorWithPriming({
+      audioSink,
+      timeToSeek: startFromSecond,
+      maximumTimestamp
+    });
     const iterator = makeAudioIterator({
       startFromSecond,
-      maximumTimestamp,
-      audioSink,
-      logLevel,
-      loop,
-      playbackRate,
-      sequenceDurationInSeconds: getSequenceDurationInSeconds(),
+      iterator: source,
       unscheduleAudioNode
     });
     audioIteratorsCreated++;
@@ -36474,8 +36506,10 @@ var audioIteratorManager = ({
   };
   const seek2 = ({
     newTime,
+    unloopedNewTime,
     nonce,
     playbackRate,
+    localPlaybackRate,
     scheduleAudioNode,
     getTargetTime,
     logLevel,
@@ -36507,18 +36541,23 @@ var audioIteratorManager = ({
       return;
     }
     if (audioBufferIterator && !audioBufferIterator.isDestroyed()) {
+      const timeToCheck = loop && currentAnchor ? anchorToContinuousTime({
+        anchor: currentAnchor,
+        unloopedTimeInSeconds: unloopedNewTime,
+        playbackRate: localPlaybackRate
+      }) : newTime;
       const queuedPeriod = audioBufferIterator.getQueuedPeriod();
       const queuedPeriodMinusLatency = queuedPeriod ? {
         from: queuedPeriod.from - ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT2 - sharedAudioContext.audioContext.baseLatency - sharedAudioContext.audioContext.outputLatency,
         until: queuedPeriod.until
       } : null;
-      const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, queuedPeriodMinusLatency);
+      const currentTimeIsAlreadyQueued = isAlreadyQueued(timeToCheck, queuedPeriodMinusLatency);
       if (currentTimeIsAlreadyQueued) {
         processNext();
         return;
       }
       const currentIteratorTimestamp = audioBufferIterator.guessNextTimestamp();
-      if (currentIteratorTimestamp < newTime && Math.abs(currentIteratorTimestamp - newTime) < 1) {
+      if (currentIteratorTimestamp < timeToCheck && Math.abs(currentIteratorTimestamp - timeToCheck) < 1) {
         processNext();
         return;
       }
@@ -36527,6 +36566,7 @@ var audioIteratorManager = ({
       nonce,
       playbackRate,
       startFromSecond: newTime,
+      unloopedStartFromSecond: unloopedNewTime,
       scheduleAudioNode,
       getTargetTime,
       logLevel,
@@ -36538,9 +36578,11 @@ var audioIteratorManager = ({
   return {
     startAudioIterator,
     getAudioBufferIterator: () => audioBufferIterator,
+    getCurrentAnchor: () => currentAnchor,
     destroyIterator: () => {
       audioBufferIterator?.destroy();
       audioBufferIterator = null;
+      currentAnchor = null;
       unblockCurrentDelayHandle();
     },
     seek: seek2,
@@ -37556,6 +37598,7 @@ class MediaPlayer {
               nonce,
               playbackRate: this.playbackRate * this.globalPlaybackRate,
               startFromSecond: startTime,
+              unloopedStartFromSecond: startTimeUnresolved,
               scheduleAudioNode: this.scheduleAudioNode,
               getTargetTime: this.getTargetTime,
               logLevel: this.logLevel,
@@ -37587,10 +37630,10 @@ class MediaPlayer {
       __callDispose(__stack, _err, _hasErr);
     }
   }
-  seekToWithQueue = async (newTime) => {
+  seekToWithQueue = async (newTime, unloopedNewTime) => {
     const nonce = this.nonceManager.createAsyncOperation();
     await this.seekPromiseChain;
-    this.seekPromiseChain = this.seekToDoNotCallDirectly(newTime, nonce);
+    this.seekPromiseChain = this.seekToDoNotCallDirectly(newTime, unloopedNewTime, nonce);
     await this.seekPromiseChain;
   };
   async seekTo(time) {
@@ -37598,9 +37641,9 @@ class MediaPlayer {
     if (newTime === null) {
       throw new Error(`should have asserted that the time is not null`);
     }
-    await this.seekToWithQueue(newTime);
+    await this.seekToWithQueue(newTime, time);
   }
-  async seekToDoNotCallDirectly(newTime, nonce) {
+  async seekToDoNotCallDirectly(newTime, unloopedNewTime, nonce) {
     if (nonce.isStale()) {
       return;
     }
@@ -37612,8 +37655,10 @@ class MediaPlayer {
         }),
         this.audioIteratorManager?.seek({
           newTime,
+          unloopedNewTime,
           nonce,
           playbackRate: this.playbackRate * this.globalPlaybackRate,
+          localPlaybackRate: this.playbackRate,
           getTargetTime: this.getTargetTime,
           logLevel: this.logLevel,
           loop: this.loop,
@@ -37759,14 +37804,19 @@ class MediaPlayer {
     }
     const globalTime = (currentTime - this.sharedAudioContext.audioSyncAnchor.value) * this.globalPlaybackRate;
     const timeInSeconds = globalTime - this.sequenceOffset;
-    const localTime = this.getTrimmedTime(timeInSeconds);
+    const anchor = this.loop ? this.audioIteratorManager?.getCurrentAnchor() ?? null : null;
+    const localTime = anchor ? anchorToContinuousTime({
+      anchor,
+      unloopedTimeInSeconds: timeInSeconds,
+      playbackRate: this.playbackRate
+    }) : this.getTrimmedTime(timeInSeconds);
     if (localTime === null) {
       return null;
     }
     const targetTime = (mediaTimestamp - localTime) / (this.playbackRate * this.globalPlaybackRate);
     return targetTime;
   };
-  scheduleAudioNode = (node, mediaTimestamp, originalUnloopedMediaTimestamp) => {
+  scheduleAudioNode = (node, mediaTimestamp, originalUnloopedMediaTimestamp, sourceOffsetInSeconds, sourceDurationInSeconds) => {
     if (!this.sharedAudioContext) {
       throw new Error("Shared audio context not found");
     }
@@ -37779,18 +37829,17 @@ class MediaPlayer {
       };
     }
     const sequenceStartTime = this.getStartTime();
-    const loopSegmentMediaEndTimestamp = this.getLoopSegmentMediaEndTimestamp();
     const offset4 = getTrimStartForAudioNode({
       mediaTimestamp,
       targetTime,
       sequenceStartTime,
-      combinedPlaybackRate
+      combinedPlaybackRate,
+      sourceStartOffsetInSeconds: sourceOffsetInSeconds
     });
     const duration = getDurationOfNode({
-      bufferDuration: node.buffer?.duration ?? 0,
-      loopSegmentMediaEndTimestamp,
-      offset: offset4,
-      originalUnloopedMediaTimestamp
+      sourceDurationInSeconds,
+      sourceOffsetInSeconds,
+      offset: offset4
     });
     const scheduledTime = getScheduledTime({
       mediaTimestamp,
@@ -37801,6 +37850,7 @@ class MediaPlayer {
     return this.sharedAudioContext.scheduleAudioNode({
       node,
       mediaTimestamp,
+      sourceOffset: sourceOffsetInSeconds,
       scheduledTime,
       duration,
       offset: offset4,
@@ -38038,9 +38088,9 @@ var AudioForPreviewAssertedShowing = ({
   const mediaPlayerRef = useRef50(null);
   const initialTrimBeforeRef = useRef50(trimBefore);
   const initialTrimAfterRef = useRef50(trimAfter);
-  const [initialRequestInit] = useState40(requestInit);
-  const [mediaPlayerReady, setMediaPlayerReady] = useState40(false);
-  const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState40(false);
+  const [initialRequestInit] = useState41(requestInit);
+  const [mediaPlayerReady, setMediaPlayerReady] = useState41(false);
+  const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState41(false);
   const [playing] = Timeline.usePlayingState();
   const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
   const sharedAudioContext = useContext212(SharedAudioContext2);
@@ -40221,8 +40271,8 @@ var AudioForRendering2 = ({
   }
   const { fps } = videoConfig;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
-  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState212(false);
-  const [initialRequestInit] = useState212(requestInit);
+  const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState210(false);
+  const [initialRequestInit] = useState210(requestInit);
   const sequenceContext = useContext312(Internals.SequenceContext);
   const id = useMemo213(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
@@ -40444,7 +40494,7 @@ var AudioInner = (props) => {
     mediaStartsAt,
     loop: props.loop ?? false
   });
-  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState311(null);
+  const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState312(null);
   const loopDisplay = useMemo312(() => getLoopDisplay({
     loop: props.loop ?? false,
     mediaDurationInSeconds,
@@ -42841,7 +42891,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.487";
+var VERSION2 = "4.0.488";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";