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

package/src/components/MessageInput/hooks/useAudioController.tsx

@@ -0,0 +1,288 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { Alert, Platform } from 'react-native';
+
+import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
+import {
+  Audio,
+  AudioRecordingReturnType,
+  PlaybackStatus,
+  RecordingStatus,
+  Sound,
+  SoundReturnType,
+  triggerHaptic,
+} from '../../../native';
+import { File } from '../../../types/types';
+import { resampleWaveformData } from '../utils/audioSampling';
+import { normalizeAudioLevel } from '../utils/normalizeAudioLevel';
+
+export type RecordingStatusStates = 'idle' | 'recording' | 'stopped';
+
+/**
+ * The hook that controls all the async audio core features including start/stop or recording, player, upload/delete of the recorded audio.
+ */
+export const useAudioController = () => {
+  const [micLocked, setMicLocked] = useState(false);
+  const [permissionsGranted, setPermissionsGranted] = useState(true);
+  const [paused, setPaused] = useState<boolean>(true);
+  const [position, setPosition] = useState<number>(0);
+  const [progress, setProgress] = useState<number>(0);
+  const [waveformData, setWaveformData] = useState<number[]>([]);
+  const [isScheduledForSubmit, setIsScheduleForSubmit] = useState(false);
+  const [recording, setRecording] = useState<AudioRecordingReturnType>(undefined);
+  const [recordingDuration, setRecordingDuration] = useState<number>(0);
+  const [recordingStatus, setRecordingStatus] = useState<RecordingStatusStates>('idle');
+
+  const { sendMessage, uploadNewFile } = useMessageInputContext();
+
+  // For playback support in Expo CLI apps
+  const soundRef = useRef<SoundReturnType | null>(null);
+
+  // Effect to stop the player when the component unmounts
+  useEffect(
+    () => () => {
+      stopVoicePlayer();
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (isScheduledForSubmit) {
+      sendMessage();
+      setIsScheduleForSubmit(false);
+    }
+  }, [isScheduledForSubmit, sendMessage]);
+
+  const onVoicePlayerProgressHandler = (currentPosition: number, playbackDuration: number) => {
+    const currentProgress = currentPosition / playbackDuration;
+    if (currentProgress === 1) {
+      setPaused(true);
+      setProgress(0);
+    } else {
+      setProgress(currentProgress);
+    }
+  };
+
+  const onVoicePlayerPlaybackStatusUpdate = (status: PlaybackStatus) => {
+    if (status.shouldPlay === undefined || status.shouldPlay === true) {
+      setPosition(status?.currentPosition || status?.positionMillis);
+      setRecordingDuration(status.duration || status.durationMillis);
+
+      if (status.didJustFinish) {
+        onVoicePlayerProgressHandler(status.durationMillis, status.durationMillis);
+      } else {
+        // For Native CLI
+        if (status.currentPosition && status.duration)
+          onVoicePlayerProgressHandler(status.currentPosition, status.duration);
+        // For Expo CLI
+        else if (status.positionMillis && status.durationMillis)
+          onVoicePlayerProgressHandler(status.positionMillis, status.durationMillis);
+      }
+    }
+  };
+
+  const onVoicePlayerPlayPause = async () => {
+    if (paused) {
+      if (progress === 0) await startVoicePlayer();
+      else {
+        // For Native CLI
+        if (Audio.resumePlayer) await Audio.resumePlayer();
+        // For Expo CLI
+        if (soundRef.current?.playAsync) await soundRef.current.playAsync();
+      }
+    } else {
+      // For Native CLI
+      if (Audio.pausePlayer) await Audio.pausePlayer();
+      // For Expo CLI
+      if (soundRef.current?.pauseAsync) await soundRef.current.pauseAsync();
+    }
+    setPaused(!paused);
+  };
+
+  /**
+   * Function to start playing voice recording to preview it after recording.
+   */
+  const startVoicePlayer = async () => {
+    if (!recording) return;
+    // For Native CLI
+    if (Audio.startPlayer)
+      await Audio.startPlayer(recording, {}, onVoicePlayerPlaybackStatusUpdate);
+    // For Expo CLI
+    if (recording && typeof recording !== 'string') {
+      const uri = recording.getURI();
+      if (uri) {
+        soundRef.current = await Sound.initializeSound(
+          { uri },
+          {},
+          onVoicePlayerPlaybackStatusUpdate,
+        );
+        if (soundRef.current?.playAsync && soundRef.current.setProgressUpdateIntervalAsync) {
+          await soundRef.current.playAsync();
+          await soundRef.current.setProgressUpdateIntervalAsync(
+            Platform.OS === 'android' ? 100 : 60,
+          );
+        }
+      }
+    }
+  };
+
+  /**
+   * Function to stop playing voice recording.
+   */
+  const stopVoicePlayer = async () => {
+    // For Native CLI
+    if (Audio.stopPlayer) {
+      await Audio.stopPlayer();
+    }
+    // For Expo CLI
+    if (recording && typeof recording !== 'string') {
+      if (soundRef.current?.stopAsync && soundRef.current?.unloadAsync) {
+        await soundRef.current.stopAsync();
+        await soundRef.current?.unloadAsync();
+      }
+    }
+  };
+
+  const onRecordingStatusUpdate = (status: RecordingStatus) => {
+    if (status.isDoneRecording === true) {
+      return;
+    }
+    setRecordingDuration(status?.currentPosition || status.durationMillis);
+    // For expo android the lower bound is -120 so we need to normalize according to it. The `status.currentMetering` is undefined for Expo CLI apps, so we can use it.
+    const lowerBound = Platform.OS === 'ios' || status.currentMetering ? -60 : -120;
+    const normalizedAudioLevel = normalizeAudioLevel(
+      status.currentMetering || status.metering,
+      lowerBound,
+    );
+    setWaveformData((prev) => [...prev, normalizedAudioLevel]);
+  };
+
+  /**
+   * Function to start voice recording.
+   */
+  const startVoiceRecording = async () => {
+    setRecordingStatus('recording');
+    const recordingInfo = await Audio.startRecording(
+      {
+        isMeteringEnabled: true,
+      },
+      onRecordingStatusUpdate,
+    );
+    const accessGranted = recordingInfo.accessGranted;
+    if (accessGranted) {
+      setPermissionsGranted(true);
+      const recording = recordingInfo.recording;
+      if (recording && typeof recording !== 'string') {
+        recording.setProgressUpdateInterval(Platform.OS === 'android' ? 100 : 60);
+      }
+      setRecording(recording);
+      await stopVoicePlayer();
+    } else {
+      setPermissionsGranted(false);
+      resetState();
+      Alert.alert('Please allow Audio permissions in settings.');
+    }
+  };
+
+  /**
+   * Function to stop voice recording.
+   */
+  const stopVoiceRecording = async () => {
+    if (recording) {
+      // For Expo CLI
+      if (typeof recording !== 'string') {
+        await recording.stopAndUnloadAsync();
+        await Audio.stopRecording();
+      }
+      // For RN CLI
+      else {
+        await Audio.stopRecording();
+      }
+    }
+    setRecordingStatus('stopped');
+  };
+
+  /**
+   * Function to reset the state of the message input for async voice messages.
+   */
+  const resetState = () => {
+    setRecording(undefined);
+    setRecordingStatus('idle');
+    setMicLocked(false);
+    setWaveformData([]);
+    setPaused(true);
+    setPosition(0);
+    setProgress(0);
+  };
+
+  /**
+   * Function to delete voice recording.
+   */
+  const deleteVoiceRecording = async () => {
+    if (recordingStatus === 'recording') {
+      await stopVoiceRecording();
+    }
+    if (!paused) {
+      await stopVoicePlayer();
+    }
+    resetState();
+    triggerHaptic('impactMedium');
+  };
+
+  /**
+   * Function to upload or send voice recording.
+   * @param multiSendEnabled boolean
+   */
+  const uploadVoiceRecording = async (multiSendEnabled: boolean) => {
+    if (!paused) {
+      await stopVoicePlayer();
+    }
+    if (recordingStatus === 'recording') {
+      await stopVoiceRecording();
+    }
+
+    const durationInSeconds = parseFloat((recordingDuration / 1000).toFixed(3));
+
+    const resampledWaveformData = resampleWaveformData(waveformData, 100);
+
+    const file: File = {
+      duration: durationInSeconds,
+      mimeType: 'audio/aac',
+      name: `audio_recording_${new Date().toISOString()}.aac`,
+      type: 'voiceRecording',
+      uri: typeof recording !== 'string' ? (recording?.getURI() as string) : (recording as string),
+      waveform_data: resampledWaveformData,
+    };
+
+    if (multiSendEnabled) {
+      await uploadNewFile(file);
+    } else {
+      // FIXME: cannot call handleSubmit() directly as the function has stale reference to file uploads
+      await uploadNewFile(file);
+      setIsScheduleForSubmit(true);
+    }
+    resetState();
+  };
+
+  return {
+    deleteVoiceRecording,
+    micLocked,
+    onVoicePlayerPlayPause,
+    paused,
+    permissionsGranted,
+    position,
+    progress,
+    recording,
+    recordingDuration,
+    recordingStatus,
+    setMicLocked,
+    setRecording,
+    setRecordingDuration,
+    setRecordingStatus,
+    setWaveformData,
+    startVoiceRecording,
+    stopVoiceRecording,
+    uploadVoiceRecording,
+    waveformData,
+  };
+};

