Performance fixes, general fixes and addition of features (#723)

* fix: Fixed images proxied through Cloudflare not loading

* feat: Add utility to render images from Cloudflare proxied sites

* feat(source): Add NOVA (Spanish source)

* fix(source): NovelasLigera display of images and improved display of chapters text

* fix(source): NovelasLigera properly parse metadata

* fix(source): YuukiTls display of novels

* fix(source): TuNovelaLigera missing Cloudflare bypass and not properly getting covers

* fix(source): Other significant changes related to the request of popular novels from sources with no more than 1 page

* fix(source): NOVA not added to source manager

* fix: Remove loading Novel shimmer effect item when nothing is loading

* fix: Properly update chapters and metadata of novels that aren't saved in the local library

* fix: sanitizer doing unnecessary parsing which may add noticable delay to chapter loading

* refac: Add <center> tag to the sanitizer allowed tags

* fix: sanitizer being called each re-render of ReaderScreen plus unnecessary re-render of the WebView

* fix: memoized chapter html conversion to text for TTS, operation can be expensive

* refactor: Moved cloudflareImagesBypass to sources/helpers and fixed NOVA novels summary format

src/components/ListView.js

@@ -4,6 +4,9 @@ import { StyleSheet, View, Text, Pressable } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import { coverPlaceholderColor } from '../theme/colors';
 
+import { getSourceStorage } from '@hooks/useSourceStorage';
+import { defaultUserAgentString } from '@utils/fetch/fetch';
+
 import color from 'color';
 
 const ListView = ({
@@ -16,6 +19,7 @@ const ListView = ({
   isSelected,
   onLongPress,
 }) => {
+  const { cookies = '' } = getSourceStorage(item.sourceId);
   return (
     <Pressable
       android_ripple={{ color: theme.rippleColor }}
@@ -31,6 +35,7 @@ const ListView = ({
       <FastImage
         source={{
           uri: item.novelCover,
+          headers: { Cookie: cookies, 'User-Agent': defaultUserAgentString },
         }}
         style={[styles.extensionIcon, inLibraryBadge && { opacity: 0.5 }]}
       />

src/components/NovelCover.tsx

@@ -20,6 +20,9 @@ import { SourceNovelItem } from 'src/sources/types';
 import { ThemeColors } from '@theme/types';
 import SourceScreenSkeletonLoading from '@screens/browse/loadingAnimation/SourceScreenSkeletonLoading';
 
+import { getSourceStorage } from '@hooks/useSourceStorage';
+import { defaultUserAgentString } from '@utils/fetch/fetch';
+
 interface NovelCoverProps {
   item: LibraryNovelInfo;
   onPress: () => void;
@@ -65,6 +68,8 @@ const NovelCover: React.FC<NovelCoverProps> = ({
 
   const uri = item.novelCover;
 
+  const { cookies = '' } = getSourceStorage(item.sourceId);
+
   return item.sourceId < 0 ? (
     <SourceScreenSkeletonLoading theme={theme} completeRow={item.sourceId} />
   ) : displayMode !== DisplayModes.List ? (
@@ -108,7 +113,10 @@ const NovelCover: React.FC<NovelCoverProps> = ({
           )}
         </View>
         <FastImage
-          source={{ uri }}
+          source={{
+            uri,
+            headers: { Cookie: cookies, 'User-Agent': defaultUserAgentString },
+          }}
           style={[
             {
               height: coverHeight,

src/components/NovelList.tsx

@@ -17,6 +17,7 @@ export type NovelListRenderItem = ListRenderItem<
 
 interface NovelListProps
   extends FlatListProps<LibraryNovelInfo | NovelInfo | SourceNovelItem> {
+  isFetchingNextPage?: boolean;
   inSource?: boolean;
 }
 
@@ -46,7 +47,7 @@ const NovelList: React.FC<NovelListProps> = props => {
   );
   var extendedNovelList: Array<SourceNovelItem | LibraryNovelInfo> =
     props?.data as Array<LibraryNovelInfo>;
-  if (props.data?.length && props.inSource) {
+  if (props.data?.length && props.inSource && props.isFetchingNextPage) {
     let remainder = numColumns - (props.data?.length % numColumns);
     let extension = [];
     if (remainder !== 0 && remainder !== numColumns) {

src/screens/BrowseSourceScreen/BrowseSourceScreen.tsx

@@ -130,6 +130,7 @@ const BrowseSourceScreen: React.FC<BrowseSourceScreenProps> = ({ route }) => {
       ) : (
         <NovelList
           data={novelList}
+          isFetchingNextPage={hasNextPage && !searchText}
           inSource
           renderItem={({ item }) => {
             const inLibrary = novelInLibrary(item.novelUrl);

src/screens/GlobalSearchScreen/components/GlobalSearchNovelItem.tsx

@@ -8,6 +8,9 @@ import { SourceNovelItem } from '../../../sources/types';
 import { ThemeColors } from '../../../theme/types';
 import { getString } from '@strings/translations';
 
+import { getSourceStorage } from '@hooks/useSourceStorage';
+import { defaultUserAgentString } from '@utils/fetch/fetch';
+
 interface Props {
   novel: SourceNovelItem;
   navigateToNovel: (novel: SourceNovelItem) => void;
@@ -32,6 +35,8 @@ const GlobalSearchNovelItem: React.FC<Props> = ({
     [inLibrary],
   );
 
+  const { cookies = '' } = getSourceStorage(novel.sourceId);
+
   return (
     <View style={styles.novelItem}>
       <Pressable
@@ -41,7 +46,10 @@ const GlobalSearchNovelItem: React.FC<Props> = ({
         onLongPress={onLongPress}
       >
         <FastImage
-          source={{ uri: novel.novelCover }}
+          source={{
+            uri: novel.novelCover,
+            headers: { Cookie: cookies, 'User-Agent': defaultUserAgentString },
+          }}
           style={[styles.novelCover, { ...novelItemDimensions }]}
         />
         {inLibrary ? (

src/screens/history/components/HistoryCard/HistoryCard.tsx

@@ -16,6 +16,9 @@ import {
   openNovelProps,
 } from '@utils/handleNavigateParams';
 
+import { getSourceStorage } from '@hooks/useSourceStorage';
+import { defaultUserAgentString } from '@utils/fetch/fetch';
+
 interface HistoryCardProps {
   history: History;
   handleNavigateToChapter: (
@@ -56,6 +59,8 @@ const HistoryCard: React.FC<HistoryCardProps> = ({
     [chapterName, historyTimeRead],
   );
 
+  const { cookies = '' } = getSourceStorage(sourceId);
+
   return (
     <Pressable
       style={styles.container}
@@ -85,7 +90,16 @@ const HistoryCard: React.FC<HistoryCardProps> = ({
             })
           }
         >
-          <FastImage source={{ uri: novelCover }} style={styles.cover} />
+          <FastImage
+            source={{
+              uri: novelCover,
+              headers: {
+                Cookie: cookies,
+                'User-Agent': defaultUserAgentString,
+              },
+            }}
+            style={styles.cover}
+          />
         </Pressable>
         <View style={styles.detailsContainer}>
           <Text

src/screens/novel/components/Info/NovelInfoHeader.js

@@ -11,6 +11,9 @@ import { followNovelAction } from '../../../../redux/novel/novel.actions';
 import { useSettings } from '../../../../hooks/reduxHooks';
 import { showToast } from '../../../../hooks/showToast';
 
+import { getSourceStorage } from '@hooks/useSourceStorage';
+import { defaultUserAgentString } from '@utils/fetch/fetch';
+
 import {
   CoverImage,
   NovelAuthor,
@@ -54,16 +57,30 @@ const NovelInfoHeader = ({
     [],
   );
 
+  const { cookies = '' } = getSourceStorage(novel.sourceId);
+
   return (
     <>
       <CoverImage
-        source={{ uri: novel.novelCover }}
+        source={{
+          uri: novel.novelCover,
+          headers: {
+            Cookie: cookies,
+            'User-Agent': defaultUserAgentString,
+          },
+        }}
         theme={theme}
         hideBackdrop={hideBackdrop}
       >
         <NovelInfoContainer>
           <NovelThumbnail
-            source={{ uri: novel.novelCover }}
+            source={{
+              uri: novel.novelCover,
+              headers: {
+                Cookie: cookies,
+                'User-Agent': defaultUserAgentString,
+              },
+            }}
             theme={theme}
             setCustomNovelCover={setCustomNovelCover}
           />

src/screens/novel/components/Modal/ChooseEpubLocationModal.tsx

@@ -65,7 +65,7 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
         setUri(resultUri.uri);
       }
     } catch (err) {
-      console.log(err);
+      // console.log(err);
     }
   };
 

src/screens/reader/ReaderScreen.js

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+} from 'react';
 import { Dimensions, NativeModules, NativeEventEmitter } from 'react-native';
 
 import VolumeButtonListener from './../../utils/volumeButtonListener';
@@ -195,15 +201,16 @@ const ChapterContent = ({ route, navigation }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chapter]);
 
-  const [ttsStatus, startTts] = useTextToSpeech(
-    htmlToText(chapter?.chapterText).split('\n'),
-    () => {
-      if (!incognitoMode) {
-        dispatch(markChapterReadAction(chapterId, novelId));
-        updateTracker();
-      }
-    },
+  const htmlText = useMemo(
+    () => htmlToText(chapter?.chapterText).split('\n'),
+    [chapter.chapterText],
   );
+  const [ttsStatus, startTts] = useTextToSpeech(htmlText, () => {
+    if (!incognitoMode) {
+      dispatch(markChapterReadAction(chapterId, novelId));
+      updateTracker();
+    }
+  });
 
   const scrollTo = useCallback(
     offsetY => {
@@ -268,13 +275,15 @@ const ChapterContent = ({ route, navigation }) => {
   );
 
   const hideHeader = useCallback(() => {
-    if (!hidden) {
-      setImmersiveMode();
-    } else {
-      showStatusAndNavBar();
-    }
-    setHidden(!hidden);
-  }, [hidden]);
+    setHidden(h => {
+      if (!h) {
+        setImmersiveMode();
+      } else {
+        showStatusAndNavBar();
+      }
+      return !h;
+    });
+  }, []);
 
   const navigateToChapterBySwipe = useCallback(
     name => {
@@ -313,18 +322,28 @@ const ChapterContent = ({ route, navigation }) => {
     }
   }, []);
 
-  const scrollToSavedProgress = () => scrollTo(position?.position);
+  const scrollToSavedProgress = useCallback(
+    () => scrollTo(position?.position),
+    [],
+  );
 
-  const chapterText = sanitizeChapterText(chapter.chapterText, {
-    removeExtraParagraphSpacing,
-    bionicReading,
-    sourceId: sourceId,
-  });
+  const chapterText = useMemo(
+    () =>
+      sanitizeChapterText(chapter.chapterText, {
+        removeExtraParagraphSpacing,
+        bionicReading,
+        sourceId,
+      }),
+    [chapter.chapterText, removeExtraParagraphSpacing, bionicReading, sourceId],
+  );
   const openDrawer = () => {
     navigation.openDrawer();
     hideHeader();
   };
 
+  const bookmarkChapter = () =>
+    setChapter(prevVal => ({ ...prevVal, bookmark: !prevVal?.bookmark }));
+
   if (loading) {
     return <ChapterLoadingScreen />;
   }
@@ -333,9 +352,6 @@ const ChapterContent = ({ route, navigation }) => {
     return <ErrorScreenV2 error={error} />;
   }
 
-  const bookmarkChapter = () =>
-    setChapter(prevVal => ({ ...prevVal, bookmark: !prevVal?.bookmark }));
-
   return (
     <>
       <WebViewReader

src/screens/reader/utils/sanitizeChapterText.ts

@@ -24,6 +24,7 @@ export const sanitizeChapterText = (
       'em',
       'b',
       'a',
+      'center',
     ]),
     allowedAttributes: {
       'img': ['src', 'class'],
@@ -42,23 +43,22 @@ export const sanitizeChapterText = (
       text = textVide(text);
     }
 
-    const loadedCheerio = loadCheerio(text);
-    if (
-      options?.sourceId &&
-      sourceManager(options.sourceId).headers &&
-      loadedCheerio('input[offline]').length === 0
-    ) {
-      loadedCheerio('img').each((i, element) => {
-        const src = loadedCheerio(element).attr('src');
-        if (src) {
-          loadedCheerio(element).attr({
-            'src': LoadingImageSrc,
-            'class': 'load-icon',
-            'delayed-src': src,
-          });
-        }
-      });
-      text = loadedCheerio('body').html() || text;
+    if (options?.sourceId && sourceManager(options.sourceId).headers) {
+      // Some documents might take a few seconds to be parsed, only do when necessary
+      const loadedCheerio = loadCheerio(text);
+      if (loadedCheerio('input[offline]').length === 0) {
+        loadedCheerio('img').each((i, element) => {
+          const src = loadedCheerio(element).attr('src');
+          if (src) {
+            loadedCheerio(element).attr({
+              'src': LoadingImageSrc,
+              'class': 'load-icon',
+              'delayed-src': src,
+            });
+          }
+        });
+        text = loadedCheerio('body').html() || text;
+      }
     }
   } else {
     text =