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

package/src/components/Attachment/AudioAttachment.tsx

@@ -0,0 +1,357 @@
+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', paddingRight: 40 },
+  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 AudioAttachmentPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  MessageInputContextValue<StreamChatGenerics>,
+  'fileUploads' | 'removeFile' | 'uploadFile'
+> & {
+  index: number;
+  item: Omit<FileUpload, 'state'>;
+  onLoad: (index: string, duration: number) => void;
+  onPlayPause: (index: string, pausedStatus?: boolean) => void;
+  onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
+  testID?: string;
+};
+
+const AudioAttachmentWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AudioAttachmentPropsWithContext<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, white },
+      messageInput: {
+        fileUploadPreview: {
+          audioAttachment: { 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,
+            }
+          : {},
+        {
+          backgroundColor: white,
+          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={120}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export type AudioAttachmentProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<AudioAttachmentPropsWithContext<StreamChatGenerics>> & {
+  index: number;
+  item: Omit<FileUpload, 'state'>;
+  onLoad: (index: string, duration: number) => void;
+  onPlayPause: (index: string, pausedStatus?: boolean) => void;
+  onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
+  testID: string;
+};
+
+/**
+ * AudioAttachment
+ * UI Component to preview the audio files
+ */
+export const AudioAttachment = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AudioAttachmentProps<StreamChatGenerics>,
+) => {
+  const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();
+
+  return <AudioAttachmentWithContext {...{ fileUploads, removeFile, uploadFile }} {...props} />;
+};
+
+AudioAttachment.displayName = 'AudioAttachment{messageInput{autoAttachment}}';

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -1,17 +1,24 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import { Attachment as AttachmentDefault } from './Attachment';
 
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../contexts/messageContext/MessageContext';
+import {
+  MessageInputContextValue,
+  useMessageInputContext,
+} from '../../contexts/messageInputContext/MessageInputContext';
 import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { isAudioPackageAvailable } from '../../native';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
@@ -24,6 +31,7 @@ const styles = StyleSheet.create({
 export type FileAttachmentGroupPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, 'files'> &
+  Pick<MessageInputContextValue<StreamChatGenerics>, 'AudioAttachment'> &
   Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment'> & {
     /**
      * The unique id for the message with file attachments
@@ -35,12 +43,73 @@ export type FileAttachmentGroupPropsWithContext<
     }>;
   };
 
+type FilesToDisplayType<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Attachment<StreamChatGenerics> & {
+  duration: number;
+  paused: boolean;
+  progress: number;
+};
+
 const FileAttachmentGroupWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { Attachment, files, messageId, styles: stylesProp = {} } = props;
+  const { Attachment, AudioAttachment, files, messageId, styles: stylesProp = {} } = props;
+  const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>([]);
+
+  useEffect(() => {
+    setFilesToDisplay(files.map((file) => ({ ...file, duration: 0, paused: true, progress: 0 })));
+  }, [files]);
+
+  // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.
+  const onLoad = (index: string, duration: number) => {
+    setFilesToDisplay((prevFilesToDisplay) =>
+      prevFilesToDisplay.map((fileToDisplay, id) => ({
+        ...fileToDisplay,
+        duration: id.toString() === index ? duration : fileToDisplay.duration,
+      })),
+    );
+  };
+
+  // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.
+  const onProgress = (index: string, currentTime?: number, hasEnd?: boolean) => {
+    setFilesToDisplay((prevFileUploads) =>
+      prevFileUploads.map((fileUpload, id) => ({
+        ...fileUpload,
+        progress:
+          id.toString() === index
+            ? hasEnd
+              ? 1
+              : currentTime
+              ? currentTime / (fileUpload.duration as number)
+              : 0
+            : fileUpload.progress,
+      })),
+    );
+  };
+
+  // The handler which controls or sets the paused/played state of the audio.
+  const onPlayPause = (index: string, pausedStatus?: boolean) => {
+    if (pausedStatus === false) {
+      // If the status is false we set the audio with the index as playing and the others as paused.
+      setFilesToDisplay((prevFileUploads) =>
+        prevFileUploads.map((fileUpload, id) => ({
+          ...fileUpload,
+          paused: id.toString() === index ? false : true,
+        })),
+      );
+    } else {
+      // If the status is true we simply set all the audio's paused state as true.
+      setFilesToDisplay((prevFileUploads) =>
+        prevFileUploads.map((fileUpload) => ({
+          ...fileUpload,
+          paused: true,
+        })),
+      );
+    }
+  };
 
   const {
     theme: {
@@ -52,7 +121,7 @@ const FileAttachmentGroupWithContext = <
 
   return (
     <View style={[styles.container, container, stylesProp.container]}>
-      {files.map((file, index) => (
+      {filesToDisplay.map((file, index) => (
         <View
           key={`${messageId}-${index}`}
           style={[
@@ -60,7 +129,26 @@ const FileAttachmentGroupWithContext = <
             stylesProp.attachmentContainer,
           ]}
         >
-          <Attachment attachment={file} />
+          {file.type === 'audio' && isAudioPackageAvailable() ? (
+            <View accessibilityLabel='audio-attachment-preview'>
+              <AudioAttachment
+                index={index}
+                item={{
+                  duration: file.duration,
+                  file: { name: file.title as string, uri: file.asset_url },
+                  id: index.toString(),
+                  paused: file.paused,
+                  progress: file.progress,
+                }}
+                onLoad={onLoad}
+                onPlayPause={onPlayPause}
+                onProgress={onProgress}
+                testID='audio-attachment-preview'
+              />
+            </View>
+          ) : (
+            <Attachment attachment={file} />
+          )}
         </View>
       ))}
     </View>
@@ -74,9 +162,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const { files: prevFiles } = prevProps;
   const { files: nextFiles } = nextProps;
 
-  const filesEqual = prevFiles.length === nextFiles.length;
-
-  return filesEqual;
+  return prevFiles.length === nextFiles.length;
 };
 
 const MemoizedFileAttachmentGroup = React.memo(
@@ -100,6 +186,8 @@ export const FileAttachmentGroup = <
 
   const { Attachment = AttachmentDefault } = useMessagesContext<StreamChatGenerics>();
 
+  const { AudioAttachment } = useMessageInputContext<StreamChatGenerics>();
+
   const files = propFiles || contextFiles;
 
   if (!files.length) return null;
@@ -108,6 +196,7 @@ export const FileAttachmentGroup = <
     <MemoizedFileAttachmentGroup
       {...{
         Attachment,
+        AudioAttachment,
         files,
         messageId,
       }}

package/src/components/Attachment/Gallery.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
-import { GalleryImage } from './GallaryImage';
+import { GalleryImage } from './GalleryImage';
 import { useLoadingImage } from './hooks/useLoadingImage';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 

package/src/components/Attachment/{GallaryImage.tsx → GalleryImage.tsx}

@@ -13,7 +13,7 @@ export const GalleryImage: React.FC<
   return (
     <ImageBackground
       {...rest}
-      accessibilityLabel='gallery-image'
+      accessibilityLabel='Gallery Image'
       source={{
         uri: makeImageCompatibleUrl(uri),
       }}

package/src/components/Attachment/Giphy.tsx

@@ -341,7 +341,7 @@ const GiphyWithContext = <
         ]}
       >
         <Image
-          accessibilityLabel='giphy-attachment-image'
+          accessibilityLabel='Giphy Attachment Image'
           onError={(error) => {
             console.warn(error);
             setLoadingImage(false);

package/src/components/Attachment/VideoThumbnail.tsx

@@ -15,7 +15,6 @@ const styles = StyleSheet.create({
   },
   roundedView: {
     alignItems: 'center',
-    backgroundColor: '#fff',
     borderRadius: 50,
     display: 'flex',
     elevation: 6,
@@ -41,6 +40,7 @@ export type VideoThumbnailProps = {
 export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
   const {
     theme: {
+      colors: { static_black, static_white },
       messageSimple: {
         videoThumbnail: { container, roundedView },
       },
@@ -49,13 +49,13 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
   const { imageStyle, style, thumb_url } = props;
   return (
     <ImageBackground
-      accessibilityLabel='video-thumbnail'
+      accessibilityLabel='Video Thumbnail'
       imageStyle={imageStyle}
       source={{ uri: thumb_url }}
       style={[styles.container, container, style]}
     >
-      <View style={[styles.roundedView, roundedView]}>
-        <Play height={24} pathFill={'#000'} width={24} />
+      <View style={[styles.roundedView, roundedView, { backgroundColor: static_white }]}>
+        <Play height={24} pathFill={static_black} width={24} />
       </View>
     </ImageBackground>
   );

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

@@ -93,7 +93,7 @@ describe('Gallery', () => {
       expect(queryAllByTestId('gallery-row-0').length).toBe(1);
 
       expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(getAllByA11yLabel('video-thumbnail').length).toBe(1);
+      expect(getAllByA11yLabel('Video Thumbnail').length).toBe(1);
     });
   });
 
@@ -267,7 +267,7 @@ describe('Gallery', () => {
     const component = await getComponent([image1]);
     const { getByA11yLabel, getByAccessibilityHint } = render(component);
 
-    fireEvent(getByA11yLabel('gallery-image'), 'error');
+    fireEvent(getByA11yLabel('Gallery Image'), 'error');
     expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
   });
 
@@ -280,11 +280,11 @@ describe('Gallery', () => {
     const component = await getComponent([image1]);
     const { getByA11yLabel, getByAccessibilityHint } = render(component);
 
-    fireEvent(getByA11yLabel('gallery-image'), 'onLoadStart');
+    fireEvent(getByA11yLabel('Gallery Image'), 'onLoadStart');
     expect(getByAccessibilityHint('image-loading')).toBeTruthy();
 
-    fireEvent(getByA11yLabel('gallery-image'), 'onLoadFinish');
-    waitForElementToBeRemoved(() => getByAccessibilityHint('image-loading'));
-    expect(getByA11yLabel('gallery-image')).toBeTruthy();
+    fireEvent(getByA11yLabel('Gallery Image'), 'onLoadFinish');
+    waitForElementToBeRemoved(() => getByAccessibilityHint('Image Loading'));
+    expect(getByA11yLabel('Gallery Image')).toBeTruthy();
   });
 });

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

@@ -285,7 +285,7 @@ describe('Giphy', () => {
       </OverlayProvider>,
     );
 
-    fireEvent(getByA11yLabel('giphy-attachment-image'), 'error');
+    fireEvent(getByA11yLabel('Giphy Attachment Image'), 'error');
     expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
   });
 
@@ -302,13 +302,13 @@ describe('Giphy', () => {
 
     expect(getByAccessibilityHint('image-loading')).toBeTruthy();
 
-    fireEvent(getByA11yLabel('giphy-attachment-image'), 'onLoadStart');
+    fireEvent(getByA11yLabel('Giphy Attachment Image'), 'onLoadStart');
 
     expect(getByAccessibilityHint('image-loading')).toBeTruthy();
 
-    fireEvent(getByA11yLabel('giphy-attachment-image'), 'onLoadFinish');
+    fireEvent(getByA11yLabel('Giphy Attachment Image'), 'onLoadFinish');
 
     waitForElementToBeRemoved(() => getByAccessibilityHint('image-loading'));
-    expect(getByA11yLabel('giphy-attachment-image')).toBeTruthy();
+    expect(getByA11yLabel('Giphy Attachment Image')).toBeTruthy();
   });
 });

package/src/components/Avatar/Avatar.tsx

@@ -85,7 +85,7 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
         ]}
       >
         <Image
-          accessibilityLabel={testID || 'avatar-image'}
+          accessibilityLabel={testID || 'Avatar Image'}
           onError={() => setImageError(true)}
           source={{
             uri:

package/src/components/Avatar/GroupAvatar.tsx

@@ -127,7 +127,7 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
         >
           {column.map(({ height, name, url, width }, rowIndex) => (
             <Image
-              accessibilityLabel={testID || 'avatar-image'}
+              accessibilityLabel={testID || 'Avatar Image'}
               key={`avatar-${url}-${rowIndex}`}
               onError={() => setImageError(true)}
               source={{