Hide "tap zone overlay" on user action

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<typeof useHotKeysHook>): ReturnType<typeof useHotKeysHook> => {
     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 },

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');

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<HTMLDivElement | null>,
 ) => {
     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 = (