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({
|
||||
propTypes: {
|
||||
|
@ -118,9 +120,24 @@ var FeaturedContentItem = React.createClass({
|
|||
metadata: null,
|
||||
title: null,
|
||||
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() {
|
||||
lbry.search(this.props.name, (results) => {
|
||||
var result = results[0];
|
||||
|
@ -140,9 +157,16 @@ var FeaturedContentItem = React.createClass({
|
|||
return null;
|
||||
}
|
||||
|
||||
return <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} />;
|
||||
//@TODO: Make this check the "show NSFW" setting once it's implemented
|
||||
|
||||
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