monoid/ionian
1
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

move file

Browse Source
This commit is contained in:
monoid 2021-01-06 22:09:53 +09:00
parent 4e46f801f4
commit 9abf57bdf0
8 changed files with 85 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/client/component/contentinfo.tsx Normal file
View File

@ -0,0 +1,72 @@
import React, { useState, useEffect } from 'react';
import { Redirect, Route, Switch, useHistory, useRouteMatch, match as MatchType, Link as RouterLink } from 'react-router-dom';
import ContentAccessor, { Content } from '../accessor/contents';
import { LoadingCircle } from '../component/loading';
import { Link, Paper, makeStyles, Theme, Box, useTheme, Typography } from '@material-ui/core';
import { ThumbnailContainer } from '../page/reader/reader';
import { TagChip } from '../component/tagchip';
import { MangaReader } from '../page/reader/manga';
export const makeContentInfoUrl = (id: number) => `/doc/${id}`;
export const makeContentReaderUrl = (id: number) => `/doc/${id}/reader`;
const useStyles = makeStyles((theme: Theme) => ({
root: {
display: "flex",
[theme.breakpoints.down("sm")]: {
flexDirection: "column",
alignItems: "center",
}
},
thumbnail_content: {
maxHeight: '400px',
maxWidth: 'min(400px, 100vw)',
},
tag_list: {
display: 'flex',
justifyContent: 'flex-start',
flexWrap: 'wrap',
overflowY: 'hidden',
'& > *': {
margin: theme.spacing(0.5),
},
},
title: {
marginLeft: theme.spacing(1),
},
InfoContainer: {
display: 'grid',
gridTemplateColumns: '100px auto',
overflowY: 'hidden',
}
}))
export const ContentInfo = (props: { content: Content, children?: React.ReactNode }) => {
const classes = useStyles();
const theme = useTheme();
const content = props?.content;
let allTag = content.tags;
const artists = allTag.filter(x => x.startsWith("artist:")).map(x => x.substr(7));
allTag = allTag.filter(x => !x.startsWith("artist:"));
return (<Paper className={classes.root}>
<Link component={RouterLink} to={makeContentReaderUrl(content.id)}>
<ThumbnailContainer content={content} className={classes.thumbnail_content}></ThumbnailContainer>
</Link>
<Box style={{ padding: theme.spacing(1) }}>
<Link variant='h5' color='inherit' component={RouterLink} to={makeContentReaderUrl(content.id)}
className={classes.title}>
{content.title}
</Link>
<Box className={classes.InfoContainer}>
<Typography variant='subtitle1'>Artist</Typography>
<Box style={{alignSelf:"center"}}>{artists.join(", ")}</Box>
<Typography variant='subtitle1'>Tags</Typography>
<Box className={classes.tag_list}>
{allTag.map(x => {
return (<TagChip key={x} label={x} clickable={true} tagname={x} size="small"></TagChip>);
})}
</Box>
</Box>
</Box>
</Paper>);
}

4
src/client/component/loading.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import {Box, CircularProgress} from '@material-ui/core';
export const LoadingCircle = ()=>{
return (<div><Box>
return (<Box>
<CircularProgress title="loading"/>
</Box></div>);
</Box>);
}

3
src/client/component/mod.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './contentinfo';
export * from './loading';
export * from './tagchip';

70
src/client/page/contentinfo.tsx
View File

