Fix reader nav bar scroll to page (#236)

* Correctly scroll to page

Using "curPage" as the "initialPage" broke "scrolling up".
The page got reset to the first page in that case

* Support resume and scrolling to page for "DoublePagedPager"

* Support resume and scrolling to page for "PagedPager"

* Prevent "ReaderNavBar" from disappearing in "VerticalPager"

Due to handling the overflow on the "root" div and the "nav bar" being sticky and having a combined with of 100vw with the "vertical pager", once the first page was reached, that was behind the 100vw, the "nav bar" got moved out of the screen.
This made using the "nav bar" unusable for the "vertical pager".

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) {
             <Slide direction="right" in={drawerOpen} timeout={200} appear={false} mountOnEnter unmountOnExit>
                 <Root
                     sx={{
-                        position: settings.staticNav ? 'sticky' : 'fixed',
+                        position: 'fixed',
                     }}
                 >
                     <header>
@@ -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))

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<HTMLDivElement>(null);
     const pagesRef = useRef<HTMLImageElement[]>([]);
@@ -186,6 +186,10 @@ export default function DoublePagedPager(props: IReaderProps) {
         };
     }, [selfRef, curPage, settings.readerType]);
 
+    useEffect(() => {
+        setCurPage(initialPage);
+    }, [initialPage]);
+
     return (
         <Box ref={selfRef}>
             <Box id="preload" sx={{ display: 'none' }}>

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<HTMLDivElement>(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 (
         <Box
             ref={selfRef}

src/screens/Reader.tsx

@@ -73,6 +73,7 @@ export default function Reader() {
     });
     const [chapter, setChapter] = useState<IChapter | IPartialChapter>(initialChapter());
     const [curPage, setCurPage] = useState<number>(0);
+    const [pageToScrollTo, setPageToScrollTo] = useState<number | undefined>(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 (
-        <Box sx={{ width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw' }}>
+        <Box
+            sx={{
+                width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw',
+                marginLeft: settings.staticNav ? '300px' : 'unset',
+            }}
+        >
             <PageNumber settings={settings} curPage={curPage} pageCount={chapter.pageCount} />
             <ReaderComponent
                 pages={pages}
                 pageCount={chapter.pageCount}
                 setCurPage={setCurPage}
-                initialPage={curPage}
+                initialPage={initialPage}
                 curPage={curPage}
                 settings={settings}
                 manga={manga}