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

package/dist/ui/ThreadReplies.js

@@ -0,0 +1,76 @@
+import React__default from 'react';
+import Avatar from './Avatar.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-8ff79952.js';
+import { u as useLocalization } from '../LocalizationContext-948efac4.js';
+import { u as uuidv4 } from '../uuid-d8fc0ef1.js';
+import '../tslib.es6-96c33448.js';
+import './ImageRenderer.js';
+import 'prop-types';
+import '../stringSet-fbd7c37c.js';
+import '../index-5c8b0523.js';
+
+function ThreadReplies(_a) {
+  var _b;
+
+  var className = _a.className,
+      threadInfo = _a.threadInfo,
+      onClick = _a.onClick;
+  var _c = threadInfo.mostRepliedUsers,
+      mostRepliedUsers = _c === void 0 ? [] : _c,
+      replyCount = threadInfo.replyCount;
+  var stringSet = useLocalization().stringSet;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-ui-thread-replies ".concat(className),
+    role: "button",
+    onClick: function (e) {
+      onClick(e);
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+    },
+    onKeyDown: function (e) {
+      onClick(e);
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-ui-thread-replies__user-profiles"
+  }, mostRepliedUsers.slice(0, 4).map(function (user) {
+    return /*#__PURE__*/React__default.createElement(Avatar, {
+      key: uuidv4(),
+      className: "sendbird-ui-thread-replies__user-profiles__avatar",
+      src: user === null || user === void 0 ? void 0 : user.profileUrl,
+      alt: "user profile",
+      width: "20px",
+      height: "20px"
+    });
+  }), (mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : mostRepliedUsers.length) >= 5 && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-ui-thread-replies__user-profiles__avatar"
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    className: "sendbird-ui-thread-replies__user-profiles__avatar__image",
+    src: (_b = mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : mostRepliedUsers[4]) === null || _b === void 0 ? void 0 : _b.profileUrl,
+    alt: "user profile",
+    width: "20px",
+    height: "20px"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-ui-thread-replies__user-profiles__avatar__cover"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-ui-thread-replies__user-profiles__avatar__plus"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.PLUS,
+    fillColor: IconColors.WHITE,
+    width: "16px",
+    height: "16px"
+  })))), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-ui-thread-replies__reply-counts",
+    type: LabelTypography.CAPTION_2,
+    color: LabelColors.PRIMARY
+  }, replyCount === 1 ? "".concat(replyCount, " ").concat(stringSet.CHANNEL__THREAD_REPLY) : "".concat(replyCount > 99 ? stringSet.CHANNEL__THREAD_OVER_MAX : replyCount, " ").concat(stringSet.CHANNEL__THREAD_REPLIES)), /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-ui-thread-replies__icon",
+    type: IconTypes.CHEVRON_RIGHT,
+    fillColor: IconColors.PRIMARY,
+    width: "16px",
+    height: "16px"
+  }));
+}
+
+export { ThreadReplies as default };
+//# sourceMappingURL=ThreadReplies.js.map

package/dist/ui/ThumbnailMessageItemBody.js

@@ -0,0 +1,80 @@
+import React__default, { useState } from 'react';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import ImageRenderer from './ImageRenderer.js';
+import { j as getClassName, v as isSentMessage, r as isVideoMessage, q as isGifMessage } from '../index-4217213f.js';
+import 'prop-types';
+import '../tslib.es6-96c33448.js';
+import '../utils/message/getOutgoingMessageState.js';
+
+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 = useState(false),
+      imageRendered = _j[0],
+      setImageRendered = _j[1];
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: 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 (isSentMessage(message)) {
+        showFileViewer(true);
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(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.createElement("div", {
+        className: "sendbird-thumbnail-message-item-body__placeholder",
+        style: style_
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "sendbird-thumbnail-message-item-body__placeholder__icon"
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        type: isVideoMessage(message) ? IconTypes.PLAY : IconTypes.PHOTO,
+        fillColor: IconColors.ON_BACKGROUND_2,
+        width: "34px",
+        height: "34px"
+      })));
+    }
+  }), isVideoMessage(message) && !thumbnailUrl && !imageRendered && /*#__PURE__*/React__default.createElement("video", {
+    className: "sendbird-thumbnail-message-item-body__video"
+  }, /*#__PURE__*/React__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.createElement("div", {
+    className: "sendbird-thumbnail-message-item-body__image-cover"
+  }), (isVideoMessage(message) || isGifMessage(message)) && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-thumbnail-message-item-body__icon-wrapper"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-thumbnail-message-item-body__icon-wrapper__icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: isVideoMessage(message) ? IconTypes.PLAY : IconTypes.GIF,
+    fillColor: IconColors.GRAY,
+    width: "34px",
+    height: "34px"
+  }))));
+}
+
+export { ThumbnailMessageItemBody as default };
+//# sourceMappingURL=ThumbnailMessageItemBody.js.map

