@meframe/core 0.0.27 → 0.0.29

package/dist/workers/stages/compose/{video-compose.worker.M5uomNVr.js → video-compose.worker.CIeEIJO7.js}

@@ -1,17 +1,4 @@
 import { W as WorkerChannel, a as WorkerMessageType, b as WorkerState } from "../../WorkerChannel.CE5euh3R.js";
-const MICROSECONDS_PER_SECOND = 1e6;
-const DEFAULT_FPS = 30;
-function normalizeFps(value) {
-  if (!Number.isFinite(value) || value <= 0) {
-    return DEFAULT_FPS;
-  }
-  return value;
-}
-function frameDurationFromFps(fps) {
-  const normalized = normalizeFps(fps);
-  const duration = MICROSECONDS_PER_SECOND / normalized;
-  return Math.max(Math.round(duration), 1);
-}
 function measureTextWidth(ctx, text, fontSize, fontFamily, fontWeight = 400) {
   ctx.save();
   ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
@@ -1466,9 +1453,11 @@ class VideoComposer {
   layerRenderer;
   transitionProcessor;
   filterProcessor;
-  timelineContext;
+  frameDurationUs;
+  // Cached frame duration
   constructor(config) {
     this.config = this.applyDefaults(config);
+    this.frameDurationUs = Math.round(1e6 / this.config.fps);
     this.canvas = new OffscreenCanvas(this.config.width, this.config.height);
     const ctx = this.canvas.getContext("2d", {
       alpha: true,
@@ -1491,7 +1480,6 @@ class VideoComposer {
     );
     this.transitionProcessor = new TransitionProcessor(this.config.width, this.config.height);
     this.filterProcessor = new FilterProcessor();
-    this.timelineContext = this.config.timeline;
   }
   applyDefaults(config) {
     return {
@@ -1516,10 +1504,7 @@ class VideoComposer {
       fonts: config.fonts ?? []
     };
   }
-  createStreams(instruction) {
-    if (instruction?.baseConfig.timeline) {
-      this.timelineContext = instruction.baseConfig.timeline;
-    }
+  createStreams(_instruction) {
     const stream = new TransformStream(
       {
         transform: async (request, controller) => {
@@ -1602,10 +1587,10 @@ class VideoComposer {
   //   return [...layers].sort((a, b) => a.zIndex - b.zIndex);
   // }
   async createOutputFrame(timeUs) {
-    const duration = frameDurationFromFps(this.timelineContext.compositionFps);
     const frame = new VideoFrame(this.canvas, {
       timestamp: timeUs,
-      duration,
+      duration: this.frameDurationUs,
+      // Use cached duration
       alpha: "discard",
       visibleRect: { x: 0, y: 0, width: this.canvas.width, height: this.canvas.height }
     });
@@ -1629,6 +1614,9 @@ class VideoComposer {
   }
   updateConfig(config) {
     Object.assign(this.config, this.applyDefaults({ ...this.config, ...config }));
+    if (config.fps !== void 0) {
+      this.frameDurationUs = Math.round(1e6 / this.config.fps);
+    }
     if (config.width || config.height) {
       this.canvas.width = this.config.width;
       this.canvas.height = this.config.height;
@@ -1638,9 +1626,6 @@ class VideoComposer {
     if (config.enableSmoothing !== void 0) {
       this.ctx.imageSmoothingEnabled = this.config.enableSmoothing;
     }
-    if (config.timeline) {
-      this.timelineContext = config.timeline;
-    }
     if (config.fonts) {
       this.loadFonts();
     }
@@ -1649,6 +1634,19 @@ class VideoComposer {
     this.filterProcessor.clearCache();
   }
 }
+const MICROSECONDS_PER_SECOND = 1e6;
+const DEFAULT_FPS = 30;
+function normalizeFps(value) {
+  if (!Number.isFinite(value) || value <= 0) {
+    return DEFAULT_FPS;
+  }
+  return value;
+}
+function frameDurationFromFps(fps) {
+  const normalized = normalizeFps(fps);
+  const duration = MICROSECONDS_PER_SECOND / normalized;
+  return Math.max(Math.round(duration), 1);
+}
 function interpolateKeyframes(keyframes, timeUs) {
   const defaultTransform = {
     x: 0,
@@ -1727,6 +1725,183 @@ function applyEasing(t, easing) {
       return t;
   }
 }
+class FrameRateConverter {
+  clipDurationUs;
+  frameDurationUs;
+  // State for frame processing
+  targetFrameIndex = 0;
+  targetFrameTimeUs = 0;
+  sourceFrameBuffer = [];
+  constructor(targetFps, clipDurationUs) {
+    if (targetFps <= 0) {
+      throw new Error(`Invalid target fps: ${targetFps}`);
+    }
+    if (clipDurationUs <= 0) {
+      throw new Error(`Invalid clip duration: ${clipDurationUs}`);
+    }
+    this.clipDurationUs = clipDurationUs;
+    this.frameDurationUs = Math.round(1e6 / targetFps);
+  }
+  /**
+   * Create a TransformStream that converts VFR frames to CFR frames
+   */
+  createStream() {
+    return new TransformStream({
+      start: () => {
+        this.targetFrameIndex = 0;
+        this.targetFrameTimeUs = 0;
+        this.sourceFrameBuffer = [];
+        this.sourceFrameCount = 0;
+        this.outputFrameCount = 0;
+      },
+      transform: (sourceFrame, controller) => {
+        this.processSourceFrame(sourceFrame, controller);
+      },
+      flush: (controller) => {
+        this.flushRemainingFrames(controller);
+      }
+    });
+  }
+  sourceFrameCount = 0;
+  outputFrameCount = 0;
+  /**
+   * Process incoming source frame and output target frames
+   */
+  processSourceFrame(sourceFrame, controller) {
+    this.sourceFrameBuffer.push(sourceFrame);
+    this.sourceFrameCount++;
+    while (this.targetFrameTimeUs < this.clipDurationUs) {
+      const closestFrame = this.findClosestFrame(this.targetFrameTimeUs);
+      if (!closestFrame) {
+        break;
+      }
+      if (this.shouldWaitForNextFrame(closestFrame)) {
+        break;
+      }
+      try {
+        const targetFrame = new VideoFrame(closestFrame, {
+          timestamp: this.targetFrameTimeUs,
+          duration: this.frameDurationUs
+        });
+        controller.enqueue(targetFrame);
+        this.outputFrameCount++;
+        this.cleanupOldFrames(this.targetFrameTimeUs);
+        this.targetFrameIndex++;
+        this.targetFrameTimeUs = this.targetFrameIndex * this.frameDurationUs;
+      } catch (error) {
+        console.error("[FrameRateConverter] Failed to create target frame:", error);
+        this.targetFrameIndex++;
+        this.targetFrameTimeUs = this.targetFrameIndex * this.frameDurationUs;
+      }
+    }
+  }
+  /**
+   * Flush remaining target frames at end of stream
+   */
+  flushRemainingFrames(controller) {
+    while (this.sourceFrameBuffer.length > 0) {
+      const closestFrame = this.findClosestFrame(this.targetFrameTimeUs);
+      if (!closestFrame) {
+        break;
+      }
+      if (this.targetFrameTimeUs >= this.clipDurationUs) {
+        break;
+      }
+      try {
+        const targetFrame = new VideoFrame(closestFrame, {
+          timestamp: this.targetFrameTimeUs,
+          duration: this.frameDurationUs
+        });
+        controller.enqueue(targetFrame);
+        this.cleanupOldFrames(this.targetFrameTimeUs);
+        this.targetFrameIndex++;
+        this.targetFrameTimeUs = this.targetFrameIndex * this.frameDurationUs;
+      } catch (error) {
+        console.error("[FrameRateConverter] Failed to create target frame in flush:", error);
+        break;
+      }
+    }
+    for (const frame of this.sourceFrameBuffer) {
+      try {
+        frame.close();
+      } catch (error) {
+      }
+    }
+    this.sourceFrameBuffer = [];
+  }
+  /**
+   * Find the source frame closest to target time
+   */
+  findClosestFrame(targetTimeUs) {
+    if (this.sourceFrameBuffer.length === 0) {
+      return null;
+    }
+    let closestFrame = this.sourceFrameBuffer[0];
+    let minError = Math.abs((closestFrame?.timestamp ?? 0) - targetTimeUs);
+    for (const frame of this.sourceFrameBuffer) {
+      const error = Math.abs((frame.timestamp ?? 0) - targetTimeUs);
+      if (error < minError) {
+        minError = error;
+        closestFrame = frame;
+      }
+    }
+    return closestFrame ?? null;
+  }
+  /**
+   * Check if we should wait for next source frame before outputting
+   * Returns true if:
+   * - We only have 1 frame in buffer
+   * - The closest frame is before target time
+   * - We might get a better match from next frame
+   */
+  shouldWaitForNextFrame(closestFrame) {
+    if (this.sourceFrameBuffer.length <= 1) {
+      const frameTimestamp = closestFrame.timestamp ?? 0;
+      if (frameTimestamp < this.targetFrameTimeUs) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Clean up source frames that are no longer needed
+   * Keep frames that might be needed for future target frames
+   */
+  cleanupOldFrames(currentTargetTimeUs) {
+    const nextTargetTimeUs = currentTargetTimeUs + this.frameDurationUs;
+    const previousTargetTimeUs = currentTargetTimeUs - this.frameDurationUs;
+    let removeCount = 0;
+    for (let i = 0; i < this.sourceFrameBuffer.length; i++) {
+      const frame = this.sourceFrameBuffer[i];
+      if (!frame) continue;
+      const frameTimestamp = frame.timestamp ?? 0;
+      const isNeededForNext = Math.abs(frameTimestamp - nextTargetTimeUs) < Math.abs(frameTimestamp - previousTargetTimeUs);
+      if (frameTimestamp < previousTargetTimeUs && !isNeededForNext) {
+        try {
+          frame.close();
+        } catch (error) {
+        }
+        removeCount++;
+      } else {
+        break;
+      }
+    }
+    if (removeCount > 0) {
+      this.sourceFrameBuffer.splice(0, removeCount);
+    }
+  }
+  /**
+   * Get current conversion state (for debugging)
+   */
+  getState() {
+    return {
+      targetFrameIndex: this.targetFrameIndex,
+      targetFrameTimeUs: this.targetFrameTimeUs,
+      bufferSize: this.sourceFrameBuffer.length,
+      frameDurationUs: this.frameDurationUs
+    };
+  }
+}
 function resolveActiveLayers(layers, timestamp) {
   return layers.filter((layer) => {
     if (!layer.payload.attachmentId) {
@@ -1842,7 +2017,6 @@ class VideoComposeWorker {
   downstreamPort = null;
   upstreamPort = null;
   instructions = null;
-  streamState = null;
   imageMap = /* @__PURE__ */ new Map();
   constructor() {
     this.channel = new WorkerChannel(self, {
@@ -1925,7 +2099,13 @@ class VideoComposeWorker {
       console.warn("[VideoComposeWorker] No instructions installed");
       return;
     }
-    const filteredStream = stream.pipeThrough(
+    const timeline = this.instructions.baseConfig.timeline;
+    const fpsConverter = new FrameRateConverter(
+      timeline?.compositionFps ?? 30,
+      timeline?.clipDurationUs ?? Infinity
+    );
+    const cfrStream = stream.pipeThrough(fpsConverter.createStream());
+    const filteredStream = cfrStream.pipeThrough(
       new TransformStream({
         transform: (frame, controller) => {
           try {
@@ -2004,7 +2184,6 @@ class VideoComposeWorker {
     this.imageMap.forEach((bitmap) => bitmap.close());
     this.imageMap.clear();
     this.instructions = null;
-    this.streamState = null;
     this.channel.state = WorkerState.Disposed;
     return { success: true };
   }
@@ -2045,7 +2224,6 @@ class VideoComposeWorker {
   }
   async handleDisposeClip() {
     this.instructions = null;
-    this.streamState = null;
     this.downstreamPort?.close();
     this.upstreamPort?.close();
     this.downstreamPort = null;
@@ -2115,7 +2293,7 @@ class VideoComposeWorker {
     }
   }
   buildComposeRequest(instruction, frame) {
-    const clipRelativeTime = this.computeTimelineTimestamp(frame, instruction.baseConfig);
+    const clipRelativeTime = frame.timestamp ?? 0;
     const clipDurationUs = instruction.baseConfig.timeline?.clipDurationUs ?? Infinity;
     if (clipRelativeTime < 0 || clipRelativeTime >= clipDurationUs) {
       return null;
@@ -2159,35 +2337,6 @@ class VideoComposeWorker {
       direction: entry.params.payload?.direction
     };
   }
-  computeTimelineTimestamp(frame, config) {
-    if (!this.streamState) {
-      this.streamState = {
-        lastSourceTimestamp: null,
-        nextFrameIndex: 0
-      };
-    }
-    const timeline = config.timeline;
-    if (!timeline) {
-      const ts = frame.timestamp ?? 0;
-      this.streamState.lastSourceTimestamp = frame.timestamp ?? null;
-      return ts;
-    }
-    const { compositionFps } = timeline;
-    const sourceTimestamp = frame.timestamp ?? null;
-    if (sourceTimestamp !== null && this.streamState.lastSourceTimestamp !== null && sourceTimestamp < this.streamState.lastSourceTimestamp) {
-      this.streamState.nextFrameIndex = 0;
-    }
-    const frameDuration = frameDurationFromFps(compositionFps);
-    let frameIndex = this.streamState.nextFrameIndex;
-    if (sourceTimestamp !== null) {
-      const approxIndex = Math.round(sourceTimestamp / frameDuration);
-      frameIndex = Math.max(frameIndex, approxIndex);
-    }
-    const relativeTimeUs = frameIndex * frameDuration;
-    this.streamState.nextFrameIndex = frameIndex + 1;
-    this.streamState.lastSourceTimestamp = sourceTimestamp;
-    return relativeTimeUs;
-  }
 }
 const worker = new VideoComposeWorker();
 self.addEventListener("beforeunload", () => {
@@ -2198,4 +2347,4 @@ export {
   VideoComposeWorker,
   videoCompose_worker as default
 };
-//# sourceMappingURL=video-compose.worker.M5uomNVr.js.map
+//# sourceMappingURL=video-compose.worker.CIeEIJO7.js.map