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

Simplify ReaderControls#useOpenChapter

Browse Source
This commit is contained in:
schroda
2025-09-20 19:51:26 +02:00
parent 1c0b982bae
commit f5c7379fc4
6 changed files with 187 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/features/reader/hotkeys/ReaderHotkeys.tsx
View File

@@ -67,7 +67,6 @@ export const ReaderHotkeys = ({
}));
const exitReader = ReaderService.useExit();
const openChapter = ReaderControls.useOpenChapter();
const openPage = ReaderControls.useOpenPage();
useHotkeys(hotkeys[ReaderHotkey.PREVIOUS_PAGE], () => openPage('previous'), [openPage]);
@@ -96,13 +95,12 @@ export const ReaderHotkeys = ({
readingDirection.value,
themeDirection,
scrollElementRef.current,
openChapter,
getReaderStore().tapZone.setShowPreview,
scrollAmount,
);
},
{ preventDefault: true },
[themeDirection, openChapter],
[themeDirection],
);
useHotkeys(
hotkeys[ReaderHotkey.SCROLL_FORWARD],
@@ -128,23 +126,22 @@ export const ReaderHotkeys = ({
readingDirection.value,
themeDirection,
scrollElementRef.current,
openChapter,
getReaderStore().tapZone.setShowPreview,
scrollAmount,
);
},
{ preventDefault: true },
[themeDirection, openChapter],
[themeDirection],
);
useHotkeys(
hotkeys[ReaderHotkey.PREVIOUS_CHAPTER],
() => openChapter(getOptionForDirection('previous', 'next', readerThemeDirection)),
[openChapter, readerThemeDirection],
() => ReaderControls.openChapter(getOptionForDirection('previous', 'next', readerThemeDirection)),
[readerThemeDirection],
);
useHotkeys(
hotkeys[ReaderHotkey.NEXT_CHAPTER],
() => openChapter(getOptionForDirection('next', 'previous', readerThemeDirection)),
[openChapter, readerThemeDirection],
() => ReaderControls.openChapter(getOptionForDirection('next', 'previous', readerThemeDirection)),
[readerThemeDirection],
);
useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () =>
getReaderStore().overlay.setIsVisible(!getReaderStore().overlay.isVisible),

12
src/features/reader/infinite-scroll/ReaderInfiniteScrollUpdateChapter.tsx
View File

@@ -7,9 +7,7 @@
*/
import { memo } from 'react';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { useReaderInfiniteScrollUpdateChapter } from '@/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
const BaseReaderInfiniteScrollUpdateChapter = ({
@@ -20,7 +18,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
isCurrentChapter,
isNextChapterVisible,
imageWrapper,
openChapter,
scrollElement,
}: {
chapterId: ChapterIdInfo['id'];
@@ -30,7 +27,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
isCurrentChapter: boolean;
isNextChapterVisible: boolean;
imageWrapper: HTMLElement | null;
openChapter: ReturnType<typeof ReaderControls.useOpenChapter>;
scrollElement: HTMLElement | null;
}) => {
useReaderInfiniteScrollUpdateChapter(
@@ -39,7 +35,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
previousChapterId,
isCurrentChapter,
isPreviousChapterVisible,
openChapter,
imageWrapper,
scrollElement,
);
@@ -49,7 +44,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
nextChapterId,
isCurrentChapter,
isNextChapterVisible,
openChapter,
imageWrapper,
scrollElement,
);
@@ -57,8 +51,4 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
return null;
};
export const ReaderInfiniteScrollUpdateChapter = withPropsFrom(
memo(BaseReaderInfiniteScrollUpdateChapter),
[() => ({ openChapter: ReaderControls.useOpenChapter() })],
['openChapter'],
);
export const ReaderInfiniteScrollUpdateChapter = memo(BaseReaderInfiniteScrollUpdateChapter);

11
src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts
View File

