@sendbird/uikit-react 3.8.2 → 3.9.0-rc.0

package/cjs/chunks/{bundle-03qc56fX.js → bundle-sXdSdEH6.js}

@@ -1,45 +1,33 @@
 'use strict';
 
-var _tslib = require('./bundle-2s7rxLn3.js');
+var _tslib = require('./bundle-4Ep0zw5t.js');
 var React = require('react');
 var ui_ImageRenderer = require('../ui/ImageRenderer.js');
+var uuid = require('./bundle-w6AgQhwT.js');
+var pxToNumber = require('./bundle-chn4rwUr.js');
 var ui_Icon = require('../ui/Icon.js');
-var uuid = require('./bundle--NEfAH1H.js');
 
-var pxToNumber = function (px) {
-    if (typeof px === 'number') {
-        return px;
-    }
-    if (typeof px === 'string') {
-        var parsed = Number.parseFloat(px);
-        if (!Number.isNaN(parsed)) {
-            return parsed;
-        }
-    }
-    return NaN;
-};
-
-var imageRendererClassName = 'sendbird-avatar-img';
-var DefaultComponent = function (_a) {
-    var width = _a.width, height = _a.height;
-    var iconWidth = pxToNumber(width);
-    var iconHeight = pxToNumber(height);
+var AvatarDefault = function (props) {
+    var width = props.width, height = props.height, text = props.text;
+    var iconWidth = pxToNumber.pxToNumber(width);
+    var iconHeight = pxToNumber.pxToNumber(height);
     if (typeof iconWidth === 'number' && !Number.isNaN(iconWidth)) {
         iconWidth *= 0.575;
     }
     if (typeof iconHeight === 'number' && !Number.isNaN(iconHeight)) {
         iconHeight *= 0.575;
     }
-    return (React.createElement("div", { className: "sendbird-avatar-img--default", style: { width: width, height: height } },
-        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.USER, fillColor: ui_Icon.IconColors.CONTENT, width: iconWidth, height: iconHeight })));
-};
-var _defaultComponent = function (_a) {
-    var width = _a.width, height = _a.height;
-    return (React.createElement(DefaultComponent, { width: width, height: height }));
-};
+    return (React.createElement("div", { className: "sendbird-avatar-img--default ".concat(text ? 'text' : ''), style: { width: width, height: height } }, text
+        ? React.createElement("div", { className: 'sendbird-avatar-text' }, text)
+        : React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.USER, fillColor: ui_Icon.IconColors.CONTENT, width: iconWidth, height: iconHeight })));
+};
+
+var imageRendererClassName = 'sendbird-avatar-img';
 var AvatarInner = function (_a) {
     var _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.alt, alt = _c === void 0 ? '' : _c, height = _a.height, width = _a.width, customDefaultComponent = _a.customDefaultComponent;
-    var defaultComponent = function () { return customDefaultComponent ? customDefaultComponent({ width: width, height: height }) : _defaultComponent({ width: width, height: height }); };
+    var defaultComponent = function () { return customDefaultComponent
+        ? customDefaultComponent({ width: width, height: height })
+        : React.createElement(AvatarDefault, { width: width, height: height }); };
     if (typeof src === 'string') {
         return (React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: src, height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
     }
@@ -67,15 +55,20 @@ var AvatarInner = function (_a) {
     return (React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: "", height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
 };
 function Avatar(_a, ref) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.alt, alt = _d === void 0 ? '' : _d, _e = _a.width, width = _e === void 0 ? '56px' : _e, _f = _a.height, height = _f === void 0 ? '56px' : _f, onClick = _a.onClick, customDefaultComponent = _a.customDefaultComponent;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.alt, alt = _d === void 0 ? '' : _d, _e = _a.width, width = _e === void 0 ? '56px' : _e, _f = _a.height, height = _f === void 0 ? '56px' : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 0 : _g, _h = _a.left, left = _h === void 0 ? '0px' : _h, onClick = _a.onClick, customDefaultComponent = _a.customDefaultComponent;
     return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
             'sendbird-avatar',
-        ], false).join(' '), role: "button", ref: ref, style: { height: height, width: width }, onClick: onClick, onKeyDown: onClick, tabIndex: 0 },
+        ], false).join(' '), role: "button", ref: ref, style: {
+            height: height,
+            width: width,
+            zIndex: zIndex,
+            left: left,
+        }, onClick: onClick, onKeyDown: onClick, tabIndex: 0 },
         React.createElement(AvatarInner, { src: src, width: width, height: height, alt: alt, customDefaultComponent: customDefaultComponent })));
 }
 var Avatar$1 = React.forwardRef(Avatar);
 
 exports.Avatar = Avatar$1;
