ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide overlay on page/scroll change

Browse Source
This commit is contained in:
schroda
2024-12-11 21:04:44 +01:00
parent 8b67c2d6a9
commit 8ca0af8d02
4 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/core/AppRoute.constants.ts
View File

@@ -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}`,
},

6
src/modules/reader/components/ReaderHotkeys.tsx
View File

@@ -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],
() => {

18
src/modules/reader/components/viewer/ReaderViewer.tsx
View File

@@ -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}

12
src/modules/reader/services/ReaderControls.ts
View File

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