package/src/components/MessageInput/utils/audioSampling.ts

@@ -0,0 +1,108 @@
+export const resampleWaveformData = (waveformData: number[], amplitudesCount: number) =>
+  waveformData.length === amplitudesCount
+    ? waveformData
+    : waveformData.length > amplitudesCount
+    ? downSample(waveformData, amplitudesCount)
+    : upSample(waveformData, amplitudesCount);
+
+/**
+ * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
+ * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
+ * @param data
+ * @param targetOutputSize
+ */
+export function downSample(data: number[], targetOutputSize: number): number[] {
+  if (data.length <= targetOutputSize || targetOutputSize === 0) {
+    return data;
+  }
+
+  if (targetOutputSize === 1) return [mean(data)];
+
+  const result: number[] = [];
+  // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output
+  const bucketSize = (data.length - 2) / (targetOutputSize - 2);
+  let lastSelectedPointIndex = 0;
+  result.push(data[lastSelectedPointIndex]); // Always add the first point
+  let maxAreaPoint, maxArea, triangleArea;
+
+  for (let bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {
+    const previousBucketRefPoint = data[lastSelectedPointIndex];
+    const nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);
+
+    const currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;
+    const nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;
+    const countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;
+
+    maxArea = triangleArea = -1;
+
+    for (
+      let currentPointIndex = currentBucketStartIndex;
+      currentPointIndex < nextBucketStartIndex;
+      currentPointIndex++
+    ) {
+      const countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
+      const countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
+      const currentPointValue = data[currentPointIndex];
+
+      triangleArea = triangleAreaHeron(
+        triangleBase(Math.abs(previousBucketRefPoint - currentPointValue), countUnitsBetweenAtoB),
+        triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC),
+        triangleBase(Math.abs(previousBucketRefPoint - nextBucketMean), countUnitsBetweenAtoC),
+      );
+
+      if (triangleArea > maxArea) {
+        maxArea = triangleArea;
+        maxAreaPoint = data[currentPointIndex];
+        lastSelectedPointIndex = currentPointIndex;
+      }
+    }
+
+    if (typeof maxAreaPoint !== 'undefined') result.push(maxAreaPoint);
+  }
+
+  result.push(data[data.length - 1]); // Always add the last point
+
+  return result;
+}
+
+const triangleAreaHeron = (a: number, b: number, c: number) => {
+  const s = (a + b + c) / 2;
+  return Math.sqrt(s * (s - a) * (s - b) * (s - c));
+};
+
+const triangleBase = (a: number, b: number) => Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
+const mean = (values: number[]) => values.reduce((acc, value) => acc + value, 0) / values.length;
+export const divMod = (num: number, divisor: number) => [Math.floor(num / divisor), num % divisor];
+
+const getNextBucketMean = (data: number[], currentBucketIndex: number, bucketSize: number) => {
+  const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
+  let nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
+  nextNextBucketStartIndex =
+    nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;
+
+  return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
+};
+
+export const upSample = (values: number[], targetSize: number) => {
+  if (!values.length) {
+    console.warn('Cannot extend empty array of amplitudes.');
+    return values;
+  }
+
+  if (values.length > targetSize) {
+    console.warn('Requested to extend the waveformData that is longer than the target list size');
+    return values;
+  }
+
+  if (targetSize === values.length) return values;
+
+  // eslint-disable-next-line prefer-const
+  let [bucketSize, remainder] = divMod(targetSize, values.length);
+  const result: number[] = [];
+
+  for (let i = 0; i < values.length; i++) {
+    const extra = remainder && remainder-- ? 1 : 0;
+    result.push(...Array(bucketSize + extra).fill(values[i]));
+  }
+  return result;
+};

