From 6b0df5329b1281b7ae099f4a90efd2be6ffa7edd Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Thu, 26 Dec 2024 21:01:46 +0100 Subject: [PATCH] Move "useHandleProgressDragging" to "ReaderControls" --- .../progress-bar/ReaderProgressBar.tsx | 3 +- src/modules/reader/services/ReaderControls.ts | 71 ++++++++++++++++++- .../reader/utils/ReaderProgressBar.utils.tsx | 61 ---------------- 3 files changed, 70 insertions(+), 65 deletions(-) diff --git a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx index b441461a..90d8d066 100644 --- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx @@ -23,7 +23,6 @@ import { getPage, getPageForMousePos, getProgressBarPositionInfo, - useHandleProgressDragging, } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx'; import { getOptionForDirection as getOptionForDirectionImpl } from '@/modules/theme/services/ThemeCreator.ts'; import { ReaderProgressBarSlotsActionArea } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotsActionArea.tsx'; @@ -82,7 +81,7 @@ const BaseReaderProgressBar = ({ [direction], ); - useHandleProgressDragging( + ReaderControls.useHandleProgressDragging( openPage, progressBarRef, isDragging, diff --git a/src/modules/reader/services/ReaderControls.ts b/src/modules/reader/services/ReaderControls.ts index 9b504c83..99698ac5 100644 --- a/src/modules/reader/services/ReaderControls.ts +++ b/src/modules/reader/services/ReaderControls.ts @@ -6,17 +6,24 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { MutableRefObject, useCallback, useMemo } from 'react'; +import { MutableRefObject, RefObject, useCallback, useEffect, useMemo } from 'react'; import { Direction, useTheme } from '@mui/material/styles'; import { useTranslation } from 'react-i18next'; import { TFunction } from 'i18next'; import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx'; -import { getNextIndexFromPage, getNextPageIndex, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx'; +import { + getNextIndexFromPage, + getNextPageIndex, + getPage, + getPageForMousePos, + getProgressBarPositionInfo, +} from '@/modules/reader/utils/ReaderProgressBar.utils.tsx'; import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx'; import { PageInViewportType, + ProgressBarPosition, ReaderResumeMode, ReaderTransitionPageMode, ReadingDirection, @@ -41,6 +48,7 @@ import { TChapterReader } from '@/modules/chapter/Chapter.types.ts'; import { awaitConfirmation } from '@/modules/core/utils/AwaitableDialog.tsx'; import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'; import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.types.ts'; +import { ReaderProgressBarProps, TReaderProgressCurrentPage } from '@/modules/reader/types/ReaderProgressBar.types.ts'; const getScrollDirectionInvert = ( scrollDirection: ScrollDirection, @@ -526,4 +534,63 @@ export class ReaderControls { ], ); } + + static useHandleProgressDragging( + openPage: ReturnType<(typeof ReaderControls)['useOpenPage']>, + progressBarRef: RefObject, + isDragging: boolean, + currentPage: TReaderProgressCurrentPage, + pages: ReaderProgressBarProps['pages'], + progressBarPosition: ProgressBarPosition, + getOptionForDirectionFn: typeof getOptionForDirection, + ): void { + useEffect(() => { + if (!isDragging) { + return () => undefined; + } + + const { isHorizontal } = getProgressBarPositionInfo(progressBarPosition); + + const handleMove = (coordinates: { clientX: number; clientY: number }) => { + if (!progressBarRef.current) { + return; + } + + const newPageIndex = getNextIndexFromPage( + getPageForMousePos( + coordinates, + progressBarRef.current.getBoundingClientRect(), + pages, + isHorizontal, + getOptionForDirectionFn, + ), + ); + + const hasCurrentPageIndexChanged = getNextIndexFromPage(currentPage) !== newPageIndex; + if (!hasCurrentPageIndexChanged) { + return; + } + + openPage(newPageIndex, undefined, false); + }; + + const handleMouseMove = (e: MouseEvent) => { + handleMove(e); + }; + + const handleTouchMove = (e: TouchEvent) => { + if (e.touches.length > 0) { + handleMove(e.touches[0]); + } + }; + + document.addEventListener('mousemove', handleMouseMove); + document.addEventListener('touchmove', handleTouchMove); + + return () => { + document.removeEventListener('mousemove', handleMouseMove); + document.removeEventListener('touchmove', handleTouchMove); + }; + }, [openPage, isDragging, currentPage, pages, progressBarPosition]); + } } diff --git a/src/modules/reader/utils/ReaderProgressBar.utils.tsx b/src/modules/reader/utils/ReaderProgressBar.utils.tsx index ae0358d3..4ec90070 100644 --- a/src/modules/reader/utils/ReaderProgressBar.utils.tsx +++ b/src/modules/reader/utils/ReaderProgressBar.utils.tsx @@ -6,11 +6,9 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { RefObject, useEffect } from 'react'; import { ReaderProgressBarProps, TReaderProgressCurrentPage } from '@/modules/reader/types/ReaderProgressBar.types.ts'; import { getOptionForDirection as getOptionForDirectionImpl } from '@/modules/theme/services/ThemeCreator.ts'; import { ProgressBarPosition } from '@/modules/reader/types/Reader.types.ts'; -import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts'; export const getPage = (pageIndex: number, pages: ReaderProgressBarProps['pages']): TReaderProgressCurrentPage => { const pagesIndex = pages.findIndex(({ primary, secondary }) => @@ -88,62 +86,3 @@ export const getProgressBarPositionInfo = ( isVertical, }; }; - -export const useHandleProgressDragging = ( - openPage: ReturnType<(typeof ReaderControls)['useOpenPage']>, - progressBarRef: RefObject, - isDragging: boolean, - currentPage: TReaderProgressCurrentPage, - pages: ReaderProgressBarProps['pages'], - progressBarPosition: ProgressBarPosition, - getOptionForDirection: typeof getOptionForDirectionImpl, -) => { - useEffect(() => { - if (!isDragging) { - return () => undefined; - } - - const { isHorizontal } = getProgressBarPositionInfo(progressBarPosition); - - const handleMove = (coordinates: { clientX: number; clientY: number }) => { - if (!progressBarRef.current) { - return; - } - - const newPageIndex = getNextIndexFromPage( - getPageForMousePos( - coordinates, - progressBarRef.current.getBoundingClientRect(), - pages, - isHorizontal, - getOptionForDirection, - ), - ); - - const hasCurrentPageIndexChanged = getNextIndexFromPage(currentPage) !== newPageIndex; - if (!hasCurrentPageIndexChanged) { - return; - } - - openPage(newPageIndex, undefined, false); - }; - - const handleMouseMove = (e: MouseEvent) => { - handleMove(e); - }; - - const handleTouchMove = (e: TouchEvent) => { - if (e.touches.length > 0) { - handleMove(e.touches[0]); - } - }; - - document.addEventListener('mousemove', handleMouseMove); - document.addEventListener('touchmove', handleTouchMove); - - return () => { - document.removeEventListener('mousemove', handleMouseMove); - document.removeEventListener('touchmove', handleTouchMove); - }; - }, [openPage, isDragging, currentPage, pages, progressBarPosition]); -};