handle reader types

webUI/react/src/components/ReaderNavBar.tsx

@@ -23,6 +23,8 @@ import { Switch } from '@material-ui/core';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import Collapse from '@material-ui/core/Collapse';
@@ -141,6 +143,7 @@ export const defaultReaderSettings = () => ({
     staticNav: false,
     showPageNumber: true,
     continuesPageGap: false,
+    readerType: 'ContinuesVertical',
 } as IReaderSettings);
 
 interface IProps {
@@ -165,7 +168,7 @@ export default function ReaderNavBar(props: IProps) {
     const [drawerVisible, setDrawerVisible] = useState(false || settings.staticNav);
     const [hideOpenButton, setHideOpenButton] = useState(false);
     const [prevScrollPos, setPrevScrollPos] = useState(0);
-    const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(false);
+    const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(true);
 
     const theme = useTheme();
     const classes = useStyles(settings)();
@@ -199,7 +202,6 @@ export default function ReaderNavBar(props: IProps) {
 
     return (
         <>
-            <ClickAwayListener onClickAway={() => (drawerVisible && setDrawerOpen(false))}>
             <Slide
                 direction="right"
                 in={drawerOpen}
@@ -276,14 +278,18 @@ export default function ReaderNavBar(props: IProps) {
                                 </ListItemSecondaryAction>
                             </ListItem>
                             <ListItem>
-                                    <ListItemText primary="Continues Page gap" />
+                                <ListItemText primary="Reader Type" />
-                                    <ListItemSecondaryAction>
+                                <Select
-                                        <Switch
+                                    value={settings.readerType}
-                                            edge="end"
+                                    onChange={(e) => setSettingValue('readerType', e.target.value)}
-                                            checked={settings.continuesPageGap}
+                                >
-                                            onChange={(e) => setSettingValue('continuesPageGap', e.target.checked)}
+                                    <MenuItem value="SingleLTR">Left to right</MenuItem>
-                                        />
+                                    <MenuItem value="SingleRTL">Right to left(WIP)</MenuItem>
-                                    </ListItemSecondaryAction>
+                                    <MenuItem value="SingleVertical">Vertical(WIP)</MenuItem>
+                                    <MenuItem value="Webtoon">Webtoon</MenuItem>
+                                    <MenuItem value="ContinuesVertical">Continues Vertical</MenuItem>
+                                    <MenuItem value="ContinuesHorizontal">Horizontal(WIP)</MenuItem>
+                                </Select>
                             </ListItem>
                         </List>
                     </Collapse>
@@ -335,7 +341,6 @@ export default function ReaderNavBar(props: IProps) {
                     </div>
                 </div>
             </Slide>
-            </ClickAwayListener>
             <Zoom in={!drawerOpen}>
                 <Fade in={!hideOpenButton}>
                     <IconButton

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

@@ -27,7 +27,7 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
     },
     image: {
         display: 'block',
-        marginBottom: settings.continuesPageGap ? '15px' : 0,
+        marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
         minWidth: '50vw',
         width: '100%',
         maxWidth: '100%',

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

@@ -14,14 +14,7 @@ const useStyles = makeStyles({
     },
 });
 
-interface IProps {
+export default function PagedReader(props: IReaderProps) {
-    pages: Array<IReaderPage>
-    setCurPage: React.Dispatch<React.SetStateAction<number>>
-    curPage: number
-    settings: IReaderSettings
-}
-
-export default function SinglePageReader(props: IProps) {
     const {
         pages, settings, setCurPage, curPage,
     } = props;

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

@@ -13,13 +13,7 @@ const useStyles = makeStyles({
     },
 });
 
-interface IProps {
+export default function VerticalReader(props: IReaderProps) {
-    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();

webUI/react/src/screens/Reader.tsx

@@ -13,7 +13,7 @@ import { useParams } from 'react-router-dom';
 import HorizontalReader from '../components/reader/HorizontalReader';
 import Page from '../components/reader/Page';
 import PageNumber from '../components/reader/PageNumber';
-import SinglePageReader from '../components/reader/SinglePageReader';
+import PagedReader from '../components/reader/PagedReader';
 import VerticalReader from '../components/reader/VerticalReader';
 import ReaderNavBar, { defaultReaderSettings } from '../components/ReaderNavBar';
 import NavbarContext from '../context/NavbarContext';
@@ -30,6 +30,31 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
     },
 });
 
+const getReaderComponent = (readerType: ReaderType) => {
+    switch (readerType) {
+        case 'ContinuesVertical':
+            return VerticalReader;
+            break;
+        case 'Webtoon':
+            return VerticalReader;
+            break;
+        case 'SingleVertical':
+            return PagedReader;
+            break;
+        case 'SingleRTL':
+            return PagedReader;
+            break;
+        case 'SingleLTR':
+            return PagedReader;
+            break;
+        case 'ContinuesHorizontal':
+            return HorizontalReader;
+        default:
+            return VerticalReader;
+            break;
+    }
+};
+
 const range = (n:number) => Array.from({ length: n }, (value, key) => key);
 const initialChapter = () => ({ pageCount: -1, index: -1, chapterCount: 0 });
 
@@ -98,6 +123,8 @@ export default function Reader() {
         src: `${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterIndex}/page/${index}`,
     }));
 
+    const ReaderComponent = getReaderComponent(settings.readerType);
+
     return (
         <div className={classes.root}>
             <PageNumber
@@ -105,18 +132,9 @@ export default function Reader() {
                 curPage={curPage}
                 pageCount={chapter.pageCount}
             />
-            {/* <VerticalReader
+            <ReaderComponent
-                pages={pages}
-                setCurPage={setCurPage}
-                settings={settings}
-            /> */}
-            {/* <HorizontalReader
-                pages={pages}
-                setCurPage={setCurPage}
-                settings={settings}
-            /> */}
-            <SinglePageReader
                 pages={pages}
+                pageCount={chapter.pageCount}
                 setCurPage={setCurPage}
                 curPage={curPage}
                 settings={settings}

webUI/react/src/typings.d.ts

@@ -88,13 +88,29 @@ interface INavbarOverride {
     value: any
 }
 
+type ReaderType =
+'ContinuesVertical'|
+'Webtoon' |
+'SingleVertical' |
+'SingleRTL' |
+'SingleLTR' |
+'ContinuesHorizontal';
+
 interface IReaderSettings{
     staticNav: boolean
     showPageNumber: boolean
-    continuesPageGap: boolean
+    readerType: ReaderType
 }
 
 interface IReaderPage {
     index: number
     src: string
 }
+
+interface IReaderProps {
+    pages: Array<IReaderPage>
+    pageCount: number
+    setCurPage: React.Dispatch<React.SetStateAction<number>>
+    curPage: number
+    settings: IReaderSettings
+}