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

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewNative.test.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+
+import { act } from 'react-test-renderer';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import type { FileUpload } from '../../../contexts/messageInputContext/MessageInputContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+
+import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
+import { AudioAttachment, AudioAttachmentProps } from '../../Attachment/AudioAttachment';
+
+jest.mock('../../../native.ts', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+
+  return {
+    isAudioPackageAvailable: jest.fn(() => true),
+    NetInfo: {
+      addEventListener: jest.fn(),
+    },
+    Sound: {
+      Player: View,
+    },
+  };
+});
+
+const getComponent = (props: Partial<AudioAttachmentProps>) => (
+  <ThemeProvider theme={defaultTheme}>
+    <AudioAttachment {...(props as unknown as AudioAttachmentProps)} />,
+  </ThemeProvider>
+);
+
+describe('AudioAttachment', () => {
+  it('handle play pause button when isPausedStatusAvailable unavailable and progress 1', () => {
+    const seekMock = jest.fn();
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: {
+        seek: seekMock,
+      },
+    });
+
+    const onPlayPauseMock = jest.fn();
+    const { getByA11yLabel } = render(
+      getComponent({
+        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        item: { file: { name: 'audio.mp3' }, paused: true, progress: 1 } as unknown as FileUpload,
+        onPlayPause: onPlayPauseMock,
+      }),
+    );
+
+    const playPauseButton = getByA11yLabel('Play Pause Button');
+
+    act(() => {
+      fireEvent(playPauseButton, 'onPress');
+    });
+    expect(seekMock).toHaveBeenCalled();
+  });
+
+  it('handle play pause button when isPausedStatusAvailable unavailable and paused equals true', () => {
+    const playAsyncMock = jest.fn();
+    const onPlayPauseMock = jest.fn((id, status) => ({ id, status }));
+
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: {
+        playAsync: playAsyncMock,
+      },
+    });
+
+    const { getByA11yLabel } = render(
+      getComponent({
+        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        item: { file: { name: 'audio.mp3' }, paused: true } as unknown as FileUpload,
+        onPlayPause: onPlayPauseMock,
+      }),
+    );
+
+    const playPauseButton = getByA11yLabel('Play Pause Button');
+
+    act(() => {
+      fireEvent(playPauseButton, 'onPress');
+    });
+
+    expect(playAsyncMock).toHaveBeenCalled();
+  });
+
+  it('handle play pause button when isPausedStatusAvailable unavailable and paused equals false', () => {
+    const pauseAsyncMock = jest.fn();
+    const onPlayPauseMock = jest.fn((id, status) => ({ id, status }));
+
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: {
+        pauseAsync: pauseAsyncMock,
+      },
+    });
+
+    const { getByA11yLabel } = render(
+      getComponent({
+        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload,
+        onPlayPause: onPlayPauseMock,
+      }),
+    );
+
+    const playPauseButton = getByA11yLabel('Play Pause Button');
+
+    act(() => {
+      fireEvent(playPauseButton, 'onPress');
+    });
+
+    expect(pauseAsyncMock).toHaveBeenCalled();
+  });
+
+  it('handle onLoad event of sound player', () => {
+    const onLoadMock = jest.fn().mockImplementation((id, duration) => ({ duration, id }));
+
+    const { getByTestId } = render(
+      getComponent({
+        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload,
+        onLoad: onLoadMock,
+      }),
+    );
+
+    const soundPlayer = getByTestId('sound-player');
+
+    act(() => {
+      fireEvent(soundPlayer, 'onLoad', {
+        duration: 100,
+      });
+    });
+
+    expect(onLoadMock).toHaveBeenCalled();
+  });
+
+  it('handle onEnd event of sound player', () => {
+    const onProgressMock = jest.fn().mockImplementation((id, duration) => ({ duration, id }));
+    const onPlayPauseMock = jest.fn().mockImplementation((id, status) => ({ id, status }));
+
+    const { getByTestId } = render(
+      getComponent({
+        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload,
+        onPlayPause: onPlayPauseMock,
+        onProgress: onProgressMock,
+      }),
+    );
+
+    const soundPlayer = getByTestId('sound-player');
+
+    act(() => {
+      fireEvent(soundPlayer, 'onEnd');
+    });
+
+    expect(onPlayPauseMock).toHaveBeenCalled();
+    expect(onProgressMock).toHaveBeenCalled();
+  });
+
+  it('handle onProgress event of sound player', () => {
+    const onProgressMock = jest.fn().mockImplementation((id, duration) => ({ duration, id }));
+
+    const { getByTestId } = render(
+      getComponent({
+        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload,
+        onProgress: onProgressMock,
+      }),
+    );
+
+    const soundPlayer = getByTestId('sound-player');
+
+    act(() => {
+      fireEvent(soundPlayer, 'onProgress', {
+        currentTime: 10,
+        seekableDuration: 10,
+      });
+    });
+
+    expect(onProgressMock).toHaveBeenCalled();
+  });
+
+  it('handle onProgressDrag event of the progress control', () => {
+    const onProgressMock = jest.fn().mockImplementation((id, duration) => ({ duration, id }));
+    const seekMock = jest.fn();
+
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: {
+        seek: seekMock,
+      },
+    });
+
+    const { getByTestId } = render(
+      getComponent({
+        fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })],
+        item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload,
+        onProgress: onProgressMock,
+      }),
+    );
+
+    const progressControl = getByTestId('progress-control');
+
+    act(() => {
+      fireEvent(progressControl, 'onProgressDrag', {
+        currentTime: 10,
+        seekableDuration: 10,
+      });
+    });
+
+    expect(onProgressMock).toHaveBeenCalled();
+    expect(seekMock).toHaveBeenCalled();
+  });
+});

