sceyt-chat-react-uikit 1.8.3-beta.7 → 1.8.3-beta.9

package/index.js

@@ -13,6 +13,7 @@ var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 var LinkifyIt = _interopDefault(require('linkify-it'));
 var Pica = _interopDefault(require('pica'));
+var reactDom = require('react-dom');
 var Cropper = _interopDefault(require('react-easy-crop'));
 var reactCircularProgressbar = require('react-circular-progressbar');
 var ffmpeg = require('@ffmpeg/ffmpeg');
@@ -25,7 +26,6 @@ var LexicalRichTextPlugin = require('@lexical/react/LexicalRichTextPlugin');
 var LexicalErrorBoundary = _interopDefault(require('@lexical/react/LexicalErrorBoundary'));
 var LexicalOnChangePlugin = require('@lexical/react/LexicalOnChangePlugin');
 var LexicalTypeaheadMenuPlugin = require('@lexical/react/LexicalTypeaheadMenuPlugin');
-var reactDom = require('react-dom');
 var offset = require('@lexical/offset');
 var MicRecorder = _interopDefault(require('mic-recorder-to-mp3'));
 var LexicalHistoryPlugin = require('@lexical/react/LexicalHistoryPlugin');
@@ -9069,6 +9069,101 @@ var _extractTextFromReactElement = function extractTextFromReactElement(element)
   }
   return '';
 };
+var escapeHTML = function escapeHTML(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+};
+var setsEqual = function setsEqual(a, b) {
+  if (a.size !== b.size) return false;
+  var equal = true;
+  a.forEach(function (item) {
+    if (!b.has(item)) equal = false;
+  });
+  return equal;
+};
+var wrapWithFormatTags = function wrapWithFormatTags(text, formats) {
+  var result = text;
+  if (formats.has('monospace')) result = "<code>" + result + "</code>";
+  if (formats.has('strikethrough')) result = "<s>" + result + "</s>";
+  if (formats.has('underline')) result = "<u>" + result + "</u>";
+  if (formats.has('italic')) result = "<i>" + result + "</i>";
+  if (formats.has('bold')) result = "<b>" + result + "</b>";
+  return result;
+};
+var bodyAttributesToHTML = function bodyAttributesToHTML(body, bodyAttributes, mentionedUsers, contactsMap, getFromContacts) {
+  if (!body) return '';
+  if (!bodyAttributes || bodyAttributes.length === 0) {
+    return escapeHTML(body);
+  }
+  var charFormats = Array.from({
+    length: body.length
+  }, function () {
+    return new Set();
+  });
+  var mentionRanges = new Map();
+  var _loop = function _loop() {
+    var attr = _step2.value;
+    var start = attr.offset;
+    var end = Math.min(attr.offset + attr.length, body.length);
+    if (attr.type === 'mention') {
+      var mentionUser = mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.find(function (u) {
+        return u.id === attr.metadata;
+      });
+      var displayName;
+      if (mentionUser) {
+        var contact = contactsMap === null || contactsMap === void 0 ? void 0 : contactsMap[mentionUser.id];
+        displayName = "@" + makeUsername(contact, mentionUser, getFromContacts).trim();
+      } else {
+        displayName = body.slice(start, end);
+      }
+      mentionRanges.set(start, {
+        userId: attr.metadata,
+        displayName: displayName,
+        length: attr.length
+      });
+    } else {
+      var types = attr.type.split(' ');
+      var _loop2 = function _loop2(_i) {
+        types.forEach(function (t) {
+          return charFormats[_i].add(t);
+        });
+      };
+      for (var _i = start; _i < end; _i++) {
+        _loop2(_i);
+      }
+    }
+  };
+  for (var _iterator2 = _createForOfIteratorHelperLoose(bodyAttributes), _step2; !(_step2 = _iterator2()).done;) {
+    _loop();
+  }
+  var html = '';
+  var i = 0;
+  while (i < body.length) {
+    var mention = mentionRanges.get(i);
+    if (mention) {
+      var formats = new Set(charFormats[i]);
+      var wrapped = "<span data-mention=\"" + escapeHTML(mention.userId) + "\">" + escapeHTML(mention.displayName) + "</span>";
+      if (formats.size > 0) {
+        wrapped = wrapWithFormatTags(wrapped, formats);
+      }
+      html += wrapped;
+      i += mention.length;
+      continue;
+    }
+    var currentFormats = charFormats[i];
+    var segmentEnd = i + 1;
+    while (segmentEnd < body.length && !mentionRanges.has(segmentEnd) && setsEqual(charFormats[segmentEnd], currentFormats)) {
+      segmentEnd++;
+    }
+    var segmentText = body.slice(i, segmentEnd);
+    if (currentFormats.size === 0) {
+      html += escapeHTML(segmentText);
+    } else {
+      html += wrapWithFormatTags(escapeHTML(segmentText), currentFormats);
+    }
+    i = segmentEnd;
+  }
+  return html;
+};
 var checkIsTypeKeyPressed = function checkIsTypeKeyPressed(code) {
   return !(code === 'Enter' || code === 'NumpadEnter' || code === 'Backspace' || code === 'Delete' || code === 'ArrowLeft' || code === 'ArrowRight' || code === 'ArrowUp' || code === 'ArrowDown' || code === 'PageUp' || code === 'PageDown' || code === 'Home' || code === 'End' || code === 'Insert' || code === 'Escape' || code === 'Tab' || code === 'F1' || code === 'F2' || code === 'F3' || code === 'F4' || code === 'F5' || code === 'F6' || code === 'F7' || code === 'F8' || code === 'F9' || code === 'F10' || code === 'F11' || code === 'F12' || code === 'CapsLock' || code === 'Shift' || code === 'ShiftLeft' || code === 'ShiftRight' || code === 'Control' || code === 'ControlLeft' || code === 'ControlRight' || code === 'Alt' || code === 'AltLeft' || code === 'AltRight' || code === 'MetaLeft' || code === 'MetaRight' || code === 'Space' || code === 'Enter' || code === 'NumpadEnter' || code === 'Backspace' || code === 'Delete' || code === 'ArrowLeft' || code === 'ArrowRight' || code === 'ArrowUp' || code === 'ArrowDown' || code === 'PageUp' || code === 'PageDown' || code === 'Home' || code === 'End' || code === 'Insert' || code === 'Escape' || code === 'Tab' || code === 'F1' || code === 'F2' || code === 'F3' || code === 'F4' || code === 'F5' || code === 'F6' || code === 'F7' || code === 'F8' || code === 'F9' || code === 'F10' || code === 'F11' || code === 'F12' || code === 'Shift');
 };
