From e68cb65874c21f6849cbec4aa2e1433bc7881738 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sun, 31 Aug 2025 20:33:12 +0200 Subject: [PATCH] Move reader "overlay state" to "reader store" --- src/features/reader/ReaderStore.ts | 10 ++++-- .../reader/contexts/ReaderContextProvider.tsx | 9 ++--- .../reader/hooks/useReaderResetStates.ts | 4 --- src/features/reader/hotkeys/ReaderHotkeys.tsx | 9 +++-- .../reader/overlay/ReaderOverlay.types.ts | 5 --- .../reader/overlay/ReaderOverlayContext.tsx | 25 ------------- .../reader/overlay/ReaderOverlayStore.ts | 35 +++++++++++++++++++ .../hooks/useReaderHideOverlayOnUserScroll.ts | 5 ++- .../mobile/MobileReaderProgressBar.tsx | 9 ++--- src/features/reader/screens/Reader.tsx | 16 +++------ .../reader/services/ReaderControls.ts | 13 +++---- src/features/reader/viewer/ReaderViewer.tsx | 19 ++-------- src/lib/zustand/Zustand.types.ts | 11 ++++++ 13 files changed, 76 insertions(+), 94 deletions(-) delete mode 100644 src/features/reader/overlay/ReaderOverlayContext.tsx create mode 100644 src/features/reader/overlay/ReaderOverlayStore.ts create mode 100644 src/lib/zustand/Zustand.types.ts diff --git a/src/features/reader/ReaderStore.ts b/src/features/reader/ReaderStore.ts index 1eb6396a..547bb6d3 100644 --- a/src/features/reader/ReaderStore.ts +++ b/src/features/reader/ReaderStore.ts @@ -10,8 +10,12 @@ import { create } from 'zustand'; import { immer } from 'zustand/middleware/immer'; import { useShallow } from 'zustand/react/shallow'; import { TMangaReader } from '@/features/manga/Manga.types.ts'; +import { + createReaderOverlayStoreSlice, + ReaderOverlayStoreSlice, +} from '@/features/reader/overlay/ReaderOverlayStore.ts'; -interface ReaderStore { +interface ReaderStore extends ReaderOverlayStoreSlice { reset: () => void; manga: TMangaReader | undefined; setManga: (manga: TMangaReader | undefined) => void; @@ -32,12 +36,13 @@ const DEFAULT_STATE = { } satisfies Pick & { scrollbar: Pick }; export const useReaderStore = create()( - immer((set, get) => ({ + immer((set, get, store) => ({ ...DEFAULT_STATE, reset: () => set((draft) => { draft.manga = DEFAULT_STATE.manga; draft.scrollbar = { ...get().scrollbar, ...DEFAULT_STATE.scrollbar }; + get().overlay.reset(); }), setManga: (manga) => set((draft) => { @@ -54,6 +59,7 @@ export const useReaderStore = create()( draft.scrollbar.ySize = size; }), }, + ...createReaderOverlayStoreSlice(set, get, store), })), ); export const useReaderStoreShallow = (selector: (state: ReaderStore) => T): T => diff --git a/src/features/reader/contexts/ReaderContextProvider.tsx b/src/features/reader/contexts/ReaderContextProvider.tsx index 6f342859..63ec3e50 100644 --- a/src/features/reader/contexts/ReaderContextProvider.tsx +++ b/src/features/reader/contexts/ReaderContextProvider.tsx @@ -9,18 +9,15 @@ import { ReactNode } from 'react'; import { ReaderStateContextProvider } from '@/features/reader/contexts/state/ReaderStateContextProvider.tsx'; import { ReaderAutoScrollContextProvider } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx'; -import { ReaderOverlayContextProvider } from '@/features/reader/overlay/ReaderOverlayContext.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 }) => ( - - - {children} - - + + {children} + ); diff --git a/src/features/reader/hooks/useReaderResetStates.ts b/src/features/reader/hooks/useReaderResetStates.ts index 7c296e0e..1f38c96d 100644 --- a/src/features/reader/hooks/useReaderResetStates.ts +++ b/src/features/reader/hooks/useReaderResetStates.ts @@ -16,7 +16,6 @@ import { TReaderStateSettingsContext, } from '@/features/reader/Reader.types.ts'; import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts'; -import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts'; import { READER_STATE_CHAPTERS_DEFAULTS } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx'; import { getReaderStore } from '@/features/reader/ReaderStore.ts'; @@ -29,7 +28,6 @@ export const useReaderResetStates = ( setPageUrls: ReaderStatePages['setPageUrls'], setPageLoadStates: ReaderStatePages['setPageLoadStates'], setTransitionPageMode: ReaderStatePages['setTransitionPageMode'], - setIsOverlayVisible: TReaderOverlayContext['setIsVisible'], setSettings: TReaderStateSettingsContext['setSettings'], cancelAutoScroll: TReaderAutoScrollContext['cancel'], ) => { @@ -46,8 +44,6 @@ export const useReaderResetStates = ( setPageLoadStates([{ url: '', loaded: false }]); setTransitionPageMode(ReaderTransitionPageMode.NONE); - setIsOverlayVisible(false); - setSettings(DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG); cancelAutoScroll(); diff --git a/src/features/reader/hotkeys/ReaderHotkeys.tsx b/src/features/reader/hotkeys/ReaderHotkeys.tsx index e00702cf..8757afb1 100644 --- a/src/features/reader/hotkeys/ReaderHotkeys.tsx +++ b/src/features/reader/hotkeys/ReaderHotkeys.tsx @@ -12,7 +12,6 @@ import { useTheme } from '@mui/material/styles'; import { HOTKEY_SCOPES } from '@/features/hotkeys/Hotkeys.constants.ts'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { IReaderSettings, ReaderHotkey } from '@/features/reader/Reader.types.ts'; -import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx'; import { getNextRotationValue } from '@/base/utils/ValueRotationButton.utils.ts'; import { AUTO_SCROLL_SPEED, @@ -27,6 +26,7 @@ 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'; const useHotkeys = (...args: Parameters): ReturnType => { const [keys, callback, options, dependencies] = args; @@ -64,7 +64,6 @@ export const ReaderHotkeys = ({ const { direction: themeDirection } = useTheme(); const readerThemeDirection = ReaderService.useGetThemeDirection(); const { enableScope, disableScope } = useHotkeysContext(); - const { isVisible, setIsVisible: setIsOverlayVisible } = useReaderOverlayContext(); const { hotkeys, pageScaleMode, @@ -104,7 +103,6 @@ export const ReaderHotkeys = ({ themeDirection, scrollElementRef.current, openChapter, - setIsOverlayVisible, setShowPreview, scrollAmount, ); @@ -139,7 +137,6 @@ export const ReaderHotkeys = ({ themeDirection, scrollElementRef.current, openChapter, - setIsOverlayVisible, setShowPreview, scrollAmount, ); @@ -164,7 +161,9 @@ export const ReaderHotkeys = ({ () => openChapter(getOptionForDirection('next', 'previous', readerThemeDirection)), [openChapter, readerThemeDirection], ); - useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () => setIsOverlayVisible(!isVisible), [isVisible]); + useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () => + getReaderStore().overlay.setIsVisible(!getReaderStore().overlay.isVisible), + ); useHotkeys( hotkeys[ReaderHotkey.CYCLE_SCALE_TYPE], () => { diff --git a/src/features/reader/overlay/ReaderOverlay.types.ts b/src/features/reader/overlay/ReaderOverlay.types.ts index dad3d10c..bfa2aa04 100644 --- a/src/features/reader/overlay/ReaderOverlay.types.ts +++ b/src/features/reader/overlay/ReaderOverlay.types.ts @@ -19,8 +19,3 @@ interface ReaderNavBarBaseProps extends BaseReaderOverlayProps { export interface ReaderBottomBarMobileProps extends ReaderNavBarBaseProps {} export interface ReaderNavBarDesktopProps extends ReaderNavBarBaseProps {} - -export type TReaderOverlayContext = { - isVisible: boolean; - setIsVisible: React.Dispatch>; -}; diff --git a/src/features/reader/overlay/ReaderOverlayContext.tsx b/src/features/reader/overlay/ReaderOverlayContext.tsx deleted file mode 100644 index f7030019..00000000 --- a/src/features/reader/overlay/ReaderOverlayContext.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/* - * 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 { createContext, useContext, ReactNode, useMemo, useState } from 'react'; -import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts'; - -export const ReaderOverlayContext = createContext({ - isVisible: false, - setIsVisible: () => {}, -}); - -export const useReaderOverlayContext = () => useContext(ReaderOverlayContext); - -export const ReaderOverlayContextProvider = ({ children }: { children: ReactNode }) => { - const [isVisible, setIsVisible] = useState(false); - - const value = useMemo(() => ({ isVisible, setIsVisible }), [isVisible]); - - return {children}; -}; diff --git a/src/features/reader/overlay/ReaderOverlayStore.ts b/src/features/reader/overlay/ReaderOverlayStore.ts new file mode 100644 index 00000000..35dde60a --- /dev/null +++ b/src/features/reader/overlay/ReaderOverlayStore.ts @@ -0,0 +1,35 @@ +/* + * 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 { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts'; + +export interface ReaderOverlayStoreSlice { + overlay: { + isVisible: boolean; + setIsVisible: (visible: boolean) => void; + reset: () => void; + }; +} + +const DEFAULT_STATE = { + isVisible: false, +} satisfies Pick; + +export const createReaderOverlayStoreSlice = ( + ...[set, get]: Parameters> +): ReaderOverlayStoreSlice => + ({ + overlay: { + isVisible: DEFAULT_STATE.isVisible, + setIsVisible: (visible) => + set((draft) => { + draft.overlay.isVisible = visible; + }), + reset: () => set(() => ({ overlay: { ...get().overlay, ...DEFAULT_STATE } })), + }, + }) as T; diff --git a/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts b/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts index 5316b405..21ebd328 100644 --- a/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts +++ b/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts @@ -7,12 +7,11 @@ */ import { MutableRefObject, useEffect } from 'react'; -import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts'; import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts'; +import { getReaderStore } from '@/features/reader/ReaderStore.ts'; export const useReaderHideOverlayOnUserScroll = ( isOverlayVisible: boolean, - setIsOverlayVisible: TReaderOverlayContext['setIsVisible'], showPreview: TReaderTapZoneContext['showPreview'], setShowPreview: TReaderTapZoneContext['setShowPreview'], scrollElementRef: MutableRefObject, @@ -20,7 +19,7 @@ export const useReaderHideOverlayOnUserScroll = ( useEffect(() => { const handleScroll = () => { if (isOverlayVisible) { - setIsOverlayVisible(false); + getReaderStore().overlay.setIsVisible(false); } if (showPreview) { diff --git a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx index a31466f7..3e6619d2 100644 --- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx @@ -25,9 +25,7 @@ import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts import { IReaderSettings, ProgressBarPosition, ReaderStateChapters } from '@/features/reader/Reader.types.ts'; import { ReaderProgressBarDirectionWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarDirectionWrapper.tsx'; import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx'; -import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts'; import { ReaderProgressBarProps, TReaderProgressBarContext, @@ -38,7 +36,7 @@ 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 { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; +import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record = { [ProgressBarPosition.BOTTOM]: 'up', @@ -51,7 +49,6 @@ const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record & - Pick & Pick & Pick & Pick & { @@ -72,6 +68,7 @@ const BaseMobileReaderProgressBar = ({ }) => { const openChapter = ReaderControls.useOpenChapter(); const scrollbar = useReaderStoreShallow((state) => state.scrollbar); + const isVisible = useReaderStore((state) => state.overlay.isVisible); const [, setRefreshProgressBarPosition] = useState({}); useResizeObserver( @@ -361,7 +358,6 @@ export const MobileReaderProgressBar = withPropsFrom( memo(BaseMobileReaderProgressBar), [ useReaderStateChaptersContext, - useReaderOverlayContext, useReaderProgressBarContext, userReaderStatePagesContext, () => ({ direction: ReaderService.useGetThemeDirection() }), @@ -370,7 +366,6 @@ export const MobileReaderProgressBar = withPropsFrom( [ 'previousChapter', 'nextChapter', - 'isVisible', 'setIsMaximized', 'isDragging', 'currentPageIndex', diff --git a/src/features/reader/screens/Reader.tsx b/src/features/reader/screens/Reader.tsx index 542290f7..730210e1 100644 --- a/src/features/reader/screens/Reader.tsx +++ b/src/features/reader/screens/Reader.tsx @@ -22,7 +22,6 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts' import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx'; import { GET_CHAPTERS_READER } from '@/lib/graphql/queries/ChapterQuery.ts'; import { TapZoneLayout } from '@/features/reader/tap-zones/TapZoneLayout.tsx'; -import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx'; import { ReaderRGBAFilter } from '@/features/reader/filters/ReaderRGBAFilter.tsx'; import { useReaderStateSettingsContext } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx'; import { ReaderViewer } from '@/features/reader/viewer/ReaderViewer.tsx'; @@ -39,7 +38,6 @@ import { } from '@/features/reader/Reader.types.ts'; import { getErrorMessage } from '@/lib/HelperFunctions.ts'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; -import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.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'; @@ -57,8 +55,6 @@ import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderS const BaseReader = ({ setOverride, readerNavBarWidth, - isVisible: isOverlayVisible, - setIsVisible: setIsOverlayVisible, shouldSkipDupChapters, shouldSkipFilteredChapters, backgroundColor, @@ -83,7 +79,6 @@ const BaseReader = ({ cancelAutoScroll, setShowPreview, }: Pick & - Pick & Pick & Pick< IReaderSettings, @@ -117,6 +112,7 @@ const BaseReader = ({ }) => { const { t } = useTranslation(); const manga = useReaderStoreShallow((state) => state.manga); + const overlay = useReaderStoreShallow((state) => state.overlay); const scrollElementRef = useRef(null); @@ -166,7 +162,6 @@ const BaseReader = ({ setPageUrls, setPageLoadStates, setTransitionPageMode, - setIsOverlayVisible, setSettings, cancelAutoScroll, ); @@ -207,10 +202,10 @@ const BaseReader = ({ value: ( - + {!scrollElementRef.current && ( setIsOverlayVisible(!isOverlayVisible)} + onClick={() => overlay.setIsVisible(!overlay.isVisible)} sx={{ position: 'fixed', top: 0, @@ -226,7 +221,7 @@ const BaseReader = ({ }); return () => setOverride({ status: false, value: null }); - }, [isOverlayVisible, setIsOverlayVisible, scrollElementRef.current]); + }, [overlay.isVisible, scrollElementRef.current]); if (error) { return ( @@ -301,7 +296,6 @@ export const Reader = withPropsFrom( memo(BaseReader), [ useNavBarContext, - useReaderOverlayContext, useReaderStateChaptersContext, useReaderStateSettingsContext, () => { @@ -331,8 +325,6 @@ export const Reader = withPropsFrom( [ 'setOverride', 'readerNavBarWidth', - 'isVisible', - 'setIsVisible', 'shouldSkipDupChapters', 'shouldSkipFilteredChapters', 'backgroundColor', diff --git a/src/features/reader/services/ReaderControls.ts b/src/features/reader/services/ReaderControls.ts index 23d810b8..38f7cb0a 100644 --- a/src/features/reader/services/ReaderControls.ts +++ b/src/features/reader/services/ReaderControls.ts @@ -36,7 +36,6 @@ import { isEndOfPageInViewport, isPageInViewport, } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx'; -import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx'; import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx'; import { TapZoneRegionType, TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts'; import { ReaderTapZoneService } from '@/features/reader/tap-zones/ReaderTapZoneService.ts'; @@ -51,11 +50,11 @@ import { useMetadataServerSettings } from '@/features/settings/services/ServerSe import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.ts'; import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx'; import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'; -import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts'; import { ReaderProgressBarProps, TReaderProgressCurrentPage, } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts'; +import { getReaderStore } from '@/features/reader/ReaderStore.ts'; const getScrollDirectionInvert = ( scrollDirection: ScrollDirection, @@ -99,7 +98,6 @@ export class ReaderControls { themeDirection: Direction, element: HTMLElement, openChapter: ReturnType<(typeof ReaderControls)['useOpenChapter']>, - setIsOverlayVisible: TReaderOverlayContext['setIsVisible'], setShowPreview: TReaderTapZoneContext['setShowPreview'], scrollAmountPercentage: number = ReaderScrollAmount.LARGE, ): void { @@ -128,7 +126,7 @@ export class ReaderControls { const getNewScrollPosition = (currentPos: number, elementSize: number) => currentPos + elementSize * scrollAmount * scrollDirection; - setIsOverlayVisible(false); + getReaderStore().overlay.setIsVisible(false); setShowPreview(false); const doScroll = ( @@ -351,7 +349,6 @@ export class ReaderControls { const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } = userReaderStatePagesContext(); const { previousChapter, nextChapter } = useReaderStateChaptersContext(); - const { setIsVisible: setIsOverlayVisible } = useReaderOverlayContext(); const { setShowPreview } = useReaderTapZoneContext(); const { readingDirection, readingMode, shouldShowTransitionPage } = ReaderService.useSettings(); const openChapter = ReaderControls.useOpenChapter(); @@ -383,7 +380,7 @@ export class ReaderControls { ); if (hideOverlay) { - setIsOverlayVisible(false); + getReaderStore().overlay.setIsVisible(false); setShowPreview(false); } @@ -598,7 +595,6 @@ export class ReaderControls { scrollElement: HTMLElement | null, ): (event: React.MouseEvent) => void { const { direction: themeDirection } = useTheme(); - const { setIsVisible: setIsOverlayVisible } = useReaderOverlayContext(); const { currentPageIndex, pages } = userReaderStatePagesContext(); const { setShowPreview } = useReaderTapZoneContext(); const { readingMode, readingDirection, isStaticNav, scrollAmount } = ReaderService.useSettings(); @@ -624,7 +620,7 @@ export class ReaderControls { switch (action) { case TapZoneRegionType.MENU: - setIsOverlayVisible((isVisible) => isStaticNav || !isVisible); + getReaderStore().overlay.setIsVisible(isStaticNav || !getReaderStore().overlay.isVisible); break; case TapZoneRegionType.PREVIOUS: case TapZoneRegionType.NEXT: @@ -637,7 +633,6 @@ export class ReaderControls { themeDirection, scrollElement, openChapter, - setIsOverlayVisible, setShowPreview, scrollAmount, ); diff --git a/src/features/reader/viewer/ReaderViewer.tsx b/src/features/reader/viewer/ReaderViewer.tsx index 5aeff71c..94d4f850 100644 --- a/src/features/reader/viewer/ReaderViewer.tsx +++ b/src/features/reader/viewer/ReaderViewer.tsx @@ -41,9 +41,7 @@ import { shouldApplyReaderWidth, } from '@/features/reader/settings/ReaderSettings.utils.tsx'; import { useMouseDragScroll } from '@/base/hooks/useMouseDragScroll.tsx'; -import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx'; import { applyStyles } from '@/base/utils/ApplyStyles.ts'; -import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.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'; @@ -67,7 +65,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 } from '@/features/reader/ReaderStore.ts'; +import { getReaderStore, useReaderStore } from '@/features/reader/ReaderStore.ts'; const READING_MODE_TO_IN_VIEWPORT_TYPE: Record = { [ReadingMode.SINGLE_PAGE]: PageInViewportType.X, @@ -104,8 +102,6 @@ const BaseReaderViewer = forwardRef( shouldStretchPage, isStaticNav, readerNavBarWidth, - isVisible: isOverlayVisible, - setIsVisible: setIsOverlayVisible, updateCurrentPageIndex, showPreview, setShowPreview, @@ -145,7 +141,6 @@ const BaseReaderViewer = forwardRef( | 'isStaticNav' > & Pick & - Pick & Pick< ReaderStateChapters, | 'initialChapter' @@ -162,6 +157,7 @@ const BaseReaderViewer = forwardRef( ref: ForwardedRef, ) => { const { direction: themeDirection } = useTheme(); + const isOverlayVisible = useReaderStore((state) => state.overlay.isVisible); const { resumeMode = ReaderResumeMode.START } = useLocation().state ?? { resumeMode: ReaderResumeMode.START, }; @@ -274,13 +270,7 @@ const BaseReaderViewer = forwardRef( ); useReaderHideCursorOnInactivity(scrollElementRef); useReaderHorizontalModeInvertXYScrolling(readingMode, readingDirection, scrollElementRef); - useReaderHideOverlayOnUserScroll( - isOverlayVisible, - setIsOverlayVisible, - showPreview, - setShowPreview, - scrollElementRef, - ); + useReaderHideOverlayOnUserScroll(isOverlayVisible, showPreview, setShowPreview, scrollElementRef); useReaderAutoScroll(isOverlayVisible, automaticScrolling, isStaticNav); useReaderPreserveScrollPosition( scrollElementRef, @@ -447,7 +437,6 @@ export const ReaderViewer = withPropsFrom( [ userReaderStatePagesContext, ReaderService.useSettingsWithoutDefaultFlag, - useReaderOverlayContext, () => ({ updateCurrentPageIndex: ReaderControls.useUpdateCurrentPageIndex() }), useReaderTapZoneContext, useReaderStateChaptersContext, @@ -478,8 +467,6 @@ export const ReaderViewer = withPropsFrom( 'isStaticNav', 'readerNavBarWidth', 'transitionPageMode', - 'isVisible', - 'setIsVisible', 'updateCurrentPageIndex', 'showPreview', 'setShowPreview', diff --git a/src/lib/zustand/Zustand.types.ts b/src/lib/zustand/Zustand.types.ts new file mode 100644 index 00000000..b66efb49 --- /dev/null +++ b/src/lib/zustand/Zustand.types.ts @@ -0,0 +1,11 @@ +/* + * 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 { StateCreator } from 'zustand'; + +export type ImmerStateCreator = StateCreator;