diff --git a/src/UtilTypes.d.ts b/src/UtilTypes.d.ts index caff9bd4..82303bf5 100644 --- a/src/UtilTypes.d.ts +++ b/src/UtilTypes.d.ts @@ -34,10 +34,14 @@ type TupleUnion = { [S in U]: Exclude extends never ? [...R, S] : TupleUnion, [...R, S]>; }[U]; +type ValueWithDefaultFlag = { value: T; isDefault: boolean }; + type TransformRecordToWithDefaultFlag> = { - [K in keyof T]: { value: T[K]; isDefault: boolean }; + [K in keyof T]: ValueWithDefaultFlag; }; +type ExtractValueWithDefaultFlag> = T extends ValueWithDefaultFlag ? V : T; + type MergeObjectsArray = T extends [infer F, ...infer R] ? F & MergeObjectsArray : {}; diff --git a/src/features/reader/ReaderStore.ts b/src/features/reader/ReaderStore.ts index b12422a6..2f13549f 100644 --- a/src/features/reader/ReaderStore.ts +++ b/src/features/reader/ReaderStore.ts @@ -18,9 +18,14 @@ import { createReaderAutoScrollStoreSlice, ReaderAutoScrollStoreSlice, } from '@/features/reader/auto-scroll/ReaderAutoScrollStore.ts'; -import { ReaderStateChapters, ReaderStatePages } from '@/features/reader/Reader.types.ts'; +import { + IReaderSettingsWithDefaultFlag, + ReaderStateChapters, + ReaderStatePages, +} from '@/features/reader/Reader.types.ts'; import { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts'; import { READER_DEFAULT_CHAPTERS_STATE, READER_DEFAULT_PAGES_STATE } from '@/features/reader/ReaderStore.constants.ts'; +import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts'; interface ReaderPagesStoreSlice { pages: ReaderStatePages & { @@ -48,6 +53,9 @@ interface ReaderStore ySize: number; setYSize: (size: number) => void; }; + settings: IReaderSettingsWithDefaultFlag & { + setSettings: (settings: IReaderSettingsWithDefaultFlag) => void; + }; } const DEFAULT_STATE = { @@ -139,6 +147,10 @@ export const useReaderStore = create()( get().autoScroll.reset(); get().pages.reset(); get().chapters.reset(); + draft.settings = { + ...get().settings, + ...DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG, + }; }), setManga: (manga) => set((draft) => { @@ -155,6 +167,16 @@ export const useReaderStore = create()( draft.scrollbar.ySize = size; }), }, + settings: { + ...DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG, + setSettings: (settings) => + set((draft) => { + draft.settings = { + ...get().settings, + ...settings, + }; + }), + }, ...createReaderOverlayStoreSlice(set, get, store), ...createReaderAutoScrollStoreSlice(set, get, store), ...createReaderPagesStoreSlice(set, get, store), diff --git a/src/features/reader/auto-scroll/ReaderAutoScroll.tsx b/src/features/reader/auto-scroll/ReaderAutoScroll.tsx index bef7a74b..ccc8ae6d 100644 --- a/src/features/reader/auto-scroll/ReaderAutoScroll.tsx +++ b/src/features/reader/auto-scroll/ReaderAutoScroll.tsx @@ -8,7 +8,7 @@ import { memo, useCallback, useEffect } from 'react'; import { Direction, useTheme } from '@mui/material/styles'; -import { IReaderSettings, ReaderScrollAmount, ReadingMode } from '@/features/reader/Reader.types.ts'; +import { ReaderScrollAmount, ReadingMode } from '@/features/reader/Reader.types.ts'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; import { ScrollOffset } from '@/base/Base.types.ts'; import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts'; @@ -21,11 +21,9 @@ import { getReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderS const BaseReaderAutoScroll = ({ openPage, - readingMode, - autoScroll, themeDirection, combinedDirection, -}: Pick & { +}: { openPage: ReturnType; themeDirection: Direction; combinedDirection: Direction; @@ -34,6 +32,10 @@ const BaseReaderAutoScroll = ({ scrollRef: state.autoScroll.scrollRef, direction: state.autoScroll.direction, })); + const { readingMode, autoScroll } = useReaderStoreShallow((state) => ({ + readingMode: state.settings.readingMode.value, + autoScroll: state.settings.autoScroll, + })); const isScrollingInvertedBasedOnReadingDirection = readingMode === ReadingMode.CONTINUOUS_HORIZONTAL && themeDirection !== combinedDirection; @@ -77,10 +79,9 @@ const BaseReaderAutoScroll = ({ export const ReaderAutoScroll = withPropsFrom( memo(BaseReaderAutoScroll), [ - ReaderService.useSettingsWithoutDefaultFlag, () => ({ openPage: ReaderControls.useOpenPage() }), () => ({ themeDirection: useTheme().direction }), () => ({ combinedDirection: ReaderService.useGetThemeDirection() }), ], - ['openPage', 'readingMode', 'themeDirection', 'combinedDirection', 'autoScroll'], + ['openPage', 'themeDirection', 'combinedDirection'], ); diff --git a/src/features/reader/contexts/ReaderContextProvider.tsx b/src/features/reader/contexts/ReaderContextProvider.tsx index cc5bc0c1..e64090ac 100644 --- a/src/features/reader/contexts/ReaderContextProvider.tsx +++ b/src/features/reader/contexts/ReaderContextProvider.tsx @@ -7,14 +7,11 @@ */ import { ReactNode } from 'react'; -import { ReaderStateContextProvider } from '@/features/reader/contexts/state/ReaderStateContextProvider.tsx'; import { ReaderProgressBarContextProvider } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx'; import { ReaderTapZoneContextProvider } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx'; export const ReaderContextProvider = ({ children }: { children?: ReactNode }) => ( - - - {children} - - + + {children} + ); diff --git a/src/features/reader/contexts/state/ReaderStateContextProvider.tsx b/src/features/reader/contexts/state/ReaderStateContextProvider.tsx deleted file mode 100644 index f506cdc1..00000000 --- a/src/features/reader/contexts/state/ReaderStateContextProvider.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright (C) Contributors to the Suwayomi project - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { ReactNode } from 'react'; -import { ReaderStateSettingsContextProvider } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx'; - -export const ReaderStateContextProvider = ({ children }: { children: ReactNode }) => ( - {children} -); diff --git a/src/features/reader/contexts/state/ReaderStateSettingsContext.tsx b/src/features/reader/contexts/state/ReaderStateSettingsContext.tsx deleted file mode 100644 index e9b6e7da..00000000 --- a/src/features/reader/contexts/state/ReaderStateSettingsContext.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright (C) Contributors to the Suwayomi project - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { createContext, ReactNode, useContext, useMemo, useState } from 'react'; -import { TReaderStateSettingsContext } from '@/features/reader/Reader.types.ts'; -import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts'; - -export const ReaderStateSettingsContext = createContext({ - settings: DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG, - setSettings: () => undefined, -}); - -export const useReaderStateSettingsContext = () => useContext(ReaderStateSettingsContext); - -export const ReaderStateSettingsContextProvider = ({ children }: { children: ReactNode }) => { - const [settings, setSettings] = useState( - DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG, - ); - - const value = useMemo(() => ({ settings, setSettings }), [settings]); - - return {children}; -}; diff --git a/src/features/reader/filters/ReaderRGBAFilter.tsx b/src/features/reader/filters/ReaderRGBAFilter.tsx index b21132e3..f18f5b6d 100644 --- a/src/features/reader/filters/ReaderRGBAFilter.tsx +++ b/src/features/reader/filters/ReaderRGBAFilter.tsx @@ -7,21 +7,17 @@ */ import Box from '@mui/material/Box'; -import { ReaderService } from '@/features/reader/services/ReaderService.ts'; 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 { IReaderSettings } from '@/features/reader/Reader.types.ts'; +import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; + +const BaseReaderRGBAFilter = ({ readerNavBarWidth }: Pick) => { + const { + value: { red, green, blue, alpha, blendMode }, + enabled, + } = useReaderStoreShallow((state) => state.settings.customFilter.rgba); -const BaseReaderRGBAFilter = ({ - readerNavBarWidth, - customFilter: { - rgba: { - value: { red, green, blue, alpha, blendMode }, - enabled, - }, - }, -}: Pick & Pick) => { if (!enabled) { return null; } @@ -42,8 +38,4 @@ const BaseReaderRGBAFilter = ({ ); }; -export const ReaderRGBAFilter = withPropsFrom( - BaseReaderRGBAFilter, - [useNavBarContext, ReaderService.useSettingsWithoutDefaultFlag], - ['readerNavBarWidth', 'customFilter'], -); +export const ReaderRGBAFilter = withPropsFrom(BaseReaderRGBAFilter, [useNavBarContext], ['readerNavBarWidth']); diff --git a/src/features/reader/hooks/useReaderResetStates.ts b/src/features/reader/hooks/useReaderResetStates.ts index 0a903338..6e8c4067 100644 --- a/src/features/reader/hooks/useReaderResetStates.ts +++ b/src/features/reader/hooks/useReaderResetStates.ts @@ -7,16 +7,12 @@ */ import { useEffect } from 'react'; -import { TReaderStateSettingsContext } from '@/features/reader/Reader.types.ts'; -import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts'; import { getReaderStore } from '@/features/reader/ReaderStore.ts'; -export const useReaderResetStates = (setSettings: TReaderStateSettingsContext['setSettings']) => { +export const useReaderResetStates = () => { useEffect( () => () => { getReaderStore().reset(); - - setSettings(DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG); }, [], ); diff --git a/src/features/reader/hotkeys/ReaderHotkeys.tsx b/src/features/reader/hotkeys/ReaderHotkeys.tsx index 2851e2ae..a2dc344a 100644 --- a/src/features/reader/hotkeys/ReaderHotkeys.tsx +++ b/src/features/reader/hotkeys/ReaderHotkeys.tsx @@ -25,7 +25,7 @@ import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; import { ScrollOffset } from '@/base/Base.types.ts'; import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts'; import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx'; -import { getReaderStore } from '@/features/reader/ReaderStore.ts'; +import { getReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; const useHotkeys = (...args: Parameters): ReturnType => { const [keys, callback, options, dependencies] = args; @@ -63,16 +63,9 @@ export const ReaderHotkeys = ({ const { direction: themeDirection } = useTheme(); const readerThemeDirection = ReaderService.useGetThemeDirection(); const { enableScope, disableScope } = useHotkeysContext(); - const { - hotkeys, - pageScaleMode, - shouldStretchPage, - shouldOffsetDoubleSpreads, - readingMode, - readingDirection, - autoScroll, - scrollAmount, - } = ReaderService.useSettings(); + const { hotkeys } = useReaderStoreShallow((state) => ({ + hotkeys: state.settings.hotkeys, + })); const { setShowPreview } = useReaderTapZoneContext(); const exitReader = ReaderService.useExit(); @@ -84,10 +77,13 @@ export const ReaderHotkeys = ({ useHotkeys( hotkeys[ReaderHotkey.SCROLL_BACKWARD], () => { - const automaticScrolling = getReaderStore().autoScroll; + const { + autoScroll, + settings: { readingMode, readingDirection, scrollAmount }, + } = getReaderStore(); - if (automaticScrolling.isActive) { - automaticScrolling.setDirection(ScrollOffset.BACKWARD); + if (autoScroll.isActive) { + autoScroll.setDirection(ScrollOffset.BACKWARD); return; } @@ -108,15 +104,18 @@ export const ReaderHotkeys = ({ ); }, { preventDefault: true }, - [readingMode.value, readingDirection.value, themeDirection, openChapter, scrollAmount], + [themeDirection, openChapter], ); useHotkeys( hotkeys[ReaderHotkey.SCROLL_FORWARD], () => { - const automaticScrolling = getReaderStore().autoScroll; + const { + autoScroll, + settings: { readingMode, readingDirection, scrollAmount }, + } = getReaderStore(); - if (automaticScrolling.isActive) { - automaticScrolling.setDirection(ScrollOffset.FORWARD); + if (autoScroll.isActive) { + autoScroll.setDirection(ScrollOffset.FORWARD); return; } @@ -137,7 +136,7 @@ export const ReaderHotkeys = ({ ); }, { preventDefault: true }, - [readingMode.value, readingDirection.value, themeDirection, openChapter, scrollAmount], + [themeDirection, openChapter], ); useHotkeys( hotkeys[ReaderHotkey.PREVIOUS_CHAPTER], @@ -157,70 +156,55 @@ export const ReaderHotkeys = ({ () => { updateSettingCycleThrough( 'pageScaleMode', - pageScaleMode.value, + getReaderStore().settings.pageScaleMode.value, READER_PAGE_SCALE_MODE_VALUES, - pageScaleMode.isDefault, + getReaderStore().settings.pageScaleMode.isDefault, true, ); }, - [pageScaleMode.value, pageScaleMode.isDefault], + [], ); - useHotkeys( - hotkeys[ReaderHotkey.STRETCH_IMAGE], - () => ReaderService.updateSetting('shouldStretchPage', !shouldStretchPage.value), - [shouldStretchPage.value], + useHotkeys(hotkeys[ReaderHotkey.STRETCH_IMAGE], () => + ReaderService.updateSetting('shouldStretchPage', !getReaderStore().settings.shouldStretchPage.value), ); - useHotkeys( - hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES], - () => ReaderService.updateSetting('shouldOffsetDoubleSpreads', !shouldOffsetDoubleSpreads.value), - [shouldOffsetDoubleSpreads.value], - ); - useHotkeys( - hotkeys[ReaderHotkey.CYCLE_READING_MODE], - () => { - updateSettingCycleThrough( - 'readingMode', - readingMode.value, - READING_MODE_VALUES, - readingMode.isDefault, - true, - ); - }, - [readingMode.value, readingMode.isDefault], - ); - useHotkeys( - hotkeys[ReaderHotkey.CYCLE_READING_DIRECTION], - () => { - updateSettingCycleThrough( - 'readingDirection', - readingDirection.value, - READING_DIRECTION_VALUES, - readingDirection.isDefault, - true, - ); - }, - [readingDirection.value, readingDirection.isDefault], + useHotkeys(hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES], () => + ReaderService.updateSetting( + 'shouldOffsetDoubleSpreads', + !getReaderStore().settings.shouldOffsetDoubleSpreads.value, + ), ); + useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_MODE], () => { + updateSettingCycleThrough( + 'readingMode', + getReaderStore().settings.readingMode.value, + READING_MODE_VALUES, + getReaderStore().settings.readingMode.isDefault, + true, + ); + }); + useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_DIRECTION], () => { + updateSettingCycleThrough( + 'readingDirection', + getReaderStore().settings.readingDirection.value, + READING_DIRECTION_VALUES, + getReaderStore().settings.readingDirection.isDefault, + true, + ); + }); useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], () => getReaderStore().autoScroll.toggleActive(), { preventDefault: true, }); - useHotkeys( - hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE], - () => - ReaderService.updateSetting('autoScroll', { - ...autoScroll, - value: Math.min(AUTO_SCROLL_SPEED.max, autoScroll.value + AUTO_SCROLL_SPEED.step), - }), - [autoScroll.value], + 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), + }), ); - useHotkeys( - hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE], - () => - ReaderService.updateSetting('autoScroll', { - ...autoScroll, - value: Math.max(AUTO_SCROLL_SPEED.min, autoScroll.value - AUTO_SCROLL_SPEED.step), - }), - [autoScroll.value], + 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), + }), ); useHotkeys(hotkeys[ReaderHotkey.EXIT_READER], exitReader, [exitReader]); diff --git a/src/features/reader/infinite-scroll/ReaderInfiniteScrollUpdateChapter.tsx b/src/features/reader/infinite-scroll/ReaderInfiniteScrollUpdateChapter.tsx index 41317bff..9f4b12b0 100644 --- a/src/features/reader/infinite-scroll/ReaderInfiniteScrollUpdateChapter.tsx +++ b/src/features/reader/infinite-scroll/ReaderInfiniteScrollUpdateChapter.tsx @@ -9,15 +9,10 @@ import { memo } from 'react'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { useReaderInfiniteScrollUpdateChapter } from '@/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts'; -import { IReaderSettings } from '@/features/reader/Reader.types.ts'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; -import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts'; const BaseReaderInfiniteScrollUpdateChapter = ({ - readingMode, - readingDirection, - shouldUseInfiniteScroll, chapterId, previousChapterId, nextChapterId, @@ -27,32 +22,26 @@ const BaseReaderInfiniteScrollUpdateChapter = ({ imageWrapper, openChapter, scrollElement, - shouldShowTransitionPage, -}: Pick & - Pick & { - chapterId: ChapterIdInfo['id']; - previousChapterId?: ChapterIdInfo['id']; - nextChapterId?: ChapterIdInfo['id']; - isPreviousChapterVisible: boolean; - isCurrentChapter: boolean; - isNextChapterVisible: boolean; - imageWrapper: HTMLElement | null; - openChapter: ReturnType; - scrollElement: HTMLElement | null; - }) => { +}: { + chapterId: ChapterIdInfo['id']; + previousChapterId?: ChapterIdInfo['id']; + nextChapterId?: ChapterIdInfo['id']; + isPreviousChapterVisible: boolean; + isCurrentChapter: boolean; + isNextChapterVisible: boolean; + imageWrapper: HTMLElement | null; + openChapter: ReturnType; + scrollElement: HTMLElement | null; +}) => { useReaderInfiniteScrollUpdateChapter( 'first', chapterId, previousChapterId, isCurrentChapter, isPreviousChapterVisible, - readingMode, - readingDirection, - shouldUseInfiniteScroll, openChapter, imageWrapper, scrollElement, - shouldShowTransitionPage, ); useReaderInfiniteScrollUpdateChapter( 'last', @@ -60,13 +49,9 @@ const BaseReaderInfiniteScrollUpdateChapter = ({ nextChapterId, isCurrentChapter, isNextChapterVisible, - readingMode, - readingDirection, - shouldUseInfiniteScroll, openChapter, imageWrapper, scrollElement, - shouldShowTransitionPage, ); return null; @@ -74,6 +59,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({ export const ReaderInfiniteScrollUpdateChapter = withPropsFrom( memo(BaseReaderInfiniteScrollUpdateChapter), - [() => ({ openChapter: ReaderControls.useOpenChapter() }), ReaderService.useSettingsWithoutDefaultFlag], - ['openChapter', 'shouldShowTransitionPage'], + [() => ({ openChapter: ReaderControls.useOpenChapter() })], + ['openChapter'], ); diff --git a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts index 1debfb59..23fad675 100644 --- a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts +++ b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts @@ -16,7 +16,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 } from '@/features/reader/ReaderStore.ts'; +import { getReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; interface ElementIntersection { start: boolean; @@ -242,14 +242,19 @@ export const useReaderInfiniteScrollUpdateChapter = ( chapterToOpenId: number | undefined, isCurrentChapter: boolean, isChapterToOpenVisible: boolean, - readingMode: ReadingMode, - readingDirection: ReadingDirection, - shouldUseInfiniteScroll: boolean, openChapter: ReturnType, image: HTMLElement | null, scrollElement: HTMLElement | null, - shouldShowTransitionPage: boolean, ) => { + const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderStoreShallow( + (state) => ({ + readingMode: state.settings.readingMode.value, + readingDirection: state.settings.readingDirection.value, + shouldUseInfiniteScroll: state.settings.shouldUseInfiniteScroll, + shouldShowTransitionPage: state.settings.shouldShowTransitionPage, + }), + ); + useEffect(() => { const isContinuousReadingModeActive = isContinuousReadingMode(readingMode); const isContinuousVerticalReadingModeActive = isContinuousVerticalReadingMode(readingMode); diff --git a/src/features/reader/overlay/components/ReaderPageNumber.tsx b/src/features/reader/overlay/components/ReaderPageNumber.tsx index dee041d7..605ab58f 100644 --- a/src/features/reader/overlay/components/ReaderPageNumber.tsx +++ b/src/features/reader/overlay/components/ReaderPageNumber.tsx @@ -11,7 +11,7 @@ import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; -import { IReaderSettings, ProgressBarType, ReadingDirection } from '@/features/reader/Reader.types.ts'; +import { ProgressBarType, ReadingDirection } from '@/features/reader/Reader.types.ts'; import { getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx'; import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx'; import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx'; @@ -25,19 +25,20 @@ const BaseReaderPageNumber = ({ isDesktop, readerNavBarWidth, isMaximized, - progressBarType, - shouldShowPageNumber, - readingDirection, }: Pick, 'isDesktop'> & Pick & - Pick & - Pick) => { + Pick) => { const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const { currentPageIndex, pages, totalPages } = useReaderStoreShallow((state) => ({ currentPageIndex: state.pages.currentPageIndex, pages: state.pages.pages, totalPages: state.pages.totalPages, })); + const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderStoreShallow((state) => ({ + readingDirection: state.settings.readingDirection.value, + shouldShowPageNumber: state.settings.shouldShowPageNumber, + progressBarType: state.settings.progressBarType, + })); const pageName = useMemo(() => { const currentPageName = getPage(currentPageIndex, pages).name; @@ -89,11 +90,6 @@ const BaseReaderPageNumber = ({ export const ReaderPageNumber = withPropsFrom( BaseReaderPageNumber, - [ - ReaderService.useOverlayMode, - useNavBarContext, - useReaderProgressBarContext, - ReaderService.useSettingsWithoutDefaultFlag, - ], - ['isDesktop', 'readerNavBarWidth', 'isMaximized', 'progressBarType', 'shouldShowPageNumber', 'readingDirection'], + [ReaderService.useOverlayMode, useNavBarContext, useReaderProgressBarContext], + ['isDesktop', 'readerNavBarWidth', 'isMaximized'], ); diff --git a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx index 82c804e0..cee4c92f 100644 --- a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx +++ b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx @@ -27,10 +27,9 @@ import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; -import { IReaderSettings } from '@/features/reader/Reader.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx'; -import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; +import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => { const wasNavBarStaticRef = useRef(isStaticNav); @@ -54,10 +53,7 @@ const BaseReaderNavBarDesktop = ({ isVisible, openSettings, setReaderNavBarWidth, - isStaticNav, -}: ReaderNavBarDesktopProps & - Pick & - Pick) => { +}: ReaderNavBarDesktopProps & Pick) => { const { t } = useTranslation(); const manga = useReaderStoreShallow((state) => state.manga); const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStoreShallow((state) => ({ @@ -66,6 +62,7 @@ const BaseReaderNavBarDesktop = ({ previousChapter: state.chapters.previousChapter, nextChapter: state.chapters.nextChapter, })); + const isStaticNav = useReaderStore((state) => state.settings.isStaticNav); const [navBarElement, setNavBarElement] = useState(); useResizeObserver( @@ -146,6 +143,6 @@ const BaseReaderNavBarDesktop = ({ export const ReaderNavBarDesktop = withPropsFrom( memo(BaseReaderNavBarDesktop), - [useNavBarContext, ReaderService.useSettingsWithoutDefaultFlag], - ['setReaderNavBarWidth', 'isStaticNav'], + [useNavBarContext], + ['setReaderNavBarWidth'], ); diff --git a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx index eef2817a..14004348 100644 --- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx +++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx @@ -16,17 +16,14 @@ import { Select } from '@/base/components/inputs/Select.tsx'; import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts'; -import { ReaderService } from '@/features/reader/services/ReaderService.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 { IReaderSettings } from '@/features/reader/Reader.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; +import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; const BaseReaderNavBarDesktopPageNavigation = ({ - readingDirection, openPage, -}: Pick & { +}: { openPage: ReturnType; }) => { const { t } = useTranslation(); @@ -35,6 +32,7 @@ const BaseReaderNavBarDesktopPageNavigation = ({ currentPageIndex: state.pages.currentPageIndex, pages: state.pages.pages, })); + const readingDirection = useReaderStore((state) => state.settings.readingDirection.value); const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]); const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection]; @@ -82,6 +80,6 @@ const BaseReaderNavBarDesktopPageNavigation = ({ export const ReaderNavBarDesktopPageNavigation = withPropsFrom( memo(BaseReaderNavBarDesktopPageNavigation), - [() => ({ openPage: ReaderControls.useOpenPage() }), ReaderService.useSettingsWithoutDefaultFlag], - ['readingDirection', 'openPage'], + [() => ({ openPage: ReaderControls.useOpenPage() })], + ['openPage'], ); 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 046e0519..e50a4376 100644 --- a/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx +++ b/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx @@ -10,35 +10,27 @@ import Stack from '@mui/material/Stack'; import { useTranslation } from 'react-i18next'; import Button from '@mui/material/Button'; import SettingsIcon from '@mui/icons-material/Settings'; +import { memo } from 'react'; import { ReaderNavBarDesktopPageScale } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopPageScale.tsx'; import { ReaderNavBarDesktopReadingMode } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx'; import { ReaderNavBarDesktopOffsetDoubleSpread } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopOffsetDoubleSpread.tsx'; import { ReaderNavBarDesktopReadingDirection } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingDirection.tsx'; -import { IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts'; import { ReaderNavBarDesktopProps } from '@/features/reader/overlay/ReaderOverlay.types.ts'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; -import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx'; +import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; -const BaseReaderNavBarDesktopQuickSettings = ({ - readingMode, - shouldOffsetDoubleSpreads, - pageScaleMode, - shouldStretchPage, - readingDirection, - autoScroll, - openSettings, -}: Pick & - Pick< - IReaderSettingsWithDefaultFlag, - | 'readingMode' - | 'shouldOffsetDoubleSpreads' - | 'pageScaleMode' - | 'shouldStretchPage' - | 'readingDirection' - | 'autoScroll' - >) => { +const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick) => { const { t } = useTranslation(); + const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } = + useReaderStoreShallow((state) => ({ + readingMode: state.settings.readingMode, + shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads, + pageScaleMode: state.settings.pageScaleMode, + shouldStretchPage: state.settings.shouldStretchPage, + readingDirection: state.settings.readingDirection, + autoScroll: state.settings.autoScroll, + })); return ( @@ -85,15 +77,4 @@ const BaseReaderNavBarDesktopQuickSettings = ({ ); }; -export const ReaderNavBarDesktopQuickSettings = withPropsFrom( - BaseReaderNavBarDesktopQuickSettings, - [ReaderService.useSettings], - [ - 'readingMode', - 'shouldOffsetDoubleSpreads', - 'pageScaleMode', - 'shouldStretchPage', - 'readingDirection', - 'autoScroll', - ], -); +export const ReaderNavBarDesktopQuickSettings = memo(BaseReaderNavBarDesktopQuickSettings); 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 496abef3..8373f7b2 100644 --- a/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx +++ b/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx @@ -13,22 +13,21 @@ import { ReaderSettingReadingMode } from '@/features/reader/settings/layout/comp import { ReaderSettingReadingDirection } from '@/features/reader/settings/layout/components/ReaderSettingReadingDirection.tsx'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx'; -import { IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts'; -import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx'; import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx'; import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; -const BaseReaderBottomBarMobileQuickSettings = ({ - readingMode, - readingDirection, - autoScroll, -}: Pick) => { +const BaseReaderBottomBarMobileQuickSettings = () => { const { t } = useTranslation(); const { isActive, toggleActive } = useReaderStoreShallow((state) => ({ isActive: state.autoScroll.isActive, toggleActive: state.autoScroll.toggleActive, })); + const { readingMode, readingDirection, autoScroll } = useReaderStoreShallow((state) => ({ + readingMode: state.settings.readingMode, + readingDirection: state.settings.readingDirection, + autoScroll: state.settings.autoScroll, + })); return ( @@ -58,8 +57,4 @@ const BaseReaderBottomBarMobileQuickSettings = ({ ); }; -export const ReaderBottomBarMobileQuickSettings = withPropsFrom( - memo(BaseReaderBottomBarMobileQuickSettings), - [ReaderService.useSettings], - ['readingMode', 'readingDirection', 'autoScroll'], -); +export const ReaderBottomBarMobileQuickSettings = memo(BaseReaderBottomBarMobileQuickSettings); diff --git a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx index e0fe7a72..ba0744e5 100644 --- a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx @@ -35,22 +35,20 @@ import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx'; import { ReaderProgressBarSlotWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotWrapper.tsx'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; -import { IReaderSettings, ReadingMode } from '@/features/reader/Reader.types.ts'; -import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; +import { ReadingMode } from '@/features/reader/Reader.types.ts'; +import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; const BaseReaderProgressBar = ({ slotProps, slots, createProgressBarSlot, progressBarPosition, - readingMode, isDragging, setIsDragging, openPage, direction, fullSegmentClicks, }: ReaderProgressBarProps & - Pick & Pick & Pick, 'createProgressBarSlot'> & { slotProps?: { @@ -80,6 +78,7 @@ const BaseReaderProgressBar = ({ totalPages: state.pages.totalPages, currentPageIndex: state.pages.currentPageIndex, })); + const readingMode = useReaderStore((state) => state.settings.readingMode.value); const progressBarRef = useRef(null); const draggingDetectionTimeout = useRef(undefined); @@ -250,10 +249,6 @@ const BaseReaderProgressBar = ({ export const ReaderProgressBar = withPropsFrom( memo(BaseReaderProgressBar), - [ - useReaderProgressBarContext, - () => ({ openPage: ReaderControls.useOpenPage() }), - ReaderService.useSettingsWithoutDefaultFlag, - ], - ['isDragging', 'setIsDragging', 'openPage', 'readingMode'], + [useReaderProgressBarContext, () => ({ openPage: ReaderControls.useOpenPage() })], + ['isDragging', 'setIsDragging', 'openPage'], ); diff --git a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx index 4f0eefae..dcb1af53 100644 --- a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx @@ -10,7 +10,7 @@ import { useTheme } from '@mui/material/styles'; import { memo, useCallback, useState } from 'react'; import { ReaderProgressBar } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.tsx'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; -import { IReaderSettings, ProgressBarType } from '@/features/reader/Reader.types.ts'; +import { ProgressBarType } from '@/features/reader/Reader.types.ts'; import { applyStyles } from '@/base/utils/ApplyStyles.ts'; import { getProgressBarPositionInfo } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx'; import { ReaderProgressBarDirectionWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarDirectionWrapper.tsx'; @@ -29,23 +29,22 @@ const BaseStandardReaderProgressBar = ({ isMaximized, setIsMaximized, isDragging, - progressBarType, - progressBarSize, - progressBarPosition, - progressBarPositionAutoVertical, readerDirection, }: Pick & - Pick & - Pick< - IReaderSettings, - 'progressBarType' | 'progressBarSize' | 'progressBarPosition' | 'progressBarPositionAutoVertical' - > & { + Pick & { readerDirection: ReturnType; }) => { const theme = useTheme(); const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const totalPages = useReaderStore((state) => state.pages.totalPages); + const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } = + useReaderStoreShallow((state) => ({ + progressBarType: state.settings.progressBarType, + progressBarSize: state.settings.progressBarSize, + progressBarPosition: state.settings.progressBarPosition, + progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical, + })); const [, setRefreshProgressBarPosition] = useState({}); useResizeObserver( @@ -244,21 +243,6 @@ const BaseStandardReaderProgressBar = ({ export const StandardReaderProgressBar = withPropsFrom( memo(BaseStandardReaderProgressBar), - [ - useNavBarContext, - useReaderProgressBarContext, - ReaderService.useSettingsWithoutDefaultFlag, - () => ({ readerDirection: ReaderService.useGetThemeDirection() }), - ], - [ - 'readerNavBarWidth', - 'isMaximized', - 'setIsMaximized', - 'isDragging', - 'progressBarType', - 'progressBarSize', - 'progressBarPosition', - 'progressBarPositionAutoVertical', - 'readerDirection', - ], + [useNavBarContext, useReaderProgressBarContext, () => ({ readerDirection: ReaderService.useGetThemeDirection() })], + ['readerNavBarWidth', 'isMaximized', 'setIsMaximized', 'isDragging', 'readerDirection'], ); diff --git a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx index b9b80112..6e0fa142 100644 --- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx @@ -21,7 +21,7 @@ import { getProgressBarPositionInfo, } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx'; import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts'; -import { IReaderSettings, ProgressBarPosition } from '@/features/reader/Reader.types.ts'; +import { ProgressBarPosition } from '@/features/reader/Reader.types.ts'; import { ReaderProgressBarDirectionWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarDirectionWrapper.tsx'; import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; @@ -45,16 +45,13 @@ const BaseMobileReaderProgressBar = ({ setIsMaximized, isDragging, direction: readerDirection, - progressBarPosition, - progressBarPositionAutoVertical, topOffset = 0, bottomOffset = 0, -}: Pick & - Pick & { - direction: ReturnType; - topOffset?: number; - bottomOffset?: number; - }) => { +}: Pick & { + direction: ReturnType; + topOffset?: number; + bottomOffset?: number; +}) => { const openChapter = ReaderControls.useOpenChapter(); const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const isVisible = useReaderStore((state) => state.overlay.isVisible); @@ -66,6 +63,10 @@ const BaseMobileReaderProgressBar = ({ previousChapter: state.chapters.previousChapter, nextChapter: state.chapters.nextChapter, })); + const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStoreShallow((state) => ({ + progressBarPosition: state.settings.progressBarPosition, + progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical, + })); const [, setRefreshProgressBarPosition] = useState({}); useResizeObserver( @@ -353,10 +354,6 @@ const BaseMobileReaderProgressBar = ({ export const MobileReaderProgressBar = withPropsFrom( memo(BaseMobileReaderProgressBar), - [ - useReaderProgressBarContext, - () => ({ direction: ReaderService.useGetThemeDirection() }), - ReaderService.useSettingsWithoutDefaultFlag, - ], - ['setIsMaximized', 'isDragging', 'direction', 'progressBarPosition', 'progressBarPositionAutoVertical'], + [useReaderProgressBarContext, () => ({ direction: ReaderService.useGetThemeDirection() })], + ['setIsMaximized', 'isDragging', 'direction'], ); diff --git a/src/features/reader/screens/Reader.tsx b/src/features/reader/screens/Reader.tsx index ac39ce10..b809ecc4 100644 --- a/src/features/reader/screens/Reader.tsx +++ b/src/features/reader/screens/Reader.tsx @@ -22,21 +22,13 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts' import { GET_CHAPTERS_READER } from '@/lib/graphql/queries/ChapterQuery.ts'; import { TapZoneLayout } from '@/features/reader/tap-zones/TapZoneLayout.tsx'; import { ReaderRGBAFilter } from '@/features/reader/filters/ReaderRGBAFilter.tsx'; -import { useReaderStateSettingsContext } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx'; import { ReaderViewer } from '@/features/reader/viewer/ReaderViewer.tsx'; -import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { READER_BACKGROUND_TO_COLOR } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { ReaderHotkeys } from '@/features/reader/hotkeys/ReaderHotkeys.tsx'; -import { - IReaderSettings, - IReaderSettingsWithDefaultFlag, - TReaderStateSettingsContext, -} from '@/features/reader/Reader.types.ts'; import { getErrorMessage } from '@/lib/HelperFunctions.ts'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts'; -import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx'; import { useReaderResetStates } from '@/features/reader/hooks/useReaderResetStates.ts'; import { useReaderSetSettingsState } from '@/features/reader/hooks/useReaderSetSettingsState.ts'; import { useReaderShowSettingPreviewOnChange } from '@/features/reader/hooks/useReaderShowSettingPreviewOnChange.ts'; @@ -50,28 +42,8 @@ import { ReaderAutoScroll } from '@/features/reader/auto-scroll/ReaderAutoScroll const BaseReader = ({ setOverride, readerNavBarWidth, - shouldSkipDupChapters, - shouldSkipFilteredChapters, - backgroundColor, - readingMode, - tapZoneLayout, - tapZoneInvertMode, - shouldShowReadingModePreview, - shouldShowTapZoneLayoutPreview, - setSettings, setShowPreview, -}: Pick & - Pick & - Pick< - IReaderSettings, - | 'shouldSkipDupChapters' - | 'shouldSkipFilteredChapters' - | 'backgroundColor' - | 'shouldShowReadingModePreview' - | 'shouldShowTapZoneLayoutPreview' - > & - Pick & - Pick) => { +}: Pick & Pick) => { const { t } = useTranslation(); const manga = useReaderStoreShallow((state) => state.manga); const overlay = useReaderStoreShallow((state) => state.overlay); @@ -83,6 +55,27 @@ const BaseReader = ({ currentChapter: state.chapters.currentChapter, }), ); + const { + shouldSkipDupChapters, + shouldSkipFilteredChapters, + backgroundColor, + readingMode, + tapZoneLayout, + tapZoneInvertMode, + shouldShowReadingModePreview, + shouldShowTapZoneLayoutPreview, + setSettings, + } = useReaderStoreShallow((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, + setSettings: state.settings.setSettings, + })); const scrollElementRef = useRef(null); @@ -123,7 +116,7 @@ const BaseReader = ({ useReaderStore.getState().setManga(mangaResponse.data?.manga); }, [mangaResponse.data?.manga]); - useReaderResetStates(setSettings); + useReaderResetStates(); useReaderSetSettingsState( mangaResponse, defaultSettingsResponse, @@ -251,45 +244,4 @@ const BaseReader = ({ ); }; -export const Reader = withPropsFrom( - memo(BaseReader), - [ - useNavBarContext, - useReaderStateSettingsContext, - () => { - const { - shouldSkipDupChapters, - shouldSkipFilteredChapters, - backgroundColor, - shouldShowReadingModePreview, - shouldShowTapZoneLayoutPreview, - } = ReaderService.useSettingsWithoutDefaultFlag(); - return { - shouldSkipDupChapters, - shouldSkipFilteredChapters, - backgroundColor, - shouldShowReadingModePreview, - shouldShowTapZoneLayoutPreview, - }; - }, - () => { - const { readingMode, tapZoneLayout, tapZoneInvertMode } = ReaderService.useSettings(); - return { readingMode, tapZoneLayout, tapZoneInvertMode }; - }, - useReaderTapZoneContext, - ], - [ - 'setOverride', - 'readerNavBarWidth', - 'shouldSkipDupChapters', - 'shouldSkipFilteredChapters', - 'backgroundColor', - 'readingMode', - 'tapZoneLayout', - 'tapZoneInvertMode', - 'shouldShowReadingModePreview', - 'shouldShowTapZoneLayoutPreview', - 'setSettings', - 'setShowPreview', - ], -); +export const Reader = withPropsFrom(memo(BaseReader), [useNavBarContext], ['setOverride', 'readerNavBarWidth']); diff --git a/src/features/reader/services/ReaderControls.ts b/src/features/reader/services/ReaderControls.ts index b2108e35..6e022342 100644 --- a/src/features/reader/services/ReaderControls.ts +++ b/src/features/reader/services/ReaderControls.ts @@ -166,25 +166,26 @@ export class ReaderControls { scrollIntoView?: boolean, ) => void { const { t } = useTranslation(); - const { - readingMode, - shouldInformAboutMissingChapter, - shouldInformAboutScanlatorChange, - shouldUseInfiniteScroll, - } = ReaderService.useSettings(); const openChapter = ReaderService.useNavigateToChapter(); return useCallback( (offset, doTransitionCheck = true, scrollIntoView = true) => { const { - currentChapter, - previousChapter, - nextChapter, - chapters, - visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder }, - setReaderStateChapters, - } = getReaderStore().chapters; + chapters: { + currentChapter, + previousChapter, + nextChapter, + chapters, + visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder }, + setReaderStateChapters, + }, + settings: { + shouldInformAboutMissingChapter, + shouldInformAboutScanlatorChange, + shouldUseInfiniteScroll, + }, + } = getReaderStore(); if (!currentChapter) { return; @@ -264,14 +265,7 @@ export class ReaderControls { doOpenChapter().catch(defaultPromiseErrorHandler('ReaderControls#useOpenChapter')); }, - [ - t, - openChapter, - readingMode.value, - shouldInformAboutMissingChapter, - shouldInformAboutScanlatorChange, - shouldUseInfiniteScroll, - ], + [t, openChapter], ); } @@ -341,22 +335,29 @@ export class ReaderControls { hideOverlay?: boolean, ) => void { const { setShowPreview } = useReaderTapZoneContext(); - const { readingDirection, readingMode, shouldShowTransitionPage } = ReaderService.useSettings(); const openChapter = ReaderControls.useOpenChapter(); - const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value]; - return useCallback( - (page, forceDirection = direction, hideOverlay: boolean = true) => { + (page, forceDirection, hideOverlay: boolean = true) => { + const { + pages: { + currentPageIndex, + setPageToScrollToIndex, + pages, + transitionPageMode, + setTransitionPageMode, + }, + settings: { readingDirection, readingMode, shouldShowTransitionPage }, + } = getReaderStore(); + + const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value]; + const convertedPage = getOptionForDirection( page, page === 'previous' ? 'next' : 'previous', - forceDirection, + forceDirection ?? direction, ); - const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } = - getReaderStore().pages; - const currentPage = getPage(currentPageIndex, pages); const previousPageIndex = getNextPageIndex('previous', currentPage.pagesIndex, pages); const nextPageIndex = getNextPageIndex('next', currentPage.pagesIndex, pages); @@ -438,7 +439,7 @@ export class ReaderControls { setPageToScrollToIndex(isPreviousMode ? previousPageIndex : nextPageIndex); }, - [direction, openChapter, shouldShowTransitionPage, readingMode.value], + [openChapter], ); } @@ -565,7 +566,6 @@ export class ReaderControls { ): (event: React.MouseEvent) => void { const { direction: themeDirection } = useTheme(); const { setShowPreview } = useReaderTapZoneContext(); - const { readingMode, readingDirection, isStaticNav, scrollAmount } = ReaderService.useSettings(); const openPage = ReaderControls.useOpenPage(); const openChapter = ReaderControls.useOpenChapter(); @@ -575,6 +575,8 @@ export class ReaderControls { return; } + const { readingMode, readingDirection, isStaticNav, scrollAmount } = getReaderStore().settings; + const rect = e.currentTarget.getBoundingClientRect(); const rectRelativeX = e.clientX - rect.left; const rectRelativeY = e.clientY - rect.top; @@ -612,16 +614,7 @@ export class ReaderControls { throw new Error(`Unexpected "TapZoneRegionType" (${action})`); } }, - [ - scrollElement, - readingMode.value, - openPage, - readingDirection.value, - openChapter, - themeDirection, - isStaticNav, - scrollAmount, - ], + [scrollElement, openPage, openChapter, themeDirection], ); } diff --git a/src/features/reader/services/ReaderService.ts b/src/features/reader/services/ReaderService.ts index 86e214a5..b49a8c9e 100644 --- a/src/features/reader/services/ReaderService.ts +++ b/src/features/reader/services/ReaderService.ts @@ -14,7 +14,6 @@ import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types. import { Chapters } from '@/features/chapter/services/Chapters.ts'; import { IReaderSettings, - IReaderSettingsWithDefaultFlag, ReaderExitMode, ReaderOpenChapterLocationState, ReaderOverlayMode, @@ -22,10 +21,7 @@ import { ReadingDirection, ReadingMode, } from '@/features/reader/Reader.types.ts'; -import { - convertFromReaderSettingsWithDefaultFlag, - updateReaderSettings, -} from '@/features/reader/settings/ReaderSettingsMetadata.ts'; +import { updateReaderSettings } from '@/features/reader/settings/ReaderSettingsMetadata.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts'; import { MANGA_META_FIELDS } from '@/lib/graphql/fragments/MangaFragments.ts'; import { makeToast } from '@/base/utils/Toast.ts'; @@ -34,7 +30,6 @@ import { GLOBAL_METADATA } from '@/lib/graphql/fragments/Fragments.ts'; import { updateMetadataList } from '@/features/metadata/services/MetadataApolloCacheHandler.ts'; import { useBackButton } from '@/base/hooks/useBackButton.ts'; import { GLOBAL_READER_SETTING_KEYS } from '@/features/reader/settings/ReaderSettings.constants.tsx'; -import { useReaderStateSettingsContext } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx'; import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts'; import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts'; import { @@ -51,7 +46,7 @@ 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 } from '@/features/reader/ReaderStore.ts'; +import { getReaderStore, useReaderStore } from '@/features/reader/ReaderStore.ts'; const DIRECTION_TO_INVERTED: Record = { ltr: 'rtl', @@ -154,7 +149,6 @@ export class ReaderService { } static useUpdateChapter(): (patch: UpdateChapterPatchInput) => void { - const { shouldSkipDupChapters } = ReaderService.useSettings(); const { settings: { deleteChaptersWhileReading, deleteChaptersWithBookmark, updateProgressAfterReading }, } = useMetadataServerSettings(); @@ -164,6 +158,7 @@ export class ReaderService { const { manga, chapters: { currentChapter, mangaChapters, chapters }, + settings: { shouldSkipDupChapters }, } = getReaderStore(); if (!manga || !currentChapter || !mangaChapters) { @@ -229,23 +224,15 @@ export class ReaderService { ReaderService.getOrCreateChapterUpdateQueue(currentChapter.id).enqueue(`${currentChapter.id}`, update); }, - [shouldSkipDupChapters, deleteChaptersWhileReading, deleteChaptersWithBookmark, updateProgressAfterReading], + [deleteChaptersWhileReading, deleteChaptersWithBookmark, updateProgressAfterReading], ); } - static useSettings(): IReaderSettingsWithDefaultFlag { - return useReaderStateSettingsContext().settings; - } - - static useSettingsWithoutDefaultFlag(): IReaderSettings { - return convertFromReaderSettingsWithDefaultFlag(ReaderService.useSettings()); - } - static useGetThemeDirection(): Direction { const { direction } = useTheme(); - const { readingDirection } = ReaderService.useSettings(); + const readingDirection = useReaderStore((state) => state.settings.readingDirection.value); - return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection.value + return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection ? direction : DIRECTION_TO_INVERTED[direction]; } @@ -352,7 +339,7 @@ export class ReaderService { static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } { const isTouchDevice = MediaQuery.useIsTouchDevice(); - const { overlayMode } = ReaderService.useSettings(); + const overlayMode = useReaderStore((state) => state.settings.overlayMode); const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO; const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP; @@ -369,7 +356,7 @@ export class ReaderService { } static useExit(): () => void { - const { exitMode } = ReaderService.useSettings(); + const exitMode = useReaderStore((state) => state.settings.exitMode); const handleBack = useBackButton(); const navigate = useNavigate(); diff --git a/src/features/reader/settings/ReaderSettingsMetadata.ts b/src/features/reader/settings/ReaderSettingsMetadata.ts index 3ce881da..659419b5 100644 --- a/src/features/reader/settings/ReaderSettingsMetadata.ts +++ b/src/features/reader/settings/ReaderSettingsMetadata.ts @@ -34,14 +34,6 @@ import { DEFAULT_DEVICE, getActiveDevice } from '@/features/device/services/Devi import { APP_METADATA_KEY_PREFIX } from '@/features/metadata/Metadata.constants.ts'; import { extractOriginalKey } from '@/features/metadata/Metadata.utils.ts'; -export const convertFromReaderSettingsWithDefaultFlag = (settings: IReaderSettingsWithDefaultFlag): IReaderSettings => - Object.fromEntries( - Object.entries(settings).map(([key, value]) => [ - key, - Object.hasOwn(value, 'value') && Object.hasOwn(value, 'isDefault') ? value.value : value, - ]), - ) as IReaderSettings; - const convertToSettingsWithDefaultFlag = ( type: Extract, settings: IReaderSettings, diff --git a/src/features/reader/settings/screens/ReaderSettings.tsx b/src/features/reader/settings/screens/ReaderSettings.tsx index 7084b94b..18c18c2e 100644 --- a/src/features/reader/settings/screens/ReaderSettings.tsx +++ b/src/features/reader/settings/screens/ReaderSettings.tsx @@ -15,9 +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 { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => { - const settings = ReaderService.useSettings(); + const settings = useReaderStoreShallow((state) => state.settings); useDisableAllHotkeysWhileMounted(isOpen); diff --git a/src/features/reader/tap-zones/TapZoneLayout.tsx b/src/features/reader/tap-zones/TapZoneLayout.tsx index 0c8c5b1a..c7c839a8 100644 --- a/src/features/reader/tap-zones/TapZoneLayout.tsx +++ b/src/features/reader/tap-zones/TapZoneLayout.tsx @@ -13,24 +13,24 @@ import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZo import { ReaderTapZoneService } from '@/features/reader/tap-zones/ReaderTapZoneService.ts'; import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; -import { ReaderService } from '@/features/reader/services/ReaderService.ts'; -import { IReaderSettings, ReadingDirection } from '@/features/reader/Reader.types.ts'; +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 { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts'; +import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; const CANVAS_ID = 'reader-tap-zone-layout-canvas'; const BaseTapZoneLayout = ({ readerNavBarWidth, showPreview, - tapZoneLayout, - tapZoneInvertMode, - readingDirection, -}: Pick & - Pick & - Pick) => { +}: Pick & Pick) => { const theme = useTheme(); + const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderStoreShallow((state) => ({ + tapZoneLayout: state.settings.tapZoneLayout.value, + tapZoneInvertMode: state.settings.tapZoneInvertMode.value, + readingDirection: state.settings.readingDirection.value, + })); const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); @@ -73,6 +73,6 @@ const BaseTapZoneLayout = ({ export const TapZoneLayout = withPropsFrom( BaseTapZoneLayout, - [useNavBarContext, useReaderTapZoneContext, ReaderService.useSettingsWithoutDefaultFlag], - ['readerNavBarWidth', 'showPreview', 'tapZoneLayout', 'tapZoneInvertMode', 'readingDirection'], + [useNavBarContext, useReaderTapZoneContext], + ['readerNavBarWidth', 'showPreview'], ); diff --git a/src/features/reader/viewer/ReaderChapterViewer.tsx b/src/features/reader/viewer/ReaderChapterViewer.tsx index 219acc2c..23cb8709 100644 --- a/src/features/reader/viewer/ReaderChapterViewer.tsx +++ b/src/features/reader/viewer/ReaderChapterViewer.tsx @@ -61,7 +61,6 @@ const BaseReaderChapterViewer = ({ pageScaleMode, shouldOffsetDoubleSpreads, readingDirection, - shouldUseInfiniteScroll, imagePreLoadAmount, pageGap, chapterId, @@ -103,12 +102,7 @@ const BaseReaderChapterViewer = ({ Omit & Pick< IReaderSettings, - | 'readingMode' - | 'shouldOffsetDoubleSpreads' - | 'readingDirection' - | 'readerWidth' - | 'pageScaleMode' - | 'shouldUseInfiniteScroll' + 'readingMode' | 'shouldOffsetDoubleSpreads' | 'readingDirection' | 'readerWidth' | 'pageScaleMode' > & Pick & { updateCurrentPageIndex: ReturnType; @@ -405,9 +399,6 @@ const BaseReaderChapterViewer = ({ > {!isPreloadMode && ( const BaseReaderViewer = forwardRef( ( { - readingMode, - readingDirection, - shouldUseInfiniteScroll, - readerWidth, - pageScaleMode, - shouldOffsetDoubleSpreads, - imagePreLoadAmount, - pageGap, - customFilter, - shouldStretchPage, - isStaticNav, readerNavBarWidth, updateCurrentPageIndex, showPreview, setShowPreview, - }: Pick< - IReaderSettings, - | 'readingMode' - | 'readingDirection' - | 'shouldUseInfiniteScroll' - | 'readerWidth' - | 'pageScaleMode' - | 'shouldOffsetDoubleSpreads' - | 'imagePreLoadAmount' - | 'pageGap' - | 'customFilter' - | 'shouldStretchPage' - | 'isStaticNav' - > & - Pick & + }: Pick & TReaderTapZoneContext & { updateCurrentPageIndex: ReturnType; }, @@ -153,6 +126,29 @@ const BaseReaderViewer = forwardRef( setReaderStateChapters: state.chapters.setReaderStateChapters, isCurrentChapterReady: state.chapters.isCurrentChapterReady, })); + const { + readingMode, + readingDirection, + readerWidth, + pageScaleMode, + shouldOffsetDoubleSpreads, + imagePreLoadAmount, + pageGap, + customFilter, + shouldStretchPage, + isStaticNav, + } = useReaderStoreShallow((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, + })); const { resumeMode = ReaderResumeMode.START } = useLocation().state ?? { resumeMode: ReaderResumeMode.START, }; @@ -408,7 +404,6 @@ const BaseReaderViewer = forwardRef( pageScaleMode={pageScaleMode} shouldOffsetDoubleSpreads={shouldOffsetDoubleSpreads} readingDirection={readingDirection} - shouldUseInfiniteScroll={shouldUseInfiniteScroll} updateCurrentPageIndex={isCurrentChapter ? updateCurrentPageIndex : noOp} scrollIntoView={isCurrentChapter && visibleChapters.scrollIntoView} resumeMode={getReaderChapterViewResumeMode( @@ -441,26 +436,9 @@ const BaseReaderViewer = forwardRef( export const ReaderViewer = withPropsFrom( memo(BaseReaderViewer), [ - ReaderService.useSettingsWithoutDefaultFlag, () => ({ updateCurrentPageIndex: ReaderControls.useUpdateCurrentPageIndex() }), useReaderTapZoneContext, useNavBarContext, ], - [ - 'readingMode', - 'readingDirection', - 'shouldUseInfiniteScroll', - 'readerWidth', - 'pageScaleMode', - 'shouldOffsetDoubleSpreads', - 'imagePreLoadAmount', - 'pageGap', - 'customFilter', - 'shouldStretchPage', - 'isStaticNav', - 'readerNavBarWidth', - 'updateCurrentPageIndex', - 'showPreview', - 'setShowPreview', - ], + ['readerNavBarWidth', 'updateCurrentPageIndex', 'showPreview', 'setShowPreview'], ); diff --git a/src/features/reader/viewer/components/ReaderTransitionPage.tsx b/src/features/reader/viewer/components/ReaderTransitionPage.tsx index 90c87a71..34003f0c 100644 --- a/src/features/reader/viewer/components/ReaderTransitionPage.tsx +++ b/src/features/reader/viewer/components/ReaderTransitionPage.tsx @@ -27,7 +27,6 @@ import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { getValueFromObject, noOp } from '@/lib/HelperFunctions.ts'; import { READER_BACKGROUND_TO_COLOR } from '@/features/reader/settings/ReaderSettings.constants.tsx'; -import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { ChapterType } from '@/lib/graphql/generated/graphql.ts'; import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts'; import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; @@ -71,9 +70,6 @@ const ChapterInfo = ({ const BaseReaderTransitionPage = ({ type, - readingMode, - backgroundColor, - shouldShowTransitionPage, currentChapterName, currentChapterScanlator, previousChapterName, @@ -82,24 +78,28 @@ const BaseReaderTransitionPage = ({ nextChapterScanlator, readerNavBarWidth, handleBack, -}: Pick & - Pick & { - // gets used in the "source props creators" of the "withPropsFrom" call - // eslint-disable-next-line react/no-unused-prop-types - chapterId: ChapterIdInfo['id']; - currentChapterName?: ChapterType['name']; - currentChapterScanlator?: ChapterType['scanlator']; - previousChapterName?: ChapterType['name']; - previousChapterScanlator?: ChapterType['scanlator']; - nextChapterName?: ChapterType['name']; - nextChapterScanlator?: ChapterType['scanlator']; - type: Exclude; - handleBack: () => void; - }) => { +}: Pick & { + // gets used in the "source props creators" of the "withPropsFrom" call + // eslint-disable-next-line react/no-unused-prop-types + chapterId: ChapterIdInfo['id']; + currentChapterName?: ChapterType['name']; + currentChapterScanlator?: ChapterType['scanlator']; + previousChapterName?: ChapterType['name']; + previousChapterScanlator?: ChapterType['scanlator']; + nextChapterName?: ChapterType['name']; + nextChapterScanlator?: ChapterType['scanlator']; + type: Exclude; + handleBack: () => void; +}) => { const { t } = useTranslation(); const manga = useReaderStoreShallow((state) => state.manga); const scrollbar = useReaderStoreShallow((state) => state.scrollbar); const transitionPageMode = useReaderStore((state) => state.pages.transitionPageMode); + const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderStoreShallow((state) => ({ + readingMode: state.settings.readingMode.value, + backgroundColor: state.settings.backgroundColor, + shouldShowTransitionPage: state.settings.shouldShowTransitionPage, + })); const isPreviousType = type === ReaderTransitionPageMode.PREVIOUS; const isNextType = type === ReaderTransitionPageMode.NEXT; @@ -244,7 +244,6 @@ export const ReaderTransitionPage = withPropsFrom( }; }, useNavBarContext, - ReaderService.useSettingsWithoutDefaultFlag, ({ chapterId, type }: Pick, 'chapterId' | 'type'>) => { const handleBack = useBackButton(); const chapters = useReaderStoreShallow((state) => state.chapters.chapters); @@ -276,9 +275,6 @@ export const ReaderTransitionPage = withPropsFrom( 'nextChapterName', 'nextChapterScanlator', 'readerNavBarWidth', - 'backgroundColor', - 'readingMode', 'handleBack', - 'shouldShowTransitionPage', ], );