sceyt-chat-react-uikit 1.6.9-beta.15 → 1.6.9-beta.16

package/index.js

@@ -2854,181 +2854,205 @@ function _catch(body, recover) {
 	return result;
 }
 
-var currentVersion = 1;
-var _setDataToDB = function setDataToDB(dbName, storeName, data, keyPath) {
-  if (!('indexedDB' in window)) {
-    log.info("This browser doesn't support IndexedDB");
-  } else {
-    var openRequest = indexedDB.open(dbName, currentVersion);
-    openRequest.onupgradeneeded = function (event) {
-      var db = openRequest.result;
-      var transaction = event.target.transaction;
-      addData(db, storeName, keyPath, data, transaction);
+// Asynchronously await a promise and pass the result to a finally continuation
+function _finallyRethrows(body, finalizer) {
+	try {
+		var result = body();
+	} catch (e) {
+		return finalizer(true, e);
+	}
+	if (result && result.then) {
+		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+	}
+	return finalizer(false, result);
+}
+
+var openDatabase = function openDatabase(dbName) {
+  return new Promise(function (resolve, reject) {
+    var request = indexedDB.open(dbName);
+    request.onsuccess = function () {
+      return resolve(request.result);
     };
-    openRequest.onerror = function () {
-      log.error('Indexeddb Error ', openRequest.error);
+    request.onerror = function () {
+      return reject(request.error);
     };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
+  });
+};
+var runUpgrade = function runUpgrade(dbName, onUpgrade) {
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
+      var nextVersion = db.version + 1;
+      db.close();
+      return new Promise(function (resolve, reject) {
+        var request = indexedDB.open(dbName, nextVersion);
+        request.onupgradeneeded = function () {
+          var upgradeDb = request.result;
+          onUpgrade(upgradeDb);
+        };
+        request.onsuccess = function () {
+          return resolve(request.result);
+        };
+        request.onerror = function () {
+          return reject(request.error);
+        };
+        request.onblocked = function () {
+          log.warn('IndexedDB upgrade blocked; close other tabs to proceed');
+        };
+      });
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var ensureStore = function ensureStore(dbName, storeName, keyPath) {
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
       if (db.objectStoreNames.contains(storeName)) {
-        addData(db, storeName, keyPath, data);
-      } else {
-        db.close();
-        currentVersion++;
-        _setDataToDB(dbName, storeName, data, keyPath);
+        return db;
       }
-      db.onversionchange = function () {
-        db.close();
-      };
-    };
-    openRequest.onblocked = function () {};
+      db.close();
+      return Promise.resolve(runUpgrade(dbName, function (upgradeDb) {
+        if (!upgradeDb.objectStoreNames.contains(storeName)) {
+          upgradeDb.createObjectStore(storeName, {
+            keyPath: keyPath
+          });
+        }
+      }));
+    });
+  } catch (e) {
+    return Promise.reject(e);
   }
 };
-var _getDataFromDB = function getDataFromDB(dbName, storeName, keyPath, keyPatName) {
+var awaitTransaction = function awaitTransaction(tx) {
   return new Promise(function (resolve, reject) {
-    var openRequest = indexedDB.open(dbName, currentVersion);
-    openRequest.onupgradeneeded = function (event) {
-      var db = event.target.result;
-      var transaction = event.target.transaction;
-      if (db.objectStoreNames.contains(storeName)) {
-        var objectStore = transaction.objectStore(storeName);
-        var request = objectStore.get(keyPath);
-        request.onsuccess = function (event) {
-          var result = event.target.result;
-          resolve(result || '');
-        };
-        request.onerror = function (event) {
-          log.error('Error retrieving data during upgrade: ', event.target.error);
-          resolve('');
-        };
-      } else {
-        db.createObjectStore(storeName, {
-          keyPath: keyPatName
-        });
-        resolve('');
-      }
+    tx.oncomplete = function () {
+      return resolve();
     };
-    openRequest.onerror = function (event) {
-      if (event.target.error.name === 'VersionError') {
-        currentVersion++;
-        resolve(_getDataFromDB(dbName, storeName, keyPath));
-      } else {
-        reject(event);
-      }
+    tx.onerror = function () {
+      return reject(tx.error);
     };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
-      if (db.objectStoreNames.contains(storeName)) {
-        var transaction = db.transaction(storeName, 'readonly');
-        var objectStore = transaction.objectStore(storeName);
-        var request = objectStore.get(keyPath);
-        request.onsuccess = function (event) {
-          var result = event.target.result;
-          if (result) {
-            db.close();
-            resolve(result);
-          } else {
-            log.info('No data found for the specified keyPathValue.');
-            db.close();
-            resolve('');
-          }
-        };
-        request.onerror = function (event) {
-          db.close();
-          log.error('Error retrieving data: ', event.target.error);
-        };
-      } else {
-        db.close();
-        resolve('');
-      }
+    tx.onabort = function () {
+      return reject(tx.error);
     };
   });
 };
-var addData = function addData(db, storeName, keyPath, data, transaction) {
-  if (!db.objectStoreNames.contains(storeName)) {
-    var objectStore = db.createObjectStore(storeName, {
-      keyPath: keyPath
-    });
-    data.forEach(function (value) {
-      var request = objectStore.put(value);
-      request.onsuccess = function () {
-        log.info('data added to db during upgrade.. ', request.result);
-      };
-      request.onerror = function () {
-        log.info('Error on put data to db during upgrade.. ', request.error);
-      };
-    });
-  } else {
-    if (transaction) {
-      var store = transaction.objectStore(storeName);
-      data.forEach(function (value) {
-        var request = store.put(value);
-        request.onsuccess = function () {
-          log.info('data added to db using existing transaction.. ', request.result);
-        };
-        request.onerror = function () {
-          log.info('Error on put data to db using existing transaction.. ', request.error);
-        };
+var putWithPossibleOutOfLineKey = function putWithPossibleOutOfLineKey(store, value, keyField) {
+  try {
+    if (store.keyPath !== null) {
+      store.put(value);
+      return;
+    }
+  } catch (e) {}
+  var explicitKey = value === null || value === void 0 ? void 0 : value[keyField];
+  if (explicitKey === undefined || explicitKey === null) {
+    throw new Error("IndexedDB put requires explicit key but value has no '" + keyField + "' field");
+  }
+  store.put(value, explicitKey);
+};
+var setDataToDB = function setDataToDB(dbName, storeName, data, keyPath) {
+  try {
+    if (!('indexedDB' in window)) {
+      log.info("This browser doesn't support IndexedDB");
+      return Promise.resolve();
+    }
+    return Promise.resolve(ensureStore(dbName, storeName, keyPath)).then(function (db) {
+      var _temp = _finallyRethrows(function () {
+        var tx = db.transaction(storeName, 'readwrite');
+        var store = tx.objectStore(storeName);
+        data.forEach(function (value) {
+          putWithPossibleOutOfLineKey(store, value, keyPath);
+        });
+        return Promise.resolve(awaitTransaction(tx)).then(function () {});
+      }, function (_wasThrown, _result) {
+        db.close();
+        if (_wasThrown) throw _result;
+        return _result;
       });
-    } else {
-      var newTransaction = db.transaction(storeName, 'readwrite');
-      var _store = newTransaction.objectStore(storeName);
-      data.forEach(function (value) {
-        var request = _store.put(value);
-        request.onsuccess = function () {
-          log.info('data added to db.. ', request.result);
-        };
-        request.onerror = function () {
-          log.info('Error on put channel to db .. ', request.error);
-        };
+      if (_temp && _temp.then) return _temp.then(function () {});
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var getDataFromDB = function getDataFromDB(dbName, storeName, keyPathValue, keyPathName) {
+  try {
+    return Promise.resolve(_catch(function () {
+      return Promise.resolve(openDatabase(dbName)).then(function (db) {
+        var _exit = false;
+        function _temp5(_result2) {
+          if (_exit) return _result2;
+          var tx = db.transaction(storeName, 'readonly');
+          var objectStore = tx.objectStore(storeName);
+          return Promise.resolve(new Promise(function (resolve, reject) {
+            var request = objectStore.get(keyPathValue);
+            request.onsuccess = function () {
+              return resolve(request.result);
+            };
+            request.onerror = function () {
+              return reject(request.error);
+            };
+          })).then(function (result) {
+            db.close();
+            return result || '';
+          });
+        }
+        var _temp4 = function () {
+          if (!db.objectStoreNames.contains(storeName)) {
+            var _temp3 = function _temp3() {
+              _exit = true;
+              return '';
+            };
+            db.close();
+            var _temp2 = function () {
+              if (keyPathName) {
+                return Promise.resolve(ensureStore(dbName, storeName, keyPathName)).then(function (upgraded) {
+                  upgraded.close();
+                });
+              }
+            }();
+            return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
+          }
+        }();
+        return _temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4);
       });
-    }
+    }, function (error) {
+      log.error('Error retrieving data: ', error);
+      return '';
+    }));
+  } catch (e) {
+    return Promise.reject(e);
   }
 };
 var getAllStoreNames = function getAllStoreNames(dbName) {
-  return new Promise(function (resolve, reject) {
-    var openRequest = indexedDB.open(dbName, currentVersion);
-    openRequest.onupgradeneeded = function (event) {
-      var db = event.target.result;
-      resolve(Array.from(db.objectStoreNames));
-    };
-    openRequest.onerror = function () {
-      log.error('Indexeddb Error ', openRequest.error);
-      reject(openRequest.error);
-    };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
       try {
-        var storeNames = Array.from(db.objectStoreNames);
-        db.close();
-        resolve(storeNames);
-      } catch (error) {
+        return Array.from(db.objectStoreNames);
+      } finally {
         db.close();
-        reject(error);
       }
-    };
-  });
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
 };
 var deleteStore = function deleteStore(dbName, storeName) {
-  return new Promise(function (resolve, reject) {
-    var openRequest = indexedDB.open(dbName, currentVersion + 1);
-    openRequest.onupgradeneeded = function (event) {
-      var db = event.target.result;
-      if (db.objectStoreNames.contains(storeName)) {
-        db.deleteObjectStore(storeName);
-        currentVersion++;
-      }
-    };
-    openRequest.onerror = function () {
-      log.error('Indexeddb Error ', openRequest.error);
-      reject(openRequest.error);
-    };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
+      var shouldDelete = db.objectStoreNames.contains(storeName);
       db.close();
-      resolve();
-    };
-  });
+      if (!shouldDelete) return;
+      return Promise.resolve(runUpgrade(dbName, function (upgradeDb) {
+        if (upgradeDb.objectStoreNames.contains(storeName)) {
+          upgradeDb.deleteObjectStore(storeName);
+        }
+      })).then(function (upgraded) {
+        upgraded.close();
+      });
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
 };
 
 var METADATA_DB_NAME = 'sceyt-metadata-db';
@@ -3051,7 +3075,7 @@ var storeMetadata = function storeMetadata(url, metadata) {
       expiresAt: Date.now() + CACHE_DURATION
     });
     var _temp = _catch(function () {
-      return Promise.resolve(_setDataToDB(METADATA_DB_NAME, currentMonth, [metadataRecord], 'url')).then(function () {});
+      return Promise.resolve(setDataToDB(METADATA_DB_NAME, currentMonth, [metadataRecord], 'url')).then(function () {});
     }, function (error) {
       console.error('Failed to store metadata in IndexedDB:', error);
     });
@@ -3099,7 +3123,7 @@ var cleanupOldMonthsMetadata = function cleanupOldMonthsMetadata() {
 var getMetadata = function getMetadata(url) {
   return Promise.resolve(_catch(function () {
     var currentMonth = getCurrentMonthKey();
-    return Promise.resolve(_getDataFromDB(METADATA_DB_NAME, currentMonth, url, 'url')).then(function (result) {
+    return Promise.resolve(getDataFromDB(METADATA_DB_NAME, currentMonth, url, 'url')).then(function (result) {
       if (!result || typeof result === 'string') {
         return null;
       }
@@ -10937,11 +10961,11 @@ var defaultTheme = {
     light: '#D9D9DF',
     dark: '#303032'
   }, _colors[THEME_COLORS.OVERLAY_BACKGROUND] = {
-    light: 'rgba(0, 0, 0, 0.5)',
-    dark: 'rgba(0, 0, 0, 0.5)'
+    light: '#111539',
+    dark: '#111539'
   }, _colors[THEME_COLORS.OVERLAY_BACKGROUND_2] = {
-    light: 'rgba(17, 21, 57, 0.4)',
-    dark: 'rgba(17, 21, 57, 0.4)'
+    light: '#111539',
+    dark: '#111539'
   }, _colors[THEME_COLORS.WARNING] = {
     light: '#FA4C56',
     dark: '#FA4C56'
@@ -11267,11 +11291,12 @@ var sendTypingAC = function sendTypingAC(state) {
     }
   };
 };
-var sendRecordingAC = function sendRecordingAC(state) {
+var sendRecordingAC = function sendRecordingAC(state, channelId) {
   return {
     type: SEND_RECORDING,
     payload: {
-      state: state
+      state: state,
+      channelId: channelId
     }
   };
 };
@@ -12897,7 +12922,7 @@ var UploadPercent = styled__default.span(_templateObject38 || (_templateObject38
 }, function (props) {
   return props.fileAttachment || props.isRepliedMessage || props.isDetailsView ? '40px' : '56px';
 }, function (props) {
-  return props.backgroundColor + "40";
+  return props.backgroundColor + "66";
 }, function (props) {
   return props.borderRadius ? props.borderRadius : props.fileAttachment ? '8px' : props.isRepliedMessage ? '4px' : ' 50%';
 }, function (props) {
@@ -16218,47 +16243,43 @@ function sendTyping(action) {
   }, _marked22, null, [[3, 7]]);
 }
 function sendRecording(action) {
-  var state, activeChannelId, channel, _t24;
+  var _action$payload, state, channelId, channel, _t24;
   return _regenerator().w(function (_context23) {
     while (1) switch (_context23.p = _context23.n) {
       case 0:
-        state = action.payload.state;
+        _action$payload = action.payload, state = _action$payload.state, channelId = _action$payload.channelId;
         _context23.n = 1;
-        return effects.call(getActiveChannelId);
+        return effects.call(getChannelFromMap, channelId);
       case 1:
-        activeChannelId = _context23.v;
-        _context23.n = 2;
-        return effects.call(getChannelFromMap, activeChannelId);
-      case 2:
         channel = _context23.v;
-        _context23.p = 3;
+        _context23.p = 2;
         if (!channel) {
-          _context23.n = 6;
+          _context23.n = 5;
           break;
         }
         if (!state) {
-          _context23.n = 5;
+          _context23.n = 4;
           break;
         }
-        _context23.n = 4;
+        _context23.n = 3;
         return effects.call(channel.startRecording);
-      case 4:
-        _context23.n = 6;
+      case 3:
+        _context23.n = 5;
         break;
-      case 5:
-        _context23.n = 6;
+      case 4:
+        _context23.n = 5;
         return effects.call(channel.stopRecording);
-      case 6:
-        _context23.n = 8;
+      case 5:
+        _context23.n = 7;
         break;
-      case 7:
-        _context23.p = 7;
+      case 6:
+        _context23.p = 6;
         _t24 = _context23.v;
         log.error('ERROR in send recording', _t24);
-      case 8:
+      case 7:
         return _context23.a(2);
     }
-  }, _marked23, null, [[3, 7]]);
+  }, _marked23, null, [[2, 6]]);
 }
 function clearHistory(action) {
   var payload, channelId, channel, activeChannelId, groupName, _t25;
@@ -17239,7 +17260,7 @@ function sendMessage(action) {
                     } else {
                       var pendingAttachment = getPendingAttachment(attachment.tid);
                       if (!attachment.cachedUrl) {
-                        _setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, updatedAttachment, {
+                        setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, updatedAttachment, {
                           checksum: pendingAttachment.checksum
                         })], 'checksum');
                       }
@@ -17397,7 +17418,7 @@ function sendMessage(action) {
                 });
                 pendingAttachment = getPendingAttachment(messageAttachment[k].tid);
                 if (!messageAttachment[k].cachedUrl) {
-                  _setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, messageResponse.attachments[k], {
+                  setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, messageResponse.attachments[k], {
                     checksum: pendingAttachment.checksum || (pendingAttachment === null || pendingAttachment === void 0 ? void 0 : pendingAttachment.file)
                   })], 'checksum');
                 }
@@ -21014,15 +21035,15 @@ var Channel = function Channel(_ref3) {
       items: filteredItems,
       isTyping: !!filteredItems.find(function (item) {
         return item.typingState;
+      }),
+      isRecording: !!filteredItems.find(function (item) {
+        return item.recordingState;
       })
     };
   }, [typingOrRecordingIndicator]);
-  var isTypingOrRecording = React.useMemo(function () {
-    return typingOrRecording.items.length > 0;
-  }, [typingOrRecording]);
   var MessageText = React.useMemo(function () {
     return /*#__PURE__*/React__default.createElement(ChannelMessageText, {
-      isTypingOrRecording: isTypingOrRecording,
+      isTypingOrRecording: (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping) || (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording),
       user: user,
       contactsMap: contactsMap,
       getFromContacts: getFromContacts,
@@ -21036,7 +21057,7 @@ var Channel = function Channel(_ref3) {
       lastMessage: lastMessage,
       isDirectChannel: isDirectChannel
     });
-  }, [isTypingOrRecording, draftMessageText, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel]);
+  }, [typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping, typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording, draftMessageText, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel]);
   return /*#__PURE__*/React__default.createElement(Container$2, {
     theme: theme,
     selectedChannel: channel.id === activeChannel.id,
@@ -21079,9 +21100,9 @@ var Channel = function Channel(_ref3) {
     unreadMentions: !!(channel.newMentionCount && channel.newMentionCount > 0),
     fontSize: channelLastMessageFontSize,
     height: channelLastMessageHeight
-  }, isTypingOrRecording ? !isDirectChannel ? (/*#__PURE__*/React__default.createElement(LastMessageAuthor, {
+  }, typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping || typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording ? !isDirectChannel ? (/*#__PURE__*/React__default.createElement(LastMessageAuthor, {
     typing: typingOrRecording.isTyping,
-    recording: !typingOrRecording.isTyping,
+    recording: typingOrRecording.isRecording,
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
@@ -21099,11 +21120,11 @@ var Channel = function Channel(_ref3) {
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
-  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !isTypingOrRecording && (isDirectChannel ? !isTypingOrRecording && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : isTypingOrRecording && draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
+  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (isDirectChannel ? !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : ((typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping) || (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording)) && draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
     color: draftMessageText && warningColor || textPrimary
   }, ": ")), /*#__PURE__*/React__default.createElement(LastMessageText, {
     color: textSecondary,
-    withAttachments: !!(lastMessage && lastMessage.attachments && lastMessage.attachments.length && lastMessage.attachments[0].type !== attachmentTypes.link) && !isTypingOrRecording,
+    withAttachments: !!(lastMessage && lastMessage.attachments && lastMessage.attachments.length && lastMessage.attachments[0].type !== attachmentTypes.link) && (!(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) || !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording)),
     noBody: lastMessage && !lastMessage.body,
     deletedMessage: lastMessage && lastMessage.state === MESSAGE_STATUS.DELETE
   }, MessageText)))), /*#__PURE__*/React__default.createElement(ChannelStatus, {
@@ -21619,7 +21640,7 @@ var Container$4 = styled__default.div(_templateObject$8 || (_templateObject$8 =
 }, function (props) {
   return props.height ? props.height + "px" : '0px';
 }, function (props) {
-  return props.background + "40";
+  return props.background + "66";
 });
 
 var _templateObject$9, _templateObject2$8, _templateObject3$5, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject0$2, _templateObject1$2;
@@ -24063,7 +24084,7 @@ var Container$a = styled__default.div(_templateObject$j || (_templateObject$j =
 }, function (props) {
   return props.dateDividerTextColor;
 }, function (props) {
-  return props.dateDividerBackgroundColor + "40";
+  return props.dateDividerBackgroundColor + "66";
 }, function (props) {
   return props.dateDividerBorderRadius || '14px';
 }, function (props) {
@@ -25593,7 +25614,7 @@ var SliderPopup = function SliderPopup(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -25848,7 +25869,7 @@ var Container$c = styled__default.div(_templateObject$p || (_templateObject$p =
 }, function (props) {
   return props.textColor;
 }, function (props) {
-  return props.backgroundColor + "40";
+  return props.backgroundColor + "66";
 }, function (props) {
   return props.border;
 }, function (props) {
@@ -26896,7 +26917,7 @@ var VideoTime = styled__default.div(_templateObject2$o || (_templateObject2$o =
 }, function (props) {
   return props.isRepliedMessage ? '0 3px' : '4px 6px';
 }, function (props) {
-  return props.messageTimeBackgroundColor + "40";
+  return props.messageTimeBackgroundColor + "66";
 }, function (props) {
   return props.color;
 }, function (props) {
@@ -29510,7 +29531,7 @@ var Attachment = function Attachment(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -29560,7 +29581,7 @@ var Attachment = function Attachment(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -29667,7 +29688,7 @@ var Attachment = function Attachment(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -30839,7 +30860,7 @@ var MessageStatusAndTime = function MessageStatusAndTime(_ref) {
   }))));
 };
 var MessageStatusAndTime$1 = /*#__PURE__*/React__default.memo(MessageStatusAndTime, function (prevProps, nextProps) {
-  return prevProps.message.state === nextProps.message.state && prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.createdAt === nextProps.message.createdAt && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageTimeVisible === nextProps.messageTimeVisible && prevProps.messageStatusVisible === nextProps.messageStatusVisible && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.bottomOfMessage === nextProps.bottomOfMessage && prevProps.marginBottom === nextProps.marginBottom && prevProps.messageTimeColorOnAttachment === nextProps.messageTimeColorOnAttachment;
+  return prevProps.message.state === nextProps.message.state && prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.createdAt === nextProps.message.createdAt && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageTimeVisible === nextProps.messageTimeVisible && prevProps.messageStatusVisible === nextProps.messageStatusVisible && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.bottomOfMessage === nextProps.bottomOfMessage && prevProps.marginBottom === nextProps.marginBottom && prevProps.messageTimeColorOnAttachment === nextProps.messageTimeColorOnAttachment && prevProps.withAttachment === nextProps.withAttachment;
 });
 var MessageStatus = styled__default.span(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.height || '14px';
@@ -30858,7 +30879,7 @@ var MessageStatusAndTimeContainer = styled__default.span(_templateObject3$o || (
 }, function (props) {
   return props.withAttachment && '4px 6px';
 }, function (props) {
-  return props.withAttachment && !props.fileAttachment && props.messageTimeBackgroundColor + "40";
+  return props.withAttachment && !props.fileAttachment && props.messageTimeBackgroundColor + "66";
 }, function (props) {
   return props.lineHeight || '14px';
 }, function (props) {
@@ -30914,7 +30935,7 @@ var OGMetadata = function OGMetadata(_ref) {
             var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
             return Promise.resolve(queryBuilder.build()).then(function (query) {
               return Promise.resolve(query.loadOGData()).then(function (metadata) {
-                return Promise.resolve(storeMetadata(url.replace('https://', ''), metadata)).then(function () {
+                return Promise.resolve(storeMetadata(url.replace('https://', '').replace('http://', ''), metadata)).then(function () {
                   setMetadata(metadata);
                 });
               });
@@ -30936,7 +30957,7 @@ var OGMetadata = function OGMetadata(_ref) {
     if (attachment !== null && attachment !== void 0 && attachment.id && !metadata) {
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
-        getMetadata(url.replace('https://', '')).then(function (cachedMetadata) {
+        getMetadata(url.replace('https://', '').replace('http://', '')).then(function (cachedMetadata) {
           try {
             if (cachedMetadata) {
               setMetadata(cachedMetadata);
@@ -33337,7 +33358,7 @@ var MessageTopDate = styled__default.div(_templateObject4$o || (_templateObject4
 }, function (props) {
   return props.dateDividerTextColor;
 }, function (props) {
-  return props.dateDividerBackgroundColor + "40";
+  return props.dateDividerBackgroundColor + "66";
 }, function (props) {
   return props.dateDividerBorder;
 }, function (props) {
@@ -35381,19 +35402,19 @@ var AudioRecord = function AudioRecord(_ref) {
   }, [currentRecordedFile]);
   var dispatch = reactRedux.useDispatch();
   var handleStartRecording = function handleStartRecording() {
-    dispatch(sendRecordingAC(true));
+    dispatch(sendRecordingAC(true, currentChannelId));
     if (sendingInterval) {
       clearInterval(sendingInterval);
       setSendingInterval(null);
       return;
     }
     var interval = setInterval(function () {
-      dispatch(sendRecordingAC(true));
+      dispatch(sendRecordingAC(true, currentChannelId));
     }, 1000);
     setSendingInterval(interval);
   };
   var handleStopRecording = function handleStopRecording() {
-    dispatch(sendRecordingAC(false));
+    dispatch(sendRecordingAC(false, currentChannelId));
     if (sendingInterval) {
       clearInterval(sendingInterval);
       setSendingInterval(null);
@@ -35547,10 +35568,9 @@ var AudioRecord = function AudioRecord(_ref) {
       return Promise.resolve(_catch(function () {
         var _wavesurfer$current3;
         function _temp3(_result3) {
+          var _wavesurfer$current$i, _wavesurfer$current$i2;
           if (_exit) return _result3;
-          if (draft) {
-            return;
-          }
+          setCurrentTime(((_wavesurfer$current$i = wavesurfer.current[id]) === null || _wavesurfer$current$i === void 0 ? void 0 : (_wavesurfer$current$i2 = _wavesurfer$current$i.decodedData) === null || _wavesurfer$current$i2 === void 0 ? void 0 : _wavesurfer$current$i2.duration) || 0);
           wavesurfer.current[id].on('ready', function () {
             setRecordingIsReadyToPlay(true);
             var audioDuration = wavesurfer.current[id].getDuration();
@@ -35662,7 +35682,6 @@ var AudioRecord = function AudioRecord(_ref) {
     recorder.stop().getMp3().then(function (_ref4) {
       var buffer = _ref4[0],
         blob = _ref4[1];
-      setCurrentTime(0);
       var file = new File(buffer, 'record.mp3', {
         type: blob.type,
         lastModified: Date.now()
@@ -35728,15 +35747,12 @@ var AudioRecord = function AudioRecord(_ref) {
     if ((_wavesurfer$current5 = wavesurfer.current) !== null && _wavesurfer$current5 !== void 0 && _wavesurfer$current5[cId || currentChannelId]) {
       if (!wavesurfer.current[cId || currentChannelId].isPlaying()) {
         setPlayAudio(true);
-        handleStartRecording();
         intervalRef.current[cId || currentChannelId] = setInterval(function () {
           var currentTime = wavesurfer.current[cId || currentChannelId].getCurrentTime();
           if (currentTime >= 0) {
             setCurrentTime(currentTime);
           }
         }, 10);
-      } else {
-        handleStopRecording();
       }
       wavesurfer.current[cId || currentChannelId].playPause();
     }
@@ -35852,6 +35868,7 @@ var AudioRecord = function AudioRecord(_ref) {
       setRecordedFile(audioRecording || null);
       setRecordingIsReadyToPlay(!!audioRecording);
     }
+    handleStopRecording();
     setCurrentChannelId(channelId);
   }, [channelId]);
   return /*#__PURE__*/React__default.createElement(Container$j, {
@@ -36875,7 +36892,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
             }
             var dataFromDb;
             var _temp11 = _catch(function () {
-              return Promise.resolve(_getDataFromDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, checksumHash, 'checksum')).then(function (_getDataFromDB) {
+              return Promise.resolve(getDataFromDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, checksumHash, 'checksum')).then(function (_getDataFromDB) {
                 dataFromDb = _getDataFromDB;
               });
             }, function (e) {
@@ -37215,16 +37232,21 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       }
     };
   }, []);
-  var filteredTypingOrRecordingIndicator = React.useMemo(function () {
-    return typingOrRecordingIndicator ? Object.values(typingOrRecordingIndicator).filter(function (item) {
+  var typingOrRecording = React.useMemo(function () {
+    var dataValues = typingOrRecordingIndicator ? Object.values(typingOrRecordingIndicator) : [];
+    var filteredItems = dataValues.filter(function (item) {
       return item.typingState || item.recordingState;
-    }) : [];
-  }, [typingOrRecordingIndicator]);
-  var isTyping = React.useMemo(function () {
-    return !!filteredTypingOrRecordingIndicator.find(function (item) {
-      return item.typingState;
     });
-  }, [filteredTypingOrRecordingIndicator]);
+    return {
+      items: filteredItems,
+      isTyping: !!filteredItems.find(function (item) {
+        return item.typingState;
+      }),
+      isRecording: !!filteredItems.find(function (item) {
+        return item.recordingState;
+      })
+    };
+  }, [typingOrRecordingIndicator]);
   var formatTypingIndicatorText = function formatTypingIndicatorText(users, maxShownUsers) {
     if (maxShownUsers === void 0) {
       maxShownUsers = 3;
@@ -37233,7 +37255,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     if (users.length === 1) {
       var _user = users[0];
       var userName = makeUsername(getFromContacts && _user.from && contactsMap[_user.from.id], _user.from, getFromContacts);
-      return "" + userName + (isTyping ? activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is typing' : '' : activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is recording' : '');
+      return "" + userName + (typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping ? activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is typing' : '' : activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is recording' : '');
     }
     if (users.length <= maxShownUsers) {
       var userNames = users.map(function (user) {
@@ -37303,8 +37325,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, "Join")) : (activeChannel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || activeChannel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? !(activeChannel.userRole === 'admin' || activeChannel.userRole === 'owner') : activeChannel.type !== DEFAULT_CHANNEL_TYPE.DIRECT && !checkActionPermission('sendMessage')) ? (/*#__PURE__*/React__default.createElement(ReadOnlyCont, {
     color: textPrimary,
     iconColor: accentColor
-  }, /*#__PURE__*/React__default.createElement(SvgEye, null), " Read only")) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TypingIndicator$1, null, filteredTypingOrRecordingIndicator.length > 0 && (CustomTypingIndicator ? (/*#__PURE__*/React__default.createElement(CustomTypingIndicator, {
-    from: filteredTypingOrRecordingIndicator.map(function (item) {
+  }, /*#__PURE__*/React__default.createElement(SvgEye, null), " Read only")) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TypingIndicator$1, null, (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.items.length) > 0 && (CustomTypingIndicator ? (/*#__PURE__*/React__default.createElement(CustomTypingIndicator, {
+    from: typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.items.map(function (item) {
       return {
         id: item.from.id,
         name: item.from.name,
@@ -37314,7 +37336,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     })
   })) : (/*#__PURE__*/React__default.createElement(TypingIndicatorCont, null, /*#__PURE__*/React__default.createElement(TypingFrom, {
     color: textSecondary
-  }, formatTypingIndicatorText(filteredTypingOrRecordingIndicator, 3)), isTyping ? (/*#__PURE__*/React__default.createElement(TypingAnimation, {
+  }, formatTypingIndicatorText(typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.items, 3)), typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping ? (/*#__PURE__*/React__default.createElement(TypingAnimation, {
     borderColor: iconInactive
   }, /*#__PURE__*/React__default.createElement(DotOne, null), /*#__PURE__*/React__default.createElement(DotTwo, null), /*#__PURE__*/React__default.createElement(DotThree, null))) : (/*#__PURE__*/React__default.createElement(RecordingAnimation, {
     borderColor: iconInactive
@@ -39084,7 +39106,7 @@ var Files = function Files(_ref) {
       text: '',
       styles: {
         background: {
-          fill: overlayBackground2 + "40"
+          fill: overlayBackground2 + "66"
         },
         path: {
           stroke: accentColor,