stream-chat-react-native-core 4.9.0-beta.2 → 4.9.0

package/src/components/Attachment/VideoThumbnail.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
+import { ImageBackground, StyleSheet, View, ViewProps } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Play } from '../../icons';
@@ -24,7 +24,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export type VideoThumbnailProps = ViewProps;
+export type VideoThumbnailProps = ViewProps & {
+  thumb_url?: string;
+};
 
 export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
   const {
@@ -34,12 +36,17 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
       },
     },
   } = useTheme();
-  const { style, ...rest } = props;
+  const { style, thumb_url, ...rest } = props;
   return (
-    <View {...rest} style={[styles.container, container, style]}>
+    <ImageBackground
+      accessibilityLabel='video-thumbnail'
+      source={{ uri: thumb_url }}
+      {...rest}
+      style={[styles.container, container, style]}
+    >
       <View style={[styles.roundedView, roundedView]}>
         <Play height={24} pathFill={'#000'} width={24} />
       </View>
-    </View>
+    </ImageBackground>
   );
 };

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

@@ -11,8 +11,10 @@ import {
   generateAudioAttachment,
   generateFileAttachment,
   generateImageAttachment,
+  generateVideoAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
+import * as NativeUtils from '../../../native';
 
 import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
@@ -47,6 +49,16 @@ describe('Attachment', () => {
     });
   });
 
+  it('should render File component for "video" type attachment', async () => {
+    jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(jest.fn(() => false));
+    const attachment = generateVideoAttachment();
+    const { getByTestId } = render(getAttachmentComponent({ attachment }));
+
+    await waitFor(() => {
+      expect(getByTestId('file-attachment')).toBeTruthy();
+    });
+  });
+
   it('should render File component for "file" type attachment', async () => {
     const attachment = generateFileAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -11,12 +11,16 @@ import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvide
 
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
+import {
+  generateImageAttachment,
+  generateVideoAttachment,
+} from '../../../mock-builders/generator/attachment';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import * as NativeUtils from '../../../native';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../../MessageList/MessageList';
@@ -75,6 +79,24 @@ describe('Gallery', () => {
     });
   });
 
