diff --git a/src/features/reader/auto-scroll/ReaderAutoScroll.tsx b/src/features/reader/auto-scroll/ReaderAutoScroll.tsx index 253f636e..b8e85426 100644 --- a/src/features/reader/auto-scroll/ReaderAutoScroll.tsx +++ b/src/features/reader/auto-scroll/ReaderAutoScroll.tsx @@ -31,12 +31,12 @@ const BaseReaderAutoScroll = ({ combinedDirection: Direction; }) => { const { scrollRef, direction } = useReaderAutoScrollStore((state) => ({ - scrollRef: state.autoScroll.scrollRef, - direction: state.autoScroll.direction, + scrollRef: state.scrollRef, + direction: state.direction, })); const { readingMode, autoScroll } = useReaderSettingsStore((state) => ({ - readingMode: state.settings.readingMode.value, - autoScroll: state.settings.autoScroll, + readingMode: state.readingMode.value, + autoScroll: state.autoScroll, })); const isScrollingInvertedBasedOnReadingDirection = diff --git a/src/features/reader/auto-scroll/hooks/useReaderAutoScroll.ts b/src/features/reader/auto-scroll/hooks/useReaderAutoScroll.ts index dabf402c..03776e79 100644 --- a/src/features/reader/auto-scroll/hooks/useReaderAutoScroll.ts +++ b/src/features/reader/auto-scroll/hooks/useReaderAutoScroll.ts @@ -12,7 +12,7 @@ import { getReaderAutoScrollStore, useReaderAutoScrollStore } from '@/features/r export const useReaderAutoScroll = (isOverlayVisible: boolean, isStaticNav: IReaderSettings['isStaticNav']): void => { const { isPaused } = useReaderAutoScrollStore((state) => ({ - isPaused: state.autoScroll.isPaused, + isPaused: state.isPaused, })); useEffect(() => { 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 92d72934..b7f6ec9b 100644 --- a/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx +++ b/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx @@ -28,7 +28,7 @@ export const ReaderNavBarDesktopAutoScroll = ({ setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void; }) => { const { t } = useLingui(); - const isActive = useReaderAutoScrollStore((state) => state.autoScroll.isActive); + const isActive = useReaderAutoScrollStore((state) => state.isActive); const updateTimeout = useRef(undefined); diff --git a/src/features/reader/filters/ReaderRGBAFilter.tsx b/src/features/reader/filters/ReaderRGBAFilter.tsx index b5aa1d5c..38a6a94d 100644 --- a/src/features/reader/filters/ReaderRGBAFilter.tsx +++ b/src/features/reader/filters/ReaderRGBAFilter.tsx @@ -16,7 +16,7 @@ const BaseReaderRGBAFilter = ({ readerNavBarWidth }: Pick state.settings.customFilter.rgba); + } = useReaderSettingsStore((state) => state.customFilter.rgba); if (!enabled) { return null; diff --git a/src/features/reader/hotkeys/ReaderHotkeys.tsx b/src/features/reader/hotkeys/ReaderHotkeys.tsx index c2525d6c..1a858787 100644 --- a/src/features/reader/hotkeys/ReaderHotkeys.tsx +++ b/src/features/reader/hotkeys/ReaderHotkeys.tsx @@ -66,7 +66,7 @@ export const ReaderHotkeys = ({ const readerThemeDirection = ReaderService.useGetThemeDirection(); const { enableScope, disableScope } = useHotkeysContext(); const { hotkeys } = useReaderSettingsStore((state) => ({ - hotkeys: state.settings.hotkeys, + hotkeys: state.hotkeys, })); const exitReader = ReaderService.useExit(); diff --git a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts index e80da0d0..94c80bf0 100644 --- a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts +++ b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts @@ -247,10 +247,10 @@ export const useReaderInfiniteScrollUpdateChapter = ( ) => { const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderSettingsStore( (state) => ({ - readingMode: state.settings.readingMode.value, - readingDirection: state.settings.readingDirection.value, - shouldUseInfiniteScroll: state.settings.shouldUseInfiniteScroll, - shouldShowTransitionPage: state.settings.shouldShowTransitionPage, + readingMode: state.readingMode.value, + readingDirection: state.readingDirection.value, + shouldUseInfiniteScroll: state.shouldUseInfiniteScroll, + shouldShowTransitionPage: state.shouldShowTransitionPage, }), ); diff --git a/src/features/reader/overlay/ReaderOverlay.tsx b/src/features/reader/overlay/ReaderOverlay.tsx index 938efe83..ed775148 100644 --- a/src/features/reader/overlay/ReaderOverlay.tsx +++ b/src/features/reader/overlay/ReaderOverlay.tsx @@ -23,7 +23,7 @@ const BaseReaderOverlay = ({ isDesktop, isMobile, }: Pick, 'isDesktop' | 'isMobile'>) => { - const isVisible = useReaderOverlayStore((state) => state.overlay.isVisible); + const isVisible = useReaderOverlayStore((state) => state.isVisible); const [areSettingsOpen, setAreSettingsOpen] = useState(false); diff --git a/src/features/reader/overlay/components/ReaderPageNumber.tsx b/src/features/reader/overlay/components/ReaderPageNumber.tsx index 5562a578..f399e557 100644 --- a/src/features/reader/overlay/components/ReaderPageNumber.tsx +++ b/src/features/reader/overlay/components/ReaderPageNumber.tsx @@ -29,18 +29,18 @@ const BaseReaderPageNumber = ({ readerNavBarWidth, }: Pick, 'isDesktop'> & Pick) => { - const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); + const scrollbar = useReaderScrollbarStore((state) => state); const { currentPageIndex, pages, totalPages } = useReaderPagesStore((state) => ({ - currentPageIndex: state.pages.currentPageIndex, - pages: state.pages.pages, - totalPages: state.pages.totalPages, + currentPageIndex: state.currentPageIndex, + pages: state.pages, + totalPages: state.totalPages, })); const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderSettingsStore((state) => ({ - readingDirection: state.settings.readingDirection.value, - shouldShowPageNumber: state.settings.shouldShowPageNumber, - progressBarType: state.settings.progressBarType, + readingDirection: state.readingDirection.value, + shouldShowPageNumber: state.shouldShowPageNumber, + progressBarType: state.progressBarType, })); - const isMaximized = useReaderProgressBarStore((state) => state.progressBar.isMaximized); + const isMaximized = useReaderProgressBarStore((state) => state.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 30a6fa2f..50915a7d 100644 --- a/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts +++ b/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts @@ -18,7 +18,7 @@ export const useReaderHideOverlayOnUserScroll = ( scrollElementRef: MutableRefObject, ) => { const { showPreview } = useReaderTapZoneStore((state) => ({ - showPreview: state.tapZone.showPreview, + showPreview: state.showPreview, })); useEffect(() => { diff --git a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx index 0a75f352..afdd97e8 100644 --- a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx +++ b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx @@ -41,10 +41,10 @@ const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' }; const BaseReaderOverlayHeaderMobile = ({ isVisible, ref }: MobileHeaderProps & { ref?: Ref }) => { const { t } = useLingui(); const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' }); - const currentChapter = useReaderChaptersStore((state) => state.chapters.currentChapter); + const currentChapter = useReaderChaptersStore((state) => state.currentChapter); const manga = useReaderStore((state) => state.manga); - const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); + const scrollbar = useReaderScrollbarStore((state) => state); 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 8aa8e757..825fa046 100644 --- a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx +++ b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx @@ -69,15 +69,15 @@ const BaseReaderNavBarDesktop = ({ previousChapter, nextChapter, } = useReaderChaptersStore((state) => ({ - chapters: state.chapters.chapters, - currentChapterId: state.chapters.currentChapter?.id, - currentChapterName: state.chapters.currentChapter?.name, - currentChapterNumber: state.chapters.currentChapter?.chapterNumber, - currentChapterScanlator: state.chapters.currentChapter?.scanlator, - previousChapter: state.chapters.previousChapter, - nextChapter: state.chapters.nextChapter, + chapters: state.chapters, + currentChapterId: state.currentChapter?.id, + currentChapterName: state.currentChapter?.name, + currentChapterNumber: state.currentChapter?.chapterNumber, + currentChapterScanlator: state.currentChapter?.scanlator, + previousChapter: state.previousChapter, + nextChapter: state.nextChapter, })); - const isStaticNav = useReaderSettingsStore((state) => state.settings.isStaticNav); + const isStaticNav = useReaderSettingsStore((state) => state.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 8633bdb3..4f732133 100644 --- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx +++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx @@ -65,14 +65,14 @@ const DownloadButton = ({ id = -1, isDownloaded }: ChapterIdInfo & ChapterDownlo export const ReaderNavBarDesktopActions = memo(() => { const { id, isDownloaded, isBookmarked, realUrl } = useReaderChaptersStore((state) => ({ - id: state.chapters.currentChapter?.id ?? FALLBACK_CHAPTER.id, - isDownloaded: state.chapters.currentChapter?.isDownloaded ?? FALLBACK_CHAPTER.isDownloaded, - isBookmarked: state.chapters.currentChapter?.isBookmarked ?? FALLBACK_CHAPTER.isBookmarked, - realUrl: state.chapters.currentChapter?.realUrl ?? FALLBACK_CHAPTER.realUrl, + id: state.currentChapter?.id ?? FALLBACK_CHAPTER.id, + isDownloaded: state.currentChapter?.isDownloaded ?? FALLBACK_CHAPTER.isDownloaded, + isBookmarked: state.currentChapter?.isBookmarked ?? FALLBACK_CHAPTER.isBookmarked, + realUrl: state.currentChapter?.realUrl ?? FALLBACK_CHAPTER.realUrl, })); const { t } = useLingui(); - const pageLoadStates = useReaderPagesStore((state) => state.pages.pageLoadStates); + const pageLoadStates = useReaderPagesStore((state) => state.pageLoadStates); const pageRetryKeyPrefix = useRef(0); diff --git a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx index 12dfebc8..42d397e4 100644 --- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx +++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx @@ -24,10 +24,10 @@ const BaseReaderNavBarDesktopPageNavigation = () => { const { t } = useLingui(); const getOptionForDirection = useGetOptionForDirection(); const { currentPageIndex, pages } = useReaderPagesStore((state) => ({ - currentPageIndex: state.pages.currentPageIndex, - pages: state.pages.pages, + currentPageIndex: state.currentPageIndex, + pages: state.pages, })); - const readingDirection = useReaderSettingsStore((state) => state.settings.readingDirection.value); + const readingDirection = useReaderSettingsStore((state) => state.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 65b24551..ecaa8f0e 100644 --- a/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx +++ b/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx @@ -24,12 +24,12 @@ const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick ({ - readingMode: state.settings.readingMode, - shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads, - pageScaleMode: state.settings.pageScaleMode, - shouldStretchPage: state.settings.shouldStretchPage, - readingDirection: state.settings.readingDirection, - autoScroll: state.settings.autoScroll, + readingMode: state.readingMode, + shouldOffsetDoubleSpreads: state.shouldOffsetDoubleSpreads, + pageScaleMode: state.pageScaleMode, + shouldStretchPage: state.shouldStretchPage, + readingDirection: state.readingDirection, + autoScroll: state.autoScroll, })); return ( diff --git a/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx b/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx index f4f276df..142b3b36 100644 --- a/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx +++ b/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx @@ -33,13 +33,13 @@ const BaseReaderBottomBarMobile = ({ }: ReaderBottomBarMobileProps & { topOffset?: number }) => { const { t } = useLingui(); const { currentChapterId, chapters } = useReaderChaptersStore((state) => ({ - currentChapterId: state.chapters.currentChapter?.id, - chapters: state.chapters.chapters, + currentChapterId: state.currentChapter?.id, + chapters: state.chapters, })); const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' }); const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' }); - const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); + const scrollbar = useReaderScrollbarStore((state) => state); 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 d1304e96..2933b82a 100644 --- a/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx +++ b/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx @@ -23,11 +23,11 @@ import { const BaseReaderBottomBarMobileQuickSettings = () => { const { t } = useLingui(); - const isActive = useReaderAutoScrollStore((state) => state.autoScroll.isActive); + const isActive = useReaderAutoScrollStore((state) => state.isActive); const { readingMode, readingDirection, autoScroll } = useReaderSettingsStore((state) => ({ - readingMode: state.settings.readingMode, - readingDirection: state.settings.readingDirection, - autoScroll: state.settings.autoScroll, + readingMode: state.readingMode, + readingDirection: state.readingDirection, + autoScroll: state.autoScroll, })); return ( diff --git a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx index 5c125b87..37bb5c2f 100644 --- a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx @@ -68,13 +68,13 @@ const BaseReaderProgressBar = ({ fullSegmentClicks: boolean; }) => { const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderPagesStore((state) => ({ - pages: state.pages.pages, - pageLoadStates: state.pages.pageLoadStates, - totalPages: state.pages.totalPages, - currentPageIndex: state.pages.currentPageIndex, + pages: state.pages, + pageLoadStates: state.pageLoadStates, + totalPages: state.totalPages, + currentPageIndex: state.currentPageIndex, })); - const readingMode = useReaderSettingsStore((state) => state.settings.readingMode.value); - const isDragging = useReaderProgressBarStore((state) => state.progressBar.isDragging); + const readingMode = useReaderSettingsStore((state) => state.readingMode.value); + const isDragging = useReaderProgressBarStore((state) => state.isDragging); const progressBarRef = useRef(null); const draggingDetectionTimeout = useRef(undefined); diff --git a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx index 7f355178..9188088a 100644 --- a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx @@ -36,18 +36,18 @@ const BaseStandardReaderProgressBar = ({ }) => { const theme = useTheme(); - const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); - const totalPages = useReaderPagesStore((state) => state.pages.totalPages); + const scrollbar = useReaderScrollbarStore((state) => state); + const totalPages = useReaderPagesStore((state) => state.totalPages); const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } = useReaderSettingsStore((state) => ({ - progressBarType: state.settings.progressBarType, - progressBarSize: state.settings.progressBarSize, - progressBarPosition: state.settings.progressBarPosition, - progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical, + progressBarType: state.progressBarType, + progressBarSize: state.progressBarSize, + progressBarPosition: state.progressBarPosition, + progressBarPositionAutoVertical: state.progressBarPositionAutoVertical, })); const { isMaximized, isDragging } = useReaderProgressBarStore((state) => ({ - isMaximized: state.progressBar.isMaximized, - isDragging: state.progressBar.isDragging, + isMaximized: state.isMaximized, + isDragging: state.isDragging, })); const [, setRefreshProgressBarPosition] = useState({}); diff --git a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx index 6234b9ef..9b7b64c9 100644 --- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx @@ -56,21 +56,21 @@ const BaseMobileReaderProgressBar = ({ topOffset?: number; bottomOffset?: number; }) => { - const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); - const isVisible = useReaderOverlayStore((state) => state.overlay.isVisible); + const scrollbar = useReaderScrollbarStore((state) => state); + const isVisible = useReaderOverlayStore((state) => state.isVisible); const { currentPageIndex, pages } = useReaderPagesStore((state) => ({ - currentPageIndex: state.pages.currentPageIndex, - pages: state.pages.pages, + currentPageIndex: state.currentPageIndex, + pages: state.pages, })); const { previousChapter, nextChapter } = useReaderChaptersStore((state) => ({ - previousChapter: state.chapters.previousChapter, - nextChapter: state.chapters.nextChapter, + previousChapter: state.previousChapter, + nextChapter: state.nextChapter, })); const { progressBarPosition, progressBarPositionAutoVertical } = useReaderSettingsStore((state) => ({ - progressBarPosition: state.settings.progressBarPosition, - progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical, + progressBarPosition: state.progressBarPosition, + progressBarPositionAutoVertical: state.progressBarPositionAutoVertical, })); - const isDragging = useReaderProgressBarStore((state) => state.progressBar.isDragging); + const isDragging = useReaderProgressBarStore((state) => state.isDragging); const [, setRefreshProgressBarPosition] = useState({}); useResizeObserver( diff --git a/src/features/reader/screens/Reader.tsx b/src/features/reader/screens/Reader.tsx index c742aa26..c696905b 100644 --- a/src/features/reader/screens/Reader.tsx +++ b/src/features/reader/screens/Reader.tsx @@ -52,10 +52,10 @@ const BaseReader = ({ const manga = useReaderStore((state) => state.manga); const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderChaptersStore( (state) => ({ - mangaChapters: state.chapters.mangaChapters, - initialChapter: state.chapters.initialChapter, - chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling, - currentChapter: state.chapters.currentChapter, + mangaChapters: state.mangaChapters, + initialChapter: state.initialChapter, + chapterForDuplicatesHandling: state.chapterForDuplicatesHandling, + currentChapter: state.currentChapter, }), ); const { @@ -68,14 +68,14 @@ const BaseReader = ({ shouldShowReadingModePreview, shouldShowTapZoneLayoutPreview, } = useReaderSettingsStore((state) => ({ - shouldSkipDupChapters: state.settings.shouldSkipDupChapters, - shouldSkipFilteredChapters: state.settings.shouldSkipFilteredChapters, - backgroundColor: state.settings.backgroundColor, - readingMode: state.settings.readingMode, - tapZoneLayout: state.settings.tapZoneLayout, - tapZoneInvertMode: state.settings.tapZoneInvertMode, - shouldShowReadingModePreview: state.settings.shouldShowReadingModePreview, - shouldShowTapZoneLayoutPreview: state.settings.shouldShowTapZoneLayoutPreview, + shouldSkipDupChapters: state.shouldSkipDupChapters, + shouldSkipFilteredChapters: state.shouldSkipFilteredChapters, + backgroundColor: state.backgroundColor, + readingMode: state.readingMode, + tapZoneLayout: state.tapZoneLayout, + tapZoneInvertMode: state.tapZoneInvertMode, + shouldShowReadingModePreview: state.shouldShowReadingModePreview, + shouldShowTapZoneLayoutPreview: state.shouldShowTapZoneLayoutPreview, })); const scrollElementRef = useRef(null); diff --git a/src/features/reader/services/ReaderService.ts b/src/features/reader/services/ReaderService.ts index 26778ed0..cfcb504b 100644 --- a/src/features/reader/services/ReaderService.ts +++ b/src/features/reader/services/ReaderService.ts @@ -230,7 +230,7 @@ export class ReaderService { static useGetThemeDirection(): Direction { const { direction } = useTheme(); - const readingDirection = useReaderSettingsStore((state) => state.settings.readingDirection.value); + const readingDirection = useReaderSettingsStore((state) => state.readingDirection.value); return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection ? direction @@ -372,7 +372,7 @@ export class ReaderService { static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } { const isTouchDevice = MediaQuery.useIsTouchDevice(); - const overlayMode = useReaderSettingsStore((state) => state.settings.overlayMode); + const overlayMode = useReaderSettingsStore((state) => state.overlayMode); const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO; const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP; @@ -389,7 +389,7 @@ export class ReaderService { } static useExit(): () => void { - const exitMode = useReaderSettingsStore((state) => state.settings.exitMode); + const exitMode = useReaderSettingsStore((state) => state.exitMode); const handleBack = useBackButton(); const navigate = useNavigate(); diff --git a/src/features/reader/settings/screens/ReaderSettings.tsx b/src/features/reader/settings/screens/ReaderSettings.tsx index 7e98ee6f..3b552d26 100644 --- a/src/features/reader/settings/screens/ReaderSettings.tsx +++ b/src/features/reader/settings/screens/ReaderSettings.tsx @@ -18,7 +18,7 @@ import { applyStyles } from '@/base/utils/ApplyStyles.ts'; import { useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts'; export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => { - const settings = useReaderSettingsStore((state) => state.settings); + const settings = useReaderSettingsStore((state) => state); useDisableAllHotkeysWhileMounted(isOpen); diff --git a/src/features/reader/stores/ReaderStore.ts b/src/features/reader/stores/ReaderStore.ts index 3e750cc4..206ecb3a 100644 --- a/src/features/reader/stores/ReaderStore.ts +++ b/src/features/reader/stores/ReaderStore.ts @@ -166,26 +166,34 @@ 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 useReaderScrollbarStore = (selector: (state: ReaderStore['scrollbar']) => T): T => + readerStore(useShallow((state) => selector(state.scrollbar))); export const getReaderScrollbarStore = () => readerStore.getState().scrollbar; -export const useReaderSettingsStore = useReaderStore; +export const useReaderSettingsStore = (selector: (state: ReaderStore['settings']) => T): T => + readerStore(useShallow((state) => selector(state.settings))); export const getReaderSettingsStore = () => readerStore.getState().settings; -export const useReaderOverlayStore = useReaderStore; +export const useReaderOverlayStore = (selector: (state: ReaderOverlayStoreSlice['overlay']) => T): T => + readerStore(useShallow((state) => selector(state.overlay))); export const getReaderOverlayStore = () => readerStore.getState().overlay; -export const useReaderAutoScrollStore = useReaderStore; +export const useReaderAutoScrollStore = (selector: (state: ReaderAutoScrollStoreSlice['autoScroll']) => T): T => + readerStore(useShallow((state) => selector(state.autoScroll))); export const getReaderAutoScrollStore = () => readerStore.getState().autoScroll; -export const useReaderPagesStore = useReaderStore; +export const useReaderPagesStore = (selector: (state: ReaderPagesStoreSlice['pages']) => T): T => + readerStore(useShallow((state) => selector(state.pages))); export const getReaderPagesStore = () => readerStore.getState().pages; -export const useReaderChaptersStore = useReaderStore; +export const useReaderChaptersStore = (selector: (state: ReaderChaptersStoreSlice['chapters']) => T): T => + readerStore(useShallow((state) => selector(state.chapters))); export const getReaderChaptersStore = () => readerStore.getState().chapters; -export const useReaderProgressBarStore = useReaderStore; +export const useReaderProgressBarStore = (selector: (state: ReaderProgressBarStoreSlice['progressBar']) => T): T => + readerStore(useShallow((state) => selector(state.progressBar))); export const getReaderProgressBarStore = () => readerStore.getState().progressBar; -export const useReaderTapZoneStore = useReaderStore; +export const useReaderTapZoneStore = (selector: (state: ReaderTapZoneStoreSlice['tapZone']) => T): T => + readerStore(useShallow((state) => selector(state.tapZone))); 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 69196776..6e865a8b 100644 --- a/src/features/reader/tap-zones/TapZoneLayout.tsx +++ b/src/features/reader/tap-zones/TapZoneLayout.tsx @@ -22,11 +22,11 @@ const CANVAS_ID = 'reader-tap-zone-layout-canvas'; const BaseTapZoneLayout = ({ readerNavBarWidth }: Pick) => { const theme = useTheme(); const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderSettingsStore((state) => ({ - tapZoneLayout: state.settings.tapZoneLayout.value, - tapZoneInvertMode: state.settings.tapZoneInvertMode.value, - readingDirection: state.settings.readingDirection.value, + tapZoneLayout: state.tapZoneLayout.value, + tapZoneInvertMode: state.tapZoneInvertMode.value, + readingDirection: state.readingDirection.value, })); - const showPreview = useReaderTapZoneStore((state) => state.tapZone.showPreview); + const showPreview = useReaderTapZoneStore((state) => state.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 abf994c6..6cf6ea4f 100644 --- a/src/features/reader/viewer/ReaderViewer.tsx +++ b/src/features/reader/viewer/ReaderViewer.tsx @@ -72,23 +72,23 @@ const BaseReaderViewer = ({ ref?: ForwardedRef; }) => { const { direction: themeDirection } = useTheme(); - const isOverlayVisible = useReaderOverlayStore((state) => state.overlay.isVisible); + const isOverlayVisible = useReaderOverlayStore((state) => state.isVisible); const { currentPageIndex, pageToScrollToIndex, pages, totalPages, transitionPageMode, retryFailedPagesKeyPrefix } = useReaderPagesStore((state) => ({ - currentPageIndex: state.pages.currentPageIndex, - pageToScrollToIndex: state.pages.pageToScrollToIndex, - pages: state.pages.pages, - totalPages: state.pages.totalPages, - transitionPageMode: state.pages.transitionPageMode, - retryFailedPagesKeyPrefix: state.pages.retryFailedPagesKeyPrefix, + currentPageIndex: state.currentPageIndex, + pageToScrollToIndex: state.pageToScrollToIndex, + pages: state.pages, + totalPages: state.totalPages, + transitionPageMode: state.transitionPageMode, + retryFailedPagesKeyPrefix: state.retryFailedPagesKeyPrefix, })); const { initialChapter, currentChapter, chapters, visibleChapters, isCurrentChapterReady } = useReaderChaptersStore( (state) => ({ - initialChapter: state.chapters.initialChapter, - currentChapter: state.chapters.currentChapter, - chapters: state.chapters.chapters, - visibleChapters: state.chapters.visibleChapters, - isCurrentChapterReady: state.chapters.isCurrentChapterReady, + initialChapter: state.initialChapter, + currentChapter: state.currentChapter, + chapters: state.chapters, + visibleChapters: state.visibleChapters, + isCurrentChapterReady: state.isCurrentChapterReady, }), ); const { @@ -103,16 +103,16 @@ const BaseReaderViewer = ({ shouldStretchPage, isStaticNav, } = useReaderSettingsStore((state) => ({ - readingMode: state.settings.readingMode.value, - readingDirection: state.settings.readingDirection.value, - readerWidth: state.settings.readerWidth.value, - pageScaleMode: state.settings.pageScaleMode.value, - shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads.value, - imagePreLoadAmount: state.settings.imagePreLoadAmount, - pageGap: state.settings.pageGap.value, - customFilter: state.settings.customFilter, - shouldStretchPage: state.settings.shouldStretchPage.value, - isStaticNav: state.settings.isStaticNav, + readingMode: state.readingMode.value, + readingDirection: state.readingDirection.value, + readerWidth: state.readerWidth.value, + pageScaleMode: state.pageScaleMode.value, + shouldOffsetDoubleSpreads: state.shouldOffsetDoubleSpreads.value, + imagePreLoadAmount: state.imagePreLoadAmount, + pageGap: state.pageGap.value, + customFilter: state.customFilter, + shouldStretchPage: state.shouldStretchPage.value, + isStaticNav: state.isStaticNav, })); const { resumeMode = ReaderResumeMode.START } = useLocation().state ?? { resumeMode: ReaderResumeMode.START, diff --git a/src/features/reader/viewer/components/ReaderPage.tsx b/src/features/reader/viewer/components/ReaderPage.tsx index d21d5fad..d59c9dd1 100644 --- a/src/features/reader/viewer/components/ReaderPage.tsx +++ b/src/features/reader/viewer/components/ReaderPage.tsx @@ -86,7 +86,7 @@ const BaseReaderPage = ({ const { src } = props; const isTabletWidth = MediaQuery.useIsTabletWidth(); - const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); + const scrollbar = useReaderScrollbarStore((state) => state); 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 5c49fa0c..94f2333d 100644 --- a/src/features/reader/viewer/components/ReaderTransitionPage.tsx +++ b/src/features/reader/viewer/components/ReaderTransitionPage.tsx @@ -99,12 +99,12 @@ const BaseReaderTransitionPage = ({ }) => { const { t } = useLingui(); const manga = useReaderStore((state) => state.manga); - const scrollbar = useReaderScrollbarStore((state) => state.scrollbar); - const transitionPageMode = useReaderPagesStore((state) => state.pages.transitionPageMode); + const scrollbar = useReaderScrollbarStore((state) => state); + const transitionPageMode = useReaderPagesStore((state) => state.transitionPageMode); const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderSettingsStore((state) => ({ - readingMode: state.settings.readingMode.value, - backgroundColor: state.settings.backgroundColor, - shouldShowTransitionPage: state.settings.shouldShowTransitionPage, + readingMode: state.readingMode.value, + backgroundColor: state.backgroundColor, + shouldShowTransitionPage: state.shouldShowTransitionPage, })); const isPreviousType = type === ReaderTransitionPageMode.PREVIOUS; @@ -225,7 +225,7 @@ export const ReaderTransitionPage = withPropsFrom( memo(BaseReaderTransitionPage) as typeof BaseReaderTransitionPage, [ ({ chapterId }: Pick, 'chapterId'>) => { - const chapters = useReaderChaptersStore((state) => state.chapters.chapters); + const chapters = useReaderChaptersStore((state) => state.chapters); const currentChapterIndex = useMemo( () => chapters.findIndex((chapter) => chapter.id === chapterId), @@ -248,7 +248,7 @@ export const ReaderTransitionPage = withPropsFrom( useNavBarContext, ({ chapterId, type }: Pick, 'chapterId' | 'type'>) => { const handleBack = useBackButton(); - const chapters = useReaderChaptersStore((state) => state.chapters.chapters); + const chapters = useReaderChaptersStore((state) => state.chapters); const currentChapterIndex = useMemo( () => chapters.findIndex((chapter) => chapter.id === chapterId),