139 lines
3.8 KiB
JavaScript
139 lines
3.8 KiB
JavaScript
var formatItemStyle = {
|
|
fontSize: '0.95em',
|
|
marginTop: '10px',
|
|
maxHeight: '220px'
|
|
}, formatItemImgStyle = {
|
|
maxWidth: '100%',
|
|
maxHeight: '100%',
|
|
display: 'block',
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
marginTop: '5px',
|
|
}, formatHeaderStyle = {
|
|
fontWeight: 'bold',
|
|
marginBottom: '5px'
|
|
}, formatSubheaderStyle = {
|
|
marginBottom: '10px',
|
|
fontSize: '0.9em'
|
|
}, formatItemDescriptionStyle = {
|
|
color: '#444',
|
|
marginBottom: '5px',
|
|
fontSize: '1.2em',
|
|
}, formatItemMetadataStyle = {
|
|
color: '#444',
|
|
marginBottom: '5px',
|
|
fontSize: '0.9em',
|
|
}, formatItemCostStyle = {
|
|
float: 'right'
|
|
};
|
|
|
|
var FormatItem = React.createClass({
|
|
propTypes: {
|
|
results: React.PropTypes.object,
|
|
},
|
|
render: function() {
|
|
var results = this.props.results;
|
|
var name = results.name;
|
|
var thumbnail = results.thumbnail;
|
|
var title = results.title;
|
|
var amount = results.cost_est ? results.cost_est : 0.0;
|
|
var description = results.description;
|
|
var author = results.author;
|
|
var language = results.language;
|
|
var license = results.license;
|
|
var fileContentType = results['content-type'];
|
|
|
|
return (
|
|
<div className="row-fluid" style={formatItemStyle}>
|
|
<div className="span4">
|
|
<img src={thumbnail} alt={'Photo for ' + title} style={formatItemImgStyle} />
|
|
</div>
|
|
<div className="span8">
|
|
<h4 style={formatItemMetadataStyle}><b>Address:</b> {name}</h4>
|
|
<h4 style={formatItemMetadataStyle}><b>Content-Type:</b> {fileContentType}</h4>
|
|
<div style={formatSubheaderStyle}>
|
|
<div style={formatItemCostStyle}><CreditAmount amount={amount} isEstimate={true}/></div>
|
|
<WatchLink streamName={name} />
|
|
|
|
<DownloadLink streamName={name} />
|
|
</div>
|
|
<p style={formatItemDescriptionStyle}>{description}</p>
|
|
<div>
|
|
<span style={formatItemMetadataStyle}><b>Author:</b> {author}</span><br />
|
|
<span style={formatItemMetadataStyle}><b>Language:</b> {language}</span><br />
|
|
<span style={formatItemMetadataStyle}><b>License:</b> {license}</span><br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
var FormatsSection = React.createClass({
|
|
propTypes: {
|
|
results: React.PropTypes.object,
|
|
name: React.PropTypes.string,
|
|
},
|
|
render: function() {
|
|
var name = this.props.name;
|
|
var format = this.props.results;
|
|
var title = format.title;
|
|
|
|
if(format == null)
|
|
{
|
|
return (
|
|
<div>
|
|
<h1 style={formatHeaderStyle}>Sorry, no results found for "{name}".</h1>
|
|
</div>);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1 style={formatHeaderStyle}>{title}</h1>
|
|
{/* In future, anticipate multiple formats, just a guess at what it could look like
|
|
// var formats = this.props.results.formats
|
|
// return (<tbody>{formats.map(function(format,i){ */}
|
|
<FormatItem results={format}/>
|
|
{/* })}</tbody>); */}
|
|
</div>);
|
|
}
|
|
});
|
|
|
|
var DetailPage = React.createClass({
|
|
propTypes: {
|
|
name: React.PropTypes.string,
|
|
},
|
|
getInitialState: function() {
|
|
return {
|
|
results: null,
|
|
searching: true,
|
|
};
|
|
},
|
|
componentWillMount: function() {
|
|
lbry.search(this.props.name, (results) => {
|
|
this.setState({
|
|
results: results[0],
|
|
searching: false,
|
|
});
|
|
});
|
|
},
|
|
render: function() {
|
|
if (this.state.results == null && this.state.searching) {
|
|
// Still waiting for metadata
|
|
return null;
|
|
}
|
|
|
|
var name = this.props.name;
|
|
var metadata = this.state.metadata;
|
|
var results = this.state.results;
|
|
|
|
return (
|
|
<main className="page">
|
|
<SubPageLogo />
|
|
<FormatsSection name={name} results={results}/>
|
|
<section>
|
|
<Link href="/" label="<< Return" />
|
|
</section>
|
|
</main>);
|
|
}
|
|
}); |