@sendbird/uikit-react-native 2.2.0 → 2.3.0

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/version.ts

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

package/lib/commonjs/utils/common.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.openUrl = void 0;
-
-var _reactNative = require("react-native");
-
-var _uikitUtils = require("@sendbird/uikit-utils");
-
-const openUrl = url => {
-  const targetUrl = url.startsWith('http') ? url : 'https://' + url;
-
-  _reactNative.Linking.openURL(targetUrl).catch(err => _uikitUtils.Logger.warn('Cannot open url', err));
-};
-
-exports.openUrl = openUrl;
-//# sourceMappingURL=common.js.map

package/lib/commonjs/utils/common.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["openUrl","url","targetUrl","startsWith","Linking","openURL","catch","err","Logger","warn"],"sources":["common.ts"],"sourcesContent":["import { Linking } from 'react-native';\n\nimport { Logger } from '@sendbird/uikit-utils';\n\nexport const openUrl = (url: string) => {\n  const targetUrl = url.startsWith('http') ? url : 'https://' + url;\n  Linking.openURL(targetUrl).catch((err) => Logger.warn('Cannot open url', err));\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEO,MAAMA,OAAO,GAAIC,GAAD,IAAiB;EACtC,MAAMC,SAAS,GAAGD,GAAG,CAACE,UAAJ,CAAe,MAAf,IAAyBF,GAAzB,GAA+B,aAAaA,GAA9D;;EACAG,oBAAA,CAAQC,OAAR,CAAgBH,SAAhB,EAA2BI,KAA3B,CAAkCC,GAAD,IAASC,kBAAA,CAAOC,IAAP,CAAY,iBAAZ,EAA+BF,GAA/B,CAA1C;AACD,CAHM"}

package/lib/module/utils/common.js

@@ -1,7 +0,0 @@
-import { Linking } from 'react-native';
-import { Logger } from '@sendbird/uikit-utils';
-export const openUrl = url => {
-  const targetUrl = url.startsWith('http') ? url : 'https://' + url;
-  Linking.openURL(targetUrl).catch(err => Logger.warn('Cannot open url', err));
-};
-//# sourceMappingURL=common.js.map

package/lib/module/utils/common.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Linking","Logger","openUrl","url","targetUrl","startsWith","openURL","catch","err","warn"],"sources":["common.ts"],"sourcesContent":["import { Linking } from 'react-native';\n\nimport { Logger } from '@sendbird/uikit-utils';\n\nexport const openUrl = (url: string) => {\n  const targetUrl = url.startsWith('http') ? url : 'https://' + url;\n  Linking.openURL(targetUrl).catch((err) => Logger.warn('Cannot open url', err));\n};\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,cAAxB;AAEA,SAASC,MAAT,QAAuB,uBAAvB;AAEA,OAAO,MAAMC,OAAO,GAAIC,GAAD,IAAiB;EACtC,MAAMC,SAAS,GAAGD,GAAG,CAACE,UAAJ,CAAe,MAAf,IAAyBF,GAAzB,GAA+B,aAAaA,GAA9D;EACAH,OAAO,CAACM,OAAR,CAAgBF,SAAhB,EAA2BG,KAA3B,CAAkCC,GAAD,IAASP,MAAM,CAACQ,IAAP,CAAY,iBAAZ,EAA+BD,GAA/B,CAA1C;AACD,CAHM"}

package/lib/typescript/src/utils/common.d.ts

@@ -1 +0,0 @@
-export declare const openUrl: (url: string) => void;

package/src/utils/common.ts

@@ -1,8 +0,0 @@
-import { Linking } from 'react-native';
-
-import { Logger } from '@sendbird/uikit-utils';
-
-export const openUrl = (url: string) => {
-  const targetUrl = url.startsWith('http') ? url : 'https://' + url;
-  Linking.openURL(targetUrl).catch((err) => Logger.warn('Cannot open url', err));
-};