Blur NSFW content on home page
Also adds a mouse-over overlay explaining you can choose to show NSFW stuff on the Settings page (not implemented yet)
This commit is contained in:
parent
13f7f1995e
commit
3edc93c842
1 changed files with 28 additions and 4 deletions
|
@ -106,7 +106,9 @@ var SearchResultRow = React.createClass({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var featuredContentItemContainerStyle = {
|
||||||
|
position: 'relative',
|
||||||
|
};
|
||||||
|
|
||||||
var FeaturedContentItem = React.createClass({
|
var FeaturedContentItem = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
@ -118,9 +120,24 @@ var FeaturedContentItem = React.createClass({
|
||||||
metadata: null,
|
metadata: null,
|
||||||
title: null,
|
title: null,
|
||||||
amount: 0.0,
|
amount: 0.0,
|
||||||
|
overlayShowing: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handleMouseOver: function() {
|
||||||
|
if (this.state.metadata && this.state.metadata.nsfw) {
|
||||||
|
this.setState({
|
||||||
|
overlayShowing: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleMouseOut: function() {
|
||||||
|
this.setState({
|
||||||
|
overlayShowing: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
componentWillMount: function() {
|
componentWillMount: function() {
|
||||||
lbry.search(this.props.name, (results) => {
|
lbry.search(this.props.name, (results) => {
|
||||||
var result = results[0];
|
var result = results[0];
|
||||||
|
@ -140,9 +157,16 @@ var FeaturedContentItem = React.createClass({
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return <SearchResultRow name={this.props.name} title={this.state.title} imgUrl={this.state.metadata.thumbnail}
|
//@TODO: Make this check the "show NSFW" setting once it's implemented
|
||||||
description={this.state.metadata.description} cost={this.state.amount}
|
|
||||||
available={this.state.available} />;
|
return (<div style={featuredContentItemContainerStyle} onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
|
||||||
|
<div className={this.state.metadata.nsfw ? 'blur' : ''}>
|
||||||
|
<SearchResultRow name={this.props.name} title={this.state.title} imgUrl={this.state.metadata.thumbnail}
|
||||||
|
description={this.state.metadata.description} cost={this.state.amount}
|
||||||
|
available={this.state.available} />
|
||||||
|
</div>
|
||||||
|
{!this.state.overlayShowing ? null : <div className='translucent-overlay'><p>This content is Not Safe For Work. To show NSFW content in Community Content and search results, visit the <Link href="?settings" label="Settings page" /> and enable the option "Show NSFW content."</p></div>}
|
||||||
|
</div>);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue