@meframe/core 0.0.49 → 0.1.1

package/dist/workers/stages/compose/{video-compose.worker.CsbBuccL.js → video-compose.worker.C8728Oi3.js}

@@ -795,7 +795,7 @@ class LayerRenderer {
   /**
    * Render a single layer with all its properties
    */
-  async renderLayer(layer) {
+  renderLayer(layer) {
     if (!layer.visible || layer.opacity <= 0) return;
     const needsStateManagement = layer.opacity !== 1 || layer.blendMode || layer.transform || layer.mask;
     if (needsStateManagement) {
@@ -814,13 +814,13 @@ class LayerRenderer {
       }
       switch (layer.type) {
         case "video":
-          await this.renderVideoLayer(layer);
+          this.renderVideoLayer(layer);
           break;
         case "image":
-          await this.renderImageLayer(layer);
+          this.renderImageLayer(layer);
           break;
         case "text":
-          await this.renderTextLayer(layer);
+          this.renderTextLayer(layer);
           break;
       }
       if (layer.mask) {
@@ -843,41 +843,46 @@ class LayerRenderer {
     const parsed = parseFloat(strValue);
     return isNaN(parsed) ? void 0 : parsed;
   }
+  /**
+   * Calculate dimensions from renderConfig
+   * Returns dimensions maintaining aspect ratio when only one dimension is specified
+   */
+  calculateDimensionsFromConfig(sourceWidth, sourceHeight, renderConfig) {
+    if (!renderConfig) {
+      return { width: sourceWidth, height: sourceHeight };
+    }
+    const width = this.parseDimension(renderConfig.width, this.width);
+    const height = this.parseDimension(renderConfig.height, this.height);
+    if (width && height) {
+      return { width, height };
+    } else if (width) {
+      return {
+        width,
+        height: Math.round(sourceHeight / sourceWidth * width)
+      };
+    } else if (height) {
+      return {
+        width: Math.round(sourceWidth / sourceHeight * height),
+        height
+      };
+    } else {
+      return { width: sourceWidth, height: sourceHeight };
+    }
+  }
   getLayerDimensions(layer) {
     if (layer.type === "image") {
       const imageLayer = layer;
       if (imageLayer.source) {
         const imgWidth = imageLayer.source.width;
         const imgHeight = imageLayer.source.height;
-        const isAttachment = !!imageLayer.attachmentId;
-        if (isAttachment) {
-          const targetWidthRaw = imageLayer.targetWidth;
-          const targetHeightRaw = imageLayer.targetHeight;
-          const targetWidth = this.parseDimension(targetWidthRaw, this.width);
-          const targetHeight = this.parseDimension(targetHeightRaw, this.height);
-          if (targetWidth && targetHeight) {
-            return { width: targetWidth, height: targetHeight };
-          } else if (targetWidth) {
-            return {
-              width: targetWidth,
-              height: imgHeight / imgWidth * targetWidth
-            };
-          } else if (targetHeight) {
-            return {
-              width: imgWidth / imgHeight * targetHeight,
-              height: targetHeight
-            };
-          }
-        }
-        return { width: imgWidth, height: imgHeight };
+        return this.calculateDimensionsFromConfig(imgWidth, imgHeight, imageLayer.renderConfig);
       }
     } else if (layer.type === "video") {
       const videoLayer = layer;
       const videoFrame = videoLayer.videoFrame;
-      return {
-        width: videoFrame.displayWidth || videoFrame.codedWidth,
-        height: videoFrame.displayHeight || videoFrame.codedHeight
-      };
+      const videoWidth = videoFrame.displayWidth || videoFrame.codedWidth;
+      const videoHeight = videoFrame.displayHeight || videoFrame.codedHeight;
+      return this.calculateDimensionsFromConfig(videoWidth, videoHeight, videoLayer.renderConfig);
     }
     return { width: this.width, height: this.height };
   }
@@ -921,12 +926,28 @@ class LayerRenderer {
     }
     this.ctx.translate(-centerX, -centerY);
   }
-  async renderVideoLayer(layer) {
-    const { videoFrame, crop } = layer;
+  renderVideoLayer(layer) {
+    const { videoFrame, crop, renderConfig } = layer;
     const videoWidth = videoFrame.displayWidth || videoFrame.codedWidth;
     const videoHeight = videoFrame.displayHeight || videoFrame.codedHeight;
-    const naturalScale = this.height / videoHeight;
-    const dimensions = this.calculateRenderDimensions(videoWidth, videoHeight, naturalScale);
+    let renderX;
+    let renderY;
+    let renderWidth;
+    let renderHeight;
+    if (renderConfig) {
+      const dimensions = this.calculateDimensionsFromConfig(videoWidth, videoHeight, renderConfig);
+      renderWidth = dimensions.width;
+      renderHeight = dimensions.height;
+      renderX = Math.round((this.width - renderWidth) / 2);
+      renderY = Math.round((this.height - renderHeight) / 2);
+    } else {
+      const naturalScale = this.height / videoHeight;
+      const dimensions = this.calculateRenderDimensions(videoWidth, videoHeight, naturalScale);
+      renderX = dimensions.x;
+      renderY = dimensions.y;
+      renderWidth = dimensions.width;
+      renderHeight = dimensions.height;
+    }
     if (crop) {
       this.ctx.drawImage(
         videoFrame,
@@ -934,24 +955,17 @@ class LayerRenderer {
         crop.y,
         crop.width,
         crop.height,
-        dimensions.x,
-        dimensions.y,
-        dimensions.width,
-        dimensions.height
+        renderX,
+        renderY,
+        renderWidth,
+        renderHeight
       );
     } else {
-      this.ctx.drawImage(
-        videoFrame,
-        dimensions.x,
-        dimensions.y,
-        dimensions.width,
-        dimensions.height
-      );
+      this.ctx.drawImage(videoFrame, renderX, renderY, renderWidth, renderHeight);
     }
-    videoFrame.close();
   }
-  async renderImageLayer(layer) {
-    const { source, crop } = layer;
+  renderImageLayer(layer) {
+    const { source, crop, renderConfig } = layer;
     if (source instanceof ImageData) {
       if (crop) {
         const tempCanvas = new OffscreenCanvas(crop.width, crop.height);
@@ -961,59 +975,46 @@ class LayerRenderer {
       } else {
         this.ctx.putImageData(source, 0, 0);
       }
+      return;
+    }
+    if (!source) return;
+    const imgWidth = source.width;
+    const imgHeight = source.height;
+    let renderX;
+    let renderY;
+    let renderWidth;
+    let renderHeight;
+    if (renderConfig) {
+      const dimensions = this.calculateDimensionsFromConfig(imgWidth, imgHeight, renderConfig);
+      renderWidth = dimensions.width;
+      renderHeight = dimensions.height;
+      renderX = 0;
+      renderY = 0;
     } else {
-      if (!source) {
-        return;
-      }
-      const isAttachment = !!layer.attachmentId;
-      const imgWidth = source.width;
-      const imgHeight = source.height;
-      let renderWidth;
-      let renderHeight;
-      if (isAttachment) {
-        const targetWidthRaw = layer.targetWidth;
-        const targetHeightRaw = layer.targetHeight;
-        const targetWidth = this.parseDimension(targetWidthRaw, this.width);
-        const targetHeight = this.parseDimension(targetHeightRaw, this.height);
-        if (targetWidth && targetHeight) {
-          renderWidth = targetWidth;
-          renderHeight = targetHeight;
-        } else if (targetWidth) {
-          renderWidth = targetWidth;
-          renderHeight = imgHeight / imgWidth * targetWidth;
-        } else if (targetHeight) {
-          renderHeight = targetHeight;
-          renderWidth = imgWidth / imgHeight * targetHeight;
-        } else {
-          renderWidth = imgWidth;
-          renderHeight = imgHeight;
-        }
-      } else {
-        const naturalScale = this.width / imgWidth;
-        const dimensions = this.calculateRenderDimensions(imgWidth, imgHeight, naturalScale);
-        renderWidth = dimensions.width;
-        renderHeight = dimensions.height;
-      }
-      const renderX = isAttachment ? 0 : Math.round((this.width - renderWidth) / 2);
-      const renderY = isAttachment ? 0 : Math.round((this.height - renderHeight) / 2);
-      if (crop) {
-        this.ctx.drawImage(
-          source,
-          crop.x,
-          crop.y,
-          crop.width,
-          crop.height,
-          renderX,
-          renderY,
-          renderWidth,
-          renderHeight
-        );
-      } else {
-        this.ctx.drawImage(source, renderX, renderY, renderWidth, renderHeight);
-      }
+      const naturalScale = this.width / imgWidth;
+      const dimensions = this.calculateRenderDimensions(imgWidth, imgHeight, naturalScale);
+      renderWidth = dimensions.width;
+      renderHeight = dimensions.height;
+      renderX = Math.round((this.width - renderWidth) / 2);
+      renderY = Math.round((this.height - renderHeight) / 2);
+    }
+    if (crop) {
+      this.ctx.drawImage(
+        source,
+        crop.x,
+        crop.y,
+        crop.width,
+        crop.height,
+        renderX,
+        renderY,
+        renderWidth,
+        renderHeight
+      );
+    } else {
+      this.ctx.drawImage(source, renderX, renderY, renderWidth, renderHeight);
     }
   }
-  async renderTextLayer(layer) {
+  renderTextLayer(layer) {
     const animationType = layer.animation?.type;
     const hasWordTimings = layer.wordTimings && layer.wordTimings.length > 0;
     const needsWordTimings = ["wordByWord", "characterKTV", "wordByWordFancy"].includes(
@@ -1479,9 +1480,12 @@ class FilterProcessor {
 }
 const closeLayerFrame = (layer) => {
   if (layer.type === "video") {
-    const vf = layer.videoFrame;
-    if (vf?.close) {
-      vf.close();
+    const videoLayer = layer;
+    if (!videoLayer.rcFrame) {
+      const vf = videoLayer.videoFrame;
+      if (vf?.close) {
+        vf.close();
+      }
     }
   }
 };
@@ -1603,14 +1607,15 @@ class VideoComposer {
         continue;
       }
       try {
-        if (layer.rcFrame) {
-          await layer.rcFrame.use(async (frame2) => {
-            layer.videoFrame = frame2;
+        const videoLayer = layer;
+        if (videoLayer.rcFrame) {
+          videoLayer.rcFrame.use((frame2) => {
+            videoLayer.videoFrame = frame2;
             if (layer.filters && layer.filters.length > 0) {
               this.ctx.save();
               this.filterProcessor.applyFilters(this.ctx, layer.filters);
             }
-            await this.layerRenderer.renderLayer(layer);
+            this.layerRenderer.renderLayer(layer);
             if (layer.filters && layer.filters.length > 0) {
               this.ctx.restore();
             }
@@ -1620,13 +1625,14 @@ class VideoComposer {
             this.ctx.save();
             this.filterProcessor.applyFilters(this.ctx, layer.filters);
           }
-          await this.layerRenderer.renderLayer(layer);
+          this.layerRenderer.renderLayer(layer);
           if (layer.filters && layer.filters.length > 0) {
             this.ctx.restore();
           }
         }
       } catch (error) {
         console.error("[VideoComposer] composeFrame error: ", error);
+      } finally {
         closeLayerFrame(layer);
       }
     }
@@ -2022,10 +2028,12 @@ function materializeLayer(layer, frame, imageMap, globalTimeUs) {
     opacity: layer.opacity ?? 1
   };
   if (layer.type === "video") {
+    const payload = layer.payload;
     return {
       ...baseLayer,
       type: "video",
-      videoFrame: frame
+      videoFrame: frame,
+      renderConfig: payload.renderConfig
     };
   }
   if (layer.type === "text") {
@@ -2049,14 +2057,9 @@ function materializeLayer(layer, frame, imageMap, globalTimeUs) {
       ...baseLayer,
       type: "image",
       source,
-      attachmentId: payload.attachmentId
+      attachmentId: payload.attachmentId,
+      renderConfig: payload.renderConfig
     };
-    if (payload.targetWidth !== void 0) {
-      imageLayer.targetWidth = payload.targetWidth;
-    }
-    if (payload.targetHeight !== void 0) {
-      imageLayer.targetHeight = payload.targetHeight;
-    }
     if (payload.animation && globalTimeUs !== void 0) {
       const animState = computeAnimationState(payload.animation, globalTimeUs);
       if (!animState.visible) {
@@ -2458,4 +2461,4 @@ export {
   VideoComposeWorker,
   videoCompose_worker as default
 };
-//# sourceMappingURL=video-compose.worker.CsbBuccL.js.map
+//# sourceMappingURL=video-compose.worker.C8728Oi3.js.map