@remotion/studio 4.0.452 → 4.0.453

package/dist/esm/internals.mjs

@@ -20458,7 +20458,8 @@ var getTimelineNestedLevel = (sequence, allSequences, depth) => {
   if (!parentSequence) {
     throw new Error("has parentId but no parent");
   }
-  return getTimelineNestedLevel(parentSequence, allSequences, depth + 1);
+  const parentContributes = parentSequence.showInTimeline;
+  return getTimelineNestedLevel(parentSequence, allSequences, parentContributes ? depth + 1 : depth);
 };
 
 // src/helpers/get-timeline-sequence-hash.ts
@@ -20507,6 +20508,19 @@ var getTimelineSequenceSequenceSortKey = (track, tracks, sameHashes = {}, nonceR
 };
 
 // src/helpers/calculate-timeline.ts
+var getInheritedLoopDisplay = (sequence, sequences) => {
+  if (sequence.loopDisplay) {
+    return sequence.loopDisplay;
+  }
+  if (!sequence.parent) {
+    return;
+  }
+  const parent = sequences.find((s) => s.id === sequence.parent);
+  if (!parent) {
+    return;
+  }
+  return getInheritedLoopDisplay(parent, sequences);
+};
 var calculateTimeline = ({
   sequences
 }) => {
@@ -20535,7 +20549,8 @@ var calculateTimeline = ({
       sequence: {
         ...sequence,
         from: visibleStart,
-        duration: visibleDuration
+        duration: visibleDuration,
+        loopDisplay: sequence.type === "audio" || sequence.type === "video" ? getInheritedLoopDisplay(sequence, sortedSequences) : sequence.loopDisplay
       },
       depth: getTimelineNestedLevel(sequence, sortedSequences, 0),
       hash: actualHash,
@@ -23171,6 +23186,13 @@ var useMaxMediaDuration = (s, fps) => {
 import { useEffect as useEffect72, useMemo as useMemo119, useRef as useRef43, useState as useState77 } from "react";
 import { Internals as Internals55 } from "remotion";
 
+// src/make-audio-waveform-worker.ts
+var makeAudioWaveformWorker = () => {
+  return new Worker(new URL("./audio-waveform-worker.mjs", import.meta.url), {
+    type: "module"
+  });
+};
+
 // src/components/parse-color.ts
 var colorCache = new Map;
 var parseColor = (color) => {
@@ -23246,12 +23268,107 @@ var drawBars = (canvas, peaks, color, volume, width) => {
 
 // src/components/load-waveform-peaks.ts
 import { ALL_FORMATS as ALL_FORMATS3, AudioSampleSink, Input as Input3, UrlSource as UrlSource3 } from "mediabunny";
+
+// src/components/waveform-peak-processor.ts
+var emitWaveformProgress = ({
+  completedPeaks,
+  final,
+  onProgress,
+  peaks,
+  totalPeaks
+}) => {
+  onProgress?.({
+    peaks,
+    completedPeaks,
+    totalPeaks,
+    final
+  });
+};
+var createWaveformPeakProcessor = ({
+  totalPeaks,
+  samplesPerPeak,
+  onProgress,
+  progressIntervalInMs,
+  now
+}) => {
+  const peaks = new Float32Array(totalPeaks);
+  let peakIndex = 0;
+  let peakMax = 0;
+  let sampleInPeak = 0;
+  let lastProgressAt = 0;
+  let lastProgressPeak = 0;
+  const emitProgress = (force) => {
+    const timestamp = now();
+    if (!force && peakIndex === lastProgressPeak && sampleInPeak === 0) {
+      return;
+    }
+    if (!force && timestamp - lastProgressAt < progressIntervalInMs) {
+      return;
+    }
+    lastProgressAt = timestamp;
+    lastProgressPeak = peakIndex;
+    emitWaveformProgress({
+      peaks,
+      completedPeaks: peakIndex,
+      totalPeaks,
+      final: force,
+      onProgress
+    });
+  };
+  return {
+    peaks,
+    processSampleChunk: (floats, channels) => {
+      const frameCount = Math.floor(floats.length / Math.max(1, channels));
+      for (let frame2 = 0;frame2 < frameCount; frame2++) {
+        let framePeak = 0;
+        for (let channel = 0;channel < channels; channel++) {
+          const sampleIndex = frame2 * channels + channel;
+          const abs = Math.abs(floats[sampleIndex] ?? 0);
+          if (abs > framePeak) {
+            framePeak = abs;
+          }
+        }
+        if (framePeak > peakMax) {
+          peakMax = framePeak;
+        }
+        sampleInPeak++;
+        if (sampleInPeak >= samplesPerPeak) {
+          if (peakIndex < totalPeaks) {
+            peaks[peakIndex] = peakMax;
+          }
+          peakIndex++;
+          peakMax = 0;
+          sampleInPeak = 0;
+        }
+      }
+      emitProgress(false);
+    },
+    finalize: () => {
+      if (sampleInPeak > 0 && peakIndex < totalPeaks) {
+        peaks[peakIndex] = peakMax;
+        peakIndex++;
+      }
+      emitProgress(true);
+    }
+  };
+};
+
+// src/components/load-waveform-peaks.ts
 var TARGET_SAMPLE_RATE = 100;
+var DEFAULT_PROGRESS_INTERVAL_IN_MS = 50;
 var peaksCache = new Map;
-async function loadWaveformPeaks(url, signal) {
+async function loadWaveformPeaks(url, signal, options) {
   const cached = peaksCache.get(url);
-  if (cached)
+  if (cached) {
+    emitWaveformProgress({
+      peaks: cached,
+      completedPeaks: cached.length,
+      totalPeaks: cached.length,
+      final: true,
+      onProgress: options?.onProgress
+    });
     return cached;
+  }
   const input2 = new Input3({
     formats: ALL_FORMATS3,
     source: new UrlSource3(url)
@@ -23265,11 +23382,14 @@ async function loadWaveformPeaks(url, signal) {
     const durationInSeconds = await audioTrack.computeDuration();
     const totalPeaks = Math.ceil(durationInSeconds * TARGET_SAMPLE_RATE);
     const samplesPerPeak = Math.max(1, Math.floor(sampleRate / TARGET_SAMPLE_RATE));
-    const peaks = new Float32Array(totalPeaks);
-    let peakIndex = 0;
-    let peakMax = 0;
-    let sampleInPeak = 0;
     const sink = new AudioSampleSink(audioTrack);
+    const processor = createWaveformPeakProcessor({
+      totalPeaks,
+      samplesPerPeak,
+      onProgress: options?.onProgress,
+      progressIntervalInMs: options?.progressIntervalInMs ?? DEFAULT_PROGRESS_INTERVAL_IN_MS,
+      now: () => Date.now()
+    });
     for await (const sample of sink.samples()) {
       if (signal.aborted) {
         sample.close();
@@ -23282,34 +23402,11 @@ async function loadWaveformPeaks(url, signal) {
       const floats = new Float32Array(bytesNeeded / 4);
       sample.copyTo(floats, { format: "f32", planeIndex: 0 });
       const channels = Math.max(1, sample.numberOfChannels);
-      const frames = sample.numberOfFrames;
       sample.close();
-      for (let frame2 = 0;frame2 < frames; frame2++) {
-        let framePeak = 0;
-        for (let channel = 0;channel < channels; channel++) {
-          const sampleIndex = frame2 * channels + channel;
-          const abs = Math.abs(floats[sampleIndex] ?? 0);
-          if (abs > framePeak) {
-            framePeak = abs;
-          }
-        }
-        if (framePeak > peakMax) {
-          peakMax = framePeak;
-        }
-        sampleInPeak++;
-        if (sampleInPeak >= samplesPerPeak) {
-          if (peakIndex < totalPeaks) {
-            peaks[peakIndex] = peakMax;
-          }
-          peakIndex++;
-          peakMax = 0;
-          sampleInPeak = 0;
-        }
-      }
-    }
-    if (sampleInPeak > 0 && peakIndex < totalPeaks) {
-      peaks[peakIndex] = peakMax;
+      processor.processSampleChunk(floats, channels);
     }
+    processor.finalize();
+    const { peaks } = processor;
     peaksCache.set(url, peaks);
     return peaks;
   } finally {
@@ -23317,8 +23414,50 @@ async function loadWaveformPeaks(url, signal) {
   }
 }
 
+// src/components/looped-media-timeline.ts
+var shouldTileLoopDisplay = (loopDisplay) => {
+  return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
+};
+var getLoopDisplayWidth = ({
+  visualizationWidth,
+  loopDisplay
+}) => {
+  if (!shouldTileLoopDisplay(loopDisplay)) {
+    return visualizationWidth;
+  }
+  return visualizationWidth / loopDisplay.numberOfTimes;
+};
+
+// src/components/slice-waveform-peaks.ts
+var sliceWaveformPeaks = ({
+  durationInFrames,
+  fps,
+  peaks,
+  playbackRate,
+  startFrom
+}) => {
+  if (peaks.length === 0) {
+    return peaks;
+  }
+  const startTimeInSeconds = startFrom / fps;
+  const durationInSeconds = durationInFrames / fps * playbackRate;
+  const startPeakIndex = Math.floor(startTimeInSeconds * TARGET_SAMPLE_RATE);
+  const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * TARGET_SAMPLE_RATE);
+  return peaks.subarray(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
+};
+
 // src/components/AudioWaveform.tsx
 import { jsx as jsx209, jsxs as jsxs101 } from "react/jsx-runtime";
+var EMPTY_PEAKS = new Float32Array(0);
+var canRetryCanvasTransfer = (err) => {
+  return err instanceof DOMException && err.name === "InvalidStateError";
+};
+var canUseAudioWaveformWorker = () => {
+  if (typeof Worker === "undefined" || typeof OffscreenCanvas === "undefined" || typeof HTMLCanvasElement === "undefined") {
+    return false;
+  }
+  return "transferControlToOffscreen" in HTMLCanvasElement.prototype;
+};
 var container42 = {
   display: "flex",
   flexDirection: "row",
@@ -23337,11 +23476,41 @@ var errorMessage = {
   opacity: 0.75
 };
 var waveformCanvasStyle = {
-  pointerEvents: "none"
+  pointerEvents: "none",
+  width: "100%",
+  height: "100%"
 };
 var volumeCanvasStyle = {
   position: "absolute"
 };
+var drawLoopedWaveform = ({
+  canvas,
+  peaks,
+  volume,
+  visualizationWidth,
+  loopWidth
+}) => {
+  const h = canvas.height;
+  const w = Math.ceil(visualizationWidth);
+  const targetCanvas = document.createElement("canvas");
+  targetCanvas.width = Math.max(1, Math.ceil(loopWidth));
+  targetCanvas.height = h;
+  drawBars(targetCanvas, peaks, "rgba(255, 255, 255, 0.6)", volume, targetCanvas.width);
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+  const pattern = ctx.createPattern(targetCanvas, "repeat-x");
+  if (!pattern) {
+    return;
+  }
+  pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
+  ctx.clearRect(0, 0, w, h);
+  ctx.fillStyle = pattern;
+  ctx.fillRect(0, 0, w, h);
+};
 var AudioWaveform = ({
   src,
   startFrom,
@@ -23349,10 +23518,13 @@ var AudioWaveform = ({
   visualizationWidth,
   volume,
   doesVolumeChange,
-  playbackRate
+  playbackRate,
+  loopDisplay
 }) => {
   const [peaks, setPeaks] = useState77(null);
   const [error, setError] = useState77(null);
+  const [waveformCanvasKey, setWaveformCanvasKey] = useState77(0);
+  const canUseWorkerPath = useMemo119(() => canUseAudioWaveformWorker(), []);
   const vidConf = Internals55.useUnsafeVideoConfig();
   if (vidConf === null) {
     throw new Error("Expected video config");
@@ -23360,8 +23532,15 @@ var AudioWaveform = ({
   const containerRef = useRef43(null);
   const waveformCanvas = useRef43(null);
   const volumeCanvas = useRef43(null);
+  const waveformWorker = useRef43(null);
+  const hasTransferredCanvas = useRef43(false);
+  const latestRequestId = useRef43(0);
   useEffect72(() => {
+    if (canUseWorkerPath) {
+      return;
+    }
     const controller = new AbortController;
+    setPeaks(null);
     setError(null);
     loadWaveformPeaks(src, controller.signal).then((p) => {
       if (!controller.signal.aborted) {
@@ -23373,30 +23552,127 @@ var AudioWaveform = ({
       }
     });
     return () => controller.abort();
-  }, [src]);
+  }, [canUseWorkerPath, src]);
+  useEffect72(() => {
+    if (!canUseWorkerPath) {
+      return;
+    }
+    const canvasElement = waveformCanvas.current;
+    if (!canvasElement || hasTransferredCanvas.current) {
+      return;
+    }
+    const worker = makeAudioWaveformWorker();
+    waveformWorker.current = worker;
+    worker.addEventListener("message", (event) => {
+      if (event.data.type === "error") {
+        if (event.data.requestId !== latestRequestId.current) {
+          return;
+        }
+        setError(new Error(event.data.message));
+      }
+    });
+    let offscreen;
+    try {
+      offscreen = canvasElement.transferControlToOffscreen();
+    } catch (err) {
+      worker.terminate();
+      waveformWorker.current = null;
+      if (canRetryCanvasTransfer(err)) {
+        setWaveformCanvasKey((key4) => key4 + 1);
+        return;
+      }
+      throw err;
+    }
+    hasTransferredCanvas.current = true;
+    worker.postMessage({ type: "init", canvas: offscreen }, [offscreen]);
+    return () => {
+      worker.postMessage({ type: "dispose" });
+      worker.terminate();
+      waveformWorker.current = null;
+      hasTransferredCanvas.current = false;
+    };
+  }, [canUseWorkerPath, waveformCanvasKey]);
   const portionPeaks = useMemo119(() => {
-    if (!peaks || peaks.length === 0) {
+    if (canUseWorkerPath || !peaks) {
       return null;
     }
-    const startTimeInSeconds = startFrom / vidConf.fps;
-    const durationInSeconds = durationInFrames / vidConf.fps * playbackRate;
-    const startPeakIndex = Math.floor(startTimeInSeconds * TARGET_SAMPLE_RATE);
-    const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * TARGET_SAMPLE_RATE);
-    return peaks.slice(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
-  }, [peaks, startFrom, durationInFrames, vidConf.fps, playbackRate]);
+    return sliceWaveformPeaks({
+      durationInFrames: shouldTileLoopDisplay(loopDisplay) ? loopDisplay.durationInFrames : durationInFrames,
+      fps: vidConf.fps,
+      peaks,
+      playbackRate,
+      startFrom
+    });
+  }, [
+    canUseWorkerPath,
+    durationInFrames,
+    loopDisplay,
+    peaks,
+    playbackRate,
+    startFrom,
+    vidConf.fps
+  ]);
   useEffect72(() => {
     const { current: canvasElement } = waveformCanvas;
     const { current: containerElement } = containerRef;
-    if (!canvasElement || !containerElement || !portionPeaks || portionPeaks.length === 0) {
+    if (!canvasElement || !containerElement) {
       return;
     }
     const h = containerElement.clientHeight;
     const w = Math.ceil(visualizationWidth);
+    const vol = typeof volume === "number" ? volume : 1;
+    if (canUseWorkerPath) {
+      const worker = waveformWorker.current;
+      if (!worker || !hasTransferredCanvas.current) {
+        return;
+      }
+      latestRequestId.current += 1;
+      setError(null);
+      const message = {
+        type: "render",
+        requestId: latestRequestId.current,
+        src,
+        width: w,
+        height: h,
+        volume: vol,
+        startFrom,
+        durationInFrames,
+        fps: vidConf.fps,
+        playbackRate,
+        loopDisplay
+      };
+      worker.postMessage(message);
+      return;
+    }
     canvasElement.width = w;
     canvasElement.height = h;
-    const vol = typeof volume === "number" ? volume : 1;
-    drawBars(canvasElement, portionPeaks, "rgba(255, 255, 255, 0.6)", vol, w);
-  }, [portionPeaks, visualizationWidth, volume]);
+    if (shouldTileLoopDisplay(loopDisplay)) {
+      drawLoopedWaveform({
+        canvas: canvasElement,
+        peaks: portionPeaks ?? EMPTY_PEAKS,
+        volume: vol,
+        visualizationWidth,
+        loopWidth: getLoopDisplayWidth({
+          visualizationWidth,
+          loopDisplay
+        })
+      });
+    } else {
+      drawBars(canvasElement, portionPeaks ?? EMPTY_PEAKS, "rgba(255, 255, 255, 0.6)", vol, w);
+    }
+  }, [
+    canUseWorkerPath,
+    durationInFrames,
+    loopDisplay,
+    playbackRate,
+    portionPeaks,
+    src,
+    startFrom,
+    vidConf.fps,
+    visualizationWidth,
+    volume,
+    waveformCanvasKey
+  ]);
   useEffect72(() => {
     const { current: volumeCanvasElement } = volumeCanvas;
     const { current: containerElement } = containerRef;
@@ -23438,7 +23714,7 @@ var AudioWaveform = ({
       })
     });
   }
-  if (!peaks) {
+  if (!canUseWorkerPath && !peaks) {
     return null;
   }
   return /* @__PURE__ */ jsxs101("div", {
@@ -23448,7 +23724,7 @@ var AudioWaveform = ({
       /* @__PURE__ */ jsx209("canvas", {
         ref: waveformCanvas,
         style: waveformCanvasStyle
-      }),
+      }, waveformCanvasKey),
       /* @__PURE__ */ jsx209("canvas", {
         ref: volumeCanvas,
         style: volumeCanvasStyle
@@ -23471,7 +23747,8 @@ var width = {
   position: "relative"
 };
 var icon4 = {
-  height: 12
+  height: 12,
+  filter: "drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))"
 };
 var Icon = () => /* @__PURE__ */ jsx210("svg", {
   viewBox: "0 0 512 512",
@@ -23481,44 +23758,23 @@ var Icon = () => /* @__PURE__ */ jsx210("svg", {
     d: "M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z"
   })
 });
-var topLine = {
-  top: 0,
-  height: 2,
-  width: 1,
-  background: LIGHT_COLOR
-};
-var bottomLine = {
-  top: 0,
-  height: 2,
+var verticalLine = {
+  height: "100%",
   width: 1,
-  background: LIGHT_COLOR
-};
-var topContainer = {
-  justifyContent: "flex-start",
-  alignItems: "center"
+  background: "rgb(255,255,255, 0.5)"
 };
 var centerContainer = {
   justifyContent: "center",
   alignItems: "center"
 };
-var bottomContainer = {
-  justifyContent: "flex-end",
-  alignItems: "center"
-};
 var LoopedIndicator = () => {
   return /* @__PURE__ */ jsxs102("div", {
     style: width,
     children: [
       /* @__PURE__ */ jsx210(AbsoluteFill3, {
-        style: topContainer,
-        children: /* @__PURE__ */ jsx210("div", {
-          style: topLine
-        })
-      }),
-      /* @__PURE__ */ jsx210(AbsoluteFill3, {
-        style: bottomContainer,
+        style: centerContainer,
         children: /* @__PURE__ */ jsx210("div", {
-          style: bottomLine
+          style: verticalLine
         })
       }),
       /* @__PURE__ */ jsx210(AbsoluteFill3, {
@@ -23990,7 +24246,8 @@ var TimelineVideoInfo = ({
   volume,
   doesVolumeChange,
   premountWidth,
-  postmountWidth
+  postmountWidth,
+  loopDisplay
 }) => {
   const { fps } = useVideoConfig5();
   const ref2 = useRef45(null);
@@ -24013,25 +24270,54 @@ var TimelineVideoInfo = ({
       return;
     }
     current.appendChild(canvas);
+    const loopWidth = getLoopDisplayWidth({
+      visualizationWidth: naturalWidth,
+      loopDisplay
+    });
+    const shouldRepeatVideo = shouldTileLoopDisplay(loopDisplay);
+    const targetCanvas = shouldRepeatVideo ? document.createElement("canvas") : canvas;
+    targetCanvas.width = shouldRepeatVideo ? Math.max(1, Math.ceil(loopWidth)) : canvas.width;
+    targetCanvas.height = canvas.height;
+    const targetCtx = shouldRepeatVideo ? targetCanvas.getContext("2d") : ctx;
+    if (!targetCtx) {
+      current.removeChild(canvas);
+      return;
+    }
+    const repeatTarget = () => {
+      if (!shouldRepeatVideo) {
+        return;
+      }
+      const pattern = ctx.createPattern(targetCanvas, "repeat-x");
+      if (!pattern) {
+        return;
+      }
+      pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = pattern;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    };
     const filledSlots = new Map;
     const fromSeconds = trimBefore / fps;
-    const toSeconds = fromSeconds + durationInFrames * playbackRate / fps;
+    const visibleDurationInFrames = shouldRepeatVideo && loopDisplay ? loopDisplay.durationInFrames : durationInFrames;
+    const toSeconds = fromSeconds + visibleDurationInFrames * playbackRate / fps;
+    const targetWidth = shouldRepeatVideo ? targetCanvas.width : naturalWidth;
     if (aspectRatio.current !== null) {
       ensureSlots({
         filledSlots,
-        naturalWidth,
+        naturalWidth: targetWidth,
         fromSeconds,
         toSeconds,
         aspectRatio: aspectRatio.current
       });
       fillWithCachedFrames({
-        ctx,
-        naturalWidth,
+        ctx: targetCtx,
+        naturalWidth: targetWidth,
         filledSlots,
         src,
         segmentDuration: toSeconds - fromSeconds,
         fromSeconds
       });
+      repeatTarget();
       const unfilled = Array.from(filledSlots.keys()).filter((timestamp) => !filledSlots.get(timestamp));
       if (unfilled.length === 0) {
         return () => {
@@ -24049,7 +24335,7 @@ var TimelineVideoInfo = ({
           filledSlots,
           fromSeconds,
           toSeconds,
-          naturalWidth,
+          naturalWidth: targetWidth,
           aspectRatio: aspectRatio.current
         });
         return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
@@ -24077,17 +24363,18 @@ var TimelineVideoInfo = ({
             filledSlots,
             fromSeconds,
             toSeconds,
-            naturalWidth,
+            naturalWidth: targetWidth,
             aspectRatio: aspectRatio.current
           });
           fillFrameWhereItFits({
-            ctx,
+            ctx: targetCtx,
             filledSlots,
-            visualizationWidth: naturalWidth,
+            visualizationWidth: targetWidth,
             frame: transformed,
             segmentDuration: toSeconds - fromSeconds,
             fromSeconds
           });
+          repeatTarget();
         } catch (e) {
           if (frame2) {
             frame2.close();
@@ -24103,13 +24390,14 @@ var TimelineVideoInfo = ({
         return;
       }
       fillWithCachedFrames({
-        ctx,
-        naturalWidth,
+        ctx: targetCtx,
+        naturalWidth: targetWidth,
         filledSlots,
         src,
         segmentDuration: toSeconds - fromSeconds,
         fromSeconds
       });
+      repeatTarget();
     }).catch((e) => {
       setError(e);
     });
@@ -24121,6 +24409,7 @@ var TimelineVideoInfo = ({
     durationInFrames,
     error,
     fps,
+    loopDisplay,
     naturalWidth,
     playbackRate,
     src,
@@ -24152,7 +24441,8 @@ var TimelineVideoInfo = ({
           durationInFrames,
           volume,
           doesVolumeChange,
-          playbackRate
+          playbackRate,
+          loopDisplay
         })
       })
     ]
@@ -24177,29 +24467,37 @@ var TimelineSequence = ({ s }) => {
 var Inner4 = ({ s, windowWidth }) => {
   const video = Internals56.useVideo();
   const maxMediaDuration = useMaxMediaDuration(s, video?.fps ?? 30);
+  const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
   if (!video) {
     throw new TypeError("Expected video config");
   }
   const frame2 = useCurrentFrame2();
   const relativeFrame = frame2 - s.from;
+  const displayDurationInFrames = s.loopDisplay ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes : s.duration;
   const relativeFrameWithPremount = relativeFrame + (s.premountDisplay ?? 0);
-  const relativeFrameWithPostmount = relativeFrame - s.duration;
+  const relativeFrameWithPostmount = relativeFrame - displayDurationInFrames;
   const roundedFrame = Math.round(relativeFrame * 100) / 100;
-  const isInRange = relativeFrame >= 0 && relativeFrame < s.duration;
-  const isPremounting = relativeFrameWithPremount >= 0 && relativeFrameWithPremount < s.duration && !isInRange;
+  const isInRange = relativeFrame >= 0 && relativeFrame < displayDurationInFrames;
+  const isPremounting = relativeFrameWithPremount >= 0 && relativeFrameWithPremount < displayDurationInFrames && !isInRange;
   const isPostmounting = relativeFrameWithPostmount >= 0 && relativeFrameWithPostmount < (s.postmountDisplay ?? 0) && !isInRange;
   const { marginLeft, width: width2, naturalWidth, premountWidth, postmountWidth } = useMemo121(() => {
     return getTimelineSequenceLayout({
-      durationInFrames: s.loopDisplay ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes : s.duration,
+      durationInFrames: displayDurationInFrames,
       startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
       startFromMedia: s.type === "sequence" || s.type === "image" ? 0 : s.startMediaFrom,
-      maxMediaDuration,
+      maxMediaDuration: effectiveMaxMediaDuration,
       video,
       windowWidth,
       premountDisplay: s.premountDisplay,
       postmountDisplay: s.postmountDisplay
     });
-  }, [maxMediaDuration, s, video, windowWidth]);
+  }, [
+    displayDurationInFrames,
+    effectiveMaxMediaDuration,
+    s,
+    video,
+    windowWidth
+  ]);
   const style11 = useMemo121(() => {
     return {
       background: s.type === "audio" ? AUDIO_GRADIENT : s.type === "video" ? VIDEO_GRADIENT : s.type === "image" ? IMAGE_GRADIENT : BLUE,
@@ -24214,7 +24512,7 @@ var Inner4 = ({ s, windowWidth }) => {
       opacity: isInRange ? 1 : 0.5
     };
   }, [isInRange, marginLeft, s.type, width2]);
-  if (maxMediaDuration === null) {
+  if (maxMediaDuration === null && !s.loopDisplay) {
     return null;
   }
   return /* @__PURE__ */ jsxs105("div", {
@@ -24257,7 +24555,8 @@ var Inner4 = ({ s, windowWidth }) => {
         startFrom: s.startMediaFrom,
         durationInFrames: s.duration,
         volume: s.volume,
-        playbackRate: s.playbackRate
+        playbackRate: s.playbackRate,
+        loopDisplay: s.loopDisplay
       }) : null,
       s.type === "video" ? /* @__PURE__ */ jsx215(TimelineVideoInfo, {
         src: s.src,
@@ -24269,7 +24568,8 @@ var Inner4 = ({ s, windowWidth }) => {
         volume: s.volume,
         doesVolumeChange: s.doesVolumeChange,
         premountWidth: premountWidth ?? 0,
-        postmountWidth: postmountWidth ?? 0
+        postmountWidth: postmountWidth ?? 0,
+        loopDisplay: s.loopDisplay
       }) : null,
       s.type === "image" ? /* @__PURE__ */ jsx215(TimelineImageInfo, {
         src: s.src,