@sendbird/uikit-react 3.10.1 → 3.10.2-alpha.0

package/chunks/bundle-cBbT3DlY.js

@@ -0,0 +1,148 @@
+import React__default, { useState, useMemo, useRef, useEffect } from 'react';
+import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
+import { SendingStatus } from '@sendbird/chat/message';
+import ImageRenderer, { getBorderRadiusForMultipleImageRenderer } from '../ui/ImageRenderer.js';
+import { q as getClassName, x as isGif } from './bundle-N9hMnIRl.js';
+import { F as FileViewer } from './bundle-wMP1pqZM.js';
+import { K } from './bundle-aKXnhi3A.js';
+import { _ as __assign } from './bundle-BA7tv0JB.js';
+
+function ImageGrid(_a) {
+    var _b;
+    var children = _a.children, className = _a.className, message = _a.message, isReactionEnabled = _a.isReactionEnabled;
+    return (React__default.createElement("div", { className: 'sendbird-image-grid-wrap' },
+        React__default.createElement("div", { className: getClassName([
+                className,
+                'sendbird-image-grid',
+                (isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
+            ]) }, children)));
+}
+
+var GRID_WIDTH_CHAT_WEB = 400;
+var GRID_SIDE_PADDING = 8;
+var GRID_GAP = 4;
+var TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 54;
+var PROFILE_IMAGE_WIDTH = 40;
+var CHAT_MOBILE_SIDE_PADDING = 48;
+var THREAD_PARENT_WIDTH = 320;
+var THREAD_PARENT_SIDE_PADDING = 28;
+var THREAD_PARENT_GRID_MARGIN_LEFT = 12;
+var THREAD_CHILD_WIDTH = 200;
+var THREAD_CHILD_SIDE_PADDING = 8;
+var THREAD_CHILD_MOBILE_SIDE_PADDING = 32;
+var THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 60;
+var MULTIPLE_FILES_IMAGE_SIDE_LENGTH = {
+    CHAT_WEB: "calc(".concat(GRID_WIDTH_CHAT_WEB / 2, "px - ").concat((GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    CHAT_MOBILE: "calc(50vw - ".concat((CHAT_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    THREAD_PARENT_WEB: "calc(".concat((THREAD_PARENT_WIDTH - (THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP)) / 2, "px)"),
+    THREAD_PARENT_MOBILE: "calc(50vw - ".concat((THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_WEB: "calc(".concat((THREAD_CHILD_WIDTH - THREAD_CHILD_SIDE_PADDING - GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_MOBILE: "calc(50vw - ".concat((THREAD_CHILD_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+};
+var MULTIPLE_FILES_IMAGE_BORDER_RADIUS = {
+    CHAT_WEB: '6px',
+    CHAT_MOBILE: '6px',
+    THREAD_PARENT_WEB: '6px',
+    THREAD_PARENT_MOBILE: '6px',
+    THREAD_CHILD_WEB: '6px',
+    THREAD_CHILD_MOBILE: '6px',
+};
+var MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH = '34px';
+
+var ThreadMessageKind = {
+    PARENT: 'parent',
+    CHILD: 'child',
+};
+function MultipleFilesMessageItemBody(_a) {
+    var className = _a.className, message = _a.message, _b = _a.isReactionEnabled, isReactionEnabled = _b === void 0 ? false : _b, threadMessageKindKey = _a.threadMessageKindKey, _c = _a.statefulFileInfoList, statefulFileInfoList = _c === void 0 ? [] : _c;
+    var _d = useState(-1), currentFileViewerIndex = _d[0], setCurrentFileViewerIndex = _d[1];
+    function onClose() {
+        setCurrentFileViewerIndex(-1);
+    }
+    function onClickLeft() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === 0 ? statefulFileInfoList.length - 1 : currentFileViewerIndex - 1);
+    }
+    function onClickRight() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === statefulFileInfoList.length - 1 ? 0 : currentFileViewerIndex + 1);
+    }
+    return (threadMessageKindKey && (React__default.createElement(React__default.Fragment, null,
+        currentFileViewerIndex > -1 && (React__default.createElement(FileViewer, { message: message, statefulFileInfoList: statefulFileInfoList, currentIndex: currentFileViewerIndex, onClickLeft: onClickLeft, onClickRight: onClickRight, onClose: onClose })),
+        React__default.createElement(ImageGrid, { className: className, message: message, isReactionEnabled: isReactionEnabled }, statefulFileInfoList.map(function (fileInfo, index) {
+            var _a, _b, _c;
+            return (React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer-wrapper", onClick: message.sendingStatus === SendingStatus.SUCCEEDED ? function () { return setCurrentFileViewerIndex(index); } : undefined, key: "sendbird-multiple-files-image-renderer-".concat(index, "-").concat(fileInfo.url) },
+                React__default.createElement(ImageRenderer, { url: (_c = (_b = (_a = fileInfo.thumbnails) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : fileInfo.url, fixedSize: false, width: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], maxSideLength: MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB, height: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], borderRadius: getBorderRadiusForMultipleImageRenderer(MULTIPLE_FILES_IMAGE_BORDER_RADIUS[threadMessageKindKey], index, statefulFileInfoList.length), shadeOnHover: true, isUploaded: !!fileInfo.isUploaded, placeHolder: function (_a) {
+                        var style = _a.style;
+                        if (isGif(fileInfo.mimeType))
+                            return React__default.createElement(ImagePlaceholder.GIF, { style: style });
+                        return React__default.createElement(ImagePlaceholder.Default, { style: style });
+                    }, defaultComponent: React__default.createElement(ImagePlaceholder.LoadError, null) })));
+        })))));
+}
+var ImagePlaceholder = {
+    Default: function (_a) {
+        var style = _a.style;
+        return (React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
+            React__default.createElement(Icon, { type: IconTypes.PHOTO, fillColor: IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH })));
+    },
+    GIF: function (_a) {
+        var style = _a.style;
+        return (React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style },
+            React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder__icon" },
+                React__default.createElement(Icon, { type: IconTypes.GIF, fillColor: IconColors.THUMBNAIL_ICON, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))));
+    },
+    LoadError: function () { return (React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder" },
+        React__default.createElement(Icon, { type: IconTypes.THUMBNAIL_NONE, fillColor: IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))); },
+};
+
+function useThreadMessageKindKeySelector(_a) {
+    var threadMessageKind = _a.threadMessageKind, isMobile = _a.isMobile;
+    var threadMessageKindKey = useMemo(function () {
+        return K(threadMessageKind)
+            .with(ThreadMessageKind.PARENT, function () { return (isMobile
+            ? 'THREAD_PARENT_MOBILE'
+            : 'THREAD_PARENT_WEB'); })
+            .with(ThreadMessageKind.CHILD, function () { return (isMobile
+            ? 'THREAD_CHILD_MOBILE'
+            : 'THREAD_CHILD_WEB'); })
+            .otherwise(function () { return (isMobile
+            ? 'CHAT_MOBILE'
+            : 'CHAT_WEB'); });
+    }, [isMobile, threadMessageKind]);
+    return threadMessageKindKey;
+}
+
+// SendingStatus.SCHEDULED is currently not covered in UIKit
+//  So we can ignore for now, but for future, it is better to explicitly use PENDING, FAILED, or CANCELED.
+var useFileInfoListWithUploaded = function (message) {
+    var blobHandler = useRef(new Map());
+    var getObjectURL = function (index, blob) {
+        if (!blobHandler.current.has(index) && blob)
+            blobHandler.current.set(index, URL.createObjectURL(blob));
+        return blobHandler.current.get(index);
+    };
+    var revokeURLs = function () {
+        if (blobHandler.current.size > 0) {
+            blobHandler.current.forEach(function (url) { return URL.revokeObjectURL(url); });
+            blobHandler.current.clear();
+        }
+    };
+    useEffect(function () {
+        return function () { return revokeURLs(); };
+    }, []);
+    if (!message || !message.isMultipleFilesMessage || !message.isMultipleFilesMessage()) {
+        return [];
+    }
+    else if (message.sendingStatus === SendingStatus.SUCCEEDED) {
+        revokeURLs();
+        return message.fileInfoList.map(function (it) { return (__assign(__assign({}, it), { url: it.url, isUploaded: true })); });
+    }
+    else {
+        return message.messageParams.fileInfoList.map(function (it, index) {
+            var _a, _b;
+            return (__assign(__assign({}, it), { url: (_b = (_a = getObjectURL(index)) !== null && _a !== void 0 ? _a : it.fileUrl) !== null && _b !== void 0 ? _b : (it.file instanceof Blob ? getObjectURL(index, it.file) : undefined), isUploaded: !it.file && typeof it.fileUrl === 'string' && it.fileUrl.length > 0 }));
+        });
+    }
+};
+
+export { MultipleFilesMessageItemBody as M, ThreadMessageKind as T, useFileInfoListWithUploaded as a, useThreadMessageKindKeySelector as u };
+//# sourceMappingURL=bundle-cBbT3DlY.js.map

package/chunks/bundle-cBbT3DlY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-cBbT3DlY.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/{bundle-d6R6m9-9.js → bundle-ctAjRHDW.js}

@@ -1,9 +1,9 @@
 import React__default, { useState } from 'react';
 import ContextMenu, { MenuItems, MenuItem } from '../ui/ContextMenu.js';
-import { j as isUserMessage, k as isSentMessage, l as isFailedMessage, m as isPendingMessage, d as isFileMessage, i as isVoiceMessage, L as isThreadMessage, o as copyToClipboard, p as getEmojiListAll } from './bundle-uk2Y0AQu.js';
-import { u as useLocalization } from './bundle-y_LgB6DS.js';
+import { e as isUserMessage, l as isSentMessage, o as isFailedMessage, p as isPendingMessage, c as isFileMessage, i as isVoiceMessage, K as isThreadMessage, r as copyToClipboard, s as getEmojiListAll } from './bundle-N9hMnIRl.js';
+import { u as useLocalization } from './bundle-BBjosDA0.js';
 import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-dWJnfDPH.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-I8JFwttJ.js';
 import BottomSheet from '../ui/BottomSheet.js';
 import ImageRenderer from '../ui/ImageRenderer.js';
 import ReactionButton from '../ui/ReactionButton.js';
@@ -145,14 +145,20 @@ var MobileBottomSheet = function (props) {
                                     hideMenu();
                                     toggleReaction(message, emoji.key, isReacted);
                                 }, dataSbId: "ui_mobile_emoji_reactions_menu_".concat(emoji.key) },
-                                React__default.createElement(ImageRenderer, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
-                                        React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
+                                React__default.createElement(ImageRenderer, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (_a) {
+                                        var style = _a.style;
+                                        return (React__default.createElement("div", { style: style },
+                                            React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                                    } })));
                         }),
                         canShowMoreEmojis && !showEmojisOnly && (React__default.createElement(ReactionButton, { key: "emoji_more", width: "38px", height: "38px", onClick: function () {
                                 setShowEmojisOnly(true);
                             }, dataSbId: "ui_mobile_emoji_reactions_menu_emojiadd" },
-                            React__default.createElement(ImageRenderer, { url: '', width: "28px", height: "28px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
-                                    React__default.createElement(Icon, { type: IconTypes.EMOJI_MORE, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } }))))))),
+                            React__default.createElement(ImageRenderer, { url: '', width: "28px", height: "28px", placeHolder: function (_a) {
+                                    var style = _a.style;
+                                    return (React__default.createElement("div", { style: style },
+                                        React__default.createElement(Icon, { type: IconTypes.EMOJI_MORE, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                                } }))))))),
             !showEmojisOnly && (React__default.createElement("div", { className: 'sendbird-message__bottomsheet--actions' },
                 showMenuItemCopy && (React__default.createElement("div", { className: 'sendbird-message__bottomsheet--action', onClick: function () {
                         hideMenu();
@@ -219,4 +225,4 @@ var MobileMenu = function (props) {
 };
 
 export { MobileMenu as M };
-//# sourceMappingURL=bundle-d6R6m9-9.js.map
+//# sourceMappingURL=bundle-ctAjRHDW.js.map

package/{cjs/chunks/bundle-s82XYT1Q.js.map → chunks/bundle-ctAjRHDW.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-s82XYT1Q.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"bundle-ctAjRHDW.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/{bundle-VPanFdbf.js → bundle-cvTUkQV_.js}

@@ -1,13 +1,13 @@
-import { a as __spreadArray } from './bundle-GKopZh-T.js';
+import { a as __spreadArray } from './bundle-BA7tv0JB.js';
 import React__default, { useContext } from 'react';
 import { createPortal } from 'react-dom';
-import { n as noop } from './bundle-WpHDilD_.js';
-import { L as LocalizationContext } from './bundle-y_LgB6DS.js';
-import { u as useMediaQueryContext } from './bundle-KmauOTrg.js';
+import { n as noop } from './bundle-cA_r9HRx.js';
+import { L as LocalizationContext } from './bundle-BBjosDA0.js';
+import { u as useMediaQueryContext } from './bundle-r9j_eCHc.js';
 import IconButton from '../ui/IconButton.js';
 import Button, { ButtonTypes } from '../ui/Button.js';
 import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-dWJnfDPH.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-I8JFwttJ.js';
 
 // simple component to be used as modal root
 var MODAL_ROOT = 'sendbird-modal-root';
@@ -62,4 +62,4 @@ function Modal(props) {
 }
 
 export { Modal as M, MODAL_ROOT as a, ModalRoot as b, ModalFooter as c, ModalHeader as d, ModalBody as e };
-//# sourceMappingURL=bundle-VPanFdbf.js.map
+//# sourceMappingURL=bundle-cvTUkQV_.js.map

package/chunks/bundle-cvTUkQV_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-cvTUkQV_.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/{bundle-xsV7pD8p.js → bundle-d5KevIXI.js}

@@ -1,6 +1,4 @@
-import { a as __spreadArray } from './bundle-GKopZh-T.js';
-import { f as format } from './bundle-WDOQg3ty.js';
-import { a as isReadMessage } from './bundle-uk2Y0AQu.js';
+import { a as __spreadArray } from './bundle-BA7tv0JB.js';
 import { SendingStatus } from '@sendbird/chat/message';
 
 var scrollToRenderedMessage = function (scrollRef, initialTimeStamp, setIsScrolled) {
@@ -99,28 +97,6 @@ var mergeAndSortMessages = function (oldMessages, newMessages) {
     var unique = getUniqueListByMessageId(mergedMessages);
     return sortByCreatedAt(unique);
 };
-var getMessageCreatedAt = function (message) { return format(message.createdAt, 'p'); };
-var isSameGroup = function (message, comparingMessage, currentChannel) {
-    var _a, _b;
-    if (!(message
-        && comparingMessage
-        && message.messageType
-        && message.messageType !== 'admin'
-        && comparingMessage.messageType
-        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.messageType) !== 'admin'
-        && 'sender' in message
-        && 'sender' in comparingMessage
-        && message.createdAt
-        && comparingMessage.createdAt
-        && message.sender.userId
-        && comparingMessage.sender.userId)) {
-        return false;
-    }
-    return ((message === null || message === void 0 ? void 0 : message.sendingStatus) === (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sendingStatus)
-        && ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sender) === null || _b === void 0 ? void 0 : _b.userId)
-        && getMessageCreatedAt(message) === getMessageCreatedAt(comparingMessage)
-        && isReadMessage(currentChannel, message) === isReadMessage(currentChannel, comparingMessage));
-};
 var passUnsuccessfullMessages = function (allMessages, newMessage) {
     if ('sendingStatus' in newMessage
         && (newMessage.sendingStatus === SendingStatus.SUCCEEDED || newMessage.sendingStatus === SendingStatus.PENDING)) {
@@ -143,5 +119,5 @@ var isAboutSame = function (a, b, px) {
     return Math.abs(a - b) <= px;
 };
 
-export { scrollToRenderedMessage as a, isDisabledBecauseMuted as b, isOperator as c, isSameGroup as d, isAboutSame as e, getNicknamesMapFromMembers as f, getAllEmojisMapFromEmojiContainer as g, isDisabledBecauseFrozen as i, mergeAndSortMessages as m, passUnsuccessfullMessages as p, scrollIntoLast as s };
-//# sourceMappingURL=bundle-xsV7pD8p.js.map
+export { scrollToRenderedMessage as a, isDisabledBecauseFrozen as b, isDisabledBecauseMuted as c, getNicknamesMapFromMembers as d, getAllEmojisMapFromEmojiContainer as g, isAboutSame as i, mergeAndSortMessages as m, passUnsuccessfullMessages as p, scrollIntoLast as s };
+//# sourceMappingURL=bundle-d5KevIXI.js.map

package/chunks/bundle-d5KevIXI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-d5KevIXI.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/bundle-dOD0mfTw.js

@@ -0,0 +1,120 @@
+import React__default, { useState } from 'react';
+import { C as ChannelPreview } from './bundle-Wzk9dnsn.js';
+import { C as ChannelPreviewAction } from './bundle-qAc60kip.js';
+import { u as useChannelListContext, L as LEAVE_CHANNEL_SUCCESS, S as SET_CURRENT_CHANNEL } from './bundle-otzUyFE_.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import { G as GroupChannelListHeader } from './bundle-x_yt1Yd5.js';
+import EditUserProfile from '../EditUserProfile.js';
+import PlaceHolder, { PlaceHolderTypes } from '../ui/PlaceHolder.js';
+import { u as useOnScrollPositionChangeDetector } from './bundle-GJ-4hPvC.js';
+import { A as AddChannel } from './bundle-OAJaPWYb.js';
+
+var GroupChannelListUIView = function (_a) {
+    var renderHeader = _a.renderHeader, renderPlaceHolderError = _a.renderPlaceHolderError, renderPlaceHolderLoading = _a.renderPlaceHolderLoading, renderPlaceHolderEmptyList = _a.renderPlaceHolderEmptyList, onChangeTheme = _a.onChangeTheme, onUserProfileUpdated = _a.onUserProfileUpdated, allowProfileEdit = _a.allowProfileEdit, channels = _a.channels, onLoadMore = _a.onLoadMore, initialized = _a.initialized, renderChannel = _a.renderChannel, renderAddChannel = _a.renderAddChannel;
+    var _b = useState(false), showProfileEdit = _b[0], setShowProfileEdit = _b[1];
+    var stores = useSendbirdStateContext().stores;
+    var renderer = {
+        addChannel: renderAddChannel,
+        channel: renderChannel,
+        placeholder: {
+            loading: function () {
+                if (initialized)
+                    return null;
+                if (renderPlaceHolderLoading)
+                    return renderPlaceHolderLoading();
+                return React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.LOADING });
+            },
+            empty: function () {
+                if (!initialized)
+                    return null;
+                if (renderPlaceHolderEmptyList)
+                    return renderPlaceHolderEmptyList();
+                return React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.NO_CHANNELS });
+            },
+            error: function () {
+                if (!initialized || !stores.sdkStore.error)
+                    return null;
+                if (renderPlaceHolderError)
+                    return renderPlaceHolderError();
+                return React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.WRONG });
+            },
+        },
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "sendbird-channel-list__header" }, (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || (React__default.createElement(GroupChannelListHeader, { onEdit: function () { return allowProfileEdit && setShowProfileEdit(true); }, allowProfileEdit: allowProfileEdit, renderIconButton: function () { return renderer.addChannel(); } }))),
+        showProfileEdit && (React__default.createElement(EditUserProfile, { onThemeChange: onChangeTheme, onCancel: function () { return setShowProfileEdit(false); }, onEditProfile: function (user) {
+                setShowProfileEdit(false);
+                onUserProfileUpdated(user);
+            } })),
+        React__default.createElement(ChannelListComponent, { data: channels, renderItem: renderer.channel, onLoadMore: onLoadMore, placeholderLoading: renderer.placeholder.loading(), placeholderEmpty: renderer.placeholder.empty(), placeholderError: renderer.placeholder.error() })));
+};
+/**
+ * To do: Implement windowing
+ * Implement windowing if you are dealing with large number of messages/channels
+ * https://github.com/bvaughn/react-window -> recommendation
+ * We hesitate to bring one more dependency to our library,
+ * we are planning to implement it inside the library
+ * */
+var ChannelListComponent = function (props) {
+    var data = props.data, renderItem = props.renderItem, onLoadMore = props.onLoadMore, placeholderLoading = props.placeholderLoading, placeholderError = props.placeholderError, placeholderEmpty = props.placeholderEmpty;
+    var onScroll = useOnScrollPositionChangeDetector({
+        onReachedBottom: function () { return onLoadMore(); },
+    });
+    return (React__default.createElement("div", { className: 'sendbird-channel-list__body', onScroll: onScroll },
+        placeholderError,
+        React__default.createElement("div", null, data.map(function (item, index) { return renderItem({ item: item, index: index }); })),
+        placeholderLoading,
+        data.length === 0 && placeholderEmpty));
+};
+
+var ChannelListUI = function (props) {
+    var renderHeader = props.renderHeader, renderChannelPreview = props.renderChannelPreview, renderPlaceHolderError = props.renderPlaceHolderError, renderPlaceHolderLoading = props.renderPlaceHolderLoading, renderPlaceHolderEmptyList = props.renderPlaceHolderEmptyList;
+    var _a = useChannelListContext(), onThemeChange = _a.onThemeChange, allowProfileEdit = _a.allowProfileEdit, allChannels = _a.allChannels, currentChannel = _a.currentChannel, channelListDispatcher = _a.channelListDispatcher, typingChannels = _a.typingChannels, initialized = _a.initialized, fetchChannelList = _a.fetchChannelList, onProfileEditSuccess = _a.onProfileEditSuccess;
+    var _b = useSendbirdStateContext(), stores = _b.stores, config = _b.config;
+    var logger = config.logger, _c = config.isOnline, isOnline = _c === void 0 ? false : _c;
+    var sdk = stores.sdkStore.sdk;
+    var renderListItem = function (props) {
+        var channel = props.item, index = props.index;
+        var onLeaveChannel = function (channel, cb) {
+            logger.info('ChannelList: Leaving channel', channel);
+            channel
+                .leave()
+                .then(function (res) {
+                logger.info('ChannelList: Leaving channel success', res);
+                if (cb && typeof cb === 'function')
+                    cb(channel, null);
+                channelListDispatcher({
+                    type: LEAVE_CHANNEL_SUCCESS,
+                    payload: channel.url,
+                });
+            })
+                .catch(function (err) {
+                logger.error('ChannelList: Leaving channel failed', err);
+                if (cb && typeof cb === 'function')
+                    cb(channel, err);
+            });
+        };
+        var onClickChannel = function () {
+            if (!isOnline && !(sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled)) {
+                logger.warning('ChannelList: Inactivated clicking channel item during offline.');
+                return;
+            }
+            logger.info('ChannelList: Clicked on channel:', channel);
+            channelListDispatcher({
+                type: SET_CURRENT_CHANNEL,
+                payload: channel,
+            });
+        };
+        if (renderChannelPreview) {
+            return (React__default.createElement("div", { key: channel === null || channel === void 0 ? void 0 : channel.url, onClick: onClickChannel }, renderChannelPreview({ channel: channel, onLeaveChannel: onLeaveChannel })));
+        }
+        return (React__default.createElement(ChannelPreview, { key: channel === null || channel === void 0 ? void 0 : channel.url, tabIndex: index, onClick: onClickChannel, channel: channel, onLeaveChannel: function () { return onLeaveChannel(channel, null); }, isActive: (channel === null || channel === void 0 ? void 0 : channel.url) === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url), isTyping: typingChannels === null || typingChannels === void 0 ? void 0 : typingChannels.some(function (_a) {
+                var url = _a.url;
+                return url === (channel === null || channel === void 0 ? void 0 : channel.url);
+            }), renderChannelAction: function () { return (React__default.createElement(ChannelPreviewAction, { channel: channel, disabled: !isOnline, onLeaveChannel: function () { return onLeaveChannel(channel, null); } })); } }));
+    };
+    return (React__default.createElement(GroupChannelListUIView, { renderHeader: renderHeader, renderChannel: renderListItem, renderPlaceHolderError: renderPlaceHolderError, renderPlaceHolderLoading: renderPlaceHolderLoading, renderPlaceHolderEmptyList: renderPlaceHolderEmptyList, onChangeTheme: onThemeChange, allowProfileEdit: allowProfileEdit, onUserProfileUpdated: onProfileEditSuccess, channels: allChannels, onLoadMore: fetchChannelList, initialized: initialized, renderAddChannel: function () { return React__default.createElement(AddChannel, null); } }));
+};
+
+export { ChannelListUI as C, GroupChannelListUIView as G };
+//# sourceMappingURL=bundle-dOD0mfTw.js.map

