Mirrors/tachiyomi-extensions-inspector
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/tachiyomi-extensions-inspector.git synced 2025-01-12 00:39:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

handle reader types

Browse Source
This commit is contained in:
Aria Moradi 2021-05-15 23:22:37 +04:30
parent 5f23691e20
commit a62ee8f8c3
6 changed files with 149 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
webUI/react/src/components/ReaderNavBar.tsx
View File

@ -23,6 +23,8 @@ import { Switch } from '@material-ui/core';
import List from '@material-ui/core/List'; import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; 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 ListItemText from '@material-ui/core/ListItemText';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
@ -141,6 +143,7 @@ export const defaultReaderSettings = () => ({
staticNav: false, staticNav: false,
showPageNumber: true, showPageNumber: true,
continuesPageGap: false, continuesPageGap: false,
readerType: 'ContinuesVertical',
} as IReaderSettings); } as IReaderSettings);
interface IProps { interface IProps {
@ -165,7 +168,7 @@ export default function ReaderNavBar(props: IProps) {
const [drawerVisible, setDrawerVisible] = useState(false || settings.staticNav); const [drawerVisible, setDrawerVisible] = useState(false || settings.staticNav);
const [hideOpenButton, setHideOpenButton] = useState(false); const [hideOpenButton, setHideOpenButton] = useState(false);
const [prevScrollPos, setPrevScrollPos] = useState(0); const [prevScrollPos, setPrevScrollPos] = useState(0);
const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(false); const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(true);
const theme = useTheme(); const theme = useTheme();
const classes = useStyles(settings)(); const classes = useStyles(settings)();
@ -199,32 +202,31 @@ export default function ReaderNavBar(props: IProps) {
return ( return (
<> <>
<ClickAwayListener onClickAway={() => (drawerVisible && setDrawerOpen(false))}> <Slide
<Slide direction="right"
direction="right" in={drawerOpen}
in={drawerOpen} timeout={200}
timeout={200} appear={false}
appear={false} mountOnEnter
mountOnEnter unmountOnExit
unmountOnExit onEntered={() => setDrawerVisible(true)}
onEntered={() => setDrawerVisible(true)} onExited={() => setDrawerVisible(false)}
onExited={() => setDrawerVisible(false)} >
> <div className={classes.root}>
<div className={classes.root}> <header>
<header> <IconButton
<IconButton edge="start"
edge="start" color="inherit"
color="inherit" aria-label="menu"
aria-label="menu" disableRipple
disableRipple onClick={() => history.push(`/manga/${manga.id}`)}
onClick={() => history.push(`/manga/${manga.id}`)} >
> <CloseIcon />
<CloseIcon /> </IconButton>
</IconButton> <Typography variant="h1">
<Typography variant="h1"> {title}
{title} </Typography>
</Typography> {!settings.staticNav
{!settings.staticNav
&& ( && (
<IconButton <IconButton
edge="start" edge="start"
@ -236,70 +238,74 @@ export default function ReaderNavBar(props: IProps) {
<KeyboardArrowLeftIcon /> <KeyboardArrowLeftIcon />
</IconButton> </IconButton>
) } ) }
</header> </header>
<ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}> <ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}>
<ListItemText primary="Reader Settings" /> <ListItemText primary="Reader Settings" />
<ListItemSecondaryAction> <ListItemSecondaryAction>
<IconButton <IconButton
edge="start" edge="start"
color="inherit" color="inherit"
aria-label="menu" aria-label="menu"
disableRipple disableRipple
disableFocusRipple disableFocusRipple
onClick={() => setSettingsCollapseOpen(!settingsCollapseOpen)} 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>
<ListItem>
<ListItemText primary="Reader Type" />
<Select
value={settings.readerType}
onChange={(e) => setSettingValue('readerType', e.target.value)}
> >
{settingsCollapseOpen && <KeyboardArrowUpIcon />} <MenuItem value="SingleLTR">Left to right</MenuItem>
{!settingsCollapseOpen && <KeyboardArrowDownIcon />} <MenuItem value="SingleRTL">Right to left(WIP)</MenuItem>
</IconButton> <MenuItem value="SingleVertical">Vertical(WIP)</MenuItem>
</ListItemSecondaryAction> <MenuItem value="Webtoon">Webtoon</MenuItem>
</ListItem> <MenuItem value="ContinuesVertical">Continues Vertical</MenuItem>
<Collapse in={settingsCollapseOpen} timeout="auto" unmountOnExit> <MenuItem value="ContinuesHorizontal">Horizontal(WIP)</MenuItem>
<List> </Select>
<ListItem> </ListItem>
<ListItemText primary="Static Navigation" /> </List>
<ListItemSecondaryAction> </Collapse>
<Switch <hr />
edge="end" <div className={classes.navigation}>
checked={settings.staticNav} <span>
onChange={(e) => setSettingValue('staticNav', e.target.checked)} Currently on page
/> {' '}
</ListItemSecondaryAction> {curPage + 1}
</ListItem> {' '}
<ListItem> of
<ListItemText primary="Show page number" /> {' '}
<ListItemSecondaryAction> {chapter.pageCount}
<Switch </span>
edge="end" <div className={classes.navigationChapters}>
checked={settings.showPageNumber} {chapter.index > 1
onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
/>
</ListItemSecondaryAction>
</ListItem>
<ListItem>
<ListItemText primary="Continues Page gap" />
<ListItemSecondaryAction>
<Switch
edge="end"
checked={settings.continuesPageGap}
onChange={(e) => setSettingValue('continuesPageGap', 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.index > 1
&& ( && (
<Link <Link
style={{ gridArea: 'prev' }} style={{ gridArea: 'prev' }}
@ -315,7 +321,7 @@ export default function ReaderNavBar(props: IProps) {
</Button> </Button>
</Link> </Link>
)} )}
{chapter.index < chapter.chapterCount {chapter.index < chapter.chapterCount
&& ( && (
<Link <Link
style={{ gridArea: 'next' }} style={{ gridArea: 'next' }}
@ -331,11 +337,10 @@ export default function ReaderNavBar(props: IProps) {
</Button> </Button>
</Link> </Link>
)} )}
</div>
</div> </div>
</div> </div>
</Slide> </div>
</ClickAwayListener> </Slide>
<Zoom in={!drawerOpen}> <Zoom in={!drawerOpen}>
<Fade in={!hideOpenButton}> <Fade in={!hideOpenButton}>
<IconButton <IconButton

2
webUI/react/src/components/reader/Page.tsx
View File

@ -27,7 +27,7 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
}, },
image: { image: {
display: 'block', display: 'block',
marginBottom: settings.continuesPageGap ? '15px' : 0, marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
minWidth: '50vw', minWidth: '50vw',
width: '100%', width: '100%',
maxWidth: '100%', maxWidth: '100%',

9
webUI/react/src/components/reader/SinglePageReader.tsx → webUI/react/src/components/reader/PagedReader.tsx
View File

@ -14,14 +14,7 @@ const useStyles = makeStyles({
}, },
}); });
interface IProps { export default function PagedReader(props: IReaderProps) {
pages: Array<IReaderPage>
setCurPage: React.Dispatch<React.SetStateAction<number>>
curPage: number
settings: IReaderSettings
}
export default function SinglePageReader(props: IProps) {
const { const {
pages, settings, setCurPage, curPage, pages, settings, setCurPage, curPage,
} = props; } = props;

8
webUI/react/src/components/reader/VerticalReader.tsx
View File

@ -13,13 +13,7 @@ const useStyles = makeStyles({
}, },
}); });
interface IProps { export default function VerticalReader(props: IReaderProps) {
pages: Array<IReaderPage>
setCurPage: React.Dispatch<React.SetStateAction<number>>
settings: IReaderSettings
}
export default function VerticalReader(props: IProps) {
const { pages, settings, setCurPage } = props; const { pages, settings, setCurPage } = props;
const classes = useStyles(); const classes = useStyles();

42
webUI/react/src/screens/Reader.tsx
View File

@ -13,7 +13,7 @@ import { useParams } from 'react-router-dom';
import HorizontalReader from '../components/reader/HorizontalReader'; import HorizontalReader from '../components/reader/HorizontalReader';
import Page from '../components/reader/Page'; import Page from '../components/reader/Page';
import PageNumber from '../components/reader/PageNumber'; 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 VerticalReader from '../components/reader/VerticalReader';
import ReaderNavBar, { defaultReaderSettings } from '../components/ReaderNavBar'; import ReaderNavBar, { defaultReaderSettings } from '../components/ReaderNavBar';
import NavbarContext from '../context/NavbarContext'; 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 range = (n:number) => Array.from({ length: n }, (value, key) => key);
const initialChapter = () => ({ pageCount: -1, index: -1, chapterCount: 0 }); 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}`, src: `${serverAddress}/api/v1/manga/${mangaId}/chapter/${chapterIndex}/page/${index}`,
})); }));
const ReaderComponent = getReaderComponent(settings.readerType);
return ( return (
<div className={classes.root}> <div className={classes.root}>
<PageNumber <PageNumber
@ -105,18 +132,9 @@ export default function Reader() {
curPage={curPage} curPage={curPage}
pageCount={chapter.pageCount} pageCount={chapter.pageCount}
/> />
{/* <VerticalReader <ReaderComponent
pages={pages}
setCurPage={setCurPage}
settings={settings}
/> */}
{/* <HorizontalReader
pages={pages}
setCurPage={setCurPage}
settings={settings}
/> */}
<SinglePageReader
pages={pages} pages={pages}
pageCount={chapter.pageCount}
setCurPage={setCurPage} setCurPage={setCurPage}
curPage={curPage} curPage={curPage}
settings={settings} settings={settings}

18
webUI/react/src/typings.d.ts vendored
View File

@ -88,13 +88,29 @@ interface INavbarOverride {
value: any value: any
} }
type ReaderType =
'ContinuesVertical'|
'Webtoon' |
'SingleVertical' |
'SingleRTL' |
'SingleLTR' |
'ContinuesHorizontal';
interface IReaderSettings{ interface IReaderSettings{
staticNav: boolean staticNav: boolean
showPageNumber: boolean showPageNumber: boolean
continuesPageGap: boolean readerType: ReaderType
} }
interface IReaderPage { interface IReaderPage {
index: number index: number
src: string src: string
} }
interface IReaderProps {
pages: Array<IReaderPage>
pageCount: number
setCurPage: React.Dispatch<React.SetStateAction<number>>
curPage: number
settings: IReaderSettings
}