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

Move reader "settings state" to "reader store"

Browse Source
This commit is contained in:
schroda
2025-09-20 14:15:40 +02:00
parent 5177f9efdc
commit 98ec5257b9
28 changed files with 315 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/features/reader/services/ReaderControls.ts
View File

@@ -166,25 +166,26 @@ export class ReaderControls {
scrollIntoView?: boolean,
) => void {
const { t } = useTranslation();
const {
readingMode,
shouldInformAboutMissingChapter,
shouldInformAboutScanlatorChange,
shouldUseInfiniteScroll,
} = ReaderService.useSettings();
const openChapter = ReaderService.useNavigateToChapter();
return useCallback(
(offset, doTransitionCheck = true, scrollIntoView = true) => {
const {
currentChapter,
previousChapter,
nextChapter,
chapters,
visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder },
setReaderStateChapters,
} = getReaderStore().chapters;
chapters: {
currentChapter,
previousChapter,
nextChapter,
chapters,
visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder },
setReaderStateChapters,
},
settings: {
shouldInformAboutMissingChapter,
shouldInformAboutScanlatorChange,
shouldUseInfiniteScroll,
},
} = getReaderStore();
if (!currentChapter) {
return;
@@ -264,14 +265,7 @@ export class ReaderControls {
doOpenChapter().catch(defaultPromiseErrorHandler('ReaderControls#useOpenChapter'));
},
[
t,
openChapter,
readingMode.value,
shouldInformAboutMissingChapter,
shouldInformAboutScanlatorChange,
shouldUseInfiniteScroll,
],
[t, openChapter],
);
}
@@ -341,22 +335,29 @@ export class ReaderControls {
hideOverlay?: boolean,
) => void {
const { setShowPreview } = useReaderTapZoneContext();
const { readingDirection, readingMode, shouldShowTransitionPage } = ReaderService.useSettings();
const openChapter = ReaderControls.useOpenChapter();
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
return useCallback(
(page, forceDirection = direction, hideOverlay: boolean = true) => {
(page, forceDirection, hideOverlay: boolean = true) => {
const {
pages: {
currentPageIndex,
setPageToScrollToIndex,
pages,
transitionPageMode,
setTransitionPageMode,
},
settings: { readingDirection, readingMode, shouldShowTransitionPage },
} = getReaderStore();
const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
const convertedPage = getOptionForDirection(
page,
page === 'previous' ? 'next' : 'previous',
forceDirection,
forceDirection ?? direction,
);
const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } =
getReaderStore().pages;
const currentPage = getPage(currentPageIndex, pages);
const previousPageIndex = getNextPageIndex('previous', currentPage.pagesIndex, pages);
const nextPageIndex = getNextPageIndex('next', currentPage.pagesIndex, pages);
@@ -438,7 +439,7 @@ export class ReaderControls {
setPageToScrollToIndex(isPreviousMode ? previousPageIndex : nextPageIndex);
},
[direction, openChapter, shouldShowTransitionPage, readingMode.value],
[openChapter],
);
}
@@ -565,7 +566,6 @@ export class ReaderControls {
): (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void {
const { direction: themeDirection } = useTheme();
const { setShowPreview } = useReaderTapZoneContext();
const { readingMode, readingDirection, isStaticNav, scrollAmount } = ReaderService.useSettings();
const openPage = ReaderControls.useOpenPage();
const openChapter = ReaderControls.useOpenChapter();
@@ -575,6 +575,8 @@ export class ReaderControls {
return;
}
const { readingMode, readingDirection, isStaticNav, scrollAmount } = getReaderStore().settings;
const rect = e.currentTarget.getBoundingClientRect();
const rectRelativeX = e.clientX - rect.left;
const rectRelativeY = e.clientY - rect.top;
@@ -612,16 +614,7 @@ export class ReaderControls {
throw new Error(`Unexpected "TapZoneRegionType" (${action})`);
}
},
[
scrollElement,
readingMode.value,
openPage,
readingDirection.value,
openChapter,
themeDirection,
isStaticNav,
scrollAmount,
],
[scrollElement, openPage, openChapter, themeDirection],
);
}