package/dist/ui/Tooltip.js

@@ -0,0 +1,22 @@
+import { a as __spreadArray } from '../tslib.es6-96c33448.js';
+import React__default from 'react';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-8ff79952.js';
+import 'prop-types';
+import '../stringSet-fbd7c37c.js';
+
+function Tooltip(_a) {
+  var _b = _a.className,
+      className = _b === void 0 ? '' : _b,
+      _c = _a.children,
+      children = _c === void 0 ? '' : _c;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-tooltip'], false).join(' ')
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-tooltip__text",
+    type: LabelTypography.CAPTION_2,
+    color: LabelColors.ONCONTENT_1
+  }, children));
+}
+
+export { Tooltip as default };
+//# sourceMappingURL=Tooltip.js.map

package/dist/ui/TooltipWrapper.js

@@ -0,0 +1,49 @@
+import { a as __spreadArray } from '../tslib.es6-96c33448.js';
+import React__default, { useState, useRef } from '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 = useState(false),
+      showHoverTooltip = _c[0],
+      setShowHoverTooltip = _c[1];
+
+  var childrenRef = useRef(null);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: __spreadArray(__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.createElement("div", {
+    className: "sendbird-tooltip-wrapper__children",
+    ref: childrenRef
+  }, children), showHoverTooltip && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-tooltip-wrapper__hover-tooltip",
+    style: {
+      bottom: "calc(100% + ".concat(SPACE_FROM_TRIGGER, "px)")
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-tooltip-wrapper__hover-tooltip__inner"
+  }, /*#__PURE__*/React__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))));
+}
+
+export { TooltipWrapper as default };
+//# sourceMappingURL=TooltipWrapper.js.map

package/dist/ui/UnknownMessageItemBody.js

@@ -0,0 +1,37 @@
+import React__default, { useContext } from 'react';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-8ff79952.js';
+import { j as getClassName } from '../index-4217213f.js';
+import { a as LocalizationContext } from '../LocalizationContext-948efac4.js';
+import 'prop-types';
+import '../stringSet-fbd7c37c.js';
+import '../tslib.es6-96c33448.js';
+import '../utils/message/getOutgoingMessageState.js';
+import '../index-5c8b0523.js';
+
+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 = useContext(LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: 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.createElement(Label, {
+    className: "sendbird-unknown-message-item-body__header",
+    type: LabelTypography.BODY_1,
+    color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1
+  }, stringSet.UNKNOWN__UNKNOWN_MESSAGE_TYPE), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-unknown-message-item-body__description",
+    type: LabelTypography.BODY_1,
+    color: isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2
+  }, stringSet.UNKNOWN__CANNOT_READ_MESSAGE));
+}
+
+export { UnknownMessageItemBody as default };
+//# sourceMappingURL=UnknownMessageItemBody.js.map

package/dist/ui/UserListItem.js

