@sendbird/uikit-react 3.4.0-rc.1 → 3.4.0-rc.2

package/cjs/ui/ThumbnailMessageItemBody.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var React = require('react');
+var ui_Icon = require('./Icon.js');
+var ui_ImageRenderer = require('./ImageRenderer.js');
+var index = require('../index-482bbe89.js');
+require('prop-types');
+require('../tslib.es6-5163dacf.js');
+require('../utils/message/getOutgoingMessageState.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ThumbnailMessageItemBody(_a) {
+  var _b, _c;
+
+  var className = _a.className,
+      message = _a.message,
+      _d = _a.isByMe,
+      isByMe = _d === void 0 ? false : _d,
+      _e = _a.mouseHover,
+      mouseHover = _e === void 0 ? false : _e,
+      _f = _a.isReactionEnabled,
+      isReactionEnabled = _f === void 0 ? false : _f,
+      showFileViewer = _a.showFileViewer,
+      _g = _a.style,
+      style = _g === void 0 ? {} : _g;
+  var _h = message.thumbnails,
+      thumbnails = _h === void 0 ? [] : _h;
+  var thumbnailUrl = thumbnails.length > 0 ? (_b = thumbnails[0]) === null || _b === void 0 ? void 0 : _b.url : '';
+
+  var _j = React.useState(false),
+      imageRendered = _j[0],
+      setImageRendered = _j[1];
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: index.getClassName([className, 'sendbird-thumbnail-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_c = message === null || message === void 0 ? void 0 : message.reactions) === null || _c === void 0 ? void 0 : _c.length) > 0 ? 'reactions' : '']),
+    onClick: function () {
+      if (index.isSentMessage(message)) {
+        showFileViewer(true);
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+    className: "sendbird-thumbnail-message-item-body__thumbnail",
+    url: thumbnailUrl || (message === null || message === void 0 ? void 0 : message.url),
+    alt: message === null || message === void 0 ? void 0 : message.type,
+    width: (style === null || style === void 0 ? void 0 : style.width) || "360px",
+    height: (style === null || style === void 0 ? void 0 : style.height) || "270px",
+    onLoad: function () {
+      setImageRendered(true);
+    },
+    placeHolder: function (style_) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "sendbird-thumbnail-message-item-body__placeholder",
+        style: style_
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "sendbird-thumbnail-message-item-body__placeholder__icon"
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: index.isVideoMessage(message) ? ui_Icon.IconTypes.PLAY : ui_Icon.IconTypes.PHOTO,
+        fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
+        width: "34px",
+        height: "34px"
+      })));
+    }
+  }), index.isVideoMessage(message) && !thumbnailUrl && !imageRendered && /*#__PURE__*/React__default["default"].createElement("video", {
+    className: "sendbird-thumbnail-message-item-body__video"
+  }, /*#__PURE__*/React__default["default"].createElement("source", {
+    src: message === null || message === void 0 ? void 0 : message.url,
+    type: message === null || message === void 0 ? void 0 : message.type
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-thumbnail-message-item-body__image-cover"
+  }), (index.isVideoMessage(message) || index.isGifMessage(message)) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-thumbnail-message-item-body__icon-wrapper"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-thumbnail-message-item-body__icon-wrapper__icon"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: index.isVideoMessage(message) ? ui_Icon.IconTypes.PLAY : ui_Icon.IconTypes.GIF,
+    fillColor: ui_Icon.IconColors.GRAY,
+    width: "34px",
+    height: "34px"
+  }))));
+}
+
+module.exports = ThumbnailMessageItemBody;
+//# sourceMappingURL=ThumbnailMessageItemBody.js.map

