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/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
@@ -0,0 +1,105 @@
+/*
+ * 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 Button from '@mui/material/Button';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { ReaderNavBarDesktopPageScale } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopPageScale.tsx';
+import { ReaderNavBarDesktopReadingMode } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx';
+import { ReaderNavBarDesktopOffsetDoubleSpread } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopOffsetDoubleSpread.tsx';
+import { ReaderNavBarDesktopReadingDirection } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingDirection.tsx';
+import { IReaderSettingsWithDefaultFlag, TReaderStateMangaContext } from '@/features/reader/Reader.types.ts';
+import { ReaderNavBarDesktopProps } from '@/features/reader/overlay/ReaderOverlay.types.ts';
+import { ReaderService } from '@/features/reader/services/ReaderService.ts';
+import { withPropsFrom } from '@/features/core/hoc/withPropsFrom.tsx';
+import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
+import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
+import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx';
+
+const BaseReaderNavBarDesktopQuickSettings = ({
+    manga,
+    readingMode,
+    shouldOffsetDoubleSpreads,
+    pageScaleMode,
+    shouldStretchPage,
+    readingDirection,
+    autoScroll,
+    openSettings,
+}: Pick<TReaderStateMangaContext, 'manga'> &
+    Pick<ReaderNavBarDesktopProps, 'openSettings'> &
+    Pick<
+        IReaderSettingsWithDefaultFlag,
+        | 'readingMode'
+        | 'shouldOffsetDoubleSpreads'
+        | 'pageScaleMode'
+        | 'shouldStretchPage'
+        | 'readingDirection'
+        | 'autoScroll'
+    >) => {
+    const { t } = useTranslation();
+
+    const updateSetting = ReaderService.useCreateUpdateSetting(manga ?? FALLBACK_MANGA);
+    const deleteSetting = ReaderService.useCreateDeleteSetting(manga ?? FALLBACK_MANGA);
+
+    return (
+        <Stack sx={{ gap: 1 }}>
+            <ReaderNavBarDesktopReadingMode
+                readingMode={readingMode}
+                setReadingMode={(value) => updateSetting('readingMode', value)}
+                isDefaultable
+                onDefault={() => deleteSetting('readingMode')}
+            />
+            <ReaderNavBarDesktopOffsetDoubleSpread
+                readingMode={readingMode.value}
+                shouldOffsetDoubleSpreads={shouldOffsetDoubleSpreads.value}
+                setShouldOffsetDoubleSpreads={(value) => updateSetting('shouldOffsetDoubleSpreads', value)}
+            />
+            <ReaderNavBarDesktopPageScale
+                pageScaleMode={pageScaleMode}
+                shouldStretchPage={shouldStretchPage}
+                updateSetting={updateSetting}
+                isDefaultable
+                onDefault={() => deleteSetting('pageScaleMode')}
+            />
+            <ReaderNavBarDesktopReadingDirection
+                readingDirection={readingDirection}
+                setReadingDirection={(value) => updateSetting('readingDirection', value)}
+                isDefaultable
+                onDefault={() => deleteSetting('readingDirection')}
+            />
+            <ReaderNavBarDesktopAutoScroll
+                autoScroll={autoScroll}
+                setAutoScroll={(...args) => updateSetting('autoScroll', ...args)}
+            />
+            <Button
+                onClick={() => openSettings()}
+                size="large"
+                sx={{ justifyContent: 'start', textTransform: 'none' }}
+                variant="contained"
+                startIcon={<SettingsIcon />}
+            >
+                {t('settings.title')}
+            </Button>
+        </Stack>
+    );
+};
+
+export const ReaderNavBarDesktopQuickSettings = withPropsFrom(
+    BaseReaderNavBarDesktopQuickSettings,
+    [useReaderStateMangaContext, ReaderService.useSettings],
+    [
+        'manga',
+        'readingMode',
+        'shouldOffsetDoubleSpreads',
+        'pageScaleMode',
+        'shouldStretchPage',
+        'readingDirection',
+        'autoScroll',
+    ],
+);
--- a/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopOffsetDoubleSpread.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopOffsetDoubleSpread.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 { OffsetDoubleSpreadIcon } from '@/assets/icons/svg/OffsetDoubleSpreadIcon.tsx';
+import { IReaderSettings } from '@/features/reader/Reader.types.ts';
+import { isOffsetDoubleSpreadPagesEditable } from '@/features/reader/settings/ReaderSettings.utils.tsx';
+
+export const ReaderNavBarDesktopOffsetDoubleSpread = ({
+    readingMode,
+    shouldOffsetDoubleSpreads,
+    setShouldOffsetDoubleSpreads,
+}: Pick<IReaderSettings, 'readingMode' | 'shouldOffsetDoubleSpreads'> & {
+    setShouldOffsetDoubleSpreads: (offset: boolean) => void;
+}) => {
+    const { t } = useTranslation();
+
+    if (!isOffsetDoubleSpreadPagesEditable(readingMode)) {
+        return null;
+    }
+
+    return (
+        <Button
+            sx={{ justifyContent: 'start', textTransform: 'unset' }}
+            size="large"
+            onClick={() => setShouldOffsetDoubleSpreads(!shouldOffsetDoubleSpreads)}
+            color={shouldOffsetDoubleSpreads ? 'secondary' : 'primary'}
+            variant="contained"
+            startIcon={<OffsetDoubleSpreadIcon />}
+        >
+            {t('reader.settings.label.offset_double_spread')}
+        </Button>
+    );
+};
--- a/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopPageScale.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopPageScale.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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 FitScreenIcon from '@mui/icons-material/FitScreen';
+import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
+import { ValueRotationButton } from '@/features/core/components/buttons/ValueRotationButton.tsx';
+import {
+    IReaderSettings,
+    IReaderSettingsWithDefaultFlag,
+    ReaderPageScaleMode,
+} from '@/features/reader/Reader.types.ts';
+import {
+    PAGE_SCALE_VALUE_TO_DISPLAY_DATA,
+    READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED,
+    READER_PAGE_SCALE_MODE_VALUES,
+} from '@/features/reader/settings/ReaderSettings.constants.tsx';
+import { MultiValueButtonDefaultableProps } from '@/features/core/Core.types.ts';
+import { CustomButtonIcon } from '@/features/core/components/buttons/CustomButtonIcon.tsx';
+
+export const ReaderNavBarDesktopPageScale = ({
+    pageScaleMode,
+    shouldStretchPage,
+    updateSetting,
+    ...buttonSelectInputProps
+}: Pick<IReaderSettingsWithDefaultFlag, 'pageScaleMode' | 'shouldStretchPage'> &
+    Pick<MultiValueButtonDefaultableProps<ReaderPageScaleMode>, 'isDefaultable' | 'onDefault'> & {
+        updateSetting: <Setting extends keyof Pick<IReaderSettings, 'pageScaleMode' | 'shouldStretchPage'>>(
+            setting: Setting,
+            value: IReaderSettings[Setting],
+        ) => void;
+    }) => {
+    const { t } = useTranslation();
+
+    return (
+        <Stack sx={{ flexDirection: 'row', gap: 1 }}>
+            <ValueRotationButton
+                {...buttonSelectInputProps}
+                tooltip={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={(value) => updateSetting('pageScaleMode', value)}
+                valueToDisplayData={PAGE_SCALE_VALUE_TO_DISPLAY_DATA}
+                defaultIcon={PAGE_SCALE_VALUE_TO_DISPLAY_DATA[pageScaleMode.value].icon}
+            />
+            {READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode.value] && (
+                <CustomTooltip title={t('reader.settings.page_scale.stretch')}>
+                    <CustomButtonIcon
+                        onClick={() => updateSetting('shouldStretchPage', !shouldStretchPage.value)}
+                        sx={{ px: undefined }}
+                        variant="contained"
+                        color={shouldStretchPage.value ? 'secondary' : 'primary'}
+                    >
+                        <FitScreenIcon />
+                    </CustomButtonIcon>
+                </CustomTooltip>
+            )}
+        </Stack>
+    );
+};
--- a/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingDirection.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingDirection.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 { ValueRotationButton } from '@/features/core/components/buttons/ValueRotationButton.tsx';
+import { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
+import {
+    READING_DIRECTION_VALUES,
+    READING_DIRECTION_VALUE_TO_DISPLAY_DATA,
+} from '@/features/reader/settings/ReaderSettings.constants.tsx';
+import { MultiValueButtonDefaultableProps } from '@/features/core/Core.types.ts';
+
+export const ReaderNavBarDesktopReadingDirection = ({
+    readingDirection,
+    setReadingDirection,
+    ...buttonSelectInputProps
+}: Pick<IReaderSettingsWithDefaultFlag, 'readingDirection'> &
+    Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
+        setReadingDirection: (readingDirection: ReadingDirection) => void;
+    }) => {
+    const { t } = useTranslation();
+
+    return (
+        <ValueRotationButton
+            {...buttonSelectInputProps}
+            tooltip={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={READING_DIRECTION_VALUE_TO_DISPLAY_DATA}
+            defaultIcon={READING_DIRECTION_VALUE_TO_DISPLAY_DATA[readingDirection.value].icon}
+        />
+    );
+};
--- a/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 { ValueRotationButton } from '@/features/core/components/buttons/ValueRotationButton.tsx';
+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 { MultiValueButtonDefaultableProps } from '@/features/core/Core.types.ts';
+
+export const ReaderNavBarDesktopReadingMode = ({
+    readingMode,
+    setReadingMode,
+    ...buttonSelectInputProps
+}: Pick<IReaderSettingsWithDefaultFlag, 'readingMode'> &
+    Pick<MultiValueButtonDefaultableProps<ReadingMode>, 'isDefaultable' | 'onDefault'> & {
+        setReadingMode: (mode: ReadingMode) => void;
+    }) => {
+    const { t } = useTranslation();
+
+    return (
+        <ValueRotationButton
+            {...buttonSelectInputProps}
+            tooltip={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}
+            defaultIcon={READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode.value].icon}
+        />
+    );
+};