Reader transition page

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -57,7 +57,7 @@ export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDes
     const { setReaderNavBarWidth } = useNavBarContext();
     const { manga } = useReaderStateMangaContext();
     const { chapters, currentChapter, nextChapter, previousChapter } = useReaderStateChaptersContext();
-    const { pages, currentPageIndex, setPageToScrollToIndex } = userReaderStatePagesContext();
+    const { pages, currentPageIndex } = userReaderStatePagesContext();
 
     const getOptionForDirection = useGetOptionForDirection();
 
@@ -126,11 +126,7 @@ export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDes
                 </Stack>
                 <Stack sx={{ p: 2, gap: 2 }}>
                     <Stack sx={{ gap: 1 }}>
-                        <ReaderNavBarDesktopPageNavigation
-                            currentPageIndex={currentPageIndex}
-                            setPageToScrollToIndex={setPageToScrollToIndex}
-                            pages={pages}
-                        />
+                        <ReaderNavBarDesktopPageNavigation currentPageIndex={currentPageIndex} pages={pages} />
                         <ReaderNavBarDesktopChapterNavigation
                             chapters={chapters}
                             currentChapter={currentChapter}

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx

@@ -23,9 +23,8 @@ import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants
 
 export const ReaderNavBarDesktopPageNavigation = ({
     currentPageIndex,
-    setPageToScrollToIndex,
     pages,
-}: Pick<ReaderStatePages, 'currentPageIndex' | 'setPageToScrollToIndex' | 'pages'>) => {
+}: Pick<ReaderStatePages, 'currentPageIndex' | 'pages'>) => {
     const { t } = useTranslation();
     const openPage = ReaderControls.useOpenPage();
     const { readingDirection } = ReaderService.useSettings();
@@ -52,7 +51,7 @@ export const ReaderNavBarDesktopPageNavigation = ({
                     labelId="reader-nav-bar-desktop-page-select"
                     label={t('reader.page_info.label.page')}
                     value={currentPage.primary.index}
-                    onChange={(e) => setPageToScrollToIndex(e.target.value as number)}
+                    onChange={(e) => openPage(e.target.value as number)}
                 >
                     {pages.map(({ primary: { index }, name }) => (
                         <MenuItem key={index} value={index}>

src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx

@@ -20,7 +20,6 @@ import { ReaderProgressBarSlotsContainer } from '@/modules/reader/components/ove
 import { ProgressBarHighlightReadPages } from '@/modules/reader/components/overlay/progress-bar/ProgressBarHighlightReadPages.tsx';
 import { ReaderProgressBarCurrentPageSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx';
 import {
-    getNextPageIndex,
     getPage,
     getPageForMousePos,
     getProgressBarPositionInfo,
@@ -29,13 +28,13 @@ import {
 import { getOptionForDirection as getOptionForDirectionImpl } from '@/theme.tsx';
 import { ReaderProgressBarSlotsActionArea } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotsActionArea.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
 
 export const ReaderProgressBar = ({
     totalPages,
     pages,
     pageLoadStates,
     currentPageIndex,
-    setPageToScrollToIndex,
     slotProps,
     slots,
     createProgressBarSlot,
@@ -65,12 +64,13 @@ export const ReaderProgressBar = ({
     };
 }) => {
     const { isDragging, setIsDragging } = useReaderProgressBarContext();
+    const openPage = ReaderControls.useOpenPage();
+    const direction = ReaderService.useGetThemeDirection();
 
     const progressBarRef = useRef<HTMLDivElement | null>(null);
 
     const isHorizontalPosition = getProgressBarPositionInfo(progressBarPosition).isHorizontal;
     const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
-    const direction = ReaderService.useGetThemeDirection();
     const getOptionForDirection = useCallback(
         <T,>(...args: Parameters<typeof getOptionForDirectionImpl<T>>) =>
             getOptionForDirectionImpl(args[0], args[1], direction),
@@ -78,10 +78,10 @@ export const ReaderProgressBar = ({
     );
 
     useHandleProgressDragging(
+        openPage,
         progressBarRef,
         isDragging,
         currentPage,
-        setPageToScrollToIndex,
         pages,
         progressBarPosition,
         getOptionForDirection,
@@ -101,7 +101,7 @@ export const ReaderProgressBar = ({
                             ? (slotProps?.progressBarPageTexts?.current?.sx ?? [])
                             : [slotProps?.progressBarPageTexts?.current?.sx]),
                     ]}
-                    onClick={() => setPageToScrollToIndex(getNextPageIndex('previous', currentPage.pagesIndex, pages))}
+                    onClick={() => openPage('previous', 'ltr')}
                 >
                     {currentPage.name}
                 </ReaderProgressBarPageNumber>
@@ -115,7 +115,7 @@ export const ReaderProgressBar = ({
                                 return;
                             }
 
-                            setPageToScrollToIndex(
+                            openPage(
                                 getPageForMousePos(
                                     event.touches[0],
                                     progressBarRef.current.getBoundingClientRect(),
@@ -132,7 +132,7 @@ export const ReaderProgressBar = ({
                                 return;
                             }
 
-                            setPageToScrollToIndex(
+                            openPage(
                                 getPageForMousePos(
                                     event,
                                     progressBarRef.current.getBoundingClientRect(),
@@ -195,7 +195,7 @@ export const ReaderProgressBar = ({
                             ? (slotProps?.progressBarPageTexts?.total?.sx ?? [])
                             : [slotProps?.progressBarPageTexts?.total?.sx]),
                     ]}
-                    onClick={() => setPageToScrollToIndex(getNextPageIndex('next', currentPage.pagesIndex, pages))}
+                    onClick={() => openPage('next', 'ltr')}
                 >
                     {totalPages}
                 </ReaderProgressBarPageNumber>