diff --git a/src/modules/reader/utils/Reader.utils.ts b/src/modules/reader/utils/Reader.utils.ts index 5701875a..7ad7f012 100644 --- a/src/modules/reader/utils/Reader.utils.ts +++ b/src/modules/reader/utils/Reader.utils.ts @@ -6,7 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { MutableRefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; +import { MutableRefObject, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { Direction } from '@mui/material/styles'; import { ReaderPageSpreadState, @@ -33,7 +33,6 @@ import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts'; import { coerceIn } from '@/lib/HelperFunctions.ts'; import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts'; -import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx'; export const getInitialReaderPageIndex = ( resumeMode: ReaderResumeMode, @@ -232,46 +231,37 @@ export const useReaderHandlePageSelection = ( readingDirection: ReadingDirection, scrollElementRef: MutableRefObject, ) => { - const pageToScrollTo = useMemo(() => getPage(pageToScrollToIndex ?? 0, pages), [pageToScrollToIndex, pages]); + useLayoutEffect(() => { + if (pageToScrollToIndex == null) { + return; + } - const imageRef = imageRefs.current[pageToScrollTo.pagesIndex]; - const ref = isContinuousReadingModeActive ? imageRef : scrollElementRef; + const pageToScrollTo = getPage(pageToScrollToIndex, pages); - useResizeObserver( - ref, - useCallback( - (entries, observer) => { - if (pageToScrollToIndex == null) { - return; - } + if (isContinuousReadingModeActive) { + const directionOffset = + pageToScrollToIndex > currentPageIndex ? DirectionOffset.PREVIOUS : DirectionOffset.NEXT; + const imageRef = imageRefs.current[pageToScrollTo.pagesIndex]; - const element = entries[0].target as HTMLElement; + imageRef?.scrollIntoView({ + block: 'start', + inline: getScrollIntoViewInlineOption(directionOffset, themeDirection, readingDirection), + }); + } - if (isContinuousReadingModeActive) { - const directionOffset = - pageToScrollToIndex > currentPageIndex ? DirectionOffset.PREVIOUS : DirectionOffset.NEXT; + if (!isContinuousReadingModeActive) { + scrollElementRef.current?.scrollTo( + getScrollToXForReadingDirection(scrollElementRef.current, themeDirection, readingDirection), + 0, + ); + } - element.scrollIntoView({ - block: 'start', - inline: getScrollIntoViewInlineOption(directionOffset, themeDirection, readingDirection), - }); - } + const newPageIndex = getNextIndexFromPage(pageToScrollTo); + const isLastPage = newPageIndex === totalPages - 1; - if (!isContinuousReadingModeActive) { - element.scrollTo(getScrollToXForReadingDirection(element, themeDirection, readingDirection), 0); - } - - const newPageIndex = getNextIndexFromPage(pageToScrollTo); - const isLastPage = newPageIndex === totalPages - 1; - - setPageToScrollToIndex(null); - updateCurrentPageIndex(newPageIndex, !isLastPage); - - observer.disconnect(); - }, - [pageToScrollToIndex], - ), - ); + setPageToScrollToIndex(null); + updateCurrentPageIndex(newPageIndex, !isLastPage); + }, [pageToScrollToIndex]); }; export const useReaderHideCursorOnInactivity = (scrollElementRef: MutableRefObject) => {