ugcinc-render 1.5.19 → 1.5.20

package/dist/index.js

@@ -1312,6 +1312,43 @@ function ImageEditorComposition({
   textValues = {},
   dynamicCrop
 }) {
+  const [fontsLoaded, setFontsLoaded] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    const handle = (0, import_remotion2.delayRender)("Loading fonts...");
+    const loadFonts = async () => {
+      try {
+        if (typeof document !== "undefined" && document.fonts) {
+          console.log("[Composition] Waiting for fonts to load...");
+          await document.fonts.ready;
+          const fontChecks = await Promise.all([
+            document.fonts.load('normal 48px "SF Pro"').catch(() => []),
+            document.fonts.load('bold 48px "SF Pro"').catch(() => []),
+            document.fonts.load('normal 48px "TikTok Sans"').catch(() => []),
+            document.fonts.load('bold 48px "TikTok Sans"').catch(() => [])
+          ]);
+          console.log("[Composition] Fonts loaded:", {
+            sfProNormal: document.fonts.check('normal 48px "SF Pro"'),
+            sfProBold: document.fonts.check('bold 48px "SF Pro"'),
+            tiktokNormal: document.fonts.check('normal 48px "TikTok Sans"'),
+            tiktokBold: document.fonts.check('bold 48px "TikTok Sans"')
+          });
+        }
+        setFontsLoaded(true);
+        (0, import_remotion2.continueRender)(handle);
+      } catch (err) {
+        console.error("[Composition] Font loading error:", err);
+        setFontsLoaded(true);
+        (0, import_remotion2.continueRender)(handle);
+      }
+    };
+    loadFonts();
+    return () => {
+      try {
+        (0, import_remotion2.continueRender)(handle);
+      } catch {
+      }
+    };
+  }, []);
   const canvasWidth = width ?? config?.width ?? 1080;
   const canvasHeight = height ?? config?.height ?? 1920;
   const resolvedElements = (0, import_react3.useMemo)(() => {
@@ -1366,6 +1403,9 @@ function ImageEditorComposition({
     return void 0;
   };
   const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
+  if (!fontsLoaded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_remotion2.AbsoluteFill, { style: { backgroundColor: containerBgColor } });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_remotion2.AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {

package/dist/index.mjs

@@ -8,8 +8,8 @@ var DIMENSION_PRESETS = {
 };
 
 // src/compositions/ImageEditorComposition.tsx
-import { useMemo as useMemo3 } from "react";
-import { AbsoluteFill, Img as Img2 } from "remotion";
+import { useMemo as useMemo3, useState, useEffect } from "react";
+import { AbsoluteFill, Img as Img2, delayRender, continueRender } from "remotion";
 
 // src/components/TextElement.tsx
 import React, { useMemo } from "react";
@@ -1226,6 +1226,43 @@ function ImageEditorComposition({
   textValues = {},
   dynamicCrop
 }) {
+  const [fontsLoaded, setFontsLoaded] = useState(false);
+  useEffect(() => {
+    const handle = delayRender("Loading fonts...");
+    const loadFonts = async () => {
+      try {
+        if (typeof document !== "undefined" && document.fonts) {
+          console.log("[Composition] Waiting for fonts to load...");
+          await document.fonts.ready;
+          const fontChecks = await Promise.all([
+            document.fonts.load('normal 48px "SF Pro"').catch(() => []),
+            document.fonts.load('bold 48px "SF Pro"').catch(() => []),
+            document.fonts.load('normal 48px "TikTok Sans"').catch(() => []),
+            document.fonts.load('bold 48px "TikTok Sans"').catch(() => [])
+          ]);
+          console.log("[Composition] Fonts loaded:", {
+            sfProNormal: document.fonts.check('normal 48px "SF Pro"'),
+            sfProBold: document.fonts.check('bold 48px "SF Pro"'),
+            tiktokNormal: document.fonts.check('normal 48px "TikTok Sans"'),
+            tiktokBold: document.fonts.check('bold 48px "TikTok Sans"')
+          });
+        }
+        setFontsLoaded(true);
+        continueRender(handle);
+      } catch (err) {
+        console.error("[Composition] Font loading error:", err);
+        setFontsLoaded(true);
+        continueRender(handle);
+      }
+    };
+    loadFonts();
+    return () => {
+      try {
+        continueRender(handle);
+      } catch {
+      }
+    };
+  }, []);
   const canvasWidth = width ?? config?.width ?? 1080;
   const canvasHeight = height ?? config?.height ?? 1920;
   const resolvedElements = useMemo3(() => {
@@ -1280,6 +1317,9 @@ function ImageEditorComposition({
     return void 0;
   };
   const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
+  if (!fontsLoaded) {
+    return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor } });
+  }
   return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -1792,10 +1832,10 @@ function generateOverlayId() {
 }
 
 // src/hooks/index.ts
-import { useEffect, useState, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect2, useState as useState2, useMemo as useMemo6 } from "react";
 function useFontsLoaded() {
-  const [loaded, setLoaded] = useState(areFontsLoaded());
-  useEffect(() => {
+  const [loaded, setLoaded] = useState2(areFontsLoaded());
+  useEffect2(() => {
     if (!loaded) {
       preloadFonts().then(() => setLoaded(true)).catch(console.error);
     }
@@ -1803,8 +1843,8 @@ function useFontsLoaded() {
   return loaded;
 }
 function useImageLoader(src) {
-  const [image, setImage] = useState(null);
-  useEffect(() => {
+  const [image, setImage] = useState2(null);
+  useEffect2(() => {
     if (!src) {
       setImage(null);
       return;
@@ -1824,9 +1864,9 @@ function useImageLoader(src) {
   return image;
 }
 function useImagePreloader(sources) {
-  const [images, setImages] = useState({});
-  const [loaded, setLoaded] = useState(false);
-  useEffect(() => {
+  const [images, setImages] = useState2({});
+  const [loaded, setLoaded] = useState2(false);
+  useEffect2(() => {
     const entries = Object.entries(sources);
     if (entries.length === 0) {
       setLoaded(true);

package/package.json

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