render() {
const { classes, state, progress, error } = this.props
if(state === ConnectorState.STARTED) {
return null
}
let stateStr
switch (state) {
case ConnectorState.UNKNOW: stateStr = 'Initializing ...'; break
case ConnectorState.NO_BINARY: stateStr = 'IPFS not found'; break
case ConnectorState.DOWNLOADING: stateStr = 'Downloading IPFS'; break
case ConnectorState.STOPPED: stateStr = 'IPFS stopped'; break
case ConnectorState.STARTING: stateStr = 'IPFS starting...'; break
case ConnectorState.STOPPING: stateStr = 'IPFS stopping...'; break
case ConnectorState.UPGRADING: stateStr = 'IPFS upgrading...'; break
}
// TODO: remove
// See https://github.com/AkashaProject/ipfs-connector/issues/15
let total
if(state === ConnectorState.DOWNLOADING && progress) {
total = Array.isArray(progress.total) ? progress.total[0] : progress.total
if(!Array.isArray(progress.total)) {
console.log('remove all that')
}
}
return (
<div className={classes.wrapper}>
<Typography variant="subheading">Hold on !</Typography>
<div className={classes.spacer} />
<Typography>It seems that the IPFS dameon is not started yet.</Typography>
<Typography>{stateStr}</Typography>
<div className={classes.progress}>
{ (state === ConnectorState.DOWNLOADING && progress) &&
<div>
<LinearProgress variant="determinate" value={100 * progress.completed / total} />
<Typography>{humanize.filesizeNoUnit(progress.completed)} of {humanize.filesize(total)} ({Math.round(100 * progress.completed / total)}%)</Typography>
</div>
}
</div>
{ error && <Error >{error}</Error>}
</div>
)
}
render() {
const share: Share = this.props.share
const { classes, profile, contactList } = this.props
const author = share.isAuthor
? profile
: contactList.findContactInDirectory(share.authorPubkey)
const avatar = <Avatar person={author} />
const title = <Typography variant='title' noWrap>
{share.title}
</Typography>
const subheader = <Typography variant='caption' noWrap>
{author.identity}
</Typography>
const header = <CardHeader
avatar={avatar}
title={title}
subheader={subheader}
classes={{ root: classes.overflow, content: classes.overflow }}
/>
return (
<div className={classes.wrapper} key={share.id}>
<div className={classes.header}>
{header}
<div className={classes.actions}>
{ (share.isAvailable || share.isPaused) &&
<IconButton onClick={ this.props.onStartClickGenerator(share) }>
<FontAwesome name='play' />
</IconButton>
}
{ share.isDownloading &&
<IconButton onClick={ this.props.onPauseClickGenerator(share) }>
<FontAwesome name='pause' />
</IconButton>
}
{ (share.isDownloading || share.isPaused) &&
<IconButton onClick={ this.props.onStopClickGenerator(share) }>
<FontAwesome name='stop' />
</IconButton>
}
<IconButton
color={ share.favorite ? 'secondary' : 'default'}
onClick={ this.props.onFavoriteClickGenerator(share) }>
<FontAwesome name={ share.favorite ? 'star' : 'star-o' } />
</IconButton>
</div>
</div>
{ (share.isDownloading || share.isPaused) &&
<div>
<LinearProgress variant="determinate" value={share.progress * 100}/>
<div className={classes.stats}>
<Typography>{humanize.filesizeNoUnit(share.sizeLocal)} of {humanize.filesize(share.sizeTotal)} ({share.progressFormatted})</Typography>
</div>
</div>
}
<InsetText text={share.description} placeholder='No description' />
<ShareRecipients recipients={share.recipients} />
<ShareFiles share={share} style="margin:30px"/>
</div>
);
}