LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Factor out DownloadLink and WatchLink into standalone components

Browse source
This commit is contained in:
Alex Liebowitz 2016-05-18 08:28:13 -04:00
parent 5b11964e59
commit ddb430c2c0
2 changed files with 76 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
js/component/common.js
View file

@ -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',

48
js/page/home.js
View file

@ -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" />
<Link onClick={this.startDownload} label={this.state.downloading ? "Downloading" : "Download"}
disabled={this.state.downloading} icon="icon-download" button="alt" />
<WatchLink streamName={this.props.name} button="primary" />
<DownloadLink streamName={this.props.name} 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"}
disabled={this.state.downloading} icon="icon-download" />
<DownloadLink streamName={this.props.name} />
<div style={featuredContentItemCostStyle}><CreditAmount amount={0.0} isEstimate={true}/></div>
</div>
</div>