Feat/recording notification

apps/common-app/src/demos/Record/Record.tsx

@@ -1,18 +1,16 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { AudioBuffer, AudioManager } from 'react-native-audio-api';
+import { AudioManager, RecordingNotificationManager } from 'react-native-audio-api';
 
 import { Alert, StyleSheet, View } from 'react-native';
 import { Container } from '../../components';
 
-import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { audioRecorder as Recorder, audioContext } from '../../singletons';
+import { audioRecorder as Recorder } from '../../singletons';
 import ControlPanel from './ControlPanel';
-import PlaybackVisualization from './PlaybackVisualization';
 import RecordingTime from './RecordingTime';
 import RecordingVisualization from './RecordingVisualization';
 import Status from './Status';
 import { RecordingState } from './types';
+import { AudioEventSubscription } from 'react-native-audio-api/lib/typescript/events';
 
 AudioManager.setAudioSessionOptions({
   iosCategory: 'playAndRecord',
@@ -23,12 +21,42 @@ AudioManager.setAudioSessionOptions({
 const Record: FC = () => {
   const [state, setState] = useState<RecordingState>(RecordingState.Idle);
   const [hasPermissions, setHasPermissions] = useState<boolean>(false);
-  const playbackPosition = useSharedValue<number>(0);
-  const [durationSeconds, setDurationSeconds] = useState<number>(0);
-  const [playbackBuffer, setPlaybackBuffer] = useState<AudioBuffer | null>(
-    null
-  );
-  const insets = useSafeAreaInsets();
+
+  useEffect(() => {
+    const pauseListener = RecordingNotificationManager.addEventListener(
+      'recordingNotificationPause',
+      () => {
+        console.log('Notification pause action received');
+        onPauseRecording();
+      }
+    );
+
+    const resumeListener = RecordingNotificationManager.addEventListener(
+      'recordingNotificationResume',
+      () => {
+        console.log('Notification resume action received');
+        onResumeRecording();
+      }
+    );
+
+    return () => {
+      pauseListener.remove();
+      resumeListener.remove();
+      RecordingNotificationManager.hide();
+    };
+  }, []);
+
+  const setNotification = (paused: boolean) => {
+    RecordingNotificationManager.show({
+      title: 'Recording Demo',
+      contentText: paused ? 'Paused recording' : 'Recording...',
+      paused,
+      smallIconResourceName: 'logo',
+      pauseIconResourceName: 'pause',
+      resumeIconResourceName: 'resume',
+      color: 0xff6200,
+    });
+  };
 
   const onStartRecording = useCallback(async () => {
     if (state !== RecordingState.Idle) {
@@ -56,6 +84,7 @@ const Record: FC = () => {
     }
 
     const result = Recorder.start();
+    setNotification(false);
 
     if (result.status === 'success') {
       console.log('Recording started, file path:', result.path);
@@ -70,27 +99,19 @@ const Record: FC = () => {
 
   const onPauseRecording = useCallback(() => {
     Recorder.pause();
+    setNotification(true);
     setState(RecordingState.Paused);
   }, []);
 
   const onResumeRecording = useCallback(() => {
     Recorder.resume();
+    setNotification(false);
     setState(RecordingState.Recording);
   }, []);
 
-  const onStopRecording = useCallback(async () => {
-    const info = Recorder.stop();
-
-    if (info.status !== 'success') {
-      Alert.alert('Error', `Failed to stop recording: ${info.message}`);
-      setState(RecordingState.Idle);
-      return;
-    }
-
-    const buffer = await audioContext.decodeAudioData(info.path);
-
-    setDurationSeconds(buffer.duration);
-    setPlaybackBuffer(buffer);
+  const onStopRecording = useCallback(() => {
+    Recorder.stop();
+    RecordingNotificationManager.hide();
     setState(RecordingState.ReadyToPlay);
   }, []);
 
@@ -99,30 +120,8 @@ const Record: FC = () => {
       return;
     }
 
-    const sourceNode = audioContext.createBufferSource();
-    sourceNode.buffer = playbackBuffer!;
-    sourceNode.connect(audioContext.destination);
-    sourceNode.start(audioContext.currentTime + 0.1);
-
-    sourceNode.onEnded = () => {
-      setState(RecordingState.Idle);
-      setDurationSeconds(0);
-      setPlaybackBuffer(null);
-      playbackPosition.value = 0;
-    };
-
-    const duration = playbackBuffer!.duration;
-
-    setTimeout(() => {
-      playbackPosition.value = 0;
-      playbackPosition.value = withTiming(duration, {
-        duration: duration * 1000,
-        easing: Easing.linear,
-      });
-    }, 100);
-
     setState(RecordingState.Playing);
-  }, [state, playbackBuffer, playbackPosition]);
+  }, [state]);
 
   const onToggleState = useCallback(
     (action: RecordingState) => {
@@ -148,9 +147,6 @@ const Record: FC = () => {
           onStopRecording();
         } else if (state === RecordingState.Playing) {
           setState(RecordingState.Idle);
-          setDurationSeconds(0);
-          setPlaybackBuffer(null);
-          playbackPosition.value = 0;
         }
         return;
       }
@@ -171,7 +167,6 @@ const Record: FC = () => {
       onStopRecording,
       onResumeRecording,
       onPlayRecording,
-      playbackPosition,
     ]
   );
 
@@ -193,37 +188,15 @@ const Record: FC = () => {
     };
   }, []);
 
-  useEffect(() => {
-    return () => {
-      if (Recorder.isRecording()) {
-        Recorder.stop();
-      }
-    };
-  }, []);
-
   return (
     <Container disablePadding>
       <Status state={state} />
       <View style={styles.spacerM} />
-
-      {[RecordingState.ReadyToPlay, RecordingState.Playing].includes(state) ? (
-        <>
-          <PlaybackVisualization
-            buffer={playbackBuffer}
-            currentPositionSeconds={playbackPosition}
-            durationSeconds={durationSeconds}
-          />
-        </>
-      ) : (
-        <>
-          <RecordingTime state={state} />
-          <View style={styles.spacerS} />
-          <RecordingVisualization state={state} />
-        </>
-      )}
+      <RecordingTime state={state} />
+      <View style={styles.spacerS} />
+      <RecordingVisualization state={state} />
       <View style={styles.spacerM} />
       <ControlPanel state={state} onToggleState={onToggleState} />
-      <View style={{ height: insets.bottom + insets.top }} />
     </Container>
   );
 };

apps/common-app/src/examples/AudioFile/AudioFile.tsx

@@ -65,7 +65,6 @@ const AudioFile: FC = () => {
 
   const setupNotification = async () => {
     try {
-      await PlaybackNotificationManager.register();
       const duration = AudioPlayer.getDuration();
       await PlaybackNotificationManager.show({
         title: 'Audio file',
@@ -89,7 +88,7 @@ const AudioFile: FC = () => {
     setup();
     return () => {
       AudioPlayer.reset();
-      PlaybackNotificationManager.unregister();
+      PlaybackNotificationManager.hide();
     };
   }, [fetchAudioBuffer]);