stream-chat-react-native-core 5.28.1-beta.1 → 5.29.0-beta.1

package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap

@@ -40,14 +40,14 @@ exports[`SendButton should render a non-editing disabled SendButton 1`] = `
 >
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight={24}
-    bbWidth={24}
+    bbHeight={32}
+    bbWidth={32}
+    fill="#DBDBDB"
     focusable={false}
-    height={24}
+    height={32}
     meetOrSlice={0}
     minX={0}
     minY={0}
-    pathFill="#DBDBDB"
     style={
       [
         {
@@ -56,29 +56,50 @@ exports[`SendButton should render a non-editing disabled SendButton 1`] = `
         },
         {
           "flex": 0,
-          "height": 24,
-          "width": 24,
+          "height": 32,
+          "width": 32,
         },
       ]
     }
-    vbHeight={24}
-    vbWidth={24}
-    width={24}
+    vbHeight={32}
+    vbWidth={32}
+    width={32}
   >
     <RNSVGGroup
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4292598747,
           "type": 0,
         }
       }
+      propList={
+        [
+          "fill",
+        ]
+      }
     >
+      <RNSVGCircle
+        cx={16}
+        cy={16}
+        fill={
+          {
+            "payload": 4292598747,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "fill",
+          ]
+        }
+        r={16}
+      />
       <RNSVGPath
         clipRule={0}
-        d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10zM8 11h4V8l4 4-4 4v-3H8v-2z"
+        d="M9.33398 14.6666H16.0007V9.33325L22.6673 15.9999L16.0007 22.6666V17.3333H9.33398V14.6666Z"
         fill={
           {
-            "payload": 4292598747,
+            "payload": 4294967295,
             "type": 0,
           }
         }
@@ -135,14 +156,14 @@ exports[`SendButton should render a non-editing enabled SendButton 1`] = `
 >
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight={24}
-    bbWidth={24}
+    bbHeight={32}
+    bbWidth={32}
+    fill="#005FFF"
     focusable={false}
-    height={24}
+    height={32}
     meetOrSlice={0}
     minX={0}
     minY={0}
-    pathFill="#005FFF"
     style={
       [
         {
@@ -151,29 +172,50 @@ exports[`SendButton should render a non-editing enabled SendButton 1`] = `
         },
         {
           "flex": 0,
-          "height": 24,
-          "width": 24,
+          "height": 32,
+          "width": 32,
         },
       ]
     }
-    vbHeight={24}
-    vbWidth={24}
-    width={24}
+    vbHeight={32}
+    vbWidth={32}
+    width={32}
   >
     <RNSVGGroup
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4278214655,
           "type": 0,
         }
       }
+      propList={
+        [
+          "fill",
+        ]
+      }
     >
+      <RNSVGCircle
+        cx={16}
+        cy={16}
+        fill={
+          {
+            "payload": 4278214655,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "fill",
+          ]
+        }
+        r={16}
+      />
       <RNSVGPath
         clipRule={0}
-        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14v-4H8l4-4 4 4h-3v4h-2z"
+        d="M14.6673 16V22.6667H17.334V16H22.6673L16.0007 9.33337L9.33398 16H14.6673Z"
         fill={
           {
-            "payload": 4278214655,
+            "payload": 4294967295,
             "type": 0,
           }
         }
@@ -230,14 +272,14 @@ exports[`SendButton should render an editing disabled SendButton 1`] = `
 >
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight={24}
-    bbWidth={24}
+    bbHeight={32}
+    bbWidth={32}
+    fill="#DBDBDB"
     focusable={false}
-    height={24}
+    height={32}
     meetOrSlice={0}
     minX={0}
     minY={0}
-    pathFill="#DBDBDB"
     style={
       [
         {
@@ -246,29 +288,50 @@ exports[`SendButton should render an editing disabled SendButton 1`] = `
         },
         {
           "flex": 0,
-          "height": 24,
-          "width": 24,
+          "height": 32,
+          "width": 32,
         },
       ]
     }
