stream-chat-react-native-core 4.5.0-beta.1 → 4.6.0-beta.1

package/lib/typescript/native.d.ts

@@ -1,5 +1,6 @@
 import { FlatList as DefaultFlatList } from 'react-native';
 import type { NetInfoSubscription } from '@react-native-community/netinfo';
+import type { Asset, File } from './types/types';
 declare type CompressImage = ({ compressImageQuality, height, uri, width, }: {
     compressImageQuality: number;
     height: number;
@@ -11,15 +12,8 @@ declare type DeleteFile = ({ uri }: {
     uri: string;
 }) => Promise<boolean> | never;
 export declare let deleteFile: DeleteFile;
-declare type GetLocalAssetUri = (uriOrAssetId: string) => Promise<string> | never;
+declare type GetLocalAssetUri = (uriOrAssetId: string) => never;
 export declare let getLocalAssetUri: GetLocalAssetUri;
-export declare type Asset = {
-    height: number;
-    source: 'camera' | 'picker';
-    uri: string;
-    width: number;
-    id?: string;
-};
 declare type GetPhotos = ({ after, first }: {
     first: number;
     after?: string;
@@ -41,12 +35,7 @@ declare type PickDocument = ({ maxNumberOfFiles }: {
     maxNumberOfFiles?: number;
 }) => Promise<{
     cancelled: boolean;
-    docs?: {
-        name: string;
-        size?: number | string;
-        type?: string;
-        uri?: string;
-    }[];
+    docs?: File[];
 }> | never;
 export declare let pickDocument: PickDocument;
 declare type SaveFileOptions = {

package/lib/typescript/types/types.d.ts

@@ -1,4 +1,28 @@
 import type { ExtendableGenerics, LiteralStringForUnion } from 'stream-chat';
+export declare type Asset = {
+    duration: number | null;
+    filename: string;
+    fileSize: string;
+    height: number;
+    playableDuration: number | null;
+    source: 'camera' | 'picker';
+    type: string;
+    uri: string;
+    width: number;
+    id?: string;
+    size?: number | string;
+};
+export declare type File = {
+    name: string;
+    duration?: string | null;
+    size?: number | string;
+    type?: string;
+    uri?: string;
+};
+export declare type DefaultAttachmentType = UnknownType & {
+    file_size?: number | string;
+    mime_type?: string;
+};
 interface DefaultUserType extends UnknownType {
     image?: 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.5.0-beta.1",
+  "version": "4.6.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/FileIcon.tsx

@@ -19,6 +19,7 @@ import { SEVEN_Z } from '../../icons/SEVEN_Z';
 import { TAR } from '../../icons/TAR';
 import { TXT } from '../../icons/TXT';
 import type { IconProps } from '../../icons/utils/base';
+import { Video } from '../../icons/Video';
 import { XLS } from '../../icons/XLS';
 import { XLSX } from '../../icons/XLSX';
 import { ZIP } from '../../icons/ZIP';
@@ -320,6 +321,46 @@ const zipFileTypes = [
   'application/zip',
 ];
 
+const videoFileTypes = [
+  'video/3g2',
+  'video/3gp',
+  'video/aaf',
+  'video/asf',
+  'video/avchd',
+  'video/avi',
+  'video/drc',
+  'video/flv',
+  'video/m2v',
+  'video/m3u8',
+  'video/m4p',
+  'video/m4v',
+  'video/mkv',
+  'video/mng',
+  'video/mov',
+  'video/mp2',
+  'video/mp4',
+  'video/mpe',
+  'video/mpeg',
+  'video/mpg',
+  'video/mpv',
+  'video/mxf',
+  'video/nsv',
+  'video/ogg',
+  'video/ogv',
+  'video/qt',
+  'video/rm',
+  'video/rmvb',
+  'video/roq',
+  'video/svi',
+  'video/vob',
+  'video/webm',
+  'video/wmv',
+  'video/yuv',
+  'video/quicktime',
+  'video/webm',
+  'video/x-flv',
+];
+
 const mimeTypeToIconMap: Record<string, React.FC<IconProps>> = {
   'application/pdf': PDF, // .pdf
   'application/rtf': RTF, // .rtf
@@ -371,6 +412,10 @@ for (const type of zipFileTypes) {
   mimeTypeToIconMap[type] = ZIP;
 }
 
+for (const type of videoFileTypes) {
+  mimeTypeToIconMap[type] = Video;
+}
+
 function mimeTypeToIcon(mimeType?: string): React.FC<IconProps> {
   if (!mimeType) return GenericFile;
 

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,28 +238,37 @@ 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}
     />
   );
 };
@@ -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/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/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>
   );
 };