diff --git a/src/modules/reader/components/ReaderHotkeys.tsx b/src/modules/reader/components/ReaderHotkeys.tsx index 227aaa91..712a4999 100644 --- a/src/modules/reader/components/ReaderHotkeys.tsx +++ b/src/modules/reader/components/ReaderHotkeys.tsx @@ -29,6 +29,7 @@ import { ScrollOffset } from '@/modules/core/Core.types.ts'; import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'; import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts'; import { useReaderAutoScrollContext } from '@/modules/reader/contexts/ReaderAutoScrollContext.tsx'; +import { useReaderTapZoneContext } from '@/modules/reader/contexts/ReaderTapZoneContext.tsx'; const useHotkeys = (...args: Parameters): ReturnType => { const [keys, callback, options, dependencies] = args; @@ -80,6 +81,7 @@ export const ReaderHotkeys = ({ autoScroll, } = ReaderService.useSettings(); const automaticScrolling = useReaderAutoScrollContext(); + const { setShowPreview } = useReaderTapZoneContext(); const openChapter = ReaderControls.useOpenChapter(); const openPage = ReaderControls.useOpenPage(); @@ -102,6 +104,7 @@ export const ReaderHotkeys = ({ scrollElementRef.current, openChapter, setIsOverlayVisible, + setShowPreview, ReaderScrollAmount.SMALL, ), { preventDefault: true }, @@ -120,6 +123,7 @@ export const ReaderHotkeys = ({ scrollElementRef.current, openChapter, setIsOverlayVisible, + setShowPreview, ReaderScrollAmount.SMALL, ), { preventDefault: true }, diff --git a/src/modules/reader/services/ReaderControls.ts b/src/modules/reader/services/ReaderControls.ts index fa26342a..c1dd595d 100644 --- a/src/modules/reader/services/ReaderControls.ts +++ b/src/modules/reader/services/ReaderControls.ts @@ -41,7 +41,7 @@ import { } from '@/modules/reader/utils/ReaderPager.utils.tsx'; import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx'; import { useReaderTapZoneContext } from '@/modules/reader/contexts/ReaderTapZoneContext.tsx'; -import { TapZoneRegionType } from '@/modules/reader/types/TapZoneLayout.types.ts'; +import { TapZoneRegionType, TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts'; import { ReaderTapZoneService } from '@/modules/reader/services/ReaderTapZoneService.ts'; import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx'; import { getReaderChapterFromCache } from '@/modules/reader/utils/Reader.utils.ts'; @@ -97,6 +97,7 @@ export class ReaderControls { element: HTMLElement, openChapter: ReturnType<(typeof ReaderControls)['useOpenChapter']>, setIsOverlayVisible: TReaderOverlayContext['setIsVisible'], + setShowPreview: TReaderTapZoneContext['setShowPreview'], scrollAmountPercentage: number = ReaderScrollAmount.LARGE, ): void { if (!element) { @@ -125,6 +126,7 @@ export class ReaderControls { currentPos + elementSize * scrollAmount * scrollDirection; setIsOverlayVisible(false); + setShowPreview(false); switch (direction) { case ScrollDirection.X: @@ -259,6 +261,7 @@ export class ReaderControls { userReaderStatePagesContext(); const { previousChapter, nextChapter } = useReaderStateChaptersContext(); const { setIsVisible: setIsOverlayVisible } = useReaderOverlayContext(); + const { setShowPreview } = useReaderTapZoneContext(); const { readingDirection, readingMode } = ReaderService.useSettings(); const openChapter = ReaderControls.useOpenChapter(); @@ -290,6 +293,7 @@ export class ReaderControls { if (hideOverlay) { setIsOverlayVisible(false); + setShowPreview(false); } const hideTransitionPage = () => setTransitionPageMode(ReaderTransitionPageMode.NONE); @@ -501,6 +505,7 @@ export class ReaderControls { scrollElement, openChapter, setIsOverlayVisible, + setShowPreview, ); } else { openPage('previous', 'ltr'); @@ -517,6 +522,7 @@ export class ReaderControls { scrollElement, openChapter, setIsOverlayVisible, + setShowPreview, ); } else { openPage('next', 'ltr'); diff --git a/src/modules/reader/utils/Reader.utils.ts b/src/modules/reader/utils/Reader.utils.ts index f314c684..7f1bf58c 100644 --- a/src/modules/reader/utils/Reader.utils.ts +++ b/src/modules/reader/utils/Reader.utils.ts @@ -26,6 +26,7 @@ import { 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, @@ -312,6 +313,8 @@ export const useReaderHorizontalModeInvertXYScrolling = ( export const useReaderHideOverlayOnUserScroll = ( isOverlayVisible: boolean, setIsOverlayVisible: TReaderOverlayContext['setIsVisible'], + showPreview: TReaderTapZoneContext['showPreview'], + setShowPreview: TReaderTapZoneContext['setShowPreview'], scrollElementRef: MutableRefObject, ) => { useEffect(() => { @@ -319,6 +322,10 @@ export const useReaderHideOverlayOnUserScroll = ( if (isOverlayVisible) { setIsOverlayVisible(false); } + + if (showPreview) { + setShowPreview(false); + } }; scrollElementRef.current?.addEventListener('wheel', handleScroll); @@ -327,7 +334,7 @@ export const useReaderHideOverlayOnUserScroll = ( scrollElementRef.current?.removeEventListener('wheel', handleScroll); scrollElementRef.current?.removeEventListener('touchmove', handleScroll); }; - }, [isOverlayVisible]); + }, [isOverlayVisible, showPreview]); }; export const useReaderAutoScroll = (