ugcinc-render 1.8.103 → 1.8.104

package/dist/index.js

@@ -2878,7 +2878,7 @@ function ScreenshotAnimation({
 }
 
 // src/compositions/InstagramDmComposition/index.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_remotion10 = require("remotion");
 
 // src/compositions/InstagramDmComposition/theme.ts
@@ -3524,6 +3524,7 @@ function IgMessageFooter({
 }
 
 // src/compositions/InstagramDmComposition/components/IgMessages.tsx
+var import_react8 = __toESM(require("react"));
 var import_remotion9 = require("remotion");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var DEFAULTS2 = {
@@ -3577,7 +3578,20 @@ function getInterpolatedSenderColor(bubbleCenter, messageAreaTop, messageAreaBot
   }
 }
 var FONT_FAMILY = '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif';
-function measureTextWidth(text, fontSize) {
+function calculateAutoWidthAndLines2({
+  text,
+  maxWidth,
+  paddingLeft,
+  paddingRight,
+  fontSize
+}) {
+  if (typeof document === "undefined") {
+    return { width: maxWidth, lines: [text] };
+  }
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  if (availableWidth <= 0) {
+    return { width: maxWidth, lines: [text] };
+  }
   const measureSpan = document.createElement("span");
   measureSpan.style.cssText = `
     position: absolute;
@@ -3590,10 +3604,67 @@ function measureTextWidth(text, fontSize) {
     white-space: nowrap;
   `;
   document.body.appendChild(measureSpan);
-  measureSpan.textContent = text;
-  const width = measureSpan.getBoundingClientRect().width;
+  const measureText = (textToMeasure) => {
+    measureSpan.textContent = textToMeasure;
+    return measureSpan.getBoundingClientRect().width;
+  };
+  const words = text.split(/(\s+)/);
+  const lines = [];
+  let currentLine = "";
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i];
+    if (word === "\n" || word === "\r\n") {
+      if (currentLine) lines.push(currentLine);
+      currentLine = "";
+      continue;
+    }
+    if (!word) continue;
+    if (/^\s+$/.test(word)) {
+      if (currentLine) currentLine += word;
+      continue;
+    }
+    const testLine = currentLine + word;
+    const testWidth = measureText(testLine);
+    const WRAP_TOLERANCE = 0.5;
+    if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
+      lines.push(currentLine.trimEnd());
+      currentLine = word;
+      const wordWidth = measureText(word);
+      if (wordWidth > availableWidth) {
+        let remainingWord = word;
+        while (remainingWord) {
+          let breakPoint = 1;
+          for (let j = 1; j <= remainingWord.length; j++) {
+            measureSpan.textContent = remainingWord.substring(0, j);
+            if (measureSpan.getBoundingClientRect().width > availableWidth) {
+              breakPoint = Math.max(1, j - 1);
+              break;
+            }
+            breakPoint = j;
+          }
+          if (breakPoint >= remainingWord.length) {
+            currentLine = remainingWord;
+            break;
+          } else {
+            lines.push(remainingWord.substring(0, breakPoint));
+            remainingWord = remainingWord.substring(breakPoint);
+          }
+        }
+      }
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine.trim()) lines.push(currentLine.trimEnd());
+  if (lines.length === 0) lines.push("");
+  let widestLineWidth = 0;
+  for (const line of lines) {
+    const lineWidth = measureText(line);
+    widestLineWidth = Math.max(widestLineWidth, lineWidth);
+  }
   document.body.removeChild(measureSpan);
-  return width;
+  const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  return { width: calculatedWidth, lines };
 }
 function IgMessages({
   messages = [],
@@ -3625,7 +3696,6 @@ function IgMessages({
   if (messages.length === 0) {
     return null;
   }
-  const maxTextWidth = bubbleMaxWidth - messagePaddingLeft - messagePaddingRight;
   const renderedMessages = [];
   let currentBottom = messageAreaBottom;
   for (let i = messages.length - 1; i >= 0; i--) {
@@ -3648,22 +3718,16 @@ function IgMessages({
         gap = messageGapDifferentUser;
       }
     }
-    const actualTextWidth = measureTextWidth(message.text, messageFontSize);
-    const fitsOnSingleLine = actualTextWidth <= maxTextWidth;
-    let lineCount;
-    if (fitsOnSingleLine) {
-      lineCount = 1;
-    } else {
-      lineCount = Math.ceil(actualTextWidth / maxTextWidth);
-    }
+    const { width: bubbleWidth, lines } = calculateAutoWidthAndLines2({
+      text: message.text,
+      maxWidth: bubbleMaxWidth,
+      paddingLeft: messagePaddingLeft,
+      paddingRight: messagePaddingRight,
+      fontSize: messageFontSize
+    });
+    const lineCount = lines.length;
     const textHeight = lineCount * messageLineHeight;
     const bubbleHeight = textHeight + messagePaddingTop + messagePaddingBottom;
-    let bubbleWidth;
-    if (fitsOnSingleLine) {
-      bubbleWidth = actualTextWidth + messagePaddingLeft + messagePaddingRight;
-    } else {
-      bubbleWidth = bubbleMaxWidth;
-    }
     const bubbleBottom = currentBottom - gap;
     const bubbleTop = bubbleBottom - bubbleHeight;
     let bubbleLeft;
@@ -3679,6 +3743,7 @@ function IgMessages({
       left: bubbleLeft,
       width: bubbleWidth,
       height: bubbleHeight,
+      lines,
       isFirstInGroup,
       isLastInGroup,
       isSingleMessage
@@ -3803,10 +3868,12 @@ function IgMessages({
                 fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
                 fontWeight: 400,
                 lineHeight: `${messageLineHeight}px`,
-                textAlign: "left",
-                wordBreak: "break-word"
+                textAlign: "left"
               },
-              children: rm.message.text
+              children: rm.lines.map((line, idx) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react8.default.Fragment, { children: [
+                line,
+                idx < rm.lines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("br", {})
+              ] }, idx))
             }
           )
         },
@@ -4003,20 +4070,20 @@ function InstagramDmComposition({
   profilePicGap
 }) {
   const clampedReferenceOpacity = Math.max(0, Math.min(100, referenceOpacity));
-  const [fontsLoaded, setFontsLoaded] = (0, import_react8.useState)(false);
-  const [zoom, setZoom] = (0, import_react8.useState)(100);
-  const [scrollX, setScrollX] = (0, import_react8.useState)(0);
-  const [scrollY, setScrollY] = (0, import_react8.useState)(0);
-  const [referenceVisible, setReferenceVisible] = (0, import_react8.useState)(true);
-  const handleZoomChange = (0, import_react8.useCallback)((newZoom, newScrollX, newScrollY) => {
+  const [fontsLoaded, setFontsLoaded] = (0, import_react9.useState)(false);
+  const [zoom, setZoom] = (0, import_react9.useState)(100);
+  const [scrollX, setScrollX] = (0, import_react9.useState)(0);
+  const [scrollY, setScrollY] = (0, import_react9.useState)(0);
+  const [referenceVisible, setReferenceVisible] = (0, import_react9.useState)(true);
+  const handleZoomChange = (0, import_react9.useCallback)((newZoom, newScrollX, newScrollY) => {
     setZoom(newZoom);
     setScrollX(newScrollX);
     setScrollY(newScrollY);
   }, []);
-  const handleToggleReference = (0, import_react8.useCallback)(() => {
+  const handleToggleReference = (0, import_react9.useCallback)(() => {
     setReferenceVisible((prev) => !prev);
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const interceptBeforeUnload = (e) => {
       e.stopImmediatePropagation();
     };
@@ -4035,7 +4102,7 @@ function InstagramDmComposition({
       window.removeEventListener("beforeunload", interceptBeforeUnload, { capture: true });
     };
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const handle = (0, import_remotion10.delayRender)("Loading fonts...");
     preloadFonts().then(() => {
       setFontsLoaded(true);
@@ -4935,10 +5002,10 @@ function isValidCaptionPreset(name) {
 }
 
 // src/hooks/index.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useFontsLoaded() {
-  const [loaded, setLoaded] = (0, import_react9.useState)(areFontsLoaded());
-  (0, import_react9.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react10.useState)(areFontsLoaded());
+  (0, import_react10.useEffect)(() => {
     if (!loaded) {
       preloadFonts().then(() => setLoaded(true)).catch(console.error);
     }
@@ -4946,8 +5013,8 @@ function useFontsLoaded() {
   return loaded;
 }
 function useImageLoader(src) {
-  const [image, setImage] = (0, import_react9.useState)(null);
-  (0, import_react9.useEffect)(() => {
+  const [image, setImage] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
     if (!src) {
       setImage(null);
       return;
@@ -4967,9 +5034,9 @@ function useImageLoader(src) {
   return image;
 }
 function useImagePreloader(sources) {
-  const [images, setImages] = (0, import_react9.useState)({});
-  const [loaded, setLoaded] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [images, setImages] = (0, import_react10.useState)({});
+  const [loaded, setLoaded] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     const entries = Object.entries(sources);
     if (entries.length === 0) {
       setLoaded(true);
@@ -5007,7 +5074,7 @@ function useImagePreloader(sources) {
   return { loaded, images };
 }
 function useResolvedPositions(elements, textValues) {
-  return (0, import_react9.useMemo)(() => {
+  return (0, import_react10.useMemo)(() => {
     if (elements.length === 0) {
       return { elements: [], errors: [] };
     }

package/dist/index.mjs

@@ -2593,6 +2593,7 @@ function IgMessageFooter({
 }
 
 // src/compositions/InstagramDmComposition/components/IgMessages.tsx
+import React8 from "react";
 import { Img as Img5 } from "remotion";
 import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULTS2 = {
@@ -2646,7 +2647,20 @@ function getInterpolatedSenderColor(bubbleCenter, messageAreaTop, messageAreaBot
   }
 }
 var FONT_FAMILY = '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif';
-function measureTextWidth(text, fontSize) {
+function calculateAutoWidthAndLines2({
+  text,
+  maxWidth,
+  paddingLeft,
+  paddingRight,
+  fontSize
+}) {
+  if (typeof document === "undefined") {
+    return { width: maxWidth, lines: [text] };
+  }
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  if (availableWidth <= 0) {
+    return { width: maxWidth, lines: [text] };
+  }
   const measureSpan = document.createElement("span");
   measureSpan.style.cssText = `
     position: absolute;
@@ -2659,10 +2673,67 @@ function measureTextWidth(text, fontSize) {
     white-space: nowrap;
   `;
   document.body.appendChild(measureSpan);
-  measureSpan.textContent = text;
-  const width = measureSpan.getBoundingClientRect().width;
+  const measureText = (textToMeasure) => {
+    measureSpan.textContent = textToMeasure;
+    return measureSpan.getBoundingClientRect().width;
+  };
+  const words = text.split(/(\s+)/);
+  const lines = [];
+  let currentLine = "";
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i];
+    if (word === "\n" || word === "\r\n") {
+      if (currentLine) lines.push(currentLine);
+      currentLine = "";
+      continue;
+    }
+    if (!word) continue;
+    if (/^\s+$/.test(word)) {
+      if (currentLine) currentLine += word;
+      continue;
+    }
+    const testLine = currentLine + word;
+    const testWidth = measureText(testLine);
+    const WRAP_TOLERANCE = 0.5;
+    if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
+      lines.push(currentLine.trimEnd());
+      currentLine = word;
+      const wordWidth = measureText(word);
+      if (wordWidth > availableWidth) {
+        let remainingWord = word;
+        while (remainingWord) {
+          let breakPoint = 1;
+          for (let j = 1; j <= remainingWord.length; j++) {
+            measureSpan.textContent = remainingWord.substring(0, j);
+            if (measureSpan.getBoundingClientRect().width > availableWidth) {
+              breakPoint = Math.max(1, j - 1);
+              break;
+            }
+            breakPoint = j;
+          }
+          if (breakPoint >= remainingWord.length) {
+            currentLine = remainingWord;
+            break;
+          } else {
+            lines.push(remainingWord.substring(0, breakPoint));
+            remainingWord = remainingWord.substring(breakPoint);
+          }
+        }
+      }
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine.trim()) lines.push(currentLine.trimEnd());
+  if (lines.length === 0) lines.push("");
+  let widestLineWidth = 0;
+  for (const line of lines) {
+    const lineWidth = measureText(line);
+    widestLineWidth = Math.max(widestLineWidth, lineWidth);
+  }
   document.body.removeChild(measureSpan);
-  return width;
+  const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  return { width: calculatedWidth, lines };
 }
 function IgMessages({
   messages = [],
@@ -2694,7 +2765,6 @@ function IgMessages({
   if (messages.length === 0) {
     return null;
   }
-  const maxTextWidth = bubbleMaxWidth - messagePaddingLeft - messagePaddingRight;
   const renderedMessages = [];
   let currentBottom = messageAreaBottom;
   for (let i = messages.length - 1; i >= 0; i--) {
@@ -2717,22 +2787,16 @@ function IgMessages({
         gap = messageGapDifferentUser;
       }
     }
-    const actualTextWidth = measureTextWidth(message.text, messageFontSize);
-    const fitsOnSingleLine = actualTextWidth <= maxTextWidth;
-    let lineCount;
-    if (fitsOnSingleLine) {
-      lineCount = 1;
-    } else {
-      lineCount = Math.ceil(actualTextWidth / maxTextWidth);
-    }
+    const { width: bubbleWidth, lines } = calculateAutoWidthAndLines2({
+      text: message.text,
+      maxWidth: bubbleMaxWidth,
+      paddingLeft: messagePaddingLeft,
+      paddingRight: messagePaddingRight,
+      fontSize: messageFontSize
+    });
+    const lineCount = lines.length;
     const textHeight = lineCount * messageLineHeight;
     const bubbleHeight = textHeight + messagePaddingTop + messagePaddingBottom;
-    let bubbleWidth;
-    if (fitsOnSingleLine) {
-      bubbleWidth = actualTextWidth + messagePaddingLeft + messagePaddingRight;
-    } else {
-      bubbleWidth = bubbleMaxWidth;
-    }
     const bubbleBottom = currentBottom - gap;
     const bubbleTop = bubbleBottom - bubbleHeight;
     let bubbleLeft;
@@ -2748,6 +2812,7 @@ function IgMessages({
       left: bubbleLeft,
       width: bubbleWidth,
       height: bubbleHeight,
+      lines,
       isFirstInGroup,
       isLastInGroup,
       isSingleMessage
@@ -2872,10 +2937,12 @@ function IgMessages({
                 fontFamily: '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
                 fontWeight: 400,
                 lineHeight: `${messageLineHeight}px`,
-                textAlign: "left",
-                wordBreak: "break-word"
+                textAlign: "left"
               },
-              children: rm.message.text
+              children: rm.lines.map((line, idx) => /* @__PURE__ */ jsxs9(React8.Fragment, { children: [
+                line,
+                idx < rm.lines.length - 1 && /* @__PURE__ */ jsx11("br", {})
+              ] }, idx))
             }
           )
         },

package/package.json

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