sceyt-chat-react-uikit 1.7.1-beta.13 → 1.7.1-beta.14
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/index.js +105 -26
- package/index.modern.js +105 -26
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -9091,7 +9091,7 @@ function updateChannelLastMessageOnAllChannels(channelId, message) {
|
|
|
9091
9091
|
var updateChannel = allChannels.find(function (chan) {
|
|
9092
9092
|
return chan.id === channelId;
|
|
9093
9093
|
});
|
|
9094
|
-
if (message.state === 'Deleted' || message.state === 'Edited') {
|
|
9094
|
+
if ((message === null || message === void 0 ? void 0 : message.state) === 'Deleted' || (message === null || message === void 0 ? void 0 : message.state) === 'Edited') {
|
|
9095
9095
|
var _updateChannel;
|
|
9096
9096
|
if (((_updateChannel = updateChannel) === null || _updateChannel === void 0 ? void 0 : _updateChannel.lastMessage.id) === message.id) {
|
|
9097
9097
|
allChannels = allChannels.map(function (chan) {
|
|
@@ -31270,7 +31270,7 @@ var validateUrl = function validateUrl(url) {
|
|
|
31270
31270
|
}
|
|
31271
31271
|
};
|
|
31272
31272
|
var OGMetadata = function OGMetadata(_ref) {
|
|
31273
|
-
var _metadata$
|
|
31273
|
+
var _metadata$og6, _metadata$og6$image, _metadata$og6$image$, _metadata$og7, _metadata$og7$image, _metadata$og7$image$, _metadata$og8, _metadata$og8$image, _metadata$og8$image$, _metadata$og9, _metadata$og0, _metadata$og0$favicon, _metadata$og1, _metadata$og1$favicon, _metadata$og10, _metadata$og11, _metadata$og12;
|
|
31274
31274
|
var attachments = _ref.attachments,
|
|
31275
31275
|
state = _ref.state;
|
|
31276
31276
|
var _useState = React.useState(null),
|
|
@@ -31282,6 +31282,15 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31282
31282
|
var _useState3 = React.useState(true),
|
|
31283
31283
|
faviconLoadError = _useState3[0],
|
|
31284
31284
|
setFaviconLoadError = _useState3[1];
|
|
31285
|
+
var _useState4 = React.useState(false),
|
|
31286
|
+
imageLoaded = _useState4[0],
|
|
31287
|
+
setImageLoaded = _useState4[1];
|
|
31288
|
+
var _useState5 = React.useState(0),
|
|
31289
|
+
imageWidth = _useState5[0],
|
|
31290
|
+
setImageWidth = _useState5[1];
|
|
31291
|
+
var _useState6 = React.useState(0),
|
|
31292
|
+
imageHeight = _useState6[0],
|
|
31293
|
+
setImageHeight = _useState6[1];
|
|
31285
31294
|
var attachment = React.useMemo(function () {
|
|
31286
31295
|
return attachments.find(function (attachment) {
|
|
31287
31296
|
return attachment.type === attachmentTypes.link;
|
|
@@ -31348,6 +31357,35 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31348
31357
|
var _metadata$og, _metadata$og2, _metadata$og2$image, _metadata$og2$image$, _metadata$og3;
|
|
31349
31358
|
return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : _metadata$og.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : (_metadata$og2$image = _metadata$og2.image) === null || _metadata$og2$image === void 0 ? void 0 : (_metadata$og2$image$ = _metadata$og2$image[0]) === null || _metadata$og2$image$ === void 0 ? void 0 : _metadata$og2$image$.url) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) && metadata;
|
|
31350
31359
|
}, [state, metadata]);
|
|
31360
|
+
React.useEffect(function () {
|
|
31361
|
+
var _metadata$og4, _metadata$og4$image, _metadata$og4$image$;
|
|
31362
|
+
if (metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url) {
|
|
31363
|
+
var _metadata$og5, _metadata$og5$image, _metadata$og5$image$;
|
|
31364
|
+
var image = new Image();
|
|
31365
|
+
image.src = metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url;
|
|
31366
|
+
image.onload = function () {
|
|
31367
|
+
var imageWidth = image.width;
|
|
31368
|
+
var imageHeight = image.height;
|
|
31369
|
+
setImageWidth(imageWidth);
|
|
31370
|
+
setImageHeight(imageHeight);
|
|
31371
|
+
setImageLoadError(false);
|
|
31372
|
+
setImageLoaded(true);
|
|
31373
|
+
};
|
|
31374
|
+
image.onerror = function () {
|
|
31375
|
+
setImageLoadError(true);
|
|
31376
|
+
setImageLoaded(true);
|
|
31377
|
+
};
|
|
31378
|
+
}
|
|
31379
|
+
}, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og6 = metadata.og) === null || _metadata$og6 === void 0 ? void 0 : (_metadata$og6$image = _metadata$og6.image) === null || _metadata$og6$image === void 0 ? void 0 : (_metadata$og6$image$ = _metadata$og6$image[0]) === null || _metadata$og6$image$ === void 0 ? void 0 : _metadata$og6$image$.url]);
|
|
31380
|
+
var calculatedImageWidth = React.useMemo(function () {
|
|
31381
|
+
if (imageWidth > 400) {
|
|
31382
|
+
return 400;
|
|
31383
|
+
}
|
|
31384
|
+
return imageWidth;
|
|
31385
|
+
}, [imageWidth]);
|
|
31386
|
+
var calculatedImageHeight = React.useMemo(function () {
|
|
31387
|
+
return imageHeight / (imageWidth / calculatedImageWidth);
|
|
31388
|
+
}, [imageWidth, imageHeight]);
|
|
31351
31389
|
return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
|
|
31352
31390
|
showOGMetadata: !!showOGMetadata
|
|
31353
31391
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -31355,43 +31393,84 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31355
31393
|
window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
|
|
31356
31394
|
}
|
|
31357
31395
|
}, /*#__PURE__*/React__default.createElement(ImageContainer, {
|
|
31358
|
-
showOGMetadata: !!showOGMetadata && !imageLoadError
|
|
31359
|
-
|
|
31360
|
-
|
|
31396
|
+
showOGMetadata: !!showOGMetadata && !imageLoadError && imageLoaded,
|
|
31397
|
+
width: calculatedImageWidth,
|
|
31398
|
+
height: calculatedImageHeight
|
|
31399
|
+
}, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$image = _metadata$og7.image) !== null && _metadata$og7$image !== void 0 && (_metadata$og7$image$ = _metadata$og7$image[0]) !== null && _metadata$og7$image$ !== void 0 && _metadata$og7$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
|
|
31400
|
+
src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$image = _metadata$og8.image) === null || _metadata$og8$image === void 0 ? void 0 : (_metadata$og8$image$ = _metadata$og8$image[0]) === null || _metadata$og8$image$ === void 0 ? void 0 : _metadata$og8$image$.url,
|
|
31361
31401
|
alt: 'OG metadata image',
|
|
31362
|
-
|
|
31363
|
-
|
|
31364
|
-
|
|
31365
|
-
|
|
31366
|
-
|
|
31367
|
-
|
|
31368
|
-
}
|
|
31369
|
-
src: metadata === null || metadata === void 0 ? void 0 : (_metadata$
|
|
31402
|
+
width: calculatedImageWidth,
|
|
31403
|
+
height: calculatedImageHeight
|
|
31404
|
+
})) : null), showOGMetadata && imageLoaded ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, {
|
|
31405
|
+
maxWidth: calculatedImageWidth
|
|
31406
|
+
}, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og9 = metadata.og) !== null && _metadata$og9 !== void 0 && _metadata$og9.title ? (/*#__PURE__*/React__default.createElement(Title, {
|
|
31407
|
+
maxWidth: calculatedImageWidth
|
|
31408
|
+
}, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && (_metadata$og0$favicon = _metadata$og0.favicon) !== null && _metadata$og0$favicon !== void 0 && _metadata$og0$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
|
|
31409
|
+
src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : (_metadata$og1$favicon = _metadata$og1.favicon) === null || _metadata$og1$favicon === void 0 ? void 0 : _metadata$og1$favicon.url,
|
|
31370
31410
|
onLoad: function onLoad() {
|
|
31371
31411
|
return setFaviconLoadError(false);
|
|
31372
31412
|
},
|
|
31373
31413
|
onError: function onError() {
|
|
31374
31414
|
return setFaviconLoadError(true);
|
|
31375
31415
|
}
|
|
31376
|
-
})) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$
|
|
31416
|
+
})) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og11 = metadata.og) !== null && _metadata$og11 !== void 0 && _metadata$og11.description ? (/*#__PURE__*/React__default.createElement(Desc, {
|
|
31417
|
+
maxWidth: calculatedImageWidth
|
|
31418
|
+
}, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description)) : null)) : null));
|
|
31377
31419
|
};
|
|
31378
31420
|
var OGMetadataContainer = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n min-width: inherit;\n max-width: inherit;\n display: grid;\n grid-template-columns: 1fr;\n background-color: rgba(0, 0, 0, 0.034);\n border-radius: 6px;\n margin-bottom: 0.4rem;\n margin: 0 auto;\n margin-bottom: ", ";\n &:hover {\n background-color: rgba(0, 0, 0, 0.1);\n cursor: pointer;\n }\n"])), function (_ref2) {
|
|
31379
31421
|
var showOGMetadata = _ref2.showOGMetadata;
|
|
31380
31422
|
return showOGMetadata ? '0.8rem' : '0';
|
|
31381
31423
|
});
|
|
31382
|
-
var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n max-width:
|
|
31383
|
-
var
|
|
31384
|
-
return
|
|
31424
|
+
var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n max-height: ", ";\n opacity: ", ";\n overflow: hidden;\n width: 100%;\n margin: 0 auto;\n padding: ", ";\n height: ", ";\n transition: height 0.2s ease;\n"])), function (_ref3) {
|
|
31425
|
+
var width = _ref3.width;
|
|
31426
|
+
return width + "px";
|
|
31385
31427
|
}, function (_ref4) {
|
|
31386
|
-
var
|
|
31387
|
-
return
|
|
31388
|
-
})
|
|
31389
|
-
var
|
|
31390
|
-
|
|
31391
|
-
|
|
31392
|
-
var
|
|
31393
|
-
|
|
31394
|
-
|
|
31428
|
+
var height = _ref4.height;
|
|
31429
|
+
return height + "px";
|
|
31430
|
+
}, function (_ref5) {
|
|
31431
|
+
var showOGMetadata = _ref5.showOGMetadata;
|
|
31432
|
+
return showOGMetadata ? 1 : 0;
|
|
31433
|
+
}, function (_ref6) {
|
|
31434
|
+
var showOGMetadata = _ref6.showOGMetadata;
|
|
31435
|
+
return showOGMetadata ? '0.3rem' : '0';
|
|
31436
|
+
}, function (_ref7) {
|
|
31437
|
+
var showOGMetadata = _ref7.showOGMetadata,
|
|
31438
|
+
height = _ref7.height;
|
|
31439
|
+
return showOGMetadata ? height + "px" : '0';
|
|
31440
|
+
});
|
|
31441
|
+
var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n width: 80%;\n padding: 0.5rem;\n margin: 0;\n transition: all 0.2s ease;\n"])));
|
|
31442
|
+
var Url = styled__default.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n margin: 0 0 12px 0;\n color: gray;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref8) {
|
|
31443
|
+
var maxWidth = _ref8.maxWidth;
|
|
31444
|
+
return maxWidth + "px";
|
|
31445
|
+
});
|
|
31446
|
+
var Title = styled__default.p(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n font-weight: bold;\n font-size: 13px;\n padding: 0;\n display: flex;\n align-items: center;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref9) {
|
|
31447
|
+
var maxWidth = _ref9.maxWidth;
|
|
31448
|
+
return maxWidth + "px";
|
|
31449
|
+
});
|
|
31450
|
+
var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref0) {
|
|
31451
|
+
var maxWidth = _ref0.maxWidth;
|
|
31452
|
+
return maxWidth + "px";
|
|
31453
|
+
});
|
|
31454
|
+
var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n min-width: ", ";\n max-height: ", ";\n min-height: ", ";\n width: ", ";\n height: ", ";\n object-fit: cover;\n transition: height 0.2s ease;\n"])), function (_ref1) {
|
|
31455
|
+
var width = _ref1.width;
|
|
31456
|
+
return width + "px";
|
|
31457
|
+
}, function (_ref10) {
|
|
31458
|
+
var width = _ref10.width;
|
|
31459
|
+
return width + "px";
|
|
31460
|
+
}, function (_ref11) {
|
|
31461
|
+
var height = _ref11.height;
|
|
31462
|
+
return height + "px";
|
|
31463
|
+
}, function (_ref12) {
|
|
31464
|
+
var height = _ref12.height;
|
|
31465
|
+
return height + "px";
|
|
31466
|
+
}, function (_ref13) {
|
|
31467
|
+
var width = _ref13.width;
|
|
31468
|
+
return width + "px";
|
|
31469
|
+
}, function (_ref14) {
|
|
31470
|
+
var height = _ref14.height;
|
|
31471
|
+
return height + "px";
|
|
31472
|
+
});
|
|
31473
|
+
var Favicon = styled__default.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n transition: all 0.2s ease;\n width: 24px;\n height: 24px;\n object-fit: contain;\n margin-right: 4px;\n"])));
|
|
31395
31474
|
|
|
31396
31475
|
var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i;
|
|
31397
31476
|
var MessageBody = function MessageBody(_ref) {
|
package/index.modern.js
CHANGED
|
@@ -9070,7 +9070,7 @@ function updateChannelLastMessageOnAllChannels(channelId, message) {
|
|
|
9070
9070
|
var updateChannel = allChannels.find(function (chan) {
|
|
9071
9071
|
return chan.id === channelId;
|
|
9072
9072
|
});
|
|
9073
|
-
if (message.state === 'Deleted' || message.state === 'Edited') {
|
|
9073
|
+
if ((message === null || message === void 0 ? void 0 : message.state) === 'Deleted' || (message === null || message === void 0 ? void 0 : message.state) === 'Edited') {
|
|
9074
9074
|
var _updateChannel;
|
|
9075
9075
|
if (((_updateChannel = updateChannel) === null || _updateChannel === void 0 ? void 0 : _updateChannel.lastMessage.id) === message.id) {
|
|
9076
9076
|
allChannels = allChannels.map(function (chan) {
|
|
@@ -31249,7 +31249,7 @@ var validateUrl = function validateUrl(url) {
|
|
|
31249
31249
|
}
|
|
31250
31250
|
};
|
|
31251
31251
|
var OGMetadata = function OGMetadata(_ref) {
|
|
31252
|
-
var _metadata$
|
|
31252
|
+
var _metadata$og6, _metadata$og6$image, _metadata$og6$image$, _metadata$og7, _metadata$og7$image, _metadata$og7$image$, _metadata$og8, _metadata$og8$image, _metadata$og8$image$, _metadata$og9, _metadata$og0, _metadata$og0$favicon, _metadata$og1, _metadata$og1$favicon, _metadata$og10, _metadata$og11, _metadata$og12;
|
|
31253
31253
|
var attachments = _ref.attachments,
|
|
31254
31254
|
state = _ref.state;
|
|
31255
31255
|
var _useState = useState(null),
|
|
@@ -31261,6 +31261,15 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31261
31261
|
var _useState3 = useState(true),
|
|
31262
31262
|
faviconLoadError = _useState3[0],
|
|
31263
31263
|
setFaviconLoadError = _useState3[1];
|
|
31264
|
+
var _useState4 = useState(false),
|
|
31265
|
+
imageLoaded = _useState4[0],
|
|
31266
|
+
setImageLoaded = _useState4[1];
|
|
31267
|
+
var _useState5 = useState(0),
|
|
31268
|
+
imageWidth = _useState5[0],
|
|
31269
|
+
setImageWidth = _useState5[1];
|
|
31270
|
+
var _useState6 = useState(0),
|
|
31271
|
+
imageHeight = _useState6[0],
|
|
31272
|
+
setImageHeight = _useState6[1];
|
|
31264
31273
|
var attachment = useMemo(function () {
|
|
31265
31274
|
return attachments.find(function (attachment) {
|
|
31266
31275
|
return attachment.type === attachmentTypes.link;
|
|
@@ -31327,6 +31336,35 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31327
31336
|
var _metadata$og, _metadata$og2, _metadata$og2$image, _metadata$og2$image$, _metadata$og3;
|
|
31328
31337
|
return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : _metadata$og.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : (_metadata$og2$image = _metadata$og2.image) === null || _metadata$og2$image === void 0 ? void 0 : (_metadata$og2$image$ = _metadata$og2$image[0]) === null || _metadata$og2$image$ === void 0 ? void 0 : _metadata$og2$image$.url) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) && metadata;
|
|
31329
31338
|
}, [state, metadata]);
|
|
31339
|
+
useEffect(function () {
|
|
31340
|
+
var _metadata$og4, _metadata$og4$image, _metadata$og4$image$;
|
|
31341
|
+
if (metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url) {
|
|
31342
|
+
var _metadata$og5, _metadata$og5$image, _metadata$og5$image$;
|
|
31343
|
+
var image = new Image();
|
|
31344
|
+
image.src = metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url;
|
|
31345
|
+
image.onload = function () {
|
|
31346
|
+
var imageWidth = image.width;
|
|
31347
|
+
var imageHeight = image.height;
|
|
31348
|
+
setImageWidth(imageWidth);
|
|
31349
|
+
setImageHeight(imageHeight);
|
|
31350
|
+
setImageLoadError(false);
|
|
31351
|
+
setImageLoaded(true);
|
|
31352
|
+
};
|
|
31353
|
+
image.onerror = function () {
|
|
31354
|
+
setImageLoadError(true);
|
|
31355
|
+
setImageLoaded(true);
|
|
31356
|
+
};
|
|
31357
|
+
}
|
|
31358
|
+
}, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og6 = metadata.og) === null || _metadata$og6 === void 0 ? void 0 : (_metadata$og6$image = _metadata$og6.image) === null || _metadata$og6$image === void 0 ? void 0 : (_metadata$og6$image$ = _metadata$og6$image[0]) === null || _metadata$og6$image$ === void 0 ? void 0 : _metadata$og6$image$.url]);
|
|
31359
|
+
var calculatedImageWidth = useMemo(function () {
|
|
31360
|
+
if (imageWidth > 400) {
|
|
31361
|
+
return 400;
|
|
31362
|
+
}
|
|
31363
|
+
return imageWidth;
|
|
31364
|
+
}, [imageWidth]);
|
|
31365
|
+
var calculatedImageHeight = useMemo(function () {
|
|
31366
|
+
return imageHeight / (imageWidth / calculatedImageWidth);
|
|
31367
|
+
}, [imageWidth, imageHeight]);
|
|
31330
31368
|
return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
|
|
31331
31369
|
showOGMetadata: !!showOGMetadata
|
|
31332
31370
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -31334,43 +31372,84 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31334
31372
|
window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
|
|
31335
31373
|
}
|
|
31336
31374
|
}, /*#__PURE__*/React__default.createElement(ImageContainer, {
|
|
31337
|
-
showOGMetadata: !!showOGMetadata && !imageLoadError
|
|
31338
|
-
|
|
31339
|
-
|
|
31375
|
+
showOGMetadata: !!showOGMetadata && !imageLoadError && imageLoaded,
|
|
31376
|
+
width: calculatedImageWidth,
|
|
31377
|
+
height: calculatedImageHeight
|
|
31378
|
+
}, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$image = _metadata$og7.image) !== null && _metadata$og7$image !== void 0 && (_metadata$og7$image$ = _metadata$og7$image[0]) !== null && _metadata$og7$image$ !== void 0 && _metadata$og7$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
|
|
31379
|
+
src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$image = _metadata$og8.image) === null || _metadata$og8$image === void 0 ? void 0 : (_metadata$og8$image$ = _metadata$og8$image[0]) === null || _metadata$og8$image$ === void 0 ? void 0 : _metadata$og8$image$.url,
|
|
31340
31380
|
alt: 'OG metadata image',
|
|
31341
|
-
|
|
31342
|
-
|
|
31343
|
-
|
|
31344
|
-
|
|
31345
|
-
|
|
31346
|
-
|
|
31347
|
-
}
|
|
31348
|
-
src: metadata === null || metadata === void 0 ? void 0 : (_metadata$
|
|
31381
|
+
width: calculatedImageWidth,
|
|
31382
|
+
height: calculatedImageHeight
|
|
31383
|
+
})) : null), showOGMetadata && imageLoaded ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, {
|
|
31384
|
+
maxWidth: calculatedImageWidth
|
|
31385
|
+
}, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og9 = metadata.og) !== null && _metadata$og9 !== void 0 && _metadata$og9.title ? (/*#__PURE__*/React__default.createElement(Title, {
|
|
31386
|
+
maxWidth: calculatedImageWidth
|
|
31387
|
+
}, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && (_metadata$og0$favicon = _metadata$og0.favicon) !== null && _metadata$og0$favicon !== void 0 && _metadata$og0$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
|
|
31388
|
+
src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : (_metadata$og1$favicon = _metadata$og1.favicon) === null || _metadata$og1$favicon === void 0 ? void 0 : _metadata$og1$favicon.url,
|
|
31349
31389
|
onLoad: function onLoad() {
|
|
31350
31390
|
return setFaviconLoadError(false);
|
|
31351
31391
|
},
|
|
31352
31392
|
onError: function onError() {
|
|
31353
31393
|
return setFaviconLoadError(true);
|
|
31354
31394
|
}
|
|
31355
|
-
})) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$
|
|
31395
|
+
})) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og11 = metadata.og) !== null && _metadata$og11 !== void 0 && _metadata$og11.description ? (/*#__PURE__*/React__default.createElement(Desc, {
|
|
31396
|
+
maxWidth: calculatedImageWidth
|
|
31397
|
+
}, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description)) : null)) : null));
|
|
31356
31398
|
};
|
|
31357
31399
|
var OGMetadataContainer = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n min-width: inherit;\n max-width: inherit;\n display: grid;\n grid-template-columns: 1fr;\n background-color: rgba(0, 0, 0, 0.034);\n border-radius: 6px;\n margin-bottom: 0.4rem;\n margin: 0 auto;\n margin-bottom: ", ";\n &:hover {\n background-color: rgba(0, 0, 0, 0.1);\n cursor: pointer;\n }\n"])), function (_ref2) {
|
|
31358
31400
|
var showOGMetadata = _ref2.showOGMetadata;
|
|
31359
31401
|
return showOGMetadata ? '0.8rem' : '0';
|
|
31360
31402
|
});
|
|
31361
|
-
var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n max-width:
|
|
31362
|
-
var
|
|
31363
|
-
return
|
|
31403
|
+
var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n max-height: ", ";\n opacity: ", ";\n overflow: hidden;\n width: 100%;\n margin: 0 auto;\n padding: ", ";\n height: ", ";\n transition: height 0.2s ease;\n"])), function (_ref3) {
|
|
31404
|
+
var width = _ref3.width;
|
|
31405
|
+
return width + "px";
|
|
31364
31406
|
}, function (_ref4) {
|
|
31365
|
-
var
|
|
31366
|
-
return
|
|
31367
|
-
})
|
|
31368
|
-
var
|
|
31369
|
-
|
|
31370
|
-
|
|
31371
|
-
var
|
|
31372
|
-
|
|
31373
|
-
|
|
31407
|
+
var height = _ref4.height;
|
|
31408
|
+
return height + "px";
|
|
31409
|
+
}, function (_ref5) {
|
|
31410
|
+
var showOGMetadata = _ref5.showOGMetadata;
|
|
31411
|
+
return showOGMetadata ? 1 : 0;
|
|
31412
|
+
}, function (_ref6) {
|
|
31413
|
+
var showOGMetadata = _ref6.showOGMetadata;
|
|
31414
|
+
return showOGMetadata ? '0.3rem' : '0';
|
|
31415
|
+
}, function (_ref7) {
|
|
31416
|
+
var showOGMetadata = _ref7.showOGMetadata,
|
|
31417
|
+
height = _ref7.height;
|
|
31418
|
+
return showOGMetadata ? height + "px" : '0';
|
|
31419
|
+
});
|
|
31420
|
+
var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n width: 80%;\n padding: 0.5rem;\n margin: 0;\n transition: all 0.2s ease;\n"])));
|
|
31421
|
+
var Url = styled.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n margin: 0 0 12px 0;\n color: gray;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref8) {
|
|
31422
|
+
var maxWidth = _ref8.maxWidth;
|
|
31423
|
+
return maxWidth + "px";
|
|
31424
|
+
});
|
|
31425
|
+
var Title = styled.p(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n font-weight: bold;\n font-size: 13px;\n padding: 0;\n display: flex;\n align-items: center;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref9) {
|
|
31426
|
+
var maxWidth = _ref9.maxWidth;
|
|
31427
|
+
return maxWidth + "px";
|
|
31428
|
+
});
|
|
31429
|
+
var Desc = styled.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref0) {
|
|
31430
|
+
var maxWidth = _ref0.maxWidth;
|
|
31431
|
+
return maxWidth + "px";
|
|
31432
|
+
});
|
|
31433
|
+
var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n min-width: ", ";\n max-height: ", ";\n min-height: ", ";\n width: ", ";\n height: ", ";\n object-fit: cover;\n transition: height 0.2s ease;\n"])), function (_ref1) {
|
|
31434
|
+
var width = _ref1.width;
|
|
31435
|
+
return width + "px";
|
|
31436
|
+
}, function (_ref10) {
|
|
31437
|
+
var width = _ref10.width;
|
|
31438
|
+
return width + "px";
|
|
31439
|
+
}, function (_ref11) {
|
|
31440
|
+
var height = _ref11.height;
|
|
31441
|
+
return height + "px";
|
|
31442
|
+
}, function (_ref12) {
|
|
31443
|
+
var height = _ref12.height;
|
|
31444
|
+
return height + "px";
|
|
31445
|
+
}, function (_ref13) {
|
|
31446
|
+
var width = _ref13.width;
|
|
31447
|
+
return width + "px";
|
|
31448
|
+
}, function (_ref14) {
|
|
31449
|
+
var height = _ref14.height;
|
|
31450
|
+
return height + "px";
|
|
31451
|
+
});
|
|
31452
|
+
var Favicon = styled.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n transition: all 0.2s ease;\n width: 24px;\n height: 24px;\n object-fit: contain;\n margin-right: 4px;\n"])));
|
|
31374
31453
|
|
|
31375
31454
|
var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i;
|
|
31376
31455
|
var MessageBody = function MessageBody(_ref) {
|