@sendbird/uikit-react-native-foundation 3.0.4 → 3.1.0

package/lib/module/ui/GroupChannelMessage/Message.file.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getFileExtension, getFileType } from '@sendbird/uikit-utils';
+import { getFileExtension, getFileType, truncate } from '@sendbird/uikit-utils';
 import Box from '../../components/Box';
 import Icon from '../../components/Icon';
 import PressBox from '../../components/PressBox';
@@ -7,12 +7,6 @@ import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import MessageContainer from './MessageContainer';
-const iconMapper = {
-  audio: 'file-audio',
-  image: 'photo',
-  video: 'play',
-  file: 'file-document'
-};
 const FileMessage = props => {
   const {
     variant = 'incoming'
@@ -35,8 +29,8 @@ const FileMessage = props => {
       style: styles.container
     }, /*#__PURE__*/React.createElement(Box, {
       style: styles.bubble
-    }, /*#__PURE__*/React.createElement(Icon, {
-      icon: iconMapper[fileType],
+    }, /*#__PURE__*/React.createElement(Icon.File, {
+      fileType: fileType,
       size: 24,
       containerStyle: {
         backgroundColor: colors.background,
@@ -50,7 +44,10 @@ const FileMessage = props => {
       numberOfLines: 1,
       color: pressed ? color.pressed.textMsg : color.enabled.textMsg,
       style: styles.name
-    }, ((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.fileName) || props.message.name)), props.children);
+    }, truncate(((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.fileName) || props.message.name, {
+      mode: 'mid',
+      maxLen: 20
+    }))), props.children);
   }));
 };
 const styles = createStyleSheet({

package/lib/module/ui/GroupChannelMessage/Message.file.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getFileExtension","getFileType","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","MessageContainer","iconMapper","audio","image","video","file","FileMessage","props","variant","colors","fileType","message","type","name","color","ui","groupChannelMessage","createElement","onPress","onLongPress","_ref","_props$strings","pressed","backgroundColor","background","enabled","style","styles","container","bubble","icon","size","containerStyle","padding","borderRadius","marginRight","body3","ellipsizeMode","numberOfLines","textMsg","strings","fileName","children","overflow","flexDirection","alignItems","paddingHorizontal","paddingVertical","flexShrink"],"sources":["Message.file.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = GroupChannelMessageProps<SendbirdFileMessage>;\n\nconst FileMessage = (props: Props) => {\n  const { variant = 'incoming' } = props;\n  const { colors } = useUIKitTheme();\n\n  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));\n  const color = colors.ui.groupChannelMessage[variant];\n\n  return (\n    <MessageContainer {...props}>\n      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>\n        {({ pressed }) => (\n          <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background} style={styles.container}>\n            <Box style={styles.bubble}>\n              <Icon\n                icon={iconMapper[fileType]}\n                size={24}\n                containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}\n              />\n              <Text\n                body3\n                ellipsizeMode={'middle'}\n                numberOfLines={1}\n                color={pressed ? color.pressed.textMsg : color.enabled.textMsg}\n                style={styles.name}\n              >\n                {props.strings?.fileName || props.message.name}\n              </Text>\n            </Box>\n            {props.children}\n          </Box>\n        )}\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    borderRadius: 16,\n  },\n  bubble: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n  name: {\n    flexShrink: 1,\n  },\n});\n\nexport default FileMessage;\n"],"mappings":"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"}
+{"version":3,"names":["React","getFileExtension","getFileType","truncate","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","MessageContainer","FileMessage","props","variant","colors","fileType","message","type","name","color","ui","groupChannelMessage","createElement","onPress","onLongPress","_ref","_props$strings","pressed","backgroundColor","background","enabled","style","styles","container","bubble","File","size","containerStyle","padding","borderRadius","marginRight","body3","ellipsizeMode","numberOfLines","textMsg","strings","fileName","mode","maxLen","children","overflow","flexDirection","alignItems","paddingHorizontal","paddingVertical","flexShrink"],"sources":["Message.file.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileExtension, getFileType, truncate } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<SendbirdFileMessage>;\n\nconst FileMessage = (props: Props) => {\n  const { variant = 'incoming' } = props;\n  const { colors } = useUIKitTheme();\n\n  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));\n  const color = colors.ui.groupChannelMessage[variant];\n\n  return (\n    <MessageContainer {...props}>\n      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>\n        {({ pressed }) => (\n          <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background} style={styles.container}>\n            <Box style={styles.bubble}>\n              <Icon.File\n                fileType={fileType}\n                size={24}\n                containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}\n              />\n              <Text\n                body3\n                ellipsizeMode={'middle'}\n                numberOfLines={1}\n                color={pressed ? color.pressed.textMsg : color.enabled.textMsg}\n                style={styles.name}\n              >\n                {truncate(props.strings?.fileName || props.message.name, { mode: 'mid', maxLen: 20 })}\n              </Text>\n            </Box>\n            {props.children}\n          </Box>\n        )}\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    borderRadius: 16,\n  },\n  bubble: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n  name: {\n    flexShrink: 1,\n  },\n});\n\nexport default FileMessage;\n"],"mappings":"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"}

package/lib/module/ui/GroupChannelMessage/Message.file.video.js

@@ -1,10 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import React from 'react';
 import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
 import Box from '../../components/Box';
-import Icon from '../../components/Icon';
-import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
 import PressBox from '../../components/PressBox';
+import { VideoThumbnail } from '../../components/VideoThumbnail';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import MessageContainer from './MessageContainer';
@@ -15,79 +13,21 @@ const VideoFileMessage = props => {
     variant = 'incoming'
   } = props;
   const {
-    colors,
-    palette,
-    select
+    colors
   } = useUIKitTheme();
   const uri = getAvailableUriFromFileMessage(props.message);
