From 72fb05397169496041e87520f9b017cd3a0d2d45 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Thu, 27 Mar 2025 02:09:35 +0100 Subject: [PATCH] Add "scroll amount" setting --- public/locales/en.json | 10 ++-- .../reader/components/ReaderHotkeys.tsx | 10 ++-- .../behaviour/ReaderBehaviourSettings.tsx | 5 ++ .../behaviour/ReaderSettingScrollAmount.tsx | 49 +++++++++++++++++++ .../constants/ReaderSettings.constants.tsx | 20 ++++---- src/modules/reader/services/ReaderControls.ts | 4 +- src/modules/reader/types/Reader.types.ts | 2 + 7 files changed, 81 insertions(+), 19 deletions(-) create mode 100644 src/modules/reader/components/settings/behaviour/ReaderSettingScrollAmount.tsx diff --git a/public/locales/en.json b/public/locales/en.json index 5954c6d6..168c83cb 100644 --- a/public/locales/en.json +++ b/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", diff --git a/src/modules/reader/components/ReaderHotkeys.tsx b/src/modules/reader/components/ReaderHotkeys.tsx index 4c67562e..472cd4b9 100644 --- a/src/modules/reader/components/ReaderHotkeys.tsx +++ b/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], diff --git a/src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx b/src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx index cf1ab2da..360f8198 100644 --- a/src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx +++ b/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)} /> + updateSetting('scrollAmount', value)} + /> = { + [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 & { + setScrollAmount: (amount: ReaderScrollAmount) => void; +}) => { + const { t } = useTranslation(); + + return ( + + ); +}; diff --git a/src/modules/reader/constants/ReaderSettings.constants.tsx b/src/modules/reader/constants/ReaderSettings.constants.tsx index 13588b20..0d7de605 100644 --- a/src/modules/reader/constants/ReaderSettings.constants.tsx +++ b/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.LTR]: 'ltr', @@ -63,6 +70,7 @@ const GLOBAL_READER_SETTING_OBJECT: Record = { @@ -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[]; diff --git a/src/modules/reader/services/ReaderControls.ts b/src/modules/reader/services/ReaderControls.ts index 7f3cc5c7..7e880af9 100644 --- a/src/modules/reader/services/ReaderControls.ts +++ b/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, ], ); } diff --git a/src/modules/reader/types/Reader.types.ts b/src/modules/reader/types/Reader.types.ts index ad2dd097..83a1db7f 100644 --- a/src/modules/reader/types/Reader.types.ts +++ b/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 {