show last read page on initial load

This commit is contained in:
Aria Moradi 2021-05-18 02:26:45 +04:30
parent 49dc9fe5f6
commit d5691fd81c
3 changed files with 48 additions and 9 deletions

View File

@ -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;

View File

@ -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}
/>
))
}

View File

@ -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}`);
}
};