fix reader

src/client/component/contentinfo.tsx

@@ -102,8 +102,7 @@ export const ContentInfo = (props: {
     allTag = allTag.filter(x => !x.startsWith("artist:"));
     return (<Paper className={propclasses.root || rootName} elevation={4}>
         <Link className={propclasses.thumbnail_anchor || thumbnail_anchor} component={RouterLink} to={{
-            pathname:makeContentReaderUrl(content.id),
-            state:props.gallery
+            pathname:makeContentReaderUrl(content.id)
         }}>
             <ThumbnailContainer content={content} 
                 className={propclasses.thumbnail_content || thumbnail_content}/>
@@ -111,7 +110,6 @@ export const ContentInfo = (props: {
         <Box className={propclasses.infoContainer || classes.infoContainer}>
             <Link variant='h5' color='inherit' component={RouterLink} to={{
                 pathname: props.gallery === undefined ? makeContentReaderUrl(content.id) : makeContentInfoUrl(content.id),
-                state:props.gallery
             }}
                 className={propclasses.title || classes.title}>
                 {content.title}

src/client/component/headline.tsx

@@ -106,8 +106,11 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 export const Headline = (prop: {
     children?: React.ReactNode,
-    navListItem?: React.ReactNode,
     isLogin?: boolean,
+    classes?:{
+        content?:string,
+        toolbar?:string,
+    },
     menu: React.ReactNode
 }) => {
     const [v, setv] = useState(false);
@@ -174,7 +177,7 @@ export const Headline = (prop: {
                             color="inherit">
                             <AccountCircle />
                         </IconButton>
-                        : <Button color="inherit">Login</Button>
+                        : <Button color="inherit" component={RouterLink} to="/login">Login</Button>
                 }
             </Toolbar>
         </AppBar>
@@ -194,8 +197,8 @@ export const Headline = (prop: {
                 </Drawer>
             </Hidden>
         </nav>
-        <main className={classes.content}>
-            <div className={classes.toolbar}></div>
+        <main className={prop.classes?.content || classes.content}>
+            <div className={prop.classes?.toolbar || classes.toolbar}></div>
             {prop.children}
         </main>
     </div>);

src/client/page/contentinfo.tsx

@@ -4,7 +4,7 @@ import ContentAccessor, { Content } from '../accessor/contents';
 import { LoadingCircle } from '../component/loading';
 import { Link, Paper, makeStyles, Theme, Box, useTheme, Typography } from '@material-ui/core';
 import {ArrowBack as ArrowBackIcon } from '@material-ui/icons';
-import { MangaReader } from './reader/manga';
+import { getPresenter } from './reader/reader';
 import { ContentInfo, Headline, NavItem, NavList } from '../component/mod';
 import {BackLinkContext} from '../state';
 
@@ -16,6 +16,18 @@ type ContentState = {
     notfound: boolean,
 }
 
+const useStyles = makeStyles((theme:Theme)=>({
+    noPaddingContent:{
+        display:'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+    },
+    noPaddingToolbar:{
+        flex: '0 1 auto',
+        ...theme.mixins.toolbar,
+    }
+}));
+
 export const ContentAbout = (prop: { match: MatchType }) => {
     const match = useRouteMatch<{id:string}>("/doc/:id");
     if (match == null) {
@@ -36,7 +48,7 @@ export const ContentAbout = (prop: { match: MatchType }) => {
             </BackLinkContext.Consumer>
         </NavList>
     );
-
+    
     useEffect(() => {
         (async () => {
             console.log("mount content about");
@@ -47,6 +59,8 @@ export const ContentAbout = (prop: { match: MatchType }) => {
         })()
         return ()=>{console.log("unmount content about")}
     }, []);
+    const classes = useStyles();
+    
     if (isNaN(id)) {
         return (
             <Headline menu={menu_list()}>
@@ -68,17 +82,19 @@ export const ContentAbout = (prop: { match: MatchType }) => {
         );
     }
     else{
-
+        const ReaderPage = getPresenter(info.content);
         return (<Switch>
         <Route exact path={`${prop.match.path}/:id`}>
-            
             <Headline menu={menu_list()}>
                 <ContentInfo content={info.content}></ContentInfo>
             </Headline>
         </Route>
         <Route exact path={`${prop.match.path}/:id/reader`}>
-            <Headline menu={menu_list(`${prop.match.path}/${id}`)}>
-                <MangaReader content={info.content}></MangaReader>
+            <Headline menu={menu_list(`${prop.match.path}/${id}`)} classes={{
+                content:classes.noPaddingContent,
+                toolbar:classes.noPaddingToolbar
+                }}>
+                <ReaderPage content={info.content}></ReaderPage>
             </Headline>
         </Route>
         <Route>

src/client/page/reader/manga.tsx

@@ -1,8 +1,6 @@
 import React, {useState, useEffect} from 'react';
-import {Redirect, Route ,Switch,useHistory, useRouteMatch, match as MatchType, Link as RouterLink} from 'react-router-dom';
-import { LoadingCircle } from '../../component/loading';
-import { Link, Paper, makeStyles, Theme, Box, Typography } from '@material-ui/core';
-import { Content, makeThumbnailUrl } from '../../accessor/contents';
+import {  Typography, useTheme } from '@material-ui/core';
+import { Content } from '../../accessor/contents';
 
 type MangaType = "manga"|"artist cg"|"donjinshi"|"western"
 
@@ -16,13 +14,35 @@ export type PresentableTag = {
 }
 
 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;
-    return (<div>{[...Array(page).keys()].map(x=>(<img src={`/content/${props.content.id}/manga/${x}`} key={x} style={{maxHeight:'100%',maxWidth:'100%'}}></img>))}</div>);
+    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;

src/client/page/reader/reader.tsx

@@ -1,21 +1,31 @@
+import { Typography } from '@material-ui/core';
 import React from 'react';
 import { Content, makeThumbnailUrl } from '../../accessor/contents';
 import {MangaReader} from './manga';
+import {VideoReader} from './video'
 
-export type PresenterCollection = {
-    ReaderPage: (props:{content:Content,className?:string})=> JSX.Element;
-};
+export interface PagePresenterProp{
+    content:Content,
+    className?:string
+}
+interface PagePresenter{
+    (prop:PagePresenterProp):JSX.Element
+}
 
-export const getPresenter = (content:Content):PresenterCollection=>{
-    return {
-        ReaderPage:MangaReader
-    };
+export const getPresenter = (content:Content):PagePresenter => {
+    switch (content.content_type) {
+        case "manga":
+            return MangaReader;
+        case "video":
+            return VideoReader;
+    }
+    return ()=><Typography variant='h2'>Not implemented reader</Typography>;
 }
 
 export const ThumbnailContainer = (props:{content:Content, className?:string})=>{
     const thumbnailurl = makeThumbnailUrl(props.content);
     if(props.content.content_type === "video"){
-        return (<video src={thumbnailurl} className={props.className}></video>)
+        return (<video src={thumbnailurl} muted autoPlay loop className={props.className}></video>)
     }
     else return (<img src={thumbnailurl} className={props.className}></img>)
 }

src/client/page/reader/video.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Content } from '../../accessor/contents';
+
+export const VideoReader = (props:{content:Content})=>{
+    const id = props.content.id;
+    return <video controls autoPlay src={`/content/${props.content.id}/video`} style={{maxHeight:'100%',maxWidth:'100%'}}></video>;
+}