Structure "reader" in sub-features

2025-08-16 02:02:13 +02:00
parent fc12f5dfd3
commit f548ba9502
140 changed files with 435 additions and 429 deletions
--- a/src/features/reader/settings/layout/components/ReaderSettingPageGap.tsx
+++ b/src/features/reader/settings/layout/components/ReaderSettingPageGap.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { IReaderSettings, IReaderSettingsWithDefaultFlag, ReadingMode } from '@/features/reader/Reader.types.ts';
+import { SliderInput } from '@/features/core/components/inputs/SliderInput.tsx';
+import { DEFAULT_READER_SETTINGS, PAGE_GAP } from '@/features/reader/settings/ReaderSettings.constants.tsx';
+import { isContinuousReadingMode } from '@/features/reader/settings/ReaderSettings.utils.tsx';
+import { MultiValueButtonDefaultableProps } from '@/features/core/Core.types.ts';
+
+export const ReaderSettingPageGap = ({
+    pageGap,
+    readingMode,
+    isDefaultable,
+    onDefault,
+    updateSetting,
+}: Pick<IReaderSettingsWithDefaultFlag, 'pageGap' | 'readingMode'> &
+    Pick<MultiValueButtonDefaultableProps<IReaderSettings['pageGap']>, 'isDefaultable' | 'onDefault'> & {
+        updateSetting: (gap: number, commit: boolean) => void;
+    }) => {
+    const { t } = useTranslation();
+
+    const isChangeable = readingMode.value !== ReadingMode.WEBTOON && isContinuousReadingMode(readingMode.value);
+    if (!isChangeable) {
+        return null;
+    }
+
+    return (
+        <SliderInput
+            label={t('reader.settings.label.page_gap')}
+            value={t('global.value', { value: pageGap.value, unit: t('global.unit.px') })}
+            onDefault={isDefaultable ? onDefault : undefined}
+            slotProps={{
+                slider: {
+                    defaultValue: DEFAULT_READER_SETTINGS.pageGap,
+                    value: pageGap.value,
+                    step: PAGE_GAP.step,
+                    min: PAGE_GAP.min,
+                    max: PAGE_GAP.max,
+                    onChange: (_, value) => {
+                        updateSetting(value as number, false);
+                    },
+                    onChangeCommitted: (_, value) => {
+                        updateSetting(value as number, true);
+                    },
+                },
+            }}
+        />
+    );
+};
--- a/src/features/reader/settings/layout/components/ReaderSettingPageScaleMode.tsx
+++ b/src/features/reader/settings/layout/components/ReaderSettingPageScaleMode.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { IReaderSettings, IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
+import {
+    PAGE_SCALE_VALUE_TO_DISPLAY_DATA,
+    READER_PAGE_SCALE_MODE_VALUES,
+} from '@/features/reader/settings/ReaderSettings.constants.tsx';
+import { ButtonSelectInput } from '@/features/core/components/inputs/ButtonSelectInput.tsx';
+import { MultiValueButtonDefaultableProps } from '@/features/core/Core.types.ts';
+
+export const ReaderSettingPageScaleMode = ({
+    pageScaleMode,
+    setPageScaleMode,
+    ...buttonSelectInputProps
+}: Pick<IReaderSettingsWithDefaultFlag, 'pageScaleMode'> &
+    Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
+        setPageScaleMode: (mode: IReaderSettings['pageScaleMode']) => void;
+    }) => {
+    const { t } = useTranslation();
+
+    return (
+        <ButtonSelectInput
+            {...buttonSelectInputProps}
+            label={t('reader.settings.page_scale.title')}
+            value={pageScaleMode.isDefault ? undefined : pageScaleMode.value}
+            defaultValue={pageScaleMode.isDefault ? pageScaleMode.value : undefined}
+            values={READER_PAGE_SCALE_MODE_VALUES}
+            setValue={setPageScaleMode}
+            valueToDisplayData={PAGE_SCALE_VALUE_TO_DISPLAY_DATA}
+        />
+    );
+};
--- a/src/features/reader/settings/layout/components/ReaderSettingProfileSettings.tsx
+++ b/src/features/reader/settings/layout/components/ReaderSettingProfileSettings.tsx
@@ -0,0 +1,59 @@
+/*
+ * 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 Stack from '@mui/material/Stack';
+import ListSubheader from '@mui/material/ListSubheader';
+import { ComponentProps, useMemo } from 'react';
+import Typography from '@mui/material/Typography';
+import { ReaderLayoutSettings } from '@/features/reader/settings/layout/ReaderLayoutSettings.tsx';
+import { useDefaultReaderSettingsWithDefaultFlag } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
+import { ReadingMode } from '@/features/reader/Reader.types.ts';
+
+export const ReaderSettingProfileSettings = ({
+    profile,
+    title,
+    updateSetting,
+    isSeriesMode,
+    ...props
+}: Pick<ComponentProps<typeof ReaderLayoutSettings>, 'updateSetting' | 'isSeriesMode'> & {
+    profile: ReadingMode;
+    title: string;
+}) => {
+    const { settings } = useDefaultReaderSettingsWithDefaultFlag(profile);
+
+    const adjustedSettings = useMemo(
+        () => ({
+            ...settings,
+            readingMode: {
+                value: profile,
+                isDefault: true,
+            },
+        }),
+        [settings, profile],
+    );
+
+    return (
+        <Stack sx={{ gap: 2 }}>
+            {!isSeriesMode ? (
+                <ListSubheader component="div" id={`${profile}-settings`}>
+                    {title}
+                </ListSubheader>
+            ) : (
+                <Typography>{title}</Typography>
+            )}
+            <Stack sx={{ px: Number(!isSeriesMode) * 2 }}>
+                <ReaderLayoutSettings
+                    {...props}
+                    setShowPreview={() => {}}
+                    settings={adjustedSettings}
+                    updateSetting={(setting, value, commit) => updateSetting(setting, value, commit, true, profile)}
+                />
+            </Stack>
+        </Stack>
+    );
+};
--- a/src/features/reader/settings/layout/components/ReaderSettingReadingDirection.tsx
+++ b/src/features/reader/settings/layout/components/ReaderSettingReadingDirection.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 ArrowCircleLeftIcon from '@mui/icons-material/ArrowCircleLeft';
+import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
+import { useTranslation } from 'react-i18next';
+import { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
+import { MultiValueButtonDefaultableProps, ValueToDisplayData } from '@/features/core/Core.types.ts';
+import { ButtonSelectInput } from '@/features/core/components/inputs/ButtonSelectInput.tsx';
+
+const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReadingDirection> = {
+    [ReadingDirection.LTR]: {
+        title: 'reader.settings.reading_direction.ltr',
+        icon: <ArrowCircleRightIcon />,
+    },
+    [ReadingDirection.RTL]: {
+        title: 'reader.settings.reading_direction.rtl',
+        icon: <ArrowCircleLeftIcon />,
+    },
+};
+
+const READING_DIRECTION_VALUES = Object.values(ReadingDirection).filter((value) => typeof value === 'number');
+
+export const ReaderSettingReadingDirection = ({
+    readingDirection,
+    setReadingDirection,
+    ...buttonSelectInputProps
+}: Pick<IReaderSettingsWithDefaultFlag, 'readingDirection'> &
+    Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
+        setReadingDirection: (readingDirection: ReadingDirection) => void;
+    }) => {
+    const { t } = useTranslation();
+
+    return (
+        <ButtonSelectInput
+            {...buttonSelectInputProps}
+            label={t('reader.settings.label.reading_direction')}
+            value={readingDirection.isDefault ? undefined : readingDirection.value}
+            defaultValue={readingDirection.isDefault ? readingDirection.value : undefined}
+            values={READING_DIRECTION_VALUES}
+            setValue={setReadingDirection}
+            valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+        />
+    );
+};
--- a/src/features/reader/settings/layout/components/ReaderSettingReadingMode.tsx
+++ b/src/features/reader/settings/layout/components/ReaderSettingReadingMode.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { IReaderSettingsWithDefaultFlag, ReadingMode } from '@/features/reader/Reader.types.ts';
+import {
+    READING_MODE_VALUE_TO_DISPLAY_DATA,
+    READING_MODE_VALUES,
+} from '@/features/reader/settings/ReaderSettings.constants.tsx';
+import { ButtonSelectInput } from '@/features/core/components/inputs/ButtonSelectInput.tsx';
+import { MultiValueButtonDefaultableProps } from '@/features/core/Core.types.ts';
+
+export const ReaderSettingReadingMode = ({
+    readingMode,
+    setReadingMode,
+    ...buttonSelectInputProps
+}: Pick<IReaderSettingsWithDefaultFlag, 'readingMode'> &
+    Pick<MultiValueButtonDefaultableProps<ReadingMode>, 'isDefaultable' | 'onDefault'> & {
+        setReadingMode: (mode: ReadingMode) => void;
+    }) => {
+    const { t } = useTranslation();
+
+    return (
+        <ButtonSelectInput
+            {...buttonSelectInputProps}
+            label={t('reader.settings.label.reading_mode')}
+            value={readingMode.isDefault ? undefined : readingMode.value}
+            defaultValue={readingMode.isDefault ? readingMode.value : undefined}
+            values={READING_MODE_VALUES}
+            setValue={setReadingMode}
+            valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}
+        />
+    );
+};
--- a/src/features/reader/settings/layout/components/ReaderSettingStretchPage.tsx
+++ b/src/features/reader/settings/layout/components/ReaderSettingStretchPage.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import { IReaderSettings } from '@/features/reader/Reader.types.ts';
+import { READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED } from '@/features/reader/settings/ReaderSettings.constants.tsx';
+
+export const ReaderSettingStretchPage = ({
+    pageScaleMode,
+    shouldStretchPage,
+    setShouldStretchPage,
+}: Pick<IReaderSettings, 'pageScaleMode' | 'shouldStretchPage'> & {
+    setShouldStretchPage: (mode: IReaderSettings['shouldStretchPage']) => void;
+}) => {
+    const { t } = useTranslation();
+
+    if (!READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode]) {
+        return null;
+    }
+
+    return (
+        <Box>
+            <Button
+                onClick={() => setShouldStretchPage(!shouldStretchPage)}
+                variant={shouldStretchPage ? 'contained' : 'outlined'}
+            >
+                {t('reader.settings.page_scale.stretch')}
+            </Button>
+        </Box>
+    );
+};
--- a/src/features/reader/settings/layout/components/ReaderSettingTapZoneInvertMode.tsx
+++ b/src/features/reader/settings/layout/components/ReaderSettingTapZoneInvertMode.tsx
@@ -0,0 +1,101 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { MultiValueButtonDefaultableProps, ValueToDisplayData } from '@/features/core/Core.types.ts';
+import { IReaderSettings, IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
+import { TapZoneInvertMode } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import { ButtonSelectInput } from '@/features/core/components/inputs/ButtonSelectInput.tsx';
+
+enum TapZonesInvertOption {
+    NONE,
+    HORIZONTAL,
+    VERTICAL,
+    BOTH,
+}
+
+const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<TapZonesInvertOption> = {
+    [TapZonesInvertOption.NONE]: {
+        title: 'global.label.none',
+        icon: null,
+    },
+    [TapZonesInvertOption.HORIZONTAL]: {
+        title: 'global.label.horizontal',
+        icon: null,
+    },
+    [TapZonesInvertOption.VERTICAL]: {
+        title: 'global.label.vertical',
+        icon: null,
+    },
+    [TapZonesInvertOption.BOTH]: {
+        title: 'global.label.both',
+        icon: null,
+    },
+};
+
+const TAP_ZONES_INVERT_OPTION_VALUES = Object.values(TapZonesInvertOption).filter((value) => typeof value === 'number');
+
+const TAP_ZONES_INVERT_OPTION_TO_SETTING: Record<TapZonesInvertOption, TapZoneInvertMode> = {
+    [TapZonesInvertOption.NONE]: {
+        vertical: false,
+        horizontal: false,
+    },
+    [TapZonesInvertOption.HORIZONTAL]: {
+        vertical: false,
+        horizontal: true,
+    },
+    [TapZonesInvertOption.VERTICAL]: {
+        vertical: true,
+        horizontal: false,
+    },
+    [TapZonesInvertOption.BOTH]: {
+        vertical: true,
+        horizontal: true,
+    },
+};
+
+const convertTapZoneInvertModeToOption = ({ vertical, horizontal }: TapZoneInvertMode): TapZonesInvertOption => {
+    if (vertical && horizontal) {
+        return TapZonesInvertOption.BOTH;
+    }
+
+    if (vertical) {
+        return TapZonesInvertOption.VERTICAL;
+    }
+
+    if (horizontal) {
+        return TapZonesInvertOption.HORIZONTAL;
+    }
+
+    return TapZonesInvertOption.NONE;
+};
+
+export const ReaderSettingTapZoneInvertMode = ({
+    tapZoneInvertMode,
+    setTapZoneInvertMode,
+    ...buttonSelectInputProps
+}: Pick<IReaderSettingsWithDefaultFlag, 'tapZoneInvertMode'> &
+    Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
+        setTapZoneInvertMode: (invert: IReaderSettings['tapZoneInvertMode']) => void;
+    }) => {
+    const { t } = useTranslation();
+
+    const tapZonesInvertOption = convertTapZoneInvertModeToOption(tapZoneInvertMode.value);
+
+    return (
+        <ButtonSelectInput
+            {...buttonSelectInputProps}
+            label={t('reader.settings.tap_zones.invert')}
+            value={tapZoneInvertMode.isDefault ? undefined : tapZonesInvertOption}
+            defaultValue={tapZoneInvertMode.isDefault ? tapZonesInvertOption : undefined}
+            values={TAP_ZONES_INVERT_OPTION_VALUES}
+            setValue={(value) => setTapZoneInvertMode(TAP_ZONES_INVERT_OPTION_TO_SETTING[value])}
+            valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+        />
+    );
+};
--- a/src/features/reader/settings/layout/components/ReaderSettingTapZoneLayout.tsx
+++ b/src/features/reader/settings/layout/components/ReaderSettingTapZoneLayout.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { TapZoneLayouts } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import { MultiValueButtonDefaultableProps, ValueToDisplayData } from '@/features/core/Core.types.ts';
+import { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
+import { ButtonSelectInput } from '@/features/core/components/inputs/ButtonSelectInput.tsx';
+
+const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<TapZoneLayouts> = {
+    [TapZoneLayouts.EDGE]: {
+        title: 'reader.settings.tap_zones.edge',
+        icon: null,
+    },
+    [TapZoneLayouts.KINDLE]: {
+        title: 'reader.settings.tap_zones.kindle',
+        icon: null,
+    },
+    [TapZoneLayouts.L_SHAPE]: {
+        title: 'reader.settings.tap_zones.l_shape',
+        icon: null,
+    },
+    [TapZoneLayouts.RIGHT_LEFT]: {
+        title: 'reader.settings.tap_zones.right_left',
+        icon: null,
+    },
+    [TapZoneLayouts.DISABLED]: {
+        title: 'global.label.disabled',
+        icon: null,
+    },
+};
+
+const READER_TAP_ZONE_LAYOUT_VALUES = Object.values(TapZoneLayouts).filter((value) => typeof value === 'number');
+
+export const ReaderSettingTapZoneLayout = ({
+    tapZoneLayout,
+    setTapZoneLayout,
+    ...buttonSelectInputProps
+}: Pick<IReaderSettingsWithDefaultFlag, 'tapZoneLayout'> &
+    Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
+        setTapZoneLayout: (layout: TapZoneLayouts) => void;
+    }) => {
+    const { t } = useTranslation();
+
+    return (
+        <ButtonSelectInput
+            {...buttonSelectInputProps}
+            label={t('reader.settings.tap_zones.title')}
+            value={tapZoneLayout.isDefault ? undefined : tapZoneLayout.value}
+            defaultValue={tapZoneLayout.isDefault ? tapZoneLayout.value : undefined}
+            values={READER_TAP_ZONE_LAYOUT_VALUES}
+            setValue={setTapZoneLayout}
+            valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+        />
+    );
+};
--- a/src/features/reader/settings/layout/components/ReaderSettingWidth.tsx
+++ b/src/features/reader/settings/layout/components/ReaderSettingWidth.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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 Stack from '@mui/material/Stack';
+import { useTranslation } from 'react-i18next';
+import { IReaderSettings } from '@/features/reader/Reader.types.ts';
+import { CheckboxInput } from '@/features/core/components/inputs/CheckboxInput.tsx';
+import { ReaderService } from '@/features/reader/services/ReaderService.ts';
+import { SliderInput } from '@/features/core/components/inputs/SliderInput.tsx';
+import { DEFAULT_READER_SETTINGS } from '@/features/reader/settings/ReaderSettings.constants.tsx';
+import { isReaderWidthEditable } from '@/features/reader/settings/ReaderSettings.utils.tsx';
+import { MultiValueButtonDefaultableProps } from '@/features/core/Core.types.ts';
+import { ResetButton } from '@/features/core/components/buttons/ResetButton.tsx';
+
+export const ReaderSettingWidth = ({
+    readerWidth,
+    pageScaleMode,
+    isDefaultable,
+    onDefault,
+    updateSetting,
+    setTransparent,
+}: Pick<IReaderSettings, 'readerWidth' | 'pageScaleMode'> &
+    Pick<MultiValueButtonDefaultableProps<IReaderSettings['readerWidth']['value']>, 'isDefaultable' | 'onDefault'> & {
+        updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
+        setTransparent?: (transparent: boolean) => void;
+    }) => {
+    const { t } = useTranslation();
+
+    if (!isReaderWidthEditable(pageScaleMode)) {
+        return null;
+    }
+
+    return (
+        <Stack>
+            <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <CheckboxInput
+                    label={t('reader.settings.label.limit_reader_width')}
+                    checked={readerWidth.enabled}
+                    onChange={(_, checked) => updateSetting('readerWidth', { ...readerWidth, enabled: checked }, true)}
+                />
+                {isDefaultable && <ResetButton onClick={onDefault} variant="outlined" />}
+            </Stack>
+            {readerWidth.enabled && (
+                <SliderInput
+                    label={t('reader.settings.label.reader_width')}
+                    value={t('global.value', { value: readerWidth.value, unit: '%' })}
+                    slotProps={{
+                        slider: {
+                            defaultValue: DEFAULT_READER_SETTINGS.readerWidth.value,
+                            value: readerWidth.value,
+                            step: 1,
+                            min: 10,
+                            max: 100,
+                            onChange: (_, value) => {
+                                setTransparent?.(true);
+                                updateSetting('readerWidth', { ...readerWidth, value: value as number }, false);
+                            },
+                            onChangeCommitted: (_, value) => {
+                                setTransparent?.(false);
+                                updateSetting('readerWidth', { ...readerWidth, value: value as number }, true);
+                            },
+                        },
+                    }}
+                />
+            )}
+        </Stack>
+    );
+};