@sendbird/uikit-react-native 1.0.0 → 1.1.0

package/src/index.ts

@@ -6,6 +6,7 @@ import { Logger } from '@sendbird/uikit-utils';
 export { default as MessageRenderer } from './components/MessageRenderer';
 export { default as ChannelCover } from './components/ChannelCover';
 export { default as ChatFlatList } from './components/ChatFlatList';
+export { default as FileViewer } from './components/FileViewer';
 export { default as NewMessagesButton } from './components/NewMessagesButton';
 export { default as ProviderLayout } from './components/ProviderLayout';
 export { default as ScrollToBottomButton } from './components/ScrollToBottomButton';
@@ -41,9 +42,12 @@ export type { StringSet } from './localization/StringSet.type';
 export { default as createNativeFileService } from './platform/createFileService.native';
 export { default as createNativeClipboardService } from './platform/createClipboardService.native';
 export { default as createNativeNotificationService } from './platform/createNotificationService.native';
+export { default as createNativeMediaService } from './platform/createMediaService.native';
 export { default as createExpoFileService } from './platform/createFileService.expo';
 export { default as createExpoClipboardService } from './platform/createClipboardService.expo';
 export { default as createExpoNotificationService } from './platform/createNotificationService.expo';
+export { default as createExpoMediaService } from './platform/createMediaService.expo';
+
 export type {
   FileServiceInterface,
   ClipboardServiceInterface,
@@ -100,5 +104,5 @@ export {
 
 export * from './types';
 
+Logger.setLogLevel(__DEV__ ? 'warn' : 'none');
 Logger.setTitle(`[UIKIT_${Platform.OS}]`);
-__DEV__ && Logger.setLogLevel('none');

package/src/localization/StringSet.type.ts

@@ -131,6 +131,10 @@ export interface StringSet {
     CHANNEL_NO_MEMBERS: string;
     TYPING_INDICATOR_TYPINGS: (users: SendbirdUser[]) => string | undefined;
   };
+  FILE_VIEWER: {
+    TITLE: (message: SendbirdFileMessage) => string;
+    SUBTITLE: (message: SendbirdFileMessage) => string;
+  };
   PLACEHOLDER: {
     NO_BANNED_MEMBERS: string;
     NO_USERS: string;
@@ -292,6 +296,10 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       },
       ...overrides?.LABELS,
     },
+    FILE_VIEWER: {
+      TITLE: (message) => message.sender?.nickname || USER_NO_NAME,
+      SUBTITLE: (message) => messageTime(new Date(message.createdAt), dateLocale),
+    },
     PLACEHOLDER: {
       NO_BANNED_MEMBERS: 'No banned members',
       NO_USERS: 'No users',

package/src/platform/createFileService.expo.ts

@@ -1,7 +1,7 @@
-import type ExpoDocumentPicker from 'expo-document-picker';
-import type ExpoFs from 'expo-file-system';
-import type ExpoImagePicker from 'expo-image-picker';
-import type ExpoMediaLibrary from 'expo-media-library';
+import type * as ExpoDocumentPicker from 'expo-document-picker';
+import type * as ExpoFs from 'expo-file-system';
+import type * as ExpoImagePicker from 'expo-image-picker';
+import type * as ExpoMediaLibrary from 'expo-media-library';
 
 import { getFileExtension, getFileType } from '@sendbird/uikit-utils';
 
@@ -67,8 +67,10 @@ const createExpoFileService = ({
               return imagePickerModule.MediaTypeOptions.Images;
             case 'video':
               return imagePickerModule.MediaTypeOptions.Videos;
-            default:
+            case 'all':
               return imagePickerModule.MediaTypeOptions.All;
+            default:
+              return imagePickerModule.MediaTypeOptions.Images;
           }
         })(),
       });
