Factor out DownloadLink and WatchLink into standalone components

js/component/common.js

@@ -27,6 +27,77 @@ var Link = React.createClass({
   }
 });
 
+var DownloadLink = React.createClass({
+  propTypes: {
+    type: React.PropTypes.string,
+    streamName: 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...',
+    }
+  },
+  getInitialState: function() {
+    return {
+      downloading: false,
+    }
+  },
+  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) => {
+        alert('Downloading to ' + streamInfo.path);
+        console.log(streamInfo);
+      });
+    }
+  },
+  render: function() {
+    var label = (!this.state.downloading ? this.props.label : this.props.downloadingLabel);
+    return <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.startDownload} />;
+  }
+});
+
+var WatchLink = React.createClass({
+  propTypes: {
+    type: React.PropTypes.string,
+    streamName: React.PropTypes.string,
+    label: React.PropTypes.string,
+    button: React.PropTypes.string,
+    style: React.PropTypes.object,
+    hidden: React.PropTypes.bool,
+  },
+
+  getDefaultProps: function() {
+    return {
+      icon: 'icon-play',
+      label: 'Watch',
+    }
+  },
+
+  render: function() {
+    // No support for lbry:// URLs in Windows or on Chrome yet
+    if (/windows|win32/i.test(navigator.userAgent) || (window.chrome && window.navigator.vendor == "Google Inc.")) {
+      var uri = "/?watch=" + this.props.streamName;
+    } else {
+      var uri = 'lbry://' + this.props.streamName;
+    }
+
+    return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
+                 href={uri} label={this.props.label} icon={this.props.icon} onClick={this.onClick} />;
+  }
+});
+
 var creditAmountStyle = {
   color: '#216C2A',
   fontWeight: 'bold',

js/page/home.js

@@ -92,26 +92,7 @@ var SearchResultRow = React.createClass({
       downloading: false
     }
   },
-  startDownload: function() {
-    if (!this.state.downloading) {
-      this.setState({
-        downloading: true
-      });
-      lbry.getStream(this.props.name, (streamInfo) => {
-        alert('Downloading ' + this.props.title + ' to ' + streamInfo.path);
-      });
-    }
-  },
   render: function() {
-    var displayURI = 'lbry://' + this.props.name;
-
-    // No support for lbry:// URLs in Windows or on Chrome yet
-    if (/windows|win32/i.test(navigator.userAgent) || (window.chrome && window.navigator.vendor == "Google Inc.")) {
-      var linkURI = "/?watch=" + this.props.name;
-    } else {
-      var linkURI = displayURI;
-    }
-
     return (
       <div className="row-fluid">
         <div className="span3">
@@ -122,12 +103,11 @@ var SearchResultRow = React.createClass({
             <CreditAmount amount={this.props.cost_est} isEstimate={true}/>
           </span>
           <h2>{this.props.title}</h2>
-          <div style={searchRowNameStyle}>{displayURI}</div>
+          <div style={searchRowNameStyle}>lbry://{this.props.name}</div>
           <p style={searchRowDescriptionStyle}>{this.props.description}</p>
           <div>
-            <Link href={linkURI} label="Watch" icon="icon-play" button="primary" />
+            <WatchLink streamName={this.props.name} button="primary" />
-            <Link onClick={this.startDownload} label={this.state.downloading ? "Downloading" : "Download"}
+            <DownloadLink streamName={this.props.name} button="alt" />
-                  disabled={this.state.downloading} icon="icon-download" button="alt" />
           </div>
         </div>
       </div>
@@ -164,16 +144,6 @@ var FeaturedContentItem = React.createClass({
   propTypes: {
     name: React.PropTypes.string,
   },
-  startDownload: function() {
-    if (!this.state.downloading) {
-      this.setState({
-        downloading: true
-      });
-      lbry.getStream(this.props.name, (streamInfo) => {
-        alert('Downloading ' + this._title + ' to ' + streamInfo.path);
-      });
-    }
-  },
   getInitialState: function() {
     return {
       metadata: null,
@@ -194,13 +164,6 @@ var FeaturedContentItem = React.createClass({
       return null;
     }
 
-    // No support for lbry:// URLs in Windows or on Chrome yet
-    if (/windows|win32/i.test(navigator.userAgent) || (window.chrome && window.navigator.vendor == "Google Inc.")) {
-      var watchUri = "/?watch=" + this.props.name;
-    } else {
-      var watchUri = 'lbry://' + this.props.name;
-    }
-
     var metadata = this.state.metadata;
 
     return (<div className="row-fluid" style={featuredContentItemStyle}>
@@ -211,10 +174,9 @@ var FeaturedContentItem = React.createClass({
         <h4>{this.state.title}</h4>
         <p style={featuredContentItemDescriptionStyle}>{metadata.description}</p>
         <div>
-          <Link href={watchUri} label="Watch" icon="icon-play" />
+          <WatchLink streamName={this.props.name} />
           { ' ' }
-          <Link onClick={this.startDownload} label={this.state.downloading ? "Downloading" : "Download"}
+          <DownloadLink streamName={this.props.name} />
-                disabled={this.state.downloading} icon="icon-download" />
           <div style={featuredContentItemCostStyle}><CreditAmount amount={0.0} isEstimate={true}/></div>
         </div>
       </div>