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);
@@ -164,8 +165,8 @@ const MainApp = () => {
 const ReaderApp = () => (
     <ErrorBoundary>
         <Routes>
-            <Route path="manga/:mangaId/chapter/:chapterIndex" element={<Reader />} />
-            <Route path="*" element={null} />
+            <Route path="/old" element={<Reader />} />
+            <Route path="*" element={<ReaderNew />} />
         </Routes>
     </ErrorBoundary>
 );
@@ -181,8 +182,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-deprecated/components/ReaderNavBar.tsx

@@ -187,17 +187,7 @@ export function ReaderNavBar(props: IProps) {
     useEffect(() => {
         window.addEventListener('scroll', handleScroll);
 
-        const rootEl: HTMLDivElement = document.querySelector('#root')!;
-        const mainContainer: HTMLDivElement = document.querySelector('#appMainContainer')!;
-
-        // main container and root div need to change styles...
-        rootEl.style.display = 'flex';
-        rootEl.style.flexDirection = 'column';
-        mainContainer.style.display = 'none';
-
         return () => {
-            rootEl.style.display = 'block';
-            mainContainer.style.display = 'block';
             window.removeEventListener('scroll', handleScroll);
         };
     }, [handleScroll]); // handleScroll changes on every render

src/modules/reader/components/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/ReaderViewer.tsx

@@ -0,0 +1,13 @@
+/*
+ * 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/.
+ */
+
+export const ReaderViewer = () => {
+    const a = null;
+
+    return null;
+};

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