ugcinc-render 1.5.30 → 1.5.31

package/dist/index.js

@@ -388,51 +388,6 @@ 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({
@@ -731,37 +686,9 @@ 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: [
-      renderTextWithEmojis(line),
+      line,
       index < calculatedLines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {})
     ] }, index));
     if (backgroundColor) {
@@ -780,7 +707,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: renderTextWithEmojis(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 }) }) });
 }
 
 // src/components/ImageElement.tsx
@@ -1677,11 +1604,11 @@ function BackgroundImage({
 }
 
 // src/compositions/VideoEditorComposition.tsx
-var import_react5 = require("react");
+var import_react5 = __toESM(require("react"));
 var import_remotion4 = require("remotion");
 
 // src/components/VideoElement.tsx
-var import_react4 = require("react");
+var import_react4 = __toESM(require("react"));
 var import_remotion3 = require("remotion");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function fitModeToCss2(fit) {
@@ -1696,6 +1623,17 @@ function VideoElement({
 }) {
   const frame = (0, import_remotion3.useCurrentFrame)();
   const { fps } = (0, import_remotion3.useVideoConfig)();
+  import_react4.default.useEffect(() => {
+    console.log(`[VideoElement] Rendering segment ${segment.id}:`, {
+      src,
+      startFrame,
+      durationInFrames,
+      width: segment.width,
+      height: segment.height,
+      fit: segment.fit,
+      startTrim: segment.startTrim
+    });
+  }, [segment, src, startFrame, durationInFrames]);
   const fit = segment.fit ?? VIDEO_DEFAULTS.fit;
   const speed = segment.speed ?? VIDEO_DEFAULTS.speed;
   const volume = (segment.volume ?? VIDEO_DEFAULTS.volume) / 100;
@@ -1818,6 +1756,21 @@ function VideoEditorComposition({
 }) {
   const frame = (0, import_remotion4.useCurrentFrame)();
   const { fps, durationInFrames } = (0, import_remotion4.useVideoConfig)();
+  import_react5.default.useEffect(() => {
+    console.log("[VideoEditorComposition] Mounted with:", {
+      configChannels: config.channels.length,
+      sources,
+      textContent,
+      fps,
+      durationInFrames,
+      segments: config.channels.flatMap((c) => c.segments.map((s) => ({
+        id: s.id,
+        type: s.type,
+        source: s.source,
+        inputRef: s.inputRef
+      })))
+    });
+  }, [config, sources, textContent, fps, durationInFrames]);
   const segmentTimings = (0, import_react5.useMemo)(
     () => calculateSegmentTimings(config, fps),
     [config, fps]
@@ -1876,6 +1829,11 @@ function VideoEditorComposition({
       }
       if (segment.type === "image") {
         const src = getSource(segment);
+        console.log(`[VideoEditorComposition] Image segment ${segment.id}:`, {
+          inputRef: segment.inputRef,
+          src,
+          hasSource: !!src
+        });
         if (!src) {
           console.warn(`No source found for image segment: ${segment.id}`);
           return null;
@@ -1893,6 +1851,11 @@ function VideoEditorComposition({
       }
       if (segment.type === "video") {
         const src = getSource(segment);
+        console.log(`[VideoEditorComposition] Video segment ${segment.id}:`, {
+          inputRef: segment.inputRef,
+          src,
+          hasSource: !!src
+        });
         if (!src) {
           console.warn(`No source found for video segment: ${segment.id}`);
           return null;

package/dist/index.mjs

@@ -302,51 +302,6 @@ 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({
@@ -645,37 +600,9 @@ 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: [
-      renderTextWithEmojis(line),
+      line,
       index < calculatedLines.length - 1 && /* @__PURE__ */ jsx("br", {})
     ] }, index));
     if (backgroundColor) {
@@ -694,7 +621,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: renderTextWithEmojis(segment.text) }) }) });
+  return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) }) });
 }
 
 // src/components/ImageElement.tsx
@@ -1591,11 +1518,11 @@ function BackgroundImage({
 }
 
 // src/compositions/VideoEditorComposition.tsx
-import { useMemo as useMemo5 } from "react";
+import React5, { useMemo as useMemo5 } from "react";
 import { AbsoluteFill as AbsoluteFill2, useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3, Sequence, Audio } from "remotion";
 
 // src/components/VideoElement.tsx
-import { useMemo as useMemo4 } from "react";
+import React4, { useMemo as useMemo4 } from "react";
 import { OffthreadVideo, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function fitModeToCss2(fit) {
@@ -1610,6 +1537,17 @@ function VideoElement({
 }) {
   const frame = useCurrentFrame2();
   const { fps } = useVideoConfig2();
+  React4.useEffect(() => {
+    console.log(`[VideoElement] Rendering segment ${segment.id}:`, {
+      src,
+      startFrame,
+      durationInFrames,
+      width: segment.width,
+      height: segment.height,
+      fit: segment.fit,
+      startTrim: segment.startTrim
+    });
+  }, [segment, src, startFrame, durationInFrames]);
   const fit = segment.fit ?? VIDEO_DEFAULTS.fit;
   const speed = segment.speed ?? VIDEO_DEFAULTS.speed;
   const volume = (segment.volume ?? VIDEO_DEFAULTS.volume) / 100;
@@ -1732,6 +1670,21 @@ function VideoEditorComposition({
 }) {
   const frame = useCurrentFrame3();
   const { fps, durationInFrames } = useVideoConfig3();
+  React5.useEffect(() => {
+    console.log("[VideoEditorComposition] Mounted with:", {
+      configChannels: config.channels.length,
+      sources,
+      textContent,
+      fps,
+      durationInFrames,
+      segments: config.channels.flatMap((c) => c.segments.map((s) => ({
+        id: s.id,
+        type: s.type,
+        source: s.source,
+        inputRef: s.inputRef
+      })))
+    });
+  }, [config, sources, textContent, fps, durationInFrames]);
   const segmentTimings = useMemo5(
     () => calculateSegmentTimings(config, fps),
     [config, fps]
@@ -1790,6 +1743,11 @@ function VideoEditorComposition({
       }
       if (segment.type === "image") {
         const src = getSource(segment);
+        console.log(`[VideoEditorComposition] Image segment ${segment.id}:`, {
+          inputRef: segment.inputRef,
+          src,
+          hasSource: !!src
+        });
         if (!src) {
           console.warn(`No source found for image segment: ${segment.id}`);
           return null;
@@ -1807,6 +1765,11 @@ function VideoEditorComposition({
       }
       if (segment.type === "video") {
         const src = getSource(segment);
+        console.log(`[VideoEditorComposition] Video segment ${segment.id}:`, {
+          inputRef: segment.inputRef,
+          src,
+          hasSource: !!src
+        });
         if (!src) {
           console.warn(`No source found for video segment: ${segment.id}`);
           return null;

package/package.json

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