Fix page changes via click/hotkey in horizontal pager

Due to the way the pages got scrolled into view, the current page was not changed to the new page.
This then prevented the previous/next page to get opened via click/hotkey actions

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, PageInViewportType> = {
     [ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -52,6 +59,7 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
         transitionPageMode,
         retryFailedPagesKeyPrefix,
     } = userReaderStatePagesContext();
+    const { direction: themeDirection } = useTheme();
     const { readingMode, shouldOffsetDoubleSpreads, readingDirection } = ReaderService.useSettings();
     const { setScrollbarXSize, setScrollbarYSize } = useReaderScrollbarContext();
     const updateCurrentPageIndex = ReaderControls.useUpdateCurrentPageIndex();
@@ -138,10 +146,13 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
         const pageToScrollTo = getPage(pageToScrollToIndex, pages);
 
         if (isContinuousReadingModeActive) {
+            const directionOffset =
+                pageToScrollToIndex > currentPageIndex ? DirectionOffset.PREVIOUS : DirectionOffset.NEXT;
             const imageRef = imageRefs.current[pageToScrollTo.pagesIndex];
+
             imageRef?.scrollIntoView({
                 block: 'start',
-                inline: 'start',
+                inline: getScrollIntoViewInlineOption(directionOffset, themeDirection, readingDirection.value),
             });
         }
 

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;
         }
 

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<Theme['applyStyles']>;
 
@@ -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);
+};