ugcinc-render 1.5.25 → 1.5.26

package/dist/index.d.mts

@@ -1365,6 +1365,9 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
  *
  * This file registers all available compositions with the renderer.
  * It serves as the entry point for the renderer bundler.
+ *
+ * Uses calculateMetadata for ImageEditorComposition to determine
+ * dynamic crop dimensions in the browser environment (with DOM access).
  */
 
 declare const RenderRoot: React.FC;

package/dist/index.d.ts

@@ -1365,6 +1365,9 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
  *
  * This file registers all available compositions with the renderer.
  * It serves as the entry point for the renderer bundler.
+ *
+ * Uses calculateMetadata for ImageEditorComposition to determine
+ * dynamic crop dimensions in the browser environment (with DOM access).
  */
 
 declare const RenderRoot: React.FC;

package/dist/index.js

@@ -2126,6 +2126,55 @@ var defaultVideoProps = {
 };
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
+var calculateImageMetadata = async ({ props }) => {
+  console.log("[calculateMetadata] Starting metadata calculation...");
+  const canvasWidth = props.width ?? props.config?.width ?? 1080;
+  const canvasHeight = props.height ?? props.config?.height ?? 1920;
+  const defaultResult = {
+    width: canvasWidth,
+    height: canvasHeight,
+    fps: 30,
+    durationInFrames: 1
+  };
+  if (!props.elements || !props.dynamicCrop) {
+    console.log("[calculateMetadata] No elements or dynamicCrop, using default dimensions:", canvasWidth, "x", canvasHeight);
+    return defaultResult;
+  }
+  if (!isDynamicCropEnabled(props.dynamicCrop)) {
+    console.log("[calculateMetadata] Dynamic crop not enabled, using default dimensions:", canvasWidth, "x", canvasHeight);
+    return defaultResult;
+  }
+  console.log("[calculateMetadata] Dynamic crop enabled, loading fonts for accurate measurement...");
+  try {
+    await preloadFonts();
+    console.log("[calculateMetadata] Fonts loaded successfully");
+  } catch (err) {
+    console.error("[calculateMetadata] Font loading failed:", err);
+  }
+  await new Promise((resolve) => setTimeout(resolve, 50));
+  console.log("[calculateMetadata] Resolving element positions with DOM measurement...");
+  const { elements: resolvedElements } = resolveElementPositions(
+    props.elements,
+    props.textValues ?? {}
+  );
+  console.log("[calculateMetadata] Element positions resolved");
+  const cropBounds = calculateCropBounds(
+    resolvedElements,
+    props.dynamicCrop,
+    canvasWidth,
+    canvasHeight,
+    props.textValues
+  );
+  const outputWidth = Math.round(cropBounds.width);
+  const outputHeight = Math.round(cropBounds.height);
+  console.log(`[calculateMetadata] Crop bounds calculated: ${canvasWidth}x${canvasHeight} -> ${outputWidth}x${outputHeight} (offset: ${cropBounds.x}, ${cropBounds.y})`);
+  return {
+    width: outputWidth,
+    height: outputHeight,
+    fps: 30,
+    durationInFrames: 1
+  };
+};
 var RenderRoot = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -2133,8 +2182,9 @@ var RenderRoot = () => {
       {
         id: "ImageEditorComposition",
         component: ImageComp,
+        calculateMetadata: calculateImageMetadata,
         durationInFrames: 1,
-        fps: 1,
+        fps: 30,
         width: 1080,
         height: 1920,
         defaultProps: defaultImageProps

package/dist/index.mjs

@@ -2040,6 +2040,55 @@ var defaultVideoProps = {
 };
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
+var calculateImageMetadata = async ({ props }) => {
+  console.log("[calculateMetadata] Starting metadata calculation...");
+  const canvasWidth = props.width ?? props.config?.width ?? 1080;
+  const canvasHeight = props.height ?? props.config?.height ?? 1920;
+  const defaultResult = {
+    width: canvasWidth,
+    height: canvasHeight,
+    fps: 30,
+    durationInFrames: 1
+  };
+  if (!props.elements || !props.dynamicCrop) {
+    console.log("[calculateMetadata] No elements or dynamicCrop, using default dimensions:", canvasWidth, "x", canvasHeight);
+    return defaultResult;
+  }
+  if (!isDynamicCropEnabled(props.dynamicCrop)) {
+    console.log("[calculateMetadata] Dynamic crop not enabled, using default dimensions:", canvasWidth, "x", canvasHeight);
+    return defaultResult;
+  }
+  console.log("[calculateMetadata] Dynamic crop enabled, loading fonts for accurate measurement...");
+  try {
+    await preloadFonts();
+    console.log("[calculateMetadata] Fonts loaded successfully");
+  } catch (err) {
+    console.error("[calculateMetadata] Font loading failed:", err);
+  }
+  await new Promise((resolve) => setTimeout(resolve, 50));
+  console.log("[calculateMetadata] Resolving element positions with DOM measurement...");
+  const { elements: resolvedElements } = resolveElementPositions(
+    props.elements,
+    props.textValues ?? {}
+  );
+  console.log("[calculateMetadata] Element positions resolved");
+  const cropBounds = calculateCropBounds(
+    resolvedElements,
+    props.dynamicCrop,
+    canvasWidth,
+    canvasHeight,
+    props.textValues
+  );
+  const outputWidth = Math.round(cropBounds.width);
+  const outputHeight = Math.round(cropBounds.height);
+  console.log(`[calculateMetadata] Crop bounds calculated: ${canvasWidth}x${canvasHeight} -> ${outputWidth}x${outputHeight} (offset: ${cropBounds.x}, ${cropBounds.y})`);
+  return {
+    width: outputWidth,
+    height: outputHeight,
+    fps: 30,
+    durationInFrames: 1
+  };
+};
 var RenderRoot = () => {
   return /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsx6(
@@ -2047,8 +2096,9 @@ var RenderRoot = () => {
       {
         id: "ImageEditorComposition",
         component: ImageComp,
+        calculateMetadata: calculateImageMetadata,
         durationInFrames: 1,
-        fps: 1,
+        fps: 30,
         width: 1080,
         height: 1920,
         defaultProps: defaultImageProps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.25",
+  "version": "1.5.26",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",