lbry-desktop/js/page/show.js

167 lines
4.9 KiB
JavaScript
Raw Normal View History

2016-11-22 21:19:08 +01:00
import React from 'react';
import lbry from '../lbry.js';
2016-12-08 00:07:28 +01:00
import lighthouse from '../lighthouse.js';
import {CreditAmount, Thumbnail} from '../component/common.js';
import {Link, DownloadLink, WatchLink} from '../component/link.js';
2016-11-22 21:19:08 +01:00
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,
cost: React.PropTypes.number,
name: React.PropTypes.string,
costIncludesData: 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);
var costIncludesData = this.props.costIncludesData;
var cost = this.props.cost || 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">
<Thumbnail src={thumbnail} 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={cost} isEstimate={!costIncludesData}/></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,
cost: React.PropTypes.number,
2016-07-16 04:58:24 +02:00
name: React.PropTypes.string,
costIncludesData: 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){ */}
<FormatItem claimInfo={format} cost={this.props.cost} name={this.props.name} costIncludesData={this.props.costIncludesData} />
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 {
metadata: null,
cost: null,
costIncludesData: null,
nameLookupComplete: null,
};
},
componentWillMount: function() {
2016-08-08 06:47:48 +02:00
document.title = 'lbry://' + this.props.name;
lbry.resolveName(this.props.name, (metadata) => {
this.setState({
metadata: metadata,
nameLookupComplete: true,
});
});
lbry.getCostInfoForName(this.props.name, ({cost, includesData}) => {
this.setState({
cost: cost,
costIncludesData: includesData,
});
});
},
2016-07-16 04:58:24 +02:00
render: function() {
if (this.state.metadata == null) {
return null;
}
const name = this.props.name;
const costIncludesData = this.state.costIncludesData;
const metadata = this.state.metadata;
const cost = this.state.cost;
2016-07-16 04:58:24 +02:00
return (
2016-08-08 06:47:48 +02:00
<main>
<section className="card">
{this.state.nameLookupComplete ? (
<FormatsSection name={name} claimInfo={metadata} cost={cost} costIncludesData={costIncludesData} />
) : (
<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>);
}
2016-11-22 21:19:08 +01:00
});
export default DetailPage;