@@ -0,0 +1,127 @@
+import { a as __spreadArray } from '../tslib.es6-96c33448.js';
+import React__default, { useContext } from 'react';
+import { a as UserProfileContext } from '../UserProfileContext-74d60d34.js';
+import { a as LocalizationContext } from '../LocalizationContext-948efac4.js';
+import Avatar from './Avatar.js';
+import MutedAvatarOverlay from './MutedAvatarOverlay.js';
+import Checkbox from './Checkbox.js';
+import UserProfile from './UserProfile.js';
+import ContextMenu, { MenuItems } from './ContextMenu.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-8ff79952.js';
+import 'prop-types';
+import '../stringSet-fbd7c37c.js';
+import '../index-5c8b0523.js';
+import './ImageRenderer.js';
+import './Icon.js';
+import '../uuid-d8fc0ef1.js';
+import '../sendbirdSelectors.js';
+import '../topics-d6268256.js';
+import '../utils-273068f6.js';
+import './Button.js';
+import '../useSendbirdStateContext.js';
+import '../withSendbird.js';
+import '../_rollupPluginBabelHelpers-e4ed87a8.js';
+import 'react-dom';
+import './SortByRow.js';
+import '../index-4217213f.js';
+import '../utils/message/getOutgoingMessageState.js';
+
+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.useRef(null);
+  var parentRef = React__default.useRef(null);
+  var avatarRef = React__default.useRef(null);
+
+  var _b = useContext(UserProfileContext),
+      disableUserProfile = _b.disableUserProfile,
+      renderUserProfile = _b.renderUserProfile;
+
+  var stringSet = useContext(LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: __spreadArray(__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.createElement(MutedAvatarOverlay, {
+    height: 40,
+    width: 40
+  }), /*#__PURE__*/React__default.createElement(ContextMenu, {
+    menuTrigger: function (toggleDropdown) {
+      return /*#__PURE__*/React__default.createElement(Avatar, {
+        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.createElement(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.createElement(UserProfile, {
+        disableMessaging: disableMessaging,
+        user: user,
+        currentUserId: currentUser,
+        onSuccess: closeDropdown
+      }));
+    }
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-user-list-item__title",
+    type: LabelTypography.SUBTITLE_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, user.nickname || stringSet.NO_NAME, currentUser === user.userId && ' (You)'), // if there is now nickname, display userId
+  !user.nickname && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-user-list-item__subtitle",
+    type: LabelTypography.CAPTION_3,
+    color: LabelColors.ONBACKGROUND_2
+  }, user.userId), checkBox && /*#__PURE__*/React__default.createElement("label", {
+    className: "sendbird-user-list-item__checkbox",
+    htmlFor: uniqueKey
+  }, /*#__PURE__*/React__default.createElement(Checkbox, {
+    id: uniqueKey,
+    checked: checked,
+    disabled: disabled,
+    onChange: function (event) {
+      return onChange(event);
+    }
+  })), isOperator && /*#__PURE__*/React__default.createElement(Label, {
+    className: ["sendbird-user-list-item__operator", checkBox ? "checkbox" : ""].join(' '),
+    type: LabelTypography.SUBTITLE_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, "Operator"), action && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-user-list-item__action",
+    ref: actionRef
+  }, action({
+    actionRef: actionRef,
+    parentRef: parentRef
+  })));
+}
+
+export { UserListItem as default };
+//# sourceMappingURL=UserListItem.js.map

package/dist/ui/UserProfile.js

