@sendbird/uikit-react-native 1.0.2 → 1.1.1

package/README.md

@@ -188,12 +188,12 @@ expo install expo-image-picker \
 ```
 
 ```ts
-import ExpoClipboard from 'expo-clipboard';
-import ExpoDocumentPicker from 'expo-document-picker';
-import ExpoFS from 'expo-file-system';
-import ExpoImagePicker from 'expo-image-picker';
-import ExpoMediaLibrary from 'expo-media-library';
-import ExpoNotifications from 'expo-notifications';
+import * as ExpoClipboard from 'expo-clipboard';
+import * as ExpoDocumentPicker from 'expo-document-picker';
+import * as ExpoFS from 'expo-file-system';
+import * as ExpoImagePicker from 'expo-image-picker';
+import * as ExpoMediaLibrary from 'expo-media-library';
+import * as ExpoNotifications from 'expo-notifications';
 
 const NotificationService = createExpoNotificationService(ExpoNotifications);
 const ClipboardService = createExpoClipboardService(ExpoClipboard);
@@ -362,7 +362,7 @@ const SignInScreen = () => {
           alignItems: 'center',
           justifyContent: 'center',
         }}
-        onPress={() => connect('USER_ID', { nickname: 'NICK_NAME' })}
+        onPress={() => connect('USER_ID', { nickname: 'NICKNAME' })}
       >
         <Text>{'Sign in'}</Text>
       </Pressable>

package/lib/commonjs/components/FileViewer.js

