ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move "useHandleProgressDragging" to "ReaderControls"

Browse Source
This commit is contained in:
schroda
2024-12-26 21:01:46 +01:00
parent 506be54e72
commit 6b0df5329b
3 changed files with 70 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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,

71
src/modules/reader/services/ReaderControls.ts
View File

@@ -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<HTMLDivElement | null>,
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]);
}
}

61
src/modules/reader/utils/ReaderProgressBar.utils.tsx
View File

@@ -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<HTMLDivElement | null>,
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]);
};