Mirrors/tachiyomi-extensions-inspector
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/tachiyomi-extensions-inspector.git synced 2025-01-11 16:29:08 +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 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 (
<>
<ClickAwayListener onClickAway={() => (drawerVisible && setDrawerOpen(false))}>
<Slide
direction="right"
in={drawerOpen}
timeout={200}
appear={false}
mountOnEnter
unmountOnExit
onEntered={() => setDrawerVisible(true)}
onExited={() => setDrawerVisible(false)}
>
<div className={classes.root}>
<header>
<IconButton
edge="start"
color="inherit"
aria-label="menu"
disableRipple
onClick={() => history.push(`/manga/${manga.id}`)}
>
<CloseIcon />
</IconButton>
<Typography variant="h1">
{title}
</Typography>
{!settings.staticNav
<Slide
direction="right"
in={drawerOpen}
timeout={200}
appear={false}
mountOnEnter
unmountOnExit
onEntered={() => setDrawerVisible(true)}
onExited={() => setDrawerVisible(false)}
>
<div className={classes.root}>
<header>
<IconButton
edge="start"
color="inherit"
aria-label="menu"
disableRipple
onClick={() => history.push(`/manga/${manga.id}`)}
>
<CloseIcon />
</IconButton>
<Typography variant="h1">
{title}
</Typography>
{!settings.staticNav
&& (
<IconButton
edge="start"
@ -236,70 +238,74 @@ export default function ReaderNavBar(props: IProps) {
<KeyboardArrowLeftIcon />
</IconButton>
) }
</header>
<ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}>
<ListItemText primary="Reader Settings" />
<ListItemSecondaryAction>
<IconButton
edge="start"
color="inherit"
aria-label="menu"
disableRipple
disableFocusRipple
onClick={() => setSettingsCollapseOpen(!settingsCollapseOpen)}
</header>
<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>
<ListItem>
<ListItemText primary="Reader Type" />
<Select
value={settings.readerType}
onChange={(e) => setSettingValue('readerType', e.target.value)}
>
{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="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
<MenuItem value="SingleLTR">Left to right</MenuItem>
<MenuItem value="SingleRTL">Right to left(WIP)</MenuItem>
<MenuItem value="SingleVertical">Vertical(WIP)</MenuItem>
<MenuItem value="Webtoon">Webtoon</MenuItem>
<MenuItem value="ContinuesVertical">Continues Vertical</MenuItem>
<MenuItem value="ContinuesHorizontal">Horizontal(WIP)</MenuItem>
</Select>
</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
style={{ gridArea: 'prev' }}
@ -315,7 +321,7 @@ export default function ReaderNavBar(props: IProps) {
</Button>
</Link>
)}
{chapter.index < chapter.chapterCount
{chapter.index < chapter.chapterCount
&& (
<Link
style={{ gridArea: 'next' }}
@ -331,11 +337,10 @@ export default function ReaderNavBar(props: IProps) {
</Button>
</Link>
)}
</div>
</div>
</div>
</Slide>
</ClickAwayListener>
</div>
</Slide>
<Zoom in={!drawerOpen}>
<Fade in={!hideOpenButton}>
<IconButton

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

@ -27,7 +27,7 @@ const useStyles = (settings: IReaderSettings) => makeStyles({
},
image: {
display: 'block',
marginBottom: settings.continuesPageGap ? '15px' : 0,
marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
minWidth: '50vw',
width: '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 {
pages: Array<IReaderPage>
setCurPage: React.Dispatch<React.SetStateAction<number>>
curPage: number
settings: IReaderSettings
}
export default function SinglePageReader(props: IProps) {
export default function PagedReader(props: IReaderProps) {
const {
pages, settings, setCurPage, curPage,
} = props;

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

@ -13,13 +13,7 @@ const useStyles = makeStyles({
},
});
interface IProps {
pages: Array<IReaderPage>
setCurPage: React.Dispatch<React.SetStateAction<number>>
settings: IReaderSettings
}
export default function VerticalReader(props: IProps) {
export default function VerticalReader(props: IReaderProps) {
const { pages, settings, setCurPage } = props;
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 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 (
<div className={classes.root}>
<PageNumber
@ -105,18 +132,9 @@ export default function Reader() {
curPage={curPage}
pageCount={chapter.pageCount}
/>
{/* <VerticalReader
pages={pages}
setCurPage={setCurPage}
settings={settings}
/> */}
{/* <HorizontalReader
pages={pages}
setCurPage={setCurPage}
settings={settings}
/> */}
<SinglePageReader
<ReaderComponent
pages={pages}
pageCount={chapter.pageCount}
setCurPage={setCurPage}
curPage={curPage}
settings={settings}

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

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