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

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

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { act, ReactTestInstance } from 'react-test-renderer';
+
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import type { ImageGalleryFooterVideoControlProps } from '../components/ImageGalleryFooter';
+import { ImageGalleryVideoControl } from '../components/ImageGalleryVideoControl';
+
+dayjs.extend(duration);
+
+const getComponent = (props: Partial<ImageGalleryFooterVideoControlProps>) => (
+  <ThemeProvider theme={defaultTheme}>
+    <ImageGalleryVideoControl {...(props as unknown as ImageGalleryFooterVideoControlProps)} />
+  </ThemeProvider>
+);
+
+describe('ImageGalleryOverlay', () => {
+  it('should trigger the onPlayPause when play/pause button is pressed', async () => {
+    const onPlayPauseMock = jest.fn();
+
+    const { queryByA11yLabel } = render(getComponent({ onPlayPause: onPlayPauseMock }));
+
+    const component = queryByA11yLabel('Play Pause Button') as ReactTestInstance;
+
+    act(() => {
+      fireEvent(component, 'onPress');
+    });
+
+    await waitFor(() => {
+      expect(component).not.toBeUndefined();
+      expect(onPlayPauseMock).toHaveBeenCalled();
+    });
+  });
+
+  it('should render the play icon when paused prop is true', async () => {
+    const { queryByA11yLabel } = render(getComponent({ paused: true }));
+
+    const component = queryByA11yLabel('Play Icon') as ReactTestInstance;
+
+    await waitFor(() => {
+      expect(component).not.toBeUndefined();
+    });
+  });
+
+  it('should calculate the videoDuration and progressDuration when they are greater than or equal to 3600', () => {
+    jest.spyOn(dayjs, 'duration');
+
+    const { queryByA11yLabel } = render(
+      getComponent({
+        duration: 3600,
+        progress: 1,
+      }),
+    );
+
+    const videoDurationComponent = queryByA11yLabel('Video Duration') as ReactTestInstance;
+    const progressDurationComponent = queryByA11yLabel('Progress Duration') as ReactTestInstance;
+
+    expect(videoDurationComponent.children[0]).toBe('01:00:00');
+    expect(progressDurationComponent.children[0]).toBe('01:00:00');
+  });
+
+  it('should calculate the videoDuration and progressDuration when they are less than 3600', () => {
+    jest.spyOn(dayjs, 'duration');
+
+    const { queryByA11yLabel } = render(
+      getComponent({
+        duration: 60,
+        progress: 0.5,
+      }),
+    );
+
+    const videoDurationComponent = queryByA11yLabel('Video Duration') as ReactTestInstance;
+    const progressDurationComponent = queryByA11yLabel('Progress Duration') as ReactTestInstance;
+
+    expect(videoDurationComponent.children[0]).toBe('01:00');
+    expect(progressDurationComponent.children[0]).toBe('00:30');
+  });
+});

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -10,6 +10,7 @@ const halfScreenWidth = vw(50);
 const oneEighth = 1 / 8;
 
 type Props = {
+  accessibilityLabel: string;
   index: number;
   offsetScale: Animated.SharedValue<number>;
   photo: { uri: string };
@@ -26,6 +27,7 @@ type Props = {
 export const AnimatedGalleryImage: React.FC<Props> = React.memo(
   (props) => {
     const {
+      accessibilityLabel,
       index,
       offsetScale,
       photo,
@@ -83,6 +85,7 @@ export const AnimatedGalleryImage: React.FC<Props> = React.memo(
 
     return (
       <Animated.Image
+        accessibilityLabel={accessibilityLabel}
         resizeMode={'contain'}
         source={{ uri: photo.uri }}
         style={[

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -19,7 +19,7 @@ const screenWidth = vw(100);
 const halfScreenWidth = vw(50);
 const oneEighth = 1 / 8;
 
-type Props = {
+export type AnimatedGalleryVideoType = {
   handleEnd: () => void;
   handleLoad: (payload: VideoPayloadData) => void;
   handleProgress: (data: VideoProgressData) => void;
@@ -48,7 +48,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const AnimatedGalleryVideo: React.FC<Props> = React.memo(
+export const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.memo(
   (props) => {
     const [opacity, setOpacity] = useState<number>(1);
     const {
@@ -154,11 +154,17 @@ export const AnimatedGalleryVideo: React.FC<Props> = React.memo(
      * load on memory.
      */
     if (!shouldRender) {
-      return <View style={[style, { transform: [{ scale: oneEighth }] }]} />;
+      return (
+        <View
+          accessibilityLabel='Empty View Image Gallery'
+          style={[style, { transform: [{ scale: oneEighth }] }]}
+        />
+      );
     }
 
     return (
       <Animated.View
+        accessibilityLabel='Image Gallery Video'
         style={[
           style,
           animatedViewStyles,
@@ -185,11 +191,13 @@ export const AnimatedGalleryVideo: React.FC<Props> = React.memo(
             paused={paused}
             resizeMode='contain'
             style={style}
+            testID='video-player'
             uri={source.uri}
             videoRef={videoRef}
           />
         )}
         <Animated.View
+          accessibilityLabel='Spinner'
           style={[
             styles.activityIndicator,
             {

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -64,7 +64,7 @@ export type ImageGalleryFooterCustomComponent<
 
 export type ImageGalleryFooterVideoControlProps = {
   duration: number;
-  onPlayPause: () => void;
+  onPlayPause: (status?: boolean) => void;
   onProgressDrag: (progress: number) => void;
   paused: boolean;
   progress: number;
@@ -92,6 +92,7 @@ export type ImageGalleryFooterCustomComponentProps<
 type ImageGalleryFooterPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ImageGalleryFooterCustomComponentProps<StreamChatGenerics> & {
+  accessibilityLabel: string;
   duration: number;
   onPlayPause: () => void;
   onProgressDrag: (progress: number) => void;
@@ -111,6 +112,7 @@ export const ImageGalleryFooterWithContext = <
   props: ImageGalleryFooterPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
+    accessibilityLabel,
     centerElement,
     duration,
     GridIcon,
@@ -182,6 +184,7 @@ export const ImageGalleryFooterWithContext = <
 
   return (
     <Animated.View
+      accessibilityLabel={accessibilityLabel}
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
       style={styles.wrapper}
@@ -204,7 +207,11 @@ export const ImageGalleryFooterWithContext = <
           {leftElement ? (
             leftElement({ openGridView, photo, share, shareMenuOpen })
           ) : (
-            <TouchableOpacity disabled={shareMenuOpen} onPress={share}>
+            <TouchableOpacity
+              accessibilityLabel='Share Button'
+              disabled={shareMenuOpen}
+              onPress={share}
+            >
               <View style={[styles.leftContainer, leftContainer]}>
                 {ShareIcon ? ShareIcon : <ShareIconDefault pathFill={black} />}
               </View>

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -167,7 +167,7 @@ export const ImageGalleryHeader = <
           {leftElement ? (
             leftElement({ hideOverlay, photo })
           ) : (
-            <TouchableOpacity onPress={hideOverlay}>
+            <TouchableOpacity accessibilityLabel='Hide Overlay' onPress={hideOverlay}>
               <View style={[styles.leftContainer, leftContainer]}>
                 {CloseIcon ? CloseIcon : <Close />}
               </View>

package/src/components/ImageGallery/components/ImageGalleryOverlay.tsx

@@ -74,7 +74,12 @@ export const ImageGalleryOverlay: React.FC<Props> = (props) => {
   }
 
   return (
-    <TapGestureHandler maxDeltaX={16} maxDeltaY={16} onHandlerStateChange={tapEvent}>
+    <TapGestureHandler
+      maxDeltaX={16}
+      maxDeltaY={16}
+      onHandlerStateChange={tapEvent}
+      testID='image-gallery-overlay'
+    >
       <Animated.View
         style={[
           StyleSheet.absoluteFillObject,

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -4,20 +4,18 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import dayjs from 'dayjs';
 
 import type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';
-import { ProgressControl } from './ProgressControl';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { Pause, Play } from '../../../icons';
+import { ProgressControl } from '../../ProgressControl/ProgressControl';
 
 const styles = StyleSheet.create({
   durationTextStyle: {
-    color: '#fff',
     fontWeight: 'bold',
   },
   roundedView: {
     alignItems: 'center',
-    backgroundColor: '#fff',
     borderRadius: 50,
     display: 'flex',
     elevation: 2,
@@ -55,6 +53,7 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
 
     const {
       theme: {
+        colors: { static_black, static_white },
         imageGallery: {
           videoControl: { durationTextStyle, roundedView, videoContainer },
         },
@@ -63,25 +62,44 @@ export const ImageGalleryVideoControl: React.FC<ImageGalleryFooterVideoControlPr
 
     return (
       <View style={[styles.videoContainer, videoContainer]}>
-        <TouchableOpacity onPress={onPlayPause}>
-          <View style={[styles.roundedView, roundedView]}>
+        <TouchableOpacity
+          accessibilityLabel='Play Pause Button'
+          onPress={() => {
+            onPlayPause();
+          }}
+        >
+          <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
             {paused ? (
-              <Play height={24} pathFill={'#000'} width={24} />
+              <Play accessibilityLabel='Play Icon' height={24} pathFill={static_black} width={24} />
             ) : (
-              <Pause height={24} width={24} />
+              <Pause
+                accessibilityLabel='Pause Icon'
+                height={24}
+                pathFill={static_black}
+                width={24}
+              />
             )}
           </View>
         </TouchableOpacity>
-        <Text style={[styles.durationTextStyle, durationTextStyle]}>
+        <Text
+          accessibilityLabel='Progress Duration'
+          style={[styles.durationTextStyle, durationTextStyle, { color: static_white }]}
+        >
           {progressDuration ? progressDuration : '00:00'}
         </Text>
         <ProgressControl
           duration={duration}
+          filledColor={static_white}
           onPlayPause={onPlayPause}
           onProgressDrag={onProgressDrag}
           progress={progress}
+          testID={'progress-control'}
+          width={180}
         />
-        <Text style={[styles.durationTextStyle, durationTextStyle]}>
+        <Text
+          accessibilityLabel='Video Duration'
+          style={[styles.durationTextStyle, durationTextStyle, { color: static_white }]}
+        >
           {videoDuration ? videoDuration : '00:00'}
         </Text>
       </View>

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -82,7 +82,7 @@ const GridImage = <
   }
 
   return (
-    <TouchableOpacity onPress={selectAndClose}>
+    <TouchableOpacity accessibilityLabel='Grid Image' onPress={selectAndClose}>
       {type === 'video' ? (
         <View style={[styles.image, { height: size, width: size }, gridImage]}>
           <VideoThumbnail />
@@ -102,26 +102,27 @@ const renderItem = <
   item: GridImageItem<StreamChatGenerics>;
 }) => <GridImage item={item} />;
 
-type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
-  ImageGalleryGridImageComponents<StreamChatGenerics> & {
-    closeGridView: () => void;
-    photos: Photo<StreamChatGenerics>[];
-    setImage: React.Dispatch<
-      React.SetStateAction<
-        | {
-            messageId?: string | undefined;
-            url?: string | undefined;
-          }
-        | undefined
-      >
-    >;
-    numberOfImageGalleryGridColumns?: number;
-  };
+export type ImageGridType<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = ImageGalleryGridImageComponents<StreamChatGenerics> & {
+  closeGridView: () => void;
+  photos: Photo<StreamChatGenerics>[];
+  setImage: React.Dispatch<
+    React.SetStateAction<
+      | {
+          messageId?: string | undefined;
+          url?: string | undefined;
+        }
+      | undefined
+    >
+  >;
+  numberOfImageGalleryGridColumns?: number;
+};
 
 export const ImageGrid = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: Props<StreamChatGenerics>,
+  props: ImageGridType<StreamChatGenerics>,
 ) => {
   const {
     avatarComponent,
@@ -154,6 +155,7 @@ export const ImageGrid = <
 
   return (
     <BottomSheetFlatList<GridImageItem<StreamChatGenerics>>
+      accessibilityLabel='Image Grid'
       contentContainerStyle={[
         styles.contentContainer,
         { backgroundColor: white },

package/src/components/ImageGallery/components/ImageGridHandle.tsx

@@ -60,7 +60,10 @@ export const ImageGridHandle: React.FC<Props> = (props) => {
   const { t } = useTranslationContext();
 
   return (
-    <View style={[styles.handle, { backgroundColor: white }, handle]}>
+    <View
+      accessibilityLabel='Image Grid Handle'
+      style={[styles.handle, { backgroundColor: white }, handle]}
+    >
       {leftComponent ? leftComponent({ closeGridView }) : <View style={styles.leftContainer} />}
       {centerComponent ? (
         centerComponent({ closeGridView })

package/src/components/Message/Message.tsx

@@ -342,6 +342,8 @@ const MessageWithContext = <
             } else if (cur.type === 'video' && !cur.og_scrape_url) {
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
+            } else if (cur.type === 'audio') {
+              acc.files.push(cur);
             } else if (cur.type === 'image' && !cur.title_link && !cur.og_scrape_url) {
               /**
                * this next if is not combined with the above one for cases where we have
@@ -371,7 +373,6 @@ const MessageWithContext = <
           other: [] as Attachment<StreamChatGenerics>[],
           videos: [] as Attachment<StreamChatGenerics>[],
         };
-
   /**
    * Check if any actions to prevent long press
    */

package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js

@@ -188,15 +188,23 @@ describe('MessageContent', () => {
   it('renders the FileAttachment component when a file attachment exists', async () => {
     const user = generateUser();
     const message = generateMessage({
-      attachments: [{ title: 'file', type: 'file' }],
+      attachments: [
+        { title: 'file', type: 'file' },
+        { title: 'audio', type: 'audio' },
+        { title: 'video', type: 'video' },
+      ],
       user,
     });
 
-    const { getByTestId } = renderMessage({ message });
+    const { getByTestId, queryAllByA11yLabel, queryAllByTestId } = renderMessage({ message });
+
+    const fileAttachments = queryAllByTestId('file-attachment');
+    const audioAttachments = queryAllByA11yLabel('audio-attachment-preview');
 
     await waitFor(() => {
       expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('file-attachment')).toBeTruthy();
+      expect(fileAttachments).toHaveLength(1);
+      expect(audioAttachments).toHaveLength(1);
     });
   });
 

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -32,7 +32,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
       }
     >
       <Image
-        accessibilityLabel="avatar-image"
+        accessibilityLabel="Avatar Image"
         onError={[Function]}
         source={
           Object {

package/src/components/Message/MessageSimple/utils/parseLinks.test.ts

@@ -22,6 +22,10 @@ describe('parseLinksFromText', () => {
     ],
     ['127.0.0.1/local_(development)_server', '127.0.0.1/local_(development)_server'],
     ['https://a.co:8999/ab.php?p=12', 'a.co:8999/ab.php?p=12'],
+    [
+      'http://help.apple.com/xcode/mac/current/#/devba7f53ad4',
+      'help.apple.com/xcode/mac/current/#/devba7f53ad4',
+    ],
   ])('Returns the encoded value of %p as %p', (link, expected) => {
     const result = parseLinksFromText(link);
 

package/src/components/Message/MessageSimple/utils/parseLinks.ts

@@ -11,7 +11,7 @@ const schema = `(\\w{2,15}:\\/\\/)`;
 // something.tld OR 123.123.123.123
 const domain = `((?:\\w+\\.[a-zA-Z]+)+(?:[^:\\/\\s]+)|(?:\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}))`;
 const port = `(:[0-9]{1,5})`;
-const path = `((?:\\/)?[^?#\\s]+)`;
+const path = `((?:\\/)?[^?\\s]+)`;
 const queryString = `(\\?[^#\\s]+)`;
 const fragment = `(#[\\w_-]+)`;