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

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.image.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
 import Box from '../../components/Box';
 import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
 import PressBox from '../../components/PressBox';
@@ -11,7 +11,7 @@ const ImageFileMessage = props => {
     onLongPress,
     ...rest
   } = props;
-  const uri = getAvailableUriFromFileMessage(props.message);
+  const uri = getThumbnailUriFromFileMessage(props.message);
   return /*#__PURE__*/React.createElement(MessageContainer, rest, /*#__PURE__*/React.createElement(Box, {
     borderRadius: 8,
     overflow: 'hidden',

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

@@ -1 +1 @@
-{"version":3,"names":["React","getAvailableUriFromFileMessage","Box","ImageWithPlaceholder","PressBox","createStyleSheet","MessageContainer","ImageFileMessage","props","onPress","onLongPress","rest","uri","message","createElement","borderRadius","overflow","style","styles","container","activeOpacity","source","width","height","maxWidth"],"sources":["Message.file.image.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 ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\nconst ImageFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage>) => {\n  const { onPress, onLongPress, ...rest } = props;\n  const uri = getAvailableUriFromFileMessage(props.message);\n  return (\n    <MessageContainer {...rest}>\n      <Box borderRadius={8} overflow={'hidden'} style={styles.container}>\n        <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n          <ImageWithPlaceholder source={{ uri }} width={'100%'} height={'100%'} />\n        </PressBox>\n      </Box>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    maxWidth: 296,\n    height: 196,\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,oBAAoB,MAAM,uCAAuC;AACxE,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,gBAAgB,MAAM,oBAAoB;AAGjD,MAAMC,gBAAgB,GAAIC,KAAmD,IAAK;EAChF,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC/C,MAAMI,GAAG,GAAGX,8BAA8B,CAACO,KAAK,CAACK,OAAO,CAAC;EACzD,oBACEb,KAAA,CAAAc,aAAA,CAACR,gBAAgB,EAAKK,IAAI,eACxBX,KAAA,CAAAc,aAAA,CAACZ,GAAG;IAACa,YAAY,EAAE,CAAE;IAACC,QAAQ,EAAE,QAAS;IAACC,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAChEnB,KAAA,CAAAc,aAAA,CAACV,QAAQ;IAACa,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,aAAa,EAAE,GAAI;IAACX,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBAChGV,KAAA,CAAAc,aAAA,CAACX,oBAAoB;IAACkB,MAAM,EAAE;MAAET;IAAI,CAAE;IAACU,KAAK,EAAE,MAAO;IAACC,MAAM,EAAE;EAAO,EAAG,CAC/D,CACP,CACW;AAEvB,CAAC;AAED,MAAML,MAAM,GAAGb,gBAAgB,CAAC;EAC9Bc,SAAS,EAAE;IACTK,QAAQ,EAAE,GAAG;IACbD,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,eAAehB,gBAAgB"}
+{"version":3,"names":["React","getThumbnailUriFromFileMessage","Box","ImageWithPlaceholder","PressBox","createStyleSheet","MessageContainer","ImageFileMessage","props","onPress","onLongPress","rest","uri","message","createElement","borderRadius","overflow","style","styles","container","activeOpacity","source","width","height","maxWidth"],"sources":["Message.file.image.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\nconst ImageFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage>) => {\n  const { onPress, onLongPress, ...rest } = props;\n  const uri = getThumbnailUriFromFileMessage(props.message);\n  return (\n    <MessageContainer {...rest}>\n      <Box borderRadius={8} overflow={'hidden'} style={styles.container}>\n        <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n          <ImageWithPlaceholder source={{ uri }} width={'100%'} height={'100%'} />\n        </PressBox>\n      </Box>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    maxWidth: 296,\n    height: 196,\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,oBAAoB,MAAM,uCAAuC;AACxE,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,gBAAgB,MAAM,oBAAoB;AAGjD,MAAMC,gBAAgB,GAAIC,KAAmD,IAAK;EAChF,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC/C,MAAMI,GAAG,GAAGX,8BAA8B,CAACO,KAAK,CAACK,OAAO,CAAC;EACzD,oBACEb,KAAA,CAAAc,aAAA,CAACR,gBAAgB,EAAKK,IAAI,eACxBX,KAAA,CAAAc,aAAA,CAACZ,GAAG;IAACa,YAAY,EAAE,CAAE;IAACC,QAAQ,EAAE,QAAS;IAACC,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAChEnB,KAAA,CAAAc,aAAA,CAACV,QAAQ;IAACa,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,aAAa,EAAE,GAAI;IAACX,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBAChGV,KAAA,CAAAc,aAAA,CAACX,oBAAoB;IAACkB,MAAM,EAAE;MAAET;IAAI,CAAE;IAACU,KAAK,EAAE,MAAO;IAACC,MAAM,EAAE;EAAO,EAAG,CAC/D,CACP,CACW;AAEvB,CAAC;AAED,MAAML,MAAM,GAAGb,gBAAgB,CAAC;EAC9Bc,SAAS,EAAE;IACTK,QAAQ,EAAE,GAAG;IACbD,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,eAAehB,gBAAgB"}

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 { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
-import Box from '../../components/Box';
-import Icon from '../../components/Icon';
-import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import React from 'react';
+import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
 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));
+  const uri = getThumbnailUriFromFileMessage(props.message);
   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,
+    source: 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","getThumbnailUriFromFileMessage","PressBox","VideoThumbnail","createStyleSheet","MessageContainer","VideoFileMessage","props","onPress","onLongPress","rest","uri","message","createElement","style","styles","container","activeOpacity","source","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 { getThumbnailUriFromFileMessage } 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 = getThumbnailUriFromFileMessage(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          source={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,MAAM,EAAEP,GAAI;IACZQ,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

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

@@ -1 +1 @@
-{"version":3,"names":["React","urlRegexRough","Box","ImageWithPlaceholder","PressBox","RegexText","Text","createStyleSheet","useUIKitTheme","MessageContainer","OpenGraphUserMessage","props","colors","onPress","onLongPress","onPressURL","rest","color","ui","openChannelMessage","default","createElement","_ref","_props$strings","pressed","_extends","body3","enabled","textMsg","patterns","regex","replacer","_ref2","match","parentProps","keyPrefix","index","key","primary","style","message","Boolean","updatedAt","textMsgPostfix","strings","edited","ogMetaData","grouped","styles","ogContainer","_props$message$ogMeta","url","_ref3","padding","borderRadius","backgroundColor","bubbleBackground","numberOfLines","caption2","onBackground02","ogUrl","body2","ogTitle","title","description","onBackground01","defaultImage","ogImage","source","uri","maxWidth","marginBottom","width","height","marginTop"],"sources":["Message.user.og.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\nimport { urlRegexRough } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport RegexText from '../../components/RegexText';\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 OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, onPressURL, ...rest } = props;\n  const color = colors.ui.openChannelMessage.default;\n\n  return (\n    <Box>\n      <PressBox onPress={onPress} onLongPress={onLongPress}>\n        {({ pressed }) => (\n          <MessageContainer pressed={pressed} {...rest}>\n            <Text body3 color={color.enabled.textMsg}>\n              <RegexText\n                body3\n                color={color.enabled.textMsg}\n                patterns={[\n                  {\n                    regex: urlRegexRough,\n                    replacer({ match, parentProps, keyPrefix, index }) {\n                      return (\n                        <Text\n                          {...parentProps}\n                          key={`${keyPrefix}-${index}`}\n                          onPress={() => onPressURL?.(match)}\n                          onLongPress={onLongPress}\n                          color={colors.primary}\n                          style={parentProps?.style}\n                        >\n                          {match}\n                        </Text>\n                      );\n                    },\n                  },\n                ]}\n              >\n                {props.message.message}\n              </RegexText>\n              {Boolean(props.message.updatedAt) && (\n                <Text body3 color={color.enabled.textMsgPostfix}>\n                  {props.strings?.edited ?? ' (edited)'}\n                </Text>\n              )}\n            </Text>\n          </MessageContainer>\n        )}\n      </PressBox>\n      {props.message.ogMetaData && (\n        <MessageContainer {...rest} grouped>\n          <PressBox\n            style={styles.ogContainer}\n            onPress={() => props.message.ogMetaData?.url && onPressURL?.(props.message.ogMetaData.url)}\n            onLongPress={onLongPress}\n          >\n            {({ pressed }) =>\n              props.message.ogMetaData && (\n                <Box\n                  padding={8}\n                  borderRadius={8}\n                  style={styles.ogContainer}\n                  backgroundColor={pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground}\n                >\n                  <Text numberOfLines={1} caption2 color={colors.onBackground02} style={styles.ogUrl}>\n                    {props.message.ogMetaData.url}\n                  </Text>\n\n                  <Text numberOfLines={2} body2 color={colors.primary} style={styles.ogTitle}>\n                    {props.message.ogMetaData.title}\n                  </Text>\n\n                  {Boolean(props.message.ogMetaData.description) && (\n                    <Text numberOfLines={2} caption2 color={colors.onBackground01}>\n                      {props.message.ogMetaData.description}\n                    </Text>\n                  )}\n\n                  {Boolean(props.message.ogMetaData.defaultImage) && (\n                    <ImageWithPlaceholder\n                      style={styles.ogImage}\n                      source={{ uri: props.message.ogMetaData.defaultImage.url }}\n                    />\n                  )}\n                </Box>\n              )\n            }\n          </PressBox>\n        </MessageContainer>\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  ogContainer: {\n    maxWidth: 296,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 8,\n  },\n  ogImage: {\n    width: '100%',\n    height: 156,\n    marginTop: 12,\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}
+{"version":3,"names":["React","urlRegexRough","Box","ImageWithPlaceholder","PressBox","RegexText","Text","createStyleSheet","useUIKitTheme","MessageContainer","OpenGraphUserMessage","props","colors","onPress","onLongPress","onPressURL","rest","color","ui","openChannelMessage","default","createElement","_ref","_props$strings","pressed","_extends","body3","enabled","textMsg","patterns","regex","replacer","_ref2","match","parentProps","keyPrefix","index","key","primary","style","message","Boolean","updatedAt","textMsgPostfix","strings","edited","ogMetaData","grouped","styles","ogContainer","_props$message$ogMeta","url","_ref3","padding","borderRadius","backgroundColor","bubbleBackground","numberOfLines","caption2","onBackground02","ogUrl","body2","ogTitle","title","description","onBackground01","defaultImage","ogImage","source","uri","maxWidth","marginBottom","width","height","marginTop"],"sources":["Message.user.og.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\nimport { urlRegexRough } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport RegexText from '../../components/RegexText';\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 OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, onPressURL, ...rest } = props;\n  const color = colors.ui.openChannelMessage.default;\n\n  return (\n    <Box>\n      <PressBox onPress={onPress} onLongPress={onLongPress}>\n        {({ pressed }) => (\n          <MessageContainer pressed={pressed} {...rest}>\n            <Text body3 color={color.enabled.textMsg}>\n              <RegexText\n                body3\n                color={color.enabled.textMsg}\n                patterns={[\n                  {\n                    regex: urlRegexRough,\n                    replacer({ match, parentProps, keyPrefix, index }) {\n                      return (\n                        <Text\n                          {...parentProps}\n                          key={`${keyPrefix}-${index}`}\n                          onPress={() => onPressURL?.(match)}\n                          onLongPress={onLongPress}\n                          color={colors.primary}\n                          style={parentProps?.style}\n                        >\n                          {match}\n                        </Text>\n                      );\n                    },\n                  },\n                ]}\n              >\n                {props.message.message}\n              </RegexText>\n              {Boolean(props.message.updatedAt) && (\n                <Text body3 color={color.enabled.textMsgPostfix}>\n                  {props.strings?.edited ?? ' (edited)'}\n                </Text>\n              )}\n            </Text>\n          </MessageContainer>\n        )}\n      </PressBox>\n      {props.message.ogMetaData && (\n        <MessageContainer {...rest} grouped>\n          <PressBox\n            style={styles.ogContainer}\n            onPress={() => props.message.ogMetaData?.url && onPressURL?.(props.message.ogMetaData.url)}\n            onLongPress={onLongPress}\n          >\n            {({ pressed }) =>\n              props.message.ogMetaData && (\n                <Box\n                  padding={8}\n                  borderRadius={8}\n                  style={styles.ogContainer}\n                  backgroundColor={pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground}\n                >\n                  <Text numberOfLines={1} caption2 color={colors.onBackground02} style={styles.ogUrl}>\n                    {props.message.ogMetaData.url}\n                  </Text>\n\n                  <Text numberOfLines={2} body2 color={colors.primary} style={styles.ogTitle}>\n                    {props.message.ogMetaData.title}\n                  </Text>\n\n                  {Boolean(props.message.ogMetaData.description) && (\n                    <Text numberOfLines={2} caption2 color={colors.onBackground01}>\n                      {props.message.ogMetaData.description}\n                    </Text>\n                  )}\n\n                  {!!props.message.ogMetaData.defaultImage && (\n                    <ImageWithPlaceholder\n                      style={styles.ogImage}\n                      source={{ uri: props.message.ogMetaData.defaultImage.url }}\n                    />\n                  )}\n                </Box>\n              )\n            }\n          </PressBox>\n        </MessageContainer>\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  ogContainer: {\n    maxWidth: 296,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 8,\n  },\n  ogImage: {\n    width: '100%',\n    height: 156,\n    marginTop: 12,\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}

package/lib/typescript/src/components/Icon/index.d.ts

@@ -1,4 +1,5 @@
 import { ImageStyle, StyleProp, ViewStyle } from 'react-native';
+import { FileType } from '@sendbird/uikit-utils';
 import IconAssets from '../../assets/icon';
 type IconNames = keyof typeof IconAssets;
 type Props = {
@@ -10,5 +11,9 @@ type Props = {
 };
 declare const Icon: ((props: Props) => JSX.Element) & {
     Assets: typeof IconAssets;
+    File: typeof FileIcon;
 };
+declare const FileIcon: ({ fileType, ...props }: Omit<Props, "icon"> & {
+    fileType: FileType;
+}) => JSX.Element;
 export default Icon;

package/lib/typescript/src/components/VideoThumbnail/index.d.ts

@@ -0,0 +1,13 @@
+import { StyleProp, ViewStyle } from 'react-native';
+type Props = {
+    source: string;
+    fetchThumbnailFromVideoSource: (uri: string) => Promise<{
+        path: string;
+    } | null>;
+    style?: StyleProp<ViewStyle>;
+    iconSize?: number;
+    /** @deprecated please use `source` prop **/
+    videoSource?: string;
+};
+export declare const VideoThumbnail: ({ fetchThumbnailFromVideoSource, style, source, videoSource, iconSize }: Props) => JSX.Element;
+export {};

package/lib/typescript/src/index.d.ts

@@ -13,6 +13,7 @@ export type { RegexTextPattern } from './components/RegexText';
 export { default as Switch } from './components/Switch';
 export { default as Text } from './components/Text';
 export { default as TextInput } from './components/TextInput';
+export { VideoThumbnail } from './components/VideoThumbnail';
 /** UI **/
 export { default as ActionMenu } from './ui/ActionMenu';
 export { default as Alert } from './ui/Alert';

package/lib/typescript/src/types.d.ts

@@ -72,7 +72,7 @@ export type ComponentColorTree = GetColorTree<{
     ColorPart: {
         Header: 'background' | 'borderBottom';
         Button: 'background' | 'content';
-        Dialog: 'background' | 'text' | 'message' | 'highlight' | 'destructive';
+        Dialog: 'background' | 'text' | 'message' | 'highlight' | 'destructive' | 'blurred';
         Input: 'text' | 'placeholder' | 'background' | 'highlight';
         Badge: 'text' | 'background';
         Placeholder: 'content' | 'highlight';

package/lib/typescript/src/ui/BottomSheet/index.d.ts

@@ -8,6 +8,7 @@ export type BottomSheetItem = {
         iconColor?: string;
         title: string;
         titleColor?: string;
+        disabled?: boolean;
         onPress: () => void;
     }[];
     HeaderComponent?: (props: HeaderProps) => JSX.Element;

package/lib/typescript/src/ui/Dialog/DialogSheet.d.ts

@@ -12,6 +12,7 @@ export type SheetItemProps = {
     iconColor?: string;
     title: string;
     titleColor?: string;
+    disabled?: boolean;
 };
-declare const SheetItem: ({ icon, title, iconColor, titleColor }: SheetItemProps) => JSX.Element;
+declare const SheetItem: ({ icon, title, iconColor, titleColor, disabled }: SheetItemProps) => JSX.Element;
 export default DialogSheet;

package/lib/typescript/src/ui/GroupChannelMessage/MessageContainer.d.ts

@@ -3,7 +3,7 @@ import type { GroupChannelMessageProps } from './index';
 type Props = GroupChannelMessageProps<SendbirdMessage>;
 declare const MessageContainer: {
     (props: Props): JSX.Element;
-    Incoming({ children, groupedWithNext, groupedWithPrev, message, onPressAvatar, strings, }: Props): JSX.Element;
-    Outgoing({ children, message, groupedWithNext, strings, sendingStatus, }: Props): JSX.Element;
+    Incoming({ children, groupedWithNext, groupedWithPrev, message, onPressAvatar, strings, parentMessage, }: Props): JSX.Element;
+    Outgoing({ children, message, groupedWithNext, strings, sendingStatus, parentMessage, }: Props): JSX.Element;
 };
 export default MessageContainer;

package/lib/typescript/src/ui/GroupChannelMessage/MessageOpenGraph.d.ts

@@ -1,6 +1,6 @@
 import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
 declare const MessageOpenGraph: ({ onPressURL, onLongPress, ogMetaData, variant, }: {
-    ogMetaData: Required<SendbirdUserMessage>['ogMetaData'];
+    ogMetaData: NonNullable<SendbirdUserMessage['ogMetaData']>;
     variant: 'outgoing' | 'incoming';
     onPressURL?: ((url: string) => void) | undefined;
     onLongPress?: (() => void) | undefined;

package/lib/typescript/src/ui/GroupChannelMessage/index.d.ts

@@ -14,6 +14,7 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
     };
     children?: React.ReactNode;
     sendingStatus?: React.ReactNode;
+    parentMessage?: React.ReactNode;
     groupedWithPrev: boolean;
     groupedWithNext: boolean;
     onPress?: () => void;
@@ -37,6 +38,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -62,6 +64,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -87,6 +90,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -109,6 +113,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -131,6 +136,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -157,6 +163,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -179,6 +186,7 @@ declare const GroupChannelMessage: {
         } | undefined;
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
+        parentMessage?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "3.0.4",
+  "version": "3.1.1",
   "description": "A foundational UI kit for building chat-enabled React Native apps.",
   "keywords": [
     "sendbird",
@@ -47,7 +47,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "3.0.4"
+    "@sendbird/uikit-utils": "3.1.1"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -89,5 +89,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native-foundation"
   },
-  "gitHead": "bf8ff3723f82f75ccf994938d6e5468e6fb669be"
+  "gitHead": "cc1e2d626a4a3278e80d523b4c63fd3719c82441"
 }

package/src/components/Icon/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
+import { FileType, convertFileTypeToMessageType, getFileIconFromMessageType } from '@sendbird/uikit-utils';
+
 import IconAssets from '../../assets/icon';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
@@ -15,13 +17,10 @@ type Props = {
   style?: StyleProp<ImageStyle>;
   containerStyle?: StyleProp<ViewStyle>;
 };
-const Icon: ((props: Props) => JSX.Element) & { Assets: typeof IconAssets } = ({
-  icon,
-  color,
-  size = 24,
-  containerStyle,
-  style,
-}) => {
+const Icon: ((props: Props) => JSX.Element) & {
+  Assets: typeof IconAssets;
+  File: typeof FileIcon;
+} = ({ icon, color, size = 24, containerStyle, style }) => {
   const sizeStyle = sizeStyles[size as SizeFactor] ?? { width: size, height: size };
   const { colors } = useUIKitTheme();
   return (
@@ -35,6 +34,10 @@ const Icon: ((props: Props) => JSX.Element) & { Assets: typeof IconAssets } = ({
   );
 };
 
+const FileIcon = ({ fileType, ...props }: Omit<Props, 'icon'> & { fileType: FileType }) => {
+  return <Icon icon={getFileIconFromMessageType(convertFileTypeToMessageType(fileType))} {...props} />;
+};
+
 const containerStyles = StyleSheet.create({
   container: {
     alignItems: 'center',
@@ -66,4 +69,5 @@ const sizeStyles = createStyleSheet({
 });
 
 Icon.Assets = IconAssets;
+Icon.File = FileIcon;
 export default Icon;

package/src/components/VideoThumbnail/index.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+import { isImage } from '@sendbird/uikit-utils';
+
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Box from '../Box';
+import Icon from '../Icon';
+import ImageWithPlaceholder from '../ImageWithPlaceholder';
+
+type Props = {
+  source: string;
+  fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
+
+  style?: StyleProp<ViewStyle>;
+  iconSize?: number;
+  /** @deprecated please use `source` prop **/
+  videoSource?: string;
+};
+
+export const VideoThumbnail = ({ fetchThumbnailFromVideoSource, style, source, videoSource, iconSize = 28 }: Props) => {
+  const { palette, select } = useUIKitTheme();
+  const { thumbnail, loading } = useRetry(async () => {
+    if (isImage(source ?? videoSource)) return { path: source ?? videoSource };
+    return fetchThumbnailFromVideoSource(source ?? videoSource);
+  });
+
+  return (
+    <Box style={style}>
+      {loading ? (
+        <Box
+          style={StyleSheet.absoluteFill}
+          backgroundColor={select({ dark: palette.background400, light: palette.background100 })}
+        />
+      ) : (
+        <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} style={StyleSheet.absoluteFill} />
+      )}
+
+      {(loading || thumbnail !== null) && iconSize > 0 && (
+        <Box style={StyleSheet.absoluteFill} alignItems={'center'} justifyContent={'center'}>
+          <Icon
+            icon={'play'}
+            size={iconSize}
+            color={palette.onBackgroundLight02}
+            containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+const useRetry = (fetch: () => Promise<{ path: string } | null>, retryCount = 5) => {
+  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });
+  const retryCountRef = useRef(0);
+  const fetchThumbnail = useRef(fetch);
+  fetchThumbnail.current = fetch;
+
+  useEffect(() => {
+    let _timeout: NodeJS.Timeout;
+    let _cancelled = false;
+
+    if (!state.thumbnail) {
+      const tryFetchThumbnail = (timeout: number) => {
+        const retry = () => {
+          retryCountRef.current++;
+          tryFetchThumbnail(timeout + 5000);
+        };
+
+        const finish = (path: string | null) => {
+          if (!_cancelled) setState({ loading: false, thumbnail: path });
+        };
+
+        if (retryCountRef.current < retryCount) {
+          _timeout = setTimeout(() => {
+            fetchThumbnail
+              .current()
+              .then((result) => {
+                if (result === null) retry();
+                else finish(result.path);
+              })
+              .catch(() => retry());
+          }, timeout);
+        } else {
+          finish(null);
+        }
+      };
+
+      tryFetchThumbnail(0);
+    }
+
+    return () => {
+      _cancelled = true;
+      clearTimeout(_timeout);
+    };
+  }, [state.thumbnail]);
+
+  return state;
+};
+
+const styles = createStyleSheet({
+  playIcon: {
+    padding: 10,
+    borderRadius: 50,
+  },
+});