Merge pull request #2223 from GetStream/develop

Next Release

Author: santhoshvai

.github/workflows/check-pr.yml

@@ -30,4 +30,4 @@ jobs:
       - name: Test
         run: yarn test:coverage
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.DOCUSAURUS_GH_TOKEN }}

.github/workflows/next-release.yml

@@ -25,16 +25,16 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
       - name: Prepare git
         run: |
-          git config --global user.name "Steve Galili"
-          git config --global user.email "steve.galili@getstream.io"
+          git config --global user.name 'stream-ci-bot' 
+          git config --global user.email 'stream-bot@getstream.io'
       - name: Install && Build - SDK and Sample App
         uses: ./.github/actions/install-and-build-sdk
       - name: Lint
         run: yarn lerna-workspaces run lint && (cd docusaurus; npx prettier --check '**/*.mdx')
       - name: Test
         run: yarn test:coverage
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.DOCUSAURUS_GH_TOKEN }}
       - name: Publish Next Release
         run: GITHUB_SHORT_SHA="$(git rev-parse --short $GITHUB_SHA)" yarn release-next
         env:

.github/workflows/release.yml

@@ -26,8 +26,8 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
       - name: Prepare git
         run: |
-          git config --global user.name "Steve Galili"
-          git config --global user.email "steve.galili@getstream.io"
+          git config --global user.name 'stream-ci-bot' 
+          git config --global user.email 'stream-bot@getstream.io'
       - name: Install && Build - SDK and Sample App
         uses: ./.github/actions/install-and-build-sdk
       - name: Lint

.github/workflows/vale-doc-lint.yml

@@ -22,4 +22,4 @@ jobs:
         env:
           # Required, set by GitHub actions automatically:
           # https://docs.github.com/en/actions/security-guides/automatic-token-authentication#about-the-github_token-secret
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          GITHUB_TOKEN: ${{ secrets.DOCUSAURUS_GH_TOKEN }}

examples/TypeScriptMessaging/App.tsx

@@ -158,7 +158,7 @@ const ThreadScreen: React.FC<ThreadScreenProps> = ({ navigation }) => {
     });
   }, [overlay]);
 
-  if (!channel) return;
+  if (!channel) return null;
 
   return (
     <SafeAreaView>

package/src/components/Attachment/Gallery.tsx

@@ -151,13 +151,11 @@ const GalleryWithContext = <
       style={[
         styles.galleryContainer,
         {
+          flexDirection: invertedDirections ? 'column' : 'row',
           height,
           width,
         },
         galleryContainer,
-        {
-          flexDirection: invertedDirections ? 'column' : 'row',
-        },
       ]}
       testID='gallery-container'
     >
@@ -365,11 +363,11 @@ const GalleryThumbnail = <
         <VideoThumbnail
           style={[
             borderRadius,
-            image,
             {
               height: thumbnail.height - 1,
               width: thumbnail.width - 1,
             },
+            image,
           ]}
           thumb_url={thumbnail.thumb_url}
         />
@@ -457,11 +455,11 @@ const GalleryImageThumbnail = <
             resizeMode={thumbnail.resizeMode}
             style={[
               borderRadius,
-              gallery.image,
               {
                 height: thumbnail.height - 1,
                 width: thumbnail.width - 1,
               },
+              gallery.image,
             ]}
             uri={thumbnail.url}
           />

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -209,9 +209,14 @@ export const AttachmentPicker = React.forwardRef(
       maxNumberOfFiles,
       numberOfAttachmentPickerImageColumns,
       numberOfUploads: selectedFiles.length + selectedImages.length,
+      // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
       selected:
-        selectedImages.some((image) => image.uri === asset.uri) ||
-        selectedFiles.some((file) => file.uri === asset.uri),
+        selectedImages.some((image) =>
+          image.id ? image.id === asset.id : image.uri === asset.uri,
+        ) ||
+        selectedFiles.some((file) => (file.id ? file.id === asset.id : file.uri === asset.uri)),
+      selectedFiles,
+      selectedImages,
       setSelectedFiles,
       setSelectedImages,
     }));

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

