diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx index 0f8f30be..dbd7eb98 100644 --- a/src/components/navbar/ReaderNavBar.tsx +++ b/src/components/navbar/ReaderNavBar.tsx @@ -17,7 +17,7 @@ import { useHistory, Link, useLocation } from 'react-router-dom'; import Slide from '@mui/material/Slide'; import Fade from '@mui/material/Fade'; import Zoom from '@mui/material/Zoom'; -import { Divider } from '@mui/material'; +import { Divider, FormControl, MenuItem, Select } from '@mui/material'; import ListItem from '@mui/material/ListItem'; import ListItemText from '@mui/material/ListItemText'; import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; @@ -71,6 +71,14 @@ const Navigation = styled('div')({ }, }); +const PageNavigation = styled('div')({ + display: 'flex', + flexWrap: 'wrap', + alignContent: 'center', + alignItems: 'center', + justifyContent: 'center', +}); + const ChapterNavigation = styled('div')({ display: 'grid', gridTemplateColumns: '1fr 1fr', @@ -90,6 +98,8 @@ const ChapterNavigation = styled('div')({ }, }); +const MenuProps = { PaperProps: { style: { maxHeight: 150 } } }; + const OpenDrawerButton = styled(IconButton)(({ theme }) => ({ position: 'fixed', top: 0 + 20, @@ -109,6 +119,7 @@ interface IProps { manga: IManga | IMangaCard; chapter: IChapter; curPage: number; + setCurPage: (page: number) => void; } export default function ReaderNavBar(props: IProps) { @@ -120,7 +131,7 @@ export default function ReaderNavBar(props: IProps) { }>(); const { prevDrawerOpen, prevSettingsCollapseOpen } = location.state ?? {}; - const { settings, setSettingValue, manga, chapter, curPage } = props; + const { settings, setSettingValue, manga, chapter, curPage, setCurPage } = props; const [drawerOpen, setDrawerOpen] = useState(settings.staticNav || prevDrawerOpen); const [updateDrawerOnRender, setUpdateDrawerOnRender] = useState(true); @@ -248,7 +259,33 @@ export default function ReaderNavBar(props: IProps) { - {`Currently on page ${curPage + 1} of ${chapter.pageCount}`} + + Currently on page + + + + {`of ${chapter.pageCount}`} + {chapter.index > 1 && ( ), }); @@ -206,9 +207,6 @@ export default function Reader() { const ReaderComponent = getReaderComponent(settings.readerType); - // last page, also probably read = true, we will load the first page. - const initialPage = chapter.lastPageRead === chapter.pageCount - 1 ? 0 : chapter.lastPageRead; - return ( @@ -216,7 +214,7 @@ export default function Reader() { pages={pages} pageCount={chapter.pageCount} setCurPage={setCurPage} - initialPage={initialPage} + initialPage={curPage} curPage={curPage} settings={settings} manga={manga}