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

Add Watch button to video streams

Browse source
This commit is contained in:
Alex Liebowitz 2016-05-16 04:19:41 -04:00
parent ecc20adaa9
commit f8f1d97150
1 changed files with 50 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
js/page/my_files.js
View file

@ -11,6 +11,13 @@ progressBarStyle = {
backgroundColor: '#444',
border: '2px solid #eee',
display: 'inline-block',
},
myFilesRowImgStyle = {
maxHeight: '100px',
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
float: 'left'
};
var MyFilesRow = React.createClass({
@ -43,10 +50,24 @@ var MyFilesRow = React.createClass({
curProgressBarStyle.width = this.props.ratioLoaded * 230;
curProgressBarStyle.borderRightWidth = 230 - (this.props.ratioLoaded * 230) + 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" />;
} else {
var watchLink = null;
}
return (
<div className="row-fluid">
<div className="span3">
<img src={this.props.imgUrl} style={searchRowImgStyle} alt={'Photo for ' + this.props.title} style={searchRowImgStyle} />
<img src={this.props.imgUrl} alt={'Photo for ' + this.props.title} style={myFilesRowImgStyle} />
</div>
<div className="span6">
<h2>{this.props.title}</h2>
@ -54,6 +75,7 @@ var MyFilesRow = React.createClass({
{ ' ' }
{this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}
<div>{ pauseLink }</div>
<div>{ watchLink }</div>
</div>
<div className="span1" style={removeIconColumnStyle}>
<Link icon="icon-close" title="Remove file" onClick={() => { this.onRemoveClicked() } } /><br />
@ -83,28 +105,33 @@ var MyFilesPage = React.createClass({
render: function() {
if (this.state.filesInfo === null) {
return null;
} else {
if (this.state.filesInfo.length == 0) {
var content = <span>You haven't downloaded anything from LBRY yet. Go <Link href="/" label="search for your first download" />!</span>;
} else {
var content = [];
for (let {completed, written_bytes, total_bytes, lbry_uri, stopped, metadata} of this.state.filesInfo) {
let {name, stream_name, thumbnail} = metadata;
var title = (name || stream_name || ('lbry://' + lbry_uri));
var ratioLoaded = written_bytes / total_bytes;
content.push(<MyFilesRow lbryUri={lbry_uri} title={title} completed={completed} stopped={stopped}
ratioLoaded={ratioLoaded} imgUrl={thumbnail}/>);
}
}
return (
<main>
<h1>My files</h1>
{content}
<section>
<Link href="/" label="<< Return" />
</section>
</main>
);
}
if (!this.state.filesInfo.length) {
var content = <span>You haven't downloaded anything from LBRY yet. Go <Link href="/" label="search for your first download" />!</span>;
} else {
var content = [];
for (let fileInfo of this.state.filesInfo) {
let {completed, written_bytes, total_bytes, lbry_uri, file_name, stopped, metadata} = fileInfo;
let {name, stream_name, thumbnail} = metadata;
var title = (name || stream_name || ('lbry://' + lbry_uri));
var ratioLoaded = written_bytes / total_bytes;
var showWatchButton = (lbry.getMediaType(file_name) == 'video');
content.push(<MyFilesRow lbryUri={lbry_uri} title={title} completed={completed} stopped={stopped}
ratioLoaded={ratioLoaded} imgUrl={thumbnail}
showWatchButton={showWatchButton}/>);
}
}
return (
<main>
<h1>My files</h1>
{content}
<section>
<Link href="/" label="<< Return" />
</section>
</main>
);
}
});