@remotion/timeline-utils 4.0.462 → 4.0.464

package/dist/audio-waveform/load-waveform-peaks.js

@@ -5,6 +5,7 @@ exports.loadWaveformPeaks = loadWaveformPeaks;
 const mediabunny_1 = require("mediabunny");
 const constants_1 = require("./constants");
 Object.defineProperty(exports, "TARGET_SAMPLE_RATE", { enumerable: true, get: function () { return constants_1.TARGET_SAMPLE_RATE; } });
+const trim_audio_sample_before_zero_1 = require("./trim-audio-sample-before-zero");
 const waveform_peak_processor_1 = require("./waveform-peak-processor");
 const DEFAULT_PROGRESS_INTERVAL_IN_MS = 50;
 const peaksCache = new Map();
@@ -55,12 +56,29 @@ async function loadWaveformPeaks(url, signal, options) {
                 sample.close();
                 return new Float32Array(0);
             }
+            const startFrame = (0, trim_audio_sample_before_zero_1.getAudioSampleStartFrameAtTimelineZero)(sample);
+            if (startFrame === null) {
+                sample.close();
+                continue;
+            }
+            const frameCount = sample.numberOfFrames - startFrame;
+            if (frameCount <= 0) {
+                sample.close();
+                continue;
+            }
             const bytesNeeded = sample.allocationSize({
                 format: 'f32',
                 planeIndex: 0,
+                frameOffset: startFrame,
+                frameCount,
             });
             const floats = new Float32Array(bytesNeeded / 4);
-            sample.copyTo(floats, { format: 'f32', planeIndex: 0 });
+            sample.copyTo(floats, {
+                format: 'f32',
+                planeIndex: 0,
+                frameOffset: startFrame,
+                frameCount,
+            });
             const channels = Math.max(1, sample.numberOfChannels);
             sample.close();
             processor.processSampleChunk(floats, channels);

package/dist/audio-waveform/trim-audio-sample-before-zero.d.ts

@@ -0,0 +1,11 @@
+export type AudioSampleTiming = {
+    readonly timestamp: number;
+    readonly numberOfFrames: number;
+    readonly duration: number;
+    readonly sampleRate: number;
+};
+/**
+ * Returns the first frame index to include when building a timeline-aligned waveform.
+ * Returns null when the entire sample ends before timeline t=0.
+ */
+export declare const getAudioSampleStartFrameAtTimelineZero: (sample: AudioSampleTiming) => number | null;

package/dist/audio-waveform/trim-audio-sample-before-zero.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAudioSampleStartFrameAtTimelineZero = void 0;
+/**
+ * Returns the first frame index to include when building a timeline-aligned waveform.
+ * Returns null when the entire sample ends before timeline t=0.
+ */
+const getAudioSampleStartFrameAtTimelineZero = (sample) => {
+    if (sample.timestamp + sample.duration <= 0) {
+        return null;
+    }
+    if (sample.timestamp >= 0) {
+        return 0;
+    }
+    return Math.min(sample.numberOfFrames, Math.ceil(-sample.timestamp * sample.sampleRate));
+};
+exports.getAudioSampleStartFrameAtTimelineZero = getAudioSampleStartFrameAtTimelineZero;

package/dist/esm/audio-waveform-worker.mjs

@@ -86,6 +86,17 @@ import { ALL_FORMATS, AudioSampleSink, Input, UrlSource } from "mediabunny";
 // src/audio-waveform/constants.ts
 var TARGET_SAMPLE_RATE = 100;
 
