@sendbird/uikit-react-native 2.1.0 → 2.3.0

package/src/localization/StringSet.type.ts

@@ -9,11 +9,11 @@ import type {
   SendbirdUser,
 } from '@sendbird/uikit-utils';
 import {
-  dateSeparator,
+  getDateSeparatorFormat,
   getGroupChannelLastMessage,
   getGroupChannelPreviewTime,
   getGroupChannelTitle,
-  messageTime,
+  getMessageTimeFormat,
 } from '@sendbird/uikit-utils';
 
 /**
@@ -44,6 +44,9 @@ export interface StringSet {
     INPUT_EDIT_OK: string;
     INPUT_EDIT_CANCEL: string;
 
+    /** GroupChannel > Suggested mention list */
+    MENTION_LIMITED: (mentionLimit: number) => string;
+
     /** GroupChannel > Dialog > Message */
     DIALOG_MESSAGE_COPY: string;
     DIALOG_MESSAGE_EDIT: string;
@@ -69,9 +72,12 @@ export interface StringSet {
 
     /** GroupChannelSettings > Menu */
     MENU_MODERATION: string;
-    MENU_NOTIFICATION: string;
     MENU_MEMBERS: string;
     MENU_LEAVE_CHANNEL: string;
+    MENU_NOTIFICATION: string;
+    MENU_NOTIFICATION_LABEL_ON: string;
+    MENU_NOTIFICATION_LABEL_OFF: string;
+    MENU_NOTIFICATION_LABEL_MENTION_ONLY: string;
 
     /** GroupChannelSettings > Dialog */
     DIALOG_CHANGE_NAME: string;
@@ -84,6 +90,16 @@ export interface StringSet {
     DIALOG_CHANGE_IMAGE_MENU_CAMERA: string;
     DIALOG_CHANGE_IMAGE_MENU_PHOTO_LIBRARY: string;
   };
+  GROUP_CHANNEL_NOTIFICATIONS: {
+    /** GroupChannelNotifications > Header */
+    HEADER_TITLE: string;
+
+    /** GroupChannelNotifications > Menu */
+    MENU_NOTIFICATIONS: string;
+    MENU_NOTIFICATIONS_DESC: string;
+    MENU_NOTIFICATIONS_OPTION_ALL: string;
+    MENU_NOTIFICATIONS_OPTION_MENTION_ONLY: string;
+  };
   GROUP_CHANNEL_MODERATION: {
     /** GroupChannelModeration > Header */
     HEADER_TITLE: string;
@@ -153,6 +169,10 @@ export interface StringSet {
   };
   // UI
   LABELS: {
+    PERMISSION_APP_NAME: string;
+    PERMISSION_CAMERA: string;
+    PERMISSION_DEVICE_STORAGE: string;
+
     USER_NO_NAME: string;
     CHANNEL_NO_MEMBERS: string;
     TYPING_INDICATOR_TYPINGS: (users: SendbirdUser[]) => string | undefined;
@@ -237,10 +257,10 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       HEADER_TITLE: (currentUserId, channel) =>
         getGroupChannelTitle(currentUserId, channel, USER_NO_NAME, CHANNEL_NO_MEMBERS),
       LIST_BANNER_FROZEN: 'Channel is frozen',
-      LIST_DATE_SEPARATOR: (date, locale) => dateSeparator(date, locale ?? dateLocale),
+      LIST_DATE_SEPARATOR: (date, locale) => getDateSeparatorFormat(date, locale ?? dateLocale),
       LIST_BUTTON_NEW_MSG: (newMessages) => `${newMessages.length} new messages`,
 
-      MESSAGE_BUBBLE_TIME: (message, locale) => messageTime(new Date(message.createdAt), locale ?? dateLocale),
+      MESSAGE_BUBBLE_TIME: (message, locale) => getMessageTimeFormat(new Date(message.createdAt), locale ?? dateLocale),
       MESSAGE_BUBBLE_FILE_TITLE: (message) => message.name,
       MESSAGE_BUBBLE_EDITED_POSTFIX: ' (edited)',
       MESSAGE_BUBBLE_UNKNOWN_TITLE: () => '(Unknown message type)',
@@ -252,6 +272,8 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       INPUT_EDIT_OK: 'Save',
       INPUT_EDIT_CANCEL: 'Cancel',
 
+      MENTION_LIMITED: (mentionLimit) => `You can have up to ${mentionLimit} mentions per message.`,
+
       DIALOG_MESSAGE_COPY: 'Copy',
       DIALOG_MESSAGE_EDIT: 'Edit',
       DIALOG_MESSAGE_SAVE: 'Save',
@@ -271,9 +293,12 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       HEADER_TITLE: 'Channel information',
       HEADER_RIGHT: 'Edit',
       MENU_MODERATION: 'Moderation',
-      MENU_NOTIFICATION: 'Notifications',
       MENU_MEMBERS: 'Members',
       MENU_LEAVE_CHANNEL: 'Leave channel',
+      MENU_NOTIFICATION: 'Notifications',
+      MENU_NOTIFICATION_LABEL_ON: 'On',
+      MENU_NOTIFICATION_LABEL_OFF: 'Off',
+      MENU_NOTIFICATION_LABEL_MENTION_ONLY: 'Mentions only',
       DIALOG_CHANGE_NAME: 'Change channel name',
       DIALOG_CHANGE_NAME_PROMPT_TITLE: 'Change channel name',
       DIALOG_CHANGE_NAME_PROMPT_PLACEHOLDER: 'Enter name',
@@ -285,6 +310,15 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       DIALOG_CHANGE_IMAGE_MENU_PHOTO_LIBRARY: 'Choose photo',
       ...overrides?.GROUP_CHANNEL_SETTINGS,
     },
+    GROUP_CHANNEL_NOTIFICATIONS: {
+      HEADER_TITLE: 'Notifications',
+      MENU_NOTIFICATIONS: 'Notifications',
+      MENU_NOTIFICATIONS_DESC:
+        'Turn on push notifications if you wish to be notified when messages are delivered to this channel.',
+      MENU_NOTIFICATIONS_OPTION_ALL: 'All new messages',
+      MENU_NOTIFICATIONS_OPTION_MENTION_ONLY: 'Mentions only',
+      ...overrides?.GROUP_CHANNEL_NOTIFICATIONS,
+    },
     GROUP_CHANNEL_MODERATION: {
       HEADER_TITLE: 'Moderation',
       MENU_OPERATORS: 'Operators',
@@ -361,6 +395,9 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       ...overrides?.GROUP_CHANNEL_INVITE,
     },
     LABELS: {
+      PERMISSION_APP_NAME: 'Application',
+      PERMISSION_CAMERA: 'camera',
+      PERMISSION_DEVICE_STORAGE: 'device storage',
       USER_NO_NAME,
       CHANNEL_NO_MEMBERS,
       TYPING_INDICATOR_TYPINGS: (users, NO_NAME = USER_NO_NAME) => {
@@ -382,7 +419,7 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
     },
     FILE_VIEWER: {
       TITLE: (message) => message.sender?.nickname || USER_NO_NAME,
-      SUBTITLE: (message) => messageTime(new Date(message.createdAt), dateLocale),
+      SUBTITLE: (message) => getMessageTimeFormat(new Date(message.createdAt), dateLocale),
     },
     PLACEHOLDER: {
       NO_BANNED_USERS: 'No banned users',
@@ -402,7 +439,7 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       ALERT_DEFAULT_OK: 'OK',
       ALERT_PERMISSIONS_TITLE: 'Allow access?',
       ALERT_PERMISSIONS_MESSAGE: (permission, appName = 'Application') => {
-        return `${appName} need permission to access your ${permission}. Go to Settings to allow access`;
+        return `${appName} need permission to access your ${permission}.`;
       },
       ALERT_PERMISSIONS_OK: 'Go to settings',
       PROMPT_DEFAULT_OK: 'Submit',

package/src/platform/createMediaService.expo.tsx

@@ -1,15 +1,27 @@
 import type * as ExpoAV from 'expo-av';
+import type * as ExpoFS from 'expo-file-system';
+import type * as ExpoImageManipulator from 'expo-image-manipulator';
 import type * as ExpoVideoThumbnail from 'expo-video-thumbnails';
 import React from 'react';
 
+import { getDownscaleSize } from '@sendbird/uikit-utils';
+
+import SBUUtils from '../libs/SBUUtils';
 import type { MediaServiceInterface } from './types';
 
 type Modules = {
   avModule: typeof ExpoAV;
   thumbnailModule: typeof ExpoVideoThumbnail;
+  imageManipulator: typeof ExpoImageManipulator;
+  fsModule: typeof ExpoFS;
 };
 
-const createExpoMediaService = ({ avModule, thumbnailModule }: Modules): MediaServiceInterface => {
+const createExpoMediaService = ({
+  avModule,
+  thumbnailModule,
+  imageManipulator,
+  fsModule,
+}: Modules): MediaServiceInterface => {
   return {
     VideoComponent({ source, resizeMode, onLoad, ...props }) {
       // FIXME: type error https://github.com/expo/expo/issues/17101
@@ -24,6 +36,17 @@ const createExpoMediaService = ({ avModule, thumbnailModule }: Modules): MediaSe
         return null;
       }
     },
+    async compressImage({ maxWidth, maxHeight, compressionRate = 1, uri }) {
+      const originSize = await SBUUtils.getImageSize(uri);
+      const resizingSize = getDownscaleSize(originSize, { width: maxWidth, height: maxHeight });
+
+      const { uri: compressedURI } = await imageManipulator.manipulateAsync(uri, [{ resize: resizingSize }], {
+        compress: Math.min(Math.max(0, compressionRate), 1),
+      });
+      const { size = 0 } = await fsModule.getInfoAsync(uri);
+
+      return { uri: compressedURI, size };
+    },
   };
 };
 

package/src/platform/createMediaService.native.tsx

@@ -1,19 +1,24 @@
+import type * as RNImageResizer from '@bam.tech/react-native-image-resizer';
 import React from 'react';
-import type * as CreateThumbnail from 'react-native-create-thumbnail';
-import type Video from 'react-native-video';
+import type * as RNCreateThumbnail from 'react-native-create-thumbnail';
+import type RNVideo from 'react-native-video';
 
+import { getDownscaleSize, getFileExtension, hash } from '@sendbird/uikit-utils';
+
+import SBUUtils from '../libs/SBUUtils';
 import type { MediaServiceInterface } from './types';
 
 type Modules = {
-  VideoComponent: typeof Video;
-  thumbnailModule: typeof CreateThumbnail;
+  VideoComponent: typeof RNVideo;
+  thumbnailModule: typeof RNCreateThumbnail;
+  imageResizerModule: typeof RNImageResizer;
 };
 
-function hash(str: string) {
-  return String(Math.abs(str.split('').reduce((a, c) => ((a << 5) - a + c.charCodeAt(0)) | 0, 0)));
-}
-
-const createNativeMediaService = ({ VideoComponent, thumbnailModule }: Modules): MediaServiceInterface => {
+const createNativeMediaService = ({
+  VideoComponent,
+  thumbnailModule,
+  imageResizerModule,
+}: Modules): MediaServiceInterface => {
   return {
     VideoComponent({ source, resizeMode, onLoad, ...props }) {
       return <VideoComponent {...props} source={source} resizeMode={resizeMode} onLoad={onLoad} controls />;
@@ -31,6 +36,23 @@ const createNativeMediaService = ({ VideoComponent, thumbnailModule }: Modules):
         return null;
       }
     },
+    async compressImage({ uri, maxWidth, maxHeight, compressionRate = 1 }) {
+      const originSize = await SBUUtils.getImageSize(uri);
+      const { width, height } = getDownscaleSize(originSize, { width: maxWidth, height: maxHeight });
+      const extension = (() => {
+        return { 'png': 'PNG', 'jpeg': 'JPEG', 'jpg': 'JPEG' }[getFileExtension(uri)] ?? 'JPEG';
+      })() as 'PNG' | 'JPEG';
+
+      const { size: resizedSize, uri: compressedURI } = await imageResizerModule.default.createResizedImage(
+        uri,
+        width,
+        height,
+        extension,
+        Math.min(Math.max(0, compressionRate), 1) * 100,
+      );
+
+      return { uri: compressedURI, size: resizedSize };
+    },
   };
 };
 

package/src/platform/dynamicModule.ts

@@ -1,43 +1,28 @@
 /* eslint-disable no-console */
-import type RNNetInfo from '@react-native-community/netinfo';
-import { NativeModules } from 'react-native';
-import type RNFastImage from 'react-native-fast-image';
-import type RNFileAccess from 'react-native-file-access';
+import type * as RNCNetInfo from '@react-native-community/netinfo';
+import { NativeModules, UIManager } from 'react-native';
 
 import { Logger } from '@sendbird/uikit-utils';
 
-export interface DynamicModules {
-  'react-native-file-access': typeof RNFileAccess;
-  'react-native-fast-image': typeof RNFastImage;
-  '@react-native-community/netinfo': typeof RNNetInfo;
-}
 export type SBUNativeModule = keyof DynamicModules;
 
 interface SBUDynamicModuleInfo {
   packageName: SBUNativeModule;
-  minVersion: string;
-  moduleName: string;
+  nativeModuleNamespace: string;
   getPackage: <T>(logLevel: 'error' | 'warn' | 'none') => T;
   url: string;
+  isComponent?: boolean;
 }
 
-export function checkVersion(minVersion: string, currentVersion: string) {
-  const [minMajor, minMinor, minPatch] = minVersion.split('.');
-  const [currMajor, currMinor, currPatch] = currentVersion.split('.');
-
-  if (minMajor < currMajor) return true;
-  if (minMajor === currMajor) {
-    if (minMinor < currMinor) return true;
-    if (minMinor === currMinor) {
-      return minPatch <= currPatch;
+function checkLink(dmi: SBUDynamicModuleInfo, logLevel: 'error' | 'warn' | 'none') {
+  const nativeModule = (() => {
+    if (dmi.isComponent) {
+      return UIManager.getViewManagerConfig(dmi.nativeModuleNamespace);
+    } else {
+      return NativeModules[dmi.nativeModuleNamespace];
     }
-    return false;
-  }
-  return false;
-}
+  })();
 
-function checkLink(dmi: SBUDynamicModuleInfo, logLevel: 'error' | 'warn' | 'none') {
-  const nativeModule = NativeModules[dmi.moduleName];
   if (!nativeModule) {
     const message = `[UIKit] Cannot use native module, you should install and link ${dmi.packageName} (${dmi.url})`;
     if (logLevel === 'error') console.error(message);
@@ -45,41 +30,14 @@ function checkLink(dmi: SBUDynamicModuleInfo, logLevel: 'error' | 'warn' | 'none
   }
 }
 
-const SBUDynamicModuleRegistry: Record<SBUNativeModule, SBUDynamicModuleInfo> = {
-  'react-native-file-access': {
-    minVersion: '2.4.3',
-    packageName: 'react-native-file-access',
-    moduleName: 'RNFileAccess',
-    url: 'https://github.com/alpha0010/react-native-file-access',
-    getPackage(logLevel) {
-      checkLink(this, logLevel);
-
-      try {
-        return require('react-native-file-access');
-      } catch (e) {
-        return null;
-      }
-    },
-  },
-  'react-native-fast-image': {
-    minVersion: '8.5.11',
-    packageName: 'react-native-fast-image',
-    moduleName: 'FastImageView',
-    url: 'https://github.com/DylanVann/react-native-fast-image',
-    getPackage(logLevel) {
-      checkLink(this, logLevel);
+export interface DynamicModules {
+  '@react-native-community/netinfo': typeof RNCNetInfo;
+}
 
-      try {
-        return require('react-native-fast-image');
-      } catch (e) {
-        return null;
-      }
-    },
-  },
+const SBUDynamicModuleRegistry: Record<SBUNativeModule, SBUDynamicModuleInfo> = {
   '@react-native-community/netinfo': {
-    minVersion: '9.3.0',
     packageName: '@react-native-community/netinfo',
-    moduleName: 'RNCNetInfo',
+    nativeModuleNamespace: 'RNCNetInfo',
     url: 'https://github.com/react-native-netinfo/react-native-netinfo',
     getPackage(logLevel) {
       checkLink(this, logLevel);
@@ -95,7 +53,7 @@ const SBUDynamicModuleRegistry: Record<SBUNativeModule, SBUDynamicModuleInfo> =
 
 const SBUDynamicModule = {
   register(mdi: SBUDynamicModuleInfo) {
-    SBUDynamicModuleRegistry[mdi.moduleName as SBUNativeModule] = mdi;
+    SBUDynamicModuleRegistry[mdi.nativeModuleNamespace as SBUNativeModule] = mdi;
   },
   getInfo(name: SBUNativeModule) {
     return SBUDynamicModuleRegistry[name] ?? null;

package/src/platform/types.ts

@@ -66,13 +66,35 @@ interface GetVideoThumbnailOptions {
   timeMills?: number;
   quality?: number;
 }
+
+interface CompressImageOptions {
+  /**
+   * A uri of image file to compress
+   * */
+  uri: string;
+
+  /**
+   * A resize width, apply only to downscale
+   * */
+  maxWidth?: number;
+
+  /**
+   * A resize height, apply only to downscale
+   * */
+  maxHeight?: number;
+
+  /**
+   * A value in range 0.0 - 1.0 specifying compression level of the result image.
+   * 1 means highest quality and 0 the lowest quality.
+   * */
+  compressionRate?: number;
+}
+
+type GetVideoThumbnailResult = Promise<{ path: string } | null>;
+type CompressImageResult = Promise<{ uri: string; size: number } | null>;
+
 export interface MediaServiceInterface {
   VideoComponent<Props = {}>(props: VideoProps & Props): JSX.Element;
-  getVideoThumbnail(options: GetVideoThumbnailOptions): Promise<{ path: string } | null>;
-  // compressImage(options: {
-  //   path: string;
-  //   compressionRate: number;
-  //   resizingWidth: number;
-  //   resizingHeight: number;
-  // }): Promise<{ path: string }>;
+  getVideoThumbnail(options: GetVideoThumbnailOptions): GetVideoThumbnailResult;
+  compressImage(options: CompressImageOptions): CompressImageResult;
 }

package/src/types.ts

@@ -1,5 +1,7 @@
 import type { ErrorInfo, ReactNode } from 'react';
 
+import type { SendbirdUser } from '@sendbird/uikit-utils';
+
 export type KeyValuePairGet = [string, string | null];
 export type KeyValuePairSet = [string, string];
 export interface LocalCacheStorage {
@@ -16,3 +18,13 @@ export interface LocalCacheStorage {
 export type ErrorBoundaryProps = { error: Error; errorInfo: ErrorInfo; reset: () => void };
 
 export type CommonComponent<P = {}> = (props: P & { children?: ReactNode }) => null | JSX.Element; //ReactNode;
+
+export type MentionedUser = {
+  range: Range;
+  user: SendbirdUser;
+};
+
+export type Range = {
+  start: number;
+  end: number;
+};

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '2.1.0';
+const VERSION = '2.3.0';
 export default VERSION;