feat: keep recording on reboot + allow to delete them

Author: dprevost-LMI

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(
   ({
@@ -248,6 +251,37 @@ const AppContainer = () => {
     );
   };
 
+  const handleDeleteRecordings = async () => {
+    const recordings = await getRecordedAudios();
+
+    const deleteRecordings = async () => {
+      await Promise.all(recordings.map(async recording => fs.unlink(recording)))
+        .then(() => {
+          Alert.alert(
+            'All recording deleted',
+            'All recordings have been deleted successfully! Reboot the app to see the changes.',
+            [{ text: 'Dismiss' }]
+          );
+        })
+        .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.\n App restart is required!`,
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'OK', onPress: deleteRecordings },
+      ]
+    );
+  };
+
   return (
     <View style={styles.appContainer}>
       <StatusBar
@@ -265,6 +299,15 @@ const AppContainer = () => {
                 style={styles.simformImage}
                 resizeMode="contain"
               />
+              <Pressable
+                style={styles.playBackControlPressable}
+                onPress={handleDeleteRecordings}>
+                <Image
+                  source={Icons.delete}
+                  style={styles.buttonImage}
+                  resizeMode="contain"
+                />
+              </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

@@ -92,7 +92,8 @@ const styles = (params: StyleSheetParams = {}) =>
     },
     simformImageContainer: {
       alignItems: 'center',
-      justifyContent: 'center',
+      justifyContent: 'space-around',
+      flexDirection: 'row',
     },
     loadingText: {
       color: Colors.black,