-    vbHeight={24}
-    vbWidth={24}
-    width={24}
+    vbHeight={32}
+    vbWidth={32}
+    width={32}
   >
     <RNSVGGroup
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4292598747,
           "type": 0,
         }
       }
+      propList={
+        [
+          "fill",
+        ]
+      }
     >
+      <RNSVGCircle
+        cx={16}
+        cy={16}
+        fill={
+          {
+            "payload": 4292598747,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "fill",
+          ]
+        }
+        r={16}
+      />
       <RNSVGPath
         clipRule={0}
-        d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10 10-4.48 10-10zM8 11h4V8l4 4-4 4v-3H8v-2z"
+        d="M9.33398 14.6666H16.0007V9.33325L22.6673 15.9999L16.0007 22.6666V17.3333H9.33398V14.6666Z"
         fill={
           {
-            "payload": 4292598747,
+            "payload": 4294967295,
             "type": 0,
           }
         }
@@ -325,14 +388,14 @@ exports[`SendButton should render an editing enabled SendButton 1`] = `
 >
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight={24}
-    bbWidth={24}
+    bbHeight={32}
+    bbWidth={32}
+    fill="#005FFF"
     focusable={false}
-    height={24}
+    height={32}
     meetOrSlice={0}
     minX={0}
     minY={0}
-    pathFill="#005FFF"
     style={
       [
         {
@@ -341,29 +404,50 @@ exports[`SendButton should render an editing enabled SendButton 1`] = `
         },
         {
           "flex": 0,
-          "height": 24,
-          "width": 24,
+          "height": 32,
+          "width": 32,
         },
       ]
     }
-    vbHeight={24}
-    vbWidth={24}
-    width={24}
+    vbHeight={32}
+    vbWidth={32}
+    width={32}
   >
     <RNSVGGroup
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4278214655,
           "type": 0,
         }
       }
+      propList={
+        [
+          "fill",
+        ]
+      }
     >
+      <RNSVGCircle
+        cx={16}
+        cy={16}
+        fill={
+          {
+            "payload": 4278214655,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "fill",
+          ]
+        }
+        r={16}
+      />
       <RNSVGPath
         clipRule={0}
