lbry-desktop/js/page/show.js

164 lines
4.7 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,
available: React.PropTypes.bool,
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 || claimInfo['content-type']);
var mediaType = lbry.getMediaType(fileContentType);
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>
2016-08-27 00:06:22 +02:00
<section>
<table className="table-standard">
<tbody>
<tr>
<td>Content-Type</td><td>{fileContentType}</td>
</tr>
<tr>
<td>Cost</td><td><CreditAmount amount={amount} isEstimate={!available}/></td>
2016-08-27 00:06:22 +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>
</section>
<section>
{mediaType == 'video' ? <WatchLink streamName={this.props.name} button="primary" /> : null}
2016-08-27 00:06:22 +02:00
<DownloadLink streamName={this.props.name} button="alt" />
</section>
2016-11-02 17:13:20 +01:00
<section>
<Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
</section>
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,
available: React.PropTypes.bool,
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,
matchFound: null,
};
},
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];
if (result.name != this.props.name) {
this.setState({
searching: false,
matchFound: false,
});
} else {
this.setState({
amount: result.cost,
available: result.available,
claimInfo: result.value,
searching: false,
matchFound: true,
});
}
});
},
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">
{this.state.matchFound ? (
<FormatsSection name={name} claimInfo={claimInfo} amount={amount} available={available} />
) : (
<div>
<h2>No content</h2>
There is no content available at the name <strong>lbry://{this.props.name}</strong>. If you reached this page from a link within the LBRY interface, please <Link href="/?report" label="report a bug" />. Thanks!
</div>
)}
2016-08-08 06:47:48 +02:00
</section>
2016-07-16 04:58:24 +02:00
</main>);
}
});