new

backend/module/web_scrap/ColaManga/get_chapter.py

@@ -59,14 +59,10 @@ def scrap(comic_id:str="",chapter_id:str="",output_dir:str=""):
         child_list = parent_element.find_elements(By.CLASS_NAME, "mh_comicpic")
         
         blob_list = []
-        is_no_more = False
         for child in child_list:
-            if is_no_more: break
-            timeout = date_utils.utc_time().add(10,'second').get()
+            timeout = date_utils.utc_time().add(5,'second').get()
             while True:
-                if date_utils.utc_time().get() >= timeout: 
-                    is_no_more = True
-                    break
+                if date_utils.utc_time().get() > timeout: break
                 image_element = child.find_element(By.TAG_NAME, "img")
                 driver.execute_script("arguments[0].scrollIntoView({ behavior: 'smooth', block: 'center' });", image_element)
                 

backend/module/web_scrap/ColaManga/get_cover.py

@@ -3,7 +3,7 @@
 from ..utils import SeleniumScraper
 from core.settings import BASE_DIR
 from selenium.webdriver.common.by import By
-
+from backend.module.utils import date_utils
 import json, base64, os, sys, time, threading
 
 
@@ -27,23 +27,19 @@ def scrap(id:int=None,cover_id:int=None):
         driver = scraper.driver()
         driver.get(url)
         
-        timeout = 0
+        timeout = date_utils.utc_time().add(MAX_TIMEOUT,'second').get()
         while True:
-            if timeout >= MAX_TIMEOUT: raise Exception('#1 Timed out!')
+            if date_utils.utc_time().get() >= timeout: raise Exception('#1 Timed out!')
             page_state = driver.execute_script('return document.readyState;')
             if page_state == 'complete': break
-            timeout += 1
-            time.sleep(1)
         
         image_src_url = f'https://res.colamanga.com/comic/{cover_id}/cover.jpg'
 
         # Find the image element by its src attribute
-        timeout = 0
+        timeout = date_utils.utc_time().add(MAX_TIMEOUT,'second').get()
         while True:
-            if timeout >= MAX_TIMEOUT: raise Exception('#2 Timed out!')
+            if date_utils.utc_time().get() >= timeout: raise Exception('#2 Timed out!')
             if len(driver.find_elements(By.CLASS_NAME, "fed-list-pics")): break
-            timeout += 1
-            time.sleep(1)
             
         origin_image_element = driver.find_elements(By.CLASS_NAME, "fed-list-pics")[0]
         
@@ -52,16 +48,14 @@ def scrap(id:int=None,cover_id:int=None):
         
         image_element = driver.find_element(By.ID, "injected_image")
         
-        timeout = 0
+        timeout = date_utils.utc_time().add(MAX_TIMEOUT,'second').get()
         while True:
-            if timeout >= MAX_TIMEOUT: raise Exception('#3 Timed out!')
+            if date_utils.utc_time().get() >= timeout: raise Exception('#3 Timed out!')
             is_image_loaded = driver.execute_script(
                 "return arguments[0].complete", 
                 image_element
             )
             if is_image_loaded: break
-            timeout += 1
-            time.sleep(1)
 
         DATA = None
         

backend/module/web_scrap/utils.py

@@ -13,7 +13,7 @@ import time, threading
 class SeleniumScraper:
     def __init__(self):
         options = Options()
-        # options.add_argument("--headless")
+        options.add_argument("--headless")
         options.add_argument('--no-sandbox')
         options.add_argument("--no-quit")
         options.add_argument('--disable-extensions')

frontend/app/_layout.tsx

@@ -7,7 +7,7 @@ import { useWindowDimensions, View, Text, Pressable } from 'react-native';
 import 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import Menu from '@/components/menu/menu';
-import Storage from '@/constants/module/storage';
+import Storage from '@/constants/module/storages/storage';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import Toast, { SuccessToast } from 'react-native-toast-message';
 import type { BaseToastProps } from 'react-native-toast-message';

frontend/app/explore/components/widgets.tsx

@@ -11,10 +11,10 @@ import axios from 'axios';
 import Theme from '@/constants/theme';
 import Dropdown from '@/components/dropdown';
 import { CONTEXT } from '@/constants/module/context';
