Skip to content

Commit

Permalink
Apply auto vertical progress bar for BOTTOM position only
Browse files Browse the repository at this point in the history
In case "auto vertical position" is not "OFF" but the main position is not "BOTTOM", the auto mode still should be considered to be "OFF"
  • Loading branch information
schroda committed Jan 2, 2025
1 parent 52f5415 commit 6215500
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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, SlideProps['direction']> = {
[ProgressBarPosition.BOTTOM]: 'up',
Expand Down Expand 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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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);

Expand Down
21 changes: 21 additions & 0 deletions src/modules/reader/utils/ReaderSettings.utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { ForwardRefExoticComponent, MemoExoticComponent, RefAttributes } from 'r
import {
IReaderSettings,
IReaderSettingsWithDefaultFlag,
ProgressBarPosition,
ProgressBarPositionAutoVertical,
ReaderPagerProps,
ReaderPageScaleMode,
ReadingMode,
Expand Down Expand Up @@ -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;
};

0 comments on commit 6215500

Please sign in to comment.