ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove context usage from ReaderChapterViewer

Browse Source 
In case many chapters are rendered, even just the HOC wrapper component re-render due to the context change increases the render time.

Thus, getting rid of these HOC wrapper re-renders by moving the context usage up to the ReaderViewer decreases the render time.
This commit is contained in:
schroda
2025-02-03 15:10:13 +01:00
parent 4a9d2903b8
commit b01b23b069
9 changed files with 43 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/modules/reader/components/viewer/ReaderChapterViewer.tsx
View File

@@ -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<ReaderPagerProps, 'pages' | 'totalPages' | 'pageLoadStates'> &
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))) && (

14
src/modules/reader/components/viewer/ReaderViewer.tsx
View File

@@ -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<TReaderScrollbarContext, 'setScrollbarXSize' | 'setScrollbarYSize'> &
Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
@@ -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',

8
src/modules/reader/components/viewer/pager/BasePager.tsx
View File

@@ -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);

12
src/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx
View File

@@ -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<IReaderSettings, 'readingDirection' | 'pageScaleMode'>) => {
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);

12
src/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx
View File

@@ -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<IReaderSettings, 'pageGap' | 'readingDirection'>) => {
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);

3
src/modules/reader/components/viewer/pager/ReaderPagedPager.tsx
View File

@@ -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);

16
src/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx
View File

@@ -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<IReaderSettings, 'pageGap' | 'readingMode'>) => {
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);

17
src/modules/reader/types/Reader.types.ts
View File

@@ -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<IReaderSettings, 'readingMode' | 'imagePreLoadAmount' | 'readingDirection' | 'pageScaleMode' | 'pageGap'> {
onLoad?: (pagesIndex: number, url: string, isPrimary?: boolean) => void;
onError?: (pageIndex: number, url: string) => void;
imageRefs: MutableRefObject<(HTMLElement | null)[]>;

4
src/modules/reader/utils/ReaderSettings.utils.tsx
View File

@@ -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<ForwardRefExoticComponent<Omit<ReaderPagerProps, never> & RefAttributes<HTMLElement>>> => {
): MemoExoticComponent<ComponentType<ReaderPagerProps>> => {
switch (readingMode) {
case ReadingMode.SINGLE_PAGE:
return ReaderPagedPager;