stream-chat-react-native-core 4.5.0 → 4.6.0

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   BackHandler,
   Dimensions,
@@ -7,6 +7,7 @@ import {
   Platform,
   StatusBar,
   StyleSheet,
+  Text,
   View,
 } from 'react-native';
 
@@ -15,42 +16,161 @@ import BottomSheet, {
   BottomSheetHandleProps,
   TouchableOpacity,
 } from '@gorhom/bottom-sheet';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { lookup } from 'mime-types';
 
 import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Asset, getPhotos } from '../../native';
+import { Recorder } from '../../icons';
+import { getPhotos } from '../../native';
+import type { Asset, File } from '../../types/types';
 import { vh, vw } from '../../utils/utils';
 
+dayjs.extend(duration);
+
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
   },
+  durationText: {
+    fontWeight: 'bold',
+  },
   overlay: {
     alignItems: 'flex-end',
     flex: 1,
   },
+  videoView: {
+    bottom: 5,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 5,
+    position: 'absolute',
+    width: '100%',
+  },
 });
 
 const screenHeight = vh(100);
 const fullScreenHeight = Dimensions.get('window').height;
 
 type AttachmentImageProps = {
+  asset: Asset;
   ImageOverlaySelectedComponent: React.ComponentType;
-  onPress: () => void;
+  maxNumberOfFiles: number;
   selected: boolean;
-  uri: string;
+  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;
+};
+
+const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
+  const {
+    asset,
+    ImageOverlaySelectedComponent,
+    maxNumberOfFiles,
+    numberOfAttachmentPickerImageColumns,
+    selected,
+    setSelectedFiles,
+  } = props;
+
+  const {
+    theme: {
+      attachmentPicker: { durationText, image, imageOverlay },
+      colors: { overlay, white },
+    },
+  } = useTheme();
+
+  const { duration, playableDuration, uri } = asset;
+
+  const videoDuration = duration ? duration : playableDuration;
+
+  const ONE_HOUR_IN_SECONDS = 3600;
+
+  let durationLabel = '00:00';
+
+  if (videoDuration) {
+    const isDurationLongerThanHour = videoDuration / ONE_HOUR_IN_SECONDS >= 1;
+    const formattedDurationParam = isDurationLongerThanHour ? 'HH:mm:ss' : 'mm:ss';
+    const formattedVideoDuration = dayjs
+      .duration(videoDuration, 'second')
+      .format(formattedDurationParam);
+    durationLabel = formattedVideoDuration;
+  }
+
+  const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
+
+  const onPressVideo = () => {
+    if (selected) {
+      setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
+    } else {
+      setSelectedFiles((files) => {
+        if (files.length >= maxNumberOfFiles) {
+          return files;
+        }
+        return [
+          ...files,
+          {
+            duration: durationLabel,
+            name: asset.filename,
+            size: asset.fileSize,
+            type: 'video',
+            uri: asset.uri,
+          },
+        ];
+      });
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={onPressVideo}>
+      <ImageBackground
+        source={{ uri }}
+        style={[
+          {
+            height: size,
+            margin: 1,
+            width: size,
+          },
+          image,
+        ]}
+      >
+        {selected && (
+          <View style={[styles.overlay, { backgroundColor: overlay }, imageOverlay]}>
+            <ImageOverlaySelectedComponent />
+          </View>
+        )}
+        <View style={styles.videoView}>
+          <Recorder height={20} pathFill={white} width={25} />
+          {videoDuration ? (
+            <Text style={[styles.durationText, durationText, { color: white }]}>
+              {durationLabel}
+            </Text>
+          ) : null}
+        </View>
+      </ImageBackground>
+    </TouchableOpacity>
+  );
+};
+
 const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
   const {
+    asset,
     ImageOverlaySelectedComponent,
+    maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
-    onPress,
     selected,
-    uri,
+    setSelectedImages,
   } = props;
   const {
     theme: {
@@ -61,8 +181,23 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
+  const { uri } = asset;
+
+  const onPressImage = () => {
+    if (selected) {
+      setSelectedImages((images) => images.filter((image) => image.uri !== asset.uri));
+    } else {
+      setSelectedImages((images) => {
+        if (images.length >= maxNumberOfFiles) {
+          return images;
+        }
+        return [...images, asset];
+      });
+    }
+  };
+
   return (
-    <TouchableOpacity onPress={onPress}>
+    <TouchableOpacity onPress={onPressImage}>
       <ImageBackground
         source={{ uri }}
         style={[
@@ -92,6 +227,7 @@ const renderImage = ({
     ImageOverlaySelectedComponent: React.ComponentType;
     maxNumberOfFiles: number;
     selected: boolean;
+    setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
     setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
     numberOfAttachmentPickerImageColumns?: number;
   };
@@ -102,55 +238,64 @@ const renderImage = ({
     maxNumberOfFiles,
     numberOfAttachmentPickerImageColumns,
     selected,
+    setSelectedFiles,
     setSelectedImages,
   } = item;
-  const onPress = () => {
-    if (selected) {
-      setSelectedImages((images) => images.filter((image) => image.uri !== asset.uri));
-    } else {
-      setSelectedImages((images) => {
-        if (images.length >= maxNumberOfFiles) {
-          return images;
-        }
-        return [...images, asset];
-      });
-    }
-  };
 
-  return (
+  const contentType = lookup(asset.filename) || 'multipart/form-data';
+
+  const fileType = asset.filename
+    ? contentType.startsWith('image/')
+      ? 'image'
+      : 'video'
+    : asset.type === 'video'
+    ? 'video'
+    : 'image';
+
+  return fileType === 'image' ? (
     <AttachmentImage
+      asset={asset}
+      ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
+      maxNumberOfFiles={maxNumberOfFiles}
+      numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
+      selected={selected}
+      setSelectedImages={setSelectedImages}
+    />
+  ) : (
+    <AttachmentVideo
+      asset={asset}
       ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
+      maxNumberOfFiles={maxNumberOfFiles}
       numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
-      onPress={onPress}
       selected={selected}
-      uri={asset.uri}
+      setSelectedFiles={setSelectedFiles}
     />
   );
 };
 
 export type AttachmentPickerProps = {
   /**
-   * Custom UI component to render [draggable handle](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/1.png) of attachment picker.
+   * Custom UI component to render [draggable handle](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) of attachment picker.
    *
-   * **Default** [AttachmentPickerBottomSheetHandle](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx)
+   * **Default** [AttachmentPickerBottomSheetHandle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx)
    */
   AttachmentPickerBottomSheetHandle: React.FC<BottomSheetHandleProps>;
   /**
    * Custom UI component to render error component while opening attachment picker.
    *
-   * **Default** [AttachmentPickerError](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx)
+   * **Default** [AttachmentPickerError](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx)
    */
   AttachmentPickerError: React.ComponentType<AttachmentPickerErrorProps>;
   /**
    * Custom UI component to render error image for attachment picker
    *
-   * **Default** [AttachmentPickerErrorImage](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx)
+   * **Default** [AttachmentPickerErrorImage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx)
    */
   AttachmentPickerErrorImage: React.ComponentType;
   /**
-   * Custom UI component to render overlay component, that shows up on top of [selected image](https://github.com/GetStream/stream-chat-react-native/blob/master/screenshots/docs/1.png) (with tick mark)
+   * Custom UI component to render overlay component, that shows up on top of [selected image](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) (with tick mark)
    *
-   * **Default** [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
+   * **Default** [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
    */
   ImageOverlaySelectedComponent: React.ComponentType;
   attachmentPickerBottomSheetHandleHeight?: number;
@@ -187,8 +332,10 @@ export const AttachmentPicker = React.forwardRef(
     const {
       closePicker,
       maxNumberOfFiles,
+      selectedFiles,
       selectedImages,
       selectedPicker,
+      setSelectedFiles,
       setSelectedImages,
       setSelectedPicker,
       topInset,
@@ -200,13 +347,7 @@ export const AttachmentPicker = React.forwardRef(
     const [hasNextPage, setHasNextPage] = useState(true);
     const [loadingPhotos, setLoadingPhotos] = useState(false);
     const [photos, setPhotos] = useState<Asset[]>([]);
-
-    const hideAttachmentPicker = () => {
-      setSelectedPicker(undefined);
-      if ((ref as React.MutableRefObject<BottomSheet>)?.current) {
-        (ref as React.MutableRefObject<BottomSheet>).current.close();
-      }
-    };
+    const bottomSheetCloseOnKeyboardShowTimeout = useRef<NodeJS.Timeout>();
 
     const getMorePhotos = async () => {
       if (hasNextPage && !loadingPhotos && currentIndex > -1 && selectedPicker === 'images') {
@@ -248,6 +389,20 @@ export const AttachmentPicker = React.forwardRef(
     }, [selectedPicker]);
 
     useEffect(() => {
+      const hideAttachmentPicker = () => {
+        if (bottomSheetCloseOnKeyboardShowTimeout.current) {
+          clearTimeout(bottomSheetCloseOnKeyboardShowTimeout.current);
+        }
+        setSelectedPicker(undefined);
+        // This short timeout is to prevent a race condition
+        // where the close function is called during the point when a internal container layout happens within the bottomsheet due to keyboard affecting the layout
+        // If the container layout measures a shorter height than previous but if the close snapped to the previous height's position, the bottom sheet will show up
+        // this short delay ensures that close function is always called after a container layout due to keyboard change
+        bottomSheetCloseOnKeyboardShowTimeout.current = setTimeout(
+          () => (ref as React.MutableRefObject<BottomSheet | undefined>).current?.close(),
+          150,
+        );
+      };
       const keyboardSubscription =
         Platform.OS === 'ios'
           ? Keyboard.addListener('keyboardWillShow', hideAttachmentPicker)
@@ -265,6 +420,9 @@ export const AttachmentPicker = React.forwardRef(
         } else {
           Keyboard.removeListener('keyboardDidShow', hideAttachmentPicker);
         }
+        if (bottomSheetCloseOnKeyboardShowTimeout.current) {
+          clearTimeout(bottomSheetCloseOnKeyboardShowTimeout.current);
+        }
       };
     }, []);
 
@@ -295,7 +453,10 @@ export const AttachmentPicker = React.forwardRef(
       ImageOverlaySelectedComponent,
       maxNumberOfFiles,
       numberOfAttachmentPickerImageColumns,
-      selected: selectedImages.some((image) => image.uri === asset.uri),
+      selected:
+        selectedImages.some((image) => image.uri === asset.uri) ||
+        selectedFiles.some((file) => file.uri === asset.uri),
+      setSelectedFiles,
       setSelectedImages,
     }));
 
@@ -326,35 +487,24 @@ export const AttachmentPicker = React.forwardRef(
           : statusBarHeight
         : 0;
 
-    const initialSnapPoint = useMemo(
-      () =>
-        attachmentPickerBottomSheetHeight ?? Platform.OS === 'android'
-          ? 308 +
-            (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment) -
-            handleHeight
-          : 308 + (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment),
-      [
-        attachmentPickerBottomSheetHeight,
-        androidBottomBarHeightAdjustment,
-        fullScreenHeight,
-        handleHeight,
-        screenHeight,
-      ],
-    );
+    const initialSnapPoint =
+      attachmentPickerBottomSheetHeight ?? Platform.OS === 'android'
+        ? 308 + (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment) - handleHeight
+        : 308 + (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment);
 
-    const finalSnapPoint = useMemo(
-      () =>
-        Platform.OS === 'android'
-          ? fullScreenHeight - topInset - handleHeight
-          : fullScreenHeight - topInset,
-      [fullScreenHeight, handleHeight, topInset],
-    );
+    const finalSnapPoint =
+      Platform.OS === 'android'
+        ? fullScreenHeight - topInset - handleHeight
+        : fullScreenHeight - topInset;
 
     /**
      * Snap points changing cause a rerender of the position,
      * this is an issue if you are calling close on the bottom sheet.
      */
-    const snapPoints = [initialSnapPoint, finalSnapPoint];
+    const snapPoints = useMemo(
+      () => [initialSnapPoint, finalSnapPoint],
+      [initialSnapPoint, finalSnapPoint],
+    );
 
     return (
       <>
@@ -370,7 +520,7 @@ export const AttachmentPicker = React.forwardRef(
           }
           handleHeight={handleHeight}
           index={-1}
-          onChange={(index: number) => setCurrentIndex(index)}
+          onChange={setCurrentIndex}
           ref={ref}
           snapPoints={snapPoints}
         >

package/src/components/Channel/Channel.tsx

@@ -304,7 +304,7 @@ export type ChannelPropsWithContext<
     /**
      * When true, disables the KeyboardCompatibleView wrapper
      *
-     * Channel internally uses the [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
+     * Channel internally uses the [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
      * component to adjust the height of Channel when the keyboard is opened or dismissed. This prop provides the ability to disable this functionality in case you
      * want to use [KeyboardAvoidingView](https://facebook.github.io/react-native/docs/keyboardavoidingview) or handle dismissal yourself.
      * KeyboardAvoidingView works well when your component occupies 100% of screen height, otherwise it may raise some issues.
@@ -345,7 +345,7 @@ export type ChannelPropsWithContext<
     keyboardBehavior?: KeyboardAvoidingViewProps['behavior'];
     /**
      * Custom wrapper component that handles height adjustment of Channel component when keyboard is opened or dismissed
-     * Default component (accepts the same props): [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
+     * Default component (accepts the same props): [KeyboardCompatibleView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx)
      *
      * **Example:**
      *

package/src/components/Chat/Chat.tsx

@@ -91,7 +91,7 @@ export type ChatProps<
    */
   i18nInstance?: Streami18n;
   /**
-   * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/contexts/themeContext/utils/theme.ts)
+   * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/themeContext/utils/theme.ts)
    *
    * Please check section about [themes in cookbook](https://github.com/GetStream/stream-chat-react-native/wiki/Cookbook-v3.0#theme) for details.
    *

package/src/components/Message/Message.tsx

@@ -160,7 +160,7 @@ export type MessagePropsWithContext<
      * You can call methods available on the Message
      * component such as handleEdit, handleDelete, handleAction etc.
      *
-     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/Message.tsx)
+     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/Message.tsx)
      *
      * By default, we show the overlay with all the message actions on long press.
      *
@@ -173,7 +173,7 @@ export type MessagePropsWithContext<
      * You can call methods available on the Message
      * component such as handleEdit, handleDelete, handleAction etc.
      *
-     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/Message.tsx)
+     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/Message.tsx)
      *
      * By default, we will dismiss the keyboard on press.
      *

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -143,7 +143,7 @@ const MessageContentWithContext = <
       colors: { accent_red, blue_alice, grey_gainsboro, grey_whisper, transparent, white },
       messageSimple: {
         content: {
-          container: { borderRadiusL, borderRadiusS, ...container },
+          container: { borderRadius, borderRadiusL, borderRadiusS, ...container },
           containerInner,
           errorContainer,
           errorIcon,
@@ -223,6 +223,22 @@ const MessageContentWithContext = <
 
   const repliesCurveColor = isMyMessage && !error ? backgroundColor : grey_whisper;
 
+  const isBorderColor = isMyMessage && !error;
+
+  const shouldApplyBorderRadius = (firstGroupStyle: string, secondGroupStyle: string): boolean =>
+    (groupStyle === firstGroupStyle || groupStyle === secondGroupStyle) &&
+    (!hasThreadReplies || threadList);
+
+  const applyBorderRadius = (
+    firstGroupStyle: string,
+    secondGroupStyle: string,
+  ): number | undefined => {
+    if (shouldApplyBorderRadius(firstGroupStyle, secondGroupStyle)) {
+      return borderRadiusS;
+    }
+    return borderRadiusL;
+  };
+
   return (
     <TouchableOpacity
       activeOpacity={0.7}
@@ -297,17 +313,12 @@ const MessageContentWithContext = <
             styles.containerInner,
             {
               backgroundColor,
-              borderBottomLeftRadius:
-                (groupStyle === 'left_bottom' || groupStyle === 'left_single') &&
-                (!hasThreadReplies || threadList)
-                  ? borderRadiusS
-                  : borderRadiusL,
-              borderBottomRightRadius:
-                (groupStyle === 'right_bottom' || groupStyle === 'right_single') &&
-                (!hasThreadReplies || threadList)
-                  ? borderRadiusS
-                  : borderRadiusL,
-              borderColor: isMyMessage && !error ? backgroundColor : grey_whisper,
+              borderBottomLeftRadius: applyBorderRadius('left_bottom', 'left_single'),
+              borderBottomRightRadius: applyBorderRadius('right_bottom', 'right_single'),
+              borderColor: isBorderColor ? backgroundColor : grey_whisper,
+              borderRadius,
+              borderTopLeftRadius: applyBorderRadius('left_top', 'right_single'),
+              borderTopRightRadius: applyBorderRadius('right_top', 'right_single'),
             },
             noBorder ? { borderWidth: 0 } : {},
             containerInner,

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

@@ -1,4 +1,4 @@
-[src/components/Message/MessageSimple/utils/renderText.ts](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/utils/renderText.ts)
+[src/components/Message/MessageSimple/utils/renderText.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/utils/renderText.ts)
 
 Function that handles markdown and parsing for the text of message.
 

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -105,7 +105,7 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     </View>
   ) : (
     <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-      {getFileSizeDisplayText(item.file.size)}
+      {item.file.duration ? item.file.duration : getFileSizeDisplayText(item.file.size)}
     </Text>
   );
 };