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

Improve memoization of reader "progress bar slot" rendering

Browse Source
This commit is contained in:
schroda
2024-12-25 23:50:58 +01:00
parent 5220f8ca44
commit 500ee42662
4 changed files with 137 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,6 +71,8 @@ const BaseReaderProgressBar = ({
}) => { }) => {
const progressBarRef = useRef<HTMLDivElement | null>(null); const progressBarRef = useRef<HTMLDivElement | null>(null);
const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]);
const isHorizontalPosition = getProgressBarPositionInfo(progressBarPosition).isHorizontal; const isHorizontalPosition = getProgressBarPositionInfo(progressBarPosition).isHorizontal;
const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]); const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
const getOptionForDirection = useCallback( const getOptionForDirection = useCallback(
@@ -157,14 +159,19 @@ const BaseReaderProgressBar = ({
<ReaderProgressBarSlotsContainer {...slotProps?.progressBarSlotsContainer}> <ReaderProgressBarSlotsContainer {...slotProps?.progressBarSlotsContainer}>
{pages.map((page, pagesIndex) => ( {pages.map((page, pagesIndex) => (
<ReaderProgressBarSlotWrapper <ReaderProgressBarSlotWrapper
{...slotProps?.progressBarSlot}
key={page.primary.index} key={page.primary.index}
page={page} page={page}
pagesIndex={pagesIndex} pagesIndex={pagesIndex}
pageLoadStates={pageLoadStates} isCurrentPage={pagesIndex === currentPagesIndex}
isLeadingPage={pagesIndex < currentPagesIndex}
isTrailingPage={pagesIndex > currentPagesIndex}
totalPages={pages.length}
primaryPageLoadState={pageLoadStates[page.primary.index].loaded}
secondaryPageLoadState={
!!page.secondary && pageLoadStates[page.secondary.index].loaded
}
createProgressBarSlot={createProgressBarSlot} createProgressBarSlot={createProgressBarSlot}
{...slotProps?.progressBarSlot}
isFirstPage={pagesIndex === 0}
isLastPage={pagesIndex === pages.length - 1}
/> />
))} ))}
<ProgressBarHighlightReadPages <ProgressBarHighlightReadPages

91
src/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotWrapper.tsx
View File

@@ -7,42 +7,87 @@
*/ */
import Box, { BoxProps } from '@mui/material/Box'; import Box, { BoxProps } from '@mui/material/Box';
import { memo, ReactNode } from 'react'; import { memo, ReactNode, useMemo } from 'react';
import { styled } from '@mui/material/styles';
import { ReaderProgressBarProps } from '@/modules/reader/types/ReaderProgressBar.types.ts'; import { ReaderProgressBarProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';
type StyledWrapperProps = {
isFirstPage: boolean;
isLastPage: boolean;
};
const StyledWrapper = memo(
styled(Box, {
shouldForwardProp: shouldForwardProp<StyledWrapperProps>(['isFirstPage', 'isLastPage']),
})<BoxProps & StyledWrapperProps>(({ isFirstPage, isLastPage }) => ({
flexGrow: 1,
height: '100%',
cursor: 'pointer',
borderLeftWidth: isFirstPage ? 0 : undefined,
borderRightWidth: isLastPage ? 0 : undefined,
})),
);
export const ReaderProgressBarSlotWrapper = memo( export const ReaderProgressBarSlotWrapper = memo(
({ ({
page, page,
pagesIndex, pagesIndex,
pageLoadStates, isCurrentPage,
isFirstPage, isLeadingPage,
isLastPage, isTrailingPage,
totalPages,
primaryPageLoadState,
secondaryPageLoadState,
createProgressBarSlot, createProgressBarSlot,
...boxProps ...boxProps
}: { }: {
page: ReaderProgressBarProps['pages'][number]; page: ReaderProgressBarProps['pages'][number];
pagesIndex: number; pagesIndex: number;
pageLoadStates: ReaderProgressBarProps['pageLoadStates']; isCurrentPage: boolean;
isFirstPage: boolean; isLeadingPage: boolean;
isLastPage: boolean; isTrailingPage: boolean;
totalPages: number;
primaryPageLoadState: ReaderProgressBarProps['pageLoadStates'][number]['loaded'];
secondaryPageLoadState: ReaderProgressBarProps['pageLoadStates'][number]['loaded'];
createProgressBarSlot: ( createProgressBarSlot: (
page: ReaderProgressBarProps['pages'][number], page: ReaderProgressBarProps['pages'][number],
pageLoadStates: ReaderProgressBarProps['pageLoadStates'],
pagesIndex: number, pagesIndex: number,
primaryPageLoadState: ReaderProgressBarProps['pageLoadStates'][number]['loaded'],
secondaryPageLoadState: ReaderProgressBarProps['pageLoadStates'][number]['loaded'],
isCurrentPage: boolean,
isLeadingPage: boolean,
isTrailingPage: boolean,
totalPages: number,
) => ReactNode; ) => ReactNode;
} & BoxProps) => ( } & BoxProps) => {
<Box const slot = useMemo(
{...boxProps} () =>
sx={{ createProgressBarSlot(
flexGrow: 1, page,
height: '100%', pagesIndex,
cursor: 'pointer', primaryPageLoadState,
...boxProps?.sx, secondaryPageLoadState,
borderLeftWidth: isFirstPage ? 0 : undefined, isCurrentPage,
borderRightWidth: isLastPage ? 0 : undefined, isLeadingPage,
}} isTrailingPage,
> totalPages,
{createProgressBarSlot(page, pageLoadStates, pagesIndex)} ),
</Box> [
), page,
pagesIndex,
primaryPageLoadState,
secondaryPageLoadState,
isCurrentPage,
isLeadingPage,
isTrailingPage,
totalPages,
],
);
return (
<StyledWrapper {...boxProps} isFirstPage={pagesIndex === 0} isLastPage={pagesIndex === totalPages - 1}>
{slot}
</StyledWrapper>
);
},
); );

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

@@ -12,13 +12,13 @@ import SkipNextIcon from '@mui/icons-material/SkipNext';
import Stack from '@mui/material/Stack'; import Stack from '@mui/material/Stack';
import { alpha } from '@mui/material/styles'; import { alpha } from '@mui/material/styles';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import { memo, useLayoutEffect } from 'react'; import { memo, useCallback, useLayoutEffect } from 'react';
import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx'; import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx'; import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx'; import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx'; import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx'; import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'; import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
import { ProgressBarPosition, ReaderResumeMode, ReaderStateChapters } 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 { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
@@ -75,39 +75,42 @@ const BaseMobileReaderProgressBar = ({
<ReaderProgressBar <ReaderProgressBar
progressBarPosition={ProgressBarPosition.BOTTOM} progressBarPosition={ProgressBarPosition.BOTTOM}
{...pagesState} {...pagesState}
createProgressBarSlot={(page) => ( createProgressBarSlot={useCallback(
<ReaderProgressBarSlot (page, pagesIndex, _, __, ___, ____, isTrailingPage) => (
pageName={page.name} <ReaderProgressBarSlot
progressBarPosition={ProgressBarPosition.BOTTOM} pageName={page.name}
slotProps={{ progressBarPosition={ProgressBarPosition.BOTTOM}
box: { slotProps={{
sx: { box: {
display: 'flex', sx: {
alignItems: 'center', display: 'flex',
justifyContent: 'end', alignItems: 'center',
position: 'relative', justifyContent: 'end',
backgroundColor: 'background.default', position: 'relative',
backgroundColor: 'background.default',
},
}, },
},
}}
>
<Box
sx={{
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
right: '2px',
width: '2px',
height: '2px',
borderRadius: 100,
backgroundColor: 'background.paper',
...applyStyles(getNextIndexFromPage(page) > currentPageIndex, {
backgroundColor: 'primary.main',
}),
zIndex: 1,
}} }}
/> >
</ReaderProgressBarSlot> <Box
sx={{
position: 'absolute',
top: '50%',
transform: 'translateY(-50%)',
right: '2px',
width: '2px',
height: '2px',
borderRadius: 100,
backgroundColor: 'background.paper',
...applyStyles(isTrailingPage, {
backgroundColor: 'primary.main',
}),
zIndex: 1,
}}
/>
</ReaderProgressBarSlot>
),
[],
)} )}
slotProps={{ slotProps={{
container: { container: {

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

@@ -7,13 +7,13 @@
*/ */
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import { memo } from 'react'; import { memo, useCallback } from 'react';
import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx'; import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx'; import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { IReaderSettings, ProgressBarType, TReaderScrollbarContext } 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 { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
import { getPage, getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx'; import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx'; import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts'; import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts'; import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
@@ -42,9 +42,7 @@ const BaseStandardReaderProgressBar = ({
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const pagesState = userReaderStatePagesContext(); const pagesState = userReaderStatePagesContext();
const { currentPageIndex, pages, totalPages } = pagesState; const { totalPages } = pagesState;
const currentPagesIndex = getPage(currentPageIndex, pages).pagesIndex;
const { isBottom, isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(progressBarPosition); const { isBottom, isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(progressBarPosition);
@@ -59,30 +57,34 @@ const BaseStandardReaderProgressBar = ({
<ReaderProgressBar <ReaderProgressBar
{...pagesState} {...pagesState}
progressBarPosition={progressBarPosition} progressBarPosition={progressBarPosition}
createProgressBarSlot={(page, pageLoadStates, pagesIndex) => { createProgressBarSlot={useCallback(
if (isHidden && isMinimized) { (
return null; page,
} pagesIndex,
primaryPageLoadState,
return ( secondaryPageLoadState,
isCurrentPage,
isLeadingPage,
_,
totalPages_,
) => (
<ReaderProgressBarSlotDesktop <ReaderProgressBarSlotDesktop
pageName={page.name} pageName={page.name}
pageUrl={page.primary.url} pageUrl={page.primary.url}
primaryPageLoadState={pageLoadStates[page.primary.index].loaded} primaryPageLoadState={primaryPageLoadState}
secondaryPageLoadState={ secondaryPageLoadState={secondaryPageLoadState}
page.secondary ? pageLoadStates[page.secondary.index].loaded : undefined
}
isHorizontal={isHorizontal} isHorizontal={isHorizontal}
isVertical={isVertical} isVertical={isVertical}
progressBarPosition={progressBarPosition} progressBarPosition={progressBarPosition}
isCurrentPage={currentPagesIndex === pagesIndex} isCurrentPage={isCurrentPage}
isFirstPage={pagesIndex === 0} isFirstPage={pagesIndex === 0}
isLastPage={pagesIndex === pages.length - 1} isLastPage={pagesIndex === totalPages_ - 1}
isLeadingPage={pagesIndex < currentPagesIndex} isLeadingPage={isLeadingPage}
isDragging={isDragging} isDragging={isDragging}
/> />
); ),
}} [isHorizontal, isVertical, isDragging, progressBarPosition],
)}
slotProps={{ slotProps={{
container: { container: {
sx: { sx: {