File size: 5,955 Bytes
947c08e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import React, { useEffect, useState, useCallback, useContext, useRef } from 'react';
import { Link, router, useLocalSearchParams, useNavigation, useFocusEffect } from 'expo-router';
import { Image as RNImage, StyleSheet, useWindowDimensions, ScrollView, Pressable, RefreshControl, Platform } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Icon, MD3Colors, Button, Text, TextInput, TouchableRipple } from 'react-native-paper';
import CircularProgress from 'react-native-circular-progress-indicator';
import { ActivityIndicator } from 'react-native-paper';

import uuid from 'react-native-uuid';
import Toast from 'react-native-toast-message';
import { View, AnimatePresence } from 'moti';
import * as Clipboard from 'expo-clipboard';
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 Image from '@/components/Image';
import {CONTEXT} from '@/constants/module/context';
import {blobToBase64, base64ToBlob} from "@/constants/module/file_manager";
import Theme from '@/constants/theme';

const ChapterImage = ({item, zoom, showOptions,setShowOptions}:any)=>{
    const SOURCE = useLocalSearchParams().source;
    const COMIC_ID = useLocalSearchParams().comic_id;
    const CHAPTER_IDX = Number(useLocalSearchParams().chapter_idx as string);
    const Dimensions = useWindowDimensions();

    const {showMenuContext, setShowMenuContext}:any = useContext(CONTEXT)
    const {themeTypeContext, setThemeTypeContext}:any = useContext(CONTEXT)
    const {showCloudflareTurnstileContext, setShowCloudflareTurnstileContext}:any = useContext(CONTEXT)


    return (
        <Pressable
            onPress={()=>{setShowOptions({type:"general",state:!showOptions.state})}}
            style={{
                display:"flex",
                width:"100%",
                height:"auto",
                alignItems:"center",
            }}
        >
            {item.type === "image" && (

                <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>

                    <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>
            )}
    </Pressable>)
}

export default ChapterImage