diff --git a/src/modules/reader/components/viewer/ReaderChapterViewer.tsx b/src/modules/reader/components/viewer/ReaderChapterViewer.tsx index 64ffb62a..1eccf970 100644 --- a/src/modules/reader/components/viewer/ReaderChapterViewer.tsx +++ b/src/modules/reader/components/viewer/ReaderChapterViewer.tsx @@ -13,6 +13,7 @@ import { useTranslation } from 'react-i18next'; import Box from '@mui/material/Box'; import { IReaderSettings, + ReaderPagerProps, ReaderPageSpreadState, ReaderResumeMode, ReaderStateChapters, @@ -62,6 +63,8 @@ const BaseReaderChapterViewer = ({ pageScaleMode, shouldOffsetDoubleSpreads, readingDirection, + imagePreLoadAmount, + pageGap, chapterId, previousChapterId, nextChapterId, @@ -90,6 +93,7 @@ const BaseReaderChapterViewer = ({ | 'retryFailedPagesKeyPrefix' | 'setTransitionPageMode' > & + Omit & Pick< IReaderSettings, 'readingMode' | 'shouldOffsetDoubleSpreads' | 'readingDirection' | 'readerWidth' | 'pageScaleMode' @@ -391,6 +395,11 @@ const BaseReaderChapterViewer = ({ isCurrentChapter={isCurrentChapter} isPreviousChapter={isPreviousChapter} isNextChapter={isNextChapter} + readingMode={readingMode} + imagePreLoadAmount={imagePreLoadAmount} + readingDirection={readingDirection} + pageScaleMode={pageScaleMode} + pageGap={pageGap} /> {((!isContinuousReadingModeActive && isCurrentChapter) || (isContinuousReadingModeActive && (isInitialChapter || isTrailingChapter))) && ( diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx index fa315771..85f15cad 100644 --- a/src/modules/reader/components/viewer/ReaderViewer.tsx +++ b/src/modules/reader/components/viewer/ReaderViewer.tsx @@ -90,6 +90,8 @@ const BaseReaderViewer = forwardRef( readerWidth, pageScaleMode, shouldOffsetDoubleSpreads, + imagePreLoadAmount, + pageGap, setScrollbarXSize, setScrollbarYSize, isVisible: isOverlayVisible, @@ -120,7 +122,13 @@ const BaseReaderViewer = forwardRef( > & Pick< IReaderSettings, - 'readingMode' | 'readingDirection' | 'readerWidth' | 'pageScaleMode' | 'shouldOffsetDoubleSpreads' + | 'readingMode' + | 'readingDirection' + | 'readerWidth' + | 'pageScaleMode' + | 'shouldOffsetDoubleSpreads' + | 'imagePreLoadAmount' + | 'pageGap' > & Pick & Pick & @@ -319,6 +327,8 @@ const BaseReaderViewer = forwardRef( )} setReaderStateChapters={setReaderStateChapters} setTransitionPageMode={setTransitionPageMode} + pageGap={pageGap} + imagePreLoadAmount={imagePreLoadAmount} /> ); })} @@ -355,6 +365,8 @@ export const ReaderViewer = withPropsFrom( 'readerWidth', 'pageScaleMode', 'shouldOffsetDoubleSpreads', + 'imagePreLoadAmount', + 'pageGap', 'transitionPageMode', 'setScrollbarXSize', 'setScrollbarYSize', diff --git a/src/modules/reader/components/viewer/pager/BasePager.tsx b/src/modules/reader/components/viewer/pager/BasePager.tsx index 1ac436bb..a43290fe 100644 --- a/src/modules/reader/components/viewer/pager/BasePager.tsx +++ b/src/modules/reader/components/viewer/pager/BasePager.tsx @@ -8,11 +8,9 @@ import { memo, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'; import Box, { BoxProps } from '@mui/material/Box'; -import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { getPageIndexesToLoad, isATransitionPageVisible } from '@/modules/reader/utils/ReaderPager.utils.tsx'; import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts'; import { IReaderSettings, ReaderPagerProps, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts'; -import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx'; import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts'; import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx'; @@ -101,8 +99,4 @@ const BaseBasePager = ({ ); }; -export const BasePager = withPropsFrom( - memo(BaseBasePager), - [ReaderService.useSettingsWithoutDefaultFlag], - ['readingMode', 'imagePreLoadAmount'], -); +export const BasePager = memo(BaseBasePager); diff --git a/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx b/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx index bedb3e86..e140087a 100644 --- a/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx @@ -9,7 +9,6 @@ import { Direction, useTheme } from '@mui/material/styles'; import { Fragment, memo, useMemo } from 'react'; import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx'; -import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { IReaderSettings, ReaderPagerProps, @@ -19,7 +18,6 @@ import { 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', @@ -48,11 +46,9 @@ const BaseReaderDoublePagedPager = ({ onError, pageLoadStates, retryFailedPagesKeyPrefix, - readingDirection, - pageScaleMode, ...props }: ReaderPagerProps & Pick) => { - const { currentPageIndex, pages, totalPages } = props; + const { currentPageIndex, pages, totalPages, readingDirection, pageScaleMode } = props; const { direction: themeDirection } = useTheme(); @@ -133,8 +129,4 @@ const BaseReaderDoublePagedPager = ({ ); }; -export const ReaderDoublePagedPager = withPropsFrom( - memo(BaseReaderDoublePagedPager), - [ReaderService.useSettingsWithoutDefaultFlag], - ['readingDirection', 'pageScaleMode'], -); +export const ReaderDoublePagedPager = memo(BaseReaderDoublePagedPager); diff --git a/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx b/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx index 073d13e1..81e9a500 100644 --- a/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx @@ -8,23 +8,19 @@ import { useTheme } from '@mui/material/styles'; import { memo } from 'react'; -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 { 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'; const BaseReaderHorizontalPager = ({ onLoad, onError, pageLoadStates, retryFailedPagesKeyPrefix, - pageGap, - readingDirection, ...props }: ReaderPagerProps & Pick) => { - const { currentPageIndex, totalPages } = props; + const { currentPageIndex, totalPages, pageGap, readingDirection } = props; const { direction: themeDirection } = useTheme(); @@ -75,8 +71,4 @@ const BaseReaderHorizontalPager = ({ ); }; -export const ReaderHorizontalPager = withPropsFrom( - memo(BaseReaderHorizontalPager), - [ReaderService.useSettingsWithoutDefaultFlag], - ['pageGap', 'readingDirection'], -); +export const ReaderHorizontalPager = memo(BaseReaderHorizontalPager); diff --git a/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx b/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx index 9719e112..e7766765 100644 --- a/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx @@ -10,7 +10,6 @@ import { memo } from 'react'; import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx'; import { ReaderPagerProps } from '@/modules/reader/types/Reader.types.ts'; import { createReaderPage } from '@/modules/reader/utils/ReaderPager.utils.tsx'; -import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom'; const BaseReaderPagedPager = ({ onLoad, @@ -50,4 +49,4 @@ const BaseReaderPagedPager = ({ ); }; -export const ReaderPagedPager = withPropsFrom(memo(BaseReaderPagedPager), [], []); +export const ReaderPagedPager = memo(BaseReaderPagedPager); diff --git a/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx b/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx index 5aa11637..bcc02e33 100644 --- a/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx @@ -8,21 +8,17 @@ import { memo } from 'react'; import { BasePager } from '@/modules/reader/components/viewer/pager/BasePager.tsx'; -import { IReaderSettings, ReaderPagerProps, ReadingMode } from '@/modules/reader/types/Reader.types.ts'; +import { 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'; const BaseReaderVerticalPager = ({ onLoad, onError, pageLoadStates, retryFailedPagesKeyPrefix, - readingMode, - pageGap, ...props -}: ReaderPagerProps & Pick) => { - const { currentPageIndex, totalPages } = props; +}: ReaderPagerProps) => { + const { currentPageIndex, totalPages, readingMode, pageGap } = props; const isWebtoonMode = readingMode === ReadingMode.WEBTOON; const actualPageGap = isWebtoonMode ? 0 : pageGap; @@ -54,8 +50,4 @@ const BaseReaderVerticalPager = ({ ); }; -export const ReaderVerticalPager = withPropsFrom( - memo(BaseReaderVerticalPager), - [ReaderService.useSettingsWithoutDefaultFlag], - ['pageGap', 'readingMode'], -); +export const ReaderVerticalPager = memo(BaseReaderVerticalPager); diff --git a/src/modules/reader/types/Reader.types.ts b/src/modules/reader/types/Reader.types.ts index 68b1ac91..64da3d50 100644 --- a/src/modules/reader/types/Reader.types.ts +++ b/src/modules/reader/types/Reader.types.ts @@ -251,14 +251,15 @@ export enum ReaderHotkey { export interface ReaderPagerProps extends Pick< - ReaderStatePages, - | 'currentPageIndex' - | 'pages' - | 'totalPages' - | 'transitionPageMode' - | 'pageLoadStates' - | 'retryFailedPagesKeyPrefix' - > { + ReaderStatePages, + | 'currentPageIndex' + | 'pages' + | 'totalPages' + | 'transitionPageMode' + | 'pageLoadStates' + | 'retryFailedPagesKeyPrefix' + >, + Pick { onLoad?: (pagesIndex: number, url: string, isPrimary?: boolean) => void; onError?: (pageIndex: number, url: string) => void; imageRefs: MutableRefObject<(HTMLElement | null)[]>; diff --git a/src/modules/reader/utils/ReaderSettings.utils.tsx b/src/modules/reader/utils/ReaderSettings.utils.tsx index 42f355cd..324ce44a 100644 --- a/src/modules/reader/utils/ReaderSettings.utils.tsx +++ b/src/modules/reader/utils/ReaderSettings.utils.tsx @@ -6,7 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { ForwardRefExoticComponent, MemoExoticComponent, RefAttributes } from 'react'; +import { ComponentType, MemoExoticComponent } from 'react'; import { IReaderSettings, IReaderSettingsWithDefaultFlag, @@ -59,7 +59,7 @@ export const isAutoWebtoonMode = ( export const getPagerForReadingMode = ( readingMode: ReadingMode, -): MemoExoticComponent & RefAttributes>> => { +): MemoExoticComponent> => { switch (readingMode) { case ReadingMode.SINGLE_PAGE: return ReaderPagedPager;