Reader progress bars

src/modules/reader/contexts/state/ReaderStateChaptersContext.tsx

@@ -0,0 +1,17 @@
+/*
+ * 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, useContext } from 'react';
+import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
+
+export const ReaderStateChaptersContext = createContext<ReaderStateChapters>({
+    chapters: [],
+    setReaderStateChapters: () => {},
+});
+
+export const useReaderStateChaptersContext = () => useContext(ReaderStateChaptersContext);

src/modules/reader/contexts/state/ReaderStateChaptersContextProvider.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 { ContextType, ReactNode, useMemo, useState } from 'react';
+import { ReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
+
+type TContext = ContextType<typeof ReaderStateChaptersContext>;
+
+export const ReaderStateChaptersContextProvider = ({ children }: { children: ReactNode }) => {
+    const [state, setState] = useState<Omit<TContext, 'setReaderStateChapters'>>({ chapters: [] });
+
+    const value = useMemo(
+        () => ({
+            ...state,
+            setReaderStateChapters: setState,
+        }),
+        [state],
+    );
+
+    return <ReaderStateChaptersContext.Provider value={value}>{children}</ReaderStateChaptersContext.Provider>;
+};

src/modules/reader/contexts/state/ReaderStateContextProvider.tsx

@@ -7,8 +7,14 @@
  */
 
 import { ReactNode } from 'react';
+import { ReaderStatePagesContextProvider } from '@/modules/reader/contexts/state/ReaderStatePagesContextProvider.tsx';
+import { ReaderStateChaptersContextProvider } from '@/modules/reader/contexts/state/ReaderStateChaptersContextProvider.tsx';
 import { ReaderStateMangaContextProvider } from '@/modules/reader/contexts/state/ReaderStateMangaContextProvider.tsx';
 
 export const ReaderStateContextProvider = ({ children }: { children: ReactNode }) => (
-    <ReaderStateMangaContextProvider>{children}</ReaderStateMangaContextProvider>
+    <ReaderStateMangaContextProvider>
+        <ReaderStateChaptersContextProvider>
+            <ReaderStatePagesContextProvider>{children}</ReaderStatePagesContextProvider>
+        </ReaderStateChaptersContextProvider>
+    </ReaderStateMangaContextProvider>
 );

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

@@ -0,0 +1,25 @@
+/*
+ * 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, useContext } from 'react';
+import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+
+export const ReaderStatePagesContext = createContext<ReaderStatePages>({
+    totalPages: 0,
+    currentPageIndex: 0,
+    setCurrentPageIndex: () => undefined,
+    setTotalPages: () => undefined,
+    pageUrls: [],
+    setPageUrls: () => undefined,
+    pageLoadStates: [],
+    setPageLoadStates: () => undefined,
+    pages: [],
+    setPages: () => undefined,
+});
+
+export const userReaderStatePagesContext = () => useContext(ReaderStatePagesContext);

src/modules/reader/contexts/state/ReaderStatePagesContextProvider.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 { ContextType, ReactNode, useMemo, useState } from 'react';
+import { ReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
+import { createPageData } from '@/modules/reader/utils/ReaderPager.utils.tsx';
+
+type TContext = ContextType<typeof ReaderStatePagesContext>;
+
+export const ReaderStatePagesContextProvider = ({ children }: { children: ReactNode }) => {
+    const [totalPages, setTotalPages] = useState<TContext['totalPages']>(0);
+    const [currentPageIndex, setCurrentPageIndex] = useState<TContext['currentPageIndex']>(0);
+    const [pageUrls, setPageUrls] = useState<TContext['pageUrls']>([]);
+    const [pageLoadStates, setPageLoadStates] = useState<TContext['pageLoadStates']>([]);
+    const [pages, setPages] = useState<TContext['pages']>([createPageData('', 0)]);
+
+    const value = useMemo(
+        () => ({
+            totalPages,
+            setTotalPages,
+            currentPageIndex,
+            setCurrentPageIndex,
+            pageUrls,
+            setPageUrls,
+            pageLoadStates,
+            setPageLoadStates,
+            pages,
+            setPages,
+        }),
+        [totalPages, pages, currentPageIndex, pageUrls, pageLoadStates],
+    );
+
+    return <ReaderStatePagesContext.Provider value={value}>{children}</ReaderStatePagesContext.Provider>;
+};