sceyt-chat-react-uikit 1.9.0-beta.3 → 1.9.0-beta.4

package/index.js

@@ -36249,7 +36249,7 @@ var Carousel = function Carousel(_ref) {
   var lastInitialIndexRef = React.useRef(initialActiveIndex);
   var transitionTimeoutRef = React.useRef(null);
   var currentIndexRef = React.useRef(initialActiveIndex);
-  React.useEffect(function () {
+  React.useLayoutEffect(function () {
     isInternalNavigationRef.current = false;
     setCurrentIndex(initialActiveIndex);
     currentIndexRef.current = initialActiveIndex;
@@ -38878,6 +38878,10 @@ var Attachment = function Attachment(_ref) {
           if (typeof cachedThumb === 'string') {
             dispatch(setUpdateMessageAttachmentAC(videoThumb, cachedThumb));
           }
+          if (isDetailsView) {
+            setIsCached(true);
+            return;
+          }
           return Promise.resolve(getAttachmentUrlFromCache(originalVideoCacheKey)["catch"](function () {
             return false;
           })).then(function (cachedOriginalVideo) {
@@ -38901,7 +38905,7 @@ var Attachment = function Attachment(_ref) {
     return function () {
       cancelled = true;
     };
-  }, [attachment.id, attachment.type, attachment.url, attachment.metadata, attachment.attachmentUrl, originalVideoUrlFromMap, connectionStatus, dispatch]);
+  }, [attachment.id, attachment.type, attachment.url, attachment.metadata, attachment.attachmentUrl, isDetailsView, originalVideoUrlFromMap, connectionStatus, dispatch]);
   React.useEffect(function () {
     if (!attachment.attachmentUrl && connectionStatus === CONNECTION_STATUS.CONNECTED && attachment.id && !attachmentUrlFromMap && !(attachment.type === attachmentTypes.video && getVideoThumb(attachment.metadata)) && !(attachment.type === attachmentTypes.file || attachment.type === attachmentTypes.link)) {
       var requestAttachmentKey = attachmentKey;
@@ -40581,6 +40585,16 @@ var DeleteOptionItem = styled__default.div(_templateObject2$t || (_templateObjec
 });
 
 var _templateObject$x, _templateObject2$u, _templateObject3$o, _templateObject4$l, _templateObject5$h, _templateObject6$e, _templateObject7$d, _templateObject8$b, _templateObject9$a, _templateObject0$9, _templateObject1$8, _templateObject10$6, _templateObject11$5, _templateObject12$5, _templateObject13$5, _templateObject14$5;
+var getMediaThumbnailSource = function getMediaThumbnailSource(file) {
+  var metadata = isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata;
+  var thumbnail = metadata === null || metadata === void 0 ? void 0 : metadata.tmb;
+  if (!thumbnail || typeof thumbnail !== 'string') return undefined;
+  try {
+    return thumbnail.length < 70 ? base64ToDataURL(thumbnail) : "data:image/jpeg;base64," + thumbnail;
+  } catch (_unused) {
+    return undefined;
+  }
+};
 var SliderPopup = function SliderPopup(_ref) {
   var channel = _ref.channel,
     setIsSliderOpen = _ref.setIsSliderOpen,
@@ -40642,11 +40656,6 @@ var SliderPopup = function SliderPopup(_ref) {
   var customDownloader = getCustomDownloader();
   var contactsMap = useSelector(contactsMapSelector);
   var attachmentsList = useSelector(attachmentsForPopupSelector, reactRedux.shallowEqual) || [];
-  var previousListLengthRef = React.useRef(attachmentsList.length);
-  var currentFileIdRef = React.useRef(currentFile === null || currentFile === void 0 ? void 0 : currentFile.id);
-  var _useState0 = React.useState(false),
-    skipTransition = _useState0[0],
-    setSkipTransition = _useState0[1];
   var attachmentUserName = currentFile ? currentFile.user && makeUsername(contactsMap[currentFile.user.id], currentFile.user, getFromContacts && user.id !== currentFile.user.id) : '';
   var handleClosePopup = function handleClosePopup() {
     setIsSliderOpen(false);
@@ -40887,71 +40896,9 @@ var SliderPopup = function SliderPopup(_ref) {
     }
   }, [attachmentsList]);
   React.useEffect(function () {
-    if (customDownloader && currentMediaFile && currentMediaFile.id) {
-      var attachmentUrl = currentMediaFile.url + prefixUrl;
-      getAttachmentUrlFromCache(attachmentUrl).then(function (cachedUrl) {
-        if (cachedUrl) {
-          if (currentMediaFile.type === 'image') {
-            downloadImage(cachedUrl, false, 'image');
-          } else {
-            dispatch(setUpdateMessageAttachmentAC(attachmentUrl, cachedUrl));
-            setPlayedVideo(currentMediaFile.id);
-          }
-        } else {
-          if (customDownloader) {
-            customDownloader(currentMediaFile.url, false, function () {}, messageType).then(function (url) {
-              try {
-                var _temp0 = _catch(function () {
-                  return Promise.resolve(fetch(url)).then(function (response) {
-                    setAttachmentToCache(attachmentUrl, response);
-                    if (currentMediaFile.type === 'image') {
-                      downloadImage(url, false, 'image');
-                    } else {
-                      dispatch(setUpdateMessageAttachmentAC(attachmentUrl, url));
-                      setPlayedVideo(currentMediaFile.id);
-                    }
-                  });
-                }, function (error) {
-                  log.error('Error fetching initial attachment:', error);
-                });
-                return Promise.resolve(_temp0 && _temp0.then ? _temp0.then(function () {}) : void 0);
-              } catch (e) {
-                return Promise.reject(e);
-              }
-            })["catch"](function (error) {
-              log.error('Error downloading initial attachment:', error);
-            });
-          } else {
-            if (currentMediaFile.type === 'image') {
-              downloadImage(attachmentUrl, false, 'image');
-            } else {
-              dispatch(setUpdateMessageAttachmentAC(attachmentUrl, currentMediaFile.url));
-              setPlayedVideo(currentMediaFile.id);
-            }
-          }
-        }
-      })["catch"](function (error) {
-        log.error('Error getting initial attachment from cache:', error);
-      });
-    }
-    var foundInStaleList = !!attachmentsList.find(function (item) {
-      return item.id === currentMediaFile.id;
-    });
-    console.log('[MEDIA_OPEN] 4.slider-mount ' + JSON.stringify({
-      attId: currentMediaFile.id,
-      name: currentMediaFile.name,
-      msgId: currentMediaFile.messageId,
-      staleListLen: attachmentsList.length,
-      foundInStaleList: foundInStaleList,
-      staleListIds: attachmentsList.slice(0, 5).map(function (item) {
-        return item.id;
-      })
-    }));
-    if (!foundInStaleList) {
-      dispatch(setAttachmentsForPopupAC([currentMediaFile]));
-    }
+    dispatch(setAttachmentsForPopupAC([currentMediaFile]));
     dispatch(getAttachmentsAC(channel.id, channelDetailsTabs.media, 34, queryDirection.NEAR, currentMediaFile.id, true));
-  }, []);
+  }, [channel.id, currentMediaFile, dispatch]);
   var activeFileIndex = React.useMemo(function () {
     if (!(currentFile !== null && currentFile !== void 0 && currentFile.id)) return -1;
     var index = attachmentsList.findIndex(function (item) {
@@ -40966,50 +40913,13 @@ var SliderPopup = function SliderPopup(_ref) {
     return index;
   }, [attachmentsList, currentFile]);
   React.useEffect(function () {
-    var currentFileId = currentFile === null || currentFile === void 0 ? void 0 : currentFile.id;
-    var previousLength = previousListLengthRef.current;
-    var newLength = attachmentsList.length;
-    var timeoutId = null;
-    if (newLength > previousLength && currentFileId) {
-      setSkipTransition(true);
-      var newIndex = attachmentsList.findIndex(function (item) {
-        return item.id === currentFileId;
-      });
-      console.log('[MEDIA_OPEN] 6.list-grew ' + JSON.stringify({
-        prevLen: previousLength,
-        newLen: newLength,
-        attId: currentFileId,
-        newIndex: newIndex,
-        activeFileIndex: activeFileIndex
-      }));
-      if (newIndex >= 0) {
-        if (newIndex !== activeFileIndex) {
-          var newFile = attachmentsList[newIndex];
-          if (newFile) {
-            setCurrentFile(newFile);
-          }
-        }
-        timeoutId = setTimeout(function () {
-          requestAnimationFrame(function () {
-            requestAnimationFrame(function () {
-              setSkipTransition(false);
-            });
-          });
-        }, 150);
-      } else {
-        timeoutId = setTimeout(function () {
-          setSkipTransition(false);
-        }, 150);
-      }
+    var latestCurrentFile = attachmentsList.find(function (file) {
+      return file.id === currentFile.id;
+    });
+    if (latestCurrentFile && latestCurrentFile !== currentFile) {
+      setCurrentFile(latestCurrentFile);
     }
-    previousListLengthRef.current = newLength;
-    currentFileIdRef.current = currentFileId;
-    return function () {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [attachmentsList.length, currentFile === null || currentFile === void 0 ? void 0 : currentFile.id, activeFileIndex, attachmentsList]);
+  }, [attachmentsList, currentFile]);
   var handleCarouselItemMouseDown = React.useCallback(function (e) {
     if (e.button === 2) {
       e.stopPropagation();
@@ -41108,7 +41018,6 @@ var SliderPopup = function SliderPopup(_ref) {
     pagination: false,
     className: 'custom_carousel',
     initialActiveIndex: activeFileIndex >= 0 ? activeFileIndex : 0,
-    skipTransition: skipTransition,
     onNextStart: function onNextStart() {
       setReadyToPlay(false);
       loadNextMoreAttachments();
@@ -41166,11 +41075,11 @@ var SliderPopup = function SliderPopup(_ref) {
       }
     }, isItemLoading(file.id) && file.type === 'image' && (/*#__PURE__*/React__default.createElement(ItemLoadingCont, null, /*#__PURE__*/React__default.createElement(UploadingIcon, {
       color: textOnPrimary
-    }))), file.type === 'image' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')] && (/*#__PURE__*/React__default.createElement("img", {
-      loading: 'lazy',
+    }))), file.type === 'image' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, (attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')] || getMediaThumbnailSource(file)) && (/*#__PURE__*/React__default.createElement("img", {
+      loading: 'eager',
       decoding: 'async',
       draggable: false,
-      src: attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')],
+      src: attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')] || getMediaThumbnailSource(file),
       alt: file.name || 'Attachment',
       onMouseDown: function onMouseDown(e) {
         if (e.button === 2) {
@@ -41180,7 +41089,7 @@ var SliderPopup = function SliderPopup(_ref) {
       style: {
         position: 'relative',
         zIndex: 2,
-        opacity: isItemLoading(file.id) ? 0 : 1
+        opacity: 1
       },
       onLoad: function onLoad() {
         var fileId = file.id;
@@ -41255,7 +41164,7 @@ var IconWrapper = styled__default.span(_templateObject10$6 || (_templateObject10
 }, function (props) {
   return props.hideInMobile && "\n    @media (max-width: 550px) {\n      display: none;\n    }\n  ";
 });
-var CarouselItem$1 = styled__default.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  max-width: calc(100% - 200px);\n  z-index: 2;\n\n  img,\n  video {\n    min-width: 280px;\n    max-width: 100%;\n    margin: auto;\n    object-fit: contain;\n    max-height: calc(100vh - 200px);\n    @media (max-width: 480px) {\n      min-width: inherit;\n    }\n  }\n  @media (max-width: 480px) {\n    max-width: calc(100% - 100px);\n  }\n\n  img {\n    min-width: inherit;\n  }\n"])));
+var CarouselItem$1 = styled__default.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  width: calc(100% - 200px);\n  height: calc(100% - 80px);\n  max-width: calc(100% - 200px);\n  max-height: calc(100vh - 140px);\n  align-items: center;\n  justify-content: center;\n  z-index: 2;\n\n  img,\n  video {\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    object-fit: contain;\n    @media (max-width: 480px) {\n      width: 100%;\n    }\n  }\n  @media (max-width: 480px) {\n    width: calc(100% - 100px);\n    height: calc(100% - 48px);\n    max-width: calc(100% - 100px);\n  }\n\n  img {\n    display: block;\n  }\n"])));
 var UploadCont$1 = styled__default.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n  left: calc((100vw - 100%) / -2);\n  top: calc((100vh - 100%) / -2);\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  z-index: 1;\n"])));
 var ItemLoadingCont = styled__default.div(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: calc((100vw - 100%) / -2);\n  top: calc((100vh - 100% + 60px) / -2);\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n"])));
 var ArrowButton = styled__default.button(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n  min-width: 60px;\n  max-width: 60px;\n  height: 60px;\n  margin-right: ", ";\n  margin-left: ", ";\n  border: none;\n  color: ", ";\n  background: transparent;\n  box-sizing: border-box;\n  border-radius: 50%;\n  line-height: 1px;\n  align-self: center;\n  outline: none;\n  cursor: pointer;\n  visibility: ", ";\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: ", ";\n  right: ", ";\n  & > svg {\n    width: 40px;\n    height: 40px;\n  }\n  @media (max-width: 768px) {\n    min-width: 36px;\n    max-width: 36px;\n    height: 36px;\n    margin-right: ", ";\n    margin-left: ", ";\n\n    & > svg {\n      width: 22px;\n      height: 22px;\n    }\n  }\n  @media (max-width: 450px) {\n    min-width: 32px;\n    max-width: 32px;\n    height: 32px;\n\n    & > svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n"])), function (props) {
@@ -57428,6 +57337,7 @@ var Media = function Media(_ref) {
   var dispatch = useDispatch();
   var handleMediaItemClick = function handleMediaItemClick(file) {
     if (file !== null && file !== void 0 && file.id) {
+      dispatch(setAttachmentsForPopupAC([file]));
       setMediaFile(file);
     }
   };
@@ -57475,7 +57385,7 @@ var Media = function Media(_ref) {
       year: 'numeric'
     })), /*#__PURE__*/React__default.createElement(ItemsGrid, null, group.items.map(function (file, index) {
       return /*#__PURE__*/React__default.createElement(MediaItem, {
-        key: file.id + "_" + index
+        key: file.id || file.messageId + "_" + index
       }, /*#__PURE__*/React__default.createElement(Attachment$1, {
         attachment: _extends({}, file, {
           metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata

package/index.modern.js

@@ -36229,7 +36229,7 @@ var Carousel = function Carousel(_ref) {
   var lastInitialIndexRef = useRef(initialActiveIndex);
   var transitionTimeoutRef = useRef(null);
   var currentIndexRef = useRef(initialActiveIndex);
-  useEffect(function () {
+  useLayoutEffect(function () {
     isInternalNavigationRef.current = false;
     setCurrentIndex(initialActiveIndex);
     currentIndexRef.current = initialActiveIndex;
@@ -38858,6 +38858,10 @@ var Attachment = function Attachment(_ref) {
           if (typeof cachedThumb === 'string') {
             dispatch(setUpdateMessageAttachmentAC(videoThumb, cachedThumb));
           }
+          if (isDetailsView) {
+            setIsCached(true);
+            return;
+          }
           return Promise.resolve(getAttachmentUrlFromCache(originalVideoCacheKey)["catch"](function () {
             return false;
           })).then(function (cachedOriginalVideo) {
@@ -38881,7 +38885,7 @@ var Attachment = function Attachment(_ref) {
     return function () {
       cancelled = true;
     };
-  }, [attachment.id, attachment.type, attachment.url, attachment.metadata, attachment.attachmentUrl, originalVideoUrlFromMap, connectionStatus, dispatch]);
+  }, [attachment.id, attachment.type, attachment.url, attachment.metadata, attachment.attachmentUrl, isDetailsView, originalVideoUrlFromMap, connectionStatus, dispatch]);
   useEffect(function () {
     if (!attachment.attachmentUrl && connectionStatus === CONNECTION_STATUS.CONNECTED && attachment.id && !attachmentUrlFromMap && !(attachment.type === attachmentTypes.video && getVideoThumb(attachment.metadata)) && !(attachment.type === attachmentTypes.file || attachment.type === attachmentTypes.link)) {
       var requestAttachmentKey = attachmentKey;
@@ -40561,6 +40565,16 @@ var DeleteOptionItem = styled.div(_templateObject2$t || (_templateObject2$t = _t
 });
 
 var _templateObject$x, _templateObject2$u, _templateObject3$o, _templateObject4$l, _templateObject5$h, _templateObject6$e, _templateObject7$d, _templateObject8$b, _templateObject9$a, _templateObject0$9, _templateObject1$8, _templateObject10$6, _templateObject11$5, _templateObject12$5, _templateObject13$5, _templateObject14$5;
+var getMediaThumbnailSource = function getMediaThumbnailSource(file) {
+  var metadata = isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata;
+  var thumbnail = metadata === null || metadata === void 0 ? void 0 : metadata.tmb;
+  if (!thumbnail || typeof thumbnail !== 'string') return undefined;
+  try {
+    return thumbnail.length < 70 ? base64ToDataURL(thumbnail) : "data:image/jpeg;base64," + thumbnail;
+  } catch (_unused) {
+    return undefined;
+  }
+};
 var SliderPopup = function SliderPopup(_ref) {
   var channel = _ref.channel,
     setIsSliderOpen = _ref.setIsSliderOpen,
@@ -40622,11 +40636,6 @@ var SliderPopup = function SliderPopup(_ref) {
   var customDownloader = getCustomDownloader();
   var contactsMap = useSelector(contactsMapSelector);
   var attachmentsList = useSelector(attachmentsForPopupSelector, shallowEqual) || [];
-  var previousListLengthRef = useRef(attachmentsList.length);
-  var currentFileIdRef = useRef(currentFile === null || currentFile === void 0 ? void 0 : currentFile.id);
-  var _useState0 = useState(false),
-    skipTransition = _useState0[0],
-    setSkipTransition = _useState0[1];
   var attachmentUserName = currentFile ? currentFile.user && makeUsername(contactsMap[currentFile.user.id], currentFile.user, getFromContacts && user.id !== currentFile.user.id) : '';
   var handleClosePopup = function handleClosePopup() {
     setIsSliderOpen(false);
@@ -40867,71 +40876,9 @@ var SliderPopup = function SliderPopup(_ref) {
     }
   }, [attachmentsList]);
   useEffect(function () {
-    if (customDownloader && currentMediaFile && currentMediaFile.id) {
-      var attachmentUrl = currentMediaFile.url + prefixUrl;
-      getAttachmentUrlFromCache(attachmentUrl).then(function (cachedUrl) {
-        if (cachedUrl) {
-          if (currentMediaFile.type === 'image') {
-            downloadImage(cachedUrl, false, 'image');
-          } else {
-            dispatch(setUpdateMessageAttachmentAC(attachmentUrl, cachedUrl));
-            setPlayedVideo(currentMediaFile.id);
-          }
-        } else {
-          if (customDownloader) {
-            customDownloader(currentMediaFile.url, false, function () {}, messageType).then(function (url) {
-              try {
-                var _temp0 = _catch(function () {
-                  return Promise.resolve(fetch(url)).then(function (response) {
-                    setAttachmentToCache(attachmentUrl, response);
-                    if (currentMediaFile.type === 'image') {
-                      downloadImage(url, false, 'image');
-                    } else {
-                      dispatch(setUpdateMessageAttachmentAC(attachmentUrl, url));
-                      setPlayedVideo(currentMediaFile.id);
-                    }
-                  });
-                }, function (error) {
-                  log.error('Error fetching initial attachment:', error);
-                });
-                return Promise.resolve(_temp0 && _temp0.then ? _temp0.then(function () {}) : void 0);
-              } catch (e) {
-                return Promise.reject(e);
-              }
-            })["catch"](function (error) {
-              log.error('Error downloading initial attachment:', error);
-            });
-          } else {
-            if (currentMediaFile.type === 'image') {
-              downloadImage(attachmentUrl, false, 'image');
-            } else {
-              dispatch(setUpdateMessageAttachmentAC(attachmentUrl, currentMediaFile.url));
-              setPlayedVideo(currentMediaFile.id);
-            }
-          }
-        }
-      })["catch"](function (error) {
-        log.error('Error getting initial attachment from cache:', error);
-      });
-    }
-    var foundInStaleList = !!attachmentsList.find(function (item) {
-      return item.id === currentMediaFile.id;
-    });
-    console.log('[MEDIA_OPEN] 4.slider-mount ' + JSON.stringify({
-      attId: currentMediaFile.id,
-      name: currentMediaFile.name,
-      msgId: currentMediaFile.messageId,
-      staleListLen: attachmentsList.length,
-      foundInStaleList: foundInStaleList,
-      staleListIds: attachmentsList.slice(0, 5).map(function (item) {
-        return item.id;
-      })
-    }));
-    if (!foundInStaleList) {
-      dispatch(setAttachmentsForPopupAC([currentMediaFile]));
-    }
+    dispatch(setAttachmentsForPopupAC([currentMediaFile]));
     dispatch(getAttachmentsAC(channel.id, channelDetailsTabs.media, 34, queryDirection.NEAR, currentMediaFile.id, true));
-  }, []);
+  }, [channel.id, currentMediaFile, dispatch]);
   var activeFileIndex = useMemo(function () {
     if (!(currentFile !== null && currentFile !== void 0 && currentFile.id)) return -1;
     var index = attachmentsList.findIndex(function (item) {
@@ -40946,50 +40893,13 @@ var SliderPopup = function SliderPopup(_ref) {
     return index;
   }, [attachmentsList, currentFile]);
   useEffect(function () {
-    var currentFileId = currentFile === null || currentFile === void 0 ? void 0 : currentFile.id;
-    var previousLength = previousListLengthRef.current;
-    var newLength = attachmentsList.length;
-    var timeoutId = null;
-    if (newLength > previousLength && currentFileId) {
-      setSkipTransition(true);
-      var newIndex = attachmentsList.findIndex(function (item) {
-        return item.id === currentFileId;
-      });
-      console.log('[MEDIA_OPEN] 6.list-grew ' + JSON.stringify({
-        prevLen: previousLength,
-        newLen: newLength,
-        attId: currentFileId,
-        newIndex: newIndex,
-        activeFileIndex: activeFileIndex
-      }));
-      if (newIndex >= 0) {
-        if (newIndex !== activeFileIndex) {
-          var newFile = attachmentsList[newIndex];
-          if (newFile) {
-            setCurrentFile(newFile);
-          }
-        }
-        timeoutId = setTimeout(function () {
-          requestAnimationFrame(function () {
-            requestAnimationFrame(function () {
-              setSkipTransition(false);
-            });
-          });
-        }, 150);
-      } else {
-        timeoutId = setTimeout(function () {
-          setSkipTransition(false);
-        }, 150);
-      }
+    var latestCurrentFile = attachmentsList.find(function (file) {
+      return file.id === currentFile.id;
+    });
+    if (latestCurrentFile && latestCurrentFile !== currentFile) {
+      setCurrentFile(latestCurrentFile);
     }
-    previousListLengthRef.current = newLength;
-    currentFileIdRef.current = currentFileId;
-    return function () {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [attachmentsList.length, currentFile === null || currentFile === void 0 ? void 0 : currentFile.id, activeFileIndex, attachmentsList]);
+  }, [attachmentsList, currentFile]);
   var handleCarouselItemMouseDown = useCallback(function (e) {
     if (e.button === 2) {
       e.stopPropagation();
@@ -41088,7 +40998,6 @@ var SliderPopup = function SliderPopup(_ref) {
     pagination: false,
     className: 'custom_carousel',
     initialActiveIndex: activeFileIndex >= 0 ? activeFileIndex : 0,
-    skipTransition: skipTransition,
     onNextStart: function onNextStart() {
       setReadyToPlay(false);
       loadNextMoreAttachments();
@@ -41146,11 +41055,11 @@ var SliderPopup = function SliderPopup(_ref) {
       }
     }, isItemLoading(file.id) && file.type === 'image' && (/*#__PURE__*/React__default.createElement(ItemLoadingCont, null, /*#__PURE__*/React__default.createElement(UploadingIcon, {
       color: textOnPrimary
-    }))), file.type === 'image' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')] && (/*#__PURE__*/React__default.createElement("img", {
-      loading: 'lazy',
+    }))), file.type === 'image' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, (attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')] || getMediaThumbnailSource(file)) && (/*#__PURE__*/React__default.createElement("img", {
+      loading: 'eager',
       decoding: 'async',
       draggable: false,
-      src: attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')],
+      src: attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')] || getMediaThumbnailSource(file),
       alt: file.name || 'Attachment',
       onMouseDown: function onMouseDown(e) {
         if (e.button === 2) {
@@ -41160,7 +41069,7 @@ var SliderPopup = function SliderPopup(_ref) {
       style: {
         position: 'relative',
         zIndex: 2,
-        opacity: isItemLoading(file.id) ? 0 : 1
+        opacity: 1
       },
       onLoad: function onLoad() {
         var fileId = file.id;
@@ -41235,7 +41144,7 @@ var IconWrapper = styled.span(_templateObject10$6 || (_templateObject10$6 = _tag
 }, function (props) {
   return props.hideInMobile && "\n    @media (max-width: 550px) {\n      display: none;\n    }\n  ";
 });
-var CarouselItem$1 = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  max-width: calc(100% - 200px);\n  z-index: 2;\n\n  img,\n  video {\n    min-width: 280px;\n    max-width: 100%;\n    margin: auto;\n    object-fit: contain;\n    max-height: calc(100vh - 200px);\n    @media (max-width: 480px) {\n      min-width: inherit;\n    }\n  }\n  @media (max-width: 480px) {\n    max-width: calc(100% - 100px);\n  }\n\n  img {\n    min-width: inherit;\n  }\n"])));
+var CarouselItem$1 = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  width: calc(100% - 200px);\n  height: calc(100% - 80px);\n  max-width: calc(100% - 200px);\n  max-height: calc(100vh - 140px);\n  align-items: center;\n  justify-content: center;\n  z-index: 2;\n\n  img,\n  video {\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    object-fit: contain;\n    @media (max-width: 480px) {\n      width: 100%;\n    }\n  }\n  @media (max-width: 480px) {\n    width: calc(100% - 100px);\n    height: calc(100% - 48px);\n    max-width: calc(100% - 100px);\n  }\n\n  img {\n    display: block;\n  }\n"])));
 var UploadCont$1 = styled.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n  left: calc((100vw - 100%) / -2);\n  top: calc((100vh - 100%) / -2);\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  z-index: 1;\n"])));
 var ItemLoadingCont = styled.div(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: calc((100vw - 100%) / -2);\n  top: calc((100vh - 100% + 60px) / -2);\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n"])));
 var ArrowButton = styled.button(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose(["\n  min-width: 60px;\n  max-width: 60px;\n  height: 60px;\n  margin-right: ", ";\n  margin-left: ", ";\n  border: none;\n  color: ", ";\n  background: transparent;\n  box-sizing: border-box;\n  border-radius: 50%;\n  line-height: 1px;\n  align-self: center;\n  outline: none;\n  cursor: pointer;\n  visibility: ", ";\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: ", ";\n  right: ", ";\n  & > svg {\n    width: 40px;\n    height: 40px;\n  }\n  @media (max-width: 768px) {\n    min-width: 36px;\n    max-width: 36px;\n    height: 36px;\n    margin-right: ", ";\n    margin-left: ", ";\n\n    & > svg {\n      width: 22px;\n      height: 22px;\n    }\n  }\n  @media (max-width: 450px) {\n    min-width: 32px;\n    max-width: 32px;\n    height: 32px;\n\n    & > svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n"])), function (props) {
@@ -57408,6 +57317,7 @@ var Media = function Media(_ref) {
   var dispatch = useDispatch();
   var handleMediaItemClick = function handleMediaItemClick(file) {
     if (file !== null && file !== void 0 && file.id) {
+      dispatch(setAttachmentsForPopupAC([file]));
       setMediaFile(file);
     }
   };
@@ -57455,7 +57365,7 @@ var Media = function Media(_ref) {
       year: 'numeric'
     })), /*#__PURE__*/React__default.createElement(ItemsGrid, null, group.items.map(function (file, index) {
       return /*#__PURE__*/React__default.createElement(MediaItem, {
-        key: file.id + "_" + index
+        key: file.id || file.messageId + "_" + index
       }, /*#__PURE__*/React__default.createElement(Attachment$1, {
         attachment: _extends({}, file, {
           metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata

package/package.json

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