diff --git a/src/modules/reader/components/viewer/ReaderChapterViewer.tsx b/src/modules/reader/components/viewer/ReaderChapterViewer.tsx index 1eccf970..011621a8 100644 --- a/src/modules/reader/components/viewer/ReaderChapterViewer.tsx +++ b/src/modules/reader/components/viewer/ReaderChapterViewer.tsx @@ -81,6 +81,11 @@ const BaseReaderChapterViewer = ({ scrollIntoView, setReaderStateChapters, resumeMode, + customFilter, + shouldStretchPage, + scrollbarXSize, + scrollbarYSize, + readerNavBarWidth, }: Pick< ReaderStatePages, | 'currentPageIndex' @@ -400,6 +405,12 @@ const BaseReaderChapterViewer = ({ readingDirection={readingDirection} pageScaleMode={pageScaleMode} pageGap={pageGap} + customFilter={customFilter} + shouldStretchPage={shouldStretchPage} + readerWidth={readerWidth} + scrollbarXSize={scrollbarXSize} + scrollbarYSize={scrollbarYSize} + readerNavBarWidth={readerNavBarWidth} /> {((!isContinuousReadingModeActive && isCurrentChapter) || (isContinuousReadingModeActive && (isInitialChapter || isTrailingChapter))) && ( diff --git a/src/modules/reader/components/viewer/ReaderPage.tsx b/src/modules/reader/components/viewer/ReaderPage.tsx index e08c32a6..b1a6bbb1 100644 --- a/src/modules/reader/components/viewer/ReaderPage.tsx +++ b/src/modules/reader/components/viewer/ReaderPage.tsx @@ -8,7 +8,6 @@ import { ComponentProps, memo, useCallback } from 'react'; import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx'; -import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { IReaderSettings, ReaderCustomFilter, @@ -21,10 +20,7 @@ import { getReaderImageStyling, } from '@/modules/reader/utils/ReaderPager.utils.tsx'; import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts'; -import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx'; import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx'; -import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx'; -import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx'; import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts'; const getCustomFilterString = (customFilter: ReaderCustomFilter): string => @@ -171,17 +167,4 @@ const BaseReaderPage = ({ ); }; -export const ReaderPage = withPropsFrom( - memo(BaseReaderPage), - [ReaderService.useSettingsWithoutDefaultFlag, useReaderScrollbarContext, useNavBarContext], - [ - 'readingMode', - 'customFilter', - 'pageScaleMode', - 'shouldStretchPage', - 'readerWidth', - 'scrollbarXSize', - 'scrollbarYSize', - 'readerNavBarWidth', - ], -); +export const ReaderPage = memo(BaseReaderPage); diff --git a/src/modules/reader/components/viewer/ReaderViewer.tsx b/src/modules/reader/components/viewer/ReaderViewer.tsx index 85f15cad..e2427eb8 100644 --- a/src/modules/reader/components/viewer/ReaderViewer.tsx +++ b/src/modules/reader/components/viewer/ReaderViewer.tsx @@ -61,6 +61,8 @@ import { getReaderChapterViewResumeMode, } from '@/modules/reader/utils/Reader.utils.ts'; import { noOp } from '@/lib/HelperFunctions.ts'; +import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx'; +import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts'; const READING_MODE_TO_IN_VIEWPORT_TYPE: Record = { [ReadingMode.SINGLE_PAGE]: PageInViewportType.X, @@ -92,6 +94,9 @@ const BaseReaderViewer = forwardRef( shouldOffsetDoubleSpreads, imagePreLoadAmount, pageGap, + customFilter, + shouldStretchPage, + readerNavBarWidth, setScrollbarXSize, setScrollbarYSize, isVisible: isOverlayVisible, @@ -129,8 +134,11 @@ const BaseReaderViewer = forwardRef( | 'shouldOffsetDoubleSpreads' | 'imagePreLoadAmount' | 'pageGap' + | 'customFilter' + | 'shouldStretchPage' > & Pick & + Pick & Pick & Pick< ReaderStateChapters, @@ -329,6 +337,11 @@ const BaseReaderViewer = forwardRef( setTransitionPageMode={setTransitionPageMode} pageGap={pageGap} imagePreLoadAmount={imagePreLoadAmount} + customFilter={customFilter} + shouldStretchPage={shouldStretchPage} + scrollbarXSize={scrollbarXSize} + scrollbarYSize={scrollbarYSize} + readerNavBarWidth={readerNavBarWidth} /> ); })} @@ -347,6 +360,7 @@ export const ReaderViewer = withPropsFrom( () => ({ updateCurrentPageIndex: ReaderControls.useUpdateCurrentPageIndex() }), useReaderTapZoneContext, useReaderStateChaptersContext, + useNavBarContext, ], [ 'currentPageIndex', @@ -367,6 +381,9 @@ export const ReaderViewer = withPropsFrom( 'shouldOffsetDoubleSpreads', 'imagePreLoadAmount', 'pageGap', + 'customFilter', + 'shouldStretchPage', + 'readerNavBarWidth', 'transitionPageMode', 'setScrollbarXSize', 'setScrollbarYSize', diff --git a/src/modules/reader/components/viewer/pager/BasePager.tsx b/src/modules/reader/components/viewer/pager/BasePager.tsx index a43290fe..c91e7aa6 100644 --- a/src/modules/reader/components/viewer/pager/BasePager.tsx +++ b/src/modules/reader/components/viewer/pager/BasePager.tsx @@ -26,6 +26,13 @@ const BaseBasePager = ({ isCurrentChapter, isPreviousChapter, isNextChapter, + customFilter, + pageScaleMode, + shouldStretchPage, + readerWidth, + scrollbarXSize, + scrollbarYSize, + readerNavBarWidth, }: Omit & Pick & { createPage: ( @@ -34,6 +41,14 @@ const BaseBasePager = ({ shouldLoad: boolean, shouldDisplay: boolean, setRef: (pagesIndex: number, element: HTMLElement | null) => void, + readingMode: ReaderPagerProps['readingMode'], + customFilter: ReaderPagerProps['customFilter'], + pageScaleMode: ReaderPagerProps['pageScaleMode'], + shouldStretchPage: ReaderPagerProps['shouldStretchPage'], + readerWidth: ReaderPagerProps['readerWidth'], + scrollbarXSize: ReaderPagerProps['scrollbarXSize'], + scrollbarYSize: ReaderPagerProps['scrollbarYSize'], + readerNavBarWidth: ReaderPagerProps['readerNavBarWidth'], ) => ReactNode; slots?: { boxProps?: BoxProps }; }) => { @@ -93,6 +108,14 @@ const BaseBasePager = ({ pagesIndexesToRender.includes(pagesIndex), [ReaderTransitionPageMode.NONE, ReaderTransitionPageMode.BOTH].includes(transitionPageMode), setRef, + readingMode, + customFilter, + pageScaleMode, + shouldStretchPage, + readerWidth, + scrollbarXSize, + scrollbarYSize, + readerNavBarWidth, ), )} diff --git a/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx b/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx index e140087a..4da27be3 100644 --- a/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx @@ -58,7 +58,7 @@ const BaseReaderDoublePagedPager = ({ return ( { + createPage={(page, pagesIndex, shouldLoad, shouldDisplay, _setRef, ...baseProps) => { const { primary, secondary } = page; const currentSecondaryPageIndex = getNextIndexFromPage(currentPage); @@ -80,6 +80,7 @@ const BaseReaderDoublePagedPager = ({ shouldDisplay && isPrimaryPage && shouldLoad, currentPage.primary.index, totalPages, + ...baseProps, pageLoadStates[primary.index].error ? retryFailedPagesKeyPrefix : undefined, hasSecondaryPage ? getPagePosition('first', themeDirection, readingDirection) : undefined, hasSecondaryPage, @@ -96,6 +97,7 @@ const BaseReaderDoublePagedPager = ({ shouldDisplay && isSecondaryPage && shouldLoad, currentSecondaryPageIndex, totalPages, + ...baseProps, pageLoadStates[secondary.index].error ? retryFailedPagesKeyPrefix : undefined, getPagePosition('second', themeDirection, readingDirection), true, diff --git a/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx b/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx index 81e9a500..232b7e54 100644 --- a/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx @@ -29,7 +29,7 @@ const BaseReaderHorizontalPager = ({ return ( + createPage={(page, pagesIndex, shouldLoad, _, setRef, ...baseProps) => createReaderPage( page, pagesIndex, @@ -41,6 +41,7 @@ const BaseReaderHorizontalPager = ({ true, currentPageIndex, totalPages, + ...baseProps, pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined, undefined, undefined, diff --git a/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx b/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx index e7766765..537cfae7 100644 --- a/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx @@ -23,7 +23,7 @@ const BaseReaderPagedPager = ({ return ( + createPage={(page, pagesIndex, shouldLoad, shouldDisplay, _setRef, ...baseProps) => createReaderPage( page, pagesIndex, @@ -35,6 +35,7 @@ const BaseReaderPagedPager = ({ shouldDisplay && shouldLoad && currentPageIndex === page.primary.index, currentPageIndex, totalPages, + ...baseProps, pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined, ) } diff --git a/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx b/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx index bcc02e33..beca7ea6 100644 --- a/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx +++ b/src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx @@ -26,7 +26,7 @@ const BaseReaderVerticalPager = ({ return ( + createPage={(page, pagesIndex, shouldLoad, _, setRef, ...baseProps) => createReaderPage( page, pagesIndex, @@ -38,6 +38,7 @@ const BaseReaderVerticalPager = ({ true, currentPageIndex, totalPages, + ...baseProps, pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined, undefined, undefined, diff --git a/src/modules/reader/types/Reader.types.ts b/src/modules/reader/types/Reader.types.ts index 64da3d50..694b9316 100644 --- a/src/modules/reader/types/Reader.types.ts +++ b/src/modules/reader/types/Reader.types.ts @@ -13,6 +13,7 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts'; 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'; export enum ProgressBarType { HIDDEN, @@ -259,7 +260,19 @@ export interface ReaderPagerProps | 'pageLoadStates' | 'retryFailedPagesKeyPrefix' >, - Pick { + Pick< + IReaderSettings, + | 'readingMode' + | 'imagePreLoadAmount' + | 'readingDirection' + | 'pageScaleMode' + | 'pageGap' + | 'customFilter' + | 'shouldStretchPage' + | 'readerWidth' + >, + Pick, + 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/ReaderPager.utils.tsx b/src/modules/reader/utils/ReaderPager.utils.tsx index 65d83b39..ec6f2263 100644 --- a/src/modules/reader/utils/ReaderPager.utils.tsx +++ b/src/modules/reader/utils/ReaderPager.utils.tsx @@ -16,6 +16,7 @@ import { ReaderTransitionPageMode, ReadingDirection, ReadingMode, + TReaderScrollbarContext, } from '@/modules/reader/types/Reader.types.ts'; import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts'; import { @@ -33,6 +34,7 @@ import { DirectionOffset } from '@/Base.types.ts'; import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'; import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx'; import { coerceIn } from '@/lib/HelperFunctions.ts'; +import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts'; type CSSObject = ReturnType; @@ -292,6 +294,14 @@ export const createReaderPage = ( display: boolean, currentPageIndex: number, totalPages: number, + readingMode: IReaderSettings['readingMode'], + customFilter: IReaderSettings['customFilter'], + pageScaleMode: IReaderSettings['pageScaleMode'], + shouldStretchPage: IReaderSettings['shouldStretchPage'], + readerWidth: IReaderSettings['readerWidth'], + scrollbarXSize: TReaderScrollbarContext['scrollbarXSize'], + scrollbarYSize: TReaderScrollbarContext['scrollbarYSize'], + readerNavBarWidth: NavbarContextType['readerNavBarWidth'], retryKeyPrefix?: string, position?: 'left' | 'right', isDoublePage?: boolean, @@ -316,6 +326,14 @@ export const createReaderPage = ( retryKeyPrefix={retryKeyPrefix} marginTop={marginTop} isLoaded={isLoaded} + readingMode={readingMode} + customFilter={customFilter} + pageScaleMode={pageScaleMode} + shouldStretchPage={shouldStretchPage} + readerWidth={readerWidth} + scrollbarXSize={scrollbarXSize} + scrollbarYSize={scrollbarYSize} + readerNavBarWidth={readerNavBarWidth} /> );