@sendbird/uikit-react-native 1.0.2 → 1.1.0

package/lib/module/components/FileViewer.js

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

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

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

package/lib/module/components/GroupChannelPreviewContainer.js

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { GroupChannelPreview, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import Icon from '@sendbird/uikit-react-native-foundation/src/ui/Icon';
+import { getFileExtension, getFileType, isDifferentChannel, isMyMessage, useForceUpdate, useIIFE, useUniqId } from '@sendbird/uikit-utils';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+import ChannelCover from './ChannelCover';
+import SBUPressable from './SBUPressable';
+const iconMapper = {
+  audio: 'file-audio',
+  image: 'photo',
+  video: 'play',
+  file: 'file-document'
+};
+
+const GroupChannelPreviewContainer = _ref => {
+  let {
+    onPress,
+    onLongPress,
+    channel
+  } = _ref;
+  const {
+    currentUser,
+    sdk,
+    features
+  } = useSendbirdChat();
+  const {
+    STRINGS
+  } = useLocalization();
+  const {
+    colors
+  } = useUIKitTheme();
+  const [typingUsers, setTypingUsers] = useState([]);
+  const forceUpdate = useForceUpdate();
+
+  if (features.channelListTypingIndicatorEnabled) {
+    const typingId = useUniqId('GroupChannelPreviewContainer');
+    useChannelHandler(sdk, `GroupChannelPreviewContainer_TypingIndicator_${typingId}`, {
+      onTypingStatusUpdated(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        setTypingUsers(eventChannel.getTypingUsers());
+      }
+
+    });
+  }
+
+  if (features.channelListMessageReceiptStatusEnabled) {
+    const receiptId = useUniqId('GroupChannelPreviewContainer');
+    useChannelHandler(sdk, `GroupChannelPreviewContainer_ReceiptStatus_${receiptId}`, {
+      onDeliveryReceiptUpdated(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;
+        if (!isMyMessage(eventChannel.lastMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId)) return;
+        forceUpdate();
+      },
+
+      onReadReceiptUpdated(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;
+        if (!isMyMessage(eventChannel.lastMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId)) return;
+        forceUpdate();
+      }
+
+    });
+  }
+
+  const bodyText = useIIFE(() => {
+    if (typingUsers.length > 0) return STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers) || '';else return STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel);
+  });
+  const bodyIcon = useIIFE(() => {
+    var _channel$lastMessage;
+
+    if (!((_channel$lastMessage = channel.lastMessage) !== null && _channel$lastMessage !== void 0 && _channel$lastMessage.isFileMessage())) return undefined;
+    return iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))];
+  });
+  const titleCaptionIcon = useIIFE(() => {
+    if (!channel.lastMessage) return undefined;
+    if (!features.channelListMessageReceiptStatusEnabled) return undefined;
+    if (!isMyMessage(channel.lastMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId)) return undefined;
+
+    if (channel.lastMessage.sendingStatus === 'pending') {
+      return /*#__PURE__*/React.createElement(LoadingSpinner, {
+        size: 16,
+        style: styles.titleCaptionIcon
+      });
+    }
+
+    if (channel.lastMessage.sendingStatus === 'failed') {
+      return /*#__PURE__*/React.createElement(Icon, {
+        icon: 'error',
+        size: 16,
+        color: colors.error,
+        style: styles.titleCaptionIcon
+      });
+    }
+
+    if (channel.getUnreadMemberCount(channel.lastMessage) === 0) {
+      return /*#__PURE__*/React.createElement(Icon, {
+        icon: 'done-all',
+        size: 16,
+        color: colors.secondary,
+        style: styles.titleCaptionIcon
+      });
+    }
+
+    if (features.deliveryReceiptEnabled) {
+      if (channel.getUndeliveredMemberCount(channel.lastMessage) === 0) {
+        return /*#__PURE__*/React.createElement(Icon, {
+          icon: 'done-all',
+          size: 16,
+          color: colors.onBackground03,
+          style: styles.titleCaptionIcon
+        });
+      }
+
+      return /*#__PURE__*/React.createElement(Icon, {
+        icon: 'done',
+        size: 16,
+        color: colors.onBackground03,
+        containerStyle: styles.titleCaptionIcon
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(Icon, {
+      icon: 'done-all',
+      size: 16,
+      color: colors.onBackground03,
+      style: styles.titleCaptionIcon
+    });
+  });
+  return /*#__PURE__*/React.createElement(SBUPressable, {
+    onPress: onPress,
+    onLongPress: onLongPress
+  }, /*#__PURE__*/React.createElement(GroupChannelPreview, {
+    customCover: /*#__PURE__*/React.createElement(ChannelCover, {
+      channel: channel,
+      size: 56
+    }),
+    coverUrl: channel.coverUrl,
+    title: STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? '', channel),
+    titleCaptionLeft: titleCaptionIcon,
+    titleCaption: STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel),
+    body: bodyText,
+    bodyIcon: bodyIcon,
+    badgeCount: channel.unreadMessageCount,
+    memberCount: channel.memberCount > 2 ? channel.memberCount : undefined,
+    frozen: channel.isFrozen,
+    notificationOff: channel.myPushTriggerOption === 'off'
+  }));
+};
+
+const styles = createStyleSheet({
+  titleCaptionIcon: {
+    marginRight: 4
+  }
+});
+export default GroupChannelPreviewContainer;
+//# sourceMappingURL=GroupChannelPreviewContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useChannelHandler","GroupChannelPreview","LoadingSpinner","createStyleSheet","useUIKitTheme","Icon","getFileExtension","getFileType","isDifferentChannel","isMyMessage","useForceUpdate","useIIFE","useUniqId","useLocalization","useSendbirdChat","ChannelCover","SBUPressable","iconMapper","audio","image","video","file","GroupChannelPreviewContainer","onPress","onLongPress","channel","currentUser","sdk","features","STRINGS","colors","typingUsers","setTypingUsers","forceUpdate","channelListTypingIndicatorEnabled","typingId","onTypingStatusUpdated","eventChannel","getTypingUsers","channelListMessageReceiptStatusEnabled","receiptId","onDeliveryReceiptUpdated","isGroupChannel","lastMessage","userId","onReadReceiptUpdated","bodyText","length","LABELS","TYPING_INDICATOR_TYPINGS","GROUP_CHANNEL_LIST","CHANNEL_PREVIEW_BODY","bodyIcon","isFileMessage","undefined","type","name","titleCaptionIcon","sendingStatus","styles","error","getUnreadMemberCount","secondary","deliveryReceiptEnabled","getUndeliveredMemberCount","onBackground03","coverUrl","CHANNEL_PREVIEW_TITLE","CHANNEL_PREVIEW_TITLE_CAPTION","unreadMessageCount","memberCount","isFrozen","myPushTriggerOption","marginRight"],"sources":["GroupChannelPreviewContainer.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { useChannelHandler } from '@sendbird/uikit-chat-hooks';\nimport {\n  GroupChannelPreview,\n  LoadingSpinner,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport Icon from '@sendbird/uikit-react-native-foundation/src/ui/Icon';\nimport {\n  SendbirdGroupChannel,\n  SendbirdUser,\n  getFileExtension,\n  getFileType,\n  isDifferentChannel,\n  isMyMessage,\n  useForceUpdate,\n  useIIFE,\n  useUniqId,\n} from '@sendbird/uikit-utils';\n\nimport { useLocalization, useSendbirdChat } from '../hooks/useContext';\nimport ChannelCover from './ChannelCover';\nimport SBUPressable from './SBUPressable';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = {\n  channel: SendbirdGroupChannel;\n  onPress: () => void;\n  onLongPress: () => void;\n};\nconst GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props) => {\n  const { currentUser, sdk, features } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n\n  const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);\n  const forceUpdate = useForceUpdate();\n\n  if (features.channelListTypingIndicatorEnabled) {\n    const typingId = useUniqId('GroupChannelPreviewContainer');\n    useChannelHandler(sdk, `GroupChannelPreviewContainer_TypingIndicator_${typingId}`, {\n      onTypingStatusUpdated(eventChannel) {\n        if (isDifferentChannel(channel, eventChannel)) return;\n        setTypingUsers(eventChannel.getTypingUsers());\n      },\n    });\n  }\n\n  if (features.channelListMessageReceiptStatusEnabled) {\n    const receiptId = useUniqId('GroupChannelPreviewContainer');\n    useChannelHandler(sdk, `GroupChannelPreviewContainer_ReceiptStatus_${receiptId}`, {\n      onDeliveryReceiptUpdated(eventChannel) {\n        if (isDifferentChannel(channel, eventChannel)) return;\n        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;\n        if (!isMyMessage(eventChannel.lastMessage, currentUser?.userId)) return;\n\n        forceUpdate();\n      },\n      onReadReceiptUpdated(eventChannel) {\n        if (isDifferentChannel(channel, eventChannel)) return;\n        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;\n        if (!isMyMessage(eventChannel.lastMessage, currentUser?.userId)) return;\n\n        forceUpdate();\n      },\n    });\n  }\n\n  const bodyText = useIIFE(() => {\n    if (typingUsers.length > 0) return STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers) || '';\n    else return STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel);\n  });\n\n  const bodyIcon = useIIFE(() => {\n    if (!channel.lastMessage?.isFileMessage()) return undefined;\n    return iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))];\n  });\n\n  const titleCaptionIcon = useIIFE(() => {\n    if (!channel.lastMessage) return undefined;\n    if (!features.channelListMessageReceiptStatusEnabled) return undefined;\n    if (!isMyMessage(channel.lastMessage, currentUser?.userId)) return undefined;\n\n    if (channel.lastMessage.sendingStatus === 'pending') {\n      return <LoadingSpinner size={16} style={styles.titleCaptionIcon} />;\n    }\n\n    if (channel.lastMessage.sendingStatus === 'failed') {\n      return <Icon icon={'error'} size={16} color={colors.error} style={styles.titleCaptionIcon} />;\n    }\n\n    if (channel.getUnreadMemberCount(channel.lastMessage) === 0) {\n      return <Icon icon={'done-all'} size={16} color={colors.secondary} style={styles.titleCaptionIcon} />;\n    }\n\n    if (features.deliveryReceiptEnabled) {\n      if (channel.getUndeliveredMemberCount(channel.lastMessage) === 0) {\n        return <Icon icon={'done-all'} size={16} color={colors.onBackground03} style={styles.titleCaptionIcon} />;\n      }\n      return <Icon icon={'done'} size={16} color={colors.onBackground03} containerStyle={styles.titleCaptionIcon} />;\n    }\n\n    return <Icon icon={'done-all'} size={16} color={colors.onBackground03} style={styles.titleCaptionIcon} />;\n  });\n\n  return (\n    <SBUPressable onPress={onPress} onLongPress={onLongPress}>\n      <GroupChannelPreview\n        customCover={<ChannelCover channel={channel} size={56} />}\n        coverUrl={channel.coverUrl}\n        title={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE(currentUser?.userId ?? '', channel)}\n        titleCaptionLeft={titleCaptionIcon}\n        titleCaption={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel)}\n        body={bodyText}\n        bodyIcon={bodyIcon}\n        badgeCount={channel.unreadMessageCount}\n        memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}\n        frozen={channel.isFrozen}\n        notificationOff={channel.myPushTriggerOption === 'off'}\n      />\n    </SBUPressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  titleCaptionIcon: {\n    marginRight: 4,\n  },\n});\n\nexport default GroupChannelPreviewContainer;\n"],"mappings":"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"}

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

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { usePlatformService } from '../../../hooks/useContext';
+
+const VideoFileMessage = _ref => {
+  let {
+    message
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const {
+    mediaService
+  } = usePlatformService();
+  const fileUrl = getAvailableUriFromFileMessage(message);
+  const style = [styles.image, {
+    backgroundColor: colors.onBackground04
+  }];
+  const [state, setState] = useState({
+    thumbnail: null,
+    loading: true,
+    imageNotFound: false
+  });
+  useEffect(() => {
+    mediaService === null || mediaService === void 0 ? void 0 : mediaService.getVideoThumbnail({
+      url: fileUrl,
+      timeMills: 1000
+    }).then(result => {
+      if (result !== null && result !== void 0 && result.path) {
+        setState(prev => ({ ...prev,
+          loading: false,
+          thumbnail: result.path
+        }));
+      } else {
+        throw new Error('Cannot generate thumbnail');
+      }
+    }).catch(() => {
+      setState(prev => ({ ...prev,
+        loading: false,
+        imageNotFound: true
+      }));
+    });
+  }, []);
+
+  if (state.loading || state.imageNotFound) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [style, styles.container]
+    }, /*#__PURE__*/React.createElement(PlayIcon, null));
+  }
+
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: state.thumbnail || fileUrl
+    },
+    style: style,
+    resizeMode: 'cover',
+    resizeMethod: 'resize',
+    onError: () => setState(prev => ({ ...prev,
+      imageNotFound: true
+    }))
+  }), /*#__PURE__*/React.createElement(PlayIcon, null));
+};
+
+const PlayIcon = () => {
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(Icon, {
+    icon: 'play',
+    size: 28,
+    color: colors.onBackground02,
+    containerStyle: [styles.playIcon, {
+      backgroundColor: colors.onBackgroundReverse01
+    }]
+  });
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  image: {
+    width: 240,
+    maxWidth: 240,
+    height: 160,
+    borderRadius: 16
+  },
+  playIcon: {
+    position: 'absolute',
+    padding: 10,
+    borderRadius: 50
+  }
+});
+export default VideoFileMessage;
+//# sourceMappingURL=VideoFileMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","usePlatformService","VideoFileMessage","message","colors","mediaService","fileUrl","style","styles","image","backgroundColor","onBackground04","state","setState","thumbnail","loading","imageNotFound","getVideoThumbnail","url","timeMills","then","result","path","prev","Error","catch","container","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","alignItems","justifyContent","width","maxWidth","height","borderRadius","position","padding"],"sources":["VideoFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst VideoFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const { mediaService } = usePlatformService();\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const [state, setState] = useState({\n    thumbnail: null as null | string,\n    loading: true,\n    imageNotFound: false,\n  });\n\n  useEffect(() => {\n    mediaService\n      ?.getVideoThumbnail({ url: fileUrl, timeMills: 1000 })\n      .then((result) => {\n        if (result?.path) {\n          setState((prev) => ({ ...prev, loading: false, thumbnail: result.path }));\n        } else {\n          throw new Error('Cannot generate thumbnail');\n        }\n      })\n      .catch(() => {\n        setState((prev) => ({ ...prev, loading: false, imageNotFound: true }));\n      });\n  }, []);\n\n  if (state.loading || state.imageNotFound) {\n    return (\n      <View style={[style, styles.container]}>\n        <PlayIcon />\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.container}>\n      <Image\n        source={{ uri: state.thumbnail || fileUrl }}\n        style={style}\n        resizeMode={'cover'}\n        resizeMethod={'resize'}\n        onError={() => setState((prev) => ({ ...prev, imageNotFound: true }))}\n      />\n      <PlayIcon />\n    </View>\n  );\n};\n\nconst PlayIcon = () => {\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Icon\n      icon={'play'}\n      size={28}\n      color={colors.onBackground02}\n      containerStyle={[styles.playIcon, { backgroundColor: colors.onBackgroundReverse01 }]}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n  },\n  playIcon: {\n    position: 'absolute',\n    padding: 10,\n    borderRadius: 50,\n  },\n});\n\nexport default VideoFileMessage;\n"],"mappings":"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"}

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

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