diff --git a/public/locales/en.json b/public/locales/en.json index d9ea8a80..4831392b 100644 --- a/public/locales/en.json +++ b/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", diff --git a/src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx b/src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx index 4c6bdf5c..9071771e 100644 --- a/src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx +++ b/src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx @@ -40,7 +40,7 @@ export const ReaderBehaviourSettings = ({ /> updateSetting('scrollAmount', value)} + setScrollAmount={(value, commit) => updateSetting('scrollAmount', value, commit)} /> = { + [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 & { - setScrollAmount: (amount: ReaderScrollAmount) => void; + setScrollAmount: (amount: ReaderScrollAmount, commit: boolean) => void; }) => { const { t } = useTranslation(); return ( - + <> + setScrollAmount(value as number, true)} + valueToDisplayData={VALUE_TO_DISPLAY_DATA} + /> + 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); + }, + }, + }} + /> + ); }; diff --git a/src/modules/reader/constants/ReaderSettings.constants.tsx b/src/modules/reader/constants/ReaderSettings.constants.tsx index 8393f983..f89e71ed 100644 --- a/src/modules/reader/constants/ReaderSettings.constants.tsx +++ b/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',