@ -3,14 +3,13 @@ import { Redirect, Route, Switch, useHistory, useRouteMatch, match as MatchType,
import ContentAccessor, { Content } from '../accessor/contents';
import { LoadingCircle } from '../component/loading';
import { Link, Paper, makeStyles, Theme, Box, useTheme, Typography } from '@material-ui/core';
import { ThumbnailContainer } from '../presenter/presenter';
import { TagChip } from '../component/tagchip';
import { MangaReader } from '../presenter/manga';
import { MangaReader } from './reader/manga';
import { ContentInfo } from '../component/mod';
export const makeContentInfoUrl = (id: number) => `/doc/${id}`;
export const makeMangaReaderUrl = (id: number) => `/doc/${id}/reader`;
type ContentInfoState = {
type ContentState = {
content: Content | undefined,
notfound: boolean,
}
@ -22,7 +21,7 @@ export const ContentAbout = (prop: { match: MatchType }) => {
}
const m = /\/doc\/(\d+)/.exec(match.url);
const id = m !== null ? Number.parseInt(m[1]) : NaN;
const [info, setInfo] = useState<ContentInfoState>({ content: undefined, notfound:false });
const [info, setInfo] = useState<ContentState>({ content: undefined, notfound:false });
useEffect(() => {
(async () => {
if (!isNaN(id)) {
@ -51,65 +50,4 @@ export const ContentAbout = (prop: { match: MatchType }) => {
<div>404 Not Found invalid url : {prop.match.path}</div>
</Route>
</Switch>);
}
const useStyles = makeStyles((theme: Theme) => ({
root: {
display: "flex",
[theme.breakpoints.down("sm")]: {
flexDirection: "column",
alignItems: "center",
}
},
thumbnail_content: {
maxWidth: '300px',
maxHeight: '300px'
},
tag_list: {
display: 'flex',
justifyContent: 'flex-start',
flexWrap: 'wrap',
overflowY: 'hidden',
'& > *': {
margin: theme.spacing(0.5),
},
},
title: {
marginLeft: theme.spacing(1),
},
InfoContainer: {
display: 'grid',
gridTemplateColumns: '100px auto',
overflowY: 'hidden',
}
}))
export const ContentInfo = (props: { content: Content, children?: React.ReactNode }) => {
const classes = useStyles();
const theme = useTheme();
const content = props?.content;
let allTag = content.tags;
const artists = allTag.filter(x => x.startsWith("artist:")).map(x => x.substr(7));
allTag = allTag.filter(x => !x.startsWith("artist:"));
return (<Paper className={classes.root}>
<Link component={RouterLink} to={makeMangaReaderUrl(content.id)}>
<ThumbnailContainer content={content} className={classes.thumbnail_content}></ThumbnailContainer>
</Link>
<Box style={{ padding: theme.spacing(1) }}>
<Link variant='h5' color='inherit' component={RouterLink} to={makeMangaReaderUrl(content.id)}
className={classes.title}>
{content.title}
</Link>
<Box className={classes.InfoContainer}>
<Typography variant='subtitle1'>Artist</Typography>
<Box>{artists.join(", ")}</Box>
<Typography variant='subtitle1'>Tags</Typography>
<Box className={classes.tag_list}>
{allTag.map(x => {
return (<TagChip key={x} label={x} clickable={true} tagname={x} size="small"></TagChip>);
})}
</Box>
</Box>
</Box>
</Paper>);
}

2
src/client/page/gallery.tsx
View File

@ -5,7 +5,7 @@ import {useTheme, makeStyles, Theme} from '@material-ui/core/styles';
import {Link as RouterLink} from 'react-router-dom';
import {makeContentInfoUrl} from './contentinfo';
import { LoadingCircle } from '../component/loading';
import {ThumbnailContainer} from '../presenter/presenter';
import {ThumbnailContainer} from './reader/reader';
import {TagChip} from '../component/tagchip';
const useStyles = makeStyles((theme:Theme)=>({

4
src/client/presenter/manga.tsx → src/client/page/reader/manga.tsx
View File

@ -1,8 +1,8 @@
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 { LoadingCircle } from '../../component/loading';
import { Link, Paper, makeStyles, Theme, Box, Typography } from '@material-ui/core';
import { Content, makeThumbnailUrl } from '../accessor/contents';
import { Content, makeThumbnailUrl } from '../../accessor/contents';
type MangaType = "manga"|"artist cg"|"donjinshi"|"western"

2
src/client/presenter/presenter.tsx → src/client/page/reader/reader.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Content, makeThumbnailUrl } from '../accessor/contents';
import { Content, makeThumbnailUrl } from '../../accessor/contents';
import {MangaReader} from './manga';
export type PresenterCollection = {

0
src/client/presenter/video.tsx → src/client/page/reader/video.tsx
View File