@@ -83,7 +85,6 @@ const createExpoFileService = ({
       return fileTypeGuard({ uri, size, type: `${type}/${ext.slice(1)}`, name: Date.now() + ext });
     }
     async openMediaLibrary(options: OpenMediaLibraryOptions) {
-      const selectionLimit = options?.selectionLimit || 1;
       const hasPermission = await this.hasMediaLibraryPermission('read');
       if (!hasPermission) {
         const granted = await this.requestMediaLibraryPermission('read');
@@ -93,17 +94,27 @@ const createExpoFileService = ({
         }
       }
 
-      const response = await imagePickerModule.launchImageLibraryAsync({ allowsMultipleSelection: true });
+      const response = await imagePickerModule.launchImageLibraryAsync({
+        mediaTypes: (() => {
+          switch (options?.mediaType) {
+            case 'photo':
+              return imagePickerModule.MediaTypeOptions.Images;
+            case 'video':
+              return imagePickerModule.MediaTypeOptions.Videos;
+            case 'all':
+              return imagePickerModule.MediaTypeOptions.All;
+            default:
+              return imagePickerModule.MediaTypeOptions.Images;
+          }
+        })(),
+      });
       if (response.cancelled) return null;
+      const { uri } = response;
 
-      return Promise.all(
-        response.selected.slice(0, selectionLimit).map(async ({ uri }) => {
-          const { size } = await fsModule.getInfoAsync(uri);
-          const ext = getFileExtension(uri);
-          const type = getFileType(ext);
-          return fileTypeGuard({ uri, size, type: `${type}/${ext.slice(1)}`, name: Date.now() + ext });
-        }),
-      );
+      const { size } = await fsModule.getInfoAsync(uri);
+      const ext = getFileExtension(uri);
+      const type = getFileType(ext);
+      return [fileTypeGuard({ uri, size, type: `${type}/${ext.slice(1)}`, name: Date.now() + ext })];
     }
 
     async openDocument(options?: OpenDocumentOptions): Promise<FilePickerResponse> {
@@ -131,7 +142,9 @@ const createExpoFileService = ({
       const downloadPath = `${basePath}/${options.fileName}`;
 
       const response = await fsModule.downloadAsync(options.fileUrl, downloadPath);
-      await mediaLibraryModule.saveToLibraryAsync(response.uri);
+      if (getFileType(options.fileType || '').match(/video|image/)) {
+        await mediaLibraryModule.saveToLibraryAsync(response.uri);
+      }
       return response.uri;
     }
   }

package/src/platform/createFileService.native.ts

@@ -54,7 +54,7 @@ const createNativeFileService = ({
   fsModule: typeof FileAccess;
 }): FileServiceInterface => {
   const cameraPermissions: Permission[] = Platform.select({
-    ios: [permissionModule.PERMISSIONS.IOS.CAMERA],
+    ios: [permissionModule.PERMISSIONS.IOS.CAMERA, permissionModule.PERMISSIONS.IOS.MICROPHONE],
     android: [permissionModule.PERMISSIONS.ANDROID.CAMERA],
     default: [],
   });
@@ -94,7 +94,18 @@ const createNativeFileService = ({
 
       const response = await imagePickerModule.launchCamera({
         cameraType: options?.cameraType ?? 'back',
-        mediaType: options?.mediaType ?? 'photo',
+        mediaType: (() => {
+          switch (options?.mediaType) {
+            case 'photo':
+              return 'photo';
+            case 'video':
+              return 'video';
+            case 'all':
+              return 'mixed';
+            default:
+              return 'photo';
+          }
+        })(),
       });
       if (response.didCancel) return null;
       if (response.errorCode === 'camera_unavailable') {
@@ -128,8 +139,10 @@ const createNativeFileService = ({
               return 'photo';
             case 'video':
               return 'video';
-            default:
+            case 'all':
               return 'mixed';
+            default:
+              return 'photo';
           }
         })(),
       });

package/src/platform/createMediaService.expo.tsx

@@ -0,0 +1,30 @@
+import type * as ExpoAV from 'expo-av';
+import type * as ExpoVideoThumbnail from 'expo-video-thumbnails';
+import React from 'react';
+
+import type { MediaServiceInterface } from './types';
+
+type Modules = {
+  avModule: typeof ExpoAV;
+  thumbnailModule: typeof ExpoVideoThumbnail;
+};
+
+const createExpoMediaService = ({ avModule, thumbnailModule }: Modules): MediaServiceInterface => {
+  return {
+    VideoComponent({ source, resizeMode, onLoad, ...props }) {
+      // FIXME: type error https://github.com/expo/expo/issues/17101
+      // @ts-ignore
+      return <avModule.Video {...props} source={source} resizeMode={resizeMode} onLoad={onLoad} useNativeControls />;
+    },
+    async getVideoThumbnail({ url, quality, timeMills }) {
+      try {
+        const { uri } = await thumbnailModule.getThumbnailAsync(url, { quality, time: timeMills });
+        return { path: uri };
+      } catch {
+        return null;
+      }
+    },
+  };
+};
+
+export default createExpoMediaService;

package/src/platform/createMediaService.native.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import type * as CreateThumbnail from 'react-native-create-thumbnail';
+import type Video from 'react-native-video';
+
+import type { MediaServiceInterface } from './types';
+
+type Modules = {
+  VideoComponent: typeof Video;
+  thumbnailModule: typeof CreateThumbnail;
+};
+
+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 => {
+  return {
+    VideoComponent({ source, resizeMode, onLoad, ...props }) {
+      return <VideoComponent {...props} source={source} resizeMode={resizeMode} onLoad={onLoad} controls />;
+    },
+    async getVideoThumbnail({ url, timeMills }) {
+      try {
+        const { path } = await thumbnailModule.createThumbnail({
+          url,
+          format: 'jpeg',
+          timeStamp: timeMills,
+          cacheName: hash(url),
+        });
+        return { path };
+      } catch {
+        return null;
+      }
+    },
+  };
+};
+
+export default createNativeMediaService;

package/src/platform/createNotificationService.expo.ts

@@ -1,4 +1,4 @@
-import type ExpoNotification from 'expo-notifications';
+import type * as ExpoNotification from 'expo-notifications';
 
 import type { ExpoPushPermissionResponse } from '../utils/expoPermissionGranted';
 import type { NotificationServiceInterface } from './types';

package/src/platform/types.ts

@@ -3,6 +3,7 @@ export type DownloadedPath = string;
 export type FilePickerResponse = FileType | null;
 export type FileType = { uri: string; size: number; name: string; type: string };
 
+// ---------- NotificationService ---------- //
 export interface NotificationServiceInterface {
   hasPushPermission(): Promise<boolean>;
   requestPushPermission(): Promise<boolean>;
@@ -12,11 +13,13 @@ export interface NotificationServiceInterface {
   onTokenRefresh(handler: (token: string) => void): Unsubscribe;
 }
 
+// ---------- ClipboardService ---------- //
 export interface ClipboardServiceInterface {
   setString(text: string): void;
   getString(): Promise<string>;
 }
 
+// ---------- FileService ---------- //
 export interface FileServiceInterface extends FilePickerServiceInterface, FileSystemServiceInterface {}
 
 export interface OpenResultListener {
@@ -28,7 +31,7 @@ export interface OpenMediaLibraryOptions extends OpenResultListener {
 }
 export interface OpenCameraOptions extends OpenResultListener {
   cameraType?: 'front' | 'back';
-  mediaType?: 'photo' | 'video';
+  mediaType?: 'photo' | 'video' | 'all';
 }
 export type OpenDocumentOptions = OpenResultListener;
 export interface SaveOptions {
@@ -49,3 +52,25 @@ export interface FileSystemServiceInterface {
   // - Application supports iTunes file sharing
   save(options?: SaveOptions): Promise<DownloadedPath | null>;
 }
+
+// ---------- MediaService ---------- //
+interface VideoProps {
+  source: { uri: string } | number;
+  resizeMode?: 'cover' | 'contain' | 'stretch';
+  onLoad?: () => void;
+}
+interface GetVideoThumbnailOptions {
+  url: string;
+  timeMills?: number;
+  quality?: number;
+}
+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 }>;
+}

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '1.0.0';
+const VERSION = '1.1.0';
 export default VERSION;