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

package/index.js

@@ -10960,7 +10960,7 @@ var CustomInput = styled__default.input(_templateObject10 || (_templateObject10
 }, function (props) {
   return props.color;
 }, function (props) {
-  return props.error ? "1px solid " + props.errorColor : colors.primary;
+  return props.error ? "1px solid " + props.errorColor : 'transparent';
 }, function (props) {
   return props.error ? "1px solid " + colors.errorBlur : props.theme !== THEME.DARK ? "2px solid " + props.borderColor : 'none';
 }, colors.gray0, function (props) {
@@ -19160,7 +19160,7 @@ var Channel = function Channel(_ref) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     surface2 = _useColor[THEME_COLORS.SURFACE_2],
     errorColor = _useColor[THEME_COLORS.WARNING],
@@ -19237,7 +19237,7 @@ var Channel = function Channel(_ref) {
     theme: theme,
     selectedChannel: channel.id === activeChannel.id,
     selectedChannelLeftBorder: selectedChannelLeftBorder,
-    selectedBackgroundColor: selectedChannelBackground || focusBackground,
+    selectedBackgroundColor: selectedChannelBackground || hoverBackground,
     selectedChannelPaddings: selectedChannelPaddings,
     channelsPaddings: channelsPaddings,
     selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -19798,7 +19798,8 @@ var UsersPopup = function UsersPopup(_ref) {
     sectionBackground = _useColor[THEME_COLORS.SECTION_BACKGROUND],
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = reactRedux.useDispatch();
   var ChatClient = getClient();
   var selfUser = ChatClient.user;
@@ -20043,7 +20044,7 @@ var UsersPopup = function UsersPopup(_ref) {
     var memberDisplayName = selfUser.id === user.id ? 'Me' : makeUsername(contactsMap[user.id], user, selfUser.id !== user.id && getFromContacts);
     return /*#__PURE__*/React__default.createElement(ListRow, {
       isAdd: actionType !== 'createChat',
-      hoverBackground: colors.hoverBackgroundColor,
+      hoverBackground: hoverBackground,
       key: user.id,
       onClick: function onClick() {
         return actionType === 'createChat' && handleAddMember(user);
@@ -20818,7 +20819,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
     uploadPhotoIcon = _ref.uploadPhotoIcon;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY];
   var _useState = React.useState(false),
     showAddMemberPopup = _useState[0],
@@ -20843,14 +20844,14 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
     theme: theme,
     zIndex: '300',
     trigger: /*#__PURE__*/React__default.createElement(CreateDropdownButton, {
-      hoverBackground: focusBackground,
+      hoverBackground: hoverBackground,
       leftAuto: !showSearch,
       iconColor: accentColor
     }, createChannelIcon || /*#__PURE__*/React__default.createElement(SvgAddChat, null))
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('broadcast');
     },
@@ -20858,7 +20859,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
   }, newChannelIcon || /*#__PURE__*/React__default.createElement(SvgCreateChannel, null), "New channel"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('group');
     },
@@ -20866,7 +20867,7 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
   }, newGroupIcon || /*#__PURE__*/React__default.createElement(SvgCreateGroup, null), "New group"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 3,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleOpenCreateChannel('direct');
     },
@@ -21940,7 +21941,8 @@ function ChatHeader(_ref) {
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    borderColor = _useColor[THEME_COLORS.BORDER];
+    borderColor = _useColor[THEME_COLORS.BORDER],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = reactRedux.useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
@@ -21982,12 +21984,12 @@ function ChatHeader(_ref) {
     onClick: handleBackToChannels
   }, MobileBackButton || (/*#__PURE__*/React__default.createElement(MobileBackButtonWrapper, {
     onClick: handleBackToChannels,
-    hoverBackground: colors.primaryLight
+    hoverBackground: hoverBackground
   }, /*#__PURE__*/React__default.createElement(WrapArrowLeftIcon, {
     color: iconPrimary
   })))), activeChannel.isLinkedChannel && (/*#__PURE__*/React__default.createElement(BackButtonWrapper, {
     onClick: handleSwitchChannel,
-    hoverBackground: colors.primaryLight,
+    hoverBackground: hoverBackground,
     order: backButtonOrder
   }, /*#__PURE__*/React__default.createElement(WrapArrowLeftIcon, {
     color: iconPrimary
@@ -24905,6 +24907,1805 @@ 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.options = options;
+    }
+    /** Called after this.wavesurfer is available */
+    onInit() {
+        return;
+    }
+    /** Do not call directly, only called by WavesSurfer internally */
+    _init(wavesurfer) {
+        this.wavesurfer = wavesurfer;
+        this.onInit();
+    }
+    /** Destroy the plugin and unsubscribe from all events */
+    destroy() {
+        this.emit('destroy');
+        this.subscriptions.forEach((unsubscribe) => unsubscribe());
+    }
+}
+
+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') {
+            for (const [key, value] of Object.entries(content)) {
+                if (typeof value === 'string') {
+                    element.appendChild(document.createTextNode(value));
+                }
+                else {
+                    element.appendChild(renderNode(key, value));
+                }
+            }
+        }
+        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 src = this.getSrc();
+        if (url && src === url)
+            return;
+        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 (src) {
+            this.media.src = '';
+        }
+        try {
+            this.media.src = newSrc;
+        }
+        catch (e) {
+            this.media.src = url;
+        }
+    }
+    destroy() {
+        if (this.isExternalMedia)
+            return;
+        this.media.pause();
+        this.media.remove();
+        this.revokeSrc();
+        this.media.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* () {
+            return this.media.play();
+        });
+    }
+    /** 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 = {};
+        // Nothing to render
+        if (singleCanvasWidth === 0)
+            return;
+        // 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;
+            }
+        }
+        // Draw a single canvas
+        const draw = (index) => {
+            if (index < 0 || index >= numCanvases)
+                return;
+            if (drawnIndexes[index])
+                return;
+            drawnIndexes[index] = true;
+            const offset = index * singleCanvasWidth;
+            const clampedWidth = Math.min(totalWidth - offset, singleCanvasWidth);
+            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 = `translateX(-${Math.round(percents) === 100 ? this.options.cursorWidth : 0}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) => {
+                        blob ? resolve(blob) : 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;
+        wasPlaying && this._pause();
+        this.playedDuration = value / this._playbackRate;
+        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;
+    }
+}
+
+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) {
+        plugin._init(this);
+        this.plugins.push(plugin);
+        // Unregister plugin on destroy
+        this.subscriptions.push(plugin.once('destroy', () => {
+            this.plugins = this.plugins.filter((p) => p !== plugin);
+        }));
+        return plugin;
+    }
+    /** 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$t, _templateObject2$p, _templateObject3$j, _templateObject4$g, _templateObject5$e, _templateObject6$c;
 var AudioPlayer = function AudioPlayer(_ref) {
   var url = _ref.url,
@@ -25020,73 +26821,69 @@ var AudioPlayer = function AudioPlayer(_ref) {
       }
       var initWaveSurfer = function initWaveSurfer() {
         try {
-          var _temp = _catch(function () {
-            return Promise.resolve(new Promise(function (resolve) { resolve(_interopNamespace(require('wavesurfer.js'))); })).then(function (WaveSurfer) {
-              wavesurfer.current = WaveSurfer["default"].create({
-                container: wavesurferContainer.current,
-                waveColor: textSecondary,
-                skipLength: 0,
-                progressColor: accentColor,
-                audioRate: audioRate,
-                barWidth: 1,
-                barHeight: 1,
-                hideScrollbar: true,
-                barRadius: 1.5,
-                cursorWidth: 0,
-                barGap: 2,
-                barMinHeight: 2,
-                height: 20
-              });
-              var peaks;
-              if (file.metadata) {
-                if (file.metadata.dur) {
-                  setCurrentTime(formatAudioVideoTime(file.metadata.dur));
-                }
-                if (file.metadata.tmb) {
-                  var maxVal = Math.max.apply(Math, file.metadata.tmb);
-                  var dec = maxVal / 100;
-                  peaks = file.metadata.tmb.map(function (peak) {
-                    return peak / dec / 100;
-                  });
-                }
+          try {
+            wavesurfer.current = WaveSurfer.create({
+              container: wavesurferContainer.current,
+              waveColor: textSecondary,
+              progressColor: accentColor,
+              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) {
+                setCurrentTime(formatAudioVideoTime(file.metadata.dur));
               }
-              wavesurfer.current.load(url, peaks);
-              wavesurfer.current.on('ready', function () {
-                var audioDuration = wavesurfer.current.getDuration();
-                setCurrentTime(formatAudioVideoTime(audioDuration));
-                wavesurfer.current.drawBuffer = function (d) {
-                  log.info('filters --- ', d);
-                };
-              });
-              wavesurfer.current.on('finish', function () {
-                setPlayAudio(false);
-                wavesurfer.current.seekTo(0);
-                var audioDuration = wavesurfer.current.getDuration();
-                setCurrentTime(formatAudioVideoTime(audioDuration));
-                if (playingAudioId === file.id) {
-                  dispatch(setPlayingAudioIdAC(null));
-                }
-                clearInterval(intervalRef.current);
-              });
-              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));
-              });
-              if (url !== '_') {
-                setIsRendered(true);
+              if (file.metadata.tmb) {
+                var maxVal = Math.max.apply(Math, file.metadata.tmb);
+                var dec = maxVal / 100;
+                peaks = file.metadata.tmb.map(function (peak) {
+                  return peak / dec / 100;
+                });
+              }
+            }
+            wavesurfer.current.load(url, peaks);
+            wavesurfer.current.on('ready', function () {
+              var audioDuration = wavesurfer.current.getDuration();
+              setCurrentTime(formatAudioVideoTime(audioDuration));
+              wavesurfer.current.drawBuffer = function (d) {
+                log.info('filters --- ', d);
+              };
+            });
+            wavesurfer.current.on('finish', function () {
+              setPlayAudio(false);
+              wavesurfer.current.seekTo(0);
+              var audioDuration = wavesurfer.current.getDuration();
+              setCurrentTime(formatAudioVideoTime(audioDuration));
+              if (playingAudioId === file.id) {
+                dispatch(setPlayingAudioIdAC(null));
+              }
+              clearInterval(intervalRef.current);
+            });
+            wavesurfer.current.on('pause', function () {
+              setPlayAudio(false);
+              if (playingAudioId === file.id) {
+                dispatch(setPlayingAudioIdAC(null));
               }
+              clearInterval(intervalRef.current);
             });
-          }, function (e) {
+            wavesurfer.current.on('interaction', function () {
+              var currentTime = wavesurfer.current.getCurrentTime();
+              setCurrentTime(formatAudioVideoTime(currentTime));
+            });
+            if (url !== '_') {
+              setIsRendered(true);
+            }
+          } catch (e) {
             log.error('Failed to init wavesurfer', e);
-          });
-          return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+          }
+          return Promise.resolve();
         } catch (e) {
           return Promise.reject(e);
         }
@@ -25111,7 +26908,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
   }), /*#__PURE__*/React__default.createElement(AudioRate, {
     color: textSecondary,
     onClick: handleSetAudioRate
-  }, audioRate, /*#__PURE__*/React__default.createElement("span", null, "X"))), /*#__PURE__*/React__default.createElement(Timer, {
+  }, audioRate, /*#__PURE__*/React__default.createElement("span", null, "X"))), /*#__PURE__*/React__default.createElement(Timer$1, {
     color: textSecondary
   }, currentTime));
 };