package/chunks/bundle-dOD0mfTw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-dOD0mfTw.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/{bundle-J_erGfOo.js → bundle-drww6xht.js}

@@ -1,9 +1,10 @@
 import React__default, { createContext, useReducer, useContext } from 'react';
-import { _ as __assign } from './bundle-GKopZh-T.js';
-import { g as VOICE_PLAYER_ROOT_ID, e as VOICE_PLAYER_AUDIO_ID, a as VOICE_MESSAGE_FILE_NAME, b as VOICE_MESSAGE_MIME_TYPE } from './bundle-ZKM9Qk_j.js';
+import { _ as __assign } from './bundle-BA7tv0JB.js';
+import { g as VOICE_PLAYER_ROOT_ID, d as VOICE_PLAYER_AUDIO_ID, a as VOICE_MESSAGE_FILE_NAME, b as VOICE_MESSAGE_MIME_TYPE } from './bundle-MBrlu_LK.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 
 var INITIALIZE_AUDIO_UNIT = 'INITIALIZE_AUDIO_UNIT';
+var RESET_AUDIO_UNIT = 'RESET_AUDIO_UNIT';
 var SET_CURRENT_PLAYER = 'SET_CURRENT_PLAYER';
 var ON_VOICE_PLAYER_PLAY = 'ON_VOICE_PLAYER_PLAY';
 var ON_VOICE_PLAYER_PAUSE = 'ON_VOICE_PLAYER_PAUSE';
