@remotion/timeline-utils 4.0.529 → 4.0.531

package/dist/audio-waveform/draw-peaks.d.ts

@@ -1,8 +1,9 @@
 export type WaveformVolume = number | readonly number[];
-export declare const drawBars: ({ canvas, color, peaks, volume, width, }: {
+export declare const drawBars: ({ canvas, color, peaks, volume, width, horizontalOffset, }: {
     readonly canvas: HTMLCanvasElement | OffscreenCanvas;
     readonly peaks: Float32Array<ArrayBufferLike>;
     readonly color: string;
     readonly volume: WaveformVolume;
     readonly width: number;
+    readonly horizontalOffset: number;
 }) => void;

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

@@ -4,6 +4,7 @@ exports.drawBars = void 0;
 const parse_color_1 = require("./parse-color");
 const CLIPPING_COLOR = '#FF7F50';
 const WAVEFORM_HEIGHT_SCALE = 0.8;
+const MIN_VISIBLE_DECIBELS = -37;
 const getVolumeAtBar = ({ barIndex, numBars, volume, }) => {
     var _a;
     if (typeof volume === 'number') {
@@ -18,7 +19,7 @@ const getVolumeAtBar = ({ barIndex, numBars, volume, }) => {
     const volumeIndex = Math.round((barIndex / (numBars - 1)) * (volume.length - 1));
     return (_a = volume[volumeIndex]) !== null && _a !== void 0 ? _a : 1;
 };
-const drawBars = ({ canvas, color, peaks, volume, width, }) => {
+const drawBars = ({ canvas, color, peaks, volume, width, horizontalOffset, }) => {
     const ctx = canvas.getContext('2d');
     if (!ctx) {
         throw new Error('Failed to get canvas context');
@@ -29,7 +30,7 @@ const drawBars = ({ canvas, color, peaks, volume, width, }) => {
     // `createImageData(0, h)` / `(w, 0)` throws a DOMException, which
     // surfaces in Studio's console for compositions with many audio
     // sequences — some segments are 0 px wide at certain zoom levels.
-    if (w === 0 || height === 0) {
+    if (w === 0 || height === 0 || width <= 0) {
         return;
     }
     ctx.clearRect(0, 0, w, height);
@@ -39,15 +40,17 @@ const drawBars = ({ canvas, color, peaks, volume, width, }) => {
     const { data } = imageData;
     const numBars = width;
     const fullScaleHalfBar = (height * WAVEFORM_HEIGHT_SCALE) / 2;
-    for (let barIndex = 0; barIndex < numBars; barIndex++) {
-        const x = barIndex;
-        if (x >= w)
-            break;
+    for (let x = 0; x < w; x++) {
+        // The canvas may start before its fractionally positioned container so its
+        // bitmap stays device-pixel aligned. Sample from the exact container origin.
+        const barIndex = Math.max(0, Math.min(numBars - Number.EPSILON * Math.max(1, numBars), x - horizontalOffset));
         const peakIndex = Math.floor((barIndex / numBars) * peaks.length);
         const peak = peaks[peakIndex] || 0;
         const barVolume = getVolumeAtBar({ barIndex, numBars, volume });
         const scaledPeak = peak * barVolume;
-        const halfBar = Math.max(0, Math.min(height / 2, scaledPeak * fullScaleHalfBar));
+        const decibelPeak = scaledPeak <= 0 ? MIN_VISIBLE_DECIBELS : 20 * Math.log10(scaledPeak);
+        const visualPeak = Math.max(0, (decibelPeak - MIN_VISIBLE_DECIBELS) / -MIN_VISIBLE_DECIBELS);
+        const halfBar = Math.max(0, Math.min(height / 2, visualPeak * fullScaleHalfBar));
         if (halfBar === 0)
             continue;
         const mid = height / 2;

package/dist/device-pixel-alignment.d.ts

@@ -0,0 +1,14 @@
+export declare const getDevicePixelAlignedCanvasLayout: ({ cssWidth, cssHeight, containerLeft, devicePixelRatio, }: {
+    readonly cssWidth: number;
+    readonly cssHeight: number;
+    readonly containerLeft: number;
+    readonly devicePixelRatio: number;
+}) => {
+    height: number;
+    horizontalOffset: number;
+    width: number;
+};
+export declare const snapCanvasPositionToDevicePixel: ({ position, horizontalOffset, }: {
+    readonly position: number;
+    readonly horizontalOffset: number;
+}) => number;

package/dist/device-pixel-alignment.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.snapCanvasPositionToDevicePixel = exports.getDevicePixelAlignedCanvasLayout = void 0;
+const getDevicePixelAlignedCanvasLayout = ({ cssWidth, cssHeight, containerLeft, devicePixelRatio, }) => {
+    const containerLeftInPixels = containerLeft * devicePixelRatio;
+    const horizontalOffset = cssWidth === 0
+        ? 0
+        : containerLeftInPixels - Math.floor(containerLeftInPixels);
+    return {
+        height: Math.ceil(cssHeight * devicePixelRatio),
+        horizontalOffset,
+        width: Math.ceil(cssWidth * devicePixelRatio + horizontalOffset),
+    };
+};
+exports.getDevicePixelAlignedCanvasLayout = getDevicePixelAlignedCanvasLayout;
+const snapCanvasPositionToDevicePixel = ({ position, horizontalOffset, }) => {
+    return Math.floor(position + horizontalOffset) - horizontalOffset;
+};
+exports.snapCanvasPositionToDevicePixel = snapCanvasPositionToDevicePixel;

package/dist/esm/index.mjs

@@ -18,6 +18,7 @@ var parseColor = (color) => {
 // src/audio-waveform/draw-peaks.ts
 var CLIPPING_COLOR = "#FF7F50";
 var WAVEFORM_HEIGHT_SCALE = 0.8;
+var MIN_VISIBLE_DECIBELS = -37;
 var getVolumeAtBar = ({
   barIndex,
   numBars,
@@ -40,7 +41,8 @@ var drawBars = ({
   color,
   peaks,
   volume,
-  width
+  width,
+  horizontalOffset
 }) => {
   const ctx = canvas.getContext("2d");
   if (!ctx) {
@@ -48,7 +50,7 @@ var drawBars = ({
   }
   const { height } = canvas;
   const w = canvas.width;
-  if (w === 0 || height === 0) {
+  if (w === 0 || height === 0 || width <= 0) {
     return;
   }
   ctx.clearRect(0, 0, w, height);
@@ -58,15 +60,15 @@ var drawBars = ({
   const { data } = imageData;
   const numBars = width;
   const fullScaleHalfBar = height * WAVEFORM_HEIGHT_SCALE / 2;
-  for (let barIndex = 0;barIndex < numBars; barIndex++) {
-    const x = barIndex;
-    if (x >= w)
-      break;
+  for (let x = 0;x < w; x++) {
+    const barIndex = Math.max(0, Math.min(numBars - Number.EPSILON * Math.max(1, numBars), x - horizontalOffset));
     const peakIndex = Math.floor(barIndex / numBars * peaks.length);
     const peak = peaks[peakIndex] || 0;
     const barVolume = getVolumeAtBar({ barIndex, numBars, volume });
     const scaledPeak = peak * barVolume;
-    const halfBar = Math.max(0, Math.min(height / 2, scaledPeak * fullScaleHalfBar));
+    const decibelPeak = scaledPeak <= 0 ? MIN_VISIBLE_DECIBELS : 20 * Math.log10(scaledPeak);
+    const visualPeak = Math.max(0, (decibelPeak - MIN_VISIBLE_DECIBELS) / -MIN_VISIBLE_DECIBELS);
+    const halfBar = Math.max(0, Math.min(height / 2, visualPeak * fullScaleHalfBar));
     if (halfBar === 0)
       continue;
     const mid = height / 2;
@@ -618,6 +620,27 @@ var clampTimestampsToDuration = ({
   const lastTimestamp = Math.max(0, durationInSeconds - LAST_FRAME_EPSILON_IN_SECONDS);
   return timestamps.map((timestamp) => Math.min(timestamp, lastTimestamp));
 };
+// src/device-pixel-alignment.ts
+var getDevicePixelAlignedCanvasLayout = ({
+  cssWidth,
+  cssHeight,
+  containerLeft,
+  devicePixelRatio
+}) => {
+  const containerLeftInPixels = containerLeft * devicePixelRatio;
+  const horizontalOffset = cssWidth === 0 ? 0 : containerLeftInPixels - Math.floor(containerLeftInPixels);
+  return {
+    height: Math.ceil(cssHeight * devicePixelRatio),
+    horizontalOffset,
+    width: Math.ceil(cssWidth * devicePixelRatio + horizontalOffset)
+  };
+};
+var snapCanvasPositionToDevicePixel = ({
+  position,
+  horizontalOffset
+}) => {
+  return Math.floor(position + horizontalOffset) - horizontalOffset;
+};
 // src/extract-frames.ts
 import {
   ALL_FORMATS as ALL_FORMATS2,
@@ -855,7 +878,8 @@ var drawSlot = ({
   segmentDuration,
   fromSeconds,
   devicePixelRatio,
-  frameHeight
+  frameHeight,
+  horizontalOffset
 }) => {
   const durationOfOneFrame = getDurationOfOneFrame({
     visualizationWidth,
@@ -866,8 +890,17 @@ var drawSlot = ({
   const relativeTimestamp = timestamp - fromSeconds * WEBCODECS_TIMESCALE;
   const frameIndex = relativeTimestamp / durationOfOneFrame;
   const thumbnailWidth = frame.displayWidth / devicePixelRatio;
-  const left = frameIndex * thumbnailWidth;
-  ctx.drawImage(frame, left, 0, thumbnailWidth, frame.displayHeight / devicePixelRatio);
+  const idealLeft = frameIndex * thumbnailWidth;
+  const idealRight = idealLeft + thumbnailWidth;
+  const left = snapCanvasPositionToDevicePixel({
+    horizontalOffset,
+    position: idealLeft
+  });
+  const right = snapCanvasPositionToDevicePixel({
+    horizontalOffset,
+    position: idealRight
+  });
+  ctx.drawImage(frame, left, 0, right - left, frame.displayHeight / devicePixelRatio);
   filledSlots.set(timestamp, frame.timestamp);
 };
 var fillWithCachedFrames = ({
@@ -878,7 +911,8 @@ var fillWithCachedFrames = ({
   segmentDuration,
   fromSeconds,
   devicePixelRatio,
-  frameHeight
+  frameHeight,
+  horizontalOffset
 }) => {
   const prefix = getFrameDatabaseKeyPrefix(src);
   const keys = Array.from(frameDatabase.keys()).filter((k) => k.startsWith(prefix));
@@ -914,7 +948,8 @@ var fillWithCachedFrames = ({
       segmentDuration,
       fromSeconds,
       devicePixelRatio,
-      frameHeight
+      frameHeight,
+      horizontalOffset
     });
   }
 };
@@ -926,7 +961,8 @@ var fillFrameWhereItFits = ({
   segmentDuration,
   fromSeconds,
   devicePixelRatio,
-  frameHeight
+  frameHeight,
+  horizontalOffset
 }) => {
   const slots = Array.from(filledSlots.keys());
   for (let i = 0;i < slots.length; i++) {
@@ -947,7 +983,8 @@ var fillFrameWhereItFits = ({
       segmentDuration,
       fromSeconds,
       devicePixelRatio,
-      frameHeight
+      frameHeight,
+      horizontalOffset
     });
   }
 };
@@ -1009,9 +1046,11 @@ var renderFrameStripToCanvas = async ({
   width,
   frameHeight,
   devicePixelRatio,
+  horizontalOffset,
   signal
 }) => {
-  const naturalWidth = Math.max(1, Math.ceil(width));
+  const drawingWidth = Math.max(1, width);
+  const naturalWidth = Math.max(1, Math.ceil(width + horizontalOffset));
   const naturalHeight = Math.max(1, Math.ceil(frameHeight));
   const segmentDuration = toSeconds - fromSeconds;
   canvas.width = naturalWidth;
@@ -1021,12 +1060,13 @@ var renderFrameStripToCanvas = async ({
   }
   const ctx = getContext(canvas);
   ctx.clearRect(0, 0, naturalWidth, naturalHeight);
+  ctx.setTransform(1, 0, 0, 1, horizontalOffset, 0);
   const filledSlots = new Map;
   let aspectRatio = getAspectRatioFromCache(src);
   if (aspectRatio !== null) {
     ensureSlots({
       filledSlots,
-      naturalWidth,
+      naturalWidth: drawingWidth,
       fromSeconds,
       toSeconds,
       aspectRatio,
@@ -1034,13 +1074,14 @@ var renderFrameStripToCanvas = async ({
     });
     fillWithCachedFrames({
       ctx,
-      naturalWidth,
+      naturalWidth: drawingWidth,
       filledSlots,
       src,
       segmentDuration,
       fromSeconds,
       devicePixelRatio,
-      frameHeight
+      frameHeight,
+      horizontalOffset
     });
     const hasUnfilledSlots = Array.from(filledSlots.values()).some((value) => value === undefined);
     if (!hasUnfilledSlots) {
@@ -1055,7 +1096,7 @@ var renderFrameStripToCanvas = async ({
       aspectRatioCache.set(src, aspectRatio);
       ensureSlots({
         filledSlots,
-        naturalWidth,
+        naturalWidth: drawingWidth,
         fromSeconds,
         toSeconds,
         aspectRatio,
@@ -1079,7 +1120,7 @@ var renderFrameStripToCanvas = async ({
         }
         ensureSlots({
           filledSlots,
-          naturalWidth,
+          naturalWidth: drawingWidth,
           fromSeconds,
           toSeconds,
           aspectRatio,
@@ -1088,12 +1129,13 @@ var renderFrameStripToCanvas = async ({
         fillFrameWhereItFits({
           ctx,
           filledSlots,
-          visualizationWidth: naturalWidth,
+          visualizationWidth: drawingWidth,
           frame: transformed,
           segmentDuration,
           fromSeconds,
           devicePixelRatio,
-          frameHeight
+          frameHeight,
+          horizontalOffset
         });
       } catch (e) {
         if (frame) {
@@ -1110,13 +1152,14 @@ var renderFrameStripToCanvas = async ({
   }
   fillWithCachedFrames({
     ctx,
-    naturalWidth,
+    naturalWidth: drawingWidth,
     filledSlots,
     src,
     segmentDuration,
     fromSeconds,
     devicePixelRatio,
-    frameHeight
+    frameHeight,
+    horizontalOffset
   });
 };
 // src/format-average-audio-volume.ts
@@ -1128,6 +1171,7 @@ var formatAverageAudioVolume = (volume) => {
 };
 export {
   subscribeToWaveformPeaks,
+  snapCanvasPositionToDevicePixel,
   sliceWaveformPeaks,
   sliceVisibleWaveformPeaks,
   shouldTileLoopDisplay,
@@ -1141,6 +1185,7 @@ export {
   getLoopDisplaySegments,
   getFrameDatabaseKeyPrefix,
   getDurationOfOneFrame,
+  getDevicePixelAlignedCanvasLayout,
   getAspectRatioFromCache,
   frameDatabase,
   formatAverageAudioVolume,

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

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

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

@@ -0,0 +1,48 @@
+"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, offsetInPixels = 0, }) => {
+    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;
+    }
+    pattern.setTransform(new DOMMatrix().translate(-offsetInPixels, 0));
+    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

@@ -8,6 +8,7 @@ export { subscribeToWaveformPeaks } from './audio-waveform/subscribe-to-waveform
 export { sliceWaveformPeaks } from './audio-waveform/slice-waveform-peaks';
 export { createWaveformPeakProcessor, emitWaveformProgress, } from './audio-waveform/waveform-peak-processor';
 export { clampTimestampsToDuration } from './clamp-timestamps-to-duration';
+export { getDevicePixelAlignedCanvasLayout, snapCanvasPositionToDevicePixel, } from './device-pixel-alignment';
 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.formatAverageAudioVolume = exports.resizeVideoFrame = exports.renderFrameStripToCanvas = exports.getDurationOfOneFrame = exports.fillWithCachedFrames = exports.fillFrameWhereItFits = exports.ensureSlots = exports.drawSlot = exports.calculateTimestampSlots = exports.WEBCODECS_TIMESCALE = exports.shouldTileLoopDisplay = exports.getLoopDisplayWidth = exports.getLoopDisplaySegments = exports.makeFrameDatabaseKey = exports.getTimestampFromFrameDatabaseKey = exports.getFrameDatabaseKeyPrefix = exports.getAspectRatioFromCache = exports.frameDatabase = exports.aspectRatioCache = exports.addFrameToCache = exports.extractFrames = exports.clampTimestampsToDuration = exports.emitWaveformProgress = exports.createWaveformPeakProcessor = exports.sliceWaveformPeaks = exports.subscribeToWaveformPeaks = exports.sliceVisibleWaveformPeaks = exports.loadWaveformPeaks = exports.getVisibleWaveformVolume = exports.drawBars = exports.TARGET_SAMPLE_RATE = void 0;
+exports.formatAverageAudioVolume = exports.resizeVideoFrame = exports.renderFrameStripToCanvas = exports.getDurationOfOneFrame = exports.fillWithCachedFrames = exports.fillFrameWhereItFits = exports.ensureSlots = exports.drawSlot = exports.calculateTimestampSlots = exports.WEBCODECS_TIMESCALE = exports.shouldTileLoopDisplay = exports.getLoopDisplayWidth = exports.getLoopDisplaySegments = exports.makeFrameDatabaseKey = exports.getTimestampFromFrameDatabaseKey = exports.getFrameDatabaseKeyPrefix = exports.getAspectRatioFromCache = exports.frameDatabase = exports.aspectRatioCache = exports.addFrameToCache = exports.extractFrames = exports.snapCanvasPositionToDevicePixel = exports.getDevicePixelAlignedCanvasLayout = exports.clampTimestampsToDuration = exports.emitWaveformProgress = exports.createWaveformPeakProcessor = exports.sliceWaveformPeaks = exports.subscribeToWaveformPeaks = exports.sliceVisibleWaveformPeaks = exports.loadWaveformPeaks = exports.getVisibleWaveformVolume = 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");
@@ -20,6 +20,9 @@ Object.defineProperty(exports, "createWaveformPeakProcessor", { enumerable: true
 Object.defineProperty(exports, "emitWaveformProgress", { enumerable: true, get: function () { return waveform_peak_processor_1.emitWaveformProgress; } });
 const clamp_timestamps_to_duration_1 = require("./clamp-timestamps-to-duration");
 Object.defineProperty(exports, "clampTimestampsToDuration", { enumerable: true, get: function () { return clamp_timestamps_to_duration_1.clampTimestampsToDuration; } });
+const device_pixel_alignment_1 = require("./device-pixel-alignment");
+Object.defineProperty(exports, "getDevicePixelAlignedCanvasLayout", { enumerable: true, get: function () { return device_pixel_alignment_1.getDevicePixelAlignedCanvasLayout; } });
+Object.defineProperty(exports, "snapCanvasPositionToDevicePixel", { enumerable: true, get: function () { return device_pixel_alignment_1.snapCanvasPositionToDevicePixel; } });
 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/dist/render-frame-strip-to-canvas.d.ts

@@ -7,7 +7,8 @@ export type RenderFrameStripToCanvasOptions = {
     readonly width: number;
     readonly frameHeight: number;
     readonly devicePixelRatio: number;
+    readonly horizontalOffset: number;
     readonly signal?: AbortSignal;
 };
-export declare const renderFrameStripToCanvas: ({ canvas, src, fromSeconds, toSeconds, width, frameHeight, devicePixelRatio, signal, }: RenderFrameStripToCanvasOptions) => Promise<void>;
+export declare const renderFrameStripToCanvas: ({ canvas, src, fromSeconds, toSeconds, width, frameHeight, devicePixelRatio, horizontalOffset, signal, }: RenderFrameStripToCanvasOptions) => Promise<void>;
 export {};

package/dist/render-frame-strip-to-canvas.js

@@ -12,8 +12,9 @@ const getContext = (canvas) => {
     }
     return ctx;
 };
-const renderFrameStripToCanvas = async ({ canvas, src, fromSeconds, toSeconds, width, frameHeight, devicePixelRatio, signal, }) => {
-    const naturalWidth = Math.max(1, Math.ceil(width));
+const renderFrameStripToCanvas = async ({ canvas, src, fromSeconds, toSeconds, width, frameHeight, devicePixelRatio, horizontalOffset, signal, }) => {
+    const drawingWidth = Math.max(1, width);
+    const naturalWidth = Math.max(1, Math.ceil(width + horizontalOffset));
     const naturalHeight = Math.max(1, Math.ceil(frameHeight));
     const segmentDuration = toSeconds - fromSeconds;
     canvas.width = naturalWidth;
@@ -23,12 +24,13 @@ const renderFrameStripToCanvas = async ({ canvas, src, fromSeconds, toSeconds, w
     }
     const ctx = getContext(canvas);
     ctx.clearRect(0, 0, naturalWidth, naturalHeight);
+    ctx.setTransform(1, 0, 0, 1, horizontalOffset, 0);
     const filledSlots = new Map();
     let aspectRatio = (0, frame_database_1.getAspectRatioFromCache)(src);
     if (aspectRatio !== null) {
         (0, render_frame_strip_1.ensureSlots)({
             filledSlots,
-            naturalWidth,
+            naturalWidth: drawingWidth,
             fromSeconds,
             toSeconds,
             aspectRatio,
@@ -36,13 +38,14 @@ const renderFrameStripToCanvas = async ({ canvas, src, fromSeconds, toSeconds, w
         });
         (0, render_frame_strip_1.fillWithCachedFrames)({
             ctx,
-            naturalWidth,
+            naturalWidth: drawingWidth,
             filledSlots,
             src,
             segmentDuration,
             fromSeconds,
             devicePixelRatio,
             frameHeight,
+            horizontalOffset,
         });
         const hasUnfilledSlots = Array.from(filledSlots.values()).some((value) => value === undefined);
         if (!hasUnfilledSlots) {
@@ -57,7 +60,7 @@ const renderFrameStripToCanvas = async ({ canvas, src, fromSeconds, toSeconds, w
             frame_database_1.aspectRatioCache.set(src, aspectRatio);
             (0, render_frame_strip_1.ensureSlots)({
                 filledSlots,
-                naturalWidth,
+                naturalWidth: drawingWidth,
                 fromSeconds,
                 toSeconds,
                 aspectRatio,
@@ -81,7 +84,7 @@ const renderFrameStripToCanvas = async ({ canvas, src, fromSeconds, toSeconds, w
                 }
                 (0, render_frame_strip_1.ensureSlots)({
                     filledSlots,
-                    naturalWidth,
+                    naturalWidth: drawingWidth,
                     fromSeconds,
                     toSeconds,
                     aspectRatio,
@@ -90,12 +93,13 @@ const renderFrameStripToCanvas = async ({ canvas, src, fromSeconds, toSeconds, w
                 (0, render_frame_strip_1.fillFrameWhereItFits)({
                     ctx,
                     filledSlots,
-                    visualizationWidth: naturalWidth,
+                    visualizationWidth: drawingWidth,
                     frame: transformed,
                     segmentDuration,
                     fromSeconds,
                     devicePixelRatio,
                     frameHeight,
+                    horizontalOffset,
                 });
             }
             catch (e) {
@@ -114,13 +118,14 @@ const renderFrameStripToCanvas = async ({ canvas, src, fromSeconds, toSeconds, w
     }
     (0, render_frame_strip_1.fillWithCachedFrames)({
         ctx,
-        naturalWidth,
+        naturalWidth: drawingWidth,
         filledSlots,
         src,
         segmentDuration,
         fromSeconds,
         devicePixelRatio,
         frameHeight,
+        horizontalOffset,
     });
 };
 exports.renderFrameStripToCanvas = renderFrameStripToCanvas;

package/dist/render-frame-strip.d.ts

@@ -20,7 +20,7 @@ export declare const ensureSlots: ({ filledSlots, naturalWidth, fromSeconds, toS
     aspectRatio: number;
     frameHeight: number;
 }) => void;
-export declare const drawSlot: ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, }: {
+export declare const drawSlot: ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, horizontalOffset, }: {
     frame: VideoFrame;
     ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
     filledSlots: Map<number, number | undefined>;
@@ -30,8 +30,9 @@ export declare const drawSlot: ({ frame, ctx, filledSlots, visualizationWidth, t
     fromSeconds: number;
     devicePixelRatio: number;
     frameHeight: number;
+    horizontalOffset: number;
 }) => void;
-export declare const fillWithCachedFrames: ({ ctx, naturalWidth, filledSlots, src, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, }: {
+export declare const fillWithCachedFrames: ({ ctx, naturalWidth, filledSlots, src, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, horizontalOffset, }: {
     ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
     naturalWidth: number;
     filledSlots: Map<number, number | undefined>;
@@ -40,8 +41,9 @@ export declare const fillWithCachedFrames: ({ ctx, naturalWidth, filledSlots, sr
     fromSeconds: number;
     devicePixelRatio: number;
     frameHeight: number;
+    horizontalOffset: number;
 }) => void;
-export declare const fillFrameWhereItFits: ({ frame, filledSlots, ctx, visualizationWidth, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, }: {
+export declare const fillFrameWhereItFits: ({ frame, filledSlots, ctx, visualizationWidth, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, horizontalOffset, }: {
     frame: VideoFrame;
     filledSlots: Map<number, number | undefined>;
     ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
@@ -50,4 +52,5 @@ export declare const fillFrameWhereItFits: ({ frame, filledSlots, ctx, visualiza
     fromSeconds: number;
     devicePixelRatio: number;
     frameHeight: number;
+    horizontalOffset: number;
 }) => void;

package/dist/render-frame-strip.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fillFrameWhereItFits = exports.fillWithCachedFrames = exports.drawSlot = exports.ensureSlots = exports.calculateTimestampSlots = exports.getDurationOfOneFrame = exports.WEBCODECS_TIMESCALE = void 0;
+const device_pixel_alignment_1 = require("./device-pixel-alignment");
 const frame_database_1 = require("./frame-database");
 exports.WEBCODECS_TIMESCALE = 1000000;
 const MAX_TIME_DEVIATION = exports.WEBCODECS_TIMESCALE * 0.05;
@@ -50,7 +51,7 @@ const ensureSlots = ({ filledSlots, naturalWidth, fromSeconds, toSeconds, aspect
     }
 };
 exports.ensureSlots = ensureSlots;
-const drawSlot = ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, }) => {
+const drawSlot = ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, horizontalOffset, }) => {
     const durationOfOneFrame = (0, exports.getDurationOfOneFrame)({
         visualizationWidth,
         aspectRatio: frame.displayWidth / frame.displayHeight,
@@ -60,12 +61,23 @@ const drawSlot = ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segm
     const relativeTimestamp = timestamp - fromSeconds * exports.WEBCODECS_TIMESCALE;
     const frameIndex = relativeTimestamp / durationOfOneFrame;
     const thumbnailWidth = frame.displayWidth / devicePixelRatio;
-    const left = frameIndex * thumbnailWidth;
-    ctx.drawImage(frame, left, 0, thumbnailWidth, frame.displayHeight / devicePixelRatio);
+    const idealLeft = frameIndex * thumbnailWidth;
+    const idealRight = idealLeft + thumbnailWidth;
+    // When the canvas is aligned to the device-pixel grid, use the same absolute
+    // grid for both edges so adjacent thumbnails neither shimmer nor leave seams.
+    const left = (0, device_pixel_alignment_1.snapCanvasPositionToDevicePixel)({
+        horizontalOffset,
+        position: idealLeft,
+    });
+    const right = (0, device_pixel_alignment_1.snapCanvasPositionToDevicePixel)({
+        horizontalOffset,
+        position: idealRight,
+    });
+    ctx.drawImage(frame, left, 0, right - left, frame.displayHeight / devicePixelRatio);
     filledSlots.set(timestamp, frame.timestamp);
 };
 exports.drawSlot = drawSlot;
-const fillWithCachedFrames = ({ ctx, naturalWidth, filledSlots, src, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, }) => {
+const fillWithCachedFrames = ({ ctx, naturalWidth, filledSlots, src, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, horizontalOffset, }) => {
     const prefix = (0, frame_database_1.getFrameDatabaseKeyPrefix)(src);
     const keys = Array.from(frame_database_1.frameDatabase.keys()).filter((k) => k.startsWith(prefix));
     const targets = Array.from(filledSlots.keys());
@@ -103,11 +115,12 @@ const fillWithCachedFrames = ({ ctx, naturalWidth, filledSlots, src, segmentDura
             fromSeconds,
             devicePixelRatio,
             frameHeight,
+            horizontalOffset,
         });
     }
 };
 exports.fillWithCachedFrames = fillWithCachedFrames;
-const fillFrameWhereItFits = ({ frame, filledSlots, ctx, visualizationWidth, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, }) => {
+const fillFrameWhereItFits = ({ frame, filledSlots, ctx, visualizationWidth, segmentDuration, fromSeconds, devicePixelRatio, frameHeight, horizontalOffset, }) => {
     const slots = Array.from(filledSlots.keys());
     for (let i = 0; i < slots.length; i++) {
         const slot = slots[i];
@@ -129,6 +142,7 @@ const fillFrameWhereItFits = ({ frame, filledSlots, ctx, visualizationWidth, seg
             fromSeconds,
             devicePixelRatio,
             frameHeight,
+            horizontalOffset,
         });
     }
 };

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.529",
+	"version": "4.0.531",
 	"description": "Internal utilities for rendering Remotion timelines",
 	"main": "dist/index.js",
 	"scripts": {
@@ -22,11 +22,11 @@
 	},
 	"dependencies": {
 		"mediabunny": "1.56.1",
-		"remotion": "4.0.529"
+		"remotion": "4.0.531"
 	},
 	"devDependencies": {
 		"@mediabunny/server": "1.56.1",
-		"@remotion/eslint-config-internal": "4.0.529",
+		"@remotion/eslint-config-internal": "4.0.531",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},