stream-chat-react-native-core 4.9.0-beta.3 → 4.10.0-beta.1

package/src/components/Attachment/Gallery.tsx

@@ -1,10 +1,13 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import { GalleryImage } from './GallaryImage';
 import { useLoadingImage } from './hooks/useLoadingImage';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
+import type { Thumbnail } from './utils/buildGallery/types';
 import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius';
 
 import { openUrlSafely } from './utils/openUrlSafely';
@@ -135,26 +138,18 @@ const GalleryWithContext = <
     VideoThumbnail,
   } = props;
 
-  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
-    useLoadingImage();
-
   const {
     theme: {
-      colors: { overlay },
       messageSimple: {
         gallery: {
           galleryContainer,
           galleryItemColumn,
           gridHeight,
           gridWidth,
-          image,
-          imageContainer,
           maxHeight,
           maxWidth,
           minHeight,
           minWidth,
-          moreImagesContainer,
-          moreImagesText,
         },
       },
     },
@@ -180,8 +175,6 @@ const GalleryWithContext = <
   );
 
   if (!imagesAndVideos?.length) return null;
-  const messageText = message?.text;
-  const messageId = message?.id;
   const numOfColumns = thumbnailGrid.length;
 
   return (
@@ -212,31 +205,7 @@ const GalleryWithContext = <
             ]}
             testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
           >
