ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add "scroll amount" setting

Browse Source
This commit is contained in:
schroda
2025-03-27 02:09:35 +01:00
parent b93c2d95e5
commit 72fb053971
7 changed files with 81 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/modules/reader/components/ReaderHotkeys.tsx
View File

@@ -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],

5
src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx
View File

@@ -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}

49
src/modules/reader/components/settings/behaviour/ReaderSettingScrollAmount.tsx Normal file
View File

@@ -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}
/>
);
};

20
src/modules/reader/constants/ReaderSettings.constants.tsx
View File

@@ -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[];

4
src/modules/reader/services/ReaderControls.ts
View File

@@ -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,
],
);
}

2
src/modules/reader/types/Reader.types.ts
View File

@@ -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 {