stream-chat-react-native-core 5.16.0-beta.1 → 5.16.0-beta.3

package/lib/typescript/types/types.d.ts

@@ -11,14 +11,16 @@ export declare type Asset = {
     id?: string;
     size?: number | string;
 };
-export declare type File = {
+export declare type FileAssetType = {
     name: string;
-    duration?: string | null;
-    id?: string;
+    mimeType?: string;
     size?: number | string;
-    type?: string;
     uri?: string;
 };
+export declare type File = FileAssetType & {
+    duration?: string | null;
+    id?: string;
+};
 export declare type DefaultAttachmentType = UnknownType & {
     file_size?: number | string;
     mime_type?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.16.0-beta.1",
+  "version": "5.16.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -104,7 +104,7 @@ const FileAttachmentGroupWithContext = <
       setFilesToDisplay((prevFileUploads) =>
         prevFileUploads.map((fileUpload, id) => ({
           ...fileUpload,
-          paused: id.toString() === index ? false : true,
+          paused: id.toString() !== index,
         })),
       );
     } else {

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -304,7 +304,7 @@ export const AttachmentPicker = React.forwardRef(
             data={selectedPhotos}
             keyExtractor={(item) => item.asset.uri}
             numColumns={numberOfAttachmentPickerImageColumns ?? 3}
-            onEndReached={getMorePhotos}
+            onEndReached={photoError ? undefined : getMorePhotos}
             renderItem={renderAttachmentPickerItem}
           />
         </BottomSheet>

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -70,14 +70,16 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
           Alert.alert('Maximum number of files reached');
           return files;
         }
+        // We need a mime-type to upload a video file.
+        const mimeType = lookup(asset.filename) || 'multipart/form-data';
         return [
           ...files,
           {
             duration: durationLabel,
             id: asset.id,
+            mimeType,
             name: asset.filename,
             size: asset.fileSize,
-            type: 'video',
             uri: asset.uri,
           },
         ];
@@ -174,16 +176,6 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
   );
 };
 
