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

Simplify ReaderControls#useHandleClick

Browse Source
This commit is contained in:
schroda
2025-09-20 20:00:16 +02:00
parent ca5920919e
commit 5730690ae6
3 changed files with 43 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/features/reader/hotkeys/ReaderHotkeys.tsx
View File

@@ -8,7 +8,6 @@
import { useHotkeys as useHotKeysHook, useHotkeysContext } from 'react-hotkeys-hook';
import { useEffect } from 'react';
import { useTheme } from '@mui/material/styles';
import { HOTKEY_SCOPES } from '@/features/hotkeys/Hotkeys.constants.ts';
import { ReaderService } from '@/features/reader/services/ReaderService.ts';
import { IReaderSettings, ReaderHotkey } from '@/features/reader/Reader.types.ts';
@@ -59,7 +58,6 @@ export const ReaderHotkeys = ({
}: {
scrollElementRef: React.MutableRefObject<HTMLElement | null>;
}) => {
const { direction: themeDirection } = useTheme();
const readerThemeDirection = ReaderService.useGetThemeDirection();
const { enableScope, disableScope } = useHotkeysContext();
const { hotkeys } = useReaderStoreShallow((state) => ({
@@ -91,14 +89,12 @@ export const ReaderHotkeys = ({
CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION[readingMode.value],
readingMode.value,
readingDirection.value,
themeDirection,
scrollElementRef.current,
getReaderStore().tapZone.setShowPreview,
scrollAmount,
);
},
{ preventDefault: true },
[themeDirection],
);
useHotkeys(
hotkeys[ReaderHotkey.SCROLL_FORWARD],
@@ -122,14 +118,12 @@ export const ReaderHotkeys = ({
CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION[readingMode.value],
readingMode.value,
readingDirection.value,
themeDirection,
scrollElementRef.current,
getReaderStore().tapZone.setShowPreview,
scrollAmount,
);
},
{ preventDefault: true },
[themeDirection],
);
useHotkeys(
hotkeys[ReaderHotkey.PREVIOUS_CHAPTER],

95
src/features/reader/services/ReaderControls.ts
View File

@@ -7,7 +7,7 @@
*/
import { MutableRefObject, RefObject, useCallback, useEffect } from 'react';
import { Direction, useTheme } from '@mui/material/styles';
import { Direction } from '@mui/material/styles';
import { t as translate } from 'i18next';
import {
getNextIndexFromPage,
@@ -16,7 +16,7 @@ import {
getPageForMousePos,
getProgressBarPositionInfo,
} from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
import { getCurrentTheme, getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
import { ReaderService } from '@/features/reader/services/ReaderService.ts';
import {
PageInViewportType,
@@ -89,7 +89,6 @@ export class ReaderControls {
direction: ScrollDirection,
readingMode: ReadingMode,
readingDirection: ReadingDirection,
themeDirection: Direction,
element: HTMLElement,
setShowPreview: TReaderTapZoneContext['setShowPreview'],
scrollAmountPercentage: number = ReaderScrollAmount.LARGE,
@@ -99,7 +98,7 @@ export class ReaderControls {
}
const themeDirectionOfReadingDirection = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];
const areReadingDirectionsEqual = themeDirection === themeDirectionOfReadingDirection;
const areReadingDirectionsEqual = getCurrentTheme().direction === themeDirectionOfReadingDirection;
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
const isAtStartY = Math.abs(element.scrollTop) <= 1;
@@ -522,57 +521,47 @@ export class ReaderControls {
updateCurrentPageIndex(firstVisibleImageIndex, firstVisibleImageIndex !== lastPageIndex);
}
static useHandleClick(
scrollElement: HTMLElement | null,
): (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void {
const { direction: themeDirection } = useTheme();
static handleClick(scrollElement: HTMLElement | null, e: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
if (!scrollElement) {
return;
}
return useCallback(
(e) => {
if (!scrollElement) {
return;
const { readingMode, readingDirection, isStaticNav, scrollAmount } = getReaderStore().settings;
const rect = e.currentTarget.getBoundingClientRect();
const rectRelativeX = e.clientX - rect.left;
const rectRelativeY = e.clientY - rect.top;
const action = ReaderTapZoneService.getAction(rectRelativeX, rectRelativeY);
getReaderStore().tapZone.setShowPreview(false);
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
const scrollDirection =
readingMode.value === ReadingMode.CONTINUOUS_HORIZONTAL ? ScrollDirection.X : ScrollDirection.Y;
switch (action) {
case TapZoneRegionType.MENU:
getReaderStore().overlay.setIsVisible(isStaticNav || !getReaderStore().overlay.isVisible);
break;
case TapZoneRegionType.PREVIOUS:
case TapZoneRegionType.NEXT:
if (isContinuousReadingModeActive) {
ReaderControls.scroll(
action === TapZoneRegionType.PREVIOUS ? ScrollOffset.BACKWARD : ScrollOffset.FORWARD,
scrollDirection,
readingMode.value,
readingDirection.value,
scrollElement,
getReaderStore().tapZone.setShowPreview,
scrollAmount,
);
} else {
ReaderControls.openPage(action === TapZoneRegionType.PREVIOUS ? 'previous' : 'next', 'ltr');
}
const { readingMode, readingDirection, isStaticNav, scrollAmount } = getReaderStore().settings;
const rect = e.currentTarget.getBoundingClientRect();
const rectRelativeX = e.clientX - rect.left;
const rectRelativeY = e.clientY - rect.top;
const action = ReaderTapZoneService.getAction(rectRelativeX, rectRelativeY);
getReaderStore().tapZone.setShowPreview(false);
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
const scrollDirection =
readingMode.value === ReadingMode.CONTINUOUS_HORIZONTAL ? ScrollDirection.X : ScrollDirection.Y;
switch (action) {
case TapZoneRegionType.MENU:
getReaderStore().overlay.setIsVisible(isStaticNav || !getReaderStore().overlay.isVisible);
break;
case TapZoneRegionType.PREVIOUS:
case TapZoneRegionType.NEXT:
if (isContinuousReadingModeActive) {
ReaderControls.scroll(
action === TapZoneRegionType.PREVIOUS ? ScrollOffset.BACKWARD : ScrollOffset.FORWARD,
scrollDirection,
readingMode.value,
readingDirection.value,
themeDirection,
scrollElement,
getReaderStore().tapZone.setShowPreview,
scrollAmount,
);
} else {
ReaderControls.openPage(action === TapZoneRegionType.PREVIOUS ? 'previous' : 'next', 'ltr');
}
break;
default:
throw new Error(`Unexpected "TapZoneRegionType" (${action})`);
}
},
[scrollElement, themeDirection],
);
break;
default:
throw new Error(`Unexpected "TapZoneRegionType" (${action})`);
}
}
static useHandleProgressDragging(

4
src/features/reader/viewer/ReaderViewer.tsx
View File

@@ -175,8 +175,6 @@ const BaseReaderViewer = forwardRef(
scrollbar.setYSize(scrollbarYSize);
}, [scrollbarXSize, scrollbarYSize]);
const handleClick = ReaderControls.useHandleClick(scrollElementRef.current);
const imageRefs = useRef<(HTMLElement | null)[]>(pages.map(() => null));
const [{ minChapterViewWidth, minChapterViewHeight, minChapterSizeSourceChapterId }, setChapterViewerSize] =
useState({
@@ -320,7 +318,7 @@ const BaseReaderViewer = forwardRef(
}),
}),
}}
onClick={(e) => !isDragging && handleClick(e)}
onClick={(e) => !isDragging && ReaderControls.handleClick(scrollElementRef.current, e)}
onScroll={() =>
ReaderControls.updateCurrentPageOnScroll(
imageRefs,