package/cjs/ui/Tooltip.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var tslib_es6 = require('../tslib.es6-5163dacf.js');
+var React = require('react');
+var ui_Label = require('../index-db48f031.js');
+require('prop-types');
+require('../stringSet-42fa6280.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Tooltip(_a) {
+  var _b = _a.className,
+      className = _b === void 0 ? '' : _b,
+      _c = _a.children,
+      children = _c === void 0 ? '' : _c;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-tooltip'], false).join(' ')
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-tooltip__text",
+    type: ui_Label.LabelTypography.CAPTION_2,
+    color: ui_Label.LabelColors.ONCONTENT_1
+  }, children));
+}
+
+module.exports = Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/cjs/ui/TooltipWrapper.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var tslib_es6 = require('../tslib.es6-5163dacf.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var SPACE_FROM_TRIGGER = 8;
+function TooltipWrapper(_a) {
+  var _b = _a.className,
+      className = _b === void 0 ? '' : _b,
+      children = _a.children,
+      hoverTooltip = _a.hoverTooltip;
+
+  var _c = React.useState(false),
+      showHoverTooltip = _c[0],
+      setShowHoverTooltip = _c[1];
+
+  var childrenRef = React.useRef(null);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-tooltip-wrapper'], false).join(' '),
+    onMouseOver: function () {
+      setShowHoverTooltip(true);
+    },
+    onFocus: function () {
+      setShowHoverTooltip(true);
+    },
+    onMouseOut: function () {
+      setShowHoverTooltip(false);
+    },
+    onBlur: function () {
+      setShowHoverTooltip(false);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-tooltip-wrapper__children",
+    ref: childrenRef
+  }, children), showHoverTooltip && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-tooltip-wrapper__hover-tooltip",
+    style: {
+      bottom: "calc(100% + ".concat(SPACE_FROM_TRIGGER, "px)")
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-tooltip-wrapper__hover-tooltip__inner"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container",
+    style: {
+      left: childrenRef.current && "calc(".concat(childrenRef.current.offsetWidth / 2, "px - 50%)")
+    }
+  }, hoverTooltip))));
+}
+
+module.exports = TooltipWrapper;
+//# sourceMappingURL=TooltipWrapper.js.map

package/cjs/ui/UnknownMessageItemBody.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var ui_Label = require('../index-db48f031.js');
+var index = require('../index-482bbe89.js');
+var LocalizationContext = require('../LocalizationContext-53fd4ae9.js');
+require('prop-types');
+require('../stringSet-42fa6280.js');
+require('../tslib.es6-5163dacf.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('../index-7c018421.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function UnknownMessageItemBody(_a) {
+  var _b;
+
+  var className = _a.className,
+      message = _a.message,
+      _c = _a.isByMe,
+      isByMe = _c === void 0 ? false : _c,
+      _d = _a.mouseHover,
+      mouseHover = _d === void 0 ? false : _d,
+      _e = _a.isReactionEnabled,
+      isReactionEnabled = _e === void 0 ? false : _e;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: index.getClassName([className, 'sendbird-unknown-message-item-body', isByMe ? 'outgoing' : 'incoming', mouseHover ? 'mouse-hover' : '', isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0 ? 'reactions' : ''])
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-unknown-message-item-body__header",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
+  }, stringSet.UNKNOWN__UNKNOWN_MESSAGE_TYPE), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-unknown-message-item-body__description",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: isByMe ? ui_Label.LabelColors.ONCONTENT_2 : ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.UNKNOWN__CANNOT_READ_MESSAGE));
+}
+
+module.exports = UnknownMessageItemBody;
+//# sourceMappingURL=UnknownMessageItemBody.js.map

