diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx index d7b19266..80c6b0f9 100644 --- a/src/components/navbar/ReaderNavBar.tsx +++ b/src/components/navbar/ReaderNavBar.tsx @@ -116,7 +116,7 @@ interface IProps { manga: IManga | IMangaCard; chapter: IChapter; curPage: number; - setCurPage: (page: number) => void; + scrollToPage: (page: number) => void; } export default function ReaderNavBar(props: IProps) { @@ -128,7 +128,7 @@ export default function ReaderNavBar(props: IProps) { }>(); const { prevDrawerOpen, prevSettingsCollapseOpen } = location.state ?? {}; - const { settings, setSettingValue, manga, chapter, curPage, setCurPage } = props; + const { settings, setSettingValue, manga, chapter, curPage, scrollToPage } = props; const [drawerOpen, setDrawerOpen] = useState(settings.staticNav || prevDrawerOpen); const [updateDrawerOnRender, setUpdateDrawerOnRender] = useState(true); @@ -190,7 +190,7 @@ export default function ReaderNavBar(props: IProps) {
@@ -264,7 +264,7 @@ export default function ReaderNavBar(props: IProps) { value={chapter.pageCount > -1 ? curPage : ''} displayEmpty onChange={({ target: { value: selectedPage } }) => { - setCurPage(Number(selectedPage)); + scrollToPage(Number(selectedPage)); }} > {Array(Math.max(0, chapter.pageCount)) diff --git a/src/components/reader/pager/DoublePagedPager.tsx b/src/components/reader/pager/DoublePagedPager.tsx index 54ba66f0..e4faeeed 100644 --- a/src/components/reader/pager/DoublePagedPager.tsx +++ b/src/components/reader/pager/DoublePagedPager.tsx @@ -30,7 +30,7 @@ const isSinglePage = (index: number, spreadPages: boolean[]): boolean => { }; export default function DoublePagedPager(props: IReaderProps) { - const { pages, settings, setCurPage, curPage, nextChapter, prevChapter } = props; + const { pages, settings, setCurPage, initialPage, curPage, nextChapter, prevChapter } = props; const selfRef = useRef(null); const pagesRef = useRef([]); @@ -186,6 +186,10 @@ export default function DoublePagedPager(props: IReaderProps) { }; }, [selfRef, curPage, settings.readerType]); + useEffect(() => { + setCurPage(initialPage); + }, [initialPage]); + return ( diff --git a/src/components/reader/pager/PagedPager.tsx b/src/components/reader/pager/PagedPager.tsx index 20587c00..ba74e218 100644 --- a/src/components/reader/pager/PagedPager.tsx +++ b/src/components/reader/pager/PagedPager.tsx @@ -10,7 +10,7 @@ import { Box } from '@mui/system'; import Page from 'components/reader/Page'; export default function PagedReader(props: IReaderProps) { - const { pages, settings, setCurPage, curPage, nextChapter, prevChapter } = props; + const { pages, settings, setCurPage, initialPage, curPage, nextChapter, prevChapter } = props; const selfRef = useRef(null); @@ -86,6 +86,14 @@ export default function PagedReader(props: IReaderProps) { }; }, [selfRef, curPage, settings.readerType]); + useEffect(() => { + // Delay scrolling to next cycle + setTimeout(() => { + // scroll last read page into view when initialPage changes + changePage(initialPage); + }, 0); + }, [initialPage]); + return ( (initialChapter()); const [curPage, setCurPage] = useState(0); + const [pageToScrollTo, setPageToScrollTo] = useState(undefined); const { setOverride, setTitle } = useContext(NavbarContext); const { settings: defaultSettings, loading: areDefaultSettingsLoading } = useDefaultReaderSettings(); @@ -112,7 +113,7 @@ export default function Reader() { manga={manga} chapter={chapter as IChapter} curPage={curPage} - setCurPage={setCurPage} + scrollToPage={setPageToScrollTo} /> ), }); @@ -207,14 +208,22 @@ export default function Reader() { const ReaderComponent = getReaderComponent(settings.readerType); + // last page, also probably read = true, we will load the first page. + const initialPage = pageToScrollTo ?? (chapter.lastPageRead === chapter.pageCount - 1 ? 0 : chapter.lastPageRead); + return ( - +