stream-chat-react-native-core 8.13.7 → 9.0.0-beta.2

package/src/components/Attachment/VideoThumbnail.tsx

@@ -1,33 +1,15 @@
 import React from 'react';
-import { ImageBackground, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { ImageBackground, ImageStyle, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Play } from '../../icons';
+import { VideoPlayIndicator } from '../ui';
 
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
-    backgroundColor: 'black',
-    display: 'flex',
-    height: '100%',
     justifyContent: 'center',
-    width: '100%',
-  },
-  roundedView: {
-    alignItems: 'center',
-    borderRadius: 50,
-    display: 'flex',
-    elevation: 6,
-    height: 36,
-    justifyContent: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      height: 3,
-      width: 0,
-    },
-    shadowOpacity: 0.27,
-    shadowRadius: 4.65,
-    width: 36,
+    flex: 1,
+    overflow: 'hidden',
   },
 });
 
@@ -40,9 +22,8 @@ export type VideoThumbnailProps = {
 export const VideoThumbnail = (props: VideoThumbnailProps) => {
   const {
     theme: {
-      colors: { static_black, static_white },
-      messageSimple: {
-        videoThumbnail: { container, roundedView },
+      messageItemView: {
+        videoThumbnail: { container },
       },
     },
   } = useTheme();
@@ -54,9 +35,7 @@ export const VideoThumbnail = (props: VideoThumbnailProps) => {
       source={{ uri: thumb_url }}
       style={[styles.container, container, style]}
     >
-      <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
-        <Play fill={static_black} height={32} width={32} />
-      </View>
+      <VideoPlayIndicator size='md' />
     </ImageBackground>
   );
 };

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
 import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import {
-  generateAttachmentAction,
   generateAudioAttachment,
   generateFileAttachment,
   generateImageAttachment,
@@ -18,17 +17,24 @@ import { generateMessage } from '../../../mock-builders/generator/message';
 import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
 import { Attachment } from '../Attachment';
-import { AttachmentActions } from '../AttachmentActions';
+import { FilePreview as FilePreviewDefault } from '../FilePreview';
 
 jest.mock('../../../native.ts', () => ({
   isVideoPlayerAvailable: jest.fn(() => false),
+  isSoundPackageAvailable: jest.fn(() => false),
 }));
 
 const getAttachmentComponent = (props) => {
   const message = generateMessage();
   return (
     <ThemeProvider>
-      <MessagesProvider value={{ ImageLoadingFailedIndicator, ImageLoadingIndicator }}>
+      <MessagesProvider
+        value={{
+          ImageLoadingFailedIndicator,
+          ImageLoadingIndicator,
+          FilePreview: FilePreviewDefault,
+        }}
+      >
         <MessageProvider value={{ message }}>
           <Attachment {...props} />
         </MessageProvider>
@@ -36,11 +42,6 @@ const getAttachmentComponent = (props) => {
     </ThemeProvider>
   );
 };
-const getActionComponent = (props) => (
-  <ThemeProvider>
-    <AttachmentActions {...props} />;
-  </ThemeProvider>
-);
 
 describe('Attachment', () => {
   it('should render File component for "audio" type attachment', async () => {
@@ -90,40 +91,4 @@ describe('Attachment', () => {
       expect(getByTestId('gallery-container')).toBeTruthy();
     });
   });
-
-  it('should render AttachmentActions component if attachment has actions', async () => {
-    const attachment = generateImageAttachment({
-      actions: [generateAttachmentAction(), generateAttachmentAction()],
-      title_link: null,
-    });
-    const { getByTestId } = render(getAttachmentComponent({ actionHandler: () => {}, attachment }));
-
-    await waitFor(() => {
-      expect(getByTestId('attachment-actions')).toBeTruthy();
-    });
-  });
-
-  it('should call actionHandler on click', async () => {
-    const handleAction = jest.fn();
-    const action = generateAttachmentAction();
-    const { getByTestId } = render(
-      getActionComponent({
-        actions: [action],
-        handleAction,
-      }),
-    );
-
-    await waitFor(() => getByTestId(`attachment-actions-button-${action.name}`));
-
-    expect(getByTestId('attachment-actions')).toContainElement(
-      getByTestId(`attachment-actions-button-${action.name}`),
-    );
-
-    fireEvent.press(getByTestId(`attachment-actions-button-${action.name}`));
-    fireEvent.press(getByTestId(`attachment-actions-button-${action.name}`));
-
-    await waitFor(() => {
-      expect(handleAction).toHaveBeenCalledTimes(2);
-    });
-  });
 });

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -1,12 +1,6 @@
 import React from 'react';
 
-import {
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-  waitForElementToBeRemoved,
-} from '@testing-library/react-native';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 
@@ -26,9 +20,18 @@ import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../../MessageList/MessageList';
 
 describe('Gallery', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
   const user1 = generateUser();
 
-  const getComponent = async (attachments = []) => {
+  const getComponent = async (attachments = [], channelProps = {}) => {
     const chatClient = await getTestClientWithUser({ id: 'testID' });
 
     const mockedChannel = generateChannelResponse({
@@ -42,7 +45,7 @@ describe('Gallery', () => {
     return (
       <OverlayProvider>
         <Chat client={chatClient}>
-          <Channel channel={channel}>
+          <Channel channel={channel} {...channelProps}>
             <MessageList />
           </Channel>
         </Chat>
@@ -272,7 +275,41 @@ describe('Gallery', () => {
     fireEvent(screen.getByLabelText('Gallery Image'), 'error', {
       nativeEvent: { error: 'error loading image' },
     });
-    expect(screen.getByAccessibilityHint('image-loading-error')).toBeTruthy();
+    expect(screen.getByLabelText('Image Loading Error Indicator')).toBeTruthy();
+  });
+
+  it('should trigger long press on a failed image indicator', async () => {
+    const onLongPressMessage = jest.fn();
+    const image1 = generateImageAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+
+    const component = await getComponent([image1], { onLongPressMessage });
+    render(component);
+
+    await waitFor(() => {
+      expect(screen.queryAllByTestId('gallery-container').length).toBe(1);
+    });
+
+    fireEvent(screen.getByLabelText('Gallery Image'), 'error', {
+      nativeEvent: { error: 'error loading image' },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Image Loading Error Indicator')).toBeTruthy();
+    });
+
+    fireEvent(screen.getByLabelText('Image Loading Error Indicator'), 'longPress');
+
+    await waitFor(() => {
+      expect(onLongPressMessage).toHaveBeenCalledTimes(1);
+      expect(onLongPressMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          emitter: 'failed-image',
+        }),
+      );
+    });
   });
 
   it('should render a loading indicator and when successful render the image', async () => {
@@ -288,11 +325,15 @@ describe('Gallery', () => {
       expect(screen.queryAllByTestId('gallery-container').length).toBe(1);
     });
 
-    fireEvent(screen.getByLabelText('Gallery Image'), 'onLoadStart');
-    expect(screen.getByAccessibilityHint('image-loading')).toBeTruthy();
+    fireEvent(screen.getByLabelText('Gallery Image'), 'loadStart');
+    await waitFor(() => {
+      expect(screen.getByLabelText('Image Loading Indicator')).toBeTruthy();
+    });
 
-    fireEvent(screen.getByLabelText('Gallery Image'), 'onLoadFinish');
-    waitForElementToBeRemoved(() => screen.getByAccessibilityHint('image-loading'));
+    fireEvent(screen.getByLabelText('Gallery Image'), 'onLoad');
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Image Loading Indicator')).toBeNull();
+    });
     expect(screen.getByLabelText('Gallery Image')).toBeTruthy();
-  });
+  }, 20000);
 });

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -8,7 +8,6 @@ import {
   screen,
   userEvent,
   waitFor,
-  waitForElementToBeRemoved,
 } from '@testing-library/react-native';
 
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
@@ -37,12 +36,12 @@ const streami18n = new Streami18n({
 });
 
 describe('Giphy', () => {
-  const getAttachmentComponent = (props) => {
+  const getAttachmentComponent = (props, messageContextValue = {}) => {
     const message = generateMessage();
     return (
       <ThemeProvider>
         <MessagesProvider value={{ ImageLoadingFailedIndicator, ImageLoadingIndicator }}>
-          <MessageProvider value={{ message }}>
+          <MessageProvider value={{ message, ...messageContextValue }}>
             <Giphy {...props} />
           </MessageProvider>
         </MessagesProvider>
@@ -130,7 +129,7 @@ describe('Giphy', () => {
         expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
       };
       checkImageProps(
-        screen.getByTestId('giphy-attachment-image').props,
+        screen.getByLabelText('Giphy Attachment Image').props,
         attachment.giphy.fixed_height,
       );
     });
@@ -146,7 +145,7 @@ describe('Giphy', () => {
         expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
       };
       checkImageProps(
-        screen.getByTestId('giphy-attachment-image').props,
+        screen.getByLabelText('Giphy Attachment Image').props,
         attachment.giphy.original,
       );
     });
@@ -321,7 +320,38 @@ describe('Giphy', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByAccessibilityHint('image-loading-error')).toBeTruthy();
+      expect(screen.getByLabelText('Image Loading Error Indicator')).toBeTruthy();
+    });
+  });
+
+  it('should trigger long press on a failed giphy image indicator', async () => {
+    const onLongPress = jest.fn();
+
+    render(getAttachmentComponent({ attachment }, { onLongPress }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('giphy-attachment')).toBeTruthy();
+    });
+
+    act(() => {
+      fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'error');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Image Loading Error Indicator')).toBeTruthy();
+    });
+
+    act(() => {
+      fireEvent(screen.getByLabelText('Image Loading Error Indicator'), 'longPress');
+    });
+
+    await waitFor(() => {
+      expect(onLongPress).toHaveBeenCalledTimes(1);
+      expect(onLongPress).toHaveBeenCalledWith(
+        expect.objectContaining({
+          emitter: 'failed-image',
+        }),
+      );
     });
   });
 
@@ -335,23 +365,21 @@ describe('Giphy', () => {
         </Chat>
       </OverlayProvider>,
     );
-    await waitFor(() => {
-      expect(screen.getByAccessibilityHint('image-loading')).toBeTruthy();
-    });
-
     act(() => {
-      fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'onLoadStart');
+      fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'loadStart');
     });
 
     await waitFor(() => {
-      expect(screen.getByAccessibilityHint('image-loading')).toBeTruthy();
+      expect(screen.getByLabelText('Image Loading Indicator')).toBeTruthy();
     });
 
     act(() => {
-      fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'onLoad');
+      fireEvent(screen.getByLabelText('Giphy Attachment Image'), 'loadEnd');
     });
 
