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

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 { alpha } from '@mui/material/styles';
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 { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
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 { ProgressBarPosition, ReaderResumeMode, ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
@@ -75,39 +75,42 @@ const BaseMobileReaderProgressBar = ({
<ReaderProgressBar
progressBarPosition={ProgressBarPosition.BOTTOM}
{...pagesState}
createProgressBarSlot={(page) => (
<ReaderProgressBarSlot
pageName={page.name}
progressBarPosition={ProgressBarPosition.BOTTOM}
slotProps={{
box: {
sx: {
display: 'flex',
alignItems: 'center',
justifyContent: 'end',
position: 'relative',
backgroundColor: 'background.default',
createProgressBarSlot={useCallback(
(page, pagesIndex, _, __, ___, ____, isTrailingPage) => (
<ReaderProgressBarSlot
pageName={page.name}
progressBarPosition={ProgressBarPosition.BOTTOM}
slotProps={{
box: {
sx: {
display: 'flex',
alignItems: 'center',
justifyContent: 'end',
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={{
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 { memo } from 'react';
import { memo, useCallback } from 'react';
import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { IReaderSettings, ProgressBarType, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.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 { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
@@ -42,9 +42,7 @@ const BaseStandardReaderProgressBar = ({
}) => {
const theme = useTheme();
const pagesState = userReaderStatePagesContext();
const { currentPageIndex, pages, totalPages } = pagesState;
const currentPagesIndex = getPage(currentPageIndex, pages).pagesIndex;
const { totalPages } = pagesState;
const { isBottom, isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(progressBarPosition);
@@ -59,30 +57,34 @@ const BaseStandardReaderProgressBar = ({
<ReaderProgressBar
{...pagesState}
progressBarPosition={progressBarPosition}
createProgressBarSlot={(page, pageLoadStates, pagesIndex) => {
if (isHidden && isMinimized) {
return null;
}
return (
createProgressBarSlot={useCallback(
(
page,
pagesIndex,
primaryPageLoadState,
secondaryPageLoadState,
isCurrentPage,
isLeadingPage,
_,
totalPages_,
) => (
<ReaderProgressBarSlotDesktop
pageName={page.name}
pageUrl={page.primary.url}
primaryPageLoadState={pageLoadStates[page.primary.index].loaded}
secondaryPageLoadState={
page.secondary ? pageLoadStates[page.secondary.index].loaded : undefined
}
primaryPageLoadState={primaryPageLoadState}
secondaryPageLoadState={secondaryPageLoadState}
isHorizontal={isHorizontal}
isVertical={isVertical}
progressBarPosition={progressBarPosition}
isCurrentPage={currentPagesIndex === pagesIndex}
isCurrentPage={isCurrentPage}
isFirstPage={pagesIndex === 0}
isLastPage={pagesIndex === pages.length - 1}
isLeadingPage={pagesIndex < currentPagesIndex}
isLastPage={pagesIndex === totalPages_ - 1}
isLeadingPage={isLeadingPage}
isDragging={isDragging}
/>
);
}}
),
[isHorizontal, isVertical, isDragging, progressBarPosition],
)}
slotProps={{
container: {
sx: {