From 19f83d523703e72efafd99b5170905b963ad1579 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sat, 18 Jan 2025 22:07:59 +0100 Subject: [PATCH] Extract hooks from utils file --- .../reader/components/viewer/ReaderViewer.tsx | 18 +- .../reader/hooks/useReaderAutoScroll.ts | 24 ++ .../useReaderConvertPagesForReadingMode.ts | 47 ++++ .../hooks/useReaderHandlePageSelection.ts | 54 +++++ .../hooks/useReaderHideCursorOnInactivity.ts | 40 ++++ .../hooks/useReaderHideOverlayOnUserScroll.ts | 38 +++ ...seReaderHorizontalModeInvertXYScrolling.ts | 45 ++++ .../useReaderScrollToStartOnPageChange.ts | 30 +++ src/modules/reader/utils/Reader.utils.ts | 218 +----------------- 9 files changed, 288 insertions(+), 226 deletions(-) create mode 100644 src/modules/reader/hooks/useReaderAutoScroll.ts create mode 100644 src/modules/reader/hooks/useReaderConvertPagesForReadingMode.ts create mode 100644 src/modules/reader/hooks/useReaderHandlePageSelection.ts create mode 100644 src/modules/reader/hooks/useReaderHideCursorOnInactivity.ts create mode 100644 src/modules/reader/hooks/useReaderHideOverlayOnUserScroll.ts create mode 100644 src/modules/reader/hooks/useReaderHorizontalModeInvertXYScrolling.ts create mode 100644 src/modules/reader/hooks/useReaderScrollToStartOnPageChange.ts diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx index 4ff190e1..04d27db4 100644 --- a/src/modules/reader/components/viewer/ReaderViewer.tsx +++ b/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.SINGLE_PAGE]: PageInViewportType.X, diff --git a/src/modules/reader/hooks/useReaderAutoScroll.ts b/src/modules/reader/hooks/useReaderAutoScroll.ts new file mode 100644 index 00000000..3bef081a --- /dev/null +++ b/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, +): void => { + useEffect(() => { + if (isOverlayVisible) { + automaticScrolling.pause(); + return; + } + + automaticScrolling.resume(); + }, [isOverlayVisible, automaticScrolling.isPaused]); +}; diff --git a/src/modules/reader/hooks/useReaderConvertPagesForReadingMode.ts b/src/modules/reader/hooks/useReaderConvertPagesForReadingMode.ts new file mode 100644 index 00000000..2e0d1ba9 --- /dev/null +++ b/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, + 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]); +}; diff --git a/src/modules/reader/hooks/useReaderHandlePageSelection.ts b/src/modules/reader/hooks/useReaderHandlePageSelection.ts new file mode 100644 index 00000000..ea3f3ce7 --- /dev/null +++ b/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, + 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]); +}; diff --git a/src/modules/reader/hooks/useReaderHideCursorOnInactivity.ts b/src/modules/reader/hooks/useReaderHideCursorOnInactivity.ts new file mode 100644 index 00000000..6654d53f --- /dev/null +++ b/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) => { + const mouseInactiveTimeout = useRef(); + + 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); + }; + }, []); +}; diff --git a/src/modules/reader/hooks/useReaderHideOverlayOnUserScroll.ts b/src/modules/reader/hooks/useReaderHideOverlayOnUserScroll.ts new file mode 100644 index 00000000..e2caa2ce --- /dev/null +++ b/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, +) => { + 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]); +}; diff --git a/src/modules/reader/hooks/useReaderHorizontalModeInvertXYScrolling.ts b/src/modules/reader/hooks/useReaderHorizontalModeInvertXYScrolling.ts new file mode 100644 index 00000000..49ee1dcd --- /dev/null +++ b/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, +) => { + // 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]); +}; diff --git a/src/modules/reader/hooks/useReaderScrollToStartOnPageChange.ts b/src/modules/reader/hooks/useReaderScrollToStartOnPageChange.ts new file mode 100644 index 00000000..92b3834e --- /dev/null +++ b/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, +): void => { + useLayoutEffect(() => { + if (!isContinuousReadingModeActive) { + scrollElementRef.current?.scrollTo( + getScrollToXForReadingDirection(scrollElementRef.current, themeDirection, readingDirection), + 0, + ); + } + }, [currentPageIndex]); +}; diff --git a/src/modules/reader/utils/Reader.utils.ts b/src/modules/reader/utils/Reader.utils.ts index b54191f7..311a46d6 100644 --- a/src/modules/reader/utils/Reader.utils.ts +++ b/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, - 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, - 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, -): void => { - useLayoutEffect(() => { - if (!isContinuousReadingModeActive) { - scrollElementRef.current?.scrollTo( - getScrollToXForReadingDirection(scrollElementRef.current, themeDirection, readingDirection), - 0, - ); - } - }, [currentPageIndex]); -}; - -export const useReaderHideCursorOnInactivity = (scrollElementRef: MutableRefObject) => { - const mouseInactiveTimeout = useRef(); - - 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, -) => { - // 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, -) => { - 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, -): void => { - useEffect(() => { - if (isOverlayVisible) { - automaticScrolling.pause(); - return; - } - - automaticScrolling.resume(); - }, [isOverlayVisible, automaticScrolling.isPaused]); -};