ugcinc-render 1.8.110 → 1.8.112

package/dist/index.js

@@ -3547,7 +3547,7 @@ var MESSAGE_DEFAULTS = {
   profilePicSize: 83,
   profilePicGap: 37
 };
-var FONT_FAMILY = '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif';
+var FONT_FAMILY = getFontFamily("apple");
 function calculateAutoWidthAndLines2({
   text,
   maxWidth,
@@ -3563,6 +3563,10 @@ function calculateAutoWidthAndLines2({
   if (availableWidth <= 0) {
     return { width: maxWidth, lines: [text] };
   }
+  const fontLoaded = typeof document.fonts !== "undefined" ? document.fonts.check(`normal ${fontSize}px "SF Pro"`) : false;
+  if (!fontLoaded) {
+    console.warn("[convertPropsToElements] SF Pro font not loaded! Text measurement may be inaccurate.");
+  }
   const measureSpan = document.createElement("span");
   measureSpan.style.cssText = `
     position: absolute;
@@ -3570,7 +3574,7 @@ function calculateAutoWidthAndLines2({
     pointer-events: none;
     font-family: ${FONT_FAMILY};
     font-size: ${fontSize}px;
-    font-weight: 400;
+    font-weight: normal;
     letter-spacing: ${letterSpacing}px;
     white-space: nowrap;
   `;
@@ -4049,6 +4053,28 @@ function InstagramDmComposition(props) {
   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 [fontsLoaded, setFontsLoaded] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    const handle = (0, import_remotion9.delayRender)("Loading fonts for InstagramDmComposition");
+    const loadFonts = async () => {
+      await preloadFonts();
+      if (typeof document !== "undefined" && document.fonts?.ready) {
+        await document.fonts.ready;
+      }
+      if (typeof document !== "undefined" && document.fonts) {
+        const sfProLoaded = document.fonts.check('normal 51px "SF Pro"');
+        console.log("[InstagramDmComposition] Font check - SF Pro loaded:", sfProLoaded);
+      }
+    };
+    loadFonts().then(() => {
+      setFontsLoaded(true);
+      (0, import_remotion9.continueRender)(handle);
+    }).catch((err) => {
+      console.error("Failed to load fonts:", err);
+      setFontsLoaded(true);
+      (0, import_remotion9.continueRender)(handle);
+    });
+  }, []);
   const handleZoomChange = (0, import_react8.useCallback)((newZoom, newScrollX, newScrollY) => {
     setZoom(newZoom);
     setScrollX(newScrollX);
@@ -4058,8 +4084,11 @@ function InstagramDmComposition(props) {
     setReferenceVisible((prev) => !prev);
   }, []);
   const { elements, imageUrls } = (0, import_react8.useMemo)(() => {
+    if (!fontsLoaded) {
+      return { elements: [], imageUrls: {} };
+    }
     return convertPropsToElements(props);
-  }, [props]);
+  }, [props, fontsLoaded]);
   const colors = getThemeColors(theme);
   const zoomScale = zoom / 100;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(

package/dist/index.mjs

@@ -1947,8 +1947,8 @@ function ScreenshotAnimation({
 }
 
 // src/compositions/InstagramDmComposition/index.tsx
-import { useCallback as useCallback2, useMemo as useMemo7, useState as useState3 } from "react";
-import { AbsoluteFill as AbsoluteFill5, Img as Img4 } from "remotion";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo7, useState as useState3 } from "react";
+import { AbsoluteFill as AbsoluteFill5, Img as Img4, continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
 
 // src/compositions/InstagramDmComposition/theme.ts
 var IG_THEME_COLORS = {
@@ -2616,7 +2616,7 @@ var MESSAGE_DEFAULTS = {
   profilePicSize: 83,
   profilePicGap: 37
 };
-var FONT_FAMILY = '"SF Pro", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif';
+var FONT_FAMILY = getFontFamily("apple");
 function calculateAutoWidthAndLines2({
   text,
   maxWidth,
@@ -2632,6 +2632,10 @@ function calculateAutoWidthAndLines2({
   if (availableWidth <= 0) {
     return { width: maxWidth, lines: [text] };
   }
+  const fontLoaded = typeof document.fonts !== "undefined" ? document.fonts.check(`normal ${fontSize}px "SF Pro"`) : false;
+  if (!fontLoaded) {
+    console.warn("[convertPropsToElements] SF Pro font not loaded! Text measurement may be inaccurate.");
+  }
   const measureSpan = document.createElement("span");
   measureSpan.style.cssText = `
     position: absolute;
@@ -2639,7 +2643,7 @@ function calculateAutoWidthAndLines2({
     pointer-events: none;
     font-family: ${FONT_FAMILY};
     font-size: ${fontSize}px;
-    font-weight: 400;
+    font-weight: normal;
     letter-spacing: ${letterSpacing}px;
     white-space: nowrap;
   `;
@@ -3118,6 +3122,28 @@ function InstagramDmComposition(props) {
   const [scrollX, setScrollX] = useState3(0);
   const [scrollY, setScrollY] = useState3(0);
   const [referenceVisible, setReferenceVisible] = useState3(true);
+  const [fontsLoaded, setFontsLoaded] = useState3(false);
+  useEffect3(() => {
+    const handle = delayRender2("Loading fonts for InstagramDmComposition");
+    const loadFonts = async () => {
+      await preloadFonts();
+      if (typeof document !== "undefined" && document.fonts?.ready) {
+        await document.fonts.ready;
+      }
+      if (typeof document !== "undefined" && document.fonts) {
+        const sfProLoaded = document.fonts.check('normal 51px "SF Pro"');
+        console.log("[InstagramDmComposition] Font check - SF Pro loaded:", sfProLoaded);
+      }
+    };
+    loadFonts().then(() => {
+      setFontsLoaded(true);
+      continueRender2(handle);
+    }).catch((err) => {
+      console.error("Failed to load fonts:", err);
+      setFontsLoaded(true);
+      continueRender2(handle);
+    });
+  }, []);
   const handleZoomChange = useCallback2((newZoom, newScrollX, newScrollY) => {
     setZoom(newZoom);
     setScrollX(newScrollX);
@@ -3127,8 +3153,11 @@ function InstagramDmComposition(props) {
     setReferenceVisible((prev) => !prev);
   }, []);
   const { elements, imageUrls } = useMemo7(() => {
+    if (!fontsLoaded) {
+      return { elements: [], imageUrls: {} };
+    }
     return convertPropsToElements(props);
-  }, [props]);
+  }, [props, fontsLoaded]);
   const colors = getThemeColors(theme);
   const zoomScale = zoom / 100;
   return /* @__PURE__ */ jsxs8(
@@ -3591,10 +3620,10 @@ function MediaBubble({
 }
 
 // src/hooks/index.ts
-import { useEffect as useEffect3, useState as useState4, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect4, useState as useState4, useMemo as useMemo8 } from "react";
 function useFontsLoaded() {
   const [loaded, setLoaded] = useState4(areFontsLoaded());
-  useEffect3(() => {
+  useEffect4(() => {
     if (!loaded) {
       preloadFonts().then(() => setLoaded(true)).catch(console.error);
     }
@@ -3603,7 +3632,7 @@ function useFontsLoaded() {
 }
 function useImageLoader(src) {
   const [image, setImage] = useState4(null);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!src) {
       setImage(null);
       return;
@@ -3625,7 +3654,7 @@ function useImageLoader(src) {
 function useImagePreloader(sources) {
   const [images, setImages] = useState4({});
   const [loaded, setLoaded] = useState4(false);
-  useEffect3(() => {
+  useEffect4(() => {
     const entries = Object.entries(sources);
     if (entries.length === 0) {
       setLoaded(true);

package/package.json

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