npm - sceyt-chat-react-uikit - Versions diffs - 1.7.2-beta.1 → 1.7.2-beta.3 - Mend

sceyt-chat-react-uikit 1.7.2-beta.1 → 1.7.2-beta.3

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

package/index.js CHANGED Viewed

@@ -10348,7 +10348,9 @@ var initialState$1 = {
   openedMessageMenu: '',
   attachmentsUploadingProgress: {},
   playingAudioId: null,
-  selectedMessagesMap: null
+  selectedMessagesMap: null,
+  oGMetadata: {},
+  attachmentUpdatedMap: {}
 };
 var messageSlice = createSlice({
   name: 'messages',
@@ -10477,39 +10479,8 @@ var messageSlice = createSlice({
     updateMessageAttachment: function updateMessageAttachment(state, action) {
       var _action$payload4 = action.payload,
         url = _action$payload4.url,
-        messageId = _action$payload4.messageId,
-        params = _action$payload4.params;
-      state.activeChannelMessages = state.activeChannelMessages.map(function (message) {
-        if (message.id === messageId) {
-          for (var index = 0; index < message.attachments.length; index++) {
-            var attachment = message.attachments[index];
-            if (attachment.url === url) {
-              message.attachments[index] = _extends({}, attachment, params);
-            }
-          }
-        }
-        if (message.attachments.length) {
-          var detachedAttachments = message.attachments.map(function (att) {
-            var _att$user, _att$user2;
-            return _extends({}, att, {
-              user: _extends({}, att.user, {
-                metadata: _extends({}, ((_att$user = att.user) === null || _att$user === void 0 ? void 0 : _att$user.metadata) || {}),
-                presence: _extends({}, ((_att$user2 = att.user) === null || _att$user2 === void 0 ? void 0 : _att$user2.presence) || {})
-              })
-            });
-          });
-          updateMessageOnAllMessages(messageId, {
-            attachments: detachedAttachments
-          });
-          updateMessageOnMap(message.channelId, {
-            messageId: messageId,
-            params: {
-              attachments: detachedAttachments
-            }
-          });
-        }
-        return message;
-      });
+        attachmentUrl = _action$payload4.attachmentUrl;
+      state.attachmentUpdatedMap[url] = attachmentUrl;
     },
     addReactionToMessage: function addReactionToMessage(state, action) {
       var _action$payload5 = action.payload,
@@ -10691,6 +10662,21 @@ var messageSlice = createSlice({
     },
     clearSelectedMessages: function clearSelectedMessages(state) {
       state.selectedMessagesMap = null;
+    },
+    setOGMetadata: function setOGMetadata(state, action) {
+      var _action$payload10 = action.payload,
+        url = _action$payload10.url,
+        metadata = _action$payload10.metadata;
+      state.oGMetadata[url] = metadata;
+    },
+    updateOGMetadata: function updateOGMetadata(state, action) {
+      var _action$payload11 = action.payload,
+        url = _action$payload11.url,
+        metadata = _action$payload11.metadata;
+      if (metadata) {
+        var existing = state.oGMetadata[url];
+        state.oGMetadata[url] = existing ? _extends({}, existing, metadata) : metadata;
+      }
     }
   },
   extraReducers: function extraReducers(builder) {
@@ -10740,7 +10726,9 @@ var _messageSlice$actions = messageSlice.actions,
   setPlayingAudioId = _messageSlice$actions.setPlayingAudioId,
   addSelectedMessage = _messageSlice$actions.addSelectedMessage,
   removeSelectedMessage = _messageSlice$actions.removeSelectedMessage,
-  clearSelectedMessages = _messageSlice$actions.clearSelectedMessages;
+  clearSelectedMessages = _messageSlice$actions.clearSelectedMessages,
+  setOGMetadata = _messageSlice$actions.setOGMetadata,
+  updateOGMetadata = _messageSlice$actions.updateOGMetadata;
 var MessageReducer = messageSlice.reducer;
 var initialState$2 = {
@@ -11820,11 +11808,22 @@ function setMessagesHasNextAC(hasNext) {
     hasNext: hasNext
   });
 }
-function setUpdateMessageAttachmentAC(url, messageId, params) {
+function setOGMetadataAC(url, metadata) {
+  return setOGMetadata({
+    url: url,
+    metadata: metadata
+  });
+}
+function updateOGMetadataAC(url, metadata) {
+  return updateOGMetadata({
+    url: url,
+    metadata: metadata
+  });
+}
+function setUpdateMessageAttachmentAC(url, attachmentUrl) {
   return updateMessageAttachment({
     url: url,
-    messageId: messageId,
-    params: params
+    attachmentUrl: attachmentUrl
   });
 }
 function updateMessageAC(messageId, params, addIfNotExists) {
@@ -17135,6 +17134,9 @@ var playingAudioIdSelector = function playingAudioIdSelector(store) {
 var selectedMessagesMapSelector = function selectedMessagesMapSelector(store) {
   return store.MessageReducer.selectedMessagesMap;
 };
+var attachmentUpdatedMapSelector = function attachmentUpdatedMapSelector(store) {
+  return store.MessageReducer.attachmentUpdatedMap;
+};
 var getFrame = function getFrame(videoSrc, time) {
   try {
@@ -29595,13 +29597,17 @@ var Attachment = function Attachment(_ref) {
   var connectionStatus = useSelector(connectionStatusSelector);
   var theme = useSelector(themeSelector);
   var imageContRef = React.useRef(null);
-  var _useState = React.useState(!attachment.attachmentUrl),
+  var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector) || {};
+  var attachmentUrlFromMap = React.useMemo(function () {
+    return attachmentUpdatedMap[attachment.url];
+  }, [attachmentUpdatedMap, attachment.url]);
+  var _useState = React.useState(!attachmentUrlFromMap),
     imageLoading = _useState[0],
     setImageLoading = _useState[1];
   var _useState2 = React.useState(false),
     downloadingFile = _useState2[0],
     setDownloadingFile = _useState2[1];
-  var _useState3 = React.useState(''),
+  var _useState3 = React.useState(attachmentUrlFromMap),
     attachmentUrl = _useState3[0],
     setAttachmentUrl = _useState3[1];
   var _useState4 = React.useState(),
@@ -29625,27 +29631,26 @@ var Attachment = function Attachment(_ref) {
   var fileNameRef = React.useRef(null);
   var customDownloader = getCustomDownloader();
   var previewFileType = isPreview && attachment.data.type.split('/')[0];
+  var attachmentMetadata = React.useMemo(function () {
+    return isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
+  }, [attachment.metadata]);
   var _useMemo = React.useMemo(function () {
       var attachmentData = null;
-      if (attachment.metadata && typeof attachment.metadata === 'string') {
-        attachmentData = isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
-      } else if (attachment.metadata && attachment.metadata.szw && attachment.metadata.szh) {
-        attachmentData = attachment.metadata;
-      }
+      attachmentData = attachmentMetadata;
       return attachmentData && attachmentData.szw && attachmentData.szh ? calculateRenderedImageWidth(attachmentData.szw, attachmentData.szh, attachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, attachment.type === attachmentTypes.image ? imageAttachmentMaxHeight || 400 : videoAttachmentMaxHeight) : [];
-    }, []),
+    }, [attachmentMetadata]),
     renderWidth = _useMemo[0],
     renderHeight = _useMemo[1];
   var isInUploadingState = attachmentCompilationState[attachment.tid] && (attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.PAUSED);
   var attachmentThumb;
   var withPrefix = true;
-  if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachment.metadata && attachment.metadata.tmb) {
+  if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachmentMetadata && attachmentMetadata.tmb) {
     try {
-      if (attachment.metadata.tmb.length < 70) {
-        attachmentThumb = base64ToToDataURL(attachment.metadata.tmb);
+      if (attachmentMetadata.tmb.length < 70) {
+        attachmentThumb = base64ToToDataURL(attachmentMetadata.tmb);
         withPrefix = false;
       } else {
-        attachmentThumb = attachment.metadata && attachment.metadata.tmb;
+        attachmentThumb = attachmentMetadata && attachmentMetadata.tmb;
       }
     } catch (e) {
       log.error('error on get attachmentThumb', e);
@@ -29809,9 +29814,7 @@ var Attachment = function Attachment(_ref) {
           if (attachment.type === attachmentTypes.image && !isPreview) {
             if (cachedUrl) {
               setAttachmentUrl(cachedUrl);
-              dispatch(setUpdateMessageAttachmentAC(attachment.url, attachment.messageId, {
-                attachmentUrl: cachedUrl
-              }));
+              dispatch(setUpdateMessageAttachmentAC(attachment.url, cachedUrl));
               setIsCached(true);
             } else {
               setIsCached(false);
@@ -31384,54 +31387,95 @@ var validateUrl = function validateUrl(url) {
   }
 };
 var OGMetadata = function OGMetadata(_ref) {
-  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;
+  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;
   var attachments = _ref.attachments,
     state = _ref.state;
-  var _useState = React.useState(null),
-    metadata = _useState[0],
-    setMetadata = _useState[1];
-  var _useState2 = React.useState(true),
-    imageLoadError = _useState2[0],
-    setImageLoadError = _useState2[1];
-  var _useState3 = React.useState(true),
-    faviconLoadError = _useState3[0],
-    setFaviconLoadError = _useState3[1];
-  var _useState4 = React.useState(false),
-    imageLoaded = _useState4[0],
-    setImageLoaded = _useState4[1];
-  var _useState5 = React.useState(0),
-    imageWidth = _useState5[0],
-    setImageWidth = _useState5[1];
-  var _useState6 = React.useState(0),
-    imageHeight = _useState6[0],
-    setImageHeight = _useState6[1];
+  var dispatch = useDispatch();
+  var oGMetadata = useSelector(function (state) {
+    return state.MessageReducer.oGMetadata;
+  });
   var attachment = React.useMemo(function () {
     return attachments.find(function (attachment) {
       return attachment.type === attachmentTypes.link;
     });
   }, [attachments]);
+  var metadata = React.useMemo(function () {
+    return oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] || null;
+  }, [oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url]);
+  var _useState = React.useState(false),
+    imageLoadError = _useState[0],
+    setImageLoadError = _useState[1];
+  var _useState2 = React.useState(false),
+    faviconLoadError = _useState2[0],
+    setFaviconLoadError = _useState2[1];
+  var _useState3 = React.useState(false),
+    shouldAnimate = _useState3[0],
+    setShouldAnimate = _useState3[1];
+  var handleMetadata = React.useCallback(function (metadata) {
+    if (metadata) {
+      dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata));
+    } else {
+      dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, null));
+    }
+  }, []);
   var ogMetadataQueryBuilder = React.useCallback(function (url) {
     try {
       var client = getClient();
-      var _temp2 = function () {
+      var _temp3 = function () {
         if (client) {
-          var _temp = _catch(function () {
+          var _temp2 = _catch(function () {
             var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
             return Promise.resolve(queryBuilder.build()).then(function (query) {
               return Promise.resolve(query.loadOGData()).then(function (metadata) {
-                return Promise.resolve(storeMetadata(url, metadata)).then(function () {
-                  setMetadata(metadata);
-                });
+                var _metadata$og, _metadata$og$image, _metadata$og$image$;
+                var image = new Image();
+                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;
+                var _temp = function () {
+                  if (image.src) {
+                    image.onload = function () {
+                      try {
+                        var imageWidth = image.width;
+                        var imageHeight = image.height;
+                        return Promise.resolve(storeMetadata(url, _extends({}, metadata, {
+                          imageWidth: imageWidth,
+                          imageHeight: imageHeight
+                        }))).then(function () {
+                          handleMetadata(_extends({}, metadata, {
+                            imageWidth: imageWidth,
+                            imageHeight: imageHeight
+                          }));
+                        });
+                      } catch (e) {
+                        return Promise.reject(e);
+                      }
+                    };
+                    image.onerror = function () {
+                      try {
+                        setImageLoadError(true);
+                        return Promise.resolve(storeMetadata(url, _extends({}, metadata))).then(function () {
+                          handleMetadata(_extends({}, metadata));
+                        });
+                      } catch (e) {
+                        return Promise.reject(e);
+                      }
+                    };
+                  } else {
+                    return Promise.resolve(storeMetadata(url, _extends({}, metadata))).then(function () {
+                      handleMetadata(_extends({}, metadata));
+                    });
+                  }
+                }();
+                if (_temp && _temp.then) return _temp.then(function () {});
               });
             });
           }, function () {
             console.log('Failed to fetch OG metadata');
-            setMetadata(null);
+            handleMetadata(null);
           });
-          if (_temp && _temp.then) return _temp.then(function () {});
+          if (_temp2 && _temp2.then) return _temp2.then(function () {});
         }
       }();
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {
         return null;
       }) : null);
     } catch (e) {
@@ -31439,16 +31483,16 @@ var OGMetadata = function OGMetadata(_ref) {
     }
   }, []);
   React.useEffect(function () {
-    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url) {
+    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
+      setShouldAnimate(true);
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
         getMetadata(url).then(function (cachedMetadata) {
           try {
             if (cachedMetadata) {
-              setMetadata(cachedMetadata);
-            } else {
-              ogMetadataQueryBuilder(url);
+              handleMetadata(cachedMetadata);
             }
+            ogMetadataQueryBuilder(url);
             return Promise.resolve();
           } catch (e) {
             return Promise.reject(e);
@@ -31458,7 +31502,7 @@ var OGMetadata = function OGMetadata(_ref) {
         });
       }
     }
-  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
+  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
   var ogUrl = React.useMemo(function () {
     var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
     var urlObj = validateUrl(url);
@@ -31468,102 +31512,126 @@ var OGMetadata = function OGMetadata(_ref) {
     return url;
   }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
   var showOGMetadata = React.useMemo(function () {
-    var _metadata$og, _metadata$og2, _metadata$og2$image, _metadata$og2$image$, _metadata$og3;
-    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;
+    var _metadata$og2, _metadata$og3;
+    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;
   }, [state, metadata]);
-  React.useEffect(function () {
-    var _metadata$og4, _metadata$og4$image, _metadata$og4$image$;
-    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) {
-      var _metadata$og5, _metadata$og5$image, _metadata$og5$image$;
-      var image = new Image();
-      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;
-      image.onload = function () {
-        var imageWidth = image.width;
-        var imageHeight = image.height;
-        setImageWidth(imageWidth);
-        setImageHeight(imageHeight);
-        setImageLoadError(false);
-        setImageLoaded(true);
-      };
-      image.onerror = function () {
-        setImageLoadError(true);
-        setImageLoaded(true);
-      };
-    }
-  }, [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]);
   var calculatedImageHeight = React.useMemo(function () {
-    return imageHeight / (imageWidth / 400);
-  }, [imageWidth, imageHeight]);
+    if (!(metadata !== null && metadata !== void 0 && metadata.imageWidth)) {
+      return 0;
+    }
+    return (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / 400);
+  }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight]);
   return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
     showOGMetadata: !!showOGMetadata
   }, /*#__PURE__*/React__default.createElement("div", {
     onClick: function onClick() {
       window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
+    },
+    style: {
+      width: showOGMetadata ? '400px' : 'auto'
     }
   }, /*#__PURE__*/React__default.createElement(ImageContainer, {
-    showOGMetadata: !!showOGMetadata && !imageLoadError && imageLoaded,
-    width: 400,
-    height: calculatedImageHeight
-  }, 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, {
-    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,
+    showOGMetadata: !!showOGMetadata && !imageLoadError,
+    containerWidth: 400,
+    containerHeight: calculatedImageHeight,
+    shouldAnimate: shouldAnimate
+  }, 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, {
+    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,
     alt: 'OG metadata image',
-    width: 400,
-    height: calculatedImageHeight
-  })) : null), showOGMetadata && imageLoaded ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, {
-    maxWidth: 400
-  }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og9 = metadata.og) !== null && _metadata$og9 !== void 0 && _metadata$og9.title ? (/*#__PURE__*/React__default.createElement(Title, {
-    maxWidth: 400
-  }, 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, {
-    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,
+    imageWidth: 400,
+    imageHeight: calculatedImageHeight,
+    shouldAnimate: shouldAnimate
+  })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, {
+    shouldAnimate: shouldAnimate
+  }, /*#__PURE__*/React__default.createElement(Url, {
+    maxWidth: 400,
+    shouldAnimate: shouldAnimate
+  }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, {
+    maxWidth: 400,
+    shouldAnimate: shouldAnimate
+  }, 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, {
+    shouldAnimate: shouldAnimate,
+    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,
     onLoad: function onLoad() {
       return setFaviconLoadError(false);
     },
     onError: function onError() {
-      return setFaviconLoadError(true);
+      dispatch(updateOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, _extends({}, metadata, {
+        og: _extends({}, metadata === null || metadata === void 0 ? void 0 : metadata.og, {
+          favicon: {
+            url: ''
+          }
+        })
+      })));
+      setFaviconLoadError(true);
     }
-  })) : 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, {
-    maxWidth: 400
-  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description) : null)) : null));
+  })) : 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, {
+    maxWidth: 400,
+    shouldAnimate: shouldAnimate
+  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description)) : null)) : null));
 };
 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) {
   var showOGMetadata = _ref2.showOGMetadata;
   return showOGMetadata ? '0.8rem' : '0';
 });
