ugcinc-render 1.5.19 → 1.5.21

package/dist/index.js

@@ -1312,6 +1312,68 @@ 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 fontsToLoad = [
+            // SF Pro
+            'normal 48px "SF Pro"',
+            'bold 48px "SF Pro"',
+            '100 48px "SF Pro"',
+            '200 48px "SF Pro"',
+            '300 48px "SF Pro"',
+            '400 48px "SF Pro"',
+            '500 48px "SF Pro"',
+            '600 48px "SF Pro"',
+            '700 48px "SF Pro"',
+            '800 48px "SF Pro"',
+            '900 48px "SF Pro"',
+            // TikTok Sans
+            'normal 48px "TikTok Sans"',
+            'bold 48px "TikTok Sans"',
+            '400 48px "TikTok Sans"',
+            '500 48px "TikTok Sans"',
+            '600 48px "TikTok Sans"',
+            '700 48px "TikTok Sans"',
+            '800 48px "TikTok Sans"',
+            '900 48px "TikTok Sans"',
+            // Apple Color Emoji
+            'normal 48px "Apple Color Emoji"'
+          ];
+          await Promise.all(
+            fontsToLoad.map(
+              (font) => document.fonts.load(font).catch(() => [])
+            )
+          );
+          await document.fonts.ready;
+          console.log("[Composition] Fonts loaded:", {
+            sfPro: document.fonts.check('normal 48px "SF Pro"'),
+            tiktok: document.fonts.check('normal 48px "TikTok Sans"'),
+            emoji: document.fonts.check('normal 48px "Apple Color Emoji"'),
+            totalFonts: document.fonts.size
+          });
+        }
+        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 +1428,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,68 @@ 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 fontsToLoad = [
+            // SF Pro
+            'normal 48px "SF Pro"',
+            'bold 48px "SF Pro"',
+            '100 48px "SF Pro"',
+            '200 48px "SF Pro"',
+            '300 48px "SF Pro"',
+            '400 48px "SF Pro"',
+            '500 48px "SF Pro"',
+            '600 48px "SF Pro"',
+            '700 48px "SF Pro"',
+            '800 48px "SF Pro"',
+            '900 48px "SF Pro"',
+            // TikTok Sans
+            'normal 48px "TikTok Sans"',
+            'bold 48px "TikTok Sans"',
+            '400 48px "TikTok Sans"',
+            '500 48px "TikTok Sans"',
+            '600 48px "TikTok Sans"',
+            '700 48px "TikTok Sans"',
+            '800 48px "TikTok Sans"',
+            '900 48px "TikTok Sans"',
+            // Apple Color Emoji
+            'normal 48px "Apple Color Emoji"'
+          ];
+          await Promise.all(
+            fontsToLoad.map(
+              (font) => document.fonts.load(font).catch(() => [])
+            )
+          );
+          await document.fonts.ready;
+          console.log("[Composition] Fonts loaded:", {
+            sfPro: document.fonts.check('normal 48px "SF Pro"'),
+            tiktok: document.fonts.check('normal 48px "TikTok Sans"'),
+            emoji: document.fonts.check('normal 48px "Apple Color Emoji"'),
+            totalFonts: document.fonts.size
+          });
+        }
+        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 +1342,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 +1857,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 +1868,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 +1889,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.21",
   "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",