fix: unify file and image types

Author: khushal87

package/expo-package/package.json

@@ -10,20 +10,21 @@
   "main": "src/index.js",
   "types": "types/index.d.ts",
   "dependencies": {
+    "mime": "^4.0.6",
     "stream-chat-react-native-core": "link:../"
   },
   "peerDependencies": {
     "expo": ">=51.0.0",
     "expo-av": "*",
-    "expo-video": "*",
     "expo-clipboard": "*",
     "expo-document-picker": "*",
     "expo-file-system": "*",
     "expo-haptics": "*",
     "expo-image-manipulator": "*",
     "expo-image-picker": "*",
     "expo-media-library": "*",
-    "expo-sharing": "*"
+    "expo-sharing": "*",
+    "expo-video": "*"
   },
   "peerDependenciesMeta": {
     "expo-av": {

package/expo-package/src/optionalDependencies/getPhotos.ts

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-
+import mime from 'mime';
 let MediaLibrary;
 
 try {
@@ -13,12 +13,12 @@ if (!MediaLibrary) {
     'expo-media-library is not installed. Please install it or you can choose to install expo-image-picker for native image picker.',
   );
 }
-import type { Asset } from 'stream-chat-react-native-core';
+import type { File } from 'stream-chat-react-native-core';
 
 import { getLocalAssetUri } from './getLocalAssetUri';
 
 type ReturnType = {
-  assets: Array<Omit<Asset, 'source'> & { source: 'picker' }>;
+  assets: Array<File & { source: 'picker' }>;
   endCursor: string | undefined;
   hasNextPage: boolean;
   iOSLimited: boolean;
@@ -52,14 +52,15 @@ export const getPhotos = MediaLibrary
         const assets = await Promise.all(
           results.assets.map(async (asset) => {
             const localUri = await getLocalAssetUri(asset.id);
+            const mimeType = mime.getType(asset.filename);
+
             return {
               duration: asset.duration * 1000,
               height: asset.height,
-              id: asset.id,
+              mimeType,
               name: asset.filename,
-              originalUri: asset.uri,
-              source: 'picker' as const,
-              type: asset.mediaType,
+              thumb_url: asset.mediaType === 'photo' ? undefined : asset.uri,
+              type: asset.mediaType === 'photo' ? 'image' : 'video',
               uri: localUri || asset.uri,
               width: asset.width,
             };

package/expo-package/src/optionalDependencies/pickDocument.ts

@@ -38,13 +38,21 @@ export const pickDocument = DocumentPicker
         // Applicable to latest version of expo-document-picker
         if (assets) {
           return {
-            assets,
+            assets: assets.map((asset) => ({
+              ...asset,
+              type: asset.mimeType.split('/')[0],
+            })),
             cancelled: false,
           };
         }
         // Applicable to older version of expo-document-picker
         return {
-          assets: [rest],
+          assets: [
+            {
+              ...rest,
+              type: rest.mimeType.split('/')[0],
+            },
+          ],
           cancelled: false,
         };
       } catch (err) {

package/expo-package/src/optionalDependencies/pickImage.ts

@@ -45,11 +45,11 @@ export const pickImage = ImagePicker
               duration: asset.duration,
               name: asset.fileName,
               size: asset.fileSize,
-              source: 'picker',
-              type: asset.mimeType,
+              mimeType: asset.mimeType,
+              type: asset.mimeType.split('/')[0],
               uri: asset.uri,
             }));
-            return { assets, cancelled: false, source: 'picker' };
+            return { assets, cancelled: false };
           } else {
             return { cancelled: true };
           }

package/expo-package/src/optionalDependencies/takePhoto.ts

@@ -63,9 +63,8 @@ export const takePhoto = ImagePicker
               duration: photo.duration, // in milliseconds
               name: 'video_recording_' + date + '.' + photo.uri.split('.').pop(),
               size: photo.fileSize,
-              source: 'camera',
-              type: photo.mimeType,
               uri: photo.uri,
+              type: photo.mimeType.split('/')[0],
             };
           } else {
             if (photo && photo.height && photo.width && photo.uri) {
@@ -98,9 +97,8 @@ export const takePhoto = ImagePicker
                 mimeType: photo.mimeType,
                 name: 'image_' + date + '.' + photo.uri.split('.').pop(),
                 size: photo.fileSize,
-                source: 'camera',
-                type: photo.mimeType,
                 uri: photo.uri,
+                type: photo.mimeType.split('/')[0],
                 ...size,
               };
             }

