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() { 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 (
{/* @TODO: Switch to OS specific wording */}
); } }); var moreButtonColumnStyle = { 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', }, artStyle = { maxHeight: '100px', display: 'block', marginLeft: 'auto', marginRight: 'auto', }; var MyFilesRow = React.createClass({ onPauseResumeClicked: function() { if (this.props.stopped) { lbry.startFile(this.props.lbryUri); } else { lbry.stopFile(this.props.lbryUri); } }, 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 = { 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; } if (this.props.showWatchButton) { var watchButton = } else { var watchButton = null; } return (
{'Photo

{this.props.title}

{ ' ' } {this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}
{ pauseLink }
{ watchButton }
); } }); var MyFilesPage = React.createClass({ getInitialState: function() { return { filesInfo: null, }; }, componentWillMount: function() { this.updateFilesInfo(); }, updateFilesInfo: function() { lbry.getFilesInfo((filesInfo) => { this.setState({ filesInfo: (filesInfo ? filesInfo : []), }); setTimeout(() => { this.updateFilesInfo() }, 1000); }); }, render: function() { if (this.state.filesInfo === null) { return null; } if (!this.state.filesInfo.length) { var content = You haven't downloaded anything from LBRY yet. Go !; } else { var content = []; for (let fileInfo of this.state.filesInfo) { let {completed, written_bytes, total_bytes, lbry_uri, file_name, download_path, 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(); } } return (

My files

{content}
); } });