stream-chat-react-native-core 4.9.0-beta.1 → 4.9.0-beta.4

package/lib/typescript/mock-builders/generator/channel.d.ts

@@ -0,0 +1,116 @@
+export function generateChannel(customValues: any): {
+    _client: {};
+    data: {
+        cid: string;
+        config: {
+            name: string;
+            type: string;
+            automod: string;
+            automod_behavior: string;
+            commands: {
+                args: string;
+                description: string;
+                name: string;
+                set: string;
+            }[];
+            connect_events: boolean;
+            created_at: string;
+            max_message_length: number;
+            message_retention: string;
+            mutes: boolean;
+            reactions: boolean;
+            read_events: boolean;
+            replies: boolean;
+            search: boolean;
+            typing_events: boolean;
+            updated_at: string;
+            uploads: boolean;
+            url_enrichment: boolean;
+        };
+        created_at: string;
+        created_by: {
+            banned: boolean;
+            created_at: string;
+            id: string;
+            image: string;
+            name: string;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        frozen: boolean;
+        id: string;
+        own_capabilities: string[];
+        type: string;
+        updated_at: string;
+    };
+    id: string;
+    state: {
+        members: {};
+        messages: never[];
+        setIsUpToDate: jest.Mock<any, any>;
+    };
+    type: string;
+};
+export function generateChannelResponse(customValues?: {
+    channel: {};
+    id: string;
+    type: string;
+}): {
+    channel: {
+        id: string;
+        type: string;
+        user: {
+            banned: boolean;
+            created_at: string;
+            id: string;
+            image: string;
+            name: string;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        cid: string;
+        config: {
+            name: string;
+            type: string;
+            automod: string;
+            automod_behavior: string;
+            commands: {
+                args: string;
+                description: string;
+                name: string;
+                set: string;
+            }[];
+            connect_events: boolean;
+            created_at: string;
+            max_message_length: number;
+            message_retention: string;
+            mutes: boolean;
+            reactions: boolean;
+            read_events: boolean;
+            replies: boolean;
+            search: boolean;
+            typing_events: boolean;
+            updated_at: string;
+            uploads: boolean;
+            url_enrichment: boolean;
+        };
+        created_at: string;
+        created_by: {
+            banned: boolean;
+            created_at: string;
+            id: string;
+            image: string;
+            name: string;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        frozen: boolean;
+        own_capabilities: string[];
+        updated_at: string;
+    };
+    members: never[];
+    messages: never[];
+};

package/lib/typescript/mock-builders/generator/message.d.ts

@@ -0,0 +1,38 @@
+export function generateMessage(options?: {}): {
+    attachments: never[];
+    created_at: any;
+    html: string;
+    id: string;
+    text: string;
+    type: string;
+    updated_at: any;
+    user: {
+        banned: boolean;
+        created_at: string;
+        id: string;
+        image: string;
+        name: string;
+        online: boolean;
+        role: string;
+        updated_at: string;
+    };
+};
+export function generateStaticMessage(seed: any, options: any, date: any): {
+    attachments: never[];
+    created_at: any;
+    html: string;
+    id: string;
+    text: string;
+    type: string;
+    updated_at: any;
+    user: {
+        banned: boolean;
+        created_at: string;
+        id: string;
+        image: string;
+        name: string;
+        online: boolean;
+        role: string;
+        updated_at: string;
+    };
+};

package/lib/typescript/mock-builders/generator/user.d.ts

@@ -1,9 +1,9 @@
 export function getUserDefaults(): {
     banned: boolean;
     created_at: string;
-    id: any;
-    image: any;
-    name: any;
+    id: string;
+    image: string;
+    name: string;
     online: boolean;
     role: string;
     updated_at: string;
@@ -11,9 +11,9 @@ export function getUserDefaults(): {
 export function generateUser(options?: {}): {
     banned: boolean;
     created_at: string;
-    id: any;
-    image: any;
-    name: any;
+    id: string;
+    image: string;
+    name: string;
     online: boolean;
     role: string;
     updated_at: string;
@@ -21,9 +21,9 @@ export function generateUser(options?: {}): {
 export function generateStaticUser(userNumber: any): {
     banned: boolean;
     created_at: string;
-    id: any;
-    image: any;
-    name: any;
+    id: string;
+    image: string;
+    name: string;
     online: boolean;
     role: string;
     updated_at: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.9.0-beta.1",
+  "version": "4.9.0-beta.4",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -34,7 +34,8 @@
     "prepare-distribution": "cd examples/SampleApp && npm version patch && react-native-version && git add ./ && git commit -m 'Bump build version' --no-verify",
     "prettier": "prettier --list-different '**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc",
     "prettier-fix": "prettier --write '**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc",
-    "test:unit": "TZ=UTC jest --coverage",
+    "test:coverage": "yarn test:unit --coverage",
+    "test:unit": "TZ=UTC jest",
     "validate-translations": "node bin/validate-translations.js",
     "get-version": "echo $npm_package_version",
     "version": "bash ./bin/before-tag.sh",
@@ -79,7 +80,7 @@
     "react-art": "^17.0.2",
     "react-native-markdown-package": "1.8.1",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "6.2.0"
+    "stream-chat": "6.7.0"
   },
   "peerDependencies": {
     "react-native-svg": "^12.1.0"
@@ -87,18 +88,18 @@
   "devDependencies": {
     "@babel/cli": "^7.12.17",
     "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5",
     "@babel/plugin-proposal-object-rest-spread": "7.13.8",
     "@babel/plugin-transform-runtime": "7.13.10",
     "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.13.12",
     "@babel/preset-typescript": "7.13.0",
+    "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "2.0.0",
     "@react-native-community/eslint-plugin": "1.1.0",
     "@react-native-community/netinfo": "6.0.0",
     "@testing-library/jest-native": "4.0.4",
-    "@testing-library/react-native": "9.0.0",
     "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/react-native": "9.0.0",
     "@types/eslint": "7.2.10",
     "@types/jest": "26.0.23",
     "@types/lodash": "4.14.169",
@@ -106,6 +107,7 @@
     "@types/react": "17.0.5",
     "@types/react-native": "0.67.3",
     "@types/react-test-renderer": "17.0.1",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "babel-eslint": "10.1.0",

package/src/components/Attachment/Gallery.tsx

@@ -212,7 +212,7 @@ const GalleryWithContext = <
             ]}
             testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
           >
-            {rows.map(({ height, resizeMode, type, url, width }, rowIndex) => {
+            {rows.map(({ height, resizeMode, thumb_url, type, url, width }, rowIndex) => {
               const openImageViewer = () => {
                 if (!legacyImageViewerSwipeBehaviour && message) {
                   // Added if-else to keep the logic readable, instead of DRY.
@@ -307,6 +307,7 @@ const GalleryWithContext = <
                           width: width - 1,
                         },
                       ]}
+                      thumb_url={thumb_url}
                     />
                   ) : (
                     <View style={styles.imageContainerStyle}>

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/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet, TextInput, TextInputProps } from 'react-native';
+import { I18nManager, StyleSheet, TextInput, TextInputProps } from 'react-native';
 
 import throttle from 'lodash/throttle';
 
@@ -417,6 +417,7 @@ const AutoCompleteInputWithContext = <
         {
           color: black,
           maxHeight: (textHeight || 17) * numberOfLines,
+          textAlign: I18nManager.isRTL ? 'right' : 'left',
         },
         inputBox,
       ]}

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 14,
     fontWeight: 'bold',
-    paddingRight: 8,
+    paddingHorizontal: 8,
   },
 });
 

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/MessageInput/__tests__/__snapshots__/MessageInput.test.js.snap

@@ -286,6 +286,7 @@ Array [
                     Object {
                       "color": "#000000",
                       "maxHeight": 85,
+                      "textAlign": "left",
                     },
                     Object {},
                   ]

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/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -1623,6 +1623,7 @@ exports[`Thread should match thread snapshot 1`] = `
                   Object {
                     "color": "#000000",
                     "maxHeight": 85,
+                    "textAlign": "left",
                   },
                   Object {},
                 ]

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);