package/expo-package/yarn.lock

@@ -3764,6 +3764,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
+mime@^4.0.6:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-4.0.7.tgz#0b7a98b08c63bd3c10251e797d67840c9bde9f13"
+  integrity sha512-2OfDPL+e03E0LrXaGYOtTFIYhiuzep94NSsuhrNULq+stylcJedcHdzHtz0atMUuGwJfFYs0YL5xeC/Ca2x0eQ==
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"

package/native-package/package.json

@@ -20,16 +20,17 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "es6-symbol": "^3.1.4",
+    "mime": "^4.0.6",
     "stream-chat-react-native-core": "link:../"
   },
   "peerDependencies": {
     "@react-native-camera-roll/camera-roll": ">=7.8.0",
     "@react-native-clipboard/clipboard": ">=1.14.1",
+    "@react-native-documents/picker": ">=10.1.1",
     "@stream-io/flat-list-mvcp": ">=0.10.3",
     "react-native": ">=0.71.0",
     "react-native-audio-recorder-player": ">=3.6.4",
     "react-native-blob-util": ">=0.19.9",
-    "@react-native-documents/picker": ">=10.1.1",
     "react-native-haptic-feedback": ">=2.2.0",
     "react-native-image-picker": ">=7.1.2",
     "react-native-share": ">=10.2.1",

package/native-package/src/optionalDependencies/getPhotos.ts

@@ -1,4 +1,5 @@
 import { PermissionsAndroid, Platform } from 'react-native';
+import mime from 'mime';
 
 let CameraRollDependency;
 
@@ -11,12 +12,12 @@ try {
   );
 }
 
-import type { Asset } from 'stream-chat-react-native-core';
+import type { File } from 'stream-chat-react-native-core';
 
 import { getLocalAssetUri } from './getLocalAssetUri';
 
 type ReturnType = {
-  assets: Array<Omit<Asset, 'source'> & { source: 'picker' }>;
+  assets: Array<File & { source: 'picker' }>;
   endCursor: string | undefined;
   hasNextPage: boolean;
   iOSLimited: boolean;
@@ -90,16 +91,25 @@ export const getPhotos = CameraRollDependency
         const assets = await Promise.all(
           results.edges.map(async (edge) => {
             const originalUri = edge.node?.image?.uri;
-            const uri = getLocalAssetUri ? await getLocalAssetUri(originalUri) : originalUri;
+            const mimeType =
+              Platform.OS === 'ios'
+                ? mime.getType(edge.node.image.filename as string)
+                : edge.node.type;
+            const isImage = mimeType.includes('image');
+
+            // TODO: Review this is needed or not
+            const uri =
+              isImage && getLocalAssetUri ? await getLocalAssetUri(originalUri) : originalUri;
+
             return {
               ...edge.node.image,
+              name: edge.node.image.filename as string,
               duration: edge.node.image.playableDuration * 1000,
               // since we include filename, fileSize in the query, we can safely assume it will be defined
-              name: edge.node.image.filename as string,
-              originalUri,
+              thumb_url: isImage ? undefined : originalUri,
               size: edge.node.image.fileSize as number,
-              source: 'picker' as const,
-              type: edge.node.type,
+              mimeType,
+              type: isImage ? 'image' : 'video',
               uri,
             };
           }),

package/native-package/src/optionalDependencies/pickDocument.ts

@@ -46,6 +46,7 @@ export const pickDocument = DocumentPicker
             mimeType: type,
             name,
             size,
+            type: type.split('/')[0],
             uri,
           })),
           cancelled: false,

package/native-package/src/optionalDependencies/pickImage.ts

@@ -26,11 +26,11 @@ export const pickImage = ImagePicker
             duration: asset.duration ? asset.duration * 1000 : undefined, // in milliseconds
             name: asset.fileName,
             size: asset.fileSize,
-            source: 'picker',
-            type: asset.type,
+            mimeType: asset.type,
+            type: asset.type.split('/')[0],
             uri: asset.uri,
           }));
-          return { assets, cancelled: false, source: 'picker' };
+          return { assets, cancelled: false };
         } else {
           return { cancelled: true };
         }