Extract hooks from utils file

src/modules/reader/components/viewer/ReaderViewer.tsx

@@ -46,18 +46,16 @@ import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.type
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { useReaderAutoScrollContext } from '@/modules/reader/contexts/ReaderAutoScrollContext.tsx';
-import {
-    createUpdateReaderPageLoadState,
-    useReaderAutoScroll,
-    useReaderConvertPagesForReadingMode,
-    useReaderHandlePageSelection,
-    useReaderHideCursorOnInactivity,
-    useReaderHideOverlayOnUserScroll,
-    useReaderHorizontalModeInvertXYScrolling,
-    useReaderScrollToStartOnPageChange,
-} from '@/modules/reader/utils/Reader.utils.ts';
+import { createUpdateReaderPageLoadState } from '@/modules/reader/utils/Reader.utils.ts';
 import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts';
 import { useReaderTapZoneContext } from '@/modules/reader/contexts/ReaderTapZoneContext.tsx';
+import { useReaderAutoScroll } from '@/modules/reader/hooks/useReaderAutoScroll.ts';
+import { useReaderHideOverlayOnUserScroll } from '@/modules/reader/hooks/useReaderHideOverlayOnUserScroll.ts';
+import { useReaderHorizontalModeInvertXYScrolling } from '@/modules/reader/hooks/useReaderHorizontalModeInvertXYScrolling.ts';
+import { useReaderHideCursorOnInactivity } from '@/modules/reader/hooks/useReaderHideCursorOnInactivity.ts';
+import { useReaderScrollToStartOnPageChange } from '@/modules/reader/hooks/useReaderScrollToStartOnPageChange.ts';
+import { useReaderHandlePageSelection } from '@/modules/reader/hooks/useReaderHandlePageSelection.ts';
+import { useReaderConvertPagesForReadingMode } from '@/modules/reader/hooks/useReaderConvertPagesForReadingMode.ts';
 
 const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
     [ReadingMode.SINGLE_PAGE]: PageInViewportType.X,

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]);
+};

src/modules/reader/utils/Reader.utils.ts

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