Hide overlay on page/scroll change

src/modules/core/AppRoute.constants.ts

@@ -150,7 +150,7 @@ export const AppRoutes = {
         path: '/tracker/login/oauth',
     },
     reader: {
-        match: '/manga/:mangaId/chapter/:chapterIndex',
+        match: '/manga/:mangaId/chapter/:chapterIndex/*',
         path: (mangaId: MangaIdInfo['id'], chapterIndex: ChapterSourceOrderInfo['sourceOrder']) =>
             `/manga/${mangaId}/chapter/${chapterIndex}`,
     },

src/modules/reader/components/ReaderHotkeys.tsx

@@ -73,7 +73,7 @@ export const ReaderHotkeys = ({
     const readerThemeDirection = ReaderService.useGetThemeDirection();
     const { enableScope, disableScope } = useHotkeysContext();
     const { manga } = useReaderStateMangaContext();
-    const { isVisible, setIsVisible } = useReaderOverlayContext();
+    const { isVisible, setIsVisible: setIsOverlayVisible } = useReaderOverlayContext();
     const {
         hotkeys,
         pageScaleMode,
@@ -105,6 +105,7 @@ export const ReaderHotkeys = ({
                 themeDirection,
                 scrollElementRef.current,
                 openChapter,
+                setIsOverlayVisible,
                 ReaderScrollAmount.SMALL,
             ),
         { preventDefault: true },
@@ -122,6 +123,7 @@ export const ReaderHotkeys = ({
                 themeDirection,
                 scrollElementRef.current,
                 openChapter,
+                setIsOverlayVisible,
                 ReaderScrollAmount.SMALL,
             ),
         { preventDefault: true },
@@ -137,7 +139,7 @@ export const ReaderHotkeys = ({
         () => openChapter(getOptionForDirection('next', 'previous', readerThemeDirection)),
         [openChapter, readerThemeDirection],
     );
-    useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () => setIsVisible(!isVisible), [isVisible]);
+    useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () => setIsOverlayVisible(!isVisible), [isVisible]);
     useHotkeys(
         hotkeys[ReaderHotkey.CYCLE_SCALE_TYPE],
         () => {

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

@@ -38,6 +38,7 @@ import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProg
 import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
 import { useMouseDragScroll } from '@/modules/core/hooks/useMouseDragScroll.tsx';
 import { DirectionOffset } from '@/Base.types.ts';
+import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
 
 const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
     [ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -62,6 +63,7 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
     const { direction: themeDirection } = useTheme();
     const { readingMode, shouldOffsetDoubleSpreads, readingDirection } = ReaderService.useSettings();
     const { setScrollbarXSize, setScrollbarYSize } = useReaderScrollbarContext();
+    const { isVisible: isOverlayVisible, setIsVisible: setIsOverlayVisible } = useReaderOverlayContext();
     const updateCurrentPageIndex = ReaderControls.useUpdateCurrentPageIndex();
 
     const scrollElementRef = useRef<HTMLDivElement | null>(null);
@@ -220,6 +222,22 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
         return () => scrollElementRef.current?.removeEventListener('wheel', handleScroll);
     }, [readingMode.value, readingDirection.value]);
 
+    // hide overlay on user triggered scroll
+    useEffect(() => {
+        const handleScroll = () => {
+            if (isOverlayVisible) {
+                setIsOverlayVisible(false);
+            }
+        };
+
+        scrollElementRef.current?.addEventListener('wheel', handleScroll);
+        scrollElementRef.current?.addEventListener('touchmove', handleScroll);
+        return () => {
+            scrollElementRef.current?.removeEventListener('wheel', handleScroll);
+            scrollElementRef.current?.removeEventListener('touchmove', handleScroll);
+        };
+    }, [isOverlayVisible]);
+
     return (
         <Stack
             ref={scrollElementRef}

src/modules/reader/services/ReaderControls.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MutableRefObject, useCallback, useMemo } from 'react';
+import { ContextType, MutableRefObject, useCallback, useMemo } from 'react';
 import { Direction, useTheme } from '@mui/material/styles';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { getNextIndexFromPage, getNextPageIndex, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
@@ -26,7 +26,7 @@ import {
     READING_DIRECTION_TO_THEME_DIRECTION,
 } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { isEndOfPageInViewport, isPageInViewport } from '@/modules/reader/utils/ReaderPager.utils.tsx';
-import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
+import { ReaderOverlayContext, 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 { ReaderTapZoneService } from '@/modules/reader/services/ReaderTapZoneService.ts';
@@ -78,6 +78,7 @@ export class ReaderControls {
         themeDirection: Direction,
         element: HTMLElement,
         openChapter: ReturnType<(typeof ReaderControls)['useOpenChapter']>,
+        setIsOverlayVisible: ContextType<typeof ReaderOverlayContext>['setIsVisible'],
         scrollAmountPercentage: number = ReaderScrollAmount.LARGE,
     ): void {
         if (!element) {
@@ -105,6 +106,8 @@ export class ReaderControls {
         const getNewScrollPosition = (currentPos: number, elementSize: number) =>
             currentPos + elementSize * scrollAmount * scrollDirection;
 
+        setIsOverlayVisible(false);
+
         switch (direction) {
             case ScrollDirection.X:
                 if (isAtStartXForDirection && offset === ScrollOffset.BACKWARD && isContinuousReadingModeActive) {
@@ -171,6 +174,7 @@ export class ReaderControls {
         const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } =
             userReaderStatePagesContext();
         const { previousChapter, nextChapter } = useReaderStateChaptersContext();
+        const { setIsVisible: setIsOverlayVisible } = useReaderOverlayContext();
         const { readingDirection, readingMode } = ReaderService.useSettings();
         const openChapter = ReaderControls.useOpenChapter();
 
@@ -199,6 +203,8 @@ export class ReaderControls {
                     forceDirection,
                 );
 
+                setIsOverlayVisible(false);
+
                 const shouldOpenPreviousChapter =
                     isFirstPage && isATransitionPageVisible && convertedPage === 'previous' && !!previousChapter;
                 if (shouldOpenPreviousChapter) {
@@ -406,6 +412,7 @@ export class ReaderControls {
                                 themeDirection,
                                 scrollElement,
                                 openChapter,
+                                setIsOverlayVisible,
                             );
                         } else {
                             openPage('previous', 'ltr');
@@ -421,6 +428,7 @@ export class ReaderControls {
                                 themeDirection,
                                 scrollElement,
                                 openChapter,
+                                setIsOverlayVisible,
                             );
                         } else {
                             openPage('next', 'ltr');