Move reader "pages" state to base reader types

src/features/reader/Reader.types.ts

@@ -10,7 +10,6 @@ import { MutableRefObject } from 'react';
 import { TapZoneInvertMode, TapZoneLayouts } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
 import { TChapterReader } from '@/features/chapter/Chapter.types.ts';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { TMangaReader } from '@/features/manga/Manga.types.ts';
 import { useAutomaticScrolling } from '@/base/hooks/useAutomaticScrolling.ts';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
@@ -284,6 +283,37 @@ export enum ReaderHotkey {
     EXIT_READER,
 }
 
+interface SinglePageData {
+    index: number;
+    alt: string;
+    url: string;
+}
+
+export interface PageData {
+    name: string;
+    primary: SinglePageData;
+    secondary?: SinglePageData;
+}
+
+export interface ReaderStatePages {
+    totalPages: number;
+    setTotalPages: React.Dispatch<React.SetStateAction<number>>;
+    currentPageIndex: number;
+    setCurrentPageIndex: React.Dispatch<React.SetStateAction<number>>;
+    pageToScrollToIndex: number | null;
+    setPageToScrollToIndex: React.Dispatch<React.SetStateAction<number | null>>;
+    pageUrls: string[];
+    setPageUrls: React.Dispatch<React.SetStateAction<string[]>>;
+    pageLoadStates: { url: string; loaded: boolean; error?: boolean }[];
+    setPageLoadStates: React.Dispatch<React.SetStateAction<{ url: string; loaded: boolean; error?: boolean }[]>>;
+    pages: PageData[];
+    setPages: React.Dispatch<React.SetStateAction<PageData[]>>;
+    transitionPageMode: ReaderTransitionPageMode;
+    setTransitionPageMode: React.Dispatch<React.SetStateAction<ReaderTransitionPageMode>>;
+    retryFailedPagesKeyPrefix: string;
+    setRetryFailedPagesKeyPrefix: React.Dispatch<React.SetStateAction<string>>;
+}
+
 export interface ReaderPagerProps
     extends Pick<
             ReaderStatePages,

src/features/reader/Reader.utils.ts

@@ -10,6 +10,7 @@ import {
     ReaderPageSpreadState,
     ReaderResumeMode,
     ReaderStateChapters,
+    ReaderStatePages,
     ReadingMode,
 } from '@/features/reader/Reader.types.ts';
 import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
@@ -17,7 +18,6 @@ import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.
 import { Chapters } from '@/features/chapter/services/Chapters.ts';
 import { CHAPTER_READER_FIELDS } from '@/lib/graphql/fragments/ChapterFragments.ts';
 import { isPageOfOutdatedPageLoadStates, isSpreadPage } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { coerceIn } from '@/lib/HelperFunctions.ts';
 
 import { DirectionOffset } from '@/base/Base.types.ts';

src/features/reader/ReaderContext.constants.ts

