stream-chat-react-native-core 4.6.1 → 4.7.0-beta.1

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.6.1",
+  "version": "4.7.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Attachment.tsx

@@ -75,17 +75,21 @@ const AttachmentWithContext = <
     );
   }
 
-  if (attachment.type === 'file' || attachment.type === 'audio') {
-    return <FileAttachment attachment={attachment} />;
-  }
-
-  if (attachment.type === 'video' && attachment.asset_url) {
+  if (attachment.type === 'video' && !attachment.og_scrape_url) {
     return (
-      // TODO: Put in video component
-      <FileAttachment attachment={attachment} />
+      <>
+        <Gallery videos={[attachment]} />
+        {hasAttachmentActions && (
+          <AttachmentActions key={`key-actions-${attachment.id}`} {...attachment} />
+        )}
+      </>
     );
   }
 
+  if (attachment.type === 'file' || attachment.type === 'audio') {
+    return <FileAttachment attachment={attachment} />;
+  }
+
   if (hasAttachmentActions) {
     return (
       <>

package/src/components/Attachment/Gallery.tsx

@@ -59,7 +59,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     overflow: 'hidden',
   },
-  imageContainer: { padding: 1 },
+  imageContainer: { display: 'flex', flexDirection: 'row', justifyContent: 'center', padding: 1 },
   moreImagesContainer: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -76,6 +76,7 @@ export type GalleryPropsWithContext<
     | 'alignment'
     | 'groupStyles'
     | 'images'
+    | 'videos'
     | 'onLongPress'
     | 'onPress'
     | 'onPressIn'
@@ -84,7 +85,7 @@ export type GalleryPropsWithContext<
   > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    'additionalTouchableProps' | 'legacyImageViewerSwipeBehaviour'
+    'additionalTouchableProps' | 'legacyImageViewerSwipeBehaviour' | 'VideoThumbnail'
   > &
   Pick<OverlayContextValue, 'setOverlay'> & {
     channelId: string | undefined;
@@ -125,6 +126,8 @@ const GalleryWithContext = <
     setImages,
     setOverlay,
     threadList,
+    videos,
+    VideoThumbnail,
   } = props;
 
   const {
@@ -158,16 +161,17 @@ const GalleryWithContext = <
     minWidth,
   };
 
+  const imagesAndVideos = [...(images || []), ...(videos || [])];
   const { height, invertedDirections, thumbnailGrid, width } = useMemo(
     () =>
       buildGallery({
-        images,
+        images: imagesAndVideos,
         sizeConfig,
       }),
-    [images.length],
+    [imagesAndVideos.length],
   );
 
-  if (!images?.length) return null;
+  if (!imagesAndVideos?.length) return null;
   const messageText = message?.text;
   const messageId = message?.id;
   const numOfColumns = thumbnailGrid.length;
@@ -200,7 +204,7 @@ const GalleryWithContext = <
             ]}
             testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
           >