-import Storage from '@/constants/module/storage';
-import ComicStorage from '@/constants/module/comic_storage';
-import ImageCacheStorage from '@/constants/module/image_cache_storage';
-import ChapterStorage from '@/constants/module/chapter_storage';
+import Storage from '@/constants/module/storages/storage';
+import ComicStorage from '@/constants/module/storages/comic_storage';
+import ImageCacheStorage from '@/constants/module/storages/image_cache_storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
 
 export const PageNavigationWidget = ({setPage}:any) =>{
     const Dimensions = useWindowDimensions();

frontend/app/explore/index.tsx

@@ -10,8 +10,8 @@ import Dropdown from '@/components/dropdown';
 
 import Theme from '@/constants/theme';
 import { __styles } from './stylesheet/show_list_styles';
-import Storage from '@/constants/module/storage';
-import ImageStorage from '@/constants/module/image_cache_storage';
+import Storage from '@/constants/module/storages/storage';
+import ImageStorage from '@/constants/module/storages/image_cache_storage';
 import { CONTEXT } from '@/constants/module/context';
 import { get_list } from '@/app/explore/module/content'
 import { transformAsync } from '@babel/core';

frontend/app/explore/module/content.tsx

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import translator from '@/constants/module/translator';
-import Storage from '@/constants/module/storage';
+import Storage from '@/constants/module/storages/storage';
 
 export const get_list = async (setShowCloudflareTurnstile:any,setFeedBack:any,signal:AbortSignal,setIsLoading:any,translate:any,SET_CONTENT:any,search:any,page:number) => {
     const API_BASE = await Storage.get("IN_USE_API_BASE")

frontend/app/index.tsx

@@ -9,7 +9,7 @@ const Index = () => {
     const pathname = usePathname()
 
     if (pathname === "/" || pathname === "") return (
-        <Redirect href="/read/colamanga/manga-nf048578?idx=1" />
+        <Redirect href="/read/colamanga/manga-nf048578?idx=165" />
     )
 
 }

frontend/app/read/[source]/[comic_id]/index.tsx

@@ -17,8 +17,8 @@ import NetInfo from "@react-native-community/netinfo";
 import { Marquee } from '@animatereactnative/marquee';
 import { Slider } from '@rneui/themed-edge';
 
-import Storage from '@/constants/module/storage';
-import ChapterStorage from '@/constants/module/chapter_storage';
+import Storage from '@/constants/module/storages/storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
 import Image from '@/components/Image';
 import {CONTEXT} from '@/constants/module/context';
 import {blobToBase64, base64ToBlob, getImageLayout} from "@/constants/module/file_manager";
@@ -27,7 +27,7 @@ import ChapterImage from '../../components/chapter_image';
 import Menu from '../../components/menu/menu';
 import Disqus from '../../components/disqus';
 import { get_chapter } from '../../modules/get_chapter';
-import ComicStorage from '@/constants/module/comic_storage';
+import ComicStorage from '@/constants/module/storages/comic_storage';
 
 const Index = ({}:any) => {
     const SOURCE = useLocalSearchParams().source;
@@ -41,6 +41,7 @@ const Index = ({}:any) => {
     const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)
     const {apiBaseContext, setApiBaseContext}:any = useContext(CONTEXT)
 
+    const [isError,setIsError]:any = useState({state:false,text:""})
     const [firstLoading, setFirstLoading]:any = useState(true)
     const [chapterInfo, setChapterInfo]:any = useState({})
     const [showOptions, setShowOptions]:any = useState({type:"general",state:false})
@@ -60,9 +61,19 @@ const Index = ({}:any) => {
         setShowMenuContext(false)
     },[])
 
+    // First Load
     useEffect(()=>{(async () => {
+        if (!SOURCE || !COMIC_ID || !CHAPTER_IDX.current){
+            setIsError({state:true,text:"Invalid source, comic id or chapter idx!"})
+            return
+        }
         temp_loading.current = true
         const stored_chapter = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,CHAPTER_IDX.current, {exclude_fields:["data"]})   
+        if (stored_chapter?.data_state !== "completed"){
+            setIsError({state:true,text:"Chapter is not download yet!"})
+            return
+        }
+
         setChapterInfo({
             chapter_id: stored_chapter?.id,
             chapter_idx: stored_chapter?.id,
@@ -70,6 +81,8 @@ const Index = ({}:any) => {
         })
         const stored_chapter_zoom = await Storage.get("CHAPTER_ZOOM") || 0
         setZoom(stored_chapter_zoom)
+
+        
         
         const chapter_current = await get_chapter(SOURCE,COMIC_ID,CHAPTER_IDX.current)
         if (chapter_current){
@@ -152,319 +165,402 @@ const Index = ({}:any) => {
     },[imageKeys, addChapter])
 
 
-    return (<>{!firstLoading
-        ? <>
-            <View
-                
+    return (<>
+        {isError.state
+            ? <View
                 style={{
+                    display:"flex",
+                    flexDirection:"column",
+                    gap:8,
                     width:"100%",
                     height:"100%",
                     backgroundColor:Theme[themeTypeContext].background_color,
-                    zIndex:0
                 }}
-            >   
-                <FlashList 
-                    data={imageKeys}
-                    renderItem={({item,index}:any) => {
-                        if (item.type === "image"){
-                            item.image_data = images.current[item.value].data
-                            item.layout = images.current[item.value].layout
-                        }
-                        return <ChapterImage key={index} item={item} zoom={zoom} showOptions={showOptions} setShowOptions={setShowOptions}/>
+            >
+                <View
+                    style={{
+                        width:"100%",
+                        height:"auto",
+                        display:"flex",
+                        flexDirection:"row",
+                        justifyContent:"space-between",
+                        alignItems:"center",
+                        padding:16,
+                        gap:8,
+                        backgroundColor:Theme[themeTypeContext].background_color,
+                        borderBottomWidth:2,
+                        borderColor:Theme[themeTypeContext].border_color,
+                        pointerEvents:"auto",
                     }}
-                    estimatedItemSize={StaticDimensions.height}
-                    extraData={{zoom:zoom,showOptions:showOptions,setShowOptions:setShowOptions}}
-                    onEndReachedThreshold={0.5}
-                    onEndReached={()=>{
-                        setAddChapter(true)
-                    }}
-                    onViewableItemsChanged={async ({ viewableItems, changed }) => {
-                        const expect_chapter_idx = [CHAPTER_IDX.current + 1, CHAPTER_IDX.current - 1]
-                        const current_count = viewableItems.filter((data:any) => data.item.idx === CHAPTER_IDX.current).length
-                        const existed_count = viewableItems.filter((data:any) => expect_chapter_idx.includes(data.item.idx)).length
-                        
-                        if (current_count || existed_count){
-                            const choose_idx = current_count > existed_count ? CHAPTER_IDX.current : viewableItems.find((data:any) => expect_chapter_idx.includes(data.item.idx))?.item.idx
-                            if (choose_idx === CHAPTER_IDX.current) return
-                            const stored_chapter = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,choose_idx, {exclude_fields:["data"]})   
-                            setChapterInfo({
-                                chapter_id: stored_chapter?.id,
-                                chapter_idx: stored_chapter?.id,
-                                title: stored_chapter?.title,
-                            })
-                            const stored_comic = await ComicStorage.getByID(SOURCE, COMIC_ID)
-                            if (stored_comic.history.idx && choose_idx > stored_comic.history.idx) {
-                                await ComicStorage.updateHistory(SOURCE, COMIC_ID, {idx:stored_chapter?.idx,id:stored_chapter?.id,title:stored_chapter?.title})
-                            }
-                            router.setParams({idx:choose_idx})
-                            CHAPTER_IDX.current = choose_idx
-                        }
-                        
+                >
+                    <TouchableRipple
+                        rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                        style={{
+                            borderRadius:5,
+                            borderWidth:0,
+                            backgroundColor: "transparent",
+                            padding:5,
+                            
+                        }}
                         
-                    }}
-                />
-                {isLoading && (
+                        onPress={()=>{
+                            router.replace("/explore")
+                        }}
+                    >
+                        <Icon source={"arrow-left-thin"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
+                    </TouchableRipple>
                     <View
                         style={{
-                            display:"flex",
-                            width:"100%",
-                            height:"auto",
-                            justifyContent:"center",
-                            padding:16,
+                            flex:1,
                         }}
                     >
-                        <ActivityIndicator animating={true}  size={(0.03 * ((Dimensions.width+Dimensions.height)/2)) * (1 - zoom/100)}/>
+                        <Text selectable={false}
+                            numberOfLines={1}
+                            style={{
+                                color:Theme[themeTypeContext].text_color,
+                                fontSize:((Dimensions.width+Dimensions.height)/2)*0.045,
+                                fontFamily:"roboto-bold",
+                            }}
+                        >
+                            Explore
+                        </Text>
                     </View>
-                )}
-                
+                </View>
+                <View 
+                    style={{
+                        width:"100%",
+                        height:"auto",
+                        display:"flex",
+                        justifyContent:"center",
+                        alignItems:"center",
+                        padding:12,
+                        paddingTop:20,
+                    }}
+                >
+                    <Text
+                        style={{
+                            color:Theme[themeTypeContext].text_color,
+                            fontFamily:"roboto-medium",
+                            fontSize:(Dimensions.width+Dimensions.height)/2*0.03
+                        }}
+                    >{isError.text}</Text>
+                </View>
             </View>
-            <AnimatePresence exitBeforeEnter>
-                {showOptions.state && 
+            : <>{!firstLoading
+                ? <>
                     <View
+                        
                         style={{
-                            position:"absolute",
                             width:"100%",
                             height:"100%",
-                            display:"flex",
-                            flexDirection:"column",
-                            zIndex:1,
+                            backgroundColor:Theme[themeTypeContext].background_color,
+                            zIndex:0
                         }}
-                    >
-                        <>{showOptions.type === "general" && <>
-                            <Pressable
-                                onPress={()=>{setShowOptions({...showOptions,state:!showOptions.state})}}
-                                style={{flex:1,backgroundColor:"rgba(0,0,0,0.5)",pointerEvents:"auto"}}
+                    >   
+                        <FlashList 
+                            data={imageKeys}
+                            renderItem={({item,index}:any) => {
+                                if (item.type === "image"){
+                                    item.image_data = images.current[item.value].data
+                                    item.layout = images.current[item.value].layout
+                                }
+                                return <ChapterImage key={index} item={item} zoom={zoom} showOptions={showOptions} setShowOptions={setShowOptions}/>
+                            }}
+                            estimatedItemSize={StaticDimensions.height}
+                            extraData={{zoom:zoom,showOptions:showOptions,setShowOptions:setShowOptions}}
+                            onEndReachedThreshold={0.5}
+                            onEndReached={()=>{
+                                setAddChapter(true)
+                            }}
+                            onViewableItemsChanged={async ({ viewableItems, changed }) => {
+                                const expect_chapter_idx = [CHAPTER_IDX.current + 1, CHAPTER_IDX.current - 1]
+                                const current_count = viewableItems.filter((data:any) => data.item.idx === CHAPTER_IDX.current).length
+                                const existed_count = viewableItems.filter((data:any) => expect_chapter_idx.includes(data.item.idx)).length
+                                
+                                if (current_count || existed_count){
+                                    const choose_idx = current_count > existed_count ? CHAPTER_IDX.current : viewableItems.find((data:any) => expect_chapter_idx.includes(data.item.idx))?.item.idx
+                                    if (choose_idx === CHAPTER_IDX.current) return
+                                    const stored_chapter = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,choose_idx, {exclude_fields:["data"]})   
+                                    setChapterInfo({
+                                        chapter_id: stored_chapter?.id,
+                                        chapter_idx: stored_chapter?.id,
+                                        title: stored_chapter?.title,
+                                    })
+                                    const stored_comic = await ComicStorage.getByID(SOURCE, COMIC_ID)
+                                    if (stored_comic.history.idx && choose_idx > stored_comic.history.idx) {
+                                        await ComicStorage.updateHistory(SOURCE, COMIC_ID, {idx:stored_chapter?.idx,id:stored_chapter?.id,title:stored_chapter?.title})
+                                    }
+                                    router.setParams({idx:choose_idx})
+                                    CHAPTER_IDX.current = choose_idx
+                                }
+                                
+                                
+                            }}
+                        />
+                        {isLoading && (
+                            <View
+                                style={{
+                                    display:"flex",
+                                    width:"100%",
+                                    height:"auto",
+                                    justifyContent:"center",
+                                    padding:16,
+                                }}
                             >
-                                <View  
-                                    id='reading-options'
-                                    style={{
-                                        flex:1,
-                                        display:"flex",
-                                        flexDirection:"column",
-                                        alignItems:"flex-start",
-                                        backgroundColor:"transparent",
-                                        pointerEvents:"auto",
-                                    }}
-                                    from={{
-                                        opacity: 0,
-                                    }}
-                                    animate={{
-                                        opacity: 1,
-
-                                    }}
-                                    exit={{
-                                        opacity: 0,
-                                    }}
-                                    transition={{
-                                        type: 'timing',
-                                        duration: 500,
-                                    }}
-                                    exitTransition={{
-                                        type: 'timing',
-                                        duration: 250,
-                                    }}
-                                >
-                                    
-                                        <View 
+                                <ActivityIndicator animating={true}  size={(0.03 * ((Dimensions.width+Dimensions.height)/2)) * (1 - zoom/100)}/>
+                            </View>
+                        )}
+                        
+                    </View>
+                    <AnimatePresence exitBeforeEnter>
+                        {showOptions.state && 
+                            <View
+                                style={{
+                                    position:"absolute",
+                                    width:"100%",
+                                    height:"100%",
+                                    display:"flex",
+                                    flexDirection:"column",
+                                    zIndex:1,
+                                }}
+                            >
+                                <>{showOptions.type === "general" && <>
+                                    <Pressable
+                                        onPress={()=>{setShowOptions({...showOptions,state:!showOptions.state})}}
+                                        style={{flex:1,backgroundColor:"rgba(0,0,0,0.5)",pointerEvents:"auto"}}
+                                    >
+                                        <View  
+                                            id='reading-options'
                                             style={{
-                                                width:"100%",
-                                                height:"auto",
+                                                flex:1,
                                                 display:"flex",
-                                                flexDirection:"row",
-                                                justifyContent:"space-between",
-                                                alignItems:"center",
-                                                padding:16,
-                                                gap:8,
-                                                backgroundColor:Theme[themeTypeContext].background_color,
-                                                borderBottomWidth:2,
-                                                borderColor:Theme[themeTypeContext].border_color,
+                                                flexDirection:"column",
+                                                alignItems:"flex-start",
+                                                backgroundColor:"transparent",
                                                 pointerEvents:"auto",
                                             }}
+                                            from={{
+                                                opacity: 0,
+                                            }}
+                                            animate={{
+                                                opacity: 1,
+
+                                            }}
+                                            exit={{
+                                                opacity: 0,
+                                            }}
+                                            transition={{
+                                                type: 'timing',
+                                                duration: 500,
+                                            }}
+                                            exitTransition={{
+                                                type: 'timing',
+                                                duration: 250,
+                                            }}
                                         >
-                                            <TouchableRipple
-                                                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
-                                                style={{
-                                                    borderRadius:5,
-                                                    borderWidth:0,
-                                                    backgroundColor: "transparent",
-                                                    padding:5,
-                                                    
-                                                }}
-                                                
-                                                onPress={()=>{
-                                                    router.replace(`/view/${SOURCE}/${COMIC_ID}/`)
-                                                }}
-                                            >
-                                                <Icon source={"arrow-left-thin"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
-                                            </TouchableRipple>
-                                            <View
-                                                style={{
-                                                    flex:1,
-                                                }}
-                                            >
-                                                <Text selectable={false}
-                                                    numberOfLines={1}
+                                            
+                                                <View 
                                                     style={{
-                                                        color:Theme[themeTypeContext].text_color,
-                                                        fontSize:((Dimensions.width+Dimensions.height)/2)*0.045,
-                                                        fontFamily:"roboto-bold",
+                                                        width:"100%",
+                                                        height:"auto",
+                                                        display:"flex",
+                                                        flexDirection:"row",
+                                                        justifyContent:"space-between",
+                                                        alignItems:"center",
+                                                        padding:16,
+                                                        gap:8,
+                                                        backgroundColor:Theme[themeTypeContext].background_color,
+                                                        borderBottomWidth:2,
+                                                        borderColor:Theme[themeTypeContext].border_color,
+                                                        pointerEvents:"auto",
                                                     }}
                                                 >
-                                                    {chapterInfo.title}
-                                                </Text>
-                                            </View>
-                                            <TouchableRipple
-                                                rippleColor={Theme[themeTypeContext].ripple_color_outlined}
-                                                style={{
-                                                    borderRadius:5,
-                                                    borderWidth:0,
-                                                    backgroundColor: "transparent",
-                                                    padding:5,
-                                                }}
-                                                
-                                                onPress={()=>{
-                                                    console.log("HO2h2")
-                                                }}
-                                            >
-                                                <Icon source={"cloud-refresh"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
-                                            </TouchableRipple>
-                                        </View>
-                                        <View 
-                                            style={{
-                                                display:"flex",
-                                                flexDirection:"column",
-                                                width:"100%",
-                                                flex:1,
-                                                padding:16,
-                                                alignItems:"flex-end",
-                                                gap:12,
-                                                justifyContent:"center",
-                                            }}
-                                        >
-                                            <View style={{width:"auto",height:"auto",display:"flex",flexDirection:"column",alignItems:"center",gap:8, pointerEvents:"auto"}}>
-                                                <View style={{
-                                                    width:"auto",
-                                                    height:"auto",
-                                                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                                                    paddingHorizontal:12,
-                                                    paddingVertical:12,
-                                                    borderRadius:12,
-                                                    
-                                                }}>
-                                                    <Slider
-                                                        style={{ 
-                                                            width: ((Dimensions.width+Dimensions.height)/2)*0.06,
-                                                            height: Dimensions.height*0.525,
-                                                            pointerEvents:"auto",
-                                                        }}
-                                                        value={zoom}
-                                                        onValueChange={async (value)=>{
-                                                            await Storage.store("CHAPTER_ZOOM", value)
-                                                            setZoom(value)
+                                                    <TouchableRipple
+                                                        rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                                        style={{
+                                                            borderRadius:5,
+                                                            borderWidth:0,
+                                                            backgroundColor: "transparent",
+                                                            padding:5,
+                                                            
                                                         }}
                                                         
-                                                        maximumValue={80}
-                                                        minimumValue={-80}
-                                                        step={1}
-                                                        
-                                                        orientation="vertical"
-                                                        
-                                                        minimumTrackTintColor={Theme[themeTypeContext].text_color}
-                                                        maximumTrackTintColor={Theme[themeTypeContext].border_color}
-
-                                                        thumbStyle={{ 
-                                                            height: "auto", 
-                                                            width: "auto", 
-                                                            backgroundColor: Theme[themeTypeContext].background_color,
+                                                        onPress={()=>{
+                                                            router.replace(`/view/${SOURCE}/${COMIC_ID}/`)
+                                                        }}
+                                                    >
+                                                        <Icon source={"arrow-left-thin"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
+                                                    </TouchableRipple>
+                                                    <View
+                                                        style={{
+                                                            flex:1,
+                                                        }}
+                                                    >
+                                                        <Text selectable={false}
+                                                            numberOfLines={1}
+                                                            style={{
+                                                                color:Theme[themeTypeContext].text_color,
+                                                                fontSize:((Dimensions.width+Dimensions.height)/2)*0.045,
+                                                                fontFamily:"roboto-bold",
+                                                            }}
+                                                        >
+                                                            {chapterInfo.title}
+                                                        </Text>
+                                                    </View>
+                                                    <TouchableRipple
+                                                        rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                                        style={{
+                                                            borderRadius:5,
+                                                            borderWidth:0,
+                                                            backgroundColor: "transparent",
                                                             padding:5,
-                                                            
                                                         }}
-                                                        thumbProps={{children: (<>
-                                                            <>{zoom < 0
-                                                                && <Icon source={"magnify-plus-outline"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
-                                                            }</>
-                                                            <>{zoom === 0
-                                                                && <Icon source={"magnify"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
-                                                            }</>
-                                                            <>{zoom > 0
-                                                                && <Icon source={"magnify-minus-outline"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
-                                                            }</>
-                                                        </>)}}
-
                                                         
-                                                    />
-                                                    
+                                                        onPress={()=>{
+                                                            console.log("HO2h2")
+                                                        }}
+                                                    >
+                                                        <Icon source={"cloud-refresh"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
+                                                    </TouchableRipple>
                                                 </View>
-                                                <TouchableRipple
-                                                    rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                                <View 
                                                     style={{
-                                                        borderRadius:5,
-                                                        borderWidth:0,
-                                                        backgroundColor: "transparent",
-                                                        padding:5,
-                                                        pointerEvents:"auto",
-                                                    }}
-                                                    
-                                                    onPress={async ()=>{
-                                                        await Storage.store("CHAPTER_ZOOM", 0)
-                                                        setZoom(0)
+                                                        display:"flex",
+                                                        flexDirection:"column",
+                                                        width:"100%",
+                                                        flex:1,
+                                                        padding:16,
+                                                        alignItems:"flex-end",
+                                                        gap:12,
+                                                        justifyContent:"center",
                                                     }}
                                                 >
-                                                    <Icon source={"magnify-remove-cursor"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
-                                                </TouchableRipple>
-                                            </View>
+                                                    <View style={{width:"auto",height:"auto",display:"flex",flexDirection:"column",alignItems:"center",gap:8, pointerEvents:"auto"}}>
+                                                        <View style={{
+                                                            width:"auto",
+                                                            height:"auto",
+                                                            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                                                            paddingHorizontal:12,
+                                                            paddingVertical:12,
+                                                            borderRadius:12,
+                                                            
+                                                        }}>
+                                                            <Slider
+                                                                style={{ 
+                                                                    width: ((Dimensions.width+Dimensions.height)/2)*0.06,
+                                                                    height: Dimensions.height*0.525,
+                                                                    pointerEvents:"auto",
+                                                                }}
+                                                                value={zoom}
+                                                                onValueChange={async (value)=>{
+                                                                    await Storage.store("CHAPTER_ZOOM", value)
+                                                                    setZoom(value)
+                                                                }}
+                                                                
+                                                                maximumValue={80}
+                                                                minimumValue={-80}
+                                                                step={1}
+                                                                
+                                                                orientation="vertical"
+                                                                
+                                                                minimumTrackTintColor={Theme[themeTypeContext].text_color}
+                                                                maximumTrackTintColor={Theme[themeTypeContext].border_color}
+
+                                                                thumbStyle={{ 
+                                                                    height: "auto", 
+                                                                    width: "auto", 
+                                                                    backgroundColor: Theme[themeTypeContext].background_color,
+                                                                    padding:5,
+                                                                    
+                                                                }}
+                                                                thumbProps={{children: (<>
+                                                                    <>{zoom < 0
+                                                                        && <Icon source={"magnify-plus-outline"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
+                                                                    }</>
+                                                                    <>{zoom === 0
+                                                                        && <Icon source={"magnify"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
+                                                                    }</>
+                                                                    <>{zoom > 0
+                                                                        && <Icon source={"magnify-minus-outline"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
+                                                                    }</>
+                                                                </>)}}
+
+                                                                
+                                                            />
+                                                            
+                                                        </View>
+                                                        <TouchableRipple
+                                                            rippleColor={Theme[themeTypeContext].ripple_color_outlined}
+                                                            style={{
+                                                                borderRadius:5,
+                                                                borderWidth:0,
+                                                                backgroundColor: "transparent",
+                                                                padding:5,
+                                                                pointerEvents:"auto",
+                                                            }}
+                                                            
+                                                            onPress={async ()=>{
+                                                                await Storage.store("CHAPTER_ZOOM", 0)
+                                                                setZoom(0)
+                                                            }}
+                                                        >
+                                                            <Icon source={"magnify-remove-cursor"} size={((Dimensions.width+Dimensions.height)/2)*0.05} color={Theme[themeTypeContext].icon_color}/>
+                                                        </TouchableRipple>
+                                                    </View>
+                                                </View>
+                                            
+                                            
                                         </View>
-                                    
-                                    
-                                </View>
-                                
-                            </Pressable>
-                        </>}</>
-                        <>{showOptions.type === "comments"&& <>
-                            <View
-                                style={{
-                                    width:"100%",
-                                    height:"auto",
-                                    padding:16,
-                                    backgroundColor:Theme[themeTypeContext].background_color,
-                                    borderBottomWidth:2,
-                                    borderColor:Theme[themeTypeContext].border_color,
-                                }}
-                            >
-                                <Text selectable={false}
-                                    numberOfLines={1}
-                                    style={{
-                                        color:Theme[themeTypeContext].text_color,
-                                        fontSize:((Dimensions.width+Dimensions.height)/2)*0.045,
-                                        fontFamily:"roboto-bold",
-                                    }}
-                                >
-                                    {chapterInfo.title}
-                                </Text>
-                            </View>
-                            <View
-                                style={{
-                                    flex:1,
-                                    backgroundColor:Theme[themeTypeContext].background_color,
-                                }}
-                            >   
-                                <Disqus title={chapterInfo.title} identifier={`${SOURCE}-${COMIC_ID}-${CHAPTER_IDX.current}`} url={`${apiBaseContext}/read/${SOURCE}/${COMIC_ID}/`}
-                                    paddingVertical={16} paddingHorizontal={25}
-                                />
+                                        
+                                    </Pressable>
+                                </>}</>
+                                <>{showOptions.type === "comments"&& <>
+                                    <View
+                                        style={{
+                                            width:"100%",
+                                            height:"auto",
+                                            padding:16,
+                                            backgroundColor:Theme[themeTypeContext].background_color,
+                                            borderBottomWidth:2,
+                                            borderColor:Theme[themeTypeContext].border_color,
+                                        }}
+                                    >
+                                        <Text selectable={false}
+                                            numberOfLines={1}
+                                            style={{
+                                                color:Theme[themeTypeContext].text_color,
+                                                fontSize:((Dimensions.width+Dimensions.height)/2)*0.045,
+                                                fontFamily:"roboto-bold",
+                                            }}
+                                        >
+                                            {chapterInfo.title}
+                                        </Text>
+                                    </View>
+                                    <View
+                                        style={{
+                                            flex:1,
+                                            backgroundColor:Theme[themeTypeContext].background_color,
+                                        }}
+                                    >   
+                                        <Disqus title={chapterInfo.title} identifier={`${SOURCE}-${COMIC_ID}-${CHAPTER_IDX.current}`} url={`${apiBaseContext}/read/${SOURCE}/${COMIC_ID}/`}
+                                            paddingVertical={16} paddingHorizontal={25}
+                                        />
+                                    </View>
+                                </>}</>
+                                <Menu showOptions={showOptions} setShowOptions={setShowOptions}/>
                             </View>
-                        </>}</>
-                        <Menu showOptions={showOptions} setShowOptions={setShowOptions}/>
-                    </View>
-                }
-            </AnimatePresence>
-            
-        </>
-        
+                        }
+                    </AnimatePresence>
+                    
+                </>
+                
 
-        :<View style={{zIndex:5,width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:Theme[themeTypeContext].background_color}}>
-            <Image setShowCloudflareTurnstile={setShowCloudflareTurnstileContext} source={require("@/assets/gif/cat-loading.gif")} style={{width:((Dimensions.width+Dimensions.height)/2)*0.15,height:((Dimensions.width+Dimensions.height)/2)*0.15}}/>
-        </View>
-    }</>)
+                :<View style={{zIndex:5,width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:Theme[themeTypeContext].background_color}}>
+                    <Image setShowCloudflareTurnstile={setShowCloudflareTurnstileContext} source={require("@/assets/gif/cat-loading.gif")} style={{width:((Dimensions.width+Dimensions.height)/2)*0.15,height:((Dimensions.width+Dimensions.height)/2)*0.15}}/>
+                </View>
+            }</>
+        }
+    </>)
     
 
 }

frontend/app/read/components/chapter_image.tsx

@@ -14,7 +14,7 @@ import * as FileSystem from 'expo-file-system';
 import NetInfo from "@react-native-community/netinfo";
 import JSZip from 'jszip';
 
-import ChapterStorage from '@/constants/module/chapter_storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
 import Image from '@/components/Image';
 import {CONTEXT} from '@/constants/module/context';
 import {blobToBase64, base64ToBlob} from "@/constants/module/file_manager";

frontend/app/read/components/menu/components/menu_button.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useContext } from 'react';
 import { Link, router, usePathname } from 'expo-router';
 import { StyleSheet} from 'react-native';
 import { __styles } from '../stylesheet/styles';
-import storage from '@/constants/module/storage';
+import storage from '@/constants/module/storages/storage';
 import { Icon, MD3Colors, Button, Text, TouchableRipple } from 'react-native-paper';
 import Theme from '@/constants/theme';
 import {useWindowDimensions} from 'react-native';

frontend/app/read/components/menu/menu.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Link, usePathname } from 'expo-router';
 import { StyleSheet, View} from 'react-native';
 import { __styles } from './stylesheet/styles';
-import storage from '@/constants/module/storage';
+import storage from '@/constants/module/storages/storage';
 import { Icon, MD3Colors, Button } from 'react-native-paper';
 import Theme from '@/constants/theme';
 import {useWindowDimensions} from 'react-native';

frontend/app/read/modules/get_chapter.tsx

@@ -1,5 +1,5 @@
-import Storage from '@/constants/module/storage';
-import ChapterStorage from '@/constants/module/chapter_storage';
+import Storage from '@/constants/module/storages/storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
 import JSZip from 'jszip';
 import {blobToBase64, base64ToBlob, getImageLayout} from "@/constants/module/file_manager";
 import * as FileSystem from 'expo-file-system';

frontend/app/view/[source]/[comic_id].tsx

@@ -16,10 +16,10 @@ import NetInfo from "@react-native-community/netinfo";
 
 import Theme from '@/constants/theme';
 import { __styles } from '../stylesheet/show_styles';
-import Storage from '@/constants/module/storage';
-import ImageCacheStorage from '@/constants/module/image_cache_storage';
-import ChapterStorage from '@/constants/module/chapter_storage';
-import ComicStorage from '@/constants/module/comic_storage';
+import Storage from '@/constants/module/storages/storage';
+import ImageCacheStorage from '@/constants/module/storages/image_cache_storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
+import ComicStorage from '@/constants/module/storages/comic_storage';
 import { CONTEXT } from '@/constants/module/context';
 import Dropdown from '@/components/dropdown';
 import { PageNavigationWidget, RequestChapterWidget, BookmarkWidget } from '../componenets/widgets';
@@ -80,7 +80,7 @@ const Index = ({}:any) => {
 
     // Test Section
     useEffect(() => {
-        console.log(CONTENT)
+        // console.log(CONTENT)
     },[CONTENT])
 
 

frontend/app/view/componenets/chapter.tsx

@@ -16,10 +16,10 @@ import NetInfo from "@react-native-community/netinfo";
 
 import Theme from '@/constants/theme';
 import { __styles } from '../stylesheet/show_styles';
-import Storage from '@/constants/module/storage';
-import ImageCacheStorage from '@/constants/module/image_cache_storage';
-import ChapterStorage from '@/constants/module/chapter_storage';
-import ComicStorage from '@/constants/module/comic_storage';
+import Storage from '@/constants/module/storages/storage';
+import ImageCacheStorage from '@/constants/module/storages/image_cache_storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
+import ComicStorage from '@/constants/module/storages/comic_storage';
 import { CONTEXT } from '@/constants/module/context';
 import Dropdown from '@/components/dropdown';
 import { RequestChapterWidget, BookmarkWidget } from './widgets';

frontend/app/view/componenets/widgets.tsx

@@ -12,10 +12,10 @@ import Theme from '@/constants/theme';
 import Dropdown from '@/components/dropdown';
 import { CONTEXT } from '@/constants/module/context';
 import { store_comic_cover } from '../modules/content';
-import Storage from '@/constants/module/storage';
-import ComicStorage from '@/constants/module/comic_storage';
-import ImageCacheStorage from '@/constants/module/image_cache_storage';
-import ChapterStorage from '@/constants/module/chapter_storage';
+import Storage from '@/constants/module/storages/storage';
+import ComicStorage from '@/constants/module/storages/comic_storage';
+import ImageCacheStorage from '@/constants/module/storages/image_cache_storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
 
 
 export const PageNavigationWidget = ({MAX_OFFSET,setPage,CONTENT}:any) =>{

frontend/app/view/modules/content.tsx

@@ -4,10 +4,10 @@ import * as FileSystem from 'expo-file-system';
 import { Platform } from 'react-native';
 
 import translator from '@/constants/module/translator';
-import Storage from '@/constants/module/storage';
-import ComicStorage from '@/constants/module/comic_storage';
-import ImageCacheStorage from '@/constants/module/image_cache_storage';
-import ChapterStorage from '@/constants/module/chapter_storage';
+import Storage from '@/constants/module/storages/storage';
+import ComicStorage from '@/constants/module/storages/comic_storage';
+import ImageCacheStorage from '@/constants/module/storages/image_cache_storage';
+import ChapterStorage from '@/constants/module/storages/chapter_storage';
 import {blobToBase64} from '@/constants/module/file_manager';
 
 

frontend/app/view/modules/socket.tsx

@@ -1,4 +1,4 @@
-import Storage from '@/constants/module/storage'; // Adjust the import path as needed
+import Storage from '@/constants/module/storages/storage'; // Adjust the import path as needed
 import uuid from 'react-native-uuid';
 import NetInfo from '@react-native-community/netinfo';
 

frontend/components/Image.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useContext, useCallback, useRef } from "react"
 import { Image as _Image } from 'expo-image';
 import { View } from "react-native"
-import ImageCacheStorage from "@/constants/module/image_cache_storage";
+import ImageCacheStorage from "@/constants/module/storages/image_cache_storage";
 import {blobToBase64} from "@/constants/module/file_manager";
 import { Icon, Button } from 'react-native-paper';
 import { ActivityIndicator } from 'react-native-paper';

frontend/components/cloudflare_turnstile.tsx

@@ -5,7 +5,7 @@ import { Platform, View, Text } from 'react-native';
 import axios from 'axios';
 import { Button } from 'react-native-paper';
 
-import Storage from '@/constants/module/storage';
+import Storage from '@/constants/module/storages/storage';
 
 import Theme from '@/constants/theme';
 

frontend/components/menu/components/menu_button.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useContext } from 'react';
 import { Link, router, usePathname } from 'expo-router';
 import { StyleSheet} from 'react-native';
 import { __styles } from '../stylesheet/styles';
-import storage from '@/constants/module/storage';
+import storage from '@/constants/module/storages/storage';
 import { Icon, MD3Colors, Button, Text, TouchableRipple } from 'react-native-paper';
 import Theme from '@/constants/theme';
 import {useWindowDimensions} from 'react-native';

frontend/components/menu/menu.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Link, usePathname } from 'expo-router';
 import { StyleSheet, View} from 'react-native';
 import { __styles } from './stylesheet/styles';
-import storage from '@/constants/module/storage';
+import storage from '@/constants/module/storages/storage';
 import { Icon, MD3Colors, Button } from 'react-native-paper';
 import Theme from '@/constants/theme';
 import {useWindowDimensions} from 'react-native';

frontend/constants/module/{chapter_storage.tsx → storages/chapter_storage.tsx}

@@ -3,7 +3,7 @@
 
 import { Platform } from "react-native";
 import * as SQLite from 'expo-sqlite';
-import { ensure_safe_table_name } from "./ensure_safe_table_name";
+import { ensure_safe_table_name } from "../ensure_safe_table_name";
 
 const DATABASE_NAME = 'ChapterDB';
 

frontend/constants/module/{image_cache_storage.tsx → storages/image_cache_storage.tsx}

@@ -8,7 +8,7 @@ import * as SQLite from 'expo-sqlite';
 import * as FileSystem from 'expo-file-system';
 
 import {blobToBase64} from '@/constants/module/file_manager';
-import Storage from '@/constants/module/storage';
+import Storage from '@/constants/module/storages/storage';
 
 // Most of the code here is generated by A.I with some edit and tweak.
 // I'm lazy to sit and implement entire thing :)