ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add "auto" progress bar position

Browse Source 
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
This commit is contained in:
schroda
2025-01-11 02:02:48 +01:00
parent f032f971ac
commit 7901961821
7 changed files with 64 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/modules/metadata/Metadata.constants.ts
View File

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

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

@@ -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 = ({

27
src/modules/reader/components/settings/general/ReaderSettingProgressBarPosition.tsx
View File

@@ -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}
/>
)}
</>

7
src/modules/reader/constants/ReaderSettings.constants.tsx
View File

@@ -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> = {

16
src/modules/reader/types/Reader.types.ts
View File

@@ -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;

22
src/modules/reader/utils/ReaderSettings.utils.tsx
View File

@@ -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;
};