29
src/features/reader/services/ReaderService.ts
View File

@@ -14,7 +14,6 @@ import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.
import { Chapters } from '@/features/chapter/services/Chapters.ts';
import {
IReaderSettings,
IReaderSettingsWithDefaultFlag,
ReaderExitMode,
ReaderOpenChapterLocationState,
ReaderOverlayMode,
@@ -22,10 +21,7 @@ import {
ReadingDirection,
ReadingMode,
} from '@/features/reader/Reader.types.ts';
import {
convertFromReaderSettingsWithDefaultFlag,
updateReaderSettings,
} from '@/features/reader/settings/ReaderSettingsMetadata.ts';
import { updateReaderSettings } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { MANGA_META_FIELDS } from '@/lib/graphql/fragments/MangaFragments.ts';
import { makeToast } from '@/base/utils/Toast.ts';
@@ -34,7 +30,6 @@ import { GLOBAL_METADATA } from '@/lib/graphql/fragments/Fragments.ts';
import { updateMetadataList } from '@/features/metadata/services/MetadataApolloCacheHandler.ts';
import { useBackButton } from '@/base/hooks/useBackButton.ts';
import { GLOBAL_READER_SETTING_KEYS } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { useReaderStateSettingsContext } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx';
import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
import {
@@ -51,7 +46,7 @@ import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
import { getMetadataKey } from '@/features/metadata/Metadata.utils.ts';
import { DirectionOffset } from '@/base/Base.types.ts';
import { getReaderStore } from '@/features/reader/ReaderStore.ts';
import { getReaderStore, useReaderStore } from '@/features/reader/ReaderStore.ts';
const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
ltr: 'rtl',
@@ -154,7 +149,6 @@ export class ReaderService {
}
static useUpdateChapter(): (patch: UpdateChapterPatchInput) => void {
const { shouldSkipDupChapters } = ReaderService.useSettings();
const {
settings: { deleteChaptersWhileReading, deleteChaptersWithBookmark, updateProgressAfterReading },
} = useMetadataServerSettings();
@@ -164,6 +158,7 @@ export class ReaderService {
const {
manga,
chapters: { currentChapter, mangaChapters, chapters },
settings: { shouldSkipDupChapters },
} = getReaderStore();
if (!manga || !currentChapter || !mangaChapters) {
@@ -229,23 +224,15 @@ export class ReaderService {
ReaderService.getOrCreateChapterUpdateQueue(currentChapter.id).enqueue(`${currentChapter.id}`, update);
},
[shouldSkipDupChapters, deleteChaptersWhileReading, deleteChaptersWithBookmark, updateProgressAfterReading],
[deleteChaptersWhileReading, deleteChaptersWithBookmark, updateProgressAfterReading],
);
}
static useSettings(): IReaderSettingsWithDefaultFlag {
return useReaderStateSettingsContext().settings;
}
static useSettingsWithoutDefaultFlag(): IReaderSettings {
return convertFromReaderSettingsWithDefaultFlag(ReaderService.useSettings());
}
static useGetThemeDirection(): Direction {
const { direction } = useTheme();
const { readingDirection } = ReaderService.useSettings();
const readingDirection = useReaderStore((state) => state.settings.readingDirection.value);
return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection.value
return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection
? direction
: DIRECTION_TO_INVERTED[direction];
}
@@ -352,7 +339,7 @@ export class ReaderService {
static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } {
const isTouchDevice = MediaQuery.useIsTouchDevice();
const { overlayMode } = ReaderService.useSettings();
const overlayMode = useReaderStore((state) => state.settings.overlayMode);
const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO;
const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP;
@@ -369,7 +356,7 @@ export class ReaderService {
}
static useExit(): () => void {
const { exitMode } = ReaderService.useSettings();
const exitMode = useReaderStore((state) => state.settings.exitMode);
const handleBack = useBackButton();
const navigate = useNavigate();