show last read page on initial load

webUI/react/src/components/reader/Page.tsx

@@ -60,11 +60,13 @@ function LazyImage(props: IProps) {
     };
 
     useEffect(() => {
+        if (settings.readerType === 'Webtoon' || settings.readerType === 'ContinuesVertical') {
             window.addEventListener('scroll', handleScroll);
 
             return () => {
                 window.removeEventListener('scroll', handleScroll);
             };
+        } return () => {};
     }, [handleScroll]);
 
     useEffect(() => {
@@ -92,14 +94,14 @@ function LazyImage(props: IProps) {
     );
 }
 
-export default function Page(props: IProps) {
+const Page = React.forwardRef((props: IProps, ref: any) => {
     const {
         src, index, setCurPage, settings,
     } = props;
     const classes = useStyles(settings)();
 
     return (
-        <div style={{ margin: '0 auto' }}>
+        <div ref={ref} style={{ margin: '0 auto' }}>
             <LazyImage
                 src={src}
                 index={index}
@@ -108,4 +110,6 @@ export default function Page(props: IProps) {
             />
         </div>
     );
-}
+});
+
+export default Page;

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

@@ -7,7 +7,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import { makeStyles } from '@material-ui/core/styles';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import Page from '../Page';
 
@@ -29,6 +29,9 @@ export default function VerticalReader(props: IReaderProps) {
     const classes = useStyles();
     const history = useHistory();
 
+    const [initialScroll, setInitialScroll] = useState(-1);
+    const initialPageRef = useRef<HTMLDivElement>(null);
+
     const handleLoadNextonEnding = () => {
         if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
             nextChapter();
@@ -42,6 +45,18 @@ export default function VerticalReader(props: IReaderProps) {
         };
     }, []);
 
+    useEffect(() => {
+        if ((chapter as IChapter).lastPageRead > -1) {
+            setInitialScroll((chapter as IChapter).lastPageRead);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (initialScroll > -1) {
+            initialPageRef.current?.scrollIntoView();
+        }
+    }, [initialScroll, initialPageRef.current]);
+
     return (
         <div className={classes.reader}>
             {
@@ -52,6 +67,7 @@ export default function VerticalReader(props: IReaderProps) {
                         src={page.src}
                         setCurPage={setCurPage}
                         settings={settings}
+                        ref={page.index === initialScroll ? initialPageRef : null}
                     />
                 ))
             }

webUI/react/src/screens/Reader.tsx

@@ -118,14 +118,28 @@ export default function Reader() {
 
     useEffect(() => {
         setChapter(initialChapter);
-        setCurPage(0);
         client.get(`/api/v1/manga/${mangaId}/chapter/${chapterIndex}`)
             .then((response) => response.data)
             .then((data:IChapter) => {
                 setChapter(data);
+                setCurPage(data.lastPageRead);
             });
     }, [chapterIndex]);
 
+    useEffect(() => {
+        if (curPage !== -1) {
+            const formData = new FormData();
+            formData.append('lastPageRead', curPage.toString());
+            client.patch(`/api/v1/manga/${manga.id}/chapter/${chapter.index}`, formData);
+        }
+
+        if (curPage === chapter.pageCount - 1) {
+            const formDataRead = new FormData();
+            formDataRead.append('read', 'true');
+            client.patch(`/api/v1/manga/${manga.id}/chapter/${chapter.index}`, formDataRead);
+        }
+    }, [curPage]);
+
     if (chapter.pageCount === -1) {
         return (
             <div className={classes.loading}>
@@ -136,6 +150,11 @@ export default function Reader() {
 
     const nextChapter = () => {
         if (chapter.index < chapter.chapterCount) {
+            const formData = new FormData();
+            formData.append('lastPageRead', `${chapter.pageCount - 1}`);
+            formData.append('read', 'true');
+            client.patch(`/api/v1/manga/${manga.id}/chapter/${chapter.index}`, formData);
+
             history.push(`/manga/${manga.id}/chapter/${chapter.index + 1}`);
         }
     };