+  it('should render one image and one video attachment', async () => {
+    jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(jest.fn(() => true));
+    const attachment1 = generateImageAttachment({
+      original_height: 600,
+      original_width: 400,
+    });
+    const attachment2 = generateVideoAttachment();
+    const component = await getComponent([attachment1, attachment2]);
+    const { getAllByA11yLabel, queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(getAllByA11yLabel('video-thumbnail').length).toBe(1);
+    });
+  });
+
   it('should render portrait and landscape image in two rows', async () => {
     const attachment1 = generateImageAttachment({
       original_height: 600,

package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts

@@ -36,6 +36,7 @@ export function buildThumbnail<
     resizeMode: resizeMode
       ? resizeMode
       : ((image.original_height && image.original_width ? 'contain' : 'cover') as ImageResizeMode),
+    thumb_url: image.thumb_url,
     type: image.type,
     url: shouldResize
       ? getResizedImageUrl({

package/src/components/Attachment/utils/buildGallery/types.ts

@@ -6,6 +6,7 @@ export type Thumbnail = {
   url: string;
   width: number;
   id?: string;
+  thumb_url?: string;
   type?: string;
 };
 

package/src/components/Message/Message.tsx

@@ -333,7 +333,11 @@ const MessageWithContext = <
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
             } else if (cur.type === 'video' && !cur.og_scrape_url && isVideoPackageAvailable()) {
-              acc.videos.push({ image_url: cur.asset_url, type: 'video' });
+              acc.videos.push({
+                image_url: cur.asset_url,
+                thumb_url: cur.thumb_url,
+                type: 'video',
+              });
               acc.other = [];
             } else if (cur.type === 'video' && !cur.og_scrape_url) {
               acc.files.push(cur);

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
@@ -19,6 +19,7 @@ import { Warning } from '../../icons/Warning';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
+import { WritingDirectionAwareText } from '../RTLComponents/WritingDirectionAwareText';
 
 const FILE_PREVIEW_HEIGHT = 60;
 const WARNING_ICON_SIZE = 16;
@@ -71,7 +72,7 @@ const styles = StyleSheet.create({
   },
   warningIconStyle: {
     borderRadius: 24,
-    marginTop: 3,
+    marginTop: 2,
   },
 });
 
@@ -105,9 +106,9 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
       </Text>
     </View>
   ) : (
-    <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-      {item.file.duration ? item.file.duration : getFileSizeDisplayText(item.file.size)}
-    </Text>
+    <WritingDirectionAwareText style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
+      {item.file.duration || getFileSizeDisplayText(item.file.size)}
+    </WritingDirectionAwareText>
   );
 };
 
@@ -188,6 +189,7 @@ const FileUploadPreviewWithContext = <
                         24 - // 24 = close icon size
                         24, // 24 = internal padding
                     },
+                    I18nManager.isRTL ? { writingDirection: 'rtl' } : { writingDirection: 'ltr' },
                     filenameText,
                   ]}
                 >

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
   },
   fileSizeText: {
     fontSize: 12,
-    paddingLeft: 10,
+    paddingHorizontal: 10,
   },
   flatList: { paddingBottom: 12 },
   iconContainer: {
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
   },
   warningIconStyle: {
     borderRadius: 24,
-    marginTop: 4,
+    marginTop: 6,
   },
   warningText: {
     alignItems: 'center',

package/src/components/RTLComponents/WritingDirectionAwareText.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { I18nManager, StyleSheet, Text, ViewProps } from 'react-native';
+
+const styles = StyleSheet.create({
+  defaultStyle: { writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr' },
+});
+
+export type WritingDirectionAwareTextProps = ViewProps;
+
+export const WritingDirectionAwareText: React.FC<WritingDirectionAwareTextProps> = (props) => {
+  const { children, style, ...rest } = props;
+  return (
+    <Text {...rest} style={[style, styles.defaultStyle]}>
+      {children}
+    </Text>
+  );
+};

package/src/components/Reply/Reply.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Image, ImageStyle, StyleSheet, View, ViewStyle } from 'react-native';
 
 import merge from 'lodash/merge';
@@ -7,8 +7,8 @@ import type { Attachment } from 'stream-chat';
 
 import { useMessageContext } from '../../contexts/messageContext/MessageContext';
 import {
+  MessageInputContext,
   MessageInputContextValue,
-  useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
 import {
   MessagesContextValue,
@@ -267,6 +267,22 @@ const ReplyWithContext = <
   );
 };
 
+/**
+ * When a reply is rendered in a MessageSimple, it does
+ * not have a MessageInputContext. As this is deliberate,
+ * this function exists to avoid the error thrown when
+ * using a context outside of its provider.
+ * */
+const useMessageInputContextIfAvailable = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() => {
+  const contextValue = useContext(
+    MessageInputContext,
+  ) as unknown as MessageInputContextValue<StreamChatGenerics>;
+
+  return contextValue;
+};
+
 const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   prevProps: ReplyPropsWithContext<StreamChatGenerics>,
   nextProps: ReplyPropsWithContext<StreamChatGenerics>,
@@ -307,7 +323,7 @@ export const Reply = <
   const { FileAttachmentIcon = FileIconDefault, MessageAvatar = MessageAvatarDefault } =
     useMessagesContext<StreamChatGenerics>();
 
-  const { editing, quotedMessage } = useMessageInputContext<StreamChatGenerics>();
+  const { editing, quotedMessage } = useMessageInputContextIfAvailable<StreamChatGenerics>();
 
   const quotedEditingMessage = (
     typeof editing !== 'boolean' ? editing?.quoted_message || false : false

package/src/components/Reply/__tests__/Reply.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { Reply } from '../Reply';
+
+describe('<Reply/>', () => {
+  it('can be rendered outside of a MessageInputProvider', async () => {
+    const oldEnvironment = process.env;
+    process.env.NODE_ENV = 'not_test';
+
+    const chatClient = await getTestClientWithUser({ id: 'neil' });
+
+    const mockedChannel = generateChannelResponse();
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', 'some-chat');
+    await channel.watch();
+
+    const TestComponent = () => (
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} client={chatClient}>
+            <Reply />
+          </Channel>
+        </Chat>
+      </OverlayProvider>
+    );
+
+    try {
+      const { toJSON } = render(<TestComponent />);
+
+      await waitFor(() => {
+        expect(toJSON()).not.toBeNull();
+      });
+    } catch (error: unknown) {
+      throw new Error(`Error thrown while rendering Reply: ${error}`);
+    }
+
+    process.env = oldEnvironment;
+  });
+});

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -62,6 +62,7 @@ export type FileUpload = {
   file: File;
   id: string;
   state: FileStateValue;
+  thumb_url?: string;
   url?: string;
 };
 
@@ -710,6 +711,7 @@ export const MessageInputProvider = <
             duration: file.file.duration,
             file_size: file.file.size,
             mime_type: file.file.type,
+            thumb_url: file.thumb_url,
             title: file.file.name,
             type: 'video',
           } as Attachment<StreamChatGenerics>);
