ugcinc-render 1.5.3 → 1.5.5

package/dist/index.js

@@ -517,6 +517,35 @@ function TextElement({ segment, scale = 1 }) {
     autoWidth,
     verticalAlign
   ]);
+  if (autoWidth && backgroundColor) {
+    const bgOffsetX = boxAlign === "center" ? (width - calculatedWidth) / 2 : boxAlign === "right" ? width - calculatedWidth : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", width }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: bgOffsetX,
+            top: 0,
+            width: calculatedWidth,
+            height: "100%",
+            backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
+            borderRadius: borderRadiusStyle,
+            pointerEvents: "none",
+            zIndex: 0
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...textStyle, position: "relative", zIndex: 1 }, children: segment.text })
+    ] }) });
+  }
+  if (autoWidth) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      ...textStyle,
+      width,
+      boxSizing: "border-box"
+    }, children: segment.text }) }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: segment.text }) }) });
 }
 

package/dist/index.mjs

@@ -219,7 +219,7 @@ function hexToRgba(hex, opacity = 100) {
 }
 
 // src/components/TextElement.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function calculateAutoWidth({
   text,
   maxWidth,
@@ -443,6 +443,35 @@ function TextElement({ segment, scale = 1 }) {
     autoWidth,
     verticalAlign
   ]);
+  if (autoWidth && backgroundColor) {
+    const bgOffsetX = boxAlign === "center" ? (width - calculatedWidth) / 2 : boxAlign === "right" ? width - calculatedWidth : 0;
+    return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", width }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: bgOffsetX,
+            top: 0,
+            width: calculatedWidth,
+            height: "100%",
+            backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
+            borderRadius: borderRadiusStyle,
+            pointerEvents: "none",
+            zIndex: 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { ...textStyle, position: "relative", zIndex: 1 }, children: segment.text })
+    ] }) });
+  }
+  if (autoWidth) {
+    return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ jsx("div", { style: {
+      ...textStyle,
+      width,
+      boxSizing: "border-box"
+    }, children: segment.text }) }) });
+  }
   return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) }) });
 }
 
@@ -950,7 +979,7 @@ function isDynamicCropEnabled(dynamicCrop) {
 }
 
 // src/compositions/ImageEditorComposition.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function getSortedSegments(config) {
   const allSegments = [];
   for (const channel of config.channels) {
@@ -1086,7 +1115,7 @@ function ImageEditorComposition({
     return void 0;
   };
   const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
-  return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs2(
     "div",
     {
       style: {
@@ -1260,7 +1289,7 @@ function VideoElement({
 }
 
 // src/compositions/VideoEditorComposition.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function calculateSegmentTimings(config, fps) {
   const timings = [];
   const timingsMap = /* @__PURE__ */ new Map();
@@ -1364,7 +1393,7 @@ function VideoEditorComposition({
   const audioTimings = useMemo5(() => {
     return segmentTimings.filter(({ segment }) => segment.type === "audio");
   }, [segmentTimings]);
-  return /* @__PURE__ */ jsxs2(AbsoluteFill2, { style: { backgroundColor: "#000000" }, children: [
+  return /* @__PURE__ */ jsxs3(AbsoluteFill2, { style: { backgroundColor: "#000000" }, children: [
     activeVisualSegments.map(({ segment, startFrame, durationInFrames: durationInFrames2 }) => {
       if (segment.type === "text") {
         const textSegment = segment;
@@ -1680,7 +1709,7 @@ function useResolvedPositions(elements, textValues) {
 
 // src/Root.tsx
 import { Composition } from "remotion";
-import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -1704,7 +1733,7 @@ var defaultVideoProps = {
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
 var RenderRoot = () => {
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsx6(
       Composition,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "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",