diff --git a/js/page/discover.js b/js/page/discover.js index dfac10188..36b3a2e91 100644 --- a/js/page/discover.js +++ b/js/page/discover.js @@ -34,15 +34,13 @@ var SearchNoResults = React.createClass({ var SearchResults = React.createClass({ render: function() { - var showNsfw = lbry.getClientSetting('showNsfw'); var rows = []; this.props.results.forEach(function(result) { - if (showNsfw || !result.value.nsfw) { - rows.push( - - ); - } + console.log(result); + rows.push( + + ); }); return (
{rows}
@@ -78,14 +76,25 @@ var var SearchResultRow = React.createClass({ getInitialState: function() { return { - downloading: false + downloading: false, + isHovered: false, } }, + handleMouseOver: function() { + this.setState({ + isHovered: true, + }); + }, + handleMouseOut: function() { + this.setState({ + isHovered: false, + }); + }, render: function() { + var obscureNsfw = !lbry.getClientSetting('showNsfw') && this.props.nsfw; return ( - -
-
+
+
{'Photo
@@ -102,6 +111,15 @@ var SearchResultRow = React.createClass({

{this.props.description}

+ { + !obscureNsfw || !this.state.isHovered ? null : +
+

+ This content is Not Safe For Work. + To view adult content, please change your . +

+
+ }
); } @@ -112,6 +130,8 @@ var featuredContentItemContainerStyle = { }; var FeaturedContentItem = React.createClass({ + resolveSearch: false, + propTypes: { name: React.PropTypes.string, }, @@ -125,48 +145,38 @@ var FeaturedContentItem = React.createClass({ }; }, - handleMouseOver: function() { - if (this.state.metadata && this.state.metadata.nsfw) { - this.setState({ - overlayShowing: true, - }); - } + componentWillUnmount: function() { + this.resolveSearch = false; }, - handleMouseOut: function() { - this.setState({ - overlayShowing: false, - }); - }, + componentDidMount: function() { + this.resolveSearch = true; - componentWillMount: function() { - lbry.search(this.props.name, (results) => { + lbry.search(this.props.name, function(results) { var result = results[0]; var metadata = result.value; - this.setState({ - metadata: metadata, - amount: result.cost, - available: result.available, - title: metadata && metadata.title ? metadata.title : ('lbry://' + this.props.name), - }) - }); + if (this.resolveSearch) + { + this.setState({ + metadata: metadata, + amount: result.cost, + available: result.available, + title: metadata && metadata.title ? metadata.title : ('lbry://' + this.props.name), + }); + } + }.bind(this)); }, render: function() { - if (this.state.metadata == null || (this.state.metadata.nsfw && !(lbry.setSettings(settings)['show_nsfw']))) { - // Still waiting for metadata, or item is NSFW + if (this.state.metadata === null) { + // Still waiting for metadata, skip render return null; } - var blur = !lbry.getClientSetting('showNsfw') && this.state.metadata.nsfw; - - return (
-
- -
- {!this.state.overlayShowing ? null :

This content is Not Safe For Work. To show NSFW content in Community Content and search results, visit the and enable the option "Show NSFW content."

} + return (
+
); } }); @@ -237,10 +247,6 @@ var DiscoverPage = React.createClass({ }, searchCallback: function(results) { - console.log('results:', results) - console.log('search callback'); - console.log(this.state); - console.log(this.props); if (this.state.searching) //could have canceled while results were pending, in which case nothing to do { this.setState({ diff --git a/js/page/settings.js b/js/page/settings.js index f36429fad..8391cc829 100644 --- a/js/page/settings.js +++ b/js/page/settings.js @@ -109,9 +109,12 @@ var SettingsPage = React.createClass({

Content

- +
+ +
NSFW content may include nudity, intense sexuality, profanity, or other adult content.
+

Share Diagnostic Data

diff --git a/scss/_canvas.scss b/scss/_canvas.scss index 0a9ae7f26..2e8f0cc27 100644 --- a/scss/_canvas.scss +++ b/scss/_canvas.scss @@ -157,6 +157,30 @@ $header-icon-size: 1.5em; box-shadow: $default-box-shadow; border-radius: 2px; } +.card-obscured +{ + position: relative; +} +.card-obscured .card-content { + -webkit-filter: blur($blur-intensity); + -moz-filter: blur($blur-intensity); + -o-filter: blur($blur-intensity); + -ms-filter: blur($blur-intensity); + filter: blur($blur-intensity); +} +.card-overlay { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + padding: 20px; + background-color: rgba(128, 128, 128, 0.8); + color: #fff; + display: flex; + align-items: center; + font-weight: 600; +} .card-series-submit { diff --git a/scss/_gui.scss b/scss/_gui.scss index 40997c37a..dc3e19585 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -190,28 +190,6 @@ input[type="text"], input[type="search"], textarea top: 0.16em; } -.blur { - -webkit-filter: blur($blur-intensity); - -moz-filter: blur($blur-intensity); - -o-filter: blur($blur-intensity); - -ms-filter: blur($blur-intensity); - filter: blur($blur-intensity); -} - -.translucent-overlay { - position: absolute; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; - padding: 5%; - background-color: rgba(210, 210, 210, 0.8); - color: #fff; - display: flex; - align-items: center; - font-weight: 600; -} - .help { font-size: .85em; color: $color-help;