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

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",

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}`,
+            },
+        ],
+    },
 ];

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> = {
+const PROGRESS_BAR_AUTO_VERTICAL_POSITION_VALUES = Object.values(
-    ...VALUE_TO_DISPLAY_DATA,
+    ProgressBarPositionAutoVertical,
-    [ProgressBarPositionAutoVertical.OFF]: {
+) as unknown as TupleUnion<keyof typeof ProgressBarPositionAutoVertical>;
-        title: 'global.label.disabled',
-        icon: <NotInterestedIcon />,
-    },
-};
-
-const PROGRESS_BAR_AUTO_VERTICAL_POSITION_VALUES = Object.values(ProgressBarPositionAutoVertical).filter(
-    (value) => typeof value === 'number',
-);
 
 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,
+    progressBarPosition: ProgressBarPosition.AUTO,
-    progressBarPositionAutoVertical: ProgressBarPositionAutoVertical.RIGHT,
+    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 {
+type TProgressBarPositionAutoVertical = Exclude<
-    OFF = -1,
+    ProgressBarPosition,
-    LEFT = ProgressBarPosition.LEFT,
+    ProgressBarPosition.BOTTOM | ProgressBarPosition.AUTO
-    RIGHT = ProgressBarPosition.RIGHT,
+>;
-}
+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 => {
+): Exclude<ProgressBarPosition, ProgressBarPosition.AUTO> => {
-    const isAutoVerticalEnabled =
+    if (progressBarPosition !== ProgressBarPosition.AUTO) {
-        progressBarPositionAutoVertical !== ProgressBarPositionAutoVertical.OFF &&
+        return progressBarPosition;
-        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;
+    const isVerticalSpaceLarger = window.innerHeight - topOffset - bottomOffset > window.innerWidth;
+
+    if (isVerticalSpaceLarger) {
+        return progressBarPositionAutoVertical;
+    }
+
+    return ProgressBarPosition.BOTTOM;
 };