stream-chat-react-native-core 4.7.0-beta.2 → 4.7.0-beta.5

package/lib/typescript/components/Message/Message.d.ts

@@ -11,22 +11,28 @@ import { ThreadContextValue } from '../../contexts/threadContext/ThreadContext';
 import { TranslationContextValue } from '../../contexts/translationContext/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { MessageType } from '../MessageList/hooks/useMessageList';
-export declare type TouchableEmitter = 'card' | 'fileAttachment' | 'gallery' | 'giphy' | 'message' | 'messageContent' | 'messageReplies' | 'reactionList' | 'textLink';
+export declare type TouchableEmitter = 'fileAttachment' | 'gallery' | 'giphy' | 'message' | 'messageContent' | 'messageReplies' | 'reactionList';
 export declare type TextMentionTouchableHandlerPayload<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     emitter: 'textMention';
     additionalInfo?: {
         user?: UserResponse<StreamChatGenerics>;
     };
 };
+export declare type UrlTouchableHandlerPayload = {
+    emitter: 'textLink' | 'card';
+    additionalInfo?: {
+        url?: string;
+    };
+};
 export declare type TouchableHandlerPayload = {
     defaultHandler?: () => void;
     event?: GestureResponderEvent;
 } & ({
-    additionalInfo?: Record<string, unknown>;
     emitter?: TouchableEmitter;
-} | TextMentionTouchableHandlerPayload);
+} | TextMentionTouchableHandlerPayload | UrlTouchableHandlerPayload);
 export declare type MessageTouchableHandlerPayload<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TouchableHandlerPayload & {
     actionHandlers?: MessageActionHandlers;
+    additionalInfo?: Record<string, unknown>;
     message?: MessageType<StreamChatGenerics>;
 };
 export declare type MessageActionHandlers = {

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.7.0-beta.2",
+  "version": "4.7.0-beta.5",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -34,7 +34,7 @@
     "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",
+    "test:unit": "TZ=UTC jest --coverage",
     "validate-translations": "node bin/validate-translations.js",
     "get-version": "echo $npm_package_version",
     "version": "bash ./bin/before-tag.sh",

package/src/components/Attachment/Card.tsx

@@ -149,6 +149,7 @@ const CardWithContext = <
       onLongPress={(event) => {
         if (onLongPress) {
           onLongPress({
+            additionalInfo: { url: og_scrape_url },
             emitter: 'card',
             event,
           });
@@ -157,6 +158,7 @@ const CardWithContext = <
       onPress={(event) => {
         if (onPress) {
           onPress({
+            additionalInfo: { url: og_scrape_url },
             defaultHandler: defaultOnPress,
             emitter: 'card',
             event,
@@ -166,6 +168,7 @@ const CardWithContext = <
       onPressIn={(event) => {
         if (onPressIn) {
           onPressIn({
+            additionalInfo: { url: og_scrape_url },
             defaultHandler: defaultOnPress,
             emitter: 'card',
             event,

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Alert,
   BackHandler,
   Dimensions,
   ImageBackground,
@@ -56,23 +57,20 @@ const styles = StyleSheet.create({
 const screenHeight = vh(100);
 const fullScreenHeight = Dimensions.get('window').height;
 
-type AttachmentImageProps = {
+export type AttachmentPickerItemType = {
   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 AttachmentVideoProps = {
-  asset: Asset;
-  ImageOverlaySelectedComponent: React.ComponentType;
-  maxNumberOfFiles: number;
-  selected: boolean;
-  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-  numberOfAttachmentPickerImageColumns?: number;
-};
+type AttachmentImageProps = Omit<AttachmentPickerItemType, 'setSelectedFiles'>;
+
+type AttachmentVideoProps = Omit<AttachmentPickerItemType, 'setSelectedImages'>;
 
 const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
   const {
@@ -80,6 +78,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
     ImageOverlaySelectedComponent,
     maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
+    numberOfUploads,
     selected,
     setSelectedFiles,
   } = props;
@@ -115,7 +114,8 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
       setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
     } else {
       setSelectedFiles((files) => {
-        if (files.length >= maxNumberOfFiles) {
+        if (numberOfUploads >= maxNumberOfFiles) {
+          Alert.alert('Maximum number of files reached');
           return files;
         }
         return [
@@ -169,6 +169,7 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
     ImageOverlaySelectedComponent,
     maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
+    numberOfUploads,
     selected,
     setSelectedImages,
   } = props;
@@ -188,7 +189,8 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
       setSelectedImages((images) => images.filter((image) => image.uri !== asset.uri));
     } else {
       setSelectedImages((images) => {
-        if (images.length >= maxNumberOfFiles) {
+        if (numberOfUploads >= maxNumberOfFiles) {
+          Alert.alert('Maximum number of files reached');
           return images;
         }
         return [...images, asset];
@@ -219,24 +221,13 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
   );
 };
 
-const renderImage = ({
-  item,
-}: {
-  item: {
-    asset: Asset;
-    ImageOverlaySelectedComponent: React.ComponentType;
-    maxNumberOfFiles: number;
-    selected: boolean;
-    setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-    setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
-    numberOfAttachmentPickerImageColumns?: number;
-  };
-}) => {
+const renderItem = ({ item }: { item: AttachmentPickerItemType }) => {
   const {
     asset,
     ImageOverlaySelectedComponent,
     maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
+    numberOfUploads,
     selected,
     setSelectedFiles,
     setSelectedImages,
@@ -258,6 +249,7 @@ const renderImage = ({
       ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
       maxNumberOfFiles={maxNumberOfFiles}
       numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
+      numberOfUploads={numberOfUploads}
       selected={selected}
       setSelectedImages={setSelectedImages}
     />
@@ -267,6 +259,7 @@ const renderImage = ({
       ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
       maxNumberOfFiles={maxNumberOfFiles}
       numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
+      numberOfUploads={numberOfUploads}
       selected={selected}
       setSelectedFiles={setSelectedFiles}
     />
@@ -453,6 +446,7 @@ export const AttachmentPicker = React.forwardRef(
       ImageOverlaySelectedComponent,
       maxNumberOfFiles,
       numberOfAttachmentPickerImageColumns,
+      numberOfUploads: selectedFiles.length + selectedImages.length,
       selected:
         selectedImages.some((image) => image.uri === asset.uri) ||
         selectedFiles.some((file) => file.uri === asset.uri),
@@ -535,7 +529,7 @@ export const AttachmentPicker = React.forwardRef(
             keyExtractor={(item) => item.asset.uri}
             numColumns={numberOfAttachmentPickerImageColumns ?? 3}
             onEndReached={getMorePhotos}
-            renderItem={renderImage}
+            renderItem={renderItem}
           />
         </BottomSheet>
         {selectedPicker === 'images' && photoError && (

package/src/components/Chat/hooks/useIsOnline.ts

@@ -13,7 +13,7 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 /**
  * Disconnect the websocket connection when app goes to background,
  * and reconnect when app comes to foreground.
- * We do this to make sure, user receives push notifications when app is in the background.
+ * We do this to make sure the user receives push notifications when app is in the background.
  * You can't receive push notification until you have active websocket connection.
  */
 export const useIsOnline = <
@@ -25,10 +25,10 @@ export const useIsOnline = <
   const [isOnline, setIsOnline] = useState(true);
   const [connectionRecovering, setConnectionRecovering] = useState(false);
   const isMounted = useIsMountedRef();
-  const clientExits = !!client;
+  const clientExists = !!client;
 
   const onBackground = useCallback(() => {
-    if (!closeConnectionOnBackground) return;
+    if (!closeConnectionOnBackground || !clientExists) return;
 
     for (const cid in client.activeChannels) {
       const channel = client.activeChannels[cid];
@@ -37,13 +37,13 @@ export const useIsOnline = <
 
     client.closeConnection();
     setIsOnline(false);
-  }, [closeConnectionOnBackground, client]);
+  }, [closeConnectionOnBackground, client, clientExists]);
 
   const onForeground = useCallback(() => {
-    if (!closeConnectionOnBackground) return;
+    if (!closeConnectionOnBackground || !clientExists) return;
 
     client.openConnection();
-  }, [closeConnectionOnBackground, client]);
+  }, [closeConnectionOnBackground, client, clientExists]);
 
   useAppStateListener(onForeground, onBackground);
 
@@ -101,7 +101,7 @@ export const useIsOnline = <
       chatListeners.forEach((listener) => listener.unsubscribe?.());
       unsubscribeNetInfo?.();
     };
-  }, [clientExits]);
+  }, [clientExists]);
 
   return { connectionRecovering, isOnline };
 };

package/src/components/Message/Message.tsx

@@ -53,15 +53,13 @@ import {
 import type { MessageActionListItemProps } from '../MessageOverlay/MessageActionListItem';
 
 export type TouchableEmitter =
-  | 'card'
   | 'fileAttachment'
   | 'gallery'
   | 'giphy'
   | 'message'
   | 'messageContent'
   | 'messageReplies'
-  | 'reactionList'
-  | 'textLink';
+  | 'reactionList';
 
 export type TextMentionTouchableHandlerPayload<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -70,21 +68,27 @@ export type TextMentionTouchableHandlerPayload<
   additionalInfo?: { user?: UserResponse<StreamChatGenerics> };
 };
 
+export type UrlTouchableHandlerPayload = {
+  emitter: 'textLink' | 'card';
+  additionalInfo?: { url?: string };
+};
+
 export type TouchableHandlerPayload = {
   defaultHandler?: () => void;
   event?: GestureResponderEvent;
 } & (
   | {
-      additionalInfo?: Record<string, unknown>;
       emitter?: TouchableEmitter;
     }
   | TextMentionTouchableHandlerPayload
+  | UrlTouchableHandlerPayload
 );
 
 export type MessageTouchableHandlerPayload<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = TouchableHandlerPayload & {
   actionHandlers?: MessageActionHandlers;
+  additionalInfo?: Record<string, unknown>;
   message?: MessageType<StreamChatGenerics>;
 };
 

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -161,10 +161,14 @@ export const renderText = <
   };
 
   const link: ReactNodeOutput = (node, output, { ...state }) => {
+    const url = node.target;
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
-          defaultHandler: () => onLink(node.target),
+          additionalInfo: { url },
+          defaultHandler: () => {
+            onLink(url);
+          },
           emitter: 'textLink',
           event,
         });
@@ -174,6 +178,7 @@ export const renderText = <
     const onLongPress = (event: GestureResponderEvent) => {
       if (!preventPress && onLongPressParam) {
         onLongPressParam({
+          additionalInfo: { url },
           emitter: 'textLink',
           event,
         });

package/src/components/Reply/Reply.tsx

@@ -203,7 +203,9 @@ const ReplyWithContext = <
             />
           ) : null
         ) : null}
-        {messageType === 'video' ? <VideoThumbnail style={[styles.videoAttachment]} /> : null}
+        {messageType === 'video' && !lastAttachment.og_scrape_url ? (
+          <VideoThumbnail style={[styles.videoAttachment]} />
+        ) : null}
         <MessageTextContainer<StreamChatGenerics>
           markdownStyles={
             quotedMessage.deleted_at

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -447,7 +447,7 @@ export const MessageInputProvider = <
   }>({});
   const [giphyActive, setGiphyActive] = useState(false);
   const [sendThreadMessageInChannel, setSendThreadMessageInChannel] = useState(false);
-  const { editing, hasFilePicker, hasImagePicker, initialValue, maxNumberOfFiles } = value;
+  const { editing, hasFilePicker, hasImagePicker, initialValue } = value;
   const {
     fileUploads,
     imageUploads,
@@ -536,7 +536,7 @@ export const MessageInputProvider = <
   };
 
   const openAttachmentPicker = () => {
-    if (hasImagePicker && !fileUploads.length) {
+    if (hasImagePicker) {
       Keyboard.dismiss();
       openPicker();
       setSelectedPicker('images');
@@ -548,7 +548,7 @@ export const MessageInputProvider = <
        * https://github.com/gorhom/react-native-bottom-sheet/issues/446
        */
       setTimeout(openPicker, 600);
-    } else if (hasFilePicker && numberOfUploads < maxNumberOfFiles) {
+    } else if (hasFilePicker) {
       pickFile();
     }
   };
@@ -572,6 +572,7 @@ export const MessageInputProvider = <
 
   const pickFile = async () => {
     if (numberOfUploads >= value.maxNumberOfFiles) {
+      Alert.alert('Maximum number of files reached');
       return;
     }
 
@@ -688,6 +689,15 @@ export const MessageInputProvider = <
             image_url: file.url,
             type: 'image',
           } as Attachment<StreamChatGenerics>);
+        } else if (file.file.type?.startsWith('audio/')) {
+          attachments.push({
+            asset_url: file.url,
+            duration: file.file.duration,
+            file_size: file.file.size,
+            mime_type: file.file.type,
+            title: file.file.name,
+            type: 'audio',
+          } as Attachment<StreamChatGenerics>);
         } else if (file.file.type?.startsWith('video/')) {
           attachments.push({
             asset_url: file.url,

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.7.0-beta.2"
+  "version": "4.7.0-beta.5"
 }