Add "auto" progress bar position

Automatically choose the progress bar position based on the available space.
Previously it was only possible to automatically switch from a horizontal to a vertical position but not the other way around

src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx

@@ -41,6 +41,8 @@ const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, Slid
     [ProgressBarPosition.BOTTOM]: 'up',
     [ProgressBarPosition.LEFT]: 'right',
     [ProgressBarPosition.RIGHT]: 'left',
+    // should never get accessed
+    [ProgressBarPosition.AUTO]: 'left',
 };
 
 const BaseMobileReaderProgressBar = ({

src/modules/reader/components/settings/general/ReaderSettingProgressBarPosition.tsx

@@ -9,7 +9,7 @@
 import { useTranslation } from 'react-i18next';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
-import NotInterestedIcon from '@mui/icons-material/NotInterested';
+import AutoModeIcon from '@mui/icons-material/AutoMode';
 import {
     IReaderSettings,
     ProgressBarPosition,
@@ -19,6 +19,10 @@ import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
 import { ButtonSelectInput } from '@/modules/core/components/inputs/ButtonSelectInput.tsx';
 
 const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ProgressBarPosition> = {
+    [ProgressBarPosition.AUTO]: {
+        title: 'global.label.auto',
+        icon: <AutoModeIcon />,
+    },
     [ProgressBarPosition.BOTTOM]: {
         title: 'global.label.bottom',
         icon: <ArrowBackIosNewIcon sx={{ transform: 'rotate(90deg)' }} />,
@@ -35,17 +39,9 @@ const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ProgressBarPosition> = {
 
 const PROGRESS_BAR_POSITION_VALUES = Object.values(ProgressBarPosition).filter((value) => typeof value === 'number');
 
-const VALUE_TO_DISPLAY_DATA_AUTO_VERTICAL: ValueToDisplayData<ProgressBarPositionAutoVertical> = {
-    ...VALUE_TO_DISPLAY_DATA,
-    [ProgressBarPositionAutoVertical.OFF]: {
-        title: 'global.label.disabled',
-        icon: <NotInterestedIcon />,
-    },
-};
-
-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<keyof typeof ProgressBarPositionAutoVertical>;
 
 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 && (
                 <ButtonSelectInput
                     label={t('reader.settings.progress_bar.auto_vertical_position.title')}
-                    description={t('reader.settings.progress_bar.auto_vertical_position.description')}
                     value={progressBarPositionAutoVertical}
                     values={PROGRESS_BAR_AUTO_VERTICAL_POSITION_VALUES}
                     setValue={(position) => updateSetting('progressBarPositionAutoVertical', position)}
-                    valueToDisplayData={VALUE_TO_DISPLAY_DATA_AUTO_VERTICAL}
+                    valueToDisplayData={VALUE_TO_DISPLAY_DATA}
                 />
             )}
         </>

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<ProgressBarPositi
     [ProgressBarPosition.BOTTOM]: 'top',
     [ProgressBarPosition.LEFT]: 'right',
     [ProgressBarPosition.RIGHT]: 'left',
+    // should never get accessed
+    [ProgressBarPosition.AUTO]: 'left',
 };
 
 export const READING_DIRECTION_VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReadingDirection> = {

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<TProgressBarPositionAutoVertical, TProgressBarPositionAutoVertical>;
 
 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;

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<ProgressBarPosition, ProgressBarPosition.AUTO> => {
+    if (progressBarPosition !== ProgressBarPosition.AUTO) {
+        return progressBarPosition;
     }
 
-    return progressBarPosition;
+    const isVerticalSpaceLarger = window.innerHeight - topOffset - bottomOffset > window.innerWidth;
+
+    if (isVerticalSpaceLarger) {
+        return progressBarPositionAutoVertical;
+    }
+
+    return ProgressBarPosition.BOTTOM;
 };