diff --git a/CHANGELOG.md b/CHANGELOG.md index ac7f0c81..d10d9981 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). ### Fixed - (**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 diff --git a/src/features/reader/overlay/progress-bar/components/ReaderProgressBarCurrentPageSlot.tsx b/src/features/reader/overlay/progress-bar/components/ReaderProgressBarCurrentPageSlot.tsx index 7e0096ea..1dccd613 100644 --- a/src/features/reader/overlay/progress-bar/components/ReaderProgressBarCurrentPageSlot.tsx +++ b/src/features/reader/overlay/progress-bar/components/ReaderProgressBarCurrentPageSlot.tsx @@ -13,6 +13,7 @@ import type { CurrentPageSlotProps } from '@/features/reader/overlay/progress-ba import { applyStyles } from '@/base/utils/ApplyStyles.ts'; 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 { coerceIn } from '@/lib/HelperFunctions.ts'; export const ReaderProgressBarCurrentPageSlot = ({ pageName, @@ -22,34 +23,39 @@ export const ReaderProgressBarCurrentPageSlot = ({ boxProps, children, progressBarPosition, -}: CurrentPageSlotProps & { children?: ReactNode }) => ( - - { + const coercedTotalPages = coerceIn(pagesLength - 1, 1); + const coercedCurrentPagesIndex = coerceIn(currentPagesIndex - 1, 0, coercedTotalPages); + + return ( + - {children} - - -); + + {children} + + + ); +}; diff --git a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx index 48d570ae..b7df6b7e 100644 --- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx @@ -186,7 +186,7 @@ const BaseMobileReaderProgressBar = ({ position: 'absolute', ...applyStyles(isVertical, { top: 'calc(100% - 6px)', - ...applyStyles(currentPagesIndex === 0, { + ...applyStyles(currentPagesIndex === 0 && pages.length > 1, { top: '0', }), width: '75%', @@ -194,7 +194,7 @@ const BaseMobileReaderProgressBar = ({ }), ...applyStyles(isHorizontal, { left: 'calc(100% - 0px)', - ...applyStyles(currentPagesIndex === 0, { + ...applyStyles(currentPagesIndex === 0 && pages.length > 1, { left: '0', }), width: '6px', diff --git a/src/lib/HelperFunctions.ts b/src/lib/HelperFunctions.ts index 5b7c4cc6..536f061d 100644 --- a/src/lib/HelperFunctions.ts +++ b/src/lib/HelperFunctions.ts @@ -35,7 +35,8 @@ export const getValueFromObject = (obj: Record, key: string): 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 = () => {};