sceyt-chat-react-uikit 1.9.0-beta.14 → 1.9.0-beta.15

package/index.js

@@ -42593,7 +42593,7 @@ var SliderPopup = function SliderPopup(_ref) {
   };
   var handleClicks = React.useCallback(function (e) {
     var target = e.target;
-    if (!target.closest('.custom_carousel_item') && !target.closest('.custom_carousel_arrow')) {
+    if (!target.closest('.slider-preview-media, .custom_video_player, .custom_carousel_arrow')) {
       if (currentFileType === 'image') {
         log.info('[MEDIA_IMAGE_SLIDER] outside click closing slider ' + JSON.stringify({
           channelId: channel.id,
@@ -43030,6 +43030,7 @@ 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, ((file.id === (currentFile === null || currentFile === void 0 ? void 0 : currentFile.id) ? currentAttachmentUrl : undefined) || attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')] || getMediaThumbnailSource(file)) && (/*#__PURE__*/React__default.createElement("img", {
+      className: 'slider-preview-media',
       loading: 'eager',
       decoding: 'async',
       draggable: false,
@@ -43144,7 +43145,7 @@ var IconWrapper = styled__default.span(_templateObject10$7 || (_templateObject10
 }, function (props) {
   return props.hideInMobile && "\n    @media (max-width: 550px) {\n      display: none;\n    }\n  ";
 });
-var CarouselItem$1 = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _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 CarouselItem$1 = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _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    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) {
@@ -51080,8 +51081,8 @@ var Message$1 = function Message(_ref) {
   var prevMessageUserID = prevMessage ? getComparableUserId(prevMessage.user) : null;
   var current = moment(message.createdAt).startOf('day');
   var firstMessageInInterval = React.useMemo(function () {
-    return ifLatestAndHasNotPreview || !(prevMessage && current.diff(moment(prevMessage.createdAt).startOf('day'), 'days') === 0) || (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === exports.MESSAGE_TYPE.SYSTEM || unreadMessageId === prevMessage.id;
-  }, [prevMessage, unreadMessageId, ifLatestAndHasNotPreview]);
+    return ifLatestAndHasNotPreview || !isPinnedMessagesList && !(prevMessage && current.diff(moment(prevMessage.createdAt).startOf('day'), 'days') === 0) || (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === exports.MESSAGE_TYPE.SYSTEM || unreadMessageId === (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.id);
+  }, [prevMessage, unreadMessageId, ifLatestAndHasNotPreview, isPinnedMessagesList]);
   var nextMessageUserID = nextMessage ? getComparableUserId(nextMessage.user) : null;
   var nextDay = nextMessage ? moment(nextMessage.createdAt).startOf('day') : null;
   var nextMessageFirstInInterval = !nextMessage || nextDay !== null && nextDay.diff(current, 'days') !== 0 || nextMessage.type === exports.MESSAGE_TYPE.SYSTEM || nextMessageStartsUnreadSection;
@@ -51457,8 +51458,8 @@ var Message$1 = function Message(_ref) {
     if (!nextMessage || nextMessage.type === exports.MESSAGE_TYPE.SYSTEM) {
       spacingBottom = '';
     } else if (nextMessageStartsUnreadSection) {
-      spacingBottom = differentUserMessageSpacing || '16px';
-    } else if (nextMessageUserID && (nextMessageUserID !== messageUserID || nextMessageFirstInInterval)) {
+      spacingBottom = isPinnedMessagesList ? '0' : differentUserMessageSpacing || '16px';
+    } else if (nextMessageUserID && (nextMessageUserID !== messageUserID || nextMessageFirstInInterval && !isPinnedMessagesList)) {
       spacingBottom = differentUserMessageSpacing || '16px';
     }
     spacingTop = sameUserMessageSpacing || '6px';
@@ -51471,7 +51472,7 @@ var Message$1 = function Message(_ref) {
       bottom: reactionsMargin || spacingBottom,
       top: spacingTop
     };
-  }, [nextMessageUserID, messageUserID, nextMessageFirstInInterval, (_message$reactionTota = message.reactionTotals) === null || _message$reactionTota === void 0 ? void 0 : _message$reactionTota.length]);
+  }, [nextMessageUserID, isPinnedMessagesList, messageUserID, nextMessageFirstInInterval, (_message$reactionTota = message.reactionTotals) === null || _message$reactionTota === void 0 ? void 0 : _message$reactionTota.length]);
   return /*#__PURE__*/React__default.createElement(MessageItem, {
     className: 'message_item',
     rtl: ownMessageOnRightSide && !message.incoming,
@@ -52957,7 +52958,7 @@ var MessageList = function MessageList(_ref) {
         isUnreadMessage: false,
         nextMessageStartsUnreadSection: false,
         isHighlighted: false,
-        ifLatestAndHasNotPreview: channel.type !== DEFAULT_CHANNEL_TYPE.DIRECT,
+        ifLatestAndHasNotPreview: index === 0,
         registerInMessagesIndex: false,
         isPinnedMessagesList: true
       });

package/index.modern.js

@@ -42573,7 +42573,7 @@ var SliderPopup = function SliderPopup(_ref) {
   };
   var handleClicks = useCallback(function (e) {
     var target = e.target;
-    if (!target.closest('.custom_carousel_item') && !target.closest('.custom_carousel_arrow')) {
+    if (!target.closest('.slider-preview-media, .custom_video_player, .custom_carousel_arrow')) {
       if (currentFileType === 'image') {
         log.info('[MEDIA_IMAGE_SLIDER] outside click closing slider ' + JSON.stringify({
           channelId: channel.id,
@@ -43010,6 +43010,7 @@ 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, ((file.id === (currentFile === null || currentFile === void 0 ? void 0 : currentFile.id) ? currentAttachmentUrl : undefined) || attachmentUpdatedMap[getAttachmentURLWithVersion(file.url + '_original_image_url')] || getMediaThumbnailSource(file)) && (/*#__PURE__*/React__default.createElement("img", {
+      className: 'slider-preview-media',
       loading: 'eager',
       decoding: 'async',
       draggable: false,
@@ -43124,7 +43125,7 @@ var IconWrapper = styled.span(_templateObject10$7 || (_templateObject10$7 = _tag
 }, function (props) {
   return props.hideInMobile && "\n    @media (max-width: 550px) {\n      display: none;\n    }\n  ";
 });
-var CarouselItem$1 = styled.div(_templateObject11$6 || (_templateObject11$6 = _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 CarouselItem$1 = styled.div(_templateObject11$6 || (_templateObject11$6 = _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    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) {
@@ -51060,8 +51061,8 @@ var Message$1 = function Message(_ref) {
   var prevMessageUserID = prevMessage ? getComparableUserId(prevMessage.user) : null;
   var current = moment(message.createdAt).startOf('day');
   var firstMessageInInterval = useMemo(function () {
-    return ifLatestAndHasNotPreview || !(prevMessage && current.diff(moment(prevMessage.createdAt).startOf('day'), 'days') === 0) || (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === MESSAGE_TYPE.SYSTEM || unreadMessageId === prevMessage.id;
-  }, [prevMessage, unreadMessageId, ifLatestAndHasNotPreview]);
+    return ifLatestAndHasNotPreview || !isPinnedMessagesList && !(prevMessage && current.diff(moment(prevMessage.createdAt).startOf('day'), 'days') === 0) || (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === MESSAGE_TYPE.SYSTEM || unreadMessageId === (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.id);
+  }, [prevMessage, unreadMessageId, ifLatestAndHasNotPreview, isPinnedMessagesList]);
   var nextMessageUserID = nextMessage ? getComparableUserId(nextMessage.user) : null;
   var nextDay = nextMessage ? moment(nextMessage.createdAt).startOf('day') : null;
   var nextMessageFirstInInterval = !nextMessage || nextDay !== null && nextDay.diff(current, 'days') !== 0 || nextMessage.type === MESSAGE_TYPE.SYSTEM || nextMessageStartsUnreadSection;
@@ -51437,8 +51438,8 @@ var Message$1 = function Message(_ref) {
     if (!nextMessage || nextMessage.type === MESSAGE_TYPE.SYSTEM) {
       spacingBottom = '';
     } else if (nextMessageStartsUnreadSection) {
-      spacingBottom = differentUserMessageSpacing || '16px';
-    } else if (nextMessageUserID && (nextMessageUserID !== messageUserID || nextMessageFirstInInterval)) {
+      spacingBottom = isPinnedMessagesList ? '0' : differentUserMessageSpacing || '16px';
+    } else if (nextMessageUserID && (nextMessageUserID !== messageUserID || nextMessageFirstInInterval && !isPinnedMessagesList)) {
       spacingBottom = differentUserMessageSpacing || '16px';
     }
     spacingTop = sameUserMessageSpacing || '6px';
@@ -51451,7 +51452,7 @@ var Message$1 = function Message(_ref) {
       bottom: reactionsMargin || spacingBottom,
       top: spacingTop
     };
-  }, [nextMessageUserID, messageUserID, nextMessageFirstInInterval, (_message$reactionTota = message.reactionTotals) === null || _message$reactionTota === void 0 ? void 0 : _message$reactionTota.length]);
+  }, [nextMessageUserID, isPinnedMessagesList, messageUserID, nextMessageFirstInInterval, (_message$reactionTota = message.reactionTotals) === null || _message$reactionTota === void 0 ? void 0 : _message$reactionTota.length]);
   return /*#__PURE__*/React__default.createElement(MessageItem, {
     className: 'message_item',
     rtl: ownMessageOnRightSide && !message.incoming,
@@ -52937,7 +52938,7 @@ var MessageList = function MessageList(_ref) {
         isUnreadMessage: false,
         nextMessageStartsUnreadSection: false,
         isHighlighted: false,
-        ifLatestAndHasNotPreview: channel.type !== DEFAULT_CHANNEL_TYPE.DIRECT,
+        ifLatestAndHasNotPreview: index === 0,
         registerInMessagesIndex: false,
         isPinnedMessagesList: true
       });

package/package.json

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