Reader progress bars

src/modules/reader/contexts/ReaderContextProvider.tsx

@@ -8,7 +8,19 @@
 
 import { ReactNode } from 'react';
 import { ReaderTapZoneContextProvider } from '@/modules/reader/contexts/ReaderTapZoneContextProvider.tsx';
+import { ReaderProgressBarContextProvider } from '@/modules/reader/contexts/ReaderProgressBarContextProvider.tsx';
+import { ReaderOverlayContextProvider } from '@/modules/reader/contexts/ReaderOverlayContextProvider.tsx';
+import { ReaderStateContextProvider } from '@/modules/reader/contexts/state/ReaderStateContextProvider.tsx';
+import { ReaderScrollbarContextProvider } from '@/modules/reader/contexts/ReaderScrollbarContextProvider.tsx';
 
 export const ReaderContextProvider = ({ children }: { children?: ReactNode }) => (
-    <ReaderTapZoneContextProvider>{children}</ReaderTapZoneContextProvider>
+    <ReaderStateContextProvider>
+        <ReaderTapZoneContextProvider>
+            <ReaderOverlayContextProvider>
+                <ReaderProgressBarContextProvider>
+                    <ReaderScrollbarContextProvider>{children}</ReaderScrollbarContextProvider>
+                </ReaderProgressBarContextProvider>
+            </ReaderOverlayContextProvider>
+        </ReaderTapZoneContextProvider>
+    </ReaderStateContextProvider>
 );

src/modules/reader/contexts/ReaderOverlayContext.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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 React, { createContext, useContext } from 'react';
+
+type TReaderOverlayContext = {
+    isVisible: boolean;
+    setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const ReaderOverlayContext = createContext<TReaderOverlayContext>({
+    isVisible: false,
+    setIsVisible: () => {},
+});
+
+export const useReaderOverlayContext = () => useContext(ReaderOverlayContext);

src/modules/reader/contexts/ReaderOverlayContextProvider.tsx

@@ -0,0 +1,18 @@
+/*
+ * 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 { ReactNode, useMemo, useState } from 'react';
+import { ReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
+
+export const ReaderOverlayContextProvider = ({ children }: { children: ReactNode }) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    const value = useMemo(() => ({ isVisible, setIsVisible }), [isVisible]);
+
+    return <ReaderOverlayContext.Provider value={value}>{children}</ReaderOverlayContext.Provider>;
+};

src/modules/reader/contexts/ReaderProgressBarContext.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';
+
+type TReaderContext = {
+    isMaximized: boolean;
+    setIsMaximized: (visible: boolean) => void;
+    isDragging: boolean;
+    setIsDragging: (isDragging: boolean) => void;
+};
+
+export const ReaderProgressBarContext = createContext<TReaderContext>({
+    isMaximized: false,
+    setIsMaximized: () => undefined,
+    isDragging: false,
+    setIsDragging: () => undefined,
+});
+
+export const useReaderProgressBarContext = () => useContext(ReaderProgressBarContext);

src/modules/reader/contexts/ReaderProgressBarContextProvider.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 { ReactNode, useMemo, useState } from 'react';
+import { ReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
+
+export const ReaderProgressBarContextProvider = ({ children }: { children: ReactNode }) => {
+    const [isMaximized, setIsMaximized] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+
+    const value = useMemo(
+        () => ({ isMaximized, setIsMaximized, isDragging, setIsDragging }),
+        [isMaximized, isDragging],
+    );
+
+    return <ReaderProgressBarContext.Provider value={value}>{children}</ReaderProgressBarContext.Provider>;
+};

src/modules/reader/contexts/ReaderScrollbarContext.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';
+
+type TReaderScrollbarContext = {
+    scrollbarXSize: number;
+    setScrollbarXSize: (size: number) => void;
+    scrollbarYSize: number;
+    setScrollbarYSize: (size: number) => void;
+};
+
+export const ReaderScrollbarContext = createContext<TReaderScrollbarContext>({
+    scrollbarXSize: 0,
+    setScrollbarXSize: () => undefined,
+    scrollbarYSize: 0,
+    setScrollbarYSize: () => undefined,
+});
+
+export const useReaderScrollbarContext = () => useContext(ReaderScrollbarContext);

src/modules/reader/contexts/ReaderScrollbarContextProvider.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 { ReactNode, useMemo, useState } from 'react';
+import { ReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
+
+export const ReaderScrollbarContextProvider = ({ children }: { children: ReactNode }) => {
+    const [scrollbarXSize, setScrollbarXSize] = useState(0);
+    const [scrollbarYSize, setScrollbarYSize] = useState(0);
+
+    const value = useMemo(
+        () => ({ scrollbarXSize, setScrollbarXSize, scrollbarYSize, setScrollbarYSize }),
+        [scrollbarXSize, scrollbarYSize],
+    );
+
+    return <ReaderScrollbarContext.Provider value={value}>{children}</ReaderScrollbarContext.Provider>;
+};

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>;
+};