lbry-desktop/js/page/my_files.js

293 lines
8.9 KiB
JavaScript
Raw Normal View History

var moreMenuStyle = {
position: 'absolute',
display: 'block',
top: '26px',
right: '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
? (this.props.isMine
? 'Published'
: 'Download complete')
: (parseInt(this.props.ratioLoaded * 100) + '%')}
2016-08-08 05:31:21 +02:00
<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({
_fileTimeout: null,
_fileInfoCheckNum: 0,
_filesOwnership: {},
2016-05-10 12:36:54 +02:00
getInitialState: function() {
return {
filesInfo: null,
filesOwnershipLoaded: false,
filesAvailable: {},
2016-05-10 12:36:54 +02:00
};
},
getDefaultProps: function() {
return {
show: null,
};
},
componentDidMount: function() {
document.title = "My Files";
},
2016-05-10 12:36:54 +02:00
componentWillMount: function() {
this.getFilesOwnership();
this.updateFilesInfo();
},
2016-08-08 02:57:12 +02:00
componentWillUnmount: function() {
if (this._fileTimeout)
2016-08-08 02:57:12 +02:00
{
clearTimeout(this._fileTimeout);
2016-08-08 02:57:12 +02:00
}
},
getFilesOwnership: function() {
lbry.getFilesInfo((filesInfo) => {
if (!filesInfo) {
this.setState({
filesOwnershipLoaded: true,
});
return;
}
var ownershipLoadedCount = 0;
for (let i = 0; i < filesInfo.length; i++) {
let fileInfo = filesInfo[i];
lbry.call('get_my_claim', {name: fileInfo.lbry_uri}, (claim) => {
this._filesOwnership[fileInfo.lbry_uri] = !!claim;
ownershipLoadedCount++;
if (ownershipLoadedCount >= filesInfo.length) {
this.setState({
filesOwnershipLoaded: true,
});
}
}, (claim) => {
this._filesOwnership[fileInfo.lbry_uri] = true;
ownershipLoadedCount++;
if (ownershipLoadedCount >= filesInfo.length) {
this.setState({
filesOwnershipLoaded: true,
});
}
});
}
});
},
updateFilesInfo: function() {
2016-05-10 12:36:54 +02:00
lbry.getFilesInfo((filesInfo) => {
if (!filesInfo) {
filesInfo = [];
}
if (!(this._fileInfoCheckNum % 5)) {
// Time to update file availability status
for (let fileInfo of filesInfo) {
let name = fileInfo.lbry_uri;
lbry.search(name, (results) => {
var result = results[0];
var available = result.name == name && result.available;
if (typeof this.state.filesAvailable[name] === 'undefined' || available != this.state.filesAvailable[name]) {
var newFilesAvailable = Object.assign({}, this.state.filesAvailable);
newFilesAvailable[name] = available;
this.setState({
filesAvailable: newFilesAvailable,
});
}
});
}
}
this._fileInfoCheckNum += 1;
2016-05-10 12:36:54 +02:00
this.setState({
filesInfo: filesInfo,
2016-05-10 12:36:54 +02:00
});
this._fileTimeout = setTimeout(() => { this.updateFilesInfo() }, 1000);
2016-05-10 12:36:54 +02:00
});
},
render: function() {
if (this.state.filesInfo === null || !this.state.filesOwnershipLoaded) {
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;
var isMine = this._filesOwnership[lbry_uri];
if (!metadata || seenUris[lbry_uri] || (this.props.show == 'downloaded' && isMine) ||
(this.props.show == 'published' && !isMine)) {
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}
available={this.state.filesAvailable[lbry_uri]} isMine={isMine} />);
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
}
});