diff --git a/public/locales/en.json b/public/locales/en.json index 258f84e6..6c92faf8 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -940,7 +940,6 @@ }, "progress_bar": { "auto_vertical_position": { - "description": "Automatically change the progress bar to a vertical position depending on the available space", "title": "Automatic progress bar vertical position" }, "position": "Progress bar position", diff --git a/src/modules/metadata/Metadata.constants.ts b/src/modules/metadata/Metadata.constants.ts index ee613dbc..31b3a0f9 100644 --- a/src/modules/metadata/Metadata.constants.ts +++ b/src/modules/metadata/Metadata.constants.ts @@ -7,7 +7,8 @@ */ import { AppMetadataKeys, IMetadataMigration } from '@/modules/metadata/Metadata.types.ts'; -import { ReaderPageScaleMode, ReadingMode } from '@/modules/reader/types/Reader.types.ts'; +import { ProgressBarPosition, ReaderPageScaleMode, ReadingMode } from '@/modules/reader/types/Reader.types.ts'; +import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx'; export const APP_METADATA_KEY_PREFIX = 'webUI'; @@ -308,4 +309,28 @@ export const METADATA_MIGRATIONS: IMetadataMigration[] = [ { deleteKeys: ['pageScaleMode', 'shouldStretchPage', 'readerWidth'], }, + { + values: [ + { + key: 'progressBarPositionAutoVertical', + oldValue: '-1', + newValue: `${DEFAULT_READER_SETTINGS.progressBarPositionAutoVertical}`, + }, + { + key: 'progressBarPosition', + oldValue: '0', + newValue: `${ProgressBarPosition.BOTTOM}`, + }, + { + key: 'progressBarPosition', + oldValue: '1', + newValue: `${ProgressBarPosition.LEFT}`, + }, + { + key: 'progressBarPosition', + oldValue: '2', + newValue: `${ProgressBarPosition.RIGHT}`, + }, + ], + }, ]; 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 182b4c25..f5deeec9 100644 --- a/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx +++ b/src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx @@ -41,6 +41,8 @@ const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record = { + [ProgressBarPosition.AUTO]: { + title: 'global.label.auto', + icon: , + }, [ProgressBarPosition.BOTTOM]: { title: 'global.label.bottom', icon: , @@ -35,17 +39,9 @@ const VALUE_TO_DISPLAY_DATA: ValueToDisplayData = { const PROGRESS_BAR_POSITION_VALUES = Object.values(ProgressBarPosition).filter((value) => typeof value === 'number'); -const VALUE_TO_DISPLAY_DATA_AUTO_VERTICAL: ValueToDisplayData = { - ...VALUE_TO_DISPLAY_DATA, - [ProgressBarPositionAutoVertical.OFF]: { - title: 'global.label.disabled', - icon: , - }, -}; - -const PROGRESS_BAR_AUTO_VERTICAL_POSITION_VALUES = Object.values(ProgressBarPositionAutoVertical).filter( - (value) => typeof value === 'number', -); +const PROGRESS_BAR_AUTO_VERTICAL_POSITION_VALUES = Object.values( + ProgressBarPositionAutoVertical, +) as unknown as TupleUnion; export const ReaderSettingProgressBarPosition = ({ progressBarPosition, @@ -61,7 +57,7 @@ export const ReaderSettingProgressBarPosition = ({ }) => { const { t } = useTranslation(); - const supportsAutoVerticalPosition = progressBarPosition === ProgressBarPosition.BOTTOM; + const isAutoPosition = progressBarPosition === ProgressBarPosition.AUTO; return ( <> @@ -72,14 +68,13 @@ export const ReaderSettingProgressBarPosition = ({ setValue={(position) => updateSetting('progressBarPosition', position)} valueToDisplayData={VALUE_TO_DISPLAY_DATA} /> - {supportsAutoVerticalPosition && ( + {isAutoPosition && ( updateSetting('progressBarPositionAutoVertical', position)} - valueToDisplayData={VALUE_TO_DISPLAY_DATA_AUTO_VERTICAL} + valueToDisplayData={VALUE_TO_DISPLAY_DATA} /> )} diff --git a/src/modules/reader/constants/ReaderSettings.constants.tsx b/src/modules/reader/constants/ReaderSettings.constants.tsx index 1c900484..53005c51 100644 --- a/src/modules/reader/constants/ReaderSettings.constants.tsx +++ b/src/modules/reader/constants/ReaderSettings.constants.tsx @@ -18,7 +18,6 @@ import { IReaderSettings, IReaderSettingsGlobal, ProgressBarPosition, - ProgressBarPositionAutoVertical, ProgressBarType, ReaderBackgroundColor, ReaderExitMode, @@ -74,8 +73,8 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = { tapZoneInvertMode: { vertical: false, horizontal: false }, progressBarType: ProgressBarType.STANDARD, progressBarSize: 4, - progressBarPosition: ProgressBarPosition.BOTTOM, - progressBarPositionAutoVertical: ProgressBarPositionAutoVertical.RIGHT, + progressBarPosition: ProgressBarPosition.AUTO, + progressBarPositionAutoVertical: ProgressBarPosition.RIGHT, pageScaleMode: ReaderPageScaleMode.ORIGINAL, shouldStretchPage: false, shouldOffsetDoubleSpreads: false, @@ -150,6 +149,8 @@ export const READER_PROGRESS_BAR_POSITION_TO_PLACEMENT: Record = { diff --git a/src/modules/reader/types/Reader.types.ts b/src/modules/reader/types/Reader.types.ts index 1d19c602..df5237bb 100644 --- a/src/modules/reader/types/Reader.types.ts +++ b/src/modules/reader/types/Reader.types.ts @@ -20,16 +20,20 @@ export enum ProgressBarType { } export enum ProgressBarPosition { + AUTO, BOTTOM, LEFT, RIGHT, } -export enum ProgressBarPositionAutoVertical { - OFF = -1, - LEFT = ProgressBarPosition.LEFT, - RIGHT = ProgressBarPosition.RIGHT, -} +type TProgressBarPositionAutoVertical = Exclude< + ProgressBarPosition, + ProgressBarPosition.BOTTOM | ProgressBarPosition.AUTO +>; +export const ProgressBarPositionAutoVertical = { + [ProgressBarPosition.LEFT]: ProgressBarPosition.LEFT, + [ProgressBarPosition.RIGHT]: ProgressBarPosition.RIGHT, +} satisfies Record; export enum ReadingDirection { LTR, @@ -125,7 +129,7 @@ export interface IReaderSettingsGlobal { */ progressBarSize: number; progressBarPosition: ProgressBarPosition; - progressBarPositionAutoVertical: ProgressBarPositionAutoVertical; + progressBarPositionAutoVertical: TProgressBarPositionAutoVertical; shouldShowPageNumber: boolean; isStaticNav: boolean; backgroundColor: ReaderBackgroundColor; diff --git a/src/modules/reader/utils/ReaderSettings.utils.tsx b/src/modules/reader/utils/ReaderSettings.utils.tsx index e408620a..e709d9a0 100644 --- a/src/modules/reader/utils/ReaderSettings.utils.tsx +++ b/src/modules/reader/utils/ReaderSettings.utils.tsx @@ -66,19 +66,19 @@ export const getPagerForReadingMode = ( export const getProgressBarPosition = ( progressBarPosition: ProgressBarPosition, - progressBarPositionAutoVertical: ProgressBarPositionAutoVertical, + progressBarPositionAutoVertical: keyof typeof 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; +): Exclude => { + if (progressBarPosition !== ProgressBarPosition.AUTO) { + return progressBarPosition; } - return progressBarPosition; + const isVerticalSpaceLarger = window.innerHeight - topOffset - bottomOffset > window.innerWidth; + + if (isVerticalSpaceLarger) { + return progressBarPositionAutoVertical; + } + + return ProgressBarPosition.BOTTOM; };