-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  transition: height 0.2s ease;\n"])), function (_ref3) {
-  var width = _ref3.width;
-  return width ? "\n    max-width: " + (width + "px") + ";\n  " : "\n    max-width: 100%;\n    width: 100%;\n  ";
+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) {
+  var containerWidth = _ref3.containerWidth;
+  return containerWidth ? "\n    max-width: " + (containerWidth + "px") + ";\n  " : "\n    max-width: 100%;\n    width: 100%;\n  ";
 }, function (_ref4) {
-  var height = _ref4.height,
+  var containerHeight = _ref4.containerHeight,
     showOGMetadata = _ref4.showOGMetadata;
-  return height ? "\n    max-height: " + (height + "px") + ";\n    height: " + (showOGMetadata ? height + "px" : '0') + ";\n  " : "\n    max-height: 200px;\n    height: " + (showOGMetadata ? '200px' : '0') + ";\n  ";
+  return containerHeight ? "\n    max-height: " + (containerHeight + "px") + ";\n    height: " + (showOGMetadata ? containerHeight + "px" : '0') + ";\n  " : "\n      height: 0;\n  ";
 }, function (_ref5) {
-  var showOGMetadata = _ref5.showOGMetadata;
-  return showOGMetadata ? 1 : 0;
+  var showOGMetadata = _ref5.showOGMetadata,
+    containerHeight = _ref5.containerHeight;
+  return showOGMetadata && containerHeight ? 1 : 0;
 }, function (_ref6) {
-  var showOGMetadata = _ref6.showOGMetadata;
-  return showOGMetadata ? '0.3rem' : '0';
+  var showOGMetadata = _ref6.showOGMetadata,
+    containerHeight = _ref6.containerHeight;
+  return showOGMetadata && containerHeight ? '4px' : '0';
+}, function (_ref7) {
+  var shouldAnimate = _ref7.shouldAnimate;
+  return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
+});
+var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  ", "\n"])), function (_ref8) {
+  var shouldAnimate = _ref8.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  transition: all 0.2s ease;\n"])));
-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  transition: all 0.2s ease;\n"])), function (_ref7) {
-  var maxWidth = _ref7.maxWidth;
+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) {
+  var maxWidth = _ref9.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+}, function (_ref0) {
+  var shouldAnimate = _ref0.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-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  transition: all 0.2s ease;\n"])), function (_ref8) {
-  var maxWidth = _ref8.maxWidth;
+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) {
+  var maxWidth = _ref1.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+}, function (_ref10) {
+  var shouldAnimate = _ref10.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  ", "\n  transition: all 0.2s ease;\n"])), function (_ref9) {
-  var maxWidth = _ref9.maxWidth;
+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) {
+  var maxWidth = _ref11.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+}, function (_ref12) {
+  var shouldAnimate = _ref12.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
+});
+var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  object-fit: cover;\n  ", "\n"])), function (_ref13) {
+  var imageWidth = _ref13.imageWidth;
+  return imageWidth && "\n    max-width: " + (imageWidth + "px") + ";\n    width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n  ";
+}, function (_ref14) {
+  var imageHeight = _ref14.imageHeight;
+  return imageHeight && "\n    max-height: " + (imageHeight + "px") + ";\n    min-height: " + (imageHeight + "px") + ";\n    height: " + (imageHeight + "px") + ";\n  ";
+}, function (_ref15) {
+  var shouldAnimate = _ref15.shouldAnimate;
+  return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
 });
