Merge pull request #57 from sendbird/feat/image-compression

[UIKIT-2514] Feat/image compression

Author: bang9

.yarn/releases/yarn-1.19.0.cjs

@@ -22,6 +22,7 @@ import * as FileAccess from 'react-native-file-access';
 import * as ImagePicker from 'react-native-image-picker';
 import * as Permissions from 'react-native-permissions';
 import * as CreateThumbnail from 'react-native-create-thumbnail';
+import * as ImageResizer from '@bam.tech/react-native-image-resizer';
 
 const NativeClipboardService = createNativeClipboardService(Clipboard);
 const NativeNotificationService = createNativeNotificationService({
@@ -38,6 +39,7 @@ const NativeFileService = createNativeFileService({
 const NativeMediaService = createNativeMediaService({
   VideoComponent: Video,
   thumbnailModule: CreateThumbnail,
+  imageResizerModule: ImageResizer,
 });
 /** ------------------ **/
 
@@ -53,6 +55,7 @@ import * as ExpoMediaLibrary from 'expo-media-library';
 import * as ExpoNotifications from 'expo-notifications';
 import * as ExpoAV from 'expo-av';
 import * as ExpoVideoThumbnail from 'expo-video-thumbnails';
+import * as ExpoImageManipulator from 'expo-image-manipulator';
 
 const ExpoNotificationService = createExpoNotificationService(ExpoNotifications);
 const ExpoClipboardService = createExpoClipboardService(ExpoClipboard);
@@ -64,6 +67,8 @@ const ExpoFileService = createExpoFileService({
 });
 const ExpoMediaService = createExpoMediaService({
   avModule: ExpoAV,
-  thumbnailModule: ExpoVideoThumbnail
+  thumbnailModule: ExpoVideoThumbnail,
+  imageManipulator: ExpoImageManipulator,
+  fsModule: ExpoFS,
 })
 /** ------------------ **/

docs-validation/1_introduction/NativeModules.tsx

@@ -20,6 +20,7 @@ import * as FileAccess from 'react-native-file-access';
 import * as ImagePicker from 'react-native-image-picker';
 import * as Permissions from 'react-native-permissions';
 import * as CreateThumbnail from 'react-native-create-thumbnail';
+import * as ImageResizer from '@bam.tech/react-native-image-resizer';
 
 const ClipboardService = createNativeClipboardService(Clipboard);
 const NotificationService = createNativeNotificationService({
@@ -36,6 +37,7 @@ const FileService = createNativeFileService({
 const MediaService = createNativeMediaService({
   VideoComponent: Video,
   thumbnailModule: CreateThumbnail,
+  imageResizerModule: ImageResizer,
 });
 /** ------------------ **/
 
@@ -179,6 +181,7 @@ const App2 = () => {
         file: FileService,
         notification: NotificationService,
         clipboard: ClipboardService,
+        media: MediaService,
       }}
     >
       <Navigation />

docs-validation/1_introduction/SendYourFirstMessage.tsx

@@ -84,22 +84,21 @@ function _stringResource(str: StringSet) {
  * Image compression
  * {@link https://sendbird.com/docs/uikit/v3/react-native/features/file-sharing#2-image-compression}
  * */
-// @ts-ignore
-import ImageResizer from 'react-native-image-resizer';
+import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
 
-const GroupChannelScreen2 = () => {
+const App = () => {
   return (
-    // @ts-ignore
-    <GroupChannelFragment
-      onBeforeSendFileMessage={async (params) => {
-        if (params.file && 'uri' in params.file) {
-          if (isImageFile(params.file.name)) {
-            const { uri, size } = await ImageResizer.createResizedImage(params.file.uri);
-            params.file = { ...params.file, uri, size };
-          }
-        }
-
-        return params;
+    <SendbirdUIKitContainer
+      appId={'APP_ID'}
+      // @ts-ignore
+      platformServices={{}}
+      chatOptions={{
+        enableImageCompression: true
+      }}
+      imageCompression={{
+        compressionRate: 0.5,
+        width: 600,
+        height: 600
       }}
     />
   );

docs-validation/2_features/FileSharing.tsx

@@ -7,6 +7,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
+    "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@react-native-async-storage/async-storage": "^1.15.17",
     "@react-native-camera-roll/camera-roll": "^5.0.4",
     "@react-native-clipboard/clipboard": "^1.8.5",

docs-validation/package.json

@@ -45,11 +45,12 @@ UIKit for React-Native can be installed through either `yarn` or `npm`
 **Install dependencies**
 
 ```sh
-npm i @sendbird/uikit-react-native \
-      @sendbird/chat \
-      date-fns \
-      react-native-safe-area-context \
-      @react-native-community/netinfo
+npm install @sendbird/uikit-react-native \
+            @sendbird/chat \
+            date-fns \
+            react-native-safe-area-context \
+            @react-native-community/netinfo \
+            @react-native-async-storage/async-storage
 ```
 
 **Linking native modules**
@@ -121,6 +122,7 @@ const App = () => {
         file: FileService,
         notification: NotificationService,
         clipboard: ClipboardService,
+        media: MediaService,
       }}
     >
       {/* ... */}
@@ -136,17 +138,20 @@ In order to implement the interfaces to your React Native app more easily, we pr
 
 **Using React Native CLI**
 
-You can use `createNativeClipboardService`, `createNativeNotificationService` and `createNativeFileService` helper functions with below native modules.
+You can use `createNativeClipboardService`, `createNativeNotificationService`, `createNativeFileService` and `createNativeMediaService` helper functions with below native modules.
 
 ```sh
-npm install react-native-permissions \
+npm install react-native-video \
+            react-native-permissions \
+            react-native-file-access \
             react-native-image-picker \
             react-native-document-picker \
-            @react-native-camera-roll/camera-roll \
-            react-native-file-access \
+            react-native-create-thumbnail \
             @react-native-clipboard/clipboard \
+            @react-native-camera-roll/camera-roll \
             @react-native-firebase/app \
             @react-native-firebase/messaging \
+            @bam.tech/react-native-image-resizer
 
 npx pod-install
 ```
@@ -155,36 +160,47 @@ npx pod-install
 import Clipboard from '@react-native-clipboard/clipboard';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import RNFBMessaging from '@react-native-firebase/messaging';
+import Video from 'react-native-video';
 import * as DocumentPicker from 'react-native-document-picker';
 import * as FileAccess from 'react-native-file-access';
 import * as ImagePicker from 'react-native-image-picker';
 import * as Permissions from 'react-native-permissions';
+import * as CreateThumbnail from 'react-native-create-thumbnail';
+import * as ImageResizer from '@bam.tech/react-native-image-resizer';
 
-const ClipboardService = createNativeClipboardService(Clipboard);
-const NotificationService = createNativeNotificationService({
+const NativeClipboardService = createNativeClipboardService(Clipboard);
+const NativeNotificationService = createNativeNotificationService({
   messagingModule: RNFBMessaging,
   permissionModule: Permissions,
 });
-const FileService = createNativeFileService({
+const NativeFileService = createNativeFileService({
   fsModule: FileAccess,
   permissionModule: Permissions,
   imagePickerModule: ImagePicker,
   mediaLibraryModule: CameraRoll,
   documentPickerModule: DocumentPicker,
 });
+const NativeMediaService = createNativeMediaService({
+  VideoComponent: Video,
+  thumbnailModule: CreateThumbnail,
+  imageResizerModule: ImageResizer,
+});
 ```
 
 **Using Expo CLI**
 
-You can use `createExpoClipboardService`, `createExpoNotificationService` and `createExpoFileService` helper functions with below expo modules.
+You can use `createExpoClipboardService`, `createExpoNotificationService`, `createExpoFileService` and `createExpoMediaService` helper functions with below expo modules.
 
 ```sh
 expo install expo-image-picker \
              expo-document-picker \
              expo-media-library \
              expo-file-system \
              expo-clipboard \
-             expo-notifications
+             expo-notifications \
+             expo-av \
+             expo-video-thumbnails \
+             expo-image-manipulator
 ```
 
 ```ts
@@ -194,15 +210,24 @@ 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';
+import * as ExpoAV from 'expo-av';
+import * as ExpoVideoThumbnail from 'expo-video-thumbnails';
+import * as ExpoImageManipulator from 'expo-image-manipulator';
 
-const NotificationService = createExpoNotificationService(ExpoNotifications);
-const ClipboardService = createExpoClipboardService(ExpoClipboard);
-const FileService = createExpoFileService({
+const ExpoNotificationService = createExpoNotificationService(ExpoNotifications);
+const ExpoClipboardService = createExpoClipboardService(ExpoClipboard);
+const ExpoFileService = createExpoFileService({
   fsModule: ExpoFS,
   imagePickerModule: ExpoImagePicker,
   mediaLibraryModule: ExpoMediaLibrary,
   documentPickerModule: ExpoDocumentPicker,
 });
+const ExpoMediaService = createExpoMediaService({
+  avModule: ExpoAV,
+  thumbnailModule: ExpoVideoThumbnail,
+  imageManipulator: ExpoImageManipulator,
+  fsModule: ExpoFS,
+})
 ```
 
 ### Local caching (optional)

packages/uikit-react-native/README.md

@@ -46,6 +46,7 @@
     "@sendbird/uikit-utils": "2.2.0"
   },
   "devDependencies": {
+    "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@react-native-camera-roll/camera-roll": "^5.0.4",
     "@react-native-clipboard/clipboard": "^1.8.5",
     "@react-native-community/netinfo": "^9.3.0",
@@ -59,6 +60,7 @@
     "expo-clipboard": "^2.1.1",
     "expo-document-picker": "^10.1.3",
     "expo-file-system": "^13.1.4",
+    "expo-image-manipulator": "^11.0.0",
     "expo-image-picker": "^12.0.2",
     "expo-media-library": "^14.0.1",
     "expo-notifications": "^0.14.1",
@@ -79,6 +81,7 @@
     "typescript": "4.9.4"
   },
   "peerDependencies": {
+    "@bam.tech/react-native-image-resizer": ">=3.0.0",
     "@react-native-camera-roll/camera-roll": ">=5.0.0",
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
@@ -89,6 +92,7 @@
     "expo-clipboard": ">=2.1.1",
     "expo-document-picker": ">=10.1.3",
     "expo-file-system": ">=13.1.4",
+    "expo-image-manipulator": ">=11.0.0",
     "expo-image-picker": ">=12.0.2",
     "expo-notifications": ">=0.14.1",
     "expo-video-thumbnails": ">=6.4.0",
@@ -103,6 +107,9 @@
     "react-native-video": ">=5.2.0"
   },
   "peerDependenciesMeta": {
+    "@bam.tech/react-native-image-resizer": {
+      "optional": true
+    },
     "@react-native-camera-roll/camera-roll": {
       "optional": true
     },
@@ -124,6 +131,9 @@
     "expo-file-system": {
       "optional": true
     },
+    "expo-image-manipulator": {
+      "optional": true
+    },
     "expo-image-picker": {
       "optional": true
     },

packages/uikit-react-native/package.json

@@ -63,10 +63,8 @@ const FileViewer = ({
   const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));
 
   useEffect(() => {
-    if (!mediaService?.VideoComponent || fileType === 'file') {
-      onClose();
-    }
-  }, [mediaService]);
+    if (fileType === 'file') onClose();
+  }, []);
 
   const fileViewer = useIIFE(() => {
     switch (fileType) {
@@ -83,7 +81,6 @@ const FileViewer = ({
 
       case 'video':
       case 'audio': {
-        if (!mediaService?.VideoComponent) return null;
         return (
           <mediaService.VideoComponent
             source={{ uri: fileMessage.url }}

packages/uikit-react-native/src/components/FileViewer.tsx

@@ -44,7 +44,12 @@ const ImageFileMessage = ({ message, children, variant }: FileMessageProps) => {
   const key = useRetry(imageNotFound);
 
   return (
-    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+    <View
+      style={[
+        styles.bubbleContainer,
+        { backgroundColor: imageNotFound ? colors.onBackground04 : colors.ui.message[variant].enabled.background },
+      ]}
+    >
       <View style={style}>
         <Image
           key={key}

packages/uikit-react-native/src/components/MessageRenderer/FileMessage/ImageFileMessage.tsx

@@ -15,7 +15,7 @@ const useRetry = (videoFileUrl: string, retryCount = 5) => {
   const { mediaService } = usePlatformService();
 
   const fetchThumbnail = () => {
-    return mediaService?.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {
+    return mediaService.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {
       setState({ loading: false, thumbnail: result?.path ?? null });
     });
   };