@@ -29,44 +30,43 @@ var voicePlayerInitialState = {
 };
 
 function voicePlayerReducer(state, action) {
-    var _a, _b, _c, _d;
-    var _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e;
+    var _f, _g, _h, _j;
     switch (action.type) {
         case INITIALIZE_AUDIO_UNIT: {
             var groupKey = action.payload.groupKey;
-            var audioUnit = (((_e = state.audioStorage) === null || _e === void 0 ? void 0 : _e[groupKey]) ? state.audioStorage[groupKey] : AudioUnitDefaultValue());
+            var audioUnit = (((_f = state.audioStorage) === null || _f === void 0 ? void 0 : _f[groupKey]) ? state.audioStorage[groupKey] : AudioUnitDefaultValue());
             audioUnit.playingStatus = VOICE_PLAYER_STATUS.PREPARING;
             return __assign(__assign({}, state), { audioStorage: __assign(__assign({}, state.audioStorage), (_a = {}, _a[groupKey] = audioUnit, _a)) });
         }
+        case RESET_AUDIO_UNIT: {
+            var groupKey = action.payload.groupKey;
+            return __assign(__assign({}, state), { audioStorage: __assign(__assign({}, state.audioStorage), (_b = {}, _b[groupKey] = AudioUnitDefaultValue(), _b)) });
+        }
         case SET_CURRENT_PLAYER: {
-            var _j = action.payload, audioPlayer = _j.audioPlayer, groupKey = _j.groupKey;
+            var _k = action.payload, audioPlayer = _k.audioPlayer, groupKey = _k.groupKey;
             return __assign(__assign({}, state), { currentPlayer: audioPlayer, currentGroupKey: groupKey });
         }
         case ON_VOICE_PLAYER_PLAY: {
-            var _k = action.payload, groupKey = _k.groupKey, audioFile = _k.audioFile;
-            var audioUnit = (((_f = state.audioStorage) === null || _f === void 0 ? void 0 : _f[groupKey]) ? state.audioStorage[groupKey] : AudioUnitDefaultValue());
+            var _l = action.payload, groupKey = _l.groupKey, audioFile = _l.audioFile;
+            var audioUnit = (((_g = state.audioStorage) === null || _g === void 0 ? void 0 : _g[groupKey]) ? state.audioStorage[groupKey] : AudioUnitDefaultValue());
             audioUnit.audioFile = audioFile;
             audioUnit.playingStatus = VOICE_PLAYER_STATUS.PLAYING;
-            return __assign(__assign({}, state), { audioStorage: __assign(__assign({}, state.audioStorage), (_b = {}, _b[groupKey] = audioUnit, _b)) });
+            return __assign(__assign({}, state), { audioStorage: __assign(__assign({}, state.audioStorage), (_c = {}, _c[groupKey] = audioUnit, _c)) });
         }
         case ON_VOICE_PLAYER_PAUSE: {
-            var groupKey = action.payload.groupKey;
-            var audioUnit = (((_g = state.audioStorage) === null || _g === void 0 ? void 0 : _g[groupKey]) ? state.audioStorage[groupKey] : AudioUnitDefaultValue());
+            var _m = action.payload, groupKey = _m.groupKey, duration = _m.duration, currentTime = _m.currentTime;
+            var audioUnit = (((_h = state.audioStorage) === null || _h === void 0 ? void 0 : _h[groupKey]) ? state.audioStorage[groupKey] : AudioUnitDefaultValue());
             audioUnit.playingStatus = VOICE_PLAYER_STATUS.PAUSED;
-            var _l = state.currentPlayer, currentTime = _l.currentTime, duration = _l.duration;
-            if (audioUnit.playbackTime === audioUnit.duration) {
+            if (duration === currentTime) {
                 audioUnit.playbackTime = 0;
             }
-            else if (currentTime > 0 && duration > 0) {
-                audioUnit.playbackTime = currentTime;
-                audioUnit.duration = duration;
-            }
-            return __assign(__assign({}, state), { audioStorage: __assign(__assign({}, state.audioStorage), (_c = {}, _c[groupKey] = audioUnit, _c)) });
+            return __assign(__assign({}, state), { audioStorage: __assign(__assign({}, state.audioStorage), (_d = {}, _d[groupKey] = audioUnit, _d)) });
         }
         case ON_CURRENT_TIME_UPDATE: {
             var groupKey = action.payload.groupKey;
-            var _m = state.currentPlayer, currentTime = _m.currentTime, duration = _m.duration;
-            var audioUnit = (((_h = state.audioStorage) === null || _h === void 0 ? void 0 : _h[groupKey]) ? state.audioStorage[groupKey] : AudioUnitDefaultValue());
+            var _o = state.currentPlayer, currentTime = _o.currentTime, duration = _o.duration;
+            var audioUnit = (((_j = state.audioStorage) === null || _j === void 0 ? void 0 : _j[groupKey]) ? state.audioStorage[groupKey] : AudioUnitDefaultValue());
             // sometimes the final time update is fired AFTER the pause event when audio is finished
             if (audioUnit.playbackTime === audioUnit.duration && audioUnit.playingStatus === VOICE_PLAYER_STATUS.PAUSED) {
                 audioUnit.playbackTime = 0;
@@ -75,7 +75,7 @@ function voicePlayerReducer(state, action) {
                 audioUnit.playbackTime = currentTime;
                 audioUnit.duration = duration;
             }
-            return __assign(__assign({}, state), { audioStorage: __assign(__assign({}, state.audioStorage), (_d = {}, _d[groupKey] = audioUnit, _d)) });
+            return __assign(__assign({}, state), { audioStorage: __assign(__assign({}, state.audioStorage), (_e = {}, _e[groupKey] = audioUnit, _e)) });
         }
         default:
             return state;
@@ -130,7 +130,7 @@ var VoicePlayerProvider = function (_a) {
             voicePlayerRoot.removeChild(voicePlayerAudioElement);
         }
         logger.info('VoicePlayer: Start getting audio file.');
-        new Promise(function (resolve) {
+        new Promise(function (resolve, reject) {
             var _a;
             voicePlayerDispatcher({
                 type: INITIALIZE_AUDIO_UNIT,
@@ -159,8 +159,10 @@ var VoicePlayerProvider = function (_a) {
                 });
                 resolve(audioFile);
                 logger.info('VoicePlayer: Get the audioFile from URL.');
-            });
-        }).then(function (audioFile) {
+            })
+                .catch(reject);
+        })
+            .then(function (audioFile) {
             var _a;
             var voicePlayerRoot = document.getElementById(VOICE_PLAYER_ROOT_ID);
             logger.info('VoicePlayer: Succeeded getting audio file.', { audioFile: audioFile });
@@ -181,7 +183,7 @@ var VoicePlayerProvider = function (_a) {
                 logger.info('VoicePlayer: OnPause event is called from audioPlayer', { groupKey: groupKey, audioPlayer: audioPlayer });
                 voicePlayerDispatcher({
                     type: ON_VOICE_PLAYER_PAUSE,
-                    payload: { groupKey: groupKey },
+                    payload: { groupKey: groupKey, duration: audioPlayer.duration, currentTime: audioPlayer.currentTime },
                 });
             };
             audioPlayer.ontimeupdate = function () {
@@ -190,6 +192,13 @@ var VoicePlayerProvider = function (_a) {
                     payload: { groupKey: groupKey },
                 });
             };
+            audioPlayer.onerror = function (error) {
+                logger.error('VoicePlayer: Failed to load the audioFile on the audio player.', error);
+                voicePlayerDispatcher({
+                    type: RESET_AUDIO_UNIT,
+                    payload: { groupKey: groupKey },
+                });
+            };
             audioPlayer.dataset.sbGroupId = groupKey;
             // clean up the previous audio player
             try {
@@ -199,10 +208,6 @@ var VoicePlayerProvider = function (_a) {
                     var thisGroupKey = (_a = element.dataset) === null || _a === void 0 ? void 0 : _a.sbGroupKey;
                     if (thisGroupKey !== groupKey) {
                         (_b = element === null || element === void 0 ? void 0 : element.pause) === null || _b === void 0 ? void 0 : _b.call(element);
-                        voicePlayerDispatcher({
-                            type: ON_VOICE_PLAYER_PAUSE,
-                            payload: { groupKey: groupKey },
-                        });
                         voicePlayerRoot.removeChild(element);
                         logger.info('VoicePlayer: Removed other player.', { element: element });
                     }
@@ -217,6 +222,13 @@ var VoicePlayerProvider = function (_a) {
                 });
                 logger.info('VoicePlayer: Succeeded playing audio player.', { groupKey: groupKey, audioPlayer: audioPlayer });
             }
+        })
+            .catch(function (error) {
+            logger.warning('VoicePlayer: Failed loading audio file with URL.', error);
+            voicePlayerDispatcher({
+                type: RESET_AUDIO_UNIT,
+                payload: { groupKey: groupKey },
+            });
         });
     };
     return (React__default.createElement(Context.Provider, { value: {
@@ -231,4 +243,4 @@ var VoicePlayerProvider = function (_a) {
 var useVoicePlayerContext = function () { return useContext(Context); };
 
 export { AudioUnitDefaultValue as A, VOICE_PLAYER_STATUS as V, ALL as a, VoicePlayerProvider as b, useVoicePlayerContext as u };
-//# sourceMappingURL=bundle-J_erGfOo.js.map
+//# sourceMappingURL=bundle-drww6xht.js.map

package/chunks/bundle-drww6xht.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-drww6xht.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/chunks/{bundle-xgiw36M5.js → bundle-fQ1V_U8F.js}

@@ -15,4 +15,4 @@ function useKeyDown(ref, keyDownCallbackMap) {
 }
 
 export { useKeyDown as u };
-//# sourceMappingURL=bundle-xgiw36M5.js.map
+//# sourceMappingURL=bundle-fQ1V_U8F.js.map

package/chunks/bundle-fQ1V_U8F.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-fQ1V_U8F.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}