@@ -25124,7 +26921,7 @@ var AudioRate = styled__default.div(_templateObject4$g || (_templateObject4$g =
   return props.color;
 });
 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$c || (_templateObject6$c = _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 Timer$1 = styled__default.div(_templateObject6$c || (_templateObject6$c = _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;
 });
 
@@ -30999,7 +32796,6 @@ function SvgRecordButton(props) {
 
 var _templateObject$G, _templateObject2$B, _templateObject3$u, _templateObject4$q, _templateObject5$m, _templateObject6$i, _templateObject7$g;
 var shouldDraw = false;
-var WaveSurfer;
 var AudioRecord = function AudioRecord(_ref) {
   var startRecording = function startRecording() {
     try {
@@ -31241,60 +33037,48 @@ var AudioRecord = function AudioRecord(_ref) {
     if (recordedFile) {
       var initWaveSurfer = function initWaveSurfer() {
         try {
-          var _temp3 = _catch(function () {
-            function _temp2() {
-              if (wavesurfer.current) {
-                wavesurfer.current.destroy();
-              }
-              wavesurfer.current = WaveSurfer["default"].create({
-                container: wavesurferContainer.current,
-                waveColor: textSecondary,
-                skipLength: 0,
-                progressColor: accentColor,
-                barWidth: 1,
-                barHeight: 2,
-                audioRate: 1,
-                hideScrollbar: true,
-                barRadius: 1.5,
-                cursorWidth: 0,
-                barGap: 2.5,
-                barMinHeight: 1.5,
-                height: 28
-              });
-              wavesurfer.current.load(recordedFile.objectUrl);
-              wavesurfer.current.on('ready', function () {
-                setRecordingIsReadyToPlay(true);
-                var audioDuration = wavesurfer.current.getDuration();
-                setCurrentTime(audioDuration);
-              });
-              wavesurfer.current.on('finish', function () {
-                setPlayAudio(false);
-                wavesurfer.current.seekTo(0);
-                var audioDuration = wavesurfer.current.getDuration();
-                setCurrentTime(audioDuration);
-                clearInterval(intervalRef.current);
-              });
-              wavesurfer.current.on('pause', function () {
-                setPlayAudio(false);
-                clearInterval(intervalRef.current);
-              });
-              wavesurfer.current.on('interaction', function () {
-                var currentTime = wavesurfer.current.getCurrentTime();
-                setCurrentTime(currentTime);
-              });
+          try {
+            if (wavesurfer.current) {
+              wavesurfer.current.destroy();
             }
-            var _temp = function () {
-              if (!WaveSurfer) {
-                return Promise.resolve(new Promise(function (resolve) { resolve(_interopNamespace(require('wavesurfer.js'))); })).then(function (_import) {
-                  WaveSurfer = _import;
-                });
-              }
-            }();
-            return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
-          }, function (e) {
+            wavesurfer.current = WaveSurfer.create({
+              container: wavesurferContainer.current,
+              waveColor: textSecondary,
+              progressColor: accentColor,
+              barWidth: 1,
+              barHeight: 2,
+              audioRate: 1,
+              hideScrollbar: true,
+              barRadius: 1.5,
+              cursorWidth: 0,
+              barGap: 2.5,
+              height: 28
+            });
+            wavesurfer.current.load(recordedFile.objectUrl);
+            wavesurfer.current.on('ready', function () {
+              setRecordingIsReadyToPlay(true);
+              var audioDuration = wavesurfer.current.getDuration();
+              setCurrentTime(audioDuration);
+            });
+            wavesurfer.current.on('finish', function () {
+              setPlayAudio(false);
+              wavesurfer.current.seekTo(0);
+              var audioDuration = wavesurfer.current.getDuration();
+              setCurrentTime(audioDuration);
+              clearInterval(intervalRef.current);
+            });
+            wavesurfer.current.on('pause', function () {
+              setPlayAudio(false);
+              clearInterval(intervalRef.current);
+            });
+            wavesurfer.current.on('interaction', function () {
+              var currentTime = wavesurfer.current.getCurrentTime();
+              setCurrentTime(currentTime);
+            });
+          } catch (e) {
             log.error('Failed to init wavesurfer', e);
-          });
-          return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+          }
+          return Promise.resolve();
         } catch (e) {
           return Promise.reject(e);
         }
@@ -31312,9 +33096,9 @@ var AudioRecord = function AudioRecord(_ref) {
   React.useEffect(function () {
     (function () {
       try {
-        var _temp5 = function () {
+        var _temp2 = function () {
           if (!recorder) {
-            var _temp4 = _catch(function () {
+            var _temp = _catch(function () {
               return Promise.resolve(new Promise(function (resolve) { resolve(_interopNamespace(require('mic-recorder-to-mp3'))); })).then(function (MicRecorderModule) {
                 var MicRecorder = MicRecorderModule["default"];
                 var recorder = new MicRecorder({
@@ -31325,10 +33109,10 @@ var AudioRecord = function AudioRecord(_ref) {
             }, function (e) {
               log.error('Failed to init mic-recorder-to-mp3', e);
             });
-            if (_temp4 && _temp4.then) return _temp4.then(function () {});
+            if (_temp && _temp.then) return _temp.then(function () {});
           }
         }();
-        return _temp5 && _temp5.then ? _temp5.then(function () {}) : void 0;
+        return _temp2 && _temp2.then ? _temp2.then(function () {}) : void 0;
       } catch (e) {
         Promise.reject(e);
       }
@@ -31352,7 +33136,7 @@ var AudioRecord = function AudioRecord(_ref) {
     hide: recordedFile,
     id: 'waveform',
     recording: recording
-  }), recording && /*#__PURE__*/React__default.createElement(Timer$1, {
+  }), recording && /*#__PURE__*/React__default.createElement(Timer$2, {
     color: textSecondary
   }, formatAudioVideoTime(currentTime)), recordingIsReadyToPlay && (/*#__PURE__*/React__default.createElement(PlayPause$1, {
     iconColor: accentColor,
@@ -31360,7 +33144,7 @@ var AudioRecord = function AudioRecord(_ref) {
   }, playAudio ? /*#__PURE__*/React__default.createElement(SvgPauseRecord, null) : /*#__PURE__*/React__default.createElement(SvgPlayRecord, null))), /*#__PURE__*/React__default.createElement(AudioVisualization$1, {
     ref: wavesurferContainer,
     show: recordedFile
-  }), recordingIsReadyToPlay && /*#__PURE__*/React__default.createElement(Timer$1, {
+  }), recordingIsReadyToPlay && /*#__PURE__*/React__default.createElement(Timer$2, {
     color: textSecondary
   }, formatAudioVideoTime(currentTime))), /*#__PURE__*/React__default.createElement(RecordIconWrapper, {
     ref: recordButtonRef,
@@ -31408,7 +33192,7 @@ var Canvas = styled__default.canvas(_templateObject6$i || (_templateObject6$i =
   var hide = _ref8.hide;
   return hide && '-1';
 });
-var Timer$1 = styled__default.div(_templateObject7$g || (_templateObject7$g = _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$2 = styled__default.div(_templateObject7$g || (_templateObject7$g = _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;
 });
 
@@ -31547,12 +33331,12 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     sectionBackground = _useColor[THEME_COLORS.SECTION_BACKGROUND],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
-    errorColor = _useColor[THEME_COLORS.WARNING];
+    errorColor = _useColor[THEME_COLORS.WARNING],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = reactRedux.useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
@@ -32648,13 +34432,13 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     color: errorColor
   }, uploadErrorMessage), selectedMessagesMap && selectedMessagesMap.size > 0 ? (/*#__PURE__*/React__default.createElement(SelectedMessagesWrapper, null, selectedMessagesMap.size, " ", selectedMessagesMap.size > 1 ? ' messages selected' : ' message selected', /*#__PURE__*/React__default.createElement(CustomButton, {
     onClick: handleToggleForwardMessagePopup,
-    backgroundColor: colors.primaryLight,
+    backgroundColor: hoverBackground,
     marginLeft: '32px',
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement(SvgForward, null), "Forward"), /*#__PURE__*/React__default.createElement(CustomButton, {
     onClick: handleToggleDeleteMessagePopup,
     color: errorColor,
-    backgroundColor: colors.primaryLight,
+    backgroundColor: hoverBackground,
     marginLeft: '16px'
   }, /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null), "Delete"), /*#__PURE__*/React__default.createElement(CloseIconWrapper, {
     onClick: handleCloseSelectMessages
@@ -32790,7 +34574,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, showChooseMediaAttachment && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return onOpenFileUploader(mediaExtensions);
     },
@@ -32799,7 +34583,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, /*#__PURE__*/React__default.createElement(SvgChoseMedia, null), chooseMediaAttachmentText != null ? chooseMediaAttachmentText : 'Photo or video')), showChooseFileAttachment && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
     textColor: textPrimary,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return onOpenFileUploader('');
     },
@@ -33314,7 +35098,7 @@ var Actions = function Actions(_ref) {
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     borderThemeColor = _useColor[THEME_COLORS.BORDER],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
     errorColor = _useColor[THEME_COLORS.WARNING];
@@ -33484,7 +35268,7 @@ var Actions = function Actions(_ref) {
     return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       textColor: textPrimary,
       key: value + index,
-      hoverBackground: colors.primaryLight,
+      hoverBackground: hoverBackground,
       onClick: function onClick() {
         return handleNotificationOnOff(value * oneHour);
       }
@@ -33492,28 +35276,28 @@ var Actions = function Actions(_ref) {
   }) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 1,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(oneHour);
     }
   }, "Mute for 1 hour"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 2,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(twoHours);
     }
   }, "Mute for 2 hours"), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 3,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff(oneDay);
     }
   }, "Mute for 1 day"))), /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     textColor: textPrimary,
     key: 4,
-    hoverBackground: focusBackground,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return handleNotificationOnOff();
     }
@@ -33801,7 +35585,8 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
-    errorColor = _useColor[THEME_COLORS.WARNING];
+    errorColor = _useColor[THEME_COLORS.WARNING],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var dispatch = reactRedux.useDispatch();
   var _useState = React.useState(false),
     isChanged = _useState[0],
@@ -33860,7 +35645,7 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     theme: theme
   }, !!roles.length && roles.map(function (role) {
     return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
-      hoverBackground: colors.primaryLight,
+      hoverBackground: hoverBackground,
       key: role.name,
       onClick: function onClick() {
         return onChangeFunction(role.name);
@@ -33913,7 +35698,7 @@ var Members = function Members(_ref) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    focusBackground = _useColor[THEME_COLORS.FOCUS_BACKGROUND],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     errorColor = _useColor[THEME_COLORS.WARNING];
   var dispatch = reactRedux.useDispatch();
@@ -34060,14 +35845,14 @@ var Members = function Members(_ref) {
     key: 1,
     onClick: handleAddMemberPopup,
     color: textPrimary,
-    hoverBackground: hoverBackgroundColor || focusBackground,
+    hoverBackground: hoverBackgroundColor || hoverBackground,
     addMemberIconColor: accentColor,
     fontSize: addMemberFontSize
   }, addMemberIcon || /*#__PURE__*/React__default.createElement(SvgAddMember, null), "Add " + displayMemberText)), !!members.length && members.map(function (member, index) {
     return /*#__PURE__*/React__default.createElement(MemberItem$1, {
       key: member.id + index,
       color: textPrimary,
-      hoverBackground: hoverBackgroundColor || focusBackground,
+      hoverBackground: hoverBackgroundColor || hoverBackground,
       onClick: function onClick() {
         return handleCreateChat(member);
       },
@@ -34102,7 +35887,7 @@ var Members = function Members(_ref) {
         setCloseMenu('1');
       },
       key: 1,
-      hoverBackground: focusBackground
+      hoverBackground: hoverBackground
     }, "Change role")), showMakeMemberAdmin && checkActionPermission('changeMemberRole') && member.role !== 'owner' && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       onClick: function onClick(e) {
         setSelectedMember(member);
@@ -34111,7 +35896,7 @@ var Members = function Members(_ref) {
       },
       textColor: member.role === 'admin' ? errorColor : '',
       key: 2,
-      hoverBackground: focusBackground
+      hoverBackground: hoverBackground
     }, member.role === 'admin' ? 'Revoke Admin' : 'Make Admin')), showKickMember && checkActionPermission('kickMember') && member.role !== 'owner' && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       onClick: function onClick(e) {
         setSelectedMember(member);
@@ -34120,11 +35905,11 @@ var Members = function Members(_ref) {
       },
       textColor: errorColor,
       key: 3,
-      hoverBackground: focusBackground
+      hoverBackground: hoverBackground
     }, "Remove")), showKickAndBlockMember && checkActionPermission('kickAndBlockMember') && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       textColor: errorColor,
       key: 4,
-      hoverBackground: focusBackground,
+      hoverBackground: hoverBackground,
       onClick: function onClick(e) {
         setSelectedMember(member);
         toggleBlockMemberPopup(e);
@@ -34885,7 +36670,8 @@ var DetailsTab = function DetailsTab(_ref) {
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    borderThemeColor = _useColor[THEME_COLORS.BORDER];
+    borderThemeColor = _useColor[THEME_COLORS.BORDER],
+    backgroundColor = _useColor[THEME_COLORS.BACKGROUND];
   var dispatch = reactRedux.useDispatch();
   var isDirectChannel = channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
   var showMembers = !isDirectChannel && checkActionPermission('getMembers');
@@ -34912,7 +36698,8 @@ var DetailsTab = function DetailsTab(_ref) {
     borderColor: borderColor || borderThemeColor,
     fontSize: tabItemsFontSize,
     lineHeight: tabItemsLineHeight,
-    minWidth: tabItemsMinWidth
+    minWidth: tabItemsMinWidth,
+    backgroundColor: backgroundColor
   }, Object.keys(channelDetailsTabs).map(function (key) {
     if (key === 'member') {
       if (showMembers) {
@@ -34984,8 +36771,10 @@ var DetailsTab = function DetailsTab(_ref) {
   })));
 };
 var Container$r = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  //border-top: 1px solid ", ";\n"])), colors.gray1);
-var DetailsTabHeader = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  overflow-y: hidden;\n  padding: 0 20px;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 12;\n  /* width */\n  &::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: transparent;\n  }\n  button {\n    position: relative;\n    border: none;\n    background: transparent;\n    outline: none;\n    height: 44px;\n    text-transform: capitalize;\n    font-style: normal;\n    font-weight: 500;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    min-width: ", ";\n    cursor: pointer;\n  }\n\n  & span {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  & .active span {\n    color: ", ";\n\n    &:after {\n      content: '';\n      width: 100%;\n      border-radius: 2px;\n      height: 2px;\n      background-color: ", ";\n      position: absolute;\n      top: calc(100% - 1px);\n      left: 0;\n    }\n  }\n"])), function (props) {
+var DetailsTabHeader = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  overflow-y: hidden;\n  padding: 0 20px;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n  display: flex;\n  justify-content: space-between;\n  position: sticky;\n  top: 0;\n  z-index: 12;\n  /* width */\n  &::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: transparent;\n  }\n  button {\n    position: relative;\n    border: none;\n    background: transparent;\n    outline: none;\n    height: 44px;\n    text-transform: capitalize;\n    font-style: normal;\n    font-weight: 500;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    min-width: ", ";\n    cursor: pointer;\n  }\n\n  & span {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    height: 100%;\n  }\n\n  & .active span {\n    color: ", ";\n\n    &:after {\n      content: '';\n      width: 100%;\n      border-radius: 2px;\n      height: 2px;\n      background-color: ", ";\n      position: absolute;\n      top: calc(100% - 1px);\n      left: 0;\n    }\n  }\n"])), function (props) {
   return props.borderColor;
+}, function (props) {
+  return props.backgroundColor || 'transparent';
 }, function (props) {
   return props.fontSize || '15px';
 }, function (props) {
@@ -35025,7 +36814,8 @@ var EditChannel = function EditChannel(_ref) {
     borderColor = _useColor[THEME_COLORS.BORDER],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
-    errorColor = _useColor[THEME_COLORS.WARNING];
+    errorColor = _useColor[THEME_COLORS.WARNING],
+    hoverBackground = _useColor[THEME_COLORS.HOVER_BACKGROUND];
   var ChatClient = getClient();
   var user = ChatClient.user;
   var dispatch = reactRedux.useDispatch();
@@ -35170,7 +36960,7 @@ var EditChannel = function EditChannel(_ref) {
   }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 1,
     textColor: textPrimary,
-    hoverBackground: colors.primaryLight,
+    hoverBackground: hoverBackground,
     onClick: function onClick() {
       return onOpenFileUploader();
     },
@@ -35182,7 +36972,7 @@ var EditChannel = function EditChannel(_ref) {
     type: 'file'
   })), newAvatar.url && (/*#__PURE__*/React__default.createElement(DropdownOptionLi, {
     key: 2,
-    hoverBackground: colors.primaryLight,
+    hoverBackground: hoverBackground,
     textColor: errorColor,
     onClick: handleToggleDeleteAvatarPopup,
     iconWidth: '20px'