@sendbird/uikit-react-native 2.1.0 → 2.2.0

package/lib/commonjs/components/ChatFlatList.js

@@ -112,7 +112,8 @@ const ChatFlatList = /*#__PURE__*/(0, _react.forwardRef)(function CustomFlatList
     onEndReachedThreshold: 0.5,
     onEndReached: onTopReached,
     scrollEventThrottle: 16,
-    onScroll: _onScroll
+    onScroll: _onScroll,
+    keyExtractor: _uikitUtils.getMessageUniqId
   }));
 });
 var _default = ChatFlatList;

package/lib/commonjs/components/ChatFlatList.js.map

@@ -1 +1 @@
-{"version":3,"names":["ANDROID_BUG_ALERT_SHOWED","Platform","OS","BOTTOM_DETECT_THRESHOLD","hasReachedToBottom","yPos","thresholdPx","ChatFlatList","forwardRef","CustomFlatList","ref","onTopReached","nextMessages","onBottomReached","onLeaveScrollBottom","onScroll","currentUserId","props","select","useUIKitTheme","scrollRef","useRef","useImperativeHandle","scrollToBottom","animated","current","scrollToOffset","offset","useEffect","latestMessage","length","isMyMessage","_onScroll","useCallback","event","contentOffset","nativeEvent","y","__DEV__","console","warn","light","dark","Boolean","data"],"sources":["ChatFlatList.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { FlatList, FlatListProps, Platform } from 'react-native';\n\nimport { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdMessage, isMyMessage } from '@sendbird/uikit-utils';\n\nlet ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';\nconst BOTTOM_DETECT_THRESHOLD = 25;\n// const AUTO_SCROLL_TO_TOP_THRESHOLD = 15;\n\nfunction hasReachedToBottom(yPos: number, thresholdPx = 0) {\n  return thresholdPx >= yPos;\n}\n\nexport type ChatFlatListRef = { scrollToBottom: (animated?: boolean) => void };\ntype Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {\n  currentUserId?: string;\n  onBottomReached: () => void;\n  onTopReached: () => void;\n  nextMessages: SendbirdMessage[];\n  onLeaveScrollBottom: (value: boolean) => void;\n};\n// FIXME: Inverted FlatList performance issue on Android {@link https://github.com/facebook/react-native/issues/30034}\nconst ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(\n  { onTopReached, nextMessages, onBottomReached, onLeaveScrollBottom, onScroll, currentUserId, ...props },\n  ref,\n) {\n  const { select } = useUIKitTheme();\n  const scrollRef = useRef<FlatList<SendbirdMessage>>(null);\n  const yPos = useRef(0);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToBottom: (animated = true) => scrollRef.current?.scrollToOffset({ animated, offset: 0 }),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    const latestMessage = nextMessages[nextMessages.length - 1];\n    if (!latestMessage) return;\n\n    if (hasReachedToBottom(yPos.current)) {\n      onBottomReached();\n    } else if (isMyMessage(latestMessage, currentUserId)) {\n      scrollRef.current?.scrollToOffset({ animated: false, offset: 0 });\n    }\n  }, [onBottomReached, nextMessages, currentUserId]);\n\n  const _onScroll = useCallback<NonNullable<Props['onScroll']>>(\n    (event) => {\n      const { contentOffset } = event.nativeEvent;\n      if (BOTTOM_DETECT_THRESHOLD < yPos.current && contentOffset.y <= BOTTOM_DETECT_THRESHOLD) {\n        onLeaveScrollBottom(false);\n      } else if (BOTTOM_DETECT_THRESHOLD < contentOffset.y && yPos.current <= BOTTOM_DETECT_THRESHOLD) {\n        onLeaveScrollBottom(true);\n      }\n\n      yPos.current = contentOffset.y;\n\n      onScroll?.(event);\n      if (hasReachedToBottom(yPos.current)) onBottomReached();\n    },\n    [onScroll, onBottomReached],\n  );\n\n  if (__DEV__ && !ANDROID_BUG_ALERT_SHOWED) {\n    ANDROID_BUG_ALERT_SHOWED = true;\n    // eslint-disable-next-line no-console\n    console.warn(\n      'UIKit Warning: Inverted FlatList has a performance issue on Android, Maybe this is a bug please refer link\\nhttps://github.com/facebook/react-native/issues/30034',\n    );\n  }\n\n  return (\n    <FlatList\n      bounces={false}\n      removeClippedSubviews\n      keyboardDismissMode={'on-drag'}\n      keyboardShouldPersistTaps={'handled'}\n      indicatorStyle={select({ light: 'black', dark: 'white' })}\n      {...props}\n      // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}\n      inverted={Boolean(props.data?.length)}\n      // FIXME: maintainVisibleContentPosition is not working on Android {@link https://github.com/facebook/react-native/issues/25239}\n      // maintainVisibleContentPosition={{ minIndexForVisible: 1, autoscrollToTopThreshold: AUTO_SCROLL_TO_TOP_THRESHOLD }}\n      ref={scrollRef}\n      onEndReachedThreshold={0.5}\n      onEndReached={onTopReached}\n      scrollEventThrottle={16}\n      onScroll={_onScroll}\n    />\n  );\n});\n\nexport default ChatFlatList;\n"],"mappings":"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"}
+{"version":3,"names":["ANDROID_BUG_ALERT_SHOWED","Platform","OS","BOTTOM_DETECT_THRESHOLD","hasReachedToBottom","yPos","thresholdPx","ChatFlatList","forwardRef","CustomFlatList","ref","onTopReached","nextMessages","onBottomReached","onLeaveScrollBottom","onScroll","currentUserId","props","select","useUIKitTheme","scrollRef","useRef","useImperativeHandle","scrollToBottom","animated","current","scrollToOffset","offset","useEffect","latestMessage","length","isMyMessage","_onScroll","useCallback","event","contentOffset","nativeEvent","y","__DEV__","console","warn","light","dark","Boolean","data","getMessageUniqId"],"sources":["ChatFlatList.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { FlatList, FlatListProps, Platform } from 'react-native';\n\nimport { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdMessage, getMessageUniqId, isMyMessage } from '@sendbird/uikit-utils';\n\nlet ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';\nconst BOTTOM_DETECT_THRESHOLD = 25;\n// const AUTO_SCROLL_TO_TOP_THRESHOLD = 15;\n\nfunction hasReachedToBottom(yPos: number, thresholdPx = 0) {\n  return thresholdPx >= yPos;\n}\n\nexport type ChatFlatListRef = { scrollToBottom: (animated?: boolean) => void };\ntype Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {\n  currentUserId?: string;\n  onBottomReached: () => void;\n  onTopReached: () => void;\n  nextMessages: SendbirdMessage[];\n  onLeaveScrollBottom: (value: boolean) => void;\n};\n// FIXME: Inverted FlatList performance issue on Android {@link https://github.com/facebook/react-native/issues/30034}\nconst ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(\n  { onTopReached, nextMessages, onBottomReached, onLeaveScrollBottom, onScroll, currentUserId, ...props },\n  ref,\n) {\n  const { select } = useUIKitTheme();\n  const scrollRef = useRef<FlatList<SendbirdMessage>>(null);\n  const yPos = useRef(0);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToBottom: (animated = true) => scrollRef.current?.scrollToOffset({ animated, offset: 0 }),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    const latestMessage = nextMessages[nextMessages.length - 1];\n    if (!latestMessage) return;\n\n    if (hasReachedToBottom(yPos.current)) {\n      onBottomReached();\n    } else if (isMyMessage(latestMessage, currentUserId)) {\n      scrollRef.current?.scrollToOffset({ animated: false, offset: 0 });\n    }\n  }, [onBottomReached, nextMessages, currentUserId]);\n\n  const _onScroll = useCallback<NonNullable<Props['onScroll']>>(\n    (event) => {\n      const { contentOffset } = event.nativeEvent;\n      if (BOTTOM_DETECT_THRESHOLD < yPos.current && contentOffset.y <= BOTTOM_DETECT_THRESHOLD) {\n        onLeaveScrollBottom(false);\n      } else if (BOTTOM_DETECT_THRESHOLD < contentOffset.y && yPos.current <= BOTTOM_DETECT_THRESHOLD) {\n        onLeaveScrollBottom(true);\n      }\n\n      yPos.current = contentOffset.y;\n\n      onScroll?.(event);\n      if (hasReachedToBottom(yPos.current)) onBottomReached();\n    },\n    [onScroll, onBottomReached],\n  );\n\n  if (__DEV__ && !ANDROID_BUG_ALERT_SHOWED) {\n    ANDROID_BUG_ALERT_SHOWED = true;\n    // eslint-disable-next-line no-console\n    console.warn(\n      'UIKit Warning: Inverted FlatList has a performance issue on Android, Maybe this is a bug please refer link\\nhttps://github.com/facebook/react-native/issues/30034',\n    );\n  }\n\n  return (\n    <FlatList\n      bounces={false}\n      removeClippedSubviews\n      keyboardDismissMode={'on-drag'}\n      keyboardShouldPersistTaps={'handled'}\n      indicatorStyle={select({ light: 'black', dark: 'white' })}\n      {...props}\n      // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}\n      inverted={Boolean(props.data?.length)}\n      // FIXME: maintainVisibleContentPosition is not working on Android {@link https://github.com/facebook/react-native/issues/25239}\n      // maintainVisibleContentPosition={{ minIndexForVisible: 1, autoscrollToTopThreshold: AUTO_SCROLL_TO_TOP_THRESHOLD }}\n      ref={scrollRef}\n      onEndReachedThreshold={0.5}\n      onEndReached={onTopReached}\n      scrollEventThrottle={16}\n      onScroll={_onScroll}\n      keyExtractor={getMessageUniqId}\n    />\n  );\n});\n\nexport default ChatFlatList;\n"],"mappings":"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"}

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