+// src/audio-waveform/trim-audio-sample-before-zero.ts
+var getAudioSampleStartFrameAtTimelineZero = (sample) => {
+  if (sample.timestamp + sample.duration <= 0) {
+    return null;
+  }
+  if (sample.timestamp >= 0) {
+    return 0;
+  }
+  return Math.min(sample.numberOfFrames, Math.ceil(-sample.timestamp * sample.sampleRate));
+};
+
 // src/audio-waveform/waveform-peak-processor.ts
 var emitWaveformProgress = ({
   completedPeaks,
@@ -217,12 +228,29 @@ async function loadWaveformPeaks(url, signal, options) {
         sample.close();
         return new Float32Array(0);
       }
+      const startFrame = getAudioSampleStartFrameAtTimelineZero(sample);
+      if (startFrame === null) {
+        sample.close();
+        continue;
+      }
+      const frameCount = sample.numberOfFrames - startFrame;
+      if (frameCount <= 0) {
+        sample.close();
+        continue;
+      }
       const bytesNeeded = sample.allocationSize({
         format: "f32",
-        planeIndex: 0
+        planeIndex: 0,
+        frameOffset: startFrame,
+        frameCount
       });
       const floats = new Float32Array(bytesNeeded / 4);
-      sample.copyTo(floats, { format: "f32", planeIndex: 0 });
+      sample.copyTo(floats, {
+        format: "f32",
+        planeIndex: 0,
+        frameOffset: startFrame,
+        frameCount
+      });
       const channels = Math.max(1, sample.numberOfChannels);
       sample.close();
       processor.processSampleChunk(floats, channels);

package/dist/esm/index.mjs

@@ -84,6 +84,17 @@ var drawBars = ({
 // src/audio-waveform/load-waveform-peaks.ts
 import { ALL_FORMATS, AudioSampleSink, Input, UrlSource } from "mediabunny";
 
+// src/audio-waveform/trim-audio-sample-before-zero.ts
+var getAudioSampleStartFrameAtTimelineZero = (sample) => {
+  if (sample.timestamp + sample.duration <= 0) {
+    return null;
+  }
+  if (sample.timestamp >= 0) {
+    return 0;
+  }
+  return Math.min(sample.numberOfFrames, Math.ceil(-sample.timestamp * sample.sampleRate));
+};
+
 // src/audio-waveform/waveform-peak-processor.ts
 var emitWaveformProgress = ({
   completedPeaks,
@@ -215,12 +226,29 @@ async function loadWaveformPeaks(url, signal, options) {
         sample.close();
         return new Float32Array(0);
       }
+      const startFrame = getAudioSampleStartFrameAtTimelineZero(sample);
+      if (startFrame === null) {
+        sample.close();
+        continue;
+      }
+      const frameCount = sample.numberOfFrames - startFrame;
+      if (frameCount <= 0) {
+        sample.close();
+        continue;
+      }
       const bytesNeeded = sample.allocationSize({
         format: "f32",
-        planeIndex: 0
+        planeIndex: 0,
+        frameOffset: startFrame,
+        frameCount
       });
       const floats = new Float32Array(bytesNeeded / 4);
-      sample.copyTo(floats, { format: "f32", planeIndex: 0 });
+      sample.copyTo(floats, {
+        format: "f32",
+        planeIndex: 0,
+        frameOffset: startFrame,
+        frameCount
+      });
       const channels = Math.max(1, sample.numberOfChannels);
       sample.close();
       processor.processSampleChunk(floats, channels);
@@ -256,6 +284,71 @@ var sliceWaveformPeaks = ({
   const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * TARGET_SAMPLE_RATE);
   return peaks.subarray(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
 };
+// src/image-thumbnail/get-scaled-image-thumbnail-dimensions.ts
+var getScaledImageThumbnailDimensions = ({
+  naturalWidth,
+  naturalHeight,
+  canvasHeight
+}) => {
+  if (naturalWidth === 0 || naturalHeight === 0 || canvasHeight === 0) {
+    return {
+      scaledWidth: 0,
+      scaledHeight: 0
+    };
+  }
+  const scale = canvasHeight / naturalHeight;
+  return {
+    scaledWidth: naturalWidth * scale,
+    scaledHeight: canvasHeight
+  };
+};
+
+// src/image-thumbnail/draw-repeating-image-thumbnail.ts
+var createOffscreenCanvas = (width, height) => {
+  if (typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+  }
+  if (typeof OffscreenCanvas !== "undefined") {
+    return new OffscreenCanvas(width, height);
+  }
+  throw new Error("No canvas implementation available");
+};
+var drawRepeatingImageThumbnail = ({
+  canvas,
+  image
+}) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+  const { width, height } = canvas;
+  if (width === 0 || height === 0) {
+    return;
+  }
+  const { scaledWidth, scaledHeight } = getScaledImageThumbnailDimensions({
+    naturalWidth: image.naturalWidth,
+    naturalHeight: image.naturalHeight,
+    canvasHeight: height
+  });
+  if (scaledWidth === 0 || scaledHeight === 0) {
+    return;
+  }
+  const offscreen = createOffscreenCanvas(scaledWidth, scaledHeight);
+  const offCtx = offscreen.getContext("2d");
+  if (!offCtx) {
+    throw new Error("Failed to get offscreen canvas context");
+  }
+  offCtx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
+  const pattern = ctx.createPattern(offscreen, "repeat-x");
+  if (!pattern) {
+    return;
+  }
+  ctx.fillStyle = pattern;
+  ctx.fillRect(0, 0, width, height);
+};
 // src/extract-frames.ts
 import {
   ALL_FORMATS as ALL_FORMATS2,
@@ -633,6 +726,7 @@ export {
   makeAudioWaveformWorker,
   loadWaveformPeaks,
   getTimestampFromFrameDatabaseKey,
+  getScaledImageThumbnailDimensions,
   getLoopDisplayWidth,
   getFrameDatabaseKeyPrefix,
   getDurationOfOneFrame,
@@ -644,6 +738,7 @@ export {
   ensureSlots,
   emitWaveformProgress,
   drawSlot,
+  drawRepeatingImageThumbnail,
   drawBars,
   createWaveformPeakProcessor,
   calculateTimestampSlots,

package/dist/image-thumbnail/draw-repeating-image-thumbnail.d.ts

@@ -0,0 +1,9 @@
+type ImageWithNaturalDimensions = CanvasImageSource & {
+    readonly naturalWidth: number;
+    readonly naturalHeight: number;
+};
+export declare const drawRepeatingImageThumbnail: ({ canvas, image, }: {
+    readonly canvas: HTMLCanvasElement | OffscreenCanvas;
+    readonly image: ImageWithNaturalDimensions;
+}) => void;
+export {};

package/dist/image-thumbnail/draw-repeating-image-thumbnail.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawRepeatingImageThumbnail = void 0;
+const get_scaled_image_thumbnail_dimensions_1 = require("./get-scaled-image-thumbnail-dimensions");
+const createOffscreenCanvas = (width, height) => {
+    if (typeof document !== 'undefined') {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        return canvas;
+    }
+    if (typeof OffscreenCanvas !== 'undefined') {
+        return new OffscreenCanvas(width, height);
+    }
+    throw new Error('No canvas implementation available');
+};
+const drawRepeatingImageThumbnail = ({ canvas, image, }) => {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Failed to get canvas context');
+    }
+    const { width, height } = canvas;
+    if (width === 0 || height === 0) {
+        return;
+    }
+    const { scaledWidth, scaledHeight } = (0, get_scaled_image_thumbnail_dimensions_1.getScaledImageThumbnailDimensions)({
+        naturalWidth: image.naturalWidth,
+        naturalHeight: image.naturalHeight,
+        canvasHeight: height,
+    });
+    if (scaledWidth === 0 || scaledHeight === 0) {
+        return;
+    }
+    const offscreen = createOffscreenCanvas(scaledWidth, scaledHeight);
+    const offCtx = offscreen.getContext('2d');
+    if (!offCtx) {
+        throw new Error('Failed to get offscreen canvas context');
+    }
+    offCtx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
+    const pattern = ctx.createPattern(offscreen, 'repeat-x');
+    if (!pattern) {
+        return;
+    }
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, width, height);
+};
+exports.drawRepeatingImageThumbnail = drawRepeatingImageThumbnail;

package/dist/image-thumbnail/get-scaled-image-thumbnail-dimensions.d.ts

@@ -0,0 +1,8 @@
+export declare const getScaledImageThumbnailDimensions: ({ naturalWidth, naturalHeight, canvasHeight, }: {
+    readonly naturalWidth: number;
+    readonly naturalHeight: number;
+    readonly canvasHeight: number;
+}) => {
+    scaledWidth: number;
+    scaledHeight: number;
+};

package/dist/image-thumbnail/get-scaled-image-thumbnail-dimensions.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScaledImageThumbnailDimensions = void 0;
+const getScaledImageThumbnailDimensions = ({ naturalWidth, naturalHeight, canvasHeight, }) => {
+    if (naturalWidth === 0 || naturalHeight === 0 || canvasHeight === 0) {
+        return {
+            scaledWidth: 0,
+            scaledHeight: 0,
+        };
+    }
+    const scale = canvasHeight / naturalHeight;
+    return {
+        scaledWidth: naturalWidth * scale,
+        scaledHeight: canvasHeight,
+    };
+};
+exports.getScaledImageThumbnailDimensions = getScaledImageThumbnailDimensions;

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export { loadWaveformPeaks } from './audio-waveform/load-waveform-peaks';
 export { makeAudioWaveformWorker } from './audio-waveform/make-audio-waveform-worker';
 export { sliceWaveformPeaks } from './audio-waveform/slice-waveform-peaks';
 export { createWaveformPeakProcessor, emitWaveformProgress, } from './audio-waveform/waveform-peak-processor';
+export { drawRepeatingImageThumbnail } from './image-thumbnail/draw-repeating-image-thumbnail';
+export { getScaledImageThumbnailDimensions } from './image-thumbnail/get-scaled-image-thumbnail-dimensions';
 export { extractFrames } from './extract-frames';
 export type { ExtractFramesProps, ExtractFramesTimestampsInSecondsFn, } from './extract-frames';
 export { addFrameToCache, aspectRatioCache, frameDatabase, getAspectRatioFromCache, getFrameDatabaseKeyPrefix, getTimestampFromFrameDatabaseKey, makeFrameDatabaseKey, } from './frame-database';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resizeVideoFrame = exports.WEBCODECS_TIMESCALE = exports.getDurationOfOneFrame = exports.fillWithCachedFrames = exports.fillFrameWhereItFits = exports.ensureSlots = exports.drawSlot = exports.calculateTimestampSlots = exports.shouldTileLoopDisplay = exports.getLoopDisplayWidth = exports.makeFrameDatabaseKey = exports.getTimestampFromFrameDatabaseKey = exports.getFrameDatabaseKeyPrefix = exports.getAspectRatioFromCache = exports.frameDatabase = exports.aspectRatioCache = exports.addFrameToCache = exports.extractFrames = exports.emitWaveformProgress = exports.createWaveformPeakProcessor = exports.sliceWaveformPeaks = exports.makeAudioWaveformWorker = exports.loadWaveformPeaks = exports.drawBars = exports.TARGET_SAMPLE_RATE = void 0;
+exports.resizeVideoFrame = exports.WEBCODECS_TIMESCALE = exports.getDurationOfOneFrame = exports.fillWithCachedFrames = exports.fillFrameWhereItFits = exports.ensureSlots = exports.drawSlot = exports.calculateTimestampSlots = exports.shouldTileLoopDisplay = exports.getLoopDisplayWidth = exports.makeFrameDatabaseKey = exports.getTimestampFromFrameDatabaseKey = exports.getFrameDatabaseKeyPrefix = exports.getAspectRatioFromCache = exports.frameDatabase = exports.aspectRatioCache = exports.addFrameToCache = exports.extractFrames = exports.getScaledImageThumbnailDimensions = exports.drawRepeatingImageThumbnail = exports.emitWaveformProgress = exports.createWaveformPeakProcessor = exports.sliceWaveformPeaks = exports.makeAudioWaveformWorker = exports.loadWaveformPeaks = exports.drawBars = exports.TARGET_SAMPLE_RATE = void 0;
 const constants_1 = require("./audio-waveform/constants");
 Object.defineProperty(exports, "TARGET_SAMPLE_RATE", { enumerable: true, get: function () { return constants_1.TARGET_SAMPLE_RATE; } });
 const draw_peaks_1 = require("./audio-waveform/draw-peaks");
@@ -14,6 +14,10 @@ Object.defineProperty(exports, "sliceWaveformPeaks", { enumerable: true, get: fu
 const waveform_peak_processor_1 = require("./audio-waveform/waveform-peak-processor");
 Object.defineProperty(exports, "createWaveformPeakProcessor", { enumerable: true, get: function () { return waveform_peak_processor_1.createWaveformPeakProcessor; } });
 Object.defineProperty(exports, "emitWaveformProgress", { enumerable: true, get: function () { return waveform_peak_processor_1.emitWaveformProgress; } });
+const draw_repeating_image_thumbnail_1 = require("./image-thumbnail/draw-repeating-image-thumbnail");
+Object.defineProperty(exports, "drawRepeatingImageThumbnail", { enumerable: true, get: function () { return draw_repeating_image_thumbnail_1.drawRepeatingImageThumbnail; } });
+const get_scaled_image_thumbnail_dimensions_1 = require("./image-thumbnail/get-scaled-image-thumbnail-dimensions");
+Object.defineProperty(exports, "getScaledImageThumbnailDimensions", { enumerable: true, get: function () { return get_scaled_image_thumbnail_dimensions_1.getScaledImageThumbnailDimensions; } });
 const extract_frames_1 = require("./extract-frames");
 Object.defineProperty(exports, "extractFrames", { enumerable: true, get: function () { return extract_frames_1.extractFrames; } });
 const frame_database_1 = require("./frame-database");

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/timeline-utils"
 	},
 	"name": "@remotion/timeline-utils",
-	"version": "4.0.462",
+	"version": "4.0.464",
 	"description": "Internal utilities for rendering Remotion timelines",
 	"main": "dist/index.js",
 	"scripts": {
@@ -25,7 +25,7 @@
 	},
 	"devDependencies": {
 		"@mediabunny/server": "1.45.0",
-		"@remotion/eslint-config-internal": "4.0.462",
+		"@remotion/eslint-config-internal": "4.0.464",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},