-  const {
-    thumbnail,
-    loading
-  } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));
   return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(Box, {
     style: styles.container,
     backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background
   }, /*#__PURE__*/React.createElement(PressBox, {
     activeOpacity: 0.8,
     onPress: onPress,
-    onLongPress: onLongPress,
-    style: styles.image
-  }, loading ? /*#__PURE__*/React.createElement(Box, {
-    style: StyleSheet.absoluteFill,
-    backgroundColor: select({
-      dark: palette.background400,
-      light: palette.background100
-    })
-  }) : /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
-    source: {
-      uri: thumbnail ?? 'invalid-image'
-    },
-    style: StyleSheet.absoluteFill
-  }), (loading || thumbnail !== null) && /*#__PURE__*/React.createElement(Box, {
-    style: StyleSheet.absoluteFill,
-    alignItems: 'center',
-    justifyContent: 'center'
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: 'play',
-    size: 28,
-    color: palette.onBackgroundLight02,
-    containerStyle: [styles.playIcon, {
-      backgroundColor: palette.onBackgroundDark01
-    }]
-  }))), props.children));
-};
-const useRetry = function (fetch) {
-  let retryCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
-  const [state, setState] = useState({
-    thumbnail: null,
-    loading: true
-  });
-  const retryCountRef = useRef(0);
-  const retryTimeoutRef = useRef();
-  const fetchThumbnail = useRef(fetch);
-  fetchThumbnail.current = fetch;
-  useEffect(() => {
-    if (!state.thumbnail) {
-      const reloadReservation = () => {
-        if (retryCountRef.current < retryCount) {
-          retryTimeoutRef.current = setTimeout(() => {
-            retryCountRef.current++;
-            reloadReservation();
-            fetchThumbnail.current().then(result => {
-              setState({
-                loading: false,
-                thumbnail: (result === null || result === void 0 ? void 0 : result.path) ?? null
-              });
-            });
-          }, retryCountRef.current * 5000);
-        }
-      };
-      return reloadReservation();
-    } else {
-      return clearTimeout(retryTimeoutRef.current);
-    }
-  }, [state.thumbnail]);
-  return state;
+    onLongPress: onLongPress
+  }, /*#__PURE__*/React.createElement(VideoThumbnail, {
+    style: styles.image,
+    videoSource: uri,
+    fetchThumbnailFromVideoSource: props.fetchThumbnailFromVideoSource
+  })), props.children));
 };
 const styles = createStyleSheet({
   container: {

package/lib/module/ui/GroupChannelMessage/Message.file.video.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","StyleSheet","getAvailableUriFromFileMessage","Box","Icon","ImageWithPlaceholder","PressBox","createStyleSheet","useUIKitTheme","MessageContainer","VideoFileMessage","props","onPress","onLongPress","variant","colors","palette","select","uri","message","thumbnail","loading","useRetry","fetchThumbnailFromVideoSource","createElement","style","styles","container","backgroundColor","ui","groupChannelMessage","enabled","background","activeOpacity","image","absoluteFill","dark","background400","light","background100","source","alignItems","justifyContent","icon","size","color","onBackgroundLight02","containerStyle","playIcon","onBackgroundDark01","children","fetch","retryCount","arguments","length","undefined","state","setState","retryCountRef","retryTimeoutRef","fetchThumbnail","current","reloadReservation","setTimeout","then","result","path","clearTimeout","borderRadius","overflow","maxWidth","width","height","padding"],"sources":["Message.file.video.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<\n  SendbirdFileMessage,\n  {\n    fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n  }\n>;\n\nconst VideoFileMessage = (props: Props) => {\n  const { onPress, onLongPress, variant = 'incoming' } = props;\n\n  const { colors, palette, select } = useUIKitTheme();\n  const uri = getAvailableUriFromFileMessage(props.message);\n  const { thumbnail, loading } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));\n\n  return (\n    <MessageContainer {...props}>\n      <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>\n        <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress} style={styles.image}>\n          {loading ? (\n            <Box\n              style={StyleSheet.absoluteFill}\n              backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n            />\n          ) : (\n            <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} style={StyleSheet.absoluteFill} />\n          )}\n\n          {(loading || thumbnail !== null) && (\n            <Box style={StyleSheet.absoluteFill} alignItems={'center'} justifyContent={'center'}>\n              <Icon\n                icon={'play'}\n                size={28}\n                color={palette.onBackgroundLight02}\n                containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}\n              />\n            </Box>\n          )}\n        </PressBox>\n        {props.children}\n      </Box>\n    </MessageContainer>\n  );\n};\n\nconst useRetry = (fetch: () => Promise<{ path: string } | null>, 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  const fetchThumbnail = useRef(fetch);\n  fetchThumbnail.current = fetch;\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.current().then((result) => {\n              setState({ loading: false, thumbnail: result?.path ?? null });\n            });\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};\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  image: {\n    maxWidth: 240,\n    width: 240,\n    height: 160,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  playIcon: {\n    padding: 10,\n    borderRadius: 50,\n  },\n});\nexport default VideoFileMessage;\n"],"mappings":"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"}
+{"version":3,"names":["React","getAvailableUriFromFileMessage","Box","PressBox","VideoThumbnail","createStyleSheet","useUIKitTheme","MessageContainer","VideoFileMessage","props","onPress","onLongPress","variant","colors","uri","message","createElement","style","styles","container","backgroundColor","ui","groupChannelMessage","enabled","background","activeOpacity","image","videoSource","fetchThumbnailFromVideoSource","children","borderRadius","overflow","maxWidth","width","height","playIcon","padding"],"sources":["Message.file.video.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport PressBox from '../../components/PressBox';\nimport { VideoThumbnail } from '../../components/VideoThumbnail';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<\n  SendbirdFileMessage,\n  { fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null> }\n>;\n\nconst VideoFileMessage = (props: Props) => {\n  const { onPress, onLongPress, variant = 'incoming' } = props;\n\n  const { colors } = useUIKitTheme();\n  const uri = getAvailableUriFromFileMessage(props.message);\n\n  return (\n    <MessageContainer {...props}>\n      <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>\n        <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n          <VideoThumbnail\n            style={styles.image}\n            videoSource={uri}\n            fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}\n          />\n        </PressBox>\n        {props.children}\n      </Box>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  image: {\n    maxWidth: 240,\n    width: 240,\n    height: 160,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  playIcon: {\n    padding: 10,\n    borderRadius: 50,\n  },\n});\nexport default VideoFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,SAASC,cAAc,QAAQ,iCAAiC;AAChE,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,gBAAgB,MAAM,oBAAoB;AAQjD,MAAMC,gBAAgB,GAAIC,KAAY,IAAK;EACzC,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAEC,OAAO,GAAG;EAAW,CAAC,GAAGH,KAAK;EAE5D,MAAM;IAAEI;EAAO,CAAC,GAAGP,aAAa,EAAE;EAClC,MAAMQ,GAAG,GAAGb,8BAA8B,CAACQ,KAAK,CAACM,OAAO,CAAC;EAEzD,oBACEf,KAAA,CAAAgB,aAAA,CAACT,gBAAgB,EAAKE,KAAK,eACzBT,KAAA,CAAAgB,aAAA,CAACd,GAAG;IAACe,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,eAAe,EAAEP,MAAM,CAACQ,EAAE,CAACC,mBAAmB,CAACV,OAAO,CAAC,CAACW,OAAO,CAACC;EAAW,gBACvGxB,KAAA,CAAAgB,aAAA,CAACb,QAAQ;IAACsB,aAAa,EAAE,GAAI;IAACf,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBACvEX,KAAA,CAAAgB,aAAA,CAACZ,cAAc;IACba,KAAK,EAAEC,MAAM,CAACQ,KAAM;IACpBC,WAAW,EAAEb,GAAI;IACjBc,6BAA6B,EAAEnB,KAAK,CAACmB;EAA8B,EACnE,CACO,EACVnB,KAAK,CAACoB,QAAQ,CACX,CACW;AAEvB,CAAC;AAED,MAAMX,MAAM,GAAGb,gBAAgB,CAAC;EAC9Bc,SAAS,EAAE;IACTW,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDL,KAAK,EAAE;IACLM,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXJ,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDI,QAAQ,EAAE;IACRC,OAAO,EAAE,EAAE;IACXN,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AACF,eAAetB,gBAAgB"}

package/lib/module/ui/GroupChannelMessage/MessageContainer.js

@@ -21,7 +21,8 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
     groupedWithPrev,
     message,
     onPressAvatar,
-    strings
+    strings,
+    parentMessage
   } = _ref;
   const {
     colors
@@ -41,7 +42,7 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
     uri: (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.profileUrl
   }))), /*#__PURE__*/React.createElement(Box, {
     flexShrink: 1
-  }, !groupedWithPrev && /*#__PURE__*/React.createElement(Box, {
+  }, parentMessage, !groupedWithPrev && !message.parentMessage && /*#__PURE__*/React.createElement(Box, {
     marginLeft: 12,
     marginBottom: 4
   }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/React.createElement(Text, {
@@ -66,13 +67,14 @@ MessageContainer.Outgoing = function MessageContainerOutgoing(_ref2) {
     message,
     groupedWithNext,
     strings,
-    sendingStatus
+    sendingStatus,
+    parentMessage
   } = _ref2;
   const {
     colors
   } = useUIKitTheme();
   const color = colors.ui.groupChannelMessage.outgoing;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, null, parentMessage, /*#__PURE__*/React.createElement(Box, {
     flexDirection: 'row',
     justifyContent: 'flex-end',
     alignItems: 'flex-end'
@@ -89,7 +91,7 @@ MessageContainer.Outgoing = function MessageContainerOutgoing(_ref2) {
     color: color.enabled.textTime
   }, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? getMessageTimeFormat(new Date(message.createdAt))))), /*#__PURE__*/React.createElement(Box, {
     style: styles.bubble
-  }, children));
+  }, children)));
 };
 const styles = createStyleSheet({
   bubble: {

package/lib/module/ui/GroupChannelMessage/MessageContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","getMessageTimeFormat","Box","Text","createStyleSheet","useUIKitTheme","Avatar","MessageContainer","props","variant","createElement","Incoming","Outgoing","MessageContainerIncoming","_ref","_message$sender","children","groupedWithNext","groupedWithPrev","message","onPressAvatar","strings","colors","color","ui","groupChannelMessage","incoming","flexDirection","justifyContent","alignItems","width","marginRight","isFileMessage","isUserMessage","onPress","size","uri","sender","profileUrl","flexShrink","marginLeft","marginBottom","caption1","enabled","textSenderName","numberOfLines","senderName","nickname","style","styles","bubble","caption4","textTime","sentDate","Date","createdAt","MessageContainerOutgoing","_ref2","sendingStatus","outgoing","maxWidth","overflow"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { getMessageTimeFormat } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<SendbirdMessage>;\n\nconst MessageContainer = (props: Props) => {\n  if (props.variant === 'incoming') {\n    return <MessageContainer.Incoming {...props} />;\n  } else {\n    return <MessageContainer.Outgoing {...props} />;\n  }\n};\n\nMessageContainer.Incoming = function MessageContainerIncoming({\n  children,\n  groupedWithNext,\n  groupedWithPrev,\n  message,\n  onPressAvatar,\n  strings,\n}: Props) {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage.incoming;\n\n  return (\n    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>\n      <Box width={26} marginRight={12}>\n        {(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (\n          <Pressable onPress={onPressAvatar}>\n            <Avatar size={26} uri={message.sender?.profileUrl} />\n          </Pressable>\n        )}\n      </Box>\n      <Box flexShrink={1}>\n        {!groupedWithPrev && (\n          <Box marginLeft={12} marginBottom={4}>\n            {(message.isFileMessage() || message.isUserMessage()) && (\n              <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>\n                {strings?.senderName ?? message.sender.nickname}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        <Box flexDirection={'row'} alignItems={'flex-end'}>\n          <Box style={styles.bubble}>{children}</Box>\n          {!groupedWithNext && (\n            <Box marginLeft={4}>\n              <Text caption4 color={color.enabled.textTime}>\n                {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n              </Text>\n            </Box>\n          )}\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n\nMessageContainer.Outgoing = function MessageContainerOutgoing({\n  children,\n  message,\n  groupedWithNext,\n  strings,\n  sendingStatus,\n}: Props) {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage.outgoing;\n\n  return (\n    <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>\n      <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>\n        {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}\n\n        {!groupedWithNext && (\n          <Box marginRight={4}>\n            <Text caption4 color={color.enabled.textTime}>\n              {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n            </Text>\n          </Box>\n        )}\n      </Box>\n      <Box style={styles.bubble}>{children}</Box>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubble: {\n    maxWidth: 240,\n    overflow: 'hidden',\n    flexShrink: 1,\n  },\n});\n\nexport default MessageContainer;\n"],"mappings":"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"}
+{"version":3,"names":["React","Pressable","getMessageTimeFormat","Box","Text","createStyleSheet","useUIKitTheme","Avatar","MessageContainer","props","variant","createElement","Incoming","Outgoing","MessageContainerIncoming","_ref","_message$sender","children","groupedWithNext","groupedWithPrev","message","onPressAvatar","strings","parentMessage","colors","color","ui","groupChannelMessage","incoming","flexDirection","justifyContent","alignItems","width","marginRight","isFileMessage","isUserMessage","onPress","size","uri","sender","profileUrl","flexShrink","marginLeft","marginBottom","caption1","enabled","textSenderName","numberOfLines","senderName","nickname","style","styles","bubble","caption4","textTime","sentDate","Date","createdAt","MessageContainerOutgoing","_ref2","sendingStatus","outgoing","maxWidth","overflow"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { getMessageTimeFormat } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<SendbirdMessage>;\n\nconst MessageContainer = (props: Props) => {\n  if (props.variant === 'incoming') {\n    return <MessageContainer.Incoming {...props} />;\n  } else {\n    return <MessageContainer.Outgoing {...props} />;\n  }\n};\n\nMessageContainer.Incoming = function MessageContainerIncoming({\n  children,\n  groupedWithNext,\n  groupedWithPrev,\n  message,\n  onPressAvatar,\n  strings,\n  parentMessage,\n}: Props) {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage.incoming;\n\n  return (\n    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>\n      <Box width={26} marginRight={12}>\n        {(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (\n          <Pressable onPress={onPressAvatar}>\n            <Avatar size={26} uri={message.sender?.profileUrl} />\n          </Pressable>\n        )}\n      </Box>\n      <Box flexShrink={1}>\n        {parentMessage}\n        {!groupedWithPrev && !message.parentMessage && (\n          <Box marginLeft={12} marginBottom={4}>\n            {(message.isFileMessage() || message.isUserMessage()) && (\n              <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>\n                {strings?.senderName ?? message.sender.nickname}\n              </Text>\n            )}\n          </Box>\n        )}\n\n        <Box flexDirection={'row'} alignItems={'flex-end'}>\n          <Box style={styles.bubble}>{children}</Box>\n          {!groupedWithNext && (\n            <Box marginLeft={4}>\n              <Text caption4 color={color.enabled.textTime}>\n                {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n              </Text>\n            </Box>\n          )}\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n\nMessageContainer.Outgoing = function MessageContainerOutgoing({\n  children,\n  message,\n  groupedWithNext,\n  strings,\n  sendingStatus,\n  parentMessage,\n}: Props) {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage.outgoing;\n\n  return (\n    <Box>\n      {parentMessage}\n      <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>\n        <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>\n          {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}\n          {!groupedWithNext && (\n            <Box marginRight={4}>\n              <Text caption4 color={color.enabled.textTime}>\n                {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n              </Text>\n            </Box>\n          )}\n        </Box>\n        <Box style={styles.bubble}>{children}</Box>\n      </Box>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubble: {\n    maxWidth: 240,\n    overflow: 'hidden',\n    flexShrink: 1,\n  },\n});\n\nexport default MessageContainer;\n"],"mappings":"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"}

package/lib/module/ui/GroupChannelMessage/MessageOpenGraph.js

@@ -28,7 +28,7 @@ const MessageOpenGraph = _ref => {
     } = _ref2;
     return /*#__PURE__*/React.createElement(Box, {
       backgroundColor: pressed ? color.pressed.background : color.enabled.background
-    }, Boolean(ogMetaData.defaultImage) && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
+    }, !!ogMetaData.defaultImage && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
       style: styles.ogImage,
       source: {
         uri: ogMetaData.defaultImage.url
@@ -44,7 +44,7 @@ const MessageOpenGraph = _ref => {
       body2: true,
       color: colors.onBackground01,
       style: styles.ogTitle
-    }, ogMetaData.title), Boolean(ogMetaData.description) && /*#__PURE__*/React.createElement(Text, {
+    }, ogMetaData.title), !!ogMetaData.description && /*#__PURE__*/React.createElement(Text, {
       numberOfLines: 1,
       caption2: true,
       color: colors.onBackground01,

package/lib/module/ui/GroupChannelMessage/MessageOpenGraph.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Box","ImageWithPlaceholder","PressBox","Text","createStyleSheet","useUIKitTheme","MessageOpenGraph","_ref","onPressURL","onLongPress","ogMetaData","variant","palette","select","colors","color","ui","groupChannelMessage","createElement","activeOpacity","onPress","url","_ref2","pressed","backgroundColor","background","enabled","Boolean","defaultImage","style","styles","ogImage","source","uri","ogContainer","dark","background400","light","background100","numberOfLines","body2","onBackground01","ogTitle","title","description","caption2","ogDesc","onBackground02","overflow","paddingHorizontal","paddingTop","paddingBottom","maxWidth","width","height","ogUrl","marginBottom","lineHeight"],"sources":["MessageOpenGraph.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst MessageOpenGraph = ({\n  onPressURL,\n  onLongPress,\n  ogMetaData,\n  variant,\n}: {\n  ogMetaData: Required<SendbirdUserMessage>['ogMetaData'];\n  variant: 'outgoing' | 'incoming';\n  onPressURL?: (url: string) => void;\n  onLongPress?: () => void;\n}) => {\n  const { palette, select, colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage[variant];\n\n  return (\n    <PressBox\n      activeOpacity={0.85}\n      onPress={() => typeof ogMetaData?.url === 'string' && onPressURL?.(ogMetaData.url)}\n      onLongPress={onLongPress}\n    >\n      {({ pressed }) => (\n        <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background}>\n          {Boolean(ogMetaData.defaultImage) && (\n            <ImageWithPlaceholder style={styles.ogImage} source={{ uri: ogMetaData.defaultImage.url }} />\n          )}\n\n          <Box\n            style={styles.ogContainer}\n            backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n          >\n            <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n              {ogMetaData.title}\n            </Text>\n            {Boolean(ogMetaData.description) && (\n              <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n                {ogMetaData.description}\n              </Text>\n            )}\n            <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n              {ogMetaData.url}\n            </Text>\n          </Box>\n        </Box>\n      )}\n    </PressBox>\n  );\n};\n\nconst styles = createStyleSheet({\n  ogContainer: {\n    overflow: 'hidden',\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n  },\n  ogImage: {\n    maxWidth: 240,\n    width: 240,\n    height: 136,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n});\n\nexport default MessageOpenGraph;\n"],"mappings":"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"}
+{"version":3,"names":["React","Box","ImageWithPlaceholder","PressBox","Text","createStyleSheet","useUIKitTheme","MessageOpenGraph","_ref","onPressURL","onLongPress","ogMetaData","variant","palette","select","colors","color","ui","groupChannelMessage","createElement","activeOpacity","onPress","url","_ref2","pressed","backgroundColor","background","enabled","defaultImage","style","styles","ogImage","source","uri","ogContainer","dark","background400","light","background100","numberOfLines","body2","onBackground01","ogTitle","title","description","caption2","ogDesc","onBackground02","overflow","paddingHorizontal","paddingTop","paddingBottom","maxWidth","width","height","ogUrl","marginBottom","lineHeight"],"sources":["MessageOpenGraph.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst MessageOpenGraph = ({\n  onPressURL,\n  onLongPress,\n  ogMetaData,\n  variant,\n}: {\n  ogMetaData: NonNullable<SendbirdUserMessage['ogMetaData']>;\n  variant: 'outgoing' | 'incoming';\n  onPressURL?: (url: string) => void;\n  onLongPress?: () => void;\n}) => {\n  const { palette, select, colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage[variant];\n\n  return (\n    <PressBox\n      activeOpacity={0.85}\n      onPress={() => typeof ogMetaData?.url === 'string' && onPressURL?.(ogMetaData.url)}\n      onLongPress={onLongPress}\n    >\n      {({ pressed }) => (\n        <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background}>\n          {!!ogMetaData.defaultImage && (\n            <ImageWithPlaceholder style={styles.ogImage} source={{ uri: ogMetaData.defaultImage.url }} />\n          )}\n\n          <Box\n            style={styles.ogContainer}\n            backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n          >\n            <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n              {ogMetaData.title}\n            </Text>\n            {!!ogMetaData.description && (\n              <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n                {ogMetaData.description}\n              </Text>\n            )}\n            <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n              {ogMetaData.url}\n            </Text>\n          </Box>\n        </Box>\n      )}\n    </PressBox>\n  );\n};\n\nconst styles = createStyleSheet({\n  ogContainer: {\n    overflow: 'hidden',\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n  },\n  ogImage: {\n    maxWidth: 240,\n    width: 240,\n    height: 136,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n});\n\nexport default MessageOpenGraph;\n"],"mappings":"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"}

package/lib/module/ui/GroupChannelMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["AdminMessage","FileMessage","ImageFileMessage","VideoFileMessage","UnknownMessage","UserMessage","OpenGraphUser","GroupChannelMessage","User","File","ImageFile","VideoFile","Admin","Unknown"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';\n\nimport AdminMessage from './Message.admin';\nimport FileMessage from './Message.file';\nimport ImageFileMessage from './Message.file.image';\nimport VideoFileMessage from './Message.file.video';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUser from './Message.user.og';\n\nexport type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n  channel: SendbirdGroupChannel;\n  message: T;\n  variant?: 'outgoing' | 'incoming';\n  strings?: {\n    senderName?: string;\n    sentDate?: string;\n    edited?: string;\n    fileName?: string;\n    unknownTitle?: string;\n    unknownDescription?: string;\n  };\n\n  children?: React.ReactNode;\n  sendingStatus?: React.ReactNode;\n\n  groupedWithPrev: boolean;\n  groupedWithNext: boolean;\n  onPress?: () => void;\n  onLongPress?: () => void;\n  onPressAvatar?: () => void;\n  onPressURL?: (url: string) => void;\n  onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;\n} & AdditionalProps;\n\nconst GroupChannelMessage = {\n  User: UserMessage,\n  OpenGraphUser: OpenGraphUser,\n  File: FileMessage,\n  ImageFile: ImageFileMessage,\n  VideoFile: VideoFileMessage,\n  Admin: AdminMessage,\n  Unknown: UnknownMessage,\n};\n\nexport default GroupChannelMessage;\n"],"mappings":"AAIA,OAAOA,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,aAAa,MAAM,mBAAmB;AA2B7C,MAAMC,mBAAmB,GAAG;EAC1BC,IAAI,EAAEH,WAAW;EACjBC,aAAa,EAAEA,aAAa;EAC5BG,IAAI,EAAER,WAAW;EACjBS,SAAS,EAAER,gBAAgB;EAC3BS,SAAS,EAAER,gBAAgB;EAC3BS,KAAK,EAAEZ,YAAY;EACnBa,OAAO,EAAET;AACX,CAAC;AAED,eAAeG,mBAAmB"}
+{"version":3,"names":["AdminMessage","FileMessage","ImageFileMessage","VideoFileMessage","UnknownMessage","UserMessage","OpenGraphUser","GroupChannelMessage","User","File","ImageFile","VideoFile","Admin","Unknown"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';\n\nimport AdminMessage from './Message.admin';\nimport FileMessage from './Message.file';\nimport ImageFileMessage from './Message.file.image';\nimport VideoFileMessage from './Message.file.video';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUser from './Message.user.og';\n\nexport type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n  channel: SendbirdGroupChannel;\n  message: T;\n  variant?: 'outgoing' | 'incoming';\n  strings?: {\n    senderName?: string;\n    sentDate?: string;\n    edited?: string;\n    fileName?: string;\n    unknownTitle?: string;\n    unknownDescription?: string;\n  };\n\n  children?: React.ReactNode;\n  sendingStatus?: React.ReactNode;\n  parentMessage?: React.ReactNode;\n\n  groupedWithPrev: boolean;\n  groupedWithNext: boolean;\n  onPress?: () => void;\n  onLongPress?: () => void;\n  onPressAvatar?: () => void;\n  onPressURL?: (url: string) => void;\n  onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;\n} & AdditionalProps;\n\nconst GroupChannelMessage = {\n  User: UserMessage,\n  OpenGraphUser: OpenGraphUser,\n  File: FileMessage,\n  ImageFile: ImageFileMessage,\n  VideoFile: VideoFileMessage,\n  Admin: AdminMessage,\n  Unknown: UnknownMessage,\n};\n\nexport default GroupChannelMessage;\n"],"mappings":"AAIA,OAAOA,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,aAAa,MAAM,mBAAmB;AA4B7C,MAAMC,mBAAmB,GAAG;EAC1BC,IAAI,EAAEH,WAAW;EACjBC,aAAa,EAAEA,aAAa;EAC5BG,IAAI,EAAER,WAAW;EACjBS,SAAS,EAAER,gBAAgB;EAC3BS,SAAS,EAAER,gBAAgB;EAC3BS,KAAK,EAAEZ,YAAY;EACnBa,OAAO,EAAET;AACX,CAAC;AAED,eAAeG,mBAAmB"}

package/lib/module/ui/OpenChannelMessage/Message.file.js

@@ -7,12 +7,6 @@ import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import MessageContainer from './MessageContainer';
-const iconMapper = {
-  audio: 'file-audio',
-  image: 'photo',
-  video: 'play',
-  file: 'file-document'
-};
 const FileMessage = props => {
   const {
     colors
@@ -47,8 +41,8 @@ const FileMessage = props => {
       borderRadius: 8,
       alignItems: 'flex-start',
       backgroundColor: colors.background
-    }, /*#__PURE__*/React.createElement(Icon, {
-      icon: iconMapper[type],
+    }, /*#__PURE__*/React.createElement(Icon.File, {
+      fileType: type,
       size: 32
     })), /*#__PURE__*/React.createElement(Text, {
       body3: true,

package/lib/module/ui/OpenChannelMessage/Message.file.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getFileTypeFromMessage","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","MessageContainer","iconMapper","audio","image","video","file","FileMessage","props","colors","onPress","onLongPress","rest","type","message","color","ui","openChannelMessage","default","createElement","_ref","_props$strings","pressed","padding","borderRadius","flexDirection","alignItems","justifyContent","style","backgroundColor","bubbleBackground","enabled","marginRight","background","icon","size","body3","numberOfLines","ellipsizeMode","textMsg","styles","fileName","strings","name","flexShrink"],"sources":["Message.file.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileTypeFromMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = {};\nconst FileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, ...rest } = props;\n  const type = getFileTypeFromMessage(props.message);\n  const color = colors.ui.openChannelMessage.default;\n\n  return (\n    <MessageContainer {...rest}>\n      <PressBox onPress={onPress} onLongPress={onLongPress}>\n        {({ pressed }) => {\n          return (\n            <Box\n              padding={8}\n              borderRadius={8}\n              flexDirection={'row'}\n              alignItems={'center'}\n              justifyContent={'flex-start'}\n              style={{ backgroundColor: pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground }}\n            >\n              <Box\n                padding={4}\n                marginRight={8}\n                borderRadius={8}\n                alignItems={'flex-start'}\n                backgroundColor={colors.background}\n              >\n                <Icon icon={iconMapper[type]} size={32} />\n              </Box>\n              <Text\n                body3\n                numberOfLines={1}\n                ellipsizeMode={'middle'}\n                color={color.enabled.textMsg}\n                style={styles.fileName}\n              >\n                {props.strings?.fileName || props.message.name}\n              </Text>\n            </Box>\n          );\n        }}\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  fileName: {\n    flexShrink: 1,\n  },\n});\nexport default FileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAA8BC,sBAAsB,QAAQ,uBAAuB;AAEnF,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,gBAAgB,MAAM,oBAAoB;AAGjD,MAAMC,UAAU,GAAG;EAAEC,KAAK,EAAE,YAAY;EAAEC,KAAK,EAAE,OAAO;EAAEC,KAAK,EAAE,MAAM;EAAEC,IAAI,EAAE;AAAgB,CAAU;AAGzG,MAAMC,WAAW,GAAIC,KAA0D,IAAK;EAClF,MAAM;IAAEC;EAAO,CAAC,GAAGT,aAAa,EAAE;EAClC,MAAM;IAAEU,OAAO;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAC/C,MAAMK,IAAI,GAAGnB,sBAAsB,CAACc,KAAK,CAACM,OAAO,CAAC;EAClD,MAAMC,KAAK,GAAGN,MAAM,CAACO,EAAE,CAACC,kBAAkB,CAACC,OAAO;EAElD,oBACEzB,KAAA,CAAA0B,aAAA,CAAClB,gBAAgB,EAAKW,IAAI,eACxBnB,KAAA,CAAA0B,aAAA,CAACtB,QAAQ;IAACa,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,GAClDS,IAAA,IAAiB;IAAA,IAAAC,cAAA;IAAA,IAAhB;MAAEC;IAAQ,CAAC,GAAAF,IAAA;IACX,oBACE3B,KAAA,CAAA0B,aAAA,CAACxB,GAAG;MACF4B,OAAO,EAAE,CAAE;MACXC,YAAY,EAAE,CAAE;MAChBC,aAAa,EAAE,KAAM;MACrBC,UAAU,EAAE,QAAS;MACrBC,cAAc,EAAE,YAAa;MAC7BC,KAAK,EAAE;QAAEC,eAAe,EAAEP,OAAO,GAAGP,KAAK,CAACO,OAAO,CAACQ,gBAAgB,GAAGf,KAAK,CAACgB,OAAO,CAACD;MAAiB;IAAE,gBAEtGrC,KAAA,CAAA0B,aAAA,CAACxB,GAAG;MACF4B,OAAO,EAAE,CAAE;MACXS,WAAW,EAAE,CAAE;MACfR,YAAY,EAAE,CAAE;MAChBE,UAAU,EAAE,YAAa;MACzBG,eAAe,EAAEpB,MAAM,CAACwB;IAAW,gBAEnCxC,KAAA,CAAA0B,aAAA,CAACvB,IAAI;MAACsC,IAAI,EAAEhC,UAAU,CAACW,IAAI,CAAE;MAACsB,IAAI,EAAE;IAAG,EAAG,CACtC,eACN1C,KAAA,CAAA0B,aAAA,CAACrB,IAAI;MACHsC,KAAK;MACLC,aAAa,EAAE,CAAE;MACjBC,aAAa,EAAE,QAAS;MACxBvB,KAAK,EAAEA,KAAK,CAACgB,OAAO,CAACQ,OAAQ;MAC7BX,KAAK,EAAEY,MAAM,CAACC;IAAS,GAEtB,EAAApB,cAAA,GAAAb,KAAK,CAACkC,OAAO,cAAArB,cAAA,uBAAbA,cAAA,CAAeoB,QAAQ,KAAIjC,KAAK,CAACM,OAAO,CAAC6B,IAAI,CACzC,CACH;EAEV,CAAC,CACQ,CACM;AAEvB,CAAC;AAED,MAAMH,MAAM,GAAGzC,gBAAgB,CAAC;EAC9B0C,QAAQ,EAAE;IACRG,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AACF,eAAerC,WAAW"}
+{"version":3,"names":["React","getFileTypeFromMessage","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","MessageContainer","FileMessage","props","colors","onPress","onLongPress","rest","type","message","color","ui","openChannelMessage","default","createElement","_ref","_props$strings","pressed","padding","borderRadius","flexDirection","alignItems","justifyContent","style","backgroundColor","bubbleBackground","enabled","marginRight","background","File","fileType","size","body3","numberOfLines","ellipsizeMode","textMsg","styles","fileName","strings","name","flexShrink"],"sources":["Message.file.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileTypeFromMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {};\nconst FileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, ...rest } = props;\n  const type = getFileTypeFromMessage(props.message);\n  const color = colors.ui.openChannelMessage.default;\n\n  return (\n    <MessageContainer {...rest}>\n      <PressBox onPress={onPress} onLongPress={onLongPress}>\n        {({ pressed }) => {\n          return (\n            <Box\n              padding={8}\n              borderRadius={8}\n              flexDirection={'row'}\n              alignItems={'center'}\n              justifyContent={'flex-start'}\n              style={{ backgroundColor: pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground }}\n            >\n              <Box\n                padding={4}\n                marginRight={8}\n                borderRadius={8}\n                alignItems={'flex-start'}\n                backgroundColor={colors.background}\n              >\n                <Icon.File fileType={type} size={32} />\n              </Box>\n              <Text\n                body3\n                numberOfLines={1}\n                ellipsizeMode={'middle'}\n                color={color.enabled.textMsg}\n                style={styles.fileName}\n              >\n                {props.strings?.fileName || props.message.name}\n              </Text>\n            </Box>\n          );\n        }}\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  fileName: {\n    flexShrink: 1,\n  },\n});\nexport default FileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAA8BC,sBAAsB,QAAQ,uBAAuB;AAEnF,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,gBAAgB,MAAM,oBAAoB;AAIjD,MAAMC,WAAW,GAAIC,KAA0D,IAAK;EAClF,MAAM;IAAEC;EAAO,CAAC,GAAGJ,aAAa,EAAE;EAClC,MAAM;IAAEK,OAAO;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAC/C,MAAMK,IAAI,GAAGd,sBAAsB,CAACS,KAAK,CAACM,OAAO,CAAC;EAClD,MAAMC,KAAK,GAAGN,MAAM,CAACO,EAAE,CAACC,kBAAkB,CAACC,OAAO;EAElD,oBACEpB,KAAA,CAAAqB,aAAA,CAACb,gBAAgB,EAAKM,IAAI,eACxBd,KAAA,CAAAqB,aAAA,CAACjB,QAAQ;IAACQ,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,GAClDS,IAAA,IAAiB;IAAA,IAAAC,cAAA;IAAA,IAAhB;MAAEC;IAAQ,CAAC,GAAAF,IAAA;IACX,oBACEtB,KAAA,CAAAqB,aAAA,CAACnB,GAAG;MACFuB,OAAO,EAAE,CAAE;MACXC,YAAY,EAAE,CAAE;MAChBC,aAAa,EAAE,KAAM;MACrBC,UAAU,EAAE,QAAS;MACrBC,cAAc,EAAE,YAAa;MAC7BC,KAAK,EAAE;QAAEC,eAAe,EAAEP,OAAO,GAAGP,KAAK,CAACO,OAAO,CAACQ,gBAAgB,GAAGf,KAAK,CAACgB,OAAO,CAACD;MAAiB;IAAE,gBAEtGhC,KAAA,CAAAqB,aAAA,CAACnB,GAAG;MACFuB,OAAO,EAAE,CAAE;MACXS,WAAW,EAAE,CAAE;MACfR,YAAY,EAAE,CAAE;MAChBE,UAAU,EAAE,YAAa;MACzBG,eAAe,EAAEpB,MAAM,CAACwB;IAAW,gBAEnCnC,KAAA,CAAAqB,aAAA,CAAClB,IAAI,CAACiC,IAAI;MAACC,QAAQ,EAAEtB,IAAK;MAACuB,IAAI,EAAE;IAAG,EAAG,CACnC,eACNtC,KAAA,CAAAqB,aAAA,CAAChB,IAAI;MACHkC,KAAK;MACLC,aAAa,EAAE,CAAE;MACjBC,aAAa,EAAE,QAAS;MACxBxB,KAAK,EAAEA,KAAK,CAACgB,OAAO,CAACS,OAAQ;MAC7BZ,KAAK,EAAEa,MAAM,CAACC;IAAS,GAEtB,EAAArB,cAAA,GAAAb,KAAK,CAACmC,OAAO,cAAAtB,cAAA,uBAAbA,cAAA,CAAeqB,QAAQ,KAAIlC,KAAK,CAACM,OAAO,CAAC8B,IAAI,CACzC,CACH;EAEV,CAAC,CACQ,CACM;AAEvB,CAAC;AAED,MAAMH,MAAM,GAAGrC,gBAAgB,CAAC;EAC9BsC,QAAQ,EAAE;IACRG,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AACF,eAAetC,WAAW"}

package/lib/module/ui/OpenChannelMessage/Message.file.video.js

@@ -1,98 +1,33 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
-import Box from '../../components/Box';
-import Icon from '../../components/Icon';
-import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
 import PressBox from '../../components/PressBox';
+import { VideoThumbnail } from '../../components/VideoThumbnail';
 import createStyleSheet from '../../styles/createStyleSheet';
-import useUIKitTheme from '../../theme/useUIKitTheme';
 import MessageContainer from './MessageContainer';
 const VideoFileMessage = props => {
-  const {
-    colors,
-    palette
-  } = useUIKitTheme();
   const {
     onPress,
     onLongPress,
     ...rest
   } = props;
   const uri = getAvailableUriFromFileMessage(props.message);
-  const {
-    thumbnail,
-    loading
-  } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));
   return /*#__PURE__*/React.createElement(MessageContainer, rest, /*#__PURE__*/React.createElement(PressBox, {
     style: styles.container,
     activeOpacity: 0.8,
     onPress: onPress,
     onLongPress: onLongPress
-  }, /*#__PURE__*/React.createElement(Box, {
-    borderRadius: 8,
-    overflow: 'hidden',
-    style: styles.container
-  }, loading ? /*#__PURE__*/React.createElement(Box, {
-    backgroundColor: colors.onBackground04,
-    style: {
-      width: '100%',
-      height: '100%'
-    }
-  }) : /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
-    source: {
-      uri: thumbnail ?? 'invalid-image'
-    },
-    width: '100%',
-    height: '100%'
-  }), (loading || thumbnail !== null) && /*#__PURE__*/React.createElement(Box, {
-    style: styles.iconContainer,
-    alignItems: 'center',
-    justifyContent: 'center'
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: 'play',
-    size: 28,
-    color: palette.onBackgroundLight02,
-    containerStyle: [styles.playIcon, {
-      backgroundColor: palette.onBackgroundDark01
-    }]
-  })))));
-};
-const useRetry = function (fetch) {
-  let retryCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
-  const [state, setState] = useState({
-    thumbnail: null,
-    loading: true
-  });
-  const retryCountRef = useRef(0);
-  const retryTimeoutRef = useRef();
-  const fetchThumbnail = useRef(fetch);
-  fetchThumbnail.current = fetch;
-  useEffect(() => {
-    if (!state.thumbnail) {
-      const reloadReservation = () => {
-        if (retryCountRef.current < retryCount) {
-          retryTimeoutRef.current = setTimeout(() => {
-            retryCountRef.current++;
-            reloadReservation();
-            fetchThumbnail.current().then(result => {
-              setState({
-                loading: false,
-                thumbnail: (result === null || result === void 0 ? void 0 : result.path) ?? null
-              });
-            });
-          }, retryCountRef.current * 5000);
-        }
-      };
-      return reloadReservation();
-    } else {
-      return clearTimeout(retryTimeoutRef.current);
-    }
-  }, [state.thumbnail]);
-  return state;
+  }, /*#__PURE__*/React.createElement(VideoThumbnail, {
+    style: styles.container,
+    videoSource: uri,
+    fetchThumbnailFromVideoSource: props.fetchThumbnailFromVideoSource
+  })));
 };
 const styles = createStyleSheet({
   container: {
     maxWidth: 296,
-    height: 196
+    height: 196,
+    borderRadius: 8,
+    overflow: 'hidden'
   },
   iconContainer: {
     position: 'absolute',

package/lib/module/ui/OpenChannelMessage/Message.file.video.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","getAvailableUriFromFileMessage","Box","Icon","ImageWithPlaceholder","PressBox","createStyleSheet","useUIKitTheme","MessageContainer","VideoFileMessage","props","colors","palette","onPress","onLongPress","rest","uri","message","thumbnail","loading","useRetry","fetchThumbnailFromVideoSource","createElement","style","styles","container","activeOpacity","borderRadius","overflow","backgroundColor","onBackground04","width","height","source","iconContainer","alignItems","justifyContent","icon","size","color","onBackgroundLight02","containerStyle","playIcon","onBackgroundDark01","fetch","retryCount","arguments","length","undefined","state","setState","retryCountRef","retryTimeoutRef","fetchThumbnail","current","reloadReservation","setTimeout","then","result","path","clearTimeout","maxWidth","position","padding"],"sources":["Message.file.video.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {\n  fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n};\nconst VideoFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {\n  const { colors, palette } = useUIKitTheme();\n  const { onPress, onLongPress, ...rest } = props;\n  const uri = getAvailableUriFromFileMessage(props.message);\n  const { thumbnail, loading } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));\n\n  return (\n    <MessageContainer {...rest}>\n      <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n        <Box borderRadius={8} overflow={'hidden'} style={styles.container}>\n          {loading ? (\n            <Box backgroundColor={colors.onBackground04} style={{ width: '100%', height: '100%' }} />\n          ) : (\n            <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} width={'100%'} height={'100%'} />\n          )}\n\n          {(loading || thumbnail !== null) && (\n            <Box style={styles.iconContainer} alignItems={'center'} justifyContent={'center'}>\n              <Icon\n                icon={'play'}\n                size={28}\n                color={palette.onBackgroundLight02}\n                containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}\n              />\n            </Box>\n          )}\n        </Box>\n      </PressBox>\n    </MessageContainer>\n  );\n};\nconst useRetry = (fetch: () => Promise<{ path: string } | null>, 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  const fetchThumbnail = useRef(fetch);\n  fetchThumbnail.current = fetch;\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.current().then((result) => {\n              setState({ loading: false, thumbnail: result?.path ?? null });\n            });\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};\nconst styles = createStyleSheet({\n  container: {\n    maxWidth: 296,\n    height: 196,\n  },\n  iconContainer: {\n    position: 'absolute',\n    width: '100%',\n    height: '100%',\n  },\n  playIcon: {\n    padding: 10,\n    borderRadius: 50,\n  },\n});\nexport default VideoFileMessage;\n"],"mappings":"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"}
+{"version":3,"names":["React","getAvailableUriFromFileMessage","PressBox","VideoThumbnail","createStyleSheet","MessageContainer","VideoFileMessage","props","onPress","onLongPress","rest","uri","message","createElement","style","styles","container","activeOpacity","videoSource","fetchThumbnailFromVideoSource","maxWidth","height","borderRadius","overflow","iconContainer","position","width","playIcon","padding"],"sources":["Message.file.video.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport PressBox from '../../components/PressBox';\nimport { VideoThumbnail } from '../../components/VideoThumbnail';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {\n  fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n};\n\nconst VideoFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {\n  const { onPress, onLongPress, ...rest } = props;\n  const uri = getAvailableUriFromFileMessage(props.message);\n\n  return (\n    <MessageContainer {...rest}>\n      <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n        <VideoThumbnail\n          style={styles.container}\n          videoSource={uri}\n          fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}\n        />\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    maxWidth: 296,\n    height: 196,\n    borderRadius: 8,\n    overflow: 'hidden',\n  },\n  iconContainer: {\n    position: 'absolute',\n    width: '100%',\n    height: '100%',\n  },\n  playIcon: {\n    padding: 10,\n    borderRadius: 50,\n  },\n});\nexport default VideoFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,SAASC,cAAc,QAAQ,iCAAiC;AAChE,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,gBAAgB,MAAM,oBAAoB;AAOjD,MAAMC,gBAAgB,GAAIC,KAA0D,IAAK;EACvF,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC/C,MAAMI,GAAG,GAAGV,8BAA8B,CAACM,KAAK,CAACK,OAAO,CAAC;EAEzD,oBACEZ,KAAA,CAAAa,aAAA,CAACR,gBAAgB,EAAKK,IAAI,eACxBV,KAAA,CAAAa,aAAA,CAACX,QAAQ;IAACY,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,aAAa,EAAE,GAAI;IAACT,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBAChGT,KAAA,CAAAa,aAAA,CAACV,cAAc;IACbW,KAAK,EAAEC,MAAM,CAACC,SAAU;IACxBE,WAAW,EAAEP,GAAI;IACjBQ,6BAA6B,EAAEZ,KAAK,CAACY;EAA8B,EACnE,CACO,CACM;AAEvB,CAAC;AAED,MAAMJ,MAAM,GAAGX,gBAAgB,CAAC;EAC9BY,SAAS,EAAE;IACTI,QAAQ,EAAE,GAAG;IACbC,MAAM,EAAE,GAAG;IACXC,YAAY,EAAE,CAAC;IACfC,QAAQ,EAAE;EACZ,CAAC;EACDC,aAAa,EAAE;IACbC,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,MAAM;IACbL,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRC,OAAO,EAAE,EAAE;IACXN,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AACF,eAAehB,gBAAgB"}

package/lib/module/ui/OpenChannelMessage/Message.user.og.js

@@ -90,7 +90,7 @@ const OpenGraphUserMessage = props => {
       numberOfLines: 2,
       caption2: true,
       color: colors.onBackground01
-    }, props.message.ogMetaData.description), Boolean(props.message.ogMetaData.defaultImage) && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
+    }, props.message.ogMetaData.description), !!props.message.ogMetaData.defaultImage && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
       style: styles.ogImage,
       source: {
         uri: props.message.ogMetaData.defaultImage.url