@@ -27,7 +27,8 @@ const BaseFileMessage = _ref => {
     message,
     variant,
     pressed,
-    type
+    type,
+    children
   } = _ref;
   const {
     STRINGS
@@ -37,9 +38,11 @@ const BaseFileMessage = _ref => {
   } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.container, {
+    style: [styles.bubbleContainer, {
       backgroundColor: color.background
     }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
   }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
     icon: iconMapper[type],
     size: 24,
@@ -55,17 +58,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 = (0, _uikitReactNativeFoundation.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/commonjs/components/MessageRenderer/FileMessage/BaseFileMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconMapper","audio","image","video","file","BaseFileMessage","message","variant","pressed","type","STRINGS","useLocalization","colors","useUIKitTheme","color","ui","styles","container","backgroundColor","background","padding","borderRadius","marginRight","textMsg","name","GROUP_CHANNEL","MESSAGE_BUBBLE_FILE_TITLE","createStyleSheet","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;;AACA;;AAEA;;AAEA;;;;AAGA,MAAMA,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,IAAc,IAAAC,2BAAA,GAApB;EACA,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAMC,KAAK,GAAGF,MAAM,CAACG,EAAP,CAAUT,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACQ,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEJ,KAAK,CAACK;IAAzB,CAAnB;EAAb,gBACE,6BAAC,gCAAD;IACE,IAAI,EAAEnB,UAAU,CAACS,IAAD,CADlB;IAEE,IAAI,EAAE,EAFR;IAGE,cAAc,EAAE;MAAES,eAAe,EAAEN,MAAM,CAACO,UAA1B;MAAsCC,OAAO,EAAE,CAA/C;MAAkDC,YAAY,EAAE,CAAhE;MAAmEC,WAAW,EAAE;IAAhF;EAHlB,EADF,eAME,6BAAC,gCAAD;IAAM,KAAK,MAAX;IAAY,aAAa,EAAE,QAA3B;IAAqC,aAAa,EAAE,CAApD;IAAuD,KAAK,EAAER,KAAK,CAACS,OAApE;IAA6E,KAAK,EAAEP,MAAM,CAACQ;EAA3F,GACGd,OAAO,CAACe,aAAR,CAAsBC,yBAAtB,CAAgDpB,OAAhD,CADH,CANF,CADF;AAYD,CAhBD;;AAkBA,MAAMU,MAAM,GAAG,IAAAW,4CAAA,EAAiB;EAC9BV,SAAS,EAAE;IACTW,aAAa,EAAE,KADN;IAETC,UAAU,EAAE,QAFH;IAGTC,cAAc,EAAE,QAHP;IAITC,iBAAiB,EAAE,EAJV;IAKTC,eAAe,EAAE,CALR;IAMTX,YAAY,EAAE;EANL,CADmB;EAS9BG,IAAI,EAAE;IACJS,UAAU,EAAE;EADR;AATwB,CAAjB,CAAf;eAce5B,e"}
+{"version":3,"names":["iconMapper","audio","image","video","file","BaseFileMessage","message","variant","pressed","type","children","STRINGS","useLocalization","colors","useUIKitTheme","color","ui","styles","bubbleContainer","backgroundColor","background","container","padding","borderRadius","marginRight","textMsg","name","GROUP_CHANNEL","MESSAGE_BUBBLE_FILE_TITLE","createStyleSheet","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;;AACA;;AAEA;;AAEA;;;;AAGA,MAAMA,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,IAAc,IAAAC,2BAAA,GAApB;EACA,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAMC,KAAK,GAAGF,MAAM,CAACG,EAAP,CAAUV,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACS,MAAM,CAACC,eAAR,EAAyB;MAAEC,eAAe,EAAEJ,KAAK,CAACK;IAAzB,CAAzB;EAAb,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEH,MAAM,CAACI;EAApB,gBACE,6BAAC,gCAAD;IACE,IAAI,EAAErB,UAAU,CAACS,IAAD,CADlB;IAEE,IAAI,EAAE,EAFR;IAGE,cAAc,EAAE;MAAEU,eAAe,EAAEN,MAAM,CAACO,UAA1B;MAAsCE,OAAO,EAAE,CAA/C;MAAkDC,YAAY,EAAE,CAAhE;MAAmEC,WAAW,EAAE;IAAhF;EAHlB,EADF,eAME,6BAAC,gCAAD;IAAM,KAAK,MAAX;IAAY,aAAa,EAAE,QAA3B;IAAqC,aAAa,EAAE,CAApD;IAAuD,KAAK,EAAET,KAAK,CAACU,OAApE;IAA6E,KAAK,EAAER,MAAM,CAACS;EAA3F,GACGf,OAAO,CAACgB,aAAR,CAAsBC,yBAAtB,CAAgDtB,OAAhD,CADH,CANF,CADF,EAWGI,QAXH,CADF;AAeD,CAnBD;;AAqBA,MAAMO,MAAM,GAAG,IAAAY,4CAAA,EAAiB;EAC9BX,eAAe,EAAE;IACfK,YAAY,EAAE,EADC;IAEfO,QAAQ,EAAE;EAFK,CADa;EAK9BT,SAAS,EAAE;IACTU,aAAa,EAAE,KADN;IAETC,UAAU,EAAE,QAFH;IAGTC,iBAAiB,EAAE,EAHV;IAITC,eAAe,EAAE;EAJR,CALmB;EAW9BR,IAAI,EAAE;IACJS,UAAU,EAAE;EADR;AAXwB,CAAjB,CAAf;eAgBe9B,e"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["useRetry","hasError","retryCount","Platform","OS","forceUpdate","useForceUpdate","retryCountRef","useRef","retryTimeoutRef","useEffect","reloadReservation","current","setTimeout","clearTimeout","ImageFileMessage","message","colors","useUIKitTheme","imageNotFound","setImageNotFound","useState","fileUrl","getAvailableUriFromFileMessage","style","styles","image","backgroundColor","onBackground04","key","uri","StyleSheet","absoluteFill","hide","onBackground02","createStyleSheet","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;;AACA;;AAEA;;AACA;;;;;;AAIA,MAAMA,QAAQ,GAAG,UAACC,QAAD,EAAuC;EAAA,IAAnBC,UAAmB,uEAAN,CAAM;EACtD,IAAIC,qBAAA,CAASC,EAAT,KAAgB,SAApB,EAA+B,OAAO,EAAP;EAE/B,MAAMC,WAAW,GAAG,IAAAC,0BAAA,GAApB;EACA,MAAMC,aAAa,GAAG,IAAAC,aAAA,EAAO,CAAP,CAAtB;EACA,MAAMC,eAAe,GAAG,IAAAD,aAAA,GAAxB;EAEA,IAAAE,gBAAA,EAAU,MAAM;IACd,IAAIT,QAAJ,EAAc;MACZ,MAAMU,iBAAiB,GAAG,MAAM;QAC9B,IAAIJ,aAAa,CAACK,OAAd,GAAwBV,UAA5B,EAAwC;UACtCO,eAAe,CAACG,OAAhB,GAA0BC,UAAU,CAAC,MAAM;YACzCN,aAAa,CAACK,OAAd;YACAD,iBAAiB;YACjBN,WAAW;UACZ,CAJmC,EAIjCE,aAAa,CAACK,OAAd,GAAwB,IAJS,CAApC;QAKD;MACF,CARD;;MAUA,OAAOD,iBAAiB,EAAxB;IACD,CAZD,MAYO;MACL,OAAOG,YAAY,CAACL,eAAe,CAACG,OAAjB,CAAnB;IACD;EACF,CAhBD,EAgBG,CAACX,QAAD,CAhBH;EAkBA,OAAOM,aAAa,CAACK,OAArB;AACD,CA1BD;;AA4BA,MAAMG,gBAAgB,GAAG,QAAmC;EAAA,IAAlC;IAAEC;EAAF,CAAkC;EAC1D,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoC,IAAAC,eAAA,EAAS,KAAT,CAA1C;EAEA,MAAMC,OAAO,GAAG,IAAAC,0CAAA,EAA+BP,OAA/B,CAAhB;EACA,MAAMQ,KAAK,GAAG,CAACC,MAAM,CAACC,KAAR,EAAe;IAAEC,eAAe,EAAEV,MAAM,CAACW;EAA1B,CAAf,CAAd;EAEA,MAAMC,GAAG,GAAG7B,QAAQ,CAACmB,aAAD,CAApB;EAEA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEK;EAAb,gBACE,6BAAC,iCAAD;IACE,GAAG,EAAEK,GADP;IAEE,MAAM,EAAE;MAAEC,GAAG,EAAER;IAAP,CAFV;IAGE,KAAK,EAAE,CAACS,uBAAA,CAAWC,YAAZ,EAA0Bb,aAAa,IAAIM,MAAM,CAACQ,IAAlD,CAHT;IAIE,UAAU,EAAE,OAJd;IAKE,YAAY,EAAE,QALhB;IAME,OAAO,EAAE,MAAMb,gBAAgB,CAAC,IAAD,CANjC;IAOE,MAAM,EAAE,MAAMA,gBAAgB,CAAC,KAAD;EAPhC,EADF,EAUGD,aAAa,iBACZ,6BAAC,gCAAD;IACE,cAAc,EAAEY,uBAAA,CAAWC,YAD7B;IAEE,IAAI,EAAE,gBAFR;IAGE,IAAI,EAAE,EAHR;IAIE,KAAK,EAAEf,MAAM,CAACiB;EAJhB,EAXJ,CADF;AAqBD,CA9BD;;AAgCA,MAAMT,MAAM,GAAG,IAAAU,4CAAA,EAAiB;EAC9BT,KAAK,EAAE;IACLU,KAAK,EAAE,GADF;IAELC,QAAQ,EAAE,GAFL;IAGLC,MAAM,EAAE,GAHH;IAILC,YAAY,EAAE,EAJT;IAKLC,QAAQ,EAAE;EALL,CADuB;EAQ9BP,IAAI,EAAE;IACJQ,OAAO,EAAE;EADL;AARwB,CAAjB,CAAf;eAae1B,gB"}
+{"version":3,"names":["useRetry","hasError","retryCount","Platform","OS","forceUpdate","useForceUpdate","retryCountRef","useRef","retryTimeoutRef","useEffect","reloadReservation","current","setTimeout","clearTimeout","ImageFileMessage","message","children","variant","colors","useUIKitTheme","imageNotFound","setImageNotFound","useState","fileUrl","getAvailableUriFromFileMessage","style","styles","image","backgroundColor","onBackground04","key","bubbleContainer","ui","enabled","background","uri","StyleSheet","absoluteFill","hide","onBackground02","createStyleSheet","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 style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>\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":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAIA,MAAMA,QAAQ,GAAG,UAACC,QAAD,EAAuC;EAAA,IAAnBC,UAAmB,uEAAN,CAAM;EACtD,IAAIC,qBAAA,CAASC,EAAT,KAAgB,SAApB,EAA+B,OAAO,EAAP;EAE/B,MAAMC,WAAW,GAAG,IAAAC,0BAAA,GAApB;EACA,MAAMC,aAAa,GAAG,IAAAC,aAAA,EAAO,CAAP,CAAtB;EACA,MAAMC,eAAe,GAAG,IAAAD,aAAA,GAAxB;EAEA,IAAAE,gBAAA,EAAU,MAAM;IACd,IAAIT,QAAJ,EAAc;MACZ,MAAMU,iBAAiB,GAAG,MAAM;QAC9B,IAAIJ,aAAa,CAACK,OAAd,GAAwBV,UAA5B,EAAwC;UACtCO,eAAe,CAACG,OAAhB,GAA0BC,UAAU,CAAC,MAAM;YACzCN,aAAa,CAACK,OAAd;YACAD,iBAAiB;YACjBN,WAAW;UACZ,CAJmC,EAIjCE,aAAa,CAACK,OAAd,GAAwB,IAJS,CAApC;QAKD;MACF,CARD;;MAUA,OAAOD,iBAAiB,EAAxB;IACD,CAZD,MAYO;MACL,OAAOG,YAAY,CAACL,eAAe,CAACG,OAAjB,CAAnB;IACD;EACF,CAhBD,EAgBG,CAACX,QAAD,CAhBH;EAkBA,OAAOM,aAAa,CAACK,OAArB;AACD,CA1BD;;AA4BA,MAAMG,gBAAgB,GAAG,QAAsD;EAAA,IAArD;IAAEC,OAAF;IAAWC,QAAX;IAAqBC;EAArB,CAAqD;EAC7E,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoC,IAAAC,eAAA,EAAS,KAAT,CAA1C;EAEA,MAAMC,OAAO,GAAG,IAAAC,0CAAA,EAA+BT,OAA/B,CAAhB;EACA,MAAMU,KAAK,GAAG,CAACC,MAAM,CAACC,KAAR,EAAe;IAAEC,eAAe,EAAEV,MAAM,CAACW;EAA1B,CAAf,CAAd;EAEA,MAAMC,GAAG,GAAG/B,QAAQ,CAACqB,aAAD,CAApB;EAEA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACM,MAAM,CAACK,eAAR,EAAyB;MAAEH,eAAe,EAAEV,MAAM,CAACc,EAAP,CAAUjB,OAAV,CAAkBE,OAAlB,EAA2BgB,OAA3B,CAAmCC;IAAtD,CAAzB;EAAb,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAET;EAAb,gBACE,6BAAC,iCAAD;IACE,GAAG,EAAEK,GADP;IAEE,MAAM,EAAE;MAAEK,GAAG,EAAEZ;IAAP,CAFV;IAGE,KAAK,EAAE,CAACa,uBAAA,CAAWC,YAAZ,EAA0BjB,aAAa,IAAIM,MAAM,CAACY,IAAlD,CAHT;IAIE,UAAU,EAAE,OAJd;IAKE,YAAY,EAAE,QALhB;IAME,OAAO,EAAE,MAAMjB,gBAAgB,CAAC,IAAD,CANjC;IAOE,MAAM,EAAE,MAAMA,gBAAgB,CAAC,KAAD;EAPhC,EADF,EAUGD,aAAa,iBACZ,6BAAC,gCAAD;IACE,cAAc,EAAEgB,uBAAA,CAAWC,YAD7B;IAEE,IAAI,EAAE,gBAFR;IAGE,IAAI,EAAE,EAHR;IAIE,KAAK,EAAEnB,MAAM,CAACqB;EAJhB,EAXJ,CADF,EAoBGvB,QApBH,CADF;AAwBD,CAjCD;;AAmCA,MAAMU,MAAM,GAAG,IAAAc,4CAAA,EAAiB;EAC9BT,eAAe,EAAE;IACfU,YAAY,EAAE,EADC;IAEfC,QAAQ,EAAE;EAFK,CADa;EAK9Bf,KAAK,EAAE;IACLgB,KAAK,EAAE,GADF;IAELC,QAAQ,EAAE,GAFL;IAGLC,MAAM,EAAE,GAHH;IAILJ,YAAY,EAAE,EAJT;IAKLC,QAAQ,EAAE;EALL,CALuB;EAY9BJ,IAAI,EAAE;IACJQ,OAAO,EAAE;EADL;AAZwB,CAAjB,CAAf;eAiBehC,gB"}

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

@@ -65,13 +65,15 @@ const useRetry = function (videoFileUrl) {
 
 const VideoFileMessage = _ref => {
   let {
-    message
+    message,
+    variant,
+    children
   } = _ref;
   const {
     colors
   } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
   const fileUrl = (0, _uikitUtils.getAvailableUriFromFileMessage)(message);
-  const style = [styles.image, {
+  const style = [styles.video, {
     backgroundColor: colors.onBackground04
   }];
   const {
@@ -81,12 +83,22 @@ const VideoFileMessage = _ref => {
 
   if (loading) {
     return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: [style, styles.container]
-    }, /*#__PURE__*/_react.default.createElement(PlayIcon, null));
+      style: [styles.bubbleContainer, {
+        backgroundColor: colors.ui.message[variant].enabled.background
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: [styles.bubbleContainer, styles.bubbleInnerContainer]
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: style
+    }), /*#__PURE__*/_react.default.createElement(PlayIcon, null)), children);
   }
 
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.container
+    style: [styles.bubbleContainer, {
+      backgroundColor: colors.ui.message[variant].enabled.background
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.bubbleContainer, styles.bubbleInnerContainer]
   }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Image, {
     source: {
       uri: thumbnail || fileUrl
@@ -94,7 +106,7 @@ const VideoFileMessage = _ref => {
     style: style,
     resizeMode: 'cover',
     resizeMethod: 'resize'
-  }), /*#__PURE__*/_react.default.createElement(PlayIcon, null));
+  }), /*#__PURE__*/_react.default.createElement(PlayIcon, null)), children);
 };
 
 const PlayIcon = () => {
@@ -112,15 +124,18 @@ const PlayIcon = () => {
 };
 
 const styles = (0, _uikitReactNativeFoundation.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/commonjs/components/MessageRenderer/FileMessage/VideoFileMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRetry","videoFileUrl","retryCount","state","setState","useState","thumbnail","loading","retryCountRef","useRef","retryTimeoutRef","mediaService","usePlatformService","fetchThumbnail","getVideoThumbnail","url","timeMills","then","result","path","useEffect","reloadReservation","current","setTimeout","clearTimeout","VideoFileMessage","message","colors","useUIKitTheme","fileUrl","getAvailableUriFromFileMessage","style","styles","image","backgroundColor","onBackground04","container","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","createStyleSheet","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":["useRetry","videoFileUrl","retryCount","state","setState","useState","thumbnail","loading","retryCountRef","useRef","retryTimeoutRef","mediaService","usePlatformService","fetchThumbnail","getVideoThumbnail","url","timeMills","then","result","path","useEffect","reloadReservation","current","setTimeout","clearTimeout","VideoFileMessage","message","variant","children","colors","useUIKitTheme","fileUrl","getAvailableUriFromFileMessage","style","styles","video","backgroundColor","onBackground04","bubbleContainer","ui","enabled","background","bubbleInnerContainer","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","createStyleSheet","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/commonjs/components/MessageRenderer/UserMessage/BaseUserMessage.js

@@ -11,42 +11,118 @@ var _reactNative = require("react-native");
 
 var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
 
+var _uikitUtils = require("@sendbird/uikit-utils");
+
 var _useContext = require("../../../hooks/useContext");
 
+var _common = require("../../../utils/common");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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); }
+
 const BaseUserMessage = _ref => {
   let {
     message,
     variant,
-    pressed
+    pressed,
+    children,
+    onLongPressMentionedUser,
+    onLongPressURL
   } = _ref;
   const {
-    colors
-  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+    mentionManager,
+    currentUser
+  } = (0, _useContext.useSendbirdChat)();
+  const {
+    show
+  } = (0, _useContext.useUserProfile)();
   const {
     STRINGS
   } = (0, _useContext.useLocalization)();
+  const {
+    colors,
+    palette
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.container, {
       backgroundColor: color.background
     }]
-  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.URLParsedText, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.wrapper
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     body3: true,
-    strict: true,
     color: color.textMsg
-  }, message.message, Boolean(message.updatedAt) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.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.default.createElement(_uikitReactNativeFoundation.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: _uikitUtils.urlRegexStrict,
+
+      replacer(_ref3) {
+        let {
+          match,
+          parentProps,
+          index,
+          keyPrefix
+        } = _ref3;
+        return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, _extends({}, parentProps, {
+          key: `${keyPrefix}-${index}`,
+          onPress: () => (0, _common.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.default.createElement(_uikitReactNativeFoundation.Text, {
     body3: true,
     color: color.textEdited
-  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX)));
+  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX))), children);
 };
 
 const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
   container: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  wrapper: {
     paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16
+    paddingVertical: 6
   }
 });
 var _default = BaseUserMessage;

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

@@ -1 +1 @@
-{"version":3,"names":["BaseUserMessage","message","variant","pressed","colors","useUIKitTheme","color","ui","STRINGS","useLocalization","styles","container","backgroundColor","background","textMsg","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","createStyleSheet","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;;AACA;;AAEA;;AAEA;;;;AAGA,MAAMA,eAAe,GAAG,QAAqD;EAAA,IAApD;IAAEC,OAAF;IAAWC,OAAX;IAAoBC;EAApB,CAAoD;EAC3E,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAMC,KAAK,GAAGF,MAAM,CAACG,EAAP,CAAUN,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,MAAM;IAAEK;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEN,KAAK,CAACO;IAAzB,CAAnB;EAAb,gBACE,6BAAC,yCAAD;IAAe,KAAK,MAApB;IAAqB,MAAM,MAA3B;IAA4B,KAAK,EAAEP,KAAK,CAACQ;EAAzC,GACGb,OAAO,CAACA,OADX,EAEGc,OAAO,CAACd,OAAO,CAACe,SAAT,CAAP,iBACC,6BAAC,gCAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEV,KAAK,CAACW;EAAzB,GACGT,OAAO,CAACU,aAAR,CAAsBC,6BADzB,CAHJ,CADF,CADF;AAYD,CAhBD;;AAiBA,MAAMT,MAAM,GAAG,IAAAU,4CAAA,EAAiB;EAC9BT,SAAS,EAAE;IACTU,iBAAiB,EAAE,EADV;IAETC,eAAe,EAAE,CAFR;IAGTC,YAAY,EAAE;EAHL;AADmB,CAAjB,CAAf;eAQevB,e"}
+{"version":3,"names":["BaseUserMessage","message","variant","pressed","children","onLongPressMentionedUser","onLongPressURL","mentionManager","currentUser","useSendbirdChat","show","useUserProfile","STRINGS","useLocalization","colors","palette","useUIKitTheme","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","urlRegexStrict","openUrl","textDecorationLine","shouldUseMentionedMessageTemplate","mentionedMessageTemplate","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","createStyleSheet","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 { openUrl } from '../../../utils/common';\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={() => 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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"}

package/lib/commonjs/components/MessageRenderer/UserMessage/OpenGraphUserMessage.js

@@ -15,10 +15,14 @@ var _uikitUtils = require("@sendbird/uikit-utils");
 
 var _useContext = require("../../../hooks/useContext");
 
+var _common = require("../../../utils/common");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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); }
+
 const OpenGraphUserMessage = _ref => {
   var _ogMetaData$defaultIm;
 
@@ -26,32 +30,108 @@ const OpenGraphUserMessage = _ref => {
     message,
     variant,
     pressed,
-    ogMetaData
+    ogMetaData,
+    children,
+    onLongPressMentionedUser,
+    onLongPressURL
   } = _ref;
+  const {
+    mentionManager,
+    currentUser
+  } = (0, _useContext.useSendbirdChat)();
   const {
     STRINGS
   } = (0, _useContext.useLocalization)();
+  const {
+    show
+  } = (0, _useContext.useUserProfile)();
   const {
     colors,
     select,
     palette
   } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   const [imageNotFound, setImageNotFound] = (0, _react.useState)(false);
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const containerBackground = select({
+    dark: palette.background400,
+    light: palette.background100
+  });
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.container, {
+    style: [styles.bubbleContainer, {
+      backgroundColor: containerBackground
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, styles.bubbleContainer, {
       backgroundColor: color.background
     }]
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.messageContainer
-  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.URLParsedText, {
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     body3: true,
     color: color.textMsg
-  }, message.message, Boolean(message.updatedAt) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.RegexText, {
+    body3: true,
+    color: color.textMsg,
+    patterns: [{
+      regex: mentionManager.templateRegex,
+
+      replacer(_ref2) {
+        var _message$mentionedUse;
+
+        let {
+          match,
+          groups,
+          parentProps,
+          keyPrefix,
+          index
+        } = _ref2;
+        const user = (_message$mentionedUse = message.mentionedUsers) === null || _message$mentionedUse === void 0 ? void 0 : _message$mentionedUse.find(it => it.userId === groups[2]);
+
+        if (user) {
+          const isCurrentUser = user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId);
+          return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, _extends({}, parentProps, {
+            key: `${keyPrefix}-${index}`,
+            onPress: () => show(user),
+            onLongPress: onLongPressMentionedUser,
+            style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.mentionedText, isCurrentUser && {
+              backgroundColor: palette.highlight
+            }]
+          }), `${mentionManager.asMentionedMessageText(user)}`);
+        }
+
+        return match;
+      }
+
+    }, {
+      regex: _uikitUtils.urlRegexRough,
+
+      replacer(_ref3) {
+        let {
+          match,
+          parentProps,
+          keyPrefix,
+          index
+        } = _ref3;
+        return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, _extends({}, parentProps, {
+          key: `${keyPrefix}-${index}`,
+          onPress: () => (0, _common.openUrl)(match),
+          onLongPress: onLongPressURL,
+          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.urlText]
+        }), match);
+      }
+
+    }]
+  }, mentionManager.shouldUseMentionedMessageTemplate(message) ? message.mentionedMessageTemplate : message.message), Boolean(message.updatedAt) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     body3: true,
     color: color.textEdited
   }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    activeOpacity: 0.7,
