Simplify ReaderControls#useHandleClick

src/features/reader/hotkeys/ReaderHotkeys.tsx

@@ -8,7 +8,6 @@
 
 import { useHotkeys as useHotKeysHook, useHotkeysContext } from 'react-hotkeys-hook';
 import { useEffect } from 'react';
-import { useTheme } from '@mui/material/styles';
 import { HOTKEY_SCOPES } from '@/features/hotkeys/Hotkeys.constants.ts';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { IReaderSettings, ReaderHotkey } from '@/features/reader/Reader.types.ts';
@@ -59,7 +58,6 @@ export const ReaderHotkeys = ({
 }: {
     scrollElementRef: React.MutableRefObject<HTMLElement | null>;
 }) => {
-    const { direction: themeDirection } = useTheme();
     const readerThemeDirection = ReaderService.useGetThemeDirection();
     const { enableScope, disableScope } = useHotkeysContext();
     const { hotkeys } = useReaderStoreShallow((state) => ({
@@ -91,14 +89,12 @@ export const ReaderHotkeys = ({
                 CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION[readingMode.value],
                 readingMode.value,
                 readingDirection.value,
-                themeDirection,
                 scrollElementRef.current,
                 getReaderStore().tapZone.setShowPreview,
                 scrollAmount,
             );
         },
         { preventDefault: true },
-        [themeDirection],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.SCROLL_FORWARD],
@@ -122,14 +118,12 @@ export const ReaderHotkeys = ({
                 CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION[readingMode.value],
                 readingMode.value,
                 readingDirection.value,
-                themeDirection,
                 scrollElementRef.current,
                 getReaderStore().tapZone.setShowPreview,
                 scrollAmount,
             );
         },
         { preventDefault: true },
-        [themeDirection],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.PREVIOUS_CHAPTER],

src/features/reader/services/ReaderControls.ts

@@ -7,7 +7,7 @@
  */
 
 import { MutableRefObject, RefObject, useCallback, useEffect } from 'react';
-import { Direction, useTheme } from '@mui/material/styles';
+import { Direction } from '@mui/material/styles';
 import { t as translate } from 'i18next';
 import {
     getNextIndexFromPage,
@@ -16,7 +16,7 @@ import {
     getPageForMousePos,
     getProgressBarPositionInfo,
 } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
-import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
+import { getCurrentTheme, getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import {
     PageInViewportType,
@@ -89,7 +89,6 @@ export class ReaderControls {
         direction: ScrollDirection,
         readingMode: ReadingMode,
         readingDirection: ReadingDirection,
-        themeDirection: Direction,
         element: HTMLElement,
         setShowPreview: TReaderTapZoneContext['setShowPreview'],
         scrollAmountPercentage: number = ReaderScrollAmount.LARGE,
@@ -99,7 +98,7 @@ export class ReaderControls {
         }
 
         const themeDirectionOfReadingDirection = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];
-        const areReadingDirectionsEqual = themeDirection === themeDirectionOfReadingDirection;
+        const areReadingDirectionsEqual = getCurrentTheme().direction === themeDirectionOfReadingDirection;
         const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
 
         const isAtStartY = Math.abs(element.scrollTop) <= 1;
@@ -522,13 +521,7 @@ export class ReaderControls {
         updateCurrentPageIndex(firstVisibleImageIndex, firstVisibleImageIndex !== lastPageIndex);
     }
 
-    static useHandleClick(
-        scrollElement: HTMLElement | null,
-    ): (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void {
-        const { direction: themeDirection } = useTheme();
-
-        return useCallback(
-            (e) => {
+    static handleClick(scrollElement: HTMLElement | null, e: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
         if (!scrollElement) {
             return;
         }
@@ -558,7 +551,6 @@ export class ReaderControls {
                         scrollDirection,
                         readingMode.value,
                         readingDirection.value,
-                                themeDirection,
                         scrollElement,
                         getReaderStore().tapZone.setShowPreview,
                         scrollAmount,
@@ -570,9 +562,6 @@ export class ReaderControls {
             default:
                 throw new Error(`Unexpected "TapZoneRegionType" (${action})`);
         }
-            },
-            [scrollElement, themeDirection],
-        );
     }
 
     static useHandleProgressDragging(

src/features/reader/viewer/ReaderViewer.tsx

@@ -175,8 +175,6 @@ const BaseReaderViewer = forwardRef(
             scrollbar.setYSize(scrollbarYSize);
         }, [scrollbarXSize, scrollbarYSize]);
 
-        const handleClick = ReaderControls.useHandleClick(scrollElementRef.current);
-
         const imageRefs = useRef<(HTMLElement | null)[]>(pages.map(() => null));
         const [{ minChapterViewWidth, minChapterViewHeight, minChapterSizeSourceChapterId }, setChapterViewerSize] =
             useState({
@@ -320,7 +318,7 @@ const BaseReaderViewer = forwardRef(
                         }),
                     }),
                 }}
-                onClick={(e) => !isDragging && handleClick(e)}
+                onClick={(e) => !isDragging && ReaderControls.handleClick(scrollElementRef.current, e)}
                 onScroll={() =>
                     ReaderControls.updateCurrentPageOnScroll(
                         imageRefs,