@@ -0,0 +1,319 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _uikitUtils = require("@sendbird/uikit-utils");
+
+var _useContext = require("../hooks/useContext");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const FileViewer = _ref => {
+  let {
+    headerShown = true,
+    deleteMessage,
+    headerTopInset,
+    fileMessage,
+    onPressDownload,
+    onPressDelete,
+    onClose
+  } = _ref;
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const {
+    bottom
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const {
+    currentUser
+  } = (0, _useContext.useSendbirdChat)();
+  const {
+    palette
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const {
+    topInset,
+    statusBarTranslucent,
+    defaultHeight
+  } = (0, _uikitReactNativeFoundation.useHeaderStyle)();
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  const {
+    fileService,
+    mediaService
+  } = (0, _useContext.usePlatformService)();
+  const toast = (0, _uikitReactNativeFoundation.useToast)();
+  const {
+    alert
+  } = (0, _uikitReactNativeFoundation.useAlert)();
+  const basicTopInset = statusBarTranslucent ? topInset : 0;
+  const canDelete = (0, _uikitUtils.isMyMessage)(fileMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId);
+  const fileType = (0, _uikitUtils.getFileType)(fileMessage.type || (0, _uikitUtils.getFileExtension)(fileMessage.url));
+  (0, _react.useEffect)(() => {
+    if (!(mediaService !== null && mediaService !== void 0 && mediaService.VideoComponent) || fileType === 'file') {
+      onClose();
+    }
+  }, [mediaService]);
+  const fileViewer = (0, _uikitUtils.useIIFE)(() => {
+    switch (fileType) {
+      case 'image':
+        {
+          return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Image, {
+            source: {
+              uri: fileMessage.url
+            },
+            style: _reactNative.StyleSheet.absoluteFill,
+            resizeMode: 'contain',
+            onLoadEnd: () => setLoading(false)
+          });
+        }
+
+      case 'video':
+      case 'audio':
+        {
+          if (!(mediaService !== null && mediaService !== void 0 && mediaService.VideoComponent)) return null;
+          return /*#__PURE__*/_react.default.createElement(mediaService.VideoComponent, {
+            source: {
+              uri: fileMessage.url
+            },
+            style: [_reactNative.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 ((0, _uikitUtils.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');
+
+        _uikitUtils.Logger.log('File saved to', response);
+      }).catch(err => {
+        toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+
+        _uikitUtils.Logger.log('File save failure', err);
+      });
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flex: 1,
+      backgroundColor: palette.background700
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.StatusBar, {
+    barStyle: 'light-content',
+    animated: true
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, fileViewer, loading && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.LoadingSpinner, {
+    style: {
+      position: 'absolute'
+    },
+    size: 40,
+    color: palette.primary300
+  })), headerShown && /*#__PURE__*/_react.default.createElement(FileViewerHeader, {
+    title: STRINGS.FILE_VIEWER.TITLE(fileMessage),
+    subtitle: STRINGS.FILE_VIEWER.SUBTITLE(fileMessage),
+    topInset: headerTopInset ?? basicTopInset,
+    onClose: onClose
+  }), /*#__PURE__*/_react.default.createElement(FileViewerFooter, {
+    bottomInset: bottom,
+    deleteShown: canDelete,
+    onPressDelete: _onPressDelete,
+    onPressDownload: _onPressDownload
+  }));
+};
+
+const FileViewerHeader = _ref2 => {
+  let {
+    topInset,
+    onClose,
+    subtitle,
+    title
+  } = _ref2;
+  const {
+    palette
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const {
+    defaultHeight
+  } = (0, _uikitReactNativeFoundation.useHeaderStyle)();
+  const {
+    left,
+    right
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.headerContainer, {
+      paddingLeft: styles.headerContainer.paddingHorizontal + left,
+      paddingRight: styles.headerContainer.paddingHorizontal + right
+    }, {
+      paddingTop: topInset,
+      height: defaultHeight + topInset,
+      backgroundColor: palette.overlay01
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: onClose,
+    style: styles.barButton
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    icon: 'close',
+    size: 24,
+    color: palette.onBackgroundDark01
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.barTitleContainer
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    h2: true,
+    color: palette.onBackgroundDark01,
+    style: styles.headerTitle
+  }, title), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    caption2: true,
+    color: palette.onBackgroundDark01
+  }, subtitle)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.barButton
+  }));
+};
+
+const FileViewerFooter = _ref3 => {
+  let {
+    bottomInset,
+    deleteShown,
+    onPressDelete,
+    onPressDownload
+  } = _ref3;
+  const {
+    palette
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const {
+    defaultHeight
+  } = (0, _uikitReactNativeFoundation.useHeaderStyle)();
+  const {
+    left,
+    right
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.footerContainer, {
+      paddingLeft: styles.headerContainer.paddingHorizontal + left,
+      paddingRight: styles.headerContainer.paddingHorizontal + right
+    }, {
+      paddingBottom: bottomInset,
+      height: defaultHeight + bottomInset,
+      backgroundColor: palette.overlay01
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: onPressDownload,
+    style: styles.barButton
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    icon: 'download',
+    size: 24,
+    color: palette.onBackgroundDark01
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.barTitleContainer
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: onPressDelete,
+    style: styles.barButton,
+    disabled: !deleteShown
+  }, deleteShown && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    icon: 'delete',
+    size: 24,
+    color: palette.onBackgroundDark01
+  })));
+};
+
+const styles = (0, _uikitReactNativeFoundation.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
+  }
+});
+var _default = FileViewer;
+exports.default = _default;
+//# sourceMappingURL=FileViewer.js.map

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

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

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

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _uikitUtils = require("@sendbird/uikit-utils");
+
+var _useContext = require("../../../hooks/useContext");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const VideoFileMessage = _ref => {
+  let {
+    message
+  } = _ref;
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const {
+    mediaService
+  } = (0, _useContext.usePlatformService)();
+  const fileUrl = (0, _uikitUtils.getAvailableUriFromFileMessage)(message);
+  const style = [styles.image, {
+    backgroundColor: colors.onBackground04
+  }];
+  const [state, setState] = (0, _react.useState)({
+    thumbnail: null,
+    loading: true,
+    imageNotFound: false
+  });
+  (0, _react.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.default.createElement(_reactNative.View, {
+      style: [style, styles.container]
+    }, /*#__PURE__*/_react.default.createElement(PlayIcon, null));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Image, {
+    source: {
+      uri: state.thumbnail || fileUrl
+    },
+    style: style,
+    resizeMode: 'cover',
+    resizeMethod: 'resize',
+    onError: () => setState(prev => ({ ...prev,
+      imageNotFound: true
+    }))
+  }), /*#__PURE__*/_react.default.createElement(PlayIcon, null));
+};
+
+const PlayIcon = () => {
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    icon: 'play',
+    size: 28,
+    color: colors.onBackground02,
+    containerStyle: [styles.playIcon, {
+      backgroundColor: colors.onBackgroundReverse01
+    }]
+  });
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  image: {
+    width: 240,
+    maxWidth: 240,
+    height: 160,
+    borderRadius: 16
+  },
+  playIcon: {
+    position: 'absolute',
+    padding: 10,
+    borderRadius: 50
+  }
+});
+var _default = VideoFileMessage;
+exports.default = _default;
+//# sourceMappingURL=VideoFileMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["VideoFileMessage","message","colors","useUIKitTheme","mediaService","usePlatformService","fileUrl","getAvailableUriFromFileMessage","style","styles","image","backgroundColor","onBackground04","state","setState","useState","thumbnail","loading","imageNotFound","useEffect","getVideoThumbnail","url","timeMills","then","result","path","prev","Error","catch","container","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","createStyleSheet","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":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;;;;;AAGA,MAAMA,gBAAgB,GAAG,QAAmC;EAAA,IAAlC;IAAEC;EAAF,CAAkC;EAC1D,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EAEA,MAAM;IAAEC;EAAF,IAAmB,IAAAC,8BAAA,GAAzB;EACA,MAAMC,OAAO,GAAG,IAAAC,0CAAA,EAA+BN,OAA/B,CAAhB;EACA,MAAMO,KAAK,GAAG,CAACC,MAAM,CAACC,KAAR,EAAe;IAAEC,eAAe,EAAET,MAAM,CAACU;EAA1B,CAAf,CAAd;EAEA,MAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,IAAAC,eAAA,EAAS;IACjCC,SAAS,EAAE,IADsB;IAEjCC,OAAO,EAAE,IAFwB;IAGjCC,aAAa,EAAE;EAHkB,CAAT,CAA1B;EAMA,IAAAC,gBAAA,EAAU,MAAM;IACdf,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CACRgB,iBADJ,CACsB;MAAEC,GAAG,EAAEf,OAAP;MAAgBgB,SAAS,EAAE;IAA3B,CADtB,EAEGC,IAFH,CAESC,MAAD,IAAY;MAChB,IAAIA,MAAJ,aAAIA,MAAJ,eAAIA,MAAM,CAAEC,IAAZ,EAAkB;QAChBX,QAAQ,CAAEY,IAAD,KAAW,EAAE,GAAGA,IAAL;UAAWT,OAAO,EAAE,KAApB;UAA2BD,SAAS,EAAEQ,MAAM,CAACC;QAA7C,CAAX,CAAD,CAAR;MACD,CAFD,MAEO;QACL,MAAM,IAAIE,KAAJ,CAAU,2BAAV,CAAN;MACD;IACF,CARH,EASGC,KATH,CASS,MAAM;MACXd,QAAQ,CAAEY,IAAD,KAAW,EAAE,GAAGA,IAAL;QAAWT,OAAO,EAAE,KAApB;QAA2BC,aAAa,EAAE;MAA1C,CAAX,CAAD,CAAR;IACD,CAXH;EAYD,CAbD,EAaG,EAbH;;EAeA,IAAIL,KAAK,CAACI,OAAN,IAAiBJ,KAAK,CAACK,aAA3B,EAA0C;IACxC,oBACE,6BAAC,iBAAD;MAAM,KAAK,EAAE,CAACV,KAAD,EAAQC,MAAM,CAACoB,SAAf;IAAb,gBACE,6BAAC,QAAD,OADF,CADF;EAKD;;EAED,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEpB,MAAM,CAACoB;EAApB,gBACE,6BAAC,iCAAD;IACE,MAAM,EAAE;MAAEC,GAAG,EAAEjB,KAAK,CAACG,SAAN,IAAmBV;IAA1B,CADV;IAEE,KAAK,EAAEE,KAFT;IAGE,UAAU,EAAE,OAHd;IAIE,YAAY,EAAE,QAJhB;IAKE,OAAO,EAAE,MAAMM,QAAQ,CAAEY,IAAD,KAAW,EAAE,GAAGA,IAAL;MAAWR,aAAa,EAAE;IAA1B,CAAX,CAAD;EALzB,EADF,eAQE,6BAAC,QAAD,OARF,CADF;AAYD,CAhDD;;AAkDA,MAAMa,QAAQ,GAAG,MAAM;EACrB,MAAM;IAAE7B;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EAEA,oBACE,6BAAC,gCAAD;IACE,IAAI,EAAE,MADR;IAEE,IAAI,EAAE,EAFR;IAGE,KAAK,EAAED,MAAM,CAAC8B,cAHhB;IAIE,cAAc,EAAE,CAACvB,MAAM,CAACwB,QAAR,EAAkB;MAAEtB,eAAe,EAAET,MAAM,CAACgC;IAA1B,CAAlB;EAJlB,EADF;AAQD,CAXD;;AAaA,MAAMzB,MAAM,GAAG,IAAA0B,4CAAA,EAAiB;EAC9BN,SAAS,EAAE;IACTO,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP,CADmB;EAK9B3B,KAAK,EAAE;IACL4B,KAAK,EAAE,GADF;IAELC,QAAQ,EAAE,GAFL;IAGLC,MAAM,EAAE,GAHH;IAILC,YAAY,EAAE;EAJT,CALuB;EAW9BR,QAAQ,EAAE;IACRS,QAAQ,EAAE,UADF;IAERC,OAAO,EAAE,EAFD;IAGRF,YAAY,EAAE;EAHN;AAXoB,CAAjB,CAAf;eAkBezC,gB"}

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

