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

package/index.js

@@ -10960,7 +10960,7 @@ var CustomInput = styled__default.input(_templateObject10 || (_templateObject10
 }, function (props) {
   return props.color;
 }, function (props) {
-  return props.error ? "1px solid " + props.errorColor : 'transparent';
+  return props.error ? "1px solid " + props.errorColor : colors.primary;
 }, function (props) {
   return props.error ? "1px solid " + colors.errorBlur : props.theme !== THEME.DARK ? "2px solid " + props.borderColor : 'none';
 }, colors.gray0, function (props) {
@@ -15143,6 +15143,73 @@ var addData = function addData(db, storeName, keyPath, data) {
   }
 };
 
+var getFrame3 = function getFrame3(video, time) {
+  try {
+    var canvas = document.createElement('canvas');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    var ctx = canvas.getContext('2d');
+    if (time) {
+      video.currentTime = time;
+    }
+    ctx.drawImage(video, 0, 0);
+    return Promise.resolve(createImageThumbnail(null, canvas.toDataURL(), 10, 10));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var getFrame = function getFrame(videoSrc, time) {
+  try {
+    var video = document.createElement('video');
+    video.src = videoSrc;
+    video.crossOrigin = 'anonymous';
+    video.preload = 'auto';
+    video.muted = true;
+    return Promise.resolve(new Promise(function (resolve, reject) {
+      if (videoSrc) {
+        video.onloadedmetadata = function () {
+          video.currentTime = time || 0;
+          video.onseeked = function () {
+            var _video$duration;
+            var _calculateSize = calculateSize(video.videoWidth, video.videoHeight, 100, 100),
+              newWidth = _calculateSize[0],
+              newHeight = _calculateSize[1];
+            var canvas = document.createElement('canvas');
+            canvas.width = newWidth;
+            canvas.height = newHeight;
+            var ctx = canvas.getContext('2d');
+            if (!ctx) {
+              reject(new Error('Failed to get canvas context'));
+              return;
+            }
+            ctx.drawImage(video, 0, 0, newWidth, newHeight);
+            var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            var binaryThumbHash = rgbaToThumbHash(pixels.width, pixels.height, pixels.data);
+            var thumb = binaryToBase64(binaryThumbHash);
+            var duration = Number((_video$duration = video.duration) === null || _video$duration === void 0 ? void 0 : _video$duration.toFixed(0));
+            resolve({
+              thumb: thumb,
+              width: video.videoWidth,
+              height: video.videoHeight,
+              duration: duration
+            });
+          };
+          video.onerror = function () {
+            reject(new Error('Failed to seek video'));
+          };
+        };
+        video.onerror = function () {
+          reject(new Error('Failed to load video'));
+        };
+      } else {
+        reject(new Error('src not found'));
+      }
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 var _marked$2 = /*#__PURE__*/_regeneratorRuntime().mark(sendMessage),
   _marked2$1 = /*#__PURE__*/_regeneratorRuntime().mark(sendTextMessage),
   _marked3$1 = /*#__PURE__*/_regeneratorRuntime().mark(forwardMessage),
@@ -15164,13 +15231,15 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
   try {
     return Promise.resolve(Promise.all(attachments.map(function (attachment) {
       try {
-        var _temp4 = function _temp4() {
-          function _temp2() {
-            var attachmentMeta = attachment.cachedUrl ? attachment.metadata : JSON.stringify(_extends({}, attachment.metadata, thumbnailMetas && thumbnailMetas.thumbnail && {
+        var _temp5 = function _temp5() {
+          function _temp3() {
+            var attachmentMeta = attachment.cachedUrl ? attachment.metadata : JSON.stringify(_extends({}, attachment.metadata ? typeof attachment.metadata === 'string' ? JSON.parse(attachment.metadata) : attachment.metadata : {}, thumbnailMetas && thumbnailMetas.thumbnail && _extends({
               tmb: thumbnailMetas.thumbnail,
               szw: thumbnailMetas.imageWidth,
               szh: thumbnailMetas.imageHeight
-            }));
+            }, thumbnailMetas.duration ? {
+              dur: thumbnailMetas.duration
+            } : {})));
             var attachmentBuilder = channel.createAttachmentBuilder(uri, attachment.type);
             var attachmentToSend = attachmentBuilder.setName(attachment.name).setMetadata(attachmentMeta).setFileSize(fileSize || attachment.size).setUpload(false).create();
             return attachmentToSend;
@@ -15183,7 +15252,7 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
             }
           });
           var thumbnailMetas;
-          var _temp = function () {
+          var _temp2 = function () {
             if (!attachment.cachedUrl && attachment.url.type.split('/')[0] === 'image') {
               return Promise.resolve(getImageSize(filePath)).then(function (_getImageSize) {
                 fileSize = _getImageSize;
@@ -15191,9 +15260,23 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
                   thumbnailMetas = _createImageThumbnail;
                 });
               });
+            } else {
+              var _temp6 = function () {
+                if (!attachment.cachedUrl && attachment.url.type.split('/')[0] === 'video') {
+                  return Promise.resolve(getFrame(filePath)).then(function (meta) {
+                    thumbnailMetas = {
+                      thumbnail: meta.thumb,
+                      imageWidth: meta.width,
+                      imageHeight: meta.height,
+                      duration: meta.duration
+                    };
+                  });
+                }
+              }();
+              if (_temp6 && _temp6.then) return _temp6.then(function () {});
             }
           }();
-          return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+          return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
         };
         var handleUploadProgress = function handleUploadProgress(_ref) {
           var loaded = _ref.loaded,
@@ -15212,7 +15295,7 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
         var fileType = attachment.url.type.split('/')[0];
         var filePath;
         var handleUpdateLocalPath = function handleUpdateLocalPath(updatedLink) {
-          if (fileType === 'image') {
+          if (fileType === 'image' || fileType === 'video') {
             filePath = updatedLink;
             message.attachments[0] = _extends({}, message.attachments[0], {
               attachmentUrl: updatedLink
@@ -15220,7 +15303,7 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
           }
         };
         var uri;
-        var _temp3 = function () {
+        var _temp4 = function () {
           if (attachment.cachedUrl) {
             uri = attachment.cachedUrl;
             store.dispatch({
@@ -15238,7 +15321,7 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
             });
           }
         }();
-        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
+        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -16109,7 +16192,7 @@ function forwardMessage(action) {
   }, _marked3$1, null, [[0, 73]]);
 }
 function resendMessage(action) {
-  var payload, message, connectionState, channelId, channel, customUploader, attachmentCompilation, messageAttachment, messageCopy, handleUploadProgress, uri, filePath, handleUpdateLocalPath, pendingAttachment, _thumbnailMetas, fileSize, attachmentMeta, attachmentBuilder, attachmentToSend, messageResponse, messageUpdateData, fileType, messageToUpdate, _messageCopy3, _messageResponse, _messageUpdateData, activeChannelId, _messageToUpdate;
+  var payload, message, connectionState, channelId, channel, customUploader, attachmentCompilation, messageAttachment, messageCopy, handleUploadProgress, uri, filePath, handleUpdateLocalPath, pendingAttachment, _thumbnailMetas, fileSize, meta, attachmentMeta, attachmentBuilder, attachmentToSend, messageResponse, messageUpdateData, fileType, messageToUpdate, _messageCopy3, _messageResponse, _messageUpdateData, activeChannelId, _messageToUpdate;
   return _regeneratorRuntime().wrap(function resendMessage$(_context6) {
     while (1) switch (_context6.prev = _context6.next) {
       case 0:
@@ -16149,7 +16232,7 @@ function resendMessage(action) {
           state: MESSAGE_STATUS.UNMODIFIED
         });
         if (!(message.attachments && message.attachments.length && message.state === MESSAGE_STATUS.FAILED)) {
-          _context6.next = 96;
+          _context6.next = 104;
           break;
         }
         _context6.next = 20;
@@ -16162,14 +16245,14 @@ function resendMessage(action) {
         });
         log.info('attachmentCompilation. .. . .', attachmentCompilation);
         if (!(connectionState === CONNECTION_STATUS.CONNECTED && attachmentCompilation[messageAttachment.tid] && attachmentCompilation[messageAttachment.tid] === UPLOAD_STATE.FAIL)) {
-          _context6.next = 94;
+          _context6.next = 102;
           break;
         }
         _context6.next = 27;
         return effects.put(updateAttachmentUploadingStateAC(UPLOAD_STATE.UPLOADING, messageAttachment.tid));
       case 27:
         if (!customUploader) {
-          _context6.next = 94;
+          _context6.next = 102;
           break;
         }
         handleUploadProgress = function handleUploadProgress(_ref2) {
@@ -16222,7 +16305,7 @@ function resendMessage(action) {
         fileSize = messageAttachment.cachedUrl ? messageAttachment.size : pendingAttachment.file.size;
         log.info('uri ... ', uri);
         if (!(!messageAttachment.cachedUrl && messageAttachment.url.type.split('/')[0] === 'image')) {
-          _context6.next = 56;
+          _context6.next = 58;
           break;
         }
         _context6.next = 52;
@@ -16233,15 +16316,38 @@ function resendMessage(action) {
         return effects.call(createImageThumbnail, null, filePath, messageAttachment.type === 'file' ? 50 : undefined, messageAttachment.type === 'file' ? 50 : undefined);
       case 55:
         _thumbnailMetas = _context6.sent;
-      case 56:
+        _context6.next = 64;
+        break;
+      case 58:
+        if (!(!messageAttachment.cachedUrl && messageAttachment.url.type.split('/')[0] === 'video')) {
+          _context6.next = 64;
+          break;
+        }
+        if (!filePath) {
+          _context6.next = 64;
+          break;
+        }
+        _context6.next = 62;
+        return effects.call(getFrame, filePath);
+      case 62:
+        meta = _context6.sent;
+        _thumbnailMetas = {
+          thumbnail: meta.thumb,
+          imageWidth: meta.width,
+          imageHeight: meta.height,
+          duration: meta.duration
+        };
+      case 64:
         if (messageAttachment.cachedUrl) {
           attachmentMeta = messageAttachment.metadata;
         } else {
-          attachmentMeta = JSON.stringify(_extends({}, messageAttachment.metadata, _thumbnailMetas && _thumbnailMetas.thumbnail && {
+          attachmentMeta = JSON.stringify(_extends({}, messageAttachment.metadata ? typeof messageAttachment.metadata === 'string' ? JSON.parse(messageAttachment.metadata) : messageAttachment.metadata : {}, _thumbnailMetas && _thumbnailMetas.thumbnail && _extends({
             tmb: _thumbnailMetas.thumbnail,
             szw: _thumbnailMetas.imageWidth,
             szh: _thumbnailMetas.imageHeight
-          }));
+          }, _thumbnailMetas.duration ? {
+            dur: _thumbnailMetas.duration
+          } : {})));
         }
         log.info('attachmentMeta ... ', attachmentMeta);
         attachmentBuilder = channel.createAttachmentBuilder(uri, messageAttachment.type);
@@ -16249,19 +16355,19 @@ function resendMessage(action) {
         log.info('attachmentToSend ... ', attachmentToSend);
         attachmentToSend.tid = messageAttachment.tid;
         attachmentToSend.attachmentUrl = messageAttachment.attachmentUrl;
-        _context6.next = 65;
+        _context6.next = 73;
         return effects.put(updateMessageAC(messageCopy.tid, JSON.parse(JSON.stringify(_extends({}, messageCopy, {
           attachments: [attachmentToSend]
         })))));
-      case 65:
+      case 73:
         messageCopy.attachments = [attachmentToSend];
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context6.next = 83;
+          _context6.next = 91;
           break;
         }
-        _context6.next = 69;
+        _context6.next = 77;
         return effects.call(channel.sendMessage, messageCopy);
-      case 69:
+      case 77:
         messageResponse = _context6.sent;
         deletePendingAttachment(messageAttachment.tid);
         messageUpdateData = {
@@ -16283,9 +16389,9 @@ function resendMessage(action) {
           createdAt: messageResponse.createdAt
         };
         removePendingMessageFromMap(channel.id, messageCopy.tid);
-        _context6.next = 75;
+        _context6.next = 83;
         return effects.put(updateMessageAC(messageCopy.tid, JSON.parse(JSON.stringify(messageUpdateData))));
-      case 75:
+      case 83:
         fileType = messageAttachment.data && messageAttachment.data.type ? messageAttachment.data.type.split('/')[0] : messageAttachment.type;
         if (fileType === 'video') {
           deleteVideoThumb(messageAttachment.tid);
@@ -16297,20 +16403,20 @@ function resendMessage(action) {
         updateMessageOnAllMessages(messageCopy.tid, messageUpdateData);
         messageToUpdate = JSON.parse(JSON.stringify(messageResponse));
         updateChannelLastMessageOnAllChannels(channel.id, messageToUpdate);
-        _context6.next = 83;
+        _context6.next = 91;
         return effects.put(updateChannelLastMessageAC(messageToUpdate, {
           id: channel.id
         }));
-      case 83:
-        _context6.next = 94;
+      case 91:
+        _context6.next = 102;
         break;
-      case 85:
-        _context6.prev = 85;
+      case 93:
+        _context6.prev = 93;
         _context6.t0 = _context6["catch"](29);
         log.error('fail upload attachment on resend message ... ', _context6.t0);
-        _context6.next = 90;
+        _context6.next = 98;
         return effects.put(updateAttachmentUploadingStateAC(UPLOAD_STATE.FAIL, messageAttachment.tid));
-      case 90:
+      case 98:
         updateMessageOnMap(channel.id, {
           messageId: messageCopy.tid,
           params: {
@@ -16320,28 +16426,28 @@ function resendMessage(action) {
         updateMessageOnAllMessages(messageCopy.tid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context6.next = 94;
+        _context6.next = 102;
         return effects.put(updateMessageAC(messageCopy.tid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 94:
-        _context6.next = 121;
+      case 102:
+        _context6.next = 129;
         break;
-      case 96:
+      case 104:
         if (!(message.state === MESSAGE_STATUS.FAILED)) {
-          _context6.next = 121;
+          _context6.next = 129;
           break;
         }
         log.info('send failed message ...');
         _messageCopy3 = _extends({}, message);
         delete _messageCopy3.createdAt;
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context6.next = 121;
+          _context6.next = 129;
           break;
         }
-        _context6.next = 103;
+        _context6.next = 111;
         return effects.call(channel.sendMessage, _messageCopy3);
-      case 103:
+      case 111:
         _messageResponse = _context6.sent;
         log.info('resend message response ... ', _messageResponse);
         _messageUpdateData = {
@@ -16360,49 +16466,49 @@ function resendMessage(action) {
           createdAt: _messageResponse.createdAt
         };
         removePendingMessageFromMap(channel.id, _messageCopy3.tid);
-        _context6.next = 109;
+        _context6.next = 117;
         return effects.put(updateMessageAC(_messageCopy3.tid, _messageUpdateData));
-      case 109:
+      case 117:
         updateMessageOnMap(channel.id, {
           messageId: _messageCopy3.tid,
           params: _messageUpdateData
         });
         activeChannelId = getActiveChannelId();
         if (!(channelId === activeChannelId)) {
-          _context6.next = 116;
+          _context6.next = 124;
           break;
         }
-        _context6.next = 114;
+        _context6.next = 122;
         return effects.put(updateMessageAC(_messageCopy3.tid, JSON.parse(JSON.stringify(_messageResponse))));
-      case 114:
+      case 122:
         updateMessageOnMap(channel.id, {
           messageId: _messageCopy3.tid,
           params: _messageUpdateData
         });
         updateMessageOnAllMessages(_messageCopy3.tid, _messageUpdateData);
-      case 116:
+      case 124:
         updateChannelOnAllChannels(channel.id, channel);
         _messageToUpdate = JSON.parse(JSON.stringify(_messageResponse));
         updateChannelLastMessageOnAllChannels(channel.id, _messageToUpdate);
-        _context6.next = 121;
+        _context6.next = 129;
         return effects.put(updateChannelLastMessageAC(_messageToUpdate, {
           id: channel.id
         }));
-      case 121:
-        _context6.next = 123;
+      case 129:
+        _context6.next = 131;
         return effects.put(scrollToNewMessageAC(true));
-      case 123:
-        _context6.next = 132;
+      case 131:
+        _context6.next = 140;
         break;
-      case 125:
-        _context6.prev = 125;
+      case 133:
+        _context6.prev = 133;
         _context6.t1 = _context6["catch"](7);
         log.error('ERROR in resend message', _context6.t1.message, 'channel.. . ', channel);
-        _context6.next = 130;
+        _context6.next = 138;
         return effects.put(updateMessageAC(message.tid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 130:
+      case 138:
         updateMessageOnMap(channel.id, {
           messageId: message.tid,
           params: {
@@ -16412,14 +16518,14 @@ function resendMessage(action) {
         updateMessageOnAllMessages(message.tid, {
           state: MESSAGE_STATUS.FAILED
         });
-      case 132:
-        _context6.next = 134;
+      case 140:
+        _context6.next = 142;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 134:
+      case 142:
       case "end":
         return _context6.stop();
     }
-  }, _marked4$1, null, [[7, 125], [29, 85]]);
+  }, _marked4$1, null, [[7, 133], [29, 93]]);
 }
 function deleteMessage(action) {
   var payload, messageId, channelId, deleteOption, channel, deletedMessage, messageToUpdate;
@@ -19054,7 +19160,7 @@ var Channel = function Channel(_ref) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
+    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     surface2 = _useColor[THEME_COLORS.SURFACE_2],
     errorColor = _useColor[THEME_COLORS.WARNING],
@@ -19131,7 +19237,7 @@ var Channel = function Channel(_ref) {
     theme: theme,
     selectedChannel: channel.id === activeChannel.id,
     selectedChannelLeftBorder: selectedChannelLeftBorder,
-    selectedBackgroundColor: selectedChannelBackground || hoverBackground,
+    selectedBackgroundColor: selectedChannelBackground || focusBackground,
     selectedChannelPaddings: selectedChannelPaddings,
     channelsPaddings: channelsPaddings,
     selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -19692,8 +19798,7 @@ var UsersPopup = function UsersPopup(_ref) {
     sectionBackground = _useColor[THEME_COLORS.SECTION_BACKGROUND],
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
   var dispatch = reactRedux.useDispatch();
   var ChatClient = getClient();
   var selfUser = ChatClient.user;
@@ -19938,7 +20043,7 @@ var UsersPopup = function UsersPopup(_ref) {
     var memberDisplayName = selfUser.id === user.id ? 'Me' : makeUsername(contactsMap[user.id], user, selfUser.id !== user.id && getFromContacts);
     return /*#__PURE__*/React__default.createElement(ListRow, {
       isAdd: actionType !== 'createChat',
-      hoverBackground: hoverBackground,
+      hoverBackground: colors.hoverBackgroundColor,
       key: user.id,
       onClick: function onClick() {
         return actionType === 'createChat' && handleAddMember(user);
@@ -20713,7 +20818,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
     uploadPhotoIcon = _ref.uploadPhotoIcon;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
-    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
+    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY];
   var _useState = React.useState(false),
     showAddMemberPopup = _useState[0],
@@ -20738,14 +20843,14 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
     theme: theme,
     zIndex: '300',
     trigger: /*#__PURE__*/React__default.createElement(CreateDropdownButton, {
-      hoverBackground: hoverBackground,
+      hoverBackground: focusBackground,
       leftAuto: !showSearch,
       iconColor: accentColor
     }, createChannelIcon || /*#__PURE__*/React__default.createElement(SvgAddChat, null))
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: hoverBackground,
+    hoverBackground: focusBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('broadcast');
     },
@@ -20753,7 +20858,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
   }, newChannelIcon || /*#__PURE__*/React__default.createElement(SvgCreateChannel, null), "New channel"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
     textColor: textPrimary,
-    hoverBackground: hoverBackground,
+    hoverBackground: focusBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('group');
     },
@@ -20761,7 +20866,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
   }, newGroupIcon || /*#__PURE__*/React__default.createElement(SvgCreateGroup, null), "New group"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 3,
     textColor: textPrimary,
-    hoverBackground: hoverBackground,
+    hoverBackground: focusBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('direct');
     },
@@ -21835,8 +21940,7 @@ function ChatHeader(_ref) {
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    borderColor = _useColor[THEME_COLORS.BORDER],
-    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
+    borderColor = _useColor[THEME_COLORS.BORDER];
   var dispatch = reactRedux.useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
@@ -21878,12 +21982,12 @@ function ChatHeader(_ref) {
     onClick: handleBackToChannels
   }, MobileBackButton || (/*#__PURE__*/React__default.createElement(MobileBackButtonWrapper, {
     onClick: handleBackToChannels,
-    hoverBackground: hoverBackground
+    hoverBackground: colors.primaryLight
   }, /*#__PURE__*/React__default.createElement(WrapArrowLeftIcon, {
     color: iconPrimary
   })))), activeChannel.isLinkedChannel && (/*#__PURE__*/React__default.createElement(BackButtonWrapper, {
     onClick: handleSwitchChannel,
-    hoverBackground: hoverBackground,
+    hoverBackground: colors.primaryLight,
     order: backButtonOrder
   }, /*#__PURE__*/React__default.createElement(WrapArrowLeftIcon, {
     color: iconPrimary
@@ -23134,7 +23238,6 @@ var SliderPopup = function SliderPopup(_ref) {
     allowEditDeleteIncomingMessage = _ref.allowEditDeleteIncomingMessage,
     attachmentsPreview = _ref.attachmentsPreview;
   var _useColor = useColors(),
-    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
   var dispatch = reactRedux.useDispatch();
   var getFromContacts = getShowOnlyContactUsers();
@@ -23555,7 +23658,6 @@ var SliderPopup = function SliderPopup(_ref) {
         className: 'custom_carousel_arrow',
         leftButton: type === 'PREV',
         type: 'button',
-        backgroundColor: textPrimary,
         onClick: function onClick(e) {
           setImageLoading(true);
           e.preventDefault();
@@ -24571,62 +24673,6 @@ function SvgPlayVideo(props) {
   })));
 }
 
-var getFrame3 = function getFrame3(video, time) {
-  try {
-    var canvas = document.createElement('canvas');
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    var ctx = canvas.getContext('2d');
-    if (time) {
-      video.currentTime = time;
-    }
-    ctx.drawImage(video, 0, 0);
-    return Promise.resolve(createImageThumbnail(null, canvas.toDataURL(), 10, 10));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-var getFrame = function getFrame(videoSrc, time) {
-  try {
-    var video = document.createElement('video');
-    video.src = videoSrc;
-    return Promise.resolve(new Promise(function (resolve, reject) {
-      if (videoSrc) {
-        var b = setInterval(function () {
-          if (video.readyState >= 3) {
-            if (time) {
-              video.currentTime = time;
-            }
-            var _calculateSize = calculateSize(video.videoWidth, video.videoHeight, 50, 50),
-              newWidth = _calculateSize[0],
-              newHeight = _calculateSize[1];
-            var canvas = document.createElement('canvas');
-            canvas.width = newWidth;
-            canvas.height = newHeight;
-            var ctx = canvas.getContext('2d');
-            video.currentTime = 10;
-            ctx.drawImage(video, 0, 0, newWidth, newHeight);
-            var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
-            var binaryThumbHash = rgbaToThumbHash(pixels.width, pixels.height, pixels.data);
-            var thumb = binaryToBase64(binaryThumbHash);
-            log.info('generated thumb hash ... ', thumb);
-            clearInterval(b);
-            resolve({
-              thumb: thumb,
-              width: video.videoWidth,
-              height: video.videoHeight
-            });
-          }
-        }, 500);
-      } else {
-        reject(new Error('src not found'));
-      }
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-
 var _templateObject$s, _templateObject2$o, _templateObject3$i, _templateObject4$f, _templateObject5$d, _templateObject6$b, _templateObject7$a;
 var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
   var width = _ref.width,
@@ -31501,12 +31547,12 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     sectionBackground = _useColor[THEME_COLORS.SECTION_BACKGROUND],
+    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
-    errorColor = _useColor[THEME_COLORS.WARNING],
-    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
+    errorColor = _useColor[THEME_COLORS.WARNING];
   var dispatch = reactRedux.useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
@@ -32602,13 +32648,13 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     color: errorColor
   }, uploadErrorMessage), selectedMessagesMap && selectedMessagesMap.size > 0 ? (/*#__PURE__*/React__default.createElement(SelectedMessagesWrapper, null, selectedMessagesMap.size, " ", selectedMessagesMap.size > 1 ? ' messages selected' : ' message selected', /*#__PURE__*/React__default.createElement(CustomButton, {
     onClick: handleToggleForwardMessagePopup,
-    backgroundColor: hoverBackground,
+    backgroundColor: colors.primaryLight,
     marginLeft: '32px',
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement(SvgForward, null), "Forward"), /*#__PURE__*/React__default.createElement(CustomButton, {
     onClick: handleToggleDeleteMessagePopup,
     color: errorColor,
-    backgroundColor: hoverBackground,
+    backgroundColor: colors.primaryLight,
     marginLeft: '16px'
   }, /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null), "Delete"), /*#__PURE__*/React__default.createElement(CloseIconWrapper, {
     onClick: handleCloseSelectMessages
@@ -32744,7 +32790,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, showChooseMediaAttachment && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: hoverBackground,
+    hoverBackground: focusBackground,
     onClick: function onClick() {
       return onOpenFileUploader(mediaExtensions);
     },
@@ -32753,7 +32799,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, /*#__PURE__*/React__default.createElement(SvgChoseMedia, null), chooseMediaAttachmentText != null ? chooseMediaAttachmentText : 'Photo or video')), showChooseFileAttachment && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
     textColor: textPrimary,
-    hoverBackground: hoverBackground,
+    hoverBackground: focusBackground,
     onClick: function onClick() {
       return onOpenFileUploader('');
     },
@@ -33268,7 +33314,7 @@ var Actions = function Actions(_ref) {
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
+    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
     borderThemeColor = _useColor[THEME_COLORS.BORDER],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
     errorColor = _useColor[THEME_COLORS.WARNING];
@@ -33438,7 +33484,7 @@ var Actions = function Actions(_ref) {
     return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       textColor: textPrimary,
       key: value + index,
-      hoverBackground: hoverBackground,
+      hoverBackground: colors.primaryLight,
       onClick: function onClick() {
         return handleNotificationOnOff(value * oneHour);
       }
@@ -33446,28 +33492,28 @@ var Actions = function Actions(_ref) {
   }) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 1,
-    hoverBackground: hoverBackground,
+    hoverBackground: focusBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(oneHour);
     }
   }, "Mute for 1 hour"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 2,
-    hoverBackground: hoverBackground,
+    hoverBackground: focusBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(twoHours);
     }
   }, "Mute for 2 hours"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 3,
-    hoverBackground: hoverBackground,
+    hoverBackground: focusBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(oneDay);
     }
   }, "Mute for 1 day"))), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 4,
-    hoverBackground: hoverBackground,
+    hoverBackground: focusBackground,
     onClick: function onClick() {
       return handleNotificationOnOff();
     }
@@ -33755,8 +33801,7 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
-    errorColor = _useColor[THEME_COLORS.WARNING],
-    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
+    errorColor = _useColor[THEME_COLORS.WARNING];
   var dispatch = reactRedux.useDispatch();
   var _useState = React.useState(false),
     isChanged = _useState[0],
@@ -33815,7 +33860,7 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     theme: theme
   }, !!roles.length && roles.map(function (role) {
     return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
-      hoverBackground: hoverBackground,
+      hoverBackground: colors.primaryLight,
       key: role.name,
       onClick: function onClick() {
         return onChangeFunction(role.name);
@@ -33868,7 +33913,7 @@ var Members = function Members(_ref) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
+    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     errorColor = _useColor[THEME_COLORS.WARNING];
   var dispatch = reactRedux.useDispatch();
@@ -34015,14 +34060,14 @@ var Members = function Members(_ref) {
     key: 1,
     onClick: handleAddMemberPopup,
     color: textPrimary,
-    hoverBackground: hoverBackgroundColor || hoverBackground,
+    hoverBackground: hoverBackgroundColor || focusBackground,
     addMemberIconColor: accentColor,
     fontSize: addMemberFontSize
   }, addMemberIcon || /*#__PURE__*/React__default.createElement(SvgAddMember, null), "Add " + displayMemberText)), !!members.length && members.map(function (member, index) {
     return /*#__PURE__*/React__default.createElement(MemberItem$1, {
       key: member.id + index,
       color: textPrimary,
-      hoverBackground: hoverBackgroundColor || hoverBackground,
+      hoverBackground: hoverBackgroundColor || focusBackground,
       onClick: function onClick() {
         return handleCreateChat(member);
       },
@@ -34057,7 +34102,7 @@ var Members = function Members(_ref) {
         setCloseMenu('1');
       },
       key: 1,
-      hoverBackground: hoverBackground
+      hoverBackground: focusBackground
     }, "Change role")), showMakeMemberAdmin && checkActionPermission('changeMemberRole') && member.role !== 'owner' && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       onClick: function onClick(e) {
         setSelectedMember(member);
@@ -34066,7 +34111,7 @@ var Members = function Members(_ref) {
       },
       textColor: member.role === 'admin' ? errorColor : '',
       key: 2,
-      hoverBackground: hoverBackground
+      hoverBackground: focusBackground
     }, member.role === 'admin' ? 'Revoke Admin' : 'Make Admin')), showKickMember && checkActionPermission('kickMember') && member.role !== 'owner' && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       onClick: function onClick(e) {
         setSelectedMember(member);
@@ -34075,11 +34120,11 @@ var Members = function Members(_ref) {
       },
       textColor: errorColor,
       key: 3,
-      hoverBackground: hoverBackground
+      hoverBackground: focusBackground
     }, "Remove")), showKickAndBlockMember && checkActionPermission('kickAndBlockMember') && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       textColor: errorColor,
       key: 4,
-      hoverBackground: hoverBackground,
+      hoverBackground: focusBackground,
       onClick: function onClick(e) {
         setSelectedMember(member);
         toggleBlockMemberPopup(e);
@@ -34840,8 +34885,7 @@ var DetailsTab = function DetailsTab(_ref) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    borderThemeColor = _useColor[THEME_COLORS.BORDER],
-    backgroundColor = _useColor[THEME_COLORS.BACKGROUND];
+    borderThemeColor = _useColor[THEME_COLORS.BORDER];
   var dispatch = reactRedux.useDispatch();
   var isDirectChannel = channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
   var showMembers = !isDirectChannel && checkActionPermission('getMembers');
@@ -34868,8 +34912,7 @@ var DetailsTab = function DetailsTab(_ref) {
     borderColor: borderColor || borderThemeColor,
     fontSize: tabItemsFontSize,
     lineHeight: tabItemsLineHeight,
-    minWidth: tabItemsMinWidth,
-    backgroundColor: backgroundColor
+    minWidth: tabItemsMinWidth
   }, Object.keys(channelDetailsTabs).map(function (key) {
     if (key === 'member') {
       if (showMembers) {
@@ -34941,10 +34984,8 @@ var DetailsTab = function DetailsTab(_ref) {
   })));
 };
 var Container$r = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  //border-top: 1px solid ", ";\n"])), colors.gray1);
-var DetailsTabHeader = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  overflow-y: hidden;\n  padding: 0 20px;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n  display: flex;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 12;\n  /* width */\n  &::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: transparent;\n  }\n  button {\n    position: relative;\n    border: none;\n    background: transparent;\n    outline: none;\n    height: 44px;\n    text-transform: capitalize;\n    font-style: normal;\n    font-weight: 500;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    min-width: ", ";\n    cursor: pointer;\n  }\n\n  & span {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  & .active span {\n    color: ", ";\n\n    &:after {\n      content: '';\n      width: 100%;\n      border-radius: 2px;\n      height: 2px;\n      background-color: ", ";\n      position: absolute;\n      top: calc(100% - 1px);\n      left: 0;\n    }\n  }\n"])), function (props) {
+var DetailsTabHeader = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  overflow-y: hidden;\n  padding: 0 20px;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 12;\n  /* width */\n  &::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: transparent;\n  }\n  button {\n    position: relative;\n    border: none;\n    background: transparent;\n    outline: none;\n    height: 44px;\n    text-transform: capitalize;\n    font-style: normal;\n    font-weight: 500;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    min-width: ", ";\n    cursor: pointer;\n  }\n\n  & span {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  & .active span {\n    color: ", ";\n\n    &:after {\n      content: '';\n      width: 100%;\n      border-radius: 2px;\n      height: 2px;\n      background-color: ", ";\n      position: absolute;\n      top: calc(100% - 1px);\n      left: 0;\n    }\n  }\n"])), function (props) {
   return props.borderColor;
-}, function (props) {
-  return props.backgroundColor || 'transparent';
 }, function (props) {
   return props.fontSize || '15px';
 }, function (props) {
@@ -34984,8 +35025,7 @@ var EditChannel = function EditChannel(_ref) {
     borderColor = _useColor[THEME_COLORS.BORDER],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
-    errorColor = _useColor[THEME_COLORS.WARNING],
-    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
+    errorColor = _useColor[THEME_COLORS.WARNING];
   var ChatClient = getClient();
   var user = ChatClient.user;
   var dispatch = reactRedux.useDispatch();
@@ -35130,7 +35170,7 @@ var EditChannel = function EditChannel(_ref) {
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: hoverBackground,
+    hoverBackground: colors.primaryLight,
     onClick: function onClick() {
       return onOpenFileUploader();
     },
@@ -35142,7 +35182,7 @@ var EditChannel = function EditChannel(_ref) {
     type: 'file'
   })), newAvatar.url && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
-    hoverBackground: hoverBackground,
+    hoverBackground: colors.primaryLight,
     textColor: errorColor,
     onClick: handleToggleDeleteAvatarPopup,
     iconWidth: '20px'