prevPage handle

* go back to previous chapter on page 0 when prevPage is triggered

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

@@ -22,7 +22,7 @@ const useStyles = makeStyles({
 
 export default function PagedReader(props: IReaderProps) {
     const {
-        pages, settings, setCurPage, curPage, nextChapter,
+        pages, settings, setCurPage, curPage, nextChapter, prevChapter,
     } = props;
 
     const classes = useStyles();
@@ -38,7 +38,7 @@ export default function PagedReader(props: IReaderProps) {
     }
 
     function prevPage() {
-        if (curPage > 0) { setCurPage(curPage - 1); }
+        if (curPage > 0) { setCurPage(curPage - 1); } else if (curPage === 0) { prevChapter(); }
     }
 
     function keyboardControl(e:KeyboardEvent) {

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

@@ -21,7 +21,7 @@ const useStyles = makeStyles({
 
 export default function VerticalReader(props: IReaderProps) {
     const {
-        pages, settings, setCurPage, curPage, chapter, nextChapter,
+        pages, settings, setCurPage, curPage, chapter, nextChapter, prevChapter,
     } = props;
 
     const classes = useStyles();
@@ -47,6 +47,8 @@ export default function VerticalReader(props: IReaderProps) {
                 pagesRef.current[curPage - 1]?.scrollIntoView();
                 setCurPage(curPage - 1);
             }
+        } else if (curPage === 0) {
+            prevChapter();
         }
     }
 

webUI/react/src/screens/Reader.tsx

@@ -139,6 +139,7 @@ export default function Reader() {
         }
     }, [curPage]);
 
+    // return spinner while chpater data is loading
     if (chapter.pageCount === -1) {
         return (
             <div className={classes.loading}>
@@ -158,6 +159,12 @@ export default function Reader() {
         }
     };
 
+    const prevChapter = () => {
+        if (chapter.index > 1) {
+            history.push(`/manga/${manga.id}/chapter/${chapter.index - 1}`);
+        }
+    };
+
     const pages = range(chapter.pageCount).map((index) => ({
         index,
         src: `${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterIndex}/page/${index}`,
@@ -181,6 +188,7 @@ export default function Reader() {
                 manga={manga}
                 chapter={chapter}
                 nextChapter={nextChapter}
+                prevChapter={prevChapter}
             />
         </div>
     );

webUI/react/src/typings.d.ts

@@ -117,4 +117,5 @@ interface IReaderProps {
     manga: IMangaCard | IManga
     chapter: IChapter | IPartialChpter
     nextChapter: () => void
+    prevChapter: () => void
 }