Reader settings

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopOffsetDoubleSpread.tsx

@@ -9,7 +9,8 @@
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
 import { OffsetDoubleSpreadIcon } from '@/assets/icons/svg/OffsetDoubleSpreadIcon.tsx';
-import { IReaderSettings, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
+import { isOffsetDoubleSpreadPagesEditable } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
 
 export const ReaderNavBarDesktopOffsetDoubleSpread = ({
     readingMode,
@@ -20,7 +21,7 @@ export const ReaderNavBarDesktopOffsetDoubleSpread = ({
 }) => {
     const { t } = useTranslation();
 
-    if (readingMode !== ReadingMode.DOUBLE_PAGE) {
+    if (!isOffsetDoubleSpreadPagesEditable(readingMode)) {
         return null;
     }
 

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx

@@ -9,65 +9,52 @@
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import { useTranslation } from 'react-i18next';
-import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
-import ExpandIcon from '@mui/icons-material/Expand';
-import CropOriginalIcon from '@mui/icons-material/CropOriginal';
 import FitScreenIcon from '@mui/icons-material/FitScreen';
 import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx';
 import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
-import { IReaderSettings, ReaderPageScaleMode } from '@/modules/reader/types/Reader.types.ts';
-import { ValueToDisplayData } from '@/modules/core/Core.types';
-
-const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReaderPageScaleMode> = {
-    [ReaderPageScaleMode.WIDTH]: {
-        title: 'reader.settings.page_scale.width',
-        icon: <ExpandIcon sx={{ transform: 'rotate(90deg)' }} />,
-    },
-    [ReaderPageScaleMode.HEIGHT]: {
-        title: 'reader.settings.page_scale.height',
-        icon: <ExpandIcon />,
-    },
-    [ReaderPageScaleMode.SCREEN]: {
-        title: 'reader.settings.page_scale.screen',
-        icon: <ZoomOutMapIcon />,
-    },
-    [ReaderPageScaleMode.ORIGINAL]: {
-        title: 'reader.settings.page_scale.original',
-        icon: <CropOriginalIcon />,
-    },
-};
-
-const READER_PAGE_SCALE_MODE_VALUES = Object.values(ReaderPageScaleMode).filter((value) => typeof value === 'number');
+import {
+    IReaderSettings,
+    IReaderSettingsWithDefaultFlag,
+    ReaderPageScaleMode,
+} from '@/modules/reader/types/Reader.types.ts';
+import {
+    PAGE_SCALE_VALUE_TO_DISPLAY_DATA,
+    READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED,
+    READER_PAGE_SCALE_MODE_VALUES,
+} from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
 
 export const ReaderNavBarDesktopPageScale = ({
     pageScaleMode,
-    shouldScalePage,
+    shouldStretchPage,
     updateSetting,
-}: Pick<IReaderSettings, 'pageScaleMode' | 'shouldScalePage'> & {
-    updateSetting: <Setting extends keyof Pick<IReaderSettings, 'pageScaleMode' | 'shouldScalePage'>>(
-        setting: Setting,
-        value: IReaderSettings[Setting],
-    ) => void;
-}) => {
+    ...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();
 
-    const isPageScalingPossible = pageScaleMode !== ReaderPageScaleMode.ORIGINAL;
-
     return (
         <Stack sx={{ flexDirection: 'row', gap: 1 }}>
             <ValueRotationButton
-                value={pageScaleMode}
+                {...buttonSelectInputProps}
+                value={pageScaleMode.isDefault ? undefined : pageScaleMode.value}
                 values={READER_PAGE_SCALE_MODE_VALUES}
                 setValue={(value) => updateSetting('pageScaleMode', value)}
-                valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+                valueToDisplayData={PAGE_SCALE_VALUE_TO_DISPLAY_DATA}
+                defaultIcon={PAGE_SCALE_VALUE_TO_DISPLAY_DATA[pageScaleMode.value].icon}
             />
-            {isPageScalingPossible && (
+            {READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode.value] && (
                 <Tooltip title={t('reader.settings.label.scale_page')}>
                     <CustomIconButton
-                        onClick={() => updateSetting('shouldScalePage', !shouldScalePage)}
+                        onClick={() => updateSetting('shouldStretchPage', !shouldStretchPage.value)}
                         sx={{ minWidth: 0 }}
                         variant="contained"
-                        color={shouldScalePage ? 'secondary' : 'primary'}
+                        color={shouldStretchPage.value ? 'secondary' : 'primary'}
                     >
                         <FitScreenIcon />
                     </CustomIconButton>

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx

@@ -14,17 +14,16 @@ import { ReaderNavBarDesktopPageScale } from '@/modules/reader/components/overla
 import { ReaderNavBarDesktopReadingMode } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx';
 import { ReaderNavBarDesktopOffsetDoubleSpread } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopOffsetDoubleSpread.tsx';
 import { ReaderNavBarDesktopReadingDirection } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx';
-import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts';
 import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
 
 export const ReaderNavBarDesktopQuickSettings = ({
-    settings: { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldScalePage, readingDirection },
+    settings: { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection },
     updateSetting,
     openSettings,
-}: {
-    settings: IReaderSettings;
-    updateSetting: <Setting extends keyof IReaderSettings>(setting: Setting, value: IReaderSettings[Setting]) => void;
-} & Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
+    isDefaultable,
+    onDefault,
+}: ReaderSettingsTypeProps & Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
     const { t } = useTranslation();
 
     return (
@@ -32,19 +31,26 @@ export const ReaderNavBarDesktopQuickSettings = ({
             <ReaderNavBarDesktopReadingMode
                 readingMode={readingMode}
                 setReadingMode={(value) => updateSetting('readingMode', value)}
+                isDefaultable={isDefaultable}
+                onDefault={() => onDefault?.('readingMode')}
             />
             <ReaderNavBarDesktopOffsetDoubleSpread
-                shouldOffsetDoubleSpreads={shouldOffsetDoubleSpreads}
+                readingMode={readingMode.value}
+                shouldOffsetDoubleSpreads={shouldOffsetDoubleSpreads.value}
                 setShouldOffsetDoubleSpreads={(value) => updateSetting('shouldOffsetDoubleSpreads', value)}
             />
             <ReaderNavBarDesktopPageScale
                 pageScaleMode={pageScaleMode}
-                shouldScalePage={shouldScalePage}
+                shouldStretchPage={shouldStretchPage}
                 updateSetting={updateSetting}
+                isDefaultable={isDefaultable}
+                onDefault={() => onDefault?.('pageScaleMode')}
             />
             <ReaderNavBarDesktopReadingDirection
                 readingDirection={readingDirection}
                 setReadingDirection={(value) => updateSetting('readingDirection', value)}
+                isDefaultable={isDefaultable}
+                onDefault={() => onDefault?.('readingDirection')}
             />
             <Button
                 onClick={() => openSettings()}

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx

@@ -6,35 +6,28 @@
  * 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 { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
-import { IReaderSettings, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
-import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
-
-const READING_MODE_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');
+import { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
+import {
+    READING_DIRECTION_VALUES,
+    READING_DIRECTION_VALUE_TO_DISPLAY_DATA,
+} from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
 
 export const ReaderNavBarDesktopReadingDirection = ({
     readingDirection,
     setReadingDirection,
-}: Pick<IReaderSettings, 'readingDirection'> & {
-    setReadingDirection: (readingDirection: ReadingDirection) => void;
-}) => (
+    ...buttonSelectInputProps
+}: Pick<IReaderSettingsWithDefaultFlag, 'readingDirection'> &
+    Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
+        setReadingDirection: (readingDirection: ReadingDirection) => void;
+    }) => (
     <ValueRotationButton
-        value={readingDirection}
+        {...buttonSelectInputProps}
+        value={readingDirection.isDefault ? undefined : readingDirection.value}
         values={READING_DIRECTION_VALUES}
         setValue={setReadingDirection}
-        valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}
+        valueToDisplayData={READING_DIRECTION_VALUE_TO_DISPLAY_DATA}
+        defaultIcon={READING_DIRECTION_VALUE_TO_DISPLAY_DATA[readingDirection.value].icon}
     />
 );

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx

@@ -6,45 +6,28 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { SinglePageIcon } from '@/assets/icons/svg/SinglePageIcon.tsx';
-import { DoublePageIcon } from '@/assets/icons/svg/DoublePageIcon.tsx';
-import { ContinuousVerticalPageIcon } from '@/assets/icons/svg/ContinuousVerticalPageIcon.tsx';
-import { ContinuousHorizontalPageIcon } from '@/assets/icons/svg/ContinuousHorizontalPageIcon.tsx';
 import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
-import { ValueToDisplayData } from '@/modules/core/Core.types.tsx';
-import { IReaderSettings, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
-
-const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReadingMode> = {
-    [ReadingMode.SINGLE_PAGE]: {
-        title: 'reader.settings.reader_type.label.single_page',
-        icon: <SinglePageIcon />,
-    },
-    [ReadingMode.DOUBLE_PAGE]: {
-        title: 'reader.settings.reader_type.label.double_page',
-        icon: <DoublePageIcon />,
-    },
-    [ReadingMode.CONTINUOUS_VERTICAL]: {
-        title: 'reader.settings.reader_type.label.continuous_vertical',
-        icon: <ContinuousVerticalPageIcon />,
-    },
-    [ReadingMode.CONTINUOUS_HORIZONTAL]: {
-        title: 'reader.settings.reader_type.label.continuous_horizontal',
-        icon: <ContinuousHorizontalPageIcon />,
-    },
-};
-
-const READING_MODE_VALUES = Object.values(ReadingMode).filter((value) => typeof value === 'number');
+import { IReaderSettingsWithDefaultFlag, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+import {
+    READING_MODE_VALUE_TO_DISPLAY_DATA,
+    READING_MODE_VALUES,
+} from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
 
 export const ReaderNavBarDesktopReadingMode = ({
     readingMode,
     setReadingMode,
-}: Pick<IReaderSettings, 'readingMode'> & {
-    setReadingMode: (mode: ReadingMode) => void;
-}) => (
+    ...buttonSelectInputProps
+}: Pick<IReaderSettingsWithDefaultFlag, 'readingMode'> &
+    Pick<MultiValueButtonDefaultableProps<ReadingMode>, 'isDefaultable' | 'onDefault'> & {
+        setReadingMode: (mode: ReadingMode) => void;
+    }) => (
     <ValueRotationButton
-        value={readingMode}
+        {...buttonSelectInputProps}
+        value={readingMode.isDefault ? undefined : readingMode.value}
         values={READING_MODE_VALUES}
         setValue={setReadingMode}
-        valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+        valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}
+        defaultIcon={READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode.value].icon}
     />
 );