ugcinc-render 1.5.28 → 1.5.30

package/dist/index.js

@@ -388,6 +388,51 @@ function hexToRgba(hex, opacity = 100) {
   return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
 }
 
+// src/utils/emoji.ts
+var APPLE_EMOJI_CDN_BASE = "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/";
+function emojiToUnified(emoji) {
+  const codePoints = [];
+  for (const codePoint of emoji) {
+    const hex = codePoint.codePointAt(0)?.toString(16);
+    if (hex) {
+      codePoints.push(hex);
+    }
+  }
+  return codePoints.join("-");
+}
+function getAppleEmojiUrl(emoji) {
+  const unified = emojiToUnified(emoji);
+  return `${APPLE_EMOJI_CDN_BASE}${unified}.png`;
+}
+var EMOJI_REGEX = /(?:\p{Emoji_Presentation}|\p{Emoji}\uFE0F)(?:\p{Emoji_Modifier}|\uFE0F|\u200D(?:\p{Emoji_Presentation}|\p{Emoji}\uFE0F)(?:\p{Emoji_Modifier})?)*|\p{Regional_Indicator}{2}/gu;
+function splitTextAndEmojis(text) {
+  const segments = [];
+  let lastIndex = 0;
+  EMOJI_REGEX.lastIndex = 0;
+  let match;
+  while ((match = EMOJI_REGEX.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({
+        type: "text",
+        content: text.slice(lastIndex, match.index)
+      });
+    }
+    segments.push({
+      type: "emoji",
+      content: match[0],
+      imageUrl: getAppleEmojiUrl(match[0])
+    });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    segments.push({
+      type: "text",
+      content: text.slice(lastIndex)
+    });
+  }
+  return segments;
+}
+
 // src/components/TextElement.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function calculateAutoWidthAndLines({
@@ -686,9 +731,37 @@ function TextElement({ segment, scale = 1 }) {
     autoWidth,
     verticalAlign
   ]);
+  const hasStroke = strokeWidth > 0 && strokeColor;
+  const renderTextWithEmojis = (text) => {
+    if (!hasStroke) {
+      return text;
+    }
+    const segments = splitTextAndEmojis(text);
+    if (segments.every((s) => s.type === "text")) {
+      return text;
+    }
+    return segments.map((segment2, i) => {
+      if (segment2.type === "text") {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: segment2.content }, i);
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          style: {
+            textShadow: "none",
+            WebkitTextStroke: "initial",
+            // Ensure emoji renders properly
+            display: "inline"
+          },
+          children: segment2.content
+        },
+        i
+      );
+    });
+  };
   if (autoWidth) {
     const textContent = calculatedLines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
-      line,
+      renderTextWithEmojis(line),
       index < calculatedLines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {})
     ] }, index));
     if (backgroundColor) {
@@ -707,7 +780,7 @@ function TextElement({ segment, scale = 1 }) {
     }
     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, children: textContent }) }) });
   }
-  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 }) }) });
+  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: renderTextWithEmojis(segment.text) }) }) });
 }
 
 // src/components/ImageElement.tsx
@@ -1675,7 +1748,7 @@ function VideoElement({
     {
       src,
       style: videoStyle,
-      startFrom: startFromFrames,
+      trimBefore: startFromFrames,
       playbackRate: speed,
       volume
     }

package/dist/index.mjs

@@ -302,6 +302,51 @@ function hexToRgba(hex, opacity = 100) {
   return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
 }
 
+// src/utils/emoji.ts
+var APPLE_EMOJI_CDN_BASE = "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/";
+function emojiToUnified(emoji) {
+  const codePoints = [];
+  for (const codePoint of emoji) {
+    const hex = codePoint.codePointAt(0)?.toString(16);
+    if (hex) {
+      codePoints.push(hex);
+    }
+  }
+  return codePoints.join("-");
+}
+function getAppleEmojiUrl(emoji) {
+  const unified = emojiToUnified(emoji);
+  return `${APPLE_EMOJI_CDN_BASE}${unified}.png`;
+}
+var EMOJI_REGEX = /(?:\p{Emoji_Presentation}|\p{Emoji}\uFE0F)(?:\p{Emoji_Modifier}|\uFE0F|\u200D(?:\p{Emoji_Presentation}|\p{Emoji}\uFE0F)(?:\p{Emoji_Modifier})?)*|\p{Regional_Indicator}{2}/gu;
+function splitTextAndEmojis(text) {
+  const segments = [];
+  let lastIndex = 0;
+  EMOJI_REGEX.lastIndex = 0;
+  let match;
+  while ((match = EMOJI_REGEX.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({
+        type: "text",
+        content: text.slice(lastIndex, match.index)
+      });
+    }
+    segments.push({
+      type: "emoji",
+      content: match[0],
+      imageUrl: getAppleEmojiUrl(match[0])
+    });
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    segments.push({
+      type: "text",
+      content: text.slice(lastIndex)
+    });
+  }
+  return segments;
+}
+
 // src/components/TextElement.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function calculateAutoWidthAndLines({
@@ -600,9 +645,37 @@ function TextElement({ segment, scale = 1 }) {
     autoWidth,
     verticalAlign
   ]);
+  const hasStroke = strokeWidth > 0 && strokeColor;
+  const renderTextWithEmojis = (text) => {
+    if (!hasStroke) {
+      return text;
+    }
+    const segments = splitTextAndEmojis(text);
+    if (segments.every((s) => s.type === "text")) {
+      return text;
+    }
+    return segments.map((segment2, i) => {
+      if (segment2.type === "text") {
+        return /* @__PURE__ */ jsx(React.Fragment, { children: segment2.content }, i);
+      }
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            textShadow: "none",
+            WebkitTextStroke: "initial",
+            // Ensure emoji renders properly
+            display: "inline"
+          },
+          children: segment2.content
+        },
+        i
+      );
+    });
+  };
   if (autoWidth) {
     const textContent = calculatedLines.map((line, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      line,
+      renderTextWithEmojis(line),
       index < calculatedLines.length - 1 && /* @__PURE__ */ jsx("br", {})
     ] }, index));
     if (backgroundColor) {
@@ -621,7 +694,7 @@ function TextElement({ segment, scale = 1 }) {
     }
     return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: textContent }) }) });
   }
-  return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) }) });
+  return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: renderTextWithEmojis(segment.text) }) }) });
 }
 
 // src/components/ImageElement.tsx
@@ -1589,7 +1662,7 @@ function VideoElement({
     {
       src,
       style: videoStyle,
-      startFrom: startFromFrames,
+      trimBefore: startFromFrames,
       playbackRate: speed,
       volume
     }

package/package.json

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