-var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  object-fit: cover;\n  transition: height 0.2s ease;\n"])), function (_ref0) {
-  var width = _ref0.width;
-  return width && "\n    max-width: " + (width + "px") + ";\n    min-width: " + (width + "px") + ";\n    width: " + (width + "px") + ";\n  ";
-}, function (_ref1) {
-  var height = _ref1.height;
-  return height && "\n    max-height: " + (height + "px") + ";\n    min-height: " + (height + "px") + ";\n    height: " + (height + "px") + ";\n  ";
+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) {
+  var shouldAnimate = _ref16.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-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"])));
 var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i;
 var MessageBody = function MessageBody(_ref) {
@@ -36145,7 +36213,6 @@ var AudioRecord = function AudioRecord(_ref) {
     handleStopRecording();
     if (currentRecordedFile) {
       var _wavesurfer$current2;
-      removeAudioRecordingFromMap(currentChannelId);
       dispatch(setChannelDraftMessageIsRemovedAC(currentChannelId));
       setRecordedFile(null);
       setPlayAudio(false);
@@ -36154,8 +36221,9 @@ var AudioRecord = function AudioRecord(_ref) {
       }
     } else {
       shouldDraw = false;
-      recorder.stop();
+      recorder === null || recorder === void 0 ? void 0 : recorder.stop();
     }
+    removeAudioRecordingFromMap(currentChannelId);
     setRecordingIsReadyToPlay(false);
     setStartRecording(false);
     setCurrentTime(0);

package/index.modern.js CHANGED Viewed

@@ -10327,7 +10327,9 @@ var initialState$1 = {
   openedMessageMenu: '',
   attachmentsUploadingProgress: {},
   playingAudioId: null,
-  selectedMessagesMap: null
+  selectedMessagesMap: null,
+  oGMetadata: {},
+  attachmentUpdatedMap: {}
 };
 var messageSlice = createSlice({
   name: 'messages',
@@ -10456,39 +10458,8 @@ var messageSlice = createSlice({
     updateMessageAttachment: function updateMessageAttachment(state, action) {
       var _action$payload4 = action.payload,
         url = _action$payload4.url,
-        messageId = _action$payload4.messageId,
-        params = _action$payload4.params;
-      state.activeChannelMessages = state.activeChannelMessages.map(function (message) {
-        if (message.id === messageId) {
-          for (var index = 0; index < message.attachments.length; index++) {
-            var attachment = message.attachments[index];
-            if (attachment.url === url) {
-              message.attachments[index] = _extends({}, attachment, params);
-            }
-          }
-        }
-        if (message.attachments.length) {
-          var detachedAttachments = message.attachments.map(function (att) {
-            var _att$user, _att$user2;
-            return _extends({}, att, {
-              user: _extends({}, att.user, {
-                metadata: _extends({}, ((_att$user = att.user) === null || _att$user === void 0 ? void 0 : _att$user.metadata) || {}),
-                presence: _extends({}, ((_att$user2 = att.user) === null || _att$user2 === void 0 ? void 0 : _att$user2.presence) || {})
-              })
-            });
-          });
-          updateMessageOnAllMessages(messageId, {
-            attachments: detachedAttachments
-          });
-          updateMessageOnMap(message.channelId, {
-            messageId: messageId,
-            params: {
-              attachments: detachedAttachments
-            }
-          });
-        }
-        return message;
-      });
+        attachmentUrl = _action$payload4.attachmentUrl;
+      state.attachmentUpdatedMap[url] = attachmentUrl;
     },
     addReactionToMessage: function addReactionToMessage(state, action) {
       var _action$payload5 = action.payload,
@@ -10670,6 +10641,21 @@ var messageSlice = createSlice({
     },
     clearSelectedMessages: function clearSelectedMessages(state) {
       state.selectedMessagesMap = null;
+    },
+    setOGMetadata: function setOGMetadata(state, action) {
+      var _action$payload10 = action.payload,
+        url = _action$payload10.url,
+        metadata = _action$payload10.metadata;
+      state.oGMetadata[url] = metadata;
+    },
+    updateOGMetadata: function updateOGMetadata(state, action) {
+      var _action$payload11 = action.payload,
+        url = _action$payload11.url,
+        metadata = _action$payload11.metadata;
+      if (metadata) {
+        var existing = state.oGMetadata[url];
+        state.oGMetadata[url] = existing ? _extends({}, existing, metadata) : metadata;
+      }
     }
   },
   extraReducers: function extraReducers(builder) {
@@ -10719,7 +10705,9 @@ var _messageSlice$actions = messageSlice.actions,
   setPlayingAudioId = _messageSlice$actions.setPlayingAudioId,
   addSelectedMessage = _messageSlice$actions.addSelectedMessage,
   removeSelectedMessage = _messageSlice$actions.removeSelectedMessage,
-  clearSelectedMessages = _messageSlice$actions.clearSelectedMessages;
+  clearSelectedMessages = _messageSlice$actions.clearSelectedMessages,
+  setOGMetadata = _messageSlice$actions.setOGMetadata,
+  updateOGMetadata = _messageSlice$actions.updateOGMetadata;
 var MessageReducer = messageSlice.reducer;
 var initialState$2 = {
@@ -11799,11 +11787,22 @@ function setMessagesHasNextAC(hasNext) {
     hasNext: hasNext
   });
 }
-function setUpdateMessageAttachmentAC(url, messageId, params) {
+function setOGMetadataAC(url, metadata) {
+  return setOGMetadata({
+    url: url,
+    metadata: metadata
+  });
+}
+function updateOGMetadataAC(url, metadata) {
+  return updateOGMetadata({
+    url: url,
+    metadata: metadata
+  });
+}
+function setUpdateMessageAttachmentAC(url, attachmentUrl) {
   return updateMessageAttachment({
     url: url,
-    messageId: messageId,
-    params: params
+    attachmentUrl: attachmentUrl
   });
 }
 function updateMessageAC(messageId, params, addIfNotExists) {
@@ -17114,6 +17113,9 @@ var playingAudioIdSelector = function playingAudioIdSelector(store) {
 var selectedMessagesMapSelector = function selectedMessagesMapSelector(store) {
   return store.MessageReducer.selectedMessagesMap;
 };
+var attachmentUpdatedMapSelector = function attachmentUpdatedMapSelector(store) {
+  return store.MessageReducer.attachmentUpdatedMap;
+};
 var getFrame = function getFrame(videoSrc, time) {
   try {
@@ -29574,13 +29576,17 @@ var Attachment = function Attachment(_ref) {
   var connectionStatus = useSelector(connectionStatusSelector);
   var theme = useSelector(themeSelector);
   var imageContRef = useRef(null);
-  var _useState = useState(!attachment.attachmentUrl),
+  var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector) || {};
+  var attachmentUrlFromMap = useMemo(function () {
+    return attachmentUpdatedMap[attachment.url];
+  }, [attachmentUpdatedMap, attachment.url]);
+  var _useState = useState(!attachmentUrlFromMap),
     imageLoading = _useState[0],
     setImageLoading = _useState[1];
   var _useState2 = useState(false),
     downloadingFile = _useState2[0],
     setDownloadingFile = _useState2[1];
-  var _useState3 = useState(''),
+  var _useState3 = useState(attachmentUrlFromMap),
     attachmentUrl = _useState3[0],
     setAttachmentUrl = _useState3[1];
   var _useState4 = useState(),
@@ -29604,27 +29610,26 @@ var Attachment = function Attachment(_ref) {
   var fileNameRef = useRef(null);
   var customDownloader = getCustomDownloader();
   var previewFileType = isPreview && attachment.data.type.split('/')[0];
+  var attachmentMetadata = useMemo(function () {
+    return isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
+  }, [attachment.metadata]);
   var _useMemo = useMemo(function () {
       var attachmentData = null;
-      if (attachment.metadata && typeof attachment.metadata === 'string') {
-        attachmentData = isJSON(attachment.metadata) ? JSON.parse(attachment.metadata) : attachment.metadata;
-      } else if (attachment.metadata && attachment.metadata.szw && attachment.metadata.szh) {
-        attachmentData = attachment.metadata;
-      }
+      attachmentData = attachmentMetadata;
       return attachmentData && attachmentData.szw && attachmentData.szh ? calculateRenderedImageWidth(attachmentData.szw, attachmentData.szh, attachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, attachment.type === attachmentTypes.image ? imageAttachmentMaxHeight || 400 : videoAttachmentMaxHeight) : [];
-    }, []),
+    }, [attachmentMetadata]),
     renderWidth = _useMemo[0],
     renderHeight = _useMemo[1];
   var isInUploadingState = attachmentCompilationState[attachment.tid] && (attachmentCompilationState[attachment.tid] === UPLOAD_STATE.UPLOADING || attachmentCompilationState[attachment.tid] === UPLOAD_STATE.PAUSED);
   var attachmentThumb;
   var withPrefix = true;
-  if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachment.metadata && attachment.metadata.tmb) {
+  if (attachment.type !== attachmentTypes.voice && attachment.type !== attachmentTypes.link && attachmentMetadata && attachmentMetadata.tmb) {
     try {
-      if (attachment.metadata.tmb.length < 70) {
-        attachmentThumb = base64ToToDataURL(attachment.metadata.tmb);
+      if (attachmentMetadata.tmb.length < 70) {
+        attachmentThumb = base64ToToDataURL(attachmentMetadata.tmb);
         withPrefix = false;
       } else {
-        attachmentThumb = attachment.metadata && attachment.metadata.tmb;
+        attachmentThumb = attachmentMetadata && attachmentMetadata.tmb;
       }
     } catch (e) {
       log.error('error on get attachmentThumb', e);
@@ -29788,9 +29793,7 @@ var Attachment = function Attachment(_ref) {
           if (attachment.type === attachmentTypes.image && !isPreview) {
             if (cachedUrl) {
               setAttachmentUrl(cachedUrl);
-              dispatch(setUpdateMessageAttachmentAC(attachment.url, attachment.messageId, {
-                attachmentUrl: cachedUrl
-              }));
+              dispatch(setUpdateMessageAttachmentAC(attachment.url, cachedUrl));
               setIsCached(true);
             } else {
               setIsCached(false);
@@ -31363,54 +31366,95 @@ var validateUrl = function validateUrl(url) {
   }
 };
 var OGMetadata = function OGMetadata(_ref) {
-  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;
+  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;
   var attachments = _ref.attachments,
     state = _ref.state;
-  var _useState = useState(null),
-    metadata = _useState[0],
-    setMetadata = _useState[1];
-  var _useState2 = useState(true),
-    imageLoadError = _useState2[0],
-    setImageLoadError = _useState2[1];
-  var _useState3 = useState(true),
-    faviconLoadError = _useState3[0],
-    setFaviconLoadError = _useState3[1];
-  var _useState4 = useState(false),
-    imageLoaded = _useState4[0],
-    setImageLoaded = _useState4[1];
-  var _useState5 = useState(0),
-    imageWidth = _useState5[0],
-    setImageWidth = _useState5[1];
-  var _useState6 = useState(0),
-    imageHeight = _useState6[0],
-    setImageHeight = _useState6[1];
+  var dispatch = useDispatch();
+  var oGMetadata = useSelector(function (state) {
+    return state.MessageReducer.oGMetadata;
+  });
   var attachment = useMemo(function () {
     return attachments.find(function (attachment) {
       return attachment.type === attachmentTypes.link;
     });
   }, [attachments]);
+  var metadata = useMemo(function () {
+    return oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] || null;
+  }, [oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url]);
+  var _useState = useState(false),
+    imageLoadError = _useState[0],
+    setImageLoadError = _useState[1];
+  var _useState2 = useState(false),
+    faviconLoadError = _useState2[0],
+    setFaviconLoadError = _useState2[1];
+  var _useState3 = useState(false),
+    shouldAnimate = _useState3[0],
+    setShouldAnimate = _useState3[1];
+  var handleMetadata = useCallback(function (metadata) {
+    if (metadata) {
+      dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata));
+    } else {
+      dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, null));
+    }
+  }, []);
   var ogMetadataQueryBuilder = useCallback(function (url) {
     try {
       var client = getClient();
-      var _temp2 = function () {
+      var _temp3 = function () {
         if (client) {
-          var _temp = _catch(function () {
+          var _temp2 = _catch(function () {
             var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
             return Promise.resolve(queryBuilder.build()).then(function (query) {
               return Promise.resolve(query.loadOGData()).then(function (metadata) {
-                return Promise.resolve(storeMetadata(url, metadata)).then(function () {
-                  setMetadata(metadata);
-                });
+                var _metadata$og, _metadata$og$image, _metadata$og$image$;
+                var image = new Image();
+                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;
+                var _temp = function () {
+                  if (image.src) {
+                    image.onload = function () {
+                      try {
+                        var imageWidth = image.width;
+                        var imageHeight = image.height;
+                        return Promise.resolve(storeMetadata(url, _extends({}, metadata, {
+                          imageWidth: imageWidth,
+                          imageHeight: imageHeight
+                        }))).then(function () {
+                          handleMetadata(_extends({}, metadata, {
+                            imageWidth: imageWidth,
+                            imageHeight: imageHeight
+                          }));
+                        });
+                      } catch (e) {
+                        return Promise.reject(e);
+                      }
+                    };
+                    image.onerror = function () {
+                      try {
+                        setImageLoadError(true);
+                        return Promise.resolve(storeMetadata(url, _extends({}, metadata))).then(function () {
+                          handleMetadata(_extends({}, metadata));
+                        });
+                      } catch (e) {
+                        return Promise.reject(e);
+                      }
+                    };
+                  } else {
+                    return Promise.resolve(storeMetadata(url, _extends({}, metadata))).then(function () {
+                      handleMetadata(_extends({}, metadata));
+                    });
+                  }
+                }();
+                if (_temp && _temp.then) return _temp.then(function () {});
               });
             });
           }, function () {
             console.log('Failed to fetch OG metadata');
-            setMetadata(null);
+            handleMetadata(null);
           });
-          if (_temp && _temp.then) return _temp.then(function () {});
+          if (_temp2 && _temp2.then) return _temp2.then(function () {});
         }
       }();
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {
         return null;
       }) : null);
     } catch (e) {
@@ -31418,16 +31462,16 @@ var OGMetadata = function OGMetadata(_ref) {
     }
   }, []);
   useEffect(function () {
-    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url) {
+    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
+      setShouldAnimate(true);
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
         getMetadata(url).then(function (cachedMetadata) {
           try {
             if (cachedMetadata) {
-              setMetadata(cachedMetadata);
-            } else {
-              ogMetadataQueryBuilder(url);
+              handleMetadata(cachedMetadata);
             }
+            ogMetadataQueryBuilder(url);
             return Promise.resolve();
           } catch (e) {
             return Promise.reject(e);
@@ -31437,7 +31481,7 @@ var OGMetadata = function OGMetadata(_ref) {
         });
       }
     }
-  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
+  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
   var ogUrl = useMemo(function () {
     var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
     var urlObj = validateUrl(url);
@@ -31447,102 +31491,126 @@ var OGMetadata = function OGMetadata(_ref) {
     return url;
   }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
   var showOGMetadata = useMemo(function () {
-    var _metadata$og, _metadata$og2, _metadata$og2$image, _metadata$og2$image$, _metadata$og3;
-    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;
+    var _metadata$og2, _metadata$og3;
+    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;
   }, [state, metadata]);
-  useEffect(function () {
-    var _metadata$og4, _metadata$og4$image, _metadata$og4$image$;
-    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) {
-      var _metadata$og5, _metadata$og5$image, _metadata$og5$image$;
-      var image = new Image();
-      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;
-      image.onload = function () {
-        var imageWidth = image.width;
-        var imageHeight = image.height;
-        setImageWidth(imageWidth);
-        setImageHeight(imageHeight);
-        setImageLoadError(false);
-        setImageLoaded(true);
-      };
-      image.onerror = function () {
-        setImageLoadError(true);
-        setImageLoaded(true);
-      };
-    }
-  }, [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]);
   var calculatedImageHeight = useMemo(function () {
-    return imageHeight / (imageWidth / 400);
-  }, [imageWidth, imageHeight]);
+    if (!(metadata !== null && metadata !== void 0 && metadata.imageWidth)) {
+      return 0;
+    }
+    return (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / 400);
+  }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight]);
   return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
     showOGMetadata: !!showOGMetadata
   }, /*#__PURE__*/React__default.createElement("div", {
     onClick: function onClick() {
       window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
+    },
+    style: {
+      width: showOGMetadata ? '400px' : 'auto'
     }
   }, /*#__PURE__*/React__default.createElement(ImageContainer, {
-    showOGMetadata: !!showOGMetadata && !imageLoadError && imageLoaded,
-    width: 400,
-    height: calculatedImageHeight
-  }, 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, {
-    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,
+    showOGMetadata: !!showOGMetadata && !imageLoadError,
+    containerWidth: 400,
+    containerHeight: calculatedImageHeight,
+    shouldAnimate: shouldAnimate
+  }, 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, {
+    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,
     alt: 'OG metadata image',
-    width: 400,
-    height: calculatedImageHeight
-  })) : null), showOGMetadata && imageLoaded ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, {
-    maxWidth: 400
-  }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og9 = metadata.og) !== null && _metadata$og9 !== void 0 && _metadata$og9.title ? (/*#__PURE__*/React__default.createElement(Title, {
-    maxWidth: 400
-  }, 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, {
-    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,
+    imageWidth: 400,
+    imageHeight: calculatedImageHeight,
+    shouldAnimate: shouldAnimate
+  })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, {
+    shouldAnimate: shouldAnimate
+  }, /*#__PURE__*/React__default.createElement(Url, {
+    maxWidth: 400,
+    shouldAnimate: shouldAnimate
+  }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, {
+    maxWidth: 400,
+    shouldAnimate: shouldAnimate
+  }, 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, {
+    shouldAnimate: shouldAnimate,
+    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,
     onLoad: function onLoad() {
       return setFaviconLoadError(false);
     },
     onError: function onError() {
-      return setFaviconLoadError(true);
+      dispatch(updateOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, _extends({}, metadata, {
+        og: _extends({}, metadata === null || metadata === void 0 ? void 0 : metadata.og, {
+          favicon: {
+            url: ''
+          }
+        })
+      })));
+      setFaviconLoadError(true);
     }
-  })) : 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, {
-    maxWidth: 400
-  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description) : null)) : null));
+  })) : 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, {
+    maxWidth: 400,
+    shouldAnimate: shouldAnimate
+  }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description)) : null)) : null));
 };
 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) {
   var showOGMetadata = _ref2.showOGMetadata;
   return showOGMetadata ? '0.8rem' : '0';
 });
-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  transition: height 0.2s ease;\n"])), function (_ref3) {
-  var width = _ref3.width;
-  return width ? "\n    max-width: " + (width + "px") + ";\n  " : "\n    max-width: 100%;\n    width: 100%;\n  ";
+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) {
+  var containerWidth = _ref3.containerWidth;
+  return containerWidth ? "\n    max-width: " + (containerWidth + "px") + ";\n  " : "\n    max-width: 100%;\n    width: 100%;\n  ";
 }, function (_ref4) {
-  var height = _ref4.height,
+  var containerHeight = _ref4.containerHeight,
     showOGMetadata = _ref4.showOGMetadata;
-  return height ? "\n    max-height: " + (height + "px") + ";\n    height: " + (showOGMetadata ? height + "px" : '0') + ";\n  " : "\n    max-height: 200px;\n    height: " + (showOGMetadata ? '200px' : '0') + ";\n  ";
+  return containerHeight ? "\n    max-height: " + (containerHeight + "px") + ";\n    height: " + (showOGMetadata ? containerHeight + "px" : '0') + ";\n  " : "\n      height: 0;\n  ";
 }, function (_ref5) {
-  var showOGMetadata = _ref5.showOGMetadata;
-  return showOGMetadata ? 1 : 0;
+  var showOGMetadata = _ref5.showOGMetadata,
+    containerHeight = _ref5.containerHeight;
+  return showOGMetadata && containerHeight ? 1 : 0;
 }, function (_ref6) {
-  var showOGMetadata = _ref6.showOGMetadata;
-  return showOGMetadata ? '0.3rem' : '0';
+  var showOGMetadata = _ref6.showOGMetadata,
+    containerHeight = _ref6.containerHeight;
+  return showOGMetadata && containerHeight ? '4px' : '0';
+}, function (_ref7) {
+  var shouldAnimate = _ref7.shouldAnimate;
+  return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
+});
+var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  ", "\n"])), function (_ref8) {
+  var shouldAnimate = _ref8.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  transition: all 0.2s ease;\n"])));
-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  transition: all 0.2s ease;\n"])), function (_ref7) {
-  var maxWidth = _ref7.maxWidth;
+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) {
+  var maxWidth = _ref9.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+}, function (_ref0) {
+  var shouldAnimate = _ref0.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-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  transition: all 0.2s ease;\n"])), function (_ref8) {
-  var maxWidth = _ref8.maxWidth;
+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) {
+  var maxWidth = _ref1.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+}, function (_ref10) {
+  var shouldAnimate = _ref10.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var Desc = styled.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  ", "\n  transition: all 0.2s ease;\n"])), function (_ref9) {
-  var maxWidth = _ref9.maxWidth;
+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) {
+  var maxWidth = _ref11.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
+}, function (_ref12) {
+  var shouldAnimate = _ref12.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
+});
+var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  object-fit: cover;\n  ", "\n"])), function (_ref13) {
+  var imageWidth = _ref13.imageWidth;
+  return imageWidth && "\n    max-width: " + (imageWidth + "px") + ";\n    width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n  ";
+}, function (_ref14) {
+  var imageHeight = _ref14.imageHeight;
+  return imageHeight && "\n    max-height: " + (imageHeight + "px") + ";\n    min-height: " + (imageHeight + "px") + ";\n    height: " + (imageHeight + "px") + ";\n  ";
+}, function (_ref15) {
+  var shouldAnimate = _ref15.shouldAnimate;
+  return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
 });
