stream-chat-react-native-core 4.11.1-beta.4 → 4.12.0-beta.3

package/src/components/Channel/Channel.tsx

@@ -76,6 +76,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { generateRandomId, MessageStatusTypes, ReactionData } from '../../utils/utils';
 import { Attachment as AttachmentDefault } from '../Attachment/Attachment';
 import { AttachmentActions as AttachmentActionsDefault } from '../Attachment/AttachmentActions';
+import { AudioAttachment as AudioAttachmentDefault } from '../Attachment/AudioAttachment';
 import { Card as CardDefault } from '../Attachment/Card';
 import { FileAttachment as FileAttachmentDefault } from '../Attachment/FileAttachment';
 import { FileAttachmentGroup as FileAttachmentGroupDefault } from '../Attachment/FileAttachmentGroup';
@@ -398,6 +399,7 @@ const ChannelWithContext = <
     AttachButton = AttachButtonDefault,
     Attachment = AttachmentDefault,
     AttachmentActions = AttachmentActionsDefault,
+    AudioAttachment = AudioAttachmentDefault,
     AutoCompleteSuggestionHeader = AutoCompleteSuggestionHeaderDefault,
     AutoCompleteSuggestionItem = AutoCompleteSuggestionItemDefault,
     AutoCompleteSuggestionList = AutoCompleteSuggestionListDefault,