@@ -897,9 +899,6 @@ export const MessageInputProvider = <
   };
 
   const uploadFile = async ({ newFile }: { newFile: FileUpload }) => {
-    if (!newFile) {
-      return;
-    }
     const { file, id } = newFile;
 
     setFileUploads(getUploadSetStateAction(id, FileState.UPLOADING));
@@ -911,7 +910,7 @@ export const MessageInputProvider = <
       } else if (channel && file.uri) {
         response = await channel.sendFile(file.uri, file.name, file.type);
       }
-      const extraData: Partial<FileUpload> = { url: response.file };
+      const extraData: Partial<FileUpload> = { thumb_url: response.thumb_url, url: response.file };
       setFileUploads(getUploadSetStateAction(id, FileState.UPLOADED, extraData));
     } catch (error: unknown) {
       handleFileOrImageUploadError(error, false, id);

package/src/contexts/messageInputContext/__tests__/MessageInputContext.test.tsx

@@ -0,0 +1,208 @@
+import React, { PropsWithChildren } from 'react';
+
+import type { TextInput } from 'react-native';
+
+import { act, renderHook } from '@testing-library/react-hooks';
+
+import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
+
+import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/ChatContext';
+
+import {
+  generateFileAttachment,
+  generateImageAttachment,
+} from '../../../mock-builders/generator/attachment';
+
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+
+import * as NativeUtils from '../../../native';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { FileState } from '../../../utils/utils';
+import {
+  InputMessageInputContextValue,
+  MessageInputContextValue,
+  MessageInputProvider,
+  useMessageInputContext,
+} from '../MessageInputContext';
+
+type WrapperType<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  Partial<InputMessageInputContextValue<StreamChatGenerics>>;
+
+afterEach(jest.clearAllMocks);
+
+describe('MessageInputContext', () => {
+  const Wrapper = <
+    StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+  >({
+    children,
+    ...rest
+  }: PropsWithChildren<WrapperType<StreamChatGenerics>>) => (
+    <ChatProvider
+      value={
+        {
+          appSettings: {
+            app: {
+              file_upload_config: {
+                blocked_file_extensions: ['.mp3'],
+                blocked_mime_types: ['video/mp4'],
+              },
+              image_upload_config: {
+                blocked_file_extensions: ['.png'],
+                blocked_mime_types: ['image/png'],
+              },
+            },
+          } as unknown as AppSettingsAPIResponse<StreamChatGenerics>,
+          client: {
+            updateMessage: jest.fn().mockResolvedValue({ message: generateMessage() }),
+          } as unknown as StreamChat<StreamChatGenerics>,
+        } as ChatContextValue<StreamChatGenerics>
+      }
+    >
+      <MessageInputProvider
+        value={
+          {
+            ...rest,
+          } as MessageInputContextValue<StreamChatGenerics>
+        }
+      >
+        {children}
+      </MessageInputProvider>
+    </ChatProvider>
+  );
+
+  it('appendText works', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setFileUploads([]);
+      result.current.setImageUploads([]);
+      result.current.setMentionedUsers([]);
+      result.current.setText('dummy');
+      result.current.appendText('text');
+    });
+
+    expect(result.current.text).toBe('dummytext');
+  });
+
+  it('uploadNewImage with blocked image extensions to be not supported', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        maxNumberOfFiles: 2,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.uploadNewImage(
+        generateImageAttachment({
+          uri: 'https://www.bastiaanmulder.nl/wp-content/uploads/2013/11/dummy-image-square.png',
+        }),
+      );
+    });
+
+    expect(result.current.imageUploads[0].state).toBe(FileState.NOT_SUPPORTED);
+  });
+
+  it('onSelectItem works', () => {
+    const mentioned_user = generateUser();
+    const initialUsers = [mentioned_user.id];
+
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setFileUploads([]);
+      result.current.setImageUploads([]);
+      result.current.setMentionedUsers(initialUsers);
+      result.current.onSelectItem(mentioned_user);
+    });
+
+    expect(result.current.mentionedUsers.length).toBe(2);
+  });
+
+  it('setInputBoxRef works', () => {
+    const setInputRefMock = jest.fn();
+    const inputRef = React.createRef<TextInput | null>();
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        setInputRef: setInputRefMock,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.setInputBoxRef(inputRef.current);
+    });
+
+    expect(setInputRefMock).toHaveBeenCalled();
+  });
+
+  it('openCommandsPicker works', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.openCommandsPicker();
+    });
+
+    expect(result.current.text).toBe('/');
+  });
+
+  it('openMentionPicker works', () => {
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasImagePicker: true,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.openMentionsPicker();
+    });
+
+    expect(result.current.text).toBe('@');
+  });
+
+  it('openAttachmentPicker works', async () => {
+    jest.spyOn(NativeUtils, 'pickDocument').mockImplementation(
+      jest.fn().mockResolvedValue({
+        cancelled: false,
+        docs: [generateFileAttachment(), generateImageAttachment()],
+      }),
+    );
+    const { result } = renderHook(() => useMessageInputContext(), {
+      initialProps: {
+        editing: true,
+        hasFilePicker: true,
+        hasImagePicker: false,
+      },
+      wrapper: Wrapper,
+    });
+
+    act(() => {
+      result.current.openAttachmentPicker();
+    });
+
+    expect(await result.current.pickFile()).toBe(undefined);
+  });
+});