package/src/components/MessageInput/__tests__/FileUploadPreview.test.js

@@ -25,6 +25,21 @@ function MockedFlatList(props) {
   return <View testID={props.testID}>{items}</View>;
 }
 
+jest.mock('../../../native.ts', () => {
+  // eslint-disable-next-line no-undef
+  const View = require('react-native/Libraries/Components/View/View');
+
+  return {
+    isAudioPackageAvailable: jest.fn(() => true),
+    NetInfo: {
+      addEventListener: jest.fn(),
+    },
+    Sound: {
+      Player: View,
+    },
+  };
+});
+
 describe('FileUploadPreview', () => {
   it('should render FileUploadPreview with all uploading files', async () => {
     const fileUploads = [
@@ -298,4 +313,53 @@ describe('FileUploadPreview', () => {
       expect(uploadFile).toHaveBeenCalledTimes(0);
     });
   });
+
+  it('should render FileUploadPreview with all uploaded audios', async () => {
+    const fileUploads = [
+      generateFileUploadPreview({
+        id: 'file-upload-id-1',
+        state: FileState.UPLOADED,
+        type: 'audio/mp3',
+      }),
+    ];
+    const removeFile = jest.fn();
+    const uploadFile = jest.fn();
+
+    const user1 = generateUser();
+
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.query();
+
+    const { getByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} FlatList={MockedFlatList}>
+            <FileUploadPreview
+              fileUploads={fileUploads}
+              removeFile={removeFile}
+              uploadFile={uploadFile}
+            />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    const AudioAttachmentComponent = getByTestId('audio-attachment-upload-preview');
+
+    await waitFor(() => {
+      fireEvent(AudioAttachmentComponent, 'onLoad');
+      fireEvent(AudioAttachmentComponent, 'onProgress');
+      fireEvent(AudioAttachmentComponent, 'onPlayPause');
+      fireEvent(AudioAttachmentComponent, 'onPlayPause', {
+        status: false,
+      });
+    });
+  });
 });

package/src/components/{ImageGallery/components → ProgressControl}/ProgressControl.tsx

@@ -9,43 +9,61 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated';
 
-import type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+export type ProgressControlProps = {
+  duration: number;
+  filledColor: string;
+  onPlayPause: (status?: boolean) => void;
+  onProgressDrag: (progress: number) => void;
+  progress: number;
+  testID: string;
+  width: number;
+};
 
-type ProgressControlProps = Pick<
-  ImageGalleryFooterVideoControlProps,
-  'duration' | 'onPlayPause' | 'onProgressDrag' | 'progress'
->;
-
-const width = 180;
 const height = 2;
 const styles = StyleSheet.create({
   containerStyle: {
     borderRadius: 50,
     height,
-    width,
   },
   innerStyle: {
     height,
   },
   progressControlThumbStyle: {
-    backgroundColor: '#fff',
     borderRadius: 5,
+    elevation: 6,
     height: 20,
+    shadowOffset: {
+      height: 3,
+      width: 0,
+    },
+    shadowOpacity: 0.27,
+    shadowRadius: 4.65,
     top: -11,
-    width: 4,
+    width: 5,
   },
 });
 
-const ProgressControlThumb = () => <View style={styles.progressControlThumbStyle} />;
+const ProgressControlThumb = () => {
+  const {
+    theme: {
+      colors: { black },
+    },
+  } = useTheme();
+  return (
+    <View
+      style={[styles.progressControlThumbStyle, { backgroundColor: '#ffffff', shadowColor: black }]}
+    />
+  );
+};
 
 export const ProgressControl: React.FC<ProgressControlProps> = React.memo(
   (props) => {
-    const { duration, onPlayPause, onProgressDrag, progress } = props;
+    const { duration, filledColor, onPlayPause, onProgressDrag, progress, testID, width } = props;
     const {
       theme: {
-        colors: { grey_dark, white_snow },
+        colors: { grey_dark },
       },
     } = useTheme();
 
@@ -58,7 +76,7 @@ export const ProgressControl: React.FC<ProgressControlProps> = React.memo(
     }, [progress]);
 
     const animatedStyles = useAnimatedStyle(() => ({
-      backgroundColor: white_snow,
+      backgroundColor: filledColor,
       width: state.value,
     }));
 
@@ -77,10 +95,10 @@ export const ProgressControl: React.FC<ProgressControlProps> = React.memo(
           translateX.value = state.value;
           const dragFinishLocationInSeconds = (state.value / width) * duration;
           runOnJS(onProgressDrag)(dragFinishLocationInSeconds);
-          runOnJS(onPlayPause)();
+          runOnJS(onPlayPause)(false);
         },
         onStart: () => {
-          runOnJS(onPlayPause)();
+          runOnJS(onPlayPause)(true);
           cancelAnimation(translateX);
           state.value = translateX.value;
         },
@@ -88,10 +106,10 @@ export const ProgressControl: React.FC<ProgressControlProps> = React.memo(
       [duration],
     );
     return (
-      <View style={[styles.containerStyle, { backgroundColor: grey_dark }]}>
+      <View style={[styles.containerStyle, { backgroundColor: grey_dark, width }]}>
         <Animated.View style={[styles.innerStyle, animatedStyles]} />
 
-        <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent}>
+        <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent} testID={testID}>
           <Animated.View style={[thumbStyles]}>
             <ProgressControlThumb />
           </Animated.View>

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -304,7 +304,7 @@ exports[`Thread should match thread snapshot 1`] = `
                             }
                           >
                             <Image
-                              accessibilityLabel="avatar-image"
+                              accessibilityLabel="Avatar Image"
                               onError={[Function]}
                               source={
                                 Object {
@@ -552,7 +552,7 @@ exports[`Thread should match thread snapshot 1`] = `
                             }
                           >
                             <Image
