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

Extract "ReaderProgressBarSlot" from "StandardReaderProgressBar"

Browse Source
This commit is contained in:
schroda
2024-12-21 16:01:42 +01:00
parent 7e9684b7d3
commit 294a6f45a4
2 changed files with 134 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/modules/reader/components/overlay/progress-bar/desktop/ReaderProgressBarSlotDesktop.tsx Normal file
View File

@@ -0,0 +1,116 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { alpha, darken, lighten, useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { memo } from 'react';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
export const ReaderProgressBarSlotDesktop = memo(
({
pageName,
pageUrl,
primaryPageLoadState,
secondaryPageLoadState,
isHorizontal,
isVertical,
progressBarPosition,
isCurrentPage,
isFirstPage,
isLastPage,
isLeadingPage,
isDragging,
}: Pick<IReaderSettings, 'progressBarPosition'> &
Pick<ReturnType<typeof getProgressBarPositionInfo>, 'isHorizontal' | 'isVertical'> & {
pageName: string;
pageUrl: string;
primaryPageLoadState: boolean;
secondaryPageLoadState?: boolean;
isCurrentPage: boolean;
isFirstPage: boolean;
isLastPage: boolean;
isLeadingPage: boolean;
isDragging: boolean;
}) => {
const theme = useTheme();
return (
<ReaderProgressBarSlot
key={pageUrl}
pageName={pageName}
progressBarPosition={progressBarPosition}
slotProps={{
box: {
sx: {
cursor: 'pointer',
backgroundColor: darken(theme.palette.background.paper, 0.2),
...applyStyles(isHorizontal, {
borderLeftWidth: 2,
borderLeftColor: 'background.paper',
borderLeftStyle: 'solid',
}),
...applyStyles(isVertical, {
borderTopWidth: 2,
borderTopColor: 'background.paper',
borderTopStyle: 'solid',
}),
...theme.applyStyles('dark', {
backgroundColor: lighten(theme.palette.background.paper, 0.1),
}),
...applyStyles(
primaryPageLoadState && (secondaryPageLoadState == null || secondaryPageLoadState),
{
backgroundColor: darken(theme.palette.background.paper, 0.35),
...theme.applyStyles('dark', {
backgroundColor: lighten(theme.palette.background.paper, 0.25),
}),
},
),
borderLeftWidth: isFirstPage ? 0 : undefined,
borderRightWidth: isLastPage ? 0 : undefined,
},
},
tooltip: {
slotProps: isCurrentPage
? {
tooltip: {
sx: {
backgroundColor: 'primary.main',
color: 'primary.contrastText',
},
},
}
: undefined,
},
}}
>
<Box
sx={{
width: '100%',
height: '100%',
...applyStyles(isLeadingPage, {
backgroundColor: alpha(theme.palette.primary.main, 0.5),
}),
...applyStyles(isCurrentPage, {
cursor: isDragging ? 'grabbing' : 'grab',
pointer: 'grabbing',
borderRadius: 2,
backgroundColor: 'primary.dark',
...theme.applyStyles('dark', {
backgroundColor: 'primary.light',
}),
}),
}}
/>
</ReaderProgressBarSlot>
);
},
);

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

@@ -6,11 +6,9 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. * file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/ */
import { alpha, darken, lighten, useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { memo } from 'react'; import { memo } 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 { 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';
@@ -23,6 +21,7 @@ import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx'; import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx'; import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx'; import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
import { ReaderProgressBarSlotDesktop } from '@/modules/reader/components/overlay/progress-bar/desktop/ReaderProgressBarSlotDesktop.tsx';
const BaseStandardReaderProgressBar = ({ const BaseStandardReaderProgressBar = ({
readerNavBarWidth, readerNavBarWidth,
@@ -63,77 +62,23 @@ const BaseStandardReaderProgressBar = ({
<ReaderProgressBar <ReaderProgressBar
{...pagesState} {...pagesState}
progressBarPosition={progressBarPosition} progressBarPosition={progressBarPosition}
createProgressBarSlot={({ name, primary, secondary }, pageLoadStates, pagesIndex) => ( createProgressBarSlot={(page, pageLoadStates, pagesIndex) => (
<ReaderProgressBarSlot <ReaderProgressBarSlotDesktop
key={primary.url} pageName={page.name}
pageName={name} pageUrl={page.primary.url}
primaryPageLoadState={pageLoadStates[page.primary.index].loaded}
secondaryPageLoadState={
page.secondary ? pageLoadStates[page.secondary.index].loaded : undefined
}
isHorizontal={isHorizontal}
isVertical={isVertical}
progressBarPosition={progressBarPosition} progressBarPosition={progressBarPosition}
slotProps={{ isCurrentPage={currentPagesIndex === pagesIndex}
box: { isFirstPage={pagesIndex === 0}
sx: { isLastPage={pagesIndex === pages.length - 1}
cursor: 'pointer', isLeadingPage={pagesIndex < currentPagesIndex}
backgroundColor: darken(theme.palette.background.paper, 0.2), isDragging={isDragging}
...applyStyles(isHorizontal, { />
borderLeftWidth: 2,
borderLeftColor: 'background.paper',
borderLeftStyle: 'solid',
}),
...applyStyles(isVertical, {
borderTopWidth: 2,
borderTopColor: 'background.paper',
borderTopStyle: 'solid',
}),
...theme.applyStyles('dark', {
backgroundColor: lighten(theme.palette.background.paper, 0.1),
}),
...applyStyles(
pageLoadStates[primary.index]?.loaded &&
(!secondary || pageLoadStates[secondary.index]?.loaded),
{
backgroundColor: darken(theme.palette.background.paper, 0.35),
...theme.applyStyles('dark', {
backgroundColor: lighten(theme.palette.background.paper, 0.25),
}),
},
),
borderLeftWidth: pagesIndex === 0 ? 0 : undefined,
borderRightWidth: pagesIndex === pages.length - 1 ? 0 : undefined,
},
},
tooltip: {
slotProps:
pagesIndex === currentPagesIndex
? {
tooltip: {
sx: {
backgroundColor: 'primary.main',
color: 'primary.contrastText',
},
},
}
: undefined,
},
}}
>
<Box
sx={{
width: '100%',
height: '100%',
...applyStyles(pagesIndex < currentPagesIndex, {
backgroundColor: alpha(theme.palette.primary.main, 0.5),
}),
...applyStyles(pagesIndex === currentPagesIndex, {
cursor: isDragging ? 'grabbing' : 'grab',
pointer: 'grabbing',
borderRadius: 2,
backgroundColor: 'primary.dark',
...theme.applyStyles('dark', {
backgroundColor: 'primary.light',
}),
}),
}}
/>
</ReaderProgressBarSlot>
)} )}
slotProps={{ slotProps={{
container: { container: {