diff --git a/src/modules/reader/components/ReaderHotkeys.tsx b/src/modules/reader/components/ReaderHotkeys.tsx index 2133fd97..21315aa0 100644 --- a/src/modules/reader/components/ReaderHotkeys.tsx +++ b/src/modules/reader/components/ReaderHotkeys.tsx @@ -94,8 +94,16 @@ export const ReaderHotkeys = ({ useHotkeys(hotkeys[ReaderHotkey.NEXT_PAGE], () => openPage('next'), [openPage]); useHotkeys( hotkeys[ReaderHotkey.SCROLL_BACKWARD], - () => - scrollElementRef.current && + () => { + if (automaticScrolling.isActive) { + automaticScrolling.setDirection(ScrollOffset.BACKWARD); + return; + } + + if (!scrollElementRef.current) { + return; + } + ReaderControls.scroll( ScrollOffset.BACKWARD, CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION[readingMode.value], @@ -107,14 +115,30 @@ export const ReaderHotkeys = ({ setIsOverlayVisible, setShowPreview, scrollAmount, - ), + ); + }, { preventDefault: true }, - [readingMode.value, readingDirection.value, themeDirection, openChapter, scrollAmount], + [ + readingMode.value, + readingDirection.value, + themeDirection, + openChapter, + scrollAmount, + automaticScrolling.isActive, + ], ); useHotkeys( hotkeys[ReaderHotkey.SCROLL_FORWARD], - () => - scrollElementRef.current && + () => { + if (automaticScrolling.isActive) { + automaticScrolling.setDirection(ScrollOffset.FORWARD); + return; + } + + if (!scrollElementRef.current) { + return; + } + ReaderControls.scroll( ScrollOffset.FORWARD, CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION[readingMode.value], @@ -126,9 +150,17 @@ export const ReaderHotkeys = ({ setIsOverlayVisible, setShowPreview, scrollAmount, - ), + ); + }, { preventDefault: true }, - [readingMode.value, readingDirection.value, themeDirection, openChapter, scrollAmount], + [ + readingMode.value, + readingDirection.value, + themeDirection, + openChapter, + scrollAmount, + automaticScrolling.isActive, + ], ); useHotkeys( hotkeys[ReaderHotkey.PREVIOUS_CHAPTER], diff --git a/src/modules/reader/contexts/ReaderAutoScrollContext.tsx b/src/modules/reader/contexts/ReaderAutoScrollContext.tsx index 04104211..30aaae34 100644 --- a/src/modules/reader/contexts/ReaderAutoScrollContext.tsx +++ b/src/modules/reader/contexts/ReaderAutoScrollContext.tsx @@ -18,6 +18,7 @@ export const ReaderAutoScrollContext = createContext({ toggleActive: () => {}, pause: () => {}, resume: () => {}, + setDirection: () => {}, }); export const useReaderAutoScrollContext = () => useContext(ReaderAutoScrollContext); diff --git a/src/modules/reader/contexts/ReaderAutoScrollContextProvider.tsx b/src/modules/reader/contexts/ReaderAutoScrollContextProvider.tsx index cdd0a3cc..8891b43f 100644 --- a/src/modules/reader/contexts/ReaderAutoScrollContextProvider.tsx +++ b/src/modules/reader/contexts/ReaderAutoScrollContextProvider.tsx @@ -21,6 +21,8 @@ import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.u import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx'; +import { ScrollOffset } from '@/modules/core/Core.types.ts'; +import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'; const BaseReaderAutoScrollContextProvider = ({ children, @@ -36,8 +38,17 @@ const BaseReaderAutoScrollContextProvider = ({ combinedDirection: Direction; }) => { const [scrollRef, setScrollRef] = useState(); + const [direction, setDirection] = useState(ScrollOffset.FORWARD); - const invertScrolling = readingMode === ReadingMode.CONTINUOUS_HORIZONTAL && themeDirection !== combinedDirection; + const isScrollingInvertedBasedOnReadingDirection = + readingMode === ReadingMode.CONTINUOUS_HORIZONTAL && themeDirection !== combinedDirection; + const invertScrolling = isScrollingInvertedBasedOnReadingDirection + ? getOptionForDirection( + direction === ScrollOffset.BACKWARD, + direction === ScrollOffset.FORWARD, + combinedDirection, + ) + : direction === ScrollOffset.BACKWARD; const isContinuousReadingModeActive = isContinuousReadingMode(readingMode); const changePage = useCallback(() => { @@ -57,6 +68,7 @@ const BaseReaderAutoScrollContextProvider = ({ () => ({ scrollRef, setScrollRef, + setDirection, ...automaticScrolling, }), [scrollRef, automaticScrolling], diff --git a/src/modules/reader/types/Reader.types.ts b/src/modules/reader/types/Reader.types.ts index b0617c05..408c14dc 100644 --- a/src/modules/reader/types/Reader.types.ts +++ b/src/modules/reader/types/Reader.types.ts @@ -14,6 +14,7 @@ import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types import { TMangaReader } from '@/modules/manga/Manga.types.ts'; import { useAutomaticScrolling } from '@/modules/core/hooks/useAutomaticScrolling.ts'; import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts'; +import { ScrollOffset } from '@/modules/core/Core.types.ts'; export enum ProgressBarType { HIDDEN, @@ -361,6 +362,7 @@ export type TReaderAutoScrollContext = ReturnType isActive: boolean; scrollRef?: MutableRefObject | (() => void); setScrollRef: (scrollRef?: MutableRefObject) => void; + setDirection: (direction: ScrollOffset) => void; }; export type ReaderPageSpreadState = { url: string; isSpread: boolean };