ugcinc-render 1.8.165 → 1.8.167

package/dist/index.js

@@ -5276,7 +5276,7 @@ var MESSAGE_DEFAULTS2 = {
   // Recipient padding
   recipientPaddingLeft: 37,
   recipientPaddingRight: 36,
-  multiLineRecipientPaddingRight: 36,
+  multiLineRecipientPaddingRight: 48,
   // Bubble corner radii
   bubbleRadiusNormal: 51,
   bubbleRadiusGrouped: 51,
@@ -5725,7 +5725,7 @@ var defaultIMessageDmProps = {
   multiLineSenderPaddingLeft: 34,
   recipientPaddingLeft: 37,
   recipientPaddingRight: 36,
-  multiLineRecipientPaddingRight: 36,
+  multiLineRecipientPaddingRight: 48,
   // Bubble corner radii
   bubbleRadiusNormal: 51,
   bubbleRadiusGrouped: 51,
@@ -5746,13 +5746,34 @@ var defaultIMessageDmProps = {
   ]
 };
 var IMessageDmComposition = (props) => {
+  const [fontsLoaded, setFontsLoaded] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
+    const handle = (0, import_remotion10.delayRender)("Loading fonts for IMessageDmComposition");
+    const loadFonts = async () => {
+      await preloadFonts();
+      if (typeof document !== "undefined" && document.fonts?.ready) {
+        await document.fonts.ready;
+      }
+    };
+    loadFonts().then(() => {
+      setFontsLoaded(true);
+      (0, import_remotion10.continueRender)(handle);
+    }).catch((err) => {
+      console.error("[IMessageDmComposition] Failed to load fonts:", err);
+      setFontsLoaded(true);
+      (0, import_remotion10.continueRender)(handle);
+    });
+  }, []);
   const mergedProps = (0, import_react10.useMemo)(() => ({
     ...defaultIMessageDmProps,
     ...props
   }), [props]);
   const conversionResult = (0, import_react10.useMemo)(() => {
+    if (!fontsLoaded) {
+      return { elements: [], width: mergedProps.width ?? 1206, height: mergedProps.height ?? 2622 };
+    }
     return convertPropsToElements2(mergedProps);
-  }, [mergedProps]);
+  }, [mergedProps, fontsLoaded]);
   const {
     width = 1206,
     height = 2622,

package/dist/index.mjs

@@ -4296,8 +4296,8 @@ function convertPublicToProps(input) {
 }
 
 // src/compositions/IMessageDmComposition/index.tsx
-import { useMemo as useMemo8 } from "react";
-import { Img as Img5, staticFile as staticFile3 } from "remotion";
+import { useEffect as useEffect4, useMemo as useMemo8, useState as useState4 } from "react";
+import { Img as Img5, staticFile as staticFile3, delayRender as delayRender3, continueRender as continueRender3 } from "remotion";
 
 // src/compositions/IMessageDmComposition/convertPropsToElements.ts
 var MESSAGE_DEFAULTS2 = {
@@ -4322,7 +4322,7 @@ var MESSAGE_DEFAULTS2 = {
   // Recipient padding
   recipientPaddingLeft: 37,
   recipientPaddingRight: 36,
-  multiLineRecipientPaddingRight: 36,
+  multiLineRecipientPaddingRight: 48,
   // Bubble corner radii
   bubbleRadiusNormal: 51,
   bubbleRadiusGrouped: 51,
@@ -4771,7 +4771,7 @@ var defaultIMessageDmProps = {
   multiLineSenderPaddingLeft: 34,
   recipientPaddingLeft: 37,
   recipientPaddingRight: 36,
-  multiLineRecipientPaddingRight: 36,
+  multiLineRecipientPaddingRight: 48,
   // Bubble corner radii
   bubbleRadiusNormal: 51,
   bubbleRadiusGrouped: 51,
@@ -4792,13 +4792,34 @@ var defaultIMessageDmProps = {
   ]
 };
 var IMessageDmComposition = (props) => {
+  const [fontsLoaded, setFontsLoaded] = useState4(false);
+  useEffect4(() => {
+    const handle = delayRender3("Loading fonts for IMessageDmComposition");
+    const loadFonts = async () => {
+      await preloadFonts();
+      if (typeof document !== "undefined" && document.fonts?.ready) {
+        await document.fonts.ready;
+      }
+    };
+    loadFonts().then(() => {
+      setFontsLoaded(true);
+      continueRender3(handle);
+    }).catch((err) => {
+      console.error("[IMessageDmComposition] Failed to load fonts:", err);
+      setFontsLoaded(true);
+      continueRender3(handle);
+    });
+  }, []);
   const mergedProps = useMemo8(() => ({
     ...defaultIMessageDmProps,
     ...props
   }), [props]);
   const conversionResult = useMemo8(() => {
+    if (!fontsLoaded) {
+      return { elements: [], width: mergedProps.width ?? 1206, height: mergedProps.height ?? 2622 };
+    }
     return convertPropsToElements2(mergedProps);
-  }, [mergedProps]);
+  }, [mergedProps, fontsLoaded]);
   const {
     width = 1206,
     height = 2622,
@@ -5473,10 +5494,10 @@ function MediaBubble({
 }
 
 // src/hooks/index.ts
-import { useEffect as useEffect4, useState as useState4, useMemo as useMemo9 } from "react";
+import { useEffect as useEffect5, useState as useState5, useMemo as useMemo9 } from "react";
 function useFontsLoaded() {
-  const [loaded, setLoaded] = useState4(areFontsLoaded());
-  useEffect4(() => {
+  const [loaded, setLoaded] = useState5(areFontsLoaded());
+  useEffect5(() => {
     if (!loaded) {
       preloadFonts().then(() => setLoaded(true)).catch(console.error);
     }
@@ -5484,8 +5505,8 @@ function useFontsLoaded() {
   return loaded;
 }
 function useImageLoader(src) {
-  const [image, setImage] = useState4(null);
-  useEffect4(() => {
+  const [image, setImage] = useState5(null);
+  useEffect5(() => {
     if (!src) {
       setImage(null);
       return;
@@ -5505,9 +5526,9 @@ function useImageLoader(src) {
   return image;
 }
 function useImagePreloader(sources) {
-  const [images, setImages] = useState4({});
-  const [loaded, setLoaded] = useState4(false);
-  useEffect4(() => {
+  const [images, setImages] = useState5({});
+  const [loaded, setLoaded] = useState5(false);
+  useEffect5(() => {
     const entries = Object.entries(sources);
     if (entries.length === 0) {
       setLoaded(true);

package/package.json

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