@@ -1,30 +1,32 @@
 import React from 'react';
 
-import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
+import { Alert, ImageBackground, Platform, StyleSheet, Text, View } from 'react-native';
 
 import { TouchableOpacity } from '@gorhom/bottom-sheet';
 import dayjs from 'dayjs';
 import { lookup } from 'mime-types';
 
+import type { AttachmentPickerContextValue } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { Recorder } from '../../../icons';
+import { getLocalAssetUri } from '../../../native';
 import type { Asset, File } from '../../../types/types';
 import { vw } from '../../../utils/utils';
 
-type AttachmentPickerItemType = {
+type AttachmentPickerItemType = Pick<
+  AttachmentPickerContextValue,
+  'selectedFiles' | 'setSelectedFiles' | 'setSelectedImages' | 'selectedImages' | 'maxNumberOfFiles'
+> & {
   asset: Asset;
   ImageOverlaySelectedComponent: React.ComponentType;
-  maxNumberOfFiles: number;
   numberOfUploads: number;
   selected: boolean;
-  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-  setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
   numberOfAttachmentPickerImageColumns?: number;
 };
 
-type AttachmentImageProps = Omit<AttachmentPickerItemType, 'setSelectedFiles'>;
+type AttachmentImageProps = Omit<AttachmentPickerItemType, 'setSelectedFiles' | 'selectedFiles'>;
 
-type AttachmentVideoProps = Omit<AttachmentPickerItemType, 'setSelectedImages'>;
+type AttachmentVideoProps = Omit<AttachmentPickerItemType, 'setSelectedImages' | 'selectedImages'>;
 
 const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
   const {
@@ -34,6 +36,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
     numberOfAttachmentPickerImageColumns,
     numberOfUploads,
     selected,
+    selectedFiles,
     setSelectedFiles,
   } = props;
 
@@ -61,29 +64,43 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
+  /* Patches video files with uri and mimetype */
+  const patchVideoFile = async (files: File[]) => {
+    // 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' && asset.id && (await getLocalAssetUri(asset.id));
+    const uri = localAssetURI || asset.uri || '';
+    // 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,
+        uri,
+      },
+    ];
+  };
+
+  const updateSelectedFiles = async () => {
+    if (numberOfUploads >= maxNumberOfFiles) {
+      Alert.alert('Maximum number of files reached');
+      return;
+    }
+    const files = await patchVideoFile(selectedFiles);
+    setSelectedFiles(files);
+  };
+
   const onPressVideo = () => {
     if (selected) {
-      setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
+      setSelectedFiles((files) =>
+        // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
+        files.filter((file) => (file.id ? file.id !== asset.id : file.uri !== asset.uri)),
+      );
     } else {
-      setSelectedFiles((files) => {
-        if (numberOfUploads >= maxNumberOfFiles) {
-          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,
-            uri: asset.uri,
-          },
-        ];
-      });
+      updateSelectedFiles();
     }
   };
 
@@ -126,6 +143,7 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
     numberOfAttachmentPickerImageColumns,
     numberOfUploads,
     selected,