@@ -11733,7 +11828,6 @@ var initialState$1 = {
   attachmentForPopupLoadingState: null,
   messageToEdit: null,
   activeChannelNewMessage: null,
-  pendingMessages: {},
   activeChannelMessageUpdated: null,
   scrollToNewMessage: {
     scrollToBottom: false,
@@ -20339,7 +20433,7 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
         var video = document.createElement('video');
         video.preload = 'metadata';
         video.muted = true;
-        video.crossOrigin = 'anonymous';
+        video.setAttribute('playsinline', 'true');
         if (videoSrc instanceof Blob) {
           video.src = URL.createObjectURL(videoSrc);
         } else {
@@ -20393,7 +20487,24 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
           videoUrlCreated = true;
           video.currentTime = 0.01;
           video.onseeked = function () {
-            extractFrame();
+            video.onseeked = null;
+            var capture = function capture() {
+              return requestAnimationFrame(extractFrame);
+            };
+            video.play().then(function () {
+              var done = false;
+              var _finish = function finish() {
+                if (done) return;
+                done = true;
+                video.removeEventListener('timeupdate', _finish);
+                video.removeEventListener('ended', _finish);
+                video.pause();
+                capture();
+              };
+              video.addEventListener('timeupdate', _finish);
+              video.addEventListener('ended', _finish);
+              setTimeout(_finish, 500);
+            })["catch"](capture);
           };
           video.onerror = function (error) {
             log.error('Error seeking video for frame extraction', error);
@@ -20415,52 +20526,72 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
     return Promise.reject(e);
   }
 };
-var getFrame = function getFrame(videoSrc, time) {
+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 {
+      if (!videoSrc) {
         reject(new Error('src not found'));
+        return;
       }
+      var video = document.createElement('video');
+      video.preload = 'metadata';
+      video.muted = true;
+      video.setAttribute('playsinline', 'true');
+      video.src = videoSrc;
+      video.onloadedmetadata = function () {
+        try {
+          var _video$duration;
+          var origWidth = video.videoWidth;
+          var origHeight = video.videoHeight;
+          var duration = Number((_video$duration = video.duration) === null || _video$duration === void 0 ? void 0 : _video$duration.toFixed(0));
+          var _calculateSize = calculateSize(origWidth, origHeight, 100, 100),
+            newWidth = _calculateSize[0],
+            newHeight = _calculateSize[1];
+          return Promise.resolve(_catch(function () {
+            return Promise.resolve(getVideoFirstFrame(videoSrc, newWidth, newHeight)).then(function (frameResult) {
+              if (!frameResult) {
+                reject(new Error('Failed to extract video frame'));
+                return;
+              }
+              var img = document.createElement('img');
+              img.onload = function () {
+                var canvas = document.createElement('canvas');
+                canvas.width = newWidth;
+                canvas.height = newHeight;
+                var ctx = canvas.getContext('2d');
+                if (!ctx) {
+                  URL.revokeObjectURL(frameResult.frameBlobUrl);
+                  reject(new Error('Failed to get canvas context'));
+                  return;
+                }
+                ctx.drawImage(img, 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);
+                URL.revokeObjectURL(frameResult.frameBlobUrl);
+                resolve({
+                  thumb: thumb,
+                  width: origWidth,
+                  height: origHeight,
+                  duration: duration
+                });
+              };
+              img.onerror = function () {
+                URL.revokeObjectURL(frameResult.frameBlobUrl);
+                reject(new Error('Failed to load frame image'));
+              };
+              img.src = frameResult.frameBlobUrl;
+            });
+          }, function (err) {
+            reject(err);
+          }));
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      };
+      video.onerror = function () {
+        reject(new Error('Failed to load video'));
+      };
     }));
   } catch (e) {
     return Promise.reject(e);
@@ -20472,8 +20603,8 @@ var compressAndCacheImage = function compressAndCacheImage(url, cacheKey, maxWid
       return Promise.resolve(fetch(url)).then(function (response) {
         return Promise.resolve(response.blob()).then(function (blob) {
           var _exit = false;
-          function _temp2(_result) {
-            if (_exit) return _result;
+          function _temp2(_result2) {
+            if (_exit) return _result2;
             setAttachmentToCache(cacheKey, response);
             return '';
           }
@@ -25778,9 +25909,9 @@ var PopupContainer = function PopupContainer(_ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/React__default.createElement(Container, {
+  return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React__default.createElement(Container, {
     backgroundColor: bgColor || overlayBackground
-  }, children);
+  }, children), document.body);
 };
 var Container = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  direction: initial;\n  position: fixed;\n  top: 0;\n  left: 0;\n  //top: ", ";\n  //left: ", ";\n  z-index: 200;\n  //width: ", ";\n  //height: ", ";\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n"])), function (props) {
   return props.top ? props.top + "px" : '0px';
@@ -25958,6 +26089,9 @@ var pollVotesHasMoreSelector = function pollVotesHasMoreSelector(store) {
 var pollVotesLoadingStateSelector = function pollVotesLoadingStateSelector(store) {
   return store.MessageReducer.pollVotesLoadingState;
 };
+var pendingMessagesMapSelector = function pendingMessagesMapSelector(store) {
+  return store.MessageReducer.pendingMessagesMap;
+};
 var unreadScrollToSelector = function unreadScrollToSelector(store) {
   return store.MessageReducer.unreadScrollTo;
 };
@@ -27162,7 +27296,7 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     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
-  }), !!(lastMessage && lastMessage.id) && !isViewOnce && MessageTextFormat({
+  }), !!lastMessage && !isViewOnce && MessageTextFormat({
     text: lastMessage.body,
     message: lastMessage,
     contactsMap: contactsMap,
@@ -27233,7 +27367,17 @@ var Channel = function Channel(_ref3) {
   var _useState2 = React.useState(),
     draftMessage = _useState2[0],
     setDraftMessage = _useState2[1];
-  var lastMessage = channel.lastReactedMessage || channel.lastMessage;
+  var pendingMessagesMap = useSelector(pendingMessagesMapSelector);
+  var channelPendingLastMessage = React.useMemo(function () {
+    var messages = pendingMessagesMap[channel.id];
+    if (messages && messages !== null && messages !== void 0 && messages.length) {
+      return messages[(messages === null || messages === void 0 ? void 0 : messages.length) - 1];
+    }
+    return null;
+  }, [pendingMessagesMap]);
+  var lastMessage = React.useMemo(function () {
+    return channelPendingLastMessage || channel.lastReactedMessage || channel.lastMessage;
+  }, [channelPendingLastMessage, channel.lastReactedMessage, channel.lastMessage]);
   var lastMessageMetas = lastMessage && lastMessage.type === exports.MESSAGE_TYPE.SYSTEM && lastMessage.metadata && (isJSON(lastMessage.metadata) ? JSON.parse(lastMessage.metadata) : lastMessage.metadata);
   var _useState3 = React.useState(0),
     statusWidth = _useState3[0],
@@ -33736,1879 +33880,6 @@ function SvgPause(props) {
   })));
 }
 
-/** A simple event emitter that can be used to listen to and emit events. */
-class EventEmitter {
-    constructor() {
-        this.listeners = {};
-    }
-    /** Subscribe to an event. Returns an unsubscribe function. */
-    on(event, listener, options) {
-        if (!this.listeners[event]) {
-            this.listeners[event] = new Set();
-        }
-        this.listeners[event].add(listener);
-        if (options === null || options === void 0 ? void 0 : options.once) {
-            const unsubscribeOnce = () => {
-                this.un(event, unsubscribeOnce);
-                this.un(event, listener);
-            };
-            this.on(event, unsubscribeOnce);
-            return unsubscribeOnce;
-        }
-        return () => this.un(event, listener);
-    }
-    /** Unsubscribe from an event */
-    un(event, listener) {
-        var _a;
-        (_a = this.listeners[event]) === null || _a === void 0 ? void 0 : _a.delete(listener);
-    }
-    /** Subscribe to an event only once */
-    once(event, listener) {
-        return this.on(event, listener, { once: true });
-    }
-    /** Clear all events */
-    unAll() {
-        this.listeners = {};
-    }
-    /** Emit an event */
-    emit(eventName, ...args) {
-        if (this.listeners[eventName]) {
-            this.listeners[eventName].forEach((listener) => listener(...args));
-        }
-    }
-}
-
-/** Base class for wavesurfer plugins */
-class BasePlugin extends EventEmitter {
-    /** Create a plugin instance */
-    constructor(options) {
-        super();
-        this.subscriptions = [];
-        this.isDestroyed = false;
-        this.options = options;
-    }
-    /** Called after this.wavesurfer is available */
-    onInit() {
-        return;
-    }
-    /** Do not call directly, only called by WavesSurfer internally */
-    _init(wavesurfer) {
-        // Reset state if plugin was previously destroyed
-        if (this.isDestroyed) {
-            this.subscriptions = [];
-            this.isDestroyed = false;
-        }
-        this.wavesurfer = wavesurfer;
-        this.onInit();
-    }
-    /** Destroy the plugin and unsubscribe from all events */
-    destroy() {
-        this.emit('destroy');
-        this.subscriptions.forEach((unsubscribe) => unsubscribe());
-        this.subscriptions = [];
-        this.isDestroyed = true;
-        this.wavesurfer = undefined;
-    }
-}
-
-var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/** Decode an array buffer into an audio buffer */
-function decode(audioData, sampleRate) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const audioCtx = new AudioContext({ sampleRate });
-        const decode = audioCtx.decodeAudioData(audioData);
-        return decode.finally(() => audioCtx.close());
-    });
-}
-/** Normalize peaks to -1..1 */
-function normalize(channelData) {
-    const firstChannel = channelData[0];
-    if (firstChannel.some((n) => n > 1 || n < -1)) {
-        const length = firstChannel.length;
-        let max = 0;
-        for (let i = 0; i < length; i++) {
-            const absN = Math.abs(firstChannel[i]);
-            if (absN > max)
-                max = absN;
-        }
-        for (const channel of channelData) {
-            for (let i = 0; i < length; i++) {
-                channel[i] /= max;
-            }
-        }
-    }
-    return channelData;
-}
-/** Create an audio buffer from pre-decoded audio data */
-function createBuffer(channelData, duration) {
-    // If a single array of numbers is passed, make it an array of arrays
-    if (typeof channelData[0] === 'number')
-        channelData = [channelData];
-    // Normalize to -1..1
-    normalize(channelData);
-    return {
-        duration,
-        length: channelData[0].length,
-        sampleRate: channelData[0].length / duration,
-        numberOfChannels: channelData.length,
-        getChannelData: (i) => channelData === null || channelData === void 0 ? void 0 : channelData[i],
-        copyFromChannel: AudioBuffer.prototype.copyFromChannel,
-        copyToChannel: AudioBuffer.prototype.copyToChannel,
-    };
-}
-const Decoder = {
-    decode,
-    createBuffer,
-};
-
-function renderNode(tagName, content) {
-    const element = content.xmlns
-        ? document.createElementNS(content.xmlns, tagName)
-        : document.createElement(tagName);
-    for (const [key, value] of Object.entries(content)) {
-        if (key === 'children' && value) {
-            for (const [childTag, childValue] of Object.entries(value)) {
-                if (childValue instanceof Node) {
-                    element.appendChild(childValue);
-                }
-                else if (typeof childValue === 'string') {
-                    element.appendChild(document.createTextNode(childValue));
-                }
-                else {
-                    element.appendChild(renderNode(childTag, childValue));
-                }
-            }
-        }
-        else if (key === 'style') {
-            Object.assign(element.style, value);
-        }
-        else if (key === 'textContent') {
-            element.textContent = value;
-        }
-        else {
-            element.setAttribute(key, value.toString());
-        }
-    }
-    return element;
-}
-function createElement(tagName, content, container) {
-    const el = renderNode(tagName, content || {});
-    container === null || container === void 0 ? void 0 : container.appendChild(el);
-    return el;
-}
-
-var dom = {
-  __proto__: null,
-  createElement: createElement,
-  'default': createElement
-};
-
-var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-function watchProgress(response, progressCallback) {
-    return __awaiter$1(this, void 0, void 0, function* () {
-        if (!response.body || !response.headers)
-            return;
-        const reader = response.body.getReader();
-        const contentLength = Number(response.headers.get('Content-Length')) || 0;
-        let receivedLength = 0;
-        // Process the data
-        const processChunk = (value) => __awaiter$1(this, void 0, void 0, function* () {
-            // Add to the received length
-            receivedLength += (value === null || value === void 0 ? void 0 : value.length) || 0;
-            const percentage = Math.round((receivedLength / contentLength) * 100);
-            progressCallback(percentage);
-        });
-        const read = () => __awaiter$1(this, void 0, void 0, function* () {
-            let data;
-            try {
-                data = yield reader.read();
-            }
-            catch (_a) {
-                // Ignore errors because we can only handle the main response
-                return;
-            }
-            // Continue reading data until done
-            if (!data.done) {
-                processChunk(data.value);
-                yield read();
-            }
-        });
-        read();
-    });
-}
-function fetchBlob(url, progressCallback, requestInit) {
-    return __awaiter$1(this, void 0, void 0, function* () {
-        // Fetch the resource
-        const response = yield fetch(url, requestInit);
-        if (response.status >= 400) {
-            throw new Error(`Failed to fetch ${url}: ${response.status} (${response.statusText})`);
-        }
-        // Read the data to track progress
-        watchProgress(response.clone(), progressCallback);
-        return response.blob();
-    });
-}
-const Fetcher = {
-    fetchBlob,
-};
-
-var __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-class Player extends EventEmitter {
-    constructor(options) {
-        super();
-        this.isExternalMedia = false;
-        if (options.media) {
-            this.media = options.media;
-            this.isExternalMedia = true;
-        }
-        else {
-            this.media = document.createElement('audio');
-        }
-        // Controls
-        if (options.mediaControls) {
-            this.media.controls = true;
-        }
-        // Autoplay
-        if (options.autoplay) {
-            this.media.autoplay = true;
-        }
-        // Speed
-        if (options.playbackRate != null) {
-            this.onMediaEvent('canplay', () => {
-                if (options.playbackRate != null) {
-                    this.media.playbackRate = options.playbackRate;
-                }
-            }, { once: true });
-        }
-    }
-    onMediaEvent(event, callback, options) {
-        this.media.addEventListener(event, callback, options);
-        return () => this.media.removeEventListener(event, callback, options);
-    }
-    getSrc() {
-        return this.media.currentSrc || this.media.src || '';
-    }
-    revokeSrc() {
-        const src = this.getSrc();
-        if (src.startsWith('blob:')) {
-            URL.revokeObjectURL(src);
-        }
-    }
-    canPlayType(type) {
-        return this.media.canPlayType(type) !== '';
-    }
-    setSrc(url, blob) {
-        const prevSrc = this.getSrc();
-        if (url && prevSrc === url)
-            return; // no need to change the source
-        this.revokeSrc();
-        const newSrc = blob instanceof Blob && (this.canPlayType(blob.type) || !url) ? URL.createObjectURL(blob) : url;
-        // Reset the media element, otherwise it keeps the previous source
-        if (prevSrc) {
-            this.media.removeAttribute('src');
-        }
-        if (newSrc || url) {
-            try {
-                this.media.src = newSrc;
-            }
-            catch (_a) {
-                this.media.src = url;
-            }
-        }
-    }
-    destroy() {
-        if (this.isExternalMedia)
-            return;
-        this.media.pause();
-        this.media.remove();
-        this.revokeSrc();
-        this.media.removeAttribute('src');
-        // Load resets the media element to its initial state
-        this.media.load();
-    }
-    setMediaElement(element) {
-        this.media = element;
-    }
-    /** Start playing the audio */
-    play() {
-        return __awaiter$2(this, void 0, void 0, function* () {
-            try {
-                return yield this.media.play();
-            }
-            catch (err) {
-                if (err instanceof DOMException && err.name === 'AbortError') {
-                    return;
-                }
-                throw err;
-            }
-        });
-    }
-    /** Pause the audio */
-    pause() {
-        this.media.pause();
-    }
-    /** Check if the audio is playing */
-    isPlaying() {
-        return !this.media.paused && !this.media.ended;
-    }
-    /** Jump to a specific time in the audio (in seconds) */
-    setTime(time) {
-        this.media.currentTime = Math.max(0, Math.min(time, this.getDuration()));
-    }
-    /** Get the duration of the audio in seconds */
-    getDuration() {
-        return this.media.duration;
-    }
-    /** Get the current audio position in seconds */
-    getCurrentTime() {
-        return this.media.currentTime;
-    }
-    /** Get the audio volume */
-    getVolume() {
-        return this.media.volume;
-    }
-    /** Set the audio volume */
-    setVolume(volume) {
-        this.media.volume = volume;
-    }
-    /** Get the audio muted state */
-    getMuted() {
-        return this.media.muted;
-    }
-    /** Mute or unmute the audio */
-    setMuted(muted) {
-        this.media.muted = muted;
-    }
-    /** Get the playback speed */
-    getPlaybackRate() {
-        return this.media.playbackRate;
-    }
-    /** Check if the audio is seeking */
-    isSeeking() {
-        return this.media.seeking;
-    }
-    /** Set the playback speed, pass an optional false to NOT preserve the pitch */
-    setPlaybackRate(rate, preservePitch) {
-        // preservePitch is true by default in most browsers
-        if (preservePitch != null) {
-            this.media.preservesPitch = preservePitch;
-        }
-        this.media.playbackRate = rate;
-    }
-    /** Get the HTML media element */
-    getMediaElement() {
-        return this.media;
-    }
-    /** Set a sink id to change the audio output device */
-    setSinkId(sinkId) {
-        // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId
-        const media = this.media;
-        return media.setSinkId(sinkId);
-    }
-}
-
-function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButton = 0, touchDelay = 100) {
-    if (!element)
-        return () => void 0;
-    const isTouchDevice = matchMedia('(pointer: coarse)').matches;
-    let unsubscribeDocument = () => void 0;
-    const onPointerDown = (event) => {
-        if (event.button !== mouseButton)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        let startX = event.clientX;
-        let startY = event.clientY;
-        let isDragging = false;
-        const touchStartTime = Date.now();
-        const onPointerMove = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (isTouchDevice && Date.now() - touchStartTime < touchDelay)
-                return;
-            const x = event.clientX;
-            const y = event.clientY;
-            const dx = x - startX;
-            const dy = y - startY;
-            if (isDragging || Math.abs(dx) > threshold || Math.abs(dy) > threshold) {
-                const rect = element.getBoundingClientRect();
-                const { left, top } = rect;
-                if (!isDragging) {
-                    onStart === null || onStart === void 0 ? void 0 : onStart(startX - left, startY - top);
-                    isDragging = true;
-                }
-                onDrag(dx, dy, x - left, y - top);
-                startX = x;
-                startY = y;
-            }
-        };
-        const onPointerUp = (event) => {
-            if (isDragging) {
-                const x = event.clientX;
-                const y = event.clientY;
-                const rect = element.getBoundingClientRect();
-                const { left, top } = rect;
-                onEnd === null || onEnd === void 0 ? void 0 : onEnd(x - left, y - top);
-            }
-            unsubscribeDocument();
-        };
-        const onPointerLeave = (e) => {
-            // Listen to events only on the document and not on inner elements
-            if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
-                onPointerUp(e);
-            }
-        };
-        const onClick = (event) => {
-            if (isDragging) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-        };
-        const onTouchMove = (event) => {
-            if (isDragging) {
-                event.preventDefault();
-            }
-        };
-        document.addEventListener('pointermove', onPointerMove);
-        document.addEventListener('pointerup', onPointerUp);
-        document.addEventListener('pointerout', onPointerLeave);
-        document.addEventListener('pointercancel', onPointerLeave);
-        document.addEventListener('touchmove', onTouchMove, { passive: false });
-        document.addEventListener('click', onClick, { capture: true });
-        unsubscribeDocument = () => {
-            document.removeEventListener('pointermove', onPointerMove);
-            document.removeEventListener('pointerup', onPointerUp);
-            document.removeEventListener('pointerout', onPointerLeave);
-            document.removeEventListener('pointercancel', onPointerLeave);
-            document.removeEventListener('touchmove', onTouchMove);
-            setTimeout(() => {
-                document.removeEventListener('click', onClick, { capture: true });
-            }, 10);
-        };
-    };
-    element.addEventListener('pointerdown', onPointerDown);
-    return () => {
-        unsubscribeDocument();
-        element.removeEventListener('pointerdown', onPointerDown);
-    };
-}
-
-var __awaiter$3 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-class Renderer extends EventEmitter {
-    constructor(options, audioElement) {
-        super();
-        this.timeouts = [];
-        this.isScrollable = false;
-        this.audioData = null;
-        this.resizeObserver = null;
-        this.lastContainerWidth = 0;
-        this.isDragging = false;
-        this.subscriptions = [];
-        this.unsubscribeOnScroll = [];
-        this.subscriptions = [];
-        this.options = options;
-        const parent = this.parentFromOptionsContainer(options.container);
-        this.parent = parent;
-        const [div, shadow] = this.initHtml();
-        parent.appendChild(div);
-        this.container = div;
-        this.scrollContainer = shadow.querySelector('.scroll');
-        this.wrapper = shadow.querySelector('.wrapper');
-        this.canvasWrapper = shadow.querySelector('.canvases');
-        this.progressWrapper = shadow.querySelector('.progress');
-        this.cursor = shadow.querySelector('.cursor');
-        if (audioElement) {
-            shadow.appendChild(audioElement);
-        }
-        this.initEvents();
-    }
-    parentFromOptionsContainer(container) {
-        let parent;
-        if (typeof container === 'string') {
-            parent = document.querySelector(container);
-        }
-        else if (container instanceof HTMLElement) {
-            parent = container;
-        }
-        if (!parent) {
-            throw new Error('Container not found');
-        }
-        return parent;
-    }
-    initEvents() {
-        const getClickPosition = (e) => {
-            const rect = this.wrapper.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            const relativeX = x / rect.width;
-            const relativeY = y / rect.height;
-            return [relativeX, relativeY];
-        };
-        // Add a click listener
-        this.wrapper.addEventListener('click', (e) => {
-            const [x, y] = getClickPosition(e);
-            this.emit('click', x, y);
-        });
-        // Add a double click listener
-        this.wrapper.addEventListener('dblclick', (e) => {
-            const [x, y] = getClickPosition(e);
-            this.emit('dblclick', x, y);
-        });
-        // Drag
-        if (this.options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {
-            this.initDrag();
-        }
-        // Add a scroll listener
-        this.scrollContainer.addEventListener('scroll', () => {
-            const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
-            const startX = scrollLeft / scrollWidth;
-            const endX = (scrollLeft + clientWidth) / scrollWidth;
-            this.emit('scroll', startX, endX, scrollLeft, scrollLeft + clientWidth);
-        });
-        // Re-render the waveform on container resize
-        if (typeof ResizeObserver === 'function') {
-            const delay = this.createDelay(100);
-            this.resizeObserver = new ResizeObserver(() => {
-                delay()
-                    .then(() => this.onContainerResize())
-                    .catch(() => undefined);
-            });
-            this.resizeObserver.observe(this.scrollContainer);
-        }
-    }
-    onContainerResize() {
-        const width = this.parent.clientWidth;
-        if (width === this.lastContainerWidth && this.options.height !== 'auto')
-            return;
-        this.lastContainerWidth = width;
-        this.reRender();
-    }
-    initDrag() {
-        this.subscriptions.push(makeDraggable(this.wrapper, 
-        // On drag
-        (_, __, x) => {
-            this.emit('drag', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }, 
-        // On start drag
-        (x) => {
-            this.isDragging = true;
-            this.emit('dragstart', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }, 
-        // On end drag
-        (x) => {
-            this.isDragging = false;
-            this.emit('dragend', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }));
-    }
-    getHeight(optionsHeight, optionsSplitChannel) {
-        var _a;
-        const defaultHeight = 128;
-        const numberOfChannels = ((_a = this.audioData) === null || _a === void 0 ? void 0 : _a.numberOfChannels) || 1;
-        if (optionsHeight == null)
-            return defaultHeight;
-        if (!isNaN(Number(optionsHeight)))
-            return Number(optionsHeight);
-        if (optionsHeight === 'auto') {
-            const height = this.parent.clientHeight || defaultHeight;
-            if (optionsSplitChannel === null || optionsSplitChannel === void 0 ? void 0 : optionsSplitChannel.every((channel) => !channel.overlay))
-                return height / numberOfChannels;
-            return height;
-        }
-        return defaultHeight;
-    }
-    initHtml() {
-        const div = document.createElement('div');
-        const shadow = div.attachShadow({ mode: 'open' });
-        const cspNonce = this.options.cspNonce && typeof this.options.cspNonce === 'string' ? this.options.cspNonce.replace(/"/g, '') : '';
-        shadow.innerHTML = `
-      <style${cspNonce ? ` nonce="${cspNonce}"` : ''}>
-        :host {
-          user-select: none;
-          min-width: 1px;
-        }
-        :host audio {
-          display: block;
-          width: 100%;
-        }
-        :host .scroll {
-          overflow-x: auto;
-          overflow-y: hidden;
-          width: 100%;
-          position: relative;
-        }
-        :host .noScrollbar {
-          scrollbar-color: transparent;
-          scrollbar-width: none;
-        }
-        :host .noScrollbar::-webkit-scrollbar {
-          display: none;
-          -webkit-appearance: none;
-        }
-        :host .wrapper {
-          position: relative;
-          overflow: visible;
-          z-index: 2;
-        }
-        :host .canvases {
-          min-height: ${this.getHeight(this.options.height, this.options.splitChannels)}px;
-        }
-        :host .canvases > div {
-          position: relative;
-        }
-        :host canvas {
-          display: block;
-          position: absolute;
-          top: 0;
-          image-rendering: pixelated;
-        }
-        :host .progress {
-          pointer-events: none;
-          position: absolute;
-          z-index: 2;
-          top: 0;
-          left: 0;
-          width: 0;
-          height: 100%;
-          overflow: hidden;
-        }
-        :host .progress > div {
-          position: relative;
-        }
-        :host .cursor {
-          pointer-events: none;
-          position: absolute;
-          z-index: 5;
-          top: 0;
-          left: 0;
-          height: 100%;
-          border-radius: 2px;
-        }
-      </style>
-
-      <div class="scroll" part="scroll">
-        <div class="wrapper" part="wrapper">
-          <div class="canvases" part="canvases"></div>
-          <div class="progress" part="progress"></div>
-          <div class="cursor" part="cursor"></div>
-        </div>
-      </div>
-    `;
-        return [div, shadow];
-    }
-    /** Wavesurfer itself calls this method. Do not call it manually. */
-    setOptions(options) {
-        if (this.options.container !== options.container) {
-            const newParent = this.parentFromOptionsContainer(options.container);
-            newParent.appendChild(this.container);
-            this.parent = newParent;
-        }
-        if (options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {
-            this.initDrag();
-        }
-        this.options = options;
-        // Re-render the waveform
-        this.reRender();
-    }
-    getWrapper() {
-        return this.wrapper;
-    }
-    getWidth() {
-        return this.scrollContainer.clientWidth;
-    }
-    getScroll() {
-        return this.scrollContainer.scrollLeft;
-    }
-    setScroll(pixels) {
-        this.scrollContainer.scrollLeft = pixels;
-    }
-    setScrollPercentage(percent) {
-        const { scrollWidth } = this.scrollContainer;
-        const scrollStart = scrollWidth * percent;
-        this.setScroll(scrollStart);
-    }
-    destroy() {
-        var _a, _b;
-        this.subscriptions.forEach((unsubscribe) => unsubscribe());
-        this.container.remove();
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.unsubscribeOnScroll) === null || _b === void 0 ? void 0 : _b.forEach((unsubscribe) => unsubscribe());
-        this.unsubscribeOnScroll = [];
-    }
-    createDelay(delayMs = 10) {
-        let timeout;
-        let reject;
-        const onClear = () => {
-            if (timeout)
-                clearTimeout(timeout);
-            if (reject)
-                reject();
-        };
-        this.timeouts.push(onClear);
-        return () => {
-            return new Promise((resolveFn, rejectFn) => {
-                onClear();
-                reject = rejectFn;
-                timeout = setTimeout(() => {
-                    timeout = undefined;
-                    reject = undefined;
-                    resolveFn();
-                }, delayMs);
-            });
-        };
-    }
-    // Convert array of color values to linear gradient
-    convertColorValues(color) {
-        if (!Array.isArray(color))
-            return color || '';
-        if (color.length < 2)
-            return color[0] || '';
-        const canvasElement = document.createElement('canvas');
-        const ctx = canvasElement.getContext('2d');
-        const gradientHeight = canvasElement.height * (window.devicePixelRatio || 1);
-        const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight);
-        const colorStopPercentage = 1 / (color.length - 1);
-        color.forEach((color, index) => {
-            const offset = index * colorStopPercentage;
-            gradient.addColorStop(offset, color);
-        });
-        return gradient;
-    }
-    getPixelRatio() {
-        return Math.max(1, window.devicePixelRatio || 1);
-    }
-    renderBarWaveform(channelData, options, ctx, vScale) {
-        const topChannel = channelData[0];
-        const bottomChannel = channelData[1] || channelData[0];
-        const length = topChannel.length;
-        const { width, height } = ctx.canvas;
-        const halfHeight = height / 2;
-        const pixelRatio = this.getPixelRatio();
-        const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;
-        const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;
-        const barRadius = options.barRadius || 0;
-        const barIndexScale = width / (barWidth + barGap) / length;
-        const rectFn = barRadius && 'roundRect' in ctx ? 'roundRect' : 'rect';
-        ctx.beginPath();
-        let prevX = 0;
-        let maxTop = 0;
-        let maxBottom = 0;
-        for (let i = 0; i <= length; i++) {
-            const x = Math.round(i * barIndexScale);
-            if (x > prevX) {
-                const topBarHeight = Math.round(maxTop * halfHeight * vScale);
-                const bottomBarHeight = Math.round(maxBottom * halfHeight * vScale);
-                const barHeight = topBarHeight + bottomBarHeight || 1;
-                // Vertical alignment
-                let y = halfHeight - topBarHeight;
-                if (options.barAlign === 'top') {
-                    y = 0;
-                }
-                else if (options.barAlign === 'bottom') {
-                    y = height - barHeight;
-                }
-                ctx[rectFn](prevX * (barWidth + barGap), y, barWidth, barHeight, barRadius);
-                prevX = x;
-                maxTop = 0;
-                maxBottom = 0;
-            }
-            const magnitudeTop = Math.abs(topChannel[i] || 0);
-            const magnitudeBottom = Math.abs(bottomChannel[i] || 0);
-            if (magnitudeTop > maxTop)
-                maxTop = magnitudeTop;
-            if (magnitudeBottom > maxBottom)
-                maxBottom = magnitudeBottom;
-        }
-        ctx.fill();
-        ctx.closePath();
-    }
-    renderLineWaveform(channelData, _options, ctx, vScale) {
-        const drawChannel = (index) => {
-            const channel = channelData[index] || channelData[0];
-            const length = channel.length;
-            const { height } = ctx.canvas;
-            const halfHeight = height / 2;
-            const hScale = ctx.canvas.width / length;
-            ctx.moveTo(0, halfHeight);
-            let prevX = 0;
-            let max = 0;
-            for (let i = 0; i <= length; i++) {
-                const x = Math.round(i * hScale);
-                if (x > prevX) {
-                    const h = Math.round(max * halfHeight * vScale) || 1;
-                    const y = halfHeight + h * (index === 0 ? -1 : 1);
-                    ctx.lineTo(prevX, y);
-                    prevX = x;
-                    max = 0;
-                }
-                const value = Math.abs(channel[i] || 0);
-                if (value > max)
-                    max = value;
-            }
-            ctx.lineTo(prevX, halfHeight);
-        };
-        ctx.beginPath();
-        drawChannel(0);
-        drawChannel(1);
-        ctx.fill();
-        ctx.closePath();
-    }
-    renderWaveform(channelData, options, ctx) {
-        ctx.fillStyle = this.convertColorValues(options.waveColor);
-        // Custom rendering function
-        if (options.renderFunction) {
-            options.renderFunction(channelData, ctx);
-            return;
-        }
-        // Vertical scaling
-        let vScale = options.barHeight || 1;
-        if (options.normalize) {
-            const max = Array.from(channelData[0]).reduce((max, value) => Math.max(max, Math.abs(value)), 0);
-            vScale = max ? 1 / max : 1;
-        }
-        // Render waveform as bars
-        if (options.barWidth || options.barGap || options.barAlign) {
-            this.renderBarWaveform(channelData, options, ctx, vScale);
-            return;
-        }
-        // Render waveform as a polyline
-        this.renderLineWaveform(channelData, options, ctx, vScale);
-    }
-    renderSingleCanvas(data, options, width, height, offset, canvasContainer, progressContainer) {
-        const pixelRatio = this.getPixelRatio();
-        const canvas = document.createElement('canvas');
-        canvas.width = Math.round(width * pixelRatio);
-        canvas.height = Math.round(height * pixelRatio);
-        canvas.style.width = `${width}px`;
-        canvas.style.height = `${height}px`;
-        canvas.style.left = `${Math.round(offset)}px`;
-        canvasContainer.appendChild(canvas);
-        const ctx = canvas.getContext('2d');
-        this.renderWaveform(data, options, ctx);
-        // Draw a progress canvas
-        if (canvas.width > 0 && canvas.height > 0) {
-            const progressCanvas = canvas.cloneNode();
-            const progressCtx = progressCanvas.getContext('2d');
-            progressCtx.drawImage(canvas, 0, 0);
-            // Set the composition method to draw only where the waveform is drawn
-            progressCtx.globalCompositeOperation = 'source-in';
-            progressCtx.fillStyle = this.convertColorValues(options.progressColor);
-            // This rectangle acts as a mask thanks to the composition method
-            progressCtx.fillRect(0, 0, canvas.width, canvas.height);
-            progressContainer.appendChild(progressCanvas);
-        }
-    }
-    renderMultiCanvas(channelData, options, width, height, canvasContainer, progressContainer) {
-        const pixelRatio = this.getPixelRatio();
-        const { clientWidth } = this.scrollContainer;
-        const totalWidth = width / pixelRatio;
-        let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth, totalWidth);
-        let drawnIndexes = {};
-        // Adjust width to avoid gaps between canvases when using bars
-        if (options.barWidth || options.barGap) {
-            const barWidth = options.barWidth || 0.5;
-            const barGap = options.barGap || barWidth / 2;
-            const totalBarWidth = barWidth + barGap;
-            if (singleCanvasWidth % totalBarWidth !== 0) {
-                singleCanvasWidth = Math.floor(singleCanvasWidth / totalBarWidth) * totalBarWidth;
-            }
-        }
-        // Nothing to render
-        if (singleCanvasWidth === 0)
-            return;
-        // Draw a single canvas
-        const draw = (index) => {
-            if (index < 0 || index >= numCanvases)
-                return;
-            if (drawnIndexes[index])
-                return;
-            drawnIndexes[index] = true;
-            const offset = index * singleCanvasWidth;
-            let clampedWidth = Math.min(totalWidth - offset, singleCanvasWidth);
-            // Clamp the width to the bar grid to avoid empty canvases at the end
-            if (options.barWidth || options.barGap) {
-                const barWidth = options.barWidth || 0.5;
-                const barGap = options.barGap || barWidth / 2;
-                const totalBarWidth = barWidth + barGap;
-                clampedWidth = Math.floor(clampedWidth / totalBarWidth) * totalBarWidth;
-            }
-            if (clampedWidth <= 0)
-                return;
-            const data = channelData.map((channel) => {
-                const start = Math.floor((offset / totalWidth) * channel.length);
-                const end = Math.floor(((offset + clampedWidth) / totalWidth) * channel.length);
-                return channel.slice(start, end);
-            });
-            this.renderSingleCanvas(data, options, clampedWidth, height, offset, canvasContainer, progressContainer);
-        };
-        // Clear canvases to avoid too many DOM nodes
-        const clearCanvases = () => {
-            if (Object.keys(drawnIndexes).length > Renderer.MAX_NODES) {
-                canvasContainer.innerHTML = '';
-                progressContainer.innerHTML = '';
-                drawnIndexes = {};
-            }
-        };
-        // Calculate how many canvases to render
-        const numCanvases = Math.ceil(totalWidth / singleCanvasWidth);
-        // Render all canvases if the waveform doesn't scroll
-        if (!this.isScrollable) {
-            for (let i = 0; i < numCanvases; i++) {
-                draw(i);
-            }
-            return;
-        }
-        // Lazy rendering
-        const viewPosition = this.scrollContainer.scrollLeft / totalWidth;
-        const startCanvas = Math.floor(viewPosition * numCanvases);
-        // Draw the canvases in the viewport first
-        draw(startCanvas - 1);
-        draw(startCanvas);
-        draw(startCanvas + 1);
-        // Subscribe to the scroll event to draw additional canvases
-        if (numCanvases > 1) {
-            const unsubscribe = this.on('scroll', () => {
-                const { scrollLeft } = this.scrollContainer;
-                const canvasIndex = Math.floor((scrollLeft / totalWidth) * numCanvases);
-                clearCanvases();
-                draw(canvasIndex - 1);
-                draw(canvasIndex);
-                draw(canvasIndex + 1);
-            });
-            this.unsubscribeOnScroll.push(unsubscribe);
-        }
-    }
-    renderChannel(channelData, _a, width, channelIndex) {
-        var { overlay } = _a, options = __rest(_a, ["overlay"]);
-        // A container for canvases
-        const canvasContainer = document.createElement('div');
-        const height = this.getHeight(options.height, options.splitChannels);
-        canvasContainer.style.height = `${height}px`;
-        if (overlay && channelIndex > 0) {
-            canvasContainer.style.marginTop = `-${height}px`;
-        }
-        this.canvasWrapper.style.minHeight = `${height}px`;
-        this.canvasWrapper.appendChild(canvasContainer);
-        // A container for progress canvases
-        const progressContainer = canvasContainer.cloneNode();
-        this.progressWrapper.appendChild(progressContainer);
-        // Render the waveform
-        this.renderMultiCanvas(channelData, options, width, height, canvasContainer, progressContainer);
-    }
-    render(audioData) {
-        return __awaiter$3(this, void 0, void 0, function* () {
-            var _a;
-            // Clear previous timeouts
-            this.timeouts.forEach((clear) => clear());
-            this.timeouts = [];
-            // Clear the canvases
-            this.canvasWrapper.innerHTML = '';
-            this.progressWrapper.innerHTML = '';
-            // Width
-            if (this.options.width != null) {
-                this.scrollContainer.style.width =
-                    typeof this.options.width === 'number' ? `${this.options.width}px` : this.options.width;
-            }
-            // Determine the width of the waveform
-            const pixelRatio = this.getPixelRatio();
-            const parentWidth = this.scrollContainer.clientWidth;
-            const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0));
-            // Whether the container should scroll
-            this.isScrollable = scrollWidth > parentWidth;
-            const useParentWidth = this.options.fillParent && !this.isScrollable;
-            // Width of the waveform in pixels
-            const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
-            // Set the width of the wrapper
-            this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
-            // Set additional styles
-            this.scrollContainer.style.overflowX = this.isScrollable ? 'auto' : 'hidden';
-            this.scrollContainer.classList.toggle('noScrollbar', !!this.options.hideScrollbar);
-            this.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`;
-            this.cursor.style.width = `${this.options.cursorWidth}px`;
-            this.audioData = audioData;
-            this.emit('render');
-            // Render the waveform
-            if (this.options.splitChannels) {
-                // Render a waveform for each channel
-                for (let i = 0; i < audioData.numberOfChannels; i++) {
-                    const options = Object.assign(Object.assign({}, this.options), (_a = this.options.splitChannels) === null || _a === void 0 ? void 0 : _a[i]);
-                    this.renderChannel([audioData.getChannelData(i)], options, width, i);
-                }
-            }
-            else {
-                // Render a single waveform for the first two channels (left and right)
-                const channels = [audioData.getChannelData(0)];
-                if (audioData.numberOfChannels > 1)
-                    channels.push(audioData.getChannelData(1));
-                this.renderChannel(channels, this.options, width, 0);
-            }
-            // Must be emitted asynchronously for backward compatibility
-            Promise.resolve().then(() => this.emit('rendered'));
-        });
-    }
-    reRender() {
-        this.unsubscribeOnScroll.forEach((unsubscribe) => unsubscribe());
-        this.unsubscribeOnScroll = [];
-        // Return if the waveform has not been rendered yet
-        if (!this.audioData)
-            return;
-        // Remember the current cursor position
-        const { scrollWidth } = this.scrollContainer;
-        const { right: before } = this.progressWrapper.getBoundingClientRect();
-        // Re-render the waveform
-        this.render(this.audioData);
-        // Adjust the scroll position so that the cursor stays in the same place
-        if (this.isScrollable && scrollWidth !== this.scrollContainer.scrollWidth) {
-            const { right: after } = this.progressWrapper.getBoundingClientRect();
-            let delta = after - before;
-            // to limit compounding floating-point drift
-            // we need to round to the half px furthest from 0
-            delta *= 2;
-            delta = delta < 0 ? Math.floor(delta) : Math.ceil(delta);
-            delta /= 2;
-            this.scrollContainer.scrollLeft += delta;
-        }
-    }
-    zoom(minPxPerSec) {
-        this.options.minPxPerSec = minPxPerSec;
-        this.reRender();
-    }
-    scrollIntoView(progress, isPlaying = false) {
-        const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
-        const progressWidth = progress * scrollWidth;
-        const startEdge = scrollLeft;
-        const endEdge = scrollLeft + clientWidth;
-        const middle = clientWidth / 2;
-        if (this.isDragging) {
-            // Scroll when dragging close to the edge of the viewport
-            const minGap = 30;
-            if (progressWidth + minGap > endEdge) {
-                this.scrollContainer.scrollLeft += minGap;
-            }
-            else if (progressWidth - minGap < startEdge) {
-                this.scrollContainer.scrollLeft -= minGap;
-            }
-        }
-        else {
-            if (progressWidth < startEdge || progressWidth > endEdge) {
-                this.scrollContainer.scrollLeft = progressWidth - (this.options.autoCenter ? middle : 0);
-            }
-            // Keep the cursor centered when playing
-            const center = progressWidth - scrollLeft - middle;
-            if (isPlaying && this.options.autoCenter && center > 0) {
-                this.scrollContainer.scrollLeft += Math.min(center, 10);
-            }
-        }
-        // Emit the scroll event
-        {
-            const newScroll = this.scrollContainer.scrollLeft;
-            const startX = newScroll / scrollWidth;
-            const endX = (newScroll + clientWidth) / scrollWidth;
-            this.emit('scroll', startX, endX, newScroll, newScroll + clientWidth);
-        }
-    }
-    renderProgress(progress, isPlaying) {
-        if (isNaN(progress))
-            return;
-        const percents = progress * 100;
-        this.canvasWrapper.style.clipPath = `polygon(${percents}% 0%, 100% 0%, 100% 100%, ${percents}% 100%)`;
-        this.progressWrapper.style.width = `${percents}%`;
-        this.cursor.style.left = `${percents}%`;
-        this.cursor.style.transform = this.options.cursorWidth
-            ? `translateX(-${progress * this.options.cursorWidth}px)`
-            : '';
-        if (this.isScrollable && this.options.autoScroll) {
-            this.scrollIntoView(progress, isPlaying);
-        }
-    }
-    exportImage(format, quality, type) {
-        return __awaiter$3(this, void 0, void 0, function* () {
-            const canvases = this.canvasWrapper.querySelectorAll('canvas');
-            if (!canvases.length) {
-                throw new Error('No waveform data');
-            }
-            // Data URLs
-            if (type === 'dataURL') {
-                const images = Array.from(canvases).map((canvas) => canvas.toDataURL(format, quality));
-                return Promise.resolve(images);
-            }
-            // Blobs
-            return Promise.all(Array.from(canvases).map((canvas) => {
-                return new Promise((resolve, reject) => {
-                    canvas.toBlob((blob) => {
-                        if (blob) {
-                            resolve(blob);
-                        }
-                        else {
-                            reject(new Error('Could not export image'));
-                        }
-                    }, format, quality);
-                });
-            }));
-        });
-    }
-}
-Renderer.MAX_CANVAS_WIDTH = 8000;
-Renderer.MAX_NODES = 10;
-
-class Timer extends EventEmitter {
-    constructor() {
-        super(...arguments);
-        this.unsubscribe = () => undefined;
-    }
-    start() {
-        this.unsubscribe = this.on('tick', () => {
-            requestAnimationFrame(() => {
-                this.emit('tick');
-            });
-        });
-        this.emit('tick');
-    }
-    stop() {
-        this.unsubscribe();
-    }
-    destroy() {
-        this.unsubscribe();
-    }
-}
-
-var __awaiter$4 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/**
- * A Web Audio buffer player emulating the behavior of an HTML5 Audio element.
- */
-class WebAudioPlayer extends EventEmitter {
-    constructor(audioContext = new AudioContext()) {
-        super();
-        this.bufferNode = null;
-        this.playStartTime = 0;
-        this.playedDuration = 0;
-        this._muted = false;
-        this._playbackRate = 1;
-        this._duration = undefined;
-        this.buffer = null;
-        this.currentSrc = '';
-        this.paused = true;
-        this.crossOrigin = null;
-        this.seeking = false;
-        this.autoplay = false;
-        /** Subscribe to an event. Returns an unsubscribe function. */
-        this.addEventListener = this.on;
-        /** Unsubscribe from an event */
-        this.removeEventListener = this.un;
-        this.audioContext = audioContext;
-        this.gainNode = this.audioContext.createGain();
-        this.gainNode.connect(this.audioContext.destination);
-    }
-    load() {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return;
-        });
-    }
-    get src() {
-        return this.currentSrc;
-    }
-    set src(value) {
-        this.currentSrc = value;
-        this._duration = undefined;
-        if (!value) {
-            this.buffer = null;
-            this.emit('emptied');
-            return;
-        }
-        fetch(value)
-            .then((response) => {
-            if (response.status >= 400) {
-                throw new Error(`Failed to fetch ${value}: ${response.status} (${response.statusText})`);
-            }
-            return response.arrayBuffer();
-        })
-            .then((arrayBuffer) => {
-            if (this.currentSrc !== value)
-                return null;
-            return this.audioContext.decodeAudioData(arrayBuffer);
-        })
-            .then((audioBuffer) => {
-            if (this.currentSrc !== value)
-                return;
-            this.buffer = audioBuffer;
-            this.emit('loadedmetadata');
-            this.emit('canplay');
-            if (this.autoplay)
-                this.play();
-        });
-    }
-    _play() {
-        var _a;
-        if (!this.paused)
-            return;
-        this.paused = false;
-        (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.bufferNode = this.audioContext.createBufferSource();
-        if (this.buffer) {
-            this.bufferNode.buffer = this.buffer;
-        }
-        this.bufferNode.playbackRate.value = this._playbackRate;
-        this.bufferNode.connect(this.gainNode);
-        let currentPos = this.playedDuration * this._playbackRate;
-        if (currentPos >= this.duration || currentPos < 0) {
-            currentPos = 0;
-            this.playedDuration = 0;
-        }
-        this.bufferNode.start(this.audioContext.currentTime, currentPos);
-        this.playStartTime = this.audioContext.currentTime;
-        this.bufferNode.onended = () => {
-            if (this.currentTime >= this.duration) {
-                this.pause();
-                this.emit('ended');
-            }
-        };
-    }
-    _pause() {
-        var _a;
-        this.paused = true;
-        (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.stop();
-        this.playedDuration += this.audioContext.currentTime - this.playStartTime;
-    }
-    play() {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            if (!this.paused)
-                return;
-            this._play();
-            this.emit('play');
-        });
-    }
-    pause() {
-        if (this.paused)
-            return;
-        this._pause();
-        this.emit('pause');
-    }
-    stopAt(timeSeconds) {
-        const delay = timeSeconds - this.currentTime;
-        const currentBufferNode = this.bufferNode;
-        currentBufferNode === null || currentBufferNode === void 0 ? void 0 : currentBufferNode.stop(this.audioContext.currentTime + delay);
-        currentBufferNode === null || currentBufferNode === void 0 ? void 0 : currentBufferNode.addEventListener('ended', () => {
-            if (currentBufferNode === this.bufferNode) {
-                this.bufferNode = null;
-                this.pause();
-            }
-        }, { once: true });
-    }
-    setSinkId(deviceId) {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            const ac = this.audioContext;
-            return ac.setSinkId(deviceId);
-        });
-    }
-    get playbackRate() {
-        return this._playbackRate;
-    }
-    set playbackRate(value) {
-        this._playbackRate = value;
-        if (this.bufferNode) {
-            this.bufferNode.playbackRate.value = value;
-        }
-    }
-    get currentTime() {
-        const time = this.paused
-            ? this.playedDuration
-            : this.playedDuration + (this.audioContext.currentTime - this.playStartTime);
-        return time * this._playbackRate;
-    }
-    set currentTime(value) {
-        const wasPlaying = !this.paused;
-        if (wasPlaying)
-            this._pause();
-        this.playedDuration = value / this._playbackRate;
-        if (wasPlaying)
-            this._play();
-        this.emit('seeking');
-        this.emit('timeupdate');
-    }
-    get duration() {
-        var _a, _b;
-        return (_a = this._duration) !== null && _a !== void 0 ? _a : (((_b = this.buffer) === null || _b === void 0 ? void 0 : _b.duration) || 0);
-    }
-    set duration(value) {
-        this._duration = value;
-    }
-    get volume() {
-        return this.gainNode.gain.value;
-    }
-    set volume(value) {
-        this.gainNode.gain.value = value;
-        this.emit('volumechange');
-    }
-    get muted() {
-        return this._muted;
-    }
-    set muted(value) {
-        if (this._muted === value)
-            return;
-        this._muted = value;
-        if (this._muted) {
-            this.gainNode.disconnect();
-        }
-        else {
-            this.gainNode.connect(this.audioContext.destination);
-        }
-    }
-    canPlayType(mimeType) {
-        return /^(audio|video)\//.test(mimeType);
-    }
-    /** Get the GainNode used to play the audio. Can be used to attach filters. */
-    getGainNode() {
-        return this.gainNode;
-    }
-    /** Get decoded audio */
-    getChannelData() {
-        const channels = [];
-        if (!this.buffer)
-            return channels;
-        const numChannels = this.buffer.numberOfChannels;
-        for (let i = 0; i < numChannels; i++) {
-            channels.push(this.buffer.getChannelData(i));
-        }
-        return channels;
-    }
-    /**
-     * Imitate `HTMLElement.removeAttribute` for compatibility with `Player`.
-     */
-    removeAttribute(attrName) {
-        switch (attrName) {
-            case 'src':
-                this.src = '';
-                break;
-            case 'playbackRate':
-                this.playbackRate = 0;
-                break;
-            case 'currentTime':
-                this.currentTime = 0;
-                break;
-            case 'duration':
-                this.duration = 0;
-                break;
-            case 'volume':
-                this.volume = 0;
-                break;
-            case 'muted':
-                this.muted = false;
-                break;
-        }
-    }
-}
-
-var __awaiter$5 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-const defaultOptions = {
-    waveColor: '#999',
-    progressColor: '#555',
-    cursorWidth: 1,
-    minPxPerSec: 0,
-    fillParent: true,
-    interact: true,
-    dragToSeek: false,
-    autoScroll: true,
-    autoCenter: true,
-    sampleRate: 8000,
-};
-class WaveSurfer extends Player {
-    /** Create a new WaveSurfer instance */
-    static create(options) {
-        return new WaveSurfer(options);
-    }
-    /** Create a new WaveSurfer instance */
-    constructor(options) {
-        const media = options.media ||
-            (options.backend === 'WebAudio' ? new WebAudioPlayer() : undefined);
-        super({
-            media,
-            mediaControls: options.mediaControls,
-            autoplay: options.autoplay,
-            playbackRate: options.audioRate,
-        });
-        this.plugins = [];
-        this.decodedData = null;
-        this.stopAtPosition = null;
-        this.subscriptions = [];
-        this.mediaSubscriptions = [];
-        this.abortController = null;
-        this.options = Object.assign({}, defaultOptions, options);
-        this.timer = new Timer();
-        const audioElement = media ? undefined : this.getMediaElement();
-        this.renderer = new Renderer(this.options, audioElement);
-        this.initPlayerEvents();
-        this.initRendererEvents();
-        this.initTimerEvents();
-        this.initPlugins();
-        // Read the initial URL before load has been called
-        const initialUrl = this.options.url || this.getSrc() || '';
-        // Init and load async to allow external events to be registered
-        Promise.resolve().then(() => {
-            this.emit('init');
-            // Load audio if URL or an external media with an src is passed,
-            // of render w/o audio if pre-decoded peaks and duration are provided
-            const { peaks, duration } = this.options;
-            if (initialUrl || (peaks && duration)) {
-                // Swallow async errors because they cannot be caught from a constructor call.
-                // Subscribe to the wavesurfer's error event to handle them.
-                this.load(initialUrl, peaks, duration).catch(() => null);
-            }
-        });
-    }
-    updateProgress(currentTime = this.getCurrentTime()) {
-        this.renderer.renderProgress(currentTime / this.getDuration(), this.isPlaying());
-        return currentTime;
-    }
-    initTimerEvents() {
-        // The timer fires every 16ms for a smooth progress animation
-        this.subscriptions.push(this.timer.on('tick', () => {
-            if (!this.isSeeking()) {
-                const currentTime = this.updateProgress();
-                this.emit('timeupdate', currentTime);
-                this.emit('audioprocess', currentTime);
-                // Pause audio when it reaches the stopAtPosition
-                if (this.stopAtPosition != null && this.isPlaying() && currentTime >= this.stopAtPosition) {
-                    this.pause();
-                }
-            }
-        }));
-    }
-    initPlayerEvents() {
-        if (this.isPlaying()) {
-            this.emit('play');
-            this.timer.start();
-        }
-        this.mediaSubscriptions.push(this.onMediaEvent('timeupdate', () => {
-            const currentTime = this.updateProgress();
-            this.emit('timeupdate', currentTime);
-        }), this.onMediaEvent('play', () => {
-            this.emit('play');
-            this.timer.start();
-        }), this.onMediaEvent('pause', () => {
-            this.emit('pause');
-            this.timer.stop();
-            this.stopAtPosition = null;
-        }), this.onMediaEvent('emptied', () => {
-            this.timer.stop();
-            this.stopAtPosition = null;
-        }), this.onMediaEvent('ended', () => {
-            this.emit('timeupdate', this.getDuration());
-            this.emit('finish');
-            this.stopAtPosition = null;
-        }), this.onMediaEvent('seeking', () => {
-            this.emit('seeking', this.getCurrentTime());
-        }), this.onMediaEvent('error', () => {
-            var _a;
-            this.emit('error', ((_a = this.getMediaElement().error) !== null && _a !== void 0 ? _a : new Error('Media error')));
-            this.stopAtPosition = null;
-        }));
-    }
-    initRendererEvents() {
-        this.subscriptions.push(
-        // Seek on click
-        this.renderer.on('click', (relativeX, relativeY) => {
-            if (this.options.interact) {
-                this.seekTo(relativeX);
-                this.emit('interaction', relativeX * this.getDuration());
-                this.emit('click', relativeX, relativeY);
-            }
-        }), 
-        // Double click
-        this.renderer.on('dblclick', (relativeX, relativeY) => {
-            this.emit('dblclick', relativeX, relativeY);
-        }), 
-        // Scroll
-        this.renderer.on('scroll', (startX, endX, scrollLeft, scrollRight) => {
-            const duration = this.getDuration();
-            this.emit('scroll', startX * duration, endX * duration, scrollLeft, scrollRight);
-        }), 
-        // Redraw
-        this.renderer.on('render', () => {
-            this.emit('redraw');
-        }), 
-        // RedrawComplete
-        this.renderer.on('rendered', () => {
-            this.emit('redrawcomplete');
-        }), 
-        // DragStart
-        this.renderer.on('dragstart', (relativeX) => {
-            this.emit('dragstart', relativeX);
-        }), 
-        // DragEnd
-        this.renderer.on('dragend', (relativeX) => {
-            this.emit('dragend', relativeX);
-        }));
-        // Drag
-        {
-            let debounce;
-            this.subscriptions.push(this.renderer.on('drag', (relativeX) => {
-                if (!this.options.interact)
-                    return;
-                // Update the visual position
-                this.renderer.renderProgress(relativeX);
-                // Set the audio position with a debounce
-                clearTimeout(debounce);
-                let debounceTime;
-                if (this.isPlaying()) {
-                    debounceTime = 0;
-                }
-                else if (this.options.dragToSeek === true) {
-                    debounceTime = 200;
-                }
-                else if (typeof this.options.dragToSeek === 'object' && this.options.dragToSeek !== undefined) {
-                    debounceTime = this.options.dragToSeek['debounceTime'];
-                }
-                debounce = setTimeout(() => {
-                    this.seekTo(relativeX);
-                }, debounceTime);
-                this.emit('interaction', relativeX * this.getDuration());
-                this.emit('drag', relativeX);
-            }));
-        }
-    }
-    initPlugins() {
-        var _a;
-        if (!((_a = this.options.plugins) === null || _a === void 0 ? void 0 : _a.length))
-            return;
-        this.options.plugins.forEach((plugin) => {
-            this.registerPlugin(plugin);
-        });
-    }
-    unsubscribePlayerEvents() {
-        this.mediaSubscriptions.forEach((unsubscribe) => unsubscribe());
-        this.mediaSubscriptions = [];
-    }
-    /** Set new wavesurfer options and re-render it */
-    setOptions(options) {
-        this.options = Object.assign({}, this.options, options);
-        if (options.duration && !options.peaks) {
-            this.decodedData = Decoder.createBuffer(this.exportPeaks(), options.duration);
-        }
-        if (options.peaks && options.duration) {
-            // Create new decoded data buffer from peaks and duration
-            this.decodedData = Decoder.createBuffer(options.peaks, options.duration);
-        }
-        this.renderer.setOptions(this.options);
-        if (options.audioRate) {
-            this.setPlaybackRate(options.audioRate);
-        }
-        if (options.mediaControls != null) {
-            this.getMediaElement().controls = options.mediaControls;
-        }
-    }
-    /** Register a wavesurfer.js plugin */
-    registerPlugin(plugin) {
-        // Check if the plugin is already registered
-        if (this.plugins.includes(plugin)) {
-            return plugin;
-        }
-        plugin._init(this);
-        this.plugins.push(plugin);
-        // Unregister plugin on destroy
-        const unsubscribe = plugin.once('destroy', () => {
-            this.plugins = this.plugins.filter((p) => p !== plugin);
-            this.subscriptions = this.subscriptions.filter((fn) => fn !== unsubscribe);
-        });
-        this.subscriptions.push(unsubscribe);
-        return plugin;
-    }
-    /** Unregister a wavesurfer.js plugin */
-    unregisterPlugin(plugin) {
-        this.plugins = this.plugins.filter((p) => p !== plugin);
-        plugin.destroy();
-    }
-    /** For plugins only: get the waveform wrapper div */
-    getWrapper() {
-        return this.renderer.getWrapper();
-    }
-    /** For plugins only: get the scroll container client width */
-    getWidth() {
-        return this.renderer.getWidth();
-    }
-    /** Get the current scroll position in pixels */
-    getScroll() {
-        return this.renderer.getScroll();
-    }
-    /** Set the current scroll position in pixels */
-    setScroll(pixels) {
-        return this.renderer.setScroll(pixels);
-    }
-    /** Move the start of the viewing window to a specific time in the audio (in seconds) */
-    setScrollTime(time) {
-        const percentage = time / this.getDuration();
-        this.renderer.setScrollPercentage(percentage);
-    }
-    /** Get all registered plugins */
-    getActivePlugins() {
-        return this.plugins;
-    }
-    loadAudio(url, blob, channelData, duration) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            var _a;
-            this.emit('load', url);
-            if (!this.options.media && this.isPlaying())
-                this.pause();
-            this.decodedData = null;
-            this.stopAtPosition = null;
-            // Fetch the entire audio as a blob if pre-decoded data is not provided
-            if (!blob && !channelData) {
-                const fetchParams = this.options.fetchParams || {};
-                if (window.AbortController && !fetchParams.signal) {
-                    this.abortController = new AbortController();
-                    fetchParams.signal = (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.signal;
-                }
-                const onProgress = (percentage) => this.emit('loading', percentage);
-                blob = yield Fetcher.fetchBlob(url, onProgress, fetchParams);
-                const overridenMimeType = this.options.blobMimeType;
-                if (overridenMimeType) {
-                    blob = new Blob([blob], { type: overridenMimeType });
-                }
-            }
-            // Set the mediaelement source
-            this.setSrc(url, blob);
-            // Wait for the audio duration
-            const audioDuration = yield new Promise((resolve) => {
-                const staticDuration = duration || this.getDuration();
-                if (staticDuration) {
-                    resolve(staticDuration);
-                }
-                else {
-                    this.mediaSubscriptions.push(this.onMediaEvent('loadedmetadata', () => resolve(this.getDuration()), { once: true }));
-                }
-            });
-            // Set the duration if the player is a WebAudioPlayer without a URL
-            if (!url && !blob) {
-                const media = this.getMediaElement();
-                if (media instanceof WebAudioPlayer) {
-                    media.duration = audioDuration;
-                }
-            }
-            // Decode the audio data or use user-provided peaks
-            if (channelData) {
-                this.decodedData = Decoder.createBuffer(channelData, audioDuration || 0);
-            }
-            else if (blob) {
-                const arrayBuffer = yield blob.arrayBuffer();
-                this.decodedData = yield Decoder.decode(arrayBuffer, this.options.sampleRate);
-            }
-            if (this.decodedData) {
-                this.emit('decode', this.getDuration());
-                this.renderer.render(this.decodedData);
-            }
-            this.emit('ready', this.getDuration());
-        });
-    }
-    /** Load an audio file by URL, with optional pre-decoded audio data */
-    load(url, channelData, duration) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            try {
-                return yield this.loadAudio(url, undefined, channelData, duration);
-            }
-            catch (err) {
-                this.emit('error', err);
-                throw err;
-            }
-        });
-    }
-    /** Load an audio blob */
-    loadBlob(blob, channelData, duration) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            try {
-                return yield this.loadAudio('', blob, channelData, duration);
-            }
-            catch (err) {
-                this.emit('error', err);
-                throw err;
-            }
-        });
-    }
-    /** Zoom the waveform by a given pixels-per-second factor */
-    zoom(minPxPerSec) {
-        if (!this.decodedData) {
-            throw new Error('No audio loaded');
-        }
-        this.renderer.zoom(minPxPerSec);
-        this.emit('zoom', minPxPerSec);
-    }
-    /** Get the decoded audio data */
-    getDecodedData() {
-        return this.decodedData;
-    }
-    /** Get decoded peaks */
-    exportPeaks({ channels = 2, maxLength = 8000, precision = 10000 } = {}) {
-        if (!this.decodedData) {
-            throw new Error('The audio has not been decoded yet');
-        }
-        const maxChannels = Math.min(channels, this.decodedData.numberOfChannels);
-        const peaks = [];
-        for (let i = 0; i < maxChannels; i++) {
-            const channel = this.decodedData.getChannelData(i);
-            const data = [];
-            const sampleSize = channel.length / maxLength;
-            for (let i = 0; i < maxLength; i++) {
-                const sample = channel.slice(Math.floor(i * sampleSize), Math.ceil((i + 1) * sampleSize));
-                let max = 0;
-                for (let x = 0; x < sample.length; x++) {
-                    const n = sample[x];
-                    if (Math.abs(n) > Math.abs(max))
-                        max = n;
-                }
-                data.push(Math.round(max * precision) / precision);
-            }
-            peaks.push(data);
-        }
-        return peaks;
-    }
-    /** Get the duration of the audio in seconds */
-    getDuration() {
-        let duration = super.getDuration() || 0;
-        // Fall back to the decoded data duration if the media duration is incorrect
-        if ((duration === 0 || duration === Infinity) && this.decodedData) {
-            duration = this.decodedData.duration;
-        }
-        return duration;
-    }
-    /** Toggle if the waveform should react to clicks */
-    toggleInteraction(isInteractive) {
-        this.options.interact = isInteractive;
-    }
-    /** Jump to a specific time in the audio (in seconds) */
-    setTime(time) {
-        this.stopAtPosition = null;
-        super.setTime(time);
-        this.updateProgress(time);
-        this.emit('timeupdate', time);
-    }
-    /** Seek to a percentage of audio as [0..1] (0 = beginning, 1 = end) */
-    seekTo(progress) {
-        const time = this.getDuration() * progress;
-        this.setTime(time);
-    }
-    /** Start playing the audio */
-    play(start, end) {
-        const _super = Object.create(null, {
-            play: { get: () => super.play }
-        });
-        return __awaiter$5(this, void 0, void 0, function* () {
-            if (start != null) {
-                this.setTime(start);
-            }
-            const playResult = yield _super.play.call(this);
-            if (end != null) {
-                if (this.media instanceof WebAudioPlayer) {
-                    this.media.stopAt(end);
-                }
-                else {
-                    this.stopAtPosition = end;
-                }
-            }
-            return playResult;
-        });
-    }
-    /** Play or pause the audio */
-    playPause() {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            return this.isPlaying() ? this.pause() : this.play();
-        });
-    }
-    /** Stop the audio and go to the beginning */
-    stop() {
-        this.pause();
-        this.setTime(0);
-    }
-    /** Skip N or -N seconds from the current position */
-    skip(seconds) {
-        this.setTime(this.getCurrentTime() + seconds);
-    }
-    /** Empty the waveform */
-    empty() {
-        this.load('', [[0]], 0.001);
-    }
-    /** Set HTML media element */
-    setMediaElement(element) {
-        this.unsubscribePlayerEvents();
-        super.setMediaElement(element);
-        this.initPlayerEvents();
-    }
-    exportImage() {
-        return __awaiter$5(this, arguments, void 0, function* (format = 'image/png', quality = 1, type = 'dataURL') {
-            return this.renderer.exportImage(format, quality, type);
-        });
-    }
-    /** Unmount wavesurfer */
-    destroy() {
-        var _a;
-        this.emit('destroy');
-        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
-        this.plugins.forEach((plugin) => plugin.destroy());
-        this.subscriptions.forEach((unsubscribe) => unsubscribe());
-        this.unsubscribePlayerEvents();
-        this.timer.destroy();
-        this.renderer.destroy();
-        super.destroy();
-    }
-}
-WaveSurfer.BasePlugin = BasePlugin;
-WaveSurfer.dom = dom;
-
 var _templateObject$u, _templateObject2$q;
 var AudioVisualization = function AudioVisualization(_ref) {
   var tmb = _ref.tmb,
@@ -35621,7 +33892,9 @@ var AudioVisualization = function AudioVisualization(_ref) {
     _ref$barWidth = _ref.barWidth,
     barWidth = _ref$barWidth === void 0 ? 1 : _ref$barWidth,
     _ref$barRadius = _ref.barRadius,
-    barRadius = _ref$barRadius === void 0 ? 1.5 : _ref$barRadius;
+    barRadius = _ref$barRadius === void 0 ? 1.5 : _ref$barRadius,
+    _ref$containerWidth = _ref.containerWidth,
+    containerWidth = _ref$containerWidth === void 0 ? 148 : _ref$containerWidth;
   var normalizedBars = React.useMemo(function () {
     if (!tmb || tmb.length === 0) return [];
     var maxVal = Math.max.apply(Math, tmb);
@@ -35630,7 +33903,6 @@ var AudioVisualization = function AudioVisualization(_ref) {
       return Math.max(2, normalized);
     });
   }, [tmb, height]);
-  var containerWidth = 148;
   var calculatedGap = React.useMemo(function () {
     if (normalizedBars.length <= 1) return 0;
     var totalBarWidth = normalizedBars.length * barWidth;
@@ -35692,7 +33964,7 @@ var AudioVisualization = function AudioVisualization(_ref) {
     })));
   })));
 };
-var AudioVisualization$1 = /*#__PURE__*/React.memo(AudioVisualization);
+var AudioVisualizationComponent = /*#__PURE__*/React.memo(AudioVisualization);
 var Container$d = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: flex-start;\n  margin-right: 4px;\n  position: relative;\n"])));
 var SVG = styled__default.svg(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
 
@@ -35758,7 +34030,22 @@ var initFFmpeg = function initFFmpeg() {
     return Promise.reject(e);
   }
 };
-var convertMp3ToAac = function convertMp3ToAac(file, messageId) {
+var getExtensionForType = function getExtensionForType(mimeType) {
+  var typeMap = {
+    'audio/mpeg': 'mp3',
+    'audio/mp3': 'mp3',
+    'audio/webm': 'webm',
+    'audio/ogg': 'ogg',
+    'audio/opus': 'opus',
+    'audio/wav': 'wav',
+    'audio/x-wav': 'wav',
+    'audio/mp4': 'm4a',
+    'audio/aac': 'aac'
+  };
+  var baseType = mimeType.split(';')[0].trim().toLowerCase();
+  return typeMap[baseType] || 'bin';
+};
+var convertToAac = function convertToAac(file, messageId) {
   try {
     return Promise.resolve(_catch(function () {
       var maxSize = 50 * 1024 * 1024;
@@ -35772,9 +34059,9 @@ var convertMp3ToAac = function convertMp3ToAac(file, messageId) {
         function _temp8() {
           function _temp6() {
             return Promise.resolve(util.fetchFile(file)).then(function (inputData) {
-              return Promise.resolve(ffmpeg.writeFile(messageId + "_input.mp3", inputData)).then(function () {
-                return Promise.resolve(ffmpeg.exec(['-i', messageId + "_input.mp3", '-c:a', 'aac', '-b:a', '128k', '-movflags', '+faststart', messageId + "_output.m4a"])).then(function () {
-                  return Promise.resolve(ffmpeg.readFile(messageId + "_output.m4a")).then(function (data) {
+              return Promise.resolve(ffmpeg.writeFile(inputName, inputData)).then(function () {
+                return Promise.resolve(ffmpeg.exec(['-i', inputName, '-c:a', 'aac', '-b:a', '128k', '-movflags', '+faststart', outputName])).then(function () {
+                  return Promise.resolve(ffmpeg.readFile(outputName)).then(function (data) {
                     function _temp4() {
                       function _temp2() {
                         var dataArray;
@@ -35794,19 +34081,19 @@ var convertMp3ToAac = function convertMp3ToAac(file, messageId) {
                         var blob = new Blob([arrayBuffer], {
                           type: 'audio/mp4'
                         });
-                        var convertedFile = new File([blob], messageId + "_" + file.name.replace('.mp3', '.m4a'), {
+                        var convertedFile = new File([blob], messageId + "_converted.m4a", {
                           type: 'audio/mp4',
                           lastModified: file.lastModified
                         });
                         return convertedFile;
                       }
                       var _temp = _catch(function () {
-                        return Promise.resolve(ffmpeg.deleteFile(messageId + "_output.m4a")).then(function () {});
+                        return Promise.resolve(ffmpeg.deleteFile(outputName)).then(function () {});
                       }, function () {});
                       return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
                     }
                     var _temp3 = _catch(function () {
-                      return Promise.resolve(ffmpeg.deleteFile(messageId + "_input.mp3")).then(function () {});
+                      return Promise.resolve(ffmpeg.deleteFile(inputName)).then(function () {});
                     }, function () {});
                     return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
                   });
@@ -35815,51 +34102,50 @@ var convertMp3ToAac = function convertMp3ToAac(file, messageId) {
             });
           }
           var _temp5 = _catch(function () {
-            return Promise.resolve(ffmpeg.deleteFile(messageId + "_output.m4a")).then(function () {});
+            return Promise.resolve(ffmpeg.deleteFile(outputName)).then(function () {});
           }, function () {});
           return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
         }
+        var inputExt = getExtensionForType(file.type);
+        var inputName = messageId + "_input." + inputExt;
+        var outputName = messageId + "_output.m4a";
         var _temp7 = _catch(function () {
-          return Promise.resolve(ffmpeg.deleteFile(messageId + "_input.mp3")).then(function () {});
+          return Promise.resolve(ffmpeg.deleteFile(inputName)).then(function () {});
         }, function () {});
         return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7);
       });
     }, function (error) {
-      log.error('Failed to convert MP3 to AAC:', error);
+      log.error('Failed to convert audio to AAC:', error);
       throw error;
     }));
   } catch (e) {
     return Promise.reject(e);
   }
 };
+var SAFARI_SUPPORTED_TYPES = new Set(['audio/mp4', 'audio/aac', 'audio/x-m4a', 'audio/wav', 'audio/x-wav', 'audio/aiff']);
 var convertAudioForSafari = function convertAudioForSafari(file, messageId) {
   try {
-    var _exit = false;
-    var _temp9 = function () {
-      if (isSafari() && file.type === 'audio/mpeg' && file.name.endsWith('.mp3')) {
-        return _catch(function () {
-          return Promise.resolve(convertMp3ToAac(file, messageId)).then(function (_await$convertMp3ToAa) {
-            _exit = true;
-            return _await$convertMp3ToAa;
-          });
-        }, function (error) {
-          log.warn('Audio conversion failed, using original file:', error);
-          _exit = true;
-          return file;
-        });
-      }
-    }();
-    return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function (_result2) {
-      return _exit ? _result2 : file;
-    }) : _exit ? _temp9 : file);
+    if (!isSafari()) {
+      return Promise.resolve(file);
+    }
+    var baseType = file.type.split(';')[0].trim().toLowerCase();
+    if (SAFARI_SUPPORTED_TYPES.has(baseType)) {
+      return Promise.resolve(file);
+    }
+    return Promise.resolve(_catch(function () {
+      return Promise.resolve(convertToAac(file, messageId));
+    }, function (error) {
+      log.warn('Audio conversion failed, using original file:', error);
+      return file;
+    }));
   } catch (e) {
     return Promise.reject(e);
   }
 };
 
-var _templateObject$v, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$e, _templateObject6$b, _templateObject7$a, _templateObject8$a;
+var _templateObject$v, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$e, _templateObject6$b, _templateObject7$a;
 var AudioPlayer = function AudioPlayer(_ref) {
-  var _file$metadata5, _file$metadata6, _file$metadata7;
+  var _file$metadata6, _file$metadata7;
   var url = _ref.url,
     file = _ref.file,
     messagePlayed = _ref.messagePlayed,
@@ -35870,14 +34156,6 @@ var AudioPlayer = function AudioPlayer(_ref) {
     bgColor = _ref.bgColor,
     borderRadius = _ref.borderRadius,
     onClose = _ref.onClose;
-  var recordingInitialState = {
-    recordingSeconds: 0,
-    recordingMilliseconds: 0,
-    initRecording: false,
-    mediaStream: null,
-    mediaRecorder: null,
-    audio: undefined
-  };
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
@@ -35886,249 +34164,164 @@ var AudioPlayer = function AudioPlayer(_ref) {
     outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND];
   var dispatch = useDispatch();
   var playingAudioId = useSelector(playingAudioIdSelector);
-  var _useState = React.useState(recordingInitialState),
-    recording = _useState[0],
-    setRecording = _useState[1];
-  var _useState2 = React.useState(false),
-    isRendered = _useState2[0],
-    setIsRendered = _useState2[1];
-  var _useState3 = React.useState(false),
-    playAudio = _useState3[0],
-    setPlayAudio = _useState3[1];
-  var _useState4 = React.useState(''),
-    currentTime = _useState4[0],
-    setCurrentTime = _useState4[1];
+  var _useState = React.useState(false),
+    playAudio = _useState[0],
+    setPlayAudio = _useState[1];
+  var _useState2 = React.useState(''),
+    currentTime = _useState2[0],
+    setCurrentTime = _useState2[1];
+  var _useState3 = React.useState(0),
+    currentTimeSeconds = _useState3[0],
+    setCurrentTimeSeconds = _useState3[1];
+  var _useState4 = React.useState(0),
+    duration = _useState4[0],
+    setDuration = _useState4[1];
   var _useState5 = React.useState(0),
-    currentTimeSeconds = _useState5[0],
-    setCurrentTimeSeconds = _useState5[1];
-  var _useState6 = React.useState(0),
-    duration = _useState6[0],
-    setDuration = _useState6[1];
-  var _useState7 = React.useState(0),
-    realDuration = _useState7[0],
-    setRealDuration = _useState7[1];
-  var _useState8 = React.useState(1),
-    audioRate = _useState8[0],
-    setAudioRate = _useState8[1];
-  var wavesurfer = React.useRef(null);
-  var wavesurferContainer = React.useRef(null);
+    realDuration = _useState5[0],
+    setRealDuration = _useState5[1];
+  var _useState6 = React.useState(1),
+    audioRate = _useState6[0],
+    setAudioRate = _useState6[1];
+  var audioRef = React.useRef(null);
   var intervalRef = React.useRef(null);
   var convertedUrlRef = React.useRef(null);
+  var visualizationRef = React.useRef(null);
   var handleSetAudioRate = function handleSetAudioRate() {
-    if (wavesurfer.current) {
+    if (audioRef.current) {
       if (audioRate === 1) {
         setAudioRate(1.5);
-        wavesurfer.current.setPlaybackRate(1.5);
+        audioRef.current.playbackRate = 1.5;
       } else if (audioRate === 1.5) {
         setAudioRate(2);
-        wavesurfer.current.audioRate = 2;
-        wavesurfer.current.setPlaybackRate(2);
+        audioRef.current.playbackRate = 2;
       } else {
         setAudioRate(1);
-        wavesurfer.current.audioRate = 1;
-        wavesurfer.current.setPlaybackRate(1);
+        audioRef.current.playbackRate = 1;
       }
     }
   };
+  var startTimeTracking = function startTimeTracking() {
+    clearInterval(intervalRef.current);
+    intervalRef.current = setInterval(function () {
+      if (audioRef.current) {
+        var time = audioRef.current.currentTime;
+        if (time >= 0) {
+          setCurrentTime(formatAudioVideoTime(time));
+          setCurrentTimeSeconds(time);
+        }
+      }
+    }, 10);
+  };
   var handlePlayPause = function handlePlayPause() {
     if (setViewOnceVoiceModalOpen) {
       setViewOnceVoiceModalOpen(true);
       return;
     }
-    if (wavesurfer.current) {
-      if (!wavesurfer.current.isPlaying()) {
+    if (audioRef.current) {
+      if (audioRef.current.paused) {
         setPlayAudio(true);
         dispatch(setPlayingAudioIdAC("player_" + file.id));
-        intervalRef.current = setInterval(function () {
-          var currentTime = wavesurfer.current.getCurrentTime();
-          if (currentTime >= 0) {
-            setCurrentTime(formatAudioVideoTime(currentTime));
-            setCurrentTimeSeconds(currentTime);
-          }
-        }, 10);
+        startTimeTracking();
+        audioRef.current.play()["catch"](function (e) {
+          log.error('Audio play failed:', e);
+          setPlayAudio(false);
+        });
       } else {
+        audioRef.current.pause();
         if (playingAudioId === file.id) {
           dispatch(setPlayingAudioIdAC(null));
         }
       }
-      wavesurfer.current.playPause();
       if (!messagePlayed && incoming) {
         dispatch(markVoiceMessageAsPlayedAC(channelId, [file.messageId]));
       }
     }
   };
-  React.useEffect(function () {
-    if (recording.mediaStream) {
-      setRecording(_extends({}, recording, {
-        mediaRecorder: new MediaRecorder(recording.mediaStream, {
-          mimeType: 'audio/webm'
-        })
-      }));
+  var handleSeek = function handleSeek(e) {
+    if (!audioRef.current || !visualizationRef.current) return;
+    var rect = visualizationRef.current.getBoundingClientRect();
+    var clickX = e.clientX - rect.left;
+    var ratio = Math.max(0, Math.min(1, clickX / rect.width));
+    var audioDuration = audioRef.current.duration;
+    if (audioDuration && isFinite(audioDuration)) {
+      audioRef.current.currentTime = ratio * audioDuration;
+      setCurrentTime(formatAudioVideoTime(audioRef.current.currentTime));
+      setCurrentTimeSeconds(audioRef.current.currentTime);
     }
-  }, [recording.mediaStream]);
-  React.useEffect(function () {
-    var MAX_RECORDER_TIME = 15;
-    var recordingInterval = null;
-    if (recording.initRecording) {
-      recordingInterval = setInterval(function () {
-        setRecording(function (prevState) {
-          if (prevState.recordingSeconds === MAX_RECORDER_TIME && prevState.recordingMilliseconds === 0) {
-            clearInterval(recordingInterval);
-            return prevState;
-          }
-          if (prevState.recordingMilliseconds >= 0 && prevState.recordingMilliseconds < 99) {
-            return _extends({}, prevState, {
-              recordingMilliseconds: prevState.recordingMilliseconds + 1
-            });
-          }
-          if (prevState.recordingMilliseconds === 99) {
-            return _extends({}, prevState, {
-              recordingSeconds: prevState.recordingSeconds + 1,
-              recordingMilliseconds: 0
-            });
-          }
-          return prevState;
-        });
-      }, 10);
-    } else clearInterval(recordingInterval);
-    return function () {
-      return clearInterval(recordingInterval);
-    };
-  }, [recording.initRecording]);
+  };
   React.useEffect(function () {
-    if (url) {
+    if (url && url !== '_') {
+      var _file$metadata;
       if (convertedUrlRef.current) {
         URL.revokeObjectURL(convertedUrlRef.current);
         convertedUrlRef.current = null;
       }
-      if (url !== '_' && !isRendered && wavesurfer && wavesurfer.current) {
-        wavesurfer.current.destroy();
-      }
-      var initWaveSurfer = function initWaveSurfer() {
-        try {
-          var _exit = false;
-          return Promise.resolve(_catch(function () {
-            var _file$name;
-            function _temp2(_result2) {
-              if (_exit) return _result2;
-              wavesurfer.current = WaveSurfer.create({
-                container: wavesurferContainer.current,
-                waveColor: 'transparent',
-                progressColor: 'transparent',
-                audioRate: audioRate,
-                barWidth: 1,
-                barHeight: 1,
-                hideScrollbar: true,
-                barRadius: 1.5,
-                cursorWidth: 0,
-                barGap: 2,
-                height: 20
-              });
-              var peaks;
-              if (file.metadata) {
-                if (file.metadata.dur) {
-                  setDuration(file.metadata.dur);
-                  setCurrentTime(formatAudioVideoTime(file.metadata.dur));
-                }
-                if (file.metadata.tmb) {
-                  var maxVal = Array.isArray(file.metadata.tmb) && file.metadata.tmb.length > 0 ? file.metadata.tmb.reduce(function (acc, n) {
-                    return n > acc ? n : acc;
-                  }, -Infinity) : 0;
-                  var dec = maxVal / 100;
-                  peaks = file.metadata.tmb.map(function (peak) {
-                    return peak / dec / 100;
-                  });
-                }
-              }
-              wavesurfer.current.load(audioUrl, peaks);
-              wavesurfer.current.on('ready', function () {
-                var _file$metadata, _file$metadata2;
-                var audioDuration = wavesurfer.current.getDuration();
-                setRealDuration(audioDuration);
-                setDuration((file === null || file === void 0 ? void 0 : (_file$metadata = file.metadata) === null || _file$metadata === void 0 ? void 0 : _file$metadata.dur) || audioDuration);
-                setCurrentTime(formatAudioVideoTime((file === null || file === void 0 ? void 0 : (_file$metadata2 = file.metadata) === null || _file$metadata2 === void 0 ? void 0 : _file$metadata2.dur) || audioDuration));
-                wavesurfer.current.drawBuffer = function (d) {
-                  log.info('filters --- ', d);
-                };
-              });
-              wavesurfer.current.on('finish', function () {
-                var _file$metadata3, _file$metadata4;
-                setPlayAudio(false);
-                wavesurfer.current.seekTo(0);
-                var audioDuration = wavesurfer.current.getDuration();
-                setRealDuration(audioDuration);
-                setDuration((file === null || file === void 0 ? void 0 : (_file$metadata3 = file.metadata) === null || _file$metadata3 === void 0 ? void 0 : _file$metadata3.dur) || audioDuration);
-                setCurrentTime(formatAudioVideoTime((file === null || file === void 0 ? void 0 : (_file$metadata4 = file.metadata) === null || _file$metadata4 === void 0 ? void 0 : _file$metadata4.dur) || audioDuration));
-                setCurrentTimeSeconds(0);
-                if (playingAudioId === file.id) {
-                  dispatch(setPlayingAudioIdAC(null));
-                }
-                clearInterval(intervalRef.current);
-                if (onClose) {
-                  onClose();
-                }
-              });
-              wavesurfer.current.on('pause', function () {
-                setPlayAudio(false);
-                if (playingAudioId === file.id) {
-                  dispatch(setPlayingAudioIdAC(null));
-                }
-                clearInterval(intervalRef.current);
-              });
-              wavesurfer.current.on('interaction', function () {
-                var currentTime = wavesurfer.current.getCurrentTime();
-                setCurrentTime(formatAudioVideoTime(currentTime));
-                setCurrentTimeSeconds(currentTime);
-              });
-              if (url !== '_') {
-                setIsRendered(true);
-              }
-            }
-            var audioUrl = url;
-            var needsConversion = isSafari() && url && url !== '_' && (url.endsWith('.mp3') || ((_file$name = file.name) === null || _file$name === void 0 ? void 0 : _file$name.endsWith('.mp3')) || file.type === 'audio/mpeg');
-            var _temp = function () {
-              if (needsConversion) {
-                return _catch(function () {
-                  if (convertedUrlRef.current) {
-                    URL.revokeObjectURL(convertedUrlRef.current);
-                    convertedUrlRef.current = null;
-                  }
-                  var cacheKey = file.id || url;
-                  return Promise.resolve(fetch(url, {
-                    cache: 'no-store'
-                  })).then(function (response) {
-                    if (!response.ok) {
-                      throw new Error("Failed to fetch audio: " + response.statusText);
-                    }
-                    return Promise.resolve(response.blob()).then(function (blob) {
-                      var uniqueFileName = (file.id || Date.now()) + "_" + (file.name || 'audio.mp3');
-                      var audioFile = new File([blob], uniqueFileName, {
-                        type: blob.type || 'audio/mpeg',
-                        lastModified: Date.now()
-                      });
-                      return Promise.resolve(convertAudioForSafari(audioFile, file === null || file === void 0 ? void 0 : file.messageId)).then(function (convertedFile) {
-                        var convertedBlobUrl = URL.createObjectURL(convertedFile);
-                        audioUrl = convertedBlobUrl;
-                        convertedUrlRef.current = convertedBlobUrl;
-                        log.info("Converted audio for Safari: " + cacheKey + " -> " + convertedBlobUrl);
-                      });
-                    });
-                  });
-                }, function (conversionError) {
-                  log.warn('Failed to convert audio for Safari, using original:', conversionError);
-                  audioUrl = url;
-                });
-              }
-            }();
-            return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
-          }, function (e) {
-            log.error('Failed to init wavesurfer', e);
-          }));
-        } catch (e) {
-          return Promise.reject(e);
+      var audio = new Audio();
+      audioRef.current = audio;
+      audio.playbackRate = audioRate;
+      audio.preload = 'metadata';
+      if ((_file$metadata = file.metadata) !== null && _file$metadata !== void 0 && _file$metadata.dur) {
+        setDuration(file.metadata.dur);
+        setCurrentTime(formatAudioVideoTime(file.metadata.dur));
+      }
+      audio.addEventListener('loadedmetadata', function () {
+        var audioDuration = audio.duration;
+        if (audioDuration && isFinite(audioDuration)) {
+          var _file$metadata2, _file$metadata3;
+          setRealDuration(audioDuration);
+          setDuration((file === null || file === void 0 ? void 0 : (_file$metadata2 = file.metadata) === null || _file$metadata2 === void 0 ? void 0 : _file$metadata2.dur) || audioDuration);
+          setCurrentTime(formatAudioVideoTime((file === null || file === void 0 ? void 0 : (_file$metadata3 = file.metadata) === null || _file$metadata3 === void 0 ? void 0 : _file$metadata3.dur) || audioDuration));
         }
-      };
-      initWaveSurfer();
+      });
+      audio.addEventListener('ended', function () {
+        setPlayAudio(false);
+        audio.currentTime = 0;
+        var audioDuration = audio.duration;
+        if (audioDuration && isFinite(audioDuration)) {
+          var _file$metadata4, _file$metadata5;
+          setRealDuration(audioDuration);
+          setDuration((file === null || file === void 0 ? void 0 : (_file$metadata4 = file.metadata) === null || _file$metadata4 === void 0 ? void 0 : _file$metadata4.dur) || audioDuration);
+          setCurrentTime(formatAudioVideoTime((file === null || file === void 0 ? void 0 : (_file$metadata5 = file.metadata) === null || _file$metadata5 === void 0 ? void 0 : _file$metadata5.dur) || audioDuration));
+        }
+        setCurrentTimeSeconds(0);
+        if (playingAudioId === file.id) {
+          dispatch(setPlayingAudioIdAC(null));
+        }
+        clearInterval(intervalRef.current);
+        if (onClose) {
+          onClose();
+        }
+      });
+      audio.addEventListener('pause', function () {
+        setPlayAudio(false);
+        if (playingAudioId === file.id) {
+          dispatch(setPlayingAudioIdAC(null));
+        }
+        clearInterval(intervalRef.current);
+      });
+      audio.addEventListener('error', function () {
+        var _audio$error, _audio$error2;
+        log.error('Audio element error:', (_audio$error = audio.error) === null || _audio$error === void 0 ? void 0 : _audio$error.message, 'code:', (_audio$error2 = audio.error) === null || _audio$error2 === void 0 ? void 0 : _audio$error2.code);
+        if (isSafari() && !convertedUrlRef.current) {
+          log.info('Attempting Safari audio conversion fallback...');
+          fetch(url).then(function (response) {
+            return response.blob();
+          }).then(function (blob) {
+            var audioFile = new File([blob], file.name || 'audio', {
+              type: blob.type || 'audio/mpeg',
+              lastModified: Date.now()
+            });
+            return convertAudioForSafari(audioFile, file === null || file === void 0 ? void 0 : file.messageId);
+          }).then(function (convertedFile) {
+            var blobUrl = URL.createObjectURL(convertedFile);
+            convertedUrlRef.current = blobUrl;
+            audio.src = blobUrl;
+          })["catch"](function (conversionError) {
+            log.error('Safari audio conversion fallback failed:', conversionError);
+          });
+        }
+      });
+      audio.src = url;
     }
     return function () {
       clearInterval(intervalRef.current);
@@ -36136,16 +34329,17 @@ var AudioPlayer = function AudioPlayer(_ref) {
         URL.revokeObjectURL(convertedUrlRef.current);
         convertedUrlRef.current = null;
       }
-      if (wavesurfer.current) {
-        wavesurfer.current.destroy();
-        wavesurfer.current = null;
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.src = '';
+        audioRef.current = null;
       }
     };
   }, [url, file.id]);
   React.useEffect(function () {
-    if (playAudio && playingAudioId && playingAudioId !== "player_" + file.id && wavesurfer.current) {
+    if (playAudio && playingAudioId && playingAudioId !== "player_" + file.id && audioRef.current) {
       setPlayAudio(false);
-      wavesurfer.current.pause();
+      audioRef.current.pause();
     }
   }, [playingAudioId]);
   return /*#__PURE__*/React__default.createElement(Container$e, {
@@ -36157,10 +34351,10 @@ var AudioPlayer = function AudioPlayer(_ref) {
   }, playAudio ? /*#__PURE__*/React__default.createElement(SvgPause, null) : /*#__PURE__*/React__default.createElement(SvgPlay, null), viewOnce && (/*#__PURE__*/React__default.createElement(DisappearingMessagesBadge$1, {
     color: incoming ? incomingMessageBackground : outgoingMessageBackground,
     "$iconColor": accentColor
-  }))), /*#__PURE__*/React__default.createElement(WaveContainer, null, /*#__PURE__*/React__default.createElement(VisualizationWrapper, null, /*#__PURE__*/React__default.createElement(AudioVisualizationPlaceholder, {
-    ref: wavesurferContainer,
-    hidden: !!((_file$metadata5 = file.metadata) !== null && _file$metadata5 !== void 0 && _file$metadata5.tmb && Array.isArray(file.metadata.tmb))
-  }), ((_file$metadata6 = file.metadata) === null || _file$metadata6 === void 0 ? void 0 : _file$metadata6.tmb) && Array.isArray(file.metadata.tmb) && (/*#__PURE__*/React__default.createElement(AudioVisualization$1, {
+  }))), /*#__PURE__*/React__default.createElement(WaveContainer, null, /*#__PURE__*/React__default.createElement(VisualizationWrapper, {
+    ref: visualizationRef,
+    onClick: handleSeek
+  }, ((_file$metadata6 = file.metadata) === null || _file$metadata6 === void 0 ? void 0 : _file$metadata6.tmb) && Array.isArray(file.metadata.tmb) && (/*#__PURE__*/React__default.createElement(AudioVisualizationComponent, {
     tmb: file.metadata.tmb,
     duration: realDuration || duration || file.metadata.dur || 0,
     currentTime: currentTimeSeconds,
@@ -36173,7 +34367,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
     color: textSecondary,
     onClick: handleSetAudioRate,
     backgroundColor: backgroundSections
-  }, audioRate, /*#__PURE__*/React__default.createElement("span", null, "X"))), /*#__PURE__*/React__default.createElement(Timer$1, {
+  }, audioRate, /*#__PURE__*/React__default.createElement("span", null, "X"))), /*#__PURE__*/React__default.createElement(Timer, {
     color: textSecondary
   }, currentTime || formatAudioVideoTime(((_file$metadata7 = file.metadata) === null || _file$metadata7 === void 0 ? void 0 : _file$metadata7.dur) || 0)));
 };
@@ -36185,24 +34379,17 @@ var Container$e = styled__default.div(_templateObject$v || (_templateObject$v =
 var PlayPause = styled__default.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: relative;\n  & > svg {\n    color: ", ";\n    display: flex;\n    width: 40px;\n    height: 40px;\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var VisualizationWrapper = styled__default.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
-var AudioVisualizationPlaceholder = styled__default.div(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  position: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n"])), function (props) {
-  return props.hidden ? 'absolute' : 'relative';
-}, function (props) {
-  return props.hidden ? 0 : 1;
-}, function (props) {
-  return props.hidden ? 'none' : 'auto';
-});
-var AudioRate = styled__default.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  width: 30px;\n  min-width: 30px;\n  border-radius: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 14px;\n  color: ", ";\n  height: 18px;\n  box-sizing: border-box;\n  margin-left: auto;\n  cursor: pointer;\n\n  & > span {\n    margin-top: auto;\n    line-height: 16px;\n    font-size: 9px;\n  }\n"])), function (props) {
+var VisualizationWrapper = styled__default.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n"])));
+var AudioRate = styled__default.div(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  width: 30px;\n  min-width: 30px;\n  border-radius: 12px;\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 14px;\n  color: ", ";\n  height: 18px;\n  box-sizing: border-box;\n  margin-left: auto;\n  cursor: pointer;\n\n  & > span {\n    margin-top: auto;\n    line-height: 16px;\n    font-size: 9px;\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.color;
 });
-var WaveContainer = styled__default.div(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  margin-left: 8px;\n"])));
-var Timer$1 = styled__default.div(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 59px;\n  bottom: 12px;\n  display: inline-block;\n  font-weight: 400;\n  font-size: 11px;\n  line-height: 12px;\n  color: ", ";\n"])), function (props) {
+var WaveContainer = styled__default.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  margin-left: 8px;\n"])));
+var Timer = styled__default.div(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 59px;\n  bottom: 12px;\n  display: inline-block;\n  font-weight: 400;\n  font-size: 11px;\n  line-height: 12px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var DisappearingMessagesBadge$1 = styled__default(SvgBadge)(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: -3px;\n  right: -8px;\n  width: 24px !important;\n  height: 24px !important;\n  transform: scale(0.875);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  color: ", ";\n  & > path:nth-child(1) {\n    stroke: ", ";\n    fill: ", ";\n  }\n  g {\n    path {\n      stroke: ", ";\n    }\n  }\n"])), function (props) {
+var DisappearingMessagesBadge$1 = styled__default(SvgBadge)(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: -3px;\n  right: -8px;\n  width: 24px !important;\n  height: 24px !important;\n  transform: scale(0.875);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  color: ", ";\n  & > path:nth-child(1) {\n    stroke: ", ";\n    fill: ", ";\n  }\n  g {\n    path {\n      stroke: ", ";\n    }\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.color;
@@ -36670,7 +34857,7 @@ var UploadInProgress = styled__default.img(_templateObject7$c || (_templateObjec
   return props.isDetailsView && "\n    width: 100%;\n    height: 100%;\n    min-width: inherit;\n  ";
 });
 
-var _templateObject$z, _templateObject2$v, _templateObject3$p, _templateObject4$l, _templateObject5$h, _templateObject6$e, _templateObject7$d, _templateObject8$b, _templateObject9$9, _templateObject0$8, _templateObject1$6, _templateObject10$3, _templateObject11$3;
+var _templateObject$z, _templateObject2$v, _templateObject3$p, _templateObject4$l, _templateObject5$h, _templateObject6$e, _templateObject7$d, _templateObject8$a, _templateObject9$9, _templateObject0$8, _templateObject1$6, _templateObject10$3, _templateObject11$3;
 var Attachment = function Attachment(_ref) {
   var attachment = _ref.attachment,
     _ref$isPreview = _ref.isPreview,
@@ -37530,7 +35717,7 @@ var AttachmentFile$1 = styled__default.div(_templateObject7$d || (_templateObjec
 }, function (props) {
   return !props.isRepliedMessage && !props.isPreview && !props.isUploading && "\n      &:hover " + DownloadFile$1 + " {\n        display: flex;\n      }\n\n      &:hover " + UploadPercent + " {\n        border-radius: 50%\n      }\n\n      &:hover " + FileThumbnail + " {\n      }\n        &:hover " + AttachmentIconCont + " {\n    display: none;\n  }\n  ";
 }, AttachmentIconCont);
-var RemoveChosenFile = styled__default(SvgDeleteUpload)(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 20px;\n  height: 20px !important;\n  top: -11px;\n  right: -11px;\n  padding: 2px;\n  cursor: pointer;\n  color: ", ";\n  z-index: 5;\n  circle {\n    stroke: ", ";\n  }\n  path {\n    stroke: ", ";\n  }\n"])), function (props) {
+var RemoveChosenFile = styled__default(SvgDeleteUpload)(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 20px;\n  height: 20px !important;\n  top: -11px;\n  right: -11px;\n  padding: 2px;\n  cursor: pointer;\n  color: ", ";\n  z-index: 5;\n  circle {\n    stroke: ", ";\n  }\n  path {\n    stroke: ", ";\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.$backgroundColor;
@@ -38185,7 +36372,7 @@ var EMOJIS = [{
   }]
 }];
 
-var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$f, _templateObject7$e, _templateObject8$c;
+var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$f, _templateObject7$e, _templateObject8$b;
 var EmojiIcon = function EmojiIcon(_ref) {
   var collectionName = _ref.collectionName;
   switch (collectionName) {
@@ -38397,7 +36584,7 @@ var EmojiFooter = styled__default.div(_templateObject7$e || (_templateObject7$e
 }, function (props) {
   return props.emojisCategoryIconsPosition === 'top' && "1px solid " + props.borderColor;
 });
-var Emoji = styled__default.li(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  margin: 0 2px;\n  display: inline-block;\n  box-sizing: border-box;\n  border-radius: 50%;\n  padding-top: 2px;\n  text-align: center;\n  background: transparent;\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  & > * {\n    font-size: 22px;\n  }\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
+var Emoji = styled__default.li(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  margin: 0 2px;\n  display: inline-block;\n  box-sizing: border-box;\n  border-radius: 50%;\n  padding-top: 2px;\n  text-align: center;\n  background: transparent;\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  & > * {\n    font-size: 22px;\n  }\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 });
 
@@ -38571,7 +36758,7 @@ var OpenMoreEmojis = styled__default.span(_templateObject3$s || (_templateObject
   return props.iconHoverColor;
 });
 
-var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$o, _templateObject5$j, _templateObject6$g, _templateObject7$f, _templateObject8$d, _templateObject9$a, _templateObject0$9, _templateObject1$7, _templateObject10$4;
+var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$o, _templateObject5$j, _templateObject6$g, _templateObject7$f, _templateObject8$c, _templateObject9$a, _templateObject0$9, _templateObject1$7, _templateObject10$4;
 var POLL_VOTES_LIMIT = 20;
 var AllVotesPopup = function AllVotesPopup(_ref) {
   var _pollVotesHasMore$key, _poll$voteDetails, _poll$voteDetails$vot, _poll$voteDetails3;
@@ -38712,7 +36899,7 @@ var LoadingText = styled__default.div(_templateObject6$g || (_templateObject6$g
   return p.color;
 });
 var TitleWrapper = styled__default.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n  max-width: calc(100% - 54px);\n  margin: 0 auto;\n"])));
-var BackButton = styled__default.button(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  padding: 9px;\n  cursor: pointer;\n  box-sizing: content-box;\n  background: transparent;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  flex-shrink: 0;\n\n  & > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  &:hover {\n    opacity: 0.7;\n  }\n"])), function (p) {
+var BackButton = styled__default.button(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  padding: 9px;\n  cursor: pointer;\n  box-sizing: content-box;\n  background: transparent;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  flex-shrink: 0;\n\n  & > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  &:hover {\n    opacity: 0.7;\n  }\n"])), function (p) {
   return p.color;
 });
 var VotesContainer = styled__default.div(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n  padding: 0 2px 8px 16px;\n  border-radius: 10px;\n  background-color: ", ";\n  margin-top: 16px;\n"])), function (p) {
@@ -38728,7 +36915,7 @@ var Loader = styled__default.div(_templateObject10$4 || (_templateObject10$4 = _
   return p.color;
 });
 
-var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$h, _templateObject7$g, _templateObject8$e, _templateObject9$b, _templateObject0$a, _templateObject1$8, _templateObject10$5;
+var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$h, _templateObject7$g, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$8, _templateObject10$5;
 var VotesResultsPopup = function VotesResultsPopup(_ref) {
   var _poll$voteDetails3, _poll$voteDetails4, _poll$options$find;
   var onClose = _ref.onClose,
@@ -38891,7 +37078,7 @@ var OptionBlock = styled__default.div(_templateObject2$A || (_templateObject2$A
   return p.border;
 });
 var OptionHeader = styled__default.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 8px;\n"])));
-var OptionTitle = styled__default.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  max-width: calc(100% - 60px);\n  font-family: Inter;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.4px;\n"])), function (p) {
+var OptionTitle = styled__default.div(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  max-width: calc(100% - 60px);\n  font-family: Inter;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.4px;\n  overflow-wrap: break-word;\n"])), function (p) {
   return p.color;
 });
 var OptionCount = styled__default.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 13px;\n  margin-bottom: auto;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.4px;\n"])), function (p) {
@@ -38899,7 +37086,7 @@ var OptionCount = styled__default.div(_templateObject5$k || (_templateObject5$k
 });
 var Voters = styled__default.div(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 5px;\n"])));
 var VoterRow$1 = styled__default.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 0;\n"])));
-var VoterInfo$1 = styled__default.div(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  justify-content: space-between;\n"])));
+var VoterInfo$1 = styled__default.div(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  justify-content: space-between;\n"])));
 var VoterName$1 = styled__default.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  max-width: calc(100% - 120px);\n"])), function (p) {
   return p.color;
 });
@@ -38935,7 +37122,7 @@ function SvgFilledCheckbox(props) {
   })));
 }
 
-var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$f, _templateObject9$c, _templateObject0$b, _templateObject1$9, _templateObject10$6, _templateObject11$4, _templateObject12$3;
+var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$i, _templateObject7$h, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$9, _templateObject10$6, _templateObject11$4, _templateObject12$3;
 var PollMessage = function PollMessage(_ref) {
   var _poll$voteDetails3, _poll$voteDetails4, _poll$voteDetails5, _poll$voteDetails6, _poll$voteDetails7;
   var message = _ref.message,
@@ -39106,7 +37293,7 @@ var Indicator = styled__default.div(_templateObject7$h || (_templateObject7$h =
 }, function (p) {
   return p.disabled ? 'not-allowed' : 'pointer';
 });
-var EmptyCircle = styled__default.span(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 18.5px;\n  height: 18.5px;\n  border-radius: 50%;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), function (p) {
+var EmptyCircle = styled__default.span(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 18.5px;\n  height: 18.5px;\n  border-radius: 50%;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n"])), function (p) {
   return p.border;
 });
 var StyledCheck = styled__default(SvgFilledCheckbox)(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  width: 18.5px;\n  height: 18.5px;\n"])), function (p) {
@@ -39130,7 +37317,7 @@ var UsersContainer = styled__default.div(_templateObject12$3 || (_templateObject
   return p.cursor;
 });
 
-var _templateObject$H, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$m, _templateObject6$j, _templateObject7$i, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$a;
+var _templateObject$H, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$m, _templateObject6$j, _templateObject7$i, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$a;
 var validateUrl = function validateUrl(url) {
   try {
     var urlObj = new URL(url);
@@ -39461,12 +37648,12 @@ var Img = styled__default.img(_templateObject7$i || (_templateObject7$i = _tagge
   var shouldAnimate = _ref22.shouldAnimate;
   return shouldAnimate && "\n    animation: fadeIn 0.4s ease-out forwards;\n  ";
 });
-var OGRow = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0;\n"])));
+var OGRow = styled__default.div(_templateObject8$f || (_templateObject8$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0;\n"])));
 var OGTextWrapper = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n"])));
 var FaviconContainer = styled__default.div(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n  width: 52px;\n  height: 52px;\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 8px;\n  flex: 0 0 52px;\n"])));
 var FaviconImg = styled__default.img(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n"])));
 
-var _templateObject$I, _templateObject2$D, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$k, _templateObject7$j, _templateObject8$h, _templateObject9$e, _templateObject0$d;
+var _templateObject$I, _templateObject2$D, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$e, _templateObject0$d;
 var MessageBody = function MessageBody(_ref) {
   var _message$attachments2, _message$attachments3, _message$pollDetails, _message$pollDetails2, _message$attachments4;
   var message = _ref.message,
@@ -40227,7 +38414,7 @@ var EmojiContainer = styled__default.div(_templateObject7$j || (_templateObject7
 }, function (props) {
   return props.position === 'top' && 'calc(100% + 4px)';
 });
-var FrequentlyEmojisContainer = styled__default.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -50px;\n  z-index: 99;\n"])), function (props) {
+var FrequentlyEmojisContainer = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -50px;\n  z-index: 99;\n"])), function (props) {
   return props.rtlDirection ? '' : '0';
 }, function (props) {
   return props.rtlDirection && '0';
@@ -40239,7 +38426,7 @@ var ReadMoreLink = styled__default.span(_templateObject0$d || (_templateObject0$
   return props.accentColor;
 });
 
-var _templateObject$J, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$l, _templateObject7$k, _templateObject8$i, _templateObject9$f, _templateObject0$e;
+var _templateObject$J, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$l, _templateObject7$k, _templateObject8$h, _templateObject9$f, _templateObject0$e;
 var reactionsPrevLength = 0;
 function ReactionsPopup(_ref) {
   var messageId = _ref.messageId,
@@ -40482,7 +38669,7 @@ var ReactionsList = styled__default.ul(_templateObject4$t || (_templateObject4$t
 var ReactionScoresCont = styled__default.div(_templateObject5$o || (_templateObject5$o = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  overflow: auto;\n  overflow-y: hidden;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  &::-webkit-scrollbar-thumb {\n    display: none;\n  }\n  &::-webkit-scrollbar-track {\n    display: none;\n  }\n"])));
 var ReactionScoresList = styled__default.div(_templateObject6$l || (_templateObject6$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 2px 8px 0;\n"])));
 var TabKey = styled__default.span(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose([""])));
-var ReactionScoreItem = styled__default.div(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  white-space: nowrap;\n  padding: ", ";\n  font-weight: 500;\n  font-size: 13px;\n  color: ", ";\n  margin-bottom: -1px;\n  cursor: pointer;\n  & > span {\n    position: relative;\n    padding: ", ";\n    border-radius: 16px;\n    height: 30px;\n    box-sizing: border-box;\n    font-family: Inter, sans-serif;\n    font-style: normal;\n    font-weight: 600;\n    font-size: 14px;\n    line-height: ", ";\n    background-color: ", ";\n    color: ", ";\n    ", "\n\n    & ", " {\n      font-family:\n        apple color emoji,\n        segoe ui emoji,\n        noto color emoji,\n        android emoji,\n        emojisymbols,\n        emojione mozilla,\n        twemoji mozilla,\n        segoe ui symbol;\n      margin-right: 4px;\n      font-size: 15px;\n    }\n  }\n"])), function (props) {
+var ReactionScoreItem = styled__default.div(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  white-space: nowrap;\n  padding: ", ";\n  font-weight: 500;\n  font-size: 13px;\n  color: ", ";\n  margin-bottom: -1px;\n  cursor: pointer;\n  & > span {\n    position: relative;\n    padding: ", ";\n    border-radius: 16px;\n    height: 30px;\n    box-sizing: border-box;\n    font-family: Inter, sans-serif;\n    font-style: normal;\n    font-weight: 600;\n    font-size: 14px;\n    line-height: ", ";\n    background-color: ", ";\n    color: ", ";\n    ", "\n\n    & ", " {\n      font-family:\n        apple color emoji,\n        segoe ui emoji,\n        noto color emoji,\n        android emoji,\n        emojisymbols,\n        emojione mozilla,\n        twemoji mozilla,\n        segoe ui symbol;\n      margin-right: 4px;\n      font-size: 15px;\n    }\n  }\n"])), function (props) {
   return props.bubbleStyle ? '12px 4px' : '12px';
 }, function (props) {
   return props.active ? props.activeColor : props.color;
@@ -40659,7 +38846,7 @@ function SvgCircleDashed(props) {
   })));
 }
 
-var _templateObject$L, _templateObject2$G, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$j, _templateObject9$g, _templateObject0$f, _templateObject1$b, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$3;
+var _templateObject$L, _templateObject2$G, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$g, _templateObject0$f, _templateObject1$b, _templateObject10$7, _templateObject11$5, _templateObject12$4, _templateObject13$3;
 var defaultFormatDate = function defaultFormatDate(date) {
   var m = moment(date);
   if (m.isSame(moment(), 'day')) {
@@ -41218,7 +39405,7 @@ var RowTitle = styled__default.div(_templateObject6$m || (_templateObject6$m = _
 var RowDate = styled__default.div(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  min-width: max-content;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n"])), function (p) {
   return p.color;
 });
-var Empty = styled__default.div(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  padding: 16px 0;\n  font-size: 14px;\n  height: calc(100% - 32px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (p) {
+var Empty = styled__default.div(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  padding: 16px 0;\n  font-size: 14px;\n  height: calc(100% - 32px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (p) {
   return p.color;
 });
 var DropdownRoot = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  ", "\n  transform: ", ";\n  z-index: 15;\n  background: ", ";\n  box-shadow: 0px 0px 24px 0px #11153929;\n  border-radius: 16px;\n  direction: initial;\n  visibility: ", ";\n"])), function (p) {
@@ -41379,6 +39566,97 @@ var EmptySelection = styled__default.span(_templateObject2$H || (_templateObject
   return props.disabled && '0.5';
 });
 
+var copyRichTextToClipboard = function copyRichTextToClipboard(html, plainText) {
+  try {
+    var _temp4 = function _temp4(_result4) {
+      if (_exit2) return _result4;
+      try {
+        if (typeof document !== 'undefined') {
+          var container = document.createElement('div');
+          container.innerHTML = html;
+          container.style.position = 'fixed';
+          container.style.left = '-9999px';
+          container.style.opacity = '0';
+          document.body.appendChild(container);
+          var range = document.createRange();
+          range.selectNodeContents(container);
+          var selection = window.getSelection();
+          if (selection) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+            var successful = document.execCommand('copy');
+            selection.removeAllRanges();
+            document.body.removeChild(container);
+            return successful;
+          }
+          document.body.removeChild(container);
+        }
+      } catch (e) {}
+      return copyToClipboard(plainText);
+    };
+    var _exit2 = false;
+    var _temp3 = _catch(function () {
+      var clipboard = navigator.clipboard;
+      return function () {
+        if (typeof navigator !== 'undefined' && clipboard && clipboard.write) {
+          var htmlBlob = new Blob([html], {
+            type: 'text/html'
+          });
+          var textBlob = new Blob([plainText], {
+            type: 'text/plain'
+          });
+          var ClipboardItemCtor = window.ClipboardItem;
+          var clipboardItem = new ClipboardItemCtor({
+            'text/html': htmlBlob,
+            'text/plain': textBlob
+          });
+          return Promise.resolve(clipboard.write([clipboardItem])).then(function () {
+            _exit2 = true;
+            return true;
+          });
+        }
+      }();
+    }, function () {});
+    return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var copyToClipboard = function copyToClipboard(text) {
+  try {
+    var _temp2 = function _temp2(_result2) {
+      if (_exit) return _result2;
+      try {
+        if (typeof document !== 'undefined') {
+          var textarea = document.createElement('textarea');
+          textarea.value = text;
+          textarea.style.position = 'fixed';
+          textarea.style.left = '-9999px';
+          document.body.appendChild(textarea);
+          textarea.focus();
+          textarea.select();
+          var successful = document.execCommand('copy');
+          document.body.removeChild(textarea);
+          return successful;
+        }
+      } catch (e) {}
+      return false;
+    };
+    var _exit = false;
+    var _temp = _catch(function () {
+      if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+        return Promise.resolve(navigator.clipboard.writeText(text)).then(function () {
+          _exit = true;
+          return true;
+        });
+      }
+    }, function () {});
+    return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 var useMessageState = function useMessageState() {
   var _useState = React.useState(false),
     deletePopupOpen = _useState[0],
@@ -41769,8 +40047,13 @@ var Message$1 = function Message(_ref) {
       accentColor: '',
       textSecondary: ''
     });
-    var textToCopy = typeof textToCopyHTML === 'string' ? textToCopyHTML : _extractTextFromReactElement(textToCopyHTML);
-    navigator.clipboard.writeText(textToCopy);
+    var plainText = typeof textToCopyHTML === 'string' ? textToCopyHTML : _extractTextFromReactElement(textToCopyHTML);
+    if (message.bodyAttributes && message.bodyAttributes.length > 0) {
+      var html = bodyAttributesToHTML(message.body, message.bodyAttributes, message.mentionedUsers, contactsMap, getFromContacts);
+      copyRichTextToClipboard(html, plainText);
+    } else {
+      navigator.clipboard.writeText(plainText);
+    }
     setMessageActionsShow(false);
   }, [message, contactsMap]);
   var handleToggleReactionsPopup = React.useCallback(function () {
@@ -42315,7 +40598,7 @@ var MessageItem = styled__default.div(_templateObject7$m || (_templateObject7$m
   return props.hoverBackground || '';
 }, HiddenMessageTime$1, MessageStatus$1);
 
-var _templateObject$O, _templateObject2$J, _templateObject3$C, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$n, _templateObject8$k, _templateObject9$h, _templateObject0$g, _templateObject1$c;
+var _templateObject$O, _templateObject2$J, _templateObject3$C, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$n, _templateObject8$j, _templateObject9$h, _templateObject0$g, _templateObject1$c;
 var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   var lastIndex = _ref.lastIndex,
     currentMessageDate = _ref.currentMessageDate,
@@ -43454,7 +41737,7 @@ var DropAttachmentArea = styled__default.div(_templateObject7$n || (_templateObj
 }, IconWrapper$1, function (props) {
   return props.iconBackgroundColor;
 });
-var MessageWrapper = styled__default.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  &.highlight {\n    & .message_item {\n      transition: all 0.2s ease-in-out;\n      padding-top: 4px;\n      padding-bottom: 4px;\n      background-color: ", ";\n    }\n  }\n\n  & .message_item {\n    transition: all 0.2s ease-in-out;\n  }\n"])), function (props) {
+var MessageWrapper = styled__default.div(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  &.highlight {\n    & .message_item {\n      padding-top: 4px;\n      padding-bottom: 4px;\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
   return props.highlightBg || '#d5d5d5';
 });
 var NoMessagesContainer = styled__default.div(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
@@ -44932,6 +43215,63 @@ function EditMessagePlugin(_ref) {
   return null;
 }
 
+function parseHTMLToFormattedSegments(html) {
+  var parser = new DOMParser();
+  var doc = parser.parseFromString(html, 'text/html');
+  var segments = [];
+  function walkNode(node, inheritedFormat) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      var text = node.textContent || '';
+      if (text) {
+        segments.push({
+          text: text,
+          format: inheritedFormat
+        });
+      }
+      return;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+    var el = node;
+    var format = inheritedFormat;
+    var tag = el.tagName.toLowerCase();
+    if (tag === 'b' || tag === 'strong') format |= 1;
+    if (tag === 'i' || tag === 'em') format |= 2;
+    if (tag === 's' || tag === 'del' || tag === 'strike') format |= 4;
+    if (tag === 'u') format |= 8;
+    if (tag === 'code') format |= 16;
+    var style = el.style;
+    if (style) {
+      var fontWeight = style.fontWeight;
+      if (fontWeight === 'bold' || fontWeight === 'bolder' || fontWeight && parseInt(fontWeight, 10) >= 600) {
+        format |= 1;
+      }
+      if (style.fontStyle === 'italic') format |= 2;
+      var textDecoration = style.textDecoration || style.textDecorationLine || '';
+      if (textDecoration.indexOf('line-through') !== -1) format |= 4;
+      if (textDecoration.indexOf('underline') !== -1) format |= 8;
+      if (style.letterSpacing === '4px' || tag === 'code') format |= 16;
+    }
+    var mentionId = el.getAttribute('data-mention');
+    if (mentionId) {
+      var _text = el.textContent || '';
+      segments.push({
+        text: _text,
+        format: format,
+        mentionUserId: mentionId
+      });
+      return;
+    }
+    var childNodes = el.childNodes;
+    for (var i = 0; i < childNodes.length; i++) {
+      walkNode(childNodes[i], format);
+    }
+  }
+  var bodyChildNodes = doc.body.childNodes;
+  for (var i = 0; i < bodyChildNodes.length; i++) {
+    walkNode(bodyChildNodes[i], 0);
+  }
+  return segments;
+}
 function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMessageText, setMentionedMember, messageToEdit, activeChannelMembers, contactsMap, getFromContacts) {
   if (activeChannelMembers === void 0) {
     activeChannelMembers = [];
@@ -45036,7 +43376,54 @@ function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMess
     if (!('clipboardData' in e) || !e.clipboardData) {
       return false;
     }
+    var pastedHTML = e.clipboardData.getData('text/html');
     var pastedText = e.clipboardData.getData('text/plain');
+    if (pastedHTML) {
+      var segments = parseHTMLToFormattedSegments(pastedHTML);
+      var hasFormatting = segments.some(function (s) {
+        return s.format > 0 || s.mentionUserId;
+      });
+      if (hasFormatting && segments.length > 0) {
+        editor.update(function () {
+          var selection = lexical.$getSelection();
+          if (!lexical.$isRangeSelection(selection)) return;
+          var nodes = [];
+          segments.forEach(function (segment) {
+            if (segment.mentionUserId) {
+              var member = activeChannelMembers.find(function (m) {
+                return m.id === segment.mentionUserId;
+              });
+              if (member) {
+                setMentionedMember(member);
+                var mentionNode = $createMentionNode(_extends({}, member, {
+                  name: segment.text
+                }));
+                if (segment.format > 0) {
+                  mentionNode.setFormat(segment.format);
+                }
+                nodes.push(mentionNode);
+              } else {
+                var textNode = lexical.$createTextNode(segment.text);
+                if (segment.format > 0) {
+                  textNode.setFormat(segment.format);
+                }
+                nodes.push(textNode);
+              }
+            } else {
+              var _textNode = lexical.$createTextNode(segment.text);
+              if (segment.format > 0) {
+                _textNode.setFormat(segment.format);
+              }
+              nodes.push(_textNode);
+            }
+          });
+          if (nodes.length > 0) {
+            selection.insertNodes(nodes);
+          }
+        });
+        return true;
+      }
+    }
     if (pastedText) {
       editor.update(function () {
         var selection = lexical.$getSelection();
@@ -45175,7 +43562,7 @@ function FormatMessagePlugin(_ref3) {
   return null;
 }
 
-var _templateObject$R, _templateObject2$M, _templateObject3$E, _templateObject4$z, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$l;
+var _templateObject$R, _templateObject2$M, _templateObject3$E, _templateObject4$z, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$k;
 var EmojiIcon$1 = function EmojiIcon(_ref) {
   var collectionName = _ref.collectionName;
   switch (collectionName) {
@@ -45407,7 +43794,7 @@ var EmojiFooter$1 = styled__default.div(_templateObject7$o || (_templateObject7$
 }, function (props) {
   return props.emojisCategoryIconsPosition === 'top' && "1px solid " + props.borderColor;
 });
-var Emoji$1 = styled__default.li(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  margin: 0 2px;\n  display: inline-block;\n  box-sizing: border-box;\n  border-radius: 50%;\n  padding-top: 2px;\n  text-align: center;\n  background: transparent;\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  & > * {\n    font-size: 22px;\n  }\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
+var Emoji$1 = styled__default.li(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  margin: 0 2px;\n  display: inline-block;\n  box-sizing: border-box;\n  border-radius: 50%;\n  padding-top: 2px;\n  text-align: center;\n  background: transparent;\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  & > * {\n    font-size: 22px;\n  }\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 });
 
@@ -45697,8 +44084,7 @@ var fieldsObject = {
   channelId: '',
   currentRecordedFile: null,
   recording: null,
-  recorder: null,
-  wavesurferContainer: null
+  recorder: null
 };
 var shouldDraw = false;
 var DEFAULT_MAX_RECORDING_DURATION = 600;
@@ -45738,18 +44124,20 @@ var AudioRecord = function AudioRecord(_ref) {
   var _useState5 = React.useState(0),
     currentTime = _useState5[0],
     setCurrentTime = _useState5[1];
-  var _useState6 = React.useState(null),
-    sendingInterval = _useState6[0],
-    setSendingInterval = _useState6[1];
-  var _useState7 = React.useState(''),
-    currentChannelId = _useState7[0],
-    setCurrentChannelId = _useState7[1];
-  var _useState8 = React.useState(false),
-    playAudio = _useState8[0],
-    setPlayAudio = _useState8[1];
-  var wavesurferContainer = React.useRef(null);
+  var _useState6 = React.useState(0),
+    currentTimeSeconds = _useState6[0],
+    setCurrentTimeSeconds = _useState6[1];
+  var _useState7 = React.useState(null),
+    sendingInterval = _useState7[0],
+    setSendingInterval = _useState7[1];
+  var _useState8 = React.useState(''),
+    currentChannelId = _useState8[0],
+    setCurrentChannelId = _useState8[1];
+  var _useState9 = React.useState(false),
+    playAudio = _useState9[0],
+    setPlayAudio = _useState9[1];
   var recordButtonRef = React.useRef(null);
-  var wavesurfer = React.useRef({});
+  var audioElements = React.useRef({});
   var intervalRef = React.useRef({});
   var currentRecordedFile = React.useMemo(function () {
     var current = getAudioRecordingFromMap(currentChannelId) || recordedFile;
@@ -45780,6 +44168,59 @@ var AudioRecord = function AudioRecord(_ref) {
       setSendingInterval(null);
     }
   };
+  var cleanupAudioElement = function cleanupAudioElement(id) {
+    if (intervalRef.current[id]) {
+      clearInterval(intervalRef.current[id]);
+      intervalRef.current[id] = null;
+    }
+    if (audioElements.current[id]) {
+      audioElements.current[id].pause();
+      audioElements.current[id].src = '';
+      delete audioElements.current[id];
+    }
+  };
+  var initAudioPlayback = function initAudioPlayback(draft, cId, audioRecording) {
+    if (draft) return;
+    var id = cId || currentChannelId;
+    var fileData = audioRecording || currentRecordedFile;
+    if (!(fileData !== null && fileData !== void 0 && fileData.objectUrl)) return;
+    if (audioElements.current[id]) {
+      setRecordingIsReadyToPlay(true);
+      var audioDuration = audioElements.current[id].duration;
+      if (audioDuration && isFinite(audioDuration)) {
+        setCurrentTime(audioDuration);
+      }
+      return;
+    }
+    var audio = new Audio();
+    audioElements.current[id] = audio;
+    audio.addEventListener('loadedmetadata', function () {
+      setRecordingIsReadyToPlay(true);
+      var audioDuration = audio.duration;
+      if (audioDuration && isFinite(audioDuration)) {
+        setCurrentTime(audioDuration);
+      }
+    });
+    audio.addEventListener('ended', function () {
+      setPlayAudio(false);
+      audio.currentTime = 0;
+      var audioDuration = audio.duration;
+      if (audioDuration && isFinite(audioDuration)) {
+        setCurrentTime(audioDuration);
+      }
+      setCurrentTimeSeconds(0);
+      clearInterval(intervalRef.current[id]);
+    });
+    audio.addEventListener('pause', function () {
+      setPlayAudio(false);
+      clearInterval(intervalRef.current[id]);
+    });
+    audio.addEventListener('error', function () {
+      var _audio$error;
+      log.error('Audio playback error:', (_audio$error = audio.error) === null || _audio$error === void 0 ? void 0 : _audio$error.message);
+    });
+    audio.src = fileData.objectUrl;
+  };
   var startRecording = function startRecording(cId) {
     try {
       var id = cId || currentChannelId;
@@ -45795,13 +44236,10 @@ var AudioRecord = function AudioRecord(_ref) {
           if (recording) {
             stopRecording(true, id, false, recorder);
           } else if (currentRecordedFile) {
-            var _wavesurfer$current;
             removeAudioRecordingFromMap(id);
             setRecordedFile(null);
             setPlayAudio(false);
-            if ((_wavesurfer$current = wavesurfer.current) !== null && _wavesurfer$current !== void 0 && _wavesurfer$current[id]) {
-              wavesurfer.current[id].destroy();
-            }
+            cleanupAudioElement(id);
             setStartRecording(false);
             setShowRecording(false);
             dispatch(setChannelDraftMessageIsRemovedAC(id));
@@ -45905,13 +44343,10 @@ var AudioRecord = function AudioRecord(_ref) {
   var cancelRecording = React.useCallback(function () {
     handleStopRecording();
     if (currentRecordedFile) {
-      var _wavesurfer$current2;
       dispatch(setChannelDraftMessageIsRemovedAC(currentChannelId));
       setRecordedFile(null);
       setPlayAudio(false);
-      if ((_wavesurfer$current2 = wavesurfer.current) !== null && _wavesurfer$current2 !== void 0 && _wavesurfer$current2[currentChannelId]) {
-        wavesurfer.current[currentChannelId].destroy();
-      }
+      cleanupAudioElement(currentChannelId);
     } else {
       shouldDraw = false;
       recorder === null || recorder === void 0 ? void 0 : recorder.stop();
@@ -45920,130 +44355,16 @@ var AudioRecord = function AudioRecord(_ref) {
     setRecordingIsReadyToPlay(false);
     setStartRecording(false);
     setCurrentTime(0);
+    setCurrentTimeSeconds(0);
     setShowRecording(false);
-  }, [currentRecordedFile, currentChannelId, wavesurfer, setShowRecording, setRecordedFile]);
-  var _initWaveSurfer = function initWaveSurfer(draft, cId, audioRecording, container) {
-    try {
-      var _exit = false;
-      return Promise.resolve(_catch(function () {
-        var _wavesurfer$current3;
-        function _temp3(_result3) {
-          var _wavesurfer$current$i, _wavesurfer$current$i2;
-          if (_exit) return _result3;
-          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();
-            setCurrentTime(audioDuration);
-          });
-          wavesurfer.current[id].on('finish', function () {
-            setPlayAudio(false);
-            wavesurfer.current[id].seekTo(0);
-            var audioDuration = wavesurfer.current[id].getDuration();
-            setCurrentTime(audioDuration);
-            clearInterval(intervalRef.current[id]);
-          });
-          wavesurfer.current[id].on('pause', function () {
-            setPlayAudio(false);
-            clearInterval(intervalRef.current[id]);
-          });
-          wavesurfer.current[id].on('interaction', function () {
-            var currentTime = wavesurfer.current[id].getCurrentTime();
-            setCurrentTime(currentTime);
-          });
-        }
-        if (draft) {
-          return;
-        }
-        var id = cId || currentChannelId;
-        if ((_wavesurfer$current3 = wavesurfer.current) !== null && _wavesurfer$current3 !== void 0 && _wavesurfer$current3[id]) {
-          setRecordingIsReadyToPlay(true);
-          var audioDuration = wavesurfer.current[id].getDuration();
-          setCurrentTime(audioDuration);
-        }
-        var _temp2 = function (_wavesurfer$current4) {
-          if (!((_wavesurfer$current4 = wavesurfer.current) !== null && _wavesurfer$current4 !== void 0 && _wavesurfer$current4[id])) {
-            var _ref2;
-            var containerElement = wavesurferContainer.current || container;
-            if (!containerElement) {
-              setTimeout(function () {
-                return _initWaveSurfer(draft, cId, audioRecording, container);
-              }, 100);
-              _exit = true;
-              return;
-            }
-            var rect = containerElement.getBoundingClientRect();
-            if (rect.width === 0 || rect.height === 0) {
-              setTimeout(function () {
-                return _initWaveSurfer(draft, cId, audioRecording, container);
-              }, 100);
-              _exit = true;
-              return;
-            }
-            var ws = WaveSurfer.create({
-              container: containerElement,
-              waveColor: textSecondary,
-              progressColor: accentColor,
-              barWidth: 1,
-              barHeight: 2,
-              audioRate: 1,
-              hideScrollbar: true,
-              barRadius: 1.5,
-              cursorWidth: 0,
-              barGap: 2.5,
-              height: 28
-            });
-            var peaks = [];
-            if ((_ref2 = audioRecording || currentRecordedFile) !== null && _ref2 !== void 0 && _ref2.thumb) {
-              var _ref3;
-              var thumbData = (_ref3 = audioRecording || currentRecordedFile) === null || _ref3 === void 0 ? void 0 : _ref3.thumb;
-              if (Array.isArray(thumbData) && thumbData.length > 0) {
-                var maxVal = thumbData.reduce(function (acc, n) {
-                  return n > acc ? n : acc;
-                }, -Infinity);
-                if (maxVal > 0 && isFinite(maxVal)) {
-                  var dec = maxVal / 100;
-                  peaks = thumbData.map(function (peak) {
-                    var normalizedPeak = peak / dec / 100;
-                    return isFinite(normalizedPeak) ? normalizedPeak : 0;
-                  }).filter(function (peak) {
-                    return isFinite(peak);
-                  });
-                  if (peaks.length === 0) {
-                    peaks = [];
-                  }
-                }
-              }
-            }
-            wavesurfer.current[id] = ws;
-            return _catch(function () {
-              var validPeaks = peaks.length > 0 ? peaks : undefined;
-              return Promise.resolve(wavesurfer.current[id].loadBlob((audioRecording === null || audioRecording === void 0 ? void 0 : audioRecording.file) || (currentRecordedFile === null || currentRecordedFile === void 0 ? void 0 : currentRecordedFile.file), validPeaks)).then(function () {});
-            }, function () {
-              return _catch(function () {
-                return Promise.resolve(wavesurfer.current[id].loadBlob((audioRecording === null || audioRecording === void 0 ? void 0 : audioRecording.file) || (currentRecordedFile === null || currentRecordedFile === void 0 ? void 0 : currentRecordedFile.file))).then(function () {});
-              }, function (fallbackError) {
-                console.error('Failed to load audio completely:', fallbackError);
-                throw fallbackError;
-              });
-            });
-          }
-        }();
-        return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
-      }, function (e) {
-        log.error('Failed to init wavesurfer', e);
-      }));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  var stopRecording = React.useCallback(function (send, cId, draft, recorder, container) {
+  }, [currentRecordedFile, currentChannelId, setShowRecording, setRecordedFile]);
+  var stopRecording = React.useCallback(function (send, cId, draft, recorder) {
     handleStopRecording();
     shouldDraw = false;
     var id = cId || channelId;
-    recorder === null || recorder === void 0 ? void 0 : recorder.stop().getMp3().then(function (_ref4) {
-      var buffer = _ref4[0],
-        blob = _ref4[1];
+    recorder === null || recorder === void 0 ? void 0 : recorder.stop().getMp3().then(function (_ref2) {
+      var buffer = _ref2[0],
+        blob = _ref2[1];
       var file = new File(buffer, 'record.mp3', {
         type: blob.type,
         lastModified: Date.now()
@@ -46099,7 +44420,7 @@ var AudioRecord = function AudioRecord(_ref) {
             };
             setAudioRecordingToMap(id, audioRecording);
             if (draft) {
-              _initWaveSurfer(draft, id, audioRecording, container);
+              initAudioPlayback(draft, id, audioRecording);
             }
           }
         }, function (e) {
@@ -46113,18 +44434,25 @@ var AudioRecord = function AudioRecord(_ref) {
     });
   }, [sendRecordedFile, setShowRecording, setAudioRecordingToMap, setRecordedFile, handleStopRecording, channelId]);
   var handlePlayPause = function handlePlayPause(cId) {
-    var _wavesurfer$current5;
-    if ((_wavesurfer$current5 = wavesurfer.current) !== null && _wavesurfer$current5 !== void 0 && _wavesurfer$current5[cId || currentChannelId]) {
-      if (!wavesurfer.current[cId || currentChannelId].isPlaying()) {
-        setPlayAudio(true);
-        intervalRef.current[cId || currentChannelId] = setInterval(function () {
-          var currentTime = wavesurfer.current[cId || currentChannelId].getCurrentTime();
-          if (currentTime >= 0) {
-            setCurrentTime(currentTime);
-          }
-        }, 10);
-      }
-      wavesurfer.current[cId || currentChannelId].playPause();
+    var id = cId || currentChannelId;
+    var audio = audioElements.current[id];
+    if (!audio) return;
+    if (audio.paused) {
+      setPlayAudio(true);
+      intervalRef.current[id] = setInterval(function () {
+        var _audioElements$curren;
+        var time = (_audioElements$curren = audioElements.current[id]) === null || _audioElements$curren === void 0 ? void 0 : _audioElements$curren.currentTime;
+        if (time !== undefined && time >= 0) {
+          setCurrentTime(time);
+          setCurrentTimeSeconds(time);
+        }
+      }, 10);
+      audio.play()["catch"](function (e) {
+        log.error('Audio play failed:', e);
+        setPlayAudio(false);
+      });
+    } else {
+      audio.pause();
     }
   };
   React.useEffect(function () {
@@ -46173,32 +44501,21 @@ var AudioRecord = function AudioRecord(_ref) {
   React.useEffect(function () {
     fieldsObject.recording = recording;
   }, [recording]);
-  React.useEffect(function () {
-    fieldsObject.wavesurferContainer = wavesurferContainer.current;
-  }, [wavesurferContainer.current]);
   React.useEffect(function () {
     return function () {
       var _fieldsObject$current;
       if (fieldsObject.channelId && (!fieldsObject.currentRecordedFile || !((_fieldsObject$current = fieldsObject.currentRecordedFile) !== null && _fieldsObject$current !== void 0 && _fieldsObject$current.file)) && fieldsObject.recorder && fieldsObject.recording) {
-        stopRecording(false, fieldsObject.channelId, true, fieldsObject.recorder, fieldsObject.wavesurferContainer);
+        stopRecording(false, fieldsObject.channelId, true, fieldsObject.recorder);
         handleStopRecording();
       }
     };
   }, []);
   React.useEffect(function () {
     if (currentRecordedFile) {
-      _initWaveSurfer();
+      initAudioPlayback();
     } else {
-      var _wavesurfer$current6;
       setRecordingIsReadyToPlay(false);
-      if (intervalRef.current[currentChannelId]) {
-        clearInterval(intervalRef.current[currentChannelId]);
-        intervalRef.current[currentChannelId] = null;
-      }
-      if ((_wavesurfer$current6 = wavesurfer.current) !== null && _wavesurfer$current6 !== void 0 && _wavesurfer$current6[currentChannelId]) {
-        wavesurfer.current[currentChannelId].destroy();
-        wavesurfer.current[currentChannelId] = null;
-      }
+      cleanupAudioElement(currentChannelId);
     }
     return function () {
       for (var key in intervalRef.current) {
@@ -46207,10 +44524,11 @@ var AudioRecord = function AudioRecord(_ref) {
           intervalRef.current[key] = null;
         }
       }
-      for (var _key in wavesurfer.current) {
-        if (wavesurfer.current[_key]) {
-          wavesurfer.current[_key].destroy();
-          wavesurfer.current[_key] = null;
+      for (var _key in audioElements.current) {
+        if (audioElements.current[_key]) {
+          audioElements.current[_key].pause();
+          audioElements.current[_key].src = '';
+          delete audioElements.current[_key];
         }
       }
     };
@@ -46236,16 +44554,18 @@ var AudioRecord = function AudioRecord(_ref) {
   React.useEffect(function () {
     if (!showRecording) {
       setCurrentTime(0);
+      setCurrentTimeSeconds(0);
     }
     return function () {
       handleStopRecording();
       setCurrentTime(0);
+      setCurrentTimeSeconds(0);
     };
   }, [showRecording]);
   React.useEffect(function () {
     if (channelId && (showRecording || currentRecordedFile)) {
       if (!currentRecordedFile) {
-        stopRecording(false, currentChannelId, true, recorder, wavesurferContainer.current);
+        stopRecording(false, currentChannelId, true, recorder);
       }
       if (playAudio) {
         handlePlayPause(channelId);
@@ -46254,10 +44574,11 @@ var AudioRecord = function AudioRecord(_ref) {
         clearInterval(intervalRef.current[key]);
         intervalRef.current[key] = null;
       }
-      for (var _key2 in wavesurfer.current) {
-        var _wavesurfer$current$_;
-        (_wavesurfer$current$_ = wavesurfer.current[_key2]) === null || _wavesurfer$current$_ === void 0 ? void 0 : _wavesurfer$current$_.destroy();
-        wavesurfer.current[_key2] = null;
+      for (var _key2 in audioElements.current) {
+        var _audioElements$curren2;
+        (_audioElements$curren2 = audioElements.current[_key2]) === null || _audioElements$curren2 === void 0 ? void 0 : _audioElements$curren2.pause();
+        audioElements.current[_key2].src = '';
+        delete audioElements.current[_key2];
       }
       setShowRecording(false);
       setStartRecording(false);
@@ -46267,9 +44588,11 @@ var AudioRecord = function AudioRecord(_ref) {
       setRecordingIsReadyToPlay(!!audioRecording);
     }
     setCurrentTime(0);
+    setCurrentTimeSeconds(0);
     handleStopRecording();
     setCurrentChannelId(channelId);
   }, [channelId]);
+  var recordedFileDuration = (currentRecordedFile === null || currentRecordedFile === void 0 ? void 0 : currentRecordedFile.dur) || 0;
   return /*#__PURE__*/React__default.createElement(Container$l, {
     recording: showRecording || currentRecordedFile
   }, (showRecording || currentRecordedFile) && (/*#__PURE__*/React__default.createElement(PlayPause$1, {
@@ -46300,17 +44623,24 @@ var AudioRecord = function AudioRecord(_ref) {
     hide: currentRecordedFile,
     id: "waveform-" + channelId,
     recording: recording
-  }), recording && /*#__PURE__*/React__default.createElement(Timer$2, {
+  }), recording && /*#__PURE__*/React__default.createElement(Timer$1, {
     color: textSecondary
   }, formatAudioVideoTime(currentTime)), (recordingIsReadyToPlay || currentRecordedFile) && (/*#__PURE__*/React__default.createElement(PlayPause$1, {
     iconColor: accentColor,
     onClick: function onClick() {
       return handlePlayPause(channelId);
     }
-  }, playAudio ? /*#__PURE__*/React__default.createElement(SvgPauseRecord, null) : /*#__PURE__*/React__default.createElement(SvgPlayRecord, null))), /*#__PURE__*/React__default.createElement(AudioVisualization$2, {
-    ref: wavesurferContainer,
-    show: currentRecordedFile
-  }), (recordingIsReadyToPlay || currentRecordedFile) && (/*#__PURE__*/React__default.createElement(Timer$2, {
+  }, playAudio ? /*#__PURE__*/React__default.createElement(SvgPauseRecord, null) : /*#__PURE__*/React__default.createElement(SvgPlayRecord, null))), (currentRecordedFile === null || currentRecordedFile === void 0 ? void 0 : currentRecordedFile.thumb) && Array.isArray(currentRecordedFile.thumb) && (/*#__PURE__*/React__default.createElement(RecordedVisualizationWrapper, null, /*#__PURE__*/React__default.createElement(AudioVisualizationComponent, {
+    tmb: currentRecordedFile.thumb,
+    duration: recordedFileDuration,
+    currentTime: currentTimeSeconds,
+    waveColor: textSecondary,
+    progressColor: accentColor,
+    height: 28,
+    barWidth: 1,
+    barRadius: 1.5,
+    containerWidth: 190
+  }))), (recordingIsReadyToPlay || currentRecordedFile) && (/*#__PURE__*/React__default.createElement(Timer$1, {
     color: textSecondary
   }, formatAudioVideoTime(currentTime)))), /*#__PURE__*/React__default.createElement(RecordIconWrapper, {
     ref: recordButtonRef,
@@ -46338,32 +44668,21 @@ var AudioWrapper = styled__default.div(_templateObject2$N || (_templateObject2$N
 var RecordIconWrapper = styled__default.span(_templateObject3$F || (_templateObject3$F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var AudioVisualization$2 = styled__default.div(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  visibility: ", ";\n  width: 300px;\n  height: 28px;\n  max-width: calc(100% - 100px);\n  left: 40px;\n  background-color: ", ";\n"])), function (_ref5) {
-  var show = _ref5.show;
-  return show ? '1' : '0';
-}, function (_ref6) {
-  var show = _ref6.show;
-  return !show && '-1';
-}, function (_ref7) {
-  var show = _ref7.show;
-  return show ? 'visible' : 'hidden';
-}, function (props) {
-  return props.color;
-});
+var RecordedVisualizationWrapper = styled__default.div(_templateObject4$A || (_templateObject4$A = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 40px;\n  width: 300px;\n  height: 28px;\n  max-width: calc(100% - 100px);\n  display: flex;\n  align-items: center;\n"])));
 var PlayPause$1 = styled__default.div(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n  padding: 10px 0 10px 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  > svg {\n    cursor: pointer;\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var Canvas = styled__default.canvas(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: ", ";\n  max-width: calc(100% - 110px);\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  left: 42px;\n"])), function (_ref8) {
-  var recording = _ref8.recording;
+var Canvas = styled__default.canvas(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: ", ";\n  max-width: calc(100% - 110px);\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  left: 42px;\n"])), function (_ref3) {
+  var recording = _ref3.recording;
   return recording ? '300px' : '0';
-}, function (_ref9) {
-  var hide = _ref9.hide;
+}, function (_ref4) {
+  var hide = _ref4.hide;
   return hide ? '0' : '1';
-}, function (_ref0) {
-  var hide = _ref0.hide;
+}, function (_ref5) {
+  var hide = _ref5.hide;
   return hide && '-1';
 });
-var Timer$2 = styled__default.div(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 12px;\n  color: ", ";\n  margin-left: auto;\n"])), function (props) {
+var Timer$1 = styled__default.div(_templateObject7$p || (_templateObject7$p = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 12px;\n  color: ", ";\n  margin-left: auto;\n"])), function (props) {
   return props.color;
 });
 
@@ -46418,7 +44737,7 @@ function SvgDotsVertica(props) {
   })));
 }
 
-var _templateObject$U, _templateObject2$P, _templateObject3$H, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$q, _templateObject8$m, _templateObject9$i;
+var _templateObject$U, _templateObject2$P, _templateObject3$H, _templateObject4$B, _templateObject5$w, _templateObject6$s, _templateObject7$q, _templateObject8$l, _templateObject9$i;
 var CreatePollPopup = function CreatePollPopup(_ref) {
   var togglePopup = _ref.togglePopup,
     onCreate = _ref.onCreate;
@@ -46431,7 +44750,8 @@ var CreatePollPopup = function CreatePollPopup(_ref) {
     iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
     borderColor = _useColor[THEME_COLORS.BORDER],
     accentColor = _useColor[THEME_COLORS.ACCENT],
-    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
+    surface2 = _useColor[THEME_COLORS.SURFACE_2];
   var _useState = React.useState(''),
     question = _useState[0],
     setQuestion = _useState[1];
@@ -46457,8 +44777,11 @@ var CreatePollPopup = function CreatePollPopup(_ref) {
     dragOverId = _useState6[0],
     setDragOverId = _useState6[1];
   var _useState7 = React.useState(false),
-    showDiscardConfirm = _useState7[0],
-    setShowDiscardConfirm = _useState7[1];
+    isScrolling = _useState7[0],
+    setIsScrolling = _useState7[1];
+  var _useState8 = React.useState(false),
+    showDiscardConfirm = _useState8[0],
+    setShowDiscardConfirm = _useState8[1];
   var optionsListRef = React.useRef(null);
   var optionInputRefs = React.useRef({});
   var questionTextAreaRef = React.useRef(null);
@@ -46671,7 +44994,15 @@ var CreatePollPopup = function CreatePollPopup(_ref) {
     color: textSecondary
   }, "Options"), /*#__PURE__*/React__default.createElement(OptionsList$1, {
     ref: optionsListRef,
-    onDragOver: handleAutoScroll
+    onDragOver: handleAutoScroll,
+    className: isScrolling ? 'show-scrollbar' : '',
+    onMouseEnter: function onMouseEnter() {
+      return setIsScrolling(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsScrolling(false);
+    },
+    thumbColor: surface2
   }, options.map(function (opt) {
     return /*#__PURE__*/React__default.createElement(OptionRow, {
       key: opt.id,
@@ -46811,7 +45142,9 @@ var CustomTextArea = styled__default.textarea(_templateObject2$P || (_templateOb
 var TextCounter = styled__default.span(_templateObject3$H || (_templateObject3$H = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 20px;\n  margin-left: auto;\n"])), function (props) {
   return props.color;
 });
-var OptionsList$1 = styled__default.div(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  max-height: 200px;\n  overflow-y: auto;\n  margin-top: 8px;\n  padding-right: 6px;\n"])));
+var OptionsList$1 = styled__default.div(_templateObject4$B || (_templateObject4$B = _taggedTemplateLiteralLoose(["\n  max-height: 200px;\n  overflow-y: auto;\n  margin-top: 8px;\n  padding-right: 6px;\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+  return props.thumbColor;
+});
 var OptionRow = styled__default.div(_templateObject5$w || (_templateObject5$w = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n  cursor: grab;\n  border: ", ";\n  border-radius: 6px;\n  padding: 4px;\n  opacity: ", ";\n"])), function (props) {
   return props.isDragOver ? '1px dashed #A0A1B0' : '1px solid transparent';
 }, function (props) {
@@ -46833,12 +45166,12 @@ var AddOptionButton = styled__default.button(_templateObject7$q || (_templateObj
 }, function (props) {
   return props.disabled ? 0.5 : 1;
 });
-var Settings = styled__default.div(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 8px;\n"])));
+var Settings = styled__default.div(_templateObject8$l || (_templateObject8$l = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 8px;\n"])));
 var SettingItem = styled__default.div(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
-var _templateObject$V, _templateObject2$Q, _templateObject3$I, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$r, _templateObject8$n, _templateObject9$j, _templateObject0$h, _templateObject1$d, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1, _templateObject35$1, _templateObject36$1, _templateObject37$1, _templateObject38$1, _templateObject39$1, _templateObject40$1, _templateObject41$1, _templateObject42$1, _templateObject43, _templateObject44, _templateObject45, _templateObject46;
+var _templateObject$V, _templateObject2$Q, _templateObject3$I, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$r, _templateObject8$m, _templateObject9$j, _templateObject0$h, _templateObject1$d, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1, _templateObject35$1, _templateObject36$1, _templateObject37$1, _templateObject38$1, _templateObject39$1, _templateObject40$1, _templateObject41$1, _templateObject42$1, _templateObject43, _templateObject44, _templateObject45, _templateObject46;
 function AutoFocusPlugin(_ref) {
   var messageForReply = _ref.messageForReply;
   var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
@@ -48886,7 +47219,7 @@ var WarningIconWrapper = styled__default.div(_templateObject6$t || (_templateObj
 var WarningText = styled__default.span(_templateObject7$r || (_templateObject7$r = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 18px;\n"])), function (props) {
   return props.color;
 });
-var CloseEditMode = styled__default.span(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  line-height: 22px;\n  cursor: pointer;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var CloseEditMode = styled__default.span(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 12px;\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  line-height: 22px;\n  cursor: pointer;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
 var UserName$1 = styled__default.span(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  margin-left: 4px;\n"])));
@@ -49034,41 +47367,6 @@ var LinkPreviewDescription = styled__default.div(_templateObject45 || (_template
 });
 var LinkPreviewCloseButton = styled__default.button(_templateObject46 || (_templateObject46 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 25px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n"])));
 
-var copyToClipboard = function copyToClipboard(text) {
-  try {
-    var _temp2 = function _temp2(_result2) {
-      if (_exit) return _result2;
-      try {
-        if (typeof document !== 'undefined') {
-          var textarea = document.createElement('textarea');
-          textarea.value = text;
-          textarea.style.position = 'fixed';
-          textarea.style.left = '-9999px';
-          document.body.appendChild(textarea);
-          textarea.focus();
-          textarea.select();
-          var successful = document.execCommand('copy');
-          document.body.removeChild(textarea);
-          return successful;
-        }
-      } catch (e) {}
-      return false;
-    };
-    var _exit = false;
-    var _temp = _catch(function () {
-      if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
-        return Promise.resolve(navigator.clipboard.writeText(text)).then(function () {
-          _exit = true;
-          return true;
-        });
-      }
-    }, function () {});
-    return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-
 var _path$1s;
 function _extends$1w() {
   return _extends$1w = Object.assign ? Object.assign.bind() : function (n) {
@@ -49386,7 +47684,7 @@ var StyledPopupName = styled__default(PopupName)(_templateObject$W || (_template
 var StyledPopupDescription = styled__default(PopupDescription)(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  font-weight: 400;\n  font-style: normal;\n  font-size: 15px;\n  line-height: 150%;\n  letter-spacing: 0%;\n  margin-top: 0;\n  margin-bottom: 0;\n  width: 437px;\n  height: 68px;\n  opacity: 1;\n  display: block;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n"])));
 var CloseButton$1 = styled__default(Button)(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n  width: 73px;\n  height: 36px;\n  min-width: 73px;\n  max-width: 73px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 
-var _templateObject$X, _templateObject2$S, _templateObject3$K, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$s, _templateObject8$o;
+var _templateObject$X, _templateObject2$S, _templateObject3$K, _templateObject4$D, _templateObject5$y, _templateObject6$u, _templateObject7$s, _templateObject8$n;
 var TIMER_OPTIONS = [{
   key: 'off',
   label: 'Off'
@@ -49637,9 +47935,9 @@ var CustomDropdownOptionLi = styled__default(DropdownOptionLi)(_templateObject6$
 var CustomDropdownOptionsUl = styled__default(DropdownOptionsUl)(_templateObject7$s || (_templateObject7$s = _taggedTemplateLiteralLoose(["\n  border-color: ", ";\n  height: 268px;\n  max-height: 268px;\n  border-radius: 0;\n\n  ", " {\n    padding-left: 24px;\n    padding-right: 24px;\n  }\n"])), function (props) {
   return props.accentColor;
 }, CustomDropdownOptionLi);
-var SetButton = styled__default(Button)(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n  width: 57px;\n  height: 36px;\n  min-width: 57px;\n  max-width: 57px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var SetButton = styled__default(Button)(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n  width: 57px;\n  height: 36px;\n  min-width: 57px;\n  max-width: 57px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 
-var _templateObject$Y, _templateObject2$T, _templateObject3$L, _templateObject4$E, _templateObject5$z, _templateObject6$v, _templateObject7$t, _templateObject8$p;
+var _templateObject$Y, _templateObject2$T, _templateObject3$L, _templateObject4$E, _templateObject5$z, _templateObject6$v, _templateObject7$t, _templateObject8$o;
 var formatMemberCount = function formatMemberCount(count, channelType) {
   if (channelType === DEFAULT_CHANNEL_TYPE.BROADCAST || channelType === DEFAULT_CHANNEL_TYPE.PUBLIC) {
     return count + " " + (count > 1 ? 'subscribers' : 'subscriber');
@@ -49813,9 +48111,9 @@ var LoadingText$1 = styled__default.div(_templateObject6$v || (_templateObject6$
 var EmptyText = styled__default.div(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 40px 20px;\n  font-size: 14px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var ChevronRightIconWrapper = styled__default.span(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
+var ChevronRightIconWrapper = styled__default.span(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
 
-var _templateObject$Z, _templateObject2$U, _templateObject3$M, _templateObject4$F, _templateObject5$A, _templateObject6$w, _templateObject7$u, _templateObject8$q, _templateObject9$k, _templateObject0$i, _templateObject1$e, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3;
+var _templateObject$Z, _templateObject2$U, _templateObject3$M, _templateObject4$F, _templateObject5$A, _templateObject6$w, _templateObject7$u, _templateObject8$p, _templateObject9$k, _templateObject0$i, _templateObject1$e, _templateObject10$9, _templateObject11$7, _templateObject12$6, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3, _templateObject19$3, _templateObject20$3;
 var Actions = function Actions(_ref) {
   var _getDisappearingSetti;
   var setActionsHeight = _ref.setActionsHeight,
@@ -50346,7 +48644,7 @@ var ActionsMenu = styled__default.ul(_templateObject4$F || (_templateObject4$F =
 var DefaultMutedIcon = styled__default(SvgUnmuteNotifications)(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose([""])));
 var DefaultMuteIcon = styled__default(SvgNotifications)(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose([""])));
 var DefaultStarIcon = styled__default(SvgStar)(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose([""])));
-var DefaultUnpinIcon = styled__default(SvgUnpin)(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose([""])));
+var DefaultUnpinIcon = styled__default(SvgUnpin)(_templateObject8$p || (_templateObject8$p = _taggedTemplateLiteralLoose([""])));
 var DefaultPinIcon = styled__default(SvgPin)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsRead = styled__default(SvgMarkAsRead)(_templateObject0$i || (_templateObject0$i = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsUnRead = styled__default(SvgMarkAsUnRead)(_templateObject1$e || (_templateObject1$e = _taggedTemplateLiteralLoose([""])));
@@ -50520,7 +48818,7 @@ function SvgDownloadFile(props) {
   })));
 }
 
-var _templateObject$10, _templateObject2$W, _templateObject3$N, _templateObject4$G, _templateObject5$B, _templateObject6$x, _templateObject7$v, _templateObject8$r;
+var _templateObject$10, _templateObject2$W, _templateObject3$N, _templateObject4$G, _templateObject5$B, _templateObject6$x, _templateObject7$v, _templateObject8$q;
 var Files = function Files(_ref) {
   var channelId = _ref.channelId,
     filePreviewIcon = _ref.filePreviewIcon,
@@ -50667,7 +48965,7 @@ var FileThumb = styled__default.img(_templateObject6$x || (_templateObject6$x =
 var FileItem = styled__default.div(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 11px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  transition: all 0.2s;\n  div {\n    margin-left: 7px;\n    width: calc(100% - 48px);\n  }\n  &:hover {\n    background-color: ", ";\n    ", " {\n      visibility: visible;\n    }\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n  /*&.isHover {\n\n  }*/\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, DownloadWrapper, FileIconCont, FileHoverIconCont);
-var FileSizeAndDate = styled__default.span(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: normal;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), function (props) {
+var FileSizeAndDate = styled__default.span(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: normal;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), function (props) {
   return props.fontSize || '13px';
 }, function (props) {
   return props.lineHeight || '16px';
@@ -50811,7 +49109,7 @@ function SvgVoicePreviewPause(props) {
   })));
 }
 
-var _templateObject$13, _templateObject2$Y, _templateObject3$P, _templateObject4$I, _templateObject5$D, _templateObject6$y, _templateObject7$w, _templateObject8$s;
+var _templateObject$13, _templateObject2$Y, _templateObject3$P, _templateObject4$I, _templateObject5$D, _templateObject6$y, _templateObject7$w, _templateObject8$r;
 var VoiceItem = function VoiceItem(_ref) {
   var file = _ref.file,
     voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
@@ -50924,7 +49222,7 @@ var VoiceItem = function VoiceItem(_ref) {
     color: voicePreviewDateAndTimeColor || textSecondary
   }, formatChannelDetailsDate(file.createdAt)), /*#__PURE__*/React__default.createElement(AudioSendTime, {
     color: textSecondary
-  }, currentTime || (file.metadata.dur ? formatAudioVideoTime(file.metadata.dur) : ''))), /*#__PURE__*/React__default.createElement(Audio, {
+  }, currentTime || (file.metadata.dur ? formatAudioVideoTime(file.metadata.dur) : ''))), /*#__PURE__*/React__default.createElement(Audio$1, {
     controls: true,
     ref: audioRef,
     src: fileUrl,
@@ -50960,7 +49258,7 @@ var AudioDate = styled__default.span(_templateObject6$y || (_templateObject6$y =
 var AudioSendTime = styled__default.span(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0;\n  top: 11px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n"])), function (props) {
   return props.color;
 });
-var Audio = styled__default.audio(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+var Audio$1 = styled__default.audio(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
 var _templateObject$14;
 var Voices = function Voices(_ref) {
@@ -51201,7 +49499,7 @@ function ResetLinkConfirmModal(_ref) {
   });
 }
 
-var _templateObject$16, _templateObject2$_, _templateObject3$R, _templateObject4$J, _templateObject5$E, _templateObject6$z, _templateObject7$x, _templateObject8$t, _templateObject9$l, _templateObject0$j, _templateObject1$f, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$6;
+var _templateObject$16, _templateObject2$_, _templateObject3$R, _templateObject4$J, _templateObject5$E, _templateObject6$z, _templateObject7$x, _templateObject8$s, _templateObject9$l, _templateObject0$j, _templateObject1$f, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$6;
 function InviteLinkModal(_ref) {
   var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
   var onClose = _ref.onClose,
@@ -51710,7 +50008,7 @@ var LinkField = styled__default.div(_templateObject6$z || (_templateObject6$z =
 var LinkInput = styled__default.input(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  border: none;\n  outline: none;\n  height: 40px;\n  background: transparent;\n  color: ", ";\n  font-size: 14px;\n"])), function (p) {
   return p.color;
 });
-var CopyButton = styled__default.button(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n"])));
+var CopyButton = styled__default.button(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n"])));
 var CopyButtonWrapper = styled__default.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var SectionTitle = styled__default.h4(_templateObject0$j || (_templateObject0$j = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 8px;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
@@ -51731,7 +50029,7 @@ var QrHint = styled__default.p(_templateObject13$6 || (_templateObject13$6 = _ta
   return p.color;
 });
 
-var _templateObject$17, _templateObject2$$, _templateObject3$S, _templateObject4$K, _templateObject5$F, _templateObject6$A, _templateObject7$y, _templateObject8$u, _templateObject9$m;
+var _templateObject$17, _templateObject2$$, _templateObject3$S, _templateObject4$K, _templateObject5$F, _templateObject6$A, _templateObject7$y, _templateObject8$t, _templateObject9$m;
 var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
@@ -52050,7 +50348,7 @@ var EditMemberIcon = styled__default.span(_templateObject6$A || (_templateObject
   return props.color;
 });
 var MembersList = styled__default.ul(_templateObject7$y || (_templateObject7$y = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
-var MemberItem$1 = styled__default.li(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  font-weight: 500;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  color: ", ";\n  cursor: pointer;\n\n  & > svg {\n    rect {\n      fill: transparent;\n    }\n  }\n\n  &:first-child {\n    cursor: pointer;\n\n    > svg {\n      color: ", ";\n      margin-right: 12px;\n      & > rect {\n        fill: ", " !important;\n      }\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  & .dropdown-wrapper {\n    margin-left: auto;\n  }\n\n  & ", " {\n    width: 12px;\n    height: 12px;\n    right: -1px;\n    bottom: -1px;\n  }\n"])), function (props) {
+var MemberItem$1 = styled__default.li(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  font-weight: 500;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  color: ", ";\n  cursor: pointer;\n\n  & > svg {\n    rect {\n      fill: transparent;\n    }\n  }\n\n  &:first-child {\n    cursor: pointer;\n\n    > svg {\n      color: ", ";\n      margin-right: 12px;\n      & > rect {\n        fill: ", " !important;\n      }\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  & .dropdown-wrapper {\n    margin-left: auto;\n  }\n\n  & ", " {\n    width: 12px;\n    height: 12px;\n    right: -1px;\n    bottom: -1px;\n  }\n"])), function (props) {
   return props.fontSize || '15px';
 }, function (props) {
   return props.color;
@@ -52497,7 +50795,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$1a, _templateObject2$12, _templateObject3$U, _templateObject4$M, _templateObject5$G, _templateObject6$B, _templateObject7$z, _templateObject8$v, _templateObject9$n, _templateObject0$k, _templateObject1$g, _templateObject10$b, _templateObject11$9;
+var _templateObject$1a, _templateObject2$12, _templateObject3$U, _templateObject4$M, _templateObject5$G, _templateObject6$B, _templateObject7$z, _templateObject8$u, _templateObject9$n, _templateObject0$k, _templateObject1$g, _templateObject10$b, _templateObject11$9;
 var Details = function Details(_ref) {
   var _activeChannel$member;
   var detailsTitleText = _ref.detailsTitleText,
@@ -52978,7 +51276,7 @@ var ChannelInfo$5 = styled__default.div(_templateObject7$z || (_templateObject7$
 }, function (props) {
   return props.direction && props.direction === 'column' && 'center';
 });
-var DetailsHeader = styled__default.div(_templateObject8$v || (_templateObject8$v = _taggedTemplateLiteralLoose(["\n  border-bottom: 6px solid ", ";\n  align-items: center;\n  box-sizing: border-box;\n  padding: 20px 16px;\n"])), function (props) {
+var DetailsHeader = styled__default.div(_templateObject8$u || (_templateObject8$u = _taggedTemplateLiteralLoose(["\n  border-bottom: 6px solid ", ";\n  align-items: center;\n  box-sizing: border-box;\n  padding: 20px 16px;\n"])), function (props) {
   return props.borderColor;
 });
 var ChannelAvatarAndName = styled__default.div(_templateObject9$n || (_templateObject9$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: ", ";\n"])), function (props) {