Merge pull request #142 from lbryio/unavailable-content-bugfixes

Unavailable content bugfixes

js/component/file-actions.js

@@ -176,7 +176,7 @@ let FileActionsRow = React.createClass({
       const
         progress = this.state.fileInfo ? this.state.fileInfo.written_bytes / this.state.fileInfo.total_bytes * 100 : 0,
         label = this.state.fileInfo ? progress.toFixed(0) + '% complete' : 'Connecting...',
-        labelWithIcon = <span className="button__content"><Icon icon="icon-download" />{label}</span>;
+        labelWithIcon = <span className="button__content"><Icon icon="icon-download" /><span>{label}</span></span>;
 
       linkBlock = (
         <div className="faux-button-block file-actions__download-status-bar">
@@ -185,7 +185,7 @@ let FileActionsRow = React.createClass({
         </div>
       );
     } else {
-      linkBlock = <Link button="text" label="Open" icon="icon-folder-open" onClick={this.onOpenClick} />;
+      linkBlock = <Link label="Open" icon="icon-folder-open" onClick={this.onOpenClick} />;
     }
 
     return (
@@ -263,7 +263,7 @@ export let FileActions = React.createClass({
            <div className="button-container empty">This file is not currently available.</div>
            <div className="button-container">
              <ToolTip label="Why?"
-                      body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment" />
+                      body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment." />
            </div>
            <div className="button-container">
              <Link label="Try Anyway" className="button-text" onClick={this.onShowFileActionsRowClicked} />

js/component/link.js

@@ -28,26 +28,27 @@ export let Link = React.createClass({
     /* The way the class name is generated here is a mess -- refactor */
 
     const className = (this.props.className || '') +
-      (this.props.button ? ' button-block button-' + this.props.button : '') +
+      (!this.props.className && !this.props.button ? 'button-block button-text' : '') + // Non-button links get the same look as text buttons
+      (this.props.button ? 'button-block button-' + this.props.button : '') +
       (this.props.disabled ? ' disabled' : '');
 
     let content;
     if (this.props.children) { // Custom content
       content = this.props.children;
     } else {
-      content = [
+      content = (
-        'icon' in this.props ? <Icon icon={this.props.icon} fixed={true} /> : null,
+        <span {... 'button' in this.props ? {className: 'button__content'} : {}}>
-         <span className="link-label">{this.props.label}</span>,
+          {'icon' in this.props ? <Icon icon={this.props.icon} fixed={true} /> : null}
-        'badge' in this.props ? <span className="badge">{this.props.badge}</span> : null,
+          {<span className="link-label">{this.props.label}</span>}
-      ];
+          {'badge' in this.props ? <span className="badge">{this.props.badge}</span> : null}
+        </span>
+      );
     }
 
     return (
       <a className={className} href={this.props.href || 'javascript:;'} title={this.props.title}
          onClick={this.handleClick} {... 'style' in this.props ? {style: this.props.style} : {}}>
-         {('button' in this.props) && this.props.button != 'text'
+        {content}
-           ? <span className="button__content">{content}</span>
-           : content}
       </a>
     );
   }

js/lbry.js

@@ -5,6 +5,7 @@ var lbry = {
   rootPath: '.',
   daemonConnectionString: 'http://localhost:5279/lbryapi',
   webUiUri: 'http://localhost:5279',
+  peerListTimeout: 6000,
   colors: {
     primary: '#155B4A'
   },
@@ -190,7 +191,18 @@ lbry.getTotalCost = function(name, size, callback) {
 }
 
 lbry.getPeersForBlobHash = function(blobHash, callback) {
-  lbry.call('get_peers_for_hash', { blob_hash: blobHash }, callback)
+  let timedOut = false;
+  const timeout = setTimeout(() => {
+    timedOut = true;
+    callback([]);
+  }, lbry.peerListTimeout);
+
+  lbry.call('peer_list', { blob_hash: blobHash }, function(peers) {
+    if (!timedOut) {
+      clearTimeout(timeout);
+      callback(peers);
+    }
+  });
 }
 
 lbry.getCostInfoForName = function(name, callback) {

scss/_global.scss

@@ -3,6 +3,7 @@
 $spacing-vertical: 24px;
 
 $padding-button: 12px;
+$padding-text-link: 4px;
 
 $color-primary: #155B4A;
 $color-light-alt: hsl(hue($color-primary), 15, 85);

scss/_gui.scss

@@ -198,6 +198,10 @@ input[type="text"], input[type="search"]
 {
   @include text-link();
   display: inline-block;
+
+  .button__content {
+    margin: 0 $padding-text-link;
+  }
 }
 .button-text-help
 {

scss/component/_file-actions.scss

@@ -8,6 +8,12 @@ $color-download: #444;
   min-height: $height-button;
 }
 
+.file-actions__download-status-bar, .file-actions__download-status-bar-overlay {
+   .button__content {
+     margin: 0 $padding-text-link;
+   }
+}
+
 .file-actions__download-status-bar
 {
   position: relative;

scss/component/_menu.scss

@@ -10,6 +10,7 @@ $border-radius-menu: 2px;
   border-radius: $border-radius-menu;
   padding-top: $spacing-vertical / 2;
   padding-bottom: $spacing-vertical / 2;
+  z-index: 1;
 }
 
 .menu__menu-item {