restructure the reader

webUI/react/src/components/ReaderNavBar.tsx

@@ -137,12 +137,6 @@ const useStyles = (settings: IReaderSettings) => makeStyles((theme: Theme) => ({
     },
 }));
 
-export interface IReaderSettings{
-    staticNav: boolean
-    showPageNumber: boolean
-    continuesPageGap: boolean
-}
-
 export const defaultReaderSettings = () => ({
     staticNav: false,
     showPageNumber: true,

webUI/react/src/components/TemporaryDrawer.tsx

@@ -24,7 +24,7 @@ const useStyles = makeStyles({
 interface IProps {
     drawerOpen: boolean
 
-    setDrawerOpen(state: boolean): void
+    setDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 export default function TemporaryDrawer({ drawerOpen, setDrawerOpen }: IProps) {

webUI/react/src/components/reader/Page.tsx

@@ -11,17 +11,17 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useEffect, useRef, useState } from 'react';
 import LazyLoad from 'react-lazyload';
-import { IReaderSettings } from './ReaderNavBar';
 
 const useStyles = (settings: IReaderSettings) => makeStyles({
     loading: {
         margin: '100px auto',
         height: '100vh',
+        width: '100vw',
     },
     loadingImage: {
-        padding: settings.staticNav ? 'calc(50vh - 40px) calc(50vw - 340px)' : 'calc(50vh - 40px) calc(50vw - 40px)',
         height: '100vh',
-        width: '200px',
+        width: '70vw',
+        padding: '50px calc(50% - 20px)',
         backgroundColor: '#525252',
         marginBottom: 10,
     },
@@ -73,7 +73,7 @@ function LazyImage(props: IProps) {
 
     if (imageSrc.length === 0) {
         return (
-            <div className={classes.loadingImage}>
+            <div className={`${classes.image} ${classes.loadingImage}`}>
                 <CircularProgress thickness={5} />
             </div>
         );
@@ -101,7 +101,7 @@ export default function Page(props: IProps) {
             <LazyLoad
                 offset={window.innerHeight}
                 placeholder={(
-                    <div className={classes.loading}>
+                    <div className={classes.loadingImage}>
                         <CircularProgress thickness={5} />
                     </div>
                 )}

webUI/react/src/components/reader/PageNumber.tsx

@@ -0,0 +1,32 @@
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    pageNumber: {
+        display: settings.showPageNumber ? 'block' : 'none',
+        position: 'fixed',
+        bottom: '50px',
+        right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
+        width: '50px',
+        textAlign: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        borderRadius: '10px',
+    },
+});
+
+interface IProps {
+    settings: IReaderSettings
+    curPage: number
+    pageCount: number
+}
+
+export default function PageNumber(props: IProps) {
+    const { settings, curPage, pageCount } = props;
+    const classes = useStyles(settings)();
+
+    return (
+        <div className={classes.pageNumber}>
+            {`${curPage + 1} / ${pageCount}`}
+        </div>
+    );
+}

webUI/react/src/components/reader/VerticalReader.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+import Page from './Page';
+
+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+    },
+});
+
+interface IProps {
+    pages: Array<IReaderPage>
+    setCurPage: React.Dispatch<React.SetStateAction<number>>
+    settings: IReaderSettings
+}
+
+export default function VerticalReader(props: IProps) {
+    const { pages, settings, setCurPage } = props;
+
+    const classes = useStyles();
+
+    return (
+        <div className={classes.reader}>
+            {
+                pages.map((page) => (
+                    <Page
+                        key={page.index}
+                        index={page.index}
+                        src={page.src}
+                        setCurPage={setCurPage}
+                        settings={settings}
+                    />
+                ))
+            }
+        </div>
+    );
+}

webUI/react/src/screens/Reader.tsx

@@ -10,34 +10,22 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useContext, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import Page from '../components/Page';
+import Page from '../components/reader/Page';
-import ReaderNavBar, { defaultReaderSettings, IReaderSettings } from '../components/ReaderNavBar';
+import PageNumber from '../components/reader/PageNumber';
+import VerticalReader from '../components/reader/VerticalReader';
+import ReaderNavBar, { defaultReaderSettings } from '../components/ReaderNavBar';
 import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
 import useLocalStorage from '../util/useLocalStorage';
 
 const useStyles = (settings: IReaderSettings) => makeStyles({
-    reader: {
+    root: {
-        display: 'flex',
+        width: settings.staticNav ? 'calc(100vw - 300px)' : '100vw',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        margin: '0 auto',
     },
 
     loading: {
         margin: '50px auto',
     },
-
-    pageNumber: {
-        display: settings.showPageNumber ? 'block' : 'none',
-        position: 'fixed',
-        bottom: '50px',
-        right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
-        width: '50px',
-        textAlign: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-        borderRadius: '10px',
-    },
 });
 
 const range = (n:number) => Array.from({ length: n }, (value, key) => key);
@@ -102,20 +90,24 @@ export default function Reader() {
             </div>
         );
     }
+
+    const pages = range(chapter.pageCount).map((index) => ({
+        index,
+        src: `${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterIndex}/page/${index}`,
+    }));
+
     return (
-        <div className={classes.reader}>
+        <div className={classes.root}>
-            <div className={classes.pageNumber}>
+            <PageNumber
-                {`${curPage + 1} / ${chapter.pageCount}`}
+                settings={settings}
-            </div>
+                curPage={curPage}
-            {range(chapter.pageCount).map((index) => (
+                pageCount={chapter.pageCount}
-                <Page
+            />
-                    key={index}
+            <VerticalReader
-                    index={index}
+                pages={pages}
-                    src={`${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterIndex}/page/${index}`}
+                setCurPage={setCurPage}
-                    setCurPage={setCurPage}
+                settings={settings}
-                    settings={settings}
+            />
-                />
-            ))}
         </div>
     );
 }

webUI/react/src/typings.d.ts

@@ -87,3 +87,14 @@ interface INavbarOverride {
     status: boolean
     value: any
 }
+
+interface IReaderSettings{
+    staticNav: boolean
+    showPageNumber: boolean
+    continuesPageGap: boolean
+}
+
+interface IReaderPage {
+    index: number
+    src: string
+}