more file tile refactor and fix file info unsubscribe

js/component/common.js

@@ -124,7 +124,7 @@ export let Thumbnail = React.createClass({
   _isMounted: false,
 
   propTypes: {
-    src: React.PropTypes.string.isRequired,
+    src: React.PropTypes.string,
   },
   handleError: function() {
     if (this.state.imageUrl != this._defaultImageUri) {

js/component/file-actions.js

@@ -168,7 +168,7 @@ export let FileActions = React.createClass({
   componentWillUnmount: function() {
     this._isMounted = false;
     if (this._fileInfoSubscribeId) {
-      lbry.fileInfoUnsubscribe(this.props.name, this._fileInfoSubscribeId);
+      lbry.fileInfoUnsubscribe(this.props.streamName, this._fileInfoSubscribeId);
     }
   },
   render: function() {

js/component/file-tile.js

@@ -49,11 +49,10 @@ let FilePrice = React.createClass({
   }
 });
 
-let FileTile = React.createClass({
+/*should be merged into FileTile once FileTile is refactored to take a single id*/
-  _isMounted: false,
+let FileTileStream = React.createClass({
-
   propTypes: {
-    name: React.PropTypes.string,
+    metadata: React.PropTypes.object,
     sdHash: React.PropTypes.string,
     showPrice: React.PropTypes.bool,
     obscureNsfw: React.PropTypes.bool,
@@ -62,12 +61,11 @@ let FileTile = React.createClass({
 
   getInitialState: function() {
     return {
-      metadata: null,
-      title: null,
       showNsfwHelp: false,
       isRemoved: false
     }
   },
+
   getDefaultProps: function() {
     return {
       hideOnRemove: false,
@@ -76,7 +74,7 @@ let FileTile = React.createClass({
     }
   },
   handleMouseOver: function() {
-    if (this.props.obscureNsfw && this.state.metadata && this.state.metadata.nsfw) {
+    if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) {
       this.setState({
         showNsfwHelp: true,
       });
@@ -94,34 +92,20 @@ let FileTile = React.createClass({
       isRemoved: true,
     });
   },
-  componentDidMount: function() {
-    this._isMounted = true;
-
-    lbry.resolveName(this.props.name, (metadata) => {
-      if (this._isMounted) {
-        this.setState({
-          metadata: metadata,
-          title: metadata && metadata.title ? metadata.title : ('lbry://' + this.props.name),
-        });
-      }
-    });
-  },
-  componentWillUnmount: function() {
-    this._isMounted = false;
-  },
   render: function() {
-    if (this.state.metadata === null || (this.props.hideOnRemove && this.state.isRemoved)) {
+    if (this.props.metadata === null || (this.props.hideOnRemove && this.state.isRemoved)) {
       return null;
     }
 
-    const obscureNsfw = this.props.obscureNsfw && this.state.metadata.nsfw;
+    const metadata = this.props.metadata || {},
-
+          obscureNsfw = this.props.obscureNsfw && metadata.nsfw,
+          title =  metadata.title ? metadata.title : ('lbry://' + this.props.name);
 
     return (
       <section className={ 'file-tile card ' + (obscureNsfw ? 'card-obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
         <div className="row-fluid card-content file-tile__row">
           <div className="span3">
-            <a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={this.state.metadata.thumbnail} alt={'Photo for ' + (this.state.metadata.title || this.props.name)} /></a>
+            <a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + (title || this.props.name)} /></a>
           </div>
           <div className="span9">
             { this.props.showPrice
@@ -131,29 +115,67 @@ let FileTile = React.createClass({
             <h3 className="file-tile__title">
               <a href={'/?show=' + this.props.name}>
                 <TruncatedText lines={2}>
-                  {this.state.metadata.title}
+                  {title}
                 </TruncatedText>
               </a>
             </h3>
-            <FileActions streamName={this.props.name} metadata={this.state.metadata} />
+            <FileActions streamName={this.props.name} metadata={metadata} />
             <p className="file-tile__description">
               <TruncatedText lines={3}>
-                {this.state.metadata.description}
+                {metadata.description}
               </TruncatedText>
             </p>
           </div>
         </div>
         {this.state.showNsfwHelp
           ? <div className='card-overlay'>
-              <p>
+           <p>
-                This content is Not Safe For Work.
+             This content is Not Safe For Work.
-                To view adult content, please change your <Link href="?settings" label="Settings" />.
+             To view adult content, please change your <Link href="?settings" label="Settings" />.
-              </p>
+           </p>
-            </div>
+         </div>
           : null}
       </section>
     );
   }
 });
 
+let FileTile = React.createClass({
+  _isMounted: false,
+
+  propTypes: {
+    name: React.PropTypes.string
+  },
+
+  getInitialState: function() {
+    return {
+      sdHash: null,
+      metadata: null
+    }
+  },
+
+  componentDidMount: function() {
+    this._isMounted = true;
+
+    lbry.resolveName(this.props.name, (metadata) => {
+      if (this._isMounted) {
+        this.setState({
+          sdHash: metadata.sources.lbry_sd_hash,
+          metadata: metadata,
+        });
+      }
+    });
+  },
+  componentWillUnmount: function() {
+    this._isMounted = false;
+  },
+  render: function() {
+    if (this.state.metadata === null || this.state.sdHash === null) {
+      return null;
+    }
+
+    return <FileTileStream name={this.props.name} sdHash={this.state.sdHash} metadata={this.state.metadata} />;
+  }
+});
+
 export default FileTile;

js/lbry.js

@@ -506,7 +506,7 @@ lbry.fileInfoSubscribeByName = function(name, callback) {
 // }
 
 lbry.fileInfoUnsubscribe = function(name, subscribeId) {
-  delete lbry._fileInfoSubscribeCallbacks[name][subscribeId];
+  lbry._fileInfoSubscribeCallbacks[name] = lbry._fileInfoSubscribeCallbacks[name].splice(subscribeId, 1);
 }
 
 export default lbry;

js/page/discover.js

@@ -44,7 +44,7 @@ var SearchResults = React.createClass({
     var rows = [];
     this.props.results.forEach(function({name, value}) {
       rows.push(
-        <FileTile key={name} name={name} sdHash={value.sources.lbry_sd_hash} metadata={value} />
+        <FileTile key={name} name={name} />
       );
     });
     return (