sceyt-chat-react-uikit 1.9.1-beta.6 → 1.9.1-beta.7

package/index.js

@@ -42681,6 +42681,13 @@ var getMediaSizes = function getMediaSizes(file) {
     height: (metadata === null || metadata === void 0 ? void 0 : metadata.szh) || 0
   };
 };
+var isMediaWiderThanBox = function isMediaWiderThanBox(file, boxRatio) {
+  var _getMediaSizes = getMediaSizes(file),
+    width = _getMediaSizes.width,
+    height = _getMediaSizes.height;
+  if (!width || !height || !boxRatio) return width >= height;
+  return width / height >= boxRatio;
+};
 var sliderDiagnosticSource = function sliderDiagnosticSource(source) {
   if (!source) return null;
   return source.startsWith('blob:') ? source : source.split(/[?#]/)[0];
@@ -42724,11 +42731,15 @@ var SliderPopup = function SliderPopup(_ref) {
   var _useState8 = React.useState(),
     messageToDelete = _useState8[0],
     setMessageToDelete = _useState8[1];
+  var _useState9 = React.useState(0),
+    mediaBoxRatio = _useState9[0],
+    setMediaBoxRatio = _useState9[1];
+  var sliderBodyRef = React.useRef(null);
   var attachmentLoadingStateForPopup = useSelector(attachmentForPopupLoadingStateSelector);
   var attachmentsForPopupHasPrev = useSelector(attachmentsForPopupHasPrevSelector);
   var attachmentsForPopupHasNext = useSelector(attachmentsForPopupHasNextSelector);
   var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector) || {};
-  var _useState9 = React.useState(function () {
+  var _useState0 = React.useState(function () {
       if (currentMediaFile.id && currentMediaFile.type === 'image') {
         var imageKey = getAttachmentURLWithVersion(currentMediaFile.url + '_original_image_url');
         if (attachmentUpdatedMap[imageKey]) {
@@ -42738,8 +42749,8 @@ var SliderPopup = function SliderPopup(_ref) {
       }
       return {};
     }),
-    itemsLoadedMap = _useState9[0],
-    setItemsLoadedMap = _useState9[1];
+    itemsLoadedMap = _useState0[0],
+    setItemsLoadedMap = _useState0[1];
   var prefixUrl = React.useMemo(function () {
     return (currentFile === null || currentFile === void 0 ? void 0 : currentFile.type) === 'image' ? '_original_image_url' : (currentFile === null || currentFile === void 0 ? void 0 : currentFile.type) === 'video' ? '_original_video_url' : '';
   }, [currentFile === null || currentFile === void 0 ? void 0 : currentFile.type]);
@@ -43106,6 +43117,29 @@ var SliderPopup = function SliderPopup(_ref) {
       return item.id === currentFile.id;
     });
   }, [currentFile, popupAttachments]);
+  var isCarouselRendered = activeFileIndex >= 0 && popupAttachments.length > 0;
+  React.useLayoutEffect(function () {
+    var sliderBody = sliderBodyRef.current;
+    if (!isCarouselRendered || !sliderBody) return;
+    var updateMediaBoxRatio = function updateMediaBoxRatio() {
+      var item = sliderBody.querySelector('.custom_carousel_item');
+      if (!item || !item.clientWidth || !item.clientHeight) return;
+      setMediaBoxRatio(item.clientWidth / item.clientHeight);
+    };
+    updateMediaBoxRatio();
+    var ResizeObserverCtor = window.ResizeObserver;
+    if (!ResizeObserverCtor) {
+      window.addEventListener('resize', updateMediaBoxRatio);
+      return function () {
+        return window.removeEventListener('resize', updateMediaBoxRatio);
+      };
+    }
+    var resizeObserver = new ResizeObserverCtor(updateMediaBoxRatio);
+    resizeObserver.observe(sliderBody);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [isCarouselRendered]);
   React.useEffect(function () {
     var latestCurrentFile = attachmentsList.find(function (file) {
       return file.id === currentFile.id;
@@ -43195,6 +43229,7 @@ var SliderPopup = function SliderPopup(_ref) {
   }, /*#__PURE__*/React__default.createElement(SvgCancel, {
     color: textOnPrimary
   })))), /*#__PURE__*/React__default.createElement(SliderBody, {
+    ref: sliderBodyRef,
     onClick: handleClicks,
     onMouseDown: function onMouseDown(e) {
       if (e.button === 2) {
@@ -43208,7 +43243,7 @@ var SliderPopup = function SliderPopup(_ref) {
     className: 'upload_cont'
   }, /*#__PURE__*/React__default.createElement(UploadingIcon, {
     color: textOnPrimary
-  }))), activeFileIndex >= 0 && popupAttachments.length > 0 && (/*#__PURE__*/React__default.createElement(Carousel, {
+  }))), isCarouselRendered && (/*#__PURE__*/React__default.createElement(Carousel, {
     pagination: false,
     className: 'custom_carousel',
     initialActiveIndex: activeFileIndex >= 0 ? activeFileIndex : 0,
@@ -43253,9 +43288,8 @@ var SliderPopup = function SliderPopup(_ref) {
     },
     isRTL: false
   }, popupAttachments.map(function (file) {
-    var sizes = getMediaSizes(file);
     return /*#__PURE__*/React__default.createElement(CarouselItem$1, {
-      widthBigThenHeight: sizes.width >= sizes.height,
+      widthBigThenHeight: isMediaWiderThanBox(file, mediaBoxRatio),
       className: 'custom_carousel_item',
       key: file.id,
       draggable: false,

package/index.modern.js

@@ -42661,6 +42661,13 @@ var getMediaSizes = function getMediaSizes(file) {
     height: (metadata === null || metadata === void 0 ? void 0 : metadata.szh) || 0
   };
 };
+var isMediaWiderThanBox = function isMediaWiderThanBox(file, boxRatio) {
+  var _getMediaSizes = getMediaSizes(file),
+    width = _getMediaSizes.width,
+    height = _getMediaSizes.height;
+  if (!width || !height || !boxRatio) return width >= height;
+  return width / height >= boxRatio;
+};
 var sliderDiagnosticSource = function sliderDiagnosticSource(source) {
   if (!source) return null;
   return source.startsWith('blob:') ? source : source.split(/[?#]/)[0];
@@ -42704,11 +42711,15 @@ var SliderPopup = function SliderPopup(_ref) {
   var _useState8 = useState(),
     messageToDelete = _useState8[0],
     setMessageToDelete = _useState8[1];
+  var _useState9 = useState(0),
+    mediaBoxRatio = _useState9[0],
+    setMediaBoxRatio = _useState9[1];
+  var sliderBodyRef = useRef(null);
   var attachmentLoadingStateForPopup = useSelector(attachmentForPopupLoadingStateSelector);
   var attachmentsForPopupHasPrev = useSelector(attachmentsForPopupHasPrevSelector);
   var attachmentsForPopupHasNext = useSelector(attachmentsForPopupHasNextSelector);
   var attachmentUpdatedMap = useSelector(attachmentUpdatedMapSelector) || {};
-  var _useState9 = useState(function () {
+  var _useState0 = useState(function () {
       if (currentMediaFile.id && currentMediaFile.type === 'image') {
         var imageKey = getAttachmentURLWithVersion(currentMediaFile.url + '_original_image_url');
         if (attachmentUpdatedMap[imageKey]) {
@@ -42718,8 +42729,8 @@ var SliderPopup = function SliderPopup(_ref) {
       }
       return {};
     }),
-    itemsLoadedMap = _useState9[0],
-    setItemsLoadedMap = _useState9[1];
+    itemsLoadedMap = _useState0[0],
+    setItemsLoadedMap = _useState0[1];
   var prefixUrl = useMemo(function () {
     return (currentFile === null || currentFile === void 0 ? void 0 : currentFile.type) === 'image' ? '_original_image_url' : (currentFile === null || currentFile === void 0 ? void 0 : currentFile.type) === 'video' ? '_original_video_url' : '';
   }, [currentFile === null || currentFile === void 0 ? void 0 : currentFile.type]);
@@ -43086,6 +43097,29 @@ var SliderPopup = function SliderPopup(_ref) {
       return item.id === currentFile.id;
     });
   }, [currentFile, popupAttachments]);
+  var isCarouselRendered = activeFileIndex >= 0 && popupAttachments.length > 0;
+  useLayoutEffect(function () {
+    var sliderBody = sliderBodyRef.current;
+    if (!isCarouselRendered || !sliderBody) return;
+    var updateMediaBoxRatio = function updateMediaBoxRatio() {
+      var item = sliderBody.querySelector('.custom_carousel_item');
+      if (!item || !item.clientWidth || !item.clientHeight) return;
+      setMediaBoxRatio(item.clientWidth / item.clientHeight);
+    };
+    updateMediaBoxRatio();
+    var ResizeObserverCtor = window.ResizeObserver;
+    if (!ResizeObserverCtor) {
+      window.addEventListener('resize', updateMediaBoxRatio);
+      return function () {
+        return window.removeEventListener('resize', updateMediaBoxRatio);
+      };
+    }
+    var resizeObserver = new ResizeObserverCtor(updateMediaBoxRatio);
+    resizeObserver.observe(sliderBody);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [isCarouselRendered]);
   useEffect(function () {
     var latestCurrentFile = attachmentsList.find(function (file) {
       return file.id === currentFile.id;
@@ -43175,6 +43209,7 @@ var SliderPopup = function SliderPopup(_ref) {
   }, /*#__PURE__*/React__default.createElement(SvgCancel, {
     color: textOnPrimary
   })))), /*#__PURE__*/React__default.createElement(SliderBody, {
+    ref: sliderBodyRef,
     onClick: handleClicks,
     onMouseDown: function onMouseDown(e) {
       if (e.button === 2) {
@@ -43188,7 +43223,7 @@ var SliderPopup = function SliderPopup(_ref) {
     className: 'upload_cont'
   }, /*#__PURE__*/React__default.createElement(UploadingIcon, {
     color: textOnPrimary
-  }))), activeFileIndex >= 0 && popupAttachments.length > 0 && (/*#__PURE__*/React__default.createElement(Carousel, {
+  }))), isCarouselRendered && (/*#__PURE__*/React__default.createElement(Carousel, {
     pagination: false,
     className: 'custom_carousel',
     initialActiveIndex: activeFileIndex >= 0 ? activeFileIndex : 0,
@@ -43233,9 +43268,8 @@ var SliderPopup = function SliderPopup(_ref) {
     },
     isRTL: false
   }, popupAttachments.map(function (file) {
-    var sizes = getMediaSizes(file);
     return /*#__PURE__*/React__default.createElement(CarouselItem$1, {
-      widthBigThenHeight: sizes.width >= sizes.height,
+      widthBigThenHeight: isMediaWiderThanBox(file, mediaBoxRatio),
       className: 'custom_carousel_item',
       key: file.id,
       draggable: false,

package/package.json

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