From 525173e05ebcd57cbd7f37bd6ad9fef203879482 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sun, 21 Sep 2025 00:50:19 +0200 Subject: [PATCH] Add dedicated store access util functions Makes it easier to find the specific store slice usage --- .../reader/auto-scroll/ReaderAutoScroll.tsx | 12 ++-- .../ReaderNavBarDesktopAutoScroll.tsx | 4 +- .../reader/filters/ReaderRGBAFilter.tsx | 4 +- .../reader/hooks/useReaderSetChaptersState.ts | 4 +- src/features/reader/hotkeys/ReaderHotkeys.tsx | 54 +++++++------- .../useReaderInfiniteScrollUpdateChapter.ts | 8 +-- .../overlay/components/ReaderPageNumber.tsx | 15 ++-- .../hooks/useReaderHideOverlayOnUserScroll.ts | 4 +- .../mobile/ReaderOverlayHeaderMobile.tsx | 10 ++- .../desktop/ReaderNavBarDesktop.tsx | 10 ++- .../components/ReaderNavBarDesktopActions.tsx | 6 +- .../ReaderNavBarDesktopPageNavigation.tsx | 6 +- .../ReaderNavBarDesktopQuickSettings.tsx | 4 +- .../mobile/ReaderBottomBarMobile.tsx | 6 +- .../ReaderBottomBarMobileQuickSettings.tsx | 6 +- .../progress-bar/ReaderProgressBar.tsx | 12 ++-- .../desktop/StandardReaderProgressBar.tsx | 20 +++--- .../mobile/MobileReaderProgressBar.tsx | 21 ++++-- src/features/reader/screens/Reader.tsx | 29 +++++--- .../reader/services/ReaderControls.ts | 70 ++++++++++--------- src/features/reader/services/ReaderService.ts | 21 +++--- .../components/ReaderSettingsTabs.tsx | 4 +- .../settings/screens/ReaderSettings.tsx | 4 +- src/features/reader/stores/ReaderStore.ts | 24 +++++++ .../reader/tap-zones/TapZoneLayout.tsx | 6 +- src/features/reader/viewer/ReaderViewer.tsx | 22 ++++-- .../reader/viewer/components/ReaderPage.tsx | 4 +- .../components/ReaderTransitionPage.tsx | 18 +++-- 28 files changed, 247 insertions(+), 161 deletions(-) diff --git a/src/features/reader/auto-scroll/ReaderAutoScroll.tsx b/src/features/reader/auto-scroll/ReaderAutoScroll.tsx index 95c805f1..253f636e 100644 --- a/src/features/reader/auto-scroll/ReaderAutoScroll.tsx +++ b/src/features/reader/auto-scroll/ReaderAutoScroll.tsx @@ -17,7 +17,11 @@ 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, useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + getReaderAutoScrollStore, + useReaderAutoScrollStore, + useReaderSettingsStore, +} from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderAutoScroll = ({ themeDirection, @@ -26,11 +30,11 @@ const BaseReaderAutoScroll = ({ themeDirection: Direction; combinedDirection: Direction; }) => { - const { scrollRef, direction } = useReaderStore((state) => ({ + const { scrollRef, direction } = useReaderAutoScrollStore((state) => ({ scrollRef: state.autoScroll.scrollRef, direction: state.autoScroll.direction, })); - const { readingMode, autoScroll } = useReaderStore((state) => ({ + const { readingMode, autoScroll } = useReaderSettingsStore((state) => ({ readingMode: state.settings.readingMode.value, autoScroll: state.settings.autoScroll, })); @@ -60,7 +64,7 @@ const BaseReaderAutoScroll = ({ ); useEffect(() => { - const autoScrollStore = getReaderStore().autoScroll; + const autoScrollStore = getReaderAutoScrollStore(); autoScrollStore.setIsActive(automaticScrolling.isActive); autoScrollStore.setIsPaused(automaticScrolling.isPaused); diff --git a/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx b/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx index 25d260ac..8a02e034 100644 --- a/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx +++ b/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx @@ -17,7 +17,7 @@ import { useRef } from 'react'; 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 { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderAutoScrollStore } from '@/features/reader/stores/ReaderStore.ts'; export const ReaderNavBarDesktopAutoScroll = ({ autoScroll, @@ -26,7 +26,7 @@ export const ReaderNavBarDesktopAutoScroll = ({ setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void; }) => { const { t } = useTranslation(); - const { isActive, toggleActive } = useReaderStore((state) => ({ + const { isActive, toggleActive } = useReaderAutoScrollStore((state) => ({ isActive: state.autoScroll.isActive, toggleActive: state.autoScroll.toggleActive, })); diff --git a/src/features/reader/filters/ReaderRGBAFilter.tsx b/src/features/reader/filters/ReaderRGBAFilter.tsx index ab1a231f..b5aa1d5c 100644 --- a/src/features/reader/filters/ReaderRGBAFilter.tsx +++ b/src/features/reader/filters/ReaderRGBAFilter.tsx @@ -10,13 +10,13 @@ import Box from '@mui/material/Box'; import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderRGBAFilter = ({ readerNavBarWidth }: Pick) => { const { value: { red, green, blue, alpha, blendMode }, enabled, - } = useReaderStore((state) => state.settings.customFilter.rgba); + } = useReaderSettingsStore((state) => state.settings.customFilter.rgba); if (!enabled) { return null; diff --git a/src/features/reader/hooks/useReaderSetChaptersState.ts b/src/features/reader/hooks/useReaderSetChaptersState.ts index 8c95eba4..12518852 100644 --- a/src/features/reader/hooks/useReaderSetChaptersState.ts +++ b/src/features/reader/hooks/useReaderSetChaptersState.ts @@ -20,7 +20,7 @@ import { filterChapters } from '@/features/chapter/utils/ChapterList.util.tsx'; import { ChapterListOptions } from '@/features/chapter/Chapter.types.ts'; import { getReaderChapterFromCache } from '@/features/reader/Reader.utils.ts'; import { DirectionOffset } from '@/base/Base.types.ts'; -import { getReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { getReaderChaptersStore } from '@/features/reader/stores/ReaderStore.ts'; import { READER_DEFAULT_CHAPTERS_STATE } from '@/features/reader/stores/ReaderChaptersStore.ts'; @@ -79,7 +79,7 @@ export const useReaderSetChaptersState = ( navigate('', { replace: true, state: { ...locationState, updateInitialChapter: undefined } }); } - getReaderStore().chapters.setReaderStateChapters((prevState) => { + getReaderChaptersStore().setReaderStateChapters((prevState) => { const hasCurrentChapterChanged = newCurrentChapter?.id !== prevState.currentChapter?.id; return { diff --git a/src/features/reader/hotkeys/ReaderHotkeys.tsx b/src/features/reader/hotkeys/ReaderHotkeys.tsx index 4f219ec7..14df90d0 100644 --- a/src/features/reader/hotkeys/ReaderHotkeys.tsx +++ b/src/features/reader/hotkeys/ReaderHotkeys.tsx @@ -23,7 +23,13 @@ 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 { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + getReaderAutoScrollStore, + getReaderOverlayStore, + getReaderSettingsStore, + getReaderTapZoneStore, + useReaderSettingsStore, +} from '@/features/reader/stores/ReaderStore.ts'; const useHotkeys = (...args: Parameters): ReturnType => { const [keys, callback, options, dependencies] = args; @@ -60,7 +66,7 @@ export const ReaderHotkeys = ({ }) => { const readerThemeDirection = ReaderService.useGetThemeDirection(); const { enableScope, disableScope } = useHotkeysContext(); - const { hotkeys } = useReaderStore((state) => ({ + const { hotkeys } = useReaderSettingsStore((state) => ({ hotkeys: state.settings.hotkeys, })); const exitReader = ReaderService.useExit(); @@ -70,10 +76,8 @@ export const ReaderHotkeys = ({ useHotkeys( hotkeys[ReaderHotkey.SCROLL_BACKWARD], () => { - const { - autoScroll, - settings: { readingMode, readingDirection, scrollAmount }, - } = getReaderStore(); + const autoScroll = getReaderAutoScrollStore(); + const { readingMode, readingDirection, scrollAmount } = getReaderSettingsStore(); if (autoScroll.isActive) { autoScroll.setDirection(ScrollOffset.BACKWARD); @@ -90,7 +94,7 @@ export const ReaderHotkeys = ({ readingMode.value, readingDirection.value, scrollElementRef.current, - getReaderStore().tapZone.setShowPreview, + getReaderTapZoneStore().setShowPreview, scrollAmount, ); }, @@ -99,10 +103,8 @@ export const ReaderHotkeys = ({ useHotkeys( hotkeys[ReaderHotkey.SCROLL_FORWARD], () => { - const { - autoScroll, - settings: { readingMode, readingDirection, scrollAmount }, - } = getReaderStore(); + const autoScroll = getReaderAutoScrollStore(); + const { readingMode, readingDirection, scrollAmount } = getReaderSettingsStore(); if (autoScroll.isActive) { autoScroll.setDirection(ScrollOffset.FORWARD); @@ -119,7 +121,7 @@ export const ReaderHotkeys = ({ readingMode.value, readingDirection.value, scrollElementRef.current, - getReaderStore().tapZone.setShowPreview, + getReaderTapZoneStore().setShowPreview, scrollAmount, ); }, @@ -136,61 +138,61 @@ export const ReaderHotkeys = ({ [readerThemeDirection], ); useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () => - getReaderStore().overlay.setIsVisible(!getReaderStore().overlay.isVisible), + getReaderOverlayStore().setIsVisible(!getReaderOverlayStore().isVisible), ); useHotkeys( hotkeys[ReaderHotkey.CYCLE_SCALE_TYPE], () => { updateSettingCycleThrough( 'pageScaleMode', - getReaderStore().settings.pageScaleMode.value, + getReaderSettingsStore().pageScaleMode.value, READER_PAGE_SCALE_MODE_VALUES, - getReaderStore().settings.pageScaleMode.isDefault, + getReaderSettingsStore().pageScaleMode.isDefault, true, ); }, [], ); useHotkeys(hotkeys[ReaderHotkey.STRETCH_IMAGE], () => - ReaderService.updateSetting('shouldStretchPage', !getReaderStore().settings.shouldStretchPage.value), + ReaderService.updateSetting('shouldStretchPage', !getReaderSettingsStore().shouldStretchPage.value), ); useHotkeys(hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES], () => ReaderService.updateSetting( 'shouldOffsetDoubleSpreads', - !getReaderStore().settings.shouldOffsetDoubleSpreads.value, + !getReaderSettingsStore().shouldOffsetDoubleSpreads.value, ), ); useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_MODE], () => { updateSettingCycleThrough( 'readingMode', - getReaderStore().settings.readingMode.value, + getReaderSettingsStore().readingMode.value, READING_MODE_VALUES, - getReaderStore().settings.readingMode.isDefault, + getReaderSettingsStore().readingMode.isDefault, true, ); }); useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_DIRECTION], () => { updateSettingCycleThrough( 'readingDirection', - getReaderStore().settings.readingDirection.value, + getReaderSettingsStore().readingDirection.value, READING_DIRECTION_VALUES, - getReaderStore().settings.readingDirection.isDefault, + getReaderSettingsStore().readingDirection.isDefault, true, ); }); - useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], () => getReaderStore().autoScroll.toggleActive(), { + useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], () => getReaderAutoScrollStore().toggleActive(), { preventDefault: true, }); useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE], () => ReaderService.updateSetting('autoScroll', { - ...getReaderStore().settings.autoScroll, - value: Math.min(AUTO_SCROLL_SPEED.max, getReaderStore().settings.autoScroll.value + AUTO_SCROLL_SPEED.step), + ...getReaderSettingsStore().autoScroll, + value: Math.min(AUTO_SCROLL_SPEED.max, getReaderSettingsStore().autoScroll.value + AUTO_SCROLL_SPEED.step), }), ); useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE], () => ReaderService.updateSetting('autoScroll', { - ...getReaderStore().settings.autoScroll, - value: Math.max(AUTO_SCROLL_SPEED.min, getReaderStore().settings.autoScroll.value - AUTO_SCROLL_SPEED.step), + ...getReaderSettingsStore().autoScroll, + value: Math.max(AUTO_SCROLL_SPEED.min, getReaderSettingsStore().autoScroll.value - AUTO_SCROLL_SPEED.step), }), ); useHotkeys(hotkeys[ReaderHotkey.EXIT_READER], exitReader, [exitReader]); diff --git a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts index 9fe726b1..d736a92e 100644 --- a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts +++ b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts @@ -15,7 +15,7 @@ import { import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts'; import { useIntersectionObserver } from '@/base/hooks/useIntersectionObserver.tsx'; -import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { getReaderScrollbarStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; interface ElementIntersection { @@ -245,7 +245,7 @@ export const useReaderInfiniteScrollUpdateChapter = ( image: HTMLElement | null, scrollElement: HTMLElement | null, ) => { - const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderStore( + const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderSettingsStore( (state) => ({ readingMode: state.settings.readingMode.value, readingDirection: state.settings.readingDirection.value, @@ -323,8 +323,8 @@ export const useReaderInfiniteScrollUpdateChapter = ( const elementIntersectionInfo = getElementIntersectionInfo( readingDirection, entry.target.getBoundingClientRect(), - getReaderStore().scrollbar.xSize, - getReaderStore().scrollbar.ySize, + getReaderScrollbarStore().xSize, + getReaderScrollbarStore().ySize, ); const { start: isStartIntersecting, end: isEndIntersecting } = getElementIntersection( elementIntersectionInfo, diff --git a/src/features/reader/overlay/components/ReaderPageNumber.tsx b/src/features/reader/overlay/components/ReaderPageNumber.tsx index 1b249207..5562a578 100644 --- a/src/features/reader/overlay/components/ReaderPageNumber.tsx +++ b/src/features/reader/overlay/components/ReaderPageNumber.tsx @@ -17,25 +17,30 @@ import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx'; import { reverseString } from '@/base/utils/Strings.ts'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + useReaderPagesStore, + useReaderProgressBarStore, + useReaderScrollbarStore, + useReaderSettingsStore, +} from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderPageNumber = ({ isDesktop, readerNavBarWidth, }: Pick, 'isDesktop'> & Pick) => { - const scrollbar = useReaderStore((state) => state.scrollbar); - const { currentPageIndex, pages, totalPages } = useReaderStore((state) => ({ + const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); + const { currentPageIndex, pages, totalPages } = useReaderPagesStore((state) => ({ currentPageIndex: state.pages.currentPageIndex, pages: state.pages.pages, totalPages: state.pages.totalPages, })); - const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderStore((state) => ({ + const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderSettingsStore((state) => ({ readingDirection: state.settings.readingDirection.value, shouldShowPageNumber: state.settings.shouldShowPageNumber, progressBarType: state.settings.progressBarType, })); - const isMaximized = useReaderStore((state) => state.progressBar.isMaximized); + const isMaximized = useReaderProgressBarStore((state) => state.progressBar.isMaximized); const pageName = useMemo(() => { const currentPageName = getPage(currentPageIndex, pages).name; diff --git a/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts b/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts index c776ec4d..18f3b5dc 100644 --- a/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts +++ b/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts @@ -8,7 +8,7 @@ import { MutableRefObject, useEffect } from 'react'; import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts'; -import { getReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { getReaderOverlayStore } from '@/features/reader/stores/ReaderStore.ts'; export const useReaderHideOverlayOnUserScroll = ( isOverlayVisible: boolean, @@ -19,7 +19,7 @@ export const useReaderHideOverlayOnUserScroll = ( useEffect(() => { const handleScroll = () => { if (isOverlayVisible) { - getReaderStore().overlay.setIsVisible(false); + getReaderOverlayStore().setIsVisible(false); } if (showPreview) { diff --git a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx index dce34949..74e33b19 100644 --- a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx +++ b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx @@ -30,17 +30,21 @@ import { FALLBACK_CHAPTER } from '@/features/chapter/Chapter.constants.ts'; import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts'; import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx'; import { requestManager } from '@/lib/requests/RequestManager.ts'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + useReaderChaptersStore, + useReaderScrollbarStore, + useReaderStore, +} from '@/features/reader/stores/ReaderStore.ts'; const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' }; const BaseReaderOverlayHeaderMobile = forwardRef(({ isVisible }, ref) => { const { t } = useTranslation(); const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' }); - const currentChapter = useReaderStore((state) => state.chapters.currentChapter); + const currentChapter = useReaderChaptersStore((state) => state.chapters.currentChapter); const manga = useReaderStore((state) => state.manga); - const scrollbar = useReaderStore((state) => state.scrollbar); + const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); const { id: mangaId, title } = manga ?? DEFAULT_MANGA; const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER; diff --git a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx index 6ac5c67f..c0d87d75 100644 --- a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx +++ b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx @@ -29,7 +29,11 @@ import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholde import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + useReaderChaptersStore, + useReaderSettingsStore, + useReaderStore, +} from '@/features/reader/stores/ReaderStore.ts'; const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => { const wasNavBarStaticRef = useRef(isStaticNav); @@ -56,13 +60,13 @@ const BaseReaderNavBarDesktop = ({ }: ReaderNavBarDesktopProps & Pick) => { const { t } = useTranslation(); const manga = useReaderStore((state) => state.manga); - const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStore((state) => ({ + const { chapters, currentChapter, previousChapter, nextChapter } = useReaderChaptersStore((state) => ({ chapters: state.chapters.chapters, currentChapter: state.chapters.currentChapter, previousChapter: state.chapters.previousChapter, nextChapter: state.chapters.nextChapter, })); - const isStaticNav = useReaderStore((state) => state.settings.isStaticNav); + const isStaticNav = useReaderSettingsStore((state) => state.settings.isStaticNav); const [navBarElement, setNavBarElement] = useState(); useResizeObserver( diff --git a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx index 74effb60..0df6f369 100644 --- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx +++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx @@ -22,7 +22,7 @@ import { CHAPTER_ACTION_TO_TRANSLATION, FALLBACK_CHAPTER } from '@/features/chap import { IconBrowser } from '@/assets/icons/IconBrowser.tsx'; import { IconWebView } from '@/assets/icons/IconWebView.tsx'; import { requestManager } from '@/lib/requests/RequestManager.ts'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderChaptersStore, useReaderPagesStore } from '@/features/reader/stores/ReaderStore.ts'; import { ChapterDownloadInfo, ChapterIdInfo } from '@/features/chapter/Chapter.types.ts'; const DownloadButton = ({ @@ -62,12 +62,12 @@ const DownloadButton = ({ }; export const ReaderNavBarDesktopActions = memo(() => { - const currentChapter = useReaderStore((state) => state.chapters.currentChapter); + const currentChapter = useReaderChaptersStore((state) => state.chapters.currentChapter); const { id, isBookmarked, realUrl } = currentChapter ?? FALLBACK_CHAPTER; const { t } = useTranslation(); - const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderStore((state) => ({ + const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderPagesStore((state) => ({ pageLoadStates: state.pages.pageLoadStates, setPageLoadStates: state.pages.setPageLoadStates, setRetryFailedPagesKeyPrefix: state.pages.setRetryFailedPagesKeyPrefix, diff --git a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx index 98e1de6d..e102b337 100644 --- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx +++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx @@ -17,17 +17,17 @@ import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progres import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts'; import { ReaderNavBarDesktopNextPreviousButton } from '@/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopNextPreviousButton.tsx'; import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderPagesStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; const BaseReaderNavBarDesktopPageNavigation = () => { const { t } = useTranslation(); const getOptionForDirection = useGetOptionForDirection(); - const { currentPageIndex, pages } = useReaderStore((state) => ({ + const { currentPageIndex, pages } = useReaderPagesStore((state) => ({ currentPageIndex: state.pages.currentPageIndex, pages: state.pages.pages, })); - const readingDirection = useReaderStore((state) => state.settings.readingDirection.value); + const readingDirection = useReaderSettingsStore((state) => state.settings.readingDirection.value); const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]); const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection]; diff --git a/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx b/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx index 4affcdda..ec116fa6 100644 --- a/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx +++ b/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx @@ -18,12 +18,12 @@ import { ReaderNavBarDesktopReadingDirection } from '@/features/reader/overlay/n import { ReaderNavBarDesktopProps } from '@/features/reader/overlay/ReaderOverlay.types.ts'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick) => { const { t } = useTranslation(); const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } = - useReaderStore((state) => ({ + useReaderSettingsStore((state) => ({ readingMode: state.settings.readingMode, shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads, pageScaleMode: state.settings.pageScaleMode, diff --git a/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx b/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx index e5ae0cb2..2cd99742 100644 --- a/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx +++ b/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx @@ -24,7 +24,7 @@ import { MobileReaderProgressBar } from '@/features/reader/overlay/progress-bar/ import { ReaderChapterList } from '@/features/reader/overlay/navigation/components/ReaderChapterList.tsx'; import { ReaderBottomBarMobileQuickSettings } from '@/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderChaptersStore, useReaderScrollbarStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderBottomBarMobile = ({ openSettings, @@ -32,14 +32,14 @@ const BaseReaderBottomBarMobile = ({ topOffset = 0, }: ReaderBottomBarMobileProps & { topOffset?: number }) => { const { t } = useTranslation(); - const { currentChapter, chapters } = useReaderStore((state) => ({ + const { currentChapter, chapters } = useReaderChaptersStore((state) => ({ currentChapter: state.chapters.currentChapter, chapters: state.chapters.chapters, })); const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' }); const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' }); - const scrollbar = useReaderStore((state) => state.scrollbar); + const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); const [bottomBarRefHeight, setBottomBarRefHeight] = useState(0); const bottomBarRef = useRef(null); diff --git a/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx b/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx index 55995ace..c087752c 100644 --- a/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx +++ b/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx @@ -15,15 +15,15 @@ import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx'; import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx'; import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderAutoScrollStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderBottomBarMobileQuickSettings = () => { const { t } = useTranslation(); - const { isActive, toggleActive } = useReaderStore((state) => ({ + const { isActive, toggleActive } = useReaderAutoScrollStore((state) => ({ isActive: state.autoScroll.isActive, toggleActive: state.autoScroll.toggleActive, })); - const { readingMode, readingDirection, autoScroll } = useReaderStore((state) => ({ + const { readingMode, readingDirection, autoScroll } = useReaderSettingsStore((state) => ({ readingMode: state.settings.readingMode, readingDirection: state.settings.readingDirection, autoScroll: state.settings.autoScroll, diff --git a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx index 952b9cad..78be02e1 100644 --- a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx @@ -31,7 +31,11 @@ import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; import { ReaderProgressBarSlotWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotWrapper.tsx'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; import { ReadingMode } from '@/features/reader/Reader.types.ts'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + useReaderPagesStore, + useReaderProgressBarStore, + useReaderSettingsStore, +} from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderProgressBar = ({ slotProps, @@ -62,14 +66,14 @@ const BaseReaderProgressBar = ({ direction: ReturnType; fullSegmentClicks: boolean; }) => { - const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderStore((state) => ({ + const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderPagesStore((state) => ({ pages: state.pages.pages, pageLoadStates: state.pages.pageLoadStates, totalPages: state.pages.totalPages, currentPageIndex: state.pages.currentPageIndex, })); - const readingMode = useReaderStore((state) => state.settings.readingMode.value); - const { isDragging, setIsDragging } = useReaderStore((state) => ({ + const readingMode = useReaderSettingsStore((state) => state.settings.readingMode.value); + const { isDragging, setIsDragging } = useReaderProgressBarStore((state) => ({ isDragging: state.progressBar.isDragging, setIsDragging: state.progressBar.setIsDragging, })); diff --git a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx index c6c098f6..5c46a749 100644 --- a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx @@ -20,7 +20,12 @@ import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx'; import { ReaderProgressBarSlotDesktop } from '@/features/reader/overlay/progress-bar/desktop/components/ReaderProgressBarSlotDesktop.tsx'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + useReaderPagesStore, + useReaderProgressBarStore, + useReaderScrollbarStore, + useReaderSettingsStore, +} from '@/features/reader/stores/ReaderStore.ts'; const BaseStandardReaderProgressBar = ({ readerNavBarWidth, @@ -30,17 +35,16 @@ const BaseStandardReaderProgressBar = ({ }) => { const theme = useTheme(); - const scrollbar = useReaderStore((state) => state.scrollbar); - const totalPages = useReaderStore((state) => state.pages.totalPages); - const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } = useReaderStore( - (state) => ({ + const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); + const totalPages = useReaderPagesStore((state) => state.pages.totalPages); + const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } = + useReaderSettingsStore((state) => ({ progressBarType: state.settings.progressBarType, progressBarSize: state.settings.progressBarSize, progressBarPosition: state.settings.progressBarPosition, progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical, - }), - ); - const { isMaximized, setIsMaximized, isDragging } = useReaderStore((state) => ({ + })); + const { isMaximized, setIsMaximized, isDragging } = useReaderProgressBarStore((state) => ({ isMaximized: state.progressBar.isMaximized, setIsMaximized: state.progressBar.setIsMaximized, isDragging: state.progressBar.isDragging, diff --git a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx index 7c34a0b6..03bf4a75 100644 --- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx @@ -28,7 +28,14 @@ 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 { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + useReaderChaptersStore, + useReaderOverlayStore, + useReaderPagesStore, + useReaderProgressBarStore, + useReaderScrollbarStore, + useReaderSettingsStore, +} from '@/features/reader/stores/ReaderStore.ts'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record = { @@ -48,21 +55,21 @@ const BaseMobileReaderProgressBar = ({ topOffset?: number; bottomOffset?: number; }) => { - const scrollbar = useReaderStore((state) => state.scrollbar); - const isVisible = useReaderStore((state) => state.overlay.isVisible); - const { currentPageIndex, pages } = useReaderStore((state) => ({ + const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); + const isVisible = useReaderOverlayStore((state) => state.overlay.isVisible); + const { currentPageIndex, pages } = useReaderPagesStore((state) => ({ currentPageIndex: state.pages.currentPageIndex, pages: state.pages.pages, })); - const { previousChapter, nextChapter } = useReaderStore((state) => ({ + const { previousChapter, nextChapter } = useReaderChaptersStore((state) => ({ previousChapter: state.chapters.previousChapter, nextChapter: state.chapters.nextChapter, })); - const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStore((state) => ({ + const { progressBarPosition, progressBarPositionAutoVertical } = useReaderSettingsStore((state) => ({ progressBarPosition: state.settings.progressBarPosition, progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical, })); - const { setIsMaximized, isDragging } = useReaderStore((state) => ({ + const { setIsMaximized, isDragging } = useReaderProgressBarStore((state) => ({ setIsMaximized: state.progressBar.setIsMaximized, isDragging: state.progressBar.isDragging, })); diff --git a/src/features/reader/screens/Reader.tsx b/src/features/reader/screens/Reader.tsx index 43aca425..ac84541f 100644 --- a/src/features/reader/screens/Reader.tsx +++ b/src/features/reader/screens/Reader.tsx @@ -35,7 +35,14 @@ import { useReaderSetChaptersState } from '@/features/reader/hooks/useReaderSetC 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 { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + getReaderStore, + useReaderChaptersStore, + useReaderOverlayStore, + useReaderSettingsStore, + useReaderStore, + useReaderTapZoneStore, +} from '@/features/reader/stores/ReaderStore.ts'; import { ReaderAutoScroll } from '@/features/reader/auto-scroll/ReaderAutoScroll.tsx'; @@ -45,13 +52,15 @@ const BaseReader = ({ }: Pick) => { const { t } = useTranslation(); const manga = useReaderStore((state) => state.manga); - const overlay = useReaderStore((state) => state.overlay); - const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderStore((state) => ({ - mangaChapters: state.chapters.mangaChapters, - initialChapter: state.chapters.initialChapter, - chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling, - currentChapter: state.chapters.currentChapter, - })); + const overlay = useReaderOverlayStore((state) => state.overlay); + const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderChaptersStore( + (state) => ({ + mangaChapters: state.chapters.mangaChapters, + initialChapter: state.chapters.initialChapter, + chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling, + currentChapter: state.chapters.currentChapter, + }), + ); const { shouldSkipDupChapters, shouldSkipFilteredChapters, @@ -62,7 +71,7 @@ const BaseReader = ({ shouldShowReadingModePreview, shouldShowTapZoneLayoutPreview, setSettings, - } = useReaderStore((state) => ({ + } = useReaderSettingsStore((state) => ({ shouldSkipDupChapters: state.settings.shouldSkipDupChapters, shouldSkipFilteredChapters: state.settings.shouldSkipFilteredChapters, backgroundColor: state.settings.backgroundColor, @@ -73,7 +82,7 @@ const BaseReader = ({ shouldShowTapZoneLayoutPreview: state.settings.shouldShowTapZoneLayoutPreview, setSettings: state.settings.setSettings, })); - const setShowPreview = useReaderStore((state) => state.tapZone.setShowPreview); + const setShowPreview = useReaderTapZoneStore((state) => state.tapZone.setShowPreview); const scrollElementRef = useRef(null); diff --git a/src/features/reader/services/ReaderControls.ts b/src/features/reader/services/ReaderControls.ts index 2d10b2e1..3dae0b90 100644 --- a/src/features/reader/services/ReaderControls.ts +++ b/src/features/reader/services/ReaderControls.ts @@ -48,7 +48,13 @@ import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types. import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx'; import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'; import { TReaderProgressCurrentPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts'; -import { getReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + getReaderChaptersStore, + getReaderOverlayStore, + getReaderPagesStore, + getReaderSettingsStore, + getReaderTapZoneStore, +} from '@/features/reader/stores/ReaderStore.ts'; const getScrollDirectionInvert = ( scrollDirection: ScrollDirection, @@ -118,7 +124,7 @@ export class ReaderControls { const getNewScrollPosition = (currentPos: number, elementSize: number) => currentPos + elementSize * scrollAmount * scrollDirection; - getReaderStore().overlay.setIsVisible(false); + getReaderOverlayStore().setIsVisible(false); setShowPreview(false); const doScroll = ( @@ -162,16 +168,15 @@ export class ReaderControls { scrollIntoView: boolean = true, ): void { const { - chapters: { - currentChapter, - previousChapter, - nextChapter, - chapters, - visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder }, - setReaderStateChapters, - }, - settings: { shouldInformAboutMissingChapter, shouldInformAboutScanlatorChange, shouldUseInfiniteScroll }, - } = getReaderStore(); + currentChapter, + previousChapter, + nextChapter, + chapters, + visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder }, + setReaderStateChapters, + } = getReaderChaptersStore(); + const { shouldInformAboutMissingChapter, shouldInformAboutScanlatorChange, shouldUseInfiniteScroll } = + getReaderSettingsStore(); if (!currentChapter) { return; @@ -311,10 +316,9 @@ export class ReaderControls { } static openPage(page: number | 'previous' | 'next', forceDirection?: Direction, hideOverlay: boolean = true): void { - const { - pages: { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode }, - settings: { readingDirection, readingMode, shouldShowTransitionPage }, - } = getReaderStore(); + const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } = + getReaderPagesStore(); + const { readingDirection, readingMode, shouldShowTransitionPage } = getReaderSettingsStore(); const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value]; @@ -336,8 +340,8 @@ export class ReaderControls { const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value); if (hideOverlay) { - getReaderStore().overlay.setIsVisible(false); - getReaderStore().tapZone.setShowPreview(false); + getReaderOverlayStore().setIsVisible(false); + getReaderTapZoneStore().setShowPreview(false); } const hideTransitionPage = () => setTransitionPageMode(ReaderTransitionPageMode.NONE); @@ -360,7 +364,7 @@ export class ReaderControls { isFirstPage && (!shouldShowTransitionPage || isPreviousTransitionPageVisible) && convertedPage === 'previous' && - !!getReaderStore().chapters.previousChapter; + !!getReaderChaptersStore().previousChapter; if (shouldOpenPreviousChapter) { ReaderControls.openChapter('previous'); return; @@ -370,7 +374,7 @@ export class ReaderControls { isLastPage && (!shouldShowTransitionPage || isNextTransitionPageVisible) && convertedPage === 'next' && - !!getReaderStore().chapters.nextChapter; + !!getReaderChaptersStore().nextChapter; if (shouldOpenNextChapter) { ReaderControls.openChapter('next'); return; @@ -415,17 +419,15 @@ export class ReaderControls { return useCallback( (pageIndex, debounceChapterUpdate = true, endReached = false) => { + const { currentPageIndex, setCurrentPageIndex } = getReaderPagesStore(); const { - pages: { currentPageIndex, setCurrentPageIndex }, - chapters: { - currentChapter, - chapters, - previousChapter, - nextChapter, - visibleChapters, - setReaderStateChapters, - }, - } = getReaderStore(); + currentChapter, + chapters, + previousChapter, + nextChapter, + visibleChapters, + setReaderStateChapters, + } = getReaderChaptersStore(); if (pageIndex === currentPageIndex && !endReached) { return; @@ -526,14 +528,14 @@ export class ReaderControls { return; } - const { readingMode, readingDirection, isStaticNav, scrollAmount } = getReaderStore().settings; + const { readingMode, readingDirection, isStaticNav, scrollAmount } = getReaderSettingsStore(); const rect = e.currentTarget.getBoundingClientRect(); const rectRelativeX = e.clientX - rect.left; const rectRelativeY = e.clientY - rect.top; const action = ReaderTapZoneService.getAction(rectRelativeX, rectRelativeY); - getReaderStore().tapZone.setShowPreview(false); + getReaderTapZoneStore().setShowPreview(false); const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value); const scrollDirection = @@ -541,7 +543,7 @@ export class ReaderControls { switch (action) { case TapZoneRegionType.MENU: - getReaderStore().overlay.setIsVisible(isStaticNav || !getReaderStore().overlay.isVisible); + getReaderOverlayStore().setIsVisible(isStaticNav || !getReaderOverlayStore().isVisible); break; case TapZoneRegionType.PREVIOUS: case TapZoneRegionType.NEXT: @@ -552,7 +554,7 @@ export class ReaderControls { readingMode.value, readingDirection.value, scrollElement, - getReaderStore().tapZone.setShowPreview, + getReaderTapZoneStore().setShowPreview, scrollAmount, ); } else { diff --git a/src/features/reader/services/ReaderService.ts b/src/features/reader/services/ReaderService.ts index fa3c8ffb..e4b3d321 100644 --- a/src/features/reader/services/ReaderService.ts +++ b/src/features/reader/services/ReaderService.ts @@ -46,7 +46,12 @@ 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, useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + getReaderChaptersStore, + getReaderSettingsStore, + getReaderStore, + useReaderSettingsStore, +} from '@/features/reader/stores/ReaderStore.ts'; import { ReactRouter } from '@/lib/react-router/ReactRouter.ts'; const DIRECTION_TO_INVERTED: Record = { @@ -152,11 +157,9 @@ export class ReaderService { return useCallback( (patch) => { - const { - manga, - chapters: { currentChapter, mangaChapters, chapters }, - settings: { shouldSkipDupChapters }, - } = getReaderStore(); + const { manga } = getReaderStore(); + const { currentChapter, mangaChapters, chapters } = getReaderChaptersStore(); + const { shouldSkipDupChapters } = getReaderSettingsStore(); if (!manga || !currentChapter || !mangaChapters) { return; @@ -227,7 +230,7 @@ export class ReaderService { static useGetThemeDirection(): Direction { const { direction } = useTheme(); - const readingDirection = useReaderStore((state) => state.settings.readingDirection.value); + const readingDirection = useReaderSettingsStore((state) => state.settings.readingDirection.value); return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection ? direction @@ -336,7 +339,7 @@ export class ReaderService { static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } { const isTouchDevice = MediaQuery.useIsTouchDevice(); - const overlayMode = useReaderStore((state) => state.settings.overlayMode); + const overlayMode = useReaderSettingsStore((state) => state.settings.overlayMode); const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO; const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP; @@ -353,7 +356,7 @@ export class ReaderService { } static useExit(): () => void { - const exitMode = useReaderStore((state) => state.settings.exitMode); + const exitMode = useReaderSettingsStore((state) => state.settings.exitMode); const handleBack = useBackButton(); const navigate = useNavigate(); diff --git a/src/features/reader/settings/components/ReaderSettingsTabs.tsx b/src/features/reader/settings/components/ReaderSettingsTabs.tsx index 47c68c20..e1c9ea82 100644 --- a/src/features/reader/settings/components/ReaderSettingsTabs.tsx +++ b/src/features/reader/settings/components/ReaderSettingsTabs.tsx @@ -23,7 +23,7 @@ import { ReaderBehaviourSettings } from '@/features/reader/settings/behaviour/Re import { ReaderDefaultLayoutSettings } from '@/features/reader/settings/layout/ReaderDefaultLayoutSettings.tsx'; import { ReaderHotkeysSettings } from '@/features/reader/hotkeys/settings/ReaderHotkeysSettings.tsx'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderTapZoneStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderSettingsTabs = ({ activeTab, @@ -45,7 +45,7 @@ const BaseReaderSettingsTabs = ({ }) => { const { t } = useTranslation(); const isTouchDevice = MediaQuery.useIsTouchDevice(); - const setShowPreview = useReaderStore((state) => state.tapZone.setShowPreview); + const setShowPreview = useReaderTapZoneStore((state) => state.tapZone.setShowPreview); return ( <> diff --git a/src/features/reader/settings/screens/ReaderSettings.tsx b/src/features/reader/settings/screens/ReaderSettings.tsx index 45d85b73..7e98ee6f 100644 --- a/src/features/reader/settings/screens/ReaderSettings.tsx +++ b/src/features/reader/settings/screens/ReaderSettings.tsx @@ -15,10 +15,10 @@ import { ReaderSettingsTabs } from '@/features/reader/settings/components/Reader import { ReaderSettingTab } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { useDisableAllHotkeysWhileMounted } from '@/features/hotkeys/Hotkeys.utils.ts'; import { applyStyles } from '@/base/utils/ApplyStyles.ts'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts'; export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => { - const settings = useReaderStore((state) => state.settings); + const settings = useReaderSettingsStore((state) => state.settings); useDisableAllHotkeysWhileMounted(isOpen); diff --git a/src/features/reader/stores/ReaderStore.ts b/src/features/reader/stores/ReaderStore.ts index 8b6187af..fa841086 100644 --- a/src/features/reader/stores/ReaderStore.ts +++ b/src/features/reader/stores/ReaderStore.ts @@ -116,3 +116,27 @@ const readerStore = create()( ); export const useReaderStore = (selector: (state: ReaderStore) => T): T => readerStore(useShallow(selector)); export const getReaderStore = () => readerStore.getState(); + +export const useReaderScrollbarStore = useReaderStore; +export const getReaderScrollbarStore = () => readerStore.getState().scrollbar; + +export const useReaderSettingsStore = useReaderStore; +export const getReaderSettingsStore = () => readerStore.getState().settings; + +export const useReaderOverlayStore = useReaderStore; +export const getReaderOverlayStore = () => readerStore.getState().overlay; + +export const useReaderAutoScrollStore = useReaderStore; +export const getReaderAutoScrollStore = () => readerStore.getState().autoScroll; + +export const useReaderPagesStore = useReaderStore; +export const getReaderPagesStore = () => readerStore.getState().pages; + +export const useReaderChaptersStore = useReaderStore; +export const getReaderChaptersStore = () => readerStore.getState().chapters; + +export const useReaderProgressBarStore = useReaderStore; +export const getReaderProgressBarStore = () => readerStore.getState().progressBar; + +export const useReaderTapZoneStore = useReaderStore; +export const getReaderTapZoneStore = () => readerStore.getState().tapZone; diff --git a/src/features/reader/tap-zones/TapZoneLayout.tsx b/src/features/reader/tap-zones/TapZoneLayout.tsx index c6a0725e..69196776 100644 --- a/src/features/reader/tap-zones/TapZoneLayout.tsx +++ b/src/features/reader/tap-zones/TapZoneLayout.tsx @@ -15,18 +15,18 @@ import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; import { ReadingDirection } from '@/features/reader/Reader.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderSettingsStore, useReaderTapZoneStore } from '@/features/reader/stores/ReaderStore.ts'; const CANVAS_ID = 'reader-tap-zone-layout-canvas'; const BaseTapZoneLayout = ({ readerNavBarWidth }: Pick) => { const theme = useTheme(); - const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderStore((state) => ({ + const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderSettingsStore((state) => ({ tapZoneLayout: state.settings.tapZoneLayout.value, tapZoneInvertMode: state.settings.tapZoneInvertMode.value, readingDirection: state.settings.readingDirection.value, })); - const showPreview = useReaderStore((state) => state.tapZone.showPreview); + const showPreview = useReaderTapZoneStore((state) => state.tapZone.showPreview); const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); diff --git a/src/features/reader/viewer/ReaderViewer.tsx b/src/features/reader/viewer/ReaderViewer.tsx index b73deb6a..83bb17ef 100644 --- a/src/features/reader/viewer/ReaderViewer.tsx +++ b/src/features/reader/viewer/ReaderViewer.tsx @@ -56,7 +56,15 @@ 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/stores/ReaderStore.ts'; +import { + getReaderStore, + useReaderAutoScrollStore, + useReaderChaptersStore, + useReaderOverlayStore, + useReaderPagesStore, + useReaderSettingsStore, + useReaderTapZoneStore, +} from '@/features/reader/stores/ReaderStore.ts'; const READING_MODE_TO_IN_VIEWPORT_TYPE: Record = { [ReadingMode.SINGLE_PAGE]: PageInViewportType.X, @@ -78,7 +86,7 @@ const BaseReaderViewer = forwardRef( ref: ForwardedRef, ) => { const { direction: themeDirection } = useTheme(); - const isOverlayVisible = useReaderStore((state) => state.overlay.isVisible); + const isOverlayVisible = useReaderOverlayStore((state) => state.overlay.isVisible); const { currentPageIndex, pageToScrollToIndex, @@ -92,7 +100,7 @@ const BaseReaderViewer = forwardRef( transitionPageMode, retryFailedPagesKeyPrefix, setTransitionPageMode, - } = useReaderStore((state) => ({ + } = useReaderPagesStore((state) => ({ currentPageIndex: state.pages.currentPageIndex, pageToScrollToIndex: state.pages.pageToScrollToIndex, setPageToScrollToIndex: state.pages.setPageToScrollToIndex, @@ -113,7 +121,7 @@ const BaseReaderViewer = forwardRef( visibleChapters, setReaderStateChapters, isCurrentChapterReady, - } = useReaderStore((state) => ({ + } = useReaderChaptersStore((state) => ({ initialChapter: state.chapters.initialChapter, currentChapter: state.chapters.currentChapter, chapters: state.chapters.chapters, @@ -132,7 +140,7 @@ const BaseReaderViewer = forwardRef( customFilter, shouldStretchPage, isStaticNav, - } = useReaderStore((state) => ({ + } = useReaderSettingsStore((state) => ({ readingMode: state.settings.readingMode.value, readingDirection: state.settings.readingDirection.value, readerWidth: state.settings.readerWidth.value, @@ -144,7 +152,7 @@ const BaseReaderViewer = forwardRef( shouldStretchPage: state.settings.shouldStretchPage.value, isStaticNav: state.settings.isStaticNav, })); - const { showPreview, setShowPreview } = useReaderStore((state) => ({ + const { showPreview, setShowPreview } = useReaderTapZoneStore((state) => ({ showPreview: state.tapZone.showPreview, setShowPreview: state.tapZone.setShowPreview, })); @@ -159,7 +167,7 @@ const BaseReaderViewer = forwardRef( const isContinuousReadingModeActive = isContinuousReadingMode(readingMode); const isDragging = useMouseDragScroll(scrollElementRef); - const automaticScrolling = useReaderStore((state) => ({ + const automaticScrolling = useReaderAutoScrollStore((state) => ({ isPaused: state.autoScroll.isPaused, pause: state.autoScroll.pause, resume: state.autoScroll.resume, diff --git a/src/features/reader/viewer/components/ReaderPage.tsx b/src/features/reader/viewer/components/ReaderPage.tsx index 5a6264f6..d21d5fad 100644 --- a/src/features/reader/viewer/components/ReaderPage.tsx +++ b/src/features/reader/viewer/components/ReaderPage.tsx @@ -17,7 +17,7 @@ import { import { applyStyles } from '@/base/utils/ApplyStyles.ts'; import { MediaQuery } from '@/base/utils/MediaQuery.tsx'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderScrollbarStore } from '@/features/reader/stores/ReaderStore.ts'; const getCustomFilterString = (customFilter: ReaderCustomFilter): string => Object.keys(customFilter) @@ -86,7 +86,7 @@ const BaseReaderPage = ({ const { src } = props; const isTabletWidth = MediaQuery.useIsTabletWidth(); - const scrollbar = useReaderStore((state) => state.scrollbar); + const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); const handleLoad = useCallback( () => onLoad?.(pagesIndex, src, isPrimaryPage), diff --git a/src/features/reader/viewer/components/ReaderTransitionPage.tsx b/src/features/reader/viewer/components/ReaderTransitionPage.tsx index 1c4ef6cf..2f0f7555 100644 --- a/src/features/reader/viewer/components/ReaderTransitionPage.tsx +++ b/src/features/reader/viewer/components/ReaderTransitionPage.tsx @@ -29,7 +29,13 @@ import { getValueFromObject, noOp } from '@/lib/HelperFunctions.ts'; import { READER_BACKGROUND_TO_COLOR } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { ChapterType } from '@/lib/graphql/generated/graphql.ts'; import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts'; -import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; +import { + useReaderChaptersStore, + useReaderPagesStore, + useReaderScrollbarStore, + useReaderSettingsStore, + useReaderStore, +} from '@/features/reader/stores/ReaderStore.ts'; const ChapterInfo = ({ title, @@ -93,9 +99,9 @@ const BaseReaderTransitionPage = ({ }) => { const { t } = useTranslation(); const manga = useReaderStore((state) => state.manga); - const scrollbar = useReaderStore((state) => state.scrollbar); - const transitionPageMode = useReaderStore((state) => state.pages.transitionPageMode); - const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderStore((state) => ({ + const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); + const transitionPageMode = useReaderPagesStore((state) => state.pages.transitionPageMode); + const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderSettingsStore((state) => ({ readingMode: state.settings.readingMode.value, backgroundColor: state.settings.backgroundColor, shouldShowTransitionPage: state.settings.shouldShowTransitionPage, @@ -223,7 +229,7 @@ export const ReaderTransitionPage = withPropsFrom( memo(BaseReaderTransitionPage) as typeof BaseReaderTransitionPage, [ ({ chapterId }: Pick, 'chapterId'>) => { - const chapters = useReaderStore((state) => state.chapters.chapters); + const chapters = useReaderChaptersStore((state) => state.chapters.chapters); const currentChapterIndex = useMemo( () => chapters.findIndex((chapter) => chapter.id === chapterId), @@ -246,7 +252,7 @@ export const ReaderTransitionPage = withPropsFrom( useNavBarContext, ({ chapterId, type }: Pick, 'chapterId' | 'type'>) => { const handleBack = useBackButton(); - const chapters = useReaderStore((state) => state.chapters.chapters); + const chapters = useReaderChaptersStore((state) => state.chapters.chapters); const currentChapterIndex = useMemo( () => chapters.findIndex((chapter) => chapter.id === chapterId),