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/navbar/ReaderNavBar.tsx

@@ -143,6 +143,7 @@ export const defaultReaderSettings = () => ({
     staticNav: false,
     showPageNumber: true,
     continuesPageGap: false,
+    loadNextonEnding: false,
     readerType: 'ContinuesVertical',
 } as IReaderSettings);
 
@@ -277,6 +278,16 @@ export default function ReaderNavBar(props: IProps) {
                                     />
                                 </ListItemSecondaryAction>
                             </ListItem>
+                            <ListItem>
+                                <ListItemText primary="Load next chapter at ending" />
+                                <ListItemSecondaryAction>
+                                    <Switch
+                                        edge="end"
+                                        checked={settings.loadNextonEnding}
+                                        onChange={(e) => setSettingValue('loadNextonEnding', e.target.checked)}
+                                    />
+                                </ListItemSecondaryAction>
+                            </ListItem>
                             <ListItem>
                                 <ListItemText primary="Reader Type" />
                                 <Select

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) {
+export default function VerticalReader(props: IReaderProps) {
-    const { pages, settings, setCurPage } = props;
+    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}>

webUI/react/src/screens/Reader.tsx

@@ -70,7 +70,6 @@ export default function Reader() {
     const [manga, setManga] = useState<IMangaCard | IManga>({ id: +mangaId, title: '', thumbnailUrl: '' });
     const [chapter, setChapter] = useState<IChapter | IPartialChpter>(initialChapter());
     const [curPage, setCurPage] = useState<number>(0);
-
     const { setOverride, setTitle } = useContext(NavbarContext);
     useEffect(() => {
         // make sure settings has all the keys
@@ -153,6 +152,8 @@ export default function Reader() {
                 setCurPage={setCurPage}
                 curPage={curPage}
                 settings={settings}
+                manga={manga}
+                chapter={chapter}
             />
         </div>
     );

webUI/react/src/typings.d.ts

@@ -99,6 +99,7 @@ type ReaderType =
 interface IReaderSettings{
     staticNav: boolean
     showPageNumber: boolean
+    loadNextonEnding: boolean
     readerType: ReaderType
 }
 
@@ -113,4 +114,6 @@ interface IReaderProps {
     setCurPage: React.Dispatch<React.SetStateAction<number>>
     curPage: number
     settings: IReaderSettings
+    manga: IMangaCard | IManga
+    chapter: IChapter | IPartialChpter
 }