sceyt-chat-react-uikit 1.7.1-beta.13 → 1.7.1-beta.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/index.js +108 -29
  2. package/index.modern.js +108 -29
  3. 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) {
@@ -10606,8 +10606,8 @@ var messageSlice = createSlice({
10606
10606
  var _action$payload8 = action.payload,
10607
10607
  uploaded = _action$payload8.uploaded,
10608
10608
  total = _action$payload8.total,
10609
- attachmentId = _action$payload8.attachmentId,
10610
- progress = _action$payload8.progress;
10609
+ attachmentId = _action$payload8.attachmentId;
10610
+ var progress = uploaded / total;
10611
10611
  var updateData = {
10612
10612
  uploaded: uploaded,
10613
10613
  total: total,
@@ -31270,7 +31270,7 @@ var validateUrl = function validateUrl(url) {
31270
31270
  }
31271
31271
  };
31272
31272
  var OGMetadata = function OGMetadata(_ref) {
31273
- var _metadata$og4, _metadata$og4$image, _metadata$og4$image$, _metadata$og5, _metadata$og5$image, _metadata$og5$image$, _metadata$og6, _metadata$og7, _metadata$og7$favicon, _metadata$og8, _metadata$og8$favicon, _metadata$og9, _metadata$og0, _metadata$og1;
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
- }, 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 ? (/*#__PURE__*/React__default.createElement(Img, {
31360
- 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,
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
- onLoad: function onLoad() {
31363
- return setImageLoadError(false);
31364
- },
31365
- onError: function onError() {
31366
- return setImageLoadError(true);
31367
- }
31368
- })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, null, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, null, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$favicon = _metadata$og7.favicon) !== null && _metadata$og7$favicon !== void 0 && _metadata$og7$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
31369
- src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$favicon = _metadata$og8.favicon) === null || _metadata$og8$favicon === void 0 ? void 0 : _metadata$og8$favicon.url,
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$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && _metadata$og0.description ? /*#__PURE__*/React__default.createElement(Desc, null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description) : null)) : null));
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: 100%;\n max-height: 200px;\n width: 100%;\n margin: 0 auto;\n padding: ", ";\n height: ", ";\n transition: height 0.2s ease;\n"])), function (_ref3) {
31383
- var showOGMetadata = _ref3.showOGMetadata;
31384
- return showOGMetadata ? '0.3rem' : '0';
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 showOGMetadata = _ref4.showOGMetadata;
31387
- return showOGMetadata ? '200px' : '0';
31388
- });
31389
- var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n width: 80%;\n padding: 0.5rem;\n margin: 0;\n"])));
31390
- 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"])));
31391
- 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"])));
31392
- var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n"])));
31393
- var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n max-height: 100%;\n width: 100%;\n height: 200px;\n object-fit: cover;\n transition: height 0.2s ease;\n"])));
31394
- var Favicon = styled__default.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n object-fit: contain;\n margin-right: 4px;\n"])));
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) {
@@ -37466,7 +37545,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
37466
37545
  if (attachments.length) {
37467
37546
  var videoAttachment = false;
37468
37547
  attachments.forEach(function (att) {
37469
- if (att.type === 'video' || att.data.type.split('/')[0] === 'video') {
37548
+ if ((att.type === 'video' || att.data.type.split('/')[0] === 'video') && att.type !== 'file') {
37470
37549
  videoAttachment = true;
37471
37550
  if (!readyVideoAttachments[att.tid]) {
37472
37551
  setSendMessageIsActive(false);
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) {
@@ -10585,8 +10585,8 @@ var messageSlice = createSlice({
10585
10585
  var _action$payload8 = action.payload,
10586
10586
  uploaded = _action$payload8.uploaded,
10587
10587
  total = _action$payload8.total,
10588
- attachmentId = _action$payload8.attachmentId,
10589
- progress = _action$payload8.progress;
10588
+ attachmentId = _action$payload8.attachmentId;
10589
+ var progress = uploaded / total;
10590
10590
  var updateData = {
10591
10591
  uploaded: uploaded,
10592
10592
  total: total,
@@ -31249,7 +31249,7 @@ var validateUrl = function validateUrl(url) {
31249
31249
  }
31250
31250
  };
31251
31251
  var OGMetadata = function OGMetadata(_ref) {
31252
- var _metadata$og4, _metadata$og4$image, _metadata$og4$image$, _metadata$og5, _metadata$og5$image, _metadata$og5$image$, _metadata$og6, _metadata$og7, _metadata$og7$favicon, _metadata$og8, _metadata$og8$favicon, _metadata$og9, _metadata$og0, _metadata$og1;
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
- }, 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 ? (/*#__PURE__*/React__default.createElement(Img, {
31339
- 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,
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
- onLoad: function onLoad() {
31342
- return setImageLoadError(false);
31343
- },
31344
- onError: function onError() {
31345
- return setImageLoadError(true);
31346
- }
31347
- })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, null, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, null, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$favicon = _metadata$og7.favicon) !== null && _metadata$og7$favicon !== void 0 && _metadata$og7$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
31348
- src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$favicon = _metadata$og8.favicon) === null || _metadata$og8$favicon === void 0 ? void 0 : _metadata$og8$favicon.url,
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$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && _metadata$og0.description ? /*#__PURE__*/React__default.createElement(Desc, null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description) : null)) : null));
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: 100%;\n max-height: 200px;\n width: 100%;\n margin: 0 auto;\n padding: ", ";\n height: ", ";\n transition: height 0.2s ease;\n"])), function (_ref3) {
31362
- var showOGMetadata = _ref3.showOGMetadata;
31363
- return showOGMetadata ? '0.3rem' : '0';
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 showOGMetadata = _ref4.showOGMetadata;
31366
- return showOGMetadata ? '200px' : '0';
31367
- });
31368
- var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n width: 80%;\n padding: 0.5rem;\n margin: 0;\n"])));
31369
- 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"])));
31370
- 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"])));
31371
- var Desc = styled.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n"])));
31372
- var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n max-height: 100%;\n width: 100%;\n height: 200px;\n object-fit: cover;\n transition: height 0.2s ease;\n"])));
31373
- var Favicon = styled.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n object-fit: contain;\n margin-right: 4px;\n"])));
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) {
@@ -37445,7 +37524,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
37445
37524
  if (attachments.length) {
37446
37525
  var videoAttachment = false;
37447
37526
  attachments.forEach(function (att) {
37448
- if (att.type === 'video' || att.data.type.split('/')[0] === 'video') {
37527
+ if ((att.type === 'video' || att.data.type.split('/')[0] === 'video') && att.type !== 'file') {
37449
37528
  videoAttachment = true;
37450
37529
  if (!readyVideoAttachments[att.tid]) {
37451
37530
  setSendMessageIsActive(false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sceyt-chat-react-uikit",
3
- "version": "1.7.1-beta.13",
3
+ "version": "1.7.1-beta.15",
4
4
  "description": "Interactive React UI Components for Sceyt Chat.",
5
5
  "author": "Sceyt",
6
6
  "license": "MIT",