diff --git a/src/features/reader/auto-scroll/ReaderAutoScroll.tsx b/src/features/reader/auto-scroll/ReaderAutoScroll.tsx index 7f5189f0..d7df58b1 100644 --- 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; 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'], ); diff --git a/src/features/reader/hotkeys/ReaderHotkeys.tsx b/src/features/reader/hotkeys/ReaderHotkeys.tsx index 02ab6022..0340c502 100644 --- 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], () => { diff --git a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx index f339b7df..6911d3ed 100644 --- 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; -}) => { +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)} /> {t('reader.page_info.label.page')} @@ -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) => ( @@ -72,14 +67,10 @@ const BaseReaderNavBarDesktopPageNavigation = ({ !currentPage.primary.index, direction, )} - onClick={() => openPage('next', undefined, false)} + onClick={() => ReaderControls.openPage('next', undefined, false)} /> ); }; -export const ReaderNavBarDesktopPageNavigation = withPropsFrom( - memo(BaseReaderNavBarDesktopPageNavigation), - [() => ({ openPage: ReaderControls.useOpenPage() })], - ['openPage'], -); +export const ReaderNavBarDesktopPageNavigation = memo(BaseReaderNavBarDesktopPageNavigation); diff --git a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx index 4296d3e5..c9cf56f6 100644 --- 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; direction: ReturnType; 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} @@ -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} @@ -244,8 +240,4 @@ const BaseReaderProgressBar = ({ ); }; -export const ReaderProgressBar = withPropsFrom( - memo(BaseReaderProgressBar), - [() => ({ openPage: ReaderControls.useOpenPage() })], - ['openPage'], -); +export const ReaderProgressBar = memo(BaseReaderProgressBar); diff --git a/src/features/reader/services/ReaderControls.ts b/src/features/reader/services/ReaderControls.ts index d5376821..fb8e7bbe 100644 --- 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) => 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, 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]); } }