package/src/contexts/messageInputContext/__tests__/__snapshots__/sendMessage.test.tsx.snap

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageInputContext's sendMessage exit sendMessage when edit message is not boolean image upload status is uploaded successfully 1`] = `
+Object {
+  "attachments": Array [
+    Object {
+      "fallback": undefined,
+      "image_url": undefined,
+      "original_height": undefined,
+      "original_width": undefined,
+      "type": "image",
+    },
+  ],
+  "created_at": "Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)",
+  "html": "<p>regular</p>",
+  "id": "7a85f744-cc89-4f82-a1d4-5456432cc8bf",
+  "mentioned_users": Array [
+    "dummy1",
+    "dummy2",
+  ],
+  "quoted_message": undefined,
+  "text": "",
+  "type": "regular",
+  "updated_at": "Sat Jul 02 2022 23:55:13 GMT+0530 (India Standard Time)",
+  "user": Object {
+    "banned": false,
+    "created_at": "2020-04-27T13:39:49.331742Z",
+    "id": "5d6f6322-567e-4e1e-af90-97ef1ed5cc23",
+    "image": "fc86ddcb-bac4-400c-9afd-b0c0a1c0cd33",
+    "name": "50cbdd0e-ca7e-4478-9e2c-be0f1ac6a995",
+    "online": false,
+    "role": "user",
+    "updated_at": "2020-04-27T13:39:49.332087Z",
+  },
+}
+`;
+
+exports[`MessageInputContext's sendMessage exit sendMessage when file upload status is uploaded successfully 1`] = `
+Object {
+  "attachments": Array [
+    Object {
+      "asset_url": undefined,
+      "file_size": undefined,
+      "mime_type": "file",
+      "title": "dummy.pdf",
+      "type": "file",
+    },
+    Object {
+      "asset_url": undefined,
+      "duration": undefined,
+      "file_size": undefined,
+      "mime_type": "video/mp4",
+      "thumb_url": undefined,
+      "title": "dummy.pdf",
+      "type": "video",
+    },
+    Object {
+      "asset_url": undefined,
+      "duration": undefined,
+      "file_size": undefined,
+      "mime_type": "audio/mp3",
+      "title": "dummy.pdf",
+      "type": "audio",
+    },
+    Object {
+      "fallback": "dummy.pdf",
+      "image_url": undefined,
+      "type": "image",
+    },
+  ],
+  "mentioned_users": Array [
+    "dummy1",
+    "dummy2",
+  ],
+  "parent_id": undefined,
+  "quoted_message_id": undefined,
+  "show_in_channel": undefined,
+  "text": "",
+}
+`;
+
+exports[`MessageInputContext's sendMessage exit sendMessage when image upload status is uploaded successfully 1`] = `
+Object {
+  "attachments": Array [
+    Object {
+      "fallback": undefined,
+      "image_url": undefined,
+      "original_height": undefined,
+      "original_width": undefined,
+      "type": "image",
+    },
+    Object {
+      "fallback": undefined,
+      "image_url": undefined,
+      "original_height": undefined,
+      "original_width": undefined,
+      "type": "image",
+    },
+  ],
+  "mentioned_users": Array [
+    "dummy1",
+    "dummy2",
+  ],
+  "parent_id": undefined,
+  "quoted_message_id": undefined,
+  "show_in_channel": undefined,
+  "text": "",
+}
+`;