stream-chat-react-native-core 4.12.0-beta.2 → 4.12.0-beta.5

package/lib/typescript/contexts/themeContext/utils/theme.d.ts

@@ -243,12 +243,12 @@ export declare type Theme = {
             editingBoxHeaderTitle: TextStyle;
         };
         fileUploadPreview: {
-            audioAttachmentFileContainer: ViewStyle;
-            audioAttachmentUploadPreview: {
+            audioAttachment: {
                 progressControlView: ViewStyle;
                 progressDurationText: TextStyle;
                 roundedView: ViewStyle;
             };
+            audioAttachmentFileContainer: ViewStyle;
             dismiss: ViewStyle;
             fileContainer: ViewStyle;
             fileContentContainer: ViewStyle;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.12.0-beta.2",
+  "version": "4.12.0-beta.5",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/{MessageInput/AudioAttachmentUploadPreview.tsx → Attachment/AudioAttachment.tsx}

@@ -4,12 +4,7 @@ import { I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-nat
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
-import {
-  FileUpload,
-  MessageInputContextValue,
-  useMessageInputContext,
-  useTheme,
-} from '../../contexts';
+import { FileUpload, useTheme } from '../../contexts';
 import { Pause, Play } from '../../icons';
 import {
   PlaybackStatus,
@@ -18,7 +13,6 @@ import {
   VideoPayloadData,
   VideoProgressData,
 } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 import { ProgressControl } from '../ProgressControl/ProgressControl';
 
 dayjs.extend(duration);
@@ -34,7 +28,7 @@ const styles = StyleSheet.create({
     paddingLeft: 8,
     paddingRight: 8,
   },
-  fileContentContainer: { flexDirection: 'row' },
+  fileContentContainer: { flexDirection: 'row', paddingRight: 40 },
   filenameText: {
     fontSize: 14,
     fontWeight: 'bold',
@@ -76,27 +70,17 @@ const styles = StyleSheet.create({
   },
 });
 
-export type AudioAttachmentUploadPreviewPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  MessageInputContextValue<StreamChatGenerics>,
-  'fileUploads' | 'removeFile' | 'uploadFile'
-> & {
-  index: number;
-  item: FileUpload;
+export type AudioAttachmentPropsWithContext = {
+  item: Omit<FileUpload, 'state'>;
   onLoad: (index: string, duration: number) => void;
-  onPlayPause: (index: string, status?: boolean) => void;
+  onPlayPause: (index: string, pausedStatus?: boolean) => void;
   onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
-  testID: string;
+  testID?: string;
 };
 
-const AudioAttachmentUploadPreviewWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AudioAttachmentUploadPreviewPropsWithContext<StreamChatGenerics>,
-) => {
+const AudioAttachmentWithContext = (props: AudioAttachmentPropsWithContext) => {
   const soundRef = React.useRef<SoundReturnType | null>(null);
-  const { fileUploads, index, item, onLoad, onPlayPause, onProgress } = props;
+  const { item, onLoad, onPlayPause, onProgress } = props;
 
   const handleLoad = (payload: VideoPayloadData) => {
     onLoad(item.id, payload.duration);
@@ -212,11 +196,10 @@ const AudioAttachmentUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { accent_blue, black, grey_dark, grey_whisper, static_black, static_white },
+      colors: { accent_blue, black, grey_dark, static_black, static_white },
       messageInput: {
         fileUploadPreview: {
-          audioAttachmentUploadPreview: { progressControlView, progressDurationText, roundedView },
-          fileContainer,
+          audioAttachment: { progressControlView, progressDurationText, roundedView },
           fileContentContainer,
           filenameText,
           fileTextContainer,
@@ -236,91 +219,74 @@ const AudioAttachmentUploadPreviewWithContext = <
   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()}
+    <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.roundedView,
-            roundedView,
-            { backgroundColor: static_white, shadowColor: black },
+            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.paused ? (
-            <Play height={24} pathFill={static_black} width={24} />
-          ) : (
-            <Pause height={24} pathFill={static_black} width={24} />
+          {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}
+            />
           )}
-        </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 style={[styles.progressDurationText, { color: grey_dark }, progressDurationText]}>
+            {progressDuration}
           </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 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>
@@ -328,35 +294,20 @@ const AudioAttachmentUploadPreviewWithContext = <
   );
 };
 
-export type AudioAttachmentUploadPreviewProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<AudioAttachmentUploadPreviewPropsWithContext<StreamChatGenerics>> & {
-  index: number;
-  item: FileUpload;
+export type AudioAttachmentProps = Partial<AudioAttachmentPropsWithContext> & {
+  item: Omit<FileUpload, 'state'>;
   onLoad: (index: string, duration: number) => void;
-  onPlayPause: (index: string, status?: boolean) => void;
+  onPlayPause: (index: string, pausedStatus?: boolean) => void;
   onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
   testID: string;
 };
 
 /**
- * AudioAttachmentUploadPreview
- * UI Component to preview the audio files set for upload
+ * AudioAttachment
+ * UI Component to preview the audio files
  */
-export const AudioAttachmentUploadPreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AudioAttachmentUploadPreviewProps<StreamChatGenerics>,
-) => {
-  const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();
-
-  return (
-    <AudioAttachmentUploadPreviewWithContext
-      {...{ fileUploads, removeFile, uploadFile }}
-      {...props}
-    />
-  );
-};
+export const AudioAttachment = (props: AudioAttachmentProps) => (
+  <AudioAttachmentWithContext {...props} />
+);
 
-AudioAttachmentUploadPreview.displayName =
-  'AudioAttachmentUploadPreview{messageInput{autoAttachmentUploadPreview}}';
+AudioAttachment.displayName = 'AudioAttachment{messageInput{autoAttachment}}';

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -1,30 +1,45 @@
-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 {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { isAudioPackageAvailable } from '../../native';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
+const FILE_PREVIEW_HEIGHT = 60;
+
 const styles = StyleSheet.create({
   container: {
     padding: 4,
   },
+  fileContainer: {
+    borderRadius: 12,
+    borderWidth: 1,
+    flexDirection: 'row',
+    height: FILE_PREVIEW_HEIGHT,
+    justifyContent: 'space-between',
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
 });
 
 export type FileAttachmentGroupPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, 'files'> &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment'> & {
+  Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment' | 'AudioAttachment'> & {
     /**
      * The unique id for the message with file attachments
      */
@@ -35,15 +50,77 @@ 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: {
+      colors: { grey_whisper, white },
       messageSimple: {
         fileAttachmentGroup: { container },
       },
@@ -52,7 +129,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 +137,40 @@ const FileAttachmentGroupWithContext = <
             stylesProp.attachmentContainer,
           ]}
         >
-          <Attachment attachment={file} />
+          {file.type === 'audio' && isAudioPackageAvailable() ? (
+            <View
+              accessibilityLabel='audio-attachment-preview'
+              style={[
+                styles.fileContainer,
+                index === filesToDisplay.length - 1
+                  ? {
+                      marginBottom: 0,
+                    }
+                  : {},
+                {
+                  backgroundColor: white,
+                  borderColor: grey_whisper,
+                  width: -16,
+                },
+              ]}
+            >
+              <AudioAttachment
+                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 +184,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(
@@ -98,7 +206,8 @@ export const FileAttachmentGroup = <
 
   const { files: contextFiles } = useMessageContext<StreamChatGenerics>();
 
-  const { Attachment = AttachmentDefault } = useMessagesContext<StreamChatGenerics>();
+  const { Attachment = AttachmentDefault, AudioAttachment } =
+    useMessagesContext<StreamChatGenerics>();
 
   const files = propFiles || contextFiles;
 
@@ -108,6 +217,7 @@ export const FileAttachmentGroup = <
     <MemoizedFileAttachmentGroup
       {...{
         Attachment,
+        AudioAttachment,
         files,
         messageId,
       }}

package/src/components/Attachment/Gallery.tsx

@@ -62,6 +62,12 @@ const styles = StyleSheet.create({
     left: 4,
     position: 'absolute',
   },
+  imageLoadingIndicatorContainer: {
+    height: '100%',
+    justifyContent: 'center',
+    position: 'absolute',
+    width: '100%',
+  },
   imageLoadingIndicatorStyle: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -490,7 +496,7 @@ const GalleryImageThumbnail = <
             uri={thumbnail.url}
           />
           {isLoadingImage && (
-            <View style={{ position: 'absolute' }}>
+            <View style={[styles.imageLoadingIndicatorContainer]}>
               <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
             </View>
           )}

package/src/components/Attachment/VideoThumbnail.tsx

@@ -40,6 +40,7 @@ export type VideoThumbnailProps = {
 export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
   const {
     theme: {
+      colors: { static_black, static_white },
       messageSimple: {
         videoThumbnail: { container, roundedView },
       },
@@ -53,8 +54,8 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
       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/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';
@@ -107,7 +108,6 @@ import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/
 import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
 import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
-import { AudioAttachmentUploadPreview as AudioAttachmentUploadPreviewDefault } from '../MessageInput/AudioAttachmentUploadPreview';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
 import { InputEditingStateHeader as InputEditingStateHeaderDefault } from '../MessageInput/components/InputEditingStateHeader';
 import { InputGiphySearch as InputGiphyCommandInputDefault } from '../MessageInput/components/InputGiphySearch';
@@ -229,6 +229,7 @@ export type ChannelPropsWithContext<
       | 'additionalTouchableProps'
       | 'Attachment'
       | 'AttachmentActions'
+      | 'AudioAttachment'
       | 'Card'
       | 'CardCover'
       | 'CardFooter'
@@ -399,7 +400,7 @@ const ChannelWithContext = <
     AttachButton = AttachButtonDefault,
     Attachment = AttachmentDefault,
     AttachmentActions = AttachmentActionsDefault,
-    AudioAttachmentUploadPreview = AudioAttachmentUploadPreviewDefault,
+    AudioAttachment = AudioAttachmentDefault,
     AutoCompleteSuggestionHeader = AutoCompleteSuggestionHeaderDefault,
     AutoCompleteSuggestionItem = AutoCompleteSuggestionItemDefault,
     AutoCompleteSuggestionList = AutoCompleteSuggestionListDefault,
@@ -1620,7 +1621,6 @@ const ChannelWithContext = <
   const inputMessageInputContext = useCreateInputMessageInputContext<StreamChatGenerics>({
     additionalTextInputProps,
     AttachButton,
-    AudioAttachmentUploadPreview,
     autoCompleteSuggestionsLimit,
     autoCompleteTriggerSettings,
     channelId,
@@ -1679,6 +1679,7 @@ const ChannelWithContext = <
     additionalTouchableProps,
     Attachment,
     AttachmentActions,
+    AudioAttachment,
     Card,
     CardCover,
     CardFooter,

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

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

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

@@ -9,6 +9,7 @@ export const useCreateMessagesContext = <
   additionalTouchableProps,
   Attachment,
   AttachmentActions,
+  AudioAttachment,
   Card,
   CardCover,
   CardFooter,
@@ -99,6 +100,7 @@ export const useCreateMessagesContext = <
       additionalTouchableProps,
       Attachment,
       AttachmentActions,
+      AudioAttachment,
       Card,
       CardCover,
       CardFooter,