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

Add "safe area inset" setting to reader

Browse Source
This commit is contained in:
schroda
2026-05-08 01:39:48 +02:00
parent 6d3eb4266b
commit d1e70c2609
15 changed files with 153 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@@ -13,7 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
- (**Server Update**) Add an option to disable showing information when the server got updated
- (**Manga**) Add an option to include client data during migration
- (**Migrate**) Add bulk migration
- (**Reader**) Respect the safe inset area (e.g., top-notch) of devices
- (**Reader**) Add an option to apply safe area paddings (e.g., top-notch, rounded corners)
### Changed

34
src/base/Base.types.ts
View File

@@ -20,42 +20,34 @@ export enum DirectionOffset {
NEXT = 1,
}
interface DisplayDataTranslation {
isTitleString?: never;
title: MessageDescriptor;
interface DisplayData {
title: MessageDescriptor | string;
icon: ReactNode;
}
interface DisplayDataString {
isTitleString: true;
title: string;
icon: ReactNode;
}
type DisplayData = DisplayDataTranslation | DisplayDataString;
export type ValueToDisplayData<Value extends string | number> = Record<Value, DisplayData>;
export interface MultiValueButtonBaseProps<Value extends string | number> {
export interface MultiValueButtonBaseProps<Value extends string | number, MultiValue extends Value | Value[] = Value> {
tooltip?: string;
value: Value;
value: MultiValue;
defaultValue?: Value;
values: Value[];
setValue: (value: Value) => void;
setValue: (value: MultiValue) => void;
valueToDisplayData: ValueToDisplayData<Value>;
}
export interface MultiValueButtonDefaultableProps<Value extends string | number> extends OptionalProperty<
MultiValueButtonBaseProps<Value>,
'value'
> {
export interface MultiValueButtonDefaultableProps<
Value extends string | number,
MultiValue extends Value | Value[] = Value,
> extends OptionalProperty<MultiValueButtonBaseProps<Value, MultiValue>, 'value'> {
isDefaultable?: boolean;
onDefault?: () => void;
}
export type MultiValueButtonProps<Value extends string | number> =
| (MultiValueButtonBaseProps<Value> & PropertiesNever<MultiValueButtonDefaultableProps<Value>>)
| MultiValueButtonDefaultableProps<Value>;
export type MultiValueButtonProps<Value extends string | number, MultiValue extends Value | Value[] = Value> =
| (MultiValueButtonBaseProps<Value, MultiValue> &
PropertiesNever<MultiValueButtonDefaultableProps<Value, MultiValue>>)
| MultiValueButtonDefaultableProps<Value, MultiValue>;
export enum ScrollOffset {
BACKWARD,

25
src/base/components/buttons/ButtonSelect.tsx
View File

@@ -13,7 +13,7 @@ import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
import type { MultiValueButtonProps } from '@/base/Base.types.ts';
import { Superscript } from '@/base/components/texts/Superscript.tsx';
export const ButtonSelect = <Value extends string | number>({
export const ButtonSelect = <Value extends string | number, MultiValue extends Value | Value[] = Value>({
value,
values,
defaultValue,
@@ -21,7 +21,7 @@ export const ButtonSelect = <Value extends string | number>({
valueToDisplayData,
isDefaultable,
onDefault,
}: MultiValueButtonProps<Value>) => {
}: MultiValueButtonProps<Value, MultiValue>) => {
const { t } = useLingui();
return (
@@ -33,16 +33,31 @@ export const ButtonSelect = <Value extends string | number>({
)}
{values.map((displayValue) => {
const isDefault = value === undefined && displayValue === defaultValue;
const isMultiSelect = Array.isArray(value);
const isSelected = isMultiSelect ? value.includes(displayValue) : displayValue === value;
const text = valueToDisplayData[displayValue].isTitleString
const newValue = (() => {
if (value === undefined) {
return [displayValue];
}
if (isMultiSelect) {
return isSelected ? value.filter((v) => v !== displayValue) : [...value, displayValue];
}
return displayValue;
})() as MultiValue;
const text =
typeof valueToDisplayData[displayValue].title === 'string'
? valueToDisplayData[displayValue].title
: t(valueToDisplayData[displayValue].title);
return (
<CustomTooltip key={displayValue} title={isDefault ? t`Active setting` : ''}>
<Button
onClick={() => setValue(displayValue)}
variant={displayValue === value ? 'contained' : 'outlined'}
onClick={() => setValue(newValue)}
variant={isSelected ? 'contained' : 'outlined'}
startIcon={valueToDisplayData[displayValue].icon}
>
{isDefault ? <Superscript superscript="*" text={text} /> : text}

4
src/base/components/buttons/ValueRotationButton.tsx
View File

@@ -53,7 +53,7 @@ export const ValueRotationButton = <Value extends string | number>({
<Superscript
superscript={`(${t`Default`})`}
text={
valueToDisplayData[defaultValue].isTitleString
typeof valueToDisplayData[defaultValue].title === 'string'
? valueToDisplayData[defaultValue].title
: t(valueToDisplayData[defaultValue].title)
}
@@ -77,7 +77,7 @@ export const ValueRotationButton = <Value extends string | number>({
startIcon={valueToDisplayData[value].icon}
size="large"
>
{valueToDisplayData[value].isTitleString
{typeof valueToDisplayData[value].title === 'string'
? valueToDisplayData[value].title
: t(valueToDisplayData[value].title)}
</Button>

4
src/base/components/inputs/ButtonSelectInput.tsx
View File

@@ -12,11 +12,11 @@ import type { ComponentProps } from 'react';
import { ButtonSelect } from '@/base/components/buttons/ButtonSelect.tsx';
export const ButtonSelectInput = <Value extends string | number>({
export const ButtonSelectInput = <Value extends string | number, MultiValue extends Value | Value[] = Value>({
label,
description,
...buttonSelectProps
}: ComponentProps<typeof ButtonSelect<Value>> & { label: string; description?: string }) => (
}: ComponentProps<typeof ButtonSelect<Value, MultiValue>> & { label: string; description?: string }) => (
<Stack>
<Typography>{label}</Typography>
{description && (

5
src/features/metadata/Metadata.constants.ts
View File

@@ -8,7 +8,7 @@
import deepmerge from '@mui/utils/deepmerge';
import type { AppMetadataKeys, IMetadataMigration } from '@/features/metadata/Metadata.types.ts';
import type { IReaderSettings, ReaderCustomFilter } from '@/features/reader/Reader.types.ts';
import type { IReaderSettings, ReaderCustomFilter, SafeAreaInset } from '@/features/reader/Reader.types.ts';
import { ProgressBarPosition, ReaderPageScaleMode, ReadingMode } from '@/features/reader/Reader.types.ts';
import {
AUTO_SCROLL_SPEED,
@@ -394,6 +394,9 @@ export const APP_METADATA: Record<
return locale;
},
},
safeAreaInset: {
convert: convertToObject<SafeAreaInset>,
},
} as const;
export const VALID_APP_METADATA_KEYS = Object.keys(APP_METADATA);

8
src/features/reader/Reader.types.ts
View File

@@ -136,6 +136,13 @@ export enum ReaderScrollAmount {
LARGE = 95,
}
export interface SafeAreaInset {
top: boolean;
right: boolean;
bottom: boolean;
left: boolean;
}
export interface IReaderSettingsGlobal {
overlayMode: ReaderOverlayMode;
exitMode: ReaderExitMode;
@@ -169,6 +176,7 @@ export interface IReaderSettingsGlobal {
scrollAmount: ReaderScrollAmount;
shouldUseInfiniteScroll: boolean;
shouldShowTransitionPage: boolean;
safeAreaInset: SafeAreaInset;
}
export interface IReaderSettingsManga {

4
src/features/reader/overlay/components/ReaderPageNumber.tsx
View File

@@ -36,6 +36,7 @@ const BaseReaderPageNumber = ({
shouldShowPageNumber: state.shouldShowPageNumber,
progressBarType: state.progressBarType,
}));
const safeAreaInset = useReaderSettingsStore((state) => state.safeAreaInset);
const isMaximized = useReaderProgressBarStore('isMaximized');
const pageName = useMemo(() => {
@@ -68,7 +69,8 @@ const BaseReaderPageNumber = ({
position: 'fixed',
left: readerNavBarWidth,
right: 0,
bottom: (theme) => `calc(${theme.spacing(1)} + max(${scrollbar.xSize}px, env(safe-area-inset-bottom)))`,
bottom: (theme) =>
`calc(${theme.spacing(1)} + max(${scrollbar.xSize}px, ${safeAreaInset.bottom ? 'env(safe-area-inset-bottom)' : '0px'}))`,
alignItems: 'center',
transition: (theme) => `left 0.${theme.transitions.duration.shortest}s`,
}}

10
src/features/reader/screens/Reader.tsx
View File

@@ -74,7 +74,9 @@ const BaseReader = ({
'tapZoneInvertMode',
'shouldShowReadingModePreview',
'shouldShowTapZoneLayoutPreview',
'safeAreaInset',
);
const safeAreaInset = useReaderSettingsStore((state) => state.safeAreaInset);
const scrollElementRef = useRef<HTMLDivElement | null>(null);
@@ -228,10 +230,10 @@ const BaseReader = ({
maxWidth: `calc(100vw - ${readerNavBarWidth}px)`,
width: `calc(100vw - ${readerNavBarWidth}px)`,
height: `100vh`,
pt: 'env(safe-area-inset-top)',
pb: 'env(safe-area-inset-bottom)',
pr: 'env(safe-area-inset-right)',
pl: 'env(safe-area-inset-left)',
pt: safeAreaInset.top ? 'env(safe-area-inset-top)' : undefined,
pb: safeAreaInset.bottom ? 'env(safe-area-inset-bottom)' : undefined,
pr: safeAreaInset.right ? 'env(safe-area-inset-right)' : undefined,
pl: safeAreaInset.left ? 'env(safe-area-inset-left)' : undefined,
marginLeft: `${readerNavBarWidth}px`,
transition: (theme) =>
`width 0.${theme.transitions.duration.shortest}s, margin-left 0.${theme.transitions.duration.shortest}s`,

7
src/features/reader/settings/ReaderSettings.constants.tsx
View File

@@ -155,6 +155,7 @@ const GLOBAL_READER_SETTING_OBJECT: Record<keyof IReaderSettingsGlobal, undefine
scrollAmount: undefined,
shouldUseInfiniteScroll: undefined,
shouldShowTransitionPage: undefined,
safeAreaInset: undefined,
};
export const GLOBAL_READER_SETTING_KEYS = Object.keys(GLOBAL_READER_SETTING_OBJECT);
@@ -242,6 +243,12 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
scrollAmount: ReaderScrollAmount.LARGE,
shouldUseInfiniteScroll: true,
shouldShowTransitionPage: true,
safeAreaInset: {
top: true,
right: true,
bottom: true,
left: true,
},
};
export const READER_PROGRESS_BAR_POSITION_TO_PLACEMENT: Record<ProgressBarPosition, TooltipProps['placement']> = {

1
src/features/reader/settings/ReaderSettingsMetadata.ts
View File

@@ -84,6 +84,7 @@ const convertSettingsToMetadata = (
readerWidth: JSON.stringify(settings.readerWidth),
hotkeys: JSON.stringify(settings.hotkeys),
autoScroll: JSON.stringify(settings.autoScroll),
safeAreaInset: JSON.stringify(settings.autoScroll),
});
export const DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG = convertToSettingsWithDefaultFlag(

5
src/features/reader/settings/general/ReaderGeneralSettings.tsx
View File

@@ -16,6 +16,7 @@ import { ProgressBarType, ReaderOverlayMode } from '@/features/reader/Reader.typ
import { ReaderSettingOverlayMode } from '@/features/reader/overlay/settings/ReaderSettingOverlayMode.tsx';
import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
import { ReaderSettingBackgroundColor } from '@/features/reader/settings/general/components/ReaderSettingBackgroundColor.tsx';
import { ReaderSettingSafeAreaInset } from '@/features/reader/settings/general/components/ReaderSettingSafeAreaInset.tsx';
export const ReaderGeneralSettings = ({
overlayMode,
@@ -59,6 +60,10 @@ export const ReaderGeneralSettings = ({
onChange={(_, checked) => updateSetting('shouldShowPageNumber', checked)}
/>
)}
<ReaderSettingSafeAreaInset
safeAreaInset={settings.safeAreaInset}
updateSetting={(value) => updateSetting('safeAreaInset', value)}
/>
</Stack>
);
};

63
src/features/reader/settings/general/components/ReaderSettingSafeAreaInset.tsx Normal file
View File

@@ -0,0 +1,63 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useLingui } from '@lingui/react/macro';
import { msg } from '@lingui/core/macro';
import type { ValueToDisplayData } from '@/base/Base.types.ts';
import { ButtonSelectInput } from '@/base/components/inputs/ButtonSelectInput.tsx';
import type { IReaderSettingsWithDefaultFlag, SafeAreaInset } from '@/features/reader/Reader.types.ts';
import { DEFAULT_READER_SETTINGS } from '@/features/reader/settings/ReaderSettings.constants.tsx';
const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<keyof SafeAreaInset> = {
top: {
title: msg`Top`,
icon: null,
},
right: {
title: msg`Right`,
icon: null,
},
bottom: {
title: msg`Bottom`,
icon: null,
},
left: {
title: msg`Left`,
icon: null,
},
};
const READER_SAFE_AREA_INSET_VALUES = Object.keys(DEFAULT_READER_SETTINGS.safeAreaInset) as (keyof SafeAreaInset)[];
export const ReaderSettingSafeAreaInset = ({
safeAreaInset,
updateSetting,
}: Pick<IReaderSettingsWithDefaultFlag, 'safeAreaInset'> & {
updateSetting: (safeAreaInset: SafeAreaInset) => void;
}) => {
const { t } = useLingui();
return (
<ButtonSelectInput
label={t`Apply safe area padding`}
description={t`Prevents content from overlapping device cutouts and screen edges`}
value={Object.entries(safeAreaInset)
.filter(([, enabled]) => enabled)
.map(([key]) => key as keyof SafeAreaInset)}
values={READER_SAFE_AREA_INSET_VALUES}
setValue={(values) =>
updateSetting(
Object.fromEntries(
READER_SAFE_AREA_INSET_VALUES.map((key) => [key, values.includes(key)]),
) as unknown as SafeAreaInset,
)
}
valueToDisplayData={VALUE_TO_DISPLAY_DATA}
/>
);
};

2
src/features/reader/settings/layout/components/ReaderSettingTapZoneInvertMode.tsx
View File

@@ -93,7 +93,7 @@ export const ReaderSettingTapZoneInvertMode = ({
const tapZonesInvertOption = convertTapZoneInvertModeToOption(tapZoneInvertMode.value);
return (
<ButtonSelectInput
<ButtonSelectInput<TapZonesInvertOption>
{...buttonSelectInputProps}
label={t`Invert tap zones`}
value={tapZoneInvertMode.isDefault ? undefined : tapZonesInvertOption}

15
src/i18n/locales/en.po
View File

@@ -414,6 +414,10 @@ msgstr "Also remove from {0}"
msgid "Appearance"
msgstr "Appearance"
#: src/features/reader/settings/general/components/ReaderSettingSafeAreaInset.tsx
msgid "Apply safe area padding"
msgstr "Apply safe area padding"
#: src/features/migration/MigrationManager.ts
msgid "Are you sure you want to abort the migration?"
msgstr "Are you sure you want to abort the migration?"
@@ -587,6 +591,7 @@ msgid "Both"
msgstr "Both"
#: src/features/reader/overlay/progress-bar/settings/components/ReaderSettingProgressBarPosition.tsx
#: src/features/reader/settings/general/components/ReaderSettingSafeAreaInset.tsx
msgid "Bottom"
msgstr "Bottom"
@@ -2052,6 +2057,7 @@ msgid "Layout"
msgstr "Layout"
#: src/features/reader/overlay/progress-bar/settings/components/ReaderSettingProgressBarPosition.tsx
#: src/features/reader/settings/general/components/ReaderSettingSafeAreaInset.tsx
msgid "Left"
msgstr "Left"
@@ -2623,6 +2629,10 @@ msgstr "Preload images"
msgid "Press keys"
msgstr "Press keys"
#: src/features/reader/settings/general/components/ReaderSettingSafeAreaInset.tsx
msgid "Prevents content from overlapping device cutouts and screen edges"
msgstr "Prevents content from overlapping device cutouts and screen edges"
#: src/features/settings/Settings.constants.ts
msgid "Preview"
msgstr "Preview"
@@ -2830,6 +2840,7 @@ msgid "Retry errored pages"
msgstr "Retry errored pages"
#: src/features/reader/overlay/progress-bar/settings/components/ReaderSettingProgressBarPosition.tsx
#: src/features/reader/settings/general/components/ReaderSettingSafeAreaInset.tsx
msgid "Right"
msgstr "Right"
@@ -3508,6 +3519,10 @@ msgstr "Toggle offset double spreads"
msgid "Toggle stretch image"
msgstr "Toggle stretch image"
#: src/features/reader/settings/general/components/ReaderSettingSafeAreaInset.tsx
msgid "Top"
msgstr "Top"
#: src/features/library/components/LibraryOptionsPanel.tsx
msgid "Total chapters"
msgstr "Total chapters"