General Featured Content improvements

This commit is contained in:
Alex Liebowitz 2016-07-04 21:55:58 -04:00
parent 597e450dd5
commit 2ad24c6b0d
3 changed files with 19 additions and 14 deletions

BIN
dist.zip

Binary file not shown.

View file

@ -79,7 +79,7 @@ var ClaimCodePage = React.createClass({
<section> <section>
<form> <form>
<section><label style={claimCodeLabelStyle} htmlFor="code">Invitation code</label><input name="code" ref="code" /></section> <section><label style={claimCodeLabelStyle} htmlFor="code">Invitation code</label><input name="code" ref="code" /></section>
<section><label style={claimCodeLabelStyle} htmlFor="email">Email (optional)</label><input name="email" ref="email" /></section> <section><label style={claimCodeLabelStyle} htmlFor="email">Email</label><input name="email" ref="email" /></section>
</form> </form>
</section> </section>
<section> <section>

View file

@ -118,13 +118,14 @@ var SearchResultRow = React.createClass({
var featuredContentItemStyle = { var featuredContentItemStyle = {
fontSize: '0.95em', fontSize: '0.95em',
marginBottom: '10px', marginBottom: '10px',
minHeight: '130px',
}, featuredContentItemImgStyle = { }, featuredContentItemImgStyle = {
maxHeight: '90px', maxHeight: '90px',
maxWidth: '126px',
display: 'block', display: 'block',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
marginTop: '5px', marginTop: '5px',
float: 'left',
}, featuredContentItemDescriptionStyle = { }, featuredContentItemDescriptionStyle = {
color: '#444', color: '#444',
marginBottom: '5px', marginBottom: '5px',
@ -143,6 +144,7 @@ var FeaturedContentItem = React.createClass({
return { return {
metadata: null, metadata: null,
title: null, title: null,
amount: 0.0,
}; };
}, },
componentWillMount: function() { componentWillMount: function() {
@ -152,6 +154,11 @@ var FeaturedContentItem = React.createClass({
title: metadata.title || ('lbry://' + this.props.name), title: metadata.title || ('lbry://' + this.props.name),
}) })
}); });
lbry.search(this.props.name, (results) => {
this.setState({
amount: results[0].cost_est
});
});
}, },
render: function() { render: function() {
if (this.state.metadata == null) { if (this.state.metadata == null) {
@ -173,7 +180,7 @@ var FeaturedContentItem = React.createClass({
<WatchLink streamName={this.props.name} /> <WatchLink streamName={this.props.name} />
{ ' ' } { ' ' }
<DownloadLink streamName={this.props.name} /> <DownloadLink streamName={this.props.name} />
<div style={featuredContentItemCostStyle}><CreditAmount amount={0.0} isEstimate={true}/></div> <div style={featuredContentItemCostStyle}><CreditAmount amount={this.state.amount} isEstimate={true}/></div>
</div> </div>
</div> </div>
</div>); </div>);
@ -189,17 +196,15 @@ var FeaturedContent = React.createClass({
return (<section style={featuredContentStyle}> return (<section style={featuredContentStyle}>
<h3>Featured content</h3> <h3>Featured content</h3>
<div className="row-fluid"> <div className="row-fluid">
<div className="span6"> <div className="span6">
<FeaturedContentItem name="wonderfullife" /> {/* When ready, change to one/two/three/four/five/six */} <FeaturedContentItem name="what" />
<FeaturedContentItem name="wonderfullife" /> <FeaturedContentItem name="keynesvhayek" />
<FeaturedContentItem name="wonderfullife" /> </div>
<div className="span6">
<FeaturedContentItem name="itsadisaster" />
<FeaturedContentItem name="meetlbry1" />
</div>
</div> </div>
<div className="span6">
<FeaturedContentItem name="wonderfullife" />
<FeaturedContentItem name="wonderfullife" />
<FeaturedContentItem name="wonderfullife" />
</div>
</div>
</section>); </section>);
} }
}); });
@ -268,7 +273,7 @@ var Discover = React.createClass({
{ this.state.searching ? <SearchActive /> : null } { this.state.searching ? <SearchActive /> : null }
{ !this.state.searching && this.state.query && this.state.results.length ? <SearchResults results={this.state.results} /> : null } { !this.state.searching && this.state.query && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
{ !this.state.searching && this.state.query && !this.state.results.length ? <SearchNoResults query={this.state.query} /> : null } { !this.state.searching && this.state.query && !this.state.results.length ? <SearchNoResults query={this.state.query} /> : null }
{/* !this.state.query && !this.state.searching ? <FeaturedContent /> : null */} { !this.state.query && !this.state.searching ? <FeaturedContent /> : null }
</main> </main>
); );
} }