ugcinc-render 1.8.190 → 1.8.192
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.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +11 -3
- package/dist/index.mjs +11 -3
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1104,6 +1104,7 @@ interface IMessageDmCompositionProps {
|
|
|
1104
1104
|
senderBubbleColor?: string;
|
|
1105
1105
|
recipientBubbleColor?: string;
|
|
1106
1106
|
bubbleTextColor?: string;
|
|
1107
|
+
recipientTextColor?: string;
|
|
1107
1108
|
messageFontSize?: number;
|
|
1108
1109
|
messageLineHeight?: number;
|
|
1109
1110
|
messageLetterSpacing?: number;
|
package/dist/index.d.ts
CHANGED
|
@@ -1104,6 +1104,7 @@ interface IMessageDmCompositionProps {
|
|
|
1104
1104
|
senderBubbleColor?: string;
|
|
1105
1105
|
recipientBubbleColor?: string;
|
|
1106
1106
|
bubbleTextColor?: string;
|
|
1107
|
+
recipientTextColor?: string;
|
|
1107
1108
|
messageFontSize?: number;
|
|
1108
1109
|
messageLineHeight?: number;
|
|
1109
1110
|
messageLetterSpacing?: number;
|
package/dist/index.js
CHANGED
|
@@ -5272,6 +5272,7 @@ var MESSAGE_DEFAULTS2 = {
|
|
|
5272
5272
|
senderBubbleColor: "#1a42d5",
|
|
5273
5273
|
recipientBubbleColor: "#303032",
|
|
5274
5274
|
bubbleTextColor: "#ffffff",
|
|
5275
|
+
recipientTextColor: "#ffffff",
|
|
5275
5276
|
// Message typography
|
|
5276
5277
|
messageFontSize: 53,
|
|
5277
5278
|
messageLineHeight: 60,
|
|
@@ -5558,6 +5559,7 @@ function generateMessageElements2(props, calculatedMessages) {
|
|
|
5558
5559
|
const senderBubbleColor = props.senderBubbleColor ?? MESSAGE_DEFAULTS2.senderBubbleColor;
|
|
5559
5560
|
const recipientBubbleColor = props.recipientBubbleColor ?? MESSAGE_DEFAULTS2.recipientBubbleColor;
|
|
5560
5561
|
const bubbleTextColor = props.bubbleTextColor ?? MESSAGE_DEFAULTS2.bubbleTextColor;
|
|
5562
|
+
const recipientTextColor = props.recipientTextColor ?? MESSAGE_DEFAULTS2.recipientTextColor;
|
|
5561
5563
|
const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS2.messageFontSize;
|
|
5562
5564
|
const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS2.messageLineHeight;
|
|
5563
5565
|
const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS2.messageLetterSpacing;
|
|
@@ -5575,6 +5577,7 @@ function generateMessageElements2(props, calculatedMessages) {
|
|
|
5575
5577
|
const cm = calculatedMessages[i];
|
|
5576
5578
|
const isUser = cm.message.sender === "user";
|
|
5577
5579
|
const bubbleColor = isUser ? senderBubbleColor : recipientBubbleColor;
|
|
5580
|
+
const textColor = isUser ? bubbleTextColor : recipientTextColor;
|
|
5578
5581
|
if (cm.message.imageUrl && cm.imageWidth && cm.imageHeight && cm.imageY !== void 0 && isUser) {
|
|
5579
5582
|
elements.push({
|
|
5580
5583
|
id: `image-${cm.message.id}`,
|
|
@@ -5606,7 +5609,7 @@ function generateMessageElements2(props, calculatedMessages) {
|
|
|
5606
5609
|
fontSize: messageFontSize,
|
|
5607
5610
|
letterSpacing: messageLetterSpacing,
|
|
5608
5611
|
lineHeight: lineHeightMultiplier,
|
|
5609
|
-
color:
|
|
5612
|
+
color: textColor,
|
|
5610
5613
|
textAlign: "left",
|
|
5611
5614
|
verticalAlign: "middle",
|
|
5612
5615
|
backgroundColor: bubbleColor,
|
|
@@ -5906,6 +5909,7 @@ var defaultIMessageDmProps = {
|
|
|
5906
5909
|
senderBubbleColor: "#1a42d5",
|
|
5907
5910
|
recipientBubbleColor: "#303032",
|
|
5908
5911
|
bubbleTextColor: "#ffffff",
|
|
5912
|
+
recipientTextColor: "#ffffff",
|
|
5909
5913
|
// Message typography
|
|
5910
5914
|
messageFontSize: 53,
|
|
5911
5915
|
messageLineHeight: 60,
|
|
@@ -6036,7 +6040,8 @@ var IMessageDmComposition = (props) => {
|
|
|
6036
6040
|
}
|
|
6037
6041
|
const propsWithEffectiveColors = {
|
|
6038
6042
|
...mergedProps,
|
|
6039
|
-
recipientBubbleColor: mergedProps.lightMode ? "#dfdfe1" : mergedProps.recipientBubbleColor ?? "#303032"
|
|
6043
|
+
recipientBubbleColor: mergedProps.lightMode ? "#dfdfe1" : mergedProps.recipientBubbleColor ?? "#303032",
|
|
6044
|
+
recipientTextColor: mergedProps.lightMode ? "#000000" : mergedProps.recipientTextColor ?? "#ffffff"
|
|
6040
6045
|
};
|
|
6041
6046
|
return convertPropsToElements2(propsWithEffectiveColors);
|
|
6042
6047
|
}, [mergedProps, fontsLoaded]);
|
|
@@ -6172,6 +6177,8 @@ var IMessageDmComposition = (props) => {
|
|
|
6172
6177
|
const effectiveBackgroundColor = lightMode ? "#ffffff" : backgroundColor;
|
|
6173
6178
|
const effectiveHeaderBgColor = lightMode ? "#f7f7f7" : headerBackgroundColor;
|
|
6174
6179
|
const effectiveRecipientBubbleColor = lightMode ? "#dfdfe1" : recipientBubbleColor;
|
|
6180
|
+
const effectiveRecipientTextColor = lightMode ? "#000000" : "#ffffff";
|
|
6181
|
+
const effectiveUsernameColor = lightMode ? "#000000" : usernameColor;
|
|
6175
6182
|
const effectiveHomeIndicatorColor = lightMode ? "#000000" : homeIndicatorColor;
|
|
6176
6183
|
const effectiveStatusBarColor = lightMode ? "#000000" : "#ffffff";
|
|
6177
6184
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
@@ -6368,7 +6375,7 @@ var IMessageDmComposition = (props) => {
|
|
|
6368
6375
|
fontWeight: 400,
|
|
6369
6376
|
fontSize: usernameFontSize,
|
|
6370
6377
|
letterSpacing: usernameLetterSpacing,
|
|
6371
|
-
color:
|
|
6378
|
+
color: effectiveUsernameColor,
|
|
6372
6379
|
whiteSpace: "nowrap"
|
|
6373
6380
|
},
|
|
6374
6381
|
children: username
|
|
@@ -7379,6 +7386,7 @@ var iMessageDmPropsSchema = import_zod.z.object({
|
|
|
7379
7386
|
senderBubbleColor: import_zod.z.string().optional(),
|
|
7380
7387
|
recipientBubbleColor: import_zod.z.string().optional(),
|
|
7381
7388
|
bubbleTextColor: import_zod.z.string().optional(),
|
|
7389
|
+
recipientTextColor: import_zod.z.string().optional(),
|
|
7382
7390
|
// Message typography
|
|
7383
7391
|
messageFontSize: import_zod.z.number().optional(),
|
|
7384
7392
|
messageLineHeight: import_zod.z.number().optional(),
|
package/dist/index.mjs
CHANGED
|
@@ -4318,6 +4318,7 @@ var MESSAGE_DEFAULTS2 = {
|
|
|
4318
4318
|
senderBubbleColor: "#1a42d5",
|
|
4319
4319
|
recipientBubbleColor: "#303032",
|
|
4320
4320
|
bubbleTextColor: "#ffffff",
|
|
4321
|
+
recipientTextColor: "#ffffff",
|
|
4321
4322
|
// Message typography
|
|
4322
4323
|
messageFontSize: 53,
|
|
4323
4324
|
messageLineHeight: 60,
|
|
@@ -4604,6 +4605,7 @@ function generateMessageElements2(props, calculatedMessages) {
|
|
|
4604
4605
|
const senderBubbleColor = props.senderBubbleColor ?? MESSAGE_DEFAULTS2.senderBubbleColor;
|
|
4605
4606
|
const recipientBubbleColor = props.recipientBubbleColor ?? MESSAGE_DEFAULTS2.recipientBubbleColor;
|
|
4606
4607
|
const bubbleTextColor = props.bubbleTextColor ?? MESSAGE_DEFAULTS2.bubbleTextColor;
|
|
4608
|
+
const recipientTextColor = props.recipientTextColor ?? MESSAGE_DEFAULTS2.recipientTextColor;
|
|
4607
4609
|
const messageFontSize = props.messageFontSize ?? MESSAGE_DEFAULTS2.messageFontSize;
|
|
4608
4610
|
const messageLineHeight = props.messageLineHeight ?? MESSAGE_DEFAULTS2.messageLineHeight;
|
|
4609
4611
|
const messageLetterSpacing = props.messageLetterSpacing ?? MESSAGE_DEFAULTS2.messageLetterSpacing;
|
|
@@ -4621,6 +4623,7 @@ function generateMessageElements2(props, calculatedMessages) {
|
|
|
4621
4623
|
const cm = calculatedMessages[i];
|
|
4622
4624
|
const isUser = cm.message.sender === "user";
|
|
4623
4625
|
const bubbleColor = isUser ? senderBubbleColor : recipientBubbleColor;
|
|
4626
|
+
const textColor = isUser ? bubbleTextColor : recipientTextColor;
|
|
4624
4627
|
if (cm.message.imageUrl && cm.imageWidth && cm.imageHeight && cm.imageY !== void 0 && isUser) {
|
|
4625
4628
|
elements.push({
|
|
4626
4629
|
id: `image-${cm.message.id}`,
|
|
@@ -4652,7 +4655,7 @@ function generateMessageElements2(props, calculatedMessages) {
|
|
|
4652
4655
|
fontSize: messageFontSize,
|
|
4653
4656
|
letterSpacing: messageLetterSpacing,
|
|
4654
4657
|
lineHeight: lineHeightMultiplier,
|
|
4655
|
-
color:
|
|
4658
|
+
color: textColor,
|
|
4656
4659
|
textAlign: "left",
|
|
4657
4660
|
verticalAlign: "middle",
|
|
4658
4661
|
backgroundColor: bubbleColor,
|
|
@@ -4952,6 +4955,7 @@ var defaultIMessageDmProps = {
|
|
|
4952
4955
|
senderBubbleColor: "#1a42d5",
|
|
4953
4956
|
recipientBubbleColor: "#303032",
|
|
4954
4957
|
bubbleTextColor: "#ffffff",
|
|
4958
|
+
recipientTextColor: "#ffffff",
|
|
4955
4959
|
// Message typography
|
|
4956
4960
|
messageFontSize: 53,
|
|
4957
4961
|
messageLineHeight: 60,
|
|
@@ -5082,7 +5086,8 @@ var IMessageDmComposition = (props) => {
|
|
|
5082
5086
|
}
|
|
5083
5087
|
const propsWithEffectiveColors = {
|
|
5084
5088
|
...mergedProps,
|
|
5085
|
-
recipientBubbleColor: mergedProps.lightMode ? "#dfdfe1" : mergedProps.recipientBubbleColor ?? "#303032"
|
|
5089
|
+
recipientBubbleColor: mergedProps.lightMode ? "#dfdfe1" : mergedProps.recipientBubbleColor ?? "#303032",
|
|
5090
|
+
recipientTextColor: mergedProps.lightMode ? "#000000" : mergedProps.recipientTextColor ?? "#ffffff"
|
|
5086
5091
|
};
|
|
5087
5092
|
return convertPropsToElements2(propsWithEffectiveColors);
|
|
5088
5093
|
}, [mergedProps, fontsLoaded]);
|
|
@@ -5218,6 +5223,8 @@ var IMessageDmComposition = (props) => {
|
|
|
5218
5223
|
const effectiveBackgroundColor = lightMode ? "#ffffff" : backgroundColor;
|
|
5219
5224
|
const effectiveHeaderBgColor = lightMode ? "#f7f7f7" : headerBackgroundColor;
|
|
5220
5225
|
const effectiveRecipientBubbleColor = lightMode ? "#dfdfe1" : recipientBubbleColor;
|
|
5226
|
+
const effectiveRecipientTextColor = lightMode ? "#000000" : "#ffffff";
|
|
5227
|
+
const effectiveUsernameColor = lightMode ? "#000000" : usernameColor;
|
|
5221
5228
|
const effectiveHomeIndicatorColor = lightMode ? "#000000" : homeIndicatorColor;
|
|
5222
5229
|
const effectiveStatusBarColor = lightMode ? "#000000" : "#ffffff";
|
|
5223
5230
|
return /* @__PURE__ */ jsxs10(
|
|
@@ -5414,7 +5421,7 @@ var IMessageDmComposition = (props) => {
|
|
|
5414
5421
|
fontWeight: 400,
|
|
5415
5422
|
fontSize: usernameFontSize,
|
|
5416
5423
|
letterSpacing: usernameLetterSpacing,
|
|
5417
|
-
color:
|
|
5424
|
+
color: effectiveUsernameColor,
|
|
5418
5425
|
whiteSpace: "nowrap"
|
|
5419
5426
|
},
|
|
5420
5427
|
children: username
|
|
@@ -6142,6 +6149,7 @@ var iMessageDmPropsSchema = z.object({
|
|
|
6142
6149
|
senderBubbleColor: z.string().optional(),
|
|
6143
6150
|
recipientBubbleColor: z.string().optional(),
|
|
6144
6151
|
bubbleTextColor: z.string().optional(),
|
|
6152
|
+
recipientTextColor: z.string().optional(),
|
|
6145
6153
|
// Message typography
|
|
6146
6154
|
messageFontSize: z.number().optional(),
|
|
6147
6155
|
messageLineHeight: z.number().optional(),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ugcinc-render",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.192",
|
|
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",
|