@sendbird/uikit-react-native 3.1.2 → 3.3.0

package/lib/module/components/ChannelInput/MessageToReplyPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","TouchableOpacity","View","Icon","ImageWithPlaceholder","Text","VideoThumbnail","createStyleSheet","useUIKitTheme","getFileIconFromMessageType","getMessageType","getThumbnailUriFromFileMessage","useLocalization","usePlatformService","MessageToReplyPreview","_ref","messageToReply","setMessageToReply","colors","select","palette","mediaService","STRINGS","getFileIconAsImage","url","createElement","source","uri","style","styles","previewImage","getFileIconAsVideoThumbnail","iconSize","fetchThumbnailFromVideoSource","getVideoThumbnail","timeMills","getFileIconAsSymbol","icon","size","color","onBackground02","containerStyle","fileIcon","backgroundColor","light","background100","dark","background500","getFileIcon","isFileMessage","messageType","messageToReplyContainer","borderColor","onBackground04","flex","flexDirection","numberOfLines","fontSize","fontWeight","marginBottom","LABELS","CHANNEL_INPUT_REPLY_PREVIEW_TITLE","sender","onBackground03","CHANNEL_INPUT_REPLY_PREVIEW_BODY","onPress","undefined","onBackground01","closeIcon","width","height","borderRadius","marginTop","marginRight","overflow","paddingLeft","paddingRight","paddingTop","paddingBottom","alignItems","borderTopWidth","marginLeft","padding"],"sources":["MessageToReplyPreview.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport {\n  Icon,\n  ImageWithPlaceholder,\n  Text,\n  VideoThumbnail,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport {\n  FileIcon,\n  SendbirdBaseMessage,\n  SendbirdFileMessage,\n  SendbirdUserMessage,\n  getFileIconFromMessageType,\n  getMessageType,\n  getThumbnailUriFromFileMessage,\n} from '@sendbird/uikit-utils';\n\nimport { useLocalization, usePlatformService } from '../../hooks/useContext';\n\nexport type MessageToReplyPreviewProps = {\n  messageToReply?: SendbirdFileMessage | SendbirdUserMessage;\n  setMessageToReply?: (message?: undefined | SendbirdFileMessage | SendbirdUserMessage) => void;\n};\n\nexport const MessageToReplyPreview = ({ messageToReply, setMessageToReply }: MessageToReplyPreviewProps) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { mediaService } = usePlatformService();\n  const { STRINGS } = useLocalization();\n\n  const getFileIconAsImage = (url: string) => {\n    return <ImageWithPlaceholder source={{ uri: url }} style={styles.previewImage} />;\n  };\n\n  const getFileIconAsVideoThumbnail = (url: string) => {\n    return (\n      <VideoThumbnail\n        style={styles.previewImage}\n        iconSize={0}\n        source={url}\n        fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}\n      />\n    );\n  };\n\n  const getFileIconAsSymbol = (icon: FileIcon) => {\n    return (\n      <Icon\n        icon={icon}\n        size={20}\n        color={colors.onBackground02}\n        containerStyle={[\n          styles.fileIcon,\n          {\n            backgroundColor: select({ light: palette.background100, dark: palette.background500 }),\n          },\n        ]}\n      />\n    );\n  };\n\n  const getFileIcon = (messageToReply: SendbirdBaseMessage) => {\n    if (messageToReply?.isFileMessage()) {\n      const messageType = getMessageType(messageToReply);\n      switch (messageType) {\n        case 'file.image':\n          return getFileIconAsImage(getThumbnailUriFromFileMessage(messageToReply));\n        case 'file.video':\n          return getFileIconAsVideoThumbnail(getThumbnailUriFromFileMessage(messageToReply));\n        case 'file.voice':\n          return null;\n        default:\n          return getFileIconAsSymbol(getFileIconFromMessageType(messageType));\n      }\n    }\n    return null;\n  };\n\n  if (!messageToReply) return null;\n\n  return (\n    <View style={[styles.messageToReplyContainer, { borderColor: colors.onBackground04 }]}>\n      <View style={{ flex: 1, flexDirection: 'row' }}>\n        {getFileIcon(messageToReply)}\n        <View style={{ flex: 1, flexDirection: 'column' }}>\n          <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '900', marginBottom: 4 }}>\n            {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_TITLE(messageToReply.sender)}\n          </Text>\n          <Text numberOfLines={1} style={{ fontSize: 13, color: colors.onBackground03 }}>\n            {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_BODY(messageToReply)}\n          </Text>\n        </View>\n      </View>\n      <TouchableOpacity onPress={() => setMessageToReply?.(undefined)}>\n        <Icon icon={'close'} size={24} color={colors.onBackground01} containerStyle={styles.closeIcon} />\n      </TouchableOpacity>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  previewImage: {\n    width: 36,\n    height: 36,\n    borderRadius: 10,\n    marginTop: 2,\n    marginRight: 10,\n    overflow: 'hidden',\n  },\n  messageToReplyContainer: {\n    flexDirection: 'row',\n    paddingLeft: 18,\n    paddingRight: 16,\n    paddingTop: 10,\n    paddingBottom: 8,\n    alignItems: 'center',\n    borderTopWidth: 1,\n  },\n  fileIcon: {\n    width: 36,\n    height: 36,\n    borderRadius: 10,\n    marginRight: 10,\n    marginTop: 2,\n  },\n  closeIcon: {\n    marginLeft: 4,\n    padding: 4,\n  },\n});\n"],"mappings":"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"}

