Add setting to hide unavailable content

js/component/file-tile.js

@@ -64,7 +64,8 @@ export let FileTileStream = React.createClass({
   getInitialState: function() {
     return {
       showNsfwHelp: false,
-      isHidden: false
+      isHidden: false,
+      available: null,
     }
   },
   getDefaultProps: function() {
@@ -73,6 +74,15 @@ export let FileTileStream = React.createClass({
       hidePrice: false
     }
   },
+  componentWillMount: function() {
+    if (!('available' in this.props)) {
+      lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
+        this.setState({
+          available: peers.length > 0,
+        });
+      });
+    }
+  },
   componentDidMount: function() {
     this._isMounted = true;
     if (this.props.hideOnRemove) {
@@ -84,6 +94,9 @@ export let FileTileStream = React.createClass({
       lbry.fileInfoUnsubscribe(this.props.sdHash, this._fileInfoSubscribeId);
     }
   },
+  isAvailable: function() {
+    return 'available' in this.props ? this.props.available : this.state.available;
+  },
   onFileInfoUpdate: function(fileInfo) {
     if (!fileInfo && this._isMounted && this.props.hideOnRemove) {
       this.setState({
@@ -106,7 +119,7 @@ export let FileTileStream = React.createClass({
     }
   },
   render: function() {
-    if (this.state.isHidden) {
+    if (this.state.isHidden || (!lbry.getClientSetting('showUnavailable') && !this.isAvailable())) {
       return null;
     }
 
@@ -157,7 +170,8 @@ export let FileTile = React.createClass({
   _isMounted: false,
 
   propTypes: {
-    name: React.PropTypes.string.isRequired
+    name: React.PropTypes.string.isRequired,
+    available: React.PropTypes.bool,
   },
 
   getInitialState: function() {
@@ -187,6 +201,7 @@ export let FileTile = React.createClass({
       return null;
     }
 
-    return <FileTileStream name={this.props.name} sdHash={this.state.sdHash} metadata={this.state.metadata} />;
+    return <FileTileStream name={this.props.name} available={this.props.available} sdHash={this.state.sdHash}
+                           metadata={this.state.metadata} />;
   }
 });

js/page/discover.js

@@ -43,11 +43,11 @@ var SearchResults = React.createClass({
   render: function() {
     var rows = [],
         seenNames = {}; //fix this when the search API returns claim IDs
-    this.props.results.forEach(function({name, value}) {
+    this.props.results.forEach(function({name, peer_count}) {
       if (!seenNames[name]) {
         seenNames[name] = name;
         rows.push(
-          <FileTile key={name} name={name} />
+          <FileTile key={name} name={name} available={peer_count > 0} />
         );
       }
     });

js/page/settings.js

@@ -51,7 +51,8 @@ var SettingsPage = React.createClass({
   getInitialState: function() {
     return {
       settings: null,
-      showNsfw: lbry.getClientSetting('showNsfw')
+      showNsfw: lbry.getClientSetting('showNsfw'),
+      showUnavailable: lbry.getClientSetting('showUnavailable'),
     }
   },
   componentDidMount: function() {
@@ -69,6 +70,9 @@ var SettingsPage = React.createClass({
   onShowNsfwChange: function(event) {
     lbry.setClientSetting('showNsfw', event.target.checked);
   },
+  onShowUnavailableChange: function(event) {
+    lbry.setClientSetting('showUnavailable', event.target.checked);
+  },
   render: function() {
     if (!this.state.daemonSettings) {
       return null;
@@ -114,7 +118,7 @@ var SettingsPage = React.createClass({
           <h3>Content</h3>
           <div className="form-row">
             <label style={settingsCheckBoxOptionStyles}>
-              <input type="checkbox" onChange={this.onShowNsfwChange} defaultChecked={this.state.showNsfw} /> Show NSFW Content
+              <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.
@@ -122,6 +126,17 @@ var SettingsPage = React.createClass({
             </div>
           </div>
         </section>
+        <section className="card">
+          <h3>Search</h3>
+          <div className="form-row">
+          <div className="help">
+            Would you like search results to include items that are not currently available for download?
+          </div>
+          <label style={settingsCheckBoxOptionStyles}>
+            <input type="checkbox" onChange={this.onShowUnavailableChange} defaultChecked={this.state.showUnavailable} /> Show unavailable content in search results
+          </label>
+          </div>
+        </section>
         <section className="card">
           <h3>Share Diagnostic Data</h3>
           <label style={settingsCheckBoxOptionStyles}>