@@ -7,7 +7,6 @@
*/
import { useCallback, useEffect, useMemo } from 'react';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { ReadingDirection, ReadingMode } from '@/features/reader/Reader.types.ts';
import {
isContinuousReadingMode,
@@ -17,6 +16,7 @@ import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings
import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
import { useIntersectionObserver } from '@/base/hooks/useIntersectionObserver.tsx';
import { getReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
interface ElementIntersection {
start: boolean;
@@ -242,7 +242,6 @@ export const useReaderInfiniteScrollUpdateChapter = (
chapterToOpenId: number | undefined,
isCurrentChapter: boolean,
isChapterToOpenVisible: boolean,
openChapter: ReturnType<typeof ReaderControls.useOpenChapter>,
image: HTMLElement | null,
scrollElement: HTMLElement | null,
) => {
@@ -286,7 +285,7 @@ export const useReaderInfiniteScrollUpdateChapter = (
const loadChapter = loadPreviousChapter || loadNextChapter;
if (loadChapter) {
openChapter(chapterToOpenId, undefined, false);
ReaderControls.openChapter(chapterToOpenId, undefined, false);
}
};
@@ -300,7 +299,6 @@ export const useReaderInfiniteScrollUpdateChapter = (
isCurrentChapter,
isChapterToOpenVisible,
chapterToOpenId,
openChapter,
]);
useIntersectionObserver(
@@ -347,12 +345,12 @@ export const useReaderInfiniteScrollUpdateChapter = (
const openChapterToOpen = initialOpenPreviousChapter || openNextChapter;
if (openChapterToOpen) {
openChapter(chapterToOpenId, !isChapterToOpenVisible, false);
ReaderControls.openChapter(chapterToOpenId, !isChapterToOpenVisible, false);
return;
}
if (openPreviousChapter) {
openChapter(chapterId, false, false);
ReaderControls.openChapter(chapterId, false, false);
}
},
[
@@ -365,7 +363,6 @@ export const useReaderInfiniteScrollUpdateChapter = (
readingDirection,
shouldUseInfiniteScroll,
shouldShowTransitionPage,
openChapter,
],
),
useMemo(

11
src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopChapterNavigation.tsx
View File

@@ -31,10 +31,8 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
nextChapter,
chapters = [],
readerThemeDirection,
openChapter,
}: Pick<ReaderStateChapters, 'chapters' | 'currentChapter' | 'previousChapter' | 'nextChapter'> & {
readerThemeDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
openChapter: ReturnType<typeof ReaderControls.useOpenChapter>;
}) => {
const { t } = useTranslation();
@@ -56,7 +54,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
),
)}
onClick={() => {
openChapter(getOptionForDirection('previous', 'next', readerThemeDirection));
ReaderControls.openChapter(getOptionForDirection('previous', 'next', readerThemeDirection));
}}
disabled={getOptionForDirection(!previousChapter, !nextChapter, readerThemeDirection)}
/>
@@ -88,7 +86,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
),
)}
onClick={() => {
openChapter(getOptionForDirection('next', 'previous', readerThemeDirection));
ReaderControls.openChapter(getOptionForDirection('next', 'previous', readerThemeDirection));
}}
disabled={getOptionForDirection(!nextChapter, !previousChapter, readerThemeDirection)}
/>
@@ -122,9 +120,6 @@ export const ReaderNavBarDesktopChapterNavigation = withPropsFrom(
() => ({
readerThemeDirection: ReaderService.useGetThemeDirection(),
}),
() => ({
openChapter: ReaderControls.useOpenChapter(),
}),
],
['readerThemeDirection', 'openChapter'],
['readerThemeDirection'],
);

7
src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
View File

