Use HOC for reader context usage

src/modules/reader/components/overlay/ReaderOverlay.tsx

@@ -16,10 +16,15 @@ import { ReaderNavBarDesktop } from '@/modules/reader/components/overlay/navigat
 import { ReaderOverlayHeaderMobile } from '@/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx';
 import { ReaderBottomBarMobile } from '@/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
-export const ReaderOverlay = ({ isVisible }: BaseReaderOverlayProps & MobileHeaderProps) => {
-    const { isDesktop, isMobile } = ReaderService.useOverlayMode();
-
+const BaseReaderOverlay = ({
+    isVisible,
+    isDesktop,
+    isMobile,
+}: BaseReaderOverlayProps &
+    MobileHeaderProps &
+    Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop' | 'isMobile'>) => {
     const [areSettingsOpen, setAreSettingsOpen] = useState(false);
 
     return (
@@ -44,3 +49,9 @@ export const ReaderOverlay = ({ isVisible }: BaseReaderOverlayProps & MobileHead
         </Box>
     );
 };
+
+export const ReaderOverlay = withPropsFrom(
+    BaseReaderOverlay,
+    [ReaderService.useOverlayMode],
+    ['isDesktop', 'isMobile'],
+);

src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx

@@ -28,21 +28,32 @@ import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapt
 import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { MobileHeaderProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
-import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
-import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
-import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
+import {
+    ReaderStateChapters,
+    TReaderScrollbarContext,
+    TReaderStateMangaContext,
+} from '@/modules/reader/types/Reader.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
+import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
+import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
+import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
 
 const DEFAULT_MANGA = { id: -1, title: '' };
 const DEFAULT_CHAPTER = { id: -1, name: '', realUrl: '', isBookmarked: false };
 
-export const ReaderOverlayHeaderMobile = ({ isVisible }: MobileHeaderProps) => {
+const BaseReaderOverlayHeaderMobile = ({
+    isVisible,
+    manga,
+    currentChapter,
+    scrollbarYSize,
+}: MobileHeaderProps &
+    Pick<TReaderStateMangaContext, 'manga'> &
+    Pick<ReaderStateChapters, 'currentChapter'> &
+    Pick<TReaderScrollbarContext, 'scrollbarYSize'>) => {
     const { t } = useTranslation();
-    const { manga } = useReaderStateMangaContext();
-    const { currentChapter } = useReaderStateChaptersContext();
     const getOptionForDirection = useGetOptionForDirection();
-    const { scrollbarYSize } = useReaderScrollbarContext();
     const handleBack = useBackButton();
     const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' });
 
@@ -128,3 +139,9 @@ export const ReaderOverlayHeaderMobile = ({ isVisible }: MobileHeaderProps) => {
         </Slide>
     );
 };
+
+export const ReaderOverlayHeaderMobile = withPropsFrom(
+    BaseReaderOverlayHeaderMobile,
+    [useReaderStateMangaContext, useReaderStateChaptersContext, useReaderScrollbarContext],
+    ['manga', 'currentChapter', 'scrollbarYSize'],
+);

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -32,6 +32,10 @@ import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/R
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
+import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
+import { ReaderStateChapters, TReaderStateMangaContext } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
 const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
     const wasNavBarStaticRef = useRef(isStaticNav);
@@ -52,17 +56,35 @@ const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolea
 };
 
 const DEFAULT_MANGA: MangaIdInfo = { id: -1 };
-export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDesktopProps) => {
+const BaseReaderNavBarDesktop = ({
+    isVisible,
+    openSettings,
+    setReaderNavBarWidth,
+    manga,
+    chapters,
+    currentChapter,
+    previousChapter,
+    nextChapter,
+    pages,
+    currentPageIndex,
+    pageLoadStates,
+    setPageLoadStates,
+    setRetryFailedPagesKeyPrefix,
+    exit,
+}: ReaderNavBarDesktopProps &
+    Pick<NavbarContextType, 'setReaderNavBarWidth'> &
+    Pick<TReaderStateMangaContext, 'manga'> &
+    Pick<ReaderStateChapters, 'currentChapter' | 'previousChapter' | 'nextChapter' | 'chapters'> &
+    Pick<
+        ReaderStatePages,
+        'pages' | 'currentPageIndex' | 'pageLoadStates' | 'setPageLoadStates' | 'setRetryFailedPagesKeyPrefix'
+    > & {
+        exit: ReturnType<typeof ReaderService.useExit>;
+    }) => {
     const { t } = useTranslation();
-    const { setReaderNavBarWidth } = useNavBarContext();
-    const { manga } = useReaderStateMangaContext();
-    const { chapters, currentChapter, nextChapter, previousChapter } = useReaderStateChaptersContext();
-    const { pages, currentPageIndex, pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } =
-        userReaderStatePagesContext();
 
     const getOptionForDirection = useGetOptionForDirection();
 
-    const exit = ReaderService.useExit();
     const updateReaderSettings = ReaderService.useCreateUpdateSetting(manga ?? DEFAULT_MANGA);
     const settings = ReaderService.useSettings();
 
@@ -154,3 +176,28 @@ export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDes
         </Drawer>
     );
 };
+
+export const ReaderNavBarDesktop = withPropsFrom(
+    BaseReaderNavBarDesktop,
+    [
+        useNavBarContext,
+        useReaderStateMangaContext,
+        useReaderStateChaptersContext,
+        userReaderStatePagesContext,
+        () => ({ exit: ReaderService.useExit() }),
+    ],
+    [
+        'setReaderNavBarWidth',
+        'manga',
+        'chapters',
+        'currentChapter',
+        'previousChapter',
+        'nextChapter',
+        'pages',
+        'currentPageIndex',
+        'pageLoadStates',
+        'setPageLoadStates',
+        'setRetryFailedPagesKeyPrefix',
+        'exit',
+    ],
+);

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx

@@ -23,16 +23,20 @@ import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
 import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
-export const ReaderNavBarDesktopChapterNavigation = ({
+const BaseReaderNavBarDesktopChapterNavigation = ({
     currentChapter,
     previousChapter,
     nextChapter,
     chapters = [],
-}: Pick<ReaderStateChapters, 'chapters' | 'currentChapter' | 'previousChapter' | 'nextChapter'>) => {
+    readerThemeDirection,
+    openChapter,
+}: Pick<ReaderStateChapters, 'chapters' | 'currentChapter' | 'previousChapter' | 'nextChapter'> & {
+    readerThemeDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
+    openChapter: ReturnType<typeof ReaderControls.useOpenChapter>;
+}) => {
     const { t } = useTranslation();
-    const readerThemeDirection = ReaderService.useGetThemeDirection();
-    const openChapter = ReaderControls.useOpenChapter();
 
     const popupState = usePopupState({ variant: 'popover', popupId: 'reader-nav-bar-desktop-chapter-list' });
 
@@ -111,3 +115,16 @@ export const ReaderNavBarDesktopChapterNavigation = ({
         </Stack>
     );
 };
+
+export const ReaderNavBarDesktopChapterNavigation = withPropsFrom(
+    BaseReaderNavBarDesktopChapterNavigation,
+    [
+        () => ({
+            readerThemeDirection: ReaderService.useGetThemeDirection(),
+        }),
+        () => ({
+            openChapter: ReaderControls.useOpenChapter(),
+        }),
+    ],
+    ['readerThemeDirection', 'openChapter'],
+);

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx

@@ -20,18 +20,23 @@ import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { ReaderNavBarDesktopNextPreviousButton } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx';
 import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
-export const ReaderNavBarDesktopPageNavigation = ({
+const BaseReaderNavBarDesktopPageNavigation = ({
     currentPageIndex,
     pages,
-}: Pick<ReaderStatePages, 'currentPageIndex' | 'pages'>) => {
+    readingDirection,
+    openPage,
+}: Pick<ReaderStatePages, 'currentPageIndex' | 'pages'> &
+    Pick<IReaderSettings, 'readingDirection'> & {
+        openPage: ReturnType<typeof ReaderControls.useOpenPage>;
+    }) => {
     const { t } = useTranslation();
-    const openPage = ReaderControls.useOpenPage();
-    const { readingDirection } = ReaderService.useSettings();
     const getOptionForDirection = useGetOptionForDirection();
     const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
 
-    const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
+    const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];
 
     return (
         <Stack sx={{ flexDirection: 'row', gap: 1 }} dir="ltr">
@@ -73,3 +78,9 @@ export const ReaderNavBarDesktopPageNavigation = ({
         </Stack>
     );
 };
+
+export const ReaderNavBarDesktopPageNavigation = withPropsFrom(
+    BaseReaderNavBarDesktopPageNavigation,
+    [() => ({ openPage: ReaderControls.useOpenPage() }), ReaderService.useSettingsWithoutDefaultFlag],
+    ['readingDirection', 'openPage'],
+);

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx

@@ -25,11 +25,20 @@ import { ReaderChapterList } from '@/modules/reader/components/overlay/navigatio
 import { ReaderBottomBarMobileQuickSettings } from '@/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx';
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
+import { ReaderStateChapters, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
-export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomBarMobileProps) => {
+const BaseReaderBottomBarMobile = ({
+    openSettings,
+    isVisible,
+    currentChapter,
+    chapters,
+    scrollbarXSize,
+    scrollbarYSize,
+}: ReaderBottomBarMobileProps &
+    Pick<ReaderStateChapters, 'currentChapter' | 'chapters'> &
+    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'>) => {
     const { t } = useTranslation();
-    const { currentChapter, chapters } = useReaderStateChaptersContext();
-    const { scrollbarXSize, scrollbarYSize } = useReaderScrollbarContext();
 
     const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' });
     const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' });
@@ -112,3 +121,9 @@ export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomB
         </>
     );
 };
+
+export const ReaderBottomBarMobile = withPropsFrom(
+    BaseReaderBottomBarMobile,
+    [useReaderStateChaptersContext, useReaderScrollbarContext],
+    ['currentChapter', 'chapters', 'scrollbarXSize', 'scrollbarYSize'],
+);

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx

@@ -13,11 +13,16 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
 import { DefaultSettingFootnote } from '@/modules/reader/components/settings/DefaultSettingFootnote.tsx';
+import { IReaderSettingsWithDefaultFlag, TReaderStateMangaContext } from '@/modules/reader/types/Reader.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
 const DEFAULT_MANGA: MangaIdInfo = { id: -1 };
-export const ReaderBottomBarMobileQuickSettings = () => {
-    const { manga } = useReaderStateMangaContext();
-    const { readingMode, readingDirection } = ReaderService.useSettings();
+const BaseReaderBottomBarMobileQuickSettings = ({
+    manga,
+    readingMode,
+    readingDirection,
+}: Pick<TReaderStateMangaContext, 'manga'> &
+    Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'readingDirection'>) => {
     const deleteSetting = ReaderService.useCreateDeleteSetting(manga ?? DEFAULT_MANGA);
 
     if (!manga) {
@@ -42,3 +47,9 @@ export const ReaderBottomBarMobileQuickSettings = () => {
         </Stack>
     );
 };
+
+export const ReaderBottomBarMobileQuickSettings = withPropsFrom(
+    BaseReaderBottomBarMobileQuickSettings,
+    [useReaderStateMangaContext, ReaderService.useSettings],
+    ['manga', 'readingMode', 'readingDirection'],
+);

src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx

@@ -11,8 +11,7 @@ import { ReactNode, useCallback, useMemo, useRef } from 'react';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { TypographyProps } from '@mui/material/Typography';
 import { StackProps } from '@mui/material/Stack';
-import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
-import { ReaderProgressBarProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { ReaderProgressBarProps, TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { ReaderProgressBarPageNumber } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarPageNumber.tsx';
 import { ReaderProgressBarContainer } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarContainer.tsx';
 import { ReaderProgressBarRoot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarRoot.tsx';
@@ -30,8 +29,10 @@ import { getOptionForDirection as getOptionForDirectionImpl } from '@/modules/th
 import { ReaderProgressBarSlotsActionArea } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotsActionArea.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
+import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 
-export const ReaderProgressBar = ({
+const BaseReaderProgressBar = ({
     totalPages,
     pages,
     pageLoadStates,
@@ -40,34 +41,37 @@ export const ReaderProgressBar = ({
     slots,
     createProgressBarSlot,
     progressBarPosition,
-}: ReaderProgressBarProps & {
-    createProgressBarSlot: (
-        page: ReaderProgressBarProps['pages'][number],
-        pageLoadStates: ReaderProgressBarProps['pageLoadStates'],
-        pagesIndex: number,
-    ) => ReactNode;
-    slotProps?: {
-        container?: StackProps;
-        progressBarRoot?: StackProps;
-        progressBarSlotsActionArea?: StackProps;
-        progressBarSlotsContainer?: StackProps;
-        progressBarSlot?: BoxProps;
-        progressBarReadPages?: BoxProps;
-        progressBarCurrentPageSlot?: BoxProps;
-        progressBarPageTexts?: {
-            base?: TypographyProps;
-            current?: TypographyProps;
-            total?: TypographyProps;
+    isDragging,
+    setIsDragging,
+    openPage,
+    direction,
+}: ReaderProgressBarProps &
+    Pick<TReaderProgressBarContext, 'isDragging' | 'setIsDragging'> & {
+        createProgressBarSlot: (
+            page: ReaderProgressBarProps['pages'][number],
+            pageLoadStates: ReaderProgressBarProps['pageLoadStates'],
+            pagesIndex: number,
+        ) => ReactNode;
+        slotProps?: {
+            container?: StackProps;
+            progressBarRoot?: StackProps;
+            progressBarSlotsActionArea?: StackProps;
+            progressBarSlotsContainer?: StackProps;
+            progressBarSlot?: BoxProps;
+            progressBarReadPages?: BoxProps;
+            progressBarCurrentPageSlot?: BoxProps;
+            progressBarPageTexts?: {
+                base?: TypographyProps;
+                current?: TypographyProps;
+                total?: TypographyProps;
+            };
         };
-    };
-    slots?: {
-        progressBarCurrentPage?: ReactNode;
-    };
-}) => {
-    const { isDragging, setIsDragging } = useReaderProgressBarContext();
-    const openPage = ReaderControls.useOpenPage();
-    const direction = ReaderService.useGetThemeDirection();
-
+        slots?: {
+            progressBarCurrentPage?: ReactNode;
+        };
+        openPage: ReturnType<typeof ReaderControls.useOpenPage>;
+        direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
+    }) => {
     const progressBarRef = useRef<HTMLDivElement | null>(null);
 
     const isHorizontalPosition = getProgressBarPositionInfo(progressBarPosition).isHorizontal;
@@ -212,3 +216,15 @@ export const ReaderProgressBar = ({
         </ReaderProgressBarContainer>
     );
 };
+
+export const ReaderProgressBar = withPropsFrom(
+    BaseReaderProgressBar,
+    [
+        useReaderProgressBarContext,
+        () => ({ openPage: ReaderControls.useOpenPage() }),
+        () => ({
+            direction: ReaderService.useGetThemeDirection(),
+        }),
+    ],
+    ['isDragging', 'setIsDragging', 'openPage', 'direction'],
+);

src/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx

@@ -16,9 +16,15 @@ import { ThemeMode } from '@/modules/theme/contexts/ThemeModeContext.tsx';
 import { createTheme } from '@/modules/theme/services/ThemeCreator.ts';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
-export const ReaderProgressBarDirectionWrapper = ({ children }: { children: ReactNode }) => {
-    const direction = ReaderService.useGetThemeDirection();
+const BaseReaderProgressBarDirectionWrapper = ({
+    children,
+    direction,
+}: {
+    children: ReactNode;
+    direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
+}) => {
     const [appTheme] = useLocalStorage<AppThemes>('appTheme', 'default');
     const [themeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
     const [pureBlackMode] = useLocalStorage<boolean>('pureBlackMode', false);
@@ -40,3 +46,9 @@ export const ReaderProgressBarDirectionWrapper = ({ children }: { children: Reac
         </CacheProvider>
     );
 };
+
+export const ReaderProgressBarDirectionWrapper = withPropsFrom(
+    BaseReaderProgressBarDirectionWrapper,
+    [() => ({ direction: ReaderService.useGetThemeDirection() })],
+    ['direction'],
+);

src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx

@@ -20,15 +20,22 @@ import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/R
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
 import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
-import { ProgressBarPosition, ReaderResumeMode } from '@/modules/reader/types/Reader.types.ts';
+import { ProgressBarPosition, ReaderResumeMode, ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
 import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
 import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
+import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.types.ts';
+import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 
-export const MobileReaderProgressBar = () => {
-    const { nextChapter, previousChapter } = useReaderStateChaptersContext();
-    const { isVisible } = useReaderOverlayContext();
-    const { setIsMaximized } = useReaderProgressBarContext();
+const BaseMobileReaderProgressBar = ({
+    previousChapter,
+    nextChapter,
+    isVisible,
+    setIsMaximized,
+}: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
+    Pick<TReaderOverlayContext, 'isVisible'> &
+    Pick<TReaderProgressBarContext, 'setIsMaximized'>) => {
     const pagesState = userReaderStatePagesContext();
     const { currentPageIndex, pages } = pagesState;
 
@@ -177,3 +184,9 @@ export const MobileReaderProgressBar = () => {
         </ReaderProgressBarDirectionWrapper>
     );
 };
+
+export const MobileReaderProgressBar = withPropsFrom(
+    BaseMobileReaderProgressBar,
+    [useReaderStateChaptersContext, useReaderOverlayContext, useReaderProgressBarContext],
+    ['previousChapter', 'nextChapter', 'isVisible', 'setIsMaximized'],
+);

src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx

@@ -9,26 +9,40 @@
 import { alpha, darken, lighten, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
-import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
-import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
-import { ProgressBarType } from '@/modules/reader/types/Reader.types.ts';
+import { IReaderSettings, ProgressBarType, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { getPage, getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
 import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
+import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
 
-export const StandardReaderProgressBar = () => {
+const BaseStandardReaderProgressBar = ({
+    readerNavBarWidth,
+    isMaximized,
+    setIsMaximized,
+    isDragging,
+    progressBarType,
+    progressBarSize,
+    progressBarPosition,
+    readerDirection,
+    scrollbarXSize,
+    scrollbarYSize,
+}: Pick<NavbarContextType, 'readerNavBarWidth'> &
+    Pick<TReaderProgressBarContext, 'isMaximized' | 'setIsMaximized' | 'isDragging'> &
+    Pick<IReaderSettings, 'progressBarType' | 'progressBarSize' | 'progressBarPosition'> &
+    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> & {
+        readerDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
+    }) => {
     const theme = useTheme();
     const pagesState = userReaderStatePagesContext();
     const { currentPageIndex, pages } = pagesState;
-    const { readerNavBarWidth } = useNavBarContext();
-    const { isMaximized, setIsMaximized, isDragging } = useReaderProgressBarContext();
-    const { progressBarType, progressBarSize, progressBarPosition } = ReaderService.useSettings();
-    const readerDirection = ReaderService.useGetThemeDirection();
-    const { scrollbarXSize, scrollbarYSize } = useReaderScrollbarContext();
 
     const currentPagesIndex = getPage(currentPageIndex, pages).pagesIndex;
 
@@ -255,3 +269,26 @@ export const StandardReaderProgressBar = () => {
         </ReaderProgressBarDirectionWrapper>
     );
 };
+
+export const StandardReaderProgressBar = withPropsFrom(
+    BaseStandardReaderProgressBar,
+    [
+        useNavBarContext,
+        useReaderProgressBarContext,
+        ReaderService.useSettingsWithoutDefaultFlag,
+        () => ({ readerDirection: ReaderService.useGetThemeDirection() }),
+        useReaderScrollbarContext,
+    ],
+    [
+        'readerNavBarWidth',
+        'isMaximized',
+        'setIsMaximized',
+        'isDragging',
+        'progressBarType',
+        'progressBarSize',
+        'progressBarPosition',
+        'readerDirection',
+        'scrollbarXSize',
+        'scrollbarYSize',
+    ],
+);