proof of concept readers

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

@@ -0,0 +1,44 @@
+/* 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: 'row',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+        height: '100vh',
+        overflowX: 'scroll',
+    },
+});
+
+interface IProps {
+    pages: Array<IReaderPage>
+    setCurPage: React.Dispatch<React.SetStateAction<number>>
+    settings: IReaderSettings
+}
+
+export default function HorizontalReader(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/components/reader/Page.tsx

@@ -28,6 +28,9 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
     image: {
         display: 'block',
         marginBottom: settings.continuesPageGap ? '15px' : 0,
+        minWidth: '50vw',
+        width: '100%',
+        maxWidth: '100%',
     },
 });
 
@@ -85,7 +88,6 @@ function LazyImage(props: IProps) {
             ref={ref}
             src={imageSrc}
             alt={`Page #${index}`}
-            style={{ width: '100%', maxWidth: '95vw' }}
         />
     );
 }

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

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { makeStyles } from '@material-ui/core/styles';
+import React, { useEffect } from 'react';
+import Page from './Page';
+
+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+        height: '100vh',
+    },
+});
+
+interface IProps {
+    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;
+
+    const classes = useStyles();
+
+    function nextPage() {
+        if (curPage < pages.length - 1) { setCurPage(curPage + 1); }
+    }
+
+    function prevPage() {
+        if (curPage > 0) { setCurPage(curPage - 1); }
+    }
+
+    function keyboardControl(e:KeyboardEvent) {
+        switch (e.key) {
+            case 'ArrowRight':
+                nextPage();
+                break;
+            case 'ArrowLeft':
+                prevPage();
+                break;
+            default:
+                break;
+        }
+    }
+
+    function clickControl(e:MouseEvent) {
+        if (e.clientX > window.innerWidth / 2) {
+            nextPage();
+        } else {
+            prevPage();
+        }
+    }
+
+    useEffect(() => {
+        document.addEventListener('keyup', keyboardControl, false);
+        document.addEventListener('click', clickControl);
+
+        return () => {
+            document.removeEventListener('keyup', keyboardControl);
+            document.removeEventListener('click', clickControl);
+        };
+    }, [curPage]);
+
+    return (
+        <div className={classes.reader}>
+            <Page
+                key={curPage}
+                index={curPage}
+                src={pages[curPage].src}
+                setCurPage={setCurPage}
+                settings={settings}
+            />
+        </div>
+    );
+}

webUI/react/src/screens/Reader.tsx

@@ -10,8 +10,10 @@ 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 HorizontalReader from '../components/reader/HorizontalReader';
 import Page from '../components/reader/Page';
 import PageNumber from '../components/reader/PageNumber';
+import SinglePageReader from '../components/reader/SinglePageReader';
 import VerticalReader from '../components/reader/VerticalReader';
 import ReaderNavBar, { defaultReaderSettings } from '../components/ReaderNavBar';
 import NavbarContext from '../context/NavbarContext';
@@ -103,10 +105,21 @@ export default function Reader() {
                 curPage={curPage}
                 pageCount={chapter.pageCount}
             />
-            <VerticalReader
+            {/* <VerticalReader
                 pages={pages}
                 setCurPage={setCurPage}
                 settings={settings}
+            /> */}
+            {/* <HorizontalReader
+                pages={pages}
+                setCurPage={setCurPage}
+                settings={settings}
+            /> */}
+            <SinglePageReader
+                pages={pages}
+                setCurPage={setCurPage}
+                curPage={curPage}
+                settings={settings}
             />
         </div>
     );