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 f5deeec9..b9d634fe 100644 --- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx @@ -24,6 +24,7 @@ import { ProgressBarPosition, ReaderResumeMode, ReaderStateChapters, + TReaderScrollbarContext, } 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'; @@ -36,6 +37,7 @@ import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/Rea import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts'; import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx'; import { getProgressBarPosition } from '@/modules/reader/utils/ReaderSettings.utils.tsx'; +import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx'; const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record = { [ProgressBarPosition.BOTTOM]: 'up', @@ -58,11 +60,13 @@ const BaseMobileReaderProgressBar = ({ progressBarPositionAutoVertical, topOffset = 0, bottomOffset = 0, + scrollbarXSize, }: Pick & Pick & Pick & Pick & - Pick & { + Pick & + Pick & { direction: ReturnType; topOffset?: number; bottomOffset?: number; @@ -79,8 +83,9 @@ const BaseMobileReaderProgressBar = ({ const finalProgressBarPosition = getProgressBarPosition( progressBarPosition, progressBarPositionAutoVertical, - topOffset, - bottomOffset, + // scrollbar x size is already included in the top/bottom offset due to the progress bar being placed in the reader mobile bottom bar + topOffset + bottomOffset, + scrollbarXSize, ); const { isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(finalProgressBarPosition); @@ -362,6 +367,7 @@ export const MobileReaderProgressBar = withPropsFrom( userReaderStatePagesContext, () => ({ direction: ReaderService.useGetThemeDirection() }), ReaderService.useSettingsWithoutDefaultFlag, + useReaderScrollbarContext, ], [ 'previousChapter', @@ -374,5 +380,6 @@ export const MobileReaderProgressBar = withPropsFrom( 'direction', 'progressBarPosition', 'progressBarPositionAutoVertical', + 'scrollbarXSize', ], ); diff --git a/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx b/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx index 42a666be..f732047c 100644 --- a/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx @@ -56,7 +56,12 @@ const BaseStandardReaderProgressBar = ({ useCallback(() => setRefreshProgressBarPosition({}), []), ); - const finalProgressBarPosition = getProgressBarPosition(progressBarPosition, progressBarPositionAutoVertical); + const finalProgressBarPosition = getProgressBarPosition( + progressBarPosition, + progressBarPositionAutoVertical, + scrollbarYSize, + readerNavBarWidth + scrollbarXSize, + ); const { isBottom, isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(finalProgressBarPosition); diff --git a/src/modules/reader/utils/ReaderSettings.utils.tsx b/src/modules/reader/utils/ReaderSettings.utils.tsx index e709d9a0..2e7cc237 100644 --- a/src/modules/reader/utils/ReaderSettings.utils.tsx +++ b/src/modules/reader/utils/ReaderSettings.utils.tsx @@ -67,14 +67,14 @@ export const getPagerForReadingMode = ( export const getProgressBarPosition = ( progressBarPosition: ProgressBarPosition, progressBarPositionAutoVertical: keyof typeof ProgressBarPositionAutoVertical, - topOffset: number = 0, - bottomOffset: number = 0, + offsetY: number = 0, + offsetX: number = 0, ): Exclude => { if (progressBarPosition !== ProgressBarPosition.AUTO) { return progressBarPosition; } - const isVerticalSpaceLarger = window.innerHeight - topOffset - bottomOffset > window.innerWidth; + const isVerticalSpaceLarger = window.innerHeight - offsetY > window.innerWidth - offsetX; if (isVerticalSpaceLarger) { return progressBarPositionAutoVertical;