package/cjs/ui/UserListItem.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var tslib_es6 = require('../tslib.es6-5163dacf.js');
+var React = require('react');
+var UserProfileContext = require('../UserProfileContext-c7d6be85.js');
+var LocalizationContext = require('../LocalizationContext-53fd4ae9.js');
+var ui_Avatar = require('./Avatar.js');
+var ui_MutedAvatarOverlay = require('./MutedAvatarOverlay.js');
+var ui_Checkbox = require('./Checkbox.js');
+var ui_UserProfile = require('./UserProfile.js');
+var ui_ContextMenu = require('./ContextMenu.js');
+var ui_Label = require('../index-db48f031.js');
+require('prop-types');
+require('../stringSet-42fa6280.js');
+require('../index-7c018421.js');
+require('./ImageRenderer.js');
+require('./Icon.js');
+require('../uuid-e879709a.js');
+require('../sendbirdSelectors.js');
+require('../topics-bc8e923e.js');
+require('../utils-09e1cb5d.js');
+require('./Button.js');
+require('../useSendbirdStateContext.js');
+require('../withSendbird.js');
+require('../_rollupPluginBabelHelpers-3c8c757e.js');
+require('react-dom');
+require('./SortByRow.js');
+require('../index-482bbe89.js');
+require('../utils/message/getOutgoingMessageState.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function UserListItem(_a) {
+  var user = _a.user,
+      className = _a.className,
+      checked = _a.checked,
+      checkBox = _a.checkBox,
+      isOperator = _a.isOperator,
+      disabled = _a.disabled,
+      disableMessaging = _a.disableMessaging,
+      currentUser = _a.currentUser,
+      action = _a.action,
+      onChange = _a.onChange;
+  var uniqueKey = user.userId;
+  var actionRef = React__default["default"].useRef(null);
+  var parentRef = React__default["default"].useRef(null);
+  var avatarRef = React__default["default"].useRef(null);
+
+  var _b = React.useContext(UserProfileContext.UserProfileContext),
+      disableUserProfile = _b.disableUserProfile,
+      renderUserProfile = _b.renderUserProfile;
+
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-user-list-item'], false).join(' '),
+    ref: parentRef
+  }, (user === null || user === void 0 ? void 0 : user.isMuted) && /*#__PURE__*/React__default["default"].createElement(ui_MutedAvatarOverlay, {
+    height: 40,
+    width: 40
+  }), /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: function (toggleDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+        className: "sendbird-user-list-item__avatar",
+        ref: avatarRef,
+        src: user.profileUrl,
+        width: "40px",
+        height: "40px",
+        onClick: function () {
+          if (!disableUserProfile) {
+            toggleDropdown();
+          }
+        }
+      });
+    },
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+        openLeft: true,
+        parentRef: avatarRef // for catching location(x, y) of MenuItems
+        ,
+        parentContainRef: avatarRef // for toggling more options(menus & reactions)
+        ,
+        closeDropdown: closeDropdown,
+        style: {
+          paddingTop: '0px',
+          paddingBottom: '0px'
+        }
+      }, renderUserProfile ? renderUserProfile({
+        user: user,
+        currentUserId: currentUser,
+        close: closeDropdown
+      }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
+        disableMessaging: disableMessaging,
+        user: user,
+        currentUserId: currentUser,
+        onSuccess: closeDropdown
+      }));
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-user-list-item__title",
+    type: ui_Label.LabelTypography.SUBTITLE_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, user.nickname || stringSet.NO_NAME, currentUser === user.userId && ' (You)'), // if there is now nickname, display userId
+  !user.nickname && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-user-list-item__subtitle",
+    type: ui_Label.LabelTypography.CAPTION_3,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, user.userId), checkBox && /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "sendbird-user-list-item__checkbox",
+    htmlFor: uniqueKey
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Checkbox, {
+    id: uniqueKey,
+    checked: checked,
+    disabled: disabled,
+    onChange: function (event) {
+      return onChange(event);
+    }
+  })), isOperator && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: ["sendbird-user-list-item__operator", checkBox ? "checkbox" : ""].join(' '),
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, "Operator"), action && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-user-list-item__action",
+    ref: actionRef
+  }, action({
+    actionRef: actionRef,
+    parentRef: parentRef
+  })));
+}
+
+module.exports = UserListItem;
+//# sourceMappingURL=UserListItem.js.map

