@remotion/timeline-utils 4.0.479 → 4.0.482

package/dist/audio-waveform/audio-waveform-worker-types.d.ts

@@ -1,4 +1,5 @@
 import type { TimelineLoopDisplay } from '../loop-display';
+import type { WaveformVolume } from './draw-peaks';
 export type AudioWaveformWorkerInitMessage = {
     readonly type: 'init';
     readonly canvas: OffscreenCanvas;
@@ -9,7 +10,7 @@ export type AudioWaveformWorkerRenderMessage = {
     readonly src: string;
     readonly width: number;
     readonly height: number;
-    readonly volume: number;
+    readonly volume: WaveformVolume;
     readonly startFrom: number;
     readonly durationInFrames: number;
     readonly fps: number;

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

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

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

@@ -3,6 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawBars = void 0;
 const parse_color_1 = require("./parse-color");
 const CLIPPING_COLOR = '#FF7F50';
+const getVolumeAtBar = ({ barIndex, numBars, volume, }) => {
+    var _a;
+    if (typeof volume === 'number') {
+        return volume;
+    }
+    if (volume.length === 0) {
+        return 1;
+    }
+    if (volume.length === 1 || numBars <= 1) {
+        return volume[0];
+    }
+    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 ctx = canvas.getContext('2d');
     if (!ctx) {
@@ -18,8 +32,6 @@ const drawBars = ({ canvas, color, peaks, volume, width, }) => {
         return;
     }
     ctx.clearRect(0, 0, w, height);
-    if (volume === 0)
-        return;
     const [r, g, b, a] = (0, parse_color_1.parseColor)(color);
     const [cr, cg, cb, ca] = (0, parse_color_1.parseColor)(CLIPPING_COLOR);
     const imageData = ctx.createImageData(w, height);
@@ -31,7 +43,8 @@ const drawBars = ({ canvas, color, peaks, volume, width, }) => {
             break;
         const peakIndex = Math.floor((barIndex / numBars) * peaks.length);
         const peak = peaks[peakIndex] || 0;
-        const scaledPeak = peak * volume;
+        const barVolume = getVolumeAtBar({ barIndex, numBars, volume });
+        const scaledPeak = peak * barVolume;
         const halfBar = Math.max(0, Math.min(height / 2, (scaledPeak * height) / 2));
         if (halfBar === 0)
             continue;

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

@@ -15,6 +15,23 @@ var parseColor = (color) => {
 
 // src/audio-waveform/draw-peaks.ts
 var CLIPPING_COLOR = "#FF7F50";
+var getVolumeAtBar = ({
+  barIndex,
+  numBars,
+  volume
+}) => {
+  if (typeof volume === "number") {
+    return volume;
+  }
+  if (volume.length === 0) {
+    return 1;
+  }
+  if (volume.length === 1 || numBars <= 1) {
+    return volume[0];
+  }
+  const volumeIndex = Math.round(barIndex / (numBars - 1) * (volume.length - 1));
+  return volume[volumeIndex] ?? 1;
+};
 var drawBars = ({
   canvas,
   color,
@@ -32,8 +49,6 @@ var drawBars = ({
     return;
   }
   ctx.clearRect(0, 0, w, height);
-  if (volume === 0)
-    return;
   const [r, g, b, a] = parseColor(color);
   const [cr, cg, cb, ca] = parseColor(CLIPPING_COLOR);
   const imageData = ctx.createImageData(w, height);
@@ -45,7 +60,8 @@ var drawBars = ({
       break;
     const peakIndex = Math.floor(barIndex / numBars * peaks.length);
     const peak = peaks[peakIndex] || 0;
-    const scaledPeak = peak * volume;
+    const barVolume = getVolumeAtBar({ barIndex, numBars, volume });
+    const scaledPeak = peak * barVolume;
     const halfBar = Math.max(0, Math.min(height / 2, scaledPeak * height / 2));
     if (halfBar === 0)
       continue;

package/dist/esm/index.mjs

@@ -17,6 +17,23 @@ var parseColor = (color) => {
 
 // src/audio-waveform/draw-peaks.ts
 var CLIPPING_COLOR = "#FF7F50";
+var getVolumeAtBar = ({
+  barIndex,
+  numBars,
+  volume
+}) => {
+  if (typeof volume === "number") {
+    return volume;
+  }
+  if (volume.length === 0) {
+    return 1;
+  }
+  if (volume.length === 1 || numBars <= 1) {
+    return volume[0];
+  }
+  const volumeIndex = Math.round(barIndex / (numBars - 1) * (volume.length - 1));
+  return volume[volumeIndex] ?? 1;
+};
 var drawBars = ({
   canvas,
   color,
@@ -34,8 +51,6 @@ var drawBars = ({
     return;
   }
   ctx.clearRect(0, 0, w, height);
-  if (volume === 0)
-    return;
   const [r, g, b, a] = parseColor(color);
   const [cr, cg, cb, ca] = parseColor(CLIPPING_COLOR);
   const imageData = ctx.createImageData(w, height);
@@ -47,7 +62,8 @@ var drawBars = ({
       break;
     const peakIndex = Math.floor(barIndex / numBars * peaks.length);
     const peak = peaks[peakIndex] || 0;
-    const scaledPeak = peak * volume;
+    const barVolume = getVolumeAtBar({ barIndex, numBars, volume });
+    const scaledPeak = peak * barVolume;
     const halfBar = Math.max(0, Math.min(height / 2, scaledPeak * height / 2));
     if (halfBar === 0)
       continue;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export type { AudioWaveformWorkerIncomingMessage, AudioWaveformWorkerOutgoingMessage, AudioWaveformWorkerRenderMessage, } from './audio-waveform/audio-waveform-worker-types';
 export { TARGET_SAMPLE_RATE } from './audio-waveform/constants';
-export { drawBars } from './audio-waveform/draw-peaks';
+export { drawBars, type WaveformVolume } from './audio-waveform/draw-peaks';
 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';

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.479",
+	"version": "4.0.482",
 	"description": "Internal utilities for rendering Remotion timelines",
 	"main": "dist/index.js",
 	"scripts": {
@@ -25,7 +25,7 @@
 	},
 	"devDependencies": {
 		"@mediabunny/server": "1.47.0",
-		"@remotion/eslint-config-internal": "4.0.479",
+		"@remotion/eslint-config-internal": "4.0.482",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},