+    selectedImages,
     setSelectedImages,
   } = props;
   const {
@@ -139,17 +157,37 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
 
   const { uri } = asset;
 
+  /* Patches image files with uri */
+  const patchImageFile = async (images: Asset[]) => {
+    // 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' && asset.id && (await getLocalAssetUri(asset.id));
+    const uri = localAssetURI || asset.uri || '';
+    return [
+      ...images,
+      {
+        ...asset,
+        uri,
+      },
+    ];
+  };
+
+  const updateSelectedImages = async () => {
+    if (numberOfUploads >= maxNumberOfFiles) {
+      Alert.alert('Maximum number of files reached');
+      return;
+    }
+    const images = await patchImageFile(selectedImages);
+    setSelectedImages(images);
+  };
+
   const onPressImage = () => {
     if (selected) {
-      setSelectedImages((images) => images.filter((image) => image.uri !== asset.uri));
+      // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
+      setSelectedImages((images) =>
+        images.filter((image) => (image.id ? image.id !== asset.id : image.uri !== asset.uri)),
+      );
     } else {
-      setSelectedImages((images) => {
-        if (numberOfUploads >= maxNumberOfFiles) {
-          Alert.alert('Maximum number of files reached');
-          return images;
-        }
-        return [...images, asset];
-      });
+      updateSelectedImages();
     }
   };
 
@@ -184,6 +222,8 @@ export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerIte
     numberOfAttachmentPickerImageColumns,
     numberOfUploads,
     selected,
+    selectedFiles,
+    selectedImages,
     setSelectedFiles,
     setSelectedImages,
   } = item;
@@ -205,6 +245,7 @@ export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerIte
         numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
         numberOfUploads={numberOfUploads}
         selected={selected}
+        selectedFiles={selectedFiles}
         setSelectedFiles={setSelectedFiles}
       />
     );
@@ -218,6 +259,7 @@ export const renderAttachmentPickerItem = ({ item }: { item: AttachmentPickerIte
       numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
       numberOfUploads={numberOfUploads}
       selected={selected}
+      selectedImages={selectedImages}
       setSelectedImages={setSelectedImages}
     />
   );

package/src/components/Channel/Channel.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
-import { KeyboardAvoidingViewProps, Platform, StyleSheet, Text, View } from 'react-native';
+import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
 
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
@@ -74,7 +74,7 @@ import {
   ThumbsUpReaction,
   WutReaction,
 } from '../../icons';
-import { FlatList as FlatListDefault, getLocalAssetUri, pickDocument } from '../../native';
+import { FlatList as FlatListDefault, pickDocument } from '../../native';
 import * as dbApi from '../../store/apis';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
@@ -1295,16 +1295,12 @@ const ChannelWithContext = <
           attachment.image_url &&
           isLocalUrl(attachment.image_url)
         ) {
-          // 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));
-          const uri = localAssetURI || file.uri || '';
-          const filename = file.name ?? uri.replace(/^(file:\/\/|content:\/\/)/, '');
+          const filename = file.name ?? file.uri.replace(/^(file:\/\/|content:\/\/)/, '');
           const contentType = lookup(filename) || 'multipart/form-data';
 
           const uploadResponse = doImageUploadRequest
             ? await doImageUploadRequest(file, channel)
-            : await channel.sendImage(uri, filename, contentType);
+            : await channel.sendImage(file.uri, filename, contentType);
 
           attachment.image_url = uploadResponse.file;
           delete attachment.originalFile;

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -1,7 +1,7 @@
 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';
+import { Alert, Keyboard } from 'react-native';
 
 import uniq from 'lodash/uniq';
 import { lookup } from 'mime-types';
@@ -35,7 +35,7 @@ import type { MoreOptionsButtonProps } from '../../components/MessageInput/MoreO
 import type { SendButtonProps } from '../../components/MessageInput/SendButton';
 import type { UploadProgressIndicatorProps } from '../../components/MessageInput/UploadProgressIndicator';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
-import { compressImage, getLocalAssetUri, pickDocument } from '../../native';
+import { compressImage, pickDocument } from '../../native';
 import type { Asset, DefaultStreamChatGenerics, File, UnknownType } from '../../types/types';
 import { removeReservedFields } from '../../utils/removeReservedFields';
 import {
@@ -984,9 +984,7 @@ export const MessageInputProvider = <
     let response = {} as SendFileAPIResponse;
 
     try {
-      // 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));
-      const uri = localAssetURI || file.uri || '';
+      const uri = file.uri || '';
       /**
        * We skip compression if:
        * - the file is from the camera as that should already be compressed