added few features like audio player,fontsize control, audio recorder

.gitignore

@@ -63,4 +63,10 @@ yarn-error.log
 .metro-health-check*
 
 # testing
-/coverage
+/coverage
+
+
+.yarn/cache/
+.yarn/unplugged/
+.yarn/build-state.yml
+.yarn/install-state.gz

App.tsx

@@ -23,7 +23,7 @@ export type RootStackParamList = {
   'Sign up': undefined;
   CreateProject: undefined;
   ReferencePage: undefined;
-  ProjectEditor: {projectId: string; projectName: string};
+  ProjectEditor: {projectId: string; projectName: string ,projectPath:string,referenceRes:string};
 };
 
 const Stack = createStackNavigator<RootStackParamList>();
@@ -37,13 +37,13 @@ export default function App() {
   React.useEffect(() => {
     let permission;
     checkManagePermission().then(isManagePermitted => {
-      console.log(isManagePermitted);
+      console.log("Permission for file access granted",isManagePermitted);
       permission = isManagePermitted;
     });
     // request rights to manage
-    if (permission === false) {
+    if (permission===false) {
       requestManagePermission().then(isManagePermitted => {
-        console.log(isManagePermitted);
+        console.log("Permission for file access granted",isManagePermitted);
       });
     }
     const checkAndCreateFolderAndFile = async () => {
@@ -125,7 +125,12 @@ export default function App() {
         <Stack.Screen
           name="ProjectEditor"
           component={ProjectEditorScreen}
-          options={{title: 'Project Editor'}}
+          options={{title: 'Project Editor',  headerStyle: {
+            height: 45, // Set your desired height here
+          },
+          headerTitleStyle: {
+            fontSize: 20, // Adjust the font size if needed
+          },}}
         />
       </Stack.Navigator>
     </NavigationContainer>

android/app/src/main/AndroidManifest.xml

@@ -3,7 +3,7 @@
     <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
-
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"

android/build.gradle

@@ -1,7 +1,7 @@
 buildscript {
     ext {
         buildToolsVersion = "34.0.0"
-        minSdkVersion = 23
+        minSdkVersion = 24
         compileSdkVersion = 34
         targetSdkVersion = 34
         ndkVersion = "26.1.10909125"

babel.config.js

@@ -1,3 +1,6 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    'react-native-reanimated/plugin',
+  ],
 };

package.json

@@ -10,10 +10,13 @@
     "test": "jest"
   },
   "dependencies": {
+    "@gorhom/bottom-sheet": "^4.6.4",
     "@react-native-picker/picker": "^2.7.7",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/stack": "^6.4.1",
+    "@simform_solutions/react-native-audio-waveform": "^2.1.1",
     "events": "^3.3.0",
+    "ffmpeg-kit-react-native": "^6.0.2",
     "jsonschema": "^1.4.1",
     "manage-external-storage": "^0.1.3",
     "ohm-js": "^17.1.0",
@@ -25,6 +28,7 @@
     "react-native-gesture-handler": "^2.19.0",
     "react-native-paper": "^5.12.3",
     "react-native-permissions": "^4.1.5",
+    "react-native-reanimated": "^3.15.4",
     "react-native-safe-area-context": "^4.10.8",
     "react-native-screens": "^3.32.0",
     "react-native-select-dropdown": "^4.0.1",

screens/AudioPlayer.tsx

@@ -0,0 +1,150 @@
+import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle, ForwardRefRenderFunction } from 'react';
+import { SafeAreaView, TouchableOpacity, View, Text, Alert, StyleSheet } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import {
+  Waveform,
+  IWaveformRef,
+  FinishMode,
+} from '@simform_solutions/react-native-audio-waveform';
+
+export interface AudioPlayerRef {
+  stopPlaying: () => Promise<void>;
+}
+
+interface AudioPlayerProps {
+  url: string;
+}
+
+const AudioPlayerComponent: ForwardRefRenderFunction<AudioPlayerRef, AudioPlayerProps> = ({ url }, ref) => {
+  const waveformRef = useRef<IWaveformRef>(null);
+  const [playing, setPlaying] = useState(false);
+  const [key, setKey] = useState(0); // Add this line to create a key state
+
+  useEffect(() => {
+    // console.log(url, "url in audioplayer");
+    setPlaying(false);
+    if (waveformRef.current) {
+      waveformRef.current.stopPlayer();
+    }
+    setKey(prevKey => prevKey + 1); // Increment the key to force re-render of Waveform
+  }, [url]);
+
+  useImperativeHandle(ref, () => ({
+    stopPlaying: async () => {
+      await stopPlaying();
+    },
+  }));
+
+  const togglePlayback = async () => {
+    if (url) {
+      if (playing) {
+        const paused = await waveformRef.current?.pausePlayer();
+        if (!paused) {
+          Alert.alert('Error', 'Failed to pause playback.');
+        }
+      } else {
+        const started = await waveformRef.current?.startPlayer({
+          finishMode: FinishMode.stop,
+        });
+        if (!started) {
+          Alert.alert('Error', 'Failed to start playback.');
+        }
+      }
+      setPlaying(!playing);
+    } else {
+      Alert.alert('No Audio File', 'Please load an audio file first.');
+    }
+  };
+
+  const stopPlaying = async () => {
+    try {
+      if (url) {
+        const stopped = await waveformRef.current?.stopPlayer();
+        if (!stopped) {
+          Alert.alert('Error', 'Failed to stop playback.');
+        }
+        setPlaying(false);
+      }
+    } catch (error) {
+      console.error('Error stopping playback:', error);
+      Alert.alert('Error', 'Failed to stop the playback.');
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.waveformContainer}>
+        <View style={styles.controlsContainer}>
+          {url && (
+            <>
+              <TouchableOpacity onPress={togglePlayback} style={styles.controlButton}>
+                <Icon name={playing ? 'pause' : 'play-arrow'} size={28} color="#2196F3" />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={stopPlaying} style={styles.controlButton}>
+                <Icon name="restart-alt" size={28} color="#2196F3" />
+              </TouchableOpacity>
+            </>
+          )}
+        </View>
+        <View style={styles.waveformWrapper}>
+          {url ? (
+            <Waveform
+              key={key} // Add this line to use the key state
+              ref={waveformRef}
+              mode="static"
+              path={url}
+              candleSpace={2}
+              candleWidth={4}
+              scrubColor="#22a6b3"
+              onPlayerStateChange={(playerState) => {
+                console.log(playerState, "playerstate");
+                if (playerState === 'stopped') {
+                  setPlaying(false);
+                }
+              }}
+            />
+          ) : (
+            <Text>No audio file loaded</Text>
+          )}
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 45,
+    marginHorizontal: 5,
+  },
+  waveformContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    borderRadius: 10,
+    padding: 5,
+    shadowColor: "#000",
+    alignItems: 'center',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+  },
+  waveformWrapper: {
+    width: '75%',
+  },
+  controlsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  controlButton: {
+    marginHorizontal: 5,
+  },
+});
+const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(AudioPlayerComponent);
+export default AudioPlayer;