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:
Alex Liebowitz 2016-08-22 08:00:58 -04:00
parent 13f7f1995e
commit 3edc93c842

View file

@ -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}
//@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} />;
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>);
}
});