-const getFileType = (asset: Asset) => {
-  const { filename } = asset;
-  if (filename) {
-    const contentType = lookup(filename) || 'multipart/form-data';
-    return contentType.startsWith('image/') ? 'image' : 'video';
-  } else {
-    return asset.type === 'video' ? 'video' : 'image';
-  }
-};
-
 export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerItemType }) => {
   const {
     asset,
@@ -196,9 +188,29 @@ export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerIte
     setSelectedImages,
   } = item;
 
-  const fileType = getFileType(asset);
+  /**
+   * Expo Media Library - Result of asset type
+   * Native Android - Gives mime type(Eg: image/jpeg, video/mp4, etc.)
+   * Native iOS - Gives `image` or `video`
+   * Expo Android/iOS - Gives `photo` or `video`
+   **/
+  const isVideoType = asset.type.includes('video');
+
+  if (isVideoType) {
+    return (
+      <AttachmentVideo
+        asset={asset}
+        ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
+        maxNumberOfFiles={maxNumberOfFiles}
+        numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
+        numberOfUploads={numberOfUploads}
+        selected={selected}
+        setSelectedFiles={setSelectedFiles}
+      />
+    );
+  }
 
-  return fileType === 'image' ? (
+  return (
     <AttachmentImage
       asset={asset}
       ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
@@ -208,16 +220,6 @@ export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerIte
       selected={selected}
       setSelectedImages={setSelectedImages}
     />
-  ) : (
-    <AttachmentVideo
-      asset={asset}
-      ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
-      maxNumberOfFiles={maxNumberOfFiles}
-      numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
-      numberOfUploads={numberOfUploads}
-      selected={selected}
-      setSelectedFiles={setSelectedFiles}
-    />
   );
 };
 

package/src/components/Channel/Channel.tsx

@@ -1324,7 +1324,7 @@ const ChannelWithContext = <
         ) {
           const response = doDocUploadRequest
             ? await doDocUploadRequest(file, channel)
-            : await channel.sendFile(file.uri, file.name, file.type);
+            : await channel.sendFile(file.uri, file.name, file.mimeType);
           attachment.asset_url = response.file;
           if (response.thumb_url) {
             attachment.thumb_url = response.thumb_url;

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -183,7 +183,7 @@ const FileUploadPreviewWithContext = <
       setFileUploads((prevFileUploads) =>
         prevFileUploads.map((fileUpload) => ({
           ...fileUpload,
-          paused: fileUpload.id === index ? false : true,
+          paused: fileUpload.id !== index,
         })),
       );
     } else {
@@ -228,7 +228,7 @@ const FileUploadPreviewWithContext = <
           style={styles.overlay}
           type={indicatorType}
         >
-          {item.file.type?.startsWith('audio/') && isAudioPackageAvailable() ? (
+          {item.file.mimeType?.startsWith('audio/') && isAudioPackageAvailable() ? (
             <View
               style={[
                 { marginBottom: item.state === FileState.UPLOADED ? 8 : 0 },
@@ -279,7 +279,7 @@ const FileUploadPreviewWithContext = <
             >
               <View style={[styles.fileContentContainer, fileContentContainer]}>
                 <View style={styles.fileIcon}>
-                  <FileAttachmentIcon mimeType={item.file.type} />
+                  <FileAttachmentIcon mimeType={item.file.mimeType} />
                 </View>
                 <View style={[styles.fileTextContainer, fileTextContainer]}>
                   <Text

package/src/components/MessageInput/MessageInput.tsx

@@ -406,15 +406,15 @@ const MessageInputWithContext = <
     } else if (fileUploadsLength > selectedFilesLength) {
       /**
        * User is editing some message which contains video attachments OR
-       * video attachment is added from custom image picker (other than the default bottomsheet image picker)
+       * video attachment is added from custom image picker (other than the default bottom-sheet image picker)
        * using `uploadNewFile` function from `MessageInputContext`.
        **/
       setSelectedFiles(
         fileUploads.map((fileUpload) => ({
           duration: fileUpload.file.duration,
+          mimeType: fileUpload.file.mimeType,
           name: fileUpload.file.name,
           size: fileUpload.file.size,
-          type: fileUpload.file.type,
           uri: fileUpload.file.uri,
         })),
       );

package/src/components/MessageInput/__tests__/FileUploadPreview.test.js

@@ -318,8 +318,8 @@ describe('FileUploadPreview', () => {
     const fileUploads = [
       generateFileUploadPreview({
         id: 'file-upload-id-1',
+        mimeType: 'audio/mp3',
         state: FileState.UPLOADED,
-        type: 'audio/mp3',
       }),
     ];
     const removeFile = jest.fn();

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -1,6 +1,5 @@
-import React, { PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
-
 import type { LegacyRef } from 'react';
+import React, { PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
 import type { TextInput, TextInputProps } from 'react-native';
 import { Alert, Keyboard, Platform } from 'react-native';
 
@@ -591,14 +590,14 @@ export const MessageInputProvider = <
     const MEGA_BYTES_TO_BYTES = 1024 * 1024;
     const MAX_FILE_SIZE_TO_UPLOAD_IN_MB = 100;
 
-    if (!result.cancelled && result.docs) {
-      const totalFileSize = result.docs.reduce((acc, doc) => acc + Number(doc.size), 0);
+    if (!result.cancelled && result.assets) {
+      const totalFileSize = result.assets.reduce((acc, asset) => acc + Number(asset.size), 0);
       if (totalFileSize / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB) {
         Alert.alert(
           `Maximum file size upload limit reached, please upload files below ${MAX_FILE_SIZE_TO_UPLOAD_IN_MB}MB.`,
         );
       } else {
-        result.docs.forEach((doc) => {
+        result.assets.forEach((asset) => {
           /**
            * TODO: The current tight coupling of images to the image
            * picker does not allow images picked from the file picker
@@ -606,7 +605,7 @@ export const MessageInputProvider = <
            * This should be updated alongside allowing image a file
            * uploads together.
            */
-          uploadNewFile(doc);
+          uploadNewFile(asset);
         });
       }
     }
@@ -652,31 +651,30 @@ export const MessageInputProvider = <
   };
 
   const mapFileUploadToAttachment = (file: FileUpload) => {
-    const mime_type: string | boolean = lookup(file.file.name as string);
-    if (file.file.type?.startsWith('image/')) {
+    if (file.file.mimeType?.startsWith('image/')) {
       return {
         fallback: file.file.name,
         image_url: file.url,
-        mime_type: mime_type ? mime_type : undefined,
+        mime_type: file.file.mimeType,
         originalFile: file.file,
         type: 'image',
       };
-    } else if (file.file.type?.startsWith('audio/')) {
+    } else if (file.file.mimeType?.startsWith('audio/')) {
       return {
         asset_url: file.url || file.file.uri,
         duration: file.file.duration,
         file_size: file.file.size,
-        mime_type: file.file.type,
+        mime_type: file.file.mimeType,
         originalFile: file.file,
         title: file.file.name,
         type: 'audio',
       };
-    } else if (file.file.type?.startsWith('video/')) {
+    } else if (file.file.mimeType?.startsWith('video/')) {
       return {
         asset_url: file.url || file.file.uri,
         duration: file.file.duration,
         file_size: file.file.size,
-        mime_type: file.file.type,
+        mime_type: file.file.mimeType,
         originalFile: file.file,
         thumb_url: file.thumb_url,
         title: file.file.name,
@@ -686,7 +684,7 @@ export const MessageInputProvider = <
       return {
         asset_url: file.url || file.file.uri,
         file_size: file.file.size,
-        mime_type: file.file.type,
+        mime_type: file.file.mimeType,
         originalFile: file.file,
         title: file.file.name,
         type: 'file',
@@ -915,14 +913,15 @@ export const MessageInputProvider = <
     }
   };
 
-  const regExcondition = /File (extension \.\w{2,4}|type \S+) is not supported/;
+  const regexCondition = /File (extension \.\w{2,4}|type \S+) is not supported/;
 
-  const getUploadSetStateAction = <UploadType extends ImageUpload | FileUpload>(
-    id: string,
-    fileState: FileStateValue,
-    extraData: Partial<UploadType> = {},
-  ): React.SetStateAction<UploadType[]> => {
-    const uploads: (prevUploads: UploadType[]) => UploadType[] = (prevUploads: UploadType[]) =>
+  const getUploadSetStateAction =
+    <UploadType extends ImageUpload | FileUpload>(
+      id: string,
+      fileState: FileStateValue,
+      extraData: Partial<UploadType> = {},
+    ): React.SetStateAction<UploadType[]> =>
+    (prevUploads: UploadType[]) =>
       prevUploads.map((prevUpload) => {
         if (prevUpload.id === id) {
           return {
@@ -934,14 +933,11 @@ export const MessageInputProvider = <
         return prevUpload;
       });
 
-    return uploads;
-  };
-
   const handleFileOrImageUploadError = (error: unknown, isImageError: boolean, id: string) => {
     if (isImageError) {
       setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
       if (error instanceof Error) {
-        if (regExcondition.test(error.message)) {
+        if (regexCondition.test(error.message)) {
           return setImageUploads(getUploadSetStateAction(id, FileState.NOT_SUPPORTED));
         }
 
@@ -951,7 +947,7 @@ export const MessageInputProvider = <
       setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
 
       if (error instanceof Error) {
-        if (regExcondition.test(error.message)) {
+        if (regexCondition.test(error.message)) {
           return setFileUploads(getUploadSetStateAction(id, FileState.NOT_SUPPORTED));
         }
         return setFileUploads(getUploadSetStateAction(id, FileState.UPLOAD_FAILED));
@@ -969,9 +965,7 @@ export const MessageInputProvider = <
       if (value.doDocUploadRequest) {
         response = await value.doDocUploadRequest(file, channel);
       } else if (channel && file.uri) {
-        // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
-        const localAssetURI = Platform.OS === 'ios' && file.id && (await getLocalAssetUri(file.id));
-        response = await channel.sendFile(localAssetURI || file.uri, file.name, file.type);
+        response = await channel.sendFile(file.uri, file.name, file.mimeType);
       }
       const extraData: Partial<FileUpload> = { thumb_url: response.thumb_url, url: response.file };
       setFileUploads(getUploadSetStateAction(id, FileState.UPLOADED, extraData));
@@ -996,7 +990,7 @@ export const MessageInputProvider = <
       /**
        * We skip compression if:
        * - the file is from the camera as that should already be compressed
-       * - the file has not height/width value to maintain for compression
+       * - the file has no height/width value to maintain for compression
        * - the compressImageQuality number is not present or is 1 (meaning no compression)
        */
       const compressedUri = await (file.source === 'camera' ||
@@ -1055,7 +1049,6 @@ export const MessageInputProvider = <
 
   const uploadNewFile = async (file: File) => {
     const id: string = generateRandomId();
-    const mimeType: string | boolean = lookup(file.name);
 
     const isBlockedFileExtension: boolean | undefined = blockedFileExtensionTypes?.some(
       (fileExtensionType: string) => file.name?.includes(fileExtensionType),
@@ -1071,7 +1064,7 @@ export const MessageInputProvider = <
 
     const newFile: FileUpload = {
       duration: 0,
-      file: { ...file, type: mimeType || file?.type },
+      file,
       id: file.id || id,
       paused: true,
       progress: 0,

package/src/contexts/messageInputContext/__tests__/__snapshots__/sendMessage.test.tsx.snap

@@ -42,7 +42,7 @@ Object {
     Object {
       "asset_url": undefined,
       "file_size": undefined,
-      "mime_type": "file",
+      "mime_type": undefined,
       "originalFile": Object {
         "name": "dummy.pdf",
         "state": "uploaded",
@@ -53,41 +53,39 @@ Object {
     },
     Object {
       "asset_url": undefined,
-      "duration": undefined,
       "file_size": undefined,
-      "mime_type": "video/mp4",
+      "mime_type": undefined,
       "originalFile": Object {
         "name": "dummy.pdf",
         "state": "finished",
         "type": "video/mp4",
       },
-      "thumb_url": undefined,
       "title": "dummy.pdf",
-      "type": "video",
+      "type": "file",
     },
     Object {
       "asset_url": undefined,
-      "duration": undefined,
       "file_size": undefined,
-      "mime_type": "audio/mp3",
+      "mime_type": undefined,
       "originalFile": Object {
         "name": "dummy.pdf",
         "state": "uploaded",
         "type": "audio/mp3",
       },
       "title": "dummy.pdf",
-      "type": "audio",
+      "type": "file",
     },
     Object {
-      "fallback": "dummy.pdf",
-      "image_url": undefined,
-      "mime_type": "application/pdf",
+      "asset_url": undefined,
+      "file_size": undefined,
+      "mime_type": undefined,
       "originalFile": Object {
         "name": "dummy.pdf",
         "state": "finished",
         "type": "image/jpeg",
       },
-      "type": "image",
+      "title": "dummy.pdf",
+      "type": "file",
     },
   ],
   "mentioned_users": Array [

package/src/contexts/messageInputContext/__tests__/pickFile.test.tsx

@@ -40,11 +40,11 @@ describe("MessageInputContext's pickFile", () => {
   jest.spyOn(Alert, 'alert');
   jest.spyOn(NativeUtils, 'pickDocument').mockImplementation(
     jest.fn().mockResolvedValue({
-      cancelled: false,
-      docs: [
+      assets: [
         generateFileAttachment({ size: 500000000 }),
         generateFileAttachment({ size: 600000000 }),
       ],
+      cancelled: false,
     }),
   );
 

package/src/contexts/messageInputContext/hooks/useMessageDetailsForState.ts

@@ -54,9 +54,9 @@ export const useMessageDetailsForState = <
           const id = generateRandomId();
           newFileUploads.push({
             file: {
+              mimeType: attachment.mime_type,
               name: attachment.title || '',
               size: attachment.file_size,
-              type: attachment.mime_type,
             },
             id,
             state: 'finished',
@@ -78,9 +78,9 @@ export const useMessageDetailsForState = <
           const id = generateRandomId();
           newFileUploads.push({
             file: {
+              mimeType: attachment.mime_type,
               name: attachment.title || '',
               size: attachment.file_size,
-              type: attachment.mime_type,
             },
             id,
             state: 'finished',

package/src/native.ts

@@ -57,7 +57,7 @@ export let NetInfo: NetInfo = {
 type PickDocument = ({ maxNumberOfFiles }: { maxNumberOfFiles?: number }) =>
   | Promise<{
       cancelled: boolean;
-      docs?: File[];
+      assets?: File[];
     }>
   | never;
 export let pickDocument: PickDocument = fail;

package/src/types/types.ts

@@ -13,15 +13,19 @@ export type Asset = {
   size?: number | string;
 };
 
-export type File = {
+export type FileAssetType = {
   name: string;
-  duration?: string | null;
-  id?: string;
+  mimeType?: string;
   size?: number | string;
-  type?: string;
+  // The uri should be of type `string`. But is `string|undefined` because the same type is used for the response from Stream's Attachment. This shall be fixed.
   uri?: string;
 };
 
+export type File = FileAssetType & {
+  duration?: string | null;
+  id?: string;
+};
+
 export type DefaultAttachmentType = UnknownType & {
   file_size?: number | string;
   mime_type?: string;
@@ -34,6 +38,7 @@ interface DefaultUserType extends UnknownType {
 
 interface DefaultChannelType extends UnknownType {
   [key: string]: unknown;
+
   image?: string;
 }
 

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.16.0-beta.1"
+  "version": "5.16.0-beta.3"
 }