Move reader "pages state" to "reader store"

src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx

@@ -34,15 +34,11 @@ import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 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 { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { IReaderSettings, ReadingMode } from '@/features/reader/Reader.types.ts';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
 
 const BaseReaderProgressBar = ({
-    totalPages,
-    pages,
-    pageLoadStates,
-    currentPageIndex,
     slotProps,
     slots,
     createProgressBarSlot,
@@ -78,6 +74,13 @@ const BaseReaderProgressBar = ({
         direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
         fullSegmentClicks: boolean;
     }) => {
+    const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderStoreShallow((state) => ({
+        pages: state.pages.pages,
+        pageLoadStates: state.pages.pageLoadStates,
+        totalPages: state.pages.totalPages,
+        currentPageIndex: state.pages.currentPageIndex,
+    }));
+
     const progressBarRef = useRef<HTMLDivElement | null>(null);
     const draggingDetectionTimeout = useRef<NodeJS.Timeout>(undefined);
 
@@ -250,17 +253,7 @@ export const ReaderProgressBar = withPropsFrom(
     [
         useReaderProgressBarContext,
         () => ({ openPage: ReaderControls.useOpenPage() }),
-        userReaderStatePagesContext,
         ReaderService.useSettingsWithoutDefaultFlag,
     ],
-    [
-        'isDragging',
-        'setIsDragging',
-        'openPage',
-        'pages',
-        'pageLoadStates',
-        'totalPages',
-        'currentPageIndex',
-        'readingMode',
-    ],
+    ['isDragging', 'setIsDragging', 'openPage', 'readingMode'],
 );

src/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts

@@ -8,11 +8,9 @@
 
 import { BoxProps } from '@mui/material/Box';
 import { TooltipProps } from '@mui/material/Tooltip';
-import { IReaderSettings, PageData, ReaderStatePages } from '@/features/reader/Reader.types.ts';
+import { IReaderSettings, PageData } from '@/features/reader/Reader.types.ts';
 
-export interface ReaderProgressBarProps
-    extends Pick<ReaderStatePages, 'totalPages' | 'pages' | 'pageLoadStates' | 'currentPageIndex'>,
-        Pick<IReaderSettings, 'progressBarPosition'> {}
+export interface ReaderProgressBarProps extends Pick<IReaderSettings, 'progressBarPosition'> {}
 
 export interface TReaderProgressCurrentPage extends PageData {
     pagesIndex: number;

src/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx

@@ -6,15 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import {
-    ReaderProgressBarProps,
-    TReaderProgressCurrentPage,
-} from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
+import { TReaderProgressCurrentPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { getOptionForDirection as getOptionForDirectionImpl } from '@/features/theme/services/ThemeCreator.ts';
-import { ProgressBarPosition } from '@/features/reader/Reader.types.ts';
+import { ProgressBarPosition, ReaderStatePages } from '@/features/reader/Reader.types.ts';
 import { coerceIn } from '@/lib/HelperFunctions.ts';
 
-export const getPage = (pageIndex: number, pages: ReaderProgressBarProps['pages']): TReaderProgressCurrentPage => {
+export const getPage = (pageIndex: number, pages: ReaderStatePages['pages']): TReaderProgressCurrentPage => {
     const pagesIndex = pages.findIndex(({ primary, secondary }) =>
         [primary.index, secondary?.index].includes(pageIndex),
     );
@@ -29,13 +26,13 @@ export const getPage = (pageIndex: number, pages: ReaderProgressBarProps['pages'
  * for the double page mode the secondary page index has to be used to be able to correctly detect if the last page is visible
  *
  */
-export const getNextIndexFromPage = (page: ReaderProgressBarProps['pages'][number]) =>
+export const getNextIndexFromPage = (page: ReaderStatePages['pages'][number]) =>
     page.secondary?.index ?? page.primary.index;
 
 export const getNextPageIndex = (
     offset: 'previous' | 'next',
     pagesIndex: number,
-    pages: ReaderProgressBarProps['pages'],
+    pages: ReaderStatePages['pages'],
 ): number => {
     switch (offset) {
         case 'previous':
@@ -50,11 +47,11 @@ export const getNextPageIndex = (
 export const getPageForMousePos = (
     coordinates: { clientX: number; clientY: number },
     element: HTMLElement,
-    pages: ReaderProgressBarProps['pages'],
+    pages: ReaderStatePages['pages'],
     isHorizontalPosition: boolean,
     fullSegmentClicks: boolean,
     getOptionForDirection: typeof getOptionForDirectionImpl,
-): ReaderProgressBarProps['pages'][number] => {
+): ReaderStatePages['pages'][number] => {
     const pos = isHorizontalPosition ? coordinates.clientX : coordinates.clientY;
 
     const { paddingTop, paddingBottom, paddingLeft, paddingRight } = getComputedStyle(element);

src/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotWrapper.tsx

@@ -9,8 +9,8 @@
 import Box, { BoxProps } from '@mui/material/Box';
 import { memo, ReactNode, useMemo } from 'react';
 import { styled } from '@mui/material/styles';
-import { ReaderProgressBarProps } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { shouldForwardProp } from '@/base/utils/ShouldForwardProp.ts';
+import { ReaderStatePages } from '@/features/reader/Reader.types.ts';
 
 type StyledWrapperProps = {
     isFirstPage: boolean;
@@ -42,20 +42,20 @@ export const ReaderProgressBarSlotWrapper = memo(
         createProgressBarSlot,
         ...boxProps
     }: {
-        page: ReaderProgressBarProps['pages'][number];
+        page: ReaderStatePages['pages'][number];
         pagesIndex: number;
         isCurrentPage: boolean;
         isLeadingPage: boolean;
         isTrailingPage: boolean;
         totalPages: number;
         showDraggingStyle: boolean;
-        primaryPageLoadState: ReaderProgressBarProps['pageLoadStates'][number]['loaded'];
-        secondaryPageLoadState: ReaderProgressBarProps['pageLoadStates'][number]['loaded'] | undefined;
+        primaryPageLoadState: ReaderStatePages['pageLoadStates'][number]['loaded'];
+        secondaryPageLoadState: ReaderStatePages['pageLoadStates'][number]['loaded'] | undefined;
         createProgressBarSlot: (
-            page: ReaderProgressBarProps['pages'][number],
+            page: ReaderStatePages['pages'][number],
             pagesIndex: number,
-            primaryPageLoadState: ReaderProgressBarProps['pageLoadStates'][number]['loaded'],
-            secondaryPageLoadState: ReaderProgressBarProps['pageLoadStates'][number]['loaded'] | undefined,
+            primaryPageLoadState: ReaderStatePages['pageLoadStates'][number]['loaded'],
+            secondaryPageLoadState: ReaderStatePages['pageLoadStates'][number]['loaded'] | undefined,
             isCurrentPage: boolean,
             isLeadingPage: boolean,
             isTrailingPage: boolean,

src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx

@@ -9,16 +9,12 @@
 import { useTheme } from '@mui/material/styles';
 import { memo, useCallback, useState } from 'react';
 import { ReaderProgressBar } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.tsx';
-import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { IReaderSettings, 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';
-import {
-    ReaderProgressBarProps,
-    TReaderProgressBarContext,
-} from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
+import { TReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
@@ -26,7 +22,7 @@ import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-
 import { ReaderProgressBarSlotDesktop } from '@/features/reader/overlay/progress-bar/desktop/components/ReaderProgressBarSlotDesktop.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
-import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
 
 const BaseStandardReaderProgressBar = ({
     readerNavBarWidth,
@@ -38,19 +34,18 @@ const BaseStandardReaderProgressBar = ({
     progressBarPosition,
     progressBarPositionAutoVertical,
     readerDirection,
-    totalPages,
 }: Pick<NavbarContextType, 'readerNavBarWidth'> &
     Pick<TReaderProgressBarContext, 'isMaximized' | 'setIsMaximized' | 'isDragging'> &
     Pick<
         IReaderSettings,
         'progressBarType' | 'progressBarSize' | 'progressBarPosition' | 'progressBarPositionAutoVertical'
-    > &
-    Pick<ReaderProgressBarProps, 'totalPages'> & {
+    > & {
         readerDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
     }) => {
     const theme = useTheme();
 
     const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
+    const totalPages = useReaderStore((state) => state.pages.totalPages);
 
     const [, setRefreshProgressBarPosition] = useState({});
     useResizeObserver(
@@ -254,7 +249,6 @@ export const StandardReaderProgressBar = withPropsFrom(
         useReaderProgressBarContext,
         ReaderService.useSettingsWithoutDefaultFlag,
         () => ({ readerDirection: ReaderService.useGetThemeDirection() }),
-        userReaderStatePagesContext,
     ],
     [
         'readerNavBarWidth',
@@ -266,6 +260,5 @@ export const StandardReaderProgressBar = withPropsFrom(
         'progressBarPosition',
         'progressBarPositionAutoVertical',
         'readerDirection',
-        'totalPages',
     ],
 );

src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx

@@ -26,12 +26,8 @@ import { IReaderSettings, ProgressBarPosition, ReaderStateChapters } from '@/fea
 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';
-import {
-    ReaderProgressBarProps,
-    TReaderProgressBarContext,
-} from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
+import { TReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { ReaderProgressBarSlotMobile } from '@/features/reader/overlay/progress-bar/mobile/components/ReaderProgressBarSlotMobile.tsx';
-import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
@@ -51,8 +47,6 @@ const BaseMobileReaderProgressBar = ({
     nextChapter,
     setIsMaximized,
     isDragging,
-    currentPageIndex,
-    pages,
     direction: readerDirection,
     progressBarPosition,
     progressBarPositionAutoVertical,
@@ -60,7 +54,6 @@ const BaseMobileReaderProgressBar = ({
     bottomOffset = 0,
 }: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
     Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> &
-    Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> &
     Pick<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'> & {
         direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
         topOffset?: number;
@@ -69,6 +62,10 @@ const BaseMobileReaderProgressBar = ({
     const openChapter = ReaderControls.useOpenChapter();
     const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
     const isVisible = useReaderStore((state) => state.overlay.isVisible);
+    const { currentPageIndex, pages } = useReaderStoreShallow((state) => ({
+        currentPageIndex: state.pages.currentPageIndex,
+        pages: state.pages.pages,
+    }));
 
     const [, setRefreshProgressBarPosition] = useState({});
     useResizeObserver(
@@ -359,7 +356,6 @@ export const MobileReaderProgressBar = withPropsFrom(
     [
         useReaderStateChaptersContext,
         useReaderProgressBarContext,
-        userReaderStatePagesContext,
         () => ({ direction: ReaderService.useGetThemeDirection() }),
         ReaderService.useSettingsWithoutDefaultFlag,
     ],
@@ -368,8 +364,6 @@ export const MobileReaderProgressBar = withPropsFrom(
         'nextChapter',
         'setIsMaximized',
         'isDragging',
-        'currentPageIndex',
-        'pages',
         'direction',
         'progressBarPosition',
         'progressBarPositionAutoVertical',