sceyt-chat-react-uikit 1.7.6-beta.6 → 1.7.6-beta.8

package/index.js

@@ -9102,15 +9102,6 @@ var query = {
   ReactionsQuery: null,
   PollVotesQueries: {}
 };
-var unreadScrollTo = {
-  isScrolled: true
-};
-function getUnreadScrollTo() {
-  return unreadScrollTo.isScrolled;
-}
-function setUnreadScrollTo(state) {
-  unreadScrollTo.isScrolled = state;
-}
 function getUploadImageIcon() {
   return UploadImageIcon;
 }
@@ -10315,6 +10306,11 @@ function showScrollToNewMessageButtonAC(state) {
     state: state
   });
 }
+function setUnreadScrollToAC(state) {
+  return setUnreadScrollTo({
+    state: state
+  });
+}
 function loadMoreMessagesAC(channelId, limit, direction, messageId, hasNext) {
   return {
     type: LOAD_MORE_MESSAGES,
@@ -10647,6 +10643,51 @@ var MESSAGE_LOAD_DIRECTION = {
   PREV: 'prev',
   NEXT: 'next'
 };
+var shouldSkipDeliveryStatusUpdate = function shouldSkipDeliveryStatusUpdate(markerName, currentDeliveryStatus) {
+  if (markerName === MESSAGE_DELIVERY_STATUS.SENT && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.DELIVERED && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.READ && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.PLAYED && currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED) {
+    return true;
+  }
+  return false;
+};
+var updateMessageDeliveryStatusAndMarkers = function updateMessageDeliveryStatusAndMarkers(message, markerName) {
+  var _message$markerTotals;
+  if (shouldSkipDeliveryStatusUpdate(markerName, message.deliveryStatus)) {
+    return {
+      markerTotals: message.markerTotals,
+      deliveryStatus: message.deliveryStatus
+    };
+  }
+  var markerInMarkersTotal = message === null || message === void 0 ? void 0 : (_message$markerTotals = message.markerTotals) === null || _message$markerTotals === void 0 ? void 0 : _message$markerTotals.find(function (marker) {
+    return marker.name === markerName;
+  });
+  if (!markerInMarkersTotal) {
+    return {
+      markerTotals: [].concat(message.markerTotals || [], [{
+        name: markerName,
+        count: 1
+      }]),
+      deliveryStatus: markerName
+    };
+  } else {
+    return {
+      markerTotals: message.markerTotals.map(function (marker) {
+        return marker.name === markerName ? _extends({}, marker, {
+          count: marker.count + 1
+        }) : marker;
+      }),
+      deliveryStatus: markerName
+    };
+  }
+};
 var sendMessageHandler;
 var setSendMessageHandler = function setSendMessageHandler(handler) {
   sendMessageHandler = handler;
@@ -10678,7 +10719,8 @@ var updateMessageOnAllMessages = function updateMessageOnAllMessages(messageId,
       if (updatedParams.state === MESSAGE_STATUS.DELETE) {
         return _extends({}, updatedParams);
       }
-      var updatedMessage = _extends({}, message, updatedParams);
+      var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, updatedParams.deliveryStatus);
+      var updatedMessage = _extends({}, message, updatedParams, statusUpdatedMessage);
       if (voteDetails) {
         updatedMessage = _extends({}, updatedMessage, {
           pollDetails: handleVoteDetails(voteDetails, updatedMessage)
@@ -10689,6 +10731,15 @@ var updateMessageOnAllMessages = function updateMessageOnAllMessages(messageId,
     return message;
   });
 };
+var updateMessageStatusOnAllMessages = function updateMessageStatusOnAllMessages(name, markersMap) {
+  activeChannelAllMessages = activeChannelAllMessages.map(function (message) {
+    if (markersMap[message.id]) {
+      var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, name);
+      return _extends({}, message, statusUpdatedMessage);
+    }
+    return message;
+  });
+};
 var removeMessageFromAllMessages = function removeMessageFromAllMessages(messageId) {
   activeChannelAllMessages = [].concat(activeChannelAllMessages).filter(function (msg) {
     return !(msg.id === messageId || msg.tid === messageId);
@@ -10696,12 +10747,11 @@ var removeMessageFromAllMessages = function removeMessageFromAllMessages(message
 };
 var updateMarkersOnAllMessages = function updateMarkersOnAllMessages(markersMap, name) {
   activeChannelAllMessages = activeChannelAllMessages.map(function (message) {
-    if (markersMap[message.id] && (message.deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || name === MESSAGE_DELIVERY_STATUS.READ)) {
-      return _extends({}, message, {
-        deliveryStatus: name
-      });
+    if (!markersMap[message.id]) {
+      return message;
     }
-    return message;
+    var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, name);
+    return _extends({}, message, statusUpdatedMessage);
   });
 };
 var getAllMessages = function getAllMessages() {
@@ -10779,7 +10829,8 @@ function updateMessageOnMap(channelId, updatedMessage, voteDetails) {
       var _pendingMessagesMap$c;
       var updatedPendingMessages = (_pendingMessagesMap$c = pendingMessagesMap[channelId]) === null || _pendingMessagesMap$c === void 0 ? void 0 : _pendingMessagesMap$c.map(function (msg) {
         if (msg.tid === updatedMessage.messageId) {
-          return _extends({}, msg, updatedMessage.params);
+          var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(msg, updatedMessage.params.deliveryStatus);
+          return _extends({}, msg, updatedMessage.params, statusUpdatedMessage);
         }
         return msg;
       });
@@ -10801,7 +10852,8 @@ function updateMessageOnMap(channelId, updatedMessage, voteDetails) {
           messagesList.push(_extends({}, mes, updatedMessageData));
           continue;
         } else {
-          updatedMessageData = _extends({}, mes, updatedMessage.params);
+          var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(mes, updatedMessage.params.deliveryStatus);
+          updatedMessageData = _extends({}, mes, updatedMessage.params, statusUpdatedMessage);
           var voteDetailsData = void 0;
           if (voteDetails) {
             voteDetailsData = handleVoteDetails(voteDetails, updatedMessageData);
@@ -10900,12 +10952,11 @@ function updateMessageStatusOnMap(channelId, newMarkers) {
     messagesMap[channelId] = messagesMap[channelId].map(function (mes) {
       var name = newMarkers.name;
       var markersMap = newMarkers.markersMap;
-      if (markersMap[mes.id] && (mes.deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || name === MESSAGE_DELIVERY_STATUS.READ)) {
-        return _extends({}, mes, {
-          deliveryStatus: name
-        });
+      if (!markersMap[mes.id]) {
+        return mes;
       }
-      return mes;
+      var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(mes, name);
+      return _extends({}, mes, statusUpdatedMessage);
     });
   }
 }
@@ -11126,7 +11177,8 @@ var initialState$1 = {
   pollVotesLoadingState: {},
   pollVotesInitialCount: null,
   pendingPollActions: {},
-  pendingMessagesMap: {}
+  pendingMessagesMap: {},
+  unreadScrollTo: true
 };
 var messageSlice = createSlice({
   name: 'messages',
@@ -11160,6 +11212,9 @@ var messageSlice = createSlice({
     setShowScrollToNewMessageButton: function setShowScrollToNewMessageButton(state, action) {
       state.showScrollToNewMessageButton = action.payload.state;
     },
+    setUnreadScrollTo: function setUnreadScrollTo(state, action) {
+      state.unreadScrollTo = action.payload.state;
+    },
     setMessages: function setMessages(state, action) {
       state.activeChannelMessages = action.payload.messages;
     },
@@ -11220,17 +11275,18 @@ var messageSlice = createSlice({
         markersMap = _action$payload2.markersMap;
       var markerName = name;
       for (var index = 0; index < state.activeChannelMessages.length; index++) {
-        if (markerName === MESSAGE_DELIVERY_STATUS.DELIVERED && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.READ || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
-          continue;
-        }
-        if (markerName === MESSAGE_DELIVERY_STATUS.READ && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.READ || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
-          continue;
-        }
-        if (markerName === MESSAGE_DELIVERY_STATUS.PLAYED && state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED) {
+        if (!markersMap[state.activeChannelMessages[index].id]) {
           continue;
         }
-        if (markersMap[state.activeChannelMessages[index].id] && state.activeChannelMessages[index].state !== 'Deleted') {
-          state.activeChannelMessages[index].deliveryStatus = markerName;
+        if (state.activeChannelMessages[index].state !== 'Deleted') {
+          var message = state.activeChannelMessages[index];
+          var _updateMessageDeliver = updateMessageDeliveryStatusAndMarkers(message, markerName),
+            markerTotals = _updateMessageDeliver.markerTotals,
+            deliveryStatus = _updateMessageDeliver.deliveryStatus;
+          state.activeChannelMessages[index] = _extends({}, message, {
+            markerTotals: markerTotals,
+            deliveryStatus: deliveryStatus
+          });
         }
       }
     },
@@ -11247,10 +11303,15 @@ var messageSlice = createSlice({
           if (params.state === MESSAGE_STATUS.DELETE) {
             return _extends({}, params);
           } else {
-            var messageData = _extends({}, message, params);
+            var statusUpdatedMessage = null;
+            if (params !== null && params !== void 0 && params.deliveryStatus) {
+              statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, params.deliveryStatus);
+            }
+            var messageOldData = _extends({}, message, params, statusUpdatedMessage);
+            var messageData = _extends({}, messageOldData);
             if (voteDetails) {
-              messageData = _extends({}, messageData, {
-                pollDetails: handleVoteDetails(voteDetails, messageData)
+              messageData = _extends({}, messageOldData, {
+                pollDetails: handleVoteDetails(voteDetails, messageOldData)
               });
             }
             if (messageData.deliveryStatus !== MESSAGE_DELIVERY_STATUS.PENDING) {
@@ -11694,6 +11755,7 @@ var _messageSlice$actions = messageSlice.actions,
   setScrollToMentionedMessage = _messageSlice$actions.setScrollToMentionedMessage,
   setScrollToNewMessage = _messageSlice$actions.setScrollToNewMessage,
   setShowScrollToNewMessageButton = _messageSlice$actions.setShowScrollToNewMessageButton,
+  setUnreadScrollTo = _messageSlice$actions.setUnreadScrollTo,
   setMessages = _messageSlice$actions.setMessages,
   addMessages = _messageSlice$actions.addMessages,
   updateMessagesStatus = _messageSlice$actions.updateMessagesStatus,
@@ -14787,9 +14849,7 @@ function watchForEvents() {
                 _context2.n = 58;
                 return effects.put(scrollToNewMessageAC(true, false, true));
               case 58:
-                if (getMessagesFromMap(_channel5.id) && getMessagesFromMap(_channel5.id).length) {
-                  addMessageToMap(_channel5.id, message);
-                }
+                addMessageToMap(_channel5.id, message);
                 _context2.n = 59;
                 return effects.put(updateChannelDataAC(_channel5.id, {
                   messageCount: channelForAdd.messageCount,
@@ -14989,6 +15049,7 @@ function watchForEvents() {
                   name: markerList.name,
                   markersMap: markersMap
                 });
+                updateMessageStatusOnAllMessages(markerList.name, markersMap);
                 _context2.n = 77;
                 return effects.put(updateMessagesMarkersAC(channelId, markerList.name, markerList));
               case 77:
@@ -16857,7 +16918,7 @@ function switchChannel(action) {
         }
         currentActiveChannel = getChannelFromMap(getActiveChannelId());
         _context10.n = 11;
-        return effects.call(setUnreadScrollTo, true);
+        return effects.put(setUnreadScrollToAC(true));
       case 11:
         _context10.n = 12;
         return effects.call(setActiveChannelId, channel && channel.id);
@@ -18501,6 +18562,9 @@ var pendingPollActionsSelector = function pendingPollActionsSelector(store) {
 var pendingMessagesMapSelector = function pendingMessagesMapSelector(store) {
   return store.MessageReducer.pendingMessagesMap;
 };
+var unreadScrollToSelector = function unreadScrollToSelector(store) {
+  return store.MessageReducer.unreadScrollTo;
+};
 
 var getFrame = function getFrame(videoSrc, time) {
   try {
@@ -19222,15 +19286,12 @@ function sendTextMessage(action) {
         throw new Error('Connection required to send message');
       case 17:
         _context4.n = 18;
-        return effects.put(getMessagesAC(channel, true, channel.lastMessage.id, undefined, undefined, false));
-      case 18:
-        _context4.n = 19;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 19:
-        _context4.n = 22;
+      case 18:
+        _context4.n = 21;
         break;
-      case 20:
-        _context4.p = 20;
+      case 19:
+        _context4.p = 19;
         _t3 = _context4.v;
         log.error('error on send text message ... ', _t3);
         updateMessageOnMap(channel.id, {
@@ -19240,23 +19301,23 @@ function sendTextMessage(action) {
           }
         });
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 21;
+          _context4.n = 20;
           break;
         }
         updateMessageOnAllMessages(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context4.n = 21;
+        _context4.n = 20;
         return effects.put(updateMessageAC(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 21:
-        _context4.n = 22;
+      case 20:
+        _context4.n = 21;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 22:
+      case 21:
         return _context4.a(2);
     }
-  }, _marked2$2, null, [[3, 20]]);
+  }, _marked2$2, null, [[3, 19]]);
 }
 function forwardMessage(action) {
   var payload, message, channelId, connectionState, isForward, channel, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, pollDetails, messageToSend, pendingMessage, activeChannelId, isCachedChannel, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t4;
@@ -19928,7 +19989,7 @@ function editMessage(action) {
   }, _marked6$1, null, [[0, 5]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, updatedMessages, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _Object$values, previousAllMessages, _secondResult4, updatedMessages, lastMessageId, _allMessages2, setMappedAllMessages, allMessagesAfterLastMessage, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
   return _regenerator().w(function (_context9) {
     while (1) switch (_context9.p = _context9.n) {
       case 0:
@@ -20172,6 +20233,7 @@ function getMessagesQuery(action) {
         _context9.n = 46;
         break;
       case 39:
+        previousAllMessages = getAllMessages();
         setMessagesToMap(channel.id, []);
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
@@ -20209,13 +20271,26 @@ function getMessagesQuery(action) {
           updateMessageOnAllMessages(msg.id, updatedMessage || msg);
           updatedMessages.push(updatedMessage || msg);
         });
+        lastMessageId = updatedMessages[updatedMessages.length - 1].id;
+        _allMessages2 = getAllMessages();
+        setMappedAllMessages = {};
+        previousAllMessages.forEach(function (msg) {
+          setMappedAllMessages[msg.id] = msg;
+        });
+        _allMessages2.forEach(function (msg) {
+          setMappedAllMessages[msg.id] = msg;
+        });
+        allMessagesAfterLastMessage = (_Object$values = Object.values(setMappedAllMessages)) === null || _Object$values === void 0 ? void 0 : _Object$values.filter(function (msg) {
+          return msg.id > lastMessageId;
+        });
+        updatedMessages = [].concat(updatedMessages, allMessagesAfterLastMessage || []);
         setMessagesToMap(channel.id, updatedMessages);
-        setAllMessages([].concat(updatedMessages));
+        setAllMessages(updatedMessages);
         _context9.n = 44;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
       case 44:
         _context9.n = 45;
-        return effects.put(setMessagesHasPrevAC(result.hasNext));
+        return effects.put(setMessagesHasPrevAC(true));
       case 45:
         _context9.n = 46;
         return effects.put(setMessagesHasNextAC(false));
@@ -23898,7 +23973,7 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
   })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'RM' ? " removed " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
-  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : lastMessage.body === 'JL' ? 'Joined via invite link' : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LastMessageDescription, {
+  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : lastMessage.body === 'JL' ? 'joined via invite link' : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LastMessageDescription, {
     poll: (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.pollDetails) && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) === exports.MESSAGE_TYPE.POLL
   }, channel.lastReactedMessage && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Reacted", /*#__PURE__*/React__default.createElement(ReactionItem, null, channel.newReactions && channel.newReactions[0] && channel.newReactions[0].key), "to", ' "')), LastMessageAttachments({
     lastMessage: lastMessage
@@ -30168,7 +30243,7 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
     preload: 'auto',
     id: 'video',
     src: file.attachmentUrl || videoUrl
-  }), videoCurrentTime && !isRepliedMessage && (/*#__PURE__*/React__default.createElement(VideoControls, null, !isPreview && !!videoCurrentTime && !isRepliedMessage && !uploading && !isDetailsView && (
+  }), videoCurrentTime && !isRepliedMessage && (!isDetailsView || !loading) && (/*#__PURE__*/React__default.createElement(VideoControls, null, !isPreview && !!videoCurrentTime && !isRepliedMessage && !uploading && !isDetailsView && (
   /*#__PURE__*/
   React__default.createElement(VideoPlayButton, null, /*#__PURE__*/React__default.createElement(SvgPlayVideo, null))), /*#__PURE__*/React__default.createElement(VideoTime, {
     isDetailsView: isDetailsView,
@@ -36454,6 +36529,7 @@ var Message$1 = function Message(_ref) {
     reactionsPopupHorizontalPosition = _useState10[0],
     setReactionsPopupHorizontalPosition = _useState10[1];
   var scrollToNewMessage = useSelector(scrollToNewMessageSelector, reactRedux.shallowEqual);
+  var unreadScrollTo = useSelector(unreadScrollToSelector, reactRedux.shallowEqual);
   var messageItemRef = React.useRef();
   var isVisible = useOnScreen(messageItemRef);
   var reactionsCount = message.reactionTotals && message.reactionTotals.reduce(function (prevValue, currentValue) {
@@ -36612,13 +36688,13 @@ var Message$1 = function Message(_ref) {
     })) {
       if (message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
         return marker.name === MESSAGE_DELIVERY_STATUS.READ;
-      }) && message.incoming) {
+      }) && message.incoming && !unreadScrollTo) {
         dispatch(markMessagesAsDeliveredAC(channel.id, [message.id]));
       }
     }
     if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
       return marker.name === MESSAGE_DELIVERY_STATUS.READ;
-    })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
+    })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED && !unreadScrollTo) {
       dispatch(markMessagesAsReadAC(channel.id, [message.id]));
     }
   };
@@ -36658,7 +36734,7 @@ var Message$1 = function Message(_ref) {
     }
   };
   React.useEffect(function () {
-    if (isVisible) {
+    if (isVisible && !unreadScrollTo) {
       var _channel$lastMessage;
       if (setLastVisibleMessageId) {
         setLastVisibleMessageId(message.id);
@@ -36676,7 +36752,7 @@ var Message$1 = function Message(_ref) {
         removeMessageFromVisibleMessagesMap(message);
       }
     }
-  }, [isVisible]);
+  }, [isVisible, unreadScrollTo]);
   useDidUpdate(function () {
     if (tabIsActive) {
       handleSendReadMarker();
@@ -37356,6 +37432,9 @@ var MessageList = function MessageList(_ref2) {
   var dispatch = useDispatch();
   var theme = useSelector(themeSelector);
   var channel = useSelector(activeChannelSelector);
+  var _useState = React.useState(false),
+    scrollIntoView = _useState[0],
+    setScrollIntoView = _useState[1];
   var contactsMap = useSelector(contactsMapSelector, reactRedux.shallowEqual);
   var connectionStatus = useSelector(connectionStatusSelector, reactRedux.shallowEqual);
   var openedMessageMenuId = useSelector(openedMessageMenuSelector, reactRedux.shallowEqual);
@@ -37374,43 +37453,44 @@ var MessageList = function MessageList(_ref2) {
   var pollPendingPollActions = useSelector(pendingPollActionsSelector, reactRedux.shallowEqual);
   var pendingMessagesMap = useSelector(pendingMessagesMapSelector, reactRedux.shallowEqual);
   var showScrollToNewMessageButton = useSelector(showScrollToNewMessageButtonSelector, reactRedux.shallowEqual);
+  var unreadScrollTo = useSelector(unreadScrollToSelector, reactRedux.shallowEqual);
   var messages = useSelector(activeChannelMessagesSelector, reactRedux.shallowEqual) || [];
-  var _useState = React.useState(''),
-    unreadMessageId = _useState[0],
-    setUnreadMessageId = _useState[1];
-  var _useState2 = React.useState(null),
-    mediaFile = _useState2[0],
-    setMediaFile = _useState2[1];
+  var _useState2 = React.useState(''),
+    unreadMessageId = _useState2[0],
+    setUnreadMessageId = _useState2[1];
   var _useState3 = React.useState(null),
-    isDragging = _useState3[0],
-    setIsDragging = _useState3[1];
+    mediaFile = _useState3[0],
+    setMediaFile = _useState3[1];
   var _useState4 = React.useState(null),
-    showTopDate = _useState4[0],
-    setShowTopDate = _useState4[1];
-  var _useState5 = React.useState(false),
-    stopScrolling = _useState5[0],
-    setStopScrolling = _useState5[1];
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var _useState5 = React.useState(null),
+    showTopDate = _useState5[0],
+    setShowTopDate = _useState5[1];
   var _useState6 = React.useState(false),
-    isScrolling = _useState6[0],
-    setIsScrolling = _useState6[1];
+    stopScrolling = _useState6[0],
+    setStopScrolling = _useState6[1];
+  var _useState7 = React.useState(false),
+    isScrolling = _useState7[0],
+    setIsScrolling = _useState7[1];
   var hideTopDateTimeout = React.useRef(null);
-  var _useState7 = React.useState(''),
-    lastVisibleMessageId = _useState7[0],
-    _setLastVisibleMessageId = _useState7[1];
-  var _useState8 = React.useState(null),
-    scrollToReply = _useState8[0],
-    setScrollToReply = _useState8[1];
-  var _useState9 = React.useState(0),
-    previousScrollTop = _useState9[0],
-    setPreviousScrollTop = _useState9[1];
-  var _useState0 = React.useState(false),
-    shouldPreserveScroll = _useState0[0],
-    setShouldPreserveScroll = _useState0[1];
+  var _useState8 = React.useState(''),
+    lastVisibleMessageId = _useState8[0],
+    _setLastVisibleMessageId = _useState8[1];
+  var _useState9 = React.useState(null),
+    scrollToReply = _useState9[0],
+    setScrollToReply = _useState9[1];
+  var _useState0 = React.useState(0),
+    previousScrollTop = _useState0[0],
+    setPreviousScrollTop = _useState0[1];
+  var _useState1 = React.useState(false),
+    shouldPreserveScroll = _useState1[0],
+    setShouldPreserveScroll = _useState1[1];
   var messageForReply = {};
   var attachmentsSelected = false;
-  var _useState1 = React.useState(''),
-    topDateLabel = _useState1[0],
-    setTopDateLabel = _useState1[1];
+  var _useState10 = React.useState(''),
+    topDateLabel = _useState10[0],
+    setTopDateLabel = _useState10[1];
   var scrollRef = React.useRef(null);
   var loadFromServerRef = React.useRef(false);
   var loadDirectionRef = React.useRef('');
@@ -37899,6 +37979,8 @@ var MessageList = function MessageList(_ref2) {
     };
   }, [messagesLoading, messages, lastVisibleMessageId]);
   React.useEffect(function () {
+    var interval = null;
+    log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
       Object.keys(pendingMessagesMap).forEach(function (key) {
         pendingMessagesMap[key].forEach(function (msg) {
@@ -37908,37 +37990,49 @@ var MessageList = function MessageList(_ref2) {
       if (Object.keys(pollPendingPollActions).length > 0) {
         dispatch(resendPendingPollActionsAC(connectionStatus));
       }
+      var count = 0;
+      interval = setInterval(function () {
+        if (count > 20) {
+          clearInterval(interval);
+        }
+        count++;
+        if (channel.id && Object.keys(pollPendingPollActions).length === 0 && Object.keys(pendingMessagesMap).length === 0) {
+          clearInterval(interval);
+          loadingRef.current = false;
+          prevDisableRef.current = false;
+          nextDisableRef.current = false;
+          clearMessagesMap();
+          removeAllMessages();
+          dispatch(getMessagesAC(channel));
+        }
+      }, 100);
     }
-  }, [connectionStatus]);
-  React.useEffect(function () {
-    log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
-    if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      if (channel.id && Object.keys(pollPendingPollActions).length === 0 && Object.keys(pendingMessagesMap).length === 0) {
-        loadingRef.current = false;
-        prevDisableRef.current = false;
-        nextDisableRef.current = false;
-        clearMessagesMap();
-        removeAllMessages();
-        dispatch(getMessagesAC(channel));
+    return function () {
+      if (interval) {
+        clearInterval(interval);
       }
-    }
-  }, [connectionStatus, pollPendingPollActions, pendingMessagesMap]);
+    };
+  }, [connectionStatus]);
   React.useEffect(function () {
-    var unreadScrollTo = getUnreadScrollTo();
     if (channel.newMessageCount && channel.newMessageCount > 0 && unreadScrollTo) {
-      if (scrollRef.current) {
-        scrollRef.current.style.scrollBehavior = 'inherit';
+      var scrollElement = document.getElementById('scrollableDiv');
+      if (scrollElement) {
+        scrollElement.style.scrollBehavior = 'inherit';
       }
+      setScrollIntoView(true);
       var lastReadMessageNode = document.getElementById(channel.lastDisplayedMessageId);
-      if (lastReadMessageNode) {
-        scrollRef.current.scrollTop = lastReadMessageNode.offsetTop;
-        if (scrollRef.current) {
-          scrollRef.current.style.scrollBehavior = 'smooth';
-        }
-        setUnreadScrollTo(false);
+      if (lastReadMessageNode && scrollElement) {
+        scrollElement.scrollTo({
+          top: lastReadMessageNode.offsetTop - 200,
+          behavior: 'auto'
+        });
+        setTimeout(function () {
+          dispatch(setUnreadScrollToAC(false));
+          setScrollIntoView(false);
+        }, 100);
       }
     }
-  }, [channel.id, channel.newMessageCount, channel.lastDisplayedMessageId]);
+  }, [channel.id, channel.newMessageCount, scrollRef.current, unreadScrollTo, channel.lastDisplayedMessageId, scrollIntoView, messages.length]);
   React.useEffect(function () {
     return function () {
       if (hideTopDateTimeout.current) {
@@ -44981,7 +45075,7 @@ var Media = function Media(_ref) {
   })));
 };
 var Container$o = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  padding: 6px 4px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n"])));
-var MediaItem = styled__default.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  height: 110px;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
+var MediaItem = styled__default.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
 
 var _rect$3, _path$1u;
 function _extends$1y() {

package/index.modern.js

@@ -9101,15 +9101,6 @@ var query = {
   ReactionsQuery: null,
   PollVotesQueries: {}
 };
-var unreadScrollTo = {
-  isScrolled: true
-};
-function getUnreadScrollTo() {
-  return unreadScrollTo.isScrolled;
-}
-function setUnreadScrollTo(state) {
-  unreadScrollTo.isScrolled = state;
-}
 function getUploadImageIcon() {
   return UploadImageIcon;
 }
@@ -10314,6 +10305,11 @@ function showScrollToNewMessageButtonAC(state) {
     state: state
   });
 }
+function setUnreadScrollToAC(state) {
+  return setUnreadScrollTo({
+    state: state
+  });
+}
 function loadMoreMessagesAC(channelId, limit, direction, messageId, hasNext) {
   return {
     type: LOAD_MORE_MESSAGES,
@@ -10646,6 +10642,51 @@ var MESSAGE_LOAD_DIRECTION = {
   PREV: 'prev',
   NEXT: 'next'
 };
+var shouldSkipDeliveryStatusUpdate = function shouldSkipDeliveryStatusUpdate(markerName, currentDeliveryStatus) {
+  if (markerName === MESSAGE_DELIVERY_STATUS.SENT && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.DELIVERED && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.READ && (currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.READ || currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
+    return true;
+  }
+  if (markerName === MESSAGE_DELIVERY_STATUS.PLAYED && currentDeliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED) {
+    return true;
+  }
+  return false;
+};
+var updateMessageDeliveryStatusAndMarkers = function updateMessageDeliveryStatusAndMarkers(message, markerName) {
+  var _message$markerTotals;
+  if (shouldSkipDeliveryStatusUpdate(markerName, message.deliveryStatus)) {
+    return {
+      markerTotals: message.markerTotals,
+      deliveryStatus: message.deliveryStatus
+    };
+  }
+  var markerInMarkersTotal = message === null || message === void 0 ? void 0 : (_message$markerTotals = message.markerTotals) === null || _message$markerTotals === void 0 ? void 0 : _message$markerTotals.find(function (marker) {
+    return marker.name === markerName;
+  });
+  if (!markerInMarkersTotal) {
+    return {
+      markerTotals: [].concat(message.markerTotals || [], [{
+        name: markerName,
+        count: 1
+      }]),
+      deliveryStatus: markerName
+    };
+  } else {
+    return {
+      markerTotals: message.markerTotals.map(function (marker) {
+        return marker.name === markerName ? _extends({}, marker, {
+          count: marker.count + 1
+        }) : marker;
+      }),
+      deliveryStatus: markerName
+    };
+  }
+};
 var sendMessageHandler;
 var setSendMessageHandler = function setSendMessageHandler(handler) {
   sendMessageHandler = handler;
@@ -10677,7 +10718,8 @@ var updateMessageOnAllMessages = function updateMessageOnAllMessages(messageId,
       if (updatedParams.state === MESSAGE_STATUS.DELETE) {
         return _extends({}, updatedParams);
       }
-      var updatedMessage = _extends({}, message, updatedParams);
+      var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, updatedParams.deliveryStatus);
+      var updatedMessage = _extends({}, message, updatedParams, statusUpdatedMessage);
       if (voteDetails) {
         updatedMessage = _extends({}, updatedMessage, {
           pollDetails: handleVoteDetails(voteDetails, updatedMessage)
@@ -10688,6 +10730,15 @@ var updateMessageOnAllMessages = function updateMessageOnAllMessages(messageId,
     return message;
   });
 };
+var updateMessageStatusOnAllMessages = function updateMessageStatusOnAllMessages(name, markersMap) {
+  activeChannelAllMessages = activeChannelAllMessages.map(function (message) {
+    if (markersMap[message.id]) {
+      var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, name);
+      return _extends({}, message, statusUpdatedMessage);
+    }
+    return message;
+  });
+};
 var removeMessageFromAllMessages = function removeMessageFromAllMessages(messageId) {
   activeChannelAllMessages = [].concat(activeChannelAllMessages).filter(function (msg) {
     return !(msg.id === messageId || msg.tid === messageId);
@@ -10695,12 +10746,11 @@ var removeMessageFromAllMessages = function removeMessageFromAllMessages(message
 };
 var updateMarkersOnAllMessages = function updateMarkersOnAllMessages(markersMap, name) {
   activeChannelAllMessages = activeChannelAllMessages.map(function (message) {
-    if (markersMap[message.id] && (message.deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || name === MESSAGE_DELIVERY_STATUS.READ)) {
-      return _extends({}, message, {
-        deliveryStatus: name
-      });
+    if (!markersMap[message.id]) {
+      return message;
     }
-    return message;
+    var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, name);
+    return _extends({}, message, statusUpdatedMessage);
   });
 };
 var getAllMessages = function getAllMessages() {
@@ -10778,7 +10828,8 @@ function updateMessageOnMap(channelId, updatedMessage, voteDetails) {
       var _pendingMessagesMap$c;
       var updatedPendingMessages = (_pendingMessagesMap$c = pendingMessagesMap[channelId]) === null || _pendingMessagesMap$c === void 0 ? void 0 : _pendingMessagesMap$c.map(function (msg) {
         if (msg.tid === updatedMessage.messageId) {
-          return _extends({}, msg, updatedMessage.params);
+          var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(msg, updatedMessage.params.deliveryStatus);
+          return _extends({}, msg, updatedMessage.params, statusUpdatedMessage);
         }
         return msg;
       });
@@ -10800,7 +10851,8 @@ function updateMessageOnMap(channelId, updatedMessage, voteDetails) {
           messagesList.push(_extends({}, mes, updatedMessageData));
           continue;
         } else {
-          updatedMessageData = _extends({}, mes, updatedMessage.params);
+          var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(mes, updatedMessage.params.deliveryStatus);
+          updatedMessageData = _extends({}, mes, updatedMessage.params, statusUpdatedMessage);
           var voteDetailsData = void 0;
           if (voteDetails) {
             voteDetailsData = handleVoteDetails(voteDetails, updatedMessageData);
@@ -10899,12 +10951,11 @@ function updateMessageStatusOnMap(channelId, newMarkers) {
     messagesMap[channelId] = messagesMap[channelId].map(function (mes) {
       var name = newMarkers.name;
       var markersMap = newMarkers.markersMap;
-      if (markersMap[mes.id] && (mes.deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || name === MESSAGE_DELIVERY_STATUS.READ)) {
-        return _extends({}, mes, {
-          deliveryStatus: name
-        });
+      if (!markersMap[mes.id]) {
+        return mes;
       }
-      return mes;
+      var statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(mes, name);
+      return _extends({}, mes, statusUpdatedMessage);
     });
   }
 }
@@ -11125,7 +11176,8 @@ var initialState$1 = {
   pollVotesLoadingState: {},
   pollVotesInitialCount: null,
   pendingPollActions: {},
-  pendingMessagesMap: {}
+  pendingMessagesMap: {},
+  unreadScrollTo: true
 };
 var messageSlice = createSlice({
   name: 'messages',
@@ -11159,6 +11211,9 @@ var messageSlice = createSlice({
     setShowScrollToNewMessageButton: function setShowScrollToNewMessageButton(state, action) {
       state.showScrollToNewMessageButton = action.payload.state;
     },
+    setUnreadScrollTo: function setUnreadScrollTo(state, action) {
+      state.unreadScrollTo = action.payload.state;
+    },
     setMessages: function setMessages(state, action) {
       state.activeChannelMessages = action.payload.messages;
     },
@@ -11219,17 +11274,18 @@ var messageSlice = createSlice({
         markersMap = _action$payload2.markersMap;
       var markerName = name;
       for (var index = 0; index < state.activeChannelMessages.length; index++) {
-        if (markerName === MESSAGE_DELIVERY_STATUS.DELIVERED && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.READ || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
-          continue;
-        }
-        if (markerName === MESSAGE_DELIVERY_STATUS.READ && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.READ || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
-          continue;
-        }
-        if (markerName === MESSAGE_DELIVERY_STATUS.PLAYED && state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED) {
+        if (!markersMap[state.activeChannelMessages[index].id]) {
           continue;
         }
-        if (markersMap[state.activeChannelMessages[index].id] && state.activeChannelMessages[index].state !== 'Deleted') {
-          state.activeChannelMessages[index].deliveryStatus = markerName;
+        if (state.activeChannelMessages[index].state !== 'Deleted') {
+          var message = state.activeChannelMessages[index];
+          var _updateMessageDeliver = updateMessageDeliveryStatusAndMarkers(message, markerName),
+            markerTotals = _updateMessageDeliver.markerTotals,
+            deliveryStatus = _updateMessageDeliver.deliveryStatus;
+          state.activeChannelMessages[index] = _extends({}, message, {
+            markerTotals: markerTotals,
+            deliveryStatus: deliveryStatus
+          });
         }
       }
     },
@@ -11246,10 +11302,15 @@ var messageSlice = createSlice({
           if (params.state === MESSAGE_STATUS.DELETE) {
             return _extends({}, params);
           } else {
-            var messageData = _extends({}, message, params);
+            var statusUpdatedMessage = null;
+            if (params !== null && params !== void 0 && params.deliveryStatus) {
+              statusUpdatedMessage = updateMessageDeliveryStatusAndMarkers(message, params.deliveryStatus);
+            }
+            var messageOldData = _extends({}, message, params, statusUpdatedMessage);
+            var messageData = _extends({}, messageOldData);
             if (voteDetails) {
-              messageData = _extends({}, messageData, {
-                pollDetails: handleVoteDetails(voteDetails, messageData)
+              messageData = _extends({}, messageOldData, {
+                pollDetails: handleVoteDetails(voteDetails, messageOldData)
               });
             }
             if (messageData.deliveryStatus !== MESSAGE_DELIVERY_STATUS.PENDING) {
@@ -11693,6 +11754,7 @@ var _messageSlice$actions = messageSlice.actions,
   setScrollToMentionedMessage = _messageSlice$actions.setScrollToMentionedMessage,
   setScrollToNewMessage = _messageSlice$actions.setScrollToNewMessage,
   setShowScrollToNewMessageButton = _messageSlice$actions.setShowScrollToNewMessageButton,
+  setUnreadScrollTo = _messageSlice$actions.setUnreadScrollTo,
   setMessages = _messageSlice$actions.setMessages,
   addMessages = _messageSlice$actions.addMessages,
   updateMessagesStatus = _messageSlice$actions.updateMessagesStatus,
@@ -14786,9 +14848,7 @@ function watchForEvents() {
                 _context2.n = 58;
                 return put(scrollToNewMessageAC(true, false, true));
               case 58:
-                if (getMessagesFromMap(_channel5.id) && getMessagesFromMap(_channel5.id).length) {
-                  addMessageToMap(_channel5.id, message);
-                }
+                addMessageToMap(_channel5.id, message);
                 _context2.n = 59;
                 return put(updateChannelDataAC(_channel5.id, {
                   messageCount: channelForAdd.messageCount,
@@ -14988,6 +15048,7 @@ function watchForEvents() {
                   name: markerList.name,
                   markersMap: markersMap
                 });
+                updateMessageStatusOnAllMessages(markerList.name, markersMap);
                 _context2.n = 77;
                 return put(updateMessagesMarkersAC(channelId, markerList.name, markerList));
               case 77:
@@ -16856,7 +16917,7 @@ function switchChannel(action) {
         }
         currentActiveChannel = getChannelFromMap(getActiveChannelId());
         _context10.n = 11;
-        return call(setUnreadScrollTo, true);
+        return put(setUnreadScrollToAC(true));
       case 11:
         _context10.n = 12;
         return call(setActiveChannelId, channel && channel.id);
@@ -18500,6 +18561,9 @@ var pendingPollActionsSelector = function pendingPollActionsSelector(store) {
 var pendingMessagesMapSelector = function pendingMessagesMapSelector(store) {
   return store.MessageReducer.pendingMessagesMap;
 };
+var unreadScrollToSelector = function unreadScrollToSelector(store) {
+  return store.MessageReducer.unreadScrollTo;
+};
 
 var getFrame = function getFrame(videoSrc, time) {
   try {
@@ -19221,15 +19285,12 @@ function sendTextMessage(action) {
         throw new Error('Connection required to send message');
       case 17:
         _context4.n = 18;
-        return put(getMessagesAC(channel, true, channel.lastMessage.id, undefined, undefined, false));
-      case 18:
-        _context4.n = 19;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 19:
-        _context4.n = 22;
+      case 18:
+        _context4.n = 21;
         break;
-      case 20:
-        _context4.p = 20;
+      case 19:
+        _context4.p = 19;
         _t3 = _context4.v;
         log.error('error on send text message ... ', _t3);
         updateMessageOnMap(channel.id, {
@@ -19239,23 +19300,23 @@ function sendTextMessage(action) {
           }
         });
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 21;
+          _context4.n = 20;
           break;
         }
         updateMessageOnAllMessages(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context4.n = 21;
+        _context4.n = 20;
         return put(updateMessageAC(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 21:
-        _context4.n = 22;
+      case 20:
+        _context4.n = 21;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 22:
+      case 21:
         return _context4.a(2);
     }
-  }, _marked2$2, null, [[3, 20]]);
+  }, _marked2$2, null, [[3, 19]]);
 }
 function forwardMessage(action) {
   var payload, message, channelId, connectionState, isForward, channel, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, pollDetails, messageToSend, pendingMessage, activeChannelId, isCachedChannel, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t4;
@@ -19927,7 +19988,7 @@ function editMessage(action) {
   }, _marked6$1, null, [[0, 5]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, updatedMessages, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, behavior, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _Object$values, previousAllMessages, _secondResult4, updatedMessages, lastMessageId, _allMessages2, setMappedAllMessages, allMessagesAfterLastMessage, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
   return _regenerator().w(function (_context9) {
     while (1) switch (_context9.p = _context9.n) {
       case 0:
@@ -20171,6 +20232,7 @@ function getMessagesQuery(action) {
         _context9.n = 46;
         break;
       case 39:
+        previousAllMessages = getAllMessages();
         setMessagesToMap(channel.id, []);
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
@@ -20208,13 +20270,26 @@ function getMessagesQuery(action) {
           updateMessageOnAllMessages(msg.id, updatedMessage || msg);
           updatedMessages.push(updatedMessage || msg);
         });
+        lastMessageId = updatedMessages[updatedMessages.length - 1].id;
+        _allMessages2 = getAllMessages();
+        setMappedAllMessages = {};
+        previousAllMessages.forEach(function (msg) {
+          setMappedAllMessages[msg.id] = msg;
+        });
+        _allMessages2.forEach(function (msg) {
+          setMappedAllMessages[msg.id] = msg;
+        });
+        allMessagesAfterLastMessage = (_Object$values = Object.values(setMappedAllMessages)) === null || _Object$values === void 0 ? void 0 : _Object$values.filter(function (msg) {
+          return msg.id > lastMessageId;
+        });
+        updatedMessages = [].concat(updatedMessages, allMessagesAfterLastMessage || []);
         setMessagesToMap(channel.id, updatedMessages);
-        setAllMessages([].concat(updatedMessages));
+        setAllMessages(updatedMessages);
         _context9.n = 44;
         return put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
       case 44:
         _context9.n = 45;
-        return put(setMessagesHasPrevAC(result.hasNext));
+        return put(setMessagesHasPrevAC(true));
       case 45:
         _context9.n = 46;
         return put(setMessagesHasNextAC(false));
@@ -23897,7 +23972,7 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
   })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'RM' ? " removed " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
-  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : lastMessage.body === 'JL' ? 'Joined via invite link' : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LastMessageDescription, {
+  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : lastMessage.body === 'JL' ? 'joined via invite link' : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LastMessageDescription, {
     poll: (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.pollDetails) && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) === MESSAGE_TYPE.POLL
   }, channel.lastReactedMessage && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Reacted", /*#__PURE__*/React__default.createElement(ReactionItem, null, channel.newReactions && channel.newReactions[0] && channel.newReactions[0].key), "to", ' "')), LastMessageAttachments({
     lastMessage: lastMessage
@@ -30167,7 +30242,7 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
     preload: 'auto',
     id: 'video',
     src: file.attachmentUrl || videoUrl
-  }), videoCurrentTime && !isRepliedMessage && (/*#__PURE__*/React__default.createElement(VideoControls, null, !isPreview && !!videoCurrentTime && !isRepliedMessage && !uploading && !isDetailsView && (
+  }), videoCurrentTime && !isRepliedMessage && (!isDetailsView || !loading) && (/*#__PURE__*/React__default.createElement(VideoControls, null, !isPreview && !!videoCurrentTime && !isRepliedMessage && !uploading && !isDetailsView && (
   /*#__PURE__*/
   React__default.createElement(VideoPlayButton, null, /*#__PURE__*/React__default.createElement(SvgPlayVideo, null))), /*#__PURE__*/React__default.createElement(VideoTime, {
     isDetailsView: isDetailsView,
@@ -36453,6 +36528,7 @@ var Message$1 = function Message(_ref) {
     reactionsPopupHorizontalPosition = _useState10[0],
     setReactionsPopupHorizontalPosition = _useState10[1];
   var scrollToNewMessage = useSelector(scrollToNewMessageSelector, shallowEqual);
+  var unreadScrollTo = useSelector(unreadScrollToSelector, shallowEqual);
   var messageItemRef = useRef();
   var isVisible = useOnScreen(messageItemRef);
   var reactionsCount = message.reactionTotals && message.reactionTotals.reduce(function (prevValue, currentValue) {
@@ -36611,13 +36687,13 @@ var Message$1 = function Message(_ref) {
     })) {
       if (message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
         return marker.name === MESSAGE_DELIVERY_STATUS.READ;
-      }) && message.incoming) {
+      }) && message.incoming && !unreadScrollTo) {
         dispatch(markMessagesAsDeliveredAC(channel.id, [message.id]));
       }
     }
     if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
       return marker.name === MESSAGE_DELIVERY_STATUS.READ;
-    })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
+    })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED && !unreadScrollTo) {
       dispatch(markMessagesAsReadAC(channel.id, [message.id]));
     }
   };
@@ -36657,7 +36733,7 @@ var Message$1 = function Message(_ref) {
     }
   };
   useEffect(function () {
-    if (isVisible) {
+    if (isVisible && !unreadScrollTo) {
       var _channel$lastMessage;
       if (setLastVisibleMessageId) {
         setLastVisibleMessageId(message.id);
@@ -36675,7 +36751,7 @@ var Message$1 = function Message(_ref) {
         removeMessageFromVisibleMessagesMap(message);
       }
     }
-  }, [isVisible]);
+  }, [isVisible, unreadScrollTo]);
   useDidUpdate(function () {
     if (tabIsActive) {
       handleSendReadMarker();
@@ -37355,6 +37431,9 @@ var MessageList = function MessageList(_ref2) {
   var dispatch = useDispatch();
   var theme = useSelector(themeSelector);
   var channel = useSelector(activeChannelSelector);
+  var _useState = useState(false),
+    scrollIntoView = _useState[0],
+    setScrollIntoView = _useState[1];
   var contactsMap = useSelector(contactsMapSelector, shallowEqual);
   var connectionStatus = useSelector(connectionStatusSelector, shallowEqual);
   var openedMessageMenuId = useSelector(openedMessageMenuSelector, shallowEqual);
@@ -37373,43 +37452,44 @@ var MessageList = function MessageList(_ref2) {
   var pollPendingPollActions = useSelector(pendingPollActionsSelector, shallowEqual);
   var pendingMessagesMap = useSelector(pendingMessagesMapSelector, shallowEqual);
   var showScrollToNewMessageButton = useSelector(showScrollToNewMessageButtonSelector, shallowEqual);
+  var unreadScrollTo = useSelector(unreadScrollToSelector, shallowEqual);
   var messages = useSelector(activeChannelMessagesSelector, shallowEqual) || [];
-  var _useState = useState(''),
-    unreadMessageId = _useState[0],
-    setUnreadMessageId = _useState[1];
-  var _useState2 = useState(null),
-    mediaFile = _useState2[0],
-    setMediaFile = _useState2[1];
+  var _useState2 = useState(''),
+    unreadMessageId = _useState2[0],
+    setUnreadMessageId = _useState2[1];
   var _useState3 = useState(null),
-    isDragging = _useState3[0],
-    setIsDragging = _useState3[1];
+    mediaFile = _useState3[0],
+    setMediaFile = _useState3[1];
   var _useState4 = useState(null),
-    showTopDate = _useState4[0],
-    setShowTopDate = _useState4[1];
-  var _useState5 = useState(false),
-    stopScrolling = _useState5[0],
-    setStopScrolling = _useState5[1];
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var _useState5 = useState(null),
+    showTopDate = _useState5[0],
+    setShowTopDate = _useState5[1];
   var _useState6 = useState(false),
-    isScrolling = _useState6[0],
-    setIsScrolling = _useState6[1];
+    stopScrolling = _useState6[0],
+    setStopScrolling = _useState6[1];
+  var _useState7 = useState(false),
+    isScrolling = _useState7[0],
+    setIsScrolling = _useState7[1];
   var hideTopDateTimeout = useRef(null);
-  var _useState7 = useState(''),
-    lastVisibleMessageId = _useState7[0],
-    _setLastVisibleMessageId = _useState7[1];
-  var _useState8 = useState(null),
-    scrollToReply = _useState8[0],
-    setScrollToReply = _useState8[1];
-  var _useState9 = useState(0),
-    previousScrollTop = _useState9[0],
-    setPreviousScrollTop = _useState9[1];
-  var _useState0 = useState(false),
-    shouldPreserveScroll = _useState0[0],
-    setShouldPreserveScroll = _useState0[1];
+  var _useState8 = useState(''),
+    lastVisibleMessageId = _useState8[0],
+    _setLastVisibleMessageId = _useState8[1];
+  var _useState9 = useState(null),
+    scrollToReply = _useState9[0],
+    setScrollToReply = _useState9[1];
+  var _useState0 = useState(0),
+    previousScrollTop = _useState0[0],
+    setPreviousScrollTop = _useState0[1];
+  var _useState1 = useState(false),
+    shouldPreserveScroll = _useState1[0],
+    setShouldPreserveScroll = _useState1[1];
   var messageForReply = {};
   var attachmentsSelected = false;
-  var _useState1 = useState(''),
-    topDateLabel = _useState1[0],
-    setTopDateLabel = _useState1[1];
+  var _useState10 = useState(''),
+    topDateLabel = _useState10[0],
+    setTopDateLabel = _useState10[1];
   var scrollRef = useRef(null);
   var loadFromServerRef = useRef(false);
   var loadDirectionRef = useRef('');
@@ -37898,6 +37978,8 @@ var MessageList = function MessageList(_ref2) {
     };
   }, [messagesLoading, messages, lastVisibleMessageId]);
   useEffect(function () {
+    var interval = null;
+    log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
       Object.keys(pendingMessagesMap).forEach(function (key) {
         pendingMessagesMap[key].forEach(function (msg) {
@@ -37907,37 +37989,49 @@ var MessageList = function MessageList(_ref2) {
       if (Object.keys(pollPendingPollActions).length > 0) {
         dispatch(resendPendingPollActionsAC(connectionStatus));
       }
+      var count = 0;
+      interval = setInterval(function () {
+        if (count > 20) {
+          clearInterval(interval);
+        }
+        count++;
+        if (channel.id && Object.keys(pollPendingPollActions).length === 0 && Object.keys(pendingMessagesMap).length === 0) {
+          clearInterval(interval);
+          loadingRef.current = false;
+          prevDisableRef.current = false;
+          nextDisableRef.current = false;
+          clearMessagesMap();
+          removeAllMessages();
+          dispatch(getMessagesAC(channel));
+        }
+      }, 100);
     }
-  }, [connectionStatus]);
-  useEffect(function () {
-    log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
-    if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      if (channel.id && Object.keys(pollPendingPollActions).length === 0 && Object.keys(pendingMessagesMap).length === 0) {
-        loadingRef.current = false;
-        prevDisableRef.current = false;
-        nextDisableRef.current = false;
-        clearMessagesMap();
-        removeAllMessages();
-        dispatch(getMessagesAC(channel));
+    return function () {
+      if (interval) {
+        clearInterval(interval);
       }
-    }
-  }, [connectionStatus, pollPendingPollActions, pendingMessagesMap]);
+    };
+  }, [connectionStatus]);
   useEffect(function () {
-    var unreadScrollTo = getUnreadScrollTo();
     if (channel.newMessageCount && channel.newMessageCount > 0 && unreadScrollTo) {
-      if (scrollRef.current) {
-        scrollRef.current.style.scrollBehavior = 'inherit';
+      var scrollElement = document.getElementById('scrollableDiv');
+      if (scrollElement) {
+        scrollElement.style.scrollBehavior = 'inherit';
       }
+      setScrollIntoView(true);
       var lastReadMessageNode = document.getElementById(channel.lastDisplayedMessageId);
-      if (lastReadMessageNode) {
-        scrollRef.current.scrollTop = lastReadMessageNode.offsetTop;
-        if (scrollRef.current) {
-          scrollRef.current.style.scrollBehavior = 'smooth';
-        }
-        setUnreadScrollTo(false);
+      if (lastReadMessageNode && scrollElement) {
+        scrollElement.scrollTo({
+          top: lastReadMessageNode.offsetTop - 200,
+          behavior: 'auto'
+        });
+        setTimeout(function () {
+          dispatch(setUnreadScrollToAC(false));
+          setScrollIntoView(false);
+        }, 100);
       }
     }
-  }, [channel.id, channel.newMessageCount, channel.lastDisplayedMessageId]);
+  }, [channel.id, channel.newMessageCount, scrollRef.current, unreadScrollTo, channel.lastDisplayedMessageId, scrollIntoView, messages.length]);
   useEffect(function () {
     return function () {
       if (hideTopDateTimeout.current) {
@@ -44980,7 +45074,7 @@ var Media = function Media(_ref) {
   })));
 };
 var Container$o = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  padding: 6px 4px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n  align-items: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n"])));
-var MediaItem = styled.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  height: 110px;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
+var MediaItem = styled.div(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\n  box-sizing: border-box;\n  //border: 1px solid #ccc;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 2px;\n"])));
 
 var _rect$3, _path$1u;
 function _extends$1y() {

package/package.json

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