Add "scroll amount" setting

public/locales/en.json

@@ -273,6 +273,9 @@
       "other": "Other"
     },
     "settings": {
+      "dialog": {
+        "title": "Per-language extension settings"
+      },
       "repositories": {
         "custom": {
           "dialog": {
@@ -293,9 +296,6 @@
             "title": "Extension repositories"
           }
         }
-      },
-      "dialog": {
-        "title": "Per-language extension settings"
       }
     },
     "state": {
@@ -427,12 +427,14 @@
       "hidden": "Hidden",
       "horizontal": "Horizontal",
       "info": "Information",
+      "large": "Large",
       "left": "Left",
       "light": "Light",
       "links": "Links",
       "load_in_progress": "Still loading required data…",
       "loading": "Loading…",
       "logged_in": "Logged in",
+      "medium": "Medium",
       "menu": "Menu",
       "mobile": "Mobile",
       "more": "More",
@@ -446,6 +448,7 @@
       "previous": "Previous",
       "right": "Right",
       "share": "Share",
+      "small": "Small",
       "sort": "Sort",
       "standard": "Standard",
       "started": "Started",
@@ -990,6 +993,7 @@
         "ltr": "Left to right",
         "rtl": "Right to left"
       },
+      "scroll_amount": "Scroll amount",
       "source_series": "Series settings",
       "tap_zones": {
         "edge": "Edge",

src/modules/reader/components/ReaderHotkeys.tsx

@@ -18,7 +18,6 @@ import {
     AUTO_SCROLL_SPEED,
     CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION,
     READER_PAGE_SCALE_MODE_VALUES,
-    ReaderScrollAmount,
     READING_DIRECTION_VALUES,
     READING_MODE_VALUES,
 } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
@@ -79,6 +78,7 @@ export const ReaderHotkeys = ({
         readingMode,
         readingDirection,
         autoScroll,
+        scrollAmount,
     } = ReaderService.useSettings();
     const automaticScrolling = useReaderAutoScrollContext();
     const { setShowPreview } = useReaderTapZoneContext();
@@ -106,10 +106,10 @@ export const ReaderHotkeys = ({
                 openChapter,
                 setIsOverlayVisible,
                 setShowPreview,
-                ReaderScrollAmount.SMALL,
+                scrollAmount,
             ),
         { preventDefault: true },
-        [readingMode.value, readingDirection.value, themeDirection, openChapter],
+        [readingMode.value, readingDirection.value, themeDirection, openChapter, scrollAmount],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.SCROLL_FORWARD],
@@ -125,10 +125,10 @@ export const ReaderHotkeys = ({
                 openChapter,
                 setIsOverlayVisible,
                 setShowPreview,
-                ReaderScrollAmount.SMALL,
+                scrollAmount,
             ),
         { preventDefault: true },
-        [readingMode.value, readingDirection.value, themeDirection, openChapter],
+        [readingMode.value, readingDirection.value, themeDirection, openChapter, scrollAmount],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.PREVIOUS_CHAPTER],

src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx

@@ -18,6 +18,7 @@ import { isOffsetDoubleSpreadPagesEditable } from '@/modules/reader/utils/Reader
 import { SliderInput } from '@/modules/core/components/inputs/SliderInput.tsx';
 import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { ReaderSettingAutoScroll } from '@/modules/reader/components/settings/behaviour/ReaderSettingAutoScroll.tsx';
+import { ReaderSettingScrollAmount } from '@/modules/reader/components/settings/behaviour/ReaderSettingScrollAmount.tsx';
 
 export const ReaderBehaviourSettings = ({
     settings,
@@ -37,6 +38,10 @@ export const ReaderBehaviourSettings = ({
                 exitMode={settings.exitMode}
                 setExitMode={(value) => updateSetting('exitMode', value)}
             />
+            <ReaderSettingScrollAmount
+                scrollAmount={settings.scrollAmount}
+                setScrollAmount={(value) => updateSetting('scrollAmount', value)}
+            />
             <CheckboxInput
                 label={t('reader.settings.label.skip_dup_chapters')}
                 checked={settings.shouldSkipDupChapters}

src/modules/reader/components/settings/behaviour/ReaderSettingScrollAmount.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 } from '@/modules/reader/types/Reader.types.ts';
+import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
+import { ButtonSelectInput } from '@/modules/core/components/inputs/ButtonSelectInput.tsx';
+import { ReaderScrollAmount } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+
+const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReaderScrollAmount> = {
+    [ReaderScrollAmount.SMALL]: {
+        title: 'global.label.small',
+        icon: null,
+    },
+    [ReaderScrollAmount.MEDIUM]: {
+        title: 'global.label.medium',
+        icon: null,
+    },
+    [ReaderScrollAmount.LARGE]: {
+        title: 'global.label.large',
+        icon: null,
+    },
+};
+
+const READER_SCROLL_AMOUNT_VALUES = Object.values(ReaderScrollAmount).filter((value) => typeof value === 'number');
+
+export const ReaderSettingScrollAmount = ({
+    scrollAmount,
+    setScrollAmount,
+}: Pick<IReaderSettings, 'scrollAmount'> & {
+    setScrollAmount: (amount: ReaderScrollAmount) => void;
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <ButtonSelectInput
+            label={t('reader.settings.scroll_amount')}
+            value={scrollAmount}
+            values={READER_SCROLL_AMOUNT_VALUES}
+            setValue={setScrollAmount}
+            valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+        />
+    );
+};

src/modules/reader/constants/ReaderSettings.constants.tsx

@@ -36,7 +36,14 @@ import { TranslationKey } from '@/Base.types.ts';
 import { TapZoneLayouts } from '@/modules/reader/types/TapZoneLayout.types.ts';
 import { WebtoonPageIcon } from '@/assets/icons/svg/WebtoonPageIcon.tsx';
 
-export const DEFAULT_READER_PROFILE = ReadingMode.SINGLE_PAGE;
+/**
+ * percentage values
+ */
+export enum ReaderScrollAmount {
+    SMALL = 25,
+    MEDIUM = 75,
+    LARGE = 95,
+}
 
 export const READING_DIRECTION_TO_THEME_DIRECTION: Record<ReadingDirection, Direction> = {
     [ReadingDirection.LTR]: 'ltr',
@@ -63,6 +70,7 @@ const GLOBAL_READER_SETTING_OBJECT: Record<keyof IReaderSettingsGlobal, undefine
     shouldShowTapZoneLayoutPreview: undefined,
     shouldInformAboutMissingChapter: undefined,
     shouldInformAboutScanlatorChange: undefined,
+    scrollAmount: undefined,
 };
 
 export const GLOBAL_READER_SETTING_KEYS = Object.keys(GLOBAL_READER_SETTING_OBJECT);
@@ -146,6 +154,7 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
     shouldShowTapZoneLayoutPreview: true,
     shouldInformAboutMissingChapter: true,
     shouldInformAboutScanlatorChange: true,
+    scrollAmount: ReaderScrollAmount.LARGE,
 };
 
 export const READER_PROGRESS_BAR_POSITION_TO_PLACEMENT: Record<ProgressBarPosition, TooltipProps['placement']> = {
@@ -267,15 +276,6 @@ export const READER_SETTING_TABS: Record<
     },
 };
 
-/**
- * percentage values
- */
-export enum ReaderScrollAmount {
-    SMALL = 25,
-    MEDIUM = 75,
-    LARGE = 95,
-}
-
 export const READER_HOTKEYS = Object.values(ReaderHotkey).filter(
     (hotkey) => typeof hotkey === 'number',
 ) as ReaderHotkey[];

src/modules/reader/services/ReaderControls.ts

@@ -587,7 +587,7 @@ export class ReaderControls {
         const { setIsVisible: setIsOverlayVisible } = useReaderOverlayContext();
         const { currentPageIndex, pages } = userReaderStatePagesContext();
         const { setShowPreview } = useReaderTapZoneContext();
-        const { readingMode, readingDirection, isStaticNav } = ReaderService.useSettings();
+        const { readingMode, readingDirection, isStaticNav, scrollAmount } = ReaderService.useSettings();
         const openPage = ReaderControls.useOpenPage();
         const openChapter = ReaderControls.useOpenChapter();
 
@@ -625,6 +625,7 @@ export class ReaderControls {
                                 openChapter,
                                 setIsOverlayVisible,
                                 setShowPreview,
+                                scrollAmount,
                             );
                         } else {
                             openPage(action === TapZoneRegionType.PREVIOUS ? 'previous' : 'next', 'ltr');
@@ -644,6 +645,7 @@ export class ReaderControls {
                 openChapter,
                 themeDirection,
                 isStaticNav,
+                scrollAmount,
             ],
         );
     }

src/modules/reader/types/Reader.types.ts

@@ -14,6 +14,7 @@ import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types
 import { TMangaReader } from '@/modules/manga/Manga.types.ts';
 import { useAutomaticScrolling } from '@/modules/core/hooks/useAutomaticScrolling.ts';
 import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
+import { ReaderScrollAmount } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 
 export enum ProgressBarType {
     HIDDEN,
@@ -158,6 +159,7 @@ export interface IReaderSettingsGlobal {
     shouldShowTapZoneLayoutPreview: boolean;
     shouldInformAboutMissingChapter: boolean;
     shouldInformAboutScanlatorChange: boolean;
+    scrollAmount: ReaderScrollAmount;
 }
 
 export interface IReaderSettingsManga {