diff --git a/webUI/react/src/components/reader/Page.tsx b/webUI/react/src/components/reader/Page.tsx
index 9bc6b086..f934cc12 100644
--- a/webUI/react/src/components/reader/Page.tsx
+++ b/webUI/react/src/components/reader/Page.tsx
@@ -60,11 +60,13 @@ function LazyImage(props: IProps) {
};
useEffect(() => {
- window.addEventListener('scroll', handleScroll);
+ if (settings.readerType === 'Webtoon' || settings.readerType === 'ContinuesVertical') {
+ window.addEventListener('scroll', handleScroll);
- return () => {
- window.removeEventListener('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 (
-
+
);
-}
+});
+
+export default Page;
diff --git a/webUI/react/src/components/reader/pager/VerticalPager.tsx b/webUI/react/src/components/reader/pager/VerticalPager.tsx
index cf0b3890..039c4d54 100644
--- a/webUI/react/src/components/reader/pager/VerticalPager.tsx
+++ b/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
(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 (
{
@@ -52,6 +67,7 @@ export default function VerticalReader(props: IReaderProps) {
src={page.src}
setCurPage={setCurPage}
settings={settings}
+ ref={page.index === initialScroll ? initialPageRef : null}
/>
))
}
diff --git a/webUI/react/src/screens/Reader.tsx b/webUI/react/src/screens/Reader.tsx
index 7436dc8a..53e007c3 100644
--- a/webUI/react/src/screens/Reader.tsx
+++ b/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 (
@@ -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}`);
}
};