Use HOC for reader context usage

2024-12-21 03:46:55 +01:00
parent 34f484a946
commit f5642af219
27 changed files with 997 additions and 459 deletions
--- a/src/modules/reader/components/viewer/pager/BasePager.tsx
+++ b/src/modules/reader/components/viewer/pager/BasePager.tsx
@@ -11,29 +11,36 @@ import Box, { BoxProps } from '@mui/material/Box';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { getImageWidthStyling, getPageIndexesToLoad } from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
-import { ReaderPagerProps, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
+import { IReaderSettings, ReaderPagerProps, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
 import { ReaderTransitionPage } from '@/modules/reader/components/viewer/ReaderTransitionPage.tsx';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';

-export const BasePager = ({
+const BaseBasePager = ({
    currentPageIndex,
    pages,
    transitionPageMode,
    imageRefs,
    createPage,
    slots,
-}: Omit<ReaderPagerProps, 'pageLoadStates' | 'retryFailedPagesKeyPrefix'> & {
-    createPage: (
-        page: ReaderStatePages['pages'][number],
-        pagesIndex: number,
-        shouldLoad: boolean,
-        shouldDisplay: boolean,
-        setRef: (element: HTMLElement | null) => void,
-    ) => ReactNode;
-    slots?: { boxProps?: BoxProps };
-}) => {
-    const { readingMode, pageScaleMode, shouldStretchPage, readerWidth, imagePreLoadAmount } =
-        ReaderService.useSettings();
-
+    readingMode,
+    pageScaleMode,
+    shouldStretchPage,
+    readerWidth,
+    imagePreLoadAmount,
+}: Omit<ReaderPagerProps, 'pageLoadStates' | 'retryFailedPagesKeyPrefix'> &
+    Pick<
+        IReaderSettings,
+        'readingMode' | 'pageScaleMode' | 'shouldStretchPage' | 'readerWidth' | 'imagePreLoadAmount'
+    > & {
+        createPage: (
+            page: ReaderStatePages['pages'][number],
+            pagesIndex: number,
+            shouldLoad: boolean,
+            shouldDisplay: boolean,
+            setRef: (element: HTMLElement | null) => void,
+        ) => ReactNode;
+        slots?: { boxProps?: BoxProps };
+    }) => {
    const previousCurrentPageIndex = useRef(-1);
    const pagesIndexesToRender = useMemo(
        () => getPageIndexesToLoad(currentPageIndex, pages, previousCurrentPageIndex.current, imagePreLoadAmount),
@@ -48,20 +55,14 @@ export const BasePager = ({
            {...slots?.boxProps}
            sx={[
                ...(Array.isArray(slots?.boxProps?.sx) ? (slots?.boxProps?.sx ?? []) : [slots?.boxProps?.sx]),
-                getImageWidthStyling(
-                    readingMode.value,
-                    shouldStretchPage.value,
-                    pageScaleMode.value,
-                    false,
-                    readerWidth.value,
-                ),
+                getImageWidthStyling(readingMode, shouldStretchPage, pageScaleMode, false, readerWidth),
            ]}
        >
            <ReaderTransitionPage
                type={ReaderTransitionPageMode.PREVIOUS}
                mode={transitionPageMode}
-                readingMode={readingMode.value}
-                pageScaleMode={pageScaleMode.value}
+                readingMode={readingMode}
+                pageScaleMode={pageScaleMode}
            />
            {pages.map((page, pagesIndex) =>
                createPage(
@@ -78,9 +79,15 @@ export const BasePager = ({
            <ReaderTransitionPage
                type={ReaderTransitionPageMode.NEXT}
                mode={transitionPageMode}
-                readingMode={readingMode.value}
-                pageScaleMode={pageScaleMode.value}
+                readingMode={readingMode}
+                pageScaleMode={pageScaleMode}
            />
        </Box>
    );
 };
+
+export const BasePager = withPropsFrom(
+    BaseBasePager,
+    [ReaderService.useSettingsWithoutDefaultFlag],
+    ['readingMode', 'pageScaleMode', 'shouldStretchPage', 'readerWidth', 'imagePreLoadAmount'],
+);
--- a/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx
+++ b/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx
@@ -10,10 +10,11 @@ import { Direction, useTheme } from '@mui/material/styles';
 import { Fragment, useMemo } from 'react';
 import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
-import { ReaderPagerProps, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
+import { IReaderSettings, ReaderPagerProps, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';

 const getPagePosition = (
    pageType: 'first' | 'second',
@@ -37,20 +38,20 @@ const getPagePosition = (
    return isLtrReadingDirection ? 'right' : 'left';
 };

-export const ReaderDoublePagedPager = ({
+const BaseReaderDoublePagedPager = ({
    onLoad,
    onError,
    pageLoadStates,
    retryFailedPagesKeyPrefix,
+    readingDirection,
    ...props
-}: ReaderPagerProps) => {
+}: ReaderPagerProps & Pick<IReaderSettings, 'readingDirection'>) => {
    const { currentPageIndex, pages, totalPages } = props;

-    const { readingDirection } = ReaderService.useSettings();
    const { direction: themeDirection } = useTheme();

    const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
-    const isLtrReadingDirection = readingDirection.value === ReadingDirection.LTR;
+    const isLtrReadingDirection = readingDirection === ReadingDirection.LTR;

    return (
        <BasePager
@@ -75,9 +76,7 @@ export const ReaderDoublePagedPager = ({
                            currentPage.primary.index,
                            totalPages,
                            pageLoadStates[primary.index].error ? retryFailedPagesKeyPrefix : undefined,
-                            hasSecondaryPage
-                                ? getPagePosition('first', themeDirection, readingDirection.value)
-                                : undefined,
+                            hasSecondaryPage ? getPagePosition('first', themeDirection, readingDirection) : undefined,
                            hasSecondaryPage,
                        )}
                        {hasSecondaryPage &&
@@ -90,7 +89,7 @@ export const ReaderDoublePagedPager = ({
                                currentSecondaryPageIndex,
                                totalPages,
                                pageLoadStates[secondary.index].error ? retryFailedPagesKeyPrefix : undefined,
-                                getPagePosition('second', themeDirection, readingDirection.value),
+                                getPagePosition('second', themeDirection, readingDirection),
                                true,
                            )}
                    </Fragment>
@@ -115,3 +114,9 @@ export const ReaderDoublePagedPager = ({
        />
    );
 };
+
+export const ReaderDoublePagedPager = withPropsFrom(
+    BaseReaderDoublePagedPager,
+    [ReaderService.useSettingsWithoutDefaultFlag],
+    ['readingDirection'],
+);
--- a/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx
+++ b/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx
@@ -10,22 +10,24 @@ import { useTheme } from '@mui/material/styles';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
-import { ReaderPagerProps, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
+import { IReaderSettings, ReaderPagerProps, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
 import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';

-export const ReaderHorizontalPager = ({
+const BaseReaderHorizontalPager = ({
    onLoad,
    onError,
    pageLoadStates,
    retryFailedPagesKeyPrefix,
+    pageGap,
+    readingDirection,
    ...props
-}: ReaderPagerProps) => {
+}: ReaderPagerProps & Pick<IReaderSettings, 'pageGap' | 'readingDirection'>) => {
    const { currentPageIndex, totalPages } = props;

-    const { pageGap, readingDirection } = ReaderService.useSettings();
    const { direction: themeDirection } = useTheme();

-    const isLtrReadingDirection = readingDirection.value === ReadingDirection.LTR;
+    const isLtrReadingDirection = readingDirection === ReadingDirection.LTR;

    return (
        <BasePager
@@ -53,7 +55,7 @@ export const ReaderHorizontalPager = ({
                        display: 'flex',
                        flexWrap: 'nowrap',
                        alignItems: 'center',
-                        gap: `${pageGap.value}px`,
+                        gap: `${pageGap}px`,
                        ...applyStyles(themeDirection === 'ltr', {
                            flexDirection: isLtrReadingDirection ? 'row' : 'row-reverse',
                            justifyContent: isLtrReadingDirection ? 'flex-start' : 'flex-end',
@@ -68,3 +70,9 @@ export const ReaderHorizontalPager = ({
        />
    );
 };
+
+export const ReaderHorizontalPager = withPropsFrom(
+    BaseReaderHorizontalPager,
+    [ReaderService.useSettingsWithoutDefaultFlag],
+    ['pageGap', 'readingDirection'],
+);
--- a/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx
+++ b/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx
@@ -7,22 +7,24 @@
 */

 import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx';
-import { ReaderPagerProps, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+import { IReaderSettings, ReaderPagerProps, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
 import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';

-export const ReaderVerticalPager = ({
+const BaseReaderVerticalPager = ({
    onLoad,
    onError,
    pageLoadStates,
    retryFailedPagesKeyPrefix,
+    readingMode,
+    pageGap,
    ...props
-}: ReaderPagerProps) => {
+}: ReaderPagerProps & Pick<IReaderSettings, 'pageGap' | 'readingMode'>) => {
    const { currentPageIndex, totalPages } = props;

-    const { readingMode, pageGap } = ReaderService.useSettings();
-    const isWebtoonMode = readingMode.value === ReadingMode.WEBTOON;
-    const actualPageGap = isWebtoonMode ? 0 : pageGap.value;
+    const isWebtoonMode = readingMode === ReadingMode.WEBTOON;
+    const actualPageGap = isWebtoonMode ? 0 : pageGap;

    return (
        <BasePager
@@ -46,3 +48,9 @@ export const ReaderVerticalPager = ({
        />
    );
 };
+
+export const ReaderVerticalPager = withPropsFrom(
+    BaseReaderVerticalPager,
+    [ReaderService.useSettingsWithoutDefaultFlag],
+    ['pageGap', 'readingMode'],
+);