fix: issues with video upload in expo from attachment picker and component displayname

Author: khushal87

package/expo-package/src/index.js

@@ -12,6 +12,19 @@ import * as MediaLibrary from 'expo-media-library';
 import * as Sharing from 'expo-sharing';
 import { registerNativeHandlers } from 'stream-chat-react-native-core';
 
+const VideoComponent = ({ onPlaybackStatusUpdate, paused, resizeMode, style, uri, videoRef }) => (
+  <ExpoVideoPlayer
+    onPlaybackStatusUpdate={onPlaybackStatusUpdate}
+    ref={videoRef}
+    resizeMode={resizeMode}
+    shouldPlay={!paused}
+    source={{
+      uri,
+    }}
+    style={[style]}
+  />
+);
+
 registerNativeHandlers({
   compressImage: async ({ compressImageQuality = 1, uri }) => {
     const { uri: compressedUri } = await ImageManipulator.manipulateAsync(uri, [], {
@@ -219,19 +232,7 @@ registerNativeHandlers({
         Haptics.selectionAsync();
     }
   },
-  // eslint-disable-next-line react/display-name
-  Video: ({ onPlaybackStatusUpdate, paused, style, uri, videoRef }) => (
-    <ExpoVideoPlayer
-      onPlaybackStatusUpdate={onPlaybackStatusUpdate}
-      ref={videoRef}
-      resizeMode='contain'
-      shouldPlay={!paused}
-      source={{
-        uri,
-      }}
-      style={[style]}
-    />
-  ),
+  Video: VideoComponent,
 });
 
 export * from 'stream-chat-react-native-core';

package/native-package/src/index.js

@@ -15,6 +15,35 @@ import NetInfo from '@react-native-community/netinfo';
 import { FlatList } from '@stream-io/flat-list-mvcp';
 import { registerNativeHandlers } from 'stream-chat-react-native-core';
 
+const VideoComponent = ({
+  onBuffer,
+  onEnd,
+  onLoad,
+  onProgress,
+  paused,
+  resizeMode,
+  style,
+  uri,
+  videoRef,
+}) => (
+  <Video
+    onBuffer={onBuffer}
+    onEnd={onEnd}
+    onError={(error) => {
+      console.error(error);
+    }}
+    onLoad={onLoad}
+    onProgress={onProgress}
+    paused={paused}
+    ref={videoRef}
+    resizeMode={resizeMode}
+    source={{
+      uri,
+    }}
+    style={style}
+  />
+);
+
 registerNativeHandlers({
   compressImage: async ({ compressImageQuality = 1, height, uri, width }) => {
     try {
@@ -249,24 +278,7 @@ registerNativeHandlers({
       ignoreAndroidSystemSettings: false,
     });
   },
-  // eslint-disable-next-line react/display-name
-  Video: ({ onBuffer, onEnd, onLoad, onProgress, paused, resizeMode, style, uri, videoRef }) => (
-    <Video
-      onBuffer={onBuffer}
-      onEnd={onEnd}
-      onError={(error) => {
-        console.error(error);
-      }}
-      onLoad={onLoad}
-      onProgress={onProgress}
-      paused={paused}
-      ref={videoRef}
-      source={{
-        uri,
-      }}
-      style={style}
-    />
-  ),
+  Video: VideoComponent,
 });
 
 if (Platform.OS === 'android') {

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -25,7 +25,7 @@ import type { AttachmentPickerErrorProps } from './components/AttachmentPickerEr
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Recorder } from '../../icons';
-import { getPhotos } from '../../native';
+import { getLocalAssetUri, getPhotos } from '../../native';
 import type { Asset, File } from '../../types/types';
 import { vh, vw } from '../../utils/utils';
 
@@ -110,7 +110,9 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
-  const onPressVideo = () => {
+  const onPressVideo = async () => {
+    // For the case of expo messaging app where you need to fetch the asset uri from asset id
+    const localAssetURI = asset.id && (await getLocalAssetUri(asset.id));
     if (selected) {
       setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
     } else {
@@ -125,7 +127,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
             name: asset.filename,
             size: asset.fileSize,
             type: 'video',
-            uri: asset.uri,
+            uri: localAssetURI || asset.uri,
           },
         ];
       });

package/src/components/ImageGallery/ImageGallery.tsx

@@ -252,7 +252,6 @@ export const ImageGallery = <
    */
 
   const photos = images.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
-    console.log(cur);
     const attachmentImages =
       cur.attachments?.filter(
         (attachment) =>

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -181,7 +181,7 @@ export const AnimatedGalleryVideo: React.FC<Props> = React.memo(
           onPlaybackStatusUpdate={onPlayBackStatusUpdate}
           onProgress={onProgress}
           paused={paused}
-          resizeMode='cover'
+          resizeMode='contain'
           style={style}
           uri={source.uri}
           videoRef={videoRef}