package/cjs/ui/UserProfile.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('../LocalizationContext-53fd4ae9.js');
+var UserProfileContext = require('../UserProfileContext-c7d6be85.js');
+var sendbirdSelectors = require('../sendbirdSelectors.js');
+var ui_Avatar = require('./Avatar.js');
+var ui_Label = require('../index-db48f031.js');
+var ui_Button = require('./Button.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+require('../stringSet-42fa6280.js');
+require('../index-7c018421.js');
+require('prop-types');
+require('../topics-bc8e923e.js');
+require('../utils-09e1cb5d.js');
+require('../tslib.es6-5163dacf.js');
+require('./ImageRenderer.js');
+require('./Icon.js');
+require('../uuid-e879709a.js');
+require('../withSendbird.js');
+require('../_rollupPluginBabelHelpers-3c8c757e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function UserProfile(_a) {
+  var _b, _c;
+
+  var user = _a.user,
+      currentUserId = _a.currentUserId,
+      _d = _a.disableMessaging,
+      disableMessaging = _d === void 0 ? false : _d,
+      onSuccess = _a.onSuccess;
+  var store = useSendbirdStateContext();
+  var createChannel = sendbirdSelectors.getCreateGroupChannel(store);
+  var logger = (_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.logger;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  var currentUserId_ = currentUserId || ((_c = store === null || store === void 0 ? void 0 : store.config) === null || _c === void 0 ? void 0 : _c.userId); // @ts-ignore
+
+  var onUserProfileMessage = React.useContext(UserProfileContext.UserProfileContext).onUserProfileMessage;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird__user-profile"
+  }, /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird__user-profile-avatar"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    height: "80px",
+    width: "80px",
+    src: user === null || user === void 0 ? void 0 : user.profileUrl
+  })), /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird__user-profile-name"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.H_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, (user === null || user === void 0 ? void 0 : user.nickname) || stringSet.NO_NAME)), (user === null || user === void 0 ? void 0 : user.userId) !== currentUserId_ && !disableMessaging && /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird__user-profile-message"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Button["default"], {
+    type: ui_Button.ButtonTypes.SECONDARY,
+    onClick: function () {
+      // Create 1:1 channel
+      var params = {
+        isDistinct: false,
+        invitedUserIds: [user === null || user === void 0 ? void 0 : user.userId],
+        operatorUserIds: [currentUserId_]
+      };
+      onSuccess();
+      createChannel(params).then(function (groupChannel) {
+        logger.info('UserProfile, channel create', groupChannel);
+
+        if (typeof onUserProfileMessage === 'function') {
+          onUserProfileMessage === null || onUserProfileMessage === void 0 ? void 0 : onUserProfileMessage(groupChannel);
+        }
+      });
+    }
+  }, stringSet.USER_PROFILE__MESSAGE)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird__user-profile-separator"
+  }), /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird__user-profile-userId"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird__user-profile-userId--label",
+    type: ui_Label.LabelTypography.CAPTION_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.USER_PROFILE__USER_ID), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird__user-profile-userId--value",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, user === null || user === void 0 ? void 0 : user.userId)));
+}
+
+module.exports = UserProfile;
+//# sourceMappingURL=UserProfile.js.map

package/cjs/ui/VoiceMessageItemBody.js