+    style: {
+      backgroundColor: select({
+        dark: palette.background500,
+        light: palette.background200
+      })
+    },
+    activeOpacity: 0.85,
     onPress: () => _reactNative.Linking.openURL(ogMetaData.url).catch()
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.ogImageContainer, {
@@ -74,10 +154,7 @@ const OpenGraphUserMessage = _ref => {
     onError: () => setImageNotFound(true)
   })])), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.ogContainer, {
-      backgroundColor: select({
-        dark: palette.background400,
-        light: palette.background100
-      })
+      backgroundColor: containerBackground
     }]
   }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     numberOfLines: 3,
@@ -93,16 +170,18 @@ const OpenGraphUserMessage = _ref => {
     numberOfLines: 1,
     caption2: true,
     color: colors.onBackground02
-  }, ogMetaData.url))));
+  }, ogMetaData.url)))), children);
 };
 
 const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
-  container: {
-    width: 240,
-    maxWidth: 240,
+  bubbleContainer: {
     borderRadius: 16,
     overflow: 'hidden'
   },
+  container: {
+    width: 240,
+    maxWidth: 240
+  },
   messageContainer: {
     paddingVertical: 6,
     paddingHorizontal: 12
@@ -126,6 +205,12 @@ const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
   ogDesc: {
     lineHeight: 14,
     marginBottom: 8
+  },
+  mentionedText: {
+    fontWeight: 'bold'
+  },
+  urlText: {
+    textDecorationLine: 'underline'
   }
 });
 var _default = OpenGraphUserMessage;