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

Extract hooks from utils file

Browse Source
This commit is contained in:
schroda
2025-01-18 22:07:59 +01:00
parent 3d120429ac
commit 19f83d5237
9 changed files with 288 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
src/modules/reader/utils/Reader.utils.ts
View File

@@ -6,33 +6,14 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { MutableRefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { Direction } from '@mui/material/styles';
import {
ReaderPageSpreadState,
ReaderResumeMode,
ReadingDirection,
ReadingMode,
} from '@/modules/reader/types/Reader.types.ts';
import { ReaderPageSpreadState, ReaderResumeMode, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
import { TChapterReader } from '@/modules/chapter/Chapter.types.ts';
import { ChapterIdInfo, Chapters } from '@/modules/chapter/services/Chapters.ts';
import { CHAPTER_READER_FIELDS } from '@/lib/graphql/fragments/ChapterFragments.ts';
import { useAutomaticScrolling } from '@/modules/core/hooks/useAutomaticScrolling.ts';
import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { DirectionOffset } from '@/Base.types.ts';
import {
createPagesData,
getScrollIntoViewInlineOption,
getScrollToXForReadingDirection,
isPageOfOutdatedPageLoadStates,
isSpreadPage,
} from '@/modules/reader/utils/ReaderPager.utils.tsx';
import { isPageOfOutdatedPageLoadStates, isSpreadPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
import { coerceIn } from '@/lib/HelperFunctions.ts';
import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts';
export const getInitialReaderPageIndex = (
resumeMode: ReaderResumeMode,
@@ -183,198 +164,3 @@ export const createUpdateReaderPageLoadState =
return statePageLoadStates.toSpliced(index, 1, { url: pageLoadState.url, loaded: true });
});
};
export const useReaderConvertPagesForReadingMode = (
currentPageIndex: number,
actualPages: ReaderStatePages['pages'],
pageUrls: ReaderStatePages['pageUrls'],
setPages: ReaderStatePages['setPages'],
setPagesToSpreadState: (states: ReaderPageSpreadState[]) => void,
updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>,
readingMode: ReadingMode,
) => {
const [wasDoublePageMode, setWasDoublePageMode] = useState(readingMode === ReadingMode.DOUBLE_PAGE);
useLayoutEffect(() => {
const convertPagesToNormalPageMode = wasDoublePageMode && readingMode !== ReadingMode.DOUBLE_PAGE;
if (convertPagesToNormalPageMode) {
setWasDoublePageMode(false);
const newPageData = createPagesData(pageUrls);
setPages(newPageData);
setPagesToSpreadState(newPageData.map(({ primary: { url } }) => ({ url, isSpread: false })));
return;
}
const convertPagesToDoublePageMode = readingMode === ReadingMode.DOUBLE_PAGE;
if (convertPagesToDoublePageMode) {
if (!wasDoublePageMode) {
updateCurrentPageIndex(getNextIndexFromPage(getPage(currentPageIndex, actualPages)));
}
setPages(actualPages);
setWasDoublePageMode(readingMode === ReadingMode.DOUBLE_PAGE);
}
}, [actualPages, readingMode]);
};
export const useReaderHandlePageSelection = (
pageToScrollToIndex: ReaderStatePages['pageToScrollToIndex'],
currentPageIndex: number,
pages: ReaderStatePages['pages'],
totalPages: number,
setPageToScrollToIndex: ReaderStatePages['setPageToScrollToIndex'],
updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>,
isContinuousReadingModeActive: boolean,
imageRefs: MutableRefObject<(HTMLElement | null)[]>,
themeDirection: Direction,
readingDirection: ReadingDirection,
) => {
useLayoutEffect(() => {
if (pageToScrollToIndex == null) {
return;
}
const pageToScrollTo = getPage(pageToScrollToIndex, pages);
if (isContinuousReadingModeActive) {
const directionOffset =
pageToScrollToIndex > currentPageIndex ? DirectionOffset.PREVIOUS : DirectionOffset.NEXT;
const imageRef = imageRefs.current[pageToScrollTo.pagesIndex];
imageRef?.scrollIntoView({
block: 'start',
inline: getScrollIntoViewInlineOption(directionOffset, themeDirection, readingDirection),
});
}
const newPageIndex = getNextIndexFromPage(pageToScrollTo);
const isLastPage = newPageIndex === totalPages - 1;
setPageToScrollToIndex(null);
updateCurrentPageIndex(newPageIndex, !isLastPage);
}, [pageToScrollToIndex]);
};
export const useReaderScrollToStartOnPageChange = (
currentPageIndex: ReaderStatePages['currentPageIndex'],
isContinuousReadingModeActive: boolean,
themeDirection: Direction,
readingDirection: ReadingDirection,
scrollElementRef: MutableRefObject<HTMLDivElement | null>,
): void => {
useLayoutEffect(() => {
if (!isContinuousReadingModeActive) {
scrollElementRef.current?.scrollTo(
getScrollToXForReadingDirection(scrollElementRef.current, themeDirection, readingDirection),
0,
);
}
}, [currentPageIndex]);
};
export const useReaderHideCursorOnInactivity = (scrollElementRef: MutableRefObject<HTMLDivElement | null>) => {
const mouseInactiveTimeout = useRef<NodeJS.Timeout>();
useEffect(() => {
const setCursorVisibility = (visible: boolean) => {
const scrollElement = scrollElementRef.current;
if (!scrollElement) {
return;
}
scrollElement.style.cursor = visible ? 'default' : 'none';
};
const handleMouseMove = () => {
setCursorVisibility(true);
clearTimeout(mouseInactiveTimeout.current);
mouseInactiveTimeout.current = setTimeout(() => {
setCursorVisibility(false);
}, 5000);
};
handleMouseMove();
window.addEventListener('mousemove', handleMouseMove);
return () => {
setCursorVisibility(true);
window.removeEventListener('mousemove', handleMouseMove);
clearTimeout(mouseInactiveTimeout.current);
};
}, []);
};
export const useReaderHorizontalModeInvertXYScrolling = (
readingMode: ReadingMode,
readingDirection: ReadingDirection,
scrollElementRef: MutableRefObject<HTMLDivElement | null>,
) => {
// invert x and y scrolling for the continuous horizontal reading mode
useEffect(() => {
if (readingMode !== ReadingMode.CONTINUOUS_HORIZONTAL) {
return () => {};
}
if (!scrollElementRef.current) {
return () => {};
}
const handleScroll = (e: WheelEvent) => {
e.preventDefault();
if (e.shiftKey) {
scrollElementRef.current?.scrollBy({
top: e.deltaY,
});
return;
}
scrollElementRef.current?.scrollBy({
left: readingDirection === ReadingDirection.LTR ? e.deltaY : e.deltaY * -1,
});
};
scrollElementRef.current.addEventListener('wheel', handleScroll);
return () => scrollElementRef.current?.removeEventListener('wheel', handleScroll);
}, [readingMode, readingDirection]);
};
export const useReaderHideOverlayOnUserScroll = (
isOverlayVisible: boolean,
setIsOverlayVisible: TReaderOverlayContext['setIsVisible'],
showPreview: TReaderTapZoneContext['showPreview'],
setShowPreview: TReaderTapZoneContext['setShowPreview'],
scrollElementRef: MutableRefObject<HTMLDivElement | null>,
) => {
useEffect(() => {
const handleScroll = () => {
if (isOverlayVisible) {
setIsOverlayVisible(false);
}
if (showPreview) {
setShowPreview(false);
}
};
scrollElementRef.current?.addEventListener('wheel', handleScroll);
scrollElementRef.current?.addEventListener('touchmove', handleScroll);
return () => {
scrollElementRef.current?.removeEventListener('wheel', handleScroll);
scrollElementRef.current?.removeEventListener('touchmove', handleScroll);
};
}, [isOverlayVisible, showPreview]);
};
export const useReaderAutoScroll = (
isOverlayVisible: boolean,
automaticScrolling: ReturnType<typeof useAutomaticScrolling>,
): void => {
useEffect(() => {
if (isOverlayVisible) {
automaticScrolling.pause();
return;
}
automaticScrolling.resume();
}, [isOverlayVisible, automaticScrolling.isPaused]);
};