@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ui_ProgressBar = require('./ProgressBar.js');
+var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
+var ui_PlaybackTime = require('./PlaybackTime.js');
+var ui_Loader = require('./Loader.js');
+var ui_Icon = require('./Icon.js');
+var ui_Label = require('../index-db48f031.js');
+var VoicePlayer_context = require('../index-178229c9.js');
+require('../consts-b08b4ca6.js');
+require('../VoiceRecorder/context.js');
+require('../lame.all.js');
+require('../tslib.es6-5163dacf.js');
+require('prop-types');
+require('../stringSet-42fa6280.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var VoiceMessageItemBody = function (_a) {
+  var _b;
+
+  var className = _a.className,
+      message = _a.message,
+      channelUrl = _a.channelUrl,
+      _c = _a.isByMe,
+      isByMe = _c === void 0 ? false : _c,
+      _d = _a.isReactionEnabled,
+      isReactionEnabled = _d === void 0 ? false : _d;
+
+  var _e = React.useState(false),
+      usingReaction = _e[0],
+      setUsingReaction = _e[1];
+
+  var _f = VoicePlayer_useVoicePlayer.useVoicePlayer({
+    channelUrl: channelUrl,
+    key: "".concat(message === null || message === void 0 ? void 0 : message.messageId),
+    audioFileUrl: message === null || message === void 0 ? void 0 : message.url
+  }),
+      play = _f.play,
+      pause = _f.pause,
+      _g = _f.playbackTime,
+      playbackTime = _g === void 0 ? 0 : _g,
+      duration = _f.duration,
+      _h = _f.playingStatus,
+      playingStatus = _h === void 0 ? VoicePlayer_context.VoicePlayerStatus.IDLE : _h;
+
+  React.useEffect(function () {
+    var _a;
+
+    if (isReactionEnabled && ((_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      setUsingReaction(true);
+    } else {
+      setUsingReaction(false);
+    }
+  }, [isReactionEnabled, (_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length]);
+  var progresBarMaxSize = React.useMemo(function () {
+    var _a;
+
+    if (message === null || message === void 0 ? void 0 : message.metaArrays) {
+      var duration_1 = (_a = message === null || message === void 0 ? void 0 : message.metaArrays.find(function (metaArray) {
+        return metaArray.key === 'KEY_VOICE_MESSAGE_DURATION';
+      })) === null || _a === void 0 ? void 0 : _a.value[0];
+      return duration_1 && parseInt(duration_1);
+    }
+
+    return 1;
+  }, [message === null || message === void 0 ? void 0 : message.metaArrays]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body ".concat(className, " ").concat(usingReaction ? 'is-reactions-contained' : '')
+  }, /*#__PURE__*/React__default["default"].createElement(ui_ProgressBar.ProgressBar, {
+    className: "sendbird-voice-message-item-body__progress-bar",
+    maxSize: duration || progresBarMaxSize,
+    currentSize: playbackTime,
+    colorType: isByMe ? ui_ProgressBar.ProgressBarColorTypes.PRIMARY : ui_ProgressBar.ProgressBarColorTypes.GRAY
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button"
+  }, (playingStatus === VoicePlayer_context.VoicePlayerStatus.IDLE || playingStatus === VoicePlayer_context.VoicePlayerStatus.PAUSED) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button",
+    onClick: play
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    width: "18px",
+    height: "18px",
+    type: ui_Icon.IconTypes.PLAY,
+    fillColor: ui_Icon.IconColors.PRIMARY
+  })), playingStatus === VoicePlayer_context.VoicePlayerStatus.PREPARING && /*#__PURE__*/React__default["default"].createElement(ui_Loader, {
+    width: "22.2px",
+    height: "22.2px"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    width: "22.2px",
+    height: "22.2px",
+    type: ui_Icon.IconTypes.SPINNER,
+    fillColor: ui_Icon.IconColors.PRIMARY_2
+  })), playingStatus === VoicePlayer_context.VoicePlayerStatus.PLAYING && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button",
+    onClick: function () {
+      pause();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button__pause"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
+  })))), /*#__PURE__*/React__default["default"].createElement(ui_PlaybackTime.PlaybackTime, {
+    className: "sendbird-voice-message-item-body__playback-time",
+    time: progresBarMaxSize - playbackTime,
+    labelType: ui_Label.LabelTypography.BODY_1,
+    labelColor: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
+  }));
+};
+
+exports.VoiceMessageItemBody = VoiceMessageItemBody;
+exports["default"] = VoiceMessageItemBody;
+//# sourceMappingURL=VoiceMessageItemBody.js.map

package/cjs/ui/VoiceMessgeInput.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('./PlaybackTime.js');
+require('./ProgressBar.js');
+require('./TextButton.js');
+require('./Icon.js');
+require('../index-db48f031.js');
+require('../LocalizationContext-53fd4ae9.js');
+var ui_VoiceMessgeInput = require('../index-e42edbd5.js');
+require('../consts-b08b4ca6.js');
+require('prop-types');
+require('../stringSet-42fa6280.js');
+require('../tslib.es6-5163dacf.js');
+require('../color-578986d2.js');
+require('../index-7c018421.js');
+
+
+
+exports.VoiceMessageInput = ui_VoiceMessgeInput.VoiceMessageInput;
+//# sourceMappingURL=VoiceMessgeInput.js.map