Audio playback

lib/components/AudioPlayer.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { View, Button } from 'react-native';
+import { Audio } from 'expo-av';
+
+interface AudioPlayerProps {
+  audioUri: string;
+}
+
+const AudioPlayer: React.FC<AudioPlayerProps> = ({ audioUri }) => {
+  const [sound, setSound] = useState<Audio.Sound | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  useEffect(() => {
+    // Load the audio when the component mounts
+    const loadSound = async () => {
+      const { sound } = await Audio.Sound.createAsync({ uri: audioUri });
+      setSound(sound);
+    };
+    loadSound();
+
+    // Cleanup the sound when the component unmounts
+    return () => {
+      if (sound) {
+        sound.unloadAsync();
+      }
+    };
+  }, [audioUri]);
+
+  const handlePlayPause = async () => {
+    if (sound) {
+      if (isPlaying) {
+        await sound.pauseAsync();
+      } else {
+        await sound.playAsync();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  return (
+    <View>
+      <Button title={isPlaying ? 'Pause' : 'Play'} onPress={handlePlayPause} />
+    </View>
+  );
+};
+
+export default AudioPlayer;

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;

lib/screens/AddNoteScreen.tsx

@@ -101,9 +101,22 @@ const AddNoteScreen: React.FC<{ navigation: any, route: any }> = ({ navigation,
     }
   };
 
-  const insertAudioToEditor = (audioUri: string) => {
-    const audioTag = `<audio controls src="${audioUri}"></audio>`;
-    editor.setContent(editor.getHTML() + audioTag);
+  const insertAudioToEditor = async (audioUri: string) => {
+    if (editor?.setContent && editor?.getHTML) {
+      try {
+        // Get the current content from the editor
+        const currentContent = await editor.getHTML();
+        // Create the new audio link with line breaks for spacing
+        const audioLink = `${currentContent}<a href="${audioUri}">${audioUri}</a><br>`;
+        // Set the combined content back to the editor
+        editor.setContent(audioLink);
+        editor.focus();
+      } catch (error) {
+        console.error("Error adding audio link to editor:", error);
+      }
+    } else {
+      console.error("Editor instance is not available.");
+    }
   };
 
   const handleShareButtonPress = () => {
@@ -327,6 +340,4 @@ const AddNoteScreen: React.FC<{ navigation: any, route: any }> = ({ navigation,
   );
 };
 
-export default AddNoteScreen;
-
-
+export default AddNoteScreen;

lib/screens/AudioPlayerScreen.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, Text, Button } from 'react-native';
+import { Audio } from 'expo-av';
+
+const AudioPlayerScreen: React.FC<{ route: any, navigation: any }> = ({ route, navigation }) => {
+  const { audioUri } = route.params;
+  const [sound, setSound] = React.useState<Audio.Sound | null>(null);
+
+  React.useEffect(() => {
+    async function loadAudio() {
+      const { sound } = await Audio.Sound.createAsync({ uri: audioUri });
+      setSound(sound);
+      await sound.playAsync();
+    }
+
+    loadAudio();
+
+    return () => {
+      if (sound) sound.unloadAsync();
+    };
+  }, [audioUri]);
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Audio Playback</Text>
+      <Button title="Go Back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+};
+
+export default AudioPlayerScreen;

lib/screens/VideoPlayer.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Video } from 'expo-av';
+
+interface VideoPlayerProps {
+  videoUri: string;
+}
+
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ videoUri }) => {
+  const videoRef = React.useRef<Video>(null);
+
+  return (
+    <View style={styles.videoContainer}>
+      <Video
+        ref={videoRef}
+        source={{ uri: videoUri }}
+        style={styles.videoPlayer}
+        useNativeControls
+        resizeMode="contain"
+        isLooping={false}
+        shouldPlay
+      />
+    </View>
+  );
+};
+
+export default VideoPlayer;
+
+const styles = StyleSheet.create({
+    videoContainer: {
+      width: '90%',
+      height: '50%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    videoPlayer: {
+      width: '100%',
+      height: '100%',
+      resizeMode: 'contain', // Ensures the video scales to fit within container
+    },
+  });
+

styles/pages/NoteStyles.tsx

@@ -122,4 +122,4 @@ const NotePageStyles = () => {
   });
 };
 
-export default NotePageStyles;
+export default NotePageStyles;