Merge pull request #7 from lbryio/featured-content-support
Featured content support
This commit is contained in:
alexliebowitz
commit
409be530c3
4 changed files with 183 additions and 44 deletions
|
|
@ -28,6 +28,76 @@ 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} />;
|
||||
}
|
||||
});
|
||||
|
||||
// Generic menu styles
|
||||
var menuStyle = {
|
||||
border: '1px solid #aaa',
|
||||
|
|
@ -64,8 +134,9 @@ var Menu = React.createClass({
|
|||
window.removeEventListener('click', this.handleWindowClick, false);
|
||||
},
|
||||
render: function() {
|
||||
console.log('menuStyle is', menuStyle);
|
||||
return (
|
||||
<div ref='div' style={menuStyle} className={this.state.open ? '' : 'hidden'}>
|
||||
<div ref='div' style={menuStyle} className={this.state.open ? 'thediv' : 'hidden'}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -95,6 +95,10 @@ lbry.search = function(query, callback)
|
|||
lbry.call("search_nametrie", { "search": query }, callback);
|
||||
}
|
||||
|
||||
lbry.resolveName = function(name, callback, ec) {
|
||||
lbry.call('resolve_name', { 'name': name }, callback);
|
||||
}
|
||||
|
||||
lbry.getStream = function(name, callback) {
|
||||
lbry.call('get', { 'name': name }, callback);
|
||||
};
|
||||
|
|
|
|||
120
js/page/home.js
120
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" />
|
||||
<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>
|
||||
|
|
@ -135,6 +115,94 @@ var SearchResultRow = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
var featuredContentItemStyle = {
|
||||
fontSize: '0.95em',
|
||||
marginBottom: '10px',
|
||||
}, featuredContentItemImgStyle = {
|
||||
maxHeight: '90px',
|
||||
display: 'block',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginTop: '5px',
|
||||
float: 'left',
|
||||
}, featuredContentItemDescriptionStyle = {
|
||||
color: '#444',
|
||||
marginBottom: '5px',
|
||||
fontSize: '0.9em',
|
||||
}, featuredContentItemCostStyle = {
|
||||
display: 'block',
|
||||
float: 'right',
|
||||
fontSize: '0.95em',
|
||||
};
|
||||
|
||||
var FeaturedContentItem = React.createClass({
|
||||
propTypes: {
|
||||
name: React.PropTypes.string,
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
metadata: null,
|
||||
title: null,
|
||||
};
|
||||
},
|
||||
componentWillMount: function() {
|
||||
lbry.resolveName(this.props.name, (metadata) => {
|
||||
this.setState({
|
||||
metadata: metadata,
|
||||
title: metadata.name || metadata.stream_name || ('lbry://' + this.props.name),
|
||||
})
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
if (this.state.metadata == null) {
|
||||
// Still waiting for metadata
|
||||
return null;
|
||||
}
|
||||
|
||||
var metadata = this.state.metadata;
|
||||
|
||||
return (
|
||||
<div className="row-fluid" style={featuredContentItemStyle}>
|
||||
<div className="span4">
|
||||
<img src={metadata.thumbnail} alt={'Photo for ' + this.state.title} style={featuredContentItemImgStyle} />
|
||||
</div>
|
||||
<div className="span8">
|
||||
<h4>{this.state.title}</h4>
|
||||
<p style={featuredContentItemDescriptionStyle}>{metadata.description}</p>
|
||||
<div>
|
||||
<WatchLink streamName={this.props.name} />
|
||||
{ ' ' }
|
||||
<DownloadLink streamName={this.props.name} />
|
||||
<div style={featuredContentItemCostStyle}><CreditAmount amount={0.0} isEstimate={true}/></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
});
|
||||
|
||||
var featuredContentStyle = {
|
||||
width: '100%',
|
||||
};
|
||||
|
||||
var FeaturedContent = React.createClass({
|
||||
render: function() {
|
||||
return (<section style={featuredContentStyle}>
|
||||
<h3>Featured content</h3>
|
||||
<div className="row-fluid">
|
||||
<div className="span6">
|
||||
<FeaturedContentItem name="wonderfullife" /> {/* When ready, change to one/two/three/four/five/six */}
|
||||
<FeaturedContentItem name="wonderfullife" />
|
||||
<FeaturedContentItem name="wonderfullife" />
|
||||
</div>
|
||||
<div className="span6">
|
||||
<FeaturedContentItem name="wonderfullife" />
|
||||
<FeaturedContentItem name="wonderfullife" />
|
||||
<FeaturedContentItem name="wonderfullife" />
|
||||
</div>
|
||||
</div>
|
||||
</section>);
|
||||
}
|
||||
});
|
||||
|
||||
var discoverMainStyle = {
|
||||
color: '#333'
|
||||
|
|
@ -198,8 +266,9 @@ var Discover = React.createClass({
|
|||
<section><input type="search" style={searchInputStyle} onChange={this.onQueryChange}
|
||||
placeholder="Find movies, music, games, and more"/></section>
|
||||
{ this.state.searching ? <SearchActive /> : null }
|
||||
{ !this.state.searching && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
|
||||
{ !this.state.searching && !this.state.results.length && this.state.query ? <SearchNoResults query={this.state.query} /> : null }
|
||||
{ !this.state.searching && this.state.query && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
|
||||
{ !this.state.searching && this.state.query && !this.state.results.length ? <SearchNoResults query={this.state.query} /> : null }
|
||||
{/* !this.state.query && !this.state.searching ? <FeaturedContent /> : null */}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -281,7 +350,6 @@ var TopBar = React.createClass({
|
|||
<span style={balanceStyle}>
|
||||
<CreditAmount amount={this.state.balance}/>
|
||||
</span>
|
||||
|
||||
<Link ref="menuButton" title="LBRY Menu" icon="icon-bars" />
|
||||
<MainMenu toggleButton={this.refs.menuButton} />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -13,11 +13,10 @@ progressBarStyle = {
|
|||
display: 'inline-block',
|
||||
},
|
||||
myFilesRowImgStyle = {
|
||||
maxHeight: '100px',
|
||||
display: 'block',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
float: 'left'
|
||||
maxHeight: '100px',
|
||||
display: 'block',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
};
|
||||
|
||||
var MyFilesRow = React.createClass({
|
||||
|
|
@ -38,6 +37,8 @@ var MyFilesRow = React.createClass({
|
|||
}
|
||||
},
|
||||
render: function() {
|
||||
var progressBarWidth = 230; // Move this somewhere better
|
||||
|
||||
if (this.props.completed) {
|
||||
var pauseLink = null;
|
||||
var curProgressBarStyle = {display: 'none'};
|
||||
|
|
@ -47,21 +48,14 @@ var MyFilesRow = React.createClass({
|
|||
onClick={() => { this.onPauseResumeClicked() }} />;
|
||||
|
||||
var curProgressBarStyle = Object.assign({}, progressBarStyle);
|
||||
curProgressBarStyle.width = this.props.ratioLoaded * 230;
|
||||
curProgressBarStyle.borderRightWidth = 230 - (this.props.ratioLoaded * 230) + 2;
|
||||
curProgressBarStyle.width = Math.floor(this.props.ratioLoaded * progressBarWidth) + 'px';
|
||||
curProgressBarStyle.borderRightWidth = progressBarWidth - Math.ceil(this.props.ratioLoaded * progressBarWidth) + 2;
|
||||
}
|
||||
|
||||
if (this.props.showWatchButton) {
|
||||
// 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.lbryUri;
|
||||
} else {
|
||||
var watchUri = 'lbry://' + this.props.lbryUri;
|
||||
}
|
||||
|
||||
var watchLink = <Link href={watchUri} label="Watch" icon="icon-play" button="primary" />;
|
||||
var watchButton = <WatchLink streamName={this.props.lbryUri} />
|
||||
} else {
|
||||
var watchLink = null;
|
||||
var watchButton = null;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -75,7 +69,7 @@ var MyFilesRow = React.createClass({
|
|||
{ ' ' }
|
||||
{this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}
|
||||
<div>{ pauseLink }</div>
|
||||
<div>{ watchLink }</div>
|
||||
<div>{ watchButton }</div>
|
||||
</div>
|
||||
<div className="span1" style={removeIconColumnStyle}>
|
||||
<Link icon="icon-close" title="Remove file" onClick={() => { this.onRemoveClicked() } } /><br />
|
||||
|
|
@ -128,7 +122,9 @@ var MyFilesPage = React.createClass({
|
|||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>My files</h1>
|
||||
<section>
|
||||
{content}
|
||||
</section>
|
||||
<section>
|
||||
<Link href="/" label="<< Return" />
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue