sceyt-chat-react-uikit 1.7.2-beta.2 → 1.7.2-beta.4

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 (4) hide show
  1. package/components/Message/OGMetadata/index.d.ts +2 -1
  2. package/index.js +160 -137
  3. package/index.modern.js +160 -137
  4. package/package.json +1 -1
package/components/Message/OGMetadata/index.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import { IAttachment } from '../../../types';
3
- declare const OGMetadata: ({ attachments, state }: {
3
+ declare const OGMetadata: ({ attachments, state, incoming }: {
4
4
  attachments: IAttachment[];
5
5
  state: string;
6
+ incoming: boolean;
6
7
  }) => React.JSX.Element;
7
8
  export { OGMetadata };
package/index.js CHANGED
@@ -10349,7 +10349,8 @@ var initialState$1 = {
10349
10349
  attachmentsUploadingProgress: {},
10350
10350
  playingAudioId: null,
10351
10351
  selectedMessagesMap: null,
10352
- oGMetadata: {}
10352
+ oGMetadata: {},
10353
+ attachmentUpdatedMap: {}
10353
10354
  };
10354
10355
  var messageSlice = createSlice({
10355
10356
  name: 'messages',
@@ -10478,39 +10479,8 @@ var messageSlice = createSlice({
10478
10479
  updateMessageAttachment: function updateMessageAttachment(state, action) {
10479
10480
  var _action$payload4 = action.payload,
10480
10481
  url = _action$payload4.url,
10481
- messageId = _action$payload4.messageId,
10482
- params = _action$payload4.params;
10483
- state.activeChannelMessages = state.activeChannelMessages.map(function (message) {
10484
- if (message.id === messageId) {
10485
- for (var index = 0; index < message.attachments.length; index++) {
10486
- var attachment = message.attachments[index];
10487
- if (attachment.url === url) {
10488
- message.attachments[index] = _extends({}, attachment, params);
10489
- }
10490
- }
10491
- }
10492
- if (message.attachments.length) {
10493
- var detachedAttachments = message.attachments.map(function (att) {
10494
- var _att$user, _att$user2;
10495
- return _extends({}, att, {
10496
- user: _extends({}, att.user, {
10497
- metadata: _extends({}, ((_att$user = att.user) === null || _att$user === void 0 ? void 0 : _att$user.metadata) || {}),
10498
- presence: _extends({}, ((_att$user2 = att.user) === null || _att$user2 === void 0 ? void 0 : _att$user2.presence) || {})
10499
- })
10500
- });
10501
- });
10502
- updateMessageOnAllMessages(messageId, {
10503
- attachments: detachedAttachments
10504
- });
10505
- updateMessageOnMap(message.channelId, {
10506
- messageId: messageId,
10507
- params: {
10508
- attachments: detachedAttachments
10509
- }
10510
- });
10511
- }
10512
- return message;
10513
- });
10482
+ attachmentUrl = _action$payload4.attachmentUrl;
10483
+ state.attachmentUpdatedMap[url] = attachmentUrl;
10514
10484
  },
10515
10485
  addReactionToMessage: function addReactionToMessage(state, action) {
10516
10486
  var _action$payload5 = action.payload,
@@ -10698,6 +10668,15 @@ var messageSlice = createSlice({
10698
10668
  url = _action$payload10.url,
10699
10669
  metadata = _action$payload10.metadata;
10700
10670
  state.oGMetadata[url] = metadata;
10671
+ },
10672
+ updateOGMetadata: function updateOGMetadata(state, action) {
10673
+ var _action$payload11 = action.payload,
10674
+ url = _action$payload11.url,
10675
+ metadata = _action$payload11.metadata;
10676
+ if (metadata) {
10677
+ var existing = state.oGMetadata[url];
10678
+ state.oGMetadata[url] = existing ? _extends({}, existing, metadata) : metadata;
10679
+ }
10701
10680
  }
10702
10681
  },
10703
10682
  extraReducers: function extraReducers(builder) {
@@ -10748,7 +10727,8 @@ var _messageSlice$actions = messageSlice.actions,
10748
10727
  addSelectedMessage = _messageSlice$actions.addSelectedMessage,
10749
10728
  removeSelectedMessage = _messageSlice$actions.removeSelectedMessage,
10750
10729
  clearSelectedMessages = _messageSlice$actions.clearSelectedMessages,
10751
- setOGMetadata = _messageSlice$actions.setOGMetadata;
10730
+ setOGMetadata = _messageSlice$actions.setOGMetadata,
10731
+ updateOGMetadata = _messageSlice$actions.updateOGMetadata;
10752
10732
  var MessageReducer = messageSlice.reducer;
10753
10733
 
10754
10734
  var initialState$2 = {
@@ -11834,11 +11814,16 @@ function setOGMetadataAC(url, metadata) {
11834
11814
  metadata: metadata
11835
11815
  });
11836
11816
  }
11837
- function setUpdateMessageAttachmentAC(url, messageId, params) {
11817
+ function updateOGMetadataAC(url, metadata) {
11818
+ return updateOGMetadata({
11819
+ url: url,
11820
+ metadata: metadata
11821
+ });
11822
+ }
11823
+ function setUpdateMessageAttachmentAC(url, attachmentUrl) {
11838
11824
  return updateMessageAttachment({
11839
11825
  url: url,
11840
- messageId: messageId,
11841
- params: params
11826
+ attachmentUrl: attachmentUrl
11842
11827
  });
11843
11828
  }
11844
11829
  function updateMessageAC(messageId, params, addIfNotExists) {
@@ -17149,6 +17134,9 @@ var playingAudioIdSelector = function playingAudioIdSelector(store) {
17149
17134
  var selectedMessagesMapSelector = function selectedMessagesMapSelector(store) {
17150
17135
  return store.MessageReducer.selectedMessagesMap;
17151
17136
  };
17137
+ var attachmentUpdatedMapSelector = function attachmentUpdatedMapSelector(store) {
17138
+ return store.MessageReducer.attachmentUpdatedMap;
17139
+ };
17152
17140
 
17153
17141
  var getFrame = function getFrame(videoSrc, time) {
17154
17142
  try {
@@ -29609,13 +29597,17 @@ var Attachment = function Attachment(_ref) {
29609
29597
  var connectionStatus = useSelector(connectionStatusSelector);
29610
29598
  var theme = useSelector(themeSelector);
29611
29599
  var imageContRef = React.useRef(null);
29612
- var _useState = React.useState(!attachment.attachmentUrl),
29600
+ var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector) || {};
29601
+ var attachmentUrlFromMap = React.useMemo(function () {
29602
+ return attachmentUpdatedMap[attachment.url];
29603
+ }, [attachmentUpdatedMap, attachment.url]);
29604
+ var _useState = React.useState(!attachmentUrlFromMap),
29613
29605
  imageLoading = _useState[0],
29614
29606
  setImageLoading = _useState[1];
29615
29607
  var _useState2 = React.useState(false),
29616
29608
  downloadingFile = _useState2[0],
29617
29609
  setDownloadingFile = _useState2[1];
29618
- var _useState3 = React.useState(''),
29610
+ var _useState3 = React.useState(attachmentUrlFromMap),
29619
29611
  attachmentUrl = _useState3[0],
29620
29612
  setAttachmentUrl = _useState3[1];
29621
29613
  var _useState4 = React.useState(),
@@ -29639,27 +29631,26 @@ var Attachment = function Attachment(_ref) {
29639
29631
  var fileNameRef = React.useRef(null);
29640
29632
  var customDownloader = getCustomDownloader();
29641
29633
  var previewFileType = isPreview && attachment.data.type.split('/')[0];
29634
+ var attachmentMetadata = React.useMemo(function () {
29635
+ return isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
29636
+ }, [attachment.metadata]);
29642
29637
  var _useMemo = React.useMemo(function () {
29643
29638
  var attachmentData = null;
29644
- if (attachment.metadata && typeof attachment.metadata === 'string') {
29645
- attachmentData = isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
29646
- } else if (attachment.metadata && attachment.metadata.szw && attachment.metadata.szh) {
29647
- attachmentData = attachment.metadata;
29648
- }
29639
+ attachmentData = attachmentMetadata;
29649
29640
  return attachmentData && attachmentData.szw && attachmentData.szh ? calculateRenderedImageWidth(attachmentData.szw, attachmentData.szh, attachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, attachment.type === attachmentTypes.image ? imageAttachmentMaxHeight || 400 : videoAttachmentMaxHeight) : [];
29650
- }, []),
29641
+ }, [attachmentMetadata]),
29651
29642
  renderWidth = _useMemo[0],
29652
29643
  renderHeight = _useMemo[1];
29653
29644
  var isInUploadingState = attachmentCompilationState[attachment.tid] && (attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.PAUSED);
29654
29645
  var attachmentThumb;
29655
29646
  var withPrefix = true;
29656
- if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachment.metadata && attachment.metadata.tmb) {
29647
+ if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachmentMetadata && attachmentMetadata.tmb) {
29657
29648
  try {
29658
- if (attachment.metadata.tmb.length < 70) {
29659
- attachmentThumb = base64ToToDataURL(attachment.metadata.tmb);
29649
+ if (attachmentMetadata.tmb.length < 70) {
29650
+ attachmentThumb = base64ToToDataURL(attachmentMetadata.tmb);
29660
29651
  withPrefix = false;
29661
29652
  } else {
29662
- attachmentThumb = attachment.metadata && attachment.metadata.tmb;
29653
+ attachmentThumb = attachmentMetadata && attachmentMetadata.tmb;
29663
29654
  }
29664
29655
  } catch (e) {
29665
29656
  log.error('error on get attachmentThumb', e);
@@ -29823,9 +29814,7 @@ var Attachment = function Attachment(_ref) {
29823
29814
  if (attachment.type === attachmentTypes.image && !isPreview) {
29824
29815
  if (cachedUrl) {
29825
29816
  setAttachmentUrl(cachedUrl);
29826
- dispatch(setUpdateMessageAttachmentAC(attachment.url, attachment.messageId, {
29827
- attachmentUrl: cachedUrl
29828
- }));
29817
+ dispatch(setUpdateMessageAttachmentAC(attachment.url, cachedUrl));
29829
29818
  setIsCached(true);
29830
29819
  } else {
29831
29820
  setIsCached(false);
@@ -31398,13 +31387,17 @@ var validateUrl = function validateUrl(url) {
31398
31387
  }
31399
31388
  };
31400
31389
  var OGMetadata = function OGMetadata(_ref) {
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;
31390
+ 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;
31402
31391
  var attachments = _ref.attachments,
31403
- state = _ref.state;
31392
+ state = _ref.state,
31393
+ incoming = _ref.incoming;
31404
31394
  var dispatch = useDispatch();
31405
31395
  var oGMetadata = useSelector(function (state) {
31406
31396
  return state.MessageReducer.oGMetadata;
31407
31397
  });
31398
+ var _useColor = useColors(),
31399
+ incomingMessageBackgroundX = _useColor[THEME_COLORS.INCOMING_MESSAGE_BACKGROUND_X],
31400
+ outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X];
31408
31401
  var attachment = React.useMemo(function () {
31409
31402
  return attachments.find(function (attachment) {
31410
31403
  return attachment.type === attachmentTypes.link;
@@ -31432,47 +31425,61 @@ var OGMetadata = function OGMetadata(_ref) {
31432
31425
  var ogMetadataQueryBuilder = React.useCallback(function (url) {
31433
31426
  try {
31434
31427
  var client = getClient();
31435
- var _temp2 = function () {
31428
+ var _temp3 = function () {
31436
31429
  if (client) {
31437
- var _temp = _catch(function () {
31430
+ var _temp2 = _catch(function () {
31438
31431
  var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
31439
31432
  return Promise.resolve(queryBuilder.build()).then(function (query) {
31440
31433
  return Promise.resolve(query.loadOGData()).then(function (metadata) {
31441
31434
  var _metadata$og, _metadata$og$image, _metadata$og$image$;
31442
31435
  var image = new Image();
31443
31436
  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, {
31437
+ var _temp = function () {
31438
+ if (image.src) {
31439
+ image.onload = function () {
31440
+ try {
31441
+ var imageWidth = image.width;
31442
+ var imageHeight = image.height;
31443
+ return Promise.resolve(storeMetadata(url, _extends({}, metadata, {
31454
31444
  imageWidth: imageWidth,
31455
31445
  imageHeight: imageHeight
31456
- }));
31457
- });
31458
- } catch (e) {
31459
- return Promise.reject(e);
31460
- }
31461
- };
31462
- image.onerror = function () {
31463
- setImageLoadError(true);
31464
- };
31465
- }
31446
+ }))).then(function () {
31447
+ handleMetadata(_extends({}, metadata, {
31448
+ imageWidth: imageWidth,
31449
+ imageHeight: imageHeight
31450
+ }));
31451
+ });
31452
+ } catch (e) {
31453
+ return Promise.reject(e);
31454
+ }
31455
+ };
31456
+ image.onerror = function () {
31457
+ try {
31458
+ setImageLoadError(true);
31459
+ return Promise.resolve(storeMetadata(url, _extends({}, metadata))).then(function () {
31460
+ handleMetadata(_extends({}, metadata));
31461
+ });
31462
+ } catch (e) {
31463
+ return Promise.reject(e);
31464
+ }
31465
+ };
31466
+ } else {
31467
+ return Promise.resolve(storeMetadata(url, _extends({}, metadata))).then(function () {
31468
+ handleMetadata(_extends({}, metadata));
31469
+ });
31470
+ }
31471
+ }();
31472
+ if (_temp && _temp.then) return _temp.then(function () {});
31466
31473
  });
31467
31474
  });
31468
31475
  }, function () {
31469
31476
  console.log('Failed to fetch OG metadata');
31470
31477
  handleMetadata(null);
31471
31478
  });
31472
- if (_temp && _temp.then) return _temp.then(function () {});
31479
+ if (_temp2 && _temp2.then) return _temp2.then(function () {});
31473
31480
  }
31474
31481
  }();
31475
- return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
31482
+ return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {
31476
31483
  return null;
31477
31484
  }) : null);
31478
31485
  } catch (e) {
@@ -31488,9 +31495,8 @@ var OGMetadata = function OGMetadata(_ref) {
31488
31495
  try {
31489
31496
  if (cachedMetadata) {
31490
31497
  handleMetadata(cachedMetadata);
31491
- } else {
31492
- ogMetadataQueryBuilder(url);
31493
31498
  }
31499
+ ogMetadataQueryBuilder(url);
31494
31500
  return Promise.resolve();
31495
31501
  } catch (e) {
31496
31502
  return Promise.reject(e);
@@ -31510,112 +31516,128 @@ var OGMetadata = function OGMetadata(_ref) {
31510
31516
  return url;
31511
31517
  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
31512
31518
  var showOGMetadata = React.useMemo(function () {
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;
31519
+ var _metadata$og2, _metadata$og3;
31520
+ 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.description) && metadata;
31515
31521
  }, [state, metadata]);
31516
31522
  var calculatedImageHeight = React.useMemo(function () {
31517
- return ((metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) || 0) / (((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) || 0) / 400);
31523
+ if (!(metadata !== null && metadata !== void 0 && metadata.imageWidth)) {
31524
+ return 0;
31525
+ }
31526
+ return (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / 400);
31518
31527
  }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight]);
31519
31528
  return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
31520
- showOGMetadata: !!showOGMetadata
31529
+ showOGMetadata: !!showOGMetadata,
31530
+ bgColor: incoming ? incomingMessageBackgroundX : outgoingMessageBackgroundX
31521
31531
  }, /*#__PURE__*/React__default.createElement("div", {
31522
31532
  onClick: function onClick() {
31523
31533
  window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
31524
31534
  },
31525
31535
  style: {
31526
- width: '400px'
31536
+ width: showOGMetadata ? '100%' : 'auto'
31527
31537
  }
31528
31538
  }, /*#__PURE__*/React__default.createElement(ImageContainer, {
31529
31539
  showOGMetadata: !!showOGMetadata && !imageLoadError,
31530
31540
  containerWidth: 400,
31531
- height: calculatedImageHeight,
31541
+ containerHeight: calculatedImageHeight,
31532
31542
  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,
31543
+ }, 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 && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
31544
+ 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,
31535
31545
  alt: 'OG metadata image',
31536
31546
  imageWidth: 400,
31537
- height: calculatedImageHeight,
31547
+ imageHeight: calculatedImageHeight,
31538
31548
  shouldAnimate: shouldAnimate
31539
31549
  })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, {
31540
31550
  shouldAnimate: shouldAnimate
31541
31551
  }, /*#__PURE__*/React__default.createElement(Url, {
31542
31552
  maxWidth: 400,
31543
31553
  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, {
31554
+ }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, {
31545
31555
  maxWidth: 400,
31546
31556
  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, {
31557
+ }, 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, {
31548
31558
  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,
31559
+ 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,
31550
31560
  onLoad: function onLoad() {
31551
31561
  return setFaviconLoadError(false);
31552
31562
  },
31553
31563
  onError: function onError() {
31554
- return setFaviconLoadError(true);
31564
+ dispatch(updateOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, _extends({}, metadata, {
31565
+ og: _extends({}, metadata === null || metadata === void 0 ? void 0 : metadata.og, {
31566
+ favicon: {
31567
+ url: ''
31568
+ }
31569
+ })
31570
+ })));
31571
+ setFaviconLoadError(true);
31555
31572
  }
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, {
31573
+ })) : 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, {
31557
31574
  maxWidth: 400,
31558
31575
  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));
31576
+ }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description)) : null)) : null));
31560
31577
  };
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) {
31562
- var showOGMetadata = _ref2.showOGMetadata;
31578
+ 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: ", ";\n border-radius: 6px;\n margin-bottom: 0.4rem;\n margin: 0 auto;\n margin-bottom: ", ";\n &:hover {\n opacity: 0.9;\n cursor: pointer;\n }\n"])), function (_ref2) {
31579
+ var bgColor = _ref2.bgColor;
31580
+ return bgColor;
31581
+ }, function (_ref3) {
31582
+ var showOGMetadata = _ref3.showOGMetadata;
31563
31583
  return showOGMetadata ? '0.8rem' : '0';
31564
31584
  });
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;
31585
+ 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 (_ref4) {
31586
+ var containerWidth = _ref4.containerWidth;
31567
31587
  return containerWidth ? "\n max-width: " + (containerWidth + "px") + ";\n " : "\n max-width: 100%;\n width: 100%;\n ";
31568
- }, function (_ref4) {
31569
- var height = _ref4.height,
31570
- showOGMetadata = _ref4.showOGMetadata;
31571
- return height ? "\n max-height: " + (height + "px") + ";\n height: " + (showOGMetadata ? height + "px" : '0') + ";\n " : "\n max-height: 200px;\n height: " + (showOGMetadata ? '200px' : '0') + ";\n ";
31572
31588
  }, function (_ref5) {
31573
- var showOGMetadata = _ref5.showOGMetadata;
31574
- return showOGMetadata ? 1 : 0;
31589
+ var containerHeight = _ref5.containerHeight,
31590
+ showOGMetadata = _ref5.showOGMetadata;
31591
+ return containerHeight ? "\n max-height: " + (containerHeight + "px") + ";\n height: " + (showOGMetadata ? containerHeight + "px" : '0') + ";\n " : "\n height: 0;\n ";
31575
31592
  }, function (_ref6) {
31576
- var showOGMetadata = _ref6.showOGMetadata;
31577
- return showOGMetadata ? '4px' : '0';
31593
+ var showOGMetadata = _ref6.showOGMetadata,
31594
+ containerHeight = _ref6.containerHeight;
31595
+ return showOGMetadata && containerHeight ? 1 : 0;
31578
31596
  }, function (_ref7) {
31579
- var shouldAnimate = _ref7.shouldAnimate;
31597
+ var showOGMetadata = _ref7.showOGMetadata,
31598
+ containerHeight = _ref7.containerHeight;
31599
+ return showOGMetadata && containerHeight ? '4px' : '0';
31600
+ }, function (_ref8) {
31601
+ var shouldAnimate = _ref8.shouldAnimate;
31580
31602
  return shouldAnimate && "\n transition: height 0.2s ease;\n ";
31581
31603
  });
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;
31604
+ var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n padding: 0.5rem;\n margin: 0;\n ", "\n"])), function (_ref9) {
31605
+ var shouldAnimate = _ref9.shouldAnimate;
31584
31606
  return shouldAnimate && "\n transition: all 0.2s ease;\n ";
31585
31607
  });
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;
31608
+ 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 (_ref0) {
31609
+ var maxWidth = _ref0.maxWidth;
31588
31610
  return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
31589
- }, function (_ref0) {
31590
- var shouldAnimate = _ref0.shouldAnimate;
31611
+ }, function (_ref1) {
31612
+ var shouldAnimate = _ref1.shouldAnimate;
31591
31613
  return shouldAnimate && "\n transition: all 0.2s ease;\n ";
31592
31614
  });
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;
31615
+ 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 (_ref10) {
31616
+ var maxWidth = _ref10.maxWidth;
31595
31617
  return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
31596
- }, function (_ref10) {
31597
- var shouldAnimate = _ref10.shouldAnimate;
31618
+ }, function (_ref11) {
31619
+ var shouldAnimate = _ref11.shouldAnimate;
31598
31620
  return shouldAnimate && "\n transition: all 0.2s ease;\n ";
31599
31621
  });
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;
31622
+ 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 (_ref12) {
31623
+ var maxWidth = _ref12.maxWidth;
31602
31624
  return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
31603
- }, function (_ref12) {
31604
- var shouldAnimate = _ref12.shouldAnimate;
31625
+ }, function (_ref13) {
31626
+ var shouldAnimate = _ref13.shouldAnimate;
31605
31627
  return shouldAnimate && "\n transition: all 0.2s ease;\n ";
31606
31628
  });
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;
31612
- return height && "\n max-height: " + (height + "px") + ";\n min-height: " + (height + "px") + ";\n height: " + (height + "px") + ";\n ";
31629
+ var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n object-fit: cover;\n ", "\n"])), function (_ref14) {
31630
+ var imageWidth = _ref14.imageWidth;
31631
+ return imageWidth && "\n max-width: 100%;\n width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n ";
31613
31632
  }, function (_ref15) {
31614
- var shouldAnimate = _ref15.shouldAnimate;
31633
+ var imageHeight = _ref15.imageHeight;
31634
+ return imageHeight && "\n max-height: " + (imageHeight + "px") + ";\n min-height: " + (imageHeight + "px") + ";\n height: " + (imageHeight + "px") + ";\n ";
31635
+ }, function (_ref16) {
31636
+ var shouldAnimate = _ref16.shouldAnimate;
31615
31637
  return shouldAnimate && "\n transition: height 0.2s ease;\n ";
31616
31638
  });
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;
31639
+ 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 (_ref17) {
31640
+ var shouldAnimate = _ref17.shouldAnimate;
31619
31641
  return shouldAnimate && "\n transition: all 0.2s ease;\n ";
31620
31642
  });
31621
31643
 
@@ -31982,10 +32004,11 @@ var MessageBody = function MessageBody(_ref) {
31982
32004
  incomingMessageStyles: incomingMessageStyles,
31983
32005
  incoming: message.incoming,
31984
32006
  linkColor: linkColor
31985
- }, linkAttachment && /*#__PURE__*/React__default.createElement(OGMetadata, {
32007
+ }, linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
31986
32008
  attachments: [linkAttachment],
31987
- state: message.state
31988
- }), /*#__PURE__*/React__default.createElement("span", {
32009
+ state: message.state,
32010
+ incoming: message.incoming
32011
+ })), /*#__PURE__*/React__default.createElement("span", {
31989
32012
  ref: messageTextRef
31990
32013
  }, MessageTextFormat({
31991
32014
  text: message.body,
@@ -36199,7 +36222,6 @@ var AudioRecord = function AudioRecord(_ref) {
36199
36222
  handleStopRecording();
36200
36223
  if (currentRecordedFile) {
36201
36224
  var _wavesurfer$current2;
36202
- removeAudioRecordingFromMap(currentChannelId);
36203
36225
  dispatch(setChannelDraftMessageIsRemovedAC(currentChannelId));
36204
36226
  setRecordedFile(null);
36205
36227
  setPlayAudio(false);
@@ -36208,8 +36230,9 @@ var AudioRecord = function AudioRecord(_ref) {
36208
36230
  }
36209
36231
  } else {
36210
36232
  shouldDraw = false;
36211
- recorder.stop();
36233
+ recorder === null || recorder === void 0 ? void 0 : recorder.stop();
36212
36234
  }
36235
+ removeAudioRecordingFromMap(currentChannelId);
36213
36236
  setRecordingIsReadyToPlay(false);
36214
36237
  setStartRecording(false);
36215
36238
  setCurrentTime(0);
package/index.modern.js CHANGED
@@ -10328,7 +10328,8 @@ var initialState$1 = {
10328
10328
  attachmentsUploadingProgress: {},
10329
10329
  playingAudioId: null,
10330
10330
  selectedMessagesMap: null,
10331
- oGMetadata: {}
10331
+ oGMetadata: {},
10332
+ attachmentUpdatedMap: {}
10332
10333
  };
10333
10334
  var messageSlice = createSlice({
10334
10335
  name: 'messages',
@@ -10457,39 +10458,8 @@ var messageSlice = createSlice({
10457
10458
  updateMessageAttachment: function updateMessageAttachment(state, action) {
10458
10459
  var _action$payload4 = action.payload,
10459
10460
  url = _action$payload4.url,
10460
- messageId = _action$payload4.messageId,
10461
- params = _action$payload4.params;
10462
- state.activeChannelMessages = state.activeChannelMessages.map(function (message) {
10463
- if (message.id === messageId) {
10464
- for (var index = 0; index < message.attachments.length; index++) {
10465
- var attachment = message.attachments[index];
10466
- if (attachment.url === url) {
10467
- message.attachments[index] = _extends({}, attachment, params);
10468
- }
10469
- }
10470
- }
10471
- if (message.attachments.length) {
10472
- var detachedAttachments = message.attachments.map(function (att) {
10473
- var _att$user, _att$user2;
10474
- return _extends({}, att, {
10475
- user: _extends({}, att.user, {
10476
- metadata: _extends({}, ((_att$user = att.user) === null || _att$user === void 0 ? void 0 : _att$user.metadata) || {}),
10477
- presence: _extends({}, ((_att$user2 = att.user) === null || _att$user2 === void 0 ? void 0 : _att$user2.presence) || {})
10478
- })
10479
- });
10480
- });
10481
- updateMessageOnAllMessages(messageId, {
10482
- attachments: detachedAttachments
10483
- });
10484
- updateMessageOnMap(message.channelId, {
10485
- messageId: messageId,
10486
- params: {
10487
- attachments: detachedAttachments
10488
- }
10489
- });
10490
- }
10491
- return message;
10492
- });
10461
+ attachmentUrl = _action$payload4.attachmentUrl;
10462
+ state.attachmentUpdatedMap[url] = attachmentUrl;
10493
10463
  },
10494
10464
  addReactionToMessage: function addReactionToMessage(state, action) {
10495
10465
  var _action$payload5 = action.payload,
@@ -10677,6 +10647,15 @@ var messageSlice = createSlice({
10677
10647
  url = _action$payload10.url,
10678
10648
  metadata = _action$payload10.metadata;
10679
10649
  state.oGMetadata[url] = metadata;
10650
+ },
10651
+ updateOGMetadata: function updateOGMetadata(state, action) {
10652
+ var _action$payload11 = action.payload,
10653
+ url = _action$payload11.url,
10654
+ metadata = _action$payload11.metadata;
10655
+ if (metadata) {
10656
+ var existing = state.oGMetadata[url];
10657
+ state.oGMetadata[url] = existing ? _extends({}, existing, metadata) : metadata;
10658
+ }
10680
10659
  }
10681
10660
  },
10682
10661
  extraReducers: function extraReducers(builder) {
@@ -10727,7 +10706,8 @@ var _messageSlice$actions = messageSlice.actions,
10727
10706
  addSelectedMessage = _messageSlice$actions.addSelectedMessage,
10728
10707
  removeSelectedMessage = _messageSlice$actions.removeSelectedMessage,
10729
10708
  clearSelectedMessages = _messageSlice$actions.clearSelectedMessages,
10730
- setOGMetadata = _messageSlice$actions.setOGMetadata;
10709
+ setOGMetadata = _messageSlice$actions.setOGMetadata,
10710
+ updateOGMetadata = _messageSlice$actions.updateOGMetadata;
10731
10711
  var MessageReducer = messageSlice.reducer;
10732
10712
 
10733
10713
  var initialState$2 = {
@@ -11813,11 +11793,16 @@ function setOGMetadataAC(url, metadata) {
11813
11793
  metadata: metadata
11814
11794
  });
11815
11795
  }
11816
- function setUpdateMessageAttachmentAC(url, messageId, params) {
11796
+ function updateOGMetadataAC(url, metadata) {
11797
+ return updateOGMetadata({
11798
+ url: url,
11799
+ metadata: metadata
11800
+ });
11801
+ }
11802
+ function setUpdateMessageAttachmentAC(url, attachmentUrl) {
11817
11803
  return updateMessageAttachment({
11818
11804
  url: url,
11819
- messageId: messageId,
11820
- params: params
11805
+ attachmentUrl: attachmentUrl
11821
11806
  });
11822
11807
  }
11823
11808
  function updateMessageAC(messageId, params, addIfNotExists) {
@@ -17128,6 +17113,9 @@ var playingAudioIdSelector = function playingAudioIdSelector(store) {
17128
17113
  var selectedMessagesMapSelector = function selectedMessagesMapSelector(store) {
17129
17114
  return store.MessageReducer.selectedMessagesMap;
17130
17115
  };
17116
+ var attachmentUpdatedMapSelector = function attachmentUpdatedMapSelector(store) {
17117
+ return store.MessageReducer.attachmentUpdatedMap;
17118
+ };
17131
17119
 
17132
17120
  var getFrame = function getFrame(videoSrc, time) {
17133
17121
  try {
@@ -29588,13 +29576,17 @@ var Attachment = function Attachment(_ref) {
29588
29576
  var connectionStatus = useSelector(connectionStatusSelector);
29589
29577
  var theme = useSelector(themeSelector);
29590
29578
  var imageContRef = useRef(null);
29591
- var _useState = useState(!attachment.attachmentUrl),
29579
+ var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector) || {};
29580
+ var attachmentUrlFromMap = useMemo(function () {
29581
+ return attachmentUpdatedMap[attachment.url];
29582
+ }, [attachmentUpdatedMap, attachment.url]);
29583
+ var _useState = useState(!attachmentUrlFromMap),
29592
29584
  imageLoading = _useState[0],
29593
29585
  setImageLoading = _useState[1];
29594
29586
  var _useState2 = useState(false),
29595
29587
  downloadingFile = _useState2[0],
29596
29588
  setDownloadingFile = _useState2[1];
29597
- var _useState3 = useState(''),
29589
+ var _useState3 = useState(attachmentUrlFromMap),
29598
29590
  attachmentUrl = _useState3[0],
29599
29591
  setAttachmentUrl = _useState3[1];
29600
29592
  var _useState4 = useState(),
@@ -29618,27 +29610,26 @@ var Attachment = function Attachment(_ref) {
29618
29610
  var fileNameRef = useRef(null);
29619
29611
  var customDownloader = getCustomDownloader();
29620
29612
  var previewFileType = isPreview && attachment.data.type.split('/')[0];
29613
+ var attachmentMetadata = useMemo(function () {
29614
+ return isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
29615
+ }, [attachment.metadata]);
29621
29616
  var _useMemo = useMemo(function () {
29622
29617
  var attachmentData = null;
29623
- if (attachment.metadata && typeof attachment.metadata === 'string') {
29624
- attachmentData = isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
29625
- } else if (attachment.metadata && attachment.metadata.szw && attachment.metadata.szh) {
29626
- attachmentData = attachment.metadata;
29627
- }
29618
+ attachmentData = attachmentMetadata;
29628
29619
  return attachmentData && attachmentData.szw && attachmentData.szh ? calculateRenderedImageWidth(attachmentData.szw, attachmentData.szh, attachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, attachment.type === attachmentTypes.image ? imageAttachmentMaxHeight || 400 : videoAttachmentMaxHeight) : [];
29629
- }, []),
29620
+ }, [attachmentMetadata]),
29630
29621
  renderWidth = _useMemo[0],
29631
29622
  renderHeight = _useMemo[1];
29632
29623
  var isInUploadingState = attachmentCompilationState[attachment.tid] && (attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.PAUSED);
29633
29624
  var attachmentThumb;
29634
29625
  var withPrefix = true;
29635
- if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachment.metadata && attachment.metadata.tmb) {
29626
+ if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachmentMetadata && attachmentMetadata.tmb) {
29636
29627
  try {
29637
- if (attachment.metadata.tmb.length < 70) {
29638
- attachmentThumb = base64ToToDataURL(attachment.metadata.tmb);
29628
+ if (attachmentMetadata.tmb.length < 70) {
29629
+ attachmentThumb = base64ToToDataURL(attachmentMetadata.tmb);
29639
29630
  withPrefix = false;
29640
29631
  } else {
29641
- attachmentThumb = attachment.metadata && attachment.metadata.tmb;
29632
+ attachmentThumb = attachmentMetadata && attachmentMetadata.tmb;
29642
29633
  }
29643
29634
  } catch (e) {
29644
29635
  log.error('error on get attachmentThumb', e);
@@ -29802,9 +29793,7 @@ var Attachment = function Attachment(_ref) {
29802
29793
  if (attachment.type === attachmentTypes.image && !isPreview) {
29803
29794
  if (cachedUrl) {
29804
29795
  setAttachmentUrl(cachedUrl);
29805
- dispatch(setUpdateMessageAttachmentAC(attachment.url, attachment.messageId, {
29806
- attachmentUrl: cachedUrl
29807
- }));
29796
+ dispatch(setUpdateMessageAttachmentAC(attachment.url, cachedUrl));
29808
29797
  setIsCached(true);
29809
29798
  } else {
29810
29799
  setIsCached(false);
@@ -31377,13 +31366,17 @@ var validateUrl = function validateUrl(url) {
31377
31366
  }
31378
31367
  };
31379
31368
  var OGMetadata = function OGMetadata(_ref) {
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;
31369
+ 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;
31381
31370
  var attachments = _ref.attachments,
31382
- state = _ref.state;
31371
+ state = _ref.state,
31372
+ incoming = _ref.incoming;
31383
31373
  var dispatch = useDispatch();
31384
31374
  var oGMetadata = useSelector(function (state) {
31385
31375
  return state.MessageReducer.oGMetadata;
31386
31376
  });
31377
+ var _useColor = useColors(),
31378
+ incomingMessageBackgroundX = _useColor[THEME_COLORS.INCOMING_MESSAGE_BACKGROUND_X],
31379
+ outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X];
31387
31380
  var attachment = useMemo(function () {
31388
31381
  return attachments.find(function (attachment) {
31389
31382
  return attachment.type === attachmentTypes.link;
@@ -31411,47 +31404,61 @@ var OGMetadata = function OGMetadata(_ref) {
31411
31404
  var ogMetadataQueryBuilder = useCallback(function (url) {
31412
31405
  try {
31413
31406
  var client = getClient();
31414
- var _temp2 = function () {
31407
+ var _temp3 = function () {
31415
31408
  if (client) {
31416
- var _temp = _catch(function () {
31409
+ var _temp2 = _catch(function () {
31417
31410
  var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
31418
31411
  return Promise.resolve(queryBuilder.build()).then(function (query) {
31419
31412
  return Promise.resolve(query.loadOGData()).then(function (metadata) {
31420
31413
  var _metadata$og, _metadata$og$image, _metadata$og$image$;
31421
31414
  var image = new Image();
31422
31415
  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, {
31416
+ var _temp = function () {
31417
+ if (image.src) {
31418
+ image.onload = function () {
31419
+ try {
31420
+ var imageWidth = image.width;
31421
+ var imageHeight = image.height;
31422
+ return Promise.resolve(storeMetadata(url, _extends({}, metadata, {
31433
31423
  imageWidth: imageWidth,
31434
31424
  imageHeight: imageHeight
31435
- }));
31436
- });
31437
- } catch (e) {
31438
- return Promise.reject(e);
31439
- }
31440
- };
31441
- image.onerror = function () {
31442
- setImageLoadError(true);
31443
- };
31444
- }
31425
+ }))).then(function () {
31426
+ handleMetadata(_extends({}, metadata, {
31427
+ imageWidth: imageWidth,
31428
+ imageHeight: imageHeight
31429
+ }));
31430
+ });
31431
+ } catch (e) {
31432
+ return Promise.reject(e);
31433
+ }
31434
+ };
31435
+ image.onerror = function () {
31436
+ try {
31437
+ setImageLoadError(true);
31438
+ return Promise.resolve(storeMetadata(url, _extends({}, metadata))).then(function () {
31439
+ handleMetadata(_extends({}, metadata));
31440
+ });
31441
+ } catch (e) {
31442
+ return Promise.reject(e);
31443
+ }
31444
+ };
31445
+ } else {
31446
+ return Promise.resolve(storeMetadata(url, _extends({}, metadata))).then(function () {
31447
+ handleMetadata(_extends({}, metadata));
31448
+ });
31449
+ }
31450
+ }();
31451
+ if (_temp && _temp.then) return _temp.then(function () {});
31445
31452
  });
31446
31453
  });
31447
31454
  }, function () {
31448
31455
  console.log('Failed to fetch OG metadata');
31449
31456
  handleMetadata(null);
31450
31457
  });
31451
- if (_temp && _temp.then) return _temp.then(function () {});
31458
+ if (_temp2 && _temp2.then) return _temp2.then(function () {});
31452
31459
  }
31453
31460
  }();
31454
- return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
31461
+ return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {
31455
31462
  return null;
31456
31463
  }) : null);
31457
31464
  } catch (e) {
@@ -31467,9 +31474,8 @@ var OGMetadata = function OGMetadata(_ref) {
31467
31474
  try {
31468
31475
  if (cachedMetadata) {
31469
31476
  handleMetadata(cachedMetadata);
31470
- } else {
31471
- ogMetadataQueryBuilder(url);
31472
31477
  }
31478
+ ogMetadataQueryBuilder(url);
31473
31479
  return Promise.resolve();
31474
31480
  } catch (e) {
31475
31481
  return Promise.reject(e);
@@ -31489,112 +31495,128 @@ var OGMetadata = function OGMetadata(_ref) {
31489
31495
  return url;
31490
31496
  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
31491
31497
  var showOGMetadata = useMemo(function () {
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;
31498
+ var _metadata$og2, _metadata$og3;
31499
+ 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.description) && metadata;
31494
31500
  }, [state, metadata]);
31495
31501
  var calculatedImageHeight = useMemo(function () {
31496
- return ((metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) || 0) / (((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) || 0) / 400);
31502
+ if (!(metadata !== null && metadata !== void 0 && metadata.imageWidth)) {
31503
+ return 0;
31504
+ }
31505
+ return (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / 400);
31497
31506
  }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight]);
31498
31507
  return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
31499
- showOGMetadata: !!showOGMetadata
31508
+ showOGMetadata: !!showOGMetadata,
31509
+ bgColor: incoming ? incomingMessageBackgroundX : outgoingMessageBackgroundX
31500
31510
  }, /*#__PURE__*/React__default.createElement("div", {
31501
31511
  onClick: function onClick() {
31502
31512
  window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
31503
31513
  },
31504
31514
  style: {
31505
- width: '400px'
31515
+ width: showOGMetadata ? '100%' : 'auto'
31506
31516
  }
31507
31517
  }, /*#__PURE__*/React__default.createElement(ImageContainer, {
31508
31518
  showOGMetadata: !!showOGMetadata && !imageLoadError,
31509
31519
  containerWidth: 400,
31510
- height: calculatedImageHeight,
31520
+ containerHeight: calculatedImageHeight,
31511
31521
  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,
31522
+ }, 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 && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
31523
+ 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,
31514
31524
  alt: 'OG metadata image',
31515
31525
  imageWidth: 400,
31516
- height: calculatedImageHeight,
31526
+ imageHeight: calculatedImageHeight,
31517
31527
  shouldAnimate: shouldAnimate
31518
31528
  })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, {
31519
31529
  shouldAnimate: shouldAnimate
31520
31530
  }, /*#__PURE__*/React__default.createElement(Url, {
31521
31531
  maxWidth: 400,
31522
31532
  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, {
31533
+ }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, {
31524
31534
  maxWidth: 400,
31525
31535
  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, {
31536
+ }, 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, {
31527
31537
  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,
31538
+ 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,
31529
31539
  onLoad: function onLoad() {
31530
31540
  return setFaviconLoadError(false);
31531
31541
  },
31532
31542
  onError: function onError() {
31533
- return setFaviconLoadError(true);
31543
+ dispatch(updateOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, _extends({}, metadata, {
31544
+ og: _extends({}, metadata === null || metadata === void 0 ? void 0 : metadata.og, {
31545
+ favicon: {
31546
+ url: ''
31547
+ }
31548
+ })
31549
+ })));
31550
+ setFaviconLoadError(true);
31534
31551
  }
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, {
31552
+ })) : 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, {
31536
31553
  maxWidth: 400,
31537
31554
  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));
31555
+ }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description)) : null)) : null));
31539
31556
  };
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) {
31541
- var showOGMetadata = _ref2.showOGMetadata;
31557
+ 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: ", ";\n border-radius: 6px;\n margin-bottom: 0.4rem;\n margin: 0 auto;\n margin-bottom: ", ";\n &:hover {\n opacity: 0.9;\n cursor: pointer;\n }\n"])), function (_ref2) {
31558
+ var bgColor = _ref2.bgColor;
31559
+ return bgColor;
31560
+ }, function (_ref3) {
31561
+ var showOGMetadata = _ref3.showOGMetadata;
31542
31562
  return showOGMetadata ? '0.8rem' : '0';
31543
31563
  });
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;
31564
+ 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 (_ref4) {
31565
+ var containerWidth = _ref4.containerWidth;
31546
31566
  return containerWidth ? "\n max-width: " + (containerWidth + "px") + ";\n " : "\n max-width: 100%;\n width: 100%;\n ";
31547
- }, function (_ref4) {
31548
- var height = _ref4.height,
31549
- showOGMetadata = _ref4.showOGMetadata;
31550
- return height ? "\n max-height: " + (height + "px") + ";\n height: " + (showOGMetadata ? height + "px" : '0') + ";\n " : "\n max-height: 200px;\n height: " + (showOGMetadata ? '200px' : '0') + ";\n ";
31551
31567
  }, function (_ref5) {
31552
- var showOGMetadata = _ref5.showOGMetadata;
31553
- return showOGMetadata ? 1 : 0;
31568
+ var containerHeight = _ref5.containerHeight,
31569
+ showOGMetadata = _ref5.showOGMetadata;
31570
+ return containerHeight ? "\n max-height: " + (containerHeight + "px") + ";\n height: " + (showOGMetadata ? containerHeight + "px" : '0') + ";\n " : "\n height: 0;\n ";
31554
31571
  }, function (_ref6) {
31555
- var showOGMetadata = _ref6.showOGMetadata;
31556
- return showOGMetadata ? '4px' : '0';
31572
+ var showOGMetadata = _ref6.showOGMetadata,
31573
+ containerHeight = _ref6.containerHeight;
31574
+ return showOGMetadata && containerHeight ? 1 : 0;
31557
31575
  }, function (_ref7) {
31558
- var shouldAnimate = _ref7.shouldAnimate;
31576
+ var showOGMetadata = _ref7.showOGMetadata,
31577
+ containerHeight = _ref7.containerHeight;
31578
+ return showOGMetadata && containerHeight ? '4px' : '0';
31579
+ }, function (_ref8) {
31580
+ var shouldAnimate = _ref8.shouldAnimate;
31559
31581
  return shouldAnimate && "\n transition: height 0.2s ease;\n ";
31560
31582
  });
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;
31583
+ var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n padding: 0.5rem;\n margin: 0;\n ", "\n"])), function (_ref9) {
31584
+ var shouldAnimate = _ref9.shouldAnimate;
31563
31585
  return shouldAnimate && "\n transition: all 0.2s ease;\n ";
31564
31586
  });
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;
31587
+ 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 (_ref0) {
31588
+ var maxWidth = _ref0.maxWidth;
31567
31589
  return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
31568
- }, function (_ref0) {
31569
- var shouldAnimate = _ref0.shouldAnimate;
31590
+ }, function (_ref1) {
31591
+ var shouldAnimate = _ref1.shouldAnimate;
31570
31592
  return shouldAnimate && "\n transition: all 0.2s ease;\n ";
31571
31593
  });
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;
31594
+ 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 (_ref10) {
31595
+ var maxWidth = _ref10.maxWidth;
31574
31596
  return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
31575
- }, function (_ref10) {
31576
- var shouldAnimate = _ref10.shouldAnimate;
31597
+ }, function (_ref11) {
31598
+ var shouldAnimate = _ref11.shouldAnimate;
31577
31599
  return shouldAnimate && "\n transition: all 0.2s ease;\n ";
31578
31600
  });
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;
31601
+ 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 (_ref12) {
31602
+ var maxWidth = _ref12.maxWidth;
31581
31603
  return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
31582
- }, function (_ref12) {
31583
- var shouldAnimate = _ref12.shouldAnimate;
31604
+ }, function (_ref13) {
31605
+ var shouldAnimate = _ref13.shouldAnimate;
31584
31606
  return shouldAnimate && "\n transition: all 0.2s ease;\n ";
31585
31607
  });
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;
31591
- return height && "\n max-height: " + (height + "px") + ";\n min-height: " + (height + "px") + ";\n height: " + (height + "px") + ";\n ";
31608
+ var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n object-fit: cover;\n ", "\n"])), function (_ref14) {
31609
+ var imageWidth = _ref14.imageWidth;
31610
+ return imageWidth && "\n max-width: 100%;\n width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n ";
31592
31611
  }, function (_ref15) {
31593
- var shouldAnimate = _ref15.shouldAnimate;
31612
+ var imageHeight = _ref15.imageHeight;
31613
+ return imageHeight && "\n max-height: " + (imageHeight + "px") + ";\n min-height: " + (imageHeight + "px") + ";\n height: " + (imageHeight + "px") + ";\n ";
31614
+ }, function (_ref16) {
31615
+ var shouldAnimate = _ref16.shouldAnimate;
31594
31616
  return shouldAnimate && "\n transition: height 0.2s ease;\n ";
31595
31617
  });
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;
31618
+ 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 (_ref17) {
31619
+ var shouldAnimate = _ref17.shouldAnimate;
31598
31620
  return shouldAnimate && "\n transition: all 0.2s ease;\n ";
31599
31621
  });
31600
31622
 
@@ -31961,10 +31983,11 @@ var MessageBody = function MessageBody(_ref) {
31961
31983
  incomingMessageStyles: incomingMessageStyles,
31962
31984
  incoming: message.incoming,
31963
31985
  linkColor: linkColor
31964
- }, linkAttachment && /*#__PURE__*/React__default.createElement(OGMetadata, {
31986
+ }, linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
31965
31987
  attachments: [linkAttachment],
31966
- state: message.state
31967
- }), /*#__PURE__*/React__default.createElement("span", {
31988
+ state: message.state,
31989
+ incoming: message.incoming
31990
+ })), /*#__PURE__*/React__default.createElement("span", {
31968
31991
  ref: messageTextRef
31969
31992
  }, MessageTextFormat({
31970
31993
  text: message.body,
@@ -36178,7 +36201,6 @@ var AudioRecord = function AudioRecord(_ref) {
36178
36201
  handleStopRecording();
36179
36202
  if (currentRecordedFile) {
36180
36203
  var _wavesurfer$current2;
36181
- removeAudioRecordingFromMap(currentChannelId);
36182
36204
  dispatch(setChannelDraftMessageIsRemovedAC(currentChannelId));
36183
36205
  setRecordedFile(null);
36184
36206
  setPlayAudio(false);
@@ -36187,8 +36209,9 @@ var AudioRecord = function AudioRecord(_ref) {
36187
36209
  }
36188
36210
  } else {
36189
36211
  shouldDraw = false;
36190
- recorder.stop();
36212
+ recorder === null || recorder === void 0 ? void 0 : recorder.stop();
36191
36213
  }
36214
+ removeAudioRecordingFromMap(currentChannelId);
36192
36215
  setRecordingIsReadyToPlay(false);
36193
36216
  setStartRecording(false);
36194
36217
  setCurrentTime(0);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sceyt-chat-react-uikit",
3
- "version": "1.7.2-beta.2",
3
+ "version": "1.7.2-beta.4",
4
4
  "description": "Interactive React UI Components for Sceyt Chat.",
5
5
  "author": "Sceyt",
6
6
  "license": "MIT",