From a62ee8f8c336d0a1d6da93ace1cbf716dc6dbdfd Mon Sep 17 00:00:00 2001 From: Aria Moradi Date: Sat, 15 May 2021 23:22:37 +0430 Subject: [PATCH] handle reader types --- webUI/react/src/components/ReaderNavBar.tsx | 193 +++++++++--------- webUI/react/src/components/reader/Page.tsx | 2 +- .../{SinglePageReader.tsx => PagedReader.tsx} | 9 +- .../src/components/reader/VerticalReader.tsx | 8 +- webUI/react/src/screens/Reader.tsx | 42 ++-- webUI/react/src/typings.d.ts | 18 +- 6 files changed, 149 insertions(+), 123 deletions(-) rename webUI/react/src/components/reader/{SinglePageReader.tsx => PagedReader.tsx} (89%) diff --git a/webUI/react/src/components/ReaderNavBar.tsx b/webUI/react/src/components/ReaderNavBar.tsx index cf6bc39..ae0346a 100644 --- a/webUI/react/src/components/ReaderNavBar.tsx +++ b/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,32 +202,31 @@ export default function ReaderNavBar(props: IProps) { return ( <> - (drawerVisible && setDrawerOpen(false))}> - setDrawerVisible(true)} - onExited={() => setDrawerVisible(false)} - > -
-
- history.push(`/manga/${manga.id}`)} - > - - - - {title} - - {!settings.staticNav + setDrawerVisible(true)} + onExited={() => setDrawerVisible(false)} + > +
+
+ history.push(`/manga/${manga.id}`)} + > + + + + {title} + + {!settings.staticNav && ( ) } -
- - - - setSettingsCollapseOpen(!settingsCollapseOpen)} +
+ + + + setSettingsCollapseOpen(!settingsCollapseOpen)} + > + {settingsCollapseOpen && } + {!settingsCollapseOpen && } + + + + + + + + + setSettingValue('staticNav', e.target.checked)} + /> + + + + + + setSettingValue('showPageNumber', e.target.checked)} + /> + + + + + + + + +
+
+ + Currently on page + {' '} + {curPage + 1} + {' '} + of + {' '} + {chapter.pageCount} + +
+ {chapter.index > 1 && ( )} - {chapter.index < chapter.chapterCount + {chapter.index < chapter.chapterCount && ( )} -
- - + + makeStyles({ }, image: { display: 'block', - marginBottom: settings.continuesPageGap ? '15px' : 0, + marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0, minWidth: '50vw', width: '100%', maxWidth: '100%', diff --git a/webUI/react/src/components/reader/SinglePageReader.tsx b/webUI/react/src/components/reader/PagedReader.tsx similarity index 89% rename from webUI/react/src/components/reader/SinglePageReader.tsx rename to webUI/react/src/components/reader/PagedReader.tsx index e7a25df..3b8f039 100644 --- a/webUI/react/src/components/reader/SinglePageReader.tsx +++ b/webUI/react/src/components/reader/PagedReader.tsx @@ -14,14 +14,7 @@ const useStyles = makeStyles({ }, }); -interface IProps { - pages: Array - setCurPage: React.Dispatch> - curPage: number - settings: IReaderSettings -} - -export default function SinglePageReader(props: IProps) { +export default function PagedReader(props: IReaderProps) { const { pages, settings, setCurPage, curPage, } = props; diff --git a/webUI/react/src/components/reader/VerticalReader.tsx b/webUI/react/src/components/reader/VerticalReader.tsx index e7f051a..f63bc06 100644 --- a/webUI/react/src/components/reader/VerticalReader.tsx +++ b/webUI/react/src/components/reader/VerticalReader.tsx @@ -13,13 +13,7 @@ const useStyles = makeStyles({ }, }); -interface IProps { - pages: Array - setCurPage: React.Dispatch> - settings: IReaderSettings -} - -export default function VerticalReader(props: IProps) { +export default function VerticalReader(props: IReaderProps) { const { pages, settings, setCurPage } = props; const classes = useStyles(); diff --git a/webUI/react/src/screens/Reader.tsx b/webUI/react/src/screens/Reader.tsx index 7dd911b..57d22b3 100644 --- a/webUI/react/src/screens/Reader.tsx +++ b/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 (
- {/* */} - {/* */} - + pageCount: number + setCurPage: React.Dispatch> + curPage: number + settings: IReaderSettings +}