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

Make mobile progress bar position changeable

Browse Source
This commit is contained in:
schroda
2025-01-02 21:25:35 +01:00
parent 92892e6604
commit f90e4597f8
10 changed files with 371 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/modules/reader/components/overlay/ReaderOverlay.tsx
View File

@@ -7,7 +7,7 @@
*/
import Box from '@mui/material/Box';
import { memo, useState } from 'react';
import { memo, useCallback, useRef, useState } from 'react';
import { BaseReaderOverlayProps, MobileHeaderProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { ReaderSettings } from '@/modules/reader/components/settings/ReaderSettings.tsx';
import { ReaderPageNumber } from '@/modules/reader/components/ReaderPageNumber.tsx';
@@ -17,6 +17,7 @@ import { ReaderOverlayHeaderMobile } from '@/modules/reader/components/overlay/R
import { ReaderBottomBarMobile } from '@/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
const BaseReaderOverlay = ({
isVisible,
@@ -27,6 +28,13 @@ const BaseReaderOverlay = ({
Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop' | 'isMobile'>) => {
const [areSettingsOpen, setAreSettingsOpen] = useState(false);
const [mobileHeaderHeight, setMobileHeaderHeight] = useState(0);
const mobileHeaderRef = useRef<HTMLDivElement>(null);
useResizeObserver(
mobileHeaderRef,
useCallback(() => setMobileHeaderHeight(mobileHeaderRef.current?.clientHeight ?? 0), [isMobile]),
);
return (
<Box sx={{ position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none', zIndex: 1 }}>
{isDesktop && (
@@ -38,8 +46,12 @@ const BaseReaderOverlay = ({
{isMobile && (
<>
<ReaderOverlayHeaderMobile isVisible={isVisible} />
<ReaderBottomBarMobile openSettings={() => setAreSettingsOpen(true)} isVisible={isVisible} />
<ReaderOverlayHeaderMobile ref={mobileHeaderRef} isVisible={isVisible} />
<ReaderBottomBarMobile
openSettings={() => setAreSettingsOpen(true)}
isVisible={isVisible}
topOffset={mobileHeaderHeight}
/>
</>
)}

18
src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
View File

@@ -22,7 +22,7 @@ import { Link as RouterLink } from 'react-router-dom';
import { alpha } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import Slide from '@mui/material/Slide';
import { memo } from 'react';
import { forwardRef, memo } from 'react';
import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
@@ -44,15 +44,13 @@ import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrol
const DEFAULT_MANGA = { id: -1, title: '' };
const DEFAULT_CHAPTER = { id: -1, name: '', realUrl: '', isBookmarked: false };
const BaseReaderOverlayHeaderMobile = ({
isVisible,
manga,
currentChapter,
scrollbarYSize,
}: MobileHeaderProps &
const BaseReaderOverlayHeaderMobile = forwardRef<
HTMLDivElement,
MobileHeaderProps &
Pick<TReaderStateMangaContext, 'manga'> &
Pick<ReaderStateChapters, 'currentChapter'> &
Pick<TReaderScrollbarContext, 'scrollbarYSize'>) => {
Pick<TReaderScrollbarContext, 'scrollbarYSize'>
>(({ isVisible, manga, currentChapter, scrollbarYSize }, ref) => {
const { t } = useTranslation();
const getOptionForDirection = useGetOptionForDirection();
const handleBack = useBackButton();
@@ -66,7 +64,7 @@ const BaseReaderOverlayHeaderMobile = ({
: 'bookmark';
return (
<Slide direction="down" in={isVisible} mountOnEnter unmountOnExit>
<Slide direction="down" in={isVisible} ref={ref}>
<Stack
sx={{
flexDirection: 'row',
@@ -140,7 +138,7 @@ const BaseReaderOverlayHeaderMobile = ({
</Stack>
</Slide>
);
};
});
export const ReaderOverlayHeaderMobile = withPropsFrom(
memo(BaseReaderOverlayHeaderMobile),

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

@@ -18,7 +18,7 @@ import DialogContent from '@mui/material/DialogContent';
import Tooltip from '@mui/material/Tooltip';
import { useTranslation } from 'react-i18next';
import Slide from '@mui/material/Slide';
import { memo, useLayoutEffect } from 'react';
import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
import { ReaderBottomBarMobileProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { MobileReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx';
import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
@@ -27,6 +27,7 @@ import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/R
import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
import { ReaderStateChapters, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts';
import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
const BaseReaderBottomBarMobile = ({
openSettings,
@@ -35,38 +36,47 @@ const BaseReaderBottomBarMobile = ({
chapters,
scrollbarXSize,
scrollbarYSize,
topOffset = 0,
}: ReaderBottomBarMobileProps &
Pick<ReaderStateChapters, 'currentChapter' | 'chapters'> &
Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'>) => {
Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> & { topOffset?: number }) => {
const { t } = useTranslation();
const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' });
const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' });
const [bottomBarRefHeight, setBottomBarRefHeight] = useState(0);
const bottomBarRef = useRef<HTMLDivElement>(null);
useResizeObserver(
bottomBarRef,
useCallback(() => setBottomBarRefHeight(bottomBarRef.current?.clientHeight ?? 0), [bottomBarRefHeight]),
);
useLayoutEffect(() => {
chapterListPopupState.close();
}, [currentChapter?.id]);
return (
<>
<Slide direction="up" in={isVisible}>
<Stack
sx={{
position: 'fixed',
right: `${scrollbarYSize}px`,
bottom: 0,
left: 0,
gap: 2,
pointerEvents: 'all',
height: `calc(100% - ${topOffset}px)`,
}}
>
<MobileReaderProgressBar />
<MobileReaderProgressBar topOffset={topOffset} bottomOffset={bottomBarRefHeight} />
<Slide direction="up" in={isVisible}>
<Stack
ref={bottomBarRef}
sx={{
alignItems: 'center',
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
pb: `max(${scrollbarXSize}px, env(safe-area-inset-bottom))`,
boxShadow: 2,
pointerEvents: 'all',
}}
>
<Stack
@@ -96,8 +106,8 @@ const BaseReaderBottomBarMobile = ({
</Tooltip>
</Stack>
</Stack>
</Stack>
</Slide>
</Stack>
{chapterListPopupState.isOpen && (
<Dialog {...bindDialog(chapterListPopupState)} fullWidth maxWidth="md" scroll="paper">
<DialogContent sx={{ p: 0, pb: 1 }}>

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

@@ -133,7 +133,7 @@ const BaseReaderProgressBar = ({
getNextIndexFromPage(
getPageForMousePos(
isTouchEvent ? e.touches[0] : e,
progressBarRef.current.getBoundingClientRect(),
progressBarRef.current,
pages,
isHorizontalPosition,
fullSegmentClicks,
@@ -175,13 +175,12 @@ const BaseReaderProgressBar = ({
<ClickAwayListener onClickAway={() => setIsDragging(false)}>
<ReaderProgressBarSlotsActionArea
{...slotProps?.progressBarSlotsActionArea}
ref={progressBarRef}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onTouchStart={handleMouseDown}
onTouchEnd={handleMouseUp}
>
<ReaderProgressBarSlotsContainer {...slotProps?.progressBarSlotsContainer}>
<ReaderProgressBarSlotsContainer ref={progressBarRef} {...slotProps?.progressBarSlotsContainer}>
{pages.map((page, pagesIndex) => (
<ReaderProgressBarSlotWrapper
{...slotProps?.progressBarSlot}

2
src/modules/reader/components/overlay/progress-bar/ReaderProgressBarCurrentPageSlot.tsx
View File

@@ -41,7 +41,7 @@ export const ReaderProgressBarCurrentPageSlot = ({
height: '100%',
}),
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
top: `${(Math.max(0, currentPagesIndex - 1) / pagesLength - 1) * 100}%`,
top: `${(Math.max(0, currentPagesIndex - 1) / (pagesLength - 1)) * 100}%`,
width: '100%',
height: `calc(100% / ${pagesLength - 1})`,
}),

18
src/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx
View File

@@ -6,9 +6,10 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { ReactNode, useMemo } from 'react';
import { forwardRef, useMemo } from 'react';
import { CacheProvider } from '@emotion/react';
import { ThemeProvider } from '@mui/material/styles';
import Box, { BoxProps } from '@mui/material/Box';
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';
@@ -18,13 +19,12 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
const BaseReaderProgressBarDirectionWrapper = ({
children,
direction,
}: {
children: ReactNode;
const BaseReaderProgressBarDirectionWrapper = forwardRef<
HTMLElement,
BoxProps & {
direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
}) => {
}
>(({ direction, ...boxProps }, ref) => {
const [appTheme] = useLocalStorage<AppThemes>('appTheme', 'default');
const [themeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
const [pureBlackMode] = useLocalStorage<boolean>('pureBlackMode', false);
@@ -41,11 +41,11 @@ const BaseReaderProgressBarDirectionWrapper = ({
return (
<CacheProvider value={DIRECTION_TO_CACHE[direction]}>
<ThemeProvider theme={readerTheme}>
<div dir={direction}>{children}</div>
<Box {...boxProps} ref={ref} dir={direction} />
</ThemeProvider>
</CacheProvider>
);
};
});
export const ReaderProgressBarDirectionWrapper = withPropsFrom(
BaseReaderProgressBarDirectionWrapper,

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

@@ -20,34 +20,34 @@ const SLOT_SX_PROP: NonNullable<NonNullable<ComponentProps<typeof ReaderProgress
backgroundColor: 'background.default',
};
const START_END_GAP = '4px';
const POINT_SIZE = '3px';
const ProgressBarPagePoint = memo(
({
isTrailingPage,
pagesIndex,
totalPages,
isVertical,
isHorizontal,
}: {
isTrailingPage: boolean;
pagesIndex: number;
totalPages: number;
isVertical: boolean;
isHorizontal: boolean;
}) => {
const isFirstPage = pagesIndex === 0;
const isLastPage = pagesIndex === totalPages - 1;
const left = `${(pagesIndex / (totalPages - 1)) * 100}%`;
const position = `${(pagesIndex / (totalPages - 1)) * 100}%`;
return (
<Box
sx={{
position: 'absolute',
top: '50%',
left,
...applyStyles(isFirstPage, {
left: START_END_GAP,
...applyStyles(isVertical, {
top: position,
left: '50%',
}),
...applyStyles(isLastPage, {
left: `calc(${left} - ${START_END_GAP})`,
...applyStyles(isHorizontal, {
top: '50%',
left: position,
}),
transform: 'translate(-50%, -50%)',
width: POINT_SIZE,
@@ -68,20 +68,34 @@ export const ReaderProgressBarSlotMobile = memo(
({
pageName,
isTrailingPage,
isCurrentPage,
pagesIndex,
totalPages,
isVertical,
isHorizontal,
}: {
pageName: string;
isTrailingPage: boolean;
isCurrentPage: boolean;
pagesIndex: number;
totalPages: number;
isVertical: boolean;
isHorizontal: boolean;
}) => (
<ReaderProgressBarSlot
pageName={pageName}
progressBarPosition={ProgressBarPosition.BOTTOM}
slotProps={{ box: { sx: SLOT_SX_PROP } }}
>
<ProgressBarPagePoint isTrailingPage={isTrailingPage} pagesIndex={pagesIndex} totalPages={totalPages} />
{!isCurrentPage && (
<ProgressBarPagePoint
isTrailingPage={isTrailingPage}
pagesIndex={pagesIndex}
totalPages={totalPages}
isVertical={isVertical}
isHorizontal={isHorizontal}
/>
)}
</ReaderProgressBarSlot>
),
);

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

@@ -12,13 +12,20 @@ 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 { ComponentProps, memo, useCallback, useLayoutEffect, useMemo } from 'react';
import { memo, useCallback, useLayoutEffect, useMemo, useState } from 'react';
import Slide, { SlideProps } from '@mui/material/Slide';
import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.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.tsx';
import { getPage, getProgressBarPositionInfo } 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 {
IReaderSettings,
ProgressBarPosition,
ProgressBarPositionAutoVertical,
ReaderResumeMode,
ReaderStateChapters,
} 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';
@@ -28,8 +35,179 @@ import { ReaderProgressBarProps, TReaderProgressBarContext } from '@/modules/rea
import { ReaderProgressBarSlotMobile } from '@/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotProps'] = {
const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, SlideProps['direction']> = {
[ProgressBarPosition.BOTTOM]: 'up',
[ProgressBarPosition.LEFT]: 'right',
[ProgressBarPosition.RIGHT]: 'left',
};
const BaseMobileReaderProgressBar = ({
previousChapter,
nextChapter,
isVisible,
setIsMaximized,
isDragging,
currentPageIndex,
pages,
direction: readerDirection,
progressBarPosition,
progressBarPositionAutoVertical,
topOffset = 0,
bottomOffset = 0,
}: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
Pick<TReaderOverlayContext, 'isVisible'> &
Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> &
Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> &
Pick<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'> & {
direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
topOffset?: number;
bottomOffset?: number;
}) => {
const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
const [, setRefreshProgressBarPosition] = useState({});
useResizeObserver(
window.document.documentElement,
useCallback(() => setRefreshProgressBarPosition({}), []),
);
const finalProgressBarPosition =
window.innerHeight - topOffset - bottomOffset > window.innerWidth &&
progressBarPositionAutoVertical !== ProgressBarPositionAutoVertical.OFF
? (progressBarPositionAutoVertical as unknown as ProgressBarPosition)
: progressBarPosition;
const { isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(finalProgressBarPosition);
const finalReaderDirection = isHorizontal ? readerDirection : 'ltr';
const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]);
const progressBarCurrentPage = useMemo(
() => ({
progressBarCurrentPage: (
<Box
sx={{
position: 'absolute',
...applyStyles(isVertical, {
top: 'calc(100% - 6px)',
...applyStyles(currentPagesIndex === 0, {
top: '0',
}),
width: '75%',
height: '6px',
}),
...applyStyles(isHorizontal, {
left: 'calc(100% - 0px)',
...applyStyles(currentPagesIndex === 0, {
left: '0',
}),
width: '6px',
height: '75%',
}),
backgroundColor: 'primary.main',
borderRadius: 100,
cursor: isDragging ? 'grabbing' : 'grab',
}}
/>
),
}),
[currentPagesIndex, pages.length, isDragging, isVertical, isHorizontal],
);
useLayoutEffect(() => {
setIsMaximized(isVisible);
return () => setIsMaximized(false);
}, [isVisible]);
return (
<Slide direction={PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION[finalProgressBarPosition]} in={isVisible}>
<ReaderProgressBarDirectionWrapper
sx={{
position: 'relative',
display: 'flex',
alignItems: 'end',
height: '100%',
pointerEvents: 'none',
...applyStyles(isLeft, {
justifyContent: readerDirection === 'ltr' ? 'start' : 'end',
}),
...applyStyles(isRight, {
justifyContent: readerDirection === 'ltr' ? 'end' : 'start',
}),
}}
>
<Stack
sx={{
p: 2,
gap: 1,
pointerEvents: 'all',
alignItems: 'center',
...applyStyles(isVertical, {
height: '100%',
flexDirection: 'column',
}),
...applyStyles(isHorizontal, {
width: '100%',
flexDirection: 'row',
}),
}}
>
<IconButton
onClick={openPreviousChapter}
disabled={!previousChapter}
sx={{
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
boxShadow: 2,
}}
>
{getOptionForDirection(
<SkipPreviousIcon
sx={{
...applyStyles(isVertical, {
transform: 'rotate(90deg)',
}),
}}
/>,
<SkipNextIcon
sx={{
...applyStyles(isVertical, {
transform: 'rotate(90deg)',
}),
}}
/>,
finalReaderDirection,
)}
</IconButton>
<ReaderProgressBar
progressBarPosition={finalProgressBarPosition}
fullSegmentClicks={false}
createProgressBarSlot={useCallback(
(
page,
pagesIndex,
_primaryPageLoadState,
_secondaryPageLoadState,
isCurrentPage,
_isLeadingPage,
isTrailingPage,
totalPages,
) => (
<ReaderProgressBarSlotMobile
pageName={page.name}
isTrailingPage={isTrailingPage}
isCurrentPage={isCurrentPage}
pagesIndex={pagesIndex}
totalPages={totalPages}
isVertical={isVertical}
isHorizontal={isHorizontal}
/>
),
[isVertical, isHorizontal],
)}
slotProps={{
container: {
sx: {
flexGrow: 1,
@@ -45,129 +223,91 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotPro
progressBarRoot: {
sx: {
flexGrow: 1,
alignItems: 'stretch',
gap: 0,
...applyStyles(isVertical, {
flexDirection: 'column',
}),
...applyStyles(isHorizontal, {
alignItems: 'stretch',
}),
},
},
progressBarSlotsActionArea: {
sx: {
height: '100%',
alignItems: 'center',
py: 2,
cursor: 'pointer',
...applyStyles(isVertical, {
width: '100%',
flexDirection: 'column',
px: 2,
}),
...applyStyles(isHorizontal, {
height: '100%',
py: 2,
}),
},
},
progressBarSlotsContainer: {
sx: {
borderRadius: 100,
backgroundColor: 'background.default',
...applyStyles(isVertical, {
flexDirection: 'column',
py: 1,
}),
...applyStyles(isHorizontal, {
px: 1,
}),
},
},
progressBarSlot: {
sx: {
...applyStyles(isVertical, {
width: '20px',
}),
...applyStyles(isHorizontal, {
height: '20px',
}),
},
},
progressBarCurrentPageSlot: {
sx: {
display: 'flex',
alignItems: 'center',
zIndex: 1,
cursor: 'inherit',
...applyStyles(isVertical, {
justifyContent: 'center',
}),
...applyStyles(isHorizontal, {
alignItems: 'center',
}),
},
},
progressBarPageTexts: {
base: { px: 1 },
base: {
sx: {
...applyStyles(isVertical, {
py: 1,
}),
...applyStyles(isHorizontal, {
px: 1,
}),
},
},
},
};
const BaseMobileReaderProgressBar = ({
previousChapter,
nextChapter,
isVisible,
setIsMaximized,
isDragging,
currentPageIndex,
pages,
direction,
}: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
Pick<TReaderOverlayContext, 'isVisible'> &
Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> &
Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> & {
direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
}) => {
const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
const currentPagesIndex = useMemo(() => getPage(currentPageIndex, pages).pagesIndex, [currentPageIndex, pages]);
const progressBarCurrentPage = useMemo(
() => ({
progressBarCurrentPage: (
<Box
sx={{
position: 'absolute',
left: 'calc(100% - 6px)',
...applyStyles(currentPagesIndex === 0, {
left: '0',
}),
width: '6px',
height: '75%',
backgroundColor: 'primary.main',
borderRadius: 100,
cursor: isDragging ? 'grabbing' : 'grab',
}}
/>
),
}),
[currentPagesIndex, pages.length, isDragging],
);
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), boxShadow: 2 }}
>
{getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)}
</IconButton>
<ReaderProgressBar
progressBarPosition={ProgressBarPosition.BOTTOM}
fullSegmentClicks={false}
createProgressBarSlot={useCallback(
(page, pagesIndex, _2, _3, _4, _5, isTrailingPage, totalPages) => (
<ReaderProgressBarSlotMobile
pageName={page.name}
isTrailingPage={isTrailingPage}
pagesIndex={pagesIndex}
totalPages={totalPages}
/>
),
[],
)}
slotProps={{
...PROGRESS_BAR_SLOT_PROPS,
progressBarReadPages: {
sx: {
height: '20px',
backgroundColor: 'primary.main',
borderRadius: '400px 0 0 400px',
...applyStyles(isVertical, {
width: '20px',
height: `${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / (pages.length - 1)) * 100}%`,
borderRadius: '400px 400px 0 0',
}),
...applyStyles(isHorizontal, {
width: `${(Math.max(0, getPage(currentPageIndex, pages).pagesIndex) / (pages.length - 1)) * 100}%`,
height: '20px',
borderRadius: '400px 0 0 400px',
}),
},
},
}}
@@ -178,10 +318,27 @@ const BaseMobileReaderProgressBar = ({
disabled={!nextChapter}
sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
>
{getOptionForDirection(<SkipNextIcon />, <SkipPreviousIcon />, direction)}
{getOptionForDirection(
<SkipNextIcon
sx={{
...applyStyles(isVertical, {
transform: 'rotate(90deg)',
}),
}}
/>,
<SkipPreviousIcon
sx={{
...applyStyles(isVertical, {
transform: 'rotate(90deg)',
}),
}}
/>,
finalReaderDirection,
)}
</IconButton>
</Stack>
</ReaderProgressBarDirectionWrapper>
</Slide>
);
};
@@ -193,6 +350,7 @@ export const MobileReaderProgressBar = withPropsFrom(
useReaderProgressBarContext,
userReaderStatePagesContext,
() => ({ direction: ReaderService.useGetThemeDirection() }),
ReaderService.useSettingsWithoutDefaultFlag,
],
[
'previousChapter',
@@ -203,5 +361,7 @@ export const MobileReaderProgressBar = withPropsFrom(
'currentPageIndex',
'pages',
'direction',
'progressBarPosition',
'progressBarPositionAutoVertical',
],
);

2
src/modules/reader/services/ReaderControls.ts
View File

@@ -614,7 +614,7 @@ export class ReaderControls {
const newPageIndex = getNextIndexFromPage(
getPageForMousePos(
coordinates,
progressBarRef.current.getBoundingClientRect(),
progressBarRef.current,
pages,
isHorizontal,
fullSegmentClicks,

16
src/modules/reader/utils/ReaderProgressBar.utils.tsx
View File

@@ -45,17 +45,25 @@ export const getNextPageIndex = (
export const getPageForMousePos = (
coordinates: { clientX: number; clientY: number },
elementRect: DOMRect,
element: HTMLElement,
pages: ReaderProgressBarProps['pages'],
isHorizontalPosition: boolean,
fullSegmentClicks: boolean,
getOptionForDirection: typeof getOptionForDirectionImpl,
): ReaderProgressBarProps['pages'][number] => {
const pos = isHorizontalPosition ? coordinates.clientX : coordinates.clientY;
const rectPos = isHorizontalPosition ? elementRect.left : elementRect.top;
const rectSize = isHorizontalPosition ? elementRect.width : elementRect.height;
const mousePosRelativeToProgressBar = pos - rectPos;
const { paddingTop, paddingBottom, paddingLeft, paddingRight } = getComputedStyle(element);
const elementRect = element.getBoundingClientRect();
const padding = isHorizontalPosition
? parseFloat(paddingLeft) + parseFloat(paddingRight)
: parseFloat(paddingTop) + parseFloat(paddingBottom);
const rectPos = isHorizontalPosition ? elementRect.left : elementRect.top;
const rectSizeWithPadding = isHorizontalPosition ? elementRect.width : elementRect.height;
const rectSize = rectSizeWithPadding - padding;
const mousePosRelativeToProgressBar = pos - rectPos - padding / 2;
const totalPages = pages.length - Number(!fullSegmentClicks);