48 lines
No EOL
1.6 KiB
TypeScript
48 lines
No EOL
1.6 KiB
TypeScript
import React, {useState, useEffect} from 'react';
|
|
import { Typography, useTheme } from '@material-ui/core';
|
|
import { Content } from '../../accessor/contents';
|
|
|
|
type MangaType = "manga"|"artist cg"|"donjinshi"|"western"
|
|
|
|
export type PresentableTag = {
|
|
artist:string[],
|
|
group: string[],
|
|
series: string[],
|
|
type: MangaType,
|
|
character: string[],
|
|
tags: string[],
|
|
}
|
|
|
|
export const MangaReader = (props:{content:Content})=>{
|
|
const theme = useTheme();
|
|
const additional = props.content.additional;
|
|
const [curPage,setCurPage] = useState(0);
|
|
if(!('page' in additional)){
|
|
console.error("invalid content : page read fail : "+ JSON.stringify(additional));
|
|
return <Typography>Error. DB error. page restriction</Typography>
|
|
}
|
|
const PageDown = ()=>setCurPage(Math.max(curPage - 1 , 0));
|
|
const PageUP = ()=>setCurPage(Math.min(curPage + 1, page - 1));
|
|
const page:number = additional['page'] as number;
|
|
const onKeyUp = (e: KeyboardEvent)=>{
|
|
if(e.code === "ArrowLeft"){
|
|
PageDown();
|
|
}
|
|
else if(e.code === "ArrowRight"){
|
|
PageUP();
|
|
}
|
|
}
|
|
useEffect(()=>{
|
|
document.addEventListener("keydown",onKeyUp);
|
|
return ()=>{
|
|
document.removeEventListener("keydown",onKeyUp);
|
|
}
|
|
});
|
|
//theme.mixins.toolbar.minHeight;
|
|
return (<div style={{overflow: 'hidden', alignSelf:'center'}}>
|
|
<img onClick={PageUP} src={`/content/${props.content.id}/manga/${curPage}`}
|
|
style={{maxWidth:'100%', maxHeight:'calc(100vh - 64px)'}}></img>
|
|
</div>);
|
|
}
|
|
|
|
export default MangaReader; |