reader ui changes

webUI/react/src/components/MangaDetails.tsx

@@ -18,9 +18,10 @@ import CategorySelect from './CategorySelect';
 const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
     root: {
         width: '100%',
-        // [theme.breakpoints.up('md')]: {
-        //     display: 'flex',
-        // },
+        [theme.breakpoints.up('md')]: {
+            position: 'fixed',
+            width: '50vw',
+        },
     },
     top: {
         padding: '10px',

webUI/react/src/components/NavBar.tsx

@@ -39,7 +39,7 @@ export default function NavBar() {
             {!override.status
         && (
             <div className={classes.root}>
-                <AppBar position="static" color={darkTheme ? 'default' : 'primary'}>
+                <AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
                     <Toolbar>
                         <IconButton
                             edge="start"

webUI/react/src/components/Page.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unused-prop-types */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* 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
@@ -5,7 +6,7 @@
 
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles } from '@material-ui/core/styles';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import LazyLoad from 'react-lazyload';
 
 const useStyles = makeStyles({
@@ -25,12 +26,31 @@ const useStyles = makeStyles({
 interface IProps {
     src: string
     index: number
+    setCurPage: React.Dispatch<React.SetStateAction<number>>
 }
 
 function LazyImage(props: IProps) {
     const classes = useStyles();
-    const { src, index } = props;
+    const { src, index, setCurPage } = props;
     const [imageSrc, setImagsrc] = useState<string>('');
+    const ref = useRef<HTMLImageElement>(null);
+
+    const handleScroll = () => {
+        if (ref.current) {
+            const rect = ref.current.getBoundingClientRect();
+            if (rect.y < 0 && rect.y + rect.height > 0) {
+                setCurPage(index);
+            }
+        }
+    };
+
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll);
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [handleScroll]);
 
     useEffect(() => {
         const img = new Image();
@@ -48,12 +68,17 @@ function LazyImage(props: IProps) {
     }
 
     return (
-        <img src={imageSrc} alt={`Page #${index}`} style={{ maxWidth: '100%' }} />
+        <img
+            ref={ref}
+            src={imageSrc}
+            alt={`Page #${index}`}
+            style={{ maxWidth: '100%' }}
+        />
     );
 }
 
 export default function Page(props: IProps) {
-    const { src, index } = props;
+    const { src, index, setCurPage } = props;
     const classes = useStyles();
 
     return (
@@ -67,7 +92,7 @@ export default function Page(props: IProps) {
                     </div>
                 )}
             >
-                <LazyImage src={src} index={index} />
+                <LazyImage src={src} index={index} setCurPage={setCurPage} />
             </LazyLoad>
         </div>
     );

webUI/react/src/components/ReaderNavBar.tsx

@@ -14,10 +14,11 @@ import { useHistory } from 'react-router-dom';
 import Slide from '@material-ui/core/Slide';
 import Fade from '@material-ui/core/Fade';
 import Zoom from '@material-ui/core/Zoom';
+import { Switch } from '@material-ui/core';
 import NavBarContext from '../context/NavbarContext';
 import DarkTheme from '../context/DarkTheme';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = (settings: IReaderSettings) => makeStyles((theme: Theme) => ({
     // main container and root div need to change classes...
     AppMainContainer: {
         display: 'none',
@@ -27,7 +28,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
 
     root: {
-        position: 'fixed',
+        position: settings.staticNav ? 'sticky' : 'fixed',
         top: 0,
         left: 0,
         minWidth: '300px',
@@ -81,9 +82,15 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 export interface IReaderSettings{
-
+    staticNav: boolean
+    showPageNumber: boolean
 }
 
+export const defaultReaderSettings = () => ({
+    staticNav: false,
+    showPageNumber: true,
+} as IReaderSettings);
+
 interface IProps {
     settings: IReaderSettings
     setSettings: React.Dispatch<React.SetStateAction<IReaderSettings>>
@@ -96,14 +103,16 @@ export default function ReaderNavBar(props: IProps) {
 
     const history = useHistory();
 
-    const [drawerOpen, setDrawerOpen] = useState(false);
+    const { settings, setSettings, manga } = props;
+
+    const [drawerOpen, setDrawerOpen] = useState(false || settings.staticNav);
     const [hideOpenButton, setHideOpenButton] = useState(false);
     const [prevScrollPos, setPrevScrollPos] = useState(0);
 
     const theme = useTheme();
-    const classes = useStyles();
+    const classes = useStyles(settings)();
 
-    const { settings, setSettings, manga } = props;
+    const setSettingValue = (key: string, value: any) => setSettings({ ...settings, [key]: value });
 
     const handleScroll = () => {
         const currentScrollPos = window.pageYOffset;
@@ -120,7 +129,7 @@ export default function ReaderNavBar(props: IProps) {
         return () => {
             window.removeEventListener('scroll', handleScroll);
         };
-    }, [handleScroll]);
+    }, [handleScroll]);// handleScroll changes on every render
 
     useEffect(() => {
         window.addEventListener('scroll', handleScroll);
@@ -135,7 +144,7 @@ export default function ReaderNavBar(props: IProps) {
             rootEl.classList.remove(classes.AppRootElment);
             mainContainer.classList.remove(classes.AppMainContainer);
         };
-    }, []);
+    }, [handleScroll]);// handleScroll changes on every render
 
     return (
         <>
@@ -154,16 +163,29 @@ export default function ReaderNavBar(props: IProps) {
                         <Typography variant="h1">
                             {title}
                         </Typography>
-                        <IconButton
-                            edge="start"
-                            color="inherit"
-                            aria-label="menu"
-                            disableRipple
-                            onClick={() => setDrawerOpen(false)}
-                        >
-                            <KeyboardArrowLeftIcon />
-                        </IconButton>
+                        {!settings.staticNav
+                        && (
+                            <IconButton
+                                edge="start"
+                                color="inherit"
+                                aria-label="menu"
+                                disableRipple
+                                onClick={() => setDrawerOpen(false)}
+                            >
+                                <KeyboardArrowLeftIcon />
+                            </IconButton>
+                        ) }
                     </header>
+                    <h3>Static Navigation</h3>
+                    <Switch
+                        checked={settings.staticNav}
+                        onChange={(e) => setSettingValue('staticNav', e.target.checked)}
+                    />
+                    <h3>Show page number</h3>
+                    <Switch
+                        checked={settings.showPageNumber}
+                        onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
+                    />
                 </div>
             </Slide>
             <Zoom in={!drawerOpen}>