@@ -9,17 +9,25 @@ var _react = _interopRequireDefault(require("react"));
 
 var _uikitUtils = require("@sendbird/uikit-utils");
 
+var _useContext = require("../../../hooks/useContext");
+
 var _BaseFileMessage = _interopRequireDefault(require("./BaseFileMessage"));
 
 var _ImageFileMessage = _interopRequireDefault(require("./ImageFileMessage"));
 
+var _VideoFileMessage = _interopRequireDefault(require("./VideoFileMessage"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const FileMessage = props => {
+  const {
+    mediaService
+  } = (0, _useContext.usePlatformService)();
   const fileType = (0, _uikitUtils.getFileType)(props.message.type || (0, _uikitUtils.getFileExtension)(props.message.name));
   if (fileType === 'image') return /*#__PURE__*/_react.default.createElement(_ImageFileMessage.default, props);
+  if (fileType === 'video' && mediaService !== null && mediaService !== void 0 && mediaService.getVideoThumbnail) return /*#__PURE__*/_react.default.createElement(_VideoFileMessage.default, props);
   return /*#__PURE__*/_react.default.createElement(_BaseFileMessage.default, _extends({}, props, {
     type: fileType
   }));

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

@@ -1 +1 @@
-{"version":3,"names":["FileMessage","props","fileType","getFileType","message","type","getFileExtension","name","React","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';\n\nimport type { MessageRendererInterface } from '../index';\nimport BaseFileMessage from './BaseFileMessage';\nimport ImageFileMessage from './ImageFileMessage';\n\nexport type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;\nconst FileMessage = (props: FileMessageProps) => {\n  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));\n\n  if (fileType === 'image') return <ImageFileMessage {...props} />;\n  return <BaseFileMessage {...props} type={fileType} />;\n};\n\nexport default React.memo(FileMessage);\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAGA;;AACA;;;;;;AAGA,MAAMA,WAAW,GAAIC,KAAD,IAA6B;EAC/C,MAAMC,QAAQ,GAAG,IAAAC,uBAAA,EAAYF,KAAK,CAACG,OAAN,CAAcC,IAAd,IAAsB,IAAAC,4BAAA,EAAiBL,KAAK,CAACG,OAAN,CAAcG,IAA/B,CAAlC,CAAjB;EAEA,IAAIL,QAAQ,KAAK,OAAjB,EAA0B,oBAAO,6BAAC,yBAAD,EAAsBD,KAAtB,CAAP;EAC1B,oBAAO,6BAAC,wBAAD,eAAqBA,KAArB;IAA4B,IAAI,EAAEC;EAAlC,GAAP;AACD,CALD;;4BAOeM,cAAA,CAAMC,IAAN,CAAWT,WAAX,C"}
+{"version":3,"names":["FileMessage","props","mediaService","usePlatformService","fileType","getFileType","message","type","getFileExtension","name","getVideoThumbnail","React","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { MessageRendererInterface } from '../index';\nimport BaseFileMessage from './BaseFileMessage';\nimport ImageFileMessage from './ImageFileMessage';\nimport VideoFileMessage from './VideoFileMessage';\n\nexport type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;\nconst FileMessage = (props: FileMessageProps) => {\n  const { mediaService } = usePlatformService();\n\n  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));\n\n  if (fileType === 'image') return <ImageFileMessage {...props} />;\n  if (fileType === 'video' && mediaService?.getVideoThumbnail) return <VideoFileMessage {...props} />;\n\n  return <BaseFileMessage {...props} type={fileType} />;\n};\n\nexport default React.memo(FileMessage);\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEA;;AACA;;AACA;;;;;;AAGA,MAAMA,WAAW,GAAIC,KAAD,IAA6B;EAC/C,MAAM;IAAEC;EAAF,IAAmB,IAAAC,8BAAA,GAAzB;EAEA,MAAMC,QAAQ,GAAG,IAAAC,uBAAA,EAAYJ,KAAK,CAACK,OAAN,CAAcC,IAAd,IAAsB,IAAAC,4BAAA,EAAiBP,KAAK,CAACK,OAAN,CAAcG,IAA/B,CAAlC,CAAjB;EAEA,IAAIL,QAAQ,KAAK,OAAjB,EAA0B,oBAAO,6BAAC,yBAAD,EAAsBH,KAAtB,CAAP;EAC1B,IAAIG,QAAQ,KAAK,OAAb,IAAwBF,YAAxB,aAAwBA,YAAxB,eAAwBA,YAAY,CAAEQ,iBAA1C,EAA6D,oBAAO,6BAAC,yBAAD,EAAsBT,KAAtB,CAAP;EAE7D,oBAAO,6BAAC,wBAAD,eAAqBA,KAArB;IAA4B,IAAI,EAAEG;EAAlC,GAAP;AACD,CATD;;4BAWeO,cAAA,CAAMC,IAAN,CAAWZ,WAAX,C"}