NEW update 1

backend/invoke_worker/chapter_queue.py

@@ -233,10 +233,10 @@ class UpdateSocketQueue(Thread):
                 MAX_QUEUE = SocketRequestChapterQueueCache.objects.count()
                 
                 if (MAX_QUEUE):
-                    query_result = list(set(SocketRequestChapterQueueCache.objects.order_by("-datetime").values_list('socket_id', flat=True).distinct()))
+                    query_result = list(set(SocketRequestChapterQueueCache.objects.order_by("datetime").values_list('socket_id', flat=True).distinct()))
                     for socket_id in query_result:
                         object = {}
-                        query_result_2 = SocketRequestChapterQueueCache.objects.filter(socket_id=socket_id).order_by("-datetime").values("source","comic_id","chapter_idx")
+                        query_result_2 = SocketRequestChapterQueueCache.objects.filter(socket_id=socket_id).order_by("datetime").values("source","comic_id","chapter_idx")
                         
                         for item in query_result_2:
                             source = item.get("source")

frontend/app/index.tsx

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

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

@@ -42,18 +42,13 @@ const Index = ({}:any) => {
     const {apiBaseContext, setApiBaseContext}:any = useContext(CONTEXT)
 
     const [isError,setIsError]:any = useState({state:false,text:""})
-    const [firstLoading, setFirstLoading]:any = useState(true)
+    const [isLoading, setIsLoading]:any = useState(true)
     const [chapterInfo, setChapterInfo]:any = useState({})
     const [showOptions, setShowOptions]:any = useState({type:"general",state:false})
-    const [imageKeys, setImageKeys]:any = useState([])
-    const [isLoading, setIsLoading]:any = useState("")
-    const [addChapter, setAddChapter]:any = useState(false)
+    const [DATA, SET_DATA]:any = useState([])
+    const [isAdding, setIsAdding]:any = useState(false)
     const [zoom, setZoom]:any = useState(0)
 
-    const is_adding:any = useRef({state:false,interval:null})
-    const temp_loading:any = useRef(false)
-    const temp_image_keys:any = useRef({})
-    const images:any = useRef({})
     const CHAPTER_IDX = useRef(Number(useLocalSearchParams().idx as string));
 
 
@@ -67,7 +62,7 @@ const Index = ({}:any) => {
             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!"})
@@ -82,88 +77,51 @@ 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){
-            images.current = {...images.current,...chapter_current?.files}
-            setImageKeys(chapter_current?.file_keys)
-            setFirstLoading(false)
-        }
+        const chapter_current_data = await get_chapter(SOURCE,COMIC_ID,CHAPTER_IDX.current)
 
-        const chapter_next = await get_chapter(SOURCE,COMIC_ID,CHAPTER_IDX.current+1)
-        if (chapter_next){
-            temp_image_keys.current[`${CHAPTER_IDX.current+1}`] = chapter_next?.file_keys
-            images.current = {...images.current,...chapter_next?.files}
-        }
-        
-        temp_loading.current = false
+        SET_DATA(chapter_current_data)
+        setIsLoading(false)
     })()},[])
 
 
     useFocusEffect(useCallback(() => {
         return () => {
-            setImageKeys([])
-            images.current = {}
-            clearInterval(is_adding.current.interval)
+            SET_DATA([])
         }
     },[]))
 
-    useEffect(()=>{
-        if (!addChapter) return
-        if (is_adding.current.state) return
-        is_adding.current.state = true
-        setIsLoading(true)
-        clearInterval(is_adding.current.interval)
-        is_adding.current.interval = setInterval(()=>{
-            if (!temp_loading.current) {
-                clearInterval(is_adding.current.interval);
-                temp_loading.current = true;
-                (async ()=>{
-                    const new_chapter_idx = CHAPTER_IDX.current+1
-                    if (imageKeys.slice(-1)[0]?.type !== "no-chapter-banner"){
-                        const next_stored_chapter = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,new_chapter_idx, {exclude_fields:["data"]})   
-                        if (next_stored_chapter?.data_state === "completed"){
-                            if (temp_image_keys.current.hasOwnProperty(new_chapter_idx)){
-                                delete temp_image_keys.current[new_chapter_idx-2]
-                                const pre_image_keys = imageKeys.filter((data:any) => {
-                                    if (data.type === "image"){
-                                        const idx = Number(data.value.split("-")[0])
-                                        if (idx < new_chapter_idx-2) return false
-                                        else return true
-                                    }else if (data.type === "chapter-info-banner"){
-                                        if (data.idx < new_chapter_idx-2) return false
-                                    }else return true
-                                })
-
-                                setImageKeys([...pre_image_keys,{type:"chapter-info-banner", idx:CHAPTER_IDX.current, value:{last:chapterInfo.title, next:next_stored_chapter?.title}},...temp_image_keys.current[new_chapter_idx]])
-                                setIsLoading(false)
-                                setAddChapter(false)
-                                is_adding.current.state = false
+    const renderItem = useCallback(({item,index}:any) => {
+        return <ChapterImage key={index} item={item} zoom={zoom} showOptions={showOptions} setShowOptions={setShowOptions}/>
+    },[zoom,showOptions,setShowOptions])
 
-                                for (const item of Object.keys(images.current)){
-
-                                    if (Number(item.split("-")[0]) < new_chapter_idx-2) delete images.current[item]
-                                }
-                                const chapter_next = await get_chapter(SOURCE,COMIC_ID,new_chapter_idx + 1)
-                                if (chapter_next){
-                                    temp_image_keys.current[`${new_chapter_idx + 1}`] = chapter_next?.file_keys
-                                    images.current = {...images.current,...chapter_next?.files}
-                                }else{
-                                    temp_image_keys.current[`${new_chapter_idx + 1}`] = [{type:"no-chapter-banner"}]
-                                }
-                            }else setImageKeys([...imageKeys,{type:"no-chapter-banner"}])
-                        }else setImageKeys([...imageKeys,{type:"no-chapter-banner"}])
-                    }
-                    setAddChapter(false)
-                    setIsLoading(false)
-                    temp_loading.current = false
-                    is_adding.current.state = false
-                })()
+    const onViewableItemsChanged = useCallback(async ({viewableItems, changed}:any) => {
+        const expect_chapter_idx = [CHAPTER_IDX.current + 1, CHAPTER_IDX.current - 1]
+        const current_count = viewableItems.filter((data:any) => data.item.chapter_idx === CHAPTER_IDX.current).length
+        const existed_count = viewableItems.filter((data:any) => expect_chapter_idx.includes(data.item.chapter_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.chapter_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})
             }
-        },100)
-    },[imageKeys, addChapter])
+            router.setParams({idx:choose_idx})
+            CHAPTER_IDX.current = choose_idx
+        }
+    },[])
 