package/lib/module/components/ChannelInput/SendInput.js

@@ -1,13 +1,17 @@
 import React, { forwardRef } from 'react';
-import { Platform, TouchableOpacity, View } from 'react-native';
-import { MentionType } from '@sendbird/chat/message';
-import { Icon, ImageWithPlaceholder, Text, TextInput, VideoThumbnail, createStyleSheet, useAlert, useBottomSheet, useToast, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { Logger, getFileIconFromMessageType, getMessageType, getThumbnailUriFromFileMessage, isImage, shouldCompressImage, useIIFE } from '@sendbird/uikit-utils';
+import { TouchableOpacity, View } from 'react-native';
+import { MentionType, MessageMetaArray } from '@sendbird/chat/message';
+import { Icon, Modal, TextInput, createStyleSheet, useAlert, useBottomSheet, useToast, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { Logger, useDeferredModalState, useIIFE } from '@sendbird/uikit-utils';
+import { VOICE_MESSAGE_META_ARRAY_DURATION_KEY, VOICE_MESSAGE_META_ARRAY_MESSAGE_TYPE_KEY } from '../../constants';
+import { useChannelInputItems } from '../../hooks/useChannelInputItems';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
-import SBUError from '../../libs/SBUError';
 import SBUUtils from '../../libs/SBUUtils';
 const SendInput = /*#__PURE__*/forwardRef(function SendInput(_ref, ref) {
   let {
+    style,
+    VoiceMessageInput,
+    MessageToReplyPreview,
     AttachmentsButton,
     onPressSendUserMessage,
     onPressSendFileMessage,
@@ -22,15 +26,14 @@ const SendInput = /*#__PURE__*/forwardRef(function SendInput(_ref, ref) {
     messageToReply,
     setMessageToReply
   } = _ref;
+  const {
+    playerService,
+    recorderService
+  } = usePlatformService();
   const {
     mentionManager,
     sbOptions
   } = useSendbirdChat();
-  const {
-    select,
-    colors,
-    palette
-  } = useUIKitTheme();
   const {
     STRINGS
   } = useLocalization();
@@ -39,8 +42,11 @@ const SendInput = /*#__PURE__*/forwardRef(function SendInput(_ref, ref) {
   } = useBottomSheet();
   const toast = useToast();
   const {
-    mediaService
-  } = usePlatformService();
+    onClose,
+    onDismiss,
+    visible: voiceMessageInputVisible,
+    setVisible: setVoiceMessageInputVisible
+  } = useDeferredModalState();
   const messageReplyParams = useIIFE(() => {
     const {
       groupChannel
@@ -82,10 +88,30 @@ const SendInput = /*#__PURE__*/forwardRef(function SendInput(_ref, ref) {
     }).catch(onFailureToSend);
     setMessageToReply === null || setMessageToReply === void 0 ? void 0 : setMessageToReply();
   };
+  const sendVoiceMessage = (file, durationMills) => {
+    if (inputMuted) {
+      toast.show(STRINGS.TOAST.USER_MUTED_ERROR, 'error');
+      Logger.error(STRINGS.TOAST.USER_MUTED_ERROR);
+    } else if (inputFrozen) {
+      toast.show(STRINGS.TOAST.CHANNEL_FROZEN_ERROR, 'error');
+      Logger.error(STRINGS.TOAST.CHANNEL_FROZEN_ERROR);
+    } else {
+      onPressSendFileMessage({
+        file,
+        metaArrays: [new MessageMetaArray({
+          key: VOICE_MESSAGE_META_ARRAY_DURATION_KEY,
+          value: [String(durationMills)]
+        }), new MessageMetaArray({
+          key: VOICE_MESSAGE_META_ARRAY_MESSAGE_TYPE_KEY,
+          value: [`voice/${recorderService.options.extension}`]
+        })],
+        ...messageReplyParams
+      }).catch(onFailureToSend);
+    }
+    onChangeText('');
+    setMessageToReply === null || setMessageToReply === void 0 ? void 0 : setMessageToReply();
+  };
   const sheetItems = useChannelInputItems(channel, sendFileMessage);
-  const onPressAttachment = () => openSheet({
-    sheetItems
-  });
   const getPlaceholder = () => {
     if (inputMuted) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_MUTED;
     if (inputFrozen) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
@@ -93,102 +119,17 @@ const SendInput = /*#__PURE__*/forwardRef(function SendInput(_ref, ref) {
     if (messageToReply) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY;
     return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
   };
-  const getFileIconAsImage = url => {
-    return /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
-      source: {
-        uri: url
-      },
-      style: styles.previewImage
-    });
-  };
-  const getFileIconAsVideoThumbnail = url => {
-    return /*#__PURE__*/React.createElement(VideoThumbnail, {
-      style: styles.previewImage,
-      iconSize: 0,
-      source: url,
-      fetchThumbnailFromVideoSource: uri => mediaService.getVideoThumbnail({
-        url: uri,
-        timeMills: 1000
-      })
-    });
-  };
-  const getFileIconAsSymbol = icon => {
-    return /*#__PURE__*/React.createElement(Icon, {
-      icon: icon,
-      size: 20,
-      color: colors.onBackground02,
-      containerStyle: {
-        backgroundColor: select({
-          light: palette.background100,
-          dark: palette.background500
-        }),
-        width: 36,
-        height: 36,
-        borderRadius: 10,
-        marginRight: 10,
-        marginTop: 2
-      }
-    });
-  };
-  const getFileIcon = messageToReply => {
-    if (messageToReply !== null && messageToReply !== void 0 && messageToReply.isFileMessage()) {
-      const messageType = getMessageType(messageToReply);
-      switch (messageType) {
-        case 'file.image':
-          return getFileIconAsImage(getThumbnailUriFromFileMessage(messageToReply));
-        case 'file.video':
-          return getFileIconAsVideoThumbnail(getThumbnailUriFromFileMessage(messageToReply));
-        default:
-          return getFileIconAsSymbol(getFileIconFromMessageType(messageType));
-      }
-    }
-    return null;
-  };
-  return /*#__PURE__*/React.createElement(View, null, messageToReply && /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: 'row',
-      paddingLeft: 18,
-      paddingRight: 16,
-      paddingTop: 10,
-      paddingBottom: 8,
-      alignItems: 'center',
-      borderTopWidth: 1,
-      borderColor: colors.onBackground04
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      flexDirection: 'row'
-    }
-  }, getFileIcon(messageToReply), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    numberOfLines: 1,
-    style: {
-      fontSize: 13,
-      fontWeight: '900',
-      marginBottom: 4
-    }
-  }, STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_TITLE(messageToReply.sender)), /*#__PURE__*/React.createElement(Text, {
-    numberOfLines: 1,
-    style: {
-      fontSize: 13,
-      color: colors.onBackground03
-    }
-  }, STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_BODY(messageToReply)))), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: () => setMessageToReply === null || setMessageToReply === void 0 ? void 0 : setMessageToReply(undefined)
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: 'close',
-    size: 24,
-    color: colors.onBackground01,
-    containerStyle: styles.iconSend
-  }))), /*#__PURE__*/React.createElement(View, {
+  const voiceMessageEnabled = channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.enableVoiceMessage;
+  const sendButtonVisible = Boolean(text.trim());
+  return /*#__PURE__*/React.createElement(View, null, MessageToReplyPreview && /*#__PURE__*/React.createElement(MessageToReplyPreview, {
+    messageToReply: messageToReply,
+    setMessageToReply: setMessageToReply
+  }), /*#__PURE__*/React.createElement(View, {
     style: styles.sendInputContainer
   }, AttachmentsButton && /*#__PURE__*/React.createElement(AttachmentsButton, {
-    onPress: onPressAttachment,
+    onPress: () => openSheet({
+      sheetItems
+    }),
     disabled: inputDisabled
   }), /*#__PURE__*/React.createElement(TextInput, {
     ref: ref,
@@ -197,214 +138,117 @@ const SendInput = /*#__PURE__*/forwardRef(function SendInput(_ref, ref) {
     onSelectionChange: onSelectionChange,
     editable: !inputDisabled,
     onChangeText: onChangeText,
-    style: styles.input,
+    style: style,
     placeholder: getPlaceholder()
-  }, mentionManager.textToMentionedComponents(text, mentionedUsers, sbOptions.uikit.groupChannel.channel.enableMention)), Boolean(text.trim()) && /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: sendUserMessage,
-    disabled: inputDisabled
-  }, /*#__PURE__*/React.createElement(Icon, {
-    color: inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight,
-    icon: 'send',
-    size: 24,
-    containerStyle: styles.iconSend
+  }, mentionManager.textToMentionedComponents(text, mentionedUsers, sbOptions.uikit.groupChannel.channel.enableMention)), voiceMessageEnabled && /*#__PURE__*/React.createElement(VoiceMessageButton, {
+    visible: !sendButtonVisible,
+    disabled: inputDisabled,
+    onPress: () => setVoiceMessageInputVisible(true)
+  }), /*#__PURE__*/React.createElement(UserMessageSendButton, {
+    visible: sendButtonVisible,
+    disabled: inputDisabled,
+    onPress: sendUserMessage
+  }), voiceMessageEnabled && VoiceMessageInput && /*#__PURE__*/React.createElement(Modal, {
+    disableBackgroundClose: true,
+    onClose: onClose,
+    onDismiss: () => {
+      onDismiss();
+      Promise.allSettled([playerService.reset(), recorderService.reset()]);
+    },
+    backgroundStyle: {
+      justifyContent: 'flex-end'
+    },
+    visible: voiceMessageInputVisible,
+    type: 'slide-no-gesture'
+  }, /*#__PURE__*/React.createElement(VoiceMessageInput, {
+    onClose: onClose,
+    onSend: _ref2 => {
+      let {
+        file,
+        duration
+      } = _ref2;
+      return sendVoiceMessage(file, duration);
+    }
   }))));
 });
-const useChannelInputItems = (channel, sendFileMessage) => {
-  const {
-    sbOptions,
-    imageCompressionConfig
-  } = useSendbirdChat();
+const VoiceMessageButton = _ref3 => {
+  let {
+    visible,
+    disabled,
+    onPress
+  } = _ref3;
   const {
     STRINGS
   } = useLocalization();
-  const {
-    fileService,
-    mediaService
-  } = usePlatformService();
   const {
     alert
   } = useAlert();
-  const toast = useToast();
-  const sheetItems = [];
-  const input = useIIFE(() => {
-    switch (true) {
-      case channel.isOpenChannel():
-        return sbOptions.uikit.openChannel.channel.input;
-      case channel.isGroupChannel():
-        return sbOptions.uikit.groupChannel.channel.input;
-      default:
-        return {
-          enableDocument: true,
-          camera: {
-            enablePhoto: true,
-            enableVideo: true
-          },
-          gallery: {
-            enablePhoto: true,
-            enableVideo: true
-          }
-        };
+  const {
+    playerService,
+    recorderService
+  } = usePlatformService();
+  const {
+    colors
+  } = useUIKitTheme();
+  if (!visible) return null;
+  const onPressWithPermissionCheck = async () => {
+    const recorderGranted = await recorderService.requestPermission();
+    if (!recorderGranted) {
+      alert({
+        title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+        message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(STRINGS.LABELS.PERMISSION_MICROPHONE, STRINGS.LABELS.PERMISSION_APP_NAME),
+        buttons: [{
+          text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK,
+          onPress: () => SBUUtils.openSettings()
+        }]
+      });
+      Logger.error('Failed to request permission for recorder');
+      return;
     }
-  });
-  if (input.camera.enablePhoto) {
-    sheetItems.push({
-      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA_PHOTO,
-      icon: 'camera',
-      onPress: async () => {
-        const mediaFile = await fileService.openCamera({
-          mediaType: 'photo',
-          onOpenFailure: error => {
-            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
-              alert({
-                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(STRINGS.LABELS.PERMISSION_CAMERA, STRINGS.LABELS.PERMISSION_APP_NAME),
-                buttons: [{
-                  text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK,
-                  onPress: () => SBUUtils.openSettings()
-                }]
-              });
-            } else {
-              toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
-            }
-          }
-        });
-        if (mediaFile) {
-          // Image compression
-          if (isImage(mediaFile.uri, mediaFile.type) && shouldCompressImage(mediaFile.type, sbOptions.chat.imageCompressionEnabled)) {
-            await SBUUtils.safeRun(async () => {
-              const compressed = await mediaService.compressImage({
-                uri: mediaFile.uri,
-                maxWidth: imageCompressionConfig.width,
-                maxHeight: imageCompressionConfig.height,
-                compressionRate: imageCompressionConfig.compressionRate
-              });
-              if (compressed) {
-                mediaFile.uri = compressed.uri;
-                mediaFile.size = compressed.size;
-              }
-            });
-          }
-          sendFileMessage(mediaFile);
-        }
-      }
-    });
-  }
-  if (input.camera.enableVideo) {
-    sheetItems.push({
-      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA_VIDEO,
-      icon: 'camera',
-      onPress: async () => {
-        const mediaFile = await fileService.openCamera({
-          mediaType: 'video',
-          onOpenFailure: error => {
-            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
-              alert({
-                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(STRINGS.LABELS.PERMISSION_CAMERA, STRINGS.LABELS.PERMISSION_APP_NAME),
-                buttons: [{
-                  text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK,
-                  onPress: () => SBUUtils.openSettings()
-                }]
-              });
-            } else {
-              toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
-            }
-          }
-        });
-        if (mediaFile) {
-          sendFileMessage(mediaFile);
-        }
-      }
-    });
-  }
-  if (input.gallery.enablePhoto || input.gallery.enableVideo) {
-    const mediaType = (() => {
-      switch (true) {
-        case input.gallery.enablePhoto && input.gallery.enableVideo:
-          return 'all';
-        case input.gallery.enablePhoto && !input.gallery.enableVideo:
-          return 'photo';
-        case !input.gallery.enablePhoto && input.gallery.enableVideo:
-          return 'video';
-        default:
-          return 'all';
-      }
-    })();
-    sheetItems.push({
-      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY,
-      icon: 'photo',
-      onPress: async () => {
-        const mediaFiles = await fileService.openMediaLibrary({
-          selectionLimit: 1,
-          mediaType,
-          onOpenFailure: error => {
-            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
-              alert({
-                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(STRINGS.LABELS.PERMISSION_DEVICE_STORAGE, STRINGS.LABELS.PERMISSION_APP_NAME),
-                buttons: [{
-                  text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK,
-                  onPress: () => SBUUtils.openSettings()
-                }]
-              });
-            } else {
-              toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
-            }
-          }
-        });
-        if (mediaFiles && mediaFiles[0]) {
-          const mediaFile = mediaFiles[0];
-
-          // Image compression
-          if (isImage(mediaFile.uri, mediaFile.type) && shouldCompressImage(mediaFile.type, sbOptions.chat.imageCompressionEnabled)) {
-            await SBUUtils.safeRun(async () => {
-              const compressed = await mediaService.compressImage({
-                uri: mediaFile.uri,
-                maxWidth: imageCompressionConfig.width,
-                maxHeight: imageCompressionConfig.height,
-                compressionRate: imageCompressionConfig.compressionRate
-              });
-              if (compressed) {
-                mediaFile.uri = compressed.uri;
-                mediaFile.size = compressed.size;
-              }
-            });
-          }
-          sendFileMessage(mediaFile);
-        }
-      }
-    });
-  }
-  if (input.enableDocument) {
-    sheetItems.push({
-      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_FILES,
-      icon: 'document',
-      onPress: async () => {
-        const documentFile = await fileService.openDocument({
-          onOpenFailure: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error')
-        });
-        if (documentFile) {
-          // Image compression
-          if (isImage(documentFile.uri, documentFile.type) && shouldCompressImage(documentFile.type, sbOptions.chat.imageCompressionEnabled)) {
-            await SBUUtils.safeRun(async () => {
-              const compressed = await mediaService.compressImage({
-                uri: documentFile.uri,
-                maxWidth: imageCompressionConfig.width,
-                maxHeight: imageCompressionConfig.height,
-                compressionRate: imageCompressionConfig.compressionRate
-              });
-              if (compressed) {
-                documentFile.uri = compressed.uri;
-                documentFile.size = compressed.size;
-              }
-            });
-          }
-          sendFileMessage(documentFile);
-        }
-      }
-    });
-  }
-  return sheetItems;
+    const playerGranted = await playerService.requestPermission();
+    if (!playerGranted) {
+      alert({
+        title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+        message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(STRINGS.LABELS.PERMISSION_DEVICE_STORAGE, STRINGS.LABELS.PERMISSION_APP_NAME),
+        buttons: [{
+          text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK,
+          onPress: () => SBUUtils.openSettings()
+        }]
+      });
+      Logger.error('Failed to request permission for player');
+      return;
+    }
+    onPress();
+  };
+  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: onPressWithPermissionCheck,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight,
+    icon: 'audio-on',
+    size: 24,
+    containerStyle: styles.sendIcon
+  }));
+};
+const UserMessageSendButton = _ref4 => {
+  let {
+    visible,
+    disabled,
+    onPress
+  } = _ref4;
+  const {
+    colors
+  } = useUIKitTheme();
+  if (!visible) return null;
+  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: onPress,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight,
+    icon: 'send',
+    size: 24,
+    containerStyle: styles.sendIcon
+  }));
 };
 const styles = createStyleSheet({
   sendInputContainer: {
@@ -413,27 +257,9 @@ const styles = createStyleSheet({
     alignItems: 'center',
     flexDirection: 'row'
   },
-  input: {
-    flex: 1,
-    marginRight: 4,
-    minHeight: 36,
-    maxHeight: 36 * Platform.select({
-      ios: 2.5,
-      default: 2
-    }),
-    borderRadius: 20
-  },
-  iconSend: {
+  sendIcon: {
     marginLeft: 4,
     padding: 4
-  },
-  previewImage: {
-    width: 36,
-    height: 36,
-    borderRadius: 10,
-    marginTop: 2,
-    marginRight: 10,
-    overflow: 'hidden'
   }
 });
 export default SendInput;