tmp

src/App.tsx

@@ -21,6 +21,7 @@ import { ServerUpdateChecker } from '@/modules/app-updates/components/ServerUpda
 import { lazyLoadFallback } from '@/modules/core/utils/LazyLoad.tsx';
 import { ErrorBoundary } from '@/modules/core/components/ErrorBoundary.tsx';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { ReaderNew } from '@/modules/reader/screens/ReaderNew.tsx';
 
 const { Browse } = loadable(() => import('@/modules/browse/screens/Browse.tsx'), lazyLoadFallback);
 const { DownloadQueue } = loadable(() => import('@/modules/downloads/screens/DownloadQueue.tsx'), lazyLoadFallback);
@@ -163,8 +164,7 @@ const MainApp = () => {
 const ReaderApp = () => (
     <ErrorBoundary>
         <Routes>
-            <Route path="manga/:mangaId/chapter/:chapterIndex" element={null} />
-            <Route path="*" element={null} />
+            <Route path="*" element={<ReaderNew />} />
         </Routes>
     </ErrorBoundary>
 );
@@ -180,8 +180,10 @@ export const App: React.FC = () => (
             <Box sx={{ flexShrink: 0 }}>
                 <DefaultNavBar />
             </Box>
-            <MainApp />
-            <ReaderApp />
+            <Routes>
+                <Route path="*" element={<MainApp />} />
+                <Route path="manga/:mangaId/chapter/:chapterIndex/*" element={<ReaderApp />} />
+            </Routes>
         </Box>
     </AppContext>
 );

src/modules/reader/components/overlay/ReaderOverlay.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 Box from '@mui/material/Box';
+import { useState } from 'react';
+import { BaseReaderOverlayProps, MobileHeaderProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
+import { ReaderSettings } from '@/modules/reader/components/settings/ReaderSettings.tsx';
+import { ReaderPageNumber } from '@/modules/reader/components/ReaderPageNumber.tsx';
+import { StandardReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx';
+import { ReaderNavBarDesktop } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx';
+import { ReaderOverlayHeaderMobile } from '@/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx';
+import { ReaderBottomBarMobile } from '@/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx';
+import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+
+export const ReaderOverlay = ({
+    isVisible,
+    setIsVisible,
+    manga,
+    chapter,
+}: BaseReaderOverlayProps & MobileHeaderProps) => {
+    const { isDesktop, isMobile } = ReaderService.useOverlayMode();
+
+    const [areSettingsOpen, setAreSettingsOpen] = useState(false);
+
+    return (
+        <Box sx={{ position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }}>
+            {isDesktop && (
+                <>
+                    <StandardReaderProgressBar />
+                    <ReaderNavBarDesktop
+                        isVisible={isVisible}
+                        setIsVisible={setIsVisible}
+                        openSettings={() => setAreSettingsOpen(true)}
+                    />
+                </>
+            )}
+
+            {isMobile && (
+                <>
+                    <ReaderOverlayHeaderMobile manga={manga} chapter={chapter} isVisible={isVisible} />
+                    <ReaderBottomBarMobile openSettings={() => setAreSettingsOpen(true)} isVisible={isVisible} />
+                </>
+            )}
+
+            <ReaderSettings isOpen={areSettingsOpen} close={() => setAreSettingsOpen(false)} />
+
+            <ReaderPageNumber />
+        </Box>
+    );
+};

src/modules/reader/components/viewer/ReaderChapterViewer.tsx

@@ -0,0 +1,15 @@
+/*
+ * 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 Box from '@mui/material/Box';
+
+export const ReaderChapterViewer = () => {
+    const a = null;
+
+    return <Box />;
+};

src/modules/reader/components/viewer/ReaderViewer.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { useMemo } from 'react';
+import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderPagedPager } from '@/modules/reader/components/viewer/pager/ReaderPagedPager.tsx';
+import { ReaderDoublePagedPager } from '@/modules/reader/components/viewer/pager/ReaderDoublePagedPager.tsx';
+import { ReaderHorizontalPager } from '@/modules/reader/components/viewer/pager/ReaderHorizontalPager.tsx';
+import { ReaderVerticalPager } from '@/modules/reader/components/viewer/pager/ReaderVerticalPager.tsx';
+
+export const ReaderViewer = () => {
+    const { readingMode } = ReaderService.useSettings();
+
+    const Pager = useMemo(() => {
+        switch (readingMode.value) {
+            case ReadingMode.SINGLE_PAGE:
+                return ReaderPagedPager;
+            case ReadingMode.DOUBLE_PAGE:
+                return ReaderDoublePagedPager;
+            case ReadingMode.CONTINUOUS_VERTICAL:
+                return ReaderVerticalPager;
+            case ReadingMode.CONTINUOUS_HORIZONTAL:
+                return ReaderHorizontalPager;
+            default:
+                throw new Error(`Unexpected "ReadingMode" (${readingMode.value})`);
+        }
+    }, [readingMode.value]);
+
+    return <Pager />;
+};

src/modules/reader/constants/ReaderSettings.constants.tsx

@@ -249,3 +249,10 @@ export enum ReaderScrollAmount {
 export const READER_HOTKEYS = Object.values(ReaderHotkey).filter(
     (hotkey) => typeof hotkey === 'number',
 ) as ReaderHotkey[];
+
+export const READER_BACKGROUND_TO_COLOR: Record<ReaderBackgroundColor, string> = {
+    [ReaderBackgroundColor.THEME]: 'background.default',
+    [ReaderBackgroundColor.BLACK]: 'black',
+    [ReaderBackgroundColor.GRAY]: 'gray',
+    [ReaderBackgroundColor.WHITE]: 'white',
+};