@@ -0,0 +1,85 @@
+import React__default, { useContext } from 'react';
+import { a as LocalizationContext } from '../LocalizationContext-948efac4.js';
+import { a as UserProfileContext } from '../UserProfileContext-74d60d34.js';
+import { getCreateGroupChannel } from '../sendbirdSelectors.js';
+import Avatar from './Avatar.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-8ff79952.js';
+import Button, { ButtonTypes } from './Button.js';
+import useSendbirdStateContext from '../useSendbirdStateContext.js';
+import '../stringSet-fbd7c37c.js';
+import '../index-5c8b0523.js';
+import 'prop-types';
+import '../topics-d6268256.js';
+import '../utils-273068f6.js';
+import '../tslib.es6-96c33448.js';
+import './ImageRenderer.js';
+import './Icon.js';
+import '../uuid-d8fc0ef1.js';
+import '../withSendbird.js';
+import '../_rollupPluginBabelHelpers-e4ed87a8.js';
+
+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 = getCreateGroupChannel(store);
+  var logger = (_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.logger;
+  var stringSet = useContext(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 = useContext(UserProfileContext).onUserProfileMessage;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird__user-profile"
+  }, /*#__PURE__*/React__default.createElement("section", {
+    className: "sendbird__user-profile-avatar"
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    height: "80px",
+    width: "80px",
+    src: user === null || user === void 0 ? void 0 : user.profileUrl
+  })), /*#__PURE__*/React__default.createElement("section", {
+    className: "sendbird__user-profile-name"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.H_2,
+    color: 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.createElement("section", {
+    className: "sendbird__user-profile-message"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: 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.createElement("div", {
+    className: "sendbird__user-profile-separator"
+  }), /*#__PURE__*/React__default.createElement("section", {
+    className: "sendbird__user-profile-userId"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird__user-profile-userId--label",
+    type: LabelTypography.CAPTION_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, stringSet.USER_PROFILE__USER_ID), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird__user-profile-userId--value",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, user === null || user === void 0 ? void 0 : user.userId)));
+}
+
+export { UserProfile as default };
+//# sourceMappingURL=UserProfile.js.map

package/dist/ui/VoiceMessageItemBody.js

@@ -0,0 +1,110 @@
+import React__default, { useState, useEffect, useMemo } from 'react';
+import { ProgressBar, ProgressBarColorTypes } from './ProgressBar.js';
+import { useVoicePlayer } from '../VoicePlayer/useVoicePlayer.js';
+import { PlaybackTime } from './PlaybackTime.js';
+import Loader from './Loader.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import { a as LabelTypography, b as LabelColors } from '../index-8ff79952.js';
+import { a as VoicePlayerStatus } from '../index-bb3ccac9.js';
+import '../consts-854f6e5f.js';
+import '../VoiceRecorder/context.js';
+import '../lame.all.js';
+import '../tslib.es6-96c33448.js';
+import 'prop-types';
+import '../stringSet-fbd7c37c.js';
+
+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 = useState(false),
+      usingReaction = _e[0],
+      setUsingReaction = _e[1];
+
+  var _f = 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 ? VoicePlayerStatus.IDLE : _h;
+
+  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 = 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.createElement("div", {
+    className: "sendbird-voice-message-item-body ".concat(className, " ").concat(usingReaction ? 'is-reactions-contained' : '')
+  }, /*#__PURE__*/React__default.createElement(ProgressBar, {
+    className: "sendbird-voice-message-item-body__progress-bar",
+    maxSize: duration || progresBarMaxSize,
+    currentSize: playbackTime,
+    colorType: isByMe ? ProgressBarColorTypes.PRIMARY : ProgressBarColorTypes.GRAY
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button"
+  }, (playingStatus === VoicePlayerStatus.IDLE || playingStatus === VoicePlayerStatus.PAUSED) && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button",
+    onClick: play
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    width: "18px",
+    height: "18px",
+    type: IconTypes.PLAY,
+    fillColor: IconColors.PRIMARY
+  })), playingStatus === VoicePlayerStatus.PREPARING && /*#__PURE__*/React__default.createElement(Loader, {
+    width: "22.2px",
+    height: "22.2px"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    width: "22.2px",
+    height: "22.2px",
+    type: IconTypes.SPINNER,
+    fillColor: IconColors.PRIMARY_2
+  })), playingStatus === VoicePlayerStatus.PLAYING && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button",
+    onClick: function () {
+      pause();
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button__pause"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
+  })))), /*#__PURE__*/React__default.createElement(PlaybackTime, {
+    className: "sendbird-voice-message-item-body__playback-time",
+    time: progresBarMaxSize - playbackTime,
+    labelType: LabelTypography.BODY_1,
+    labelColor: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1
+  }));
+};
+
+export { VoiceMessageItemBody, VoiceMessageItemBody as default };
+//# sourceMappingURL=VoiceMessageItemBody.js.map

