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>
This commit is contained in:
Constantin Piber
2025-03-24 23:24:36 +01:00
committed by GitHub
parent 8079cadae5
commit c9c1b8625a
2 changed files with 12 additions and 1 deletions

View File

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