stream-chat-react-native-core 7.0.0-rc.8 → 7.0.0

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -114,7 +114,9 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
                 duration: file.duration,
                 file: {
                   name: file.title as string,
-                  uri: file.asset_url,
+                  size: file.file_size || 0,
+                  type: file.mime_type || '',
+                  uri: file.asset_url || '',
                   waveform_data: file.waveform_data,
                 },
                 id: index.toString(),

package/src/components/Attachment/Gallery.tsx

@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, LocalMessage } from 'stream-chat';
 
 import { GalleryImage } from './GalleryImage';
-import { ImageReloadIndicator } from './ImageReloadIndicator';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import type { Thumbnail } from './utils/buildGallery/types';
@@ -12,7 +11,7 @@ import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius
 
 import { openUrlSafely } from './utils/openUrlSafely';
 
-import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import { useTranslationContext } from '../../contexts';
 import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import {
   ImageGalleryContextValue,
@@ -59,6 +58,7 @@ export type GalleryPropsWithContext = Pick<
     | 'VideoThumbnail'
     | 'ImageLoadingIndicator'
     | 'ImageLoadingFailedIndicator'
+    | 'ImageReloadIndicator'
     | 'myMessageTheme'
   > &
   Pick<OverlayContextValue, 'setOverlay'> & {
@@ -76,7 +76,7 @@ export type GalleryPropsWithContext = Pick<
      *
      * TODO: Fix circular dependencies of imports
      */
-    message?: MessageType;
+    message?: LocalMessage;
   };
 
 const GalleryWithContext = (props: GalleryPropsWithContext) => {
@@ -87,6 +87,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     hasThreadReplies,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
+    ImageReloadIndicator,
     images,
     legacyImageViewerSwipeBehaviour,
     message,
@@ -204,6 +205,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
                   colIndex={colIndex}
                   ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
                   ImageLoadingIndicator={ImageLoadingIndicator}
+                  ImageReloadIndicator={ImageReloadIndicator}
                   imagesAndVideos={imagesAndVideos}
                   invertedDirections={invertedDirections || false}
                   key={rowIndex}
@@ -241,7 +243,7 @@ type GalleryThumbnailProps = {
   colIndex: number;
   imagesAndVideos: Attachment[];
   invertedDirections: boolean;
-  message: MessageType;
+  message: LocalMessage;
   numOfColumns: number;
   numOfRows: number;
   rowIndex: number;
@@ -253,6 +255,7 @@ type GalleryThumbnailProps = {
   | 'VideoThumbnail'
   | 'ImageLoadingIndicator'
   | 'ImageLoadingFailedIndicator'
+  | 'ImageReloadIndicator'
 > &
   Pick<ImageGalleryContextValue, 'setSelectedMessage' | 'setMessages'> &
   Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
@@ -264,6 +267,7 @@ const GalleryThumbnail = ({
   colIndex,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   imagesAndVideos,
   invertedDirections,
   legacyImageViewerSwipeBehaviour,
@@ -296,6 +300,7 @@ const GalleryThumbnail = ({
       },
     },
   } = useTheme();
+  const { t } = useTranslationContext();
 
   const openImageViewer = () => {
     if (!legacyImageViewerSwipeBehaviour && message) {
@@ -387,6 +392,7 @@ const GalleryThumbnail = ({
             borderRadius={imageBorderRadius ?? borderRadius}
             ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
             ImageLoadingIndicator={ImageLoadingIndicator}
+            ImageReloadIndicator={ImageReloadIndicator}
             thumbnail={thumbnail}
           />
         </View>
@@ -401,7 +407,7 @@ const GalleryThumbnail = ({
           ]}
         >
           <Text style={[styles.moreImagesText, moreImagesText]}>
-            {`+${imagesAndVideos.length - 4}`}
+            {String(t('+{{count}}', { count: imagesAndVideos.length - 4 }))}
           </Text>
         </View>
       ) : null}
@@ -413,10 +419,15 @@ const GalleryImageThumbnail = ({
   borderRadius,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   thumbnail,
 }: Pick<
   GalleryThumbnailProps,
-  'ImageLoadingFailedIndicator' | 'ImageLoadingIndicator' | 'thumbnail' | 'borderRadius'
+  | 'ImageLoadingFailedIndicator'
+  | 'ImageLoadingIndicator'
+  | 'ImageReloadIndicator'
+  | 'thumbnail'
+  | 'borderRadius'
 >) => {
   const {
     isLoadingImage,
@@ -564,6 +575,7 @@ export const Gallery = (props: GalleryProps) => {
     hasThreadReplies,
     ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
     ImageLoadingIndicator: PropImageLoadingIndicator,
+    ImageReloadIndicator: PropImageReloadIndicator,
     images: propImages,
     message: propMessage,
     myMessageTheme: propMyMessageTheme,
@@ -595,6 +607,7 @@ export const Gallery = (props: GalleryProps) => {
     additionalPressableProps: contextAdditionalPressableProps,
     ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
     ImageLoadingIndicator: ContextImageLoadingIndicator,
+    ImageReloadIndicator: ContextImageReloadIndicator,
     legacyImageViewerSwipeBehaviour,
     myMessageTheme: contextMyMessageTheme,
     VideoThumbnail: ContextVideoThumnbnail,
@@ -624,6 +637,7 @@ export const Gallery = (props: GalleryProps) => {
   const ImageLoadingFailedIndicator =
     PropImageLoadingFailedIndicator || ContextImageLoadingFailedIndicator;
   const ImageLoadingIndicator = PropImageLoadingIndicator || ContextImageLoadingIndicator;
+  const ImageReloadIndicator = PropImageReloadIndicator || ContextImageReloadIndicator;
   const myMessageTheme = propMyMessageTheme || contextMyMessageTheme;
 
   return (
@@ -636,6 +650,7 @@ export const Gallery = (props: GalleryProps) => {
         hasThreadReplies: hasThreadReplies || !!message?.reply_count,
         ImageLoadingFailedIndicator,
         ImageLoadingIndicator,
+        ImageReloadIndicator,
         images,
         legacyImageViewerSwipeBehaviour,
         message,

package/src/components/Attachment/ImageReloadIndicator.tsx

@@ -6,13 +6,12 @@ import { Refresh } from '../../icons';
 
 const REFRESH_ICON_SIZE = 24;
 
-export const ImageReloadIndicator = ({
-  onReloadImage,
-  style,
-}: {
+export type ImageReloadIndicatorProps = {
   onReloadImage: () => void;
   style: React.ComponentProps<typeof Pressable>['style'];
-}) => {
+};
+
+export const ImageReloadIndicator = ({ onReloadImage, style }: ImageReloadIndicatorProps) => {
   const {
     theme: {
       colors: { grey_dark },

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -18,7 +18,7 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useScreenDimensions } from '../../hooks/useScreenDimensions';
 import { NativeHandlers } from '../../native';
-import type { Asset } from '../../types/types';
+import type { File } from '../../types/types';
 import { BottomSheet } from '../BottomSheetCompatibility/BottomSheet';
 import { BottomSheetFlatList } from '../BottomSheetCompatibility/BottomSheetFlatList';
 
@@ -108,7 +108,7 @@ export const AttachmentPicker = React.forwardRef(
     const [iOSLimited, setIosLimited] = useState(false);
     const hasNextPageRef = useRef(true);
     const [loadingPhotos, setLoadingPhotos] = useState(false);
-    const [photos, setPhotos] = useState<Asset[]>([]);
+    const [photos, setPhotos] = useState<File[]>([]);
     const attemptedToLoadPhotosOnOpenRef = useRef(false);
 
     const getMorePhotos = useCallback(async () => {
@@ -245,14 +245,8 @@ export const AttachmentPicker = React.forwardRef(
       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.id
-            ? image.id === asset.id
-            : image.uri === asset.uri || image.originalUri === asset.uri,
-        ) ||
-        selectedFiles.some((file) =>
-          file.id ? file.id === asset.id : file.uri === asset.uri || file.originalUri === asset.uri,
-        ),
+        selectedImages.some((image) => image.uri === asset.uri) ||
+        selectedFiles.some((file) => file.uri === asset.uri),
       selectedFiles,
       selectedImages,
       setSelectedFiles,

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

@@ -2,22 +2,19 @@ import React from 'react';
 
 import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
 
-import { lookup } from 'mime-types';
-
 import { AttachmentPickerContextValue } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../../hooks/useViewport';
 import { Recorder } from '../../../icons';
-import type { Asset, File } from '../../../types/types';
+import type { File } from '../../../types/types';
 import { getDurationLabelFromDuration } from '../../../utils/utils';
 import { BottomSheetTouchableOpacity } from '../../BottomSheetCompatibility/BottomSheetTouchableOpacity';
-
 type AttachmentPickerItemType = Pick<
   AttachmentPickerContextValue,
   'selectedFiles' | 'setSelectedFiles' | 'setSelectedImages' | 'selectedImages' | 'maxNumberOfFiles'
 > & {
-  asset: Asset;
+  asset: File;
   ImageOverlaySelectedComponent: React.ComponentType;
   numberOfUploads: number;
   selected: boolean;
@@ -48,46 +45,25 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
     },
   } = useTheme();
 
-  const { duration: videoDuration, id: assetId, originalUri, uri } = asset;
+  const { duration: videoDuration, thumb_url, uri } = asset;
 
-  const durationLabel = getDurationLabelFromDuration(videoDuration);
+  const durationLabel = videoDuration ? getDurationLabelFromDuration(videoDuration) : '00:00';
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
-  /* Patches video files with uri and mimetype */
-  const patchVideoFile = (files: File[]) => {
-    // We need a mime-type to upload a video file.
-    const mimeType = lookup(asset.name) || 'multipart/form-data';
-    return [
-      ...files,
-      {
-        duration: asset.duration,
-        id: asset.id,
-        mimeType,
-        name: asset.name,
-        originalUri,
-        size: asset.size,
-        uri,
-      },
-    ];
-  };
-
   const updateSelectedFiles = () => {
     if (numberOfUploads >= maxNumberOfFiles) {
       Alert.alert(t('Maximum number of files reached'));
       return;
     }
-    const files = patchVideoFile(selectedFiles);
-    setSelectedFiles(files);
+    setSelectedFiles([...selectedFiles, asset]);
   };
 
   const onPressVideo = () => {
     if (selected) {
       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 !== assetId : file.uri !== uri && file.originalUri !== uri,
-        ),
+        files.filter((file) => file.uri !== uri),
       );
     } else {
       updateSelectedFiles();
@@ -97,7 +73,7 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
   return (
     <BottomSheetTouchableOpacity onPress={onPressVideo}>
       <ImageBackground
-        source={{ uri: originalUri }}
+        source={{ uri: thumb_url }}
         style={[
           {
             height: size,
@@ -147,7 +123,7 @@ const AttachmentImage = (props: AttachmentImageProps) => {
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
-  const { id: assetId, originalUri, uri } = asset;
+  const { uri } = asset;
 
   const updateSelectedImages = () => {
     if (numberOfUploads >= maxNumberOfFiles) {
@@ -160,11 +136,7 @@ const AttachmentImage = (props: AttachmentImageProps) => {
   const onPressImage = () => {
     if (selected) {
       // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
-      setSelectedImages((images) =>
-        images.filter((image) =>
-          assetId ? image.id !== assetId : image.uri !== uri && originalUri !== uri,
-        ),
-      );
+      setSelectedImages((images) => images.filter((image) => image.uri !== uri));
     } else {
       updateSelectedImages();
     }

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -3,10 +3,6 @@ import { I18nManager, StyleSheet, TextInput, TextInputProps } from 'react-native
 
 import throttle from 'lodash/throttle';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../contexts/channelContext/ChannelContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -51,22 +47,22 @@ const computeCaretPosition = (token: string, startOfTokenPosition: number) =>
 
 const isCommand = (text: string) => text[0] === '/' && text.split(' ').length <= 1;
 
-type AutoCompleteInputPropsWithContext = Pick<ChannelContextValue, 'giphyEnabled'> &
-  Pick<
-    MessageInputContextValue,
-    | 'additionalTextInputProps'
-    | 'autoCompleteSuggestionsLimit'
-    | 'giphyActive'
-    | 'maxMessageLength'
-    | 'mentionAllAppUsersEnabled'
-    | 'mentionAllAppUsersQuery'
-    | 'numberOfLines'
-    | 'onChange'
-    | 'setGiphyActive'
-    | 'setInputBoxRef'
-    | 'text'
-    | 'triggerSettings'
-  > &
+type AutoCompleteInputPropsWithContext = Pick<
+  MessageInputContextValue,
+  | 'additionalTextInputProps'
+  | 'autoCompleteSuggestionsLimit'
+  | 'giphyActive'
+  | 'giphyEnabled'
+  | 'maxMessageLength'
+  | 'mentionAllAppUsersEnabled'
+  | 'mentionAllAppUsersQuery'
+  | 'numberOfLines'
+  | 'onChange'
+  | 'setGiphyActive'
+  | 'setInputBoxRef'
+  | 'text'
+  | 'triggerSettings'
+> &
   Pick<SuggestionsContextValue, 'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'> &
   Pick<TranslationContextValue, 't'> & {
     /**
@@ -76,7 +72,15 @@ type AutoCompleteInputPropsWithContext = Pick<ChannelContextValue, 'giphyEnabled
     cooldownActive?: boolean;
   };
 
-export type AutoCompleteInputProps = Partial<AutoCompleteInputPropsWithContext>;
+export type AutoCompleteInputProps = Partial<
+  Omit<
+    AutoCompleteInputPropsWithContext,
+    | 'triggerSettings'
+    | 'mentionAllAppUsersQuery'
+    | 'mentionAllAppUsersEnabled'
+    | 'autoCompleteSuggestionsLimit'
+  >
+>;
 
 const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext) => {
   const {
@@ -86,9 +90,9 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
     cooldownActive = false,
     giphyActive,
     giphyEnabled,
-    maxMessageLength,
     mentionAllAppUsersEnabled,
     mentionAllAppUsersQuery,
+    maxMessageLength,
     numberOfLines,
     onChange,
     openSuggestions,
@@ -463,8 +467,8 @@ const MemoizedAutoCompleteInput = React.memo(
 ) as typeof AutoCompleteInputWithContext;
 
 export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
-  const { giphyEnabled } = useChannelContext();
   const {
+    giphyEnabled,
     additionalTextInputProps,
     autoCompleteSuggestionsLimit,
     giphyActive,

package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.js

@@ -9,6 +9,7 @@ import { generateChannelResponse } from '../../../mock-builders/generator/channe
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { ACITriggerSettings } from '../../../utils/ACITriggerSettings';
+import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { AutoCompleteInput } from '../AutoCompleteInput';
 
@@ -19,18 +20,17 @@ describe('AutoCompleteInput', () => {
 
   const getComponent = (props = {}) => (
     <Chat client={chatClient}>
-      <SuggestionsProvider value={props}>
-        <AutoCompleteInput
-          giphyEnabled
-          onChange={jest.fn}
-          text={props.text}
-          triggerSettings={ACITriggerSettings({
-            channel,
-            onMentionSelectItem: jest.fn(),
-            t: jest.fn(),
-          })}
-        />
-      </SuggestionsProvider>
+      <Channel
+        channel={channel}
+        triggerSettings={ACITriggerSettings({
+          channel,
+          onMentionSelectItem: jest.fn(),
+          t: jest.fn(),
+        })}
+      >
+        <AutoCompleteInput giphyEnabled onChange={jest.fn} text={props.text} />
+        <SuggestionsProvider value={props} />
+      </Channel>
     </Chat>
   );