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

Improve memoization of "MobileReaderProgressBar"

Browse Source
This commit is contained in:
schroda
2024-12-26 01:41:36 +01:00
parent 635f294184
commit a2ac2971f6
4 changed files with 125 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
View File

@@ -49,7 +49,7 @@ const BaseReaderBottomBarMobile = ({
return (
<>
<Slide direction="up" in={isVisible} mountOnEnter unmountOnExit>
<Slide direction="up" in={isVisible}>
<Stack
sx={{
position: 'fixed',

31
src/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx
View File

@@ -8,25 +8,22 @@
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import { ReactNode } from 'react';
import { memo, ReactNode } from 'react';
import { ReaderProgressBarSlotProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { READER_PROGRESS_BAR_POSITION_TO_PLACEMENT } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
export const ReaderProgressBarSlot = ({
pageName,
progressBarPosition,
slotProps,
children,
}: ReaderProgressBarSlotProps & { children?: ReactNode }) => (
<Tooltip
{...slotProps?.tooltip}
key={pageName}
title={pageName}
placement={READER_PROGRESS_BAR_POSITION_TO_PLACEMENT[progressBarPosition]}
>
<Box {...slotProps?.box} sx={{ width: '100%', height: '100%', ...slotProps?.box?.sx }}>
{children}
</Box>
</Tooltip>
export const ReaderProgressBarSlot = memo(
({ pageName, progressBarPosition, slotProps, children }: ReaderProgressBarSlotProps & { children?: ReactNode }) => (
<Tooltip
{...slotProps?.tooltip}
key={pageName}
title={pageName}
placement={READER_PROGRESS_BAR_POSITION_TO_PLACEMENT[progressBarPosition]}
>
<Box {...slotProps?.box} sx={{ width: '100%', height: '100%', ...slotProps?.box?.sx }}>
{children}
</Box>
</Tooltip>
),
);

75
src/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx
View File

@@ -7,47 +7,46 @@
*/
import Box from '@mui/material/Box';
import { ComponentProps, memo } from 'react';
import { ProgressBarPosition } from '@/modules/reader/types/Reader.types.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot';
export const ReaderProgressBarSlotMobile = ({
pageName,
isTrailingPage,
}: {
pageName: string;
isTrailingPage: boolean;
}) => (
<ReaderProgressBarSlot
pageName={pageName}
progressBarPosition={ProgressBarPosition.BOTTOM}
slotProps={{
box: {
sx: {
display: 'flex',
alignItems: 'center',
justifyContent: 'end',
position: 'relative',
backgroundColor: 'background.default',
},
},
const SLOT_SX_PROP: NonNullable<NonNullable<ComponentProps<typeof ReaderProgressBarSlot>['slotProps']>['box']>['sx'] = {
display: 'flex',
alignItems: 'center',
justifyContent: 'end',
position: 'relative',
backgroundColor: 'background.default',
};
const ProgressBarPagePoint = memo(({ isTrailingPage }: { isTrailingPage: boolean }) => (
<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,
}}
>
<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>
/>
));
export const ReaderProgressBarSlotMobile = memo(
({ pageName, isTrailingPage }: { pageName: string; isTrailingPage: boolean }) => (
<ReaderProgressBarSlot
pageName={pageName}
progressBarPosition={ProgressBarPosition.BOTTOM}
slotProps={{ box: { sx: SLOT_SX_PROP } }}
>
<ProgressBarPagePoint isTrailingPage={isTrailingPage} />
</ReaderProgressBarSlot>
),
);

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

@@ -28,6 +28,71 @@ import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.type
import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { ReaderProgressBarSlotMobile } from '@/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx';
const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotProps'] = {
container: {
sx: {
flexGrow: 1,
position: 'relative',
display: 'flex',
justifyItems: 'center',
alignItems: 'stretch',
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
borderRadius: 100,
boxShadow: 2,
},
},
progressBarRoot: {
sx: {
flexGrow: 1,
alignItems: 'stretch',
gap: 0,
},
},
progressBarSlotsActionArea: {
sx: {
height: '100%',
alignItems: 'center',
py: 2,
cursor: 'pointer',
},
},
progressBarSlotsContainer: {
sx: {
borderRadius: 100,
},
},
progressBarSlot: {
sx: {
height: '20px',
},
},
progressBarCurrentPageSlot: {
sx: {
display: 'flex',
justifyContent: 'end',
alignItems: 'center',
zIndex: 1,
pointer: 'default',
},
},
progressBarPageTexts: {
base: { px: 1 },
},
};
const PROGRESS_BAR_SLOTS: ComponentProps<typeof ReaderProgressBar>['slots'] = {
progressBarCurrentPage: (
<Box
sx={{
minWidth: '5px',
height: '75%',
backgroundColor: 'primary.main',
borderRadius: 100,
}}
/>
),
};
const BaseMobileReaderProgressBar = ({
previousChapter,
nextChapter,
@@ -44,23 +109,12 @@ const BaseMobileReaderProgressBar = ({
const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
const createProgressBarSlot: ComponentProps<typeof ReaderProgressBar>['createProgressBarSlot'] = useCallback(
(page, _1, _2, _3, _4, _5, isTrailingPage) => (
<ReaderProgressBarSlotMobile pageName={page.name} isTrailingPage={isTrailingPage} />
),
[],
);
useLayoutEffect(() => {
setIsMaximized(isVisible);
return () => setIsMaximized(false);
}, [isVisible]);
if (!isVisible) {
return null;
}
return (
<ReaderProgressBarDirectionWrapper>
<Stack
@@ -81,47 +135,14 @@ const BaseMobileReaderProgressBar = ({
<ReaderProgressBar
progressBarPosition={ProgressBarPosition.BOTTOM}
{...pagesState}
createProgressBarSlot={createProgressBarSlot}
createProgressBarSlot={useCallback(
(page, _1, _2, _3, _4, _5, isTrailingPage) => (
<ReaderProgressBarSlotMobile pageName={page.name} isTrailingPage={isTrailingPage} />
),
[],
)}
slotProps={{
container: {
sx: {
flexGrow: 1,
position: 'relative',
display: 'flex',
justifyItems: 'center',
alignItems: 'stretch',
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
borderRadius: 100,
boxShadow: 2,
},
},
progressBarRoot: {
sx: {
flexGrow: 1,
alignItems: 'stretch',
gap: 0,
},
},
progressBarSlotsActionArea: {
sx: {
height: '100%',
alignItems: 'center',
py: 2,
cursor: 'pointer',
},
},
progressBarSlotsContainer: {
sx: {
borderRadius: 100,
},
},
progressBarSlot: {
sx: {
height: '20px',
},
},
...PROGRESS_BAR_SLOT_PROPS,
progressBarReadPages: {
sx: {
height: '20px',
@@ -130,31 +151,8 @@ const BaseMobileReaderProgressBar = ({
width: `calc(${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / pages.length) * 100}% + 100% / ${pages.length})`,
},
},
progressBarCurrentPageSlot: {
sx: {
display: 'flex',
justifyContent: 'end',
alignItems: 'center',
zIndex: 1,
pointer: 'default',
},
},
progressBarPageTexts: {
base: { px: 1 },
},
}}
slots={{
progressBarCurrentPage: (
<Box
sx={{
minWidth: '5px',
height: '75%',
backgroundColor: 'primary.main',
borderRadius: 100,
}}
/>
),
}}
slots={PROGRESS_BAR_SLOTS}
/>
<IconButton
onClick={openNextChapter}