lbry-desktop/js/page/my_files.js

214 lines
6.5 KiB
JavaScript
Raw Normal View History

var moreMenuStyle = {
position: 'absolute',
display: 'block',
top: '26px',
left: '-13px',
};
var MyFilesRowMoreMenu = React.createClass({
onRevealClicked: function() {
lbry.revealFile(this.props.path);
},
onRemoveClicked: function() {
lbry.deleteFile(this.props.lbryUri, false);
},
onDeleteClicked: function() {
2016-08-07 17:27:00 +02:00
var alertText = 'Are you sure you\'d like to delete "' + this.props.title + '?" This will ' +
(this.completed ? ' stop the download and ' : '') +
'permanently remove the file from your system.';
if (confirm(alertText)) {
lbry.deleteFile(this.props.lbryUri);
}
},
render: function() {
return (
<div style={moreMenuStyle}>
<Menu {...this.props}>
2016-08-08 05:31:21 +02:00
<section className="card">
<MenuItem onClick={this.onRevealClicked} label="Reveal file" /> {/* @TODO: Switch to OS specific wording */}
<MenuItem onClick={this.onRemoveClicked} label="Remove from LBRY" />
<MenuItem onClick={this.onDeleteClicked} label="Remove and delete file" />
</section>
</Menu>
</div>
);
}
});
var moreButtonColumnStyle = {
2016-08-07 17:27:00 +02:00
height: '120px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
moreButtonContainerStyle = {
display: 'block',
position: 'relative',
},
moreButtonStyle = {
fontSize: '1.3em',
},
progressBarStyle = {
height: '15px',
width: '230px',
backgroundColor: '#444',
border: '2px solid #eee',
display: 'inline-block',
},
2016-08-07 17:27:00 +02:00
artStyle = {
maxHeight: '100px',
2016-08-26 12:54:30 +02:00
maxWidth: '100%',
2016-08-07 17:27:00 +02:00
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
};
2016-05-10 12:36:54 +02:00
var MyFilesRow = React.createClass({
onPauseResumeClicked: function() {
if (this.props.stopped) {
lbry.startFile(this.props.lbryUri);
} else {
lbry.stopFile(this.props.lbryUri);
}
},
2016-05-10 12:36:54 +02:00
render: function() {
//@TODO: Convert progress bar to reusable component
var progressBarWidth = 230;
if (this.props.completed) {
var pauseLink = null;
var curProgressBarStyle = {display: 'none'};
} else {
var pauseLink = <Link icon={this.props.stopped ? 'icon-play' : 'icon-pause'}
label={this.props.stopped ? 'Resume download' : 'Pause download'}
onClick={() => { this.onPauseResumeClicked() }} />;
var curProgressBarStyle = Object.assign({}, progressBarStyle);
curProgressBarStyle.width = Math.floor(this.props.ratioLoaded * progressBarWidth) + 'px';
curProgressBarStyle.borderRightWidth = progressBarWidth - Math.ceil(this.props.ratioLoaded * progressBarWidth) + 2;
}
2016-05-16 10:19:41 +02:00
if (this.props.showWatchButton) {
var watchButton = <WatchLink streamName={this.props.lbryUri} />
2016-05-16 10:19:41 +02:00
} else {
var watchButton = null;
2016-05-16 10:19:41 +02:00
}
2016-05-10 12:36:54 +02:00
return (
2016-08-08 05:31:21 +02:00
<section className="card">
<div className="row-fluid">
<div className="span3">
2016-08-26 14:03:08 +02:00
<img src={this.props.imgUrl || '/img/default-thumb.svg'} alt={'Photo for ' + this.props.title} style={artStyle} />
2016-08-08 05:31:21 +02:00
</div>
<div className="span8">
<h3>{this.props.pending ? this.props.title : <a href={'/?show=' + this.props.lbryUri}>{this.props.title}</a>}</h3>
{this.props.pending ? <em>This file is pending confirmation</em>
: (
<div>
<div className={this.props.completed ? 'hidden' : ''} style={curProgressBarStyle}></div>
{ ' ' }
{this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}
<div>{ pauseLink }</div>
<div>{ watchButton }</div>
</div>
)
}
</div>
<div className="span1" style={moreButtonColumnStyle}>
{this.props.pending ? null :
<div style={moreButtonContainerStyle}>
<Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" />
<MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title}
lbryUri={this.props.lbryUri} fileName={this.props.fileName}
path={this.props.path}/>
2016-08-07 17:27:00 +02:00
</div>
2016-08-08 05:31:21 +02:00
}
</div>
</div>
2016-08-08 05:31:21 +02:00
</section>
2016-05-10 12:36:54 +02:00
);
}
});
var MyFilesPage = React.createClass({
2016-08-08 02:57:12 +02:00
fileTimeout: null,
2016-05-10 12:36:54 +02:00
getInitialState: function() {
return {
filesInfo: null,
};
},
componentDidMount: function() {
document.title = "My Files";
},
2016-05-10 12:36:54 +02:00
componentWillMount: function() {
this.updateFilesInfo();
},
2016-08-08 02:57:12 +02:00
componentWillUnmount: function() {
if (this.fileTimeout)
{
clearTimeout(this.fileTimeout);
}
},
updateFilesInfo: function() {
2016-05-10 12:36:54 +02:00
lbry.getFilesInfo((filesInfo) => {
this.setState({
filesInfo: (filesInfo ? filesInfo : []),
2016-05-10 12:36:54 +02:00
});
2016-08-08 02:57:12 +02:00
this.fileTimeout = setTimeout(() => { this.updateFilesInfo() }, 1000);
2016-05-10 12:36:54 +02:00
});
},
render: function() {
if (this.state.filesInfo === null) {
return (
<main className="page">
<BusyMessage message="Loading" />
</main>
);
2016-05-16 10:19:41 +02:00
}
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>;
2016-05-10 12:36:54 +02:00
} else {
2016-08-07 17:27:00 +02:00
var content = [],
2016-08-07 17:29:08 +02:00
seenUris = {};
2016-05-16 10:19:41 +02:00
for (let fileInfo of this.state.filesInfo) {
let {completed, written_bytes, total_bytes, lbry_uri, file_name, download_path,
2016-08-07 17:27:00 +02:00
stopped, metadata} = fileInfo;
2016-08-07 17:29:08 +02:00
if (!metadata || seenUris[lbry_uri])
{
continue;
}
2016-08-07 17:29:08 +02:00
seenUris[lbry_uri] = true;
let {title, thumbnail} = metadata;
2016-05-16 10:19:41 +02:00
if (!fileInfo.pending && typeof metadata == 'object') {
var {title, thumbnail} = metadata;
var pending = false;
} else {
var title = null;
var thumbnail = null;
var pending = true;
}
2016-05-16 10:19:41 +02:00
var ratioLoaded = written_bytes / total_bytes;
var mediaType = lbry.getMediaType(metadata.content_type, file_name);
var showWatchButton = (mediaType == 'video');
2016-05-16 10:19:41 +02:00
2016-08-07 17:29:08 +02:00
content.push(<MyFilesRow key={lbry_uri} lbryUri={lbry_uri} title={title || ('lbry://' + lbry_uri)} completed={completed} stopped={stopped}
ratioLoaded={ratioLoaded} imgUrl={thumbnail} path={download_path}
showWatchButton={showWatchButton} pending={pending} />);
2016-05-10 12:36:54 +02:00
}
}
2016-05-16 10:19:41 +02:00
return (
<main className="page">
2016-08-08 05:31:21 +02:00
{content}
2016-05-16 10:19:41 +02:00
</main>
);
2016-05-10 12:36:54 +02:00
}
});