Merge pull request #29 from p2devs/ps/manga-support

feat: add Manga support and enhance navigation features
p2devs · Dec 31, 2024 · 2b5824c · 2b5824c
2 parents b5b58c2 + ff6c56a
commit 2b5824c
Show file tree

Hide file tree

Showing 12 changed files with 175 additions and 80 deletions.
diff --git a/.gitignore b/.gitignore
@@ -92,4 +92,7 @@ global.jks
 app.json
 
 #ignore .env file
-.env
+.env
+
+## Ignore Manga Folder
+**/Manga/*
diff --git a/ios/InkNest.xcodeproj/project.pbxproj b/ios/InkNest.xcodeproj/project.pbxproj
@@ -740,7 +740,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@@ -820,7 +823,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

diff --git a/src/Components/Gallery/src/index.tsx b/src/Components/Gallery/src/index.tsx
@@ -89,6 +89,9 @@ const defaultRenderImage = ({
         url: item,
         progressiveLoadingEnabled: true,
         allowHardware: true,
+        headers: {
+          Referer: item,
+        }
       }}
       style={StyleSheet.absoluteFillObject}
     />

diff --git a/src/Components/UIComp/Image.js b/src/Components/UIComp/Image.js
@@ -1,53 +1,50 @@
-import React, { useState } from "react";
-import { ActivityIndicator, Image as Img, Platform, Text, View } from "react-native";
-import { FasterImageView, clearCache } from '@candlefinance/faster-image';
+import React, {useState} from 'react';
+import {
+  ActivityIndicator,
+  Image as Img,
+  Platform,
+  Text,
+  View,
+} from 'react-native';
+import {FasterImageView} from '@candlefinance/faster-image';
 
+const Image = ({
+  source,
+  style,
+  onFailer,
+  resizeMode = null,
+  onSuccess = null,
+  ...rest
+}) => {
+  return (
+    <View style={[style]}>
+      <FasterImageView
+        {...rest}
+        style={style}
+        source={{
+          activityColor: 'gold',
+          transitionDuration: 0.3,
+          resizeMode: resizeMode ?? 'fill',
+          cachePolicy: 'discWithCacheControl',
+          showActivityIndicator: true,
+          url: source.uri,
+          progressiveLoadingEnabled: true,
+          allowHardware: true,
+          headers: {
+            Referer: source.uri,
+          },
+        }}
+        onSuccess={event => {
+          if (onSuccess) onSuccess(event);
+        }}
+        onError={event => {
+          if (onFailer) {
+            onFailer(event);
+          }
+        }}
+      />
+    </View>
+  );
+};
 
-const Image = ({ source, style, onFailer, resizeMode = null, onSuccess = null, ...rest }) => {
-    const [loading, setLoading] = useState(true);
-    return (
-        <View style={[style]}>
-            <FasterImageView
-                {...rest}
-                style={style}
-                // source={source?.priority ? source :
-                //     {
-                //         uri: source.uri,
-                //         priority: FastImage.priority.high,
-                //     }}
-                source={{
-                    activityColor: "gold",
-                    transitionDuration: 0.3,
-                    resizeMode: resizeMode ?? "fill",
-                    cachePolicy: 'discWithCacheControl',
-                    showActivityIndicator: true,
-                    url: source.uri,
-                    progressiveLoadingEnabled: true,
-                    allowHardware: true,
-                }}
-                onSuccess={(event) => {
-                    setLoading(false);
-                    // console.log("Image Loaded", Platform.OS);
-                    if (onSuccess) onSuccess(event);
-                }}
-                onError={(event) => {
-                    setLoading(false);
-                    // console.log("Image Load Failed", Platform.OS);
-                    if (onFailer) {
-                        onFailer(event);
-                    }
-                }}
-
-            />
-            {/* {(loading) ?
-                <View style={{ position: 'absolute', width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
-                    <ActivityIndicator size="large" color="gold" />
-                </View>
-                : null
-            } */}
-
-        </View>
-    )
-}
-
-export default Image;
+export default Image;
diff --git a/src/Constants/Navigation.js b/src/Constants/Navigation.js
@@ -2,6 +2,7 @@
 export const NAVIGATION = {
   splash: 'Splash',
   home: 'Home',
+  homeManga: 'Home Manga',
   comicDetails: 'ComicDetails',
   comicBook: 'ComicBook',
   search: 'Search',
@@ -12,7 +13,10 @@ export const NAVIGATION = {
   update: 'Update',
   animeVideo: 'AnimeVideo',
   animeDetails: 'AnimeDetails',
-  moreDetails: 'MoreDetails',
+  mangaDetails: 'MangaDetails',
+  mangaBook: 'MangaBook',
+  mangaSearch: 'MangaSearch',
+  mangaViewAll: 'MangaViewAll',
   ViewAll: "ViewAll",
   offlineComic: "Offline",
 };
diff --git a/src/Navigation/AppNavigation.js b/src/Navigation/AppNavigation.js
@@ -1,14 +1,19 @@
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
 import {NAVIGATION} from '../Constants';
-import {AboutUs} from '../Screens';
+import {AboutUs, Search} from '../Screens';
 import {BottomNavigation} from './BottomNavigation';
 import UpdateScreen from '../Screens/Update';
 import AnimeVideo from '../Screens/Anime/Video';
 import {useSelector} from 'react-redux';
 import {Details} from '../Screens/Anime';
 import {ComicBook, ComicDetails} from '../Screens/Comic';
 import {ViewAll} from '../Screens/Anime/Home/ViewAll';
+import {MangaDetails} from '../Screens/Manga/Details/MangaDetails';
+import {MangaBook} from '../Screens/Manga/Book/MangaBook';
+import {MangaHome} from '../Screens/Manga/Home/Home';
+import MangaSearch from '../Screens/Manga/Search/Search';
+import {MangaViewAll} from '../Screens/Manga/Home/ViewAll';
 
 const Stack = createNativeStackNavigator();
 
@@ -36,7 +41,13 @@ export function AppNavigation() {
       <Stack.Screen name={NAVIGATION.update} component={UpdateScreen} />
       <Stack.Screen name={NAVIGATION.animeVideo} component={AnimeVideo} />
       <Stack.Screen name={NAVIGATION.animeDetails} component={Details} />
+      <Stack.Screen name={NAVIGATION.mangaDetails} component={MangaDetails} />
+      <Stack.Screen name={NAVIGATION.mangaBook} component={MangaBook} />
       <Stack.Screen name={NAVIGATION.ViewAll} component={ViewAll} />
+      <Stack.Screen name={NAVIGATION.homeManga} component={MangaHome} />
+      <Stack.Screen name={NAVIGATION.mangaViewAll} component={MangaViewAll} />
+      <Stack.Screen name={NAVIGATION.mangaSearch} component={MangaSearch} />
+      <Stack.Screen name={NAVIGATION.search} component={Search} />
     </Stack.Navigator>
   );
 }
