Move reader "settings state" to "reader store"

2025-09-20 14:15:40 +02:00
parent 5177f9efdc
commit 98ec5257b9
28 changed files with 315 additions and 538 deletions
--- 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<ReaderPagerProps, 'pages' | 'totalPages' | 'pageLoadStates' | 'handleAsInitialRender' | 'resumeMode'> &
    Pick<
        IReaderSettings,
-        | 'readingMode'
-        | 'shouldOffsetDoubleSpreads'
-        | 'readingDirection'
-        | 'readerWidth'
-        | 'pageScaleMode'
-        | 'shouldUseInfiniteScroll'
+        'readingMode' | 'shouldOffsetDoubleSpreads' | 'readingDirection' | 'readerWidth' | 'pageScaleMode'
    > &
    Pick<ReaderStateChapters, 'setReaderStateChapters'> & {
        updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>;
@@ -405,9 +399,6 @@ const BaseReaderChapterViewer = ({
        >
            {!isPreloadMode && (
                <ReaderInfiniteScrollUpdateChapter
-                    readingMode={readingMode}
-                    readingDirection={readingDirection}
-                    shouldUseInfiniteScroll={shouldUseInfiniteScroll}
                    chapterId={chapterId}
                    previousChapterId={previousChapterId}
                    nextChapterId={nextChapterId}
--- a/src/features/reader/viewer/ReaderViewer.tsx
+++ b/src/features/reader/viewer/ReaderViewer.tsx
@@ -21,9 +21,7 @@ import Stack from '@mui/material/Stack';
 import { useTheme } from '@mui/material/styles';
 import { useLocation } from 'react-router-dom';
 import { useMergedRef } from '@mantine/hooks';
-import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import {
-    IReaderSettings,
    PageInViewportType,
    ReaderOpenChapterLocationState,
    ReaderResumeMode,
@@ -73,36 +71,11 @@ const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType>
 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<NavbarContextType, 'readerNavBarWidth'> &
+        }: Pick<NavbarContextType, 'readerNavBarWidth'> &
            TReaderTapZoneContext & {
                updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>;
            },
@@ -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<ReaderOpenChapterLocationState>().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'],
 );
--- 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<IReaderSettings, 'readingMode' | 'backgroundColor' | 'shouldShowTransitionPage'> &
-    Pick<NavbarContextType, 'readerNavBarWidth'> & {
-        // 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<ReaderTransitionPageMode, ReaderTransitionPageMode.NONE | ReaderTransitionPageMode.BOTH>;
-        handleBack: () => void;
-    }) => {
+}: Pick<NavbarContextType, 'readerNavBarWidth'> & {
+    // 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<ReaderTransitionPageMode, ReaderTransitionPageMode.NONE | ReaderTransitionPageMode.BOTH>;
+    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<ComponentProps<typeof BaseReaderTransitionPage>, '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',
    ],
 );