-                              accessibilityLabel="avatar-image"
+                              accessibilityLabel="Avatar Image"
                               onError={[Function]}
                               source={
                                 Object {
@@ -800,7 +800,7 @@ exports[`Thread should match thread snapshot 1`] = `
                             }
                           >
                             <Image
-                              accessibilityLabel="avatar-image"
+                              accessibilityLabel="Avatar Image"
                               onError={[Function]}
                               source={
                                 Object {
@@ -1091,7 +1091,7 @@ exports[`Thread should match thread snapshot 1`] = `
                               }
                             >
                               <Image
-                                accessibilityLabel="avatar-image"
+                                accessibilityLabel="Avatar Image"
                                 onError={[Function]}
                                 source={
                                   Object {

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './Attachment/Attachment';
 export * from './Attachment/AttachmentActions';
+export * from './Attachment/AudioAttachment';
 export * from './Attachment/Card';
 export * from './Attachment/FileAttachment';
 export * from './Attachment/FileAttachmentGroup';
@@ -149,6 +150,8 @@ export * from './MessageOverlay/OverlayReactions';
 export * from './MessageOverlay/OverlayReactionsAvatar';
 export * from './MessageOverlay/OverlayReactionList';
 
+export * from './ProgressControl/ProgressControl';
+
 export * from './Reply/Reply';
 
 export * from './Spinner/Spinner';

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -21,6 +21,7 @@ import {
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { isEditingBoolean, useMessageDetailsForState } from './hooks/useMessageDetailsForState';
 
+import type { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
 import type { CommandsButtonProps } from '../../components/MessageInput/CommandsButton';
 import type { InputEditingStateHeaderProps } from '../../components/MessageInput/components/InputEditingStateHeader';
@@ -62,6 +63,9 @@ export type FileUpload = {
   file: File;
   id: string;
   state: FileStateValue;
+  duration?: number;
+  paused?: boolean;
+  progress?: number;
   thumb_url?: string;
   url?: string;
 };
@@ -220,6 +224,10 @@ export type InputMessageInputContextValue<
    * Defaults to and accepts same props as: [AttachButton](https://getstream.io/chat/docs/sdk/reactnative/ui-components/attach-button/)
    */
   AttachButton: React.ComponentType<AttachButtonProps<StreamChatGenerics>>;
+
+  /** Custom UI component for AudioAttachment. */
+  AudioAttachment: React.ComponentType<AudioAttachmentProps<StreamChatGenerics>>;
+
   clearEditingState: () => void;
   clearQuotedMessageState: () => void;
   /**
@@ -1031,8 +1039,11 @@ export const MessageInputProvider = <
         : FileState.UPLOADING;
 
     const newFile: FileUpload = {
+      duration: 0,
       file: { ...file, type: mimeType || file?.type },
       id,
+      paused: true,
+      progress: 0,
       state: fileState,
     };
 

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -12,6 +12,7 @@ export const useCreateMessageInputContext = <
   asyncIds,
   asyncUploads,
   AttachButton,
+  AudioAttachment,
   autoCompleteSuggestionsLimit,
   clearEditingState,
   clearQuotedMessageState,
@@ -96,7 +97,9 @@ export const useCreateMessageInputContext = <
 }: MessageInputContextValue<StreamChatGenerics> &
   Pick<ThreadContextValue<StreamChatGenerics>, 'thread'>) => {
   const editingExists = !!editing;
-  const fileUploadsValue = fileUploads.map(({ state }) => state).join();
+  const fileUploadsValue = fileUploads
+    .map(({ duration, paused, progress, state }) => `${state},${paused},${progress},${duration}`)
+    .join();
   const imageUploadsValue = imageUploads.map(({ state }) => state).join();
   const mentionedUsersLength = mentionedUsers.length;
   const quotedMessageId = quotedMessage
@@ -113,6 +116,7 @@ export const useCreateMessageInputContext = <
       asyncIds,
       asyncUploads,
       AttachButton,
+      AudioAttachment,
       autoCompleteSuggestionsLimit,
       clearEditingState,
       clearQuotedMessageState,

package/src/contexts/themeContext/utils/theme.ts

@@ -21,9 +21,12 @@ export const Colors = {
   grey_whisper: '#ECEBEB',
   icon_background: '#FFFFFF',
   label_bg_transparent: '#00000033', // 33 = 20% opacity
+  light_gray: '#DBDDE1',
   modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
   overlay: '#000000CC', // CC = 80% opacity
   shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
+  static_black: '#000000',
+  static_white: '#ffffff',
   targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
   transparent: 'transparent',
   white: '#FFFFFF',
@@ -244,6 +247,12 @@ export type Theme = {
       editingBoxHeaderTitle: TextStyle;
     };
     fileUploadPreview: {
+      audioAttachment: {
+        progressControlView: ViewStyle;
+        progressDurationText: TextStyle;
+        roundedView: ViewStyle;
+      };
+      audioAttachmentFileContainer: ViewStyle;
       dismiss: ViewStyle;
       fileContainer: ViewStyle;
       fileContentContainer: ViewStyle;
@@ -737,6 +746,12 @@ export const defaultTheme: Theme = {
       editingBoxHeaderTitle: {},
     },
     fileUploadPreview: {
+      audioAttachment: {
+        progressControlView: {},
+        progressDurationText: {},
+        roundedView: {},
+      },
+      audioAttachmentFileContainer: {},
       dismiss: {},
       fileContainer: {},
       fileContentContainer: {},

package/src/icons/Pause.tsx

@@ -7,8 +7,8 @@ export const Pause: React.FC<IconProps> = (props) => {
   const { height, width } = props;
   return (
     <RootSvg height={height} viewBox={`0 0 ${height} ${width}`} width={width} {...props}>
-      <Rect fill={'black'} height={14} width={4} x={6} y={5} />
-      <Rect fill={'black'} height={14} width={4} x={14} y={5} />
+      <Rect fill={props.pathFill} height={14} width={4} x={6} y={5} />
+      <Rect fill={props.pathFill} height={14} width={4} x={14} y={5} />
     </RootSvg>
   );
 };

package/src/mock-builders/api/channelMocks.tsx

@@ -176,6 +176,7 @@ const FORMATTED_MESSAGE: FormatMessageResponse<DefaultStreamChatGenerics> = {
   message: {} as unknown as MessageResponse<DefaultStreamChatGenerics>,
   pinned_at: new Date('2021-02-12T12:12:35.862282Z'),
   status: 'received',
+  type: 'regular',
   updated_at: new Date('2021-02-12T12:12:35.862282Z'),
 };