diff --git a/src/modules/core/AppRoute.constants.ts b/src/modules/core/AppRoute.constants.ts index 00a07210..9560023e 100644 --- a/src/modules/core/AppRoute.constants.ts +++ b/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}`, }, diff --git a/src/modules/reader/components/ReaderHotkeys.tsx b/src/modules/reader/components/ReaderHotkeys.tsx index ee29cc0f..3c9b64ab 100644 --- a/src/modules/reader/components/ReaderHotkeys.tsx +++ b/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], () => { diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx index 76aa098d..f71686a4 100644 --- a/src/modules/reader/components/viewer/ReaderViewer.tsx +++ b/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.SINGLE_PAGE]: PageInViewportType.X, @@ -62,6 +63,7 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef(null); @@ -220,6 +222,22 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef 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 ( , + setIsOverlayVisible: ContextType['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');