Reader progress bars
This commit is contained in:
schroda
@@ -0,0 +1,39 @@
|
||||
/*
|
||||
* 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 Box from '@mui/material/Box';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';
|
||||
import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
|
||||
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
|
||||
import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
|
||||
|
||||
type ProgressBarHighlightReadPagesProps = Pick<IReaderSettings, 'progressBarPosition'> & {
|
||||
currentPagesIndex: number;
|
||||
pagesLength: number;
|
||||
};
|
||||
export const ProgressBarHighlightReadPages = styled(Box, {
|
||||
shouldForwardProp: shouldForwardProp<ProgressBarHighlightReadPagesProps>([
|
||||
'currentPagesIndex',
|
||||
'pagesLength',
|
||||
'progressBarPosition',
|
||||
]),
|
||||
})<ProgressBarHighlightReadPagesProps>(({ currentPagesIndex, pagesLength, progressBarPosition }) => ({
|
||||
position: 'absolute',
|
||||
pointerEvents: 'none',
|
||||
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, {
|
||||
left: 0,
|
||||
width: `${((currentPagesIndex + 1) / pagesLength) * 100}%`,
|
||||
height: '100%',
|
||||
}),
|
||||
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
|
||||
top: 0,
|
||||
width: '100%',
|
||||
height: `${((currentPagesIndex + 1) / pagesLength) * 100}%`,
|
||||
}),
|
||||
}));
|
||||
@@ -0,0 +1,205 @@
|
||||
/*
|
||||
* 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 Box, { BoxProps } from '@mui/material/Box';
|
||||
import { ReactNode, useCallback, useMemo, useRef } from 'react';
|
||||
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
||||
import { TypographyProps } from '@mui/material/Typography';
|
||||
import { StackProps } from '@mui/material/Stack';
|
||||
import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
|
||||
import { ReaderProgressBarProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
|
||||
import { ReaderProgressBarPageNumber } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarPageNumber.tsx';
|
||||
import { ReaderProgressBarContainer } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarContainer.tsx';
|
||||
import { ReaderProgressBarRoot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarRoot.tsx';
|
||||
import { ReaderProgressBarSlotsContainer } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotsContainer.tsx';
|
||||
import { ProgressBarHighlightReadPages } from '@/modules/reader/components/overlay/progress-bar/ProgressBarHighlightReadPages.tsx';
|
||||
import { ReaderProgressBarCurrentPageSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx';
|
||||
import {
|
||||
getNextPageIndex,
|
||||
getPage,
|
||||
getPageForMousePos,
|
||||
getProgressBarPositionInfo,
|
||||
useHandleProgressDragging,
|
||||
} from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
|
||||
import { getOptionForDirection as getOptionForDirectionImpl } from '@/theme.tsx';
|
||||
import { ReaderProgressBarSlotsActionArea } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotsActionArea.tsx';
|
||||
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
|
||||
|
||||
export const ReaderProgressBar = ({
|
||||
totalPages,
|
||||
pages,
|
||||
pageLoadStates,
|
||||
currentPageIndex,
|
||||
setCurrentPageIndex,
|
||||
slotProps,
|
||||
slots,
|
||||
createProgressBarSlot,
|
||||
progressBarPosition,
|
||||
}: ReaderProgressBarProps & {
|
||||
createProgressBarSlot: (
|
||||
page: ReaderProgressBarProps['pages'][number],
|
||||
pageLoadStates: ReaderProgressBarProps['pageLoadStates'],
|
||||
pagesIndex: number,
|
||||
) => ReactNode;
|
||||
slotProps?: {
|
||||
container?: StackProps;
|
||||
progressBarRoot?: StackProps;
|
||||
progressBarSlotsActionArea?: StackProps;
|
||||
progressBarSlotsContainer?: StackProps;
|
||||
progressBarSlot?: BoxProps;
|
||||
progressBarReadPages?: BoxProps;
|
||||
progressBarCurrentPageSlot?: BoxProps;
|
||||
progressBarPageTexts?: {
|
||||
base?: TypographyProps;
|
||||
current?: TypographyProps;
|
||||
total?: TypographyProps;
|
||||
};
|
||||
};
|
||||
slots?: {
|
||||
progressBarCurrentPage?: ReactNode;
|
||||
};
|
||||
}) => {
|
||||
const { isDragging, setIsDragging } = useReaderProgressBarContext();
|
||||
|
||||
const progressBarRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const isHorizontalPosition = getProgressBarPositionInfo(progressBarPosition).isHorizontal;
|
||||
const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
|
||||
const direction = ReaderService.useGetThemeDirection();
|
||||
const getOptionForDirection = useCallback(
|
||||
<T,>(...args: Parameters<typeof getOptionForDirectionImpl<T>>) =>
|
||||
getOptionForDirectionImpl(args[0], args[1], direction),
|
||||
[direction],
|
||||
);
|
||||
|
||||
useHandleProgressDragging(
|
||||
progressBarRef,
|
||||
isDragging,
|
||||
currentPage,
|
||||
setCurrentPageIndex,
|
||||
pages,
|
||||
progressBarPosition,
|
||||
getOptionForDirection,
|
||||
);
|
||||
|
||||
return (
|
||||
<ReaderProgressBarContainer {...slotProps?.container} progressBarPosition={progressBarPosition}>
|
||||
<ReaderProgressBarRoot {...slotProps?.progressBarRoot}>
|
||||
<ReaderProgressBarPageNumber
|
||||
{...slotProps?.progressBarPageTexts?.base}
|
||||
{...slotProps?.progressBarPageTexts?.current}
|
||||
sx={[
|
||||
...(Array.isArray(slotProps?.progressBarPageTexts?.base?.sx)
|
||||
? (slotProps?.progressBarPageTexts?.base?.sx ?? [])
|
||||
: [slotProps?.progressBarPageTexts?.base?.sx]),
|
||||
...(Array.isArray(slotProps?.progressBarPageTexts?.current?.sx)
|
||||
? (slotProps?.progressBarPageTexts?.current?.sx ?? [])
|
||||
: [slotProps?.progressBarPageTexts?.current?.sx]),
|
||||
]}
|
||||
onClick={() => setCurrentPageIndex(getNextPageIndex('previous', currentPage.pagesIndex, pages))}
|
||||
>
|
||||
{currentPage.name}
|
||||
</ReaderProgressBarPageNumber>
|
||||
<ClickAwayListener onClickAway={() => setIsDragging(false)}>
|
||||
<ReaderProgressBarSlotsActionArea
|
||||
{...slotProps?.progressBarSlotsActionArea}
|
||||
ref={progressBarRef}
|
||||
onTouchEnd={() => setIsDragging(false)}
|
||||
onTouchStart={(event) => {
|
||||
if (!progressBarRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentPageIndex(
|
||||
getPageForMousePos(
|
||||
event.touches[0],
|
||||
progressBarRef.current.getBoundingClientRect(),
|
||||
pages,
|
||||
isHorizontalPosition,
|
||||
getOptionForDirection,
|
||||
).primary.index,
|
||||
);
|
||||
setIsDragging(true);
|
||||
}}
|
||||
onMouseUp={() => setIsDragging(false)}
|
||||
onMouseDown={(event) => {
|
||||
if (!progressBarRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentPageIndex(
|
||||
getPageForMousePos(
|
||||
event,
|
||||
progressBarRef.current.getBoundingClientRect(),
|
||||
pages,
|
||||
isHorizontalPosition,
|
||||
getOptionForDirection,
|
||||
).primary.index,
|
||||
);
|
||||
setIsDragging(true);
|
||||
}}
|
||||
>
|
||||
<ReaderProgressBarSlotsContainer {...slotProps?.progressBarSlotsContainer}>
|
||||
{pages.map((page, pagesIndex) => (
|
||||
<Box
|
||||
key={page.primary.index}
|
||||
{...slotProps?.progressBarSlot}
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
height: '100%',
|
||||
cursor: 'pointer',
|
||||
...slotProps?.progressBarSlot?.sx,
|
||||
borderLeftWidth: pagesIndex === 0 ? 0 : undefined,
|
||||
borderRightWidth: pagesIndex === pages.length - 1 ? 0 : undefined,
|
||||
}}
|
||||
>
|
||||
{createProgressBarSlot(page, pageLoadStates, pagesIndex)}
|
||||
</Box>
|
||||
))}
|
||||
<ProgressBarHighlightReadPages
|
||||
{...slotProps?.progressBarReadPages}
|
||||
currentPagesIndex={currentPage.pagesIndex}
|
||||
pagesLength={pages.length}
|
||||
progressBarPosition={progressBarPosition}
|
||||
/>
|
||||
</ReaderProgressBarSlotsContainer>
|
||||
<ReaderProgressBarCurrentPageSlot
|
||||
boxProps={slotProps?.progressBarCurrentPageSlot}
|
||||
pageName={currentPage.name}
|
||||
currentPagesIndex={currentPage.pagesIndex}
|
||||
pagesLength={pages.length}
|
||||
isDragging={isDragging}
|
||||
setIsDragging={setIsDragging}
|
||||
progressBarPosition={progressBarPosition}
|
||||
>
|
||||
{slots?.progressBarCurrentPage}
|
||||
</ReaderProgressBarCurrentPageSlot>
|
||||
</ReaderProgressBarSlotsActionArea>
|
||||
</ClickAwayListener>
|
||||
<ReaderProgressBarPageNumber
|
||||
{...slotProps?.progressBarPageTexts?.base}
|
||||
{...slotProps?.progressBarPageTexts?.total}
|
||||
sx={[
|
||||
{
|
||||
minWidth: 'unset',
|
||||
},
|
||||
...(Array.isArray(slotProps?.progressBarPageTexts?.base?.sx)
|
||||
? (slotProps?.progressBarPageTexts?.base?.sx ?? [])
|
||||
: [slotProps?.progressBarPageTexts?.base?.sx]),
|
||||
...(Array.isArray(slotProps?.progressBarPageTexts?.total?.sx)
|
||||
? (slotProps?.progressBarPageTexts?.total?.sx ?? [])
|
||||
: [slotProps?.progressBarPageTexts?.total?.sx]),
|
||||
]}
|
||||
onClick={() => setCurrentPageIndex(getNextPageIndex('next', currentPage.pagesIndex, pages))}
|
||||
>
|
||||
{totalPages}
|
||||
</ReaderProgressBarPageNumber>
|
||||
</ReaderProgressBarRoot>
|
||||
</ReaderProgressBarContainer>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
/*
|
||||
* 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 Stack from '@mui/material/Stack';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
|
||||
import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';
|
||||
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
|
||||
import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
|
||||
|
||||
type ReaderProgressBarContainerProps = Pick<IReaderSettings, 'progressBarPosition'>;
|
||||
export const ReaderProgressBarContainer = styled(Stack, {
|
||||
shouldForwardProp: shouldForwardProp<ReaderProgressBarContainerProps>(['progressBarPosition']),
|
||||
})<ReaderProgressBarContainerProps>(({ theme, progressBarPosition }) => ({
|
||||
position: 'fixed',
|
||||
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, {
|
||||
justifyContent: 'flex-end',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
}),
|
||||
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}),
|
||||
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isLeft, {
|
||||
alignItems: theme.direction === 'ltr' ? 'flex-start' : 'flex-end',
|
||||
}),
|
||||
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isRight, {
|
||||
alignItems: theme.direction === 'ltr' ? 'flex-end' : 'flex-start',
|
||||
}),
|
||||
}));
|
||||
@@ -0,0 +1,71 @@
|
||||
/*
|
||||
* 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 Box from '@mui/material/Box';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import { ReactNode } from 'react';
|
||||
import { CurrentPageSlotProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
|
||||
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
|
||||
import { READER_PROGRESS_BAR_POSITION_TO_PLACEMENT } from '@/modules/reader/constants/ReaderProgressBar.constants.ts';
|
||||
import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
|
||||
|
||||
export const ReaderProgressBarCurrentPageSlot = ({
|
||||
pageName,
|
||||
currentPagesIndex,
|
||||
pagesLength,
|
||||
isDragging,
|
||||
setIsDragging,
|
||||
boxProps,
|
||||
children,
|
||||
progressBarPosition,
|
||||
}: CurrentPageSlotProps & { children?: ReactNode }) => (
|
||||
<Tooltip
|
||||
title={pageName}
|
||||
slotProps={{
|
||||
tooltip: { sx: { backgroundColor: 'primary.main', color: 'primary.contrastText' } },
|
||||
}}
|
||||
placement={READER_PROGRESS_BAR_POSITION_TO_PLACEMENT[progressBarPosition]}
|
||||
>
|
||||
<Box
|
||||
{...boxProps}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
cursor: isDragging ? 'grabbing' : 'grab',
|
||||
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, {
|
||||
left: `${(Math.max(0, currentPagesIndex) / pagesLength) * 100}%`,
|
||||
width: `calc(100% / ${pagesLength})`,
|
||||
height: '100%',
|
||||
}),
|
||||
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
|
||||
top: `${(Math.max(0, currentPagesIndex) / pagesLength) * 100}%`,
|
||||
width: '100%',
|
||||
height: `calc(100% / ${pagesLength})`,
|
||||
}),
|
||||
...boxProps?.sx,
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDragging(true);
|
||||
}}
|
||||
onMouseUp={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDragging(true);
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Tooltip>
|
||||
);
|
||||
@@ -0,0 +1,42 @@
|
||||
/*
|
||||
* 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 { ReactNode, useMemo } from 'react';
|
||||
import { CacheProvider } from '@emotion/react';
|
||||
import { ThemeProvider } from '@mui/material/styles';
|
||||
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
|
||||
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
|
||||
import { AppThemes, getTheme } from '@/modules/theme/services/AppThemes.ts';
|
||||
import { ThemeMode } from '@/modules/theme/contexts/ThemeModeContext.tsx';
|
||||
import { createTheme } from '@/theme.tsx';
|
||||
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
|
||||
import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
|
||||
|
||||
export const ReaderProgressBarDirectionWrapper = ({ children }: { children: ReactNode }) => {
|
||||
const direction = ReaderService.useGetThemeDirection();
|
||||
const [appTheme] = useLocalStorage<AppThemes>('appTheme', 'default');
|
||||
const [themeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
|
||||
const [pureBlackMode] = useLocalStorage<boolean>('pureBlackMode', false);
|
||||
|
||||
const {
|
||||
settings: { customThemes },
|
||||
} = useMetadataServerSettings();
|
||||
|
||||
const readerTheme = useMemo(
|
||||
() => createTheme(themeMode, getTheme(appTheme, customThemes), pureBlackMode, direction),
|
||||
[themeMode, appTheme, customThemes, pureBlackMode, direction],
|
||||
);
|
||||
|
||||
return (
|
||||
<CacheProvider value={DIRECTION_TO_CACHE[direction]}>
|
||||
<ThemeProvider theme={readerTheme}>
|
||||
<div dir={direction}>{children}</div>
|
||||
</ThemeProvider>
|
||||
</CacheProvider>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
/*
|
||||
* 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 { styled } from '@mui/material/styles';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
export const ReaderProgressBarPageNumber = styled(Typography)({
|
||||
boxSizing: 'content-box',
|
||||
minWidth: '45px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
overflow: 'hidden',
|
||||
textAlign: 'center',
|
||||
userSelect: 'none',
|
||||
cursor: 'pointer',
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
/*
|
||||
* 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 { styled } from '@mui/material/styles';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export const ReaderProgressBarRoot = styled(Stack)(({ theme }) => ({
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: theme.spacing(0.5),
|
||||
}));
|
||||
@@ -0,0 +1,31 @@
|
||||
/*
|
||||
* 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 Box from '@mui/material/Box';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import { ReactNode } from 'react';
|
||||
import { ReaderProgressBarSlotProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
|
||||
import { READER_PROGRESS_BAR_POSITION_TO_PLACEMENT } from '@/modules/reader/constants/ReaderProgressBar.constants.ts';
|
||||
|
||||
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>
|
||||
);
|
||||
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
* 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 Stack from '@mui/material/Stack';
|
||||
import { styled } from '@mui/material/styles';
|
||||
|
||||
export const ReaderProgressBarSlotsActionArea = styled(Stack)({
|
||||
position: 'relative',
|
||||
flexDirection: 'row',
|
||||
flexGrow: 1,
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
* 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 { styled } from '@mui/material/styles';
|
||||
import Stack from '@mui/material/Stack';
|
||||
|
||||
export const ReaderProgressBarSlotsContainer = styled(Stack)({
|
||||
flexDirection: 'row',
|
||||
flexGrow: 1,
|
||||
overflow: 'hidden',
|
||||
});
|
||||
@@ -0,0 +1,179 @@
|
||||
/*
|
||||
* 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 IconButton from '@mui/material/IconButton';
|
||||
import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
|
||||
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 { 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 { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils';
|
||||
import { getOptionForDirection } from '@/theme.tsx';
|
||||
import { ProgressBarPosition } from '@/modules/reader/types/Reader.types.ts';
|
||||
import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
|
||||
import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
|
||||
import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
|
||||
|
||||
export const MobileReaderProgressBar = () => {
|
||||
const { nextChapter, previousChapter } = useReaderStateChaptersContext();
|
||||
const { isVisible } = useReaderOverlayContext();
|
||||
const { setIsMaximized } = useReaderProgressBarContext();
|
||||
const pagesState = userReaderStatePagesContext();
|
||||
const { currentPageIndex, pages } = pagesState;
|
||||
|
||||
const direction = ReaderService.useGetThemeDirection();
|
||||
|
||||
const openNextChapter = ReaderService.useNavigateToChapter(nextChapter);
|
||||
const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
setIsMaximized(isVisible);
|
||||
|
||||
return () => setIsMaximized(false);
|
||||
}, [isVisible]);
|
||||
|
||||
return (
|
||||
<ReaderProgressBarDirectionWrapper>
|
||||
<Stack
|
||||
sx={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
px: 2,
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
onClick={openPreviousChapter}
|
||||
disabled={!previousChapter}
|
||||
sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85) }}
|
||||
>
|
||||
{getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)}
|
||||
</IconButton>
|
||||
<ReaderProgressBar
|
||||
progressBarPosition={ProgressBarPosition.BOTTOM}
|
||||
{...pagesState}
|
||||
createProgressBarSlot={({ name }) => (
|
||||
<ReaderProgressBarSlot
|
||||
pageName={name}
|
||||
progressBarPosition={ProgressBarPosition.BOTTOM}
|
||||
slotProps={{
|
||||
box: {
|
||||
sx: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'end',
|
||||
position: 'relative',
|
||||
backgroundColor: 'background.default',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 'calc(50% - 2px)',
|
||||
right: '2px',
|
||||
width: '2px',
|
||||
height: '2px',
|
||||
borderRadius: 100,
|
||||
backgroundColor: 'background.paper',
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
</ReaderProgressBarSlot>
|
||||
)}
|
||||
slotProps={{
|
||||
container: {
|
||||
sx: {
|
||||
flexGrow: 1,
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
justifyItems: 'center',
|
||||
alignItems: 'stretch',
|
||||
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
|
||||
borderRadius: 100,
|
||||
},
|
||||
},
|
||||
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',
|
||||
},
|
||||
},
|
||||
progressBarReadPages: {
|
||||
sx: {
|
||||
height: '20px',
|
||||
backgroundColor: 'primary.main',
|
||||
borderRadius: '400px 0 0 400px',
|
||||
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,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
onClick={openNextChapter}
|
||||
disabled={!nextChapter}
|
||||
sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85) }}
|
||||
>
|
||||
{getOptionForDirection(<SkipNextIcon />, <SkipPreviousIcon />, direction)}
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</ReaderProgressBarDirectionWrapper>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,257 @@
|
||||
/*
|
||||
* 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 { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
|
||||
import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
|
||||
import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
|
||||
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
|
||||
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
|
||||
import { ProgressBarType } 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 { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
|
||||
import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
|
||||
|
||||
export const StandardReaderProgressBar = () => {
|
||||
const theme = useTheme();
|
||||
const pagesState = userReaderStatePagesContext();
|
||||
const { currentPageIndex, pages } = pagesState;
|
||||
const { readerNavBarWidth } = useNavBarContext();
|
||||
const { isMaximized, setIsMaximized, isDragging } = useReaderProgressBarContext();
|
||||
const { progressBarType, progressBarSize, progressBarPosition } = ReaderService.useSettings();
|
||||
const readerDirection = ReaderService.useGetThemeDirection();
|
||||
const { scrollbarXSize, scrollbarYSize } = useReaderScrollbarContext();
|
||||
|
||||
const currentPagesIndex = getPage(currentPageIndex, pages).pagesIndex;
|
||||
|
||||
const { isBottom, isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(progressBarPosition);
|
||||
|
||||
const isHidden = progressBarType === ProgressBarType.HIDDEN;
|
||||
const isMinimized = !isMaximized && !isDragging;
|
||||
|
||||
// the progress bar uses the reading direction to set the themes direction, thus, stuff has to be adjusted to still be correctly positioned
|
||||
// depending on which combination of theme direction and reading direction is currently active
|
||||
return (
|
||||
<ReaderProgressBarDirectionWrapper>
|
||||
<ReaderProgressBar
|
||||
{...pagesState}
|
||||
progressBarPosition={progressBarPosition}
|
||||
createProgressBarSlot={({ name, primary, secondary }, pageLoadStates, pagesIndex) => (
|
||||
<ReaderProgressBarSlot
|
||||
key={primary.url}
|
||||
pageName={name}
|
||||
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(
|
||||
pageLoadStates[primary.index] &&
|
||||
(!secondary || pageLoadStates[secondary.index]),
|
||||
{
|
||||
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={{
|
||||
container: {
|
||||
sx: {
|
||||
overflow: 'hidden',
|
||||
transition: `all 0.${theme.transitions.duration.shortest}s`,
|
||||
...applyStyles(isHorizontal, {
|
||||
minHeight: '100px',
|
||||
...applyStyles(theme.direction === 'ltr', {
|
||||
left: readerDirection === 'ltr' ? readerNavBarWidth : scrollbarYSize,
|
||||
right: readerDirection === 'rtl' ? readerNavBarWidth : scrollbarYSize,
|
||||
}),
|
||||
...applyStyles(theme.direction === 'rtl', {
|
||||
left: readerDirection === 'rtl' ? readerNavBarWidth : scrollbarYSize,
|
||||
right: readerDirection === 'ltr' ? readerNavBarWidth : scrollbarYSize,
|
||||
}),
|
||||
}),
|
||||
...applyStyles(isVertical, {
|
||||
minWidth: '100px',
|
||||
bottom: `${scrollbarXSize}px`,
|
||||
}),
|
||||
...applyStyles(isBottom, {
|
||||
bottom: `${scrollbarXSize}px`,
|
||||
}),
|
||||
...applyStyles(isLeft, {
|
||||
...applyStyles(theme.direction === 'ltr', {
|
||||
left: readerDirection === 'ltr' ? readerNavBarWidth : 'unset',
|
||||
right: readerDirection === 'rtl' ? readerNavBarWidth : 'unset',
|
||||
}),
|
||||
...applyStyles(theme.direction === 'rtl', {
|
||||
right: readerDirection === 'rtl' ? scrollbarYSize : 'unset',
|
||||
left: readerDirection === 'ltr' ? scrollbarYSize : 'unset',
|
||||
}),
|
||||
}),
|
||||
...applyStyles(isRight, {
|
||||
...applyStyles(theme.direction === 'ltr', {
|
||||
right: readerDirection === 'ltr' ? scrollbarYSize : 'unset',
|
||||
left: readerDirection === 'rtl' ? scrollbarYSize : 'unset',
|
||||
}),
|
||||
...applyStyles(theme.direction === 'rtl', {
|
||||
left: readerDirection === 'rtl' ? readerNavBarWidth : 'unset',
|
||||
right: readerDirection === 'ltr' ? readerNavBarWidth : 'unset',
|
||||
}),
|
||||
}),
|
||||
...applyStyles(isMinimized, {
|
||||
opacity: !isHidden ? 0.85 : 0,
|
||||
}),
|
||||
},
|
||||
onMouseEnter: () => setIsMaximized(true),
|
||||
onMouseLeave: () => setIsMaximized(false),
|
||||
},
|
||||
progressBarRoot: {
|
||||
sx: {
|
||||
gap: 0,
|
||||
transition: 'all 0.1s ease-in-out',
|
||||
backgroundColor: 'background.paper',
|
||||
...applyStyles(isVertical, {
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}),
|
||||
...applyStyles(isMinimized, {
|
||||
backgroundColor: 'unset',
|
||||
pointerEvents: 'none',
|
||||
...applyStyles(isHorizontal, {
|
||||
px: 2,
|
||||
}),
|
||||
...applyStyles(isVertical, {
|
||||
py: 2,
|
||||
}),
|
||||
...applyStyles(isBottom, {
|
||||
pb: 0.25,
|
||||
}),
|
||||
...applyStyles(isLeft, {
|
||||
...applyStyles(theme.direction === 'ltr', {
|
||||
pl: readerDirection === 'ltr' ? 0.25 : 0,
|
||||
pr: readerDirection === 'rtl' ? 0.25 : 0,
|
||||
}),
|
||||
...applyStyles(theme.direction === 'rtl', {
|
||||
pr: readerDirection === 'rtl' ? 0.25 : 0,
|
||||
pl: readerDirection === 'ltr' ? 0.25 : 0,
|
||||
}),
|
||||
}),
|
||||
...applyStyles(isRight, {
|
||||
...applyStyles(theme.direction === 'ltr', {
|
||||
pr: readerDirection === 'ltr' ? 0.25 : 0,
|
||||
pl: readerDirection === 'rtl' ? 0.25 : 0,
|
||||
}),
|
||||
...applyStyles(theme.direction === 'rtl', {
|
||||
pl: readerDirection === 'rtl' ? 0.25 : 0,
|
||||
pr: readerDirection === 'ltr' ? 0.25 : 0,
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
progressBarSlotsContainer: {
|
||||
sx: {
|
||||
borderRadius: 2,
|
||||
transition: 'height 0.1s ease-in-out',
|
||||
...applyStyles(isHorizontal, {
|
||||
height: '20px',
|
||||
}),
|
||||
...applyStyles(isVertical, {
|
||||
flexDirection: 'column',
|
||||
width: '20px',
|
||||
}),
|
||||
...applyStyles(isMinimized, {
|
||||
...applyStyles(isHorizontal, {
|
||||
height: `${progressBarSize}px`,
|
||||
}),
|
||||
...applyStyles(isVertical, {
|
||||
width: `${progressBarSize}px`,
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
progressBarReadPages: { sx: { display: 'none' } },
|
||||
progressBarCurrentPageSlot: { sx: { display: 'none' } },
|
||||
progressBarPageTexts: {
|
||||
base: {
|
||||
sx: {
|
||||
px: 1,
|
||||
py: 1.5,
|
||||
transition: 'all 0.1s ease-in-out',
|
||||
...applyStyles(isMinimized, {
|
||||
transform: 'scale(0)',
|
||||
p: 0,
|
||||
minWidth: 0,
|
||||
maxWidth: 0,
|
||||
minHeight: 0,
|
||||
maxHeight: 0,
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ReaderProgressBarDirectionWrapper>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user