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

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: { black, white_snow },
         imageGallery: {
           videoControl: { durationTextStyle, roundedView, videoContainer },
         },
@@ -63,25 +62,39 @@ 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: white_snow }]}>
             {paused ? (
-              <Play height={24} pathFill={'#000'} width={24} />
+              <Play accessibilityLabel='Play Icon' height={24} pathFill={black} width={24} />
             ) : (
-              <Pause height={24} width={24} />
+              <Pause accessibilityLabel='Pause Icon' height={24} width={24} />
             )}
           </View>
         </TouchableOpacity>
-        <Text style={[styles.durationTextStyle, durationTextStyle]}>
+        <Text
+          accessibilityLabel='Progress Duration'
+          style={[styles.durationTextStyle, durationTextStyle, { color: white_snow }]}
+        >
           {progressDuration ? progressDuration : '00:00'}
         </Text>
         <ProgressControl
           duration={duration}
+          filledColor={white_snow}
           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: white_snow }]}
+        >
           {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,21 @@ 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, queryAllByTestId } = renderMessage({ message });
+
+    const fileAttachments = queryAllByTestId('file-attachment');
 
     await waitFor(() => {
       expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('file-attachment')).toBeTruthy();
+      expect(fileAttachments).toHaveLength(2);
     });
   });
 

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/MessageInput/AudioAttachmentUploadPreview.tsx