-    waitForElementToBeRemoved(() => screen.getByAccessibilityHint('image-loading'));
+    await waitFor(() => {
+      expect(screen.queryByLabelText('Image Loading Indicator')).toBeNull();
+    });
 
     await waitFor(() => {
       expect(screen.getByLabelText('Giphy Attachment Image')).toBeTruthy();

package/src/components/Attachment/__tests__/buildGallery.test.js

@@ -1,16 +1,14 @@
-import { PixelRatio } from 'react-native';
-
 import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
 import { buildGallery } from '../utils/buildGallery/buildGallery';
 
 describe('buildGallery', () => {
   const defaultSizeConfig = {
-    gridHeight: 100,
-    gridWidth: 200,
-    maxHeight: 300,
-    maxWidth: 350,
-    minHeight: 10,
-    minWidth: 20,
+    gridHeight: 192,
+    gridWidth: 256,
+    maxHeight: 192,
+    maxWidth: 256,
+    minHeight: 120,
+    minWidth: 120,
   };
 
   it('gallery size should not exceed max sizes provided by size config', () => {
@@ -41,8 +39,7 @@ describe('buildGallery', () => {
         expect(width).toBeLessThanOrEqual(defaultSizeConfig.maxWidth);
         expect(width).toBeGreaterThanOrEqual(defaultSizeConfig.minWidth);
 
-        expect(thumbnailGrid[0][0].height).toBeLessThanOrEqual(height);
-        expect(thumbnailGrid[0][0].width).toBeLessThanOrEqual(width);
+        expect(thumbnailGrid[0][0].flex).toBe(1);
       }
     });
   });
@@ -107,9 +104,8 @@ describe('buildGallery', () => {
       sizeConfig: defaultSizeConfig,
     });
     const t1 = tg1[0][0];
-    expect(t1.url.includes(`&h=${PixelRatio.getPixelSizeForLayoutSize(t1.height)}`)).toBe(true);
-    expect(t1.url.includes(`&w=${PixelRatio.getPixelSizeForLayoutSize(t1.width)}`)).toBe(true);
     expect(t1.url.includes('&resize=clip')).toBe(true);
+    expect(t1.flex).toBe(1);
 
     const smallImage = generateImageAttachment({
       image_url:

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

@@ -84,6 +84,8 @@ export function buildGalleryOfSingleImage({
   const thumbnail = buildThumbnail({
     image,
     resizableCDNHosts,
+    flex: 1,
+    resizeMode: 'cover',
     ...container,
   });
 

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

@@ -41,6 +41,7 @@ export function buildGalleryOfTwoImages({
     });
   }
 
+  // Both the images are portrait
   if (!isLandscape1 && !isLandscape2) {
     /**
      * -----------
@@ -60,7 +61,7 @@ export function buildGalleryOfTwoImages({
   }
 
   return buildThumbnailGrid({
-    grid: [[2, 1]],
+    grid: [[1, 1]],
     images: isLandscape1 ? images : images.reverse(),
     invertedDirections: true,
     resizableCDNHosts,

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

@@ -14,6 +14,7 @@ export type BuildThumbnailProps = Pick<ChatConfigContextValue, 'resizableCDNHost
   image: Attachment;
   width: number;
   resizeMode?: ImageResizeMode;
+  flex?: number;
 };
 
 export function buildThumbnail({
@@ -22,6 +23,7 @@ export function buildThumbnail({
   resizableCDNHosts,
   resizeMode,
   width,
+  flex,
 }: BuildThumbnailProps): Thumbnail {
   const { original_height: originalImageHeight, original_width: originalImageWidth } = image;
 
@@ -33,7 +35,7 @@ export function buildThumbnail({
   const imageUrl = getUrlOfImageAttachment(image) as string;
 
   return {
-    height,
+    flex,
     resizeMode: resizeMode
       ? resizeMode
       : ((image.original_height && image.original_width ? 'contain' : 'cover') as ImageResizeMode),
@@ -47,6 +49,5 @@ export function buildThumbnail({
           width,
         })
       : imageUrl,
-    width,
   };
 }

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

@@ -164,6 +164,7 @@ export function buildThumbnailGrid({
 
       const currentImage = images[imageIndex];
       const thumbnail = buildThumbnail({
+        flex: flexValue,
         height: tHeight,
         image: currentImage,
         resizableCDNHosts,

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

@@ -1,13 +1,12 @@
 import type { ImageResizeMode } from 'react-native';
 
 export type Thumbnail = {
-  height: number;
   resizeMode: ImageResizeMode;
   url: string;
-  width: number;
   id?: string;
   thumb_url?: string;
   type?: string;
+  flex?: number;
 };
 
 export type GallerySizeConfig = {

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

@@ -1,6 +1,13 @@
 import type { GallerySizeConfig } from './buildGallery/types';
 
-import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import { primitives } from '../../../theme';
+
+export type GalleryImageBorderRadius = {
+  borderBottomLeftRadius: number;
+  borderBottomRightRadius: number;
+  borderTopLeftRadius: number;
+  borderTopRightRadius: number;
+};
 
 type Params = {
   colIndex: number;
@@ -8,30 +15,23 @@ type Params = {
   numOfRows: number;
   rowIndex: number;
   sizeConfig: GallerySizeConfig;
-  hasThreadReplies?: boolean;
   height?: number;
   invertedDirections?: boolean;
-  messageText?: string;
-  threadList?: boolean;
   width?: number;
-} & Pick<MessageContextValue, 'groupStyles' | 'alignment'>;
+  messageHasOnlyOneMedia?: boolean;
+};
 
 export function getGalleryImageBorderRadius({
-  alignment,
   colIndex,
-  groupStyles,
-  hasThreadReplies,
   height,
   invertedDirections,
-  messageText,
   numOfColumns,
   numOfRows,
   rowIndex,
   sizeConfig,
-  threadList,
   width,
+  messageHasOnlyOneMedia = false,
 }: Params) {
-  const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
   const isSingleImage = numOfColumns === 1 && numOfRows === 1;
   const isImageSmallerThanMinContainerSize =
     isSingleImage &&
@@ -46,26 +46,20 @@ export function getGalleryImageBorderRadius({
   const topRightEdgeExposed =
     (!invertedDirections && colIndex === numOfColumns - 1 && rowIndex === 0) ||
     (invertedDirections && colIndex === 0 && rowIndex === numOfRows - 1);
-  const bottomRightEdgeExposed = colIndex === numOfColumns && rowIndex === numOfRows - 1;
+  const bottomRightEdgeExposed = colIndex === numOfColumns - 1 && rowIndex === numOfRows - 1;
 
   return {
-    borderBottomLeftRadius:
-      !isImageSmallerThanMinContainerSize &&
-      bottomLeftEdgeExposed &&
-      !messageText &&
-      ((groupStyle !== 'left_bottom' && groupStyle !== 'left_single') ||
-        (hasThreadReplies && !threadList))
-        ? 14
-        : 0,
-    borderBottomRightRadius:
-      !isImageSmallerThanMinContainerSize &&
-      bottomRightEdgeExposed &&
-      !messageText &&
-      ((groupStyle !== 'right_bottom' && groupStyle !== 'right_single') ||
-        (hasThreadReplies && !threadList))
-        ? 14
-        : 0,
-    borderTopLeftRadius: !isImageSmallerThanMinContainerSize && topLeftEdgeExposed ? 14 : 0,
-    borderTopRightRadius: !isImageSmallerThanMinContainerSize && topRightEdgeExposed ? 14 : 0,
+    borderTopLeftRadius: !isImageSmallerThanMinContainerSize && topLeftEdgeExposed ? 12 : 8,
+    borderTopRightRadius: !isImageSmallerThanMinContainerSize && topRightEdgeExposed ? 12 : 8,
+    borderBottomLeftRadius: messageHasOnlyOneMedia
+      ? primitives.radiusNone
+      : !isImageSmallerThanMinContainerSize && bottomLeftEdgeExposed
+        ? primitives.radiusLg
+        : primitives.radiusMd,
+    borderBottomRightRadius: messageHasOnlyOneMedia
+      ? primitives.radiusNone
+      : !isImageSmallerThanMinContainerSize && bottomRightEdgeExposed
+        ? primitives.radiusLg
+        : primitives.radiusMd,
   };
 }