@remotion/timeline-utils 4.0.485 → 4.0.487

package/dist/esm/index.mjs

@@ -734,10 +734,138 @@ var resizeVideoFrame = ({
     timestamp: frame.timestamp
   });
 };
+
+// src/render-frame-strip-to-canvas.ts
+var getContext = (canvas) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Could not get 2d context");
+  }
+  return ctx;
+};
+var renderFrameStripToCanvas = async ({
+  canvas,
+  src,
+  fromSeconds,
+  toSeconds,
+  width,
+  frameHeight,
+  devicePixelRatio,
+  signal
+}) => {
+  const naturalWidth = Math.max(1, Math.ceil(width));
+  const naturalHeight = Math.max(1, Math.ceil(frameHeight));
+  const segmentDuration = toSeconds - fromSeconds;
+  canvas.width = naturalWidth;
+  canvas.height = naturalHeight;
+  if (segmentDuration <= 0 || signal?.aborted) {
+    return;
+  }
+  const ctx = getContext(canvas);
+  ctx.clearRect(0, 0, naturalWidth, naturalHeight);
+  const filledSlots = new Map;
+  let aspectRatio = getAspectRatioFromCache(src);
+  if (aspectRatio !== null) {
+    ensureSlots({
+      filledSlots,
+      naturalWidth,
+      fromSeconds,
+      toSeconds,
+      aspectRatio,
+      frameHeight
+    });
+    fillWithCachedFrames({
+      ctx,
+      naturalWidth,
+      filledSlots,
+      src,
+      segmentDuration,
+      fromSeconds,
+      devicePixelRatio,
+      frameHeight
+    });
+    const hasUnfilledSlots = Array.from(filledSlots.values()).some((value) => value === undefined);
+    if (!hasUnfilledSlots) {
+      return;
+    }
+  }
+  await extractFrames({
+    src,
+    signal,
+    timestampsInSeconds: ({ track }) => {
+      aspectRatio = track.width / track.height;
+      aspectRatioCache.set(src, aspectRatio);
+      ensureSlots({
+        filledSlots,
+        naturalWidth,
+        fromSeconds,
+        toSeconds,
+        aspectRatio,
+        frameHeight
+      });
+      return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
+    },
+    onVideoSample: (sample) => {
+      let frame;
+      try {
+        frame = sample.toVideoFrame();
+        const scale = frameHeight / frame.displayHeight * devicePixelRatio;
+        const transformed = resizeVideoFrame({ frame, scale });
+        if (transformed !== frame) {
+          frame.close();
+        }
+        frame = undefined;
+        addFrameToCache(makeFrameDatabaseKey(src, transformed.timestamp), transformed);
+        if (aspectRatio === null) {
+          throw new Error("Aspect ratio is not set");
+        }
+        ensureSlots({
+          filledSlots,
+          naturalWidth,
+          fromSeconds,
+          toSeconds,
+          aspectRatio,
+          frameHeight
+        });
+        fillFrameWhereItFits({
+          ctx,
+          filledSlots,
+          visualizationWidth: naturalWidth,
+          frame: transformed,
+          segmentDuration,
+          fromSeconds,
+          devicePixelRatio,
+          frameHeight
+        });
+      } catch (e) {
+        if (frame) {
+          frame.close();
+        }
+        throw e;
+      } finally {
+        sample.close();
+      }
+    }
+  });
+  if (signal?.aborted) {
+    return;
+  }
+  fillWithCachedFrames({
+    ctx,
+    naturalWidth,
+    filledSlots,
+    src,
+    segmentDuration,
+    fromSeconds,
+    devicePixelRatio,
+    frameHeight
+  });
+};
 export {
   sliceWaveformPeaks,
   shouldTileLoopDisplay,
   resizeVideoFrame,
+  renderFrameStripToCanvas,
   makeFrameDatabaseKey,
   makeAudioWaveformWorker,
   loadWaveformPeaks,

package/dist/index.d.ts

@@ -14,4 +14,6 @@ export type { FrameDatabaseKey } from './frame-database';
 export { getLoopDisplayWidth, shouldTileLoopDisplay } from './loop-display';
 export type { TimelineLoopDisplay } from './loop-display';
 export { calculateTimestampSlots, drawSlot, ensureSlots, fillFrameWhereItFits, fillWithCachedFrames, getDurationOfOneFrame, WEBCODECS_TIMESCALE, } from './render-frame-strip';
+export { renderFrameStripToCanvas } from './render-frame-strip-to-canvas';
+export type { RenderFrameStripToCanvasOptions } from './render-frame-strip-to-canvas';
 export { resizeVideoFrame } from './resize-video-frame';

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.getScaledImageThumbnailDimensions = exports.drawRepeatingImageThumbnail = exports.emitWaveformProgress = exports.createWaveformPeakProcessor = exports.sliceWaveformPeaks = exports.makeAudioWaveformWorker = exports.loadWaveformPeaks = exports.drawBars = exports.TARGET_SAMPLE_RATE = void 0;
+exports.resizeVideoFrame = exports.renderFrameStripToCanvas = 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");
@@ -39,5 +39,7 @@ Object.defineProperty(exports, "fillFrameWhereItFits", { enumerable: true, get:
 Object.defineProperty(exports, "fillWithCachedFrames", { enumerable: true, get: function () { return render_frame_strip_1.fillWithCachedFrames; } });
 Object.defineProperty(exports, "getDurationOfOneFrame", { enumerable: true, get: function () { return render_frame_strip_1.getDurationOfOneFrame; } });
 Object.defineProperty(exports, "WEBCODECS_TIMESCALE", { enumerable: true, get: function () { return render_frame_strip_1.WEBCODECS_TIMESCALE; } });
+const render_frame_strip_to_canvas_1 = require("./render-frame-strip-to-canvas");
+Object.defineProperty(exports, "renderFrameStripToCanvas", { enumerable: true, get: function () { return render_frame_strip_to_canvas_1.renderFrameStripToCanvas; } });
 const resize_video_frame_1 = require("./resize-video-frame");
 Object.defineProperty(exports, "resizeVideoFrame", { enumerable: true, get: function () { return resize_video_frame_1.resizeVideoFrame; } });

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

@@ -0,0 +1,13 @@
+type Canvas = HTMLCanvasElement | OffscreenCanvas;
+export type RenderFrameStripToCanvasOptions = {
+    readonly canvas: Canvas;
+    readonly src: string;
+    readonly fromSeconds: number;
+    readonly toSeconds: number;
+    readonly width: number;
+    readonly frameHeight: number;
+    readonly devicePixelRatio: number;
+    readonly signal?: AbortSignal;
+};
+export declare const renderFrameStripToCanvas: ({ canvas, src, fromSeconds, toSeconds, width, frameHeight, devicePixelRatio, signal, }: RenderFrameStripToCanvasOptions) => Promise<void>;
+export {};

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

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderFrameStripToCanvas = void 0;
+const extract_frames_1 = require("./extract-frames");
+const frame_database_1 = require("./frame-database");
+const render_frame_strip_1 = require("./render-frame-strip");
+const resize_video_frame_1 = require("./resize-video-frame");
+const getContext = (canvas) => {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Could not get 2d context');
+    }
+    return ctx;
+};
+const renderFrameStripToCanvas = async ({ canvas, src, fromSeconds, toSeconds, width, frameHeight, devicePixelRatio, signal, }) => {
+    const naturalWidth = Math.max(1, Math.ceil(width));
+    const naturalHeight = Math.max(1, Math.ceil(frameHeight));
+    const segmentDuration = toSeconds - fromSeconds;
+    canvas.width = naturalWidth;
+    canvas.height = naturalHeight;
+    if (segmentDuration <= 0 || (signal === null || signal === void 0 ? void 0 : signal.aborted)) {
+        return;
+    }
+    const ctx = getContext(canvas);
+    ctx.clearRect(0, 0, naturalWidth, naturalHeight);
+    const filledSlots = new Map();
+    let aspectRatio = (0, frame_database_1.getAspectRatioFromCache)(src);
+    if (aspectRatio !== null) {
+        (0, render_frame_strip_1.ensureSlots)({
+            filledSlots,
+            naturalWidth,
+            fromSeconds,
+            toSeconds,
+            aspectRatio,
+            frameHeight,
+        });
+        (0, render_frame_strip_1.fillWithCachedFrames)({
+            ctx,
+            naturalWidth,
+            filledSlots,
+            src,
+            segmentDuration,
+            fromSeconds,
+            devicePixelRatio,
+            frameHeight,
+        });
+        const hasUnfilledSlots = Array.from(filledSlots.values()).some((value) => value === undefined);
+        if (!hasUnfilledSlots) {
+            return;
+        }
+    }
+    await (0, extract_frames_1.extractFrames)({
+        src,
+        signal,
+        timestampsInSeconds: ({ track }) => {
+            aspectRatio = track.width / track.height;
+            frame_database_1.aspectRatioCache.set(src, aspectRatio);
+            (0, render_frame_strip_1.ensureSlots)({
+                filledSlots,
+                naturalWidth,
+                fromSeconds,
+                toSeconds,
+                aspectRatio,
+                frameHeight,
+            });
+            return Array.from(filledSlots.keys()).map((timestamp) => timestamp / render_frame_strip_1.WEBCODECS_TIMESCALE);
+        },
+        onVideoSample: (sample) => {
+            let frame;
+            try {
+                frame = sample.toVideoFrame();
+                const scale = (frameHeight / frame.displayHeight) * devicePixelRatio;
+                const transformed = (0, resize_video_frame_1.resizeVideoFrame)({ frame, scale });
+                if (transformed !== frame) {
+                    frame.close();
+                }
+                frame = undefined;
+                (0, frame_database_1.addFrameToCache)((0, frame_database_1.makeFrameDatabaseKey)(src, transformed.timestamp), transformed);
+                if (aspectRatio === null) {
+                    throw new Error('Aspect ratio is not set');
+                }
+                (0, render_frame_strip_1.ensureSlots)({
+                    filledSlots,
+                    naturalWidth,
+                    fromSeconds,
+                    toSeconds,
+                    aspectRatio,
+                    frameHeight,
+                });
+                (0, render_frame_strip_1.fillFrameWhereItFits)({
+                    ctx,
+                    filledSlots,
+                    visualizationWidth: naturalWidth,
+                    frame: transformed,
+                    segmentDuration,
+                    fromSeconds,
+                    devicePixelRatio,
+                    frameHeight,
+                });
+            }
+            catch (e) {
+                if (frame) {
+                    frame.close();
+                }
+                throw e;
+            }
+            finally {
+                sample.close();
+            }
+        },
+    });
+    if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+        return;
+    }
+    (0, render_frame_strip_1.fillWithCachedFrames)({
+        ctx,
+        naturalWidth,
+        filledSlots,
+        src,
+        segmentDuration,
+        fromSeconds,
+        devicePixelRatio,
+        frameHeight,
+    });
+};
+exports.renderFrameStripToCanvas = renderFrameStripToCanvas;

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.485",
+	"version": "4.0.487",
 	"description": "Internal utilities for rendering Remotion timelines",
 	"main": "dist/index.js",
 	"scripts": {
@@ -21,11 +21,11 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"mediabunny": "1.50.3"
+		"mediabunny": "1.50.7"
 	},
 	"devDependencies": {
-		"@mediabunny/server": "1.50.3",
-		"@remotion/eslint-config-internal": "4.0.485",
+		"@mediabunny/server": "1.50.7",
+		"@remotion/eslint-config-internal": "4.0.487",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},