@meframe/core 0.1.0 → 0.1.2

package/dist/workers/stages/compose/{video-compose.worker.B-_C-_y6.js → video-compose.worker.C8728Oi3.js}

@@ -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 };
   }
@@ -922,11 +927,27 @@ class LayerRenderer {
     this.ctx.translate(-centerX, -centerY);
   }
   renderVideoLayer(layer) {
-    const { videoFrame, crop } = 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,23 +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);
     }
   }
   renderImageLayer(layer) {
-    const { source, crop } = layer;
+    const { source, crop, renderConfig } = layer;
     if (source instanceof ImageData) {
       if (crop) {
         const tempCanvas = new OffscreenCanvas(crop.width, crop.height);
@@ -960,56 +975,43 @@ 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);
     }
   }
   renderTextLayer(layer) {
@@ -2026,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") {
@@ -2053,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) {
@@ -2462,4 +2461,4 @@ export {
   VideoComposeWorker,
   videoCompose_worker as default
 };
-//# sourceMappingURL=video-compose.worker.B-_C-_y6.js.map
+//# sourceMappingURL=video-compose.worker.C8728Oi3.js.map