move nsfw logic lower, more semantic, handle search unmount

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) {
+      console.log(result);
-        rows.push(
+      rows.push(
-          <SearchResultRow key={result.name} name={result.name} title={result.value.title} imgUrl={result.value.thumbnail}
+        <SearchResultRow key={result.name} name={result.name} title={result.value.title} imgUrl={result.value.thumbnail}
-                           description={result.value.description} cost={result.cost} />
+                         description={result.value.description} cost={result.cost} nsfw={result.value.nsfw} />
-        );
+      );
-      }
     });
     return (
       <div>{rows}</div>
@@ -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 (
-
+      <section className={ 'card ' + (obscureNsfw ? 'card-obscured' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
-      <section className="card">
+        <div className="row-fluid card-content" style={searchRowStyle}>
-        <div className="row-fluid" style={searchRowStyle}>
           <div className="span3">
             <img src={this.props.imgUrl} alt={'Photo for ' + (this.props.title || this.props.name)} style={searchRowImgStyle} />
           </div>
@@ -102,6 +111,15 @@ var SearchResultRow = React.createClass({
             <p style={searchRowDescriptionStyle}>{this.props.description}</p>
           </div>
         </div>
+        {
+          !obscureNsfw || !this.state.isHovered ? null :
+            <div className='card-overlay'>
+              <p>
+                This content is Not Safe For Work.
+                To view adult content, please change your <Link href="?settings" label="Settings" />.
+              </p>
+            </div>
+        }
       </section>
     );
   }
@@ -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() {
+  componentWillUnmount: function() {
-    if (this.state.metadata && this.state.metadata.nsfw) {
+    this.resolveSearch = false;
-      this.setState({
-        overlayShowing: true,
-      });
-    }
   },
 
-  handleMouseOut: function() {
+  componentDidMount: function() {
-    this.setState({
+    this.resolveSearch = true;
-      overlayShowing: false,
-    });
-  },
 
-  componentWillMount: function() {
+    lbry.search(this.props.name, function(results) {
-    lbry.search(this.props.name, (results) => {
       var result = results[0];
       var metadata = result.value;
-      this.setState({
+      if (this.resolveSearch)
-        metadata: metadata,
+      {
-        amount: result.cost,
+        this.setState({
-        available: result.available,
+          metadata: metadata,
-        title: metadata && metadata.title ? metadata.title : ('lbry://' + this.props.name),
+          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']))) {
+    if (this.state.metadata === null) {
-      // Still waiting for metadata, or item is NSFW
+      // Still waiting for metadata, skip render
       return null;
     }
 
-    var blur = !lbry.getClientSetting('showNsfw') && this.state.metadata.nsfw;
+    return (<div style={featuredContentItemContainerStyle}>
-
+      <SearchResultRow name={this.props.name} title={this.state.title} imgUrl={this.state.metadata.thumbnail}
-    return (<div style={featuredContentItemContainerStyle} onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
+                 description={this.state.metadata.description} cost={this.state.amount} nsfw={this.state.metadata.nsfw}
-      <div className={blur ? 'blur' : ''}>
+                 available={this.state.available} />
-        <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>);
   }
 });
@@ -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({

js/page/settings.js

@@ -109,9 +109,12 @@ var SettingsPage = React.createClass({
         </section>
         <section className="card">
           <h3>Content</h3>
-          <label style={settingsCheckBoxOptionStyles}>
+          <div className="form-row">
-            <input type="checkbox" onChange={this.onShowNsfwChange} defaultChecked={this.state.showNsfw} /> Include Not Safe For Work content in search results and Commmunity Content
+            <label style={settingsCheckBoxOptionStyles}>
-          </label>
+              <input type="checkbox" onChange={this.onShowNsfwChange} defaultChecked={this.state.showNsfw} /> Show NSFW Content
+            </label>
+            <div className="help">NSFW content may include nudity, intense sexuality, profanity, or other adult content.</div>
+          </div>
         </section>
         <section className="card">
           <h3>Share Diagnostic Data</h3>

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
 {

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;