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

Move reader "auto-scroll state" to "reader store"

Browse Source
This commit is contained in:
schroda
2025-08-31 22:39:30 +02:00
parent e68cb65874
commit dabe50754f
13 changed files with 206 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/features/reader/Reader.types.ts
View File

@@ -10,9 +10,7 @@ import { MutableRefObject } from 'react';
import { TapZoneInvertMode, TapZoneLayouts } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
import { TChapterReader } from '@/features/chapter/Chapter.types.ts';
import { ReaderService } from '@/features/reader/services/ReaderService.ts';
import { useAutomaticScrolling } from '@/base/hooks/useAutomaticScrolling.ts';
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { ScrollOffset } from '@/base/Base.types.ts';
export enum ProgressBarType {
HIDDEN,
@@ -374,11 +372,4 @@ export type TReaderStateSettingsContext = {
setSettings: (settings: IReaderSettingsWithDefaultFlag) => void;
};
export type TReaderAutoScrollContext = ReturnType<typeof useAutomaticScrolling> & {
isActive: boolean;
scrollRef?: MutableRefObject<HTMLElement | null> | (() => void);
setScrollRef: (scrollRef?: MutableRefObject<HTMLElement | null>) => void;
setDirection: (direction: ScrollOffset) => void;
};
export type ReaderPageSpreadState = { url: string; isSpread: boolean };

8
src/features/reader/ReaderStore.ts
View File

@@ -14,8 +14,12 @@ import {
createReaderOverlayStoreSlice,
ReaderOverlayStoreSlice,
} from '@/features/reader/overlay/ReaderOverlayStore.ts';
import {
createReaderAutoScrollStoreSlice,
ReaderAutoScrollStoreSlice,
} from '@/features/reader/auto-scroll/ReaderAutoScrollStore.ts';
interface ReaderStore extends ReaderOverlayStoreSlice {
interface ReaderStore extends ReaderOverlayStoreSlice, ReaderAutoScrollStoreSlice {
reset: () => void;
manga: TMangaReader | undefined;
setManga: (manga: TMangaReader | undefined) => void;
@@ -43,6 +47,7 @@ export const useReaderStore = create<ReaderStore>()(
draft.manga = DEFAULT_STATE.manga;
draft.scrollbar = { ...get().scrollbar, ...DEFAULT_STATE.scrollbar };
get().overlay.reset();
get().autoScroll.reset();
}),
setManga: (manga) =>
set((draft) => {
@@ -60,6 +65,7 @@ export const useReaderStore = create<ReaderStore>()(
}),
},
...createReaderOverlayStoreSlice(set, get, store),
...createReaderAutoScrollStoreSlice(set, get, store),
})),
);
export const useReaderStoreShallow = <T>(selector: (state: ReaderStore) => T): T =>

60
src/features/reader/auto-scroll/ReaderAutoScrollContext.tsx → src/features/reader/auto-scroll/ReaderAutoScroll.tsx
View File

