@sendbird/uikit-react-native 2.1.0 → 2.3.0

package/lib/module/components/FileViewer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","StatusBar","StyleSheet","TouchableOpacity","View","useSafeAreaInsets","Icon","Image","LoadingSpinner","Text","createStyleSheet","useAlert","useHeaderStyle","useToast","useUIKitTheme","Logger","getFileExtension","getFileType","isMyMessage","toMegabyte","truncate","useIIFE","useLocalization","usePlatformService","useSendbirdChat","FileViewer","headerShown","deleteMessage","headerTopInset","fileMessage","onPressDownload","onPressDelete","onClose","loading","setLoading","bottom","currentUser","palette","topInset","statusBarTranslucent","defaultHeight","STRINGS","fileService","mediaService","toast","alert","basicTopInset","canDelete","userId","fileType","type","url","VideoComponent","fileViewer","uri","absoluteFill","top","_onPressDelete","title","GROUP_CHANNEL","DIALOG_MESSAGE_DELETE_CONFIRM_TITLE","buttons","text","DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL","DIALOG_MESSAGE_DELETE_CONFIRM_OK","style","onPress","then","catch","show","TOAST","DELETE_MSG_ERROR","_onPressDownload","size","DOWNLOAD_START","save","fileUrl","fileName","name","response","DOWNLOAD_OK","log","err","DOWNLOAD_ERROR","flex","backgroundColor","background700","alignItems","justifyContent","position","primary300","FILE_VIEWER","TITLE","SUBTITLE","FileViewerHeader","subtitle","left","right","styles","headerContainer","paddingLeft","paddingHorizontal","paddingRight","paddingTop","height","overlay01","barButton","onBackgroundDark01","barTitleContainer","headerTitle","mode","maxLen","FileViewerFooter","bottomInset","deleteShown","footerContainer","paddingBottom","flexDirection","width","marginBottom"],"sources":["FileViewer.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport {\n  Icon,\n  Image,\n  LoadingSpinner,\n  Text,\n  createStyleSheet,\n  useAlert,\n  useHeaderStyle,\n  useToast,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport {\n  Logger,\n  getFileExtension,\n  getFileType,\n  isMyMessage,\n  toMegabyte,\n  truncate,\n  useIIFE,\n} from '@sendbird/uikit-utils';\n\nimport { useLocalization, usePlatformService, useSendbirdChat } from '../hooks/useContext';\n\ntype Props = {\n  fileMessage: SendbirdFileMessage;\n  deleteMessage: () => Promise<void>;\n\n  onClose: () => void;\n  onPressDownload?: (message: SendbirdFileMessage) => void;\n  onPressDelete?: (message: SendbirdFileMessage) => void;\n\n  headerShown?: boolean;\n  headerTopInset?: number;\n};\nconst FileViewer = ({\n  headerShown = true,\n  deleteMessage,\n  headerTopInset,\n  fileMessage,\n  onPressDownload,\n  onPressDelete,\n  onClose,\n}: Props) => {\n  const [loading, setLoading] = useState(true);\n\n  const { bottom } = useSafeAreaInsets();\n\n  const { currentUser } = useSendbirdChat();\n  const { palette } = useUIKitTheme();\n  const { topInset, statusBarTranslucent, defaultHeight } = useHeaderStyle();\n  const { STRINGS } = useLocalization();\n  const { fileService, mediaService } = usePlatformService();\n  const toast = useToast();\n  const { alert } = useAlert();\n\n  const basicTopInset = statusBarTranslucent ? topInset : 0;\n  const canDelete = isMyMessage(fileMessage, currentUser?.userId);\n  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));\n\n  useEffect(() => {\n    if (!mediaService?.VideoComponent || fileType === 'file') {\n      onClose();\n    }\n  }, [mediaService]);\n\n  const fileViewer = useIIFE(() => {\n    switch (fileType) {\n      case 'image': {\n        return (\n          <Image\n            source={{ uri: fileMessage.url }}\n            style={StyleSheet.absoluteFill}\n            resizeMode={'contain'}\n            onLoadEnd={() => setLoading(false)}\n          />\n        );\n      }\n\n      case 'video':\n      case 'audio': {\n        if (!mediaService?.VideoComponent) return null;\n        return (\n          <mediaService.VideoComponent\n            source={{ uri: fileMessage.url }}\n            style={[StyleSheet.absoluteFill, { top: basicTopInset + defaultHeight, bottom: defaultHeight + bottom }]}\n            resizeMode={'contain'}\n            onLoad={() => setLoading(false)}\n          />\n        );\n      }\n\n      default: {\n        return null;\n      }\n    }\n  });\n\n  const _onPressDelete = () => {\n    if (!canDelete) return;\n\n    if (onPressDelete) {\n      onPressDelete(fileMessage);\n    } else {\n      alert({\n        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,\n        buttons: [\n          {\n            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL,\n          },\n          {\n            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_OK,\n            style: 'destructive',\n            onPress: () => {\n              deleteMessage()\n                .then(() => {\n                  onClose();\n                })\n                .catch(() => {\n                  toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');\n                });\n            },\n          },\n        ],\n      });\n    }\n  };\n\n  const _onPressDownload = () => {\n    if (onPressDownload) {\n      onPressDownload(fileMessage);\n    } else {\n      if (toMegabyte(fileMessage.size) > 4) {\n        toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');\n      }\n\n      fileService\n        .save({ fileUrl: fileMessage.url, fileName: fileMessage.name, fileType: fileMessage.type })\n        .then((response) => {\n          toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');\n          Logger.log('File saved to', response);\n        })\n        .catch((err) => {\n          toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');\n          Logger.log('File save failure', err);\n        });\n    }\n  };\n\n  return (\n    <View style={{ flex: 1, backgroundColor: palette.background700 }}>\n      <StatusBar barStyle={'light-content'} animated />\n      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n        {fileViewer}\n        {loading && <LoadingSpinner style={{ position: 'absolute' }} size={40} color={palette.primary300} />}\n      </View>\n      {headerShown && (\n        <FileViewerHeader\n          title={STRINGS.FILE_VIEWER.TITLE(fileMessage)}\n          subtitle={STRINGS.FILE_VIEWER.SUBTITLE(fileMessage)}\n          topInset={headerTopInset ?? basicTopInset}\n          onClose={onClose}\n        />\n      )}\n      <FileViewerFooter\n        bottomInset={bottom}\n        deleteShown={canDelete}\n        onPressDelete={_onPressDelete}\n        onPressDownload={_onPressDownload}\n      />\n    </View>\n  );\n};\n\ntype HeaderProps = {\n  topInset: number;\n  onClose: () => void;\n  title: string;\n  subtitle: string;\n};\nconst FileViewerHeader = ({ topInset, onClose, subtitle, title }: HeaderProps) => {\n  const { palette } = useUIKitTheme();\n  const { defaultHeight } = useHeaderStyle();\n  const { left, right } = useSafeAreaInsets();\n\n  return (\n    <View\n      style={[\n        styles.headerContainer,\n        {\n          paddingLeft: styles.headerContainer.paddingHorizontal + left,\n          paddingRight: styles.headerContainer.paddingHorizontal + right,\n        },\n        { paddingTop: topInset, height: defaultHeight + topInset, backgroundColor: palette.overlay01 },\n      ]}\n    >\n      <TouchableOpacity onPress={onClose} style={styles.barButton}>\n        <Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />\n      </TouchableOpacity>\n      <View style={styles.barTitleContainer}>\n        <Text h2 color={palette.onBackgroundDark01} style={styles.headerTitle} numberOfLines={1}>\n          {truncate(title, { mode: 'mid', maxLen: 18 })}\n        </Text>\n        <Text caption2 color={palette.onBackgroundDark01} numberOfLines={1}>\n          {subtitle}\n        </Text>\n      </View>\n      <View style={styles.barButton} />\n    </View>\n  );\n};\n\ntype FooterProps = {\n  bottomInset: number;\n  deleteShown: boolean;\n  onPressDelete: () => void;\n  onPressDownload: () => void;\n};\nconst FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDownload }: FooterProps) => {\n  const { palette } = useUIKitTheme();\n  const { defaultHeight } = useHeaderStyle();\n  const { left, right } = useSafeAreaInsets();\n\n  return (\n    <View\n      style={[\n        styles.footerContainer,\n        {\n          paddingLeft: styles.headerContainer.paddingHorizontal + left,\n          paddingRight: styles.headerContainer.paddingHorizontal + right,\n        },\n        {\n          paddingBottom: bottomInset,\n          height: defaultHeight + bottomInset,\n          backgroundColor: palette.overlay01,\n        },\n      ]}\n    >\n      <TouchableOpacity onPress={onPressDownload} style={styles.barButton}>\n        <Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />\n      </TouchableOpacity>\n      <View style={styles.barTitleContainer} />\n      <TouchableOpacity onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>\n        {deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}\n      </TouchableOpacity>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  headerContainer: {\n    top: 0,\n    left: 0,\n    right: 0,\n    position: 'absolute',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n  },\n  barButton: {\n    width: 32,\n    height: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  barTitleContainer: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  headerTitle: {\n    marginBottom: 2,\n  },\n  footerContainer: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n  },\n});\n\nexport default FileViewer;\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useState","StatusBar","StyleSheet","TouchableOpacity","View","useSafeAreaInsets","Icon","Image","LoadingSpinner","Text","createStyleSheet","useAlert","useHeaderStyle","useToast","useUIKitTheme","Logger","getFileExtension","getFileType","isMyMessage","toMegabyte","truncate","useIIFE","useLocalization","usePlatformService","useSendbirdChat","FileViewer","headerShown","deleteMessage","headerTopInset","fileMessage","onPressDownload","onPressDelete","onClose","loading","setLoading","bottom","currentUser","palette","topInset","statusBarTranslucent","defaultHeight","STRINGS","fileService","mediaService","toast","alert","basicTopInset","canDelete","userId","fileType","type","url","fileViewer","uri","absoluteFill","top","_onPressDelete","title","GROUP_CHANNEL","DIALOG_MESSAGE_DELETE_CONFIRM_TITLE","buttons","text","DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL","DIALOG_MESSAGE_DELETE_CONFIRM_OK","style","onPress","then","catch","show","TOAST","DELETE_MSG_ERROR","_onPressDownload","size","DOWNLOAD_START","save","fileUrl","fileName","name","response","DOWNLOAD_OK","log","err","DOWNLOAD_ERROR","flex","backgroundColor","background700","alignItems","justifyContent","position","primary300","FILE_VIEWER","TITLE","SUBTITLE","FileViewerHeader","subtitle","left","right","styles","headerContainer","paddingLeft","paddingHorizontal","paddingRight","paddingTop","height","overlay01","barButton","onBackgroundDark01","barTitleContainer","headerTitle","mode","maxLen","FileViewerFooter","bottomInset","deleteShown","footerContainer","paddingBottom","flexDirection","width","marginBottom"],"sources":["FileViewer.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport {\n  Icon,\n  Image,\n  LoadingSpinner,\n  Text,\n  createStyleSheet,\n  useAlert,\n  useHeaderStyle,\n  useToast,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport {\n  Logger,\n  getFileExtension,\n  getFileType,\n  isMyMessage,\n  toMegabyte,\n  truncate,\n  useIIFE,\n} from '@sendbird/uikit-utils';\n\nimport { useLocalization, usePlatformService, useSendbirdChat } from '../hooks/useContext';\n\ntype Props = {\n  fileMessage: SendbirdFileMessage;\n  deleteMessage: () => Promise<void>;\n\n  onClose: () => void;\n  onPressDownload?: (message: SendbirdFileMessage) => void;\n  onPressDelete?: (message: SendbirdFileMessage) => void;\n\n  headerShown?: boolean;\n  headerTopInset?: number;\n};\nconst FileViewer = ({\n  headerShown = true,\n  deleteMessage,\n  headerTopInset,\n  fileMessage,\n  onPressDownload,\n  onPressDelete,\n  onClose,\n}: Props) => {\n  const [loading, setLoading] = useState(true);\n\n  const { bottom } = useSafeAreaInsets();\n\n  const { currentUser } = useSendbirdChat();\n  const { palette } = useUIKitTheme();\n  const { topInset, statusBarTranslucent, defaultHeight } = useHeaderStyle();\n  const { STRINGS } = useLocalization();\n  const { fileService, mediaService } = usePlatformService();\n  const toast = useToast();\n  const { alert } = useAlert();\n\n  const basicTopInset = statusBarTranslucent ? topInset : 0;\n  const canDelete = isMyMessage(fileMessage, currentUser?.userId);\n  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));\n\n  useEffect(() => {\n    if (fileType === 'file') onClose();\n  }, []);\n\n  const fileViewer = useIIFE(() => {\n    switch (fileType) {\n      case 'image': {\n        return (\n          <Image\n            source={{ uri: fileMessage.url }}\n            style={StyleSheet.absoluteFill}\n            resizeMode={'contain'}\n            onLoadEnd={() => setLoading(false)}\n          />\n        );\n      }\n\n      case 'video':\n      case 'audio': {\n        return (\n          <mediaService.VideoComponent\n            source={{ uri: fileMessage.url }}\n            style={[StyleSheet.absoluteFill, { top: basicTopInset + defaultHeight, bottom: defaultHeight + bottom }]}\n            resizeMode={'contain'}\n            onLoad={() => setLoading(false)}\n          />\n        );\n      }\n\n      default: {\n        return null;\n      }\n    }\n  });\n\n  const _onPressDelete = () => {\n    if (!canDelete) return;\n\n    if (onPressDelete) {\n      onPressDelete(fileMessage);\n    } else {\n      alert({\n        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,\n        buttons: [\n          {\n            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL,\n          },\n          {\n            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_OK,\n            style: 'destructive',\n            onPress: () => {\n              deleteMessage()\n                .then(() => {\n                  onClose();\n                })\n                .catch(() => {\n                  toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');\n                });\n            },\n          },\n        ],\n      });\n    }\n  };\n\n  const _onPressDownload = () => {\n    if (onPressDownload) {\n      onPressDownload(fileMessage);\n    } else {\n      if (toMegabyte(fileMessage.size) > 4) {\n        toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');\n      }\n\n      fileService\n        .save({ fileUrl: fileMessage.url, fileName: fileMessage.name, fileType: fileMessage.type })\n        .then((response) => {\n          toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');\n          Logger.log('File saved to', response);\n        })\n        .catch((err) => {\n          toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');\n          Logger.log('File save failure', err);\n        });\n    }\n  };\n\n  return (\n    <View style={{ flex: 1, backgroundColor: palette.background700 }}>\n      <StatusBar barStyle={'light-content'} animated />\n      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n        {fileViewer}\n        {loading && <LoadingSpinner style={{ position: 'absolute' }} size={40} color={palette.primary300} />}\n      </View>\n      {headerShown && (\n        <FileViewerHeader\n          title={STRINGS.FILE_VIEWER.TITLE(fileMessage)}\n          subtitle={STRINGS.FILE_VIEWER.SUBTITLE(fileMessage)}\n          topInset={headerTopInset ?? basicTopInset}\n          onClose={onClose}\n        />\n      )}\n      <FileViewerFooter\n        bottomInset={bottom}\n        deleteShown={canDelete}\n        onPressDelete={_onPressDelete}\n        onPressDownload={_onPressDownload}\n      />\n    </View>\n  );\n};\n\ntype HeaderProps = {\n  topInset: number;\n  onClose: () => void;\n  title: string;\n  subtitle: string;\n};\nconst FileViewerHeader = ({ topInset, onClose, subtitle, title }: HeaderProps) => {\n  const { palette } = useUIKitTheme();\n  const { defaultHeight } = useHeaderStyle();\n  const { left, right } = useSafeAreaInsets();\n\n  return (\n    <View\n      style={[\n        styles.headerContainer,\n        {\n          paddingLeft: styles.headerContainer.paddingHorizontal + left,\n          paddingRight: styles.headerContainer.paddingHorizontal + right,\n        },\n        { paddingTop: topInset, height: defaultHeight + topInset, backgroundColor: palette.overlay01 },\n      ]}\n    >\n      <TouchableOpacity onPress={onClose} style={styles.barButton}>\n        <Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />\n      </TouchableOpacity>\n      <View style={styles.barTitleContainer}>\n        <Text h2 color={palette.onBackgroundDark01} style={styles.headerTitle} numberOfLines={1}>\n          {truncate(title, { mode: 'mid', maxLen: 18 })}\n        </Text>\n        <Text caption2 color={palette.onBackgroundDark01} numberOfLines={1}>\n          {subtitle}\n        </Text>\n      </View>\n      <View style={styles.barButton} />\n    </View>\n  );\n};\n\ntype FooterProps = {\n  bottomInset: number;\n  deleteShown: boolean;\n  onPressDelete: () => void;\n  onPressDownload: () => void;\n};\nconst FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDownload }: FooterProps) => {\n  const { palette } = useUIKitTheme();\n  const { defaultHeight } = useHeaderStyle();\n  const { left, right } = useSafeAreaInsets();\n\n  return (\n    <View\n      style={[\n        styles.footerContainer,\n        {\n          paddingLeft: styles.headerContainer.paddingHorizontal + left,\n          paddingRight: styles.headerContainer.paddingHorizontal + right,\n        },\n        {\n          paddingBottom: bottomInset,\n          height: defaultHeight + bottomInset,\n          backgroundColor: palette.overlay01,\n        },\n      ]}\n    >\n      <TouchableOpacity onPress={onPressDownload} style={styles.barButton}>\n        <Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />\n      </TouchableOpacity>\n      <View style={styles.barTitleContainer} />\n      <TouchableOpacity onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>\n        {deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}\n      </TouchableOpacity>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  headerContainer: {\n    top: 0,\n    left: 0,\n    right: 0,\n    position: 'absolute',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n  },\n  barButton: {\n    width: 32,\n    height: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  barTitleContainer: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  headerTitle: {\n    marginBottom: 2,\n  },\n  footerContainer: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n  },\n});\n\nexport default FileViewer;\n"],"mappings":"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"}

package/lib/module/components/MessageRenderer/FileMessage/BaseFileMessage.js

@@ -14,7 +14,8 @@ const BaseFileMessage = _ref => {
     message,
     variant,
     pressed,
-    type
+    type,
+    children
   } = _ref;
   const {
     STRINGS
@@ -24,9 +25,11 @@ const BaseFileMessage = _ref => {
   } = useUIKitTheme();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles.container, {
+    style: [styles.bubbleContainer, {
       backgroundColor: color.background
     }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.container
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: iconMapper[type],
     size: 24,
@@ -42,17 +45,19 @@ const BaseFileMessage = _ref => {
     numberOfLines: 1,
     color: color.textMsg,
     style: styles.name
-  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)));
+  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message))), children);
 };
 
 const styles = createStyleSheet({
+  bubbleContainer: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
     paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16
+    paddingVertical: 6
   },
   name: {
     flexShrink: 1

package/lib/module/components/MessageRenderer/FileMessage/BaseFileMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Icon","Text","createStyleSheet","useUIKitTheme","useLocalization","iconMapper","audio","image","video","file","BaseFileMessage","message","variant","pressed","type","STRINGS","colors","color","ui","styles","container","backgroundColor","background","padding","borderRadius","marginRight","textMsg","name","GROUP_CHANNEL","MESSAGE_BUBBLE_FILE_TITLE","flexDirection","alignItems","justifyContent","paddingHorizontal","paddingVertical","flexShrink"],"sources":["BaseFileMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = FileMessageProps & {\n  type: 'image' | 'audio' | 'video' | 'file';\n};\nconst BaseFileMessage = ({ message, variant, pressed, type }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <Icon\n        icon={iconMapper[type]}\n        size={24}\n        containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}\n      />\n      <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n  },\n  name: {\n    flexShrink: 1,\n  },\n});\n\nexport default BaseFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,gBAArB,EAAuCC,aAAvC,QAA4D,yCAA5D;AAEA,SAASC,eAAT,QAAgC,2BAAhC;AAGA,MAAMC,UAAU,GAAG;EAAEC,KAAK,EAAE,YAAT;EAAuBC,KAAK,EAAE,OAA9B;EAAuCC,KAAK,EAAE,MAA9C;EAAsDC,IAAI,EAAE;AAA5D,CAAnB;;AAKA,MAAMC,eAAe,GAAG,QAAgD;EAAA,IAA/C;IAAEC,OAAF;IAAWC,OAAX;IAAoBC,OAApB;IAA6BC;EAA7B,CAA+C;EACtE,MAAM;IAAEC;EAAF,IAAcX,eAAe,EAAnC;EACA,MAAM;IAAEY;EAAF,IAAab,aAAa,EAAhC;EACA,MAAMc,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUP,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACM,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEJ,KAAK,CAACK;IAAzB,CAAnB;EAAb,gBACE,oBAAC,IAAD;IACE,IAAI,EAAEjB,UAAU,CAACS,IAAD,CADlB;IAEE,IAAI,EAAE,EAFR;IAGE,cAAc,EAAE;MAAEO,eAAe,EAAEL,MAAM,CAACM,UAA1B;MAAsCC,OAAO,EAAE,CAA/C;MAAkDC,YAAY,EAAE,CAAhE;MAAmEC,WAAW,EAAE;IAAhF;EAHlB,EADF,eAME,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,aAAa,EAAE,QAA3B;IAAqC,aAAa,EAAE,CAApD;IAAuD,KAAK,EAAER,KAAK,CAACS,OAApE;IAA6E,KAAK,EAAEP,MAAM,CAACQ;EAA3F,GACGZ,OAAO,CAACa,aAAR,CAAsBC,yBAAtB,CAAgDlB,OAAhD,CADH,CANF,CADF;AAYD,CAhBD;;AAkBA,MAAMQ,MAAM,GAAGjB,gBAAgB,CAAC;EAC9BkB,SAAS,EAAE;IACTU,aAAa,EAAE,KADN;IAETC,UAAU,EAAE,QAFH;IAGTC,cAAc,EAAE,QAHP;IAITC,iBAAiB,EAAE,EAJV;IAKTC,eAAe,EAAE,CALR;IAMTV,YAAY,EAAE;EANL,CADmB;EAS9BG,IAAI,EAAE;IACJQ,UAAU,EAAE;EADR;AATwB,CAAD,CAA/B;AAcA,eAAezB,eAAf"}
+{"version":3,"names":["React","View","Icon","Text","createStyleSheet","useUIKitTheme","useLocalization","iconMapper","audio","image","video","file","BaseFileMessage","message","variant","pressed","type","children","STRINGS","colors","color","ui","styles","bubbleContainer","backgroundColor","background","container","padding","borderRadius","marginRight","textMsg","name","GROUP_CHANNEL","MESSAGE_BUBBLE_FILE_TITLE","overflow","flexDirection","alignItems","paddingHorizontal","paddingVertical","flexShrink"],"sources":["BaseFileMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = FileMessageProps & {\n  type: 'image' | 'audio' | 'video' | 'file';\n};\nconst BaseFileMessage = ({ message, variant, pressed, type, children }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  return (\n    <View style={[styles.bubbleContainer, { backgroundColor: color.background }]}>\n      <View style={styles.container}>\n        <Icon\n          icon={iconMapper[type]}\n          size={24}\n          containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}\n        />\n        <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>\n          {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}\n        </Text>\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n  name: {\n    flexShrink: 1,\n  },\n});\n\nexport default BaseFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,gBAArB,EAAuCC,aAAvC,QAA4D,yCAA5D;AAEA,SAASC,eAAT,QAAgC,2BAAhC;AAGA,MAAMC,UAAU,GAAG;EAAEC,KAAK,EAAE,YAAT;EAAuBC,KAAK,EAAE,OAA9B;EAAuCC,KAAK,EAAE,MAA9C;EAAsDC,IAAI,EAAE;AAA5D,CAAnB;;AAKA,MAAMC,eAAe,GAAG,QAA0D;EAAA,IAAzD;IAAEC,OAAF;IAAWC,OAAX;IAAoBC,OAApB;IAA6BC,IAA7B;IAAmCC;EAAnC,CAAyD;EAChF,MAAM;IAAEC;EAAF,IAAcZ,eAAe,EAAnC;EACA,MAAM;IAAEa;EAAF,IAAad,aAAa,EAAhC;EACA,MAAMe,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUR,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACO,MAAM,CAACC,eAAR,EAAyB;MAAEC,eAAe,EAAEJ,KAAK,CAACK;IAAzB,CAAzB;EAAb,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAEH,MAAM,CAACI;EAApB,gBACE,oBAAC,IAAD;IACE,IAAI,EAAEnB,UAAU,CAACS,IAAD,CADlB;IAEE,IAAI,EAAE,EAFR;IAGE,cAAc,EAAE;MAAEQ,eAAe,EAAEL,MAAM,CAACM,UAA1B;MAAsCE,OAAO,EAAE,CAA/C;MAAkDC,YAAY,EAAE,CAAhE;MAAmEC,WAAW,EAAE;IAAhF;EAHlB,EADF,eAME,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,aAAa,EAAE,QAA3B;IAAqC,aAAa,EAAE,CAApD;IAAuD,KAAK,EAAET,KAAK,CAACU,OAApE;IAA6E,KAAK,EAAER,MAAM,CAACS;EAA3F,GACGb,OAAO,CAACc,aAAR,CAAsBC,yBAAtB,CAAgDpB,OAAhD,CADH,CANF,CADF,EAWGI,QAXH,CADF;AAeD,CAnBD;;AAqBA,MAAMK,MAAM,GAAGlB,gBAAgB,CAAC;EAC9BmB,eAAe,EAAE;IACfK,YAAY,EAAE,EADC;IAEfM,QAAQ,EAAE;EAFK,CADa;EAK9BR,SAAS,EAAE;IACTS,aAAa,EAAE,KADN;IAETC,UAAU,EAAE,QAFH;IAGTC,iBAAiB,EAAE,EAHV;IAITC,eAAe,EAAE;EAJR,CALmB;EAW9BP,IAAI,EAAE;IACJQ,UAAU,EAAE;EADR;AAXwB,CAAD,CAA/B;AAgBA,eAAe3B,eAAf"}

package/lib/module/components/MessageRenderer/FileMessage/ImageFileMessage.js

@@ -31,7 +31,9 @@ const useRetry = function (hasError) {
 
 const ImageFileMessage = _ref => {
   let {
-    message
+    message,
+    children,
+    variant
   } = _ref;
   const {
     colors
@@ -43,6 +45,10 @@ const ImageFileMessage = _ref => {
   }];
   const key = useRetry(imageNotFound);
   return /*#__PURE__*/React.createElement(View, {
+    style: [styles.bubbleContainer, {
+      backgroundColor: imageNotFound ? colors.onBackground04 : colors.ui.message[variant].enabled.background
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
     style: style
   }, /*#__PURE__*/React.createElement(Image, {
     key: key,
@@ -59,10 +65,14 @@ const ImageFileMessage = _ref => {
     icon: 'thumbnail-none',
     size: 48,
     color: colors.onBackground02
-  }));
+  })), children);
 };
 
 const styles = createStyleSheet({
+  bubbleContainer: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
   image: {
     width: 240,
     maxWidth: 240,

package/lib/module/components/MessageRenderer/FileMessage/ImageFileMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Platform","StyleSheet","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","useForceUpdate","useRetry","hasError","retryCount","OS","forceUpdate","retryCountRef","retryTimeoutRef","reloadReservation","current","setTimeout","clearTimeout","ImageFileMessage","message","colors","imageNotFound","setImageNotFound","fileUrl","style","styles","image","backgroundColor","onBackground04","key","uri","absoluteFill","hide","onBackground02","width","maxWidth","height","borderRadius","overflow","display"],"sources":["ImageFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleSheet, View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage, useForceUpdate } from '@sendbird/uikit-utils';\n\nimport type { FileMessageProps } from './index';\n\nconst useRetry = (hasError: boolean, retryCount = 5) => {\n  if (Platform.OS === 'android') return '';\n\n  const forceUpdate = useForceUpdate();\n  const retryCountRef = useRef(1);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (hasError) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            forceUpdate();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [hasError]);\n\n  return retryCountRef.current;\n};\n\nconst ImageFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const key = useRetry(imageNotFound);\n\n  return (\n    <View style={style}>\n      <Image\n        key={key}\n        source={{ uri: fileUrl }}\n        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}\n        resizeMode={'cover'}\n        resizeMethod={'resize'}\n        onError={() => setImageNotFound(true)}\n        onLoad={() => setImageNotFound(false)}\n      />\n      {imageNotFound && (\n        <Icon\n          containerStyle={StyleSheet.absoluteFill}\n          icon={'thumbnail-none'}\n          size={48}\n          color={colors.onBackground02}\n        />\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,SAASC,QAAT,EAAmBC,UAAnB,EAA+BC,IAA/B,QAA2C,cAA3C;AAEA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,gBAAtB,EAAwCC,aAAxC,QAA6D,yCAA7D;AACA,SAASC,8BAAT,EAAyCC,cAAzC,QAA+D,uBAA/D;;AAIA,MAAMC,QAAQ,GAAG,UAACC,QAAD,EAAuC;EAAA,IAAnBC,UAAmB,uEAAN,CAAM;EACtD,IAAIX,QAAQ,CAACY,EAAT,KAAgB,SAApB,EAA+B,OAAO,EAAP;EAE/B,MAAMC,WAAW,GAAGL,cAAc,EAAlC;EACA,MAAMM,aAAa,GAAGhB,MAAM,CAAC,CAAD,CAA5B;EACA,MAAMiB,eAAe,GAAGjB,MAAM,EAA9B;EAEAD,SAAS,CAAC,MAAM;IACd,IAAIa,QAAJ,EAAc;MACZ,MAAMM,iBAAiB,GAAG,MAAM;QAC9B,IAAIF,aAAa,CAACG,OAAd,GAAwBN,UAA5B,EAAwC;UACtCI,eAAe,CAACE,OAAhB,GAA0BC,UAAU,CAAC,MAAM;YACzCJ,aAAa,CAACG,OAAd;YACAD,iBAAiB;YACjBH,WAAW;UACZ,CAJmC,EAIjCC,aAAa,CAACG,OAAd,GAAwB,IAJS,CAApC;QAKD;MACF,CARD;;MAUA,OAAOD,iBAAiB,EAAxB;IACD,CAZD,MAYO;MACL,OAAOG,YAAY,CAACJ,eAAe,CAACE,OAAjB,CAAnB;IACD;EACF,CAhBQ,EAgBN,CAACP,QAAD,CAhBM,CAAT;EAkBA,OAAOI,aAAa,CAACG,OAArB;AACD,CA1BD;;AA4BA,MAAMG,gBAAgB,GAAG,QAAmC;EAAA,IAAlC;IAAEC;EAAF,CAAkC;EAC1D,MAAM;IAAEC;EAAF,IAAahB,aAAa,EAAhC;EACA,MAAM,CAACiB,aAAD,EAAgBC,gBAAhB,IAAoCzB,QAAQ,CAAC,KAAD,CAAlD;EAEA,MAAM0B,OAAO,GAAGlB,8BAA8B,CAACc,OAAD,CAA9C;EACA,MAAMK,KAAK,GAAG,CAACC,MAAM,CAACC,KAAR,EAAe;IAAEC,eAAe,EAAEP,MAAM,CAACQ;EAA1B,CAAf,CAAd;EAEA,MAAMC,GAAG,GAAGtB,QAAQ,CAACc,aAAD,CAApB;EAEA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEG;EAAb,gBACE,oBAAC,KAAD;IACE,GAAG,EAAEK,GADP;IAEE,MAAM,EAAE;MAAEC,GAAG,EAAEP;IAAP,CAFV;IAGE,KAAK,EAAE,CAACxB,UAAU,CAACgC,YAAZ,EAA0BV,aAAa,IAAII,MAAM,CAACO,IAAlD,CAHT;IAIE,UAAU,EAAE,OAJd;IAKE,YAAY,EAAE,QALhB;IAME,OAAO,EAAE,MAAMV,gBAAgB,CAAC,IAAD,CANjC;IAOE,MAAM,EAAE,MAAMA,gBAAgB,CAAC,KAAD;EAPhC,EADF,EAUGD,aAAa,iBACZ,oBAAC,IAAD;IACE,cAAc,EAAEtB,UAAU,CAACgC,YAD7B;IAEE,IAAI,EAAE,gBAFR;IAGE,IAAI,EAAE,EAHR;IAIE,KAAK,EAAEX,MAAM,CAACa;EAJhB,EAXJ,CADF;AAqBD,CA9BD;;AAgCA,MAAMR,MAAM,GAAGtB,gBAAgB,CAAC;EAC9BuB,KAAK,EAAE;IACLQ,KAAK,EAAE,GADF;IAELC,QAAQ,EAAE,GAFL;IAGLC,MAAM,EAAE,GAHH;IAILC,YAAY,EAAE,EAJT;IAKLC,QAAQ,EAAE;EALL,CADuB;EAQ9BN,IAAI,EAAE;IACJO,OAAO,EAAE;EADL;AARwB,CAAD,CAA/B;AAaA,eAAerB,gBAAf"}
+{"version":3,"names":["React","useEffect","useRef","useState","Platform","StyleSheet","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","useForceUpdate","useRetry","hasError","retryCount","OS","forceUpdate","retryCountRef","retryTimeoutRef","reloadReservation","current","setTimeout","clearTimeout","ImageFileMessage","message","children","variant","colors","imageNotFound","setImageNotFound","fileUrl","style","styles","image","backgroundColor","onBackground04","key","bubbleContainer","ui","enabled","background","uri","absoluteFill","hide","onBackground02","borderRadius","overflow","width","maxWidth","height","display"],"sources":["ImageFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleSheet, View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage, useForceUpdate } from '@sendbird/uikit-utils';\n\nimport type { FileMessageProps } from './index';\n\nconst useRetry = (hasError: boolean, retryCount = 5) => {\n  if (Platform.OS === 'android') return '';\n\n  const forceUpdate = useForceUpdate();\n  const retryCountRef = useRef(1);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (hasError) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            forceUpdate();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [hasError]);\n\n  return retryCountRef.current;\n};\n\nconst ImageFileMessage = ({ message, children, variant }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const key = useRetry(imageNotFound);\n\n  return (\n    <View\n      style={[\n        styles.bubbleContainer,\n        { backgroundColor: imageNotFound ? colors.onBackground04 : colors.ui.message[variant].enabled.background },\n      ]}\n    >\n      <View style={style}>\n        <Image\n          key={key}\n          source={{ uri: fileUrl }}\n          style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}\n          resizeMode={'cover'}\n          resizeMethod={'resize'}\n          onError={() => setImageNotFound(true)}\n          onLoad={() => setImageNotFound(false)}\n        />\n        {imageNotFound && (\n          <Icon\n            containerStyle={StyleSheet.absoluteFill}\n            icon={'thumbnail-none'}\n            size={48}\n            color={colors.onBackground02}\n          />\n        )}\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"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"}

package/lib/module/components/MessageRenderer/FileMessage/VideoFileMessage.js

@@ -17,7 +17,7 @@ const useRetry = function (videoFileUrl) {
   } = usePlatformService();
 
   const fetchThumbnail = () => {
-    return mediaService === null || mediaService === void 0 ? void 0 : mediaService.getVideoThumbnail({
+    return mediaService.getVideoThumbnail({
       url: videoFileUrl,
       timeMills: 1000
     }).then(result => {
@@ -50,13 +50,15 @@ const useRetry = function (videoFileUrl) {
 
 const VideoFileMessage = _ref => {
   let {
-    message
+    message,
+    variant,
+    children
   } = _ref;
   const {
     colors
   } = useUIKitTheme();
   const fileUrl = getAvailableUriFromFileMessage(message);
-  const style = [styles.image, {
+  const style = [styles.video, {
     backgroundColor: colors.onBackground04
   }];
   const {
@@ -66,12 +68,22 @@ const VideoFileMessage = _ref => {
 
   if (loading) {
     return /*#__PURE__*/React.createElement(View, {
-      style: [style, styles.container]
-    }, /*#__PURE__*/React.createElement(PlayIcon, null));
+      style: [styles.bubbleContainer, {
+        backgroundColor: colors.ui.message[variant].enabled.background
+      }]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.bubbleContainer, styles.bubbleInnerContainer]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: style
+    }), /*#__PURE__*/React.createElement(PlayIcon, null)), children);
   }
 
   return /*#__PURE__*/React.createElement(View, {
-    style: styles.container
+    style: [styles.bubbleContainer, {
+      backgroundColor: colors.ui.message[variant].enabled.background
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.bubbleContainer, styles.bubbleInnerContainer]
   }, /*#__PURE__*/React.createElement(Image, {
     source: {
       uri: thumbnail || fileUrl
@@ -79,7 +91,7 @@ const VideoFileMessage = _ref => {
     style: style,
     resizeMode: 'cover',
     resizeMethod: 'resize'
-  }), /*#__PURE__*/React.createElement(PlayIcon, null));
+  }), /*#__PURE__*/React.createElement(PlayIcon, null)), children);
 };
 
 const PlayIcon = () => {
@@ -97,15 +109,18 @@ const PlayIcon = () => {
 };
 
 const styles = createStyleSheet({
-  container: {
+  bubbleContainer: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  bubbleInnerContainer: {
     alignItems: 'center',
     justifyContent: 'center'
   },
-  image: {
+  video: {
     width: 240,
     maxWidth: 240,
-    height: 160,
-    borderRadius: 16
+    height: 160
   },
   playIcon: {
     position: 'absolute',

package/lib/module/components/MessageRenderer/FileMessage/VideoFileMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","usePlatformService","useRetry","videoFileUrl","retryCount","state","setState","thumbnail","loading","retryCountRef","retryTimeoutRef","mediaService","fetchThumbnail","getVideoThumbnail","url","timeMills","then","result","path","reloadReservation","current","setTimeout","clearTimeout","VideoFileMessage","message","colors","fileUrl","style","styles","image","backgroundColor","onBackground04","container","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","alignItems","justifyContent","width","maxWidth","height","borderRadius","position","padding"],"sources":["VideoFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst useRetry = (videoFileUrl: string, retryCount = 5) => {\n  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });\n  const retryCountRef = useRef(0);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n  const { mediaService } = usePlatformService();\n\n  const fetchThumbnail = () => {\n    return mediaService?.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {\n      setState({ loading: false, thumbnail: result?.path ?? null });\n    });\n  };\n\n  useEffect(() => {\n    if (!state.thumbnail) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            fetchThumbnail();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [state.thumbnail]);\n\n  return state;\n};\n\nconst VideoFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const { loading, thumbnail } = useRetry(fileUrl);\n\n  if (loading) {\n    return (\n      <View style={[style, styles.container]}>\n        <PlayIcon />\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.container}>\n      <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />\n      <PlayIcon />\n    </View>\n  );\n};\n\nconst PlayIcon = () => {\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Icon\n      icon={'play'}\n      size={28}\n      color={colors.onBackground02}\n      containerStyle={[styles.playIcon, { backgroundColor: colors.onBackgroundReverse01 }]}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n  },\n  playIcon: {\n    position: 'absolute',\n    padding: 10,\n    borderRadius: 50,\n  },\n});\n\nexport default VideoFileMessage;\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useRef","useState","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","usePlatformService","useRetry","videoFileUrl","retryCount","state","setState","thumbnail","loading","retryCountRef","retryTimeoutRef","mediaService","fetchThumbnail","getVideoThumbnail","url","timeMills","then","result","path","reloadReservation","current","setTimeout","clearTimeout","VideoFileMessage","message","variant","children","colors","fileUrl","style","styles","video","backgroundColor","onBackground04","bubbleContainer","ui","enabled","background","bubbleInnerContainer","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","borderRadius","overflow","alignItems","justifyContent","width","maxWidth","height","position","padding"],"sources":["VideoFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst useRetry = (videoFileUrl: string, retryCount = 5) => {\n  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });\n  const retryCountRef = useRef(0);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n  const { mediaService } = usePlatformService();\n\n  const fetchThumbnail = () => {\n    return mediaService.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {\n      setState({ loading: false, thumbnail: result?.path ?? null });\n    });\n  };\n\n  useEffect(() => {\n    if (!state.thumbnail) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            fetchThumbnail();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [state.thumbnail]);\n\n  return state;\n};\n\nconst VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.video, { backgroundColor: colors.onBackground04 }];\n\n  const { loading, thumbnail } = useRetry(fileUrl);\n\n  if (loading) {\n    return (\n      <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>\n        <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>\n          <View style={style} />\n          <PlayIcon />\n        </View>\n        {children}\n      </View>\n    );\n  }\n\n  return (\n    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>\n      <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>\n        <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />\n        <PlayIcon />\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst PlayIcon = () => {\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Icon\n      icon={'play'}\n      size={28}\n      color={colors.onBackground02}\n      containerStyle={[styles.playIcon, { backgroundColor: colors.onBackgroundReverse01 }]}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  bubbleInnerContainer: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  video: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n  },\n  playIcon: {\n    position: 'absolute',\n    padding: 10,\n    borderRadius: 50,\n  },\n});\n\nexport default VideoFileMessage;\n"],"mappings":"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"}

package/lib/module/components/MessageRenderer/FileMessage/index.js

@@ -2,18 +2,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import { getFileExtension, getFileType } from '@sendbird/uikit-utils';
-import { usePlatformService } from '../../../hooks/useContext';
 import BaseFileMessage from './BaseFileMessage';
 import ImageFileMessage from './ImageFileMessage';
 import VideoFileMessage from './VideoFileMessage';
 
 const FileMessage = props => {
-  const {
-    mediaService
-  } = usePlatformService();
   const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
   if (fileType === 'image') return /*#__PURE__*/React.createElement(ImageFileMessage, props);
-  if (fileType === 'video' && mediaService !== null && mediaService !== void 0 && mediaService.getVideoThumbnail) return /*#__PURE__*/React.createElement(VideoFileMessage, props);
+  if (fileType === 'video') return /*#__PURE__*/React.createElement(VideoFileMessage, props);
   return /*#__PURE__*/React.createElement(BaseFileMessage, _extends({}, props, {
     type: fileType
   }));

package/lib/module/components/MessageRenderer/FileMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getFileExtension","getFileType","usePlatformService","BaseFileMessage","ImageFileMessage","VideoFileMessage","FileMessage","props","mediaService","fileType","message","type","name","getVideoThumbnail","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { MessageRendererInterface } from '../index';\nimport BaseFileMessage from './BaseFileMessage';\nimport ImageFileMessage from './ImageFileMessage';\nimport VideoFileMessage from './VideoFileMessage';\n\nexport type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;\nconst FileMessage = (props: FileMessageProps) => {\n  const { mediaService } = usePlatformService();\n\n  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));\n\n  if (fileType === 'image') return <ImageFileMessage {...props} />;\n  if (fileType === 'video' && mediaService?.getVideoThumbnail) return <VideoFileMessage {...props} />;\n\n  return <BaseFileMessage {...props} type={fileType} />;\n};\n\nexport default React.memo(FileMessage);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAA8BC,gBAA9B,EAAgDC,WAAhD,QAAmE,uBAAnE;AAEA,SAASC,kBAAT,QAAmC,2BAAnC;AAEA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;;AAGA,MAAMC,WAAW,GAAIC,KAAD,IAA6B;EAC/C,MAAM;IAAEC;EAAF,IAAmBN,kBAAkB,EAA3C;EAEA,MAAMO,QAAQ,GAAGR,WAAW,CAACM,KAAK,CAACG,OAAN,CAAcC,IAAd,IAAsBX,gBAAgB,CAACO,KAAK,CAACG,OAAN,CAAcE,IAAf,CAAvC,CAA5B;EAEA,IAAIH,QAAQ,KAAK,OAAjB,EAA0B,oBAAO,oBAAC,gBAAD,EAAsBF,KAAtB,CAAP;EAC1B,IAAIE,QAAQ,KAAK,OAAb,IAAwBD,YAAxB,aAAwBA,YAAxB,eAAwBA,YAAY,CAAEK,iBAA1C,EAA6D,oBAAO,oBAAC,gBAAD,EAAsBN,KAAtB,CAAP;EAE7D,oBAAO,oBAAC,eAAD,eAAqBA,KAArB;IAA4B,IAAI,EAAEE;EAAlC,GAAP;AACD,CATD;;AAWA,4BAAeV,KAAK,CAACe,IAAN,CAAWR,WAAX,CAAf"}
+{"version":3,"names":["React","getFileExtension","getFileType","BaseFileMessage","ImageFileMessage","VideoFileMessage","FileMessage","props","fileType","message","type","name","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';\n\nimport type { MessageRendererInterface } from '../index';\nimport BaseFileMessage from './BaseFileMessage';\nimport ImageFileMessage from './ImageFileMessage';\nimport VideoFileMessage from './VideoFileMessage';\n\nexport type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;\nconst FileMessage = (props: FileMessageProps) => {\n  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));\n\n  if (fileType === 'image') return <ImageFileMessage {...props} />;\n  if (fileType === 'video') return <VideoFileMessage {...props} />;\n\n  return <BaseFileMessage {...props} type={fileType} />;\n};\n\nexport default React.memo(FileMessage);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAA8BC,gBAA9B,EAAgDC,WAAhD,QAAmE,uBAAnE;AAGA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;;AAGA,MAAMC,WAAW,GAAIC,KAAD,IAA6B;EAC/C,MAAMC,QAAQ,GAAGN,WAAW,CAACK,KAAK,CAACE,OAAN,CAAcC,IAAd,IAAsBT,gBAAgB,CAACM,KAAK,CAACE,OAAN,CAAcE,IAAf,CAAvC,CAA5B;EAEA,IAAIH,QAAQ,KAAK,OAAjB,EAA0B,oBAAO,oBAAC,gBAAD,EAAsBD,KAAtB,CAAP;EAC1B,IAAIC,QAAQ,KAAK,OAAjB,EAA0B,oBAAO,oBAAC,gBAAD,EAAsBD,KAAtB,CAAP;EAE1B,oBAAO,oBAAC,eAAD,eAAqBA,KAArB;IAA4B,IAAI,EAAEC;EAAlC,GAAP;AACD,CAPD;;AASA,4BAAeR,KAAK,CAACY,IAAN,CAAWN,WAAX,CAAf"}

package/lib/module/components/MessageRenderer/UserMessage/BaseUserMessage.js

@@ -1,40 +1,114 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import { View } from 'react-native';
-import { Text, URLParsedText, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { useLocalization } from '../../../hooks/useContext';
+import { RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { urlRegexStrict } from '@sendbird/uikit-utils';
+import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
+import SBUUtils from '../../../libs/SBUUtils';
 
 const BaseUserMessage = _ref => {
   let {
     message,
     variant,
-    pressed
+    pressed,
+    children,
+    onLongPressMentionedUser,
+    onLongPressURL
   } = _ref;
   const {
-    colors
-  } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+    mentionManager,
+    currentUser
+  } = useSendbirdChat();
+  const {
+    show
+  } = useUserProfile();
   const {
     STRINGS
   } = useLocalization();
+  const {
+    colors,
+    palette
+  } = useUIKitTheme();
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
       backgroundColor: color.background
     }]
-  }, /*#__PURE__*/React.createElement(URLParsedText, {
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Text, {
     body3: true,
-    strict: true,
     color: color.textMsg
-  }, message.message, Boolean(message.updatedAt) && /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(RegexText, {
+    body3: true,
+    color: color.textMsg,
+    patterns: [{
+      regex: mentionManager.templateRegex,
+
+      replacer(_ref2) {
+        var _message$mentionedUse;
+
+        let {
+          match,
+          groups,
+          parentProps,
+          index,
+          keyPrefix
+        } = _ref2;
+        const user = (_message$mentionedUse = message.mentionedUsers) === null || _message$mentionedUse === void 0 ? void 0 : _message$mentionedUse.find(it => it.userId === groups[2]);
+
+        if (user) {
+          return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+            key: `${keyPrefix}-${index}`,
+            onPress: () => show(user),
+            onLongPress: onLongPressMentionedUser,
+            style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, {
+              fontWeight: 'bold'
+            }, user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) && {
+              backgroundColor: palette.highlight
+            }]
+          }), `${mentionManager.asMentionedMessageText(user)}`);
+        }
+
+        return match;
+      }
+
+    }, {
+      regex: urlRegexStrict,
+
+      replacer(_ref3) {
+        let {
+          match,
+          parentProps,
+          index,
+          keyPrefix
+        } = _ref3;
+        return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+          key: `${keyPrefix}-${index}`,
+          onPress: () => SBUUtils.openURL(match),
+          onLongPress: onLongPressURL,
+          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, {
+            textDecorationLine: 'underline'
+          }]
+        }), match);
+      }
+
+    }]
+  }, mentionManager.shouldUseMentionedMessageTemplate(message) ? message.mentionedMessageTemplate : message.message), Boolean(message.updatedAt) && /*#__PURE__*/React.createElement(Text, {
     body3: true,
     color: color.textEdited
-  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX)));
+  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX))), children);
 };
 
 const styles = createStyleSheet({
   container: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  wrapper: {
     paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16
+    paddingVertical: 6
   }
 });
 export default BaseUserMessage;

