feat: wip - audio recorder hook

AlanFnz · Dec 6, 2024 · 611ce15 · 611ce15
1 parent bd5769d
commit 611ce15
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 15 deletions.
diff --git a/src/screens/HomeScreen/components/FloatingButton/hooks/useAudioRecorder.ts b/src/screens/HomeScreen/components/FloatingButton/hooks/useAudioRecorder.ts
@@ -1,15 +1,20 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import AudioRecorderPlayer from 'react-native-audio-recorder-player';
 
 import { usePermissions } from '@root/src/utils/hooks/usePermissions';
 
-const audioRecorderPlayer = new AudioRecorderPlayer();
-
 export const useAudioRecorder = () => {
+  const audioRecorderPlayer = useMemo(() => new AudioRecorderPlayer(), []);
   const [isRecording, setIsRecording] = useState(false);
-  const [recordingPath, setRecordingPath] = useState<string | null>(null);
+  const [recordingResult, setRecordingResult] = useState<string | null>(null);
   const { requestAudioPermissions } = usePermissions();
 
+  useEffect(() => {
+    return () => {
+      audioRecorderPlayer.removeRecordBackListener();
+    };
+  }, [audioRecorderPlayer]);
+
   const startRecording = async () => {
     try {
       const hasPermissions = await requestAudioPermissions();
@@ -19,9 +24,14 @@ export const useAudioRecorder = () => {
       }
 
       setIsRecording(true);
-      const path = 'audioRecord.m4a';
-      const uri = await audioRecorderPlayer.startRecorder(path);
-      setRecordingPath(uri);
+      const result = await audioRecorderPlayer.startRecorder();
+
+      audioRecorderPlayer.addRecordBackListener(e => {
+        console.log(e);
+        return;
+      });
+
+      console.log('🚀 ~ startRecording ~ result:', result);
     } catch (error) {
       console.error('Failed to start recording:', error);
       setIsRecording(false);
@@ -32,14 +42,16 @@ export const useAudioRecorder = () => {
     if (!isRecording) return;
 
     try {
-      const uri = 'uri';
+      const result = await audioRecorderPlayer.stopRecorder();
+      audioRecorderPlayer.removeRecordBackListener();
+
       setIsRecording(false);
-      console.log('Audio saved at:', uri);
-      return uri;
+      setRecordingResult(result);
+      console.log('🚀 ~ stopRecording ~ result:', result);
     } catch (error) {
       console.error('Failed to stop recording:', error);
     }
   };
 
-  return { startRecording, stopRecording, isRecording, recordingPath };
+  return { startRecording, stopRecording, isRecording, recordingResult };
 };
diff --git a/src/screens/HomeScreen/components/FloatingButton/hooks/useFloatingButtonHandlers.ts b/src/screens/HomeScreen/components/FloatingButton/hooks/useFloatingButtonHandlers.ts
@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react';
 import { Animated } from 'react-native';
+import { useAudioRecorder } from './useAudioRecorder';
 
 const pressAnimationDuration = 190;
 const releaseAnimationDuration = 150;
@@ -13,6 +14,8 @@ export const useFloatingButtonHandlers = ({
   onPress,
   onLongPress,
 }: UseFloatingButtonHandlersProps) => {
+  const { startRecording, stopRecording, isRecording } = useAudioRecorder();
+
   const [isLongPressed, setIsLongPressed] = useState(false);
 
   const bottomPositionAnim = useRef(new Animated.Value(25)).current;
@@ -28,7 +31,7 @@ export const useFloatingButtonHandlers = ({
     }).start();
   };
 
-  const handleLongPress = () => {
+  const handleLongPress = async () => {
     setIsLongPressed(true);
     Animated.parallel([
       Animated.timing(bottomPositionAnim, {
@@ -53,11 +56,14 @@ export const useFloatingButtonHandlers = ({
       }),
     ]).start();
 
-    onLongPress();
+    if (onLongPress) onLongPress();
+    await startRecording();
   };
 
-  const handlePressOut = () => {
-    if (!isLongPressed) onPress();
+  const handlePressOut = async () => {
+    if (isLongPressed) {
+      await stopRecording();
+    } else onPress();
 
     Animated.parallel([
       Animated.timing(bottomPositionAnim, {
@@ -94,6 +100,7 @@ export const useFloatingButtonHandlers = ({
 
   return {
     isLongPressed,
+    isRecording,
     animatedStyles,
     handlePressIn,
     handlePressOut,