Feat: Add custom scroll amount (#966)

* Added slower scroll amount mousewheel like feel

* Added custom scroll amount slider

* Made changes as requested

public/locales/en.json

@@ -466,6 +466,7 @@
       "stopped": "Stopped",
       "success": "Success",
       "system": "System",
+      "tiny": "Tiny",
       "type": "Type",
       "unknown": "Unknown",
       "username": "Username",
@@ -976,6 +977,7 @@
         "reading_mode": "Reading mode",
         "show_page_number": "Show page number",
         "skip_dup_chapters": "Skip duplicate chapters",
+        "custom_scroll_amount": "Custom scroll amount",
         "static_navigation": "Static navigation"
       },
       "overlay_mode": "Overlay mode",

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

@@ -40,7 +40,7 @@ export const ReaderBehaviourSettings = ({
             />
             <ReaderSettingScrollAmount
                 scrollAmount={settings.scrollAmount}
-                setScrollAmount={(value) => updateSetting('scrollAmount', value)}
+                setScrollAmount={(value, commit) => updateSetting('scrollAmount', value, commit)}
             />
             <CheckboxInput
                 label={t('reader.settings.label.skip_dup_chapters')}

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

@@ -10,9 +10,18 @@ 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';
+import { SliderInput } from '@/modules/core/components/inputs/SliderInput.tsx';
+import {
+    ReaderScrollAmount,
+    DEFAULT_READER_SETTINGS,
+    SCROLL_AMOUNT,
+} from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 
 const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReaderScrollAmount> = {
+    [ReaderScrollAmount.TINY]: {
+        title: 'global.label.tiny',
+        icon: null,
+    },
     [ReaderScrollAmount.SMALL]: {
         title: 'global.label.small',
         icon: null,
@@ -33,17 +42,37 @@ export const ReaderSettingScrollAmount = ({
     scrollAmount,
     setScrollAmount,
 }: Pick<IReaderSettings, 'scrollAmount'> & {
-    setScrollAmount: (amount: ReaderScrollAmount) => void;
+    setScrollAmount: (amount: ReaderScrollAmount, commit: boolean) => void;
 }) => {
     const { t } = useTranslation();
 
     return (
-        <ButtonSelectInput
+        <>
-            label={t('reader.settings.scroll_amount')}
+            <ButtonSelectInput
-            value={scrollAmount}
+                label={t('reader.settings.scroll_amount')}
-            values={READER_SCROLL_AMOUNT_VALUES}
+                value={scrollAmount}
-            setValue={setScrollAmount}
+                values={READER_SCROLL_AMOUNT_VALUES}
-            valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+                setValue={(value) => setScrollAmount(value as number, true)}
-        />
+                valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+            />
+            <SliderInput
+                label={t('reader.settings.label.custom_scroll_amount')}
+                value={t('global.value', { value: scrollAmount, unit: '%' })}
+                onDefault={() => setScrollAmount(DEFAULT_READER_SETTINGS.scrollAmount, true)}
+                slotProps={{
+                    slider: {
+                        defaultValue: DEFAULT_READER_SETTINGS.scrollAmount,
+                        value: scrollAmount,
+                        ...SCROLL_AMOUNT,
+                        onChange: (_, value) => {
+                            setScrollAmount(value as number, false);
+                        },
+                        onChangeCommitted: (_, value) => {
+                            setScrollAmount(value as number, true);
+                        },
+                    },
+                }}
+            />
+        </>
     );
 };

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

@@ -40,6 +40,7 @@ import { WebtoonPageIcon } from '@/assets/icons/svg/WebtoonPageIcon.tsx';
  * percentage values
  */
 export enum ReaderScrollAmount {
+    TINY = 10,
     SMALL = 25,
     MEDIUM = 75,
     LARGE = 95,
@@ -308,6 +309,12 @@ export const AUTO_SCROLL_SPEED = {
     step: 0.5,
 };
 
+export const SCROLL_AMOUNT = {
+    min: 5,
+    max: 100,
+    step: 5,
+};
+
 export const READER_BLEND_MODE_VALUE_TO_DISPLAY_DATA = {
     [ReaderBlendMode.DEFAULT]: {
         title: 'reader.settings.custom_filter.rgba.blend_mode.default',