@sendbird/uikit-react 3.8.0 → 3.8.2

package/cjs/chunks/{bundle-FLCJVplO.js → bundle-ww8_Dx5u.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var _tslib = require('./bundle-hK4x7nmG.js');
-var index = require('./bundle-FHx0K-3z.js');
+var _tslib = require('./bundle-2s7rxLn3.js');
+var index = require('./bundle-tFwEElQ4.js');
 
 var USER_MENTION_PREFIX = '@';
 
@@ -134,4 +134,4 @@ exports.TOKEN_TYPES = TOKEN_TYPES;
 exports.USER_MENTION_PREFIX = USER_MENTION_PREFIX;
 exports.getWhiteSpacePreservedText = getWhiteSpacePreservedText;
 exports.tokenizeMessage = tokenizeMessage;
-//# sourceMappingURL=bundle-FLCJVplO.js.map
+//# sourceMappingURL=bundle-ww8_Dx5u.js.map

package/cjs/chunks/bundle-ww8_Dx5u.js.map

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

package/cjs/chunks/bundle-xXG5L42q.js

@@ -0,0 +1,356 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('./bundle-3AvVQDMo.js');
+var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
+var VoiceRecorder_useVoiceRecorder = require('../VoiceRecorder/useVoiceRecorder.js');
+var utils = require('./bundle-5SOWNViS.js');
+var ui_VoiceMessgeInput = require('./bundle-UEKzL00k.js');
+var ui_Modal = require('./bundle-6lAqYT4t.js');
+var ui_Button = require('../ui/Button.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var consts = require('./bundle-9GSi_LkG.js');
+var VoicePlayer_context = require('./bundle-S6CVN67K.js');
+var uuid = require('./bundle--NEfAH1H.js');
+var _tslib = require('./bundle-2s7rxLn3.js');
+var index = require('./bundle-tFwEElQ4.js');
+var hooks_useModal = require('../hooks/useModal.js');
+require('./bundle-1Rk5zlYY.js');
+var ui_Avatar = require('./bundle-03qc56fX.js');
+
+var VoiceMessageInputWrapper = function (_a) {
+    var _b;
+    var channel = _a.channel, onCancelClick = _a.onCancelClick, onSubmitClick = _a.onSubmitClick;
+    var uuid$1 = React.useRef(uuid.uuidv4()).current;
+    var _c = React.useState(null), audioFile = _c[0], setAudioFile = _c[1];
+    var _d = React.useState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD), voiceInputState = _d[0], setVoiceInputState = _d[1];
+    var _e = React.useState(false), isSubmitted = _e[0], setSubmit = _e[1];
+    var _f = React.useState(false), isDisabled = _f[0], setDisabled = _f[1];
+    var _g = React.useState(false), showModal = _g[0], setShowModal = _g[1];
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var minRecordingTime = ((_b = config === null || config === void 0 ? void 0 : config.voiceRecord) === null || _b === void 0 ? void 0 : _b.minRecordingTime) || consts.VOICE_RECORDER_DEFAULT_MIN;
+    var _h = VoiceRecorder_useVoiceRecorder.useVoiceRecorder({
+        onRecordingStarted: function () {
+            setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.RECORDING);
+        },
+        onRecordingEnded: function (audioFile) {
+            setAudioFile(audioFile);
+        },
+    }), start = _h.start, stop = _h.stop, cancel = _h.cancel, recordingTime = _h.recordingTime, recordingStatus = _h.recordingStatus, recordingLimit = _h.recordingLimit;
+    var voicePlayer = VoicePlayer_useVoicePlayer.useVoicePlayer({
+        channelUrl: channel === null || channel === void 0 ? void 0 : channel.url,
+        key: uuid$1,
+        audioFile: audioFile,
+    });
+    var play = voicePlayer.play, pause = voicePlayer.pause, playbackTime = voicePlayer.playbackTime, playingStatus = voicePlayer.playingStatus;
+    var stopVoicePlayer = voicePlayer.stop;
+    // disabled state: muted & frozen
+    React.useEffect(function () {
+        if (utils.isDisabledBecauseFrozen(channel) || utils.isDisabledBecauseMuted(channel)) {
+            setDisabled(true);
+        }
+        else {
+            setDisabled(false);
+        }
+    }, [channel === null || channel === void 0 ? void 0 : channel.myRole, channel === null || channel === void 0 ? void 0 : channel.isFrozen, channel === null || channel === void 0 ? void 0 : channel.myMutedState]);
+    // call onSubmitClick when submit button is clicked and recorded audio file is created
+    React.useEffect(function () {
+        if (isSubmitted && audioFile) {
+            onSubmitClick(audioFile, recordingTime);
+            setSubmit(false);
+            setAudioFile(null);
+        }
+    }, [isSubmitted, audioFile, recordingTime]);
+    // operate which control button should be displayed
+    React.useEffect(function () {
+        if (audioFile) {
+            if (recordingTime < minRecordingTime) {
+                setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                setAudioFile(null);
+            }
+            else if (playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PLAYING) {
+                setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.PLAYING);
+            }
+            else {
+                setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_PLAY);
+            }
+        }
+    }, [audioFile, recordingTime, playingStatus]);
+    return (React.createElement("div", { className: "sendbird-voice-message-input-wrapper" },
+        React.createElement(ui_VoiceMessgeInput.VoiceMessageInput, { currentValue: recordingStatus === VoiceRecorder_useVoiceRecorder.VoiceRecorderStatus.COMPLETED ? playbackTime : recordingTime, maximumValue: recordingStatus === VoiceRecorder_useVoiceRecorder.VoiceRecorderStatus.COMPLETED ? recordingTime : recordingLimit, currentType: voiceInputState, onCancelClick: function () {
+                onCancelClick();
+                cancel();
+                stopVoicePlayer();
+            }, onSubmitClick: function () {
+                if (isDisabled) {
+                    setShowModal(true);
+                    setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                }
+                else {
+                    stop();
+                    pause();
+                    setSubmit(true);
+                }
+            }, onControlClick: function (type) {
+                switch (type) {
+                    case ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD: {
+                        stopVoicePlayer();
+                        start();
+                        break;
+                    }
+                    case ui_VoiceMessgeInput.VoiceMessageInputStatus.RECORDING: {
+                        if (recordingTime >= minRecordingTime && !isDisabled) {
+                            stop();
+                        }
+                        else if (isDisabled) {
+                            cancel();
+                            setShowModal(true);
+                            setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        else {
+                            cancel();
+                            setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        break;
+                    }
+                    case ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_PLAY: {
+                        play();
+                        break;
+                    }
+                    case ui_VoiceMessgeInput.VoiceMessageInputStatus.PLAYING: {
+                        pause();
+                        break;
+                    }
+                }
+            } }),
+        showModal && (React.createElement(ui_Modal.Modal, { className: "sendbird-voice-message-input-wrapper-alert", titleText: utils.isDisabledBecauseMuted(channel)
+                ? stringSet.MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED
+                : stringSet.MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN, hideFooter: true, isCloseOnClickOutside: true, onCancel: function () {
+                setShowModal(false);
+                onCancelClick();
+            } },
+            React.createElement("div", { className: "sendbird-voice-message-input-wrapper-alert__body" },
+                React.createElement(ui_Button.default, { className: "sendbird-voice-message-input-wrapper-alert__body__ok-button", type: ui_Button.ButtonTypes.PRIMARY, size: ui_Button.ButtonSizes.BIG, onClick: function () {
+                        setShowModal(false);
+                        onCancelClick();
+                    } }, stringSet.BUTTON__OK))))));
+};
+
+var compressImage = function (_a) {
+    var imageFile = _a.imageFile, compressionRate = _a.compressionRate, resizingWidth = _a.resizingWidth, resizingHeight = _a.resizingHeight;
+    var image = document.createElement('img');
+    return new Promise(function (resolve, reject) {
+        image.src = URL.createObjectURL(imageFile);
+        image.onerror = reject;
+        image.onload = function () {
+            URL.revokeObjectURL(image.src);
+            var canvas = document.createElement('canvas');
+            var originWidth = image.width;
+            var originHeight = image.height;
+            var widthRatio = originWidth / (resizingWidth || originWidth);
+            var heightRatio = originHeight / (resizingHeight || originHeight);
+            var targetResizingWidth = resizingWidth || originWidth;
+            var targetResizingHeight = resizingHeight || originHeight;
+            // Use the more impactful value, so the original images' ratio won't be broken
+            if (widthRatio > heightRatio) {
+                targetResizingHeight = originHeight / (resizingWidth ? widthRatio : 1);
+            }
+            else if (heightRatio > widthRatio) {
+                targetResizingWidth = originWidth / (resizingHeight ? heightRatio : 1);
+            }
+            canvas.width = targetResizingWidth;
+            canvas.height = targetResizingHeight;
+            var ctx = canvas.getContext('2d');
+            if (!ctx) {
+                reject(new Error('Failed to get canvas 2d context'));
+                return;
+            }
+            ctx.drawImage(image, 0, 0, targetResizingWidth, targetResizingHeight);
+            ctx.canvas.toBlob(function (blob) {
+                if (blob) {
+                    var file = new File([blob], imageFile.name, { type: imageFile.type });
+                    resolve(file);
+                }
+                else {
+                    reject(new Error('Failed to compress image'));
+                }
+            }, imageFile.type, compressionRate);
+        };
+    });
+};
+var compressImages = function (_a) {
+    var files = _a.files, logger = _a.logger, imageCompression = _a.imageCompression;
+    return _tslib.__awaiter(void 0, void 0, void 0, function () {
+        var compressionRate, resizingWidth, resizingHeight, result;
+        return _tslib.__generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    compressionRate = imageCompression.compressionRate;
+                    resizingWidth = ui_Avatar.pxToNumber(imageCompression.resizingWidth);
+                    resizingHeight = ui_Avatar.pxToNumber(imageCompression.resizingHeight);
+                    result = {
+                        failedIndexes: [],
+                        compressedFiles: [],
+                    };
+                    if (!(Array.isArray(files) && files.length > 0)) {
+                        logger.warning('utils - compressImages: There are no files.', files);
+                        return [2 /*return*/, result];
+                    }
+                    if (compressionRate < 0 || 1 < compressionRate) {
+                        logger.warning('utils - compressImages: The compressionRate is not acceptable.', compressionRate);
+                        return [2 /*return*/, result];
+                    }
+                    return [4 /*yield*/, Promise.all(files
+                            .map(function (file, index) { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+                            var compressedImage, err_1;
+                            return _tslib.__generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        if (!(file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg')) {
+                                            logger.warning('utils - compressImages: The fileType is not compressible.', { file: file, index: index });
+                                            result.failedIndexes.push(index);
+                                            result.compressedFiles.push(file);
+                                            return [2 /*return*/];
+                                        }
+                                        _a.label = 1;
+                                    case 1:
+                                        _a.trys.push([1, 3, , 4]);
+                                        return [4 /*yield*/, compressImage({
+                                                imageFile: file,
+                                                compressionRate: compressionRate,
+                                                resizingWidth: resizingWidth,
+                                                resizingHeight: resizingHeight,
+                                            })];
+                                    case 2:
+                                        compressedImage = _a.sent();
+                                        result.compressedFiles.push(compressedImage);
+                                        return [3 /*break*/, 4];
+                                    case 3:
+                                        err_1 = _a.sent();
+                                        result.failedIndexes.push(index);
+                                        logger.warning('utils - compressImages: Failed to compress image file', { err: err_1 });
+                                        return [3 /*break*/, 4];
+                                    case 4: return [2 /*return*/];
+                                }
+                            });
+                        }); }))];
+                case 1:
+                    _b.sent();
+                    logger.info('utils - compressImages: Finished compressing images', result);
+                    return [2 /*return*/, result];
+            }
+        });
+    });
+};
+
+var useHandleUploadFiles = function (_a, _b) {
+    var sendFileMessage = _a.sendFileMessage, sendMultipleFilesMessage = _a.sendMultipleFilesMessage, quoteMessage = _a.quoteMessage;
+    var logger = _b.logger;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var imageCompression = config.imageCompression;
+    var uikitUploadSizeLimit = config === null || config === void 0 ? void 0 : config.uikitUploadSizeLimit;
+    var uikitMultipleFilesMessageLimit = config === null || config === void 0 ? void 0 : config.uikitMultipleFilesMessageLimit;
+    var openModal = hooks_useModal.useGlobalModalContext().openModal;
+    var handleUploadFiles = React.useCallback(function (files) { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+        var ONE_MiB, compressedFiles, sendingFiles, file, imageFiles_1, otherFiles_1;
+        return _tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    // Validate Parameters
+                    if (!sendFileMessage || !sendMultipleFilesMessage) {
+                        logger.warning('Channel|useHandleUploadFiles: required functions are undefined', { sendFileMessage: sendFileMessage, sendMultipleFilesMessage: sendMultipleFilesMessage });
+                        return [2 /*return*/];
+                    }
+                    if (files.length === 0) {
+                        logger.warning('Channel|useHandleUploadFiles: given file list is empty.', { files: files });
+                        return [2 /*return*/];
+                    }
+                    if (files.length > uikitMultipleFilesMessageLimit) {
+                        logger.info("Channel|useHandleUploadFiles: Cannot upload files more than ".concat(uikitMultipleFilesMessageLimit));
+                        openModal({
+                            modalProps: {
+                                titleText: "Up to ".concat(uikitMultipleFilesMessageLimit, " files can be attached."),
+                                hideFooter: true,
+                            },
+                            childElement: function (_a) {
+                                var closeModal = _a.closeModal;
+                                return (React.createElement(ui_Modal.ModalFooter, { type: ui_Button.ButtonTypes.PRIMARY, submitText: stringSet.BUTTON__OK, hideCancelButton: true, onCancel: closeModal, onSubmit: closeModal }));
+                            },
+                        });
+                        return [2 /*return*/];
+                    }
+                    // Validate file sizes
+                    if (files.some(function (file) { return file.size > uikitUploadSizeLimit; })) {
+                        // The default value of uikitUploadSizeLimit is 26MB
+                        logger.info("Channel|useHandleUploadFiles: Cannot upload file size exceeding ".concat(uikitUploadSizeLimit));
+                        ONE_MiB = 1024 * 1024;
+                        openModal({
+                            modalProps: {
+                                titleText: "The maximum size per file is ".concat(Math.floor(uikitUploadSizeLimit / ONE_MiB), " MB."),
+                                hideFooter: true,
+                            },
+                            childElement: function (_a) {
+                                var closeModal = _a.closeModal;
+                                return (React.createElement(ui_Modal.ModalFooter, { type: ui_Button.ButtonTypes.PRIMARY, submitText: stringSet.BUTTON__OK, hideCancelButton: true, onCancel: closeModal, onSubmit: closeModal }));
+                            },
+                        });
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, compressImages({
+                            files: files,
+                            imageCompression: imageCompression,
+                            logger: logger,
+                        })];
+                case 1:
+                    compressedFiles = (_a.sent()).compressedFiles;
+                    sendingFiles = compressedFiles;
+                    // Send File Message
+                    if (sendingFiles.length === 1) {
+                        logger.info('Channel|useHandleUploadFiles: sending one file.');
+                        file = sendingFiles[0];
+                        sendFileMessage(file, quoteMessage);
+                    }
+                    else if (sendingFiles.length > 1) {
+                        logger.info('Channel|useHandleUploadFiles: sending multiple files.');
+                        imageFiles_1 = [];
+                        otherFiles_1 = [];
+                        sendingFiles.forEach(function (file) {
+                            if (index.isImage(file.type)) {
+                                imageFiles_1.push(file);
+                            }
+                            else {
+                                otherFiles_1.push(file);
+                            }
+                        });
+                        return [2 /*return*/, otherFiles_1.reduce(function (previousPromise, item) {
+                                return previousPromise.then(function () {
+                                    return sendFileMessage(item, quoteMessage);
+                                });
+                            }, (function () {
+                                if (imageFiles_1.length === 0) {
+                                    return Promise.resolve();
+                                }
+                                else if (imageFiles_1.length === 1) {
+                                    return sendFileMessage(imageFiles_1[0], quoteMessage);
+                                }
+                                else {
+                                    return sendMultipleFilesMessage(imageFiles_1, quoteMessage);
+                                }
+                            })())];
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [
+        sendFileMessage,
+        sendMultipleFilesMessage,
+        quoteMessage,
+    ]);
+    return handleUploadFiles;
+};
+
+exports.VoiceMessageInputWrapper = VoiceMessageInputWrapper;
+exports.useHandleUploadFiles = useHandleUploadFiles;
+//# sourceMappingURL=bundle-xXG5L42q.js.map

package/cjs/chunks/bundle-xXG5L42q.js.map

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

package/cjs/chunks/{bundle-e-fvbugV.js → bundle-z8FhI7RF.js}

@@ -32,4 +32,4 @@ var generateDefaultAvatar = function (channel) {
 exports.generateDefaultAvatar = generateDefaultAvatar;
 exports.getChannelAvatarSource = getChannelAvatarSource;
 exports.getOpenChannelAvatar = getOpenChannelAvatar;
-//# sourceMappingURL=bundle-e-fvbugV.js.map
+//# sourceMappingURL=bundle-z8FhI7RF.js.map

package/cjs/chunks/bundle-z8FhI7RF.js.map

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

package/cjs/chunks/{bundle-g_OXBrgT.js → bundle-zNIQydjM.js}

@@ -29,4 +29,4 @@ function getCaseResolvedThreadReplySelectType(threadReplySelectType) {
 
 exports.getCaseResolvedReplyType = getCaseResolvedReplyType;
 exports.getCaseResolvedThreadReplySelectType = getCaseResolvedThreadReplySelectType;
-//# sourceMappingURL=bundle-g_OXBrgT.js.map
+//# sourceMappingURL=bundle-zNIQydjM.js.map

package/cjs/chunks/bundle-zNIQydjM.js.map

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

package/cjs/hooks/useModal.js

@@ -1,18 +1,18 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-hK4x7nmG.js');
+var _tslib = require('../chunks/bundle-2s7rxLn3.js');
 var React = require('react');
-var index_module = require('../chunks/bundle-I_9_5a8a.js');
-var utils = require('../chunks/bundle-1yOirqug.js');
-var ui_Modal = require('../chunks/bundle-UooP2IDU.js');
+var index_module = require('../chunks/bundle-qnGmz8ai.js');
+var utils = require('../chunks/bundle--OdfDOjY.js');
+var ui_Modal = require('../chunks/bundle-6lAqYT4t.js');
 require('react-dom');
-require('../chunks/bundle-QmSa90PC.js');
-require('../chunks/bundle-z-Bvsn0B.js');
-require('../chunks/bundle-n1yh-qDb.js');
-require('../chunks/bundle-Y9TkHVI5.js');
+require('../chunks/bundle-3AvVQDMo.js');
+require('../chunks/bundle-wvuQ096A.js');
+require('../chunks/bundle-YXCUHkka.js');
+require('../chunks/bundle-K0D5qG0j.js');
 require('../ui/IconButton.js');
 require('../ui/Button.js');
-require('../chunks/bundle-6ziaqiUd.js');
+require('../chunks/bundle-1Rk5zlYY.js');
 require('../ui/Icon.js');
 
 var GlobalModalContext = React.createContext({