From c9c1b8625a6a836fbfe01ca6986ac231fa6dda47 Mon Sep 17 00:00:00 2001
From: Constantin Piber <59023762+cpiber@users.noreply.github.com>
Date: Mon, 24 Mar 2025 23:24:36 +0100
Subject: [PATCH] Reader preserve current page on reader mode change (#906)

* Reader: Re-scroll on reader mode change

* Simplify reading mode restore

https://github.com/Suwayomi/Suwayomi-WebUI/pull/906#discussion_r2009147119

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

* Move effect as per suggestion

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

---------

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
---
 src/modules/reader/components/viewer/ReaderViewer.tsx  |  3 +++
 .../reader/hooks/useReaderPreserveScrollPosition.ts    | 10 +++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx
index 1b94ce06..042a5d90 100644
--- a/src/modules/reader/components/viewer/ReaderViewer.tsx
+++ b/src/modules/reader/components/viewer/ReaderViewer.tsx
@@ -260,10 +260,13 @@ const BaseReaderViewer = forwardRef(
             scrollElementRef,
             currentChapter?.id,
             currentChapterIndex,
+            currentPageIndex,
             chaptersToRender,
             visibleChapters,
+            readingMode,
             isContinuousReadingModeActive,
             readingDirection,
+            setPageToScrollToIndex,
         );
 
         useLayoutEffect(() => {
diff --git a/src/modules/reader/hooks/useReaderPreserveScrollPosition.ts b/src/modules/reader/hooks/useReaderPreserveScrollPosition.ts
index a02fb98a..9a21775a 100644
--- a/src/modules/reader/hooks/useReaderPreserveScrollPosition.ts
+++ b/src/modules/reader/hooks/useReaderPreserveScrollPosition.ts
@@ -8,20 +8,24 @@
 
 import { RefObject, useEffect, useLayoutEffect, useRef } from 'react';
 import { ChapterIdInfo } from '@/modules/chapter/services/Chapters.ts';
-import { ReaderStateChapters, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderStateChapters, ReadingDirection, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
 import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { getPreviousNextChapterVisibility } from '@/modules/reader/utils/Reader.utils.ts';
 import { TChapterReader } from '@/modules/chapter/Chapter.types.ts';
+import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types';
 
 export const useReaderPreserveScrollPosition = (
     scrollElementRef: RefObject<HTMLElement | null>,
     currentChapterId: ChapterIdInfo['id'] | undefined,
     chapterIndex: number,
+    currentPageIndex: number,
     chaptersToRender: TChapterReader[],
     visibleChapters: ReaderStateChapters['visibleChapters'],
+    readingMode: ReadingMode,
     isContinuousReadingModeActive: boolean,
     readingDirection: ReadingDirection,
+    setPageToScrollToIndex: ReaderStatePages['setPageToScrollToIndex'],
 ) => {
     const scrollPosition = useRef({ left: 0, top: 0, scrollWidth: 0, scrollHeight: 0 });
 
@@ -91,4 +95,8 @@ export const useReaderPreserveScrollPosition = (
 
         scrollElement.scrollTo(newLeft, newTop);
     }, [currentChapterId]);
+
+    useLayoutEffect(() => {
+        setPageToScrollToIndex(currentPageIndex);
+    }, [readingMode]);
 };