diff --git a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx index eccc8b3b..158fa53d 100644 --- a/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx @@ -47,6 +47,7 @@ const BaseReaderProgressBar = ({ setIsDragging, openPage, direction, + fullSegmentClicks, }: ReaderProgressBarProps & Pick & Pick, 'createProgressBarSlot'> & { @@ -69,6 +70,7 @@ const BaseReaderProgressBar = ({ }; openPage: ReturnType; direction: ReturnType; + fullSegmentClicks: boolean; }) => { const progressBarRef = useRef(null); const draggingDetectionTimeout = useRef(); @@ -107,6 +109,7 @@ const BaseReaderProgressBar = ({ pages, progressBarPosition, getOptionForDirection, + fullSegmentClicks, ); const handleMouseDown = (e: React.MouseEvent | React.TouchEvent) => { @@ -123,6 +126,7 @@ const BaseReaderProgressBar = ({ progressBarRef.current.getBoundingClientRect(), pages, isHorizontalPosition, + fullSegmentClicks, getOptionForDirection, ), ), diff --git a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx index 6f3ec8fe..539aaa8e 100644 --- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx @@ -145,6 +145,7 @@ const BaseMobileReaderProgressBar = ({ {getOptionForDirection(, , direction)} ( { if (!isDragging) { @@ -562,6 +563,7 @@ export class ReaderControls { progressBarRef.current.getBoundingClientRect(), pages, isHorizontal, + fullSegmentClicks, getOptionForDirectionFn, ), ); diff --git a/src/modules/reader/utils/ReaderProgressBar.utils.tsx b/src/modules/reader/utils/ReaderProgressBar.utils.tsx index 4ec90070..9e568852 100644 --- a/src/modules/reader/utils/ReaderProgressBar.utils.tsx +++ b/src/modules/reader/utils/ReaderProgressBar.utils.tsx @@ -48,17 +48,26 @@ export const getPageForMousePos = ( elementRect: DOMRect, 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 mouseXPosRelativeToProgressBar = pos - rectPos; - const pageForMouseXPos = Math.ceil((mouseXPosRelativeToProgressBar / rectSize) * pages.length); - const minPage = Math.max(1, pageForMouseXPos); - const maxPage = Math.min(minPage, pages.length); - const newPageIndex = getOptionForDirection(maxPage - 1, pages.length - maxPage); + const mousePosRelativeToProgressBar = pos - rectPos; + + const totalPages = pages.length - Number(!fullSegmentClicks); + + const segmentWidth = rectSize / totalPages; + const clickedSegmentIndex = Math.floor(mousePosRelativeToProgressBar / segmentWidth); + const segmentMiddlePoint = (clickedSegmentIndex + (fullSegmentClicks ? 1 : 0.5)) * segmentWidth; + const actualClickedSegmentIndex = + mousePosRelativeToProgressBar <= segmentMiddlePoint ? clickedSegmentIndex : clickedSegmentIndex + 1; + + const minPageIndex = Math.max(0, actualClickedSegmentIndex); + const maxPageIndex = Math.min(minPageIndex, pages.length - 1); + const newPageIndex = getOptionForDirection(maxPageIndex, pages.length - 1 - maxPageIndex); return pages[newPageIndex]; };