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

Fix mobile progress bar current page slot position

Browse Source 
Regression 9595076dae
This commit is contained in:
schroda
2026-05-12 14:01:31 +02:00
parent 8dada86285
commit 9e34afbd5d
4 changed files with 40 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
### Fixed ### Fixed
- (**Reader**) Fix scrollbar appearing with "fit to widt/height/screen" page scale mode and applied safe area insets - (**Reader**) Fix scrollbar appearing with "fit to widt/height/screen" page scale mode and applied safe area insets
- (**Reader**) Fix wrongly positioned mobile progress bar current page indicator
## [20260509.01] (r3147) - 2026-05-09 ## [20260509.01] (r3147) - 2026-05-09

64
src/features/reader/overlay/progress-bar/components/ReaderProgressBarCurrentPageSlot.tsx
View File

@@ -13,6 +13,7 @@ import type { CurrentPageSlotProps } from '@/features/reader/overlay/progress-ba
import { applyStyles } from '@/base/utils/ApplyStyles.ts'; import { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { getProgressBarPositionInfo } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx'; import { getProgressBarPositionInfo } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
import { READER_PROGRESS_BAR_POSITION_TO_PLACEMENT } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { READER_PROGRESS_BAR_POSITION_TO_PLACEMENT } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { coerceIn } from '@/lib/HelperFunctions.ts';
export const ReaderProgressBarCurrentPageSlot = ({ export const ReaderProgressBarCurrentPageSlot = ({
pageName, pageName,
@@ -22,34 +23,39 @@ export const ReaderProgressBarCurrentPageSlot = ({
boxProps, boxProps,
children, children,
progressBarPosition, progressBarPosition,
}: CurrentPageSlotProps & { children?: ReactNode }) => ( }: CurrentPageSlotProps & { children?: ReactNode }) => {
<CustomTooltip const coercedTotalPages = coerceIn(pagesLength - 1, 1);
title={pageName} const coercedCurrentPagesIndex = coerceIn(currentPagesIndex - 1, 0, coercedTotalPages);
slotProps={{
tooltip: { sx: { backgroundColor: 'primary.main', color: 'primary.contrastText' } }, return (
}} <CustomTooltip
placement={READER_PROGRESS_BAR_POSITION_TO_PLACEMENT[progressBarPosition]} title={pageName}
disableTouchListener slotProps={{
> tooltip: { sx: { backgroundColor: 'primary.main', color: 'primary.contrastText' } },
<Box
{...boxProps}
sx={{
position: 'absolute',
cursor: isDragging ? 'grabbing' : 'grab',
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, {
left: `${(Math.max(0, currentPagesIndex - 1) / pagesLength) * 100}%`,
width: `calc(100% / ${pagesLength})`,
height: '100%',
}),
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
top: `${(Math.max(0, currentPagesIndex - 1) / pagesLength) * 100}%`,
width: '100%',
height: `calc(100% / ${pagesLength})`,
}),
...boxProps?.sx,
}} }}
placement={READER_PROGRESS_BAR_POSITION_TO_PLACEMENT[progressBarPosition]}
disableTouchListener
> >
{children} <Box
</Box> {...boxProps}
</CustomTooltip> sx={{
); position: 'absolute',
cursor: isDragging ? 'grabbing' : 'grab',
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isHorizontal, {
left: `${(coercedCurrentPagesIndex / coercedTotalPages) * 100}%`,
width: `calc(100% / ${coercedTotalPages})`,
height: '100%',
}),
...applyStyles(getProgressBarPositionInfo(progressBarPosition).isVertical, {
top: `${(coercedCurrentPagesIndex / coercedTotalPages) * 100}%`,
width: '100%',
height: `calc(100% / ${coercedTotalPages})`,
}),
...boxProps?.sx,
}}
>
{children}
</Box>
</CustomTooltip>
);
};

4
src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
View File

@@ -186,7 +186,7 @@ const BaseMobileReaderProgressBar = ({
position: 'absolute', position: 'absolute',
...applyStyles(isVertical, { ...applyStyles(isVertical, {
top: 'calc(100% - 6px)', top: 'calc(100% - 6px)',
...applyStyles(currentPagesIndex === 0, { ...applyStyles(currentPagesIndex === 0 && pages.length > 1, {
top: '0', top: '0',
}), }),
width: '75%', width: '75%',
@@ -194,7 +194,7 @@ const BaseMobileReaderProgressBar = ({
}), }),
...applyStyles(isHorizontal, { ...applyStyles(isHorizontal, {
left: 'calc(100% - 0px)', left: 'calc(100% - 0px)',
...applyStyles(currentPagesIndex === 0, { ...applyStyles(currentPagesIndex === 0 && pages.length > 1, {
left: '0', left: '0',
}), }),
width: '6px', width: '6px',

3
src/lib/HelperFunctions.ts
View File

@@ -35,7 +35,8 @@ export const getValueFromObject = <T>(obj: Record<string, any>, key: string): T
return keys.reduce((acc, curr) => acc?.[curr], obj) as T; return keys.reduce((acc, curr) => acc?.[curr], obj) as T;
}; };
export const coerceIn = (value: number, min: number, max: number): number => Math.max(Math.min(value, max), min); export const coerceIn = (value: number, min: number, max: number = value): number =>
Math.max(Math.min(value, max), min);
export const noOp = () => {}; export const noOp = () => {};