-        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14v-4H8l4-4 4 4h-3v4h-2z"
+        d="M14.6673 16V22.6667H17.334V16H22.6673L16.0007 9.33337L9.33398 16H14.6673Z"
         fill={
           {
-            "payload": 4278214655,
+            "payload": 4294967295,
             "type": 0,
           }
         }

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -0,0 +1,313 @@
+import React from 'react';
+import { Pressable, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
+
+import Animated from 'react-native-reanimated';
+
+import dayjs from 'dayjs';
+
+import {
+  ChannelContextValue,
+  useChannelContext,
+} from '../../../../contexts/channelContext/ChannelContext';
+import {
+  MessageInputContextValue,
+  useMessageInputContext,
+} from '../../../../contexts/messageInputContext/MessageInputContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { ArrowLeft, CircleStop, Delete, Mic, SendCheck } from '../../../../icons';
+
+import { AudioRecordingReturnType } from '../../../../native';
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
+type AudioRecorderPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> &
+  Pick<MessageInputContextValue<StreamChatGenerics>, 'asyncMessagesMultiSendEnabled'> & {
+    /**
+     * Function to stop and delete the voice recording.
+     */
+    deleteVoiceRecording: () => Promise<void>;
+    /**
+     * Boolean used to show if the voice recording state is locked. This makes sure the mic button shouldn't be pressed any longer.
+     * When the mic is locked the `AudioRecordingInProgress` component shows up.
+     */
+    micLocked: boolean;
+    /**
+     * The current voice recording that is in progress.
+     */
+    recording: AudioRecordingReturnType;
+    /**
+     * Boolean to determine if the recording has been stopped.
+     */
+    recordingStopped: boolean;
+    /**
+     * Function to stop the ongoing voice recording.
+     */
+    stopVoiceRecording: () => Promise<void>;
+    /**
+     * Function to upload the voice recording.
+     */
+    uploadVoiceRecording: (multiSendEnabled: boolean) => Promise<void>;
+    /**
+     * The duration of the voice recording.
+     */
+    recordingDuration?: number;
+    /**
+     * Style used in slide to cancel container.
+     */
+    slideToCancelStyle?: StyleProp<ViewStyle>;
+  };
+
+const StopRecording = ({
+  stopVoiceRecordingHandler,
+}: {
+  stopVoiceRecordingHandler: () => Promise<void>;
+}) => {
+  const {
+    theme: {
+      colors: { accent_red },
+      messageInput: {
+        audioRecorder: { circleStopIcon, pausedContainer },
+      },
+    },
+  } = useTheme();
+  return (
+    <Pressable
+      onPress={stopVoiceRecordingHandler}
+      style={[styles.pausedContainer, pausedContainer]}
+    >
+      <CircleStop fill={accent_red} size={32} {...circleStopIcon} />
+    </Pressable>
+  );
+};
+
+const UploadRecording = ({
+  asyncMessagesMultiSendEnabled,
+  uploadVoiceRecordingHandler,
+}: {
+  asyncMessagesMultiSendEnabled: boolean;
+  uploadVoiceRecordingHandler: (multiSendEnabled: boolean) => Promise<void>;
+}) => {
+  const {
+    theme: {
+      colors: { accent_blue },
+      messageInput: {
+        audioRecorder: { checkContainer, sendCheckIcon },
+      },
+    },
+  } = useTheme();
+  return (
+    <Pressable
+      onPress={async () => {
+        await uploadVoiceRecordingHandler(asyncMessagesMultiSendEnabled);
+      }}
+      style={[styles.checkContainer, checkContainer]}
+    >
+      <SendCheck fill={accent_blue} size={32} {...sendCheckIcon} />
+    </Pressable>
+  );
+};
+
+const DeleteRecording = ({
+  deleteVoiceRecordingHandler,
+  disabled,
+}: {
+  deleteVoiceRecordingHandler: () => Promise<void>;
+  disabled?: boolean;
+}) => {
+  const {
+    theme: {
+      colors: { accent_blue },
+      messageInput: {
+        audioRecorder: { deleteContainer, deleteIcon },
+      },
+    },
+  } = useTheme();
+  return (
+    <Pressable
+      disabled={disabled}
+      onPress={deleteVoiceRecordingHandler}
+      style={[styles.deleteContainer, deleteContainer]}
+      testID='delete-button'
+    >
+      <Delete fill={accent_blue} size={32} {...deleteIcon} />
+    </Pressable>
+  );
+};
+
+const AudioRecorderWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AudioRecorderPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    asyncMessagesMultiSendEnabled,
+    deleteVoiceRecording,
+    disabled,
+    micLocked,
+    recordingDuration,
+    recordingStopped,
+    slideToCancelStyle,
+    stopVoiceRecording,
+    uploadVoiceRecording,
+  } = props;
+
+  const {
+    theme: {
+      colors: { accent_red, grey_dark },
+      messageInput: {
+        audioRecorder: { arrowLeftIcon, micContainer, micIcon, slideToCancelContainer },
+      },
+    },
+  } = useTheme();
+
+  if (micLocked) {
+    if (recordingStopped) {
+      return (
+        <>
+          <DeleteRecording deleteVoiceRecordingHandler={deleteVoiceRecording} disabled={disabled} />
+          <UploadRecording
+            asyncMessagesMultiSendEnabled={asyncMessagesMultiSendEnabled}
+            uploadVoiceRecordingHandler={uploadVoiceRecording}
+          />
+        </>
+      );
+    } else {
+      return (
+        <>
+          <View style={[styles.micContainer, micContainer]}>
+            <Mic fill={recordingDuration !== 0 ? accent_red : grey_dark} size={32} {...micIcon} />
+          </View>
+          <StopRecording stopVoiceRecordingHandler={stopVoiceRecording} />
+          <UploadRecording
+            asyncMessagesMultiSendEnabled={asyncMessagesMultiSendEnabled}
+            uploadVoiceRecordingHandler={uploadVoiceRecording}
+          />
+        </>
+      );
+    }
+  } else {
+    return (
+      <>
+        <View style={[styles.micContainer, micContainer]}>
+          <Mic fill={recordingDuration !== 0 ? accent_red : grey_dark} size={32} {...micIcon} />
+          <Text style={[styles.durationLabel, { color: grey_dark }]}>
+            {recordingDuration ? dayjs.duration(recordingDuration).format('mm:ss') : null}
+          </Text>
+        </View>
+        <Animated.View
+          style={[styles.slideToCancelContainer, slideToCancelStyle, slideToCancelContainer]}
+        >
+          <Text style={[styles.slideToCancel, { color: grey_dark }]}>Slide to Cancel</Text>
+          <ArrowLeft fill={grey_dark} size={24} {...arrowLeftIcon} />
+        </Animated.View>
+      </>
+    );
+  }
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AudioRecorderPropsWithContext<StreamChatGenerics>,
+  nextProps: AudioRecorderPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    asyncMessagesMultiSendEnabled: prevAsyncMessagesMultiSendEnabled,
+    disabled: prevDisabled,
+    micLocked: prevMicLocked,
+    recording: prevRecording,
+    recordingDuration: prevRecordingDuration,
+    recordingStopped: prevRecordingStopped,
+  } = prevProps;
+  const {
+    asyncMessagesMultiSendEnabled: nextAsyncMessagesMultiSendEnabled,
+    disabled: nextDisabled,
+    micLocked: nextMicLocked,
+    recording: nextRecording,
+    recordingDuration: nextRecordingDuration,
+    recordingStopped: nextRecordingStopped,
+  } = nextProps;
+
+  const asyncMessagesMultiSendEnabledEqual =
+    prevAsyncMessagesMultiSendEnabled === nextAsyncMessagesMultiSendEnabled;
+  if (!asyncMessagesMultiSendEnabledEqual) return false;
+
+  const disabledEqual = prevDisabled === nextDisabled;
+  if (!disabledEqual) return false;
+
+  const micLockedEqual = prevMicLocked === nextMicLocked;
+  if (!micLockedEqual) return false;
+
+  const recordingEqual = prevRecording === nextRecording;
+  if (!recordingEqual) return false;
+
+  const recordingDurationEqual = prevRecordingDuration === nextRecordingDuration;
+  if (!recordingDurationEqual) return false;
+
+  const recordingStoppedEqual = prevRecordingStopped === nextRecordingStopped;
+  if (!recordingStoppedEqual) return false;
+
+  return true;
+};
+
+const MemoizedAudioRecorder = React.memo(
+  AudioRecorderWithContext,
+  areEqual,
+) as typeof AudioRecorderWithContext;
+
+export type AudioRecorderProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<AudioRecorderPropsWithContext<StreamChatGenerics>> &
+  Pick<
+    AudioRecorderPropsWithContext<StreamChatGenerics>,
+    | 'deleteVoiceRecording'
+    | 'micLocked'
+    | 'recording'
+    | 'recordingStopped'
+    | 'stopVoiceRecording'
+    | 'uploadVoiceRecording'
+  >;
+
+/**
+ * Component to display the Recording UI in the Message Input.
+ */
+export const AudioRecorder = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AudioRecorderProps<StreamChatGenerics>,
+) => {
+  const { disabled = false } = useChannelContext<StreamChatGenerics>();
+  const { asyncMessagesMultiSendEnabled } = useMessageInputContext<StreamChatGenerics>();
+
+  return (
+    <MemoizedAudioRecorder
+      {...{
+        asyncMessagesMultiSendEnabled,
+        disabled,
+      }}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  checkContainer: {},
+  deleteContainer: {},
+  durationLabel: {
+    fontSize: 14,
+  },
+  micContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  pausedContainer: {},
+  slideToCancel: {
+    fontSize: 18,
+  },
+  slideToCancelContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+});
+
+AudioRecorder.displayName = 'AudioRecorder{messageInput}';