sceyt-chat-react-uikit 1.7.2-beta.1 → 1.7.2-beta.2
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 +140 -86
- package/index.modern.js +140 -86
- package/package.json +1 -1
- package/types/index.d.ts +2 -0
package/index.js
CHANGED
|
@@ -10348,7 +10348,8 @@ var initialState$1 = {
|
|
|
10348
10348
|
openedMessageMenu: '',
|
|
10349
10349
|
attachmentsUploadingProgress: {},
|
|
10350
10350
|
playingAudioId: null,
|
|
10351
|
-
selectedMessagesMap: null
|
|
10351
|
+
selectedMessagesMap: null,
|
|
10352
|
+
oGMetadata: {}
|
|
10352
10353
|
};
|
|
10353
10354
|
var messageSlice = createSlice({
|
|
10354
10355
|
name: 'messages',
|
|
@@ -10691,6 +10692,12 @@ var messageSlice = createSlice({
|
|
|
10691
10692
|
},
|
|
10692
10693
|
clearSelectedMessages: function clearSelectedMessages(state) {
|
|
10693
10694
|
state.selectedMessagesMap = null;
|
|
10695
|
+
},
|
|
10696
|
+
setOGMetadata: function setOGMetadata(state, action) {
|
|
10697
|
+
var _action$payload10 = action.payload,
|
|
10698
|
+
url = _action$payload10.url,
|
|
10699
|
+
metadata = _action$payload10.metadata;
|
|
10700
|
+
state.oGMetadata[url] = metadata;
|
|
10694
10701
|
}
|
|
10695
10702
|
},
|
|
10696
10703
|
extraReducers: function extraReducers(builder) {
|
|
@@ -10740,7 +10747,8 @@ var _messageSlice$actions = messageSlice.actions,
|
|
|
10740
10747
|
setPlayingAudioId = _messageSlice$actions.setPlayingAudioId,
|
|
10741
10748
|
addSelectedMessage = _messageSlice$actions.addSelectedMessage,
|
|
10742
10749
|
removeSelectedMessage = _messageSlice$actions.removeSelectedMessage,
|
|
10743
|
-
clearSelectedMessages = _messageSlice$actions.clearSelectedMessages
|
|
10750
|
+
clearSelectedMessages = _messageSlice$actions.clearSelectedMessages,
|
|
10751
|
+
setOGMetadata = _messageSlice$actions.setOGMetadata;
|
|
10744
10752
|
var MessageReducer = messageSlice.reducer;
|
|
10745
10753
|
|
|
10746
10754
|
var initialState$2 = {
|
|
@@ -11820,6 +11828,12 @@ function setMessagesHasNextAC(hasNext) {
|
|
|
11820
11828
|
hasNext: hasNext
|
|
11821
11829
|
});
|
|
11822
11830
|
}
|
|
11831
|
+
function setOGMetadataAC(url, metadata) {
|
|
11832
|
+
return setOGMetadata({
|
|
11833
|
+
url: url,
|
|
11834
|
+
metadata: metadata
|
|
11835
|
+
});
|
|
11836
|
+
}
|
|
11823
11837
|
function setUpdateMessageAttachmentAC(url, messageId, params) {
|
|
11824
11838
|
return updateMessageAttachment({
|
|
11825
11839
|
url: url,
|
|
@@ -31384,32 +31398,37 @@ var validateUrl = function validateUrl(url) {
|
|
|
31384
31398
|
}
|
|
31385
31399
|
};
|
|
31386
31400
|
var OGMetadata = function OGMetadata(_ref) {
|
|
31387
|
-
var _metadata$
|
|
31401
|
+
var _metadata$og5, _metadata$og5$image, _metadata$og5$image$, _metadata$og6, _metadata$og6$image, _metadata$og6$image$, _metadata$og7, _metadata$og8, _metadata$og8$favicon, _metadata$og9, _metadata$og9$favicon, _metadata$og0, _metadata$og1, _metadata$og10;
|
|
31388
31402
|
var attachments = _ref.attachments,
|
|
31389
31403
|
state = _ref.state;
|
|
31390
|
-
var
|
|
31391
|
-
|
|
31392
|
-
|
|
31393
|
-
|
|
31394
|
-
imageLoadError = _useState2[0],
|
|
31395
|
-
setImageLoadError = _useState2[1];
|
|
31396
|
-
var _useState3 = React.useState(true),
|
|
31397
|
-
faviconLoadError = _useState3[0],
|
|
31398
|
-
setFaviconLoadError = _useState3[1];
|
|
31399
|
-
var _useState4 = React.useState(false),
|
|
31400
|
-
imageLoaded = _useState4[0],
|
|
31401
|
-
setImageLoaded = _useState4[1];
|
|
31402
|
-
var _useState5 = React.useState(0),
|
|
31403
|
-
imageWidth = _useState5[0],
|
|
31404
|
-
setImageWidth = _useState5[1];
|
|
31405
|
-
var _useState6 = React.useState(0),
|
|
31406
|
-
imageHeight = _useState6[0],
|
|
31407
|
-
setImageHeight = _useState6[1];
|
|
31404
|
+
var dispatch = useDispatch();
|
|
31405
|
+
var oGMetadata = useSelector(function (state) {
|
|
31406
|
+
return state.MessageReducer.oGMetadata;
|
|
31407
|
+
});
|
|
31408
31408
|
var attachment = React.useMemo(function () {
|
|
31409
31409
|
return attachments.find(function (attachment) {
|
|
31410
31410
|
return attachment.type === attachmentTypes.link;
|
|
31411
31411
|
});
|
|
31412
31412
|
}, [attachments]);
|
|
31413
|
+
var metadata = React.useMemo(function () {
|
|
31414
|
+
return oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] || null;
|
|
31415
|
+
}, [oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url]);
|
|
31416
|
+
var _useState = React.useState(false),
|
|
31417
|
+
imageLoadError = _useState[0],
|
|
31418
|
+
setImageLoadError = _useState[1];
|
|
31419
|
+
var _useState2 = React.useState(false),
|
|
31420
|
+
faviconLoadError = _useState2[0],
|
|
31421
|
+
setFaviconLoadError = _useState2[1];
|
|
31422
|
+
var _useState3 = React.useState(false),
|
|
31423
|
+
shouldAnimate = _useState3[0],
|
|
31424
|
+
setShouldAnimate = _useState3[1];
|
|
31425
|
+
var handleMetadata = React.useCallback(function (metadata) {
|
|
31426
|
+
if (metadata) {
|
|
31427
|
+
dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata));
|
|
31428
|
+
} else {
|
|
31429
|
+
dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, null));
|
|
31430
|
+
}
|
|
31431
|
+
}, []);
|
|
31413
31432
|
var ogMetadataQueryBuilder = React.useCallback(function (url) {
|
|
31414
31433
|
try {
|
|
31415
31434
|
var client = getClient();
|
|
@@ -31419,14 +31438,36 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31419
31438
|
var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
|
|
31420
31439
|
return Promise.resolve(queryBuilder.build()).then(function (query) {
|
|
31421
31440
|
return Promise.resolve(query.loadOGData()).then(function (metadata) {
|
|
31422
|
-
|
|
31423
|
-
|
|
31424
|
-
|
|
31441
|
+
var _metadata$og, _metadata$og$image, _metadata$og$image$;
|
|
31442
|
+
var image = new Image();
|
|
31443
|
+
image.src = metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : (_metadata$og$image = _metadata$og.image) === null || _metadata$og$image === void 0 ? void 0 : (_metadata$og$image$ = _metadata$og$image[0]) === null || _metadata$og$image$ === void 0 ? void 0 : _metadata$og$image$.url;
|
|
31444
|
+
if (image.src) {
|
|
31445
|
+
image.onload = function () {
|
|
31446
|
+
try {
|
|
31447
|
+
var imageWidth = image.width;
|
|
31448
|
+
var imageHeight = image.height;
|
|
31449
|
+
return Promise.resolve(storeMetadata(url, _extends({}, metadata, {
|
|
31450
|
+
imageWidth: imageWidth,
|
|
31451
|
+
imageHeight: imageHeight
|
|
31452
|
+
}))).then(function () {
|
|
31453
|
+
handleMetadata(_extends({}, metadata, {
|
|
31454
|
+
imageWidth: imageWidth,
|
|
31455
|
+
imageHeight: imageHeight
|
|
31456
|
+
}));
|
|
31457
|
+
});
|
|
31458
|
+
} catch (e) {
|
|
31459
|
+
return Promise.reject(e);
|
|
31460
|
+
}
|
|
31461
|
+
};
|
|
31462
|
+
image.onerror = function () {
|
|
31463
|
+
setImageLoadError(true);
|
|
31464
|
+
};
|
|
31465
|
+
}
|
|
31425
31466
|
});
|
|
31426
31467
|
});
|
|
31427
31468
|
}, function () {
|
|
31428
31469
|
console.log('Failed to fetch OG metadata');
|
|
31429
|
-
|
|
31470
|
+
handleMetadata(null);
|
|
31430
31471
|
});
|
|
31431
31472
|
if (_temp && _temp.then) return _temp.then(function () {});
|
|
31432
31473
|
}
|
|
@@ -31439,13 +31480,14 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31439
31480
|
}
|
|
31440
31481
|
}, []);
|
|
31441
31482
|
React.useEffect(function () {
|
|
31442
|
-
if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url) {
|
|
31483
|
+
if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
|
|
31484
|
+
setShouldAnimate(true);
|
|
31443
31485
|
var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
|
|
31444
31486
|
if (url) {
|
|
31445
31487
|
getMetadata(url).then(function (cachedMetadata) {
|
|
31446
31488
|
try {
|
|
31447
31489
|
if (cachedMetadata) {
|
|
31448
|
-
|
|
31490
|
+
handleMetadata(cachedMetadata);
|
|
31449
31491
|
} else {
|
|
31450
31492
|
ogMetadataQueryBuilder(url);
|
|
31451
31493
|
}
|
|
@@ -31458,7 +31500,7 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31458
31500
|
});
|
|
31459
31501
|
}
|
|
31460
31502
|
}
|
|
31461
|
-
}, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
|
|
31503
|
+
}, [attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
|
|
31462
31504
|
var ogUrl = React.useMemo(function () {
|
|
31463
31505
|
var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
|
|
31464
31506
|
var urlObj = validateUrl(url);
|
|
@@ -31468,70 +31510,61 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31468
31510
|
return url;
|
|
31469
31511
|
}, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
|
|
31470
31512
|
var showOGMetadata = React.useMemo(function () {
|
|
31471
|
-
var _metadata$
|
|
31472
|
-
return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$
|
|
31513
|
+
var _metadata$og2, _metadata$og3, _metadata$og3$image, _metadata$og3$image$, _metadata$og4;
|
|
31514
|
+
return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : _metadata$og2.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : (_metadata$og3$image = _metadata$og3.image) === null || _metadata$og3$image === void 0 ? void 0 : (_metadata$og3$image$ = _metadata$og3$image[0]) === null || _metadata$og3$image$ === void 0 ? void 0 : _metadata$og3$image$.url) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og4 = metadata.og) === null || _metadata$og4 === void 0 ? void 0 : _metadata$og4.description) && metadata;
|
|
31473
31515
|
}, [state, metadata]);
|
|
31474
|
-
React.useEffect(function () {
|
|
31475
|
-
var _metadata$og4, _metadata$og4$image, _metadata$og4$image$;
|
|
31476
|
-
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) {
|
|
31477
|
-
var _metadata$og5, _metadata$og5$image, _metadata$og5$image$;
|
|
31478
|
-
var image = new Image();
|
|
31479
|
-
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;
|
|
31480
|
-
image.onload = function () {
|
|
31481
|
-
var imageWidth = image.width;
|
|
31482
|
-
var imageHeight = image.height;
|
|
31483
|
-
setImageWidth(imageWidth);
|
|
31484
|
-
setImageHeight(imageHeight);
|
|
31485
|
-
setImageLoadError(false);
|
|
31486
|
-
setImageLoaded(true);
|
|
31487
|
-
};
|
|
31488
|
-
image.onerror = function () {
|
|
31489
|
-
setImageLoadError(true);
|
|
31490
|
-
setImageLoaded(true);
|
|
31491
|
-
};
|
|
31492
|
-
}
|
|
31493
|
-
}, [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]);
|
|
31494
31516
|
var calculatedImageHeight = React.useMemo(function () {
|
|
31495
|
-
return imageHeight / (imageWidth / 400);
|
|
31496
|
-
}, [imageWidth, imageHeight]);
|
|
31517
|
+
return ((metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) || 0) / (((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) || 0) / 400);
|
|
31518
|
+
}, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight]);
|
|
31497
31519
|
return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
|
|
31498
31520
|
showOGMetadata: !!showOGMetadata
|
|
31499
31521
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
31500
31522
|
onClick: function onClick() {
|
|
31501
31523
|
window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
|
|
31524
|
+
},
|
|
31525
|
+
style: {
|
|
31526
|
+
width: '400px'
|
|
31502
31527
|
}
|
|
31503
31528
|
}, /*#__PURE__*/React__default.createElement(ImageContainer, {
|
|
31504
|
-
showOGMetadata: !!showOGMetadata && !imageLoadError
|
|
31505
|
-
|
|
31506
|
-
height: calculatedImageHeight
|
|
31507
|
-
|
|
31508
|
-
|
|
31529
|
+
showOGMetadata: !!showOGMetadata && !imageLoadError,
|
|
31530
|
+
containerWidth: 400,
|
|
31531
|
+
height: calculatedImageHeight,
|
|
31532
|
+
shouldAnimate: shouldAnimate
|
|
31533
|
+
}, metadata !== null && metadata !== void 0 && (_metadata$og5 = metadata.og) !== null && _metadata$og5 !== void 0 && (_metadata$og5$image = _metadata$og5.image) !== null && _metadata$og5$image !== void 0 && (_metadata$og5$image$ = _metadata$og5$image[0]) !== null && _metadata$og5$image$ !== void 0 && _metadata$og5$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
|
|
31534
|
+
src: 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,
|
|
31509
31535
|
alt: 'OG metadata image',
|
|
31510
|
-
|
|
31511
|
-
height: calculatedImageHeight
|
|
31512
|
-
|
|
31513
|
-
|
|
31514
|
-
|
|
31515
|
-
|
|
31516
|
-
|
|
31517
|
-
|
|
31536
|
+
imageWidth: 400,
|
|
31537
|
+
height: calculatedImageHeight,
|
|
31538
|
+
shouldAnimate: shouldAnimate
|
|
31539
|
+
})) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, {
|
|
31540
|
+
shouldAnimate: shouldAnimate
|
|
31541
|
+
}, /*#__PURE__*/React__default.createElement(Url, {
|
|
31542
|
+
maxWidth: 400,
|
|
31543
|
+
shouldAnimate: shouldAnimate
|
|
31544
|
+
}, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && _metadata$og7.title ? (/*#__PURE__*/React__default.createElement(Title, {
|
|
31545
|
+
maxWidth: 400,
|
|
31546
|
+
shouldAnimate: shouldAnimate
|
|
31547
|
+
}, metadata !== null && metadata !== void 0 && (_metadata$og8 = metadata.og) !== null && _metadata$og8 !== void 0 && (_metadata$og8$favicon = _metadata$og8.favicon) !== null && _metadata$og8$favicon !== void 0 && _metadata$og8$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
|
|
31548
|
+
shouldAnimate: shouldAnimate,
|
|
31549
|
+
src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : (_metadata$og9$favicon = _metadata$og9.favicon) === null || _metadata$og9$favicon === void 0 ? void 0 : _metadata$og9$favicon.url,
|
|
31518
31550
|
onLoad: function onLoad() {
|
|
31519
31551
|
return setFaviconLoadError(false);
|
|
31520
31552
|
},
|
|
31521
31553
|
onError: function onError() {
|
|
31522
31554
|
return setFaviconLoadError(true);
|
|
31523
31555
|
}
|
|
31524
|
-
})) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$
|
|
31525
|
-
maxWidth: 400
|
|
31526
|
-
|
|
31556
|
+
})) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og0 = metadata.og) === null || _metadata$og0 === void 0 ? void 0 : _metadata$og0.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og1 = metadata.og) !== null && _metadata$og1 !== void 0 && _metadata$og1.description ? (/*#__PURE__*/React__default.createElement(Desc, {
|
|
31557
|
+
maxWidth: 400,
|
|
31558
|
+
shouldAnimate: shouldAnimate
|
|
31559
|
+
}, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.description)) : null)) : null));
|
|
31527
31560
|
};
|
|
31528
31561
|
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) {
|
|
31529
31562
|
var showOGMetadata = _ref2.showOGMetadata;
|
|
31530
31563
|
return showOGMetadata ? '0.8rem' : '0';
|
|
31531
31564
|
});
|
|
31532
|
-
var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n opacity: ", ";\n overflow: hidden;\n margin: 0 auto;\n padding: ", ";\n
|
|
31533
|
-
var
|
|
31534
|
-
return
|
|
31565
|
+
var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n opacity: ", ";\n overflow: hidden;\n margin: 0 auto;\n padding: ", ";\n ", "\n"])), function (_ref3) {
|
|
31566
|
+
var containerWidth = _ref3.containerWidth;
|
|
31567
|
+
return containerWidth ? "\n max-width: " + (containerWidth + "px") + ";\n " : "\n max-width: 100%;\n width: 100%;\n ";
|
|
31535
31568
|
}, function (_ref4) {
|
|
31536
31569
|
var height = _ref4.height,
|
|
31537
31570
|
showOGMetadata = _ref4.showOGMetadata;
|
|
@@ -31541,29 +31574,50 @@ var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2
|
|
|
31541
31574
|
return showOGMetadata ? 1 : 0;
|
|
31542
31575
|
}, function (_ref6) {
|
|
31543
31576
|
var showOGMetadata = _ref6.showOGMetadata;
|
|
31544
|
-
return showOGMetadata ? '
|
|
31577
|
+
return showOGMetadata ? '4px' : '0';
|
|
31578
|
+
}, function (_ref7) {
|
|
31579
|
+
var shouldAnimate = _ref7.shouldAnimate;
|
|
31580
|
+
return shouldAnimate && "\n transition: height 0.2s ease;\n ";
|
|
31545
31581
|
});
|
|
31546
|
-
var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n padding: 0.5rem;\n margin: 0;\n
|
|
31547
|
-
var
|
|
31548
|
-
|
|
31549
|
-
return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
|
|
31582
|
+
var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n padding: 0.5rem;\n margin: 0;\n ", "\n"])), function (_ref8) {
|
|
31583
|
+
var shouldAnimate = _ref8.shouldAnimate;
|
|
31584
|
+
return shouldAnimate && "\n transition: all 0.2s ease;\n ";
|
|
31550
31585
|
});
|
|
31551
|
-
var
|
|
31552
|
-
var maxWidth =
|
|
31586
|
+
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 ", "\n ", "\n"])), function (_ref9) {
|
|
31587
|
+
var maxWidth = _ref9.maxWidth;
|
|
31553
31588
|
return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
|
|
31589
|
+
}, function (_ref0) {
|
|
31590
|
+
var shouldAnimate = _ref0.shouldAnimate;
|
|
31591
|
+
return shouldAnimate && "\n transition: all 0.2s ease;\n ";
|
|
31554
31592
|
});
|
|
31555
|
-
var
|
|
31556
|
-
var maxWidth =
|
|
31593
|
+
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 ", "\n ", "\n"])), function (_ref1) {
|
|
31594
|
+
var maxWidth = _ref1.maxWidth;
|
|
31557
31595
|
return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
|
|
31596
|
+
}, function (_ref10) {
|
|
31597
|
+
var shouldAnimate = _ref10.shouldAnimate;
|
|
31598
|
+
return shouldAnimate && "\n transition: all 0.2s ease;\n ";
|
|
31558
31599
|
});
|
|
31559
|
-
var
|
|
31560
|
-
var
|
|
31561
|
-
return
|
|
31562
|
-
}, function (
|
|
31563
|
-
var
|
|
31600
|
+
var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n ", "\n ", "\n"])), function (_ref11) {
|
|
31601
|
+
var maxWidth = _ref11.maxWidth;
|
|
31602
|
+
return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
|
|
31603
|
+
}, function (_ref12) {
|
|
31604
|
+
var shouldAnimate = _ref12.shouldAnimate;
|
|
31605
|
+
return shouldAnimate && "\n transition: all 0.2s ease;\n ";
|
|
31606
|
+
});
|
|
31607
|
+
var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n object-fit: cover;\n ", "\n"])), function (_ref13) {
|
|
31608
|
+
var imageWidth = _ref13.imageWidth;
|
|
31609
|
+
return imageWidth && "\n max-width: " + (imageWidth + "px") + ";\n width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n ";
|
|
31610
|
+
}, function (_ref14) {
|
|
31611
|
+
var height = _ref14.height;
|
|
31564
31612
|
return height && "\n max-height: " + (height + "px") + ";\n min-height: " + (height + "px") + ";\n height: " + (height + "px") + ";\n ";
|
|
31613
|
+
}, function (_ref15) {
|
|
31614
|
+
var shouldAnimate = _ref15.shouldAnimate;
|
|
31615
|
+
return shouldAnimate && "\n transition: height 0.2s ease;\n ";
|
|
31616
|
+
});
|
|
31617
|
+
var Favicon = styled__default.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n ", "\n width: 24px;\n height: 24px;\n object-fit: contain;\n margin-right: 4px;\n"])), function (_ref16) {
|
|
31618
|
+
var shouldAnimate = _ref16.shouldAnimate;
|
|
31619
|
+
return shouldAnimate && "\n transition: all 0.2s ease;\n ";
|
|
31565
31620
|
});
|
|
31566
|
-
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"])));
|
|
31567
31621
|
|
|
31568
31622
|
var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i;
|
|
31569
31623
|
var MessageBody = function MessageBody(_ref) {
|
package/index.modern.js
CHANGED
|
@@ -10327,7 +10327,8 @@ var initialState$1 = {
|
|
|
10327
10327
|
openedMessageMenu: '',
|
|
10328
10328
|
attachmentsUploadingProgress: {},
|
|
10329
10329
|
playingAudioId: null,
|
|
10330
|
-
selectedMessagesMap: null
|
|
10330
|
+
selectedMessagesMap: null,
|
|
10331
|
+
oGMetadata: {}
|
|
10331
10332
|
};
|
|
10332
10333
|
var messageSlice = createSlice({
|
|
10333
10334
|
name: 'messages',
|
|
@@ -10670,6 +10671,12 @@ var messageSlice = createSlice({
|
|
|
10670
10671
|
},
|
|
10671
10672
|
clearSelectedMessages: function clearSelectedMessages(state) {
|
|
10672
10673
|
state.selectedMessagesMap = null;
|
|
10674
|
+
},
|
|
10675
|
+
setOGMetadata: function setOGMetadata(state, action) {
|
|
10676
|
+
var _action$payload10 = action.payload,
|
|
10677
|
+
url = _action$payload10.url,
|
|
10678
|
+
metadata = _action$payload10.metadata;
|
|
10679
|
+
state.oGMetadata[url] = metadata;
|
|
10673
10680
|
}
|
|
10674
10681
|
},
|
|
10675
10682
|
extraReducers: function extraReducers(builder) {
|
|
@@ -10719,7 +10726,8 @@ var _messageSlice$actions = messageSlice.actions,
|
|
|
10719
10726
|
setPlayingAudioId = _messageSlice$actions.setPlayingAudioId,
|
|
10720
10727
|
addSelectedMessage = _messageSlice$actions.addSelectedMessage,
|
|
10721
10728
|
removeSelectedMessage = _messageSlice$actions.removeSelectedMessage,
|
|
10722
|
-
clearSelectedMessages = _messageSlice$actions.clearSelectedMessages
|
|
10729
|
+
clearSelectedMessages = _messageSlice$actions.clearSelectedMessages,
|
|
10730
|
+
setOGMetadata = _messageSlice$actions.setOGMetadata;
|
|
10723
10731
|
var MessageReducer = messageSlice.reducer;
|
|
10724
10732
|
|
|
10725
10733
|
var initialState$2 = {
|
|
@@ -11799,6 +11807,12 @@ function setMessagesHasNextAC(hasNext) {
|
|
|
11799
11807
|
hasNext: hasNext
|
|
11800
11808
|
});
|
|
11801
11809
|
}
|
|
11810
|
+
function setOGMetadataAC(url, metadata) {
|
|
11811
|
+
return setOGMetadata({
|
|
11812
|
+
url: url,
|
|
11813
|
+
metadata: metadata
|
|
11814
|
+
});
|
|
11815
|
+
}
|
|
11802
11816
|
function setUpdateMessageAttachmentAC(url, messageId, params) {
|
|
11803
11817
|
return updateMessageAttachment({
|
|
11804
11818
|
url: url,
|
|
@@ -31363,32 +31377,37 @@ var validateUrl = function validateUrl(url) {
|
|
|
31363
31377
|
}
|
|
31364
31378
|
};
|
|
31365
31379
|
var OGMetadata = function OGMetadata(_ref) {
|
|
31366
|
-
var _metadata$
|
|
31380
|
+
var _metadata$og5, _metadata$og5$image, _metadata$og5$image$, _metadata$og6, _metadata$og6$image, _metadata$og6$image$, _metadata$og7, _metadata$og8, _metadata$og8$favicon, _metadata$og9, _metadata$og9$favicon, _metadata$og0, _metadata$og1, _metadata$og10;
|
|
31367
31381
|
var attachments = _ref.attachments,
|
|
31368
31382
|
state = _ref.state;
|
|
31369
|
-
var
|
|
31370
|
-
|
|
31371
|
-
|
|
31372
|
-
|
|
31373
|
-
imageLoadError = _useState2[0],
|
|
31374
|
-
setImageLoadError = _useState2[1];
|
|
31375
|
-
var _useState3 = useState(true),
|
|
31376
|
-
faviconLoadError = _useState3[0],
|
|
31377
|
-
setFaviconLoadError = _useState3[1];
|
|
31378
|
-
var _useState4 = useState(false),
|
|
31379
|
-
imageLoaded = _useState4[0],
|
|
31380
|
-
setImageLoaded = _useState4[1];
|
|
31381
|
-
var _useState5 = useState(0),
|
|
31382
|
-
imageWidth = _useState5[0],
|
|
31383
|
-
setImageWidth = _useState5[1];
|
|
31384
|
-
var _useState6 = useState(0),
|
|
31385
|
-
imageHeight = _useState6[0],
|
|
31386
|
-
setImageHeight = _useState6[1];
|
|
31383
|
+
var dispatch = useDispatch();
|
|
31384
|
+
var oGMetadata = useSelector(function (state) {
|
|
31385
|
+
return state.MessageReducer.oGMetadata;
|
|
31386
|
+
});
|
|
31387
31387
|
var attachment = useMemo(function () {
|
|
31388
31388
|
return attachments.find(function (attachment) {
|
|
31389
31389
|
return attachment.type === attachmentTypes.link;
|
|
31390
31390
|
});
|
|
31391
31391
|
}, [attachments]);
|
|
31392
|
+
var metadata = useMemo(function () {
|
|
31393
|
+
return oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] || null;
|
|
31394
|
+
}, [oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url]);
|
|
31395
|
+
var _useState = useState(false),
|
|
31396
|
+
imageLoadError = _useState[0],
|
|
31397
|
+
setImageLoadError = _useState[1];
|
|
31398
|
+
var _useState2 = useState(false),
|
|
31399
|
+
faviconLoadError = _useState2[0],
|
|
31400
|
+
setFaviconLoadError = _useState2[1];
|
|
31401
|
+
var _useState3 = useState(false),
|
|
31402
|
+
shouldAnimate = _useState3[0],
|
|
31403
|
+
setShouldAnimate = _useState3[1];
|
|
31404
|
+
var handleMetadata = useCallback(function (metadata) {
|
|
31405
|
+
if (metadata) {
|
|
31406
|
+
dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata));
|
|
31407
|
+
} else {
|
|
31408
|
+
dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, null));
|
|
31409
|
+
}
|
|
31410
|
+
}, []);
|
|
31392
31411
|
var ogMetadataQueryBuilder = useCallback(function (url) {
|
|
31393
31412
|
try {
|
|
31394
31413
|
var client = getClient();
|
|
@@ -31398,14 +31417,36 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31398
31417
|
var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
|
|
31399
31418
|
return Promise.resolve(queryBuilder.build()).then(function (query) {
|
|
31400
31419
|
return Promise.resolve(query.loadOGData()).then(function (metadata) {
|
|
31401
|
-
|
|
31402
|
-
|
|
31403
|
-
|
|
31420
|
+
var _metadata$og, _metadata$og$image, _metadata$og$image$;
|
|
31421
|
+
var image = new Image();
|
|
31422
|
+
image.src = metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : (_metadata$og$image = _metadata$og.image) === null || _metadata$og$image === void 0 ? void 0 : (_metadata$og$image$ = _metadata$og$image[0]) === null || _metadata$og$image$ === void 0 ? void 0 : _metadata$og$image$.url;
|
|
31423
|
+
if (image.src) {
|
|
31424
|
+
image.onload = function () {
|
|
31425
|
+
try {
|
|
31426
|
+
var imageWidth = image.width;
|
|
31427
|
+
var imageHeight = image.height;
|
|
31428
|
+
return Promise.resolve(storeMetadata(url, _extends({}, metadata, {
|
|
31429
|
+
imageWidth: imageWidth,
|
|
31430
|
+
imageHeight: imageHeight
|
|
31431
|
+
}))).then(function () {
|
|
31432
|
+
handleMetadata(_extends({}, metadata, {
|
|
31433
|
+
imageWidth: imageWidth,
|
|
31434
|
+
imageHeight: imageHeight
|
|
31435
|
+
}));
|
|
31436
|
+
});
|
|
31437
|
+
} catch (e) {
|
|
31438
|
+
return Promise.reject(e);
|
|
31439
|
+
}
|
|
31440
|
+
};
|
|
31441
|
+
image.onerror = function () {
|
|
31442
|
+
setImageLoadError(true);
|
|
31443
|
+
};
|
|
31444
|
+
}
|
|
31404
31445
|
});
|
|
31405
31446
|
});
|
|
31406
31447
|
}, function () {
|
|
31407
31448
|
console.log('Failed to fetch OG metadata');
|
|
31408
|
-
|
|
31449
|
+
handleMetadata(null);
|
|
31409
31450
|
});
|
|
31410
31451
|
if (_temp && _temp.then) return _temp.then(function () {});
|
|
31411
31452
|
}
|
|
@@ -31418,13 +31459,14 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31418
31459
|
}
|
|
31419
31460
|
}, []);
|
|
31420
31461
|
useEffect(function () {
|
|
31421
|
-
if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url) {
|
|
31462
|
+
if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
|
|
31463
|
+
setShouldAnimate(true);
|
|
31422
31464
|
var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
|
|
31423
31465
|
if (url) {
|
|
31424
31466
|
getMetadata(url).then(function (cachedMetadata) {
|
|
31425
31467
|
try {
|
|
31426
31468
|
if (cachedMetadata) {
|
|
31427
|
-
|
|
31469
|
+
handleMetadata(cachedMetadata);
|
|
31428
31470
|
} else {
|
|
31429
31471
|
ogMetadataQueryBuilder(url);
|
|
31430
31472
|
}
|
|
@@ -31437,7 +31479,7 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31437
31479
|
});
|
|
31438
31480
|
}
|
|
31439
31481
|
}
|
|
31440
|
-
}, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
|
|
31482
|
+
}, [attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
|
|
31441
31483
|
var ogUrl = useMemo(function () {
|
|
31442
31484
|
var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
|
|
31443
31485
|
var urlObj = validateUrl(url);
|
|
@@ -31447,70 +31489,61 @@ var OGMetadata = function OGMetadata(_ref) {
|
|
|
31447
31489
|
return url;
|
|
31448
31490
|
}, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
|
|
31449
31491
|
var showOGMetadata = useMemo(function () {
|
|
31450
|
-
var _metadata$
|
|
31451
|
-
return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$
|
|
31492
|
+
var _metadata$og2, _metadata$og3, _metadata$og3$image, _metadata$og3$image$, _metadata$og4;
|
|
31493
|
+
return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : _metadata$og2.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : (_metadata$og3$image = _metadata$og3.image) === null || _metadata$og3$image === void 0 ? void 0 : (_metadata$og3$image$ = _metadata$og3$image[0]) === null || _metadata$og3$image$ === void 0 ? void 0 : _metadata$og3$image$.url) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og4 = metadata.og) === null || _metadata$og4 === void 0 ? void 0 : _metadata$og4.description) && metadata;
|
|
31452
31494
|
}, [state, metadata]);
|
|
31453
|
-
useEffect(function () {
|
|
31454
|
-
var _metadata$og4, _metadata$og4$image, _metadata$og4$image$;
|
|
31455
|
-
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) {
|
|
31456
|
-
var _metadata$og5, _metadata$og5$image, _metadata$og5$image$;
|
|
31457
|
-
var image = new Image();
|
|
31458
|
-
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;
|
|
31459
|
-
image.onload = function () {
|
|
31460
|
-
var imageWidth = image.width;
|
|
31461
|
-
var imageHeight = image.height;
|
|
31462
|
-
setImageWidth(imageWidth);
|
|
31463
|
-
setImageHeight(imageHeight);
|
|
31464
|
-
setImageLoadError(false);
|
|
31465
|
-
setImageLoaded(true);
|
|
31466
|
-
};
|
|
31467
|
-
image.onerror = function () {
|
|
31468
|
-
setImageLoadError(true);
|
|
31469
|
-
setImageLoaded(true);
|
|
31470
|
-
};
|
|
31471
|
-
}
|
|
31472
|
-
}, [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]);
|
|
31473
31495
|
var calculatedImageHeight = useMemo(function () {
|
|
31474
|
-
return imageHeight / (imageWidth / 400);
|
|
31475
|
-
}, [imageWidth, imageHeight]);
|
|
31496
|
+
return ((metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) || 0) / (((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) || 0) / 400);
|
|
31497
|
+
}, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight]);
|
|
31476
31498
|
return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
|
|
31477
31499
|
showOGMetadata: !!showOGMetadata
|
|
31478
31500
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
31479
31501
|
onClick: function onClick() {
|
|
31480
31502
|
window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
|
|
31503
|
+
},
|
|
31504
|
+
style: {
|
|
31505
|
+
width: '400px'
|
|
31481
31506
|
}
|
|
31482
31507
|
}, /*#__PURE__*/React__default.createElement(ImageContainer, {
|
|
31483
|
-
showOGMetadata: !!showOGMetadata && !imageLoadError
|
|
31484
|
-
|
|
31485
|
-
height: calculatedImageHeight
|
|
31486
|
-
|
|
31487
|
-
|
|
31508
|
+
showOGMetadata: !!showOGMetadata && !imageLoadError,
|
|
31509
|
+
containerWidth: 400,
|
|
31510
|
+
height: calculatedImageHeight,
|
|
31511
|
+
shouldAnimate: shouldAnimate
|
|
31512
|
+
}, metadata !== null && metadata !== void 0 && (_metadata$og5 = metadata.og) !== null && _metadata$og5 !== void 0 && (_metadata$og5$image = _metadata$og5.image) !== null && _metadata$og5$image !== void 0 && (_metadata$og5$image$ = _metadata$og5$image[0]) !== null && _metadata$og5$image$ !== void 0 && _metadata$og5$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
|
|
31513
|
+
src: 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,
|
|
31488
31514
|
alt: 'OG metadata image',
|
|
31489
|
-
|
|
31490
|
-
height: calculatedImageHeight
|
|
31491
|
-
|
|
31492
|
-
|
|
31493
|
-
|
|
31494
|
-
|
|
31495
|
-
|
|
31496
|
-
|
|
31515
|
+
imageWidth: 400,
|
|
31516
|
+
height: calculatedImageHeight,
|
|
31517
|
+
shouldAnimate: shouldAnimate
|
|
31518
|
+
})) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, {
|
|
31519
|
+
shouldAnimate: shouldAnimate
|
|
31520
|
+
}, /*#__PURE__*/React__default.createElement(Url, {
|
|
31521
|
+
maxWidth: 400,
|
|
31522
|
+
shouldAnimate: shouldAnimate
|
|
31523
|
+
}, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && _metadata$og7.title ? (/*#__PURE__*/React__default.createElement(Title, {
|
|
31524
|
+
maxWidth: 400,
|
|
31525
|
+
shouldAnimate: shouldAnimate
|
|
31526
|
+
}, metadata !== null && metadata !== void 0 && (_metadata$og8 = metadata.og) !== null && _metadata$og8 !== void 0 && (_metadata$og8$favicon = _metadata$og8.favicon) !== null && _metadata$og8$favicon !== void 0 && _metadata$og8$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
|
|
31527
|
+
shouldAnimate: shouldAnimate,
|
|
31528
|
+
src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : (_metadata$og9$favicon = _metadata$og9.favicon) === null || _metadata$og9$favicon === void 0 ? void 0 : _metadata$og9$favicon.url,
|
|
31497
31529
|
onLoad: function onLoad() {
|
|
31498
31530
|
return setFaviconLoadError(false);
|
|
31499
31531
|
},
|
|
31500
31532
|
onError: function onError() {
|
|
31501
31533
|
return setFaviconLoadError(true);
|
|
31502
31534
|
}
|
|
31503
|
-
})) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$
|
|
31504
|
-
maxWidth: 400
|
|
31505
|
-
|
|
31535
|
+
})) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og0 = metadata.og) === null || _metadata$og0 === void 0 ? void 0 : _metadata$og0.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og1 = metadata.og) !== null && _metadata$og1 !== void 0 && _metadata$og1.description ? (/*#__PURE__*/React__default.createElement(Desc, {
|
|
31536
|
+
maxWidth: 400,
|
|
31537
|
+
shouldAnimate: shouldAnimate
|
|
31538
|
+
}, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.description)) : null)) : null));
|
|
31506
31539
|
};
|
|
31507
31540
|
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) {
|
|
31508
31541
|
var showOGMetadata = _ref2.showOGMetadata;
|
|
31509
31542
|
return showOGMetadata ? '0.8rem' : '0';
|
|
31510
31543
|
});
|
|
31511
|
-
var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n opacity: ", ";\n overflow: hidden;\n margin: 0 auto;\n padding: ", ";\n
|
|
31512
|
-
var
|
|
31513
|
-
return
|
|
31544
|
+
var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n opacity: ", ";\n overflow: hidden;\n margin: 0 auto;\n padding: ", ";\n ", "\n"])), function (_ref3) {
|
|
31545
|
+
var containerWidth = _ref3.containerWidth;
|
|
31546
|
+
return containerWidth ? "\n max-width: " + (containerWidth + "px") + ";\n " : "\n max-width: 100%;\n width: 100%;\n ";
|
|
31514
31547
|
}, function (_ref4) {
|
|
31515
31548
|
var height = _ref4.height,
|
|
31516
31549
|
showOGMetadata = _ref4.showOGMetadata;
|
|
@@ -31520,29 +31553,50 @@ var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _tag
|
|
|
31520
31553
|
return showOGMetadata ? 1 : 0;
|
|
31521
31554
|
}, function (_ref6) {
|
|
31522
31555
|
var showOGMetadata = _ref6.showOGMetadata;
|
|
31523
|
-
return showOGMetadata ? '
|
|
31556
|
+
return showOGMetadata ? '4px' : '0';
|
|
31557
|
+
}, function (_ref7) {
|
|
31558
|
+
var shouldAnimate = _ref7.shouldAnimate;
|
|
31559
|
+
return shouldAnimate && "\n transition: height 0.2s ease;\n ";
|
|
31524
31560
|
});
|
|
31525
|
-
var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n padding: 0.5rem;\n margin: 0;\n
|
|
31526
|
-
var
|
|
31527
|
-
|
|
31528
|
-
return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
|
|
31561
|
+
var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n padding: 0.5rem;\n margin: 0;\n ", "\n"])), function (_ref8) {
|
|
31562
|
+
var shouldAnimate = _ref8.shouldAnimate;
|
|
31563
|
+
return shouldAnimate && "\n transition: all 0.2s ease;\n ";
|
|
31529
31564
|
});
|
|
31530
|
-
var
|
|
31531
|
-
var maxWidth =
|
|
31565
|
+
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 ", "\n ", "\n"])), function (_ref9) {
|
|
31566
|
+
var maxWidth = _ref9.maxWidth;
|
|
31532
31567
|
return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
|
|
31568
|
+
}, function (_ref0) {
|
|
31569
|
+
var shouldAnimate = _ref0.shouldAnimate;
|
|
31570
|
+
return shouldAnimate && "\n transition: all 0.2s ease;\n ";
|
|
31533
31571
|
});
|
|
31534
|
-
var
|
|
31535
|
-
var maxWidth =
|
|
31572
|
+
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 ", "\n ", "\n"])), function (_ref1) {
|
|
31573
|
+
var maxWidth = _ref1.maxWidth;
|
|
31536
31574
|
return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
|
|
31575
|
+
}, function (_ref10) {
|
|
31576
|
+
var shouldAnimate = _ref10.shouldAnimate;
|
|
31577
|
+
return shouldAnimate && "\n transition: all 0.2s ease;\n ";
|
|
31537
31578
|
});
|
|
31538
|
-
var
|
|
31539
|
-
var
|
|
31540
|
-
return
|
|
31541
|
-
}, function (
|
|
31542
|
-
var
|
|
31579
|
+
var Desc = styled.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n ", "\n ", "\n"])), function (_ref11) {
|
|
31580
|
+
var maxWidth = _ref11.maxWidth;
|
|
31581
|
+
return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
|
|
31582
|
+
}, function (_ref12) {
|
|
31583
|
+
var shouldAnimate = _ref12.shouldAnimate;
|
|
31584
|
+
return shouldAnimate && "\n transition: all 0.2s ease;\n ";
|
|
31585
|
+
});
|
|
31586
|
+
var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n object-fit: cover;\n ", "\n"])), function (_ref13) {
|
|
31587
|
+
var imageWidth = _ref13.imageWidth;
|
|
31588
|
+
return imageWidth && "\n max-width: " + (imageWidth + "px") + ";\n width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n ";
|
|
31589
|
+
}, function (_ref14) {
|
|
31590
|
+
var height = _ref14.height;
|
|
31543
31591
|
return height && "\n max-height: " + (height + "px") + ";\n min-height: " + (height + "px") + ";\n height: " + (height + "px") + ";\n ";
|
|
31592
|
+
}, function (_ref15) {
|
|
31593
|
+
var shouldAnimate = _ref15.shouldAnimate;
|
|
31594
|
+
return shouldAnimate && "\n transition: height 0.2s ease;\n ";
|
|
31595
|
+
});
|
|
31596
|
+
var Favicon = styled.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n ", "\n width: 24px;\n height: 24px;\n object-fit: contain;\n margin-right: 4px;\n"])), function (_ref16) {
|
|
31597
|
+
var shouldAnimate = _ref16.shouldAnimate;
|
|
31598
|
+
return shouldAnimate && "\n transition: all 0.2s ease;\n ";
|
|
31544
31599
|
});
|
|
31545
|
-
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"])));
|
|
31546
31600
|
|
|
31547
31601
|
var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i;
|
|
31548
31602
|
var MessageBody = function MessageBody(_ref) {
|
package/package.json
CHANGED
package/types/index.d.ts
CHANGED
|
@@ -237,6 +237,8 @@ export interface IOGMetadata {
|
|
|
237
237
|
url: string;
|
|
238
238
|
}[];
|
|
239
239
|
};
|
|
240
|
+
imageWidth?: number;
|
|
241
|
+
imageHeight?: number;
|
|
240
242
|
}
|
|
241
243
|
export declare type MuteTime = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 24;
|
|
242
244
|
export declare type ICustomAvatarColors = [string, string, string, string, string, string];
|