Add support for displaying progress in DownloadLink

js/component/link.js

@@ -83,22 +83,20 @@ export let DownloadLink = React.createClass({
   propTypes: {
     type: React.PropTypes.string,
     streamName: React.PropTypes.string,
+    sdHash: React.PropTypes.string,
     label: React.PropTypes.string,
-    downloadingLabel: React.PropTypes.string,
     button: React.PropTypes.string,
-    style: React.PropTypes.object,
     hidden: React.PropTypes.bool,
   },
   getDefaultProps: function() {
     return {
       icon: 'icon-download',
       label: 'Download',
-      downloadingLabel: 'Downloading...',
+      downloading: false,
     }
   },
   getInitialState: function() {
     return {
-      downloading: false,
       filePath: null,
       modal: null,
     }
@@ -109,23 +107,17 @@ export let DownloadLink = React.createClass({
     })
   },
   handleClick: function() {
-    this.setState({
-      downloading: true
-    });
-
     lbry.getCostInfoForName(this.props.streamName, ({cost}) => {
       lbry.getBalance((balance) => {
         if (cost > balance) {
           this.setState({
             modal: 'notEnoughCredits',
-            downloading: false
           });
         } else {
           lbry.getStream(this.props.streamName, (streamInfo) => {
             if (streamInfo === null || typeof streamInfo !== 'object') {
               this.setState({
                 modal: 'timedOut',
-                downloading: false,
               });
             } else {
               this.setState({
@@ -139,11 +131,15 @@ export let DownloadLink = React.createClass({
     });
   },
   render: function() {
-    var label = (!this.state.downloading ? this.props.label : this.props.downloadingLabel);
+    const label = 'progress' in this.props ? `${parseInt(this.props.progress * 100)}% complete` : this.props.label;
     return (
       <span className="button-container">
-        <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
-              disabled={this.state.downloading} label={label} icon={this.props.icon} onClick={this.handleClick} />
+        <Link className="button-download" button={this.props.button} hidden={this.props.hidden} label={label}
+              icon={this.props.icon} onClick={this.handleClick} />
+        {'progress' in this.props
+          ? <Link className="button-download button-download--mirror" button={this.props.button} hidden={this.props.hidden} label={label}
+                  icon={this.props.icon} onClick={this.handleClick} style={{width: `${this.props.progress * 100}%`}} />
+          : null}
         <Modal className="download-started-modal" isOpen={this.state.modal == 'downloadStarted'}
                contentLabel="Download started" onConfirmed={this.closeModal}>
           <p>Downloading to:</p>
@@ -168,7 +164,6 @@ export let WatchLink = React.createClass({
     streamName: React.PropTypes.string,
     label: React.PropTypes.string,
     button: React.PropTypes.string,
-    style: React.PropTypes.object,
     hidden: React.PropTypes.bool,
   },
   handleClick: function() {
@@ -207,7 +202,7 @@ export let WatchLink = React.createClass({
   },
   render: function() {
     return (
-      <span className="button-container">
+      <div className="button-container">
         <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
               disabled={this.state.loading} label={this.props.label} icon={this.props.icon}
               onClick={this.handleClick} />
@@ -215,7 +210,7 @@ export let WatchLink = React.createClass({
                onConfirmed={this.closeModal}>
           You don't have enough LBRY credits to pay for this stream.
         </Modal>
-      </span>
+      </div>
     );
   }
 });

scss/_gui.scss

@@ -1,6 +1,6 @@
 @import "global";
 
-@mixin text-link($color: $color-primary, $hover-opacity: 0.70) {
+@mixin text-link($color: $color-primary, $hover-opacity: 0.70, $mirror: false) {
   color: $color;
   .icon
   {
@@ -27,6 +27,19 @@
       text-decoration: none;
     }
   }
+
+  @if $mirror == false {
+    color: $color;
+  }
+  @else {
+    color: $color-bg;
+    background-color: $color;
+    position: absolute;
+    white-space: nowrap;
+    overflow: hidden;
+    top: 0px;
+    left: 0px;
+  }
 }
 
 .icon-fixed-width {
@@ -138,6 +151,9 @@ input[type="text"], input[type="search"]
 }
 
 .button-container {
+  position: relative;
+  display: inline-block;
+
   + .button-container
   {
     margin-left: 12px;
@@ -182,6 +198,19 @@ input[type="text"], input[type="search"]
   box-shadow: $default-box-shadow;
   padding: 0 12px;
 }
+.button-download
+{
+  padding: 0 6px;
+
+  text-decoration: none !important;
+
+  &:not(.button-download--mirror) {
+    @include text-link(darken($color-primary, 1%));
+  }
+  &.button-download--mirror {
+    @include text-link(darken($color-primary, 1%), $mirror: true);
+  }
+}
 .button-cancel
 {
   padding: 0 12px;