package/src/components/MessageInput/utils/normalizeAudioLevel.ts

@@ -0,0 +1,20 @@
+/**
+ * Utility function to normalize the audio level.
+ */
+export const normalizeAudioLevel = (value: number, lowerBound: number) => {
+  // For Native CLI, the lower bound is around -50
+  const upperBound = 0;
+
+  const delta = upperBound - lowerBound;
+
+  // In Native CLI Android, the value is undefined for loud audio
+  if (value === undefined) return 1;
+
+  if (value < lowerBound) {
+    return 0;
+  } else if (value >= upperBound) {
+    return 1;
+  } else {
+    return Math.abs((value - lowerBound) / delta);
+  }
+};

package/src/components/ProgressControl/ProgressControl.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 import { PanGestureHandler } from 'react-native-gesture-handler';
 import Animated, {
   cancelAnimation,
@@ -14,66 +14,65 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 export type ProgressControlProps = {
   duration: number;
   filledColor: string;
-  onPlayPause: (status?: boolean) => void;
   progress: number;
   testID: string;
-  width: number;
+  width: number | string;
+  onPlayPause?: (status?: boolean) => void;
   onProgressDrag?: (progress: number) => void;
 };
 
 const height = 2;
-const styles = StyleSheet.create({
-  containerStyle: {
-    borderRadius: 50,
-    height,
-  },
-  innerStyle: {
-    height,
-  },
-  progressControlThumbStyle: {
-    borderRadius: 5,
-    elevation: 6,
-    height: 20,
-    shadowOffset: {
-      height: 3,
-      width: 0,
-    },
-    shadowOpacity: 0.27,
-    shadowRadius: 4.65,
-    top: -11,
-    width: 5,
-  },
-});
 
 const ProgressControlThumb = () => {
   const {
     theme: {
-      colors: { black },
+      colors: { black, grey_dark, static_white },
     },
   } = useTheme();
   return (
     <View
-      style={[styles.progressControlThumbStyle, { backgroundColor: '#ffffff', shadowColor: black }]}
+      style={[
+        styles.progressControlThumbStyle,
+        { backgroundColor: static_white, borderColor: grey_dark, shadowColor: black },
+      ]}
     />
   );
 };
 
 export const ProgressControl = React.memo(
   (props: ProgressControlProps) => {
-    const { duration, filledColor, onPlayPause, onProgressDrag, progress, testID, width } = props;
+    const {
+      duration,
+      filledColor: filledColorFromProp,
+      onPlayPause,
+      onProgressDrag,
+      progress,
+      testID,
+      width,
+    } = props;
+    const { width: windowWidth } = Dimensions.get('screen');
+    const widthInNumbers = width
+      ? typeof width === 'string'
+        ? (windowWidth * Number(width?.substring(0, width.length - 1))) / 100
+        : width
+      : 0;
     const {
       theme: {
         colors: { grey_dark },
+        progressControl: { container, filledColor: filledColorFromTheme, filledStyles, thumb },
       },
     } = useTheme();
 
     const state = useSharedValue(0);
     const translateX = useSharedValue(0);
+    const filledColor = filledColorFromProp || filledColorFromTheme;
 
     useEffect(() => {
-      state.value = progress * width;
-      translateX.value = progress * width;
-    }, [progress]);
+      if (progress <= 1) {
+        state.value = progress * widthInNumbers;
+        translateX.value = progress * widthInNumbers;
+      }
+    }, [progress, widthInNumbers]);
 
     const animatedStyles = useAnimatedStyle(() => ({
       backgroundColor: filledColor,
@@ -88,33 +87,36 @@ export const ProgressControl = React.memo(
       {
         onActive: (event) => {
           state.value = translateX.value + event.translationX;
-          if (state.value > width) state.value = width;
+          if (state.value > widthInNumbers) state.value = widthInNumbers;
           else if (state.value < 0) state.value = 0;
         },
         onFinish: () => {
           translateX.value = state.value;
-          const dragFinishLocationInSeconds = (state.value / width) * duration;
+          const dragFinishLocationInSeconds = (state.value / widthInNumbers) * duration;
           if (onProgressDrag) runOnJS(onProgressDrag)(dragFinishLocationInSeconds);
-          runOnJS(onPlayPause)(false);
+          if (onPlayPause) runOnJS(onPlayPause)(false);
         },
         onStart: () => {
-          runOnJS(onPlayPause)(true);
+          if (onPlayPause) runOnJS(onPlayPause)(true);
           cancelAnimation(translateX);
           state.value = translateX.value;
         },
       },
-      [duration],
+      [duration, widthInNumbers],
     );
+
     return (
-      <View style={[styles.containerStyle, { backgroundColor: grey_dark, width }]}>
-        <Animated.View style={[styles.innerStyle, animatedStyles]} />
+      <View
+        style={[styles.container, { backgroundColor: grey_dark, width: widthInNumbers }, container]}
+      >
+        <Animated.View style={[styles.filledStyle, animatedStyles, filledStyles]} />
 
         <PanGestureHandler
           maxPointers={1}
           onGestureEvent={onProgressDrag ? onGestureEvent : undefined}
           testID={testID}
         >
-          <Animated.View style={[thumbStyles]}>
+          <Animated.View style={[thumbStyles, thumb]}>
             {onProgressDrag && <ProgressControlThumb />}
           </Animated.View>
         </PanGestureHandler>
@@ -122,10 +124,37 @@ export const ProgressControl = React.memo(
     );
   },
   (prevProps, nextProps) => {
-    if (prevProps.duration === nextProps.duration && prevProps.progress === nextProps.progress)
+    if (
+      prevProps.duration === nextProps.duration &&
+      prevProps.progress === nextProps.progress &&
+      prevProps.width === nextProps.width
+    )
       return true;
     else return false;
   },
 );
 
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 50,
+    height,
+  },
+  filledStyle: {
+    height,
+  },
+  progressControlThumbStyle: {
+    borderRadius: 5,
+    borderWidth: 0.2,
+    elevation: 6,
+    height: 20,
+    shadowOffset: {
+      height: 3,
+      width: 0,
+    },
+    shadowOpacity: 0.27,
+    shadowRadius: 4.65,
+    top: -11,
+    width: 5,
+  },
+});
 ProgressControl.displayName = 'ProgressControl';