Rename folder "modules" to "features"
This commit is contained in:
schroda
725
src/features/reader/services/ReaderControls.ts
Normal file
725
src/features/reader/services/ReaderControls.ts
Normal file
@@ -0,0 +1,725 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
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 '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
|
||||
import {
|
||||
getNextIndexFromPage,
|
||||
getNextPageIndex,
|
||||
getPage,
|
||||
getPageForMousePos,
|
||||
getProgressBarPositionInfo,
|
||||
} from '@/features/reader/utils/ReaderProgressBar.utils.tsx';
|
||||
import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
|
||||
import { ReaderService } from '@/features/reader/services/ReaderService.ts';
|
||||
import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
|
||||
import {
|
||||
PageInViewportType,
|
||||
ProgressBarPosition,
|
||||
ReaderScrollAmount,
|
||||
ReaderTransitionPageMode,
|
||||
ReadingDirection,
|
||||
ReadingMode,
|
||||
} from '@/features/reader/types/Reader.types.ts';
|
||||
import { ScrollDirection, ScrollOffset } from '@/features/core/Core.types.ts';
|
||||
import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/constants/ReaderSettings.constants.tsx';
|
||||
import {
|
||||
isATransitionPageVisible,
|
||||
isEndOfPageInViewport,
|
||||
isPageInViewport,
|
||||
} from '@/features/reader/utils/ReaderPager.utils.tsx';
|
||||
import { useReaderOverlayContext } from '@/features/reader/contexts/ReaderOverlayContext.tsx';
|
||||
import { useReaderTapZoneContext } from '@/features/reader/contexts/ReaderTapZoneContext.tsx';
|
||||
import { TapZoneRegionType, TReaderTapZoneContext } from '@/features/reader/types/TapZoneLayout.types.ts';
|
||||
import { ReaderTapZoneService } from '@/features/reader/services/ReaderTapZoneService.ts';
|
||||
import { isContinuousReadingMode } from '@/features/reader/utils/ReaderSettings.utils.tsx';
|
||||
import {
|
||||
getReaderChapterFromCache,
|
||||
getReaderOpenChapterResumeMode,
|
||||
updateReaderStateVisibleChapters,
|
||||
} from '@/features/reader/utils/Reader.utils.ts';
|
||||
import { Chapters } from '@/features/chapter/services/Chapters.ts';
|
||||
import { DirectionOffset, TranslationKey } from '@/Base.types.ts';
|
||||
import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
|
||||
import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.ts';
|
||||
import { awaitConfirmation } from '@/features/core/utils/AwaitableDialog.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { TReaderOverlayContext } from '@/features/reader/types/ReaderOverlay.types.ts';
|
||||
import { ReaderProgressBarProps, TReaderProgressCurrentPage } from '@/features/reader/types/ReaderProgressBar.types.ts';
|
||||
|
||||
const getScrollDirectionInvert = (
|
||||
scrollDirection: ScrollDirection,
|
||||
scrollOffset: ScrollOffset,
|
||||
themeDirection: Direction,
|
||||
): 1 | -1 => {
|
||||
if (scrollDirection === ScrollDirection.X) {
|
||||
if (scrollOffset === ScrollOffset.BACKWARD) {
|
||||
if (themeDirection === 'ltr') {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (scrollOffset === ScrollOffset.FORWARD) {
|
||||
if (themeDirection === 'ltr') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
||||
// handle ScrollDirection.XY the same as ScrollDirection.Y
|
||||
if (scrollOffset === ScrollOffset.BACKWARD) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 1;
|
||||
};
|
||||
|
||||
export class ReaderControls {
|
||||
private static updateCurrentPageTimeout: NodeJS.Timeout;
|
||||
|
||||
static scroll(
|
||||
offset: ScrollOffset,
|
||||
direction: ScrollDirection,
|
||||
readingMode: ReadingMode,
|
||||
readingDirection: ReadingDirection,
|
||||
themeDirection: Direction,
|
||||
element: HTMLElement,
|
||||
openChapter: ReturnType<(typeof ReaderControls)['useOpenChapter']>,
|
||||
setIsOverlayVisible: TReaderOverlayContext['setIsVisible'],
|
||||
setShowPreview: TReaderTapZoneContext['setShowPreview'],
|
||||
scrollAmountPercentage: number = ReaderScrollAmount.LARGE,
|
||||
): void {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
const themeDirectionOfReadingDirection = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];
|
||||
const areReadingDirectionsEqual = themeDirection === themeDirectionOfReadingDirection;
|
||||
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
|
||||
|
||||
const isAtStartY = Math.abs(element.scrollTop) <= 1;
|
||||
const isAtEndY =
|
||||
Math.floor(element.scrollTop) === element.scrollHeight - element.clientHeight ||
|
||||
Math.ceil(element.scrollTop) === element.scrollHeight - element.clientHeight;
|
||||
const isAtStartX = Math.abs(element.scrollLeft) <= 1;
|
||||
const isAtEndX =
|
||||
element.scrollWidth - element.clientWidth - Math.floor(Math.abs(element.scrollLeft)) <= 1 ||
|
||||
element.scrollWidth - element.clientWidth - Math.ceil(Math.abs(element.scrollLeft)) <= 1;
|
||||
const isAtStartXForDirection = areReadingDirectionsEqual ? isAtStartX : isAtEndX;
|
||||
const isAtEndXForDirection = areReadingDirectionsEqual ? isAtEndX : isAtStartX;
|
||||
|
||||
const scrollAmount = scrollAmountPercentage / 100;
|
||||
const scrollDirection = getScrollDirectionInvert(direction, offset, themeDirectionOfReadingDirection);
|
||||
|
||||
const getNewScrollPosition = (currentPos: number, elementSize: number) =>
|
||||
currentPos + elementSize * scrollAmount * scrollDirection;
|
||||
|
||||
setIsOverlayVisible(false);
|
||||
setShowPreview(false);
|
||||
|
||||
const doScroll = (
|
||||
isAtStartForDirection: boolean,
|
||||
isAtEndForDirection: boolean,
|
||||
scrollToOptions: ScrollToOptions,
|
||||
) => {
|
||||
if (isAtStartForDirection && offset === ScrollOffset.BACKWARD && isContinuousReadingModeActive) {
|
||||
openChapter('previous');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isAtEndForDirection && offset === ScrollOffset.FORWARD && isContinuousReadingModeActive) {
|
||||
openChapter('next');
|
||||
return;
|
||||
}
|
||||
|
||||
element.scroll({
|
||||
...scrollToOptions,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
};
|
||||
|
||||
switch (direction) {
|
||||
case ScrollDirection.X:
|
||||
doScroll(isAtStartXForDirection, isAtEndXForDirection, {
|
||||
left: getNewScrollPosition(element.scrollLeft, element.clientWidth),
|
||||
});
|
||||
break;
|
||||
case ScrollDirection.Y:
|
||||
doScroll(isAtStartY, isAtEndY, { top: getNewScrollPosition(element.scrollTop, element.clientHeight) });
|
||||
break;
|
||||
default:
|
||||
throw new Error(`Unexpected "ScrollDirection" (${direction})`);
|
||||
}
|
||||
}
|
||||
|
||||
static useOpenChapter(): (
|
||||
offset: 'previous' | 'next' | ChapterIdInfo['id'],
|
||||
doTransitionCheck?: boolean,
|
||||
scrollIntoView?: boolean,
|
||||
) => void {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
readingMode,
|
||||
shouldInformAboutMissingChapter,
|
||||
shouldInformAboutScanlatorChange,
|
||||
shouldUseInfiniteScroll,
|
||||
} = ReaderService.useSettings();
|
||||
const {
|
||||
currentChapter,
|
||||
previousChapter,
|
||||
nextChapter,
|
||||
chapters,
|
||||
visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder },
|
||||
setReaderStateChapters,
|
||||
} = useReaderStateChaptersContext();
|
||||
|
||||
const openChapter = ReaderService.useNavigateToChapter();
|
||||
|
||||
return useCallback(
|
||||
(offset, doTransitionCheck = true, scrollIntoView = true) => {
|
||||
if (!currentChapter) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isSpecificChapterMode = typeof offset === 'number';
|
||||
const isPreviousOffset = offset === 'previous';
|
||||
|
||||
const doesPreviousChapterExist = isPreviousOffset && !!previousChapter;
|
||||
const doesNextChapterExist = !isPreviousOffset && !!nextChapter;
|
||||
|
||||
const canOpenNextChapter = isSpecificChapterMode || doesPreviousChapterExist || doesNextChapterExist;
|
||||
if (!canOpenNextChapter) {
|
||||
return;
|
||||
}
|
||||
|
||||
const doOpenChapter = async () => {
|
||||
const chapterToOpen = (() => {
|
||||
if (isSpecificChapterMode) {
|
||||
return chapters.find((chapter) => chapter.id === offset);
|
||||
}
|
||||
|
||||
if (isPreviousOffset) {
|
||||
return previousChapter;
|
||||
}
|
||||
|
||||
return nextChapter;
|
||||
})();
|
||||
|
||||
if (!chapterToOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isPreviousChapter = chapterToOpen.sourceOrder < currentChapter.sourceOrder;
|
||||
|
||||
try {
|
||||
if (doTransitionCheck) {
|
||||
await ReaderControls.checkNextChapterConsistency(
|
||||
t,
|
||||
isPreviousChapter ? 'previous' : 'next',
|
||||
currentChapter,
|
||||
chapterToOpen,
|
||||
shouldInformAboutMissingChapter,
|
||||
shouldInformAboutScanlatorChange,
|
||||
);
|
||||
}
|
||||
|
||||
const isAlreadyLoaded =
|
||||
lastLeadingChapterSourceOrder <= chapterToOpen.sourceOrder &&
|
||||
lastTrailingChapterSourceOrder >= chapterToOpen.sourceOrder;
|
||||
const keepRenderedChapters = shouldUseInfiniteScroll && (!scrollIntoView || isAlreadyLoaded);
|
||||
|
||||
if (keepRenderedChapters) {
|
||||
setReaderStateChapters((prevState) =>
|
||||
updateReaderStateVisibleChapters(
|
||||
isPreviousChapter,
|
||||
prevState,
|
||||
chapterToOpen.sourceOrder,
|
||||
scrollIntoView,
|
||||
isPreviousChapter ? false : undefined,
|
||||
!isPreviousChapter ? false : undefined,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
openChapter(chapterToOpen, {
|
||||
resumeMode: getReaderOpenChapterResumeMode(
|
||||
isSpecificChapterMode || !keepRenderedChapters,
|
||||
isPreviousChapter,
|
||||
),
|
||||
updateInitialChapter: !keepRenderedChapters,
|
||||
});
|
||||
} catch (error) {
|
||||
defaultPromiseErrorHandler('ReaderControls#useOpenChapter#doOpenChapter:')(error);
|
||||
}
|
||||
};
|
||||
|
||||
doOpenChapter().catch(defaultPromiseErrorHandler('ReaderControls#useOpenChapter'));
|
||||
},
|
||||
[
|
||||
t,
|
||||
currentChapter?.id,
|
||||
openChapter,
|
||||
readingMode.value,
|
||||
shouldInformAboutMissingChapter,
|
||||
shouldInformAboutScanlatorChange,
|
||||
lastLeadingChapterSourceOrder,
|
||||
lastTrailingChapterSourceOrder,
|
||||
shouldUseInfiniteScroll,
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
private static async checkNextChapterConsistency(
|
||||
t: TFunction,
|
||||
offset: 'previous' | 'next',
|
||||
currentChapter: TChapterReader | null | undefined,
|
||||
chapterToOpen: TChapterReader | null | undefined,
|
||||
shouldInformAboutMissingChapter: boolean,
|
||||
shouldInformAboutScanlatorChange: boolean,
|
||||
): Promise<void> {
|
||||
if (!currentChapter || !chapterToOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
const missingChapters = Chapters.getGap(currentChapter, chapterToOpen);
|
||||
const isSameScanlator =
|
||||
!shouldInformAboutScanlatorChange || currentChapter.scanlator === chapterToOpen.scanlator;
|
||||
const isContinuousChapter = !shouldInformAboutMissingChapter || !missingChapters;
|
||||
|
||||
const showWarning = !isSameScanlator || !isContinuousChapter;
|
||||
if (!showWarning) {
|
||||
return;
|
||||
}
|
||||
|
||||
const offsetToTranslationKeys: Record<typeof offset, Record<'scanlator' | 'chapter_number', TranslationKey>> = {
|
||||
previous: {
|
||||
scanlator: 'reader.chapter_transition.warning.previous.scanlator',
|
||||
chapter_number: 'reader.chapter_transition.warning.previous.chapter_number',
|
||||
},
|
||||
next: {
|
||||
scanlator: 'reader.chapter_transition.warning.next.scanlator',
|
||||
chapter_number: 'reader.chapter_transition.warning.next.chapter_number',
|
||||
},
|
||||
};
|
||||
|
||||
const sameScanlator = isSameScanlator
|
||||
? ''
|
||||
: t(offsetToTranslationKeys[offset].scanlator, {
|
||||
nextScanlator: chapterToOpen.scanlator,
|
||||
currentScanlator: currentChapter.scanlator,
|
||||
});
|
||||
const continuousChapter = isContinuousChapter
|
||||
? ''
|
||||
: t(offsetToTranslationKeys[offset].chapter_number, {
|
||||
count: missingChapters,
|
||||
nextChapter: `#${chapterToOpen.chapterNumber} ${chapterToOpen.name}`,
|
||||
currentChapter: `#${currentChapter.chapterNumber} ${currentChapter.name}`,
|
||||
});
|
||||
const warningLineBreak = !isSameScanlator && !isContinuousChapter ? '\n\n' : '';
|
||||
const warning = `${sameScanlator}${warningLineBreak}${continuousChapter}`;
|
||||
|
||||
await awaitConfirmation({
|
||||
title: t('reader.chapter_transition.warning.title'),
|
||||
message: warning,
|
||||
actions: {
|
||||
confirm: {
|
||||
title: t('global.button.open'),
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
static useOpenPage(): (
|
||||
page: number | 'previous' | 'next',
|
||||
forceDirection?: Direction,
|
||||
hideOverlay?: boolean,
|
||||
) => void {
|
||||
const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } =
|
||||
userReaderStatePagesContext();
|
||||
const { previousChapter, nextChapter } = useReaderStateChaptersContext();
|
||||
const { setIsVisible: setIsOverlayVisible } = useReaderOverlayContext();
|
||||
const { setShowPreview } = useReaderTapZoneContext();
|
||||
const { readingDirection, readingMode, shouldShowTransitionPage } = ReaderService.useSettings();
|
||||
const openChapter = ReaderControls.useOpenChapter();
|
||||
|
||||
const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
|
||||
const previousPageIndex = useMemo(
|
||||
() => getNextPageIndex('previous', currentPage.pagesIndex, pages),
|
||||
[currentPage, pages],
|
||||
);
|
||||
const nextPageIndex = useMemo(
|
||||
() => getNextPageIndex('next', currentPage.pagesIndex, pages),
|
||||
[currentPage, pages],
|
||||
);
|
||||
const indexOfFirstPage = getNextIndexFromPage(pages[0]);
|
||||
const indexOfLastPage = getNextIndexFromPage(pages[pages.length - 1]);
|
||||
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
|
||||
|
||||
const isFirstPage = currentPage.primary.index === 0;
|
||||
const isLastPage = currentPageIndex === indexOfLastPage;
|
||||
const isATransitionPageVisibleFlag = isATransitionPageVisible(transitionPageMode, readingMode.value);
|
||||
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
|
||||
|
||||
return useCallback(
|
||||
(page, forceDirection = direction, hideOverlay: boolean = true) => {
|
||||
const convertedPage = getOptionForDirection(
|
||||
page,
|
||||
page === 'previous' ? 'next' : 'previous',
|
||||
forceDirection,
|
||||
);
|
||||
|
||||
if (hideOverlay) {
|
||||
setIsOverlayVisible(false);
|
||||
setShowPreview(false);
|
||||
}
|
||||
|
||||
const hideTransitionPage = () => setTransitionPageMode(ReaderTransitionPageMode.NONE);
|
||||
|
||||
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 shouldOpenPreviousChapter =
|
||||
isFirstPage &&
|
||||
(!shouldShowTransitionPage || isPreviousTransitionPageVisible) &&
|
||||
convertedPage === 'previous' &&
|
||||
!!previousChapter;
|
||||
if (shouldOpenPreviousChapter) {
|
||||
openChapter('previous');
|
||||
return;
|
||||
}
|
||||
|
||||
const shouldOpenNextChapter =
|
||||
isLastPage &&
|
||||
(!shouldShowTransitionPage || isNextTransitionPageVisible) &&
|
||||
convertedPage === 'next' &&
|
||||
!!nextChapter;
|
||||
if (shouldOpenNextChapter) {
|
||||
openChapter('next');
|
||||
return;
|
||||
}
|
||||
|
||||
const isPreviousMode = convertedPage === 'previous';
|
||||
const isNextMode = convertedPage === 'next';
|
||||
|
||||
const closePreviousTransitionPage = isPreviousTransitionPageVisible && isNextMode;
|
||||
const closeNextTransitionPage = isNextTransitionPageVisible && isPreviousMode;
|
||||
|
||||
const needToHideTransitionPage =
|
||||
isATransitionPageVisibleFlag &&
|
||||
!isContinuousReadingModeActive &&
|
||||
(closePreviousTransitionPage || closeNextTransitionPage);
|
||||
if (needToHideTransitionPage) {
|
||||
hideTransitionPage();
|
||||
setPageToScrollToIndex(isPreviousTransitionPageVisible ? indexOfFirstPage : indexOfLastPage);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const needToOpenTransitionPage =
|
||||
((isFirstPage && isPreviousMode) || (isLastPage && isNextMode)) && !isContinuousReadingModeActive;
|
||||
if (needToOpenTransitionPage) {
|
||||
setTransitionPageMode(
|
||||
isPreviousMode ? ReaderTransitionPageMode.PREVIOUS : ReaderTransitionPageMode.NEXT,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
setPageToScrollToIndex(isPreviousMode ? previousPageIndex : nextPageIndex);
|
||||
},
|
||||
[
|
||||
direction,
|
||||
indexOfFirstPage,
|
||||
indexOfLastPage,
|
||||
previousPageIndex,
|
||||
nextPageIndex,
|
||||
indexOfLastPage,
|
||||
isATransitionPageVisibleFlag,
|
||||
isContinuousReadingModeActive,
|
||||
isFirstPage,
|
||||
isLastPage,
|
||||
openChapter,
|
||||
!!previousChapter,
|
||||
!!nextChapter,
|
||||
shouldShowTransitionPage,
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
static useUpdateCurrentPageIndex(): (
|
||||
pageIndex: number,
|
||||
debounceChapterUpdate?: boolean,
|
||||
endReached?: boolean,
|
||||
) => void {
|
||||
const { currentPageIndex, setCurrentPageIndex } = userReaderStatePagesContext();
|
||||
const { currentChapter, chapters, previousChapter, nextChapter, visibleChapters, setReaderStateChapters } =
|
||||
useReaderStateChaptersContext();
|
||||
const updateChapter = ReaderService.useUpdateChapter();
|
||||
const {
|
||||
settings: { downloadAheadLimit },
|
||||
} = useMetadataServerSettings();
|
||||
|
||||
const nextChapters = useMemo(() => {
|
||||
if (!currentChapter) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return Chapters.getNextChapters(currentChapter, chapters, {
|
||||
offset: DirectionOffset.NEXT,
|
||||
});
|
||||
}, [currentChapter?.id, chapters]);
|
||||
|
||||
return useCallback(
|
||||
(pageIndex, debounceChapterUpdate = true, endReached = false) => {
|
||||
if (pageIndex === currentPageIndex && !endReached) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentPageIndex(pageIndex);
|
||||
|
||||
if (!currentChapter) {
|
||||
return;
|
||||
}
|
||||
|
||||
const direction = currentPageIndex > pageIndex ? DirectionOffset.PREVIOUS : DirectionOffset.NEXT;
|
||||
|
||||
ReaderService.downloadAhead(currentChapter, nextChapter, nextChapters, pageIndex, downloadAheadLimit);
|
||||
ReaderService.preloadChapter(
|
||||
pageIndex,
|
||||
currentChapter.pageCount,
|
||||
direction === DirectionOffset.NEXT ? nextChapter : previousChapter,
|
||||
visibleChapters.lastLeadingChapterSourceOrder,
|
||||
visibleChapters.lastTrailingChapterSourceOrder,
|
||||
setReaderStateChapters,
|
||||
direction,
|
||||
);
|
||||
|
||||
const handleCurrentPageIndexChange = () => {
|
||||
const currentChapterUpToDate = getReaderChapterFromCache(currentChapter.id);
|
||||
if (!currentChapterUpToDate) {
|
||||
return;
|
||||
}
|
||||
|
||||
const actualPageIndex = endReached ? currentChapterUpToDate.pageCount - 1 : pageIndex;
|
||||
const isLastPage = actualPageIndex === currentChapterUpToDate.pageCount - 1;
|
||||
|
||||
updateChapter({
|
||||
lastPageRead: actualPageIndex,
|
||||
isRead: isLastPage ? true : undefined,
|
||||
});
|
||||
};
|
||||
|
||||
clearTimeout(ReaderControls.updateCurrentPageTimeout);
|
||||
if (debounceChapterUpdate) {
|
||||
ReaderControls.updateCurrentPageTimeout = setTimeout(handleCurrentPageIndexChange, 1000);
|
||||
return;
|
||||
}
|
||||
|
||||
handleCurrentPageIndexChange();
|
||||
},
|
||||
[
|
||||
currentChapter?.id,
|
||||
previousChapter?.id,
|
||||
nextChapter?.id,
|
||||
nextChapters,
|
||||
currentPageIndex,
|
||||
downloadAheadLimit,
|
||||
visibleChapters,
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
static updateCurrentPageOnScroll(
|
||||
imageRefs: MutableRefObject<(HTMLElement | null)[]>,
|
||||
lastPageIndex: number,
|
||||
updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>,
|
||||
type: PageInViewportType,
|
||||
readingDirection: ReadingDirection,
|
||||
) {
|
||||
const themeDirectionForReadingDirection = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];
|
||||
|
||||
const firstVisibleImageIndex = imageRefs.current.findIndex(
|
||||
(image) =>
|
||||
image &&
|
||||
isPageInViewport(
|
||||
image,
|
||||
type,
|
||||
// the pages aren't always properly scrolled to the top which results in the leading page to still be slightly
|
||||
// visible (e.g. 0.0123px) breaking the "first visible image" detection
|
||||
{
|
||||
bottom: 1,
|
||||
left: getOptionForDirection(0, window.innerWidth + 1, themeDirectionForReadingDirection),
|
||||
right: getOptionForDirection(1, 0, themeDirectionForReadingDirection),
|
||||
},
|
||||
),
|
||||
);
|
||||
const lastPage = imageRefs.current?.[imageRefs.current.length - 1];
|
||||
const isEndReached = lastPage && isEndOfPageInViewport(lastPage, type, readingDirection);
|
||||
|
||||
if (firstVisibleImageIndex === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// handle cases where the last page is too small to ever be the "firstVisibleImageIndex"
|
||||
if (isEndReached) {
|
||||
updateCurrentPageIndex(firstVisibleImageIndex, false, true);
|
||||
return;
|
||||
}
|
||||
|
||||
updateCurrentPageIndex(firstVisibleImageIndex, firstVisibleImageIndex !== lastPageIndex);
|
||||
}
|
||||
|
||||
static useHandleClick(
|
||||
scrollElement: HTMLElement | null,
|
||||
): (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void {
|
||||
const { direction: themeDirection } = useTheme();
|
||||
const { setIsVisible: setIsOverlayVisible } = useReaderOverlayContext();
|
||||
const { currentPageIndex, pages } = userReaderStatePagesContext();
|
||||
const { setShowPreview } = useReaderTapZoneContext();
|
||||
const { readingMode, readingDirection, isStaticNav, scrollAmount } = ReaderService.useSettings();
|
||||
const openPage = ReaderControls.useOpenPage();
|
||||
const openChapter = ReaderControls.useOpenChapter();
|
||||
|
||||
return useCallback(
|
||||
(e) => {
|
||||
if (!scrollElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const rectRelativeX = e.clientX - rect.left;
|
||||
const rectRelativeY = e.clientY - rect.top;
|
||||
const action = ReaderTapZoneService.getAction(rectRelativeX, rectRelativeY);
|
||||
|
||||
setShowPreview(false);
|
||||
|
||||
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
|
||||
const scrollDirection =
|
||||
readingMode.value === ReadingMode.CONTINUOUS_HORIZONTAL ? ScrollDirection.X : ScrollDirection.Y;
|
||||
|
||||
switch (action) {
|
||||
case TapZoneRegionType.MENU:
|
||||
setIsOverlayVisible((isVisible) => isStaticNav || !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,
|
||||
openChapter,
|
||||
setIsOverlayVisible,
|
||||
setShowPreview,
|
||||
scrollAmount,
|
||||
);
|
||||
} else {
|
||||
openPage(action === TapZoneRegionType.PREVIOUS ? 'previous' : 'next', 'ltr');
|
||||
}
|
||||
break;
|
||||
default:
|
||||
throw new Error(`Unexpected "TapZoneRegionType" (${action})`);
|
||||
}
|
||||
},
|
||||
[
|
||||
scrollElement,
|
||||
currentPageIndex,
|
||||
pages,
|
||||
readingMode.value,
|
||||
openPage,
|
||||
readingDirection.value,
|
||||
openChapter,
|
||||
themeDirection,
|
||||
isStaticNav,
|
||||
scrollAmount,
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
static useHandleProgressDragging(
|
||||
openPage: ReturnType<(typeof ReaderControls)['useOpenPage']>,
|
||||
progressBarRef: RefObject<HTMLDivElement | null>,
|
||||
isDragging: boolean,
|
||||
currentPage: TReaderProgressCurrentPage,
|
||||
pages: ReaderProgressBarProps['pages'],
|
||||
progressBarPosition: ProgressBarPosition,
|
||||
getOptionForDirectionFn: typeof getOptionForDirection,
|
||||
fullSegmentClicks: boolean,
|
||||
): 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,
|
||||
pages,
|
||||
isHorizontal,
|
||||
fullSegmentClicks,
|
||||
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]);
|
||||
}
|
||||
}
|
||||
431
src/features/reader/services/ReaderService.ts
Normal file
431
src/features/reader/services/ReaderService.ts
Normal file
@@ -0,0 +1,431 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Direction, useTheme } from '@mui/material/styles';
|
||||
import { t as translate } from 'i18next';
|
||||
import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.ts';
|
||||
import { Chapters } from '@/features/chapter/services/Chapters.ts';
|
||||
import {
|
||||
IReaderSettings,
|
||||
IReaderSettingsWithDefaultFlag,
|
||||
ReaderExitMode,
|
||||
ReaderOpenChapterLocationState,
|
||||
ReaderOverlayMode,
|
||||
ReaderStateChapters,
|
||||
ReadingDirection,
|
||||
ReadingMode,
|
||||
} from '@/features/reader/types/Reader.types.ts';
|
||||
import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
|
||||
import {
|
||||
convertFromReaderSettingsWithDefaultFlag,
|
||||
updateReaderSettings,
|
||||
} from '@/features/reader/services/ReaderSettingsMetadata.ts';
|
||||
import { MangaIdInfo } from '@/features/manga/Manga.types.ts';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { MANGA_META_FIELDS } from '@/lib/graphql/fragments/MangaFragments.ts';
|
||||
import { makeToast } from '@/features/core/utils/Toast.ts';
|
||||
import { MediaQuery } from '@/features/core/utils/MediaQuery.tsx';
|
||||
import { GLOBAL_METADATA } from '@/lib/graphql/fragments/Fragments.ts';
|
||||
import { updateMetadataList } from '@/features/metadata/services/MetadataApolloCacheHandler.ts';
|
||||
import { useBackButton } from '@/features/core/hooks/useBackButton.ts';
|
||||
import { GLOBAL_READER_SETTING_KEYS } from '@/features/reader/constants/ReaderSettings.constants.tsx';
|
||||
import { useReaderStateSettingsContext } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx';
|
||||
import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
|
||||
import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
|
||||
import { DirectionOffset } from '@/Base.types.ts';
|
||||
import {
|
||||
getChapterIdsForDownloadAhead,
|
||||
getChapterIdsToDeleteForChapterUpdate,
|
||||
getReaderChapterFromCache,
|
||||
isInDownloadAheadRange,
|
||||
updateReaderStateVisibleChapters,
|
||||
} from '@/features/reader/utils/Reader.utils.ts';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { Queue } from '@/lib/Queue.ts';
|
||||
import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
|
||||
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
|
||||
import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
|
||||
import { getMetadataKey } from '@/features/metadata/Metadata.utils.ts';
|
||||
|
||||
const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
|
||||
ltr: 'rtl',
|
||||
rtl: 'ltr',
|
||||
};
|
||||
|
||||
const DIRECTION_TO_READING_DIRECTION: Record<Direction, ReadingDirection> = {
|
||||
ltr: ReadingDirection.LTR,
|
||||
rtl: ReadingDirection.RTL,
|
||||
};
|
||||
|
||||
export class ReaderService {
|
||||
private static downloadAheadQueue: Queue = new Queue(1);
|
||||
|
||||
private static chapterUpdateQueues: Map<ChapterIdInfo['id'], Queue> = new Map();
|
||||
|
||||
private static getOrCreateChapterUpdateQueue(id: ChapterIdInfo['id']): Queue {
|
||||
if (!ReaderService.chapterUpdateQueues.has(id)) {
|
||||
ReaderService.chapterUpdateQueues.set(id, new Queue(1));
|
||||
}
|
||||
|
||||
return ReaderService.chapterUpdateQueues.get(id)!;
|
||||
}
|
||||
|
||||
static useNavigateToChapter(): (chapter: TChapterReader, state?: ReaderOpenChapterLocationState) => void {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return useCallback((chapter, state) => {
|
||||
navigate(Chapters.getReaderUrl(chapter), {
|
||||
replace: true,
|
||||
state,
|
||||
});
|
||||
}, []);
|
||||
}
|
||||
|
||||
static downloadAhead(
|
||||
currentChapter: TChapterReader,
|
||||
nextChapter: TChapterReader | undefined,
|
||||
nextChapters: TChapterReader[],
|
||||
pageIndex: number,
|
||||
downloadAheadLimit: number,
|
||||
): void {
|
||||
const key = `${currentChapter.id}_${nextChapter?.id}_${pageIndex}_${downloadAheadLimit}`;
|
||||
|
||||
ReaderService.downloadAheadQueue.enqueue(key, async () => {
|
||||
const chapterIdsForDownloadAhead = getChapterIdsForDownloadAhead(
|
||||
currentChapter,
|
||||
nextChapter,
|
||||
nextChapters,
|
||||
pageIndex,
|
||||
downloadAheadLimit,
|
||||
);
|
||||
|
||||
if (!chapterIdsForDownloadAhead.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await Chapters.download(chapterIdsForDownloadAhead);
|
||||
} catch (e) {
|
||||
defaultPromiseErrorHandler('ReaderService::useUpdateCurrentPageIndex: download ahead')(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
static preloadChapter(
|
||||
pageIndex: number,
|
||||
pageCount: number,
|
||||
chapter: TChapterReader | undefined | null,
|
||||
lastLeadingChapterSourceOrder: number,
|
||||
lastTrailingChapterSourceOrder: number,
|
||||
setReaderStateChapters: ReaderStateChapters['setReaderStateChapters'],
|
||||
direction: DirectionOffset,
|
||||
): void {
|
||||
if (!chapter) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isPreviousChapter = direction === DirectionOffset.PREVIOUS;
|
||||
const isNextChapter = direction === DirectionOffset.NEXT;
|
||||
|
||||
const isAlreadyPreloaded =
|
||||
(isPreviousChapter && lastLeadingChapterSourceOrder <= chapter.sourceOrder) ||
|
||||
(isNextChapter && lastTrailingChapterSourceOrder >= chapter.sourceOrder);
|
||||
const shouldPreload = !isAlreadyPreloaded && isInDownloadAheadRange(pageIndex, pageCount, direction);
|
||||
if (!shouldPreload) {
|
||||
return;
|
||||
}
|
||||
|
||||
setReaderStateChapters((state) =>
|
||||
updateReaderStateVisibleChapters(
|
||||
isPreviousChapter,
|
||||
state,
|
||||
chapter.sourceOrder,
|
||||
false,
|
||||
isPreviousChapter ? true : undefined,
|
||||
isNextChapter ? true : undefined,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
static useUpdateChapter(): (patch: UpdateChapterPatchInput) => void {
|
||||
const { manga } = useReaderStateMangaContext();
|
||||
const { currentChapter, mangaChapters, chapters } = useReaderStateChaptersContext();
|
||||
const { shouldSkipDupChapters } = ReaderService.useSettings();
|
||||
const {
|
||||
settings: { deleteChaptersWhileReading, deleteChaptersWithBookmark, updateProgressAfterReading },
|
||||
} = useMetadataServerSettings();
|
||||
|
||||
const previousChapters = useMemo(() => {
|
||||
if (!currentChapter) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return Chapters.getNextChapters(currentChapter, chapters, {
|
||||
offset: DirectionOffset.PREVIOUS,
|
||||
});
|
||||
}, [currentChapter?.id, chapters]);
|
||||
|
||||
return useCallback(
|
||||
(patch) => {
|
||||
if (!manga || !currentChapter || !mangaChapters) {
|
||||
return;
|
||||
}
|
||||
|
||||
const update = async () => {
|
||||
const chapterIdsToUpdate = Chapters.getIds(
|
||||
shouldSkipDupChapters
|
||||
? Chapters.addDuplicates([currentChapter], mangaChapters)
|
||||
: [currentChapter],
|
||||
);
|
||||
|
||||
const chapterIdsToDelete = getChapterIdsToDeleteForChapterUpdate(
|
||||
currentChapter,
|
||||
mangaChapters,
|
||||
previousChapters,
|
||||
patch,
|
||||
deleteChaptersWhileReading,
|
||||
deleteChaptersWithBookmark,
|
||||
shouldSkipDupChapters,
|
||||
);
|
||||
|
||||
const isUpdateRequired =
|
||||
!!chapterIdsToDelete.length ||
|
||||
chapterIdsToUpdate.some((id) => {
|
||||
const chapterUpToDateData = getReaderChapterFromCache(id);
|
||||
if (!chapterUpToDateData) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
(patch.isRead !== undefined && patch.isRead !== chapterUpToDateData.isRead) ||
|
||||
(patch.lastPageRead !== undefined &&
|
||||
patch.lastPageRead !== chapterUpToDateData.lastPageRead) ||
|
||||
(patch.isBookmarked !== undefined &&
|
||||
patch.isBookmarked !== chapterUpToDateData.isBookmarked)
|
||||
);
|
||||
});
|
||||
if (!isUpdateRequired) {
|
||||
return;
|
||||
}
|
||||
|
||||
await requestManager
|
||||
.updateChapters(
|
||||
chapterIdsToUpdate,
|
||||
{
|
||||
...patch,
|
||||
chapterIdsToDelete,
|
||||
trackProgressMangaId:
|
||||
updateProgressAfterReading && patch.isRead && manga.trackRecords.totalCount
|
||||
? manga.id
|
||||
: undefined,
|
||||
},
|
||||
{ errorPolicy: 'all' },
|
||||
)
|
||||
.response.catch(defaultPromiseErrorHandler('ReaderService::useUpdateChapter'));
|
||||
};
|
||||
|
||||
ReaderService.getOrCreateChapterUpdateQueue(currentChapter.id).enqueue(`${currentChapter.id}`, update);
|
||||
},
|
||||
[
|
||||
manga?.id,
|
||||
currentChapter?.id,
|
||||
mangaChapters,
|
||||
previousChapters,
|
||||
shouldSkipDupChapters,
|
||||
deleteChaptersWhileReading,
|
||||
deleteChaptersWithBookmark,
|
||||
updateProgressAfterReading,
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
static useSettings(): IReaderSettingsWithDefaultFlag {
|
||||
return useReaderStateSettingsContext().settings;
|
||||
}
|
||||
|
||||
static useSettingsWithoutDefaultFlag(): IReaderSettings {
|
||||
return convertFromReaderSettingsWithDefaultFlag(ReaderService.useSettings());
|
||||
}
|
||||
|
||||
static useGetThemeDirection(): Direction {
|
||||
const { direction } = useTheme();
|
||||
const { readingDirection } = ReaderService.useSettings();
|
||||
|
||||
return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection.value
|
||||
? direction
|
||||
: DIRECTION_TO_INVERTED[direction];
|
||||
}
|
||||
|
||||
/**
|
||||
* Writes the change immediately to the cache and sends a mutation in case "commit" is true.
|
||||
*/
|
||||
static updateSetting<Setting extends keyof IReaderSettings>(
|
||||
manga: MangaIdInfo,
|
||||
setting: Setting,
|
||||
value: IReaderSettings[Setting],
|
||||
commit: boolean = true,
|
||||
isGlobal: boolean = false,
|
||||
profile?: ReadingMode,
|
||||
): void {
|
||||
if (!manga || manga.id === FALLBACK_MANGA.id) {
|
||||
return;
|
||||
}
|
||||
const key = getMetadataKey(setting, profile !== undefined ? [profile?.toString()] : undefined);
|
||||
|
||||
const { cache } = requestManager.graphQLClient.client;
|
||||
|
||||
const isGlobalSetting = isGlobal || GLOBAL_READER_SETTING_KEYS.includes(setting);
|
||||
if (isGlobalSetting) {
|
||||
const reference = cache.writeFragment({
|
||||
fragment: GLOBAL_METADATA,
|
||||
data: {
|
||||
__typename: 'GlobalMetaType',
|
||||
key,
|
||||
value: JSON.stringify(value),
|
||||
},
|
||||
});
|
||||
cache.modify({
|
||||
fields: {
|
||||
metas(existingMetas, { readField }) {
|
||||
return {
|
||||
...existingMetas,
|
||||
nodes: updateMetadataList(key, existingMetas?.nodes, readField, () => reference),
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const reference = cache.writeFragment({
|
||||
fragment: MANGA_META_FIELDS,
|
||||
data: {
|
||||
__typename: 'MangaMetaType',
|
||||
mangaId: manga.id,
|
||||
key,
|
||||
value: JSON.stringify(value),
|
||||
},
|
||||
});
|
||||
cache.modify({
|
||||
id: cache.identify({ __typename: 'MangaType', id: manga.id }),
|
||||
fields: {
|
||||
meta(existingMetas, { readField }) {
|
||||
return updateMetadataList(key, existingMetas, readField, () => reference);
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (commit) {
|
||||
updateReaderSettings(manga, setting, value, isGlobal, profile).catch((e) =>
|
||||
makeToast(
|
||||
translate('reader.settings.error.label.failed_to_save_settings'),
|
||||
'error',
|
||||
getErrorMessage(e),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
static deleteSetting<Setting extends keyof IReaderSettings>(
|
||||
manga: MangaIdInfo,
|
||||
setting: Setting,
|
||||
isGlobal: boolean = false,
|
||||
profile?: string,
|
||||
): void {
|
||||
if (!manga || manga.id === FALLBACK_MANGA.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
const key = getMetadataKey(setting, profile !== undefined ? [profile] : undefined);
|
||||
|
||||
const { cache } = requestManager.graphQLClient.client;
|
||||
|
||||
const isGlobalSetting = isGlobal || GLOBAL_READER_SETTING_KEYS.includes(setting);
|
||||
if (isGlobalSetting) {
|
||||
cache.evict({ id: cache.identify({ __typename: 'GlobalMetaType', key }) });
|
||||
} else {
|
||||
cache.evict({ id: cache.identify({ __typename: 'MangaMetaType', mangaId: manga.id, key }) });
|
||||
}
|
||||
|
||||
const deleteSetting = isGlobalSetting
|
||||
? () => requestManager.deleteGlobalMeta(key).response
|
||||
: () => requestManager.deleteMangaMeta(manga.id, key).response;
|
||||
deleteSetting().catch((e) =>
|
||||
makeToast(translate('reader.settings.error.label.failed_to_save_settings'), 'error', getErrorMessage(e)),
|
||||
);
|
||||
}
|
||||
|
||||
static useCreateUpdateSetting<Setting extends keyof IReaderSettings>(
|
||||
manga: MangaIdInfo,
|
||||
profile?: ReadingMode,
|
||||
): (
|
||||
...args: OmitFirst<Parameters<typeof ReaderService.updateSetting<Setting>>>
|
||||
) => ReturnType<typeof ReaderService.updateSetting<Setting>> {
|
||||
return useCallback(
|
||||
(setting, value, commit, isGlobal) =>
|
||||
ReaderService.updateSetting<Setting>(manga, setting, value, commit, isGlobal, profile),
|
||||
[manga, profile],
|
||||
);
|
||||
}
|
||||
|
||||
static useCreateDeleteSetting<Setting extends keyof IReaderSettings>(
|
||||
manga: MangaIdInfo,
|
||||
profile?: ReadingMode,
|
||||
): (
|
||||
...args: OmitFirst<Parameters<typeof ReaderService.deleteSetting<Setting>>>
|
||||
) => ReturnType<typeof ReaderService.deleteSetting<Setting>> {
|
||||
return useCallback(
|
||||
(setting, isGlobal) => ReaderService.deleteSetting<Setting>(manga, setting, isGlobal, profile?.toString()),
|
||||
[manga, profile],
|
||||
);
|
||||
}
|
||||
|
||||
static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } {
|
||||
const isTouchDevice = MediaQuery.useIsTouchDevice();
|
||||
const { overlayMode } = ReaderService.useSettings();
|
||||
|
||||
const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO;
|
||||
const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP;
|
||||
const isMobileModeSelected = overlayMode === ReaderOverlayMode.MOBILE;
|
||||
|
||||
const isDesktop = isDesktopModeSelected || (isAutoModeSelected && !isTouchDevice);
|
||||
const isMobile = isMobileModeSelected || (isAutoModeSelected && isTouchDevice);
|
||||
|
||||
return {
|
||||
mode: isDesktop ? ReaderOverlayMode.DESKTOP : ReaderOverlayMode.MOBILE,
|
||||
isDesktop,
|
||||
isMobile,
|
||||
};
|
||||
}
|
||||
|
||||
static useExit(): () => void {
|
||||
const { manga } = useReaderStateMangaContext();
|
||||
const { exitMode } = ReaderService.useSettings();
|
||||
const handleBack = useBackButton();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const openMangaPage = useCallback(() => {
|
||||
if (!manga) {
|
||||
return () => {};
|
||||
}
|
||||
|
||||
return navigate(AppRoutes.manga.path(manga.id));
|
||||
}, [manga]);
|
||||
|
||||
switch (exitMode) {
|
||||
case ReaderExitMode.PREVIOUS:
|
||||
return handleBack;
|
||||
case ReaderExitMode.MANGA:
|
||||
return openMangaPage;
|
||||
default:
|
||||
throw new Error(`Unexpected "exitMode" (${exitMode})`);
|
||||
}
|
||||
}
|
||||
}
|
||||
257
src/features/reader/services/ReaderSettingsMetadata.ts
Normal file
257
src/features/reader/services/ReaderSettingsMetadata.ts
Normal file
@@ -0,0 +1,257 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { useEffect, useMemo } from 'react';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import {
|
||||
requestUpdateMangaMetadata,
|
||||
requestUpdateServerMetadata,
|
||||
} from '@/features/metadata/services/MetadataUpdater.ts';
|
||||
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { IReaderSettings, IReaderSettingsWithDefaultFlag, ReadingMode } from '@/features/reader/types/Reader.types.ts';
|
||||
import { convertFromGqlMeta } from '@/features/metadata/services/MetadataConverter.ts';
|
||||
import { getMetadataFrom } from '@/features/metadata/services/MetadataReader.ts';
|
||||
import {
|
||||
AllowedMetadataValueTypes,
|
||||
GqlMetaHolder,
|
||||
Metadata,
|
||||
MetadataHolder,
|
||||
MetadataHolderType,
|
||||
} from '@/features/metadata/Metadata.types.ts';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { MangaIdInfo } from '@/features/manga/Manga.types.ts';
|
||||
import {
|
||||
DEFAULT_READER_SETTINGS,
|
||||
GLOBAL_READER_SETTING_KEYS,
|
||||
} from '@/features/reader/constants/ReaderSettings.constants.tsx';
|
||||
import { DEFAULT_DEVICE, getActiveDevice } from '@/features/device/services/Device.ts';
|
||||
import { APP_METADATA_KEY_PREFIX } from '@/features/metadata/Metadata.constants.ts';
|
||||
import { extractOriginalKey } from '@/features/metadata/Metadata.utils.ts';
|
||||
|
||||
export const convertFromReaderSettingsWithDefaultFlag = (settings: IReaderSettingsWithDefaultFlag): IReaderSettings =>
|
||||
Object.fromEntries(
|
||||
Object.entries(settings).map(([key, value]) => [
|
||||
key,
|
||||
Object.hasOwn(value, 'value') && Object.hasOwn(value, 'isDefault') ? value.value : value,
|
||||
]),
|
||||
) as IReaderSettings;
|
||||
|
||||
const convertToSettingsWithDefaultFlag = (
|
||||
type: Extract<MetadataHolderType, 'global' | 'manga'>,
|
||||
settings: IReaderSettings,
|
||||
metadataHolder: MetadataHolder,
|
||||
): IReaderSettingsWithDefaultFlag => {
|
||||
const activeDevice = getActiveDevice();
|
||||
const istDefaultDevice = activeDevice === DEFAULT_DEVICE;
|
||||
const existingSettings = Object.keys(metadataHolder.meta ?? {})
|
||||
// settings that are not for the active device need to be filtered out, otherwise, they mess up the "isDefault" flag
|
||||
.filter((metaKey) => {
|
||||
// the default device is not added as a prefix to the key, thus, there should only be the app prefix for these reader settings
|
||||
if (istDefaultDevice) {
|
||||
return metaKey.match(/_/g)?.length === 1;
|
||||
}
|
||||
|
||||
return metaKey.startsWith(`${APP_METADATA_KEY_PREFIX}_${activeDevice}_`);
|
||||
})
|
||||
.map((metaKey) => extractOriginalKey(metaKey));
|
||||
const settingsWithDefault = Object.fromEntries(
|
||||
(Object.entries(settings) as [keyof IReaderSettings, IReaderSettings[keyof IReaderSettings]][]).map(
|
||||
([key, value]) => {
|
||||
const isGlobalSetting = GLOBAL_READER_SETTING_KEYS.includes(key);
|
||||
if (isGlobalSetting) {
|
||||
return [key, value];
|
||||
}
|
||||
|
||||
const isDefaultSetting = type === 'manga' && !existingSettings.includes(key);
|
||||
return [
|
||||
key,
|
||||
{
|
||||
value,
|
||||
isDefault: isDefaultSetting,
|
||||
},
|
||||
];
|
||||
},
|
||||
),
|
||||
) as IReaderSettingsWithDefaultFlag;
|
||||
|
||||
return settingsWithDefault;
|
||||
};
|
||||
|
||||
const convertSettingsToMetadata = (
|
||||
settings: Partial<IReaderSettings>,
|
||||
): Metadata<string, AllowedMetadataValueTypes> => ({
|
||||
...settings,
|
||||
tapZoneInvertMode: JSON.stringify(settings.tapZoneInvertMode),
|
||||
customFilter: JSON.stringify(settings.customFilter),
|
||||
readerWidth: JSON.stringify(settings.readerWidth),
|
||||
hotkeys: JSON.stringify(settings.hotkeys),
|
||||
autoScroll: JSON.stringify(settings.autoScroll),
|
||||
});
|
||||
|
||||
export const DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG = convertToSettingsWithDefaultFlag(
|
||||
'global',
|
||||
DEFAULT_READER_SETTINGS,
|
||||
{ meta: convertSettingsToMetadata(DEFAULT_READER_SETTINGS) as Metadata },
|
||||
);
|
||||
|
||||
export const getReaderSettings = (
|
||||
type: Extract<MetadataHolderType, 'global' | 'manga'>,
|
||||
metadataHolder: (MangaIdInfo & MetadataHolder) | MetadataHolder,
|
||||
defaultSettings: IReaderSettings = DEFAULT_READER_SETTINGS,
|
||||
useEffectFn?: typeof useEffect,
|
||||
profile?: ReadingMode,
|
||||
): IReaderSettings =>
|
||||
getMetadataFrom(
|
||||
type as Parameters<typeof getMetadataFrom>[0],
|
||||
metadataHolder as Parameters<typeof getMetadataFrom>[1],
|
||||
defaultSettings,
|
||||
profile !== undefined ? [profile.toString()] : undefined,
|
||||
useEffectFn,
|
||||
);
|
||||
|
||||
function getReaderSettingsWithDefaultValueFallback(
|
||||
type: 'global',
|
||||
metadataHolder: MetadataHolder,
|
||||
defaultSettings?: IReaderSettings,
|
||||
useEffectFn?: typeof useEffect,
|
||||
profile?: ReadingMode,
|
||||
): IReaderSettingsWithDefaultFlag;
|
||||
function getReaderSettingsWithDefaultValueFallback(
|
||||
type: 'manga',
|
||||
metadataHolder: MangaIdInfo & MetadataHolder,
|
||||
defaultSettings?: IReaderSettings,
|
||||
useEffectFn?: typeof useEffect,
|
||||
profile?: ReadingMode,
|
||||
): IReaderSettingsWithDefaultFlag;
|
||||
function getReaderSettingsWithDefaultValueFallback(
|
||||
type: Extract<MetadataHolderType, 'global' | 'manga'>,
|
||||
metadataHolder: (MangaIdInfo & MetadataHolder) | MetadataHolder,
|
||||
defaultSettings: IReaderSettings = DEFAULT_READER_SETTINGS,
|
||||
useEffectFn?: typeof useEffect,
|
||||
profile?: ReadingMode,
|
||||
): IReaderSettingsWithDefaultFlag {
|
||||
const settings = getReaderSettings(type, metadataHolder, defaultSettings, useEffectFn, profile);
|
||||
return convertToSettingsWithDefaultFlag(type, settings, metadataHolder);
|
||||
}
|
||||
|
||||
const getSettings = (
|
||||
metaHolder: MangaIdInfo & GqlMetaHolder,
|
||||
defaultSettings?: IReaderSettings,
|
||||
useEffectFn?: typeof useEffect,
|
||||
profile?: ReadingMode,
|
||||
): IReaderSettingsWithDefaultFlag =>
|
||||
getReaderSettingsWithDefaultValueFallback(
|
||||
'manga',
|
||||
{
|
||||
...metaHolder,
|
||||
meta: convertFromGqlMeta(
|
||||
metaHolder.meta,
|
||||
(key) => !GLOBAL_READER_SETTING_KEYS.includes(extractOriginalKey(key)),
|
||||
),
|
||||
},
|
||||
defaultSettings,
|
||||
useEffectFn,
|
||||
profile,
|
||||
);
|
||||
|
||||
export const getReaderSettingsFor = (
|
||||
metaHolder: MangaIdInfo & GqlMetaHolder,
|
||||
defaultSettings: IReaderSettings,
|
||||
): IReaderSettingsWithDefaultFlag => getSettings(metaHolder, defaultSettings);
|
||||
|
||||
export const useGetReaderSettingsFor = (
|
||||
metaHolder: MangaIdInfo & GqlMetaHolder,
|
||||
defaultSettings: IReaderSettings,
|
||||
profile?: ReadingMode,
|
||||
): IReaderSettingsWithDefaultFlag => {
|
||||
const settings = getSettings(metaHolder, defaultSettings, useEffect, profile);
|
||||
return useMemo(() => settings, [metaHolder, defaultSettings, profile]);
|
||||
};
|
||||
|
||||
export const useDefaultReaderSettings = (
|
||||
profile?: ReadingMode,
|
||||
): {
|
||||
metadata?: Metadata;
|
||||
settings: IReaderSettings;
|
||||
loading: boolean;
|
||||
request: ReturnType<typeof requestManager.useGetGlobalMeta>;
|
||||
} => {
|
||||
const request = requestManager.useGetGlobalMeta({ notifyOnNetworkStatusChange: true });
|
||||
const { data, loading } = request;
|
||||
const metadata = useMemo(() => convertFromGqlMeta(data?.metas.nodes), [data?.metas.nodes]);
|
||||
const metaHolder: MetadataHolder = useMemo(() => ({ meta: metadata }), [metadata]);
|
||||
const tmpSettings = getReaderSettings('global', metaHolder, undefined, useEffect, profile);
|
||||
const settings = useMemo(() => tmpSettings, [metaHolder, profile]);
|
||||
|
||||
return useMemo(
|
||||
() => ({
|
||||
metadata,
|
||||
settings,
|
||||
loading,
|
||||
request,
|
||||
}),
|
||||
[metadata, settings, loading, request],
|
||||
);
|
||||
};
|
||||
|
||||
export const useDefaultReaderSettingsWithDefaultFlag = (
|
||||
profile?: ReadingMode,
|
||||
): {
|
||||
metadata?: Metadata;
|
||||
settings: IReaderSettingsWithDefaultFlag;
|
||||
loading: boolean;
|
||||
request: ReturnType<typeof requestManager.useGetGlobalMeta>;
|
||||
} => {
|
||||
const request = requestManager.useGetGlobalMeta({ notifyOnNetworkStatusChange: true });
|
||||
const { data, loading } = request;
|
||||
const metadata = useMemo(() => convertFromGqlMeta(data?.metas.nodes), [data?.metas.nodes]);
|
||||
const metaHolder: MetadataHolder = useMemo(() => ({ meta: metadata }), [metadata]);
|
||||
const tmpSettings = getReaderSettingsWithDefaultValueFallback('global', metaHolder, undefined, useEffect, profile);
|
||||
const settings = useMemo(() => tmpSettings, [metaHolder, profile]);
|
||||
|
||||
return useMemo(
|
||||
() => ({
|
||||
metadata,
|
||||
settings,
|
||||
loading,
|
||||
request,
|
||||
}),
|
||||
[metadata, settings, loading, request],
|
||||
);
|
||||
};
|
||||
|
||||
export const updateReaderSettings = async <Setting extends keyof IReaderSettings = keyof IReaderSettings>(
|
||||
manga: Pick<MangaType, 'id'> & GqlMetaHolder,
|
||||
setting: Setting,
|
||||
value: IReaderSettings[Setting],
|
||||
isGlobal: boolean = false,
|
||||
profile?: ReadingMode,
|
||||
): Promise<void[]> => {
|
||||
const isGlobalSetting = isGlobal || GLOBAL_READER_SETTING_KEYS.includes(setting);
|
||||
if (isGlobalSetting) {
|
||||
return requestUpdateServerMetadata(
|
||||
[[setting, convertSettingsToMetadata({ [setting]: value })[setting]]],
|
||||
profile !== undefined ? [profile?.toString()] : undefined,
|
||||
);
|
||||
}
|
||||
|
||||
return requestUpdateMangaMetadata(
|
||||
manga,
|
||||
[[setting, convertSettingsToMetadata({ [setting]: value })[setting]]],
|
||||
profile !== undefined ? [profile?.toString()] : undefined,
|
||||
);
|
||||
};
|
||||
export const createUpdateReaderSettings =
|
||||
<Settings extends keyof IReaderSettings>(
|
||||
manga: Pick<MangaType, 'id'> & GqlMetaHolder,
|
||||
handleError: (error: any) => void = defaultPromiseErrorHandler('createUpdateReaderSettings'),
|
||||
profile?: ReadingMode,
|
||||
): ((...args: OmitFirst<Parameters<typeof updateReaderSettings<Settings>>>) => Promise<void | void[]>) =>
|
||||
(setting, value, isGlobal) =>
|
||||
updateReaderSettings(manga, setting, value, isGlobal, profile).catch(handleError);
|
||||
196
src/features/reader/services/ReaderTapZoneService.ts
Normal file
196
src/features/reader/services/ReaderTapZoneService.ts
Normal file
@@ -0,0 +1,196 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import i18next, { t as translate } from 'i18next';
|
||||
import { CSSProperties } from 'react';
|
||||
import {
|
||||
ReaderTapZoneRect,
|
||||
TapZoneInvertMode,
|
||||
TapZoneLayouts,
|
||||
TapZoneRegion,
|
||||
TapZoneRegionType,
|
||||
} from '@/features/reader/types/TapZoneLayout.types.ts';
|
||||
import {
|
||||
READER_TAP_ZONE_LAYOUTS,
|
||||
TAP_ZONE_REGION_TYPE_DATA,
|
||||
} from '@/features/reader/constants/ReaderTapZone.constants.ts';
|
||||
|
||||
interface InvertMode extends TapZoneInvertMode {
|
||||
isRTL: boolean;
|
||||
}
|
||||
|
||||
export class ReaderTapZoneService {
|
||||
private static layout: TapZoneLayouts | null = null;
|
||||
|
||||
private static canvas: HTMLCanvasElement | null = null;
|
||||
|
||||
private static width: number | null = null;
|
||||
|
||||
private static height: number | null = null;
|
||||
|
||||
private static language: string | null = null;
|
||||
|
||||
private static invertMode: InvertMode | null = null;
|
||||
|
||||
private static regions: TapZoneRegion[] | null = null;
|
||||
|
||||
private static fontStyle: CSSProperties | null = null;
|
||||
|
||||
private static invertVertical = ([x, y, width, height]: ReaderTapZoneRect): ReaderTapZoneRect => [
|
||||
x,
|
||||
100 - (y + height),
|
||||
width,
|
||||
height,
|
||||
];
|
||||
|
||||
private static invertHorizontal = ([x, y, width, height]: ReaderTapZoneRect): ReaderTapZoneRect => [
|
||||
100 - (x + width),
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
];
|
||||
|
||||
private static invertRect(rect: ReaderTapZoneRect, { vertical, horizontal, isRTL }: InvertMode): ReaderTapZoneRect {
|
||||
const rectInvertedVertical = vertical ? this.invertVertical(rect) : rect;
|
||||
const rectInvertedHorizontal = horizontal ? this.invertHorizontal(rectInvertedVertical) : rectInvertedVertical;
|
||||
return isRTL ? this.invertHorizontal(rectInvertedHorizontal) : rectInvertedHorizontal;
|
||||
}
|
||||
|
||||
private static getRegions(layout: TapZoneLayouts, invertMode: InvertMode): TapZoneRegion[] {
|
||||
const regions = READER_TAP_ZONE_LAYOUTS[layout];
|
||||
|
||||
return regions.map(({ type, rect }) => ({ type, rect: this.invertRect(rect, invertMode) }));
|
||||
}
|
||||
|
||||
private static isCanvasReusable(
|
||||
layout: TapZoneLayouts,
|
||||
canvasWidth: number,
|
||||
canvasHeight: number,
|
||||
fontStyle: CSSProperties,
|
||||
invertMode: InvertMode,
|
||||
): boolean {
|
||||
const isSameLayout = this.layout === layout;
|
||||
const isSameWidth = this.width === canvasWidth;
|
||||
const isSameHeight = this.height === canvasHeight;
|
||||
const doesCanvasExist = !!this.canvas;
|
||||
const isSameLanguage = this.language === i18next.language;
|
||||
const isSameInvertMode =
|
||||
this.invertMode?.vertical === invertMode.vertical &&
|
||||
this.invertMode.horizontal === invertMode.horizontal &&
|
||||
this.invertMode.isRTL === invertMode.isRTL;
|
||||
const isSameFontStyle = this.fontStyle === fontStyle;
|
||||
|
||||
return (
|
||||
doesCanvasExist &&
|
||||
isSameWidth &&
|
||||
isSameHeight &&
|
||||
isSameLayout &&
|
||||
isSameLanguage &&
|
||||
isSameInvertMode &&
|
||||
isSameFontStyle
|
||||
);
|
||||
}
|
||||
|
||||
private static drawCanvas(
|
||||
context: CanvasRenderingContext2D,
|
||||
canvasWidth: number,
|
||||
canvasHeight: number,
|
||||
fontStyle: CSSProperties,
|
||||
regions: TapZoneRegion[],
|
||||
): void {
|
||||
regions.forEach(({ type, rect: [rectX, rectY, rectWidth, rectHeight] }) => {
|
||||
const { text: translationKey, color } = TAP_ZONE_REGION_TYPE_DATA[type];
|
||||
const text = translate(translationKey);
|
||||
|
||||
const calcActualValue = (value: number, size: number) => (value / 100) * size;
|
||||
const x = calcActualValue(rectX, canvasWidth);
|
||||
const y = calcActualValue(rectY, canvasHeight);
|
||||
const width = calcActualValue(rectWidth, canvasWidth);
|
||||
const height = calcActualValue(rectHeight, canvasHeight);
|
||||
|
||||
const calcRectCenter = (pos1: number, pos2: number) => (pos1 + pos2) * 0.5 + pos1 * 0.5;
|
||||
const rectCenterX = calcRectCenter(x, width);
|
||||
const rectCenterY = calcRectCenter(y, height);
|
||||
|
||||
context.beginPath();
|
||||
|
||||
context.rect(x, y, width, height);
|
||||
context.fillStyle = color;
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = 0.1;
|
||||
|
||||
context.stroke();
|
||||
context.fill();
|
||||
|
||||
context.strokeStyle = 'black';
|
||||
context.textAlign = 'center';
|
||||
context.textBaseline = 'middle';
|
||||
context.font = `${fontStyle.fontSize} ${fontStyle.fontFamily}`;
|
||||
|
||||
context.strokeStyle = 'black';
|
||||
context.lineWidth = 3;
|
||||
context.strokeText(text, rectCenterX, rectCenterY);
|
||||
|
||||
context.lineWidth = 1;
|
||||
context.fillStyle = 'white';
|
||||
context.fillText(text, rectCenterX, rectCenterY);
|
||||
});
|
||||
}
|
||||
|
||||
static getOrCreateCanvas(
|
||||
layout: TapZoneLayouts,
|
||||
canvasWidth: number,
|
||||
canvasHeight: number,
|
||||
fontStyle: CSSProperties,
|
||||
invertMode: InvertMode,
|
||||
): HTMLCanvasElement {
|
||||
if (this.isCanvasReusable(layout, canvasWidth, canvasHeight, fontStyle, invertMode)) {
|
||||
return this.canvas!;
|
||||
}
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d')!;
|
||||
|
||||
context.canvas.width = canvasWidth;
|
||||
context.canvas.height = canvasHeight;
|
||||
|
||||
const regions = this.getRegions(layout, invertMode);
|
||||
this.drawCanvas(context, canvasWidth, canvasHeight, fontStyle, regions);
|
||||
|
||||
this.layout = layout;
|
||||
this.canvas = canvas;
|
||||
this.width = canvasWidth;
|
||||
this.height = canvasHeight;
|
||||
this.language = i18next.language;
|
||||
this.invertMode = invertMode;
|
||||
this.regions = regions;
|
||||
this.fontStyle = fontStyle;
|
||||
|
||||
return canvas;
|
||||
}
|
||||
|
||||
private static doesRegionContainPos(region: TapZoneRegion, x: number, y: number): boolean {
|
||||
const [rectX, rectY, width, height] = region.rect;
|
||||
|
||||
return x >= rectX && x <= rectX + width && y >= rectY && y <= rectY + height;
|
||||
}
|
||||
|
||||
static getAction(x: number, y: number): TapZoneRegionType {
|
||||
const xPercentage = (x / this.width!) * 100;
|
||||
const yPercentage = (y / this.height!) * 100;
|
||||
const region = this.regions?.find((regionToCheck) =>
|
||||
this.doesRegionContainPos(regionToCheck, xPercentage, yPercentage),
|
||||
);
|
||||
|
||||
if (region) {
|
||||
return region.type;
|
||||
}
|
||||
|
||||
return TapZoneRegionType.MENU;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user