@remotion/timeline-utils 4.0.463 → 4.0.464

package/dist/esm/index.mjs

@@ -284,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,
@@ -661,6 +726,7 @@ export {
   makeAudioWaveformWorker,
   loadWaveformPeaks,
   getTimestampFromFrameDatabaseKey,
+  getScaledImageThumbnailDimensions,
   getLoopDisplayWidth,
   getFrameDatabaseKeyPrefix,
   getDurationOfOneFrame,
@@ -672,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.463",
+	"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.463",
+		"@remotion/eslint-config-internal": "4.0.464",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},