ugcinc-render 1.5.16 → 1.5.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +5 -1
  2. package/dist/index.d.ts +5 -1
  3. package/dist/index.js +114 -29
  4. package/dist/index.mjs +113 -29
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1002,6 +1002,10 @@ declare function preloadFonts(): Promise<void>;
1002
1002
  * Check if fonts are loaded
1003
1003
  */
1004
1004
  declare function areFontsLoaded(): boolean;
1005
+ /**
1006
+ * Debug utility to log current font status
1007
+ */
1008
+ declare function debugFontStatus(): void;
1005
1009
 
1006
1010
  /**
1007
1011
  * Fit calculation utilities for media positioning
@@ -1357,4 +1361,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
1357
1361
 
1358
1362
  declare const RenderRoot: React.FC;
1359
1363
 
1360
- export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
1364
+ export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
package/dist/index.d.ts CHANGED
@@ -1002,6 +1002,10 @@ declare function preloadFonts(): Promise<void>;
1002
1002
  * Check if fonts are loaded
1003
1003
  */
1004
1004
  declare function areFontsLoaded(): boolean;
1005
+ /**
1006
+ * Debug utility to log current font status
1007
+ */
1008
+ declare function debugFontStatus(): void;
1005
1009
 
1006
1010
  /**
1007
1011
  * Fit calculation utilities for media positioning
@@ -1357,4 +1361,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
1357
1361
 
1358
1362
  declare const RenderRoot: React.FC;
1359
1363
 
1360
- export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
1364
+ export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
package/dist/index.js CHANGED
@@ -56,6 +56,7 @@ __export(index_exports, {
56
56
  calculateLineWidth: () => calculateLineWidth,
57
57
  calculateTimelineContentEnd: () => calculateTimelineContentEnd,
58
58
  canSetAsReference: () => canSetAsReference,
59
+ debugFontStatus: () => debugFontStatus,
59
60
  defaultOffset: () => defaultOffset,
60
61
  formatTime: () => formatTime,
61
62
  generateOverlayId: () => generateOverlayId,
@@ -190,43 +191,117 @@ var FONT_URLS = {
190
191
  }
191
192
  };
192
193
  async function preloadFonts() {
194
+ console.log("[ugcinc-render/fonts] preloadFonts() called");
193
195
  if (typeof document !== "undefined") {
194
- const fontPromises = [];
195
- const tiktokRegular = new FontFace(
196
- "TikTok Sans",
197
- `url(${FONT_URLS.tiktok.regular})`,
198
- { weight: "normal" }
199
- );
200
- fontPromises.push(tiktokRegular.load());
201
- const tiktokBold = new FontFace(
202
- "TikTok Sans",
203
- `url(${FONT_URLS.tiktok.bold})`,
204
- { weight: "bold" }
205
- );
206
- fontPromises.push(tiktokBold.load());
207
- const sfPro = new FontFace(
208
- "SF Pro",
209
- `url(${FONT_URLS.apple.regular})`,
210
- { weight: "normal" }
211
- );
212
- fontPromises.push(sfPro.load());
213
- const appleEmoji = new FontFace(
214
- "Apple Color Emoji",
215
- `url(${FONT_URLS.emoji.apple})`,
216
- { weight: "normal" }
217
- );
218
- fontPromises.push(appleEmoji.load());
219
- const loadedFonts = await Promise.all(fontPromises);
220
- loadedFonts.forEach((font) => {
221
- document.fonts.add(font);
196
+ console.log("[ugcinc-render/fonts] Browser environment detected, loading fonts...");
197
+ const fontResults = [];
198
+ try {
199
+ const tiktokRegular = new FontFace(
200
+ "TikTok Sans",
201
+ `url(${FONT_URLS.tiktok.regular})`,
202
+ { weight: "normal" }
203
+ );
204
+ console.log(`[ugcinc-render/fonts] Loading TikTok Sans Regular from: ${FONT_URLS.tiktok.regular}`);
205
+ await tiktokRegular.load();
206
+ document.fonts.add(tiktokRegular);
207
+ fontResults.push({ name: "TikTok Sans Regular", status: "success" });
208
+ } catch (err) {
209
+ const errorMsg = err instanceof Error ? err.message : String(err);
210
+ console.error(`[ugcinc-render/fonts] Failed to load TikTok Sans Regular:`, errorMsg);
211
+ fontResults.push({ name: "TikTok Sans Regular", status: "error", error: errorMsg });
212
+ }
213
+ try {
214
+ const tiktokBold = new FontFace(
215
+ "TikTok Sans",
216
+ `url(${FONT_URLS.tiktok.bold})`,
217
+ { weight: "bold" }
218
+ );
219
+ console.log(`[ugcinc-render/fonts] Loading TikTok Sans Bold from: ${FONT_URLS.tiktok.bold}`);
220
+ await tiktokBold.load();
221
+ document.fonts.add(tiktokBold);
222
+ fontResults.push({ name: "TikTok Sans Bold", status: "success" });
223
+ } catch (err) {
224
+ const errorMsg = err instanceof Error ? err.message : String(err);
225
+ console.error(`[ugcinc-render/fonts] Failed to load TikTok Sans Bold:`, errorMsg);
226
+ fontResults.push({ name: "TikTok Sans Bold", status: "error", error: errorMsg });
227
+ }
228
+ try {
229
+ const sfPro = new FontFace(
230
+ "SF Pro",
231
+ `url(${FONT_URLS.apple.regular})`,
232
+ { weight: "normal" }
233
+ );
234
+ console.log(`[ugcinc-render/fonts] Loading SF Pro from: ${FONT_URLS.apple.regular}`);
235
+ await sfPro.load();
236
+ document.fonts.add(sfPro);
237
+ fontResults.push({ name: "SF Pro", status: "success" });
238
+ } catch (err) {
239
+ const errorMsg = err instanceof Error ? err.message : String(err);
240
+ console.error(`[ugcinc-render/fonts] Failed to load SF Pro:`, errorMsg);
241
+ fontResults.push({ name: "SF Pro", status: "error", error: errorMsg });
242
+ }
243
+ try {
244
+ const appleEmoji = new FontFace(
245
+ "Apple Color Emoji",
246
+ `url(${FONT_URLS.emoji.apple})`,
247
+ { weight: "normal" }
248
+ );
249
+ console.log(`[ugcinc-render/fonts] Loading Apple Color Emoji from: ${FONT_URLS.emoji.apple}`);
250
+ await appleEmoji.load();
251
+ document.fonts.add(appleEmoji);
252
+ fontResults.push({ name: "Apple Color Emoji", status: "success" });
253
+ } catch (err) {
254
+ const errorMsg = err instanceof Error ? err.message : String(err);
255
+ console.error(`[ugcinc-render/fonts] Failed to load Apple Color Emoji:`, errorMsg);
256
+ fontResults.push({ name: "Apple Color Emoji", status: "error", error: errorMsg });
257
+ }
258
+ console.log("[ugcinc-render/fonts] Font loading complete. Results:", fontResults);
259
+ const availableFonts = [];
260
+ document.fonts.forEach((font) => {
261
+ availableFonts.push(`${font.family} (${font.weight}, ${font.status})`);
222
262
  });
263
+ console.log("[ugcinc-render/fonts] Available fonts in document:", availableFonts);
264
+ } else {
265
+ console.log("[ugcinc-render/fonts] Not in browser environment, skipping font loading");
223
266
  }
224
267
  }
225
268
  function areFontsLoaded() {
226
269
  if (typeof document === "undefined") {
270
+ console.log("[ugcinc-render/fonts] areFontsLoaded: Not in browser environment");
227
271
  return false;
228
272
  }
229
- return document.fonts.check('normal 16px "TikTok Sans"') && document.fonts.check('bold 16px "TikTok Sans"') && document.fonts.check('normal 16px "SF Pro"') && document.fonts.check('normal 16px "Apple Color Emoji"');
273
+ const tiktokRegular = document.fonts.check('normal 16px "TikTok Sans"');
274
+ const tiktokBold = document.fonts.check('bold 16px "TikTok Sans"');
275
+ const sfPro = document.fonts.check('normal 16px "SF Pro"');
276
+ const appleEmoji = document.fonts.check('normal 16px "Apple Color Emoji"');
277
+ console.log("[ugcinc-render/fonts] areFontsLoaded check:", {
278
+ tiktokRegular,
279
+ tiktokBold,
280
+ sfPro,
281
+ appleEmoji
282
+ });
283
+ return tiktokRegular && tiktokBold && sfPro && appleEmoji;
284
+ }
285
+ function debugFontStatus() {
286
+ console.log("[ugcinc-render/fonts] === FONT DEBUG STATUS ===");
287
+ if (typeof document === "undefined") {
288
+ console.log("[ugcinc-render/fonts] Not in browser environment");
289
+ return;
290
+ }
291
+ console.log("[ugcinc-render/fonts] Font checks:");
292
+ console.log(" - TikTok Sans (normal):", document.fonts.check('normal 16px "TikTok Sans"'));
293
+ console.log(" - TikTok Sans (bold):", document.fonts.check('bold 16px "TikTok Sans"'));
294
+ console.log(" - SF Pro:", document.fonts.check('normal 16px "SF Pro"'));
295
+ console.log(" - Apple Color Emoji:", document.fonts.check('normal 16px "Apple Color Emoji"'));
296
+ console.log("[ugcinc-render/fonts] All fonts in document.fonts:");
297
+ document.fonts.forEach((font) => {
298
+ console.log(` - ${font.family}: weight=${font.weight}, style=${font.style}, status=${font.status}`);
299
+ });
300
+ console.log("[ugcinc-render/fonts] Font family stacks:");
301
+ console.log(" - tiktok:", FONT_FAMILIES.tiktok);
302
+ console.log(" - apple:", FONT_FAMILIES.apple);
303
+ console.log(" - arial:", FONT_FAMILIES.arial);
304
+ console.log("[ugcinc-render/fonts] === END FONT DEBUG ===");
230
305
  }
231
306
 
232
307
  // src/utils/text.ts
@@ -418,6 +493,15 @@ function calculateAutoWidthAndLines({
418
493
  return { width: calculatedWidth, lines };
419
494
  }
420
495
  function TextElement({ segment, scale = 1 }) {
496
+ import_react.default.useEffect(() => {
497
+ const fontFamily2 = getFontFamily(segment.fontType ?? TEXT_DEFAULTS.fontType);
498
+ console.log("[ugcinc-render/TextElement] Rendering with:", {
499
+ text: segment.text?.substring(0, 50) + (segment.text?.length > 50 ? "..." : ""),
500
+ fontType: segment.fontType ?? TEXT_DEFAULTS.fontType,
501
+ fontFamily: fontFamily2,
502
+ hasEmojis: /[\u{1F300}-\u{1F9FF}]/u.test(segment.text || "")
503
+ });
504
+ }, [segment.text, segment.fontType]);
421
505
  const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
422
506
  const fontSize = (segment.fontSize ?? TEXT_DEFAULTS.fontSize) * scale;
423
507
  const fontWeight = segment.fontWeight ?? TEXT_DEFAULTS.fontWeight;
@@ -1958,6 +2042,7 @@ var RenderRoot = () => {
1958
2042
  calculateLineWidth,
1959
2043
  calculateTimelineContentEnd,
1960
2044
  canSetAsReference,
2045
+ debugFontStatus,
1961
2046
  defaultOffset,
1962
2047
  formatTime,
1963
2048
  generateOverlayId,
package/dist/index.mjs CHANGED
@@ -105,43 +105,117 @@ var FONT_URLS = {
105
105
  }
106
106
  };
107
107
  async function preloadFonts() {
108
+ console.log("[ugcinc-render/fonts] preloadFonts() called");
108
109
  if (typeof document !== "undefined") {
109
- const fontPromises = [];
110
- const tiktokRegular = new FontFace(
111
- "TikTok Sans",
112
- `url(${FONT_URLS.tiktok.regular})`,
113
- { weight: "normal" }
114
- );
115
- fontPromises.push(tiktokRegular.load());
116
- const tiktokBold = new FontFace(
117
- "TikTok Sans",
118
- `url(${FONT_URLS.tiktok.bold})`,
119
- { weight: "bold" }
120
- );
121
- fontPromises.push(tiktokBold.load());
122
- const sfPro = new FontFace(
123
- "SF Pro",
124
- `url(${FONT_URLS.apple.regular})`,
125
- { weight: "normal" }
126
- );
127
- fontPromises.push(sfPro.load());
128
- const appleEmoji = new FontFace(
129
- "Apple Color Emoji",
130
- `url(${FONT_URLS.emoji.apple})`,
131
- { weight: "normal" }
132
- );
133
- fontPromises.push(appleEmoji.load());
134
- const loadedFonts = await Promise.all(fontPromises);
135
- loadedFonts.forEach((font) => {
136
- document.fonts.add(font);
110
+ console.log("[ugcinc-render/fonts] Browser environment detected, loading fonts...");
111
+ const fontResults = [];
112
+ try {
113
+ const tiktokRegular = new FontFace(
114
+ "TikTok Sans",
115
+ `url(${FONT_URLS.tiktok.regular})`,
116
+ { weight: "normal" }
117
+ );
118
+ console.log(`[ugcinc-render/fonts] Loading TikTok Sans Regular from: ${FONT_URLS.tiktok.regular}`);
119
+ await tiktokRegular.load();
120
+ document.fonts.add(tiktokRegular);
121
+ fontResults.push({ name: "TikTok Sans Regular", status: "success" });
122
+ } catch (err) {
123
+ const errorMsg = err instanceof Error ? err.message : String(err);
124
+ console.error(`[ugcinc-render/fonts] Failed to load TikTok Sans Regular:`, errorMsg);
125
+ fontResults.push({ name: "TikTok Sans Regular", status: "error", error: errorMsg });
126
+ }
127
+ try {
128
+ const tiktokBold = new FontFace(
129
+ "TikTok Sans",
130
+ `url(${FONT_URLS.tiktok.bold})`,
131
+ { weight: "bold" }
132
+ );
133
+ console.log(`[ugcinc-render/fonts] Loading TikTok Sans Bold from: ${FONT_URLS.tiktok.bold}`);
134
+ await tiktokBold.load();
135
+ document.fonts.add(tiktokBold);
136
+ fontResults.push({ name: "TikTok Sans Bold", status: "success" });
137
+ } catch (err) {
138
+ const errorMsg = err instanceof Error ? err.message : String(err);
139
+ console.error(`[ugcinc-render/fonts] Failed to load TikTok Sans Bold:`, errorMsg);
140
+ fontResults.push({ name: "TikTok Sans Bold", status: "error", error: errorMsg });
141
+ }
142
+ try {
143
+ const sfPro = new FontFace(
144
+ "SF Pro",
145
+ `url(${FONT_URLS.apple.regular})`,
146
+ { weight: "normal" }
147
+ );
148
+ console.log(`[ugcinc-render/fonts] Loading SF Pro from: ${FONT_URLS.apple.regular}`);
149
+ await sfPro.load();
150
+ document.fonts.add(sfPro);
151
+ fontResults.push({ name: "SF Pro", status: "success" });
152
+ } catch (err) {
153
+ const errorMsg = err instanceof Error ? err.message : String(err);
154
+ console.error(`[ugcinc-render/fonts] Failed to load SF Pro:`, errorMsg);
155
+ fontResults.push({ name: "SF Pro", status: "error", error: errorMsg });
156
+ }
157
+ try {
158
+ const appleEmoji = new FontFace(
159
+ "Apple Color Emoji",
160
+ `url(${FONT_URLS.emoji.apple})`,
161
+ { weight: "normal" }
162
+ );
163
+ console.log(`[ugcinc-render/fonts] Loading Apple Color Emoji from: ${FONT_URLS.emoji.apple}`);
164
+ await appleEmoji.load();
165
+ document.fonts.add(appleEmoji);
166
+ fontResults.push({ name: "Apple Color Emoji", status: "success" });
167
+ } catch (err) {
168
+ const errorMsg = err instanceof Error ? err.message : String(err);
169
+ console.error(`[ugcinc-render/fonts] Failed to load Apple Color Emoji:`, errorMsg);
170
+ fontResults.push({ name: "Apple Color Emoji", status: "error", error: errorMsg });
171
+ }
172
+ console.log("[ugcinc-render/fonts] Font loading complete. Results:", fontResults);
173
+ const availableFonts = [];
174
+ document.fonts.forEach((font) => {
175
+ availableFonts.push(`${font.family} (${font.weight}, ${font.status})`);
137
176
  });
177
+ console.log("[ugcinc-render/fonts] Available fonts in document:", availableFonts);
178
+ } else {
179
+ console.log("[ugcinc-render/fonts] Not in browser environment, skipping font loading");
138
180
  }
139
181
  }
140
182
  function areFontsLoaded() {
141
183
  if (typeof document === "undefined") {
184
+ console.log("[ugcinc-render/fonts] areFontsLoaded: Not in browser environment");
142
185
  return false;
143
186
  }
144
- return document.fonts.check('normal 16px "TikTok Sans"') && document.fonts.check('bold 16px "TikTok Sans"') && document.fonts.check('normal 16px "SF Pro"') && document.fonts.check('normal 16px "Apple Color Emoji"');
187
+ const tiktokRegular = document.fonts.check('normal 16px "TikTok Sans"');
188
+ const tiktokBold = document.fonts.check('bold 16px "TikTok Sans"');
189
+ const sfPro = document.fonts.check('normal 16px "SF Pro"');
190
+ const appleEmoji = document.fonts.check('normal 16px "Apple Color Emoji"');
191
+ console.log("[ugcinc-render/fonts] areFontsLoaded check:", {
192
+ tiktokRegular,
193
+ tiktokBold,
194
+ sfPro,
195
+ appleEmoji
196
+ });
197
+ return tiktokRegular && tiktokBold && sfPro && appleEmoji;
198
+ }
199
+ function debugFontStatus() {
200
+ console.log("[ugcinc-render/fonts] === FONT DEBUG STATUS ===");
201
+ if (typeof document === "undefined") {
202
+ console.log("[ugcinc-render/fonts] Not in browser environment");
203
+ return;
204
+ }
205
+ console.log("[ugcinc-render/fonts] Font checks:");
206
+ console.log(" - TikTok Sans (normal):", document.fonts.check('normal 16px "TikTok Sans"'));
207
+ console.log(" - TikTok Sans (bold):", document.fonts.check('bold 16px "TikTok Sans"'));
208
+ console.log(" - SF Pro:", document.fonts.check('normal 16px "SF Pro"'));
209
+ console.log(" - Apple Color Emoji:", document.fonts.check('normal 16px "Apple Color Emoji"'));
210
+ console.log("[ugcinc-render/fonts] All fonts in document.fonts:");
211
+ document.fonts.forEach((font) => {
212
+ console.log(` - ${font.family}: weight=${font.weight}, style=${font.style}, status=${font.status}`);
213
+ });
214
+ console.log("[ugcinc-render/fonts] Font family stacks:");
215
+ console.log(" - tiktok:", FONT_FAMILIES.tiktok);
216
+ console.log(" - apple:", FONT_FAMILIES.apple);
217
+ console.log(" - arial:", FONT_FAMILIES.arial);
218
+ console.log("[ugcinc-render/fonts] === END FONT DEBUG ===");
145
219
  }
146
220
 
147
221
  // src/utils/text.ts
@@ -333,6 +407,15 @@ function calculateAutoWidthAndLines({
333
407
  return { width: calculatedWidth, lines };
334
408
  }
335
409
  function TextElement({ segment, scale = 1 }) {
410
+ React.useEffect(() => {
411
+ const fontFamily2 = getFontFamily(segment.fontType ?? TEXT_DEFAULTS.fontType);
412
+ console.log("[ugcinc-render/TextElement] Rendering with:", {
413
+ text: segment.text?.substring(0, 50) + (segment.text?.length > 50 ? "..." : ""),
414
+ fontType: segment.fontType ?? TEXT_DEFAULTS.fontType,
415
+ fontFamily: fontFamily2,
416
+ hasEmojis: /[\u{1F300}-\u{1F9FF}]/u.test(segment.text || "")
417
+ });
418
+ }, [segment.text, segment.fontType]);
336
419
  const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
337
420
  const fontSize = (segment.fontSize ?? TEXT_DEFAULTS.fontSize) * scale;
338
421
  const fontWeight = segment.fontWeight ?? TEXT_DEFAULTS.fontWeight;
@@ -1872,6 +1955,7 @@ export {
1872
1955
  calculateLineWidth,
1873
1956
  calculateTimelineContentEnd,
1874
1957
  canSetAsReference,
1958
+ debugFontStatus,
1875
1959
  defaultOffset,
1876
1960
  formatTime,
1877
1961
  generateOverlayId,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ugcinc-render",
3
- "version": "1.5.16",
3
+ "version": "1.5.17",
4
4
  "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",