lbry-desktop/ui/js/app.js

353 lines
12 KiB
JavaScript
Raw Normal View History

2016-11-22 21:19:08 +01:00
import React from 'react';
import {Line} from 'rc-progress';
2016-11-22 21:19:08 +01:00
import lbry from './lbry.js';
import SettingsPage from './page/settings.js';
import HelpPage from './page/help.js';
import WatchPage from './page/watch.js';
import ReportPage from './page/report.js';
import StartPage from './page/start.js';
import ClaimCodePage from './page/claim_code.js';
import ReferralPage from './page/referral.js';
import WalletPage from './page/wallet.js';
import DetailPage from './page/show.js';
import PublishPage from './page/publish.js';
import DiscoverPage from './page/discover.js';
import SplashScreen from './component/splash.js';
2016-12-29 10:23:28 +01:00
import DeveloperPage from './page/developer.js';
2017-01-13 23:18:37 +01:00
import {FileListDownloaded, FileListPublished} from './page/file-list.js';
2016-11-22 21:19:08 +01:00
import Drawer from './component/drawer.js';
import Header from './component/header.js';
import {Modal, ExpandableModal} from './component/modal.js';
2016-11-22 21:19:08 +01:00
import {Link} from './component/link.js';
const {remote, ipcRenderer, shell} = require('electron');
const {download} = remote.require('electron-dl');
const os = require('os');
const path = require('path');
const app = require('electron').remote.app;
2016-04-10 02:00:56 +02:00
var App = React.createClass({
_error_key_labels: {
connectionString: 'API connection string',
method: 'Method',
params: 'Parameters',
code: 'Error code',
message: 'Error message',
data: 'Error data',
},
_upgradeDownloadItem: null,
2017-03-26 20:30:18 +02:00
_isMounted: false,
_version: null,
// Temporary workaround since electron-dl throws errors when you try to get the filename
2017-03-26 20:30:18 +02:00
getDefaultProps: function() {
return {
address: window.location.search
};
},
getUpgradeFilename: function() {
if (os.platform() == 'darwin') {
return `LBRY-${this._version}.dmg`;
} else if (os.platform() == 'linux') {
return `LBRY_${this._version}_amd64.deb`;
} else {
return `LBRY.Setup.${this._version}.exe`;
}
},
2017-03-26 20:30:18 +02:00
getViewingPageAndArgs: function(address) {
2016-04-21 11:51:27 +02:00
// For now, routes are in format ?page or ?page=args
2017-03-27 07:44:13 +02:00
let [isMatch, viewingPage, pageArgs] = address.match(/\??([^=]*)(?:=(.*))?/);
2016-04-20 12:28:13 +02:00
return {
viewingPage: viewingPage,
2017-03-26 20:30:18 +02:00
pageArgs: pageArgs === undefined ? null : pageArgs
};
},
getInitialState: function() {
var match, param, val, viewingPage, pageArgs,
drawerOpenRaw = sessionStorage.getItem('drawerOpen');
return Object.assign(this.getViewingPageAndArgs(this.props.address), {
drawerOpen: drawerOpenRaw !== null ? JSON.parse(drawerOpenRaw) : true,
errorInfo: null,
2016-10-21 09:47:06 +02:00
modal: null,
updateUrl: null,
isOldOSX: null,
downloadProgress: null,
downloadComplete: false,
2017-03-26 20:30:18 +02:00
});
2016-04-10 02:00:56 +02:00
},
componentWillMount: function() {
2016-10-22 11:22:44 +02:00
document.addEventListener('unhandledError', (event) => {
this.alertError(event.detail);
});
2017-03-26 20:30:18 +02:00
//open links in external browser and skip full redraw on changing page
2017-03-27 07:44:13 +02:00
document.addEventListener('click', (event) => {
var target = event.target;
while (target && target !== document) {
if (target.matches('a[href^="http"]')) {
event.preventDefault();
shell.openExternal(target.href);
return;
}
2017-03-26 20:30:18 +02:00
if (target.matches('a[href^="?"]')) {
event.preventDefault();
if (this._isMounted) {
this.setState(this.getViewingPageAndArgs(target.getAttribute('href')));
}
}
target = target.parentNode;
}
2017-03-27 07:44:13 +02:00
});
lbry.checkNewVersionAvailable((isAvailable) => {
if (!isAvailable || sessionStorage.getItem('upgradeSkipped')) {
return;
}
lbry.getVersionInfo((versionInfo) => {
this._version = versionInfo.lbrynet_version; // temp for building upgrade filename
var isOldOSX = false;
if (versionInfo.os_system == 'Darwin') {
var updateUrl = 'https://lbry.io/get/lbry.dmg';
var maj, min, patch;
[maj, min, patch] = versionInfo.lbrynet_version.split('.');
if (maj == 0 && min <= 2 && patch <= 2) {
isOldOSX = true;
}
} else if (versionInfo.os_system == 'Linux') {
var updateUrl = 'https://lbry.io/get/lbry.deb';
} else if (versionInfo.os_system == 'Windows') {
var updateUrl = 'https://lbry.io/get/lbry.exe';
} else {
var updateUrl = 'https://lbry.io/get';
}
this.setState({
modal: 'upgrade',
isOldOSX: isOldOSX,
updateUrl: updateUrl,
})
});
});
},
openDrawer: function() {
sessionStorage.setItem('drawerOpen', true);
this.setState({ drawerOpen: true });
},
closeDrawer: function() {
sessionStorage.setItem('drawerOpen', false);
this.setState({ drawerOpen: false });
},
2016-10-21 09:47:06 +02:00
closeModal: function() {
this.setState({
modal: null,
});
},
2017-03-26 20:30:18 +02:00
componentDidMount: function() {
this._isMounted = true;
},
componentWillUnmount: function() {
this._isMounted = false;
},
2016-10-21 09:47:06 +02:00
handleUpgradeClicked: function() {
// TODO: create a callback for onProgress and have the UI
// show download progress
// TODO: calling lbry.stop() ends up displaying the "daemon
// unexpectedly stopped" page. Have a better way of shutting down
let dir = app.getPath('temp');
let options = {
onProgress: (p) => this.setState({downloadProgress: Math.round(p * 100)}),
directory: dir,
};
download(remote.getCurrentWindow(), this.state.updateUrl, options)
.then(downloadItem => {
/**
* TODO: get the download path directly from the download object. It should just be
* downloadItem.getSavePath(), but the copy on the main process is being garbage collected
* too soon.
*/
this._upgradeDownloadItem = downloadItem;
this._upgradeDownloadPath = path.join(dir, this.getUpgradeFilename());
this.setState({
downloadComplete: true
});
});
this.setState({modal: 'downloading'});
2016-10-21 09:47:06 +02:00
},
handleStartUpgradeClicked: function() {
ipcRenderer.send('upgrade', this._upgradeDownloadPath);
},
cancelUpgrade: function() {
if (this._upgradeDownloadItem) {
/*
* Right now the remote reference to the download item gets garbage collected as soon as the
* the download is over (maybe even earlier), so trying to cancel a finished download may
* throw an error.
*/
try {
this._upgradeDownloadItem.cancel();
} catch (err) {
// Do nothing
}
}
this.setState({
downloadProgress: null,
downloadComplete: false,
modal: null,
});
},
2016-10-21 09:47:06 +02:00
handleSkipClicked: function() {
sessionStorage.setItem('upgradeSkipped', true);
this.setState({
modal: null,
});
},
onSearch: function(term) {
this.setState({
viewingPage: 'discover',
pageArgs: term
});
2016-08-08 02:57:12 +02:00
},
alertError: function(error) {
var errorInfoList = [];
for (let key of Object.keys(error)) {
let val = typeof error[key] == 'string' ? error[key] : JSON.stringify(error[key]);
let label = this._error_key_labels[key];
2016-10-22 11:50:55 +02:00
errorInfoList.push(<li key={key}><strong>{label}</strong>: <code>{val}</code></li>);
}
this.setState({
modal: 'error',
errorInfo: <ul className="error-modal__error-list">{errorInfoList}</ul>,
});
},
getHeaderLinks: function()
{
switch(this.state.viewingPage)
{
case 'wallet':
case 'send':
case 'receive':
case 'claim':
2016-09-08 10:17:08 +02:00
case 'referral':
return {
'?wallet' : 'Overview',
'?send' : 'Send',
'?receive' : 'Receive',
2016-09-08 10:17:08 +02:00
'?claim' : 'Claim Beta Code',
2016-09-09 13:40:27 +02:00
'?referral' : 'Check Referral Credit',
};
case 'downloaded':
case 'published':
return {
'?downloaded': 'Downloaded',
'?published': 'Published',
};
default:
return null;
}
},
getMainContent: function()
{
switch(this.state.viewingPage)
{
case 'settings':
return <SettingsPage />;
case 'help':
return <HelpPage />;
case 'watch':
return <WatchPage name={this.state.pageArgs} />;
case 'report':
return <ReportPage />;
case 'downloaded':
2017-01-13 23:18:37 +01:00
return <FileListDownloaded />;
case 'published':
2017-01-13 23:18:37 +01:00
return <FileListPublished />;
case 'start':
return <StartPage />;
case 'claim':
return <ClaimCodePage />;
2016-09-08 10:17:08 +02:00
case 'referral':
return <ReferralPage />;
case 'wallet':
case 'send':
case 'receive':
return <WalletPage viewingPage={this.state.viewingPage} />;
case 'show':
return <DetailPage name={this.state.pageArgs} />;
case 'publish':
return <PublishPage />;
2016-12-29 10:23:28 +01:00
case 'developer':
return <DeveloperPage />;
case 'discover':
default:
return <DiscoverPage {... this.state.pageArgs !== null ? {query: this.state.pageArgs} : {} } />;
}
},
2016-04-10 02:00:56 +02:00
render: function() {
var mainContent = this.getMainContent(),
headerLinks = this.getHeaderLinks(),
searchQuery = this.state.viewingPage == 'discover' && this.state.pageArgs ? this.state.pageArgs : '';
return (
2016-08-08 05:39:44 +02:00
this.state.viewingPage == 'watch' ?
mainContent :
<div id="window" className={ this.state.drawerOpen ? 'drawer-open' : 'drawer-closed' }>
<Drawer onCloseDrawer={this.closeDrawer} viewingPage={this.state.viewingPage} />
<div id="main-content" className={ headerLinks ? 'with-sub-nav' : 'no-sub-nav' }>
<Header onOpenDrawer={this.openDrawer} initialQuery={searchQuery} onSearch={this.onSearch} links={headerLinks} viewingPage={this.state.viewingPage} />
2016-08-08 05:39:44 +02:00
{mainContent}
</div>
2017-01-13 23:05:09 +01:00
<Modal isOpen={this.state.modal == 'upgrade'} contentLabel="Update available"
type="confirm" confirmButtonLabel="Upgrade" abortButtonLabel="Skip"
onConfirmed={this.handleUpgradeClicked} onAborted={this.handleSkipClicked}>
<p>Your version of LBRY is out of date and may be unreliable or insecure.</p>
{this.state.isOldOSX
? <p>Before installing the new version, make sure to exit LBRY. If you started the app, click the LBRY icon in your status bar and choose "Quit."</p>
: null}
2016-10-21 09:47:06 +02:00
</Modal>
<Modal isOpen={this.state.modal == 'downloading'} contentLabel="Downloading Update" type="custom">
2017-03-17 23:05:25 +01:00
Downloading Update{this.state.downloadProgress ? `: ${this.state.downloadProgress}%` : null}
<Line percent={this.state.downloadProgress} strokeWidth="4"/>
2017-03-17 23:05:25 +01:00
{this.state.downloadComplete ? (
<div>
<br />
<p>Click "Begin Upgrade" to start the upgrade process.</p>
<p>The app will close, and you will be prompted to install the latest version of LBRY.</p>
<p>After the install is complete, please reopen the app.</p>
</div>
) : null }
<div className="modal__buttons">
2017-03-17 23:05:25 +01:00
{this.state.downloadComplete
? <Link button="primary" label="Begin Upgrade" className="modal__button" onClick={this.handleStartUpgradeClicked} />
: null}
2017-03-17 23:05:25 +01:00
<Link button="alt" label="Cancel" className="modal__button" onClick={this.cancelUpgrade} />
</div>
</Modal>
<ExpandableModal isOpen={this.state.modal == 'error'} contentLabel="Error" className="error-modal"
overlayClassName="error-modal-overlay" onConfirmed={this.closeModal}
extraContent={this.state.errorInfo}>
<h3 className="modal__header">Error</h3>
<div className="error-modal__content">
<div><img className="error-modal__warning-symbol" src={lbry.imagePath('warning.png')} /></div>
<p>We're sorry that LBRY has encountered an error. This has been reported and we will investigate the problem.</p>
</div>
</ExpandableModal>
</div>
);
2016-04-10 02:00:56 +02:00
}
2016-08-23 16:53:45 +02:00
});
2016-11-22 21:19:08 +01:00
export default App;