@@ -6,8 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
-import { ReaderTransitionPageMode } from '@/features/reader/Reader.types.ts';
+import { ReaderStatePages, ReaderTransitionPageMode } from '@/features/reader/Reader.types.ts';
 import { createPageData } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 
 export const READER_STATE_PAGES_DEFAULTS: ReaderStatePages = {

src/features/reader/contexts/state/ReaderStatePagesContext.tsx

@@ -7,8 +7,7 @@
  */
 
 import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
-import { ReaderTransitionPageMode } from '@/features/reader/Reader.types.ts';
+import { ReaderStatePages, ReaderTransitionPageMode } from '@/features/reader/Reader.types.ts';
 import { READER_STATE_PAGES_DEFAULTS } from '@/features/reader/ReaderContext.constants.ts';
 
 export const ReaderStatePagesContext = createContext<ReaderStatePages>({

src/features/reader/hooks/useReaderResetStates.ts

@@ -10,13 +10,13 @@ import { useEffect } from 'react';
 import { createPageData } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 import {
     ReaderStateChapters,
+    ReaderStatePages,
     ReaderTransitionPageMode,
     TReaderAutoScrollContext,
     TReaderStateMangaContext,
     TReaderStateSettingsContext,
 } from '@/features/reader/Reader.types.ts';
 import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import { READER_STATE_CHAPTERS_DEFAULTS } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
 

src/features/reader/overlay/components/ReaderPageNumber.tsx

@@ -14,6 +14,7 @@ import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import {
     IReaderSettings,
     ProgressBarType,
+    ReaderStatePages,
     ReadingDirection,
     TReaderScrollbarContext,
 } from '@/features/reader/Reader.types.ts';
@@ -24,10 +25,7 @@ import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-
 import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScrollbarContext.tsx';
 import { reverseString } from '@/base/utils/Strings.ts';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
-import {
-    ReaderStatePages,
-    TReaderProgressBarContext,
-} from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
+import { TReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 
 const BaseReaderPageNumber = ({

src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx

@@ -15,9 +15,8 @@ import { memo, useMemo, useRef } from 'react';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { Chapters } from '@/features/chapter/services/Chapters.ts';
-import { ReaderStateChapters } from '@/features/reader/Reader.types.ts';
+import { ReaderStateChapters, ReaderStatePages } from '@/features/reader/Reader.types.ts';
 import { DownloadStateIndicator } from '@/base/components/downloads/DownloadStateIndicator.tsx';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';

src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx

@@ -14,13 +14,12 @@ import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import { Select } from '@/base/components/inputs/Select.tsx';
 import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 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 { IReaderSettings, ReaderStatePages } from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 

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

@@ -8,38 +8,7 @@
 
 import { BoxProps } from '@mui/material/Box';
 import { TooltipProps } from '@mui/material/Tooltip';
-import { IReaderSettings, ReaderTransitionPageMode } from '@/features/reader/Reader.types.ts';
-
-interface SinglePageData {
-    index: number;
-    alt: string;
-    url: string;
-}
-
-interface PageData {
-    name: string;
-    primary: SinglePageData;
-    secondary?: SinglePageData;
-}
-
-export interface ReaderStatePages {
-    totalPages: number;
-    setTotalPages: React.Dispatch<React.SetStateAction<number>>;
-    currentPageIndex: number;
-    setCurrentPageIndex: React.Dispatch<React.SetStateAction<number>>;
-    pageToScrollToIndex: number | null;
-    setPageToScrollToIndex: React.Dispatch<React.SetStateAction<number | null>>;
-    pageUrls: string[];
-    setPageUrls: React.Dispatch<React.SetStateAction<string[]>>;
-    pageLoadStates: { url: string; loaded: boolean; error?: boolean }[];
-    setPageLoadStates: React.Dispatch<React.SetStateAction<{ url: string; loaded: boolean; error?: boolean }[]>>;
-    pages: PageData[];
-    setPages: React.Dispatch<React.SetStateAction<PageData[]>>;
-    transitionPageMode: ReaderTransitionPageMode;
-    setTransitionPageMode: React.Dispatch<React.SetStateAction<ReaderTransitionPageMode>>;
-    retryFailedPagesKeyPrefix: string;
-    setRetryFailedPagesKeyPrefix: React.Dispatch<React.SetStateAction<string>>;
-}
+import { IReaderSettings, PageData, ReaderStatePages } from '@/features/reader/Reader.types.ts';
 
 export interface ReaderProgressBarProps
     extends Pick<ReaderStatePages, 'totalPages' | 'pages' | 'pageLoadStates' | 'currentPageIndex'>,

src/features/reader/screens/Reader.tsx

@@ -34,6 +34,7 @@ import {
     IReaderSettings,
     IReaderSettingsWithDefaultFlag,
     ReaderStateChapters,
+    ReaderStatePages,
     TReaderAutoScrollContext,
     TReaderStateMangaContext,
     TReaderStateSettingsContext,
@@ -41,7 +42,6 @@ import {
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
 import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';

src/features/reader/viewer/ReaderChapterViewer.tsx

@@ -17,6 +17,7 @@ import {
     ReaderPageSpreadState,
     ReaderResumeMode,
     ReaderStateChapters,
+    ReaderStatePages,
     ReaderTransitionPageMode,
     ReadingDirection,
     ReadingMode,
@@ -29,7 +30,6 @@ import {
     isContinuousVerticalReadingMode,
     shouldApplyReaderWidth,
 } from '@/features/reader/settings/ReaderSettings.utils.tsx';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { createHandleReaderPageLoadError, createUpdateReaderPageLoadState } from '@/features/reader/Reader.utils.ts';
 import { useReaderConvertPagesForReadingMode } from '@/features/reader/viewer/hooks/useReaderConvertPagesForReadingMode.ts';
 import { ReaderTransitionPage } from '@/features/reader/viewer/components/ReaderTransitionPage.tsx';

src/features/reader/viewer/ReaderViewer.tsx

@@ -28,6 +28,7 @@ import {
     ReaderOpenChapterLocationState,
     ReaderResumeMode,
     ReaderStateChapters,
+    ReaderStatePages,
     ReadingDirection,
     ReadingMode,
     TReaderScrollbarContext,
@@ -45,7 +46,6 @@ import { useMouseDragScroll } from '@/base/hooks/useMouseDragScroll.tsx';
 import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
 import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';

src/features/reader/viewer/components/ReaderTransitionPage.tsx

@@ -17,6 +17,7 @@ import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScro
 import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import {
     IReaderSettings,
+    ReaderStatePages,
     ReaderTransitionPageMode,
     ReadingMode,
     TReaderScrollbarContext,
@@ -37,7 +38,6 @@ import { useReaderStateMangaContext } from '@/features/reader/contexts/state/Rea
 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 { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';

src/features/reader/viewer/hooks/useReaderConvertPagesForReadingMode.ts

@@ -7,10 +7,9 @@
  */
 
 import { useLayoutEffect, useState } from 'react';
-import { ReaderPageSpreadState, ReadingMode } from '@/features/reader/Reader.types.ts';
+import { ReaderPageSpreadState, ReaderStatePages, ReadingMode } from '@/features/reader/Reader.types.ts';
 import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { createPagesData } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 
 export const useReaderConvertPagesForReadingMode = (

src/features/reader/viewer/hooks/useReaderHandlePageSelection.ts

@@ -8,10 +8,9 @@
 
 import { MutableRefObject, useLayoutEffect } from 'react';
 import { Direction } from '@mui/material/styles';
-import { ReadingDirection } from '@/features/reader/Reader.types.ts';
+import { ReaderStatePages, ReadingDirection } from '@/features/reader/Reader.types.ts';
 import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { getScrollIntoViewInlineOption } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import { DirectionOffset } from '@/base/Base.types.ts';
 

src/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts

@@ -11,10 +11,10 @@ import { useWindowEvent } from '@mantine/hooks';
 import {
     ReaderPageScaleMode,
     ReaderStateChapters,
+    ReaderStatePages,
     ReadingDirection,
     ReadingMode,
 } from '@/features/reader/Reader.types.ts';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import {
     isContinuousReadingMode,
     isContinuousVerticalReadingMode,

src/features/reader/viewer/hooks/useReaderScrollToStartOnPageChange.ts

@@ -8,9 +8,8 @@
 
 import { MutableRefObject, useLayoutEffect } from 'react';
 import { Direction } from '@mui/material/styles';
-import { ReadingDirection } from '@/features/reader/Reader.types.ts';
+import { ReaderStatePages, ReadingDirection } from '@/features/reader/Reader.types.ts';
 import { getScrollToXForReadingDirection } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 
 export const useReaderScrollToStartOnPageChange = (
     currentPageIndex: ReaderStatePages['currentPageIndex'],

src/features/reader/viewer/hooks/useReaderSetPagesState.ts

@@ -13,10 +13,10 @@ import {
     ReaderPageSpreadState,
     ReaderResumeMode,
     ReaderStateChapters,
+    ReaderStatePages,
     ReaderTransitionPageMode,
 } from '@/features/reader/Reader.types.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { TChapterReader } from '@/features/chapter/Chapter.types.ts';
 
 export const useReaderSetPagesState = (

src/features/reader/viewer/pager/ReaderPager.utils.tsx

@@ -13,6 +13,7 @@ import {
     PageInViewportType,
     ReaderPageScaleMode,
     ReaderPageSpreadState,
+    ReaderStatePages,
     ReaderTransitionPageMode,
     ReadingDirection,
     ReadingMode,
@@ -25,7 +26,6 @@ import {
     isContinuousVerticalReadingMode,
     shouldApplyReaderWidth,
 } from '@/features/reader/settings/ReaderSettings.utils.tsx';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { ReaderPage } from '@/features/reader/viewer/components/ReaderPage.tsx';
 import { reverseString } from '@/base/utils/Strings.ts';

src/features/reader/viewer/pager/components/BasePager.tsx

@@ -9,11 +9,11 @@
 import { forwardRef, memo, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 import Box, { BoxProps } from '@mui/material/Box';
 import { getPageIndexesToLoad, isATransitionPageVisible } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
-import { ReaderStatePages } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import {
     IReaderSettings,
     ReaderPagerProps,
     ReaderResumeMode,
+    ReaderStatePages,
     ReaderTransitionPageMode,
 } from '@/features/reader/Reader.types.ts';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';