LNReader · rajarsheechatterjee · Feb 16, 2023 · Feb 14, 2023 · Feb 14, 2023 · Feb 14, 2023
diff --git a/src/screens/reader/ReaderScreen.js b/src/screens/reader/ReaderScreen.js
@@ -218,30 +218,44 @@ const ChapterContent = ({ route, navigation }) => {
     },
   );
 
-  const [currentOffset, setCurrentOffset] = useState(position?.position || 0);
-
   let scrollTimeout;
 
-  useEffect(() => {
-    if (currentScroll.percentage !== 100 && autoScroll) {
-      scrollTimeout = setTimeout(() => {
-        scrollViewRef.current.scrollTo({
+  const scrollTo = useCallback(
+    (offsetY, animated) => {
+      if (useWebViewForChapter) {
+        webViewRef?.current.injectJavaScript(`(()=>{
+        window.scrollTo(
+          {
+            left:0,
+            top:${offsetY}, 
+            behavior:'${animated ? 'smooth' : 'instant'}',
+          }
+          );
+      })()`);
+      } else {
+        scrollViewRef?.current.scrollTo({
           x: 0,
-          y:
-            currentOffset +
-            defaultTo(autoScrollOffset, Dimensions.get('window').height),
-          animated: true,
+          y: offsetY,
+          animated: animated,
         });
-        setCurrentOffset(
-          prevState =>
-            prevState +
+      }
+    },
+    [scrollViewRef, webViewRef, useWebViewForChapter],
+  );
+
+  useEffect(() => {
+    if (position && position.percentage !== 100 && autoScroll) {
+      scrollTimeout = setTimeout(() => {
+        scrollTo(
+          position.position +
             defaultTo(autoScrollOffset, Dimensions.get('window').height),
+          true,
         );
       }, autoScrollInterval * 1000);
     }
 
     return () => clearTimeout(scrollTimeout);
-  }, [autoScroll, currentOffset]);
+  }, [autoScroll, position?.position, useWebViewForChapter]);
 
   const updateTracker = () => {
     const chapterNumber = parseChapterNumber(chapterName);
@@ -267,39 +281,28 @@ const ChapterContent = ({ route, navigation }) => {
     }
   };
 
+  var setScrollTimeout;
   const  nativeEvent }) => {
+    clearTimeout(setScrollTimeout);
     const offsetY = nativeEvent.contentOffset.y;
     const pos =
       nativeEvent.contentOffset.y + nativeEvent.layoutMeasurement.height;
 
     const percentage = Math.round((pos / nativeEvent.contentSize.height) * 100);
-    if (offsetY != 0 && percentage != 100) {
+    if (!(offsetY == 0 && percentage == 100)) {
       // because the content is set to 0 when closing layout (i guess)
-      setCurrentScroll({ offsetY: offsetY, percentage: percentage });
-    }
-    if (
-      nativeEvent.contentSize.height != nativeEvent.layoutMeasurement.height &&
-      nativeEvent.contentSize.height > 0
-    ) {
-      doSaveProgress(offsetY, percentage);
+      setScrollTimeout = setTimeout(() => {
+        setCurrentScroll({ offsetY: offsetY, percentage: percentage });
+        doSaveProgress(offsetY, percentage);
+      }, 50);
     }
   }, []);
 
   const >
     event => {
       const scrollToSavedProgress = () => {
         if (position) {
-          if (useWebViewForChapter) {
-            webViewRef.current.injectJavaScript(`(()=>{
-              window.scrollTo({top: ${position.position}, left:0, behavior:"instant"});
-            })()`);
-          } else {
-            scrollViewRef.current.scrollTo({
-              x: 0,
-              y: position.position,
-              animated: false,
-            });
-          }
+          scrollTo(position.position, false);
         }
         if (firstLayout) {
           setFirstLayout(false);
@@ -336,28 +339,30 @@ const ChapterContent = ({ route, navigation }) => {
     directionalOffsetThreshold: 50,
   };
 
-  const navigateToPrevChapter = () => {
-    prevChapter
-      ? navigation.replace('Chapter', {
-          ...params,
-          chapterUrl: prevChapter.chapterUrl,
-          chapterId: prevChapter.chapterId,
-          chapterName: prevChapter.chapterName,
-          bookmark: prevChapter.bookmark,
-        })
-      : showToast("There's no previous chapter");
-  };
-
-  const navigateToNextChapter = () => {
-    nextChapter
+  const navigateToChapterBySwipe = name => {
+    let chapter;
+    if (name === 'SWIPE_LEFT') {
+      chapter = nextChapter;
+    } else if (name === 'SWIPE_RIGHT') {
+      chapter = prevChapter;
+    } else {
+      return;
+    }
+    // you can add more condition for friendly usage. for example: if(name === "SWIPE_LEFT" || name === "right")
+    showToast('Loading...'); // for better experience :D
+    chapter
       ? navigation.replace('Chapter', {
           ...params,
-          chapterUrl: nextChapter.chapterUrl,
-          chapterId: nextChapter.chapterId,
-          chapterName: nextChapter.chapterName,
-          bookmark: nextChapter.bookmark,
+          chapterUrl: chapter.chapterUrl,
+          chapterId: chapter.chapterId,
+          chapterName: chapter.chapterName,
+          bookmark: chapter.bookmark,
         })
-      : showToast("There's no next chapter");
+      : showToast(
+          name === 'SWIPE_LEFT'
+            ? "There's no next chapter"
+            : "There's no previous chapter",
+        );
   };
 
   const  ({ url }) => {
@@ -392,16 +397,7 @@ const ChapterContent = ({ route, navigation }) => {
           theme={theme}
         />
         <GestureRecognizer
-          >
-            swipeGestures &&
-            (!useWebViewForChapter || !wvUseNewSwipes) &&
-            navigateToPrevChapter
-          }
-          >
-            swipeGestures &&
-            (!useWebViewForChapter || !wvUseNewSwipes) &&
-            navigateToNextChapter
-          }
+          >
           config={config}
           style={{ flex: 1 }}
         >
@@ -479,11 +475,11 @@ const ChapterContent = ({ route, navigation }) => {
                       nextChapter={nextChapter}
                       webViewRef={webViewRef}
                       >
+                      scrollTo={scrollTo}
                       setCurrentScroll={setCurrentScroll}
                       setScrollPage={setScrollPage}
                       doSaveProgress={doSaveProgress}
-                      navigateToNextChapter={() => navigateToNextChapter()}
-                      navigateToPrevChapter={() => navigateToPrevChapter()}
+                      navigateToChapterBySwipe={navigateToChapterBySwipe}
                       >
                         onWebViewNavigationStateChange
                       }
@@ -498,7 +494,7 @@ const ChapterContent = ({ route, navigation }) => {
                       reader={readerSettings}
                       nextChapter={nextChapter}
                       >
-                      navigateToNextChapter={navigateToNextChapter}
+                      navigateToChapterBySwipe={navigateToChapterBySwipe}
                     />
                   </View>
                 )}
@@ -513,13 +509,10 @@ const ChapterContent = ({ route, navigation }) => {
         <ReaderSeekBar
           hide={hidden}
           theme={theme}
+          minScroll={minScroll.current}
           verticalSeekbar={verticalSeekbar}
           currentScroll={currentScroll}
-          useWebViewForChapter={useWebViewForChapter}
-          minScroll={minScroll.current}
-          scrollViewRef={scrollViewRef}
-          webViewRef={webViewRef}
-          setCurrentScroll={setCurrentScroll}
+          scrollTo={scrollTo}
         />
         <ReaderFooter
           hide={hidden}
@@ -529,9 +522,8 @@ const ChapterContent = ({ route, navigation }) => {
           prevChapter={prevChapter}
           useWebViewForChapter={useWebViewForChapter}
           readerSheetRef={readerSheetRef}
-          scrollViewRef={scrollViewRef}
-          navigateToNextChapter={navigateToNextChapter}
-          navigateToPrevChapter={navigateToPrevChapter}
+          scrollTo={scrollTo}
+          navigateToChapterBySwipe={navigateToChapterBySwipe}
           openDrawer={openDrawer}
         />
       </>

diff --git a/src/screens/reader/components/ReaderFooter.js b/src/screens/reader/components/ReaderFooter.js
@@ -13,11 +13,9 @@ const ChapterFooter = ({
   chapterUrl,
   nextChapter,
   prevChapter,
-  useWebViewForChapter,
   readerSheetRef,
-  scrollViewRef,
-  navigateToNextChapter,
-  navigateToPrevChapter,
+  scrollTo,
+  navigateToChapterBySwipe,
   openDrawer,
 }) => {
   const rippleConfig = {
@@ -42,7 +40,7 @@ const ChapterFooter = ({
         <Pressable
           android_ripple={rippleConfig}
           style={styles.buttonStyles}
-           class="x x-first x-last">navigateToPrevChapter
+           class="x x-first x-last">() => navigateToChapterBySwipe('SWIPE_RIGHT')
         >
           <IconButton
             icon="chevron-left"
@@ -60,21 +58,19 @@ const ChapterFooter = ({
             <IconButton icon="earth" size={26} iconColor={theme.onSurface} />
           </Pressable>
         ) : null}
-        {!useWebViewForChapter && (
-          <>
-            <Pressable
-              android_ripple={rippleConfig}
-              style={styles.buttonStyles}
-               => scrollViewRef.current.scrollTo({})}
-            >
-              <IconButton
-                icon="format-vertical-align-top"
-                size={26}
-                iconColor={theme.onSurface}
-              />
-            </Pressable>
-          </>
-        )}
+        <>
+          <Pressable
+            android_ripple={rippleConfig}
+            style={styles.buttonStyles}
+             => scrollTo(0, true)}
+          >
+            <IconButton
+              icon="format-vertical-align-top"
+              size={26}
+              iconColor={theme.onSurface}
+            />
+          </Pressable>
+        </>
         <Pressable
           android_ripple={rippleConfig}
           style={styles.buttonStyles}
@@ -100,7 +96,7 @@ const ChapterFooter = ({
         <Pressable
           android_ripple={rippleConfig}
           style={styles.buttonStyles}
-           class="x x-first x-last">navigateToNextChapter
+           class="x x-first x-last">() => navigateToChapterBySwipe('SWIPE_LEFT')
         >
           <IconButton
             icon="chevron-right"

diff --git a/src/screens/reader/components/ReaderSeekBar.js b/src/screens/reader/components/ReaderSeekBar.js
@@ -12,28 +12,13 @@ const VerticalScrollbar = ({
   minScroll,
   verticalSeekbar,
   currentScroll,
-  useWebViewForChapter,
-  scrollViewRef,
-  webViewRef,
-  setCurrentScroll,
+  scrollTo,
 }) => {
   const { bottom } = useSafeAreaInsets();
   const  => {
-    let offsetY = Math.round(
-      ((value - minScroll) * Dimensions.get('window').height) / minScroll,
-    );
-    if (useWebViewForChapter) {
-      webViewRef.current.injectJavaScript(`(()=>{
-        window.scrollTo({top: ${offsetY}, left:0, behavior:"smooth"});
-      })()`);
-    } else {
-      scrollViewRef.current.scrollTo({
-        x: 0,
-        y: offsetY,
-        animated: false,
-      });
-    }
-    setCurrentScroll({ offsetY: offsetY, percentage: value });
+    let offsetY =
+      ((value - minScroll) * Dimensions.get('window').height) / minScroll;
+    scrollTo(offsetY, true);
   };
   const screenOrientation = useDeviceOrientation();
 

diff --git a/src/screens/reader/components/TextReader.tsx b/src/screens/reader/components/TextReader.tsx
@@ -31,7 +31,7 @@ interface TextReaderProps {
   };
   nextChapter: ChapterItem;
   onPress(): void;
-  navigateToNextChapter: () => void;
+  navigateToChapterBySwipe: (name: string) => void;
 }
 
 const TextReader: React.FC<TextReaderProps> = ({
@@ -41,7 +41,7 @@ const TextReader: React.FC<TextReaderProps> = ({
   reader,
   nextChapter,
   onPress,
-  navigateToNextChapter,
+  navigateToChapterBySwipe,
 }) => {
   const { width, height } = useWindowDimensions();
 
@@ -80,9 +80,8 @@ const TextReader: React.FC<TextReaderProps> = ({
           {nextChapter ? (
             <Button
               title={`Next: ${nextChapter.chapterName}`}
-               class="x x-first x-last">navigateToNextChapter
+               class="x x-first x-last">() => navigateToChapterBySwipe('SWIPE_LEFT')
               theme={theme}
-              textColor={theme.colorButtonText} // what is this prop ?
               style={styles.nextButton}
             />
           ) : (