@@ -1618,6 +1620,7 @@ const ChannelWithContext = <
   const inputMessageInputContext = useCreateInputMessageInputContext<StreamChatGenerics>({
     additionalTextInputProps,
     AttachButton,
+    AudioAttachment,
     autoCompleteSuggestionsLimit,
     autoCompleteTriggerSettings,
     channelId,

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

@@ -8,6 +8,7 @@ export const useCreateInputMessageInputContext = <
 >({
   additionalTextInputProps,
   AttachButton,
+  AudioAttachment,
   autoCompleteSuggestionsLimit,
   autoCompleteTriggerSettings,
   channelId,
@@ -64,6 +65,7 @@ export const useCreateInputMessageInputContext = <
     () => ({
       additionalTextInputProps,
       AttachButton,
+      AudioAttachment,
       autoCompleteSuggestionsLimit,
       autoCompleteTriggerSettings,
       clearEditingState,

package/src/components/ImageGallery/ImageGallery.tsx

@@ -471,17 +471,21 @@ export const ImageGallery = <
     }
   };
 
-  const handlePlayPause = () => {
-    // React Native Video for RN CLI has seek as an API to move to a particular location in the video
-    if (progress === 1 && videoRef.current && videoRef.current.seek) {
-      videoRef.current.seek(0);
-    }
-    // Expo AV for Expo has replayAsync as an API to move to a starting of the video
-    if (progress === 1 && videoRef.current && videoRef.current.replayAsync) {
-      videoRef.current.replayAsync();
-    }
+  const handlePlayPause = (status?: boolean) => {
+    if (status === undefined) {
+      // React Native Video for RN CLI has seek as an API to move to a particular location in the video
+      if (progress === 1 && videoRef.current && videoRef.current.seek) {
+        videoRef.current.seek(0);
+      }
+      // Expo AV for Expo has replayAsync as an API to move to a starting of the video
+      if (progress === 1 && videoRef.current && videoRef.current.replayAsync) {
+        videoRef.current.replayAsync();
+      }
 
-    setPaused((state) => !state);
+      setPaused((state) => !state);
+    } else {
+      setPaused(status);
+    }
   };
 
   const onProgressDrag = (progress: number) => {
@@ -497,7 +501,11 @@ export const ImageGallery = <
   };
 
   return (
-    <Animated.View pointerEvents={'auto'} style={[StyleSheet.absoluteFillObject, showScreenStyle]}>
+    <Animated.View
+      accessibilityLabel='Image Gallery'
+      pointerEvents={'auto'}
+      style={[StyleSheet.absoluteFillObject, showScreenStyle]}
+    >
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
       <TapGestureHandler
         minPointers={1}
@@ -577,6 +585,7 @@ export const ImageGallery = <
                             />
                           ) : (
                             <AnimatedGalleryImage
+                              accessibilityLabel={'Image Item'}
                               index={i}
                               key={`${photo.uri}-${i}`}
                               offsetScale={offsetScale}
@@ -615,6 +624,7 @@ export const ImageGallery = <
         {...imageGalleryCustomComponents?.header}
       />
       <ImageGalleryFooter<StreamChatGenerics>
+        accessibilityLabel={'Image Gallery Footer'}
         duration={duration}
         onPlayPause={handlePlayPause}
         onProgressDrag={onProgressDrag}

package/src/components/ImageGallery/__tests__/AnimatedVideoGallery.test.tsx

@@ -0,0 +1,241 @@
+import React from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+import { act } from 'react-test-renderer';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { AnimatedGalleryVideo, AnimatedGalleryVideoType } from '../components/AnimatedGalleryVideo';
+
+jest.mock('../../../native.ts', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  return {
+    isVideoPackageAvailable: jest.fn(() => true),
+    NetInfo: {
+      addEventListener: jest.fn(),
+    },
+    Video: View,
+  };
+});
+
+const getComponent = (props: Partial<AnimatedGalleryVideoType>) => (
+  <ThemeProvider theme={defaultTheme}>
+    <AnimatedGalleryVideo {...(props as unknown as AnimatedGalleryVideoType)} />
+  </ThemeProvider>
+);
+
+describe('ImageGallery', () => {
+  it('render image gallery component with video rendered', () => {
+    const { queryAllByA11yLabel } = render(
+      getComponent({
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+    expect(queryAllByA11yLabel('Image Gallery Video')).toHaveLength(1);
+  });
+
+  it('render empty view when shouldRender is false', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: false,
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    expect(getByA11yLabel('Empty View Image Gallery')).not.toBeUndefined();
+  });
+
+  it('trigger onEnd and onProgress events handlers of Video component', () => {
+    const handleEndMock = jest.fn();
+    const handleProgressMock = jest.fn();
+
+    const { getByTestId } = render(
+      getComponent({
+        handleEnd: handleEndMock,
+        handleProgress: handleProgressMock,
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    const videoComponent = getByTestId('video-player');
+
+    act(() => {
+      fireEvent(videoComponent, 'onEnd');
+      fireEvent(videoComponent, 'onProgress');
+    });
+
+    expect(handleEndMock).toHaveBeenCalled();
+    expect(handleProgressMock).toHaveBeenCalled();
+  });
+
+  it('trigger onLoadStart event handler of Video component', () => {
+    const { getByTestId, queryByA11yLabel } = render(
+      getComponent({
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    const videoComponent = getByTestId('video-player');
+    const spinnerComponent = queryByA11yLabel('Spinner');
+
+    act(() => {
+      fireEvent(videoComponent, 'onLoadStart');
+    });
+    expect(spinnerComponent?.props.style[1].opacity).toBe(1);
+  });
+
+  it('trigger onLoad event handler of Video component', () => {
+    const handleLoadMock = jest.fn();
+
+    const { getByTestId, queryByA11yLabel } = render(
+      getComponent({
+        handleLoad: handleLoadMock,
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    const videoComponent = getByTestId('video-player');
+    const spinnerComponent = queryByA11yLabel('Spinner');
+
+    act(() => {
+      fireEvent(videoComponent, 'onLoad');
+    });
+
+    expect(handleLoadMock).toHaveBeenCalled();
+    expect(spinnerComponent?.props.style[1].opacity).toBe(0);
+  });
+
+  it('trigger onBuffer event handler of Video component', () => {
+    const { getByTestId, queryByA11yLabel } = render(
+      getComponent({
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    const videoComponent = getByTestId('video-player');
+    const spinnerComponent = queryByA11yLabel('Spinner');
+
+    act(() => {
+      fireEvent(videoComponent, 'onBuffer', {
+        isBuffering: false,
+      });
+    });
+
+    expect(spinnerComponent?.props.style[1].opacity).toBe(0);
+
+    act(() => {
+      fireEvent(videoComponent, 'onBuffer', {
+        isBuffering: true,
+      });
+    });
+
+    expect(spinnerComponent?.props.style[1].opacity).toBe(1);
+  });
+
+  it('trigger onPlaybackStatusUpdate event handler of Video component', () => {
+    jest.spyOn(console, 'error');
+    const handleLoadMock = jest.fn();
+    const handleProgressMock = jest.fn();
+    const handleEndMock = jest.fn();
+
+    const { getByTestId, queryByA11yLabel } = render(
+      getComponent({
+        handleEnd: handleEndMock,
+        handleLoad: handleLoadMock,
+        handleProgress: handleProgressMock,
+        offsetScale: { value: 1 } as SharedValue<number>,
+        scale: { value: 1 } as SharedValue<number>,
+        shouldRender: true,
+        source: {
+          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+        },
+        translateX: { value: 1 } as SharedValue<number>,
+      }),
+    );
+
+    const videoComponent = getByTestId('video-player');
+    const spinnerComponent = queryByA11yLabel('Spinner');
+
+    act(() => {
+      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
+        error: true,
+        isLoaded: false,
+      });
+    });
+
+    expect(spinnerComponent?.props.style[1].opacity).toBe(1);
+    expect(console.error).toHaveBeenCalled();
+
+    act(() => {
+      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
+        isLoaded: true,
+      });
+    });
+
+    expect(spinnerComponent?.props.style[1].opacity).toBe(0);
+    expect(handleLoadMock).toHaveBeenCalled();
+
+    act(() => {
+      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
+        isLoaded: true,
+        isPlaying: true,
+      });
+    });
+
+    expect(handleProgressMock).toHaveBeenCalled();
+
+    act(() => {
+      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
+        isBuffering: true,
+        isLoaded: true,
+      });
+    });
+
+    expect(spinnerComponent?.props.style[1].opacity).toBe(1);
+
+    act(() => {
+      fireEvent(videoComponent, 'onPlaybackStatusUpdate', {
+        didJustFinish: true,
+        isLoaded: true,
+        isLooping: false,
+      });
+    });
+
+    expect(handleEndMock).toHaveBeenCalled();
+  });
+});

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+import { act } from 'react-test-renderer';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import {
+  ImageGalleryContext,
+  ImageGalleryContextValue,
+} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import {
+  generateGiphyAttachment,
+  generateImageAttachment,
+  generateVideoAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { MessageType } from '../../MessageList/hooks/useMessageList';
+import { ImageGallery } from '../ImageGallery';
+
+jest.mock('../../../native.ts', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  return {
+    isVideoPackageAvailable: jest.fn(() => true),
+    NetInfo: {
+      addEventListener: jest.fn(),
+    },
+    Video: View,
+  };
+});
+
+const getComponent = (props: Partial<ImageGalleryContextValue>) => (
+  <OverlayProvider>
+    <ImageGalleryContext.Provider value={{ ...(props as unknown as ImageGalleryContextValue) }}>
+      <ThemeProvider theme={defaultTheme}>
+        <ImageGallery overlayOpacity={{ value: 1 } as SharedValue<number>} />
+      </ThemeProvider>
+    </ImageGalleryContext.Provider>
+  </OverlayProvider>
+);
+
+describe('ImageGallery', () => {
+  it('render image gallery component', () => {
+    const { queryAllByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [
+              generateImageAttachment(),
+              generateGiphyAttachment(),
+              generateVideoAttachment({ type: 'video' }),
+            ],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+    expect(queryAllByA11yLabel('Image Item')).toHaveLength(2);
+    expect(queryAllByA11yLabel('Image Gallery Video')).toHaveLength(1);
+  });
+
+  it('handle handleLoad function when video item present and payload duration is available', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [generateVideoAttachment({ type: 'video' })],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+
+    const videoItemComponent = getByA11yLabel('Image Gallery Video');
+
+    act(() => {
+      fireEvent(videoItemComponent, 'handleLoad', {
+        duration: 10,
+      });
+    });
+
+    const videoDurationComponent = getByA11yLabel('Video Duration');
+    expect(videoDurationComponent.children[0]).toBe('00:10');
+  });
+
+  it('handle handleLoad function when video item present and payload duration is undefined', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [generateVideoAttachment({ type: 'video' })],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+
+    const videoItemComponent = getByA11yLabel('Image Gallery Video');
+
+    act(() => {
+      fireEvent(videoItemComponent, 'handleLoad', {
+        duration: undefined,
+      });
+    });
+
+    const videoDurationComponent = getByA11yLabel('Video Duration');
+    expect(videoDurationComponent.children[0]).toBe('00:00');
+  });
+
+  it('handle handleProgress function when video item present and payload is well defined', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [generateVideoAttachment({ type: 'video' })],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+
+    const videoItemComponent = getByA11yLabel('Image Gallery Video');
+
+    act(() => {
+      fireEvent(videoItemComponent, 'handleLoad', {
+        duration: 10,
+      });
+      fireEvent(videoItemComponent, 'handleProgress', {
+        currentTime: 3,
+        seekableDuration: 10,
+      });
+    });
+
+    const progressDurationComponent = getByA11yLabel('Progress Duration');
+
+    expect(progressDurationComponent.children[0]).toBe('00:03');
+  });
+
+  it('handle handleProgress function when video item present and payload is not defined', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [generateVideoAttachment({ type: 'video' })],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+
+    const videoItemComponent = getByA11yLabel('Image Gallery Video');
+
+    act(() => {
+      fireEvent(videoItemComponent, 'handleLoad', {
+        duration: 10,
+      });
+      fireEvent(videoItemComponent, 'handleProgress', {
+        currentTime: undefined,
+        seekableDuration: undefined,
+      });
+    });
+
+    const progressDurationComponent = getByA11yLabel('Progress Duration');
+
+    expect(progressDurationComponent.children[0]).toBe('00:00');
+  });
+
+  it('handle handleEnd function when video item present', () => {
+    const { getByA11yLabel } = render(
+      getComponent({
+        images: [
+          generateMessage({
+            attachments: [generateVideoAttachment({ type: 'video' })],
+          }),
+        ] as unknown as MessageType<DefaultStreamChatGenerics>[],
+      }),
+    );
+
+    const videoItemComponent = getByA11yLabel('Image Gallery Video');
+
+    act(() => {
+      fireEvent(videoItemComponent, 'handleLoad', {
+        duration: 10,
+      });
+      fireEvent(videoItemComponent, 'handleEnd');
+    });
+
+    const progressDurationComponent = getByA11yLabel('Progress Duration');
+    expect(getByA11yLabel('Play Icon')).not.toBeUndefined();
+    expect(progressDurationComponent.children[0]).toBe('00:10');
+  });
+});