stream-chat-react-native-core 5.28.1 → 5.29.0

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

@@ -0,0 +1,192 @@
+import React from 'react';
+import { Alert, Linking, Pressable, StyleSheet } from 'react-native';
+
+import {
+  ChannelContextValue,
+  useChannelContext,
+} from '../../../../contexts/channelContext/ChannelContext';
+import {
+  MessageInputContextValue,
+  useMessageInputContext,
+} from '../../../../contexts/messageInputContext/MessageInputContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { Mic } from '../../../../icons/Mic';
+import { AudioRecordingReturnType, triggerHaptic } from '../../../../native';
+
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
+type AudioRecordingButtonPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> &
+  Pick<MessageInputContextValue<StreamChatGenerics>, 'asyncMessagesMinimumPressDuration'> & {
+    /**
+     * The current voice recording that is in progress.
+     */
+    recording: AudioRecordingReturnType;
+    /**
+     * Size of the mic button.
+     */
+    buttonSize?: number;
+    /**
+     * Handler to determine what should happen on long press of the mic button.
+     */
+    handleLongPress?: () => void;
+    /**
+     * Handler to determine what should happen on press of the mic button.
+     */
+    handlePress?: () => void;
+    /**
+     * Boolean to determine if the audio recording permissions are granted.
+     */
+    permissionsGranted?: boolean;
+    /**
+     * Function to start the voice recording.
+     */
+    startVoiceRecording?: () => Promise<void>;
+  };
+
+const AudioRecordingButtonWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AudioRecordingButtonPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    asyncMessagesMinimumPressDuration,
+    buttonSize,
+    disabled,
+    handleLongPress,
+    handlePress,
+    permissionsGranted,
+    recording,
+    startVoiceRecording,
+  } = props;
+
+  const {
+    theme: {
+      colors: { grey, light_gray, white },
+      messageInput: {
+        audioRecordingButton: { container, micIcon },
+      },
+    },
+  } = useTheme();
+  const { t } = useTranslationContext();
+
+  const onPressHandler = () => {
+    if (handlePress) {
+      handlePress();
+    }
+    if (!recording) {
+      triggerHaptic('notificationError');
+      Alert.alert(t('Hold to start recording.'));
+    }
+  };
+
+  const onLongPressHandler = () => {
+    if (handleLongPress) {
+      handleLongPress();
+      return;
+    }
+    if (!recording) {
+      triggerHaptic('impactHeavy');
+      if (!permissionsGranted) {
+        Alert.alert(t('Please allow Audio permissions in settings.'), '', [
+          {
+            onPress: () => {
+              Linking.openSettings();
+            },
+            text: t('Open Settings'),
+          },
+        ]);
+        return;
+      }
+      if (startVoiceRecording) startVoiceRecording();
+    }
+  };
+
+  return (
+    <Pressable
+      delayLongPress={asyncMessagesMinimumPressDuration}
+      disabled={disabled}
+      onLongPress={onLongPressHandler}
+      onPress={onPressHandler}
+      style={({ pressed }) => [
+        styles.container,
+        {
+          backgroundColor: pressed ? light_gray : white,
+          height: buttonSize || 40,
+          width: buttonSize || 40,
+        },
+        container,
+      ]}
+      testID='audio-button'
+    >
+      <Mic fill={grey} size={32} {...micIcon} />
+    </Pressable>
+  );
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AudioRecordingButtonPropsWithContext<StreamChatGenerics>,
+  nextProps: AudioRecordingButtonPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    asyncMessagesMinimumPressDuration: prevAsyncMessagesMinimumPressDuration,
+    disabled: prevDisabled,
+    recording: prevRecording,
+  } = prevProps;
+  const {
+    asyncMessagesMinimumPressDuration: nextAsyncMessagesMinimumPressDuration,
+    disabled: nextDisabled,
+    recording: nextRecording,
+  } = nextProps;
+
+  const asyncMessagesMinimumPressDurationEqual =
+    prevAsyncMessagesMinimumPressDuration === nextAsyncMessagesMinimumPressDuration;
+  if (!asyncMessagesMinimumPressDurationEqual) return false;
+
+  const disabledEqual = prevDisabled === nextDisabled;
+  if (!disabledEqual) return false;
+
+  const recordingEqual = prevRecording === nextRecording;
+  if (!recordingEqual) return false;
+
+  return true;
+};
+
+const MemoizedAudioRecordingButton = React.memo(
+  AudioRecordingButtonWithContext,
+  areEqual,
+) as typeof AudioRecordingButtonWithContext;
+
+export type AudioRecordingButtonProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<AudioRecordingButtonPropsWithContext<StreamChatGenerics>> & {
+  recording: AudioRecordingReturnType;
+};
+
+/**
+ * Component to display the mic button on the Message Input.
+ */
+export const AudioRecordingButton = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AudioRecordingButtonProps<StreamChatGenerics>,
+) => {
+  const { disabled = false } = useChannelContext<StreamChatGenerics>();
+  const { asyncMessagesMinimumPressDuration } = useMessageInputContext<StreamChatGenerics>();
+
+  return (
+    <MemoizedAudioRecordingButton {...{ asyncMessagesMinimumPressDuration, disabled }} {...props} />
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    borderRadius: 50,
+    justifyContent: 'center',
+  },
+});
+
+AudioRecordingButton.displayName = 'AudioRecordingButton{messageInput}';

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import dayjs from 'dayjs';
+
+import {
+  MessageInputContextValue,
+  useMessageInputContext,
+} from '../../../../contexts/messageInputContext/MessageInputContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
+type AudioRecordingInProgressPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageInputContextValue<StreamChatGenerics>, 'AudioRecordingWaveform'> & {
+  /**
+   * The waveform data to be presented to show the audio levels.
+   */
+  waveformData: number[];
+  /**
+   * Maximum number of waveform lines that should be rendered in the UI.
+   */
+  maxDataPointsDrawn?: number;
+  /**
+   * The duration of the voice recording.
+   */
+  recordingDuration?: number;
+};
+
+const AudioRecordingInProgressWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AudioRecordingInProgressPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    AudioRecordingWaveform,
+    maxDataPointsDrawn = 80,
+    recordingDuration,
+    waveformData,
+  } = props;
+
+  const {
+    theme: {
+      colors: { grey_dark },
+      messageInput: {
+        audioRecordingInProgress: { container, durationText },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.container, container]}>
+      {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
+      <Text style={[styles.durationText, { color: grey_dark }, durationText]}>
+        {recordingDuration ? dayjs.duration(recordingDuration).format('mm:ss') : null}
+      </Text>
+      <AudioRecordingWaveform maxDataPointsDrawn={maxDataPointsDrawn} waveformData={waveformData} />
+    </View>
+  );
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AudioRecordingInProgressPropsWithContext<StreamChatGenerics>,
+  nextProps: AudioRecordingInProgressPropsWithContext<StreamChatGenerics>,
+) => {
+  const { recordingDuration: prevRecordingDuration } = prevProps;
+  const { recordingDuration: nextRecordingDuration } = nextProps;
+
+  const recordingDurationEqual = prevRecordingDuration === nextRecordingDuration;
+
+  if (!recordingDurationEqual) return false;
+
+  return true;
+};
+
+const MemoizedAudioRecordingInProgress = React.memo(
+  AudioRecordingInProgressWithContext,
+  areEqual,
+) as typeof AudioRecordingInProgressWithContext;
+
+export type AudioRecordingInProgressProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<AudioRecordingInProgressPropsWithContext<StreamChatGenerics>> & {
+  waveformData: number[];
+};
+
+/**
+ * Component displayed when the audio is in the recording state.
+ */
+export const AudioRecordingInProgress = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AudioRecordingInProgressProps<StreamChatGenerics>,
+) => {
+  const { AudioRecordingWaveform } = useMessageInputContext<StreamChatGenerics>();
+
+  return <MemoizedAudioRecordingInProgress {...{ AudioRecordingWaveform }} {...props} />;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingBottom: 8,
+    paddingTop: 4,
+  },
+  durationText: {
+    fontSize: 16,
+  },
+});
+
+AudioRecordingInProgress.displayName = 'AudioRecordingInProgress{messageInput}';

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

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+import Animated from 'react-native-reanimated';
+
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { ArrowUp, Lock } from '../../../../icons';
+
+export type AudioRecordingLockIndicatorProps = {
+  /**
+   * 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;
+  /**
+   * Height of the message input, to apply necessary position adjustments to this component.
+   */
+  messageInputHeight?: number;
+  /**
+   * Styles of the lock indicator.
+   */
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Component displayed to show the lock state of the recording when the button is slided up.
+ */
+export const AudioRecordingLockIndicator = ({
+  messageInputHeight,
+  micLocked,
+  style,
+}: AudioRecordingLockIndicatorProps) => {
+  const [visible, setVisible] = useState(true);
+  const timeoutRef = useRef<NodeJS.Timer>();
+
+  useEffect(() => {
+    timeoutRef.current = setTimeout(() => {
+      if (micLocked) {
+        setVisible(false);
+      }
+    }, 2000);
+
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, [micLocked]);
+
+  const {
+    theme: {
+      colors: { accent_blue, grey, light_gray },
+      messageInput: {
+        audioRecordingLockIndicator: { arrowUpIcon, container, lockIcon },
+      },
+    },
+  } = useTheme();
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        style,
+        { backgroundColor: light_gray, bottom: messageInputHeight },
+        container,
+      ]}
+    >
+      <Lock color={micLocked ? accent_blue : grey} size={32} {...lockIcon} />
+      {!micLocked && <ArrowUp color={grey} size={32} {...arrowUpIcon} />}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 50,
+    margin: 5,
+    padding: 8,
+    position: 'absolute',
+    right: 0,
+    zIndex: 1,
+  },
+});

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import dayjs from 'dayjs';
+
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { Pause, Play } from '../../../../icons';
+
+import { WaveProgressBar } from '../../../ProgressControl/WaveProgressBar';
+
+export type AudioRecordingPreviewProps = {
+  /**
+   * Boolean used to show the paused state of the player.
+   */
+  paused: boolean;
+  /**
+   * Number used to show the current position of the audio being played.
+   */
+  position: number;
+  /**
+   * Number used to show the percentage of progress of the audio being played. It should be in 0-1 range.
+   */
+  progress: number;
+  /**
+   * The waveform data to be presented to show the audio levels.
+   */
+  waveformData: number[];
+  /**
+   * Function to play or pause the audio player.
+   */
+  onVoicePlayerPlayPause?: () => Promise<void>;
+};
+
+/**
+ * Component displayed when the audio is recorded and can be previewed.
+ */
+export const AudioRecordingPreview = (props: AudioRecordingPreviewProps) => {
+  const { onVoicePlayerPlayPause, paused, position, progress, waveformData } = props;
+
+  const {
+    theme: {
+      colors: { accent_blue, grey_dark },
+      messageInput: {
+        audioRecordingPreview: {
+          container,
+          currentTime,
+          infoContainer,
+          pauseIcon,
+          playIcon,
+          progressBar,
+        },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.container, container]}>
+      <View style={[styles.infoContainer, infoContainer]}>
+        <Pressable onPress={onVoicePlayerPlayPause}>
+          {paused ? (
+            <Play fill={accent_blue} height={32} width={32} {...playIcon} />
+          ) : (
+            <Pause fill={accent_blue} height={32} width={32} {...pauseIcon} />
+          )}
+        </Pressable>
+        {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
+        <Text style={[styles.currentTime, { color: grey_dark }, currentTime]}>
+          {dayjs.duration(position).format('mm:ss')}
+        </Text>
+      </View>
+      <View style={[styles.progressBar, progressBar]}>
+        {/* Since the progress is in range 0-1 we convert it in terms of 100% */}
+        <WaveProgressBar progress={progress} waveformData={waveformData} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    paddingBottom: 8,
+    paddingTop: 4,
+  },
+  currentTime: {
+    fontSize: 16,
+    marginLeft: 4,
+  },
+  infoContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'row',
+  },
+  progressBar: {
+    flex: 3,
+  },
+});
+
+AudioRecordingPreview.displayName = 'AudioRecordingPreview{messageInput}';

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+
+export type AudioRecordingWaveformProps = {
+  /**
+   * Maximum number of waveform lines that should be rendered in the UI.
+   */
+  maxDataPointsDrawn: number;
+  /**
+   * The waveform data to be presented to show the audio levels.
+   */
+  waveformData: number[];
+};
+
+/**
+ * Waveform Component displayed when the audio is in the recording state.
+ */
+export const AudioRecordingWaveform = (props: AudioRecordingWaveformProps) => {
+  const { maxDataPointsDrawn, waveformData } = props;
+  const {
+    theme: {
+      colors: { grey_dark },
+      messageInput: {
+        audioRecordingWaveform: { container, waveform: waveformTheme },
+      },
+    },
+  } = useTheme();
+  return (
+    <View style={[styles.container, container]}>
+      {waveformData.slice(-maxDataPointsDrawn).map((waveform, index) => (
+        <View
+          key={index}
+          style={[
+            styles.waveform,
+            {
+              backgroundColor: grey_dark,
+              height: waveform * 30 > 3 ? waveform * 30 : 3,
+            },
+            waveformTheme,
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+  },
+  waveform: {
+    alignSelf: 'center',
+    borderRadius: 2,
+    marginHorizontal: 1,
+    width: 2,
+  },
+});
+
+AudioRecordingWaveform.displayName = 'AudioRecordingWaveform{messageInput}';