Merge pull request #122 from dprevost-LMI/show-recoring-on-boot-and-delete-recording

feat: [Example App] keep recording on reboot + allow to delete them

Author: mukesh-simform

example/src/App.tsx

@@ -18,6 +18,7 @@ import React, {
 } from 'react';
 import {
   ActivityIndicator,
+  Alert,
   Image,
   Linking,
   Pressable,
@@ -35,11 +36,13 @@ import { Icons } from './assets';
 import {
   generateAudioList,
   playbackSpeedSequence,
+  getRecordedAudios,
   type ListItem,
 } from './constants';
 import stylesheet from './styles';
 import { Colors } from './theme';
 import FastImage from 'react-native-fast-image';
+import fs from 'react-native-fs';
 
 const RenderListItem = React.memo(
   ({
@@ -224,6 +227,7 @@ const AppContainer = () => {
   const [shouldScroll, setShouldScroll] = useState<boolean>(true);
   const [currentPlaying, setCurrentPlaying] = useState<string>('');
   const [list, setList] = useState<ListItem[]>([]);
+  const [nbOfRecording, setNumberOfRecording] = useState<number>(0);
   const [currentPlaybackSpeed, setCurrentPlaybackSpeed] =
     useState<PlaybackSpeedType>(1.0);
 
@@ -238,6 +242,12 @@ const AppContainer = () => {
     });
   }, []);
 
+  useEffect(() => {
+    getRecordedAudios().then(recordedAudios =>
+      setNumberOfRecording(recordedAudios.length)
+    );
+  }, [list]);
+
   const changeSpeed = () => {
     setCurrentPlaybackSpeed(
       prev =>
@@ -248,6 +258,35 @@ const AppContainer = () => {
     );
   };
 
+  const handleDeleteRecordings = async () => {
+    const recordings = await getRecordedAudios();
+
+    const deleteRecordings = async () => {
+      await Promise.all(recordings.map(async recording => fs.unlink(recording)))
+        .then(() => {
+          generateAudioList().then(audioListArray => {
+            setList(audioListArray);
+          });
+        })
+        .catch(error => {
+          Alert.alert(
+            'Error deleting recordings',
+            'Below error happened while deleting recordings:\n' + error,
+            [{ text: 'Dismiss' }]
+          );
+        });
+    };
+
+    Alert.alert(
+      'Delete all recording',
+      `Continue to delete all ${recordings.length} recordings.`,
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'OK', onPress: deleteRecordings },
+      ]
+    );
+  };
+
   return (
     <View style={styles.appContainer}>
       <StatusBar
@@ -259,12 +298,28 @@ const AppContainer = () => {
       <GestureHandlerRootView style={styles.appContainer}>
         <View style={styles.screenBackground}>
           <View style={styles.container}>
-            <View style={styles.simformImageContainer}>
+            <View style={styles.headerContainer}>
               <Image
                 source={Icons.simform}
                 style={styles.simformImage}
                 resizeMode="contain"
               />
+              <Pressable
+                style={[
+                  styles.deleteRecordingContainer,
+                  { opacity: nbOfRecording ? 1 : 0.5 },
+                ]}
+                onPress={handleDeleteRecordings}
+                disabled={!nbOfRecording}>
+                <Image
+                  source={Icons.delete}
+                  style={styles.pinkButtonImage}
+                  resizeMode="contain"
+                />
+                <Text style={styles.deleteRecordingTitle}>
+                  {'Delete recorded audio files'}
+                </Text>
+              </Pressable>
             </View>
             <ScrollView scrollEnabled={shouldScroll}>
               {list.map(item => (

example/src/assets/icons/delete.png

@@ -4,4 +4,5 @@ export const Icons = {
   simform: require('./simform.png'),
   mic: require('./mic.png'),
   logo: require('./logo.png'),
+  delete: require('./delete.png'),
 };

example/src/assets/icons/index.ts

@@ -1,6 +1,7 @@
 import fs from 'react-native-fs';
 import RNFetchBlob from 'rn-fetch-blob';
 import { globalMetrics } from '../../src/theme';
+import { Platform } from 'react-native';
 
 export interface ListItem {
   fromCurrentUser: boolean;
@@ -69,17 +70,30 @@ const audioAssetArray = [
   'file_example_mp3_15s.mp3',
 ];
 
+/**
+ * Retrieve previously recorded audio files from the cache/document directory.
+ * @returns 
+ */
+export const getRecordedAudios = async (): Promise<string[]> => {
+  const recordingSavingPath = Platform.select({ ios: fs.DocumentDirectoryPath, default: fs.CachesDirectoryPath }) 
+
+  const items = await fs.readDir(recordingSavingPath)
+  return items.filter(item =>  item.path.endsWith('.m4a')).map(item => item.path)
+}
+
 /**
  * Generate a list of file objects with information about successfully copied files (Android)
  * or all files (iOS).
  * @returns {Promise<ListItem[]>} A Promise that resolves to the list of file objects.
  */
 export const generateAudioList = async (): Promise<ListItem[]> => {
-  const audioAssets = await copyFilesToNativeResources();
+  const audioAssetPaths = (await copyFilesToNativeResources()).map(value => `${filePath}/${value}`);
+  const recordedAudios = await getRecordedAudios()
 
   // Generate the final list based on the copied or available files
-  return audioAssets?.map?.((value, index) => ({
+  return [...audioAssetPaths, ...recordedAudios].map?.((value, index) => ({
     fromCurrentUser: index % 2 !== 0,
-    path: `${filePath}/${value}`,
+    path: value,
   }));
+
 };

example/src/constants/Audios.ts

@@ -54,6 +54,12 @@ const styles = (params: StyleSheetParams = {}) =>
       tintColor: Colors.white,
       alignSelf: 'flex-end',
     },
+    pinkButtonImage: {
+      height: scale(22),
+      width: scale(22),
+      tintColor: Colors.pink,
+      alignSelf: 'flex-end',
+    },
     staticWaveformView: {
       flex: 1,
       height: scale(75),
@@ -90,9 +96,18 @@ const styles = (params: StyleSheetParams = {}) =>
       width: '100%',
       tintColor: Colors.pink,
     },
-    simformImageContainer: {
+    headerContainer: {
       alignItems: 'center',
-      justifyContent: 'center',
+    },
+    deleteRecordingContainer: {
+      alignItems: 'center',
+      flexDirection: 'row',
+    },
+    deleteRecordingTitle: {
+      fontSize: scale(20),
+      fontWeight: 'bold',
+      color: Colors.pink,
+      paddingLeft: scale(8),
     },
     loadingText: {
       color: Colors.black,