package/dist/ui/VoiceMessageItemBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceMessageItemBody.js","sources":["../../src/ui/VoiceMessageItemBody/index.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { FileMessage } from '@sendbird/chat/message';\n\nimport './index.scss';\n\nimport ProgressBar, { ProgressBarColorTypes } from '../ProgressBar';\nimport { useVoicePlayer } from '../../hooks/VoicePlayer/useVoicePlayer';\nimport PlaybackTime from '../PlaybackTime';\nimport Loader from '../Loader';\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport { LabelTypography, LabelColors } from '../Label';\nimport { VoicePlayerStatus } from '../../hooks/VoicePlayer/dux/initialState';\n\nexport interface VoiceMessageItemBodyProps {\n  className?: string;\n  message: FileMessage;\n  channelUrl: string;\n  isByMe?: boolean;\n  isReactionEnabled?: boolean;\n}\n\nexport const VoiceMessageItemBody = ({\n  className,\n  message,\n  channelUrl,\n  isByMe = false,\n  isReactionEnabled = false,\n}: VoiceMessageItemBodyProps): React.ReactElement => {\n  const [usingReaction, setUsingReaction] = useState(false);\n  const {\n    play,\n    pause,\n    playbackTime = 0,\n    duration,\n    playingStatus = VoicePlayerStatus.IDLE,\n  } = useVoicePlayer({\n    channelUrl,\n    key: `${message?.messageId}`,\n    audioFileUrl: message?.url,\n  });\n\n  useEffect(() => {\n    if (isReactionEnabled && message?.reactions?.length > 0) {\n      setUsingReaction(true);\n    } else {\n      setUsingReaction(false);\n    }\n  }, [isReactionEnabled, message?.reactions?.length]);\n  const progresBarMaxSize = useMemo(() => {\n    if (message?.metaArrays) {\n      const duration = message?.metaArrays.find((metaArray) => metaArray.key === 'KEY_VOICE_MESSAGE_DURATION')?.value[0];\n      return duration && parseInt(duration);\n    }\n    return 1;\n  }, [message?.metaArrays]);\n\n  return (\n    <div className={`sendbird-voice-message-item-body ${className} ${usingReaction ? 'is-reactions-contained' : ''}`}>\n      <ProgressBar\n        className=\"sendbird-voice-message-item-body__progress-bar\"\n        maxSize={duration || progresBarMaxSize}\n        currentSize={playbackTime}\n        colorType={isByMe ? ProgressBarColorTypes.PRIMARY : ProgressBarColorTypes.GRAY}\n      />\n      <div className=\"sendbird-voice-message-item-body__status-button\">\n        {(playingStatus === VoicePlayerStatus.IDLE || playingStatus === VoicePlayerStatus.PAUSED) && (\n          <div\n            className=\"sendbird-voice-message-item-body__status-button__button\"\n            onClick={play}\n          >\n            <Icon\n              width=\"18px\"\n              height=\"18px\"\n              type={IconTypes.PLAY}\n              fillColor={IconColors.PRIMARY}\n            />\n          </div>\n        )}\n        {playingStatus === VoicePlayerStatus.PREPARING && (\n          <Loader width=\"22.2px\" height=\"22.2px\">\n            <Icon\n              width=\"22.2px\"\n              height=\"22.2px\"\n              type={IconTypes.SPINNER}\n              fillColor={IconColors.PRIMARY_2}\n            />\n          </Loader>\n        )}\n        {playingStatus === VoicePlayerStatus.PLAYING && (\n          <div\n            className=\"sendbird-voice-message-item-body__status-button__button\"\n            onClick={() => { pause() }}\n          >\n            <div className=\"sendbird-voice-message-item-body__status-button__button__pause\">\n              <div className=\"sendbird-voice-message-item-body__status-button__button__pause__inner\" />\n              <div className=\"sendbird-voice-message-item-body__status-button__button__pause__inner\" />\n            </div>\n          </div>\n        )}\n      </div>\n      <PlaybackTime\n        className=\"sendbird-voice-message-item-body__playback-time\"\n        time={progresBarMaxSize - playbackTime}\n        labelType={LabelTypography.BODY_1}\n        labelColor={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n      />\n    </div>\n  );\n};\n\nexport default VoiceMessageItemBody;\n"],"names":["VoiceMessageItemBody","_a","className","message","channelUrl","_c","isByMe","_d","isReactionEnabled","_e","useState","usingReaction","setUsingReaction","_f","useVoicePlayer","key","messageId","audioFileUrl","url","play","pause","_g","playbackTime","duration","_h","playingStatus","VoicePlayerStatus","IDLE","useEffect","reactions","length","_b","progresBarMaxSize","useMemo","metaArrays","duration_1","find","metaArray","value","parseInt","React","concat","ProgressBarColorTypes","PRIMARY","GRAY","PAUSED","IconTypes","PLAY","IconColors","PREPARING","SPINNER","PRIMARY_2","PLAYING","LabelTypography","BODY_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1"],"mappings":"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"}

package/dist/ui/VoiceMessgeInput.js

@@ -0,0 +1,15 @@
+import 'react';
+import './PlaybackTime.js';
+import './ProgressBar.js';
+import './TextButton.js';
+import './Icon.js';
+import '../index-8ff79952.js';
+import '../LocalizationContext-948efac4.js';
+export { a as VoiceMessageInput } from '../index-3b737aa6.js';
+import '../consts-854f6e5f.js';
+import 'prop-types';
+import '../stringSet-fbd7c37c.js';
+import '../tslib.es6-96c33448.js';
+import '../color-206fa031.js';
+import '../index-5c8b0523.js';
+//# sourceMappingURL=VoiceMessgeInput.js.map

package/dist/ui/VoiceMessgeInput.js.map

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