Extract hooks from utils file

src/modules/reader/hooks/useReaderAutoScroll.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 } from 'react';
+import { useAutomaticScrolling } from '@/modules/core/hooks/useAutomaticScrolling.ts';
+
+export const useReaderAutoScroll = (
+    isOverlayVisible: boolean,
+    automaticScrolling: ReturnType<typeof useAutomaticScrolling>,
+): void => {
+    useEffect(() => {
+        if (isOverlayVisible) {
+            automaticScrolling.pause();
+            return;
+        }
+
+        automaticScrolling.resume();
+    }, [isOverlayVisible, automaticScrolling.isPaused]);
+};

src/modules/reader/hooks/useReaderConvertPagesForReadingMode.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { useLayoutEffect, useState } from 'react';
+import { ReaderPageSpreadState, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
+import { createPagesData } from '@/modules/reader/utils/ReaderPager.utils.tsx';
+import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
+
+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]);
+};

src/modules/reader/hooks/useReaderHandlePageSelection.ts

@@ -0,0 +1,54 @@
+/*
+ * 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, useLayoutEffect } from 'react';
+import { Direction } from '@mui/material/styles';
+import { ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
+import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
+import { DirectionOffset } from '@/Base.types.ts';
+import { getScrollIntoViewInlineOption } from '@/modules/reader/utils/ReaderPager.utils.tsx';
+import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
+
+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]);
+};

src/modules/reader/hooks/useReaderHideCursorOnInactivity.ts

@@ -0,0 +1,40 @@
+/*
+ * 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, useEffect, useRef } from 'react';
+
+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);
+        };
+    }, []);
+};

src/modules/reader/hooks/useReaderHideOverlayOnUserScroll.ts

@@ -0,0 +1,38 @@
+/*
+ * 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, useEffect } from 'react';
+import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.types.ts';
+import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts';
+
+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]);
+};

src/modules/reader/hooks/useReaderHorizontalModeInvertXYScrolling.ts

@@ -0,0 +1,45 @@
+/*
+ * 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, useEffect } from 'react';
+import { ReadingDirection, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+
+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]);
+};

src/modules/reader/hooks/useReaderScrollToStartOnPageChange.ts

@@ -0,0 +1,30 @@
+/*
+ * 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, useLayoutEffect } from 'react';
+import { Direction } from '@mui/material/styles';
+import { ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
+import { getScrollToXForReadingDirection } from '@/modules/reader/utils/ReaderPager.utils.tsx';
+import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+
+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]);
+};