Merge pull request #95 from lbryio/watch-download-link-improvements

Improvements to Watch and Download links

js/component/link.js

@@ -103,32 +103,35 @@ var DownloadLink = React.createClass({
     })
   },
   handleClick: function() {
+    this.setState({
+      downloading: true
+    });
+
     lbry.getCostEstimate(this.props.streamName, (amount) => {
       lbry.getBalance((balance) => {
         if (amount > balance) {
           this.setState({
             modal: 'notEnoughCredits',
+            downloading: false
           });
         } else {
-          this.startDownload();
+          lbry.getStream(this.props.streamName, (streamInfo) => {
+            if (typeof streamInfo !== 'object') {
+              this.setState({
+                modal: 'timedOut',
+                downloading: false,
+              });
+            } else {
+              this.setState({
+                modal: 'downloadStarted',
+                filePath: streamInfo.path,
+              });
+            }
+          });
         }
       });
     });
   },
-  startDownload: function() {
-    if (!this.state.downloading) { //@TODO: Continually update this.state.downloading based on actual status of file
-      this.setState({
-        downloading: true
-      });
-
-      lbry.getStream(this.props.streamName, (streamInfo) => {
-        this.setState({
-          modal: 'downloadStarted',
-          filePath: streamInfo.path,
-        });
-      });
-    }
-  },
   render: function() {
     var label = (!this.state.downloading ? this.props.label : this.props.downloadingLabel);
     return (
@@ -141,6 +144,9 @@ var DownloadLink = React.createClass({
         <Modal isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
           You don't have enough LBRY credits to pay for this stream.
         </Modal>
+        <Modal isOpen={this.state.modal == 'timedOut'} onConfirmed={this.closeModal}>
+          LBRY was unable to download the stream <strong>lbry://{this.props.streamName}</strong>.
+        </Modal>
       </span>
     );
   }
@@ -156,11 +162,15 @@ var WatchLink = React.createClass({
     hidden: React.PropTypes.bool,
   },
   handleClick: function() {
+    this.setState({
+      loading: true,
+    })
     lbry.getCostEstimate(this.props.streamName, (amount) => {
       lbry.getBalance((balance) => {
         if (amount > balance) {
           this.setState({
             modal: 'notEnoughCredits',
+            loading: false,
           });
         } else {
           window.location = '?watch=' + this.props.streamName;
@@ -171,6 +181,7 @@ var WatchLink = React.createClass({
   getInitialState: function() {
     return {
       modal: null,
+      loading: false,
     };
   },
   closeModal: function() {
@@ -188,7 +199,8 @@ var WatchLink = React.createClass({
     return (
       <span className="button-container">
         <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
-                   label={this.props.label} icon={this.props.icon} onClick={this.handleClick} />
+              disabled={this.state.loading} label={this.props.label} icon={this.props.icon}
+              onClick={this.handleClick} />
         <Modal isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
           You don't have enough LBRY credits to pay for this stream.
         </Modal>

js/component/modal.js

@@ -49,7 +49,9 @@ var Modal = React.createClass({
 
     return (
       <ReactModal {...props}>
-         {this.props.children}
+         <div>
+           {this.props.children}
+         </div>
          {buttons}
       </ReactModal>
     );