feat: added image compression feature

docs-validation/1_introduction/NativeModules.tsx

@@ -16,12 +16,10 @@ import {
 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';
 
 const NativeClipboardService = createNativeClipboardService(Clipboard);
 const NativeNotificationService = createNativeNotificationService({
@@ -35,10 +33,7 @@ const NativeFileService = createNativeFileService({
   mediaLibraryModule: CameraRoll,
   documentPickerModule: DocumentPicker,
 });
-const NativeMediaService = createNativeMediaService({
-  VideoComponent: Video,
-  thumbnailModule: CreateThumbnail,
-});
+const NativeMediaService = createNativeMediaService();
 /** ------------------ **/
 
 /**

packages/uikit-react-native/package.json

@@ -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",
@@ -89,6 +91,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 +106,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 +130,9 @@
     "expo-file-system": {
       "optional": true
     },
+    "expo-image-manipulator": {
+      "optional": true
+    },
     "expo-image-picker": {
       "optional": true
     },

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

@@ -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/MessageRenderer/FileMessage/VideoFileMessage.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 });
     });
   };

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

@@ -2,20 +2,17 @@ import React from 'react';
 
 import { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';
 
-import { usePlatformService } from '../../../hooks/useContext';
 import type { MessageRendererInterface } from '../index';
 import BaseFileMessage from './BaseFileMessage';
 import ImageFileMessage from './ImageFileMessage';
 import VideoFileMessage from './VideoFileMessage';
 
 export type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;
 const FileMessage = (props: FileMessageProps) => {
-  const { mediaService } = usePlatformService();
-
   const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
 
   if (fileType === 'image') return <ImageFileMessage {...props} />;
-  if (fileType === 'video' && mediaService?.getVideoThumbnail) return <VideoFileMessage {...props} />;
+  if (fileType === 'video') return <VideoFileMessage {...props} />;
 
   return <BaseFileMessage {...props} type={fileType} />;
 };

packages/uikit-react-native/src/containers/SendbirdUIKitContainer.tsx

@@ -30,11 +30,14 @@ import type { UIKitFeaturesInSendbirdChatContext } from '../contexts/SendbirdCha
 import { SendbirdChatProvider } from '../contexts/SendbirdChatCtx';
 import { UserProfileProvider } from '../contexts/UserProfileCtx';
 import EmojiManager from '../libs/EmojiManager';
+import type { ImageCompressionConfigInterface } from '../libs/ImageCompressionConfig';
+import ImageCompressionConfig from '../libs/ImageCompressionConfig';
 import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
 import MentionConfig, { MentionConfigInterface } from '../libs/MentionConfig';
 import MentionManager from '../libs/MentionManager';
 import StringSetEn from '../localization/StringSet.en';
 import type { StringSet } from '../localization/StringSet.type';
+import createNativeMediaService from '../platform/createMediaService.native';
 import SBUDynamicModule from '../platform/dynamicModule';
 import type {
   ClipboardServiceInterface,
@@ -57,6 +60,7 @@ export const SendbirdUIKit = Object.freeze({
     CHANNEL_LIST_MESSAGE_RECEIPT_STATUS: false,
     USE_USER_ID_FOR_NICKNAME: false,
     USER_MENTION: false,
+    IMAGE_COMPRESSION: true,
   },
 });
 
@@ -82,6 +86,10 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     defaultHeaderHeight?: number;
     HeaderComponent?: HeaderStyleContextType['HeaderComponent'];
   };
+  errorBoundary?: {
+    onError?: (props: ErrorBoundaryProps) => void;
+    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+  };
   toast?: {
     dismissTimeout?: number;
   };
@@ -93,10 +101,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
   };
   userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
-  errorBoundary?: {
-    onError?: (props: ErrorBoundaryProps) => void;
-    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
-  };
+  imageCompression?: ImageCompressionConfigInterface;
 }>;
 
 const SendbirdUIKitContainer = ({
@@ -106,10 +111,11 @@ const SendbirdUIKitContainer = ({
   platformServices,
   localization,
   styles,
+  errorBoundary,
   toast,
   userProfile,
   userMention,
-  errorBoundary,
+  imageCompression,
 }: SendbirdUIKitContainerProps) => {
   const defaultStringSet = localization?.stringSet ?? StringSetEn;
 
@@ -125,7 +131,9 @@ const SendbirdUIKitContainer = ({
     unsubscribes.current = sendbird.unsubscribes;
     return sendbird.chatSDK;
   });
+
   const emojiManager = useMemo(() => new EmojiManager(internalStorage), [internalStorage]);
+
   const mentionManager = useMemo(() => {
     const config = new MentionConfig({
       mentionLimit: userMention?.mentionLimit || MentionConfig.DEFAULT.MENTION_LIMIT,
@@ -137,6 +145,16 @@ const SendbirdUIKitContainer = ({
     return new MentionManager(config, chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION);
   }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
 
+  const imageCompressionConfig = useMemo(
+    () =>
+      new ImageCompressionConfig({
+        compressionRate: imageCompression?.compressionRate || ImageCompressionConfig.DEFAULT.COMPRESSION_RATE,
+        width: imageCompression?.width,
+        height: imageCompression?.height,
+      }),
+    [imageCompression],
+  );
+
   useLayoutEffect(() => {
     if (!isFirstMount) {
       const sendbird = initializeSendbird(appId, internalStorage, chatOptions?.onInitialized);
@@ -161,6 +179,7 @@ const SendbirdUIKitContainer = ({
         sdkInstance={sdkInstance}
         emojiManager={emojiManager}
         mentionManager={mentionManager}
+        imageCompressionConfig={imageCompressionConfig}
         enableAutoPushTokenRegistration={
           chatOptions?.enableAutoPushTokenRegistration ?? SendbirdUIKit.DEFAULT.AUTO_PUSH_TOKEN_REGISTRATION
         }
@@ -175,13 +194,14 @@ const SendbirdUIKitContainer = ({
           chatOptions?.enableUseUserIdForNickname ?? SendbirdUIKit.DEFAULT.USE_USER_ID_FOR_NICKNAME
         }
         enableUserMention={chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION}
+        enableImageCompression={chatOptions?.enableImageCompression ?? SendbirdUIKit.DEFAULT.IMAGE_COMPRESSION}
       >
         <LocalizationProvider stringSet={defaultStringSet}>
           <PlatformServiceProvider
             fileService={platformServices.file}
             notificationService={platformServices.notification}
             clipboardService={platformServices.clipboard}
-            mediaService={platformServices.media}
+            mediaService={platformServices.media ?? createNativeMediaService()}
           >
             <UIKitThemeProvider theme={styles?.theme ?? LightUIKitTheme}>
               <HeaderStyleProvider

packages/uikit-react-native/src/contexts/PlatformServiceCtx.tsx

@@ -11,7 +11,7 @@ type Props = React.PropsWithChildren<{
   fileService: FileServiceInterface;
   clipboardService: ClipboardServiceInterface;
   notificationService: NotificationServiceInterface;
-  mediaService?: MediaServiceInterface;
+  mediaService: MediaServiceInterface;
 }>;
 
 export const PlatformServiceContext = React.createContext<Props | null>(null);

packages/uikit-react-native/src/contexts/SendbirdChatCtx.tsx

@@ -11,6 +11,7 @@ import type {
 import { confirmAndMarkAsDelivered, useForceUpdate } from '@sendbird/uikit-utils';
 
 import type EmojiManager from '../libs/EmojiManager';
+import type ImageCompressionConfig from '../libs/ImageCompressionConfig';
 import type MentionManager from '../libs/MentionManager';
 import type { FileType } from '../platform/types';
 
@@ -20,18 +21,21 @@ export interface UIKitFeaturesInSendbirdChatContext {
   enableChannelListMessageReceiptStatus: boolean;
   enableUseUserIdForNickname: boolean;
   enableUserMention: boolean;
+  enableImageCompression: boolean;
 }
 
 interface Props extends UIKitFeaturesInSendbirdChatContext, React.PropsWithChildren {
   sdkInstance: SendbirdChatSDK;
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
+  imageCompressionConfig: ImageCompressionConfig;
 }
 
 type Context = {
   sdk: SendbirdChatSDK;
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
+  imageCompressionConfig: ImageCompressionConfig;
   currentUser?: SendbirdUser;
   setCurrentUser: React.Dispatch<React.SetStateAction<SendbirdUser | undefined>>;
 
@@ -46,6 +50,7 @@ type Context = {
     channelListMessageReceiptStatusEnabled: boolean;
     useUserIdForNicknameEnabled: boolean;
     userMentionEnabled: boolean;
+    imageCompressionEnabled: boolean;
 
     // Sendbird application features
     deliveryReceiptEnabled: boolean;
@@ -61,11 +66,13 @@ export const SendbirdChatProvider = ({
   sdkInstance,
   emojiManager,
   mentionManager,
+  imageCompressionConfig,
   enableAutoPushTokenRegistration,
   enableChannelListMessageReceiptStatus,
   enableChannelListTypingIndicator,
   enableUseUserIdForNickname,
   enableUserMention,
+  enableImageCompression,
 }: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
@@ -131,6 +138,7 @@ export const SendbirdChatProvider = ({
     sdk: sdkInstance,
     emojiManager,
     mentionManager,
+    imageCompressionConfig,
     currentUser,
     setCurrentUser,
 
@@ -144,6 +152,7 @@ export const SendbirdChatProvider = ({
       channelListMessageReceiptStatusEnabled: enableChannelListMessageReceiptStatus,
       useUserIdForNicknameEnabled: enableUseUserIdForNickname,
       userMentionEnabled: enableUserMention,
+      imageCompressionEnabled: enableImageCompression,
     },
   };