@@ -6,14 +6,9 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { createContext, memo, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
import { memo, useCallback, useEffect } from 'react';
import { Direction, useTheme } from '@mui/material/styles';
import {
IReaderSettings,
ReaderScrollAmount,
ReadingMode,
TReaderAutoScrollContext,
} from '@/features/reader/Reader.types.ts';
import { IReaderSettings, ReaderScrollAmount, ReadingMode } from '@/features/reader/Reader.types.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { ScrollOffset } from '@/base/Base.types.ts';
import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
@@ -22,36 +17,23 @@ import { useAutomaticScrolling } from '@/base/hooks/useAutomaticScrolling.ts';
import { CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { ReaderService } from '@/features/reader/services/ReaderService.ts';
import { getReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
export const ReaderAutoScrollContext = createContext<TReaderAutoScrollContext>({
isActive: false,
isPaused: false,
setScrollRef: () => {},
start: () => {},
cancel: () => {},
toggleActive: () => {},
pause: () => {},
resume: () => {},
setDirection: () => {},
});
export const useReaderAutoScrollContext = () => useContext(ReaderAutoScrollContext);
const BaseReaderAutoScrollContextProvider = ({
children,
const BaseReaderAutoScroll = ({
openPage,
readingMode,
autoScroll,
themeDirection,
combinedDirection,
}: Pick<IReaderSettings, 'readingMode' | 'autoScroll'> & {
children: ReactNode;
openPage: ReturnType<typeof ReaderControls.useOpenPage>;
themeDirection: Direction;
combinedDirection: Direction;
}) => {
const [scrollRef, setScrollRef] = useState<TReaderAutoScrollContext['scrollRef']>();
const [direction, setDirection] = useState<ScrollOffset>(ScrollOffset.FORWARD);
const { scrollRef, direction } = useReaderStoreShallow((state) => ({
scrollRef: state.autoScroll.scrollRef,
direction: state.autoScroll.direction,
}));
const isScrollingInvertedBasedOnReadingDirection =
readingMode === ReadingMode.CONTINUOUS_HORIZONTAL && themeDirection !== combinedDirection;
@@ -77,21 +59,23 @@ const BaseReaderAutoScrollContextProvider = ({
autoScroll.smooth,
);
const value = useMemo(
() => ({
scrollRef,
setScrollRef,
setDirection,
...automaticScrolling,
}),
[scrollRef, automaticScrolling],
);
useEffect(() => {
const autoScrollStore = getReaderStore().autoScroll;
return <ReaderAutoScrollContext.Provider value={value}>{children}</ReaderAutoScrollContext.Provider>;
autoScrollStore.setIsActive(automaticScrolling.isActive);
autoScrollStore.setIsPaused(automaticScrolling.isPaused);
autoScrollStore.setStart(automaticScrolling.start);
autoScrollStore.setCancel(automaticScrolling.cancel);
autoScrollStore.setToggleActive(automaticScrolling.toggleActive);
autoScrollStore.setPause(automaticScrolling.pause);
autoScrollStore.setResume(automaticScrolling.resume);
}, [automaticScrolling]);
return null;
};
export const ReaderAutoScrollContextProvider = withPropsFrom(
memo(BaseReaderAutoScrollContextProvider),
export const ReaderAutoScroll = withPropsFrom(
memo(BaseReaderAutoScroll),
[
ReaderService.useSettingsWithoutDefaultFlag,
() => ({ openPage: ReaderControls.useOpenPage() }),

119
src/features/reader/auto-scroll/ReaderAutoScrollStore.ts Normal file
View File

@@ -0,0 +1,119 @@
/*
* 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 { createRef, MutableRefObject } from 'react';
import { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts';
import { ScrollOffset } from '@/base/Base.types.ts';
import { useAutomaticScrolling } from '@/base/hooks/useAutomaticScrolling.ts';
import { noOp } from '@/lib/HelperFunctions.ts';
export interface ReaderAutoScrollStoreSlice {
autoScroll: ReturnType<typeof useAutomaticScrolling> & {
setIsActive: (active: boolean) => void;
setIsPaused: (paused: boolean) => void;
scrollRef?: MutableRefObject<HTMLElement | null>;
setScrollRef: (scrollElement: HTMLElement | null) => void;
setDirection: (direction: ScrollOffset) => void;
setStart: (start: () => void) => void;
setCancel: (cancel: () => void) => void;
setToggleActive: (toggleActive: () => void) => void;
setPause: (pause: () => void) => void;
setResume: (resume: () => void) => void;
invert: boolean;
setInvert: (invert: boolean) => void;
direction: ScrollOffset;
reset: () => void;
};
}
const DEFAULT_STATE = {
isActive: false,
isPaused: false,
start: noOp,
cancel: noOp,
toggleActive: noOp,
pause: noOp,
resume: noOp,
invert: false,
direction: ScrollOffset.FORWARD,
scrollRef: undefined,
} satisfies Omit<
ReaderAutoScrollStoreSlice['autoScroll'],
| 'setIsActive'
| 'setIsPaused'
| 'setStart'
| 'setCancel'
| 'setToggleActive'
| 'setPause'
| 'setResume'
| 'setInvert'
| 'setDirection'
| 'setScrollRef'
| 'reset'
>;
export const createReaderAutoScrollStoreSlice = <T extends ReaderAutoScrollStoreSlice>(
...[set, get]: Parameters<ImmerStateCreator<T>>
): ReaderAutoScrollStoreSlice =>
({
autoScroll: {
...DEFAULT_STATE,
reset: () =>
set((draft) => {
draft.autoScroll = { ...get().autoScroll, ...DEFAULT_STATE };
}),
setIsActive: (active) =>
set((draft) => {
draft.autoScroll.isActive = active;
}),
setIsPaused: (paused) =>
set((draft) => {
draft.autoScroll.isPaused = paused;
}),
setStart: (start) =>
set((draft) => {
draft.autoScroll.start = start;
}),
setCancel: (cancel) =>
set((draft) => {
draft.autoScroll.cancel = cancel;
}),
setToggleActive: (toggleActive) =>
set((draft) => {
draft.autoScroll.toggleActive = toggleActive;
}),
setPause: (pause) =>
set((draft) => {
draft.autoScroll.pause = pause;
}),
setResume: (resume) =>
set((draft) => {
draft.autoScroll.resume = resume;
}),
setInvert: (invert) =>
set((draft) => {
draft.autoScroll.invert = invert;
}),
setDirection: (direction) =>
set((draft) => {
draft.autoScroll.direction = direction;
}),
setScrollRef: (scrollElement) =>
set((draft) => {
if (!scrollElement) {
draft.autoScroll.scrollRef = undefined;
return;
}
const ref = createRef() as MutableRefObject<HTMLElement | null>;
ref.current = scrollElement;
// @ts-expect-error - TS2322: Type MutableRefObject<HTMLElement | null> is not assignable to type WritableDraft<MutableRefObject<HTMLElement | null>>
draft.autoScroll.scrollRef = ref;
}),
},
}) satisfies ReaderAutoScrollStoreSlice;

11
src/features/reader/auto-scroll/hooks/useReaderAutoScroll.ts
View File

@@ -7,20 +7,21 @@
*/
import { useEffect } from 'react';
import { useAutomaticScrolling } from '@/base/hooks/useAutomaticScrolling.ts';
import { IReaderSettings } from '@/features/reader/Reader.types.ts';
export const useReaderAutoScroll = (
isOverlayVisible: boolean,
automaticScrolling: ReturnType<typeof useAutomaticScrolling>,
isAutoScrollPaused: boolean,
pauseAutoScroll: () => void,
resumeAutoScroll: () => void,
isStaticNav: IReaderSettings['isStaticNav'],
): void => {
useEffect(() => {
if (isOverlayVisible && !isStaticNav) {
automaticScrolling.pause();
pauseAutoScroll();
return;
}
automaticScrolling.resume();
}, [isOverlayVisible, automaticScrolling.isPaused, isStaticNav]);
resumeAutoScroll();
}, [isOverlayVisible, isAutoScrollPaused, isStaticNav]);
};

7
src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx
View File

@@ -14,10 +14,10 @@ import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import { useRef } from 'react';
import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
import { IReaderSettings } from '@/features/reader/Reader.types.ts';
import { AUTO_SCROLL_SPEED } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { coerceIn } from '@/lib/HelperFunctions.ts';
import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
export const ReaderNavBarDesktopAutoScroll = ({
autoScroll,
@@ -26,7 +26,10 @@ export const ReaderNavBarDesktopAutoScroll = ({
setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void;
}) => {
const { t } = useTranslation();
const { isActive, toggleActive } = useReaderAutoScrollContext();
const { isActive, toggleActive } = useReaderStoreShallow((state) => ({
isActive: state.autoScroll.isActive,
toggleActive: state.autoScroll.toggleActive,
}));
const updateTimeout = useRef<NodeJS.Timeout>(undefined);

5
src/features/reader/contexts/ReaderContextProvider.tsx
View File

@@ -8,16 +8,13 @@
import { ReactNode } from 'react';
import { ReaderStateContextProvider } from '@/features/reader/contexts/state/ReaderStateContextProvider.tsx';
import { ReaderAutoScrollContextProvider } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
import { ReaderProgressBarContextProvider } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx';
import { ReaderTapZoneContextProvider } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx';
export const ReaderContextProvider = ({ children }: { children?: ReactNode }) => (
<ReaderStateContextProvider>
<ReaderTapZoneContextProvider>
<ReaderProgressBarContextProvider>
<ReaderAutoScrollContextProvider>{children}</ReaderAutoScrollContextProvider>
</ReaderProgressBarContextProvider>
<ReaderProgressBarContextProvider>{children}</ReaderProgressBarContextProvider>
</ReaderTapZoneContextProvider>
</ReaderStateContextProvider>
);

4
src/features/reader/hooks/useReaderResetStates.ts
View File

@@ -12,7 +12,6 @@ import {
ReaderStateChapters,
ReaderStatePages,
ReaderTransitionPageMode,
TReaderAutoScrollContext,
TReaderStateSettingsContext,
} from '@/features/reader/Reader.types.ts';
import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
@@ -29,7 +28,6 @@ export const useReaderResetStates = (
setPageLoadStates: ReaderStatePages['setPageLoadStates'],
setTransitionPageMode: ReaderStatePages['setTransitionPageMode'],
setSettings: TReaderStateSettingsContext['setSettings'],
cancelAutoScroll: TReaderAutoScrollContext['cancel'],
) => {
useEffect(
() => () => {
@@ -45,8 +43,6 @@ export const useReaderResetStates = (
setTransitionPageMode(ReaderTransitionPageMode.NONE);
setSettings(DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG);
cancelAutoScroll();
},
[],
);

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

@@ -24,7 +24,6 @@ import { HotkeyScope } from '@/features/hotkeys/Hotkeys.types.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { ScrollOffset } from '@/base/Base.types.ts';
import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx';
import { getReaderStore } from '@/features/reader/ReaderStore.ts';
@@ -74,7 +73,6 @@ export const ReaderHotkeys = ({
autoScroll,
scrollAmount,
} = ReaderService.useSettings();
const automaticScrolling = useReaderAutoScrollContext();
const { setShowPreview } = useReaderTapZoneContext();
const exitReader = ReaderService.useExit();
@@ -86,6 +84,8 @@ export const ReaderHotkeys = ({
useHotkeys(
hotkeys[ReaderHotkey.SCROLL_BACKWARD],
() => {
const automaticScrolling = getReaderStore().autoScroll;
if (automaticScrolling.isActive) {
automaticScrolling.setDirection(ScrollOffset.BACKWARD);
return;
@@ -108,18 +108,13 @@ export const ReaderHotkeys = ({
);
},
{ preventDefault: true },
[
readingMode.value,
readingDirection.value,
themeDirection,
openChapter,
scrollAmount,
automaticScrolling.isActive,
],
[readingMode.value, readingDirection.value, themeDirection, openChapter, scrollAmount],
);
useHotkeys(
hotkeys[ReaderHotkey.SCROLL_FORWARD],
() => {
const automaticScrolling = getReaderStore().autoScroll;
if (automaticScrolling.isActive) {
automaticScrolling.setDirection(ScrollOffset.FORWARD);
return;
@@ -142,14 +137,7 @@ export const ReaderHotkeys = ({
);
},
{ preventDefault: true },
[
readingMode.value,
readingDirection.value,
themeDirection,
openChapter,
scrollAmount,
automaticScrolling.isActive,
],
[readingMode.value, readingDirection.value, themeDirection, openChapter, scrollAmount],
);
useHotkeys(
hotkeys[ReaderHotkey.PREVIOUS_CHAPTER],
@@ -213,9 +201,9 @@ export const ReaderHotkeys = ({
},
[readingDirection.value, readingDirection.isDefault],
);
useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], automaticScrolling.toggleActive, { preventDefault: true }, [
automaticScrolling.toggleActive,
]);
useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], () => getReaderStore().autoScroll.toggleActive(), {
preventDefault: true,
});
useHotkeys(
hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE],
() =>

21
src/features/reader/overlay/ReaderOverlayStore.ts
View File

@@ -22,14 +22,13 @@ const DEFAULT_STATE = {
export const createReaderOverlayStoreSlice = <T extends ReaderOverlayStoreSlice>(
...[set, get]: Parameters<ImmerStateCreator<T>>
): ReaderOverlayStoreSlice =>
({
overlay: {
isVisible: DEFAULT_STATE.isVisible,
setIsVisible: (visible) =>
set((draft) => {
draft.overlay.isVisible = visible;
}),
reset: () => set(() => ({ overlay: { ...get().overlay, ...DEFAULT_STATE } })),
},
}) as T;
): ReaderOverlayStoreSlice => ({
overlay: {
isVisible: DEFAULT_STATE.isVisible,
setIsVisible: (visible) =>
set((draft) => {
draft.overlay.isVisible = visible;
}),
reset: () => set(() => ({ overlay: { ...get().overlay, ...DEFAULT_STATE } })),
},
});

17
src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx
View File

@@ -13,21 +13,22 @@ import { ReaderSettingReadingMode } from '@/features/reader/settings/layout/comp
import { ReaderSettingReadingDirection } from '@/features/reader/settings/layout/components/ReaderSettingReadingDirection.tsx';
import { ReaderService } from '@/features/reader/services/ReaderService.ts';
import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx';
import { IReaderSettingsWithDefaultFlag, TReaderAutoScrollContext } from '@/features/reader/Reader.types.ts';
import { IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx';
import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
const BaseReaderBottomBarMobileQuickSettings = ({
readingMode,
readingDirection,
autoScroll,
isActive,
toggleActive,
}: Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'readingDirection' | 'autoScroll'> &
Pick<TReaderAutoScrollContext, 'isActive' | 'toggleActive'>) => {
}: Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'readingDirection' | 'autoScroll'>) => {
const { t } = useTranslation();
const { isActive, toggleActive } = useReaderStoreShallow((state) => ({
isActive: state.autoScroll.isActive,
toggleActive: state.autoScroll.toggleActive,
}));
return (
<Stack sx={{ gap: 2 }}>
@@ -59,6 +60,6 @@ const BaseReaderBottomBarMobileQuickSettings = ({
export const ReaderBottomBarMobileQuickSettings = withPropsFrom(
memo(BaseReaderBottomBarMobileQuickSettings),
[ReaderService.useSettings, useReaderAutoScrollContext],
['readingMode', 'readingDirection', 'autoScroll', 'isActive', 'toggleActive'],
[ReaderService.useSettings],
['readingMode', 'readingDirection', 'autoScroll'],
);

12
src/features/reader/screens/Reader.tsx
View File

@@ -33,14 +33,12 @@ import {
IReaderSettingsWithDefaultFlag,
ReaderStateChapters,
ReaderStatePages,
TReaderAutoScrollContext,
TReaderStateSettingsContext,
} from '@/features/reader/Reader.types.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx';
import { useReaderResetStates } from '@/features/reader/hooks/useReaderResetStates.ts';
@@ -51,6 +49,7 @@ import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
import { useChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx';
import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
import { ReaderAutoScroll } from '@/features/reader/auto-scroll/ReaderAutoScroll.tsx';
const BaseReader = ({
setOverride,
@@ -76,7 +75,6 @@ const BaseReader = ({
setPageUrls,
setPageLoadStates,
setTransitionPageMode,
cancelAutoScroll,
setShowPreview,
}: Pick<NavbarContextType, 'setOverride' | 'readerNavBarWidth'> &
Pick<TReaderStateSettingsContext, 'setSettings'> &
@@ -107,9 +105,7 @@ const BaseReader = ({
| 'setPageLoadStates'
| 'setTransitionPageMode'
> &
Pick<TReaderTapZoneContext, 'setShowPreview'> & {
cancelAutoScroll: TReaderAutoScrollContext['cancel'];
}) => {
Pick<TReaderTapZoneContext, 'setShowPreview'>) => {
const { t } = useTranslation();
const manga = useReaderStoreShallow((state) => state.manga);
const overlay = useReaderStoreShallow((state) => state.overlay);
@@ -163,7 +159,6 @@ const BaseReader = ({
setPageLoadStates,
setTransitionPageMode,
setSettings,
cancelAutoScroll,
);
useReaderSetSettingsState(
mangaResponse,
@@ -288,6 +283,7 @@ const BaseReader = ({
<ReaderViewer ref={scrollElementRef} />
<TapZoneLayout />
<ReaderRGBAFilter />
<ReaderAutoScroll />
</Box>
);
};
@@ -319,7 +315,6 @@ export const Reader = withPropsFrom(
return { readingMode, tapZoneLayout, tapZoneInvertMode };
},
userReaderStatePagesContext,
() => ({ cancelAutoScroll: useReaderAutoScrollContext().cancel }),
useReaderTapZoneContext,
],
[
@@ -346,7 +341,6 @@ export const Reader = withPropsFrom(
'setPageUrls',
'setPageLoadStates',
'setTransitionPageMode',
'cancelAutoScroll',
'setShowPreview',
],
);

20
src/features/reader/viewer/ReaderViewer.tsx
View File

@@ -43,7 +43,6 @@ import {
import { useMouseDragScroll } from '@/base/hooks/useMouseDragScroll.tsx';
import { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx';
import { useReaderAutoScroll } from '@/features/reader/auto-scroll/hooks/useReaderAutoScroll.ts';
@@ -65,7 +64,7 @@ import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types
import { useReaderPreserveScrollPosition } from '@/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts';
import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
import { getReaderStore, useReaderStore } from '@/features/reader/ReaderStore.ts';
import { getReaderStore, useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
[ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -169,8 +168,13 @@ const BaseReaderViewer = forwardRef(
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
const isDragging = useMouseDragScroll(scrollElementRef);
const automaticScrolling = useReaderAutoScrollContext();
useEffect(() => automaticScrolling.setScrollRef(scrollElementRef), []);
const automaticScrolling = useReaderStoreShallow((state) => ({
isPaused: state.autoScroll.isPaused,
pause: state.autoScroll.pause,
resume: state.autoScroll.resume,
setScrollRef: state.autoScroll.setScrollRef,
}));
useEffect(() => automaticScrolling.setScrollRef(scrollElementRef.current), []);
const scrollbarXSize = MediaQuery.useGetScrollbarSize('width', scrollElementRef.current);
const scrollbarYSize = MediaQuery.useGetScrollbarSize('height', scrollElementRef.current);
@@ -271,7 +275,13 @@ const BaseReaderViewer = forwardRef(
useReaderHideCursorOnInactivity(scrollElementRef);
useReaderHorizontalModeInvertXYScrolling(readingMode, readingDirection, scrollElementRef);
useReaderHideOverlayOnUserScroll(isOverlayVisible, showPreview, setShowPreview, scrollElementRef);
useReaderAutoScroll(isOverlayVisible, automaticScrolling, isStaticNav);
useReaderAutoScroll(
isOverlayVisible,
automaticScrolling.isPaused,
automaticScrolling.pause,
automaticScrolling.resume,
isStaticNav,
);
useReaderPreserveScrollPosition(
scrollElementRef,
currentChapter?.id,