Move reader "scrollbar state" to "reader store"

2025-08-31 13:41:09 +02:00
parent 433dc17c35
commit 4cc5821ead
17 changed files with 60 additions and 146 deletions
--- a/src/features/reader/viewer/ReaderChapterViewer.tsx
+++ b/src/features/reader/viewer/ReaderChapterViewer.tsx
@@ -83,8 +83,6 @@ const BaseReaderChapterViewer = ({
    resumeMode,
    customFilter,
    shouldStretchPage,
-    scrollbarXSize,
-    scrollbarYSize,
    readerNavBarWidth,
    onSizeChange,
    minWidth,
@@ -419,8 +417,6 @@ const BaseReaderChapterViewer = ({
                    isPreviousChapterVisible={isPreviousChapterVisible}
                    isNextChapterVisible={isNextChapterVisible}
                    imageWrapper={pagerRef.current}
-                    scrollbarXSize={scrollbarXSize}
-                    scrollbarYSize={scrollbarYSize}
                    scrollElement={scrollElement}
                />
            )}
@@ -449,8 +445,6 @@ const BaseReaderChapterViewer = ({
                customFilter={customFilter}
                shouldStretchPage={shouldStretchPage}
                readerWidth={readerWidth}
-                scrollbarXSize={scrollbarXSize}
-                scrollbarYSize={scrollbarYSize}
                readerNavBarWidth={readerNavBarWidth}
                isPreloadMode={isPreloadMode}
                resumeMode={resumeMode}
--- a/src/features/reader/viewer/ReaderViewer.tsx
+++ b/src/features/reader/viewer/ReaderViewer.tsx
@@ -31,10 +31,8 @@ import {
    ReaderStatePages,
    ReadingDirection,
    ReadingMode,
-    TReaderScrollbarContext,
 } from '@/features/reader/Reader.types.ts';
 import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
-import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScrollbarContext.tsx';
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import {
@@ -69,6 +67,7 @@ import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types
 import { useReaderPreserveScrollPosition } from '@/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts';

 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
+import { getReaderStore } from '@/features/reader/ReaderStore.ts';

 const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
    [ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -105,8 +104,6 @@ const BaseReaderViewer = forwardRef(
            shouldStretchPage,
            isStaticNav,
            readerNavBarWidth,
-            setScrollbarXSize,
-            setScrollbarYSize,
            isVisible: isOverlayVisible,
            setIsVisible: setIsOverlayVisible,
            updateCurrentPageIndex,
@@ -147,7 +144,6 @@ const BaseReaderViewer = forwardRef(
                | 'shouldStretchPage'
                | 'isStaticNav'
            > &
-            Pick<TReaderScrollbarContext, 'setScrollbarXSize' | 'setScrollbarYSize'> &
            Pick<NavbarContextType, 'readerNavBarWidth'> &
            Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
            Pick<
@@ -183,8 +179,9 @@ const BaseReaderViewer = forwardRef(
        const scrollbarXSize = MediaQuery.useGetScrollbarSize('width', scrollElementRef.current);
        const scrollbarYSize = MediaQuery.useGetScrollbarSize('height', scrollElementRef.current);
        useLayoutEffect(() => {
-            setScrollbarXSize(scrollbarXSize);
-            setScrollbarYSize(scrollbarYSize);
+            const { scrollbar } = getReaderStore();
+            scrollbar.setScrollbarXSize(scrollbarXSize);
+            scrollbar.setScrollbarYSize(scrollbarYSize);
        }, [scrollbarXSize, scrollbarYSize]);

        const handleClick = ReaderControls.useHandleClick(scrollElementRef.current);
@@ -432,8 +429,6 @@ const BaseReaderViewer = forwardRef(
                            imagePreLoadAmount={imagePreLoadAmount}
                            customFilter={customFilter}
                            shouldStretchPage={shouldStretchPage}
-                            scrollbarXSize={scrollbarXSize}
-                            scrollbarYSize={scrollbarYSize}
                            readerNavBarWidth={readerNavBarWidth}
                            onSizeChange={onChapterViewSizeChange}
                            minWidth={isChapterSizeSourceChapter ? 0 : minChapterViewWidth}
@@ -452,7 +447,6 @@ export const ReaderViewer = withPropsFrom(
    [
        userReaderStatePagesContext,
        ReaderService.useSettingsWithoutDefaultFlag,
-        useReaderScrollbarContext,
        useReaderOverlayContext,
        () => ({ updateCurrentPageIndex: ReaderControls.useUpdateCurrentPageIndex() }),
        useReaderTapZoneContext,
@@ -484,8 +478,6 @@ export const ReaderViewer = withPropsFrom(
        'isStaticNav',
        'readerNavBarWidth',
        'transitionPageMode',
-        'setScrollbarXSize',
-        'setScrollbarYSize',
        'isVisible',
        'setIsVisible',
        'updateCurrentPageIndex',
--- a/src/features/reader/viewer/components/ReaderPage.tsx
+++ b/src/features/reader/viewer/components/ReaderPage.tsx
@@ -8,12 +8,7 @@

 import { memo, useCallback } from 'react';
 import { SpinnerImage, SpinnerImageProps } from '@/base/components/SpinnerImage.tsx';
-import {
-    IReaderSettings,
-    ReaderCustomFilter,
-    ReaderPagerProps,
-    TReaderScrollbarContext,
-} from '@/features/reader/Reader.types.ts';
+import { IReaderSettings, ReaderCustomFilter, ReaderPagerProps } from '@/features/reader/Reader.types.ts';
 import {
    getImageMarginStyling,
    getImagePlaceholderStyling,
@@ -22,6 +17,7 @@ import {
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const getCustomFilterString = (customFilter: ReaderCustomFilter): string =>
    Object.keys(customFilter)
@@ -66,8 +62,6 @@ const BaseReaderPage = ({
    pageScaleMode,
    shouldStretchPage,
    readerWidth,
-    scrollbarXSize,
-    scrollbarYSize,
    onLoad,
    onError,
    setRef,
@@ -76,7 +70,6 @@ const BaseReaderPage = ({
    ...props
 }: Omit<SpinnerImageProps, 'spinnerStyle' | 'imgStyle' | 'onLoad' | 'onError'> &
    Pick<IReaderSettings, 'readingMode' | 'customFilter' | 'pageScaleMode' | 'shouldStretchPage' | 'readerWidth'> &
-    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> &
    Pick<NavbarContextType, 'readerNavBarWidth'> & {
        pageIndex: number;
        pagesIndex: number;
@@ -93,6 +86,7 @@ const BaseReaderPage = ({
    const { src } = props;

    const isTabletWidth = MediaQuery.useIsTabletWidth();
+    const { scrollbarXSize, scrollbarYSize } = useReaderStoreShallow((state) => state.scrollbar);

    const handleLoad = useCallback(
        () => onLoad?.(pagesIndex, src, isPrimaryPage),
--- a/src/features/reader/viewer/components/ReaderTransitionPage.tsx
+++ b/src/features/reader/viewer/components/ReaderTransitionPage.tsx
@@ -13,14 +13,12 @@ import Button from '@mui/material/Button';
 import { Link } from 'react-router-dom';
 import { ComponentProps, memo, useMemo } from 'react';
 import { alpha, useTheme } from '@mui/material/styles';
-import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScrollbarContext.tsx';
 import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import {
    IReaderSettings,
    ReaderStatePages,
    ReaderTransitionPageMode,
    ReadingMode,
-    TReaderScrollbarContext,
 } from '@/features/reader/Reader.types.ts';
 import { isTransitionPageVisible } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 import { useBackButton } from '@/base/hooks/useBackButton.ts';
@@ -90,12 +88,9 @@ const BaseReaderTransitionPage = ({
    previousChapterScanlator,
    nextChapterName,
    nextChapterScanlator,
-    scrollbarXSize,
-    scrollbarYSize,
    readerNavBarWidth,
    handleBack,
 }: Pick<IReaderSettings, 'readingMode' | 'backgroundColor' | 'shouldShowTransitionPage'> &
-    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> &
    Pick<ReaderStatePages, 'transitionPageMode'> &
    Pick<NavbarContextType, 'readerNavBarWidth'> & {
        // gets used in the "source props creators" of the "withPropsFrom" call
@@ -112,6 +107,7 @@ const BaseReaderTransitionPage = ({
    }) => {
    const { t } = useTranslation();
    const manga = useReaderStoreShallow((state) => state.manga);
+    const { scrollbarXSize, scrollbarYSize } = useReaderStoreShallow((state) => state.scrollbar);

    const isPreviousType = type === ReaderTransitionPageMode.PREVIOUS;
    const isNextType = type === ReaderTransitionPageMode.NEXT;
@@ -255,7 +251,6 @@ export const ReaderTransitionPage = withPropsFrom(
                nextChapterScanlator: nextChapter?.scanlator,
            };
        },
-        useReaderScrollbarContext,
        useNavBarContext,
        userReaderStatePagesContext,
        ReaderService.useSettingsWithoutDefaultFlag,
@@ -289,8 +284,6 @@ export const ReaderTransitionPage = withPropsFrom(
        'previousChapterScanlator',
        'nextChapterName',
        'nextChapterScanlator',
-        'scrollbarXSize',
-        'scrollbarYSize',
        'readerNavBarWidth',
        'backgroundColor',
        'transitionPageMode',
--- a/src/features/reader/viewer/pager/ReaderPager.utils.tsx
+++ b/src/features/reader/viewer/pager/ReaderPager.utils.tsx
@@ -17,7 +17,6 @@ import {
    ReaderTransitionPageMode,
    ReadingDirection,
    ReadingMode,
-    TReaderScrollbarContext,
 } from '@/features/reader/Reader.types.ts';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import {
@@ -295,8 +294,6 @@ export const createReaderPage = (
    pageScaleMode: IReaderSettings['pageScaleMode'],
    shouldStretchPage: IReaderSettings['shouldStretchPage'],
    readerWidth: IReaderSettings['readerWidth'],
-    scrollbarXSize: TReaderScrollbarContext['scrollbarXSize'],
-    scrollbarYSize: TReaderScrollbarContext['scrollbarYSize'],
    readerNavBarWidth: NavbarContextType['readerNavBarWidth'],
    retryKeyPrefix?: string,
    position?: 'left' | 'right',
@@ -327,8 +324,6 @@ export const createReaderPage = (
        pageScaleMode={pageScaleMode}
        shouldStretchPage={shouldStretchPage}
        readerWidth={readerWidth}
-        scrollbarXSize={scrollbarXSize}
-        scrollbarYSize={scrollbarYSize}
        readerNavBarWidth={readerNavBarWidth}
    />
 );
--- a/src/features/reader/viewer/pager/components/BasePager.tsx
+++ b/src/features/reader/viewer/pager/components/BasePager.tsx
@@ -37,8 +37,6 @@ const BaseBasePager = forwardRef<
                pageScaleMode: ReaderPagerProps['pageScaleMode'],
                shouldStretchPage: ReaderPagerProps['shouldStretchPage'],
                readerWidth: ReaderPagerProps['readerWidth'],
-                scrollbarXSize: ReaderPagerProps['scrollbarXSize'],
-                scrollbarYSize: ReaderPagerProps['scrollbarYSize'],
                readerNavBarWidth: ReaderPagerProps['readerNavBarWidth'],
            ) => ReactNode;
            slots?: { boxProps?: BoxProps };
@@ -61,8 +59,6 @@ const BaseBasePager = forwardRef<
            pageScaleMode,
            shouldStretchPage,
            readerWidth,
-            scrollbarXSize,
-            scrollbarYSize,
            readerNavBarWidth,
            resumeMode,
            handleAsInitialRender,
@@ -147,8 +143,6 @@ const BaseBasePager = forwardRef<
                        pageScaleMode,
                        shouldStretchPage,
                        readerWidth,
-                        scrollbarXSize,
-                        scrollbarYSize,
                        readerNavBarWidth,
                    ),
                )}