@@ -28,8 +28,8 @@ import { ReaderProgressBarSlotMobile } from '@/features/reader/overlay/progress-
import { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, SlideProps['direction']> = {
[ProgressBarPosition.BOTTOM]: 'up',
@@ -48,7 +48,6 @@ const BaseMobileReaderProgressBar = ({
topOffset?: number;
bottomOffset?: number;
}) => {
const openChapter = ReaderControls.useOpenChapter();
const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
const isVisible = useReaderStore((state) => state.overlay.isVisible);
const { currentPageIndex, pages } = useReaderStoreShallow((state) => ({
@@ -251,7 +250,7 @@ const BaseMobileReaderProgressBar = ({
}}
>
<IconButton
onClick={() => openChapter('previous')}
onClick={() => ReaderControls.openChapter('previous')}
disabled={!previousChapter}
sx={{
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
@@ -324,7 +323,7 @@ const BaseMobileReaderProgressBar = ({
slots={progressBarCurrentPage}
/>
<IconButton
onClick={() => openChapter('next')}
onClick={() => ReaderControls.openChapter('next')}
disabled={!nextChapter}
sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
>

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

@@ -91,7 +91,6 @@ export class ReaderControls {
readingDirection: ReadingDirection,
themeDirection: Direction,
element: HTMLElement,
openChapter: ReturnType<(typeof ReaderControls)['useOpenChapter']>,
setShowPreview: TReaderTapZoneContext['setShowPreview'],
scrollAmountPercentage: number = ReaderScrollAmount.LARGE,
): void {
@@ -129,12 +128,12 @@ export class ReaderControls {
scrollToOptions: ScrollToOptions,
) => {
if (isAtStartForDirection && offset === ScrollOffset.BACKWARD && isContinuousReadingModeActive) {
openChapter('previous');
ReaderControls.openChapter('previous');
return;
}
if (isAtEndForDirection && offset === ScrollOffset.FORWARD && isContinuousReadingModeActive) {
openChapter('next');
ReaderControls.openChapter('next');
return;
}
@@ -158,12 +157,11 @@ export class ReaderControls {
}
}
static useOpenChapter(): (
static openChapter(
offset: 'previous' | 'next' | ChapterIdInfo['id'],
doTransitionCheck?: boolean,
scrollIntoView?: boolean,
) => void {
return useCallback((offset, doTransitionCheck = true, scrollIntoView = true) => {
doTransitionCheck: boolean = true,
scrollIntoView: boolean = true,
): void {
const {
chapters: {
currentChapter,
@@ -173,11 +171,7 @@ export class ReaderControls {
visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder },
setReaderStateChapters,
},
settings: {
shouldInformAboutMissingChapter,
shouldInformAboutScanlatorChange,
shouldUseInfiniteScroll,
},
settings: { shouldInformAboutMissingChapter, shouldInformAboutScanlatorChange, shouldUseInfiniteScroll },
} = getReaderStore();
if (!currentChapter) {
@@ -256,7 +250,6 @@ export class ReaderControls {
};
doOpenChapter().catch(defaultPromiseErrorHandler('ReaderControls#useOpenChapter'));
}, []);
}
private static async checkNextChapterConsistency(
@@ -323,18 +316,9 @@ export class ReaderControls {
forceDirection?: Direction,
hideOverlay?: boolean,
) => void {
const openChapter = ReaderControls.useOpenChapter();
return useCallback(
(page, forceDirection, hideOverlay: boolean = true) => {
return useCallback((page, forceDirection, hideOverlay: boolean = true) => {
const {
pages: {
currentPageIndex,
setPageToScrollToIndex,
pages,
transitionPageMode,
setTransitionPageMode,
},
pages: { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode },
settings: { readingDirection, readingMode, shouldShowTransitionPage },
} = getReaderStore();
@@ -385,7 +369,7 @@ export class ReaderControls {
convertedPage === 'previous' &&
!!getReaderStore().chapters.previousChapter;
if (shouldOpenPreviousChapter) {
openChapter('previous');
ReaderControls.openChapter('previous');
return;
}
@@ -395,7 +379,7 @@ export class ReaderControls {
convertedPage === 'next' &&
!!getReaderStore().chapters.nextChapter;
if (shouldOpenNextChapter) {
openChapter('next');
ReaderControls.openChapter('next');
return;
}
@@ -426,9 +410,7 @@ export class ReaderControls {
}
setPageToScrollToIndex(isPreviousMode ? previousPageIndex : nextPageIndex);
},
[openChapter],
);
}, []);
}
static useUpdateCurrentPageIndex(): (
@@ -554,7 +536,6 @@ export class ReaderControls {
): (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void {
const { direction: themeDirection } = useTheme();
const openPage = ReaderControls.useOpenPage();
const openChapter = ReaderControls.useOpenChapter();
return useCallback(
(e) => {
@@ -589,7 +570,6 @@ export class ReaderControls {
readingDirection.value,
themeDirection,
scrollElement,
openChapter,
getReaderStore().tapZone.setShowPreview,
scrollAmount,
);
@@ -601,7 +581,7 @@ export class ReaderControls {
throw new Error(`Unexpected "TapZoneRegionType" (${action})`);
}
},
[scrollElement, openPage, openChapter, themeDirection],
[scrollElement, openPage, themeDirection],
);
}