Simplify ReaderControls#useOpenPage

2025-09-20 19:56:31 +02:00
parent f5c7379fc4
commit ca5920919e
5 changed files with 94 additions and 127 deletions
--- a/src/features/reader/auto-scroll/ReaderAutoScroll.tsx
+++ b/src/features/reader/auto-scroll/ReaderAutoScroll.tsx
@@ -20,11 +20,9 @@ import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { getReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';

 const BaseReaderAutoScroll = ({
-    openPage,
    themeDirection,
    combinedDirection,
 }: {
-    openPage: ReturnType<typeof ReaderControls.useOpenPage>;
    themeDirection: Direction;
    combinedDirection: Direction;
 }) => {
@@ -49,8 +47,8 @@ const BaseReaderAutoScroll = ({
    const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);

    const changePage = useCallback(() => {
-        openPage('next', 'ltr');
-    }, [openPage]);
+        ReaderControls.openPage('next', 'ltr');
+    }, []);

    const automaticScrolling = useAutomaticScrolling(
        isContinuousReadingModeActive ? scrollRef : changePage,
@@ -79,9 +77,8 @@ const BaseReaderAutoScroll = ({
 export const ReaderAutoScroll = withPropsFrom(
    memo(BaseReaderAutoScroll),
    [
-        () => ({ openPage: ReaderControls.useOpenPage() }),
        () => ({ themeDirection: useTheme().direction }),
        () => ({ combinedDirection: ReaderService.useGetThemeDirection() }),
    ],
-    ['openPage', 'themeDirection', 'combinedDirection'],
+    ['themeDirection', 'combinedDirection'],
 );
--- a/src/features/reader/hotkeys/ReaderHotkeys.tsx
+++ b/src/features/reader/hotkeys/ReaderHotkeys.tsx
@@ -67,10 +67,8 @@ export const ReaderHotkeys = ({
    }));
    const exitReader = ReaderService.useExit();

-    const openPage = ReaderControls.useOpenPage();
-
-    useHotkeys(hotkeys[ReaderHotkey.PREVIOUS_PAGE], () => openPage('previous'), [openPage]);
-    useHotkeys(hotkeys[ReaderHotkey.NEXT_PAGE], () => openPage('next'), [openPage]);
+    useHotkeys(hotkeys[ReaderHotkey.PREVIOUS_PAGE], () => ReaderControls.openPage('previous'));
+    useHotkeys(hotkeys[ReaderHotkey.NEXT_PAGE], () => ReaderControls.openPage('next'));
    useHotkeys(
        hotkeys[ReaderHotkey.SCROLL_BACKWARD],
        () => {
--- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
+++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
@@ -14,18 +14,13 @@ import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import { Select } from '@/base/components/inputs/Select.tsx';
 import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
-import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
 import { ReaderNavBarDesktopNextPreviousButton } from '@/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopNextPreviousButton.tsx';
 import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
+import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';

-const BaseReaderNavBarDesktopPageNavigation = ({
-    openPage,
-}: {
-    openPage: ReturnType<typeof ReaderControls.useOpenPage>;
-}) => {
+const BaseReaderNavBarDesktopPageNavigation = () => {
    const { t } = useTranslation();
    const getOptionForDirection = useGetOptionForDirection();
    const { currentPageIndex, pages } = useReaderStoreShallow((state) => ({
@@ -47,7 +42,7 @@ const BaseReaderNavBarDesktopPageNavigation = ({
                    getNextIndexFromPage(currentPage) === getNextIndexFromPage(pages.slice(-1)[0]),
                    direction,
                )}
-                onClick={() => openPage('previous', undefined, false)}
+                onClick={() => ReaderControls.openPage('previous', undefined, false)}
            />
            <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
                <InputLabel id="reader-nav-bar-desktop-page-select">{t('reader.page_info.label.page')}</InputLabel>
@@ -55,7 +50,7 @@ const BaseReaderNavBarDesktopPageNavigation = ({
                    labelId="reader-nav-bar-desktop-page-select"
                    label={t('reader.page_info.label.page')}
                    value={getNextIndexFromPage(currentPage)}
-                    onChange={(e) => openPage(e.target.value as number, undefined, false)}
+                    onChange={(e) => ReaderControls.openPage(e.target.value as number, undefined, false)}
                >
                    {pages.map((page) => (
                        <MenuItem key={getNextIndexFromPage(page)} value={getNextIndexFromPage(page)}>
@@ -72,14 +67,10 @@ const BaseReaderNavBarDesktopPageNavigation = ({
                    !currentPage.primary.index,
                    direction,
                )}
-                onClick={() => openPage('next', undefined, false)}
+                onClick={() => ReaderControls.openPage('next', undefined, false)}
            />
        </Stack>
    );
 };

-export const ReaderNavBarDesktopPageNavigation = withPropsFrom(
-    memo(BaseReaderNavBarDesktopPageNavigation),
-    [() => ({ openPage: ReaderControls.useOpenPage() })],
-    ['openPage'],
-);
+export const ReaderNavBarDesktopPageNavigation = memo(BaseReaderNavBarDesktopPageNavigation);
--- a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx
@@ -28,7 +28,6 @@ import { getOptionForDirection as getOptionForDirectionImpl } from '@/features/t
 import { ReaderProgressBarSlotsActionArea } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotsActionArea.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
-import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { ReaderProgressBarSlotWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotWrapper.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { ReadingMode } from '@/features/reader/Reader.types.ts';
@@ -39,7 +38,6 @@ const BaseReaderProgressBar = ({
    slots,
    createProgressBarSlot,
    progressBarPosition,
-    openPage,
    direction,
    fullSegmentClicks,
 }: ReaderProgressBarProps &
@@ -61,7 +59,6 @@ const BaseReaderProgressBar = ({
        slots?: {
            progressBarCurrentPage?: ReactNode;
        };
-        openPage: ReturnType<typeof ReaderControls.useOpenPage>;
        direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
        fullSegmentClicks: boolean;
    }) => {
@@ -114,7 +111,6 @@ const BaseReaderProgressBar = ({
    );

    ReaderControls.useHandleProgressDragging(
-        openPage,
        progressBarRef,
        isDragging,
        currentPage,
@@ -131,7 +127,7 @@ const BaseReaderProgressBar = ({

        const isTouchEvent = 'touches' in e;

-        openPage(
+        ReaderControls.openPage(
            getNextIndexFromPage(
                getPageForMousePos(
                    isTouchEvent ? e.touches[0] : e,
@@ -170,7 +166,7 @@ const BaseReaderProgressBar = ({
                            ? (slotProps?.progressBarPageTexts?.current?.sx ?? [])
                            : [slotProps?.progressBarPageTexts?.current?.sx]),
                    ]}
-                    onClick={() => openPage('previous', 'ltr', false)}
+                    onClick={() => ReaderControls.openPage('previous', 'ltr', false)}
                >
                    {currentPage.name}
                </ReaderProgressBarPageNumber>
@@ -235,7 +231,7 @@ const BaseReaderProgressBar = ({
                            ? (slotProps?.progressBarPageTexts?.total?.sx ?? [])
                            : [slotProps?.progressBarPageTexts?.total?.sx]),
                    ]}
-                    onClick={() => openPage('next', 'ltr', false)}
+                    onClick={() => ReaderControls.openPage('next', 'ltr', false)}
                >
                    {totalPages}
                </ReaderProgressBarPageNumber>
@@ -244,8 +240,4 @@ const BaseReaderProgressBar = ({
    );
 };

-export const ReaderProgressBar = withPropsFrom(
-    memo(BaseReaderProgressBar),
-    [() => ({ openPage: ReaderControls.useOpenPage() })],
-    ['openPage'],
-);
+export const ReaderProgressBar = memo(BaseReaderProgressBar);
--- a/src/features/reader/services/ReaderControls.ts
+++ b/src/features/reader/services/ReaderControls.ts
@@ -311,106 +311,97 @@ export class ReaderControls {
        });
    }

-    static useOpenPage(): (
-        page: number | 'previous' | 'next',
-        forceDirection?: Direction,
-        hideOverlay?: boolean,
-    ) => void {
-        return useCallback((page, forceDirection, hideOverlay: boolean = true) => {
-            const {
-                pages: { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode },
-                settings: { readingDirection, readingMode, shouldShowTransitionPage },
-            } = getReaderStore();
+    static openPage(page: number | 'previous' | 'next', forceDirection?: Direction, hideOverlay: boolean = true): void {
+        const {
+            pages: { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode },
+            settings: { readingDirection, readingMode, shouldShowTransitionPage },
+        } = getReaderStore();

-            const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
+        const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];

-            const convertedPage = getOptionForDirection(
-                page,
-                page === 'previous' ? 'next' : 'previous',
-                forceDirection ?? direction,
-            );
+        const convertedPage = getOptionForDirection(
+            page,
+            page === 'previous' ? 'next' : 'previous',
+            forceDirection ?? direction,
+        );

-            const currentPage = getPage(currentPageIndex, pages);
-            const previousPageIndex = getNextPageIndex('previous', currentPage.pagesIndex, pages);
-            const nextPageIndex = getNextPageIndex('next', currentPage.pagesIndex, pages);
-            const indexOfFirstPage = getNextIndexFromPage(pages[0]);
-            const indexOfLastPage = getNextIndexFromPage(pages[pages.length - 1]);
+        const currentPage = getPage(currentPageIndex, pages);
+        const previousPageIndex = getNextPageIndex('previous', currentPage.pagesIndex, pages);
+        const nextPageIndex = getNextPageIndex('next', currentPage.pagesIndex, pages);
+        const indexOfFirstPage = getNextIndexFromPage(pages[0]);
+        const indexOfLastPage = getNextIndexFromPage(pages[pages.length - 1]);

-            const isFirstPage = currentPage.primary.index === 0;
-            const isLastPage = currentPageIndex === indexOfLastPage;
-            const isATransitionPageVisibleFlag = isATransitionPageVisible(transitionPageMode, readingMode.value);
-            const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
+        const isFirstPage = currentPage.primary.index === 0;
+        const isLastPage = currentPageIndex === indexOfLastPage;
+        const isATransitionPageVisibleFlag = isATransitionPageVisible(transitionPageMode, readingMode.value);
+        const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);

-            if (hideOverlay) {
-                getReaderStore().overlay.setIsVisible(false);
-                getReaderStore().tapZone.setShowPreview(false);
-            }
+        if (hideOverlay) {
+            getReaderStore().overlay.setIsVisible(false);
+            getReaderStore().tapZone.setShowPreview(false);
+        }

-            const hideTransitionPage = () => setTransitionPageMode(ReaderTransitionPageMode.NONE);
+        const hideTransitionPage = () => setTransitionPageMode(ReaderTransitionPageMode.NONE);

-            if (typeof page === 'number') {
-                setPageToScrollToIndex(page);
-                hideTransitionPage();
-                return;
-            }
+        if (typeof page === 'number') {
+            setPageToScrollToIndex(page);
+            hideTransitionPage();
+            return;
+        }

-            const areContinuousPagerTransitionPagesVisible =
-                isContinuousReadingModeActive && isATransitionPageVisibleFlag;
-            const isPreviousTransitionPageVisible =
-                (!isContinuousReadingModeActive && transitionPageMode === ReaderTransitionPageMode.PREVIOUS) ||
-                areContinuousPagerTransitionPagesVisible;
-            const isNextTransitionPageVisible =
-                (!isContinuousReadingModeActive && transitionPageMode === ReaderTransitionPageMode.NEXT) ||
-                areContinuousPagerTransitionPagesVisible;
+        const areContinuousPagerTransitionPagesVisible = isContinuousReadingModeActive && isATransitionPageVisibleFlag;
+        const isPreviousTransitionPageVisible =
+            (!isContinuousReadingModeActive && transitionPageMode === ReaderTransitionPageMode.PREVIOUS) ||
+            areContinuousPagerTransitionPagesVisible;
+        const isNextTransitionPageVisible =
+            (!isContinuousReadingModeActive && transitionPageMode === ReaderTransitionPageMode.NEXT) ||
+            areContinuousPagerTransitionPagesVisible;

-            const shouldOpenPreviousChapter =
-                isFirstPage &&
-                (!shouldShowTransitionPage || isPreviousTransitionPageVisible) &&
-                convertedPage === 'previous' &&
-                !!getReaderStore().chapters.previousChapter;
-            if (shouldOpenPreviousChapter) {
-                ReaderControls.openChapter('previous');
-                return;
-            }
+        const shouldOpenPreviousChapter =
+            isFirstPage &&
+            (!shouldShowTransitionPage || isPreviousTransitionPageVisible) &&
+            convertedPage === 'previous' &&
+            !!getReaderStore().chapters.previousChapter;
+        if (shouldOpenPreviousChapter) {
+            ReaderControls.openChapter('previous');
+            return;
+        }

-            const shouldOpenNextChapter =
-                isLastPage &&
-                (!shouldShowTransitionPage || isNextTransitionPageVisible) &&
-                convertedPage === 'next' &&
-                !!getReaderStore().chapters.nextChapter;
-            if (shouldOpenNextChapter) {
-                ReaderControls.openChapter('next');
-                return;
-            }
+        const shouldOpenNextChapter =
+            isLastPage &&
+            (!shouldShowTransitionPage || isNextTransitionPageVisible) &&
+            convertedPage === 'next' &&
+            !!getReaderStore().chapters.nextChapter;
+        if (shouldOpenNextChapter) {
+            ReaderControls.openChapter('next');
+            return;
+        }

-            const isPreviousMode = convertedPage === 'previous';
-            const isNextMode = convertedPage === 'next';
+        const isPreviousMode = convertedPage === 'previous';
+        const isNextMode = convertedPage === 'next';

-            const closePreviousTransitionPage = isPreviousTransitionPageVisible && isNextMode;
-            const closeNextTransitionPage = isNextTransitionPageVisible && isPreviousMode;
+        const closePreviousTransitionPage = isPreviousTransitionPageVisible && isNextMode;
+        const closeNextTransitionPage = isNextTransitionPageVisible && isPreviousMode;

-            const needToHideTransitionPage =
-                isATransitionPageVisibleFlag &&
-                !isContinuousReadingModeActive &&
-                (closePreviousTransitionPage || closeNextTransitionPage);
-            if (needToHideTransitionPage) {
-                hideTransitionPage();
-                setPageToScrollToIndex(isPreviousTransitionPageVisible ? indexOfFirstPage : indexOfLastPage);
+        const needToHideTransitionPage =
+            isATransitionPageVisibleFlag &&
+            !isContinuousReadingModeActive &&
+            (closePreviousTransitionPage || closeNextTransitionPage);
+        if (needToHideTransitionPage) {
+            hideTransitionPage();
+            setPageToScrollToIndex(isPreviousTransitionPageVisible ? indexOfFirstPage : indexOfLastPage);

-                return;
-            }
+            return;
+        }

-            const needToOpenTransitionPage =
-                ((isFirstPage && isPreviousMode) || (isLastPage && isNextMode)) && !isContinuousReadingModeActive;
-            if (needToOpenTransitionPage) {
-                setTransitionPageMode(
-                    isPreviousMode ? ReaderTransitionPageMode.PREVIOUS : ReaderTransitionPageMode.NEXT,
-                );
-                return;
-            }
+        const needToOpenTransitionPage =
+            ((isFirstPage && isPreviousMode) || (isLastPage && isNextMode)) && !isContinuousReadingModeActive;
+        if (needToOpenTransitionPage) {
+            setTransitionPageMode(isPreviousMode ? ReaderTransitionPageMode.PREVIOUS : ReaderTransitionPageMode.NEXT);
+            return;
+        }

-            setPageToScrollToIndex(isPreviousMode ? previousPageIndex : nextPageIndex);
-        }, []);
+        setPageToScrollToIndex(isPreviousMode ? previousPageIndex : nextPageIndex);
    }

    static useUpdateCurrentPageIndex(): (
@@ -535,7 +526,6 @@ export class ReaderControls {
        scrollElement: HTMLElement | null,
    ): (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void {
        const { direction: themeDirection } = useTheme();
-        const openPage = ReaderControls.useOpenPage();

        return useCallback(
            (e) => {
@@ -574,19 +564,18 @@ export class ReaderControls {
                                scrollAmount,
                            );
                        } else {
-                            openPage(action === TapZoneRegionType.PREVIOUS ? 'previous' : 'next', 'ltr');
+                            ReaderControls.openPage(action === TapZoneRegionType.PREVIOUS ? 'previous' : 'next', 'ltr');
                        }
                        break;
                    default:
                        throw new Error(`Unexpected "TapZoneRegionType" (${action})`);
                }
            },
-            [scrollElement, openPage, themeDirection],
+            [scrollElement, themeDirection],
        );
    }

    static useHandleProgressDragging(
-        openPage: ReturnType<(typeof ReaderControls)['useOpenPage']>,
        progressBarRef: RefObject<HTMLDivElement | null>,
        isDragging: boolean,
        currentPage: TReaderProgressCurrentPage,
@@ -623,7 +612,7 @@ export class ReaderControls {
                    return;
                }

-                openPage(newPageIndex, undefined, false);
+                ReaderControls.openPage(newPageIndex, undefined, false);
            };

            const handleMouseMove = (e: MouseEvent) => {
@@ -643,6 +632,6 @@ export class ReaderControls {
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('touchmove', handleTouchMove);
            };
-        }, [openPage, isDragging, currentPage, pages, progressBarPosition]);
+        }, [isDragging, currentPage, pages, progressBarPosition]);
    }
 }