basic audiobook made

TomarJatin · Oct 2, 2023 · bbd7e96 · bbd7e96
1 parent 81ac9f0
commit bbd7e96
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 55 deletions.
diff --git a/App.js b/App.js
@@ -14,6 +14,7 @@ import { ChapterProvider } from "./contexts/ChapterContext";
 import { VerseProvider } from "./contexts/VerseContext";
 import { SaveForLaterProvider } from "./contexts/SaveForLaterContext";
 import { SettingsProvider } from "./contexts/SettingsContext";
+import "expo-dev-client";
 
 function App() {
   let [fontsLoaded] = useFonts({

diff --git a/app.json b/app.json
@@ -22,7 +22,9 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "googleServicesFile": "./google-services.json",
+      "package": "com.tomarjatin.BhagavadGita"
     },
     "web": {
       "favicon": "./assets/favicon.png"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,7 +52,8 @@
     "react-native-system-navigation-bar": "^2.6.1",
     "react-native-web": "~0.19.6",
     "react-navigation": "^4.4.4",
-    "typescript": "^5.1.3"
+    "typescript": "^5.1.3",
+    "expo-dev-client": "~2.4.11"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

diff --git a/screens/AudioBook.tsx b/screens/AudioBook.tsx
@@ -1,30 +1,37 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { View, Text, FlatList, TouchableOpacity, Dimensions  } from "react-native";
+import React, { useState, useEffect, useContext } from "react";
+import {
+  View,
+  Text,
+  FlatList,
+  TouchableOpacity,
+  Dimensions,
+} from "react-native";
 import Slider from "react-native-slider";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Navbar from "../components/Navbar";
 import { ThemeContext } from "../contexts/ThemeContext";
 import { FontSize, color } from "../GlobalStyles";
-import { Audio } from 'expo-av';
+import { Audio } from "expo-av";
 import { Image } from "expo-image";
-import { SaveForLaterContext } from '../contexts/SaveForLaterContext';
-import { SettingsContext } from '../contexts/SettingsContext';
-import { VerseContext } from '../contexts/VerseContext';
+import { SaveForLaterContext } from "../contexts/SaveForLaterContext";
+import { SettingsContext } from "../contexts/SettingsContext";
+import { VerseContext } from "../contexts/VerseContext";
 import { translations } from "../translations/main";
-import { Entypo } from '@expo/vector-icons';
-import storage from '@react-native-firebase/storage';
-import { ChapterContext } from '../contexts/ChapterContext';
+import { Entypo } from "@expo/vector-icons";
+import storage from "@react-native-firebase/storage";
+import { ChapterContext } from "../contexts/ChapterContext";
 
 interface Audiobook {
   id: string;
   title: string;
   url: string;
 }
 
-
-export default function AudioBook({navigation}) {
+export default function AudioBook({ navigation }) {
   const [audiobooks, setAudiobooks] = useState<Audiobook[]>([]);
-  const [selectedAudiobook, setSelectedAudiobook] = useState<Audiobook | null>(null);
+  const [selectedAudiobook, setSelectedAudiobook] = useState<Audiobook | null>(
+    null
+  );
   const [isPlaying, setIsPlaying] = useState(false);
   const [sound, setSound] = useState<Audio.Sound | null>(null);
   const [currentPosition, setCurrentPosition] = useState<number | null>(null);
@@ -36,7 +43,7 @@ export default function AudioBook({navigation}) {
   useEffect(() => {
     // Function to fetch audiobooks from Firebase Storage
     const fetchAudiobooks = async () => {
-      const audiobooksRef = storage().ref().child('audiobooks'); // Adjust the path to your Firebase Storage
+      const audiobooksRef = storage().ref().child("audiobooks"); // Adjust the path to your Firebase Storage
       const audiobookList: Audiobook[] = [];
 
       try {
@@ -49,7 +56,7 @@ export default function AudioBook({navigation}) {
         );
         setAudiobooks(audiobookList);
       } catch (error) {
-        console.error('Error fetching audiobooks:', error);
+        console.error("Error fetching audiobooks:", error);
       }
     };
 
@@ -60,11 +67,13 @@ export default function AudioBook({navigation}) {
     const loadSound = async () => {
       if (!selectedAudiobook) return;
 
-      const { sound } = await Audio.Sound.createAsync({ uri: selectedAudiobook.url });
+      const { sound } = await Audio.Sound.createAsync({
+        uri: selectedAudiobook.url,
+      });
       setSound(sound);
 
       sound.setOnPlaybackStatusUpdate((status) => {
-        if(status.isLoaded){
+        if (status.isLoaded) {
           if (status.isPlaying) {
             setCurrentPosition(status.positionMillis);
             setTotalDuration(status.durationMillis);
@@ -95,11 +104,11 @@ export default function AudioBook({navigation}) {
   };
 
   const formatTime = (time: number | null) => {
-    if (time === null) return '00:00';
+    if (time === null) return "00:00";
 
     const seconds = Math.floor(time / 1000);
     const minutes = Math.floor(seconds / 60);
-    const formattedSeconds = String(seconds % 60).padStart(2, '0');
+    const formattedSeconds = String(seconds % 60).padStart(2, "0");
     return `${minutes}:${formattedSeconds}`;
   };
 
@@ -111,52 +120,59 @@ export default function AudioBook({navigation}) {
     sound.setPositionAsync(newPosition);
   };
 
-
   return (
     <SafeAreaView>
-      <FlatList 
-        data={['1']}
+      <FlatList
+        data={["1"]}
         renderItem={() => (
-          <View style={{padding: 15}}>
-            <Text style={{color: Color.fontPrim, fontSize: FontSize.regular16px, fontWeight: '700'}}>
+          <View style={{ padding: 15 }}>
+            <Text
+              style={{
+                color: Color.fontPrim,
+                fontSize: FontSize.regular16px,
+                fontWeight: "700",
+              }}
+            >
               Audio Books
             </Text>
-           <View>
-           <FlatList
-        data={audiobooks}
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => (
-          <TouchableOpacity onPress={() => setSelectedAudiobook(item)}>
-            <Text>{item.title}</Text>
-          </TouchableOpacity>
-        )}
-      />{selectedAudiobook && (
-        <View>
-          <Text>{selectedAudiobook.title}</Text>
-          <Text>{isPlaying ? 'Playing' : 'Paused'}</Text>
-          <Text>{formatTime(currentPosition)} / {formatTime(totalDuration)}</Text>
-          <Slider
-            style={{ width: '80%' }}
-            minimumValue={0}
-            maximumValue={100}
-            value={(currentPosition / totalDuration) * 100}
-            onValueChange={handleSliderChange}
-          />
-          <TouchableOpacity onPress={togglePlayback}>
-            <Text>{isPlaying ? 'Pause' : 'Play'}</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-           </View>
+            <View>
+              <FlatList
+                data={audiobooks}
+                keyExtractor={(item) => item.id}
+                renderItem={({ item }) => (
+                  <TouchableOpacity onPress={() => setSelectedAudiobook(item)}>
+                    <Text>{item.title}</Text>
+                  </TouchableOpacity>
+                )}
+              />
+              {selectedAudiobook && (
+                <View>
+                  <Text>{selectedAudiobook.title}</Text>
+                  <Text>{isPlaying ? "Playing" : "Paused"}</Text>
+                  <Text>
+                    {formatTime(currentPosition)} / {formatTime(totalDuration)}
+                  </Text>
+                  {/* <Slider
+                    // style={{ width: "80%" }}
+                    minimumValue={0}
+                    maximumValue={100}
+                    value={(currentPosition / totalDuration) * 100}
+                    onValueChange={handleSliderChange}
+                  /> */}
+                  <TouchableOpacity onPress={togglePlayback}>
+                    <Text>{isPlaying ? "Pause" : "Play"}</Text>
+                  </TouchableOpacity>
+                </View>
+              )}
+            </View>
           </View>
         )}
         style={{
-
           paddingBottom: 50,
-          minHeight: Dimensions.get('window').height
+          minHeight: Dimensions.get("window").height,
         }}
       />
       <Navbar nav={"audiobook"} />
     </SafeAreaView>
   );
-}
+}