ads integrated

TomarJatin · Oct 24, 2023 · 3e21038 · 3e21038
1 parent b37ceb3
commit 3e21038
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 23 deletions.
diff --git a/app.json b/app.json
@@ -40,6 +40,14 @@
         {
           "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
         }
+      ],
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "useFrameworks": "static"
+          }
+        }
       ]
     ]
   }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@expo-google-fonts/inter": "^0.2.3",
     "@expo/webpack-config": "^19.0.0",
     "@react-native-async-storage/async-storage": "1.18.2",
+    "@react-native-community/netinfo": "9.3.10",
     "@react-native-firebase/app": "^18.5.0",
     "@react-native-firebase/storage": "^18.5.0",
     "@react-navigation/core": "^6.2.1",
@@ -42,6 +43,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.72.5",
     "react-native-gesture-handler": "~2.12.0",
+    "react-native-google-mobile-ads": "^12.3.0",
     "react-native-keychain": "^8.1.1",
     "react-native-modal": "^13.0.1",
     "react-native-reanimated": "~3.3.0",

diff --git a/screens/AudioBook.tsx b/screens/AudioBook.tsx
@@ -5,14 +5,20 @@ import {
   FlatList,
   TouchableOpacity,
   Dimensions,
+  ActivityIndicator
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Navbar from "../components/Navbar";
 import { useSelector } from "react-redux";
+import Slider from "react-native-slider";
 import { FontSize, color } from "../GlobalStyles";
 import { Audio } from "expo-av";
+import { AntDesign } from '@expo/vector-icons'; 
+import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
 import storage from "@react-native-firebase/storage";
 
+const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
+
 interface Audiobook {
   id: string;
   title: string;
@@ -25,6 +31,7 @@ export default function AudioBook({ navigation }) {
     null
   );
   const [isPlaying, setIsPlaying] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [sound, setSound] = useState<Audio.Sound | null>(null);
   const [currentPosition, setCurrentPosition] = useState<number | null>(null);
   const [totalDuration, setTotalDuration] = useState<number | null>(null);
@@ -47,6 +54,7 @@ export default function AudioBook({ navigation }) {
           })
         );
         setAudiobooks(audiobookList);
+        setLoading(false);
       } catch (error) {
         console.error("Error fetching audiobooks:", error);
       }
@@ -83,16 +91,24 @@ export default function AudioBook({ navigation }) {
     };
   }, [selectedAudiobook]);
 
+  const handleSelectAudiobookClick = (item: Audiobook | null) => {
+    setSound(null);
+    setCurrentPosition(null);
+    setTotalDuration(null);
+    setIsPlaying(false);
+    setSelectedAudiobook(item)
+  }
+
   const togglePlayback = async () => {
     if (!sound) return;
 
     if (isPlaying) {
       await sound.pauseAsync();
+      setIsPlaying(false);
     } else {
       await sound.playAsync();
+      setIsPlaying(true);
     }
-
-    setIsPlaying(!isPlaying);
   };
 
   const formatTime = (time: number | null) => {
@@ -117,7 +133,7 @@ export default function AudioBook({ navigation }) {
       <FlatList
         data={["1"]}
         renderItem={() => (
-          <View style={{ padding: 15 }}>
+          <View style={{ padding: 15, paddingBottom: 100 }}>
             <Text
               style={{
                 color: Color.fontPrim,
@@ -127,43 +143,76 @@ export default function AudioBook({ navigation }) {
             >
               Audio Books
             </Text>
+            <BannerAd
+      unitId={adUnitId}
+      size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
+      requestOptions={{
+        requestNonPersonalizedAdsOnly: true,
+      }}
+    />
             <View>
+              {
+                loading && <ActivityIndicator size="large" />
+              }
               <FlatList
                 data={audiobooks}
                 keyExtractor={(item) => item.id}
-                renderItem={({ item }) => (
-                  <TouchableOpacity onPress={() => setSelectedAudiobook(item)}>
+                renderItem={({ item, index }) => (
+                  <TouchableOpacity style={{
+                    width: "100%",
+                    paddingHorizontal: 15,
+                    paddingVertical: 10,
+                    borderBottomWidth: 1,
+                    marginBottom: 10
+                  }} activeOpacity={0.5} onPress={() => handleSelectAudiobookClick(item)}>
                     <Text>{item.title}</Text>
                   </TouchableOpacity>
                 )}
+                style={{
+                  marginTop: 20
+                }}
               />
-              {selectedAudiobook && (
-                <View>
+
+            </View>
+          </View>
+        )}
+        style={{
+          paddingBottom: 50,
+          minHeight: Dimensions.get("window").height,
+        }}
+      />
+      {selectedAudiobook && (
+                <View style={{position: "absolute", width: "100%", bottom: 60, backgroundColor: Color.fontWhite, zIndex: 20, padding: 20}}>
                   <Text>{selectedAudiobook.title}</Text>
-                  <Text>{isPlaying ? "Playing" : "Paused"}</Text>
+                  <View style={{flexDirection: 'row', gap: 10, alignItems:'center', justifyContent: 'center'}}>
                   <Text>
-                    {formatTime(currentPosition)} / {formatTime(totalDuration)}
+                    {formatTime(currentPosition)}
                   </Text>
-                  {/* <Slider
-                    // style={{ width: "80%" }}
+                  <View style={{width: "70%"}}>
+                  <Slider
                     minimumValue={0}
                     maximumValue={100}
-                    value={(currentPosition / totalDuration) * 100}
+                    value={currentPosition? (currentPosition / totalDuration) * 100: 0}
                     onValueChange={handleSliderChange}
-                  /> */}
-                  <TouchableOpacity onPress={togglePlayback}>
-                    <Text>{isPlaying ? "Pause" : "Play"}</Text>
+                    onSlidingComplete={handleSliderChange}
+                  /> 
+                  </View>
+                  <Text>
+                     {formatTime(totalDuration)}
+                  </Text>
+                  </View>
+
+                  <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: "20%"}}>
+                  <AntDesign name="stepbackward" size={40} color="black" />
+
+                  <TouchableOpacity activeOpacity={0.5} onPress={togglePlayback}>
+                  {isPlaying ? <AntDesign name="pausecircleo" size={40} color="black" />: <AntDesign name="playcircleo" size={40} color="black" />}
                   </TouchableOpacity>
+                  <AntDesign name="stepforward" size={40} color="black" />
+                  </View>
+
                 </View>
               )}
-            </View>
-          </View>
-        )}
-        style={{
-          paddingBottom: 50,
-          minHeight: Dimensions.get("window").height,
-        }}
-      />
       <Navbar nav={"audiobook"} />
     </SafeAreaView>
   );