Audio playback

lib/components/audio.tsx

@@ -30,39 +30,44 @@ const AudioContainer = ({ newAudio, setNewAudio, insertAudioToEditor }: AudioCon
           playsInSilentModeIOS: true,
           allowsRecordingIOS: true,
         });
-
+  
         const { recording } = await Audio.Recording.createAsync(
           Audio.RecordingOptionsPresets.HIGH_QUALITY
         );
-
+  
         setRecording(recording);
       } else {
         alert("Please grant permission to access the microphone");
       }
     } catch (err) {
       console.error("Failed to start recording", err);
+      setIsRecording(false); // Reset recording state if there’s an error
     }
   }
-
+  
   async function stopRecording() {
     setIsRecording(false);
     try {
       if (recording) {
         await recording.stopAndUnloadAsync();
-
+  
         const uri = recording.getURI();
+        setRecording(null); // Clear the recording reference to avoid overwriting
+
         if (uri) {
-          const uploadedUri = await uploadAudio(uri);  // Upload audio to your storage
+          const uploadedUri = await uploadAudio(uri); // Upload audio to your storage
+
+          // Create a new audio object with unique ID and add it to the newAudio array
           const newRecording = new AudioType({
             uuid: uuid.v4().toString(),
             type: "audio",
             uri: uploadedUri,
-            duration: "00:30",  // Assuming a 30-second audio
+            duration: "00:30", // Assuming a 30-second audio
             name: `Recording ${newAudio.length + 1}`,
           });
-
-          setNewAudio([...newAudio, newRecording]);
-
+  
+          setNewAudio((prevAudio) => [...prevAudio, newRecording]);
+  
           // Insert the uploaded audio into the editor
           insertAudioToEditor(uploadedUri);
         }
@@ -71,6 +76,7 @@ const AudioContainer = ({ newAudio, setNewAudio, insertAudioToEditor }: AudioCon
       console.error("Failed to stop recording", err);
     }
   }
+
 
   return (
     <View style={styles.container}>
@@ -135,4 +141,4 @@ const styles = StyleSheet.create({
     alignItems: "center",
     width: "90%",
   },
-});
+});

lib/navigation/AppNavigator.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { DarkTheme, DefaultTheme, NavigationContainer } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { createStackNavigator } from "@react-navigation/stack";
@@ -12,12 +12,13 @@ import RegisterScreen from "../screens/loginScreens/RegisterScreen";
 import AddNoteScreen from "../screens/AddNoteScreen";
 import EditNote from "../components/EditNote";
 import OnboardingScreen from "../screens/OnboardingScreen";
+import VideoPlayerScreen from "../screens/VideoPlayer"; // Import the VideoPlayerScreen
 import { User } from "../models/user_class";
 import { getItem } from "../utils/async_storage";
 import * as SplashScreen from 'expo-splash-screen';
 import { useTheme } from '../components/ThemeProvider';
 import ToastMessage from 'react-native-toast-message';
-import { useSelector, useDispatch} from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../redux/store/store";
 import { setNavState } from "../../redux/slice/navigationSlice";
 
@@ -47,12 +48,16 @@ const HomeStack = () => {
         component={EditNote}
         options={{ headerShown: false, gestureEnabled: false }}
       />
+      <Stack.Screen
+        name="VideoPlayer" // Add the VideoPlayer route here
+        component={VideoPlayerScreen}
+        options={{ headerShown: false, gestureEnabled: true }}
+      />
     </Stack.Navigator>
   );
 };
 
 const AppNavigator: React.FC = () => {
-  // const [navState, setNavState] = useState<"loading" | "onboarding" | "login" | "home">("loading");
   const { theme, isDarkmode } = useTheme();
   const dispatch = useDispatch();
   const navState = useSelector((state: RootState) => state.navigation.navState);
@@ -138,4 +143,4 @@ const AppNavigator: React.FC = () => {
   );
 };
 
-export default AppNavigator;
+export default AppNavigator;