From ad9a12b2ec76fba0658d45d2d6c280caeaf046f7 Mon Sep 17 00:00:00 2001
From: Daniel <50052685+schroda@users.noreply.github.com>
Date: Sun, 12 Feb 2023 16:12:17 +0100
Subject: [PATCH] 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           |  8 ++++----
 src/components/reader/pager/DoublePagedPager.tsx |  6 +++++-
 src/components/reader/pager/PagedPager.tsx       | 10 +++++++++-
 src/screens/Reader.tsx                           | 15 ++++++++++++---
 4 files changed, 30 insertions(+), 9 deletions(-)

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) {
             <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))
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<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' }}>
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<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}
diff --git a/src/screens/Reader.tsx b/src/screens/Reader.tsx
index 50fc914b..a4d2ad03 100644
--- a/src/screens/Reader.tsx
+++ b/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}