+exports.AvatarDefault = AvatarDefault;
 exports.AvatarInner = AvatarInner;
-exports.pxToNumber = pxToNumber;
-//# sourceMappingURL=bundle-03qc56fX.js.map
+//# sourceMappingURL=bundle-sXdSdEH6.js.map

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

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

package/cjs/chunks/bundle-upHd36Rz.js

@@ -0,0 +1,136 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('./bundle-Pnz_sqaN.js');
+var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
+var VoiceRecorder_useVoiceRecorder = require('../VoiceRecorder/useVoiceRecorder.js');
+var utils = require('./bundle-lmsd3CBz.js');
+var ui_VoiceMessageInput = require('./bundle-Y-U2PjW2.js');
+var ui_Modal = require('./bundle-efOp7vtv.js');
+var ui_Button = require('../ui/Button.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var consts = require('./bundle-3_V46-kD.js');
+var VoicePlayer_context = require('./bundle-P26GNXny.js');
+var uuid = require('./bundle-w6AgQhwT.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_VoiceMessageInput.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_VoiceMessageInput.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_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                setAudioFile(null);
+            }
+            else if (playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PLAYING) {
+                setVoiceInputState(ui_VoiceMessageInput.VoiceMessageInputStatus.PLAYING);
+            }
+            else {
+                setVoiceInputState(ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_PLAY);
+            }
+        }
+    }, [audioFile, recordingTime, playingStatus]);
+    return (React.createElement("div", { className: "sendbird-voice-message-input-wrapper" },
+        React.createElement(ui_VoiceMessageInput.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_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                }
+                else {
+                    stop();
+                    pause();
+                    setSubmit(true);
+                }
+            }, onControlClick: function (type) {
+                switch (type) {
+                    case ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_RECORD: {
+                        stopVoicePlayer();
+                        start();
+                        break;
+                    }
+                    case ui_VoiceMessageInput.VoiceMessageInputStatus.RECORDING: {
+                        if (recordingTime >= minRecordingTime && !isDisabled) {
+                            stop();
+                        }
+                        else if (isDisabled) {
+                            cancel();
+                            setShowModal(true);
+                            setVoiceInputState(ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        else {
+                            cancel();
+                            setVoiceInputState(ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        break;
+                    }
+                    case ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_PLAY: {
+                        play();
+                        break;
+                    }
+                    case ui_VoiceMessageInput.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))))));
+};
+
+exports.VoiceMessageInputWrapper = VoiceMessageInputWrapper;
+//# sourceMappingURL=bundle-upHd36Rz.js.map

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

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

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var _tslib = require('./bundle-2s7rxLn3.js');
-var index = require('./bundle-tFwEElQ4.js');
+var _tslib = require('./bundle-4Ep0zw5t.js');
+var index = require('./bundle-mI_PIc66.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-ww8_Dx5u.js.map
+//# sourceMappingURL=bundle-vaWya0T1.js.map

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

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

package/cjs/chunks/{bundle-KQyVyq1q.js → bundle-w23L_Tb_.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./bundle-YXCUHkka.js');
+var index = require('./bundle-cYtusUc3.js');
 
 function requiredArgs(required, args) {
   if (args.length < required) {
@@ -1855,4 +1855,4 @@ exports.format = format;
 exports.requiredArgs = requiredArgs;
 exports.toDate = toDate;
 exports.toInteger = toInteger;
-//# sourceMappingURL=bundle-KQyVyq1q.js.map
+//# sourceMappingURL=bundle-w23L_Tb_.js.map