Add hotkeys to switch auto scroll direction

While auto scroll is active, the direction can be changed via the "scroll backward/forward" hotkeys

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],

src/modules/reader/contexts/ReaderAutoScrollContext.tsx

@@ -18,6 +18,7 @@ export const ReaderAutoScrollContext = createContext<TReaderAutoScrollContext>({
     toggleActive: () => {},
     pause: () => {},
     resume: () => {},
+    setDirection: () => {},
 });
 
 export const useReaderAutoScrollContext = () => useContext(ReaderAutoScrollContext);

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<TReaderAutoScrollContext['scrollRef']>();
+    const [direction, setDirection] = useState<ScrollOffset>(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],

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<typeof useAutomaticScrolling>
     isActive: boolean;
     scrollRef?: MutableRefObject<HTMLElement | null> | (() => void);
     setScrollRef: (scrollRef?: MutableRefObject<HTMLElement | null>) => void;
+    setDirection: (direction: ScrollOffset) => void;
 };
 
 export type ReaderPageSpreadState = { url: string; isSpread: boolean };