chapter prev/next UI+Backend
This commit is contained in:
Aria Moradi
@@ -88,7 +88,7 @@ export default function App() {
|
||||
<Route path="/sources">
|
||||
<Sources />
|
||||
</Route>
|
||||
<Route path="/manga/:mangaId/chapter/:chapterId">
|
||||
<Route path="/manga/:mangaId/chapter/:chapterNum">
|
||||
<></>
|
||||
</Route>
|
||||
<Route path="/manga/:id">
|
||||
@@ -115,7 +115,7 @@ export default function App() {
|
||||
</Switch>
|
||||
</Container>
|
||||
<Switch>
|
||||
<Route path="/manga/:mangaId/chapter/:chapterId">
|
||||
<Route path="/manga/:mangaId/chapter/:chapterIndex">
|
||||
<Reader />
|
||||
</Route>
|
||||
</Switch>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* 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
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
||||
@@ -8,7 +9,7 @@ import Card from '@material-ui/core/Card';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
@@ -65,9 +66,19 @@ export default function ChapterCard(props: IProps) {
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { history.push(`/manga/${chapter.mangaId}/chapter/${chapter.id}`); }}>open</Button>
|
||||
</div>
|
||||
<Link
|
||||
to={`/manga/${chapter.mangaId}/chapter/${chapter.chapterIndex}`}
|
||||
style={{ textDecoration: 'none' }}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
style={{ marginLeft: 20 }}
|
||||
>
|
||||
open
|
||||
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
</li>
|
||||
|
||||
@@ -8,16 +8,17 @@ import CircularProgress from '@material-ui/core/CircularProgress';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import LazyLoad from 'react-lazyload';
|
||||
import { IReaderSettings } from './ReaderNavBar';
|
||||
|
||||
const useStyles = makeStyles({
|
||||
const useStyles = (settings: IReaderSettings) => makeStyles({
|
||||
loading: {
|
||||
margin: '100px auto',
|
||||
height: '100vh',
|
||||
},
|
||||
loadingImage: {
|
||||
padding: 'calc(50vh - 40px) calc(50vw - 40px)',
|
||||
padding: settings.staticNav ? 'calc(50vh - 40px) calc(50vw - 340px)' : 'calc(50vh - 40px) calc(50vw - 40px)',
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
width: '200px',
|
||||
backgroundColor: '#525252',
|
||||
marginBottom: 10,
|
||||
},
|
||||
@@ -27,11 +28,15 @@ interface IProps {
|
||||
src: string
|
||||
index: number
|
||||
setCurPage: React.Dispatch<React.SetStateAction<number>>
|
||||
settings: IReaderSettings
|
||||
}
|
||||
|
||||
function LazyImage(props: IProps) {
|
||||
const classes = useStyles();
|
||||
const { src, index, setCurPage } = props;
|
||||
const {
|
||||
src, index, setCurPage, settings,
|
||||
} = props;
|
||||
|
||||
const classes = useStyles(settings)();
|
||||
const [imageSrc, setImagsrc] = useState<string>('');
|
||||
const ref = useRef<HTMLImageElement>(null);
|
||||
|
||||
@@ -57,7 +62,7 @@ function LazyImage(props: IProps) {
|
||||
img.src = src;
|
||||
|
||||
img.onload = () => setImagsrc(src);
|
||||
}, []);
|
||||
}, [src]);
|
||||
|
||||
if (imageSrc.length === 0) {
|
||||
return (
|
||||
@@ -72,27 +77,33 @@ function LazyImage(props: IProps) {
|
||||
ref={ref}
|
||||
src={imageSrc}
|
||||
alt={`Page #${index}`}
|
||||
style={{ maxWidth: '100%' }}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Page(props: IProps) {
|
||||
const { src, index, setCurPage } = props;
|
||||
const classes = useStyles();
|
||||
const {
|
||||
src, index, setCurPage, settings,
|
||||
} = props;
|
||||
const classes = useStyles(settings)();
|
||||
|
||||
return (
|
||||
<div style={{ margin: '0 auto' }}>
|
||||
<LazyLoad
|
||||
offset={window.innerHeight}
|
||||
once
|
||||
placeholder={(
|
||||
<div className={classes.loading}>
|
||||
<CircularProgress thickness={5} />
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<LazyImage src={src} index={index} setCurPage={setCurPage} />
|
||||
<LazyImage
|
||||
src={src}
|
||||
index={index}
|
||||
setCurPage={setCurPage}
|
||||
settings={settings}
|
||||
/>
|
||||
</LazyLoad>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,16 +7,25 @@ import IconButton from '@material-ui/core/IconButton';
|
||||
import CloseIcon from '@material-ui/icons/Close';
|
||||
import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
|
||||
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
|
||||
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
|
||||
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
|
||||
import { makeStyles, Theme, useTheme } from '@material-ui/core/styles';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { useHistory, Link } 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 List from '@material-ui/core/List';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
|
||||
import Collapse from '@material-ui/core/Collapse';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import DarkTheme from '../context/DarkTheme';
|
||||
import NavBarContext from '../context/NavbarContext';
|
||||
|
||||
const useStyles = (settings: IReaderSettings) => makeStyles((theme: Theme) => ({
|
||||
// main container and root div need to change classes...
|
||||
@@ -64,6 +73,49 @@ const useStyles = (settings: IReaderSettings) => makeStyles((theme: Theme) => ({
|
||||
flexGrow: 1,
|
||||
},
|
||||
},
|
||||
'& hr': {
|
||||
margin: '0 16px',
|
||||
height: '1px',
|
||||
border: '0',
|
||||
backgroundColor: 'rgb(38, 41, 43)',
|
||||
},
|
||||
},
|
||||
|
||||
navigation: {
|
||||
margin: '0 16px',
|
||||
|
||||
'& > span:nth-child(1)': {
|
||||
textAlign: 'center',
|
||||
display: 'block',
|
||||
marginTop: '16px',
|
||||
},
|
||||
|
||||
'& $navigationChapters': {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
gridTemplateAreas: '"prev next"',
|
||||
gridColumnGap: '5px',
|
||||
margin: '10px 0',
|
||||
|
||||
'& a': {
|
||||
flexGrow: 1,
|
||||
textDecoration: 'none',
|
||||
|
||||
'& button': {
|
||||
width: '100%',
|
||||
padding: '5px 8px',
|
||||
textTransform: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
navigationChapters: {}, // dummy rule
|
||||
|
||||
settingsCollapsseHeader: {
|
||||
'& span': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
|
||||
openDrawerButton: {
|
||||
@@ -94,7 +146,9 @@ export const defaultReaderSettings = () => ({
|
||||
interface IProps {
|
||||
settings: IReaderSettings
|
||||
setSettings: React.Dispatch<React.SetStateAction<IReaderSettings>>
|
||||
manga: IMangaCard | IManga
|
||||
manga: IManga | IMangaCard
|
||||
chapter: IChapter | IPartialChpter
|
||||
curPage: number
|
||||
}
|
||||
|
||||
export default function ReaderNavBar(props: IProps) {
|
||||
@@ -103,11 +157,14 @@ export default function ReaderNavBar(props: IProps) {
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
const { settings, setSettings, manga } = props;
|
||||
const {
|
||||
settings, setSettings, manga, chapter, curPage,
|
||||
} = props;
|
||||
|
||||
const [drawerOpen, setDrawerOpen] = useState(false || settings.staticNav);
|
||||
const [hideOpenButton, setHideOpenButton] = useState(false);
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(false);
|
||||
|
||||
const theme = useTheme();
|
||||
const classes = useStyles(settings)();
|
||||
@@ -176,16 +233,92 @@ export default function ReaderNavBar(props: IProps) {
|
||||
</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)}
|
||||
/>
|
||||
<ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}>
|
||||
<ListItemText primary="Reader Settings" />
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
disableRipple
|
||||
disableFocusRipple
|
||||
onClick={() => setSettingsCollapseOpen(!settingsCollapseOpen)}
|
||||
>
|
||||
{settingsCollapseOpen && <KeyboardArrowUpIcon />}
|
||||
{!settingsCollapseOpen && <KeyboardArrowDownIcon />}
|
||||
</IconButton>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<Collapse in={settingsCollapseOpen} timeout="auto" unmountOnExit>
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemText primary="Static Navigation" />
|
||||
<ListItemSecondaryAction>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={settings.staticNav}
|
||||
onChange={(e) => setSettingValue('staticNav', e.target.checked)}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemText primary="Show page number" />
|
||||
<ListItemSecondaryAction>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={settings.showPageNumber}
|
||||
onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Collapse>
|
||||
<hr />
|
||||
<div className={classes.navigation}>
|
||||
<span>
|
||||
Currently on page
|
||||
{' '}
|
||||
{curPage + 1}
|
||||
{' '}
|
||||
of
|
||||
{' '}
|
||||
{chapter.pageCount}
|
||||
</span>
|
||||
<div className={classes.navigationChapters}>
|
||||
{chapter.chapterIndex > 1
|
||||
&& (
|
||||
<Link
|
||||
style={{ gridArea: 'prev' }}
|
||||
to={`/manga/${manga.id}/chapter/${chapter.chapterIndex - 1}`}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<KeyboardArrowLeftIcon />}
|
||||
>
|
||||
Chapter
|
||||
{' '}
|
||||
{chapter.chapterIndex - 1}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
{chapter.chapterIndex < chapter.chapterCount
|
||||
&& (
|
||||
<Link
|
||||
style={{ gridArea: 'next' }}
|
||||
to={`/manga/${manga.id}/chapter/${chapter.chapterIndex + 1}`}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
endIcon={<KeyboardArrowRightIcon />}
|
||||
>
|
||||
Chapter
|
||||
{' '}
|
||||
{chapter.chapterIndex + 1}
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Slide>
|
||||
<Zoom in={!drawerOpen}>
|
||||
|
||||
@@ -38,6 +38,7 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
|
||||
});
|
||||
|
||||
const range = (n:number) => Array.from({ length: n }, (value, key) => key);
|
||||
const initialChapter = () => ({ pageCount: -1, chapterIndex: -1, chapterCount: 0 });
|
||||
|
||||
export default function Reader() {
|
||||
const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings);
|
||||
@@ -46,9 +47,9 @@ export default function Reader() {
|
||||
|
||||
const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
|
||||
|
||||
const { chapterId, mangaId } = useParams<{chapterId: string, mangaId: string}>();
|
||||
const { chapterIndex, mangaId } = useParams<{chapterIndex: string, mangaId: string}>();
|
||||
const [manga, setManga] = useState<IMangaCard | IManga>({ id: +mangaId, title: '', thumbnailUrl: '' });
|
||||
const [pageCount, setPageCount] = useState<number>(-1);
|
||||
const [chapter, setChapter] = useState<IChapter | IPartialChpter>(initialChapter());
|
||||
const [curPage, setCurPage] = useState<number>(0);
|
||||
|
||||
const { setOverride, setTitle } = useContext(NavbarContext);
|
||||
@@ -56,17 +57,21 @@ export default function Reader() {
|
||||
setOverride(
|
||||
{
|
||||
status: true,
|
||||
value: <ReaderNavBar
|
||||
settings={settings}
|
||||
setSettings={setSettings}
|
||||
manga={manga}
|
||||
/>,
|
||||
value: (
|
||||
<ReaderNavBar
|
||||
settings={settings}
|
||||
setSettings={setSettings}
|
||||
manga={manga}
|
||||
chapter={chapter}
|
||||
curPage={curPage}
|
||||
/>
|
||||
),
|
||||
},
|
||||
);
|
||||
|
||||
// clean up for when we leave the reader
|
||||
return () => setOverride({ status: false, value: <div /> });
|
||||
}, [manga, settings]);
|
||||
}, [manga, chapter, settings, curPage, chapterIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
setTitle('Reader');
|
||||
@@ -76,17 +81,18 @@ export default function Reader() {
|
||||
setManga(data);
|
||||
setTitle(data.title);
|
||||
});
|
||||
}, []);
|
||||
}, [chapterIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
client.get(`/api/v1/manga/${mangaId}/chapter/${chapterId}`)
|
||||
setChapter(initialChapter);
|
||||
client.get(`/api/v1/manga/${mangaId}/chapter/${chapterIndex}`)
|
||||
.then((response) => response.data)
|
||||
.then((data:IChapter) => {
|
||||
setPageCount(data.pageCount);
|
||||
setChapter(data);
|
||||
});
|
||||
}, []);
|
||||
}, [chapterIndex]);
|
||||
|
||||
if (pageCount === -1) {
|
||||
if (chapter.pageCount === -1) {
|
||||
return (
|
||||
<div className={classes.loading}>
|
||||
<CircularProgress thickness={5} />
|
||||
@@ -96,14 +102,15 @@ export default function Reader() {
|
||||
return (
|
||||
<div className={classes.reader}>
|
||||
<div className={classes.pageNumber}>
|
||||
{`${curPage + 1} / ${pageCount}`}
|
||||
{`${curPage + 1} / ${chapter.pageCount}`}
|
||||
</div>
|
||||
{range(pageCount).map((index) => (
|
||||
{range(chapter.pageCount).map((index) => (
|
||||
<Page
|
||||
key={index}
|
||||
index={index}
|
||||
src={`${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterId}/page/${index}`}
|
||||
src={`${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterIndex}/page/${index}`}
|
||||
setCurPage={setCurPage}
|
||||
settings={settings}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Vendored
+8
@@ -53,9 +53,17 @@ interface IChapter {
|
||||
chapter_number: number
|
||||
scanlator: String
|
||||
mangaId: number
|
||||
chapterIndex: number
|
||||
chapterCount: number
|
||||
pageCount: number
|
||||
}
|
||||
|
||||
interface IPartialChpter {
|
||||
pageCount: number
|
||||
chapterIndex: number
|
||||
chapterCount: number
|
||||
}
|
||||
|
||||
interface ICategory {
|
||||
id: number
|
||||
order: number
|
||||
|
||||
Reference in New Issue
Block a user