diff --git a/src/Navigation/BottomNavigation.js b/src/Navigation/BottomNavigation.js
@@ -13,6 +13,7 @@ import {AnimeBookmarks, AnimeHome} from '../Screens/Anime';
 import {ComicBookmarks, Home, OfflineComic} from '../Screens/Comic';
 import {View, StyleSheet} from 'react-native';
 import DownTime from '../Components/UIComp/DownTime';
+import {MangaHome} from '../Screens/Manga/Home/Home';
 
 const BottomTab = createBottomTabNavigator();
 
@@ -34,14 +35,6 @@ const TabBarIcon = props => {
         color={props.tintColor}
       />
     );
-  } else if (props.name === 'search') {
-    return (
-      <Feather
-        name={props.name}
-        size={props.size ? props.size : 24}
-        color={props.tintColor}
-      />
-    );
   } else if (props.name === 'book-bookmark') {
     return (
       <FontAwesome6
@@ -114,16 +107,6 @@ export function BottomNavigation() {
         }}
       />
 
-      <BottomTab.Screen
-        name={NAVIGATION.search}
-        component={Search}
-        options={{
-          tabBarIcon: ({focused, color}) => (
-            <TabBarIcon focused={focused} tintColor={color} name="search" />
-          ),
-        }}
-      />
-
       <BottomTab.Screen
         name={NAVIGATION.bookmarks}
         component={animeActive ? AnimeBookmarks : ComicBookmarks}

diff --git a/src/Redux/Controller/Interceptor.js b/src/Redux/Controller/Interceptor.js
@@ -28,6 +28,8 @@ APICaller.interceptors.response.use(
   async response => {
     // Stop the trace when the response is received
     const {httpMetric} = response.config.metadata;
+
+    // console.log(response, 'response', httpMetric);
 
     httpMetric.setHttpResponseCode(response.status);
     httpMetric.setResponseContentType(response.headers['content-type']);

diff --git a/src/Screens/Anime/Home/AnimeHome.js b/src/Screens/Anime/Home/AnimeHome.js
@@ -1,9 +1,10 @@
 import React, {useEffect, useLayoutEffect, useState} from 'react';
-import {Text, View, FlatList} from 'react-native';
+import {Text, View, FlatList, TouchableOpacity} from 'react-native';
 
 import {useDispatch, useSelector} from 'react-redux';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import crashlytics from '@react-native-firebase/crashlytics';
+import Feather from 'react-native-vector-icons/Feather';
 
 import {FetchAnimeData} from '../../../Components/Func/HomeFunc';
 import {NAVIGATION} from '../../../Constants';
@@ -130,6 +131,14 @@ export function AnimeHome({navigation}) {
             }}>
             InkNest Anime
           </Text>
+          <TouchableOpacity
+            onPress={() => navigation.navigate(NAVIGATION.search)}>
+            <Feather
+              name={'search'}
+              size={heightPercentageToDP('2.5%')}
+              color={'#FFF'}
+            />
+          </TouchableOpacity>
         </Header>
 
         <View

diff --git a/src/Screens/Comic/Home/Home.js b/src/Screens/Comic/Home/Home.js
@@ -13,10 +13,9 @@ import {
 import {useDispatch, useSelector} from 'react-redux';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import crashlytics from '@react-native-firebase/crashlytics';
+import Feather from 'react-native-vector-icons/Feather';
 
-import {
-  fetchComicsData,
-} from '../../../Components/Func/HomeFunc';
+import {fetchComicsData} from '../../../Components/Func/HomeFunc';
 import LoadingModal from '../../../Components/UIComp/LoadingModal';
 import {
   heightPercentageToDP,
@@ -28,6 +27,7 @@ import Image from '../../../Components/UIComp/Image';
 import ErrorCard from '../../../Components/UIComp/ErrorCard';
 import HomeRenderItem from '../../../Components/UIComp/HomeRenderItem';
 import GridList from '../../../Components/UIComp/GridList';
+import {NAVIGATION} from '../../../Constants';
 
 export function Home({navigation}) {
   const dispatch = useDispatch();
@@ -119,6 +119,14 @@ export function Home({navigation}) {
               {'InkNest Comics'}
             </Text>
           </View>
+          <TouchableOpacity
+            onPress={() => navigation.navigate(NAVIGATION.search)}>
+            <Feather
+              name={'search'}
+              size={heightPercentageToDP('2.5%')}
+              color={'#FFF'}
+            />
+          </TouchableOpacity>
         </Header>
         {!loading && !comicsData?.data?.length && error ? (
           <View

diff --git a/src/Screens/Search/Search.js b/src/Screens/Search/Search.js
@@ -20,6 +20,7 @@ import {
 } from 'react-native-responsive-screen';
 
 import analytics from '@react-native-firebase/analytics';
+import Ionicons from 'react-native-vector-icons/Ionicons';
 
 import {useDispatch, useSelector} from 'react-redux';
 import {fetchSearchComic} from '../../Redux/Actions/GlobalActions';
@@ -201,7 +202,38 @@ export function Search({navigation}) {
   return (
     <SafeAreaView style={{flex: 1, backgroundColor: '#222'}} edges={['top']}>
       <View style={styles.container}>
-        <Header title="Search Bot" />
+        <Header
+          style={{
+            width: '100%',
+            height: heightPercentageToDP('4%'),
+            backgroundColor: '#222',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingHorizontal: 12,
+            borderBottomColor: '#fff',
+            borderBottomWidth: 0.5,
+            marginBottom: 5,
+          }}>
+          <TouchableOpacity onPress={() => navigation.goBack()}>
+            <Ionicons
+              name={'arrow-back'}
+              size={heightPercentageToDP('2.5%')}
+              color={'#FFF'}
+            />
+          </TouchableOpacity>
+          <View style={{flexDirection: 'row', gap: 12}}>
+            <Text
+              style={{
+                fontSize: heightPercentageToDP('2%'),
+                fontWeight: 'bold',
+                color: '#FFF',
+              }}>
+              {'Search'}
+            </Text>
+          </View>
+          <View style={{flex: 0.1}} />
+        </Header>
         <View
           style={{
             paddingHorizontal: widthPercentageToDP('2%'),