@remotion/timeline-utils 4.0.530 → 4.0.532

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') {
@@ -47,7 +48,9 @@ const drawBars = ({ canvas, color, peaks, volume, width, horizontalOffset, }) =>
         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/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,
@@ -65,7 +66,9 @@ var drawBars = ({
     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/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/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.530",
+	"version": "4.0.532",
 	"description": "Internal utilities for rendering Remotion timelines",
 	"main": "dist/index.js",
 	"scripts": {
@@ -22,11 +22,11 @@
 	},
 	"dependencies": {
 		"mediabunny": "1.56.1",
-		"remotion": "4.0.530"
+		"remotion": "4.0.532"
 	},
 	"devDependencies": {
 		"@mediabunny/server": "1.56.1",
-		"@remotion/eslint-config-internal": "4.0.530",
+		"@remotion/eslint-config-internal": "4.0.532",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},