-            {rows.map(({ height, resizeMode, type, url, width }, rowIndex) => {
-              const openImageViewer = () => {
-                if (!legacyImageViewerSwipeBehaviour && message) {
-                  // Added if-else to keep the logic readable, instead of DRY.
-                  // if - legacyImageViewerSwipeBehaviour is disabled
-                  // else - legacyImageViewerSwipeBehaviour is enabled
-                  setImages([message]);
-                  setImage({ messageId: message.id, url });
-                  setOverlay('gallery');
-                } else if (legacyImageViewerSwipeBehaviour) {
-                  setImage({ messageId: message?.id, url });
-                  setOverlay('gallery');
-                }
-              };
-
-              const defaultOnPress = () => {
-                if (type === 'video' && !isVideoPackageAvailable()) {
-                  // This condition is kinda unreachable, since we render videos as file attachment if the video
-                  // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
-                  openUrlSafely(url);
-                } else {
-                  openImageViewer();
-                }
-              };
-
+            {rows.map((thumbnail, rowIndex) => {
               const borderRadius = getGalleryImageBorderRadius({
                 alignment,
                 colIndex,
@@ -244,7 +213,7 @@ const GalleryWithContext = <
                 hasThreadReplies,
                 height,
                 invertedDirections,
-                messageText,
+                messageText: message?.text,
                 numOfColumns,
                 numOfRows,
                 rowIndex,
@@ -253,111 +222,35 @@ const GalleryWithContext = <
                 width,
               });
 
+              if (message === undefined) {
+                return null;
+              }
+
               return (
-                <TouchableOpacity
-                  activeOpacity={0.8}
-                  disabled={preventPress}
-                  key={`gallery-item-${messageId}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
-                  onLongPress={(event) => {
-                    if (onLongPress) {
-                      onLongPress({
-                        emitter: 'gallery',
-                        event,
-                      });
-                    }
-                  }}
-                  onPress={(event) => {
-                    if (onPress) {
-                      onPress({
-                        defaultHandler: defaultOnPress,
-                        emitter: 'gallery',
-                        event,
-                      });
-                    }
-                  }}
-                  onPressIn={(event) => {
-                    if (onPressIn) {
-                      onPressIn({
-                        defaultHandler: defaultOnPress,
-                        emitter: 'gallery',
-                        event,
-                      });
-                    }
-                  }}
-                  style={[
-                    styles.imageContainer,
-                    {
-                      height,
-                      width,
-                    },
-                    imageContainer,
-                  ]}
-                  testID={`gallery-${
-                    invertedDirections ? 'row' : 'column'
-                  }-${colIndex}-item-${rowIndex}`}
-                  {...additionalTouchableProps}
-                >
-                  {type === 'video' ? (
-                    <VideoThumbnail
-                      style={[
-                        borderRadius,
-                        image,
-                        {
-                          height: height - 1,
-                          width: width - 1,
-                        },
-                      ]}
-                    />
-                  ) : (
-                    <View style={styles.imageContainerStyle}>
-                      <MemoizedGalleryImage
-                        onError={(error) => {
-                          console.warn(error);
-                          setLoadingImage(false);
-                          setLoadingImageError(true);
-                        }}
-                        onLoadEnd={() => setLoadingImage(false)}
-                        onLoadStart={() => setLoadingImage(true)}
-                        resizeMode={resizeMode}
-                        style={[
-                          borderRadius,
-                          image,
-                          {
-                            height: height - 1,
-                            width: width - 1,
-                          },
-                        ]}
-                        uri={url}
-                      />
-                      {isLoadingImage && (
-                        <View style={{ position: 'absolute' }}>
-                          <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
-                        </View>
-                      )}
-                      {isLoadingImageError && (
-                        <View style={{ position: 'absolute' }}>
-                          <ImageLoadingFailedIndicator style={styles.imageLoadingIndicatorStyle} />
-                        </View>
-                      )}
-                    </View>
-                  )}
-                  {colIndex === numOfColumns - 1 &&
-                  rowIndex === numOfRows - 1 &&
-                  imagesAndVideos.length > 4 ? (
-                    <View
-                      style={[
-                        StyleSheet.absoluteFillObject,
-                        styles.moreImagesContainer,
-                        { backgroundColor: overlay },
-                        moreImagesContainer,
-                      ]}
-                    >
-                      <Text style={[styles.moreImagesText, moreImagesText]}>
-                        {`+${imagesAndVideos.length - 4}`}
-                      </Text>
-                    </View>
-                  ) : null}
-                </TouchableOpacity>
+                <GalleryThumbnail
+                  additionalTouchableProps={additionalTouchableProps}
+                  borderRadius={borderRadius}
+                  colIndex={colIndex}
+                  ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
+                  ImageLoadingIndicator={ImageLoadingIndicator}
+                  imagesAndVideos={imagesAndVideos}
+                  invertedDirections={invertedDirections || false}
+                  key={rowIndex}
+                  legacyImageViewerSwipeBehaviour={legacyImageViewerSwipeBehaviour}
+                  message={message}
+                  numOfColumns={numOfColumns}
+                  numOfRows={numOfRows}
+                  onLongPress={onLongPress}
+                  onPress={onPress}
+                  onPressIn={onPressIn}
+                  preventPress={preventPress}
+                  rowIndex={rowIndex}
+                  setImage={setImage}
+                  setImages={setImages}
+                  setOverlay={setOverlay}
+                  thumbnail={thumbnail}
+                  VideoThumbnail={VideoThumbnail}
+                />
               );
             })}
           </View>
@@ -367,6 +260,204 @@ const GalleryWithContext = <
   );
 };
 
+type GalleryThumbnailProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  borderRadius: {
+    borderBottomLeftRadius: number;
+    borderBottomRightRadius: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+  };
+  colIndex: number;
+  imagesAndVideos: Attachment<StreamChatGenerics>[];
+  invertedDirections: boolean;
+  message: MessageType<StreamChatGenerics>;
+  numOfColumns: number;
+  numOfRows: number;
+  rowIndex: number;
+  thumbnail: Thumbnail;
+} & Pick<
+  MessagesContextValue<StreamChatGenerics>,
+  | 'additionalTouchableProps'
+  | 'legacyImageViewerSwipeBehaviour'
+  | 'VideoThumbnail'
+  | 'ImageLoadingIndicator'
+  | 'ImageLoadingFailedIndicator'
+> &
+  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+  Pick<
+    MessageContextValue<StreamChatGenerics>,
+    'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
+  > &
+  Pick<OverlayContextValue, 'setOverlay'>;
+
+const GalleryThumbnail = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  additionalTouchableProps,
+  borderRadius,
+  colIndex,
+  ImageLoadingFailedIndicator,
+  ImageLoadingIndicator,
+  imagesAndVideos,
+  invertedDirections,
+  legacyImageViewerSwipeBehaviour,
+  message,
+  numOfColumns,
+  numOfRows,
+  onLongPress,
+  onPress,
+  onPressIn,
+  preventPress,
+  rowIndex,
+  setImage,
+  setImages,
+  setOverlay,
+  thumbnail,
+  VideoThumbnail,
+}: GalleryThumbnailProps<StreamChatGenerics>) => {
+  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
+    useLoadingImage();
+
+  const {
+    theme: {
+      colors: { overlay },
+      messageSimple: {
+        gallery: { image, imageContainer, moreImagesContainer, moreImagesText },
+      },
+    },
+  } = useTheme();
+
+  const openImageViewer = () => {
+    if (!legacyImageViewerSwipeBehaviour && message) {
+      // Added if-else to keep the logic readable, instead of DRY.
+      // if - legacyImageViewerSwipeBehaviour is disabled
+      // else - legacyImageViewerSwipeBehaviour is enabled
+      setImages([message]);
+      setImage({ messageId: message.id, url: thumbnail.url });
+      setOverlay('gallery');
+    } else if (legacyImageViewerSwipeBehaviour) {
+      setImage({ messageId: message?.id, url: thumbnail.url });
+      setOverlay('gallery');
+    }
+  };
+
+  const defaultOnPress = () => {
+    if (thumbnail.type === 'video' && !isVideoPackageAvailable()) {
+      // This condition is kinda unreachable, since we render videos as file attachment if the video
+      // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
+      openUrlSafely(thumbnail.url);
+    } else {
+      openImageViewer();
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      disabled={preventPress}
+      key={`gallery-item-${message.id}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
+      onLongPress={(event) => {
+        if (onLongPress) {
+          onLongPress({
+            emitter: 'gallery',
+            event,
+          });
+        }
+      }}
+      onPress={(event) => {
+        if (onPress) {
+          onPress({
+            defaultHandler: defaultOnPress,
+            emitter: 'gallery',
+            event,
+          });
+        }
+      }}
+      onPressIn={(event) => {
+        if (onPressIn) {
+          onPressIn({
+            defaultHandler: defaultOnPress,
+            emitter: 'gallery',
+            event,
+          });
+        }
+      }}
+      style={[
+        styles.imageContainer,
+        {
+          height: thumbnail.height,
+          width: thumbnail.width,
+        },
+        imageContainer,
+      ]}
+      testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}-item-${rowIndex}`}
+      {...additionalTouchableProps}
+    >
+      {thumbnail.type === 'video' ? (
+        <VideoThumbnail
+          style={[
+            borderRadius,
+            image,
+            {
+              height: thumbnail.height - 1,
+              width: thumbnail.width - 1,
+            },
+          ]}
+          thumb_url={thumbnail.thumb_url}
+        />
+      ) : (
+        <View style={styles.imageContainerStyle}>
+          <MemoizedGalleryImage
+            onError={(error) => {
+              console.warn(error);
+              setLoadingImage(false);
+              setLoadingImageError(true);
+            }}
+            onLoadEnd={() => setLoadingImage(false)}
+            onLoadStart={() => setLoadingImage(true)}
+            resizeMode={thumbnail.resizeMode}
+            style={[
+              borderRadius,
+              image,
+              {
+                height: thumbnail.height - 1,
+                width: thumbnail.width - 1,
+              },
+            ]}
+            uri={thumbnail.url}
+          />
+          {isLoadingImage && (
+            <View style={{ position: 'absolute' }}>
+              <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
+            </View>
+          )}
+          {isLoadingImageError && (
+            <View style={{ position: 'absolute' }}>
+              <ImageLoadingFailedIndicator style={styles.imageLoadingIndicatorStyle} />
+            </View>
+          )}
+        </View>
+      )}
+      {colIndex === numOfColumns - 1 && rowIndex === numOfRows - 1 && imagesAndVideos.length > 4 ? (
+        <View
+          style={[
+            StyleSheet.absoluteFillObject,
+            styles.moreImagesContainer,
+            { backgroundColor: overlay },
+            moreImagesContainer,
+          ]}
+        >
+          <Text style={[styles.moreImagesText, moreImagesText]}>
+            {`+${imagesAndVideos.length - 4}`}
+          </Text>
+        </View>
+      ) : null}
+    </TouchableOpacity>
+  );
+};
+
 const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   prevProps: GalleryPropsWithContext<StreamChatGenerics>,
   nextProps: GalleryPropsWithContext<StreamChatGenerics>,

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

@@ -10,6 +10,7 @@ import {
 } from '../../contexts/channelsContext/ChannelsContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 
+import { useTranslatedMessage } from '../../hooks/useTranslatedMessage';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type ChannelPreviewPropsWithContext<
@@ -38,10 +39,15 @@ const ChannelPreviewWithContext = <
     | MessageResponse<StreamChatGenerics>
     | undefined
   >(channel.state.messages[channel.state.messages.length - 1]);
+
+  const translatedLastMessage = useTranslatedMessage<StreamChatGenerics>(
+    lastMessage || ({} as MessageResponse<StreamChatGenerics>),
+  );
+
   const [forceUpdate, setForceUpdate] = useState(0);
   const [unread, setUnread] = useState(channel.countUnread());
 
-  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);
+  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, translatedLastMessage);
 
   const channelLastMessage = channel.lastMessage();
   const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;