@@ -0,0 +1,362 @@
+import React, { useEffect } from 'react';
+import { I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+
+import {
+  FileUpload,
+  MessageInputContextValue,
+  useMessageInputContext,
+  useTheme,
+} from '../../contexts';
+import { Pause, Play } from '../../icons';
+import {
+  PlaybackStatus,
+  Sound,
+  SoundReturnType,
+  VideoPayloadData,
+  VideoProgressData,
+} from '../../native';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { ProgressControl } from '../ProgressControl/ProgressControl';
+
+dayjs.extend(duration);
+
+const FILE_PREVIEW_HEIGHT = 70;
+
+const styles = StyleSheet.create({
+  fileContainer: {
+    borderRadius: 12,
+    borderWidth: 1,
+    flexDirection: 'row',
+    height: FILE_PREVIEW_HEIGHT,
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+  fileContentContainer: { flexDirection: 'row' },
+  filenameText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingLeft: 10,
+  },
+  fileTextContainer: {
+    justifyContent: 'space-around',
+  },
+  flatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },
+  overlay: {
+    borderRadius: 12,
+    marginLeft: 8,
+    marginRight: 8,
+  },
+  progressControlView: {
+    flex: 8,
+  },
+  progressDurationText: {
+    flex: 4,
+    fontSize: 12,
+    paddingLeft: 10,
+    paddingRight: 8,
+  },
+  roundedView: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    borderRadius: 50,
+    display: 'flex',
+    elevation: 4,
+    height: 36,
+    justifyContent: 'center',
+    shadowOffset: {
+      height: 2,
+      width: 0,
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62,
+    width: 36,
+  },
+});
+
+export type AudioAttachmentUploadPreviewPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  MessageInputContextValue<StreamChatGenerics>,
+  'fileUploads' | 'removeFile' | 'uploadFile'
+> & {
+  index: number;
+  item: FileUpload;
+  onLoad: (index: string, duration: number) => void;
+  onPlayPause: (index: string, status?: boolean) => void;
+  onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
+  testID: string;
+};
+
+const AudioAttachmentUploadPreviewWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AudioAttachmentUploadPreviewPropsWithContext<StreamChatGenerics>,
+) => {
+  const soundRef = React.useRef<SoundReturnType | null>(null);
+  const { fileUploads, index, item, onLoad, onPlayPause, onProgress } = props;
+
+  const handleLoad = (payload: VideoPayloadData) => {
+    onLoad(item.id, payload.duration);
+  };
+
+  const handleProgress = (data: VideoProgressData) => {
+    if (data.currentTime && data.seekableDuration) {
+      onProgress(item.id, data.currentTime);
+    }
+  };
+
+  const handlePlayPause = async (isPausedStatusAvailable?: boolean) => {
+    if (soundRef.current) {
+      if (isPausedStatusAvailable === undefined) {
+        if (item.progress === 1) {
+          // For native CLI
+          if (soundRef.current.seek) soundRef.current.seek(0);
+          // For expo CLI
+          if (soundRef.current.setPositionAsync) soundRef.current.setPositionAsync(0);
+        }
+        if (item.paused) {
+          if (soundRef.current.playAsync) await soundRef.current.playAsync();
+          onPlayPause(item.id, false);
+        } else {
+          if (soundRef.current.pauseAsync) await soundRef.current.pauseAsync();
+          onPlayPause(item.id, true);
+        }
+      } else {
+        onPlayPause(item.id, isPausedStatusAvailable);
+      }
+    }
+  };
+
+  const handleProgressDrag = async (position: number) => {
+    onProgress(item.id, position);
+    if (soundRef.current?.seek) soundRef.current.seek(position);
+    if (soundRef.current?.setPositionAsync) {
+      await soundRef.current.setPositionAsync(position * 1000);
+    }
+  };
+
+  const handleEnd = () => {
+    onPlayPause(item.id, true);
+    onProgress(item.id, item.duration, true);
+  };
+
+  const onPlaybackStatusUpdate = (playbackStatus: PlaybackStatus) => {
+    if (!playbackStatus.isLoaded) {
+      // Update your UI for the unloaded state
+      if (playbackStatus.error) {
+        console.log(`Encountered a fatal error during playback: ${playbackStatus.error}`);
+      }
+    } else {
+      const { durationMillis, positionMillis } = playbackStatus;
+      onLoad(item.id, durationMillis / 1000);
+      // Update your UI for the loaded state
+      if (playbackStatus.isPlaying) {
+        // Update your UI for the playing state
+        onProgress(item.id, positionMillis / 1000);
+      } else {
+        // Update your UI for the paused state
+      }
+
+      if (playbackStatus.isBuffering) {
+        // Update your UI for the buffering state
+      }
+
+      if (playbackStatus.didJustFinish && !playbackStatus.isLooping) {
+        // The player has just finished playing and will stop. Maybe you want to play something else?
+        // status: opposite of pause,says i am playing
+        handleEnd();
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (Sound.Player === null) {
+      const initiateSound = async () => {
+        if (item && item.file && item.file.uri) {
+          soundRef.current = await Sound.initializeSound(
+            { uri: item.file.uri },
+            {},
+            onPlaybackStatusUpdate,
+          );
+        }
+      };
+      initiateSound();
+    }
+
+    return () => {
+      if (soundRef.current?.stopAsync && soundRef.current.unloadAsync) {
+        soundRef.current.stopAsync();
+        soundRef.current.unloadAsync();
+      }
+    };
+  }, []);
+
+  // This is needed for expo applications where the rerender doesn't occur on time thefore you need to update the state of the sound.
+  useEffect(() => {
+    const initalPlayPause = async () => {
+      if (soundRef.current) {
+        if (item.paused) {
+          if (soundRef.current.pauseAsync) await soundRef.current.pauseAsync();
+        } else {
+          if (soundRef.current.playAsync) await soundRef.current.playAsync();
+        }
+      }
+    };
+    if (!Sound.Player) {
+      initalPlayPause();
+    }
+  }, [item.paused]);
+
+  const {
+    theme: {
+      colors: { accent_blue, black, grey_dark, grey_whisper, static_black, static_white },
+      messageInput: {
+        fileUploadPreview: {
+          audioAttachmentUploadPreview: { progressControlView, progressDurationText, roundedView },
+          fileContainer,
+          fileContentContainer,
+          filenameText,
+          fileTextContainer,
+        },
+      },
+    },
+  } = useTheme();
+
+  const progressValueInSeconds = (item.duration as number) * (item.progress as number);
+
+  const progressDuration = progressValueInSeconds
+    ? progressValueInSeconds / 3600 >= 1
+      ? dayjs.duration(progressValueInSeconds, 'second').format('HH:mm:ss')
+      : dayjs.duration(progressValueInSeconds, 'second').format('mm:ss')
+    : '00:00';
+
+  const lastIndexOfDot = item.file.name.lastIndexOf('.');
+
+  return (
+    <View
+      style={[
+        styles.fileContainer,
+        index === fileUploads.length - 1
+          ? {
+              marginBottom: 0,
+            }
+          : {},
+        {
+          borderColor: grey_whisper,
+          width: -16,
+        },
+        fileContainer,
+      ]}
+      testID='audio-attachment-upload-preview'
+    >
+      <View style={[styles.fileContentContainer, fileContentContainer]}>
+        <TouchableOpacity
+          accessibilityLabel='Play Pause Button'
+          onPress={() => handlePlayPause()}
+          style={[
+            styles.roundedView,
+            roundedView,
+            { backgroundColor: static_white, shadowColor: black },
+          ]}
+        >
+          {item.paused ? (
+            <Play height={24} pathFill={static_black} width={24} />
+          ) : (
+            <Pause height={24} pathFill={static_black} width={24} />
+          )}
+        </TouchableOpacity>
+        <View style={[styles.fileTextContainer, fileTextContainer]}>
+          <Text
+            accessibilityLabel='File Name'
+            numberOfLines={1}
+            style={[
+              styles.filenameText,
+              {
+                color: black,
+                width:
+                  16 - // 16 = horizontal padding
+                  40 - // 40 = file icon size
+                  24 - // 24 = close icon size
+                  24, // 24 = internal padding
+              },
+              I18nManager.isRTL ? { writingDirection: 'rtl' } : { writingDirection: 'ltr' },
+              filenameText,
+            ]}
+          >
+            {item.file.name.slice(0, 12) + '...' + item.file.name.slice(lastIndexOfDot)}
+          </Text>
+          <View
+            style={{
+              alignItems: 'center',
+              display: 'flex',
+              flexDirection: 'row',
+            }}
+          >
+            {/* <ExpoSoundPlayer filePaused={!!item.paused} soundRef={soundRef} /> */}
+            {Sound.Player && (
+              <Sound.Player
+                onEnd={handleEnd}
+                onLoad={handleLoad}
+                onProgress={handleProgress}
+                paused={item.paused as boolean}
+                soundRef={soundRef}
+                testID='sound-player'
+                uri={item.file.uri}
+              />
+            )}
+            <Text style={[styles.progressDurationText, { color: grey_dark }, progressDurationText]}>
+              {progressDuration}
+            </Text>
+            <View style={[styles.progressControlView, progressControlView]}>
+              <ProgressControl
+                duration={item.duration as number}
+                filledColor={accent_blue}
+                onPlayPause={handlePlayPause}
+                onProgressDrag={handleProgressDrag}
+                progress={item.progress as number}
+                testID='progress-control'
+                width={110}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export type AudioAttachmentUploadPreviewProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<AudioAttachmentUploadPreviewPropsWithContext<StreamChatGenerics>> & {
+  index: number;
+  item: FileUpload;
+  onLoad: (index: string, duration: number) => void;
+  onPlayPause: (index: string, status?: boolean) => void;
+  onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
+  testID: string;
+};
+
+/**
+ * AudioAttachmentUploadPreview
+ * UI Component to preview the audio files set for upload
+ */
+export const AudioAttachmentUploadPreview = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AudioAttachmentUploadPreviewProps<StreamChatGenerics>,
+) => {
+  const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();
+
+  return (
+    <AudioAttachmentUploadPreviewWithContext
+      {...{ fileUploads, removeFile, uploadFile }}
+      {...props}
+    />
+  );
+};
+
+AudioAttachmentUploadPreview.displayName =
+  'AudioAttachmentUploadPreview{messageInput{autoAttachmentUploadPreview}}';