LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Make search result tiles use new Lighthouse cost reporting

Browse source 
Featured/Community Content and regular search results now calculate
cost the same way, so instead of calculating the cost in the outer
component we now do it inside <SearchResultRow /> itself.
This commit is contained in:
Alex Liebowitz 2016-12-07 18:03:16 -05:00
parent d9a4442cc3
commit 34a7d41dc7
1 changed files with 31 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
js/page/discover.js
View file

@ -46,8 +46,7 @@ var SearchResults = React.createClass({
var mediaType = lbry.getMediaType(result.value.content_type);
rows.push(
<SearchResultRow key={result.name} name={result.name} title={result.value.title} imgUrl={result.value.thumbnail}
description={result.value.description} cost={result.cost} nsfw={result.value.nsfw}
mediaType={mediaType} />
description={result.value.description} nsfw={result.value.nsfw} mediaType={mediaType} />
);
});
return (
@ -93,6 +92,8 @@ var SearchResultRow = React.createClass({
return {
downloading: false,
isHovered: false,
cost: null,
costIncludesData: null,
}
},
handleMouseOver: function() {
@ -105,6 +106,21 @@ var SearchResultRow = React.createClass({
isHovered: false,
});
},
componentWillMount: function() {
if ('cost' in this.props) {
this.setState({
cost: this.props.cost,
costIncludesData: this.props.costIncludesData,
});
} else {
lbry.getCostInfoForName(this.props.name, ({cost, includesData}) => {
this.setState({
cost: cost,
costIncludesData: includesData,
});
});
}
},
render: function() {
var obscureNsfw = !lbry.getClientSetting('showNsfw') && this.props.nsfw;
if (!this.props.compact) {
@ -122,9 +138,9 @@ var SearchResultRow = React.createClass({
<a href={'/?show=' + this.props.name}><Thumbnail src={this.props.imgUrl} alt={'Photo for ' + (this.props.title || this.props.name)} style={searchRowImgStyle} /></a>
</div>
<div className="span9">
{'cost' in this.props
{this.state.cost !== null
? <span style={searchRowCostStyle}>
<CreditAmount amount={this.props.cost} isEstimate={!this.props.available}/>
<CreditAmount amount={this.state.cost} isEstimate={!this.state.costIncludesData}/>
</span>
: null}
<div className="meta"><a href={'/?show=' + this.props.name}>lbry://{this.props.name}</a></div>
@ -185,21 +201,18 @@ var FeaturedContentItem = React.createClass({
},
componentDidMount: function() {
this.resolveSearch = true;
this._isMounted = true;
lighthouse.search(this.props.name, function(results) {
var result = results[0];
var metadata = result.value;
if (this.resolveSearch)
{
this.setState({
metadata: metadata,
amount: result.cost,
available: result.available,
title: metadata && metadata.title ? metadata.title : ('lbry://' + this.props.name),
});
lbry.resolveName(this.props.name, (metadata) => {
if (!this._isMounted) {
return;
}
}.bind(this));
this.setState({
metadata: metadata,
title: metadata && metadata.title ? metadata.title : ('lbry://' + this.props.name),
});
});
},
render: function() {
@ -208,11 +221,10 @@ var FeaturedContentItem = React.createClass({
return null;
}
const costProp = this.state.cost === null ? {} : {cost: this.state.cost}
return (<div style={featuredContentItemContainerStyle}>
<SearchResultRow name={this.props.name} title={this.state.title} imgUrl={this.state.metadata.thumbnail}
description={this.state.metadata.description} mediaType={lbry.getMediaType(this.state.metadata.content_type)}
nsfw={this.state.metadata.nsfw} compact {... costProp} />
nsfw={this.state.metadata.nsfw} compact />
</div>);
}
});