-            {rows.map(({ height, resizeMode, url, width }, rowIndex) => {
+            {rows.map(({ height, resizeMode, type, url, width }, rowIndex) => {
               const defaultOnPress = () => {
                 // Added if-else to keep the logic readable, instead of DRY.
                 // if - legacyImageViewerSwipeBehaviour is disabled
@@ -214,11 +218,28 @@ const GalleryWithContext = <
                   setOverlay('gallery');
                 }
               };
+
+              const borderRadius = getGalleryImageBorderRadius({
+                alignment,
+                colIndex,
+                groupStyles,
+                hasThreadReplies,
+                height,
+                invertedDirections,
+                messageText,
+                numOfColumns,
+                numOfRows,
+                rowIndex,
+                sizeConfig,
+                threadList,
+                width,
+              });
+
               return (
                 <TouchableOpacity
                   activeOpacity={0.8}
                   disabled={preventPress}
-                  key={`gallery-item-${messageId}/${colIndex}/${rowIndex}/${images.length}`}
+                  key={`gallery-item-${messageId}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
                   onLongPress={(event) => {
                     if (onLongPress) {
                       onLongPress({
@@ -258,35 +279,34 @@ const GalleryWithContext = <
                   }-${colIndex}-item-${rowIndex}`}
                   {...additionalTouchableProps}
                 >
-                  <MemoizedGalleryImage
-                    resizeMode={resizeMode}
-                    style={[
-                      getGalleryImageBorderRadius({
-                        alignment,
-                        colIndex,
-                        groupStyles,
-                        hasThreadReplies,
-                        height,
-                        invertedDirections,
-                        messageText,
-                        numOfColumns,
-                        numOfRows,
-                        rowIndex,
-                        sizeConfig,
-                        threadList,
-                        width,
-                      }),
-                      image,
-                      {
-                        height: height - 1,
-                        width: width - 1,
-                      },
-                    ]}
-                    uri={url}
-                  />
+                  {type === 'video' ? (
+                    <VideoThumbnail
+                      style={[
+                        borderRadius,
+                        image,
+                        {
+                          height: height - 1,
+                          width: width - 1,
+                        },
+                      ]}
+                    />
+                  ) : (
+                    <MemoizedGalleryImage
+                      resizeMode={resizeMode}
+                      style={[
+                        borderRadius,
+                        image,
+                        {
+                          height: height - 1,
+                          width: width - 1,
+                        },
+                      ]}
+                      uri={url}
+                    />
+                  )}
                   {colIndex === numOfColumns - 1 &&
                   rowIndex === numOfRows - 1 &&
-                  images.length > 4 ? (
+                  imagesAndVideos.length > 4 ? (
                     <View
                       style={[
                         StyleSheet.absoluteFillObject,
@@ -296,7 +316,7 @@ const GalleryWithContext = <
                       ]}
                     >
                       <Text style={[styles.moreImagesText, moreImagesText]}>
-                        {`+${images.length - 4}`}
+                        {`+${imagesAndVideos.length - 4}`}
                       </Text>
                     </View>
                   ) : null}
@@ -319,12 +339,14 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     hasThreadReplies: prevHasThreadReplies,
     images: prevImages,
     message: prevMessage,
+    videos: prevVideos,
   } = prevProps;
   const {
     groupStyles: nextGroupStyles,
     hasThreadReplies: nextHasThreadReplies,
     images: nextImages,
     message: nextMessage,
+    videos: nextVideos,
   } = nextProps;
 
   const messageEqual = prevMessage?.id === nextMessage?.id;
@@ -346,6 +368,15 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     );
   if (!imagesEqual) return false;
 
+  const videosEqual =
+    prevVideos.length === nextVideos.length &&
+    prevVideos.every(
+      (image, index) =>
+        getUrlWithoutParams(image.image_url) === getUrlWithoutParams(nextVideos[index].image_url) &&
+        getUrlWithoutParams(image.thumb_url) === getUrlWithoutParams(nextVideos[index].thumb_url),
+    );
+  if (!videosEqual) return false;
+
   return true;
 };
 
@@ -376,6 +407,8 @@ export const Gallery = <
     setImage: propSetImage,
     setOverlay: propSetOverlay,
     threadList: propThreadList,
+    videos: propVideos,
+    VideoThumbnail: PropVideoThumbnail,
   } = props;
 
   const { setImage: contextSetImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
@@ -389,16 +422,19 @@ export const Gallery = <
     onPressIn: contextOnPressIn,
     preventPress: contextPreventPress,
     threadList: contextThreadList,
+    videos: contextVideos,
   } = useMessageContext<StreamChatGenerics>();
   const {
     additionalTouchableProps: contextAdditionalTouchableProps,
     legacyImageViewerSwipeBehaviour,
+    VideoThumbnail: ContextVideoThumnbnail,
   } = useMessagesContext<StreamChatGenerics>();
   const { setOverlay: contextSetOverlay } = useOverlayContext();
 
   const images = propImages || contextImages;
+  const videos = propVideos || contextVideos;
 
-  if (!images.length) return null;
+  if (!images.length && !videos.length) return null;
 
   const additionalTouchableProps = propAdditionalTouchableProps || contextAdditionalTouchableProps;
   const alignment = propAlignment || contextAlignment;
@@ -411,6 +447,7 @@ export const Gallery = <
   const setImage = propSetImage || contextSetImage;
   const setOverlay = propSetOverlay || contextSetOverlay;
   const threadList = propThreadList || contextThreadList;
+  const VideoThumbnail = PropVideoThumbnail || ContextVideoThumnbnail;
 
   return (
     <MemoizedGallery
@@ -431,6 +468,8 @@ export const Gallery = <
         setImages,
         setOverlay,
         threadList,
+        videos,
+        VideoThumbnail,
       }}
     />
   );

package/src/components/Attachment/VideoThumbnail.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { StyleSheet, View, ViewProps } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Play } from '../../icons';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: 'black',
+    display: 'flex',
+    height: '100%',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  roundedView: {
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 50,
+    display: 'flex',
+    height: 36,
+    justifyContent: 'center',
+    width: 36,
+  },
+});
+
+export type VideoThumbnailProps = ViewProps;
+
+export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
+  const {
+    theme: {
+      messageSimple: {
+        videoThumbnail: { container, roundedView },
+      },
+    },
+  } = useTheme();
+  const { style, ...rest } = props;
+  return (
+    <View {...rest} style={[styles.container, container, style]}>
+      <View style={[styles.roundedView, roundedView]}>
+        <Play height={24} pathFill={'#000'} width={24} />
+      </View>
+    </View>
+  );
+};

