reader ui changes

webUI/react/src/App.tsx

@@ -66,7 +66,12 @@ export default function App() {
                 <NavbarContext.Provider value={navBarContext}>
                     <CssBaseline />
                     <NavBar />
-                    <Container id="appMainContainer" maxWidth={false} disableGutters>
+                    <Container
+                        id="appMainContainer"
+                        maxWidth={false}
+                        disableGutters
+                        style={{ paddingTop: '64px' }}
+                    >
                         <Switch>
                             <Route path="/sources/:sourceId/search/">
                                 <Search />

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')]: {
+        [theme.breakpoints.up('md')]: {
-        //     display: 'flex',
+            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,6 +163,8 @@ export default function ReaderNavBar(props: IProps) {
                         <Typography variant="h1">
                             {title}
                         </Typography>
+                        {!settings.staticNav
+                        && (
                             <IconButton
                                 edge="start"
                                 color="inherit"
@@ -163,7 +174,18 @@ export default function ReaderNavBar(props: IProps) {
                             >
                                 <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}>

webUI/react/src/screens/Manga.tsx

@@ -19,6 +19,15 @@ const useStyles = makeStyles((theme: Theme) => ({
         },
     },
 
+    chapters: {
+        listStyle: 'none',
+        padding: 0,
+        [theme.breakpoints.up('md')]: {
+            width: '50%',
+            marginLeft: '50%',
+        },
+    },
+
     loading: {
         margin: '10px 0',
         display: 'flex',
@@ -53,7 +62,7 @@ export default function Manga() {
     }, []);
 
     const chapterCards = (
-        <ol style={{ listStyle: 'none', padding: 0, width: '100%' }}>
+        <ol className={classes.chapters}>
             {chapters.length === 0
             && (
                 <div className={classes.loading}>

webUI/react/src/screens/Reader.tsx

@@ -8,12 +8,12 @@ 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 ReaderNavBar, { IReaderSettings } from '../components/ReaderNavBar';
+import ReaderNavBar, { defaultReaderSettings, IReaderSettings } from '../components/ReaderNavBar';
 import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
 import useLocalStorage from '../util/useLocalStorage';
 
-const useStyles = makeStyles({
+const useStyles = (settings: IReaderSettings) => makeStyles({
     reader: {
         display: 'flex',
         flexDirection: 'column',
@@ -24,20 +24,32 @@ const useStyles = makeStyles({
     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);
 
 export default function Reader() {
-    const classes = useStyles();
+    const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings);
 
-    const [settings, setSettings] = useState<IReaderSettings>({});
+    const classes = useStyles(settings)();
 
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
 
     const { chapterId, mangaId } = useParams<{chapterId: string, mangaId: string}>();
     const [manga, setManga] = useState<IMangaCard | IManga>({ id: +mangaId, title: '', thumbnailUrl: '' });
     const [pageCount, setPageCount] = useState<number>(-1);
+    const [curPage, setCurPage] = useState<number>(0);
 
     const { setOverride, setTitle } = useContext(NavbarContext);
     useEffect(() => {
@@ -54,7 +66,7 @@ export default function Reader() {
 
         // clean up for when we leave the reader
         return () => setOverride({ status: false, value: <div /> });
-    }, [manga]);
+    }, [manga, settings]);
 
     useEffect(() => {
         setTitle('Reader');
@@ -83,8 +95,16 @@ export default function Reader() {
     }
     return (
         <div className={classes.reader}>
+            <div className={classes.pageNumber}>
+                {`${curPage + 1} / ${pageCount}`}
+            </div>
             {range(pageCount).map((index) => (
-                <Page key={index} index={index} src={`${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterId}/page/${index}`} />
+                <Page
+                    key={index}
+                    index={index}
+                    src={`${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterId}/page/${index}`}
+                    setCurPage={setCurPage}
+                />
             ))}
         </div>
     );

webUI/react/src/util/useLocalStorage.tsx

@@ -2,19 +2,20 @@
  * 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 { useState, Dispatch, SetStateAction } from 'react';
+import React, { useState, Dispatch, SetStateAction } from 'react';
 import storage from './localStorage';
 
 // eslint-disable-next-line max-len
-export default function useLocalStorage<T>(key: string, defaultValue: T) : [T, Dispatch<SetStateAction<T>>] {
+export default function useLocalStorage<T>(key: string, defaultValue: T | (() => T)) : [T, Dispatch<SetStateAction<T>>] {
-    const [storedValue, setStoredValue] = useState<T>(storage.getItem(key, defaultValue));
+    const initialState = defaultValue instanceof Function ? defaultValue() : defaultValue;
+    const [storedValue, setStoredValue] = useState<T>(storage.getItem(key, initialState));
 
-    const setValue = (value: T | ((prevState: T) => T)) => {
+    const setValue = ((value: T | ((prevState: T) => T)) => {
         // Allow value to be a function so we have same API as useState
         const valueToStore = value instanceof Function ? value(storedValue) : value;
         setStoredValue(valueToStore);
         storage.setItem(key, valueToStore);
-    };
+    }) as React.Dispatch<React.SetStateAction<T>>;
 
     return [storedValue, setValue];
 }