+    const onEndReached = useCallback(async () => {
+        const chapter_current_data = await get_chapter(SOURCE,COMIC_ID,CHAPTER_IDX.current+1)
+        
+        SET_DATA([...DATA,...chapter_current_data])
+    },[DATA])
 
     return (<>
         {isError.state
@@ -246,7 +204,7 @@ const Index = ({}:any) => {
                     >{isError.text}</Text>
                 </View>
             </View>
-            : <>{!firstLoading
+            : <>{!isLoading
                 ? <>
                     <View
                         
@@ -257,47 +215,16 @@ const Index = ({}:any) => {
                             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}/>
-                            }}
-                            estimatedItemSize={StaticDimensions.height}
-                            extraData={{zoom:zoom,showOptions:showOptions,setShowOptions:setShowOptions}}
+                        <FlatList 
+                            data={DATA}
+                            renderItem={renderItem}
                             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
-                                }
-                                
-                                
-                            }}
+                            windowSize={21}
+                            ItemSeparatorComponent={undefined}
+                            onEndReached={onEndReached}
+                            onViewableItemsChanged={onViewableItemsChanged}
                         />
-                        {isLoading && (
+                        {isAdding && (
                             <View
                                 style={{
                                     display:"flex",

frontend/app/read/components/chapter_image.tsx

@@ -15,6 +15,7 @@ import NetInfo from "@react-native-community/netinfo";
 import JSZip from 'jszip';
 
 import ChapterStorage from '@/constants/module/storages/chapter_storage';
+import ChapterDataStorage from '@/constants/module/storages/chapter_data_storage';
 import Image from '@/components/Image';
 import {CONTEXT} from '@/constants/module/context';
 import {blobToBase64, base64ToBlob} from "@/constants/module/file_manager";
@@ -30,111 +31,171 @@ const ChapterImage = ({item, zoom, showOptions,setShowOptions}:any)=>{
     const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
     const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)
 
+    const [isReady, setIsReady] = useState(false);
+    const [isError, setIsError] = useState({state:false,text:""});
 
-    return (
-        <Pressable
-            onPress={()=>{setShowOptions({type:"general",state:!showOptions.state})}}
-            style={{
-                display:"flex",
-                width:"100%",
-                height:"auto",
-                borderWidth:0,
-                alignItems:"center",
-            }}
-        >
-            {item.type === "image" && (
+    const image = useRef<any>(null);
+    const image_layout = useRef<any>(null);
 
-                <Image source={{type:"base64",data:item.image_data}} 
-                    contentFit="contain"
-                    style={{
-                        width:Dimensions.width > 720 
-                            ? 0.8 * Dimensions.width * (1 - zoom / 100)
-                            : `${100 - zoom}%`,
-                        aspectRatio: item.layout.width / item.layout.height,
-                    }}
-                    onLoadEnd={()=>{
-                        // console.log("CLEANED")
-                        // delete images.current[image_key]
-                    }}
-                />
-            )}
-            {item.type === "chapter-info-banner" && (
-                <View
-                    style={{
-                        display:"flex",
-                        flexDirection:"column",
-                        alignItems:"center",
-                        gap:12,
-                        width:Dimensions.width > 720 
-                            ? 0.8 * Dimensions.width * (1 - zoom / 100)
-                            : `${100 - zoom}%`,
-                        height:"auto",
-                        backgroundColor:"black",
-                        padding:16,
-                    }}
-                >
-                    <Text selectable={false}
-                        numberOfLines={1}
-                        style={{
-                            color:Theme[themeTypeContext].text_color,
-                            fontSize:(0.03 * ((Dimensions.width+Dimensions.height)/2)) * (1 - zoom/100),
-                            fontFamily:"roboto-bold",
-                        }}
-                    >
-                        End: {item.value.last}
-                    </Text>
+    useEffect(()=>{(async () => {
+        if (item.type === "page"){
+            const store_chapter_image_data = await ChapterDataStorage.get(item.id)
+            if (store_chapter_image_data){
+                image.current = {type:"blob",data:store_chapter_image_data.data}
+                image_layout.current = store_chapter_image_data.layout
 
-                    <Text selectable={false}
-                        numberOfLines={1}
-                        style={{
-                            color:Theme[themeTypeContext].text_color,
-                            fontSize:(0.03 * ((Dimensions.width+Dimensions.height)/2)) * (1 - zoom/100),
-                            fontFamily:"roboto-bold",
-                        }}
-                    >
-                        Next: {item.value.next}
-                    </Text>
+                setIsReady(true)
+            }else{
+                setIsError({state:true,text:"Image not found!"})
+            }
+        }else setIsReady(true)
+        
+    })()},[])
 
-                </View>
-            )}
-            {item.type === "no-chapter-banner" && (
-                <View
-                    style={{
-                        display:"flex",
-                        flexDirection:"column",
-                        alignItems:"center",
-                        gap:12,
-                        width:Dimensions.width > 720 
-                            ? 0.8 * Dimensions.width * (1 - zoom / 100)
-                            : `${100 - zoom}%`,
-                        height:"auto",
-                        backgroundColor:"black",
-                        padding:16,
-                    }}
-                >
-                    <Text selectable={false}
-                        numberOfLines={1}
-                        style={{
-                            color:Theme[themeTypeContext].text_color,
-                            fontSize:(0.03 * ((Dimensions.width+Dimensions.height)/2)) * (1 - zoom/100),
-                            fontFamily:"roboto-bold",
-                        }}
-                    >
-                        No more available chapters on local.
-                    </Text>
-                    <Text selectable={false}
-                        numberOfLines={1}
-                        style={{
-                            color:Theme[themeTypeContext].text_color,
-                            fontSize:(0.03 * ((Dimensions.width+Dimensions.height)/2)) * (1 - zoom/100),
-                            fontFamily:"roboto-bold",
-                        }}
-                    >
-                        You can go back and download more.
-                    </Text>
-                </View>
-            )}
-    </Pressable>)
+
+    return ( <Pressable
+                onPress={()=>{setShowOptions({type:"general",state:!showOptions.state})}}
+                style={{
+                    display:"flex",
+                    width:"100%",
+                    height:"auto",
+                    borderWidth:0,
+                    alignItems:"center",
+                }}
+            >
+                <>{isReady
+                    ? (<>
+                        {item.type === "page" && (
+                            <Image source={image.current} 
+                                contentFit="contain"
+                                style={{
+                                    width:Dimensions.width > 720 
+                                        ? 0.8 * Dimensions.width * (1 - zoom / 100)
+                                        : `${100 - zoom}%`,
+                                    aspectRatio: image_layout.current.width / image_layout.current.height,
+                                }}
+                                onLoadEnd={()=>{
+                                }}
+                            />
+                        )}
+                        {item.type === "chapter-info-banner" && (
+                            <View
+                                style={{
+                                    display:"flex",
+                                    flexDirection:"column",
+                                    alignItems:"center",
+                                    gap:12,
+                                    width:Dimensions.width > 720 
+                                        ? 0.8 * Dimensions.width * (1 - zoom / 100)
+                                        : `${100 - zoom}%`,
+                                    height:"auto",
+                                    backgroundColor:"black",
+                                    padding:16,
+                                }}
+                            >
+                                <Text selectable={false}
+                                    numberOfLines={1}
+                                    style={{
+                                        color:Theme[themeTypeContext].text_color,
+                                        fontSize:(0.03 * ((Dimensions.width+Dimensions.height)/2)) * (1 - zoom/100),
+                                        fontFamily:"roboto-bold",
+                                    }}
+                                >
+                                    End: {item.value.last}
+                                </Text>
+        
+                                <Text selectable={false}
+                                    numberOfLines={1}
+                                    style={{
+                                        color:Theme[themeTypeContext].text_color,
+                                        fontSize:(0.03 * ((Dimensions.width+Dimensions.height)/2)) * (1 - zoom/100),
+                                        fontFamily:"roboto-bold",
+                                    }}
+                                >
+                                    Next: {item.value.next}
+                                </Text>
+        
+                            </View>
+                        )}
+                        {item.type === "no-chapter-banner" && (
+                            <View
+                                style={{
+                                    display:"flex",
+                                    flexDirection:"column",
+                                    alignItems:"center",
+                                    gap:12,
+                                    width:Dimensions.width > 720 
+                                        ? 0.8 * Dimensions.width * (1 - zoom / 100)
+                                        : `${100 - zoom}%`,
+                                    height:"auto",
+                                    backgroundColor:"black",
+                                    padding:16,
+                                }}
+                            >
+                                <Text selectable={false}
+                                    numberOfLines={1}
+                                    style={{
+                                        color:Theme[themeTypeContext].text_color,
+                                        fontSize:(0.03 * ((Dimensions.width+Dimensions.height)/2)) * (1 - zoom/100),
+                                        fontFamily:"roboto-bold",
+                                    }}
+                                >
+                                    No more available chapters on local.
+                                </Text>
+                                <Text selectable={false}
+                                    numberOfLines={1}
+                                    style={{
+                                        color:Theme[themeTypeContext].text_color,
+                                        fontSize:(0.03 * ((Dimensions.width+Dimensions.height)/2)) * (1 - zoom/100),
+                                        fontFamily:"roboto-bold",
+                                    }}
+                                >
+                                    You can go back and download more.
+                                </Text>
+                            </View>
+                        )}
+                    </>)
+                    : (
+                        <View
+                            style={{
+                                display:"flex",
+                                justifyContent:"center",
+                                alignItems:"center",
+                                backgroundColor:Theme[themeTypeContext].background_color,
+                                width:Dimensions.width > 720 
+                                    ? 0.8 * Dimensions.width * (1 - zoom / 100)
+                                    : `${100 - zoom}%`,
+                                height: Dimensions.height * 0.75
+                            }}
+                        >
+                            {isError.state 
+                                ? (
+                                    <View 
+                                        style={{
+                                            display:'flex',
+                                            flexDirection:"column",
+                                            justifyContent:"center",
+                                            alignItems:"center",
+                                            width:"100%",
+                                            height:"100%",
+                                            gap:12,
+                                        }}
+                                    >
+                                        
+                                        <Icon source={"alert-circle"} size={25} color={"red"}/>
+                                        <Text style={{color:"white",fontSize:12,fontFamily:"roboto-bold"}}>{isError.text}</Text>
+                                    </View>
+                                )
+                                : (<ActivityIndicator animating={true}/>)
+                            }
+                            
+                
+                        </View>
+                    )
+                }</>
+                
+        </Pressable>
+    )
 }
 
 export default ChapterImage

frontend/app/read/modules/get_chapter.tsx

@@ -9,53 +9,25 @@ export const get_chapter = async (
     COMIC_ID:string | string[],
     CHAPTER_IDX:number,
 ) => {
-    // return
+
     console.log(SOURCE,COMIC_ID,CHAPTER_IDX)
     
-    const stored_chapter = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,CHAPTER_IDX)   
-    if (stored_chapter?.data_state === "completed"){
-        const zip = new JSZip();
-        const file_keys:Array<any> = []
-        const files: { [key: string]: any } = {};
-
-        if (stored_chapter?.data.type === "blob"){
-            const zipContent = await zip.loadAsync(stored_chapter?.data.value);
-            for (const fileName in zipContent.files) {
-                if (zipContent.files[fileName].dir) {
-                    continue; // Skip directories
-                }
-                const fileData = await zipContent.files[fileName].async('base64');
-                file_keys.push({type:"image", idx:CHAPTER_IDX, id:Number(fileName.split(".")[0]), value: `${CHAPTER_IDX}-${fileName}`})
-                files[`${CHAPTER_IDX}-${fileName}`] = {
-                    layout: await getImageLayout("data:image/png;base64," + fileData),
-                    data: "data:image/png;base64," + fileData
-                };
-                
-            }
-
-        }else if (stored_chapter?.data.type === "file_path"){
-            
-            const base64String = await FileSystem.readAsStringAsync(stored_chapter?.data.value, {
-                encoding: FileSystem.EncodingType.Base64,
-            });
-
-            const zipContent = await zip.loadAsync(base64String, {base64: true});
+    const DATA = []
+    
+    const current_stored_chapter = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,CHAPTER_IDX)
+    const next_stored_chapter = await ChapterStorage.getByIdx(`${SOURCE}-${COMIC_ID}`,CHAPTER_IDX+1)
 
-            for (const fileName in zipContent.files) {
-                if (zipContent.files[fileName].dir) {
-                    continue; // Skip directories
-                }
-                const fileData = await zipContent.files[fileName].async('base64');
-                file_keys.push({type:"image", idx:CHAPTER_IDX, id:Number(fileName.split(".")[0]), value: `${CHAPTER_IDX}-${fileName}`})
-                files[`${CHAPTER_IDX}-${fileName}`] = {
-                    layout: await getImageLayout("data:image/png;base64," + fileData),
-                    data: "data:image/png;base64," + fileData
-                };
-            }
+    if (current_stored_chapter?.data_state === "completed" && current_stored_chapter?.max_page) {
+        for (let i = 1; i < current_stored_chapter.max_page; i++) {
+            DATA.push({type:"page",id:`${SOURCE}-${COMIC_ID}-${CHAPTER_IDX}-${i}`, chapter_idx: CHAPTER_IDX})
         }
-
-        file_keys.sort((a, b) => Number(a.id - b.id))
-        console.log("HUH?",file_keys)
-        return {file_keys: file_keys,files:files}
+        if (next_stored_chapter) {
+            DATA.push({type:"chapter-info-banner", value:{last:current_stored_chapter.title, next:next_stored_chapter.title}})
+        }else{
+            DATA.push({type:"no-chapter-banner"})
+        }
+        return DATA
+    }else{
+        return []
     }
 }

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

@@ -190,7 +190,7 @@ const Index = ({}:any) => {
                 for (const [key, value] of Object.entries(stored_comic.info)) {
                     DATA[key] = value
                 }
-                DATA["chapters"] = await ChapterStorage.getAll(`${SOURCE}-${ID}`,{exclude_field:["data","item"]})
+                DATA["chapters"] = await ChapterStorage.getAll(`${SOURCE}-${ID}`,{exclude_field:["item"]})
                 
                 SET_CONTENT(DATA)
                 setIsLoading(false)
@@ -308,7 +308,7 @@ const Index = ({}:any) => {
                         
                         onPress={()=>{
                             if (router.canGoBack()) router.back()
-                            else router.navigate("/explore")
+                            else router.replace("/explore")
                         }}
                     >
                         <Icon source={"arrow-left-thin"} size={((Dimensions.width+Dimensions.height)/2)*0.045} color={Theme[themeTypeContext].icon_color}/>
@@ -362,7 +362,7 @@ const Index = ({}:any) => {
                         }}
                         
                         onPress={(async ()=>{
-                            await Clipboard.setStringAsync(`${apiBaseContext}/view/${SOURCE}/${ID}/`)
+                            await Clipboard.setStringAsync(`https://comicmtl.netlify.app/view/${SOURCE}/${ID}/`)
                             Toast.show({
                                 type: 'info',
                                 text1: '📋 Copied to your clipboard.',

frontend/app/view/componenets/chapter.tsx

@@ -64,13 +64,13 @@ const ChapterComponent = ({
         set_is_net_connected(net_info.isConnected)
 
         setStyles(__styles(themeTypeContext,Dimensions))
-        const stored_chapter = await ChapterStorage.get(`${SOURCE}-${ID}`,chapter.id, {exclude_fields:["data"]})
+        const stored_chapter = await ChapterStorage.get(`${SOURCE}-${ID}`,chapter.id)
         if (stored_chapter?.data_state === "completed") set_is_saved(true)
         else set_is_saved(false)
     })()}, [])
 
     useEffect(()=>{(async () => {
-        const stored_chapter = await ChapterStorage.get(`${SOURCE}-${ID}`,chapter.id, {exclude_fields:["data"]})
+        const stored_chapter = await ChapterStorage.get(`${SOURCE}-${ID}`,chapter.id)
         if (stored_chapter?.data_state === "completed") set_is_saved(true)
         else set_is_saved(false)
     })()},[page,sort])
@@ -130,7 +130,7 @@ const ChapterComponent = ({
                 padding:5,
             }}
             onPress={async () => {
-                const stored_chapter = await ChapterStorage.get(`${SOURCE}-${ID}`,chapter.id, {exclude_fields:["data"]})
+                const stored_chapter = await ChapterStorage.get(`${SOURCE}-${ID}`,chapter.id)
                 if (stored_chapter?.data_state === "completed") {
                     const stored_comic = await ComicStorage.getByID(SOURCE,ID)
                     if (!stored_comic.history.idx || chapter.idx > stored_comic.history.idx) await ComicStorage.updateHistory(SOURCE,ID,{idx:chapter.idx, id:chapter.id, title:chapter.title})
@@ -205,8 +205,8 @@ const ChapterComponent = ({
                     <>{chapterRequested[chapter.id]?.state === "ready"
                         && <>{chapterToDownload[chapter.id]?.state === "downloading"
                             ? <CircularProgress 
-                                value={downloadProgress[chapter.id]?.current} 
-                                maxValue={downloadProgress[chapter.id]?.total}
+                                value={downloadProgress[chapter.id].progress} 
+                                maxValue={downloadProgress[chapter.id].total}
                                 radius={((Dimensions.width+Dimensions.height)/2)*0.0225}
                                 inActiveStrokeColor={Theme[themeTypeContext].border_color}
                                 
@@ -220,6 +220,8 @@ const ChapterComponent = ({
                                     textAlign:"center",
                                 }}
                                 onAnimationComplete={async ()=>{
+                                    if (downloadProgress[chapter.id].progress !== downloadProgress[chapter.id].total) return
+                                    
                                     const stored_chapter_requested = (await ComicStorage.getByID(SOURCE,ID)).chapter_requested
                                     const new_chapter_requested = stored_chapter_requested.filter((item:any) => item.chapter_id !== chapter.id);
                                     await ComicStorage.updateChapterQueue(SOURCE,ID,new_chapter_requested)
@@ -237,6 +239,7 @@ const ChapterComponent = ({
 
                                     set_is_saved(true)
                                     isDownloading.current = false
+                                    console.log("DONE!",downloadProgress[chapter.id])
                                 }}
                             />
                             : <ActivityIndicator animating={true} color={"green"} />

frontend/app/view/modules/content.tsx

@@ -3,12 +3,15 @@ import JSZip from 'jszip';
 import * as FileSystem from 'expo-file-system';
 import { Platform } from 'react-native';
 
+
 import translator from '@/constants/module/translator';
 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 ChapterDataStorage from '@/constants/module/storages/chapter_data_storage';
 import {blobToBase64} from '@/constants/module/file_manager';
+import { getImageLayout } from '@/constants/module/file_manager';
 
 
 
@@ -180,9 +183,7 @@ export const download_chapter = async (
     const [chapter_id, request_info]:any = Object.entries(chapterToDownload)[0];
     
     var progress_lenth:number = 0
-    var total_length:number = 100
-    setDownloadProgress({...downloadProgress, [chapter_id]:{progress:progress_lenth, total:total_length}})
-    setChapterToDownload({...chapterToDownload,[chapter_id]:{...chapterToDownload[chapter_id],state:"downloading"}})
+    var total_length:number = 0
     
     await axios({
         method: 'post',
@@ -201,9 +202,16 @@ export const download_chapter = async (
         onDownloadProgress: (progressEvent) => {
             const _total_length = progressEvent.total
             if (total_length !== undefined && progressEvent.loaded !== progress_lenth) {
-                total_length = _total_length as number + 5
-                progress_lenth = progressEvent.loaded;
-                setDownloadProgress({...downloadProgress, [chapter_id]:{progress:progress_lenth, total:total_length}})
+                total_length = (_total_length as number) + (_total_length as number)*0.25
+
+                if (progress_lenth === 0) {
+                    setDownloadProgress({...downloadProgress, [chapter_id]:{progress:progress_lenth, total:total_length}})
+                    setChapterToDownload({...chapterToDownload,[chapter_id]:{...chapterToDownload[chapter_id],state:"downloading"}})
+                    progress_lenth = progressEvent.loaded;
+                }else{
+                    progress_lenth = progressEvent.loaded;
+                    setDownloadProgress({...downloadProgress, [chapter_id]:{progress:progress_lenth, total:total_length}})
+                }
             }
         },
         timeout: 600000,
@@ -211,23 +219,34 @@ export const download_chapter = async (
     }).then(async (response) => {
         const DATA = response.data
         if (Platform.OS === "web"){
-            await ChapterStorage.update(`${source}-${comic_id}`,chapter_id,{type:"blob", value:DATA}, "completed")
+
+            const zip = new JSZip();
+            const zipContent = await zip.loadAsync(DATA);
+            let page = 0;
+            for (const fileName of Object.keys(zipContent.files).sort((a,b) => parseInt(a, 10) - parseInt(b, 10))) {
+                if (zipContent.files[fileName].dir) {
+                    continue; // Skip directories
+                }
+                page += 1
+                const fileData = await zipContent.files[fileName].async('blob');
+                const layout = await getImageLayout(await blobToBase64(fileData, "image/png"));
+                await ChapterDataStorage.store(`${source}-${comic_id}-${request_info.chapter_idx}-${page}`,comic_id,request_info.chapter_idx, fileData, layout)
+                
+            }
+
+            await ChapterStorage.update(`${source}-${comic_id}`,chapter_id, "completed", page)
         }else{
-            const chapter_dir = FileSystem.documentDirectory + "ComicMTL/" + `${source}/` + `${comic_id}/` + `chapters/`;
-            const dirInfo = await FileSystem.getInfoAsync(chapter_dir);
-            if (!dirInfo.exists) await FileSystem.makeDirectoryAsync(chapter_dir, { intermediates: true });
-            await FileSystem.writeAsStringAsync(chapter_dir + `${request_info.chapter_idx}.zip`, (await blobToBase64(DATA)).split(',')[1], {
-                encoding: FileSystem.EncodingType.Base64,
-            });
+            // const chapter_dir = FileSystem.documentDirectory + "ComicMTL/" + `${source}/` + `${comic_id}/` + `chapters/`;
+            // const dirInfo = await FileSystem.getInfoAsync(chapter_dir);
+            // if (!dirInfo.exists) await FileSystem.makeDirectoryAsync(chapter_dir, { intermediates: true });
+            // await FileSystem.writeAsStringAsync(chapter_dir + `${request_info.chapter_idx}.zip`, (await blobToBase64(DATA)).split(',')[1], {
+            //     encoding: FileSystem.EncodingType.Base64,
+            // });
             
-            await ChapterStorage.update(`${source}-${comic_id}`,chapter_id,{type:"file_path", value:chapter_dir + `${request_info.chapter_idx}.zip`}, "completed")
+            // await ChapterStorage.update(`${source}-${comic_id}`,chapter_id,{type:"file_path", value:chapter_dir + `${request_info.chapter_idx}.zip`}, "completed")
         }
         
-        
-
-        
-
-        setDownloadProgress({...downloadProgress, [chapter_id]:{progress:progress_lenth+5, total:total_length}})
+        setDownloadProgress({...downloadProgress, [chapter_id]:{progress:total_length, total:total_length}})
         
 
         

frontend/components/Image.tsx

@@ -21,7 +21,7 @@ const Image = ({source, style, onError, contentFit, transition, onLoad, onLoadEn
         (async ()=>{
             if(source.hasOwnProperty("type")){
                 if (source.type === "blob"){
-                    imageData.current = {uri:await blobToBase64(source.data)}
+                    imageData.current = {uri:await blobToBase64(source.data,"image/png")}
                     setImageLoaded(true)
                 }else if (source.type === "base64"){
                     imageData.current = {uri:source.data}

frontend/constants/module/file_manager.tsx

@@ -1,12 +1,18 @@
 import { Image as RNImage } from 'react-native';
 
-export const blobToBase64 = (blob: Blob): Promise<string> => {
-    return new Promise((resolve, reject) => {
+export const blobToBase64 = (blob: Blob, mimetype: string = ""): Promise<string> => {
+  return new Promise((resolve, reject) => {
       const reader = new FileReader();
-      reader.onloadend = () => resolve(reader.result as string);
+      reader.onloadend = () => {
+          const base64String = reader.result as string;
+          if (mimetype){
+            const base64WithMimeType = `data:${mimetype};base64,${base64String.split(',')[1]}`;
+            resolve(base64WithMimeType);
+          }else resolve(base64String);
+      };
       reader.onerror = reject;
       reader.readAsDataURL(blob);
-    });
+  });
 };
 
 export const base64ToBlob = (base64: string, mimetype: string = 'image/png'): Blob => {

frontend/constants/module/storages/chapter_data_storage.tsx

@@ -0,0 +1,250 @@
+import { Platform } from "react-native";
+import * as SQLite from 'expo-sqlite';
+
+const DATABASE_NAME = 'ChapterDataStorageDB'
+
+class Chapter_Data_Storage_Web {
+    private static dbPromise: Promise<IDBDatabase>;
+    
+    private static getDB(): Promise<IDBDatabase> {
+        if (!this.dbPromise) {
+            this.dbPromise = new Promise((resolve, reject) => {
+                const request = indexedDB.open(DATABASE_NAME, 1);
+    
+                request.onupgradeneeded = (event) => {
+                    const db = (event.target as IDBOpenDBRequest).result;
+                    const store = db.createObjectStore('dataStore', { keyPath: 'id' });
+                    store.createIndex('comic_id', 'comic_id', { unique: false });
+                    store.createIndex('chapter_idx', 'chapter_idx', { unique: false });
+                };
+    
+                request.onsuccess = () => {
+                    resolve(request.result);
+                };
+    
+                request.onerror = () => {
+                    reject(request.error);
+                };
+            });
+        }
+        return this.dbPromise;
+    }
+    
+    static async store(id: string, comic_id:string, chapter_idx: number, data:any, layout:any ): Promise<void> {
+        const db = await this.getDB();
+        return new Promise((resolve, reject) => {
+            const transaction = db.transaction('dataStore', 'readwrite');
+            const store = transaction.objectStore('dataStore');
+            const request = store.put({ id, comic_id, chapter_idx, data, layout });
+
+            request.onsuccess = () => {
+                resolve();
+            };
+
+            request.onerror = () => {
+                reject(request.error);
+            };
+        });
+    }
+    
+    static async get(id: string): Promise<{id: string, comic_id: string, chapter_idx: number, data: any } | null> {
+        const db = await this.getDB();
+        return new Promise((resolve, reject) => {
+            const transaction = db.transaction('dataStore', 'readonly');
+            const store = transaction.objectStore('dataStore');
+            const request = store.get(id); // Query by id
+
+            request.onsuccess = () => {
+                const data = request.result;
+                if (data) {
+                    resolve(data);
+                } else {
+                    resolve(null);
+                }
+            };
+
+            request.onerror = () => {
+                console.error('Error retrieving item:', request.error);
+                reject(request.error);
+            };
+        });
+    }
+    static async removeByID(id: string): Promise<void> {
+        const db = await this.getDB();
+        return new Promise((resolve, reject) => {
+            const transaction = db.transaction('dataStore', 'readwrite');
+            const store = transaction.objectStore('dataStore');
+            const request = store.delete(id); // Delete the item
+            request.onsuccess = () => {
+                resolve();
+            };
+            request.onerror = () => {
+                reject(request.error);
+            };
+            request.onerror = () => {
+                reject(request.error);
+            };
+        });
+    }
+    
+    static async removeByComicID(comic_id: string): Promise<void> {
+        const db = await this.getDB();
+        return new Promise((resolve, reject) => {
+            const transaction = db.transaction('dataStore', 'readwrite');
+            const store = transaction.objectStore('dataStore');
+            const index = store.index('comic_id');
+            const request = index.openCursor(comic_id);
+    
+            request.onsuccess = (event) => {
+                const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result;
+                if (cursor) {
+                    cursor.delete();
+                    cursor.continue();
+                } else {
+                    resolve();
+                }
+            };
+    
+            request.onerror = () => {
+                reject(request.error);
+            };
+        });
+    }
+}
+
+
+class Chapter_Data_Storage_Native {
+    private DATABASE: any;
+
+    constructor() {
+        this.DATABASE = new Promise(async (resolve, reject) => {
+            resolve(await SQLite.openDatabaseAsync(DATABASE_NAME));
+        });
+        
+    }
+
+    public async store(source: string, id: string, tag: string, info: any) {
+        try {
+            const db = await this.DATABASE;
+            await db.runAsync('CREATE TABLE IF NOT EXISTS ComicStorage (id TEXT PRIMARY KEY NOT NULL, source TEXT, tag TEXT, info TEXT, chapter_requested TEXT, history TEXT);');
+            await db.runAsync(
+                'INSERT OR REPLACE INTO ComicStorage (source, id, tag, info, chapter_requested, history) VALUES (?, ?, ?, ?, ?, ?);', source, id, tag, JSON.stringify(info), JSON.stringify([]), JSON.stringify({})
+            );
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    public async getByID(source: string, id: string) {
+        try {
+            const db = await this.DATABASE;
+            // await db.runAsync("DROP TABLE IF EXISTS ComicStorage;");
+            await db.runAsync('CREATE TABLE IF NOT EXISTS ComicStorage (id TEXT PRIMARY KEY NOT NULL, source TEXT, tag TEXT, info TEXT, chapter_requested TEXT, history TEXT);');
+            const DATA: any = await db.getFirstAsync(
+                'SELECT * FROM ComicStorage WHERE source = ? AND id = ?;', source, id
+            );
+            if (DATA) return { id: DATA.id, source: DATA.source, tag: DATA.tag, info: JSON.parse(DATA.info), chapter_requested: JSON.parse(DATA.chapter_requested), history: JSON.parse(DATA.history) };
+            else return DATA;
+        } catch (error) {
+            console.log("[Comic Storage - getByID] error:", error);
+        }
+    }
+
+    public async getByTag(tag: string) {
+        try {
+            const db = await this.DATABASE;
+            await db.runAsync('CREATE TABLE IF NOT EXISTS ComicStorage (id TEXT PRIMARY KEY NOT NULL, source TEXT, tag TEXT, info TEXT, chapter_requested TEXT, history TEXT);');
+            const DATA: any = await db.allAsync(
+                'SELECT * FROM ComicStorage WHERE tag = ?;', tag
+            );
+
+            return DATA.map((row: any) => ({ id: row.id, source: row.source, tag: row.tag, info: JSON.parse(row.info), chapter_requested: JSON.parse(row.chapter_requested), history: JSON.parse(row.history) }));
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    public async updateChapterQueue(source: string, id: string, chapter_requested: any) {
+        try {
+            const db = await this.DATABASE;
+            await db.runAsync('CREATE TABLE IF NOT EXISTS ComicStorage (id TEXT PRIMARY KEY NOT NULL, source TEXT, tag TEXT, info TEXT, chapter_requested TEXT, history TEXT);');
+            await db.runAsync(
+                'UPDATE ComicStorage SET chapter_requested = ? WHERE source = ? AND id = ?;', JSON.stringify(chapter_requested), source, id
+            );
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    public async updateInfo(source: string, id: string, info: any) {
+        try {
+            const db = await this.DATABASE;
+            await db.runAsync('CREATE TABLE IF NOT EXISTS ComicStorage (id TEXT PRIMARY KEY NOT NULL, source TEXT, tag TEXT, info TEXT, chapter_requested TEXT, history TEXT);');
+            await db.runAsync(
+                'UPDATE ComicStorage SET info = ? WHERE source = ? AND id = ?;', JSON.stringify(info), source, id
+            );
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    public async updateHistory(source:string, id: string, history: any): Promise<void> {
+        try {
+            const db = await this.DATABASE;
+            await db.runAsync('CREATE TABLE IF NOT EXISTS ComicStorage (id TEXT PRIMARY KEY NOT NULL, source TEXT, tag TEXT, info TEXT, chapter_requested TEXT, history TEXT);');
+            await db.runAsync(
+                'UPDATE ComicStorage SET history = ? WHERE source = ? AND id = ?;', JSON.stringify(history), source, id
+            );
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    public async replaceTag(source: string, id: string, new_tag: string) {
+        try {
+            const db = await this.DATABASE;
+            await db.runAsync('CREATE TABLE IF NOT EXISTS ComicStorage (id TEXT PRIMARY KEY NOT NULL, source TEXT, tag TEXT, info TEXT, chapter_requested TEXT, history TEXT);');
+            await db.runAsync(
+                'UPDATE ComicStorage SET tag = ? WHERE source = ? AND id = ?;', new_tag, source, id
+            );
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    public async removeByID(source: string, id: string) {
+        try {
+            const db = await this.DATABASE;
+            await db.runAsync('CREATE TABLE IF NOT EXISTS ComicStorage (id TEXT PRIMARY KEY NOT NULL, source TEXT, tag TEXT, info TEXT, chapter_requested TEXT, history TEXT);');
+            await db.runAsync(
+                'DELETE FROM ComicStorage WHERE source = ? AND id = ?;', source, id
+            );
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    public async removeByTag(tag: string) {
+        try {
+            const db = await this.DATABASE;
+            await db.runAsync('CREATE TABLE IF NOT EXISTS ComicStorage (id TEXT PRIMARY KEY NOT NULL, source TEXT, tag TEXT, info TEXT, chapter_requested TEXT, history TEXT);');
+            await db.runAsync(
+                'DELETE FROM ComicStorage WHERE tag = ?;', tag
+            );
+        } catch (error) {
+            console.log(error);
+        }
+    }
+}
+
+
+
+var ChapterDataStorage:any
+if (Platform.OS === "web") {
+    ChapterDataStorage = Chapter_Data_Storage_Web;
+}else{
+    ChapterDataStorage = new Chapter_Data_Storage_Native();
+}
+
+export default ChapterDataStorage;
+

frontend/constants/module/storages/chapter_storage.tsx

@@ -8,7 +8,7 @@ import { ensure_safe_table_name } from "../ensure_safe_table_name";
 const DATABASE_NAME = 'ChapterDB';
 
 class Chapter_Storage_Web  {
-  private static DATABASE_VERSION: number = 1;
+  private static DATABASE_VERSION: number = 2;
 
   private static async openDB(): Promise<IDBDatabase> {
     return new Promise((resolve, reject) => {
@@ -137,13 +137,13 @@ class Chapter_Storage_Web  {
 }
 
 
-  public static async add(item: string, idx: number, id: string, title: string, data: any): Promise<void> {
+  public static async add(item: string, idx: number, id: string, title: string): Promise<void> {
     const db = await this.openDB();
     return new Promise((resolve, reject) => {
       const transaction = db.transaction('dataStore', 'readwrite');
       const store = transaction.objectStore('dataStore');
 
-      const request = store.add({ id, item, idx, title, data, data_state:"empty" });
+      const request = store.add({ id, item, idx, title, data_state:"", max_page:0 });
 
       request.onsuccess = () => {
         resolve();
@@ -154,7 +154,7 @@ class Chapter_Storage_Web  {
       };
     });
   }
-  public static async update(item: string, id: string, newData: any, data_state: string): Promise<void> {
+  public static async update(item: string, id: string, data_state: string, max_page:number): Promise<void> {
     const db = await this.openDB();
     return new Promise((resolve, reject) => {
       const transaction = db.transaction('dataStore', 'readwrite');
@@ -166,8 +166,8 @@ class Chapter_Storage_Web  {
         const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result;
         if (cursor) {
           if (cursor.value.id === id) {
-            cursor.value.data = newData; 
             cursor.value.data_state = data_state;
+            cursor.value.max_page = max_page;
             const updateRequest = cursor.update(cursor.value);
 
             updateRequest.onsuccess = () => {

frontend/constants/module/storages/comic_storage.tsx

@@ -9,7 +9,7 @@ class Comic_Storage_Web {
     private static getDB(): Promise<IDBDatabase> {
         if (!this.dbPromise) {
             this.dbPromise = new Promise((resolve, reject) => {
-                const request = indexedDB.open(DATABASE_NAME, 1);
+                const request = indexedDB.open(DATABASE_NAME, 2);
     
                 request.onupgradeneeded = (event) => {
                     const db = (event.target as IDBOpenDBRequest).result;