Merge pull request #1346 from GetStream/khushal87-video-upload

feat: allow video upload from image picker

Author: khushal87

docusaurus/docs/reactnative/contexts/attachment_picker_context.mdx

@@ -86,6 +86,20 @@ Function to open the attachment picker bottom sheet.
 | -------- |
 | function |
 
+### selectedFiles
+
+List of currently selected files in attachment picker.
+
+```tsx
+Array<{
+  duration: number | null;
+  name: string;
+  size: string;
+  type: string;
+  uri: string;
+}>
+```
+
 ### selectedImages
 
 List of currently selected images in attachment picker.
@@ -118,6 +132,14 @@ Setter function for [`bottomInset`](#bottominset)
 
 <!-- ### setMaxNumberOfFiles -->
 
+### setSelectedFiles
+
+Setter function for [`selectedFiles`](#selectedFiles)
+
+| Type                      |
+| ------------------------- |
+| `(selectedFiles) => void` |
+
 ### setSelectedImages
 
 Setter function for [`selectedImages`](#selectedimages)

examples/ExpoMessaging/ios/Podfile.lock

@@ -530,7 +530,7 @@ SPEC CHECKSUMS:
   EXSharing: 328228a9f14503cfdec68892796478a7a15b8d4d
   EXSplashScreen: 21669e598804ee810547dbb6692c8deb5dd8dbf3
   FBLazyVector: c71c5917ec0ad2de41d5d06a5855f6d5eda06971
-  FBReactNativeSpec: b72999e1c6a58ea23a25a616a814764c0f91577d
+  FBReactNativeSpec: 244d2780a858c4f0972d17e1d6a0cad15e32fbbc
   glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: d34bf57e17cb6e3b2681f4809b13843c021feb6c
@@ -566,4 +566,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 8089780b20a2c230f15d6573003c7a651b171fa4
 
-COCOAPODS: 1.11.2
+COCOAPODS: 1.11.3

examples/ExpoMessaging/yarn.lock

@@ -2540,6 +2540,13 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
+babel-plugin-polyfill-regenerator@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz#2c0678ea47c75c8cc2fbb1852278d8fb68233990"
+  integrity sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.1"
+
 babel-plugin-react-native-web@~0.17.1:
   version "0.17.7"
   resolved "https://registry.yarnpkg.com/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.17.7.tgz#1580e27a2e3c6692127535d3880fe1e247ef6414"
@@ -4939,6 +4946,7 @@ [email protected], metro-react-native-babel-preset@~0.64.0:
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
     "@babel/plugin-syntax-optional-chaining" "^7.0.0"
     "@babel/plugin-transform-arrow-functions" "^7.0.0"
+    "@babel/plugin-transform-async-to-generator" "^7.0.0"
     "@babel/plugin-transform-block-scoping" "^7.0.0"
     "@babel/plugin-transform-classes" "^7.0.0"
     "@babel/plugin-transform-computed-properties" "^7.0.0"

package/expo-package/src/index.js

@@ -45,15 +45,19 @@ registerNativeHandlers({
       const results = await MediaLibrary.getAssetsAsync({
         after,
         first,
-        mediaType: [MediaLibrary.MediaType.photo],
+        mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
       });
       const assets = results.assets.map((asset) => ({
+        duration: asset.duration,
+        filename: asset.filename,
         height: asset.height,
         id: asset.id,
         source: 'picker',
+        type: asset.mediaType,
         uri: asset.uri,
         width: asset.width,
       }));
+
       const hasNextPage = results.hasNextPage;
       const endCursor = results.endCursor;
       return { assets, endCursor, hasNextPage };
@@ -155,12 +159,13 @@ registerNativeHandlers({
             // https://github.com/ivpusic/react-native-image-crop-picker/issues/901
             // This we can't rely on them as it is, and we need to use Image.getSize
             // to get accurate size.
-            const getSize = () => new Promise((resolve) => {
-              Image.getSize(photo.uri, (width, height) => {
-                resolve({height, width});
+            const getSize = () =>
+              new Promise((resolve) => {
+                Image.getSize(photo.uri, (width, height) => {
+                  resolve({ height, width });
+                });
               });
-            });
-    
+
             try {
               const { height, width } = await getSize();
               size.height = height;
@@ -175,12 +180,12 @@ registerNativeHandlers({
               width: photo.width,
             };
           }
-    
+
           return {
             cancelled: false,
             source: 'camera',
             uri: photo.uri,
-            ...size
+            ...size,
           };
         }
       }

package/native-package/src/index.js

@@ -72,9 +72,9 @@ registerNativeHandlers({
       }
       const results = await CameraRoll.getPhotos({
         after,
-        assetType: 'Photos',
+        assetType: 'All',
         first,
-        include: ['imageSize'],
+        include: ['fileSize', 'filename', 'imageSize', 'playableDuration'],
       });
       const assets = results.edges.map((edge) => ({
         ...edge.node.image,
@@ -210,11 +210,12 @@ registerNativeHandlers({
         // https://github.com/ivpusic/react-native-image-crop-picker/issues/901
         // This we can't rely on them as it is, and we need to use Image.getSize
         // to get accurate size.
-        const getSize = () => new Promise((resolve) => {
-          Image.getSize(photo.path, (width, height) => {
-            resolve({height, width});
+        const getSize = () =>
+          new Promise((resolve) => {
+            Image.getSize(photo.path, (width, height) => {
+              resolve({ height, width });
+            });
           });
-        });
 
         try {
           const { height, width } = await getSize();

package/src/components/Attachment/FileIcon.tsx

@@ -19,6 +19,7 @@ import { SEVEN_Z } from '../../icons/SEVEN_Z';
 import { TAR } from '../../icons/TAR';
 import { TXT } from '../../icons/TXT';
 import type { IconProps } from '../../icons/utils/base';
+import { Video } from '../../icons/Video';
 import { XLS } from '../../icons/XLS';
 import { XLSX } from '../../icons/XLSX';
 import { ZIP } from '../../icons/ZIP';
@@ -320,6 +321,46 @@ const zipFileTypes = [
   'application/zip',
 ];
 
+const videoFileTypes = [
+  'video/3g2',
+  'video/3gp',
+  'video/aaf',
+  'video/asf',
+  'video/avchd',
+  'video/avi',
+  'video/drc',
+  'video/flv',
+  'video/m2v',
+  'video/m3u8',
+  'video/m4p',
+  'video/m4v',
+  'video/mkv',
+  'video/mng',
+  'video/mov',
+  'video/mp2',
+  'video/mp4',
+  'video/mpe',
+  'video/mpeg',
+  'video/mpg',
+  'video/mpv',
+  'video/mxf',
+  'video/nsv',
+  'video/ogg',
+  'video/ogv',
+  'video/qt',
+  'video/rm',
+  'video/rmvb',
+  'video/roq',
+  'video/svi',
+  'video/vob',
+  'video/webm',
+  'video/wmv',
+  'video/yuv',
+  'video/quicktime',
+  'video/webm',
+  'video/x-flv',
+];
+
 const mimeTypeToIconMap: Record<string, React.FC<IconProps>> = {
   'application/pdf': PDF, // .pdf
   'application/rtf': RTF, // .rtf
@@ -371,6 +412,10 @@ for (const type of zipFileTypes) {
   mimeTypeToIconMap[type] = ZIP;
 }
 
+for (const type of videoFileTypes) {
+  mimeTypeToIconMap[type] = Video;
+}
+
 function mimeTypeToIcon(mimeType?: string): React.FC<IconProps> {
   if (!mimeType) return GenericFile;