Merge pull request #148 from lbryio/published-file-tile-fixes

Fix bugs in display of published files

js/component/file-actions.js

@@ -232,6 +232,7 @@ export let FileActions = React.createClass({
     return {
       available: true,
       forceShowActions: false,
+      fileInfo: null,
     }
   },
   onShowFileActionsRowClicked: function() {
@@ -239,8 +240,14 @@ export let FileActions = React.createClass({
       forceShowActions: true,
     });
   },
+  onFileInfoUpdate: function(fileInfo) {
+    this.setState({
+      fileInfo: fileInfo,
+    });
+  },
   componentDidMount: function() {
     this._isMounted = true;
+    this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.sdHash, this.onFileInfoUpdate);
     lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
       if (!this._isMounted) {
         return;
@@ -255,11 +262,16 @@ export let FileActions = React.createClass({
     this._isMounted = false;
   },
   render: function() {
+    const fileInfo = this.state.fileInfo;
+    if (fileInfo === null) {
+      return null;
+    }
+
     return (<section className="file-actions">
       {
-        this.state.available || this.state.forceShowActions ?
+        fileInfo || this.state.available || this.state.forceShowActions
-         <FileActionsRow sdHash={this.props.sdHash} metadata={this.props.metadata} streamName={this.props.streamName} /> :
+          ? <FileActionsRow sdHash={this.props.sdHash} metadata={this.props.metadata} streamName={this.props.streamName} />
-         (<div>
+          : <div>
               <div className="button-container empty">This file is not currently available.</div>
               <div className="button-container">
                 <ToolTip label="Why?"
@@ -268,7 +280,7 @@ export let FileActions = React.createClass({
               <div className="button-container">
                 <Link label="Try Anyway" onClick={this.onShowFileActionsRowClicked} />
               </div>
-         </div>)
+            </div>
       }
     </section>);
   }

js/component/file-tile.js

@@ -113,20 +113,21 @@ export let FileTileStream = React.createClass({
       return null;
     }
 
-    const metadata = this.props.metadata || {},
+    const metadata = this.props.metadata;
-          obscureNsfw = this.props.obscureNsfw && metadata.nsfw,
+    const isConfirmed = typeof metadata == 'object';
-          title = metadata.title ? metadata.title : ('lbry://' + this.props.name);
+    const title = isConfirmed ? metadata.title : this.props.name;
+    const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
     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={metadata.thumbnail} alt={'Photo for ' + (title || this.props.name)} /></a>
+            <a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={`Photo for ${title}`} /></a>
           </div>
           <div className="span9">
             { !this.props.hidePrice
               ? <FilePrice name={this.props.name} />
               : null}
-            <div className="meta"><a href={'/?show=' + this.props.name}>lbry://{this.props.name}</a></div>
+            <div className="meta"><a href={'/?show=' + this.props.name}>{isConfirmed ? metadata.title : ('lbry://' + this.props.name)}</a></div>
             <h3 className="file-tile__title">
               <a href={'/?show=' + this.props.name}>
                 <TruncatedText lines={1}>
@@ -137,7 +138,9 @@ export let FileTileStream = React.createClass({
             <FileActions streamName={this.props.name} sdHash={this.props.sdHash} metadata={metadata} />
             <p className="file-tile__description">
               <TruncatedText lines={3}>
-                {metadata.description}
+                {isConfirmed
+                   ? metadata.description
+                   : <span className="empty">This file is pending confirmation.</span>}
               </TruncatedText>
             </p>
           </div>