ugcinc-render 1.8.219 → 1.8.220
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.
- package/dist/index.js +39 -18
- package/dist/index.mjs +39 -18
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -926,6 +926,7 @@ function TextElement({ segment, scale = 1 }) {
|
|
|
926
926
|
borderRadius: borderRadiusStyle
|
|
927
927
|
};
|
|
928
928
|
}, [autoWidth, calculatedWidth, width, backgroundColor, backgroundOpacity, borderRadiusStyle]);
|
|
929
|
+
const hasStroke = strokeWidth > 0 && !!strokeColor;
|
|
929
930
|
const textStyle = (0, import_react.useMemo)(() => ({
|
|
930
931
|
fontFamily,
|
|
931
932
|
fontSize,
|
|
@@ -944,10 +945,7 @@ function TextElement({ segment, scale = 1 }) {
|
|
|
944
945
|
flex: 1,
|
|
945
946
|
minHeight: 0
|
|
946
947
|
},
|
|
947
|
-
...
|
|
948
|
-
WebkitTextStroke: `${strokeWidth * 2}px ${strokeColor}`,
|
|
949
|
-
paintOrder: "stroke fill"
|
|
950
|
-
}
|
|
948
|
+
...hasStroke && { position: "relative" }
|
|
951
949
|
}), [
|
|
952
950
|
fontFamily,
|
|
953
951
|
fontSize,
|
|
@@ -960,33 +958,52 @@ function TextElement({ segment, scale = 1 }) {
|
|
|
960
958
|
paddingRight,
|
|
961
959
|
paddingBottom,
|
|
962
960
|
paddingLeft,
|
|
963
|
-
strokeWidth,
|
|
964
|
-
strokeColor,
|
|
965
961
|
autoWidth,
|
|
966
|
-
verticalAlign
|
|
962
|
+
verticalAlign,
|
|
963
|
+
hasStroke
|
|
967
964
|
]);
|
|
965
|
+
const strokeTextStyle = (0, import_react.useMemo)(() => {
|
|
966
|
+
if (!hasStroke) return void 0;
|
|
967
|
+
return {
|
|
968
|
+
...textStyle,
|
|
969
|
+
color: strokeColor,
|
|
970
|
+
WebkitTextStroke: `${strokeWidth * 2}px ${strokeColor}`,
|
|
971
|
+
position: "absolute",
|
|
972
|
+
inset: 0
|
|
973
|
+
};
|
|
974
|
+
}, [hasStroke, textStyle, strokeColor, strokeWidth]);
|
|
968
975
|
if (autoWidth) {
|
|
969
976
|
const textContent = calculatedLines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
|
|
970
977
|
line,
|
|
971
978
|
index < calculatedLines.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {})
|
|
972
979
|
] }, index));
|
|
973
980
|
if (backgroundColor) {
|
|
974
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.
|
|
981
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
975
982
|
"div",
|
|
976
983
|
{
|
|
977
984
|
style: {
|
|
978
985
|
width: calculatedWidth,
|
|
979
986
|
maxWidth: width,
|
|
980
987
|
backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
|
|
981
|
-
borderRadius: borderRadiusStyle
|
|
988
|
+
borderRadius: borderRadiusStyle,
|
|
989
|
+
...hasStroke && { position: "relative" }
|
|
982
990
|
},
|
|
983
|
-
children:
|
|
991
|
+
children: [
|
|
992
|
+
strokeTextStyle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: textContent }),
|
|
993
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: textContent })
|
|
994
|
+
]
|
|
984
995
|
}
|
|
985
996
|
) });
|
|
986
997
|
}
|
|
987
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.
|
|
998
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { width: calculatedWidth, maxWidth: width, ...hasStroke && { position: "relative" } }, children: [
|
|
999
|
+
strokeTextStyle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: textContent }),
|
|
1000
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: textContent })
|
|
1001
|
+
] }) });
|
|
988
1002
|
}
|
|
989
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.
|
|
1003
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...backgroundBoxStyle, ...hasStroke && { position: "relative" } }, children: [
|
|
1004
|
+
strokeTextStyle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: segment.text }),
|
|
1005
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: segment.text })
|
|
1006
|
+
] }) });
|
|
990
1007
|
}
|
|
991
1008
|
|
|
992
1009
|
// src/components/ImageElement.tsx
|
|
@@ -2370,9 +2387,10 @@ function CaptionOverlay({ captions, style, previewTimeMs }) {
|
|
|
2370
2387
|
lineHeight: 1.2,
|
|
2371
2388
|
wordBreak: "break-word"
|
|
2372
2389
|
};
|
|
2373
|
-
|
|
2390
|
+
const hasStroke = scaledStrokeWidth > 0;
|
|
2391
|
+
const renderWords = ({ isStrokeLayer }) => currentPage.words.map((word, index) => {
|
|
2374
2392
|
const isActive = currentMs >= word.startMs && currentMs <= word.endMs;
|
|
2375
|
-
const color = isActive ? style.highlightColor : style.fontColor;
|
|
2393
|
+
const color = isStrokeLayer ? style.strokeColor : isActive ? style.highlightColor : style.fontColor;
|
|
2376
2394
|
let scale = 1;
|
|
2377
2395
|
if (style.enableAnimation && isActive) {
|
|
2378
2396
|
const wordDuration = word.endMs - word.startMs;
|
|
@@ -2398,9 +2416,8 @@ function CaptionOverlay({ captions, style, previewTimeMs }) {
|
|
|
2398
2416
|
display: "inline-block",
|
|
2399
2417
|
transform: `scale(${scale})`,
|
|
2400
2418
|
transformOrigin: "center center",
|
|
2401
|
-
...
|
|
2402
|
-
WebkitTextStroke: `${scaledStrokeWidth * 2}px ${style.strokeColor}
|
|
2403
|
-
paintOrder: "stroke fill"
|
|
2419
|
+
...isStrokeLayer && {
|
|
2420
|
+
WebkitTextStroke: `${scaledStrokeWidth * 2}px ${style.strokeColor}`
|
|
2404
2421
|
}
|
|
2405
2422
|
},
|
|
2406
2423
|
children: word.word
|
|
@@ -2408,7 +2425,11 @@ function CaptionOverlay({ captions, style, previewTimeMs }) {
|
|
|
2408
2425
|
),
|
|
2409
2426
|
index < currentPage.words.length - 1 && " "
|
|
2410
2427
|
] }, `${word.word}-${word.startMs}-${index}`);
|
|
2411
|
-
})
|
|
2428
|
+
});
|
|
2429
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: containerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative" }, children: [
|
|
2430
|
+
hasStroke && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...textContainerStyles, position: "absolute", inset: 0 }, "aria-hidden": "true", children: renderWords({ isStrokeLayer: true }) }),
|
|
2431
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...textContainerStyles, ...hasStroke && { position: "relative" } }, children: renderWords({ isStrokeLayer: false }) })
|
|
2432
|
+
] }) });
|
|
2412
2433
|
}
|
|
2413
2434
|
|
|
2414
2435
|
// src/compositions/AutoCaptionComposition.tsx
|
package/dist/index.mjs
CHANGED
|
@@ -489,6 +489,7 @@ function TextElement({ segment, scale = 1 }) {
|
|
|
489
489
|
borderRadius: borderRadiusStyle
|
|
490
490
|
};
|
|
491
491
|
}, [autoWidth, calculatedWidth, width, backgroundColor, backgroundOpacity, borderRadiusStyle]);
|
|
492
|
+
const hasStroke = strokeWidth > 0 && !!strokeColor;
|
|
492
493
|
const textStyle = useMemo(() => ({
|
|
493
494
|
fontFamily,
|
|
494
495
|
fontSize,
|
|
@@ -507,10 +508,7 @@ function TextElement({ segment, scale = 1 }) {
|
|
|
507
508
|
flex: 1,
|
|
508
509
|
minHeight: 0
|
|
509
510
|
},
|
|
510
|
-
...
|
|
511
|
-
WebkitTextStroke: `${strokeWidth * 2}px ${strokeColor}`,
|
|
512
|
-
paintOrder: "stroke fill"
|
|
513
|
-
}
|
|
511
|
+
...hasStroke && { position: "relative" }
|
|
514
512
|
}), [
|
|
515
513
|
fontFamily,
|
|
516
514
|
fontSize,
|
|
@@ -523,33 +521,52 @@ function TextElement({ segment, scale = 1 }) {
|
|
|
523
521
|
paddingRight,
|
|
524
522
|
paddingBottom,
|
|
525
523
|
paddingLeft,
|
|
526
|
-
strokeWidth,
|
|
527
|
-
strokeColor,
|
|
528
524
|
autoWidth,
|
|
529
|
-
verticalAlign
|
|
525
|
+
verticalAlign,
|
|
526
|
+
hasStroke
|
|
530
527
|
]);
|
|
528
|
+
const strokeTextStyle = useMemo(() => {
|
|
529
|
+
if (!hasStroke) return void 0;
|
|
530
|
+
return {
|
|
531
|
+
...textStyle,
|
|
532
|
+
color: strokeColor,
|
|
533
|
+
WebkitTextStroke: `${strokeWidth * 2}px ${strokeColor}`,
|
|
534
|
+
position: "absolute",
|
|
535
|
+
inset: 0
|
|
536
|
+
};
|
|
537
|
+
}, [hasStroke, textStyle, strokeColor, strokeWidth]);
|
|
531
538
|
if (autoWidth) {
|
|
532
539
|
const textContent = calculatedLines.map((line, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
533
540
|
line,
|
|
534
541
|
index < calculatedLines.length - 1 && /* @__PURE__ */ jsx("br", {})
|
|
535
542
|
] }, index));
|
|
536
543
|
if (backgroundColor) {
|
|
537
|
-
return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */
|
|
544
|
+
return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsxs(
|
|
538
545
|
"div",
|
|
539
546
|
{
|
|
540
547
|
style: {
|
|
541
548
|
width: calculatedWidth,
|
|
542
549
|
maxWidth: width,
|
|
543
550
|
backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
|
|
544
|
-
borderRadius: borderRadiusStyle
|
|
551
|
+
borderRadius: borderRadiusStyle,
|
|
552
|
+
...hasStroke && { position: "relative" }
|
|
545
553
|
},
|
|
546
|
-
children:
|
|
554
|
+
children: [
|
|
555
|
+
strokeTextStyle && /* @__PURE__ */ jsx("div", { style: strokeTextStyle, "aria-hidden": "true", children: textContent }),
|
|
556
|
+
/* @__PURE__ */ jsx("div", { style: textStyle, children: textContent })
|
|
557
|
+
]
|
|
547
558
|
}
|
|
548
559
|
) });
|
|
549
560
|
}
|
|
550
|
-
return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */
|
|
561
|
+
return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsxs("div", { style: { width: calculatedWidth, maxWidth: width, ...hasStroke && { position: "relative" } }, children: [
|
|
562
|
+
strokeTextStyle && /* @__PURE__ */ jsx("div", { style: strokeTextStyle, "aria-hidden": "true", children: textContent }),
|
|
563
|
+
/* @__PURE__ */ jsx("div", { style: textStyle, children: textContent })
|
|
564
|
+
] }) });
|
|
551
565
|
}
|
|
552
|
-
return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */
|
|
566
|
+
return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsxs("div", { style: { ...backgroundBoxStyle, ...hasStroke && { position: "relative" } }, children: [
|
|
567
|
+
strokeTextStyle && /* @__PURE__ */ jsx("div", { style: strokeTextStyle, "aria-hidden": "true", children: segment.text }),
|
|
568
|
+
/* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text })
|
|
569
|
+
] }) });
|
|
553
570
|
}
|
|
554
571
|
|
|
555
572
|
// src/components/ImageElement.tsx
|
|
@@ -1415,9 +1432,10 @@ function CaptionOverlay({ captions, style, previewTimeMs }) {
|
|
|
1415
1432
|
lineHeight: 1.2,
|
|
1416
1433
|
wordBreak: "break-word"
|
|
1417
1434
|
};
|
|
1418
|
-
|
|
1435
|
+
const hasStroke = scaledStrokeWidth > 0;
|
|
1436
|
+
const renderWords = ({ isStrokeLayer }) => currentPage.words.map((word, index) => {
|
|
1419
1437
|
const isActive = currentMs >= word.startMs && currentMs <= word.endMs;
|
|
1420
|
-
const color = isActive ? style.highlightColor : style.fontColor;
|
|
1438
|
+
const color = isStrokeLayer ? style.strokeColor : isActive ? style.highlightColor : style.fontColor;
|
|
1421
1439
|
let scale = 1;
|
|
1422
1440
|
if (style.enableAnimation && isActive) {
|
|
1423
1441
|
const wordDuration = word.endMs - word.startMs;
|
|
@@ -1443,9 +1461,8 @@ function CaptionOverlay({ captions, style, previewTimeMs }) {
|
|
|
1443
1461
|
display: "inline-block",
|
|
1444
1462
|
transform: `scale(${scale})`,
|
|
1445
1463
|
transformOrigin: "center center",
|
|
1446
|
-
...
|
|
1447
|
-
WebkitTextStroke: `${scaledStrokeWidth * 2}px ${style.strokeColor}
|
|
1448
|
-
paintOrder: "stroke fill"
|
|
1464
|
+
...isStrokeLayer && {
|
|
1465
|
+
WebkitTextStroke: `${scaledStrokeWidth * 2}px ${style.strokeColor}`
|
|
1449
1466
|
}
|
|
1450
1467
|
},
|
|
1451
1468
|
children: word.word
|
|
@@ -1453,7 +1470,11 @@ function CaptionOverlay({ captions, style, previewTimeMs }) {
|
|
|
1453
1470
|
),
|
|
1454
1471
|
index < currentPage.words.length - 1 && " "
|
|
1455
1472
|
] }, `${word.word}-${word.startMs}-${index}`);
|
|
1456
|
-
})
|
|
1473
|
+
});
|
|
1474
|
+
return /* @__PURE__ */ jsx6("div", { style: containerStyles, children: /* @__PURE__ */ jsxs4("div", { style: { position: "relative" }, children: [
|
|
1475
|
+
hasStroke && /* @__PURE__ */ jsx6("div", { style: { ...textContainerStyles, position: "absolute", inset: 0 }, "aria-hidden": "true", children: renderWords({ isStrokeLayer: true }) }),
|
|
1476
|
+
/* @__PURE__ */ jsx6("div", { style: { ...textContainerStyles, ...hasStroke && { position: "relative" } }, children: renderWords({ isStrokeLayer: false }) })
|
|
1477
|
+
] }) });
|
|
1457
1478
|
}
|
|
1458
1479
|
|
|
1459
1480
|
// src/compositions/AutoCaptionComposition.tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ugcinc-render",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.220",
|
|
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",
|