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 354df094..182b4c25 100644 --- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx @@ -22,7 +22,6 @@ import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts' import { IReaderSettings, ProgressBarPosition, - ProgressBarPositionAutoVertical, ReaderResumeMode, ReaderStateChapters, } from '@/modules/reader/types/Reader.types.ts'; @@ -36,6 +35,7 @@ import { ReaderProgressBarSlotMobile } from '@/modules/reader/components/overlay 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'; +import { getProgressBarPosition } from '@/modules/reader/utils/ReaderSettings.utils.tsx'; const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record = { [ProgressBarPosition.BOTTOM]: 'up', @@ -74,11 +74,12 @@ const BaseMobileReaderProgressBar = ({ useCallback(() => setRefreshProgressBarPosition({}), []), ); - const finalProgressBarPosition = - window.innerHeight - topOffset - bottomOffset > window.innerWidth && - progressBarPositionAutoVertical !== ProgressBarPositionAutoVertical.OFF - ? (progressBarPositionAutoVertical as unknown as ProgressBarPosition) - : progressBarPosition; + const finalProgressBarPosition = getProgressBarPosition( + progressBarPosition, + progressBarPositionAutoVertical, + topOffset, + bottomOffset, + ); const { isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(finalProgressBarPosition); const finalReaderDirection = isHorizontal ? readerDirection : 'ltr'; 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 5b8369ef..42a666be 100644 --- a/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx @@ -11,13 +11,7 @@ import { memo, useCallback, useState } from 'react'; import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx'; import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; -import { - IReaderSettings, - ProgressBarPosition, - ProgressBarPositionAutoVertical, - ProgressBarType, - TReaderScrollbarContext, -} from '@/modules/reader/types/Reader.types.ts'; +import { IReaderSettings, ProgressBarType, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts'; import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts'; import { getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx'; import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx'; @@ -29,6 +23,7 @@ import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderPro import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx'; import { ReaderProgressBarSlotDesktop } from '@/modules/reader/components/overlay/progress-bar/desktop/ReaderProgressBarSlotDesktop.tsx'; import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx'; +import { getProgressBarPosition } from '@/modules/reader/utils/ReaderSettings.utils.tsx'; const BaseStandardReaderProgressBar = ({ readerNavBarWidth, @@ -61,12 +56,7 @@ const BaseStandardReaderProgressBar = ({ useCallback(() => setRefreshProgressBarPosition({}), []), ); - const finalProgressBarPosition = - window.innerHeight > window.innerWidth && - progressBarPositionAutoVertical !== ProgressBarPositionAutoVertical.OFF - ? (progressBarPositionAutoVertical as unknown as ProgressBarPosition) - : progressBarPosition; - + const finalProgressBarPosition = getProgressBarPosition(progressBarPosition, progressBarPositionAutoVertical); 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 0cf56561..3302908d 100644 --- a/src/modules/reader/utils/ReaderSettings.utils.tsx +++ b/src/modules/reader/utils/ReaderSettings.utils.tsx @@ -10,6 +10,8 @@ import { ForwardRefExoticComponent, MemoExoticComponent, RefAttributes } from 'r import { IReaderSettings, IReaderSettingsWithDefaultFlag, + ProgressBarPosition, + ProgressBarPositionAutoVertical, ReaderPagerProps, ReaderPageScaleMode, ReadingMode, @@ -56,3 +58,22 @@ export const getPagerForReadingMode = ( throw new Error(`Unexpected "ReadingMode" (${readingMode})`); } }; + +export const getProgressBarPosition = ( + progressBarPosition: ProgressBarPosition, + progressBarPositionAutoVertical: ProgressBarPositionAutoVertical, + topOffset: number = 0, + bottomOffset: number = 0, +): ProgressBarPosition => { + const isAutoVerticalEnabled = + progressBarPositionAutoVertical !== ProgressBarPositionAutoVertical.OFF && + progressBarPosition === ProgressBarPosition.BOTTOM; + const isVerticalSpaceLarger = window.innerHeight - topOffset - bottomOffset > window.innerWidth; + + const shouldUseVerticalPosition = isAutoVerticalEnabled && isVerticalSpaceLarger; + if (shouldUseVerticalPosition) { + return progressBarPositionAutoVertical as unknown as ProgressBarPosition; + } + + return progressBarPosition; +};