Load next chapter when getting to the last page (#84)

* Load next chapter when scrolling to the bottom (Webtoon, Continues Vertical)

* Load next chapter when scrolling to the bottom (Paged reader)

* Added missing types to IReaderProps

* Move load next chapter when at last page to VerticalReader

* Dependency fix

* Use react history for loading next page

webUI/react/src/components/reader/pager/PagedPager.tsx

@@ -8,6 +8,7 @@
 
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import Page from '../Page';
 
 const useStyles = makeStyles({
@@ -23,13 +24,19 @@ const useStyles = makeStyles({
 
 export default function PagedReader(props: IReaderProps) {
     const {
-        pages, settings, setCurPage, curPage,
+        pages, settings, setCurPage, curPage, manga, chapter,
     } = props;
 
     const classes = useStyles();
+    const history = useHistory();
 
     function nextPage() {
-        if (curPage < pages.length - 1) { setCurPage(curPage + 1); }
+        if (curPage < pages.length - 1) {
+            setCurPage(curPage + 1);
+        } else if (settings.loadNextonEnding) {
+            setCurPage(0);
+            history.push(`/manga/${manga.id}/chapter/${chapter.index + 1}`);
+        }
     }
 
     function prevPage() {

webUI/react/src/components/reader/pager/VerticalPager.tsx

@@ -7,7 +7,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import { makeStyles } from '@material-ui/core/styles';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import Page from '../Page';
 
 const useStyles = makeStyles({
@@ -20,10 +21,27 @@ const useStyles = makeStyles({
     },
 });
 
-export default function VerticalPager(props: IReaderProps) {
-    const { pages, settings, setCurPage } = props;
+export default function VerticalReader(props: IReaderProps) {
+    const {
+        pages, settings, setCurPage, curPage, manga, chapter,
+    } = props;
 
     const classes = useStyles();
+    const history = useHistory();
+
+    const handleLoadNextonEnding = () => {
+        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+            setCurPage(0);
+            history.push(`/manga/${manga.id}/chapter/${chapter.index + 1}`);
+        }
+    };
+    useEffect(() => {
+        if (settings.loadNextonEnding) { window.addEventListener('scroll', handleLoadNextonEnding); }
+
+        return () => {
+            window.removeEventListener('scroll', handleLoadNextonEnding);
+        };
+    }, []);
 
     return (
         <div className={classes.reader}>