-var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  object-fit: cover;\n  transition: height 0.2s ease;\n"])), function (_ref0) {
-  var width = _ref0.width;
-  return width && "\n    max-width: " + (width + "px") + ";\n    min-width: " + (width + "px") + ";\n    width: " + (width + "px") + ";\n  ";
-}, function (_ref1) {
-  var height = _ref1.height;
-  return height && "\n    max-height: " + (height + "px") + ";\n    min-height: " + (height + "px") + ";\n    height: " + (height + "px") + ";\n  ";
+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) {
+  var shouldAnimate = _ref16.shouldAnimate;
+  return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-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"])));
 var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i;
 var MessageBody = function MessageBody(_ref) {
@@ -36124,7 +36192,6 @@ var AudioRecord = function AudioRecord(_ref) {
     handleStopRecording();
     if (currentRecordedFile) {
       var _wavesurfer$current2;
-      removeAudioRecordingFromMap(currentChannelId);
       dispatch(setChannelDraftMessageIsRemovedAC(currentChannelId));
       setRecordedFile(null);
       setPlayAudio(false);
@@ -36133,8 +36200,9 @@ var AudioRecord = function AudioRecord(_ref) {
       }
     } else {
       shouldDraw = false;
-      recorder.stop();
+      recorder === null || recorder === void 0 ? void 0 : recorder.stop();
     }
+    removeAudioRecordingFromMap(currentChannelId);
     setRecordingIsReadyToPlay(false);
     setStartRecording(false);
     setCurrentTime(0);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.7.2-beta.1",
+  "version": "1.7.2-beta.3",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",

package/types/index.d.ts CHANGED Viewed

@@ -237,6 +237,8 @@ export interface IOGMetadata {
             url: string;
         }[];
     };
+    imageWidth?: number;
+    imageHeight?: number;
 }
 export declare type MuteTime = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 24;
 export declare type ICustomAvatarColors = [string, string, string, string, string, string];