lbry-desktop/js/page/show.js

140 lines
3.8 KiB
JavaScript
Raw Normal View History

2016-08-08 06:47:48 +02:00
var formatItemImgStyle = {
2016-07-16 04:58:24 +02:00
maxWidth: '100%',
maxHeight: '100%',
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
marginTop: '5px',
};
var FormatItem = React.createClass({
propTypes: {
claimInfo: React.PropTypes.object,
amount: React.PropTypes.number,
name: React.PropTypes.string,
2016-08-23 07:22:29 +02:00
available: React.PropTypes.string,
2016-07-16 04:58:24 +02:00
},
render: function() {
var claimInfo = this.props.claimInfo;
var thumbnail = claimInfo.thumbnail;
var title = claimInfo.title;
var description = claimInfo.description;
var author = claimInfo.author;
var language = claimInfo.language;
var license = claimInfo.license;
var fileContentType = claimInfo['content-type'];
2016-08-23 07:22:29 +02:00
var available = this.props.available;
var amount = this.props.amount || 0.0;
2016-07-16 04:58:24 +02:00
return (
2016-08-08 06:47:48 +02:00
<div className="row-fluid">
2016-07-16 04:58:24 +02:00
<div className="span4">
2016-08-26 14:03:08 +02:00
<img src={thumbnail || '/img/default-thumb.svg'} alt={'Photo for ' + title} style={formatItemImgStyle} />
2016-07-16 04:58:24 +02:00
</div>
<div className="span8">
2016-08-08 06:47:48 +02:00
<p>{description}</p>
<table className="table-standard">
<tbody>
<tr>
<td>Content-Type</td><td>{fileContentType}</td>
</tr>
<tr>
2016-08-23 07:22:29 +02:00
<td>Cost</td><td><CreditAmount amount={amount} isEstimate={!available}/></td>
2016-08-08 06:47:48 +02:00
</tr>
<tr>
<td>Author</td><td>{author}</td>
</tr>
<tr>
<td>Language</td><td>{language}</td>
</tr>
<tr>
<td>License</td><td>{license}</td>
</tr>
</tbody>
</table>
<WatchLink streamName={this.props.name} button="primary" />
<DownloadLink streamName={this.props.name} button="alt" />
2016-07-16 04:58:24 +02:00
</div>
</div>
);
}
});
var FormatsSection = React.createClass({
propTypes: {
claimInfo: React.PropTypes.object,
amount: React.PropTypes.number,
2016-07-16 04:58:24 +02:00
name: React.PropTypes.string,
2016-08-23 07:22:29 +02:00
available: React.PropTypes.string,
2016-07-16 04:58:24 +02:00
},
render: function() {
var name = this.props.name;
var format = this.props.claimInfo;
var title = format.title;
2016-07-16 04:58:24 +02:00
if(format == null)
{
return (
<div>
2016-08-08 06:47:48 +02:00
<h2>Sorry, no results found for "{name}".</h2>
</div>);
}
2016-07-16 04:58:24 +02:00
return (
2016-07-16 07:19:40 +02:00
<div>
2016-08-08 06:47:48 +02:00
<div className="meta">lbry://{name}</div>
<h2>{title}</h2>
2016-07-16 07:19:40 +02:00
{/* In future, anticipate multiple formats, just a guess at what it could look like
// var formats = this.props.claimInfo.formats
2016-07-16 07:19:40 +02:00
// return (<tbody>{formats.map(function(format,i){ */}
2016-08-23 07:22:29 +02:00
<FormatItem claimInfo={format} amount={this.props.amount} name={this.props.name} available={this.props.available} />
2016-07-16 07:19:40 +02:00
{/* })}</tbody>); */}
</div>);
2016-07-16 04:58:24 +02:00
}
});
var DetailPage = React.createClass({
propTypes: {
name: React.PropTypes.string,
},
getInitialState: function() {
return {
claimInfo: null,
amount: null,
searching: true,
};
},
componentWillMount: function() {
2016-08-08 06:47:48 +02:00
document.title = 'lbry://' + this.props.name;
2016-08-18 09:34:20 +02:00
lbry.search(this.props.name, (results) => {
var result = results[0];
this.setState({
2016-08-23 07:22:29 +02:00
amount: result.cost,
available: result.available,
2016-08-18 09:34:20 +02:00
claimInfo: result.value,
searching: false,
});
});
},
2016-07-16 04:58:24 +02:00
render: function() {
if (this.state.claimInfo == null && this.state.searching) {
// Still waiting for metadata
return null;
}
var name = this.props.name;
2016-08-23 07:22:29 +02:00
var available = this.state.available;
var claimInfo = this.state.claimInfo;
var amount = this.state.amount;
2016-07-16 04:58:24 +02:00
return (
2016-08-08 06:47:48 +02:00
<main>
<section className="card">
2016-08-23 07:22:29 +02:00
<FormatsSection name={name} claimInfo={claimInfo} amount={amount} available={available} />
2016-08-08 06:47:48 +02:00
</section>
2016-07-16 04:58:24 +02:00
</main>);
}
});