+ // We need to find the content div and extract all paragraphs
+ let content = '';
+
+ // Method 1: Look for
and extract all
tags
+ const contentDivMatch = html.match(/]*id="content"[^>]*>([\s\S]*?)<\/div>\s*(?:<\/div>|]*class="[^"]*chapter-content[^"]*"[^>]*>([\s\S]*?)<\/div>/i);
+ if (classMatch) {
+ content = classMatch[1];
+ } else {
+ // Method 3: Try article tag
+ const articleMatch = html.match(/]*>([\s\S]*?)<\/article>/i);
+ if (articleMatch) {
+ content = articleMatch[1];
+ }
+ }
+ }
+
+ // Extract paragraphs from content
+ const paragraphs = [];
+ const pRegex = /]*>([\s\S]*?)<\/p>/gi;
+ let pMatch;
+ while ((pMatch = pRegex.exec(content)) !== null) {
+ const text = cleanText(pMatch[1]);
+ if (text && text.length > 0) {
+ paragraphs.push(text);
+ }
+ }
+
+ // Also extract h4 titles
+ const h4Regex = /]*>([\s\S]*?)<\/h4>/gi;
+ let h4Match;
+ while ((h4Match = h4Regex.exec(content)) !== null) {
+ const text = cleanText(h4Match[1]);
+ if (text && text.length > 0) {
+ paragraphs.unshift(text); // Add title at beginning
+ }
+ }
+
+ // Join paragraphs with double newlines
+ const cleanedContent = paragraphs.join('\n\n');
+
+ // Extract previous and next chapter links
+ // Check for disabled state (first/last chapter)
+ const prevDisabled = html.match(/]*class="[^"]*prev[^"]*isDisabled[^"]*"[^>]*>/i) ||
+ html.match(/]*class="[^"]*prevchap[^"]*isDisabled[^"]*"[^>]*>/i);
+ const nextDisabled = html.match(/]*class="[^"]*next[^"]*isDisabled[^"]*"[^>]*>/i) ||
+ html.match(/]*class="[^"]*nextchap[^"]*isDisabled[^"]*"[^>]*>/i);
+
+ // Extract prev chapter link (skip if disabled or javascript:;)
+ let prevChapter = null;
+ if (!prevDisabled) {
+ const prevMatch = html.match(/]*class="[^"]*prevchap[^"]*"[^>]*href="([^"]+)"/i) ||
+ html.match(/]*class="[^"]*prev[^"]*"[^>]*href="([^"]+)"/i) ||
+ html.match(/]*rel="prev"[^>]*href="([^"]+)"/i);
+ if (prevMatch && prevMatch[1]) {
+ const href = prevMatch[1];
+ // Skip javascript: links
+ if (!href.startsWith('java')) {
+ prevChapter = href.startsWith('http') ? href : `${NOVELFIRE_BASE}${href}`;
+ }
+ }
+ }
+
+ // Extract next chapter link (skip if disabled or javascript:;)
+ let nextChapter = null;
+ if (!nextDisabled) {
+ const nextMatch = html.match(/]*class="[^"]*nextchap[^"]*"[^>]*href="([^"]+)"/i) ||
+ html.match(/]*class="[^"]*next[^"]*"[^>]*href="([^"]+)"/i) ||
+ html.match(/]*rel="next"[^>]*href="([^"]+)"/i);
+ if (nextMatch && nextMatch[1]) {
+ const href = nextMatch[1];
+ // Skip javascript: links
+ if (!href.startsWith('java')) {
+ nextChapter = href.startsWith('http') ? href : `${NOVELFIRE_BASE}${href}`;
+ }
+ }
+ }
+
+ return {
+ title: cleanText(titleMatch?.[1]),
+ content: cleanedContent,
+ prevChapter,
+ nextChapter,
+ };
+};
+
+/**
+ * Parse search results
+ */
+export const parseSearchResults = (html) => {
+ if (!html) return null;
+
+ const novels = [];
+
+ // Pattern for search results: ...
+ const novelPattern = /]*class="[^"]*novel-item[^"]*"[^>]*>([\s\S]*?)<\/li>/gi;
+ let match;
+
+ while ((match = novelPattern.exec(html)) !== null) {
+ const itemHtml = match[1];
+
+ // Extract link and title from anchor tag
+ const linkMatch = itemHtml.match(/href="\/book\/([^"]+)"/);
+ const titleMatch = itemHtml.match(/title="([^"]+)"/);
+
+ // Extract image - prefer data-src for lazy loading, fallback to src
+ const imgMatch = itemHtml.match(/data-src="([^"]+\.(?:jpg|jpeg|png|webp)[^"]*)"/i) ||
+ itemHtml.match(/src="([^"]+\.(?:jpg|jpeg|png|webp)[^"]*)"/i);
+
+ // Extract rank
+ const rankMatch = itemHtml.match(/Rank\s*(\d+)/i);
+
+ // Extract chapters count
+ const chaptersMatch = itemHtml.match(/(\d+)\s*Chapters/i);
+
+ if (linkMatch && titleMatch) {
+ novels.push({
+ title: titleMatch[1].trim(),
+ link: `https://novelfire.net/book/${linkMatch[1]}`,
+ slug: linkMatch[1],
+ coverImage: imgMatch ? (imgMatch[1].startsWith('http') ? imgMatch[1] : `https://novelfire.net${imgMatch[1]}`) : null,
+ rank: rankMatch ? parseInt(rankMatch[1], 10) : null,
+ chapters: chaptersMatch ? parseInt(chaptersMatch[1], 10) : null,
+ });
+ }
+ }
+
+ return novels.length > 0 ? novels : null;
+};
+
+/**
+ * Parse ranking page
+ */
+export const parseRanking = (html) => {
+ if (!html) return null;
+
+ const novels = [];
+ const rankPattern = /]*>([\s\S]*?)<\/tr>/gi;
+ const matches = extractAllMatches(html, rankPattern);
+
+ matches.forEach((match, index) => {
+ const novel = parseNovelCard(match[0]);
+ if (novel?.title && novel?.link) {
+ novels.push({ ...novel, rank: index + 1 });
+ }
+ });
+
+ return novels.length > 0 ? novels : null;
+};
+
+export default {
+ parseNovelHome,
+ parseNovelDetails,
+ parseNovelChapter,
+ parseSearchResults,
+ parseRanking,
+};
diff --git a/src/Screens/Novel/Components/DownloadButton.js b/src/Screens/Novel/Components/DownloadButton.js
new file mode 100644
index 00000000..e7050bb3
--- /dev/null
+++ b/src/Screens/Novel/Components/DownloadButton.js
@@ -0,0 +1,165 @@
+import React, {useState, useCallback, useEffect} from 'react';
+import {
+ View,
+ Text,
+ StyleSheet,
+ TouchableOpacity,
+ ActivityIndicator,
+} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {useSelector, useDispatch} from 'react-redux';
+
+import {DownloadNovelChapter, RemoveNovelChapter} from '../../../../Redux/Reducers';
+import {downloadManager, DownloadStatus} from '../Utils/DownloadManager';
+
+/**
+ * DownloadButton Component
+ * Button to download/remove a chapter for offline reading
+ */
+export function DownloadButton({novel, chapter, style}) {
+ const dispatch = useDispatch();
+ const [downloading, setDownloading] = useState(false);
+ const [downloaded, setDownloaded] = useState(false);
+
+ const downloads = useSelector(state => state.data.NovelDownloads || {});
+ const novelDownloads = downloads[novel?.link]?.chapters || {};
+
+ useEffect(() => {
+ setDownloaded(!!novelDownloads[chapter?.number]);
+ }, [novelDownloads, chapter?.number]);
+
+ const handleDownload = useCallback(async () => {
+ if (downloading) return;
+
+ setDownloading(true);
+
+ try {
+ const result = await downloadManager.downloadChapter(
+ novel,
+ chapter.number,
+ chapter.link
+ );
+
+ if (result.success) {
+ // Fetch chapter content for Redux
+ const {getNovelChapter} = require('../APIs');
+ const chapterData = await getNovelChapter(chapter.link);
+
+ dispatch(DownloadNovelChapter({
+ novelLink: novel.link,
+ chapterNumber: chapter.number,
+ chapterTitle: chapter.title || `Chapter ${chapter.number}`,
+ content: chapterData?.content,
+ title: novel.title,
+ coverImage: novel.coverImage,
+ }));
+ }
+ } catch (error) {
+ console.error('Download error:', error);
+ } finally {
+ setDownloading(false);
+ }
+ }, [downloading, novel, chapter, dispatch]);
+
+ const handleRemove = useCallback(() => {
+ dispatch(RemoveNovelChapter({
+ novelLink: novel.link,
+ chapterNumber: chapter.number,
+ }));
+ }, [dispatch, novel.link, chapter.number]);
+
+ if (downloading) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ {downloaded ? 'Downloaded' : 'Download'}
+
+
+ );
+}
+
+/**
+ * DownloadAllButton Component
+ * Button to download all chapters
+ */
+export function DownloadAllButton({novel, chapters, style, onProgress}) {
+ const [downloading, setDownloading] = useState(false);
+ const [progress, setProgress] = useState(0);
+
+ const handleDownloadAll = useCallback(async () => {
+ if (downloading) return;
+
+ setDownloading(true);
+ setProgress(0);
+
+ try {
+ await downloadManager.downloadAllChapters(novel, chapters, (p) => {
+ setProgress(p);
+ onProgress?.(p);
+ });
+ } catch (error) {
+ console.error('Download all error:', error);
+ } finally {
+ setDownloading(false);
+ setProgress(0);
+ }
+ }, [downloading, novel, chapters, onProgress]);
+
+ return (
+
+ {downloading ? (
+ <>
+
+ {progress}%
+
+ ) : (
+ <>
+
+ Download All
+
+ )}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: 6,
+ paddingVertical: 8,
+ paddingHorizontal: 12,
+ borderRadius: 8,
+ backgroundColor: 'rgba(102, 126, 234, 0.15)',
+ },
+ text: {
+ color: '#667EEA',
+ fontSize: 13,
+ fontWeight: '500',
+ },
+ downloadedText: {
+ color: '#4CAF50',
+ },
+});
+
+export default DownloadButton;
\ No newline at end of file
diff --git a/src/Screens/Novel/Components/NovelCard.js b/src/Screens/Novel/Components/NovelCard.js
new file mode 100644
index 00000000..4eb74fa9
--- /dev/null
+++ b/src/Screens/Novel/Components/NovelCard.js
@@ -0,0 +1,359 @@
+import React from 'react';
+import {
+ View,
+ Text,
+ TouchableOpacity,
+ StyleSheet,
+ Dimensions,
+} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Image from '../../../Components/UIComp/Image';
+
+const {width} = Dimensions.get('window');
+const CARD_WIDTH = (width - 48) / 3;
+
+/**
+ * NovelCard Component
+ * Displays a novel with cover, title, author, rating, and chapter count
+ */
+export function NovelCard({novel, onPress, style}) {
+ if (!novel) return null;
+
+ const {
+ title,
+ author,
+ coverImage,
+ rating,
+ chapters,
+ status,
+ } = novel;
+
+ return (
+ onPress?.(novel)}
+ activeOpacity={0.7}>
+
+
+ {status === 'Completed' && (
+
+ Completed
+
+ )}
+
+
+
+ {title}
+
+ {author && (
+
+ {author}
+
+ )}
+
+ {rating && (
+
+
+ {rating.toFixed(1)}
+
+ )}
+ {chapters && (
+ {chapters} Ch
+ )}
+
+
+
+ );
+}
+
+/**
+ * NovelCardHorizontal Component
+ * Displays a novel in horizontal layout with more details
+ */
+export function NovelCardHorizontal({novel, onPress, style}) {
+ if (!novel) return null;
+
+ const {
+ title,
+ author,
+ coverImage,
+ rating,
+ chapters,
+ status,
+ views,
+ genres,
+ } = novel;
+
+ return (
+ onPress?.(novel)}
+ activeOpacity={0.7}>
+
+
+
+ {title}
+
+ {author && (
+
+ {author}
+
+ )}
+
+ {rating && (
+
+
+ {rating.toFixed(1)}
+
+ )}
+ {chapters && (
+ {chapters} Chapters
+ )}
+
+ {genres && genres.length > 0 && (
+
+ {genres.slice(0, 3).map((genre, index) => (
+
+ {genre}
+
+ ))}
+
+ )}
+ {status && (
+
+ {status}
+
+ )}
+
+
+ );
+}
+
+/**
+ * NovelCardSmall Component
+ * Compact card for lists
+ */
+export function NovelCardSmall({novel, onPress, style}) {
+ if (!novel) return null;
+
+ const {title, coverImage, rating, chapters} = novel;
+
+ return (
+ onPress?.(novel)}
+ activeOpacity={0.7}>
+
+
+
+ {title}
+
+
+ {rating && (
+
+
+ {rating.toFixed(1)}
+
+ )}
+ {chapters && (
+ {chapters} Ch
+ )}
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ // Standard Card Styles
+ container: {
+ width: CARD_WIDTH,
+ marginBottom: 12,
+ backgroundColor: '#1E1E38',
+ borderRadius: 12,
+ padding: 8,
+ },
+ imageContainer: {
+ position: 'relative',
+ borderRadius: 8,
+ overflow: 'hidden',
+ },
+ coverImage: {
+ width: '100%',
+ height: CARD_WIDTH * 1.4,
+ borderRadius: 8,
+ backgroundColor: '#2a2a4a',
+ },
+ completedBadge: {
+ position: 'absolute',
+ top: 4,
+ right: 4,
+ backgroundColor: '#4CAF50',
+ paddingHorizontal: 6,
+ paddingVertical: 2,
+ borderRadius: 4,
+ },
+ completedText: {
+ color: '#fff',
+ fontSize: 8,
+ fontWeight: '600',
+ },
+ infoContainer: {
+ marginTop: 8,
+ paddingHorizontal: 2,
+ },
+ title: {
+ color: '#fff',
+ fontSize: 12,
+ fontWeight: '600',
+ lineHeight: 16,
+ },
+ author: {
+ color: 'rgba(255,255,255,0.6)',
+ fontSize: 10,
+ marginTop: 2,
+ },
+ metaContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginTop: 4,
+ gap: 8,
+ },
+ ratingContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 2,
+ },
+ rating: {
+ color: '#FFD700',
+ fontSize: 10,
+ fontWeight: '500',
+ },
+ chapters: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 10,
+ },
+
+ // Horizontal Card Styles
+ horizontalContainer: {
+ flexDirection: 'row',
+ backgroundColor: '#1E1E38',
+ borderRadius: 12,
+ padding: 12,
+ marginBottom: 10,
+ },
+ horizontalCover: {
+ width: 80,
+ height: 110,
+ borderRadius: 8,
+ backgroundColor: '#2a2a4a',
+ },
+ horizontalInfo: {
+ flex: 1,
+ marginLeft: 12,
+ justifyContent: 'space-between',
+ },
+ horizontalTitle: {
+ color: '#fff',
+ fontSize: 14,
+ fontWeight: '600',
+ lineHeight: 18,
+ },
+ horizontalAuthor: {
+ color: 'rgba(255,255,255,0.6)',
+ fontSize: 12,
+ marginTop: 2,
+ },
+ horizontalMeta: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 12,
+ marginTop: 4,
+ },
+ horizontalChapters: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 11,
+ },
+ genreContainer: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ gap: 4,
+ marginTop: 4,
+ },
+ genreTag: {
+ backgroundColor: 'rgba(102, 126, 234, 0.2)',
+ paddingHorizontal: 6,
+ paddingVertical: 2,
+ borderRadius: 4,
+ },
+ genreText: {
+ color: '#667EEA',
+ fontSize: 9,
+ },
+ statusText: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 11,
+ marginTop: 4,
+ },
+ completedStatus: {
+ color: '#4CAF50',
+ },
+
+ // Small Card Styles
+ smallContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ backgroundColor: '#1E1E38',
+ paddingVertical: 10,
+ paddingHorizontal: 10,
+ borderRadius: 10,
+ marginBottom: 8,
+ },
+ smallCover: {
+ width: 50,
+ height: 70,
+ borderRadius: 6,
+ backgroundColor: '#2a2a4a',
+ },
+ smallInfo: {
+ flex: 1,
+ marginLeft: 10,
+ },
+ smallTitle: {
+ color: '#fff',
+ fontSize: 13,
+ fontWeight: '500',
+ lineHeight: 17,
+ },
+ smallMeta: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginTop: 4,
+ gap: 8,
+ },
+ smallRating: {
+ color: '#FFD700',
+ fontSize: 10,
+ },
+ smallChapters: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 10,
+ },
+});
+
+export default NovelCard;
\ No newline at end of file
diff --git a/src/Screens/Novel/Components/NovelList.js b/src/Screens/Novel/Components/NovelList.js
new file mode 100644
index 00000000..32325f6f
--- /dev/null
+++ b/src/Screens/Novel/Components/NovelList.js
@@ -0,0 +1,152 @@
+import React from 'react';
+import {
+ View,
+ Text,
+ FlatList,
+ StyleSheet,
+ TouchableOpacity,
+ Dimensions,
+} from 'react-native';
+import {NovelCard} from './NovelCard';
+import {SectionHeader} from './SectionHeader';
+
+const {width} = Dimensions.get('window');
+
+/**
+ * Generate a safe key from a novel item
+ * Uses index as part of key to ensure uniqueness when same novel appears in multiple sections
+ */
+const getNovelKey = (item, index) => {
+ if (item.link) {
+ // Extract the slug from the URL and sanitize it
+ const slug = item.link.split('/book/')[1] || item.link;
+ const sanitized = slug.replace(/[^a-zA-Z0-9]/g, '-');
+ // Include index to ensure uniqueness when same novel appears in multiple sections
+ return `novel-${sanitized}-${index}`;
+ }
+ return `novel-${index}`;
+};
+
+/**
+ * NovelList Component
+ * Displays a horizontal scrollable list of novels
+ */
+export function NovelList({
+ title,
+ novels,
+ onItemPress,
+ onSeeAllPress,
+ showSeeAll = true,
+ style,
+}) {
+ if (!novels || novels.length === 0) return null;
+
+ return (
+
+
+ (
+
+ )}
+ horizontal
+ showsHorizontalScrollIndicator={false}
+ contentContainerStyle={styles.listContent}
+ />
+
+ );
+}
+
+/**
+ * NovelGrid Component
+ * Displays a grid of novels
+ */
+export function NovelGrid({
+ novels,
+ onItemPress,
+ numColumns = 3,
+ style,
+}) {
+ if (!novels || novels.length === 0) return null;
+
+ const renderItem = ({item}) => (
+
+ );
+
+ return (
+
+ );
+}
+
+/**
+ * NovelSectionList Component
+ * Displays multiple sections of novels
+ * Uses map instead of FlatList to avoid nested VirtualizedList warning
+ */
+export function NovelSectionList({
+ sections,
+ onItemPress,
+ onSeeAllPress,
+ style,
+}) {
+ if (!sections || sections.length === 0) return null;
+
+ return (
+
+ {sections.map((section, index) => (
+ onSeeAllPress?.(section.name, section.novels)}
+ />
+ ))}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ marginBottom: 20,
+ },
+ listContent: {
+ paddingHorizontal: 16,
+ gap: 12,
+ },
+ card: {
+ marginRight: 12,
+ },
+ gridContent: {
+ paddingHorizontal: 16,
+ paddingBottom: 20,
+ },
+ gridRow: {
+ justifyContent: 'space-between',
+ marginBottom: 12,
+ },
+});
+
+export default NovelList;
\ No newline at end of file
diff --git a/src/Screens/Novel/Components/SectionHeader.js b/src/Screens/Novel/Components/SectionHeader.js
new file mode 100644
index 00000000..f8b88fdc
--- /dev/null
+++ b/src/Screens/Novel/Components/SectionHeader.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import {
+ View,
+ Text,
+ TouchableOpacity,
+ StyleSheet,
+} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+/**
+ * SectionHeader Component
+ * Displays a section title with optional "See All" button
+ */
+export function SectionHeader({title, onSeeAllPress, style}) {
+ return (
+
+ {title}
+ {onSeeAllPress && (
+
+ See All
+
+
+ )}
+
+ );
+}
+
+/**
+ * SectionHeaderWithCount Component
+ * Displays a section title with item count
+ */
+export function SectionHeaderWithCount({title, count, onSeeAllPress, style}) {
+ return (
+
+
+ {title}
+ {count !== undefined && (
+ ({count})
+ )}
+
+ {onSeeAllPress && (
+
+ See All
+
+
+ )}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingHorizontal: 16,
+ marginBottom: 12,
+ },
+ title: {
+ color: '#fff',
+ fontSize: 16,
+ fontWeight: '600',
+ },
+ titleContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 6,
+ },
+ count: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 14,
+ },
+ seeAllButton: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 2,
+ },
+ seeAllText: {
+ color: '#667EEA',
+ fontSize: 14,
+ fontWeight: '500',
+ },
+});
+
+export default SectionHeader;
\ No newline at end of file
diff --git a/src/Screens/Novel/Components/SourceSelector.js b/src/Screens/Novel/Components/SourceSelector.js
new file mode 100644
index 00000000..f86a153e
--- /dev/null
+++ b/src/Screens/Novel/Components/SourceSelector.js
@@ -0,0 +1,389 @@
+import React, {useState, useMemo} from 'react';
+import {
+ View,
+ Text,
+ StyleSheet,
+ TouchableOpacity,
+ Modal,
+ FlatList,
+} from 'react-native';
+import {useSelector, useDispatch} from 'react-redux';
+import {
+ heightPercentageToDP as hp,
+ widthPercentageToDP as wp,
+} from 'react-native-responsive-screen';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import {NovelHostName} from '../../../Utils/APIs';
+import {useSourceStatus} from '../../../Utils/hooks/useSourceStatus';
+import {switchNovelSource} from '../../../Redux/Actions/NovelActions';
+import {getSourceLabel} from '../../../Utils/sourceStatus';
+
+/**
+ * Status indicator component showing source health
+ */
+function StatusIndicator({status, size = 10}) {
+ const getStatusColor = () => {
+ if (!status) {
+ return '#888';
+ }
+ switch (status.status) {
+ case 'working':
+ return '#4CAF50';
+ case 'cloudflare_protected':
+ return '#FF9800';
+ case 'server_down':
+ return '#F44336';
+ default:
+ return '#888';
+ }
+ };
+
+ return (
+
+ );
+}
+
+/**
+ * Individual source item component (needed for hooks)
+ */
+function SourceItem({item, isSelected, showStatus, onSelect}) {
+ const sourceStatus = useSourceStatus(item.key);
+
+ return (
+ item.enabled && onSelect(item.key)}
+ disabled={!item.enabled}
+ activeOpacity={0.7}>
+
+
+ {showStatus && (
+
+ )}
+
+ {item.name}
+
+
+ {isSelected && (
+
+ )}
+
+ {!item.enabled && (
+ Disabled
+ )}
+
+ );
+}
+
+/**
+ * SourceSelector Component
+ * A dropdown/modal component for selecting novel sources.
+ *
+ * @param {Object} props - Component props
+ * @param {Function} [props.onSourceChange] - Optional callback when source changes
+ * @param {Object} [props.style] - Optional custom styles for the container
+ * @param {boolean} [props.showStatus=true] - Whether to show source status indicators
+ */
+export function SourceSelector({
+ onSourceChange,
+ style,
+ showStatus = true,
+}) {
+ const dispatch = useDispatch();
+ const [modalVisible, setModalVisible] = useState(false);
+
+ // Get current source and available sources from Redux
+ const novelBaseUrl = useSelector(state => state.data.novelBaseUrl || 'novelfire');
+ const novelSources = useSelector(state => state.data.novelSources || {});
+
+ // Get current source details
+ const currentSourceKey = novelBaseUrl;
+ const currentSourceName = getSourceLabel(currentSourceKey);
+ const currentSourceStatus = useSourceStatus(currentSourceKey);
+
+ // Build list of available sources
+ const availableSources = useMemo(() => {
+ const sources = Object.keys(NovelHostName);
+ return sources.map(key => ({
+ key,
+ name: getSourceLabel(key),
+ url: NovelHostName[key],
+ enabled: novelSources[key]?.enabled !== false,
+ }));
+ }, [novelSources]);
+
+ // Handle source selection
+ const handleSelectSource = sourceKey => {
+ if (sourceKey !== currentSourceKey) {
+ dispatch(switchNovelSource(sourceKey));
+ onSourceChange?.(sourceKey);
+ }
+ setModalVisible(false);
+ };
+
+ return (
+
+ {/* Selector Button */}
+ setModalVisible(true)}
+ activeOpacity={0.7}>
+
+ {showStatus && (
+
+ )}
+
+ {currentSourceName}
+
+
+
+
+
+ {/* Source Selection Modal */}
+ setModalVisible(false)}>
+ {/* Backdrop */}
+ setModalVisible(false)}
+ />
+
+ {/* Modal Content */}
+
+ {/* Modal Header */}
+
+ Select Novel Source
+ setModalVisible(false)}>
+
+
+
+
+ {/* Source List */}
+ item.key}
+ renderItem={({item}) => (
+
+ )}
+ contentContainerStyle={styles.sourceList}
+ showsVerticalScrollIndicator={false}
+ ListEmptyComponent={
+
+
+ No sources available
+
+ }
+ />
+
+ {/* Status Legend */}
+ {showStatus && (
+
+ Status:
+
+
+ Working
+
+
+
+ Protected
+
+
+
+ Down
+
+
+ )}
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ // Container styles can be overridden by style prop
+ },
+ selectorButton: {
+ backgroundColor: 'rgba(255, 255, 255, 0.1)',
+ borderRadius: 8,
+ paddingHorizontal: wp('3%'),
+ paddingVertical: hp('1%'),
+ borderWidth: 1,
+ borderColor: 'rgba(255, 255, 255, 0.2)',
+ },
+ selectorContent: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 8,
+ },
+ selectorText: {
+ color: '#FFF',
+ fontSize: hp('1.8%'),
+ fontWeight: '500',
+ flex: 1,
+ },
+ statusDot: {
+ // Dynamic styles applied via style prop
+ },
+ modalBackdrop: {
+ flex: 1,
+ backgroundColor: 'rgba(0, 0, 0, 0.5)',
+ },
+ modalContainer: {
+ backgroundColor: '#1a1a2e',
+ borderTopLeftRadius: 20,
+ borderTopRightRadius: 20,
+ maxHeight: hp('60%'),
+ paddingBottom: hp('4%'),
+ position: 'absolute',
+ bottom: 0,
+ left: 0,
+ right: 0,
+ },
+ modalHeader: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingHorizontal: wp('5%'),
+ paddingVertical: hp('2%'),
+ borderBottomWidth: 1,
+ borderBottomColor: 'rgba(255, 255, 255, 0.1)',
+ },
+ modalTitle: {
+ color: '#FFF',
+ fontSize: hp('2.2%'),
+ fontWeight: 'bold',
+ },
+ closeButton: {
+ padding: 4,
+ },
+ sourceList: {
+ paddingHorizontal: wp('4%'),
+ paddingVertical: hp('1%'),
+ },
+ sourceItem: {
+ backgroundColor: 'rgba(255, 255, 255, 0.05)',
+ borderRadius: 10,
+ marginVertical: hp('0.5%'),
+ paddingHorizontal: wp('4%'),
+ paddingVertical: hp('1.5%'),
+ },
+ sourceItemSelected: {
+ backgroundColor: 'rgba(76, 175, 80, 0.2)',
+ borderWidth: 1,
+ borderColor: '#4CAF50',
+ },
+ sourceItemDisabled: {
+ opacity: 0.5,
+ },
+ sourceItemContent: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+ sourceItemLeft: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 10,
+ flex: 1,
+ },
+ sourceItemName: {
+ color: '#FFF',
+ fontSize: hp('2%'),
+ fontWeight: '500',
+ },
+ sourceItemNameSelected: {
+ color: '#4CAF50',
+ fontWeight: 'bold',
+ },
+ sourceItemNameDisabled: {
+ color: '#888',
+ },
+ disabledLabel: {
+ color: '#F44336',
+ fontSize: hp('1.4%'),
+ marginTop: 4,
+ marginLeft: 22,
+ },
+ legendContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: 12,
+ paddingHorizontal: wp('4%'),
+ paddingVertical: hp('1.5%'),
+ borderTopWidth: 1,
+ borderTopColor: 'rgba(255, 255, 255, 0.1)',
+ marginTop: hp('1%'),
+ },
+ legendTitle: {
+ color: '#888',
+ fontSize: hp('1.5%'),
+ fontWeight: '500',
+ },
+ legendItem: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 4,
+ },
+ legendText: {
+ color: '#888',
+ fontSize: hp('1.4%'),
+ },
+ emptyContainer: {
+ alignItems: 'center',
+ justifyContent: 'center',
+ paddingVertical: hp('5%'),
+ },
+ emptyText: {
+ color: '#666',
+ fontSize: hp('1.8%'),
+ marginTop: hp('1%'),
+ },
+});
+
+export default SourceSelector;
diff --git a/src/Screens/Novel/Details/Components/ChapterList.js b/src/Screens/Novel/Details/Components/ChapterList.js
new file mode 100644
index 00000000..d2856284
--- /dev/null
+++ b/src/Screens/Novel/Details/Components/ChapterList.js
@@ -0,0 +1,296 @@
+import React, {useState, useCallback} from 'react';
+import {
+ View,
+ Text,
+ FlatList,
+ TouchableOpacity,
+ StyleSheet,
+ ActivityIndicator,
+} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+/**
+ * ChapterList Component
+ * Displays a virtualized list of chapters with sort functionality
+ */
+export function ChapterList({
+ chapters,
+ currentChapter,
+ onChapterPress,
+ downloadedChapters = [],
+ sortAscending = true,
+ onSortToggle,
+ loading = false,
+ chapterProgress = {}, // {chapterLink: {scrollProgress, completed, lastReadAt}}
+ style,
+}) {
+ const [sortOrder, setSortOrder] = useState(sortAscending ? 'asc' : 'desc');
+
+ const sortedChapters = [...(chapters || [])].sort((a, b) => {
+ if (sortOrder === 'asc') {
+ return (a.number || 0) - (b.number || 0);
+ }
+ return (b.number || 0) - (a.number || 0);
+ });
+
+ const handleSortToggle = useCallback(() => {
+ const newOrder = sortOrder === 'asc' ? 'desc' : 'asc';
+ setSortOrder(newOrder);
+ onSortToggle?.(newOrder === 'asc');
+ }, [sortOrder, onSortToggle]);
+
+ const isChapterDownloaded = useCallback((chapterNumber) => {
+ return downloadedChapters.includes(chapterNumber);
+ }, [downloadedChapters]);
+
+ const isCurrentChapter = useCallback((chapterNumber) => {
+ return currentChapter === chapterNumber;
+ }, [currentChapter]);
+
+ const getChapterProgress = useCallback((chapterLink) => {
+ return chapterProgress?.[chapterLink];
+ }, [chapterProgress]);
+
+ const renderItem = useCallback(({item}) => {
+ const isDownloaded = isChapterDownloaded(item.number);
+ const isCurrent = isCurrentChapter(item.number);
+ const progress = getChapterProgress(item.link);
+ const isCompleted = progress?.completed;
+ const scrollProgress = progress?.scrollProgress || 0;
+
+ return (
+ onChapterPress?.(item)}
+ activeOpacity={0.7}>
+
+
+
+ Chapter {item.number}
+
+ {isCompleted && (
+
+ )}
+
+ {item.title && (
+
+ {item.title}
+
+ )}
+ {/* Progress bar */}
+ {!isCompleted && scrollProgress > 0 && (
+
+
+
+
+ {Math.round(scrollProgress)}%
+
+ )}
+
+
+ {isDownloaded && (
+
+ )}
+
+
+
+ );
+ }, [isChapterDownloaded, isCurrentChapter, getChapterProgress, onChapterPress]);
+
+ const keyExtractor = useCallback((item, index) => {
+ return `${item.number || index}`;
+ }, []);
+
+ const getItemLayout = useCallback((data, index) => ({
+ length: 56,
+ offset: 56 * index,
+ index,
+ }), []);
+
+ if (loading) {
+ return (
+
+
+ Loading chapters...
+
+ );
+ }
+
+ return (
+
+
+
+ {chapters?.length || 0} Chapters
+
+
+
+
+ {sortOrder === 'asc' ? 'Oldest' : 'Newest'}
+
+
+
+
+
+
+ No chapters available
+
+ }
+ />
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ header: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingHorizontal: 16,
+ paddingVertical: 12,
+ borderBottomWidth: 1,
+ borderBottomColor: 'rgba(255,255,255,0.1)',
+ },
+ headerTitle: {
+ color: '#fff',
+ fontSize: 16,
+ fontWeight: '600',
+ },
+ sortButton: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 4,
+ padding: 6,
+ borderRadius: 6,
+ backgroundColor: 'rgba(102, 126, 234, 0.1)',
+ },
+ sortText: {
+ color: '#667EEA',
+ fontSize: 12,
+ fontWeight: '500',
+ },
+ listContent: {
+ paddingBottom: 20,
+ },
+ chapterItem: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingHorizontal: 16,
+ paddingVertical: 14,
+ borderBottomWidth: 1,
+ borderBottomColor: 'rgba(255,255,255,0.05)',
+ },
+ currentChapter: {
+ backgroundColor: 'rgba(102, 126, 234, 0.1)',
+ },
+ chapterInfo: {
+ flex: 1,
+ },
+ chapterTitleRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ chapterNumber: {
+ color: '#fff',
+ fontSize: 14,
+ fontWeight: '500',
+ },
+ completedIcon: {
+ marginLeft: 6,
+ },
+ currentChapterText: {
+ color: '#667EEA',
+ },
+ chapterTitle: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 12,
+ marginTop: 2,
+ },
+ progressContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginTop: 6,
+ gap: 8,
+ },
+ progressBackground: {
+ flex: 1,
+ height: 3,
+ backgroundColor: 'rgba(255,255,255,0.1)',
+ borderRadius: 2,
+ overflow: 'hidden',
+ },
+ progressFill: {
+ height: '100%',
+ backgroundColor: '#667EEA',
+ borderRadius: 2,
+ },
+ progressText: {
+ color: 'rgba(255,255,255,0.4)',
+ fontSize: 10,
+ minWidth: 30,
+ },
+ chapterMeta: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 8,
+ },
+ loadingContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingVertical: 40,
+ },
+ loadingText: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 14,
+ marginTop: 12,
+ },
+ emptyContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingVertical: 60,
+ },
+ emptyText: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 14,
+ marginTop: 12,
+ },
+});
+
+export default ChapterList;
\ No newline at end of file
diff --git a/src/Screens/Novel/Details/Components/GenreTags.js b/src/Screens/Novel/Details/Components/GenreTags.js
new file mode 100644
index 00000000..74a653f0
--- /dev/null
+++ b/src/Screens/Novel/Details/Components/GenreTags.js
@@ -0,0 +1,179 @@
+import React from 'react';
+import {
+ View,
+ Text,
+ TouchableOpacity,
+ StyleSheet,
+ ScrollView,
+} from 'react-native';
+
+/**
+ * GenreTags Component
+ * Displays genre tags for a novel
+ */
+export function GenreTags({genres, onGenrePress, style, maxVisible = 5}) {
+ if (!genres || genres.length === 0) return null;
+
+ const visibleGenres = genres.slice(0, maxVisible);
+ const remainingCount = genres.length - maxVisible;
+
+ return (
+
+
+ {visibleGenres.map((genre, index) => (
+ onGenrePress?.(genre)}
+ activeOpacity={0.7}>
+ {genre}
+
+ ))}
+ {remainingCount > 0 && (
+
+ +{remainingCount}
+
+ )}
+
+
+ );
+}
+
+/**
+ * GenreGrid Component
+ * Displays all genres in a grid layout
+ */
+export function GenreGrid({genres, onGenrePress, style, numColumns = 3}) {
+ if (!genres || genres.length === 0) return null;
+
+ const rows = [];
+ for (let i = 0; i < genres.length; i += numColumns) {
+ rows.push(genres.slice(i, i + numColumns));
+ }
+
+ return (
+
+ {rows.map((row, rowIndex) => (
+
+ {row.map((genre, colIndex) => (
+ onGenrePress?.(genre)}
+ activeOpacity={0.7}>
+ {genre}
+
+ ))}
+
+ ))}
+
+ );
+}
+
+/**
+ * GenreList Component
+ * Displays all available genres for filtering
+ */
+export function GenreList({genres, selectedGenres, onGenreToggle, style}) {
+ if (!genres || genres.length === 0) return null;
+
+ return (
+
+ {genres.map((genre, index) => {
+ const isSelected = selectedGenres?.includes(genre);
+ return (
+ onGenreToggle?.(genre)}
+ activeOpacity={0.7}>
+
+ {genre}
+
+
+ );
+ })}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ marginVertical: 8,
+ },
+ scrollContent: {
+ paddingHorizontal: 16,
+ gap: 8,
+ },
+ tag: {
+ backgroundColor: 'rgba(102, 126, 234, 0.15)',
+ paddingHorizontal: 12,
+ paddingVertical: 6,
+ borderRadius: 16,
+ marginRight: 8,
+ },
+ tagText: {
+ color: '#667EEA',
+ fontSize: 12,
+ fontWeight: '500',
+ },
+ moreTag: {
+ backgroundColor: 'rgba(255,255,255,0.1)',
+ },
+ gridContainer: {
+ paddingHorizontal: 16,
+ },
+ gridRow: {
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ marginBottom: 8,
+ gap: 8,
+ },
+ gridTag: {
+ backgroundColor: 'rgba(102, 126, 234, 0.15)',
+ paddingHorizontal: 14,
+ paddingVertical: 8,
+ borderRadius: 8,
+ flex: 1,
+ alignItems: 'center',
+ },
+ gridTagText: {
+ color: '#667EEA',
+ fontSize: 13,
+ fontWeight: '500',
+ },
+ listContainer: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ paddingHorizontal: 16,
+ gap: 8,
+ },
+ listTag: {
+ backgroundColor: 'rgba(255,255,255,0.1)',
+ paddingHorizontal: 14,
+ paddingVertical: 8,
+ borderRadius: 20,
+ },
+ selectedTag: {
+ backgroundColor: '#667EEA',
+ },
+ listTagText: {
+ color: 'rgba(255,255,255,0.7)',
+ fontSize: 13,
+ },
+ selectedTagText: {
+ color: '#fff',
+ fontWeight: '500',
+ },
+});
+
+export default GenreTags;
\ No newline at end of file
diff --git a/src/Screens/Novel/Details/Components/NovelInfo.js b/src/Screens/Novel/Details/Components/NovelInfo.js
new file mode 100644
index 00000000..fa13080a
--- /dev/null
+++ b/src/Screens/Novel/Details/Components/NovelInfo.js
@@ -0,0 +1,353 @@
+import React, {useState} from 'react';
+import {
+ View,
+ Text,
+ StyleSheet,
+ TouchableOpacity,
+} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Image from '../../../../Components/UIComp/Image';
+import {GenreTags} from './GenreTags';
+
+/**
+ * NovelInfo Component
+ * Displays novel header information with cover, title, author, etc.
+ */
+export function NovelInfo({
+ novel,
+ onGenrePress,
+ onBookmarkPress,
+ isBookmarked,
+ style,
+}) {
+ const [descriptionExpanded, setDescriptionExpanded] = useState(false);
+
+ if (!novel) return null;
+
+ const {
+ title,
+ author,
+ coverImage,
+ rating,
+ chapters,
+ status,
+ views,
+ genres,
+ summary,
+ } = novel;
+
+ // Debug log for cover image
+ console.log('[NovelInfo] coverImage:', coverImage ? coverImage.substring(0, 80) + '...' : null);
+
+ // Check if summary is long enough to need truncation (more than ~150 chars or 3 lines)
+ const shouldTruncate = summary && summary.length > 150;
+ const displaySummary = !shouldTruncate || descriptionExpanded
+ ? summary
+ : summary.slice(0, 150) + '...';
+
+ return (
+
+
+
+
+
+ {title}
+
+ {author && (
+ by {author}
+ )}
+
+ {rating && (
+
+
+ {rating.toFixed(1)}
+
+ )}
+ {chapters && (
+
+
+ {chapters} Ch
+
+ )}
+ {views && (
+
+
+ {views}
+
+ )}
+
+ {status && (
+
+
+ {status}
+
+
+ )}
+
+
+
+ {genres && genres.length > 0 && (
+
+ )}
+
+ {summary && (
+
+ Synopsis
+
+ {displaySummary}
+
+ {shouldTruncate && (
+ setDescriptionExpanded(!descriptionExpanded)}
+ activeOpacity={0.7}>
+
+ {descriptionExpanded ? 'Show Less' : 'Read More'}
+
+
+
+ )}
+
+ )}
+
+ {onBookmarkPress && (
+
+
+
+ {isBookmarked ? 'Bookmarked' : 'Add to Library'}
+
+
+ )}
+
+ );
+}
+
+/**
+ * NovelInfoCompact Component
+ * Compact version for headers
+ */
+export function NovelInfoCompact({novel, style}) {
+ if (!novel) return null;
+
+ const {title, author, coverImage, rating, chapters} = novel;
+
+ return (
+
+
+
+
+ {title}
+
+ {author && (
+
+ {author}
+
+ )}
+
+ {rating && (
+
+
+ {rating.toFixed(1)}
+
+ )}
+ {chapters && (
+ {chapters} Chapters
+ )}
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ paddingHorizontal: 16,
+ paddingBottom: 16,
+ },
+ header: {
+ flexDirection: 'row',
+ },
+ cover: {
+ width: 120,
+ height: 170,
+ borderRadius: 12,
+ backgroundColor: '#2a2a4a',
+ },
+ info: {
+ flex: 1,
+ marginLeft: 16,
+ justifyContent: 'space-between',
+ },
+ title: {
+ color: '#fff',
+ fontSize: 18,
+ fontWeight: '700',
+ lineHeight: 24,
+ },
+ author: {
+ color: 'rgba(255,255,255,0.6)',
+ fontSize: 14,
+ marginTop: 4,
+ },
+ stats: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 16,
+ marginTop: 8,
+ },
+ statItem: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 4,
+ },
+ statText: {
+ color: 'rgba(255,255,255,0.7)',
+ fontSize: 13,
+ },
+ statusBadge: {
+ alignSelf: 'flex-start',
+ backgroundColor: 'rgba(255,255,255,0.1)',
+ paddingHorizontal: 10,
+ paddingVertical: 4,
+ borderRadius: 12,
+ marginTop: 8,
+ },
+ completedBadge: {
+ backgroundColor: 'rgba(76, 175, 80, 0.2)',
+ },
+ statusText: {
+ color: 'rgba(255,255,255,0.7)',
+ fontSize: 12,
+ fontWeight: '500',
+ },
+ completedText: {
+ color: '#4CAF50',
+ },
+ genres: {
+ marginTop: 16,
+ },
+ summaryContainer: {
+ marginTop: 16,
+ },
+ summaryTitle: {
+ color: '#fff',
+ fontSize: 16,
+ fontWeight: '600',
+ marginBottom: 8,
+ },
+ summary: {
+ color: 'rgba(255,255,255,0.7)',
+ fontSize: 14,
+ lineHeight: 22,
+ },
+ readMoreButton: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginTop: 8,
+ gap: 4,
+ },
+ readMoreText: {
+ color: '#667EEA',
+ fontSize: 14,
+ fontWeight: '500',
+ },
+ bookmarkButton: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: 'rgba(102, 126, 234, 0.15)',
+ paddingVertical: 12,
+ borderRadius: 10,
+ marginTop: 16,
+ gap: 8,
+ },
+ bookmarkedButton: {
+ backgroundColor: '#667EEA',
+ },
+ bookmarkText: {
+ color: '#667EEA',
+ fontSize: 14,
+ fontWeight: '600',
+ },
+ bookmarkedText: {
+ color: '#fff',
+ },
+
+ // Compact styles
+ compactContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ compactCover: {
+ width: 50,
+ height: 70,
+ borderRadius: 8,
+ backgroundColor: '#2a2a4a',
+ },
+ compactInfo: {
+ flex: 1,
+ marginLeft: 12,
+ },
+ compactTitle: {
+ color: '#fff',
+ fontSize: 14,
+ fontWeight: '600',
+ lineHeight: 18,
+ },
+ compactAuthor: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 12,
+ marginTop: 2,
+ },
+ compactStats: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 12,
+ marginTop: 4,
+ },
+ compactStatText: {
+ color: '#FFD700',
+ fontSize: 11,
+ },
+ compactChapters: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 11,
+ },
+});
+
+export default NovelInfo;
\ No newline at end of file
diff --git a/src/Screens/Novel/Details/NovelDetails.js b/src/Screens/Novel/Details/NovelDetails.js
new file mode 100644
index 00000000..c7019a4e
--- /dev/null
+++ b/src/Screens/Novel/Details/NovelDetails.js
@@ -0,0 +1,814 @@
+import React, {useEffect, useState, useCallback, useMemo} from 'react';
+import {
+ View,
+ StyleSheet,
+ ActivityIndicator,
+ Text,
+ FlatList,
+ TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useNavigation, useRoute} from '@react-navigation/native';
+import {useSelector, useDispatch} from 'react-redux';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import crashlytics from '@react-native-firebase/crashlytics';
+import {heightPercentageToDP} from 'react-native-responsive-screen';
+
+import {NovelInfo} from './Components/NovelInfo';
+import {getNovelDetails, getChapterList} from '../APIs';
+import {NAVIGATION} from '../../../Constants';
+import {
+ AddNovelBookMark,
+ RemoveNovelBookMark,
+ pushNovelHistory,
+} from '../../../Redux/Reducers';
+
+function NovelDetailsHeader({title, onBack, onBookmark, isBookmarked}) {
+ return (
+
+
+
+
+
+
+ {title || 'Novel Details'}
+
+
+
+
+
+
+
+
+ );
+}
+
+function ChapterPagination({currentPage, totalPages, onPageChange, loading}) {
+ if (totalPages <= 1) {
+ return null;
+ }
+
+ const renderPageButtons = () => {
+ const buttons = [];
+ const maxVisible = 5;
+ let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+ let endPage = Math.min(totalPages, startPage + maxVisible - 1);
+
+ if (endPage - startPage + 1 < maxVisible) {
+ startPage = Math.max(1, endPage - maxVisible + 1);
+ }
+
+ // Previous button
+ if (currentPage > 1) {
+ buttons.push(
+ onPageChange(currentPage - 1)}
+ disabled={loading}>
+
+ ,
+ );
+ }
+
+ // First page
+ if (startPage > 1) {
+ buttons.push(
+ onPageChange(1)}
+ disabled={loading}>
+ 1
+ ,
+ );
+ if (startPage > 2) {
+ buttons.push(
+
+ ...
+ ,
+ );
+ }
+ }
+
+ // Page numbers
+ for (let i = startPage; i <= endPage; i++) {
+ buttons.push(
+ onPageChange(i)}
+ disabled={loading || currentPage === i}>
+
+ {i}
+
+ ,
+ );
+ }
+
+ // Last page
+ if (endPage < totalPages) {
+ if (endPage < totalPages - 1) {
+ buttons.push(
+
+ ...
+ ,
+ );
+ }
+ buttons.push(
+ onPageChange(totalPages)}
+ disabled={loading}>
+ {totalPages}
+ ,
+ );
+ }
+
+ // Next button
+ if (currentPage < totalPages) {
+ buttons.push(
+ onPageChange(currentPage + 1)}
+ disabled={loading}>
+
+ ,
+ );
+ }
+
+ return buttons;
+ };
+
+ return (
+
+ {loading && (
+
+ )}
+ {renderPageButtons()}
+
+ Page {currentPage} of {totalPages}
+
+
+ );
+}
+
+export function NovelDetails() {
+ const navigation = useNavigation();
+ const route = useRoute();
+ const dispatch = useDispatch();
+
+ const {novel: initialNovel} = route.params || {};
+ const novelLink = initialNovel?.link;
+
+ const [novel, setNovel] = useState(initialNovel);
+ const [loading, setLoading] = useState(!initialNovel?.chapterList?.length);
+ const [chaptersLoading, setChaptersLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [sortOrder, setSortOrder] = useState('asc');
+ const [currentPage, setCurrentPage] = useState(1);
+ const [totalPages, setTotalPages] = useState(initialNovel?.chapterPagination?.totalPages || 1);
+
+ const bookmarks = useSelector(state => state.data.NovelBookMarks || {});
+ const isBookmarked = !!bookmarks[novelLink];
+ const novelHistory = useSelector(state => state.data.NovelHistory || {});
+ const readingProgress = novelHistory[novelLink];
+
+ useEffect(() => {
+ if (!novelLink) {
+ return;
+ }
+
+ const fetchDetails = async () => {
+ try {
+ setLoading(true);
+ setError(null);
+ const details = await getNovelDetails(novelLink);
+ setNovel(prev => ({...prev, ...details}));
+
+ // Set pagination info
+ if (details?.chapterPagination) {
+ setTotalPages(details.chapterPagination.totalPages || 1);
+ }
+
+ // Add to history
+ dispatch(
+ pushNovelHistory({
+ link: novelLink,
+ title: details.title,
+ coverImage: details.imgSrc || details.coverImage,
+ author: details.author,
+ lastReadAt: Date.now(),
+ }),
+ );
+ } catch (err) {
+ console.error('Error fetching novel details:', err);
+ crashlytics().recordError(err);
+ setError('Failed to load novel details.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (!initialNovel?.chapterList?.length || !initialNovel?.chapterPagination) {
+ fetchDetails();
+ }
+ }, [novelLink, initialNovel, dispatch]);
+
+ const handleChapterPress = useCallback(
+ chapter => {
+ crashlytics().log(`Chapter pressed: ${chapter.number}`);
+ navigation.navigate(NAVIGATION.novelReader, {
+ novel,
+ chapter,
+ chapterLink: chapter.link,
+ });
+ },
+ [navigation, novel],
+ );
+
+ const handleBookmarkToggle = useCallback(() => {
+ if (isBookmarked) {
+ dispatch(RemoveNovelBookMark({link: novelLink}));
+ } else {
+ dispatch(
+ AddNovelBookMark({
+ link: novelLink,
+ title: novel?.title,
+ coverImage: novel?.coverImage,
+ author: novel?.author,
+ chapters: novel?.chapters,
+ status: novel?.status,
+ }),
+ );
+ }
+ }, [dispatch, isBookmarked, novelLink, novel]);
+
+ const handleGenrePress = useCallback(
+ genre => {
+ crashlytics().log(`Genre pressed: ${genre}`);
+ navigation.navigate(NAVIGATION.novelViewAll, {
+ title: genre,
+ genre,
+ });
+ },
+ [navigation],
+ );
+
+ const handleStartReading = useCallback(() => {
+ const chapters = novel?.chapterList || [];
+ if (chapters.length > 0) {
+ // Check if there's reading progress
+ if (readingProgress?.lastChapterLink) {
+ // Find the last read chapter
+ const lastReadChapter = chapters.find(
+ ch =>
+ ch.link === readingProgress.lastChapterLink ||
+ ch.number === readingProgress.lastChapter,
+ );
+ if (lastReadChapter) {
+ handleChapterPress(lastReadChapter);
+ return;
+ }
+ }
+
+ // Otherwise, get first chapter based on current sort order
+ const sortedList = [...chapters].sort((a, b) => {
+ if (sortOrder === 'asc') {
+ return (a.number || 0) - (b.number || 0);
+ }
+ return (b.number || 0) - (a.number || 0);
+ });
+ handleChapterPress(sortedList[0]);
+ }
+ }, [novel, handleChapterPress, sortOrder, readingProgress]);
+
+ const handleSortToggle = useCallback(() => {
+ setSortOrder(prev => (prev === 'asc' ? 'desc' : 'asc'));
+ }, []);
+
+ const handlePageChange = useCallback(
+ async page => {
+ if (!novelLink || chaptersLoading) {
+ return;
+ }
+
+ try {
+ setChaptersLoading(true);
+ const result = await getChapterList(novelLink, page);
+
+ if (result?.chapters) {
+ setNovel(prev => ({
+ ...prev,
+ chapterList: result.chapters,
+ }));
+ setCurrentPage(page);
+
+ if (result?.pagination) {
+ setTotalPages(result.pagination.totalPages || 1);
+ }
+ }
+ } catch (err) {
+ console.error('Error fetching chapters:', err);
+ crashlytics().recordError(err);
+ } finally {
+ setChaptersLoading(false);
+ }
+ },
+ [novelLink, chaptersLoading],
+ );
+
+ const sortedChapters = useMemo(() => {
+ return [...(novel?.chapterList || [])].sort((a, b) => {
+ if (sortOrder === 'asc') {
+ return (a.number || 0) - (b.number || 0);
+ }
+ return (b.number || 0) - (a.number || 0);
+ });
+ }, [novel?.chapterList, sortOrder]);
+
+ const renderChapter = useCallback(
+ ({item}) => {
+ const isLastRead =
+ readingProgress?.lastChapterLink === item.link ||
+ readingProgress?.lastChapter === item.number;
+
+ // Get chapter progress
+ const chapterProgress = readingProgress?.chapterProgress?.[item.link];
+ const isCompleted = chapterProgress?.completed;
+ const scrollProgress = chapterProgress?.scrollProgress || 0;
+
+ return (
+ handleChapterPress(item)}
+ activeOpacity={0.7}>
+
+
+
+ Chapter {item.number}
+
+ {isCompleted && (
+
+ )}
+
+ {item.title && (
+
+ {item.title}
+
+ )}
+ {/* Progress bar */}
+ {!isCompleted && scrollProgress > 0 && (
+
+
+
+
+
+ {Math.round(scrollProgress)}%
+
+
+ )}
+ {isLastRead && (
+
+
+ Last Read
+
+ )}
+
+
+
+ );
+ },
+ [handleChapterPress, readingProgress],
+ );
+
+ const keyExtractor = useCallback((item, index) => {
+ return `${item.number || index}`;
+ }, []);
+
+ const getItemLayout = useCallback(
+ (data, index) => ({
+ length: 56,
+ offset: 56 * index,
+ index,
+ }),
+ [],
+ );
+
+ const ListHeaderComponent = useCallback(() => {
+ const firstChapter = sortedChapters?.[0];
+ const hasChapters = sortedChapters?.length > 0;
+
+ // Determine button label based on reading progress
+ let chapterLabel = 'Start Reading';
+ let buttonIcon = 'book';
+
+ if (readingProgress?.lastChapter) {
+ chapterLabel = `Continue: Chapter ${readingProgress.lastChapter}`;
+ buttonIcon = 'book-outline';
+ } else if (firstChapter) {
+ chapterLabel = `Start Reading: Chapter ${firstChapter.number || 1}`;
+ }
+
+ return (
+ <>
+
+
+ {hasChapters && (
+
+
+
+ {chapterLabel}
+
+
+ )}
+
+
+
+ {novel?.chapterList?.length || 0} Chapters
+
+
+
+
+ {sortOrder === 'asc' ? 'Oldest' : 'Newest'}
+
+
+
+
+ );
+ }, [
+ novel,
+ sortedChapters,
+ readingProgress,
+ handleGenrePress,
+ handleStartReading,
+ handleSortToggle,
+ sortOrder,
+ ]);
+
+ const ListFooterComponent = useCallback(() => {
+ if (totalPages <= 1) {
+ return null;
+ }
+
+ return (
+
+ );
+ }, [currentPage, totalPages, handlePageChange, chaptersLoading]);
+
+ if (!novel && loading) {
+ return (
+
+
+
+ );
+ }
+
+ if (!novel) {
+ return (
+
+ {error || 'Novel not found'}
+ navigation.goBack()}>
+ Go Back
+
+
+ );
+ }
+
+ return (
+
+ navigation.goBack()}
+ onBookmark={handleBookmarkToggle}
+ isBookmarked={isBookmarked}
+ />
+
+
+
+
+
+ Loading chapters...
+
+ ) : (
+
+
+ No chapters available
+
+ )
+ }
+ />
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#0a0a14',
+ },
+ header: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ paddingHorizontal: 12,
+ paddingVertical: 10,
+ backgroundColor: '#14142A',
+ borderBottomWidth: 1,
+ borderBottomColor: 'rgba(255,255,255,0.1)',
+ },
+ headerButton: {
+ padding: 4,
+ },
+ headerTitle: {
+ flex: 1,
+ fontSize: 16,
+ fontWeight: '600',
+ color: '#fff',
+ textAlign: 'center',
+ marginHorizontal: 10,
+ },
+ headerActions: {
+ flexDirection: 'row',
+ gap: 16,
+ },
+ loadingContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#0a0a14',
+ },
+ errorContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#0a0a14',
+ padding: 20,
+ },
+ errorText: {
+ color: 'rgba(255,255,255,0.7)',
+ fontSize: 16,
+ textAlign: 'center',
+ },
+ backText: {
+ color: '#667EEA',
+ fontSize: 14,
+ marginTop: 16,
+ fontWeight: '500',
+ },
+ listContent: {
+ paddingBottom: 32,
+ },
+ actionContainer: {
+ paddingHorizontal: 16,
+ marginTop: 8,
+ },
+ readButton: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: '#667EEA',
+ paddingVertical: 14,
+ borderRadius: 12,
+ gap: 8,
+ },
+ readButtonText: {
+ color: '#fff',
+ fontSize: 15,
+ fontWeight: '600',
+ },
+ chapterHeader: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingHorizontal: 16,
+ paddingVertical: 12,
+ marginTop: 16,
+ borderBottomWidth: 1,
+ borderBottomColor: 'rgba(255,255,255,0.1)',
+ },
+ chapterHeaderTitle: {
+ fontSize: 16,
+ fontWeight: '600',
+ color: 'rgba(255,255,255,0.8)',
+ },
+ sortButton: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 4,
+ },
+ sortText: {
+ fontSize: 13,
+ color: '#667EEA',
+ fontWeight: '500',
+ },
+ chapterItem: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ paddingVertical: 14,
+ paddingHorizontal: 16,
+ borderBottomWidth: 1,
+ borderBottomColor: 'rgba(255,255,255,0.05)',
+ minHeight: 56,
+ },
+ lastReadChapter: {
+ backgroundColor: 'rgba(156, 39, 176, 0.1)',
+ borderLeftWidth: 3,
+ borderLeftColor: '#9C27B0',
+ },
+ chapterInfo: {
+ flex: 1,
+ },
+ chapterTitleRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ chapterNumber: {
+ fontSize: 14,
+ fontWeight: '500',
+ color: 'rgba(255,255,255,0.8)',
+ },
+ completedIcon: {
+ marginLeft: 6,
+ },
+ lastReadText: {
+ color: '#9C27B0',
+ },
+ chapterTitle: {
+ fontSize: 12,
+ color: 'rgba(255,255,255,0.5)',
+ marginTop: 2,
+ },
+ progressContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginTop: 6,
+ gap: 8,
+ },
+ progressBackground: {
+ flex: 1,
+ height: 3,
+ backgroundColor: 'rgba(255,255,255,0.1)',
+ borderRadius: 2,
+ overflow: 'hidden',
+ },
+ progressFill: {
+ height: '100%',
+ backgroundColor: '#667EEA',
+ borderRadius: 2,
+ },
+ progressText: {
+ color: 'rgba(255,255,255,0.4)',
+ fontSize: 10,
+ minWidth: 30,
+ },
+ lastReadBadge: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginTop: 4,
+ gap: 4,
+ },
+ lastReadBadgeText: {
+ fontSize: 11,
+ color: '#9C27B0',
+ fontWeight: '500',
+ },
+ loadingMore: {
+ paddingVertical: 40,
+ alignItems: 'center',
+ },
+ loadingText: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 13,
+ marginTop: 8,
+ },
+ emptyContainer: {
+ paddingVertical: 60,
+ alignItems: 'center',
+ },
+ emptyText: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 14,
+ marginTop: 12,
+ },
+ paginationContainer: {
+ paddingVertical: 20,
+ paddingHorizontal: 16,
+ alignItems: 'center',
+ borderTopWidth: 1,
+ borderTopColor: 'rgba(255,255,255,0.1)',
+ marginTop: 16,
+ },
+ paginationButtons: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: 8,
+ marginBottom: 12,
+ },
+ paginationButton: {
+ minWidth: 40,
+ height: 40,
+ borderRadius: 8,
+ backgroundColor: 'rgba(255,255,255,0.1)',
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingHorizontal: 12,
+ },
+ paginationButtonActive: {
+ backgroundColor: '#667EEA',
+ },
+ paginationButtonText: {
+ color: 'rgba(255,255,255,0.8)',
+ fontSize: 14,
+ fontWeight: '500',
+ },
+ paginationButtonTextActive: {
+ color: '#fff',
+ fontWeight: '600',
+ },
+ paginationButtonDisabled: {
+ opacity: 0.4,
+ },
+ paginationInfo: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 13,
+ },
+ paginationLoading: {
+ paddingVertical: 20,
+ alignItems: 'center',
+ },
+});
+
+export default NovelDetails;
diff --git a/src/Screens/Novel/Details/index.js b/src/Screens/Novel/Details/index.js
new file mode 100644
index 00000000..4656ffd0
--- /dev/null
+++ b/src/Screens/Novel/Details/index.js
@@ -0,0 +1 @@
+export {NovelDetails} from './NovelDetails';
\ No newline at end of file
diff --git a/src/Screens/Novel/Home/index.tsx b/src/Screens/Novel/Home/index.tsx
new file mode 100644
index 00000000..413e73de
--- /dev/null
+++ b/src/Screens/Novel/Home/index.tsx
@@ -0,0 +1,143 @@
+import React, {useEffect, useState, useCallback} from 'react';
+import {
+ View,
+ StyleSheet,
+ ActivityIndicator,
+ Text,
+ RefreshControl,
+ ScrollView,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useNavigation} from '@react-navigation/native';
+import crashlytics from '@react-native-firebase/crashlytics';
+
+import {NovelSectionList} from '../Components/NovelList';
+import {getNovelHome} from '../APIs';
+import {NAVIGATION} from '../../../Constants';
+
+export function NovelHome() {
+ const navigation = useNavigation();
+ const [sections, setSections] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [refreshing, setRefreshing] = useState(false);
+ const [error, setError] = useState(null);
+
+ const fetchHomeData = useCallback(async () => {
+ try {
+ setError(null);
+ const data = await getNovelHome();
+ setSections(data || []);
+ } catch (err) {
+ console.error('Error fetching novel home:', err);
+ crashlytics().recordError(err);
+ setError('Failed to load novels. Please try again.');
+ } finally {
+ setLoading(false);
+ setRefreshing(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchHomeData();
+ }, [fetchHomeData]);
+
+ const handleRefresh = useCallback(() => {
+ setRefreshing(true);
+ fetchHomeData();
+ }, [fetchHomeData]);
+
+ const handleNovelPress = useCallback((novel) => {
+ crashlytics().log(`Novel pressed: ${novel.title}`);
+ navigation.navigate(NAVIGATION.novelDetails, {novel});
+ }, [navigation]);
+
+ const handleSeeAllPress = useCallback((sectionName, novels) => {
+ navigation.navigate(NAVIGATION.novelViewAll, {
+ title: sectionName,
+ novels,
+ });
+ }, [navigation]);
+
+ if (loading) {
+ return (
+
+
+ Loading novels...
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ {error}
+
+ Tap to retry
+
+
+ );
+ }
+
+ return (
+
+
+ }>
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#0a0a14',
+ },
+ loadingContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#0a0a14',
+ },
+ loadingText: {
+ color: 'rgba(255,255,255,0.6)',
+ fontSize: 14,
+ marginTop: 12,
+ },
+ errorContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#0a0a14',
+ padding: 20,
+ },
+ errorText: {
+ color: 'rgba(255,255,255,0.7)',
+ fontSize: 14,
+ textAlign: 'center',
+ },
+ retryText: {
+ color: '#667EEA',
+ fontSize: 14,
+ marginTop: 12,
+ fontWeight: '500',
+ },
+ listContent: {
+ paddingTop: 16,
+ paddingBottom: 100,
+ },
+});
+
+export default NovelHome;
\ No newline at end of file
diff --git a/src/Screens/Novel/Library/NovelLibrary.js b/src/Screens/Novel/Library/NovelLibrary.js
new file mode 100644
index 00000000..5195742d
--- /dev/null
+++ b/src/Screens/Novel/Library/NovelLibrary.js
@@ -0,0 +1,232 @@
+import React, {useState, useCallback} from 'react';
+import {
+ View,
+ StyleSheet,
+ Text,
+ FlatList,
+ TouchableOpacity,
+ Alert,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useNavigation} from '@react-navigation/native';
+import {useSelector, useDispatch} from 'react-redux';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import crashlytics from '@react-native-firebase/crashlytics';
+
+import {NovelCardSmall} from '../Components/NovelCard';
+import {NAVIGATION} from '../../../Constants';
+import {
+ RemoveNovelBookMark,
+ clearNovelBookmarks,
+ clearNovelHistory,
+ RemoveNovelChapter,
+ clearNovelDownloads,
+} from '../../../Redux/Reducers';
+
+const TABS = ['Bookmarks', 'History', 'Downloads'];
+
+export function NovelLibrary() {
+ const navigation = useNavigation();
+ const dispatch = useDispatch();
+
+ const [activeTab, setActiveTab] = useState('Bookmarks');
+
+ const bookmarks = useSelector(state => state.data.NovelBookMarks || {});
+ const history = useSelector(state => state.data.NovelHistory || {});
+ const downloads = useSelector(state => state.data.NovelDownloads || {});
+
+ const getData = useCallback(() => {
+ switch (activeTab) {
+ case 'Bookmarks':
+ return Object.values(bookmarks);
+ case 'History':
+ return Object.values(history).sort((a, b) => (b.lastReadAt || 0) - (a.lastReadAt || 0));
+ case 'Downloads':
+ return Object.values(downloads).map(d => ({
+ ...d,
+ downloadedChapters: Object.keys(d.chapters || {}).length,
+ }));
+ default:
+ return [];
+ }
+ }, [activeTab, bookmarks, history, downloads]);
+
+ const handleNovelPress = useCallback((novel) => {
+ crashlytics().log(`Novel library item pressed: ${novel.title}`);
+ navigation.navigate(NAVIGATION.novelDetails, {novel});
+ }, [navigation]);
+
+ const handleClearAll = useCallback(() => {
+ Alert.alert(
+ `Clear ${activeTab}`,
+ `Are you sure you want to clear all ${activeTab.toLowerCase()}?`,
+ [
+ {text: 'Cancel', style: 'cancel'},
+ {
+ text: 'Clear',
+ style: 'destructive',
+ onPress: () => {
+ switch (activeTab) {
+ case 'Bookmarks':
+ dispatch(clearNovelBookmarks());
+ break;
+ case 'History':
+ dispatch(clearNovelHistory());
+ break;
+ case 'Downloads':
+ dispatch(clearNovelDownloads());
+ break;
+ }
+ },
+ },
+ ],
+ );
+ }, [activeTab, dispatch]);
+
+ const renderItem = useCallback(({item}) => {
+ const novel = {
+ ...item,
+ coverImage: item.coverImage,
+ title: item.title,
+ author: item.author,
+ rating: item.rating,
+ chapters: item.chapters || item.downloadedChapters,
+ };
+
+ return (
+
+ );
+ }, [handleNovelPress]);
+
+ const data = getData();
+
+ return (
+
+
+ My Library
+ {data.length > 0 && (
+
+ Clear All
+
+ )}
+
+
+
+ {TABS.map((tab) => (
+ setActiveTab(tab)}>
+
+ {tab}
+
+ {activeTab === tab && }
+
+ ))}
+
+
+ {data.length === 0 ? (
+
+
+ No {activeTab.toLowerCase()} yet
+
+ {activeTab === 'Bookmarks' && 'Novels you bookmark will appear here'}
+ {activeTab === 'History' && 'Your reading history will appear here'}
+ {activeTab === 'Downloads' && 'Downloaded chapters will appear here'}
+
+
+ ) : (
+ `${item.link || index}`}
+ renderItem={renderItem}
+ showsVerticalScrollIndicator={false}
+ contentContainerStyle={styles.listContent}
+ />
+ )}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#0a0a14',
+ },
+ header: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingHorizontal: 16,
+ paddingVertical: 12,
+ },
+ headerTitle: {
+ color: '#fff',
+ fontSize: 20,
+ fontWeight: '700',
+ },
+ clearText: {
+ color: '#667EEA',
+ fontSize: 14,
+ },
+ tabBar: {
+ flexDirection: 'row',
+ paddingHorizontal: 16,
+ borderBottomWidth: 1,
+ borderBottomColor: 'rgba(255,255,255,0.1)',
+ },
+ tab: {
+ paddingVertical: 12,
+ marginRight: 24,
+ position: 'relative',
+ },
+ activeTab: {},
+ tabText: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 14,
+ fontWeight: '500',
+ },
+ activeTabText: {
+ color: '#667EEA',
+ },
+ tabIndicator: {
+ position: 'absolute',
+ bottom: 0,
+ left: 0,
+ right: 0,
+ height: 2,
+ backgroundColor: '#667EEA',
+ borderRadius: 1,
+ },
+ listContent: {
+ paddingHorizontal: 16,
+ paddingBottom: 100,
+ },
+ emptyContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: 40,
+ },
+ emptyText: {
+ color: 'rgba(255,255,255,0.6)',
+ fontSize: 16,
+ marginTop: 16,
+ },
+ emptySubtext: {
+ color: 'rgba(255,255,255,0.4)',
+ fontSize: 14,
+ marginTop: 4,
+ textAlign: 'center',
+ },
+});
+
+export default NovelLibrary;
\ No newline at end of file
diff --git a/src/Screens/Novel/Library/index.js b/src/Screens/Novel/Library/index.js
new file mode 100644
index 00000000..e0682fca
--- /dev/null
+++ b/src/Screens/Novel/Library/index.js
@@ -0,0 +1 @@
+export {NovelLibrary} from './NovelLibrary';
\ No newline at end of file
diff --git a/src/Screens/Novel/Reader/Components/ReaderSettings.js b/src/Screens/Novel/Reader/Components/ReaderSettings.js
new file mode 100644
index 00000000..90340d01
--- /dev/null
+++ b/src/Screens/Novel/Reader/Components/ReaderSettings.js
@@ -0,0 +1,326 @@
+import React, {useState} from 'react';
+import {
+ View,
+ Text,
+ StyleSheet,
+ TouchableOpacity,
+ Modal,
+ Pressable,
+ Dimensions,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {useSelector, useDispatch} from 'react-redux';
+
+import {
+ setNovelReaderMode,
+ setNovelReaderTheme,
+ setNovelFontSize,
+ setNovelLineHeight,
+ setNovelFontFamily,
+} from '../../../../Redux/Reducers';
+
+const {width} = Dimensions.get('window');
+
+/**
+ * ReaderSettings Component
+ * Modal for adjusting reader settings
+ */
+export function ReaderSettings({visible, onClose}) {
+ const dispatch = useDispatch();
+
+ const readerMode = useSelector(state => state.data.novelReaderMode || 'text');
+ const readerTheme = useSelector(state => state.data.novelReaderTheme || 'dark');
+ const fontSize = useSelector(state => state.data.novelFontSize || 18);
+ const lineHeight = useSelector(state => state.data.novelLineHeight || 1.6);
+ const fontFamily = useSelector(state => state.data.novelFontFamily || 'serif');
+
+ const themes = [
+ {id: 'dark', label: 'Dark', icon: 'moon'},
+ {id: 'light', label: 'Light', icon: 'sunny'},
+ {id: 'sepia', label: 'Sepia', icon: 'leaf'},
+ ];
+
+ const fonts = [
+ {id: 'serif', label: 'Serif'},
+ {id: 'sans-serif', label: 'Sans'},
+ {id: 'monospace', label: 'Mono'},
+ ];
+
+ const handleModeChange = (mode) => {
+ dispatch(setNovelReaderMode(mode));
+ };
+
+ const handleThemeChange = (theme) => {
+ dispatch(setNovelReaderTheme(theme));
+ };
+
+ const handleFontSizeChange = (delta) => {
+ const newSize = Math.max(12, Math.min(28, fontSize + delta));
+ dispatch(setNovelFontSize(newSize));
+ };
+
+ const handleLineHeightChange = (delta) => {
+ const newHeight = Math.max(1.2, Math.min(2.4, lineHeight + delta));
+ dispatch(setNovelLineHeight(newHeight));
+ };
+
+ const handleFontChange = (font) => {
+ dispatch(setNovelFontFamily(font));
+ };
+
+ return (
+
+
+ {}}>
+
+
+ Reader Settings
+
+
+
+
+
+ {/* Reading Mode */}
+
+ Reading Mode
+
+ handleModeChange('text')}>
+
+
+ Text
+
+
+ handleModeChange('webview')}>
+
+
+ Web
+
+
+
+
+
+ {/* Theme */}
+
+ Theme
+
+ {themes.map((t) => (
+ handleThemeChange(t.id)}>
+
+
+ {t.label}
+
+
+ ))}
+
+
+
+ {/* Font Size */}
+
+ Font Size
+
+ handleFontSizeChange(-2)}>
+
+
+ {fontSize}
+ handleFontSizeChange(2)}>
+
+
+
+
+
+ {/* Line Height */}
+
+ Line Height
+
+ handleLineHeightChange(-0.2)}>
+
+
+ {lineHeight.toFixed(1)}
+ handleLineHeightChange(0.2)}>
+
+
+
+
+
+ {/* Font Family */}
+
+ Font Family
+
+ {fonts.map((f) => (
+ handleFontChange(f.id)}>
+
+ {f.label}
+
+
+ ))}
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ overlay: {
+ flex: 1,
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ justifyContent: 'flex-end',
+ },
+ container: {
+ backgroundColor: '#1a1a2e',
+ borderTopLeftRadius: 20,
+ borderTopRightRadius: 20,
+ paddingHorizontal: 20,
+ paddingTop: 16,
+ },
+ header: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginBottom: 20,
+ },
+ title: {
+ color: '#fff',
+ fontSize: 18,
+ fontWeight: '600',
+ },
+ closeButton: {
+ padding: 4,
+ },
+ section: {
+ marginBottom: 20,
+ },
+ sectionTitle: {
+ color: 'rgba(255,255,255,0.6)',
+ fontSize: 13,
+ marginBottom: 10,
+ },
+ optionRow: {
+ flexDirection: 'row',
+ gap: 10,
+ },
+ modeButton: {
+ flex: 1,
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: 6,
+ paddingVertical: 12,
+ borderRadius: 10,
+ backgroundColor: 'rgba(255,255,255,0.05)',
+ },
+ activeMode: {
+ backgroundColor: 'rgba(102, 126, 234, 0.2)',
+ borderWidth: 1,
+ borderColor: '#667EEA',
+ },
+ modeText: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 14,
+ },
+ activeModeText: {
+ color: '#667EEA',
+ fontWeight: '500',
+ },
+ themeButton: {
+ flex: 1,
+ alignItems: 'center',
+ paddingVertical: 12,
+ borderRadius: 10,
+ backgroundColor: 'rgba(255,255,255,0.05)',
+ gap: 6,
+ },
+ activeTheme: {
+ backgroundColor: 'rgba(102, 126, 234, 0.2)',
+ borderWidth: 1,
+ borderColor: '#667EEA',
+ },
+ themeText: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 12,
+ },
+ activeThemeText: {
+ color: '#667EEA',
+ fontWeight: '500',
+ },
+ stepperRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: 20,
+ },
+ stepperButton: {
+ width: 40,
+ height: 40,
+ borderRadius: 20,
+ backgroundColor: 'rgba(255,255,255,0.1)',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ stepperValue: {
+ color: '#fff',
+ fontSize: 18,
+ fontWeight: '600',
+ minWidth: 50,
+ textAlign: 'center',
+ },
+ fontButton: {
+ flex: 1,
+ alignItems: 'center',
+ paddingVertical: 12,
+ borderRadius: 10,
+ backgroundColor: 'rgba(255,255,255,0.05)',
+ },
+ activeFont: {
+ backgroundColor: 'rgba(102, 126, 234, 0.2)',
+ borderWidth: 1,
+ borderColor: '#667EEA',
+ },
+ fontText: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 14,
+ },
+ activeFontText: {
+ color: '#667EEA',
+ fontWeight: '500',
+ },
+});
+
+export default ReaderSettings;
\ No newline at end of file
diff --git a/src/Screens/Novel/Reader/Components/TextReader.js b/src/Screens/Novel/Reader/Components/TextReader.js
new file mode 100644
index 00000000..e6e92832
--- /dev/null
+++ b/src/Screens/Novel/Reader/Components/TextReader.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+ View,
+ Text,
+ StyleSheet,
+ TouchableOpacity,
+} from 'react-native';
+
+/**
+ * TextReader Component
+ * Displays chapter content in plain text mode with customizable styling
+ */
+export function TextReader({
+ content,
+ title,
+ fontSize = 18,
+ lineHeight = 1.6,
+ fontFamily = 'serif',
+ theme = 'dark',
+ onPress,
+}) {
+ const paragraphs = String(content || '')
+ .split(/\n\s*\n/)
+ .map(paragraph => paragraph.trim())
+ .filter(Boolean);
+
+ const getThemeStyles = () => {
+ switch (theme) {
+ case 'light':
+ return {color: '#1a1a1a'};
+ case 'sepia':
+ return {color: '#5c4b37'};
+ default:
+ return {color: '#e0e0e0'};
+ }
+ };
+
+ const themeStyles = getThemeStyles();
+
+ const getFontFamily = () => {
+ switch (fontFamily) {
+ case 'sans-serif':
+ return 'System';
+ case 'monospace':
+ return 'Courier';
+ default:
+ return 'Georgia';
+ }
+ };
+
+ return (
+
+ {title && (
+
+ {title}
+
+ )}
+
+ {(paragraphs.length > 0 ? paragraphs : [String(content || '')]).map(
+ (paragraph, index) => (
+
+ {paragraph}
+
+ ),
+ )}
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ title: {
+ fontWeight: '700',
+ marginBottom: 24,
+ textAlign: 'center',
+ },
+ content: {
+ textAlign: 'left',
+ },
+ paragraphSpacing: {
+ marginBottom: 20,
+ },
+});
+
+export default TextReader;
diff --git a/src/Screens/Novel/Reader/Components/WTRLabModeSelector.js b/src/Screens/Novel/Reader/Components/WTRLabModeSelector.js
new file mode 100644
index 00000000..7d3e40db
--- /dev/null
+++ b/src/Screens/Novel/Reader/Components/WTRLabModeSelector.js
@@ -0,0 +1,263 @@
+import React from 'react';
+import {
+ View,
+ Text,
+ StyleSheet,
+ TouchableOpacity,
+ Modal,
+ Pressable,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {useSelector, useDispatch} from 'react-redux';
+
+import {setWtrlabReadingMode} from '../../../../Redux/Reducers';
+
+/**
+ * Reading modes for WTR-Lab
+ * - web: Google Web Translation (free, unlimited)
+ * - webplus: Alternative translation service (free, unlimited)
+ * - ai: AI translation (limited to 10 chapters for guests)
+ */
+const READING_MODES = [
+ {
+ id: 'web',
+ label: 'Web',
+ description: 'Google Web Translation',
+ icon: 'globe-outline',
+ recommended: true,
+ },
+ {
+ id: 'webplus',
+ label: 'Web+',
+ description: 'Alternative Translation',
+ icon: 'language-outline',
+ recommended: false,
+ },
+ {
+ id: 'ai',
+ label: 'AI (Beta)',
+ description: 'AI Translation - Limited to 10 chapters for guests',
+ icon: 'sparkles-outline',
+ recommended: false,
+ warning: true,
+ },
+];
+
+/**
+ * WTRLabModeSelector Component
+ * Modal for selecting WTR-Lab reading mode
+ */
+export function WTRLabModeSelector({visible, onClose, onSelect}) {
+ const dispatch = useDispatch();
+ const currentMode = useSelector(state => state.data.wtrlabReadingMode || 'web');
+
+ const handleModeSelect = (modeId) => {
+ dispatch(setWtrlabReadingMode(modeId));
+ if (onSelect) {
+ onSelect(modeId);
+ }
+ onClose();
+ };
+
+ return (
+
+
+ {}}>
+
+
+ Reading Mode
+
+
+
+
+
+
+ Select translation service for this novel
+
+
+
+ {READING_MODES.map((mode) => (
+ handleModeSelect(mode.id)}>
+
+
+
+
+
+
+ {mode.label}
+
+ {mode.recommended && (
+
+ Recommended
+
+ )}
+
+ {mode.description}
+ {mode.warning && (
+
+
+ Guest limit applies
+
+ )}
+
+ {currentMode === mode.id && (
+
+
+
+ )}
+
+ ))}
+
+
+
+
+
+ Reading mode preference is saved and will be used for all WTR-Lab novels
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ overlay: {
+ flex: 1,
+ backgroundColor: 'rgba(0, 0, 0, 0.7)',
+ justifyContent: 'flex-end',
+ },
+ container: {
+ backgroundColor: '#1a1a2e',
+ borderTopLeftRadius: 20,
+ borderTopRightRadius: 20,
+ paddingHorizontal: 20,
+ paddingTop: 20,
+ paddingBottom: 10,
+ },
+ header: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginBottom: 8,
+ },
+ title: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: '#fff',
+ },
+ closeButton: {
+ padding: 4,
+ },
+ subtitle: {
+ fontSize: 14,
+ color: 'rgba(255, 255, 255, 0.6)',
+ marginBottom: 20,
+ },
+ modesContainer: {
+ gap: 12,
+ },
+ modeCard: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ backgroundColor: 'rgba(255, 255, 255, 0.05)',
+ borderRadius: 12,
+ padding: 16,
+ borderWidth: 1,
+ borderColor: 'rgba(255, 255, 255, 0.1)',
+ },
+ activeModeCard: {
+ backgroundColor: 'rgba(102, 126, 234, 0.15)',
+ borderColor: '#667EEA',
+ },
+ modeIconContainer: {
+ width: 44,
+ height: 44,
+ borderRadius: 22,
+ backgroundColor: 'rgba(255, 255, 255, 0.1)',
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginRight: 14,
+ },
+ modeInfo: {
+ flex: 1,
+ },
+ modeLabelRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 8,
+ },
+ modeLabel: {
+ fontSize: 16,
+ fontWeight: '600',
+ color: '#fff',
+ },
+ activeModeLabel: {
+ color: '#667EEA',
+ },
+ recommendedBadge: {
+ backgroundColor: 'rgba(102, 126, 234, 0.2)',
+ paddingHorizontal: 8,
+ paddingVertical: 2,
+ borderRadius: 4,
+ },
+ recommendedText: {
+ fontSize: 10,
+ color: '#667EEA',
+ fontWeight: '600',
+ },
+ modeDescription: {
+ fontSize: 13,
+ color: 'rgba(255, 255, 255, 0.5)',
+ marginTop: 2,
+ },
+ warningContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 4,
+ marginTop: 6,
+ },
+ warningText: {
+ fontSize: 12,
+ color: '#FFA500',
+ },
+ checkmark: {
+ marginLeft: 8,
+ },
+ infoSection: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 8,
+ marginTop: 20,
+ paddingTop: 16,
+ borderTopWidth: 1,
+ borderTopColor: 'rgba(255, 255, 255, 0.1)',
+ },
+ infoText: {
+ flex: 1,
+ fontSize: 12,
+ color: 'rgba(255, 255, 255, 0.5)',
+ },
+});
+
+export default WTRLabModeSelector;
diff --git a/src/Screens/Novel/Reader/Components/WebReader.js b/src/Screens/Novel/Reader/Components/WebReader.js
new file mode 100644
index 00000000..36c58bb5
--- /dev/null
+++ b/src/Screens/Novel/Reader/Components/WebReader.js
@@ -0,0 +1,324 @@
+import React, {useRef, useCallback, useMemo} from 'react';
+import {
+ View,
+ StyleSheet,
+ ActivityIndicator,
+} from 'react-native';
+import {WebView} from 'react-native-webview';
+import {novelAdBlockScript} from '../../../../InkNest-Externals/Screens/Webview/NovelAdBlock';
+import {NovelHostName} from '../../../../Utils/APIs';
+
+export const NOVEL_WEBVIEW_ORIGIN_WHITELIST = [
+ 'http://*',
+ 'https://*',
+ 'about:*',
+ 'data:*',
+];
+
+export const shouldAllowNovelWebViewRequest = request => {
+ const requestUrl = request?.url;
+
+ if (!requestUrl || typeof requestUrl !== 'string') {
+ return false;
+ }
+
+ return (
+ requestUrl.startsWith('http://') ||
+ requestUrl.startsWith('https://') ||
+ requestUrl.startsWith('about:') ||
+ requestUrl.startsWith('data:')
+ );
+};
+
+const escapeHtml = value =>
+ String(value || '')
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+
+export const buildNovelReaderHtmlDocument = ({
+ title,
+ content,
+ paragraphs,
+ theme = 'dark',
+}) => {
+ const paragraphList =
+ Array.isArray(paragraphs) && paragraphs.length > 0
+ ? paragraphs
+ : String(content || '')
+ .split(/\n\s*\n/)
+ .map(paragraph => paragraph.trim())
+ .filter(Boolean);
+
+ const colors =
+ theme === 'light'
+ ? {
+ background: '#ffffff',
+ text: '#1a1a1a',
+ muted: '#4b5563',
+ }
+ : theme === 'sepia'
+ ? {
+ background: '#f4ecd8',
+ text: '#5c4b37',
+ muted: '#7a6650',
+ }
+ : {
+ background: '#0a0a14',
+ text: '#e0e0e0',
+ muted: '#a8adc7',
+ };
+
+ const htmlParagraphs = paragraphList
+ .map(paragraph => `${escapeHtml(paragraph)}
`)
+ .join('');
+
+ return `
+
+
+
+
+
+
+
+ ${title ? `${escapeHtml(title)}
` : ''}
+ ${
+ htmlParagraphs ||
+ `${escapeHtml('No chapter content available.')}
`
+ }
+
+`;
+};
+
+export const updateQueryParam = (url, key, value) => {
+ const [withoutHash, hash = ''] = url.split('#');
+ const [pathname, queryString = ''] = withoutHash.split('?');
+
+ const entries = queryString
+ .split('&')
+ .filter(Boolean)
+ .map(pair => {
+ const [rawParamKey, ...rest] = pair.split('=');
+ return [rawParamKey, rest.join('=')];
+ })
+ .filter(([paramKey]) => paramKey !== key);
+
+ if (value !== null && value !== undefined && value !== '') {
+ entries.push([key, encodeURIComponent(value)]);
+ }
+
+ const nextQuery = entries
+ .map(([paramKey, paramValue]) =>
+ paramValue ? `${paramKey}=${paramValue}` : paramKey,
+ )
+ .join('&');
+
+ return `${pathname}${nextQuery ? `?${nextQuery}` : ''}${hash ? `#${hash}` : ''}`;
+};
+
+export const buildNovelReaderUrl = ({
+ chapterLink,
+ hostKey = 'novelfire',
+ service,
+}) => {
+ if (!chapterLink) {
+ return null;
+ }
+
+ const baseUrl =
+ NovelHostName[hostKey] || NovelHostName.novelfire || 'https://novelfire.net';
+ const resolvedUrl =
+ chapterLink.startsWith('http://') || chapterLink.startsWith('https://')
+ ? chapterLink
+ : chapterLink.startsWith('/')
+ ? `${baseUrl}${chapterLink}`
+ : `${baseUrl}/${chapterLink}`;
+
+ if (!service || !resolvedUrl.includes('wtr-lab.com')) {
+ return resolvedUrl;
+ }
+
+ if (service === 'ai') {
+ return updateQueryParam(resolvedUrl, 'service', null);
+ }
+
+ return updateQueryParam(resolvedUrl, 'service', service);
+};
+
+/**
+ * WebReader Component
+ * Displays chapter content in WebView mode with aggressive ad-blocking
+ */
+export function WebReader({
+ chapterLink,
+ theme = 'dark',
+ hostKey = 'novelfire',
+ service,
+ htmlTitle,
+ htmlContent,
+ htmlParagraphs,
+ onScroll,
+ onLoadStart,
+ onLoadEnd,
+}) {
+ const webViewRef = useRef(null);
+ const isHtmlSource =
+ Boolean(htmlContent) ||
+ (Array.isArray(htmlParagraphs) && htmlParagraphs.length > 0);
+ const shouldUseRawWTRLabWebView =
+ !isHtmlSource && hostKey === 'wtrlab' && service !== 'ai';
+
+ // Construct full URL from relative path
+ const fullUrl = useMemo(() => {
+ return buildNovelReaderUrl({chapterLink, hostKey, service});
+ }, [chapterLink, hostKey, service]);
+ const htmlDocument = useMemo(() => {
+ if (!isHtmlSource) {
+ return null;
+ }
+
+ return buildNovelReaderHtmlDocument({
+ title: htmlTitle,
+ content: htmlContent,
+ paragraphs: htmlParagraphs,
+ theme,
+ });
+ }, [htmlContent, htmlParagraphs, htmlTitle, isHtmlSource, theme]);
+
+ const getThemeCSS = useCallback(() => {
+ switch (theme) {
+ case 'light':
+ return `
+ body {
+ background-color: #ffffff !important;
+ color: #1a1a1a !important;
+ }
+ `;
+ case 'sepia':
+ return `
+ body {
+ background-color: #f4ecd8 !important;
+ color: #5c4b37 !important;
+ }
+ `;
+ default:
+ return `
+ body {
+ background-color: #0a0a14 !important;
+ color: #e0e0e0 !important;
+ }
+ `;
+ }
+ }, [theme]);
+
+ const injectedJavaScript = useCallback(() => {
+ return novelAdBlockScript(getThemeCSS());
+ }, [getThemeCSS]);
+
+ const handleMessage = useCallback((event) => {
+ try {
+ const data = JSON.parse(event.nativeEvent.data);
+ if (data.type === 'loaded') {
+ onLoadEnd?.();
+ } else if (data.type === 'adBlockLog') {
+ // Optional: log ad blocking activity for debugging
+ console.log('[AdBlock]', data.message);
+ }
+ } catch (e) {
+ // Ignore parse errors
+ }
+ }, [onLoadEnd]);
+
+ return (
+
+ onLoadStart?.()}
+ onLoadEnd={() => onLoadEnd?.()}
+ startInLoadingState={true}
+ renderLoading={() => (
+
+
+
+ )}
+ showsVerticalScrollIndicator={false}
+ bounces={false}
+ overScrollMode="never"
+ cacheEnabled={true}
+ domStorageEnabled={true}
+ javaScriptEnabled={true}
+ mixedContentMode="compatibility"
+ thirdPartyCookiesEnabled={hostKey === 'wtrlab'}
+ sharedCookiesEnabled={hostKey === 'wtrlab'}
+ setSupportMultipleWindows={hostKey === 'wtrlab'}
+ />
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ minHeight: 400,
+ },
+ webView: {
+ flex: 1,
+ backgroundColor: 'transparent',
+ },
+ loadingContainer: {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#0a0a14',
+ },
+});
+
+export default WebReader;
diff --git a/src/Screens/Novel/Reader/NovelReader.js b/src/Screens/Novel/Reader/NovelReader.js
new file mode 100644
index 00000000..8ee03b42
--- /dev/null
+++ b/src/Screens/Novel/Reader/NovelReader.js
@@ -0,0 +1,919 @@
+import React, {useState, useCallback, useRef, useEffect} from 'react';
+import {
+ View,
+ StyleSheet,
+ Text,
+ ScrollView,
+ TouchableOpacity,
+ ActivityIndicator,
+ StatusBar,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useNavigation, useRoute} from '@react-navigation/native';
+import {useSelector, useDispatch} from 'react-redux';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import crashlytics from '@react-native-firebase/crashlytics';
+import {WebView} from 'react-native-webview';
+
+import {TextReader} from './Components/TextReader';
+import {
+ WebReader,
+ buildNovelReaderUrl,
+ NOVEL_WEBVIEW_ORIGIN_WHITELIST,
+ shouldAllowNovelWebViewRequest,
+} from './Components/WebReader';
+import {ReaderSettings} from './Components/ReaderSettings';
+import {WTRLabModeSelector} from './Components/WTRLabModeSelector';
+import {getNovelChapter, getNovelHostKeyFromLink} from '../APIs';
+import {NAVIGATION} from '../../../Constants';
+import {
+ updateNovelHistory,
+ updateNovelChapterProgress,
+} from '../../../Redux/Reducers';
+
+const SCROLL_PROGRESS_THRESHOLD = 95; // Mark as completed at 95%
+
+// Helper function to extract chapter number from link
+const extractChapterNumber = link => {
+ if (!link) {
+ return null;
+ }
+ const match = link.match(/chapter-(\d+)/i);
+ return match ? parseInt(match[1], 10) : null;
+};
+
+const normalizeChapterLink = link => {
+ if (typeof link !== 'string') {
+ return null;
+ }
+
+ return link.trim().replace(/[?#].*$/, '').replace(/\/+$/, '');
+};
+
+const replaceChapterNumberInLink = (link, chapterNumber) => {
+ if (!link || !chapterNumber || chapterNumber < 1) {
+ return null;
+ }
+
+ return link.replace(/chapter-\d+/i, `chapter-${chapterNumber}`);
+};
+
+const getNovelChapterEntries = novel => {
+ const chapters = novel?.chapterList || novel?.chapters || [];
+ return Array.isArray(chapters) ? chapters : [];
+};
+
+export const buildWTRLabTextFallbackContent = ({novel, chapter, chapterLink}) => {
+ const currentNumber = chapter?.number || extractChapterNumber(chapterLink);
+ const chapterEntries = getNovelChapterEntries(novel);
+ const normalizedCurrentLink = normalizeChapterLink(chapterLink);
+
+ let matchedChapter = null;
+ let prevChapter = null;
+ let nextChapter = null;
+
+ if (chapterEntries.length > 0) {
+ const currentIndex = chapterEntries.findIndex(entry => {
+ const entryLink = normalizeChapterLink(entry?.link);
+
+ if (entryLink && normalizedCurrentLink && entryLink === normalizedCurrentLink) {
+ return true;
+ }
+
+ if (currentNumber && Number(entry?.number) === Number(currentNumber)) {
+ return true;
+ }
+
+ return false;
+ });
+
+ if (currentIndex >= 0) {
+ matchedChapter = chapterEntries[currentIndex];
+ prevChapter = chapterEntries[currentIndex - 1]?.link || null;
+ nextChapter = chapterEntries[currentIndex + 1]?.link || null;
+ }
+ }
+
+ const totalChapters =
+ chapterEntries.length ||
+ Number(novel?.chapters) ||
+ Number(novel?.chapterCount) ||
+ null;
+
+ if (!prevChapter && currentNumber && currentNumber > 1) {
+ prevChapter = replaceChapterNumberInLink(chapterLink, currentNumber - 1);
+ }
+
+ if (!nextChapter && currentNumber) {
+ if (!totalChapters || currentNumber < totalChapters) {
+ nextChapter = replaceChapterNumberInLink(chapterLink, currentNumber + 1);
+ }
+ }
+
+ return {
+ title:
+ chapter?.title ||
+ matchedChapter?.title ||
+ (currentNumber ? `Chapter ${currentNumber}` : 'Chapter'),
+ paragraphs: [],
+ text: '',
+ prevChapter,
+ nextChapter,
+ link: chapterLink,
+ hostKey: 'wtrlab',
+ requestedReadingMode: null,
+ activeReadingMode: null,
+ };
+};
+
+const WTR_LAB_TEXT_EXTRACTION_SCRIPT = `
+ (function() {
+ function send(type, payload) {
+ window.ReactNativeWebView.postMessage(JSON.stringify({
+ type: type,
+ ...payload,
+ }));
+ }
+
+ function getCurrentChapterContainer() {
+ var match = window.location.pathname.match(/chapter-(\\d+)/i);
+ var chapterNumber = match ? match[1] : null;
+
+ if (chapterNumber) {
+ var scopedContainer = document.querySelector('#chapter-' + chapterNumber);
+ if (scopedContainer) {
+ return scopedContainer;
+ }
+ }
+
+ return document.querySelector('.chapter-container');
+ }
+
+ function getParagraphs() {
+ var container = getCurrentChapterContainer();
+ if (!container) {
+ return [];
+ }
+
+ return Array.from(container.querySelectorAll('.chapter-body .pr-line-text'))
+ .map(node => (node.innerText || '').trim())
+ .filter(Boolean);
+ }
+
+ function extract() {
+ var bodyText = document.body ? (document.body.innerText || '') : '';
+
+ if (
+ bodyText.includes('undefined - Error') ||
+ bodyText.includes('An error occurred')
+ ) {
+ send('wtrlab_text_error', {
+ message: 'WTR-Lab returned an error page for this reading mode.',
+ });
+ return true;
+ }
+
+ var paragraphs = getParagraphs();
+ if (paragraphs.length >= 5) {
+ var title = paragraphs[0] || '';
+ var contentParagraphs = paragraphs.slice();
+
+ while (title && contentParagraphs[0] === title) {
+ contentParagraphs = contentParagraphs.slice(1);
+ }
+
+ send('wtrlab_text_content', {
+ title: title,
+ paragraphs: contentParagraphs,
+ text: contentParagraphs.join('\\n\\n'),
+ });
+ return true;
+ }
+
+ return false;
+ }
+
+ var attempts = 0;
+ var interval = setInterval(function() {
+ attempts += 1;
+ if (extract() || attempts >= 40) {
+ clearInterval(interval);
+ if (attempts >= 40) {
+ send('wtrlab_text_timeout', {
+ message: 'Timed out waiting for rendered WTR-Lab text.',
+ });
+ }
+ }
+ }, 500);
+
+ true;
+ })();
+`;
+
+export function NovelReader() {
+ const navigation = useNavigation();
+ const route = useRoute();
+ const dispatch = useDispatch();
+ const scrollViewRef = useRef(null);
+ const contentHeightRef = useRef(0);
+ const scrollProgressRef = useRef(0);
+ const isRestoringScrollRef = useRef(false);
+ const restoredContentKeyRef = useRef(null);
+
+ const {novel, chapter, chapterLink} = route.params || {};
+
+ const [content, setContent] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [showSettings, setShowSettings] = useState(false);
+ const [showHeader, setShowHeader] = useState(true);
+ const [restoringProgress, setRestoringProgress] = useState(false);
+ const [showModeSelector, setShowModeSelector] = useState(false);
+ const [extractedWTRLabText, setExtractedWTRLabText] = useState(null);
+ const [wtrLabExtractionError, setWtrLabExtractionError] = useState(null);
+
+ const readerMode = useSelector(state => state.data.novelReaderMode || 'text');
+ const readerTheme = useSelector(
+ state => state.data.novelReaderTheme || 'dark',
+ );
+ const fontSize = useSelector(state => state.data.novelFontSize || 18);
+ const lineHeight = useSelector(state => state.data.novelLineHeight || 1.6);
+ const fontFamily = useSelector(
+ state => state.data.novelFontFamily || 'serif',
+ );
+ const wtrlabReadingMode = useSelector(
+ state => state.data.wtrlabReadingMode || 'web',
+ );
+
+ // Detect if this is a WTR-Lab chapter
+ const hostKey = getNovelHostKeyFromLink(chapterLink);
+ const isWTRLab = hostKey === 'wtrlab';
+ const shouldUseWebReader = readerMode === 'webview';
+ const shouldUseWTRLabFallbackMetadata =
+ isWTRLab && wtrlabReadingMode !== 'ai';
+ const shouldExtractWTRLabText =
+ shouldUseWTRLabFallbackMetadata && !shouldUseWebReader;
+
+ // Get saved chapter progress from Redux
+ const novelHistory = useSelector(
+ state => state.data.NovelHistory?.[novel?.link],
+ );
+ const savedProgress = novelHistory?.chapterProgress?.[chapterLink];
+
+ // Use ref to avoid re-triggering fetch when progress updates
+ const savedProgressRef = useRef(savedProgress);
+ savedProgressRef.current = savedProgress;
+
+ useEffect(() => {
+ const fetchChapter = async () => {
+ if (!chapterLink) {
+ return;
+ }
+
+ try {
+ setLoading(true);
+ setError(null);
+ setExtractedWTRLabText(null);
+ setWtrLabExtractionError(null);
+ const data = shouldUseWTRLabFallbackMetadata
+ ? buildWTRLabTextFallbackContent({novel, chapter, chapterLink})
+ : await getNovelChapter(
+ chapterLink,
+ hostKey,
+ isWTRLab ? wtrlabReadingMode : undefined,
+ );
+ setContent(data);
+
+ // Extract chapter number from link if not provided
+ const chapterNumber =
+ chapter?.number || extractChapterNumber(chapterLink);
+ const chapterTitle = chapter?.title || data?.title;
+
+ // Get saved scroll progress from ref to avoid dependency issues
+ const savedScrollProgress =
+ savedProgressRef.current?.scrollProgress || 0;
+
+ // Update reading history with current progress
+ dispatch(
+ updateNovelHistory({
+ novelLink: novel?.link,
+ chapterLink,
+ chapterNumber,
+ chapterTitle,
+ scrollProgress: savedScrollProgress,
+ }),
+ );
+ } catch (err) {
+ console.error('Error fetching chapter:', err);
+ crashlytics().recordError(err);
+ setError('Failed to load chapter.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchChapter();
+ }, [
+ chapterLink,
+ novel,
+ chapter,
+ dispatch,
+ hostKey,
+ isWTRLab,
+ shouldUseWTRLabFallbackMetadata,
+ wtrlabReadingMode,
+ ]);
+
+ const handleWTRLabTextMessage = useCallback(
+ event => {
+ try {
+ const data = JSON.parse(event.nativeEvent.data);
+
+ if (data.type === 'wtrlab_text_content') {
+ setExtractedWTRLabText({
+ title: data.title,
+ paragraphs: Array.isArray(data.paragraphs) ? data.paragraphs : [],
+ text: typeof data.text === 'string' ? data.text : '',
+ });
+ setWtrLabExtractionError(null);
+ return;
+ }
+
+ if (
+ data.type === 'wtrlab_text_error' ||
+ data.type === 'wtrlab_text_timeout'
+ ) {
+ setWtrLabExtractionError(
+ data.message ||
+ 'Failed to load the selected WTR-Lab mode in text view.',
+ );
+ }
+ } catch (parseError) {
+ console.log('[NovelReader] Failed to parse WTR-Lab text message');
+ }
+ },
+ [],
+ );
+
+ const resolvedContent =
+ shouldExtractWTRLabText && extractedWTRLabText?.text
+ ? {
+ ...(content || {}),
+ title: extractedWTRLabText.title || content?.title,
+ paragraphs: extractedWTRLabText.paragraphs,
+ text: extractedWTRLabText.text,
+ }
+ : shouldExtractWTRLabText
+ ? {
+ ...(content || {}),
+ paragraphs: [],
+ text: '',
+ }
+ : content;
+
+ const isWaitingForWTRLabText =
+ shouldExtractWTRLabText &&
+ !extractedWTRLabText?.text &&
+ !wtrLabExtractionError;
+
+ const resolvedTextContent = resolvedContent?.text || resolvedContent?.content || '';
+ const restorationContentKey = [
+ chapterLink || '',
+ readerMode,
+ shouldExtractWTRLabText ? wtrlabReadingMode : 'default',
+ resolvedContent?.title || '',
+ resolvedTextContent.length,
+ ].join('|');
+
+ useEffect(() => {
+ restoredContentKeyRef.current = null;
+ isRestoringScrollRef.current = false;
+ setRestoringProgress(false);
+ contentHeightRef.current = 0;
+ }, [chapterLink, readerMode, wtrlabReadingMode]);
+
+ // Restore scroll position after content loads
+ useEffect(() => {
+ const progress = savedProgressRef.current?.scrollProgress;
+ if (
+ loading ||
+ isWaitingForWTRLabText ||
+ !resolvedContent ||
+ !progress ||
+ shouldUseWebReader
+ ) {
+ return;
+ }
+
+ // Only restore if progress is between 1-94%
+ if (progress <= 0 || progress >= SCROLL_PROGRESS_THRESHOLD) {
+ return;
+ }
+
+ if (restoredContentKeyRef.current === restorationContentKey) {
+ return;
+ }
+
+ restoredContentKeyRef.current = restorationContentKey;
+
+ isRestoringScrollRef.current = true;
+ setRestoringProgress(true);
+
+ // Wait for content to be laid out
+ const attemptScroll = (attempts = 0) => {
+ if (attempts > 10) {
+ // Give up after 10 attempts
+ isRestoringScrollRef.current = false;
+ setRestoringProgress(false);
+ return;
+ }
+
+ setTimeout(() => {
+ if (contentHeightRef.current > 0 && scrollViewRef.current) {
+ const scrollY = (contentHeightRef.current * progress) / 100;
+ scrollViewRef.current.scrollTo({y: scrollY, animated: false});
+
+ setTimeout(() => {
+ isRestoringScrollRef.current = false;
+ setRestoringProgress(false);
+ }, 100);
+ } else {
+ // Content not ready yet, try again
+ attemptScroll(attempts + 1);
+ }
+ }, 100);
+ };
+
+ attemptScroll();
+ }, [
+ loading,
+ isWaitingForWTRLabText,
+ resolvedContent,
+ restorationContentKey,
+ shouldUseWebReader,
+ ]);
+
+ // Handle scroll events to track progress
+ const handleScroll = useCallback(
+ event => {
+ if (isRestoringScrollRef.current || shouldUseWebReader) {
+ return;
+ }
+
+ const {contentOffset, contentSize, layoutMeasurement} = event.nativeEvent;
+ contentHeightRef.current = contentSize.height;
+
+ // Calculate scroll percentage
+ const maxScroll = contentSize.height - layoutMeasurement.height;
+ if (maxScroll <= 0) {
+ return;
+ }
+
+ const currentScroll = contentOffset.y;
+ const scrollPercentage = Math.min(
+ 100,
+ Math.max(0, (currentScroll / maxScroll) * 100),
+ );
+
+ // Only update if progress changed significantly (avoid too many updates)
+ if (Math.abs(scrollPercentage - scrollProgressRef.current) >= 1) {
+ scrollProgressRef.current = scrollPercentage;
+
+ // Update Redux with progress (debounced via the threshold check)
+ dispatch(
+ updateNovelChapterProgress({
+ novelLink: novel?.link,
+ chapterLink,
+ scrollProgress: scrollPercentage,
+ }),
+ );
+ }
+ },
+ [dispatch, novel, chapterLink, shouldUseWebReader],
+ );
+
+ const handlePrevChapter = useCallback(() => {
+ if (content?.prevChapter) {
+ // Calculate chapter number: use current number +/- 1, or extract from link
+ const currentNumber =
+ chapter?.number || extractChapterNumber(chapterLink);
+ const prevNumber = currentNumber
+ ? currentNumber - 1
+ : extractChapterNumber(content.prevChapter);
+
+ navigation.replace(NAVIGATION.novelReader, {
+ novel,
+ chapter: {
+ link: content.prevChapter,
+ number: prevNumber,
+ },
+ chapterLink: content.prevChapter,
+ });
+ }
+ }, [content, novel, chapter, chapterLink, navigation]);
+
+ const handleNextChapter = useCallback(() => {
+ if (content?.nextChapter) {
+ // Calculate chapter number: use current number + 1, or extract from link
+ const currentNumber =
+ chapter?.number || extractChapterNumber(chapterLink);
+ const nextNumber = currentNumber
+ ? currentNumber + 1
+ : extractChapterNumber(content.nextChapter);
+
+ navigation.replace(NAVIGATION.novelReader, {
+ novel,
+ chapter: {
+ link: content.nextChapter,
+ number: nextNumber,
+ },
+ chapterLink: content.nextChapter,
+ });
+ }
+ }, [content, novel, chapter, chapterLink, navigation]);
+
+ const handleToggleHeader = useCallback(() => {
+ setShowHeader(prev => !prev);
+ }, []);
+
+ const handleToggleSettings = useCallback(() => {
+ setShowSettings(prev => !prev);
+ }, []);
+
+ const getThemeColors = useCallback(() => {
+ switch (readerTheme) {
+ case 'light':
+ return {bg: '#ffffff', text: '#1a1a1a'};
+ case 'sepia':
+ return {bg: '#f4ecd8', text: '#5c4b37'};
+ default:
+ return {bg: '#0a0a14', text: '#e0e0e0'};
+ }
+ }, [readerTheme]);
+
+ const themeColors = getThemeColors();
+
+ if (loading) {
+ return (
+
+
+
+ Loading chapter...
+
+
+ );
+ }
+
+ if (error || wtrLabExtractionError) {
+ return (
+
+
+ {error || wtrLabExtractionError}
+
+ navigation.goBack()}>
+ Go Back
+
+
+ );
+ }
+
+ return (
+
+
+
+ {showHeader && (
+
+
+ navigation.goBack()}>
+
+
+
+
+ {novel?.title}
+
+
+ Chapter{' '}
+ {chapter?.number ||
+ extractChapterNumber(chapterLink) ||
+ content?.title}
+
+
+
+
+
+ {isWTRLab && (
+ setShowModeSelector(true)}>
+
+
+ )}
+
+
+ )}
+
+ {isWaitingForWTRLabText && (
+
+
+
+ Loading chapter...
+
+
+ )}
+
+ {/* Restoring progress overlay */}
+ {restoringProgress && (
+
+
+
+ Restoring your position...
+
+
+ )}
+
+ {!shouldUseWebReader ? (
+ {
+ contentHeightRef.current = height;
+ }}>
+
+
+ ) : (
+
+ )}
+
+ {showHeader && (
+
+
+
+
+
+ Prev
+
+
+
+ navigation.navigate(NAVIGATION.novelDetails, {novel})
+ }>
+
+
+
+
+ Next
+
+
+
+
+
+ )}
+
+ {showSettings && (
+ setShowSettings(false)}
+ />
+ )}
+ {showModeSelector && isWTRLab && (
+ setShowModeSelector(false)}
+ onSelect={() => {
+ // Chapter will reload automatically due to wtrlabReadingMode dependency
+ }}
+ />
+ )}
+ {shouldExtractWTRLabText &&
+ !extractedWTRLabText?.text &&
+ !wtrLabExtractionError && (
+ {
+ console.log('[NovelReader] WTR-Lab hidden extractor load started');
+ }}
+ onLoadEnd={() => {
+ console.log('[NovelReader] WTR-Lab hidden extractor load ended');
+ }}
+ onError={event => {
+ console.log(
+ '[NovelReader] WTR-Lab hidden extractor error:',
+ event?.nativeEvent,
+ );
+ }}
+ javaScriptEnabled={true}
+ domStorageEnabled={true}
+ cacheEnabled={true}
+ setSupportMultipleWindows={false}
+ javaScriptCanOpenWindowsAutomatically={false}
+ style={styles.hiddenWebView}
+ />
+ )}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ loadingContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ hiddenWebView: {
+ width: 0,
+ height: 0,
+ opacity: 0,
+ },
+ extractionOverlay: {
+ ...StyleSheet.absoluteFillObject,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'rgba(10, 10, 20, 0.92)',
+ zIndex: 999,
+ },
+ loadingText: {
+ fontSize: 14,
+ marginTop: 12,
+ },
+ errorContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: 20,
+ },
+ errorText: {
+ fontSize: 16,
+ textAlign: 'center',
+ },
+ retryButton: {
+ marginTop: 16,
+ paddingVertical: 10,
+ paddingHorizontal: 20,
+ backgroundColor: '#667EEA',
+ borderRadius: 8,
+ },
+ retryText: {
+ color: '#fff',
+ fontSize: 14,
+ fontWeight: '500',
+ },
+ headerContainer: {
+ backgroundColor: 'transparent',
+ },
+ header: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingHorizontal: 12,
+ paddingVertical: 8,
+ },
+ headerButton: {
+ padding: 8,
+ },
+ headerInfo: {
+ flex: 1,
+ marginHorizontal: 8,
+ },
+ headerTitle: {
+ fontSize: 14,
+ fontWeight: '600',
+ },
+ headerSubtitle: {
+ fontSize: 12,
+ opacity: 0.7,
+ marginTop: 2,
+ },
+ content: {
+ flex: 1,
+ },
+ contentContainer: {
+ padding: 16,
+ paddingBottom: 100,
+ },
+ footerContainer: {
+ backgroundColor: 'transparent',
+ },
+ footer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ paddingHorizontal: 16,
+ paddingVertical: 12,
+ },
+ navButton: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 4,
+ padding: 8,
+ },
+ navButtonDisabled: {
+ opacity: 0.3,
+ },
+ navText: {
+ fontSize: 14,
+ fontWeight: '500',
+ },
+ chapterListButton: {
+ padding: 8,
+ },
+ restoringOverlay: {
+ ...StyleSheet.absoluteFillObject,
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
+ justifyContent: 'center',
+ alignItems: 'center',
+ zIndex: 1000,
+ },
+ restoringContent: {
+ alignItems: 'center',
+ },
+ restoringText: {
+ color: '#fff',
+ fontSize: 14,
+ marginTop: 12,
+ fontWeight: '500',
+ },
+});
+
+export default NovelReader;
diff --git a/src/Screens/Novel/Reader/index.js b/src/Screens/Novel/Reader/index.js
new file mode 100644
index 00000000..104da447
--- /dev/null
+++ b/src/Screens/Novel/Reader/index.js
@@ -0,0 +1 @@
+export {NovelReader} from './NovelReader';
\ No newline at end of file
diff --git a/src/Screens/Novel/Search/NovelSearch.js b/src/Screens/Novel/Search/NovelSearch.js
new file mode 100644
index 00000000..53fd580e
--- /dev/null
+++ b/src/Screens/Novel/Search/NovelSearch.js
@@ -0,0 +1,378 @@
+import React, {useState, useCallback} from 'react';
+import {
+ View,
+ StyleSheet,
+ Text,
+ TextInput,
+ FlatList,
+ TouchableOpacity,
+ ActivityIndicator,
+ Keyboard,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useNavigation} from '@react-navigation/native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import crashlytics from '@react-native-firebase/crashlytics';
+
+import {NovelCard} from '../Components/NovelCard';
+import {searchNovels} from '../APIs';
+import {NAVIGATION} from '../../../Constants';
+
+const GENRES = [
+ 'Action', 'Adventure', 'Fantasy', 'Romance', 'Martial Arts',
+ 'Sci-fi', 'Supernatural', 'Slice of Life', 'Horror', 'Comedy',
+ 'Drama', 'Mystery', 'Psychological', 'School Life', 'Seinen',
+ 'Shoujo', 'Shounen', 'Xianxia', 'Xuanhuan',
+];
+
+export function NovelSearch() {
+ const navigation = useNavigation();
+
+ const [query, setQuery] = useState('');
+ const [results, setResults] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [loadingMore, setLoadingMore] = useState(false);
+ const [error, setError] = useState(null);
+ const [searchHistory, setSearchHistory] = useState([]);
+ const [showHistory, setShowHistory] = useState(true);
+ const [page, setPage] = useState(1);
+ const [hasMore, setHasMore] = useState(true);
+
+ const handleSearch = useCallback(async (searchQuery = query) => {
+ if (!searchQuery.trim()) {
+ return;
+ }
+
+ try {
+ setLoading(true);
+ setError(null);
+ setShowHistory(false);
+ setPage(1);
+ setHasMore(true);
+ Keyboard.dismiss();
+
+ const data = await searchNovels(searchQuery, 1);
+ setResults(data || []);
+
+ // Add to search history
+ setSearchHistory(prev => {
+ const newHistory = [searchQuery, ...prev.filter(h => h !== searchQuery)].slice(0, 10);
+ return newHistory;
+ });
+
+ crashlytics().log(`Novel search: ${searchQuery}`);
+ } catch (err) {
+ console.error('Error searching novels:', err);
+ crashlytics().recordError(err);
+ setError('Failed to search. Please try again.');
+ } finally {
+ setLoading(false);
+ }
+ }, [query]);
+
+ const loadMore = useCallback(async () => {
+ if (loadingMore || !hasMore || !query.trim()) {
+ return;
+ }
+
+ try {
+ setLoadingMore(true);
+ const nextPage = page + 1;
+ const data = await searchNovels(query, nextPage);
+
+ if (data && data.length > 0) {
+ // Filter out duplicates
+ setResults(prev => {
+ const existingLinks = new Set(prev.map(n => n.link));
+ const newNovels = data.filter(n => !existingLinks.has(n.link));
+ return [...prev, ...newNovels];
+ });
+ setPage(nextPage);
+ } else {
+ setHasMore(false);
+ }
+ } catch (err) {
+ console.error('Error loading more novels:', err);
+ } finally {
+ setLoadingMore(false);
+ }
+ }, [loadingMore, hasMore, query, page]);
+
+ const handleNovelPress = useCallback((novel) => {
+ navigation.navigate(NAVIGATION.novelDetails, {novel});
+ }, [navigation]);
+
+ const handleGenrePress = useCallback((genre) => {
+ navigation.navigate(NAVIGATION.novelViewAll, {
+ title: genre,
+ genre,
+ });
+ }, [navigation]);
+
+ const handleHistoryPress = useCallback((historyQuery) => {
+ setQuery(historyQuery);
+ handleSearch(historyQuery);
+ }, [handleSearch]);
+
+ const clearHistory = useCallback(() => {
+ setSearchHistory([]);
+ }, []);
+
+ const renderNovel = useCallback(({item}) => (
+
+ ), [handleNovelPress]);
+
+ const renderGenre = useCallback((genre) => (
+ handleGenrePress(genre)}>
+ {genre}
+
+ ), [handleGenrePress]);
+
+ const renderHistoryItem = useCallback(({item}) => (
+ handleHistoryPress(item)}>
+
+ {item}
+
+ ), [handleHistoryPress]);
+
+ return (
+
+
+
+
+ handleSearch()}
+ returnKeyType="search"
+ autoCorrect={false}
+ autoCapitalize="none"
+ />
+ {query.length > 0 && (
+ setQuery('')}>
+
+
+ )}
+
+
+
+ {showHistory && searchHistory.length > 0 && (
+
+
+ Recent Searches
+
+ Clear
+
+
+ `${item}-${index}`}
+ renderItem={renderHistoryItem}
+ />
+
+ )}
+
+ {showHistory && (
+
+ Browse by Genre
+
+ {GENRES.map(renderGenre)}
+
+
+ )}
+
+ {loading && (
+
+
+ Searching...
+
+ )}
+
+ {error && (
+
+ {error}
+ handleSearch()}>
+ Retry
+
+
+ )}
+
+ {!loading && !error && !showHistory && results.length === 0 && (
+
+
+ No novels found
+ Try a different search term
+
+ )}
+
+ {!loading && !error && results.length > 0 && (
+ `${item.link || index}`}
+ renderItem={renderNovel}
+ numColumns={3}
+ showsVerticalScrollIndicator={false}
+ contentContainerStyle={styles.resultsList}
+ columnWrapperStyle={styles.resultsRow}
+ onEndReached={loadMore}
+ onEndReachedThreshold={0.5}
+ ListFooterComponent={loadingMore ? (
+
+
+
+ ) : null}
+ />
+ )}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#0a0a14',
+ },
+ searchContainer: {
+ paddingHorizontal: 16,
+ paddingVertical: 12,
+ },
+ searchInputContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ backgroundColor: 'rgba(255,255,255,0.08)',
+ borderRadius: 12,
+ paddingHorizontal: 14,
+ paddingVertical: 10,
+ gap: 10,
+ },
+ searchInput: {
+ flex: 1,
+ color: '#fff',
+ fontSize: 15,
+ },
+ historySection: {
+ paddingHorizontal: 16,
+ marginBottom: 20,
+ },
+ historyHeader: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginBottom: 12,
+ },
+ sectionTitle: {
+ color: '#fff',
+ fontSize: 16,
+ fontWeight: '600',
+ },
+ clearText: {
+ color: '#667EEA',
+ fontSize: 14,
+ },
+ historyItem: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: 10,
+ paddingVertical: 10,
+ borderBottomWidth: 1,
+ borderBottomColor: 'rgba(255,255,255,0.05)',
+ },
+ historyText: {
+ color: 'rgba(255,255,255,0.7)',
+ fontSize: 14,
+ },
+ genresSection: {
+ paddingHorizontal: 16,
+ flex: 1,
+ },
+ genresGrid: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ gap: 8,
+ marginTop: 12,
+ },
+ genreTag: {
+ backgroundColor: 'rgba(102, 126, 234, 0.15)',
+ paddingHorizontal: 14,
+ paddingVertical: 8,
+ borderRadius: 20,
+ },
+ genreText: {
+ color: '#667EEA',
+ fontSize: 13,
+ fontWeight: '500',
+ },
+ loadingContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ loadingText: {
+ color: 'rgba(255,255,255,0.6)',
+ fontSize: 14,
+ marginTop: 12,
+ },
+ errorContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: 20,
+ },
+ errorText: {
+ color: 'rgba(255,255,255,0.7)',
+ fontSize: 14,
+ textAlign: 'center',
+ },
+ retryText: {
+ color: '#667EEA',
+ fontSize: 14,
+ marginTop: 12,
+ fontWeight: '500',
+ },
+ emptyContainer: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: 40,
+ },
+ emptyText: {
+ color: 'rgba(255,255,255,0.6)',
+ fontSize: 16,
+ marginTop: 16,
+ },
+ emptySubtext: {
+ color: 'rgba(255,255,255,0.4)',
+ fontSize: 14,
+ marginTop: 4,
+ },
+ resultsList: {
+ paddingHorizontal: 16,
+ paddingBottom: 100,
+ },
+ resultsRow: {
+ justifyContent: 'space-between',
+ marginBottom: 12,
+ },
+ novelCard: {
+ flex: 1,
+ marginHorizontal: 4,
+ },
+ loadingMoreContainer: {
+ paddingVertical: 20,
+ alignItems: 'center',
+ },
+});
+
+export default NovelSearch;
\ No newline at end of file
diff --git a/src/Screens/Novel/Search/index.js b/src/Screens/Novel/Search/index.js
new file mode 100644
index 00000000..8a5fbc8a
--- /dev/null
+++ b/src/Screens/Novel/Search/index.js
@@ -0,0 +1 @@
+export {NovelSearch} from './NovelSearch';
\ No newline at end of file
diff --git a/src/Screens/Novel/SeeAll/index.js b/src/Screens/Novel/SeeAll/index.js
new file mode 100644
index 00000000..7e3429e0
--- /dev/null
+++ b/src/Screens/Novel/SeeAll/index.js
@@ -0,0 +1,212 @@
+import React, {useEffect, useState, useCallback} from 'react';
+import {
+ View,
+ StyleSheet,
+ Text,
+ FlatList,
+ ActivityIndicator,
+ Dimensions,
+ TouchableOpacity,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useNavigation, useRoute} from '@react-navigation/native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import crashlytics from '@react-native-firebase/crashlytics';
+
+import {NovelCard} from '../Components/NovelCard';
+import {getNovelsByGenre, getLatestNovels, getCompletedNovels} from '../APIs';
+import {NAVIGATION} from '../../../Constants';
+
+const {width} = Dimensions.get('window');
+
+/**
+ * Generate a safe key from a novel item
+ */
+const getNovelKey = (item, index) => {
+ if (item?.link) {
+ // Extract the slug from the URL and sanitize it
+ const slug = item.link.split('/book/')[1] || item.link;
+ const sanitized = slug.replace(/[^a-zA-Z0-9]/g, '-');
+ return `novel-${sanitized}`;
+ }
+ return `novel-${index}`;
+};
+
+export function NovelViewAll() {
+ const navigation = useNavigation();
+ const route = useRoute();
+
+ const {title, novels: initialNovels, genre} = route.params || {};
+
+ const [novels, setNovels] = useState(initialNovels || []);
+ const [loading, setLoading] = useState(!initialNovels?.length);
+ const [page, setPage] = useState(1);
+ const [hasMore, setHasMore] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (!initialNovels?.length && genre) {
+ fetchNovels(1);
+ }
+ }, [genre, initialNovels]);
+
+ const fetchNovels = useCallback(async (pageNum) => {
+ try {
+ setLoading(true);
+ setError(null);
+
+ let data;
+ if (genre) {
+ data = await getNovelsByGenre(genre, pageNum);
+ } else if (title === 'Latest Novels') {
+ data = await getLatestNovels(pageNum);
+ } else if (title === 'Completed Stories') {
+ data = await getCompletedNovels(pageNum);
+ } else {
+ data = [];
+ }
+
+ if (pageNum === 1) {
+ setNovels(data);
+ } else {
+ // Filter out duplicates based on link
+ setNovels(prev => {
+ const existingLinks = new Set(prev.map(n => n.link));
+ const newNovels = data.filter(n => !existingLinks.has(n.link));
+ return [...prev, ...newNovels];
+ });
+ }
+
+ setHasMore(data.length > 0);
+ } catch (err) {
+ console.error('Error fetching novels:', err);
+ crashlytics().recordError(err);
+ setError('Failed to load novels.');
+ } finally {
+ setLoading(false);
+ }
+ }, [genre, title]);
+
+ const handleLoadMore = useCallback(() => {
+ if (!loading && hasMore) {
+ const nextPage = page + 1;
+ setPage(nextPage);
+ fetchNovels(nextPage);
+ }
+ }, [loading, hasMore, page, fetchNovels]);
+
+ const handleNovelPress = useCallback((novel) => {
+ navigation.navigate(NAVIGATION.novelDetails, {novel});
+ }, [navigation]);
+
+ const renderItem = useCallback(({item}) => (
+
+ ), [handleNovelPress]);
+
+ const renderFooter = useCallback(() => {
+ if (!loading) return null;
+ return (
+
+
+
+ );
+ }, [loading]);
+
+ return (
+
+
+ navigation.goBack()}
+ style={styles.backButton}>
+
+
+
+ {title || 'All Novels'}
+ {novels.length} novels
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#0a0a14',
+ },
+ header: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingHorizontal: 12,
+ paddingVertical: 12,
+ borderBottomWidth: 1,
+ borderBottomColor: 'rgba(255,255,255,0.1)',
+ backgroundColor: '#14142A',
+ },
+ backButton: {
+ padding: 8,
+ marginRight: 8,
+ },
+ headerContent: {
+ flex: 1,
+ },
+ headerTitle: {
+ color: '#fff',
+ fontSize: 18,
+ fontWeight: '700',
+ },
+ count: {
+ color: 'rgba(255,255,255,0.5)',
+ fontSize: 12,
+ marginTop: 2,
+ },
+ listContent: {
+ paddingHorizontal: 16,
+ paddingTop: 16,
+ paddingBottom: 100,
+ },
+ row: {
+ justifyContent: 'space-between',
+ marginBottom: 12,
+ },
+ novelCard: {
+ width: (width - 48) / 3,
+ },
+ footer: {
+ paddingVertical: 20,
+ alignItems: 'center',
+ },
+ errorContainer: {
+ padding: 20,
+ alignItems: 'center',
+ },
+ errorText: {
+ color: 'rgba(255,255,255,0.6)',
+ fontSize: 14,
+ },
+});
+
+export default NovelViewAll;
\ No newline at end of file
diff --git a/src/Screens/Novel/Utils/DownloadManager.js b/src/Screens/Novel/Utils/DownloadManager.js
new file mode 100644
index 00000000..8f13e9b0
--- /dev/null
+++ b/src/Screens/Novel/Utils/DownloadManager.js
@@ -0,0 +1,251 @@
+/**
+ * Download Manager for Novel Chapters
+ * Handles downloading, tracking, and managing chapter downloads
+ */
+
+import {getNovelChapter} from '../APIs';
+import {
+ initNovelStorage,
+ saveNovelMetadata,
+ saveChapterContent,
+ isChapterDownloaded,
+ deleteChapter,
+ getDownloadedChapters,
+} from './OfflineStorage';
+
+/**
+ * Download status constants
+ */
+export const DownloadStatus = {
+ IDLE: 'idle',
+ DOWNLOADING: 'downloading',
+ PAUSED: 'paused',
+ COMPLETED: 'completed',
+ ERROR: 'error',
+};
+
+/**
+ * Download Manager Class
+ */
+class NovelDownloadManager {
+ constructor() {
+ this.downloads = new Map(); // novelLink -> {status, progress, chapters}
+ this.listeners = new Set(); // status change listeners
+ }
+
+ /**
+ * Add a listener for download status changes
+ */
+ addListener(callback) {
+ this.listeners.add(callback);
+ return () => this.listeners.delete(callback);
+ }
+
+ /**
+ * Notify all listeners of status change
+ */
+ notifyListeners(novelLink, status, progress) {
+ this.listeners.forEach(callback => {
+ callback(novelLink, status, progress);
+ });
+ }
+
+ /**
+ * Get download status for a novel
+ */
+ getStatus(novelLink) {
+ return this.downloads.get(novelLink) || {
+ status: DownloadStatus.IDLE,
+ progress: 0,
+ chapters: [],
+ };
+ }
+
+ /**
+ * Download a single chapter
+ */
+ async downloadChapter(novel, chapterNumber, chapterLink) {
+ try {
+ // Check if already downloaded
+ const alreadyDownloaded = await isChapterDownloaded(novel.link, chapterNumber);
+ if (alreadyDownloaded) {
+ return {success: true, alreadyExists: true};
+ }
+
+ // Fetch chapter content
+ const chapterData = await getNovelChapter(chapterLink);
+
+ if (!chapterData?.content) {
+ throw new Error('Failed to fetch chapter content');
+ }
+
+ // Save to storage
+ await initNovelStorage();
+ await saveNovelMetadata(novel);
+ await saveChapterContent(novel.link, chapterNumber, chapterData.content);
+
+ return {success: true, alreadyExists: false};
+ } catch (error) {
+ console.error(`Error downloading chapter ${chapterNumber}:`, error);
+ return {success: false, error: error.message};
+ }
+ }
+
+ /**
+ * Download multiple chapters
+ */
+ async downloadChapters(novel, chapters, onProgress) {
+ const novelLink = novel.link;
+ const totalChapters = chapters.length;
+ let completed = 0;
+ let failed = 0;
+
+ // Initialize download status
+ this.downloads.set(novelLink, {
+ status: DownloadStatus.DOWNLOADING,
+ progress: 0,
+ chapters: chapters.map(c => c.number),
+ });
+
+ this.notifyListeners(novelLink, DownloadStatus.DOWNLOADING, 0);
+
+ // Initialize storage
+ await initNovelStorage();
+ await saveNovelMetadata(novel);
+
+ for (const chapter of chapters) {
+ const status = this.downloads.get(novelLink);
+
+ // Check if paused
+ if (status?.status === DownloadStatus.PAUSED) {
+ return {success: false, paused: true, completed, failed};
+ }
+
+ try {
+ // Check if already downloaded
+ const alreadyDownloaded = await isChapterDownloaded(novelLink, chapter.number);
+
+ if (!alreadyDownloaded) {
+ // Fetch and save chapter
+ const chapterData = await getNovelChapter(chapter.link);
+
+ if (chapterData?.content) {
+ await saveChapterContent(novelLink, chapter.number, chapterData.content);
+ completed++;
+ } else {
+ failed++;
+ }
+ } else {
+ completed++;
+ }
+
+ // Update progress
+ const progress = Math.round((completed + failed) / totalChapters * 100);
+ this.downloads.set(novelLink, {
+ ...this.downloads.get(novelLink),
+ progress,
+ });
+
+ this.notifyListeners(novelLink, DownloadStatus.DOWNLOADING, progress);
+ onProgress?.(progress, completed, failed);
+
+ // Small delay to avoid rate limiting
+ await new Promise(resolve => setTimeout(resolve, 300));
+ } catch (error) {
+ console.error(`Error downloading chapter ${chapter.number}:`, error);
+ failed++;
+ }
+ }
+
+ // Update final status
+ const finalStatus = failed === 0 ? DownloadStatus.COMPLETED : DownloadStatus.ERROR;
+ this.downloads.set(novelLink, {
+ status: finalStatus,
+ progress: 100,
+ chapters: [],
+ });
+
+ this.notifyListeners(novelLink, finalStatus, 100);
+
+ return {
+ success: failed === 0,
+ completed,
+ failed,
+ };
+ }
+
+ /**
+ * Download all chapters for a novel
+ */
+ async downloadAllChapters(novel, chapterList, onProgress) {
+ return this.downloadChapters(novel, chapterList, onProgress);
+ }
+
+ /**
+ * Pause an ongoing download
+ */
+ pauseDownload(novelLink) {
+ const status = this.downloads.get(novelLink);
+ if (status?.status === DownloadStatus.DOWNLOADING) {
+ this.downloads.set(novelLink, {
+ ...status,
+ status: DownloadStatus.PAUSED,
+ });
+ this.notifyListeners(novelLink, DownloadStatus.PAUSED, status.progress);
+ }
+ }
+
+ /**
+ * Resume a paused download
+ */
+ async resumeDownload(novel, chapters, onProgress) {
+ const status = this.downloads.get(novel.link);
+ if (status?.status === DownloadStatus.PAUSED) {
+ // Get already downloaded chapters
+ const downloadedChapters = await getDownloadedChapters(novel.link);
+
+ // Filter out already downloaded chapters
+ const remainingChapters = chapters.filter(
+ c => !downloadedChapters.includes(c.number)
+ );
+
+ return this.downloadChapters(novel, remainingChapters, onProgress);
+ }
+ return {success: false, error: 'No paused download found'};
+ }
+
+ /**
+ * Cancel a download
+ */
+ cancelDownload(novelLink) {
+ this.downloads.delete(novelLink);
+ this.notifyListeners(novelLink, DownloadStatus.IDLE, 0);
+ }
+
+ /**
+ * Delete downloaded chapters
+ */
+ async deleteDownloadedChapters(novelLink, chapterNumbers) {
+ try {
+ for (const chapterNumber of chapterNumbers) {
+ await deleteChapter(novelLink, chapterNumber);
+ }
+ return {success: true};
+ } catch (error) {
+ console.error('Error deleting chapters:', error);
+ return {success: false, error: error.message};
+ }
+ }
+
+ /**
+ * Check which chapters are downloaded
+ */
+ async getDownloadedChapters(novelLink) {
+ return getDownloadedChapters(novelLink);
+ }
+}
+
+// Export singleton instance
+export const downloadManager = new NovelDownloadManager();
+
+export default downloadManager;
\ No newline at end of file
diff --git a/src/Screens/Novel/Utils/OfflineStorage.js b/src/Screens/Novel/Utils/OfflineStorage.js
new file mode 100644
index 00000000..8ad49648
--- /dev/null
+++ b/src/Screens/Novel/Utils/OfflineStorage.js
@@ -0,0 +1,336 @@
+/**
+ * Offline Storage Utility for Novels
+ * Manages local storage of novel chapters for offline reading
+ */
+
+import RNFS from '@dr.pogodin/react-native-fs';
+
+const NOVELS_ROOT = `${RNFS.DocumentDirectoryPath}/novels`;
+
+/**
+ * Initialize novels storage directory
+ */
+export async function initNovelStorage() {
+ try {
+ const exists = await RNFS.exists(NOVELS_ROOT);
+ if (!exists) {
+ await RNFS.mkdir(NOVELS_ROOT);
+ }
+ return true;
+ } catch (error) {
+ console.error('Error initializing novel storage:', error);
+ return false;
+ }
+}
+
+/**
+ * Get the path for a novel's directory
+ */
+export function getNovelPath(novelLink) {
+ const slug = novelLink.split('/book/')[1]?.replace(/\//g, '-') || 'unknown';
+ return `${NOVELS_ROOT}/${slug}`;
+}
+
+/**
+ * Get the path for a chapter file
+ */
+export function getChapterPath(novelLink, chapterNumber) {
+ const novelPath = getNovelPath(novelLink);
+ return `${novelPath}/chapter-${chapterNumber}.json`;
+}
+
+/**
+ * Save novel metadata
+ */
+export async function saveNovelMetadata(novel) {
+ try {
+ const novelPath = getNovelPath(novel.link);
+ const exists = await RNFS.exists(novelPath);
+ if (!exists) {
+ await RNFS.mkdir(novelPath);
+ }
+
+ const metadataPath = `${novelPath}/metadata.json`;
+ const metadata = {
+ title: novel.title,
+ author: novel.author,
+ coverImage: novel.coverImage,
+ link: novel.link,
+ chapters: novel.chapters,
+ status: novel.status,
+ savedAt: Date.now(),
+ };
+
+ await RNFS.writeFile(metadataPath, JSON.stringify(metadata), 'utf8');
+ return true;
+ } catch (error) {
+ console.error('Error saving novel metadata:', error);
+ return false;
+ }
+}
+
+/**
+ * Load novel metadata
+ */
+export async function loadNovelMetadata(novelLink) {
+ try {
+ const novelPath = getNovelPath(novelLink);
+ const metadataPath = `${novelPath}/metadata.json`;
+ const exists = await RNFS.exists(metadataPath);
+
+ if (!exists) {
+ return null;
+ }
+
+ const content = await RNFS.readFile(metadataPath, 'utf8');
+ return JSON.parse(content);
+ } catch (error) {
+ console.error('Error loading novel metadata:', error);
+ return null;
+ }
+}
+
+/**
+ * Save chapter content
+ */
+export async function saveChapterContent(novelLink, chapterNumber, content) {
+ try {
+ const novelPath = getNovelPath(novelLink);
+ const exists = await RNFS.exists(novelPath);
+ if (!exists) {
+ await RNFS.mkdir(novelPath);
+ }
+
+ const chapterPath = getChapterPath(novelLink, chapterNumber);
+ const chapterData = {
+ chapterNumber,
+ content,
+ savedAt: Date.now(),
+ };
+
+ await RNFS.writeFile(chapterPath, JSON.stringify(chapterData), 'utf8');
+ return true;
+ } catch (error) {
+ console.error('Error saving chapter content:', error);
+ return false;
+ }
+}
+
+/**
+ * Load chapter content
+ */
+export async function loadChapterContent(novelLink, chapterNumber) {
+ try {
+ const chapterPath = getChapterPath(novelLink, chapterNumber);
+ const exists = await RNFS.exists(chapterPath);
+
+ if (!exists) {
+ return null;
+ }
+
+ const content = await RNFS.readFile(chapterPath, 'utf8');
+ return JSON.parse(content);
+ } catch (error) {
+ console.error('Error loading chapter content:', error);
+ return null;
+ }
+}
+
+/**
+ * Check if chapter is downloaded
+ */
+export async function isChapterDownloaded(novelLink, chapterNumber) {
+ try {
+ const chapterPath = getChapterPath(novelLink, chapterNumber);
+ return await RNFS.exists(chapterPath);
+ } catch (error) {
+ return false;
+ }
+}
+
+/**
+ * Get list of downloaded chapters for a novel
+ */
+export async function getDownloadedChapters(novelLink) {
+ try {
+ const novelPath = getNovelPath(novelLink);
+ const exists = await RNFS.exists(novelPath);
+
+ if (!exists) {
+ return [];
+ }
+
+ const files = await RNFS.readDir(novelPath);
+ const chapters = [];
+
+ for (const file of files) {
+ if (file.name.startsWith('chapter-') && file.name.endsWith('.json')) {
+ const match = file.name.match(/chapter-(\d+)\.json/);
+ if (match) {
+ chapters.push(parseInt(match[1], 10));
+ }
+ }
+ }
+
+ return chapters.sort((a, b) => a - b);
+ } catch (error) {
+ console.error('Error getting downloaded chapters:', error);
+ return [];
+ }
+}
+
+/**
+ * Delete a downloaded chapter
+ */
+export async function deleteChapter(novelLink, chapterNumber) {
+ try {
+ const chapterPath = getChapterPath(novelLink, chapterNumber);
+ const exists = await RNFS.exists(chapterPath);
+
+ if (exists) {
+ await RNFS.unlink(chapterPath);
+ }
+
+ return true;
+ } catch (error) {
+ console.error('Error deleting chapter:', error);
+ return false;
+ }
+}
+
+/**
+ * Delete all downloaded chapters for a novel
+ */
+export async function deleteNovel(novelLink) {
+ try {
+ const novelPath = getNovelPath(novelLink);
+ const exists = await RNFS.exists(novelPath);
+
+ if (exists) {
+ await RNFS.unlink(novelPath);
+ }
+
+ return true;
+ } catch (error) {
+ console.error('Error deleting novel:', error);
+ return false;
+ }
+}
+
+/**
+ * Get storage size for a novel
+ */
+export async function getNovelStorageSize(novelLink) {
+ try {
+ const novelPath = getNovelPath(novelLink);
+ const exists = await RNFS.exists(novelPath);
+
+ if (!exists) {
+ return 0;
+ }
+
+ const files = await RNFS.readDir(novelPath);
+ let totalSize = 0;
+
+ for (const file of files) {
+ totalSize += file.size;
+ }
+
+ return totalSize;
+ } catch (error) {
+ console.error('Error getting novel storage size:', error);
+ return 0;
+ }
+}
+
+/**
+ * Get total storage size for all novels
+ */
+export async function getTotalStorageSize() {
+ try {
+ const exists = await RNFS.exists(NOVELS_ROOT);
+ if (!exists) {
+ return 0;
+ }
+
+ const novels = await RNFS.readDir(NOVELS_ROOT);
+ let totalSize = 0;
+
+ for (const novel of novels) {
+ if (novel.isDirectory()) {
+ const files = await RNFS.readDir(novel.path);
+ for (const file of files) {
+ totalSize += file.size;
+ }
+ }
+ }
+
+ return totalSize;
+ } catch (error) {
+ console.error('Error getting total storage size:', error);
+ return 0;
+ }
+}
+
+/**
+ * Format bytes to human readable string
+ */
+export function formatBytes(bytes) {
+ if (bytes === 0) return '0 B';
+
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+ return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+/**
+ * Get all downloaded novels
+ */
+export async function getAllDownloadedNovels() {
+ try {
+ const exists = await RNFS.exists(NOVELS_ROOT);
+ if (!exists) {
+ return [];
+ }
+
+ const novels = await RNFS.readDir(NOVELS_ROOT);
+ const result = [];
+
+ for (const novel of novels) {
+ if (novel.isDirectory()) {
+ const metadata = await loadNovelMetadata(novel.path.replace(NOVELS_ROOT + '/', ''));
+ if (metadata) {
+ const chapters = await getDownloadedChapters(novel.path.replace(NOVELS_ROOT + '/', ''));
+ result.push({
+ ...metadata,
+ downloadedChapters: chapters.length,
+ storageSize: await getNovelStorageSize(novel.path.replace(NOVELS_ROOT + '/', '')),
+ });
+ }
+ }
+ }
+
+ return result;
+ } catch (error) {
+ console.error('Error getting all downloaded novels:', error);
+ return [];
+ }
+}
+
+export default {
+ initNovelStorage,
+ saveNovelMetadata,
+ loadNovelMetadata,
+ saveChapterContent,
+ loadChapterContent,
+ isChapterDownloaded,
+ getDownloadedChapters,
+ deleteChapter,
+ deleteNovel,
+ getNovelStorageSize,
+ getTotalStorageSize,
+ formatBytes,
+ getAllDownloadedNovels,
+};
\ No newline at end of file
diff --git a/src/Screens/Novel/index.js b/src/Screens/Novel/index.js
new file mode 100644
index 00000000..290c710e
--- /dev/null
+++ b/src/Screens/Novel/index.js
@@ -0,0 +1,10 @@
+/**
+ * Novel Screens Exports
+ */
+
+export {NovelHome} from './Home';
+export {NovelDetails} from './Details';
+export {NovelReader} from './Reader';
+export {NovelSearch} from './Search';
+export {NovelLibrary} from './Library';
+export {NovelViewAll} from './SeeAll';
\ No newline at end of file
diff --git a/src/Screens/Search/Search.js b/src/Screens/Search/Search.js
index aea2d437..f2611a47 100644
--- a/src/Screens/Search/Search.js
+++ b/src/Screens/Search/Search.js
@@ -28,10 +28,11 @@ import Header from '../../Components/UIComp/Header';
import AntDesign from 'react-native-vector-icons/AntDesign';
import {searchComic} from '../../Redux/Actions/GlobalActions';
import {getSearchManga} from '../../InkNest-Externals/Screens/Manga/APIs/Search';
+import {searchNovels} from '../Novel/APIs';
import Image from '../../Components/UIComp/Image';
// Generate a consistent gradient color based on string
-const getGradientColors = (str) => {
+const getGradientColors = str => {
const colors = [
['#FF6B6B', '#EE5A6F'],
['#4ECDC4', '#44A08D'],
@@ -52,7 +53,7 @@ const getGradientColors = (str) => {
};
// Get initials from title
-const getInitials = (title) => {
+const getInitials = title => {
if (!title) return '?';
const words = title.trim().split(/\s+/);
if (words.length === 1) {
@@ -72,47 +73,244 @@ export function Search({navigation, route}) {
const dispatch = useDispatch();
const loading = useSelector(state => state.data.loading);
const [searchTerm, setSearchTerm] = useState('');
- const initialTab = route?.params?.initialTab === 'manga' ? 'Manga' : 'ReadAllComic';
- const [activeTab, setActiveTab] = useState(initialTab);
+ const initialCategoryFromRoute = route?.params?.initialTab;
+ const [activeCategory, setActiveCategory] = useState(
+ initialCategoryFromRoute === 'manga'
+ ? 'Manga'
+ : initialCategoryFromRoute === 'novel'
+ ? 'Novels'
+ : initialCategoryFromRoute === 'comic'
+ ? 'Comics'
+ : 'All',
+ );
const [viewAll, setViewAll] = useState(null);
const [searchData, setSearchData] = useState({
ReadAllComic: [],
ComicHub: [],
ComicOnline: [],
Manga: [],
+ Novel: [],
});
- const [sortedSources, setSortedSources] = useState(['ReadAllComic', 'ComicHub', 'ComicOnline', 'Manga']);
+ const [isSearching, setIsSearching] = useState(false);
+ const [activeSource, setActiveSource] = useState('All'); // Selected source after search
const flatlistRef = useRef();
let Tag = View;
- // Sort sources by result count — fewer results first
- const updateSourcesOrder = (data) => {
- const sourcesWithCounts = [
- {name: 'ReadAllComic', count: data.ReadAllComic?.length || 0},
- {name: 'ComicHub', count: data.ComicHub?.length || 0},
- {name: 'ComicOnline', count: data.ComicOnline?.length || 0},
- {name: 'Manga', count: data.Manga?.length || 0},
+ // Category definitions (shown before search)
+ const CATEGORIES = [
+ {id: 'All', label: 'All', icon: 'globe-outline', color: '#667EEA'},
+ {id: 'Comics', label: 'Comics', icon: 'images-outline', color: '#FF6B6B'},
+ {id: 'Manga', label: 'Manga', icon: 'book-outline', color: '#007AFF'},
+ {
+ id: 'Novels',
+ label: 'Novels',
+ icon: 'document-text-outline',
+ color: '#9C27B0',
+ },
+ ];
+
+ // Base source definitions
+ const BASE_SOURCES = {
+ All: {
+ id: 'All',
+ label: 'All Sources',
+ icon: 'globe-outline',
+ color: '#667EEA',
+ category: 'All',
+ },
+ // Comic sources
+ ReadAllComic: {
+ id: 'ReadAllComic',
+ label: 'ReadAllComic',
+ icon: 'images',
+ color: '#FF6B6B',
+ category: 'Comics',
+ },
+ ComicHub: {
+ id: 'ComicHub',
+ label: 'ComicHub',
+ icon: 'images',
+ color: '#FF8E53',
+ category: 'Comics',
+ },
+ ComicOnline: {
+ id: 'ComicOnline',
+ label: 'ComicOnline',
+ icon: 'images',
+ color: '#FFA726',
+ category: 'Comics',
+ },
+ // Manga source
+ Manga: {
+ id: 'Manga',
+ label: 'Manga',
+ icon: 'book',
+ color: '#007AFF',
+ category: 'Manga',
+ },
+ // Novel source
+ Novel: {
+ id: 'Novel',
+ label: 'Novel',
+ icon: 'document-text',
+ color: '#9C27B0',
+ category: 'Novels',
+ },
+ };
+
+ // Get ordered sources based on active category (selected category's sources come first)
+ const getOrderedSources = () => {
+ const allSources = [BASE_SOURCES.All];
+ const comicSources = [
+ BASE_SOURCES.ReadAllComic,
+ BASE_SOURCES.ComicHub,
+ BASE_SOURCES.ComicOnline,
];
-
- // Sort by count ascending — shorter results come first
- sourcesWithCounts.sort((a, b) => a.count - b.count);
-
- const sorted = sourcesWithCounts.map(s => s.name);
- setSortedSources(sorted);
-
- // Set active tab to the source with fewest results (if any have results)
- const bestSource = sourcesWithCounts.find(s => s.count > 0);
- if (bestSource) {
- setActiveTab(bestSource.name);
+ const mangaSources = [BASE_SOURCES.Manga];
+ const novelSources = [BASE_SOURCES.Novel];
+
+ // Order based on active category
+ if (activeCategory === 'Manga') {
+ return [...allSources, ...mangaSources, ...comicSources, ...novelSources];
+ } else if (activeCategory === 'Novels') {
+ return [...allSources, ...novelSources, ...comicSources, ...mangaSources];
+ } else if (activeCategory === 'Comics') {
+ return [...allSources, ...comicSources, ...mangaSources, ...novelSources];
}
+ // Default (All) - current order
+ return [...allSources, ...comicSources, ...mangaSources, ...novelSources];
};
+ const SOURCES = getOrderedSources();
+
+ // Determine if we should show categories or sources
+ // (defined after getCategoryCount to avoid reference error)
+
+ // Get combined results based on active category or selected source
+ const getCombinedResults = () => {
+ const allResults = [];
+
+ // If showing sources (after search), filter by selected source
+ if (showSources) {
+ if (activeSource === 'All') {
+ // Add all results
+ searchData.ReadAllComic?.forEach(item => {
+ allResults.push({...item, sourceType: 'ReadAllComic', type: 'Comic'});
+ });
+ searchData.ComicHub?.forEach(item => {
+ allResults.push({...item, sourceType: 'ComicHub', type: 'Comic'});
+ });
+ searchData.ComicOnline?.forEach(item => {
+ allResults.push({...item, sourceType: 'ComicOnline', type: 'Comic'});
+ });
+ searchData.Manga?.forEach(item => {
+ allResults.push({...item, sourceType: 'Manga', type: 'Manga'});
+ });
+ searchData.Novel?.forEach(item => {
+ allResults.push({...item, sourceType: 'Novel', type: 'Novel'});
+ });
+ } else {
+ // Filter by specific source
+ const sourceType =
+ activeSource === 'Manga'
+ ? 'Manga'
+ : activeSource === 'Novel'
+ ? 'Novel'
+ : 'Comic';
+ searchData[activeSource]?.forEach(item => {
+ allResults.push({
+ ...item,
+ sourceType: activeSource,
+ type: sourceType,
+ });
+ });
+ }
+ return allResults;
+ }
+
+ // Otherwise, filter by category (before search)
+ if (activeCategory === 'All' || activeCategory === 'Comics') {
+ searchData.ReadAllComic?.forEach(item => {
+ allResults.push({...item, sourceType: 'ReadAllComic', type: 'Comic'});
+ });
+ searchData.ComicHub?.forEach(item => {
+ allResults.push({...item, sourceType: 'ComicHub', type: 'Comic'});
+ });
+ searchData.ComicOnline?.forEach(item => {
+ allResults.push({...item, sourceType: 'ComicOnline', type: 'Comic'});
+ });
+ }
+
+ if (activeCategory === 'All' || activeCategory === 'Manga') {
+ searchData.Manga?.forEach(item => {
+ allResults.push({...item, sourceType: 'Manga', type: 'Manga'});
+ });
+ }
+
+ if (activeCategory === 'All' || activeCategory === 'Novels') {
+ searchData.Novel?.forEach(item => {
+ allResults.push({...item, sourceType: 'Novel', type: 'Novel'});
+ });
+ }
+
+ return allResults;
+ };
+
+ // Get total count for category badge
+ const getCategoryCount = categoryId => {
+ if (categoryId === 'All') {
+ return Object.values(searchData).reduce(
+ (sum, arr) => sum + (arr?.length || 0),
+ 0,
+ );
+ }
+ if (categoryId === 'Comics') {
+ return (
+ (searchData.ReadAllComic?.length || 0) +
+ (searchData.ComicHub?.length || 0) +
+ (searchData.ComicOnline?.length || 0)
+ );
+ }
+ if (categoryId === 'Manga') {
+ return searchData.Manga?.length || 0;
+ }
+ if (categoryId === 'Novels') {
+ return searchData.Novel?.length || 0;
+ }
+ return 0;
+ };
+
+ // Get count for specific source
+ const getSourceCount = sourceId => {
+ if (sourceId === 'All') {
+ return getCategoryCount('All');
+ }
+ return searchData[sourceId]?.length || 0;
+ };
+
+ // Determine if we should show categories or sources (after search with results)
+ const showSources =
+ searchTerm.trim().length > 0 && getCategoryCount('All') > 0;
+
const fetchData = async () => {
- if (loading) return;
+ if (isSearching) return;
if (!searchTerm.trim()) return;
+ setIsSearching(true);
+
+ // Clear previous results and reset source selection when starting new search
+ setSearchData({
+ ReadAllComic: [],
+ ComicHub: [],
+ ComicOnline: [],
+ Manga: [],
+ Novel: [],
+ });
+ setActiveSource('All');
+
await analytics().logEvent('search_comic', {
search: searchTerm?.trim()?.toString(),
+ category: activeCategory,
});
let link = searchTerm.trim();
@@ -124,274 +322,214 @@ export function Search({navigation, route}) {
) {
if (link.startsWith('http://') || link.startsWith('https://')) {
Alert.alert('Invalid link', 'Please enter a valid comic link');
+ setIsSearching(false);
return;
}
- // Fire all searches in parallel but show results as they arrive
+ // Reset search data
const newData = {
ReadAllComic: [],
ComicHub: [],
ComicOnline: [],
Manga: [],
+ Novel: [],
};
const updateResults = (source, result) => {
newData[source] = result;
setSearchData({...newData});
- updateSourcesOrder({...newData});
};
- await Promise.all([
- dispatch(searchComic(link, 'readcomicsonline')).then(r =>
- updateResults('ComicOnline', r ?? []),
- ),
- dispatch(searchComic(link, 'comichubfree')).then(r =>
- updateResults('ComicHub', r ?? []),
- ),
- dispatch(searchComic(link, 'readallcomics')).then(r =>
- updateResults('ReadAllComic', r ?? []),
- ),
- getSearchManga(link)
- .then(r => updateResults('Manga', r?.mangaList ?? []))
- .catch(e => {
- console.error('Manga search error:', e);
- updateResults('Manga', []);
- }),
- ]);
+ // Build search promises based on active category
+ const searchPromises = [];
+ // Comics sources
+ if (activeCategory === 'All' || activeCategory === 'Comics') {
+ searchPromises.push(
+ dispatch(searchComic(link, 'readcomicsonline'))
+ .then(r => updateResults('ComicOnline', r ?? []))
+ .catch(e => {
+ console.error('ComicOnline search error:', e);
+ updateResults('ComicOnline', []);
+ }),
+ dispatch(searchComic(link, 'comichubfree'))
+ .then(r => updateResults('ComicHub', r ?? []))
+ .catch(e => {
+ console.error('ComicHub search error:', e);
+ updateResults('ComicHub', []);
+ }),
+ dispatch(searchComic(link, 'readallcomics'))
+ .then(r => updateResults('ReadAllComic', r ?? []))
+ .catch(e => {
+ console.error('ReadAllComic search error:', e);
+ updateResults('ReadAllComic', []);
+ }),
+ );
+ }
+
+ // Manga source
+ if (activeCategory === 'All' || activeCategory === 'Manga') {
+ searchPromises.push(
+ getSearchManga(link)
+ .then(r => updateResults('Manga', r?.mangaList ?? []))
+ .catch(e => {
+ console.error('Manga search error:', e);
+ updateResults('Manga', []);
+ }),
+ );
+ }
+
+ // Novel source
+ if (activeCategory === 'All' || activeCategory === 'Novels') {
+ searchPromises.push(
+ searchNovels(link, 1)
+ .then(r => updateResults('Novel', r ?? []))
+ .catch(e => {
+ console.error('Novel search error:', e);
+ updateResults('Novel', []);
+ }),
+ );
+ }
+
+ await Promise.all(searchPromises);
+
+ // Auto-select the first source with results based on active category
+ if (activeCategory === 'Manga' && newData.Manga?.length > 0) {
+ setActiveSource('Manga');
+ } else if (activeCategory === 'Novels' && newData.Novel?.length > 0) {
+ setActiveSource('Novel');
+ } else if (activeCategory === 'Comics') {
+ // Select first comic source with results
+ if (newData.ReadAllComic?.length > 0) setActiveSource('ReadAllComic');
+ else if (newData.ComicHub?.length > 0) setActiveSource('ComicHub');
+ else if (newData.ComicOnline?.length > 0)
+ setActiveSource('ComicOnline');
+ else setActiveSource('All');
+ } else {
+ setActiveSource('All');
+ }
+
+ setIsSearching(false);
return;
}
link = link.replace(/\/\d+$/, '');
navigation.navigate(NAVIGATION.comicDetails, {link});
+ setIsSearching(false);
};
- const renderMangaItem = ({item, index}) => {
+ // Render combined results with type badges
+ const renderCombinedItem = ({item, index}) => {
const isEven = index % 2 === 0;
+ const type = item?.type;
+ const isManga = type === 'Manga';
+ const isNovel = type === 'Novel';
+ const isComic = type === 'Comic';
+
+ // Get type-specific colors and icons
+ const getTypeStyle = () => {
+ if (isManga) return {color: '#007AFF', bgColor: 'rgba(0,122,255,0.15)'};
+ if (isNovel) return {color: '#9C27B0', bgColor: 'rgba(156,39,176,0.15)'};
+ return {color: '#667EEA', bgColor: 'rgba(102,126,234,0.15)'};
+ };
+ const typeStyle = getTypeStyle();
+
+ // Get image source
+ const imageUri = item?.coverImage || item?.image;
+
+ // Handle press based on type
+ const handlePress = () => {
+ if (isManga) {
+ navigation.navigate(NAVIGATION.mangaDetails, {
+ link: item?.link,
+ title: item?.title,
+ });
+ } else if (isNovel) {
+ navigation.navigate(NAVIGATION.novelDetails, {novel: item});
+ } else {
+ navigation.navigate(NAVIGATION.comicDetails, {
+ link: item?.link || item?.href,
+ title: item?.title,
+ });
+ }
+ };
+
return (
{
- navigation.navigate(NAVIGATION.mangaDetails, {
- link: item?.link,
- title: item?.title,
- });
- }}
+ onPress={handlePress}
activeOpacity={0.7}
style={[styles.mangaCard, isEven && styles.mangaCardEven]}>
- {item?.image ? (
-
+ {imageUri ? (
+
) : (
-
+
)}
#{index + 1}
-
- MANGA
-
-
- {item?.title}
- {item?.genres?.length > 0 && (
-
- {item.genres.slice(0, 2).map((genre, i) => (
-
- {genre}
-
- ))}
-
- )}
-
- {item?.status && (
-
- {item.status}
+
+ {type?.toUpperCase()}
- )}
-
-
-
-
-
-
-
-
- );
- };
-
- const renderReadAllComicItem = ({item, index}) => {
- const isEven = index % 2 === 0;
- const colors = getGradientColors(item?.title);
-
- return (
- {
- navigation.navigate(NAVIGATION.comicDetails, {
- link: item?.link,
- title: item?.title,
- });
- }}
- activeOpacity={0.7}
- style={[styles.readAllComicCard, isEven && styles.readAllComicCardEven]}>
- {/* Comic Cover Image */}
- {item?.image ? (
-
- ) : (
-
-
-
- )}
-
- {/* Content */}
-
-
- #{index + 1}
-
- READALLCOMIC
+
+ {item?.title}
+
- {item?.title}
-
- {item?.publisher && (
-
-
- {item.publisher}
-
- )}
-
-
- {item?.totalIssues && (
-
-
- {item.totalIssues} Issues
-
+ {/* Type-specific metadata */}
+
+ {isNovel && item?.rank && (
+
+ Rank {item.rank}{' '}
+
)}
- {item?.lastUpdated && (
-
-
- {item.lastUpdated}
-
+ {isNovel && item?.chapters && (
+
+ {item.chapters} Ch{' '}
+
)}
-
-
- {item?.latestChapter?.title && (
-
-
-
- {item.latestChapter.title}
+ {isManga && item?.status && (
+
+ {item.status}{' '}
-
- )}
-
-
- {/* Arrow indicator */}
-
-
-
-
-
-
- );
- };
-
- const renderItem = ({item, index}) => {
- if (item.user === 'user') {
- return (
-
-
- {item.query}
-
-
- );
- }
-
- if (item.user === 'error') {
- return (
-
-
- {item.error}
-
-
- );
- }
-
- const colors = getGradientColors(item?.title);
- const initials = getInitials(item?.title);
- const isEven = index % 2 === 0;
-
- return (
- {
- navigation.navigate(NAVIGATION.comicDetails, {
- link: item?.link,
- title: item?.title,
- });
- }}
- activeOpacity={0.7}
- style={[styles.resultCard, isEven && styles.resultCardEven]}>
- {/* Avatar with gradient */}
-
- {initials}
-
-
- {/* Content */}
-
-
- #{index + 1}
-
-
-
-
- {item?.title}
-
-
-
-
- Tap to read
+ )}
+ {isComic && item?.sourceType && (
+
+ {item.sourceType}
+
+ )}
-
- {/* Arrow indicator */}
+ style={[styles.arrowCircle, {backgroundColor: typeStyle.bgColor}]}>
-
- {/* Decorative corner accent */}
-
);
};
@@ -435,15 +573,15 @@ export function Search({navigation, route}) {
/>
-
- {loading ? (
+
+ {isSearching ? (
) : (
@@ -458,42 +596,70 @@ export function Search({navigation, route}) {
- {/* Source Tabs */}
+ {/* Category/Source Tabs */}
(searchData[s]?.length || 0) > 0 || s === activeTab)}
- renderItem={({item}) => (
- setActiveTab(item)}
- style={[
- styles.tabButton,
- activeTab === item && styles.tabButtonActive,
- ]}>
-
- {item}
-
- {
+ const count = showSources
+ ? getSourceCount(item.id)
+ : getCategoryCount(item.id);
+ const isActive = showSources
+ ? activeSource === item.id
+ : activeCategory === item.id;
+
+ const handlePress = () => {
+ if (showSources) {
+ setActiveSource(item.id);
+ // Also update activeCategory based on source's category
+ if (item.category) {
+ setActiveCategory(item.category);
+ }
+ } else {
+ setActiveCategory(item.id);
+ }
+ };
+
+ return (
+
+
- {searchData[item]?.length || 0}
+ {item.label}
-
-
- )}
- keyExtractor={(item) => item}
+ {count > 0 && (
+
+
+ {count}
+
+
+ )}
+
+ );
+ }}
+ keyExtractor={item => item.id}
contentContainerStyle={styles.tabsContent}
/>
@@ -504,47 +670,54 @@ export function Search({navigation, route}) {
ref={flatlistRef}
style={styles.resultsList}
ListEmptyComponent={() => {
- // Check if any source has results
- const totalResults = Object.values(searchData).reduce(
- (sum, arr) => sum + (arr?.length || 0),
- 0
- );
+ const totalResults = getCategoryCount('All');
const hasResultsElsewhere = totalResults > 0;
- const isSearching = loading;
-
+ const currentSelection = showSources
+ ? activeSource
+ : activeCategory;
+ const currentCount = showSources
+ ? getSourceCount(activeSource)
+ : getCategoryCount(activeCategory);
+
return (
{isSearching
? 'Searching...'
- : hasResultsElsewhere
- ? `No results in ${activeTab}`
- : 'Ready to explore?'}
+ : hasResultsElsewhere
+ ? `No results in ${currentSelection}`
+ : 'Ready to explore?'}
{isSearching
- ? 'Looking across all sources'
- : hasResultsElsewhere
- ? 'This source has no results. Check the other tabs above!'
- : 'Search for your favorite comics and manga across multiple sources'}
+ ? `Searching ${
+ currentSelection === 'All'
+ ? showSources
+ ? 'all sources'
+ : 'all categories'
+ : currentSelection + ' sources'
+ }...`
+ : hasResultsElsewhere
+ ? 'This selection has no results. Try a different one!'
+ : 'Search for your favorite comics, manga, and novels across multiple sources'}
);
}}
- data={searchData?.[activeTab ?? 'ComicOnline'] ?? []}
- renderItem={
- activeTab === 'Manga' ? renderMangaItem :
- activeTab === 'ReadAllComic' ? renderReadAllComicItem :
- renderItem
+ data={getCombinedResults()}
+ renderItem={renderCombinedItem}
+ keyExtractor={(item, index) =>
+ `${item?.sourceType || item?.type}-${
+ item?.link || item?.href || index
+ }-${index}`
}
- keyExtractor={(item, index) => index.toString()}
contentContainerStyle={styles.resultsContent}
ListFooterComponent={}
maxToRenderPerBatch={15}
@@ -562,10 +735,7 @@ export function Search({navigation, route}) {
activeOpacity={1}
style={styles.modalOverlay}
/>
-
+
All Results
@@ -609,9 +779,7 @@ export function Search({navigation, route}) {
);
}}
- ListFooterComponent={
-
- }
+ ListFooterComponent={}
/>
@@ -624,17 +792,17 @@ export function Search({navigation, route}) {
const styles = StyleSheet.create({
safeArea: {
flex: 1,
- backgroundColor: '#0F0F1A',
+ backgroundColor: '#14142A',
},
container: {
flex: 1,
},
-
+
// Header
header: {
width: '100%',
height: heightPercentageToDP('5%'),
- backgroundColor: '#0F0F1A',
+ backgroundColor: '#14142A',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
@@ -643,7 +811,10 @@ const styles = StyleSheet.create({
borderBottomColor: 'rgba(255,255,255,0.05)',
},
headerTitleContainer: {
- flexDirection: 'row',
+ position: 'absolute',
+ left: 0,
+ right: 0,
+ alignItems: 'center',
},
headerTitle: {
fontSize: heightPercentageToDP('2.2%'),
@@ -659,12 +830,12 @@ const styles = StyleSheet.create({
fontWeight: '600',
color: '#667EEA',
},
-
+
// Search Input
searchContainer: {
paddingHorizontal: widthPercentageToDP('4%'),
paddingVertical: heightPercentageToDP('2%'),
- backgroundColor: '#0F0F1A',
+ backgroundColor: '#14142A',
},
searchInputWrapper: {
flexDirection: 'row',
@@ -692,62 +863,50 @@ const styles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
},
-
+
// Tabs
tabsContainer: {
paddingVertical: 8,
- backgroundColor: '#0F0F1A',
+ backgroundColor: '#14142A',
},
tabsContent: {
paddingHorizontal: 16,
gap: 10,
},
- tabButton: {
+ categoryTab: {
flexDirection: 'row',
alignItems: 'center',
- paddingHorizontal: 16,
+ paddingHorizontal: 14,
paddingVertical: 10,
borderRadius: 24,
backgroundColor: 'rgba(255,255,255,0.05)',
marginRight: 10,
gap: 8,
+ borderWidth: 1,
+ borderColor: 'transparent',
},
- tabButtonActive: {
- backgroundColor: '#667EEA',
- },
- tabText: {
+ categoryTabText: {
fontSize: 14,
fontWeight: '600',
color: 'rgba(255,255,255,0.6)',
},
- tabTextActive: {
- color: '#FFF',
- },
- tabBadge: {
+ categoryBadge: {
minWidth: 20,
height: 20,
borderRadius: 10,
- backgroundColor: 'rgba(255,255,255,0.1)',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 6,
},
- tabBadgeActive: {
- backgroundColor: 'rgba(255,255,255,0.2)',
- },
- tabBadgeText: {
+ categoryBadgeText: {
fontSize: 11,
fontWeight: '700',
- color: 'rgba(255,255,255,0.6)',
- },
- tabBadgeTextActive: {
- color: '#FFF',
},
-
+
// Results List
resultsList: {
flex: 1,
- backgroundColor: '#0F0F1A',
+ backgroundColor: '#14142A',
},
resultsContent: {
paddingHorizontal: 16,
@@ -757,7 +916,7 @@ const styles = StyleSheet.create({
footerSpace: {
height: heightPercentageToDP('4%'),
},
-
+
// Result Card
resultCard: {
flexDirection: 'row',
@@ -846,7 +1005,7 @@ const styles = StyleSheet.create({
borderBottomLeftRadius: 4,
opacity: 0.8,
},
-
+
// Empty State
emptyContainer: {
flex: 1,
@@ -876,7 +1035,7 @@ const styles = StyleSheet.create({
textAlign: 'center',
lineHeight: 22,
},
-
+
// User/Error Messages
userMessageContainer: {
flex: 1,
@@ -919,7 +1078,7 @@ const styles = StyleSheet.create({
color: '#FF004F',
fontSize: 14,
},
-
+
// Modal
modalOverlay: {
width: '100%',
diff --git a/src/Utils/APIs.js b/src/Utils/APIs.js
index 86253e1f..7861e5e8 100644
--- a/src/Utils/APIs.js
+++ b/src/Utils/APIs.js
@@ -11,3 +11,7 @@ export const AnimeHostName = {
export const MangaHostName = {
mangakatana: 'https://mangakatana.com/',
};
+export const NovelHostName = {
+ novelfire: 'https://novelfire.net',
+ // wtrlab: 'https://wtr-lab.com',
+};
diff --git a/src/Utils/hooks/useSourceStatus.js b/src/Utils/hooks/useSourceStatus.js
new file mode 100644
index 00000000..d9fd1af1
--- /dev/null
+++ b/src/Utils/hooks/useSourceStatus.js
@@ -0,0 +1,157 @@
+import {useSelector, useDispatch} from 'react-redux';
+import {useCallback, useEffect, useState} from 'react';
+import {
+ markSourceStatusNotificationRead,
+ removeSourceStatusNotification,
+ clearSourceStatusNotifications,
+} from '../Redux/Reducers';
+import {
+ getSourceStatus,
+ getAllSourceStatuses,
+ SOURCE_STATUS,
+ formatLastChecked,
+ getSourceLabel,
+} from '../Utils/sourceStatus';
+
+/**
+ * Custom hook to access and manage source status notifications
+ */
+export const useSourceStatusNotifications = () => {
+ const dispatch = useDispatch();
+ const notifications = useSelector(
+ state => state.data.sourceStatusNotifications || [],
+ );
+
+ const unreadCount = notifications.filter(n => !n.read).length;
+ const hasNotifications = notifications.length > 0;
+
+ const markAsRead = useCallback(
+ notificationId => {
+ dispatch(markSourceStatusNotificationRead(notificationId));
+ },
+ [dispatch],
+ );
+
+ const dismiss = useCallback(
+ notificationId => {
+ dispatch(removeSourceStatusNotification(notificationId));
+ },
+ [dispatch],
+ );
+
+ const clearAll = useCallback(() => {
+ dispatch(clearSourceStatusNotifications());
+ }, [dispatch]);
+
+ return {
+ notifications,
+ unreadCount,
+ hasNotifications,
+ markAsRead,
+ dismiss,
+ clearAll,
+ };
+};
+
+/**
+ * Custom hook to check the status of a specific source
+ */
+export const useSourceStatus = sourceKey => {
+ const [status, setStatus] = useState(null);
+
+ useEffect(() => {
+ if (sourceKey) {
+ const sourceStatus = getSourceStatus(sourceKey);
+ setStatus(sourceStatus);
+ }
+ }, [sourceKey]);
+
+ const isWorking = status?.status === SOURCE_STATUS.WORKING;
+ const isCloudflareProtected =
+ status?.status === SOURCE_STATUS.CLOUDFLARE_PROTECTED;
+ const isDown = status?.status === SOURCE_STATUS.SERVER_DOWN;
+ const hasError = isCloudflareProtected || isDown;
+
+ return {
+ status,
+ isWorking,
+ isCloudflareProtected,
+ isDown,
+ hasError,
+ lastChecked: status?.lastChecked ? formatLastChecked(status.lastChecked) : 'Never',
+ sourceName: getSourceLabel(sourceKey),
+ };
+};
+
+/**
+ * Custom hook to get all source statuses
+ */
+export const useAllSourceStatuses = () => {
+ const [statuses, setStatuses] = useState({});
+
+ useEffect(() => {
+ const allStatuses = getAllSourceStatuses();
+ setStatuses(allStatuses);
+ }, []);
+
+ const workingSources = Object.entries(statuses)
+ .filter(([_, data]) => data.status === SOURCE_STATUS.WORKING)
+ .map(([key]) => key);
+
+ const errorSources = Object.entries(statuses)
+ .filter(
+ ([_, data]) =>
+ data.status === SOURCE_STATUS.CLOUDFLARE_PROTECTED ||
+ data.status === SOURCE_STATUS.SERVER_DOWN,
+ )
+ .map(([key, data]) => ({
+ key,
+ ...data,
+ name: getSourceLabel(key),
+ }));
+
+ return {
+ statuses,
+ workingSources,
+ errorSources,
+ hasErrors: errorSources.length > 0,
+ };
+};
+
+/**
+ * Custom hook to show source status toast notifications
+ */
+export const useSourceStatusToast = () => {
+ const [toast, setToast] = useState(null);
+ const notifications = useSelector(
+ state => state.data.sourceStatusNotifications || [],
+ );
+
+ useEffect(() => {
+ // Show toast for new unread notifications
+ const latestUnread = notifications.find(n => !n.read);
+ if (latestUnread && latestUnread.timestamp > Date.now() - 5000) {
+ setToast({
+ sourceKey: latestUnread.sourceKey,
+ sourceName: latestUnread.sourceName,
+ status: latestUnread.status,
+ statusCode: latestUnread.statusCode,
+ });
+
+ // Auto-hide after 5 seconds
+ const timer = setTimeout(() => setToast(null), 5000);
+ return () => clearTimeout(timer);
+ }
+ }, [notifications]);
+
+ const hideToast = useCallback(() => {
+ setToast(null);
+ }, []);
+
+ return {
+ toast,
+ hideToast,
+ };
+};
+
+export default useSourceStatusNotifications;
\ No newline at end of file
diff --git a/src/Utils/sourceStatus.js b/src/Utils/sourceStatus.js
new file mode 100644
index 00000000..b294175e
--- /dev/null
+++ b/src/Utils/sourceStatus.js
@@ -0,0 +1,321 @@
+/**
+ * Source Status Tracking Utilities
+ *
+ * Tracks the health status of content sources (comics, anime, manga)
+ * and provides notifications for 403 (Cloudflare protection) and 500+ (server down) errors.
+ */
+
+import {mmkvStorage} from '../Redux/Storage/Storage';
+
+export const SOURCE_STATUS_STORAGE_KEY = 'INKNEST_SOURCE_STATUS';
+
+// Status types
+export const SOURCE_STATUS = {
+ WORKING: 'working',
+ CLOUDFLARE_PROTECTED: 'cloudflare_protected', // 403
+ SERVER_DOWN: 'server_down', // 500+
+ UNKNOWN: 'unknown',
+};
+
+// Error codes
+export const ERROR_CODES = {
+ FORBIDDEN: 403,
+ SERVER_ERROR_THRESHOLD: 500,
+};
+
+// Source type labels for display
+export const SOURCE_LABELS = {
+ // Comic sources
+ readcomicsonline: 'Read Comics Online',
+ comichubfree: 'Comic Hub Free',
+ readallcomics: 'Read All Comics',
+ comicbookplus: 'Comic Book Plus',
+ azcomic: 'AZ Comic',
+ // Anime sources
+ gogoanimes: 'GoGo Animes',
+ s3taku: 'S3 Taku',
+ // Manga sources
+ mangakatana: 'Manga Katana',
+ // Novel sources
+ novelfire: 'Novel Fire',
+ wtrlab: 'WTR-Lab',
+};
+
+// Novel sources list
+export const NOVEL_SOURCES = ['novelfire', 'wtrlab'];
+
+// Content type for sources
+export const SOURCE_CONTENT_TYPE = {
+ readcomicsonline: 'comic',
+ comichubfree: 'comic',
+ readallcomics: 'comic',
+ comicbookplus: 'comic',
+ azcomic: 'comic',
+ gogoanimes: 'anime',
+ s3taku: 'anime',
+ mangakatana: 'manga',
+ novelfire: 'novel',
+ wtrlab: 'novel',
+};
+
+/**
+ * Get display label for a source key
+ */
+export const getSourceLabel = sourceKey => {
+ return SOURCE_LABELS[sourceKey] || sourceKey;
+};
+
+/**
+ * Get display label for a novel source key
+ */
+export const getNovelSourceLabel = sourceKey => {
+ if (NOVEL_SOURCES.includes(sourceKey)) {
+ return SOURCE_LABELS[sourceKey] || sourceKey;
+ }
+ return sourceKey;
+};
+
+/**
+ * Get content type for a source key
+ */
+export const getSourceContentType = sourceKey => {
+ return SOURCE_CONTENT_TYPE[sourceKey] || 'unknown';
+};
+
+/**
+ * Determine source status from HTTP status code
+ */
+export const getStatusFromCode = statusCode => {
+ if (!statusCode) {
+ return SOURCE_STATUS.UNKNOWN;
+ }
+
+ if (statusCode === ERROR_CODES.FORBIDDEN) {
+ return SOURCE_STATUS.CLOUDFLARE_PROTECTED;
+ }
+
+ if (statusCode >= ERROR_CODES.SERVER_ERROR_THRESHOLD) {
+ return SOURCE_STATUS.SERVER_DOWN;
+ }
+
+ return SOURCE_STATUS.WORKING;
+};
+
+/**
+ * Get user-friendly status message
+ */
+export const getStatusMessage = (status, sourceKey) => {
+ const sourceName = getSourceLabel(sourceKey);
+
+ switch (status) {
+ case SOURCE_STATUS.CLOUDFLARE_PROTECTED:
+ return `${sourceName} is protected by Cloudflare bot detection. The source may be temporarily unavailable.`;
+ case SOURCE_STATUS.SERVER_DOWN:
+ return `${sourceName} server is currently down. Please try again later or switch to another source.`;
+ case SOURCE_STATUS.WORKING:
+ return `${sourceName} is working normally.`;
+ default:
+ return `Unable to determine ${sourceName} status.`;
+ }
+};
+
+/**
+ * Get short status message for notifications
+ */
+export const getShortStatusMessage = (status, sourceKey) => {
+ const sourceName = getSourceLabel(sourceKey);
+
+ switch (status) {
+ case SOURCE_STATUS.CLOUDFLARE_PROTECTED:
+ return `${sourceName}: Cloudflare protection active (403)`;
+ case SOURCE_STATUS.SERVER_DOWN:
+ return `${sourceName}: Server is down`;
+ default:
+ return `${sourceName}: Status unknown`;
+ }
+};
+
+/**
+ * Load stored source statuses from MMKV
+ */
+export const loadSourceStatuses = () => {
+ try {
+ const raw = mmkvStorage.getString(SOURCE_STATUS_STORAGE_KEY);
+ if (!raw) {
+ return {};
+ }
+ return JSON.parse(raw);
+ } catch (error) {
+ console.error('Error loading source statuses:', error);
+ return {};
+ }
+};
+
+/**
+ * Persist source statuses to MMKV
+ */
+export const persistSourceStatuses = statuses => {
+ try {
+ mmkvStorage.set(SOURCE_STATUS_STORAGE_KEY, JSON.stringify(statuses));
+ } catch (error) {
+ console.error('Error persisting source statuses:', error);
+ }
+};
+
+/**
+ * Update status for a single source
+ */
+export const updateSourceStatus = (sourceKey, status, statusCode = null) => {
+ const statuses = loadSourceStatuses();
+ const now = Date.now();
+
+ statuses[sourceKey] = {
+ status,
+ statusCode,
+ lastChecked: now,
+ lastError: status !== SOURCE_STATUS.WORKING ? now : statuses[sourceKey]?.lastError || null,
+ lastWorking: status === SOURCE_STATUS.WORKING ? now : statuses[sourceKey]?.lastWorking || null,
+ };
+
+ persistSourceStatuses(statuses);
+ return statuses;
+};
+
+/**
+ * Record a successful request for a source
+ */
+export const recordSourceSuccess = sourceKey => {
+ return updateSourceStatus(sourceKey, SOURCE_STATUS.WORKING, null);
+};
+
+/**
+ * Record an error for a source
+ */
+export const recordSourceError = (sourceKey, statusCode) => {
+ const status = getStatusFromCode(statusCode);
+ return updateSourceStatus(sourceKey, status, statusCode);
+};
+
+/**
+ * Get status for a single source
+ */
+export const getSourceStatus = sourceKey => {
+ const statuses = loadSourceStatuses();
+ return statuses[sourceKey] || {
+ status: SOURCE_STATUS.UNKNOWN,
+ statusCode: null,
+ lastChecked: null,
+ lastError: null,
+ lastWorking: null,
+ };
+};
+
+/**
+ * Get all source statuses
+ */
+export const getAllSourceStatuses = () => {
+ return loadSourceStatuses();
+};
+
+/**
+ * Clear all source statuses
+ */
+export const clearSourceStatuses = () => {
+ persistSourceStatuses({});
+};
+
+/**
+ * Format last checked time for display
+ */
+export const formatLastChecked = timestamp => {
+ if (!timestamp) {
+ return 'Never';
+ }
+
+ const now = Date.now();
+ const diff = now - timestamp;
+
+ const minutes = Math.floor(diff / 60000);
+ const hours = Math.floor(diff / 3600000);
+ const days = Math.floor(diff / 86400000);
+
+ if (minutes < 1) {
+ return 'Just now';
+ }
+ if (minutes < 60) {
+ return `${minutes}m ago`;
+ }
+ if (hours < 24) {
+ return `${hours}h ago`;
+ }
+ return `${days}d ago`;
+};
+
+/**
+ * Check if a source should show a notification
+ * Returns true if the source has an error status that should be notified
+ */
+export const shouldShowNotification = (sourceKey, currentStatus) => {
+ const stored = getSourceStatus(sourceKey);
+
+ // If no previous record, don't notify
+ if (!stored.lastChecked) {
+ return false;
+ }
+
+ // If current status is working, don't notify
+ if (currentStatus === SOURCE_STATUS.WORKING) {
+ return false;
+ }
+
+ // If status changed from working to error, notify
+ if (stored.status === SOURCE_STATUS.WORKING) {
+ return true;
+ }
+
+ // If error persists for more than 1 hour, notify again
+ if (stored.lastError) {
+ const oneHourAgo = Date.now() - 3600000;
+ return stored.lastError > oneHourAgo;
+ }
+
+ return false;
+};
+
+/**
+ * Get sources with errors for notification summary
+ */
+export const getSourcesWithErrors = () => {
+ const statuses = loadSourceStatuses();
+ const errors = {};
+
+ Object.entries(statuses).forEach(([sourceKey, data]) => {
+ if (
+ data.status === SOURCE_STATUS.CLOUDFLARE_PROTECTED ||
+ data.status === SOURCE_STATUS.SERVER_DOWN
+ ) {
+ errors[sourceKey] = data;
+ }
+ });
+
+ return errors;
+};
+
+/**
+ * Get working sources by content type
+ */
+export const getWorkingSourcesByType = contentType => {
+ const statuses = loadSourceStatuses();
+ const working = [];
+
+ Object.entries(statuses).forEach(([sourceKey, data]) => {
+ if (
+ data.status === SOURCE_STATUS.WORKING &&
+ SOURCE_CONTENT_TYPE[sourceKey] === contentType
+ ) {
+ working.push(sourceKey);
+ }
+ });
+
+ return working;
+};