package/src/components/Attachment/hooks/useGoToURL.ts

@@ -19,7 +19,7 @@ export const useGoToURL: UseGoToURLType = (url?: string) => {
         Linking.openURL(finalUrl);
       } else {
         setError(true);
-        console.log(`Don't know how to open URI: ${finalUrl}`);
+        console.warn(`Don't know how to open URI: ${finalUrl}`);
       }
     });
 

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),
+    type: image.type,
     url: shouldResize
       ? getResizedImageUrl({
           height,

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

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

package/src/components/Attachment/utils/getAspectRatio.ts

@@ -10,12 +10,14 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
  */
 export function getAspectRatio<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(image: Attachment<StreamChatGenerics>) {
-  if (image.type !== 'image') {
-    throw new Error('getAspectRatio() can only be called on an image attachment');
+>(attachment: Attachment<StreamChatGenerics>) {
+  if (!(attachment.type === 'image' || attachment.type === 'video')) {
+    throw new Error(
+      'getAspectRatio() can only be called on an image attachment or video thumbnail',
+    );
   }
 
-  if (!image.original_width || !image.original_height) return 1;
+  if (!attachment.original_width || !attachment.original_height) return 1;
 
-  return image.original_width / image.original_height;
+  return attachment.original_width / attachment.original_height;
 }

package/src/components/Channel/Channel.tsx

@@ -82,6 +82,7 @@ import { FileAttachmentGroup as FileAttachmentGroupDefault } from '../Attachment
 import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
 import { Gallery as GalleryDefault } from '../Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../Attachment/Giphy';
+import { VideoThumbnail as VideoThumbnailDefault } from '../Attachment/VideoThumbnail';
 import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
 import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
 import { AutoCompleteSuggestionList as AutoCompleteSuggestionListDefault } from '../AutoCompleteInput/AutoCompleteSuggestionList';
@@ -287,6 +288,7 @@ export type ChannelPropsWithContext<
       | 'TypingIndicator'
       | 'TypingIndicatorContainer'
       | 'UrlPreview'
+      | 'VideoThumbnail'
     >
   > &
   Partial<
@@ -534,6 +536,7 @@ const ChannelWithContext = <
     TypingIndicatorContainer = TypingIndicatorContainerDefault,
     UploadProgressIndicator = UploadProgressIndicatorDefault,
     UrlPreview = CardDefault,
+    VideoThumbnail = VideoThumbnailDefault,
     watcherCount,
     watchers,
   } = props;
@@ -1738,6 +1741,7 @@ const ChannelWithContext = <
     TypingIndicatorContainer,
     updateMessage,
     UrlPreview,
+    VideoThumbnail,
   });
 
   const suggestionsContext = {

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -80,6 +80,7 @@ export const useCreateMessagesContext = <
   TypingIndicatorContainer,
   updateMessage,
   UrlPreview,
+  VideoThumbnail,
 }: MessagesContextValue<StreamChatGenerics> & {
   /**
    * To ensure we allow re-render, when channel is changed
@@ -166,6 +167,7 @@ export const useCreateMessagesContext = <
       TypingIndicatorContainer,
       updateMessage,
       UrlPreview,
+      VideoThumbnail,
     }),
     [
       additionalTouchablePropsLength,

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayName.test.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import type { DefaultStreamChatGenerics } from 'src/types/types';
+import type { Channel, ChannelMemberResponse, DefaultGenerics, StreamChat } from 'stream-chat';
+
+import {
+  GROUP_CHANNEL_MEMBERS_MOCK,
+  ONE_CHANNEL_MEMBER_MOCK,
+  ONE_MEMBER_WITH_EMPTY_USER_MOCK,
+} from '../../../../mock-builders/api/queryMembers';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import {
+  getChannelPreviewDisplayName,
+  useChannelPreviewDisplayName,
+} from '../useChannelPreviewDisplayName';
+
+describe('useChannelPreviewDisplayName', () => {
+  const clientUser = generateUser();
+  let chatClient: StreamChat<DefaultGenerics> | StreamChat<DefaultStreamChatGenerics>;
+  const CHARACTER_LENGTH = 15;
+
+  beforeEach(async () => {
+    chatClient = await getTestClientWithUser(clientUser);
+  });
+
+  it('should return a channel display name', async () => {
+    const channelName = 'okechukwu';
+
+    const TestComponent = () => {
+      const channelDisplayName = useChannelPreviewDisplayName(
+        {
+          data: { name: channelName },
+        } as unknown as Channel<DefaultGenerics>,
+        CHARACTER_LENGTH,
+      );
+      return <Text>{channelDisplayName}</Text>;
+    };
+
+    const { getByText } = render(<TestComponent />);
+
+    await waitFor(() => {
+      expect(getByText(channelName)).toBeTruthy();
+    });
+  });
+
+  it('should return the full channelName when channelName length is less than characterLength', () => {
+    const channelName = 'okechukwu';
+    const currentUserId = chatClient.userID;
+
+    const displayName = getChannelPreviewDisplayName({
+      channelName,
+      characterLimit: CHARACTER_LENGTH,
+      currentUserId,
+      members: ONE_CHANNEL_MEMBER_MOCK,
+    });
+
+    expect(displayName).toEqual(channelName);
+  });
+
+  it.each([
+    [CHARACTER_LENGTH, GROUP_CHANNEL_MEMBERS_MOCK, 'okechukwu nwagba', 'ben, nick, q,...+2'],
+    [CHARACTER_LENGTH, ONE_CHANNEL_MEMBER_MOCK, 'okechukwu nwagba', 'okechukwu nw...'],
+    [CHARACTER_LENGTH, ONE_MEMBER_WITH_EMPTY_USER_MOCK, 'okechukwu nwagba', 'Unknown User...'],
+  ])(
+    'getChannelPreviewDisplayName(%i, %p, %s) result in %s',
+    (characterLength, members, currentUserId, expected) => {
+      const displayName = getChannelPreviewDisplayName({
+        characterLimit: characterLength,
+        currentUserId,
+        members: members as unknown as Record<
+          string,
+          ChannelMemberResponse<DefaultStreamChatGenerics>
+        >,
+      });
+
+      expect(displayName).toEqual(expected);
+    },
+  );
+});

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.ts

@@ -1,48 +1,66 @@
 import { useEffect, useState } from 'react';
 
-import type { Channel } from 'stream-chat';
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { vw } from '../../../utils/utils';
 
-const maxCharacterLengthDefault = (vw(100) - 16) / 6;
+const DEFAULT_MAX_CHARACTER_LENGTH = (vw(100) - 16) / 6;
+
+const ELLIPSIS = `...`;
+
+const getMemberName = (member: ChannelMemberResponse) =>
+  member.user?.name || member.user?.id || 'Unknown User';
 
 export const getChannelPreviewDisplayName = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   channelName,
+  characterLimit,
   currentUserId,
-  maxCharacterLength,
   members,
 }: {
-  maxCharacterLength: number;
+  characterLimit: number;
   channelName?: string;
   currentUserId?: string;
   members?: Channel<StreamChatGenerics>['state']['members'];
-}) => {
+}): string => {
   if (channelName) return channelName;
 
   const channelMembers = Object.values(members || {});
+
   const otherMembers = channelMembers.filter((member) => member.user?.id !== currentUserId);
+  otherMembers.sort((prevUser, nextUser) =>
+    (prevUser?.user?.name ?? '')
+      .toLowerCase()
+      .localeCompare((nextUser?.user?.name ?? '').toLocaleUpperCase()),
+  );
+
+  const createChannelNameSuffix = (remainingNumberOfMembers: number) =>
+    remainingNumberOfMembers <= 1 ? `${ELLIPSIS}` : `,${ELLIPSIS}+${remainingNumberOfMembers}`;
 
-  const name = otherMembers.slice(0).reduce((returnString, currentMember, index, originalArray) => {
-    const returnStringLength = returnString.length;
-    const currentMemberName = currentMember.user?.name || currentMember.user?.id || 'Unknown User';
-    // a rough approximation of when the +Number shows up
-    if (returnStringLength + (currentMemberName.length + 2) < maxCharacterLength) {
-      if (returnStringLength) {
-        returnString += `, ${currentMemberName}`;
-      } else {
-        returnString = currentMemberName;
-      }
+  const name = otherMembers.reduce((result, currentMember, index, originalArray) => {
+    if (result.length >= characterLimit) {
+      return result;
+    }
+
+    const currentMemberName = getMemberName(currentMember);
+
+    const resultHasSpaceForCurrentMemberName =
+      result.length + (currentMemberName.length + ELLIPSIS.length) < characterLimit;
+    if (resultHasSpaceForCurrentMemberName) {
+      return result.length > 0 ? `${result}, ${currentMemberName}, ` : currentMemberName;
     } else {
-      const remainingMembers = originalArray.length - index;
-      returnString += `, +${remainingMembers}`;
-      originalArray.splice(1); // exit early
+      const remainingNumberOfMembers = originalArray.length - index;
+      const truncateLimit = characterLimit - (ELLIPSIS.length + result.length);
+      const tuncatedCurrentMemberName = `${currentMemberName.slice(0, truncateLimit)}`;
+
+      const channelNameSuffix = createChannelNameSuffix(remainingNumberOfMembers);
+
+      return `${result}${tuncatedCurrentMemberName}${channelNameSuffix}`;
     }
-    return returnString;
   }, '');
 
   return name;
@@ -56,17 +74,16 @@ export const useChannelPreviewDisplayName = <
 ) => {
   const { client } = useChatContext<StreamChatGenerics>();
 
-  const currentUserId = client.userID;
-  const members = channel?.state.members;
+  const currentUserId = client?.userID;
+  const members = channel?.state?.members;
   const numOfMembers = Object.keys(members || {}).length;
   const channelName = channel?.data?.name;
-  const maxCharacterLength = characterLength || maxCharacterLengthDefault;
-
+  const characterLimit = characterLength || DEFAULT_MAX_CHARACTER_LENGTH;
   const [displayName, setDisplayName] = useState(
     getChannelPreviewDisplayName({
       channelName,
+      characterLimit,
       currentUserId,
-      maxCharacterLength,
       members,
     }),
   );
@@ -75,12 +92,12 @@ export const useChannelPreviewDisplayName = <
     setDisplayName(
       getChannelPreviewDisplayName({
         channelName,
+        characterLimit,
         currentUserId,
-        maxCharacterLength,
         members,
       }),
     );
-  }, [channelName, currentUserId, maxCharacterLength, numOfMembers]);
+  }, [channelName, currentUserId, characterLimit, numOfMembers]);
 
   return displayName;
 };