package/lib/module/components/MessageRenderer/UserMessage/BaseUserMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","URLParsedText","createStyleSheet","useUIKitTheme","useLocalization","BaseUserMessage","message","variant","pressed","colors","color","ui","STRINGS","styles","container","backgroundColor","background","textMsg","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","paddingHorizontal","paddingVertical","borderRadius"],"sources":["BaseUserMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, URLParsedText, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { UserMessageProps } from './index';\n\nconst BaseUserMessage = ({ message, variant, pressed }: UserMessageProps) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  const { STRINGS } = useLocalization();\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <URLParsedText body3 strict color={color.textMsg}>\n        {message.message}\n        {Boolean(message.updatedAt) && (\n          <Text body3 color={color.textEdited}>\n            {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n          </Text>\n        )}\n      </URLParsedText>\n    </View>\n  );\n};\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n  },\n});\n\nexport default BaseUserMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,aAAf,EAA8BC,gBAA9B,EAAgDC,aAAhD,QAAqE,yCAArE;AAEA,SAASC,eAAT,QAAgC,2BAAhC;;AAGA,MAAMC,eAAe,GAAG,QAAqD;EAAA,IAApD;IAAEC,OAAF;IAAWC,OAAX;IAAoBC;EAApB,CAAoD;EAC3E,MAAM;IAAEC;EAAF,IAAaN,aAAa,EAAhC;EACA,MAAMO,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUL,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,MAAM;IAAEI;EAAF,IAAcR,eAAe,EAAnC;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACS,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEL,KAAK,CAACM;IAAzB,CAAnB;EAAb,gBACE,oBAAC,aAAD;IAAe,KAAK,MAApB;IAAqB,MAAM,MAA3B;IAA4B,KAAK,EAAEN,KAAK,CAACO;EAAzC,GACGX,OAAO,CAACA,OADX,EAEGY,OAAO,CAACZ,OAAO,CAACa,SAAT,CAAP,iBACC,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAET,KAAK,CAACU;EAAzB,GACGR,OAAO,CAACS,aAAR,CAAsBC,6BADzB,CAHJ,CADF,CADF;AAYD,CAhBD;;AAiBA,MAAMT,MAAM,GAAGX,gBAAgB,CAAC;EAC9BY,SAAS,EAAE;IACTS,iBAAiB,EAAE,EADV;IAETC,eAAe,EAAE,CAFR;IAGTC,YAAY,EAAE;EAHL;AADmB,CAAD,CAA/B;AAQA,eAAepB,eAAf"}
+{"version":3,"names":["React","View","RegexText","Text","createStyleSheet","useUIKitTheme","urlRegexStrict","useLocalization","useSendbirdChat","useUserProfile","SBUUtils","BaseUserMessage","message","variant","pressed","children","onLongPressMentionedUser","onLongPressURL","mentionManager","currentUser","show","STRINGS","colors","palette","color","ui","styles","container","backgroundColor","background","wrapper","textMsg","regex","templateRegex","replacer","match","groups","parentProps","index","keyPrefix","user","mentionedUsers","find","it","userId","style","fontWeight","highlight","asMentionedMessageText","openURL","textDecorationLine","shouldUseMentionedMessageTemplate","mentionedMessageTemplate","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","borderRadius","overflow","paddingHorizontal","paddingVertical"],"sources":["BaseUserMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { urlRegexStrict } from '@sendbird/uikit-utils';\n\nimport { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';\nimport SBUUtils from '../../../libs/SBUUtils';\nimport type { UserMessageProps } from './index';\n\nconst BaseUserMessage = ({\n  message,\n  variant,\n  pressed,\n  children,\n  onLongPressMentionedUser,\n  onLongPressURL,\n}: UserMessageProps) => {\n  const { mentionManager, currentUser } = useSendbirdChat();\n  const { show } = useUserProfile();\n  const { STRINGS } = useLocalization();\n  const { colors, palette } = useUIKitTheme();\n\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <View style={styles.wrapper}>\n        <Text body3 color={color.textMsg}>\n          <RegexText\n            body3\n            color={color.textMsg}\n            patterns={[\n              {\n                regex: mentionManager.templateRegex,\n                replacer({ match, groups, parentProps, index, keyPrefix }) {\n                  const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);\n                  if (user) {\n                    return (\n                      <Text\n                        {...parentProps}\n                        key={`${keyPrefix}-${index}`}\n                        onPress={() => show(user)}\n                        onLongPress={onLongPressMentionedUser}\n                        style={[\n                          parentProps?.style,\n                          { fontWeight: 'bold' },\n                          user.userId === currentUser?.userId && { backgroundColor: palette.highlight },\n                        ]}\n                      >\n                        {`${mentionManager.asMentionedMessageText(user)}`}\n                      </Text>\n                    );\n                  }\n                  return match;\n                },\n              },\n              {\n                regex: urlRegexStrict,\n                replacer({ match, parentProps, index, keyPrefix }) {\n                  return (\n                    <Text\n                      {...parentProps}\n                      key={`${keyPrefix}-${index}`}\n                      onPress={() => SBUUtils.openURL(match)}\n                      onLongPress={onLongPressURL}\n                      style={[parentProps?.style, { textDecorationLine: 'underline' }]}\n                    >\n                      {match}\n                    </Text>\n                  );\n                },\n              },\n            ]}\n          >\n            {mentionManager.shouldUseMentionedMessageTemplate(message)\n              ? message.mentionedMessageTemplate\n              : message.message}\n          </RegexText>\n          {Boolean(message.updatedAt) && (\n            <Text body3 color={color.textEdited}>\n              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n            </Text>\n          )}\n        </Text>\n      </View>\n      {children}\n    </View>\n  );\n};\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  wrapper: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n});\n\nexport default BaseUserMessage;\n"],"mappings":"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"}