diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx index 2387a235..76aa098d 100644 --- a/src/modules/reader/components/viewer/ReaderViewer.tsx +++ b/src/modules/reader/components/viewer/ReaderViewer.tsx @@ -17,6 +17,7 @@ import { useState, } from 'react'; import Stack from '@mui/material/Stack'; +import { useTheme } from '@mui/material/styles'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { PageInViewportType, ReadingDirection, ReadingMode } from '@/modules/reader/types/Reader.types.ts'; import { ReaderPagedPager } from '@/modules/reader/components/viewer/pager/ReaderPagedPager.tsx'; @@ -24,13 +25,19 @@ import { ReaderDoublePagedPager } from '@/modules/reader/components/viewer/pager import { ReaderHorizontalPager } from '@/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx'; import { ReaderVerticalPager } from '@/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx'; import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx'; -import { createPagesData, getDoublePageModePages, isSpreadPage } from '@/modules/reader/utils/ReaderPager.utils.tsx'; +import { + createPagesData, + getDoublePageModePages, + getScrollIntoViewInlineOption, + isSpreadPage, +} from '@/modules/reader/utils/ReaderPager.utils.tsx'; import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx'; import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx'; import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts'; import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx'; import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx'; import { useMouseDragScroll } from '@/modules/core/hooks/useMouseDragScroll.tsx'; +import { DirectionOffset } from '@/Base.types.ts'; const READING_MODE_TO_IN_VIEWPORT_TYPE: Record = { [ReadingMode.SINGLE_PAGE]: PageInViewportType.X, @@ -52,6 +59,7 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef currentPageIndex ? DirectionOffset.PREVIOUS : DirectionOffset.NEXT; const imageRef = imageRefs.current[pageToScrollTo.pagesIndex]; + imageRef?.scrollIntoView({ block: 'start', - inline: 'start', + inline: getScrollIntoViewInlineOption(directionOffset, themeDirection, readingDirection.value), }); } diff --git a/src/modules/reader/services/ReaderControls.ts b/src/modules/reader/services/ReaderControls.ts index 5d2416d4..5d895475 100644 --- a/src/modules/reader/services/ReaderControls.ts +++ b/src/modules/reader/services/ReaderControls.ts @@ -302,7 +302,7 @@ export class ReaderControls { return; } - const hasPageIndexChanged = pageIndex !== currentPageIndex; + const hasPageIndexChanged = endReached || pageIndex !== currentPageIndex; if (!hasPageIndexChanged) { return; } @@ -353,7 +353,7 @@ export class ReaderControls { // handle cases where the last page is too small to ever be the "firstVisibleImageIndex" if (isEndReached) { - updateCurrentPageIndex(lastPageIndex, false); + updateCurrentPageIndex(firstVisibleImageIndex, false, true); return; } diff --git a/src/modules/reader/utils/ReaderPager.utils.tsx b/src/modules/reader/utils/ReaderPager.utils.tsx index 0ffd2d03..ad5986cd 100644 --- a/src/modules/reader/utils/ReaderPager.utils.tsx +++ b/src/modules/reader/utils/ReaderPager.utils.tsx @@ -6,7 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { Theme } from '@mui/material/styles'; +import { Direction, Theme } from '@mui/material/styles'; import { ReactNode } from 'react'; import { IReaderSettings, @@ -23,6 +23,9 @@ import { requestManager } from '@/lib/requests/RequestManager.ts'; import { ReaderPage } from '@/modules/reader/components/viewer/ReaderPage.tsx'; import { reverseString } from '@/util/Strings.ts'; import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx'; +import { DirectionOffset } from '@/Base.types.ts'; +import { getOptionForDirection } from '@/theme.tsx'; +import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx'; type CSSObject = ReturnType; @@ -424,3 +427,25 @@ export const isTransitionPageVisible = ( activeMode: ReaderTransitionPageMode, readingMode: IReaderSettings['readingMode'], ): boolean => [ReaderTransitionPageMode.BOTH, mode].includes(activeMode) || isContinuousReadingMode(readingMode); + +export const getScrollIntoViewInlineOption = ( + offset: DirectionOffset, + themeDirection: Direction, + readingDirection: ReadingDirection, +): ScrollIntoViewOptions['inline'] => { + const themeDirectionForReadingDirection = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection]; + + if (themeDirection === 'ltr') { + if (offset === DirectionOffset.PREVIOUS) { + return getOptionForDirection('start', 'end', themeDirectionForReadingDirection); + } + + return getOptionForDirection('start', 'end', themeDirectionForReadingDirection); + } + + if (offset === DirectionOffset.PREVIOUS) { + return getOptionForDirection('end', 'start', themeDirectionForReadingDirection); + } + + return getOptionForDirection('end', 'start', themeDirectionForReadingDirection); +};